/* _content/FTS.Online/Components/Layout/MainLayout.razor.rz.scp.css */
/* _hideChrome routes (Account/Login, Profile/Create): .hub-login (kit.css) pins itself to the
   viewport with position:fixed, but that only solves *that* element — it still sits inside this
   ancestor chain (.spa-page > NotAuthorized's <main>), which independently carries its own
   min-height:100vh and stays in normal document flow, so it was still contributing its own sliver
   of scrollable height regardless of what its now-fixed-position child did. Neither page's own
   CSS can reach these ancestors to fix them (CSS isolation's ::deep only crosses into
   descendants), so this has to be fixed here, in the component that actually owns them. */
.spa-page--fullbleed[b-82wmqb2p2v] {
    height: 100vh;
    overflow: hidden;
}

/* Matches kit.css's own .hub-login breakpoint, where it drops position:fixed and goes back to
   normal flow (no hero column to clamp against on mobile) — this must revert in step, or a tall
   mobile form (e.g. Create's longer field list) would get clipped at 100vh instead of scrolling. */
@media (max-width: 48rem) {
    .spa-page--fullbleed[b-82wmqb2p2v] {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }
}

.page[b-82wmqb2p2v] {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 4.75rem; /* 60px nav height + 16px breathing room, was flush against the nav */
    padding-inline: var(--grid-margin, 2rem); /* kit's page-edge inset, was missing — sidebar was touching the browser edge */
    max-width: var(--grid-max-width, 120rem);
    margin-inline: auto;
}

main[b-82wmqb2p2v] {
    flex: 1;
    /* Flex items default to min-width:auto (won't shrink below their content's intrinsic width)
       regardless of flex-basis. Without this, any page with wide content (e.g. a table needing to
       scroll internally) can force the whole layout wider than the viewport instead of letting the
       content's own overflow:auto container absorb it — a real, site-wide latent bug, not specific
       to one page. */
    min-width: 0;
}

@media (max-width: 47.9975rem) { /* 768px — matches spa-top-nav's mobile height breakpoint */
    .page[b-82wmqb2p2v] {
        padding-top: 4.5rem; /* 56px nav height + 16px breathing room, was flush against the nav */
    }
}

/* 900px, not the old 641px — matches .spa-sidebar's own collapse point in kit.css (width:100% +
   horizontal-wrap layout below 900px). Misaligned breakpoints meant the sidebar was still 306px fixed
   width while .page had already switched to a row layout, squeezing main content on tablet widths. */
@media (min-width: 56.25rem) {
    .page[b-82wmqb2p2v] {
        flex-direction: row;
        gap: var(--grid-gutter, 1.625rem); /* kit's column gap, replaces the old ad-hoc article padding */
    }

    .sidebar[b-82wmqb2p2v] {
        flex-shrink: 0;
        align-self: flex-start;
        position: sticky;
        top: 4.75rem; /* 60px nav + spacing, matches the kit's own sidebar offset */
    }
}

#blazor-error-ui[b-82wmqb2p2v] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-82wmqb2p2v] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/FTS.Online/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-xb6pjaxz2o] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 0.0625rem solid rgba(255, 255, 255, 0.1);
    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.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-xb6pjaxz2o] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-xb6pjaxz2o] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-xb6pjaxz2o] {
    font-size: 1.1rem;
}

.bi[b-xb6pjaxz2o] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -0.0625rem;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-xb6pjaxz2o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-xb6pjaxz2o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-xb6pjaxz2o] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-xb6pjaxz2o] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-xb6pjaxz2o] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-xb6pjaxz2o] {
        padding-bottom: 1rem;
    }

    .nav-item[b-xb6pjaxz2o]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 0.25rem;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-xb6pjaxz2o]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-xb6pjaxz2o]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-link-button[b-xb6pjaxz2o] {
    cursor: pointer;
    text-align: left;
}

.nav-submenu-toggle[b-xb6pjaxz2o] {
    margin-left: auto;
    width: 0.75rem;
    height: 0.75rem;
    border-right: 0.125rem solid currentColor;
    border-bottom: 0.125rem solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.nav-link-button.expanded .nav-submenu-toggle[b-xb6pjaxz2o] {
    transform: rotate(-135deg);
}

.nav-submenu[b-xb6pjaxz2o] {
    display: none;
    padding-left: 1.5rem;
    flex-direction: column;
}

.nav-submenu.show[b-xb6pjaxz2o] {
    display: flex;
}

.nav-submenu .nav-link[b-xb6pjaxz2o] {
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 0.85rem;
}

.nav-scrollable[b-xb6pjaxz2o] {
    display: none;
}

.nav-shell[b-xb6pjaxz2o] {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.nav-main[b-xb6pjaxz2o] {
    flex: 1 1 auto;
}

.nav-bottom[b-xb6pjaxz2o] {
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.14);
    padding-top: 0.75rem;
    padding-bottom: 1rem;
    margin-top: 0.5rem;
}

.customer-summary-card[b-xb6pjaxz2o] {
    border: 0.0625rem solid rgba(255, 255, 255, 0.2);
    border-radius: 0.625rem;
    padding: 0.75rem;
    display: flex;
    align-items: flex-start;
}

.customer-summary-content[b-xb6pjaxz2o] {
    min-width: 0;
    width: 100%;
}

.customer-summary-name[b-xb6pjaxz2o] {
    color: #ffffff;
    font-size: 0.95rem;
    line-height: 1.25rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-summary-membership-name[b-xb6pjaxz2o] {
    color: #d1d5db;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.customer-summary-membership-row[b-xb6pjaxz2o] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.membership-status-dot[b-xb6pjaxz2o] {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #9ca3af;
    flex: 0 0 auto;
}

.membership-status-dot.active[b-xb6pjaxz2o] {
    background: #10b981;
}

.membership-status-dot.inactive[b-xb6pjaxz2o] {
    background: #9ca3af;
}

.customer-summary-membership-status[b-xb6pjaxz2o] {
    color: #d1d5db;
    font-size: 0.8125rem;
    line-height: 1.125rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.navbar-toggler:checked ~ .nav-scrollable[b-xb6pjaxz2o] {
    display: block;
}

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

    .nav-scrollable[b-xb6pjaxz2o] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/FTS.Online/Components/Pages/Account/Forgot.razor.rz.scp.css */
/* Shares Account/Login.razor's shell entirely — see kit.css's "Auth split screen" comment.
   Nothing page-specific to scope here. */
/* _content/FTS.Online/Components/Pages/Account/Login.razor.rz.scp.css */
/* All hub-login* styling now lives in kit.css — see the "Auth split screen" comment there.
   Promoted once Profile/Create needed the identical shell. Nothing left to scope here. */
/* _content/FTS.Online/Components/Pages/Account/ResetByToken.razor.rz.scp.css */
.login-container[b-i73ufkqz6x] {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    padding: 2rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.login-card[b-i73ufkqz6x] {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 0.625rem 2.5rem rgba(0, 0, 0, 0.1);
    padding: 2.5rem;
    width: 100%;
    max-width: 28.125rem;
}

.login-header[b-i73ufkqz6x] {
    text-align: center;
    margin-bottom: 2rem;
}

.login-header h2[b-i73ufkqz6x] {
    color: #333;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.login-header p[b-i73ufkqz6x] {
    color: #666;
    font-size: 0.95rem;
}

.back-link-container[b-i73ufkqz6x] {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 0.0625rem solid #e0e0e0;
}

.back-link[b-i73ufkqz6x] {
    color: #667eea;
    text-decoration: none;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.back-link:hover[b-i73ufkqz6x] {
    text-decoration: underline;
    color: #5568d3;
}

/* _content/FTS.Online/Components/Pages/Appointments/AppointmentSummaryDialog.razor.rz.scp.css */
.appointment-summary-dialog[b-1u5kw8z1s5]
{
    max-height: 80vh;
    overflow: auto;
}

.summary-dialog-loading[b-1u5kw8z1s5]
{
    min-height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.summary-dialog-content[b-1u5kw8z1s5]
{
    margin-bottom: 1rem;
}

.summary-dialog-footer[b-1u5kw8z1s5]
{
    padding-top: 1rem;
    border-top: 1px solid var(--rz-base-300);
    display: flex;
    justify-content: flex-end;
}
/* _content/FTS.Online/Components/Pages/Appointments/Index.razor.rz.scp.css */
/* Page-scoped (CSS isolation) — these hub-* styles are unique to this page, ported from the kit's
   actual pages/hub/my-appointments.html markup (not the generic component library, which the kit's
   own pages don't fully use either). Retokenized to kit's :root custom properties throughout. */

.cancel-confirm-text[b-iy78kyh3lz] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    margin: 0;
}

.hub-appts[b-iy78kyh3lz] {
    display: flex;
    gap: 1.625rem;
    align-items: flex-start;
}

.hub-appts__mid[b-iy78kyh3lz] {
    flex: 1 1 74.5rem;
    max-width: 74.5rem;
    min-width: 0;
}

.hub-switch[b-iy78kyh3lz] {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
}

.hub-switch input[b-iy78kyh3lz] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.hub-switch__track[b-iy78kyh3lz] {
    position: relative;
    flex-shrink: 0;
    width: 2.5rem;
    height: 1.375rem;
    background: var(--color-border);
    border-radius: var(--radius-pill, 999px);
    transition: background var(--duration-normal, 0.2s) var(--ease-default, ease);
}

.hub-switch__thumb[b-iy78kyh3lz] {
    position: absolute;
    top: 0.1875rem;
    left: 0.1875rem;
    width: 1rem;
    height: 1rem;
    background: var(--color-surface, #fff);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
    transition: transform var(--duration-normal, 0.2s) var(--ease-default, ease);
}

.hub-switch input:checked ~ .hub-switch__track[b-iy78kyh3lz] {
    background: var(--color-primary);
}

.hub-switch input:checked ~ .hub-switch__track .hub-switch__thumb[b-iy78kyh3lz] {
    transform: translateX(1.125rem);
}

.hub-switch input:focus-visible ~ .hub-switch__track[b-iy78kyh3lz] {
    outline: 0.125rem solid var(--color-focus, var(--color-primary));
    outline-offset: 0.125rem;
}

.hub-switch__label[b-iy78kyh3lz] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
}

.hub-appts__rail[b-iy78kyh3lz] {
    width: var(--sidebar-width);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* 1280px, NOT the sidebar's 900px breakpoint. Matching them looked consistent but was wrong: this
   page's mid+rail sits INSIDE the app's own sidebar+content layout, which only collapses at 900px
   itself. Between 900-1280px both the outer sidebar (306px) and this rail (306px) would try to stay
   side-by-side with the table (min-width 40rem/640px) at the same time — outer_sidebar(306) +
   outer_gap(26) + page_padding(64) + rail(306) + inner_gap(26) + table_min(640) ≈ 1368px required,
   overflowing any viewport under that. Collapsing the rail earlier (1280px) guarantees the table
   always has the ~900px+ of breathing room it actually needs whenever the outer sidebar is also
   in its wide, side-by-side state. */
@media (max-width: 80rem) {
    .hub-appts[b-iy78kyh3lz] {
        flex-direction: column;
    }

    .hub-appts__mid[b-iy78kyh3lz] {
        /* flex-basis is a main-axis property — in row layout that's width (1192px, correct), but
           once .hub-appts switches to flex-direction:column the main axis becomes vertical, so the
           same 74.5rem basis was being read as a height hint instead. Reset it for column mode. */
        flex-basis: auto;
        max-width: 100%;
    }

    .hub-appts__rail[b-iy78kyh3lz] {
        width: 100%;
    }
}


.welcome-heading[b-iy78kyh3lz] {
    margin-bottom: 1rem;
}

/* ── Next-appointment card (rail) — kit's actual inline-styled rail card, converted to classes ── */

.next-appt-card[b-iy78kyh3lz] {
    background: var(--color-bg-cream);
    border-radius: var(--radius-md);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.next-appt-card__top[b-iy78kyh3lz] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.next-appt-card__location[b-iy78kyh3lz] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-primary);
    display: block;
}

.next-appt-card__datetime[b-iy78kyh3lz] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin: 0.125rem 0 0;
}

.next-appt-card__edit[b-iy78kyh3lz] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-primary);
    text-decoration: none;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
}
.next-appt-card__edit:hover[b-iy78kyh3lz] { text-decoration: underline; }

.next-appt-card__title[b-iy78kyh3lz] {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.next-appt-card__expand[b-iy78kyh3lz] {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font: inherit;
    color: inherit;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    text-align: left;
}
.next-appt-card__expand svg[b-iy78kyh3lz] { width: 0.875rem; height: 0.875rem; flex-shrink: 0; transition: transform var(--duration-normal); }
.next-appt-card__expand[aria-expanded="true"] svg[b-iy78kyh3lz] { transform: rotate(180deg); }

.next-appt-card__meta[b-iy78kyh3lz] {
    font-family: var(--font-body);
    font-size: 0.75rem;
    color: var(--color-text-secondary);
    margin: 0.25rem 0 0;
}

.next-appt-card__actions[b-iy78kyh3lz] {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    flex-wrap: nowrap;
}

.next-appt-card__actions .spa-btn[b-iy78kyh3lz] {
    /* Sizing/font/padding come from SpaButton's Size="ExtraSmall" (spa-btn--xs, kit.css). Content-
       sized (not stretched) and centered as a group; min-width:0 + ellipsis still guard against
       overflow if the rail is ever narrower than the three buttons' natural width. */
    flex: 0 0 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

.next-appt-card__actions .spa-btn--gray[b-iy78kyh3lz] {
    border-color: var(--color-border);
}

.next-appt-slider-nav[b-iy78kyh3lz] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: -0.25rem;
}

.next-appt-slider-btn[b-iy78kyh3lz] {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.next-appt-slider-btn:hover:not(:disabled)[b-iy78kyh3lz] { background: var(--color-primary-muted); color: var(--color-primary); }
.next-appt-slider-btn:disabled[b-iy78kyh3lz] { opacity: 0.35; cursor: not-allowed; }

.next-appt-slider-count[b-iy78kyh3lz] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.reschedule-warning[b-iy78kyh3lz] {
    border-color: var(--color-accent-terracotta) !important;
    color: var(--color-accent-terracotta) !important;
}

.reschedule-warning-icon[b-iy78kyh3lz] {
    margin-right: 0.25rem;
    vertical-align: middle;
}

.visit-appt-list[b-iy78kyh3lz] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.visit-appt-item[b-iy78kyh3lz] {
    border-top: 0.0625rem solid var(--color-border);
    padding-top: 0.375rem;
    font-size: 0.75rem;
}

.visit-appt-service[b-iy78kyh3lz] {
    font-weight: 600;
    color: var(--color-text-primary);
}

.visit-appt-details[b-iy78kyh3lz] {
    color: var(--color-text-muted);
}

/* ── Rail mini-calendar — kit's actual rail markup (border card, not the spa-datepicker shadow
   card used in the booking-flow date picker; a different, simpler treatment). The "has-appt" day
   dot is our own addition — the kit's static demo never modeled real appointment data. ── */

.mini-calendar-section[b-iy78kyh3lz] {
    background: var(--color-surface);
    border: 0.0625rem solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1rem;
}

.mini-calendar-header[b-iy78kyh3lz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.mini-calendar-title[b-iy78kyh3lz] {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.mini-calendar-nav-btn[b-iy78kyh3lz] {
    width: 1.5rem;
    height: 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    color: var(--color-text-muted);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mini-calendar-nav-btn:hover[b-iy78kyh3lz] { background: var(--color-primary-muted); color: var(--color-primary); }

.mini-calendar-grid[b-iy78kyh3lz] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.125rem;
    text-align: center;
}

.calendar-dow-label[b-iy78kyh3lz] {
    padding: 0.25rem 0;
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 0.6875rem;
}

.calendar-day-filler[b-iy78kyh3lz] { }

.calendar-day[b-iy78kyh3lz] {
    aspect-ratio: 1;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
    color: var(--color-text-primary);
    font-size: 0.75rem;
    padding: 0.125rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 1.5rem;
    position: relative;
}
.calendar-day:hover:not(.selected)[b-iy78kyh3lz] { background: var(--color-primary-muted); }

.calendar-day.today[b-iy78kyh3lz] {
    background: var(--color-primary);
    color: #fff;
}

.calendar-day.selected[b-iy78kyh3lz] {
    background: var(--color-primary);
    color: #fff;
}

.calendar-day-number[b-iy78kyh3lz] { line-height: 1; }

.calendar-day.has-appt:not(.today):not(.selected) .calendar-day-number[b-iy78kyh3lz]::after {
    content: '';
    position: absolute;
    bottom: 0.0625rem;
    left: 50%;
    transform: translateX(-50%);
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 50%;
    background: var(--color-accent-terracotta);
}

.mini-calendar-legend[b-iy78kyh3lz] {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.75rem;
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.legend-dot[b-iy78kyh3lz] {
    width: 0.375rem;
    height: 0.375rem;
    border-radius: 50%;
    background: var(--color-accent-terracotta);
}

.empty-text[b-iy78kyh3lz] {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    padding: 1rem 0;
}

/* ── Book a treatment banner ── */

.book-treatment-banner[b-iy78kyh3lz] {
    display: block;
    border-radius: 0.75rem;
    overflow: hidden;
    text-decoration: none;
    margin-top: 1rem;
}
.book-treatment-banner img[b-iy78kyh3lz] { width: 100%; height: auto; display: block; }

/* ── Appointments history table row content — SpaTable (kit.css) provides the generic table
   chrome; these classes style the RowContent/HeaderContent markup this page passes into it. ── */

.hub-table__row--expanded td[b-iy78kyh3lz] { background: rgba(236, 232, 221, 0.35); }

.hub-table__expand[b-iy78kyh3lz] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-text-primary);
    font: inherit;
    font-weight: var(--font-weight-medium);
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    text-align: left;
}
.hub-table__expand svg[b-iy78kyh3lz] { width: 0.9375rem; height: 0.9375rem; transition: transform var(--duration-normal); flex-shrink: 0; }
.hub-table__expand[aria-expanded="true"] svg[b-iy78kyh3lz] { transform: rotate(180deg); }

.hub-table__sub[b-iy78kyh3lz] {
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin-top: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.hub-table__sub-line[b-iy78kyh3lz] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-wrap: wrap;
}
.hub-table__sub-time[b-iy78kyh3lz] { color: var(--color-primary); font-weight: var(--font-weight-semibold); }

.hub-table__loc[b-iy78kyh3lz] {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-text-secondary);
}

.hub-table__rebook[b-iy78kyh3lz] {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
    border: none;
    background: none;
    cursor: pointer;
    font: inherit;
    padding: 0;
}
.hub-table__rebook:hover[b-iy78kyh3lz] { text-decoration: underline; }

.hub-badge[b-iy78kyh3lz] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-badge);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1;
    white-space: nowrap;
}
.hub-badge--finalized[b-iy78kyh3lz] { background: #c8d7c2; color: #085a12; }
.hub-badge--upcoming[b-iy78kyh3lz] { background: #dce8f5; color: var(--color-primary); }
.hub-badge--cancelled[b-iy78kyh3lz] { background: #f5dcdc; color: #8b2222; }
.hub-badge--mine[b-iy78kyh3lz] { background: #c8d7c2; color: #085a12; padding: 0.125rem 0.5rem; font-size: 0.6875rem; }
.hub-badge--other[b-iy78kyh3lz] { background: var(--color-border-light); color: var(--color-text-secondary); padding: 0.125rem 0.5rem; font-size: 0.6875rem; }

/* ── Table responsiveness ── SpaTable's min-width:40rem + hub-table-wrap's overflow-x:auto (kit.css)
   already make the table horizontally scrollable rather than breaking page layout. On top of that,
   drop the least-essential column (ApptVisitId — a support/reference field, not something a customer
   needs at a glance) on phones so the remaining 6 columns need less scrolling to reach Rebook. Column
   order: Date(1) Location(2) Treatments(3) Service provider(4) Status(5) ApptVisitId(6) Rebook(7). */
@media (max-width: 40rem) {
    .hub-table th:nth-child(6)[b-iy78kyh3lz],
    .hub-table td:nth-child(6)[b-iy78kyh3lz] {
        display: none;
    }
}
/* _content/FTS.Online/Components/Pages/Appointments/PendingVisitsModal.razor.rz.scp.css */
.pending-visits-subtitle[b-96fartt4e0] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-4);
}

.pending-visits-list[b-96fartt4e0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pending-visit-card[b-96fartt4e0] {
    background: var(--color-bg-cream);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.pending-visit-card__top[b-96fartt4e0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
}

.pending-visit-card__title[b-96fartt4e0] {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text-primary);
    margin: 0;
}

.pending-visit-card__meta[b-96fartt4e0] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
    margin: 0.1875rem 0 0;
}

[b-96fartt4e0] .pending-visit-card__resume {
    width: 100%;
}
/* _content/FTS.Online/Components/Pages/Gifts/EditGiftRecipientDialog.razor.rz.scp.css */
/* Shared shell (gc-*) lives in kit.css — see the "Gifts module shared shell" comment there.
   This dialog stacks more sections (delivery, gratuity, recipient, address) in a narrower 32rem
   column than FlatAmountSection/GiftCardPackageSection, so its own wrapper (not the shared
   gc-form) sets a roomier gap between sections instead of changing the shared default. */

.edit-recipient-form[b-dx02xsakqf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Gratuity pills + the Amount field are one logical group (same relationship as the package
   card's gc-package-card__expand), so they keep a tighter gap than the surrounding sections. */
.edit-recipient-gratuity[b-dx02xsakqf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Delivery-option pills read as too large at this dialog's 32rem width — a smaller, denser
   pill matches the compact gratuity chips below it better than the default spa-pill size. */
.edit-recipient-delivery[b-dx02xsakqf]  .spa-pill {
    padding: 0.5rem 1rem;
    font-size: var(--font-size-xs);
}
/* _content/FTS.Online/Components/Pages/Gifts/FlatAmountSection.razor.rz.scp.css */
/* Shared shell (gc-*) lives in kit.css — see the "Gifts module shared shell" comment there.
   Nothing left to scope here once the Radzen/Bootstrap markup was replaced. */
/* _content/FTS.Online/Components/Pages/Gifts/GiftBillingSection.razor.rz.scp.css */
/* Shell (billing-header/-page-card/-label/-failure/-card-list/-actions) and the credit-card form
   grid/tokenizer (billing-form-*, billing-tokenizer*) live in kit.css — shared with BillingSection,
   see the comments above those rules there. Only the delete-card affordance is specific to gifts
   (the booking billing step has no equivalent). */

.gift-billing-card-row[b-9t3w5fv00b] {
    position: relative;
}

[b-9t3w5fv00b] .gift-billing-card-row .hub-card-on-file {
    max-width: none;
    padding-right: 3rem;
}

.gift-billing-card-delete[b-9t3w5fv00b] {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: color var(--duration-normal) var(--ease-default), background-color var(--duration-normal) var(--ease-default);
}

.gift-billing-card-delete:hover:not(:disabled)[b-9t3w5fv00b] {
    color: var(--color-error);
    background: rgba(192, 57, 43, 0.1);
}

.gift-billing-card-delete:disabled[b-9t3w5fv00b] {
    opacity: 0.4;
    cursor: not-allowed;
}
/* _content/FTS.Online/Components/Pages/Gifts/GiftCardCart.razor.rz.scp.css */
/* Kit has no reference for this cart. Shell classes (hub-itinerary-sidebar, cart-group,
   cart-remove-btn, cart-discount-row, cart-empty, spa-loading-row) come from kit.css — see the
   comment above .hub-itinerary-sidebar there. Item rows reuse the same __item-name/__item-provider/
   __item-price/__item-member-price classes as ItinerarySection's items, for a consistent look
   between the booking itinerary and this cart. Everything below is specific to this component's
   shipping-group / region-row layout, which the shared sidebar shell doesn't cover. */

.gift-cart[b-gwkr2f4po1] {
    position: sticky;
    top: var(--space-4);
}

.gift-cart-region-row[b-gwkr2f4po1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    border-top: 0.0625rem solid #e4e9ee;
    padding-top: var(--space-3);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
}

.gift-cart-region-row .cart-label[b-gwkr2f4po1] {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.gift-cart-info-btn[b-gwkr2f4po1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
}

.gift-cart-info-btn:hover[b-gwkr2f4po1] {
    color: var(--color-primary);
}

.gift-cart-region-link[b-gwkr2f4po1] {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: none;
}

.gift-cart-region-link:hover[b-gwkr2f4po1] {
    text-decoration: underline;
}

.gift-cart-region-link svg[b-gwkr2f4po1] {
    width: 0.75rem;
    height: 0.75rem;
    opacity: 0.7;
}

.gift-cart-group-header[b-gwkr2f4po1] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-xs);
}

.gift-cart-group-meta[b-gwkr2f4po1] {
    color: var(--color-text-muted);
    font-weight: var(--font-weight-semibold);
}

.gift-cart-group-meta--price[b-gwkr2f4po1] {
    color: var(--color-primary);
}

.gift-cart-shipping-edit[b-gwkr2f4po1] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-1);
    width: 100%;
}

.gift-cart-shipping-edit__option[b-gwkr2f4po1] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.gift-cart-shipping-edit__option input[b-gwkr2f4po1] {
    accent-color: var(--color-primary);
    cursor: pointer;
}

.gift-cart-shipping-edit__cancel[b-gwkr2f4po1] {
    align-self: flex-start;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.gift-cart-item-actions[b-gwkr2f4po1] {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    flex-shrink: 0;
}

.gift-cart-address-line[b-gwkr2f4po1] {
    max-width: 10rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gift-cart-subtotal-rows[b-gwkr2f4po1] {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    border-top: 0.0625rem solid #e4e9ee;
    padding-top: var(--space-3);
}

.gift-cart-subtotal-row[b-gwkr2f4po1] {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.gift-cart-subtotal-row strong[b-gwkr2f4po1] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

[b-gwkr2f4po1] .gift-cart-checkout-btn {
    width: 100%;
}

@media (max-width: 48rem) {
    .gift-cart[b-gwkr2f4po1] {
        position: relative;
        top: 0;
    }
}
/* _content/FTS.Online/Components/Pages/Gifts/GiftCardMainScreen.razor.rz.scp.css */
/* Gift Card Main Screen styles */

.type-content-section[b-lg38lho5ib] {
    min-height: 20rem;
}

.gifts-type-row[b-lg38lho5ib] {
    display: flex;
    justify-content: center;
    max-width: 100%;
    overflow-x: auto;
    margin-bottom: var(--space-6);
}

@media (max-width: 48rem) {
    .gifts-type-row[b-lg38lho5ib]  .spa-pill-group {
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* _content/FTS.Online/Components/Pages/Gifts/GiftCardPackageSection.razor.rz.scp.css */
/* Kit has no reference for this — shared shell (gc-header/gc-page-card/gc-field/gc-divider/gc-actions)
   lives in kit.css, see the "Gifts module shared shell" comment there. Package cards below are
   specific to this component (not reused by FlatAmountSection/GiftExperienceSection), styled as a
   selectable pricing-card grid instead of the checkbox-in-the-corner form list this used to be. */

.gc-package-group-heading[b-wqfzis06a4] {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-xl);
    color: var(--color-text-primary);
    margin: var(--space-6) 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 0.0625rem solid var(--color-border);
}

.gc-package-group-heading:first-child[b-wqfzis06a4] {
    margin-top: 0;
}

.gc-package-grid[b-wqfzis06a4] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--space-5);
    align-items: start;
}

.gc-package-card[b-wqfzis06a4] {
    background: #fff;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    cursor: pointer;
    transition: border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);
}

.gc-package-card:hover[b-wqfzis06a4] {
    border-color: var(--color-primary);
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.08);
}

.gc-package-card--selected[b-wqfzis06a4] {
    border-color: var(--color-primary);
    border-width: 0.125rem;
    background: var(--color-primary-muted);
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.1);
}

.gc-package-card__header[b-wqfzis06a4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.gc-package-card__name[b-wqfzis06a4] {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    margin: 0;
}

.gc-package-card__radio[b-wqfzis06a4] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    border-radius: 50%;
    border: 0.125rem solid var(--color-border-input);
    position: relative;
}

.gc-package-card--selected .gc-package-card__radio[b-wqfzis06a4] {
    border-color: var(--color-primary);
}

.gc-package-card--selected .gc-package-card__radio[b-wqfzis06a4]::after {
    content: "";
    position: absolute;
    inset: 0.1875rem;
    border-radius: 50%;
    background: var(--color-primary);
}

.gc-package-card__price-row[b-wqfzis06a4] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: var(--space-2);
    border-top: 0.0625rem solid var(--color-border);
}

.gc-package-card__price[b-wqfzis06a4] {
    font-family: var(--font-heading);
    font-weight: 350;
    font-size: var(--font-size-2xl);
    color: var(--color-primary);
}

.gc-package-card__savings[b-wqfzis06a4] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.gc-package-card__description[b-wqfzis06a4] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    margin: 0;
    padding-top: var(--space-2);
    border-top: 0.0625rem solid var(--color-border);
}

.gc-package-card__includes[b-wqfzis06a4] {
    padding-top: var(--space-2);
    border-top: 0.0625rem solid var(--color-border);
}

.gc-package-card__includes-label[b-wqfzis06a4] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.gc-package-card__service-list[b-wqfzis06a4] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.gc-package-card__service-list li[b-wqfzis06a4] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.gc-package-card__check[b-wqfzis06a4] {
    color: var(--color-primary);
    flex-shrink: 0;
}

.gc-package-card__upgrades[b-wqfzis06a4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    cursor: default;
}

.gc-package-card__expand[b-wqfzis06a4] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    cursor: default;
}

.gc-package-card__expand[b-wqfzis06a4]  .spa-pill-group {
    justify-content: center;
}

@media (max-width: 30rem) {
    .gc-package-grid[b-wqfzis06a4] {
        grid-template-columns: 1fr;
    }
}
/* _content/FTS.Online/Components/Pages/Gifts/GiftCardView.razor.rz.scp.css */
.gift-card-page[b-1r5tl47evg] {
    min-height: 100vh;
    background: #f5f5f5;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 1rem;
}

.gift-card-actions[b-1r5tl47evg] {
    width: 100%;
    max-width: 50rem;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.75rem;
}

.btn-print[b-1r5tl47evg] {
    background: none;
    border: none;
    color: #007c8a;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

.btn-print:hover[b-1r5tl47evg] {
    color: #005f6b;
}

.gift-card-wrapper[b-1r5tl47evg] {
    width: 100%;
    max-width: 50rem;
    border: 0.15rem solid #4dc6d0;
    background: #ffffff;
    padding: 1.75rem 2rem;
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
}

/* Header row */
.gift-card-header[b-1r5tl47evg] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1.5rem;
}

.gift-card-title[b-1r5tl47evg] {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #1a1a1a;
    margin: 0;
}

.gift-card-brand[b-1r5tl47evg] {
    text-align: right;
}

.gift-card-brand-name[b-1r5tl47evg] {
    font-size: 1.1rem;
    font-weight: 700;
    font-style: italic;
    color: #1a1a1a;
    line-height: 1.2;
    margin: 0;
}

.gift-card-brand-tagline[b-1r5tl47evg] {
    font-size: 0.75rem;
    color: #555;
    margin: 0;
}

/* Divider */
.gift-card-divider[b-1r5tl47evg] {
    border: none;
    border-top: 0.0625rem solid #d0d0d0;
    margin: 0 0 1.5rem 0;
}

/* Body */
.gift-card-body[b-1r5tl47evg] {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
}

.gift-card-cert-no[b-1r5tl47evg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    min-width: 7rem;
}

.gift-card-cert-no > div[b-1r5tl47evg] {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cert-no-label[b-1r5tl47evg] {
    font-size: 0.65rem;
    color: #888;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
}

.cert-no-value[b-1r5tl47evg] {
    font-size: 0.875rem;
    font-weight: 600;
    color: #333;
    font-family: monospace;
    letter-spacing: 0.08em;
}

.gift-card-details[b-1r5tl47evg] {
    flex: 1;
    min-width: 14rem;
}

.detail-line[b-1r5tl47evg] {
    font-size: 0.9rem;
    color: #1a1a1a;
    margin-bottom: 0.4rem;
    line-height: 1.4;
}

.detail-line strong[b-1r5tl47evg] {
    font-weight: 600;
}

.detail-line.amount-line[b-1r5tl47evg] {
    margin-top: 0.75rem;
    font-size: 0.95rem;
}

.package-services[b-1r5tl47evg] {
    font-size: 0.75rem;
    font-weight: normal;
    color: #333;
    margin-left: 0.25rem;
}

.experience-service-line[b-1r5tl47evg] {
    color: #007c8a;
    font-weight: normal;
}

.gratuity-line[b-1r5tl47evg] {
    font-size: 0.78rem;
    font-style: italic;
    color: #007c8a;
    margin-top: 0.1rem;
}

/* Disclaimer */
.gift-card-disclaimer[b-1r5tl47evg] {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 0.0625rem solid #e0e0e0;
    font-size: 0.6rem;
    color: #888;
    line-height: 1.5;
}

/* Error / loading states */
.gift-card-error[b-1r5tl47evg] {
    text-align: center;
    padding: 3rem 1rem;
    color: #555;
}

.gift-card-loading[b-1r5tl47evg] {
    text-align: center;
    padding: 3rem 1rem;
    color: #888;
}

/* Responsive */
@media (max-width: 36rem) {
    .gift-card-wrapper[b-1r5tl47evg] {
        padding: 1.25rem 1rem;
    }

    .gift-card-title[b-1r5tl47evg] {
        font-size: 1.1rem;
    }

    .gift-card-body[b-1r5tl47evg] {
        flex-direction: column;
        gap: 1rem;
    }

    .gift-card-cert-no[b-1r5tl47evg] {
        flex-direction: row;
        gap: 0.5rem;
        align-items: center;
        min-width: unset;
    }
}

/* Print styles */
@media print {
    .gift-card-page[b-1r5tl47evg] {
        background: #fff;
        padding: 0;
    }

    .gift-card-actions[b-1r5tl47evg] {
        display: none;
    }

    .gift-card-wrapper[b-1r5tl47evg] {
        box-shadow: none;
        max-width: 100%;
        border-color: #000;
    }
}
/* _content/FTS.Online/Components/Pages/Gifts/GiftCheckoutShippingSection.razor.rz.scp.css */
/* Kit has no reference for this. Shared shell (gc-*) lives in kit.css — see the "Gifts module
   shared shell" comment there. Item cards below intentionally mirror GiftOrderConfirmation's
   orderreview-item look (bordered card + icon circle + gc-summary__row detail rows), for a
   consistent look across the gifts checkout flow. */

.giftshipping-text[b-3iofbgrhm9] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    margin: 0;
}

.giftshipping-shipments[b-3iofbgrhm9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.giftshipping-shipment[b-3iofbgrhm9] {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.giftshipping-shipment__header[b-3iofbgrhm9] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.giftshipping-shipment__header .gc-subheading[b-3iofbgrhm9] {
    font-size: var(--font-size-md);
}

.giftshipping-shipment__address[b-3iofbgrhm9] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
}

.giftshipping-method-row[b-3iofbgrhm9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
}

.giftshipping-method-name[b-3iofbgrhm9] {
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
}

.giftshipping-method-charge[b-3iofbgrhm9] {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

.giftshipping-method-edit-btn[b-3iofbgrhm9] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
}

.giftshipping-method-edit-btn:hover[b-3iofbgrhm9] {
    color: var(--color-primary);
    background: rgba(51, 93, 136, 0.08);
}

.giftshipping-method-edit[b-3iofbgrhm9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.giftshipping-method-edit__option[b-3iofbgrhm9] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
}

.giftshipping-method-edit__option input[b-3iofbgrhm9] {
    accent-color: var(--color-primary);
    cursor: pointer;
}

.giftshipping-method-edit__cancel[b-3iofbgrhm9] {
    align-self: flex-start;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.giftshipping-shipment__items[b-3iofbgrhm9] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.giftshipping-item[b-3iofbgrhm9] {
    display: flex;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.giftshipping-item__icon[b-3iofbgrhm9] {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-primary-muted);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.giftshipping-item__body[b-3iofbgrhm9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.giftshipping-item__row[b-3iofbgrhm9] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.giftshipping-item__type[b-3iofbgrhm9] {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.giftshipping-item__price[b-3iofbgrhm9] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--color-primary);
    white-space: nowrap;
    flex-shrink: 0;
}
/* _content/FTS.Online/Components/Pages/Gifts/GiftExperienceSection.razor.rz.scp.css */
/* Kit has no reference for this flow — treatment cards mirror GiftCardPackageSection's
   gc-package-card visual language (selectable radio-style card) since Package already
   established that pattern for this module. Everything else (gc-header, gc-summary, gc-field,
   gc-divider, gc-gratuity-pills, gc-actions, hub-enhancement-grid/card) is shared, defined in
   kit.css / global scope, and needs no page-specific CSS here. */

.gc-experience-treatments-field[b-q0zjpaku52] {
    margin-top: var(--space-6);
}

.gc-experience-enhancements-field[b-q0zjpaku52] {
    margin-top: var(--space-5);
}

.gc-enh-total[b-q0zjpaku52] {
    background: var(--color-bg);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-5);
    margin-top: var(--space-5);
}

.gc-enh-total__row[b-q0zjpaku52] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-md);
    color: var(--color-primary);
}

.gc-enh-total__note[b-q0zjpaku52] {
    margin: var(--space-2) 0 0;
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.gc-experience-grid[b-q0zjpaku52] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: var(--space-5);
}

.gc-experience-card[b-q0zjpaku52] {
    background: #fff;
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    min-height: 11rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    cursor: pointer;
    transition: border-color var(--duration-normal) var(--ease-default), box-shadow var(--duration-normal) var(--ease-default);
}

.gc-experience-card:hover[b-q0zjpaku52] {
    border-color: var(--color-primary);
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.08);
}

.gc-experience-card--selected[b-q0zjpaku52] {
    border-color: var(--color-primary);
    border-width: 0.125rem;
    background: var(--color-primary-muted);
    box-shadow: 0 0.375rem 1rem rgba(0, 0, 0, 0.1);
}

.gc-experience-card__header[b-q0zjpaku52] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2);
}

.gc-experience-card__name[b-q0zjpaku52] {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
    margin: 0;
}

.gc-experience-card__radio[b-q0zjpaku52] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    border-radius: 50%;
    border: 0.125rem solid var(--color-border-input);
    position: relative;
}

.gc-experience-card--selected .gc-experience-card__radio[b-q0zjpaku52] {
    border-color: var(--color-primary);
}

.gc-experience-card--selected .gc-experience-card__radio[b-q0zjpaku52]::after {
    content: "";
    position: absolute;
    inset: 0.1875rem;
    border-radius: 50%;
    background: var(--color-primary);
}

.gc-experience-card__description[b-q0zjpaku52] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    margin: 0;
}

.gc-experience-card__expand[b-q0zjpaku52] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    cursor: default;
}

.gc-experience-card__expand[b-q0zjpaku52]  .spa-pill-group {
    justify-content: center;
}

@media (max-width: 30rem) {
    .gc-experience-grid[b-q0zjpaku52] {
        grid-template-columns: 1fr;
    }
}
/* _content/FTS.Online/Components/Pages/Gifts/GiftOrderConfirmation.razor.rz.scp.css */
/* Kit has no reference for this — a standard e-commerce checkout-review layout (item list +
   sticky order-summary rail bundling promo/totals/payment/CTA), but placed in the same row/
   col-md-9/col-md-3 grid (and gifts-cart-sticky sidebar class) every other gifts step uses, so the
   summary sits in the exact same column position throughout the flow. summary-hero/-meta (the
   receipt phase) live in kit.css — see the "Order/booking summary" comment there. */

.orderreview-header[b-b63h4itli8] {
    margin: 0;
}

/* Receipt hero — summary-hero/-check/-title/-text/summary-meta are shared with the booking
   confirmation (kit.css), where they sit inside SummarySection's own padded card. Here they had no
   such wrapper and no room to breathe, so this card gives them one and loosens their tight default
   gap (tuned for a smaller embedded card, not a page-level hero) without touching the shared rule. */
.orderreview-hero-card[b-b63h4itli8] {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-8) var(--space-6);
    margin-bottom: var(--space-6);
}

.orderreview-hero-card .summary-hero[b-b63h4itli8] {
    gap: var(--space-4);
}

.orderreview-hero-card .summary-hero__check[b-b63h4itli8] {
    width: 3rem;
    height: 3rem;
}

.orderreview-hero-card .orderreview-receipt-meta[b-b63h4itli8] {
    margin-top: var(--space-2);
    gap: var(--space-4);
}

.orderreview-header__subtitle[b-b63h4itli8] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: var(--space-2) 0 0;
}

/* ── Items (left column) ───────────────────────────────── */

.orderreview-items[b-b63h4itli8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 0;
}

.orderreview-group[b-b63h4itli8] {
    background: var(--color-bg-cream);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.orderreview-group__header[b-b63h4itli8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.orderreview-group__address[b-b63h4itli8] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.orderreview-item[b-b63h4itli8] {
    display: flex;
    gap: var(--space-3);
    background: var(--color-surface);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    box-shadow: var(--shadow-sm);
}

.orderreview-item__icon[b-b63h4itli8] {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-primary-muted);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.orderreview-item__body[b-b63h4itli8] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.orderreview-item__row[b-b63h4itli8] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.orderreview-item__type[b-b63h4itli8] {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
}

.orderreview-item__price[b-b63h4itli8] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--color-primary);
    white-space: nowrap;
    flex-shrink: 0;
}

.orderreview-item__detail[b-b63h4itli8] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    word-break: break-word;
}

.orderreview-item__detail strong[b-b63h4itli8] {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.orderreview-item__detail--discount[b-b63h4itli8] {
    color: var(--color-error);
}

/* ── Summary (right rail) ──────────────────────────────── */

.orderreview-summary[b-b63h4itli8] {
    position: sticky;
    top: var(--space-5);
    background: var(--color-bg-cream);
    border: 0.0625rem solid #ece8dd;
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.orderreview-summary__title[b-b63h4itli8] {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    margin: 0;
}

.orderreview-promo[b-b63h4itli8] {
    display: flex;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 0.0625rem solid var(--color-border);
}

.orderreview-promo .spa-field__input[b-b63h4itli8] {
    flex: 1;
    min-width: 0;
}

.orderreview-promo--applied[b-b63h4itli8] {
    align-items: center;
    justify-content: space-between;
}

.orderreview-promo__code[b-b63h4itli8] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
}

.orderreview-promo__amount[b-b63h4itli8] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-error);
    margin-left: var(--space-2);
}

.orderreview-link-btn[b-b63h4itli8] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

.orderreview-link-btn:disabled[b-b63h4itli8] {
    opacity: 0.5;
    cursor: not-allowed;
}

.orderreview-totals[b-b63h4itli8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 0.0625rem solid var(--color-border);
}

.orderreview-totals__row[b-b63h4itli8] {
    display: flex;
    justify-content: space-between;
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.orderreview-totals__row--discount[b-b63h4itli8] {
    color: var(--color-error);
}

.orderreview-totals__row--grand[b-b63h4itli8] {
    padding-top: var(--space-2);
    margin-top: var(--space-1);
    border-top: 0.0625rem solid var(--color-border);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
}

.orderreview-payment[b-b63h4itli8] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-4);
    border-bottom: 0.0625rem solid var(--color-border);
}

.orderreview-payment__icon[b-b63h4itli8] {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.orderreview-payment__line[b-b63h4itli8] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    margin: 0;
}

.orderreview-payment__meta[b-b63h4itli8] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0.125rem 0 0;
}

[b-b63h4itli8] .orderreview-confirm-btn {
    width: 100%;
}

.orderreview-back-link[b-b63h4itli8] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    text-decoration: underline;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    text-align: center;
}

.orderreview-back-link:hover:not(:disabled)[b-b63h4itli8] {
    color: var(--color-primary);
}

.orderreview-back-link:disabled[b-b63h4itli8] {
    opacity: 0.5;
    cursor: not-allowed;
}

.orderreview-receipt-meta[b-b63h4itli8] {
    justify-content: center;
}

@media (max-width: 48rem) {
    .orderreview-summary[b-b63h4itli8] {
        position: relative;
        top: 0;
    }
}

@media (max-width: 30rem) {
    .orderreview-receipt-meta[b-b63h4itli8] {
        flex-direction: column;
        gap: var(--space-1);
    }
}
/* _content/FTS.Online/Components/Pages/Gifts/GiftRecipientAddressSection.razor.rz.scp.css */
/* Shared shell (gc-*) lives in kit.css — see the "Gifts module shared shell" comment there. */
/* _content/FTS.Online/Components/Pages/Gifts/GiftRecipientSection.razor.rz.scp.css */
/* Shared shell (gc-*) lives in kit.css — see the "Gifts module shared shell" comment there. */
/* _content/FTS.Online/Components/Pages/Gifts/Index.razor.rz.scp.css */
/* Kit has no reference for the gifts flow. Page-scoped classes (gifts-*) below have no kit
   component equivalent — reusable pieces (pills, sidebar cart shell) come from Components/Shared/Kit
   and kit.css instead, matching the sibling QuickBooking wizard's shell pattern. */

.gifts-header[b-gek57v6mz2] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.gifts-header__title[b-gek57v6mz2] {
    margin: 0;
}

.gifts-admin-toggle[b-gek57v6mz2] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: none;
    border: none;
    text-decoration: underline;
    cursor: pointer;
    padding: 0;
}

.gifts-admin-toggle:hover[b-gek57v6mz2] {
    color: var(--color-primary);
}

.gifts-admin-toggle--on[b-gek57v6mz2] {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
}

/* Hidden per request — kept in the DOM (not removed) so it's a one-line revert to bring back. */
.gifts-admin-toggle--hidden[b-gek57v6mz2] {
    display: none;
}
/* _content/FTS.Online/Components/Pages/Profile/Create.razor.rz.scp.css */
/* Shares Account/Login.razor's shell (kit.css's "Auth split screen" comment) — these are
   Create-only overrides/additions, layered on top rather than changed in the shared classes,
   since Login's own short 2-field form still wants the narrower, vertically-centered version. */

/* The base .hub-login__brand centers its content (right for Login's short form) — Create's
   longer form can be taller than the viewport, and centering an overflowing flex child clips it
   symmetrically top-and-bottom, which is what was scrolling the logo out of view. Top-align
   instead, so the overflow (if any) only ever shows at the bottom, inside the panel's own
   overflow-y:auto — never hiding the logo. */
.hub-login__brand--top[b-0v7jtemo62] {
    justify-content: flex-start;
    padding-top: var(--space-7);
    padding-bottom: var(--space-7);
}

/* Wider than Login's 25.875rem so paired fields below have room to sit side by side without
   feeling cramped. */
.hub-login__panel--wide[b-0v7jtemo62] {
    max-width: 36rem;
}

/* Two-column field pairing (Email+Phone, First+Last Name, Password+Confirm) — cuts the form's
   height roughly in half versus one field per row, which is what was forcing the scroll/clip. */
.hub-login__row[b-0v7jtemo62] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
}

@media (max-width: 40rem) {
    .hub-login__row[b-0v7jtemo62] {
        grid-template-columns: 1fr;
    }
}
/* _content/FTS.Online/Components/Pages/Profile/EditProfile.razor.rz.scp.css */
/* _content/FTS.Online/Components/Pages/Profile/Index.razor.rz.scp.css */
/* Page-scoped (CSS isolation) — ported from the kit's actual pages/hub/manage-membership.html
   markup (not the generic component library, which the kit's own pages don't fully use either).
   Retokenized to kit's :root custom properties throughout. */

.hub-manage__title[b-q19smtoc6t] {
    margin: 0 0 var(--space-4);
}

.hub-manage-grid[b-q19smtoc6t] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-width, 19.125rem);
    gap: var(--space-5);
    align-items: start;
}

.hub-manage-main[b-q19smtoc6t] {
    min-width: 0;
}

.hub-manage-cards[b-q19smtoc6t] {
    display: grid;
    grid-template-columns: minmax(0, 639fr) minmax(0, 526fr);
    gap: 1.6875rem;
    margin-bottom: 1.625rem;
    align-items: stretch;
}

.hub-plan-card[b-q19smtoc6t] {
    background: var(--color-bg-cream);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    height: 16.375rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.hub-plan-card__header[b-q19smtoc6t] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-2);
    row-gap: var(--space-1);
}

.hub-plan-card__label[b-q19smtoc6t] {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-xl);
    color: #101010;
    margin: 0;
}

.hub-plan-card__since[b-q19smtoc6t] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
    background: var(--color-border);
    padding: 0.25rem var(--space-2);
    border-radius: var(--radius-pill);
    display: inline-block;
    white-space: nowrap;
}

.hub-plan-card__name[b-q19smtoc6t] {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: 2rem;
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}

.hub-plan-card__charge[b-q19smtoc6t] {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    line-height: var(--line-height-base);
    margin: 0;
}

.hub-plan-card__actions[b-q19smtoc6t] {
    display: flex;
    gap: var(--space-5);
    flex-wrap: wrap;
    margin-bottom: 0.625rem;
}

.hub-plan-card__contact[b-q19smtoc6t] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
    margin: 0;
}

.hub-plan-card__contact a[b-q19smtoc6t] {
    color: var(--color-primary);
}

/* Promo card — background image is the same asset used as the login page's hero placeholder. */
.hub-promo-card[b-q19smtoc6t] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-3);
    height: 16.375rem;
    padding: var(--space-5);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-sizing: border-box;
    background-color: var(--color-primary);
    color: var(--color-bg-cream);
    text-decoration: none;
    flex-shrink: 0;
    min-width: 0;
}

.hub-promo-card[b-q19smtoc6t]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('/images/booking/membership-promo-overlay.jpg') center / cover no-repeat;
    opacity: 0.4;
    pointer-events: none;
}

.hub-promo-card > *[b-q19smtoc6t] {
    position: relative;
    z-index: 1;
}

.hub-promo-card__badge[b-q19smtoc6t] {
    /* Normal flow + align-self (not the kit's position:absolute) — on a full-width mobile card the
       title below can wrap to 2 lines, and an absolutely-positioned badge would sit on top of it
       instead of being pushed down with the rest of the content. */
    align-self: flex-end;
    flex-shrink: 0;
    background: var(--color-bg);
    color: var(--color-text-primary);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-normal);
    line-height: 1.25rem;
    padding: 0.25rem var(--space-2);
    border-radius: var(--radius-pill);
    white-space: nowrap;
}

.hub-promo-card__title[b-q19smtoc6t] {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-2xl);
    line-height: 1.2;
    color: var(--color-bg-cream);
    margin: 0 0 var(--space-2);
}

.hub-promo-card__copy[b-q19smtoc6t] {
    font-family: var(--font-body);
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
    color: var(--color-bg-cream);
    margin: 0;
    max-width: 26em;
}

.hub-promo-card__btn[b-q19smtoc6t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.75rem;
    padding: var(--space-2) var(--space-5);
    margin-top: var(--space-4);
    background: var(--color-primary);
    border-radius: var(--radius-pill);
    color: #fff;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: var(--font-weight-medium);
    width: fit-content;
}

.hub-benefits-rail__title[b-q19smtoc6t] {
    font-family: var(--font-heading);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-xl);
    color: var(--color-primary);
    margin: 0 0 var(--space-4);
}

.hub-benefits-stack[b-q19smtoc6t] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.hub-benefit-item[b-q19smtoc6t] {
    background: var(--color-bg-cream);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--space-4);
    font-size: var(--font-size-sm);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.hub-benefit-item__icon[b-q19smtoc6t] {
    color: var(--color-primary);
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    opacity: 0.55;
}

.hub-benefit-item__icon svg[b-q19smtoc6t] {
    width: 100%;
    height: 100%;
}

.hub-benefit-item p[b-q19smtoc6t] {
    margin: 0 0 var(--space-2);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
}

.hub-benefit-item p:last-child[b-q19smtoc6t] {
    margin-bottom: 0;
}

.hub-benefit-item a[b-q19smtoc6t] {
    color: var(--color-primary);
    font-weight: var(--font-weight-medium);
    font-size: 0.8125rem;
    text-decoration: underline;
}

@media (max-width: 75rem) {
    .hub-manage-cards[b-q19smtoc6t] {
        grid-template-columns: 1fr;
    }

    .hub-plan-card[b-q19smtoc6t],
    .hub-promo-card[b-q19smtoc6t] {
        height: auto;
        min-height: 16.375rem;
    }
}

/* 80rem, not the kit's own 1024px — this grid sits INSIDE the app's outer sidebar+content layout
   (MainLayout.razor.css), which stays side-by-side down to 900px. Between 1024-1280px the outer
   306px sidebar would still be showing at the same time as this grid's own 306px benefits column,
   squeezing the plan/promo card stack (already collapsed to 1 column by the 75rem rule above) into
   a sliver. Collapsing this grid earlier guarantees that squeeze never happens. Same reasoning as
   Appointments/Index.razor.css's hub-appts__rail 80rem breakpoint. */
@media (max-width: 80rem) {
    .hub-manage-grid[b-q19smtoc6t] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 48rem) {
    .hub-manage__title[b-q19smtoc6t] {
        margin-bottom: var(--space-3);
    }

    .hub-manage-grid[b-q19smtoc6t] {
        gap: var(--space-4);
    }

    .hub-manage-cards[b-q19smtoc6t] {
        gap: var(--space-3);
        margin-bottom: var(--space-4);
    }

    .hub-plan-card[b-q19smtoc6t],
    .hub-promo-card[b-q19smtoc6t] {
        padding: var(--space-4);
    }

    .hub-plan-card__name[b-q19smtoc6t] {
        font-size: 1.5rem;
    }

    .hub-promo-card__title[b-q19smtoc6t] {
        font-size: var(--font-size-xl);
    }

    .hub-plan-card__actions[b-q19smtoc6t] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    /* Full-width stacked, not side-by-side-if-it-fits: the buttons' own white-space:nowrap (kit.css)
       means "Edit Payment Method" needs ~230px+ on its own, so relying on flex-wrap to decide
       per-viewport whether they fit side by side produced an inconsistent, easy-to-misjudge
       breakpoint. Forcing the stack for every phone-width screen is the standard thumb-friendly
       mobile CTA pattern and avoids that guesswork entirely. */
    .hub-plan-card__actions[b-q19smtoc6t]  .spa-btn {
        width: 100%;
    }
}
/* _content/FTS.Online/Components/Pages/QuickBooking/Index.razor.rz.scp.css */
[b-q454vwfj42] .quickbooking-continue-btn {
    width: 100%;
}

.cancel-confirm-text[b-q454vwfj42] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    margin: 0;
}

.quickbooking-session-id[b-q454vwfj42] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: right;
    margin-top: var(--space-2);
}

/* Bootstrap's col-md-* stacks to full width below md but gives stacked columns no vertical
   gap on its own — add one so the itinerary card doesn't sit flush against the form above it. */
@media (max-width: 48rem) {
    .quickbooking-itinerary-sticky[b-q454vwfj42] {
        margin-top: var(--space-6);
    }
}
/* _content/FTS.Online/Components/Pages/QuickBooking/SearchAppointmentSection.razor.rz.scp.css */
/* Kit reference: pages/hub/rebook.html (search form) + pages/hub/availability.html (results).
   Page-scoped classes (qb-*) below have no kit component equivalent — everything reusable
   (pills, dropdown fields, date picker, time slots) comes from Components/Shared/Kit instead. */

/* Whole mid-column content sits in one white card, matching the sidebar's own #fffdf8/10px
   card treatment (kit.css .spa-sidebar__nav) — kit's own pages wrap form+results the same way. */
.qb-search__header[b-gjgaza9ig8] {
    margin-bottom: var(--space-5);
}

.qb-page-card[b-gjgaza9ig8] {
    background: var(--color-bg-cream);
    border-radius: var(--radius-md);
    padding: var(--space-6);
}

.qb-search[b-gjgaza9ig8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.qb-search__title[b-gjgaza9ig8] {
    margin: 0 0 var(--space-2);
}

.qb-search__subtitle[b-gjgaza9ig8] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 40rem;
    line-height: var(--line-height-base);
}

/* EditForm renders a <form> — a child component's own markup, so this needs ::deep to apply.
   Gives every field block (Location, treatment section, therapist preference, etc.) the same
   standard spacing before/after, rather than each relying on its own ad-hoc margin. */
.qb-search[b-gjgaza9ig8]  form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.qb-field--narrow[b-gjgaza9ig8] {
    max-width: 22.5rem;
}

.qb-favorite-location[b-gjgaza9ig8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    height: 2.75rem;
    padding: 0 1rem;
    background: var(--color-bg-cream);
    border: 0.0625rem solid var(--color-border-input);
    border-radius: var(--radius-input);
}

.qb-favorite-location__name[b-gjgaza9ig8] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qb-favorite-location__clear[b-gjgaza9ig8] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: underline;
    flex-shrink: 0;
    cursor: pointer;
}

.qb-field-label-row[b-gjgaza9ig8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.qb-optional[b-gjgaza9ig8] {
    font-weight: var(--font-weight-normal);
    text-transform: none;
    color: var(--color-text-muted);
}

.qb-info-link[b-gjgaza9ig8] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}

.qb-field-block[b-gjgaza9ig8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.qb-treatment-hint[b-gjgaza9ig8] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.qb-loading-hint[b-gjgaza9ig8] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* Treatment section */

.qb-treatment-section[b-gjgaza9ig8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.qb-treatment-cards[b-gjgaza9ig8] {
    display: flex;
    flex-direction: column;
    margin-top: var(--space-2);
}

/* Borderless recap layout, matching the kit's actual rebook.html treatment block exactly
   (no card/border in the reference — just a row + a bottom divider). The checkbox has no kit
   equivalent (the reference is a static single-item recap, not a browsable list) — added at the
   left of the row since our app needs multi-treatment selection. */
.qb-treatment-item[b-gjgaza9ig8] {
    padding-top: var(--space-3);
    padding-bottom: var(--space-5);
    border-bottom: 0.0625rem solid var(--color-border);
}

.qb-treatment-item:first-child[b-gjgaza9ig8] {
    padding-top: 0;
}

.qb-treatment-item:last-child[b-gjgaza9ig8] {
    border-bottom: none;
    padding-bottom: 0;
}

.qb-treatment-item__row[b-gjgaza9ig8] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.qb-treatment-item__checkbox[b-gjgaza9ig8] {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding-top: 0.1875rem;
}

.qb-treatment-item__checkbox input[b-gjgaza9ig8] {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.qb-treatment-item--collapsed .qb-treatment-item__checkbox input[b-gjgaza9ig8] {
    cursor: not-allowed;
    opacity: 0.5;
}

.qb-treatment-item__main[b-gjgaza9ig8] {
    flex: 1;
    min-width: 0;
}

.qb-treatment-item__title[b-gjgaza9ig8] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--color-primary);
    line-height: var(--line-height-tight);
}

.qb-treatment-item__meta[b-gjgaza9ig8] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: var(--space-1) 0 0;
}

.qb-treatment-item__description[b-gjgaza9ig8] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
    margin: var(--space-1) 0 0;
    max-width: 34rem;
}

.qb-treatment-item__pricing[b-gjgaza9ig8] {
    display: flex;
    gap: var(--space-5);
    flex-shrink: 0;
    text-align: right;
}

.qb-treatment-item__price-block[b-gjgaza9ig8] {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.qb-treatment-item__price-label[b-gjgaza9ig8] {
    font-family: var(--font-body);
    font-size: 0.6875rem;
    color: var(--color-text-muted);
}

.qb-treatment-item__price-label--member[b-gjgaza9ig8] {
    color: var(--color-primary);
}

.qb-treatment-item__price-value[b-gjgaza9ig8] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--color-text-muted);
}

.qb-treatment-item__price-value--strike[b-gjgaza9ig8] {
    text-decoration: line-through;
}

.qb-treatment-item__price-value--member[b-gjgaza9ig8] {
    color: var(--color-primary);
    text-decoration: none;
}

.qb-treatment-item__duration[b-gjgaza9ig8] {
    margin-top: var(--space-3);
    margin-left: calc(1.125rem + var(--space-3));
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-width: 30rem;
}

/* Search actions */

.qb-search-actions[b-gjgaza9ig8] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Results */

.qb-results[b-gjgaza9ig8] {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 0.0625rem solid var(--color-border);
}

.qb-results__title[b-gjgaza9ig8] {
    margin: 0 0 var(--space-5);
}

.qb-results__grid[b-gjgaza9ig8] {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.qb-results__grid--single[b-gjgaza9ig8] {
    grid-template-columns: minmax(0, 1fr);
}

.qb-results__calendar[b-gjgaza9ig8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.qb-results__calendar[b-gjgaza9ig8]  .spa-datepicker {
    width: 100%;
    max-width: 100%;
}

.qb-calendar-legend[b-gjgaza9ig8] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.qb-calendar-legend__dot[b-gjgaza9ig8] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.qb-calendar-legend__dot--scheduled[b-gjgaza9ig8] {
    background: var(--color-accent-terracotta);
}

.qb-calendar-legend__dot--available[b-gjgaza9ig8] {
    background: #345d89;
}

.qb-results__slots[b-gjgaza9ig8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

/* Compact pill chips (kit's own .hub-timeslot default is 4rem tall — shorter here to match the
   reference availability.html screenshot) with an explicit, non-stretching flex-wrap so slots
   flow multiple-per-row instead of stacking one per row. */
.qb-results__slots[b-gjgaza9ig8]  .hub-timeslots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.qb-results__slots[b-gjgaza9ig8]  .hub-timeslot {
    flex: 0 0 auto;
    width: auto;
    min-width: 5rem;
    height: 2.75rem;
    padding: 0 0.75rem;
}

.qb-results__slots[b-gjgaza9ig8]  .hub-timeslot span {
    font-size: var(--font-size-sm);
}

.qb-locked-date-header[b-gjgaza9ig8] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    margin: 0;
}

.qb-partofday-warning[b-gjgaza9ig8] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
}

.qb-book-now-row[b-gjgaza9ig8] {
    margin-top: var(--space-2);
}

@media (max-width: 48rem) {
    .qb-results__grid[b-gjgaza9ig8] {
        grid-template-columns: minmax(0, 1fr);
    }

    .qb-results__calendar[b-gjgaza9ig8]  .spa-datepicker,
    .qb-results__calendar[b-gjgaza9ig8] {
        max-width: 100%;
    }

    .qb-treatment-item__row[b-gjgaza9ig8] {
        flex-wrap: wrap;
    }

    .qb-treatment-item__pricing[b-gjgaza9ig8] {
        gap: var(--space-4);
        margin-left: calc(1.125rem + var(--space-3));
        text-align: left;
    }

    .qb-page-card[b-gjgaza9ig8] {
        padding: var(--space-4);
    }

    .qb-search-actions[b-gjgaza9ig8]  .spa-btn,
    .qb-book-now-row[b-gjgaza9ig8]  .spa-btn {
        width: 100%;
    }

    .qb-search-actions[b-gjgaza9ig8] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/FTS.Online/Components/Pages/Rebook/Index.razor.rz.scp.css */
/* Kit reference: pages/hub/rebook.html (search form) + pages/hub/availability.html (results —
   date picker + time slots), same references SearchAppointmentSection.razor.css uses for /booking.
   Page-scoped classes (rebook-*) below have no kit component equivalent — everything reusable
   (pills, dropdown fields, date picker, time slots) comes from Components/Shared/Kit instead.
   No .cs logic changed — markup/CSS only. */

.rebook-back-home[b-e6661js90c] {
    margin-bottom: var(--space-4);
}

.rebook-back-home a[b-e6661js90c] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-primary);
    text-decoration: none;
}

.rebook-back-home a:hover[b-e6661js90c] {
    text-decoration: underline;
}

.rebook-header[b-e6661js90c] {
    margin-bottom: var(--space-5);
}

.rebook-header__title[b-e6661js90c] {
    margin: 0 0 var(--space-2);
}

.rebook-header__subtitle[b-e6661js90c] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
    max-width: 40rem;
    line-height: var(--line-height-base);
}

.rebook-page-card[b-e6661js90c] {
    background: var(--color-bg-cream);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.rebook-field--narrow[b-e6661js90c] {
    max-width: 22.5rem;
}

/* Treatment section — kit's rebook.html shows one static already-selected treatment recap;
   our app needs a browsable list of the visit's original services, so this repeats that same
   row+divider layout per item rather than inventing a new pattern. */

.rebook-treatment-section[b-e6661js90c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rebook-treatment-list[b-e6661js90c] {
    display: flex;
    flex-direction: column;
}

.rebook-treatment-item[b-e6661js90c] {
    padding-top: var(--space-4);
    padding-bottom: var(--space-5);
    border-bottom: 0.0625rem solid var(--color-border);
}

.rebook-treatment-item:first-child[b-e6661js90c] {
    padding-top: 0;
}

.rebook-treatment-item:last-child[b-e6661js90c] {
    border-bottom: none;
    padding-bottom: 0;
}

.rebook-treatment-item__original[b-e6661js90c] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0 0 var(--space-1);
}

.rebook-treatment-item__title[b-e6661js90c] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--color-primary);
    line-height: var(--line-height-tight);
    margin: 0;
}

/* Technician + enhancements sit in their own row below the treatment recap, each capped to a
   sensible field width, rather than squeezed beside the recap text where a long treatment name
   left them stranded at the top of an unbalanced row. */
.rebook-treatment-item__fields[b-e6661js90c] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-5);
    margin-top: var(--space-4);
}

.rebook-treatment-item__technician[b-e6661js90c] {
    flex: 0 1 16rem;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.rebook-treatment-item__enhancements[b-e6661js90c] {
    flex: 1 1 16rem;
    min-width: 12rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.rebook-chip-row[b-e6661js90c] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.rebook-chip[b-e6661js90c] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-pill);
    padding: 0.375rem var(--space-3);
    background: var(--color-bg);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-primary);
}

.rebook-chip__remove[b-e6661js90c] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    flex-shrink: 0;
    border-radius: 50%;
}

.rebook-chip__remove:hover[b-e6661js90c] {
    color: var(--color-error);
    background: rgba(192, 57, 43, 0.1);
}

/* Search actions */

.rebook-search-actions[b-e6661js90c] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

/* Results */

/* Results sit inside the same .rebook-page-card as the search form (divider, not a second
   stacked card) — two adjacent rounded cards with little/no gap between them produced a visible
   seam where their corners nearly met. */
.rebook-results[b-e6661js90c] {
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 0.0625rem solid var(--color-border);
}

.rebook-results__title[b-e6661js90c] {
    margin: 0 0 var(--space-5);
}

.rebook-results__grid[b-e6661js90c] {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

.rebook-results__calendar[b-e6661js90c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.rebook-results__calendar[b-e6661js90c]  .spa-datepicker {
    width: 100%;
    max-width: 100%;
}

.rebook-calendar-legend[b-e6661js90c] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.rebook-calendar-legend__dot[b-e6661js90c] {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.rebook-calendar-legend__dot--scheduled[b-e6661js90c] {
    background: var(--color-accent-terracotta);
}

.rebook-calendar-legend__dot--available[b-e6661js90c] {
    background: #345d89;
}

.rebook-results__slots[b-e6661js90c] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    min-width: 0;
}

.rebook-results__slots[b-e6661js90c]  .hub-timeslots {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.rebook-results__slots[b-e6661js90c]  .hub-timeslot {
    flex: 0 0 auto;
    width: auto;
    min-width: 5rem;
    height: auto;
    min-height: 2.75rem;
    padding: 0.375rem 0.75rem;
}

.rebook-results__slots[b-e6661js90c]  .hub-timeslot span {
    font-size: var(--font-size-sm);
}

.rebook-slot-meta-line[b-e6661js90c] {
    display: block;
}

.rebook-partofday-warning[b-e6661js90c] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
}

.rebook-book-now-row[b-e6661js90c] {
    margin-top: var(--space-2);
}

/* Continue/Next button lives in ItinerarySection's FooterContent slot (matches QuickBooking's
   quickbooking-continue-btn) rather than as a standalone row in the page column. */
[b-e6661js90c] .rebook-continue-btn {
    width: 100%;
}

@media (max-width: 48rem) {
    .rebook-results__grid[b-e6661js90c] {
        grid-template-columns: minmax(0, 1fr);
    }

    .rebook-results__calendar[b-e6661js90c]  .spa-datepicker,
    .rebook-results__calendar[b-e6661js90c] {
        max-width: 100%;
    }

    .rebook-page-card[b-e6661js90c] {
        padding: var(--space-4);
    }

    .rebook-search-actions[b-e6661js90c]  .spa-btn,
    .rebook-book-now-row[b-e6661js90c]  .spa-btn {
        width: 100%;
    }
}
/* _content/FTS.Online/Components/Shared/AppointmentOptionsSection.razor.rz.scp.css */
/* Kit reference: pages/hub/treatments-enhancements.html. hub-enhancement-grid/-card (kit.css) cover
   the enhancement tiles themselves; these fill the gaps kit has no reusable class for yet
   (per-appointment card chrome, collapse toggle). */

.opts-header[b-cw6z5918m3] {
    margin-bottom: var(--space-5);
}

.opts-header h1[b-cw6z5918m3] {
    margin: 0;
}

.opts-page-card[b-cw6z5918m3] {
    background: var(--color-bg-cream);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.opts-list[b-cw6z5918m3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.opts-card[b-cw6z5918m3] {
    background: var(--color-surface);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4) var(--space-4) var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.opts-card__header[b-cw6z5918m3] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.opts-card__title[b-cw6z5918m3] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-md);
    color: var(--color-primary);
    margin: 0 0 0.25rem;
}

.opts-card__meta[b-cw6z5918m3] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    margin: 0;
}

.opts-card__toggle[b-cw6z5918m3] {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    border: none;
    border-radius: 50%;
    background: var(--color-bg);
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.opts-card__toggle svg[b-cw6z5918m3] {
    transition: transform var(--duration-normal) var(--ease-default);
}

.opts-card__toggle[aria-expanded="true"] svg[b-cw6z5918m3] {
    transform: rotate(180deg);
}

/* Kit's default hub-enhancement-grid column (12.5rem) reads cramped with real service names
   ("CBD Enhanced Relaxation") — widen just here rather than changing the shared kit.css default. */
.opts-card .hub-enhancement-grid[b-cw6z5918m3] {
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}

.opts-card__label[b-cw6z5918m3] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    margin: 0;
}

.opts-empty[b-cw6z5918m3] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    margin: 0;
}

.opts-actions[b-cw6z5918m3] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

@media (max-width: 40rem) {
    .opts-header[b-cw6z5918m3] {
        margin-top: var(--space-2);
    }

    .opts-page-card[b-cw6z5918m3] {
        padding: var(--space-4);
    }

    .opts-card[b-cw6z5918m3] {
        padding: var(--space-3) var(--space-3) var(--space-4);
    }

    .opts-card .hub-enhancement-grid[b-cw6z5918m3] {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    /* Kit's card packs image+title+price+button into one tight column at 72px image size;
       on a full-width mobile card that leaves a lot of dead space beside the text. Widen the
       image and let the text/button sit beside it on one row instead. */
    .opts-card[b-cw6z5918m3]  .hub-enhancement-card {
        align-items: center;
    }

    .opts-card[b-cw6z5918m3]  .hub-enhancement-card__img {
        width: 5.5rem;
        height: 5.5rem;
    }

    .opts-actions[b-cw6z5918m3]  .spa-btn {
        flex: 1;
    }
}
/* _content/FTS.Online/Components/Shared/BillingSection.razor.rz.scp.css */
/* Kit reference: pages/hub/confirm-reservation.html. Shell classes (billing-header/-page-card/
   -label/-failure/-card-list/-actions) and the form-grid/tokenizer field styling (billing-form-*,
   billing-tokenizer*) all live in kit.css now — GiftBillingSection reuses the whole shell too, so
   it's shared design-system CSS, not this page's own. Nothing left to scope here. */

.billing-intro[b-rsu65lix7a] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    margin: 0;
}
/* _content/FTS.Online/Components/Shared/ConfirmationSection.razor.rz.scp.css */
/* Kit reference: pages/hub/confirm-reservation.html — the embedded sidebar (used as the Billing
   step's cart) reuses kit.css's .hub-itinerary-sidebar/.cart-* families (same as ItinerarySection)
   plus the promo-code + legal-text block, which kit's own version keeps much shorter than ours. */

.hub-itinerary-sidebar[b-a16ic1rtsh] {
    width: 100%;
}

.confirmation-sidebar__header[b-a16ic1rtsh] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-2);
}

.confirmation-cancel-link[b-a16ic1rtsh] {
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-error);
    text-decoration: underline;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}

.confirmation-discount-detail[b-a16ic1rtsh] {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
    margin-top: 0.125rem;
}

.confirmation-footer[b-a16ic1rtsh] {
    border-top: 0.0625rem solid #e4e9ee;
    padding-top: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.confirmation-promo-link[b-a16ic1rtsh] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-decoration: underline;
    cursor: pointer;
}

.confirmation-promo-row[b-a16ic1rtsh] {
    display: flex;
    gap: var(--space-2);
    align-items: flex-end;
}

.confirmation-promo-row[b-a16ic1rtsh]  .spa-field {
    flex: 1;
    margin: 0;
}

.confirmation-legal[b-a16ic1rtsh] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: var(--line-height-base);
}

.confirmation-legal p[b-a16ic1rtsh] {
    margin: 0;
}

[b-a16ic1rtsh] .confirmation-confirm-btn {
    width: 100%;
}
/* _content/FTS.Online/Components/Shared/ContraindicationsSection.razor.rz.scp.css */
/* No kit reference page for this content — chrome mirrors AppointmentOptionsSection.razor.css
   (opts-*) and SearchAppointmentSection.razor.css (qb-*) so the booking-wizard steps read as one
   consistent system. */

.contra-header[b-rzdq36bkvf] {
    margin-bottom: var(--space-5);
}

.contra-header h1[b-rzdq36bkvf] {
    margin: 0;
}

.contra-page-card[b-rzdq36bkvf] {
    background: var(--color-bg-cream);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.contra-intro[b-rzdq36bkvf] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
    margin: 0;
}

.contra-list[b-rzdq36bkvf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contra-card[b-rzdq36bkvf] {
    background: var(--color-surface);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.contra-card__header[b-rzdq36bkvf] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    padding-bottom: var(--space-3);
    border-bottom: 0.0625rem solid var(--color-border-light);
}

.contra-card__time[b-rzdq36bkvf] {
    font-family: var(--font-body);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-sm);
    color: var(--color-text-primary);
    flex-shrink: 0;
}

.contra-card__meta[b-rzdq36bkvf] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    text-align: right;
}

.contra-card__meta strong[b-rzdq36bkvf] {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.contra-card__items[b-rzdq36bkvf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.contra-item[b-rzdq36bkvf] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
}

.contra-item input[b-rzdq36bkvf] {
    flex-shrink: 0;
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.1875rem;
    accent-color: var(--color-primary);
    cursor: pointer;
}

.contra-item__text[b-rzdq36bkvf] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    line-height: var(--line-height-base);
}

.contra-actions[b-rzdq36bkvf] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 40rem) {
    .contra-page-card[b-rzdq36bkvf] {
        padding: var(--space-4);
    }

    .contra-card__header[b-rzdq36bkvf] {
        flex-direction: column;
    }

    .contra-card__meta[b-rzdq36bkvf] {
        text-align: left;
    }

    .contra-actions[b-rzdq36bkvf]  .spa-btn {
        flex: 1;
    }
}
/* _content/FTS.Online/Components/Shared/FriendSelectionDialog.razor.rz.scp.css */
/* Kit has no reference for this dialog. Rendered inside MainLayout's RadzenDialog (see the
   comment there) so it inherits kit tokens; this is just the content's own layout. */

.friend-dialog[b-wvr6l7l8sv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    min-width: 20rem;
    max-width: 28rem;
    margin: 0 auto;
}

.friend-dialog__section[b-wvr6l7l8sv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.friend-list[b-wvr6l7l8sv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.friend-list__row[b-wvr6l7l8sv] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 0.0625rem solid var(--color-border);
    border-radius: var(--radius-md);
}

.friend-list__row[b-wvr6l7l8sv]  .spa-checkbox {
    flex: 1;
}

.friend-dialog[b-wvr6l7l8sv]  .friend-list__delete {
    color: var(--color-error);
    border-color: var(--color-error);
    flex-shrink: 0;
}

.friend-dialog__actions[b-wvr6l7l8sv] {
    display: flex;
    justify-content: flex-end;
}

@media (max-width: 30rem) {
    .friend-dialog[b-wvr6l7l8sv] {
        min-width: 0;
    }
}
/* _content/FTS.Online/Components/Shared/InfoTooltip.razor.rz.scp.css */
/* Kit has no reference for this trigger — mirrors the same info-circle icon/button already used
   for RegionSelection's and GiftCardCart's info buttons (own scoped copies there, since isolated
   CSS can't be shared across components). */

.info-tooltip-btn[b-qr0a3ker2a] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    margin-left: 0.25rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    vertical-align: -0.15em;
    flex-shrink: 0;
}

.info-tooltip-btn svg[b-qr0a3ker2a] {
    width: 100%;
    height: 100%;
}

.info-tooltip-btn:hover[b-qr0a3ker2a],
.info-tooltip-btn:focus-visible[b-qr0a3ker2a] {
    color: var(--color-primary);
}
/* _content/FTS.Online/Components/Shared/ItinerarySection.razor.rz.scp.css */
/* cart-*/hub-itinerary-sidebar__* chrome lives in kit.css (shared with ConfirmationSection's
   embedded itinerary). Only this width override is specific to this component. */

/* Kit's own default is a fixed 19.125rem (306px) aside, sized for its own hub-booking-split
   layout (narrow aside next to a much wider main column). Our page instead gives this a real
   Bootstrap column (col-md-3) to sit in, so it should fill that column's width rather than
   leaving dead space beside a fixed-width card. */
.hub-itinerary-sidebar[b-fc7a36hv3i] {
    width: 100%;
}
/* _content/FTS.Online/Components/Shared/Kit/SpaNotificationHost.razor.rz.scp.css */
.spa-notification-host[b-umaggxpv06] {
    position: fixed;
    top: var(--space-5);
    right: var(--space-5);
    z-index: var(--z-notification);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 24rem;
    width: calc(100% - 2 * var(--space-5));
    pointer-events: none;
}

.spa-notification[b-umaggxpv06] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-relaxed);
    background: #fff;
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.15);
    pointer-events: auto;
    animation: spa-notification-in-b-umaggxpv06 var(--duration-normal) var(--ease-default);
}

@keyframes spa-notification-in-b-umaggxpv06 {
    from { opacity: 0; transform: translateY(-0.5rem); }
    to { opacity: 1; transform: translateY(0); }
}

.spa-notification__icon[b-umaggxpv06] {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.spa-notification__body[b-umaggxpv06] {
    flex: 1;
    min-width: 0;
}

.spa-notification__summary[b-umaggxpv06] {
    margin: 0;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.spa-notification__detail[b-umaggxpv06] {
    margin: 0.25rem 0 0;
    color: var(--color-text-secondary);
}

.spa-notification__close[b-umaggxpv06] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    font-size: 0.875rem;
    line-height: 1;
}

.spa-notification__close:hover[b-umaggxpv06] {
    color: var(--color-text-primary);
}

.spa-notification--success[b-umaggxpv06] { border-left: 0.25rem solid var(--color-success); }
.spa-notification--success .spa-notification__icon[b-umaggxpv06] { color: var(--color-success); }

.spa-notification--error[b-umaggxpv06] { border-left: 0.25rem solid var(--color-error); }
.spa-notification--error .spa-notification__icon[b-umaggxpv06] { color: var(--color-error); }

.spa-notification--warning[b-umaggxpv06] { border-left: 0.25rem solid var(--color-accent-terracotta); }
.spa-notification--warning .spa-notification__icon[b-umaggxpv06] { color: var(--color-accent-terracotta); }

.spa-notification--info[b-umaggxpv06] { border-left: 0.25rem solid var(--color-primary); }
.spa-notification--info .spa-notification__icon[b-umaggxpv06] { color: var(--color-primary); }

@media (max-width: 30rem) {
    .spa-notification-host[b-umaggxpv06] {
        left: var(--space-4);
        right: var(--space-4);
        top: var(--space-4);
        max-width: none;
        width: auto;
    }
}
/* _content/FTS.Online/Components/Shared/MembershipCreditCardSection.razor.rz.scp.css */
/* Field grid/tokenizer chrome (billing-form-*, billing-tokenizer*, spa-field) lives in kit.css —
   shared with BillingSection's identical new-card form. Only this component's own small overrides
   stay here. */

.membership-card-update__error-text[b-0nfgn9me9f] {
    margin: 0.25rem 0 0;
}
/* _content/FTS.Online/Components/Shared/RegionSelection.razor.rz.scp.css */
.region-page-card[b-qblm130ime] {
    max-width: 26rem;
    margin: var(--space-8) auto;
    background: var(--color-bg-cream);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-5);
}

.region-header[b-qblm130ime] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.region-title-row[b-qblm130ime] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.region-title-row .spa-heading-3[b-qblm130ime] {
    margin: 0;
}

.region-info-btn[b-qblm130ime] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--color-text-muted);
    cursor: pointer;
    flex-shrink: 0;
}

.region-info-btn svg[b-qblm130ime] {
    width: 100%;
    height: 100%;
}

.region-info-btn:hover[b-qblm130ime] {
    color: var(--color-primary);
}

.region-subtitle[b-qblm130ime] {
    font-family: var(--font-body);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    margin: 0;
}

.region-field[b-qblm130ime] {
    width: 100%;
    max-width: 16rem;
}

[b-qblm130ime] .region-set-btn {
    min-width: 10rem;
}
/* _content/FTS.Online/Components/Shared/Spinner.razor.rz.scp.css */
.spinner-overlay[b-3cmayc6gbg] {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(26, 23, 18, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
}

.spinner-wrapper[b-3cmayc6gbg] {
    text-align: center;
}

.spa-loader[b-3cmayc6gbg] {
    animation: spa-loader-spin-b-3cmayc6gbg 0.9s linear infinite;
}

.spa-loader__track[b-3cmayc6gbg] {
    stroke: var(--color-primary-muted, rgba(51, 93, 136, 0.12));
}

.spa-loader__arc[b-3cmayc6gbg] {
    stroke: var(--color-primary, #335d88);
    stroke-dasharray: 31 94;
}

@keyframes spa-loader-spin-b-3cmayc6gbg {
    to {
        transform: rotate(360deg);
    }
}
/* _content/FTS.Online/Components/Shared/SummarySection.razor.rz.scp.css */
/* All summary-* styling now lives in kit.css — see the "Order/booking summary" comment there.
   Promoted once GiftOrderConfirmation needed the identical hero/itemized-list look. Nothing left
   to scope here. */