/* =====================================================================
   FSST — "Who are you buying for?" buyer selector  (PURE CSS, no JS)
   ---------------------------------------------------------------------
   Restyles the native WISDM Group Registration markup into the FSST
   card selector + summary + group-name + seats stepper, using only CSS.

   Targets the REAL markup on the product page:
     .wdm_group_registration  -> Individual / Group radios  (cards)
     .wdm-enroll-me-div        -> "Enroll Me" checkbox       (above seats)
     .quantity                 -> qty stepper                (seats)
     .single_add_to_cart_button-> Add to basket
     .ldgr-cal                 -> live seats/price summary
     .ldgr_group_name          -> group-name text field
     .ldgr_group_courses       -> courses in this group
     .ldgr_dynamic_courses     -> add-more-courses upsell

   Selected state uses :has() and :checked  (all modern browsers, 2023+).
   The plugin's own JS still toggles the group-only sections; we also
   enforce visibility with :has() so it's deterministic either way.
   Enqueue this AFTER theme + WooCommerce styles. No JavaScript needed.
   ===================================================================== */

/* ---- brand tokens (scoped to the form) ---------------------------- */
form.cart{
  --fsst-teal:#0c6355;
  --fsst-teal-d:#0a4d42;
  --fsst-teal-tint:#e7f1ee;
  --fsst-teal-soft:#cfe4dd;
  --fsst-coral:#f44335;
  --fsst-coral-d:#dd3527;
  --fsst-coral-tint:#ffeae6;
  --fsst-ink:#262329;
  --fsst-muted:#6f6b72;
  --fsst-line:#dcd7d2;
  --fsst-radius:14px;
}

/* =====================================================================
   1. LAYOUT — reflow the form into the desired top-to-bottom order
   cards -> summary -> group name -> enroll me -> stepper -> button -> CTA -> courses
   ===================================================================== */
form.cart{
  display:flex;
  flex-direction:column;
  gap:18px;
}
/* explicit order for every visible block (default order:0 would jump to top) */
form.cart > .wdm_group_registration   { order:1; }
form.cart > .ldgr-cal                  { order:2; }
form.cart > .ldgr_group_name           { order:3; }
form.cart > .wdm-enroll-me-div         { order:4; }   /* Enroll Me — sits above "How many people?" */
form.cart > .quantity                  { order:5; }
form.cart > .single_add_to_cart_button { order:6; }
form.cart > .fsst-cta                  { order:7; }   /* Subscribe & Save — below Add to basket */
form.cart > .ldgr_group_courses        { order:8; }
form.cart > .ldgr_dynamic_courses      { order:9; }

/* hide layout noise */
form.cart > br { display:none; }
form.cart > p  { display:none; }      /* the stray "--" paragraph */

/* =====================================================================
   2. THE TWO BUYER CARDS  (.wdm_group_registration)
   Grid: row1 = eyebrow + pill, row2 = the two cards
   ===================================================================== */
form.cart .wdm_group_registration{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:auto auto;
  gap:14px;
  position:relative;
  margin:0;
}

/* eyebrow heading (::before) */
form.cart .wdm_group_registration::before{
  content:"Who are you buying for?";
  grid-column:1; grid-row:1; align-self:center;
  font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--fsst-teal);line-height:1.2;
}
/* status pill (::after) — text swaps via :has() below */
form.cart .wdm_group_registration::after{
  content:"Please select";
  grid-column:2; grid-row:1; justify-self:end; align-self:center;
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;
  background:var(--fsst-coral-tint);color:var(--fsst-coral-d);
}
form.cart:has(#wdm_gr_signle:checked) .wdm_group_registration::after{
  content:"Just me";background:var(--fsst-teal-tint);color:var(--fsst-teal-d);
}
form.cart:has(#wdm_gr_group:checked) .wdm_group_registration::after{
  content:"Team / Organisation";background:var(--fsst-teal-tint);color:var(--fsst-teal-d);
}

/* hide the native radio dots (keep them operable & accessible) */
form.cart .wdm_group_registration input[type="radio"]{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none;
}

/* the labels become the cards */
form.cart .wdm_group_registration label[for="wdm_gr_signle"],
form.cart .wdm_group_registration label[for="wdm_gr_group"]{
  grid-row:2;
  position:relative;
  display:block;
  min-height:84px;
  padding:18px 20px 18px 78px;          /* room for the icon tile on the left */
  font-size:0;                          /* hide the native " Individual"/" Group" text */
  cursor:pointer;
  background:#fff;
  border:2px solid var(--fsst-teal-soft);
  border-radius:var(--fsst-radius);
  box-shadow:0 1px 2px rgba(40,25,20,.04);
  transition:border-color .16s, background .16s, box-shadow .16s, transform .16s;
  background-repeat:no-repeat;
  background-position:20px center;       /* icon tile position */
  background-size:42px 42px;
}
form.cart .wdm_group_registration label[for="wdm_gr_signle"]{ grid-column:1; }
form.cart .wdm_group_registration label[for="wdm_gr_group"]{ grid-column:2; }

/* icon tiles (rounded tint square + icon, drawn as one SVG) */
form.cart .wdm_group_registration label[for="wdm_gr_signle"]{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'><rect width='42' height='42' rx='11' fill='%23e7f1ee'/><g transform='translate(9,9)' fill='none' stroke='%230c6355' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 3.5-6 8-6s8 2 8 6'/></g></svg>");
}
form.cart .wdm_group_registration label[for="wdm_gr_group"]{
  background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'><rect width='42' height='42' rx='11' fill='%23e7f1ee'/><g fill='none' stroke='%230c6355' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='16' cy='16' r='5'/><path d='M7 33c0-6.5 4-9.5 9-9.5s9 3 9 9.5'/><circle cx='29' cy='14' r='4.2'/><path d='M25 21.5c3.6 .4 6.5 3 6.5 8.5'/></g></svg>");
}

/* card TITLE (::before) + SUBTITLE (::after) */
form.cart .wdm_group_registration label::before,
form.cart .wdm_group_registration label::after{
  display:block;font-size:initial;
}
form.cart .wdm_group_registration label[for="wdm_gr_signle"]::before{
  content:"Just me";
  font-size:17px;font-weight:800;color:#46434c;line-height:1.2;letter-spacing:-.01em;
}
form.cart .wdm_group_registration label[for="wdm_gr_signle"]::after{
  content:"One login \00B7 one certificate";
  font-size:12.5px;font-weight:600;color:var(--fsst-muted);margin-top:3px;line-height:1.3;
}
form.cart .wdm_group_registration label[for="wdm_gr_group"]::before{
  content:"Team / Organisation";
  font-size:17px;font-weight:800;color:#46434c;line-height:1.2;letter-spacing:-.01em;
}
form.cart .wdm_group_registration label[for="wdm_gr_group"]::after{
  content:"Multiple staff \00B7 a login each";
  font-size:12.5px;font-weight:600;color:var(--fsst-muted);margin-top:3px;line-height:1.3;
}

/* hover */
form.cart .wdm_group_registration label:hover{
  border-color:var(--fsst-teal);
  box-shadow:0 6px 18px rgba(12,99,85,.12);
  transform:translateY(-1px);
}

/* SELECTED state (radio :checked + its label) */
form.cart .wdm_group_registration input:checked + label{
  border-color:var(--fsst-teal);
  background-color:var(--fsst-teal-tint);
  box-shadow:0 8px 22px rgba(12,99,85,.16);
}
/* recolour the tile (filled teal + white icon) + add a check badge top-right */
form.cart #wdm_gr_signle:checked + label{
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><circle cx='11' cy='11' r='11' fill='%230c6355'/><path d='M6 11.5 9.5 15l7-8' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'><rect width='42' height='42' rx='11' fill='%230c6355'/><g transform='translate(9,9)' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='4'/><path d='M4 21c0-4 3.5-6 8-6s8 2 8 6'/></g></svg>");
  background-repeat:no-repeat,no-repeat;
  background-position:right 10px top 10px, 20px center;
  background-size:22px 22px, 42px 42px;
}
form.cart #wdm_gr_group:checked + label{
  background-image:
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='22'><circle cx='11' cy='11' r='11' fill='%230c6355'/><path d='M6 11.5 9.5 15l7-8' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/></svg>"),
    url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='42' height='42' viewBox='0 0 42 42'><rect width='42' height='42' rx='11' fill='%230c6355'/><g fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='16' cy='16' r='5'/><path d='M7 33c0-6.5 4-9.5 9-9.5s9 3 9 9.5'/><circle cx='29' cy='14' r='4.2'/><path d='M25 21.5c3.6 .4 6.5 3 6.5 8.5'/></g></svg>");
  background-repeat:no-repeat,no-repeat;
  background-position:right 10px top 10px, 20px center;
  background-size:22px 22px, 42px 42px;
}
form.cart #wdm_gr_signle:checked + label::before,
form.cart #wdm_gr_group:checked + label::before{ color:var(--fsst-teal-d); }

/* =====================================================================
   3. GROUP-ONLY VISIBILITY  (driven by the Group radio via :has())
   Show summary / group-name / stepper only when Group is selected.
   ===================================================================== */
form.cart:not(:has(#wdm_gr_group:checked)) .ldgr-cal,
form.cart:not(:has(#wdm_gr_group:checked)) .ldgr_group_name,
form.cart:not(:has(#wdm_gr_group:checked)) .wdm-enroll-me-div,
form.cart:not(:has(#wdm_gr_group:checked)) .quantity{
  display:none !important;
}
form.cart:has(#wdm_gr_group:checked) .ldgr-cal,
form.cart:has(#wdm_gr_group:checked) .ldgr_group_name{
  display:block !important;
}
form.cart:has(#wdm_gr_group:checked) .quantity,
form.cart:has(#wdm_gr_group:checked) .wdm-enroll-me-div{
  display:flex !important;
}

/* =====================================================================
   4. SUMMARY PANEL  (.ldgr-cal)
   ===================================================================== */
form.cart .ldgr-cal{
  margin:0;padding:0;
  border:1.5px solid var(--fsst-teal-soft);border-radius:14px;
  background:var(--fsst-teal-tint);overflow:hidden;
}
form.cart .ldgr-cal .ldgr-grp-info,
form.cart .ldgr-cal .ldgr-seats,
form.cart .ldgr-cal .ldgr-g-price{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:13px 18px;margin:0;border-bottom:1px solid var(--fsst-teal-soft);
}
form.cart .ldgr-cal .ldgr-g-price{border-bottom:none;background:#fff;}
form.cart .ldgr-cal .ldgr-g-name{display:flex;align-items:center;gap:10px;width:100%;justify-content:space-between;}
form.cart .ldgr-cal .ldgr-g-lbl,
form.cart .ldgr-cal .ldgr-total{
  font-size:13.5px;font-weight:700;color:var(--fsst-muted);
  text-transform:uppercase;letter-spacing:.03em;
}
form.cart .ldgr-cal .ldgr-g-val{font-size:15px;font-weight:700;color:var(--fsst-ink);text-align:right;}
form.cart .ldgr-cal .ldgr-total{font-size:14px;color:var(--fsst-teal-d);font-weight:800;}
form.cart .ldgr-cal .ldgr-value{font-size:24px;font-weight:900;color:var(--fsst-teal-d);letter-spacing:-.01em;}
form.cart .ldgr-cal .ldgr-value del{font-size:15px;color:var(--fsst-muted);font-weight:600;margin-right:6px;}
form.cart .ldgr-cal .ldgr-discounted-value{font-weight:900;color:var(--fsst-teal-d);}
form.cart .ldgr-cal .ldgr-g-discount-lbl{font-size:12px;font-weight:700;color:var(--fsst-teal);}

/* =====================================================================
   5. GROUP-NAME FIELD  (.ldgr_group_name)
   Hide the plugin's plain label; inject our label + hint via pseudos.
   ===================================================================== */
form.cart .ldgr_group_name{margin:0;}
form.cart .ldgr_group_name .ldgr_group_name_switch{display:none !important;}
form.cart .ldgr_group_name::before{
  content:"Group / organisation name *";
  display:block;
  font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--fsst-teal-d);margin:0 0 9px;
}
form.cart .ldgr_group_name input[type="text"]{
  width:100%;height:52px;
  border:1.5px solid var(--fsst-teal-soft);border-radius:10px;
  padding:0 15px;font-size:16px;font-weight:600;
  color:var(--fsst-ink);background:#fff;
  transition:.14s;box-sizing:border-box;
}
form.cart .ldgr_group_name input[type="text"]:focus{
  outline:none;border-color:var(--fsst-teal);box-shadow:0 0 0 3px rgba(12,99,85,.16);
}
form.cart .ldgr_group_name::after{
  content:"This is how your group appears on the dashboard and on each learner certificate.";
  display:block;
  font-size:12.5px;font-weight:600;color:var(--fsst-teal-d);margin-top:9px;line-height:1.45;
}

/* =====================================================================
   5b. "ENROLL ME"  (.wdm-enroll-me-div) — group-leader includes self
   Shown only in Group mode, positioned above the seats stepper.
   ===================================================================== */
form.cart .wdm-enroll-me-div{
  align-items:center;gap:8px;margin:0;
  font-size:14px;font-weight:700;color:var(--fsst-ink);
}
form.cart .wdm-enroll-me-div label{
  display:inline-flex;align-items:center;gap:8px;margin:0;cursor:pointer;
}
form.cart .wdm-enroll-me-div input[type="checkbox"]{
  width:18px;height:18px;accent-color:var(--fsst-teal);margin:0;flex:none;
}
form.cart .wdm-enroll-me-div #wdm_enroll_help_btn{
  width:16px;height:16px;cursor:pointer;opacity:.7;
}
form.cart .wdm-enroll-me-div .wdm_enroll_me_help_text{flex-basis:100%;}

/* =====================================================================
   6. SEATS STEPPER  (.quantity)
   ===================================================================== */
form.cart .quantity{
  display:flex !important;         /* override any theme flex/block reset    */
  flex-direction:row;
  flex-wrap:wrap;                  /* allows label + hint to occupy own rows  */
  align-items:center;
  justify-content:flex-start;     /* override theme space-between            */
  gap:0;
  padding:0;
  border:none;background:none;width:100%;
}
/* "How many people?" label — full-width row above the buttons */
form.cart .quantity::before{
  content:"How many people?";
  flex:0 0 100%;order:-1;          /* own row, before buttons */
  display:block;
  font-size:14px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  color:var(--fsst-teal-d);
  margin-bottom:9px;
}
/* hint text — full-width row below the buttons, in normal flow */
form.cart .quantity::after{
  content:"Each person gets their own login and CPD certificate.";
  flex:0 0 100%;order:1;           /* own row, after buttons */
  display:block;
  font-size:12.5px;font-weight:600;color:var(--fsst-muted);
  margin-top:9px;line-height:1.45;
}
form.cart .quantity{margin-bottom:0;}
/* stepper row: buttons have order:0 (default) so sit between label and hint */
form.cart .quantity .minus,
form.cart .quantity .plus{
  flex:none;
  width:50px;height:52px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:500;color:var(--fsst-teal);text-decoration:none;
  background:#fff;border:1.5px solid var(--fsst-teal-soft);transition:.12s;
}
form.cart .quantity .minus{border-radius:12px 0 0 12px;border-right:none;}
form.cart .quantity .plus {border-radius:0 12px 12px 0;border-left:none;}
form.cart .quantity .minus:hover,
form.cart .quantity .plus:hover{background:var(--fsst-teal-tint);}
form.cart .quantity input.qty{
  flex:none;
  width:62px;height:52px;border:1.5px solid var(--fsst-teal-soft);
  text-align:center;font-size:19px;font-weight:800;color:var(--fsst-ink);
  background:#fff;-moz-appearance:textfield;border-radius:0;box-shadow:none;
}
form.cart .quantity input.qty:focus{outline:none;background:var(--fsst-teal-tint);}
form.cart .quantity input.qty::-webkit-outer-spin-button,
form.cart .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}

/* =====================================================================
   7. COURSES BLOCKS  (light touch — keep plugin styling, just spacing)
   ===================================================================== */
form.cart .ldgr_group_courses,
form.cart .ldgr_dynamic_courses{margin:0;}
form.cart .ldgr_group_courses.ldgr-hide{display:none !important;}

/* =====================================================================
   8. ADD TO BASKET — keep your theme's red button when active.
   (No JS gate; Individual is selected by default so a choice always exists.)
   ===================================================================== */
form.cart .single_add_to_cart_button{align-self:flex-start;}

/* =====================================================================
   9. RESPONSIVE — mobile layout improvements (≤ 600px)
   ===================================================================== */

/* --- 9a. Buyer cards: stack to single column on narrow screens ------- */
@media (max-width:520px){
  form.cart .wdm_group_registration{grid-template-columns:1fr;}
  form.cart .wdm_group_registration::before{grid-column:1;grid-row:1;}
  form.cart .wdm_group_registration::after{grid-column:1;grid-row:2;justify-self:start;}
  form.cart .wdm_group_registration label[for="wdm_gr_signle"]{grid-column:1;grid-row:3;}
  form.cart .wdm_group_registration label[for="wdm_gr_group"]{grid-column:1;grid-row:4;}
}

/* --- 9b. Inline quantity row, Enroll Me card, full-width button ------ */
@media (max-width:600px){

  /* QUANTITY ROW — label left, stepper right on one line.
     flex-wrap:wrap lets ::after (hint) break to its own row below.
     ::before order:0 keeps the label on the SAME row as the buttons.
     flex:1 1 auto on ::before grows it leftward, pushing buttons right. */
  form.cart .quantity{
    flex-wrap:wrap;              /* lets hint wrap to own row below   */
    align-items:center;
    justify-content:flex-start; /* flex-grow handles positioning     */
    gap:0;
    padding:14px 16px;
    background:var(--fsst-teal-tint);
    border:1.5px solid var(--fsst-teal-soft);
    border-radius:12px;
  }
  /* label: left side of the button row */
  form.cart .quantity::before{
    flex:1 1 auto;       /* grows to fill remaining width on left  */
    order:0;             /* same row as buttons (override order:-1) */
    margin-bottom:0;
    font-size:13px;
    white-space:nowrap;
    min-width:0;
  }
  /* buttons: right side, fixed sizes, never grow or shrink */
  form.cart .quantity .minus,
  form.cart .quantity input.qty,
  form.cart .quantity .plus{
    flex:none;
    order:0;
  }
  /* slightly smaller on mobile */
  form.cart .quantity .minus,
  form.cart .quantity .plus{
    width:40px;height:44px;font-size:22px;
  }
  form.cart .quantity input.qty{
    width:50px;height:44px;font-size:17px;
  }
  /* hint: wraps onto its own full-width row below label+buttons */
  form.cart .quantity::after{
    flex:0 0 100%;       /* full-width forces own row (with wrap)   */
    order:1;             /* after the label+button row              */
    font-size:12px;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--fsst-teal-soft);
  }

  /* ENROLL ME — framed card so it reads as an intentional option */
  form.cart .wdm-enroll-me-div{
    padding:12px 16px;
    background:var(--fsst-teal-tint);
    border:1.5px solid var(--fsst-teal-soft);
    border-radius:12px;
    gap:10px;
  }
  form.cart .wdm-enroll-me-div label{
    font-size:14px;font-weight:700;
  }

  /* ADD TO BASKET — full width, bigger tap target */
  form.cart .single_add_to_cart_button{
    align-self:stretch;
    width:100% !important;
    padding-top:16px !important;
    padding-bottom:16px !important;
    font-size:17px !important;
    border-radius:12px !important;
    text-align:center;
  }
}

/* =====================================================================
   9b. DESKTOP: group name + stepper side by side (≥ 601px)
   Switch form to row-wrap flex so two items can share a row.
   Everything defaults to full-width; only the name field + stepper
   pair get widths that let them sit side by side on the same row.
   ===================================================================== */
@media (min-width:601px){

  form.cart{
    flex-direction:row;
    flex-wrap:wrap;
    align-items:flex-start;
  }

  /* Default everything to full-width in the row-wrap flex context */
  form.cart > *{ flex:0 0 100%; min-width:0; }

  /* Group name: grows to fill remaining space on the left */
  form.cart > .ldgr_group_name{
    flex:1 1 auto;
    order:3;          /* unchanged */
  }

  /* Stepper: fixed width on the right of the same row.
     order:4 puts it directly after the name field (was order:5).
     The two items' combined width + 18px gap ≤ 100%, so they share a row. */
  form.cart > .quantity{
    flex:0 0 190px;
    order:4;          /* moved up from 5 to sit next to name field */
  }

  /* Enroll Me moves down one slot to clear the name+stepper row */
  form.cart > .wdm-enroll-me-div{ order:5; }

  /* Button + CTA keep their existing positions */
  form.cart > .single_add_to_cart_button{ align-self:flex-start; }
}


   Markup injected via functions.php (woocommerce_after_add_to_cart_button).
   Both banners sit in the DOM; we show the one that matches the current
   buyer choice. Individual -> individual CTA, Group -> setting-plan CTA.
   ===================================================================== */

/* hidden by default; revealed per selection */
form.cart .fsst-cta{
  display:none;
  grid-template-columns:auto 1fr auto;
  grid-template-areas:
    "icon body button"
    "pills pills pills";
  align-items:center;
  gap:4px 16px;
  padding:18px 20px;
  border:1.5px solid var(--fsst-coral);
  border-radius:var(--fsst-radius);
  background:#fff;
}

/* only on products that actually have the buyer selector */
form.cart:not(:has(.wdm_group_registration)) .fsst-cta{ display:none !important; }

/* contextual reveal */
form.cart:has(#wdm_gr_signle:checked) .fsst-cta--individual{ display:grid; }
form.cart:has(#wdm_gr_group:checked)   .fsst-cta--group{ display:grid; }

.fsst-cta__icon{
  grid-area:icon;flex:none;
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:10px;
  background:var(--fsst-coral);color:#fff;
}
.fsst-cta__icon svg{width:20px;height:20px;}

.fsst-cta__body{grid-area:body;display:flex;flex-direction:column;gap:4px;min-width:0;}
.fsst-cta__eyebrow{
  font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fsst-coral-d);
}
.fsst-cta__headline{
  margin:0;font-size:15px;font-weight:700;line-height:1.35;color:var(--fsst-ink);
}
.fsst-cta__headline strong{color:var(--fsst-coral-d);font-weight:800;}

.fsst-cta__btn{
  grid-area:button;justify-self:end;align-self:center;white-space:nowrap;
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 20px;border-radius:10px;
  background:var(--fsst-coral);color:#fff;text-decoration:none;
  font-size:15px;font-weight:800;line-height:1;
  transition:background .15s, transform .15s;
}
.fsst-cta__btn:hover{background:var(--fsst-coral-d);transform:translateY(-1px);color:#fff;}

.fsst-cta__pills{
  grid-area:pills;list-style:none;
  display:flex;flex-wrap:wrap;gap:8px 22px;
  margin:14px 0 0;padding:14px 0 0;
  border-top:1px solid var(--fsst-coral-tint);
}
.fsst-cta__pills li{
  display:flex;align-items:center;gap:7px;
  font-size:13px;font-weight:700;color:var(--fsst-ink);
}
.fsst-cta__pills li::before{
  content:"";flex:none;width:16px;height:16px;
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f44335' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5 10 17l9-10'/></svg>") center/contain no-repeat;
}

/* responsive: stack the button + pills under the text */
@media (max-width:560px){
  form.cart .fsst-cta{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "icon body"
      "button button"
      "pills pills";
    gap:10px 14px;
  }
  .fsst-cta__btn{justify-self:stretch;justify-content:center;}
}

/* =====================================================================
   11. SUBSCRIPTION / UNLIMITED PRODUCTS
   Body class added by PHP when the product ID is in the unlimited_ids
   setting. The JS auto-checks the hidden unlimited-members checkbox so
   the correct price is submitted; CSS hides all the UI the buyer
   shouldn't see on these products.
   ===================================================================== */

/* Hide buyer type cards, quantity stepper, enroll me, and the raw
   unlimited-members checkbox row — keep group name + course list. */
body.fsst-unlimited-product form.cart .wdm_group_registration,
body.fsst-unlimited-product form.cart .ldgr-unlimited-member-options,
body.fsst-unlimited-product form.cart .quantity,
body.fsst-unlimited-product form.cart .wdm-enroll-me-div{
  display:none !important;
}

/* Specificity fix: the :has(#wdm_gr_group:checked) show rules in section 3
   contain an ID selector, giving them specificity (1,2,1) which beats the
   flat (0,3,2) rules above. On subscription products the Group radio is
   pre-checked, so those show rules fire. These rules include the same
   :has() pattern AND the body class, bumping specificity to (1,3,2) so
   they reliably win and the quantity + enroll-me stay hidden. */
body.fsst-unlimited-product form.cart:has(#wdm_gr_group:checked) .quantity,
body.fsst-unlimited-product form.cart:has(#wdm_gr_group:checked) .wdm-enroll-me-div{
  display:none !important;
}

/* =====================================================================
   12. REAL LABEL ELEMENTS  (when fsst-labels.js has run)
   The JS adds 'fsst-labels-ready' to form.cart. CSS then:
     a) suppresses the ::before / ::after pseudo-elements
     b) styles the real DOM elements that replaced them
   Fallback: if JS fails, pseudo-elements remain and everything still
   looks correct — no flash of unstyled content either way.
   ===================================================================== */

/* --- 12a. Suppress pseudo-elements once real elements exist ---------- */
form.cart.fsst-labels-ready .wdm_group_registration::before,
form.cart.fsst-labels-ready .wdm_group_registration::after,
form.cart.fsst-labels-ready .wdm_group_registration label[for="wdm_gr_signle"]::before,
form.cart.fsst-labels-ready .wdm_group_registration label[for="wdm_gr_signle"]::after,
form.cart.fsst-labels-ready .wdm_group_registration label[for="wdm_gr_group"]::before,
form.cart.fsst-labels-ready .wdm_group_registration label[for="wdm_gr_group"]::after,
form.cart.fsst-labels-ready .ldgr_group_name::before,
form.cart.fsst-labels-ready .ldgr_group_name::after,
form.cart.fsst-labels-ready .quantity::before,
form.cart.fsst-labels-ready .quantity::after{
  content:none !important;
  display:none !important;
}

/* --- 12b. Buyer section: heading + pill ----------------------------- */
form.cart.fsst-labels-ready .fsst-buyer-heading{
  grid-column:1;grid-row:1;align-self:center;
  font-size:14px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  color:var(--fsst-teal);line-height:1.2;
}
form.cart.fsst-labels-ready .fsst-buyer-pill{
  grid-column:2;grid-row:1;justify-self:end;align-self:center;
  display:inline-flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 11px;border-radius:999px;
  background:var(--fsst-coral-tint);color:var(--fsst-coral-d);
  transition:.18s;
}
form.cart.fsst-labels-ready .fsst-buyer-pill svg{width:13px;height:13px;flex:none;}
form.cart.fsst-labels-ready .fsst-buyer-pill.is-chosen{
  background:var(--fsst-teal-tint);color:var(--fsst-teal-d);
}
/* Ensure labels stay on row 2 when real heading+pill occupy row 1 */
form.cart.fsst-labels-ready .wdm_group_registration label[for="wdm_gr_signle"],
form.cart.fsst-labels-ready .wdm_group_registration label[for="wdm_gr_group"]{
  grid-row:2;
}

/* --- 12c. Card body: title + subtitle spans ------------------------- */
form.cart.fsst-labels-ready .wdm_group_registration label .fsst-card-body{
  display:flex;flex-direction:column;min-width:0;
}
form.cart.fsst-labels-ready .wdm_group_registration label .fsst-card-title{
  display:block;font-size:17px;font-weight:800;color:#46434c;
  line-height:1.2;letter-spacing:-.01em;
}
form.cart.fsst-labels-ready .wdm_group_registration label .fsst-card-sub{
  display:block;font-size:12.5px;font-weight:600;color:var(--fsst-muted);
  margin-top:3px;line-height:1.3;
}
/* Selected card: colour the title */
form.cart.fsst-labels-ready #wdm_gr_signle:checked + label .fsst-card-title,
form.cart.fsst-labels-ready #wdm_gr_group:checked  + label .fsst-card-title{
  color:var(--fsst-teal-d);
}

/* --- 12d. Group name: label + hint ---------------------------------- */
form.cart.fsst-labels-ready .ldgr_group_name .fsst-field-label{
  display:block;font-size:14px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--fsst-teal-d);margin:0 0 9px;
}
form.cart.fsst-labels-ready .ldgr_group_name .fsst-req{
  color:var(--fsst-coral-d);font-weight:900;
}
form.cart.fsst-labels-ready .ldgr_group_name .fsst-field-hint{
  font-size:12.5px;font-weight:600;color:var(--fsst-teal-d);
  margin-top:9px;line-height:1.45;
}

/* --- 12e. Seats: label + hint (desktop: label left, buttons right) -- */
form.cart.fsst-labels-ready .quantity .fsst-qty-label{
  flex:0 0 100%;order:-1;
  display:block;font-size:14px;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;color:var(--fsst-teal-d);margin-bottom:9px;
}
form.cart.fsst-labels-ready .quantity .fsst-qty-hint{
  flex:0 0 100%;order:1;
  display:block;font-size:12.5px;font-weight:600;
  color:var(--fsst-muted);margin-top:9px;line-height:1.45;
}

/* --- 12f. Mobile overrides for seats label + hint (≤ 600px) --------- */
@media (max-width:600px){
  form.cart.fsst-labels-ready .quantity .fsst-qty-label{
    flex:1 1 auto;order:0;margin-bottom:0;font-size:13px;white-space:nowrap;min-width:0;
  }
  form.cart.fsst-labels-ready .quantity .fsst-qty-hint{
    flex:0 0 100%;order:1;font-size:12px;margin-top:10px;
    padding-top:10px;border-top:1px solid var(--fsst-teal-soft);
  }
}

/* --- 12g. Mobile: stack buyer cards (≤ 520px) ----------------------- */
@media (max-width:520px){
  form.cart.fsst-labels-ready .fsst-buyer-heading{grid-column:1;grid-row:1;}
  form.cart.fsst-labels-ready .fsst-buyer-pill{grid-column:1;grid-row:2;justify-self:start;}
  form.cart.fsst-labels-ready .wdm_group_registration label[for="wdm_gr_signle"]{grid-column:1;grid-row:3;}
  form.cart.fsst-labels-ready .wdm_group_registration label[for="wdm_gr_group"]{grid-column:1;grid-row:4;}
}