/* /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,#1c1218,#241a20);
}

.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: #16a34a; }
.ti-elettronico[b-x9bqy4ms07] { background: #2563eb; }
.ti-altro[b-x9bqy4ms07]       { background: #9333ea; }
/* I buoni stanno dopo una riga: si vedono ma non fanno parte della somma */
.ti-buoni[b-x9bqy4ms07] { display: inline-flex; align-items: center; gap: 1rem; padding-left: 1rem; border-left: 1px solid #e5e7eb; }

/* 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; }

.brand-icon[b-vyfjhg38fl] {
    width: 34px; height: 34px;
    background: white;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.05rem;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 2px 10px rgba(var(--hb-primary-rgb),.5);
    overflow: hidden;
}
.brand-icon img[b-vyfjhg38fl] {
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.brand-text[b-vyfjhg38fl] {
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    line-height: 1;
    color: white;
}
.brand-text span[b-vyfjhg38fl] { color: #f472b6; }

/* ─── 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(var(--hb-primary-rgb),.12);
    color: #f9a8d4;
    border-left-color: var(--hb-primary);
    padding-left: calc(.75rem - 0px);
}
.nav-item[b-vyfjhg38fl]  a.active .nav-icon { opacity: 1; color: #f472b6; }

.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; }

    .nav-scrollable[b-vyfjhg38fl] {
        display: block;
        height: calc(100vh - 4.25rem);
        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;
}

/* Logo compatto (gli stili di NavMenu sono scoped e non arrivano qui) */
.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;
    color: var(--hb-primary);
}

.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 #0087ff;
        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;
}
/* /Components/Pages/Prenota/SchedaSalone.razor.rz.scp.css */
.salone[b-pabtnevaf2] {
    margin-top: 2rem;
    border: 1px solid var(--hb-line);
    border-radius: var(--hb-radius);
    box-shadow: var(--hb-shadow);
    text-align: center;
}

/* Marchio: l'icona del salone accanto al nome, come nel logo di Glide */
.salone-marchio[b-pabtnevaf2] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    margin-bottom: 1.1rem;
    text-align: left;
}

.salone-marchio img[b-pabtnevaf2] {
    border-radius: 50%;
    flex-shrink: 0;
}

.salone-nome[b-pabtnevaf2] {
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: .06em;
    line-height: 1;
    color: var(--hb-ink);
}

.salone-nome span[b-pabtnevaf2] {
    color: var(--hb-primary);
}

.salone-motto[b-pabtnevaf2] {
    margin-top: .3rem;
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hb-ink-soft);
}

/* Indirizzo e orario: allineati a sinistra dentro una colonna stretta e centrata,
   cosi' le icone stanno in fila anche quando l'indirizzo va a capo */
.salone-info[b-pabtnevaf2] {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    max-width: 26rem;
    margin: 0 auto 1rem;
    text-align: left;
    font-size: .9rem;
    color: var(--hb-ink-soft);
}

.salone-info li[b-pabtnevaf2] {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
}

.salone-info i[b-pabtnevaf2] {
    flex-shrink: 0;
    margin-top: .1rem;
    font-size: 1.05rem;
    color: var(--hb-primary);
}

/* Nel colore dei link del portale: da telefono non c'e' hover che lo riveli, e
   nello stesso grigio dell'orario l'indirizzo sembrerebbe testo da leggere */
.salone-info a[b-pabtnevaf2] {
    color: var(--hb-primary);
    text-underline-offset: 3px;
}

.salone-info a:hover[b-pabtnevaf2] {
    color: var(--hb-primary-dark);
}

/* Stelle e invito: un unico link, con un'area da toccare comoda col pollice */
.salone-recensione[b-pabtnevaf2] {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    padding: .6rem 1.4rem;
    border-radius: var(--hb-radius);
    text-decoration: none;
    transition: background-color .15s;
}

.salone-recensione:hover[b-pabtnevaf2],
.salone-recensione:focus-visible[b-pabtnevaf2] {
    background: var(--hb-primary-light);
}

.salone-stelle[b-pabtnevaf2] {
    display: flex;
    gap: .2rem;
    font-size: 1.6rem;
    color: var(--hb-warning);
}

.salone-cta[b-pabtnevaf2] {
    font-weight: 600;
    color: var(--hb-primary);
}