/* ═══════════════════════════════════════════════════════════════
   TOUCH FOR WELLNESS — BOOKING FLOW
   A Renaissance-inspired 4-step booking experience
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   KEYFRAME ANIMATIONS
═══════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInScale {
  from { opacity: 0; transform: scale(0.96) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes shimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

@keyframes checkDraw {
  from { stroke-dashoffset: 20; }
  to   { stroke-dashoffset: 0; }
}

@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 150, 62, 0.25); }
  50%      { box-shadow: 0 0 0 8px rgba(184, 150, 62, 0); }
}

@keyframes dotPulse {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1; }
}

/* ═══════════════════════════════════════════
   1. BOOKING PAGE LAYOUT
═══════════════════════════════════════════ */
.booking-page {
  min-height: 100vh;
  padding-top: 2rem;
  padding-bottom: 4rem;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(184, 150, 62, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 90%, rgba(201, 160, 135, 0.06) 0%, transparent 50%),
    var(--cream);
  position: relative;
}

.booking-page::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-light), transparent);
  opacity: 0.5;
}

.booking-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem;
}

.booking-header {
  text-align: center;
  padding-top: 140px;
  margin-bottom: 3rem;
}

.booking-header h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 300;
  color: var(--warm-brown);
  margin-bottom: 0.75rem;
}

.booking-header h1 em {
  font-weight: 400;
  font-style: italic;
  color: var(--deep-wine);
}

.booking-header p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--rose-text, var(--rose));
}

.ornament-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.25rem auto 1.5rem;
  color: var(--gold);
  font-size: 1rem;
}

.ornament-divider::before,
.ornament-divider::after {
  content: '';
  width: 64px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.booking-intro {
  margin-bottom: 4rem;
}

.booking-intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.75rem;
  max-width: 760px;
  margin: 0 auto;
}

.booking-note-card {
  height: 100%;
  padding: 2.5rem;
  text-align: center;
  border: 1px solid rgba(184, 150, 62, 0.18);
  background: linear-gradient(135deg, var(--cream), rgba(184, 150, 62, 0.04));
  position: relative;
}

.booking-note-card::before,
.booking-note-card::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 1px;
  background: var(--gold);
}

.booking-note-card::before {
  top: -1px;
}

.booking-note-card::after {
  bottom: -1px;
}

.booking-note-label {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

.booking-note-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 400;
  color: var(--warm-brown);
  margin-bottom: 1rem;
  line-height: 1.25;
}

.booking-note-text {
  font-family: 'Lora', serif;
  font-size: 0.98rem;
  line-height: 1.8;
  color: #5a4a42;
  margin: 0 auto 1rem;
}

.booking-note-text:last-child {
  margin-bottom: 0;
}

.booking-note-text--small {
  font-size: 0.9rem;
}

.booking-note-text a {
  color: var(--deep-wine);
}

.booking-intro-poster {
  margin: 0;
  padding: 0.65rem;
  border: 1px solid rgba(184, 150, 62, 0.18);
  background: rgba(250, 246, 241, 0.76);
  box-shadow: 0 14px 42px rgba(58, 45, 40, 0.07);
}

.booking-intro-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #f8efe2;
}

.offerings-section {
  margin-bottom: 4rem;
}

.offerings-section:last-of-type {
  margin-bottom: 3rem;
}

.offerings-section .category-header {
  margin-bottom: 2rem;
}

.offerings-section .category-header h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.7rem, 3vw, 2.25rem);
  font-weight: 400;
  color: var(--warm-brown);
}

/* ═══════════════════════════════════════════
   2. PROGRESS INDICATOR
═══════════════════════════════════════════ */
.booking-progress {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3.5rem;
  padding: 2rem 1rem;
  position: relative;
}

.progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
  cursor: default;
  flex-shrink: 0;
}

.progress-step-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid rgba(184, 150, 62, 0.3);
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: rgba(184, 150, 62, 0.4);
  transition: all var(--transition);
  position: relative;
}

.progress-step-label {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(58, 45, 40, 0.35);
  margin-top: 0.7rem;
  transition: color var(--transition);
  white-space: nowrap;
}

/* Connector lines between steps */
.progress-connector {
  flex: 1;
  height: 2px;
  background: rgba(184, 150, 62, 0.15);
  margin: 0 0.5rem;
  margin-bottom: 1.5rem; /* offset for label height */
  position: relative;
  min-width: 40px;
  max-width: 120px;
  overflow: hidden;
}

.progress-connector::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0%;
  background: var(--gold);
  transition: width var(--transition);
}

/* Active step */
.progress-step.active .progress-step-circle {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--cream);
  box-shadow: 0 4px 20px rgba(184, 150, 62, 0.3);
  animation: pulseGlow 2.5s ease-in-out infinite;
}

.progress-step.active .progress-step-label {
  color: var(--gold);
  font-weight: 700;
}

/* Completed step */
.progress-step.completed .progress-step-circle {
  border-color: var(--gold);
  background: var(--gold);
  color: var(--cream);
  box-shadow: 0 2px 12px rgba(184, 150, 62, 0.2);
}

.progress-step.completed .progress-step-circle .step-number {
  display: none;
}

.progress-step.completed .progress-step-circle::after {
  content: '';
  display: block;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--cream);
  border-bottom: 2px solid var(--cream);
  transform: rotate(-45deg) translateY(-1px);
}

.progress-step.completed .progress-step-label {
  color: var(--warm-brown);
}

/* Completed connector fills */
.progress-connector.completed::after {
  width: 100%;
}

/* ═══════════════════════════════════════════
   3. STEP CONTAINERS
═══════════════════════════════════════════ */
.booking-step {
  display: none;
  opacity: 0;
}

.booking-step.active {
  display: block;
  animation: fadeInScale 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.step-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 300;
  color: var(--warm-brown);
  text-align: center;
  margin-bottom: 0.5rem;
}

.step-title em {
  font-weight: 400;
  font-style: italic;
  color: var(--deep-wine);
}

.step-subtitle {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--rose-text, var(--rose));
  text-align: center;
  margin-bottom: 2.5rem;
}

/* ═══════════════════════════════════════════
   3b. SERVICE CATEGORY TABS
═══════════════════════════════════════════ */
.service-tabs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(184, 150, 62, 0.15);
}

.service-tab {
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(58, 45, 40, 0.4);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 1rem 2rem;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

.service-tab:hover {
  color: var(--warm-brown);
}

.service-tab.active {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* Tab panel visibility */
.tab-panel {
  display: none;
}

.tab-panel.active:not([hidden]) {
  display: block;
}

/* ═══════════════════════════════════════════
   4. SERVICE CARDS
═══════════════════════════════════════════ */

/* Category headers */
.service-category {
  margin-bottom: 2.5rem;
}

.service-category:last-child {
  margin-bottom: 0;
}

.category-header {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-bottom: 1.5rem;
}

.category-header h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--warm-brown);
  white-space: nowrap;
}

.category-header::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(184, 150, 62, 0.3), transparent);
}

.category-label {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.3rem;
}

/* Service card grid — auto-fit so a single card fills the row, two go side
   by side, and 3+ wrap into a neat grid. Scales without per-section tweaks. */
.service-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.service-card {
  position: relative;
  background: var(--cream);
  border: 1px solid rgba(184, 150, 62, 0.15);
  padding: 1.75rem;
  cursor: pointer;
  transition: all var(--transition);
  overflow: hidden;
}

.service-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  opacity: 0;
  transition: opacity var(--transition);
}

.service-card:hover {
  border-color: rgba(184, 150, 62, 0.4);
  transform: translateY(-3px);
  box-shadow: 0 8px 30px rgba(58, 45, 40, 0.08);
}

.service-card:hover::before {
  opacity: 1;
}

.service-card.selected {
  border-color: var(--gold);
  background: linear-gradient(135deg, var(--cream), rgba(184, 150, 62, 0.05));
  box-shadow:
    0 0 0 1px var(--gold),
    0 8px 30px rgba(184, 150, 62, 0.12);
}

.service-card.selected::before {
  opacity: 1;
}

/* Selected indicator */
.service-card.selected::after {
  content: '';
  position: absolute;
  top: 14px;
  right: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Checkmark via box-shadow trick */
  box-shadow: inset -2px -3px 0 0 var(--cream);
}

.service-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--warm-brown);
  margin-bottom: 0.5rem;
  padding-right: 2rem;
}

.service-card-description {
  font-family: 'Lora', serif;
  font-size: 0.85rem;
  color: #5a4a42;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.service-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1rem;
  border-top: 1px solid rgba(184, 150, 62, 0.1);
}

.service-card-duration {
  font-family: 'Lora', serif;
  font-size: 0.8rem;
  color: var(--rose);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.service-card-duration::before {
  content: '\25F7'; /* clock symbol */
  font-size: 0.9rem;
  opacity: 0.7;
}

.service-card-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--gold);
}

.service-card--static {
  cursor: default;
  display: flex;
  flex-direction: column;
}

.service-card--static .service-card-name {
  padding-right: 0;
}

.offering-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: grid;
  gap: 0.75rem;
}

.offering-list li {
  position: relative;
  padding-left: 1rem;
  font-family: 'Lora', serif;
  font-size: 0.85rem;
  line-height: 1.65;
  color: #5a4a42;
}

.offering-list li::before {
  content: '';
  position: absolute;
  top: 0.6rem;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

.offering-meta-note {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: right;
}

.offering-book-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  padding: 1rem 1.4rem;
  border: 1px solid var(--warm-brown);
  background: var(--warm-brown);
  color: var(--cream);
  font-family: 'Cinzel', serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: all var(--transition);
}

.offering-book-button:hover {
  background: var(--gold);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 6px 22px rgba(184, 150, 62, 0.22);
}

.offering-book-button--cal {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--cream);
}

.offering-book-button--cal:hover {
  background: var(--warm-brown);
  border-color: var(--warm-brown);
}

.offering-book-button--cal.active {
  background: var(--warm-brown);
  border-color: var(--warm-brown);
}

.offering-book-button--center {
  margin-top: 0;
}

.cal-booking-section {
  margin: -1rem 0 4.5rem;
  padding: 3rem;
  scroll-margin-top: 110px;
  background:
    radial-gradient(ellipse at 15% 10%, rgba(184, 150, 62, 0.08), transparent 42%),
    linear-gradient(135deg, rgba(250, 246, 241, 0.96), rgba(240, 232, 219, 0.78));
  border: 1px solid rgba(184, 150, 62, 0.18);
  position: relative;
  overflow: hidden;
}

.cal-booking-section::before,
.cal-booking-section::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 1px;
  background: var(--gold);
}

.cal-booking-section::before {
  top: -1px;
}

.cal-booking-section::after {
  bottom: -1px;
}

.cal-booking-intro {
  max-width: 680px;
  margin: 0 auto 2rem;
  text-align: center;
}

.cal-booking-intro h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.8rem, 3vw, 2.45rem);
  font-weight: 400;
  line-height: 1.2;
  color: var(--warm-brown);
  margin-bottom: 0.8rem;
}

.cal-booking-intro p:not(.category-label) {
  font-family: 'Lora', serif;
  font-size: 0.95rem;
  line-height: 1.8;
  color: #5a4a42;
}

.cal-booking-shell {
  background: rgba(250, 246, 241, 0.82);
  border: 1px solid rgba(184, 150, 62, 0.16);
  padding: 0.8rem;
  box-shadow: 0 18px 55px rgba(58, 45, 40, 0.08);
}

.cal-booking-frame {
  min-height: 940px;
  background: #fffaf4;
  border: 1px solid rgba(58, 45, 40, 0.08);
  overflow: hidden;
}

.cal-inline-embed {
  width: 100%;
  height: 940px;
  overflow: hidden;
}

.cal-inline-embed iframe {
  width: 100% !important;
  min-height: 940px;
  border: 0;
}

.booking-help {
  text-align: center;
  padding-top: 1rem;
}

.booking-help .step-title {
  margin-bottom: 0.75rem;
}

.booking-help .step-subtitle {
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 2rem;
}

/* ═══════════════════════════════════════════
   5. CALENDAR WIDGET
═══════════════════════════════════════════ */
.calendar {
  max-width: 420px;
  margin: 0 auto 2.5rem;
  background: var(--cream);
  border: 1px solid rgba(184, 150, 62, 0.15);
  padding: 2rem;
  position: relative;
}

.calendar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 1px;
  background: var(--gold);
}

/* Month navigation */
.calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(184, 150, 62, 0.1);
}

.calendar-month {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--warm-brown);
  letter-spacing: 0.05em;
}

.calendar-nav {
  background: none;
  border: 1px solid rgba(184, 150, 62, 0.3);
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gold);
  font-size: 1rem;
  transition: all var(--transition);
}

.calendar-nav:hover {
  background: var(--gold);
  color: var(--cream);
  border-color: var(--gold);
}

.calendar-nav:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.calendar-nav:disabled:hover {
  background: none;
  color: var(--gold);
  border-color: rgba(184, 150, 62, 0.3);
}

/* Day-of-week headers */
.calendar-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 0.5rem;
}

.calendar-weekday {
  font-family: 'Cinzel', serif;
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  padding: 0.5rem 0;
}

/* Date grid */
.calendar-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 500;
  color: var(--warm-brown);
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
  transition: all 0.3s ease;
}

.calendar-day:hover:not(.disabled):not(.past):not(.empty) {
  background: rgba(184, 150, 62, 0.08);
}

/* Available date indicator - subtle gold dot */
.calendar-day.available::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  opacity: 0.6;
  animation: dotPulse 3s ease-in-out infinite;
}

/* Selected date */
.calendar-day.selected {
  background: var(--gold);
  color: var(--cream);
  box-shadow: 0 2px 12px rgba(184, 150, 62, 0.3);
}

.calendar-day.selected::after {
  display: none;
}

/* Today indicator */
.calendar-day.today:not(.selected) {
  color: var(--deep-wine);
  font-weight: 700;
}

.calendar-day.today:not(.selected)::before {
  content: '';
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(107, 58, 58, 0.2);
  border-radius: 0;
}

/* Past dates */
.calendar-day.past {
  color: rgba(58, 45, 40, 0.2);
  cursor: default;
  text-decoration: line-through;
  text-decoration-color: rgba(58, 45, 40, 0.1);
}

/* Disabled / unavailable dates */
.calendar-day.disabled {
  color: rgba(58, 45, 40, 0.15);
  cursor: not-allowed;
}

/* Empty cells for grid alignment */
.calendar-day.empty {
  cursor: default;
}

/* ═══════════════════════════════════════════
   6. TIME SLOTS
═══════════════════════════════════════════ */
.time-slots-section {
  max-width: 500px;
  margin: 0 auto;
}

.time-slots-label {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: 1.2rem;
}

.time-slots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
}

.time-slot {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--warm-brown);
  background: var(--cream);
  border: 1px solid rgba(184, 150, 62, 0.3);
  padding: 0.85rem 0.5rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

.time-slot:hover:not(.unavailable) {
  border-color: var(--gold);
  background: rgba(184, 150, 62, 0.05);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(184, 150, 62, 0.12);
}

.time-slot.selected {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--cream);
  box-shadow: 0 4px 20px rgba(184, 150, 62, 0.3);
}

.time-slot.unavailable {
  color: rgba(58, 45, 40, 0.25);
  border-color: rgba(184, 150, 62, 0.1);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: rgba(58, 45, 40, 0.15);
}

/* Fully booked message */
.time-slots-booked {
  text-align: center;
  padding: 2.5rem 2rem;
  background: rgba(240, 232, 219, 0.5);
  border: 1px dashed rgba(184, 150, 62, 0.25);
}

.time-slots-booked p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--rose);
  margin-bottom: 0.5rem;
}

.time-slots-booked span {
  font-family: 'Lora', serif;
  font-size: 0.85rem;
  color: #5a4a42;
}

/* ═══════════════════════════════════════════
   7. CLIENT DETAILS FORM
═══════════════════════════════════════════ */
.client-form {
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.client-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.client-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.client-form .form-group label {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

.client-form .form-group input,
.client-form .form-group textarea,
.client-form .form-group select {
  font-family: 'Lora', serif;
  font-size: 0.95rem;
  padding: 0.9rem 1rem;
  border: 1px solid rgba(184, 150, 62, 0.3);
  background: transparent;
  color: var(--warm-brown);
  transition: border-color var(--transition), box-shadow var(--transition);
  outline: none;
  -webkit-appearance: none;
  border-radius: 0;
}

.client-form .form-group input:focus,
.client-form .form-group textarea:focus,
.client-form .form-group select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184, 150, 62, 0.08);
}

.client-form .form-group input::placeholder,
.client-form .form-group textarea::placeholder {
  color: rgba(58, 45, 40, 0.3);
  font-style: italic;
}

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

.client-form .form-group select {
  cursor: pointer;
  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 d='M1 1l5 5 5-5' stroke='%23b8963e' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

/* Optional field note */
.form-note {
  font-family: 'Lora', serif;
  font-size: 0.78rem;
  font-style: italic;
  color: var(--rose);
  margin-top: -0.3rem;
}

/* Checkbox / consent styling */
.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(184, 150, 62, 0.4);
  background: transparent;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  margin-top: 2px;
  transition: all 0.3s ease;
}

.form-checkbox input[type="checkbox"]:checked {
  background: var(--gold);
  border-color: var(--gold);
}

.form-checkbox input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 5px;
  width: 5px;
  height: 8px;
  border: solid var(--cream);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-checkbox span {
  font-family: 'Lora', serif;
  font-size: 0.85rem;
  color: #5a4a42;
  line-height: 1.6;
}

/* ═══════════════════════════════════════════
   8. PAYMENT SECTION
═══════════════════════════════════════════ */
.payment-section {
  max-width: 550px;
  margin: 0 auto;
}

/* Booking summary card */
.booking-summary {
  border: 1px solid var(--gold);
  padding: 2.25rem;
  margin-bottom: 2.5rem;
  background:
    linear-gradient(135deg, var(--cream), rgba(184, 150, 62, 0.03));
  position: relative;
}

.booking-summary::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: var(--gold);
}

.booking-summary::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 1px;
  background: var(--gold);
}

.summary-label {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: 1.75rem;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(184, 150, 62, 0.1);
}

.summary-row:last-child {
  border-bottom: none;
}

.summary-row-key {
  font-family: 'Lora', serif;
  font-size: 0.88rem;
  color: #5a4a42;
}

.summary-row-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--warm-brown);
}

/* Total row */
.summary-row.total {
  margin-top: 0.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gold);
  border-bottom: none;
}

.summary-row.total .summary-row-key {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm-brown);
}

.summary-row.total .summary-row-value {
  font-size: 1.5rem;
  color: var(--gold);
}

/* Payment methods label */
.payment-methods-label {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
  margin-bottom: 1.2rem;
}

/* Payment buttons */
.payment-buttons {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.payment-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1.15rem 2rem;
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}

.payment-btn::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transition: left 0.6s ease;
}

.payment-btn:hover::after {
  left: 100%;
}

/* Stripe button - dark/elegant */
.payment-btn--stripe {
  background: var(--warm-brown);
  color: var(--cream);
  border: 1px solid var(--warm-brown);
}

.payment-btn--stripe:hover {
  background: #2a1f1b;
  box-shadow: 0 6px 24px rgba(58, 45, 40, 0.3);
  transform: translateY(-2px);
}

/* PayPal button - gold */
.payment-btn--paypal {
  background: var(--gold);
  color: var(--cream);
  border: 1px solid var(--gold);
}

.payment-btn--paypal:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  box-shadow: 0 6px 24px rgba(184, 150, 62, 0.3);
  transform: translateY(-2px);
}

.payment-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.payment-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(58, 45, 40, 0.3);
  font-family: 'Lora', serif;
  font-size: 0.8rem;
  font-style: italic;
}

.payment-divider::before,
.payment-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(184, 150, 62, 0.15);
}

/* Secure payment notice */
.payment-secure {
  text-align: center;
  margin-top: 1.5rem;
  font-family: 'Lora', serif;
  font-size: 0.78rem;
  color: #5a4a42;
  opacity: 0.6;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.payment-secure::before {
  content: '\1F512';
  font-size: 0.7rem;
}

/* ═══════════════════════════════════════════
   9. WORKSHOP EVENT CARDS
═══════════════════════════════════════════ */
.workshop-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.5rem;
}

.workshop-card {
  background: var(--cream);
  border: 1px solid rgba(184, 150, 62, 0.15);
  overflow: hidden;
  transition: all var(--transition);
  position: relative;
}

.workshop-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  opacity: 0;
  transition: opacity var(--transition);
}

.workshop-card:hover {
  border-color: rgba(184, 150, 62, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(58, 45, 40, 0.08);
}

.workshop-card:hover::before {
  opacity: 1;
}

.workshop-card.selected {
  border-color: var(--gold);
  box-shadow:
    0 0 0 1px var(--gold),
    0 8px 30px rgba(184, 150, 62, 0.12);
}

.workshop-card.selected::before {
  opacity: 1;
}

.workshop-card-header {
  background:
    linear-gradient(135deg, var(--warm-brown), #4a3a33);
  padding: 1.5rem 1.75rem;
  position: relative;
  overflow: hidden;
}

.workshop-card-header::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 40%;
  background: radial-gradient(ellipse at right center, rgba(184, 150, 62, 0.15), transparent);
  pointer-events: none;
}

.workshop-card-date {
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--gold-light);
  margin-bottom: 0.5rem;
}

.workshop-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 500;
  color: var(--cream);
  line-height: 1.3;
}

.workshop-card-body {
  padding: 1.75rem;
}

.workshop-card-details {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.workshop-detail {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Lora', serif;
  font-size: 0.85rem;
  color: #5a4a42;
}

.workshop-detail-icon {
  width: 16px;
  color: var(--gold);
  flex-shrink: 0;
  font-size: 0.85rem;
  text-align: center;
}

/* Spots remaining */
.workshop-spots {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Cinzel', serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.4rem 0.8rem;
  margin-bottom: 1.25rem;
}

.workshop-spots.available {
  color: var(--sage);
  background: rgba(122, 139, 111, 0.08);
  border: 1px solid rgba(122, 139, 111, 0.2);
}

.workshop-spots.limited {
  color: var(--deep-wine);
  background: rgba(107, 58, 58, 0.06);
  border: 1px solid rgba(107, 58, 58, 0.15);
}

.workshop-spots.sold-out {
  color: rgba(58, 45, 40, 0.4);
  background: rgba(58, 45, 40, 0.04);
  border: 1px solid rgba(58, 45, 40, 0.1);
}

.workshop-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(184, 150, 62, 0.1);
}

.workshop-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--gold);
}

.workshop-register-btn {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--warm-brown);
  background: none;
  border: 1px solid var(--gold);
  padding: 0.7rem 1.5rem;
  cursor: pointer;
  transition: all var(--transition);
}

.workshop-register-btn:hover {
  background: var(--gold);
  color: var(--cream);
  box-shadow: 0 4px 16px rgba(184, 150, 62, 0.25);
}

.workshop-register-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  border-color: rgba(58, 45, 40, 0.2);
  color: rgba(58, 45, 40, 0.4);
}

.workshop-register-btn:disabled:hover {
  background: none;
  color: rgba(58, 45, 40, 0.4);
  box-shadow: none;
}

/* ═══════════════════════════════════════════
   10. NAVIGATION BUTTONS
═══════════════════════════════════════════ */
.booking-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(184, 150, 62, 0.1);
}

.booking-nav--centered {
  justify-content: center;
}

.booking-nav--end {
  justify-content: flex-end;
}

.btn-back,
.btn-continue {
  font-family: 'Cinzel', serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  cursor: pointer;
  transition: all var(--transition);
  position: relative;
}

/* Back button - ghost style */
.btn-back {
  color: var(--warm-brown);
  background: none;
  border: 1px solid rgba(184, 150, 62, 0.3);
}

.btn-back:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateX(-3px);
}

.btn-back::before {
  content: '\2190'; /* left arrow */
  margin-right: 0.6rem;
  font-size: 1rem;
  vertical-align: middle;
}

/* Continue button - prominent gold */
.btn-continue {
  color: var(--cream);
  background: var(--gold);
  border: 1px solid var(--gold);
}

.btn-continue:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
  transform: translateX(3px);
  box-shadow: 0 6px 24px rgba(184, 150, 62, 0.3);
}

.btn-continue::after {
  content: '\2192'; /* right arrow */
  margin-left: 0.6rem;
  font-size: 1rem;
  vertical-align: middle;
}

.btn-continue:disabled,
.btn-back:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

.btn-continue:disabled:hover {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: none;
  transform: none;
}

.btn-back:disabled:hover {
  border-color: rgba(184, 150, 62, 0.3);
  color: var(--warm-brown);
  transform: none;
}

/* ═══════════════════════════════════════════
   ORNAMENTAL DECORATIONS
═══════════════════════════════════════════ */
.booking-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 2.5rem 0;
  color: var(--gold);
  font-size: 1.2rem;
  letter-spacing: 0.3em;
}

.booking-ornament::before,
.booking-ornament::after {
  content: '';
  height: 1px;
  width: 60px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ═══════════════════════════════════════════
   EMPTY STATE MESSAGES
═══════════════════════════════════════════ */
.booking-empty {
  text-align: center;
  padding: 3rem 2rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--rose);
  background: rgba(240, 232, 219, 0.3);
  border: 1px dashed rgba(184, 150, 62, 0.25);
}

/* ═══════════════════════════════════════════
   WORKSHOP DATE/TIME CONFIRMATION CARD
═══════════════════════════════════════════ */
.workshop-datetime-card {
  max-width: 500px;
  margin: 0 auto;
  border: 1px solid rgba(184, 150, 62, 0.3);
  padding: 2rem;
  background: linear-gradient(135deg, var(--cream), rgba(184, 150, 62, 0.03));
  text-align: center;
}

.workshop-datetime-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--warm-brown);
  margin-bottom: 1rem;
}

.workshop-datetime-details {
  font-family: 'Lora', serif;
  font-size: 0.95rem;
  color: #5a4a42;
  line-height: 1.8;
}

.workshop-datetime-details p {
  margin-bottom: 0.3rem;
}

/* ═══════════════════════════════════════════
   LOADING & TRANSITION STATES
═══════════════════════════════════════════ */
.booking-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  gap: 1.5rem;
}

.booking-spinner {
  width: 36px;
  height: 36px;
  border: 2px solid rgba(184, 150, 62, 0.15);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.booking-loading p {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--rose);
}

/* Success / confirmation state */
.booking-success {
  text-align: center;
  padding: 4rem 2rem;
  animation: fadeIn 0.8s ease forwards;
}

.booking-success-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  box-shadow: 0 4px 20px rgba(184, 150, 62, 0.3);
}

.booking-success-icon::after {
  content: '';
  width: 16px;
  height: 10px;
  border-left: 2.5px solid var(--cream);
  border-bottom: 2.5px solid var(--cream);
  transform: rotate(-45deg) translateY(-2px);
}

.booking-success h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 300;
  color: var(--warm-brown);
  margin-bottom: 0.75rem;
}

.booking-success p {
  font-family: 'Lora', serif;
  font-size: 1rem;
  color: #5a4a42;
  max-width: 450px;
  margin: 0 auto;
  line-height: 1.8;
}

/* Error / validation messages */
.field-error {
  font-family: 'Lora', serif;
  font-size: 0.78rem;
  color: var(--deep-wine);
  margin-top: 0.25rem;
}

.form-group.has-error input,
.form-group.has-error textarea,
.form-group.has-error select {
  border-color: var(--deep-wine);
}

.booking-error {
  background: rgba(107, 58, 58, 0.06);
  border: 1px solid rgba(107, 58, 58, 0.15);
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
  font-family: 'Lora', serif;
  font-size: 0.88rem;
  color: var(--deep-wine);
  text-align: center;
}

/* ═══════════════════════════════════════════
   11. RESPONSIVE DESIGN
═══════════════════════════════════════════ */

/* Tablet */
@media (max-width: 968px) {
  .booking-page {
    padding-top: 1rem;
  }

  .booking-container {
    padding: 0 1.5rem;
  }

  .booking-intro-poster {
    max-width: 420px;
    margin: 0 auto;
  }

  .booking-note-card {
    padding: 2rem;
  }

  .cal-booking-section {
    padding: 2.25rem;
  }

  .cal-booking-frame,
  .cal-inline-embed,
  .cal-inline-embed iframe {
    min-height: 980px;
  }

  .cal-inline-embed {
    height: 980px;
  }

  .workshop-cards {
    grid-template-columns: 1fr;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mobile */
@media (max-width: 768px) {
  .booking-page {
    padding-top: 0.5rem;
    padding-bottom: 3rem;
  }

  .booking-header {
    margin-bottom: 2rem;
  }

  .booking-header h1 {
    font-size: 1.8rem;
  }

  /* Progress indicator - compact on mobile */
  .booking-progress {
    margin-bottom: 2.5rem;
    padding: 1.5rem 0;
  }

  .progress-step-circle {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
  }

  .progress-step-label {
    font-size: 0.5rem;
    letter-spacing: 0.1em;
  }

  .progress-connector {
    min-width: 20px;
    margin: 0 0.25rem;
  }

  /* Step content */
  .step-title {
    font-size: 1.4rem;
  }

  .step-subtitle {
    margin-bottom: 2rem;
  }

  /* Service cards - single column */
  .service-cards {
    grid-template-columns: 1fr;
  }

  .service-card {
    padding: 1.5rem;
  }

  .booking-intro {
    margin-bottom: 3rem;
  }

  .offerings-section {
    margin-bottom: 3rem;
  }

  .offering-book-button {
    width: 100%;
  }

  .cal-booking-section {
    margin-bottom: 3rem;
    padding: 1.5rem;
  }

  .cal-booking-shell {
    padding: 0.55rem;
  }

  .cal-booking-frame,
  .cal-inline-embed,
  .cal-inline-embed iframe {
    min-height: 1040px;
  }

  .cal-inline-embed {
    height: 1040px;
  }

  /* Calendar - full width */
  .calendar {
    padding: 1.5rem;
    margin-bottom: 2rem;
  }

  .calendar-day {
    font-size: 0.9rem;
  }

  /* Time slots - 3 columns */
  .time-slots {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
  }

  .time-slot {
    padding: 0.75rem 0.25rem;
    font-size: 0.95rem;
  }

  /* Client form */
  .client-form .form-row {
    grid-template-columns: 1fr;
  }

  /* Payment */
  .booking-summary {
    padding: 1.5rem;
  }

  .payment-btn {
    padding: 1rem 1.5rem;
    font-size: 0.72rem;
  }

  /* Workshop cards */
  .workshop-cards {
    grid-template-columns: 1fr;
  }

  /* Navigation buttons - full width stack */
  .booking-nav {
    flex-direction: column-reverse;
    gap: 0.75rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
  }

  .btn-back,
  .btn-continue {
    width: 100%;
    text-align: center;
    padding: 1rem 2rem;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .booking-page {
    padding-top: 0;
  }

  .booking-container {
    padding: 0 1rem;
  }

  .booking-note-card {
    padding: 1.5rem 1.25rem;
  }

  .cal-booking-section {
    padding: 1.25rem 1rem;
  }

  .booking-note-title {
    font-size: 1.55rem;
  }

  /* Minimal progress indicator */
  .progress-step-label {
    display: none;
  }

  .progress-connector {
    margin-bottom: 0;
  }

  .progress-step-circle {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }

  /* Calendar */
  .calendar {
    padding: 1.25rem 1rem;
  }

  .calendar-nav {
    width: 30px;
    height: 30px;
  }

  .calendar-month {
    font-size: 1.1rem;
  }

  /* Time slots - 2 columns */
  .time-slots {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Workshop card spacing */
  .workshop-card-header {
    padding: 1.25rem;
  }

  .workshop-card-body {
    padding: 1.25rem;
  }

  .workshop-card-footer {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .workshop-register-btn {
    text-align: center;
  }

  .workshop-price {
    text-align: center;
  }
}

/* ═══════════════════════════════════════════
   PRINT STYLES
═══════════════════════════════════════════ */
@media print {
  .booking-page {
    padding-top: 0;
    background: white;
  }

  .booking-progress,
  .booking-nav,
  .payment-buttons {
    display: none;
  }

  .booking-summary {
    border: 1px solid #ccc;
    box-shadow: none;
  }
}