/*
 * promo.css — homepage gift-card promotion surfaces.
 *
 *   .hero-text .il-022  the hero's Book Your Session button, made solid so booking stays the
 *                       primary action above the gift panel (moved from .hero-cta into
 *                       .hero-text 2026-09-25, ittheal-homepage-layout-critical Part A2)
 *   .hero-gift         always-on gift panel in the hero slot the retired app card left empty
 *   .confirm-gift      static callout on the booking thank-you step
 *   .promo-bar         seasonal one-line announcement (injected by js/promo.js, dated windows only)
 *   .promo-sheet       seasonal non-modal bottom slide-in (injected by js/promo.js)
 *
 * Evidence and rules: dev/research/dig-gift-wallet-promo-ui-2026-09-23.md §3, §6, §7, §9.
 * Colours come from the --sage-* palette and the warm-gray/charcoal tokens in luxury-spa.css;
 * nothing here re-declares a token. Every control is at least 44x44 CSS px (older audience).
 * Breakpoints follow the site: 768px (css/desktop.css switches at 769px), 344px, the 1200px
 * two-column hero in css/desktop.css, and 600px where the slide-in becomes a bottom sheet.
 */

/* ---------- primary hero action ---------- */
/* Scoped to the hero so the lifted .il-022 rule (css/inline-lifted.css) is untouched elsewhere;
   (0,3,0) specificity beats its (0,2,0). White on --sage-700 is 6.9:1.
   2026-09-25 (ittheal-homepage-antislop continuation, item 4 — CTA hierarchy): full-width added
   so the button spans the same 400px column as the gift/wallet panels below it (.il-020's own
   max-width) instead of reading as a small pill floating above two large cards. Now the primary
   action is the widest, tallest, most-shadowed element in the stack — the panels' own CTAs
   (.hero-wallet__cta-btn: 44px/1rem/teal, no shadow; the gift panel has no solid button at all)
   stay visually subordinate without any change to their own colour family. */
/* 2026-09-25 (ittheal-homepage-layout-critical, Part A2): .il-020's wrapper moved from being a
   flex ITEM of .il-014/.hero-cta to a plain block child of .hero-text (see index.html) so the
   primary CTA reads as attached to the headline, not the gift/wallet cards. .hero-text has no
   flex/grid of its own, so .il-020 (a block div by default, max-width:400px from
   css/inline-lifted.css) already spans the full available column width up to that cap without
   help -- width:100% is kept as explicit intent, matching the .il-022 width:100% below, rather
   than relying on block-default behavior silently. Re-scoped from `.hero-cta` to `.hero-text` to
   match the new ancestor; `.hero-cta` no longer contains this element at all. */
.hero-text .il-020.il-020 {
  width: 100%;
}

.hero-text .il-022.il-022 {
  display: block;
  width: 100%;
  min-height: 56px;
  padding: 1rem 2.25rem;
  font-size: 1.125rem;
  font-weight: 600;
  color: #fff;
  background: var(--sage-700);
  border-color: var(--sage-700);
  box-shadow: 0 10px 22px -12px rgba(45, 62, 45, 0.6);
}

.hero-text .il-022.il-022:hover {
  background: var(--sage-800);
  border-color: var(--sage-800);
}

.hero-text .il-022.il-022:focus-visible {
  outline: 3px solid var(--sage-800);
  outline-offset: 3px;
}

/* ---------- hero gift panel ---------- */
.hero-gift {
  width: 100%;
  max-width: 23rem;
  margin: var(--space-xl) auto 0;
  padding: var(--space-lg);
  text-align: left;
  background: rgba(255, 255, 255, 0.66);
  border: 1px solid var(--sage-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 24px -16px rgba(61, 79, 61, 0.25);
}

.hero-gift__head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

/* The card itself: a rendered, ribbon-wrapped object, so the offer reads as a thing you give.
   Layers, top to bottom: sheen, horizontal ribbon, vertical ribbon, card body. */
.hero-gift__card {
  flex: 0 0 auto;
  position: relative;
  width: 7rem;
  height: 4.4rem;
  border-radius: 0.65rem;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.2) 0 28%, transparent 28%),
    linear-gradient(0deg, transparent 0 40%, rgba(255, 255, 255, 0.18) 40% 48%, transparent 48%),
    linear-gradient(90deg, transparent 0 80%, var(--sage-300) 80% 87%, transparent 87%),
    linear-gradient(135deg, var(--sage-600) 0%, var(--sage-800) 100%);
  box-shadow: 0 12px 20px -10px rgba(45, 62, 45, 0.55);
  transform: rotate(-6deg);
}

/* The bow, where the two ribbons cross. */
.hero-gift__card::after {
  content: "";
  position: absolute;
  left: calc(83.5% - 7px);
  top: calc(44% - 7px);
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--sage-200);
  box-shadow: 0 1px 3px rgba(45, 62, 45, 0.4);
}

.hero-gift__card-mark {
  position: absolute;
  left: 0.55rem;
  top: 0.5rem;
  width: 1.35rem;
  height: 1.35rem;
  /* The lotus asset is sage-on-transparent; render it white on the dark card. */
  filter: brightness(0) invert(1);
}

.hero-gift__card-label {
  position: absolute;
  left: 0.55rem;
  bottom: 0.4rem;
  font-family: 'Playfair Display', serif;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #fff;
}

.hero-gift__eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-600);
}

.hero-gift__title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--spa-charcoal);
}

.hero-gift__byline {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
}

/* 2026-09-25 (ittheal-homepage-layout, Part A2 — CTA hierarchy): a face triggers pre-attentive
   eye-contact focus regardless of size, competing with the Book CTA above this panel. Shrunk and
   the white ring/shadow (both salience cues) dropped so it reads as a small supporting credential
   next to the lede text, not a second focal point. */
.hero-gift__face {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-full);
  object-fit: cover;
  border: 1px solid var(--sage-200);
}

.hero-gift__lede {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--warm-gray-700);
}

/* 2026-09-25 (ittheal-homepage-layout, Part A3 — CTA hierarchy): replaces the old 3-tile amount
   grid + "choose any amount" link (4 competing choices) with one CTA. 44px/no heavy shadow,
   matching .hero-wallet__cta-btn's weight one panel down -- the gift panel still has no button
   as heavy as the primary .il-022 Book CTA above it (that invariant is the whole point of this
   hero -- see css/promo.css's file-header comment).
   2026-09-25 continuation (re-score finding, user-experience-agent): weight alone (44px/1rem/no
   shadow vs the primary's 56px/1.125rem/shadow) wasn't enough -- both buttons were solid
   sage-700 fill with white text, so a fast System-1 scan still registered two identical-hue
   pop-out targets in the same hero. Switched to an OUTLINE treatment (sage-700 border + text on
   transparent, no fill) so there is exactly one solid-fill CTA in the hero at a time; the primary
   .il-022 keeps its fill unchanged. sage-700 text on the card's white background measures
   6.77:1 (already verified elsewhere on this page for the same token pairing), comfortably AA. */
.hero-gift__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  min-height: 44px;
  margin: 0 0 var(--space-xs);
  padding: 0.6rem 1.1rem;
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--sage-700);
  text-decoration: none;
  background: transparent;
  border: 2px solid var(--sage-700);
  /* 2026-09-25 continuation (lnf-orchestrator-agent, iteration-2 CTA-radius finding): was
     --radius-md (8px) -- unified with the page's other 3 CTA styles onto --radius-full. */
  border-radius: var(--radius-full);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hero-gift__cta:hover {
  background: var(--sage-700);
  color: #fff;
}

.hero-gift__cta:focus-visible,
.confirm-gift__cta:focus-visible,
.promo-bar__link:focus-visible,
.promo-bar__close:focus-visible,
.promo-sheet__cta:focus-visible,
.promo-sheet__close:focus-visible {
  outline: 3px solid var(--sage-700);
  outline-offset: 2px;
}

.hero-gift__range {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--warm-gray-700);
  text-align: center;
}

/* ---------- hero wallet panel ---------- */
/* Distinct from .hero-gift: teal accent (matches css/wallet.css --w-teal, the page this CTA
   goes to) instead of sage, so the two panels read as different offers at a glance. Local
   tokens declared here rather than depending on wallet.css being loaded on index.html. */
.hero-wallet {
  --wallet-teal-50: #eef5f5;
  --wallet-teal-600: #608c8d;
  --wallet-teal-700: #4a6f70;
  --wallet-teal-800: #3a5859;   /* hover-only text color; #608c8d/#4a6f70 fail/borderline for text-on-hover, this computes ~6.99:1 on --wallet-teal-50 -- WCAG AA, wce-verified */
  width: 100%;
  max-width: 23rem;
  margin: var(--space-xl) auto 0;
  padding: var(--space-lg);
  text-align: left;
  background: var(--wallet-teal-50);
  border: 1px solid var(--wallet-teal-600);
  border-radius: var(--radius-xl);
  box-shadow: 0 8px 24px -16px rgba(74, 111, 112, 0.25);
}

.hero-wallet__head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}

.hero-wallet__card {
  flex: 0 0 auto;
  position: relative;
  width: 7rem;
  height: 4.4rem;
  border-radius: 0.65rem;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.2) 0 28%, transparent 28%),
    linear-gradient(135deg, var(--wallet-teal-600) 0%, var(--wallet-teal-700) 100%);
  box-shadow: 0 12px 20px -10px rgba(74, 111, 112, 0.55);
  transform: rotate(-6deg);
}

.hero-wallet__card-mark {
  position: absolute;
  left: 0.55rem;
  top: 0.5rem;
  width: 1.35rem;
  height: 1.35rem;
  filter: brightness(0) invert(1);
}

.hero-wallet__card-label {
  position: absolute;
  left: 0.55rem;
  bottom: 0.4rem;
  font-family: 'Playfair Display', serif;
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  white-space: nowrap;
  color: #fff;
}

.hero-wallet__title {
  margin: 0;
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--spa-charcoal);
}

.hero-wallet__lede {
  margin: 0 0 var(--space-sm);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--warm-gray-700);
}

.hero-wallet__fine {
  margin: 0 0 var(--space-md);
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--warm-gray-700);
}

.hero-wallet__fine a {
  color: var(--wallet-teal-700);
}

.hero-wallet__link {
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-lg);
}

.hero-wallet__link:focus-visible {
  outline: 3px solid var(--wallet-teal-700);
  outline-offset: 4px;
}

.hero-wallet__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  margin-top: var(--space-xs);
  padding: 0.6rem 1.1rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  /* 2026-09-25 (lnf full-homepage audit, widened Part 3): was a solid var(--wallet-teal-700) fill
     with white text -- a second solid-fill CTA competing with the hero's primary "Book Your
     Session" button in the same viewport. Switched to the same outline treatment as its sibling
     .hero-gift__cta above (border+text on transparent, fill only on hover), so there is exactly
     one solid-fill CTA in the hero at a time. #4a6f70 text on white measures ~5.5:1, AA. */
  color: var(--wallet-teal-700);
  background: transparent;
  border: 2px solid var(--wallet-teal-700);
  /* 2026-09-25 iteration-3 (lnf-orchestrator-agent re-score, 7.4/10): the CTA-radius unification
     pass (luxury-spa.css .btn-luxury comment, same date) moved every other CTA style -- including
     this button's own sibling .hero-gift__cta above -- onto --radius-full and missed this one. */
  border-radius: var(--radius-full);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.hero-wallet__link:hover .hero-wallet__cta-btn {
  color: #fff;
  background: var(--wallet-teal-700);
}

.hero-wallet__details {
  margin-top: var(--space-sm);
}

.hero-wallet__details-summary {
  display: flex;
  align-items: center;
  min-height: 44px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--wallet-teal-700);
}

.hero-wallet__details[open] .hero-wallet__details-summary {
  margin-bottom: var(--space-xs);
}

.hero-wallet__details .hero-wallet__fine {
  margin: 0;
}

/* ---------- booking-confirmation wallet offer (step 7, §8.1 row 2) ---------- */
.wallet-offer {
  --wallet-teal-50: #eef5f5;
  --wallet-teal-600: #608c8d;
  --wallet-teal-700: #4a6f70;
  --wallet-teal-800: #3a5859;
  margin: var(--space-lg) 0 0;
  padding: var(--space-lg);
  text-align: left;
  background: var(--wallet-teal-50);
  border: 1px solid var(--wallet-teal-600);
  border-radius: var(--radius-xl);
}

.wallet-offer__title {
  margin: 0 0 var(--space-xs);
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--spa-charcoal);
}

.wallet-offer__lede,
.wallet-offer__fine {
  margin: 0 0 var(--space-md);
  color: var(--warm-gray-700);
}

.wallet-offer__lede {
  font-size: 1rem;
  line-height: 1.5;
}

.wallet-offer__fine {
  font-size: 0.8125rem;
  line-height: 1.4;
}

.wallet-offer__fine a {
  color: var(--wallet-teal-700);
}

.wallet-offer__tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}

/* 2026-09-25 (ittheal-homepage-layout-critical, Part A review fix): explicit font-family added --
   same shadowing this file's .mobile-menu-link fix documents in luxury-spa.css (this `<a>` sits
   inside a bare `<li>` and started silently inheriting the new body-copy `p, li` rule). Matches
   the site-nav.css desktop nav's own Playfair Display declaration for UI/selection controls. */
.wallet-offer__tile {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-height: 44px;
  padding: var(--space-sm) var(--space-md);
  color: var(--spa-charcoal);
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  text-decoration: none;
  background: #fff;
  border: 1px solid var(--wallet-teal-600);
  border-radius: var(--radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wallet-offer__tile:hover {
  border-color: var(--wallet-teal-800);
  box-shadow: 0 6px 16px -10px rgba(74, 111, 112, 0.45);
}

.wallet-offer__tile:focus-visible {
  outline: 3px solid var(--wallet-teal-700);
  outline-offset: 2px;
}

.wallet-offer__tile--featured {
  border-width: 2px;
  border-color: var(--wallet-teal-700);
}

.wallet-offer__note {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wallet-teal-700);
}

.wallet-offer__amount {
  font-size: 1.05rem;
  font-weight: 600;
}

.wallet-offer__save {
  font-size: 1rem;
  font-weight: 600;
  color: var(--wallet-teal-800);
}

.wallet-offer__sessions {
  font-size: 0.875rem;
  color: var(--warm-gray-700);
}

.wallet-offer__dismiss {
  min-height: 44px;
  padding: 0.5rem 0.75rem;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--wallet-teal-700);
  background: none;
  border: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.wallet-offer__dismiss:focus-visible {
  outline: 3px solid var(--wallet-teal-700);
  outline-offset: 2px;
}

@media (min-width: 640px) {
  .wallet-offer__tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-wallet__cta-btn,
  .wallet-offer__tile {
    transition: none;
  }
}

/* Visually hidden text: completes an accessible name, or carries a status announcement. */
.promo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- booking thank-you callout ---------- */
.confirm-gift {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  text-align: center;
  background: #fff;
  border: 1px solid var(--sage-300);
  border-radius: var(--radius-lg);
}

/* A smaller copy of the hero card, used on the thank-you callout and the slide-in. */
.promo-mini-card.hero-gift__card {
  width: 3.5rem;
  height: 2.2rem;
  margin-bottom: var(--space-sm);
  border-radius: 0.4rem;
}

.promo-mini-card.hero-gift__card::after {
  width: 8px;
  height: 8px;
  left: calc(83.5% - 4px);
  top: calc(44% - 4px);
}

.confirm-gift__title {
  margin: 0 0 var(--space-xs);
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--spa-charcoal);
}

.confirm-gift__text {
  margin: 0 0 var(--space-md);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--warm-gray-700);
}

.confirm-gift__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
}

/* ---------- seasonal top bar (non-sticky, one line) ---------- */
/* 2026-09-25 (ittheal-homepage-layout, Part A1 — CTA hierarchy): was a solid --sage-800 band
   (white text), the same visual weight as a hero banner — reading as competing with, not
   subordinate to, the hero's Book CTA below it. A light sage strip with dark text and a thin
   bottom rule reads as a persistent notice, not a second hero. Sage-800 (#3d4f3d) on sage-100
   (#f0f4f0) measures ~10.9:1 -- far past WCAG AA. Copy and placement-above-hero are unchanged
   (js/promo.js now inserts it after <header>, not before it -- see that file's comment). */
.promo-bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  max-height: 52px;
  padding: 0.3rem 3.25rem 0.3rem var(--space-md);
  background: var(--sage-100);
  border-bottom: 1px solid var(--sage-200);
  color: var(--sage-800);
  font-size: 0.9375rem;
  line-height: 1.3;
}

.promo-bar__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: 'Playfair Display', serif;
  color: var(--sage-800);
  text-decoration: none;
}

.promo-bar__link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.promo-bar__short {
  display: none;
}

.promo-bar__close,
.promo-sheet__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  font-size: 1.5rem;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
}

.promo-bar__close {
  position: absolute;
  top: 50%;
  right: 0.25rem;
  margin-top: -22px;
  color: var(--sage-700);
}

.promo-bar__close:hover {
  background: rgba(61, 79, 61, 0.1);
}

/* ---------- seasonal non-modal slide-in ---------- */
.promo-sheet {
  position: fixed;
  right: var(--space-lg);
  bottom: var(--space-lg);
  z-index: 40;
  width: min(22.5rem, calc(100vw - 2rem));
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  background: #fff;
  border: 1px solid var(--sage-200);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 48px -20px rgba(45, 62, 45, 0.45);
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.promo-sheet.is-open {
  opacity: 1;
  transform: none;
}

.promo-sheet__close {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  color: var(--warm-gray-700);
}

.promo-sheet__close:hover {
  background: var(--sage-100);
}

.promo-sheet__title {
  margin: 0 2.5rem var(--space-xs) 0;
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--spa-charcoal);
}

.promo-sheet__text {
  margin: 0 0 var(--space-md);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--warm-gray-700);
}

.promo-sheet__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
}

/* ---------- tablet and phone ---------- */
@media (max-width: 768px) {
  /* Horizontal-scroll guard (html-ui.md §Mobile Responsiveness); css/index-theme.css sets the
     same guard, repeated here so this file stays correct on any page that loads it alone. */
  html {
    overflow-x: hidden;
  }

  .promo-bar {
    font-size: 0.9375rem;
  }

  .promo-bar__long {
    display: none;
  }

  .promo-bar__short {
    display: inline;
  }
}

/* ---------- phones: the slide-in becomes a bottom sheet ---------- */
@media (max-width: 600px) {
  .promo-sheet {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 25vh;
    overflow-y: auto;
    padding: var(--space-md) var(--space-md) var(--space-sm);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .promo-sheet__text {
    display: none;
  }

  .promo-sheet .promo-mini-card {
    display: none;
  }
}

/* ---------- smallest supported phone ---------- */
@media (max-width: 344px) {
  .hero-gift,
  .confirm-gift {
    padding: var(--space-md);
  }

  .hero-gift__card {
    width: 5.75rem;
    height: 3.6rem;
  }

  .hero-gift__amt {
    font-size: 1rem;
  }

  .hero-gift__for {
    font-size: 0.75rem;
  }

  .hero-wallet {
    padding: var(--space-md);
  }

  .hero-wallet__card {
    width: 5.75rem;
    height: 3.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-gift__amount,
  .promo-sheet {
    transition: none;
  }

  .hero-gift__amount:hover {
    transform: none;
  }

  .promo-sheet {
    transform: none;
  }
}