/* =============================================================================
   BOON AESTHETICS - TREATMENT PAGE OFFER CARD
   offers/assets/offers-treatment.css

   [boon_treatment_offers] - the offer card for treatment pages.

   NEAR-BLACK, AND IT GOT THERE VIA TWO REJECTED VERSIONS. READ BOTH BEFORE EDITING.

   v1 - a solid #F9A981 peach band. Chosen so the offer couldn't be mistaken for
   the promo bar, and it managed that by being the only large flat fill on the page.
   The trouble is it was the only one of everything: every other surface is a white
   card with a 20px radius and a soft shadow (.boon-card in
   assets/treatment-grid.css), every pill is blush #FEE5DB, and every button is a
   5px-radius peach tint with dark text (.boon-opt-btn). A peach slab carrying 999px
   near-black pills shared none of that and read as pasted in from another site.

   v2 - a white card using .boon-card's exact border and shadow, marked as an offer
   by a peach left rule and a blush flag. It solved v1's problem completely, and
   created the opposite one: it matched the treatment menu cards so precisely that
   it read as the first item IN the menu. Meanwhile the promo bar, being the only
   dark object on the page, took the eye first. The offer ranked third on a page it
   was supposed to lead.

   v3 - THIS. Near-black #272727, the same value as the promo bar. That is the
   point: the page already owns an emphasis colour, and it was being spent on the
   standing discounts rather than the live offer. Nothing new is invented; the
   existing emphasis simply moves to the thing that deserves it, and the offer
   outranks the promo bar because it is the larger dark object, not because it
   introduced a louder colour.

   THE PROMO BAR IS UNCHANGED AND STAYS DARK. A conditional light promo bar was
   considered and dropped - promo_desc is author-controlled ACF HTML whose inner
   styling assumes a dark ground (b { color: #FDC7B0 }), so a light variant means
   maintaining a second theme for markup nobody here writes.

   NOT A LEFT RULE ANY MORE. On a dark card the fill is the signal; a peach edge
   would just be decoration. The flag switches to the promo bar's own BEST VALUE
   treatment (#FDC7B0 on near-black) so the two dark surfaces speak one language.

   THE BUTTONS STILL DON'T CHANGE. The peach tints were always designed to carry
   dark text, and they read harder on near-black than they did on white.

   THIS IS THE WEBSITE'S OFFER CARD, NOT THE BOOKING MODAL'S. The modal has its own
   (.bb-offer-card in offers-tab.css), styled to match the service cards it sits
   above. Deliberately two designs: each matches the surface it lives on rather than
   each other, which is exactly what v1 got wrong by trying to be one thing.

   THE BUTTONS DELIBERATELY COPY .boon-opt-btn
   Same 5px radius, same padding, same 14px/600 type, same #FDC7B0 Leicester and
   #FBB79D Birmingham fills, same hover colours, same › icon. A client scanning a
   treatment page sees one kind of booking button, not two. The values are repeated
   here rather than the class being reused, because .boon-opt-btn lives in the
   treatment-grid stylesheet, which is not loaded on every page this shortcode can
   be placed on - see the clinic= note in class-offers-treatment.php.

   IT IS RENDERED BY THE TREATMENT GRID, AND IT COMES FIRST ON THE PAGE.
   The promo bar used to sit above it; the bar has moved inside the menu card, as
   that card's header, because it describes the standing discounts on the rows
   beneath it. So the running order is now: this card, then the menu card with the
   promo bar at the top of it.

   That ordering is only controllable because both come out of the same shortcode -
   a separate Elementor section could put the offer above everything or below the
   whole menu, and nothing in between.

   The 32px bottom margin below is what separates this card from the menu card. It
   no longer needs to match anything: the old value was chosen to collapse against
   the promo bar's own 32px, which is no longer a sibling.

   IF YOU PLACE IT YOURSELF with the standalone [boon_treatment_offers] shortcode,
   give that Elementor section no background and no padding. The card paints its
   own. If the section carries them, a treatment with no live offer gets an empty
   coloured strip: the shortcode returns an empty string but Elementor's wrapper
   doesn't collapse.

   Depends on the 'boon-offers' stylesheet (registered as a dependency), which
   carries DM Sans. The play button and lightbox are in offers-video.css.
   ============================================================================= */

.boon-toffers {
  --toffer-dark:   #272727;  /* the card, and the promo bar it now matches */
  --toffer-accent: #DD9D81;  /* coral - the heading above the card */
  --toffer-peach:  #F9A981;
  --toffer-blush:  #FEE5DB;
  --toffer-white:  #FFFFFF;
  --toffer-btn-leics: #FDC7B0;
  --toffer-btn-bham:  #FBB79D;
  /* --toffer-grey (#5C5C5C) and --toffer-border (the .boon-card edge) are gone:
     both existed only for the white version of this card. Grey text is unreadable
     on near-black, and a near-black card needs no border against the wash. */

  /* LEFT AT 32px DELIBERATELY. The card sits in its own Elementor section between
     the intro and the treatment menu, and the surrounding spacing has been
     balanced there rather than here. A larger margin was tried and reverted
     because it fought that.

     If it ever does need more room, change it here rather than adding padding to
     the section: the shortcode returns an empty string on a treatment with no
     live offer, but Elementor's wrapper does not collapse, so section padding
     becomes a stray strip on every page with nothing running. */
  margin: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: 'DM Sans', sans-serif;
}

.boon-toffers__heading {
  font-size: 20px;
  font-weight: 600;
  color: var(--toffer-dark);
  margin: 0 0 4px;
}

/* --------------------------------------------------------------------------
   RESET THE MARKETING CARD  - READ BEFORE EDITING
   The card carries .boon-offer-card as well as .boon-toffer, because offers.js
   scopes the copy button to it: it calls btn.closest('.boon-offer-card') to find
   the screen-reader live region. Removing the class to "fix" the styling breaks
   the copy confirmation and the accessible announcement, so don't.

   The cost is that the card rules in offers.css apply here too:

     flex-direction: column        stacks and centres everything
     :not(--has-image) gradient    (0,2,0) beats .boon-toffer (0,1,0). Its value
                                   is var()-based and those tokens are scoped to
                                   .boon-offers, not .boon-toffers, so it dies at
                                   computed-value time and takes the background
                                   with it
     border: 1px solid var(...)    same problem - the colour token is out of
                                   scope, so the border must be restated here
     :hover translate + shadow     this card is meant to have neither

   The doubled class below matches the :not() rule's specificity, and this sheet
   is registered as a dependant of 'boon-offers' so it always loads second - the
   later rule wins without needing !important.
-------------------------------------------------------------------------- */
.boon-toffer.boon-offer-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0 22px;

  background: var(--toffer-dark);
  border: 1px solid var(--toffer-dark);
  border-radius: 20px;
  padding: 22px 26px;
  /* Deeper than .boon-card's 0 10px 28px / 0.07 - a near-black card needs more
     lift to separate from the wash than a white one does. */
  box-shadow: 0 14px 34px rgba(39, 39, 39, 0.22);

  /* Radius has to clip the thumbnail's outer corner, but the card must not clip
     anything else - overflow:hidden here would crop a focus ring. */
  overflow: visible;
  transition: none;
}

.boon-toffer.boon-offer-card:hover {
  transform: none;
  box-shadow: 0 14px 34px rgba(39, 39, 39, 0.22);
}

/* No image → two columns, so the body starts hard against the left rule rather
   than leaving an empty first track. */
.boon-toffer.boon-offer-card:not(.boon-toffer--has-media) {
  grid-template-columns: 1fr auto;
}

/* --------------------------------------------------------------------------
   DISCOUNT OFFERS PUT THEIR BUTTONS UNDER THE TEXT, NOT BESIDE IT

   A package offer's blurb is short and its buttons sit comfortably to the right.
   A discount offer has to explain who it is for and name the code, so the text
   runs longer and the right-hand column squeezes it into a narrow strip.

   The media keeps its own column and spans both rows; the body takes row one and
   the buttons row two, so they line up under the text they belong to.
-------------------------------------------------------------------------- */
.boon-toffer--stack-cta.boon-offer-card {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
}

.boon-toffer--stack-cta.boon-offer-card:not(.boon-toffer--has-media) {
  grid-template-columns: 1fr;
}

.boon-toffer--stack-cta .boon-toffer__media { grid-row: 1 / -1; }

.boon-toffer--stack-cta .boon-toffer__cta {
  justify-content: flex-start;
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   THUMBNAIL
   15px radius, matching the option rows inside the treatment menu rather than
   the 20px of the card itself - the same relationship the grid uses between a
   card and the rows nested in it.
-------------------------------------------------------------------------- */
.boon-toffer__media {
  position: relative;   /* the play button is absolutely centred against this */
  width: 168px;
  aspect-ratio: 4 / 3;
  /* Tighter than the 15px of the menu's option rows: inside a near-black card the
     image reads as inset rather than as a card of its own. */
  border-radius: 12px;
  overflow: hidden;
  background: var(--toffer-blush);
  line-height: 0;
}

.boon-toffer__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.boon-toffer__body { min-width: 0; }

/* --------------------------------------------------------------------------
   TEXT
   The flag is the blush pill used everywhere else on the page (.boon-opt-package-
   inline, .boon-course-badge), in coral rather than near-black so it reads as a
   label rather than as another price chip.
-------------------------------------------------------------------------- */
.boon-toffer__head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.boon-toffer__flag {
  flex-shrink: 0;
  /* The promo bar's BEST VALUE pill exactly - see the header note. */
  background: var(--toffer-btn-leics);
  color: var(--toffer-dark);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.boon-toffer__title {
  font-size: 20px;
  font-weight: 600;
  color: var(--toffer-white);
  line-height: 1.3;
}

/* Quieter than the flag and the title. A deadline, not a selling point. Softened
   white rather than a grey, for the same reason as the blurb: this card is
   near-black and the palette has no light neutral. */
.boon-toffer__ends {
  flex-shrink: 0;
  font-size: 13px;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
}

/* Softened white rather than the palette's grey. #5C5C5C on near-black is about
   2.4:1 and unreadable; the palette has no light warm neutral to reach for, so the
   step down from the title comes from opacity - which keeps the warmth of the card
   showing through instead of introducing a colour that isn't in the brand. */
.boon-toffer__blurb {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.76);
}

/* Emphasis inside a blurb, for the headline figure. LIGHT here, not the deeper
   peach the white surfaces use - this card is near-black, so the same colour
   that reads well on the homepage would disappear into it. Same reason the
   blurb itself is softened white rather than the palette's grey. */
.boon-toffer__blurb strong,
.boon-toffer__blurb b {
  font-weight: 600;
  color: var(--toffer-btn-leics);
}

/* --------------------------------------------------------------------------
   BUTTONS
   Scoped with the parent (0,2,0) rather than bare (0,1,0). Elementor's global
   kit emits button styling as `.elementor-kit-NNN button` (0,1,1), which beats a
   single class and repaints these as the theme's outlined button.

   These are .boon-opt-btn in every respect that shows. See the header note.
-------------------------------------------------------------------------- */
.boon-toffer__cta {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.boon-toffer .boon-toffer__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: 5px;
  background: var(--toffer-btn-leics);
  color: var(--toffer-dark);
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.boon-toffer .boon-toffer__btn:hover,
.boon-toffer .boon-toffer__btn:focus {
  color: var(--toffer-dark);
  text-decoration: none;
  border-color: var(--toffer-dark);
}

.boon-toffer .boon-toffer__btn--leicester {
  background: var(--toffer-btn-leics);
  border-color: var(--toffer-btn-leics);
}

.boon-toffer .boon-toffer__btn--leicester:hover,
.boon-toffer .boon-toffer__btn--leicester:focus {
  background: #FBBFA6;
  border-color: var(--toffer-dark);
}

.boon-toffer .boon-toffer__btn--birmingham {
  background: var(--toffer-btn-bham);
  border-color: var(--toffer-btn-bham);
}

.boon-toffer .boon-toffer__btn--birmingham:hover,
.boon-toffer .boon-toffer__btn--birmingham:focus {
  background: var(--toffer-peach);
  border-color: var(--toffer-dark);
}

/* A discount offer's only action is copying the code, so it gets the blush pill
   with a dashed edge - the same "this is a code, not a button to somewhere"
   language as .boon-offer-card__code-row on the marketing card. */
.boon-toffer .boon-toffer__btn--copy {
  background: var(--toffer-blush);
  border: 1.5px dashed var(--toffer-peach);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  letter-spacing: 0.06em;
  padding: 9px 14px;
}

.boon-toffer .boon-toffer__btn--copy:hover,
.boon-toffer .boon-toffer__btn--copy:focus {
  background: #FDD8CB;
  border-color: var(--toffer-accent);
}

/* Shared 'is-copied' state from offers.js. Solid white, so the change is
   unmistakable against the dashed blush resting state.
   NOT near-black, which is what this was while the card was white - on a
   near-black card that confirmation disappeared into the background entirely. */
.boon-toffer .boon-toffer__btn.is-copied {
  background: var(--toffer-white);
  border-style: solid;
  border-color: var(--toffer-white);
  color: var(--toffer-dark);
}

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

/* --------------------------------------------------------------------------
   TABLET
   The thumbnail is the first thing to go: below ~900px the three columns leave
   the title wrapping after two words. Text and buttons keep the side-by-side
   layout, which still works down to phone width.
-------------------------------------------------------------------------- */
@media ( max-width: 900px ) {
  .boon-toffer.boon-offer-card,
  .boon-toffer.boon-offer-card:not(.boon-toffer--has-media) {
    grid-template-columns: 1fr auto;
  }

  .boon-toffer__media { display: none; }
}

/* --------------------------------------------------------------------------
   MOBILE
   Stacks, thumbnail comes back full width above the text (there is room for it
   again once it isn't competing for a row), and the buttons go full width - a
   pill wedged beside wrapping text on a phone ends up unreadably narrow. Two
   clinic buttons stack rather than sitting side by side, matching the grid.
-------------------------------------------------------------------------- */
@media ( max-width: 600px ) {
  /* Doubled class again, to beat the grid reset above. */
  .boon-toffer.boon-offer-card,
  .boon-toffer.boon-offer-card:not(.boon-toffer--has-media) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
    padding: 20px;
  }

  .boon-toffer__media {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .boon-toffer__title { font-size: 18px; }
  .boon-toffer__blurb { font-size: 14px; }

  .boon-toffer__cta {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .boon-toffer .boon-toffer__btn {
    width: 100%;
    justify-content: center;
  }
}