/* =================================================================
   FILE: assets/css/mobile.css
   VERSIONE: STABILIZZATORE UNIVERSALE (Pink/Glass Theme)
   ================================================================= */

/* -----------------------------------------------------------------
   1. RESET & SICUREZZA LAYOUT
   ----------------------------------------------------------------- */
html, body {
    overflow-x: hidden !important; /* Impedisce scroll orizzontale indesiderato */
    width: 100%;
    min-width: 320px;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent; /* Rimuove flash blu al tocco */
}

/* Spazio extra in basso per la Mobile Nav Bar */
body {
    padding-bottom: 80px !important; 
    background-attachment: scroll !important; /* Fix lag scroll su mobile */
}

/* Immagini fluide ovunque */
img, video, iframe, .video-container {
    max-width: 100%;
    height: auto;
}

/* -----------------------------------------------------------------
   2. HEADER & NAVIGAZIONE
   ----------------------------------------------------------------- */
@media (max-width: 1024px) {
    .header {
        height: 60px !important;
        padding: 0 !important;
        position: sticky;
        top: 0;
    }

    .header-inner {
        padding: 0 10px !important;
        width: 100% !important;
        gap: 10px !important;
    }

    /* Logo compatto */
    .logo .text-logo {
        font-size: 16px !important; /* Ridotto per stare in una riga */
    }
    .logo-badge-18 {
        font-size: 7px !important;
        padding: 1px 3px !important;
        top: -5px !important;
    }

    /* Nascondi elementi desktop superflui */
    .main-nav, 
    .header-right .btn-auth {
        display: none !important;
    }

    /* Search Bar ottimizzata per mobile */
    .header-right {
        gap: 10px !important;
        flex: 1; /* Prende lo spazio rimanente */
        justify-content: flex-end;
    }
    
    .search-form-container {
        position: static; /* Permette al dropdown di allargarsi */
    }

    .search-wrapper {
        width: auto !important;
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
    }

    /* Input search espandibile o piccolo */
    .search-input {
        width: 120px !important; 
        background: rgba(255,255,255,0.1) !important;
        border-radius: 20px !important;
        padding: 5px 10px !important;
        font-size: 13px !important;
        transition: width 0.3s ease;
    }
    .search-input:focus {
        width: 160px !important; /* Si allarga al focus */
        background: #000 !important;
        border: 1px solid var(--pink-accent) !important;
    }
    .btn-search-submit { display: none !important; }

    /* Dropdown risultati ricerca mobile */
    .search-suggestions-dropdown {
        top: 60px !important;
        width: 100% !important;
        left: 0 !important;
        border-radius: 0 0 15px 15px !important;
    }
}

/* -----------------------------------------------------------------
   3. MOBILE NAV BAR (Fissa in basso)
   ----------------------------------------------------------------- */
@media (max-width: 1024px) {
    .mobile-nav-bar {
        display: flex !important;
        height: 65px;
        background: rgba(10, 5, 8, 0.98) !important; /* Sfondo scuro quasi opaco */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border-top: 1px solid rgba(214, 93, 122, 0.3) !important;
        padding-bottom: env(safe-area-inset-bottom); /* Fix iPhone X+ */
        z-index: 99999 !important;
        box-shadow: 0 -5px 20px rgba(0,0,0,0.7);
    }

    .mobile-nav-bar a {
        flex: 1;
        font-size: 10px !important;
        color: #888 !important;
    }
    
    .mobile-nav-bar a i {
        font-size: 1.4rem !important;
        margin-bottom: 4px;
        color: #aaa;
    }

    .mobile-nav-bar a.active i,
    .mobile-nav-bar a:hover i {
        color: #ff0055 !important;
        text-shadow: 0 0 10px rgba(255, 0, 85, 0.6);
        transform: translateY(-2px);
    }
}

/* -----------------------------------------------------------------
   4. HOME PAGE (index.php) FIX
   ----------------------------------------------------------------- */
@media (max-width: 900px) {
    /* Hero Section */
    .hero-carousel-container {
        height: 50vh !important; /* Altezza dinamica */
        min-height: 350px;
        max-height: 500px;
    }

    .hero-content {
        padding-left: 20px !important;
        padding-right: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center;
        top: 50% !important;
        transform: translateY(-50%) !important;
    }

    .hero-content h1 {
        font-size: 1.8rem !important; /* Testo più piccolo */
    }
    
    .hero-description {
        font-size: 0.9rem !important;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Max 3 righe */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Nascondi poster 3D su mobile (troppo pesante/ingombrante) */
    .hero-poster { display: none !important; }

    /* Bottoni Hero */
    .hero-actions {
        justify-content: center !important;
        flex-direction: column; /* Bottoni uno sotto l'altro */
        gap: 10px !important;
    }
    .btn-primary-hero, .btn-secondary-hero {
        width: 100%;
        justify-content: center;
        padding: 12px !important;
    }

    /* Master Glass Panel Reset */
    .master-glass-panel {
        margin-top: 0 !important;
        width: 100% !important;
        border-radius: 0 !important;
        padding: 30px 10px !important;
        background: rgba(10, 5, 8, 0.9) !important; /* Meno trasparente su mobile per performance */
    }

    /* Carousel Orizzontali (Scroll Snap) */
    .scroll-container {
        padding: 0 10px !important;
    }
    .carousel, .scroll-content {
        gap: 10px !important;
        scroll-snap-type: x mandatory; /* Snap fluido */
    }
    .card, .mini-anime-card {
        scroll-snap-align: start;
        flex: 0 0 140px !important; /* Card leggermente più piccole */
        width: 140px !important;
    }
    /* Nascondi frecce su mobile (si usa il dito) */
    .scroll-button { display: none !important; }
}

/* -----------------------------------------------------------------
   5. PLAYER PAGE (player.php) FIX
   ----------------------------------------------------------------- */
@media (max-width: 1100px) {
    .player-main {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .player-flex-container {
        display: flex !important;
        flex-direction: column;
        gap: 15px !important;
    }

    /* Video Player Full Width */
    .video-wrapper {
        border-radius: 0 !important; /* Video squadrato su mobile */
        margin-bottom: 10px !important;
        border-left: none !important;
        border-right: none !important;
    }

    /* Controlli Player */
    .player-controls {
        flex-wrap: wrap;
        padding: 10px !important;
        gap: 10px !important;
    }
    .btn-nav {
        flex: 1; /* Bottoni si allargano */
        justify-content: center;
        font-size: 0.9rem !important;
        padding: 10px !important;
    }

    /* Lista Episodi (Grid ottimizzata) */
    .ep-grid {
        grid-template-columns: repeat(auto-fill, minmax(55px, 1fr)) !important;
        max-height: 250px !important; /* Meno alto su mobile */
        padding: 10px !important;
    }
    .ep-btn {
        padding: 12px 0 !important; /* Area tocco più grande */
        font-size: 0.95rem !important;
    }

    /* Sidebar diventa blocco sotto */
    .player-column-right {
        padding: 0 10px 20px;
    }
    
    /* Box Download */
    .download-section {
        margin: 0 10px 20px !important;
    }
}

/* -----------------------------------------------------------------
   6. PROFILO (profilo.php) FIX
   ----------------------------------------------------------------- */
@media (max-width: 900px) {
    .profile-container {
        padding-top: 20px !important; /* Meno spazio top perché header è sticky */
        padding-bottom: 90px !important;
    }

    .glass-panel {
        min-height: auto !important;
        border-radius: 0 !important; /* Full width */
        border: none !important;
    }

    .hero-banner { height: 150px !important; }

    .profile-header { margin-top: 60px !important; }
    
    .avatar-box {
        width: 110px !important; 
        height: 110px !important;
    }

    .username { font-size: 1.8rem !important; }

    /* Statistiche: Da 5 colonne a 2 colonne (più leggibile) */
    .stats-area {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        padding: 0 10px !important;
    }
    /* L'ultimo elemento dispari lo facciamo full width */
    .stats-area .stat-card:last-child {
        grid-column: span 2;
    }

    /* Tabs */
    .tabs-nav { gap: 15px !important; }
    .tab-btn { font-size: 0.9rem !important; }

    /* Slider Liste (Da 5 a 2 elementi per riga) */
    .slide-group {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .h_anime-card-block {
        height: auto !important;
    }
    .poster-wrap {
        aspect-ratio: 2/3 !important;
    }

    /* Modale */
    .modal-box {
        width: 100% !important;
        height: 100% !important;
        max-width: none !important;
        border-radius: 0 !important;
    }
    .modal-body {
        overflow-y: auto;
    }
    .modal-scroll-area {
        flex-wrap: wrap; /* Le card vanno a capo */
        justify-content: center;
    }
}

/* -----------------------------------------------------------------
   7. DETTAGLI (dettagli.php) FIX
   ----------------------------------------------------------------- */
@media (max-width: 900px) {
    .details-hero {
        min-height: 350px !important;
        padding: 20px !important;
        border-radius: 0 !important;
    }

    .details-layout {
        grid-template-columns: 1fr !important; /* Colonna singola */
        gap: 20px !important;
        padding: 0 10px !important;
    }

    /* User Band (Tasto Play) */
    .details-user-inner {
        padding: 0 !important;
    }
    .btn-play-main {
        width: 100%;
        justify-content: center;
        padding: 15px !important;
        font-size: 1.1rem !important;
    }

    /* Metadata Grid */
    .metadata {
        grid-template-columns: 1fr 1fr !important; /* 2 colonne */
    }
    
    /* Stats Row (Voti) */
    .stats-row {
        flex-wrap: wrap;
    }
    .stat-item {
        flex: 1 1 45% !important; /* 2 per riga */
        margin-bottom: 5px;
    }

    /* Commenti */
    .details-comments-band {
        padding: 15px !important;
        margin: 10px !important;
        border-radius: 12px !important;
    }
}

/* -----------------------------------------------------------------
   8. ARCHIVIO (archive.php) FIX
   ----------------------------------------------------------------- */
@media (max-width: 900px) {
    .archive-header h1 { font-size: 2rem !important; }
    
    .archive-layout {
        display: flex !important;
        flex-direction: column;
    }

    /* Sidebar Filtri: Meno invadente */
    .filter-sidebar {
        position: static !important;
        margin-bottom: 20px !important;
        padding: 15px !important;
        border: 1px solid var(--pink-accent) !important;
    }
    
    /* Scroller Alfabetico */
    .alphabet-scroller {
        padding: 10px !important;
        overflow-x: auto; /* Scroll orizzontale */
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
    }
    .alpha-pill {
        flex: 0 0 auto;
    }

    /* Griglia Anime: 2 Colonne fisse (Migliore di 1) */
    .h_anime-grid {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 10px !important;
    }
    
    .anime-card {
        box-shadow: 0 2px 5px rgba(0,0,0,0.5) !important;
    }
    
    /* Riduci testo card */
    .card-info { padding: 8px !important; }
    .card-title-text { font-size: 0.85rem !important; }
    .card-meta { font-size: 0.75rem !important; }
}

/* -----------------------------------------------------------------
   9. FOOTER FIX
   ----------------------------------------------------------------- */
@media (max-width: 768px) {
    .footer-modern {
        padding-top: 30px !important;
        padding-bottom: 80px !important; /* Spazio per la nav bar */
        text-align: center !important;
    }
    .footer-container {
        flex-direction: column;
        gap: 25px;
    }
    .footer-social-col { text-align: center !important; }
    .social-icons { justify-content: center; }
}