/* ============================================
   INSQUARE — Mobile Responsive CSS
   OYO/Airbnb style mobile design
   ============================================ */

/* ── Base mobile resets ── */
@media (max-width: 768px) {

    /* ── Navbar — hide hamburger, use bottom nav only ── */
    .mobile-menu-btn, #menuBtn { display: none !important; }
    .nav-menu, ul.nav-menu, #navMenu { display: none !important; }
    /* old navbar styles below (overridden) */
    .navbar, nav.navbar {
        padding: 10px 16px !important;
        position: relative !important;
    }
    .nav-menu, ul.nav-menu {
        display: none !important;
        position: absolute !important;
        top: 100% !important;
        left: 0 !important;
        right: 0 !important;
        bottom: auto !important;
        background: #fff !important;
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        z-index: 9999 !important;
        padding: 8px 0 12px !important;
        box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
        border-top: 1px solid #e2e8f0 !important;
    }
    .nav-menu.open {
        display: flex !important;
    }
    .nav-menu li {
        list-style: none !important;
    }
    .nav-menu li a, .nav-menu .nav-link {
        font-size: 0.95rem !important;
        color: #374151 !important;
        font-weight: 500 !important;
        display: block !important;
        padding: 13px 20px !important;
        border-bottom: 1px solid #f1f5f9 !important;
    }
    .nav-menu li a:hover, .nav-menu .nav-link:hover {
        background: #f8fafc !important;
        color: #2563eb !important;
    }
    .nav-menu .btn-login {
        margin: 10px 16px 0 !important;
        padding: 12px 20px !important;
        font-size: 0.9rem !important;
        border-radius: 8px !important;
        text-align: center !important;
        display: block !important;
    }
    .mobile-menu-btn {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 42px !important;
        height: 42px !important;
        border-radius: 10px !important;
        background: #f1f5f9 !important;
        border: none !important;
        font-size: 1.3rem !important;
        cursor: pointer !important;
        z-index: 10000 !important;
        position: relative !important;
    }
    .mobile-close-btn { display: none !important; }

    /* ── Hero sections ── */
    .hero, .about-hero, .contact-hero, .page-hero {
        padding: 60px 16px 40px !important;
    }
    .hero h1, .about-hero h1, .contact-hero h1, .page-hero h1 {
        font-size: 1.8rem !important;
        line-height: 1.3 !important;
    }
    .hero p, .about-hero p, .contact-hero p, .page-hero p {
        font-size: 0.95rem !important;
    }
    .hero-actions, .cta-buttons {
        flex-direction: column !important;
        gap: 12px !important;
        align-items: stretch !important;
    }
    .hero-actions a, .cta-buttons a, .btn-cta, .btn-primary, .btn-secondary {
        text-align: center !important;
        padding: 14px 20px !important;
        font-size: 0.95rem !important;
    }

    /* ── Search bar ── */
    .filter-section {
        top: 60px !important;
        padding: 12px 0 !important;
    }
    .filter-container {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 0 16px !important;
    }
    .search-box { min-width: unset !important; }
    .search-box input {
        padding: 12px 16px 12px 44px !important;
        font-size: 0.9rem !important;
    }
    .filter-btn, .sort-dropdown select {
        width: 100% !important;
        padding: 12px 16px !important;
    }

    /* ── Rooms / Properties grid ── */
    .rooms-grid, .properties-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 12px !important;
    }
    .room-card, .property-card {
        border-radius: 12px !important;
    }
    .room-card-image, .property-image {
        aspect-ratio: 4/3 !important;
    }
    .room-card-info, .property-info {
        padding: 10px !important;
    }
    .room-card-name, .property-name {
        font-size: 0.85rem !important;
    }
    .price-amount {
        font-size: 0.95rem !important;
    }

    /* ── Stats grid ── */
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 16px !important;
    }
    .stat-card {
        padding: 18px 12px !important;
    }
    .stat-number {
        font-size: 1.6rem !important;
    }

    /* ── Story / Mission sections ── */
    .story-grid, .mission-grid, .contact-grid {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
    }
    .story-content h2, .contact-info h2 {
        font-size: 1.5rem !important;
    }
    .story-image-badge {
        right: 10px !important;
        bottom: -10px !important;
        font-size: 0.8rem !important;
        padding: 10px 16px !important;
    }

    /* ── Values / Team grid ── */
    .values-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
    }
    .team-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px !important;
    }

    /* ── Timeline ── */
    .timeline {
        flex-direction: column !important;
        align-items: center !important;
        gap: 12px !important;
    }
    .timeline-item {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ── Contact cards ── */
    .contact-cards {
        grid-template-columns: 1fr 1fr !important;
        gap: 12px !important;
        padding: 0 16px !important;
    }
    .contact-card {
        padding: 16px 12px !important;
    }

    /* ── Contact form ── */
    .contact-form-wrapper {
        padding: 20px 16px !important;
        margin: 0 16px !important;
    }
    .form-row {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
    }
    .form-submit {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .btn-submit {
        width: 100% !important;
        justify-content: center !important;
    }

    /* ── Testimonials ── */
    .testimonials-grid {
        grid-template-columns: 1fr !important;
    }

    /* ── Footer grid ── */
    .insq-footer-wrap > div > div:first-child > div:first-child,
    footer > div > div:first-child {
        grid-template-columns: 1fr 1fr !important;
        gap: 24px !important;
    }

    /* ── Page content padding ── */
    .container {
        padding: 0 16px !important;
    }
    .page-content {
        padding: 16px !important;
    }

    /* ── Quick contact section ── */
    .quick-contact {
        margin-top: -30px !important;
    }

    /* ── Working hours ── */
    .working-hours {
        padding: 16px !important;
    }

    /* ── FAQ ── */
    .faq-question {
        padding: 16px !important;
        font-size: 0.9rem !important;
    }
}

/* ── Extra small screens (phones < 480px) ── */
@media (max-width: 480px) {
    .rooms-grid, .properties-grid {
        grid-template-columns: 1fr !important;
        padding: 0 12px !important;
    }
    .contact-cards {
        grid-template-columns: 1fr !important;
    }
    .values-grid, .team-grid {
        grid-template-columns: 1fr !important;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr !important;
    }
    .hero h1, .about-hero h1 {
        font-size: 1.5rem !important;
    }
    .footer-bottom {
        flex-direction: column !important;
        text-align: center !important;
        gap: 10px !important;
    }
}

/* ── Bottom nav bar (OYO/Airbnb style) ── */
.mobile-bottom-nav {
    display: none;
}
@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        background: #fff;
        border-top: 1px solid #e2e8f0;
        z-index: 999;
        padding: 8px 0 12px;
        box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
    }
    .mobile-bottom-nav a {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        text-decoration: none;
        color: #64748b;
        font-size: 0.65rem;
        font-weight: 500;
        transition: color 0.2s;
    }
    .mobile-bottom-nav a.active,
    .mobile-bottom-nav a:hover {
        color: #2563eb;
    }
    .mobile-bottom-nav a span.nav-icon {
        font-size: 1.3rem;
    }
    /* Push content above bottom nav */
    body { padding-bottom: 65px !important; }
}

/* ── FINAL OVERRIDE: hide hamburger + top nav on mobile, use bottom nav only ── */
@media (max-width: 768px) {
    .mobile-menu-btn,
    #menuBtn,
    button.mobile-menu-btn { display: none !important; }

    .nav-menu,
    ul.nav-menu,
    #navMenu { display: none !important; }
}