/* =========================================================================
   CLARA - pagine pubbliche (vetrina della struttura e prenotazione online)
   =========================================================================

   Vale per quello che vede una persona che non e' ancora paziente: pagina
   della struttura, scheda del professionista, recensioni, area del paziente
   raggiunta da un link, e soprattutto il percorso di prenotazione.

   PERCHE' UN FOGLIO SEPARATO DA clara.css
   Le pagine pubbliche non caricano AdminLTE: hanno solo Bootstrap, devono
   restare leggere (le apre chi ha il telefono in mano, spesso in mobilita') e
   devono poter cambiare aspetto senza toccare il gestionale. Tenere insieme i
   due fogli avrebbe voluto dire far scaricare a un visitatore il tema di un
   applicativo che non vedra' mai.

   IL PRINCIPIO
   Qui l'obiettivo e' uno solo: arrivare alla conferma dell'appuntamento. Ogni
   cosa che non serve a quello - ombre, decorazioni, sezioni piene di testo -
   e' un ostacolo. Tipografia grande, comandi larghi abbastanza per il pollice,
   un solo colore che indica "questo si tocca".
   ========================================================================= */

:root {
    --pb-scuro: #0B3B3C;
    --pb: #147C77;
    --pb-chiaro: #1A968E;
    --pb-accento: #E2703A;
    --pb-testo: #16302F;
    --pb-tenue: #63807E;
    --pb-bordo: #E1E9E8;
    --pb-superficie: #FFFFFF;
    --pb-sfondo: #F6F9F8;
    --pb-raggio: 14px;
}

html, body {
    height: auto;
}

body {
    background: var(--pb-superficie);
    color: var(--pb-testo);
    font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 {
    color: var(--pb-scuro);
    font-weight: 600;
    letter-spacing: -.3px;
}

a {
    color: var(--pb);
}

    a:hover, a:focus {
        color: #0F5F5B;
    }

/* ------------------------------------------------------------ testata --- */

/* Resta agganciata in alto: il pulsante per prenotare deve essere a portata
   di pollice anche a meta' pagina, che e' dove di solito si decide. */
.pb-header {
    position: sticky;
    top: 0;
    z-index: 900;
    background: var(--pb-superficie);
    border-bottom: 1px solid var(--pb-bordo);
    padding: 14px 0;
}

    .pb-header h1 {
        margin: 0;
        font-size: 20px;
        line-height: 1.2;
    }

        .pb-header h1 a {
            color: var(--pb-scuro);
            text-decoration: none;
        }

    .pb-header small {
        color: var(--pb-tenue);
        font-size: 13px;
    }

.pb-header-contatti {
    color: var(--pb-tenue);
    font-size: 14px;
}

    .pb-header-contatti a {
        color: var(--pb-tenue);
    }

.pb-marchio {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .pb-marchio img {
        height: 34px;
        width: 34px;
        flex: 0 0 34px;
    }

/* ------------------------------------------------------------ sezioni --- */

.pb-copertina {
    height: 320px;
    background-size: cover;
    background-position: center;
    border-radius: 0 0 var(--pb-raggio) var(--pb-raggio);
}

.pb-sezione {
    padding: 44px 0;
    border-bottom: 1px solid var(--pb-bordo);
}

    .pb-sezione:last-child {
        border-bottom: 0;
    }

    .pb-sezione > h2 {
        font-size: 30px;
        margin-top: 0;
    }

.pb-occhiello {
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pb);
    margin-bottom: 6px;
}

.pb-guida {
    color: var(--pb-tenue);
    font-size: 17px;
    max-width: 640px;
}

.pb-scheda {
    background: var(--pb-superficie);
    border: 1px solid var(--pb-bordo);
    border-radius: var(--pb-raggio);
    padding: 22px;
    margin-bottom: 20px;
    height: 100%;
}

.pb-stelle {
    color: var(--pb-accento);
    letter-spacing: 2px;
}

.pb-recensione {
    border-bottom: 1px solid #F0F4F3;
    padding: 18px 0;
}

    .pb-recensione:last-child {
        border-bottom: 0;
    }

.pb-barra-distribuzione {
    background: #EDF2F1;
    height: 8px;
    border-radius: 6px;
    overflow: hidden;
}

    .pb-barra-distribuzione > div {
        background: var(--pb-accento);
        height: 8px;
    }

/* ------------------------------------------------------------ comandi --- */

.btn {
    border-radius: 10px;
    font-weight: 600;
    border: 1px solid transparent;
    padding: 9px 18px;
    transition: background-color .12s ease-in-out, border-color .12s ease-in-out;
}

    .btn:focus-visible {
        outline: 2px solid var(--pb-chiaro);
        outline-offset: 2px;
    }

.btn-lg {
    padding: 14px 26px;
    font-size: 17px;
    border-radius: 12px;
}

.btn-primary,
.btn-warning {
    background: var(--pb);
    border-color: var(--pb);
    color: #FFFFFF;
}

    .btn-primary:hover, .btn-primary:focus,
    .btn-warning:hover, .btn-warning:focus {
        background: #0F5F5B;
        border-color: #0F5F5B;
        color: #FFFFFF;
    }

/* Il pulsante nella testata e' l'unico elemento in terracotta della pagina:
   e' l'azione per cui la pagina esiste, e non deve avere concorrenti. */
.pb-header .btn-warning {
    background: var(--pb-accento);
    border-color: var(--pb-accento);
}

    .pb-header .btn-warning:hover,
    .pb-header .btn-warning:focus {
        background: #C25A28;
        border-color: #C25A28;
    }

.btn-default {
    background: var(--pb-superficie);
    border-color: #CFDDDB;
    color: #2D4442;
}

    .btn-default:hover, .btn-default:focus {
        background: #F0F5F4;
        border-color: var(--pb-chiaro);
        color: var(--pb-scuro);
    }

.btn-link {
    color: var(--pb-tenue);
    padding-left: 0;
}

/* ------------------------------------------------------------- moduli --- */

.form-control {
    height: 48px;
    border-radius: 10px;
    border: 1px solid #CFDDDB;
    box-shadow: none;
    font-size: 16px;   /* sotto i 16px iOS ingrandisce la pagina al fuoco */
    color: var(--pb-testo);
}

textarea.form-control {
    height: auto;
}

.form-control:focus {
    border-color: var(--pb-chiaro);
    box-shadow: 0 0 0 3px rgba(26, 150, 142, .18);
}

label {
    font-weight: 600;
    color: #2D4442;
}

.help-block {
    color: var(--pb-tenue);
}

.alert {
    border-radius: 10px;
    border: 0;
    border-left: 3px solid transparent;
    padding: 14px 18px;
}

.alert-info { background: #E4F1EF; border-left-color: var(--pb-chiaro); color: #0F5F5B; }
.alert-success { background: #EAF6F0; border-left-color: #3B9E6E; color: #1F5A3E; }
.alert-warning { background: #FCF0E8; border-left-color: var(--pb-accento); color: #8A421C; }
.alert-danger { background: #FAEBEA; border-left-color: #C0433B; color: #7E2C26; }

/* ------------------------------------------------------- prenotazione --- */

.pb-passi {
    list-style: none;
    padding: 0;
    margin: 0 0 30px;
    display: flex;
    gap: 8px;
}

    .pb-passi li {
        flex: 1 1 0;
        font-size: 13px;
        color: var(--pb-tenue);
        padding-top: 10px;
        border-top: 3px solid var(--pb-bordo);
    }

        .pb-passi li.fatto {
            border-top-color: var(--pb-chiaro);
            color: var(--pb-chiaro);
        }

        .pb-passi li.corrente {
            border-top-color: var(--pb);
            color: var(--pb-scuro);
            font-weight: 600;
        }

.passo {
    display: none;
}

    .passo.attivo {
        display: block;
    }

    .passo > h4 {
        font-size: 24px;
        margin: 0 0 20px;
    }

/* Una scelta e' una superficie intera che si tocca, non una riga con un
   piccolo controllo: sul telefono e' la differenza fra centrare e sbagliare. */
.scelta {
    border: 1px solid var(--pb-bordo);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
    cursor: pointer;
    background: var(--pb-superficie);
    transition: border-color .12s, background-color .12s;
}

    .scelta:hover {
        border-color: var(--pb-chiaro);
        background: #F7FBFA;
    }

    .scelta.selezionata {
        border-color: var(--pb);
        background: #EDF6F5;
        box-shadow: inset 3px 0 0 var(--pb);
    }

    .scelta strong {
        font-size: 17px;
        color: var(--pb-scuro);
    }

.scelta-nota {
    color: var(--pb-tenue);
    font-size: 14px;
}

.giorno-slot {
    margin-bottom: 24px;
}

    .giorno-slot h5 {
        text-transform: capitalize;
        font-size: 15px;
        color: var(--pb-tenue);
        border-bottom: 1px solid var(--pb-bordo);
        padding-bottom: 8px;
        margin-bottom: 12px;
    }

.orario {
    display: inline-block;
    min-width: 86px;
    margin: 0 8px 8px 0;
    padding: 10px 12px;
    font-variant-numeric: tabular-nums;
}

.pb-riepilogo {
    background: #EDF6F5;
    border: 1px solid #C9E2DF;
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 22px;
}

/* Campo esca per i bot: fuori dallo schermo, mai compilato da una persona. */
.campo-esca {
    position: absolute;
    left: -5000px;
}

/* ------------------------------------------------------------- chiusa --- */

.pb-footer {
    background: var(--pb-scuro);
    color: #A9C6C4;
    padding: 34px 0;
    font-size: 14px;
    margin-top: 40px;
}

    .pb-footer a {
        color: #ECF0F1;
    }

    .pb-footer strong {
        color: #FFFFFF;
    }

.pb-firma {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: 12px;
    color: #7FA3A1;
}

/* --------------------------------------------------------- responsive --- */

@media (max-width: 767px) {
    body {
        font-size: 15px;
    }

    .pb-sezione {
        padding: 28px 0;
    }

        .pb-sezione > h2 {
            font-size: 24px;
        }

    .pb-copertina {
        height: 180px;
    }

    .pb-passi li {
        font-size: 0;          /* sul telefono restano solo le barre */
        padding-top: 6px;
    }

    .orario {
        min-width: calc(33.33% - 8px);
    }

    .pb-header-contatti {
        margin-top: 10px;
        text-align: left;
    }
}