/* ══ TWIZA — SCHERMATE DI ACCESSO, foglio CONDIVISO ══════════════════════════════════════════
   03/11/2026: UN foglio solo per ogni pagina di accesso del tenant e del pannello — l'accesso
   (overlay di index.html), «Password dimenticata», «Reimposta password», link non valido o
   scaduto, esiti e errori dello scambio fra prodotti, e l'accesso del superadmin.
   Prima la pagina «Reimposta password» (raggiunta dal link della mail) era una scheda nuda:
   niente marchio, niente piè di pagina, altri caratteri e ⛔ nessun link per tornare all'accesso.
   ⇒ Il disegno di riferimento e' quello di «Password dimenticata».
   I selettori sono `:is(#authOverlay, .twa-screen)`: nell'overlay di index.html valgono con la
   specificita' di un id (style.css ridipinge gli <input> del tema chiaro), nelle pagine a se'
   il contenitore e' `<div class="twa-screen">`.
   ⚠ `twiza-admin/auth.css` e' una COPIA byte-identica di questo file (il pannello e il template
   sono serviti da cartelle diverse): lo tiene `twiza-template/tests/accesso_stesso_disegno_test.php`.
   Questo file si copia nei tenant: e' nell'elenco `$files` di `deploy_template_to_hostgator()`. */
@font-face { font-family: 'DKJambo'; src: url('fonts/DKJambo.woff2') format('woff2'), url('fonts/DKJambo.woff') format('woff'), url('fonts/DKJambo.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; }
@keyframes twizaAurora { 0% { background-position: 0% 0%; } 50% { background-position: 100% 55%; } 100% { background-position: 28% 100%; } }
html.twa-page, html.twa-page body { margin: 0; min-height: 100%; background: #0a0b18; }
html.twa-page[data-theme="light"], html.twa-page[data-theme="light"] body { background: #eef0f6; }
/* ══ v3.14.94 — SCHERMATA DI ACCESSO ══════════════════════════════════════════
   La stessa schermata per tutti i prodotti TWIZA (cambia solo il nome sotto il
   marchio) e la stessa del backoffice. Tutto e' scritto sotto :is(#authOverlay, .twa-screen) e con
   nomi propri (`twa-…`, variabili `--a-…`), cosi' non tocca la chat e le regole
   di style.css per `.auth-…` non hanno piu' niente a cui applicarsi.
   Segue il tema scelto dall'utente: scuro di default, chiaro se `tw_theme=light`. */
:is(#authOverlay, .twa-screen) {
  --a-bg: #0a0b18; --a-panel: #10122a; --a-surface: #161937; --a-line: #272b52; --a-divider: #353a66;
  --a-text: #ecebf6; --a-muted: #a8abc9; --a-faint: #8b8eb2;
  --a-accent: #d81b60; --a-accent-hover: #c2185b; --a-accent-text: #ff6aa2;
  --a-ok: #43d39a; --a-ok-soft: rgba(67,211,154,.12); --a-err: #ff9a9a; --a-err-line: rgba(255,107,107,.45); --a-err-soft: rgba(255,107,107,.10);
  position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow: auto; background: var(--a-bg); color: var(--a-text);
  font-family: 'Titillium Web', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.45;
}
html[data-theme="light"] :is(#authOverlay, .twa-screen) {
  --a-bg: #eef0f6; --a-panel: #ffffff; --a-surface: #f6f7fb; --a-line: #d9dce9; --a-divider: #cfd3e3;
  --a-text: #161831; --a-muted: #50546f; --a-faint: #62667f;
  --a-accent: #c2185b; --a-accent-hover: #a91450; --a-accent-text: #b0124f;
  --a-ok: #1f8a5f; --a-ok-soft: rgba(31,138,95,.10); --a-err: #b03434; --a-err-line: rgba(200,40,40,.40); --a-err-soft: rgba(200,40,40,.07);
}
:is(#authOverlay, .twa-screen) *, :is(#authOverlay, .twa-screen) *::before, :is(#authOverlay, .twa-screen) *::after { box-sizing: border-box; }
/* l'aurora che cambia colore resta: e' l'unica cosa della schermata di prima che si tiene */
:is(#authOverlay, .twa-screen) .twa-aurora { position: fixed; inset: -20%; pointer-events: none;
  background:
    radial-gradient(38% 42% at 12% 8%,  rgba(214,51,132,.30), transparent 60%),
    radial-gradient(34% 38% at 88% 4%,  rgba(124,58,237,.26), transparent 58%),
    radial-gradient(42% 46% at 82% 90%, rgba(37,99,235,.20),  transparent 60%),
    radial-gradient(32% 36% at 16% 94%, rgba(236,72,153,.20), transparent 55%),
    radial-gradient(60% 55% at 50% 50%, rgba(88,28,135,.14),  transparent 72%),
    linear-gradient(160deg, #070810 0%, #0a0b17 45%, #0b0714 75%, #070810 100%);
  background-size: 180% 180%; animation: twizaAurora 24s ease-in-out infinite alternate; filter: saturate(1.08); }
html[data-theme="light"] :is(#authOverlay, .twa-screen) .twa-aurora {
  background:
    radial-gradient(38% 42% at 12% 8%,  rgba(214,51,132,.20), transparent 60%),
    radial-gradient(34% 38% at 88% 4%,  rgba(124,58,237,.15), transparent 58%),
    radial-gradient(42% 46% at 82% 90%, rgba(37,99,235,.12),  transparent 60%),
    radial-gradient(32% 36% at 16% 94%, rgba(236,72,153,.14), transparent 55%),
    radial-gradient(60% 55% at 50% 50%, rgba(140,90,200,.08), transparent 72%),
    linear-gradient(160deg, #eef0f6 0%, #f3f1f8 45%, #f1eef6 75%, #eef0f6 100%);
  background-size: 180% 180%; filter: none; }
@media (prefers-reduced-motion: reduce) { :is(#authOverlay, .twa-screen) .twa-aurora { animation: none; } }
:is(#authOverlay, .twa-screen) .twa-frame { position: fixed; inset: 10px; border-radius: 16px; border: 1px solid rgba(216,27,96,.30); pointer-events: none; z-index: 1; }
html[data-theme="light"] :is(#authOverlay, .twa-screen) .twa-frame { border-color: rgba(216,27,96,.22); }
:is(#authOverlay, .twa-screen) .twa-theme { position: fixed; top: 20px; right: 22px; z-index: 3; width: 36px; height: 36px; border-radius: 9px; border: 0; background: none;
  color: var(--a-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
:is(#authOverlay, .twa-screen) .twa-theme:hover { background: var(--a-surface); color: var(--a-text); }
:is(#authOverlay, .twa-screen) .twa-theme .sun, html[data-theme="light"] :is(#authOverlay, .twa-screen) .twa-theme .moon { display: none; }
html[data-theme="light"] :is(#authOverlay, .twa-screen) .twa-theme .sun { display: block; }
:is(#authOverlay, .twa-screen) .auth-card { position: relative; z-index: 2; margin: auto; width: min(430px, calc(100vw - 48px)); max-width: none; border-radius: 20px;
  border: 1px solid var(--a-divider); background: var(--a-panel); box-shadow: 0 24px 70px rgba(0,0,0,.45); padding: 28px 34px 20px;
  display: flex; flex-direction: column; align-items: center; -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-theme="light"] :is(#authOverlay, .twa-screen) .auth-card { box-shadow: 0 18px 50px rgba(22,24,49,.14); }
:is(#authOverlay, .twa-screen) .twa-lockup { display: flex; flex-direction: column; align-items: center; gap: 9px; }
:is(#authOverlay, .twa-screen) .twa-lockup img { display: block; }
:is(#authOverlay, .twa-screen) .twa-product { font-family: 'DKJambo', 'Titillium Web', sans-serif; font-weight: 400; font-size: 19px; letter-spacing: .06em; color: var(--a-text); width: 152px; text-align: right; display: block; line-height: 1; }
:is(#authOverlay, .twa-screen) .twa-mode { width: 100%; flex-direction: column; align-items: center; margin: 0; padding: 0; background: none; border: 0; }
:is(#authOverlay, .twa-screen) .twa-head { display: flex; flex-direction: column; align-items: center; }
:is(#authOverlay, .twa-screen) .twa-title { margin: 18px 0 0; font-size: 25px; font-weight: 600; text-align: center; color: var(--a-text); letter-spacing: 0; line-height: 1.25; }
:is(#authOverlay, .twa-screen) .twa-rule { width: 54px; height: 3px; border-radius: 2px; background: var(--a-accent); margin: 10px 0 12px; }
:is(#authOverlay, .twa-screen) .twa-intro { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--a-muted); text-align: center; max-width: 40ch; }
:is(#authOverlay, .twa-screen) .twa-form { width: 100%; display: flex; flex-direction: column; gap: 13px; margin-top: 20px; }
:is(#authOverlay, .twa-screen) .twa-field { display: flex; flex-direction: column; gap: 7px; margin: 0; }
:is(#authOverlay, .twa-screen) .twa-label { font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--a-faint); }
:is(#authOverlay, .twa-screen) .twa-box { display: flex; align-items: center; gap: 11px; height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--a-line); background: var(--a-surface); color: var(--a-faint); transition: border-color .15s; }
:is(#authOverlay, .twa-screen) .twa-box:focus-within { border-color: var(--a-accent); }
:is(#authOverlay, .twa-screen) .twa-mode.bad .twa-box { border-color: #ff6b6b; }
/* gli !important servono: style.css in tema chiaro ridipinge ogni <input> con i suoi */
:is(#authOverlay, .twa-screen) .twa-box input { flex: 1; min-width: 0; width: auto; height: 100%; border: 0 !important; outline: none !important; background: transparent !important; color: var(--a-text) !important;
  -webkit-text-fill-color: var(--a-text); caret-color: var(--a-text); font: inherit; font-size: 15px; padding: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
:is(#authOverlay, .twa-screen) .twa-box input::placeholder { color: var(--a-faint) !important; -webkit-text-fill-color: var(--a-faint); opacity: 1; }
/* ⭐ 03/11/2026 — l'AUTOFILL del browser. Prima la regola c'era ma non vinceva: la regola del
   campo qui sopra scrive `box-shadow: none !important`, e `-webkit-box-shadow` e' lo stesso
   valore ⇒ l'ombra interna che copre lo sfondo dell'autofill veniva annullata, e il campo
   compilato da Chrome restava con lo sfondo chiaro di Chrome e il testo chiaro del tema:
   illeggibile (lo screenshot del proprietario sulla pagina «Password dimenticata»).
   ⇒ Qui con `!important` e piu' specifica (lo pseudo-classe conta), su tutti gli stati. */
:is(#authOverlay, .twa-screen) .twa-box input:-webkit-autofill,
:is(#authOverlay, .twa-screen) .twa-box input:-webkit-autofill:hover,
:is(#authOverlay, .twa-screen) .twa-box input:-webkit-autofill:focus,
:is(#authOverlay, .twa-screen) .twa-box input:-webkit-autofill:active,
:is(#authOverlay, .twa-screen) .twa-box input:autofill {
  -webkit-text-fill-color: var(--a-text) !important; caret-color: var(--a-text);
  -webkit-box-shadow: 0 0 0 1000px var(--a-surface) inset !important; box-shadow: 0 0 0 1000px var(--a-surface) inset !important;
  background-color: var(--a-surface) !important; transition: background-color 99999s ease-out 0s; }
:is(#authOverlay, .twa-screen) .twa-eye { border: 0; background: none; color: var(--a-faint); cursor: pointer; padding: 0; display: inline-flex; }
:is(#authOverlay, .twa-screen) .twa-eye:hover { color: var(--a-text); }
:is(#authOverlay, .twa-screen) .twa-eye .off, :is(#authOverlay, .twa-screen) .twa-eye.on .on { display: none; }
:is(#authOverlay, .twa-screen) .twa-eye.on .off { display: block; }
:is(#authOverlay, .twa-screen) .twa-btn { width: 100%; height: 50px; border-radius: 12px; border: 0; background: var(--a-accent); color: #fff; font: inherit; font-size: 16px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 10px 26px rgba(216,27,96,.30); padding: 0 14px; transition: background .15s, border-color .15s; }
:is(#authOverlay, .twa-screen) .twa-btn:hover { background: var(--a-accent-hover); }
:is(#authOverlay, .twa-screen) .twa-btn:disabled { opacity: .6; cursor: default; }
:is(#authOverlay, .twa-screen) .twa-btn.alt { background: transparent; color: var(--a-text); border: 1px solid var(--a-divider); box-shadow: none; font-weight: 600; font-size: 15px; }
:is(#authOverlay, .twa-screen) .twa-btn.alt:hover { border-color: var(--a-accent); }
:is(#authOverlay, .twa-screen) .twa-btn.alt svg { color: var(--a-accent-text); }
:is(#authOverlay, .twa-screen) .twa-or { display: flex; align-items: center; gap: 12px; width: 100%; margin: 6px 0 2px; }
:is(#authOverlay, .twa-screen) .twa-or span { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--a-faint); }
:is(#authOverlay, .twa-screen) .twa-or i { flex: 1; height: 1px; background: var(--a-line); }
:is(#authOverlay, .twa-screen) .twa-row { display: flex; justify-content: center; margin-top: 6px; }
:is(#authOverlay, .twa-screen) .twa-note { margin: 2px 0 0; font-size: 12.5px; color: var(--a-faint); text-align: center; }
:is(#authOverlay, .twa-screen) .twa-forgot { border: 0; background: none; color: var(--a-accent-text); font: inherit; font-size: 13.5px; cursor: pointer; padding: 4px 2px; border-bottom: 1px dotted var(--a-accent); text-decoration: none; }
:is(#authOverlay, .twa-screen) .twa-forgot:hover { color: var(--a-accent); }
:is(#authOverlay, .twa-screen) .twa-back { border: 0; background: none; color: var(--a-muted); font: inherit; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 4px 2px; text-decoration: none; }
:is(#authOverlay, .twa-screen) .twa-back:hover { color: var(--a-text); }
:is(#authOverlay, .twa-screen) .twa-msg { width: 100%; margin: 20px 0 0; padding: 11px 13px; border-radius: 11px; font-size: 13px; line-height: 1.5; text-align: left; min-height: 0; }
:is(#authOverlay, .twa-screen) .twa-msg:empty { display: none !important; }
:is(#authOverlay, .twa-screen) .twa-msg.err { border: 1px solid var(--a-err-line); background: var(--a-err-soft); color: var(--a-err); }
:is(#authOverlay, .twa-screen) .twa-msg.ok { border: 1px solid var(--a-ok); background: var(--a-ok-soft); color: var(--a-ok); }
:is(#authOverlay, .twa-screen) .twa-foot { width: 100%; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--a-line); display: flex; align-items: center; justify-content: center; }
:is(#authOverlay, .twa-screen) .twa-foot img { height: 22px; width: auto; opacity: .72; display: block; }
html[data-theme="light"] :is(#authOverlay, .twa-screen) .twa-foot img { filter: invert(1); opacity: .55; }
@media (max-width: 480px) { :is(#authOverlay, .twa-screen) .auth-card { padding: 24px 22px 18px; } :is(#authOverlay, .twa-screen) .twa-title { font-size: 22px; } }
/* gli stati di una pagina a se': la riga che sostituisce il modulo dopo l'esito, e il
   bottone-link «Vai all'accesso» (un <a> con l'aspetto del bottone principale) */
:is(#authOverlay, .twa-screen) a.twa-btn { text-decoration: none; }
:is(#authOverlay, .twa-screen) .twa-done { width: 100%; display: flex; flex-direction: column; gap: 13px; margin-top: 20px; }
:is(#authOverlay, .twa-screen) .twa-done[hidden] { display: none; }
:is(#authOverlay, .twa-screen) .twa-form[hidden] { display: none; }