/* Booking funnel styles — book.ejs + checkout.ejs + confirmation.ejs.
   Extracted from per-view inline <style> blocks so the rules participate
   in the shared ?v={ASSET_VERSION} cache-bust and aren't re-shipped on
   every page-load. Mirrors the M-6 cleanup that lifted my-bookings.ejs
   styles into dashboard.css.

   Loaded by every route that renders one of the three views — see
   src/routes/booking.js and src/routes/checkout.js. */

/* ========== /book — multi-step form ========== */
.booking-section {
  padding: 4rem 0;
}

/* Cream main on light theme. Applied to <main> rather than just
   .booking-section because the sticky-footer flex layout makes <main>
   taller than the section, so a section-only bg leaves a strip of body
   bg showing below the form. Scoped via body[data-page='book'] since
   <main> is shared across every page. The opaque bg covers body::before's
   grain inside main; review/summary cards + form inputs get a white
   override below so they pop against the cream. */
[data-theme='light'] body[data-page='book'] main {
  background: #f9f6ef;
}

[data-theme='light'] .review-card,
[data-theme='light'] .summary-card {
  background: #ffffff;
}

[data-theme='light'] .form-control {
  background: #ffffff;
}

/* Step indicators */
.booking-steps {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}
.booking-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  opacity: 0.4;
  transition: opacity 0.3s;
}
.booking-step.active,
.booking-step.completed {
  opacity: 1;
}
.booking-step.completed .step-number {
  background: var(--accent);
  color: #1a1a1a;
}
.step-number {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  /* Reset the `margin: 0 auto 20px` that components.css's `.step-number`
     rule (used by the home-process partial) cascades into here. The 20px
     bottom margin made the circle's outer box 52px tall in the flex row,
     which pushed the visible circle to the top while the label + dash
     centered at the box midpoint - read as a ~10px vertical misalignment. */
  margin: 0;
}
.booking-step.active .step-number {
  background: var(--accent);
  color: #1a1a1a;
}
.step-label {
  font-family: 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  /* Match the step-number's 2rem height with line-height so the label's
     line box fills the row exactly; text is then centered inside its own
     line box, giving deterministic vertical centering with the number
     circle and the dash. */
  line-height: 2rem;
}
.booking-step + .booking-step::before {
  content: '';
  width: 1rem;
  height: 2px;
  background: var(--accent);
  opacity: 0.3;
  align-self: center;
}
@media (max-width: 480px) {
  .step-label {
    display: none;
  }
}

@media (max-width: 767px) {
  .booking-steps {
    margin-bottom: 1em;
  }
  .booking-panel h2 {
    margin-bottom: 4rem;
  }
}

/* Panels */
.booking-panel {
  display: none;
  position: relative;
}
.booking-panel.active {
  display: block;
  animation: bookingPanelIn 0.25s ease;
}

/* Soft fade + slight rise on each panel reveal — replaces the abrupt
   display toggle. Each Next/Back click triggers a fresh animation. */
@keyframes bookingPanelIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .booking-panel.active {
    animation: none;
  }
}
.booking-panel h2 {
  margin-bottom: 2rem;
  text-align: center;
}

/* Decorative chapter numeral — same italic Playfair Display / low-opacity gold
   treatment as `.service-card-number` on the home services grid. Sits
   off-axis (top-left) behind the centred panel H2 so it reads as an
   editorial chapter marker rather than a UI label. Hidden from AT via
   aria-hidden on the span; siblings lifted above via z-index. */
.booking-panel-number {
  position: absolute;
  top: -1.5rem;
  left: -0.25rem;
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-style: italic;
  font-size: clamp(4.5rem, 9vw, 6.5rem);
  line-height: 1;
  color: var(--accent-text);
  opacity: 0.1;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.booking-panel > *:not(.booking-panel-number) {
  position: relative;
  z-index: 1;
}

/* Event Type Cards */
.event-type-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 1.25rem;
}
.card-radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
}
.event-type-card {
  cursor: pointer;
  position: relative;
  display: block;
  background: var(--bg-primary);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  transition: all 0.3s ease;
  overflow: hidden;
}
.event-type-card:hover {
  border-color: rgba(201, 169, 110, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.event-type-card:has(input:focus-visible),
.package-card:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.event-type-card:has(input:checked),
.event-type-card.selected {
  border-color: var(--accent-text);
  background: rgba(201, 169, 110, 0.08);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(201, 169, 110, 0.2);
}
.event-type-inner {
  padding: 2rem 1.5rem;
  text-align: center;
}
.event-type-icon {
  font-size: 2.5rem;
  color: var(--accent-text);
  margin-bottom: 1rem;
  display: block;
}
.event-type-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  margin: 0 0 0.5rem;
}
.event-type-card p {
  font-size: 0.85rem;
  opacity: 0.6;
  margin: 0;
  line-height: 1.5;
}
.event-type-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #1a1a1a;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}
.event-type-card:has(input:checked) .event-type-check,
.event-type-card.selected .event-type-check {
  display: flex;
}

/* Package Category Headings */
.pkg-category-heading {
  font-family: 'Playfair Display', serif;
  font-size: 1.75rem;
  margin: 2rem 0 1rem;
  display: inline-block;
  text-transform: capitalize;
}

[data-theme='light'] .pkg-category-heading {
  color: #000000;
}

[data-theme='dark'] .pkg-category-heading {
  color: #ffffff;
}

.pkg-category-heading:first-of-type {
  margin-top: 0;
}

/* Package Cards */
.package-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
  gap: 1.25rem;
  margin-bottom: 1rem;
}
.package-card {
  cursor: pointer;
  position: relative;
  display: block;
  background: var(--bg-primary);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  transition: all 0.3s ease;
  overflow: hidden;
}
.package-card:hover {
  border-color: rgba(201, 169, 110, 0.5);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
}
.package-card:has(input:checked),
.package-card.selected {
  border-color: var(--accent-text);
  background: rgba(201, 169, 110, 0.08);
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(201, 169, 110, 0.2);
}
.package-inner {
  padding: 1.75rem;
}
.package-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  margin: 0 0 0.5rem;
  color: var(--accent-text);
}
.package-desc {
  font-size: 0.85rem;
  opacity: 0.6;
  margin: 0 0 1rem;
  line-height: 1.5;
}
.package-price {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--accent-text);
}
.package-price span {
  font-size: 0.85rem;
  font-weight: 400;
  opacity: 0.7;
  font-family: 'DM Sans', sans-serif;
}
.package-guests {
  font-size: 0.85rem;
  opacity: 0.6;
  margin-top: 0.5rem;
}
.package-guests i {
  margin-right: 0.35rem;
  color: var(--accent-text);
}
.package-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: #1a1a1a;
  display: none;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
}
.package-card:has(input:checked) .package-check,
.package-card.selected .package-check {
  display: flex;
}

/* Form controls — book.ejs originally redeclared these, but components.css's
   `.form-group input` rules win on specificity so the booking-specific
   `.form-control` overrides are kept here only for parity with the previous
   inline block. Live rules in this group: `.form-control.input-error`
   (JS-applied error border) and the `.form-row` 2-up grid override.  */
.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--bg-tertiary);
  background: var(--bg-secondary);
  color: inherit;
  border-radius: var(--radius-md);
  font-size: 1rem;
  font-family: 'DM Sans', sans-serif;
  transition: border-color 0.2s;
}
.form-control:focus {
  outline: none;
  border-color: var(--accent-text);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, 0.15);
}
.form-control.input-error {
  border-color: var(--status-cancelled);
}
.booking-section .form-group {
  margin-bottom: 1.5rem;
}
.booking-section .form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.booking-section .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 600px) {
  .booking-section .form-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  /* Generic .form-row gap (used outside .booking-section, e.g. checkout
     and auth forms) - also collapse on narrow viewports where rows stack. */
  .form-row {
    gap: 0;
  }
}
.custom-menu-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
}

/* Review — Step 5 invitation card. The booking under composition rendered
   like a printed invitation: small kicker → date as Playfair Display hero → a
   single italic inscription line → the package → a divider → the RSVP
   block. The point is to make the moment of commitment feel deliberate
   rather than utility. */
.review-card {
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
}

.review-hero {
  margin-bottom: 1.75rem;
}

.review-kicker {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 600;
  color: var(--accent-text);
  margin-bottom: 0.85rem;
}

.review-date {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}

.review-date-meta {
  font-size: 0.9rem;
  opacity: 0.6;
  letter-spacing: 0.02em;
  margin: 0;
}

.review-inscription {
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.2rem);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 1rem;
}

.review-inscription strong {
  color: var(--text-primary);
  font-weight: 600;
  font-style: normal;
  font-family: 'DM Sans', sans-serif;
}

.review-package {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  color: var(--accent-text);
  margin: 0;
  letter-spacing: 0.01em;
}

.review-divider {
  border: none;
  height: 1px;
  background: var(--accent);
  opacity: 0.3;
  width: 60px;
  margin: 1.75rem auto;
}

.review-rsvp {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem 2rem;
  margin: 0;
  text-align: left;
}

.review-rsvp-row dt {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  opacity: 0.55;
  margin-bottom: 0.2rem;
}

.review-rsvp-row dd {
  font-size: 0.95rem;
  margin: 0;
  color: var(--text-primary);
  word-break: break-word;
}

.review-notes {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--bg-tertiary);
  text-align: left;
}

.review-notes-label {
  display: block;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  opacity: 0.55;
  margin-bottom: 0.5rem;
}

.review-notes p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

/* Navigation */
.booking-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  gap: 1rem;
}

/* ========== /checkout — payment summary ========== */
.checkout-section {
  padding: 4rem 0;
}
.checkout-summary h2 {
  margin-bottom: 1.5rem;
}
/* Solid background (theme-aware --bg-secondary) so the checkout summary
   card matches the .detail-card / .cart-summary vocabulary used across
   the order surfaces. Was rgba(255,255,255,0.05) which read translucent
   against the paper texture. */
.summary-card {
  background: var(--bg-secondary);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
}

/* Inside the checkout summary, stack the option-group chips vertically
   so each group ("Size: large", "Extras: ...", "Ingredients: ...") sits
   on its own line. The default .item-options is flex-row with wrap,
   which on the wide summary card crammed all three groups onto one
   line and read as a cluttered run-on.
   Also drop the options' own bottom border + negative top margin so
   we don't get a double-line stack against the Subtotal row's own
   border-top — same pattern used on /my/orders/:id and /track. */
.checkout-summary .item-options {
  flex-direction: column;
  gap: 0.25rem;
  border-bottom: none;
  margin-top: 0.25rem;
  padding-bottom: 0;
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.6rem 0;
  font-size: 1rem;
}
/* The value span wraps right-aligned when long (e.g. package name, notes)
   so each new line still hugs the right edge instead of left-aligning
   under the label. */
.summary-row > :last-child {
  text-align: right;
  min-width: 0;
}
.summary-row-highlight {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.005em;
  color: var(--accent-text);
  border-top: 2px solid var(--accent);
  margin-top: 0.5rem;
  padding-top: 0.85rem;
}

/* On narrow screens, side-by-side label/value gets cramped — the value
   wraps and the lines push against the label. Stack vertically: small
   uppercase letterspaced label on top, full-width value below. The
   highlight row (Total / Deposit Due Now) keeps the horizontal layout
   because it's the headline number and the values are always short. */
@media (max-width: 480px) {
  .summary-row:not(.summary-row-highlight) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.5rem 0;
  }
  .summary-row:not(.summary-row-highlight) > :first-child {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    opacity: 0.6;
  }
  .summary-row:not(.summary-row-highlight) > :last-child {
    text-align: left;
    font-size: 1rem;
  }
}
.stripe-notice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  font-size: 0.9rem;
  opacity: 0.8;
}
.stripe-notice i {
  color: var(--accent-text);
  font-size: 1.1rem;
}
.checkout-pay-btn {
  width: 100%;
  padding: 1rem;
  font-size: 1.15rem;
}

/* Light-theme overrides for checkout — translucent whites become invisible
   on a white page. Same pattern as cart.ejs / confirmation. */
[data-theme='light'] .summary-card {
  /* background inherits the theme-aware var(--bg-secondary) from the base
     rule above — no light-specific override needed anymore. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme='light'] .stripe-notice {
  background: rgba(0, 0, 0, 0.02);
  border-color: rgba(0, 0, 0, 0.1);
}

/* ========== /confirmation — post-submit + post-payment ========== */
.confirmation-section {
  padding: 4rem 0;
}
.confirmation-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 3rem;
  text-align: center;
  margin-bottom: 2.5rem;
}
.confirmation-icon {
  font-size: 2.5rem;
  color: var(--accent-text);
  margin-bottom: 1.5rem;
}
.confirmation-card h2 {
  margin-bottom: 1rem;
}
.confirmation-card p {
  opacity: 0.8;
  max-width: 500px;
  margin: 0 auto 2rem;
}
.confirmation-details {
  text-align: left;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}
/* Confirmation has its own .detail-row variant — narrower padding and a
   lighter divider — distinct from the dashboard.css definition used on
   /my/bookings/:id. The two views never share a page so they don't collide. */
.confirmation-section .detail-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.confirmation-section .detail-row > :last-child {
  text-align: right;
  min-width: 0;
}
.confirmation-section .detail-row:last-child {
  border-bottom: none;
}

/* On narrow screens, side-by-side label/value gets cramped (Date /
   Package values touch the label and wrap mid-text). Stack vertically
   with a small uppercase letterspaced label on top, full-width value
   below — same receipt-style pattern as `.summary-row`. The .money-hero
   row stays horizontal because it's the headline number. */
@media (max-width: 480px) {
  .confirmation-section .detail-row:not(.money-hero) {
    flex-direction: column;
    align-items: stretch;
    gap: 0.2rem;
    padding: 0.5rem 0;
  }
  .confirmation-section .detail-row:not(.money-hero) > :first-child {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    /* Color-based muting (not opacity) — opacity creates a stacking
       context that bleeds onto every descendant, so any nested rich
       content (e.g. .item-notes) couldn't render at full visibility.
       color-mix preserves theme awareness via currentColor. */
    color: color-mix(in srgb, currentColor 60%, transparent);
  }
  .confirmation-section .detail-row:not(.money-hero) > :last-child {
    text-align: left;
    font-size: 1rem;
  }
}
.next-steps {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  padding: 2rem;
}
.next-steps h3 {
  margin-bottom: 1.25rem;
}
.next-steps ul {
  list-style: none;
  padding: 0;
}
.next-steps li {
  padding: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.next-steps li i {
  color: var(--accent-text);
  font-size: 0.85rem;
}

/* Light-theme overrides for confirmation. */
[data-theme='light'] .confirmation-card {
  background: rgba(0, 0, 0, 0.03);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
[data-theme='light'] .confirmation-details {
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
/* .next-steps keeps its gold border (same vocabulary as the bordered
   cards across the funnel); light theme just lifts the background a
   touch so the surface still reads against the paper texture. */
[data-theme='light'] .next-steps {
  background: rgba(0, 0, 0, 0.02);
}
[data-theme='light'] .confirmation-section .detail-row {
  border-bottom-color: rgba(0, 0, 0, 0.08);
}

/* Significant blur on the page hero, scoped to the order-confirmed
   variant only — booking-inquiry and booking-payment confirmations share
   the template but keep their unblurred hero. transform: scale(1.10)
   pushes the blurred edges outside the visible bounds so there's no
   hard non-blurred ring. */
.page-hero--order .page-hero-bg {
  filter: blur(40px);
  transform: scale(1.1);
}

/* In the confirmation context, .item-options is nested INSIDE the
   item label cell (not a sibling of the row), so the option text
   reads as supplementary detail attached to the item name. Drop the
   options' own bottom border (the parent .detail-row's border serves
   as the divider between items) and restore a small positive top
   margin so the options don't overlap the item name. */
.confirmation-section .item-options {
  border-bottom: none;
  margin-top: 0.25rem;
  padding-bottom: 0;
  /* Stack each option group on its own line so "Size: large", "Extras: ...",
     "Ingredients: ..." don't run together as a single wrapped row. Mirrors
     the .checkout-summary .item-options treatment. */
  flex-direction: column;
  gap: 0.25rem;
}

/* Solid-background variant of .confirmation-card — used on the
   order-confirmed page to match the .detail-card vocabulary on
   /my/orders/:id (and /track). The default .confirmation-card uses
   rgba(255,255,255,0.05) which reads translucent against the paper
   texture; this swaps in --bg-secondary so it sits flat and consistent
   with the rest of the order-management surfaces. The nested
   .confirmation-details is made transparent so we don't get a
   "card within a card" look. */
.confirmation-card--solid {
  background: var(--bg-secondary);
}
.confirmation-card--solid .confirmation-details {
  background: transparent;
  border: none;
  padding-left: 0;
  padding-right: 0;
}
[data-theme='light'] .confirmation-card--solid {
  background: var(--bg-secondary);
  box-shadow: none;
}
[data-theme='light'] .confirmation-card--solid .confirmation-details {
  background: transparent;
  border: none;
}

/* Tighten the confirmation card on narrow screens — the desktop 3rem
   padding leaves only ~280px of content width on a 375px viewport,
   which compounds with the inner details card's own padding to squeeze
   everything into a narrow column. */
@media (max-width: 480px) {
  .confirmation-card {
    padding: 1.75rem 1.25rem;
  }
  .confirmation-details {
    padding: 1rem 1.1rem;
  }
}