/* ── ACCESSIBILITY WIDGET ─────────────────────────────────── */

.a11y-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  font-family: 'Plus Jakarta Sans', sans-serif;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

/* FAB */
.a11y-fab {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #C030B4 0%, #3D57E0 100%);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45);
  transition: transform 0.2s, box-shadow 0.2s;
  flex-shrink: 0;
}
.a11y-fab:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(0,0,0,0.55); }
.a11y-fab:focus-visible { outline: 2px solid #5B7CF4; outline-offset: 3px; }

/* Panel */
.a11y-panel {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 270px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  background: #111826;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}
.a11y-panel::-webkit-scrollbar { width: 4px; }
.a11y-panel::-webkit-scrollbar-track { background: transparent; }
.a11y-panel::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 2px; }

.a11y-panel[hidden] { display: none; }

@keyframes a11yIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.a11y-panel:not([hidden]) { animation: a11yIn 0.16s ease; }

.a11y-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin: 0 0 14px;
}

.a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.a11y-row > span {
  font-size: 13px;
  font-weight: 500;
  color: #E8E8E2;
}

/* Size buttons */
.a11y-size-btns { display: flex; gap: 4px; }

.a11y-size-btn {
  width: 34px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: #B0BAD0;
  cursor: pointer;
  font-weight: 700;
  font-size: 13px;
  font-family: inherit;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1;
}
.a11y-size-btn:first-child { font-size: 11px; }
.a11y-size-btn:last-child  { font-size: 15px; }
.a11y-size-btn[aria-pressed="true"] {
  background: rgba(91,124,244,0.18);
  border-color: #5B7CF4;
  color: #fff;
}
.a11y-size-btn:hover:not([aria-pressed="true"]) { background: rgba(255,255,255,0.06); color: #fff; }
.a11y-size-btn:focus-visible { outline: 2px solid #5B7CF4; outline-offset: 2px; }

/* Switch */
.a11y-switch {
  display: flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 20px;
  padding: 4px 10px 4px 4px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s, border-color 0.2s;
  flex-shrink: 0;
}
.a11y-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  flex-shrink: 0;
  transition: background 0.2s;
}
.a11y-switch-lbl {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: rgba(255,255,255,0.35);
  min-width: 20px;
  text-align: center;
  transition: color 0.2s;
}
.a11y-switch[aria-checked="true"] { background: rgba(91,124,244,0.18); border-color: #5B7CF4; }
.a11y-switch[aria-checked="true"] .a11y-thumb { background: #5B7CF4; }
.a11y-switch[aria-checked="true"] .a11y-switch-lbl { color: #5B7CF4; }
.a11y-switch:focus-visible { outline: 2px solid #5B7CF4; outline-offset: 2px; }

/* Reset */
.a11y-reset-row {
  padding-top: 12px;
  margin-top: 4px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.a11y-reset {
  width: 100%;
  padding: 9px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  background: transparent;
  color: rgba(255,255,255,0.4);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.a11y-reset:hover { color: #fff; border-color: rgba(255,255,255,0.3); }
.a11y-reset:focus-visible { outline: 2px solid #5B7CF4; outline-offset: 2px; }

/* ── OVERRIDES ──────────────────────────────────────────────── */

/* Dimensione testo */
html[data-a11y-size="sm"] { zoom: 0.9; }
html[data-a11y-size="lg"] { zoom: 1.15; }

/* Contrasto alto */
html[data-a11y-contrast="high"] {
  --ink:        #000000;
  --ink-2:      #0D0D0D;
  --surface:    #181818;
  --text:       #FFFFFF;
  --text-muted: #CCCCCC;
  --border:     rgba(255,255,255,0.35);
}

/* Riduci movimento */
html[data-a11y-motion="reduce"] *,
html[data-a11y-motion="reduce"] *::before,
html[data-a11y-motion="reduce"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  scroll-behavior: auto !important;
}

/* Font leggibile */
html[data-a11y-font="readable"] body,
html[data-a11y-font="readable"] p,
html[data-a11y-font="readable"] li,
html[data-a11y-font="readable"] h1,
html[data-a11y-font="readable"] h2,
html[data-a11y-font="readable"] h3,
html[data-a11y-font="readable"] button,
html[data-a11y-font="readable"] input,
html[data-a11y-font="readable"] textarea {
  font-family: Arial, Helvetica, sans-serif !important;
  letter-spacing: 0.01em !important;
}

/* Spaziatura testo */
html[data-a11y-spacing="wide"] p,
html[data-a11y-spacing="wide"] li,
html[data-a11y-spacing="wide"] dt,
html[data-a11y-spacing="wide"] dd,
html[data-a11y-spacing="wide"] label,
html[data-a11y-spacing="wide"] td,
html[data-a11y-spacing="wide"] th {
  line-height: 2.2 !important;
  letter-spacing: 0.1em !important;
  word-spacing: 0.18em !important;
}

/* Monocromatico */
html[data-a11y-mono="on"] { filter: grayscale(100%); }

/* Cursore grande */
html[data-a11y-cursor="large"],
html[data-a11y-cursor="large"] * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M5 3 L5 29 L11 23 L16 35 L19 33.5 L14 22 L23 22 Z' fill='white' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto !important;
}

/* Focus potenziato */
html[data-a11y-focus="enhanced"] *:focus-visible {
  outline: 3px solid #FFDD00 !important;
  outline-offset: 4px !important;
  border-radius: 2px;
}