/* ============================================================
   BusXpress — Mobile Responsive Stylesheet
   Drop this file into your project and link it AFTER your
   main style.css:
     <link rel="stylesheet" href="/assets/css/mobile-responsive.css">
   ============================================================ */

/* ── 1. BASE RESET & BOX MODEL ────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  min-width: 320px;
}

img, video, iframe {
  max-width: 100%;
  height: auto;
}

/* ── 2. NAVBAR ─────────────────────────────────────────────── */
nav,
header nav,
.navbar,
.nav-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  gap: 0.5rem;
}

/* Logo */
nav .logo,
nav .brand,
nav a:first-child {
  flex-shrink: 0;
  font-size: 1.2rem;
}

/* Desktop nav links – hidden on mobile */
nav ul,
.nav-links,
.navbar-nav {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Auth buttons */
.nav-auth,
nav .btn-group,
nav > div:last-child {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* Hamburger button – hidden by default, shown on mobile */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform 0.3s;
}

/* ── 3. HERO SECTION ───────────────────────────────────────── */
.hero,
section.hero,
.hero-section {
  padding: 2rem 1rem 1.5rem;
  text-align: center;
}

.hero h1,
.hero-title {
  font-size: clamp(1.6rem, 6vw, 3rem);
  line-height: 1.2;
}

.hero p,
.hero-subtitle {
  font-size: clamp(0.9rem, 3vw, 1.1rem);
}

/* Badge row */
.hero-badges,
.feature-pills,
.badge-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

/* ── 4. SEARCH / BOOKING FORM ──────────────────────────────── */
.search-form,
.booking-form,
.search-box,
form.search {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
  padding: 1rem;
}

.search-form .form-row,
.search-form .input-group {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  width: 100%;
}

.search-form input,
.search-form select,
.booking-form input,
.booking-form select {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border-radius: 0.5rem;
}

.search-form button[type="submit"],
.booking-form button[type="submit"],
.btn-search {
  width: 100%;
  padding: 0.9rem;
  font-size: 1rem;
  border-radius: 0.5rem;
}

/* Tab switcher (Bus Booking / Send Parcel) */
.form-tabs,
.tab-row {
  display: flex;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  gap: 0;
  scrollbar-width: none;
}
.form-tabs::-webkit-scrollbar { display: none; }

.form-tabs .tab,
.tab-btn {
  flex: 1;
  min-width: max-content;
  text-align: center;
  padding: 0.6rem 1rem;
}

/* ── 5. STATS ROW ──────────────────────────────────────────── */
.stats,
.stats-row,
.counter-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  padding: 1.5rem 1rem;
}

.stat-item,
.counter-item {
  text-align: center;
  padding: 0.75rem;
}

/* ── 6. FEATURES / CARDS GRID ─────────────────────────────── */
.features,
.features-grid,
.cards-grid,
.why-choose {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1.5rem 1rem;
}

.feature-card,
.card,
.why-card {
  padding: 1.25rem;
  border-radius: 0.75rem;
}

/* ── 7. POPULAR ROUTES ─────────────────────────────────────── */
.routes-grid,
.popular-routes,
.route-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  padding: 1rem;
}

/* ── 8. FILTER BAR (Search page) ───────────────────────────── */
.filters,
.filter-bar,
.filter-panel {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}

.filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.filter-btn,
.filter-tag {
  font-size: 0.8rem;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Date navigation chips */
.date-nav,
.date-chips {
  display: flex;
  overflow-x: auto;
  gap: 0.5rem;
  padding: 0.5rem 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.date-nav::-webkit-scrollbar { display: none; }

.date-chip {
  flex-shrink: 0;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-size: 0.85rem;
  white-space: nowrap;
}

/* Bus result cards */
.bus-card,
.result-card {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border-radius: 0.75rem;
}

.bus-card .route-info {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.bus-card .actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.bus-card .btn-book {
  width: 100%;
  padding: 0.75rem;
  text-align: center;
  border-radius: 0.5rem;
  font-size: 0.95rem;
}

/* ── 9. CTA SECTION ────────────────────────────────────────── */
.cta-section,
.cta-banner {
  text-align: center;
  padding: 2rem 1rem;
}

.cta-section h2,
.cta-banner h2 {
  font-size: clamp(1.4rem, 5vw, 2rem);
}

.cta-buttons,
.cta-section .btn-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1.25rem;
}

.cta-buttons a,
.cta-section .btn {
  width: 100%;
  max-width: 320px;
  text-align: center;
  padding: 0.85rem 1.5rem;
  border-radius: 0.5rem;
}

/* ── 10. FOOTER ────────────────────────────────────────────── */
footer,
.footer {
  padding: 2rem 1rem 1rem;
}

.footer-grid,
.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.footer-col h5,
.footer-col h4 {
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-bottom {
  margin-top: 1.5rem;
  padding-top: 1rem;
  text-align: center;
  font-size: 0.8rem;
}

/* ── 11. LOGIN / REGISTER PAGE ─────────────────────────────── */
.auth-layout,
.login-layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.auth-promo,
.login-promo {
  display: none; /* hide decorative left panel on mobile */
}

.auth-form-wrapper,
.login-form-wrapper {
  width: 100%;
  padding: 2rem 1rem;
}

.auth-form,
.login-form {
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
}

.auth-form input,
.login-form input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  margin-bottom: 0.75rem;
  border-radius: 0.5rem;
}

.auth-form button[type="submit"],
.login-form .btn-submit {
  width: 100%;
  padding: 0.9rem;
  font-size: 1rem;
  border-radius: 0.5rem;
}

/* ── 12. PARCEL / TRACK PAGES ──────────────────────────────── */
.parcel-form,
.track-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
}

.parcel-form input,
.parcel-form select,
.track-form input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border-radius: 0.5rem;
}

.tracking-result {
  padding: 1rem;
  border-radius: 0.75rem;
}

.tracking-steps {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ── 13. UTILITY ───────────────────────────────────────────── */
.container,
.page-container,
.wrapper {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  margin-left: auto;
  margin-right: auto;
}

/* Hide horizontal overflow globally */
section {
  overflow-x: hidden;
}

/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* ── MOBILE  (≤ 480px) ──────────────────────────────────────── */
@media (max-width: 480px) {
  html { font-size: 15px; }

  /* Navbar: collapse links, show hamburger */
  nav ul,
  .nav-links,
  .navbar-nav {
    display: none;
    flex-direction: column;
    width: 100%;
    padding: 0.75rem 0;
    gap: 0.25rem;
  }
  nav ul.open,
  .nav-links.open,
  .navbar-nav.open {
    display: flex;
  }
  nav ul li a,
  .nav-links a {
    display: block;
    padding: 0.6rem 1rem;
    border-radius: 0.4rem;
  }

  .nav-toggle { display: flex; }

  /* Auth buttons stack under logo on very small screens */
  .nav-auth {
    display: none;
  }
  .nav-auth.open {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.5rem;
    padding: 0.5rem 0;
  }
  .nav-auth a {
    width: 100%;
    text-align: center;
    padding: 0.65rem;
    border-radius: 0.5rem;
  }

  .stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero h1 { font-size: 1.6rem; }

  .cta-buttons a { max-width: 100%; }
}

/* ── TABLET  (481px – 768px) ───────────────────────────────── */
@media (min-width: 481px) and (max-width: 768px) {
  html { font-size: 15.5px; }

  .container { padding-left: 1.25rem; padding-right: 1.25rem; }

  /* Navbar: show links in a scrollable row */
  nav ul,
  .nav-links {
    font-size: 0.85rem;
    gap: 0.5rem;
  }

  /* Search form: 2-column on tablet */
  .search-form .form-row,
  .search-form .input-group {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .search-form input,
  .search-form select {
    flex: 1 1 calc(50% - 0.375rem);
    min-width: 140px;
  }
  .search-form button[type="submit"] {
    width: auto;
    flex: 0 0 auto;
    padding: 0.75rem 2rem;
  }

  /* Features: 2 columns */
  .features-grid,
  .cards-grid,
  .why-choose {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Stats: 4 columns */
  .stats { grid-template-columns: repeat(4, 1fr); }

  /* Routes: 2 columns */
  .routes-grid { grid-template-columns: repeat(2, 1fr); }

  /* Footer: 2 columns */
  .footer-grid,
  .footer-cols {
    grid-template-columns: repeat(2, 1fr);
  }

  /* CTA buttons side-by-side */
  .cta-buttons {
    flex-direction: row;
    justify-content: center;
  }
  .cta-buttons a { width: auto; }

  /* Show auth promo on tablet landscape */
  .auth-promo { display: none; }
}

/* ── SMALL DESKTOP  (769px – 1024px) ───────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .container { max-width: 960px; padding-left: 1.5rem; padding-right: 1.5rem; }

  .features-grid,
  .cards-grid,
  .why-choose {
    grid-template-columns: repeat(3, 1fr);
  }

  .routes-grid { grid-template-columns: repeat(3, 1fr); }

  .stats { grid-template-columns: repeat(4, 1fr); }

  .footer-grid,
  .footer-cols {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Search form: inline row */
  .search-form,
  .booking-form {
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .search-form input,
  .search-form select,
  .booking-form input,
  .booking-form select {
    flex: 1 1 160px;
  }
  .search-form button[type="submit"],
  .btn-search {
    width: auto;
    flex: 0 0 auto;
    padding: 0.75rem 2rem;
  }

  /* Bus result card: row layout */
  .bus-card {
    flex-direction: row;
    align-items: center;
  }
  .bus-card .actions {
    flex-direction: row;
    margin-left: auto;
  }
  .bus-card .btn-book { width: auto; }

  /* Show auth promo panel */
  .auth-layout,
  .login-layout {
    flex-direction: row;
  }
  .auth-promo,
  .login-promo {
    display: flex;
    flex: 0 0 40%;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 2rem;
  }
  .auth-form-wrapper { flex: 1; }
}

/* ── WIDE DESKTOP  (≥ 1025px) ──────────────────────────────── */
@media (min-width: 1025px) {
  .container { max-width: 1200px; }

  .features-grid,
  .cards-grid,
  .why-choose {
    grid-template-columns: repeat(3, 1fr);
  }

  .routes-grid { grid-template-columns: repeat(4, 1fr); }

  .footer-grid,
  .footer-cols {
    grid-template-columns: repeat(4, 1fr);
  }

  .auth-layout,
  .login-layout {
    flex-direction: row;
  }
  .auth-promo,
  .login-promo {
    display: flex;
    flex: 0 0 45%;
    flex-direction: column;
    justify-content: center;
    padding: 3rem 2.5rem;
  }
  .auth-form-wrapper { flex: 1; }
}

/* ── TOUCH IMPROVEMENTS (all mobile) ───────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Larger tap targets */
  a, button, [role="button"], input, select, textarea {
    min-height: 44px;
  }

  input, select, textarea {
    font-size: 16px !important; /* prevent iOS zoom on focus */
  }

  /* Remove hover-only effects that linger on tap */
  a:hover, button:hover {
    opacity: 1;
  }
}

/* ── SAFE AREA (iPhone notch / Dynamic Island) ──────────────── */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
  footer {
    padding-bottom: max(1rem, env(safe-area-inset-bottom));
  }
}

/* ============================================================
   HAMBURGER MENU JAVASCRIPT (inline helper)
   Add this script just before </body> if you don't have a
   navbar toggle already:

   <script>
   document.addEventListener('DOMContentLoaded', function () {
     var toggle = document.querySelector('.nav-toggle');
     if (!toggle) {
       toggle = document.createElement('button');
       toggle.className = 'nav-toggle';
       toggle.innerHTML = '<span></span><span></span><span></span>';
       toggle.setAttribute('aria-label', 'Toggle menu');
       var nav = document.querySelector('nav');
       if (nav) nav.appendChild(toggle);
     }
     toggle.addEventListener('click', function () {
       document.querySelectorAll('.nav-links, nav ul, .navbar-nav, .nav-auth')
         .forEach(function (el) { el.classList.toggle('open'); });
     });
   });
   </script>

   ============================================================ */