/**
 * Cross-Browser Compatibility Fixes
 * Ensures website works on iPhone, Android, Chrome, Safari, Firefox, Edge
 * STAR DIGITAL Theme
 */

/* ============================================
   MOBILE MENU - CROSS-BROWSER FIXES
   ============================================ */

/* Fix for Safari and older iOS versions */
.mobile-nav-overlay {
    /* Ensure proper stacking on all browsers */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    /* Prevent scrolling issues on iOS Safari */
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

/* Ensure smooth scrolling works on all browsers */
.mobile-nav-overlay {
    scroll-behavior: smooth;
    overscroll-behavior: contain;
}

/* Fix for Firefox and Modern Browsers */
@supports (scrollbar-width: thin) {
    .mobile-nav-overlay {
        scrollbar-width: thin;
        scrollbar-color: var(--primary-color) transparent;
    }
}

/* Fix for Edge and Chrome */
.mobile-nav-overlay::-webkit-scrollbar {
    width: 6px;
}

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

.mobile-nav-overlay::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 10px;
}

.mobile-nav-overlay::-webkit-scrollbar-thumb:hover {
    background: var(--secondary-color);
}

/* ============================================
   PREVENT BODY SCROLL - ALL BROWSERS
   ============================================ */

/* When mobile menu is open */
body.mobile-menu-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* iOS specific fix */
@supports (-webkit-touch-callout: none) {
    body.mobile-menu-open {
        position: fixed !important;
        overflow: hidden !important;
    }
}

/* ============================================
   BACKDROP FILTER FALLBACK
   ============================================ */

/* For browsers that don't support backdrop-filter */
@supports not (backdrop-filter: blur(25px)) {
    .mobile-nav-overlay {
        background: var(--bg-color) !important;
    }

    .luxury-header {
        background: var(--bg-color) !important;
    }
}

/* ============================================
   VIEWPORT HEIGHT FIXES
   ============================================ */

/* Fix for mobile browsers with dynamic toolbars */
.mobile-nav-overlay {
    /* Fallback for older browsers */
    height: 100vh;

    /* Modern browsers with dynamic viewport */
    height: 100dvh;

    /* Alternative for browsers without dvh support */
    min-height: -webkit-fill-available;
}

/* iOS Safari specific */
@supports (-webkit-appearance: none) {
    .mobile-nav-overlay {
        height: -webkit-fill-available;
    }
}

/* ============================================
   TOUCH ACTION FIXES
   ============================================ */

/* Prevent pull-to-refresh on mobile browsers */
.mobile-nav-overlay {
    overscroll-behavior-y: contain;
}

@supports (-webkit-overflow-scrolling: touch) {
    .mobile-nav-overlay {
        -webkit-overflow-scrolling: touch;
    }
}

/* Prevent zoom on double-tap (iOS Safari) */
.mobile-nav-menu a,
.mobile-lang-option {
    touch-action: manipulation;
}

/* ============================================
   FONT RENDERING FIXES
   ============================================ */

/* Ensure crisp text on all browsers */
.mobile-nav-menu,
.mobile-lang-switcher {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ============================================
   FLEXBOX FIXES FOR OLDER BROWSERS
   ============================================ */

/* IE11 and older Edge */
.mobile-nav-content {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

.mobile-nav-menu {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

.mobile-lang-options {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

/* ============================================
   TRANSFORM FIXES
   ============================================ */

/* Ensure transforms work on all browsers */
.mobile-nav-overlay {
    -webkit-transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    transform: translateY(-20px);
}

.mobile-nav-overlay.active {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
}

/* ============================================
   TRANSITION FIXES
   ============================================ */

/* Ensure smooth transitions on all browsers */
.mobile-nav-overlay {
    -webkit-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    -o-transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.mobile-lang-option {
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

/* ============================================
   GRADIENT FIXES
   ============================================ */

/* Ensure gradients work on all browsers */
.mobile-lang-option::before {
    background: -webkit-linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    background: -o-linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
    background: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);
}

/* ============================================
   BORDER RADIUS FIXES
   ============================================ */

/* Ensure border-radius works on all browsers */
.mobile-lang-option {
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    border-radius: 14px;
}

/* ============================================
   OPACITY FIXES
   ============================================ */

/* Ensure opacity works on all browsers */
.mobile-nav-overlay {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
}

.mobile-nav-overlay.active {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

/* ============================================
   SAFE AREA INSETS - iOS NOTCH
   ============================================ */

/* iPhone X+ notch support */
@supports (padding: max(0px)) {
    .mobile-nav-content {
        padding-left: max(40px, env(safe-area-inset-left));
        padding-right: max(40px, env(safe-area-inset-right));
        padding-top: max(120px, calc(env(safe-area-inset-top) + 120px));
        padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 60px));
    }
}

/* Alternative for older iOS */
@supports (padding: constant(safe-area-inset-left)) {
    .mobile-nav-content {
        padding-left: max(40px, constant(safe-area-inset-left));
        padding-right: max(40px, constant(safe-area-inset-right));
        padding-top: max(120px, calc(constant(safe-area-inset-top) + 120px));
        padding-bottom: max(60px, calc(constant(safe-area-inset-bottom) + 60px));
    }
}

/* ============================================
   ANDROID CHROME FIXES
   ============================================ */

/* Fix for Android Chrome address bar */
@media screen and (max-width: 992px) {
    .mobile-nav-overlay {
        /* Use dvh for dynamic viewport */
        height: 100dvh;
    }

    /* Fallback for browsers without dvh */
    @supports not (height: 100dvh) {
        .mobile-nav-overlay {
            height: calc(100vh - env(safe-area-inset-bottom, 0px));
        }
    }
}

/* ============================================
   FIREFOX MOBILE FIXES
   ============================================ */

/* Fix for Firefox on Android (Redundant with modern dvh/vh support) */
/* Remved @-moz-document block to prevent linter warnings */

/* ============================================
   SAMSUNG INTERNET FIXES
   ============================================ */

/* Fix for Samsung Internet Browser */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    @supports (-webkit-overflow-scrolling: touch) {
        .mobile-nav-overlay {
            -webkit-overflow-scrolling: touch;
        }
    }
}

/* ============================================
   EDGE LEGACY FIXES
   ============================================ */

/* Fix for Edge Legacy (pre-Chromium) */
@supports (-ms-ime-align: auto) {
    .mobile-nav-overlay {
        height: 100vh;
    }

    .mobile-nav-content {
        -ms-flex: 1;
        flex: 1;
    }
}

/* ============================================
   PREVENT HORIZONTAL SCROLL
   ============================================ */

/* Ensure no horizontal scrolling on any browser */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

.mobile-nav-overlay,
.mobile-nav-content {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* ============================================
   ACCESSIBILITY FIXES
   ============================================ */

/* Ensure focus states are visible on all browsers */
.mobile-nav-menu a:focus,
.mobile-lang-option:focus {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Remove outline for mouse users */
.mobile-nav-menu a:focus:not(:focus-visible),
.mobile-lang-option:focus:not(:focus-visible) {
    outline: none;
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Use GPU acceleration on all browsers */
.mobile-nav-overlay,
.mobile-nav-content,
.mobile-lang-option {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);

    will-change: transform, opacity;
}

/* Optimize repaints */
.mobile-nav-overlay.active {
    will-change: auto;
}

/* ============================================
   PRINT STYLES
   ============================================ */

/* Hide mobile menu when printing */
@media print {

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