/* 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;
}

/* ===DPM-UPSELL-YES-BLOCK=== */
/* upsell one-click buttons — GENERATED by gen-money-css.mjs from this product's own designed
   upsell pages (do not hand-edit here; edit the pages or the generator and re-run).
   First button = YES: per-page visual clone of that page's designed .cta-btn, matched by the
   fleet-stable button id, with the designed wording (incl. the ">>" and the price sub-line)
   INJECTED via pseudo-elements — the native label is collapsed and builder sub-text hidden, so
   builder label edits will NOT render on these buttons; wording changes go through the designed
   pages + a re-run of this generator + an asset redeploy.
   Second button = GHL's decline: hidden; the page's own designed decline links proxy-click it.
   The GHL section holding the buttons is painted to the page tint, and all four nested GHL
   wrapper layers (section 20px, row 10px, column 10px, .inner 10px) lose their vertical padding
   on pages carrying a native button (GHL sections are not DOM siblings — sibling selectors never
   match; body:has is the working scope), so the pasted content's designed spacing takes over. */
.c-section:has(.c-button) { background: #F4EAE0 !important; }
body:has(.c-button) .c-section,
body:has(.c-button) .c-row,
body:has(.c-button) .c-column,
body:has(.c-button) .c-wrapper > .inner { padding-top: 0 !important; padding-bottom: 0 !important; }
.c-button { width: 100% !important; margin: 0 auto !important; text-align: center !important; }
.c-button .custom {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
  background: #C75B39 !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  border-radius: 5px !important;
  padding: 16px 36px !important;
  width: auto !important;
  font-family: 'Montserrat', system-ui, sans-serif !important;
  text-align: center !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .15) !important;
  transition: background .2s ease !important;
}
.c-button .custom:hover { background: #A8462A !important; }
.c-button .custom .main-heading-button {
  font-size: clamp(17px, 2.2vw, 21px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
}
.c-button .custom .sub-heading-group,
.c-button .custom .sub-heading-button {
  font-size: clamp(13px, 1.6vw, 15px) !important;
  font-weight: 600 !important;
  opacity: .95 !important;
}
/* upsell-1 YES override: clone of ITS designed .cta-btn (flat success shape, 16px/600) */
.button-QHRLkL7BnP .custom {
  background: #4F8A4C !important;
  padding: 16px 32px !important;
  box-shadow: none !important;
}
.button-QHRLkL7BnP .custom:hover { background: color-mix(in srgb, #4F8A4C 82%, #2A1A12) !important; }
.button-QHRLkL7BnP .custom .main-heading-button { font-size: 0 !important; line-height: 0 !important; }
.button-QHRLkL7BnP .custom .main-heading-button::after {
  content: "Yes, Turn On My Auto-Booking System >>" !important;
  display: block !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  color: #fff !important;
}
.button-QHRLkL7BnP .custom::after {
  content: "Only $97 one time" !important;
  display: block !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 1.4 !important;
  color: #fff !important;
}
.button-QHRLkL7BnP .custom .sub-heading-group { display: none !important; }
/* upsell-2 YES override: injected wording at ITS designed sizes */
.button-qx63sd1UZW .custom .main-heading-button { font-size: 0 !important; line-height: 0 !important; }
.button-qx63sd1UZW .custom .main-heading-button::after {
  content: "Yes - Give Me My 5-Star Referral Engine >>" !important;
  display: block !important;
  font-size: clamp(17px, 2.2vw, 21px) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  color: #fff !important;
}
.button-qx63sd1UZW .custom::after {
  content: "Only $197 one time" !important;
  display: block !important;
  font-size: clamp(13px, 1.6vw, 15px) !important;
  font-weight: 600 !important;
  opacity: .95 !important;
  color: #fff !important;
}
.button-qx63sd1UZW .custom .sub-heading-group { display: none !important; }
.c-button + .c-button,
.c-button ~ .c-button { display: none !important; }
@media (max-width: 480px) {
  .c-button .custom { padding: 14px 24px !important; width: 100% !important; max-width: 420px !important; }
}
/* ===END-DPM-UPSELL-YES-BLOCK=== */
