/* =======================================================
   📱  GLOBAL RESPONSIVE PATCH  –  place AFTER style.css
   ======================================================= */

/* ---------- 1.  Large tablets / small laptops (<1200 px) ---------- */
html, body {
  max-width: 100%;
  overflow-x: hidden !important;
}

* {
  box-sizing: border-box;
}
img,
svg {
  max-width: 100%;
  height: auto;
}

@media (max-width: 1199px) {

  /* HERO */
  .hero-content           { left: 3rem; top: 18rem; max-width: 420px; }
  .white-bg-shape         { top: -320px; left: -40px; width: 620px; height: 620px; }
  .yellow-bg-shape        { top: -300px; left: -90px; width: 580px; height: 580px; }

  /* BOOKING card floats right but no hard left offset */
  .booking-section        { left: auto; margin-left: auto; margin-right: 2rem; }
}

/* ---------- 2.  Tablets (<992 px) --------------------------------- */
@media (max-width: 991px) {

  /* NAV BAR */
  .nav-buttons-wrapper    { margin-left: auto; margin-right: 1rem; gap: .75rem; }
  .nav-logo img           { width: 2.5rem; height: 2.5rem; }

  /* HERO */
  .hero-content           { left: 2rem; top: 15rem; max-width: 360px; }
  .hero-content h1        { font-size: 2.4rem; }
  .white-bg-shape,
  .yellow-bg-shape        { transform: scale(0.8) rotate(var(--rotate)); }   /* smaller cards */

  /* BOOKING – drop below hero, full‑width */
  .booking-section        { position: static; width: 90%; margin: 4rem auto 0; }

  /* DOWNLOAD BUTTONS – wrap & center */
  .store-buttons-wrapper  { justify-content: center; margin: 1.5rem auto 0; }

  /* FIXED LOGO slightly smaller */
  .logo-fixed img         { width: 3.2rem; height: 3.2rem; }
  .logo-chutki,
  .logo-cabs              { font-size: 2rem; }
}

/* ---------- 3.  Large phones (<768 px) ---------------------------- */
@media (max-width: 767px) {

  /* NAV LINKS – slide‑down full‑width panel */
  .nav-links              {
    top: 60px; right: 0; left: 0;
    width: 100%; border-radius: 0;
    padding: 1rem 1.5rem;
  }

  /* HERO */
  .hero-shapes            { display: absolute; }                /* hide tilted cards – saves space */
  .hero-content           { position: static; margin: 5rem 1.25rem 0; text-align: center; }
  .cta-buttons            { justify-content: center; flex-wrap: wrap; }

  .hero-section {
  overflow-x: hidden;
  position: relative;
}

  /* BOOKING form */
  .booking-content        { padding: 2rem 1.5rem; }
  .booking-content h2     { font-size: 1.9rem; text-align: center; }
  .booking-content p      { text-align: center; }

  /* CONNECT–DRIVER section stacks naturally already,
     just give breathing room */
  .driver-glass-section   { padding: 4rem 1rem; gap: 3rem; }
}

/* ---------- 4.  Small phones (<576 px) ---------------------------- */
@media (max-width: 575px) {

  /* NAV bar padding */
  .navbar                 { padding: 10px 14px; }

  /* BUTTONS */
  .store-buttons-wrapper,
  .nav-buttons-wrapper    { gap: .65rem; }

  /* FORM inputs */
  .booking-form input,
  .booking-form select    { font-size: .9rem; }
  .booking-form button    { font-size: .9rem; }

  /* DRIVER join form tweak */
  .driver-glass-form.elegant { gap: 1.2rem; }
  .driver-content-box h2  { font-size: 1.7rem; }
}

/* Footer responsiveness enhancement */
@media (max-width: 767px) {
  .footer-grid {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }

  .wrapper {
    justify-content: center;
    margin-top: 1rem;
  }

  .footer-block h3 {
    margin-top: 1rem;
  }

  .scroll-top {
    position: static;
    margin: 1.5rem auto 0;
  }
}