/* ==========================================================
   Susmi Tour & Travel — Design Tokens
   Palette: Deep Blue #0d47a1, Sky #2f80ed, Sun #ffb020 (accent),
            Ink #10233f, Mist #f5f8fd, White #ffffff
   Display face: Poppins (headings) / Body: Inter
   ========================================================== */
:root{
  --brand-blue: #0d47a1;
  --brand-blue-dark: #082e6b;
  --brand-sky: #2f80ed;
  --brand-sun: #ffb020;
  --ink: #10233f;
  --mist: #f5f8fd;
  --line: #e6ecf7;
  --seat-available: #22c55e;
  --seat-pending: #f5b400;
  --seat-booked: #e23e3e;
  --seat-blocked: #94a3b8;
  --shadow-soft: 0 10px 30px rgba(13, 71, 161, 0.08);
  --shadow-card: 0 6px 20px rgba(16, 35, 63, 0.06);
  --radius-lg: 22px;
  --radius-md: 14px;
}

body{
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--ink);
  background: var(--mist);
}
h1,h2,h3,h4,h5,.brand-text,.display-font{
  font-family: 'Poppins', 'Inter', sans-serif;
  font-weight: 700;
  color: var(--ink);
}

/* Navbar */
.navbar{ backdrop-filter: blur(6px); }
.brand-badge{
  width: 40px; height:40px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-sky));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.2rem;
}
.brand-text{ font-size:1.15rem; color: var(--brand-blue-dark); }
.navbar .nav-link{ font-weight:500; color: var(--ink); }

/* Buttons */
.btn-primary{
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-sky));
  border: none;
  box-shadow: 0 6px 16px rgba(47,128,237,0.28);
}
.btn-primary:hover, .btn-primary:focus{
  background: linear-gradient(135deg, var(--brand-blue-dark), var(--brand-blue));
}
.btn-outline-primary{ border-color: var(--brand-blue); color: var(--brand-blue); }
.btn-outline-primary:hover{ background: var(--brand-blue); border-color: var(--brand-blue); }
.btn-accent{
  background: var(--brand-sun); color:#1b1300; border:none; font-weight:600;
}
.btn-accent:hover{ background:#e69d0e; color:#1b1300; }

/* Hero */
.hero-section{
  position: relative;
  background: radial-gradient(120% 120% at 100% 0%, #e9f1ff 0%, var(--mist) 55%);
  padding: 72px 0 96px;
  overflow: hidden;
}
.hero-section::before{
  content:"";
  position:absolute; inset:auto -10% -40% auto;
  width: 480px; height:480px; border-radius:50%;
  background: radial-gradient(circle, rgba(47,128,237,0.16), transparent 70%);
}
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--line); border-radius:999px;
  padding:6px 16px; font-size:0.82rem; font-weight:600; color: var(--brand-blue);
  box-shadow: var(--shadow-card);
}
.hero-title{ font-size: clamp(2.1rem, 4vw, 3.4rem); line-height:1.12; }
.hero-sub{ font-size:1.05rem; color:#475569; max-width:520px; }

.hero-stat{
  background:#fff; border-radius: var(--radius-md); padding:16px 20px;
  box-shadow: var(--shadow-card); border:1px solid var(--line);
}
.hero-stat .num{ font-family:'Poppins',sans-serif; font-weight:800; font-size:1.5rem; color: var(--brand-blue-dark); }
.hero-stat .lbl{ font-size:0.78rem; color:#64748b; }

/* Trip cards */
.trip-card{
  background:#fff; border-radius: var(--radius-lg); overflow:hidden;
  box-shadow: var(--shadow-card); border:1px solid var(--line);
  transition: transform .25s ease, box-shadow .25s ease;
  height:100%;
}
.trip-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.trip-card .trip-img{ height:190px; object-fit:cover; width:100%; }
.trip-card .trip-body{ padding:20px; }
.trip-price{ font-family:'Poppins',sans-serif; font-weight:800; color: var(--brand-blue-dark); font-size:1.3rem; }
.badge-seats{
  background:#eaf3ff; color: var(--brand-blue); border-radius:999px; font-weight:600; font-size:0.75rem; padding:6px 12px;
}
.badge-date{
  background: var(--brand-sun); color:#1b1300; border-radius:999px; font-weight:700; font-size:0.75rem; padding:6px 12px;
}

/* Section headings */
.section-eyebrow{ color: var(--brand-sky); font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:0.78rem; }

/* Seat map */
.seat-map-wrap{
  background:#fff; border-radius: var(--radius-lg); padding:28px; box-shadow: var(--shadow-card); border:1px solid var(--line);
}
.vehicle-frame{
  border: 2px solid var(--line); border-radius: 26px; padding: 24px 18px; position:relative; background: linear-gradient(180deg,#fbfdff,#f5f8fd);
}
.driver-row{ display:flex; justify-content:flex-end; margin-bottom:18px; }
.driver-chip{
  width:46px; height:38px; border-radius:10px; background:#dbe6f7; display:flex;
  align-items:center; justify-content:center; color:#5b7ba8; font-size:1.1rem;
}
.seat-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:14px 10px; }
.seat-grid .aisle-gap{ width:100%; }
.seat-btn{
  width:100%; aspect-ratio:1/1; border-radius:10px; border:none; font-weight:700; font-size:0.85rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:#fff;
  transition: transform .15s ease;
}
.seat-btn:hover:not(:disabled){ transform: scale(1.08); }
.seat-btn:disabled{ cursor:not-allowed; opacity:0.85; }
.seat-available{ background: var(--seat-available); }
.seat-pending{ background: var(--seat-pending); color:#1b1300; }
.seat-booked{ background: var(--seat-booked); }
.seat-blocked{ background: var(--seat-blocked); }
.seat-selected{ background: var(--brand-blue) !important; box-shadow:0 0 0 3px rgba(13,71,161,0.25); }

.legend-dot{ width:14px; height:14px; border-radius:4px; display:inline-block; margin-right:6px; }

/* Booking summary card */
.summary-card{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card); border:1px solid var(--line); padding:24px;
  position: sticky; top: 96px;
}

/* Steps */
.step-pill{
  display:flex; align-items:center; gap:8px; font-weight:600; color:#94a3b8; font-size:0.85rem;
}
.step-pill.active{ color: var(--brand-blue); }
.step-pill .circle{
  width:26px; height:26px; border-radius:50%; background:#e2e8f0; color:#64748b;
  display:flex; align-items:center; justify-content:center; font-size:0.78rem; font-weight:700;
}
.step-pill.active .circle{ background: var(--brand-blue); color:#fff; }
.step-pill.done .circle{ background: var(--seat-available); color:#fff; }

/* Passenger card */
.passenger-card{ background:#fff; border:1px solid var(--line); border-radius: var(--radius-md); padding:18px; box-shadow: var(--shadow-card); }

/* Payment method card */
.pay-option{
  border:2px solid var(--line); border-radius: var(--radius-md); padding:18px; cursor:pointer; background:#fff;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pay-option.selected{ border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(13,71,161,0.12); }

/* Confirmation */
.confirm-hero{
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-sky));
  border-radius: var(--radius-lg); color:#fff; padding:40px; text-align:center;
}
.ticket-card{
  background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); border:1px solid var(--line); overflow:hidden;
}
.ticket-strip{
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-sky)); height:8px;
}

/* Footer */
.footer-section{ background: var(--ink); }
.footer-links li{ margin-bottom:8px; }
.footer-links a{ color:#cbd5e1; text-decoration:none; font-size:0.9rem; }
.footer-links a:hover{ color:#fff; }
.social-icon{
  width:36px; height:36px; border-radius:10px; background:rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center; color:#fff; text-decoration:none;
}
.social-icon:hover{ background: var(--brand-sky); }

/* Admin panel */
.admin-sidebar{
  background: linear-gradient(180deg, var(--brand-blue-dark), var(--brand-blue));
  min-height: 100vh; color:#fff;
}
.admin-sidebar .nav-link{ color:#cfe0ff; border-radius:10px; padding:10px 14px; font-weight:500; }
.admin-sidebar .nav-link.active, .admin-sidebar .nav-link:hover{ background: rgba(255,255,255,0.14); color:#fff; }
.admin-stat-card{
  background:#fff; border-radius: var(--radius-md); padding:20px; box-shadow: var(--shadow-card); border:1px solid var(--line);
}
.admin-stat-card .icon{
  width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; color:#fff;
}

@media (max-width: 768px){
  .summary-card{ position: static; }
  .seat-grid{ gap:10px 8px; }
}