/* ============================================================
   GloriousDaily Checkout Styler — overlay approach v8
   The original FunnelKit product rows are permanently hidden.
   All visible UI is our custom overlay.
   ============================================================ */

/* ─── 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 ────── */
.wfacp_section_heading.wfacp_section_title,
#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;
}

/* ─── 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-toggle-badge {
  display: 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 10px;
  border-radius: 4px;
  margin: 6px auto 0;
  width: fit-content;
}

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

/* ─── CARDS GROUP (grid container) ──────────────────────── */
.gd-cards-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 8px;
  padding-top: 16px; /* space for the badge that overhangs the top of cards */
  box-sizing: border-box;
  width: 100%;
  overflow: visible;
}

/* ─── INDIVIDUAL CUSTOM CARD ─────────────────────────────── */
.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: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px 16px;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  text-align: center;
  min-height: 260px;
  min-width: 0; /* allow grid to constrain card width */
  overflow: visible;
}

.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;
}

/* ─── CARD IMAGE ─────────────────────────────────────────── */
.gd-card-image {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}

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

/* ─── CARD BODY ──────────────────────────────────────────── */
.gd-card-body {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

/* ─── CARD LABEL ─────────────────────────────────────────── */
.gd-card-label {
  font-size: 18px;
  font-weight: 700;
  color: var(--gd-cs-text-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ─── CARD PRICE ─────────────────────────────────────────── */
.gd-card-price {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  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: center !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: center;
  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: center;
  width: 100%;
}

/* ─── FREE DELIVERY BADGE ──────────────────────────────── */
.gd-card-free-delivery {
  margin-top: 8px;
  display: flex;
  justify-content: center;
  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 ─────────────────────────────────────────── */
@media (max-width: 768px) {
  body #wfacp-e-form .wfacp_form {
    max-width: 100% !important;
  }

  /* Cards remain single column (1 per row) on mobile, centered with a max-width */
  .gd-cards-group {
    grid-template-columns: 1fr !important;
    gap: 16px;
    padding-top: 20px;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
  }

  /* ── Mobile card: 2-column layout ──────────────────────────────
     Left col : product image (100px fixed)
     Right col: product name at top, then price / details below

     DOM order inside .gd-custom-card:
       1. .gd-card-badge   (absolute — doesn't participate in grid)
       2. .gd-card-label   (product name)
       3. .gd-card-media-row
            └─ .gd-card-image
            └─ .gd-card-body  (price, per-serving, savings, free-delivery)

     Strategy:
       • Turn the card into a 2-col grid (100px | 1fr)
       • .gd-card-media-row → display:contents so its children
         (image + body) become direct grid children
       • Place image in col 1 spanning both rows
       • Place label  in col 2, row 1
       • Place body   in col 2, row 2
     ──────────────────────────────────────────────────────────── */

  .gd-custom-card {
    display: grid;
    grid-template-columns: 100px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "image name"
      "image body";
    column-gap: 14px;
    row-gap: 4px;
    align-items: start;
    /* default: no badge — normal padding */
    padding: 14px 14px 14px;
    min-height: auto;
    text-align: left;
  }

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

  /* Badge is absolute — sits above the grid, unaffected */
  .gd-card-badge {
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* Product name — right column, top row */
  .gd-card-label {
    grid-area: name;
    display: block;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
    color: var(--gd-cs-text-dark);
    align-self: end;   /* push name to bottom of its row so it sits flush above body */
    margin-bottom: 0;
  }

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

  /* Image — left column, spans both rows */
  .gd-card-image {
    grid-area: image;
    width: 100px;
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

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

  /* Details — right column, bottom row */
  .gd-card-body {
    grid-area: body;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 4px;
    justify-content: flex-start;
  }

  .gd-card-price {
    justify-content: flex-start;
    gap: 4px;
  }

  .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 {
    font-size: 11px;
    text-align: left;
  }

  .gd-card-savings {
    font-size: 11px;
    text-align: left;
  }

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

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

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

  .gd-card-price .wfacp_product_subscription_price {
    text-align: left !important;
  }
}

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