/* ═══ Il pulsante e il pannello ═══
 * Colori e misure scritti qui: il pannello non eredita dal sito, così si legge
 * su ogni pagina. Il pulsante sta sotto i dialoghi (SweetAlert2 è a 1060) e
 * sopra il contenuto. */

.arac,
.arac * {
    box-sizing: border-box;
}

.arac [hidden] {
    display: none !important;
}

.arac-apri {
    position: fixed;
    right: 20px;
    bottom: 96px;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    padding: 0;
    color: #04131f;
    background: linear-gradient(135deg, #4be39b, #3ab3ff);
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35);
    cursor: pointer;
}

.arac-pannello {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 10000; /* Lo apre chi lo vuole: sta davanti anche al banner dei cookie (9999). */
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 24px));
    max-height: calc(100vh - 40px);
    max-height: calc(100dvh - 40px);
    overflow: hidden;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.35;
    color: #0b1628;
    background: #eef2f8;
    border-radius: 20px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
}

.arac-testata {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    color: #fff;
    background: #0b1628;
}

.arac-titolo {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}

.arac-tasti {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #c6d3e6;
}

.arac-chiudi {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.arac-corpo {
    padding: 14px;
    overflow-y: auto;
}

.arac-griglia {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.arac-voce {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    min-height: 118px;
    padding: 14px 10px 10px;
    font: inherit;
    font-weight: 600;
    color: #0b1628;
    text-align: center;
    text-transform: none;
    letter-spacing: normal;
    background: #fff;
    border: 2px solid transparent;
    border-radius: 14px;
    box-shadow: none;
    cursor: pointer;
}

/* Sono cinque: l'ultima prende tutta la riga, niente buco. */
.arac-voce:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    min-height: 92px;
}

.arac-voce:hover {
    border-color: #6b7f99;
}

.arac-icona {
    display: flex;
}

.arac-stato {
    display: none;
    padding: 1px 9px;
    font-size: 12px;
    font-weight: 700;
    color: #04131f;
    background: #4be39b;
    border-radius: 999px;
}

.arac-voce[aria-pressed="true"] {
    color: #fff;
    background: #0b1628;
    border-color: #4be39b;
}

.arac-voce[aria-pressed="true"] .arac-stato {
    display: block;
}

.arac-xl {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 12px 0 0;
    padding: 12px 14px;
    font-weight: 600;
    color: #0b1628;
    background: #fff;
    border-radius: 14px;
    cursor: pointer;
}

.arac-xl input {
    position: absolute;
    right: 14px;
    width: 46px;
    height: 26px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.arac-interruttore {
    position: relative;
    flex: none;
    width: 46px;
    height: 26px;
    background: #6b7f99;
    border-radius: 999px;
}

.arac-interruttore::after {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    content: "";
    background: #fff;
    border-radius: 50%;
}

.arac-xl input:checked + .arac-interruttore {
    background: #0b7a4b;
}

.arac-xl input:checked + .arac-interruttore::after {
    left: 23px;
}

.arac-xl input:focus-visible + .arac-interruttore {
    outline: 3px solid #0b1628;
    outline-offset: 2px;
}

.arac-piede {
    padding: 0 14px 14px;
}

.arac-ripristina {
    width: 100%;
    min-height: 44px;
    font: inherit;
    font-weight: 700;
    color: #0b1628;
    background: transparent;
    border: 2px solid #0b1628;
    border-radius: 12px;
    cursor: pointer;
}

.arac-ripristina:disabled {
    color: #566b85;
    border-color: #8fa0b5;
    cursor: default;
}

.arac-pannello--xl {
    width: min(480px, calc(100vw - 24px));
    font-size: 18px;
}

.arac-pannello--xl .arac-voce {
    min-height: 140px;
}

.arac-pannello--xl .arac-voce svg {
    width: 36px;
    height: 36px;
}

/* Sul telefono la dashboard ha in basso la barra e il «+». */
@media (max-width: 1023px) {
    .arac-apri {
        bottom: 148px;
        right: 16px;
    }

    .arac-pannello {
        right: 12px;
        bottom: 12px;
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
}

/* Col testo più grande anche il «+» della dashboard cresce e sale. */
@media (max-width: 1023px) {
    html.arac-testo .arac-apri {
        bottom: 184px;
    }
}

/* ═══ Il riquadro di chi naviga da tastiera: sempre, non è una voce ═══ */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #ffd400 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #000 !important;
}

/* Nelle tendine il campo vero è largo pochi pixel: il riquadro va su tutta la tendina. */
input.react-select__input:focus-visible {
    outline: 0 !important;
    box-shadow: none !important;
}

.react-select__control:has(input:focus-visible) {
    outline: 3px solid #ffd400 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px #000 !important;
}

/* ═══ Contrasto alto ═══
 * Il pannello ha i suoi colori e resta fuori. Le foto restano. Il testo a
 * gradiente del sito (`background-clip: text`) senza sfondo sparirebbe: per
 * questo si rimette il colore di riempimento. */

html.arac-contrasto body,
html.arac-contrasto body *:not(.arac, .arac *, img, video, svg, svg *, canvas, #wpadminbar, #wpadminbar *) {
    color: #fff !important;
    -webkit-text-fill-color: currentcolor !important;
    background-color: #000 !important;
    background-image: none !important;
    border-color: #fff !important;
    box-shadow: none !important;
    text-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

html.arac-contrasto body a:not(.arac *, #wpadminbar *),
html.arac-contrasto body a *:not(.arac *, #wpadminbar *, img, svg, svg *),
html.arac-contrasto body button:not(.arac *, #wpadminbar *),
html.arac-contrasto body button *:not(.arac *, #wpadminbar *, img, svg, svg *) {
    color: #ffd400 !important;
}

html.arac-contrasto body a:not(.arac *, #wpadminbar *) {
    text-decoration: underline !important;
    border-color: #ffd400 !important;
}

html.arac-contrasto body button:not(.arac *, #wpadminbar *) {
    border: 1px solid #ffd400 !important;
}

/* Dove sei e cosa hai scelto: senza i colori del sito, si riconosce da qui. */
html.arac-contrasto body :is([aria-current]:not([aria-current="false"]), [aria-selected="true"], [aria-pressed="true"], .is-attiva, .is-attivo, .is-scelta, .role-option:has(input:checked), .ampa-match-review-buyers label:has(input:checked), .react-select__option--is-focused):not(.arac *, #wpadminbar *),
html.arac-contrasto body :is([aria-current]:not([aria-current="false"]), [aria-selected="true"], [aria-pressed="true"], .is-attiva, .is-attivo, .is-scelta, .role-option:has(input:checked), .ampa-match-review-buyers label:has(input:checked), .react-select__option--is-focused):not(.arac *, #wpadminbar *) *:not(img, svg, svg *) {
    color: #000 !important;
    background-color: #ffd400 !important;
}

/* Il pallino del piano scelto: una corona gialla attorno a un punto nero. */
html.arac-contrasto body .is-scelta .ampap-radio:not(#wpadminbar *) {
    background-color: #000 !important;
    border-color: #000 !important;
    box-shadow: inset 0 0 0 4px #ffd400 !important;
}

/* Gli interruttori sono fatti di soli sfondi: senza queste regole spariscono. */
html.arac-contrasto body .ampa-interruttore__pista:not(#wpadminbar *) {
    box-shadow: 0 0 0 2px #fff !important;
}

html.arac-contrasto body .ampa-interruttore__pomello:not(#wpadminbar *) {
    background-color: #fff !important;
}

html.arac-contrasto body .ampa-interruttore__campo:checked + .ampa-interruttore__pista:not(#wpadminbar *) {
    background-color: #ffd400 !important;
    box-shadow: 0 0 0 2px #ffd400 !important;
}

html.arac-contrasto body .ampa-interruttore__campo:checked + .ampa-interruttore__pista .ampa-interruttore__pomello:not(#wpadminbar *) {
    background-color: #000 !important;
}

/* La legenda e le barre del grafico: il colore qui è l'informazione. */
html.arac-contrasto body .ampa-perf__punto:not(#wpadminbar *) {
    background-color: #bbb !important;
}

html.arac-contrasto body .ampa-perf__punto.is-match:not(#wpadminbar *) {
    background-color: #3ab3ff !important;
}

html.arac-contrasto .ampa-perf__barra-ricerche {
    fill: #bbb !important;
}

html.arac-contrasto .ampa-perf__numero {
    fill: #fff !important;
}

/* Le tendine: i pezzi interni non coprono il bordo, e si vede la voce scelta. */
html.arac-contrasto body :is(.react-select__value-container, .react-select__indicators, .react-select__indicator, .react-select__input-container, .react-select__input, .react-select__placeholder, .react-select__single-value):not(#wpadminbar *) {
    background-color: transparent !important;
}

html.arac-contrasto body .react-select__option--is-selected:not(.react-select__option--is-focused, #wpadminbar *) {
    outline: 2px solid #ffd400 !important;
    outline-offset: -2px !important;
}

/* I testi resi tenui con l'opacità tornano pieni. Non i campi: alcuni sono
 * trasparenti apposta, sopra il loro disegno. */
html.arac-contrasto body :is(p, small, label, legend, li, td, th, dd, dt, h1, h2, h3, h4, h5, h6, a, .ga-societa):not(.arac *, #wpadminbar *) {
    opacity: 1 !important;
}

/* Le credenziali salvate: Chrome le colora di azzurro chiaro col suo stile. */
html.arac-contrasto body input:-webkit-autofill:not(#wpadminbar *) {
    -webkit-text-fill-color: #fff !important;
    box-shadow: inset 0 0 0 1000px #000 !important;
}

/* I dialoghi hanno il fondo nero come la pagina: serve il loro bordo. */
html.arac-contrasto body :is(.swal2-popup, .ampa-modal, .ri-scheda):not(#wpadminbar *) {
    overflow: hidden !important;
    border: 2px solid #fff !important;
}

html.arac-contrasto ::placeholder {
    color: #d8d8d8 !important;
    -webkit-text-fill-color: #d8d8d8 !important;
}

/* ═══ Testo più grande ═══
 * `zoom` e non i font uno per uno: ingrandisce anche pulsanti, link e ciò che
 * la dashboard disegna dopo. Il pannello resta fuori, ha il suo «più grande». */

html.arac-testo body > *:not(.arac, #wpadminbar) {
    zoom: 1.25;
}

/* ═══ Carattere leggibile ═══ */

html.arac-leggibile body *:not(svg, svg *, code, pre, #wpadminbar, #wpadminbar *) {
    font-family: Verdana, Arial, Helvetica, sans-serif !important;
    letter-spacing: 0.01em !important;
    word-spacing: 0.06em;
}

/* Verdana è più larga: le voci del menu vanno a capo invece di finire coi puntini. */
html.arac-leggibile :is(.ampa-shell__voce-testo, .ampa-shell__tab-testo) {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

html.arac-leggibile h1,
html.arac-leggibile h2,
html.arac-leggibile h3 {
    line-height: 1.25 !important;
}

/* ═══ Evidenzia link e pulsanti ═══
 * Un contorno, non uno sfondo: si vede sul sito scuro e sulle parti chiare. */

html.arac-link body a:not(.arac *, #wpadminbar *) {
    text-decoration: underline !important;
    text-underline-offset: 3px;
}

html.arac-link body a:not(.arac *, #wpadminbar *),
html.arac-link body button:not(.arac *, #wpadminbar *),
html.arac-link body [role="button"]:not(.arac *, #wpadminbar *) {
    outline: 2px solid #ffd400 !important;
    outline-offset: 2px !important;
}

/* ═══ Ferma le animazioni ═══ */

html.arac-animazioni,
html.arac-animazioni *,
html.arac-animazioni *::before,
html.arac-animazioni *::after {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
}