/* /Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-x9bqy4ms07] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-x9bqy4ms07] { flex: 1; min-width: 0; }

/* Respiro in fondo al contenuto: evita che le pagine (calendario, tabelle…)
   finiscano attaccate al bordo inferiore. */
.content[b-x9bqy4ms07] { padding-bottom: 2.5rem; }

.sidebar[b-x9bqy4ms07] {
    background: linear-gradient(180deg,#0b0b0b,#1a1a1a);
}

.top-row[b-x9bqy4ms07] {
    background-color: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    justify-content: space-between;
    height: 3.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    /* Nota: lo z-index efficace è impostato sulla regola sticky nella media query
       sotto (qui, senza position, verrebbe ignorato). */
}

/* ─── Incasso odierno (destra) ─────────────────────────────────────── */
.top-incasso[b-x9bqy4ms07] {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    font-size: .8rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
}
.top-incasso strong[b-x9bqy4ms07] { color: var(--hb-ink); font-weight: 600; }
.ti-tot[b-x9bqy4ms07] { color: #374151; }
.ti-tot strong[b-x9bqy4ms07] { color: var(--hb-primary); }
.ti-breakdown[b-x9bqy4ms07] { display: flex; align-items: center; gap: 1rem; }
.ti-item[b-x9bqy4ms07] { display: inline-flex; align-items: center; gap: .35rem; }
.ti-dot[b-x9bqy4ms07] { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ti-contanti[b-x9bqy4ms07]    { background: #141414; }
.ti-elettronico[b-x9bqy4ms07] { background: #7a7a7a; }
.ti-altro[b-x9bqy4ms07]       { background: #c9c9c9; box-shadow: inset 0 0 0 1px #9a9a9a; }

/* Su schermi stretti mostra solo il totale, nasconde la ripartizione */
@media (max-width: 899.98px) {
    .ti-breakdown[b-x9bqy4ms07] { display: none; }
}

.top-date[b-x9bqy4ms07] {
    color: #9ca3af;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .01em;
    text-transform: capitalize;
}

.top-row[b-x9bqy4ms07]  a, .top-row[b-x9bqy4ms07]  .btn-link {
    white-space: nowrap;
    margin-left: 1.5rem;
    text-decoration: none;
    color: #6b7280;
    font-size: .875rem;
}
.top-row[b-x9bqy4ms07]  a:hover, .top-row[b-x9bqy4ms07]  .btn-link:hover {
    color: var(--hb-primary);
    text-decoration: none;
}

@media (max-width: 640.98px) {
    .top-row[b-x9bqy4ms07]  a, .top-row[b-x9bqy4ms07]  .btn-link { margin-left: 0; }
}

@media (min-width: 641px) {
    .page[b-x9bqy4ms07] { flex-direction: row; }

    .sidebar[b-x9bqy4ms07] {
        width: 240px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-x9bqy4ms07] {
        position: sticky;
        top: 0;
        /* Sopra il contenuto della pagina (header calendario z-index:10, blocchi
           appuntamento) ma sotto dropdown (100) e overlay modali (199). */
        z-index: 50;
    }

    .top-row[b-x9bqy4ms07], article[b-x9bqy4ms07] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-x9bqy4ms07] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0,0,0,.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss[b-x9bqy4ms07] {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* ─── Brand header ────────────────────────────────────────────────── */
.sidebar-top[b-vyfjhg38fl] {
    position: relative;
}

.sidebar-brand[b-vyfjhg38fl] {
    display: flex;
    align-items: center;
    gap: .8rem;
    padding: 1.2rem 1.25rem;
    text-decoration: none;
    color: white;
    border-bottom: 1px solid rgba(255,255,255,.07);
    transition: background .15s;
    min-height: 4.25rem;
}
.sidebar-brand:hover[b-vyfjhg38fl] { background: rgba(255,255,255,.04); color: white; }

/* Logo intero (bianco su trasparente) al posto di icona + scritta.
   Su mobile la barra e' in alto con il toggler a destra: logo basso e allineato a sinistra.
   Su desktop (media query in fondo) centrato e grande: e' un lettering a pennello, sotto
   i 150 px di larghezza i tratti diventano di un pixel e HAIRSTYLIST sparisce. */
.brand-logo[b-vyfjhg38fl] {
    display: block;
    height: 44px;
    width: auto;
    object-fit: contain;
}

/* ─── Toggler (mobile) ────────────────────────────────────────────── */
.navbar-toggler[b-vyfjhg38fl] {
    appearance: none;
    cursor: pointer;
    width: 3.25rem;
    height: 2.4rem;
    position: absolute;
    top: .95rem;
    right: 1rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 7px;
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.65%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.4rem rgba(255,255,255,.06);
    transition: background-color .15s;
}
.navbar-toggler:checked[b-vyfjhg38fl] { background-color: rgba(255,255,255,.12); }

/* ─── Nav items ───────────────────────────────────────────────────── */
.nav-scrollable[b-vyfjhg38fl] { padding: .5rem 0 1rem; }

.nav-item[b-vyfjhg38fl] { padding: .1rem .75rem; }
.nav-item:first-of-type[b-vyfjhg38fl] { padding-top: .75rem; }
.nav-item:last-of-type[b-vyfjhg38fl]  { padding-bottom: .75rem; }

.nav-item[b-vyfjhg38fl]  .nav-link {
    color: #9ca3af;
    background: none;
    border: none;
    border-radius: .5rem;
    height: 2.6rem;
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 0 .75rem;
    font-size: .875rem;
    font-weight: 500;
    transition: background .15s, color .15s;
    width: 100%;
    white-space: nowrap;
    border-left: 3px solid transparent;
}

.nav-item[b-vyfjhg38fl]  .nav-link .nav-icon {
    font-size: 1rem;
    width: 1.1rem;
    text-align: center;
    flex-shrink: 0;
    opacity: .55;
    transition: opacity .15s;
}

.nav-item[b-vyfjhg38fl]  a.active {
    background-color: rgba(255,255,255,.10);
    color: #ffffff;
    border-left-color: #ffffff;
    padding-left: calc(.75rem - 0px);
}
.nav-item[b-vyfjhg38fl]  a.active .nav-icon { opacity: 1; color: #ffffff; }

.nav-item[b-vyfjhg38fl]  .nav-link:hover {
    background-color: rgba(255,255,255,.06);
    color: #e5e7eb;
}
.nav-item[b-vyfjhg38fl]  .nav-link:hover .nav-icon { opacity: .9; }

/* ─── Responsive ──────────────────────────────────────────────────── */
.nav-scrollable[b-vyfjhg38fl] { display: none; }
.navbar-toggler:checked ~ .nav-scrollable[b-vyfjhg38fl] { display: block; }

@media (min-width: 641px) {
    .navbar-toggler[b-vyfjhg38fl] { display: none; }

    /* Testata e menu si dividono l'altezza dello schermo: se cambia una, cambia l'altra,
       altrimenti le ultime voci (Esci) finiscono sotto il bordo. */
    .sidebar-brand[b-vyfjhg38fl] {
        justify-content: center;
        height: 8rem;
        padding: 0 1rem;
    }
    .brand-logo[b-vyfjhg38fl] {
        height: auto;
        width: 168px;
    }

    .nav-scrollable[b-vyfjhg38fl] {
        display: block;
        height: calc(100vh - 8rem);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .nav-scrollable[b-vyfjhg38fl]::-webkit-scrollbar { width: 3px; }
    .nav-scrollable[b-vyfjhg38fl]::-webkit-scrollbar-track { background: transparent; }
    .nav-scrollable[b-vyfjhg38fl]::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.1);
        border-radius: 3px;
    }
}
/* /Components/Layout/PrenotaLayout.razor.rz.scp.css */
.prenota-shell[b-3dmy1uoofw] {
    /* Altezza della barra di navigazione in fondo: 0 dove la barra non c'e'.
       E' il contratto con cui le pagine ancorano i loro elementi sticky sopra
       la barra (vedi .prenota-carrello) senza ripetere il breakpoint. */
    --tabbar-h: 0px;

    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: #f6f7f9;
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}

.prenota-header[b-3dmy1uoofw] {
    background: #fff;
    border-bottom: 1px solid #e6e8eb;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.prenota-header-inner[b-3dmy1uoofw] {
    max-width: 860px;
    margin: 0 auto;
    padding: .9rem 1rem;
    display: flex;
    align-items: center;
    gap: .6rem;
}

.prenota-brand[b-3dmy1uoofw] {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .5px;
    color: var(--hb-primary);
    text-decoration: none;
}

/* Marchio dell'intestazione (gli stili di NavMenu sono scoped e non arrivano qui).
   Le classi devono essere quelle del markup: .brand-icon e .brand-text. Con la
   regola scritta su una classe inesistente il favicon da 128 px usciva a grandezza
   naturale e l'intestazione del portale diventava alta come mezzo schermo. */
.prenota-brand .brand-icon[b-3dmy1uoofw] {
    width: 40px; height: 40px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
}
.prenota-brand .brand-icon img[b-3dmy1uoofw] {
    width: 100%; height: 100%;
    object-fit: contain;
}
.prenota-brand .brand-text[b-3dmy1uoofw] {
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .5px;
}

.prenota-sub[b-3dmy1uoofw] {
    color: var(--hb-ink-faint);
    font-size: .9rem;
}

.prenota-nav-desktop[b-3dmy1uoofw] {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Le voci sono <NavLink>, cioe' componenti: l'<a> che rendono NON riceve
   l'attributo di scope del CSS isolato, e una regola scritta come ".prenota-link"
   compilerebbe in ".prenota-link[b-xxxxx]" senza mai corrispondere a niente.
   Il selettore parte dal contenitore, che l'attributo ce l'ha, e scende con ::deep.
   Vale per tutte le regole qui sotto che toccano le voci di navigazione. */
.prenota-nav-desktop[b-3dmy1uoofw]  .prenota-link {
    position: relative;
    color: var(--hb-primary);
    text-decoration: none;
    font-size: .9rem;
    font-weight: 600;
    padding: .15rem 0;
    border-radius: .25rem;
    transition: color .18s ease;
}

.prenota-nav-desktop[b-3dmy1uoofw]  .prenota-link:hover { color: var(--hb-primary-dark); }

/* Sottolineatura che cresce da sinistra invece di comparire di colpo. Su un
   pseudo-elemento e non su text-decoration, che non si puo' animare. */
.prenota-nav-desktop[b-3dmy1uoofw]  .prenota-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -2px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.prenota-nav-desktop[b-3dmy1uoofw]  .prenota-link:hover::after,
.prenota-nav-desktop[b-3dmy1uoofw]  .prenota-link.active::after { transform: scaleX(1); }

.prenota-nav-desktop[b-3dmy1uoofw]  .prenota-link-btn {
    background: none;
    border: 0;
    padding: .15rem 0;
    cursor: pointer;
    font: inherit;
}

/* Card intere cliccabili nelle pagine del portale (le prenotazioni in lista): qui solo
   l'hover. ::deep perche' le card le disegnano le pagine, non il layout. */
.prenota-main[b-3dmy1uoofw]  .portale-link {
    transition: border-color .12s, box-shadow .12s;
}

.prenota-main[b-3dmy1uoofw]  .portale-link:hover {
    border-color: var(--hb-primary);
    box-shadow: 0 2px 10px rgba(var(--hb-primary-rgb), .10);
}

.prenota-main[b-3dmy1uoofw] {
    flex: 1 1 auto;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2.5rem;
}

/* ── Barra di navigazione da telefono ──────────────────────────────────────
   Nascosta da PC: li' le stesse voci stanno nell'header. */
.prenota-nav-mobile[b-3dmy1uoofw] { display: none; }

.prenota-footer[b-3dmy1uoofw] {
    text-align: center;
    /* Era #9aa1ab: 2,6:1 su bianco, sotto il minimo leggibile, e grigio freddo
       in una palette calda. --hb-ink-faint sta a 3,9:1, sufficiente qui perche'
       e' una firma, non testo da leggere. */
    color: var(--hb-ink-faint);
    padding: 1rem;
    border-top: 1px solid #e6e8eb;
    background: #fff;
}

@media (max-width: 768px) {
    .prenota-nav-desktop[b-3dmy1uoofw] { display: none; }

    /* Lo spazio che la barra occupa. Sullo shell e non su main e footer: cosi' e'
       un numero solo, e il fondo dell'ultima card non finisce mai sotto la barra.
       L'altezza sta sullo shell e non sulla barra: le variabili CSS scendono ai
       discendenti, e la barra e' dentro lo shell, non sopra. */
    .prenota-shell[b-3dmy1uoofw] { --tabbar-h: 60px; }

    .prenota-nav-mobile[b-3dmy1uoofw] {
        position: fixed;
        left: 0; right: 0; bottom: 0;
        /* Scala semantica dei token, non il 1030 di Bootstrap. La barra e' una
           superficie agganciata al bordo: sta con gli sticky, sotto i modali. */
        z-index: var(--z-sticky);
        display: flex;
        gap: .25rem;
        /* env() vale 0 finche' la pagina non dichiara viewport-fit=cover, e oggi
           non lo fa: iOS tiene lui la pagina sopra la barra di sistema. Resta
           scritto perche' il giorno che si passa a cover la barra e' gia' pronta,
           e nel frattempo non aggiunge niente. */
        padding: .3rem .5rem calc(.3rem + env(safe-area-inset-bottom, 0px));
        background: rgba(255, 255, 255, .88);
        border-top: 1px solid var(--hb-line);
        box-shadow: 0 -2px 18px rgba(0, 0, 0, .06);
    }

    /* Il contenuto che scorre sotto la barra si vela invece di sparire di netto.
       Non e' vetro per decorazione: la barra sta sopra una lista che scorre, e la
       velatura e' il segnale che sotto continua. Dove il browser non sa farlo,
       resta il fondo pieno qui sopra. */
    @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
        .prenota-nav-mobile[b-3dmy1uoofw] {
            background: rgba(255, 255, 255, .72);
            -webkit-backdrop-filter: blur(14px) saturate(125%);
            backdrop-filter: blur(14px) saturate(125%);
        }
    }

    .prenota-nav-mobile[b-3dmy1uoofw]  .prenota-tab {
        flex: 1 1 0;
        /* Senza, "Prenotazioni" allarga la voce e con lei tutta la barra, che
           esce dallo schermo sui telefoni da 320px. */
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .2rem;
        /* 54px: sotto questa altezza il bersaglio diventa scomodo da centrare col pollice. */
        min-height: 54px;
        padding: .35rem .25rem;
        border-radius: 14px;
        /* --hb-ink-faint sarebbe il grigio di ruolo, ma a 3,9:1 non regge su testo
           di 11px. Qui conta leggere: la gerarchia la fa la pastiglia, non lo sbiadito. */
        color: var(--hb-ink-soft);
        text-decoration: none;
        font-size: .7rem;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        /* Il velo grigio di Android/iOS al tocco: qui lo sostituisce lo schiacciamento. */
        -webkit-tap-highlight-color: transparent;
        transition: color .18s ease, background-color .18s ease, transform .1s ease;
    }

    .prenota-nav-mobile[b-3dmy1uoofw]  .prenota-tab i {
        font-size: 1.4rem;
        line-height: 1;
        transition: transform .18s ease;
    }

    /* Il dito copre la voce che sta premendo: la conferma del tocco si vede solo se
       tutta la voce si schiaccia, non da un cambio di colore sotto il polpastrello.
       Piu' rapido delle transizioni di stato, perche' deve sembrare istantaneo. */
    .prenota-nav-mobile[b-3dmy1uoofw]  .prenota-tab:active { transform: scale(.93); }

    .prenota-nav-mobile[b-3dmy1uoofw]  .prenota-tab.active {
        color: var(--hb-primary);
        background: rgba(var(--hb-primary-rgb), .12);
    }

    .prenota-nav-mobile[b-3dmy1uoofw]  .prenota-tab.active i { transform: translateY(-1px); }

    /* Da tastiera il contorno di sistema sparisce sopra la pastiglia. L'anello e'
       quello del resto del gestionale (vedi .hb-icon-btn), tenuto staccato dal bordo. */
    .prenota-nav-mobile[b-3dmy1uoofw]  .prenota-tab:focus-visible {
        outline: 2px solid var(--hb-primary);
        outline-offset: -3px;
    }

    /* Chi ha chiesto meno animazioni tiene i colori e perde i movimenti. */
    @media (prefers-reduced-motion: reduce) {
        .prenota-nav-mobile[b-3dmy1uoofw]  .prenota-tab,
        .prenota-nav-mobile[b-3dmy1uoofw]  .prenota-tab i { transition: none; }
        .prenota-nav-mobile[b-3dmy1uoofw]  .prenota-tab:active { transform: none; }
        .prenota-nav-mobile[b-3dmy1uoofw]  .prenota-tab.active i { transform: none; }
    }

    /* Sopra la barra il bordo del footer diventa una seconda linea a un passo dalla
       prima: la firma resta, la cornice no. */
    .prenota-footer[b-3dmy1uoofw] { border-top: 0; background: transparent; }
}

/* iPhone SE e simili: quattro voci con "Prenotazioni" dentro 320px ci stanno solo
   scendendo di un gradino. Misurato, non a occhio. */
@media (max-width: 360px) {
    .prenota-nav-mobile[b-3dmy1uoofw] { gap: .125rem; padding-left: .25rem; padding-right: .25rem; }
    .prenota-nav-mobile[b-3dmy1uoofw]  .prenota-tab { font-size: .625rem; }
    .prenota-nav-mobile[b-3dmy1uoofw]  .prenota-tab i { font-size: 1.3rem; }
}

@media (max-width: 520px) {
    .prenota-sub[b-3dmy1uoofw] { display: none; }
    .prenota-brand[b-3dmy1uoofw] { font-size: 1.15rem; }
    .prenota-brand .brand-icon[b-3dmy1uoofw] { width: 34px; height: 34px; }
    .prenota-brand .brand-text[b-3dmy1uoofw] { font-size: 1.1rem; }
    .prenota-header-inner[b-3dmy1uoofw] { padding: .7rem .85rem; }
    .prenota-nav-desktop[b-3dmy1uoofw] { gap: .75rem; }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-plktywubn8],
.components-reconnect-repeated-attempt-visible[b-plktywubn8],
.components-reconnect-failed-visible[b-plktywubn8],
.components-pause-visible[b-plktywubn8],
.components-resume-failed-visible[b-plktywubn8],
.components-rejoining-animation[b-plktywubn8] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-plktywubn8],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-plktywubn8],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-plktywubn8],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-plktywubn8],
#components-reconnect-modal.components-reconnect-retrying[b-plktywubn8],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-plktywubn8],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-plktywubn8],
#components-reconnect-modal.components-reconnect-failed[b-plktywubn8],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-plktywubn8] {
    display: block;
}


#components-reconnect-modal[b-plktywubn8] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-plktywubn8 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-plktywubn8 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-plktywubn8 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-plktywubn8]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-plktywubn8 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-plktywubn8 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-plktywubn8 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-plktywubn8 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-plktywubn8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-plktywubn8] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-plktywubn8] {
    border: 0;
    background-color: var(--hb-primary);
    color: white;
    padding: 4px 24px;
    border-radius: 6px;
    font-weight: 500;
}

    #components-reconnect-modal button:hover[b-plktywubn8] {
        background-color: var(--hb-primary-dark);
    }

    #components-reconnect-modal button:active[b-plktywubn8] {
        background-color: var(--hb-primary);
    }

.components-rejoining-animation[b-plktywubn8] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-plktywubn8] {
        position: absolute;
        border: 3px solid var(--hb-primary);
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-plktywubn8 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-plktywubn8] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-plktywubn8 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}
/* /Components/Pages/Prenota/Index.razor.rz.scp.css */
/* Step indicator */
.prenota-steps[b-8el1edyx5o] {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    counter-reset: step;
    padding: 0;
    margin: 0;
}

.prenota-steps li[b-8el1edyx5o] {
    counter-increment: step;
    color: #b3b9c2;
    font-size: .85rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: .4rem;
}

.prenota-steps li[b-8el1edyx5o]::before {
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #e6e8eb;
    color: #b3b9c2;
    font-size: .8rem;
}

.prenota-steps li.attivo[b-8el1edyx5o] {
    color: var(--hb-primary);
}

.prenota-steps li.attivo[b-8el1edyx5o]::before {
    background: var(--hb-primary);
    color: #fff;
}

/* Filtro categorie (chips) */
.prenota-filtri[b-8el1edyx5o] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-bottom: 1rem;
}

.prenota-chip[b-8el1edyx5o] {
    background: #fff;
    border: 1px solid #cfd4da;
    border-radius: 999px;
    padding: .35rem .9rem;
    font-size: .85rem;
    font-weight: 600;
    color: #38414d;
    cursor: pointer;
    transition: all .12s;
}

.prenota-chip:hover[b-8el1edyx5o] {
    border-color: var(--hb-primary);
    color: var(--hb-primary);
}

.prenota-chip.attivo[b-8el1edyx5o] {
    background: var(--hb-primary);
    border-color: var(--hb-primary);
    color: #fff;
}

/* Service / combo cards */
.prenota-card[b-8el1edyx5o] {
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: .6rem;
    padding: .85rem 1rem;
    transition: border-color .12s, box-shadow .12s;
    cursor: pointer;
}

.prenota-card:hover[b-8el1edyx5o] {
    border-color: var(--hb-primary);
    box-shadow: 0 2px 10px rgba(var(--hb-primary-rgb), .10);
}

.prenota-card.selezionata[b-8el1edyx5o] {
    border-color: var(--hb-primary);
    background: rgba(var(--hb-primary-rgb), .05);
    box-shadow: 0 0 0 1px var(--hb-primary) inset;
}

.prenota-check[b-8el1edyx5o] {
    color: var(--hb-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Barra riepilogo carrello, fissa in basso.
   Si ancora sopra la barra di navigazione del layout, non al bordo dello schermo:
   con bottom:0 il pulsante "Continua" finiva dietro la barra proprio mentre il
   carrello si riempiva. --tabbar-h vale 0 dove la barra non c'e'. */
.prenota-carrello[b-8el1edyx5o] {
    position: sticky;
    bottom: calc(var(--tabbar-h, 0px) + env(safe-area-inset-bottom, 0px));
    margin-top: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: #fff;
    border: 1px solid #e6e8eb;
    border-radius: .7rem;
    padding: .7rem 1rem;
    box-shadow: 0 -2px 14px rgba(0, 0, 0, .08);
}

.prenota-carrello-info[b-8el1edyx5o] {
    font-size: .95rem;
    color: #38414d;
}

.prenota-card-meta[b-8el1edyx5o] {
    display: flex;
    justify-content: space-between;
    color: #8a929c;
    font-size: .85rem;
    margin-top: .2rem;
}

.prenota-prezzo[b-8el1edyx5o] {
    color: var(--hb-primary);
    font-weight: 600;
}

/* Day + slot grid */
.prenota-giorni[b-8el1edyx5o] {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.prenota-giorno-testa[b-8el1edyx5o] {
    font-weight: 600;
    margin-bottom: .5rem;
    color: #38414d;
}

.prenota-slot[b-8el1edyx5o] {
    background: #fff;
    border: 1px solid #cfd4da;
    border-radius: .45rem;
    padding: .4rem .7rem;
    font-size: .9rem;
    font-weight: 600;
    color: #38414d;
    cursor: pointer;
    transition: all .12s;
}

.prenota-slot:hover[b-8el1edyx5o] {
    background: var(--hb-primary);
    border-color: var(--hb-primary);
    color: #fff;
}