/* ── IA Iscriviti — Nuovo form iscrizione autonoma ──────────────────────── */
:root{
  --ia-blue:#22457F;
  --ia-red:#c0392b;
  --ia-green:#27ae60;
  --ia-orange:#e67e22;
  --ia-gray:#f8f9fa;
  --ia-border:#dee2e6;
  --ia-text:#212529;
  --ia-muted:#6c757d;
  --ia-radius:12px;
  --ia-shadow:0 2px 16px rgba(0,0,0,.08);
}

/* Wrapper */
.ia-iscriviti-wrap{max-width:680px;margin:0 auto;font-family:'Inter',system-ui,sans-serif;color:var(--ia-text);overflow-wrap:break-word;word-wrap:break-word}
.ia-iscriviti-wrap img{max-width:100%;height:auto}
/* box-sizing coerente: evita che pulsanti/campi a width:100% con padding sforino
   il viewport su mobile (causa tipica della necessità di "modalità desktop"). */
.ia-iscriviti-wrap *{box-sizing:border-box}

/* Loader iniziale (visibile subito, prima che il JS costruisca progress bar e step) */
.ia-iscriviti-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;padding:3.5rem 1rem;text-align:center}
.ia-iscriviti-spinner{width:40px;height:40px;border-radius:50%;border:4px solid var(--ia-border);border-top-color:var(--ia-blue);animation:iaSpin .8s linear infinite}
.ia-iscriviti-loader p{margin:0;color:var(--ia-muted);font-size:.95rem;font-weight:500}
@keyframes iaSpin{to{transform:rotate(360deg)}}

/* Progress bar */
.ia-progress{display:flex;align-items:center;margin-bottom:2rem;gap:0}
.ia-progress-step{display:flex;flex-direction:column;align-items:center;flex:1;position:relative}
.ia-progress-step::before{content:'';position:absolute;top:18px;left:50%;width:100%;height:2px;background:var(--ia-border);z-index:0}
.ia-progress-step:last-child::before{display:none}
.ia-progress-dot{width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--ia-border);display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;position:relative;z-index:1;transition:all .3s}
.ia-progress-step.active .ia-progress-dot{background:var(--ia-blue);border-color:var(--ia-blue);color:#fff}
.ia-progress-step.done .ia-progress-dot{background:var(--ia-green);border-color:var(--ia-green);color:#fff}
.ia-progress-step.done::before{background:var(--ia-green)}
.ia-progress-label{font-size:.68rem;margin-top:.35rem;color:var(--ia-muted);text-align:center;line-height:1.2}
.ia-progress-step.active .ia-progress-label{color:var(--ia-blue);font-weight:600}

/* Card step */
.ia-step-card{background:#fff;border-radius:var(--ia-radius);box-shadow:var(--ia-shadow);padding:2rem;margin-bottom:1rem;display:none}
.ia-step-card.active{display:block;animation:iaFadeIn .3s ease}
@keyframes iaFadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Step header */
.ia-step-header{margin-bottom:1.5rem}
.ia-step-emoji{font-size:2.2rem;margin-bottom:.5rem;display:block}
.ia-step-title{font-size:1.4rem;font-weight:700;color:var(--ia-blue);margin:0 0 .3rem}
.ia-step-subtitle{color:var(--ia-muted);font-size:.9rem;margin:0}

/* Big choice buttons */
.ia-choice-group{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.5rem 0}
.ia-choice-btn{border:2px solid var(--ia-border);background:#fff;border-radius:var(--ia-radius);padding:1.2rem 1rem;cursor:pointer;text-align:center;transition:all .2s;font-size:1rem;font-weight:600;color:var(--ia-text)}
.ia-choice-btn:hover{border-color:var(--ia-blue);color:var(--ia-blue);background:#f0f4ff}
.ia-choice-btn.selected{border-color:var(--ia-blue);background:var(--ia-blue);color:#fff}
.ia-choice-btn .ia-choice-icon{font-size:2rem;display:block;margin-bottom:.5rem}

/* Form fields */
.ia-field{margin-bottom:1.25rem}
.ia-label{display:block;font-weight:600;font-size:.875rem;margin-bottom:.4rem;color:var(--ia-text)}
.ia-label .required{color:var(--ia-red)}
.ia-input,.ia-select{width:100%;padding:.65rem .9rem;border:1.5px solid var(--ia-border);border-radius:8px;font-size:.95rem;color:var(--ia-text);background:#fff;transition:border .2s;box-sizing:border-box}
.ia-input:focus,.ia-select:focus{outline:none;border-color:var(--ia-blue);box-shadow:0 0 0 3px rgba(34,69,127,.12)}
.ia-input.error,.ia-select.error{border-color:var(--ia-red);background:#fff5f5;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
#ia-aus-wrap.error{border:1.5px solid var(--ia-red);background:#fff5f5}
.ia-hint{font-size:.78rem;color:var(--ia-muted);margin-top:.3rem}
.ia-field-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ia-field-row.trio{grid-template-columns:1fr 1fr 1fr}

/* Document upload — layout a 2 colonne */
/* Layout sempre impilato (upload sopra, anteprima sotto a piena larghezza): mostra il documento
   il più grande possibile senza tagli, su qualunque dimensione di schermo. */
.ia-doc-layout{display:grid;grid-template-columns:1fr;gap:1.25rem}
.ia-doc-left{}
.ia-doc-right{}
.ia-preview-placeholder{border:2px dashed var(--ia-border);border-radius:var(--ia-radius);background:var(--ia-gray);min-height:220px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ia-muted);padding:1.5rem;gap:.5rem}
.ia-preview-placeholder p{margin:0;font-size:.85rem;line-height:1.4}
.ia-doc-preview-media{width:100%;border-radius:var(--ia-radius);border:1.5px solid var(--ia-border);background:#fff}
img.ia-doc-preview-media{max-height:min(70vh,560px);object-fit:contain}
iframe.ia-doc-preview-media{height:min(70vh,560px);border:none}
@media(max-width:600px){
  img.ia-doc-preview-media{max-height:60vh}
  iframe.ia-doc-preview-media{height:60vh}
}

/* Document upload zone */
.ia-upload-zone{border:2.5px dashed var(--ia-border);border-radius:var(--ia-radius);padding:2rem 1.25rem;text-align:center;cursor:pointer;transition:all .3s;background:var(--ia-gray);position:relative;display:block}
.ia-upload-zone:hover{border-color:var(--ia-blue);background:#f0f4ff}
.ia-upload-zone.dragover{border-color:var(--ia-blue);background:#e8eeff;transform:scale(1.02)}
.ia-upload-zone.uploaded{border-color:var(--ia-green);background:#f0fff4}
.ia-upload-icon{font-size:3rem;margin-bottom:.75rem;display:block}
.ia-upload-title{font-size:1.05rem;font-weight:700;margin-bottom:.3rem}
.ia-upload-subtitle{color:var(--ia-muted);font-size:.85rem}
.ia-upload-input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.ia-upload-preview{max-width:100%;border-radius:8px;margin-top:1rem;display:none}

/* OCR loading */
.ia-ocr-loading{text-align:center;padding:1.5rem}
.ia-ocr-spinner{width:48px;height:48px;border:4px solid var(--ia-border);border-top-color:var(--ia-blue);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto .75rem}
@keyframes spin{to{transform:rotate(360deg)}}

/* OCR result */
.ia-ocr-result{background:#f0fff4;border:1.5px solid #86efac;border-radius:var(--ia-radius);padding:1.2rem;margin-bottom:1.5rem}
.ia-ocr-result-title{font-weight:700;color:var(--ia-green);margin-bottom:.75rem;display:flex;align-items:center;gap:.4rem}

/* Radio & checkbox */
.ia-radio-group,.ia-check-group{display:flex;flex-direction:column;gap:.5rem}
.ia-radio-item,.ia-check-item{display:flex;align-items:flex-start;gap:.6rem;cursor:pointer;padding:.5rem .75rem;border-radius:8px;border:1.5px solid var(--ia-border);transition:all .2s}
.ia-radio-item:hover,.ia-check-item:hover{border-color:var(--ia-blue);background:#f0f4ff}
.ia-radio-item input,.ia-check-item input{margin-top:.15rem;flex-shrink:0;accent-color:var(--ia-blue);width:16px;height:16px}
.ia-radio-item.selected,.ia-check-item.checked{border-color:var(--ia-blue);background:#f0f4ff}

/* Privacy section */
.ia-privacy-block{border:1.5px solid var(--ia-border);border-radius:8px;padding:1rem;margin-bottom:1rem}
.ia-privacy-text{max-height:120px;overflow-y:auto;font-size:.8rem;color:var(--ia-muted);margin-top:.5rem;line-height:1.6}

/* Firma pad */
.ia-firma-wrap{border:1.5px solid var(--ia-border);border-radius:8px;background:#fafafa;position:relative}
#ia-firma-canvas{display:block;width:100%;height:160px;border-radius:8px;cursor:crosshair;touch-action:none}
.ia-firma-actions{display:flex;gap:.5rem;padding:.5rem;border-top:1px solid var(--ia-border)}
.ia-firma-clear{font-size:.8rem;color:var(--ia-red);background:none;border:none;cursor:pointer;padding:.25rem .5rem}

/* OTP */
.ia-otp-wrap{display:flex;gap:.5rem;align-items:center}
.ia-otp-input{flex:1}
.ia-otp-btn{white-space:nowrap;padding:.65rem 1rem;background:var(--ia-blue);color:#fff;border:none;border-radius:8px;cursor:pointer;font-size:.85rem;font-weight:600}
.ia-otp-btn:disabled{opacity:.5;cursor:default}
.ia-otp-ok{color:var(--ia-green);font-weight:700}

/* Buttons */
.ia-btn-wrap{display:flex;gap:1rem;justify-content:flex-end;margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--ia-border)}
.ia-btn{padding:.8rem 2rem;border:none;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;transition:all .2s}
.ia-btn-prev{background:var(--ia-gray);color:var(--ia-text)}
.ia-btn-prev:hover{background:#e9ecef}
.ia-btn-next{background:var(--ia-blue);color:#fff}
.ia-btn-next:hover{background:#1a3560}
.ia-btn-next:disabled{opacity:.5;cursor:default}
.ia-btn-submit{background:var(--ia-green);color:#fff}
.ia-btn-submit:hover{background:#219a52}

/* Alert */
/* Niente display:flex: quasi ovunque il contenuto è testo semplice con emoji/<strong>/<br>
   inline, non un'icona separata in un proprio elemento — con flex ogni nodo di testo e ogni
   <strong> diventa un elemento flex a sé, spezzando il flusso naturale del testo in blocchi
   invece di un normale paragrafo che va a capo. */
.ia-alert{border-radius:8px;padding:.8rem 1rem;margin:.75rem 0;font-size:.875rem;line-height:1.5}
.ia-alert-info{background:#dbeafe;color:#1e40af;border:1px solid #93c5fd}
.ia-alert-warn{background:#fef9c3;color:#854d0e;border:1px solid #fde047}
.ia-alert-error{background:#fee2e2;color:#991b1b;border:1px solid #fca5a5}
.ia-alert-success{background:#dcfce7;color:#166534;border:1px solid #86efac}

/* Success screen */
.ia-success-screen{text-align:center;padding:3rem 1.5rem}
.ia-success-icon{width:96px;height:96px;margin:0 auto 1rem;display:block}
.ia-success-title{font-size:1.8rem;font-weight:800;color:var(--ia-blue);margin-bottom:.5rem}
.ia-success-subtitle{color:var(--ia-muted);font-size:1.05rem}

/* CF generator */
.ia-cf-preview{font-family:monospace;font-size:1.3rem;letter-spacing:.15em;font-weight:700;color:var(--ia-blue);background:#f0f4ff;padding:.5rem 1rem;border-radius:8px;text-align:center}

/* ── Isolamento dalle regole omonime di public.css ───────────────────────────
   public.css e questo foglio sono caricati insieme e condividono alcuni nomi di
   classe (.ia-step-header, ecc.). public.css definisce .ia-step-header come flex
   row (pensato per l'altro form): qui va forzato a blocco, altrimenti emoji,
   titolo e sottotitolo finiscono affiancati e il titolo si spezza parola per
   parola. La maggiore specificità (.ia-iscriviti-wrap + classe) vince sempre. */
.ia-iscriviti-wrap .ia-step-header{display:block}

/* Riga "Codice Fiscale + bottone Precompila": su desktop l'input cresce e il
   bottone resta a contenuto; su mobile va a capo con input e bottone a piena
   larghezza (invece di schiacciare l'input a pochi pixel). */
.ia-cf-lookup-row{display:flex;gap:.5rem;flex-wrap:wrap}
.ia-cf-lookup-row .ia-input{flex:1 1 180px;min-width:0}
.ia-cf-lookup-row .ia-btn{flex:0 0 auto}
@media(max-width:600px){
  .ia-cf-lookup-row .ia-input{flex:1 1 100%}
  .ia-cf-lookup-row .ia-btn{flex:1 1 100%}
}

/* Mobile */
@media(max-width:600px){
  .ia-iscriviti-wrap{padding:0 4px}
  .ia-step-card{padding:1.25rem}
  .ia-step-title{font-size:1.2rem}
  .ia-choice-group{grid-template-columns:1fr}
  .ia-field-row{grid-template-columns:1fr}
  .ia-field-row.trio{grid-template-columns:1fr}
  .ia-btn-wrap{flex-direction:column-reverse}
  .ia-btn{width:100%;text-align:center}
  .ia-progress-label{display:none}
  .ia-progress-dot{width:30px;height:30px}
  .ia-otp-wrap{flex-wrap:wrap}
  .ia-otp-input{flex:1 1 100%}
  .ia-otp-btn{flex:1 1 100%}
  .ia-cf-preview{font-size:1.05rem;letter-spacing:.08em;overflow-x:auto}
}