/* ============================================
   Mobile-Specific Optimizations
   ============================================ */

/* Touch-Friendly Interactions */
@media (max-width: 768px) {

    /* Larger touch targets */
    .btn,
    button,
    a {
        min-height: 44px;
        min-width: 44px;
    }

    /* Prevent text selection on buttons */
    .btn,
    button {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
        user-select: none;
    }

    /* Mobile Navigation */
    #mobile-menu {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform var(--transition-base);
    }

    #mobile-menu.active {
        transform: translateX(0);
    }

    /* Prevent body scroll when menu is open */
    body.menu-open {
        overflow: hidden;
    }

    /* Bottom Navigation (Optional) */
    .bottom-nav {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--glass-bg);
        backdrop-filter: blur(var(--glass-blur));
        border-top: 1px solid var(--glass-border);
        padding: var(--space-2) 0;
        z-index: var(--z-sticky);
        display: flex;
        justify-content: space-around;
        align-items: center;
    }

    .bottom-nav-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--space-1);
        padding: var(--space-2);
        color: var(--text-tertiary);
        font-size: var(--font-size-xs);
        text-decoration: none;
        transition: color var(--transition-fast);
    }

    .bottom-nav-item.active,
    .bottom-nav-item:hover {
        color: var(--primary-500);
    }

    .bottom-nav-item i {
        font-size: var(--font-size-lg);
    }

    /* Mobile Header Adjustments */
    header {
        background: var(--glass-bg);
        backdrop-filter: blur(var(--glass-blur));
        border-bottom: 1px solid var(--glass-border);
    }

    /* Reduce spacing on mobile */
    .section {
        padding: var(--space-12) 0;
    }

    .section-lg {
        padding: var(--space-16) 0;
    }

    /* Mobile Typography */
    h1 {
        font-size: var(--font-size-4xl);
    }

    h2 {
        font-size: var(--font-size-3xl);
    }

    h3 {
        font-size: var(--font-size-2xl);
    }

    /* Mobile Cards */
    .card,
    .glass-card {
        padding: var(--space-4);
    }

    /* Mobile Grid */
    .grid {
        gap: var(--space-4);
    }

    /* Swipe Gestures for Carousels */
    [data-carousel] {
        touch-action: pan-y pinch-zoom;
    }

    /* Mobile Forms */
    input,
    textarea,
    select {
        font-size: 16px;
        /* Prevents zoom on iOS */
    }

    /* Mobile Modals */
    [data-modal] {
        padding: var(--space-4);
    }

    [data-modal] .modal-content {
        max-height: 90vh;
        overflow-y: auto;
    }

    /* Reduce animations on mobile for performance */
    @media (prefers-reduced-motion: reduce) {
        * {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* Mobile Search */
    #search-input {
        width: 100%;
    }

    #search-results {
        position: fixed;
        top: 80px;
        left: 0;
        right: 0;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    /* Mobile Hero Section */
    .hero {
        min-height: 60vh;
        padding: var(--space-8) 0;
    }

    /* Mobile Tour Cards */
    .tour-card {
        margin-bottom: var(--space-4);
    }

    /* Mobile Booking Sidebar */
    .booking-sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
        padding: var(--space-4);
        box-shadow: var(--shadow-2xl);
        transform: translateY(100%);
        transition: transform var(--transition-base);
    }

    .booking-sidebar.active {
        transform: translateY(0);
    }

    /* Mobile Image Gallery */
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-2);
    }

    /* Mobile Footer */
    footer .grid {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    /* Hide desktop-only elements */
    .desktop-only {
        display: none !important;
    }

    /* Show mobile-only elements */
    .mobile-only {
        display: block !important;
    }

    /* Mobile Notification */
    #notification-container {
        top: 10px;
        right: 10px;
        left: 10px;
    }

    .notification {
        font-size: var(--font-size-sm);
    }

    /* Mobile Back to Top Button */
    #back-to-top {
        bottom: 80px;
        /* Above bottom nav if present */
        right: var(--space-4);
        width: 48px;
        height: 48px;
    }

    /* Mobile Carousel Controls */
    [data-carousel-prev],
    [data-carousel-next] {
        width: 40px;
        height: 40px;
        font-size: var(--font-size-lg);
    }

    /* Mobile Tabs */
    .tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .tab {
        white-space: nowrap;
    }

    /* Mobile Filters */
    .filter-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--bg-primary);
        z-index: var(--z-modal);
        transform: translateX(-100%);
        transition: transform var(--transition-base);
        overflow-y: auto;
    }

    .filter-sidebar.active {
        transform: translateX(0);
    }

    /* Mobile Price Display */
    .price-display {
        font-size: var(--font-size-2xl);
    }

    /* Mobile Breadcrumbs */
    .breadcrumb {
        font-size: var(--font-size-xs);
        overflow-x: auto;
        white-space: nowrap;
    }

    /* Mobile Video */
    video {
        width: 100%;
        height: auto;
    }

    /* Mobile Map */
    .map-container {
        height: 300px;
    }

    /* Sticky CTA on Mobile */
    .sticky-cta {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: var(--space-4);
        background: var(--bg-primary);
        border-top: 1px solid var(--border-color);
        box-shadow: var(--shadow-2xl);
        z-index: var(--z-sticky);
    }

    /* Mobile Hero Section Optimizations */
    .hero h1 {
        font-size: clamp(2rem, 8vw, 3.5rem);
        line-height: 1.1;
    }

    .hero p {
        font-size: clamp(0.875rem, 3.5vw, 1.125rem);
    }

    /* Improve search form visibility on mobile */
    .glass-dark {
        background: rgba(17, 24, 39, 0.85);
        backdrop-filter: blur(16px);
    }

    /* Optimize search input sizing for mobile */
    .glass-dark input,
    .glass-dark select {
        min-height: 40px;
        font-size: 14px;
    }

    /* Better touch targets for search button */
    .glass-dark button[type="submit"] {
        min-height: 48px;
        padding: 0.75rem 1.5rem;
    }

    /* Mobile Hero Section Height Optimization */
    section.relative.min-h-screen {
        min-height: 85vh;
    }

    /* Ensure hero content is properly centered on mobile */
    section.relative.min-h-screen .flex-1 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Enhanced text shadows for readability with lighter overlay */
    .hero h1,
    section.relative h1 {
        text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5), 0 4px 40px rgba(0, 0, 0, 0.3);
    }

    .hero p,
    section.relative p {
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4), 0 2px 20px rgba(0, 0, 0, 0.2);
    }

    /* Optimize glass-dark for mobile with lighter overlay */
    .glass-dark {
        background: rgba(17, 24, 39, 0.9);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }
}

/* Landscape Mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .hero {
        min-height: 100vh;
    }

    #mobile-menu {
        max-height: calc(100vh - 60px);
    }
}

/* Small Mobile (< 375px) */
@media (max-width: 374px) {
    html {
        font-size: 14px;
    }

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

    .btn {
        padding: var(--space-2) var(--space-4);
        font-size: var(--font-size-sm);
    }
}

/* Large Mobile / Small Tablet (375px - 480px) */
@media (min-width: 375px) and (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Tablet Portrait (481px - 768px) */
@media (min-width: 481px) and (max-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
    }

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

/* iOS Specific */
@supports (-webkit-touch-callout: none) {

    /* iOS safe area */
    body {
        padding-bottom: env(safe-area-inset-bottom);
    }

    .bottom-nav {
        padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
    }

    /* Fix iOS input zoom */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* Android Specific */
@media (max-width: 768px) {

    /* Prevent overscroll */
    body {
        overscroll-behavior-y: contain;
    }
}

/* PWA Standalone Mode */
@media (display-mode: standalone) {

    /* Hide browser UI elements */
    .pwa-hide {
        display: none;
    }

    /* Adjust header for standalone */
    header {
        padding-top: env(safe-area-inset-top);
    }
}

/* High DPI Screens */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    /* Sharper images */
    img {
        image-rendering: -webkit-optimize-contrast;
    }
}

/* Dark Mode Mobile Adjustments */
[data-theme="dark"] {
    @media (max-width: 768px) {

        .glass-nav,
        #mobile-menu,
        .bottom-nav {
            background: rgba(0, 0, 0, 0.8);
        }
    }
}

/* Accessibility - Larger Text */
@media (prefers-contrast: high) {
    body {
        font-size: 18px;
    }

    .btn {
        border-width: 2px;
    }
}

/* Performance Optimizations */
@media (max-width: 768px) {

    /* Disable expensive effects on mobile */
    .card-3d:hover {
        transform: translateY(-4px);
    }

    /* Simplify shadows */
    .shadow-2xl {
        box-shadow: var(--shadow-lg);
    }

    /* Reduce blur for performance */
    .glass,
    .glass-card {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
}