/* web.css — stili SOLO web (caricato dalla shell PHP, mai dal nativo).
   Sotto i 992px l'app resta identica alla shell mobile (bottom nav);
   da 992px in su compare il chrome desktop: header in alto + footer.
   NB: questo file è iniettato PRIMA dei css nativi, quindi le regole che
   devono vincere su mobile.css (es. `.header{display:none}`) usano
   body.ty-web + !important. */

/* ------------------------------------------------------------------ *
 * Correzioni web valide a ogni larghezza
 * ------------------------------------------------------------------ */

/* la webview mobile disabilita la selezione del testo: sul web si riabilita */
html, body {
    user-select: auto !important;
    -webkit-user-select: auto !important;
}

/* freccia "indietro" (collezioni/categorie): su web il back
   è gestito dal browser/router, la freccia coprirebbe il titolo.
   Eccezioni: .video-back-btn nella pagina video resta sempre visibile
   perché su web non c'è un back gesture affidabile; dentro l'app
   Capacitor (html.ty-native) la freccia resta ovunque, come da shell
   nativa */
html:not(.ty-native) body.ty-web .page-back-btn:not(.video-back-btn) {
    display: none !important;
}


/* funzionalità native non disponibili sul web.
   Guardia html:not(.ty-native): se la shell web viene caricata DENTRO
   l'app Capacitor (vedi lo script in index.html) queste regole non si
   applicano — la tab Download resta visibile anche da non loggati,
   esattamente come Preferiti. */
html:not(.ty-native) .menu-item[rel="download"],          /* tab Downloads (filesystem nativo) */
html:not(.ty-native) .headerSearchMicrophoneIcon,         /* ricerca vocale (plugin speech) */
html:not(.ty-native) .mobile-chromecast,                  /* cast header (plugin nativo) */
html:not(.ty-native) .controlButtonCast,                  /* cast tra le azioni del video */
html:not(.ty-native) [onclick^="startDownloadContentBatch"],                          /* bottoni Download (video e collection) */
html:not(.ty-native) .downloadedVideoMultiple,                                        /* Download collection (anche se il CTA punta al checkout) */
html:not(.ty-native) [class*="downloadedVideo-"],                                     /* stati Download/Downloaded per singolo video */
html:not(.ty-native) .container-box-flex[onclick*="rateTheApp"],                      /* store rating */
html:not(.ty-native) .container-box-flex[onclick*="createModalBoxStreamsAndDownload"] /* qualità download/storage */ {
    display: none !important;
}

/* toast DOM che sostituisce il plugin nativo (vedi js/web.js) */
.ty-web-toast {
    position: fixed;
    left: 50%;
    bottom: 42px;
    transform: translateX(-50%) translateY(12px);
    background: rgba(20, 20, 20, .92);
    color: #fff;
    padding: 10px 18px;
    border-radius: 22px;
    font-size: 14px;
    z-index: 2147483000;
    opacity: 0;
    transition: opacity .25s ease, transform .25s ease;
    max-width: 82vw;
    text-align: center;
    pointer-events: none;
}
.ty-web-toast-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* header/footer desktop nascosti di default (mobile-first) */
.ty-web-header,
.ty-web-footer {
    display: none;
}

/* ------------------------------------------------------------------ *
 * Desktop (>=992px): via la shell mobile, dentro header + footer
 * ------------------------------------------------------------------ */
@media (min-width: 992px) {

    .header-mobile-native,
    .navbar-mobile-native,
    .notch-element-cover {
        display: none !important;
    }

    body.ty-web {
        padding-top: 0;
        padding-bottom: 0 !important;
        /* le frecce esterne dei carousel possono sbordare oltre il bordo
           pagina alle larghezze minori: niente scrollbar orizzontale */
        overflow-x: hidden;
    }

    /* niente padding sul body (l'header al top è trasparente e "galleggia"
       sul contenuto): lo spazio per l'header lo dà la sezione pagina.
       Su web niente altezza minima da app (min-height:100vh di mobile.css)
       né padding in fondo per la navbar: creavano una banda vuota prima
       del footer, anche a pagina senza sezioni */
    body.ty-web .pageMob {
        padding-top: 64px !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
    }

    /* -------- header -------- */
    body.ty-web .ty-web-header {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        height: 64px;
        z-index: 1200;
        background: transparent;
        transition: background .25s ease, box-shadow .25s ease;
    }
    body.ty-web .ty-web-header.ty-web-header-solid {
        box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
        backdrop-filter: blur(16px) saturate(1.4);
        -webkit-backdrop-filter: blur(16px) saturate(1.4);
    }
    .ty-web-header-inner {
        display: flex;
        align-items: center;
        gap: 24px;
        height: 100%;
        max-width: 1440px;
        margin: 0 auto;
        padding: 0 24px;
    }
    .ty-web-logo {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        text-decoration: none;
        color: inherit;
    }
    .ty-web-logo-img {
        max-height: 34px;
        max-width: 160px;
        display: block;
    }
    .ty-web-logo-label {
        font-size: 17px;
        font-weight: 700;
    }

    /* nav principale: voci a pillola, attiva con sfondo pieno (Netflix) */
    .ty-web-nav {
        display: flex;
        align-items: center;
        gap: 6px;
        flex: 1;
        min-width: 0;
        height: 100%;
    }
    .ty-web-nav > div {
        position: relative;
        display: flex;
        align-items: center;
        height: 38px;
        padding: 0 16px;
        border-radius: 999px;
        cursor: pointer;
        white-space: nowrap;
        transition: background .15s ease;
    }
    .ty-web-nav-label {
        display: inline-flex;
        align-items: center;
        gap: 3px;
        font-size: 14.5px;
        opacity: .92;
        transition: opacity .15s ease;
    }
    .ty-web-nav > div:hover > .ty-web-nav-label,
    .ty-web-nav > div.active > .ty-web-nav-label {
        opacity: 1;
    }
    .ty-web-nav > div.active > .ty-web-nav-label {
        font-weight: 700;
    }
    /* il dropdown si aggancia sotto la pillola; il ::after fa da ponte
       invisibile così l'hover non si interrompe nel gap */
    .ty-web-nav .ty-web-dd-menu {
        top: calc(100% + 13px);
        border-radius: 10px;
    }
    .ty-web-dd::after {
        content: '';
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        height: 14px;
    }

    /* dropdown (hover) */
    .ty-web-dd-menu {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 210px;
        max-height: 70vh;
        overflow-y: auto;
        /* stesso vetro delle modali e del bottone indietro */
        background: rgb(30 30 34 / 50%) !important;
        backdrop-filter: blur(36px) saturate(160%);
        -webkit-backdrop-filter: blur(36px) saturate(160%);
        border: 1px solid rgba(128, 128, 128, .25);
        border-radius: 0 0 10px 10px;
        box-shadow: 0 12px 28px rgba(0, 0, 0, .35);
        padding: 6px 0;
        z-index: 1300;
    }
    .ty-web-dd:hover .ty-web-dd-menu {
        display: block;
    }
    .ty-web-dd-item {
        padding: 10px 16px;
        font-size: 14px;
        line-height: 1.35; /* NON ereditare la line-height alta del header */
        opacity: .85;
        cursor: pointer;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .ty-web-dd-item:hover {
        opacity: 1;
        background: rgba(128, 128, 128, .15);
    }

    /* azioni a destra */
    .ty-web-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }
    .ty-web-action {
        background: none;
        border: none;
        cursor: pointer;
        font-size: 20px;
        line-height: 1;
        padding: 9px;
        border-radius: 50%;
        transition: background .15s ease;
        text-decoration: none;
        display: inline-flex;
    }
    .ty-web-action:hover { background: rgba(128, 128, 128, .2); }
    .ty-web-avatar {
        width: 32px;
        height: 32px;
        cursor: pointer;
        object-fit: cover;
    }
    /* bottoni header: stile autonomo, compatto (niente classi native
       button-primary/secondary: su mobile.css sono full-width) */
    body.ty-web .ty-web-btn {
        width: auto !important;
        height: 36px;
        padding: 0 18px !important;
        font-size: 14px;
        font-weight: 600;
        line-height: 34px;
        cursor: pointer;
        border-radius: 18px;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
    }
    body.ty-web .ty-web-btn-secondary {
        background: transparent;
        color: inherit;
        border: 1.5px solid currentColor;
    }
    body.ty-web .ty-web-btn-primary {
        color: #fff;
        border: 1.5px solid transparent;
    }
    body.ty-web .ty-web-header .ty-web-lang {
        max-width: 140px;
    }

    /* -------- modali generiche --------
       Solo le modali "generiche" (login, playlist, commenti, paywall)
       diventano dialog centrate su desktop; collection e pagina video
       restano col loro layout (sheet/fullscreen) anche qui. */
    body.ty-web #modal-generic .modal-dialog,
    body.ty-web #modal_playlist .modal-dialog,
    body.ty-web #modal-video-comment .modal-dialog,
    body.ty-web #modal-mobile-subscribe .modal-dialog {
        width: auto !important;
        max-width: 560px !important;
        margin: 10vh auto !important;
        padding: 0;
        top: auto !important;
    }
    body.ty-web #modal-mobile-subscribe .modal-dialog {
        max-width: 640px !important;
    }
    body.ty-web #modal-generic .modal-content,
    body.ty-web #modal_playlist .modal-content,
    body.ty-web #modal-video-comment .modal-content,
    body.ty-web #modal-mobile-subscribe .modal-content {
        min-height: 0 !important;
        border-radius: 16px;
        padding-bottom: 22px;
        /* stesso vetro del dropdown e del bottone indietro. Dichiarato qui
           e non lasciato a .modal-content di mobile.css: quelle sono le
           regole desktop delle modali, il fondo sta con loro */
        background: rgb(30 30 34 / 50%) !important;
        backdrop-filter: blur(36px) saturate(160%);
        -webkit-backdrop-filter: blur(36px) saturate(160%);
        /* bordo-luce del vetro (come .page-back-btn) + stacco dalla pagina */
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.08),
            inset 0 1px 0 -0.5px rgba(255, 255, 255, 0.18),
            0 24px 70px rgba(0, 0, 0, .6);
        overflow: hidden;
    }
    body.ty-web #modal-generic.fade .modal-dialog,
    body.ty-web #modal_playlist.fade .modal-dialog,
    body.ty-web #modal-video-comment.fade .modal-dialog,
    body.ty-web #modal-mobile-subscribe.fade .modal-dialog {
        transform: translate3d(0, 22px, 0) scale(.985);
        opacity: 0;
        transition: transform .22s ease, opacity .22s ease;
    }
    body.ty-web #modal-generic.fade.in .modal-dialog,
    body.ty-web #modal_playlist.fade.in .modal-dialog,
    body.ty-web #modal-video-comment.fade.in .modal-dialog,
    body.ty-web #modal-mobile-subscribe.fade.in .modal-dialog {
        transform: none;
        opacity: 1;
        transition: transform .28s ease, opacity .28s ease;
    }
    body.ty-web #modal-generic .modal-body,
    body.ty-web #modal_playlist .modal-body,
    body.ty-web #modal-video-comment .modal-body,
    body.ty-web #modal-mobile-subscribe .modal-body {
        max-height: 76vh;
        overflow-y: auto;
    }
    /* X in alto a DESTRA al posto della freccia indietro a sinistra
       (che resta il pattern del mobile) */
    body.ty-web #modal-generic .modal-header,
    body.ty-web #modal_playlist .modal-header,
    body.ty-web #modal-video-comment .modal-header,
    body.ty-web #modal-mobile-subscribe .modal-header {
        display: flex;
        justify-content: flex-end;
        padding: 10px 12px 0;
    }
    body.ty-web #modal-generic .modal-header .close,
    body.ty-web #modal_playlist .modal-header .close,
    body.ty-web #modal-video-comment .modal-header .close,
    body.ty-web #modal-mobile-subscribe .modal-header .close {
        float: none;
        position: static !important;
        left: auto !important;
        margin: 0 0 0 auto;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: rgba(128, 128, 128, .18);
        transition: background .15s ease;
    }
    body.ty-web #modal-generic .modal-header .close:before,
    body.ty-web #modal_playlist .modal-header .close:before,
    body.ty-web #modal-video-comment .modal-header .close:before,
    body.ty-web #modal-mobile-subscribe .modal-header .close:before {
        font-family: 'remixicon';
        content: "\eb99"; /* ri-close-line: X al posto della freccia */
    }
    body.ty-web #modal-generic .modal-header .close:hover,
    body.ty-web #modal_playlist .modal-header .close:hover,
    body.ty-web #modal-video-comment .modal-header .close:hover,
    body.ty-web #modal-mobile-subscribe .modal-header .close:hover {
        background: rgba(128, 128, 128, .35);
    }

    /* -------- footer --------
       Testi/link/icone BIANCHI forzati: i css ereditati della piattaforma
       (main.css & co.) hanno selettori più forti che li scurirebbero. */
    body.ty-web .ty-web-footer {
        display: block !important;
        margin-top: 56px;
        border-top: 1px solid rgba(255, 255, 255, .12);
        color: #fff !important;
    }
    body.ty-web .ty-web-footer a,
    body.ty-web .ty-web-footer .link-footer-a,
    body.ty-web .ty-web-footer .social-link-a,
    body.ty-web .ty-web-footer .social-link-a i,
    body.ty-web .ty-web-footer .ty-web-footer-text,
    body.ty-web .ty-web-footer .companyInfo,
    body.ty-web .ty-web-footer .ty-web-footer-copy,
    body.ty-web .ty-web-footer .ty-web-lang {
        color: #fff !important;
    }
    .ty-web-footer-inner {
        max-width: 1100px;
        margin: 0 auto;
        padding: 40px 24px 28px;
        text-align: center;
    }
    .ty-web-footer-top { margin-bottom: 18px; }
    .ty-web-footer-logo { max-height: 30px; }

    .ty-web-footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 22px;
        margin-bottom: 18px;
    }
    body.ty-web .ty-web-footer a {
        font-size: 14px;
        opacity: .85;
        text-decoration: none;
        cursor: pointer;
    }
    body.ty-web .ty-web-footer a:hover {
        opacity: 1;
        text-decoration: underline;
    }

    .ty-web-footer-meta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 22px;
        margin-bottom: 16px;
    }
    .ty-web-footer-socials { display: flex; gap: 6px; }
    body.ty-web .ty-web-footer .social-link-a {
        font-size: 18px;
        padding: 7px;
        border-radius: 50%;
        display: inline-flex;
    }
    body.ty-web .ty-web-footer .social-link-a:hover {
        background: rgba(128, 128, 128, .2);
        text-decoration: none;
    }
    .ty-web-lang {
        background: transparent;
        color: inherit;
        border: 1px solid rgba(128, 128, 128, .4);
        border-radius: 8px;
        padding: 6px 10px;
        font-size: 13.5px;
        cursor: pointer;
    }
    .ty-web-lang option { color: #000; }

    .ty-web-footer-login {
        display: flex;
        justify-content: center;
        gap: 24px;
        margin-bottom: 16px;
    }

    .ty-web-footer-text {
        font-size: 13.5px;
        opacity: .8;
        line-height: 1.6;
        margin-bottom: 20px;
    }

    .ty-web-footer-bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding-top: 16px;
        border-top: 1px solid rgba(128, 128, 128, .18);
    }
    .ty-web-footer-copy {
        font-size: 13px;
        opacity: .75;
    }
    /* senza badge (debranding) il copyright è solo: va centrato */
    .ty-web-footer-bottom .ty-web-footer-copy:only-child {
        margin: 0 auto;
    }
    .ty-web-teyuto-badge {
        display: inline-flex;
        align-items: center;
        white-space: nowrap;
        background: #fff !important;
        border-radius: 3px;
        padding: 4px 7px;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .1);
    }
    .ty-web-teyuto-badge .teyuto-badge-icon { height: 22px; margin-right: 4px; }
    .ty-web-teyuto-badge .teyuto-badge-text { height: 12.5px; }
}

/* su desktop i link Termini/Privacy sono già nel footer: la riga ripetuta
   nelle viste login/registrazione non serve */
@media (min-width: 992px) {
    body.ty-web .ty-auth-legal {
        display: none !important;
    }
}

/* su desktop i bottoni delle viste auth e delle modali non vanno a tutta
   larghezza (retaggio mobile): dimensione naturale, centrati */
@media (min-width: 992px) {
    body.ty-web .pageMob-auth .button-primary,
    body.ty-web .pageMob-auth .button-secondary,
    body.ty-web .pageMob-auth .button-void,
    body.ty-web .modal .button-primary,
    body.ty-web .modal .button-secondary,
    body.ty-web .modal .button-void {
        width: auto !important;
        min-width: 220px;
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding-left: 32px;
        padding-right: 32px;
    }
}

/* viste auth (login/register/recover) su desktop: form centrato con respiro */
body.ty-web .pageMob-auth .form-container-md {
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
}

body.ty-web .pageMob-auth .form-container-md h4.register-text {
    margin-bottom: 16px;
}

@media (min-width: 992px) {
    body.ty-web .pageMob-auth .form-container-md {
        padding-left: 48px;
        padding-right: 48px;
        padding-top: 40px;
        padding-bottom: 40px;
        border-radius: 12px;
    }
}