/*
Theme Name: Lucky Little Riders
Theme URI: https://luckylittleriders.com
Author: Omnine LLC
Author URI: https://omnine.com
Description: Custom theme for Lucky Little Riders LLC - a horseback riding lesson program in Thousand Oaks, California. Built from the ground up with a focus on conversion, simplicity, and Rebecca's authentic brand personality.
Version: 2.3.46
License: Proprietary - Built for Lucky Little Riders LLC by Omnine LLC
Text Domain: llr
Tags: horse, equestrian, lessons, kids, thousand-oaks
*/

/* ============================================
   LUCKY LITTLE RIDERS — CUSTOM THEME
   Built by Omnine LLC for Rebecca Menco
   Version 1.0.0 - April 2026
   ============================================ */

/* ===== FONT IMPORTS ===== */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;700&family=Fraunces:ital,wght@0,400;0,500;0,600;1,400&family=DM+Sans:wght@400;500;600;700&display=swap');

/* ===== CSS VARIABLES ===== */
:root {
  --purple: #A594D1;
  --purple-deep: #7B62B8;
  --purple-soft: #E8DFFA;
  --pink: #F4A3B8;
  --pink-soft: #FCE4EB;
  --blue: #9FC5E8;
  --blue-soft: #E1EFFA;
  --cream: #FFFBF5;
  --cream-warm: #FDF4E8;
  --charcoal: #3D3450;
  --charcoal-soft: #6B6278;
  --white: #FFFFFF;
  --gold: #E8B76C;
  --max-width: 1280px;
  --header-height: 80px;
}

/* ===== RESET & BASE ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  overflow-x: clip; /* Was 'hidden' — broke position:sticky on .site-header.
                       'clip' has same visual effect without creating a
                       scroll context. Safe in all current browsers. */
  max-width: 100%;
}

body {
  font-family: 'DM Sans', sans-serif;
  color: var(--charcoal);
  background: var(--cream);
  line-height: 1.6;
  overflow-x: clip;
  max-width: 100%;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }

img { max-width: 100%; height: auto; display: block; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ===== TYPOGRAPHY UTILITIES ===== */
.script {
  font-family: 'Caveat', cursive;
  font-weight: 700;
  color: var(--purple-deep);
  font-size: 1.15em;
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  color: var(--charcoal);
  line-height: 1.15;
  letter-spacing: -0.5px;
}

h1 { font-size: 64px; letter-spacing: -1.5px; }
h2 { font-size: 48px; letter-spacing: -1px; }
h3 { font-size: 32px; }
h4 { font-size: 24px; }

p { margin-bottom: 1rem; }

/* ===== LAYOUT ===== */
.container {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

.section {
  padding: 90px 0;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.section-header {
  text-align: center;
  margin-bottom: 60px;
}

.section-eyebrow {
  font-family: 'Caveat', cursive;
  font-size: 26px;
  color: var(--pink);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.section-intro {
  font-size: 17px;
  color: var(--charcoal-soft);
  max-width: 620px;
  margin: 16px auto 0;
  line-height: 1.7;
}

/* ===== BUTTONS ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 15px 32px;
  border-radius: 30px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: all 0.2s;
  cursor: pointer;
  text-decoration: none;
}

.btn-primary {
  background: var(--purple-deep);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(123, 98, 184, 0.25);
}

.btn-primary:hover {
  background: var(--charcoal);
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(123, 98, 184, 0.35);
}

.btn-secondary {
  background: var(--white);
  color: var(--purple-deep);
  border: 2px solid var(--purple);
  padding: 13px 28px;
}

.btn-secondary:hover {
  background: var(--purple-soft);
  color: var(--purple-deep);
}

.btn-pink {
  background: var(--pink);
  color: var(--white);
}

.btn-pink:hover {
  background: var(--purple-deep);
  color: var(--white);
}

/* ===== TOP ANNOUNCEMENT BAR ===== */
.top-bar {
  background: var(--purple-deep);
  color: var(--cream);
  padding: 10px 0;
  font-size: 13px;
  text-align: center;
  letter-spacing: 0.3px;
  font-weight: 500;
}

.top-bar-ornament {
  color: var(--pink-soft);
  margin: 0 8px;
  font-family: 'Caveat', cursive;
  font-size: 18px;
}

/* ===== HEADER ===== */
.site-header {
  background: var(--cream);
  padding: 18px 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--purple-soft);
  position: sticky;
  top: 0;
  z-index: 100;
  min-height: var(--header-height);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}

.site-header.is-scrolled {
  box-shadow: 0 2px 12px rgba(123, 98, 184, 0.10);
  /* Slightly more opaque background when scrolled in case content peeks
     under at half-pixel boundaries on hi-dpi displays */
  background: var(--cream);
}

.site-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.site-logo img {
  max-height: 60px;
  width: auto;
}

.site-logo-fallback {
  padding: 4px 22px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--purple-soft) 15%,
    var(--pink-soft) 50%,
    var(--blue-soft) 85%,
    transparent 100%);
  border-radius: 50%;
}

.site-logo-fallback-text {
  font-family: 'Caveat', cursive;
  font-size: 30px;
  font-weight: 700;
  color: var(--charcoal);
  letter-spacing: 0.5px;
  line-height: 1;
}

.main-nav {
  flex: 1;
  display: flex;
  justify-content: center;
}

.main-nav ul {
  display: flex;
  list-style: none;
  gap: 28px;
  align-items: center;
  margin: 0;
  padding: 0;
}

.main-nav a {
  color: var(--charcoal);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
  padding: 8px 0;
  white-space: nowrap; /* Prevent multi-word items like "Our Ponies" from wrapping
                          mid-link when the viewport tightens — they should stay
                          on one line or trigger the mobile breakpoint. */
}

.main-nav a:hover,
.main-nav .current-menu-item a {
  color: var(--purple-deep);
}

/* Intermediate breakpoint — between desktop full-spacing and the 768px mobile
   collapse, the 8 menu items + logo + greeting + CTA can run out of horizontal
   room and push the BOOK A LESSON button off the right edge. Tighten the nav
   gap and font-size in this band so everything fits without forcing the mobile
   nav to kick in too early. */
/* No intermediate tight-nav band — at 1180px the BOOK A LESSON pill starts
   getting cut off / overlapping "Hi Matthew", so we collapse straight to the
   hamburger menu. The mobile-nav rules in the @media (max-width: ...) block
   below handle that takeover. */

.header-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex-shrink: 0;
}

.nav-cta {
  background: var(--purple-deep);
  color: var(--white) !important;
  padding: 11px 24px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  transition: all 0.2s;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(123, 98, 184, 0.25);
}

.nav-cta:hover {
  background: var(--charcoal);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(123, 98, 184, 0.35);
}

.mobile-toggle {
  display: none;
  font-size: 24px;
  color: var(--charcoal);
  background: none;
  border: none;
}

/* ===== HERO ===== */
.hero {
  position: relative;
  background: var(--cream);
  padding: 70px 40px 90px;
  overflow: hidden;
}

.hero-bg-1 {
  position: absolute;
  top: -100px;
  right: -150px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, var(--purple-soft) 0%, transparent 60%);
  opacity: 0.6;
  z-index: 0;
}

.hero-bg-2 {
  position: absolute;
  bottom: -100px;
  left: -150px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--pink-soft) 0%, transparent 60%);
  opacity: 0.7;
  z-index: 0;
}

.hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 60px;
  align-items: center;
}

.hero-content {
  max-width: 600px;
}

.hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--pink-soft);
  color: var(--purple-deep);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.hero-tag::before {
  content: '✨';
  font-size: 14px;
}

.hero h1 {
  font-size: 64px;
  line-height: 1.05;
  color: var(--charcoal);
  margin-bottom: 22px;
}

.hero-sub {
  font-size: 18px;
  color: var(--charcoal-soft);
  line-height: 1.6;
  margin-bottom: 32px;
  max-width: 520px;
}

.hero-ctas {
  display: flex;
  gap: 14px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.hero-trust {
  display: flex;
  gap: 36px;
  padding-top: 30px;
  border-top: 1px solid var(--purple-soft);
}

.trust-stat {
  display: flex;
  flex-direction: column;
}

.trust-num {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 500;
  color: var(--purple-deep);
  letter-spacing: -0.5px;
  line-height: 1;
}

.trust-label {
  font-size: 12px;
  color: var(--charcoal-soft);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 6px;
}

.hero-image-wrap {
  position: relative;
  aspect-ratio: 4/5;
}

.hero-image-main {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  background-color: var(--purple-soft);
  background-size: cover;
  background-position: center;
  box-shadow: 0 20px 60px rgba(123, 98, 184, 0.18);
}

.hero-image-accent-1 {
  position: absolute;
  top: -20px;
  right: -30px;
  width: 140px;
  height: 140px;
  background-size: cover;
  background-position: center;
  background-color: var(--pink-soft);
  border-radius: 50%;
  border: 6px solid var(--cream);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.hero-image-accent-2 {
  position: absolute;
  bottom: 30px;
  left: -30px;
  width: 180px;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: var(--blue-soft);
  border-radius: 12px;
  border: 6px solid var(--cream);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transform: rotate(-4deg);
}

.hero-quote-card {
  position: absolute;
  top: 20px;
  left: -40px;
  background: var(--white);
  padding: 18px 22px;
  border-radius: 14px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  max-width: 220px;
  z-index: 2;
  transform: rotate(-3deg);
}

.hero-quote-card::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 30px;
  width: 24px;
  height: 24px;
  background: var(--pink-soft);
  border-radius: 50%;
}

.hero-quote-stars {
  color: var(--gold);
  font-size: 14px;
  margin-bottom: 4px;
}

.hero-quote-card-text {
  font-family: 'Caveat', cursive;
  font-size: 19px;
  color: var(--charcoal);
  line-height: 1.3;
  font-weight: 500;
}

.hero-quote-card-author {
  font-size: 11px;
  color: var(--charcoal-soft);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ===== WAVY DIVIDER ===== */
.wavy-divider {
  background: linear-gradient(90deg,
    var(--purple) 0%,
    var(--pink) 33%,
    var(--blue) 66%,
    var(--purple) 100%);
  height: 6px;
  opacity: 0.7;
}

/* ===== LESSONS GRID ===== */
/* v1.13.8 — Converted from CSS Grid to Flexbox so partial rows center.
   With 3-per-row grid, a trailing row of 1 or 2 cards stuck to the left
   edge looking unbalanced. Flexbox + flex-wrap + justify-content: center
   keeps full rows looking identical to the grid layout but centers any
   partial row. Matches the chip-wrap pattern used in the lesson-type
   picker and other LLR components. Card width is set on .lesson-card
   via flex-basis instead of grid-template-columns on the container. */
/* v1.13.22 (Polish P3) — Tighter grid + cards for the family page service
   listing. With 8 cards now in the grid, the previous 28px gap and 32/28
   padding made the page scroll more than necessary. Reducing both for a
   more compact, denser layout — still readable but ~25-30% less vertical
   real estate. */
.lessons-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
}

.lesson-card {
  /* Three cards per row at desktop. (100% minus 2 gaps of 20px) / 3.
     0 0 = no grow, no shrink — locks the basis so cards don't stretch
     to fill a partial row (which would defeat the centering). */
  flex: 0 0 calc((100% - 40px) / 3);
  background: var(--white);
  border-radius: 18px;
  padding: 22px 22px 20px;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
  border: 2px solid transparent;
  /* Flex column so CTA/chips push to the bottom regardless of how
     long each card's description runs. Aligns bottom actions across
     a row so Reserve/Book Together/duration chips all sit on the
     same baseline. (v1.10.7) */
  display: flex;
  flex-direction: column;
}
/* Price block becomes the start of the footer pair — push it to the
   bottom so price + CTA/chips read as a grouped unit at the same
   baseline across all cards in the row. */
.lesson-card .lesson-price {
  margin-top: auto;
}

.lesson-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(123, 98, 184, 0.15);
}

.lesson-card.purple { background: var(--purple-soft); }
.lesson-card.pink { background: var(--pink-soft); }
.lesson-card.blue { background: var(--blue-soft); }
.lesson-card.featured {
  background: var(--purple-deep);
  color: var(--white);
  transform: scale(1.02);
  box-shadow: 0 16px 40px rgba(123, 98, 184, 0.25);
}

.lesson-card.featured:hover {
  transform: scale(1.02) translateY(-6px);
}

.lesson-shape {
  position: absolute;
  top: -30px;
  right: -30px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  opacity: 0.4;
}

.lesson-card.purple .lesson-shape { background: var(--purple); }
.lesson-card.pink .lesson-shape { background: var(--pink); }
.lesson-card.blue .lesson-shape { background: var(--blue); }
.lesson-card.featured .lesson-shape { background: var(--pink); opacity: 0.3; }

.featured-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--pink);
  color: var(--white);
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(244, 163, 184, 0.4);
}

.lesson-icon-wrap {
  width: 60px;
  height: 60px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.lesson-card.featured .lesson-icon-wrap {
  background: var(--pink);
}

.lesson-icon {
  width: 32px;
  height: 32px;
  color: var(--purple-deep);
}

.lesson-card.featured .lesson-icon { color: var(--white); }

.lesson-title {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 6px;
  letter-spacing: -0.3px;
  position: relative;
  z-index: 2;
}

.lesson-card.featured .lesson-title { color: var(--white); }

.lesson-duration {
  font-size: 13px;
  color: var(--charcoal-soft);
  margin-bottom: 14px;
  letter-spacing: 0.3px;
  font-weight: 500;
  position: relative;
  z-index: 2;
}

.lesson-card.featured .lesson-duration { color: rgba(255, 255, 255, 0.75); }

.lesson-desc {
  font-size: 14px;
  color: var(--charcoal-soft);
  line-height: 1.6;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

.lesson-card.featured .lesson-desc { color: rgba(255, 255, 255, 0.8); }

.lesson-price {
  font-family: 'Fraunces', serif;
  font-size: 36px;
  font-weight: 500;
  color: var(--purple-deep);
  letter-spacing: -1px;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
}

.lesson-card.featured .lesson-price { color: var(--pink-soft); }

.lesson-price-unit {
  font-size: 14px;
  color: var(--charcoal-soft);
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  margin-left: 4px;
}

.lesson-card.featured .lesson-price-unit { color: rgba(255, 255, 255, 0.65); }

.lesson-cta {
  display: inline-block;
  padding: 11px 24px;
  background: var(--white);
  color: var(--purple-deep);
  text-decoration: none;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: all 0.2s;
  position: relative;
  z-index: 2;
}

.lesson-cta:hover {
  background: var(--purple-deep);
  color: var(--white);
}

.lesson-card.featured .lesson-cta {
  background: var(--pink);
  color: var(--white);
}

.lesson-card.featured .lesson-cta:hover {
  background: var(--white);
  color: var(--purple-deep);
}

/* ===== STORY SECTION ===== */
.story-section {
  background: linear-gradient(180deg, var(--cream) 0%, var(--pink-soft) 100%);
  padding: 90px 40px;
}

.story-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: center;
}

.story-image-wrap {
  position: relative;
  aspect-ratio: 4/5;
}

.story-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--purple-soft);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(123, 98, 184, 0.15);
}

.story-image-badge {
  position: absolute;
  bottom: -30px;
  right: -20px;
  width: 160px;
  height: 160px;
  background: var(--purple-deep);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white);
  padding: 20px;
  text-align: center;
  box-shadow: 0 12px 30px rgba(123, 98, 184, 0.3);
}

.story-image-badge-num {
  font-family: 'Caveat', cursive;
  font-size: 54px;
  font-weight: 700;
  line-height: 1;
  color: var(--pink-soft);
}

.story-image-badge-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 6px;
  font-weight: 600;
  max-width: 110px;
  line-height: 1.3;
}

.story-content h2 {
  margin-bottom: 24px;
  text-align: left;
  font-size: 44px;
}

.story-content p {
  font-size: 16px;
  color: var(--charcoal-soft);
  line-height: 1.8;
  margin-bottom: 18px;
}

.story-highlight {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 20px;
  color: var(--purple-deep);
  padding: 20px 24px;
  background: var(--white);
  border-left: 4px solid var(--pink);
  border-radius: 8px;
  margin: 24px 0;
  line-height: 1.5;
}

.story-signature {
  margin-top: 30px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.story-sig-avatar {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--purple-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Caveat', cursive;
  font-size: 28px;
  color: var(--purple-deep);
  font-weight: 700;
}

.story-sig-text {
  font-family: 'Caveat', cursive;
  font-size: 28px;
  color: var(--purple-deep);
  line-height: 1;
  font-weight: 700;
}

.story-sig-role {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--charcoal-soft);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-top: 4px;
  font-weight: 500;
}

/* ===== CAMP SECTION ===== */
.camp-section {
  padding: 90px 40px;
  background: var(--purple-deep);
  color: var(--white);
  position: relative;
  overflow: hidden;
}

.camp-section::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -100px;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, var(--pink) 0%, transparent 60%);
  opacity: 0.3;
}

.camp-section::after {
  content: '';
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, var(--blue) 0%, transparent 60%);
  opacity: 0.2;
}

.camp-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 2;
}

.camp-content .section-eyebrow { color: var(--pink-soft); }
.camp-content h2 { color: var(--white); }
.camp-content .section-intro { color: rgba(255, 255, 255, 0.85); }

.camp-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 32px 0;
}

.camp-feature {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.95);
}

.camp-feature-icon {
  width: 32px;
  height: 32px;
  background: var(--pink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 16px;
}

.camp-sessions {
  background: var(--white);
  border-radius: 20px;
  padding: 36px;
  color: var(--charcoal);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

.camp-sessions-title {
  font-family: 'Caveat', cursive;
  font-size: 26px;
  color: var(--pink);
  margin-bottom: 6px;
}

.camp-sessions-price {
  font-family: 'Fraunces', serif;
  font-size: 48px;
  color: var(--purple-deep);
  font-weight: 500;
  line-height: 1;
  margin-bottom: 4px;
}

.camp-sessions-price-unit {
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--charcoal-soft);
  font-weight: 400;
  margin-left: 6px;
}

.camp-sessions-sub {
  font-size: 13px;
  color: var(--charcoal-soft);
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 2px dashed var(--purple-soft);
}

.camp-session-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--purple-soft);
  font-size: 14px;
}

.camp-session-item:last-of-type { border-bottom: none; }

.camp-session-dates { color: var(--charcoal); font-weight: 600; }

.camp-session-spots {
  background: var(--pink-soft);
  color: var(--purple-deep);
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.camp-book-btn {
  display: block;
  background: var(--purple-deep);
  color: var(--white);
  padding: 16px;
  text-align: center;
  border-radius: 30px;
  font-weight: 700;
  text-decoration: none;
  margin-top: 28px;
  transition: all 0.2s;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.camp-book-btn:hover {
  background: var(--pink);
  transform: translateY(-2px);
}

/* ===== GALLERY STRIP ===== */
.gallery-section {
  background: var(--cream);
  padding: 70px 0;
  overflow: hidden;
}

.gallery-header {
  text-align: center;
  margin-bottom: 40px;
  padding: 0 40px;
}

.gallery-header h2 {
  font-size: 40px;
  margin-top: 8px;
}

.gallery-strip {
  display: flex;
  gap: 16px;
  padding: 0 40px;
  overflow-x: auto;
  scrollbar-width: none;
}

.gallery-strip::-webkit-scrollbar { display: none; }

.gallery-item {
  flex-shrink: 0;
  width: 240px;
  aspect-ratio: 3/4;
  border-radius: 16px;
  background-color: var(--purple-soft);
  background-size: cover;
  background-position: center;
  transition: transform 0.3s;
}

.gallery-item:hover { transform: scale(1.03); }
.gallery-item:nth-child(2n) { transform: translateY(20px); }
.gallery-item:nth-child(2n):hover { transform: translateY(20px) scale(1.03); }

/* ===== TESTIMONIALS ===== */
.testimonials-section {
  padding: 90px 40px;
  background: linear-gradient(180deg, var(--cream) 0%, var(--blue-soft) 100%);
}

.testimonials-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.testimonial-card {
  background: var(--white);
  border-radius: 20px;
  padding: 36px 32px;
  position: relative;
  box-shadow: 0 8px 24px rgba(123, 98, 184, 0.08);
}

.testimonial-card:nth-child(2) {
  background: var(--purple-soft);
}

.testimonial-quote-mark {
  font-family: 'Fraunces', serif;
  font-size: 80px;
  color: var(--pink);
  line-height: 0.5;
  position: absolute;
  top: 32px;
  right: 30px;
  opacity: 0.4;
}

.testimonial-stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
  color: var(--gold);
  font-size: 16px;
}

.testimonial-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--charcoal);
  margin-bottom: 24px;
  font-family: 'Fraunces', serif;
}

.testimonial-author {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  border-top: 2px dashed var(--purple-soft);
}

.testimonial-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--pink);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: 'Caveat', cursive;
  font-size: 22px;
}

.testimonial-card:nth-child(2) .testimonial-avatar {
  background: var(--purple-deep);
}

.testimonial-name {
  font-weight: 600;
  color: var(--charcoal);
  font-size: 14px;
}

.testimonial-role {
  font-size: 16px;
  color: var(--charcoal-soft);
  margin-top: 2px;
  font-family: 'Caveat', cursive;
}

/* ===== FINAL CTA ===== */
.final-cta {
  background: linear-gradient(135deg, var(--purple-soft) 0%, var(--pink-soft) 50%, var(--blue-soft) 100%);
  padding: 100px 40px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.final-cta-inner {
  max-width: 720px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.final-cta h2 {
  font-size: 56px;
  margin-bottom: 24px;
  letter-spacing: -1.5px;
  line-height: 1.05;
}

.final-cta p {
  font-size: 18px;
  color: var(--charcoal-soft);
  margin-bottom: 40px;
  line-height: 1.6;
}

/* ===== FOOTER ===== */
.site-footer {
  background: var(--charcoal);
  color: var(--cream);
  padding: 60px 40px 30px;
}

.footer-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 50px;
  margin-bottom: 40px;
}

.footer-brand .site-logo-fallback {
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(165, 148, 209, 0.3) 15%,
    rgba(244, 163, 184, 0.3) 50%,
    rgba(159, 197, 232, 0.3) 85%,
    transparent 100%);
  margin-bottom: 16px;
  display: inline-block;
}

.footer-brand .site-logo-fallback-text { color: var(--cream); }

.footer-tagline {
  font-size: 14px;
  color: rgba(255, 251, 245, 0.7);
  line-height: 1.6;
  max-width: 280px;
  margin-top: 12px;
}

.footer-col h4 {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--pink);
  margin-bottom: 14px;
  font-weight: 700;
}

.footer-col ul {
  list-style: none;
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a {
  color: rgba(255, 251, 245, 0.7);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.footer-col a:hover { color: var(--pink-soft); }

.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 251, 245, 0.1);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: rgba(255, 251, 245, 0.5);
  flex-wrap: wrap;
  gap: 16px;
}

/* ===== PAGE CONTENT BASE ===== */
.page-content {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 60px 40px;
}

.page-hero {
  background: linear-gradient(135deg, var(--purple-soft) 0%, var(--pink-soft) 50%, var(--blue-soft) 100%);
  padding: 80px 40px 70px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.page-hero-inner {
  max-width: 800px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.page-hero h1 {
  font-size: 56px;
  margin-bottom: 16px;
  letter-spacing: -1.5px;
}

.page-hero-intro {
  font-size: 18px;
  color: var(--charcoal-soft);
  line-height: 1.6;
}

/* ===== FORM STYLES ===== */
.llr-form {
  max-width: 700px;
  margin: 0 auto;
  background: var(--white);
  padding: 40px;
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(123, 98, 184, 0.08);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 6px;
  letter-spacing: 0.3px;
}

.form-group label .required {
  color: var(--pink);
  margin-left: 2px;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="date"],
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--purple-soft);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--charcoal);
  background: var(--cream);
  transition: all 0.2s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--purple-deep);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(123, 98, 184, 0.1);
}

.form-group textarea {
  min-height: 100px;
  resize: vertical;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 968px) {
  .hero-inner { grid-template-columns: 1fr; }
  .story-grid, .camp-inner { grid-template-columns: 1fr; gap: 50px; }
  .lessons-grid { /* v1.13.8 — now flex; sized by .lesson-card flex-basis below */ }
  .lesson-card { flex: 0 0 calc((100% - 28px) / 2); }
  .testimonials-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

/* Collapse the desktop nav into a hamburger at 1180px. Above this width,
   the full nav + BOOK A LESSON pill + "Hi {name}" dropdown all fit on one
   row. Below it, the BOOK A LESSON button starts cutting off / overlapping
   the user dropdown. The deeper mobile sizing tweaks (smaller logo, tighter
   header padding, shrunken nav-cta) live in the 768px block below — at
   769-1180px we keep desktop sizing but lose the nav menu in favor of the
   hamburger. */
@media (max-width: 1180px) {
  .main-nav ul { display: none; }
  .mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 3;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 20px;
    flex-shrink: 0;
  }
  .header-actions {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    order: 2;
    flex-shrink: 0;
  }
  .main-nav.mobile-open ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    padding: 20px;
    gap: 16px;
    border-bottom: 1px solid var(--purple-soft);
    box-shadow: 0 4px 16px rgba(123, 98, 184, 0.12);
    z-index: 99;
  }
}

@media (max-width: 768px) {
  h1 { font-size: 42px; }
  h2 { font-size: 34px; }

  .container, .hero, .section, .story-section, .camp-section, .testimonials-section, .final-cta {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero { padding: 40px 20px 60px; }
  .section { padding: 60px 0; }
  .page-content { padding: 40px 20px; }

  .lessons-grid { gap: 20px; /* v1.13.8 — flex; full-width cards via flex-basis below */ }
  .lesson-card { flex: 0 0 100%; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }

  .hero-image-accent-1 { width: 100px; height: 100px; right: -10px; top: -10px; }
  .hero-image-accent-2 { width: 120px; height: 120px; left: -10px; bottom: 10px; }
  .hero-quote-card { left: 0; top: 10px; max-width: 180px; }

  /* TOP BAR MOBILE FIX */
  .top-bar {
    padding: 8px 16px;
    font-size: 12px;
    line-height: 1.4;
  }
  .top-bar-ornament { font-size: 14px; }

  /* HEADER MOBILE FIX */
  .site-header {
    padding: 10px 12px;
    gap: 6px;
    flex-wrap: nowrap;
    width: 100%;
    max-width: 100vw;
  }
  .site-logo { flex-shrink: 1; min-width: 0; overflow: hidden; }
  .site-logo-fallback { padding: 4px 12px; }
  .site-logo-fallback-text { font-size: 20px; white-space: nowrap; }
  .site-logo img { max-height: 40px; }

  .main-nav ul { display: none; }
  .mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    order: 3;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 20px;
    flex-shrink: 0;
  }

  .header-actions {
    flex-direction: row;
    align-items: center;
    gap: 6px;
    order: 2;
    flex-shrink: 0;
  }
  .nav-cta {
    padding: 8px 14px;
    font-size: 11px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(123, 98, 184, 0.25);
  }

  .main-nav.mobile-open ul {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--cream);
    padding: 20px;
    gap: 16px;
    border-bottom: 1px solid var(--purple-soft);
    box-shadow: 0 4px 16px rgba(123, 98, 184, 0.12);
    z-index: 99;
  }

  .final-cta h2 { font-size: 34px; }
  .page-hero h1 { font-size: 38px; }
}

@media (max-width: 480px) {
  .site-logo-fallback { padding: 3px 10px; }
  .site-logo-fallback-text { font-size: 18px; }
  .site-logo img { max-height: 36px; }

  .nav-cta {
    padding: 7px 12px;
    font-size: 10px;
    letter-spacing: 0.2px;
  }

  .top-bar { font-size: 11px; padding: 8px 12px; line-height: 1.3; }
  .top-bar-ornament { display: none; }

  .mobile-toggle { width: 32px; height: 32px; font-size: 18px; }

  .site-header {
    padding: 8px 10px;
    gap: 4px;
  }
}

/* ===== WORDPRESS CORE CLASSES ===== */
.alignleft { float: left; margin-right: 1em; }
.alignright { float: right; margin-left: 1em; }
.aligncenter { display: block; margin: 0 auto; }
.screen-reader-text {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ===== BOOK PATHS (3-path architecture) ===== */
.book-paths-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.book-path-card {
  background: var(--white);
  border-radius: 20px;
  padding: 36px 30px 30px;
  border: 2px solid var(--purple-soft);
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all 0.3s;
}

.book-path-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(123, 98, 184, 0.12);
}

.book-path-card.featured {
  background: linear-gradient(180deg, var(--purple-soft) 0%, var(--cream) 100%);
  border-color: var(--purple-deep);
  box-shadow: 0 16px 40px rgba(123, 98, 184, 0.18);
  transform: scale(1.02);
}

.book-path-card.featured:hover {
  transform: scale(1.02) translateY(-4px);
}

.book-path-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.book-path-icon {
  width: 64px;
  height: 64px;
  background: var(--white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(123, 98, 184, 0.1);
  color: var(--purple-deep);
}

.book-path-card.featured .book-path-icon {
  background: var(--purple-deep);
  color: var(--white);
}

.book-path-icon svg {
  width: 32px;
  height: 32px;
}

.book-path-title {
  font-family: 'Fraunces', serif;
  font-size: 26px;
  font-weight: 600;
  color: var(--charcoal);
  margin: 0 0 12px;
  letter-spacing: -0.3px;
}

.book-path-desc {
  font-size: 14px;
  color: var(--charcoal-soft);
  line-height: 1.6;
  margin-bottom: 20px;
}

.book-path-list {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}

.book-path-list li {
  font-size: 13px;
  color: var(--charcoal);
  padding: 6px 0 6px 22px;
  position: relative;
  line-height: 1.5;
}

.book-path-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: var(--pink);
  font-size: 14px;
}

.book-path-cta {
  display: inline-block;
  padding: 14px 24px;
  background: var(--white);
  color: var(--purple-deep);
  border: 2px solid var(--purple-deep);
  text-decoration: none;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  text-align: center;
  transition: all 0.2s;
  margin-bottom: 12px;
}

.book-path-cta:hover {
  background: var(--purple-deep);
  color: var(--white);
}

.book-path-cta.primary {
  background: var(--purple-deep);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(123, 98, 184, 0.25);
}

.book-path-cta.primary:hover {
  background: var(--charcoal);
  color: var(--white);
  transform: translateY(-1px);
}

.book-path-footer-note {
  font-size: 12px;
  color: var(--charcoal-soft);
  text-align: center;
  font-style: italic;
  margin: 0;
  line-height: 1.4;
}

/* Responsive */
@media (max-width: 900px) {
  .book-paths-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .book-path-card.featured {
    transform: scale(1);
  }
  .book-path-card.featured:hover {
    transform: translateY(-4px);
  }
}

/* ===== ADMIN CLEANUP ===== */
body.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* ============================================ */
/* WAIVER FLOW STYLES */
/* ============================================ */

.waivers-hero {
  background: linear-gradient(135deg, var(--purple-soft) 0%, var(--pink-soft) 50%, var(--blue-soft) 100%);
}

.waivers-section { background: var(--cream); }

.container-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; }

/* Progress bar */
.waiver-progress {
  display: flex;
  justify-content: space-between;
  margin: 0 0 50px;
  position: relative;
  padding: 0 8px;
}
.waiver-progress::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 8%;
  right: 8%;
  height: 3px;
  background: var(--purple-soft);
  z-index: 0;
}
.waiver-progress-step {
  position: relative;
  z-index: 1;
  text-align: center;
  flex: 1;
}
.waiver-progress-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: white;
  border: 3px solid var(--purple-soft);
  color: var(--charcoal-soft);
  font-weight: 700;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  transition: all 0.3s;
}
.waiver-progress-step.active .waiver-progress-num {
  background: var(--purple-deep);
  border-color: var(--purple-deep);
  color: white;
  transform: scale(1.1);
}
.waiver-progress-step.complete .waiver-progress-num {
  background: var(--pink);
  border-color: var(--pink);
  color: white;
}
.waiver-progress-label {
  font-size: 11px;
  color: var(--charcoal-soft);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.waiver-progress-step.active .waiver-progress-label {
  color: var(--purple-deep);
  font-weight: 700;
}

/* Form steps */
.waiver-step {
  display: none;
  background: white;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(123, 98, 184, 0.08);
}
.waiver-step.active { display: block; }
.waiver-step h2 {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  margin-bottom: 8px;
  color: var(--charcoal);
}
.waiver-step .step-intro {
  color: var(--charcoal-soft);
  font-size: 15px;
  margin-bottom: 32px;
}

.form-section {
  border-top: 1px solid var(--purple-soft);
  padding-top: 24px;
  margin-top: 24px;
}
.form-section:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.form-section h3 {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  color: var(--purple-deep);
  margin-bottom: 16px;
}
.form-section-note {
  font-size: 12px;
  color: var(--charcoal-soft);
  font-weight: 400;
  font-family: 'DM Sans', sans-serif;
  text-transform: none;
}

.form-row { margin-bottom: 16px; }
.form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row-3col { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 16px; }

.waiver-step label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 4px;
}
.waiver-step .req { color: #c0392b; }

.waiver-step input[type="text"],
.waiver-step input[type="email"],
.waiver-step input[type="tel"] {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--purple-soft);
  border-radius: 10px;
  font-size: 15px;
  font-family: 'DM Sans', sans-serif;
  background: white;
  color: var(--charcoal);
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-top: 4px;
}
.waiver-step input:focus {
  outline: none;
  border-color: var(--purple-deep);
  box-shadow: 0 0 0 3px rgba(123, 98, 184, 0.15);
}
.waiver-step input.field-error {
  border-color: #c0392b;
  background: #fef5f4;
}

/* Waiver doc preview */
.waiver-doc-preview {
  background: var(--cream-warm);
  padding: 24px;
  border-radius: 12px;
  margin: 24px 0;
}
.waiver-doc-preview h3 {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  color: var(--purple-deep);
  margin-bottom: 12px;
}
.key-terms { padding-left: 22px; margin: 0; }
.key-terms li { margin-bottom: 8px; font-size: 14px; line-height: 1.5; }

.full-text-toggle {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--purple-soft);
}
.full-text-toggle summary {
  cursor: pointer;
  color: var(--purple-deep);
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.full-text-toggle summary:hover { color: var(--charcoal); }
.full-text {
  margin-top: 16px;
  padding: 16px;
  background: white;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--charcoal-soft);
}
.full-text h4 {
  font-family: 'Fraunces', serif;
  font-size: 15px;
  color: var(--charcoal);
  margin-bottom: 8px;
}
.full-text p { margin-bottom: 10px; }

/* Signature section */
.signature-section {
  margin-top: 24px;
  padding: 24px;
  background: linear-gradient(135deg, rgba(244, 163, 184, 0.08), rgba(123, 98, 184, 0.08));
  border: 2px solid var(--purple-soft);
  border-radius: 12px;
}
.agree-check {
  display: flex !important;
  gap: 12px;
  align-items: flex-start;
  cursor: pointer;
  margin-bottom: 20px;
  font-weight: 500 !important;
  font-size: 14px !important;
}
.agree-check input { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.agree-check span { line-height: 1.5; color: var(--charcoal); }
.agree-check.field-error span { color: #c0392b; }

.signature-input,
.initial-input {
  font-family: 'Caveat', cursive !important;
  font-size: 24px !important;
  color: var(--purple-deep) !important;
  background: white !important;
}
.initial-input { text-align: center; max-width: 120px; }

.signature-help {
  display: block;
  font-size: 11px;
  color: var(--charcoal-soft);
  margin-top: 6px;
  font-weight: 400;
  font-style: italic;
}

.initial-prompt {
  font-size: 14px;
  color: var(--charcoal);
  margin-top: 16px;
  margin-bottom: 12px;
  font-weight: 600;
}

.photo-release-section {
  background: linear-gradient(135deg, rgba(159, 197, 232, 0.1), rgba(244, 163, 184, 0.1));
  border-color: var(--blue);
}

/* Action buttons */
.waiver-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--purple-soft);
  gap: 12px;
  flex-wrap: wrap;
}
.btn-link {
  background: transparent;
  color: var(--charcoal-soft);
  border: 0;
  cursor: pointer;
  font-size: 13px;
  text-decoration: underline;
  padding: 8px 12px;
}
.btn-link:hover { color: var(--purple-deep); }

/* Loading & error */
.waiver-loading {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 16px;
}
.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid var(--purple-soft);
  border-top-color: var(--purple-deep);
  border-radius: 50%;
  margin: 0 auto 20px;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.waiver-error {
  background: #fef5f4;
  border: 2px solid #e74c3c;
  color: #c0392b;
  padding: 16px 20px;
  border-radius: 10px;
  margin: 20px 0;
  font-size: 14px;
  font-weight: 500;
}

/* Confirmation page */
.confirmation-content { text-align: center; padding: 20px; }
.confirmation-icon {
  font-size: 60px;
  margin-bottom: 16px;
}
.confirmation-message {
  font-size: 18px;
  color: var(--charcoal-soft);
  margin-bottom: 32px;
}
.confirmation-summary {
  background: var(--cream-warm);
  padding: 24px;
  border-radius: 12px;
  margin: 24px 0;
  text-align: left;
  display: inline-block;
  min-width: 320px;
}
.confirmation-summary p { margin: 8px 0; font-size: 15px; }
.next-steps {
  text-align: left;
  background: white;
  padding: 24px;
  border-radius: 12px;
  margin: 24px 0;
  border: 2px solid var(--purple-soft);
}
.next-steps h3 {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  color: var(--purple-deep);
  margin-bottom: 12px;
}
.next-steps ol { padding-left: 22px; }
.next-steps li { margin-bottom: 10px; font-size: 14px; line-height: 1.5; }

.confirmation-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin: 24px 0;
  flex-wrap: wrap;
}
.confirmation-help {
  font-size: 13px;
  color: var(--charcoal-soft);
  margin-top: 24px;
}

/* Mobile */
@media (max-width: 768px) {
  .waiver-step { padding: 24px 20px; }
  .waiver-step h2 { font-size: 24px; }
  .form-row-2col, .form-row-3col { grid-template-columns: 1fr; }
  .waiver-progress-label { display: none; }
  .waiver-progress::before { left: 12%; right: 12%; }
  .waiver-progress-num { width: 32px; height: 32px; font-size: 13px; }
  .waiver-actions { flex-direction: column-reverse; }
  .waiver-actions .btn { width: 100%; }
}

/* ============================================ */
/* FAMILY PROFILE PAGE */
/* ============================================ */

.family-hero {
  background: linear-gradient(135deg, var(--blue-soft), var(--purple-soft), var(--pink-soft));
}

.family-section { background: var(--cream); padding: 60px 0; }

/* Family page uses the standard wide container (matches the rest of the
   site at 1280px). Cards arrange in a responsive grid that opens up on
   desktop instead of being stuck in a 760px column. */
.family-container {
  max-width: 1080px;
}

.family-welcome-card {
  text-align: center;
  margin-bottom: 32px;
  padding: 30px 24px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(123, 98, 184, 0.08);
}
.welcome-eyebrow {
  font-family: 'Caveat', cursive;
  font-size: 24px;
  color: var(--pink);
  margin-bottom: 4px;
}
.welcome-greeting h2 {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  color: var(--charcoal);
}

/* Waivers + Lessons sit side-by-side at desktop, stack on tablet/mobile */
.family-cards-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 900px) {
  .family-cards-row {
    grid-template-columns: 1fr 1fr;
    align-items: start; /* cards keep their own height instead of stretching */
  }
  .family-cards-row > .family-card {
    margin-bottom: 0; /* gap handles spacing inside the grid */
  }
}

.family-card {
  background: white;
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: 0 4px 24px rgba(123, 98, 184, 0.08);
}
.family-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--purple-soft);
}
.family-card-header h3 {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  color: var(--charcoal);
}

.status-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.status-badge.status-good { background: #d4f4d4; color: #2c7a2c; }
.status-badge.status-warn { background: #fff3cd; color: #b8860b; }

/* Waiver status grid */
.waiver-status-grid {
  display: grid;
  gap: 12px;
}
.waiver-status-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  border-radius: 10px;
  background: var(--cream-warm);
}
.waiver-status-item.signed { background: #f0f9f0; }
.waiver-status-item.unsigned { background: #fef5f4; }
.waiver-status-item.optional { background: var(--cream-warm); }

.status-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 700;
  flex-shrink: 0;
}
.waiver-status-item.signed .status-icon { background: #2c7a2c; color: white; }
.waiver-status-item.unsigned .status-icon { background: #c0392b; color: white; }
.waiver-status-item.optional .status-icon { background: var(--charcoal-soft); color: white; }

.status-info { flex: 1; }
.status-title { font-weight: 600; color: var(--charcoal); font-size: 16px; }
.status-detail { font-size: 13px; color: var(--charcoal-soft); margin-top: 3px; }

.action-needed {
  margin-top: 20px;
  padding: 20px;
  background: #fff3cd;
  border-radius: 10px;
  text-align: center;
}
.action-needed p { margin-bottom: 12px; }

/* Lesson stats: 2 cards (Lessons taken + Hours on the farm). Hours in the
   saddle was removed — booking durations track time on the farm
   accurately, but in-saddle time would require manual tracking we can't
   verify. Honest > impressive. */
.lessons-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}
.stat-card {
  background: linear-gradient(135deg, var(--purple-soft), var(--pink-soft));
  padding: 24px 16px;
  border-radius: 12px;
  text-align: center;
}
.stat-value {
  font-family: 'Fraunces', serif;
  font-size: 36px;
  color: var(--purple-deep);
  font-weight: 600;
  line-height: 1;
}
.stat-label {
  font-size: 12px;
  color: var(--charcoal-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
  font-weight: 600;
}

.lessons-coming-soon {
  text-align: center;
  font-size: 14px;
  color: var(--charcoal-soft);
  padding: 16px;
  background: var(--cream-warm);
  border-radius: 10px;
  margin: 20px 0;
}

.quick-actions {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.quick-actions .btn { flex: 1; min-width: 140px; text-align: center; }

/* Info grid: 1col mobile, 2col tablet, 3col desktop — uses the wider
   container by spreading info items horizontally instead of vertically. */
.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (min-width: 900px) {
  .info-grid { grid-template-columns: repeat(3, 1fr); }
}
.info-item {
  padding: 12px 16px;
  background: var(--cream-warm);
  border-radius: 8px;
}
.info-label {
  font-size: 12px;
  color: var(--charcoal-soft);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 5px;
}
.info-value {
  font-size: 16px;
  color: var(--charcoal);
  font-weight: 500;
}
.info-help {
  font-size: 12px;
  color: var(--charcoal-soft);
  font-style: italic;
  text-align: center;
  margin-top: 16px;
}

.support-card {
  text-align: center;
  background: linear-gradient(135deg, rgba(244, 163, 184, 0.08), rgba(123, 98, 184, 0.08));
}

/* Mobile */
@media (max-width: 768px) {
  .lessons-stats-grid { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .family-card { padding: 20px; }
  .family-card-header { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* Multi-rider blocks */
.riders-container { margin-bottom: 12px; }
.rider-block {
  background: rgba(232, 223, 250, 0.3);
  border: 2px solid var(--purple-soft);
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 12px;
  position: relative;
}
.rider-block-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.rider-block-label {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--purple-deep);
  font-weight: 700;
}
.rider-remove {
  background: transparent;
  border: 1px solid var(--charcoal-soft);
  color: var(--charcoal-soft);
  padding: 4px 12px;
  border-radius: 16px;
  font-size: 11px;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: none;
}
.rider-remove:hover {
  background: #fef5f4;
  border-color: #c0392b;
  color: #c0392b;
}
.btn-add-rider {
  background: white;
  border: 2px dashed var(--purple-deep);
  color: var(--purple-deep);
  padding: 12px 20px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.5px;
  cursor: pointer;
  width: 100%;
  text-transform: uppercase;
  transition: all 0.2s;
}
.btn-add-rider:hover:not(:disabled) {
  background: var(--purple-soft);
  border-style: solid;
}
.btn-add-rider:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.add-rider-hint {
  font-size: 12px;
  color: var(--charcoal-soft);
  text-align: center;
  margin-top: 6px;
  font-style: italic;
}

/* Select dropdowns in waiver form match input styling */
.waiver-step select {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--purple-soft);
  border-radius: 10px;
  font-size: 15px;
  font-family: 'DM Sans', sans-serif;
  background: white;
  color: var(--charcoal);
  transition: border-color 0.2s, box-shadow 0.2s;
  margin-top: 4px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237B62B8' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 44px;
  cursor: pointer;
}
.waiver-step select:focus {
  outline: none;
  border-color: var(--purple-deep);
  box-shadow: 0 0 0 3px rgba(123, 98, 184, 0.15);
}
.waiver-step select.field-error {
  border-color: #c0392b;
  background-color: #fef5f4;
}

/* Scrollable full-text panel for waiver legal text */
.full-text-scroll {
  max-height: 400px;
  overflow-y: auto;
  padding: 18px 22px;
  border: 1px solid var(--purple-soft);
  background: white;
  font-size: 13px;
  line-height: 1.65;
}
.full-text-scroll p {
  margin-bottom: 12px;
}
.full-text-scroll h4 {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  color: var(--charcoal);
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--purple-soft);
}

/* ==========================================
   AUTH PAGES (login, set-password, forgot-password)
   ========================================== */

.auth-section {
  padding: 60px 0 80px;
  background: var(--cream);
}

.auth-container {
  max-width: 520px;
}

.auth-card {
  background: #fff;
  border-radius: 18px;
  padding: 44px 40px;
  box-shadow: 0 6px 24px rgba(58, 31, 76, 0.06);
  border: 1px solid var(--purple-soft);
}

.auth-card-header {
  text-align: center;
  margin-bottom: 28px;
}

.auth-card-header h1 {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--charcoal);
  margin: 0 0 8px;
}

.auth-card-sub {
  color: var(--charcoal-soft);
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.auth-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  letter-spacing: 0.2px;
}

.auth-field input[type="email"],
.auth-field input[type="password"],
.auth-field input[type="text"] {
  padding: 12px 14px;
  border: 1px solid var(--purple-soft);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 15px;
  color: var(--charcoal);
  background: #fff;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-field input:focus {
  outline: none;
  border-color: var(--brand-purple, #7B62B8);
  box-shadow: 0 0 0 3px rgba(123, 98, 184, 0.12);
}

.auth-field-hint {
  font-size: 12px;
  color: var(--charcoal-soft);
}

.auth-field-readonly {
  background: var(--cream);
  padding: 10px 14px;
  border-radius: 10px;
  border: 1px solid var(--purple-soft);
}

.auth-field-readonly label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--charcoal-soft);
  margin-bottom: 2px;
}

.auth-readonly-value {
  font-size: 15px;
  color: var(--charcoal);
  font-weight: 500;
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  margin-top: -4px;
}

.auth-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  color: var(--charcoal-soft);
}

.auth-checkbox input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #7B62B8;
}

.auth-link-small {
  font-size: 13px;
  color: #7B62B8;
  text-decoration: none;
}

.auth-link-small:hover {
  text-decoration: underline;
}

.btn-block {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 8px;
}

.auth-card-footer {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--purple-soft);
  text-align: center;
}

.auth-card-footer p {
  font-size: 13px;
  color: var(--charcoal-soft);
  margin: 0 0 8px;
  line-height: 1.5;
}

.auth-card-footer p:last-child { margin-bottom: 0; }

.auth-card-footer a {
  color: #7B62B8;
  text-decoration: none;
  font-weight: 600;
}

.auth-card-footer a:hover { text-decoration: underline; }

.auth-flash {
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 22px;
}

.auth-flash-error {
  background: #FDE7EC;
  color: #8A1F3A;
  border: 1px solid #F5B6C5;
}

.auth-flash-success {
  background: #E5F5EA;
  color: #1F5A33;
  border: 1px solid #B6DDC4;
}

@media (max-width: 600px) {
  .auth-section { padding: 30px 0 50px; }
  .auth-card { padding: 32px 24px; border-radius: 14px; }
  .auth-card-header h1 { font-size: 26px; }
  .auth-row { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ==========================================
   AUTH-AWARE NAV (v1.6.4)
   Desktop: "Hi {firstname} ▾" dropdown for members, "Sign in" link for guests.
   Mobile: flat list at bottom of mobile menu (.mobile-only-nav items).
   ========================================== */

/* Hide the mobile-only auth items on desktop. They surface in mobile menu only. */
.mobile-only-nav { display: none; }

/* Desktop auth section sits inside .header-actions before the Book a Lesson CTA */
.desktop-nav-auth {
  display: flex;
  align-items: center;
}

.nav-signin {
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  padding: 8px 14px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.nav-signin:hover {
  background: var(--purple-soft);
  color: var(--charcoal);
}

/* User dropdown trigger ("Hi Matthew ▾") */
.nav-user-dropdown {
  position: relative;
}
.nav-user-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid transparent;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.nav-user-trigger:hover {
  background: var(--purple-soft);
}
.nav-user-trigger:focus-visible {
  outline: none;
  border-color: #7B62B8;
  box-shadow: 0 0 0 3px rgba(123, 98, 184, 0.18);
}
.nav-user-greeting {
  white-space: nowrap;
}
.nav-user-chevron {
  display: inline-flex;
  align-items: center;
  transition: transform 0.18s ease;
  color: var(--charcoal-soft);
}
.nav-user-dropdown[data-state="open"] .nav-user-chevron {
  transform: rotate(180deg);
}

/* Dropdown menu panel */
.nav-user-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 260px;
  background: white;
  border-radius: 12px;
  border: 1px solid var(--purple-soft);
  box-shadow: 0 10px 28px rgba(58, 31, 76, 0.14);
  padding: 6px;
  display: none;
  z-index: 200;
}
.nav-user-dropdown[data-state="open"] .nav-user-menu {
  display: block;
  /* gentle entrance */
  animation: llr-dropdown-in 0.16s ease-out;
}
@keyframes llr-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.nav-user-menu-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px 12px;
  border-bottom: 1px solid var(--purple-soft);
  margin-bottom: 4px;
}
.nav-user-menu-eyebrow {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--charcoal-soft);
  font-weight: 600;
}
.nav-user-menu-email {
  font-size: 13px;
  color: var(--charcoal);
  font-weight: 500;
  word-break: break-all;
}

.nav-user-menu-item {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--charcoal);
  text-decoration: none;
  transition: background 0.12s ease;
}
.nav-user-menu-item:hover {
  background: var(--cream);
  color: var(--charcoal);
}
.nav-user-menu-divider {
  height: 1px;
  background: var(--purple-soft);
  margin: 6px 8px;
}
.nav-user-menu-signout {
  color: #A32D2D;
}
.nav-user-menu-signout:hover {
  background: #FCEBEB;
  color: #791F1F;
}

/* ==========================================
   MOBILE: flat auth list at the bottom of the menu
   Surfaces the same items the desktop dropdown shows, but as a flat list
   inside the existing hamburger panel — no nested dropdown on touch.
   ========================================== */
@media (max-width: 768px) {
  /* Hide the desktop dropdown / sign-in entirely on mobile */
  .desktop-nav-auth { display: none; }

  /* When mobile menu opens, our injected .mobile-only-nav <li>s render */
  .main-nav.mobile-open ul .mobile-only-nav {
    display: block;
  }

  /* Visual divider before the auth section */
  .main-nav.mobile-open ul .mobile-nav-divider {
    height: 1px;
    background: var(--purple-soft);
    padding: 0;
    margin: 8px 0 4px;
    list-style: none;
  }

  /* Signed-in info row */
  .main-nav.mobile-open ul .mobile-nav-user-info {
    padding: 10px 0 4px;
  }
  .main-nav.mobile-open ul .mobile-nav-user-info .mobile-nav-user-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--charcoal-soft);
    font-weight: 600;
    margin-bottom: 2px;
  }
  .main-nav.mobile-open ul .mobile-nav-user-info strong {
    font-size: 14px;
    color: var(--charcoal);
    font-weight: 500;
    word-break: break-all;
  }

  /* Member action items (My family page, Manage reservation) */
  .main-nav.mobile-open ul .mobile-nav-member a,
  .main-nav.mobile-open ul .mobile-nav-signin a {
    font-size: 16px;
    color: var(--charcoal);
    font-weight: 500;
  }

  /* Sign out — visually distinct (red) so it isn't accidentally tapped */
  .main-nav.mobile-open ul .mobile-nav-signout {
    margin-top: 4px;
  }
  .main-nav.mobile-open ul .mobile-nav-signout a {
    font-size: 14px;
    color: #A32D2D;
    font-weight: 500;
  }
}

/* ==========================================
   BOOK A LESSON — auth-aware (v1.6.5)
   ========================================== */

/* Guest view: 2-card grid centered in container (vs the default 3-col grid).
   Inherits .book-path-card styling — only the column count and max-width differ. */
.book-paths-grid-2 {
  grid-template-columns: 1fr 1fr;
  max-width: 880px;
  margin: 0 auto;
  gap: 28px;
}

/* Numbered steps inside the "Become a member" card.
   Each step gets a soft pink bubble with the number, then descriptive text. */
.book-path-steps {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.book-path-steps li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1.4;
}
.book-path-steps .step-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--pink-soft);
  color: #993556;
  font-size: 12px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ==========================================
   MEMBER VIEW: streamlined booking
   ========================================== */

/* Primary "Open booking" card — single, centered, hero of the page */
.member-book-card {
  background: white;
  border: 2px solid var(--purple-deep);
  border-radius: 20px;
  padding: 40px 32px 32px;
  text-align: center;
  box-shadow: 0 16px 40px rgba(123, 98, 184, 0.14);
  margin-bottom: 24px;
}

.member-book-icon {
  width: 64px;
  height: 64px;
  background: var(--purple-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  color: var(--purple-deep);
}

.member-book-title {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--charcoal);
  margin: 0 0 8px;
}

.member-book-desc {
  font-size: 15px;
  color: var(--charcoal-soft);
  line-height: 1.5;
  margin: 0 auto 22px;
  max-width: 460px;
}

.member-book-cta {
  display: inline-block;
  background: var(--purple-deep);
  color: white !important;
  padding: 14px 36px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(123, 98, 184, 0.3);
  transition: all 0.2s;
}

.member-book-cta:hover {
  background: var(--charcoal);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(123, 98, 184, 0.4);
}

.member-book-footer-note {
  font-size: 12px;
  color: var(--charcoal-soft);
  margin: 14px 0 0;
  font-style: italic;
}

/* Quick action mini-cards: "My family page" + "Manage a reservation" */
.member-quick-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 24px;
}

.member-quick-card {
  background: white;
  border: 1.5px solid var(--purple-soft);
  border-radius: 14px;
  padding: 20px 22px;
  text-align: center;
  text-decoration: none;
  color: var(--charcoal);
  transition: all 0.2s;
  display: block;
}

.member-quick-card:hover {
  border-color: var(--purple-deep);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(123, 98, 184, 0.12);
  color: var(--charcoal);
}

.member-quick-card-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--purple-deep);
  margin-bottom: 4px;
}

.member-quick-card-desc {
  font-size: 13px;
  color: var(--charcoal-soft);
  line-height: 1.4;
}

/* Pulse animation when arriving with #manage hash */
.member-quick-card-pulse {
  animation: llr-quick-pulse 1.8s ease-out;
  border-color: var(--purple-deep) !important;
}

@keyframes llr-quick-pulse {
  0%   { box-shadow: 0 0 0 0   rgba(123, 98, 184, 0.55); }
  50%  { box-shadow: 0 0 0 14px rgba(123, 98, 184, 0); }
  100% { box-shadow: 0 0 0 0   rgba(123, 98, 184, 0); }
}

/* Help text under the action cards */
.member-book-help {
  text-align: center;
  font-size: 13px;
  color: var(--charcoal-soft);
  line-height: 1.6;
  margin: 0;
  padding: 16px 20px;
  background: var(--cream);
  border-radius: 12px;
}

.member-book-help a {
  color: var(--purple-deep);
  font-weight: 600;
  text-decoration: none;
}

.member-book-help a:hover {
  text-decoration: underline;
}

/* Mobile: collapse to single column for both guest 2-card grid and member quick actions */
@media (max-width: 768px) {
  .book-paths-grid-2 {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .member-quick-actions {
    grid-template-columns: 1fr;
  }
  .member-book-card {
    padding: 32px 22px 26px;
  }
  .member-book-title {
    font-size: 24px;
  }
}

/* ==========================================
   FAMILY INFO SELF-SERVICE EDIT (v1.6.8)
   Edit / Cancel / Save toggle on the "Family info on file" card.
   Display mode shows read-only fields. Edit mode shows form inputs.
   ========================================== */

/* Edit button in the card header */
.btn-edit-info {
  background: white;
  border: 1.5px solid var(--purple-soft);
  color: var(--purple-deep);
  padding: 7px 16px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: 'DM Sans', sans-serif;
}
.btn-edit-info:hover {
  border-color: var(--purple-deep);
  background: var(--purple-soft);
}
.family-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* Pending email change banner */
.email-pending-banner {
  background: var(--cream-warm);
  border: 1px solid var(--pink-soft);
  border-left: 4px solid #D4537E;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 18px;
  font-size: 13px;
  color: var(--charcoal);
  line-height: 1.5;
}
.email-pending-banner strong {
  color: var(--charcoal);
  font-weight: 600;
}

/* Wide info-item spans full row in the grid (used for address) */
.info-item-wide {
  grid-column: 1 / -1;
}
.info-value-empty {
  color: var(--charcoal-soft);
}

/* Edit form layout */
.family-edit-form {
  margin-top: 8px;
}
.family-edit-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px 14px;
}
.family-edit-field {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.family-edit-field-wide {
  grid-column: 1 / -1;
}
.family-edit-field-narrow {
  grid-column: span 1;
}

.family-edit-field label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--charcoal-soft);
  font-weight: 600;
}
.family-edit-field .required {
  color: #D4537E;
  font-weight: 400;
}
.family-edit-field input[type="text"],
.family-edit-field input[type="email"],
.family-edit-field input[type="tel"] {
  padding: 10px 14px;
  border: 1.5px solid var(--purple-soft);
  border-radius: 10px;
  font-size: 15px;
  font-family: 'DM Sans', sans-serif;
  color: var(--charcoal);
  background: white;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.family-edit-field input:focus {
  outline: none;
  border-color: var(--purple-deep);
  box-shadow: 0 0 0 3px rgba(123, 98, 184, 0.15);
}

.family-edit-section-label {
  grid-column: 1 / -1;
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--purple-deep);
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--purple-soft);
}
.family-edit-section-note {
  font-family: 'DM Sans', sans-serif;
  font-size: 12px;
  color: var(--charcoal-soft);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-left: 6px;
}

.family-edit-hint {
  font-size: 12px;
  color: var(--charcoal-soft);
  font-style: italic;
  line-height: 1.4;
  margin: 4px 0 0;
}

.family-edit-readonly-section {
  margin-top: 24px;
  padding: 16px 18px;
  background: var(--cream);
  border-radius: 10px;
  border: 1px solid var(--purple-soft);
}
.family-edit-readonly-section .family-edit-section-label {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.family-edit-rider-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.family-edit-rider-list li {
  font-size: 14px;
  color: var(--charcoal);
}

.family-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--purple-soft);
}

.family-edit-message {
  margin-top: 14px;
  padding: 0 14px;
  font-size: 13px;
  line-height: 1.4;
}
.family-edit-message:empty { padding: 0; }
.family-edit-message-info {
  color: var(--charcoal-soft);
}
.family-edit-message-success {
  color: #0F6E56;
  background: #E1F5EE;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 500;
}
.family-edit-message-error {
  color: #A32D2D;
  background: #FCEBEB;
  padding: 10px 14px;
  border-radius: 8px;
  font-weight: 500;
}

/* Verify-email landing page */
.verify-email-success-card,
.verify-email-error-card {
  padding: 30px 24px;
  background: white;
  border-radius: 16px;
  border: 1px solid var(--purple-soft);
}
.verify-email-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 18px;
}
.verify-email-detail {
  font-size: 16px;
  color: var(--charcoal);
  margin-bottom: 22px;
  line-height: 1.5;
}
.verify-email-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

/* Mobile: collapse the edit grid to single column */
@media (max-width: 768px) {
  .family-edit-grid {
    grid-template-columns: 1fr 1fr;
  }
  .family-edit-field {
    grid-column: 1 / -1;
  }
  .family-edit-field-narrow {
    grid-column: span 1;
  }
  .family-card-header {
    flex-wrap: wrap;
  }
  .btn-edit-info {
    flex-shrink: 0;
  }
  .family-edit-actions {
    justify-content: stretch;
    flex-direction: column-reverse;
  }
  .family-edit-actions .btn {
    width: 100%;
  }
}

/* ==========================================
   ADD-RIDER MODE (v1.6.9)
   Visual treatment for /waivers/?add_rider=1 — the existing-family flow
   for adding a new rider to an existing account.
   ========================================== */

.add-rider-banner {
  background: linear-gradient(135deg, var(--purple-soft) 0%, var(--cream-warm) 100%);
  border: 1px solid var(--purple-soft);
  border-left: 4px solid var(--purple-deep);
  padding: 16px 20px;
  border-radius: 12px;
  margin-bottom: 28px;
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1.5;
}
.add-rider-banner strong {
  color: var(--charcoal);
  font-weight: 600;
  display: inline;
}

/* Readonly input fields in the waiver flow look "locked in" but not disabled */
.llr-waiver-form input[readonly],
.llr-waiver-form input[readonly]:focus {
  background: var(--cream);
  color: var(--charcoal-soft);
  border-color: var(--purple-soft);
  cursor: not-allowed;
}
.llr-waiver-form input[readonly]:focus {
  outline: none;
  box-shadow: none;
}

/* Add-rider button on the family page edit form */
.btn-add-rider-cta {
  display: inline-block;
  margin-top: 8px;
  font-size: 14px;
  padding: 10px 18px;
}

/* ==========================================
   ADD-RIDER CTA INLINE WITH RIDER GRID (v1.6.10)
   Dashed-border action tile sized identically to info-item so it slots
   into the grid right after the last rider — visually distinct (dashed)
   so it reads as "do this," not "info on file."
   ========================================== */

.info-item-add-rider {
  background: white;
  border: 2px dashed var(--purple-soft);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  color: var(--charcoal);
  cursor: pointer;
  transition: all 0.2s ease;
}

.info-item-add-rider:hover,
.info-item-add-rider:focus-visible {
  border-color: var(--purple-deep);
  background: var(--purple-soft);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(123, 98, 184, 0.15);
  outline: none;
  color: var(--charcoal);
}

.info-add-icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--purple-soft);
  color: var(--purple-deep);
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.info-item-add-rider:hover .info-add-icon {
  background: var(--purple-deep);
  color: white;
  transform: rotate(90deg);
}

.info-add-text {
  flex: 1;
  min-width: 0;
}

.info-add-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--purple-deep);
  margin-bottom: 2px;
  line-height: 1.2;
}

.info-add-subtitle {
  font-size: 12px;
  color: var(--charcoal-soft);
  line-height: 1.3;
}

/* ==========================================
   LESSONS TIMELINE — booking data render (v1.7.0; Acuity-backed since v1.10.0)
   Next-up card lifts the very next lesson visually; the rest of the
   upcoming list and the past list stay compact one-line rows so the
   card scales gracefully even with 7+ bookings.
   ========================================== */

/* Admin-only configuration notice (hidden from non-admins) */
.lessons-admin-notice {
  background: var(--cream-warm);
  border: 1px solid var(--pink-soft);
  border-left: 3px solid #D4537E;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--charcoal);
  line-height: 1.4;
}
.lessons-admin-notice strong {
  color: #993556;
  font-weight: 600;
}
.lessons-admin-notice a {
  color: var(--purple-deep);
  font-weight: 500;
}

/* Section labels (Upcoming / Recent) */
.lessons-section {
  margin-top: 18px;
}
.lessons-section-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--charcoal-soft);
  font-weight: 500;
  margin-bottom: 10px;
}

/* The "Next up" elevated card — does the emotional work in a compact row */
.lesson-next-up {
  background: var(--cream-warm);
  border: 1.5px solid var(--purple-deep);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 8px;
}
.lesson-next-up-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.lesson-next-up-date {
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal);
}
.lesson-next-up-pill {
  background: var(--purple-deep);
  color: white;
  font-size: 9px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex-shrink: 0;
}
.lesson-next-up-meta {
  font-size: 12px;
  color: var(--charcoal-soft);
}

/* Compact list of subsequent upcoming + past lessons */
.lesson-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lesson-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.lesson-row-upcoming {
  background: white;
  border: 1px solid var(--purple-soft);
}
.lesson-row-past {
  background: var(--cream-warm);
}
.lesson-row-date {
  color: var(--charcoal);
}
.lesson-row-service {
  color: var(--charcoal-soft);
  font-size: 12px;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Subtle opacity fade on past lessons — most recent stays bold,
   older ones recede slightly. Mirrors how memory works. */
.lesson-row-past:nth-child(1) { opacity: 1; }
.lesson-row-past:nth-child(2) { opacity: 0.94; }
.lesson-row-past:nth-child(3) { opacity: 0.88; }
.lesson-row-past:nth-child(4) { opacity: 0.82; }
.lesson-row-past:nth-child(5) { opacity: 0.76; }

/* "+ N more upcoming" link (only when > 8 booked) */
.lesson-more-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--purple-deep);
  font-weight: 500;
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 1px dashed var(--purple-soft);
}
.lesson-more-link:hover {
  color: var(--charcoal);
  border-bottom-color: var(--purple-deep);
}

/* Mobile: keep rows readable, allow service name to wrap below date */
@media (max-width: 480px) {
  .lesson-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
  .lesson-row-service {
    text-align: left;
  }
  .lesson-next-up-row {
    flex-wrap: wrap;
  }
}

/* ==========================================
   WAIVERS — EXPECTATION-SETTING PANEL (v1.7.2)
   Sits between hero and progress bar on the waivers intake page.
   Only shows for new families (not add-rider mode), so existing
   parents who already know the drill aren't slowed down.
   ========================================== */

.waiver-expect-panel {
  background: white;
  border: 1px solid var(--purple-soft);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 36px;
  box-shadow: 0 2px 12px rgba(123, 98, 184, 0.06);
}

.waiver-expect-title {
  font-family: var(--font-fraunces);
  font-size: 20px;
  font-weight: 500;
  color: var(--charcoal);
  margin: 0 0 18px;
  text-align: center;
}

.waiver-expect-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.waiver-expect-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  background: var(--cream-warm);
  border-radius: 10px;
}

.waiver-expect-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--purple-deep);
  color: white;
  font-family: var(--font-dm-sans);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.waiver-expect-body {
  flex: 1;
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal);
}
.waiver-expect-body strong {
  display: block;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--charcoal);
}

.waiver-expect-footer {
  text-align: center;
  font-size: 13px;
  color: var(--charcoal-soft);
  margin: 18px 0 0;
}
.waiver-expect-footer a {
  color: var(--purple-deep);
  font-weight: 500;
}

/* Mobile: keep grid stacked but tighten padding */
@media (max-width: 600px) {
  .waiver-expect-panel {
    padding: 18px 16px;
    border-radius: 12px;
  }
  .waiver-expect-item {
    padding: 10px 12px;
    gap: 12px;
  }
  .waiver-expect-num {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  .waiver-expect-body {
    font-size: 13px;
  }
}

/* ==========================================
   WAIVERS — Rebecca's warm note on success screen (v1.7.2)
   Brief, personal, not over-celebrated. Matches the "tired parent
   just signed three waivers" energy.
   ========================================== */

.confirmation-rebecca-note {
  background: linear-gradient(135deg, var(--cream-warm) 0%, var(--purple-soft-bg, #F5EFFC) 100%);
  border-left: 3px solid var(--purple-deep);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 18px auto;
  max-width: 480px;
  text-align: left;
}
.confirmation-rebecca-note p {
  font-family: var(--font-fraunces);
  font-size: 15px;
  line-height: 1.5;
  color: var(--charcoal);
  margin: 0;
  font-style: italic;
}
.confirmation-rebecca-signature {
  font-family: var(--font-caveat);
  font-style: normal;
  font-size: 22px;
  color: var(--purple-deep);
  margin-left: 4px;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .confirmation-rebecca-note {
    padding: 12px 14px;
    border-radius: 8px;
  }
  .confirmation-rebecca-note p {
    font-size: 14px;
  }
  .confirmation-rebecca-signature {
    font-size: 20px;
  }
}

/* ==========================================
   PER-SERVICE BOOKING PAGES (v1.8.0)
   /book/{slug}/ auth-gated handoff to Acuity
   ========================================== */
.book-svc-card {
  background: white;
  border-radius: 20px;
  padding: 36px 32px;
  border: 1px solid rgba(123, 98, 184, 0.15);
  box-shadow: 0 4px 24px rgba(123, 98, 184, 0.06);
  text-align: center;
  margin: 0 auto;
}
.book-svc-card h2 {
  font-family: var(--font-headline);
  font-size: 28px;
  color: var(--charcoal);
  margin: 4px 0 12px;
  line-height: 1.2;
}
.book-svc-card h2 em {
  font-style: italic;
  color: var(--purple-deep);
}
.book-svc-eyebrow {
  font-family: var(--font-caveat);
  font-size: 18px;
  color: #D4537E;
  margin-bottom: 6px;
}
.book-svc-desc {
  color: var(--charcoal-soft);
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 18px;
}
.book-svc-pricetag {
  display: inline-block;
  background: var(--purple-soft);
  color: #3C3489;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  margin: 8px 0 16px;
}
.book-svc-bullets {
  list-style: none;
  padding: 0;
  margin: 16px auto 24px;
  text-align: left;
  max-width: 320px;
}
.book-svc-bullets li {
  padding: 6px 0 6px 26px;
  position: relative;
  color: var(--charcoal);
  font-size: 14px;
}
.book-svc-bullets li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--purple-deep);
  font-weight: 600;
}
.book-svc-bullets li.missing:before { content: "○"; color: #D4537E; }
.book-svc-bullets li.done {
  color: var(--charcoal-soft);
}
.book-svc-bullets li.done:before { color: #4CAF50; }
.book-svc-bullets li.done em {
  font-style: italic;
  font-size: 12px;
  color: var(--charcoal-soft);
}
.book-svc-cta {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 10px;
}
.book-svc-cta-secondary {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto 16px;
}
.book-svc-meta {
  font-size: 13px;
  color: var(--charcoal-soft);
  margin: 14px 0 0;
}
.book-svc-meta a {
  color: var(--purple-deep);
  text-decoration: underline;
}
.book-svc-handoff { background: linear-gradient(180deg, #FFF9F1 0%, white 100%); }
.book-svc-waivers { background: linear-gradient(180deg, #FCE4EB 0%, white 100%); }

/* ACUITY OPTION PICKER (v1.10.0) — shown for services with multiple
   appointment types like Private Lesson 30/60 and Pony Camp sessions. */
.book-svc-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 22px 0 18px;
}
.book-svc-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  background: white;
  border: 2px solid var(--purple-soft);
  border-radius: 12px;
  text-decoration: none;
  color: var(--charcoal);
  font-family: var(--font-serif, Georgia), serif;
  font-size: 17px;
  font-weight: 500;
  transition: all 0.18s ease;
}
.book-svc-option:hover {
  border-color: var(--purple-deep);
  background: linear-gradient(135deg, #E8DFFA 0%, #FFE4F0 50%, #FFF8E7 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(123, 98, 184, 0.14);
}
.book-svc-option-arrow {
  color: var(--purple-deep);
  font-size: 22px;
  transition: transform 0.18s ease;
}
.book-svc-option:hover .book-svc-option-arrow {
  transform: translateX(3px);
}
@media (max-width: 600px) {
  .book-svc-option {
    padding: 14px 18px;
    font-size: 15px;
  }
}

/* INQUIRY FORM (Parties & Events) */
.book-svc-form-wrap {
  background: white;
  border-radius: 20px;
  padding: 36px 32px;
  border: 1px solid rgba(123, 98, 184, 0.15);
  box-shadow: 0 4px 24px rgba(123, 98, 184, 0.06);
}
.book-svc-inquiry-form label {
  display: block;
  margin-bottom: 16px;
  flex: 1;
}
.book-svc-form-row {
  display: flex;
  gap: 12px;
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .book-svc-form-row { flex-direction: column; gap: 0; }
}
.book-svc-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 6px;
}
.book-svc-inquiry-form input,
.book-svc-inquiry-form select,
.book-svc-inquiry-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(123, 98, 184, 0.25);
  border-radius: 10px;
  font-family: inherit;
  font-size: 15px;
  color: var(--charcoal);
  background: #FFF9F1;
  transition: border-color 0.15s, background 0.15s;
}
.book-svc-inquiry-form input:focus,
.book-svc-inquiry-form select:focus,
.book-svc-inquiry-form textarea:focus {
  outline: none;
  border-color: var(--purple-deep);
  background: white;
}
.book-svc-submit {
  margin-top: 12px;
  width: 100%;
}
.book-svc-error {
  background: #FCE4EB;
  border-left: 3px solid #D4537E;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 18px;
  color: #993556;
  font-size: 14px;
}
.book-svc-success {
  background: white;
  border-radius: 20px;
  padding: 48px 32px;
  border: 1px solid rgba(123, 98, 184, 0.15);
  box-shadow: 0 4px 24px rgba(123, 98, 184, 0.06);
  text-align: center;
}
.book-svc-success h2 {
  font-family: var(--font-headline);
  font-size: 32px;
  color: var(--charcoal);
  margin: 8px 0 16px;
}
.book-svc-success-eyebrow {
  font-family: var(--font-caveat);
  font-size: 20px;
  color: var(--purple-deep);
  margin-bottom: 4px;
}
.book-svc-success p {
  color: var(--charcoal-soft);
  font-size: 16px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0 auto 24px;
}

/* ==========================================
   FAMILY PAGE — SERVICE GRID (v1.8.2)
   Pastel-colored tiles matching the lessons page brand language.
   Each tile uses _llr_service_card_color (pink/purple/blue) or featured.
   2-col mobile, 3-col desktop.
   ========================================== */
.family-svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin: 0 0 16px;
}
@media (min-width: 600px) {
  .family-svc-grid { grid-template-columns: repeat(3, 1fr); }
}

.family-svc-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 22px 14px 18px;
  border: 2px solid transparent;
  border-radius: 14px;
  text-decoration: none;
  color: var(--charcoal);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  min-height: 150px;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Color variants — soft pastels */
.family-svc-tile-pink { background: var(--pink-soft); }
.family-svc-tile-purple { background: var(--purple-soft); }
.family-svc-tile-blue { background: var(--blue-soft); }

/* Featured tile — same soft lavender as the regular purple variant.
   The "Most popular" pill in the top-right corner is what makes it
   stand out, not the background color. Tile blends with the others
   visually; the pill carries the meaning. */
.family-svc-tile-featured {
  background: var(--purple-soft);
  color: var(--charcoal);
}
.family-svc-tile-featured::before {
  content: 'Most popular';
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--purple-deep);
  color: #fff;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  line-height: 1.2;
  white-space: nowrap;
  z-index: 1;
}
.family-svc-tile-featured .family-svc-tile-icon { color: var(--purple-deep); }
.family-svc-tile-featured .family-svc-tile-name { color: var(--charcoal); }
.family-svc-tile-featured .family-svc-tile-price { color: var(--purple-deep); opacity: 0.85; }

/* Hover: slight lift + shadow + matching-tone border */
.family-svc-tile:hover,
.family-svc-tile:focus {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(123, 98, 184, 0.18);
  text-decoration: none;
  color: var(--charcoal);
}
.family-svc-tile-pink:hover { border-color: var(--pink); }
.family-svc-tile-purple:hover { border-color: var(--purple-deep); }
.family-svc-tile-blue:hover { border-color: var(--blue, #8DB8E0); }
.family-svc-tile-featured:hover {
  border-color: var(--purple-deep);
  color: var(--charcoal);
}

.family-svc-tile-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
  color: var(--purple-deep);
}
.family-svc-tile-icon .lesson-icon {
  width: 32px;
  height: 32px;
}
.family-svc-tile-name {
  font-family: var(--font-headline);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--charcoal);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.family-svc-tile-price {
  font-size: 13px;
  color: var(--purple-deep);
  font-weight: 500;
  opacity: 0.85;
}

/* ==========================================
   FAMILY-PAGE LESSON ROW LIST (v1.9.27)
   Replaces the cramped 3-col tile grid inside the half-width lessons
   card with a row list. Cleaner than tiles when the card is sharing a
   row with the waivers card.
   ========================================== */
.family-svc-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 18px;
}
.family-svc-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid rgba(123, 98, 184, 0.18);
  border-radius: 14px;
  text-decoration: none;
  color: var(--charcoal);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.family-svc-row:hover,
.family-svc-row:focus {
  transform: translateY(-1px);
  border-color: var(--purple-deep);
  box-shadow: 0 4px 14px rgba(123, 98, 184, 0.14);
  text-decoration: none;
  color: var(--charcoal);
}
.family-svc-row.is-featured {
  background: linear-gradient(135deg, var(--purple-soft) 0%, var(--pink-soft) 100%);
  border-color: rgba(123, 98, 184, 0.3);
}
.family-svc-row.is-featured:hover {
  border-color: var(--purple-deep);
}
.family-svc-row-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--cream-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple-deep);
  flex-shrink: 0;
}
.family-svc-row.is-featured .family-svc-row-icon {
  background: rgba(255, 255, 255, 0.85);
}
.family-svc-row-icon .lesson-icon,
.family-svc-row-icon svg {
  width: 22px;
  height: 22px;
}
.family-svc-row-body {
  flex: 1;
  min-width: 0;
}
.family-svc-row-name {
  font-family: var(--font-headline);
  font-size: 15.5px;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.2;
}
.family-svc-row-meta {
  font-size: 13px;
  color: var(--charcoal-soft);
  margin-top: 2px;
  line-height: 1.4;
}
.family-svc-row-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--purple-deep);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}
.family-svc-row-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.family-svc-row:hover .family-svc-row-arrow,
.family-svc-row:focus .family-svc-row-arrow {
  transform: translateX(3px);
}

/* Mobile: stack the CTA below the body for breathing room */
@media (max-width: 520px) {
  .family-svc-row {
    flex-wrap: wrap;
    padding: 14px 16px;
  }
  .family-svc-row-body {
    flex: 1 1 calc(100% - 64px);
  }
  .family-svc-row-cta {
    flex: 1 1 100%;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px dashed rgba(123, 98, 184, 0.18);
    margin-top: 4px;
  }
}

/* Manage existing booking — combo: help text + login button */
.family-svc-manage {
  text-align: center;
  margin-top: 4px;
  padding-top: 16px;
  border-top: 1px solid rgba(123, 98, 184, 0.12);
}
.family-svc-manage-help {
  font-size: 13px;
  color: var(--charcoal-soft);
  line-height: 1.5;
  margin-bottom: 12px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}
.family-svc-manage-help strong {
  display: block;
  color: var(--charcoal);
  font-weight: 500;
  margin-bottom: 4px;
}
.family-svc-manage-help span {
  display: block;
}
.family-svc-manage-btn {
  display: inline-block;
  padding: 10px 22px !important;
  font-size: 13px !important;
  font-weight: 500;
  border-radius: 999px !important;
}

/* Mobile tweaks */
@media (max-width: 480px) {
  .family-svc-tile { min-height: 116px; padding: 14px 8px 12px; }
  .family-svc-tile-icon { width: 34px; height: 34px; margin-bottom: 8px; }
  .family-svc-tile-icon .lesson-icon { width: 28px; height: 28px; }
  .family-svc-tile-name { font-size: 13px; }
  .family-svc-tile-price { font-size: 11px; }
}

/* Book a Lesson page — service grid (mirrors family-svc-grid but wider) */
.bal-svc-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  max-width: 920px;
  margin: 0 auto 32px;
}
@media (min-width: 700px) {
  .bal-svc-grid { grid-template-columns: repeat(3, 1fr); gap: 18px; }
}
.bal-svc-grid .family-svc-tile {
  min-height: 170px;
  padding: 26px 18px 22px;
}
.bal-svc-grid .family-svc-tile-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 14px;
}
.bal-svc-grid .family-svc-tile-icon .lesson-icon {
  width: 44px;
  height: 44px;
}
.bal-svc-grid .family-svc-tile-name {
  font-size: 16px;
}
.bal-svc-grid .family-svc-tile-price {
  font-size: 13px;
  margin-top: 6px;
}
@media (max-width: 480px) {
  .bal-svc-grid .family-svc-tile { min-height: 130px; padding: 18px 12px 16px; }
  .bal-svc-grid .family-svc-tile-icon { width: 42px; height: 42px; margin-bottom: 10px; }
  .bal-svc-grid .family-svc-tile-icon .lesson-icon { width: 34px; height: 34px; }
  .bal-svc-grid .family-svc-tile-name { font-size: 14px; }
}

.bal-manage {
  text-align: center;
  max-width: 560px;
  margin: 24px auto 0;
  padding: 24px 20px;
  background: white;
  border-radius: 14px;
  border: 1px solid rgba(123, 98, 184, 0.12);
}
.bal-manage-help {
  font-size: 14px;
  color: var(--charcoal-soft);
  line-height: 1.55;
  margin-bottom: 16px;
}
.bal-manage-help strong {
  display: block;
  color: var(--charcoal);
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 6px;
}
.bal-manage-help span {
  display: block;
}
.bal-manage-btn {
  display: inline-block;
  padding: 11px 24px !important;
  font-size: 13px !important;
  font-weight: 500;
  border-radius: 999px !important;
  background: var(--purple-primary, #7B62B8);
  color: white !important;
  text-decoration: none;
  margin: 8px 0 12px;
  transition: background 0.15s ease;
}
.bal-manage-btn:hover {
  background: var(--purple-primary-dark, #6753A3);
  color: white !important;
}
.bal-manage-fallback {
  font-size: 13px;
  color: var(--charcoal-soft);
  margin-top: 4px;
}
.bal-manage-fallback a {
  color: var(--purple-primary, #7B62B8);
  text-decoration: none;
  font-weight: 500;
}
.bal-manage-fallback a:hover {
  text-decoration: underline;
}

/* ==========================================
   v1.9.37 — FAMILY PORTAL REDESIGN
   - Barn strip (address + parking + directions) below hero
   - Upcoming lessons section with date-block cards + at-a-glance stats
   - Refined book tiles split into primary + secondary (inquiry)
   - 2-column bottom row: family info (wide) + waivers/help (narrow stack)
   ========================================== */

/* ---- BARN STRIP (v1.9.38: redesigned for visual separation from hero) ---- */
.family-barn-strip {
  background: var(--cream-warm, #FFF8E7);
  border-top: 1px solid rgba(92, 70, 144, 0.08);
  border-bottom: 1px solid rgba(92, 70, 144, 0.08);
  position: relative;
}
.family-barn-strip::before {
  /* Soft drop shadow to lift the strip up from the hero */
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(180deg, rgba(74, 63, 92, 0.06), transparent);
  pointer-events: none;
}
.family-barn-strip-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 36px;
  display: flex;
  align-items: center;
  gap: 22px;
  position: relative;
}
.barn-strip-icon {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: var(--purple-soft);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(92, 70, 144, 0.08);
}
.barn-strip-icon svg {
  width: 26px;
  height: 26px;
  color: var(--purple-deep);
}
.barn-strip-text {
  flex: 1;
  min-width: 0;
}
.barn-strip-label {
  font-family: var(--font-script, 'Caveat'), Georgia, serif;
  font-size: 19px;
  color: var(--pink-deep, #D87A93);
  margin-bottom: 2px;
  font-style: italic;
}
.barn-strip-addr {
  font-family: var(--font-serif, Georgia), serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 4px;
  line-height: 1.3;
}
.barn-strip-park {
  font-size: 14px;
  color: var(--charcoal-soft);
  font-style: italic;
  line-height: 1.4;
}
.barn-strip-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.barn-strip-btn {
  background: white;
  border: 1.5px solid var(--purple-deep);
  color: var(--purple-deep);
  padding: 11px 18px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  white-space: nowrap;
  transition: all 0.18s ease;
}
.barn-strip-btn-primary {
  background: var(--purple-deep);
  color: white;
}
.barn-strip-btn:hover {
  box-shadow: 0 3px 12px rgba(92, 70, 144, 0.22);
  transform: translateY(-1px);
}
.barn-strip-btn-secondary.barn-strip-btn-copied {
  background: var(--green-soft, #E2EDD9);
  border-color: var(--green-deep, #4F7A3D);
  color: var(--green-deep, #4F7A3D);
}

/* Mobile: stack the strip */
@media (max-width: 720px) {
  .family-barn-strip-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
  }
  .barn-strip-actions {
    width: 100%;
  }
  .barn-strip-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ---- UPCOMING LESSONS SECTION ---- */
.upcoming-section {
  margin-bottom: 36px;
}
.upcoming-section-title {
  font-family: var(--font-serif, Georgia), serif;
  font-size: 30px;
  font-weight: 500;
  color: var(--charcoal);
  margin: 0 0 22px;
  line-height: 1.25;
}
.upcoming-section-title .script {
  font-family: var(--font-script, 'Caveat'), cursive;
  color: var(--purple-deep);
  font-style: normal;
}
.upcoming-helper {
  margin: -10px 0 18px;
  font-size: 15px;
  color: var(--charcoal-soft, #6b6660);
  line-height: 1.5;
  max-width: 640px;
}
.upcoming-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 18px;
  align-items: start;
}
.upcoming-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upcoming-card {
  background: white;
  border: 1.5px solid var(--cream-edge, #ede5dc);
  border-radius: 14px;
  padding: 18px 22px;
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: inherit;
  transition: all 0.18s ease;
  display: block;
}
.upcoming-card:hover {
  border-color: var(--purple, #A594D1);
  box-shadow: 0 4px 14px rgba(123, 98, 184, 0.1);
  transform: translateY(-1px);
}
.upcoming-card-featured {
  border-color: var(--purple, #A594D1);
  background: linear-gradient(135deg, #ffffff 0%, #FAF6FF 100%);
}
.upcoming-card-featured::before {
  content: 'NEXT UP';
  position: absolute;
  top: -8px;
  left: 18px;
  background: var(--purple-deep);
  color: white;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 3px 10px;
  border-radius: 999px;
}

/* v2.3.1 — Pending Payment card variant. Booking created via admin
   Book-as-Parent → Send Stripe payment link. Slot is reserved but
   payment hasn't completed. Soft yellow tint + inline pill so the
   parent sees the lesson AND understands they need to pay. Click
   still routes to /manage-booking/ where the Pay Now button lives. */
.upcoming-card-pending-payment {
  border-color: rgba(245, 178, 31, 0.55) !important;
  background: linear-gradient(135deg, #fffbf0 0%, #fff5dc 100%) !important;
}
.upcoming-card-pending-payment::before {
  /* If the card is also featured, suppress the NEXT UP pill — the
     Pending Payment pill in the title carries the stronger signal. */
  content: '' !important;
}
.upcoming-pending-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 3px 10px;
  background: rgba(245, 178, 31, 0.18);
  color: #8a5a07;
  border: 1px solid rgba(245, 178, 31, 0.45);
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.upcoming-pending-help {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: #8a5a07;
  line-height: 1.4;
}

/* v2.3.33 — camp balance due: highlight the card and label it, no separate button */
.upcoming-card-balance-due {
  border: 2px solid #7B62B8;
  box-shadow: 0 0 0 4px rgba(123, 98, 184, 0.10);
}
.upcoming-balance-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  background: #7B62B8;
  color: #fff;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
}
.upcoming-balance-help {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: #5f4a93;
  font-weight: 600;
  line-height: 1.4;
}

/* v2.3.38 — pay-as-you-go family card states */
.upcoming-payg-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  background: #EEF;
  color: #5a5ad6;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
}
.upcoming-payg-pill-failed {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  background: #FCE8E8;
  color: #C0392B;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
}
.upcoming-paid-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 10px;
  background: #E6F7EE;
  color: #1B7A4B;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  vertical-align: middle;
}
.upcoming-payg-help {
  margin: 8px 0 0;
  font-size: 0.82rem;
  color: #6a6a86;
  line-height: 1.4;
}

.upcoming-card-row {
  display: flex;
  align-items: center;
  gap: 18px;
}
.upcoming-date-block {
  flex-shrink: 0;
  width: 68px;
  text-align: center;
  background: var(--purple-soft);
  border-radius: 10px;
  padding: 9px 4px;
}
.upcoming-date-block.date-block-pink {
  background: var(--pink-soft, #FFE0EC);
}
.upcoming-date-block.date-block-pink .upcoming-date-dow,
.upcoming-date-block.date-block-pink .upcoming-date-num,
.upcoming-date-block.date-block-pink .upcoming-date-mo {
  color: var(--pink-deep, #D87A93);
}
.upcoming-date-dow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--purple-deep);
}
.upcoming-date-num {
  font-family: var(--font-serif, Georgia), serif;
  font-size: 28px;
  font-weight: 500;
  color: var(--purple-deep);
  line-height: 1;
  margin: 4px 0 2px;
}
.upcoming-date-mo {
  font-size: 11px;
  color: var(--purple-deep);
  text-transform: uppercase;
}

.upcoming-info {
  flex: 1;
  min-width: 0;
}
.upcoming-info h4 {
  font-family: var(--font-serif, Georgia), serif;
  font-size: 19px;
  font-weight: 500;
  margin: 0 0 5px;
  color: var(--charcoal);
}
.upcoming-meta {
  font-size: 14px;
  color: var(--charcoal-soft);
  margin-bottom: 7px;
}
.rider-chip-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--purple-soft);
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  font-size: 12px;
  color: var(--purple-deep);
  font-weight: 500;
}
.rider-chip-av {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif, Georgia), serif;
  font-size: 12px;
  color: var(--purple-deep);
}

/* v2.3.2 — Wrapper for one or more rider chips on a family card. Lets
   pair-mode bookings (Sophia + Arthur) display both riders with proper
   spacing without breaking the layout on solo bookings. */
.upcoming-rider-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

/* ==========================================
   v1.10.59 — RIDER FILTER STRIP
   Multi-rider families get a chip strip above their upcoming rides
   to filter the list per rider. Pure client-side CSS toggle.
   ========================================== */
.rider-filter-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
@media (max-width: 600px) {
  /* Mobile: center-aligned chip wrap, matching the pony card grid treatment.
     Wrapping chips look stranded when left-aligned; centering keeps the row
     visually balanced even when the rider count produces an odd number per row.
     v1.10.60 */
  .rider-filter-strip {
    justify-content: center;
    gap: 6px;
  }
}
.rider-filter-chip {
  display: inline-flex;
  align-items: center;
  /* v1.13.25 (Polish P6, family page mirror) — Bigger padding to seat
     the larger avatar (now mirroring booking picker), more breathing
     room between avatar and name. */
  gap: 10px;
  background: white;
  border: 1.5px solid var(--purple-soft);
  border-radius: 999px;
  padding: 6px 18px 6px 6px;
  font-size: 14px;
  color: var(--purple-deep);
  font-weight: 500;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.rider-filter-chip:not([data-filter-rider="all"]) > :first-child + * {
  /* leading text (no avatar) needs a touch more left padding */
  padding-left: 0;
}
.rider-filter-chip[data-filter-rider="all"] {
  /* "All" has no avatar, so it gets symmetric pill padding and a
     height that matches the avatar-bearing chips so the row reads
     evenly. */
  padding: 6px 18px;
  min-height: 44px;
}
.rider-filter-chip:hover {
  background: var(--purple-soft);
}
.rider-filter-chip.rider-filter-active {
  background: var(--purple-deep, #5B4C9C);
  border-color: var(--purple-deep, #5B4C9C);
  color: white;
}
.rider-filter-chip.rider-filter-active .rider-filter-av {
  background: white;
  color: var(--purple-deep, #5B4C9C);
}
.rider-filter-av {
  /* v1.13.25 (Polish P6, family page mirror) — Up-scaled from 22px to
     32px and given a dashed outline, mirroring the booking picker
     avatar treatment (.multibook-rider-avatar). Same serif initials,
     same brand-color background, same outline pattern — a given
     rider's IG / TG / ML reads as the same chip identity across the
     family page filter strip and the booking page picker tiles. */
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--purple-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif, Georgia), serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--purple-deep);
  outline: 2px dashed rgba(123, 98, 184, 0.35);
  outline-offset: 2px;
  transition: background 0.15s ease, color 0.15s ease, outline-color 0.15s ease;
  flex-shrink: 0;
}
.rider-filter-chip:hover .rider-filter-av {
  outline-color: var(--purple, #A594D1);
}
.rider-filter-chip.rider-filter-active .rider-filter-av {
  /* When the parent chip is active (purple-deep), the dashed outline
     becomes solid white to read as "selected" against the dark chip. */
  outline: 2px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}
/* v1.13.24 (Polish P6) — Per-rider color classes. Same palette + same
   hash algorithm as the booking-page picker (multi-booking.js +
   llr_rider_color_class in inc/client-data.php) so a given rider
   reads as the same color on both surfaces. White initials on
   brand-color circles. */
.rider-filter-av-c0 { background: var(--purple-deep, #7B62B8); color: #fff; }
.rider-filter-av-c1 { background: var(--pink, #F4A3B8);       color: #fff; }
.rider-filter-av-c2 { background: var(--blue, #9FC5E8);       color: #fff; }
.rider-filter-av-c3 { background: var(--purple, #A594D1);     color: #fff; }
/* When the chip is the active filter, the chip body becomes purple-deep
   and the avatar inverts to white background with the rider's color
   as text — preserves identity while signaling the active state. */
.rider-filter-chip.rider-filter-active .rider-filter-av-c0 { background: #fff; color: var(--purple-deep, #7B62B8); }
.rider-filter-chip.rider-filter-active .rider-filter-av-c1 { background: #fff; color: var(--pink, #F4A3B8); }
.rider-filter-chip.rider-filter-active .rider-filter-av-c2 { background: #fff; color: var(--blue, #9FC5E8); }
.rider-filter-chip.rider-filter-active .rider-filter-av-c3 { background: #fff; color: var(--purple, #A594D1); }
.upcoming-card.filtered-out {
  display: none;
}
.upcoming-filtered-empty {
  background: white;
  border-radius: 14px;
  padding: 32px 20px;
  text-align: center;
  border: 1px dashed rgba(123, 98, 184, 0.25);
}
.upcoming-filtered-empty h4 {
  margin: 8px 0 6px;
  font-family: Georgia, serif;
  font-size: 18px;
  color: var(--charcoal);
}
.upcoming-filtered-empty p {
  margin: 0;
  font-size: 13px;
  color: var(--charcoal-soft);
  font-style: italic;
}

.upcoming-arrow {
  color: var(--purple-deep);
  font-size: 28px;
  flex-shrink: 0;
  transition: transform 0.18s ease;
}
.upcoming-card:hover .upcoming-arrow {
  transform: translateX(3px);
}

/* Empty state */
.upcoming-empty {
  background: white;
  border: 1.5px dashed var(--cream-edge, #ede5dc);
  border-radius: 14px;
  padding: 32px 22px;
  text-align: center;
}
.upcoming-empty-icon {
  font-size: 36px;
  margin-bottom: 10px;
  line-height: 1;
}
.upcoming-empty h4 {
  font-family: var(--font-serif, Georgia), serif;
  font-size: 18px;
  font-weight: 500;
  margin: 0 0 5px;
  color: var(--charcoal);
}
.upcoming-empty p {
  font-size: 14px;
  color: var(--charcoal-soft);
  font-style: italic;
  margin: 0;
}

/* At a glance stats */
.upcoming-stats {
  background: linear-gradient(135deg, var(--purple-soft) 0%, var(--blue-soft, #DEEAF7) 100%);
  border-radius: 14px;
  padding: 20px 22px;
}
.upcoming-stats-label {
  font-family: var(--font-script, 'Caveat'), Georgia, serif;
  font-style: italic;
  font-size: 19px;
  color: var(--purple-deep);
  margin-bottom: 12px;
}
.upcoming-stat-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 9px 0;
  font-size: 15px;
  color: var(--charcoal);
  border-bottom: 1px solid rgba(92, 70, 144, 0.1);
}
.upcoming-stat-row:last-child {
  border-bottom: none;
}
.upcoming-stat-num {
  font-family: var(--font-serif, Georgia), serif;
  font-size: 21px;
  font-weight: 500;
  color: var(--purple-deep);
}
.upcoming-stat-num-text {
  font-size: 15px;
  font-family: inherit;
}

/* Mobile upcoming */
@media (max-width: 880px) {
  .upcoming-grid {
    grid-template-columns: 1fr;
  }
  .upcoming-stats {
    order: -1;
    padding: 14px 18px;
  }
  .upcoming-stats-label { margin-bottom: 6px; }
  .upcoming-stat-row { padding: 5px 0; font-size: 12px; }
  .upcoming-stat-num { font-size: 15px; }
}

/* ---- BOOK SECTION header (v1.9.42)
   Tiles themselves are rendered by llr_render_service_card() and use
   the existing .lessons-grid / .lesson-card styles from /lessons/ page.
   ---- */
.book-section {
  margin-bottom: 36px;
}
.book-section-title {
  font-family: var(--font-serif, Georgia), serif;
  font-size: 30px;
  font-weight: 500;
  color: var(--charcoal);
  margin: 0 0 22px;
  line-height: 1.25;
}
.book-section-title .script {
  font-family: var(--font-script, 'Caveat'), cursive;
  color: var(--purple-deep);
  font-style: normal;
}

/* ---- BOTTOM ROW (family info + waivers/help stack) ---- */
.family-bottom-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
  margin-bottom: 28px;
  align-items: start;
}
.family-bottom-left {
  min-width: 0;
}
.family-bottom-right {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

@media (max-width: 880px) {
  .family-bottom-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Help card — full width below family info + waivers (v1.9.38) */
.support-card-wide {
  background: linear-gradient(135deg, var(--cream-warm, #FFF8E7) 0%, var(--pink-soft, #FFE4EC) 100%);
  border: none;
  text-align: center;
  padding: 32px 36px;
  margin-bottom: 28px;
}
.support-card-wide .family-card-header {
  justify-content: center;
  margin-bottom: 10px;
}
.support-card-wide .family-card-header::after {
  display: none;
}
.support-card-wide p {
  font-size: 17px;
  color: var(--charcoal);
  margin: 0;
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.65;
}
.support-card-wide a {
  color: var(--purple-deep);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed var(--purple-soft);
  transition: border-color 0.18s ease;
}
.support-card-wide a:hover {
  border-bottom-color: var(--purple-deep);
}
@media (max-width: 720px) {
  .support-card-wide {
    padding: 24px 22px;
  }
  .support-card-wide p {
    font-size: 15px;
  }
}

/* ====================================================================
   BOOKING FLOW (v1.10.3 — Phase B-1)
   Custom multi-step booking UI: progress pills, card frame, calendar
   grid, time slot grid, rider info form, and stub steps for payment +
   confirmation. Routes through inc/booking-flow.php.
   ==================================================================== */

.bf-section {
  background: var(--cream);
  padding: 48px 0 80px;
}

/* ---------- PROGRESS PILLS ---------- */
.bf-progress {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0 0 32px;
}
.bf-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: white;
  border: 1px solid rgba(123, 98, 184, 0.18);
  color: var(--charcoal-soft);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.bf-pill-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(123, 98, 184, 0.1);
  color: var(--purple-deep);
  font-size: 12px;
  font-weight: 700;
}
.bf-pill-active {
  background: linear-gradient(135deg, #E8DFFA 0%, #FFE4F0 50%, #FFF8E7 100%);
  border-color: var(--purple-deep);
  color: var(--charcoal);
}
.bf-pill-active .bf-pill-num {
  background: var(--purple-deep);
  color: white;
}
.bf-pill-done .bf-pill-num {
  background: #4CAF50;
  color: white;
}
.bf-pill-done .bf-pill-num::after {
  content: "✓";
}
.bf-pill-done .bf-pill-num > * {
  display: none;
}
@media (max-width: 600px) {
  .bf-progress { gap: 4px; }
  .bf-pill { padding: 5px 10px; font-size: 11px; }
  .bf-pill-num { width: 18px; height: 18px; font-size: 10px; }
}

/* ---------- CARD ---------- */
.bf-card {
  background: white;
  border-radius: 20px;
  padding: 36px 36px 32px;
  border: 1px solid rgba(123, 98, 184, 0.12);
  box-shadow: 0 4px 24px rgba(123, 98, 184, 0.08);
}
.bf-card-success {
  background: linear-gradient(180deg, #FFF9F1 0%, white 100%);
  text-align: center;
}
.bf-eyebrow {
  font-size: 12px;
  font-weight: 600;
  color: var(--purple-deep);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}
.bf-heading {
  font-family: var(--font-headline);
  font-size: 30px;
  color: var(--charcoal);
  margin: 0 0 6px;
  line-height: 1.2;
}
.bf-heading .script {
  font-family: var(--font-script);
  font-weight: 400;
  color: var(--purple-deep);
}
.bf-subhead {
  font-size: 14px;
  color: var(--charcoal-soft);
  margin: 0 0 24px;
}
.bf-back-link {
  display: inline-block;
  font-size: 13px;
  color: var(--purple-deep);
  text-decoration: none;
  margin-bottom: 18px;
  font-weight: 500;
}
.bf-back-link:hover {
  text-decoration: underline;
}
.bf-meta {
  font-size: 12px;
  color: var(--charcoal-soft);
  margin-top: 22px;
  font-style: italic;
}

@media (max-width: 600px) {
  .bf-card { padding: 26px 20px 24px; border-radius: 16px; }
  .bf-heading { font-size: 24px; }
}

/* ---------- MONTH NAV ---------- */
.bf-month-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 18px;
}
.bf-month-current {
  font-family: var(--font-headline);
  font-size: 18px;
  margin: 0;
  color: var(--charcoal);
  text-align: center;
  flex: 1;
}
.bf-month-btn {
  font-size: 13px;
  color: var(--purple-deep);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: 8px;
  white-space: nowrap;
}
.bf-month-btn:hover {
  background: rgba(123, 98, 184, 0.08);
}
.bf-month-btn-disabled {
  color: var(--charcoal-soft);
  opacity: 0.4;
  pointer-events: none;
}

/* ---------- CALENDAR GRID ---------- */
.bf-cal {
  margin: 12px 0 18px;
}
.bf-cal-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.bf-cal-dow {
  font-size: 11px;
  font-weight: 600;
  color: var(--charcoal-soft);
  text-align: center;
  padding: 6px 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bf-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.bf-cal-cell {
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f7f5fa;
  color: var(--charcoal-soft);
  font-size: 14px;
  font-weight: 500;
}
.bf-cal-empty { background: transparent; }
.bf-cal-past {
  color: rgba(95, 94, 90, 0.4);
}
.bf-cal-today {
  outline: 2px solid var(--purple-deep);
  outline-offset: -2px;
}
.bf-cal-available {
  background: white;
  border: 2px solid var(--purple-soft);
  color: var(--purple-deep);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.15s ease;
}
.bf-cal-available:hover {
  background: linear-gradient(135deg, #E8DFFA 0%, #FFE4F0 50%, #FFF8E7 100%);
  border-color: var(--purple-deep);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(123, 98, 184, 0.15);
}
.bf-cal-day { font-variant-numeric: tabular-nums; }

@media (max-width: 600px) {
  .bf-cal-cell { font-size: 12px; border-radius: 8px; }
}

/* ---------- TIME SLOT GRID ---------- */
.bf-time-group {
  margin: 18px 0;
}
.bf-time-group-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}
.bf-time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.bf-time-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border: 2px solid var(--purple-soft);
  border-radius: 10px;
  background: white;
  color: var(--charcoal);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.15s ease;
}
.bf-time-slot:hover {
  border-color: var(--purple-deep);
  background: linear-gradient(135deg, #E8DFFA 0%, #FFE4F0 50%, #FFF8E7 100%);
  transform: translateY(-1px);
}

/* ---------- FORM ---------- */
.bf-form {
  margin-top: 12px;
}
.bf-field {
  margin-bottom: 18px;
}
.bf-label {
  display: block;
  font-weight: 600;
  color: var(--charcoal);
  font-size: 14px;
  margin-bottom: 6px;
}
.bf-req { color: #C13C5A; }
.bf-optional {
  font-weight: 400;
  font-size: 12px;
  color: var(--charcoal-soft);
}
.bf-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid rgba(123, 98, 184, 0.25);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  background: white;
  color: var(--charcoal);
  box-sizing: border-box;
}
.bf-input:focus {
  outline: none;
  border-color: var(--purple-deep);
  box-shadow: 0 0 0 3px rgba(123, 98, 184, 0.12);
}
.bf-help {
  font-size: 12px;
  color: var(--charcoal-soft);
  margin: 4px 0 8px;
}
.bf-field-emergency {
  background: #FFF9F1;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px dashed rgba(123, 98, 184, 0.2);
}
.bf-emergency-display {
  font-size: 14px;
  color: var(--charcoal);
  padding-top: 4px;
}

/* ==========================================
   v1.10.65 — SEMI-PRIVATE SECOND RIDER TOGGLE
   Optional disclosure section between rider notes and emergency contact.
   Closed by default; opens on toggle click. Soft-pink callout reinforces
   "this is for the partner rider, not your kid".
   ========================================== */
.bf-second-rider-wrap {
  margin: 16px 0 20px;
}
.bf-second-rider-toggle {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 1.5px dashed rgba(232, 122, 161, 0.5);
  color: var(--purple-deep, #5B4C9C);
  padding: 10px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.bf-second-rider-toggle:hover {
  background: #FCE4EB;
  border-color: var(--pink, #E87AA1);
}
.bf-second-rider-toggle.bf-second-rider-toggle-open {
  background: #FCE4EB;
  border-style: solid;
  border-color: var(--pink, #E87AA1);
}
.bf-second-rider-icon {
  display: inline-flex;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pink, #E87AA1);
  color: white;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  margin-right: 10px;
  line-height: 1;
}
.bf-second-rider-fields {
  margin-top: 14px;
  padding: 18px 20px;
  background: #FCE4EB;
  border-radius: 12px;
  border: 1px solid rgba(232, 122, 161, 0.3);
}
.bf-second-rider-intro {
  font-size: 13px;
  color: var(--charcoal, #3D3450);
  line-height: 1.5;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px dashed rgba(232, 122, 161, 0.4);
}
.bf-second-rider-fields .bf-field {
  margin-bottom: 12px;
}
.bf-second-rider-fields .bf-field:last-child {
  margin-bottom: 0;
}
@media (max-width: 600px) {
  .bf-second-rider-toggle {
    width: 100%;
    justify-content: center;
  }
  .bf-second-rider-fields {
    padding: 14px;
  }
}

.bf-cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.bf-cta {
  flex: 1;
  min-width: 200px;
}

/* ---------- ERROR / EMPTY STATES ---------- */
.bf-error,
.bf-empty {
  background: #FFF9F1;
  border: 1px solid rgba(193, 60, 90, 0.2);
  border-radius: 12px;
  padding: 18px 22px;
  margin: 18px 0;
}
.bf-error strong {
  color: #C13C5A;
}
.bf-error-detail {
  font-size: 12px;
  color: var(--charcoal-soft);
  font-family: monospace;
  margin: 6px 0;
}
.bf-empty p {
  margin: 0 0 6px;
}
.bf-empty-detail {
  font-size: 13px;
  color: var(--charcoal-soft);
}

/* ---------- STUB BANNER ---------- */
.bf-stub-banner {
  background: linear-gradient(135deg, #FFF8E7 0%, #FFE4F0 100%);
  border: 1px solid rgba(123, 98, 184, 0.18);
  border-radius: 12px;
  padding: 16px 20px;
  font-size: 14px;
  color: var(--charcoal);
  line-height: 1.55;
}

/* ---------- SUMMARY (step 4) ---------- */
.bf-summary {
  background: #FFF9F1;
  border-radius: 12px;
  padding: 16px 20px;
  margin: 14px 0 6px;
}
.bf-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 14px;
  border-bottom: 1px dashed rgba(123, 98, 184, 0.12);
}
.bf-summary-row:last-child {
  border-bottom: 0;
}
.bf-summary-row span {
  color: var(--charcoal-soft);
}
.bf-summary-row strong {
  text-align: right;
}

/* ---------- CONFIRMATION ---------- */
.bf-confetti {
  font-size: 56px;
  margin-bottom: 8px;
}

/* ---------- LESSON CARD DURATION CHIPS (v1.10.4, restyled v1.10.6) ---------- */
/* Two-chip variant for services with multiple appointment types
   (e.g., Private Lesson 30 vs 60). Visual treatment matches .lesson-cta
   exactly so the tile reads as "two CTA buttons side by side" rather
   than as different-feeling widgets. */
.lesson-chips {
  display: flex;
  gap: 10px;
  justify-content: center;
  position: relative;
  z-index: 2;
  width: 100%;
}
.lesson-chip {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 14px;
  background: var(--white);
  color: var(--purple-deep);
  text-decoration: none;
  border-radius: 30px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  transition: all 0.2s;
  white-space: nowrap;
}
.lesson-chip:hover {
  background: var(--purple-deep);
  color: var(--white);
}
.lesson-card.featured .lesson-chip {
  background: var(--pink);
  color: var(--white);
}
.lesson-card.featured .lesson-chip:hover {
  background: var(--white);
  color: var(--purple-deep);
}
@media (max-width: 480px) {
  .lesson-chip {
    font-size: 11px;
    padding: 10px 10px;
    letter-spacing: 0.5px;
  }
}

/* ---------- DURATION PICKER (Step 0 fallback) ---------- */
.bf-duration-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 22px 0 8px;
}
.bf-duration-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px;
  border: 2px solid var(--purple-soft);
  border-radius: 14px;
  background: white;
  text-decoration: none;
  color: var(--charcoal);
  font-family: var(--font-headline);
  font-size: 19px;
  font-weight: 500;
  transition: all 0.18s ease;
}
.bf-duration-card:hover {
  border-color: var(--purple-deep);
  background: linear-gradient(135deg, #E8DFFA 0%, #FFE4F0 50%, #FFF8E7 100%);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(123, 98, 184, 0.18);
}
.bf-duration-arrow {
  font-size: 24px;
  color: var(--purple-deep);
  transition: transform 0.18s ease;
}
.bf-duration-card:hover .bf-duration-arrow {
  transform: translateX(4px);
}

/* ---------- EARLIEST-AVAILABLE SHORTCUT ---------- */
.bf-shortcut {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 18px 0 22px;
  padding: 14px 18px;
  background: linear-gradient(135deg, #FFF8E7 0%, #FFE4F0 100%);
  border-radius: 12px;
  border: 1px solid rgba(123, 98, 184, 0.18);
}
.bf-shortcut-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--purple-deep);
  color: white;
  text-decoration: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.15s ease;
}
.bf-shortcut-btn:hover {
  background: var(--charcoal);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(123, 98, 184, 0.25);
}
.bf-shortcut-icon {
  font-size: 14px;
}
.bf-shortcut-or {
  font-size: 13px;
  color: var(--charcoal-soft);
  font-style: italic;
}

/* ---------- CONFIRMATION: ADD-TO-CALENDAR ---------- */
.bf-cal-links {
  margin: 24px 0 0;
  text-align: left;
}
.bf-cal-links-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal-soft);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px;
}
.bf-cal-links-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.bf-cal-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  background: white;
  border: 1.5px solid var(--purple-soft);
  border-radius: 24px;
  text-decoration: none;
  color: var(--charcoal);
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
}
.bf-cal-link:hover {
  border-color: var(--purple-deep);
  background: linear-gradient(135deg, #E8DFFA 0%, #FFE4F0 100%);
}

/* ---------- CONFIRMATION: REMINDERS ---------- */
.bf-confirm-reminders {
  margin: 24px 0 0;
  text-align: left;
  background: #FFF9F1;
  border-radius: 12px;
  padding: 18px 22px;
}
.bf-confirm-section-title {
  font-family: var(--font-headline);
  font-size: 16px;
  margin: 0 0 10px;
  color: var(--charcoal);
}
.bf-reminders-list {
  margin: 0;
  padding-left: 18px;
}
.bf-reminders-list li {
  margin-bottom: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--charcoal);
}

/* ---------- EARLIEST-AVAILABLE: SUGGESTED SLOT (v1.10.5) ---------- */
/* When the parent clicks "Find me the earliest available time", we drop
   them on the time picker for that day with the suggested slot
   highlighted. They can confirm or change before proceeding. */
.bf-suggested-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 14px 0 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #FFF8E7 0%, #FFE4F0 100%);
  border-radius: 12px;
  border: 1px solid rgba(123, 98, 184, 0.18);
  font-size: 14px;
  line-height: 1.4;
  color: var(--charcoal);
}
.bf-suggested-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.bf-suggested-banner strong {
  color: var(--purple-deep);
  font-weight: 700;
}

.bf-time-slot-suggested {
  position: relative;
  background: linear-gradient(135deg, #E8DFFA 0%, #FFE4F0 100%) !important;
  border-color: var(--purple-deep) !important;
  box-shadow: 0 2px 8px rgba(123, 98, 184, 0.22);
}
.bf-time-slot-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  background: var(--purple-deep);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  vertical-align: middle;
}

/* ---------- BOOKING FLOW: PERSISTENT VARIANT CHIP (v1.10.6) ---------- */
/* Shown on every step when the parent clicked a chip on the family page.
   Anchors them to "Booking: Private Lesson · 30 min ($65)" so they're
   never confused about which variant they selected. */
.bf-variant-chip-wrap {
  display: flex;
  justify-content: center;
  margin: 12px 0 18px;
}
.bf-variant-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: white;
  border: 1.5px solid var(--purple-soft);
  border-radius: 999px;
  font-size: 13px;
}
.bf-variant-chip-label {
  color: var(--charcoal-soft);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 11px;
}
.bf-variant-chip-name {
  color: var(--purple-deep);
  font-weight: 700;
}

/* ---------- BOOKING FLOW: CLASS PICKER (v1.10.8) ---------- */
/* Used by Mommy & Me Pony Club. Lists upcoming class instances with
   capacity remaining. Visually distinct from the time-slot grid since
   each class has more context (instructor, capacity) per row. */
.bf-class-group {
  margin: 24px 0 20px;
}
.bf-class-group-label {
  font-family: var(--font-headline);
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal-soft);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(123, 98, 184, 0.12);
}
.bf-class-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 20px;
  margin-bottom: 8px;
  background: white;
  border: 2px solid var(--purple-soft);
  border-radius: 12px;
  text-decoration: none;
  color: var(--charcoal);
  transition: all 0.15s ease;
}
.bf-class-card:hover {
  border-color: var(--purple-deep);
  background: linear-gradient(135deg, #FFFFFF 0%, #F8F4FF 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(123, 98, 184, 0.15);
}
.bf-class-card-full {
  cursor: not-allowed;
  opacity: 0.55;
  background: #FAFAFA;
  border-color: #E8E8E8;
}
.bf-class-card-full:hover {
  transform: none;
  box-shadow: none;
}

/* ==========================================
   v1.10.62 — JOIN WAITLIST CTA (full Mommy & Me classes)
   Same visual language as the camp waitlist CTA — pink button breaks out
   of the dimmed parent card at full opacity. Different layout because
   .bf-class-card uses flexbox (not grid like .camp-card).
   ========================================== */
.bf-class-waitlist-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: white !important;
  text-decoration: none !important;
  background: var(--pink, #E87AA1);
  padding: 9px 16px;
  border-radius: 999px;
  white-space: nowrap;
  margin-left: 12px;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(232, 122, 161, 0.35);
  cursor: pointer;
  /* Pop above the parent card's dimming */
  opacity: 1;
  filter: none;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}
.bf-class-waitlist-cta:hover,
.bf-class-waitlist-cta:focus {
  background: var(--purple-deep, #5B4C9C);
  box-shadow: 0 4px 12px rgba(91, 76, 156, 0.3);
  transform: translateY(-1px);
  text-decoration: none !important;
}
@media (max-width: 480px) {
  .bf-class-card-full {
    flex-wrap: wrap;
  }
  .bf-class-waitlist-cta {
    margin-left: 0;
    margin-top: 10px;
    width: 100%;
    text-align: center;
  }
}
.bf-class-card-main {
  flex: 1;
}
.bf-class-when {
  font-family: var(--font-headline);
  font-size: 17px;
  font-weight: 500;
  color: var(--charcoal);
  margin-bottom: 2px;
}
.bf-class-instructor {
  font-size: 13px;
  color: var(--charcoal-soft);
}
.bf-class-capacity {
  flex-shrink: 0;
  text-align: right;
}
.bf-class-spots {
  font-size: 13px;
  color: var(--charcoal-soft);
  font-weight: 500;
}
.bf-class-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.bf-class-badge-full {
  background: #E8E8E8;
  color: #888;
}
.bf-class-badge-last {
  background: var(--pink);
  color: white;
}

@media (max-width: 480px) {
  .bf-class-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 14px 16px;
  }
  .bf-class-capacity {
    text-align: left;
  }
}

/* ---------- CAMP SESSION CARDS (v1.10.13) ---------- */
/* Used in two places:
   1. /pony-camp/ marketing page — sits inside the .camp-sessions sidebar
   2. /book/pony-camp/ booking flow picker — sits inside .bf-card
   Each card is a clickable link to /book/pony-camp/?type=X with the
   session's Acuity appointment type ID locked in. */
.camp-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 0;
}
.camp-card {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: white;
  border: 2px solid var(--purple-soft);
  border-radius: 12px;
  text-decoration: none;
  color: var(--charcoal);
  transition: all 0.15s ease;
  font-family: var(--font-headline);
}
.camp-card:hover {
  border-color: var(--purple-deep);
  background: linear-gradient(135deg, #FFFFFF 0%, #FFF8E7 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(123, 98, 184, 0.18);
}
.camp-card-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--charcoal);
  grid-column: 1 / 2;
  grid-row: 1;
}
.camp-card-dates {
  font-size: 13px;
  color: var(--charcoal-soft);
  grid-column: 1 / 2;
  grid-row: 2;
  font-weight: 400;
}
.camp-card-price {
  font-family: var(--font-headline);
  font-size: 17px;
  font-weight: 600;
  color: var(--purple-deep);
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
/* CTA is now a visible pill button — looks like a button on mobile
   (where users tap, no hover state to reveal interactivity), and stays
   elegant on desktop where the whole card lights up on hover. */
.camp-card-cta {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: white;
  background: var(--purple-deep);
  padding: 9px 16px;
  border-radius: 999px;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: 0 1px 4px rgba(123, 98, 184, 0.25);
}
.camp-card:hover .camp-card-cta {
  background: var(--charcoal);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  transform: translateX(2px);
}

/* When camp cards live inside the marketing page's purple sidebar,
   adapt colors so the button reads well against white card on purple bg.
   Solid borders + soft shadow so phone users immediately read the cards
   as tappable. */
.camp-sessions .camp-cards {
  margin-top: 20px;
}
.camp-sessions .camp-card {
  background: white;
  border: 2px solid rgba(123, 98, 184, 0.35);
  box-shadow: 0 2px 8px rgba(30, 14, 64, 0.18);
}
.camp-sessions .camp-card:hover {
  background: white;
  border-color: var(--pink);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  transform: translateY(-2px);
}
.camp-sessions .camp-card-cta {
  background: var(--pink);
  color: white;
  box-shadow: 0 1px 4px rgba(232, 122, 161, 0.3);
}
.camp-sessions .camp-card:hover .camp-card-cta {
  background: var(--purple-deep);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}
.camp-sessions-fallback {
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
  font-style: italic;
  margin: 16px 0 0;
}

@media (max-width: 480px) {
  .camp-card {
    grid-template-columns: 1fr auto;
    gap: 8px;
  }
  .camp-card-cta {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: right;
    margin-top: 4px;
  }
  .camp-card-price {
    grid-column: 2;
    grid-row: 1 / span 2;
  }
}

/* ---------- COUPON FLOW (v1.10.13) ---------- */
/* Always visible on step 4 of the booking flow. Validates against
   Acuity's /certificates/check endpoint. Applied coupons surface a
   discount line in the booking summary plus a confirmation chip. */
.bf-coupon {
  margin: 18px 0 6px;
  padding: 14px 16px;
  background: #FFF9F1;
  border-radius: 12px;
  border: 1px dashed rgba(123, 98, 184, 0.22);
}
.bf-coupon-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  margin-bottom: 6px;
}
.bf-coupon-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.bf-coupon-input {
  flex: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-family: var(--font-body);
}
.bf-coupon-apply {
  white-space: nowrap;
  padding: 10px 18px;
}
.bf-coupon-error {
  margin: 8px 0 0;
  color: #B22F4D;
  font-size: 13px;
  font-weight: 500;
}
.bf-coupon-applied {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--charcoal);
}
.bf-coupon-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: #2E8B57;
  color: white;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  flex-shrink: 0;
}
.bf-coupon-remove {
  margin-left: auto;
  font-size: 12px;
  color: var(--charcoal-soft);
  text-decoration: underline;
}
.bf-coupon-remove:hover {
  color: #B22F4D;
}

/* Summary discount + total rows */
.bf-summary-discount strong {
  color: #2E8B57;
  font-weight: 600;
}
.bf-summary-discount-meta {
  font-weight: 400;
  color: var(--charcoal-soft);
  font-size: 12px;
  margin-left: 4px;
}
.bf-summary-total {
  border-top: 1px solid rgba(123, 98, 184, 0.18);
  padding-top: 10px;
  margin-top: 4px;
}
.bf-summary-total strong {
  font-size: 18px;
  color: var(--purple-deep);
}

/* ---------- PATH C: Acuity handoff (v1.10.17) ---------- */
/* Step 4 ("Almost saddled up!") opens Acuity in a new tab for payment.
   Two states stacked in the same DOM, JS toggles visibility on click. */
.bf-summary-title {
  font-size: 12px;
  color: var(--charcoal-soft);
  font-weight: 500;
  margin: 18px 0 8px;
  letter-spacing: 0.04em;
}
.bf-handoff-info {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: linear-gradient(135deg, #FFF6E0 0%, #FFEDF3 100%);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--charcoal);
}
.bf-handoff-icon {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--purple-deep);
}
.bf-handoff-info strong {
  color: var(--purple-deep);
  font-weight: 600;
}

/* Waiting state — the calm "we're here when you get back" UI */
.bf-pulse-wrap {
  display: flex;
  justify-content: center;
  margin: 22px 0 8px;
}
.bf-pulse {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--purple-deep);
  position: relative;
  animation: llr-pulse 1.6s ease-in-out infinite;
}
.bf-pulse::before,
.bf-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--purple-deep);
  animation: llr-pulse-ring 1.6s ease-out infinite;
}
.bf-pulse::after {
  animation-delay: 0.5s;
}
@keyframes llr-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(0.95); }
}
@keyframes llr-pulse-ring {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.8); opacity: 0;   }
}
.bf-waiting-lead {
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: var(--charcoal);
  margin: 12px 0 18px;
}
.bf-waiting-help {
  background: var(--cream);
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.6;
}
.bf-waiting-help p {
  margin: 0 0 6px;
  color: var(--charcoal);
}
.bf-waiting-help ul {
  margin: 0;
  padding-left: 18px;
  color: var(--charcoal);
}
.bf-waiting-help li {
  margin: 3px 0;
}

/* ========================================================================
 * GIFT CARDS CALLOUT on Lessons & Pricing page (v1.10.44)
 * Full-width card stretching across the lessons-grid container, sitting
 * below the lesson cards. Visually distinct from the lesson cards (gradient
 * background, gift icon) so it reads as a separate offer category.
 * ======================================================================== */
.lessons-gift-callout {
  display: block;
  margin-top: 48px;
  padding: 36px 40px;
  background: linear-gradient(135deg, var(--purple-soft) 0%, var(--pink-soft) 50%, var(--blue-soft) 100%);
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  box-shadow: 0 6px 20px rgba(123, 98, 184, 0.08);
}
.lessons-gift-callout:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 32px rgba(123, 98, 184, 0.18);
}
.lessons-gift-callout-inner {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
}
.lessons-gift-callout-icon {
  font-size: 56px;
  line-height: 1;
  flex-shrink: 0;
}
.lessons-gift-callout-text {
  flex: 1;
  min-width: 260px;
}
.lessons-gift-callout-eyebrow {
  font-family: 'Caveat', cursive;
  font-size: 22px;
  color: var(--pink);
  margin-bottom: 4px;
}
.lessons-gift-callout-title {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  color: var(--charcoal);
  margin: 0 0 8px;
  line-height: 1.2;
  font-weight: 600;
}
.lessons-gift-callout-title .script {
  font-family: 'Caveat', cursive;
  font-weight: 400;
  color: var(--purple-deep);
}
.lessons-gift-callout-body {
  font-size: 16px;
  color: var(--charcoal-soft);
  line-height: 1.55;
  margin: 0;
}
.lessons-gift-callout-cta {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  color: var(--purple-deep);
  font-weight: 600;
  letter-spacing: 0.02em;
  background: rgba(255, 255, 255, 0.7);
  padding: 14px 24px;
  border-radius: 10px;
  flex-shrink: 0;
  transition: background 0.2s ease, transform 0.2s ease;
}
.lessons-gift-callout:hover .lessons-gift-callout-cta {
  background: var(--purple-deep);
  color: #FFFFFF;
  transform: translateX(4px);
}
@media (max-width: 720px) {
  .lessons-gift-callout { padding: 28px 24px; }
  .lessons-gift-callout-inner { gap: 18px; }
  .lessons-gift-callout-icon { font-size: 44px; }
  .lessons-gift-callout-title { font-size: 24px; }
  .lessons-gift-callout-cta {
    width: 100%;
    text-align: center;
    margin-top: 8px;
  }
}

/* ========================================================================
 * CAMP CARD CAPACITY BADGES (v1.10.46)
 * Mirrors the bf-class-badge family but scoped to camp-card layout.
 * Three states: FULL (gray, non-clickable), Last spot! (pink), and a
 * neutral "X of Y booked" count for everything else.
 * ======================================================================== */
.camp-card-capacity {
  margin-top: 6px;
  margin-bottom: 6px;
}
.camp-card-spots {
  font-size: 13px;
  color: var(--charcoal-soft);
  font-weight: 500;
}
.camp-card-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.camp-card-badge-full {
  background: #E8E8E8;
  color: #888;
}
.camp-card-badge-last {
  background: var(--pink);
  color: white;
}

/* Full-state camp card: visually disabled, non-clickable. We render the
 * card as a div instead of an anchor so click is naturally inert; this
 * just makes the styling match. */
.camp-card.camp-card-full {
  opacity: 0.6;
  cursor: not-allowed;
  filter: grayscale(0.4);
}
.camp-card.camp-card-full:hover {
  /* Override the hover lift from the base .camp-card rule */
  transform: none;
  box-shadow: none;
}

/* ==========================================
   v1.10.61 — JOIN WAITLIST CTA (full camp sessions only)
   The full card is dimmed and non-clickable, but the waitlist mailto button
   inside breaks out at full opacity so parents see it's actionable. Pink
   matches the brand and visually distinguishes from the deep-purple Reserve
   button on bookable cards.
   ========================================== */
.camp-card-waitlist-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: white !important; /* override any inherited link color */
  text-decoration: none !important;
  background: var(--pink, #E87AA1);
  padding: 9px 16px;
  border-radius: 999px;
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  white-space: nowrap;
  transition: all 0.15s ease;
  box-shadow: 0 2px 6px rgba(232, 122, 161, 0.35);
  cursor: pointer; /* override the not-allowed from parent .camp-card-full */
  /* Pop above the parent's dimming */
  opacity: 1;
  filter: none;
  position: relative;
  z-index: 1;
}
.camp-card-waitlist-cta:hover,
.camp-card-waitlist-cta:focus {
  background: var(--purple-deep, #5B4C9C);
  box-shadow: 0 4px 12px rgba(91, 76, 156, 0.3);
  transform: translateY(-1px);
  text-decoration: none !important;
}
/* In the marketing-page sidebar (purple background), keep the pink for
   contrast against white cards — same reason camp-card-cta gets pink there */
.camp-sessions .camp-card-waitlist-cta {
  background: var(--pink, #E87AA1);
}
.camp-sessions .camp-card-waitlist-cta:hover {
  background: var(--purple-deep, #5B4C9C);
}

@media (max-width: 480px) {
  .camp-card-waitlist-cta {
    grid-column: 1 / -1;
    grid-row: 3;
    text-align: center;
    margin-top: 4px;
  }
}

/* ============================================================================
   v1.11.0 — MULTI-BOOKING PAGE
   Calendar grid + cart sidebar + recurring suggestions + slot timeslots.
   Mounted on /book-multiple/{slug}/ — see page-book-multiple.php.
   ============================================================================ */

.page-hero-compact {
  padding: 40px 20px 24px;
}
.page-hero-compact h1 {
  font-size: 36px;
  margin-bottom: 8px;
}
.page-hero-compact .page-hero-intro {
  font-size: 15px;
  margin-top: 8px;
}

/* Layout grid: main content + sticky sidebar */
.multibook-layout {
  max-width: 1280px;
  margin: 0 auto;
  padding: 24px 20px 60px;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 32px;
  align-items: start;
}
.multibook-loading {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 20px;
  color: var(--charcoal, #3D3450);
}
.multibook-noscript-fallback {
  grid-column: 1 / -1;
  background: #FFF9F1;
  border-left: 4px solid var(--purple, #7B62B8);
  padding: 24px;
  border-radius: 8px;
}
.multibook-loaded .multibook-loading,
.multibook-loaded .multibook-noscript-fallback {
  display: none;
}

@media (max-width: 1100px) {
  .multibook-layout {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 16px 12px 80px;
  }
}

/* ===== Main column ===== */
.multibook-main {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ===== Rider picker (v1.13.10, Phase B2.1) =====
   Sits at the top of the multibook main column above the lesson type
   chips. Multi-select tap-to-toggle. Renders as a card with a soft
   off-white background so it reads as a discrete "who is this for"
   step distinct from the lesson type and calendar.
   Behavior is decorative in B2.1; selection wires into add-to-cart in
   B2.2 and Acuity bundling in B2.3. */
.multibook-rider-picker {
  background: var(--cream);
  border: 1px solid rgba(123, 98, 184, 0.12);
  border-radius: 16px;
  padding: 18px 20px 20px;
}
.multibook-rider-picker-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.multibook-rider-picker-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--charcoal-soft);
}
.multibook-rider-picker-counter {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  color: var(--purple-deep);
}
/* v1.13.11 — Counter turns muted when selection doesn't satisfy the
   current variant's rider mode (e.g., "0 of 2 selected" for a pair
   lesson). The validation nudge below the tiles carries the actionable
   message; this is just a quiet visual hint. */
.multibook-rider-picker-counter.is-invalid {
  color: var(--charcoal-soft);
}

/* v1.13.11 — Validation nudge under the tile grid. Pink soft pill
   matching LLR's brand pinks but with enough weight to be noticed
   without alarming. Hidden when selection is valid. */
.multibook-rider-picker-nudge {
  margin-top: 14px;
  padding: 10px 14px;
  background: rgba(232, 122, 161, 0.10);
  border-radius: 10px;
  font-size: 13px;
  color: var(--pink-deep, #B85B7E);
  text-align: center;
  font-weight: 500;
}
.multibook-rider-picker-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  /* v1.13.22 (Polish P5) — Constrain max-width so 2-rider families don't
     get a sparse, unfinished-looking row that spans the full container.
     380px fits 4 tiles (76px min-width × 4 + 12px gap × 3 = ~344px) with
     breathing room; 2 tiles wrap tightly and read as a complete unit.
     5+ tiles wrap naturally onto multiple rows. */
  max-width: 380px;
  margin: 0 auto;
}

/* Individual rider tile — column flex with avatar, name, age */
.multibook-rider-tile {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 6px 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 76px;
  border-radius: 12px;
  transition: background 0.15s ease, transform 0.12s ease;
}
.multibook-rider-tile:hover {
  background: rgba(123, 98, 184, 0.06);
}
.multibook-rider-tile:active {
  transform: scale(0.97);
}

/* Avatar circle — v1.13.24 (Polish P6, third pass).
   Each rider gets a hash-derived color class (c0/c1/c2/c3) that maps
   to one of 4 LLR brand colors. Same algorithm runs PHP-side in
   page-family.php so the same rider gets the same color on both the
   booking picker AND the family-page rider filter chips — visual
   continuity across surfaces. Selected state uses outline + check
   badge so the rider's signature color stays visible. */
.multibook-rider-avatar {
  position: relative;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif, Georgia), serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.5px;
  background: var(--purple-deep, #7B62B8); /* fallback if class missing */
  color: #fff;
  outline: 2px dashed transparent;
  outline-offset: 3px;
  transition: outline-color 0.15s ease, transform 0.12s ease;
}
/* Per-rider color classes — shared with .rider-filter-av-c* below */
.multibook-rider-avatar-c0 { background: var(--purple-deep, #7B62B8); color: #fff; }
.multibook-rider-avatar-c1 { background: var(--pink, #F4A3B8);       color: #fff; }
.multibook-rider-avatar-c2 { background: var(--blue, #9FC5E8);       color: #fff; }
.multibook-rider-avatar-c3 { background: var(--purple, #A594D1);     color: #fff; }

.multibook-rider-tile:hover .multibook-rider-avatar {
  transform: scale(1.05);
}
.multibook-rider-tile.is-selected .multibook-rider-avatar {
  /* Selection signal: thicker brand-purple ring + check badge. Avatar
     background stays the rider's signature color so identity is
     preserved across selected/unselected. */
  outline: 3px solid var(--purple-deep);
  outline-offset: 3px;
  box-shadow: 0 4px 10px rgba(123, 98, 184, 0.2);
}
/* Unselected dashed outline shows the tile is tappable */
.multibook-rider-tile:not(.is-selected) .multibook-rider-avatar {
  outline-color: rgba(123, 98, 184, 0.35);
}

/* Check badge — small circular checkmark on the upper right of the
   avatar, visible only when selected (we only render it in the DOM
   when selected, so no display:none needed). */
.multibook-rider-avatar-check {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--purple-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  border: 2px solid var(--cream);
}

.multibook-rider-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal);
  line-height: 1.2;
  max-width: 80px;
  text-align: center;
  word-break: break-word;
}
.multibook-rider-age {
  font-size: 11px;
  color: var(--charcoal-soft);
  line-height: 1;
  min-height: 11px; /* reserve space so tiles stay aligned when age is blank */
}

/* Tablet / mobile — shrink avatars a touch so larger groups (Girl
   Scout troop scenario) still wrap neatly without breaking out of the
   container. Tile gap also tightened. */
@media (max-width: 720px) {
  .multibook-rider-picker {
    padding: 14px 14px 16px;
  }
  .multibook-rider-picker-tiles {
    gap: 8px;
  }
  .multibook-rider-tile {
    min-width: 64px;
    padding: 6px 4px 4px;
  }
  .multibook-rider-avatar {
    width: 48px;
    height: 48px;
    font-size: 17px;
  }
  .multibook-rider-avatar-check {
    width: 18px;
    height: 18px;
    font-size: 11px;
    top: -3px;
    right: -3px;
  }
  .multibook-rider-name { font-size: 12px; }
}

/* ===== Controls (variant + instructor pickers) ===== */
.multibook-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 8px 0 4px;
  /* No card / border — chip cards already have their own visual weight,
     nesting them inside another card made the section feel plopped. */
  background: transparent;
  border: none;
}
.multibook-control {
  flex: 1;
  min-width: 220px;
  text-align: center;
}
.multibook-control-label {
  display: block;
  font-family: var(--font-headline, 'Fraunces', serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--charcoal, #3D3450);
  margin-bottom: 14px;
}
.multibook-variant-picker,
.multibook-instructor-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.multibook-variant-btn,
.multibook-instructor-btn {
  background: white;
  border: 1.5px solid var(--purple-soft);
  color: var(--charcoal, #3D3450);
  padding: 14px 22px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(123, 98, 184, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
  text-align: center;
  min-width: 140px;
}
.multibook-variant-btn:hover,
.multibook-instructor-btn:hover {
  transform: translateY(-2px);
  border-color: var(--purple, #7B62B8);
  box-shadow: 0 8px 22px rgba(123, 98, 184, 0.16);
}
.multibook-variant-btn.is-selected,
.multibook-instructor-btn.is-selected {
  background: var(--purple, #7B62B8);
  border-color: var(--purple, #7B62B8);
  color: white;
  box-shadow: 0 6px 18px rgba(123, 98, 184, 0.28);
}
.multibook-variant-btn.is-selected:hover,
.multibook-instructor-btn.is-selected:hover {
  background: var(--purple-deep, #5B4C9C);
  border-color: var(--purple-deep, #5B4C9C);
}
/* v1.13.12 (Phase B2.2 polish) — Disabled variant chip when the
   parent's rider selection doesn't fit this lesson type. Greyed
   text + muted border, no hover lift. Tap still works but pops a
   hint instead of switching. */
.multibook-variant-btn.is-disabled {
  opacity: 0.42;
  cursor: help; /* signals "info" rather than "no" — tapping reveals why */
  background: transparent;
  color: var(--charcoal-soft, #6B6360);
  border-color: rgba(123, 98, 184, 0.18);
}
.multibook-variant-btn.is-disabled:hover {
  /* No lift, no color change — feels inert */
  background: transparent;
  border-color: rgba(123, 98, 184, 0.18);
  color: var(--charcoal-soft, #6B6360);
  transform: none;
  box-shadow: none;
}
@media (max-width: 600px) {
  .multibook-variant-picker,
  .multibook-instructor-picker {
    gap: 10px;
    justify-content: center;
  }
  .multibook-variant-btn,
  .multibook-instructor-btn {
    padding: 12px 18px;
    font-size: 14px;
    min-width: 0;
    flex: 1 1 calc(50% - 10px);
  }
}

/* ===== Calendar ===== */
.multibook-calendar {
  background: white;
  border: 1px solid rgba(123, 98, 184, 0.2);
  border-radius: 12px;
  padding: 18px 20px;
}
.multibook-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 12px;
}
.multibook-calendar-range {
  font-weight: 600;
  font-size: 16px;
  color: var(--charcoal, #3D3450);
}
.multibook-nav-btn {
  background: transparent;
  border: 1.5px solid rgba(123, 98, 184, 0.3);
  color: var(--purple-deep, #5B4C9C);
  padding: 6px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.multibook-nav-btn:hover {
  background: #F4F0FA;
  border-color: var(--purple, #7B62B8);
}
.multibook-calendar-day-labels {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 6px;
}
.multibook-calendar-day-label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: rgba(61, 52, 80, 0.5);
  letter-spacing: 0.05em;
}
.multibook-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
/* v1.13.22 (Polish P4) — Calendar UX aligned to .bf-cal (single-booking
   reference pattern Matt prefers). Unavailable days gray-out clearly,
   available days read as actionable with white + purple-soft border
   and purple-deep text. Hover blooms into the same gradient flourish
   used on single-booking. Selected + cart-item overlays preserved. */
.multibook-calendar-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  background: #f7f5fa;
  border: 1.5px solid transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--charcoal-soft, #5F5E5A);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.multibook-calendar-cell:hover:not(:disabled):not(.is-past):not(.is-unavailable) {
  background: #ECE5F8;
  border-color: var(--purple, #7B62B8);
}
.multibook-calendar-cell.is-past {
  color: rgba(95, 94, 90, 0.4);
  cursor: default;
  background: transparent;
}
/* Days within the visible month but with no availability — clearly
   distinguishable as "not bookable" without being mistaken for past
   (which fades out completely). */
.multibook-calendar-cell.is-unavailable {
  background: #f4f2f7;
  color: rgba(95, 94, 90, 0.55);
  cursor: not-allowed;
}

/* v2.2.11 — Loading state for calendar cells. Shown while the month's
   availability is being fetched after a variant chip switch (the
   primary lag window). Subtle pulse + skeleton-tinted background tells
   the parent "data on its way" rather than the misread "no dates
   available" they'd get from is-unavailable styling. Once the fetch
   resolves the cell either flips to is-available or is-unavailable. */
.multibook-calendar-cell.is-loading {
  background: linear-gradient(90deg, #f4f2f7 0%, #ece6f5 50%, #f4f2f7 100%);
  background-size: 200% 100%;
  animation: llr-skeleton-pulse 1.4s ease-in-out infinite;
  color: rgba(95, 94, 90, 0.35);
  cursor: progress;
  border: 2px solid transparent;
}
@keyframes llr-skeleton-pulse {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Available days — white card with purple-soft border, purple-deep
   text, bolder weight. Reads as the clear actionable affordance. */
.multibook-calendar-cell.is-available {
  background: white;
  border: 2px solid var(--purple-soft, #E8DFFA);
  color: var(--purple-deep, #5B4C9C);
  font-weight: 600;
}
.multibook-calendar-cell.is-available:hover:not(:disabled):not(.is-past) {
  background: linear-gradient(135deg, #E8DFFA 0%, #FFE4F0 50%, #FFF8E7 100%);
  border-color: var(--purple-deep, #5B4C9C);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(123, 98, 184, 0.15);
}
.multibook-calendar-cell.is-selected {
  background: var(--purple, #7B62B8);
  border-color: var(--purple, #7B62B8);
  color: white;
  font-weight: 700;
}
.multibook-calendar-cell.has-cart-item {
  border-color: var(--pink, #E87AA1);
  border-width: 2px;
}
.multibook-calendar-cell.has-cart-item.is-selected {
  border-color: white;
}
.multibook-calendar-cell-day {
  font-size: 14px;
}
.multibook-calendar-cell-dot {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--pink, #E87AA1);
}
.multibook-calendar-cell.is-selected .multibook-calendar-cell-dot {
  background: white;
}

/* ===== Time slots panel ===== */
.multibook-timeslots {
  background: white;
  border: 1px solid rgba(123, 98, 184, 0.2);
  border-radius: 12px;
  padding: 18px 20px;
  min-height: 120px;
  /* v1.13.27 — scroll-margin-top so auto-scroll on date pick lands the
     header cleanly below the sticky site nav (which dynamically sets
     --llr-header-bottom in JS). Fallback 100px covers first paint. */
  scroll-margin-top: calc(var(--llr-header-bottom, 100px) + 16px);
}
.multibook-timeslots-header {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 700;
  color: var(--charcoal, #3D3450);
}
.multibook-empty-prompt {
  margin: 0;
  color: rgba(61, 52, 80, 0.5);
  text-align: center;
  font-size: 14px;
  padding: 20px 0;
}
.multibook-loading-text {
  margin: 0;
  color: var(--purple-deep, #5B4C9C);
  text-align: center;
  font-size: 14px;
  padding: 20px 0;
}
.multibook-error {
  background: #FCE8E8;
  border-left: 3px solid #D63638;
  padding: 12px 14px;
  border-radius: 6px;
  color: #8A1F1F;
  font-size: 14px;
}
.multibook-time-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
}

/* v2.2.11 — Time-slot skeleton pills shown while fetching availability
   for a tapped date. Same dimensions and grid layout as a real time
   button so the calendar→times transition reads as one continuous UI
   instead of a flash to "Loading…" text and back. Pulse animation
   matches the calendar cell skeleton above. */
.multibook-time-grid--skeleton .multibook-time-skeleton {
  height: 46px; /* matches .multibook-time-btn with padding + 2 lines */
  border-radius: 8px;
  background: linear-gradient(90deg, #f4f0fa 0%, #ede5f7 50%, #f4f0fa 100%);
  background-size: 200% 100%;
  animation: llr-skeleton-pulse 1.4s ease-in-out infinite;
}
.multibook-time-btn {
  background: white;
  border: 1.5px solid rgba(123, 98, 184, 0.3);
  color: var(--charcoal, #3D3450);
  padding: 10px 12px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.multibook-time-btn:hover {
  background: #F4F0FA;
  border-color: var(--purple, #7B62B8);
}
.multibook-time-btn.is-in-cart {
  background: #FCE4EB;
  border-color: var(--pink, #E87AA1);
  color: var(--purple-deep, #5B4C9C);
}
.multibook-time-btn.is-in-cart:hover {
  background: #F8D0DC;
}
.multibook-time-check {
  font-size: 11px;
  font-weight: 600;
  color: var(--pink, #E87AA1);
}

/* v2.3.14 — Seats-remaining indicator on multi-capacity slots
   (Mommy & Me, Side-by-Side, camps). Suppressed for Privates where
   the count is always 1-of-1 and would be visually noisy. Three
   states:
     - default: small purple, neutral
     - is-last (1 left): pink, urgent
     - is-full: gray, faded — paired with disabled button state */
.multibook-time-seats {
  font-size: 11px;
  font-weight: 600;
  color: var(--purple, #7B62B8);
  letter-spacing: 0.2px;
  opacity: 0.85;
}
.multibook-time-seats.is-last {
  color: var(--pink, #E87AA1);
  opacity: 1;
}
.multibook-time-seats.is-full {
  color: #9B95A8;
  opacity: 1;
}
.multibook-time-btn.is-disabled {
  cursor: not-allowed;
  background: #F4F2F7;
  border-color: rgba(123, 98, 184, 0.15);
  color: #9B95A8;
}
.multibook-time-btn.is-disabled:hover {
  background: #F4F2F7;
  border-color: rgba(123, 98, 184, 0.15);
}

/* ===== Camp session card (v1.13.49) =====
   Replaces calendar+time pickers when a camp variant is selected.
   Single session detail card with date range, duration, price,
   and a big "Add to cart" button. Uses the purple-pink brand
   gradient to feel celebratory rather than utilitarian.

   v1.13.50 — Now appears AFTER the session picker (below). Camps
   collapse to one chip in the variant row, then a session picker
   shows all available sessions, then this detail card renders
   for the picked session. */

/* Session picker shown when a camp variant is selected */
.multibook-camp-session-picker {
  background: white;
  border: 1px solid rgba(123, 98, 184, 0.2);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 12px;
}
.multibook-camp-picker-header {
  margin: 0 0 14px;
  font-size: 18px;
  font-weight: 700;
  color: var(--charcoal, #3D3450);
}
.multibook-camp-session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.multibook-camp-session-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 12px 14px;
  background: white;
  border: 2px solid rgba(123, 98, 184, 0.25);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.1s ease;
  text-align: left;
  font-family: inherit;
}
.multibook-camp-session-btn:hover:not(:disabled) {
  border-color: var(--purple, #7B62B8);
  background: #FAF7FE;
  transform: translateY(-1px);
}
.multibook-camp-session-btn.is-selected {
  border-color: var(--purple, #7B62B8);
  background: var(--purple, #7B62B8);
  color: white;
}
.multibook-camp-session-btn.is-selected:hover {
  background: var(--purple-deep, #5B4C9C);
}
.multibook-camp-session-label {
  font-size: 14px;
  font-weight: 600;
  color: inherit;
}
.multibook-camp-session-badge {
  font-size: 12px;
  font-weight: 500;
  color: rgba(61, 52, 80, 0.65);
}
.multibook-camp-session-btn.is-selected .multibook-camp-session-badge {
  color: rgba(255, 255, 255, 0.85);
}
.multibook-camp-session-btn.is-low .multibook-camp-session-badge {
  color: var(--pink, #E87AA1);
  font-weight: 600;
}
.multibook-camp-session-btn.is-full,
.multibook-camp-session-btn.is-unavailable {
  cursor: not-allowed;
  opacity: 0.5;
  background: #F5F3F8;
  border-color: rgba(123, 98, 184, 0.15);
}
.multibook-camp-session-btn.is-full .multibook-camp-session-badge,
.multibook-camp-session-btn.is-unavailable .multibook-camp-session-badge {
  color: rgba(61, 52, 80, 0.4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}

/* Detail card (shown after a session is picked) */
.multibook-camp-card {
  background: linear-gradient(135deg, #FCE4EB 0%, #F4F0FA 100%);
  border: 1px solid rgba(123, 98, 184, 0.3);
}
.multibook-camp-card-header {
  margin-bottom: 14px;
}
.multibook-camp-badge {
  display: inline-block;
  background: var(--purple, #7B62B8);
  color: white;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 12px;
  margin-bottom: 10px;
}
.multibook-camp-title {
  margin: 0 0 8px;
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 600;
  color: var(--charcoal, #3D3450);
  line-height: 1.2;
}
.multibook-camp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
}
.multibook-camp-date {
  font-size: 14px;
  color: rgba(61, 52, 80, 0.75);
}
.multibook-camp-price {
  font-size: 18px;
  font-weight: 700;
  color: var(--purple-deep, #5B4C9C);
}
.multibook-camp-slots {
  font-size: 13px;
  font-weight: 600;
  color: var(--pink, #E87AA1);
  background: rgba(244, 163, 184, 0.15);
  padding: 2px 10px;
  border-radius: 10px;
}
.multibook-camp-helper {
  margin: 0 0 18px;
  font-size: 14px;
  color: rgba(61, 52, 80, 0.7);
  font-style: italic;
}
.multibook-camp-add-btn {
  width: 100%;
  padding: 14px 20px;
  background: var(--purple, #7B62B8);
  color: white;
  border: none;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.1s ease;
}
.multibook-camp-add-btn:hover:not(:disabled) {
  background: var(--purple-deep, #5B4C9C);
  transform: translateY(-1px);
}
.multibook-camp-add-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.multibook-camp-add-btn.is-added {
  background: var(--pink, #E87AA1);
}
.multibook-camp-add-btn.is-added:hover:not(:disabled) {
  background: #D86291;
}

/* ===== Recurring suggestion strip ===== */
.multibook-recurring {
  background: linear-gradient(135deg, #FCE4EB 0%, #F4F0FA 100%);
  border: 1px solid rgba(232, 122, 161, 0.3);
  border-radius: 12px;
  padding: 18px 20px;
}
.multibook-recurring-header {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--purple-deep, #5B4C9C);
}
.multibook-recurring-sub {
  margin: 0 0 14px;
  font-size: 14px;
  color: var(--charcoal, #3D3450);
}
.multibook-recurring-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.multibook-recurring-btn {
  background: white;
  border: 1.5px solid var(--pink, #E87AA1);
  color: var(--purple-deep, #5B4C9C);
  padding: 10px 16px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
}
.multibook-recurring-btn:hover {
  background: var(--pink, #E87AA1);
  color: white;
  transform: translateY(-1px);
}
.multibook-recurring-btn-weeks {
  font-size: 14px;
  font-weight: 700;
}
.multibook-recurring-btn-price {
  font-size: 12px;
  font-weight: 500;
  opacity: 0.8;
}
.multibook-recurring-note {
  margin: 0;
  color: rgba(61, 52, 80, 0.6);
  font-size: 13px;
  font-style: italic;
}

/* ===== Cart sidebar ===== */
.multibook-cart-sidebar {
  /* v1.13.24 (Polish P1, real fix) — Anchor to the dynamically measured
     header bottom (set by JS in multi-booking.js → measureSiteHeader).
     This handles: WP admin bar pushing the header down 32-46px when
     logged in, .site-header.is-scrolled padding changes, responsive
     header sizes, and any third-party announcement bar that shifts the
     header. Static fallback of 100px covers first-paint before JS
     runs.
     v1.13.28 — Same value applied as scroll-margin-top so the floating
     pill's scrollIntoView() lands the cart title cleanly below the
     sticky site header instead of tucking it behind. */
  position: sticky;
  top: calc(var(--llr-header-bottom, 100px) + 16px);
  scroll-margin-top: calc(var(--llr-header-bottom, 100px) + 16px);
  align-self: start;
  max-height: calc(100vh - var(--llr-header-bottom, 100px) - 32px);
  display: flex;
  flex-direction: column;
}
.multibook-cart {
  display: flex;
  flex-direction: column;
  min-height: 0; /* allow flex children to overflow inside us */
  flex: 1 1 auto;
  background: white;
  border: 1px solid rgba(123, 98, 184, 0.2);
  border-radius: 12px;
  overflow: hidden;
}
.multibook-cart-header {
  background: linear-gradient(135deg, var(--purple, #7B62B8) 0%, var(--purple-deep, #5B4C9C) 100%);
  color: white;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.multibook-cart-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: white; /* h3 has a global charcoal color rule that overrides parent
                   inheritance — explicit white needed here. */
}
.multibook-cart-count {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 10px;
  border-radius: 999px;
}
.multibook-cart-empty {
  margin: 0;
  padding: 32px 20px;
  text-align: center;
  color: rgba(61, 52, 80, 0.5);
  font-size: 14px;
}
.multibook-cart-list {
  margin: 0;
  padding: 0;
  list-style: none;
  /* v1.13.22 (Polish P1) — Let the list flex-shrink inside the capped
     sidebar. min-height:0 allows it to be smaller than its natural
     content (otherwise flex children won't shrink below content size,
     and the footer would push out of view). Caps at 60vh as a safety
     so an extremely tall cart on a desktop doesn't dominate the page;
     the parent .multibook-cart-sidebar cap kicks in below that on
     normal viewports. */
  flex: 1 1 auto;
  min-height: 0;
  max-height: 60vh;
  overflow-y: auto;
}
.multibook-cart-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(123, 98, 184, 0.1);
}
.multibook-cart-item:last-child {
  border-bottom: none;
}
.multibook-cart-item-info {
  flex: 1;
  min-width: 0;
}
.multibook-cart-item-date {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal, #3D3450);
}
.multibook-cart-item-time {
  font-size: 12px;
  color: rgba(61, 52, 80, 0.6);
}
/* v1.13.11 (Phase B2.2) — Rider name line under the date/time. Reads
   as "Aurora G." for solo/multi lines, "Aurora G. + Cora G." for
   pair-mode bundled lines. Purple tint so it visually pairs with the
   price (same brand color) without competing with the date line for
   primary attention. */
.multibook-cart-item-rider {
  font-size: 12px;
  color: var(--purple-deep, #5B4C9C);
  font-weight: 500;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Pair-mode lines get a subtle left accent so parents can tell at a
   glance which lines bundle two riders. Avoids any text label like
   "(2 riders)" since the rider names line already conveys that. */
.multibook-cart-item.is-pair {
  border-left: 3px solid rgba(184, 155, 217, 0.55);
  padding-left: 15px; /* compensates for the 3px border so content stays aligned */
}
.multibook-cart-item-price {
  font-size: 14px;
  font-weight: 600;
  color: var(--purple-deep, #5B4C9C);
}
.multibook-cart-remove {
  background: transparent;
  border: none;
  color: rgba(61, 52, 80, 0.4);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  padding: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.12s ease, color 0.12s ease;
}
.multibook-cart-remove:hover {
  background: #FCE8E8;
  color: #D63638;
}
.multibook-cart-footer {
  padding: 16px 18px;
  border-top: 1px solid rgba(123, 98, 184, 0.15);
  background: #FAFAFC;
}
.multibook-cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.multibook-cart-total-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(61, 52, 80, 0.7);
}
.multibook-cart-total-amount {
  font-size: 22px;
  font-weight: 700;
  color: var(--purple-deep, #5B4C9C);
}

/* v1.13.58 — Camp deposit split. Subtle "today / later" callout below the
   cart Total so the parent knows the smaller Stripe charge isn't a mistake.
   v1.13.59 — Now hosts the Deposit/Full segmented toggle. */
.multibook-cart-deposit {
  background: var(--purple-soft, #E8DFFA);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 12px;
  font-size: 13px;
  color: var(--charcoal, #3D3450);
}
.multibook-cart-deposit-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(61, 52, 80, 0.6);
  margin-bottom: 6px;
}
.multibook-cart-deposit-toggle {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 8px;
}
.multibook-cart-deposit-option {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  color: var(--purple-deep, #5B4C9C);
}
.multibook-cart-deposit-option .opt-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.75;
}
.multibook-cart-deposit-option .opt-amount {
  font-size: 15px;
  font-weight: 700;
}
.multibook-cart-deposit-option:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.85);
}
.multibook-cart-deposit-option.is-active {
  background: var(--purple, #7B62B8);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(91, 76, 156, 0.25);
}
.multibook-cart-deposit-option.is-active .opt-name {
  opacity: 0.85;
}
.multibook-cart-deposit-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
}
.multibook-cart-deposit-row strong {
  color: var(--purple-deep, #5B4C9C);
  font-size: 15px;
}
.multibook-cart-deposit-balance {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding-top: 6px;
  font-size: 12px;
  color: rgba(61, 52, 80, 0.7);
}
.multibook-cart-deposit-balance span:last-child {
  font-weight: 600;
}
.multibook-cart-deposit-balance-paid {
  font-style: italic;
  color: var(--purple-deep, #5B4C9C);
}

/* v2.3.38 — Pay-as-you-go choice (mirrors the deposit toggle styling) */
.multibook-cart-payg {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(123, 98, 184, 0.18);
}
.multibook-cart-payg-toggle {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  padding: 4px;
  margin-bottom: 8px;
}
.multibook-cart-payg-option {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  padding: 8px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  color: var(--purple-deep, #5B4C9C);
}
.multibook-cart-payg-option .opt-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.75;
}
.multibook-cart-payg-option .opt-amount {
  font-size: 15px;
  font-weight: 700;
}
.multibook-cart-payg-option .opt-save {
  font-size: 10px;
  font-weight: 700;
  color: #1B7A4B;
  background: #E6F7EE;
  border-radius: 999px;
  padding: 1px 7px;
  margin-top: 2px;
}
.multibook-cart-payg-option:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.85);
}
.multibook-cart-payg-option.is-active {
  background: var(--purple, #7B62B8);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(91, 76, 156, 0.25);
}
.multibook-cart-payg-option.is-active .opt-name { opacity: 0.85; }
.multibook-cart-payg-option.is-active .opt-save { background: rgba(255,255,255,0.9); }
.multibook-cart-payg-schedule {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.payg-sched-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  padding: 3px 0;
  color: rgba(61, 52, 80, 0.85);
}
.payg-sched-row.payg-sched-first {
  font-weight: 700;
  color: var(--purple-deep, #5B4C9C);
}
.payg-sched-note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(61, 52, 80, 0.65);
}
.multibook-cart-timer {
  font-size: 12px;
  color: rgba(61, 52, 80, 0.6);
  text-align: center;
  margin-bottom: 12px;
  min-height: 14px;
}
.multibook-timer-value {
  font-weight: 700;
  color: var(--purple, #7B62B8);
  font-variant-numeric: tabular-nums;
}
.multibook-timer-expired {
  color: #D63638;
  font-weight: 600;
}
.multibook-cart-checkout {
  width: 100%;
  background: var(--purple, #7B62B8);
  color: white;
  border: none;
  padding: 12px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
.multibook-cart-checkout:hover {
  background: var(--purple-deep, #5B4C9C);
  transform: translateY(-1px);
}
.multibook-cart-checkout-note {
  margin: 6px 0 0;
  font-size: 11px;
  text-align: center;
  color: rgba(61, 52, 80, 0.5);
  font-style: italic;
}

/* Mobile + intermediate: cart drops out of the desktop sticky-sidebar
   treatment and flows naturally below the main content. We do NOT use a
   fixed-position bottom sheet — that floated over content unpredictably and
   tended to overlap selectors. Document order in render() puts main first
   and sidebar second, so on a single-column grid the cart appears below the
   calendar / time-slot pickers, which is what parents expect. */
@media (max-width: 1100px) {
  .multibook-cart-sidebar {
    position: static;
    top: auto;
    box-shadow: none;
  }
  .multibook-cart {
    border-radius: 12px;
    border: 1px solid rgba(123, 98, 184, 0.2);
  }
  .multibook-cart-list {
    max-height: 320px;
  }
}

/* Hide leftover scroll-to-top buttons from Beaver Builder / UABB / WPFront
   plugins that came over during Hostinger Publish. The proper fix is
   deactivating those plugins (already on the post-launch cleanup list) —
   this is just a visual band-aid. Selectors cover common implementations. */
#wpfront-scroll-top-container,
.fl-scroll-to-top,
#fl-scroll-to-top,
.uabb-back-to-top,
#uabb-back-to-top,
.scroll-top-wrap,
.back-to-top,
#back-to-top,
.scrollup,
#scrollup {
  display: none !important;
}

/* ===== "Book multiple" CTA in single-booking flow ===== */
.bf-multibook-cta {
  margin: 18px 0 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.bf-multibook-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--purple-deep, #5B4C9C);
  color: var(--white, #ffffff) !important;
  padding: 14px 30px;
  border-radius: 30px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(123, 98, 184, 0.30);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.bf-multibook-cta-link:hover {
  background: var(--charcoal, #3D3450);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(123, 98, 184, 0.40);
  color: var(--white, #ffffff) !important;
}
.bf-multibook-cta-icon {
  font-size: 18px;
  line-height: 1;
}
.bf-multibook-cta-label {
  font-weight: 700;
}
.bf-multibook-cta-arrow {
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}
.bf-multibook-cta-sub {
  margin: 0;
  font-size: 13px;
  color: rgba(61, 52, 80, 0.65);
  text-align: center;
}
@media (max-width: 600px) {
  .bf-multibook-cta-link {
    padding: 13px 22px;
    font-size: 13px;
  }
}

/* ============================================================================
   v1.11.0 Phase 3 — CHECKOUT (rider form, Stripe Payment Element, results)
   Mounted on /book-multiple/{slug}/ when state.step is 'checkout', 'processing',
   'success', 'partial', or 'failed'.
   ============================================================================ */

/* Lesson type label inside cart item — small, secondary color */
.multibook-cart-item-type {
  font-size: 11px;
  color: rgba(91, 76, 156, 0.8);
  font-weight: 600;
}

/* Test mode banner under the checkout button */
.multibook-cart-test-banner {
  margin: 8px 0 0;
  font-size: 11px;
  color: #B8860B;
  text-align: center;
  padding: 6px 8px;
  background: #FFF8E1;
  border-radius: 6px;
  font-weight: 500;
}

/* v1.13.17 (Polish F) — Clear cart text button.
   Lives below the primary "Proceed to Payment" CTA. Deliberately quiet
   — no background, small font, muted gray — so it doesn't compete
   visually with the primary action. Hover state shifts to a soft red
   to telegraph that this is a destructive action. */
.multibook-cart-clear {
  display: block;
  width: 100%;
  margin: 12px 0 0;
  padding: 6px 8px;
  background: transparent;
  border: none;
  color: #7A7773;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(122, 119, 115, 0.35);
  transition: color 0.12s ease, text-decoration-color 0.12s ease;
}
.multibook-cart-clear:hover {
  color: #C44545;
  text-decoration-color: rgba(196, 69, 69, 0.6);
}
.multibook-cart-clear:focus-visible {
  outline: 2px solid var(--purple-deep, #5B4C9C);
  outline-offset: 2px;
}

/* v1.13.24 (Polish P2, third pass) — Branded modal.
   Replaces the toast pattern. Centered card on a grayed backdrop.
   Parent must acknowledge (click a button, click backdrop, or press
   Escape) — but it's not a hard-wall system prompt. Looks "of the
   site" rather than a browser alert/confirm popup.
   Also used in place of window.confirm() for destructive actions
   (Clear Cart). Two-button variant takes a callback that receives
   'confirm' | 'cancel'. */
.llr-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(58, 41, 100, 0.55);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: llr-modal-fade-in 0.18s ease;
  backdrop-filter: blur(2px);
}
.llr-modal-backdrop.is-leaving {
  animation: llr-modal-fade-out 0.18s ease forwards;
}
@keyframes llr-modal-fade-in  { from { opacity: 0; } to   { opacity: 1; } }
@keyframes llr-modal-fade-out { to   { opacity: 0; } }

.llr-modal {
  background: white;
  border-radius: 18px;
  padding: 32px 28px 24px;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 24px 70px rgba(58, 41, 100, 0.35),
              0 8px 20px rgba(58, 41, 100, 0.15);
  text-align: center;
  animation: llr-modal-slide-up 0.24s ease;
  border-top: 4px solid var(--purple-deep, #7B62B8);
}
@keyframes llr-modal-slide-up {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0)   scale(1); }
}
.llr-modal.is-warn  { border-top-color: #E8AA42; }
.llr-modal.is-error { border-top-color: #C44545; }
.llr-modal.is-info  { border-top-color: var(--purple-deep, #7B62B8); }

.llr-modal-icon {
  font-size: 44px;
  line-height: 1;
  margin-bottom: 14px;
  display: block;
}
.llr-modal-title {
  font-family: var(--font-serif, Georgia), serif;
  font-size: 22px;
  font-weight: 500;
  color: var(--charcoal, #3D3450);
  margin: 0 0 10px;
  line-height: 1.25;
}
.llr-modal-msg {
  font-size: 15px;
  line-height: 1.5;
  color: rgba(61, 52, 80, 0.85);
  margin: 0 0 22px;
}
.llr-modal-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}
.llr-modal-btn {
  appearance: none;
  border: 0;
  font: 600 14px/1 inherit;
  padding: 12px 22px;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.1s ease, box-shadow 0.12s ease;
  min-width: 100px;
}
.llr-modal-btn:active { transform: scale(0.97); }
.llr-modal-btn:focus-visible {
  outline: 2px solid var(--purple-deep, #7B62B8);
  outline-offset: 2px;
}
.llr-modal-confirm {
  background: var(--purple-deep, #7B62B8);
  color: white;
  box-shadow: 0 2px 8px rgba(123, 98, 184, 0.3);
}
.llr-modal-confirm:hover { background: #5B4C9C; }
.llr-modal.is-warn  .llr-modal-confirm { background: #E8AA42; box-shadow: 0 2px 8px rgba(232, 170, 66, 0.3); }
.llr-modal.is-warn  .llr-modal-confirm:hover { background: #C99030; }
.llr-modal.is-error .llr-modal-confirm,
.llr-modal.is-danger .llr-modal-confirm { background: #C44545; box-shadow: 0 2px 8px rgba(196, 69, 69, 0.3); }
.llr-modal.is-error .llr-modal-confirm:hover,
.llr-modal.is-danger .llr-modal-confirm:hover { background: #A33535; }
.llr-modal-cancel {
  background: transparent;
  color: var(--purple-deep, #7B62B8);
  border: 1.5px solid var(--purple-soft, #E8DFFA);
}
.llr-modal-cancel:hover {
  background: var(--purple-soft, #E8DFFA);
  border-color: var(--purple, #A594D1);
}
@media (max-width: 600px) {
  .llr-modal {
    padding: 26px 20px 20px;
    border-radius: 14px;
  }
  .llr-modal-actions {
    flex-direction: column-reverse;
  }
  .llr-modal-btn {
    width: 100%;
  }
}

/* v1.13.22 (Polish P10) — Hammer time. The "Do Not Touch" hazard icon
   that appears on the Theme Settings page header and dashboard tile now
   shimmies in place like an MC Hammer dance / Jurassic Park Newman
   finger-wag (whichever Rebecca prefers to imagine). Tooltip text on
   hover doubles the gag. Pure CSS; no GIFs (copyright). Slows to a
   gentle wobble on hover so it doesn't feel like a frantic warning. */
@keyframes llr-hazard-shimmy {
  0%, 100% { transform: rotate(-14deg); }
  50%      { transform: rotate(14deg); }
}
.llr-hazard-icon {
  display: inline-block;
  animation: llr-hazard-shimmy 1.4s ease-in-out infinite;
  transform-origin: 50% 80%;
  cursor: help;
}
.llr-hazard-icon:hover {
  animation-duration: 2.4s;
}
@media (prefers-reduced-motion: reduce) {
  /* Respect users who prefer no motion — keep the icon, drop the
     animation. The joke still works as a static tooltip. */
  .llr-hazard-icon { animation: none; }
}

/* When in checkout/result steps, hide the cart sidebar (it's redundant
   with the inline summary) */
.multibook-step-checkout .multibook-cart-sidebar,
.multibook-step-processing .multibook-cart-sidebar,
.multibook-step-success .multibook-cart-sidebar,
.multibook-step-partial .multibook-cart-sidebar,
.multibook-step-failed .multibook-cart-sidebar {
  display: none;
}
.multibook-step-checkout,
.multibook-step-processing,
.multibook-step-success,
.multibook-step-partial,
.multibook-step-failed {
  grid-template-columns: 1fr;
}

/* Checkout container */
.multibook-checkout {
  max-width: 640px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 8px 4px 80px;
}

.multibook-checkout-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.multibook-checkout-back {
  background: transparent;
  border: none;
  color: var(--purple-deep, #5B4C9C);
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  padding: 4px 0;
}
.multibook-checkout-back:hover {
  text-decoration: underline;
}
.multibook-checkout-title {
  margin: 0;
  font-size: 28px;
  font-weight: 700;
  color: var(--charcoal, #3D3450);
}

.multibook-checkout-section-title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 700;
  color: var(--purple-deep, #5B4C9C);
}
.multibook-checkout-section-sub {
  margin: 0 0 14px;
  font-size: 13px;
  color: rgba(61, 52, 80, 0.65);
}

/* Order summary card */
.multibook-checkout-summary {
  background: white;
  border: 1px solid rgba(123, 98, 184, 0.2);
  border-radius: 12px;
  padding: 18px 20px;
}
.multibook-checkout-summary-list {
  list-style: none;
  margin: 12px 0;
  padding: 0;
  border-top: 1px solid rgba(123, 98, 184, 0.12);
}
.multibook-checkout-summary-item {
  display: grid;
  /* v1.13.15 (Phase B2.3.2) — 4 columns now: when · type · rider · price.
     The rider column expands to fit the bundled "Aurora G. + Cora G."
     label for pair-mode lines without crowding the type column. */
  grid-template-columns: auto 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid rgba(123, 98, 184, 0.08);
  font-size: 14px;
}
.multibook-checkout-summary-item:last-child {
  border-bottom: none;
}
/* v1.13.15 — pair-mode summary lines get the same purple left accent
   the cart sidebar uses, so the bundled-pair visual identity is
   consistent across cart and checkout views. */
.multibook-checkout-summary-item.is-pair {
  border-left: 3px solid rgba(184, 155, 217, 0.55);
  padding-left: 12px;
}
.mc-summary-when {
  color: var(--charcoal, #3D3450);
  font-weight: 600;
  white-space: nowrap;
}
.mc-summary-type {
  color: rgba(61, 52, 80, 0.6);
  font-size: 12px;
}
/* v1.13.15 — Rider name beside the type. Same purple as cart sidebar
   rider line so the visual identity ties together. Truncates with
   ellipsis when the name is too long for the column.
   v1.13.17 — Bumped to 14px / 700 weight so the rider's name reads as
   the primary identifier per line. Matches the visual weight of the
   date and price columns instead of being a quiet tertiary detail. */
.mc-summary-rider {
  color: var(--purple-deep, #5B4C9C);
  font-size: 14px;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}
.mc-summary-price {
  color: var(--purple-deep, #5B4C9C);
  font-weight: 600;
}
/* v1.13.15 — Friendly note shown when rider entry section is skipped
   (cart has rider data per line). Sits in the spot where the rider
   form would have been; reads as a reassurance, not a divider. */
.multibook-checkout-rider-note {
  margin: 8px 0 16px;
  padding: 12px 16px;
  background: rgba(184, 155, 217, 0.08);
  border-radius: 10px;
  font-size: 13px;
  color: var(--charcoal-soft, #6B6360);
  font-style: italic;
  text-align: center;
}
.multibook-checkout-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0 0;
  border-top: 1px solid rgba(123, 98, 184, 0.15);
  margin-top: 12px;
}
.multibook-checkout-summary-total span {
  font-size: 14px;
  font-weight: 600;
  color: rgba(61, 52, 80, 0.7);
}
.multibook-checkout-summary-total strong {
  font-size: 22px;
  color: var(--purple-deep, #5B4C9C);
}

/* v1.13.58 — Camp deposit split rows shown below Total when any camp line
   has a balance due later. "Pay today" is the prominent line (matches what
   Stripe will actually charge); per-camp balance lines below it explain
   what gets auto-charged 14 days before each camp.
   v1.13.59 — Now hosts the Deposit/Full segmented toggle. */
.multibook-checkout-summary-deposit {
  margin-top: 14px;
  background: var(--purple-soft, #E8DFFA);
  border-radius: 10px;
  padding: 14px 16px;
}
.multibook-checkout-summary-deposit-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(61, 52, 80, 0.6);
  margin-bottom: 8px;
}
.multibook-checkout-summary-deposit-toggle {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  padding: 4px;
}
.multibook-checkout-deposit-option {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  padding: 10px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  color: var(--purple-deep, #5B4C9C);
}
.multibook-checkout-deposit-option .opt-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.75;
}
.multibook-checkout-deposit-option .opt-amount {
  font-size: 17px;
  font-weight: 700;
}
.multibook-checkout-deposit-option:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.85);
}
.multibook-checkout-deposit-option.is-active {
  background: var(--purple, #7B62B8);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(91, 76, 156, 0.25);
}
.multibook-checkout-deposit-option.is-active .opt-name {
  opacity: 0.85;
}
.multibook-checkout-summary-paid-in-full {
  font-style: italic;
  color: var(--purple-deep, #5B4C9C);
  padding: 10px 16px 4px;
}

/* v2.3.39 — Pay-as-you-go choice on the checkout page (mirrors the deposit
   toggle styling above). */
.multibook-checkout-summary-payg {
  margin-top: 14px;
  background: var(--purple-soft, #E8DFFA);
  border-radius: 10px;
  padding: 14px 16px;
}
.multibook-checkout-payg-toggle {
  display: flex;
  gap: 6px;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  padding: 4px;
}
.multibook-checkout-payg-option {
  flex: 1 1 0;
  border: 0;
  background: transparent;
  padding: 10px 6px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
  color: var(--purple-deep, #5B4C9C);
}
.multibook-checkout-payg-option .opt-name {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  opacity: 0.75;
}
.multibook-checkout-payg-option .opt-amount {
  font-size: 17px;
  font-weight: 700;
}
.multibook-checkout-payg-option .opt-save {
  font-size: 10px;
  font-weight: 700;
  color: #1B7A4B;
  background: #E6F7EE;
  border-radius: 999px;
  padding: 1px 7px;
  margin-top: 2px;
}
.multibook-checkout-payg-option:hover:not(.is-active) {
  background: rgba(255, 255, 255, 0.85);
}
.multibook-checkout-payg-option.is-active {
  background: var(--purple, #7B62B8);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(91, 76, 156, 0.25);
}
.multibook-checkout-payg-option.is-active .opt-name { opacity: 0.85; }
.multibook-checkout-payg-option.is-active .opt-save { background: rgba(255,255,255,0.9); }
.multibook-checkout-payg-schedule {
  background: rgba(255, 255, 255, 0.55);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 8px;
}
.multibook-checkout-payg-schedule .payg-sched-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12.5px;
  padding: 3px 0;
  color: rgba(61, 52, 80, 0.85);
}
.multibook-checkout-payg-schedule .payg-sched-row.payg-sched-first {
  font-weight: 700;
  color: var(--purple-deep, #5B4C9C);
}
.multibook-checkout-payg-schedule .payg-sched-note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: rgba(61, 52, 80, 0.65);
}
.multibook-checkout-summary-balance-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 8px 16px;
  font-size: 13px;
  color: rgba(61, 52, 80, 0.75);
  gap: 12px;
}
.multibook-checkout-summary-balance-line .balance-line-label {
  flex: 1 1 auto;
  line-height: 1.4;
}
.multibook-checkout-summary-balance-line .balance-line-due {
  display: block;
  font-style: italic;
  font-size: 11px;
  color: rgba(61, 52, 80, 0.55);
  margin-top: 2px;
}
.multibook-checkout-summary-balance-line span:last-child {
  font-weight: 600;
  color: var(--charcoal, #3D3450);
  white-space: nowrap;
}

/* Subtotal + discount rows shown ONLY when a coupon discount is active.
   Sit between the per-item list and the final total, in muted text so the
   "Total" line still wins visually. */
.multibook-checkout-summary-subtotal,
.multibook-checkout-summary-discount {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 0;
  font-size: 14px;
  color: rgba(61, 52, 80, 0.7);
}
.multibook-checkout-summary-subtotal {
  padding-top: 10px;
  border-top: 1px solid rgba(123, 98, 184, 0.1);
  margin-top: 6px;
}
.multibook-checkout-summary-discount {
  color: var(--purple-deep, #5B4C9C);
  font-weight: 600;
}

/* Per-item line when a discount is applied to that specific item: original
   price gets struck through and muted, final price stays bold + purple.
   Items without a discount keep the existing single-price treatment. */
.mc-summary-price-original {
  display: inline-block;
  text-decoration: line-through;
  color: rgba(61, 52, 80, 0.45);
  font-size: 13px;
  margin-right: 6px;
}
.mc-summary-price-final {
  display: inline-block;
  color: var(--purple-deep, #5B4C9C);
  font-weight: 700;
}
.multibook-checkout-summary-item.has-discount .mc-summary-price {
  white-space: nowrap;
}

/* Promo code section. Sits below the summary totals inside the checkout
   summary card. Three visual states: empty (input + Apply), applied (green
   success row + Remove), warning (amber row + Remove) when applied but the
   cart no longer has any qualifying items. Now supports multiple stacked
   codes — each code gets its own row with its own Remove button. */
.multibook-coupon {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(123, 98, 184, 0.1);
}
/* List of currently-applied codes (one per row) */
.multibook-coupon-list {
  list-style: none;
  margin: 0 0 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.multibook-coupon-cap-note {
  font-size: 12px;
  color: rgba(61, 52, 80, 0.55);
  font-style: italic;
}
.multibook-coupon-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.multibook-coupon-input {
  flex: 1;
  min-width: 0; /* lets it shrink in flex layout */
  padding: 10px 12px;
  font-size: 14px;
  border: 1.5px solid rgba(123, 98, 184, 0.25);
  border-radius: 10px;
  background: white;
  color: var(--charcoal, #3D3450);
  font-family: inherit;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.multibook-coupon-input::placeholder {
  text-transform: none;
  letter-spacing: 0;
  color: rgba(61, 52, 80, 0.4);
}
.multibook-coupon-input:focus {
  outline: none;
  border-color: var(--purple, #7B62B8);
  box-shadow: 0 0 0 3px rgba(123, 98, 184, 0.12);
}
.multibook-coupon-input:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}
.multibook-coupon-apply {
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: none;
  border-radius: 10px;
  background: var(--purple, #7B62B8);
  color: white;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
  flex-shrink: 0;
}
.multibook-coupon-apply:hover:not(:disabled) {
  background: var(--purple-deep, #5B4C9C);
}
.multibook-coupon-apply:active:not(:disabled) { transform: translateY(1px); }
.multibook-coupon-apply:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Inline error text below the input (e.g. "We couldn't find a promo code
   matching SUMMR10."). Soft red, modest size, sits right against the input. */
.multibook-coupon-error {
  margin-top: 8px;
  font-size: 13px;
  color: #B85050;
}

/* Applied state — green-tinted success row with the code in bold and a
   subtle Remove link. Uses the brand purple-soft / blue-soft palette for
   tonal consistency rather than a generic green. */
.multibook-coupon-applied {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: linear-gradient(135deg, rgba(123, 98, 184, 0.08), rgba(232, 122, 161, 0.06));
  border: 1px solid rgba(123, 98, 184, 0.2);
  border-radius: 10px;
  font-size: 14px;
  color: var(--charcoal, #3D3450);
}
.multibook-coupon-applied.is-warning {
  background: rgba(245, 191, 90, 0.08);
  border-color: rgba(212, 158, 74, 0.4);
  color: #7A5A20;
}
.multibook-coupon-applied-msg {
  flex: 1;
  min-width: 0;
}
.multibook-coupon-applied-msg strong {
  letter-spacing: 0.04em;
  color: var(--purple-deep, #5B4C9C);
}
.multibook-coupon-applied.is-warning .multibook-coupon-applied-msg strong {
  color: #7A5A20;
}
.multibook-coupon-remove {
  padding: 6px 10px;
  background: transparent;
  border: none;
  color: rgba(61, 52, 80, 0.55);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
  flex-shrink: 0;
}
.multibook-coupon-remove:hover {
  color: var(--purple-deep, #5B4C9C);
  background: rgba(123, 98, 184, 0.08);
}

/* Rider info form */
.multibook-checkout-rider {
  background: white;
  border: 1px solid rgba(123, 98, 184, 0.2);
  border-radius: 12px;
  padding: 18px 20px;
}
.multibook-rider-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.multibook-rider-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.multibook-rider-field-wide {
  grid-column: 1 / -1;
}
.multibook-rider-field span {
  font-size: 13px;
  font-weight: 600;
  color: var(--charcoal, #3D3450);
}
.multibook-required-marker {
  /* Sized & colored to read clearly as "required" without alarming on a
     friendly kids' brand. Inherits the parent's font-weight via the
     surrounding span. */
  color: #C84B4B;
  font-size: 13px;
  margin-left: 2px;
}
.multibook-rider-field input,
.multibook-rider-field textarea,
.multibook-rider-field select {
  border: 1.5px solid rgba(123, 98, 184, 0.3);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  background: white;
  color: var(--charcoal, #3D3450);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.multibook-rider-field select {
  /* Custom chevron on the right via background-image; native select arrow
     suppressed for cross-browser consistency. */
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%237B62B8' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.multibook-rider-field input:focus,
.multibook-rider-field textarea:focus,
.multibook-rider-field select:focus {
  outline: none;
  border-color: var(--purple, #7B62B8);
  box-shadow: 0 0 0 3px rgba(123, 98, 184, 0.15);
}
@media (max-width: 580px) {
  .multibook-rider-grid {
    grid-template-columns: 1fr;
  }
}

/* Payment section */
.multibook-checkout-payment {
  background: white;
  border: 1px solid rgba(123, 98, 184, 0.2);
  border-radius: 12px;
  padding: 18px 20px;
}
.multibook-test-mode-banner {
  margin: 0 0 14px;
  padding: 10px 14px;
  background: #FFF8E1;
  border-left: 3px solid #FFB300;
  border-radius: 6px;
  font-size: 13px;
  color: #826000;
  font-weight: 500;
}
.multibook-payment-element {
  min-height: 60px;
}
.multibook-payment-message {
  margin-top: 10px;
  font-size: 13px;
  color: rgba(61, 52, 80, 0.6);
}
.multibook-payment-message:empty {
  display: none;
}

/* Submit row */
.multibook-checkout-submit-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.multibook-checkout-submit {
  width: 100%;
  background: var(--purple, #7B62B8);
  color: white;
  border: none;
  padding: 16px 20px;
  border-radius: 12px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.12s ease, transform 0.12s ease;
}
.multibook-checkout-submit:hover:not(:disabled) {
  background: var(--purple-deep, #5B4C9C);
  transform: translateY(-1px);
}
.multibook-checkout-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.multibook-checkout-error {
  width: 100%;
  background: #FCE8E8;
  border-left: 3px solid #D63638;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  color: #8A1F1F;
}
.multibook-checkout-secure-note {
  margin: 4px 0 0;
  font-size: 12px;
  color: rgba(61, 52, 80, 0.5);
  text-align: center;
}

/* Result screens (processing, success, partial, failed) */
.multibook-result {
  max-width: 540px;
  margin: 40px auto;
  text-align: center;
  padding: 40px 20px;
  background: white;
  border: 1px solid rgba(123, 98, 184, 0.2);
  border-radius: 16px;
}
.multibook-result-icon {
  font-size: 56px;
  margin-bottom: 16px;
}
.multibook-result-title {
  margin: 0 0 12px;
  font-size: 28px;
  font-weight: 700;
  color: var(--charcoal, #3D3450);
}
.multibook-result-sub {
  margin: 0 0 24px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(61, 52, 80, 0.75);
}
.multibook-result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}
.multibook-result-btn-primary {
  background: var(--purple, #7B62B8);
  color: white !important;
  text-decoration: none;
  border: none;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  display: inline-block;
  cursor: pointer;
  transition: background 0.12s ease;
}
.multibook-result-btn-primary:hover {
  background: var(--purple-deep, #5B4C9C);
  color: white !important;
  text-decoration: none;
}
.multibook-result-btn-secondary {
  background: white;
  color: var(--purple-deep, #5B4C9C);
  border: 1.5px solid rgba(123, 98, 184, 0.4);
  padding: 12px 22px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease;
}
.multibook-result-btn-secondary:hover {
  background: rgba(123, 98, 184, 0.08);
}
.multibook-result-spinner {
  margin: 24px auto 0;
  width: 48px;
  height: 48px;
  border: 4px solid rgba(123, 98, 184, 0.2);
  border-top-color: var(--purple, #7B62B8);
  border-radius: 50%;
  animation: mb-spin 1s linear infinite;
}
@keyframes mb-spin {
  to { transform: rotate(360deg); }
}

/* Per-step result variants */
.multibook-result-success .multibook-result-icon { color: #2E7D32; }
.multibook-result-partial .multibook-result-icon { color: #F9A825; }
.multibook-result-failed .multibook-result-icon { color: #D63638; }

/* ==========================================================================
   FLOATING CART PILL (v1.13.26, Polish C — mobile add-to-cart feedback)
   ==========================================================================
   Persistent bottom-right pill that appears on mobile (≤1100px, matches
   the .multibook-layout single-column breakpoint) whenever the cart has
   items. A tip bubble pops above with the just-added slot detail and
   auto-dismisses. Desktop keeps the sidebar visible so the pill is
   hidden via media query — one feedback pattern per breakpoint. */
.multibook-floating-cart {
  position: fixed;
  bottom: 18px;
  right: 18px;
  z-index: 80;
  display: none;
  pointer-events: none; /* let the pill itself opt back in */
}
.multibook-floating-cart.is-visible {
  display: block;
}
/* Hide on desktop where the cart sidebar is visible — no duplication */
@media (min-width: 1101px) {
  .multibook-floating-cart {
    display: none !important;
  }
}

.multibook-floating-pill {
  pointer-events: auto;
  appearance: none;
  border: 0;
  background: var(--purple-deep, #7B62B8);
  color: white;
  font: 500 14px/1 inherit;
  padding: 13px 22px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(123, 98, 184, 0.4),
              0 2px 6px rgba(58, 41, 100, 0.2);
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.multibook-floating-pill:hover {
  background: #5B4C9C;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(123, 98, 184, 0.5),
              0 2px 6px rgba(58, 41, 100, 0.2);
}
.multibook-floating-pill:active {
  transform: scale(0.97);
}
.multibook-floating-pill:focus-visible {
  outline: 2px solid var(--purple-deep, #7B62B8);
  outline-offset: 3px;
}
.multibook-floating-pill-icon {
  flex-shrink: 0;
}
.multibook-floating-pill-label {
  white-space: nowrap;
}
.multibook-floating-pill-count {
  background: white;
  color: var(--purple-deep, #7B62B8);
  border-radius: 999px;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
}
/* Pulse on each successful add — pill briefly scales 1.0 → 1.08 → 1.0
   to draw the eye without being obnoxious. ~600ms cycle. */
.multibook-floating-pill.is-pulsing {
  animation: multibook-pill-pulse 0.6s ease;
}
@keyframes multibook-pill-pulse {
  0%, 100% { transform: scale(1); }
  30%      { transform: scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .multibook-floating-pill,
  .multibook-floating-pill.is-pulsing {
    animation: none;
    transition: none;
  }
}

/* Tip bubble above the pill — shows the just-added slot's date/time,
   auto-dismisses after ~2.8s. Charcoal background so it reads against
   any page color. Arrow points down at the pill via ::after. */
.multibook-floating-tip {
  pointer-events: auto;
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  background: var(--charcoal, #3D3450);
  color: white;
  font: 500 13px/1.35 inherit;
  padding: 10px 14px;
  border-radius: 10px;
  box-shadow: 0 6px 16px rgba(58, 41, 100, 0.3);
  display: none;
  max-width: 280px;
  white-space: normal;
}
.multibook-floating-tip.is-visible {
  display: block;
  animation: multibook-tip-in 0.3s ease;
}
.multibook-floating-tip.is-leaving {
  animation: multibook-tip-out 0.25s ease forwards;
}
@keyframes multibook-tip-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes multibook-tip-out {
  to { opacity: 0; transform: translateY(-4px); }
}
.multibook-floating-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  right: 24px;
  border: 6px solid transparent;
  border-top-color: var(--charcoal, #3D3450);
}

/* Narrow phones — let the pill span the bottom edge with the tip
   centered above for a more comfortable thumb tap and so a long
   "Saturday September 14 · 9:00 AM" tip can wrap without overflowing. */
@media (max-width: 420px) {
  .multibook-floating-cart {
    bottom: 14px;
    right: 14px;
    left: 14px;
  }
  .multibook-floating-pill {
    width: 100%;
    justify-content: center;
  }
  .multibook-floating-tip {
    right: 0;
    left: 0;
    text-align: center;
  }
  .multibook-floating-tip::after {
    right: 50%;
    transform: translateX(50%);
  }
}

/* ==========================================================================
   IMPERSONATION BANNER (v1.13.30)
   ==========================================================================
   Renders on frontend pages when an admin has switched into a parent's
   session via the "View as parent" admin row action. Fixed at top of
   viewport; body.llr-impersonating + the --llr-impersonation-banner-height
   CSS var push the sticky site header (and anything anchored to its
   bottom) down by the banner's 44px so they don't overlap. The body
   gets padding-top so initial static layout starts below the banner. */
:root {
  --llr-impersonation-banner-height: 0px;
}
body.llr-impersonating {
  --llr-impersonation-banner-height: 44px;
  padding-top: 44px;
}
body.llr-impersonating .site-header {
  top: 44px;
}
.llr-impersonate-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  height: 44px;
  background: linear-gradient(90deg, #7B62B8, #5B4C9C);
  color: white;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  font-family: inherit;
}
.llr-impersonate-banner-icon {
  font-size: 16px;
  line-height: 1;
}
.llr-impersonate-banner-text strong {
  font-weight: 600;
}
.llr-impersonate-banner-stop {
  background: white;
  color: #5B4C9C;
  padding: 5px 14px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 13px;
  transition: background 0.12s ease, transform 0.1s ease;
}
.llr-impersonate-banner-stop:hover {
  background: #F0F0F5;
  color: #3D3450;
}
.llr-impersonate-banner-stop:active {
  transform: scale(0.96);
}
@media (max-width: 520px) {
  .llr-impersonate-banner {
    font-size: 13px;
    gap: 10px;
    padding: 0 12px;
  }
  .llr-impersonate-banner-stop {
    padding: 5px 10px;
    font-size: 12px;
  }
}

/* ==========================================================================
   MANAGE BOOKING — Parent self-service cancellation (v1.13.36 polish)
   Matches the family-page pastel aesthetic. Selectors are specific enough
   to win over global h1/h2/h3 color rules without resorting to !important.
   ========================================================================== */

.manage-booking-page {
    background: var(--cream);
    min-height: 60vh;
    padding-bottom: 80px;
}

/* HERO — light pastel gradient matching .family-hero */
.manage-booking-hero {
    background: linear-gradient(135deg, var(--blue-soft), var(--purple-soft), var(--pink-soft));
    padding: 64px 24px 56px;
    text-align: center;
}
.manage-booking-hero-inner {
    max-width: 720px;
    margin: 0 auto;
}
.manage-booking-page .manage-booking-eyebrow {
    font-family: 'Caveat', cursive;
    font-size: 1.65rem;
    color: var(--pink);
    margin: 0 0 4px;
    font-weight: 500;
}
.manage-booking-page .manage-booking-title {
    font-family: 'Fraunces', serif;
    font-size: clamp(2.1rem, 4.5vw, 3rem);
    font-weight: 600;
    color: var(--charcoal);
    margin: 0 0 14px;
    letter-spacing: -0.015em;
    line-height: 1.15;
}
.manage-booking-intro {
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--charcoal-soft);
    margin: 0;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* SECTION */
.manage-booking-section {
    padding: 40px 24px 0;
}
.manage-booking-inner {
    max-width: 760px;
    margin: 0 auto;
}

/* LOADING / ERROR */
.manage-booking-loading {
    text-align: center;
    padding: 40px 0;
    color: var(--charcoal-soft);
    font-size: 1rem;
}
.manage-booking-error {
    background: #FCEAEA;
    border: 1px solid #E5B5B5;
    border-radius: 16px;
    padding: 24px 28px;
    color: #6E2C2C;
    box-shadow: 0 4px 24px rgba(123, 98, 184, 0.06);
}
.manage-booking-error h2 {
    margin: 0 0 8px;
    font-family: 'Fraunces', serif;
    font-size: 1.4rem;
    color: #6E2C2C;
}
.manage-booking-error p {
    margin: 4px 0;
    line-height: 1.55;
}

/* SECTION HEADERS */
.manage-booking-page .manage-booking-list-heading {
    font-family: 'Fraunces', serif;
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 32px 0 16px;
    letter-spacing: -0.01em;
}
.manage-booking-page .manage-booking-list-heading-past {
    color: var(--charcoal-soft);
    margin-top: 56px;
}
.manage-booking-past-note {
    color: var(--charcoal-soft);
    font-size: 0.95rem;
    margin: -8px 0 14px;
    line-height: 1.5;
}

/* LIST + CARD */
.manage-booking-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.manage-booking-empty {
    background: #fff;
    border-radius: 16px;
    padding: 28px;
    text-align: center;
    color: var(--charcoal-soft);
    border: 1px dashed var(--purple-soft);
}
.manage-booking-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px 26px;
    box-shadow: 0 4px 24px rgba(123, 98, 184, 0.08);
    border: 1px solid transparent;
    transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.manage-booking-card:hover {
    box-shadow: 0 6px 28px rgba(123, 98, 184, 0.14);
    border-color: var(--purple-soft);
}
.manage-booking-card.is-canceled {
    opacity: 0.78;
    background: var(--cream-warm);
}
.manage-booking-list-past .manage-booking-card {
    background: var(--cream-warm);
    box-shadow: 0 2px 12px rgba(123, 98, 184, 0.05);
}

.manage-booking-card-header {
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--purple-soft);
}
.manage-booking-card-title {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 6px;
}
.manage-booking-page .manage-booking-card-title h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.35rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0;
    letter-spacing: -0.01em;
}
.manage-booking-card-when {
    font-size: 1rem;
    color: var(--charcoal);
    margin: 0;
    font-weight: 500;
}

.manage-booking-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.manage-booking-badge-canceled {
    background: var(--purple-soft);
    color: var(--charcoal-soft);
}
.manage-booking-badge-past {
    background: var(--cream-warm);
    color: var(--charcoal-soft);
    border: 1px solid var(--purple-soft);
}
.manage-booking-badge-pending {
    background: #FFF3D6;
    color: #8B6914;
}

.manage-booking-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 28px;
    margin: 4px 0 14px;
    font-size: 0.95rem;
    color: var(--charcoal);
}
.manage-booking-card-meta p { margin: 0; }
.manage-booking-card-meta-label {
    color: var(--charcoal-soft);
    font-weight: 500;
}

.manage-booking-card-refund {
    font-size: 0.98rem;
    color: #2D6A47;
    margin: 0 0 16px;
    padding: 10px 14px;
    background: #E8F5EC;
    border-radius: 8px;
    display: inline-block;
}
.manage-booking-card-refund-zero {
    color: var(--charcoal-soft);
    background: var(--cream-warm);
}

.manage-booking-cancel-btn {
    background: #fff;
    color: #B5453C;
    border: 1.5px solid #DDB4B0;
    border-radius: 999px;
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.manage-booking-cancel-btn:hover {
    background: #FCEAEA;
    border-color: #B5453C;
}
.manage-booking-cancel-btn:active {
    transform: translateY(1px);
}

.manage-booking-blocker {
    font-size: 0.92rem;
    color: var(--charcoal-soft);
    font-style: italic;
    margin: 0;
}

/* v2.0 — Inline variant: appears below the action buttons when the
   parent CAN reschedule but CAN'T self-cancel. Slightly tighter
   spacing to read as a footnote rather than a primary message. */
.manage-booking-blocker-inline {
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--charcoal-soft);
    line-height: 1.4;
}

/* v2.2.5 — Guest-rider notice on read-only bookings. Shows on
   bookings where the viewer is the guest parent (not the primary
   booker). Subtle info banner rather than an action-button row,
   with a mailto link to the booking family for changes.
   v2.2.6 — Bumped font-size, weight, and contrast for legibility.
   Original 0.92rem charcoal-on-purple-soft was hard to read in
   field test. */
.manage-booking-guest-notice {
    margin-top: 16px;
    padding: 16px 20px;
    background: var(--purple-soft);
    border-left: 4px solid var(--purple);
    border-radius: 8px;
}
.manage-booking-guest-notice-line {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: var(--charcoal);
    line-height: 1.55;
}
.manage-booking-guest-notice-line + .manage-booking-guest-notice-line {
    margin-top: 6px;
}
.manage-booking-guest-notice-line strong {
    font-weight: 700;
}
.manage-booking-guest-notice-line a {
    color: var(--purple);
    text-decoration: underline;
    font-weight: 600;
}

/* v2.2.7 — Inline action link inside the checkout error message
   (e.g. "Update profile →" link when the missing_parent_info error
   fires). Bumps weight and color so it doesn't look like body copy. */
.multibook-error-action-link {
    display: inline-block;
    margin-left: 6px;
    color: var(--purple);
    font-weight: 600;
    text-decoration: underline;
}

/* v2.2.9 — Admin override pill. Only shown when an admin is
   impersonating a parent via Book as Parent AND the active variant
   is a solo lesson. Sits above the rider tiles in the picker.
   Distinct admin/exception visual treatment (purple-tinted, with a
   tool icon) so Rebecca can't miss that she's invoking the override. */
.multibook-admin-override {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: linear-gradient(90deg, rgba(123, 98, 184, 0.07), rgba(232, 122, 161, 0.05));
    border: 1px solid rgba(123, 98, 184, 0.22);
    border-radius: 10px;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.multibook-admin-override.is-on {
    background: linear-gradient(90deg, rgba(123, 98, 184, 0.14), rgba(232, 122, 161, 0.1));
    border-color: rgba(123, 98, 184, 0.4);
}
.multibook-admin-override-icon {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.multibook-admin-override-label {
    flex: 1;
    min-width: 0;
}
.multibook-admin-override-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--purple);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.multibook-admin-override-copy {
    font-size: 0.9rem;
    color: var(--charcoal);
    line-height: 1.4;
}
.multibook-admin-override-toggle {
    position: relative;
    width: 46px;
    height: 26px;
    background: #c7c4d0;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: background 0.18s ease;
}
.multibook-admin-override-toggle.is-on {
    background: var(--purple);
}
.multibook-admin-override-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: left 0.18s ease;
}
.multibook-admin-override-toggle.is-on .multibook-admin-override-knob {
    left: 23px;
}

/* v2.2.9 — Cart line badge for admin-override pair bookings. Shows
   inline with the rider names so Rebecca sees the exception at a
   glance when reviewing the cart sidebar. */
.multibook-cart-admin-override-badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    background: rgba(123, 98, 184, 0.15);
    color: var(--purple);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-radius: 4px;
}

/* ============================================================================
   v2.3.0 — Payment mode selector (admin Book-as-Parent only)
   ============================================================================
   Four-option radio group inserted above the Stripe Payment Element on the
   checkout step. Same visual language as .multibook-admin-override (purple
   gradient header + clean radio rows) so it reads as part of the admin
   override family of controls. */

/* v2.3.43 — Pay-as-you-go schedule shown under the admin payment-mode
   selector when the admin chooses Pay as you go. */
.multibook-admin-payg-schedule {
    margin: -8px 0 16px;
    background: #F3EEFB;
    border: 1px solid rgba(123, 98, 184, 0.22);
    border-radius: 12px;
    padding: 14px 16px;
}
.multibook-admin-payg-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    font-size: 13.5px;
    padding: 4px 0;
    color: rgba(61, 52, 80, 0.88);
}
.multibook-admin-payg-row.first {
    font-weight: 700;
    color: #5B4C9C;
}
.multibook-admin-payg-note {
    margin: 8px 0 0;
    font-size: 11.5px;
    line-height: 1.45;
    color: rgba(61, 52, 80, 0.65);
}

.multibook-payment-mode-selector {
}
.multibook-payment-mode-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, var(--purple) 0%, #6b4ea3 100%);
    color: #ffffff;
}
.multibook-payment-mode-badge {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.multibook-payment-mode-title {
    font-family: 'Fraunces', serif;
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: 0.2px;
}
.multibook-payment-mode-option {
    display: flex;
    gap: 12px;
    padding: 14px 20px;
    cursor: pointer;
    border-top: 1px solid rgba(123, 98, 184, 0.12);
    transition: background-color 0.15s ease;
}
.multibook-payment-mode-option:first-of-type {
    border-top: 0;
}
.multibook-payment-mode-option:hover {
    background-color: rgba(255, 255, 255, 0.55);
}
.multibook-payment-mode-option.is-selected {
    background-color: rgba(255, 255, 255, 0.9);
}
.multibook-payment-mode-option input[type="radio"] {
    margin: 4px 0 0 0;
    accent-color: var(--purple);
    flex-shrink: 0;
}
.multibook-payment-mode-option-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.multibook-payment-mode-option-label {
    font-weight: 600;
    color: var(--charcoal);
    font-size: 0.98rem;
}
.multibook-payment-mode-option-sub {
    color: rgba(61, 52, 80, 0.72);
    font-size: 0.85rem;
    line-height: 1.45;
}

/* Informational panels shown in place of the Stripe Payment Element for
   non-'now' modes (saved/link/owed). Matches the soft-purple aesthetic
   of the rest of checkout. */
.multibook-payment-mode-info {
    padding: 18px 22px;
    border-radius: 12px;
    background: var(--purple-soft);
    border: 1px solid rgba(123, 98, 184, 0.18);
    color: var(--charcoal);
}
.multibook-payment-mode-info p {
    margin: 0 0 10px;
    line-height: 1.55;
    font-size: 0.95rem;
}
.multibook-payment-mode-info p:last-child {
    margin-bottom: 0;
}
.multibook-payment-mode-info-fine {
    font-size: 0.86rem !important;
    color: rgba(61, 52, 80, 0.7);
}
.multibook-payment-mode-info--owed {
    background: rgba(232, 122, 161, 0.08);
    border-color: rgba(232, 122, 161, 0.22);
}
.multibook-payment-mode-info--link {
    background: rgba(123, 98, 184, 0.08);
    border-color: rgba(123, 98, 184, 0.22);
}

/* Payment link copy-to-clipboard display (link_ready result step). */
.multibook-payment-link-display {
    display: flex;
    gap: 8px;
    margin: 22px auto;
    max-width: 560px;
    width: 100%;
}
.multibook-payment-link-input {
    flex: 1;
    padding: 12px 14px;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    background: #ffffff;
    border: 1.5px solid rgba(123, 98, 184, 0.3);
    border-radius: 8px;
    color: var(--charcoal);
    outline: none;
}
.multibook-payment-link-input:focus {
    border-color: var(--purple);
    box-shadow: 0 0 0 3px rgba(123, 98, 184, 0.15);
}
.multibook-payment-link-copy {
    padding: 12px 22px;
    background: var(--purple);
    color: #ffffff;
    font-weight: 600;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease;
}
.multibook-payment-link-copy:hover {
    background: #6b4ea3;
}
.multibook-payment-link-copy.is-copied {
    background: #2f9e44;
}
.multibook-payment-link-help {
    max-width: 560px;
    margin: 0 auto;
    font-size: 0.9rem;
    line-height: 1.55;
    color: rgba(61, 52, 80, 0.78);
}

/* Booking status badges — surface pending_payment + balance_owed on the
   family/manage page so Rebecca and parents see at a glance what's owed
   or awaiting payment. */
.llr-booking-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin: 6px 8px 6px 0;
    vertical-align: middle;
}
.llr-booking-status-badge--pending {
    background: rgba(245, 178, 31, 0.15);
    color: #b78007;
    border: 1px solid rgba(245, 178, 31, 0.4);
}
.llr-booking-status-badge--owed {
    background: rgba(220, 53, 69, 0.1);
    color: #b02a37;
    border: 1px solid rgba(220, 53, 69, 0.35);
}
.llr-booking-pay-now-link {
    display: inline-block;
    margin-top: 6px;
    padding: 8px 16px;
    background: var(--purple);
    color: #ffffff !important;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.15s ease;
}
.llr-booking-pay-now-link:hover {
    background: #6b4ea3;
    color: #ffffff !important;
}

/* v2.3.38 — pay-as-you-go callout + failed-charge alert on manage booking */
.manage-booking-payg-callout {
    margin-top: 10px;
    padding: 12px 16px;
    background: #FFF6E6;
    border: 1px solid #f0dca8;
    border-radius: 10px;
    font-size: 0.86rem;
    color: #7a5a07;
    line-height: 1.45;
}
.manage-booking-alert-strip {
    margin-top: 10px;
    padding: 12px 16px;
    background: #FCE8E8;
    border: 1px solid #f3c0c0;
    border-radius: 10px;
    font-size: 0.86rem;
    color: #922;
    line-height: 1.45;
}

.manage-booking-policy-note {
    margin-top: 56px;
    padding: 26px 30px;
    background: var(--purple-soft);
    border-radius: 16px;
    color: var(--charcoal);
}
.manage-booking-page .manage-booking-policy-heading {
    font-family: 'Fraunces', serif;
    font-size: 1.2rem;
    margin: 0 0 10px;
    color: var(--charcoal);
}
.manage-booking-policy-line {
    margin: 4px 0;
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--charcoal);
}

/* MODAL */
.manage-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(61, 52, 80, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    animation: manage-modal-fade-in 0.18s ease;
}
@keyframes manage-modal-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.manage-modal {
    background: #fff;
    border-radius: 18px;
    max-width: 520px;
    width: 100%;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(61, 52, 80, 0.30);
    animation: manage-modal-slide-up 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes manage-modal-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.manage-modal-stripe {
    height: 5px;
    background: linear-gradient(90deg, #B5453C 0%, var(--pink) 100%);
}
.manage-modal-body {
    padding: 28px 28px 22px;
}
.manage-modal-body h3 {
    font-family: 'Fraunces', serif;
    font-size: 1.45rem;
    font-weight: 600;
    color: var(--charcoal);
    margin: 0 0 14px;
}
.manage-modal-summary {
    background: var(--cream-warm);
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 0.98rem;
    line-height: 1.55;
    color: var(--charcoal);
    margin-bottom: 14px;
}
.manage-modal-refund {
    margin-bottom: 14px;
}
.manage-modal-refund-line {
    font-size: 1rem;
    line-height: 1.55;
    color: #2D6A47;
    margin: 0;
}
.manage-modal-refund-line.manage-modal-refund-zero {
    color: var(--charcoal-soft);
}
.manage-modal-refund-sub {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--charcoal-soft);
}
.manage-modal-policy {
    font-size: 0.85rem;
    color: var(--charcoal-soft);
    margin: 0 0 18px;
    font-style: italic;
}
.manage-modal-error {
    background: #FCEAEA;
    border: 1px solid #E5B5B5;
    color: #6E2C2C;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    margin-bottom: 14px;
}
.manage-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}
.manage-modal-btn {
    padding: 11px 24px;
    border-radius: 999px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease;
}
.manage-modal-btn-secondary {
    background: #fff;
    color: var(--charcoal);
    border: 1.5px solid var(--purple-soft);
}
.manage-modal-btn-secondary:hover {
    background: var(--cream-warm);
    border-color: var(--charcoal-soft);
}
.manage-modal-btn-danger {
    background: #B5453C;
    color: #fff;
}
.manage-modal-btn-danger:hover:not(:disabled) {
    background: #9E3B33;
}
.manage-modal-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .manage-modal-body { padding: 22px 20px 18px; }
    .manage-modal-actions {
        flex-direction: column-reverse;
    }
    .manage-modal-btn { width: 100%; }
    .manage-booking-card-title { flex-direction: column; align-items: flex-start; gap: 6px; }
    .manage-booking-hero { padding: 48px 20px 40px; }
}

/* ==========================================================================
   RESCHEDULE UI (v1.13.38 — Phase C.2)
   ========================================================================== */

.manage-booking-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Primary "Reschedule" button — purple branded action */
.manage-booking-reschedule-btn {
    background: var(--charcoal);
    color: #fff;
    border: 1.5px solid var(--charcoal);
    border-radius: 999px;
    padding: 10px 24px;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.manage-booking-reschedule-btn:hover {
    background: #2A2138;
    border-color: #2A2138;
}
.manage-booking-reschedule-btn:active {
    transform: translateY(1px);
}

/* Wider modal for the reschedule picker */
.manage-modal.manage-modal-wide {
    max-width: 600px;
}

/* Top stripe variant — green for the "positive" action */
.manage-modal-stripe-positive {
    background: linear-gradient(90deg, #4F9D74 0%, var(--pink) 100%);
}

/* Primary button in modal — matches reschedule button */
.manage-modal-btn-primary {
    background: var(--charcoal);
    color: #fff;
}
.manage-modal-btn-primary:hover:not(:disabled) {
    background: #2A2138;
}

/* v2.3.17 — Reschedule modal's primary action ("Move my lesson") uses
   brand purple to visually echo the calendar's selected-date state.
   Scoped to the reschedule modal only so the cancel modal's confirm
   button (destructive action) keeps the charcoal treatment. */
#manage-reschedule-modal .manage-modal-btn-primary {
    background: var(--purple, #7B62B8);
}
#manage-reschedule-modal .manage-modal-btn-primary:hover:not(:disabled) {
    background: var(--purple-deep, #5B4C9C);
}

.manage-reschedule-picker {
    margin: 6px 0 18px;
}
.manage-reschedule-label {
    display: block;
    font-family: 'Fraunces', serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: 6px;
}
/* v2.3.14 — Reschedule modal calendar uses the same .multibook-calendar-*
   class names as the /book-multiple/ flow so styling is shared (single
   source of truth — booking-flow polish carries over automatically).
   This block only adds modal-specific tweaks: tighter padding, and the
   inline status message styling.

   v2.3.15 — Calendar fully mirrors booking flow now; CSS below is just
   the wrapper container and status row. */
.manage-reschedule-calendar {
    margin-bottom: 18px;
}
.manage-cal-status {
    font-size: 0.85rem;
    color: var(--charcoal-soft, #6B6278);
    text-align: center;
    padding: 10px 4px 2px;
    font-style: italic;
}
.manage-cal-status.is-error {
    color: #C0392B;
    font-style: normal;
}

.manage-reschedule-times-wrap {
    margin-top: 8px;
}
.manage-reschedule-times-label {
    font-size: 0.92rem;
    color: var(--charcoal-soft);
    margin: 0 0 10px;
    font-weight: 500;
}
.manage-reschedule-times-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
    max-height: 240px;
    overflow-y: auto;
    padding: 4px 2px 4px 0;
}
.manage-reschedule-time-btn {
    background: #fff;
    color: var(--charcoal);
    border: 1.5px solid var(--purple-soft);
    border-radius: 10px;
    padding: 11px 12px;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.12s ease;
    /* v2.3.16 — Flex column so seat indicator stacks under the time
       label when present (class types). For Privates the seat span
       isn't rendered so the column is single-line / visually unchanged. */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.manage-reschedule-time-btn:hover {
    border-color: var(--charcoal-soft);
    background: var(--cream-warm);
}
.manage-reschedule-time-btn.is-selected {
    /* v2.3.17 — Selected time chip now uses brand purple to match the
       selected date in the calendar above. Was charcoal in v2.3.16. */
    background: var(--purple, #7B62B8);
    color: #fff;
    border-color: var(--purple, #7B62B8);
}

/* v2.3.16 — Seat-count indicator on reschedule time chips for class
   types (Mommy & Me). Three states matching the /book-multiple/
   seat indicators for visual consistency:
     - default: subtle purple
     - is-last (1 left): pink urgency
     - is-full: gray + disabled button */
.manage-reschedule-time-label {
    font-weight: 500;
}
.manage-reschedule-time-seats {
    font-size: 11px;
    font-weight: 600;
    color: var(--purple, #7B62B8);
    letter-spacing: 0.2px;
    opacity: 0.85;
}
.manage-reschedule-time-seats.is-last {
    color: var(--pink, #E87AA1);
    opacity: 1;
}
.manage-reschedule-time-seats.is-full {
    color: #9B95A8;
    opacity: 1;
}
.manage-reschedule-time-btn.is-selected .manage-reschedule-time-seats {
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
}
.manage-reschedule-time-btn.is-disabled {
    cursor: not-allowed;
    background: #F4F2F7;
    border-color: rgba(123, 98, 184, 0.15);
    color: #9B95A8;
}
.manage-reschedule-time-btn.is-disabled:hover {
    background: #F4F2F7;
    border-color: rgba(123, 98, 184, 0.15);
}

.manage-reschedule-times-loading,
.manage-reschedule-times-empty {
    text-align: center;
    color: var(--charcoal-soft);
    padding: 16px;
    font-size: 0.95rem;
}
.manage-reschedule-times-empty {
    background: var(--cream-warm);
    border-radius: 10px;
}

@media (max-width: 600px) {
    .manage-booking-card-actions {
        flex-direction: column;
    }
    .manage-booking-reschedule-btn,
    .manage-booking-cancel-btn {
        width: 100%;
    }
    .manage-reschedule-times-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* v1.13.39 — success flash above bookings list after a cancel/reschedule */
.manage-booking-flash {
    background: #E8F5EC;
    border: 1px solid #B5DBC1;
    color: #2D6A47;
    padding: 14px 20px;
    border-radius: 12px;
    margin-bottom: 18px;
    font-size: 0.98rem;
    font-weight: 500;
    box-shadow: 0 2px 12px rgba(45, 106, 71, 0.08);
    transition: opacity 0.4s ease;
}

/* ==========================================================================
   v2.2.0 — Guest Rider modal + tile (multi-booking guest flow)
   ==========================================================================
   Used when a parent books a Side-by-Side or Semi-Private with a kid
   from a different family. Modal collects rider 2 + parent 2 contact;
   the tile in the rider picker swaps between "+ Add guest rider"
   (empty state) and the filled state showing the guest's name +
   parent email below.

   Brand alignment: same purple (#7B62B8) / pink (#E87AA1) palette as
   the rest of LLR. Modal styled to match the manage-booking modal
   conventions (centered overlay, rounded corners, soft shadow).
*/
.multibook-rider-tile-guest .multibook-rider-avatar-guest {
    background: linear-gradient(135deg, #E87AA1 0%, #7B62B8 100%);
    color: #FFFFFF;
    font-size: 1.5rem;
    font-weight: 700;
}
.multibook-rider-tile-guest:not(.is-selected) .multibook-rider-avatar-guest {
    background: #FFFFFF;
    color: #7B62B8;
    border: 2px dashed #C9B8E0;
    font-size: 1.8rem;
    font-weight: 400;
}
.multibook-rider-tile-guest .multibook-rider-age {
    color: #7B62B8;
    font-style: italic;
    font-size: 0.78rem;
    word-break: break-word;
}

/* Modal backdrop */
.multibook-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(61, 52, 80, 0.55);
    backdrop-filter: blur(3px);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    animation: fadeIn 0.18s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* Modal shell */
.multibook-modal {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(91, 76, 156, 0.35);
    max-width: 560px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px 34px;
    animation: modalSlideUp 0.25s ease-out;
}
@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.multibook-modal-head {
    margin-bottom: 22px;
    text-align: center;
}
.multibook-modal-eyebrow {
    font-family: 'Caveat', cursive, serif;
    color: #E87AA1;
    font-size: 1.3rem;
    margin-bottom: 4px;
}
.multibook-modal-title {
    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #3D3450;
    margin: 0 0 10px;
    line-height: 1.2;
}
.multibook-modal-title .script {
    font-family: 'Caveat', cursive, serif;
    color: #7B62B8;
    font-weight: 400;
    font-size: 1.1em;
}
.multibook-modal-intro {
    color: #6B6278;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* Form */
.multibook-modal-form { display: block; }
.multibook-modal-section-eyebrow {
    color: #7B62B8;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
    margin: 18px 0 10px;
}
.multibook-modal-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.multibook-modal-field {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 140px;
    margin-bottom: 12px;
}
.multibook-modal-field-age { flex: 0 0 80px; min-width: 80px; }
.multibook-modal-label {
    font-size: 0.85rem;
    color: #5F5E5A;
    font-weight: 600;
    margin-bottom: 4px;
}
.multibook-modal-label-req {
    font-weight: 400;
    color: #8A8794;
    font-size: 0.78rem;
    font-style: italic;
}
.multibook-modal-field input {
    padding: 10px 12px;
    border: 1px solid #C9B8E0;
    border-radius: 8px;
    font-size: 0.98rem;
    color: #3D3450;
    background: #FFFFFF;
    transition: border-color 0.15s;
}
.multibook-modal-field input:focus {
    outline: none;
    border-color: #7B62B8;
    box-shadow: 0 0 0 3px rgba(123, 98, 184, 0.12);
}

/* Error message */
.multibook-modal-error {
    background: #FDECEF;
    border: 1px solid #F4B5C2;
    color: #A8334D;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.9rem;
    margin: 12px 0;
}

/* Actions */
.multibook-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 20px;
}
.multibook-modal-actions .btn-primary {
    background: #7B62B8;
    color: #FFFFFF;
    border: none;
    padding: 11px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s;
}
.multibook-modal-actions .btn-primary:hover { background: #5B4C9C; }
.multibook-modal-actions .btn-secondary {
    background: #F4F0FA;
    color: #5B4C9C;
    border: 1px solid #C9B8E0;
    padding: 11px 22px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}
.multibook-modal-actions .btn-secondary:hover { background: #E8DFFA; }

@media (max-width: 600px) {
    .multibook-modal { padding: 24px 22px; }
    .multibook-modal-title { font-size: 1.35rem; }
    .multibook-modal-row { flex-direction: column; gap: 0; }
    .multibook-modal-field-age { flex: 1; }
}