/* ==========================================================
   MOBILE STYLES (mobile.css)
   ========================================================== */
@media (max-width: 768px) {
    /* RESTORED GLASSY TRANSLUCENT HEADER */
    header {
        position: sticky !important; top: 0 !important; height: 55px !important;
        padding: 0 15px !important; box-sizing: border-box !important;
        background: linear-gradient(135deg, rgba(22, 22, 22, 0.25) 0%, rgba(13, 13, 13, 0.3) 100%) !important;
        backdrop-filter: blur(10px) !important; border-bottom: 1px solid rgba(255, 102, 0, 0.15) !important;
        z-index: 10000 !important;
    }
    
    nav { height: 55px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding: 0 !important; margin: 0 !important; }
    
    /* LOGO RTL ALIGNMENT FIX */
    .logo, .logo a { display: flex !important; align-items: center !important; height: 100% !important; margin: 0 !important; padding: 0 !important; }
    [dir="rtl"] nav .logo a, [dir="rtl"] nav a.logo { margin-right: 0 !important; margin-left: 0 !important; }
    .logo img { height: 38px !important; max-height: 38px !important; width: auto !important; display: block !important; margin: 0 !important; }

    /* HAMBURGER BUTTON */
    .hamburger-menu {
        display: flex !important; flex-direction: column; justify-content: space-between;
        width: 30px; height: 22px; background: transparent !important; border: none !important;
        cursor: pointer !important; padding: 0 !important; z-index: 10005 !important;
    }
    .hamburger-menu .bar { width: 100%; height: 3px; background-color: #ffffff; border-radius: 4px; transition: all 0.3s ease; }
    .hamburger-menu.active .bar:nth-child(1) { transform: translateY(9.5px) rotate(45deg); }
    .hamburger-menu.active .bar:nth-child(2) { opacity: 0; }
    .hamburger-menu.active .bar:nth-child(3) { transform: translateY(-9.5px) rotate(-45deg); }

    /* THE MENU OVERLAY - FULL SCREEN RTL FIX */
    .nav-right {
        display: flex !important;
        position: fixed !important; top: 55px !important; left: 0 !important; right: 0 !important;
        width: 100% !important; max-width: 100% !important; height: calc(100vh - 55px) !important;
        margin: 0 !important; /* KILLS THE RTL GAP SHIFT */
        background: rgba(10, 10, 10, 0.98) !important; backdrop-filter: blur(15px) !important;
        flex-direction: column !important; align-items: center !important; justify-content: flex-start !important;
        padding-top: 40px !important; z-index: 9999 !important; overflow-x: hidden !important; overflow-y: auto !important;
        
        opacity: 0 !important;
        pointer-events: none !important;
        transform: translateY(-20px) !important;
        transition: all 0.3s ease !important;
    }
    [dir="rtl"] .nav-right { margin-right: 0 !important; margin-left: 0 !important; }
    
    .nav-right.active {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    .nav-right > a, .nav-right .dropdown { width: 100% !important; text-align: center !important; display: flex !important; flex-direction: column !important; align-items: center !important; }
    .nav-right > a, .nav-right .dropdown > button { font-size: 1.1rem !important; letter-spacing: 2px !important; background: transparent !important; border: none !important; box-shadow: none !important; margin: 5px 0 !important; padding: 12px 0 !important; color: #f5f5f5 !important; }
    
    .nav-right .dropdown-content { position: static !important; background: transparent !important; box-shadow: none !important; border: none !important; width: 100% !important; display: flex !important; flex-direction: column !important; max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
    .nav-right .dropdown:hover .dropdown-content, .nav-right .dropdown:active .dropdown-content, .nav-right .dropdown:focus-within .dropdown-content { max-height: 250px !important; }
    .nav-right .dropdown-content a { padding: 8px 0 !important; color: #aaaaaa !important; font-size: 0.95rem !important; border: none !important; }
    
    #hero h1 { font-size: 2.2rem !important; line-height: 1.2; }
    #hero h2 { font-size: 0.95rem !important; padding: 0 10px; }
    .service-grid, .gallery-grid { grid-template-columns: 1fr !important; gap: 15px; }
    .wizard-content { width: 92% !important; padding: 20px 15px !important; }
    .music-player-widget { bottom: 15px !important; left: 15px !important; max-width: 170px !important; min-height: 45px !important; padding: 6px 10px !important; }
    .music-toggle-btn { width: 30px !important; height: 30px !important; }

    /* --- ARTIST PROFILE MOBILE FIXES (FORCED FULL SIZE) --- */
    .artist-profile {
        flex-direction: column !important;
        display: flex !important;
        padding: 20px 10px !important;
        margin-top: 10px !important;
        align-items: center !important;
    }
    
    .artist-image {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-bottom: 25px !important;
    }
    
    .artist-image img {
        width: 90vw !important;
        max-width: 400px !important;
        height: auto !important;
        max-height: 450px !important;
        object-fit: cover !important;
        border-radius: 12px !important;
        box-shadow: 0 15px 40px rgba(0,0,0,0.9) !important;
        border: 1px solid rgba(255, 102, 0, 0.4) !important;
        display: block !important;
        margin: 0 auto !important;
    }
    
    .artist-bio {
        background: linear-gradient(135deg, rgba(15,15,15,0.95) 0%, rgba(5,5,5,0.98) 100%) !important;
        backdrop-filter: blur(15px) !important;
        -webkit-backdrop-filter: blur(15px) !important;
        padding: 30px 20px !important;
        border-radius: 12px !important;
        border: 1px solid rgba(255, 102, 0, 0.3) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8) !important;
        width: 100% !important;
        max-width: 500px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    .artist-bio h1 { font-size: 2.2rem !important; margin-bottom: 5px !important; }
    .artist-bio h2 { color: #ff6600 !important; font-size: 1.1rem !important; margin-bottom: 15px !important; }
    .artist-bio p { font-size: 1rem !important; color: #e0e0e0 !important; }
}