/* ============================================================
   booking.css  SSP TOURS
   Smart booking page. Emerald Daylight.
   Hero: template slideshow (template-hero-section.css).
   Shared layout, form card, side panels and trust points come from
   main.css section 33 (inq- classes). This file only styles what is
   unique to the booking page: the process strip, the booking
   assistant, progress steps and every id / state class that
   booking.js uses (user-filled, auto-filled, step active/completed,
   panels shown by inline display). Only main.css variables are used.
   ============================================================ */

/* ── How booking works strip ─────────────────────────────── */
.booking-process {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--spacing-4);
  margin: 0;
  padding: 0;
  counter-reset: none;
}
.booking-process-step {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--border-primary), var(--shadow-xs);
  transition: var(--transition-elegant);
}
.booking-process-step:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--color-royal), var(--shadow-md); }
.booking-process-num {
  flex: none;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: 1;
  background: var(--sheen-gold);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.booking-process-step b {
  display: block;
  margin-bottom: var(--spacing-1);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-normal);
  color: var(--text-primary);
}
.booking-process-step span:not(.booking-process-num) {
  display: block;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--text-secondary);
}

/* ── Booking assistant (white card, ink text) ────────────── */
.smart-helper {
  position: relative;
  display: flex;
  gap: var(--spacing-4);
  align-items: flex-start;
  padding: var(--spacing-5) var(--spacing-6);
  border-radius: var(--radius-2xl);
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--border-primary), var(--shadow-md);
  animation: slideInDown 0.5s ease;
}
.smart-helper::before {
  content: '';
  position: absolute;
  left: 0; top: var(--spacing-4); bottom: var(--spacing-4);
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sheen-emerald);
}
.helper-avatar {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  background: var(--sheen-emerald);
  color: var(--color-white);
  font-size: var(--text-xl);
  box-shadow: 0 0 0 4px var(--color-white), 0 0 0 5px var(--color-gold-light), var(--shadow-metal);
}
.helper-content { flex: 1; min-width: 0; }
.helper-label {
  display: block;
  margin-bottom: var(--spacing-1);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--color-gold-dark);
}
.helper-text { margin: 0; color: var(--text-primary); font-size: var(--text-md); line-height: var(--leading-normal); }

/* ── Progress steps ──────────────────────────────────────── */
.booking-progress {
  padding: var(--spacing-6) var(--spacing-5) var(--spacing-5);
  border-radius: var(--radius-2xl);
  background: var(--bg-secondary);
  box-shadow: inset 0 0 0 1px var(--border-primary);
}
.progress-steps { display: flex; justify-content: space-between; position: relative; }
.progress-steps::before {
  content: '';
  position: absolute;
  top: 22px; left: 12.5%; right: 12.5%;
  height: 2px;
  background: var(--color-royal);
}
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--spacing-2); position: relative; z-index: 1; }
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-royal), 0 0 0 5px var(--bg-secondary);
  color: var(--text-secondary);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  transition: var(--transition-elegant);
}
.step-icon { display: none; }
.step-label {
  font-size: var(--text-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--text-secondary);
  transition: var(--transition-fast);
}
.step.active .step-number {
  background: var(--sheen-gold);
  color: var(--color-green-dark);
  box-shadow: 0 0 0 5px var(--bg-secondary), 0 0 0 6px var(--color-gold);
  transform: scale(1.06);
}
.step.active .step-label { color: var(--text-primary); }
.step.completed .step-number {
  background: var(--sheen-emerald);
  color: var(--color-white);
  box-shadow: 0 0 0 5px var(--bg-secondary), var(--shadow-metal);
}
.step.completed .step-label { color: var(--color-navy); }

/* ── Smart field states set by booking.js ────────────────── */
.smart-field { position: relative; }
.label-status {
  position: absolute; top: 0; right: var(--spacing-3);
  display: inline-flex; align-items: center; gap: var(--spacing-1);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-navy);
}
.smart-field .form-control.user-filled { border-color: var(--color-navy); background-color: var(--color-white); box-shadow: inset 3px 0 0 var(--color-navy); }
.smart-field .form-control.auto-filled { border-color: var(--color-gold); background-color: var(--color-gold-bg); animation: gentle-pulse 2s ease-in-out; }
.smart-field .form-control.locked { border-color: var(--color-gold-dark); background-color: var(--color-gold-bg); }
@keyframes gentle-pulse {
  0%, 100% { box-shadow: 0 0 0 0 var(--color-gold-glow); }
  50% { box-shadow: 0 0 0 6px var(--color-gold-glow-sm); }
}

/* Panels that booking.js shows with inline display */
#duration-display,
#package-dropdown-container,
#package-preview,
#duration-mismatch-panel,
#booking-summary { display: none; }

.duration-display {
  align-items: center; gap: var(--spacing-4);
  margin-top: var(--spacing-6);
  padding: var(--spacing-4) var(--spacing-5);
  border-radius: var(--radius-xl);
  background: var(--bg-secondary);
  box-shadow: inset 3px 0 0 var(--color-navy), inset 0 0 0 1px var(--border-primary);
}
.duration-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-royal);
  color: var(--color-navy);
  font-size: var(--text-lg);
}
.duration-label { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-secondary); }
.duration-value { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.1; color: var(--text-primary); }

.flexible-dates-option {
  margin-top: var(--spacing-5);
  padding: var(--spacing-3-5) var(--spacing-4);
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  box-shadow: inset 0 0 0 1px var(--border-primary);
}
.flexible-dates-option .form-check { margin: 0; }
.flexible-dates-option .form-check-label i { color: var(--color-navy); }

/* Package preview */
.package-preview-card {
  margin-top: var(--spacing-6);
  padding: var(--spacing-5);
  border-radius: var(--radius-2xl);
  background: var(--color-gold-bg);
  box-shadow: inset 0 0 0 1px var(--border-gold);
}
.preview-icon {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--color-royal);
  font-size: var(--text-2xl);
}
.preview-title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--text-primary); line-height: var(--leading-snug); }
.preview-duration { margin: var(--spacing-1) 0 var(--spacing-2); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--color-navy); }
.preview-description { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); }

/* Duration mismatch */
.duration-mismatch-panel { margin-top: var(--spacing-6); }
.mismatch-box {
  padding: var(--spacing-5);
  border-radius: var(--radius-2xl);
  background: var(--bg-secondary);
  box-shadow: inset 0 0 0 1px var(--border-gold), inset 4px 0 0 var(--color-gold);
}
.mismatch-details {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--spacing-2) var(--spacing-3);
  margin-bottom: var(--spacing-4);
  padding: var(--spacing-3) var(--spacing-4);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--border-primary);
  color: var(--text-secondary);
  font-size: var(--text-sm);
}
.mismatch-details i { color: var(--color-gold-dark); }
.mismatch-sep { width: 1px; height: 14px; background: var(--color-royal); }
#user-dates-summary,
#package-duration-summary { color: var(--text-primary); font-weight: var(--font-weight-bold); }
.mismatch-options { display: grid; gap: var(--spacing-3); }
.mismatch-option {
  margin: 0;
  padding: var(--spacing-3-5) var(--spacing-4) var(--spacing-3-5) var(--spacing-10);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--border-primary);
  transition: var(--transition-fast);
}
.mismatch-option:hover { box-shadow: 0 0 0 1px var(--color-royal), var(--shadow-sm); }
.mismatch-option .form-check-input { margin-left: calc(-1 * var(--spacing-6)); }
.mismatch-option strong { color: var(--text-primary); }
.mismatch-option span { font-size: var(--text-sm); font-weight: var(--font-weight-normal); color: var(--text-secondary); }

/* ── Summary ─────────────────────────────────────────────── */
.booking-summary-card {
  margin-bottom: var(--spacing-8);
  padding: var(--spacing-6);
  border-radius: var(--radius-2xl);
  background: var(--bg-secondary);
  box-shadow: inset 0 0 0 1px var(--border-primary);
}
.summary-item {
  height: 100%;
  padding: var(--spacing-5) var(--spacing-4);
  border-radius: var(--radius-xl);
  background: var(--color-white);
  box-shadow: 0 0 0 1px var(--border-primary);
  text-align: center;
}
.summary-icon { font-size: var(--text-2xl); color: var(--color-navy); margin-bottom: var(--spacing-2); }
.summary-label { font-size: var(--text-xs); font-weight: var(--font-weight-semibold); letter-spacing: var(--ls-wider); text-transform: uppercase; color: var(--text-secondary); margin-bottom: var(--spacing-1); }
.summary-value { font-weight: var(--font-weight-semibold); color: var(--text-primary); }
.summary-item .badge { margin-top: var(--spacing-2); }
.summary-item .badge.bg-success { background: var(--sheen-emerald) !important; color: var(--color-white); }
.summary-item .badge.bg-warning { background: var(--sheen-gold) !important; color: var(--color-green-dark); }
.summary-item .badge.bg-info { background: var(--sheen-silver) !important; color: var(--text-primary); box-shadow: 0 0 0 1px var(--color-royal); }

.booking-notes { min-height: 130px; }

/* ── Result alert from booking.js (it rewrites the class) ─── */
#booking-message { margin: 0; border-radius: var(--radius-xl); font-size: var(--text-base); line-height: var(--leading-normal); }
#booking-message strong { color: inherit; }

/* Aside: "Good to know" link spacing */
.booking-terms-card .link-brand { display: inline-block; margin-top: var(--spacing-1); }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 992px) {
  .booking-process { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .step-label { font-size: var(--text-xs); }
  .step-number { width: 38px; height: 38px; font-size: var(--text-base); }
  .progress-steps::before { top: 19px; }
  .smart-helper { flex-direction: column; padding: var(--spacing-5); }
  .booking-summary-card { padding: var(--spacing-4); }
}
@media (max-width: 560px) {
  .booking-process { grid-template-columns: 1fr; }
}