/* =====================================================================
   BOON TREATMENT GRIDS
   ---------------------------------------------------------------------
   MOVED FROM CODE SNIPPETS / CUSTOMIZER - 10 August 2026.
   Unchanged from the versions it replaces, including the quirks noted
   below. Fix those separately so any layout change has one cause.

   Serves both shortcodes. Organised into zones - keep new rules in the
   correct zone so it stays obvious what affects what.

   ZONE A - SHARED
     Applies to both shortcodes. Variables, base card/list/option styles.

   ZONE B - LISTING            [boon_treatment_grid]
     STILL IN CODE SNIPPETS. Styled from here so it keeps working; move
     the shortcode into the plugin when convenient.
     Wrapper: .boon-tgrid.boon-tgrid--listing
     Markup:  .boon-cat > .boon-grid > .boon-treatment
                > h2.boon-treatment-title
                > article.boon-card > .boon-card-body
                  > .boon-group > ul.boon-opt-list > li.boon-opt-item
                    > .boon-opt-row--top / --package / --subheading
     Packages render as .boon-course-badge pills (via
     boon_format_package_as_badges). No booking buttons, no descriptions.

   ZONE C - DETAIL             [boon_treatment_detail_grid]
     Now in includes/treatment-grid.php.
     Wrapper: .boon-tgrid.boon-individual-page-listing
              (+ .boon-condensed when the ACF checkbox is ticked)
     Markup:  .boon-grid > article.boon-card
                > .boon-group > ul > li
     Standard rows: .boon-opt-top, .boon-opt-desc, .boon-opt-cta buttons.
     Condensed rows: li.boon-opt-condensed-row.
     Packages render as a single .boon-opt-package-inline pill.

   ZONE E - PROMO BAR
     Was in Appearance > Customize > Additional CSS. Moved here so the
     markup and its styling live together and both are in version control.

   ---------------------------------------------------------------------
   ORDER MATTERS. Zones run Shared > Listing > Detail > Condensed > Promo.
   Several detail rules rely on being later in the file than the shared
   equivalents at the same specificity (e.g. .boon-card .boon-group vs
   .boon-individual-page-listing .boon-group). Don't reshuffle the zones.

   REMOVED IN AN EARLIER PASS (matched no markup in either shortcode):
     .boon-card > h3                              - h3 is inside .boon-group, never a direct child
     .boon-tgrid--listing .boon-card-header       - listing never outputs a card header
     .boon-tgrid--listing .boon-card-title
     .boon-tgrid--listing .boon-opt-package-inline - listing uses .boon-course-badge instead
     .boon-tgrid--listing .boon-opt-top            - listing uses .boon-opt-row--top
     .boon-tgrid--listing .boon-card li{...}       - values were already the effective defaults
     duplicate .boon-tgrid--listing .boon-card{overflow:hidden}

   KNOWN QUIRKS PRESERVED AS-IS (see notes inline, marked QUIRK)
   ===================================================================== */


/* =====================================================================
   ZONE A - SHARED
   ===================================================================== */

/* ---------- A1. Variables ---------- */
:root {
  /* Page background - not consumed by this stylesheet, kept for Elementor use */
  --boon-bg-page: #FEE5DB6E;

  /* Text */
  --boon-text-main: #272727;   /* main black/grey */
  --boon-text-grey: #5C5C5C;   /* lighter grey for descriptions */
  --boon-accent: #DD9D81;      /* accent peach (group titles, mobile price) */

  /* Borders & backgrounds */
  --boon-border: #DD9D81;      /* standard peach border - currently unused */
  --boon-offer: #FEE5DB;       /* offers/deals bubble */
  --boon-border-card: rgba(253,229,219,0.95);
  --boon-divider: rgba(221,157,129,0.4);
  --boon-white: #ffffff;

  /* Buttons (detail grid only) */
  --boon-btn-leics: #FDC7B0;
  --boon-btn-bham: #FBB79D;
}

/* ---------- A2. Wrapper ---------- */
.boon-tgrid {
  font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--boon-text-main);
}

.boon-tgrid .boon-grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 0;
}

/* ---------- A3. Groups ---------- */
.boon-card .boon-group {
  margin-top: 12px;
  padding-top: 12px;
}

.boon-card .boon-group-title {
  font-size: 22px;
  font-weight: 500;
  color: var(--boon-accent);
  margin: 10px 0 15px 0;
  padding-bottom: 8px;
  border-bottom: 1px dashed var(--boon-divider);
}

.boon-card .boon-group-desc {
  margin: 0 0 20px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--boon-text-grey);
}

/* ---------- A4. Option lists and rows ---------- */
.boon-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.boon-card li:not(.boon-opt-desc li) {
  padding: 10px;
  border: none;
  border-bottom: 1px solid var(--boon-divider);
  border-radius: 0;
  margin-bottom: 0;
  background: transparent;
  align-self: start;
}

.boon-opt-left {
  min-width: 0;
  flex: 1 1 auto;
}

.boon-opt-right {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.boon-opt-price {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--boon-text-main);
  white-space: nowrap;
}

/* ---------- A5. Shared mobile (< 480px) ---------- */
@media (max-width: 480px) {

  .boon-card {
    padding: 10px !important;
  }

  .boon-card .boon-group-desc {
    margin: 20px 0 0 0;
  }

  /* Price aligns left once rows stack */
  .boon-opt-right {
    width: 100%;
    justify-content: flex-start;
  }

  .boon-opt-price {
    font-size: 16px;
    color: var(--boon-accent);
  }
}


/* =====================================================================
   ZONE B - LISTING  [boon_treatment_grid]
   ===================================================================== */

/* ---------- B1. Treatment title (sits outside the card) ---------- */
.boon-tgrid--listing .boon-treatment-title {
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: var(--boon-text-main);
  font-weight: 600;
  border-bottom: none;
  display: inline-block;
  padding-bottom: 0;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  padding-left: 35px !important;
}

/* ---------- B2. Card ---------- */
.boon-tgrid--listing .boon-card {
  position: relative;
  border: 1px solid var(--boon-border-card);
  border-radius: 20px;
  padding: 25px;
  box-shadow: 0 10px 28px rgba(39,39,39,0.07);
  overflow: hidden;
  background: var(--boon-white);
}

.boon-tgrid--listing .boon-card .boon-group:first-of-type {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ---------- B3. Option rows ---------- */
.boon-tgrid--listing .boon-opt-row--top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.boon-tgrid--listing .boon-opt-row--package {
  margin-top: 8px;
}

.boon-tgrid--listing .boon-opt-row--subheading {
  margin-top: 10px;
}

.boon-tgrid--listing .boon-opt-name {
  font-size: 18px !important;
  line-height: 1.2;
  color: var(--boon-text-main);
  font-weight: 600;
  margin: 0 !important;
}

.boon-tgrid--listing .boon-opt-subheading {
  font-size: 14px;
  line-height: 1.35;
  color: var(--boon-text-grey);
  margin: 0 !important;
}

/* ---------- B4. Course badges (listing only) ---------- */
.boon-course-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}

.boon-course-badge {
  display: inline-block;
  padding: 7px 10px;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1;
  background: var(--boon-offer);
  color: var(--boon-text-main);
  white-space: nowrap;
}

/* ---------- B5. Two-column balance (>= 900px) ---------- */
@media (min-width: 900px) {

  .boon-tgrid--listing .boon-opt-list {
    display: block;
    column-count: 2;
    column-gap: 40px;
  }

  .boon-tgrid--listing .boon-opt-item {
    break-inside: avoid;
    page-break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 0;
  }
}

/* ---------- B6. Listing mobile (< 480px) ---------- */
@media (max-width: 480px) {

  /* QUIRK: margin-bottom below is overridden by the !important in B1,
     and padding-left:35px from B1 is never reset here. Behaviour kept
     identical to the original - worth revisiting separately. */
  .boon-tgrid--listing .boon-treatment-title {
    margin-left: 0;
    margin-bottom: 25px;
    font-size: 26px;
  }

  /* Stack name above price */
  .boon-tgrid--listing .boon-opt-row--top {
    flex-direction: column;
    gap: 4px;
  }
}


/* =====================================================================
   ZONE C - DETAIL  [boon_treatment_detail_grid]  standard mode
   ===================================================================== */

/* ---------- C1. Card ---------- */
.boon-individual-page-listing .boon-card {
  position: relative;
  border: 1px solid var(--boon-border-card);
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 10px 28px rgba(39,39,39,0.07);
  overflow: hidden;
}

/* ---------- C2. Groups ---------- */
.boon-individual-page-listing .boon-group {
  margin-top: 0;
  padding-top: 0;
}

.boon-individual-page-listing .boon-group-title {
  font-size: 25px;
  margin: 25px;
  padding-bottom: 0;
  border: 0;
  color: var(--boon-text-main);
}

.boon-individual-page-listing .boon-card .boon-group-desc {
  margin-left: 28px;
  margin-bottom: 28px;
}

/* ---------- C3. Option rows ---------- */
.boon-individual-page-listing li:not(.boon-opt-desc li) {
  padding: 25px;
  background-color: var(--boon-white);
  margin-bottom: 10px;
  border-radius: 15px;
}

.boon-individual-page-listing ul > li:not(.boon-opt-desc li):last-child {
  border-bottom: 0;
  margin-bottom: 0;
}

.boon-individual-page-listing .boon-opt-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--boon-offer);
}

/* QUIRK: this only carries 0,1,0 specificity, so the margin-bottom:8px
   above wins and the rule has no effect. Kept for parity with the
   original - scope it to .boon-individual-page-listing if you want the
   no-description rows to sit tighter. */
.boon-opt-top-no-desc {
  margin-bottom: 0;
}

.boon-individual-page-listing .boon-opt-name {
  font-size: 22px !important;
  line-height: 1.2;
  color: var(--boon-text-main);
  font-weight: 700;
  margin: 0 !important;
}

.boon-individual-page-listing .boon-opt-subheading {
  font-size: 16px;
  line-height: 1.35;
  color: var(--boon-text-grey);
  margin-top: 5px;
  margin-bottom: 0 !important;
}

/* ---------- C4. Package pill ---------- */
.boon-individual-page-listing .boon-opt-package-inline {
  font-size: 14px;
  line-height: 1.2;
  font-weight: 600;
  color: var(--boon-text-main);
  background: var(--boon-offer);
  border: 1px solid rgba(39,39,39,0.04);
  padding: 6px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- C5. Option description ---------- */
.boon-opt-desc {
  margin: 8px 0 0 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--boon-text-grey);
}

.boon-opt-desc p:last-child {
  margin-bottom: 0;
}

.boon-opt-desc ul {
  list-style: disc;
  padding-left: 18px;
  margin: 8px 0;
}

.boon-opt-desc li {
  display: list-item;
  margin: 6px 0;
  padding: 0;
  border: none !important;
}

.boon-opt-desc strong {
  font-weight: 600;
}

/* ---------- C6. Booking buttons ---------- */
.boon-opt-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  margin-top: 20px;
}

.boon-opt-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  padding: 10px 12px;
  border-radius: 5px !important;
  color: var(--boon-text-main) !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  transition: background-color 0.20s ease, border-color 0.20s ease;
  border-style: solid !important;
  border-width: 1px !important;
}

.boon-opt-btn:hover,
.boon-opt-btn:focus {
  outline: none;
  background-color: unset !important;
  color: var(--boon-text-main) !important;
}

.boon-opt-btn-leics {
  background: var(--boon-btn-leics) !important;
  border-color: var(--boon-btn-leics) !important;
}

.boon-opt-btn-leics:hover,
.boon-opt-btn-leics:focus {
  background: #FBBFA6 !important;
  border-color: var(--boon-text-main) !important;
}

.boon-opt-btn-bham {
  background: var(--boon-btn-bham) !important;
  border-color: var(--boon-btn-bham) !important;
}

.boon-opt-btn-bham:hover,
.boon-opt-btn-bham:focus {
  background: #F9A981 !important;
  border-color: var(--boon-text-main) !important;
}

.boon-opt-btn-icon {
  font-size: 20px;
  line-height: 1;
}

/* ---------- C7. Detail tablet + mobile stack (< 900px) ----------
   Name full width, subheading under name, then price, then package. */
@media (max-width: 900px) {

  .boon-individual-page-listing .boon-opt-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding-bottom: 10px;
    margin-bottom: 0;
  }

  .boon-individual-page-listing .boon-opt-left {
    width: 100%;
  }

  .boon-individual-page-listing .boon-opt-name {
    display: block;
    width: 100%;
    margin: 0 !important;
  }

  .boon-individual-page-listing .boon-opt-subheading {
    display: block;
    width: 100%;
    margin-top: 6px;
  }

  .boon-individual-page-listing .boon-opt-right {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .boon-individual-page-listing .boon-opt-price {
    order: 1;
  }

  .boon-individual-page-listing .boon-opt-package-inline {
    order: 2;
    white-space: normal;
    max-width: 100%;
  }
}


/* =====================================================================
   ZONE D - DETAIL, CONDENSED MODE
   Activated by the "condensed_treatment_menu" ACF checkbox.
   Modifier class: .boon-condensed (added alongside
   .boon-individual-page-listing)
   ===================================================================== */

.boon-condensed ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Two-column layout on desktop only.
   The row gap here (10px) provides the vertical spacing between rows
   at >=1024px. Below this width the tablet/mobile blocks take over with
   margin-bottom, and the 901-1023px band is handled by D0 below. */
@media (min-width: 1024px) {
  .boon-condensed ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 10px;
  }

  .boon-condensed li.boon-opt-condensed-row {
    margin-bottom: 0;
  }
}

.boon-condensed li.boon-opt-condensed-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 20px 25px !important;
  margin: 0 !important;
  background-color: var(--boon-white);
  border-radius: 10px;
  border: none;
}

.boon-opt-condensed-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 17px;
  font-weight: 500;
  color: var(--boon-text-main);
  line-height: 1.3;
  order: 1;
}

.boon-opt-condensed-subheading {
  display: block;
  font-size: 13px;
  font-weight: 400;
  color: var(--boon-text-grey);
  margin-top: 3px;
  line-height: 1.3;
}

.boon-condensed .boon-opt-condensed-package {
  flex: 0 0 auto;
  margin-left: auto;
  font-size: 12px !important;
  padding: 4px 9px !important;
  border-radius: 999px;
  white-space: nowrap;
  order: 2;
}

.boon-opt-condensed-price {
  flex: 0 0 auto;
  font-size: 16px;
  font-weight: 600;
  color: var(--boon-text-main);
  white-space: nowrap;
  text-align: right;
  min-width: 50px;
  order: 3;
}

.boon-opt-condensed-price-empty {
  flex: 0 0 50px;
}

.boon-condensed li.boon-opt-condensed-row .boon-opt-cta {
  order: 4;
  flex: 0 0 100%;
  margin-top: 8px;
}

/* ---------- D0. Condensed gap patch (901px - 1023px) ---------- */
/* QUIRK: single-column dead zone. The desktop grid needs >=1024px and
   the tablet rule below stops at <=900px, so between 901-1023px the only
   spacing rule is the base "margin: 0 !important" - rows sit flush with
   no gap. Restore the 8px gap here. MUST sit AFTER the base row rule in
   source order: it shares that rule's selector and !important, so an
   equal-specificity tie is broken by source order - placed before the
   base rule it loses and the gap never appears. */
@media (min-width: 901px) and (max-width: 1023px) {
  .boon-condensed li.boon-opt-condensed-row {
    margin-bottom: 8px !important;
  }
}

/* ---------- D1. Condensed tablet (481px - 900px) ---------- */
/* QUIRK: the padding below is overridden by the
   "padding: 20px 25px !important" on .boon-condensed
   li.boon-opt-condensed-row above, so condensed rows keep desktop
   padding on tablet. Kept as-is - add !important here (or drop it from
   the base rule) if you want the tighter padding to apply. */
@media (max-width: 900px) and (min-width: 481px) {

  .boon-condensed li.boon-opt-condensed-row {
    padding: 10px 16px;
    gap: 4px 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 8px !important;
  }

  .boon-condensed .boon-opt-condensed-name {
    order: 1;
    flex: 1 1 auto;
    font-size: 15px;
  }

  .boon-condensed .boon-opt-condensed-package {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 11px !important;
    white-space: nowrap;
  }

  .boon-condensed .boon-opt-condensed-price {
    order: 3;
    flex: 0 0 auto;
    min-width: unset;
  }

  .boon-condensed li.boon-opt-condensed-row .boon-opt-cta {
    order: 4;
    flex: 0 0 100%;
    margin-top: 8px;
  }
}

/* ---------- D2. Condensed mobile (< 480px) ---------- */
/* QUIRK: same padding override as D1 applies here. */
@media (max-width: 480px) {

  .boon-condensed .boon-group-title {
    margin: 16px 12px 8px 12px;
  }

  .boon-condensed .boon-group-desc,
  .boon-condensed .boon-group > .boon-opt-cta {
    margin-left: 12px;
    margin-right: 12px;
  }

  .boon-condensed li.boon-opt-condensed-row {
    padding: 9px 12px;
    gap: 4px 6px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 8px !important;
  }

  .boon-condensed .boon-opt-condensed-name {
    order: 1;
    flex: 1 1 auto;
    font-size: 15px;
  }

  .boon-condensed .boon-opt-condensed-package {
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    font-size: 11px !important;
    white-space: normal !important;
    text-align: left;
  }

  .boon-condensed .boon-opt-condensed-price {
    order: 3;
    flex: 0 0 auto;
    font-size: 14px;
    min-width: unset;
  }

  .boon-condensed li.boon-opt-condensed-row .boon-opt-cta {
    order: 4;
    flex: 0 0 100%;
    margin-top: 8px;
  }
}


/* =====================================================================
   ZONE E - PROMO BAR
   Was in Appearance > Customize > Additional CSS.

   The base rules below are unchanged and still describe the bar as it
   appears standing alone, via [boon_promo_bar]. On a treatment page it
   now renders INSIDE the menu card instead - see E2 at the end of this
   zone for the overrides that apply there.
   ===================================================================== */

.promo-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 24px;
  border: 1px solid #272727;
  flex-wrap: wrap;
  border-radius: 12px;
  background: #272727;
  margin-bottom: 32px;
}
.promo-bar__title {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FEE5DB;
  margin-right: 8px;
}
.promo-bar__desc {
  font-size: 15px;
  color: #ffffff;
}
.promo-bar__desc b {
  font-weight: 600;
  color: #FDC7B0;
}
.promo-bar__desc .sep {
  color: #FEE5DB;
  margin: 0 8px;
}
.promo-bar__desc .best-value {
  background: #FDC7B0;
  color: #272727;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  margin-left: 6px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}
/* -- Tablet -- */
@media (max-width: 768px) {
  .promo-bar {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 16px 20px;
  }
  .promo-bar__title {
    margin-right: 0;
    margin-bottom: 2px;
    font-size: 18px;
  }
  .promo-bar__desc {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-size: 16px;
  }
  .promo-bar__desc .sep {
    display: none;
  }
  .promo-bar__desc .tier {
    white-space: nowrap;
  }
}
/* -- Mobile -- */
@media (max-width: 480px) {
  .promo-bar {
    padding: 14px 16px;
  }
}


/* ---------------------------------------------------------------------
   E2. PROMO BAR INSIDE THE MENU CARD  [boon_treatment_detail_grid]

   The bar used to sit above the grid, with the special offer between it
   and the menu. It now renders as the card's own header, directly above
   the first group, and the offer leads the page on its own.

   WHY. The bar describes the standing course discounts that apply to the
   very rows underneath it, so it reads as their header rather than as a
   third piece of pricing furniture stacked above everything. It also
   stops the bar - the darkest thing on the page until the offer card
   went near-black - from taking first position and the eye with it.

   Scoped to .boon-individual-page-listing and to a DIRECT child of the
   card, so the standalone [boon_promo_bar] used anywhere else keeps the
   original spacing untouched.
   --------------------------------------------------------------------- */
.boon-individual-page-listing .boon-card > .promo-bar {
  /* 32px was the gap between two separate blocks. Inside the card the
     bar and the first group are one unit, so it tightens to match the
     10px rhythm of the option rows. */
  margin-bottom: 12px;
}

@media (max-width: 480px) {
  /* The card drops to 10px padding here, so the bar needs to give back
     some of its own or the text ends up in a very narrow column. */
  .boon-individual-page-listing .boon-card > .promo-bar {
    padding: 12px 14px;
    margin-bottom: 10px;
  }
}