/* ═══════════════════════════════════════════════════════════
   booking-flow.css  —  Professional Travel UI
   Result → Details → Checkout
   Breakpoints: >1024px (desktop) | 600–1024px (tablet) | <600px (mobile)
═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

/* ── CSS CUSTOM PROPERTIES ───────────────────────────────── */
:root {
  --navy:        #0B1F3A;
  --navy-mid:    #1a3358;
  --blue-cta:    #1565C0;
  --blue-mid:    #1976D2;
  --blue-light:  #E3F2FD;
  --blue-pale:   #F0F7FF;
  --teal:        #00897B;
  --teal-light:  #E0F2F1;
  --amber:       #F57C00;
  --amber-light: #FFF3E0;
  --green:       #2E7D32;
  --green-light: #E8F5E9;
  --red:         #C62828;
  --red-light:   #FFEBEE;
  --sky:         #B0C4DE;
  --white:       #FFFFFF;
  --off-white:   #F8FAFD;
  --text-dark:   #0D1B2A;
  --text-mid:    #4A5568;
  --text-light:  #8A99AB;
  --border:      #DDE8F5;
  --shadow-sm:   0 2px 8px rgba(11,31,58,.07);
  --shadow:      0 6px 24px rgba(11,31,58,.12);
  --shadow-lg:   0 16px 48px rgba(11,31,58,.18);
  --radius-sm:   8px;
  --radius:      14px;
  --radius-lg:   20px;
  --transition:  all .18s cubic-bezier(.4,0,.2,1);
  --font-head:   'Plus Jakarta Sans', sans-serif;
  --font-body:   'Space Grotesk', sans-serif;
}

* { box-sizing: border-box; }

/* ── PAGE BASE ────────────────────────────────────────────── */
.bf-page-bg {
  min-height: 100vh;
  background: var(--off-white);
  font-family: var(--font-body);
}

/* ── STICKY SEARCH BAR ────────────────────────────────────── */
.bf-search-bar {
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1.5px solid var(--border);
  padding: 100px 24px 14px;
  position: sticky;
  top: 0;
  z-index: 90;
  box-shadow: 0 4px 20px rgba(11,31,58,.08);
}
.bf-search-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}
.bf-search-route {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-dark);
}
.bf-search-icon { font-size: 1.4rem; }
.bf-search-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  display: block;
}
.bf-search-arrow {
  color: var(--blue-mid);
  font-size: 1.2rem;
  font-weight: 400;
}
.bf-search-meta { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.bf-search-pill {
  background: var(--blue-pale);
  color: var(--navy-mid);
  border-radius: 50px;
  padding: 5px 13px;
  font-size: .78rem;
  font-weight: 600;
  border: 1px solid var(--border);
  letter-spacing: .01em;
}
.bf-pill-rt { background: var(--amber-light); color: var(--amber); border-color: #ffd180; }
.bf-modify-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 9px 20px;
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  letter-spacing: .02em;
}
.bf-modify-btn:hover { background: var(--navy-mid); transform: translateY(-1px); }

/* ── PAGE WRAPPER ─────────────────────────────────────────── */
.bf-page-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 70px 16px 72px;
}

/* ── PROMO BANNERS ────────────────────────────────────────── */
.bf-banner-strip {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  overflow-x: auto;
  padding-bottom: 4px;
 
}
.bf-banner-strip::-webkit-scrollbar { display: none; }
.bf-banner-card {
  flex: 0 0 220px;
  border-radius: var(--radius);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: var(--transition);
  position: relative;
  overflow: hidden;
  border: 1.5px solid transparent;
}
.bf-banner-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.bf-banner-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: .07;
  pointer-events: none;
}
.bf-banner--blue   { background: linear-gradient(135deg, #1565C0 0%, #0D47A1 100%); color: #fff; }
.bf-banner--teal   { background: linear-gradient(135deg, #00897B 0%, #00695C 100%); color: #fff; }
.bf-banner--amber  { background: linear-gradient(135deg, #F57C00 0%, #E65100 100%); color: #fff; }
.bf-banner--purple { background: linear-gradient(135deg, #6A1B9A 0%, #4A148C 100%); color: #fff; }
.bf-banner-icon  { font-size: 2rem; flex-shrink: 0; }
.bf-banner-title { font-family: var(--font-head); font-weight: 700; font-size: .9rem; line-height: 1.3; }
.bf-banner-sub   { font-size: .75rem; opacity: .85; margin-top: 3px; line-height: 1.4; }

/* ── DATE STRIP ───────────────────────────────────────────── */
.bf-date-strip {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  margin-bottom: 16px;
  padding: 4px 0;
  scrollbar-width: none;
}
.bf-date-strip::-webkit-scrollbar { display: none; }
.bf-date-chip {
  flex: 0 0 auto;
  padding: 7px 16px;
  border-radius: 50px;
  border: 1.5px solid var(--border);
  background: var(--white);
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
}
.bf-date-chip .bf-date-day { display: block; font-size: .7rem; font-weight: 500; color: var(--text-light); }
.bf-date-chip.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.bf-date-chip.active .bf-date-day { color: rgba(255,255,255,.7); }
.bf-date-chip:not(.active):hover { border-color: var(--blue-mid); color: var(--blue-mid); }

/* ── TWO-COL LAYOUT ───────────────────────────────────────── */
.bf-result-layout  { display: grid; gap: 20px; align-items: start; grid-template-columns: 270px 1fr; }
.bf-details-layout { display: grid; gap: 20px; align-items: start; grid-template-columns: 1fr 360px; }
.bf-checkout-layout { display: grid; gap: 20px; align-items: start; grid-template-columns: 1fr 380px; }

/* ── MOBILE FILTER TOGGLE BUTTON ─────────────────────────── */
.bf-filter-toggle-btn {
  display: none;
  width: 100%;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 20px;
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  transition: var(--transition);
}
.bf-filter-toggle-btn:hover { background: var(--navy-mid); }
.bf-filter-toggle-icon {
  width: 22px;
  height: 22px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
}
.bf-filter-toggle-icon span {
  display: block;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: var(--transition);
}
.bf-filter-toggle-icon span:nth-child(2) { width: 70%; }
.bf-filter-toggle-icon span:nth-child(3) { width: 50%; }

/* ── FILTERS SIDEBAR ──────────────────────────────────────── */
.bf-filters {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  position: sticky;
  top: 130px;
  border: 1.5px solid var(--border);
}
.bf-filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .95rem;
  color: var(--text-dark);
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--blue-light);
}
.bf-filter-reset {
  background: none;
  border: 1.5px solid var(--blue-mid);
  border-radius: 50px;
  padding: 3px 12px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--blue-mid);
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bf-filter-reset:hover { background: var(--blue-light); }
.bf-filter-group {
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.bf-filter-group:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.bf-filter-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 10px;
}
.bf-filter-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .87rem;
  color: var(--text-dark);
  margin-bottom: 8px;
  cursor: pointer;
  font-weight: 500;
  padding: 4px 6px;
  border-radius: 6px;
  transition: var(--transition);
}
.bf-filter-check:hover { background: var(--blue-pale); }
.bf-filter-check input { accent-color: var(--blue-cta); width: 15px; height: 15px; }
.bf-fare-range {
  width: 100%;
  accent-color: var(--blue-cta);
  margin-top: 10px;
  height: 4px;
}
/* Fare range min/max row */
.bf-fare-range-labels {
  display: flex;
  justify-content: space-between;
  font-size: .72rem;
  color: var(--text-light);
  margin-top: 6px;
  font-weight: 600;
}
.bf-time-chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 8px; }
.bf-time-chip {
  background: var(--blue-pale);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 8px 6px;
  font-size: .74rem;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: var(--transition);
  color: var(--text-mid);
  line-height: 1.5;
}
.bf-time-chip.active,
.bf-time-chip:hover { border-color: var(--blue-cta); background: #E3F2FD; color: var(--blue-cta); }

/* ── SORT BAR ─────────────────────────────────────────────── */
.bf-sort-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}
.bf-found-label { font-size: .87rem; font-weight: 600; color: var(--text-mid); }
.bf-found-label strong { color: var(--navy); }
.bf-sort-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.bf-sort-chip {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-mid);
  cursor: pointer;
  transition: var(--transition);
  font-family: var(--font-head);
}
.bf-sort-chip.active,
.bf-sort-chip:hover { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ── RESULT CARDS ─────────────────────────────────────────── */
.bf-cards { display: flex; flex-direction: column; gap: 10px; }

.bf-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px 22px;
  border: 1.5px solid var(--border);
  transition: var(--transition);
}
.bf-card:hover {
  border-color: var(--blue-mid);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

/* ── FLIGHT CARD ──────────────────────────────────────────── */
.bf-flight-card {
  display: grid;
  grid-template-columns: 150px 1fr auto 1fr 190px;
  gap: 14px;
  align-items: center;
}
.bf-airline-logo {
  width: 100px;
  height: 70px;
  border-radius: 10px;
  object-fit: contain;
  padding: 6px;
  display: block;
  flex-shrink: 0;
  background: #fff;
  border: 1.5px solid var(--border);
}
.bf-card-airline { display: flex; align-items: center; gap: 10px; }
.bf-airline-name { font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--text-dark); }
.bf-airline-code { font-size: .76rem; color: var(--text-light); margin-top: 2px; font-weight: 500; }

.bf-card-route { text-align: center; }
.bf-card-time {
  font-family: var(--font-head);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -.01em;
}
.bf-card-city {
  font-size: .76rem;
  color: var(--text-light);
  margin-top: 3px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bf-card-mid { text-align: center; }
.bf-card-dur { font-size: .8rem; color: var(--text-mid); margin-bottom: 5px; font-weight: 600; }
.bf-card-line {
  height: 2px;
  background: linear-gradient(90deg, var(--border), var(--blue-mid), var(--border));
  border-radius: 2px;
  position: relative;
  margin: 4px 0;
}
.bf-card-line::after {
  content: '›';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
  color: var(--blue-mid);
  font-size: 1rem;
  background: var(--white);
  padding: 0 2px;
}
.bf-nonstop { font-size: .72rem; color: var(--green); font-weight: 700; display: block; margin-top: 5px; letter-spacing: .03em; }
.bf-stop    { font-size: .72rem; color: var(--amber); font-weight: 700; display: block; margin-top: 5px; }

.bf-card-right { text-align: right; }
.bf-card-fare { font-family: var(--font-head); font-size: 1.45rem; font-weight: 800; color: var(--navy); }
.bf-card-fare-sub { font-size: .72rem; color: var(--text-light); margin-top: 2px; }
.bf-seats-left { font-size: .74rem; font-weight: 700; margin: 6px 0 8px; }
.bf-seats-left--urgent { color: var(--red); }
.bf-seats-left--warning { color: var(--amber); }
.bf-seats-left--ok { color: var(--text-mid); }

.bf-book-btn {
  background: linear-gradient(135deg, #F57C00 0%, #E65100 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 22px;
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  white-space: nowrap;
  letter-spacing: .02em;
  box-shadow: 0 4px 12px rgba(245,124,0,.3);
}
.bf-book-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(245,124,0,.4); }

/* ── TRAIN CARD ───────────────────────────────────────────── */
.bf-train-card {
  display: grid;
  grid-template-columns: 190px 1fr auto 1fr 1fr;
  gap: 14px;
  align-items: center;
}

.bf-train-name { font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--text-dark); }
.bf-train-number {
  font-size: .76rem;
  color: var(--text-light);
  margin: 3px 0;
  font-weight: 600;
  font-family: 'Courier New', monospace;
  letter-spacing: .05em;
}
.bf-train-days { font-size: .72rem; color: var(--blue-mid); font-weight: 700; margin-top: 4px; }
.bf-train-classes { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.bf-cls-block {
  text-align: center;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: var(--transition);
  min-width: 62px;
  background: var(--off-white);
}
.bf-cls-block:hover { border-color: var(--blue-cta); background: var(--blue-pale); transform: translateY(-1px); }
.bf-cls-name  { font-size: .78rem; font-weight: 800; margin-bottom: 2px; }
.bf-cls-fare  { font-family: var(--font-head); font-weight: 700; font-size: .9rem; color: var(--text-dark); margin: 3px 0; }
.bf-cls-avail { font-size: .7rem; font-weight: 700; }
.bf-cls-avail.avl { color: var(--green); }
.bf-cls-avail.rac { color: var(--amber); }
.bf-cls-avail.wl  { color: var(--red); }

/* Train class colors - extracted from JS inline styles */
.bf-cls-name--sl { color: #2E7D32; }
.bf-cls-name--3a { color: #1565C0; }
.bf-cls-name--2a { color: #6A1B9A; }
.bf-cls-name--1a { color: #E65100; }

/* ── BUS CARD ─────────────────────────────────────────────── */
.bf-bus-card {
  display: grid;
  grid-template-columns: 170px 1fr auto 1fr 210px;
  gap: 14px;
  align-items: center;
}

.bf-bus-op   { font-family: var(--font-head); font-weight: 800; font-size: 1rem; color: var(--text-dark); }
.bf-bus-type { font-size: .78rem; color: var(--text-mid); margin: 4px 0; font-weight: 500; }
.bf-bus-rating { font-size: .82rem; font-weight: 600; }
.bf-bus-amenities { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; justify-content: flex-end; }
.bf-amenity {
  background: var(--teal-light);
  color: var(--teal);
  border-radius: 50px;
  padding: 3px 9px;
  font-size: .7rem;
  font-weight: 600;
}
/* Rating colors — extracted from JS */
.bf-rating--high { color: var(--green); font-weight: 800; }
.bf-rating--mid  { color: var(--amber); font-weight: 800; }
.bf-rating--low  { color: var(--red); font-weight: 800; }

.bf-no-results {
  text-align: center;
  padding: 60px 0;
  color: var(--text-light);
  font-size: .95rem;
}

/* ── TRUST BAR ────────────────────────────────────────────── */
.bf-trust-bar {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  padding: 10px 0 20px;
  font-size: .78rem;
  color: var(--text-mid);
  font-weight: 600;
}
.bf-trust-bar span { display: flex; align-items: center; gap: 5px; }

/* ═══════════════════════════════════════════════════════════
   DETAILS PAGE
═══════════════════════════════════════════════════════════ */

/* ── TICKET STRIP ─────────────────────────────────────────── */
.bf-ticket-strip {
  background: linear-gradient(135deg, var(--navy) 0%, #1565C0 60%, #0D47A1 100%);
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 28px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}
.bf-ticket-strip::after {
  content: '';
  position: absolute;
  right: -60px;
  top: -60px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.08) 0%, transparent 70%);
  pointer-events: none;
}
.bf-ts-airline { display: flex; align-items: center; gap: 14px; }
.bf-ts-logo {
  width: 90px;
  height: 60px;
  border-radius: 10px;
  object-fit: contain;
  padding: 6px;
  display: block;
  flex-shrink: 0;
  background: #fff;
  border: 1.5px solid var(--border);
}
.bf-ts-name { font-family: var(--font-head); font-weight: 800; font-size: 1.05rem; }
.bf-ts-sub  { font-size: .8rem; opacity: .7; margin-top: 3px; }
.bf-ts-route { display: flex; align-items: center; gap: 24px; justify-content: center; }
.bf-ts-block { text-align: center; }
.bf-ts-time {
  font-family: var(--font-head);
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -.02em;
}
.bf-ts-city {
  font-size: .78rem;
  opacity: .75;
  margin-top: 3px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.bf-ts-mid  { text-align: center; flex: 1; }
.bf-ts-dur  { font-size: .8rem; opacity: .75; margin-bottom: 6px; }
.bf-ts-line {
  height: 1.5px;
  background: rgba(255,255,255,.35);
  border-radius: 2px;
  position: relative;
  margin: 0 12px;
}
.bf-ts-line::before {
  content: '✈';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: .95rem;
  background: linear-gradient(135deg, var(--navy), #1565C0);
  padding: 2px 4px;
}
.bf-ts-stops { font-size: .72rem; opacity: .65; margin-top: 6px; }
.bf-ts-date {
  text-align: right;
  font-size: .85rem;
  opacity: .8;
  white-space: nowrap;
  font-weight: 600;
}
.bf-ts-date-sub {
  font-size: .76rem;
  opacity: .65;
  margin-top: 4px;
}
.bf-ts-badge {
  display: inline-block;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50px;
  padding: 4px 12px;
  font-size: .76rem;
  font-weight: 700;
  margin-top: 6px;
  letter-spacing: .04em;
}
.bf-ts-distance {
  display: inline-block;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50px;
  padding: 4px 12px;
  font-size: .76rem;
  font-weight: 700;
  margin-top: 6px;
  letter-spacing: .04em;
}

/* ── DETAILS SECTIONS ─────────────────────────────────────── */
.bf-details-main { display: flex; flex-direction: column; gap: 14px; }
.bf-details-section {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 22px 24px;
  border: 1.5px solid var(--border);
}

.bf-section-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bf-section-title::after {
  content: '';
  flex: 1;
  height: 1.5px;
  background: var(--border);
  border-radius: 2px;
  margin-left: 8px;
}
/* ── PASSENGER TYPE SELECTOR ─────────────────────────────── */
.bf-pax-type-select {
  border: 1.5px solid var(--border);
  border-radius: 50px;
  padding: 3px 10px;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  color: var(--navy);
  background: var(--blue-pale);
  cursor: pointer;
  outline: none;
  margin-left: 4px;
}

.bf-pax-title--child  { color: #E65100; }
.bf-pax-title--infant { color: #6A1B9A; }

.bf-pax-fare-tag {
  margin-top: 10px;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-mid);
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  display: inline-block;
}

.bf-add-pax-btn {
  display: block;
  width: 100%;
  margin: 10px 0 16px;
  background: var(--white);
  border: 2px dashed var(--blue-mid);
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: var(--font-head);
  font-size: .88rem;
  font-weight: 700;
  color: var(--blue-mid);
  cursor: pointer;
  transition: var(--transition);
}
.bf-add-pax-btn:hover { background: var(--blue-pale); }

.bf-remove-pax-btn {
  margin-left: auto;
  background: var(--red-light);
  border: none;
  border-radius: 50px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--red);
  cursor: pointer;
  transition: var(--transition);
}
.bf-remove-pax-btn:hover { background: var(--red); color: #fff; }
/* ── PASSENGER FORM ───────────────────────────────────────── */
.bf-pax-card {
  background: var(--off-white);
  border-radius: var(--radius-sm);
  padding: 18px;
  margin-bottom: 12px;
  border: 1.5px solid var(--border);
}
.bf-pax-card:last-child { margin-bottom: 0; }
.bf-pax-title {
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 800;
  color: var(--blue-cta);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.bf-pax-title-badge {
  background: var(--blue-cta);
  color: #fff;
  border-radius: 50px;
  font-size: .68rem;
  padding: 2px 8px;
  font-weight: 700;
  letter-spacing: .04em;
}
.bf-pax-row { display: flex; gap: 12px; flex-wrap: wrap; }
.bf-field-group { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 130px; }
.bf-field-group label { font-size: .76rem; font-weight: 700; color: var(--text-mid); letter-spacing: .03em; }
.bf-field-group label small { color: var(--text-light); font-weight: 400; }

.bf-input {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 13px;
  font-family: var(--font-body);
  font-size: .9rem;
  color: var(--text-dark);
  background: var(--white);
  transition: var(--transition);
  outline: none;
  width: 100%;
}
.bf-input:focus {
  border-color: var(--blue-cta);
  box-shadow: 0 0 0 3px rgba(21,101,192,.1);
  background: #FAFCFF;
}
.bf-input::placeholder { color: var(--text-light); }
select.bf-input { cursor: pointer; }

/* Contact card */
.bf-contact-card {
  background: #FFF8F0;
  border-color: #FFDBB5;
}
.bf-contact-card .bf-pax-title { color: var(--amber); }

/* GST section */
.bf-gst-card {
  background: #FAFFF8;
  border-color: #A5D6A7;
}
.bf-gst-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 600;
  color: var(--blue-mid);
  margin-bottom: 12px;
  user-select: none;
}
.bf-gst-toggle input { accent-color: var(--blue-cta); width: 16px; height: 16px; }
.bf-gst-fields { display: none; }
.bf-gst-fields.active { display: block; }

/* ── ADD-ONS ──────────────────────────────────────────────── */
.bf-addons-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.bf-addon-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  background: var(--white);
  position: relative;
}
.bf-addon-card:hover { border-color: var(--blue-cta); background: var(--blue-pale); }
.bf-addon-card input { accent-color: var(--blue-cta); width: 16px; height: 16px; }
.bf-addon-icon  { font-size: 1.4rem; }
.bf-addon-name  { font-size: .83rem; font-weight: 600; color: var(--text-dark); flex: 1; }
.bf-addon-note  { font-size: .72rem; color: var(--text-light); }
.bf-addon-price { font-size: .8rem; color: var(--green); font-weight: 700; white-space: nowrap; }
.bf-addon-tag {
  position: absolute;
  top: -8px;
  right: 10px;
  background: var(--amber);
  color: #fff;
  font-size: .62rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 50px;
  letter-spacing: .05em;
  text-transform: uppercase;
}

/* ── SEAT MAP ─────────────────────────────────────────────── */
.bf-seat-legend { display: flex; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.bf-legend-item { display: flex; align-items: center; gap: 6px; font-size: .78rem; color: var(--text-mid); font-weight: 600; }
.bf-seat-demo { width: 22px; height: 22px; border-radius: 5px; display: inline-block; }
.bf-seat-demo.avail    { background: #DCF8EA; border: 1.5px solid #2E7D32; }
.bf-seat-demo.booked   { background: #F0F4F8; border: 1.5px solid #B0C4DE; }
.bf-seat-demo.ladies   { background: #FCE4EC; border: 1.5px solid #C2185B; }
.bf-seat-demo.selected { background: var(--blue-cta); border: 1.5px solid var(--navy); }

.bf-seat-map {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 6px;
  max-width: 500px;
}
.bf-seat {
  height: 38px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
  border: 1.5px solid;
}
.bf-seat.avail   { background: #DCF8EA; border-color: #2E7D32; color: #1B5E20; }
.bf-seat.avail:hover { background: #B2DFDB; transform: scale(1.08); box-shadow: 0 2px 8px rgba(46,125,50,.25); }
.bf-seat.booked  { background: #F0F4F8; border-color: #B0C4DE; color: #B0C4DE; cursor: not-allowed; }
.bf-seat.ladies  { background: #FCE4EC; border-color: #C2185B; color: #AD1457; cursor: not-allowed; }
.bf-seat.selected { background: var(--blue-cta) !important; border-color: var(--navy) !important; color: #fff !important; box-shadow: 0 2px 10px rgba(21,101,192,.35) !important; }

.bf-deck-label {
  background: var(--navy);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 50px;
  display: inline-block;
  margin-bottom: 8px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bf-seat-note {
  margin-top: 12px;
  font-size: .78rem;
  color: var(--text-light);
}

/* ── BOOKING OPTIONS (trains) ─────────────────────────────── */
.bf-booking-options-note {
  margin-top: 12px;
  font-size: .8rem;
  color: var(--text-light);
}

/* ── JOURNEY PREFERENCES (trains) ────────────────────────── */
.bf-journey-note {
  margin-top: 12px;
  font-size: .8rem;
  color: var(--text-light);
}

/* ── PICKUP/DROP (buses) ──────────────────────────────────── */
.bf-ladies-note {
  margin-top: 12px;
  font-size: .78rem;
  color: var(--text-light);
}

/* ── FARE SIDEBAR ─────────────────────────────────────────── */
.bf-fare-sidebar { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 130px; }
.bf-fare-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 22px;
  border: 1.5px solid var(--border);
}
.bf-fare-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bf-fare-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .87rem;
  color: var(--text-mid);
  margin-bottom: 10px;
  font-weight: 500;
}
.bf-fare-row-value { font-weight: 700; color: var(--text-dark); }
.bf-fare-divider { height: 1.5px; background: var(--border); border-radius: 2px; margin: 10px 0; }
.bf-fare-total {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
}
.bf-fare-note { font-size: .74rem; color: var(--text-light); text-align: center; margin: 8px 0 16px; }

.bf-continue-btn {
  width: 100%;
  background: linear-gradient(135deg, #F57C00 0%, #BF360C 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 15px;
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: .02em;
  box-shadow: 0 6px 20px rgba(245,124,0,.3);
}
.bf-continue-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(245,124,0,.4); }
.bf-continue-btn:disabled { background: var(--border); color: var(--text-light); cursor: not-allowed; box-shadow: none; }

.bf-safe-badge {
  text-align: center;
  font-size: .76rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: 600;
  margin-top: 4px;
}
.bf-irctc-badge {
  text-align: center;
  font-size: .76rem;
  color: var(--text-light);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-weight: 600;
  margin-top: 4px;
}

.bf-selected-seat-info {
  text-align: center;
  font-size: .83rem;
  color: var(--blue-cta);
  font-weight: 700;
  margin: 8px 0;
  padding: 6px;
  background: var(--blue-pale);
  border-radius: 6px;
}
.bf-selected-seat-warning {
  text-align: center;
  font-size: .83rem;
  color: var(--amber);
  font-weight: 700;
  margin: 8px 0;
  padding: 6px;
  background: var(--amber-light);
  border-radius: 6px;
}

.bf-amenities-wrap {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  border: 1.5px solid var(--border);
}
.bf-amenities-title {
  font-family: var(--font-head);
  font-size: .85rem;
  margin-bottom: 10px;
  font-weight: 800;
  color: var(--navy);
}
.bf-amenity-tag {
  display: inline-block;
  background: var(--teal-light);
  color: var(--teal);
  border-radius: 50px;
  padding: 5px 11px;
  font-size: .75rem;
  font-weight: 700;
  margin: 3px 3px 3px 0;
}

/* ── POLICY CARD ──────────────────────────────────────────── */
.bf-policy-card {
  background: var(--blue-pale);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.bf-policy-row {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  color: var(--text-mid);
  margin-bottom: 6px;
  font-weight: 500;
}
.bf-policy-row:last-child { margin-bottom: 0; }
.bf-policy-row-value { font-weight: 700; color: var(--text-dark); }
.bf-info-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .76rem;
  font-weight: 600;
  border-radius: 50px;
  padding: 4px 10px;
}
.bf-info-badge--free { background: var(--green-light); color: var(--green); }
.bf-info-badge--paid { background: var(--amber-light); color: var(--amber); }
.bf-info-badge--no   { background: var(--red-light); color: var(--red); }
.bf-policy-note { font-size: .76rem; color: var(--text-light); margin-top: 10px; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════
   CHECKOUT PAGE
═══════════════════════════════════════════════════════════ */

.bf-payment-col { display: flex; flex-direction: column; gap: 14px; }
.bf-summary-col { display: flex; flex-direction: column; gap: 12px; }

.bf-checkout-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 24px;
  border: 1.5px solid var(--border);
}
.bf-checkout-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--navy);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bf-checkout-title img{
  height: 40px;
  width: 50px;
}
/* Booking summary rows */
.bf-co-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .87rem;
  color: var(--text-mid);
  margin-bottom: 10px;
  font-weight: 500;
}
.bf-co-row-value { font-weight: 700; color: var(--text-dark); text-align: right; max-width: 58%; }
.bf-co-divider { border: none; border-top: 1.5px solid var(--border); margin: 14px 0; }

/* Ticket summary strip in checkout */
.bf-co-ticket-strip {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 14px 18px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.bf-co-ticket-icon { font-size: 1.5rem; }
.bf-co-ticket-icon img {
  width: 42px;
  height: 42px;
  object-fit: contain;
  display: block;
}
.bf-co-route { font-family: var(--font-head); font-weight: 800; font-size: 1rem; }
.bf-co-meta  { font-size: .78rem; opacity: .75; margin-top: 3px; }

/* Summary fare section */
.bf-summary-fare-row {
  display: flex;
  justify-content: space-between;
  font-size: .87rem;
  color: var(--text-mid);
  margin-bottom: 9px;
  font-weight: 500;
}
.bf-summary-fare-value { font-weight: 700; color: var(--text-dark); }
.bf-summary-grand {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--navy);
  display: flex;
  justify-content: space-between;
  padding-top: 10px;
  border-top: 2px solid var(--navy);
}

/* ── PAYMENT TABS ─────────────────────────────────────────── */
.bf-payment-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 22px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1.5px solid var(--border);
}
.bf-pay-tab {
  flex: 1;
  padding: 11px 8px;
  border: none;
  border-right: 1.5px solid var(--border);
  background: var(--off-white);
  font-family: var(--font-head);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-mid);
  cursor: pointer;
  transition: var(--transition);
  text-align: center;
}
.bf-pay-tab:last-child { border-right: none; }
.bf-pay-tab.active { background: var(--navy); color: #fff; }
.bf-pay-tab:not(.active):hover { background: var(--blue-light); color: var(--navy); }

.bf-pay-panel { display: none; }
.bf-pay-panel.active { display: block; animation: bfFadeIn .2s ease; }
@keyframes bfFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* UPI */
.bf-upi-hint {
  font-size: .83rem;
  color: var(--text-mid);
  margin-bottom: 12px;
  font-weight: 600;
}
.bf-upi-apps {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.bf-upi-app {
  width: 100px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  background: var(--white);
  position: relative;
}
.bf-upi-app:has(input:checked) { border-color: var(--blue-cta); background: var(--blue-pale); }
.bf-upi-app input { position: absolute; opacity: 0; pointer-events: none; }
.bf-upi-icon { width: 60px; height: 60px; object-fit: contain; }

.bf-or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  font-size: .78rem;
  color: var(--text-light);
  font-weight: 700;
}
.bf-or-divider::before,
.bf-or-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* Net Banking / Wallets */
.bf-nb-hint {
  font-size: .83rem;
  color: var(--text-mid);
  margin-bottom: 12px;
  font-weight: 600;
}
.bf-nb-banks {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.bf-nb-bank {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  background: var(--white);
  position: relative;
}
.bf-nb-bank:has(input:checked) { border-color: var(--blue-cta); background: var(--blue-pale); }
.bf-nb-bank input { position: absolute; opacity: 0; pointer-events: none; }
.bf-nb-bank-icon { width: 80px; height: 80px; object-fit: contain; }
.bf-bank-logo    { width: 82px; height: 82px; object-fit: contain; }

/* Wallets panel hint */
.bf-wallet-hint {
  font-size: .83rem;
  color: var(--text-mid);
  margin-bottom: 12px;
  font-weight: 600;
}

/* Card form */
.bf-card-form { display: flex; flex-direction: column; gap: 12px; }
.bf-card-number-wrap { position: relative; }
.bf-card-type-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.4rem;
}

/* ── SECURITY STRIP ───────────────────────────────────────── */
.bf-security-strip {
  background: var(--green-light);
  border: 1px solid #A5D6A7;
  border-radius: var(--radius-sm);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  color: var(--green);
  font-weight: 700;
  margin-top: 14px;
}

/* ── PAY BUTTON ───────────────────────────────────────────── */
.bf-pay-btn {
  width: 100%;
  margin-top: 22px;
  background: linear-gradient(135deg, var(--blue-cta) 0%, #0D47A1 100%);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 16px;
  font-family: var(--font-head);
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--transition);
  letter-spacing: .03em;
  box-shadow: 0 6px 24px rgba(21,101,192,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.bf-pay-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 36px rgba(21,101,192,.4); }
.bf-pay-btn:disabled { opacity: .7; cursor: wait; transform: none; }

.bf-pay-secured {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 12px;
  font-size: .72rem;
  color: var(--text-light);
  flex-wrap: wrap;
  font-weight: 600;
}
.bf-pay-secured span { display: flex; align-items: center; gap: 4px; }

/* ── PROMO ────────────────────────────────────────────────── */
.bf-promo-card { padding: 18px 24px; }
.bf-promo-row { display: flex; gap: 10px; }
.bf-promo-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 20px;
  font-family: var(--font-head);
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: var(--transition);
}
.bf-promo-btn:hover { background: var(--navy-mid); }
.bf-promo-msg { margin-top: 10px; font-size: .83rem; font-weight: 700; }
.bf-promo-msg--success { color: var(--green); }
.bf-promo-msg--error   { color: var(--red); }
.bf-promo-chips { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.bf-promo-chip {
  background: var(--blue-pale);
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--navy);
}
.bf-promo-chip:hover { background: var(--blue-light); }

/* ── TRUST SEALS ──────────────────────────────────────────── */
.bf-trust-seals {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 10px;
}
.bf-trust-seal { text-align: center; font-size: .78rem; color: var(--text-mid); }
.bf-trust-seal-icon { font-size: 1.5rem; display: block; margin-bottom: 4px; }
.bf-trust-seal-label { display: block; }
.bf-trust-legal {
  font-size: .76rem;
  color: var(--text-light);
  text-align: center;
  line-height: 1.6;
}
.bf-trust-link { color: var(--blue-cta); font-weight: 600; text-decoration: none; }
.bf-trust-link:hover { text-decoration: underline; }

/* ── QR WRAP ──────────────────────────────────────────────── */
.bf-qr-wrap {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px;
  text-align: center;
  background: var(--off-white);
}
.bf-qr-placeholder {
  width: 100px;
  height: 100px;
  background: var(--navy);
  border-radius: 8px;
  margin: 10px auto;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.5rem;
  overflow: hidden;
}
.bf-qr-img   { width: 100%; height: 100%; object-fit: contain; }
.bf-qr-title { font-family: var(--font-head); font-weight: 700; font-size: .88rem; color: var(--navy); }
.bf-qr-sub   { font-size: .76rem; color: var(--text-light); margin-top: 4px; }

/* ── CONFIRMATION MODAL ───────────────────────────────────── */
.bf-confirm-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11,31,58,.75);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  backdrop-filter: blur(6px);
}
.bf-confirm-overlay.open { opacity: 1; pointer-events: all; }
.bf-confirm-modal {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 48px 40px 40px;
  text-align: center;
  max-width: 460px;
  width: 92%;
  box-shadow: 0 32px 80px rgba(11,31,58,.3);
  transform: scale(.88);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1);
}
.bf-confirm-overlay.open .bf-confirm-modal { transform: scale(1); }
.bf-confirm-anim { margin-bottom: 24px; }
.bf-checkmark-svg { width: 88px; height: 88px; }
.bf-circle-anim {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset .65s ease;
}
.bf-tick-anim {
  stroke-dasharray: 70;
  stroke-dashoffset: 70;
  transition: stroke-dashoffset .5s ease .55s;
}
.bf-confirm-title {
  font-family: var(--font-head);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 10px;
}
.bf-confirm-pnr { font-size: .9rem; color: var(--text-mid); margin-bottom: 8px; font-weight: 500; }
.bf-confirm-pnr-code {
  font-family: 'Courier New', monospace;
  font-weight: 800;
  background: var(--blue-pale);
  color: var(--blue-cta);
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 1.05rem;
  letter-spacing: .1em;
  border: 1.5px solid var(--border);
}
.bf-confirm-sub {
  font-size: .87rem;
  color: var(--text-light);
  margin-bottom: 28px;
  line-height: 1.7;
}
.bf-confirm-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.bf-confirm-dl {
  background: linear-gradient(135deg, var(--blue-cta), #0D47A1);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 13px 28px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  transition: var(--transition);
  box-shadow: 0 4px 14px rgba(21,101,192,.3);
}
.bf-confirm-dl:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(21,101,192,.4); }
.bf-confirm-home {
  background: var(--off-white);
  color: var(--text-dark);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 28px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .92rem;
  cursor: pointer;
  transition: var(--transition);
}
.bf-confirm-home:hover { background: var(--blue-pale); border-color: var(--blue-mid); }

/* ── PROGRESS STEPPER ─────────────────────────────────────── */
.bf-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 22px;
  padding: 16px 0 0;
}
.bf-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  flex: 1;
  max-width: 120px;
  position: relative;
}
.bf-step + .bf-step::before {
  content: '';
  position: absolute;
  left: calc(-50% + 16px);
  top: 15px;
  right: calc(50% + 16px);
  height: 2px;
  background: var(--border);
}
.bf-step.done + .bf-step::before { background: var(--blue-mid); }
.bf-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .85rem;
  border: 2px solid var(--border);
  background: var(--white);
  color: var(--text-light);
  transition: var(--transition);
  position: relative;
  z-index: 1;
}
.bf-step.done .bf-step-num   { background: var(--blue-mid); border-color: var(--blue-mid); color: #fff; }
.bf-step.active .bf-step-num { background: var(--navy); border-color: var(--navy); color: #fff; box-shadow: 0 0 0 4px rgba(21,101,192,.15); }
.bf-step-label { font-size: .72rem; font-weight: 700; color: var(--text-light); text-align: center; }
.bf-step.active .bf-step-label { color: var(--navy); }
.bf-step.done .bf-step-label  { color: var(--blue-mid); }

/* ── MISC UTILITIES ───────────────────────────────────────── */
.bf-tag {
  display: inline-block;
  border-radius: 50px;
  padding: 3px 10px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
}
.bf-tag--tatkal { background: #FFF3E0; color: #E65100; border: 1px solid #FFCC02; }
.bf-tag--free   { background: var(--green-light); color: var(--green); }
.bf-tag--offer  { background: #FCE4EC; color: #C2185B; }

/* Fare highlight colors extracted from JS */
.bf-text--green { color: var(--green); }
.bf-text--amber { color: var(--amber); }
.bf-text--red   { color: var(--red); }
.bf-text--navy  { color: var(--navy); }
.bf-text--light { color: var(--text-light); }
.bf-text--mid   { color: var(--text-mid); }
.bf-font-head   { font-family: var(--font-head); }
.bf-font-mono   { font-family: 'Courier New', monospace; }
.bf-fw-800 { font-weight: 800; }
.bf-fw-700 { font-weight: 700; }

/* Terminal / extras extracted from JS inline */
.bf-terminal-label { font-size: .72rem; opacity: .6; margin-top: 2px; }
.bf-pax-count-label { font-size: .76rem; opacity: .65; }

/* Train days inline style replacement */
.bf-train-days-label { font-size: .72rem; color: var(--text-light); margin-top: 2px; }

/* Avail inline style color */
.bf-avail-color--sl { color: #2E7D32; }
.bf-avail-color--3a { color: #1565C0; }
.bf-avail-color--2a { color: #6A1B9A; }
.bf-avail-color--1a { color: #E65100; }
.bf-avail-color--default { color: #555; }

/* Fare range distance info */
.bf-train-distance-badge {
  display: inline-block;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 50px;
  padding: 4px 12px;
  font-size: .76rem;
  font-weight: 700;
  margin-top: 6px;
  letter-spacing: .04em;
}

/* ═══════════════════════════════════════════════════════════
   MOBILE FILTER OVERLAY (for result page on mobile/tablet)
═══════════════════════════════════════════════════════════ */
.bf-filter-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(11,31,58,.55);
  z-index: 200;
  opacity: 0;
  transition: opacity .25s ease;
  backdrop-filter: blur(3px);
}
.bf-filter-overlay.open { opacity: 1; }

.bf-filter-drawer {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: min(340px, 88vw);
  background: var(--white);
  box-shadow: 8px 0 40px rgba(11,31,58,.2);
  overflow-y: auto;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
}
.bf-filter-overlay.open .bf-filter-drawer { transform: translateX(0); }

.bf-filter-drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 18px 16px;
  border-bottom: 2px solid var(--blue-light);
  position: sticky;
  top: 0;
  background: var(--white);
  z-index: 2;
}
.bf-filter-drawer-title {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1rem;
  color: var(--navy);
}
.bf-filter-drawer-close {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--text-mid);
  padding: 4px 8px;
  border-radius: 6px;
  transition: var(--transition);
}
.bf-filter-drawer-close:hover { background: var(--red-light); color: var(--red); }

.bf-filter-drawer-body {
  padding: 16px 18px;
  flex: 1;
  overflow-y: auto;
}
.bf-filter-drawer-footer {
  padding: 14px 18px;
  border-top: 1.5px solid var(--border);
  display: flex;
  gap: 10px;
  background: var(--white);
  position: sticky;
  bottom: 0;
}
.bf-filter-apply-btn {
  flex: 1;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px;
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--transition);
}
.bf-filter-apply-btn:hover { background: var(--navy-mid); }
.bf-filter-clear-btn {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-mid);
  cursor: pointer;
  transition: var(--transition);
}
.bf-filter-clear-btn:hover { border-color: var(--red); color: var(--red); }


/* ── TABLET (600px – 1024px) ─────────────────────────────── */
@media (max-width: 1024px) {
  .bf-page-wrap { padding: 60px 14px 80px; }

  /* Layout shifts */
  .bf-result-layout  { grid-template-columns: 1fr; }
  .bf-details-layout { grid-template-columns: 1fr; }
  .bf-checkout-layout { grid-template-columns: 1fr; }
  .bf-checkout-layout .bf-summary-col { order: -1; }

  /* Hide desktop sidebar filters, show toggle button */
  .bf-filters { display: none; }
  .bf-filter-toggle-btn { display: flex; }
  .bf-filter-overlay { display: block; }

  /* Fare sidebar stops being sticky on tablet */
  .bf-fare-sidebar { position: static; }

  /* Flight card: collapse to 2-col grid */
  .bf-flight-card {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .bf-card-airline { grid-column: 1 / -1; }
  .bf-card-right   { text-align: left; grid-column: 1 / -1; }

  /* Train card: 2-col */
  .bf-train-card { grid-template-columns: 1fr 1fr; }
  .bf-train-meta { grid-column: 1 / -1; }
  .bf-train-classes { grid-column: 1 / -1; justify-content: flex-start; }

  /* Bus card: 2-col */
  .bf-bus-card { grid-template-columns: 1fr 1fr; }
  .bf-bus-meta { grid-column: 1 / -1; }
  .bf-bus-card .bf-card-right { grid-column: 1 / -1; text-align: left; }
  .bf-bus-amenities { justify-content: flex-start; }

  /* Ticket strip: 2-col then stack */
  .bf-ticket-strip { grid-template-columns: 1fr 1fr; gap: 16px; }
  .bf-ts-date { grid-column: 1 / -1; text-align: left; }

  /* Search bar */
  .bf-search-bar { padding: 80px 16px 12px; }

  /* Payment tabs: smaller text */
  .bf-pay-tab { font-size: .75rem; padding: 10px 6px; }

  /* NB banks: 2-col */
  .bf-nb-banks { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }

  /* Addons grid */
  .bf-addons-grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
}

/* ── MOBILE (< 600px) ────────────────────────────────────── */
@media (max-width: 600px) {
  .bf-page-wrap { padding: 52px 10px 80px; }

  /* Search bar */
  .bf-search-bar { padding: 70px 12px 10px; }
  .bf-search-row { gap: 10px; }
  .bf-search-route { font-size: .9rem; gap: 7px; }
  .bf-search-icon { font-size: 1.1rem; }
  .bf-search-meta { display: none; }
  .bf-modify-btn { padding: 8px 14px; font-size: .8rem; }

  /* Filter toggle */
  .bf-filter-toggle-btn { padding: 11px 16px; font-size: .85rem; }

  /* Sort bar: stack */
  .bf-sort-bar { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Date strip smaller chips */
  .bf-date-chip { padding: 6px 12px; font-size: .75rem; }

  /* Banner strip: smaller cards */
  .bf-banner-card { flex: 0 0 150px; padding: 12px 14px; }
  .bf-banner-icon { font-size: 1.5rem; }
  .bf-banner-title { font-size: .82rem; }
  .bf-banner-sub { font-size: .7rem; }

  /* Flight card: single column */
  .bf-flight-card {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .bf-card-airline { grid-column: 1; }
  .bf-card-right   { text-align: left; grid-column: 1; }
  .bf-card-route   { text-align: left; }
  .bf-card-mid     { text-align: left; }
  .bf-card-time    { font-size: 1.15rem; }

  /* Flight route row: flex */
  .bf-mobile-route-row {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  /* Train card: single col */
  .bf-train-card  { grid-template-columns: 1fr; gap: 10px; }
  .bf-train-meta  { grid-column: 1; }
  .bf-train-classes { grid-column: 1; justify-content: flex-start; }

  /* Bus card: single col */
  .bf-bus-card { grid-template-columns: 1fr; gap: 10px; }
  .bf-bus-meta { grid-column: 1; }
  .bf-bus-card .bf-card-right { grid-column: 1; text-align: left; }
  .bf-bus-amenities { justify-content: flex-start; }

  /* Ticket strip: single col */
  .bf-ticket-strip {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 12px;
  }
  .bf-ts-time  { font-size: 1.3rem; }
  .bf-ts-route { gap: 12px; }
  .bf-ts-date  { text-align: left; font-size: .8rem; }

  /* Passenger form */
  .bf-pax-row { flex-direction: column; }
  .bf-field-group { min-width: unset; }

  /* Addons: single col */
  .bf-addons-grid { grid-template-columns: 1fr; }

  /* Seat map: smaller grid */
  .bf-seat-map { grid-template-columns: repeat(6, 1fr); }
  .bf-seat     { height: 34px; font-size: .72rem; }

  /* Fare sidebar: full width */
  .bf-fare-sidebar { position: static; }
  .bf-fare-card { padding: 16px; }
  .bf-continue-btn { padding: 13px; font-size: .88rem; }

  /* Checkout layout */
  .bf-checkout-card { padding: 16px; }
  .bf-checkout-title { font-size: .95rem; }

  /* Payment tabs: 2-row on tiny screens */
  .bf-payment-tabs { flex-wrap: wrap; border-radius: var(--radius-sm); }
  .bf-pay-tab {
    flex: 0 0 50%;
    border-right: 1.5px solid var(--border);
    border-bottom: 1.5px solid var(--border);
    font-size: .74rem;
    padding: 9px 4px;
  }
  .bf-pay-tab:nth-child(2n) { border-right: none; }
  .bf-pay-tab:nth-child(3),
  .bf-pay-tab:nth-child(4) { border-bottom: none; }

  /* UPI apps: smaller */
  .bf-upi-app { width: 80px; height: 60px; }
  .bf-upi-icon { width: 50px; height: 50px; }

  /* NB banks: 2-col small */
  .bf-nb-banks { grid-template-columns: 1fr 1fr; }
  .bf-nb-bank  { height: 80px; }
  .bf-bank-logo { width: 64px; height: 64px; }
  .bf-nb-bank-icon { width: 60px; height: 60px; }

  /* Stepper: compact */
  .bf-step-label { font-size: .65rem; }
  .bf-step-num   { width: 28px; height: 28px; font-size: .78rem; }

  /* Confirm modal */
  .bf-confirm-modal { padding: 32px 20px 200px; }
  .bf-confirm-title { font-size: 1.2rem; }
  .bf-confirm-btns { flex-direction: column; }
  .bf-confirm-dl,
  .bf-confirm-home { padding: 12px 20px; font-size: .87rem; }

  /* Trust seals: 2-col */
  .bf-trust-seals { gap: 10px; }
  .bf-trust-seal  { font-size: .72rem; }

  /* Promo */
  .bf-promo-row { flex-direction: column; }
  .bf-promo-btn { width: 100%; }

  /* Pay secured row: wrap tighter */
  .bf-pay-secured { gap: 10px; font-size: .68rem; }

  /* Summary grand */
  .bf-summary-grand { font-size: 1rem; }

  /* QR */
  .bf-qr-placeholder { width: 80px; height: 80px; }

  /* Filter drawer: full width on mobile */
  .bf-filter-drawer { width: 100vw; }
}




/* ── TRAVEL LOADING OVERLAY ──────────────────────────────── */

.bf-travel-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: linear-gradient(180deg, #a8d4f5 0%, #daeeff 55%, #e8f4ff 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}
.bf-travel-overlay.bf-overlay--hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ── CLOUDS ──────────────────────────────────────────────── */

.bf-clouds-wrap {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.bf-cloud {
  position: absolute;
  background: #fff;
  border-radius: 50px;
  opacity: 0.85;
}
.bf-cloud::before,
.bf-cloud::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 50%;
}

/* cloud 1 — large, mid */
.bf-cloud--1 {
  width: 180px; height: 50px;
  top: 18%; left: -220px;
  animation: bf-cloud-drift 6s linear 0s infinite;
}
.bf-cloud--1::before {
  width: 80px; height: 70px;
  top: -35px; left: 28px;
}
.bf-cloud--1::after {
  width: 55px; height: 55px;
  top: -28px; left: 80px;
}

/* cloud 2 — small, top */
.bf-cloud--2 {
  width: 110px; height: 35px;
  top: 10%; left: -140px;
  animation: bf-cloud-drift 8s linear 1.5s infinite;
  opacity: 0.65;
}
.bf-cloud--2::before {
  width: 50px; height: 45px;
  top: -22px; left: 18px;
}
.bf-cloud--2::after {
  width: 38px; height: 38px;
  top: -18px; left: 52px;
}

/* cloud 3 — large, lower */
.bf-cloud--3 {
  width: 200px; height: 55px;
  top: 65%; left: -250px;
  animation: bf-cloud-drift 7s linear 0.8s infinite;
}
.bf-cloud--3::before {
  width: 90px; height: 75px;
  top: -40px; left: 30px;
}
.bf-cloud--3::after {
  width: 65px; height: 60px;
  top: -32px; left: 95px;
}

/* cloud 4 — medium, bottom */
.bf-cloud--4 {
  width: 140px; height: 40px;
  top: 75%; left: -180px;
  animation: bf-cloud-drift 9s linear 3s infinite;
  opacity: 0.6;
}
.bf-cloud--4::before {
  width: 60px; height: 52px;
  top: -26px; left: 22px;
}
.bf-cloud--4::after {
  width: 45px; height: 42px;
  top: -20px; left: 65px;
}

@keyframes bf-cloud-drift {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(100vw + 280px)); }
}

/* ── TRAVEL ICON MOVER ───────────────────────────────────── */

.bf-travel-icon-wrap {
  position: relative;
  width: 100vw;
  height: 100px;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.bf-travel-mover {
  position: absolute;
  left: -160px;
  display: flex;
  align-items: center;
  animation: bf-vehicle-run 2.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.bf-travel-mover img{
  width: 100px;
  height: 100px;
  object-fit: contain;
  display: block;
}

/* plane bobs up-down while moving, train/bus stays level */
.bf-travel-mover--flights {
  animation: bf-plane-run 6.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.bf-travel-mover--trains,
.bf-travel-mover--buses {
  animation: bf-vehicle-run 6.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes bf-plane-run {
  0%   { left: -160px; top: 20px; }
  40%  { top: -10px; }
  70%  { top: 5px; }
  100% { left: calc(100vw + 160px); top: -5px; }
}
@keyframes bf-vehicle-run {
  0%   { left: -160px; }
  100% { left: calc(100vw + 160px); }
}

/* ground line for train/bus */
.bf-ground-line {
  position: absolute;
  bottom: 22%;
  left: 0; right: 0;
  height: 2px;
  background: rgba(21,101,192,0.13);
  border-radius: 2px;
}

/* ── LABEL ───────────────────────────────────────────────── */

.bf-travel-label {
  position: absolute;
  bottom: 18%;
  font-size: 16px;
  font-weight: 600;
  color: #1565c0;
  font-family: 'Sora', sans-serif;
  letter-spacing: 0.5px;
  animation: bf-label-pulse 1.4s ease-in-out infinite;
}
@keyframes bf-label-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}