/* =====================================================================
   MOBILE FIXES — loaded last on every page from includes/header.php.
   Site-wide safety rules for phones and tablets, plus fixes for older
   hand-built pages whose two-column layouts never collapsed.
   ===================================================================== */

/* ---------- Safety: nothing wider than the screen ---------- */
img, video, iframe, embed, object, svg, canvas { max-width: 100%; }
img, video { height: auto; }
table { max-width: 100%; }
body .zk-footer { position: relative !important; overflow: hidden !important; }

@media (max-width: 900px) {
    /* Older city / country pages (pune, delhi, dubai, ...): text + form
       side by side — stack them */
    .form-grid,
    .phoenix-container,
    .about-company-container {
        grid-template-columns: 1fr !important;
    }
    .form-grid > *,
    .phoenix-container > * {
        min-width: 0;
        max-width: 100%;
    }

    /* Long words / emails / URLs wrap instead of pushing the page wide */
    h1, h2, h3, h4, p, li, a, span, td, th, label {
        overflow-wrap: break-word;
    }

    /* Wide tables scroll inside themselves */
    .bl-content table,
    .content-left table,
    main table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 767px) {
    /* Readable small text */
    .top-bar .info-box,
    .top-bar .info-box a { font-size: 12.5px !important; }
    .features-sec .features-sec-item p { font-size: 13px !important; line-height: 1.5; }

    /* Form fields: 16px stops iPhone from zooming in when tapped */
    input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Comfortable tap targets for buttons */
    .btn,
    .btn-primary,
    button[type="submit"],
    input[type="submit"],
    a.ep-btn,
    a.bl-btn {
        min-height: 44px;
    }

    /* Big decorative background icons: smaller and calmer on phones */
    body .zk-footer::after { font-size: 200px !important; }

    /* Hero slider text a little tighter */
    .hero-sec.hero-slider { min-height: 520px; }
    .hero-slide-text h1,
    .hero-slide-text h2 { font-size: clamp(1.6rem, 7vw, 2.2rem) !important; line-height: 1.2; }
    .hero-slide-text p { font-size: 14.5px !important; line-height: 1.6; }

    /* Page banners: big one-word titles (MUMBAI, PUNE, USA) fit nicely */
    .zk-about-content h2,
    [class$="-banner"] h1,
    [class*="-banner "] h1 { font-size: clamp(1.8rem, 9vw, 2.6rem) !important; }

    /* Section headings scale down */
    section h2 { font-size: clamp(1.45rem, 6.2vw, 2rem); line-height: 1.25; }
}

@media (max-width: 480px) {
    /* Footer columns: a bit tighter */
    body .zk-footer { padding: 2.6rem 1.1rem 1.6rem !important; }
    body .zk-footer-col h4 { font-size: 1.1rem; }
}

/* ---------- Compact phone header ----------
   The top bar had its own ☰ (duplicate of the main menu, which already
   lists every page) and wrapped onto two rows, so the sticky header took
   ~150px of the screen. On phones: one slim row with tap-to-call, and
   the top bar slides away once the page is scrolled. */
@media (max-width: 767px) {
    .top-bar .top-bar-left { display: none !important; }
    .top-bar {
        min-height: 0 !important;
        padding: 6px 14px !important;
        justify-content: center !important;
        max-height: 40px;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }
    .top-bar .top-bar-right {
        width: 100%;
        justify-content: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .top-bar .info-box { margin: 0 !important; white-space: nowrap; }
    #mainHeader.scrolled .top-bar {
        max-height: 0;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        overflow: hidden;
    }
    .nav-box { height: 62px !important; }
    #mainHeader.scrolled .nav-box { height: 54px !important; }
    .nav-logo img { height: 42px !important; }
    #mainHeader.scrolled .nav-logo img { height: 36px !important; }
    #mainHeader .max-width { padding-left: 14px !important; padding-right: 14px !important; }
    .hamburger-menu { width: 44px !important; height: 44px !important; }
}

/* ---------- Homepage bits on phones ---------- */
@media (max-width: 767px) {
    /* "All / Corporates" service filter: two compact pills side by side */
    .services-tabs {
        flex-wrap: nowrap !important;
        gap: 10px !important;
        justify-content: center !important;
    }
    .services-tabs .tab-btn {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 46px;
        padding: 10px 12px !important;
        font-size: 14px !important;
        border-radius: 50px !important;
    }
}

/* ---------- Homepage hero slider on phones / tablets ----------
   The section is a flex row, so on small screens the slide text and the
   arrows/dots sat side by side (text squeezed to ~140px). Stack them:
   text full width, controls centred underneath. */
@media (max-width: 768px) {
    .hero-sec.hero-slider {
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: center !important;
        min-height: 560px !important;
        padding: 36px 0 26px !important;
    }
    .hero-slider .hero-flex {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px 20px 0 !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 22px !important;
    }
    .hero-slider .hero-slide-text { width: 100% !important; }
    .hero-slider .hero-slide-text p { max-width: 100% !important; }
    /* compact glass control bar under the text: arrows, counter, short bars */
    .hero-sec.hero-slider .hero-slider-controls {
        position: relative !important;
        left: auto !important;
        bottom: auto !important;
        width: fit-content !important;
        margin: 20px 20px 0 !important;
        padding: 5px !important;
        justify-content: flex-start !important;
    }
    .hero-sec.hero-slider .hero-arrow { width: 36px !important; height: 36px !important; flex-basis: 36px !important; }
    .hero-count { padding: 0 10px; }
    .hero-count b { font-size: 16px; }
    .hero-dot em { display: none; }
    .hero-sec.hero-slider .hero-dot,
    .hero-sec.hero-slider .hero-dot.is-active {
        height: 36px !important;
        padding: 0 !important;
        width: 26px !important;
        background: transparent !important;
    }
    .hero-sec.hero-slider .hero-dot.is-active { width: 46px !important; }
    .hero-dot-track { left: 4px; right: 4px; bottom: auto; top: 50%; margin-top: -2px; height: 4px; }
    .hero-slider .hero-btns,
    .hero-slider [class*="hero-btn"] { flex-wrap: wrap; gap: 12px; }
}

/* ---------- Older city pages: "info-list" bullets ----------
   Each <li> is flex (icon, bold title, text), which split into three
   skinny columns on phones. Let the title + text flow as one sentence. */
@media (max-width: 767px) {
    .info-list li {
        display: block !important;
        position: relative;
        padding-left: 44px;
        line-height: 1.55;
        min-height: 32px;
    }
    .info-list li i {
        position: absolute;
        left: 0;
        top: 0;
    }
}

/* ---------- Floating buttons stay out of the way of the open menu ---------- */
body:has(.mobile-nav.active) .aic,
body:has(.mobile-nav.active) .whatsapp-float,
body:has(.mobile-nav.active) .back-to-top,
body:has(.mobile-nav.active) #backToTop,
body:has(.mobile-nav.active) .st-top {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
}

/* Top-bar "Request a Pickup" button: hidden on phones (header stays slim;
   the main menu and chat already offer the same) */
@media (max-width: 767px) {
    .top-bar .tb-cta { display: none !important; }
}
@media (max-width: 767px) {
    /* phone top bar: just the tap-to-call numbers */
    .top-bar .info-box:not(:first-child) { display: none !important; }
    .top-bar .info-box i { width: 22px; height: 22px; font-size: 10px; }
}