/**
 * PentaFit Iscriviti - Wizard stile
 * Colore accento: #f18e19 (brand PentaFIT).
 * Sovrascrivibile dal modulo (parametro "Colore accento"): viene passato
 * come variabile CSS inline sull'elemento .pfi-wizard.
 *
 * Tre livelli di colore, in ordine di priorita' crescente:
 *   1. --pfi-accent        colore generale del wizard (steps, prodotti, bottoni)
 *   2. --pfi-club-accent   colore dello step "Il tuo Club" (opzionale nel modulo)
 *   3. --pfi-accent        colore dedicato del riquadro famiglia (opzionale)
 */
.pfi-wizard {
    --pfi-accent: #f18e19;
    --pfi-accent-rgb: 241, 142, 25; /* rgb del colore accento, usato nelle ombre */
    /*
     * Colore dello step "Il tuo Club": se il modulo non ne imposta uno
     * dedicato, eredita automaticamente il colore generale.
     */
    --pfi-club-accent: var(--pfi-accent);
    --pfi-club-accent-rgb: var(--pfi-accent-rgb);
    --pfi-dark: #101010;
    --pfi-grey: #f4f4f6;
    --pfi-border: #e4e4e8;
    --pfi-muted: #77777f;
    max-width: 880px;
    margin: 0 auto;
    font-size: 16px;
    color: var(--pfi-dark);
    scroll-margin-top: 120px;
}

/* ---------- Steps ---------- */
.pfi-steps {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}
.pfi-step {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 500;
    color: var(--pfi-muted);
    transition: all .25s ease;
}
.pfi-step span {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--pfi-grey);
    color: #55555c;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    transition: all .25s ease;
}
.pfi-step.is-active {
    color: var(--pfi-dark);
    background: #fff;
    box-shadow: 0 4px 18px rgba(16, 16, 16, .08);
}
.pfi-step.is-active span {
    background: var(--pfi-accent);
    color: #fff;
}

/* ---------- Panels ---------- */
.pfi-panel-head { text-align: center; margin-bottom: 26px; }
.pfi-panel-head h2 { font-size: 30px; margin: 0 0 6px; font-weight: 600; }
.pfi-panel-head p { color: var(--pfi-muted); margin: 0; }

/* ---------- Ricerca ---------- */
.pfi-search-wrap { position: relative; max-width: 520px; margin: 0 auto 24px; }
.pfi-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    color: #9a9aa2;
    pointer-events: none;
}
.pfi-search {
    width: 100%;
    padding: 13px 18px 13px 46px;
    border: 1px solid var(--pfi-border);
    border-radius: 12px;
    font-size: 15px;
    background: #fff;
    outline: none;
    transition: border-color .2s ease;
    box-sizing: border-box;
}
.pfi-search:focus { border-color: var(--pfi-club-accent); }

/* ---------- Club cards ---------- */
.pfi-club-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.pfi-club-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #fff;
    border: 1.5px solid var(--pfi-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all .2s ease;
    margin: 0;
}
.pfi-club-card:hover { border-color: #c9c9cf; transform: translateY(-1px); }
.pfi-club-card.is-selected {
    border-color: var(--pfi-club-accent);
    box-shadow: 0 6px 22px rgba(var(--pfi-club-accent-rgb), .18);
}
.pfi-club-card input { position: absolute; opacity: 0; pointer-events: none; }
.pfi-club-check {
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid #cfcfd6;
    transition: all .2s ease;
    position: relative;
}
.pfi-club-card.is-selected .pfi-club-check {
    border-color: var(--pfi-club-accent);
    background: var(--pfi-club-accent);
}
.pfi-club-card.is-selected .pfi-club-check::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 6px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #fff;
}
.pfi-club-info strong { font-size: 17px; font-weight: 600; }

/* ---------- Badge club selezionato ---------- */
.pfi-club-badge {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: var(--pfi-grey);
    border-radius: 12px;
    padding: 12px 18px;
    margin-bottom: 18px;
}
.pfi-club-badge-name { font-weight: 700; font-size: 15px; }
.pfi-change-club {
    background: none;
    border: none;
    color: var(--pfi-accent);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    font-size: 14px;
    text-decoration: underline;
}

/* ---------- Product cards ---------- */
.pfi-product-list { display: flex; flex-direction: column; gap: 12px; }
.pfi-product-card {
    position: relative;
    display: block;
    background: #fff;
    border: 1.5px solid var(--pfi-border);
    border-radius: 14px;
    padding: 20px 22px;
    cursor: pointer;
    transition: all .2s ease;
    margin: 0;
}
.pfi-product-card:hover { border-color: #c9c9cf; }
.pfi-product-card.is-selected {
    border-color: var(--pfi-accent);
    box-shadow: 0 6px 22px rgba(var(--pfi-accent-rgb), .18);
}
.pfi-product-card input { position: absolute; opacity: 0; pointer-events: none; }

.pfi-prod-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
}
.pfi-prod-main { display: flex; flex-direction: column; gap: 5px; }
.pfi-prod-name { font-size: 17px; font-weight: 600; }
.pfi-prod-saving {
    display: inline-block;
    align-self: flex-start;
    background: #eaf7ee;
    color: #1d7a3d;
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 999px;
    padding: 3px 11px;
}

.pfi-prod-price {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
}
.pfi-old {
    color: #a5a5ad;
    text-decoration: line-through;
    font-size: 14px;
}
.pfi-new { font-size: 26px; font-weight: 700; }
.pfi-total-label { font-size: 12px; color: var(--pfi-muted); text-transform: uppercase; letter-spacing: .4px; }
.pfi-monthly {
    flex-basis: 100%;
    text-align: right;
    font-size: 13px;
    color: var(--pfi-muted);
}

/* ============================================================
   FAMIGLIE DI DURATA (OPEN, SMART, ...)
   Riquadro unico per famiglia: in alto la durata col costo/mese
   piu' alto, poi a cascata le alternative con risparmio.
   Mobile: righe impilate. Desktop (>=992px): 3 colonne affiancate.
   ============================================================ */
.pfi-fam-card {
    border: 1.5px solid var(--pfi-border);
    border-radius: 16px;
    padding: 20px 22px 18px;
    background: #fff;
    transition: border-color .2s ease;
}
.pfi-fam-card[hidden] { display: none; }
.pfi-fam-card:hover { border-color: #c9c9cf; }

.pfi-fam-head {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.pfi-fam-title {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: .2px;
    color: var(--pfi-dark);
}
.pfi-fam-tag {
    margin-left: auto;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--pfi-accent);
    border: 1.5px solid var(--pfi-accent);
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.pfi-fam-sub {
    font-size: 13.5px;
    color: var(--pfi-muted);
    line-height: 1.45;
    margin: 0 0 14px;
}
.pfi-fam-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--pfi-muted);
    margin-bottom: 8px;
}

/*
 * Condizioni generali della famiglia: link discreto subito sotto il titolo,
 * stesso comportamento delle schede singole ("Mostra dettagli").
 */
.pfi-fam-details-toggle {
    margin-top: 4px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pfi-muted);
}
.pfi-fam-details-toggle:hover { color: var(--pfi-dark); }
.pfi-fam-details { margin-top: 10px; }
.pfi-fam-details + .pfi-fam-sub { margin-top: 12px; }
.pfi-fam-grid {
    display: flex;
    flex-direction: column;
    /* Spazio generoso tra le righe: la linguetta "Consigliato" sporge
       di circa 10px sopra il bordo del riquadro che la contiene. */
    gap: 20px;
    padding-top: 5px;
}

/* --- singola opzione durata --- */
.pfi-dur-box {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1.5px solid var(--pfi-border);
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    background: #fff;
    margin: 0;
    transition: border-color .15s ease, background .15s ease;
}
.pfi-dur-box:hover { border-color: #c9c9cf; }
.pfi-dur-box.is-selected {
    border-color: var(--pfi-accent);
    /* Fallback per browser senza color-mix() */
    background: #fffaf3;
}
/*
 * Sfondo della durata selezionata: tinta chiara derivata dal colore accento
 * (che puo' essere quello generale o quello dedicato della famiglia).
 */
@supports (background: color-mix(in srgb, red 10%, white)) {
    .pfi-dur-box.is-selected {
        background: color-mix(in srgb, var(--pfi-accent) 6%, #fff);
    }
}
.pfi-dur-box input { position: absolute; opacity: 0; pointer-events: none; }

.pfi-dur-radio {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cfcfd6;
    position: relative;
    transition: border-color .15s ease;
}
.pfi-dur-box.is-selected .pfi-dur-radio { border-color: var(--pfi-accent); }
.pfi-dur-box.is-selected .pfi-dur-radio::after {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--pfi-accent);
}

.pfi-dur-name { font-weight: 700; font-size: 15.5px; min-width: 92px; }

/*
 * Linguetta "Consigliato": fuori dal flusso (absolute), centrata
 * orizzontalmente e a cavallo del bordo superiore del riquadro.
 * Non allarga piu' la riga: prezzi e totale restano allineati anche
 * su mobile o con il browser stretto.
 */
.pfi-best {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    pointer-events: none;
    background: var(--pfi-accent);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .4px;
    white-space: nowrap;
}
.pfi-dur-note { font-size: 12.5px; color: var(--pfi-muted); flex: 1; min-width: 0; }
.pfi-dur-save {
    display: inline-block;
    background: #eaf7ee;
    color: #1d7a3d;
    font-size: 11.5px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
}
.pfi-dur-save.is-none {
    background: transparent;
    color: #a5a5ad;
    font-weight: 600;
    padding: 0;
}

/* ---------- Promo a tempo (campi prodotto "Promo" + "Scadenza") ----------
   Badge mostrato solo quando il flag Promo e' attivo e la Scadenza e'
   futura. La variante "hot" (entro 7 giorni) e' piena per attirare
   l'attenzione, quella "warm" (piu' lontana) e' chiara. */
.pfi-promo {
    display: inline-block;
    align-self: flex-start;
    background: #fdecec;
    color: #c62828;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .2px;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}
.pfi-promo.is-hot {
    background: #c62828;
    color: #fff;
}
.pfi-dur-note .pfi-promo { margin-left: 6px; }

.pfi-dur-month { text-align: right; margin-left: auto; white-space: nowrap; }
.pfi-dur-month .val { font-size: 21px; font-weight: 800; color: var(--pfi-dark); }
.pfi-dur-month .unit { font-size: 12px; color: var(--pfi-muted); font-weight: 600; }

.pfi-dur-total { text-align: right; min-width: 120px; white-space: nowrap; }
.pfi-dur-total .old { display: block; font-size: 12.5px; color: #a5a5ad; text-decoration: line-through; }
.pfi-dur-total .new { font-size: 15.5px; font-weight: 800; }
.pfi-dur-total .lbl {
    display: block;
    font-size: 10.5px;
    color: var(--pfi-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* --- footer del riquadro famiglia --- */
.pfi-fam-foot {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
    border-top: 1px solid var(--pfi-border);
    padding-top: 14px;
}
.pfi-fam-total { font-size: 13px; color: var(--pfi-muted); }
.pfi-fam-total b { display: block; font-size: 20px; color: var(--pfi-dark); letter-spacing: -.3px; }
.pfi-fam-savings { font-size: 13px; color: #1d7a3d; font-weight: 700; }
.pfi-fam-btn {
    margin-left: auto;
    background: var(--pfi-accent);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s ease;
}
.pfi-fam-btn:hover:not(:disabled) { filter: brightness(.95); }

/*
 * Bottone disattivato: nessuna durata ancora scelta. Aspetto "spento" e
 * cursore not-allowed per rendere evidente che serve prima un clic.
 */
.pfi-fam-btn:disabled {
    opacity: .5;
    cursor: not-allowed;
    filter: none;
}
.pfi-fam-btn small { display: block; font-size: 11.5px; font-weight: 600; opacity: .9; }

/* ---------- Dettagli ---------- */
.pfi-details-toggle {
    margin-top: 12px;
    background: none;
    border: none;
    padding: 0;
    color: var(--pfi-dark);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.pfi-details {
    margin-top: 10px;
    border-top: 1px solid var(--pfi-border);
    padding-top: 12px;
}
.pfi-details ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.pfi-details li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 5px;
    font-size: 14.5px;
    color: #3c3c44;
}
.pfi-details li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--pfi-accent);
}

/* ---------- Totali + azioni ---------- */
.pfi-totals {
    margin-top: 20px;
    background: var(--pfi-grey);
    border-radius: 12px;
    padding: 16px 20px;
}
.pfi-totals-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-size: 15px;
    padding: 3px 0;
}
.pfi-totals-total {
    border-top: 1px solid #dedee2;
    margin-top: 8px;
    padding-top: 10px;
    font-size: 17px;
}

.pfi-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 22px;
    flex-wrap: wrap;
}
.pfi-back {
    background: none;
    border: none;
    color: var(--pfi-muted);
    font-size: 14.5px;
    cursor: pointer;
    padding: 6px 0;
}
.pfi-back:hover { color: var(--pfi-dark); }
.pfi-proceed {
    background: var(--pfi-dark);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 15px 34px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s ease;
    letter-spacing: .2px;
}
.pfi-proceed:hover:not(:disabled) { background: var(--pfi-accent); }
.pfi-proceed:disabled { opacity: .35; cursor: not-allowed; }

.pfi-empty { text-align: center; color: var(--pfi-muted); }

/* ---------- Responsive ---------- */

/* Desktop: le durate della stessa famiglia diventano colonne affiancate */
@media (min-width: 992px) {
    .pfi-fam-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        padding-top: 6px;
    }

    /*
     * Famiglie con poche durate: la griglia si adatta invece di lasciare
     * spazio vuoto a destra (es. una famiglia con solo 7 e 12 mesi).
     * Con 1 sola durata il riquadro resta largo come una colonna da tre,
     * per rimanere coerente con le altre famiglie.
     */
    .pfi-fam-grid.pfi-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pfi-fam-grid.pfi-cols-1 { grid-template-columns: minmax(0, 1fr); max-width: calc((100% - 28px) / 3); }
    /*
     * Riga che va a capo: radio + nome affiancati in alto (il radio resta
     * visibile anche su desktop, come su mobile), poi costo/mese, totale
     * e note ciascuno sulla propria riga, tutto centrato.
     */
    .pfi-dur-box {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 6px 8px;
        padding: 18px 10px 12px;
    }
    .pfi-dur-radio { display: block; order: 1; }
    .pfi-dur-name { min-width: 0; font-size: 15px; order: 1; }
    .pfi-dur-month { margin-left: 0; order: 2; flex: 0 0 100%; text-align: center; }
    .pfi-dur-month .val { font-size: 22px; }
    .pfi-dur-total { min-width: 0; order: 3; flex: 0 0 100%; text-align: center; }
    .pfi-dur-note { order: 4; flex: 0 0 100%; margin-top: 6px; }
}

@media (max-width: 640px) {
    .pfi-club-list { grid-template-columns: 1fr; }
    .pfi-panel-head h2 { font-size: 24px; }
    .pfi-prod-price { justify-content: flex-start; }
    .pfi-monthly { text-align: left; }
    .pfi-proceed { width: 100%; }
    .pfi-actions { flex-direction: column-reverse; align-items: stretch; }
    .pfi-back { text-align: center; }

    /* Famiglie: su schermo piccolo le opzioni vanno a capo */
    .pfi-fam-card { padding: 16px 16px 14px; }
    .pfi-fam-tag { margin-left: 0; }
    .pfi-dur-box { flex-wrap: wrap; row-gap: 6px; gap: 10px; }
    .pfi-dur-name { flex: 1 1 auto; min-width: 0; }
    .pfi-dur-note { flex: 1 1 100%; order: 10; margin-left: 30px; }
    .pfi-dur-month { margin-left: auto; }
    .pfi-fam-btn { margin-left: 0; width: 100%; }
    .pfi-dur-note .pfi-promo { margin-left: 0; margin-right: 6px; }
}

@media (max-width: 480px) {
    .pfi-dur-name { font-size: 14.5px; }
    .pfi-dur-month .val { font-size: 19px; }
    .pfi-dur-total { min-width: 88px; }
    .pfi-dur-total .new { font-size: 14.5px; }
    .pfi-dur-note { margin-left: 26px; }
    .pfi-dur-save { font-size: 10.5px; padding: 2px 7px; }
    .pfi-fam-title { font-size: 17px; }
}