/* ═══════════════════════════════════════════════════════════
   Mobile UX Overrides — VIP Transfers
   Priority: loaded AFTER style.css to override defaults.
   Breakpoints: 767px (mobile), 575px (small), 479px (xs)
   ═══════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────
   1. FLEET CAROUSEL — full-width single card on mobile
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .home-our-fleet-main-slider {
    margin: 0 !important;
  }
  .single-home-our-fleetSld {
    padding: 0 16px !important;
  }
  .home-our-fleetSld-wrap h3 {
    font-size: 22px;
    margin-bottom: 8px;
    padding: 0 8px;
  }
  .home-our-fleetSld-wrap figure {
    min-height: 180px;
  }
  .home-our-fleet-sec .section-tittle {
    margin-bottom: 32px;
  }
  .home-our-fleet-sec::before {
    height: 180px;
  }
  /* Slick arrows — larger touch targets */
  .home-our-fleet-main-slider .slick-prev,
  .home-our-fleet-main-slider .slick-next {
    width: 44px;
    height: 44px;
    z-index: 10;
  }
  .home-our-fleet-main-slider .slick-prev {
    left: 4px;
  }
  .home-our-fleet-main-slider .slick-next {
    right: 4px;
  }
  /* Hide non-active slide opacity effect — not needed on single view */
  .single-home-our-fleetSld.slick-slide img {
    opacity: 1 !important;
    filter: none !important;
  }
}

/* ──────────────────────────────────────────────────────────
   2. HOMEPAGE FORM — card container, better touch targets
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .home-banner-form-sec {
    background: rgba(13, 15, 20, 0.85) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 16px;
    border: 1px solid rgba(205, 178, 123, 0.15);
    padding: 24px 20px 28px !important;
    margin: 0 4px;
  }
  .home-banner-form-tittle span {
    font-size: 17px !important;
    margin-bottom: 14px;
    display: block;
  }
  /* Tab switcher — bigger touch targets */
  .resp-tabs-list.hor_1 li {
    padding: 10px 20px !important;
    font-size: 14px !important;
    min-height: 40px;
  }
  /* Form fields — full width stacked, better spacing */
  .home-banner-form-wrap-man form {
    display: flex;
    flex-direction: column;
  }
  .single-frm-wrap-inpt {
    width: 100% !important;
    margin-bottom: 6px;
    padding: 0 0 6px !important;
  }
  .single-frm-wrap-inpt label {
    font-size: 12px;
    margin-bottom: 4px;
  }
  .single-frm-wrap-inpt input[type="text"],
  .single-frm-wrap-inpt select {
    height: 44px !important;
    font-size: 15px;
    padding-bottom: 8px !important;
  }
  /* Submit button — full width, bigger */
  .single-frm-wrap-inpt input[type="submit"] {
    height: 52px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    margin-top: 8px;
  }
}

/* ──────────────────────────────────────────────────────────
   3. BOOKING STEPPER — compact horizontal bar on mobile
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .booking-page #booking-form .vip-booking--steps .booking-stepper {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    margin-bottom: 20px !important;
    position: relative;
  }
  /* Show progress line on mobile too */
  .booking-page #booking-form .vip-booking--steps .booking-stepper::before {
    display: block !important;
    left: 12.5%;
    right: 12.5%;
    top: 16px;
  }
  .booking-page #booking-form .vip-booking--steps .booking-stepper-progress {
    display: block !important;
    left: 12.5%;
    right: 12.5%;
    top: 16px;
  }
  .booking-page #booking-form .vip-booking--steps .booking-stepper-item {
    align-items: center !important;
    padding: 0 4px;
  }
  .booking-page #booking-form .vip-booking--steps .booking-stepper-index {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }
  .booking-page #booking-form .vip-booking--steps .booking-stepper-label {
    font-size: 10px !important;
    text-align: center !important;
    line-height: 1.2;
    margin-top: 4px;
  }
}

/* ──────────────────────────────────────────────────────────
   4. BOOKING HEADING — smaller, no screaming caps
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .booking-page #booking-form .vip-booking--steps .vip-booking-separator {
    font-size: 22px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    margin-bottom: 20px !important;
  }
  .booking-page .book-hdr h2 {
    font-size: 24px;
    letter-spacing: 0.02em;
  }
  .booking-page .book-hdr p {
    font-size: 14px;
  }
}

/* ──────────────────────────────────────────────────────────
   5. TOAST SOCIAL PROOF — less intrusive on mobile
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .vip-toast-container {
    bottom: auto !important;
    top: 60px;
    left: 12px !important;
    right: 12px !important;
  }
  .vip-toast {
    font-size: 12px;
    padding: 10px 14px 10px 38px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  }
  .vip-toast::before {
    width: 18px;
    height: 18px;
    font-size: 10px;
    left: 12px;
    top: 11px;
  }
}

/* ──────────────────────────────────────────────────────────
   6. SECTION SPACING — tighter on mobile
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .common-gap {
    padding: 48px 0 !important;
  }
  .home-our-fleet-sec.common-gap {
    padding: 40px 0 !important;
  }
  .home-secnd-sec.common-gap {
    padding: 40px 0 !important;
  }
  .service-sec.common-gap {
    padding: 40px 0 !important;
  }
}
@media (max-width: 479px) {
  .common-gap {
    padding: 36px 0 !important;
  }
}

/* ──────────────────────────────────────────────────────────
   7. MAP — better readability on mobile
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .service-sec .map-fig {
    margin: 0 -12px;
  }
  .mapContainer svg text {
    font-size: 9px !important;
  }
  .service-lft h2 {
    font-size: 28px;
    margin-bottom: 20px;
  }
}

/* ──────────────────────────────────────────────────────────
   8. STICKY MOBILE CTA BAR
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .mobile-cta-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: rgba(13, 15, 20, 0.95);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(205, 178, 123, 0.2);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    transform: translateY(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .mobile-cta-bar.is-visible {
    transform: translateY(0);
  }
  .mobile-cta-bar-text {
    flex: 1;
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
  }
  .mobile-cta-bar-text small {
    display: block;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 400;
  }
  .mobile-cta-bar-btn {
    flex-shrink: 0;
    background: #CDB27B;
    color: #0f0f0f;
    font-size: 14px;
    font-weight: 600;
    padding: 12px 22px;
    border-radius: 10px;
    text-decoration: none !important;
    white-space: nowrap;
    transition: background 0.2s;
  }
  .mobile-cta-bar-btn:hover,
  .mobile-cta-bar-btn:active {
    background: #e0c68e;
    color: #0f0f0f;
  }
  /* Add bottom padding to body so content isn't hidden behind CTA bar */
  body.has-mobile-cta {
    padding-bottom: 72px;
  }
  /* Hide CTA bar on booking page (user is already there) */
  .booking-page .mobile-cta-bar {
    display: none !important;
  }
}
@media (min-width: 768px) {
  .mobile-cta-bar {
    display: none !important;
  }
}

/* ──────────────────────────────────────────────────────────
   9. PROMO BAR — better readability on mobile
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .vip-promo-bar {
    font-size: 13px !important;
  }
  .vip-promo-bar-inner {
    padding: 10px 36px 10px 14px !important;
    gap: 6px !important;
    flex-direction: column;
  }
  .vip-promo-bar-text {
    line-height: 1.4;
  }
  .vip-promo-bar-cta {
    font-size: 13px;
  }
}

/* ──────────────────────────────────────────────────────────
   10. HERO SECTION — tighter on mobile
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .home-banner-tittletxt {
    font-size: 28px !important;
    line-height: 1.15 !important;
    margin-bottom: 12px !important;
  }
  .hero-lead {
    font-size: 14px;
    margin-bottom: 24px;
  }
  .home-banner-img-wrap figure img {
    max-height: 200px;
    object-fit: contain;
  }
}
@media (max-width: 479px) {
  .home-banner-tittletxt {
    font-size: 24px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   11. BOOKING FORM FIELDS — placeholders and icons
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .booking-page .chbs-form-field label {
    font-size: 11px;
  }
  .booking-page .chbs-form-field input[type="text"],
  .booking-page .chbs-form-field input[type="email"],
  .booking-page .chbs-form-field input[type="tel"],
  .booking-page .chbs-form-field select {
    height: 50px;
    font-size: 15px;
  }
  /* Booking trust badges — horizontal scroll */
  .booking-trust-badges {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    gap: 12px;
    padding-bottom: 4px;
  }
  .booking-trust-badge {
    flex-shrink: 0;
    font-size: 12px;
  }
}

/* ──────────────────────────────────────────────────────────
   12. CONTACT PAGE — reCAPTCHA badge hidden
   ────────────────────────────────────────────────────────── */
.grecaptcha-badge {
  visibility: hidden !important;
}

/* ──────────────────────────────────────────────────────────
   13. HOMEPAGE SECONDARY SECTION — better wrap
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .home-secnd-sec h2 {
    font-size: 24px;
    line-height: 1.2;
    margin-bottom: 16px;
  }
  .home-secnd-sec p {
    font-size: 15px;
  }
}

/* ──────────────────────────────────────────────────────────
   14. TESTIMONIALS — single column on mobile
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .testimonials-wrap {
    gap: 16px;
  }
  .testimonial-item {
    margin-bottom: 0 !important;
  }
  .testimonial-inner {
    padding: 20px !important;
  }
  .google-reviews-badge {
    margin-top: 24px !important;
    padding-top: 20px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   15. FOOTER — cleaner on mobile
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .footer-uppr h2 {
    font-size: 24px;
  }
  .footer-uppr p {
    font-size: 14px;
    margin-bottom: 16px;
  }
  .footer-mid-grid {
    gap: 0 !important;
  }
  .footer-lwr {
    padding: 20px 0;
  }
  .footer-logo-wrap p {
    font-size: 12px;
  }
}

/* ──────────────────────────────────────────────────────────
   16. INNER PAGES — banner/hero tighter
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .innr-banner {
    min-height: 220px !important;
    padding: 100px 0 32px !important;
  }
  .innr-banner h1 {
    font-size: 28px !important;
    line-height: 1.15;
  }
}

/* ──────────────────────────────────────────────────────────
   17. FLEET PAGE — cards tighter
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .car-detail-card {
    margin-bottom: 32px;
  }
}

/* ──────────────────────────────────────────────────────────
   18. WHATSAPP FLOAT — above sticky CTA bar
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  body.has-mobile-cta .whatsapp-float {
    bottom: 80px !important;
  }
}

/* ──────────────────────────────────────────────────────────
   19. BOOKING VEHICLE CARDS — better touch on mobile
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .booking-vehicle-card {
    padding: 16px !important;
  }
  .booking-vehicle-select-btn {
    min-height: 44px;
    font-size: 14px;
  }
}

/* ──────────────────────────────────────────────────────────
   20. APP PROMO SECTION — tighter spacing
   ────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .app-section {
    padding: 40px 0 !important;
  }
  .app-section-title {
    font-size: 24px !important;
  }
  .app-phone-mockup {
    width: 200px !important;
  }
}