/* ==========================================================================
   AstroNavigations — checkout theme
   Dark-navy checkout: navy page, single white card with the stepper, form,
   and a cream order-summary column. Palette matches the funnel pages.
   ========================================================================== */

:root {
  --astro-navy:       #0B1428;
  --astro-navy-soft:  #101B33;
  --astro-ink:        #12224A;
  --astro-blue:       #1B3E6B;
  --astro-gold:       #C9A96E;
  --astro-gold-light: #E9C77E;
  --astro-gold-deep:  #B79155;
  --astro-btn:        #0E1D3F;
  --astro-cream:      #FAF6EE;
  --astro-line:       #E4DED4;
  --astro-input-line: #D9DEE9;
  --astro-font: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
}

body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6, p, a, li, span, label, legend {
  font-family: var(--astro-font);
}
body { -webkit-font-smoothing: antialiased; }

/* --------------------------------------------------------------------------
   1. Page background — solid deep navy, the card floats on it
   -------------------------------------------------------------------------- */
body#encore-theme {
  background: var(--astro-navy);
}
main > .section { background: transparent !important; }

/* the checkout section has no padding settings in its schema, so spacing lives here */
main > .section:last-child .sizer { padding-top: 26px; padding-bottom: 64px; }
@media (max-width: 767px) {
  main > .section:last-child .sizer { padding-top: 12px; padding-bottom: 36px; }
}

/* --------------------------------------------------------------------------
   2. Header — navy bar, gold wordmark, "Secure Checkout" label
   -------------------------------------------------------------------------- */
.header { background-color: var(--astro-navy); border-bottom: 0; }
.header .header__container { padding-top: 18px; padding-bottom: 12px; max-width: 1240px; }
.header .logo { text-decoration: none; display: inline-flex; align-items: center; gap: 14px; }
.header .logo__text {
  color: var(--astro-gold-light);
  letter-spacing: .26em; text-transform: uppercase;
  font-size: clamp(15px, 1.3vw, 23px); margin: 0; white-space: nowrap;
}
.header .logo__image { width: auto !important; max-width: 200px; max-height: 52px; }

/* the CTA block is used as a plain "Secure Checkout" label */
.header .header__block .btn, .header .btn--outline {
  background: transparent !important; border: 0 !important; padding: 0 !important;
  color: #FFFFFF !important;
  font-size: clamp(14px, 1vw, 19px); text-transform: none;
  cursor: default; pointer-events: none;
}
.header .header__block .btn::before {
  content: "\f023";
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900; margin-right: 10px; font-size: .85em;
  color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   3. Intro heading (section ck_intro) is hidden for this design.
   If re-enabled, it renders light-on-navy with the star divider.
   -------------------------------------------------------------------------- */
#section-ck_intro .block-type--text .text-color, #section-ck_intro p, #section-ck_intro h1 {
  color: #F5F0E8 !important;
}
#section-ck_intro .block-type--text > .block::after {
  content: "";
  display: block;
  width: 300px; max-width: 80%; height: 20px;
  margin: 26px auto 0;
  background: url("astro-divider-star.png") no-repeat center/contain;
}

/* --------------------------------------------------------------------------
   4. The checkout card — the section row is ONE white card: the checkout form
   (widget) on the left, and the custom Astro blocks (Order Summary +
   Secure & Help) as the cream column on the right. The widget's own built-in
   summary is hidden; the Astro Order Summary block is the summary, with
   static content edited per offer in the block settings.
   -------------------------------------------------------------------------- */
#section-1744906803654 .container { max-width: 1290px; }
#section-1744906803654 .container > .row {
  background: #FFFFFF;
  border: 2px solid #1C2C50;
  border-radius: 16px;
  box-shadow: 0 26px 70px rgba(0, 0, 0, .45);
  overflow: hidden;
  margin: 0;
}

/* form side (white) */
#section-1744906803654 .checkout-column {
  padding: 18px 26px 30px !important;
}

/* summary side (cream, full height, hairline divider) */
#section-1744906803654 .blocks-column {
  background: var(--astro-cream);
  border-left: 1px solid var(--astro-line);
  padding: 44px 34px 36px !important;
}
#section-1744906803654 .blocks-column .block { background: transparent; }

@media (max-width: 1023px) {
  /* stacked: form first, summary blocks after */
  #section-1744906803654 .checkout-column { padding: 10px 14px 4px !important; }
  #section-1744906803654 .blocks-column {
    background: transparent;
    border-left: 0;
    padding: 6px 14px 24px !important;
  }
}

/* The widget carries no card chrome of its own */
.kjb-embedded-checkout {
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  max-width: none;
}

/* Hide the widget's built-in summary — the Astro Order Summary block replaces it.
   Note: this hides it on every checkout step. */
.kjb-embedded-checkout :is(aside, [class*="summary" i]) {
  display: none !important;
}
/* ...and let the remaining form column fill the widget */
.kjb-embedded-checkout :is(div, section):has(> :is(aside, [class*="summary" i])) > :not(aside):not([class*="summary" i]) {
  width: 100% !important;
  flex: 1 1 100% !important;
  min-width: 0;
}