:root{
  --bg:#ffffff;
  --ink:#0f172a;
  --muted:#64748b;
  --border:#e5e7eb;
  --soft:#f8fafc;

  /* Requested palette */
  --brand:#AB183C;        /* buttons + accents */
  --brand-2:#C92A52;      /* hover */
  --footer:#1F2227;       /* footer bg */

  --shadow: 0 14px 34px rgba(2, 6, 23, .10);
  --radius: 18px;
  --control-h: 48px;
  --pad: 18px;

  /* Booking flow: softer depth and hierarchy */
  --page-bg: #f5f5f8;
  --card-shadow: 0 2px 12px rgba(2, 6, 23, .06), 0 8px 24px rgba(2, 6, 23, .06);
  --card-shadow-hover: 0 4px 16px rgba(2, 6, 23, .08), 0 12px 32px rgba(2, 6, 23, .08);
  --accent-subtle: rgba(171, 24, 60, .07);
  --accent-border: rgba(171, 24, 60, .25);
}

*{box-sizing:border-box}
html,body{
  font-weight: 400;height:100%}
body{
  font-weight: 400;
  margin:0;
  background: var(--page-bg);
  color: var(--ink);
  font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

a{color:inherit;text-decoration:none}
.container{width:min(98vw, 1420px); margin: 22px auto; padding: 0 18px}
.card{
  border:1px solid var(--border);
  border-radius: var(--radius);
  background:#fff;
  box-shadow: var(--shadow);
}
.hero{
  border: 1px solid var(--border);
  border-radius: 20px;
  background: #fff;
  box-shadow: var(--card-shadow);
  padding: var(--pad);
}
.hero h2{ color: var(--ink); font-weight: 900; letter-spacing: -0.03em; margin: 0 0 6px; }
.hint{color:var(--muted); font-size:.92rem; line-height:1.35}

header{
  position:sticky; top:0; z-index:50;
  background:#0b1437;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:14px;
  padding: 14px 18px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-weight:600; letter-spacing:.2px; color:#fff;
}
.brand .dot{
  width:10px; height:10px; border-radius:999px;
  background:var(--brand);
  box-shadow: 0 0 0 6px rgba(171, 24, 60, .18);
}
.nav-actions{
  display:flex; align-items:center; gap:10px;
}
.nav-link{
  color:rgba(255,255,255,.9);
  font-weight:600;
  font-size:.95rem;
  padding: 10px 12px;
  border-radius: 12px;
  transition: background .15s;
}
.nav-link:hover{background: rgba(255,255,255,.08)}
.nav-link.secondary{
  border:1px solid rgba(255,255,255,.18);
}

/* Buttons */
.btn{
  height: 46px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background:#fff;
  color:#0b1437;
  cursor:pointer;
  transition: transform .08s, box-shadow .12s, background .15s, border-color .15s;
  font-weight:600;
}
.btn:hover{transform: translateY(-1px); box-shadow: 0 10px 18px rgba(2,6,23,.10)}
.btn:active{transform: translateY(0)}
.btn.primary{
  background: linear-gradient(160deg, var(--brand) 0%, #c41e3a 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 4px 14px rgba(171, 24, 60, .35);
  font-weight: 700;
}
.btn.primary:hover{
  background: linear-gradient(160deg, var(--brand-2) 0%, #d91f42 100%);
  box-shadow: 0 6px 20px rgba(171, 24, 60, .4);
}
.btn.soft{
  background: var(--soft);
  border-color: var(--border);
  color: var(--ink);
  box-shadow: none;
}
.btn.soft:hover{background: #eef2f7; transform: translateY(-1px)}
.btn[disabled]{opacity:.55; cursor:not-allowed; transform:none; box-shadow:none}
.btn.ghost{
  background: transparent;
  border-color: rgba(255,255,255,.18);
  color:#fff;
}
.btn.ghost:hover{background: rgba(255,255,255,.08); box-shadow:none; transform:none}

/* Stepper */
.stepper{
  position:relative;
  display:flex;
  justify-content:space-between;
  gap: 18px;
  padding: 12px 6px 8px;
  margin-bottom: 12px;
}
.stepper::before{
  content:"";
  position:absolute; left: 34px; right: 34px; top: 34px;
  height:2px; background:#e5e7eb;
}
.step{flex:1; text-align:center; position:relative}
.step .k{
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#94a3b8;
  margin-bottom: 8px;
}
.step .dot{
  width: 32px; height: 32px;
  border-radius:50%;
  display:inline-flex;
  align-items:center; justify-content:center;
  background:#e5e7eb;
  color:#475569;
  font-weight:600;
}
.step.active .k{color: var(--brand)}
.step.active .dot{
  background: var(--brand);
  color:#fff;
  box-shadow: 0 0 0 6px rgba(171, 24, 60, .14);
}
.step.done .k{color:#be185d}
.step.done .dot{background:#be185d; color:#fff}

/* Controls */
.controls{
  display:grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 16px;
  margin-top: 8px;
}
.ctrl{
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px;
  background:#fff;
}
.ctrl .label{
  font-size:.78rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#6b7280;
  margin-bottom: 8px;
}
@media(max-width:1100px){
  .controls{grid-template-columns: 1fr}
}

/* Dropdown (From) */
.dropdown{position:relative; max-width: 560px}
.dropdown-btn{
  height: var(--control-h);
  width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background:#fff;
  font:inherit;
  cursor:pointer;
}
.dropdown.open .dropdown-btn{
  border-color: var(--brand);
  box-shadow: 0 0 0 4px rgba(171,24,60,.12);
}
.dropdown.error .dropdown-btn{
  border-color:#ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,.10);
}
.caret{
  width:10px;height:10px;
  border-right: 2px solid #475569;
  border-bottom: 2px solid #475569;
  transform: rotate(45deg);
}
.menu{
  position:absolute;
  left:0; top: calc(100% + 8px);
  z-index: 30;
  display:none;
  min-width:100%;
  padding: 8px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.dropdown.open .menu{display:block}
.item{
  position:relative;
  padding: 10px 12px;
  border-radius: 12px;
  display:flex; align-items:center; justify-content:space-between;
  color:#0f172a;
}
.item:hover{background:#f8fafc}
.item.has-sub>.submenu{
  display:none;
  position:absolute;
  left: calc(100% + 8px);
  top:0;
  z-index: 31;
  min-width: 260px;
  padding: 8px;
  background:#fff;
  border:1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
}
.item.has-sub:hover>.submenu{display:block}
.sub{
  width:100%;
  text-align:left;
  background:#fff;
  border:0;
  cursor:pointer;
  font:inherit;
  padding: 10px 12px;
  border-radius: 12px;
}
.sub:hover{background: rgba(171,24,60,.07)}

/* Passenger stepper input */
.stepper-input{
  display:flex;
  align-items:stretch;
  border:1px solid var(--border);
  border-radius: 14px;
  overflow:hidden;
  height: var(--control-h);
  max-width: 280px;
  transition: border-color .15s, box-shadow .15s;
}
.stepper-input.error{
  border-color:#ef4444;
  box-shadow: 0 0 0 4px rgba(239,68,68,.10);
}
.stepper-input button{
  width: 52px;
  border:0;
  background:#f8fafc;
  cursor:pointer;
  font-weight:600;
}
.stepper-input button:hover{background:#f2f4f7}
.stepper-input input{
  width:100%;
  border:0;
  text-align:center;
  font:inherit;
  font-weight:600;
}

/* Currency - modern selector */
.currency{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.cur-pill{
  height: var(--control-h);
  display:inline-flex; align-items:center; gap:10px;
  padding: 0 14px;
  border:1px solid var(--border);
  border-radius: 999px;
  background:#fff;
  cursor:pointer;
  position:relative;
}
.cur-pill .tag{
  font-weight:600;
  letter-spacing:.08em;
}
.cur-pill .hint{
  font-size:.82rem;
  color: var(--muted);
}
.cur-menu{
  position:absolute;
  left:0; top: calc(100% + 8px);
  width: min(360px, 80vw);
  display:none;
  z-index: 40;
  border:1px solid var(--border);
  border-radius: 16px;
  background:#fff;
  box-shadow: var(--shadow);
  padding: 8px;
}
.cur.open .cur-menu{display:block}
.cur-opt{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding: 10px 12px;
  border-radius: 12px;
  cursor:pointer;
}
.cur-opt:hover{background:#f8fafc}
.cur-opt .left{display:flex; align-items:center; gap:10px}
.cur-opt .badge{
  font-weight:600;
  border:1px solid var(--border);
  border-radius: 999px;
  padding: 6px 10px;
}
.cur-opt.active .badge{
  background: rgba(171,24,60,.10);
  border-color: rgba(171,24,60,.22);
}
.cur-rate{
  font-size:.88rem;
  color: var(--muted);
}
.cur-spark{
  display:inline-flex; gap:4px; align-items:flex-end;
}
.cur-spark i{width:10px; border-radius: 4px; background: rgba(171,24,60,.32)}
.cur-spark i:nth-child(1){height:10px}
.cur-spark i:nth-child(2){height:16px}
.cur-spark i:nth-child(3){height:22px}
.cur-spark i:nth-child(4){height:30px; background: rgba(171,24,60,.55)}

/* Calendar */
.cal-wrap{margin-top: 12px; overflow:hidden}

.cal-mini{
  height: 26px;
  width: auto;
  display:block;
  margin-right: 10px;
  opacity: .95;
}
.cal-head{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;
  gap:10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.cal-head .left{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.cal-head .right{display:flex; align-items:center; gap:10px; margin-left:auto}
.cal-body{
  font-weight: 400;display:grid; grid-template-columns: 1fr 1fr; gap:0}
.month{padding: 16px; border-right: 1px solid var(--border)}
.month:last-child{border-right:0}
.m-title{display:flex; align-items:center; gap:8px; font-weight:600; margin-bottom: 8px}
.wk{display:grid; grid-template-columns: repeat(7, 1fr); gap:8px}
.wk .n{font-size:.78rem; color: var(--muted); text-align:center}
.days{display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; margin-top: 8px}
.d{
  border:1px solid #eef2f7;
  border-radius: 14px;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  padding: 8px 6px;
  cursor:pointer;
  position:relative;
  min-height: 68px;
}
.d:hover{border-color: rgba(171,24,60,.20); box-shadow: 0 10px 20px rgba(2,6,23,.06)}
.d.disabled{opacity:.45; cursor:not-allowed; background:#fafafa; box-shadow:none}
.d.no-slots.inactive,.d.inactive{pointer-events:none; cursor:default; opacity:.7}
.d.no-slots.inactive:hover,.d.inactive:hover{filter:none; box-shadow:none}
.d.sel{outline: 2px solid var(--brand); outline-offset:-2px}
.d .dw{font-size:.72rem; color: var(--muted); line-height:1; text-align:center}
.d .p{font-size: .95rem; font-weight:600; line-height:1; text-align:center}
.d .pr{font-size:.82rem; font-weight:600; color:#5a6d9a; line-height:1.15; text-align:center}
.d .color{position:absolute; right: 8px; top: 8px; width: 9px; height: 9px; border-radius: 50%}

@media(max-width:1100px){
  .cal-body{
  font-weight: 400;grid-template-columns: 1fr}
  .month{border-right:0; border-bottom: 1px solid var(--border)}
  .month:last-child{border-bottom:0}
}
@media(max-width:520px){
  .cal-mini{height:22px; margin-right:6px}
  .cal-head{gap:8px}
  .cal-head .left{width:100%}
  .cal-head .right{width:100%; justify-content:flex-end}

  /* Remove mini price-bar image on phones to simplify visuals */
  .cal-mini{display:none}

  .days{gap:6px}
  .wk{gap:6px}
  .d{min-height: 62px; border-radius: 12px}
  .d .pr{display:none} /* keep it clean on tiny screens */

  /* Minimal calendar presentation on phones: hide weekday labels and day-of-week
     header; keep the colored dot so availability is visible like on desktop. */
  .wk{display:none}
  .d .dw{display:none}

  /* On very small screens, show only one month at a time for a cleaner
     experience. We stack months vertically at 1100px already but the
     second month can still feel overwhelming on phones. Hiding it
     reduces clutter and avoids horizontal overflow. Navigation still
     allows moving to the next month via the arrow buttons. */
  .cal-body{grid-template-columns:1fr;}
  .cal-body .month:nth-child(2){display:none;}
}

/* Results list */
.list{display:grid; gap: 16px; margin-top: 16px}
.row{
  position:relative;
  display:grid;
  grid-template-columns: 1fr 340px;
  align-items:center;
  border:1px solid var(--border);
  border-radius: 18px;
  background:#fff;
  box-shadow: var(--shadow);
  overflow:hidden;
  transition: transform .12s, box-shadow .12s;
}
.row::before{
  content:"";
  position:absolute; left:0; top:0; bottom:0;
  width:6px;
  background: linear-gradient(180deg, rgba(171,24,60,.20), rgba(171,24,60,.55));
}
.row:hover{transform: translateY(-2px); box-shadow: 0 18px 38px rgba(2,6,23,.13)}
.colM{padding: 16px 20px}
.times{display:flex; align-items:center; gap:14px}
.t{font-weight:600; font-size: 1.20rem}
.tags{display:flex; flex-wrap:wrap; gap: 10px; margin-top: 10px}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding: 7px 12px;
  border-radius: 999px;
  border:1px solid #e2e8f0;
  background:#fafafa;
  font-weight:600;
  font-size:.92rem;
  color:#334155;
}
.badge.ok{background: rgba(16,185,129,.10); border-color: rgba(16,185,129,.24); color:#065f46}
.badge.bad{background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.20); color:#7f1d1d}

.colR{
  padding: 18px 20px;
  display:flex; flex-direction:column;
  align-items:flex-end;
  gap:8px;
  border-left: 1px solid var(--border);
}
.price{font-size: 1.34rem; font-weight: 900}
.subp{font-size:.92rem; color: var(--muted)}

@media(max-width:980px){
  .row{grid-template-columns:1fr}
  .colR{border-left:0; border-top:1px solid var(--border); align-items:flex-start}
}

/* Forms - modern */
.form-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 18px;
  margin-top: 10px;
}
@media(max-width:1100px){ .form-grid{grid-template-columns: 1fr} }
.form-card{
  padding: 20px 18px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: var(--card-shadow);
}
/* Passenger form fields: use a two-column grid on larger screens, but
   collapse to a single column on smaller screens. This provides a more
   professional layout by utilizing horizontal space where available
   while maintaining readability on mobile devices. */
.field-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (max-width: 600px) {
  .field-grid {
    grid-template-columns: 1fr;
  }
}

.field{display:flex; flex-direction:column; gap:8px}
.field label{font-weight:600; font-size: 13px; color:#475569}
.input{
  height: 52px;
  border:1px solid var(--border);
  border-radius: 16px;
  padding: 0 14px;
  outline:none;
  font:inherit;
  background:#fff;
  transition: box-shadow .15s, border-color .15s;
}
.input:focus{
  border-color: var(--accent-border);
  box-shadow: 0 0 0 4px var(--accent-subtle);
}
.select{appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, #9CA3AF 50%),
    linear-gradient(135deg, #9CA3AF 50%, transparent 50%);
  background-position: calc(100% - 20px) 22px, calc(100% - 14px) 22px;
  background-size: 6px 6px, 6px 6px;
  background-repeat:no-repeat;
  padding-right: 42px;
}

/* Passenger card list */
.pax-list{ display: grid; gap: 18px; }
.pax-card{
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--card-shadow);
  border-left: 4px solid var(--brand);
}
.pax-head{
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--accent-subtle);
  border-bottom: 1px solid var(--border);
}
.pax-head .title{ font-weight: 900; font-size: 1.05rem; letter-spacing: -0.02em; color: var(--ink); }
.pax-head .meta{ display: flex; gap: 8px; flex-wrap: wrap; }
.pill{
  display: inline-flex; align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  font-size: .8rem;
  font-weight: 600;
  color: #334155;
}
.pax-body{ font-weight: 400; padding: 16px; background: #fff; }
.actions-row{
  display:flex; gap: 12px; align-items:center; flex-wrap:wrap;
  margin-top: 14px;
}

/* Sex segmented control */
.seg{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius: 999px;
  overflow:hidden;
  height: 44px;
  background:#fff;
}
.seg input{display:none}
.seg label{
  padding: 0 16px;
  display:inline-flex; align-items:center;
  cursor:pointer;
  user-select:none;
  font-weight:600;
  color:#334155;
}
.seg input:checked + label{
  background: rgba(171,24,60,.12);
  color:#7f1d1d;
}

/* Unit toggle (kg/lb) */
/* Weight input + unit toggle container */
/* Weight input + unit toggle container. Keep items inline on all screens.
   The input expands to fill available space, while the toggle remains
   compact. */
.unit{
  display:flex;
  align-items:center;
  gap:10px;
}
.unit input{
  flex:1 1 auto;
  min-width:0;
}
.unit-toggle{
  display:flex;
  flex:0 0 auto;
}

/* On very small screens, stack the weight input and unit toggle vertically to
   prevent crowding. This ensures the number field and kg/lb buttons do not
   overlap or overflow when space is limited. */
/* (Removed unit stacking on small screens) */

/* =====================================================
   Global mobile fixes (prevents cramped/overflow layouts)
   ===================================================== */
@media (max-width: 760px){
  .container{padding: 0 14px; margin: 14px auto}
  .btn{width: 100%; justify-content: center}
  .nav{flex-wrap: wrap}
  .nav-actions{flex-wrap: wrap; width: 100%; justify-content: flex-end}
  .actions-row{flex-direction: column; align-items: stretch}
  .actions-row > *{width: 100%}
  .stepper{gap: 10px}
  .stepper::before{left: 18px; right: 18px}
  .dropdown{max-width: 100%}
  .stepper-input{max-width: 100%}
}
@media (max-width: 520px){
  .hero{padding: 14px}
  .ctrl{padding: 12px}
  .stepper{padding: 10px 2px 6px}
  .stepper::before{display:none}
  .step{flex:1}
}

/* ============================
   Confirmation (Production UI)
   ============================ */
.confirm-card{padding: 18px}
.confirm-hero{display:grid; grid-template-columns: 1.35fr 1fr; gap:18px; align-items:start}
.confirm-title-lg{font-size: 34px; margin: 10px 0 8px; font-weight: 900}
.confirm-subtitle{margin: 0 0 14px; color: var(--muted); line-height: 1.45}
.status-pill{
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 700;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.status-pill .dot{ width: 8px; height: 8px; border-radius: 50%; background: #12b76a; box-shadow: 0 0 0 2px rgba(18,183,106,.3); }
.status-pill.success{ border-color: rgba(16,185,129,.35); background: rgba(16,185,129,.08); color: #065f46; }
.status-pill.pending .dot{ background: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.3); }
.status-pill.pending{ border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.08); color: #7c2d12; }

.ref-card{
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand);
  background: #fff;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: var(--card-shadow);
}
.ref-label{ color: var(--muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
.ref-code{ font-size: 22px; letter-spacing: 1px; font-weight: 900; color: var(--ink); }
.ref-actions{ display: flex; gap: 10px; flex-wrap: wrap; }

.mini-card{
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  box-shadow: var(--card-shadow);
}
.mini-k{color:var(--muted); font-size:12px; letter-spacing:.08em; text-transform:uppercase}
.mini-v{font-size:18px; font-weight: 900; margin-top: 6px}
.mini-v.paid{color:#065f46}
.mini-v.pending{color:#7c2d12}
.mini-meta{margin-top: 10px; display:grid; gap:6px; font-size:13px}

.action-grid{margin-top: 12px; display:grid; grid-template-columns: 1fr 1fr; gap:10px}

.confirm-grid{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
  margin-top: 18px;
}
.panel{
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 16px;
  padding: 18px;
  box-shadow: var(--card-shadow);
}
.panel-wide{ grid-column: 1 / -1; }
.panel-head{
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding-bottom: 12px; border-bottom: 1px solid #f2f4f7; margin-bottom: 14px;
}
.panel-head h2{ font-size: 16px; margin: 0; font-weight: 900; color: var(--ink); letter-spacing: -0.02em; }

.trip-row{display:grid; grid-template-columns: 1fr 140px 1fr; gap:10px; padding:10px 0 14px}
.trip-strong{font-weight: 900; font-size: 16px; margin-top: 4px}
.trip-mid{display:flex; align-items:center; justify-content:center; gap:8px}
.trip-line{height:1px; flex:1; background:#eaecf0}
.trip-icon{width:34px; height:34px; border-radius:999px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background:#fff}

.kv-grid{display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:10px}
.kv{border:1px solid #f2f4f7; background:#fcfcfd; padding:10px; border-radius:12px}
.kv-v{font-weight: 900; margin-top:4px}

.pax-mini-list{display:grid; gap:10px}
.pax-item{border:1px solid #f2f4f7; background:#fcfcfd; padding:10px; border-radius:12px; display:flex; align-items:center; justify-content:space-between; gap:10px}
.pax-name{font-weight: 900}
.pax-meta{color:var(--muted); font-size:12px; margin-top:2px}
.pax-tag{font-size:12px; padding:6px 10px; border-radius:999px; background:#fff; border:1px solid var(--border)}

.steps{display:grid; gap:12px; margin-top: 6px}
.step-row{display:flex; gap:12px; align-items:flex-start}
.step-n{width:30px; height:30px; border-radius:10px; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); background: var(--soft); font-weight: 900}
.step-t{font-weight: 900}

.support-strip{margin-top: 14px; border: 1px dashed #d0d5dd; background: var(--soft); border-radius:16px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:12px}
.support-t{font-weight: 900}

.confirm-footer-actions{display:flex; gap:12px; justify-content:flex-end; flex-wrap:wrap; margin-top: 14px}

@media (max-width: 980px){
  .confirm-hero, .confirm-grid{grid-template-columns: 1fr}
  .trip-row{grid-template-columns: 1fr}
  .action-grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 520px){
  .confirm-card{padding: 14px}
  .confirm-title-lg{font-size: 28px}
  .ref-card{flex-direction: column; align-items: flex-start}
  .ref-actions{width: 100%}
  .action-grid{grid-template-columns: 1fr}
  .kv-grid{grid-template-columns: 1fr}
  .support-strip{flex-direction: column; align-items: stretch}
}

@media (max-width: 980px){
  .confirm-hero{grid-template-columns: 1fr}
  .confirm-grid{grid-template-columns: 1fr}
  .trip-row{grid-template-columns: 1fr}
  .kv-grid{grid-template-columns: 1fr 1fr}
}
@media (max-width: 520px){
  .kv-grid{grid-template-columns: 1fr}
  .ref-card{flex-direction: column; align-items:flex-start}
  .action-grid{grid-template-columns: 1fr}
  .confirm-footer-actions{flex-direction: column; align-items: stretch}
}
.unit-toggle{
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  display:inline-flex;
  overflow:hidden;
  background:#fff;
}
.unit-toggle button{
  height: 44px;
  padding: 0 14px;
  border:0;
  cursor:pointer;
  background:transparent;
  font-weight:600;
  color:#334155;
}
.unit-toggle button.active{
  background: rgba(171,24,60,.12);
  color:#7f1d1d;
}

/* Summary card */
.summary{
  position: sticky;
  top: 18px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--card-shadow);
}
.summary .head{
  padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--accent-subtle);
  border-bottom: 1px solid var(--border);
}
.summary .head .t{ font-weight: 900; font-size: 1rem; color: var(--ink); }
.summary .body{ font-weight: 400; padding: 16px; display: grid; gap: 10px; }
.line{ display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.line .k{ color: #475569; font-weight: 600; }
.line .v{ font-weight: 600; color: var(--ink); }
.div{ height: 1px; background: var(--border); margin: 4px 0; }
.total{ display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding-top: 8px; margin-top: 4px; border-top: 2px solid var(--border); }
.total .k{ font-weight: 900; }
.total .v{ font-size: 1.6rem; font-weight: 900; color: var(--brand); }

/* iPhone date picker (bottom sheet + wheels) */
.sheet{
  position:fixed; inset:0;
  display:none;
  z-index: 1000;
}
.sheet.open{display:block}
.sheet .backdrop{
  position:absolute; inset:0;
  background: rgba(2,6,23,.45);
}
.sheet .panel{
  position:absolute; left:0; right:0; bottom:0;
  background:#fff;
  border-radius: 22px 22px 0 0;
  box-shadow: 0 -14px 30px rgba(2,6,23,.25);
  padding: 14px;
  max-height: 70vh;
}
.sheet .top{
  display:flex; align-items:center; justify-content:space-between; gap: 12px;
  padding: 6px 6px 10px;
}
.sheet .top .title{font-weight: 900}
.sheet .wheels{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10px;
  padding: 10px 4px 4px;
}
.wheel{
  height: 240px;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow:auto;
  scroll-snap-type: y mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 84px 0; /* creates space top/bottom */
  position:relative;
}
.wheel::-webkit-scrollbar{width:0;height:0}
.wheel .opt{
  height: 42px;
  display:flex; align-items:center; justify-content:center;
  scroll-snap-align: center;
  font-weight: 900;
  color:#334155;
}
.wheel .opt.muted{color:#94a3b8; font-weight:600}
.wheel::after{
  content:"";
  position:absolute;
  left: 12px; right:12px;
  top: 50%;
  transform: translateY(-50%);
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(171,24,60,.24);
  background: rgba(171,24,60,.06);
  pointer-events:none;
}

/* Payment method cards */
.pay-grid{
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
}
@media(max-width:1100px){ .pay-grid{grid-template-columns:1fr} }
.method-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media(max-width:760px){ .method-row{grid-template-columns:1fr} }
.method{
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  cursor:pointer;
  background:#fff;
  transition: transform .08s, box-shadow .12s, border-color .12s;
}
.method:hover{transform: translateY(-1px); box-shadow: 0 12px 24px rgba(2,6,23,.10)}
.method.active{
  border-color: rgba(171,24,60,.30);
  box-shadow: 0 0 0 4px rgba(171,24,60,.10);
}
.method .t{font-weight: 900}
.method .d{margin-top:6px; color: var(--muted); font-size:.92rem}

.footer{
  margin-top: 28px;
  background: var(--footer);
  color: rgba(255,255,255,.86);
}
.footer .container{padding: 18px}
.footer .small{font-size:.9rem; color: rgba(255,255,255,.68)}

@media (max-width: 980px){
  .cal-body{
  font-weight: 400;grid-template-columns: 1fr;}
  .month{border-right:0; border-bottom: 1px solid var(--border);}
  .month:last-child{border-bottom:0;}
  .cal-head{flex-direction: column; align-items:flex-start; gap:10px;}
  .cal-head .right{width:100%; justify-content: flex-end;}
}
@media (max-width: 520px){
  .cal-mini{height: 36px;}
  .cal-head .left{flex-wrap: wrap; gap:8px;}
  .btn{padding: 10px 12px;}
}

/* DOB picker input */
.input[data-dob], .input[readonly]{cursor:pointer;}
.input[data-dob]:hover{border-color: rgba(171,24,60,.55); box-shadow: 0 0 0 4px rgba(171,24,60,.10);} 
.dob-field:hover .input{border-color: rgba(171,24,60,.55); box-shadow: 0 0 0 4px rgba(171,24,60,.08);} 
.dob-control{position:relative; display:flex; align-items:center; gap:10px}
.dob-control .input{flex:1; padding-right:48px; position:relative; z-index:1}
.icon-btn{z-index:5;position:absolute; right:10px; top:50%; transform:translateY(-50%); width:34px; height:34px; border-radius:12px; border:1px solid var(--border); background:#fff; cursor:pointer; font-size:16px; display:grid; place-items:center; transition: box-shadow .15s, border-color .15s;}
.icon-btn:hover{border-color: rgba(171,24,60,.55); box-shadow: 0 0 0 4px rgba(171,24,60,.10);} 

h1,h2,h3{font-weight:600;letter-spacing:-0.02em}

/* Phone input container: always display country selector and number on one row.
   The selector maintains a minimum width while the number field grows. */
.phone{display:flex; gap:10px; align-items:center}
.phone-sel{min-width:130px; width:auto}


/* New flexible form layout for passenger details
   Each field spans half the available width on larger screens and full width
   on smaller screens. This replaces the older .field-grid layout. */
.form-fields{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.form-fields .field{
  flex: 1 1 calc(50% - 16px);
  display:flex;
  flex-direction:column;
  gap:8px;
}
/* full-width rows for specified fields (via inline style or class) */
.form-fields .dob-field,
.form-fields .phone-field{
  flex-basis:100%;
}

/* Ensure the weight field spans the full width of the row. Without this the
   weight input/toggle can appear cramped or misaligned on mid-size and
   smaller screens. */
.form-fields .weight-field{
  flex-basis:100%;
}

/* Responsive stacking for weight and phone controls: on devices up to 900px
   wide, stack the weight input and unit toggle vertically, and stack the
   phone country selector and number input vertically. This prevents
   overlapping and cramped layouts on mobile and medium screens. */
@media (max-width: 900px){
  .unit{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .unit input{
    width: 100%;
  }
  .unit-toggle{
    width: 35%;
    display: flex;
    justify-content: space-between;
  }
  .phone{
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }
  .phone-sel,
  .phone-num{
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 600px){
  .form-fields .field{
    flex-basis:100%;
  }
}


/* Currency segmented control */
.cur-seg{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px;
  border:1px solid var(--border);
  border-radius:999px;
  background:#fff;
  width: fit-content;
}
.cur-btn{
  border:0;
  background:transparent;
  padding:10px 14px;
  border-radius:999px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.cur-btn:hover{ background: rgba(171,24,60,.08); color:var(--ink); }
.cur-btn.active{
  background: rgba(171,24,60,.12);
  color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(171,24,60,.28);
}

.dob-control .input{cursor:pointer}
.dob-control:hover .input{border-color: rgba(171,24,60,.55); box-shadow: 0 0 0 4px rgba(171,24,60,.08)}


/* DOB dropdowns (airline-style, avoids native calendar issues) */
.dob-selects{
  display:grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1.25fr) minmax(0,1fr);
  gap:10px;
  width:100%;
}
.dob-selects .dob-sel{min-width:0}

/* Make DOB look "premium" on desktop: span full row of the passenger grid */
@media (min-width: 761px){
  .dob-field{ grid-column: 1 / -1; }
}

/* When the passenger grid is 2 columns but the card is still narrow, avoid squashing */
@media (min-width: 761px) and (max-width: 980px){
  .dob-selects{ grid-template-columns: 1fr 1fr; }
  .dob-selects .dob-sel[data-dob-part="year"]{ grid-column: 1 / -1; }
}

/* Mobile & small screens: keep DOB selects aligned */
@media (max-width: 760px){
  .dob-selects{ grid-template-columns: 1fr 1fr; }
  .dob-selects .dob-sel[data-dob-part="year"]{ grid-column: 1 / -1; }
}

@media (max-width: 520px){
  .dob-selects{ grid-template-columns: 1fr; }
}
/* ===== Responsive hardening for Passenger page ===== */
@media (max-width: 640px){
  .actions-row{
    display:grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .actions-row .btn{
    width: 100%;
    justify-content: center;
  }
  .pax-head{
    flex-direction: column;
    align-items: flex-start;
  }
  .pax-head .meta{
    width: 100%;
  }
  .seg{
    width: 100%;
    justify-content: space-between;
  }
  .seg label{
    flex: 1;
    justify-content: center;
    padding: 0 10px;
  }
}

/* Make long select values not overflow (desktop); mobile overrides below */
.select, .input{
  min-width: 0;
}
@media (min-width: 769px){
  .select, .input{ max-width: 285px; }
}


/* ===== Mobile-friendly From dropdown (touch) ===== */
@media (max-width: 760px){
  #fromDrop .menu{
    max-height: 70vh;
    overflow: auto;
  }
  .item.has-sub>.submenu{
    position: static;
    min-width: 100%;
    margin-top: 6px;
    padding: 6px;
    box-shadow: none;
    border: 1px solid var(--border);
    background: #fff;
  }
  .item.has-sub.open-sub>.submenu{
    display:block;
  }
  .item.has-sub:not(.open-sub)>.submenu{
    display:none;
  }
}


/* Extra: keep passenger header tidy on small screens */
@media (max-width: 520px){
  .pax-head{flex-direction:column; align-items:flex-start}
  .pax-head .meta{width:100%}
}


/* --- PATCH v15: Fix DOB + passenger header "shape" without touching other layouts --- */
.field-grid .dob-field{
  grid-column: 1 / -1; /* DOB always full-width so it doesn't get squeezed into half-column */
}
@media (max-width: 980px){
  .dob-selects{
    grid-template-columns: minmax(0,1fr) minmax(0,1fr); /* 2 cols */
  }
  .dob-selects select[data-dob-part="year"]{
    grid-column: 1 / -1; /* year takes full row on tablets */
  }
}
@media (max-width: 680px){
  .dob-selects{
    grid-template-columns: 1fr; /* stack clean on mobile */
  }
}

/* Passenger list header/pills wrapping */
.pax-head{
  flex-wrap: wrap;
  gap: 10px !important;
}
.pax-head .title{min-width:220px;}
.pax-head .meta{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;}


/* ===========================
   ALIGNMENT PATCH (v16)
   - Fix DOB dropdown layout + full-width within passenger grid
   - Fix passenger action buttons stacking cleanly on mobile
   - Fix payment action button full-width and aligned
=========================== */

/* Passenger DOB: make the DOB field span full width of the 2-col grid */
.field-grid .dob-field{ grid-column: 1 / -1; }

/* DOB dropdowns: consistent aligned edges */
.dob-selects{
  display:grid;
  grid-template-columns: 1fr 1.25fr 1fr; /* month slightly wider */
  gap: 12px;
  width: 100%;
}
.dob-selects > *{ min-width: 0; }
.dob-selects .input{ width: 100%; }

/* Tablet: Day+Month on first row, Year full-width */
@media (max-width: 900px){
  .dob-selects{ grid-template-columns: 1fr 1fr; }
  .dob-selects select:nth-child(3){ grid-column: 1 / -1; }
}
/* Mobile: stack */
@media (max-width: 520px){
  .dob-selects{ grid-template-columns: 1fr; }
  .dob-selects select:nth-child(3){ grid-column: auto; }
}

/* Passenger page actions: keep edges aligned and avoid weird spacer wrapping */
.actions-row{ align-items: stretch; }
.actions-row > div[style*="flex:1"]{ min-width: 0; }
@media (max-width: 760px){
  .actions-row{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .actions-row > div[style*="flex:1"]{ display: none !important; }
  .actions-row .btn{ width: 100%; }
}

/* Payment page specific: single action button should match card width */
.pay-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:16px;
}
.pay-actions .btn{ width: 100%; }

/* ============================================
   Payment page redesign (Pay now / checkout)
   ============================================ */
.payment-page .payment-hero{
  padding: 24px 20px;
  max-width: 720px;
  margin: 0 auto;
}
.payment-page .payment-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.payment-page .payment-title{
  margin: 0;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.payment-page .payment-nav{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.payment-page .payment-nav .btn.ghost{
  padding: 8px 14px;
  font-size: 0.9rem;
  color: var(--muted);
  border-color: transparent;
}
.payment-page .payment-nav .btn.ghost:hover{
  color: var(--brand);
  background: rgba(171,24,60,.08);
}

.payment-page .checkout-wrap{
  margin-top: 0;
}
.payment-page .checkout-card{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: var(--card-shadow);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 0;
}

/* Summary block inside checkout card */
.payment-page .checkout-summary{
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  border: none;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.payment-page .checkout-summary .head{
  padding: 16px 18px;
  background: var(--accent-subtle);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.payment-page .checkout-summary .head .t{
  font-size: 1.05rem;
  font-weight: 900;
  color: var(--ink);
}
.payment-page .checkout-summary .body{
  padding: 16px 18px;
  gap: 10px;
  flex: 1;
  min-height: 0;
}
.payment-page .checkout-summary .line{
  font-size: 0.9rem;
}
.payment-page .checkout-summary .line .k{
  color: var(--muted);
  font-weight: 500;
}
.payment-page .checkout-summary .line .v{
  font-weight: 600;
  color: var(--ink);
  text-align: right;
}
.payment-page .checkout-summary .div{
  margin: 8px 0;
  height: 1px;
  background: var(--border);
}
.payment-page .checkout-summary .total{
  padding-top: 6px;
  margin-top: 2px;
  border-top: 2px solid var(--border);
}
.payment-page .checkout-summary .total .k{
  font-size: 0.95rem;
  color: var(--ink);
}
.payment-page .checkout-summary .total .v{
  font-size: 1.35rem;
  font-weight: 900;
  color: var(--brand);
}

/* Form section – right column */
.payment-page .checkout-form-section{
  padding: 20px 18px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.payment-page .checkout-form-title{
  margin: 0 0 14px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.payment-page .checkout-fields{
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  flex: 1;
  min-height: 0;
}
.payment-page .checkout-field-full{
  grid-column: auto;
}
.payment-page .checkout-hint{
  display: block;
  margin-top: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}
.payment-page .checkout-form-section .optional{
  font-weight: 400;
  color: var(--muted);
}
.payment-page .checkout-form-section .input{
  height: 48px;
  border-radius: 12px;
  font-size: 0.95rem;
}
.payment-page .pay-actions{
  margin-top: 18px;
  flex-shrink: 0;
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.payment-page .pay-actions #downloadTicketBtn{
  flex: 0 0 auto;
  margin-right: auto;
  color: var(--ink);
  border-color: var(--border);
  background: #fff;
  min-height: 52px;
}
.payment-page .pay-actions .btn-pay-now{
  flex: 0 0 auto;
  margin-left: auto;
}
.payment-page .pay-actions #downloadTicketBtn:hover{
  background: var(--accent-subtle);
  border-color: var(--brand);
  color: var(--brand);
}
.payment-page .btn-pay-now{
  min-height: 52px;
  font-size: 1.05rem;
  font-weight: 800;
  border-radius: 14px;
  letter-spacing: 0.02em;
  box-shadow: 0 8px 24px rgba(171,24,60,.28);
}
.payment-page .btn-pay-now:hover{
  box-shadow: 0 12px 32px rgba(171,24,60,.35);
  transform: translateY(-1px);
}

/* Desktop: side-by-side for balanced width vs height */
@media (max-width: 700px){
  .payment-page .checkout-card{
    grid-template-columns: 1fr;
  }
  .payment-page .checkout-summary{
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 600px){
  .payment-page .payment-hero{ padding: 18px 14px; max-width: 100%; }
  .payment-page .payment-header{ margin-bottom: 20px; }
  .payment-page .payment-title{ font-size: 1.35rem; }
  .payment-page .checkout-form-section{ padding: 18px 16px; }
  .payment-page .checkout-summary .head,
  .payment-page .checkout-summary .body{ padding: 14px 16px; }
  .payment-page .btn-pay-now{ min-height: 50px; font-size: 1rem; }
}



.btn.disabled{opacity:.55;cursor:not-allowed;pointer-events:none}

@media print{
  body{background:#fff}
  .no-print{display:none !important}
  .ticket-sheet{box-shadow:none !important;border:none !important}
}



/* === FORCE MOBILE CALENDAR LAYOUT ON ALL SCREENS === */
.calendar-wrapper,
.calendar-container,
.calendar-grid {
  width: 100% !important;
  max-width: 420px !important;
  margin: 0 auto !important;
}

/* Hide second month / multi-month layouts */
.calendar-month + .calendar-month {
  display: none !important;
}

/* Day cells sizing (mobile style) */
.calendar-day,
.calendar-cell {
  width: 14.28% !important;
  min-height: 56px !important;
  font-size: 13px !important;
}

/* Price text inside calendar */
.calendar-day .price,
.calendar-cell .price {
  font-size: 11px !important;
  line-height: 1.2;
}

/* Prevent calendar from stretching layout */
.calendar-section {
  display: flex;
  justify-content: center;
}


/* ============================================================
   Booking flow: mobile-first Passenger, Payment, Confirmation
   ============================================================ */

/* Prevent horizontal scroll on small screens */
@media (max-width: 768px){
  body{ overflow-x: hidden; }
  .container{ min-width: 0; }
}

/* --- Passenger page mobile --- */
@media (max-width: 768px){
  .hero .form-grid{ margin-top: 12px; gap: 14px; }
  .form-card{ padding: 16px 14px; border-radius: 16px; }
  .pax-list{ gap: 16px; }
  .pax-card{ border-radius: 16px; }
  .pax-head{ padding: 14px 14px; flex-wrap: wrap; gap: 10px; }
  .pax-head .title{ min-width: 0; font-size: 1rem; }
  .pax-head .meta{ width: 100%; justify-content: flex-start; }
  .pax-body{ padding: 14px; }
  .form-fields{ gap: 14px; }
  .form-fields .field{ flex: 1 1 100%; flex-basis: 100%; }
  .field label{ font-size: 13px; }
  /* Full-width inputs + touch height; 16px font prevents iOS zoom on focus */
  .input{ height: 48px; min-height: 48px; padding: 0 14px; border-radius: 14px; width: 100%; max-width: none; font-size: 16px; }
  .select, .dob-sel{ width: 100%; max-width: none; padding-right: 40px; min-height: 48px; font-size: 16px; }
  .phone-sel{ min-width: 0; width: 100%; }
  .phone{ flex-direction: column; align-items: stretch; gap: 8px; }
  .unit{ flex-direction: column; align-items: stretch; gap: 8px; }
  .unit input{ width: 100%; }
  .unit-toggle{ width: 100%; display: flex; }
  .unit-toggle button{ flex: 1; min-height: 44px; }
  .seg{ width: 100%; height: 48px; justify-content: stretch; }
  .seg label{ flex: 1; justify-content: center; padding: 0 12px; min-height: 44px; display: inline-flex; align-items: center; }
  .dob-selects{ grid-template-columns: 1fr; gap: 10px; }
  .dob-selects select:nth-child(3){ grid-column: auto; }
  .referral-row .input{ width: 100%; max-width: none; }
  /* Terms: larger touch target and tap area */
  .terms-container{ padding: 16px 14px; margin-top: 14px; min-height: 52px; display: flex; align-items: center; }
  .terms-label{ min-height: 44px; padding: 4px 0; justify-content: flex-start; align-items: center; }
  .terms-label input{ min-width: 22px; min-height: 22px; }
  .actions-row{ margin-top: 16px; gap: 10px; display: grid; grid-template-columns: 1fr; }
  .actions-row .btn{ width: 100%; min-height: 48px; justify-content: center; }
  .summary{ margin-top: 0; width: 100%; }
  .summary .line .v{ word-break: break-word; text-align: right; }
  .summary .body .line{ flex-wrap: wrap; gap: 4px; }
}

/* Passenger: small mobile – header, progress, safe area */
@media (max-width: 480px){
  .container{ padding-left: 12px; padding-right: 12px; padding-bottom: env(safe-area-inset-bottom, 0); }
  .hero > div:first-child{ flex-direction: column; align-items: stretch; gap: 10px; }
  .hero h2{ font-size: 1.25rem; }
  #progress{ align-self: flex-start; }
  .form-card{ padding: 14px 12px; }
  .pax-head, .pax-body{ padding: 12px; }
  .btn{ min-height: 48px; padding: 0 14px; }
  .actions-row{ padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* --- Payment page mobile --- */
@media (max-width: 768px){
  .hero .card[style*="max-width:420px"]{ max-width: none !important; width: 100% !important; margin: 0; padding: 18px 16px; }
  .hero #summary{ margin-bottom: 14px; }
  .pay-form .field-grid{ grid-template-columns: 1fr; gap: 14px; }
  .pay-form .field{ grid-column: auto !important; }
  .pay-form .input{ width: 100%; max-width: none; height: 48px; }
  .pay-form .select{ width: 100%; max-width: none; }
  .pay-actions{ margin-top: 18px; }
  .pay-actions .btn{ width: 100%; min-height: 48px; }
  .payment-page .checkout-form-section .input,
  .payment-page .checkout-form-section .select{ font-size: 16px; min-height: 48px; }
  .payment-page .payment-nav .btn{ min-height: 48px; }
}

@media (max-width: 480px){
  .hero #backPassengers,
  .hero #backBooking{ width: 100%; min-height: 48px; }
  .hero .card[style*="max-width:420px"]{ padding: 16px 14px !important; }
  .payment-page .container{ padding-left: 12px; padding-right: 12px; padding-bottom: env(safe-area-inset-bottom, 0); }
  .payment-page .pay-actions{ padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* --- Confirmation page mobile --- */
@media (max-width: 768px){
  .confirm-hero{ grid-template-columns: 1fr; gap: 16px; }
  .confirm-grid{ grid-template-columns: 1fr; gap: 16px; margin-top: 16px; }
  .ref-card{ flex-direction: column; align-items: stretch; gap: 12px; padding: 14px; }
  .ref-actions{ flex-wrap: wrap; }
  .ref-actions .btn{ min-height: 48px; flex: 1 1 auto; min-width: 120px; }
  .action-grid{ grid-template-columns: 1fr; gap: 10px; }
  .action-grid .btn{ width: 100%; min-height: 48px; }
  .trip-row{ grid-template-columns: 1fr; gap: 12px; padding: 12px 0; }
  .trip-mid{ order: 0; margin: 8px 0; }
  .panel{ padding: 14px; }
  .panel-head{ flex-wrap: wrap; gap: 8px; }
  .kv-grid{ grid-template-columns: 1fr; }
  .confirm-footer-actions{ flex-direction: column; align-items: stretch; }
  .confirm-footer-actions .btn{ width: 100%; min-height: 48px; }
  .support-strip{ flex-direction: column; align-items: stretch; gap: 10px; padding: 14px; }
}

@media (max-width: 480px){
  .confirm-title-v2{ font-size: 1.5rem !important; }
  .ref-code{ font-size: 1.25rem; word-break: break-all; }
  .mini-card{ padding: 12px; }
  .confirm-card{ padding: 12px; }
  .confirm-v2 .container{ padding-left: 12px; padding-right: 12px; padding-bottom: env(safe-area-inset-bottom, 0); }
  .confirm-footer-actions{ padding-bottom: env(safe-area-inset-bottom, 0); }
}

/* Terms & Conditions consent */
.terms-container{
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--soft);
}
.terms-label{ display: flex; align-items: flex-start; gap: 10px; cursor: pointer; line-height: 1.5; font-size: 14px; color: var(--ink); }
.terms-label input{ margin-top: 3px; transform: scale(1.1); }
.terms-label a{ color: var(--brand); text-decoration: underline; font-weight: 600; }
.terms-label a:hover{ color: var(--brand-2); }