/* =========================================================================
   B-Booking - stile del modulo di prenotazione
   Palette derivata dal colore storico del prodotto (#55A79A).
   ========================================================================= */

:root {
    --bb-primary: #55A79A;
    --bb-primary-dark: #33635c;
    --bb-primary-soft: #e6f3f1;
    --bb-accent: #00ADBB;
    --bb-bg: #f4f7f6;
    --bb-text: #21322f;
    --bb-muted: #6c757d;
    --bb-danger: #BE3E1D;
    --bb-radius: .75rem;
    --bb-shadow: 0 .125rem .5rem rgba(33, 50, 47, .08);
}

html {
    font-size: 15px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.bb-body {
    background-color: var(--bb-bg);
    color: var(--bb-text);
}

.bb-main {
    max-width: 920px;
}

.bb-brand-text {
    color: var(--bb-primary-dark);
}

/* --- Bottoni ------------------------------------------------------------ */
/* NB: regole esplicite, non variabili --bs-btn-*: il Bootstrap locale e' 5.1.3
   e le variabili CSS dei bottoni esistono solo dalla 5.2 (senza queste regole
   i pulsanti apparivano come testo semplice). */

.btn-bb {
    background-color: var(--bb-primary);
    border-color: var(--bb-primary);
    color: #fff;
    font-weight: 600;
}

.btn-bb:hover,
.btn-bb:focus {
    background-color: var(--bb-primary-dark);
    border-color: var(--bb-primary-dark);
    color: #fff;
}

.btn-bb:focus,
.btn-bb:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(85, 167, 154, .35);
}

.btn-bb:active,
.btn-bb.active {
    background-color: var(--bb-primary-dark) !important;
    border-color: var(--bb-primary-dark) !important;
    color: #fff !important;
}

.btn-bb:disabled,
.btn-bb.disabled {
    background-color: #a9cdc7;
    border-color: #a9cdc7;
    color: #fff;
    opacity: 1;
}

.btn-bb-outline {
    background-color: transparent;
    border-color: var(--bb-primary);
    color: var(--bb-primary-dark);
    font-weight: 600;
}

.btn-bb-outline:hover,
.btn-bb-outline:focus {
    background-color: var(--bb-primary-soft);
    border-color: var(--bb-primary);
    color: var(--bb-primary-dark);
}

.btn-bb-outline:focus,
.btn-bb-outline:focus-visible {
    box-shadow: 0 0 0 .25rem rgba(85, 167, 154, .25);
}

/* --- Card --------------------------------------------------------------- */

.bb-card {
    border: 0;
    border-radius: var(--bb-radius);
    box-shadow: var(--bb-shadow);
    background: #fff;
}

.bb-card .card-header {
    background: transparent;
    border-bottom: 1px solid #eef2f1;
    font-weight: 600;
}

/* --- Stepper ------------------------------------------------------------ */

.bb-steps {
    display: flex;
    gap: .25rem;
    margin-bottom: 1.25rem;
    padding: 0;
    list-style: none;
    flex-wrap: wrap;
}

.bb-steps li {
    display: flex;
    align-items: center;
    gap: .45rem;
    padding: .35rem .8rem;
    border-radius: 2rem;
    font-size: .85rem;
    color: var(--bb-muted);
    background: #e9efee;
}

.bb-steps li .bb-step-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: #cfdedb;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
}

.bb-steps li.active {
    background: var(--bb-primary-soft);
    color: var(--bb-primary-dark);
    font-weight: 600;
}

.bb-steps li.active .bb-step-n {
    background: var(--bb-primary);
}

.bb-steps li.done {
    color: var(--bb-primary-dark);
}

.bb-steps li.done .bb-step-n {
    background: var(--bb-primary-dark);
}

/* --- Slot orari ---------------------------------------------------------- */

.bb-days {
    display: flex;
    gap: .75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: .5rem;
    scrollbar-width: thin;
}

.bb-day {
    min-width: 9.5rem;
    scroll-snap-align: start;
    background: #fbfdfc;
    border: 1px solid #eef2f1;
    border-radius: .6rem;
    padding: .6rem;
}

.bb-day h6 {
    color: var(--bb-primary-dark);
    text-transform: capitalize;
    margin-bottom: 0;
}

.bb-day .bb-day-date {
    font-size: .8rem;
    color: var(--bb-muted);
    margin-bottom: .55rem;
}

.bb-slot {
    display: block;
    width: 100%;
    margin-bottom: .4rem;
    padding: .3rem .5rem;
    border: 1px solid var(--bb-primary);
    border-radius: .45rem;
    background: #fff;
    color: var(--bb-primary-dark);
    font-size: .9rem;
    font-weight: 600;
    text-align: center;
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.bb-slot:hover {
    background: var(--bb-primary-soft);
}

.bb-slot.selected {
    background: var(--bb-primary);
    color: #fff;
}

/* Mobile: al massimo 2 colonne giorno visibili, le altre si raggiungono scorrendo */
@media (max-width: 575.98px) {
    .bb-days {
        gap: .5rem;
    }

    .bb-day {
        min-width: calc(50% - .25rem);
        max-width: calc(50% - .25rem);
    }
}

/* --- Combobox prestazioni (ricerca + selezione multipla) ------------------ */

.bb-combo {
    position: relative;
}

/* La select nativa resta visibile solo senza JavaScript (fallback) */
.bb-combo-js .bb-combo-native {
    display: none;
}

.bb-combo-control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    cursor: text;
    min-height: calc(1.5em + 1rem + 2px);
}

.bb-combo-control:focus-within {
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 .25rem rgba(85, 167, 154, .25);
}

.bb-combo-input {
    flex: 1 1 8rem;
    min-width: 8rem;
    border: 0;
    outline: none;
    background: transparent;
    font: inherit;
    color: inherit;
    padding: .1rem 0;
}

.bb-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    background: var(--bb-primary-soft);
    color: var(--bb-primary-dark);
    border: 1px solid var(--bb-primary);
    border-radius: 2rem;
    padding: .15rem .3rem .15rem .65rem;
    font-size: .85rem;
    font-weight: 600;
    max-width: 100%;
}

.bb-chip-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 16rem;
}

.bb-chip-x {
    border: 0;
    background: var(--bb-primary);
    color: #fff;
    border-radius: 50%;
    width: 1.15rem;
    height: 1.15rem;
    line-height: 1;
    font-size: .85rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.bb-chip-x:hover {
    background: var(--bb-primary-dark);
}

.bb-combo-panel {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin-top: .25rem;
    background: #fff;
    border: 1px solid #cfdedb;
    border-radius: .5rem;
    box-shadow: 0 .5rem 1rem rgba(33, 50, 47, .15);
    max-height: 340px;
    /* Lo scorrimento e' dell'elenco, non del pannello: la barra di stato
       (quante voci sono selezionate) deve restare ferma in cima. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* display:flex vince sul display:none dell'attributo hidden: va riaffermato. */
.bb-combo-panel[hidden] {
    display: none;
}

.bb-combo-stato {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    flex: 0 0 auto;
    padding: .4rem .6rem .4rem .85rem;
    border-bottom: 1px solid #e3edeb;
    background: #fbfdfc;
    font-size: .8rem;
    color: var(--bb-muted);
}

.bb-combo-stato-azioni {
    display: inline-flex;
    gap: .25rem;
    flex-shrink: 0;
}

.bb-combo-stato-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--bb-primary-dark);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.4;
    padding: .05rem .5rem;
    border-radius: 1rem;
    cursor: pointer;
}

.bb-combo-stato-btn:hover {
    background: var(--bb-primary-soft);
}

.bb-combo-stato-btn.attivo {
    background: var(--bb-primary);
    border-color: var(--bb-primary);
    color: #fff;
}

.bb-combo-list {
    overflow-y: auto;
}

.bb-combo-group {
    padding: .45rem .85rem .2rem;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--bb-muted);
    background: #fbfdfc;
    position: sticky;
    top: 0;
}

.bb-combo-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    /* La barra a sinistra compare solo sulle voci scelte: si tiene il posto
       anche quando e' trasparente, altrimenti il testo ballerebbe. */
    border-left: 3px solid transparent;
    padding: .45rem .85rem .45rem calc(.85rem - 3px);
    cursor: pointer;
}

.bb-combo-item i {
    color: #9fb6b2; /* casella vuota: grigia, cosi' la spunta verde salta all'occhio */
    font-size: 1.1rem;
    flex-shrink: 0;
}

.bb-combo-item:hover {
    background: var(--bb-primary-soft);
}

/* Voce gia' selezionata: sfondo pieno, barra colorata, testo in evidenza e
   spunta nel colore del prodotto. Deve riconoscersi a colpo d'occhio anche
   scorrendo un catalogo lungo. */
.bb-combo-item.selected {
    font-weight: 600;
    color: var(--bb-primary-dark);
    background: var(--bb-primary-soft);
    border-left-color: var(--bb-primary);
}

.bb-combo-item.selected i {
    color: var(--bb-primary);
}

/* Scurisce di un velo qualunque sia il colore della struttura (la palette e'
   configurabile), cosi' il passaggio del mouse si distingue anche sulle scelte. */
.bb-combo-item.selected:hover {
    box-shadow: inset 0 0 0 999px rgba(33, 50, 47, .05);
}

.bb-combo-empty {
    padding: .8rem .85rem;
    color: var(--bb-muted);
}

.bb-combo-loading .bb-combo-control {
    opacity: .6;
    pointer-events: none;
}

/* --- Contenitore risultati scorrevole ------------------------------------- */
/* L'elenco medici/orari scorre al proprio interno invece di allungare la
   pagina: la barra azione resta sempre in vista (anche dentro l'iframe). */

.bb-results {
    max-height: 33rem;
    overflow-y: auto;
    padding-right: .35rem;
    scrollbar-width: thin;
    overscroll-behavior: contain;
}

.bb-results::-webkit-scrollbar {
    width: 8px;
}

.bb-results::-webkit-scrollbar-thumb {
    background: #cfdedb;
    border-radius: 4px;
}

.bb-results::-webkit-scrollbar-thumb:hover {
    background: var(--bb-primary);
}

@media (max-width: 575.98px) {
    .bb-results {
        max-height: 26rem;
    }
}

/* --- Barra azione fissa (selezione slot) --------------------------------- */

.bb-actionbar {
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: #fff;
    border-top: 1px solid #e3ebe9;
    box-shadow: 0 -0.25rem .75rem rgba(33, 50, 47, .06);
    padding: .75rem 1rem;
    border-radius: .6rem .6rem 0 0;
}

/* --- Esiti ---------------------------------------------------------------- */

.bb-result-icon {
    font-size: 3.5rem;
    line-height: 1;
}

.bb-result-icon.ok {
    color: var(--bb-primary);
}

.bb-result-icon.ko {
    color: var(--bb-danger);
}

/* --- Varie ---------------------------------------------------------------- */

.bb-uo-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--bb-primary-dark);
    font-weight: 600;
}

.bb-scroll-btn {
    border: none;
    background: transparent;
    color: var(--bb-primary-dark);
    font-size: 1.4rem;
    padding: 0 .25rem;
}

.bb-scroll-btn:hover {
    color: var(--bb-primary);
}

a {
    color: var(--bb-primary-dark);
}

a:hover {
    color: var(--bb-primary);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--bb-primary);
    box-shadow: 0 0 0 .25rem rgba(85, 167, 154, .25);
}

#paypal-button-container {
    max-width: 420px;
    margin: 0 auto;
}

/* --- Prenotazione: badge tipo, allegato, scadenza -------------------------- */

.bb-badge-ssn {
    background-color: var(--bb-accent);
    color: #fff;
}

.bb-badge-privato {
    background-color: var(--bb-primary);
    color: #fff;
}

.bb-allegato {
    background: #fbfdfc;
    border-color: #e3ebe9 !important;
}

/* Prescrizione facoltativa: riquadro tratteggiato, come un invito e non come un obbligo. */
.bb-allegato.facoltativo {
    border-style: dashed !important;
    border-color: #c9d9d6 !important;
}

.bb-allegato-icona {
    color: var(--bb-primary);
}

.bb-allegato label.disabled {
    pointer-events: none;
    opacity: .65;
}

.bb-scadenza {
    background: #fff8e6;
    border: 1px solid #f0dfae;
    color: #7a5d00;
}

/* --- Esame scelto sul sito (?id_servizio=...) ------------------------------ */

.bb-eyebrow {
    font-size: .78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: var(--bb-primary-dark);
}

.bb-esame {
    background: var(--bb-primary-soft);
    border: 1px solid #d7e9e6;
    border-radius: var(--bb-radius);
    padding: 1.25rem;
}

.bb-esame-mdc {
    font-size: .9rem;
    font-weight: 600;
    color: var(--bb-primary-dark);
}

.bb-esame-dati {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 1rem;
}

.bb-esame-dati dt {
    font-size: .8rem;
    font-weight: 500;
    color: var(--bb-muted);
}

.bb-esame-dati dd {
    margin: 0;
    font-weight: 600;
}

.bb-esame-prezzo {
    font-size: 1.25rem;
}

.bb-esame-note {
    background: #fbfdfc;
    border: 1px solid #e3ebe9;
    border-radius: .6rem;
    padding: 1rem 1.25rem;
}

.bb-pre {
    white-space: pre-line;
}

/* --- Contatti della struttura (sql/20) --------------------------------------- */

.bb-link-azione {
    color: var(--bb-primary-dark);
    text-decoration: none;
    font-weight: 500;
}

.bb-link-azione:hover {
    text-decoration: underline;
}

.bb-link-secondario {
    color: var(--bb-muted);
}

.bb-nontrovo {
    padding: 1rem 1.25rem;
    border: 1px dashed #c9d9d6;
    border-radius: .75rem;
}

/* --- Esito ---------------------------------------------------------------- */

/* Parti della pagina che esistono solo dentro l'iframe del sito ("Chiudi") o solo fuori
   (il ritorno automatico alla ricerca). html.bb-embedded lo imposta site.js. */
html:not(.bb-embedded) .bb-solo-incorporato {
    display: none !important;
}

html.bb-embedded .bb-solo-pagina {
    display: none !important;
}

.bb-esito-icona {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 50%;
    font-size: 2.1rem;
}

.bb-esito-icona.ok {
    background: var(--bb-primary);
    color: #fff;
}

.bb-esito-icona.attesa {
    background: #fdf1d6;
    color: #8a5a00;
}

.bb-esito-icona.ko {
    background: var(--bb-danger);
    color: #fff;
}

.bb-esito-appuntamento {
    padding: 1rem 1.25rem .25rem;
    border: 1px solid #d7e9e6;
    border-radius: .75rem;
    background: var(--bb-primary-soft);
}

.bb-esito-appuntamento.attesa {
    border-color: #f0dfae;
    background: #fffaf0;
}

.bb-esito-badge {
    display: inline-block;
    margin-bottom: .75rem;
    padding: .2rem .65rem;
    border-radius: 2rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.bb-esito-badge.ok {
    background: var(--bb-primary);
    color: #fff;
}

.bb-esito-badge.attesa {
    background: #fdf1d6;
    color: #8a5a00;
    border: 1px solid #f0dfae;
}

.bb-esito-azioni {
    margin-top: .75rem;
}

/* --- Orario riservato (conto alla rovescia su dati e riepilogo) ------------- */

.bb-riserva {
    padding: .6rem 1rem;
    border: 1px solid #d7e9e6;
    border-radius: .6rem;
    background: var(--bb-primary-soft);
    color: var(--bb-primary-dark);
    font-size: .92rem;
}

.bb-riserva.scaduta {
    border-color: #f0dfae;
    background: #fff8e6;
    color: #7a5d00;
}

.bb-riserva-nota {
    color: var(--bb-primary-dark);
}

/* --- Riepilogo prima dell'invio -------------------------------------------- */

.bb-riep-box {
    padding: 1rem 1.25rem;
    border: 1px solid #e3ebe9;
    border-radius: .75rem;
    background: #fff;
}

.bb-riep-data {
    font-size: 1.2rem;
    font-weight: 700;
}

.bb-riep-righe > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .45rem 0;
    border-bottom: 1px solid #eef2f1;
}

.bb-riep-righe > div:last-child {
    border-bottom: 0;
}

.bb-riep-righe dt {
    font-weight: 400;
    color: var(--bb-muted);
    flex-shrink: 0;
}

.bb-riep-righe dd {
    margin: 0;
    font-weight: 500;
    text-align: right;
}

.bb-riep-totale {
    background: var(--bb-primary-soft);
}

.bb-riep-importo {
    font-size: 1.6rem;
    font-weight: 700;
}

/* --- Consensi del form dei dati ---------------------------------------------- */

.bb-consensi {
    padding: 1rem 1.25rem;
    border: 1px solid #e3ebe9;
    border-radius: .75rem;
    background: #fbfdfc;
}

.bb-consensi .form-check-label {
    font-size: .9rem;
}

/* --- Riquadro SSN del form dei dati (impegnativa ed esenzione) ------------- */

.bb-ssn {
    padding: 1rem 1.25rem;
    border: 1px dashed var(--bb-primary);
    border-radius: .75rem;
    background: var(--bb-primary-soft);
}

.bb-ssn legend {
    float: none;
    width: auto;
    font-size: .78rem;
}

/* --- Scelte a scheda ("Come vuoi prenotare?") ------------------------------ */

.bb-scelta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .75rem;
    padding: 1rem;
    border: 1px solid #d7e2e0;
    border-radius: .75rem;
    background: #fff;
    cursor: pointer;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

.bb-scelta:hover {
    border-color: var(--bb-primary);
}

.bb-scelta.attiva {
    border-color: var(--bb-primary);
    background: var(--bb-primary-soft);
}

.bb-scelta-gruppo {
    cursor: default;
}

.bb-scelta-testo {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
}

.bb-scelta-titolo {
    font-weight: 600;
}

.bb-scelta-etichetta {
    margin-left: .5rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--bb-primary-dark);
}

.bb-scelta-desc {
    font-size: .85rem;
    color: var(--bb-muted);
}

.bb-scelta > .form-check-input {
    flex-shrink: 0;
    margin-top: .2rem;
    width: 1.25rem;
    height: 1.25rem;
}

.bb-scelta-voci {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    margin-top: .6rem;
}

.bb-scelta-voce {
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
}

.bb-scelta-voce .form-check-input {
    margin: 0;
    flex-shrink: 0;
}

/* --- Modalita' incorporata (iframe) --------------------------------------- */
/* Con l'auto-resize l'altezza dell'iframe segue il contenuto. Le altezze legate
   alla viewport (h-100 su html, min-vh-100 sul body) vanno sganciate, altrimenti
   l'altezza misurata insegue quella dell'iframe in un loop senza fine. */
html.bb-embedded {
    height: auto !important;
}

html.bb-embedded body.min-vh-100 {
    min-height: 0 !important;
}