/* ============================================================================
   acce-form.css — i moduli delle pagine pubbliche

   MISURE IN PIXEL, NON IN REM, e non e' una svista: qui comanda Bootstrap 3,
   che dichiara "html { font-size: 10px }". Un rem vale dieci pixel, non
   sedici: la prima stesura di questo foglio era in rem e ogni misura rendeva
   al 62,5% — il testo del pie' di pagina usciva a 9,2px. Il pannello usa
   Bootstrap 5, dove la radice resta a 16px, e li' i rem vanno bene: sono due
   mondi diversi e non vanno mescolati.

   Login, Registrati e Modulo privacy usavano AdminLTE (le classi .login-box,
   .login-box-body, .login-box-msg) tirandosi dietro tutto il foglio di stile
   del pannello vecchio, piu' una seconda copia di Bootstrap 3, font-awesome e
   ionicons da tre CDN diversi. Qui c'e' solo quello che serve a quei tre
   moduli, e convive con il Bootstrap del tema pubblico senza sovrascriverlo.
   ============================================================================ */

.acce-box {
    /* 520 invece di 480: dentro il contenitore del tema il riquadro risultava
       troppo stretto su desktop, e i campi affiancati ci stavano male. */
    max-width: 560px;
    margin: 0 auto 24px auto;
    background: #fff;
    border: 1px solid #e3e6ed;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(20, 30, 50, .08);
    overflow: hidden;
}

/* Via di mezzo: per i passi della registrazione che hanno due campi
   affiancati. Con 520px diventavano due colonne da niente. */
.acce-box--medio {
    max-width: 780px;
}

.acce-box--largo {
    /* Il modulo privacy ha sedici campi: con 520px i campi affiancati
       diventavano due colonne da niente. */
    max-width: 1040px;
}

.acce-box-body {
    padding: 28px;
}

/* Lo spazio sopra il modulo.

   #header e' "position: fixed": e' fuori dal flusso, quindi il contenuto
   deve lasciargli posto da solo. Il tema lo faceva con un "padding-top: 20%"
   su .banner-text, cioe' una percentuale della larghezza — che sulla home,
   dove sotto c'e' una foto alta 750px, funziona.

   Qui serve una misura in pixel legata all'altezza vera dell'intestazione
   (logo da 70px piu' 20+20 di padding), non alla larghezza della finestra:
   la classe .pagina-modulo la mettono solo le pagine con un form, cosi' la
   home resta con il suo 20%. */
.pagina-modulo .banner-text {
    padding-top: 150px;
    padding-bottom: 60px;
}

@media screen and (max-width: 768px) {
    .pagina-modulo .banner-text {
        padding-top: 120px;
        padding-bottom: 40px;
        margin-bottom: 0;
    }
}

.acce-box-msg {
    margin: 0 0 20px 0;
    font-size: 17px;
    font-weight: 600;
    color: #1f2937;
    text-align: center;
    line-height: 1.4;
}

.acce-box .form-group {
    margin-bottom: 16px;
}

.acce-box label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
}

/* Le caselle: stesso disegno del pannello, senza dipendere dal suo CSS. */
.acce-box .form-control {
    display: block;
    width: 100%;
    padding: 8px 12px;
    font-size: 16px;
    line-height: 1.5;
    color: #1f2937;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 6px;
    box-shadow: none;
    height: auto;
}

.acce-box .form-control:focus {
    border-color: #2c5aa0;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(44, 90, 160, .18);
}

.acce-box textarea.form-control {
    min-height: 96px;
}

/* Il campo sbagliato si vede: il messaggio dice cosa manca, il bordo dice dove. */
.acce-box .form-control.is-invalid {
    border-color: #dc3545;
}

.acce-box .aiuto {
    margin-top: 5px;
    font-size: 13px;
    color: #6c7a8a;
}

.acce-box .obbligatorio {
    color: #dc3545;
}

/* I pulsanti. Nomi propri invece di btn-primary/btn-danger, cosi' il tema
   pubblico resta libero di dare a quelle classi l'aspetto che vuole. */
.acce-btn {
    display: inline-block;
    width: 100%;
    padding: 9px 16px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
}

.acce-btn-primario {
    color: #fff;
    background-color: #2c5aa0;
    border-color: #2c5aa0;
}

    .acce-btn-primario:hover,
    .acce-btn-primario:focus {
        color: #fff;
        background-color: #1e3f73;
        border-color: #1e3f73;
    }

.acce-btn-contorno {
    color: #2c5aa0;
    background-color: #fff;
    border-color: #ced4da;
}

    .acce-btn-contorno:hover,
    .acce-btn-contorno:focus {
        color: #1e3f73;
        background-color: #f4f6fa;
        border-color: #2c5aa0;
    }

.acce-btn:disabled,
.acce-btn[disabled] {
    opacity: .6;
    cursor: default;
}

/* Il contorno del fuoco resta: a questi pulsanti ci si arriva anche col
   tabulatore, e senza non si capisce dove si e'. */
.acce-btn:focus-visible,
.acce-box .form-control:focus-visible {
    outline: 2px solid #2c5aa0;
    outline-offset: 2px;
}

.acce-box-link {
    display: block;
    margin-top: 16px;
    text-align: center;
    font-size: 14px;
}

.acce-box-azioni {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

    .acce-box-azioni .acce-btn {
        flex: 1 1 0;
    }

/* Sotto i 576px i due pulsanti affiancati diventano troppo stretti per
   leggerne l'etichetta: si incolonnano. */
@media (max-width: 575px) {
    .acce-box-azioni {
        flex-direction: column;
    }
}

.acce-passi {
    margin: 0 0 20px 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 6px;
    justify-content: center;
    font-size: 13px;
    color: #6c7a8a;
}

    .acce-passi li {
        padding: 3px 10px;
        border-radius: 999px;
        background: #f4f6fa;
        border: 1px solid #e3e6ed;
    }

    .acce-passi li.corrente {
        background: #2c5aa0;
        border-color: #2c5aa0;
        color: #fff;
        font-weight: 600;
    }

.acce-avviso {
    padding: 12px 16px;
    margin-bottom: 20px;
    border: 1px solid #ffe08a;
    background: #fff8e1;
    border-radius: 6px;
    font-size: 14px;
    color: #6b5800;
}

/* Il gruppo campo + pulsante (l'occhio della password).

   Si dichiara qui e non ci si appoggia a .input-group di Bootstrap 3, che e'
   una tabella e pretende il contorno .input-group-btn attorno al pulsante. La
   classe resta .input-group perche' e' quella che togglePwd cerca risalendo
   dal pulsante al campo. */
.acce-box .input-group {
    display: flex;
    width: 100%;
}

    .acce-box .input-group .form-control {
        flex: 1 1 auto;
        width: 1%;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .acce-box .input-group .acce-btn {
        flex: 0 0 auto;
        width: auto;
        margin-left: -1px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

/* La trappola per gli invii automatici: un campo che sta nell'HTML ma che una
   persona non vede e non incontra col tabulatore. I programmi che compilano i
   moduli leggendo il sorgente lo riempiono, e quello li tradisce.

   Non si usa display:none: alcuni li riconoscono e lo saltano. Si toglie dal
   flusso e lo si porta fuori schermo. */
.acce-trappola {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* I recapiti sopra il modulo: prima del "scrivici" ci vuole il "a chi". */
.acce-recapiti {
    padding: 12px 16px;
    margin-bottom: 20px;
    background: #f4f6fa;
    border: 1px solid #e3e6ed;
    border-radius: 6px;
    font-size: 15px;
}

    .acce-recapiti p {
        margin: 0 0 6px 0;
    }

    .acce-recapiti p:last-child {
        margin-bottom: 0;
    }

    .acce-recapiti i {
        width: 19px;
        color: #2c5aa0;
    }

/* ============================================================================
   Il pie' di pagina

   Prima era una riga sola con "© Copyright © 2026" — il simbolo scritto due
   volte e l'anno fisso nel markup, che a gennaio sarebbe rimasto quello
   vecchio. Non diceva cos'e' NoiDoniamo, non offriva un modo per scrivere, e
   non linkava l'informativa privacy: su un sito che raccoglie dati personali
   quel link e' il minimo.
   ============================================================================ */

.acce-footer {
    background: #201f22;
    color: rgba(255, 255, 255, .72);
    padding: 56px 0 24px 0;
    font-size: 15px;
    line-height: 1.6;
}

    .acce-footer h3 {
        color: #fff;
        font-size: 17px;
        font-weight: 700;
        letter-spacing: .02em;
        margin: 0 0 16px 0;
        text-transform: none;
    }

    .acce-footer p {
        color: rgba(255, 255, 255, .72);
        font-size: 15px;
        line-height: 1.6;
    }

    .acce-footer a {
        color: #fff;
    }

        .acce-footer a:hover,
        .acce-footer a:focus {
            color: #ff8c42;
            text-decoration: underline;
        }

.acce-footer-link {
    list-style: none;
    margin: 0;
    padding: 0;
}

    .acce-footer-link li {
        list-style: none;
        margin-bottom: 9px;
    }

    .acce-footer-link i {
        width: 21px;
        color: #ff8c42;
    }

/* La riga in fondo: separata da un filo, non da uno stacco di colore. */
.acce-footer-fondo {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .14);
    font-size: 14px;
}

    .acce-footer-fondo p {
        margin: 0;
        font-size: 14px;
    }

/* Sotto i 768px le tre colonne si incolonnano: servono stacchi fra una e
   l'altra, altrimenti i titoli si attaccano al testo di quella sopra. */
@media screen and (max-width: 768px) {

    .acce-footer {
        padding-top: 40px;
        text-align: center;
    }

        .acce-footer .col-md-5,
        .acce-footer .col-md-4,
        .acce-footer .col-md-3 {
            margin-bottom: 32px;
        }

    .acce-footer-fondo {
        justify-content: center;
        text-align: center;
    }
}

/* ============================================================================
   Schermi piccoli

   Le colonne dei moduli erano "col-xs-*", che in Bootstrap 3 non si impila
   MAI: su un telefono da 375px "Prov." e "Cap" finivano in due colonne da
   ottanta pixel l'una. Adesso sono "col-sm-*" e sotto i 768px si mettono una
   sotto l'altra. Qui c'e' il resto.
   ============================================================================ */

@media screen and (max-width: 575px) {

    /* Il riquadro non deve toccare i bordi dello schermo. */
    .acce-box {
        margin-left: 4px;
        margin-right: 4px;
    }

    /* Ventotto pixel di bordo interno su un telefono sono tanti: tolgono
       larghezza proprio dove ce n'e' poca. */
    .acce-box-body {
        padding: 20px 16px;
    }

    /* I tre passi della registrazione a capo invece che schiacciati. */
    .acce-passi {
        flex-wrap: wrap;
        font-size: 12px;
    }

    /* Il riquadro dei recapiti e l'informativa restano leggibili. */
    .acce-recapiti,
    .acce-box .aiuto {
        font-size: 13px;
    }
}

/* I campi non scendono sotto i 16px nemmeno sul telefono: sotto quella
   soglia iOS ingrandisce la pagina da solo appena si tocca una casella, e
   l'utente si ritrova il modulo fuori schermo senza aver fatto niente. */
@media screen and (max-width: 767px) {

    .acce-box .form-control {
        font-size: 16px;
    }
}

/* ---------------------------------------------------------------------------
   La home

   Misure in px come tutto il resto del file: Bootstrap 3 mette
   html { font-size: 10px }, quindi 1rem qui vale 10px e non 16px. Un
   font-size: 0.9rem scritto pensando al pannello diventerebbe 9px.
   --------------------------------------------------------------------------- */

.acce-home {
    padding: 70px 0;
    background: #fff;
}

.acce-home-chiara {
    background: #f6f7f9;
}

.acce-home-titolo {
    margin: 0 0 14px;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    color: #23282d;
}

.acce-home-intro {
    max-width: 680px;
    margin: 0 auto 46px;
    font-size: 16px;
    line-height: 1.65;
    text-align: center;
    color: #5b6169;
}

/* Le quattro schede restano alte uguali anche con testi di lunghezza
   diversa: senza, la riga si sfalsa e la terza scheda "galleggia". */
.acce-home-schede {
    display: flex;
    flex-wrap: wrap;
}

/* Il clearfix di .row in Bootstrap 3 sono due pseudo-elementi con
   display: table. Dentro un contenitore flex diventano due elementi flex
   veri e propri, cioe' due colonne vuote che spostano le schede. */
.acce-home-schede::before,
.acce-home-schede::after {
    display: none;
}

.acce-home-schede > [class*="col-"] {
    display: flex;
    margin-bottom: 24px;
}

.acce-home-scheda {
    width: 100%;
    padding: 30px 24px;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    background: #fff;
    transition: box-shadow .2s ease, transform .2s ease;
}

.acce-home-scheda:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.acce-home-scheda i {
    display: block;
    margin-bottom: 16px;
    font-size: 30px;
    color: #d9232d;
}

.acce-home-scheda h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.35;
    color: #23282d;
}

.acce-home-scheda p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #5b6169;
}

.acce-home-passi {
    margin-bottom: 36px;
}

.acce-home-passo {
    padding: 20px 16px;
    text-align: center;
}

.acce-home-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: #d9232d;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
}

.acce-home-passo h3 {
    margin: 0 0 8px;
    font-size: 17px;
    font-weight: 700;
    color: #23282d;
}

.acce-home-passo p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #5b6169;
}

.acce-home-azione {
    text-align: center;
}

.acce-home-azione .btn-red {
    margin: 0 6px 10px;
}

@media (max-width: 767px) {

    .acce-home {
        padding: 46px 0;
    }

    .acce-home-titolo {
        font-size: 24px;
    }

    .acce-home-intro {
        margin-bottom: 32px;
        font-size: 15px;
    }

    /* In colonna il numero del passo sta a fianco del titolo, non sopra:
       tre cerchi incolonnati fanno scorrere mezzo schermo per niente. */
    .acce-home-passo {
        padding: 14px 0;
    }

    .acce-home-numero {
        width: 38px;
        height: 38px;
        margin-bottom: 10px;
        font-size: 17px;
    }

    .acce-home-azione .btn-red {
        display: block;
        margin: 0 0 10px;
    }

}

/* Il nome del centro sotto il titolo del modulo privacy: dice a chi si sta
   consegnando il consenso, ed e' l'informazione che rende il modulo diverso
   da quello di un altro centro. */
.acce-box-centro {
    display: block;
    margin-top: 4px;
    font-size: 15px;
    font-weight: 400;
    color: #5b6169;
}

/* ---------------------------------------------------------------------------
   La pagina pubblica del centro
   --------------------------------------------------------------------------- */

/* L'intestazione sopra la fotografia.

   Come .pagina-modulo lascia posto all'intestazione fissa in pixel e non in
   percentuale della larghezza: il 20% del tema funziona sulla home, dove
   sotto c'e' un blocco di testo alto che riempie da solo la fascia. */
/* La fascia si accorcia: senza min-height sotto il testo restano
   quattrocento pixel di sola fotografia. Chi arriva col telefono deve
   scorrere uno schermo intero prima di vedere le giornate di donazione.
   La classe la mette la pagina, vedi MasterPage.master.vb. */
.banner.banner-corto {
    min-height: 0;
}

.pagina-centro .banner-text {
    padding-top: 150px;
    padding-bottom: 70px;
}

/* Il fondo bianco velato e' quello che il tema mette su h1 e p: la
   fotografia sotto ha zone chiare e zone scure, e il testo scuro sopra le
   zone scure sparisce.

   Cambia una cosa: display: table invece di block. Da blocco la fascia
   bianca arriva fino al bordo della colonna, e sotto un nome corto come
   "Avis Accettura" restano quaranta centimetri di bianco vuoto. Con
   inline-block si stringeva sul testo, ma le tre fasce - occhiello, nome,
   comune - finivano affiancate sulla stessa riga: a schermo intero c'e'
   posto per tutte e tre, e si leggevano come una riga sola confusa. La
   tabella stringe sul contenuto E occupa la riga da sola. */
.acce-centro-testata .acce-centro-occhiello {
    display: table;
    margin: 0 0 14px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d9232d;
}

.acce-centro-testata h1 {
    display: table;
    margin-bottom: 14px;
    padding: 12px 18px;
    /* font-weight 100 arriva dal tema: a 42px un nome scritto cosi' sottile
       si legge male sopra una fotografia. */
    font-weight: 300;
    font-size: 42px;
    line-height: 1.15;
}

.acce-centro-testata .acce-centro-dove {
    display: table;
    margin-bottom: 26px;
    padding: 8px 14px;
    font-size: 17px;
}

.acce-centro-azioni .btn-red {
    margin: 0 8px 10px 0;
}

/* Il secondo pulsante e' bianco e non rosso: due pulsanti rossi affiancati
   pesano uguale, e qui uno dei due - "diventa donatore" - e' il motivo per
   cui la pagina esiste. */
.btn-red.btn-chiaro {
    background: rgba(255, 255, 255, .92);
    color: #23282d;
}

    .btn-red.btn-chiaro:hover,
    .btn-red.btn-chiaro:focus {
        background: #fff;
        color: #d9232d;
    }

/* Le prossime giornate, una scheda per data.

   Prima erano righe di un elenco: "domenica 20 settembre 2026" scritto per
   esteso, tre volte una sotto l'altra. Il numero grande si legge da lontano
   e resta in testa; la riga per esteso va riletta. */
.acce-giornate-schede {
    display: flex;
    flex-wrap: wrap;
}

    /* Stesso motivo di .acce-home-schede: il clearfix di .row in Bootstrap 3
       sono due pseudo-elementi che dentro un flex diventano colonne vuote. */
    .acce-giornate-schede::before,
    .acce-giornate-schede::after {
        display: none;
    }

    .acce-giornate-schede > [class*="col-"] {
        display: flex;
        margin-bottom: 24px;
    }

.acce-giornata {
    width: 100%;
    padding: 26px 20px;
    border: 1px solid #e4e7ea;
    border-top: 3px solid #d9232d;
    border-radius: 8px;
    background: #fff;
    text-align: center;
}

    .acce-giornata > span {
        display: block;
    }

.acce-giornata-quando {
    margin-bottom: 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #d9232d;
}

.acce-giornata-numero {
    font-size: 52px;
    font-weight: 700;
    line-height: 1;
    color: #23282d;
}

/* Il mese e il giorno della settimana arrivano minuscoli dal formato
   italiano - "settembre", "domenica". Da soli su una riga si leggono come
   un errore di battitura. */
.acce-giornata-mese {
    margin-top: 6px;
    font-size: 18px;
    color: #23282d;
    text-transform: capitalize;
}

.acce-giornata-giorno {
    margin-top: 8px;
    font-size: 14px;
    color: #5b6169;
    text-transform: capitalize;
}

/* I due riquadri in fondo: dove siamo, e come si diventa donatori. */
.acce-centro-blocchi {
    display: flex;
    flex-wrap: wrap;
}

    .acce-centro-blocchi::before,
    .acce-centro-blocchi::after {
        display: none;
    }

    .acce-centro-blocchi > [class*="col-"] {
        display: flex;
        margin-bottom: 24px;
    }

.acce-centro-blocco {
    width: 100%;
    padding: 30px 28px;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    background: #fff;
}

    .acce-centro-blocco h2 {
        margin: 0 0 18px;
        font-size: 20px;
        font-weight: 700;
        color: #23282d;
    }

        .acce-centro-blocco h2 i {
            margin-right: 8px;
            color: #d9232d;
        }

    .acce-centro-blocco p {
        margin: 0;
        font-size: 15px;
        line-height: 1.7;
        color: #5b6169;
    }

/* Il riquadro dell'invito ha il fondo grigio: dei due e' quello su cui si
   deve cliccare, e a parita' di contorno i due pesano uguale. */
.acce-centro-blocco--invito {
    background: #f6f7f9;
}

.acce-centro-recapiti {
    margin: 0;
    padding: 0;
    list-style: none;
}

    .acce-centro-recapiti li {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 12px 0;
        border-bottom: 1px solid #eef0f2;
        font-size: 15px;
        line-height: 1.6;
        color: #23282d;
    }

    .acce-centro-recapiti li:first-child {
        padding-top: 0;
    }

    .acce-centro-recapiti li:last-child {
        padding-bottom: 0;
        border-bottom: 0;
    }

    /* flex: 0 0 20px e non width: l'icona non si stringe quando l'indirizzo
       a fianco va a capo. */
    .acce-centro-recapiti i {
        flex: 0 0 20px;
        margin-top: 3px;
        text-align: center;
        color: #d9232d;
    }

    .acce-centro-recapiti a {
        color: #2c5aa0;
    }

        .acce-centro-recapiti a:hover,
        .acce-centro-recapiti a:focus {
            text-decoration: underline;
        }

/* Il messaggio di una pagina che non ha niente da mostrare - il centro che
   non esiste. Largo quanto una colonna di testo e centrato: da bordo a bordo
   sarebbe una riga sola lunga un metro. */
.acce-avviso-pagina {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

    .acce-avviso-pagina p {
        font-size: 16px;
        line-height: 1.7;
        color: #5b6169;
    }

@media screen and (max-width: 767px) {

    .pagina-centro .banner-text {
        padding-top: 125px;
        padding-bottom: 45px;
    }

    /* responsive.css aggiunge 70px di margine sopra l'h1 del banner: sommati
       al padding qui sopra fanno duecento pixel di fotografia vuota. */
    .acce-centro-testata h1 {
        margin-top: 0;
        font-size: 30px;
    }

    .acce-centro-azioni .btn-red {
        display: block;
        margin: 0 0 10px;
    }

    .acce-giornata-numero {
        font-size: 44px;
    }

    .acce-centro-blocco {
        padding: 24px 20px;
    }

}

/* responsive.css centra il testo del banner sotto i 768px. Le tre fasce sono
   tabelle, e una tabella non si centra con text-align: serve il margine
   automatico, se no restano incollate a sinistra sotto il titolo centrato. */
@media screen and (max-width: 768px) {

    .acce-centro-testata .acce-centro-occhiello,
    .acce-centro-testata h1,
    .acce-centro-testata .acce-centro-dove {
        margin-left: auto;
        margin-right: auto;
    }

}

.acce-sottotitolo {
    margin: -8px 0 24px;
    font-size: 16px;
    color: #5b6169;
}

.acce-nota {
    margin: 0;
    font-size: 14px;
    color: #5b6169;
}

.acce-azioni {
    margin: 18px 0 0;
}

/* ---------------------------------------------------------------------------
   Trova il tuo centro
   --------------------------------------------------------------------------- */

.acce-cerca-centro {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    max-width: 620px;
    margin: 0 auto 20px;
}

.acce-cerca-campo {
    flex: 1 1 260px;
    min-width: 0;
    padding: 12px 16px;
    border: 1px solid #ced4da;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.4;
    color: #23282d;
    background: #fff;
}

    .acce-cerca-campo:focus {
        outline: none;
        border-color: #d9232d;
        box-shadow: 0 0 0 3px rgba(217, 35, 45, .15);
    }

.acce-cerca-esito {
    max-width: 620px;
    margin: 0 auto 24px;
    font-size: 15px;
    text-align: center;
    color: #5b6169;
}

.acce-elenco-centri {
    display: flex;
    flex-wrap: wrap;
}

/* Stesso clearfix di .row da neutralizzare: in Bootstrap 3 sono due
   pseudo-elementi con display: table, e dentro un contenitore flex
   diventano due colonne vuote che spostano le schede. */
.acce-elenco-centri::before,
.acce-elenco-centri::after {
    display: none;
}

.acce-elenco-centri > [class*="col-"] {
    display: flex;
    margin-bottom: 20px;
}

/* La scheda intera e' il collegamento, non solo il titolo: il bersaglio da
   colpire col dito e' tutta la scheda, non tre parole. */
.acce-centro-scheda {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 22px;
    border: 1px solid #e4e7ea;
    border-radius: 8px;
    background: #fff;
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

    .acce-centro-scheda:hover,
    .acce-centro-scheda:focus {
        transform: translateY(-3px);
        border-color: #d9232d;
        box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
        text-decoration: none;
    }

    .acce-centro-scheda h3 {
        margin: 0 0 6px;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.35;
        color: #23282d;
    }

    .acce-centro-scheda p {
        flex-grow: 1;
        margin: 0 0 14px;
        font-size: 14px;
        color: #5b6169;
    }

.acce-centro-vai {
    font-size: 14px;
    font-weight: 600;
    color: #d9232d;
}

    .acce-centro-vai i {
        margin-left: 4px;
        transition: transform .2s ease;
    }

.acce-centro-scheda:hover .acce-centro-vai i {
    transform: translateX(3px);
}

@media (max-width: 575px) {

    .acce-cerca-centro .btn-red {
        width: 100%;
    }

}

/* ---------------------------------------------------------------------------
   Il testo lungo: informativa privacy e simili.

   Misure in px come tutto il resto: Bootstrap 3 mette html { font-size: 10px },
   quindi qui 1rem vale 10px e non 16.
   --------------------------------------------------------------------------- */

.acce-testo {
    text-align: left;
    font-size: 16px;
    line-height: 1.7;
    color: #3d434a;
}

    .acce-testo h2 {
        margin: 32px 0 12px;
        font-size: 21px;
        font-weight: 700;
        line-height: 1.3;
        color: #23282d;
    }

    .acce-testo h2:first-child {
        margin-top: 0;
    }

    .acce-testo h3 {
        margin: 24px 0 8px;
        font-size: 17px;
        font-weight: 600;
        color: #23282d;
    }

    .acce-testo p {
        margin: 0 0 14px;
    }

    .acce-testo ul {
        margin: 0 0 16px;
        padding-left: 22px;
    }

    .acce-testo li {
        margin-bottom: 8px;
    }

    .acce-testo a {
        color: #d9232d;
        text-decoration: underline;
    }

    /* Il riquadro degli avvisi dentro il testo lungo respira di più: sono i
       passaggi che contano, e schiacciati fra due capoversi si leggono come
       una nota a margine. */
    .acce-testo .acce-avviso {
        margin: 20px 0;
    }

@media (max-width: 575px) {

    .acce-testo {
        font-size: 15px;
    }

    .acce-testo h2 {
        font-size: 19px;
    }

}

/* ---------------------------------------------------------------------------
   Il menu a panino

   Il pannello del tema si apriva con opacity: 0.9 - nero al novanta per
   cento - e le voci scritte in bianco all'ottanta. Sopra la fotografia del
   banner i due si sommavano e le voci restavano grigie su grigio: il menu
   c'era, si apriva, ma non si leggeva.

   Qui il fondo torna pieno e il testo bianco.
   --------------------------------------------------------------------------- */

@media screen and (max-width: 1024px) {

    .navigation {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #16151a;
    }

    /* L'opacity: 0.9 arriva da .navigation.open in main.css, che vince per
       specificita' sulla regola qui sopra: va ridichiarata sulla stessa
       classe. La dissolvenza in apertura resta, solo che arriva fino a 1. */
    .navigation.open {
        opacity: 1;
    }

    /* Il centraggio del tema era "top: 45%" piu' una traslazione: con quattro
       voci finiva alto, con sei sbordava dallo schermo. Il flex del
       contenitore lo fa da solo, e questo torna un elenco normale. */
    .navigation .primary-nav {
        position: static;
        width: 100%;
        max-width: 320px;
        margin: 0;
        padding: 0;
        -webkit-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .navigation li {
        display: block;
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, .12);
    }

        .navigation li:last-child {
            border-bottom: 0;
        }

    /* Sedici pixel di testo e diciotto di bordo sopra e sotto fanno una riga
       alta piu' di cinquanta: sotto quella misura un dito ne prende due. */
    /* L ID davanti non e un vezzo: main.css ha "#header a { color: #000 }",
       che con il suo ID vince su ".navigation a" comunque la si scriva dopo -
       la specificita non si batte con l ordine. Il fondo scuro arrivava
       (era nostro, senza ID), il testo restava nero: menu nero su nero.
       Riscritta con lo stesso ID davanti, questa vince. */
    #header .navigation a {
        display: block;
        padding: 18px 12px;
        font-size: 16px;
        letter-spacing: 2px;
        color: #fff;
    }

        #header .navigation a:hover,
        #header .navigation a:focus {
            color: #e84545;
        }

}

/* Mentre il pannello e' aperto la pagina sotto non scorre: senza, il dito
   che scorre sul menu porta via la pagina, e alla chiusura ci si ritrova in
   un punto diverso da quello da cui si era partiti. */
body.menu-aperto {
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Le pagine di esito

   Il riquadro dopo l'invio di un modulo: registrazione andata, oppure sei
   arrivato qui senza sapere a quale centro. .acce-box non ha bordo interno -
   quello lo mette .acce-box-body, che qui non c'e' perche' dentro non ci sono
   campi - e senza questa classe il testo toccherebbe il bordo del riquadro.
   --------------------------------------------------------------------------- */

.acce-esito {
    padding: 38px 28px 32px;
    text-align: center;
}

    .acce-esito > i {
        display: block;
        margin-bottom: 18px;
        font-size: 44px;
        color: #2e9e5b;
    }

    /* Non un esito ma una domanda: manca qualcosa per proseguire. Verde
       vorrebbe dire che e' andato tutto bene, e non e' cosi'. */
    .acce-esito--avviso > i {
        color: #d9232d;
    }

    /* Ne' verde ne' rosso. Una richiesta di conferma non e' un errore: il
       rosso direbbe che qualcosa e' andato storto quando invece manca solo
       una risposta. */
    .acce-esito--domanda > i {
        color: #2c5aa0;
    }

/* Il riquadro del messaggio ha un pulsante solo - OK - e .acce-box-azioni lo
   fa largo quanto il riquadro, perche' e' pensato per due pulsanti
   affiancati. Da solo, largo 500 pixel, sembra la barra di una pagina intera
   invece del modo di chiudere un avviso. */
.acce-box-azioni--sola {
    max-width: 240px;
    margin-left: auto;
    margin-right: auto;
}

    .acce-esito h2 {
        margin: 0 0 14px;
        font-size: 24px;
        font-weight: 700;
        color: #23282d;
    }

    .acce-esito p {
        max-width: 540px;
        margin: 0 auto 14px;
        font-size: 15px;
        line-height: 1.7;
        color: #5b6169;
    }

    .acce-esito .acce-azioni {
        margin-top: 26px;
    }

@media screen and (max-width: 767px) {

    .acce-esito {
        padding: 30px 20px 26px;
    }

    .acce-esito h2 {
        font-size: 21px;
    }

}

/* ---------------------------------------------------------------------------
   La pagina di prenotazione

   Ci arriva il donatore dal pulsante dell'email. Stessa impaginazione della
   pagina del centro: intestazione sulla fotografia, poi un riquadro solo con
   quello che c'e' da fare.
   --------------------------------------------------------------------------- */

/* Il titolo dentro il riquadro. Prima era un h2 senza regole, e prendeva
   quelle del tema: nero, enorme, con l'icona grande uguale al testo. */
.acce-titolo-riquadro {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #23282d;
}

    .acce-titolo-riquadro i {
        margin-right: 10px;
        font-size: 19px;
        color: #d9232d;
    }

/* Quanto manca, accanto alla data. Grigio e piu' piccolo: la data e' il dato,
   questo e' il commento alla data. */
.acce-quando {
    margin-left: 8px;
    font-size: 14px;
    color: #5b6169;
    font-weight: 400;
}

/* La risposta registrata.

   Prima era un avviso giallo uguale per il si' e per il no, e i due pulsanti
   restavano identici dopo il clic: non si capiva se la risposta fosse stata
   presa. Adesso il colore dice da solo quale delle due e'. */
.acce-risposta {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    margin: 4px 0 20px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.6;
}

    .acce-risposta i {
        flex: 0 0 20px;
        margin-top: 3px;
        font-size: 17px;
        text-align: center;
    }

.acce-risposta-si {
    border-color: #b7e0c3;
    background: #eefaf1;
    color: #1d5b32;
}

    .acce-risposta-si i {
        color: #2e9e5b;
    }

/* La scelta dell orario.

   Il riquadro e la cosa piu importante della pagina dopo i due pulsanti, e
   deve sembrarlo: sfondo appena staccato, bordo, e la tendina larga quanto
   tutto lo spazio. Su un telefono una select stretta accanto a un pulsante
   grande si preme per sbaglio. */
.acce-scelta-orario {
    padding: 16px;
    margin: 4px 0 20px;
    border: 1px solid #dfe3e8;
    border-radius: 10px;
    background: #fbfcfd;
}

.acce-etichetta-orario {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 16px;
    color: #2b3138;
}

/* Le pastiglie degli orari.

   Il pallino vero e nascosto ma NON con display:none: cosi resta
   raggiungibile col tasto tab e i lettori di schermo lo annunciano. Si
   toglie dalla vista schiacciandolo a un punto. */
.acce-orari input[type=radio] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.acce-orari label {
    display: inline-block;
    min-width: 68px;
    margin: 0 8px 8px 0;
    padding: 11px 6px;
    border: 1px solid #c8ced5;
    border-radius: 8px;
    background: #fff;
    font-size: 16px;
    color: #2b3138;
    text-align: center;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

    .acce-orari label:hover {
        border-color: #9aa2ab;
    }

    /* La scelta si vede da lontano: piena e rossa, non solo un bordo.
       Su uno schermo al sole un bordo di un pixel non si distingue. */
    .acce-orari input[type=radio]:checked + label {
        border-color: #d9534f;
        background: #d9534f;
        color: #fff;
        font-weight: 600;
    }

    /* Il contorno del fuoco sta sull etichetta, perche il pallino e
       invisibile: senza questo, chi naviga da tastiera non sa dov e. */
    .acce-orari input[type=radio]:focus + label {
        outline: none;
        box-shadow: 0 0 0 3px rgba(217,83,79,.28);
    }

.acce-nota-orario {
    margin: 8px 0 0;
    font-size: 14px;
    color: #6b7178;
}

/* Il guasto: stessa forma degli altri due stati, colore diverso. Rosso e non
   giallo perche non e un avviso ma una cosa che NON e stata fatta, e chi
   legge deve capire che deve riprovare. */
.acce-risposta-errore {
    border-color: #f5c2c0;
    background: #fdf2f2;
    color: #a3312c;
}

    .acce-risposta-errore i {
        color: #d9534f;
    }

.acce-risposta-no {
    border-color: #e4e7ea;
    background: #f6f7f9;
    color: #4a5058;
}

    .acce-risposta-no i {
        color: #767c85;
    }

/* Le righe con data e indirizzo riusano l'elenco della pagina del centro: e'
   la stessa cosa - un'icona e un dato accanto - e due impianti diversi per la
   stessa cosa si sfasano al primo ritocco. */
.acce-centro-recapiti li > span {
    flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
   I pulsanti della prenotazione

   .acce-btn-secondario non esisteva: il pulsante "Questa volta non posso" non
   aveva nessuna regola e prendeva quella di sistema del telefono - su iPhone
   fondo azzurro e testo arancione, illeggibile e fuori posto.

   E il disabilitato era solo "opacity: .6". Il pulsante della risposta gia'
   data usciva sbiadito, che si legge come GUASTO, non come SCELTO. Sono due
   messaggi diversi: uno dice "questo non funziona", l'altro "questa e' la tua
   risposta".
   --------------------------------------------------------------------------- */

.acce-btn-secondario {
    color: #23282d;
    background-color: #fff;
    border-color: #ccd2d8;
}

    .acce-btn-secondario:hover,
    .acce-btn-secondario:focus {
        color: #23282d;
        background-color: #f4f5f7;
        border-color: #a9b2bb;
    }

/* La risposta che hai gia' dato: piena, non sbiadita.

   Verde per il si' e grigia per il no, come il riquadro qui sopra: i due
   colori si ripetono a un centimetro di distanza e si leggono insieme. Il
   cursore resta quello normale - non e' un pulsante rotto, e' un pulsante che
   ha gia' fatto il suo lavoro. */
.acce-btn-scelto,
.acce-btn-scelto:disabled,
.acce-btn-scelto[disabled] {
    opacity: 1;
    color: #1d5b32;
    background-color: #eefaf1;
    border-color: #b7e0c3;
    cursor: default;
}

.acce-btn-scelto-no,
.acce-btn-scelto-no:disabled,
.acce-btn-scelto-no[disabled] {
    opacity: 1;
    color: #4a5058;
    background-color: #f6f7f9;
    border-color: #ccd2d8;
    cursor: default;
}

/* I due pulsanti uno sotto l'altro sul telefono, con un po' d'aria in mezzo:
   affiancati a schermo stretto diventano due strisce da toccare a caso. */
@media screen and (max-width: 575px) {

    .acce-box-azioni .acce-btn + .acce-btn {
        margin-top: 10px;
    }

}

/* Le pastiglie spente, quando un orario è già stato scelto.

   Non si nascondono: chi riapre l'invito deve poter vedere a che ora è
   atteso, e vederlo dentro la fila degli orari gli dice anche quant'è
   pieno il resto. Ma non si toccano: per cambiare c'è il pulsante. */
.acce-orari-bloccate label {
    cursor: default;
    opacity: .45;
}

    .acce-orari-bloccate input[type=radio]:checked + label {
        opacity: 1;
    }

    .acce-orari-bloccate label:hover {
        border-color: #c8ced5;
    }

/* ===== Caricamento =====

   Un velo semitrasparente con la sfocatura dietro e una rotella disegnata dal
   CSS. Prima era una gif del 2015 di quindici kilobyte: su uno schermo denso
   si vedeva sgranata, e non si poteva ricolorare.

   La rotella e' uno ::after e non un elemento suo: cosi' il markup che la usa
   resta un div e basta, identico in tutte le pagine che lo mettono.

   Niente classi di Bootstrap qui dentro, e non e' pigrizia. Il pannello usa
   Bootstrap 5 e il sito pubblico il 3.3.5: .spinner-border esiste solo nel
   primo, e una rotella che compare di la' e non di qua e' peggio di nessuna
   rotella. */
.acce-caricamento {
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
}

.acce-caricamento::after {
    content: "";
    width: 48px;
    height: 48px;
    border: 4px solid rgba(44, 90, 160, .18);
    border-top-color: #2c5aa0;
    border-radius: 50%;
    animation: acce-gira .7s linear infinite;
}

@keyframes acce-gira {
    to { transform: rotate(360deg); }
}

/* Chi ha chiesto meno animazioni non resta senza risposta: la rotella
   rallenta invece di sparire, perche' e' l'unica cosa in pagina che dica
   "sto lavorando". */
@media (prefers-reduced-motion: reduce) {
    .acce-caricamento::after { animation-duration: 2.4s; }
}

/* Per chi legge con uno screen reader la rotella non esiste: e' un bordo che
   gira. Questa riga e' quello che sente al posto suo. */
.acce-caricamento .voce {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}