/* dpm-money.css - tames the GHL money elements so they sit inside the designed pages.
   Loaded by the checkout/upsell bottom chunks. Scoped to the teleport slot + GHL classes. */

/* the form's original (now empty) builder section: collapse it completely */
.c-order.c-wrapper:not(#dpm-form-slot .c-order) { margin: 0; }

/* once teleported into the designed order card, the form fills the card width */
#dpm-form-slot .c-order,
#dpm-form-slot .container-order-form-two-step { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; }
/* breathing room between the step tabs and the first field */
#dpm-form-slot .form-body { width: 100% !important; max-width: 100% !important; padding: 18px 0 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; }
#dpm-form-slot section.info { margin-top: 6px !important; }

/* the checkout's left column repeats the guarantee seal right under the trust strip;
   the right column already carries it next to the price. Hide the left one. */
.checkout-row .col-left img[alt*="guarantee seal" i] { display: none !important; }

/* inputs: match the designed card's fields */
#dpm-form-slot .form-input,
#dpm-form-slot input,
#dpm-form-slot select {
  font-family: inherit !important;
  font-size: 15px !important;
  border: 1.5px solid #D8E0EA !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
}

/* primary button: brand blue, big, rounded */
#dpm-form-slot button,
#dpm-form-slot .btn,
#dpm-form-slot [type="submit"] {
  background: #2563EB !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
  font-size: 17px !important;
  padding: 14px 18px !important;
  width: 100% !important;
  color: #fff !important;
}

/* VISUAL-TEST ONLY: hide the physical-product fields the element shows by default.
   The real fix is turning these off in the element settings (they may still validate
   if left enabled; this css exists so the design can be judged now). */
#dpm-form-slot input[placeholder*="Company" i],
#dpm-form-slot input[placeholder*="Phone" i],
#dpm-form-slot input[placeholder*="Street" i],
#dpm-form-slot input[placeholder*="City" i],
#dpm-form-slot input[placeholder*="Zip" i],
#dpm-form-slot input[placeholder*="State" i],
#dpm-form-slot select { display: none !important; }
#dpm-form-slot div:has(> input[placeholder*="Street" i]),
#dpm-form-slot div:has(> input[placeholder*="City" i]),
#dpm-form-slot section:has(input[placeholder*="Street" i]) hr,
#dpm-form-slot [class*="shipping" i] { display: none !important; }

/* step header strip: tighten and align to the card */
#dpm-form-slot [class*="step" i] h1,
#dpm-form-slot [class*="step" i] h2 { font-size: 16px !important; }

/* landing opt-in form, teleported into the order box (mirrors the live source page) */
#dpm-optin-slot .c-form,
#dpm-optin-slot .form-builder--wrap,
#dpm-optin-slot form { width: 100% !important; max-width: 100% !important; padding: 0 !important; margin: 0 !important; background: transparent !important; box-shadow: none !important; }
#dpm-optin-slot input {
  font-family: inherit !important;
  font-size: 15px !important;
  border: 1.5px solid #D8E0EA !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
}
#dpm-optin-slot button,
#dpm-optin-slot [type="submit"] {
  background: #2563EB !important;
  border: none !important;
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  padding: 15px 18px !important;
  width: 100% !important;
  color: #fff !important;
}

/* upsell one-click buttons (GHL button elements between the code chunks).
   First button = YES: big, branded, prominent where the designed primary CTA was.
   Second button = GHL's decline: hidden; the page's own designed decline links proxy-click it. */
.c-button .custom {
  background: #2563EB !important;
  color: #fff !important;
  border: none !important;
  border-radius: 12px !important;
  font-weight: 800 !important;
  font-size: 19px !important;
  padding: 18px 28px !important;
  width: 100% !important;
  max-width: 640px !important;
  box-shadow: 0 6px 18px rgba(37, 99, 235, .35) !important;
}
.c-button { width: 100% !important; max-width: 640px !important; margin: 0 auto !important; }
.c-button + .c-button,
.c-button ~ .c-button { display: none !important; }