/* Mobile Navigation Drawer System - MOBILE ONLY */

/* Hide mobile menu system on desktop */
@media (min-width: 769px) {

    .mobile-nav-overlay,
    .mobile-nav {
        display: none !important;
    }
}

/* Mobile menu - only for screens 768px and below */
@media (max-width: 768px) {

    /* Fix for horizontal scrollbar "line at the bottom" */
    html, body {
        overflow-x: hidden !important;
        width: 100%;
        position: relative;
    }

    /* GLOBAL SCROLL LOCK - Stronger Reset */
    html.menu-open,
    body.menu-open {
        overflow: hidden !important;
        height: 100vh !important;
        height: 100dvh !important;
        touch-action: none; /* Prevent scroll on underlying layer */
        position: fixed; /* Force fix to prevent any scroll behavior */
    }

    /* Overlay behind drawer */
    .mobile-nav-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh; /* Fallback */
        height: 100dvh; /* Dynamic Viewport Height */
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(4px); /* Premium blur effect */
        z-index: 9998;
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-nav-overlay.active {
        display: block;
        opacity: 1;
        pointer-events: auto;
    }

    /* Right-slide drawer */
    .mobile-nav {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        width: 85%;
        max-width: 300px; /* Slightly tighter max-width */
        height: 100vh;
        height: 100dvh;
        background: white;
        z-index: 9999;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); /* Smoother bezier */
        flex-direction: column;
        border-radius: 20px 0 0 20px; /* Softer radius */
        box-shadow: -8px 0 32px rgba(0, 0, 0, 0.1); /* Softer, deeper shadow */
        overflow-y: auto;
        pointer-events: none;
    }

    .mobile-nav.active {
        display: flex;
        transform: translateX(0);
        pointer-events: auto;
    }

    /* Header section */
    .mobile-nav-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 1.5rem 1.25rem; /* More spacing */
        flex-shrink: 0;
        background: white;
    }

    .mobile-nav-logo {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .mobile-nav-logo img {
        height: 36px; /* Slightly larger */
        width: auto;
    }

    .mobile-nav-logo-text {
        font-size: 1rem;
        font-weight: 800;
        color: var(--primary-blue);
        line-height: 1.1;
        letter-spacing: -0.02em;
    }

    .mobile-nav-close {
        width: 36px;
        height: 36px;
        border-radius: 12px; /* Squircle */
        background: #f1f5f9;
        border: none;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s ease;
        color: #64748b;
    }

    .mobile-nav-close:active {
        background: #e2e8f0;
        transform: scale(0.92);
        color: #334155;
    }

    .mobile-nav-close i {
        font-size: 1.1rem;
    }

    /* Links section */
    .mobile-nav-links {
        flex: 1;
        padding: 0.5rem 0.75rem; /* Padding for the container */
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 4px; /* Space between links */
    }

    .mobile-nav-links a {
        display: flex;
        align-items: center;
        padding: 0.875rem 1rem;
        font-size: 1.05rem; /* Larger, readable text */
        font-weight: 500;
        color: #334155;
        text-decoration: none;
        border-bottom: none; /* Removed line dividers */
        border-radius: 12px; /* Rounded items */
        transition: all 0.2s ease;
        min-height: auto;
    }

    .mobile-nav-links a:active,
    .mobile-nav-links a:hover {
        background: #f8fafc;
        color: var(--primary-blue);
        transform: translateX(4px); /* Subtle shift */
    }

    /* Highlight active/primary item (Book Online) */
    .mobile-nav-links a.primary {
        background: linear-gradient(135deg, var(--primary-blue) 0%, #0051a8 100%);
        color: white;
        margin: 1rem 0.5rem; /* Distinct margin */
        padding: 1rem;
        border-radius: 14px;
        font-weight: 700;
        justify-content: center;
        box-shadow: 0 4px 12px rgba(0, 55, 109, 0.2);
    }

    .mobile-nav-links a.primary:active {
        background: linear-gradient(135deg, #0051a8 0%, var(--primary-blue) 100%);
        transform: scale(0.98);
        color: white;
    }

    /* Footer section */
    .mobile-nav-footer {
        padding: 1.5rem 1.25rem;
        background: #f8fafc; /* Subtle grey bg */
        border-radius: 24px 0 0 0; /* Curve inner top left */
        flex-shrink: 0;
    }

    .mobile-nav-cta {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .mobile-nav-cta .btn {
        width: 100%;
        padding: 1rem;
        border-radius: 14px;
        font-size: 1rem;
        font-weight: 600;
        text-decoration: none;
        text-align: center;
        transition: all 0.2s ease;
        display: block;
    }

    /* Call Now Button Premium Style */
    .mobile-nav-cta .btn-outline {
        background: white;
        color: var(--primary-blue);
        border: 2px solid rgba(0, 55, 109, 0.1);
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    
    .mobile-nav-cta .btn-outline i {
        font-size: 1rem;
    }

    .mobile-nav-cta .btn-outline:active {
        background: #f0f9ff;
        border-color: var(--primary-blue);
        transform: scale(0.98);
    }
}