/* =========================================================
   Bacedo_Accessibility - Toolbar utente
   Posizione, colore e dimensione del pulsante sono impostati
   via JS (toolbar.js) leggendo la configurazione admin, per
   supportare Desktop/Mobile separati con soglia configurabile.
   ========================================================= */

@font-face {
    font-family: "OpenDyslexic";
    src: url("../fonts/OpenDyslexic-Regular.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* ---- Pulsante flottante ---- */
.bacedo-a11y__toggle {
    position: fixed;
    z-index: 99990;
    width: 52px;
    height: 52px;
    border: none;
    border-radius: 50%;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Il browser (soprattutto Safari/macOS) disegna di default un
       alone chiaro piuttosto grosso sugli elementi a fuoco: qui viene
       tolto per sostituirlo con un contorno più discreto qui sotto,
       visibile solo navigando da tastiera (non con il mouse), così
       l'accessibilità da tastiera resta intatta senza l'alone
       vistoso di default. */
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
/* BUGFIX v1.4.7: due problemi che sommati creavano un vistoso
   riquadro bianco squadrato attorno all'icona:
   1) togliendo lo sfondo del pulsante avevo tolto per errore anche
      "border-radius: 50%" (ripristinato sopra) — un pulsante senza
      arrotondamento rende QUALSIASI outline/ombra un quadrato,
      non un cerchio;
   2) la regola GLOBALE del sito in accessibility.css
      ("button:focus-visible") usa !important sia sull'outline sia su
      un box-shadow bianco, applicandosi anche al nostro pulsante: la
      nostra regola specifica, senza !important, perdeva sempre contro
      quella globale, sommando un alone bianco indesiderato. Ora la
      nostra regola usa !important e annulla esplicitamente quel
      box-shadow, così resta solo il contorno blu voluto. */
.bacedo-a11y__toggle:focus-visible {
    outline: 3px solid #1f6feb !important;
    outline-offset: 3px !important;
    box-shadow: none !important;
}
.bacedo-a11y__toggle .bacedo-a11y__icon-img {
    /* L'icona riempie il pulsante (che ora è solo l'area cliccabile,
       invisibile) al 100%: la dimensione reale in pixel si imposta
       da Negozio -> Configurazione -> Bacedo Accessibility ->
       Impostazioni generali -> "Dimensione pulsante" (Desktop/Mobile
       separate). !important necessario per battere una regola
       generica sulle immagini presente nel tema/page builder del
       sito (es. Magezon), che altrimenti vincerebbe imponendo una
       sua dimensione fissa alle immagini. */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    display: block;
    object-fit: contain;
}
.bacedo-a11y__toggle:hover,
.bacedo-a11y__toggle:focus {
    transform: scale(1.08);
}

/* ---- Pannello ---- */
.bacedo-a11y__panel {
    position: fixed;
    z-index: 99991;
    width: 300px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: #ffffff;
    color: #1a1a1a;
    border: 1px solid #cfcfcf;
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
    padding: 14px;
    font-size: 15px;
    line-height: 1.4;
    text-align: left;
}
.bacedo-a11y__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.bacedo-a11y__title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: #08172b;
}
.bacedo-a11y__close {
    background: transparent;
    border: 0;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 6px 8px;
    color: #333333;
}

.bacedo-a11y__group { margin-bottom: 14px; }
.bacedo-a11y__label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: #08172b;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.03em;
}
.bacedo-a11y__row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.bacedo-a11y__row button {
    min-width: 44px;
    min-height: 40px;
    font-size: 16px;
    font-weight: 700;
    border: 1px solid #08172b;
    background: #ffffff;
    color: #08172b;
    border-radius: 6px;
    cursor: pointer;
}
.bacedo-a11y__value {
    min-width: 56px;
    text-align: center;
    font-weight: 600;
}

.bacedo-a11y__opt {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 6px;
    padding: 10px 12px;
    min-height: 44px;
    border: 1px solid #b5b5b5;
    border-radius: 6px;
    background: #f7f7f7;
    color: #1a1a1a;
    font-size: 15px;
    cursor: pointer;
}
/* BUGFIX v1.3: senza uno stato :hover/:focus esplicito, lo stile
   generico "button:hover" del tema Porto può sovrascrivere colore
   di sfondo/testo (es. portandolo a testo bianco su sfondo chiaro,
   illeggibile). Blindiamo esplicitamente hover/focus dei pulsanti
   della toolbar, in ogni stato. */
.bacedo-a11y__opt:hover,
.bacedo-a11y__opt:focus {
    background: #e2e2e2 !important;
    color: #08172b !important;
    border-color: #08172b !important;
}
.bacedo-a11y__opt[aria-pressed="true"]:hover,
.bacedo-a11y__opt[aria-pressed="true"]:focus {
    background: #1f6feb !important;
    color: #ffffff !important;
    border-color: #1f6feb !important;
}
.bacedo-a11y__row button:hover,
.bacedo-a11y__row button:focus {
    background: #08172b !important;
    color: #ffffff !important;
}
.bacedo-a11y__reset:hover,
.bacedo-a11y__reset:focus {
    background: #a30000 !important;
    color: #ffffff !important;
}
.bacedo-a11y__close:hover,
.bacedo-a11y__close:focus {
    color: #08172b !important;
    background: #e2e2e2 !important;
}
.bacedo-a11y__opt[aria-pressed="true"] {
    background: #08172b;
    border-color: #08172b;
    color: #ffffff;
}
.bacedo-a11y__opt[aria-pressed="true"]::before {
    content: "\2713\00a0";
    font-weight: 700;
}

.bacedo-a11y__reset {
    width: 100%;
    padding: 9px;
    min-height: 44px;
    background: #ffffff;
    border: 1px solid #a30000;
    color: #a30000;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
}

/* ---- Overlay filtro luce blu ---- */
.bacedo-a11y__bluelight-overlay {
    position: fixed;
    inset: 0;
    z-index: 99980;
    background: rgba(255, 160, 30, 0.16);
    pointer-events: none;
    display: none;
}
html.bacedo-mode-bluelight .bacedo-a11y__bluelight-overlay { display: block; }

/* ---- Indicatore lettura ad alta voce ---- */
.bacedo-a11y__tts-indicator {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99992;
    background: #08172b;
    color: #ffffff;
    padding: 10px 14px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
/* BUGFIX v1.3.1: da quando toolbar.css viene caricato a fine pagina
   (fix cascata di prima), questa regola arriva DOPO il CSS interno
   del browser che nasconde gli elementi con l'attributo "hidden"
   (stessa specificità: vince chi carica per ultimo). Risultato:
   l'indicatore restava visibile anche a funzione disattivata.
   Questa regola forza esplicitamente il nascondimento quando
   presente l'attributo "hidden", indipendentemente dall'ordine
   di caricamento. */
.bacedo-a11y__tts-indicator[hidden] {
    display: none !important;
}
.bacedo-a11y__tts-indicator button {
    background: #ffffff;
    color: #08172b;
    border: 0;
    border-radius: 4px;
    padding: 6px 10px;
    font-weight: 600;
    cursor: pointer;
    min-height: 32px;
}

/* =========================================================
   MODALITÀ ATTIVABILI (classi applicate a <html>)
   ========================================================= */

/* ---- Alto contrasto ----
   BUGFIX v1.2: l'elenco manuale di selettori (.page-wrapper, .block,
   .navigation, ecc.) lasciava fuori qualunque blocco CMS/widget con
   markup non previsto (es. banner "TARGHE BACEDO DESIGN"), che
   restava con lo sfondo chiaro mentre il testo veniva forzato
   bianco: contrasto quasi nullo, effetto opposto a quello voluto.
   Sostituito con una regola universale su *tutti* gli elementi.

   BUGFIX v1.3: la regola universale da sola può comunque perdere il
   confronto di "specificità" CSS contro regole del tema più
   circostanziate (es. ".newsletter .subscribe-form input"), anche
   con !important su entrambe: a parità di !important vince la
   specificità più alta, non il file caricato per ultimo. Si ripete
   la stessa classe più volte (".bacedo-mode-contrast" x4): è una
   tecnica CSS valida che aumenta la specificità della nostra regola
   senza dover indovinare ogni selettore del tema uno per uno. */
html.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast body,
html.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast body * {
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
html.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast a,
html.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast a * {
    color: #ffff00 !important;
    text-decoration: underline !important;
}
html.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast button,
html.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast .action.primary,
html.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast input,
html.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast select,
html.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast textarea {
    background-color: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #ffffff !important;
}
/* Immagini e icone: nessun filtro, restano leggibili al naturale
   (uno sfondo nero dietro un PNG trasparente resta comunque ok). */
html.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast img,
html.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast svg,
html.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast picture {
    filter: none !important;
    background: none !important;
}
/* Il pannello della toolbar resta leggibile anche in contrasto */
html.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast.bacedo-mode-contrast .bacedo-a11y__opt[aria-pressed="true"] {
    background-color: #ffff00 !important;
    color: #000000 !important;
}

/* ---- Evidenzia link ---- */
html.bacedo-mode-links a,
html.bacedo-mode-links button.action {
    text-decoration: underline !important;
    outline: 2px dashed #1f6feb !important;
    outline-offset: 1px;
}

/* ---- Font ad alta leggibilità ---- */
html.bacedo-mode-readable body,
html.bacedo-mode-readable body * {
    font-family: Verdana, "Trebuchet MS", Arial, sans-serif !important;
    letter-spacing: 0.03em;
    word-spacing: 0.08em;
}
html.bacedo-mode-readable p,
html.bacedo-mode-readable li {
    line-height: 1.7 !important;
}

/* ---- Font per dislessia (OpenDyslexic, auto-ospitato) ---- */
html.bacedo-mode-dyslexia body,
html.bacedo-mode-dyslexia body * {
    font-family: "OpenDyslexic", Verdana, Arial, sans-serif !important;
    letter-spacing: 0.02em;
    word-spacing: 0.12em;
}
html.bacedo-mode-dyslexia p,
html.bacedo-mode-dyslexia li {
    line-height: 1.8 !important;
}

/* ---- Ferma le animazioni ---- */
html.bacedo-mode-nomotion *,
html.bacedo-mode-nomotion *::before,
html.bacedo-mode-nomotion *::after {
    animation-play-state: paused !important;
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* ---- Modalità notturna ----
   BUGFIX v1.2: la versione precedente usava "filter: invert()" sul
   <body>. Qualunque elemento con un CSS "filter" diventa il
   "containing block" per i suoi discendenti in position:fixed,
   al posto della finestra del browser: il menu mobile di Porto e
   la toolbar stessa (entrambi fixed) restavano quindi "intrappolati"
   dentro il body e Porto li ricalcolava in base all'altezza totale
   della pagina invece che allo schermo — da qui l'effetto "menu
   duplicato in fondo alla pagina". Nessun filter viene più usato:
   stessa tecnica dell'alto contrasto (override diretto colori),
   con una palette scura invece che bianco/nero puro. Le immagini
   restano ai colori naturali (non serve invertirle). */
html.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night body,
html.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night body * {
    background-color: #17181c !important;
    background-image: none !important;
    color: #e9e9e9 !important;
    border-color: #3a3b40 !important;
    box-shadow: none !important;
    text-shadow: none !important;
}
html.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night a,
html.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night a * {
    color: #ffb454 !important;
}
html.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night button,
html.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night .action.primary,
html.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night input,
html.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night select,
html.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night textarea {
    background-color: #24252b !important;
    color: #e9e9e9 !important;
    border: 1px solid #4a4b52 !important;
}
html.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night img,
html.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night svg,
html.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night picture,
html.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night.bacedo-mode-night video {
    background: none !important;
}

/* ---- Debolezza del colore ----
   BUGFIX v1.2: stesso problema della modalità notturna — il filtro
   era applicato al <body>, intrappolando il menu mobile "fixed".
   Il filtro di compensazione (best-effort, non un daltonizzatore
   scientifico) viene ora applicato SOLO alle immagini/video/SVG,
   cioè agli elementi che davvero possono avere "position: fixed"
   in pratica mai: nessun rischio di intrappolare menu o toolbar,
   e resta comunque utile perché è sulle foto prodotto (non sul
   testo, già a contrasto naturale) che la distinzione dei colori
   conta di più. */
html.bacedo-mode-cb-protanopia img,
html.bacedo-mode-cb-protanopia video,
html.bacedo-mode-cb-protanopia svg image {
    filter: saturate(1.6) contrast(1.1) hue-rotate(-12deg);
}
html.bacedo-mode-cb-deuteranopia img,
html.bacedo-mode-cb-deuteranopia video,
html.bacedo-mode-cb-deuteranopia svg image {
    filter: saturate(1.7) contrast(1.1) hue-rotate(10deg);
}
html.bacedo-mode-cb-tritanopia img,
html.bacedo-mode-cb-tritanopia video,
html.bacedo-mode-cb-tritanopia svg image {
    filter: saturate(1.4) contrast(1.05) hue-rotate(28deg);
}

/* ---- Nascondi immagini ----
   L'immagine viene nascosta e sostituita da un'etichetta
   testuale con il suo alt (iniettata da toolbar.js), così il
   contenuto resta comprensibile senza il supporto visivo. */
html.bacedo-mode-hideimages img,
html.bacedo-mode-hideimages picture,
html.bacedo-mode-hideimages video {
    visibility: hidden !important;
}
.bacedo-a11y__alt-label {
    display: inline-block;
    background: #f0f0f0;
    border: 1px dashed #999999;
    color: #1a1a1a;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
}

/* ---- Cursore ingrandito ---- */
html.bacedo-mode-bigcursor,
html.bacedo-mode-bigcursor * {
    cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24'%3E%3Cpath d='M2 2l7.5 18 2-7 7-2z' fill='%23000000' stroke='%23ffffff' stroke-width='1.2'/%3E%3C/svg%3E") 2 2, auto !important;
}

/* Su mobile il pulsante non deve coprire i controlli del checkout */
@media (max-width: 640px) {
    .bacedo-a11y__panel { max-width: calc(100vw - 24px); }
}