/* 1. Definizioni variabili */
    :root { 
        --accent: #00f2ff; 
        --red: #e50914; 
        --bg: #050505; 
        --slag: #8b4513;
    }

   /* 2. Regole per il Body & Html (Anti-Zoom Bug su Mobile Back) */
    html, body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        scrollbar-gutter: stable;
    }

    body { 
        background: var(--bg) !important; /* Forza il nero */
        color: white; 
        font-family: -apple-system, BlinkMacSystemFont, sans-serif; 
        padding: 0; 
        margin: 0; 
        -webkit-tap-highlight-color: transparent;
        display: none; /* Ora è dentro le parentesi, quindi funziona! */ 
        scrollbar-gutter: stable;
        position: relative;
    }

        
        /* NAVBAR */
        .nav-bar { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background: none; padding: 10px; box-sizing: border-box; transition: transform 0.3s; }
        .nav-bar.hidden { transform: translateY(-110%); }
        .search-form { display: flex; align-items: center; background: #1a1a1a; border-radius: 12px; padding: 0 12px; height: 46px; gap: 2px; border: 1px solid #333; position: relative; }
       .search-form:focus-within { box-shadow: 0 0 12px 4px rgba(255, 255, 255, 0.2) !important; border-color: rgba(255, 255, 255, 0.2) !important; }
.logo-link { 
    text-decoration: none; 
    display: flex; 
    align-items: center;
    flex-shrink: 0; 
    cursor: pointer; 
    padding: 0 8px; /* Spazio laterale */
    transition: all 0.2s ease-in-out;
    width: auto; 
    overflow: hidden; /* Fondamentale per farlo sparire */
}

/* Questa è queella che pulisce tutto quando cerchi */
.logo-hidden { 
    width: 0 !important; 
    opacity: 0 !important; 
    padding: 0 !important; 
    margin: 0 !important; 
    pointer-events: none; 
}

.logo { font-weight: 900; font-size: 16px; letter-spacing: -1px; color: white; user-select: none; }
.logo span { color: var(--red); }
        
        input[type="search"] { background: transparent; border: none; color: white; flex-grow: 1; outline: none; font-size: 16px; width: 100%; -webkit-appearance: none; }
        
        /* TASTO X PER CANCELLARE */
 /* Ripristiniamo la semplicità: il flex centra tutto naturalmente */
.clear-search { 
    display: none; 
    color: var(--red); 
    cursor: pointer; 
    padding: 0 3px; 
    
    align-items: center; 
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
}

        /* Rimuove la X nativa dei browser (Chrome, Safari, Edge) */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration { 
    display: none; 
}
        
        /* FILTRI */
        .filter-icons { display: flex; gap: 12px; align-items: center; border-left: 1px solid #333; padding-left: 10px; height: 24px; }
        .f-icon { cursor: pointer; opacity: 0.2; font-size: 18px; filter: grayscale(1); transition: 0.2s; }
        .f-icon.active { opacity: 1; filter: grayscale(0); }

        /* BACK TO TOP */
        #back-to-top {
            position: fixed; bottom: 85px !important; right: 25px; width: 45px; height: 45px;
            background: solid var(--red); border: none; color: var(--red);
            border-radius: 50%; display: none; align-items: center; justify-content: center;
            z-index: 2000; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            font-size: 18px; transition: opacity 0.3s;
        }


/* Nuovo bottone switch */
#view-switch {
    position: fixed;
    bottom: 25px;
    right: 25px;!important;
    /* Se è ancora spostato, è perché un 'transform' o un 'margin' ereditato lo sta spingendo */
    margin: 0 !important;
    width: 45px;
    height: 45px;
    background: solid var(--red); border: none; color: var(--red);
            border-radius: 50%; display: none; align-items: center; justify-content: center;
            z-index: 2000; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
            font-size: 18px; transition: opacity 0.3s;
}
#view-switch:hover { background: var(--accent); color: #000; }

 /* GRID */
.content { padding: 75px 15px 20px; }
h2 { 
    font-size: 9px; 
    text-transform: uppercase; 
    letter-spacing: 2px; 
    color: #555; 
    margin: 25px 0 15px 0;  
    padding-left: 10px; 
    display: inline-block; 
}

.grid { 
    display: grid !important; 
    grid-template-columns: repeat(auto-fill, 170px) !important; 
    justify-content: center !important; 
    gap: 15px !important; 
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

/* 3. Mobile: riempimento fluido e senza sforzi di centratura */
@media (max-width: 767px) {
    .grid { 
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important; 
        justify-content: stretch !important; /* AGGIUNTA FONDAMENTALE */
    }
    .sd-submenu-wrapper {
        margin-top: 43px !important; /* Aumentato di 23px rispetto ai 20px base per dare aria */
    }
}

        .movie-card { 
            text-decoration: none; 
            color: white; 
            position: relative; 
            display: block; 
            text-align: center; 
            scroll-margin-top: 100px; 
        }

        .movie-card img { 
            width: 100%; 
            aspect-ratio: 2/3; 
            border-radius: 10px; 
            object-fit: cover; 
            background: #111; 
            border: 1px solid #1a1a1a; 
        }

        .movie-title { 
            margin-top: 8px; 
            font-size: 13px; 
            font-weight: bold; 
            white-space: nowrap; 
            overflow: hidden; 
            text-overflow: ellipsis; 
            opacity: 0.8; 
            font-weight: 600;
        }

        .badge { 
            position: absolute; 
            top: -6px; 
            right: -6px; 
            padding: 4px 8px; 
            border-radius: 6px; 
            font-size: 13px; 
            z-index: 5; 
            background: #000; 
            font-weight: 900; 
            border: 1px solid; 
            display: flex; 
            align-items: center; 
            gap: 4px; 
        }

        .badge.diamond { color: var(--accent); border-color: #293133; }
        .badge.slag { color: var(--slag); border-color: #293133; }

        /* MODALE INFO - AGGIORNATA PER MANIFESTO LUNGO */
       .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.98); z-index: 999999999; display: none; justify-content: center; align-items: center; overflow: hidden !important; backdrop-filter: blur(15px); opacity: 0; transition: opacity 0.4s ease; }
.modal-overlay.show { display: flex; opacity: 1; }

.modal-content {
width: 90%;
max-width: 650px;
max-height: 85vh !important;

font-family: -apple-system, BlinkMacSystemFont, sans-serif;
color: #bbb;
font-size: 15px;
line-height: 1.6;
position: relative;
display: flex !important;
flex-direction: column !important;
overflow-y: auto !important;
}
        
        .modal-content h1 { color: var(--accent); font-size: 26px; font-weight: 900; border-bottom: 2px solid var(--red); padding-bottom: 10px; margin-bottom: 25px; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
        .modal-content h1 span { color: var(--red); }
        
       .box { 
    border: 1px solid #222; 
    padding: 15px; 
    margin-bottom: 20px; 
    background: rgba(255,255,255,0.03); 
}

.step { 
    margin-bottom: 25px; 
    padding-left: 15px; 
    border-left: 1px solid #333; 
}

.close-modal { 
    position: fixed; 
    top: 10px; 
    left: 16px; 
    right: auto; 
    color: #fff; 
    background: var(--red); 
    width: 45px; 
    height: 45px; 
    border-radius: 50%; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    z-index: 3100; 
    cursor: pointer;
    border: none;
    outline: none;
    transition: transform 0.2s ease;
}

/* Regola per l'SVG dentro il cerchio */
.close-modal svg {
    width: 20px;
    height: 20px;
    display: block;
    pointer-events: none;
}

.close-modal:active {
    transform: scale(0.9);
}
     /* Allineamento titolo e contatore */
/* Allineamento titolo e contatore - AGGIORNATO +27% */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline; 
    padding-right: 15px;
    margin-bottom: 23px; /* Leggermente aumentato per dare respiro */
    padding: 12px 0;    /* Leggermente aumentato */
}

#total-criticati {
    font-size: 12px;      /* Aumentato da 11px a 14px (+27%) */
    font-weight: 600;
    color: white;
    opacity: 0.4;
    letter-spacing: 1.2px; /* Scalato proporzionalmente */
    margin: 0; 
    line-height: normal;
    padding-left: 23px !important;
}

/* FORZATURA TOTALE PER LA TARGA */
.last-added-targa {
    font-size: 12px !important;
    padding: 8px 16px !important;
    display: inline-block !important;
    line-height: normal !important;
}
/* UNIFORMAZIONE TITOLI */
#last-added-targa, 
#titolo-risultati {
    font-size: 12px !important; /* Entrambi uguali */
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0 !important;
    line-height: 1.5;
    padding: 0 !important;
    display: block; /* Mantiene la coerenza del blocco */
}

#last-added-targa:hover {
    color: white !important; /* Diventa bianco al passaggio del mouse */
    opacity: 1 !important;
}
#titolo-risultati {
    color: #555; /* Manteniamo il colore che avevi prima per i risultati */
    padding-left: 10px !important;
}
        /* Semplice linea di caricamento sotto la navbar */
#loading-bar {
    position: fixed;
    top: 66px; /* Sotto la tua navbar */
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--accent);
    z-index: 1001;
    transition: width 0.3s, opacity 0.3s;
    box-shadow: 0 0 10px var(--accent);
    display: none;
}
 
/* 1. Regole base per lo scroll fluido nativo */
html {
    scroll-behavior: smooth;
}

/* 2. Prepara le card e gestisce la transizione vellutata */
.movie-card {
    transition: transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), 
                box-shadow 0.8s cubic-bezier(0.19, 1, 0.22, 1) !important;
    scroll-margin-top: 150px; /* Centra la card verticalmente al click */
}

/* 3. Stato attivo: attivato SOLO dalla classe */
.highlight-card {
    transform: scale(1.08) !important;
    box-shadow: 0 0 30px 10px rgba(229, 9, 20, 0.75) !important;
    z-index: 9999;
}

strong {
    color: #ffffff !important; /* Bianco puro */
    font-weight: 700;          /* Grassetto deciso */
    opacity: 1 !important;     /* Opacità totale */
}



/* --- BLOCCO ISOLATO: BOTTONE CAMBIO LINGUA --- */
.sd-lang-wrapper {
    position: fixed !important;
    top: 15px !important;
    right: 15px !important; /* Adatta 1200px alla larghezza del tuo contenitore */
    left: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    z-index: 999999 !important;
    pointer-events: none !important;
    box-sizing: border-box !important;
}


.sd-lang-link {
    color: var(--accent) !important;
    text-decoration: none !important;
    font-size: 11px !important;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif !important;
    border: 1px solid var(--accent) !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    background: rgba(0, 242, 255, 0.05) !important;
    transition: 0.2s ease-all !important;
    cursor: pointer !important;
    line-height: normal !important;
    pointer-events: auto !important;
}

.sd-lang-link:hover {
    background: var(--accent) !important;
    color: #000 !important;
    box-shadow: 0 0 15px rgba(0, 242, 255, 0.4) !important;
}


/* La label "a cavallo" del bordo */
#active-filter-label {
    position: absolute;
    bottom: -10px; /* La metà esatta dell'etichetta fuori dal bordo */
    left: 50%;
    transform: translateX(-50%);
    background: #111; /* Grigio quasi nero, molto discreto */
    color: var(--accent);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 9px !important;
    font-weight: 300 !important;
    text-transform: uppercase;
    padding: 1px 8px;
    border-radius: 4px;
    white-space: nowrap;
    display: none;
    letter-spacing: 1px;
    z-index: 2000;
}

#active-filter-label.show { display: block; }

/* Nasconde solo il colore/aspetto, mantenendo intatte le dimensioni del browser */
::-webkit-scrollbar {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: transparent !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

/* Per Firefox */
* {
    scrollbar-color: transparent transparent !important;
}