/**
 * book.css
 * ML Software, LLC
 * Copyright 2026. All rights reserved.
 *
 * DropzoneIQ - book.dropzoneiq.com
 * Version: 2.6.2
 * Updated: 2026-03-30
 * Description: Customer-facing booking portal stylesheet.
 *              Mobile-first. Dark theme. Phones primary, desktop secondary.
 *              Fonts: Barlow Condensed (display) + Inter (body).
 *
 * Version History:
 *   2.6.2 - 2026-03-30 - is-selected calendar cell: replaced solid accent fill
 *                         with subtle blue tint + solid blue outline + soft outer
 *                         glow. Keeps date number and status label readable.
 *   2.6.1 - 2026-03-30 - Added .bk-closed-wrap, .bk-closed-icon styles for
 *                         closed-day message panel. Red theme mirrors the
 *                         yellow callus panel pattern.
 *   2.3.9 - 2026-03-26 - Processing spinner: .bk-btn-spinner CSS added with
 *                         @keyframes bk-spin animation for pay button.
 *   2.3.8 - 2026-03-26 - Confirmation sub text centered: margin auto +
 *                         text-align center on .bk-confirm-sub.
 *   2.3.7 - 2026-03-26 - Waiver block centered: margin auto on .bk-waiver-block.
 *   2.3.6 - 2026-03-26 - Confirmation card centered: added margin: 0 auto to
 *             .bk-confirm-card (was left-aligned due to missing auto margins).
 *   2.3.5 - 2026-03-25 - Back button layout fix: added justify-content: space-between
 *             to base .bk-step-footer rule. Removed justify-content: flex-end from
 *             desktop media query override -- was pushing both buttons to the right.
 *             Single-button steps still right-aligned via :only-child selector.
 *   2.3.4 - 2026-03-25 - (skipped)
 *   2.2.0 - 2026-03-21 - Added .bk-summary-row, .bk-summary-label,
 *                         .bk-summary-value for pay page booking summary.
 *                         Also added .bk-slot-price for slot card pricing.
 *   2.1.1 - 2026-03-20 - Green updated to #00bb00.
 *   2.1.0 - 2026-03-20 - Added .bk-slot-section-title, .bk-slot-none for
 *                         inline slot display below calendar.
 *   2.0.2 - 2026-03-20 - Fixed CSS content entity (HTML entity invalid in CSS,
 *                         use unicode escape). Hunter green. Progress sticky.
 *   2.0.1 - 2026-03-20 - Logo uses --accent-logo bg + accent border. Removed badge.
 *   2.0.0 - 2026-03-20 - Full rebuild for 7-step flow. Mobile-first, 48px touch
 *                         targets, custom calendar, slot cards, add-on cards,
 *                         participant forms, deposit/full pay options.
 *   1.1.0 - 2026-03-20 - Added welcome message, constraint badges, altitudeLabel.
 *   1.0.0 - 2026-03-17 - Initial build.
 */

/*--------------------------------------------------------------------------- Reset ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  height: 100%;
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
}

/*--------------------------------------------------------------------------- Variables ---- */
:root {
  --bg-base:      #0d0d0f;
  --bg-surface:   #16161a;
  --bg-raised:    #1c1c22;
  --bg-overlay:   #222228;
  --border:       #2a2a32;
  --border-light: #333340;
  --text-primary: #f0f0f4;
  --text-secondary: #b0b0c8;
  --text-dim:     #70708a;
  --accent:       #1a6fff;
  --accent-light: #4d8fff;
  --accent-dim:   rgba(26,111,255,0.15);
  --green:        #00bb00;
  --red:          #ff6450;
  --yellow:       #ffc832;
  --radius:       10px;
  --radius-sm:    6px;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-display: 'Barlow Condensed', sans-serif;
  --safe-bottom:  env(safe-area-inset-bottom, 0px);
}

/*--------------------------------------------------------------------------- Base ---- */
body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  min-height: 100vh;
  overflow-x: hidden;
}

#book-root {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/*--------------------------------------------------------------------------- Fullscreen states (loading/error) ---- */
.bk-fullscreen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  text-align: center;
  min-height: 100vh;
}

.bk-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-light);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: bk-spin 0.7s linear infinite;
  margin-bottom: 16px;
}

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

.bk-spinner-text {
  color: var(--text-dim);
  font-size: 15px;
}

.bk-error-icon  { font-size: 48px; margin-bottom: 16px; }
.bk-error-title { font-family: var(--font-display); font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.bk-error-body  { font-size: 15px; color: var(--text-secondary); max-width: 320px; }

/*--------------------------------------------------------------------------- Header ---- */
.bk-header {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.bk-header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

.bk-header-logo {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: var(--accent-logo, rgba(26,111,255,0.25));
  border: 1.5px solid var(--accent, #1a6fff);
  display: flex;
  align-items: center;
  justify-content: center;
}

.bk-header-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.bk-header-initials {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: var(--accent);
}

.bk-header-info { flex: 1; min-width: 0; }

.bk-header-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bk-header-tag {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 1px;
}

/*--------------------------------------------------------------------------- Progress bar ---- */
.bk-progress {
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  position: sticky;
  top: 69px;
  z-index: 90;
}

.bk-progress::-webkit-scrollbar { display: none; }

.bk-progress-inner {
  display: flex;
  align-items: center;
  padding: 10px 16px;
  max-width: 680px;
  margin: 0 auto;
  gap: 0;
  min-width: max-content;
}

.bk-pstep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.bk-pstep-dot {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-raised);
  transition: all 0.2s;
}

.bk-pstep-dot span {
  font-size: 11px;
  font-weight: 700;
  color: var(--text-dim);
}

.bk-pstep-label {
  font-size: 9px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.bk-pstep.is-active .bk-pstep-dot {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.bk-pstep.is-active .bk-pstep-dot span { color: var(--accent); }
.bk-pstep.is-active .bk-pstep-label    { color: var(--accent); }

.bk-pstep.is-done .bk-pstep-dot {
  border-color: var(--green);
  background: rgba(0,187,0,0.15);
}

.bk-pstep.is-done .bk-pstep-dot span {
  color: var(--green);
  font-size: 12px;
}

.bk-pstep.is-done .bk-pstep-dot span::before { content: '\2713'; }

.bk-pstep-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  min-width: 16px;
  margin-bottom: 13px;
  transition: background 0.2s;
}

.bk-pstep-line.is-done { background: var(--green); }

/*--------------------------------------------------------------------------- Welcome message ---- */
.bk-welcome {
  max-width: 680px;
  margin: 16px auto 0;
  padding: 14px 20px;
  background: var(--bg-surface);
  border-left: 3px solid var(--accent);
  border-radius: 0 8px 8px 0;
}

.bk-welcome p {
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/*--------------------------------------------------------------------------- Main + Step panels ---- */
.bk-main { flex: 1; }

.bk-step-panel {
  display: none;
  flex-direction: column;
  min-height: calc(100vh - 120px);
}

.bk-step-panel.is-active { display: flex; }

.bk-step-body {
  flex: 1;
  padding: 20px 16px 16px;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
}

.bk-step-footer {
  position: sticky;
  bottom: 0;
  background: var(--bg-base);
  border-top: 1px solid var(--border);
  padding: 12px 16px;
  padding-bottom: calc(12px + var(--safe-bottom));
  display: flex;
  gap: 10px;
  justify-content: space-between;
  max-width: 680px;
  margin: 0 auto;
  width: 100%;
  z-index: 50;
}

.bk-step-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 4px;
  letter-spacing: -0.3px;
}

.bk-step-sub {
  font-size: 14px;
  color: var(--text-secondary);
  margin-bottom: 20px;
}

/*--------------------------------------------------------------------------- Buttons ---- */
.bk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  min-width: 52px;
  padding: 0 24px;
  border: none;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, transform 0.1s;
  text-decoration: none;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.bk-btn:active { transform: scale(0.97); }
.bk-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.bk-btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: bk-spin 0.7s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
  flex-shrink: 0;
}

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

.bk-btn-primary {
  background: var(--accent);
  color: #fff;
}

.bk-btn-primary:hover:not(:disabled) { opacity: 0.9; }

.bk-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 1.5px solid var(--border-light);
}

.bk-btn-full { flex: 1; }
.bk-step-footer > .bk-btn-full:only-child { margin-left: auto; }

/*--------------------------------------------------------------------------- Activity grid ---- */
.bk-activity-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bk-act-card {
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}

.bk-act-card:active { background: var(--bg-raised); }

.bk-act-card.is-selected {
  border-color: var(--accent);
  background: var(--bg-raised);
}

.bk-act-top {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px;
}

.bk-act-icon {
  font-size: 28px;
  flex-shrink: 0;
  line-height: 1;
  margin-top: 2px;
}

.bk-act-info { flex: 1; min-width: 0; }

.bk-act-name {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.2;
}

.bk-act-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 3px;
  line-height: 1.4;
}

.bk-act-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.bk-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--bg-overlay);
  border: 1px solid var(--border-light);
  color: var(--text-dim);
}

.bk-badge-warn {
  background: rgba(255,200,50,0.1);
  border-color: rgba(255,200,50,0.3);
  color: var(--yellow);
}

.bk-act-price {
  flex-shrink: 0;
  text-align: right;
}

.bk-act-price-from {
  display: block;
  font-size: 10px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.bk-act-price-amt {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.1;
}

/*--------------------------------------------------------------------------- Child activity buttons ---- */
.bk-children {
  padding: 0 16px 14px;
}

.bk-children-label {
  font-size: 12px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 8px;
}

.bk-children-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.bk-child-btn {
  padding: 10px 16px;
  background: var(--bg-overlay);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.bk-child-btn.is-selected {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: var(--accent-light);
}

/*--------------------------------------------------------------------------- Tier list ---- */
.bk-tier-list {
  border-top: 1px solid var(--border);
}

.bk-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  min-height: 52px;
  transition: background 0.12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.bk-tier-row:last-child { border-bottom: none; }
.bk-tier-row:active     { background: var(--bg-overlay); }

.bk-tier-row.is-selected {
  background: var(--accent-dim);
  position: relative;
}

.bk-tier-row.is-selected::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--accent);
}

.bk-tier-row.bk-tier-empty {
  color: var(--text-dim);
  font-size: 13px;
  cursor: default;
  justify-content: center;
}

.bk-tier-alt {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  color: var(--text-primary);
}

.bk-tier-price {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-light);
}

.bk-tier-row.is-selected .bk-tier-price { color: var(--accent); }

/*--------------------------------------------------------------------------- Group size ---- */
.bk-group-row {
  margin-bottom: 20px;
  padding: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.bk-group-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  flex: 1;
}

.bk-group-ctrl {
  display: flex;
  align-items: center;
  gap: 0;
}

.bk-qty-btn {
  width: 44px;
  height: 44px;
  background: var(--bg-raised);
  border: 1.5px solid var(--border-light);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 22px;
  font-weight: 300;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.12s;
}

.bk-qty-btn:active { background: var(--accent-dim); border-color: var(--accent); }

.bk-qty-val {
  min-width: 44px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

/*--------------------------------------------------------------------------- Empty state ---- */
.bk-empty-state {
  padding: 40px 20px;
  text-align: center;
}

.bk-empty-icon  { font-size: 40px; margin-bottom: 12px; }
.bk-empty-title { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.bk-empty-body  { font-size: 14px; color: var(--text-secondary); }

/*--------------------------------------------------------------------------- Calendar ---- */
.bk-cal-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}

.bk-cal {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.bk-cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.bk-cal-nav {
  width: 44px;
  height: 44px;
  background: var(--bg-raised);
  border: 1.5px solid var(--border-light);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 24px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background 0.12s;
}

.bk-cal-nav:active { background: var(--accent-dim); border-color: var(--accent); }

.bk-cal-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  color: var(--text-primary);
}

.bk-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.bk-cal-dow {
  text-align:     center;
  padding:        6px 0;
  font-size:      11px;
  font-weight:    600;
  color:          var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.bk-cal-cell {
  min-height:     60px;
  border-radius:  6px;
  padding:        6px 8px;
  border:         1px solid var(--border);
  background:     var(--bg-surface);
  display:        flex;
  flex-direction: column;
  cursor:         default;
  position:       relative;
}

.bk-cal-day-num {
  font-size:   13px;
  font-weight: 600;
  color:       var(--text-dim);
  line-height: 1;
}

.bk-cal-status {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: 0.3px;
  margin-top:     4px;
}

.bk-cal-open   { color: var(--green);  }
.bk-cal-closed { color: var(--red);    }
.bk-cal-callus { color: var(--yellow); }

.bk-cal-day-price {
  font-size:      10px;
  font-weight:    600;
  color:          var(--accent);
  letter-spacing: 0.01em;
  margin-top:     2px;
}

.bk-cal-cell.bk-cal-empty {
  background:   transparent;
  border-color: transparent;
  cursor:       default;
}

.bk-cal-cell.is-past    { opacity: 0.35; cursor: default; }
.bk-cal-cell.is-unavail { opacity: 0.35; }

.bk-cal-cell.is-avail {
  background:  rgba(76,255,145,0.05);
  cursor:      pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.bk-cal-cell.is-avail .bk-cal-day-num { color: var(--text-primary); }
.bk-cal-cell.is-avail:hover            { border-color: var(--accent); }
.bk-cal-cell.is-avail:active           { background: var(--accent-dim); }

.bk-cal-cell.is-closed {
  background: rgba(255,100,80,0.12) !important;
  outline:    2px solid rgba(255,100,80,0.5);
  outline-offset: -2px;
  z-index:    1;
}
.bk-cal-cell.is-closed .bk-cal-day-num { color: var(--text-primary); }

.bk-cal-cell.is-callus {
  background: rgba(255,200,50,0.10) !important;
  outline:    2px solid rgba(255,200,50,0.4);
  outline-offset: -2px;
  z-index:    1;
  cursor:     pointer;
}
.bk-cal-cell.is-callus .bk-cal-day-num { color: var(--text-primary); }

/* Schedule-closed cells (regular day-of-week closed) -- muted, no label */
.bk-cal-cell.is-schedule {
  background: var(--bg-base);
  opacity:    0.45;
}

/* Call Us phone number block */
.bk-callus-wrap {
  display:       flex;
  align-items:   center;
  gap:           14px;
  margin-top:    16px;
  padding:       16px 18px;
  background:    rgba(255,200,50,0.08);
  border:        1px solid rgba(255,200,50,0.3);
  border-radius: 10px;
}

.bk-callus-icon {
  font-size:   28px;
  flex-shrink: 0;
  color:       #ffc832;
}

.bk-callus-title {
  font-size:     14px;
  font-weight:   600;
  color:         var(--text-primary);
  margin-bottom: 6px;
}

.bk-callus-phone {
  display:         inline-block;
  font-size:       22px;
  font-family:     var(--font-display);
  font-weight:     700;
  color:           #ffc832;
  text-decoration: none;
  letter-spacing:  0.02em;
}

.bk-callus-phone:hover { text-decoration: underline; }

/* Closed day message block */
.bk-closed-wrap {
  display:       flex;
  align-items:   center;
  gap:           14px;
  margin-top:    16px;
  padding:       16px 18px;
  background:    rgba(255,100,80,0.08);
  border:        1px solid rgba(255,100,80,0.3);
  border-radius: 10px;
}

.bk-closed-icon {
  font-size:   28px;
  flex-shrink: 0;
  color:       var(--red);
}

.bk-closed-title {
  font-size:   14px;
  font-weight: 600;
  color:       var(--text-primary);
  margin-bottom: 4px;
}

.bk-closed-sub {
  font-size: 13px;
  color:     var(--text-dim);
}

.bk-cal-cell.is-selected {
  background:     rgba(26,111,255,0.15) !important;
  border-color:   transparent !important;
  outline:        2px solid #1a6fff;
  outline-offset: -2px;
  box-shadow:     0 0 0 4px rgba(26,111,255,0.12);
}
.bk-cal-cell.is-selected .bk-cal-day-num   { color: #fff; font-weight: 700; }
.bk-cal-cell.is-selected .bk-cal-status    { color: var(--text-primary); }
.bk-cal-cell.is-selected .bk-cal-day-price { color: var(--text-secondary); }

/*--------------------------------------------------------------------------- Time slots ---- */
.bk-slot-section-title {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 20px 0 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bk-slot-none {
  padding: 16px 0;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}

.bk-slot-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bk-slot-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  min-height: 64px;
  transition: border-color 0.12s, background 0.12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.bk-slot-card:active { background: var(--bg-raised); }

.bk-slot-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.bk-slot-time {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.bk-slot-card.is-selected .bk-slot-time { color: var(--accent-light); }

.bk-slot-spots {
  font-size: 13px;
  color: var(--text-dim);
}

/*--------------------------------------------------------------------------- Add-ons ---- */
.bk-addon-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 12px;
}

.bk-addon-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  min-height: 64px;
  transition: border-color 0.12s, background 0.12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.bk-addon-card:active { background: var(--bg-raised); }

.bk-addon-card.is-selected {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.bk-addon-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.15s;
}

.bk-addon-check span { font-size: 14px; color: transparent; }

.bk-addon-card.is-selected .bk-addon-check {
  background: var(--accent);
  border-color: var(--accent);
}

.bk-addon-card.is-selected .bk-addon-check span { color: #fff; }

.bk-addon-info { flex: 1; min-width: 0; }

.bk-addon-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.bk-addon-desc {
  font-size: 13px;
  color: var(--text-secondary);
  margin-top: 2px;
}

.bk-addon-price {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  color: var(--accent-light);
  flex-shrink: 0;
}

.bk-addon-none {
  padding: 24px 0;
  font-size: 14px;
  color: var(--text-secondary);
  text-align: center;
}

/*--------------------------------------------------------------------------- Participant forms ---- */
.bk-participant {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 16px;
  margin-bottom: 16px;
}

.bk-participant-label {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--accent-light);
  margin-bottom: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bk-pform-row {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.bk-pform-row .bk-field { flex: 1; margin-bottom: 0; }

.bk-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-bottom: 12px;
}

.bk-field:last-child { margin-bottom: 0; }

.bk-field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.bk-req { color: var(--red); }

.bk-field input {
  height: 52px;
  background: var(--bg-raised);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 16px;
  padding: 0 14px;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
  -webkit-appearance: none;
}

.bk-field input:focus { border-color: var(--accent); }

.bk-field input[type="date"] {
  font-size: 15px;
  padding: 0 10px;
}

.bk-field.has-err input { border-color: var(--red); }

.bk-field-hint {
  font-size: 11px;
  color: var(--text-dim);
  margin-top: -2px;
}

.bk-field-err {
  font-size: 12px;
  color: var(--red);
  min-height: 16px;
}

/*--------------------------------------------------------------------------- Order summary ---- */
.bk-order-summary {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 16px;
}

.bk-sum-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  color: var(--text-secondary);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

.bk-sum-row:last-of-type { border-bottom: none; }

.bk-sum-total {
  font-weight: 700;
  color: var(--text-primary);
  font-size: 17px;
  padding-top: 10px;
  margin-top: 4px;
  border-top: 1px solid var(--border-light);
  border-bottom: none;
}

.bk-sum-meta {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

/*--------------------------------------------------------------------------- Pay options ---- */
.bk-pay-options { margin-bottom: 20px; }

/*--------------------------------------------------------------- Pay page summary rows ---- */
.bk-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 14px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  gap: 16px;
}

.bk-summary-row:last-of-type { border-bottom: none; }

.bk-summary-label {
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

.bk-summary-value {
  color: var(--text-primary);
  text-align: right;
}

.bk-payopt-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 10px;
}

.bk-payopt-row {
  display: flex;
  gap: 10px;
}

.bk-payopt {
  flex: 1;
  padding: 14px 12px;
  background: var(--bg-surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  min-height: 80px;
}

.bk-payopt:active { background: var(--bg-raised); }

.bk-payopt.is-selected {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.bk-payopt-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 4px;
}

.bk-payopt.is-selected .bk-payopt-name { color: var(--accent-light); }

.bk-payopt-amt {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.1;
  margin-bottom: 4px;
}

.bk-payopt-note {
  font-size: 11px;
  color: var(--text-dim);
  line-height: 1.3;
}

/*--------------------------------------------------------------------------- Stripe element ---- */
.bk-stripe-wrap {
  margin-bottom: 8px;
}

.bk-stripe-lock {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 10px;
  margin-bottom: 6px;
}

.bk-pay-error {
  background: rgba(255,100,80,0.1);
  border: 1px solid rgba(255,100,80,0.3);
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  font-size: 14px;
  color: var(--red);
  margin-top: 10px;
}

/*--------------------------------------------------------------------------- Confirmation ---- */
.bk-confirm-body {
  align-items: center;
  text-align: center;
  padding-top: 32px;
}

.bk-confirm-check {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(76,255,145,0.12);
  border: 2px solid var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: var(--green);
  margin-bottom: 20px;
  margin-left: auto;
  margin-right: auto;
}

.bk-confirm-title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.bk-confirm-sub {
  font-size: 15px;
  color: var(--text-secondary);
  margin: 0 auto 24px;
  max-width: 300px;
  text-align: center;
}

.bk-confirm-card {
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0;
  width: 100%;
  max-width: 400px;
  margin: 0 auto 16px;
  overflow: hidden;
  text-align: left;
}

.bk-confirm-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}

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

.bk-confirm-lbl {
  font-size: 13px;
  color: var(--text-secondary);
}

.bk-confirm-val {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  text-align: right;
}

.bk-status-ok { color: var(--green); }

.bk-waiver-block {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: rgba(255,200,50,0.08);
  border: 1px solid rgba(255,200,50,0.25);
  border-radius: var(--radius);
  padding: 14px 16px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
  text-align: left;
}

.bk-waiver-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,200,50,0.15);
  border: 1.5px solid var(--yellow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  color: var(--yellow);
  flex-shrink: 0;
}

.bk-waiver-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--yellow);
  margin-bottom: 3px;
}

.bk-waiver-body {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.4;
}

/*--------------------------------------------------------------------------- Footer ---- */
.bk-footer {
  padding: 20px 16px;
  text-align: center;
  font-size: 12px;
  color: var(--text-dim);
  border-top: 1px solid var(--border);
}

.bk-footer a { color: var(--text-dim); text-decoration: none; }
.bk-footer a:hover { color: var(--text-secondary); }

/*--------------------------------------------------------------------------- Desktop ---- */
@media (min-width: 600px) {

  .bk-step-body   { padding: 28px 24px 24px; }
  .bk-step-footer { padding: 16px 24px; }
  .bk-step-footer > .bk-btn-full:only-child { margin-left: auto; }
  .bk-step-footer { max-width: 680px; }
  .bk-btn-full    { flex: 0 0 auto; min-width: 220px; }

  .bk-step-title { font-size: 32px; }

  .bk-act-top    { padding: 20px; }
  .bk-act-name   { font-size: 20px; }

  .bk-cal-cell   { min-height: 52px; }

  .bk-slot-grid  { display: grid; grid-template-columns: repeat(3, 1fr); }

  .bk-payopt-row { gap: 14px; }
  .bk-payopt     { padding: 18px 16px; }

  .bk-header-inner { padding: 14px 24px; }
  .bk-progress-inner { justify-content: center; min-width: auto; }

}

/* ============================================================
   Booking Policy Banner (Step 1) -- added v2.3.0 2026-03-24
   ============================================================ */

.bk-policy-banner {
  display:        flex;
  align-items:    flex-start;
  gap:            10px;
  margin:         20px 0 4px;
  padding:        14px 16px;
  background:     rgba(26,111,255,0.07);
  border:         1px solid rgba(26,111,255,0.2);
  border-radius:  10px;
}

.bk-policy-icon {
  font-size:   18px;
  color:       var(--accent, #1a6fff);
  flex-shrink: 0;
  line-height: 1.3;
}

.bk-policy-body {
  flex:      1;
  min-width: 0;
}

.bk-policy-line {
  font-size:   13px;
  color:       rgba(255,255,255,0.65);
  line-height: 1.6;
}

.bk-policy-line + .bk-policy-line {
  margin-top: 4px;
}

.bk-policy-refund {
  color:     rgba(255,255,255,0.4);
  font-size: 12px;
}
/* ==============================================================================
   DISCOUNT CODE
   Step 5 discount/gift card entry field and messaging.
============================================================================== */

.bk-discount-wrap {
  margin-top:    16px;
  padding-top:   16px;
  border-top:    1px solid rgba(255,255,255,0.08);
}

.bk-discount-row {
  display:        flex;
  gap:            8px;
  align-items:    center;
}

.bk-discount-input {
  flex:           1;
  background:     rgba(255,255,255,0.06);
  border:         1px solid rgba(255,255,255,0.12);
  border-radius:  8px;
  color:          #fff;
  font-size:      14px;
  font-family:    var(--font-body);
  padding:        10px 14px;
  outline:        none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition:     border-color 0.15s;
}

.bk-discount-input::placeholder {
  text-transform: none;
  letter-spacing: normal;
  color:          rgba(255,255,255,0.3);
}

.bk-discount-input:focus {
  border-color: var(--accent);
}

.bk-discount-msg {
  margin-top: 8px;
  font-size:  13px;
  display:    none;
}

.bk-sum-discount {
  color: rgba(255,255,255,0.7);
}