/* ==========================================================================
   RESPONSIVE OVERRIDES ONLY — base/default styles live in style.css.
   Every rule in this file must sit inside an @media block.
   ========================================================================== */

@media (max-width: 991.98px) {
    .hero-section {
        min-height: auto;
        padding: 85px 0;
    }
    .glass-panel {
        padding: 20px !important;
    }
    .navbar-custom {
        background: var(--white) !important;
    }
    .promo-girl-bg {
        width: 240px;
        height: 240px;
    }
    .promo-img-responsive {
        width: 190px;
        height: 190px;
    }
}

@media (max-width: 767.98px) {
    body {
        padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important;
    }
    #mobile-call-card {
        margin-top: 82px !important;
    }
    /* Home par mobile call card chhupa hai, to form navbar ke theek niche aata hai —
       negative margin (-40px) use navbar ke upar chadha deta tha */
    .search-widget-float.search-widget-top {
        margin-top: 20px;
    }
    /* hero-section-v2 (dark bg) is hidden on phones, so the trip-type
       dropdown sits directly on the light glass-panel — swap its
       near-white text/caret for a dark color so it stays readable. */
    .trip-type-quick-btn {
        color: var(--text-color, #0F172A);
    }
    /* footer.blade.php adds a fixed full-width "Call" bar at bottom:0
       on phones (~70-80px tall, z-index 99999) — the WhatsApp/back-to-top
       floats were still parked at bottom:15-30px, so that bar covered
       and swallowed clicks on them. Push both above it. */
    .whatsapp-float,
    .back-to-top {
        bottom: 90px !important;
    }
    /* logo2.png is hardcoded to height:80px inline in nav.blade.php and
       footer.blade.php — fine on desktop, way too tall on a phone navbar. */
    .navbar-brand img {
        height: 56px !important;
    }
}

@media (max-width: 575.98px) {
    .search-tab-btn {
        font-size: 14px;
        padding: 8px 12px;
    }
    .whatsapp-float {
        bottom: 15px;
        right: 15px;
        width: 50px;
        height: 50px;
        font-size: 24px;
    }
    .promo-girl-bg {
        width: 180px;
        height: 180px;
    }
    .promo-img-responsive {
        width: 140px;
        height: 140px;
    }
    .w-100-mobile {
        width: 100% !important;
    }
}