/* =====================================================================
   MYmovies ONE - /one/scopri/
   Toggle annuale/mensile + dettagli richiudibili su mobile

   Aggiunta a landing.css, che sta su repstatic e non e' modificabile.
   Tutte le regole sono scoped a .block-pricing / .card-price, quindi
   questo foglio non puo' interferire con il resto della pagina.

   Variabili riusate da landing.css:
     --color-light, --color-grey, --color-grey-light, --color-grey-dark,
     --color-primary (#e50072), --color-secondary (#f5b40b),
     --gutter, --font-size-*
   Breakpoint mobile: 767px, lo stesso gia' usato da .block__grid.
   ===================================================================== */


/* ---------------------------------------------------------------------
   1. Toggle della frequenza di fatturazione
   --------------------------------------------------------------------- */

.pricing-toggle {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.pricing-toggle__fieldset {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
}

/* La legenda serve agli screen reader: il gruppo di radio deve avere un
   nome, ma a schermo le due etichette bastano. */
.pricing-toggle__legend {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
}

.pricing-toggle__group {
    position: relative;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background-color: var(--color-grey);
    border: 1px solid var(--color-grey-light);
}

/* I radio restano nel flusso per la tastiera e per gli screen reader
   (frecce direzionali native), ma sono invisibili: a schermo si vedono
   le label. Niente display:none, che li toglierebbe dal tab order. */
.pricing-toggle__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    opacity: 0;
    clip: rect(0 0 0 0);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
}

.pricing-toggle__option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding-inline: 20px;
    color: var(--color-grey-light);
    font-family: Roboto, 'Roboto fallback';
    font-size: var(--font-size-body-medium);
    font-weight: 700;
    line-height: 1;
    letter-spacing: .02em;
    white-space: nowrap;
    cursor: pointer;
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

.pricing-toggle__input:checked + .pricing-toggle__option {
    background-color: var(--color-light);
    color: #0d0d0d;
}

.pricing-toggle__input:focus-visible + .pricing-toggle__option {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}

/* Fallback per i browser senza :focus-visible. */
.pricing-toggle__input:focus + .pricing-toggle__option {
    outline: 2px solid var(--color-secondary);
    outline-offset: 2px;
}
.pricing-toggle__input:focus:not(:focus-visible) + .pricing-toggle__option {
    outline: none;
}

.pricing-toggle__submit {
    min-height: 40px;
    padding-inline: 20px;
    border: 1px solid var(--color-primary, #e50072);
    background-color: var(--color-primary, #e50072);
    color: #f6f6f6;
    font-weight: 700;
    cursor: pointer;
}

@media screen and (max-width: 420px) {
    .pricing-toggle__option {
        padding-inline: 12px;
        font-size: var(--font-size-body-small, 14px);
    }
}


/* ---------------------------------------------------------------------
   2. Alternanza annuale / mensile
   ---------------------------------------------------------------------
   L'attributo data-face e' presente SOLO sugli elementi delle card che
   hanno davvero una versione mensile. Le card solo annuali non ne hanno,
   quindi nessuna di queste regole le tocca e restano intatte in
   entrambe le viste.
   --------------------------------------------------------------------- */

.block-pricing[data-billing="annuale"] [data-face="mensile"] {
    display: none;
}

.block-pricing[data-billing="mensile"] [data-face="annuale"] {
    display: none;
}

/* Il badge sborda sopra il bordo della card: deve restare davanti a
   qualsiasi superficie interna. */
.card-price__badge {
    z-index: 2;
}

/* Il badge passa dal componente 'badge', che accetta solo una lista di
   classi e non attributi arbitrari: per lui l'alternanza usa due
   modificatori invece di data-face. */
.block-pricing[data-billing="annuale"] .card-price__badge--mensile,
.block-pricing[data-billing="mensile"] .card-price__badge--annuale {
    display: none;
}

/* Nota sulle card che il mensile non ce l'hanno: compare solo quando il
   toggle e' su mensile. */
.card-price__only-annual {
    display: none;
    color: var(--color-grey-light);
    font-style: italic;
}

.block-pricing[data-billing="mensile"] .card-price[data-has-mensile="0"] .card-price__only-annual {
    display: block;
}

/* Variante alternativa alla nota: in vista mensile i piani senza
   mensile spariscono del tutto. Si accende dal blocco con
   'nascondi_solo_annuali' => true. Le card restano nel DOM, quindi
   niente impatto su indicizzazione o tracciamenti. */
.block-pricing[data-billing="mensile"][data-hide-solo-annuali="1"] .card-price[data-has-mensile="0"] {
    display: none;
}


/* ---------------------------------------------------------------------
   3. Dettagli richiudibili su mobile
   ---------------------------------------------------------------------
   Le card restano tutte aperte, come su desktop. Sotto i 768px pero' la
   lista feature e la CTA di chiusura finiscono dietro un "Scopri i
   dettagli": cosi' prezzo, frequenza, descrizione e prima CTA di tutti
   i piani stanno in poche schermate e si confrontano scorrendo.

   Scoped a .has-js: senza JavaScript la classe non viene aggiunta, il
   bottone non compare e la card resta intera come su desktop.
   --------------------------------------------------------------------- */

.card-price__details-toggle {
    display: none;
}

@media screen and (max-width: 767px) {

    .has-js .card-price.has-details .card-price__details-toggle {
        display: inline-flex;
        align-self: center;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0;
        padding: 8px 4px;
        border: 0;
        background: transparent;
        color: var(--color-light);
        font-family: Roboto, 'Roboto fallback';
        font-size: var(--font-size-body-medium);
        font-weight: 700;
        line-height: 1;
        text-decoration: underline;
        text-underline-offset: 3px;
        cursor: pointer;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    .has-js .card-price.has-details .card-price__details-toggle:focus-visible {
        outline: 2px solid var(--color-secondary);
        outline-offset: 2px;
    }

    .has-js .card-price.has-details .card-price__details-toggle[aria-expanded="false"] .card-price__details-hide,
    .has-js .card-price.has-details .card-price__details-toggle[aria-expanded="true"] .card-price__details-show {
        display: none;
    }

    .has-js .card-price.has-details .card-price__details-chevron {
        width: 18px;
        height: 18px;
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-transition: -webkit-transform .28s ease;
        transition: transform .28s ease;
    }

    .has-js .card-price.has-details .card-price__details-toggle[aria-expanded="true"] .card-price__details-chevron {
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    /* grid-template-rows da 1fr a 0fr anima un'altezza che non
       conosciamo in anticipo, senza max-height arbitrarie. */
    .has-js .card-price.has-details .card-price__details {
        display: grid;
        grid-template-rows: 1fr;
        -webkit-transition: grid-template-rows .28s ease;
        transition: grid-template-rows .28s ease;
    }

    .has-js .card-price.has-details.is-details-collapsed .card-price__details {
        grid-template-rows: 0fr;
        /* .card-price__content ha gap:16px: annulla lo spazio che un
           elemento di altezza zero lascerebbe comunque. */
        margin-top: -16px;
    }

    .has-js .card-price.has-details .card-price__details-inner {
        min-height: 0;
        overflow: hidden;
        visibility: visible;
        -webkit-transition: visibility 0s;
        transition: visibility 0s;
    }

    /* visibility:hidden toglie il contenuto richiuso dal tab order e
       dagli screen reader: senza, i link nascosti resterebbero
       raggiungibili con il tab. Il ritardo la fa sparire a fine
       animazione. */
    .has-js .card-price.has-details.is-details-collapsed .card-price__details-inner {
        visibility: hidden;
        -webkit-transition: visibility 0s linear .28s;
        transition: visibility 0s linear .28s;
    }

    /* La CTA di chiusura appartiene ai dettagli: a dettagli chiusi resta
       visibile solo quella sopra la lista. */
    .has-js .card-price.has-details.is-details-collapsed .card-price__footer--bottom {
        display: none;
    }

}


/* ---------------------------------------------------------------------
   4. Preferenze di movimento ridotto
   --------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .card-price__details,
    .card-price__details-chevron,
    .pricing-toggle__option {
        -webkit-transition: none !important;
        transition: none !important;
    }

}