/* Production Mobile CSS Fixes for cPanel Deployment */
/* This file fixes mobile rendering issues in production environment */

/* Critical Viewport and Box Model Reset */
* {
    -webkit-box-sizing: border-box !important;
    -moz-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

html {
    -webkit-text-size-adjust: 100% !important;
    -ms-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}

body {
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    text-rendering: optimizeLegibility !important;
}

/* Mobile Viewport Fixes */
@media screen and (max-width: 768px) {
    /* HTML should not scroll - only body scrolls */
    html {
        overflow: hidden !important;
        width: 100% !important;
        height: 100% !important;
        position: fixed !important;
    }

    /* Body is the only scroller - prevents dual scroller conflict */
    body {
        overflow-x: hidden !important;
        overflow-y: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        height: 100% !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Fix container widths */
    .container,
    .main-content,
    .content-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Fix navigation bar */
    .navbar {
        width: 100% !important;
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
    }

    /* Fix header elements */
    .header,
    .top-header,
    .nav-header {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 15px !important;
    }

    /* Fix search container */
    .search-container {
        width: calc(100% - 30px) !important;
        margin: 0 15px !important;
    }

    .search-bar {
        width: 100% !important;
        display: flex !important;
        flex-wrap: nowrap !important;
    }

    .search-input {
        width: 100% !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    /* Fix dropdown positioning */
    .search-dropdown,
    .location-dropdown {
        width: calc(100vw - 30px) !important;
        max-width: calc(100vw - 30px) !important;
        left: 15px !important;
        right: 15px !important;
    }

    /* Fix carousel */
    .carousel-container {
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .carousel-track {
        display: flex !important;
        gap: 10px !important;
    }

    .carousel-item {
        flex: 0 0 auto !important;
        width: 85% !important;
        max-width: 300px !important;
    }

    /* Fix category cards */
    .category-card {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* Fix deal cards */
    .deal-card,
    .offer-card {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

    /* Fix modals */
    .modal {
        width: 90% !important;
        max-width: 90% !important;
        margin: 5% auto !important;
        left: 5% !important;
        right: 5% !important;
    }

    .modal-content {
        width: 100% !important;
        padding: 20px !important;
    }

    /* Fix buttons */
    .btn,
    button {
        min-height: 44px !important;
        padding: 12px 20px !important;
        font-size: 16px !important;
    }

    /* Fix forms */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="search"],
    textarea,
    select {
        width: 100% !important;
        height: 44px !important;
        font-size: 16px !important;
        padding: 10px !important;
    }

    /* Prevent zoom on input focus */
    input:focus,
    textarea:focus,
    select:focus {
        font-size: 16px !important;
    }

    /* Fix images */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Fix text overflow */
    h1, h2, h3, h4, h5, h6, p, span, div {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* Fix footer */
    footer {
        width: 100% !important;
        padding: 20px 15px !important;
    }

    /* Fix Entertainment Hub */
    .entertainment-hub {
        width: 100% !important;
        padding: 0 15px !important;
    }

    .entertainment-tabs {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .tab-btn {
        width: 100% !important;
        justify-content: flex-start !important;
    }

    /* Fix movie cards */
    .movie-card {
        width: 100% !important;
        margin-bottom: 15px !important;
    }

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

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

    /* Fix z-index stacking */
    .navbar {
        z-index: 9999 !important;
    }

    .modal-overlay {
        z-index: 10000 !important;
    }

    .modal {
        z-index: 10001 !important;
    }

    .dropdown {
        z-index: 9998 !important;
    }
}

/* Tablet Specific Fixes */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 100% !important;
        padding: 0 20px !important;
    }

    .carousel-item {
        width: 45% !important;
    }

    .deal-card {
        width: 48% !important;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    /* Increase touch targets */
    a, button, .clickable {
        min-height: 44px !important;
        min-width: 44px !important;
    }

    /* Remove hover effects on touch devices */
    .hover-effect:hover {
        transform: none !important;
    }

    /* Optimize scrolling */
    * {
        -webkit-overflow-scrolling: touch !important;
    }
}

/* iOS Specific Fixes */
@supports (-webkit-touch-callout: none) {
    /* Fix iOS input zoom */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Fix iOS modal positioning */
    .modal {
        position: fixed !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        -webkit-transform: translate(-50%, -50%) !important;
    }

    /* Fix iOS safe area */
    @supports (padding: env(safe-area-inset-bottom)) {
        .navbar {
            padding-bottom: env(safe-area-inset-bottom) !important;
        }

        footer {
            padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
        }
    }
}

/* Android Specific Fixes */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (hover: none) {
    /* Fix Android keyboard issues */
    input:focus,
    textarea:focus {
        outline: none !important;
        border-color: #1877f2 !important;
    }
}

/* High DPI Screen Fixes */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* Sharper images on retina displays */
    img {
        image-rendering: -webkit-optimize-contrast !important;
        image-rendering: crisp-edges !important;
    }

    /* Thinner borders on high DPI */
    * {
        border-width: 0.5px !important;
    }
}

/* Print Media Fix (prevents mobile CSS affecting print) */
@media print {
    * {
        width: auto !important;
        max-width: none !important;
    }
}