/*
 * Kit condiviso da welcome page (/) e configurazione (/configure).
 *
 * Token presi dal theme.css di TOP Posters (pagina turchese, header e box di brand
 * viola, vassoi quasi bianchi con il rilievo del Background Minimal), header e
 * footer di marca e i pochi controlli che le due pagine hanno in comune. Si
 * carica prima del CSS della pagina, che aggiunge i propri token nel suo :root.
 * Le spaziature usano proprietà logiche, così regge anche dir="rtl".
 */

:root {
  --page-bg: #BDEFEF;
  --brand-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --brand-start: #667eea;
  --brand-end: #764ba2;
  --ink: #161a2e;
  --muted: #5d6478;
  --danger: #b0303e;
  --focus-ring: rgba(118, 75, 162, 0.55);

  --surface: linear-gradient(180deg, #fafafa, #f3f8fb);
  --surface-tray: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 248, 250, 0.96));
  --surface-recessed: linear-gradient(180deg, #e8edf2, #edf2f6);
  --surface-recessed-shadow:
    inset 0 3px 7px rgba(33, 42, 58, 0.20),
    inset 0 -2px 3px rgba(255, 255, 255, 0.96),
    0 1px 0 rgba(255, 255, 255, 0.96);
  --surface-inset:
    inset 0 -2px 4px rgba(33, 33, 33, 0.25),
    inset 0 -3px 14px rgba(33, 33, 33, 0.1);
  --surface-drop:
    0 2px 4px rgba(33, 33, 33, 0.26),
    0 3px 14px rgba(33, 33, 33, 0.1);
  --surface-shadow: var(--surface-inset), var(--surface-drop);
  --surface-radius: 22px;
  --surface-box-radius: 14px;

  /* Bottoni: anche i .btn della configurazione li leggono da qui. */
  --btn-radius: 12px;
  --btn-brand-shadow: 0 6px 18px rgba(102, 126, 234, 0.45), inset 0 -2px 4px rgba(0, 0, 0, 0.18);
  --btn-brand-shadow-hover: 0 8px 24px rgba(102, 126, 234, 0.55), inset 0 -2px 4px rgba(0, 0, 0, 0.18);
  --btn-light-hover: #f3f0fa;

  --wrap: 1180px;
  --brand-header-width: var(--wrap);
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ── Header di marca ───────────────────────────────────────
   Barra viola in rilievo con logo e titolo. Il selettore lingua è in
   /shared/language-picker.css. */
.brand-header {
  position: relative;
  z-index: 2;
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: var(--surface-shadow);
  padding: 20px;
  padding-top: calc(20px + env(safe-area-inset-top, 0px));
}

.brand-header__inner {
  max-width: var(--brand-header-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand-header__actions {
  display: flex;
  align-items: center;
  gap: 15px;
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.brand-mark__logo {
  display: block;
  width: 54px;
  height: 54px;
  object-fit: contain;
  flex-shrink: 0;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.2));
}

.brand-mark__copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.brand-mark__copy strong {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.brand-mark__copy span {
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Bottoni e link ────────────────────────────────────── */
.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 0;
  border-radius: var(--btn-radius);
  padding: 13px 20px;
  font-family: var(--font);
  font-weight: 700;
  font-size: 14.5px;
  line-height: 20px;
  text-decoration: none;
  cursor: pointer;
}
.ui-btn--brand { background: var(--brand-gradient); color: #fff; box-shadow: var(--btn-brand-shadow); }
.ui-btn--brand:hover { box-shadow: var(--btn-brand-shadow-hover); }
.ui-btn--light {
  background: #fff;
  color: var(--brand-end);
  box-shadow: var(--surface-drop);
  border-radius: 11px;
  padding: 12px 18px;
  font-size: 14px;
}
.ui-btn--light:hover { background: var(--btn-light-hover); }
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; }
.ui-btn svg { flex: 0 0 auto; }

.ui-text-link { font-size: 13.5px; font-weight: 700; text-decoration: none; }
.ui-text-link:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Etichetta maiuscola sopra i titoli e targhetta sotto le card. */
.ui-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brand-end);
}
.ui-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--brand-end);
  background: rgba(118, 75, 162, 0.1);
  border-radius: 999px;
  padding: 4px 10px;
}

/* Stesso rilievo di .dashboard-divider nella dashboard rating di TOP Posters. */
.ui-divider {
  height: 6px;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.90),
    inset 0 -1px 2px rgba(33, 33, 33, 0.10),
    0 1px 2px rgba(33, 33, 33, 0.12),
    0 2px 5px rgba(33, 33, 33, 0.06);
}

/* ── Interruttore ──────────────────────────────────────────
   Una checkbox vera disegnata da switch: tastiera, lettori di schermo e
   `change` restano quelli nativi. Spento è incassato come i box del vassoio,
   acceso prende il gradiente di marca. Dentro una .ui-option fa da riga con
   titolo e spiegazione, cliccabile per intero. */
.ui-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 48px;
  height: 28px;
  margin: 0;
  border-radius: 999px;
  background: var(--surface-recessed);
  box-shadow: inset 0 3px 6px rgba(33, 42, 58, 0.25);
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.ui-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(33, 33, 33, 0.3);
  transition: transform 0.2s ease;
}
.ui-switch:checked {
  background: var(--brand-gradient);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(102, 126, 234, 0.4);
}
.ui-switch:checked::after { transform: translateX(20px); }
[dir="rtl"] .ui-switch:checked::after { transform: translateX(-20px); }
.ui-switch:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; }
.ui-switch:disabled { cursor: not-allowed; }

.ui-option {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: var(--surface-box-radius);
  background: var(--surface);
  box-shadow: var(--surface-shadow);
  cursor: pointer;
}
.ui-option__text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ui-option__title { font-size: 14.5px; font-weight: 800; letter-spacing: -0.01em; color: var(--ink); }
.ui-option__hint { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.ui-option:has(.ui-switch:disabled) { opacity: 0.55; cursor: not-allowed; }

/* ── Chip ──────────────────────────────────────────────────
   Una <label> con dentro la checkbox, nascosta alla vista ma non alla
   tastiera. Accesa prende il gradiente e una spunta. */
.ui-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 13px;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(33, 33, 33, 0.22), 0 2px 8px rgba(33, 33, 33, 0.08);
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
.ui-chip input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
.ui-chip:hover { background: var(--btn-light-hover); }
.ui-chip:has(input:checked) {
  background: var(--brand-gradient);
  color: #fff;
  box-shadow: 0 3px 8px rgba(102, 126, 234, 0.40), inset 0 -2px 3px rgba(0, 0, 0, 0.18);
}
.ui-chip:has(input:checked)::before {
  content: "";
  width: 10px;
  height: 6px;
  margin-block-end: 3px;
  border-inline-start: 2.5px solid currentColor;
  border-block-end: 2.5px solid currentColor;
  transform: rotate(-45deg);
}
.ui-chip:has(input:focus-visible) { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.ui-chip:has(input:disabled) { opacity: 0.45; cursor: not-allowed; }

/* ── Footer di marca: vassoio viola che poggia sul fondo pagina ── */
.brand-footer {
  max-width: var(--wrap);
  margin: 28px auto 0;
  padding-inline: var(--gutter);
}
.brand-footer__tray {
  padding: 28px;
  border-radius: var(--surface-radius) var(--surface-radius) 0 0;
  background: var(--brand-gradient);
  box-shadow: var(--surface-shadow);
  color: #fff;
}
/* :where() non pesa: il colore del .ui-btn--light nel footer vince. */
:where(.brand-footer) a { color: inherit; }
.brand-footer__main { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.brand-footer__brand { display: flex; align-items: center; gap: 13px; min-width: 0; }
.brand-footer__brand img { display: block; width: 48px; height: 48px; flex: 0 0 auto; }
.brand-footer__brand strong { font-size: 21px; line-height: 1.2; letter-spacing: -0.025em; font-weight: 800; }
.brand-footer__brand p { margin: 5px 0 0; font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, 0.9); overflow-wrap: anywhere; }
.brand-footer__main .ui-btn { flex: 0 0 auto; }
.brand-footer__divider { margin-top: 23px; }
.brand-footer__bottom {
  margin-top: 17px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 22px;
}
.brand-footer__bottom small { font-size: 12px; color: rgba(255, 255, 255, 0.86); }
.brand-footer__bottom small a { text-decoration: none; }
.brand-footer nav { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.brand-footer nav a { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; text-decoration: none; }
.brand-footer nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (hover: hover) {
  .brand-footer__bottom small a:hover { text-decoration: underline; text-underline-offset: 4px; }
}

/* ── Responsive e preferenze ───────────────────────────── */
@media (max-width: 768px) {
  .brand-header {
    padding: 20px 14px 18px;
    padding-top: calc(20px + env(safe-area-inset-top, 0px));
  }
  .brand-mark__logo { width: 42px; height: 42px; }
  .brand-mark__copy strong { font-size: 18px; }
}

@media (max-width: 580px) {
  .brand-footer__main { flex-wrap: wrap; gap: 23px; }
  .brand-footer__brand { align-items: start; }
  .brand-footer__brand img { width: 42px; height: 42px; }
  .brand-footer__brand strong { font-size: 20px; }
  .brand-footer__main .ui-btn { width: 100%; }
  .brand-footer__bottom { gap: 15px; }
  .brand-footer nav { width: 100%; }
}

@media (pointer: coarse) {
  .brand-footer nav a { min-height: 44px; }
  .ui-chip { min-height: 40px; }
}

@media (prefers-reduced-motion: no-preference) {
  .ui-btn { transition: box-shadow 0.2s ease, transform 0.2s ease, background 0.2s ease; }
  .ui-btn:not(:disabled):hover { transform: translateY(-1px); }
}

@media (prefers-reduced-motion: reduce) {
  .ui-switch,
  .ui-switch::after { transition: none; }
}