/* ==========================================================================
   KESAVI TOURS & TRAVELS PVT. LTD. - COMPLETE BOOKING WORKSPACE STYLESHEET
   Luxury Blue-and-White Design System
   ========================================================================== */

:root {
  /* Primary & Brand Colors */
  --primary-blue: #2563eb;
  --primary-blue-hover: #1d4ed8;
  --primary-blue-light: #eff6ff;
  --primary-blue-border: #bfdbfe;
  
  --brand-navy: #0f172a;
  --brand-slate: #1e293b;
  --brand-muted: #64748b;
  --brand-light: #f8fafc;
  --border-color: #e2e8f0;
  --card-bg: #ffffff;

  /* Status Colors matching Kesavi Standards */
  --status-avail-bg: #ecfdf5;
  --status-avail-border: #86efac;
  --status-avail-text: #166534;
  --status-avail-dot: #22c55e;

  --status-booked-bg: #ffe4e6;
  --status-booked-border: #fca5a5;
  --status-booked-text: #9f1239;
  --status-booked-dot: #f43f5e;

  --status-pending-bg: #fefce8;
  --status-pending-border: #fde047;
  --status-pending-text: #854d0e;
  --status-pending-dot: #eab308;

  --status-selected-bg: #2563eb;
  --status-selected-border: #1d4ed8;
  --status-selected-text: #ffffff;
  --status-selected-dot: #2563eb;

  --status-blocked-bg: #f1f5f9;
  --status-blocked-border: #cbd5e1;
  --status-blocked-text: #475569;
  --status-blocked-dot: #64748b;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow-subtle: 0 1px 3px rgba(15, 23, 42, 0.04), 0 1px 2px rgba(15, 23, 42, 0.02);
  --shadow-card: 0 4px 12px rgba(15, 23, 42, 0.05), 0 1px 3px rgba(15, 23, 42, 0.02);
  --shadow-float: 0 10px 25px -5px rgba(15, 23, 42, 0.08), 0 8px 10px -6px rgba(15, 23, 42, 0.04);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

html, body {
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
  background: #f8fafc;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--brand-navy);
}

.d-none { display: none !important; }

/* ==========================================================================
   MAIN PAGE CONTAINER (Full Viewport Layout)
   ========================================================================== */
.booking-workspace-app {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 70px);
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 8px 16px;
  box-sizing: border-box;
}

/* Top Header is managed globally in style.css */


/* ==========================================================================
   2. 7-STEP BOOKING PROGRESS STEPPER
   ========================================================================== */
.booking-progress-container {
  padding: 4px 0 6px 0;
  flex-shrink: 0;
  width: 100%;
}

.progress-stepper-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 100%;
  margin: 0;
  position: relative;
}

.progress-step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
  cursor: pointer;
  user-select: none;
}

.step-circle-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.step-title-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--brand-muted);
  transition: color 0.15s;
}

/* Completed Step */
.progress-step-node.completed .step-circle-badge {
  background: var(--primary-blue);
  color: #ffffff;
  border: 2px solid var(--primary-blue);
}

.progress-step-node.completed .step-title-label {
  color: var(--brand-slate);
  font-weight: 600;
}

/* Active Step */
.progress-step-node.active .step-circle-badge {
  background: var(--primary-blue);
  color: #ffffff;
  border: 2px solid var(--primary-blue);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
  transform: scale(1.06);
}

.progress-step-node.active .step-title-label {
  color: var(--primary-blue);
  font-weight: 800;
}

/* Upcoming Steps */
.progress-step-node.upcoming .step-circle-badge {
  background: #ffffff;
  color: #94a3b8;
  border: 2px solid #cbd5e1;
}

.progress-step-node.upcoming .step-title-label {
  color: #94a3b8;
  font-weight: 500;
}

/* Connecting Lines */
.step-connecting-line {
  flex: 1;
  height: 3px;
  background: #e2e8f0;
  margin: 0 6px 16px 6px;
  border-radius: 2px;
  position: relative;
  z-index: 1;
}

.step-connecting-line.active-fill {
  background: var(--primary-blue);
}

/* ==========================================================================
   PANE WRAPPER
   ========================================================================== */
.step-pane {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

/* ==========================================================================
   STEP 1: SELECT TOUR PANE
   ========================================================================== */
.step1-pane-container {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 8px;
}

.step1-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  gap: 16px;
}

.step1-title-col {
  display: flex;
  flex-direction: column;
}

.step1-main-heading {
  font-size: 16px;
  font-weight: 800;
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  gap: 8px;
}

.step1-sub-heading {
  font-size: 12px;
  color: var(--brand-muted);
}

.step1-search-wrap {
  display: flex;
  align-items: center;
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  padding: 6px 14px;
  width: 380px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: all 0.18s;
  gap: 8px;
}

.step1-search-wrap:focus-within {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.step1-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 13px;
  font-family: inherit;
  color: var(--brand-navy);
  width: 100%;
}

.step1-search-clear-btn {
  background: transparent;
  border: none;
  color: #94a3b8;
  cursor: pointer;
  font-size: 12px;
  padding: 2px;
  display: none;
}

.step1-search-clear-btn.show { display: block; }
.step1-search-clear-btn:hover { color: #ef4444; }

.step1-count-badge {
  font-size: 11.5px;
  font-weight: 700;
  background: #eff6ff;
  color: var(--primary-blue);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid #bfdbfe;
  white-space: nowrap;
}

/* Tour Cards Grid */
.step-tours-grid-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 2px 10px 2px;
  min-height: 0;
}

.step-tours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

/* Individual Luxury Tour Card */
.tour-select-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-subtle);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  position: relative;
  user-select: none;
}

.tour-select-card:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
  box-shadow: var(--shadow-card);
}

.tour-select-card.selected {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22), 0 8px 16px rgba(37, 99, 235, 0.1);
  background: #f8faff;
}

.tour-card-banner {
  position: relative;
  height: 115px;
  width: 100%;
  overflow: hidden;
  background: #e2e8f0;
}

.tour-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.tour-select-card:hover .tour-card-img {
  transform: scale(1.04);
}

.tour-card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.4) 0%, rgba(15, 23, 42, 0.1) 40%, rgba(15, 23, 42, 0.6) 100%);
  display: flex;
  justify-content: space-between;
  padding: 8px;
  align-items: flex-start;
}

.tour-badge-num {
  background: rgba(15, 23, 42, 0.85);
  color: #ffffff;
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(4px);
  letter-spacing: 0.03em;
  border: 1px solid rgba(255,255,255,0.2);
}

.tour-badge-active {
  background: #10b981;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.tour-card-select-indicator {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1.5px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
  transition: all 0.15s;
}

.tour-select-card.selected .tour-card-select-indicator {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #ffffff;
  box-shadow: 0 2px 4px rgba(37, 99, 235, 0.4);
}

.tour-card-body {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 6px;
}

.tour-card-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--brand-navy);
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.tour-select-card.selected .tour-card-title {
  color: var(--primary-blue);
}

.tour-card-route {
  font-size: 11.5px;
  color: var(--brand-muted);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tour-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f1f5f9;
  padding-top: 6px;
  margin-top: 2px;
}

.tour-duration-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 4px;
}

.tour-price-tag {
  font-size: 13px;
  font-weight: 800;
  color: #0f172a;
}

.tour-price-tag span {
  font-size: 10.5px;
  font-weight: 500;
  color: var(--brand-muted);
}

/* States: Loading, Empty, Error */
.state-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: var(--radius-lg);
  margin: 12px 0;
  gap: 12px;
}

.spinner-icon {
  font-size: 32px;
  color: var(--primary-blue);
  animation: spin 1s linear infinite;
}

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

.state-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--brand-navy);
}

.state-desc {
  font-size: 12.5px;
  color: var(--brand-muted);
  max-width: 400px;
}

.btn-state-action {
  background: var(--primary-blue);
  color: #ffffff;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-state-action:hover {
  background: var(--primary-blue-hover);
}

/* ==========================================================================
   3. SELECTED INFORMATION CARDS (FOR STEPS 2, 3, 4, 5, 6)
   ========================================================================== */
.selected-info-cards-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.3fr;
  gap: 12px;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.info-summary-card {
  background: #ffffff;
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--shadow-subtle);
  min-height: 64px;
}

.card-tour-thumbnail {
  width: 58px;
  height: 52px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.08);
}

.info-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  justify-content: center;
}

.info-card-header-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 2px;
}

.info-card-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--brand-muted);
  letter-spacing: 0.03em;
}

.active-pill-badge {
  background: #dcfce7;
  color: #15803d;
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.info-card-heading {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--brand-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}

.info-card-sub {
  font-size: 11px;
  color: var(--brand-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.info-card-icon-box {
  width: 38px;
  height: 38px;
  border-radius: 8px;
  background: var(--primary-blue-light);
  color: var(--primary-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  border: 1px solid var(--primary-blue-border);
}

/* ==========================================================================
   STEP 2: DEPARTURE DATE SELECTION PANE (CALENDAR & SCHEDULE LIST)
   ========================================================================== */
.step2-main-workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 8px;
}

.step2-tour-summary-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius-md);
  padding: 8px 14px;
  box-shadow: var(--shadow-subtle);
  flex-shrink: 0;
  gap: 12px;
}

.step2-tour-meta-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.step2-tour-img-thumb {
  width: 48px;
  height: 42px;
  border-radius: 6px;
  object-fit: cover;
}

.step2-tour-info-col {
  display: flex;
  flex-direction: column;
}

.step2-tour-title-text {
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-navy);
}

.step2-tour-sub-text {
  font-size: 11.5px;
  color: var(--brand-muted);
}

.step2-dates-layout {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 16px;
  align-items: start;
}

/* Calendar Card Container */
.calendar-card-container {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}

.calendar-header-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  flex-shrink: 0;
}

.calendar-month-year-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  gap: 8px;
}

.calendar-nav-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}

.btn-cal-nav {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #f8fafc;
  border: 1.5px solid #cbd5e1;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 12px;
}

.btn-cal-nav:hover {
  background: var(--primary-blue-light);
  border-color: var(--primary-blue);
  color: var(--primary-blue);
}

.btn-cal-today {
  padding: 4px 10px;
  border-radius: 6px;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}

.btn-cal-today:hover {
  background: #e2e8f0;
  color: var(--brand-navy);
}

/* Calendar Weekdays Header */
.calendar-weekdays-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
  padding: 4px 0;
  border-bottom: 1px solid #e2e8f0;
  margin-bottom: 4px;
  flex-shrink: 0;
}

.cal-weekday-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
}

.cal-weekday-label.weekend {
  color: #ef4444;
}

/* Calendar Monthly Days Grid */
.calendar-days-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 52px;
  gap: 5px;
  margin-top: 4px;
}

.cal-day-cell {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 52px;
  min-height: 52px;
  max-height: 52px;
  box-sizing: border-box;
  position: relative;
  transition: all 0.15s;
  user-select: none;
}

.cal-day-cell.day-empty {
  background: transparent;
  border-color: transparent;
}

.cal-day-cell.day-past {
  background: #f1f5f9;
  opacity: 0.45;
  cursor: not-allowed;
}

.cal-day-cell.day-no-tour {
  background: #ffffff;
  color: #94a3b8;
}

.cal-day-cell.day-has-departure {
  background: #ecfdf5;
  border-color: #86efac;
  cursor: pointer;
}

.cal-day-cell.day-has-departure:hover {
  transform: scale(1.03);
  border-color: #22c55e;
  box-shadow: 0 2px 6px rgba(34, 197, 94, 0.2);
}

.cal-day-cell.day-has-departure .cal-day-number {
  color: #15803d;
  font-weight: 800;
}

.cal-day-cell.day-sold-out {
  background: #ffe4e6;
  border-color: #fca5a5;
  cursor: not-allowed;
  opacity: 0.75;
}

.cal-day-cell.day-sold-out .cal-day-number {
  color: #9f1239;
}

.cal-day-cell.day-selected {
  background: var(--primary-blue) !important;
  border-color: var(--primary-blue-hover) !important;
  box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35);
  transform: scale(1.04);
}

.cal-day-cell.day-selected .cal-day-number,
.cal-day-cell.day-selected .cal-day-badge-price,
.cal-day-cell.day-selected .cal-day-badge-status {
  color: #ffffff !important;
}

.cal-day-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cal-day-number {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
}

.cal-day-check {
  font-size: 9px;
  color: #ffffff;
}

.cal-day-badge-price {
  font-size: 9px;
  font-weight: 800;
  color: #166534;
  line-height: 1.1;
}

.cal-day-badge-status {
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  color: #15803d;
  line-height: 1;
}

/* Right Side: Departure Schedules List */
.departure-schedules-card {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  height: 460px;
  max-height: 460px;
  box-sizing: border-box;
}

.schedules-header-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-navy);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.schedules-scroll-list {
  flex: 1 1 auto;
  overflow-y: auto;
  max-height: 380px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-right: 4px;
}

.departure-item-card {
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: all 0.18s;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.departure-item-card:hover {
  background: #eff6ff;
  border-color: #93c5fd;
}

.departure-item-card.selected {
  background: #eff6ff;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
}

.dep-item-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dep-item-date {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-navy);
}

.departure-item-card.selected .dep-item-date {
  color: var(--primary-blue);
}

.dep-item-status-pill {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.dep-item-status-pill.open { background: #dcfce7; color: #15803d; }
.dep-item-status-pill.full { background: #fee2e2; color: #b91c1c; }

.dep-item-meta {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--brand-muted);
}

/* ==========================================================================
   STEP 3: BUS SELECTION PANE
   ========================================================================== */
.step3-main-workspace {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: 10px;
}

.step3-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.step3-buses-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px 2px 10px 2px;
  min-height: 0;
}

.step3-buses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
}

.bus-choice-card {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  box-shadow: var(--shadow-subtle);
  cursor: pointer;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 12px;
  position: relative;
  user-select: none;
}

.bus-choice-card:hover {
  transform: translateY(-2px);
  border-color: #93c5fd;
  box-shadow: var(--shadow-card);
}

.bus-choice-card.selected {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.22), 0 8px 20px rgba(37, 99, 235, 0.12);
  background: #f8faff;
}

.bus-choice-card.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f8fafc;
  border-color: #e2e8f0;
  transform: none !important;
  box-shadow: none !important;
}

.bus-card-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bus-card-tags-left {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bus-tag-badge {
  background: #eff6ff;
  color: #2563eb;
  font-size: 11px;
  font-weight: 800;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid #bfdbfe;
}

.bus-ac-badge {
  font-size: 10px;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.bus-ac-badge.ac {
  background: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}

.bus-ac-badge.non-ac {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #cbd5e1;
}

.bus-status-pill {
  font-size: 9.5px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}

.bus-status-pill.open { background: #dcfce7; color: #15803d; }
.bus-status-pill.full { background: #fee2e2; color: #b91c1c; }

.bus-card-check-indicator {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #cbd5e1;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: transparent;
  transition: all 0.18s;
  flex-shrink: 0;
}

.bus-choice-card.selected .bus-card-check-indicator {
  background: var(--primary-blue);
  border-color: var(--primary-blue);
  color: #ffffff;
  box-shadow: 0 2px 5px rgba(37, 99, 235, 0.4);
}

.bus-card-title-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bus-card-name {
  font-size: 15px;
  font-weight: 800;
  color: var(--brand-navy);
  line-height: 1.3;
}

.bus-choice-card.selected .bus-card-name {
  color: var(--primary-blue);
}

.bus-card-reg-sub {
  font-size: 12px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 4-Metric Real Seat Inventory Strip */
.bus-inventory-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
}

.bus-choice-card.selected .bus-inventory-strip {
  background: #ffffff;
  border-color: #bfdbfe;
}

.bus-inv-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.bus-inv-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.bus-inv-val {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--brand-navy);
}

.bus-inv-val.available { color: #16a34a; }
.bus-inv-val.booked { color: #dc2626; }
.bus-inv-val.pending { color: #d97706; }

/* Capacity Progress Bar */
.bus-capacity-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.bus-capacity-bar {
  height: 6px;
  background: #e2e8f0;
  border-radius: 999px;
  overflow: hidden;
  display: flex;
}

.bus-cap-fill-booked {
  background: #ef4444;
  height: 100%;
}

.bus-cap-fill-pending {
  background: #f59e0b;
  height: 100%;
}

.bus-cap-fill-available {
  background: #22c55e;
  height: 100%;
}

.bus-card-footer-features {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f1f5f9;
  padding-top: 8px;
  font-size: 11px;
  color: #64748b;
}

/* ==========================================================================
   STEP 4: MAIN BUS CHART FRAME (Exact Match to Reference Screenshot)
   ========================================================================== */
.bus-chart-outer-container {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  width: 100%;
  max-width: 100%;
  min-height: 0;
  height: 100%;
}

/* =========================================================================
   AUTHENTIC KESAVI BUS SEAT CHART (GROUND TRUTH MANIFEST BLUEPRINT)
   Matches official Gujarat Sleeper bus chart paper diagram
   ========================================================================= */

.bus-seat-blueprint-frame {
  background: #ffffff;
  border: 2px solid #000000;
  border-radius: 4px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  font-family: Arial, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* 1. Top Black Header Bar: BUS NAME, DATE, MANAGER NAME, MANGER NO */
.bus-chart-top-bar {
  background: #000000;
  color: #ffffff;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-bottom: 2px solid #000000;
}

.top-bar-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.top-bar-cell {
  color: #ffffff;
}

.top-bar-cell strong {
  color: #ffffff;
  font-weight: 900;
}

/* 2. Soft Peach / Light Orange Tour Banner */
.bus-chart-tour-banner {
  background: #fcd9bd;
  color: #000000;
  text-align: center;
  font-size: 16px;
  font-weight: 900;
  padding: 7px 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom: 2px solid #000000;
}

/* 3. Cockpit Header: ENTRY (Black) | KESAVI LOGO (White) | DRIVER (Black) */
.bus-cockpit-header {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  background: #ffffff;
  border-bottom: 2px solid #000000;
  height: 68px;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

.cockpit-entry, .cockpit-driver {
  background: #000000;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 160px;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
}

.cockpit-brand-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 12px;
  background: #ffffff;
}

.cockpit-brand-center img.cockpit-logo-img {
  max-height: 52px;
  max-width: 220px;
  object-fit: contain;
}

/* 4. Direction Headers Row: DOWN | UP | [Aisle Spacer] | UP | DOWN */
.bus-direction-header-row {
  display: grid;
  grid-template-columns: 1fr 1fr 100px 1fr 1fr;
  background: #000000;
  color: #ffffff;
  border-bottom: 2px solid #000000;
  text-align: center;
  width: 100%;
  box-sizing: border-box;
}

.dir-cell {
  padding: 6px 0;
  font-size: 13.5px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
}

.dir-cell:not(:last-child) {
  border-right: 1px solid #333333;
}

.dir-aisle-cap {
  background: #d4d4d8;
  border-left: 2px solid #000000;
  border-right: 2px solid #000000;
}

/* 5. Main Bus Table Grid (Rows with Alternating Black Number Strips and White Berth Cells) */
.bus-seats-table-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 100px 1fr 1fr;
  background: #ffffff;
  width: 100%;
  box-sizing: border-box;
}

/* Black Number Strip across columns */
.bus-num-cell {
  background: #000000;
  color: #ffffff;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-align: center;
  padding: 6px 0;
  border: 1px solid #000000;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  cursor: pointer;
  user-select: none;
}

.bus-num-cell span.sub-num {
  padding: 2px 8px;
  border-radius: 3px;
  transition: background 0.15s;
}

.bus-num-cell span.sub-num:hover {
  background: #334155;
}

.bus-num-cell span.sub-num.sub-selected {
  background: #16a34a;
  color: #ffffff;
}

/* Continuous Gallery Aisle (Rows 1 to 6) */
.bus-gallery-aisle-column {
  grid-column: 3;
  grid-row: 1 / 13; /* spans rows 1 to 6 number & berth rows */
  background: #d4d4d8;
  border-left: 2px solid #000000;
  border-right: 2px solid #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  padding: 14px 0;
  user-select: none;
  box-sizing: border-box;
}

.bus-gallery-aisle-column .aisle-letter {
  font-size: 22px;
  font-weight: 900;
  color: #000000;
  line-height: 1;
  letter-spacing: 0.08em;
}

/* Passenger Berth Boxes */
.bus-berth-card {
  background: #ffffff;
  border: 1px solid #000000;
  min-height: 92px;
  height: 92px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  user-select: none;
}

.bus-berth-card:hover:not(.status-booked):not(.status-blocked) {
  background: #f8fafc;
}

/* Empty / Available State */
.bus-berth-card.status-available {
  background: #ffffff;
}

/* Selected State */
.bus-berth-card.status-selected {
  background: #dcfce7 !important;
  border: 2px solid #16a34a !important;
}

.bus-berth-card.status-selected .berth-selection-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #16a34a;
  color: #ffffff;
  font-size: 10px;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Booked State (Exact Match to Manifest Reference) */
.bus-berth-card.status-booked {
  background: #ffffff;
  cursor: pointer;
}

.berth-slip-id {
  font-size: 15px;
  font-weight: 900;
  color: #000000;
  line-height: 1.15;
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}

.berth-passenger-name {
  font-size: 13.5px;
  font-weight: 900;
  color: #000000;
  line-height: 1.15;
  text-transform: uppercase;
  word-break: break-word;
  max-width: 95%;
  letter-spacing: 0.02em;
}

.berth-branch-tag {
  font-size: 9px;
  font-weight: 800;
  color: #475569;
  margin-top: 2px;
  text-transform: uppercase;
}

/* Hold & Pending States */
.bus-berth-card.status-hold {
  background: #fff7ed;
  border-color: #ea580c;
}

.bus-berth-card.status-pending {
  background: #fefce8;
  border-color: #ca8a04;
}

.berth-badge-hold {
  background: #ea580c;
  color: #ffffff;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: 2px;
}

.berth-badge-pending {
  background: #eab308;
  color: #000000;
  font-size: 9px;
  font-weight: 800;
  padding: 1px 5px;
  border-radius: 3px;
  margin-bottom: 2px;
}

.seat-card.status-hold {
  background: #fed7aa;
  border-color: #fb923c;
  color: #9a3412;
  cursor: pointer;
}
.seat-card.status-hold .seat-number { color: #0f172a; }
.seat-card.status-hold .seat-cust-id { color: #9a3412; font-weight: 700; }
.seat-card.status-hold .seat-passenger-name { color: #9a3412; font-weight: 600; }

.status-hold .seat-branch-badge {
  background: #ea580c;
  color: #ffffff;
  border: 1px solid #c2410c;
  font-weight: 800;
}

.seat-card.status-pending {
  background: #fef08a;
  border-color: #fde047;
  color: #854d0e;
  cursor: not-allowed;
}
.seat-card.status-pending .seat-number { color: #0f172a; }

.seat-card.status-blocked {
  background: #e2e8f0;
  border-color: #cbd5e1;
  color: #334155;
  cursor: not-allowed;
}
.seat-card.status-blocked .seat-number { color: #0f172a; }
.seat-card.status-blocked .seat-cust-id { color: #475569; }
.seat-card.status-blocked .seat-passenger-name { color: #334155; }

.seat-card.status-selected {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.45);
}
.seat-card.status-selected .seat-number,
.seat-card.status-selected .seat-cust-id,
.seat-card.status-selected .seat-passenger-name {
  color: #ffffff;
}

.seat-check-badge {
  position: absolute;
  top: 3px;
  right: 4px;
  color: #ffffff;
  font-size: 11px;
  line-height: 1;
}

.legend-stats-combined-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 4px 16px;
  margin: 4px 0;
  box-shadow: var(--shadow-subtle);
  flex-shrink: 0;
  width: 100%;
  box-sizing: border-box;
}

.legend-items-list { display: flex; align-items: center; gap: 14px; }
.legend-item { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: #475569; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; }
.legend-dot.dot-available { background: var(--status-avail-dot); }
.legend-dot.dot-booked { background: var(--status-booked-dot); }
.legend-dot.dot-pending { background: var(--status-pending-dot); }
.legend-dot.dot-selected { background: var(--status-selected-dot); }
.legend-dot.dot-blocked { background: var(--status-blocked-dot); }

.strip-vertical-divider { width: 1px; height: 18px; background: #e2e8f0; }

.stats-counters-list { display: flex; align-items: center; gap: 16px; }
.stat-counter-item { display: flex; align-items: center; gap: 5px; font-size: 11.5px; }
.stat-counter-item strong { font-size: 13px; font-weight: 800; }
.stat-counter-item.stat-total strong { color: var(--primary-blue); }
.stat-counter-item.stat-booked strong { color: #dc2626; }
.stat-counter-item.stat-available strong { color: #16a34a; }
.stat-counter-item.stat-pending strong { color: #d97706; }
.stat-counter-item.stat-blocked strong { color: #64748b; }
.stat-counter-item span { color: var(--brand-muted); font-size: 11px; }

/* ==========================================================================
   STEP 5 & 6 PANES
   ========================================================================= */
.passenger-details-wrapper {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  max-width: 100%;
  margin: 0;
  box-shadow: var(--shadow-card);
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

/* Step 5 Trip Summary Header Card */
.passenger-trip-summary-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 10px 16px;
  gap: 16px;
  flex-wrap: wrap;
}

.pass-summary-meta-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pass-summary-badge-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pass-summary-tour-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--brand-navy);
}

.pass-summary-sub-row {
  font-size: 11.5px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.pass-summary-seats-right {
  display: flex;
  align-items: center;
}

.pass-seats-pill-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  padding: 6px 12px;
}

.pass-seats-label {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  white-space: nowrap;
}

.pass-seats-chips-list {
  display: flex;
  align-items: center;
  gap: 5px;
  flex-wrap: wrap;
}

.pass-seat-mini-chip {
  background: var(--primary-blue);
  color: #ffffff;
  font-weight: 800;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  font-family: inherit;
}

/* Single Lead Passenger Rule Notice */
.lead-passenger-rule-notice {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 11.5px;
  color: #1e40af;
  line-height: 1.35;
}

.lead-passenger-rule-notice i {
  font-size: 14px;
  flex-shrink: 0;
}

/* Form Section Blocks */
.form-section-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #ffffff;
  border: 1px solid #f1f5f9;
  border-radius: 8px;
  padding: 10px 14px;
}

.form-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  border-bottom: 1px solid #f1f5f9;
  padding-bottom: 4px;
  margin: 0;
}

.form-grid-1col { display: grid; grid-template-columns: 1fr; gap: 10px; }
.form-grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-grid-3col { display: grid; grid-template-columns: 1fr 1.2fr 1.5fr; gap: 12px; }

.form-group-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.form-group-item label {
  font-size: 11.5px;
  font-weight: 700;
  color: #334155;
  display: flex;
  align-items: center;
  gap: 4px;
}

.req-star {
  color: #ef4444;
  font-weight: 800;
}

.opt-tag {
  font-size: 10.5px;
  font-weight: 500;
  color: #94a3b8;
}

.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon > i {
  position: absolute;
  left: 10px;
  color: #94a3b8;
  font-size: 12px;
  pointer-events: none;
}

.input-with-icon .form-input-control {
  padding-left: 32px;
}

.form-input-control {
  width: 100%;
  border: 1.5px solid #cbd5e1;
  border-radius: 7px;
  padding: 7px 10px;
  font-size: 12.5px;
  outline: none;
  font-family: inherit;
  color: var(--brand-navy);
  background: #ffffff;
  transition: all 0.15s;
}

.form-input-control:focus {
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.14);
}

.form-input-control.is-invalid {
  border-color: #ef4444 !important;
  background-color: #fef2f2;
}

.form-input-control.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18) !important;
}

.form-error-hint {
  font-size: 10.5px;
  color: #dc2626;
  font-weight: 600;
  display: none;
  margin-top: 1px;
}

.form-error-hint.show {
  display: block;
}

/* ==========================================================================
   STEP 6: REVIEW BOOKING STYLES
   ========================================================================== */
.review-booking-wrapper {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  max-width: 100%;
  margin: 0;
  box-shadow: var(--shadow-card);
  width: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}

.review-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1.5px solid #f1f5f9;
  padding-bottom: 8px;
}

.booking-status-tag {
  font-size: 11px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.booking-status-tag.pending {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fde68a;
}

/* Super Admin Approval Workflow Alert */
.review-approval-alert-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fffbeb;
  border: 1.5px solid #fde68a;
  border-radius: 10px;
  padding: 10px 14px;
}

.approval-alert-icon {
  font-size: 18px;
  color: #d97706;
  flex-shrink: 0;
  margin-top: 2px;
}

.approval-alert-text {
  font-size: 12px;
  color: #92400e;
  line-height: 1.4;
}

.approval-alert-text strong {
  color: #78350f;
}

/* Review Card Blocks */
.review-card-block {
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.15s;
}

.review-card-block:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 6px rgba(0,0,0,0.03);
}

.review-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #f8fafc;
  padding-bottom: 6px;
}

.review-card-title {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--brand-navy);
  display: flex;
  align-items: center;
  gap: 8px;
}

.btn-review-edit {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: var(--primary-blue);
  font-size: 11.5px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}

.btn-review-edit:hover {
  background: var(--primary-blue);
  color: #ffffff;
  border-color: var(--primary-blue);
}

.review-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 20px;
}

.review-field-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.review-field-item.span-2 {
  grid-column: span 2;
}

.review-label {
  font-size: 10.5px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.review-value {
  font-size: 13px;
  color: var(--brand-navy);
  font-weight: 700;
}

.review-seat-chips-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.review-seat-pill {
  background: #eff6ff;
  color: var(--primary-blue);
  border: 1px solid #bfdbfe;
  font-size: 12px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 6px;
}

/* ==========================================================================
   STEP 7: CONFIRMATION VOUCHER STYLES
   ========================================================================== */
.confirmation-card-wrapper {
  background: #ffffff;
  border: 1.5px solid #cbd5e1;
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  max-width: 640px;
  margin: 0 auto;
  box-shadow: var(--shadow-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.confirmation-success-icon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #dcfce7;
  border: 2px solid #86efac;
  color: #16a34a;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(22, 163, 74, 0.2);
}

.confirmation-heading {
  font-size: 18px;
  font-weight: 800;
  color: var(--brand-navy);
  margin: 0;
}

.confirmation-subheading {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
  max-width: 480px;
}

.voucher-reference-card {
  background: #f8fafc;
  border: 1.5px dashed #cbd5e1;
  border-radius: 10px;
  padding: 14px 20px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.voucher-ref-label {
  font-size: 11px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.voucher-ref-number {
  font-size: 24px;
  font-weight: 900;
  color: var(--primary-blue);
  letter-spacing: 0.08em;
}

.voucher-status-badge {
  font-size: 10.5px;
  font-weight: 800;
  padding: 3px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.voucher-status-badge.pending {
  background: #fef3c7;
  color: #b45309;
  border: 1px solid #fcd34d;
}

.confirmation-details-summary {
  width: 100%;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.conf-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px dashed #f1f5f9;
}

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

.conf-summary-row span {
  color: #64748b;
}

.conf-summary-row strong {
  color: var(--brand-navy);
}

.confirmation-action-buttons {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  justify-content: center;
  margin-top: 4px;
}

.btn-conf-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
}

.btn-conf-action.primary {
  background: var(--primary-blue);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.btn-conf-action.primary:hover {
  background: var(--primary-blue-hover);
}

.btn-conf-action.secondary {
  background: #f1f5f9;
  color: #334155;
  border: 1px solid #cbd5e1;
}

.btn-conf-action.secondary:hover {
  background: #e2e8f0;
}

/* ==========================================================================
   BOTTOM ACTION BAR (BACK | STATUS / CHIPS | NEXT)
   ========================================================================== */
.bottom-action-navigation-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #ffffff;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-md);
  padding: 6px 14px;
  box-shadow: var(--shadow-subtle);
  flex-shrink: 0;
  gap: 12px;
}

.btn-nav-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  border: none;
  text-decoration: none;
  white-space: nowrap;
}

.btn-nav-back {
  background: #ffffff;
  border: 1.5px solid #2563eb;
  color: #2563eb;
}

.btn-nav-back:hover:not(:disabled) { background: #eff6ff; border-color: #1d4ed8; color: #1d4ed8; }

.btn-nav-next {
  background: var(--primary-blue);
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.25);
}

.btn-nav-next:hover:not(:disabled) { background: var(--primary-blue-hover); box-shadow: 0 4px 10px rgba(37, 99, 235, 0.35); }

.btn-nav-hold {
  background: #f59e0b;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.3);
}
.btn-nav-hold:hover:not(:disabled) {
  background: #d97706;
  box-shadow: 0 4px 10px rgba(217, 119, 6, 0.4);
}

.btn-nav-direct-book {
  background: #10b981;
  color: #ffffff;
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.3);
}
.btn-nav-direct-book:hover:not(:disabled) {
  background: #059669;
  box-shadow: 0 4px 10px rgba(5, 150, 105, 0.4);
}

.btn-nav-action:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }

.selected-seats-center-section {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  justify-content: center;
  min-width: 0;
}

.selected-count-pill { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--brand-navy); white-space: nowrap; }
.selected-count-pill strong { color: var(--primary-blue); font-size: 14px; }
.selected-chips-list { display: flex; align-items: center; gap: 6px; overflow-x: auto; max-width: 420px; padding: 2px 0; }
.seat-chip-item { display: inline-flex; align-items: center; gap: 6px; background: #eff6ff; border: 1px solid #bfdbfe; color: #2563eb; padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.seat-chip-remove { cursor: pointer; font-size: 13px; line-height: 1; color: #60a5fa; transition: color 0.1s; }
.seat-chip-remove:hover { color: #ef4444; }

.btn-clear-selection-link {
  background: #ffffff;
  border: 1px solid #fca5a5;
  color: #ef4444;
  font-size: 12px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.btn-clear-selection-link:hover { background: #fee2e2; border-color: #f87171; color: #dc2626; }

/* Toast */
.toast-popup {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #0f172a;
  color: #ffffff;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.toast-popup.show { opacity: 1; transform: translateY(0); }

/* Responsive */
@media (max-height: 800px) {
  .booking-workspace-app { padding: 4px 16px; }
  .tour-card-banner { height: 95px; }
  .info-summary-card { padding: 6px 10px; min-height: 54px; }
  .card-tour-thumbnail { width: 48px; height: 44px; }
  .calendar-days-grid { grid-auto-rows: 44px; gap: 3px; }
  .cal-day-cell { height: 44px; min-height: 44px; max-height: 44px; padding: 2px 4px; }
  .cal-day-number { font-size: 10.5px; }
  .departure-schedules-card { height: 420px; max-height: 420px; }
  .schedules-scroll-list { max-height: 340px; }
  .seat-card { min-height: 42px; max-height: 48px; padding: 2px; }
  .bottom-action-navigation-bar { padding: 4px 10px; }
}