/* ============================================================
   auth.css — Design system condiviso delle pagine di autenticazione
   Nuvolai (login, signup, credential-recovery).

   FONTE UNICA degli stili auth: NON duplicare questi stili nei
   singoli .php. Modifica qui per cambiare TUTTE le pagine auth.

   Tema: dark (#000), font Outfit, accento teal #55d5cc, cursore
   custom, logo nuvolai con intro in dissolvenza dal centro.

   Eccezione esplicita alla regola "design congelato / solo Bootstrap"
   del CLAUDE.md (sez. 12): vedi sezione "Design system pagine auth".
   ============================================================ */

/* I token dei campi, gli stessi del kit (nuvola.css, «L'AUTOFILL DEL BROWSER»): auth.css non carica il kit, quindi li ripete.
   Il contorno di un controllo deve arrivare a 3:1 sul fondo (NOTTE-OPENAPI-PIPELINE-TICKET-SVUOTA, 09/10/2026: era #3c3c3c, 1,9:1). */
:root { --nv-campo-bordo: #6b6b6b; }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* --- Puntino cursore custom (allineato a nuvola.css) --- */
.cursor-dot {
  position: fixed;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  --cursor-color: #55d5cc;
  background: var(--cursor-color);
  transform: translate(-50%, -50%);
  animation: cursor-pulse 1.5s infinite;
  transition: opacity .15s ease, transform .15s ease;
  visibility: hidden;
}
.cursor-dot.cursor-armed { visibility: visible; }
.cursor-dot.is-hidden { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
@keyframes cursor-pulse {
  0%   { transform: translate(-50%, -50%) scale(1);   box-shadow: 0 0 0 0 color-mix(in srgb, var(--cursor-color) 70%, transparent); }
  70%  { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 0 18px color-mix(in srgb, var(--cursor-color) 0%, transparent); }
  100% { transform: translate(-50%, -50%) scale(1);   box-shadow: 0 0 0 0 color-mix(in srgb, var(--cursor-color) 0%, transparent); }
}

/* Cursore "manina" teal sugli elementi interattivi */
a, a svg, button, button svg, [onclick], [onclick] svg,
[style*='cursor:pointer'], label,
.btn, .form-control, .campoinput, .input-field, select, input {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640' width='28' height='28'%3E%3Cpath fill='%2355d5cc' d='M118.5 392.9C123.5 399.8 151.1 437.8 201.3 507.2C225.4 540.4 263.9 560.1 304.9 560.1L439.9 560.1C488.5 560.1 527.9 520.7 527.9 472.1L527.9 312.1L455.9 312.1L455.9 280.1L375.9 280.1L375.9 256.1L295.9 256.1L295.9 80.1L223.9 80.1L223.9 393.7C221.7 395.9 211.1 406.5 208.9 408.7C204.3 402.4 178.2 366.3 170.2 355.4L118.5 392.9zM304 368L320 368L320 496L304 496L304 368zM368 368L384 368L384 496L368 496L368 368zM432 368L448 368L448 496L432 496L432 368z'/%3E%3Cpath fill='%2355d5cc' d='M216 64L208 64L208 380C207 378.6 197.2 365 178.6 339.4L173.9 332.9L167.4 337.6L102.6 384.6L96.1 389.3L100.8 395.8C109.7 408.1 138.9 448.3 188.3 516.5C215.4 553.9 258.7 576 304.9 576L439.9 576C497.3 576 543.9 529.4 543.9 472L543.9 296L471.9 296L471.9 264L391.9 264L391.9 240L311.9 240L311.9 64L215.9 64zM224 390.3L224 80L296 80L296 256L376 256L376 280L456 280L456 312L528 312L528 472C528 520.6 488.6 560 440 560L305 560C264 560 225.4 540.3 201.4 507.1C151.1 437.8 123.5 399.7 118.6 392.8L170.4 355.2C201.5 398.1 207.8 406.8 209.1 408.5C213.6 404 217.8 399.8 221.8 395.8L224.1 393.5L224.1 390.2zM320 376L320 368L304 368L304 496L320 496L320 376zM384 376L384 368L368 368L368 496L384 496L384 376zM448 376L448 368L432 368L432 496L448 496L448 376z'/%3E%3C/svg%3E") 6 2, pointer !important;
}

/* --- Body (neutralizza eventuale padding di nuvola.css) --- */
body.auth-bg, body#kt_body {
  background: #000 !important;
  background-image: none !important;
  color: #fff;
  font-family: 'Outfit', sans-serif !important;
  min-height: 100vh;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden;
  /* nuvola.css (API) mette `overflow: hidden` sul body per il layout dell'app, e questo file ridava solo
     l'asse x: le pagine auth più alte dello schermo non scorrevano. Il signup SELF a 1465×975 tagliava le
     tile e nascondeva «Prosegui» (17/09/2026). Le pagine auth scorrono sempre. */
  overflow-y: auto !important;
  cursor: none !important;
}
/* Il body da solo non basta più: dal 23/09/2026 il guscio di nuvola.css chiude anche `html` (`overflow: hidden;
   height: 100%`, scorre solo .main-content). Con html chiuso l'overflow del body non passa alla finestra, il body
   cresce quanto il contenuto e html lo taglia: /signup di secure non scorreva più, né con la rotella né col dito,
   e «prosegui →» restava sotto il bordo (15/10/2026). Le pagine auth riaprono la finestra dalla radice. */
html:has(> body.auth-bg), html:has(> body#kt_body) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  height: auto !important;
}

/* --- Scaffolding --- */
.scene {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.scene-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 48px 16px 24px;
}
/* Pagine lunghe (es. signup step 2): allinea in alto e resta scrollabile */
body.su-step2 .scene-main { justify-content: flex-start; padding-top: 64px; }

/* --- Logo --- */
#logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 12px;
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 1.1s ease, transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
#logo-wrap.visible { opacity: 1; }
#logo-wrap img { height: 44px; width: auto; }

/* --- Form --- */
#form-wrap {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--nv-campi-distanza, 12px);   /* il token del kit (nuvola.css): la distanza del login */
  opacity: 0;
  transition: opacity 0.7s ease;
}
#form-wrap.visible { opacity: 1; }

.su-lead {
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  color: rgba(255,255,255,0.85);
  margin-bottom: 14px;
  letter-spacing: 0.01em;
}
.su-sub {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.5);
  margin-bottom: 4px;
}

/* --- Campi input (look nuvola.css .form-control) --- */
#form-wrap .form-control,
#form-wrap .campoinput,
#form-wrap .input-field,
#form-wrap select,
#form-wrap input[type="text"],
#form-wrap input[type="email"],
#form-wrap input[type="password"],
#form-wrap input[type="number"] {
  display: block;
  width: 100% !important;
  padding: .375rem .75rem !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 400 !important;
  line-height: 2.2 !important;
  color: #f0f7ff !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: #000 !important;
  background-clip: padding-box !important;
  border: 1px solid var(--nv-campo-bordo) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  height: auto !important;
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, opacity .35s ease !important;
}
#form-wrap .form-control::placeholder,
#form-wrap .campoinput::placeholder,
#form-wrap .input-field::placeholder { color: rgba(240,247,255,0.35) !important; }
#form-wrap .form-control:focus,
#form-wrap .campoinput:focus,
#form-wrap .input-field:focus,
#form-wrap select:focus {
  color: #fff !important;
  background-color: #000 !important;
  border: 1px solid #55d5cc !important;
  outline: none !important;
  box-shadow: 0 0 0 0.35rem rgba(85, 213, 204, 0.25) !important;
}
#form-wrap select option { background: #000; color: #fff; }
#form-wrap .hiding { opacity: 0 !important; pointer-events: none; }

#form-wrap label,
#form-wrap .form-label {
  display: block;
  color: rgba(255,255,255,0.55) !important;
  font-family: 'Outfit', sans-serif !important;
  font-weight: 300 !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.03em;
  margin: 0 0 6px 2px !important;
  text-transform: none;
}

/* Spaziatura fra i gruppi campo generati (signup) */
#form-wrap .fv-row { width: 100%; margin: 0 0 14px !important; text-align: left; }

/* --- Pulsanti (bottone "continua/prosegui") --- */
#submit-btn,
#form-wrap .btn,
#form-wrap button.button,
#form-wrap .btn.btn-primary {
  width: 100%;
  background: #000000 !important;
  color: #55d5cc !important;
  border: 1px solid #55d5cc !important;
  border-radius: 8px !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  padding: 14px 18px !important;
  cursor: pointer;
  text-transform: lowercase;
  box-shadow: none !important;
  transition: background 0.2s ease, transform 0.15s ease !important;
}
#submit-btn:hover,
#form-wrap .btn:hover,
#form-wrap button.button:hover { background: #55d5cc !important; color: #000 !important; transform: scale(0.99); }
#submit-btn:active,
#form-wrap .btn:active { transform: scale(0.97); }

/* --- Password (login): la riga compare dopo l'email --- */
#password-row {
  width: 100%;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  display: none;
}
#password-row.visible { display: block; opacity: 1; transform: translateY(0); }
/* Il campo password con l'occhiolino è il componente del kit (.nv-pw, nuvola.css): qui solo lo
   spazio per l'icona, perché le regole dei campi di #form-wrap fissano il padding con !important. */
#form-wrap .nv-pw > input { padding-right: 46px !important; }
/* un <form> dentro #form-wrap tiene la stessa distanza fra i campi (cambio e recupero password) */
#form-wrap > form { display: flex; flex-direction: column; align-items: stretch; gap: var(--nv-campi-distanza, 12px); }

/* --- Checkbox (privacy / termini) --- */
#form-wrap .su-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin: 6px 2px 18px;
}
#form-wrap .su-check {
  display: flex !important;
  align-items: center !important;
  gap: 10px;
  margin: 0 !important;
  padding: 0 !important;
  font-family: 'Outfit', sans-serif !important;
  font-size: 0.8rem !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: rgba(255,255,255,0.6) !important;
  letter-spacing: 0.02em;
  user-select: none;
}
#form-wrap .su-check input[type="checkbox"] {
  -webkit-appearance: auto !important;
  -moz-appearance: auto !important;
  appearance: auto !important;
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px;
  accent-color: #55d5cc;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: middle;
}
#form-wrap .su-check span { display: inline-block; line-height: 1.2; }
#form-wrap .su-check a { color: #55d5cc !important; text-decoration: none; transition: color 0.2s ease; }
#form-wrap .su-check a:hover { color: #7fe3dc !important; }
#form-wrap .su-check.su-check-error { color: #f53c3c !important; }
#form-wrap .su-check.su-check-error input[type="checkbox"] { outline: 1px solid #f53c3c; outline-offset: 2px; }

/* --- Hint "Hai già / Non hai un account?" --- */
.hint, .su-hint, #signup-respnse {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.03em;
  text-align: center;
}
.hint a, .su-hint a, #signup-respnse a {
  color: #55d5cc !important;
  text-decoration: none;
  transition: color 0.2s ease;
}
.hint a:hover, .su-hint a:hover, #signup-respnse a:hover { color: #7fe3dc !important; }

/* Messaggio di esito login (istanza scaduta, credenziali errate): full-width nel #form-wrap flex
   → text-align:center lo centra orizzontalmente rispetto al bottone (anch'esso width:100%). */
.login-message {
  text-align: center;
  color: #f53c3c;
  font-family: 'Outfit', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
}

/* --- Footer --- */
#footer {
  padding: 14px 24px 20px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.7s ease;
}
#footer.visible { opacity: 1; }
#footer .footer-logo img { height: 22px; width: auto; margin-bottom: 8px; }
#footer .footer-links {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 6px;
}
#footer .footer-links a {
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 400;
  color: #55d5cc !important;
  text-decoration: none;
  letter-spacing: 0.03em;
  transition: color 0.2s ease;
  text-transform: lowercase;
}
#footer .footer-links a:hover { color: #7fe3dc !important; }
#footer .footer-info {
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem;
  color: rgba(255,255,255,0.50);
  letter-spacing: 0.02em;
  line-height: 1.5;
}

.reloader {
  width: 48px;
  height: 48px;
  border: 5px solid #FFF;
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
}

/* L'AUTOFILL DEL BROWSER al login e alla registrazione (voluto: username, current-password,
   given-name, email). Chrome gli dà un fondo azzurro che nessun background batte: lo copre un'ombra
   interna del colore del campo. Fino al 25/09/2026 questa regola c'era ma NON funzionava: la regola
   dei campi qui sopra dichiara `box-shadow: none !important`, che batteva l'ombra senza !important —
   ed ecco la password azzurra. Qui tutto è !important, e al focus l'ombra porta anche l'anello teal.
   È la stessa regola del kit (nuvola.css, «L'AUTOFILL DEL BROWSER») con i colori fissi del tema auth. */
#form-wrap input:-webkit-autofill,
#form-wrap input:-webkit-autofill:hover,
#form-wrap select:-webkit-autofill,
#form-wrap textarea:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 1000px #000 inset !important;
  box-shadow: 0 0 0 1000px #000 inset !important;
  -webkit-text-fill-color: #f0f7ff !important;
  caret-color: #f0f7ff;
  border-color: var(--nv-campo-bordo) !important;
  transition: background-color 600000s 0s, color 600000s 0s !important;
}
#form-wrap input:-webkit-autofill:focus,
#form-wrap select:-webkit-autofill:focus,
#form-wrap textarea:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #000 inset, 0 0 0 0.35rem rgba(85, 213, 204, 0.25) !important;
  box-shadow: 0 0 0 1000px #000 inset, 0 0 0 0.35rem rgba(85, 213, 204, 0.25) !important;
  -webkit-text-fill-color: #fff !important;
  border-color: #55d5cc !important;
}
#form-wrap input:autofill, #form-wrap select:autofill, #form-wrap textarea:autofill {
  box-shadow: 0 0 0 1000px #000 inset !important;
  -webkit-text-fill-color: #f0f7ff !important;
  border-color: var(--nv-campo-bordo) !important;
}
#form-wrap input:autofill:focus, #form-wrap select:autofill:focus, #form-wrap textarea:autofill:focus {
  box-shadow: 0 0 0 1000px #000 inset, 0 0 0 0.35rem rgba(85, 213, 204, 0.25) !important;
  border-color: #55d5cc !important;
}

/* ============================================================
   Signup SELF a pacchetti (task catalogo a moduli, 17/09/2026)
   Griglia di tile quadrate con icona: inclusi (bordo accent, fissi)
   e opzionali (spenti, si accendono al clic). Riquadro "La tua
   configurazione" con lo switch della periodicità e il canone.
   ============================================================ */
#form-wrap.su-largo { max-width: 760px; }
/* Pagine di passaggio (provisioning, esito del pagamento): più larghe del form del login, perché
   portano testo, ma non quanto il configuratore. */
#form-wrap.su-medio { max-width: 560px; }

/* Riquadro di riepilogo a due colonne (voce a sinistra, valore a destra): «Pagamento ricevuto». */
.su-riquadro {
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 14px 18px !important;
  margin: 6px 0 4px !important;
  text-align: left;
}
.su-riga {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 0.88rem;
  padding: 5px 0 !important;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.su-riga:last-child { border-bottom: 0; }
.su-riga span:first-child { color: rgba(255,255,255,0.5); }
.su-riga span:last-child { color: #fff; text-align: right; }

.su-sezione {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin: 22px 0 10px;
  text-align: left;
}
.su-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
  gap: 10px;
}
.su-tile {
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px !important;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  color: rgba(255,255,255,0.55);
  font-family: 'Outfit', sans-serif;
  font-size: 0.8rem;
  font-weight: 300;
  line-height: 1.15;
  text-align: center;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.su-tile i { font-size: 1.6rem; color: rgba(255,255,255,0.45); transition: color .2s ease; }
.su-tile.is-incluso { border-color: #55d5cc; color: #fff; }
.su-tile.is-incluso i { color: #55d5cc; }
button.su-tile { background: rgba(255,255,255,0.03); }
button.su-tile:hover { border-color: rgba(85,213,204,0.55); color: #fff; }
.su-tile.is-on { border-color: #55d5cc; background: rgba(85,213,204,0.10); color: #fff; }
.su-tile.is-on i { color: #55d5cc; }
.su-tile.su-tile-auto { animation: su-accendi .7s ease; }
.su-tile.su-tile-no { animation: su-no .35s ease; }
@keyframes su-accendi {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(85,213,204,0); }
  40%  { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(85,213,204,0.25); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(85,213,204,0); }
}
@keyframes su-no {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}
.su-avviso { min-height: 1.2em; margin-top: 10px; font-size: 0.82rem; color: #55d5cc; text-align: left; }

/* ---- COMING SOON: il modulo c'è nel listino, il software non ancora (19/09/2026) ----------------
   Una tile in arrivo si vede come tutte le altre — stessa griglia, stessa icona, stesso nome: è
   quello il punto, raccontare che arriverà — ma non si accende. Qui il nastro e lo stato spento; a
   NON renderla un bottone ci pensa il PHP, perché una tile che si può premere e non fa niente è
   peggio di una tile che non si preme. */
.su-tile.is-in-arrivo {
  border-color: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.40);
  cursor: default;
}
.su-tile.is-in-arrivo i { color: rgba(255,255,255,0.22); }
/* Il nastro taglia il VERTICE in alto a destra: la tile lo ritaglia sul proprio bordo
   (`overflow: hidden`), quindi non esce mai e non serve pensare a cosa ci sta intorno.

   GEOMETRIA, e non si va a occhio. Chiamiamo `d` la distanza del CENTRO della banda dai due bordi:
   deve essere la stessa su entrambi — `top + altezza/2` dall'alto e `right + larghezza/2` da destra —
   altrimenti il testo non sta in mezzo alla diagonale e sbanda. Da `d` discende tutto:

     taglio su ogni lato = 2d          quanto del bordo viene attraversato
     corda visibile      = 2d · √2     lo spazio in cui il testo deve stare

   Qui d = 27px: taglio 54px su una tile di 118px (a 390px la tile è 114: stessa geometria, stesso
   effetto), corda ~76px. «COMING SOON» a 9px con tracking 0.02em misura ~67px: ci sta con ~9px di
   margine, e non viene tagliato in nessuna delle due larghezze.

   PERCHÉ NON PIÙ PICCOLO. Un taglio di un quarto del lato (~30px) darebbe 42px di corda, e in 42px
   «COMING SOON» a 9px non entra: si vedrebbe «MING SO». Con questa scritta il minimo è questo. Per
   scendere davvero a un quarto serve una parola più corta — «PRESTO» a 9px misura ~40px e ci
   starebbe. È una decisione di prodotto, non di CSS.

   Fino al 20/09/2026 d valeva 39: il nastro attraversava la tile da parte a parte (66% del lato),
   passando sopra l'icona e sopra il nome. */
.su-tile { position: relative; overflow: hidden; }
.su-nastro {
  position: absolute;
  top: 20px;                      /* 20 + 14/2 = 27 = d */
  right: -28px;                   /* -28 + 110/2 = 27 = d */
  width: 110px;                   /* > della corda (76px): la banda esce e la tile la ritaglia */
  padding: 0;
  transform: rotate(45deg);
  background: rgba(0,0,0,0.88);
  border-top: 1px solid rgba(85,213,204,0.55);
  border-bottom: 1px solid rgba(85,213,204,0.55);
  color: #55d5cc;                 /* accento su fondo scuro: lo stesso contrasto del resto della scena */
  font-family: 'Outfit', sans-serif;
  font-size: 9px;                 /* in px e non in rem: l'altezza del nastro è un conto in pixel */
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 12px;              /* 12 + i due bordi da 1px = 14px di altezza */
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;           /* il nastro non deve rubare il passaggio del mouse alla tile */
}
/* Le tile dei PACCHETTI non hanno un nastro loro: è lo stesso, con gli stessi numeri. Sono più
   larghe (160px contro 118), quindi lo stesso taglio di 54px lì pesa ancora meno — un terzo del
   lato invece di poco meno di metà. Tre misure in meno da tenere allineate. */
.su-tile-pacchetto.is-in-arrivo { color: rgba(255,255,255,0.45); cursor: default; }
.su-tile-pacchetto.is-in-arrivo .su-tile-nome { color: rgba(255,255,255,0.62); }
.su-tile-pacchetto.is-in-arrivo:hover {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.03);
  box-shadow: none;
}

/* Sul telefono il nastro NON cambia, e questa è la novità del 20/09/2026: le tile dei moduli
   passano da 118px a 114px, quattro pixel, e per quattro pixel non serve una seconda geometria —
   serviva solo a dare un secondo posto in cui sbagliare il conto. Prima c'erano tre misure diverse
   (moduli, pacchetti, telefono) e nessuna tornava con le altre. */

/* ---- Scelta del pacchetto (primo passo del signup) --------------------------------------------
   Qui le tile non sono moduli da accendere ma quattro porte d'ingresso, e si comportano da titolo:
   niente icona (sarebbe la stessa per tutte e non distinguerebbe niente), nome bianco e leggibile,
   sotto il prezzo di partenza. La griglia è `auto-fit`, non `auto-fill`: con `auto-fill` le colonne
   vuote restano in piedi e quattro tile in un contenitore da 760px si accucciavano a sinistra,
   scentrate rispetto al logo e al titolo (18/09/2026). */
.su-tiles-pacchetti {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.su-tile-pacchetto {
  gap: 6px;
  padding: 14px 12px !important;
  text-decoration: none;
}
/* Due righe sempre, anche quando la seconda è vuota (il PHP ci mette uno spazio unificatore): le quattro
   tile devono avere lo stesso blocco di testo, e il testo sta al centro verticale della tile. */
.su-tile-nome {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 1.15rem;
  font-weight: 300;
  line-height: 1.25;
  color: #fff;              /* il nome resta bianco sempre: è il titolo della tile, non il suo stato */
  text-align: center;
}
.su-tile-canone { font-size: 0.78rem; color: rgba(255,255,255,0.55); }
.su-tile-pacchetto:hover,
.su-tile-pacchetto:focus-visible {
  border-color: #55d5cc;
  background: rgba(85,213,204,0.08);
  box-shadow: 0 0 0 1px rgba(85,213,204,0.45);
  outline: none;
}
.su-tile-pacchetto:hover .su-tile-canone,
.su-tile-pacchetto:focus-visible .su-tile-canone { color: rgba(255,255,255,0.8); }

.su-config {
  margin: 22px 0 8px;
  padding: 16px 18px !important;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  text-align: left;
}
.su-config-titolo { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); margin-bottom: 12px; }
.su-canone { font-size: 1.6rem; font-weight: 300; color: #fff; line-height: 1.2; }
.su-canone.is-attesa { opacity: 0.45; }
.su-canone-sub { font-size: 0.8rem; color: rgba(255,255,255,0.5); margin-top: 2px; }
/* Lo switch standard (Bootstrap form-switch) nella scena auth: il reset `* { margin:0; padding:0 }` di
   questo file gli toglie lo spazio dove si disegna. Qui glielo si restituisce, solo dentro il riquadro. */
#form-wrap .su-config .form-switch { display: flex; align-items: center; gap: 10px; padding-left: 0 !important; margin-bottom: 14px !important; }
#form-wrap .su-config .form-switch .form-check-input { width: 2.4em; height: 1.3em; margin: 0 !important; float: none; flex: 0 0 auto; }
#form-wrap .su-config .form-switch .form-check-label { margin: 0 !important; font-size: 0.85rem !important; color: rgba(255,255,255,0.75) !important; }
/* LA BARRA DEL CONFIGURATORE (15/10/2026): annuale, canone e bottone fissati al fondo della finestra, sempre visibili
   mentre si scorrono le tile (/signup e /pagamento). È fuori dal flusso, quindi la pagina le restituisce il suo
   spazio in fondo con `--su-barra-h`, che il configuratore misura: sotto la barra si scorre fino al footer.
   La pagina non ha altezza minima: il footer segue il contenuto invece di finire in fondo allo schermo con un buco
   sopra. L'area sicura del telefono (home indicator) sta dentro la barra, nel suo padding. */
.scene:has(.su-barra) { min-height: 0; padding-bottom: var(--su-barra-h, 96px); }
#form-wrap .su-barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: #000;
  border-top: 1px solid rgba(255,255,255,0.14);
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
}
#form-wrap .su-barra-riga {
  max-width: 760px;               /* la larghezza del configuratore (#form-wrap.su-largo): la barra si allinea alle tile */
  margin: 0 auto !important;
  display: flex;
  align-items: center;
  gap: 18px;
}
#form-wrap .su-barra .form-switch { display: flex; align-items: center; gap: 10px; padding-left: 0 !important; margin: 0 !important; flex: 0 0 auto; }
#form-wrap .su-barra .form-switch .form-check-input { width: 2.4em; height: 1.3em; margin: 0 !important; float: none; flex: 0 0 auto; }
#form-wrap .su-barra .form-switch .form-check-label { margin: 0 !important; font-size: 0.85rem !important; color: rgba(255,255,255,0.75) !important; white-space: nowrap; }
#form-wrap .su-barra-canone { flex: 1 1 auto; min-width: 0; text-align: right; }
#form-wrap .su-barra .su-canone { font-size: 1.3rem; white-space: nowrap; }
#form-wrap .su-barra .su-canone-sub { margin-top: 0; }
#form-wrap .su-barra .btn { width: auto; min-width: 170px; min-height: 44px; flex: 0 0 auto; }
/* «Hai un coupon?» (SELF-PANNELLO): una riga piccola sotto annuale, canone e bottone; aperta, il campo e «Applica», poi
   l'esito (teal se vale, rosso se no). Il campo resta compatto anche sul telefono. */
#form-wrap .su-barra-coupon {
  max-width: 760px;
  margin: 6px auto 0 !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 0.78rem;
}
#form-wrap .su-barra-coupon [hidden] { display: none !important; }
#form-wrap .su-coupon-apri { background: none; border: 0; padding: 0; color: #55d5cc; font-size: 0.78rem; cursor: pointer; }
#form-wrap .su-coupon-apri:hover { color: #7fe3dc; }
#form-wrap .su-coupon-campo { display: inline-flex; align-items: center; gap: 6px; }
#form-wrap .su-barra-coupon .form-control { width: 180px; height: 36px !important; min-height: 0 !important; padding: 4px 10px !important; font-size: 0.8rem !important; text-transform: uppercase; margin: 0 !important; }
/* il bottone della barra (prosegui) su telefono va a tutta larghezza: «Applica» no, sta accanto al campo */
#form-wrap .su-barra .su-barra-coupon .btn { flex: 0 0 auto; width: auto; min-width: 0; height: 36px; min-height: 36px; padding: 4px 14px !important; font-size: 0.8rem; margin: 0 !important; }
#form-wrap .su-coupon-msg { color: rgba(255,255,255,0.6); }
#form-wrap .su-coupon-msg.is-ok { color: #55d5cc; }
#form-wrap .su-coupon-msg.is-ko { color: #f53c3c; }
/* I dati societari e le pagine legali in fondo alla barra (al posto del footer, che nella registrazione non c'è).
   Piccoli come la riga del footer; ogni voce resta intera e la riga va a capo fra una voce e l'altra. */
#form-wrap .su-barra-legale {
  max-width: 1100px;
  margin: 8px auto 0 !important;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 6px;
  font-family: 'Outfit', sans-serif;
  font-size: 0.62rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.50);
  text-align: center;
}
#form-wrap .su-barra-legale > span { white-space: nowrap; }
#form-wrap .su-barra-legale > span:not(:last-child)::after { content: "|"; margin-left: 6px; opacity: 0.6; }
#form-wrap .su-barra-legale a { color: #55d5cc !important; text-decoration: none; }
#form-wrap .su-barra-legale a:hover { color: #7fe3dc !important; }
/* Telefono: due righe. Sopra annuale e canone, sotto il bottone a tutta larghezza (alto almeno 44px). */
@media (max-width: 600px) {
  #form-wrap .su-barra { padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)) !important; }
  #form-wrap .su-barra-riga { flex-wrap: wrap; gap: 8px 12px; }
  /* Interruttore e canone dividono la prima riga: base 0 all'interruttore, così non spinge il canone a capo; se
     non ci stanno, vanno a capo DENTRO il proprio spazio (l'etichetta, «pari a … · iva esclusa»), non la riga. */
  #form-wrap .su-barra .form-switch { flex: 1 1 0; min-width: 0; }
  #form-wrap .su-barra .form-switch .form-check-label { font-size: 0.8rem !important; white-space: normal; line-height: 1.2; }
  #form-wrap .su-barra-canone { flex: 0 1 auto; max-width: 58%; }
  #form-wrap .su-barra .su-canone { font-size: 1.1rem; }
  #form-wrap .su-barra .su-canone-sub { font-size: 0.72rem; line-height: 1.2; }
  #form-wrap .su-barra .btn { flex: 1 0 100%; width: 100%; min-width: 0; padding: 11px 18px !important; }
  #form-wrap .su-barra-legale { margin-top: 6px !important; font-size: 0.58rem; line-height: 1.4; }
  #form-wrap .su-barra-coupon { margin-top: 4px !important; }
  #form-wrap .su-coupon-campo { flex: 1 1 100%; }
  #form-wrap .su-barra-coupon .form-control { flex: 1 1 auto; width: auto; height: 44px !important; }
  #form-wrap .su-barra .su-barra-coupon .btn { height: 44px; min-height: 44px; }   /* il tocco: almeno 44px anche qui */
}

/* Prosegui spento (nessun modulo scelto) e riga di riepilogo della scelta sopra il form di registrazione. */
#form-wrap .btn:disabled,
#form-wrap .btn:disabled:hover { opacity: 0.35; cursor: not-allowed; background: #000 !important; color: #55d5cc !important; transform: none; }
#form-wrap .su-config + .btn, #form-wrap .su-config ~ .btn { margin-top: 6px; }
.su-riepilogo {
  text-align: center;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.75);
  padding: 10px 14px !important;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 10px;
  margin-bottom: 6px !important;
}
.su-riepilogo a { color: #55d5cc !important; text-decoration: none; margin-left: 8px !important; }
.su-riepilogo a:hover { color: #7fe3dc !important; }
.su-ok { color: #55d5cc; }

@media (max-width: 480px) {
  .su-tiles { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .su-tile { font-size: 0.72rem; gap: 6px; }
  .su-tile i { font-size: 1.3rem; }
  /* I pacchetti no: su telefono restano due per riga, centrati, con il nome ancora leggibile. */
  .su-tiles-pacchetti { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 340px; }
  .su-tile-pacchetto { padding: 12px 8px !important; }
  .su-tile-nome { font-size: 1rem; }
  .su-tile-canone { font-size: 0.72rem; }
}