/* ===================================================================
   370 Queens Quay Private Residences - Mobile-Only Styles
   Optimized for mobile devices (768px and below)
   =================================================================== */

/* Mobile-specific CSS Variables */
:root {
    --mobile-header-height: 70px;
    --mobile-padding: 20px;
    --mobile-section-padding: 60px 0;
    --mobile-content-gap: 30px;
    --mobile-font-scale: 0.875;
    
    /* Safe area variables for iOS/Android */
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    
    /* Dynamic viewport height for mobile browsers */
    --mobile-vh: 1vh; /* Will be updated via JavaScript if needed */
}

/* ===================
   MOBILE BASE STYLES
   =================== */
@media (max-width: 768px) {
    
    /* 
    MOBILE BROWSER UI SOLUTION:
    
    This CSS addresses the iOS Safari (and other mobile browser) issue where 
    100vh includes the browser UI area, causing content to be hidden behind 
    the bottom toolbar. The solution includes:
    
    1. CSS environment variables (env()) for safe areas
    2. Dynamic viewport height (100dvh) for modern browsers  
    3. Proper scrolling configuration for the navigation overlay
    4. Extra padding to ensure content accessibility
    
    For maximum compatibility, you can also add this JavaScript to your main script:
    
    // Dynamic viewport height fix for mobile browsers
    function setMobileVH() {
        const vh = window.innerHeight * 0.01;
        document.documentElement.style.setProperty('--mobile-vh', `${vh}px`);
    }
    
    window.addEventListener('resize', setMobileVH);
    window.addEventListener('orientationchange', setMobileVH);
    setMobileVH(); // Initial call
    */
    
    /* Body & Layout */
    body {
        padding-top: var(--mobile-header-height);
        font-size: calc(16px * var(--mobile-font-scale));
        line-height: 1.5;
    }

    .container {
        padding: 0 var(--mobile-padding);
    }

    /* Mobile spacer optimization */
    .spacer {
        padding-top: 80px !important;
    }

    /* ===================
       MOBILE HEADER
       =================== */
    .header-container {
        gap: 20px;
        padding: 15px 15px;
        flex-wrap: wrap;
        transition: all 0.3s ease; /* Smooth transition for shrinking effect */
    }

    /* Mobile Header Shrinking Effect */
    .page-header {
        transition: all 0.3s ease;
    }

    .page-header.header-shrunk .header-container {
        padding: 8px 15px; /* Reduced padding when shrunk */
    }

    .page-header.header-shrunk .logo-container svg {
        transform: scale(0.8); /* Scale down logo */
        transition: transform 0.3s ease;
    }

    .page-header.header-shrunk .header-btn {
        padding: 8px 16px; /* Smaller button padding */
        font-size: 12px; /* Smaller font size */
        transition: all 0.3s ease;
    }

    .page-header.header-shrunk .mobile-toggle {
        transform: scale(0.85); /* Slightly smaller hamburger */
        transition: transform 0.3s ease;
    }

    .mobile-toggle {
        display: flex;
        order: 3;
    }

    /* Hide the old primary menu system on mobile */
    .primary-menu {
        display: none !important;
    }

    /* ===================
       MOBILE NAVIGATION OVERLAY - iOS Safe Area Optimized
       =================== */
    .mobile-nav-overlay {
        /* Override base positioning to ensure consistent behavior regardless of scroll position */
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        left: auto !important;
        width: 100% !important; /* Full width on mobile */
        /* Use dynamic viewport height that accounts for browser UI */
        height: 100dvh !important; /* Dynamic viewport height (modern browsers) */
        height: calc(100vh - var(--safe-area-inset-bottom)) !important; /* Fallback with safe area */
        max-height: 100vh !important; /* Prevent overflow */
        overflow-y: auto !important; /* Enable scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
        /* Ensure scrolling area extends below browser UI - increased padding */
        padding-bottom: calc(var(--safe-area-inset-bottom) + 40px);
        box-sizing: border-box;
        /* Use right-based positioning instead of transform for consistency with base styles */
        transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
    }

    /* Override the active state to use right positioning */
    .mobile-nav-overlay.active {
        right: 0 !important;
        left: auto !important;
    }

    /* Ensure mobile navigation backdrop also uses proper viewport units */
    .mobile-nav-backdrop {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100dvh !important; /* Dynamic viewport height */
        height: calc(100vh - var(--safe-area-inset-bottom)) !important; /* Fallback */
        z-index: 9998 !important;
    }

    /* Navigation content container - ensure proper flex layout */
    .mobile-nav-content {
        min-height: 100%;
        display: flex;
        flex-direction: column;
        /* Increased bottom padding for better iOS Safari compatibility */
        padding-bottom: calc(var(--safe-area-inset-bottom) + 40px);
    }

    /* Navigation menu section - allow it to grow and be scrollable */
    .mobile-nav-menu {
        flex: 1;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* Add minimum height to ensure scrollability */
        min-height: 0; /* Important: allows flex item to shrink below content size */
    }

    /* Footer section - ensure it's always accessible via scroll */
    .mobile-nav-footer {
        padding: 25px 30px;
        /* Add extra bottom padding for iOS browser UI */
        padding-bottom: calc(25px + var(--safe-area-inset-bottom) + 20px);
        margin-top: auto; /* Push to bottom */
        flex-shrink: 0; /* Prevent compression */
    }

    .mobile-nav-header {
        padding: 20px 25px;
        /* Account for status bar on notched devices */
        padding-top: calc(20px + var(--safe-area-inset-top));
        flex-shrink: 0; /* Prevent compression */
    }

    .mobile-nav-logo svg {
        width: 130px;
    }

    .mobile-menu-link {
        padding: 22px 30px;
        font-size: 18px;
    }

    .mobile-cta-btn {
        padding: 16px 24px;
        font-size: 14px;
        margin-bottom: 25px;
    }

    .mobile-contact-info {
        gap: 14px;
    }

    .contact-link {
        font-size: 15px;
    }

    /* Enhanced scrolling indicators for mobile */
    .mobile-nav-overlay::-webkit-scrollbar {
        width: 3px;
    }

    .mobile-nav-overlay::-webkit-scrollbar-track {
        background: transparent;
    }

    .mobile-nav-overlay::-webkit-scrollbar-thumb {
        background: rgba(201, 169, 97, 0.3);
        border-radius: 2px;
    }

    .mobile-nav-overlay::-webkit-scrollbar-thumb:hover {
        background: rgba(201, 169, 97, 0.5);
    }

    /* Visual scroll indicator for mobile navigation */
    .mobile-nav-overlay.scrollable::after {
        content: "Scroll for more options";
        position: fixed;
        bottom: calc(var(--safe-area-inset-bottom) + 10px);
        left: 50%;
        transform: translateX(-50%);
        background: rgba(201, 169, 97, 0.9);
        color: white;
        padding: 6px 12px;
        border-radius: 16px;
        font-size: 12px;
        font-weight: 500;
        z-index: 10000;
        pointer-events: none;
        opacity: 0;
        animation: scrollHint 3s ease-in-out;
    }

    @keyframes scrollHint {
        0%, 100% { opacity: 0; transform: translateX(-50%) translateY(10px); }
        20%, 80% { opacity: 1; transform: translateX(-50%) translateY(0); }
    }

    /* Hide scroll hint after first scroll */
    .mobile-nav-overlay.scrollable.scrolled::after {
        display: none;
    }

    /* ===================
       MOBILE HERO SECTION
       =================== */
    .hero-banner {
        height: 50vh;
        min-height: 400px;
    }

    /* Hide desktop hero content on mobile */
    .hero-content {
        display: none !important;
    }

    /* Show and style mobile hero content */
    .hero-content-mobile {
        display: block !important;
        max-width: 90%; /* Percentage-based max width instead of fixed pixels */
        width: 80%; /* Allow content to use 80% of screen width as requested */
    }

    .hero-subtitle-mobile {
        font-size: 12px;
        margin-bottom: 12px;
        letter-spacing: 1.5px;
        line-height: 1.3;
    }

    .hero-title-mobile {
        font-size: clamp(2rem, 8vw, 2.4rem);
        margin-bottom: 20px;
        line-height: 1.1;
    }

    .hero-description-mobile {
        font-size: 13px;
        line-height: 1.4;
        margin-bottom: 18px;
    }

    .hero-cta-mobile {
        margin-top: 18px;
    }

    .hero-video {
        display: none !important; /* Disable video on mobile for performance */
    }

    .hero-placeholder {
        z-index: -2 !important;
        opacity: 1 !important;
    }

    /* Mobile-specific hero background image */
    .hero-placeholder .placeholder-image {
        content: url('370queensquay-mobile-placeholder.jpg');
        position: absolute;
        top: 0;
        left: 50%;
        width: 100vw;
        height: 100%;
        object-fit: cover;
        object-position: center center;
        transform: translateX(-50%); /* Center the image properly */
    }

    .premium-homes-logo {
        bottom: -9%;
        right: 6%;
        width: 180px;
    }

    /* ================================
       MOBILE MOVE-IN INCENTIVES BANNER
       Force modal behavior on mobile with higher specificity
       Break free from all parent constraints and center on viewport
       ================================ */
    #incentivesBanner.incentives-banner {
        position: fixed !important;
        top: 50vh !important;
        left: 50vw !important;
        transform: translate(-50%, -50%) !important;
        width: 90vw !important;
        max-width: 400px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: var(--warm-white) !important;
        border-radius: 12px !important;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
        border: 2px solid var(--primary-gold) !important;
        z-index: 99999 !important;
        max-height: 80vh !important;
        overflow-y: auto !important;
        /* Break free from parent constraints */
        isolation: isolate !important;
        contain: layout style !important;
    }

    .incentives-banner::before {
        display: none !important;
    }

    .incentives-banner .container {
        padding: 25px 20px !important;
        max-width: 100% !important;
        margin: 0 !important;
        width: 100% !important;
        position: relative !important;
    }

    .incentives-content {
        margin: 0;
    }

    .incentives-header {
        margin-bottom: 25px;
    }

    .incentives-title {
        font-size: clamp(22px, 6vw, 28px);
        margin-bottom: 8px;
        line-height: 1.2;
    }

    .incentives-subtitle {
        font-size: 12px;
        letter-spacing: 1px;
    }

    .incentives-grid {
        grid-template-columns: 1fr;
        gap: 15px;
        margin-bottom: 20px;
    }

    .incentive-item {
        flex-direction: row;
        text-align: left;
        padding: 15px;
        gap: 12px;
        background: rgba(201, 169, 97, 0.05);
        border-radius: 8px;
        border: 1px solid rgba(201, 169, 97, 0.15);
    }

    .incentive-icon {
        width: 40px;
        height: 40px;
        flex-shrink: 0;
    }

    .incentive-icon svg {
        width: 20px;
        height: 20px;
    }

    .incentive-text {
        text-align: left;
        flex: 1;
    }

    .incentive-text h4 {
        font-size: 16px;
        margin-bottom: 3px;
        line-height: 1.2;
    }

    .incentive-text p {
        font-size: 13px;
        line-height: 1.3;
        margin: 0;
    }

    .incentives-deadline {
        background: rgba(201, 169, 97, 0.08);
        border: 1px solid rgba(201, 169, 97, 0.2);
        border-radius: 6px;
        padding: 12px 15px;
        margin-top: 15px;
    }

    .incentives-deadline p {
        font-size: 11px;
        line-height: 1.3;
        margin: 0;
        text-align: center;
    }

    .incentives-close {
        position: fixed !important;
        top: 10px !important;
        right: 10px !important;
        width: 34px !important;
        height: 34px !important;
        background: var(--primary-gold) !important;
        border: 3px solid white !important;
        border-radius: 50% !important;
        z-index: 100001 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4) !important;
    }

    .incentives-close:hover {
        background: #b8944a !important;
        transform: scale(1.1) !important;
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.5) !important;
    }

    .incentives-close svg {
        width: 22px !important;
        height: 22px !important;
        fill: white !important;
    }

    /* Add backdrop overlay for mobile modal */
    .incentives-banner::after {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.4) !important;
        z-index: 99998 !important;
        pointer-events: none !important;
    }

    /* ================================
       EXTRA SMALL MOBILE (425px and below)
       ================================ */
    @media (max-width: 425px) {
        #incentivesBanner.incentives-banner {
            width: 95vw !important;
            max-width: 320px !important;
            max-height: 70vh !important;
            border-radius: 10px !important;
            /* Ensure centering on small screens */
            top: 50vh !important;
            left: 50vw !important;
            transform: translate(-50%, -50%) !important;
        }

        .incentives-banner .container {
            padding: 20px 15px;
        }

        .incentives-title {
            font-size: clamp(18px, 5vw, 22px);
            margin-bottom: 6px;
        }

        .incentives-subtitle {
            font-size: 11px;
        }

        .incentives-grid {
            gap: 12px;
            margin-bottom: 15px;
        }

        .incentive-item {
            padding: 12px;
            gap: 10px;
        }

        .incentive-icon {
            width: 35px;
            height: 35px;
        }

        .incentive-icon svg {
            width: 18px;
            height: 18px;
        }

        .incentive-text h4 {
            font-size: 14px;
            margin-bottom: 2px;
        }

        .incentive-text p {
            font-size: 12px;
        }

        .incentives-deadline {
            padding: 10px 12px;
            margin-top: 12px;
        }

        .incentives-deadline p {
            font-size: 10px;
        }

        .incentives-close {
            position: fixed !important;
            top: -1px !important;
            right: 0px !important;
            width: 30px !important;
            height: 30px !important;
            background: var(--primary-gold) !important;
            border: 3px solid white !important;
            border-radius: 50% !important;
            z-index: 100001 !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            cursor: pointer !important;
            box-shadow: 0 4px 5px rgba(0, 0, 0, 0.4) !important;
        }

        .incentives-close svg {
            width: 22px !important;
            height: 22px !important;
            fill: white !important;
        }
    }

    /* ===================
       MOBILE CONTENT SECTIONS
       =================== */
    .content-section {
        padding: var(--mobile-section-padding);
    }

    .content-grid {
        grid-template-columns: 1fr;
        gap: var(--mobile-content-gap);
    }

    .section-title {
        font-size: clamp(28px, 8vw, 36px);
        text-align: center;
    }

    .section-title2 {
        font-size: clamp(24px, 7vw, 30px);
        text-align: center;
    }

    .content-text h3 {
        font-size: clamp(24px, 6vw, 28px);
        text-align: center;
    }

    /* ===================
       MOBILE GALLERY & AMENITIES
       =================== */
    .gallery-section .gallery-grid,
    .amenities-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .gallery-section .gallery-item {
        aspect-ratio: 16/10; /* Mobile-optimized aspect ratio */
    }

    .amenities-grid {
        gap: 30px;
    }

    .amenity-card {
        padding: 30px 15px;
        margin: 0 auto;
        max-width: 350px;
    }

    /* ===================
       MOBILE LIGHTBOX
       =================== */
    .lightbox-close {
        top: 20px;
        right: 20px;
        font-size: 28px;
    }

    .lightbox-nav {
        padding: 12px 16px;
        font-size: 20px;
    }

    .lightbox-nav.prev { 
        left: 15px; 
    }

    .lightbox-nav.next { 
        right: 15px; 
    }

    .lightbox-counter {
        bottom: 20px;
        font-size: 12px;
        padding: 6px 12px;
    }

    .lightbox-content {
        max-width: 95%;
        max-height: 95%;
    }

    /* ===================
       MOBILE TOUR MODAL
       =================== */
    .tour-modal-overlay {
        padding: 10px;
    }

    .tour-modal-content {
        max-width: 100%;
        max-height: 95vh;
    }

    .tour-modal-header,
    .tour-modal-body,
    .tour-modal-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .tour-modal-header h2 {
        font-size: 28px;
    }

    .tour-modal-body {
        grid-template-columns: 1fr; /* Single column on mobile */
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .calendar-grid {
        gap: 4px;
    }

    .calendar-day {
        font-size: 12px;
    }

    .time-slot-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tour-modal-actions {
        flex-direction: column;
        gap: 15px;
    }

    /* ===================
       MOBILE CONTACT MODAL
       =================== */
    .contact-modal-overlay {
        padding: 10px;
    }

    .contact-modal-content {
        max-width: 100%;
        max-height: 95vh;
        margin: 0;
    }

    .contact-modal-header,
    .contact-modal-body,
    .contact-modal-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .contact-modal-header {
        padding: 30px 20px 20px;
    }

    .contact-modal-header h2 {
        font-size: 24px;
    }

    .contact-modal-header p {
        font-size: 14px;
    }

    .contact-modal-body {
        padding: 20px;
    }

    .contact-inquiry-form .form-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .contact-inquiry-form {
        gap: 20px;
    }

    .contact-inquiry-form input,
    .contact-inquiry-form select,
    .contact-inquiry-form textarea {
        padding: 12px 14px;
        font-size: 16px; /* Prevent zoom on iOS */
    }

    .contact-inquiry-form textarea {
        min-height: 80px;
    }

    .contact-preferences {
        gap: 12px;
        flex-direction: column;
    }

    .contact-preference-option {
        padding: 10px 12px;
        font-size: 14px;
        width: 100%;
        justify-content: flex-start;
    }

    .checkbox-custom {
        width: 18px;
        height: 18px;
    }

    .contact-modal-footer {
        padding: 15px 20px 30px;
    }

    .contact-modal-actions {
        flex-direction: column;
        gap: 12px;
    }

    .contact-btn-primary,
    .contact-btn-secondary {
        padding: 16px 24px;
        font-size: 16px;
        min-width: auto;
        width: 100%;
    }

    .contact-modal-close {
        top: 15px;
        right: 15px;
        width: 36px;
        height: 36px;
        font-size: 20px;
    }

    .tour-btn-primary,
    .tour-btn-secondary {
        width: 100%;
    }

    /* ===================
       MOBILE FOOTER
       =================== */
    .footer-main-title {
        font-size: clamp(2rem, 6vw, 2.5rem);
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
        justify-items: center;
    }

    .footer-left,
    .footer-right {
        text-align: center;
        width: 100%;
    }

    .footer-info {
        gap: 30px;
    }

    .social-links {
        justify-content: center;
    }
}

/* ===================
   SMALL MOBILE STYLES (480px and below)
   =================== */
@media (max-width: 480px) {
    :root {
        --mobile-header-height: 65px;
        --mobile-padding: 15px;
        --mobile-font-scale: 0.8;
    }

    body {
        padding-top: var(--mobile-header-height);
    }

    /* Enhanced mobile hero image */
    .hero-placeholder .placeholder-image {
        content: url('370queensquay-mobile-placeholder.jpg');
        object-fit: cover;
        object-position: center center;
        /* Darker overlay for better text contrast */
        filter: brightness(0.75) contrast(1.05);
    }

    .hero-content-mobile {
        max-width: 85%; /* Percentage-based for small screens */
        width: 75%; /* Slightly narrower on very small screens but still percentage-based */
    }

    .hero-subtitle-mobile {
        font-size: 11px;
        margin-bottom: 10px;
        letter-spacing: 1px;
    }

    .hero-description-mobile {
        font-size: 16px;
        line-height: 1.3;
        margin-bottom: 15px;
    }

    .hero-title-mobile {
        font-size: clamp(1.8rem, 7vw, 2.1rem);
        margin-bottom: 18px;
    }

    .hero-cta-mobile {
        margin-top: 15px;
    }

    .cta-primary-mobile {
        padding: 12px 24px;
        font-size: 13px;
    }

    .premium-homes-logo {
        width: 140px;
        bottom: -8%;
        right: 5%;
    }

    /* Typography optimizations for small screens */
    .section-title {
        font-size: clamp(24px, 7vw, 32px);
    }

    .section-title2 {
        font-size: clamp(22px, 6vw, 30px);
    }

    .footer-main-title {
        font-size: 2rem;
    }

    .page-footer {
        padding: 60px 0 40px;
    }

    /* ===================
       SMALL MOBILE NAVIGATION (425px and below)
       =================== */
    @media (max-width: 425px) {
        /* Reduced header height for small mobile */
        :root {
            --mobile-header-height: 90px; /* Default height for 2-row layout */
        }

        body {
            padding-top: var(--mobile-header-height);
            transition: padding-top 0.3s ease; /* Smooth transition when JS adjusts padding */
        }

        /* Header Layout Refactor for Small Mobile */
        .header-container {
            display: grid;
            grid-template-columns: 1fr auto;
            grid-template-rows: auto auto;
            gap: 12px;
            padding: 12px 15px;
            align-items: center;
            transition: all 0.3s ease; /* Smooth transition for shrinking */
        }

        /* Small Mobile Header Shrinking Effect - Collapse to 1 row */
        .page-header.header-shrunk .header-container {
            grid-template-columns: auto 1fr auto; /* 3 columns: logo, button, hamburger */
            grid-template-rows: auto; /* Single row when shrunk */
            gap: 8px;
            padding: 6px 12px; /* Even more reduced padding */
            align-items: center;
        }

        /* When shrunk: Logo - left column */
        .page-header.header-shrunk .logo-container {
            grid-column: 1;
            grid-row: 1;
            justify-self: start;
        }

        .page-header.header-shrunk .logo-container svg {
            width: 90px !important; /* Smaller logo for 1-row layout */
        }

        /* When shrunk: Button - center column */
        .page-header.header-shrunk .header-btn {
            grid-column: 2;
            grid-row: 1;
            justify-self: center;
            padding: 4px 12px; /* Very compact button */
            font-size: 10px; /* Smaller text for compact layout */
            white-space: nowrap; /* Prevent text wrapping */
        }

        /* When shrunk: Hamburger - right column */
        .page-header.header-shrunk .mobile-toggle {
            grid-column: 3;
            grid-row: 1;
            justify-self: end;
            transform: scale(0.75); /* Even smaller hamburger for 1-row layout */
        }

        /* Logo - Top row, left */
        .logo-container {
            grid-column: 1;
            grid-row: 1;
            justify-self: start;
        }

        .logo-container svg {
            width: 120px !important; /* Smaller logo for better fit */
            height: auto;
            transition: all 0.3s ease; /* Smooth scaling transition */
        }

        /* Hamburger menu - Top row, right */
        .mobile-toggle {
            grid-column: 2;
            grid-row: 1;
            justify-self: end;
            order: unset; /* Reset order since we're using grid */
        }

        /* Schedule button - Second row, centered */
        .header-btn {
            grid-column: 1 / -1; /* Span full width */
            grid-row: 2;
            justify-self: center;
            padding: 10px 20px; /* Slightly smaller button */
            font-size: 12px;
            margin: 0; /* Remove any margins */
        }

        .mobile-nav-overlay {
            width: 100%; /* Ensure full width on very small devices */
        }

        .mobile-nav-header {
            padding: 22px 30px; /* Increased padding for better spacing */
        }

        .mobile-nav-logo svg {
            width: 140px; /* Slightly larger logo */
        }

        .mobile-menu-link {
            padding: 26px 35px; /* Increased padding for better touch targets */
            font-size: 19px; /* Slightly larger font */
        }

        .mobile-nav-footer {
            padding: 30px 35px; /* Increased padding */
            /* Significantly increased bottom padding for iOS Safari toolbar */
            padding-bottom: calc(30px + var(--safe-area-inset-bottom) + 60px);
        }

        .mobile-cta-btn {
            padding: 18px 28px; /* Larger button */
            font-size: 15px; /* Larger font */
            margin-bottom: 25px;
        }

        .mobile-contact-info {
            gap: 16px;
            /* Change to horizontal layout for small mobile */
            flex-direction: row;
            justify-content: space-between;
            align-items: flex-start;
        }

        /* Adjust individual contact items for horizontal layout */
        .contact-item {
            flex: 1;
            align-items: center;
            text-align: center;
            gap: 2px; /* Reduced gap for compact horizontal layout */
        }

        .contact-label {
            font-size: 12px; /* Slightly smaller for horizontal layout */
        }

        .contact-link {
            font-size: 16px; /* Reduced from 20px for better fit */
        }
    }

        /* Add more space between header and page-title for small mobile */
        @media (max-width: 425px) {
            .page-title {
                margin-top: 24px;
            }
        }

    /* ===================
       SMALL MOBILE NAVIGATION
       =================== */
    .mobile-nav-header {
        padding: 18px 20px;
    }

    .mobile-nav-logo svg {
        width: 120px;
    }

    .mobile-nav-close {
        width: 36px;
        height: 36px;
    }

    .close-line {
        width: 20px;
    }

    .mobile-menu-link {
        padding: 20px 25px;
        font-size: 16px;
    }

    .menu-icon {
        font-size: 18px;
    }

    .mobile-nav-footer {
        padding: 20px 25px;
        /* Extra bottom padding for small mobile devices - increased significantly */
        padding-bottom: calc(20px + var(--safe-area-inset-bottom) + 30px);
    }

    .mobile-cta-btn {
        padding: 14px 20px;
        font-size: 13px;
        margin-bottom: 20px;
    }

    .cta-icon {
        font-size: 16px;
    }

    .mobile-contact-info {
        gap: 12px;
        /* Horizontal layout for small mobile */
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    /* Adjust individual contact items for horizontal layout */
    .contact-item {
        flex: 1;
        align-items: center;
        text-align: center;
        gap: 2px;
    }

    .contact-label {
        font-size: 11px; /* Smaller for compact horizontal layout */
    }

    .contact-link {
        font-size: 15px; /* Reduced from 20px for better fit */
    }

    /* Small mobile tour modal optimizations */
    .tour-modal-header h2 {
        font-size: 24px;
    }

    .tour-modal-header,
    .tour-modal-body,
    .tour-modal-footer {
        padding-left: 15px;
        padding-right: 15px;
    }

    .calendar-day {
        font-size: 11px;
        padding: 8px 4px;
    }

    .time-slot {
        padding: 10px 11px;
        font-size: 13px;
    }
}

/* ===================
   MOBILE TOUCH OPTIMIZATIONS
   =================== */
@media (max-width: 768px) {
    /* Enhanced touch targets */
    .amenity-gallery-card,
    .gallery-item,
    .cta-primary,
    .cta-secondary,
    .cta-primary-mobile,
    .header-btn {
        min-height: 44px; /* iOS recommended touch target */
    }

    /* Improved tap highlighting */
    .amenity-gallery-card,
    .gallery-item {
        -webkit-tap-highlight-color: rgba(201, 169, 97, 0.2);
    }

    /* Prevent zoom on form inputs */
    input,
    select,
    textarea {
        font-size: 16px; /* Prevent iOS zoom */
    }

    /* Enhanced scrolling performance */
    .lightbox-overlay,
    .tour-modal-overlay,
    .mobile-nav-overlay {
        -webkit-overflow-scrolling: touch;
    }

    /* Mobile navigation accessibility */
    .mobile-toggle:focus {
        outline: 3px solid var(--primary-gold);
        outline-offset: 2px;
    }

    .mobile-menu-link:focus {
        background: rgba(201, 169, 97, 0.1);
        outline: 2px solid var(--primary-gold);
        outline-offset: -2px;
    }
}

/* ===================
   MOBILE ACCESSIBILITY
   =================== */
@media (max-width: 768px) {
    /* Enhanced focus states for mobile */
    .header-btn:focus,
    .cta-primary:focus,
    .cta-secondary:focus,
    .cta-primary-mobile:focus {
        outline: 3px solid var(--primary-gold);
        outline-offset: 2px;
    }

    /* Better contrast for mobile reading */
    .section-description {
        color: #1a1a1a;
        line-height: 1.6;
    }
}

/* ===================
   MOBILE PERFORMANCE OPTIMIZATIONS
   =================== */
@media (max-width: 768px) {
    /* Reduce animation complexity on mobile */
    .fade-in,
    .amenity-card.visible {
        transition: opacity 0.4s ease; /* Simplified transitions */
    }

    /* GPU acceleration for smooth scrolling */
    .hero-banner,
    .lightbox-overlay {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }
}