/* Registrazione / accesso clienti — stile coerente con il sito (Roboto, rosso #ee1d23, campi arrotondati) */
.reg-body { background: #f7f7f8; font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif; }
.reg-main { padding: 40px 16px 70px; }

.reg-box {
    max-width: 760px; margin: 0 auto; background: #fff; border-radius: 20px;
    padding: 36px 40px 44px; box-shadow: 0 6px 30px rgba(0, 0, 0, .06);
}
.reg-box-stretto { max-width: 460px; }
.reg-titolo { font-weight: 900; font-size: 30px; letter-spacing: -.5px; color: #111; margin: 0 0 6px; text-align: center; }
.reg-sottotitolo { text-align: center; color: #555; margin: 0 0 26px; font-size: 15px; line-height: 1.5; }
.reg-box a { color: #ee1d23; font-weight: 500; }

/* schede Privato / Business */
.reg-schede { display: flex; background: #f0f0f0; border-radius: 30px; padding: 5px; margin: 0 auto 28px; max-width: 420px; }
.reg-scheda {
    flex: 1; text-align: center; padding: 11px 0; border-radius: 25px; text-decoration: none;
    font-weight: 700 !important; color: #555 !important; transition: background-color .2s, color .2s;
}
.reg-scheda.attiva { background: #ee1d23; color: #fff !important; }

/* sezioni */
.reg-form fieldset { border: 0; border-top: 1px solid #eee; margin: 0; padding: 22px 0 6px; }
.reg-form fieldset:first-of-type { border-top: 0; padding-top: 0; }
.reg-form legend { font-weight: 900; font-size: 18px; color: #111; padding: 0; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.reg-form legend span {
    display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: #ee1d23; color: #fff;
    font-size: 14px; align-items: center; justify-content: center;
}
.reg-form h3 { font-size: 15px; font-weight: 700; margin: 6px 0 12px; color: #333; }

.reg-riga { display: flex; gap: 14px; }
.reg-riga > .reg-campo { flex: 1; min-width: 0; }
.reg-riga > .reg-campo-corto { flex: 0 0 120px; }
.reg-riga-via > .reg-campo-corto { flex-basis: 110px; }

.reg-campo { display: block; margin-bottom: 14px; position: relative; }
.reg-campo > span:first-child { display: block; font-size: 13px; font-weight: 500; color: #444; margin: 0 0 6px 4px; }
.reg-campo input[type=text], .reg-campo input[type=email], .reg-campo input[type=tel], .reg-campo input[type=password],
.reg-campo input[type=date], .reg-campo select {
    width: 100%; box-sizing: border-box; height: 50px; border: 2px solid #e2e2e2; border-radius: 20px; padding: 0 18px;
    font: 16px 'Roboto', Arial, sans-serif; color: #111; background-color: #fff; transition: border-color .2s; display: block;
}
.reg-campo select {
    appearance: none; -webkit-appearance: none; padding-right: 36px; cursor: pointer;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="%23ee1d23" d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat; background-position: right 10px center; background-size: 24px;
}
.reg-campo input:focus, .reg-campo select:focus { outline: none; border-color: #ee1d23; }
.reg-campo input[readonly] { background: #fafafa; }
.reg-campo small { display: block; color: #888; font-size: 12px; margin: 5px 0 0 6px; }
.reg-cf { font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }

.reg-scelte { display: flex; gap: 22px; height: 50px; align-items: center; padding-left: 4px; }
.reg-scelte label, .reg-check { cursor: pointer; }
.reg-scelte input, .reg-check input { accent-color: #ee1d23; width: 18px; height: 18px; }
.reg-scelte label { display: flex; align-items: center; gap: 7px; font-size: 15px; }

.reg-check { display: flex; align-items: flex-start; gap: 10px; margin: 6px 0 12px; font-size: 14px; color: #333; line-height: 1.45; }
.reg-check input { flex: 0 0 auto; margin-top: 1px; }

/* consensi facoltativi */
.reg-consensi { background: #fafafa; border: 1px solid #eee; border-radius: 16px; padding: 14px 16px 4px; margin: 16px 0 6px; }
.reg-form .reg-consensi h3 { margin: 0 0 4px; }
.reg-consensi-nota { font-size: 13px; color: #666; margin: 0 0 12px; line-height: 1.45; }
.reg-consensi .reg-check { font-size: 13px; color: #444; }
.reg-form-consensi { margin-top: 26px; }
.reg-bottone-secondario { background: #fff; color: #ee1d23 !important; border: 2px solid #ee1d23; height: 48px; font-size: 16px; margin: 4px 0 26px; }
.reg-bottone-secondario:hover { background: #fff0f0; }

.reg-errore { display: block; color: #ee1d23; font-size: 13px; margin: 5px 0 0 6px; min-height: 0; }
.reg-errore:empty { display: none; }
.reg-campo-errore input, .reg-campo-errore select { border-color: #ee1d23 !important; background-color: #fff6f6; }

.reg-link { background: none; border: 0; padding: 0; color: #ee1d23; font: 500 14px 'Roboto', Arial, sans-serif; cursor: pointer; text-decoration: underline; }

.reg-bottone {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; margin-top: 22px;
    background: #ee1d23; color: #fff !important; border: 0; border-radius: 27px; cursor: pointer;
    font: 900 18px 'Roboto', Arial, sans-serif; letter-spacing: -.3px; text-decoration: none; transition: background-color .2s;
}
.reg-bottone:hover { background: #c9151a; }

/* comuni: suggerimenti */
.reg-comune { position: relative; }
.reg-suggerimenti {
    position: absolute; z-index: 30; left: 0; right: 0; top: 78px; margin: 0; padding: 6px 0; list-style: none;
    background: #fff; border: 2px solid #ee1d23; border-radius: 16px; box-shadow: 0 8px 24px rgba(0, 0, 0, .12); max-height: 290px; overflow: auto;
}
.reg-suggerimenti li { padding: 9px 16px; cursor: pointer; font-size: 15px; }
.reg-suggerimenti li small { color: #888; }
.reg-suggerimenti li:hover, .reg-suggerimenti li.attivo { background: #fff0f0; }
.reg-suggerimenti li.vuoto { color: #888; cursor: default; }

/* partita IVA */
.reg-piva-esito { display: block; font-size: 13px; margin: 6px 0 0 6px; color: #666; }
.reg-piva-esito:empty { display: none; }
.reg-piva-esito.esito-verificata { color: #1d8a3a; font-weight: 500; }
.reg-piva-esito.esito-da_verificare { color: #b26a00; }

/* avvisi */
.reg-avviso { border-radius: 14px; padding: 13px 18px; margin-bottom: 20px; font-size: 15px; line-height: 1.45; }
.reg-avviso-errore { background: #fff0f0; color: #b3151a; border: 1px solid #f5c2c4; }
.reg-avviso-ok { background: #effaf2; color: #1d6b32; border: 1px solid #bfe5c9; }
.reg-avviso-info { background: #fff8eb; color: #8a5400; border: 1px solid #f2dbb0; }

/* Google */
.reg-google { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; }
.reg-oppure { width: 100%; display: flex; align-items: center; gap: 12px; color: #888; font-size: 14px; margin: 18px 0 20px; }
.reg-oppure::before, .reg-oppure::after { content: ''; flex: 1; height: 1px; background: #e5e5e5; }

/* area cliente */
.reg-dati { margin: 10px 0 0; }
.reg-dato { display: flex; gap: 16px; padding: 12px 4px; border-bottom: 1px solid #f0f0f0; }
.reg-dato dt { flex: 0 0 170px; color: #777; font-size: 14px; }
.reg-dato dd { margin: 0; font-weight: 500; color: #111; }
.reg-azioni { display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* area cliente: schede e telefoni */
.reg-box-largo { max-width: 860px; }
.area-schede { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 18px 0 22px; }
.area-scheda {
    padding: 9px 16px; border-radius: 22px; background: #f0f0f0; text-decoration: none;
    font-weight: 700 !important; font-size: 14px; color: #555 !important; transition: background-color .2s, color .2s;
}
.area-scheda span { display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 4px; border-radius: 10px; background: #fff; color: #555; font-size: 12px; text-align: center; }
.area-scheda.attiva { background: #ee1d23; color: #fff !important; }
.area-scheda.attiva span { color: #ee1d23; }
.area-intro { color: #666; font-size: 14px; line-height: 1.5; margin: 0 0 16px; text-align: center; }
.area-vuoto { text-align: center; color: #888; padding: 26px 0; margin: 0; }
.area-sottotitolo { font-size: 17px; font-weight: 900; margin: 26px 0 10px; color: #111; }
.area-totale { text-align: right; font-size: 16px; margin: 6px 4px 0; }

.tel {
    display: grid; grid-template-columns: 64px 1fr auto; grid-template-areas: "foto info prezzo" "foto azioni azioni";
    gap: 4px 16px; align-items: start; padding: 16px; border: 1px solid #eee; border-radius: 16px; margin-bottom: 12px; background: #fff;
}
.tel-con-scelta { grid-template-columns: auto 64px 1fr auto; grid-template-areas: "scelta foto info prezzo" "scelta foto azioni azioni"; }
.tel-scelta { grid-area: scelta; align-self: center; cursor: pointer; }
.tel-scelta input { accent-color: #ee1d23; width: 20px; height: 20px; }
.tel-foto { grid-area: foto; width: 64px; height: 64px; object-fit: contain; }
.tel-info { grid-area: info; min-width: 0; }
.tel-info h3 { margin: 0 0 3px; font-size: 17px; font-weight: 900; color: #111; }
.tel-info h3 span { font-weight: 500; color: #666; font-size: 15px; }
.tel-meta { margin: 0 0 6px; font-size: 13px; color: #777; }
.tel-scaduta { color: #b3151a; }
.tel-stato { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 13px; font-weight: 700; background: #fff8eb; color: #8a5400; margin-bottom: 6px; }
.tel-stato-spediti { background: #eef4ff; color: #1f4fa3; }
.tel-stato-pagati { background: #effaf2; color: #1d6b32; }
.tel-stato-annullati { background: #f0f0f0; color: #777; }
.tel-dettagli summary { cursor: pointer; font-size: 13px; color: #ee1d23; font-weight: 500; }
.tel-dettagli dl { margin: 8px 0 0; font-size: 13px; }
.tel-dettagli dl div { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; border-bottom: 1px solid #f3f3f3; }
.tel-dettagli dt { color: #777; }
.tel-dettagli dd { margin: 0; font-weight: 500; }
.tel-prezzo { grid-area: prezzo; font-size: 20px; font-weight: 900; color: #111; text-align: right; white-space: nowrap; }
.tel-prezzo small { display: block; font-size: 12px; font-weight: 400; color: #888; }
.tel-azioni { grid-area: azioni; }
.tel-azioni form { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 6px 0 0; }
.tel-bottone {
    display: inline-flex; align-items: center; height: 40px; padding: 0 20px; border: 0; border-radius: 20px; cursor: pointer;
    background: #ee1d23; color: #fff !important; font: 700 15px 'Roboto', Arial, sans-serif; text-decoration: none;
}
.tel-bottone:hover { background: #c9151a; }
.tel-link { background: none; border: 0; padding: 0; color: #888; font: 500 14px 'Roboto', Arial, sans-serif; cursor: pointer; text-decoration: underline; }
.reg-bottone:disabled { background: #ccc; cursor: not-allowed; }

/* moduli del telefono venduto */
.tel-moduli { list-style: none; margin: 8px 0 4px; padding: 10px 14px; background: #fafafa; border: 1px solid #f0f0f0; border-radius: 12px; font-size: 14px; }
.tel-moduli li { padding: 3px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tel-moduli a { font-weight: 700 !important; }
.mod-obbligatorio, .mod-facoltativo { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; padding: 2px 8px; border-radius: 10px; }
.mod-obbligatorio { background: #fff0f0; color: #b3151a; }
.mod-facoltativo { background: #f0f0f0; color: #666; }
.area-venduto { border: 2px solid #ee1d23; border-radius: 16px; padding: 18px 22px; margin-bottom: 20px; background: #fff; }
.area-venduto h2 { font-size: 19px; font-weight: 900; margin: 0 0 6px; color: #111; }
.area-venduto p { margin: 6px 0; font-size: 15px; color: #333; }
.area-venduto ol { margin: 8px 0; padding-left: 22px; font-size: 15px; line-height: 1.55; }
.area-venduto li { margin-bottom: 6px; }

/* richiesta di ritiro */
.ritiro-lista { list-style: none; margin: 0; padding: 0; }
.ritiro-lista li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 4px; border-bottom: 1px solid #f0f0f0; font-size: 15px; }
.ritiro-lista .ritiro-totale { border-bottom: 0; font-size: 17px; }
.ritiro-nota { font-size: 13px; color: #777; margin: 6px 4px 0; }
.reg-iban { text-transform: uppercase; letter-spacing: .5px; }
.reg-campo textarea {
    width: 100%; box-sizing: border-box; border: 2px solid #e2e2e2; border-radius: 20px; padding: 12px 18px;
    font: 16px 'Roboto', Arial, sans-serif; color: #111; resize: vertical; display: block;
}
.reg-campo textarea:focus { outline: none; border-color: #ee1d23; }

.ritiro-nota-sopra { margin: 0 4px 14px; }
.ritiro-domanda { font-size: 15px; color: #333; margin: 0 4px 10px; }
.ritiro-opzione {
    display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; margin-bottom: 10px; border: 2px solid #e2e2e2; border-radius: 16px;
    cursor: pointer; transition: border-color .2s, background-color .2s;
}
.ritiro-opzione:has(input:checked) { border-color: #ee1d23; background: #fff8f8; }
.ritiro-opzione input { accent-color: #ee1d23; width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 auto; }
.ritiro-opzione strong { display: block; font-size: 15px; color: #111; }
.ritiro-indirizzo { display: block; margin-top: 6px; font-size: 14px; color: #444; line-height: 1.5; }
.ritiro-opzione.reg-campo-errore { border-color: #ee1d23; background: #fff6f6; }
.ritiro-opzione + .reg-errore { margin: -4px 0 10px 6px; }
.ritiro-nuovo { margin-top: 8px; }
.ritiro-via { background: #fff8eb; border: 1px solid #f2dbb0; border-radius: 14px; padding: 12px 16px 4px; margin: 0 0 12px; font-size: 14px; color: #6b4200; }
.ritiro-via p { margin: 0 0 8px; }
.ritiro-suggerimenti { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.ritiro-suggerimento {
    border: 2px solid #ee1d23; background: #fff; color: #ee1d23; border-radius: 18px; padding: 6px 14px; cursor: pointer;
    font: 700 14px 'Roboto', Arial, sans-serif;
}
.ritiro-suggerimento:hover, .ritiro-suggerimento.scelta { background: #ee1d23; color: #fff; }
.ritiro-fasce { display: flex; flex-wrap: wrap; gap: 10px; }
.ritiro-fascia { cursor: pointer; }
.ritiro-fascia input { position: absolute; opacity: 0; pointer-events: none; }
.ritiro-fascia span {
    display: inline-flex; align-items: center; height: 46px; padding: 0 20px; border: 2px solid #e2e2e2; border-radius: 23px;
    font-size: 15px; font-weight: 500; color: #333; background: #fff; transition: border-color .2s, background-color .2s;
}
.ritiro-fascia input:checked + span { border-color: #ee1d23; background: #ee1d23; color: #fff; }
.ritiro-fascia input:focus-visible + span { outline: 2px solid #111; outline-offset: 2px; }
.reg-campo-errore .ritiro-fascia span { border-color: #ee1d23; }
.reg-bottone:disabled { background: #999; cursor: wait; }

/* area cliente: spedizione (etichetta, ritiro prenotato, tracking) */
.sped { border: 2px solid #e8eefc; background: #f7f9ff; border-radius: 16px; padding: 14px 18px; margin: 0 0 10px; font-size: 14px; color: #333; }
.sped-errore { border-color: #f2dbb0; background: #fffaf0; }
.sped h3 { margin: 0 0 6px; font-size: 16px; font-weight: 900; color: #111; }
.sped p { margin: 4px 0; line-height: 1.5; }
.sped-azioni { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 10px; }
.sped-eventi summary { cursor: pointer; color: #ee1d23; font-weight: 500; margin-top: 6px; }
.sped-eventi ol { list-style: none; margin: 8px 0 0; padding: 0; }
.sped-eventi li { padding: 5px 0; border-bottom: 1px solid #e9edf7; }
.sped-eventi li small { color: #777; display: block; }
.sped-riprova { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; margin-top: 10px; }
.sped-riprova .reg-campo { margin: 0; flex: 1 1 220px; }
.sped-gruppo { margin-bottom: 22px; }

.reg-trappola { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
[hidden] { display: none !important; }

@media (max-width: 640px) {
    .reg-main { padding: 20px 10px 50px; }
    .reg-box { padding: 26px 18px 32px; border-radius: 16px; }
    .reg-titolo { font-size: 25px; }
    .reg-riga { flex-wrap: wrap; gap: 0 12px; }
    .reg-riga > .reg-campo { flex: 1 1 100%; }
    .reg-riga > .reg-campo-corto { flex: 1 1 calc(50% - 6px); }
    .reg-riga-via > .reg-campo:first-child { flex-basis: 100%; }
    .reg-dato { flex-direction: column; gap: 2px; }
    .reg-dato dt { flex-basis: auto; }
    .tel { grid-template-columns: 52px 1fr; grid-template-areas: "foto info" "foto prezzo" "azioni azioni"; padding: 14px 12px; gap: 4px 12px; }
    .tel-con-scelta { grid-template-columns: auto 52px 1fr; grid-template-areas: "scelta foto info" "scelta foto prezzo" "azioni azioni azioni"; }
    .tel-foto { width: 52px; height: 52px; }
    .tel-prezzo { text-align: left; }
}