/* ============================================================
   GloriousDaily Checkout Styler — "stacked" theme
   Vertical single-column card layout at every viewport.
   Desktop: centered column max 560px. Mobile: centered column max 480px.
   Card internals use a 2-col mini-grid (image left, body right) — the
   same layout as the default theme's mobile breakpoint, promoted to
   unconditional. Shell CSS (form widening, FunnelKit container hiding)
   mirrors the default theme so live behaviour is unchanged outside the
   cards area.
   ============================================================ */

/* ─── VARIABLES ──────────────────────────────────────────── */
:root {
  --gd-cs-primary: #200901;
  --gd-cs-accent: #ffa622;
  --gd-cs-accent-dark: #e08f00;
  --gd-cs-border: #ddd;
  --gd-cs-border-selected: #200901;
  --gd-cs-bg-card: #ffffff;
  --gd-cs-bg-badge-popular: #e08f00;
  --gd-cs-bg-badge-best: #2a7d4f;
  --gd-cs-bg-badge-most: #0a3d62;
  --gd-cs-text-light: #ffffff;
  --gd-cs-text-dark: #200901;
  --gd-cs-text-muted: #666;
  --gd-cs-radius: 12px;
  --gd-cs-shadow: 0 2px 8px rgba(0,0,0,0.08);
  --gd-cs-shadow-hover: 0 4px 16px rgba(0,0,0,0.12);
}

/* ─── WIDEN THE FUNNELKIT CHECKOUT FORM ─────────────────── */
body #wfacp-e-form .wfacp_form {
  max-width: 720px !important;
}
body .wfacp-inner-form-detail-wrap {
  max-width: 720px !important;
  width: 100% !important;
}

/* ─── HIDE ORIGINAL FUNNELKIT SELECT PRODUCT HEADING ────── */
#product_switching_field .wfacp-product-switch-title {
  display: none !important;
}

/* ─── PERMANENTLY HIDE THE ORIGINAL FUNNELKIT PRODUCT CONTAINER VIA CSS ── */
/* This fires immediately when the DOM is rendered (before JS runs),
   eliminating any flash of the original layout.
   The container is still in the DOM so FunnelKit's JS can interact with it. */
#product_switching_field .wfacp_product_switcher_container {
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Also hide the fieldset border/padding of the panel itself */
#product_switching_field {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* ─── OVERLAY UI WRAPPER ─────────────────────────────────── */
.gd-overlay-ui {
  width: 100%;
  box-sizing: border-box;
  font-family: inherit;
  margin-bottom: 20px;
  /* Cap + auto-center HERE (not per-child) so heading, plan-toggle,
     cards-group AND the free-gift banner all share one alignment. Was
     previously only on .gd-cards-group, which left heading/banner wider
     than the cards on viewports >cap (visible at ≥600px: heading + banner
     L=25 / cards L=60 — three different left edges). Single source of
     truth at the container; .gd-cards-group's own max-width below is now
     a harmless equal redundancy (left alone — minimum delta). */
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ─── SECTION HEADINGS ──────────────────────────────────── */
.gd-section-heading {
  margin-bottom: 16px;
}

.gd-section-heading h3 {
  font-size: 22px !important;
  font-weight: 700 !important;
  color: var(--gd-cs-text-dark) !important;
  margin: 0 0 0 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

.gd-section-heading h3::after {
  content: '';
  flex: 1;
  height: 2px;
  background: var(--gd-cs-border);
}

/* ─── PLAN TOGGLE ────────────────────────────────────────── */
.gd-plan-toggle-wrap {
  margin-bottom: 24px;
}

.gd-plan-toggle {
  display: flex;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  border: 2px solid var(--gd-cs-border);
}

.gd-plan-toggle button.gd-toggle-btn {
  flex: 1;
  padding: 14px 20px;
  border: none;
  background: var(--gd-cs-bg-card);
  font-size: 15px;
  font-weight: 600;
  color: var(--gd-cs-text-dark);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
  position: relative;
  line-height: 1.4;
  text-align: center;
}

.gd-plan-toggle button.gd-toggle-btn.active {
  background: var(--gd-cs-primary);
  color: var(--gd-cs-text-light);
}

.gd-plan-toggle button.gd-toggle-btn:hover:not(.active) {
  background: #f5f5f5;
}

.gd-plan-toggle button.gd-toggle-btn .gd-toggle-badge {
  display: inline-block;
  background: var(--gd-cs-bg-badge-most);
  color: var(--gd-cs-text-light);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 8px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

/* ─── QUANTITY HEADING ───────────────────────────────────── */
.gd-qty-heading {
  margin-bottom: 16px;
}

/* ─── CARDS GROUP (vertical stack) ──────────────────────── */
.gd-cards-group {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 auto 8px;
  padding-top: 20px; /* space for badge overhang on first card */
  box-sizing: border-box;
  width: 100%;
  max-width: 560px; /* desktop column width */
  overflow: visible;
}

/* ─── INDIVIDUAL CUSTOM CARD — 2-col mini-grid ─────────── */
/* Left col: product image (120px desktop / 100px mobile)
   Right col: label on top row, body (price/savings/etc.) below.
   We use display:contents on .gd-card-media-row to hoist its children
   (image + body) into the direct grid children so the grid layout
   actually works. DOM:
     .gd-custom-card
       > .gd-card-badge   (absolute — out of grid)
       > .gd-card-label   (row 1, col 2)
       > .gd-card-media-row (display:contents)
           > .gd-card-image (rows 1-2, col 1)
           > .gd-card-body  (row 2, col 2) */

.gd-custom-card {
  border: 2px solid var(--gd-cs-border);
  border-radius: var(--gd-cs-radius);
  background: var(--gd-cs-bg-card);
  cursor: pointer;
  box-shadow: var(--gd-cs-shadow);
  position: relative;
  display: grid;
  grid-template-columns: 120px 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "image name"
    "image body";
  column-gap: 16px;
  row-gap: 4px;
  align-items: center;
  padding: 12px 24px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: left;
  min-height: auto;
  min-width: 0;
  overflow: visible;
}

/* Cards with a badge need extra top padding to clear the badge */
.gd-custom-card:has(.gd-card-badge) {
  padding-top: 22px;
}

.gd-custom-card:hover {
  box-shadow: var(--gd-cs-shadow-hover);
  border-color: var(--gd-cs-accent);
}

.gd-custom-card.gd-card-selected {
  border-color: var(--gd-cs-border-selected) !important;
  box-shadow: 0 0 0 2px var(--gd-cs-border-selected), var(--gd-cs-shadow-hover) !important;
}

.gd-custom-card:focus-visible {
  outline: 2px solid var(--gd-cs-border-selected);
  outline-offset: 2px;
}

/* Dissolve the media-row wrapper so image + body become direct grid children */
.gd-card-media-row {
  display: contents;
}

/* ─── CARD IMAGE ─────────────────────────────────────────── */
.gd-card-image {
  grid-area: image;
  width: 120px;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.gd-card-image img {
  width: 120px;
  height: 120px;
  object-fit: contain;
  border-radius: 8px;
  background: transparent;
  display: block;
}

/* ─── CARD BODY ──────────────────────────────────────────── */
/* 2-col grid: price + per-serving span the full row, savings and
   free-delivery share the next row (savings left, free-delivery right). */
.gd-card-body {
  grid-area: body;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 10px;
  row-gap: 4px;
  align-items: center;
  text-align: left;
}

.gd-card-body > .gd-card-price,
.gd-card-body > .gd-card-price-per-serving {
  grid-column: 1 / -1;
}

.gd-card-body > .gd-card-savings {
  grid-column: 1;
}

.gd-card-body > .gd-card-free-delivery {
  grid-column: 2;
  margin-top: 0 !important; /* override default 8px spacing */
}

/* ─── CARD LABEL ─────────────────────────────────────────── */
.gd-card-label {
  grid-area: name;
  display: block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.3;
  text-align: left;
  text-transform: uppercase;
  color: var(--gd-cs-text-dark);
  align-self: end;
  margin-bottom: 0;
}

/* ─── CARD PRICE ─────────────────────────────────────────── */
.gd-card-price {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  flex-wrap: wrap;
}

/* Strikethrough original price */
.gd-card-price del,
.gd-card-price del .woocommerce-Price-amount {
  font-size: 13px !important;
  color: #999 !important;
  text-decoration: line-through !important;
  display: inline !important;
  white-space: nowrap !important;
  width: auto !important;
}

/* Sale price */
.gd-card-price ins,
.gd-card-price ins .woocommerce-Price-amount {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--gd-cs-text-dark) !important;
  text-decoration: none !important;
  display: inline !important;
  white-space: nowrap !important;
  width: auto !important;
}

.gd-card-price .woocommerce-Price-amount {
  display: inline !important;
  white-space: nowrap !important;
  width: auto !important;
}

.gd-card-price bdi {
  display: inline !important;
  white-space: nowrap !important;
  width: auto !important;
}

/* Subscription recurring price */
.gd-card-price .wfacp_product_subscription_price {
  font-size: 12px !important;
  color: var(--gd-cs-text-muted) !important;
  font-style: italic;
  white-space: nowrap !important;
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}

/* ─── CARD SAVINGS ───────────────────────────────────────── */
.gd-card-savings {
  font-size: 12px;
  color: var(--gd-cs-text-muted);
  font-weight: 500;
  white-space: normal;
  word-break: break-word;
  text-align: left;
  width: 100%;
}

/* ─── PRICE PER SERVING ────────────────────────────────── */
.gd-card-price-per-serving {
  font-style: italic;
  font-size: 12px;
  color: var(--gd-cs-text-muted);
  margin-top: 3px;
  text-align: left;
  width: 100%;
}

/* ─── FREE DELIVERY BADGE ──────────────────────────────── */
.gd-card-free-delivery {
  margin-top: 8px;
  display: flex;
  justify-content: flex-start;
  width: 100%;
}

.gd-card-free-delivery img {
  height: 26px;
  width: auto;
  display: block;
}

/* ─── CARD BADGE ───────────────────────────────────────── */
.gd-card-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 4px 16px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--gd-cs-text-light);
  white-space: nowrap;
  z-index: 2;
}

.gd-badge-popular {
  background: var(--gd-cs-bg-badge-popular);
}

.gd-badge-best-value {
  background: var(--gd-cs-bg-badge-best);
}

/* ─── RESPONSIVE ─────────────────────────────────────────── */
/* Mobile (<768px): match the default theme's mobile layout exactly —
   image on the left, body on the right, free-delivery badge below
   savings (not inline). Only thing special to stacked here is reverting
   the desktop body 2-col grid back to flex column. */
@media (max-width: 768px) {
  body #wfacp-e-form .wfacp_form {
    max-width: 100% !important;
  }

  /* Mobile: stop the overlay from breaking out of FunnelKit's wrapper.
     FK's .wfacp-row uses Bootstrap-style `margin:0 -8px` gutter that makes
     direct children 16px wider than the wrapper's content box; scoped
     :has(.gd-overlay-ui) so only the row wrapping our stacked overlay is
     neutralized — step-2/3 form-field rows keep their gutter. Same root-cause
     pattern as the v2.5.6 serving-size fix.

     Then give .gd-overlay-ui a 14px L/R gutter on mobile so the quantity
     heading + plan toggle + cards group share a consistent inset (the
     heading was previously flush-left with no padding — visually misaligned
     against the cards). 14px matches the card's own internal padding on
     mobile (.gd-custom-card { padding: 14px } below). */
  .wfacp-row:has(.gd-overlay-ui) {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .gd-overlay-ui {
    padding-left: 14px;
    padding-right: 14px;
    /* match .gd-cards-group's mobile cap so the per-child redundancy
       remains consistent (480 mobile / 560 desktop) — single source of
       truth at the container; alignment of heading/banner/cards holds. */
    max-width: 480px;
  }

  .gd-cards-group {
    gap: 16px;
    padding-top: 20px;
    max-width: 480px;
  }

  .gd-custom-card {
    grid-template-columns: 100px 1fr;
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
    padding: 14px;
  }

  .gd-custom-card:has(.gd-card-badge) {
    padding-top: 30px;
  }

  .gd-card-badge {
    top: -10px;
  }

  .gd-card-label {
    font-size: 13px;
  }

  .gd-card-image {
    width: 100px;
  }

  .gd-card-image img {
    width: 100px;
    height: 100px;
  }

  /* Revert desktop body 2-col grid to flex column so savings sits above
     free-delivery badge (matches default theme mobile). */
  .gd-card-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .gd-card-body > .gd-card-savings,
  .gd-card-body > .gd-card-free-delivery,
  .gd-card-body > .gd-card-price,
  .gd-card-body > .gd-card-price-per-serving {
    grid-column: auto;
  }

  .gd-card-price del,
  .gd-card-price del .woocommerce-Price-amount {
    font-size: 12px !important;
  }

  .gd-card-price ins,
  .gd-card-price ins .woocommerce-Price-amount {
    font-size: 18px !important;
  }

  .gd-card-price-per-serving,
  .gd-card-savings {
    font-size: 11px;
  }

  .gd-card-free-delivery {
    justify-content: flex-start;
    margin-top: 4px !important;
  }

  .gd-card-free-delivery img {
    height: 22px;
  }

  .gd-plan-toggle {
    flex-direction: column;
  }
}

/* ── Free Gift Banner ─────────────────────────────────────────── */
.gd-free-gift-banner {
  margin-top: 14px;
  padding: 12px 18px;
  background: #fffde7;
  border: 2px dashed #f9a825;
  border-radius: 6px;
  text-align: center;
  font-weight: 600;
  font-size: 13px;
  color: #5d4037;
  letter-spacing: 0.01em;
}

/* Image variant: 40% image on the left (with 5px margin all sides) +
   60% text on the right, vertically centered. Applied only when the
   .has-image class is set (= banner image URL configured). The base
   .gd-free-gift-banner rule above is unchanged for the text-only case. */
.gd-free-gift-banner.has-image {
  display: flex;
  align-items: stretch;
  padding: 0;
  text-align: left;
}
/* #wfacp-e-form prefix outweighs FunnelKit's `#wfacp-e-form img { margin: 0 }`
   reset in wfacp-form.min.css. Without it, the 5px breathing room is stripped. */
#wfacp-e-form .gd-free-gift-banner.has-image .gd-free-gift-banner-img {
  /* --gdcs-gift-img-w is set inline by the theme script from the admin
     "Image Width" slider (20–60%); 40% is the pre-slider default. */
  flex: 0 0 var(--gdcs-gift-img-w, 40%);
  width: var(--gdcs-gift-img-w, 40%);
  max-width: var(--gdcs-gift-img-w, 40%);
  margin: 5px;
  object-fit: contain;
  box-sizing: border-box;
}
.gd-free-gift-banner.has-image .gd-free-gift-banner-text {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  padding: 12px 18px 12px 8px;
  line-height: 1.35;
}