/* ── BRAND VARIABLES ────────────────────────────────────────── */
:root {
  --orange:#f68b1c;  --orange-d:#e07810;  --orange-l:#FEF3E2;
  --navy:#0d3c60;    --navy-d:#082a44;    --navy-l:#1a5c8f;
  --footer:#101A2C;
  --gray-bg:#F2F5F9; --card-bg:#fff;
  --border:#DDE3ED;  --text:#1a2d45;      --muted:#5a7186;
  --radius:10px;
  --shadow:0 1px 4px rgba(13,60,96,.07),0 4px 18px rgba(13,60,96,.1);
  --seat-size:48px;  --seat-gap:3px;      --aisle-w:18px;
  --row-w:calc(4*var(--seat-size) + 4*var(--seat-gap) + var(--aisle-w));
}

/* ── RESET + BASE ───────────────────────────────────────────── */
*  { box-sizing:border-box; margin:0; padding:0; }
body {
  background:var(--gray-bg);
  font-family:'Segoe UI',system-ui,sans-serif;
  color:var(--text);
  font-size:14px;
  overflow-x:hidden;
}
body.page-success { background:#F0FDF4; }
body.page-failure { background:#FFF5F5; }
body.page-pending { background:#FFFBEB; }

/* ── HEADER ─────────────────────────────────────────────────── */
.hdr {
  background:var(--navy);
  box-shadow:0 2px 12px rgba(13,60,96,.45);
  position:sticky;top:0;z-index:900;
}
.hdr-in {
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;height:64px;max-width:1440px;margin:0 auto;
}
.hdr-logo {
  display:flex;align-items:center;text-decoration:none;
}
.hdr-logo-img {
  height:52px;width:auto;object-fit:contain;background:#fff;border-radius:4px;
}
.hdr-right {
  display:flex;align-items:center;gap:10px;
}
.badge-sec {
  background:rgba(246,139,28,.2);color:#faa94a;
  border:1px solid rgba(246,139,28,.4);
  border-radius:20px;padding:4px 12px;font-size:.7rem;font-weight:700;
}
.btn-site {
  display:flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.1);color:#fff;
  border:1.5px solid rgba(255,255,255,.25);border-radius:8px;
  padding:6px 14px;font-size:.78rem;font-weight:600;
  text-decoration:none;transition:.2s;
}
.btn-site:hover { background:rgba(255,255,255,.2);color:#fff; }
@media(max-width:576px) {
  .hdr-in { padding:0 14px; }
  .badge-sec { display:none; }
}

/* ── FOOTER ─────────────────────────────────────────────────── */
.ftr { background:var(--footer); color:#94A3B8; margin-top:40px; }
.ftr-in {
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:32px;
  max-width:1380px;margin:0 auto;padding:32px 28px 20px;
}
.ftr-brand .bn { font-size:1.1rem;font-weight:800;color:#fff;margin-bottom:8px; }
.ftr-brand p   { font-size:.8rem;line-height:1.7; }
.ftr-col h6 {
  color:var(--orange);font-size:.78rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:10px;
}
.ftr-col ul { list-style:none;padding:0;margin:0; }
.ftr-col ul li { font-size:.8rem;padding:3px 0; }
.ftr-col ul li i { width:14px;color:var(--orange);margin-right:4px; }
.ftr-col ul li a { color:inherit;text-decoration:none; }
.ftr-btm {
  border-top:1px solid rgba(255,255,255,.1);padding:12px 28px;
  text-align:center;font-size:.73rem;opacity:.5;
}

/* ── OVERLAY ────────────────────────────────────────────────── */
.ov {
  display:none;position:fixed;inset:0;
  background:rgba(13,60,96,.55);z-index:9999;
  align-items:center;justify-content:center;
}
.ov.on { display:flex; }
.spin-box {
  background:#fff;border-radius:14px;padding:28px 44px;
  text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.2);
}
.spin-box .spinner-border { color:var(--orange)!important;width:3rem;height:3rem; }

/* ═══════════════════════════════════════════════════════════════
   INDEX PAGE
═══════════════════════════════════════════════════════════════ */

/* Hero */
.hero {
  background:var(--orange);
  padding:10px 24px;
  display:flex;align-items:center;justify-content:space-between;
}
.hero h1    { font-size:1.1rem;font-weight:700;color:#fff;margin:0; }
.hero-crumb { font-size:.73rem;color:rgba(255,255,255,.85);margin:0; }

/* Wrap / grid */
.wrap { max-width:1380px;margin:0 auto;padding:18px 16px; }
.grid { display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start; }

/* Step cards */
.scard {
  background:var(--card-bg);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;margin-bottom:12px;
}
.scard:last-child { margin-bottom:0; }
.scard-hd {
  background:var(--navy);color:#fff;padding:10px 16px;
  display:flex;align-items:center;gap:10px;
  font-size:.84rem;font-weight:700;letter-spacing:.2px;
}
.scard-hd .ic {
  width:24px;height:24px;background:var(--orange);border-radius:6px;
  display:flex;align-items:center;justify-content:center;
  font-size:.7rem;flex-shrink:0;
}
.scard-body { padding:14px 16px; }

/* Form elements */
.flabel {
  display:block;font-weight:600;font-size:.76rem;color:var(--muted);
  text-transform:uppercase;letter-spacing:.4px;margin-bottom:4px;
}
.finput,.fselect {
  width:100%;border:1.5px solid var(--border);border-radius:8px;
  padding:8px 11px;font-size:.86rem;color:var(--text);background:#fff;
  transition:border .2s,box-shadow .2s;outline:none;
}
.finput:focus,.fselect:focus {
  border-color:var(--orange);box-shadow:0 0 0 3px rgba(247,148,29,.15);
}
.finput[readonly] { background:var(--gray-bg);cursor:default; }
.fgroup           { margin-bottom:12px; }
.frow             { display:grid;grid-template-columns:1fr 1fr;gap:12px; }
.frow3            { display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px; }
.fsub             { font-size:.7rem;color:var(--muted);margin-top:2px; }
.fdivider {
  font-size:.7rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.7px;color:var(--orange);
  display:flex;align-items:center;gap:8px;margin:14px 0 10px;
}
.fdivider::after { content:'';flex:1;height:1px;background:var(--border); }

/* Discount banner */
.disc-banner {
  background:linear-gradient(90deg,#FFFBEB,#FEF3C7);
  border:1.5px solid var(--orange);border-radius:10px;
  padding:9px 14px;display:none;align-items:center;gap:10px;
  font-weight:700;color:var(--navy);margin-bottom:10px;font-size:.84rem;
}
.disc-banner i { color:var(--orange); }

/* Date tiles */
.date-grid  { display:flex;flex-wrap:wrap;gap:6px;margin-top:6px; }
.date-tile  {
  background:var(--gray-bg);border:2px solid var(--border);border-radius:9px;
  padding:6px 12px;cursor:pointer;text-align:center;min-width:90px;
  transition:.16s;user-select:none;line-height:1.3;
}
.date-tile:hover { border-color:var(--orange);background:var(--orange-l); }
.date-tile.sel   { background:var(--orange);border-color:var(--orange-d);color:#fff; }
.dt-day  { font-size:.65rem;opacity:.85; }
.dt-date { font-size:.82rem;font-weight:700; }

/* Amount box */
.amt-box {
  background:linear-gradient(135deg,var(--navy-d),var(--navy));
  border-radius:10px;padding:12px 16px;margin-top:4px;color:#fff;
}
.amt-lbl  { font-size:.7rem;opacity:.7;margin-bottom:2px; }
.amt-val  { font-size:1.5rem;font-weight:800;color:var(--orange); }
.amt-row  {
  display:flex;justify-content:space-between;align-items:center;
  font-size:.78rem;opacity:.8;margin-top:4px;
}
.amt-row span:last-child { font-weight:700;color:rgba(255,255,255,.9); }

/* Info row */
.irow      { display:flex;gap:6px; }
.irow .finput { text-align:center;font-weight:700;color:var(--navy); }
.irow-sep  {
  font-size:1.1rem;font-weight:700;color:var(--muted);
  display:flex;align-items:center;padding:0 2px;
}

/* Selected seat chip */
.seatbox {
  background:#eaf3fb;border:1.5px solid #b3d4ea;border-radius:8px;
  padding:7px 11px;min-height:36px;display:flex;
  flex-wrap:wrap;align-items:center;gap:4px;
}
.seat-chip {
  background:var(--navy);color:#fff;
  border-radius:5px;padding:2px 8px;font-size:.7rem;font-weight:700;
}

/* Pay button */
.btn-pay {
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--orange);color:#fff;border:none;border-radius:10px;
  padding:13px;font-size:.96rem;font-weight:700;width:100%;cursor:pointer;
  box-shadow:0 4px 14px rgba(246,139,28,.35);transition:.2s;letter-spacing:.3px;
}
.btn-pay:hover:not(:disabled) {
  background:var(--orange-d);transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(246,139,28,.45);
}
.btn-pay:disabled { background:#B0C4D8;box-shadow:none;cursor:not-allowed;transform:none; }
.pay-badge {
  background:rgba(255,255,255,.25);border-radius:5px;
  padding:2px 8px;font-size:.66rem;font-weight:700;letter-spacing:.4px;
}

/* Seat map panel */
.seat-panel { position:sticky;top:74px; }
.bus-tabs   { display:flex;gap:6px;padding:12px 14px 0; }
.bus-tab {
  background:var(--gray-bg);border:2px solid var(--border);
  border-radius:8px 8px 0 0;padding:7px 18px;font-size:.8rem;
  font-weight:700;cursor:pointer;color:var(--muted);transition:.2s;
}
.bus-tab.sel { background:var(--orange);border-color:var(--orange-d);color:#fff; }
.smap-box {
  border:2px solid var(--orange);border-radius:0 10px 10px 10px;
  background:#fdf6ee;margin:0 10px;padding:10px;overflow-x:auto;min-height:120px;
}
.bus-front {
  text-align:right;padding:0 0 8px;
  border-bottom:2px dashed #f8d9a8;margin-bottom:8px;
}
.driver-badge {
  display:inline-flex;align-items:center;gap:6px;
  background:var(--navy);color:#fff;border-radius:7px;
  padding:4px 12px;font-size:.68rem;font-weight:700;letter-spacing:.3px;
}
.driver-badge i { color:var(--orange); }

/* Seat grid */
.sgrid { display:inline-flex;flex-direction:column;gap:4px; }
.srow  { display:flex;align-items:flex-end;gap:var(--seat-gap);width:var(--row-w); }
.srow.back-row .seat {
  flex:1;width:auto;
  max-width:calc((var(--row-w) - 4*var(--seat-gap))/5);
  height:calc((var(--row-w) - 4*var(--seat-gap))/5);
}
.srow.back-row .seat img { height:100%; }
.saisle      { width:var(--aisle-w);flex-shrink:0; }
.seat-spacer { width:var(--seat-size);flex-shrink:0; }
/* 4-column buses (19 / 27 / 28-seat): 1+aisle+2 row layout */
.sgrid.w4 { --row-w:calc(3*var(--seat-size) + 3*var(--seat-gap) + var(--aisle-w)); }
.sgrid.w4 .srow.back-row .seat {
  max-width:calc((var(--row-w) - 3*var(--seat-gap))/4);
  height:calc((var(--row-w) - 3*var(--seat-gap))/4);
}
.seat {
  width:var(--seat-size);height:var(--seat-size);
  position:relative;cursor:pointer;flex-shrink:0;
  border:none;background:none;padding:0;
}
.seat img    { width:100%;height:100%;object-fit:contain;pointer-events:none;display:block; }
.seat-no {
  position:absolute;top:33%;left:50%;
  transform:translate(-50%,-50%);
  font-size:.8rem;font-weight:800;color:#fff;
  pointer-events:none;white-space:nowrap;
  text-shadow:0 1px 3px rgba(0,0,0,.55);z-index:1;line-height:1;
}
.seat.booked         { cursor:not-allowed; }
.seat.booked .seat-no{ color:rgba(255,255,255,.85); }
.seat-legend { display:flex;gap:10px;flex-wrap:wrap;padding:8px 12px; }
.leg-row     { display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--muted); }
.leg-img     { width:22px;height:22px;object-fit:contain; }
.selbox {
  background:#EAF4FF;border:1.5px solid #b8d9f5;border-radius:8px;
  padding:8px 12px;margin:6px 10px;min-height:34px;
  display:flex;flex-wrap:wrap;align-items:center;gap:4px;
  font-size:.8rem;color:var(--navy);
}

/* ═══════════════════════════════════════════════════════════════
   SUCCESS PAGE
═══════════════════════════════════════════════════════════════ */
.success-card {
  max-width:700px;margin:32px auto 48px;background:#fff;
  border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.1);overflow:hidden;
}
.success-header {
  background:linear-gradient(135deg,#16A34A,#22C55E);
  color:#fff;padding:28px 32px;text-align:center;
}
.success-icon {
  width:72px;height:72px;background:rgba(255,255,255,.2);
  border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin:0 auto 12px;font-size:2.2rem;
}
.ticket-body { padding:24px 28px; }
.top-row     { display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:20px; }
.booking-id-box {
  background:#F0FDF4;border:2px dashed #22C55E;
  border-radius:12px;padding:14px;text-align:center;
}
.booking-id-box .bid-label { font-size:.75rem;color:#6B7280;margin-bottom:4px; }
.booking-id-box .bid       { font-size:1.7rem;font-weight:800;color:#16A34A;letter-spacing:3px; }
.amount-box {
  background:linear-gradient(135deg,var(--navy),#2A5298);
  color:#fff;border-radius:12px;padding:14px 16px;text-align:center;
}
.amount-box .amt-label { font-size:.75rem;opacity:.75; }
.amount-box .amt       { font-size:1.7rem;font-weight:800;color:var(--orange); }
.amount-box .via       { font-size:.72rem;opacity:.7;margin-top:2px; }
.detail-row {
  display:flex;justify-content:space-between;align-items:flex-start;
  padding:9px 0;border-bottom:1px solid #F3F4F6;font-size:.91rem;
}
.detail-row:last-of-type { border-bottom:none; }
.detail-row .dlabel { color:#6B7280;display:flex;align-items:center;gap:8px; }
.detail-row .dvalue { font-weight:600;text-align:right;max-width:60%; }
.seat-badges .badge { background:var(--orange);color:#fff;margin:2px;font-size:.76rem; }
.email-note {
  background:#F0FDF4;border:1px solid #BBF7D0;border-radius:8px;
  padding:10px 14px;font-size:.83rem;color:#166534;margin-top:18px;
}
.action-btns { display:flex;gap:12px;justify-content:center;margin-top:20px;flex-wrap:wrap; }
.btn-primary-wt {
  background:var(--orange);color:#fff;border:none;border-radius:8px;
  padding:10px 26px;font-weight:600;font-size:.9rem;text-decoration:none;transition:.2s;
}
.btn-primary-wt:hover { background:#E07A0D;color:#fff; }
.btn-outline-wt {
  background:transparent;color:var(--navy);border:2px solid var(--navy);
  border-radius:8px;padding:10px 26px;font-weight:600;font-size:.9rem;transition:.2s;cursor:pointer;
}
.btn-outline-wt:hover { background:var(--navy);color:#fff; }

/* ═══════════════════════════════════════════════════════════════
   FAILURE PAGE
═══════════════════════════════════════════════════════════════ */
.fail-card {
  max-width:540px;margin:40px auto;background:#fff;
  border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.1);
  overflow:hidden;text-align:center;
}
.fail-header { background:linear-gradient(135deg,#DC2626,#EF4444);color:#fff;padding:36px 32px; }
.fail-icon {
  width:72px;height:72px;background:rgba(255,255,255,.2);
  border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin:0 auto 12px;font-size:2.2rem;
}
.fail-body  { padding:24px 28px; }
.txn-box    {
  background:#FEF2F2;border:1px solid #FECACA;border-radius:8px;
  padding:12px 16px;margin:16px 0;font-size:.84rem;color:#6B7280;
}
.info-note  {
  background:#EFF6FF;border:1px solid #BFDBFE;border-radius:8px;
  padding:10px 14px;font-size:.83rem;color:#1E40AF;margin-top:16px;
}
.btn-retry  {
  background:var(--orange);color:#fff;border:none;border-radius:8px;
  padding:10px 26px;font-weight:600;font-size:.9rem;text-decoration:none;transition:.2s;
}
.btn-retry:hover { background:#E07A0D;color:#fff; }
.btn-home   {
  background:transparent;color:var(--navy);border:2px solid var(--navy);
  border-radius:8px;padding:10px 26px;font-weight:600;font-size:.9rem;
  text-decoration:none;transition:.2s;
}
.btn-home:hover { background:var(--navy);color:#fff; }

/* ═══════════════════════════════════════════════════════════════
   PENDING PAGE
═══════════════════════════════════════════════════════════════ */
.pending-card {
  max-width:540px;margin:40px auto;background:#fff;
  border-radius:16px;box-shadow:0 8px 32px rgba(0,0,0,.1);
  overflow:hidden;text-align:center;
}
.pending-header {
  background:linear-gradient(135deg,var(--orange),#E07A0D);
  color:#fff;padding:36px 32px;
}
.pending-icon {
  width:72px;height:72px;background:rgba(255,255,255,.2);
  border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin:0 auto 12px;font-size:2.2rem;
}
.pending-body  { padding:24px 28px; }
.pending-txn-box {
  background:#FFFBEB;border:1px solid #FDE68A;border-radius:8px;
  padding:12px 16px;margin:16px 0;font-size:.84rem;color:#6B7280;
}
.spinner-border { color:var(--orange)!important; }
.poll-counter   { font-size:.8rem;color:#9CA3AF;margin-top:6px; }

/* ═══════════════════════════════════════════════════════════════
   PRINT (success page)
═══════════════════════════════════════════════════════════════ */
@media print {
  @page { size:A4;margin:8mm; }
  .hdr,.ftr,.action-btns,.email-note { display:none!important; }
  body  { background:#fff; }
  .success-card { margin:0;max-width:100%;box-shadow:none;border-radius:0; }
  .success-header { padding:16px 20px; }
  .success-icon   { width:52px;height:52px;font-size:1.6rem;margin-bottom:8px; }
  .success-header h2 { font-size:1.2rem; }
  .ticket-body    { padding:14px 20px; }
  .top-row        { gap:10px;margin-bottom:14px; }
  .booking-id-box,.amount-box { padding:10px 12px; }
  .booking-id-box .bid,.amount-box .amt { font-size:1.3rem; }
  .detail-row     { padding:6px 0;font-size:.82rem; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════ */
@media (max-width:992px) {
  .grid        { grid-template-columns:1fr; }
  .seat-panel  { position:static; }
  .ftr-in      { grid-template-columns:1fr; }
  .frow,.frow3 { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .ftr-in { grid-template-columns:1fr; }
  .top-row { grid-template-columns:1fr; }
}
@media (max-width:576px) {
  .wrap     { padding:12px 10px; }
  .smap-box { margin:0 6px;padding:8px 6px; }
  .selbox   { margin:4px 6px; }
}