/* preferenze.css — pulsante «Aa» e pannello di aspetto e dimensione del testo (templates/_preferenze.html, static/preferenze.js).
   Caricato da base.html e dalle pagine semplici: usa le variabili del tema se ci sono e ha valori di riserva per le pagine semplici. */

.prefs-wrap { position: relative; flex: none; }
.prefs-btn {
  width: 44px; height: 44px; border-radius: 50%; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink, #14213D); background: var(--surf, var(--bg, #FBF8F2)); border: 1.5px solid var(--brd2, rgba(20, 33, 61, 0.2));
  font-family: var(--fi, system-ui, sans-serif);
}
.prefs-btn:hover { border-color: var(--ink, #14213D); }
.prefs-btn[aria-expanded="true"] { background: var(--ink, #14213D); color: var(--bg, #FBF8F2); border-color: var(--ink, #14213D); }
.prefs-btn-aa { font-weight: 700; font-size: 20px; line-height: 1; letter-spacing: -0.5px; }
.prefs-btn-aa small { font-size: 14px; }
.prefs-btn:focus-visible, .prefs-pannello button:focus-visible { outline: 3px solid var(--link, #1F5FA8); outline-offset: 2px; }

.prefs-pannello {
  position: absolute; z-index: 400; top: calc(100% + 8px); right: 0; width: min(340px, calc(100vw - 24px));   /* a destra del pulsante anche nelle pagine arabe (la testata è sempre ltr) */
  box-sizing: border-box; padding: 14px; text-align: start;
  background: var(--surf, var(--bg, #FBF8F2)); color: var(--ink, #14213D);
  border: 1px solid var(--brd2, rgba(20, 33, 61, 0.2)); border-radius: 18px; box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
  font-family: var(--fi, system-ui, sans-serif); line-height: 1.35;
}
.prefs-pannello[hidden] { display: none; }
body.lang-ar .prefs-pannello { direction: rtl; }
.prefs-pannello .l-ar { font-family: var(--fa-ui, var(--fa, system-ui, sans-serif)); }
.prefs-titolo { font-weight: 700; font-size: 17px; margin: 0 2px 6px; }
.prefs-gruppo { margin-top: 12px; }
.prefs-t { font-weight: 700; font-size: 14px; color: var(--muted, rgba(20, 33, 61, 0.7)); margin: 0 2px 6px; }
.prefs-nota { font-size: 14px; color: var(--muted, rgba(20, 33, 61, 0.7)); margin: 6px 2px 0; }

/* tema: elenco di tre voci, una per riga */
.prefs-lista { display: flex; flex-direction: column; gap: 6px; }
.prefs-lista button {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 14px; width: 100%; box-sizing: border-box; cursor: pointer; text-align: start;
  background: var(--bg, #FBF8F2); color: var(--ink, #14213D); border: 1.5px solid var(--brd2, rgba(20, 33, 61, 0.2)); border-radius: 14px;
  font: 700 16px/1.2 var(--fi, system-ui, sans-serif);
}
.prefs-spunta { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 2px solid currentColor; box-sizing: border-box; }
.prefs-lista button[aria-pressed="true"] { background: var(--ink, #14213D); color: var(--bg, #FBF8F2); border-color: var(--ink, #14213D); }
.prefs-lista button[aria-pressed="true"] .prefs-spunta { background: radial-gradient(circle, currentColor 0 38%, transparent 42%); }

/* dimensione del testo: A−, A, A+ */
.prefs-passi { display: flex; gap: 8px; direction: ltr; }   /* A− a sinistra e A+ a destra anche in arabo */
.prefs-passi button {
  flex: 1; min-height: 48px; cursor: pointer; border-radius: 14px; padding: 0;
  background: var(--bg, #FBF8F2); color: var(--ink, #14213D); border: 1.5px solid var(--brd2, rgba(20, 33, 61, 0.2));
  font-family: var(--fi, system-ui, sans-serif); font-weight: 700;
}
.prefs-A1 { font-size: 15px; }
.prefs-A2 { font-size: 20px; }
.prefs-A3 { font-size: 26px; }
.prefs-passi button[aria-pressed="true"] { background: var(--ink, #14213D); color: var(--bg, #FBF8F2); border-color: var(--ink, #14213D); }
.prefs-passi button[aria-disabled="true"] { opacity: 0.4; cursor: default; }
.prefs-stato { font-size: 14px; color: var(--muted, rgba(20, 33, 61, 0.7)); margin: 8px 2px 0; min-height: 1.35em; }

/* pagina /impostazioni: gli stessi gruppi, senza il riquadro */
.prefs-in-pagina .prefs-gruppo { margin-top: 0; margin-bottom: 18px; }
.prefs-in-pagina .prefs-t { font-size: 16px; color: var(--ink, #14213D); }

/* pagine semplici (offline, annullamento iscrizione, cancellazione account): il pulsante sta nell'angolo in alto, le due lingue una dopo l'altra */
.prefs-wrap--semplice { position: fixed; top: 12px; right: 12px; z-index: 400; }
.prefs-wrap--semplice .l-it + .l-ar::before { content: " · "; font-family: var(--fi, system-ui, sans-serif); }

/* telefono: il pannello sotto la testata, a tutta larghezza (la testata resta fissa in alto) */
@media (max-width: 768px) {
  .prefs-wrap--testata .prefs-pannello { position: fixed; top: calc(var(--hdr-h, 64px) + 6px); inset-inline: 12px; width: auto; max-height: calc(100vh - var(--hdr-h, 64px) - 24px); overflow-y: auto; }
}
@media (min-width: 769px) { .prefs-pannello .l-it + .l-ar::before { content: " · "; font-family: var(--fi, system-ui, sans-serif); } }

/* note e stato: una lingua per riga (sul telefono ne resta una sola, vedi app.css) */
.prefs-nota .l-it, .prefs-nota .l-ar, .prefs-stato .l-it, .prefs-stato .l-ar { display: block; }
.prefs-nota .l-it + .l-ar::before, .prefs-stato .l-it + .l-ar::before { content: none; }