/* =============================================================================
   BOON AESTHETICS - SPECIAL OFFERS TAB (booking modal)
   offers/assets/offers-tab.css

   The pinned "Special Offers" entry at the top of the modal sidebar, and the
   offer cards it shows in the service area.

   Scoped to #boon-booking-overlay and using !important, matching the convention
   in booking-flow.css - the modal has to beat Elementor's specificity. Loaded as
   a dependant of the 'boon-booking' stylesheet so it always cascades after it,
   and only on pages where the booking modal is enqueued.

   Reuses the modal's own custom properties (--bb-*), declared on
   #boon-booking-overlay in booking-flow.css and so in scope here.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   SIDEBAR ENTRY
   Inherits .bb-sidebar-item wholesale - same padding, same active treatment
   (blush fill + peach left rule) - so it reads as one of the tabs rather than a
   foreign element bolted on top. Only the weight, colour and separator differ.
--------------------------------------------------------------------------- */
#boon-booking-overlay .bb-sidebar-item--offers,
#boon-booking-overlay .bb-mobile-treatment-item--offers {
  color: var(--bb-coral) !important;
  font-weight: 600 !important;
}

/* Rule beneath, separating offers from the treatment list proper. */
#boon-booking-overlay .bb-sidebar-item--offers {
  border-bottom: 1px solid var(--bb-border) !important;
  margin-bottom: 6px !important;
  padding-bottom: 11px !important;
}

#boon-booking-overlay .bb-mobile-treatment-item--offers {
  border-bottom: 1px solid var(--bb-border) !important;
}

#boon-booking-overlay .bb-sidebar-offers-star {
  margin-right: 8px !important;
  font-size: 11px !important;
  vertical-align: 1px !important;
}

/* ---------------------------------------------------------------------------
   OFFER CARDS
--------------------------------------------------------------------------- */
#boon-booking-overlay .bb-offers-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 4px !important;
}

#boon-booking-overlay .bb-offer-card {
  all: unset !important;
  display: block !important;
  box-sizing: border-box !important;
  width: 100% !important;
  padding: 16px !important;
  border: 1px solid var(--bb-border) !important;
  border-radius: var(--bb-radius-md) !important;
  background: var(--bb-white) !important;
  font-family: var(--bb-font) !important;
  transition: var(--bb-transition) !important;
}

/* Only the package cards are selectable, so only they get affordances. */
#boon-booking-overlay .bb-offer-card--package {
  cursor: pointer !important;
}

#boon-booking-overlay .bb-offer-card--package:hover {
  border-color: var(--bb-peach-mid) !important;
}

#boon-booking-overlay .bb-offer-card--package.active {
  border-color: var(--bb-peach) !important;
  background: var(--bb-blush-pale) !important;
  box-shadow: inset 0 0 0 1px var(--bb-peach) !important;
}

/* Discount cards are information, not a choice - flat, no hover, no pointer. */
#boon-booking-overlay .bb-offer-card--discount {
  background: var(--bb-blush-pale) !important;
  border-style: dashed !important;
}

/* Dark title bar, bleeding to the card edges.
   Deliberately identical to .bb-svc-card-name in booking-flow.css: offer cards now
   sit directly above the service cards in the treatment panel, so anything other
   than the same header would read as a foreign component. The negative margins are
   -(padding + border) - 16px + 1px here, against the service card's 14/16px + 1.5px
   - so if .bb-offer-card's padding changes, these must change with it. */
#boon-booking-overlay .bb-offer-name {
  font-family: var(--bb-font) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--bb-white) !important;
  line-height: 1.3 !important;

  background: var(--bb-dark) !important;
  margin: -17px -17px 10px !important;
  padding: 10px 16px !important;
  border-radius: var(--bb-radius-md) var(--bb-radius-md) 0 0 !important;
}

/* The author's badge from the offer editor - "8 for the price of 6" - NOT a
   calculated percentage. It replaced an auto "Save N%" chip, which sat inches from
   the ordinary package chips and their own percentages for a different service, so
   a 15% offer read as worse than a 40% standing package.

   Free text, so it wraps rather than being forced onto one line. This is the field
   that overflowed when it briefly lived on a package chip. */
#boon-booking-overlay .bb-offer-badge {
  display: inline-block !important;
  flex-shrink: 0 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  padding: 4px 9px !important;
  border-radius: 20px !important;
  background: var(--bb-peach) !important;
  color: var(--bb-white) !important;
  letter-spacing: 0.02em !important;
}

/* Offers shown above a treatment's service options. Same cards as the tab; only
   the spacing beneath differs, separating them from the service grid below. */
#boon-booking-overlay .bb-offers-list--inline {
  margin: 0 0 18px !important;
}

/* --bb-dark, the primary text colour. Went --bb-muted (#aaa, 2.3:1) to --bb-mid
   (#5C5C5C, 6.7:1) to here (#272727, 15.3:1) across two rounds of Zaf saying it
   read too light, 2026-08-21.

   DO NOT QUIETLY MUTE THIS AGAIN. Treating it as secondary text was the original
   mistake. It is the only sales copy on the card, it is the sentence that has to
   sell the offer, and there is no reason for it to be dimmer than body text
   anywhere else on the site.

   Hierarchy still works without dimming it. The title sits reversed out on a dark
   bar above, and the price is the same colour at 20px/600 against this at
   13px/400, so size and weight carry the difference. The end date below stays on
   --bb-mid, which now reads as deliberately subordinate rather than as a second
   shade of unreadable.

   The marketing card in offers.css was moved to --boon-dark to match. Same
   sentence, same reader, and letting the two drift apart is what started this. */
#boon-booking-overlay .bb-offer-blurb {
  margin-top: 6px !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  color: var(--bb-dark) !important;
}

/* Emphasis inside a blurb, for the headline figure. The card body is white, so
   this takes the deeper peach the other light surfaces use rather than the brand
   --bb-peach, which is too faint to read at 13px. */
#boon-booking-overlay .bb-offer-blurb strong,
#boon-booking-overlay .bb-offer-blurb b {
  font-weight: 600 !important;
  color: #B96B45 !important;
}

#boon-booking-overlay .bb-offer-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 10px !important;
}

#boon-booking-overlay .bb-offer-sessions {
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  padding: 4px 8px !important;
  border-radius: 20px !important;
  letter-spacing: 0.02em !important;
  background: var(--bb-dark) !important;
  color: var(--bb-white) !important;
}

/* Quieter than the badge beside it. This is a deadline, not a selling point -
   it should be readable without competing with the saving.

   Moved off --bb-muted with the blurb above. It sits on the same card at 11px, so
   leaving the smaller text lighter than the larger text would have looked like an
   oversight the moment the blurb darkened. "Quieter" is done with size and weight
   here, not by dropping below readable contrast. */
#boon-booking-overlay .bb-offer-ends {
  font-size: 11px !important;
  line-height: 1.3 !important;
  color: var(--bb-mid) !important;
  white-space: nowrap !important;
}

#boon-booking-overlay .bb-offer-price {
  margin-top: 10px !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: var(--bb-dark) !important;
}

#boon-booking-overlay .bb-offer-card--package.active .bb-offer-price {
  color: var(--bb-peach) !important;
}

/* .bb-offer-note is GONE - the "pay today, we'll be in touch to book your
   sessions" line under the price. It was there to set the expectation that a
   package is paid for now and scheduled later, which is not what the rest of the
   modal does. Removed on request: it read as a caveat at the exact moment the card
   is trying to sell, and the same thing is said properly at the payment step.
   Don't reinstate it here without asking. */

/* ---------------------------------------------------------------------------
   KLARNA / CLEARPAY PANEL
   The OSM element mounts into .bb-offer-osm when an offer card is selected.

   booking-flow.css gives that panel a rule above it once its card is active, but
   both of its rules are scoped to .bb-svc-card - `.bb-svc-card[data-has-pkg-chips]
   .active` and `.bb-svc-card.active`. An offer card is a .bb-offer-card, so it
   matched neither and the panel appeared flush against the price with no
   separator, unlike every other selected card in the modal.

   Same values as the service-card rule it mirrors, deliberately: this should look
   like the same component, because it is.
--------------------------------------------------------------------------- */
#boon-booking-overlay .bb-offer-card--package.active .bb-offer-osm:not(:empty) {
  border-top: 1px solid rgba(39, 39, 39, 0.18) !important;
  padding-top: 10px !important;
  margin-top: 10px !important;
}

/* ---------------------------------------------------------------------------
   DISCOUNT CODE ROW
--------------------------------------------------------------------------- */
#boon-booking-overlay .bb-offer-code-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 12px !important;
  flex-wrap: wrap !important;
}

#boon-booking-overlay .bb-offer-code {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  padding: 8px 12px !important;
  border: 1px dashed var(--bb-peach-mid) !important;
  border-radius: var(--bb-radius-sm) !important;
  background: var(--bb-white) !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  color: var(--bb-dark) !important;
  text-align: center !important;
  word-break: break-all !important;
}

#boon-booking-overlay .bb-offer-copy {
  all: unset !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
  padding: 9px 16px !important;
  border-radius: var(--bb-radius-sm) !important;
  background: var(--bb-peach) !important;
  color: var(--bb-white) !important;
  font-family: var(--bb-font) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-align: center !important;
  transition: var(--bb-transition) !important;
}

#boon-booking-overlay .bb-offer-copy:hover {
  background: var(--bb-coral) !important;
}

#boon-booking-overlay .bb-offer-copy--done {
  background: var(--bb-dark) !important;
}

/* ---------------------------------------------------------------------------
   EMPTY STATE
   Only reachable by switching clinic with the tab open - the sidebar entry is
   not rendered at all when a clinic has no live offers.
--------------------------------------------------------------------------- */
#boon-booking-overlay .bb-offers-empty {
  padding: 20px 16px !important;
  border: 1px dashed var(--bb-border-mid) !important;
  border-radius: var(--bb-radius-md) !important;
  color: var(--bb-muted) !important;
  font-size: 14px !important;
  text-align: center !important;
  font-family: var(--bb-font) !important;
}

/* ---------------------------------------------------------------------------
   MOBILE
--------------------------------------------------------------------------- */
@media ( max-width: 600px ) {
  #boon-booking-overlay .bb-offer-card {
    padding: 14px !important;
  }

  /* Header bleed follows the reduced padding - see the note on .bb-offer-name. */
  #boon-booking-overlay .bb-offer-name {
    margin: -15px -15px 10px !important;
    padding: 10px 14px !important;
  }

  #boon-booking-overlay .bb-offer-copy {
    width: 100% !important;
  }
}