/* ============================================================
   AR TRAVELS - Responsive Fixes
   - Mobile: 2 cards per row (destinations + packages)
   - Hero video chota on mobile (admin controlled height)
   - NO horizontal scroll (left-right scroll bug FIXED)
   ============================================================ */

/* ===== Tablet (<= 1024px) ===== */
@media (max-width: 1024px) {
    .hero-content h1 { font-size: 3rem; }
    .section-header h2 { font-size: 2.1rem; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .why-points { grid-template-columns: 1fr; }
    .plane-container { width: 160px; }
    .plane-container-2 { width: 140px; }
    .train-container { width: 420px; }
}

/* ===== Mobile (<= 768px) ===== */
@media (max-width: 768px) {
    body { padding-bottom: 62px; }

    .section-padding { padding: 3rem 0; }
    .section-header { margin-bottom: 2rem; }
    .section-header h2 { font-size: 1.75rem; }
    .section-header p { font-size: 0.92rem; }

    /* --- Navigation --- */
    .nav-links, .nav-actions .btn-primary { display: none; }
    .hamburger { display: flex; }
    .nav-container { height: 64px; }
    .logo-img { height: 46px; }
    .navbar.scrolled .logo-img { height: 40px; }

    /* --- HERO: mobile me chota (admin height control se) --- */
    .hero {
        height: var(--hero-mobile-h, 48vh);
        min-height: 320px;
        max-height: 480px;
    }
    .hero-content h1 { font-size: 2rem; line-height: 1.2; }
    .hero-content p { font-size: 0.95rem; margin-bottom: 1.4rem; }
    .hero-buttons { flex-direction: row; gap: 0.7rem; padding: 0 0.5rem; }
    .hero-buttons .btn { padding: 0.65rem 1.1rem; font-size: 0.85rem; }

    /* --- DESTINATIONS + PACKAGES: 2 CARD PER ROW (FIXED) --- */
    .destinations-grid,
    .packages-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }
    .dest-media, .pkg-media { height: 130px; }
    .dest-overlay h3 { font-size: 1rem; padding-bottom: 0.4rem; }
    .dest-overlay { padding: 1rem 0.6rem 0.4rem; }
    .dest-info { padding: 0.7rem 0.75rem 0.85rem; gap: 0.4rem; }
    .dest-info p { font-size: 0.72rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .dest-price { font-size: 0.85rem; }
    .dest-bottom .btn { padding: 0.4rem 0.7rem; font-size: 0.72rem; }
    .slider-arrow { width: 26px; height: 26px; font-size: 0.65rem; opacity: 0.85; }

    .pkg-badge { font-size: 0.6rem; padding: 0.22rem 0.55rem; top: 8px; left: 8px; }
    .pkg-content { padding: 0.75rem 0.8rem 0.9rem; gap: 0.35rem; }
    .pkg-content h3 { font-size: 0.95rem; line-height: 1.3; }
    .pkg-meta { font-size: 0.7rem; }
    .pkg-desc { display: none; }
    .old-price { font-size: 0.72rem; }
    .new-price { font-size: 1.05rem; }
    .per-person { font-size: 0.62rem; }
    .pkg-price-row { margin-bottom: 0.2rem; }
    .pkg-actions { flex-direction: column; gap: 0.4rem; margin-top: 0.3rem; }
    .pkg-actions .btn { width: 100%; padding: 0.5rem 0.6rem; font-size: 0.78rem; }
    .slider-dots .dot { width: 5px; height: 5px; }
    .slider-dots .dot.active { width: 13px; }

    /* --- Services: 2 per row compact --- */
    .services-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
    .service-img { height: 110px; }
    .service-icon { width: 44px; height: 44px; margin-top: -22px; font-size: 1rem; border-width: 2px; }
    .service-content { padding: 0.8rem 0.7rem 1rem; }
    .service-content h3 { font-size: 0.95rem; }
    .service-content p { font-size: 0.72rem; }
    .service-content .btn { font-size: 0.75rem; padding: 0.5rem 0.7rem; }

    /* --- Airplane/Train transitions --- */
    .airplane-transition { height: 230px; }
    .transition-content h2 { font-size: 1.5rem; }
    .transition-content p { font-size: 0.85rem; }
    .plane-container { width: 110px; left: -160px; top: 58%; }
    .plane-container-2 { width: 100px; right: -160px; top: 46%; }
    .airplane-transition-2 { height: 170px; }
    .airplane-transition-2 h2 { font-size: 1.4rem; }
    .train-transition { height: 190px; }
    .train-transition h2 { font-size: 1.4rem; }
    .train-container { width: 300px; left: -340px; bottom: 26px; }
    .train-track { bottom: 22px; height: 6px; }

    /* --- Gallery --- */
    .gallery-img-wrap { height: 190px; }
    .gallery-caption-bar { font-size: 0.9rem; }
    .gallery-nav-next, .gallery-nav-prev { width: 38px !important; height: 38px !important; }

    /* --- Stats / Why us --- */
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 0.8rem; }
    .stat-item { padding: 1.1rem 0.6rem; }
    .stat-item h3 { font-size: 1.7rem; }
    .stat-item p { font-size: 0.78rem; }

    /* --- Footer --- */
    .footer { padding-top: 3rem; }
    .footer-grid { grid-template-columns: 1fr; gap: 2rem; padding-bottom: 2rem; }

    /* --- Forms / Modals --- */
    .form-row { flex-direction: column; gap: 0; }
    .form-row.three { flex-direction: row; gap: 0.6rem; }
    .modal { padding: 10px 8px 30px; }
    .modal-content { border-radius: var(--radius-md); }
    .modal-body { padding: 1.1rem; }
    .modal-header { padding: 0.95rem 1.1rem; }
    .modal-header h3 { font-size: 1.08rem; }
    .checkbox-group label { margin-top: 0; }
    .pkg-detail-body { padding: 1.2rem 1rem; }
    .pkg-detail-header h2 { font-size: 1.5rem; }
    .pkg-detail-swiper .swiper-slide img { height: 230px; }
    .summary-actions { flex-direction: column; }

    /* --- Mobile bottom bar + FAB --- */
    .mobile-bottom-bar {
        position: fixed; bottom: 0; left: 0; width: 100%; height: 62px;
        background: var(--color-white); display: flex; z-index: 1500;
        box-shadow: 0 -3px 14px rgba(0,0,0,0.12);
        padding-bottom: env(safe-area-inset-bottom);
    }
    .bottom-action {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
        font-size: 0.72rem; color: var(--color-primary); border-right: 1px solid var(--color-border);
        gap: 2px; background: none; border-top: none; border-bottom: none; border-left: none;
    }
    .bottom-action:last-of-type { border-right: none; }
    .bottom-action i { font-size: 1.15rem; }
    .bottom-action .fa-whatsapp { color: var(--color-whatsapp); }
    .bottom-action.primary { background: linear-gradient(135deg, var(--color-accent), #e6c96a); color: var(--color-primary); font-weight: 600; }
    .fab-whatsapp { bottom: 78px; right: 14px; width: 50px; height: 50px; font-size: 1.5rem; }
}

/* ===== Small phones (<= 400px) ===== */
@media (max-width: 400px) {
    .hero-content h1 { font-size: 1.7rem; }
    .hero-buttons { flex-wrap: wrap; }
    .dest-info p { font-size: 0.68rem; }
    .pkg-content h3 { font-size: 0.88rem; }
    .new-price { font-size: 0.98rem; }
    .train-container { width: 250px; }
}

/* ===== LOADER (light) responsive ===== */
@media (max-width: 768px) {
    .loader-logo { height: 150px; }
    .loader-plane-1 { width: 96px; top: 6px; }
    .loader-plane-2 { width: 84px; }
    .loader-train { width: 240px; bottom: 24px; }
    .loader-sky { height: 74px; }
    .loader-ground { height: 84px; }
}

/* ===== TEXT LOGO (header) mobile ===== */
@media (max-width: 768px) {
    .logo-text { font-size: 1.3rem; gap: 5px; }
}

/* ===== BOOKING UI (bk-*) mobile ===== */
@media (max-width: 768px) {
    .bk-field input, .bk-field select { font-size: 0.95rem; }
    .bk-route .bk-field { padding: 10px 12px; }
    .bk-route-v .bk-field { padding: 10px 12px; }
    .bk-swap { width: 34px; height: 34px; font-size: 0.75rem; }
    .bk-inline2 { flex-direction: column; gap: 8px; }
    .bk-dates2 .bk-datecell { padding: 10px 10px; gap: 7px; }
    .bk-guests { gap: 5px; padding: 10px 10px; }
    .bk-guests input { width: 46px; font-size: 0.92rem; }
    .bk-guests .gword { font-size: 0.8rem; }
    .bk-submit { padding: 14px; font-size: 0.98rem; }
    .bk-tab { padding: 9px 6px; font-size: 0.88rem; }
    .form-row { flex-direction: column; gap: 0; }
}

/* ===== OFFER POPUP mobile ===== */
@media (max-width: 768px) {
    .offer-popup-card { padding: 1.8rem 1.2rem 1.3rem; }
    .offer-popup-card h3 { font-size: 1.25rem; }
}