/* ═══════════════════════════════════════════════════════════════
   NHIEN HEAD SPA — Theme Override v1.0
   Tone: warm cream · mocha brown · elegant serif · minimal luxury
   Load AFTER main.css để ghi đè toàn bộ
═══════════════════════════════════════════════════════════════ */

@import url('/assets/css/font-mango-dream.css?v=1');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400;1,600&display=swap');

/* ══════════════════════════════════════════════════════════
   0. DESIGN TOKENS — ghi đè biến gốc
══════════════════════════════════════════════════════════ */
:root {
  /* Màu chính */
  --primary:    #9b7a6d;
  --primary-d:  #7a5f54;
  --primary-l:  #c4a898;
  --accent:     #9b7a6d;
  --secondary:  #6b5448;

  /* Nền & bề mặt */
  --bg:         #f0e8e1;
  --surface:    #faf6f2;
  --cream:      #f5f0eb;
  --cream-dk:   #ece4da;
  --warm-dark:  #3d2a22;

  /* Chữ */
  --dark:       #2d1f18;
  --muted:      #8a6f64;
  --text-mid:   #6b5448;

  /* Viền & bóng */
  --border:     rgba(155,122,109,.2);
  --shadow:     0 2px 12px rgba(92,64,51,.08);
  --shadow-md:  0 8px 28px rgba(92,64,51,.12);
  --shadow-lg:  0 18px 52px rgba(92,64,51,.16);

  /* Gradient */
  --gradient:   linear-gradient(135deg, #7a5f54 0%, #9b7a6d 60%, #c4a898 100%);
  --gradient-h: var(--gradient);
  --gradient-r: var(--gradient);
  --gradient-w: var(--gradient);

  /* Bán kính */
  --radius:     14px;
  --radius-sm:  10px;
  --radius-lg:  18px;
  --radius-xl:  24px;

  /* Font */
  --font:         'Mango Dream', 'Montserrat', -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Cormorant Garamond', Georgia, serif;
}

/* ══════════════════════════════════════════════════════════
   1. BASE BODY & TYPOGRAPHY
══════════════════════════════════════════════════════════ */
body {
  font-family: var(--font) !important;
  background: var(--bg) !important;
  color: var(--dark) !important;
  font-weight: 300;
}

/* Accent top bar → ẩn đường đỏ, thay bằng nâu */
body::before {
  background: var(--gradient) !important;
  height: 2px !important;
}

h1, h2, h3 { font-weight: 600; }

/* ══════════════════════════════════════════════════════════
   2. NAVBAR
══════════════════════════════════════════════════════════ */
.navbar {
  background: rgba(250,246,242,.97) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}
.navbar-brand {
  font-family: var(--font-display) !important;
  font-size: 1.25rem !important;
  font-style: italic;
  font-weight: 400 !important;
  color: var(--primary-d) !important;
  letter-spacing: 0 !important;
}
.navbar-links a:hover,
.navbar-links a.active {
  color: var(--primary-d) !important;
  background: rgba(155,122,109,.1) !important;
}

/* ══════════════════════════════════════════════════════════
   3. BOTTOM TAB BAR — Nhien style
══════════════════════════════════════════════════════════ */
.app-tabbar,
.customer-app-tabbar {
  background: rgba(250,246,242,.98) !important;
  border-top: 1px solid var(--border) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.app-tabbar .tab-item,
.customer-app-tabbar .tab-item {
  color: var(--muted) !important;
  font-family: var(--font) !important;
  font-weight: 400;
  font-size: .62rem !important;
  letter-spacing: .04em;
  gap: 3px;
}
.app-tabbar .tab-item.active,
.customer-app-tabbar .tab-item.active {
  color: var(--primary-d) !important;
}
.app-tabbar .tab-item.active svg,
.customer-app-tabbar .tab-item.active svg {
  stroke: var(--primary-d) !important;
}
.tab-badge {
  background: var(--primary-d) !important;
}

/* Center FAB button */
.tab-center-btn {
  background: var(--gradient) !important;
  box-shadow: 0 4px 16px rgba(122,95,84,.35) !important;
  border-radius: 50% !important;
  width: 52px !important; height: 52px !important;
}

/* ══════════════════════════════════════════════════════════
   4. CUSTOMER HOME — HERO (thay dark glass bằng warm spa)
══════════════════════════════════════════════════════════ */
.cu-app .cu-hero {
  background: linear-gradient(160deg, #3d2a22 0%, #5c3d30 45%, #7a5f54 100%) !important;
  position: relative;
  overflow: hidden;
}
.cu-app .cu-hero::before {
  content: '';
  position: absolute; top: -80px; right: -80px;
  width: 260px; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(196,168,152,.25) 0%, transparent 65%);
  pointer-events: none;
}
.cu-app .cu-hero::after {
  content: '';
  position: absolute; bottom: -30px; left: -30px;
  width: 160px; height: 160px; border-radius: 50%;
  background: radial-gradient(circle, rgba(155,122,109,.2) 0%, transparent 65%);
  pointer-events: none;
}

/* Greeting & title */
.cu-greeting {
  color: rgba(245,240,235,.6) !important;
  font-family: var(--font) !important;
  font-weight: 400 !important;
  letter-spacing: .14em !important;
}
.cu-hero-title {
  font-family: var(--font-display) !important;
  font-weight: 300 !important;
  font-style: italic;
  font-size: 2rem !important;
  line-height: 1.2 !important;
  color: #faf6f2 !important;
}
.cu-hero-title span {
  background: linear-gradient(90deg, #e8d5c8, #f5e8e0) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* Search bar */
.cu-search {
  background: rgba(250,246,242,.12) !important;
  border: 1px solid rgba(245,240,235,.2) !important;
  border-radius: 10px !important;
}
.cu-search input { color: #faf6f2 !important; }
.cu-search input::placeholder { color: rgba(245,240,235,.45) !important; }
.cu-search-btn {
  background: rgba(155,122,109,.7) !important;
  border-radius: 7px !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  letter-spacing: .06em;
}

/* Chips */
.cu-chip {
  background: rgba(250,246,242,.1) !important;
  border: 1px solid rgba(245,240,235,.18) !important;
  color: rgba(245,240,235,.8) !important;
  font-family: var(--font) !important;
  font-weight: 400 !important;
  border-radius: 6px !important;
  letter-spacing: .04em;
}

/* ══════════════════════════════════════════════════════════
   5. SECTION TITLES
══════════════════════════════════════════════════════════ */
.cu-sec-title {
  font-family: var(--font-display) !important;
  font-size: 1.15rem !important;
  font-weight: 400 !important;
  font-style: italic;
  color: var(--warm-dark) !important;
  letter-spacing: .01em;
}
.cu-see-all {
  color: var(--primary) !important;
  font-weight: 500 !important;
  font-size: .72rem !important;
  letter-spacing: .06em;
}

/* ══════════════════════════════════════════════════════════
   6. CATEGORY BUBBLES
══════════════════════════════════════════════════════════ */
.cu-cat-bubble {
  border-radius: 14px !important;
  box-shadow: 0 3px 12px rgba(92,64,51,.15) !important;
  /* Màu nền override từng item inline nên không ghi đè background */
}
.cu-cat-label {
  font-family: var(--font) !important;
  font-weight: 400 !important;
  font-size: .65rem !important;
  letter-spacing: .04em;
  color: var(--text-mid) !important;
}

/* ══════════════════════════════════════════════════════════
   7. UPCOMING BOOKING CARDS
══════════════════════════════════════════════════════════ */
.cu-booking-card {
  background: linear-gradient(135deg, #ece4da, #f5ede6) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
}
.cu-bk-dot {
  background: rgba(155,122,109,.15) !important;
  border-radius: 12px !important;
}
.cu-bk-name { color: var(--warm-dark) !important; }
.cu-bk-time { color: var(--muted) !important; }
.cu-bk-status.confirmed {
  background: rgba(14,116,58,.12) !important;
  color: #0f5a2e !important;
}
.cu-bk-status.pending {
  background: rgba(155,122,109,.15) !important;
  color: var(--primary-d) !important;
}

/* ══════════════════════════════════════════════════════════
   8. SALON CARDS (horizontal scroll + grid)
══════════════════════════════════════════════════════════ */
.cu-salon-card,
.salon-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow) !important;
}
.cu-salon-card:hover,
.salon-card:hover {
  box-shadow: var(--shadow-md) !important;
}
.cu-salon-badge {
  background: var(--gradient) !important;
  color: #faf6f2 !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  letter-spacing: .06em;
  border-radius: 4px !important;
}
.cu-salon-name,
.salon-card-title {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  color: var(--dark) !important;
}
.cu-salon-star { color: #b8973a !important; }

/* ══════════════════════════════════════════════════════════
   9. WHY SECTION CARDS
══════════════════════════════════════════════════════════ */
.cu-why-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
}
.cu-why-card:hover { border-color: var(--primary) !important; }
.cu-why-title {
  font-family: var(--font) !important;
  font-weight: 600 !important;
  color: var(--dark) !important;
}
.cu-why-desc { color: var(--muted) !important; }

/* ══════════════════════════════════════════════════════════
   10. PARTNER CTA BLOCK
══════════════════════════════════════════════════════════ */
.cu-partner-cta {
  background: linear-gradient(160deg, #3d2a22 0%, #5c3d30 100%) !important;
  border: 1px solid rgba(155,122,109,.25) !important;
  border-radius: 18px !important;
}
.cu-partner-cta h3 { font-family: var(--font-display) !important; font-style: italic; font-weight: 400 !important; }
.cu-partner-btn {
  background: var(--gradient) !important;
  border-radius: 6px !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  letter-spacing: .06em;
  box-shadow: 0 6px 20px rgba(122,95,84,.35) !important;
}

/* ══════════════════════════════════════════════════════════
   11. BOOKING PAGE (booking.php)
══════════════════════════════════════════════════════════ */
/* Top summary bar */
.bk-top {
  background: var(--gradient) !important;
  border-radius: 16px !important;
}
.bk-top-pill {
  background: rgba(250,246,242,.18) !important;
  border-radius: 6px !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
}
.bk-top-pill.set {
  background: rgba(250,246,242,.92) !important;
  color: var(--primary-d) !important;
}

/* Section cards */
.bk-section {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
}
.bk-section-head { border-color: var(--border) !important; }
.bk-section-title {
  font-family: var(--font) !important;
  font-weight: 600 !important;
}
.bk-section-edit { color: var(--primary) !important; }
.svc-row { border-color: var(--border) !important; }

/* Staff pick */
.staff-pick-name { font-weight: 600 !important; color: var(--dark) !important; }
.staff-pick-sub { color: var(--muted) !important; }

/* Heart button */
.pref-heart-btn {
  border-color: var(--border) !important;
  background: var(--surface) !important;
}
.pref-heart-btn.on { background: rgba(180,80,70,.1) !important; border-color: rgba(180,80,70,.25) !important; }

/* Time pick */
.time-pick-icon { background: rgba(155,122,109,.1) !important; border-radius: 11px !important; }
.time-pick-main { color: var(--dark) !important; }

/* Popup */
.bk-popup-box {
  background: var(--surface) !important;
  border-radius: 22px 22px 0 0 !important;
}
.bk-popup-handle { background: var(--border) !important; }
.bk-popup-head h3 { font-family: var(--font) !important; font-weight: 600 !important; }
.bk-popup-close { background: var(--cream-dk) !important; color: var(--muted) !important; }
.bk-popup-head { border-color: var(--border) !important; }
.bk-popup-foot { border-color: var(--border) !important; }
.sp-row { border-color: var(--border) !important; }

/* ══════════════════════════════════════════════════════════
   12. DATE & TIME PICKER
══════════════════════════════════════════════════════════ */
/* Calendar grid */
.date-chip, .dt-chip {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--dark) !important;
  border-radius: 10px !important;
  font-family: var(--font) !important;
}
.date-chip.selected, .dt-chip.active {
  background: var(--gradient) !important;
  color: #faf6f2 !important;
  border-color: transparent !important;
}
.date-chip.today { border-color: var(--primary) !important; }
.date-chip.unavail, .dt-chip.unavail {
  opacity: .35 !important;
  background: var(--cream-dk) !important;
}
/* Time slot buttons */
.cal-slot, .t-btn, .time-slot-btn {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--dark) !important;
  border-radius: 10px !important;
  font-family: var(--font) !important;
  transition: all .15s !important;
}
.cal-slot.active, .t-btn.selected, .time-slot-btn.selected {
  background: var(--gradient) !important;
  color: #faf6f2 !important;
  border-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════
   13. MY BOOKINGS PAGE
══════════════════════════════════════════════════════════ */
.my-booking-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
}
.my-booking-card:hover { box-shadow: var(--shadow-md) !important; }

/* Status badges */
.badge-confirmed { background: #e8f2ed !important; color: #1a5c37 !important; }
.badge-pending   { background: rgba(155,122,109,.12) !important; color: var(--primary-d) !important; }
.badge-completed { background: #e8f2ed !important; color: #1a5c37 !important; }
.badge-cancelled { background: #f9ebe9 !important; color: #8a2c1c !important; }

/* ══════════════════════════════════════════════════════════
   14. LOGIN / AUTH PAGES
══════════════════════════════════════════════════════════ */
body.auth-body {
  background: linear-gradient(160deg, #3d2a22 0%, #5c3d30 50%, #7a5f54 100%) !important;
  font-family: var(--font) !important;
}
/* Logo area */
.auth-card {
  border-radius: 20px !important;
  box-shadow: 0 24px 64px rgba(30,15,10,.35) !important;
  overflow: hidden;
}
.auth-top {
  background: linear-gradient(160deg, #3d2a22 0%, #5c3d30 100%) !important;
  padding: 32px 28px 24px !important;
}
.auth-top h1 {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-size: 1.5rem !important;
  font-weight: 300 !important;
  letter-spacing: .02em;
}
.auth-top p { color: rgba(245,240,235,.65) !important; }
.auth-logo {
  background: rgba(245,240,235,.12) !important;
  border-radius: 14px !important;
}
/* Form fields */
.auth-body-wrap { background: var(--surface) !important; }
.auth-field label {
  font-family: var(--font) !important;
  font-weight: 500 !important;
  color: var(--text-mid) !important;
  letter-spacing: .08em;
  font-size: .68rem !important;
}
.auth-field input,
.auth-field select {
  font-family: var(--font) !important;
  background: var(--cream) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--dark) !important;
}
.auth-field input:focus,
.auth-field select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(155,122,109,.15) !important;
  background: #fff !important;
}
/* Submit button */
.auth-btn {
  background: var(--gradient) !important;
  border-radius: 10px !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  letter-spacing: .08em;
  box-shadow: 0 4px 16px rgba(122,95,84,.28) !important;
}
.auth-btn:hover { opacity: .9 !important; }
/* Links */
.auth-link a { color: var(--primary-d) !important; font-weight: 600 !important; }
.auth-mini { color: var(--muted) !important; }
.auth-mini:hover { color: var(--primary) !important; }
/* Divider */
.auth-divider { color: var(--muted) !important; }
.auth-divider::before,
.auth-divider::after { background: var(--border) !important; }
/* Error / success */
.auth-err { background: #fbecea !important; border-color: #f0b5ac !important; color: #8a2c1c !important; }
.auth-ok  { background: #e8f2ed !important; border-color: rgba(14,116,58,.2) !important; color: #1a5c37 !important; }
/* Lang switcher */
.auth-lang button {
  border-color: rgba(245,240,235,.35) !important;
  background: rgba(245,240,235,.12) !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
}
.auth-lang button.active,
.auth-lang button:hover {
  background: rgba(245,240,235,.28) !important;
  border-color: rgba(245,240,235,.65) !important;
}

/* ══════════════════════════════════════════════════════════
   15. PROFILE PAGE
══════════════════════════════════════════════════════════ */
.prof-hero {
  background: var(--gradient) !important;
  border-radius: 0 0 24px 24px !important;
}
.prof-name {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-weight: 300 !important;
  color: #faf6f2 !important;
}
.prof-card,
.profile-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
}
.prof-field-label {
  font-family: var(--font) !important;
  font-weight: 500 !important;
  letter-spacing: .07em;
  color: var(--muted) !important;
  font-size: .68rem !important;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════
   16. CHOOSE SALON / SEARCH PAGE
══════════════════════════════════════════════════════════ */
.choose-hero,
.search-hero,
.page-hero {
  background: var(--gradient) !important;
}
/* Filter pills */
.filter-pill, .cat-pill {
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  color: var(--text-mid) !important;
  border-radius: 8px !important;
  font-family: var(--font) !important;
  font-weight: 400 !important;
}
.filter-pill.active, .cat-pill.active {
  background: var(--gradient) !important;
  color: #faf6f2 !important;
  border-color: transparent !important;
}

/* ══════════════════════════════════════════════════════════
   17. BUTTONS GLOBAL
══════════════════════════════════════════════════════════ */
.btn-primary, .btn.btn-primary {
  background: var(--gradient) !important;
  color: #faf6f2 !important;
  border: none !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  letter-spacing: .05em;
  border-radius: 10px !important;
  box-shadow: 0 4px 14px rgba(122,95,84,.28) !important;
}
.btn-primary:hover, .btn.btn-primary:hover { opacity: .9 !important; }
.btn-outline, .btn.btn-outline {
  border-color: var(--primary) !important;
  color: var(--primary) !important;
  font-family: var(--font) !important;
}
.btn-ghost, .btn.btn-ghost {
  background: rgba(155,122,109,.08) !important;
  color: var(--primary) !important;
  font-family: var(--font) !important;
}
/* Book now / confirm button */
.bk-confirm-btn, .book-now-btn, .btn-confirm {
  background: var(--gradient) !important;
  color: #faf6f2 !important;
  border: none !important;
  border-radius: 12px !important;
  font-family: var(--font) !important;
  font-weight: 500 !important;
  letter-spacing: .08em;
  box-shadow: 0 6px 20px rgba(122,95,84,.3) !important;
}

/* ══════════════════════════════════════════════════════════
   18. SALON DETAIL PAGE
══════════════════════════════════════════════════════════ */
.salon-hero, .confirm-hero {
  background: var(--gradient) !important;
}
.salon-info-card, .opt-card, .g-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
}
.opt-card.active, .g-card.active {
  border-color: var(--primary) !important;
  background: rgba(155,122,109,.06) !important;
}

/* ══════════════════════════════════════════════════════════
   19. NOTIFICATION / HISTORY PAGE
══════════════════════════════════════════════════════════ */
.nd-item, .nd-biz-row {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--border) !important;
}
.nd-item.unread {
  background: rgba(155,122,109,.06) !important;
  border-left: 3px solid var(--primary) !important;
}

/* ══════════════════════════════════════════════════════════
   20. FORMS & INPUT GLOBAL
══════════════════════════════════════════════════════════ */
.form-control, input[type=text], input[type=email],
input[type=tel], input[type=password], textarea, select {
  font-family: var(--font) !important;
  background: var(--cream) !important;
  border: 1.5px solid var(--border) !important;
  border-radius: 10px !important;
  color: var(--dark) !important;
}
.form-control:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(155,122,109,.14) !important;
  background: #fff !important;
  outline: none !important;
}
label {
  font-family: var(--font) !important;
  font-weight: 500 !important;
  color: var(--text-mid) !important;
}

/* ══════════════════════════════════════════════════════════
   21. LOADING / SPLASH SCREEN
══════════════════════════════════════════════════════════ */
#app-loading {
  background: linear-gradient(160deg, #3d2a22 0%, #5c3d30 100%) !important;
}
.loading-logo {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-weight: 300 !important;
  color: #faf6f2 !important;
}
.loading-bar {
  background: var(--gradient) !important;
}

/* ══════════════════════════════════════════════════════════
   22. DARK MODE — bật nếu cần, giữ tone ấm
══════════════════════════════════════════════════════════ */
html.dark-mode {
  --bg:       #1e1410 !important;
  --surface:  #2a1c17 !important;
  --dark:     #f0e8e1 !important;
  --border:   rgba(155,122,109,.22) !important;
  --muted:    #9a7a6f !important;
}
html.dark-mode .app-tabbar,
html.dark-mode .customer-app-tabbar {
  background: rgba(26,16,12,.97) !important;
  border-color: rgba(155,122,109,.2) !important;
}
html.dark-mode .auth-body-wrap { background: #2a1c17 !important; }
html.dark-mode .auth-field input,
html.dark-mode .auth-field select { background: #1e1410 !important; color: #f0e8e1 !important; }

/* ══════════════════════════════════════════════════════════
   23. PARTNER / STAFF SIDEBAR (giữ nhất quán)
══════════════════════════════════════════════════════════ */
.sidebar {
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
}
.sidebar-item.active {
  background: rgba(155,122,109,.1) !important;
  color: var(--primary-d) !important;
  border-left: 3px solid var(--primary-d) !important;
}
.sidebar-item:hover {
  background: rgba(155,122,109,.06) !important;
  color: var(--primary) !important;
}
.partner-topbar {
  background: rgba(250,246,242,.97) !important;
  border-bottom: 1px solid var(--border) !important;
}

/* ══════════════════════════════════════════════════════════
   24. WAITLIST / SẢNH CHỜ
══════════════════════════════════════════════════════════ */
.mb-hero, .staff-hero {
  background: var(--gradient) !important;
}

/* ══════════════════════════════════════════════════════════
   25. SCROLLBAR tông ấm
══════════════════════════════════════════════════════════ */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c4a898, #9b7a6d) !important;
}

/* ══════════════════════════════════════════════════════════
   26. MISC — chip, chip active, notif badge
══════════════════════════════════════════════════════════ */
.chip { background: rgba(155,122,109,.09) !important; color: var(--primary-d) !important; }
.notif-badge, .tab-badge { background: var(--primary-d) !important; }

/* ══════════════════════════════════════════════════════════
   27. BOOKING CONFIRM PAGE
══════════════════════════════════════════════════════════ */
.confirm-hero { background: var(--gradient) !important; }
.confirm-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow) !important;
}
.confirm-title {
  font-family: var(--font-display) !important;
  font-style: italic;
  font-weight: 300 !important;
  color: #faf6f2 !important;
}

/* ══════════════════════════════════════════════════════════
   28. MOBILE REFINEMENTS
══════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .cu-hero-title { font-size: 1.75rem !important; }
  .cu-sec-title  { font-size: 1.05rem !important; }
  .auth-top h1   { font-size: 1.3rem !important; }
}