/* =========================================
           CUSTOM CSS STYLES
           ========================================= */
        
        /* Custom Tailwind Configuration */
        :root {
            --accent-cyan: #22d3ee; /* Tailwind cyan-400 */
        }

        /* Base styles using Rajdhani for body and Orbitron for headings */
        body {
            font-family: 'Rajdhani', sans-serif;
            background-color: #000000; /* Pure Black */
            color: #ffffff;
            /* Add padding at the bottom equal to the fixed player's height */
            padding-bottom: 3rem; /* Adjusted for fixed player height */
            transition: padding-bottom 0.3s;
        }
        
        /* Custom class for the 3D-like, glowing effect on elements */
        .shadow-glow-cyan {
            box-shadow: 0 0 10px rgba(34, 211, 238, 0.5), 0 4px 6px rgba(0, 0, 0, 0.4);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border-radius: 0.25rem;
        }

        .shadow-glow-cyan:hover {
             box-shadow: 0 0 15px rgba(34, 211, 238, 0.8), 0 8px 10px rgba(0, 0, 0, 0.6);
             transform: translateY(-2px); /* Subtle lift */
        }

        /* Apply Orbitron to main headings */
        h1, h2, h3 {
            font-family: 'Orbitron', sans-serif;
            text-transform: uppercase;
        }

        /* Style for active navigation link */
        .nav-link.active {
            color: var(--accent-cyan) !important;
            border-bottom-color: var(--accent-cyan) !important;
            font-weight: 700;
        }

        /* Ensures iframes are fully responsive within their containers */
        .iframe-container {
            border: 1px solid var(--accent-cyan);
            box-shadow: 0 0 10px rgba(34, 211, 238, 0.5);
            padding: 0.5rem;
            background: #080808;
        }

        /* Custom styling for the range input (volume slider) */
        input[type="range"] {
            -webkit-appearance: none;
            width: 100%;
            height: 8px;
            background: #333;
            border-radius: 4px;
            outline: none;
            transition: opacity .2s;
        }

        input[type="range"]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--accent-cyan);
            cursor: pointer;
            box-shadow: 0 0 5px var(--accent-cyan);
        }

        input[type="range"]::-moz-range-thumb {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            background: var(--accent-cyan);
            cursor: pointer;
            box-shadow: 0 0 5px var(--accent-cyan);
        }
        
        /* REWORKED MOBILE MENU CSS (Holographic Modal) 
           Positioned fixed relative to viewport, covering everything.
        */
        #mobile-menu {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #0000007a; /* High opacity background */
            backdrop-filter: blur(10px); /* Glass effect */
            z-index: 9999; /* Highest priority */
            
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            
            /* Transition States */
            opacity: 0;
            pointer-events: none; /* Allows clicking through when hidden */
            transform: scale(0.95); /* Start slightly zoomed out */
            transition: opacity 0.3s ease-in-out, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        #mobile-menu.open {
            opacity: 1;
            pointer-events: auto; /* Re-enable clicks */
            transform: scale(1);
        }

        /* Decorative border for the menu container */
        .menu-border {
            position: absolute;
            inset: 20px;
            border: 2px solid rgba(34, 211, 238, 0.3);
            pointer-events: none;
            box-shadow: 0 0 30px rgba(34, 211, 238, 0.1);
        }

        /* Glowing effect on menu links */
        .mobile-nav-link {
            transition: all 0.3s ease;
            position: relative;
        }
        
        .mobile-nav-link:hover {
            color: var(--accent-cyan);
            text-shadow: 0 0 15px rgba(34, 211, 238, 0.8);
            transform: scale(1.1);
            letter-spacing: 2px;
        }
        
        .text-ex1 { font-size:10px !important; }
        .text-xl { font-size: 14px !important; }
        @media (max-width: 320px) {
        .text-2xl { font-size: 1.0rem !important; line-height: 2rem; }
        }
        @media (min-width: 321px) {
        .text-2xl { font-size: 1.3rem !important; line-height: 2rem; }
        }
        .text-3xl { font-size: 1.4rem !important;line-height: 2.3rem !important; }
        .nav-link { font-family: 'Orbitron'; font-size: 13px; }

/* =============================
   SHOPEN V2.0.0 LOCALIZATION UI
   ============================= */

.locale-select {
    min-width: 145px;
    background: #080808;
    color: #22d3ee;
    border: 1px solid rgba(34,211,238,.85);
    padding: .5rem .65rem;
    border-radius: .125rem;
    font-family: Orbitron, sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    outline: none;
}
.locale-select:focus { box-shadow: 0 0 10px rgba(34,211,238,.35); }

#region-prompt {
    display: none;
}
#region-prompt.show {
    display: block;
}
.region-card {
    border: 1px solid rgba(34,211,238,.55);
    background: rgba(8,8,8,.94);
    box-shadow: 0 0 20px rgba(34,211,238,.10);
}
.region-actions button {
    font-family: Orbitron, sans-serif;
    font-size: 11px;
    letter-spacing: .06em;
}

#install-app-btn,
#update-app-btn {
    position: fixed;
    bottom: 76px;
    right: 18px;
    display: none;
    z-index: 9998;
    border: 1px solid #22d3ee;
    background: #22d3ee;
    color: #000;
    font-family: Orbitron, sans-serif;
    font-weight: 900;
    font-size: 11px;
    letter-spacing: .04em;
    padding: 10px 14px;
    border-radius: 3px;
    box-shadow: 0 0 15px rgba(34,211,238,.35);
}
#install-app-btn:hover,
#update-app-btn:hover { box-shadow: 0 0 22px rgba(34,211,238,.55); }
#update-app-btn { right: 18px; bottom: 124px; }

[dir="rtl"] .contact-panel {
    border-left: 0 !important;
    border-right: 1px solid rgba(75,85,99,.5) !important;
    padding-left: 0 !important;
    padding-right: 1.5rem !important;
}
[dir="rtl"] .locale-inline-icon { margin-right: 0 !important; margin-left: .5rem !important; }
[dir="rtl"] #install-app-btn, [dir="rtl"] #update-app-btn { right: auto; left: 18px; }

@media (max-width: 767px) {
    .desktop-language-block { display:none !important; }
    .locale-select { min-width: 160px; font-size: 10px; }
    #install-app-btn { bottom: 86px; right: 12px; }
    #update-app-btn { bottom: 130px; right: 12px; }
    [dir="rtl"] #install-app-btn, [dir="rtl"] #update-app-btn { left: 12px; }
}

/* Keep the player clear of iOS safe-area and PWA display cutouts. */
#fixed-player { padding-bottom: calc(.75rem + env(safe-area-inset-bottom)); }
body { padding-bottom: calc(3.5rem + env(safe-area-inset-bottom)); }

/* Make localized long labels wrap instead of breaking the neon layout. */
.nav-link { white-space: nowrap; }
.locale-link-current { color: var(--accent-cyan) !important; font-weight: 900; }

/* Offline page */
.offline-wrap { min-height: 75vh; display:flex; align-items:center; justify-content:center; }
.offline-card { max-width: 780px; width:100%; border:1px solid rgba(34,211,238,.55); background:#080808; box-shadow:0 0 28px rgba(34,211,238,.12); padding:2rem; }
.offline-card h1 { color:#22d3ee; }