/* Il percorso «Ottieni il tuo sito» (17/10/2026; 18/10/2026: il codice, il prezzo riservato; 19/10/2026: le due grafiche, i servizi in più, ogni
   mese o ogni anno, la ricerca con nome e città). Si appoggia a stile.css (colori, caratteri, .bottone, .campo, .linea, .chip): qui solo
   quello che serve alla sequenza di passi: una domanda per schermata, la barra con la percentuale, le tappe, le scelte grandi, la ricerca
   con le schede, il riepilogo. Prima il telefono (390 px), poi il computer. Niente stili in linea (CSP). */
.pf [hidden] { display: none !important; }   /* «hidden» vince sempre, anche su .bottone e sulle griglie (che impostano display) */
.percorso-pagina .piede { margin-top: 24px; }
.percorso-pagina .piede-in { padding-bottom: 40px; }
.pf { max-width: 680px; margin: 0 auto; padding: 18px 16px 40px; }

/* in alto: percentuale, nome del passo, barra, tappe */
.pf-testa { margin: 0 0 14px; }
.pf-stato { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.pf-pct { font: 600 30px/1 var(--serif); color: var(--blu-scuro); min-width: 72px; transition: color .3s; }
.pf-passo-nome { font-size: 15px; font-weight: 700; color: var(--oro-scuro); text-transform: uppercase; letter-spacing: .1em; }
.pf-barra { height: 10px; background: var(--crema); border: 1px solid var(--bordo); border-radius: 999px; overflow: hidden; }
.pf-barra-in { display: block; height: 100%; width: 25%; background: linear-gradient(90deg, var(--oro) 0%, #d1b06f 100%); border-radius: 999px; transition: width .45s cubic-bezier(.2,.8,.2,1); }
.pf-tappe { list-style: none; display: flex; justify-content: space-between; gap: 4px; padding: 0; margin: 12px 0 0; }
.pf-tappe li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 12px; color: var(--grigio); text-align: center; line-height: 1.2; }
.pf-tappa-n { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bordo2); background: #fff; display: grid; place-items: center; font-weight: 700; font-size: 12.5px; color: var(--grigio); transition: background .25s, border-color .25s, color .25s; }
.pf-tappe li.fatta .pf-tappa-n { background: var(--verde); border-color: var(--verde); color: #fff; font-size: 0; }
.pf-tappe li.fatta .pf-tappa-n::after { content: ""; width: 10px; height: 6px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) translate(1px, -1px); }
.pf-tappe li.attuale { color: var(--blu-scuro); font-weight: 700; }
.pf-tappe li.attuale .pf-tappa-n { background: var(--blu); border-color: var(--blu); color: #fff; box-shadow: 0 0 0 4px rgba(31,43,74,.14); }
.pf-tappa-t { max-width: 100%; }

/* la carta del passo */
.pf-carta { background: var(--carta); border: 1px solid var(--bordo); border-radius: var(--r-grande); padding: 26px 24px 20px; box-shadow: var(--ombra-grande); }
.pf-passo { animation: pf-entra .3s ease-out; }
@keyframes pf-entra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.pf-titolo { font: 600 clamp(25px, 3.4vw, 32px)/1.18 var(--serif); color: var(--blu-scuro); margin: 0 0 8px; }
.pf-sotto { font-size: 17px; color: var(--testo2); margin: 0 0 20px; }
.pf-aiuto { font-size: 14.5px; color: var(--grigio); margin: 12px 0 0; }
.pf-etichetta { font-weight: 700; color: var(--blu-scuro); margin: 0 0 8px; }

/* le scelte: pulsanti grandi, uno sotto l'altro */
.pf-scelte { display: grid; gap: 10px; margin: 0; }
.pf-scelte-griglia { grid-template-columns: 1fr 1fr; }
.pf-scelte-strette .pf-scelta { min-height: 52px; padding: 10px 14px; }
.pf-scelta { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 64px; padding: 14px 16px; text-align: left; background: #fff; color: var(--testo);
  border: 2px solid var(--bordo2); border-radius: 12px; font: inherit; cursor: pointer; transition: border-color .2s, background .2s, transform .15s; }
.pf-scelta:hover { border-color: var(--blu); background: #fbfaf7; }
.pf-scelta:active { transform: translateY(1px); }
.pf-scelta-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-scelta-testo b { font-size: 17.5px; color: var(--blu-scuro); line-height: 1.25; }
.pf-scelta-testo span { font-size: 14.5px; color: var(--grigio); line-height: 1.35; }
.pf-spunta { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bordo2); position: relative; transition: background .2s, border-color .2s; }
.pf-scelta.scelta-fatta { border-color: var(--blu); background: #eef0f6; }
.pf-scelta.scelta-fatta .pf-spunta { background: var(--blu); border-color: var(--blu); }
.pf-scelta.scelta-fatta .pf-spunta::after { content: ""; position: absolute; left: 6px; top: 5px; width: 9px; height: 5px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg); }
.pf-scelte-canali .pf-scelta { min-height: 60px; }

/* le grafiche: due carte con il prezzo al mese (e l'anno) e cosa comprende; i servizi: carte con l'interruttore */
.pf-piani, .pf-servizi { gap: 12px; }
.pf-piano, .pf-servizio { align-items: flex-start; padding: 16px 16px 14px; }
.pf-piano .pf-scelta-testo, .pf-servizio .pf-scelta-testo { gap: 6px; flex: 1; }
.pf-piano .pf-scelta-testo > b, .pf-servizio .pf-scelta-testo > b { font-size: 20px; }
.pf-piano-prezzo { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.pf-prezzo-mese { font: 700 22px/1.1 var(--serif); color: var(--oro-scuro) !important; }
.pf-prezzo-anno { font-size: 14px !important; color: var(--grigio); }
.pf-badge { display: inline-block; align-self: flex-start; font-size: 12px !important; font-weight: 700; color: #6b4e0f !important; background: #f7ecd0; border-radius: 999px; padding: 4px 10px; text-transform: uppercase; letter-spacing: .06em; }
.pf-punti { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 5px; }
.pf-punti li { position: relative; padding-left: 20px; font-size: 14.5px; color: var(--testo2); line-height: 1.35; }
.pf-punti li::before { content: ""; position: absolute; left: 1px; top: 6px; width: 9px; height: 5px; border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg); }
.pf-piano .pf-spunta { margin-top: 4px; }
.pf-piano-premium { border-color: #d9c79a; background: #fffdf7; }
.pf-piano-premium.scelta-fatta { background: #f7f1e3; border-color: var(--oro-scuro); }
.pf-piano-premium.scelta-fatta .pf-spunta { background: var(--oro-scuro); border-color: var(--oro-scuro); }
.pf-interruttore { flex: none; width: 46px; height: 28px; border-radius: 999px; background: var(--bordo2); position: relative; transition: background .2s; margin-top: 4px; }
.pf-interruttore::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: left .2s; }
.pf-servizio[aria-pressed="true"] { border-color: var(--verde); background: #eef5f0; }
.pf-servizio[aria-pressed="true"] .pf-interruttore { background: var(--verde); }
.pf-servizio[aria-pressed="true"] .pf-interruttore::after { left: 21px; }

/* le etichette a pillola (dove ti trovano, fascia oraria) */
.pf-chips { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px 0; }
.pf-chip { min-height: 46px; padding: 8px 18px; font-size: 15.5px; }
.pf-chip[aria-pressed="true"] { background: var(--blu); color: #fff; border-color: var(--blu); }

/* i campi */
.pf-input { width: 100%; min-height: 52px; padding: 12px 14px; border: 1.5px solid var(--bordo2); border-radius: 10px; font: inherit; font-size: 17px; background: #fff; color: var(--testo); }
.pf-input:focus { border-color: var(--blu); outline: none; box-shadow: var(--fuoco); }
.pf-input-cerca { min-height: 58px; font-size: 18px; padding-left: 46px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%236E6A64' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 14px center; }
.pf-input-cerca::-webkit-search-cancel-button { -webkit-appearance: none; }
.pf-cerca-campi { display: grid; grid-template-columns: 1.6fr 1fr auto; gap: 10px; align-items: stretch; }
.pf-cerca-citta .pf-input { min-height: 58px; font-size: 17px; }
.pf-cerca-vai { min-height: 58px; padding: 10px 22px; }
.pf-stato-cerca { font-size: 14.5px; color: var(--grigio); min-height: 22px; margin: 8px 0 0; }
.pf-stato-cerca:empty { display: none; }
.pf-cerca { margin-bottom: 6px; }
.pf-non-trovo { margin-top: 12px; }
.pf-amano { margin-top: 14px; }
.pf-modulo { margin-top: 18px; }
.pf-modulo .campo { margin-bottom: 14px; }
.pf-modulo .scelta-box { margin-top: 4px; }
.pf-altro { margin-top: 14px; }
.pf-link { background: none; border: 0; padding: 10px 0; color: var(--blu); font: 600 15.5px var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pf-link:hover { color: var(--oro-scuro); }

/* i risultati della ricerca: schede con la foto (o le stelle di Google) */
.pf-risultati { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.pf-risultato { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px 12px 10px 10px; background: #fff; border: 2px solid var(--bordo2); border-radius: 12px; text-align: left; font: inherit; cursor: pointer; transition: border-color .2s, background .2s; color: var(--testo); }
.pf-risultato:hover { border-color: var(--blu); background: #fbfaf7; }
.pf-risultato-foto { flex: none; width: 76px; height: 58px; border-radius: 8px; object-fit: cover; background: var(--crema); }
.pf-risultato-segno { flex: none; width: 76px; height: 58px; border-radius: 8px; background: var(--crema) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 24 24' fill='none' stroke='%238a6d38' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E") center/28px no-repeat; }
.pf-risultato-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pf-risultato-testo b { font-size: 17px; color: var(--blu-scuro); line-height: 1.25; overflow-wrap: anywhere; }
.pf-risultato-testo span { font-size: 14.5px; color: var(--grigio); }
.pf-stelle { color: #8a6d38 !important; font-weight: 700; }
.pf-risultato-pronta { flex: none; font-size: 12px; font-weight: 700; color: #1f5139; background: #e5f0ea; border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.pf-risultato-freccia { flex: none; color: var(--oro-scuro); font-size: 22px; line-height: 1; }
.pf-nessuna { margin-top: 12px; padding: 16px; background: var(--fondo); border: 1px dashed var(--bordo2); border-radius: 12px; }
.pf-nessuna p { margin: 0 0 6px; }
.pf-nessuna .bottone { margin-top: 10px; }

/* le strutture scelte */
.pf-scelte-fatte { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--bordo); }
.pf-selezionate { list-style: none; padding: 0; margin: 0 0 6px; display: grid; gap: 8px; }
.pf-selezionata { display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: #eef0f6; border: 2px solid var(--blu); border-radius: 12px; }
.pf-selezionata .pf-risultato-foto, .pf-selezionata .pf-risultato-segno { width: 56px; height: 44px; }
.pf-selezionata-testo { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pf-selezionata-testo b { color: var(--blu-scuro); font-size: 16.5px; overflow-wrap: anywhere; }
.pf-selezionata-testo span { font-size: 14px; color: var(--grigio); }
.pf-togli { flex: none; background: none; border: 0; color: var(--grigio); font: 600 14px var(--sans); text-decoration: underline; cursor: pointer; padding: 8px; }
.pf-togli:hover { color: var(--rosso); }

/* il riepilogo prima del pagamento */
.pf-riquadro { background: var(--fondo); border: 1px solid var(--bordo); border-radius: 12px; padding: 18px 18px 10px; margin: 4px 0 18px; }
.pf-riepilogo-bozze { list-style: none; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.pf-riepilogo-bozze li { position: relative; padding-left: 20px; display: flex; flex-direction: column; gap: 2px; }
.pf-riepilogo-bozze li::before { content: ""; position: absolute; left: 0; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--oro); }
.pf-riepilogo-bozze li b { font-size: 17px; color: var(--blu-scuro); line-height: 1.3; overflow-wrap: anywhere; }
.pf-riepilogo-bozze li span { font-weight: 400; color: var(--grigio); font-size: 14.5px; }
.pf-riepilogo-bozze li span:empty { display: none; }
.pf-cambia { padding: 2px 0 12px; font-size: 14.5px; }
.pf-rp-riga { margin: 0 0 4px; padding: 10px 0 0; border-top: 1px solid var(--bordo); font-size: 15.5px; color: var(--testo2); display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.pf-rp-riga b { color: var(--blu-scuro); font-size: 17px; }
.pf-cambia-piano, .pf-cambia-servizi { padding: 0; font-size: 14px; }
.pf-rp-nota { margin: 0 0 8px; }
.pf-freq { margin: 12px 0 6px; padding-top: 12px; border-top: 1px solid var(--bordo); }
.pf-scelte-freq { grid-template-columns: 1fr 1fr; }
.pf-freq-scelta { min-height: 78px; padding: 12px 14px; align-items: flex-start; }
.pf-freq-prezzo { font-weight: 700; color: var(--oro-scuro) !important; font-size: 16px !important; }
.pf-freq-nota { font-size: 13px !important; }
.pf-prezzo { border-top: 1px solid var(--bordo); padding-top: 14px; margin-top: 10px; }
.pf-prezzo .prezzo-cifra { font-size: 40px; }
.pf-prezzo .pf-aiuto { margin: 6px 0 10px; }
.pf-riservato { margin: 0 0 2px; font-size: 13px; font-weight: 700; color: #1f5139; text-transform: uppercase; letter-spacing: .08em; }
.pf-listino { margin: -4px 0 6px; font-size: 15px; color: var(--grigio); text-decoration: line-through; }
.pf-righe { list-style: none; padding: 0; margin: 6px 0 8px; display: grid; gap: 4px; }
.pf-righe li { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; color: var(--testo2); }
.pf-righe li b { color: var(--blu-scuro); font-weight: 600; }
.pf-righe:empty { display: none; }
.pf-codice { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--bordo2); }
.pf-codice .pf-link { padding: 6px 0; font-size: 14.5px; }
.pf-codice-sotto { margin: 0 0 10px; }
.pf-codice-riga { display: flex; gap: 10px; align-items: stretch; }
.pf-codice-riga .pf-input { flex: 1; min-width: 0; text-transform: uppercase; letter-spacing: .06em; }
.pf-codice-riga .bottone { flex: none; min-height: 52px; padding: 10px 18px; }
.pf-codice-esito { margin: 8px 0 0; font-size: 15px; font-weight: 600; color: #1f5139; }
.pf-codice-esito:empty { display: none; }
.pf-codice-esito.pf-codice-no { color: var(--rosso); font-weight: 500; }
.pf-sostituto { margin: 0 0 18px; padding: 16px; border: 1px solid var(--bordo2); border-radius: 12px; background: #fff; }
.pf-linea { margin: 6px 0 22px 8px; }
.pf-linea .linea-cosa { font-size: 15.5px; }
.pf-paga { margin-top: 4px; }
.pf-paga[aria-busy="true"] { opacity: .7; }
.sotto-cta a { color: var(--blu); }

/* in basso: indietro, continua, salta */
.pf-piedi { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 22px; min-height: 48px; }
.pf-indietro { background: none; border: 0; padding: 10px 6px; color: var(--grigio); font: 600 15.5px var(--sans); cursor: pointer; border-radius: var(--r); }
.pf-indietro:hover { color: var(--blu); }
.pf-indietro-alto { display: block; margin: -10px 0 6px -6px; padding: 6px; font-size: 14.5px; }
.pf-avanti { margin-left: auto; min-width: 160px; }
.pf-salta { margin-left: auto; }
.pf-piedi .pf-avanti + .pf-salta { margin-left: 0; }

/* fatto */
.pf-fatto-segno { width: 64px; height: 64px; border-radius: 50%; background: #e5f0ea; margin: 4px 0 18px; position: relative; }
.pf-fatto-segno::after { content: ""; position: absolute; left: 21px; top: 18px; width: 22px; height: 12px; border-left: 4px solid var(--verde); border-bottom: 4px solid var(--verde); transform: rotate(-45deg); }
.pf-dove { font-weight: 600; color: var(--blu-scuro); background: var(--crema2); border-radius: var(--r); padding: 12px 14px; }

@media (max-width: 720px) {
  .pf { padding: 12px 12px 32px; }
  .pf-carta { padding: 20px 16px 16px; border-radius: 12px; }
  .pf-pct { font-size: 26px; min-width: 60px; }
  .pf-tappe li { font-size: 10.5px; gap: 4px; }
  .pf-tappa-t { line-height: 1.15; hyphens: auto; }
  .pf-tappe li.attuale .pf-tappa-t { font-size: 11px; }
  .pf-scelte-griglia { grid-template-columns: 1fr; }
  .pf-cerca-campi { grid-template-columns: 1fr 1fr; }
  .pf-cerca-nome { grid-column: 1 / -1; }
  .pf-cerca-vai { min-height: 52px; }
  .pf-piedi { flex-wrap: wrap; }
  .pf-avanti { width: 100%; margin-left: 0; order: -1; }
  .pf-salta { margin-left: auto; }
  .pf-risultato-pronta { display: none; }
  .pf-codice-riga { flex-wrap: wrap; }
  .pf-codice-riga .bottone { width: 100%; }
  .pf-scelte-freq { grid-template-columns: 1fr; }
  .pf-freq-scelta { min-height: 60px; }
}
@media (prefers-reduced-motion: reduce) { .pf-passo { animation: none; } .pf-barra-in { transition: none; } }

/* (19/10/2026, Sebastiano: le tecniche dei checkout) il riepilogo: la bozza pronta con la foto e la scadenza vera, cosa comprende,
   i servizi consigliati da aggiungere, il confronto, i segni di fiducia accanto al pagamento */
.pf-riepilogo-bozze li.con-foto { padding-left: 0; flex-direction: row; align-items: center; gap: 12px; }
.pf-riepilogo-bozze li.con-foto::before { display: none; }
.pf-rp-foto { flex: none; width: 64px; height: 52px; border-radius: 10px; object-fit: cover; background: var(--crema); }
.pf-rp-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-riepilogo-bozze li .pf-rp-pronta { display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--verde); }
.pf-riepilogo-bozze li .pf-rp-pronta::before { content: ""; width: 8px; height: 4px; border-left: 2px solid var(--verde); border-bottom: 2px solid var(--verde); transform: rotate(-45deg) translateY(-2px); }
.pf-riepilogo-bozze li .pf-rp-scade { font-size: 13.5px; font-weight: 600; color: var(--oro-scuro); }
.pf-comprende { margin: 10px 0 4px; padding: 12px 14px; border-radius: 10px; background: var(--crema); }
.pf-comprende-titolo { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--grigio); }
.pf-consigliati { margin: 12px 0 4px; padding-top: 10px; border-top: 1px solid var(--bordo); }
.pf-consigliati-lista { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pf-consigliati-lista li { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 12px; border: 1.5px dashed var(--bordo); border-radius: 10px; background: #fff; }
.pf-consigliato-testo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pf-consigliato-testo b { color: var(--blu-scuro); font-size: 15.5px; }
.pf-consigliato-prezzo { font-weight: 700; color: var(--oro-scuro); font-size: 14px; }
.pf-consigliato-cosa { font-size: 13.5px; color: var(--grigio); line-height: 1.35; }
.pf-consigliato-aggiungi { flex: none; padding: 10px 14px; min-height: 44px; }
.pf-agenzia { margin: 10px 0 0; font-size: 13.5px; color: var(--grigio); }
.pf-fiducia { list-style: none; padding: 0; margin: 4px 0 14px; display: grid; gap: 8px; }
.pf-fiducia li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--testo2); line-height: 1.3; }
.pf-fiducia svg { width: 20px; height: 20px; flex: none; color: var(--verde); }
.pf-recesso { margin-top: 4px; }

/* (19/10/2026 sera, Sebastiano: «sembra un checkout buttato lì… migliora graficamente il pagamento e le cose extra, cta accessibili») il
   riepilogo come un checkout vero: la bozza in cima (è già sua), un blocco per decisione, carte grandi a un tocco, il conto in righe con
   «Paghi oggi», le garanzie accanto al bottone, e sul telefono una barra in basso col totale quando il bottone non si vede */
#pf-passo-riepilogo, .pf-passo[data-passo="riepilogo"] { padding-bottom: 8px; }
.pf-ordine { margin: 0 0 6px; padding: 14px; border: 1px solid var(--bordo); border-radius: 14px; background: #fff; box-shadow: 0 1px 2px rgba(20,30,60,.05); }
.pf-ordine .pf-riepilogo-bozze { margin: 0 0 6px; }
.pf-ordine .pf-cambia { font-size: 14px; }
.pf-riepilogo-bozze li.con-foto .pf-rp-foto { width: 84px; height: 66px; border-radius: 12px; }
.pf-blocco { margin: 22px 0 0; }
.pf-blocco-testa { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.pf-blocco-titolo { margin: 0 0 10px; font: 700 13px/1.3 var(--sans, inherit); letter-spacing: .08em; text-transform: uppercase; color: var(--grigio); }
.pf-blocco-testa .pf-link { font-size: 14px; padding: 4px 0; }
.pf-facoltativo { font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--grigio); opacity: .8; }
.pf-segmenti { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pf-segmento { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-height: 64px; padding: 12px 14px; border: 2px solid var(--bordo2); border-radius: 12px; background: #fff; color: var(--testo); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s; }
.pf-segmento b { font-size: 16.5px; color: var(--blu-scuro); line-height: 1.2; }
.pf-segmento span { font-size: 13.5px; color: var(--grigio); }
.pf-segmento[aria-pressed="true"] { border-color: var(--blu); background: #eef0f6; box-shadow: inset 0 0 0 1px var(--blu); }
.pf-segmento:focus-visible, .pf-opzione:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }
.pf-blocco .pf-sostituto { margin-top: 12px; }
.pf-opzioni { display: grid; gap: 10px; }
.pf-opzione { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 72px; padding: 14px; border: 2px solid var(--bordo2); border-radius: 14px; background: #fff; color: var(--testo); font: inherit; text-align: left; cursor: pointer; transition: border-color .2s, background .2s, box-shadow .2s; }
.pf-opzione:hover { border-color: var(--blu); }
.pf-opzione[aria-pressed="true"] { border-color: var(--blu); background: #f3f5fa; box-shadow: inset 0 0 0 1px var(--blu); }
.pf-opzione-testo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.pf-opzione-testo b { font-size: 17px; line-height: 1.25; color: var(--blu-scuro); }
.pf-opzione-sotto { font-size: 13.5px; line-height: 1.35; color: var(--grigio); }
.pf-opzione-etichetta { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #6b4e0f; background: #f7ecd0; border-radius: 999px; padding: 3px 9px; }
.pf-opzione-prezzo { font: 700 16px/1.2 var(--serif); color: var(--oro-scuro); text-align: right; white-space: nowrap; }
.pf-opzione-prezzo:empty { display: none; }
.pf-radio { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--bordo2); background: #fff; position: relative; transition: border-color .2s; }
.pf-opzione[aria-pressed="true"] .pf-radio { border-color: var(--blu); }
.pf-opzione[aria-pressed="true"] .pf-radio::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--blu); }
.pf-opzione .pf-interruttore { margin-top: 0; }
.pf-opzione-servizio[aria-pressed="true"] .pf-interruttore { background: var(--verde); }
/* (V6, 20/10/2026) un servizio che richiede un calendario, finché il calendario non c'è; la riga interna del listino in prova; la Signature */
.pf-spenta { opacity: .55; }
.pf-spenta .pf-interruttore { filter: grayscale(1); }
.pf-servizi-nota:empty { display: none; }
.pf-interno { margin: 0 0 12px; padding: 8px 12px; border-radius: 10px; background: #fff3cd; color: #6b4e00; font-weight: 700; font-size: 14px; }
.pf-signature { margin-top: 14px; padding: 12px 14px; border: 1px dashed var(--bordo, #cfd6dd); border-radius: 12px; }
.pf-opzione-servizio[aria-pressed="true"] .pf-interruttore::after { left: 21px; }
.pf-blocco .pf-comprende { margin-top: 10px; }
.pf-freq { margin: 22px 0 0; padding-top: 0; border-top: 0; }
.pf-scelte-freq { grid-template-columns: 1fr 1fr; }
.pf-freq-scelta { position: relative; }
.pf-freq-badge { align-self: flex-start; font-size: 11.5px !important; font-weight: 700; color: #fff !important; background: var(--verde); border-radius: 999px; padding: 3px 9px; margin-bottom: 2px; }
.pf-totale { margin: 24px 0 0; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--bordo); box-shadow: 0 6px 20px rgba(20,30,60,.06); }
.pf-totale .pf-righe { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--bordo); }
.pf-totale .pf-righe li { font-size: 15px; }
.pf-totale-riga { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.pf-totale-oggi { font-weight: 700; font-size: 16px; color: var(--blu-scuro); padding-bottom: 6px; }
.pf-totale-cifra { display: flex; flex-direction: column; align-items: flex-end; }
.pf-totale-cifra .prezzo-cifra { font-size: 38px; line-height: 1; margin: 0; }
.pf-totale-cifra .prezzo-sotto { font-size: 13.5px; color: var(--grigio); margin: 4px 0 0; }
.pf-totale .prezzo-rinnovo { font-size: 14px; color: var(--testo2); margin: 12px 0 0; }
.pf-totale .pf-riservato { margin: 10px 0 0; }
.pf-totale .pf-codice { margin-top: 12px; }
.pf-agenzia { margin: 12px 2px 0; }
.pf-fiducia { margin: 18px 0 14px; padding: 12px 14px; border-radius: 12px; background: var(--crema); }
.pf-carte { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 10px 0 0; }
.pf-carte span { font-size: 12.5px; font-weight: 600; color: var(--testo2); border: 1px solid var(--bordo2); border-radius: 6px; padding: 3px 8px; background: #fff; }
.pf-paga { width: 100%; min-height: 58px; font-size: 18px; }
.pf-dopo { margin: 18px 0 0; border-top: 1px solid var(--bordo); padding-top: 12px; }
.pf-dopo summary { cursor: pointer; font-weight: 700; color: var(--blu-scuro); padding: 8px 0; min-height: 44px; display: flex; align-items: center; }
.pf-dopo .pf-linea { margin-top: 10px; }
.pf-barra-paga { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--bordo); box-shadow: 0 -8px 24px rgba(20,30,60,.12); }
.pf-barra-paga-testo { display: flex; flex-direction: column; line-height: 1.15; }
.pf-barra-paga-testo small { font-size: 12.5px; color: var(--grigio); }
.pf-barra-paga-testo b { font: 700 22px/1.1 var(--serif); color: var(--blu-scuro); }
.pf-barra-paga-vai { min-height: 50px; padding: 10px 18px; font-size: 16px; white-space: nowrap; }
@media (min-width: 721px) { .pf-barra-paga { display: none !important; } .pf-opzioni { gap: 12px; } }
@media (max-width: 380px) { .pf-scelte-freq { grid-template-columns: 1fr; } .pf-opzione { grid-template-columns: auto 1fr; } .pf-opzione-prezzo { grid-column: 2; text-align: left; } }
.pf-passo .pf-titolo:focus { outline: none; }   /* il titolo prende il fuoco per i lettori di schermo, senza il riquadro */
.pf-opzione-etichetta { white-space: nowrap; }
.pf-dopo summary { list-style: none; justify-content: space-between; }
.pf-dopo summary::-webkit-details-marker { display: none; }
.pf-dopo summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--blu-scuro); border-bottom: 2px solid var(--blu-scuro); transform: rotate(45deg); transition: transform .2s; margin-right: 6px; }
.pf-dopo[open] summary::after { transform: rotate(-135deg); }
.pf-scelte-freq .pf-freq-prezzo { font-size: 15px !important; }