/* _content/VisitPlus.Shared/Layout/AppTabBar.razor.rz.scp.css */
/* Shared floating pill bottom nav (Figma 1118-14977). Fixed-positioned so it works in any
   layout (HomeLayout / MainLayout) regardless of DOM structure. Icons are Vuesax SVGs tinted
   via CSS mask + currentColor, so the active tab (navy) and inactive tabs (black @50%) render
   correctly whichever tab is selected. */

.atb-blur[b-keh0rieqex] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(env(safe-area-inset-bottom, 0px) + 92px);
    z-index: 1000;
    pointer-events: none;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    -webkit-mask-image: linear-gradient(to top, #000 45%, transparent);
    mask-image: linear-gradient(to top, #000 45%, transparent);
}

/* Desktop (>=768px): the app is a 600px column on the hero backdrop (HomeLayout), so the blur
   band has to stop at the column edges — full-width it smears a frosted stripe across the photo
   gutters. Phones are unaffected: below the breakpoint it still spans the screen. */
@media (min-width: 768px) {
    .atb-blur[b-keh0rieqex] {
        left: 50%;
        right: auto;
        width: 600px;
        transform: translateX(-50%);
    }
}

.atb[b-keh0rieqex] {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 1001;
    display: flex;
    align-items: center;
    width: 282px;
    max-width: calc(100% - 40px);
    padding: 2px;
    background: #fff;
    border: 1px solid #edeef1;
    border-radius: 999px;
    box-shadow: 0 14px 8.85px rgba(0,0,0,.08);
}

.atb__tab[b-keh0rieqex] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 12px 6px;
    background: none;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    color: #000; /* inactive: icon + label black... */
    opacity: .5; /* ...at 50% */
    transition: opacity .15s ease;
}

.atb__tab--active[b-keh0rieqex] {
    opacity: 1;
    color: var(--vp-brand-primary); /* active: icon + label = brand primary */
}

.atb__icon[b-keh0rieqex] {
    width: 24px;
    height: 24px;
    background-color: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Inactive tabs use the outline (vuesax/linear) variant, active tabs the bold/filled one —
   Figma 1101:12558. Home shipped only the bold glyph at first, so it drew solid even when
   inactive; both variants are committed now. */
.atb__icon--home[b-keh0rieqex] {
    -webkit-mask-image: url('images/tabs/home-2.svg');
    mask-image: url('images/tabs/home-2.svg');
}

.atb__tab--active .atb__icon--home[b-keh0rieqex] {
    -webkit-mask-image: url('images/tabs/home-2-bold.svg');
    mask-image: url('images/tabs/home-2-bold.svg');
}

.atb__icon--appts[b-keh0rieqex] {
    -webkit-mask-image: url('images/tabs/calendar-tick.svg');
    mask-image: url('images/tabs/calendar-tick.svg');
}

.atb__tab--active .atb__icon--appts[b-keh0rieqex] {
    -webkit-mask-image: url('images/tabs/calendar-tick-bold.svg');
    mask-image: url('images/tabs/calendar-tick-bold.svg');
}

.atb__icon--more[b-keh0rieqex] {
    -webkit-mask-image: url('images/tabs/more.svg');
    mask-image: url('images/tabs/more.svg');
}

.atb__label[b-keh0rieqex] {
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    white-space: nowrap;
}

.atb__tab:focus-visible[b-keh0rieqex] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .atb__tab[b-keh0rieqex] {
        transition: none;
    }
}

/* ===== "More" bottom-sheet menu (Figma 1931:25081) ===== */
/* Scrim sits BELOW the tab bar (z 1000/1001) so the pill stays visible over it. */
.mm-overlay[b-keh0rieqex] {
    position: fixed;
    inset: 0;
    z-index: 999;
    background: rgba(0,0,0,.5);
    animation: mm-fade-b-keh0rieqex .2s ease;
}

/* Floating rounded card, above the tab bar, centred. z above the pill. */
.mm-menu[b-keh0rieqex] {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
    transform: translateX(-50%);
    z-index: 1002;
    box-sizing: border-box;
    width: min(370px, calc(100% - 32px));
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: #fff;
    border-radius: 25px;
    box-shadow: 0 14px 30px rgba(0,0,0,.16);
    animation: mm-up-b-keh0rieqex .28s cubic-bezier(.22, .61, .36, 1);
}

@keyframes mm-fade-b-keh0rieqex {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes mm-up-b-keh0rieqex {
    from { transform: translate(-50%, calc(100% + 92px)); opacity: 0; }
    to { transform: translate(-50%, 0); opacity: 1; }
}

.mm-item[b-keh0rieqex] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 56px;
    padding: 12px 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

/* 32px box holding a 24px glyph (Figma "Icon Container"). The SVGs are exported with
   preserveAspectRatio="none" and width/height 100%, so both axes must be pinned here or they
   stretch to fill whatever box they land in. */
.mm-item__icon[b-keh0rieqex] {
    flex: 0 0 32px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .mm-item__icon img[b-keh0rieqex] {
        width: 24px;
        height: 24px;
        display: block;
    }

/* The Health Network row's icon is the app icon bitmap, which the design rounds by 4px
   (node 2633:34622); the Vuesax line icons are transparent and need no clipping. */
.mm-item__icon img.mm-item__icon--rounded[b-keh0rieqex] {
    border-radius: 4px;
    object-fit: cover;
}

.mm-item__label[b-keh0rieqex] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.5px;
    color: #26364a;
}

.mm-item__arrow[b-keh0rieqex] {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #eceff1;
}

    .mm-item__arrow img[b-keh0rieqex] {
        width: 16px;
        height: 16px;
        display: block;
    }

.mm-divider[b-keh0rieqex] {
    height: 1px;
    background: #edeef1;
}

.mm-item:focus-visible[b-keh0rieqex] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
    border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
    .mm-overlay[b-keh0rieqex],
    .mm-menu[b-keh0rieqex] {
        animation: none;
    }
}
/* _content/VisitPlus.Shared/Layout/HomeLayout.razor.rz.scp.css */
/* ============================================================
   HomeLayout — desktop framing for the signed-in app shell.

   Every page under this layout already draws itself as a centred 600px
   column (`max-width: 600px; margin: 0 auto` on its own *-shell). On a
   phone that column IS the screen; on a desktop browser it used to float
   on the flat #f4f6f8 body, which read as a stretched mobile app.

   Below 768px NOTHING here applies — the backdrop is display:none and the
   column keeps its existing look, so phones and the MAUI WebView are
   untouched. Above it the column is lifted off the same hero photo the
   auth screens use (Welcome / Create account / Select care network), so
   signing in doesn't drop the user onto a different-looking site.
   ============================================================ */

.vp-appframe[b-lly5mbk2lz] {
    position: relative;
}

/* Full-bleed hero backdrop. Fixed so it stays put while the page scrolls,
   z-index:-1 so it sits behind the app column without catching pointer
   events. The photo is the Welcome hero, dimmed to navy — enough that the
   app column is unambiguously the thing in focus, light enough that it
   still reads as the same room the user saw on the way in. */
.vp-appframe__bg[b-lly5mbk2lz] {
    display: none;
}

@media (min-width: 768px) {
    .vp-appframe__bg[b-lly5mbk2lz] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background-color: #22364c; /* brand navy — shows through while the photo loads */
        background-image:
            linear-gradient(180deg, rgba(24, 38, 55, 0.45) 0%, rgba(24, 38, 55, 0.80) 100%),
            url('images/nexa-welcome-bg-wide.jpg');
        background-repeat: no-repeat;
        /* Same crop/anchor as the Welcome hero — see the note in Welcome.razor.css. */
        background-position: center, center 35%;
        background-size: cover, cover;
    }

    /* Lift the page column (the routed page's own *-shell) off the backdrop.
       `.pt-anim > *` is the routed page's root element — see PageTransition. */
    .vp-appframe[b-lly5mbk2lz]  .pt-anim > * {
        box-shadow: 0 18px 60px rgba(8, 18, 30, 0.45);
    }
}
/* _content/VisitPlus.Shared/Layout/MainLayout.razor.rz.scp.css */
.page[b-ky05fwi3lk] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ky05fwi3lk] {
    flex: 1;
}
.sidebar[b-ky05fwi3lk] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
[b-ky05fwi3lk] .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 22px) calc(100% - 24px);
}
.top-row[b-ky05fwi3lk] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-ky05fwi3lk]  a, .top-row[b-ky05fwi3lk]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-ky05fwi3lk]  a:hover, .top-row[b-ky05fwi3lk]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-ky05fwi3lk]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-ky05fwi3lk] {
        justify-content: space-between;
    }

    .top-row[b-ky05fwi3lk]  a, .top-row[b-ky05fwi3lk]  .btn-link {
        margin-left: 0;
    }
}

.page[b-ky05fwi3lk] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ky05fwi3lk] {
    flex: 1;
}
.sidebar[b-ky05fwi3lk] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
[b-ky05fwi3lk] .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 22px) calc(100% - 24px);
}
.top-row[b-ky05fwi3lk] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-ky05fwi3lk]  a, .top-row[b-ky05fwi3lk]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-ky05fwi3lk]  a:hover, .top-row[b-ky05fwi3lk]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-ky05fwi3lk]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-ky05fwi3lk] {
        justify-content: space-between;
    }

    .top-row[b-ky05fwi3lk]  a, .top-row[b-ky05fwi3lk]  .btn-link {
        margin-left: 0;
    }
}

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

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

    .top-row[b-ky05fwi3lk] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-ky05fwi3lk]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ky05fwi3lk], article[b-ky05fwi3lk] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* _content/VisitPlus.Shared/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-ewo44hbrch] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px 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-ewo44hbrch] {
    background-color: rgba(255, 255, 255, 0.5);
}

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

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

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

.bi-house-door-fill-nav-menu[b-ewo44hbrch] {
    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-ewo44hbrch] {
    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-ewo44hbrch] {
    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-ewo44hbrch] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

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

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

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

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

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

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

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

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

    .nav-scrollable[b-ewo44hbrch] {
        /* 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/VisitPlus.Shared/Layout/NoTabLayout.razor.rz.scp.css */
.page[b-q3gk2zevgb] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-q3gk2zevgb] {
    flex: 1;
}
.sidebar[b-q3gk2zevgb] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}
[b-q3gk2zevgb] .mud-badge.mud-badge-top.right.mud-badge-overlap {
    inset: auto auto calc(100% - 22px) calc(100% - 24px);
}
.top-row[b-q3gk2zevgb] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-q3gk2zevgb]  a, .top-row[b-q3gk2zevgb]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-q3gk2zevgb]  a:hover, .top-row[b-q3gk2zevgb]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-q3gk2zevgb]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-q3gk2zevgb] {
        justify-content: space-between;
    }

    .top-row[b-q3gk2zevgb]  a, .top-row[b-q3gk2zevgb]  .btn-link {
        margin-left: 0;
    }
}

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

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

    .top-row[b-q3gk2zevgb] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-q3gk2zevgb]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-q3gk2zevgb], article[b-q3gk2zevgb] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}
/* _content/VisitPlus.Shared/Layout/PageTransition.razor.rz.scp.css */
/* Native-style page transitions for the mobile shells. The clip element hides horizontal
   overflow while a page slides in; the anim element carries the transform. fill-mode is
   "backwards" (NOT forwards/both) on purpose: after the animation ends the element reverts
   to no transform, so it stops being a containing block for position:fixed descendants
   (a lingering transform would pin them to this wrapper). The direction class is present at
   first paint (set in markup by the component), so the incoming page never paints at its
   resting position first — no flash.

   The -a / -b pairs are identical; the component alternates between them so the
   animation-name changes on every navigation and the animation restarts on the reused
   element (two forward navs in a row would otherwise not replay). */
.pt-clip[b-d9an6dm0aq] {
    overflow-x: hidden;
}

.pt-anim[b-d9an6dm0aq] {
    /* no transform at rest — see note above */
}

.pt-fwd-a[b-d9an6dm0aq] {
    animation: pt-in-right-a-b-d9an6dm0aq .3s cubic-bezier(.22, .61, .36, 1) backwards;
}

.pt-fwd-b[b-d9an6dm0aq] {
    animation: pt-in-right-b-b-d9an6dm0aq .3s cubic-bezier(.22, .61, .36, 1) backwards;
}

.pt-back-a[b-d9an6dm0aq] {
    animation: pt-in-left-a-b-d9an6dm0aq .3s cubic-bezier(.22, .61, .36, 1) backwards;
}

.pt-back-b[b-d9an6dm0aq] {
    animation: pt-in-left-b-b-d9an6dm0aq .3s cubic-bezier(.22, .61, .36, 1) backwards;
}

@keyframes pt-in-right-a-b-d9an6dm0aq {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes pt-in-right-b-b-d9an6dm0aq {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

@keyframes pt-in-left-a-b-d9an6dm0aq {
    from { transform: translateX(-22%); } /* previous screen eases in from the left, iOS-style */
    to { transform: translateX(0); }
}

@keyframes pt-in-left-b-b-d9an6dm0aq {
    from { transform: translateX(-22%); }
    to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .pt-fwd-a[b-d9an6dm0aq],
    .pt-fwd-b[b-d9an6dm0aq],
    .pt-back-a[b-d9an6dm0aq],
    .pt-back-b[b-d9an6dm0aq] {
        animation: none;
    }
}
/* _content/VisitPlus.Shared/Pages/About.razor.rz.scp.css */
/* Plain wrapper elements carry the scope attribute directly (no ::deep). */
.about-page[b-r9w8ejo9uo] {
    position: relative;
    background-color: #eceff1;
    min-height: 100vh;
}

.about-content[b-r9w8ejo9uo] {
    /* Top padding clears the absolute AuthBackButton (notch offset + button height). */
    padding: max(100px, calc(70px + env(safe-area-inset-top, 0px))) 20px 32px 20px;
    /* Same capped-content trick as the auth screens: the page tint reaches the viewport edges
       while the text stays in a readable column. Below 600px this is the plain 20px gutter. */
    padding-inline: max(20px, calc((100% - 600px) / 2));
}

/* Header: "About" + VisitPlus logo */
[b-r9w8ejo9uo] .about-header {
    margin-top: 8px;
    margin-bottom: 40px;
}

[b-r9w8ejo9uo] .about-title {
    font-family: 'Poppins', var(--vp-font-family);
    font-size: 24px;
    line-height: 1.5;
    font-weight: 400;
    margin-bottom: 2px;
}

[b-r9w8ejo9uo] .about-logo {
    width: 222px;
    height: 50px;
    max-width: 100%;
}

/* Body description */
[b-r9w8ejo9uo] .about-body {
    color: #272c34;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: 0.4px;
    white-space: pre-wrap;
    margin-bottom: 20px;
}

/* Key features */
[b-r9w8ejo9uo] .about-features-title {
    color: #272c34;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.15px;
    margin-bottom: 16px;
}

[b-r9w8ejo9uo] .about-features {
    margin-bottom: 32px;
}

[b-r9w8ejo9uo] .feature-icon-container {
    background-color: rgba(199, 214, 230, 0.5);
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
}

/* Font Awesome feature glyph (24px navy, matches Figma). Plain selector: the <i> is authored in
   About.razor so it carries the scope attribute directly (no ::deep needed). */
.feature-fa-icon[b-r9w8ejo9uo] {
    font-size: 24px;
    line-height: 1;
    color: #26364a;
}

[b-r9w8ejo9uo] .feature-text {
    color: #272c34;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.43;
    letter-spacing: 0.15px;
}

/* Version footer */
[b-r9w8ejo9uo] .about-version {
    margin-top: 8px;
}

[b-r9w8ejo9uo] .about-version-text {
    color: rgba(0, 0, 0, 0.54);
    font-size: 14px;
    letter-spacing: 0.1px;
}
/* _content/VisitPlus.Shared/Pages/AcceptTerms.razor.rz.scp.css */
/* ============================================================
   Account Recovery Step 3 — Accept Terms & Conditions (Figma 2317:23990).
   Light shell + sparkle, step-progress header, expandable T&C section cards,
   accept checkbox (2 links) + sticky Accept-and-continue button.
   ============================================================ */
.tc-screen[b-5md9qieshm] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(125px, calc(95px + env(safe-area-inset-top, 0px))) 20px calc(32px + env(safe-area-inset-bottom, 0px));
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 600px while the background reaches the
       real viewport edges. Below 600px this resolves to the 20px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    overflow-x: hidden;
}

.tc-corner[b-5md9qieshm] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

.tc-content[b-5md9qieshm] {
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.tc-title[b-5md9qieshm] {
    margin: 24px 0 24px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.04px;
    color: #297381;
}

.tc-instruction[b-5md9qieshm] {
    margin: 0 0 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.6px;
    color: #676767;
}

/* Expandable section cards ------------------------------------------------ */
/* The accordion itself lives in Pages/Components/TermsAccordion.razor.css — shared with
   /registration-terms. */
.tc-cards-slot[b-5md9qieshm] {
    margin-bottom: 24px;
}

/* Accept checkbox + links ------------------------------------------------- */
.tc-terms[b-5md9qieshm] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 24px;
}

[b-5md9qieshm] .tc-check {
    margin: 0;
    padding: 0;
}

.tc-terms-text[b-5md9qieshm] {
    flex: 1;
    min-width: 0;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.2px;
    color: #000000;
    padding-top: 1px;
}

[b-5md9qieshm] .tc-link {
    color: #1d64d8 !important;
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
}

[b-5md9qieshm] .tc-link:hover {
    text-decoration: underline;
}

/* Sticky footer button ---------------------------------------------------- */
[b-5md9qieshm] .tc-submit {
    height: 52px;
    margin-top: 8px;
    border-radius: 14px;
    text-transform: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
    /* Fixed VisitPlus colours, not --vp-brand-*: this step runs before the health network is
       picked, so there is no network in play. See --vp-visitplus-primary in app.css. */
    background-color: var(--vp-visitplus-primary) !important;
    color: #ffffff !important;
}

[b-5md9qieshm] .tc-submit:hover {
    background-color: #1b2c3f !important;
}

[b-5md9qieshm] .tc-submit:disabled,
[b-5md9qieshm] .tc-submit.mud-button-disabled {
    background-color: var(--vp-visitplus-primary) !important;
    color: #ffffff !important;
    opacity: 0.6;
}
/* _content/VisitPlus.Shared/Pages/AccountSettings.razor.rz.scp.css */
/* ============================================================
   My account (Figma 2419-29731). Prefix: ma-
   Navy patterned header + centred avatar/name + white rounded
   rows (nav + toggles) + orange outlined "Sign out".
   ============================================================ */

.ma-shell[b-6e6uxtrp6c] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* NB: no min-height:100vh — it beats dvh when the URL bar shows */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.ma-hdr[b-6e6uxtrp6c] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 20px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.28) 100%);
}

.ma-hdr__pattern[b-6e6uxtrp6c] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.ma-back[b-6e6uxtrp6c] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: -4px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.6px;
    cursor: pointer;
}

/* ===== Scroller ===== */
.ma-scroller[b-6e6uxtrp6c] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 28px 20px calc(env(safe-area-inset-bottom, 0px) + 24px);
    background: #f4f6f8;
}

    .ma-scroller[b-6e6uxtrp6c]::-webkit-scrollbar {
        display: none;
    }

/* ===== Profile ===== */
.ma-profile[b-6e6uxtrp6c] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    margin-bottom: 36px;
}

.ma-avatar[b-6e6uxtrp6c] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    border-radius: 1000px;
    background: #fff;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
    overflow: hidden; /* clip the person's shoulders to the circle, per Figma */
}

.ma-avatar__img[b-6e6uxtrp6c] {
    width: 100px;
    height: 100px;
}

.ma-name[b-6e6uxtrp6c] {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -1.04px;
    color: #000;
    text-align: center;
}

/* ===== Menu list ===== */
.ma-list[b-6e6uxtrp6c] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ma-row[b-6e6uxtrp6c] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 72px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #f4f6f8;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.ma-row--static[b-6e6uxtrp6c] {
    cursor: default;
}

.ma-row__left[b-6e6uxtrp6c] {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.ma-row__icon[b-6e6uxtrp6c] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
}

.ma-row__label[b-6e6uxtrp6c] {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: #26364a;
}

/* ===== Toggle (Figma 2274:15333 / green ON 2419:29767) ===== */
.ma-toggle[b-6e6uxtrp6c] {
    display: flex;
    align-items: center;
    /* Position the knob via justify-content (flex layout), NOT transform/margin: WKWebView (iOS)
       doesn't reliably repaint a moved thumb, leaving it stranded mid-track. justify-content is a
       pure layout change that always reflows — OFF = flex-start (left), ON = flex-end (right).
       Mirrors the Figma toggle (items-start / items-end). */
    justify-content: flex-start;
    flex: 0 0 auto;
    width: 48px;
    height: 24px;
    padding: 2px;
    box-sizing: border-box;
    border: none;
    border-radius: 999px;
    background: #d8dbdf;
    box-shadow: 0 1.5px 1.5px rgba(0,0,0,.07);
    cursor: pointer;
    transition: background .2s ease;
}

.ma-toggle--on[b-6e6uxtrp6c] {
    background: #00c048;
    justify-content: flex-end;
}

.ma-toggle__knob[b-6e6uxtrp6c] {
    flex: 0 0 auto;
    width: 28px;
    height: 20px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1.5px 3px rgba(0,0,0,.07);
}

.ma-toggle:disabled[b-6e6uxtrp6c] {
    opacity: .6;
    cursor: not-allowed;
}

.ma-toggle:focus-visible[b-6e6uxtrp6c] {
    outline: 2px solid var(--vp-brand-secondary);
    outline-offset: 2px;
}

/* ===== Sign out ===== */
.ma-signout[b-6e6uxtrp6c] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    margin-top: 36px;
    padding: 12px 20px;
    background: none;
    border: 1px solid #c74307;
    border-radius: 14px;
    color: #c74307;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
    font-family: inherit;
}

.ma-signout__icon[b-6e6uxtrp6c] {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

/* ===== Focus visibility ===== */
.ma-back:focus-visible[b-6e6uxtrp6c],
.ma-row:focus-visible[b-6e6uxtrp6c],
.ma-signout:focus-visible[b-6e6uxtrp6c] {
    outline: 2px solid var(--vp-brand-secondary);
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/AddMyselfAsPatient.razor.rz.scp.css */
/* ============================================================
   Add myself as a patient (Figma 2628-32008).
   Prefix: amp-  Per-hospital header, blue note, one white form
   card, T&C checkbox, sticky primary action. Field styling is
   shared with the /link-patient form (lp-).
   ============================================================ */

.amp-shell[b-m5rcw8cf6x] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.amp-hdr[b-m5rcw8cf6x] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}

.amp-hdr__pattern[b-m5rcw8cf6x] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.amp-back[b-m5rcw8cf6x] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin-left: -6px;
    border: none;
    background: none;
    cursor: pointer;
}

.amp-hdr__title[b-m5rcw8cf6x] {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
    text-align: left;
}

/* ===== Scroller ===== */
.amp-scroller[b-m5rcw8cf6x] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f4f6f8;
}

    .amp-scroller[b-m5rcw8cf6x]::-webkit-scrollbar {
        display: none;
    }

.amp-body[b-m5rcw8cf6x] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* bottom padding clears the sticky action bar */
    padding: 16px 12px calc(env(safe-area-inset-bottom, 0px) + 96px);
}

/* ===== Info banner ===== */
.amp-notify[b-m5rcw8cf6x] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 12px 10px;
    background: #ddf4ff;
    border: 1px solid #bfd7fe;
    border-radius: 12px;
}

.amp-notify__text[b-m5rcw8cf6x] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.2px;
    /* WCAG AA (1.4.3): blue/700 #1d64d8 on #ddf4ff = 4.8:1; blue/500 #3b82f6 was 3.23:1. */
    color: #1d64d8;
}

/* ===== Submit error ===== */
.amp-alert[b-m5rcw8cf6x] {
    padding: 10px 12px;
    background: #fdecec;
    border: 1px solid #f3b4b4;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.2px;
    color: #c5221f;
}

/* ===== Section ===== */
.amp-section[b-m5rcw8cf6x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.amp-section__title[b-m5rcw8cf6x] {
    margin: 0;
    padding: 0 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.2px;
    color: #222328;
}

.amp-card[b-m5rcw8cf6x] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 16px 20px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ===== Fields ===== */
.amp-field[b-m5rcw8cf6x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.amp-label-row[b-m5rcw8cf6x] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
}

.amp-label[b-m5rcw8cf6x] {
    padding: 2px 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.4px;
    color: #060606;
}

.amp-label-row .amp-label[b-m5rcw8cf6x] {
    padding: 0;
}

.amp-help[b-m5rcw8cf6x] {
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.amp-input[b-m5rcw8cf6x] {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 12px 10px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.3;
    color: #0e0f0c;
}

    .amp-input[b-m5rcw8cf6x]::placeholder {
        color: #6b7280;
        font-weight: 600;
    }

    .amp-input:focus-visible[b-m5rcw8cf6x] {
        outline: none;
        border-color: #2570eb;
        box-shadow: 0 0 0 3px rgba(37,112,235,.18);
    }

.amp-input--error[b-m5rcw8cf6x] {
    border-color: #c74307;
}

/* iOS WKWebView renders input[type=date] as a NATIVE control, unlike desktop Safari/Chrome: it
   centres its value, adds its own internal padding, and grows past the declared height, so the DOB
   field ends up taller than the text fields beside it with the date floating in the middle.
   Resetting the appearance hands the box model back to us; the value itself lives in a shadow
   pseudo-element, so text-align on the input alone does nothing — ::-webkit-date-and-time-value
   is what actually moves it left. min-height keeps the row from collapsing while the value is
   empty (a date input has no placeholder — the attribute is ignored on every browser). */
.amp-input[type="date"][b-m5rcw8cf6x] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    text-align: left;
}

    .amp-input[type="date"][b-m5rcw8cf6x]::-webkit-date-and-time-value {
        text-align: left;
        margin: 0;
        min-height: 1.3em;
    }

    .amp-input[type="date"][b-m5rcw8cf6x]::-webkit-datetime-edit {
        padding: 0;
    }

/* Placeholder for the empty date field. A date input ignores the placeholder attribute, so the hint
   is a span laid over the box (pointer-events:none, so taps still reach the input and open the
   picker). While it shows, the input's own empty rendering has to be suppressed or the two collide:
   desktop Chrome/Firefox draw their own "dd/mm/yyyy" in the value area, iOS draws nothing.
   color:transparent covers the engines without the -webkit- shadow parts; the pseudo-element rule
   covers WebKit/Blink, whose value text ignores the input's own colour. */
.amp-datefield[b-m5rcw8cf6x] {
    position: relative;
}

.amp-input--empty[b-m5rcw8cf6x] {
    color: transparent;
}

    .amp-input--empty[b-m5rcw8cf6x]::-webkit-datetime-edit {
        opacity: 0;
    }

.amp-datefield__hint[b-m5rcw8cf6x] {
    position: absolute;
    top: 50%;
    left: 11px; /* input padding-left + 1px border */
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.3;
    color: #6b7280; /* matches .amp-input::placeholder */
}

/* ===== Facility select ===== */
.amp-select[b-m5rcw8cf6x] {
    position: relative;
    display: flex;
    align-items: center;
}

.amp-select__input[b-m5rcw8cf6x] {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 12px 36px 12px 10px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.3;
    color: #0e0f0c;
    /* the chevron is drawn separately to match Figma's icon */
    -webkit-appearance: none;
    appearance: none;
}

    /* "Select facility" reads as placeholder grey until a real option is chosen. */
    .amp-select__input--placeholder[b-m5rcw8cf6x] {
        color: #6b7280;
    }

    .amp-select__input:focus-visible[b-m5rcw8cf6x] {
        outline: none;
        border-color: #2570eb;
        box-shadow: 0 0 0 3px rgba(37,112,235,.18);
    }

[b-m5rcw8cf6x] .amp-select__chevron {
    position: absolute;
    right: 10px;
    pointer-events: none;
}

/* ===== Terms & Conditions consent (Figma 2628-32440) ===== */
.amp-terms[b-m5rcw8cf6x] {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 0 6px;
    cursor: pointer;
}

.amp-terms__box[b-m5rcw8cf6x] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    /* Blue/600, the design-system checked fill (342:7481) — it used to be the brand primary, which
       the health network re-themes, so this one box changed colour per hospital. A native input can
       only colour the tick, not the unchecked outline: use .vp-check on a MudCheckBox (see app.css)
       for exact parity with the other consent screens. */
    accent-color: #2570eb;
    cursor: pointer;
}

.amp-terms__text[b-m5rcw8cf6x] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    letter-spacing: -.2px;
    color: #000;
}

.amp-terms__link[b-m5rcw8cf6x] {
    color: #1d64d8;
    text-decoration: none;
}

    .amp-terms__link:hover[b-m5rcw8cf6x] {
        text-decoration: underline;
    }

.amp-terms__box:focus-visible[b-m5rcw8cf6x],
.amp-terms__link:focus-visible[b-m5rcw8cf6x] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}

/* ===== Sticky action bar ===== */
.amp-actions[b-m5rcw8cf6x] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: #fff;
    box-shadow: 0 -8px 20px rgba(0,0,0,.06);
}

.amp-btn-primary[b-m5rcw8cf6x] {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 14px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

    .amp-btn-primary:disabled[b-m5rcw8cf6x] {
        opacity: .6;
        cursor: default;
    }

    .amp-btn-primary:not(:disabled):hover[b-m5rcw8cf6x] {
        background: #1e2b3c;
    }

.amp-back:focus-visible[b-m5rcw8cf6x],
.amp-help:focus-visible[b-m5rcw8cf6x],
.amp-btn-primary:focus-visible[b-m5rcw8cf6x] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}

/* Field-level error under the date row. The page's .amp-alert is for submit failures; a bad DOB has to
   be explained beside the field, otherwise the CTA just sits disabled with no reason given. */
.amp-fielderr[b-m5rcw8cf6x] {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.2px;
    color: #c5221f;
}
/* _content/VisitPlus.Shared/Pages/AddNextOfKin.razor.rz.scp.css */
/* ============================================================
   Add Next of Kin (Figma 815-35920 / 972-7508 / 856-37210).
   Prefix: ak-  Per-hospital teal header (back + title), blue
   info banner, three required fields, sticky primary button.
   ============================================================ */

.ak-shell[b-cnl0h6qfce] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* no min-height:100vh — it beats dvh when the URL bar shows, pushing the bar off-screen */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.ak-hdr[b-cnl0h6qfce] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}

.ak-hdr__pattern[b-cnl0h6qfce] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.ak-back[b-cnl0h6qfce] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin-left: -6px;
    border: none;
    background: none;
    cursor: pointer;
}

.ak-hdr__title[b-cnl0h6qfce] {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}

/* ===== Scroller ===== */
.ak-scroller[b-cnl0h6qfce] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f4f6f8;
}

    .ak-scroller[b-cnl0h6qfce]::-webkit-scrollbar {
        display: none;
    }

.ak-body[b-cnl0h6qfce] {
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ===== Info banner ===== */
.ak-notify[b-cnl0h6qfce] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 12px 10px;
    background: #ddf4ff;
    border: 1px solid #bfd7fe;
    border-radius: 12px;
}

.ak-notify__text[b-cnl0h6qfce] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.2px;
    /* WCAG AA (1.4.3): blue/700 #1d64d8 on #ddf4ff = 4.8:1; blue/500 #3b82f6 was 3.23:1. */
    color: #1d64d8;
}

/* ===== Fields ===== */
.ak-fields[b-cnl0h6qfce] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ak-field[b-cnl0h6qfce] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ak-field__label[b-cnl0h6qfce] {
    padding: 0 4px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.4px;
    color: #060606;
}

.ak-field__input[b-cnl0h6qfce] {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 12px 10px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.3;
    color: #0e0f0c;
}

    .ak-field__input[b-cnl0h6qfce]::placeholder {
        color: #6b7280;
        font-weight: 600;
    }

    .ak-field__input:focus-visible[b-cnl0h6qfce] {
        outline: none;
        border-color: #2570eb;
        box-shadow: 0 0 0 3px rgba(37,112,235,.18);
    }

    .ak-field__input--error[b-cnl0h6qfce] {
        border-color: #c74307;
    }

    .ak-field__input--error:focus-visible[b-cnl0h6qfce] {
        border-color: #c74307;
        box-shadow: 0 0 0 3px rgba(199,67,7,.18);
    }

.ak-field__error[b-cnl0h6qfce] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: #c74307;
}

/* ===== Sticky bottom action bar ===== */
.ak-actions[b-cnl0h6qfce] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: #f4f6f8;
}

.ak-btn-primary[b-cnl0h6qfce] {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 14px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

    .ak-btn-primary:disabled[b-cnl0h6qfce] {
        opacity: .5;
        cursor: default;
    }

    .ak-btn-primary:not(:disabled):hover[b-cnl0h6qfce] {
        background: #1e2b3c;
    }

.ak-back:focus-visible[b-cnl0h6qfce],
.ak-btn-primary:focus-visible[b-cnl0h6qfce] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/AppointmentDetail.razor.rz.scp.css */
/* ============================================================
   Appointment Detail (Figma 1765-21361 + states). Prefix: dt-
   Blue per-hospital header + Details/FAQs tabs + info card +
   instructions + notes, with a sticky 2-button bottom bar.
   ============================================================ */

.dt-shell[b-fkvwy19xnd] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* NB: no min-height:100vh — it beats dvh when the URL bar shows and pushes the sticky bar off-screen */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.dt-hdr[b-fkvwy19xnd] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.28) 100%);
}

.dt-hdr__pattern[b-fkvwy19xnd] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.dt-back[b-fkvwy19xnd] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -.5px;
    cursor: pointer;
}

/* ===== Tabs ===== */
.dt-tabs[b-fkvwy19xnd] {
    flex: 0 0 auto;
    display: flex;
    gap: 24px;
    padding: 0 16px;
    background: #fff;
    border-bottom: 1px solid #edeef1;
}

.dt-tab[b-fkvwy19xnd] {
    position: relative;
    padding: 14px 0;
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 600;
    color: #8e95a2;
    cursor: pointer;
}

.dt-tab--active[b-fkvwy19xnd] {
    color: var(--vp-brand-primary);
}

    .dt-tab--active[b-fkvwy19xnd]::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -1px;
        height: 2px;
        background: var(--vp-brand-primary);
    }

/* ===== Scroller ===== */
.dt-scroller[b-fkvwy19xnd] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f4f6f8;
}

    .dt-scroller[b-fkvwy19xnd]::-webkit-scrollbar {
        display: none;
    }

.dt-body[b-fkvwy19xnd] {
    padding: 16px;
}

/* ===== Hospital / status / meta ===== */
.dt-hospital[b-fkvwy19xnd] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.dt-hospital__logo[b-fkvwy19xnd] {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,.12);
}

    .dt-hospital__logo img[b-fkvwy19xnd] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.dt-hospital__text[b-fkvwy19xnd] {
    display: flex;
    flex-direction: column;
}

.dt-hospital__label[b-fkvwy19xnd] {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
}

.dt-hospital__name[b-fkvwy19xnd] {
    font-size: 18px;
    font-weight: 700;
    color: #26364a;
    letter-spacing: -.3px;
}

.dt-chip[b-fkvwy19xnd] {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 8px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.dt-chip--ok[b-fkvwy19xnd] {
    background: #d5ffe6;
    border-color: #70ffab;
    color: #00963c;
}

.dt-chip--updated[b-fkvwy19xnd] {
    background: #ff9537;
    color: #26364a; /* dark navy on orange = ~5.6:1, passes WCAG AA (white was 2.19:1) */
    font-weight: 700;
}

.dt-meta[b-fkvwy19xnd] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 15px;
    font-weight: 600;
    color: #3d404a;
}

/* ===== Info card ===== */
.dt-card[b-fkvwy19xnd] {
    margin-top: 16px;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 2px 10px rgba(16,24,40,.06);
}

.dt-notify[b-fkvwy19xnd] {
    background: #ddf4ff;
    border: 1px solid #bfd7fe;
    /* WCAG AA (1.4.3): blue/700 #1d64d8 on #ddf4ff = 4.8:1; blue/500 #3b82f6 was 3.23:1. */
    color: #1d64d8;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* The stub itself is VpTicketStub (2139:24951) and brings its own look; this
   wrapper only spaces it off the field list below. A wrapper rather than a
   ::deep override because both rules would carry the same specificity and the
   winner would come down to scoped-bundle order. */
.dt-ticket[b-fkvwy19xnd] {
    margin-bottom: 16px;
}

.dt-field__label[b-fkvwy19xnd] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

.dt-field__value[b-fkvwy19xnd] {
    display: block;
    margin-top: 2px;
    font-size: 16px;
    font-weight: 700;
    color: #0e0f0c;
}

.dt-field__value--link[b-fkvwy19xnd] {
    color: #2570eb;
}

.dt-field--row[b-fkvwy19xnd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.dt-field__col[b-fkvwy19xnd] {
    flex: 1 1 auto;
    min-width: 0;
}

.dt-divider[b-fkvwy19xnd] {
    height: 1px;
    background: #edeef1;
    margin: 14px 0;
}

.dt-doc-badge[b-fkvwy19xnd] {
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: #d5ffe6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dt-doc-badge__icon[b-fkvwy19xnd] {
    width: 24px;
    height: 24px;
    background: var(--vp-brand-secondary); /* teal stethoscope via CSS mask */
    -webkit-mask: url('images/stethoscope.svg') center / contain no-repeat;
    mask: url('images/stethoscope.svg') center / contain no-repeat;
}

/* Doctor badge tint per appointment mode (Figma telephone/telehealth variants). */
.dt-doc-badge--phone[b-fkvwy19xnd] {
    background: #ddf4ff; /* blue/100 — telephone */
}

.dt-doc-badge--video[b-fkvwy19xnd] {
    background: #fff5e5; /* orange/100 — telehealth */
}

.dt-outline-btn[b-fkvwy19xnd] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: var(--vp-brand-primary);
    white-space: nowrap;
    cursor: pointer;
}

.dt-status[b-fkvwy19xnd] {
    margin-top: 16px;
    background: #edeef1;
    color: #8e95a2;
    border-radius: 12px;
    padding: 14px;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
}

.dt-btn-fill[b-fkvwy19xnd] {
    display: block;
    width: 100%;
    margin-top: 16px;
    background: var(--vp-brand-secondary);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 15px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* ===== Sections + notes ===== */
.dt-h[b-fkvwy19xnd] {
    margin: 24px 0 8px;
    font-size: 18px;
    font-weight: 700;
    color: #0e0f0c;
    letter-spacing: -.3px;
}

.dt-p[b-fkvwy19xnd] {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.5;
}

.dt-notes[b-fkvwy19xnd] {
    box-sizing: border-box;
    width: 100%;
    min-height: 150px;
    margin-top: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    color: #0e0f0c;
    resize: vertical;
}

    .dt-notes[b-fkvwy19xnd]::placeholder {
        color: #8e95a2;
    }

.dt-spacer[b-fkvwy19xnd] {
    height: 110px;
}

/* ===== Sticky action bar ===== */
.dt-actions[b-fkvwy19xnd] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    gap: 12px;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
    background: #fff;
    border-top: 1px solid #edeef1;
    box-shadow: 0 -4px 16px rgba(16,24,40,.06);
}

.dt-btn-secondary[b-fkvwy19xnd],
.dt-btn-primary[b-fkvwy19xnd] {
    flex: 1 1 0;
    min-width: 0;
    padding: 15px 8px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    /* keep the 2-button bar to a single line on narrow phones (360px) + during font-swap */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dt-btn-secondary[b-fkvwy19xnd] {
    background: #edeef1;
    color: var(--vp-brand-primary);
}

.dt-btn-primary[b-fkvwy19xnd] {
    background: var(--vp-brand-primary);
    color: #fff;
}

/* ===== FAQs tab (Figma 1888-23277 collapsed / 1893-23618 expanded) ===== */
.dt-faq-list[b-fkvwy19xnd] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.dt-faq[b-fkvwy19xnd] {
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
    overflow: hidden;
}

.dt-faq__q[b-fkvwy19xnd] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 66px;
    padding: 12px 12px 12px 16px;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

.dt-faq__q-text[b-fkvwy19xnd] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
    line-height: 1.2;
    color: #1e55af;
}

.dt-faq__icon[b-fkvwy19xnd] {
    flex: 0 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #eceff1;
}

/* Answer panel — animate real height via the grid-template-rows 0fr↔1fr trick,
   so both expand and collapse are smooth without JS height measurement. The panel
   stays in the DOM (needed to animate the collapse); .dt-faq__a is hidden from
   assistive tech while closed via visibility, flipped after the collapse finishes. */
.dt-faq__panel[b-fkvwy19xnd] {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .28s ease;
}

.dt-faq--open .dt-faq__panel[b-fkvwy19xnd] {
    grid-template-rows: 1fr;
}

/* Clip element MUST NOT carry padding — padding is added on top of min-height:0 and
   would keep the collapsed grid track from shrinking to 0 (leaving a gap under each
   card). The padding + text live on the nested .dt-faq__a-text instead. */
.dt-faq__a[b-fkvwy19xnd] {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    transition: visibility 0s linear .28s;
}

.dt-faq--open .dt-faq__a[b-fkvwy19xnd] {
    visibility: visible;
    transition: visibility 0s;
}

.dt-faq__a-text[b-fkvwy19xnd] {
    margin: 0;
    padding: 0 12px 18px 16px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.3;
    color: #6b7280;
}

@media (prefers-reduced-motion: reduce) {
    .dt-faq__panel[b-fkvwy19xnd],
    .dt-faq__a[b-fkvwy19xnd] {
        transition: none;
    }
}

/* ===== Focus ===== */
.dt-back:focus-visible[b-fkvwy19xnd],
.dt-tab:focus-visible[b-fkvwy19xnd],
.dt-outline-btn:focus-visible[b-fkvwy19xnd],
.dt-btn-fill:focus-visible[b-fkvwy19xnd],
.dt-btn-secondary:focus-visible[b-fkvwy19xnd],
.dt-btn-primary:focus-visible[b-fkvwy19xnd],
.dt-faq__q:focus-visible[b-fkvwy19xnd],
.dt-notes:focus-visible[b-fkvwy19xnd] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}

.dt-faq__q:focus-visible[b-fkvwy19xnd] {
    outline-offset: -2px;
    border-radius: 16px;
}

/* Statuses the design's detail chip doesn't cover (Cancelled / Completed / Closed / not-yet-confirmed):
   reuse the tones already shipped on the appointment cards (VpApptCard .vpc__chip--*). */
.dt-chip--warn[b-fkvwy19xnd] {
    background: #fff7ed;
    border-color: #ffd9a8;
    color: #f05b06;
}

.dt-chip--muted[b-fkvwy19xnd] {
    background: #edeef1;
    border-color: #d8dbdf;
    color: #5b616e;
}

.dt-chip--dark[b-fkvwy19xnd] {
    background: #26364a;
    border-color: #26364a;
    color: #fff;
}

/* Load failure (no §93 design yet): sits where the fields would be. */
.dt-error[b-fkvwy19xnd] {
    margin-top: 12px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 12px;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #b42318;
}
/* _content/VisitPlus.Shared/Pages/Appointments.razor.rz.scp.css */
/* ============================================================
   Appointments page (Figma 1037-13523 + states). Prefix: ap-
   Self-contained shell: blue per-hospital header, Upcoming/Past
   segmented control, search + filter, card list, empty states,
   filter bottom sheet. Bottom nav = shared AppTabBar.
   ============================================================ */

.ap-shell[b-u13oxr7ikn] {
    position: relative;
    height: 100dvh;
    min-height: 100vh;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===================== Header ===================== */
.ap-hdr[b-u13oxr7ikn] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}

.ap-hdr__pattern[b-u13oxr7ikn] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.ap-hdr__bar[b-u13oxr7ikn] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
}

.ap-hdr__title[b-u13oxr7ikn] {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
}

.ap-hdr__actions[b-u13oxr7ikn] {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.ap-iconbtn[b-u13oxr7ikn] {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.2);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ap-iconbtn__glyph[b-u13oxr7ikn] {
    width: 20px;
    height: 20px;
}

/* Figma 2558-30922: 16px orange pill riding the bell's top-right corner. */
.ap-iconbtn__badge[b-u13oxr7ikn] {
    position: absolute;
    top: -4px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f05b06;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ===================== Toolbar ===================== */
.ap-toolbar[b-u13oxr7ikn] {
    flex: 0 0 auto;
    background: #f4f6f8;
    padding: 12px 16px 8px;
}

.ap-segment[b-u13oxr7ikn] {
    display: flex;
    background: #dcdfe7;
    border-radius: 999px;
    padding: 2px;
}

.ap-seg[b-u13oxr7ikn] {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    background: none;
    border-radius: 999px;
    padding: 10px 4px;
    color: #5b616e;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.ap-seg--active[b-u13oxr7ikn] {
    background: #fff;
    color: #0e0f0c;
    box-shadow: 0 1.5px 1.5px rgba(0,0,0,.07);
}

.ap-searchrow[b-u13oxr7ikn] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.ap-search[b-u13oxr7ikn] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
}

.ap-search__input[b-u13oxr7ikn] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: #0e0f0c;
}

    .ap-search__input[b-u13oxr7ikn]::placeholder {
        color: #8b909c;
        font-weight: 400;
    }

.ap-filter[b-u13oxr7ikn] {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.ap-filter--active[b-u13oxr7ikn] {
    background: var(--vp-brand-primary); /* active filter => filled navy pill (icon turns white) */
    border-color: var(--vp-brand-primary);
}

/* ===================== List ===================== */
.ap-scroller[b-u13oxr7ikn] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .ap-scroller[b-u13oxr7ikn]::-webkit-scrollbar {
        display: none;
    }

.ap-count[b-u13oxr7ikn] {
    padding: 4px 16px 8px;
    font-size: 16px;
    font-weight: 700;
    color: #0e0f0c;
    letter-spacing: -.2px;
}

.ap-list[b-u13oxr7ikn] {
    padding: 8px 16px 0;
}

.ap-bottom-space[b-u13oxr7ikn] {
    height: 96px;
}

/* ===================== Empty state ===================== */
.ap-empty[b-u13oxr7ikn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 318px;
    margin: 0 auto;
    padding-top: 76px;
    text-align: center;
}

.ap-empty__art[b-u13oxr7ikn] {
    position: relative;
    width: 172px;
    height: 172px;
    color: var(--vp-brand-secondary);
}

.ap-empty__doc[b-u13oxr7ikn] {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: auto;
    overflow: visible;
}

.ap-empty__badge[b-u13oxr7ikn] {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--vp-brand-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 3px rgba(255,255,255,.9), 0 4px 10px rgba(13,18,37,.25);
}

    .ap-empty__badge img[b-u13oxr7ikn] {
        width: 22px;
        height: 22px;
        display: block;
    }

.ap-empty__title[b-u13oxr7ikn] {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #26364a;
}

/* ===================== Filter bottom sheet ===================== */
.ap-sheet-overlay[b-u13oxr7ikn] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ap-sheet[b-u13oxr7ikn] {
    width: 100%;
    max-width: 600px;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
    animation: ap-sheet-up-b-u13oxr7ikn .25s ease;
}

@keyframes ap-sheet-up-b-u13oxr7ikn {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.ap-sheet__title[b-u13oxr7ikn] {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #0e0f0c;
    padding: 8px 0 14px;
}

/* collapsible filter section card */
.ap-fsec[b-u13oxr7ikn] {
    background: #fff;
    border: 1px solid #edeef1;
    border-radius: 16px;
    box-shadow: 0 2px 10px rgba(16,24,40,.05);
    margin-bottom: 12px;
    overflow: hidden;
}

.ap-fsec__head[b-u13oxr7ikn] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: #0e0f0c;
}

.ap-fsec__body[b-u13oxr7ikn] {
    padding: 0 16px 8px;
}

.ap-check[b-u13oxr7ikn] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    cursor: pointer;
}

.ap-check__box[b-u13oxr7ikn] {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    border: 2px solid #d8dbdf;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ap-check--on .ap-check__box[b-u13oxr7ikn] {
    background: #2570eb;
    border-color: #2570eb;
}

.ap-check__label[b-u13oxr7ikn] {
    font-size: 15px;
    font-weight: 600;
    color: #6b7280;
}

.ap-check--on .ap-check__label[b-u13oxr7ikn] {
    color: #0e0f0c;
}

.ap-sheet__actions[b-u13oxr7ikn] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.ap-btn-clear[b-u13oxr7ikn] {
    flex: 0 0 34%;
    padding: 14px;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    background: #fff;
    color: var(--vp-brand-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.ap-btn-apply[b-u13oxr7ikn] {
    flex: 1 1 auto;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* ===================== Focus + reduced motion ===================== */
.ap-seg:focus-visible[b-u13oxr7ikn],
.ap-filter:focus-visible[b-u13oxr7ikn],
.ap-iconbtn:focus-visible[b-u13oxr7ikn],
.ap-btn-apply:focus-visible[b-u13oxr7ikn],
.ap-btn-clear:focus-visible[b-u13oxr7ikn],
.ap-fsec__head:focus-visible[b-u13oxr7ikn],
.ap-check:focus-visible[b-u13oxr7ikn] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ap-sheet[b-u13oxr7ikn] {
        animation: none;
    }
}
/* _content/VisitPlus.Shared/Pages/CheckIn.razor.rz.scp.css */
/* ============================================================
   Check-in wizard (Figma 2470-28778 / 30048 / 30125 / 30837 /
   31230 → 2472-31457). Prefix: ci-
   Blue per-hospital header + scrollable body + sticky action bar.
   ============================================================ */

.ci-shell[b-azd6cafkar] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* NB: no min-height:100vh (see AppointmentDetail note) */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.ci-hdr[b-azd6cafkar] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 20px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.22) 100%);
}

.ci-hdr__glow[b-azd6cafkar] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.ci-back[b-azd6cafkar] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: -4px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -1px;
    cursor: pointer;
}

/* ===== Scroller ===== */
.ci-scroller[b-azd6cafkar] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f4f6f8;
}

    .ci-scroller[b-azd6cafkar]::-webkit-scrollbar {
        display: none;
    }

.ci-body[b-azd6cafkar] {
    padding: 22px 20px 0;
}

.ci-heading[b-azd6cafkar] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 28px;
}

.ci-title[b-azd6cafkar] {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.04px;
    color: #26364a;
}

.ci-subtitle[b-azd6cafkar] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.5px;
    color: #3d404a;
}

/* ===== Personal-details card ===== */
.ci-card[b-azd6cafkar] {
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 16px;
    padding: 12px 16px 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.ci-field[b-azd6cafkar] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 0;
}

.ci-field__label[b-azd6cafkar] {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    color: #6b7280;
}

.ci-field__value[b-azd6cafkar] {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.5px;
    color: #26364a;
}

.ci-field__divider[b-azd6cafkar] {
    height: 1px;
    background: #edeef1;
    margin: 14px 0;
}

/* ===== ATSI radio options ===== */
.ci-radios[b-azd6cafkar] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ci-radio[b-azd6cafkar] {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 16px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 16px;
    text-align: left;
    cursor: pointer;
}

.ci-radio--on[b-azd6cafkar] {
    background: #eff5ff;
    border: 2px solid #2570eb;
    /* keep the box the same size despite the thicker border */
    padding: 17px 15px;
}

.ci-radio__dot[b-azd6cafkar] {
    flex: 0 0 23px;
    box-sizing: border-box;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    border: 2px solid var(--vp-brand-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ci-radio--on .ci-radio__dot[b-azd6cafkar] {
    border-color: #2570eb;
}

    .ci-radio--on .ci-radio__dot[b-azd6cafkar]::after {
        content: "";
        width: 13px;
        height: 13px;
        border-radius: 50%;
        background: #2570eb;
    }

.ci-radio__label[b-azd6cafkar] {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: #5b616e;
}

.ci-radio--on .ci-radio__label[b-azd6cafkar] {
    color: #000;
}

.ci-spacer[b-azd6cafkar] {
    height: 120px;
}

/* ===== Sticky action bar ===== */
.ci-actions[b-azd6cafkar] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    gap: 12px;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 40px);
    background: #f4f6f8;
}

.ci-btn[b-azd6cafkar] {
    flex: 1 1 0;
    min-width: 0;
    height: 52px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
    white-space: nowrap;
}

.ci-btn--primary[b-azd6cafkar] {
    background: var(--vp-brand-primary);
    color: #fff;
}

.ci-btn--outline[b-azd6cafkar] {
    background: #fff;
    border: 1px solid #b6bac3;
    color: var(--vp-brand-primary);
}

.ci-btn--primary:disabled[b-azd6cafkar] {
    background: #a7adb8;
    cursor: default;
}

/* ===== Focus ===== */
.ci-back:focus-visible[b-azd6cafkar],
.ci-radio:focus-visible[b-azd6cafkar],
.ci-btn:focus-visible[b-azd6cafkar] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}

.ci-radio:focus-visible[b-azd6cafkar] {
    outline-offset: -2px;
}
/* _content/VisitPlus.Shared/Pages/Components/AddToCalendarSheet.razor.rz.scp.css */
/* "Add to calendar" bottom sheet (Figma 1833-20765). Prefix: atc- */
.atc-overlay[b-ilqop01lpb] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0, 0, 0, .5);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.atc-sheet[b-ilqop01lpb] {
    width: 100%;
    max-width: 402px;
    background: #f4f6f8;
    border-radius: 16px 16px 0 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    overflow: hidden;
    animation: atc-up-b-ilqop01lpb .25s ease;
}

@keyframes atc-up-b-ilqop01lpb {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.atc-list[b-ilqop01lpb] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.atc-row[b-ilqop01lpb] {
    display: flex;
    align-items: center;
    /* MudBlazor's global button reset sets justify-content:center — override it so the
       icon + label sit left-aligned per Figma (this rule declares no justify otherwise). */
    justify-content: flex-start;
    gap: 12px;
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    text-align: left;
}

.atc-row__icon[b-ilqop01lpb] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    overflow: hidden;
}

.atc-row__icon img[b-ilqop01lpb] {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Apple mark is smaller within its 32px slot in the design. */
.atc-row__icon--apple img[b-ilqop01lpb] {
    width: 26px;
    height: 26px;
}

.atc-row__label[b-ilqop01lpb] {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.5px;
    color: #26364a;
}

.atc-foot[b-ilqop01lpb] {
    display: flex;
    justify-content: center;
    padding: 8px 16px 0;
}

.atc-close[b-ilqop01lpb] {
    flex: 1 0 0;
    min-width: 120px;
    height: 52px;
    padding: 12px 20px;
    border: 1px solid #b6bac3;
    border-radius: 14px;
    background: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    color: var(--vp-brand-primary);
    cursor: pointer;
}

.atc-row:focus-visible[b-ilqop01lpb],
.atc-close:focus-visible[b-ilqop01lpb] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .atc-sheet[b-ilqop01lpb] {
        animation: none;
    }
}
/* _content/VisitPlus.Shared/Pages/Components/AppLoader.razor.rz.scp.css */
/* Branded loading indicator (Figma 2061:22667 full-page / 2055:14040 overlay).
   The sparkle pulses (opacity 1->0.6, scale 1->0.9, ~1.07s, alternating) per the Figma
   keyframe timeline. Fixed-positioned above everything, incl. the floating tab bar (z 1001).

   On web the app is a centred 960px column with #eee gutters (like SplashScreen), so the
   loader mirrors that frame instead of bleeding full-width — otherwise it reads as a
   landscape "welcome" band on desktop. */
.apl[b-rvmsxkloce] {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

/* ---- Full-page: opaque navy column on #eee gutters ---- */
.apl--fullpage[b-rvmsxkloce] {
    background: #eee; /* gutter — matches the app frame / SplashScreen */
}

/* ---- Overlay: translucent scrim + blur, fades in/out ---- */
.apl--overlay[b-rvmsxkloce] {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, visibility .25s ease;
}

.apl--overlay.apl--visible[b-rvmsxkloce] {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Centred phone-like column (= welcome / splash frame). */
.apl__frame[b-rvmsxkloce] {
    width: 100%;
    max-width: 960px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
}

.apl--fullpage .apl__frame[b-rvmsxkloce] {
    background: linear-gradient(180deg, #26364a 0%, #192637 100%);
}

.apl--overlay .apl__frame[b-rvmsxkloce] {
    background: rgba(0, 0, 0, 0.76);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.apl__inner[b-rvmsxkloce] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

.apl__spark[b-rvmsxkloce] {
    display: block;
    width: 120px;
    height: 120px;
    animation: apl-pulse-b-rvmsxkloce 1.072s cubic-bezier(0.5, 0, 0.5, 1) infinite alternate;
}

.apl__label[b-rvmsxkloce] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.4px;
    text-align: center;
    color: #ffffff;
}

@keyframes apl-pulse-b-rvmsxkloce {
    from { opacity: 1;  transform: scale(1); }
    to   { opacity: .6; transform: scale(.9); }
}

/* ---- Desktop (>=768px) --------------------------------------------------
   Both variants go full-bleed, matching SplashScreen and the Welcome hero. The
   960px column they used to draw was a phone frame stretched onto a desktop
   window: the full-page loader read as a navy slab in mid-screen, and the
   overlay scrim dimmed a 960px band while leaving the rest of the page bright.
   Phones keep the existing behaviour (the frame already fills the screen). */
@media (min-width: 768px) {
    .apl--fullpage[b-rvmsxkloce] {
        background-color: #22364c;
        background-image:
            linear-gradient(180deg, rgba(24, 38, 55, 0.55) 0%, rgba(24, 38, 55, 0.85) 100%),
            url('images/nexa-welcome-bg-wide.jpg');
        background-repeat: no-repeat;
        /* Same crop/anchor as the Welcome hero — see the note in Welcome.razor.css. */
        background-position: center, center 35%;
        background-size: cover, cover;
    }

    .apl__frame[b-rvmsxkloce] {
        max-width: none;
    }

    /* The photo on .apl--fullpage is the background now — drop the frame's own gradient. */
    .apl--fullpage .apl__frame[b-rvmsxkloce] {
        background: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .apl__spark[b-rvmsxkloce] { animation: none; }
    .apl--overlay[b-rvmsxkloce] { transition: none; }
}
/* _content/VisitPlus.Shared/Pages/Components/AuthBackButton.razor.rz.scp.css */
/* The host div is just a scope anchor + 0-size flow placeholder; the button is absolute. */
.auth-back-host[b-e67taxl3w7] {
    display: contents;
}

[b-e67taxl3w7] .auth-back {
    position: absolute;
    top: max(50px, calc(20px + env(safe-area-inset-top, 0px)));
    left: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    background-color: #ffffff;
    border-radius: 50%;
    /* Fixed, not per-network: this button belongs to the auth/onboarding flow, which runs before a
       health network is in play. See --vp-visitplus-primary in app.css. */
    color: var(--vp-visitplus-primary);
    box-shadow: 0 1px 3px rgba(34, 54, 76, 0.12);
}

/* Only darken on real hover (desktop). On touch the :hover state can stick after a tap,
   which made the white circle look greyed on iOS. */
@media (hover: hover) {
    [b-e67taxl3w7] .auth-back:hover {
        background-color: #eef0f3;
    }
}
/* _content/VisitPlus.Shared/Pages/Components/AuthSuccess.razor.rz.scp.css */
/* Shared auth success screen — centered verified badge + text + Continue. */
.as-screen[b-r2wt2ug4r5] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 40px 20px calc(40px + env(safe-area-inset-bottom, 0px));
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 600px while the background reaches the
       real viewport edges. Below 600px this resolves to the 20px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    overflow-x: hidden;
}

.as-corner[b-r2wt2ug4r5] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

.as-content[b-r2wt2ug4r5] {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 340px;
    /* sit slightly above the optical centre */
    margin-bottom: 8vh;
}

/* Size and colour come from the exported illustration itself now. */
[b-r2wt2ug4r5] .as-badge {
    margin-bottom: 28px;
}

.as-title[b-r2wt2ug4r5] {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.3px;
    color: #297381;
}

.as-name[b-r2wt2ug4r5] {
    margin: 6px 0 0;
    font-size: 20px;
    font-weight: 700;
    color: #22364c;
}

.as-message[b-r2wt2ug4r5] {
    margin: 12px 0 0;
    font-size: 14px;
    line-height: 1.5;
    color: #5a6470;
}

[b-r2wt2ug4r5] .as-continue {
    margin-top: 28px;
    min-width: 180px;
    height: 52px;
    padding-inline: 36px;
    border-radius: 14px;
    text-transform: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
    background-color: #22364c !important;
    color: #ffffff !important;
}

[b-r2wt2ug4r5] .as-continue:hover {
    background-color: #1b2c3f !important;
}
/* _content/VisitPlus.Shared/Pages/Components/BiometricsResult.razor.rz.scp.css */
/* ============================================================
   Biometric enrolment outcome — success (Figma 2317:24468) and failure
   (2425:26865). Prefix: br-. Light shell + sparkle, centred
   badge/title/message and a fixed-width Continue. Same metrics as the
   delete-account success view; deliberately not sharing AuthSuccess,
   whose older sizing still belongs to /account-confirmed (540:13753).
   ============================================================ */

.br-screen[b-x5a9790mep] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 40px 20px calc(40px + env(safe-area-inset-bottom, 0px));
    background: #f4f6f8;
    overflow: hidden;
}

.br-corner[b-x5a9790mep] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

.br-content[b-x5a9790mep] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 294px;
    margin-bottom: 6vh;
}

.br-badge[b-x5a9790mep] {
    display: block;   /* width/height are set inline: 120 (success) vs 104 (failure) */
}

/* Heading/H6 */
.br-title[b-x5a9790mep] {
    /* Figma: icon bottom y=365, text block top y=437. */
    margin: 72px 0 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.6px;
    color: #297381;
}

/* Orange/700 — the failure heading (Figma 2425:26877). */
.br-title--failed[b-x5a9790mep] {
    color: #c74307;
}

.br-message[b-x5a9790mep] {
    margin: 12px 0 0;   /* max-width is set inline: 230 (success) vs 280 (failure) */
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: #5b616e;
}

.br-continue[b-x5a9790mep] {
    margin-top: 40px;
    width: 174px;
    height: 52px;
    padding: 0 20px;
    border: none;
    border-radius: 14px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
    cursor: pointer;
}

.br-continue:hover[b-x5a9790mep] {
    background: #1b2c3f;
}

.br-continue:focus-visible[b-x5a9790mep] {
    outline: 2px solid var(--vp-brand-secondary);
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/Components/CodeInput.razor.rz.scp.css */
/* Segmented code input — six rounded white boxes with a large centred digit. */
.code-input[b-71pqkk15nc] {
    display: flex;
    /* Figma 2317:24172: six 54x67 cells across a 362px row -> 7.6px gaps. 8px keeps the
       cell at ~53.7px wide, i.e. the design ratio at any container width. */
    gap: 8px;
    width: 100%;
}

/* OTP cell states — Figma cell component 144:430: 54x67 (taller than wide), r20.
   Default #e3e3e3 border / focus teal ring / error coral border. */
.code-box[b-71pqkk15nc] {
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 54 / 67;
    max-height: 67px;
    box-sizing: border-box;
    border: 1px solid #e3e3e3;
    border-radius: 20px;
    background-color: #ffffff;
    box-shadow: 0 2px 2.6px rgba(0, 0, 0, 0.06);
    text-align: center;
    font-size: 28px;
    font-weight: 600;
    color: #22364c;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

/* Filled/active: teal border + blue-grey ring. Fixed rather than per-network — every OTP screen
   that renders this sits in the auth/onboarding flow, before a network applies. */
.code-box:focus[b-71pqkk15nc] {
    border-color: var(--vp-visitplus-secondary);
    box-shadow: 0 0 0 2px #b9c8d9;
}

/* Error: coral border (keeps the default drop shadow) */
.code-box-error[b-71pqkk15nc] {
    border-color: #f36e40;
}

.code-box:disabled[b-71pqkk15nc] {
    background-color: #f1f2f4;
    color: #9aa1ad;
}
/* _content/VisitPlus.Shared/Pages/Components/ConfirmationSuccess.razor.rz.scp.css */
/* Shared confirmation success overlay (scalloped teal seal + text + Continue). Full-screen,
   above the tab bar (z 1500). Corner sparkle + badge match the auth success visual language. */
.cs-overlay[b-1n9in0bx7g] {
    position: fixed;
    inset: 0;
    z-index: 1500;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 40px 20px calc(40px + env(safe-area-inset-bottom, 0px));
    background: #f4f6f8;
    overflow: hidden;
    animation: cs-in-b-1n9in0bx7g .2s ease both;
}

.cs-corner[b-1n9in0bx7g] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

.cs-content[b-1n9in0bx7g] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 340px;
    margin-bottom: 6vh; /* sit slightly above the optical centre, per Figma */
}

.cs-badge[b-1n9in0bx7g] {
    width: 128px;
    height: 128px;
    margin-bottom: 44px;
}

.cs-title[b-1n9in0bx7g] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.6px;
    color: #297381;
}

.cs-msg[b-1n9in0bx7g] {
    margin: 12px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.2px;
    color: #5b616e;
}

.cs-btn[b-1n9in0bx7g] {
    margin-top: 40px;
    min-width: 174px;
    height: 52px;
    padding: 0 20px;
    border: none;
    border-radius: 14px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

.cs-btn:hover[b-1n9in0bx7g] {
    background: #1e2b3c;
}

.cs-btn:focus-visible[b-1n9in0bx7g] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}

@keyframes cs-in-b-1n9in0bx7g {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .cs-overlay[b-1n9in0bx7g] {
        animation: none;
    }
}
/* _content/VisitPlus.Shared/Pages/Components/ContactInformationPanel.razor.rz.scp.css */
[b-8je4bovpmb] .contact-container {
    padding: 20px;
    background-color: white;
}

[b-8je4bovpmb] .contact-field {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #F3F4F6;
}

[b-8je4bovpmb] .contact-field:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

[b-8je4bovpmb] .field-header {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}

[b-8je4bovpmb] .field-label {
    color: #424242;
    font-weight: 700;
    font-size: 15px;
    width: 130px;
}
[b-8je4bovpmb] .field-label-full {
    color: #424242;
    font-weight: 700;
    font-size: 15px;
}
[b-8je4bovpmb] .field-value {
    color: #111827;
    font-weight: 400;
    font-size: 15px;
}

[b-8je4bovpmb] .info-icon {
    color: #9CA3AF;
    font-size: 15px;
    margin-left: 4px;
}
/* _content/VisitPlus.Shared/Pages/Components/DetailsNotFound.razor.rz.scp.css */
/* ============================================================
   Details Not Found (spec §93; Figma 2775-31491 / 2775-31605).
   Prefix: dnf-  Centred paper-stack art with a teal badge and a
   single line of copy. Geometry matches the other empty states
   (mpr-/mlp-) so the family stays consistent; only the badge
   glyph and the message change between the two variants.
   ============================================================ */

.dnf[b-0my7akt2hn] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 320px;
    margin: 0 auto;
    padding: 90px 16px 40px;
    text-align: center;
}

.dnf__art[b-0my7akt2hn] {
    position: relative;
    width: 172px;
    height: 172px;
    color: var(--vp-brand-secondary); /* brand/secondary — folded corner + badge (Figma) */
}

.dnf__doc[b-0my7akt2hn] {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: auto;
    overflow: visible;
}

.dnf__badge[b-0my7akt2hn] {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--vp-brand-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 3px rgba(255,255,255,.9), 0 4px 10px rgba(9,42,103,.2);
}

/* The exported glyphs carry preserveAspectRatio="none" and no intrinsic box, so both axes must be
   pinned or they stretch to fill the badge. */
.dnf__badge-ico[b-0my7akt2hn] {
    width: 22px;
    height: 22px;
    display: block;
}

.dnf__text[b-0my7akt2hn] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.6px;
    color: var(--vp-brand-primary);
}
/* _content/VisitPlus.Shared/Pages/Components/DirectionsSheet.razor.rz.scp.css */
/* Shared "Get directions" bottom sheet. Prefix: ds- */
.ds-overlay[b-8aynim4h7p] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0,0,0,.45);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.ds-sheet[b-8aynim4h7p] {
    width: 100%;
    max-width: 600px;
    background: #fff;
    border-radius: 20px 20px 0 0;
    padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 20px);
    animation: ds-up-b-8aynim4h7p .25s ease;
}

@keyframes ds-up-b-8aynim4h7p {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.ds-head[b-8aynim4h7p] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.ds-title[b-8aynim4h7p] {
    font-size: 18px;
    font-weight: 700;
    color: #0e0f0c;
}

.ds-close[b-8aynim4h7p] {
    display: flex;
    padding: 4px;
    border: none;
    background: none;
    cursor: pointer;
}

.ds-p[b-8aynim4h7p] {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    color: #6b7280;
    line-height: 1.5;
}

.ds-btn[b-8aynim4h7p] {
    width: 100%;
    margin-top: 10px;
    padding: 15px 8px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    background: #edeef1;
    color: var(--vp-brand-primary);
    cursor: pointer;
}

.ds-btn:focus-visible[b-8aynim4h7p],
.ds-close:focus-visible[b-8aynim4h7p] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .ds-sheet[b-8aynim4h7p] {
        animation: none;
    }
}
/* _content/VisitPlus.Shared/Pages/Components/FacilityMapViewer.razor.rz.scp.css */
/* Facility map viewer — full-screen preview with zoom controls. Prefix: fmv- */
.fmv-root[b-jm22h06zsx] {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    flex-direction: column;
    background: #0e1420;
}

/* ===== Header ===== */
.fmv-hdr[b-jm22h06zsx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px;
    background: #26364a;
}

.fmv-title[b-jm22h06zsx] {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fmv-close[b-jm22h06zsx] {
    display: flex;
    flex: 0 0 auto;
    padding: 4px;
    border: none;
    background: none;
    cursor: pointer;
}

/* ===== Stage ===== */
.fmv-stage[b-jm22h06zsx] {
    position: relative;
    flex: 1 1 auto;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fmv-canvas[b-jm22h06zsx] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Own the gesture: without this the WebView pans the page instead of the map. */
    touch-action: none;
    cursor: grab;
    overflow: hidden;
}

.fmv-canvas--dragging[b-jm22h06zsx] {
    cursor: grabbing;
}

.fmv-img[b-jm22h06zsx] {
    max-width: 100%;
    max-height: 100%;
    transform-origin: center center;
    transition: transform .12s ease-out;
    user-select: none;
    -webkit-user-drag: none;
}

/* Dragging updates the transform on every pointer move, so the ease would lag behind the finger. */
.fmv-canvas--dragging .fmv-img[b-jm22h06zsx] {
    transition: none;
}

.fmv-pdf[b-jm22h06zsx] {
    width: 100%;
    height: 100%;
    border: none;
    background: #fff;
}

/* ===== Empty / fallback ===== */
.fmv-empty[b-jm22h06zsx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px 24px;
    text-align: center;
}

.fmv-empty__text[b-jm22h06zsx] {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    color: #d5d9e1;
    line-height: 1.5;
}

.fmv-link[b-jm22h06zsx] {
    color: #7fd4e3;
    text-decoration: underline;
}

/* ===== Zoom controls ===== */
.fmv-zoom[b-jm22h06zsx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 auto calc(env(safe-area-inset-bottom, 0px) + 20px);
    padding: 6px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,.35);
}

.fmv-zoombtn[b-jm22h06zsx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: #eef1f5;
    cursor: pointer;
}

.fmv-zoombtn:disabled[b-jm22h06zsx] {
    opacity: .4;
    cursor: default;
}

.fmv-zoomlevel[b-jm22h06zsx] {
    min-width: 64px;
    padding: 0 8px;
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 600;
    color: #26364a;
    cursor: pointer;
}
/* _content/VisitPlus.Shared/Pages/Components/SplashScreen.razor.rz.scp.css */
/* Splash screen — Figma node 2049:13609.
   Dark navy gradient with the wordmark centred; each glyph reveals with a
   staggered fade + slide-in from the left.

   On web the app is a centred 960px column (MudContainer MaxWidth.Medium) with
   #eee gutters, so the splash mirrors that frame instead of bleeding full-width.
   When the app is ready the whole overlay cross-fades out (no white flash). */

.vp-splash[b-hvcfh02bqv] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    background: #eee; /* gutter — matches MudMainContent */
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.4s ease;
}

/* Fade the overlay away to reveal the app rendered underneath. */
.vp-splash--out[b-hvcfh02bqv] {
    opacity: 0;
}

.vp-splash__frame[b-hvcfh02bqv] {
    width: 100%;
    max-width: 960px; /* = MudContainer MaxWidth.Medium (welcome frame) */
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #26364a 0%, #192637 100%);
}

.vp-splash__logo[b-hvcfh02bqv] {
    /* Fixed at the Figma logo size (292pt) so it matches the native iOS splash
       (MauiSplashScreen BaseSize 292,65) exactly on every device — no size jump on
       hand-off. max-width guards tiny screens. */
    width: 292px;
    max-width: 84%;
    height: auto;
}

/* Each glyph (and the sparkle group) starts hidden + shifted left, then
   fades/slides into place. The per-element animation-delay is set inline
   (staggered ~130ms) to reproduce the left-to-right cascade. */
.vp-splash__logo .vp-g[b-hvcfh02bqv] {
    opacity: 0;
    transform: translateX(-22px);
    animation: vp-splash-in-b-hvcfh02bqv 0.45s ease-out both;
}

@keyframes vp-splash-in-b-hvcfh02bqv {
    from { opacity: 0; transform: translateX(-22px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---- Desktop (>=768px) --------------------------------------------------
   Full-bleed, exactly like the Welcome hero: the photo reaches every viewport
   edge and the wordmark is the only thing on it. The 960px navy column this
   used to draw was a phone frame stretched onto a desktop window — it read as
   a slab floating in the middle of the screen, and it made the hand-off to
   Welcome (which IS full-bleed) jump. Phones are unaffected: below the
   breakpoint .vp-splash__frame already fills the screen. */
@media (min-width: 768px) {
    .vp-splash[b-hvcfh02bqv] {
        background-color: #22364c;
        background-image:
            linear-gradient(180deg, rgba(24, 38, 55, 0.55) 0%, rgba(24, 38, 55, 0.85) 100%),
            url('images/nexa-welcome-bg-wide.jpg');
        background-repeat: no-repeat;
        /* Same crop/anchor as the Welcome hero — see the note in Welcome.razor.css. */
        background-position: center, center 35%;
        background-size: cover, cover;
    }

    /* Drop the frame: no width cap, and no navy gradient of its own — the photo
       on .vp-splash is the background now. */
    .vp-splash__frame[b-hvcfh02bqv] {
        max-width: none;
        background: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .vp-splash[b-hvcfh02bqv] {
        transition: none;
    }
    .vp-splash__logo .vp-g[b-hvcfh02bqv] {
        animation: none;
        opacity: 1;
        transform: none;
    }
}
/* _content/VisitPlus.Shared/Pages/Components/StaticDocumentScreen.razor.rz.scp.css */
/* ============================================================
   Full legal document screen (Figma 2885:31455) — shared by /terms-of-use and
   /privacy-policy. Light shell + corner sparkle, round back button, navy 32px
   title + version, lead-in paragraph, then a heading/body block per clause.
   Long page — it scrolls.
   ============================================================ */
.vpdoc-screen[b-dejhdvx3ef] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /* Figma: the title sits at y=147, i.e. 22px below the 40px back button (top 70). */
    padding: max(125px, calc(95px + env(safe-area-inset-top, 0px))) 20px calc(32px + env(safe-area-inset-bottom, 0px));
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra width, so the column
       stays 600px while the background reaches the real viewport edges. Below 600px this resolves
       to the 20px gutter, i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 600px) / 2));
    background-color: var(--vp-base-bg);
    /* Clip only the sparkle's horizontal bleed; let the document grow/scroll vertically. */
    overflow-x: hidden;
}

/* Same shared corner asset and offsets as the other light screens. Figma rotates it 90°, which is
   invisible on this 4-fold-symmetric shape, so the un-rotated copy is reused as-is. */
.vpdoc-corner[b-dejhdvx3ef] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

.vpdoc-content[b-dejhdvx3ef] {
    position: relative;
    z-index: 1;
    word-break: break-word;
}

.vpdoc-title[b-dejhdvx3ef] {
    margin: 22px 0 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -1.28px;
    color: var(--vp-visitplus-primary);
}

.vpdoc-version[b-dejhdvx3ef] {
    margin: 6px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.5px;
    color: var(--vp-gray-600);
}

.vpdoc-intro[b-dejhdvx3ef] {
    margin: 20px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.5px;
    color: var(--vp-gray-800);
}

/* The lead-in is plain text today; inherit the style if it is ever authored as paragraphs. */
.vpdoc-intro[b-dejhdvx3ef]  p {
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

.vpdoc-intro[b-dejhdvx3ef]  p + p {
    margin-top: 10px;
}

.vpdoc-loading[b-dejhdvx3ef] {
    display: flex;
    justify-content: center;
    padding: 32px 0;
}

/* Clause list -------------------------------------------------------------
   The clauses come from S3 and are injected as a MarkupString, so they never carry this
   stylesheet's scope attribute — every rule that targets them has to go through ::deep. */
.vpdoc-sections[b-dejhdvx3ef] {
    margin-top: 30px;
    /* Also declared on the container, not only on ::deep p: content authored with <br> instead of
       <p> puts bare text nodes here, which no ::deep child selector can reach. */
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: var(--vp-gray-600);
}

.vpdoc-sections[b-dejhdvx3ef]  h2 {
    margin: 20px 0 10px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.5px;
    color: var(--vp-base-black);
}

.vpdoc-sections[b-dejhdvx3ef]  h2:first-child {
    margin-top: 0;
}

.vpdoc-sections[b-dejhdvx3ef]  p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: var(--vp-gray-600);
}

/* Multi-paragraph clauses keep the in-clause rhythm rather than the between-clause one. */
.vpdoc-sections[b-dejhdvx3ef]  p + p {
    margin-top: 10px;
}

.vpdoc-sections[b-dejhdvx3ef]  :is(ul, ol) {
    margin: 10px 0 0;
    padding-left: 22px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: var(--vp-gray-600);
}

.vpdoc-sections[b-dejhdvx3ef]  a {
    color: var(--vp-visitplus-secondary);
}

/* Failure state ---------------------------------------------------------- */
[b-dejhdvx3ef] .vpdoc-retry {
    height: 48px;
    margin-top: 20px;
    padding-inline: 24px;
    border-radius: 14px;
    text-transform: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
    /* Fixed VisitPlus colours, not --vp-brand-*: these documents are reachable before a health
       network is picked, so there is no network in play. See --vp-visitplus-primary in app.css. */
    background-color: var(--vp-visitplus-primary) !important;
    color: #ffffff !important;
}

@media (hover: hover) {
    [b-dejhdvx3ef] .vpdoc-retry:hover {
        background-color: #1b2c3f !important;
    }
}
/* _content/VisitPlus.Shared/Pages/Components/StepProgress.razor.rz.scp.css */
/* Segmented step-progress header (Figma 2317:24363). */
.step-progress[b-72qcd6p4jd] {
    display: flex;
    flex-direction: column;
    gap: 9px;
    width: 100%;
}

.step-progress-bar[b-72qcd6p4jd] {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
}

.step-seg[b-72qcd6p4jd] {
    flex: 1 0 0;
    min-width: 0;
    height: 3px;
    border-radius: 100px;
    background-color: #b6bac3;
}

.step-seg.is-done[b-72qcd6p4jd] {
    /* Fixed: the only three screens with a step bar (setup-phone, verify-phone, accept-terms) are
       onboarding, which runs before the user reaches Home and a network takes effect. */
    background-color: var(--vp-visitplus-primary);
}

.step-progress-label[b-72qcd6p4jd] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: #26364a;
}
/* _content/VisitPlus.Shared/Pages/Components/TermsAccordion.razor.rz.scp.css */
/* ============================================================
   Terms & Conditions accordion (Figma card 1888:23543).
   Prefix: ta-. Shared by /accept-terms and /registration-terms.
   ============================================================ */

.ta-cards[b-qvs1y3opke] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ta-loading[b-qvs1y3opke] {
    display: flex;
    justify-content: center;
    padding: 24px 0;
}

.ta-card[b-qvs1y3opke] {
    background-color: #ffffff;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

.ta-card-head[b-qvs1y3opke] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 66px;
    box-sizing: border-box;
    padding: 12px 12px 12px 16px;
    background: none;
    border: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.ta-card-title[b-qvs1y3opke] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.2px;
    color: #1e55af;
}

.ta-card-icon[b-qvs1y3opke] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 22px;
    background-color: #eceff1;
    color: #26364a;
}

[b-qvs1y3opke] .ta-card-icon .mud-icon-root {
    font-size: 18px;
}

.ta-card-body[b-qvs1y3opke] {
    padding: 0 16px 16px;
    font-size: 14px;
    line-height: 1.5;
    color: #424242;
}

.ta-card-body :is(h1, h2, h3)[b-qvs1y3opke] {
    font-size: 15px;
    font-weight: 600;
    color: #26364a;
    margin: 12px 0 6px;
}

.ta-card-body p[b-qvs1y3opke] {
    margin: 0 0 10px;
}
/* _content/VisitPlus.Shared/Pages/Components/VpApptCard.razor.rz.scp.css */
/* Shared appointment card (redesigned Home + Appointments). Prefix: vpc */
.vpc[b-l1xm3t4pu6] {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 16px;
    box-shadow: 0 2px 10px rgba(16,24,40,.06);
    cursor: pointer;
}

.vpc:focus-visible[b-l1xm3t4pu6] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}

.vpc__head[b-l1xm3t4pu6] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.vpc__date[b-l1xm3t4pu6] {
    flex: 0 0 54px;
    width: 54px;
    border: 1px solid #edeef1;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    background: #fff;
}

.vpc__date-mon[b-l1xm3t4pu6] {
    display: block;
    background: linear-gradient(#fd6057, #ec534b); /* red-orange band */
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    padding: 3px 0;
}

.vpc--past .vpc__date-mon[b-l1xm3t4pu6] {
    background: #8e95a2; /* past/closed: neutral grey band */
}

.vpc__date-day[b-l1xm3t4pu6] {
    display: block;
    color: #0e0f0c;
    font-size: 22px;
    font-weight: 700;
    padding: 6px 0;
}

.vpc__headtext[b-l1xm3t4pu6] {
    flex: 1 1 auto;
    min-width: 0;
}

.vpc__row1[b-l1xm3t4pu6] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.vpc__hosp[b-l1xm3t4pu6] {
    flex: 1 1 auto;
    min-width: 0;
    color: #297381;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vpc__chip[b-l1xm3t4pu6] {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: 600;
    padding: 2px 5px;
    border: 1px solid transparent;
    border-radius: 5px;
    white-space: nowrap;
}

.vpc__chip--ok[b-l1xm3t4pu6] {
    background: #d5ffe6;
    border-color: #70ffab;
    color: #00963c;
}

.vpc__chip--warn[b-l1xm3t4pu6] {
    background: #fff7ed;
    border-color: #ffd9a8;
    color: #f05b06;
}

.vpc__chip--muted[b-l1xm3t4pu6] {
    background: #edeef1;
    border-color: #d8dbdf;
    /* Gray/500 per Figma 3190:33609; was #5b616e (Gray/600). */
    color: #6b7280;
}

.vpc__chip--dark[b-l1xm3t4pu6] {
    background: #26364a;
    border-color: #26364a;
    color: #fff;
}

/* Solid orange "Updated" — mirrors the Appointment Detail dt-chip--updated (navy on orange
   for WCAG AA, not white). */
.vpc__chip--updated[b-l1xm3t4pu6] {
    background: #ff9537;
    border-color: #ff9537;
    color: #26364a;
    font-weight: 700;
}

.vpc__row2[b-l1xm3t4pu6] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    font-size: 15px;
}

.vpc__spec[b-l1xm3t4pu6] {
    color: #0e0f0c;
    font-weight: 700;
}

.vpc__sep[b-l1xm3t4pu6] {
    color: #b6bac3;
}

.vpc__doc[b-l1xm3t4pu6] {
    color: #297381;
    font-weight: 600;
}

.vpc__divider[b-l1xm3t4pu6] {
    height: 1px;
    background: #edeef1;
    margin: 14px 0;
}

.vpc__detail[b-l1xm3t4pu6] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.vpc__detail-text[b-l1xm3t4pu6] {
    color: #3d404a;
    font-size: 14px;
    font-weight: 600;
}

.vpc__strong[b-l1xm3t4pu6] {
    color: #3d404a;
    font-size: 14px;
    font-weight: 600;
}

.vpc__pipe[b-l1xm3t4pu6] {
    color: #b6bac3;
    margin: 0 2px;
}

.vpc__muted[b-l1xm3t4pu6] {
    color: #8b909c;
    font-size: 12px;
    font-weight: 600;
    margin-left: 4px;
}

.vpc__detail--action[b-l1xm3t4pu6] {
    justify-content: space-between;
    margin-bottom: 0;
    gap: 8px;
}

.vpc__detail-left[b-l1xm3t4pu6] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.vpc__btn-outline[b-l1xm3t4pu6] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 999px;
    padding: 7px 14px;
    color: var(--vp-brand-primary);
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

/* blue info box (post-check-in / checked-in) */
.vpc__info[b-l1xm3t4pu6] {
    margin-top: 14px;
    background: #ddf4ff;
    border: 1px solid #bfd7fe;
    /* WCAG AA (1.4.3): blue/700 #1d64d8 on #ddf4ff = 4.8:1; blue/500 #3b82f6 was 3.23:1. */
    color: #1d64d8;
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}

/* red error box (missed check-in) */
/* The design-system "Notify" box (Figma 1252:23089): Red/50 fill, Red/500 border and text. */
.vpc__error[b-l1xm3t4pu6] {
    margin-top: 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fff1f2;
    border: 1px solid #fb2c36;
    color: #fb2c36;
    border-radius: 12px;
    padding: 8px 12px 10px;
    font-size: 14px;
    letter-spacing: -0.2px;
    font-weight: 600;
    line-height: 1.4;
}

/* grey "Form submitted" status bar (check-in) */
/* "Form submitted" pill (Figma 527:4420): Gray/100 fill, brand-primary text, 40px tall. */
.vpc__status[b-l1xm3t4pu6] {
    margin-top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    box-sizing: border-box;
    background: #edeef1;
    color: var(--vp-brand-primary);
    border-radius: 12px;
    padding: 12px 20px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.07px;
}

/* navy ticket number pill (checked-in) */
/* The unsuccessful card's Notify carries no icon (Figma 2737:26420), so the row is text only. */
/* Exported Notify vector (fi_8861206) rather than a font glyph. */
.vpc__error-icon[b-l1xm3t4pu6] {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
}

.vpc__error--plain[b-l1xm3t4pu6] {
    gap: 0;
}

/* Unsuccessful-check-in ticket stub (Figma 2139:24951): Gray/100 fill, Gray/400 text, and a
   notch punched out of each vertical edge. The notches are white circles rather than a mask so
   they hold their shape at any card width — the card behind them is white. */
/* filled teal CTA (pre-appointment form / check in) */
.vpc__btn-fill[b-l1xm3t4pu6] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    margin-top: 8px;
    background: var(--vp-brand-secondary);
    color: #fff;
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* grey "Leave feedback" (closed / past) */
.vpc__btn-feedback[b-l1xm3t4pu6] {
    display: block;
    width: 100%;
    margin-top: 14px;
    background: #edeef1;
    color: var(--vp-brand-primary);
    border: none;
    border-radius: 12px;
    padding: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.vpc__btn-outline:focus-visible[b-l1xm3t4pu6],
.vpc__btn-fill:focus-visible[b-l1xm3t4pu6],
.vpc__btn-feedback:focus-visible[b-l1xm3t4pu6] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/Components/VpIcon.razor.rz.scp.css */
/* Exported Figma icons render as images — see VpIcon.razor for why they are not font glyphs.
   display:block stops the inline-image baseline gap from nudging flex rows out of line. */
.vp-icon[b-ehc6i4cw7l] {
    display: block;
    flex: 0 0 auto;
}
/* _content/VisitPlus.Shared/Pages/Components/VpNotify.razor.rz.scp.css */
/* Figma Notify: red/50 fill, red/500 border + text, 12px radius, 8/12/10 padding, 10px gap. */
.vp-notify[b-fd7ju9kjfm] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    box-sizing: border-box;
    width: 100%;
    padding: 8px 12px 10px;
    border: 1px solid #fb2c36;
    border-radius: 12px;
    background-color: #fff1f2;
}

.vp-notify__icon[b-fd7ju9kjfm] {
    display: block;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
}

.vp-notify__text[b-fd7ju9kjfm] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.2px;
    color: #fb2c36;
    word-break: break-word;
}
/* _content/VisitPlus.Shared/Pages/Components/VpReferralCard.razor.rz.scp.css */
/* ============================================================
   Referral card (Figma 2645-39919). Prefix: vrc-
   Same card shell as the appointment card (VpApptCard) — white,
   16px radius, hairline border + soft shadow — with the referral
   layout: "For <patient>" + status chip, then three icon rows.
   ============================================================ */

.vrc[b-v16xwlivs6] {
    background: #fff;
    cursor: pointer;
    text-align: left;
    border: 1px solid #edeef1;
    border-radius: 16px;
    box-shadow: 0 6px 15.4px rgba(0,0,0,.05);
    padding: 12px 12px 16px;
}

/* ===== Header: "For <patient>" + chip ===== */
.vrc__head[b-v16xwlivs6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
}

.vrc__name[b-v16xwlivs6] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 18px;
    letter-spacing: -.5px;
    line-height: 1.4;
}

.vrc__for[b-v16xwlivs6] {
    flex: 0 0 auto;
    color: #297381; /* brand/secondary */
    font-weight: 400;
}

.vrc__patient[b-v16xwlivs6] {
    min-width: 0;
    color: #26364a; /* brand/primary */
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vrc__divider[b-v16xwlivs6] {
    height: 1px;
    background: #edeef1;
    margin: 12px 0;
}

/* ===== Icon rows ===== */
.vrc__row[b-v16xwlivs6] {
    display: flex;
    align-items: center;
    gap: 4px;
    min-height: 20px;
}

    .vrc__row + .vrc__row[b-v16xwlivs6] {
        margin-top: 12px;
    }

.vrc__icon[b-v16xwlivs6] {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    opacity: .6;
    display: block;
}

.vrc__text[b-v16xwlivs6] {
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.3;
    color: #3d404a; /* gray/700 */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vrc__link[b-v16xwlivs6] {
    color: #3b82f6;
}

.vrc:focus-visible[b-v16xwlivs6] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/Components/VpReferralChip.razor.rz.scp.css */
/* ============================================================
   Referral status chip (Figma 2644-39884, spec §46). Prefix: vrch-
   ============================================================ */

.vrch[b-bk0kc4580f] {
    display: inline-block;
    flex: 0 0 auto;
    min-width: 31px;
    padding: 1px 5px 2px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.2px;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
}

.vrch--new[b-bk0kc4580f] {
    background: #eff5ff;
    border-color: #bfd7fe;
    color: #2570eb;
}

.vrch--accepted[b-bk0kc4580f] {
    background: #d5ffe6;
    border-color: #70ffab;
    color: #00963c;
}

/* Solid orange. Figma sets white text (2.19:1); this uses navy for WCAG AA, matching the
   already-shipped appointment chip (.vpc__chip--updated / .dt-chip--updated). */
.vrch--updated[b-bk0kc4580f] {
    background: #ff9537;
    border-color: #ff9537;
    color: #26364a;
    font-weight: 700;
}

.vrch--waiting[b-bk0kc4580f] {
    background: #fff9c5;
    border-color: #ffba0a;
    color: #c74307;
}

/* "Cancellation requested" (Figma 2653-25000). The design renders it near-black; this uses the
   brand navy already shipped as the dark appointment chip (.vpc__chip--dark) for consistency. */
.vrch--cancelled[b-bk0kc4580f] {
    background: #26364a;
    border-color: #26364a;
    color: #fff;
}
/* _content/VisitPlus.Shared/Pages/Components/VpTicketStub.razor.rz.scp.css */
/* Design-system component 2139:24951 — see VpTicketStub.razor. */
.stub[b-yukir0n0gm] {
    position: relative;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 24px;
    height: 64px;
    padding: 0 20px 0 32px;
    box-sizing: border-box;
    background: #edeef1;
    border-radius: 12px;
}

/* The perforation notches are painted as circles in the host's colour rather than
   cut out of the shape, so the stub must sit on a white surface — true on both the
   appointment card and .dt-card. */
.stub[b-yukir0n0gm]::before,
.stub[b-yukir0n0gm]::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    transform: translateY(-50%);
}

.stub[b-yukir0n0gm]::before {
    left: -11px;
}

.stub[b-yukir0n0gm]::after {
    right: -11px;
}

.stub--active[b-yukir0n0gm] {
    background: #1e55af;
}

.stub--active .stub__label[b-yukir0n0gm],
.stub--active .stub__code[b-yukir0n0gm] {
    color: #ffffff;
}

.stub--active .stub__divider[b-yukir0n0gm] {
    border-left-color: rgba(255, 255, 255, 0.6);
}

.stub__label[b-yukir0n0gm] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.2px;
    color: #8e95a2;
    text-align: center;
}

.stub__divider[b-yukir0n0gm] {
    align-self: center;
    width: 0;
    height: 39px;
    border-left: 1px dashed #b6bac3;
}

.stub__code[b-yukir0n0gm] {
    flex: 1 1 0;
    min-width: 0;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
    letter-spacing: -1.28px;
    color: #8e95a2;
    text-align: center;
}
/* _content/VisitPlus.Shared/Pages/ConfirmAccount.razor.rz.scp.css */
/* ============================================================
   Sign-up email verification (Figma 2317:24149 / 23855 / 24111 / 24074 / 2928:32551).
   Light shell + sparkle, no logo: "Verify your email" title + instruction + 6-digit
   code + resend link. Figma vertical rhythm: title -24- instruction -24- boxes -12-
   resend -40- button.
   ============================================================ */
.cf-screen[b-gkcpy6wyvf] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /* Figma: content sits at y=145, i.e. 35px below the 40px back button (top 70). */
    padding: max(125px, calc(95px + env(safe-area-inset-top, 0px))) 20px calc(32px + env(safe-area-inset-bottom, 0px));
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 600px while the background reaches the
       real viewport edges. Below 600px this resolves to the 20px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    overflow-x: hidden;
}

.cf-corner[b-gkcpy6wyvf] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

[b-gkcpy6wyvf] .cf-back {
    position: absolute;
    top: max(50px, calc(20px + env(safe-area-inset-top, 0px)));
    left: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: #ffffff;
    border-radius: 72px;
    color: var(--vp-visitplus-primary);
    box-shadow: 0 1px 3px rgba(34, 54, 76, 0.12);
}

[b-gkcpy6wyvf] .cf-back:hover {
    background-color: #eef0f3;
}

.cf-content[b-gkcpy6wyvf] {
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.cf-title[b-gkcpy6wyvf] {
    margin: 0 0 24px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.04px;
    color: #297381;
}

/* Error banner: the shared VpNotify component owns its look (Figma "Notify" 2317:24131); the page
   only owns the gap below it. */
[b-gkcpy6wyvf] .cf-notify {
    margin-bottom: 24px;
}

.cf-instruction[b-gkcpy6wyvf] {
    margin: 0 0 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.6px;
    color: #676767;
}

.cf-code[b-gkcpy6wyvf] {
    margin-bottom: 12px;
}

/* Resend link — right aligned under the code input */
.cf-resend[b-gkcpy6wyvf] {
    text-align: right;
    margin: 0 0 40px;
}

/* Figma 1388:34998: #2a2a2a, semibold, underlined. !important beats MudLink's .mud-primary-text. */
[b-gkcpy6wyvf] .cf-resend-link {
    color: #2a2a2a !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.2px;
    text-decoration: underline;
    cursor: pointer;
}

/* Submit button */
[b-gkcpy6wyvf] .cf-submit {
    height: 52px;
    border-radius: 14px;
    text-transform: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
    background-color: #22364c !important;
    color: #ffffff !important;
}

[b-gkcpy6wyvf] .cf-submit:hover {
    background-color: #1b2c3f !important;
}

[b-gkcpy6wyvf] .cf-submit:disabled,
[b-gkcpy6wyvf] .cf-submit.mud-button-disabled {
    background-color: #22364c !important;
    color: #ffffff !important;
    opacity: 0.6;
}
/* _content/VisitPlus.Shared/Pages/ConfirmSocialAccount.razor.rz.scp.css */
/* ============================================================
   Registration: Social IdP Final Account Creation
   (Figma 2943:47300 unchecked / 2943:47386 checked).
   Light shell + sparkle: title, an identity card (name / email from the
   IdP), then a consent row + CTA pinned to the bottom.
   ============================================================ */
.sc-screen[b-wrbx5gfoko] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /* Figma: content starts at y=135, i.e. 25px below the 40px back button (top 70). */
    padding: max(115px, calc(85px + env(safe-area-inset-top, 0px))) 16px calc(24px + env(safe-area-inset-bottom, 0px));
    padding-inline: max(16px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    overflow-x: hidden;
}

.sc-corner[b-wrbx5gfoko] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

[b-wrbx5gfoko] .sc-back {
    position: absolute;
    top: max(50px, calc(20px + env(safe-area-inset-top, 0px)));
    left: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: #ffffff;
    border-radius: 72px;
    color: var(--vp-visitplus-primary);
    box-shadow: 0 1px 3px rgba(34, 54, 76, 0.12);
}

[b-wrbx5gfoko] .sc-back:hover {
    background-color: #eef0f3;
}

.sc-content[b-wrbx5gfoko] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Heading/H5 */
.sc-title[b-wrbx5gfoko] {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.04px;
    color: #297381;
}

/* Identity card (2943:47319) */
.sc-card[b-wrbx5gfoko] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border-radius: 10px;
    background-color: #ffffff;
    filter: drop-shadow(0 6px 6px rgba(0, 0, 0, 0.08));
}

/* Heading/H6 */
.sc-name[b-wrbx5gfoko] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.96px;
    color: var(--vp-brand-primary);
}

.sc-rule[b-wrbx5gfoko] {
    height: 1px;
    background-color: #e5e7eb;
}

.sc-field[b-wrbx5gfoko] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Paragraph/15/semibold */
.sc-field-label[b-wrbx5gfoko] {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.5px;
    color: #6b7280;
}

/* Paragraph/18/semibold */
.sc-field-value[b-wrbx5gfoko] {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.5px;
    color: #3d404a;
    word-break: break-word;
}

/* ---- Consent + CTA, pinned to the bottom (Figma y=714 / y=785 of 874) ---- */
.sc-bottom[b-wrbx5gfoko] {
    position: relative;
    z-index: 1;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 32px;
}

.sc-terms[b-wrbx5gfoko] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

[b-wrbx5gfoko] .sc-check {
    margin: -2px 0 0 -10px;
}

/* Paragraph/14/semibold */
.sc-terms-text[b-wrbx5gfoko] {
    padding-top: 2px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: #000000;
}

/* !important: MudLink's .mud-primary-text has equal specificity and loads after our scoped CSS. */
[b-wrbx5gfoko] .sc-terms-link {
    color: #1d64d8 !important;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.4px;
    text-decoration: none;
}

[b-wrbx5gfoko] .sc-terms-link:hover {
    text-decoration: underline;
}

[b-wrbx5gfoko] .sc-submit {
    height: 52px;
    border-radius: 14px;
    text-transform: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
    background-color: var(--vp-brand-primary) !important;
    color: #ffffff !important;
}

/* Figma puts opacity 60% on the whole button for the not-yet-consented state. */
[b-wrbx5gfoko] .sc-submit:disabled,
[b-wrbx5gfoko] .sc-submit.mud-button-disabled {
    background-color: var(--vp-brand-primary) !important;
    color: #ffffff !important;
    opacity: 0.6;
}
/* _content/VisitPlus.Shared/Pages/CreateAccount.razor.rz.scp.css */
/* ============================================================
   Create-account screen — full-bleed hero (Figma: 127:44)
   Colours: primary var(--vp-visitplus-primary) (fixed — pre-auth, no network chosen yet),
   border #dedede
   Reuses the welcome hero photo (same clinic image).
   ============================================================ */
.ca-screen[b-hpouke6xby] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Full-bleed on every size — the photo reaches the viewport edges on desktop too.
       Only the content column is capped (see padding-inline below). */
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /* Figma: 36px horizontal padding on the create-account chooser (forms use 20px). */
    padding: 0 36px;
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 480px while the background reaches the
       real viewport edges. Below 480px this resolves to the 36px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(36px, calc((100% - 480px) / 2));
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px));
    color: #ffffff;
    /* Photo + 12% brand overlay + bottom gradient scrim (transparent -> the brand primary) */
    background-color: var(--vp-visitplus-primary);
    /* Photo darkened to match the Figma node (stacked dark + navy scrims) so the
       white title/buttons/text stay legible, plus a bottom navy gradient scrim. */
    background-image:
        linear-gradient(180deg,
            rgba(34, 54, 76, 0) 0%,
            rgba(34, 54, 76, 0.10) 22.9%,
            rgba(34, 54, 76, 0.32) 38.4%,
            rgba(34, 54, 76, 0.726) 59.8%,
            rgb(34, 54, 76) 100%),
        linear-gradient(rgba(22, 26, 31, 0.30), rgba(22, 26, 31, 0.30)),
        linear-gradient(rgba(34, 54, 76, 0.25), rgba(34, 54, 76, 0.25)),
        url('images/nexa-welcome-bg.jpg');
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: center bottom, center, center, center bottom;
    background-size: 100% 70%, cover, cover, cover;
}

/* ---- Back button (white circle, navy chevron) ---- */
[b-hpouke6xby] .ca-back {
    position: absolute;
    /* iOS WKWebView populates safe-area-inset-top; Android WebView reports 0 for the
       regular status bar, so floor the offset at 50px so the button clears it there too. */
    top: max(50px, calc(20px + env(safe-area-inset-top, 0px)));
    left: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: #ffffff;
    border-radius: 72px;
    color: var(--vp-visitplus-primary);
}

[b-hpouke6xby] .ca-back:hover {
    background-color: #f5f6f8;
}

/* ---- Brand: logo ---- */
.ca-brand[b-hpouke6xby] {
    margin-top: 33vh;
    text-align: center;
}

[b-hpouke6xby] .ca-logo {
    display: block;
    width: 250px;
    max-width: 64%;
    height: auto;
    margin: 0 auto;
    /* Brand wordmark is navy/teal; render it solid white over the photo */
    filter: brightness(0) invert(1);
}

/* ---- Content (pushed to the bottom of the hero) ---- */
.ca-content[b-hpouke6xby] {
    margin-top: auto;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.ca-title[b-hpouke6xby] {
    margin: 0;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.6px;
    color: #ffffff;
}

/* ---- Option buttons ---- */
.ca-options[b-hpouke6xby] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.ca-social-group[b-hpouke6xby] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

[b-hpouke6xby] .ca-btn {
    height: 52px;
    border-radius: 12px !important;
    text-transform: none !important;
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
}

[b-hpouke6xby] .ca-btn .mud-button-label {
    gap: 12px;
}

/* Social buttons — white with light border */
[b-hpouke6xby] .ca-btn-social {
    background-color: #ffffff !important;
    color: #343434 !important;
    border: 1px solid #dedede !important;
}

[b-hpouke6xby] .ca-btn-social:hover {
    background-color: #f5f6f8 !important;
}

/* Provider logo as an <img> (SVG asset) — renders reliably in both the iOS WKWebView
   and Android WebView, unlike inline MarkupString SVG which collapses in WebKit's flexbox. */
.ca-social-icon[b-hpouke6xby] {
    display: block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.ca-btn-label[b-hpouke6xby] {
    line-height: 1.4;
}

/* Email button — navy filled */
[b-hpouke6xby] .ca-btn-email {
    background-color: var(--vp-visitplus-primary) !important;
    color: #ffffff !important;
    border-radius: 14px !important;
}

[b-hpouke6xby] .ca-btn-email:hover {
    background-color: #1d2a3a !important;
}

[b-hpouke6xby] .ca-btn-email .mud-button-label {
    gap: 8px;
}

[b-hpouke6xby] .ca-btn-email .mud-icon-root {
    font-size: 22px;
}

/* ---- "or" divider ---- */
.ca-divider[b-hpouke6xby] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.ca-divider-line[b-hpouke6xby] {
    width: 45px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.8);
}

.ca-divider-text[b-hpouke6xby] {
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
}

/* ---- "Already have an account? Sign in" ---- */
.ca-signin[b-hpouke6xby] {
    margin: 0;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.15px;
}

.ca-signin-muted[b-hpouke6xby] {
    color: #a8a5a5;
}

[b-hpouke6xby] .ca-signin-link {
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none;
}

/* ---- Desktop hero photo ----------------------------------------------
   Wider crop above the phone breakpoint, matching Welcome. The full
   background-image stack is restated because it is one property. */
@media (min-width: 768px) {
    .ca-screen[b-hpouke6xby] {
        background-image:
            linear-gradient(180deg,
                rgba(34, 54, 76, 0) 0%,
                rgba(34, 54, 76, 0.10) 22.9%,
                rgba(34, 54, 76, 0.32) 38.4%,
                rgba(34, 54, 76, 0.726) 59.8%,
                rgb(34, 54, 76) 100%),
            linear-gradient(rgba(22, 26, 31, 0.30), rgba(22, 26, 31, 0.30)),
            linear-gradient(rgba(34, 54, 76, 0.25), rgba(34, 54, 76, 0.25)),
            url('images/nexa-welcome-bg-wide.jpg');
        /* Photo pinned near the top of the frame — see the note in Welcome.razor.css. */
        background-position: center bottom, center, center, center 20%;
    }
}

/* A button that is not accepting taps has to LOOK like it. The colours above are !important —
   they have to be, to beat MudBlazor's variant theming — which also beats the disabled styling
   MudBlazor would otherwise apply, leaving a dead button pixel-identical to a live one. */
[b-hpouke6xby] .ca-btn:disabled {
    opacity: .55;
}
/* _content/VisitPlus.Shared/Pages/DeleteAccountPage.razor.rz.scp.css */
/* ============================================================
   Delete account (Figma 2281-16228 / -16512 / -16703). Prefix: del-
   Navy patterned header + warning list + red CTA, a confirm
   dialog, and a full-screen success view (→ Welcome).
   ============================================================ */

.del-shell[b-8uklw2a08h] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.del-hdr[b-8uklw2a08h] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 20px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.28) 100%);
}

.del-hdr__pattern[b-8uklw2a08h] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.del-back[b-8uklw2a08h] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: -4px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.6px;
    cursor: pointer;
}

/* ===== Scroller ===== */
.del-scroller[b-8uklw2a08h] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 28px 20px 24px;
    background: #f4f6f8;
}

    .del-scroller[b-8uklw2a08h]::-webkit-scrollbar {
        display: none;
    }

.del-title[b-8uklw2a08h] {
    margin: 8px 0 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1.04px;
    color: #297381;
}

.del-lead[b-8uklw2a08h] {
    margin: 24px 0 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: #2c2f34;
}

.del-card[b-8uklw2a08h] {
    display: flex;
    flex-direction: column;
    gap: 21px;
    margin-top: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid #ff9fa4;
    border-radius: 18px;
}

.del-warnicon[b-8uklw2a08h] {
    width: 60px;
    height: 60px;
}

.del-warn[b-8uklw2a08h] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.del-warn__icon[b-8uklw2a08h] {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.del-warn__text[b-8uklw2a08h] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.2px;
    color: #e91923;
}

.del-note[b-8uklw2a08h] {
    margin: 32px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.5px;
    color: #5b616e;
}

/* ===== Sticky action bar ===== */
.del-bar[b-8uklw2a08h] {
    flex: 0 0 auto;
    padding: 12px 20px calc(env(safe-area-inset-bottom, 0px) + 24px);
    background: #f4f6f8;
}

.del-btn[b-8uklw2a08h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    padding: 12px 20px;
    border: none;
    border-radius: 14px;
    background: #e91923;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

.del-btn:disabled[b-8uklw2a08h] {
    opacity: .6;
    cursor: not-allowed;
}

.del-btnicon[b-8uklw2a08h] {
    width: 24px;
    height: 24px;
    flex: 0 0 auto;
}

/* ===== Confirm dialog ===== */
.del-overlay[b-8uklw2a08h] {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(20, 27, 37, .55);
}

.del-dialog[b-8uklw2a08h] {
    position: fixed;
    z-index: 1401;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% - 48px);
    max-width: 360px;
    box-sizing: border-box;
    padding: 24px 20px 20px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,.24);
}

.del-dialog__title[b-8uklw2a08h] {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: #e91923;
}

.del-dialog__msg[b-8uklw2a08h] {
    margin: 8px 0 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.2px;
    color: #2c2f34;
}

.del-dialog__actions[b-8uklw2a08h] {
    display: flex;
    gap: 10px;
    margin-top: 24px;
}

.del-dbtn[b-8uklw2a08h] {
    flex: 1 1 0;
    height: 48px;
    border-radius: 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

.del-dbtn--cancel[b-8uklw2a08h] {
    background: #fff;
    border: 1px solid #d8dbdf;
    color: var(--vp-brand-primary);
}

.del-dbtn--delete[b-8uklw2a08h] {
    background: #e91923;
    border: none;
    color: #fff;
}

/* ===== Success screen ===== */
.del-success[b-8uklw2a08h] {
    position: relative;
    height: 100vh;
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 40px 20px calc(40px + env(safe-area-inset-bottom, 0px));
    background: #f4f6f8;
    overflow: hidden;
}

.del-success__corner[b-8uklw2a08h] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

.del-success__content[b-8uklw2a08h] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    max-width: 340px;
    margin-bottom: 6vh;
}

.del-success__icon[b-8uklw2a08h] {
    display: block;
    /* Figma frame 2281:16739 is 122x122, but the artwork inside it is 95.74x101.67 and the
       exported SVG carries preserveAspectRatio="none" — sizing the box square would stretch it. */
    width: 96px;
    height: 102px;
}

.del-success__title[b-8uklw2a08h] {
    margin: 44px 0 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.6px;
    color: #c74307;
}

.del-success__msg[b-8uklw2a08h] {
    margin: 12px 0 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.2px;
    color: #5b616e;
}

.del-success__btn[b-8uklw2a08h] {
    margin-top: 40px;
    width: 196px;
    height: 52px;
    padding: 0 20px;
    border: none;
    border-radius: 14px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

/* ===== Focus visibility ===== */
.del-back:focus-visible[b-8uklw2a08h],
.del-btn:focus-visible[b-8uklw2a08h],
.del-dbtn:focus-visible[b-8uklw2a08h],
.del-success__btn:focus-visible[b-8uklw2a08h] {
    outline: 2px solid var(--vp-brand-secondary);
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/DetailsNotFoundPage.razor.rz.scp.css */
/* ============================================================
   Details Not Found page shell (spec §93).
   Prefix: dnfp-  Same header/scroller frame as the other
   redesigned screens; the body itself is the shared
   DetailsNotFound component.
   ============================================================ */

.dnfp-shell[b-cl3tu5vkbp] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* no min-height:100vh — it beats dvh when the URL bar shows */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}

.dnfp-hdr[b-cl3tu5vkbp] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}

.dnfp-hdr__pattern[b-cl3tu5vkbp] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.dnfp-back[b-cl3tu5vkbp] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin-left: -6px;
    border: none;
    background: none;
    cursor: pointer;
}

.dnfp-hdr__title[b-cl3tu5vkbp] {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}

.dnfp-scroller[b-cl3tu5vkbp] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #fff;
}

    .dnfp-scroller[b-cl3tu5vkbp]::-webkit-scrollbar {
        display: none;
    }

.dnfp-back:focus-visible[b-cl3tu5vkbp] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/EditAdditionalDetails.razor.rz.scp.css */
/* ============================================================
   Edit additional details (Figma 2689-35998).
   Prefix: ead-  Same shell/header/field geometry as the contact
   form (ecd-): brand header, 52px fields, sticky primary button.
   No info banner here — the design has none. Locked fields (U/R,
   Medicare, DVA) are grey — health-network owned.
   ============================================================ */

.ead-shell[b-tqrq77rlk6] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* no min-height:100vh — it beats dvh when the URL bar shows, pushing the bar off-screen */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.ead-hdr[b-tqrq77rlk6] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}

.ead-hdr__pattern[b-tqrq77rlk6] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.ead-back[b-tqrq77rlk6] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin-left: -6px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
}

.ead-hdr__title[b-tqrq77rlk6] {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}

/* ===== Scroller ===== */
.ead-scroller[b-tqrq77rlk6] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f4f6f8;
}

    .ead-scroller[b-tqrq77rlk6]::-webkit-scrollbar {
        display: none;
    }

.ead-body[b-tqrq77rlk6] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Bottom padding clears the sticky action bar (52px button + 12/16px padding). */
    padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 96px);
}

/* ===== Fields ===== */
.ead-fields[b-tqrq77rlk6] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ead-field[b-tqrq77rlk6] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ead-field__label[b-tqrq77rlk6] {
    padding: 2px 4px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.4px;
    line-height: 1.3;
    color: #060606;
}

.ead-field__input[b-tqrq77rlk6] {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 12px 10px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.3;
    color: #000;
}

    .ead-field__input:focus-visible[b-tqrq77rlk6] {
        outline: none;
        border-color: #2570eb;
        box-shadow: 0 0 0 3px #ddf4ff;
    }

/* Locked field: the box owns the border, the input inside drops its own chrome. Safari greys
   disabled text on its own — pin the colour so both engines match the design. */
.ead-field__box[b-tqrq77rlk6] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 12px 10px;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
}

.ead-field__box--locked[b-tqrq77rlk6] {
    background: #f7f8f8;
}

.ead-field__input--locked[b-tqrq77rlk6] {
    height: auto;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: #6b7280;
    -webkit-text-fill-color: #6b7280;
    opacity: 1; /* iOS Safari fades disabled inputs to ~0.4 */
}

/* ===== Error state (load failure) ===== */
.ead-error[b-tqrq77rlk6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 48px 24px;
    text-align: center;
}

.ead-error__title[b-tqrq77rlk6] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: #26364a;
}

/* ===== Sticky bottom action bar ===== */
.ead-actions[b-tqrq77rlk6] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: #fff;
}

.ead-btn-primary[b-tqrq77rlk6] {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 14px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

    .ead-btn-primary:disabled[b-tqrq77rlk6] {
        opacity: .5;
        cursor: default;
    }

    .ead-btn-primary:not(:disabled):hover[b-tqrq77rlk6] {
        background: #1e2b3c;
    }

.ead-back:focus-visible[b-tqrq77rlk6],
.ead-btn-primary:focus-visible[b-tqrq77rlk6] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/EditContactInformation.razor.rz.scp.css */
/* ============================================================
   Edit your contact details (Figma 2661-26463 / 2661-27974).
   Prefix: ecd-  Same shell/header/field geometry as Add Next of
   Kin (ak-) and the record it edits (lpd-): brand header, blue
   info banner, 52px fields, sticky primary button. Locked fields
   (name, DOB) are grey — health-network owned.
   ============================================================ */

.ecd-shell[b-datukkapfg] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* no min-height:100vh — it beats dvh when the URL bar shows, pushing the bar off-screen */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.ecd-hdr[b-datukkapfg] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}

.ecd-hdr__pattern[b-datukkapfg] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.ecd-back[b-datukkapfg] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin-left: -6px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
}

.ecd-hdr__title[b-datukkapfg] {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}

/* ===== Scroller ===== */
.ecd-scroller[b-datukkapfg] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f4f6f8;
}

    .ecd-scroller[b-datukkapfg]::-webkit-scrollbar {
        display: none;
    }

.ecd-body[b-datukkapfg] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    /* Bottom padding clears the sticky action bar (52px button + 12/16px padding). */
    padding: 16px 16px calc(env(safe-area-inset-bottom, 0px) + 96px);
}

/* ===== Info banner ===== */
.ecd-notify[b-datukkapfg] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 12px 10px;
    background: #ddf4ff;
    border: 1px solid #bfd7fe;
    border-radius: 12px;
}

.ecd-notify__text[b-datukkapfg] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.2px;
    /* WCAG AA (1.4.3): blue/700 #1d64d8 on #ddf4ff = 4.8:1; Figma's blue/500 #3b82f6 was 3.23:1. */
    color: #1d64d8;
}

/* ===== Fields ===== */
.ecd-fields[b-datukkapfg] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ecd-field[b-datukkapfg] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ecd-field__label[b-datukkapfg] {
    padding: 2px 4px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.4px;
    line-height: 1.3;
    color: #060606;
}

.ecd-field__input[b-datukkapfg] {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 12px 10px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.3;
    color: #000;
}

    .ecd-field__input:focus-visible[b-datukkapfg] {
        outline: none;
        border-color: #2570eb;
        box-shadow: 0 0 0 3px #ddf4ff;
    }

/* Locked field: the box owns the border so the trailing icon sits inside it, and the input
   inside drops its own chrome. Safari greys disabled text on its own — pin the colour so both
   engines match the design. */
.ecd-field__box[b-datukkapfg] {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 52px;
    padding: 12px 10px;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
}

.ecd-field__box--locked[b-datukkapfg] {
    background: #f7f8f8;
}

.ecd-field__input--locked[b-datukkapfg] {
    height: auto;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    color: #6b7280;
    -webkit-text-fill-color: #6b7280;
    opacity: 1; /* iOS Safari fades disabled inputs to ~0.4 */
}

.ecd-field__ico[b-datukkapfg] {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    display: block;
}

/* ===== Error state (load failure) ===== */
.ecd-error[b-datukkapfg] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 48px 24px;
    text-align: center;
}

.ecd-error__title[b-datukkapfg] {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: #26364a;
}

/* ===== Sticky bottom action bar ===== */
.ecd-actions[b-datukkapfg] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: #fff;
}

.ecd-btn-primary[b-datukkapfg] {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 14px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

    .ecd-btn-primary:disabled[b-datukkapfg] {
        opacity: .5;
        cursor: default;
    }

    .ecd-btn-primary:not(:disabled):hover[b-datukkapfg] {
        background: #1e2b3c;
    }

.ecd-back:focus-visible[b-datukkapfg],
.ecd-btn-primary:focus-visible[b-datukkapfg] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/EditFirstName.razor.rz.scp.css */
/* ============================================================
   My Account: Edit your Name (Figma 2421:30752).
   Prefix: ef-. Same app-shell as My information: navy patterned header,
   single field, sticky Cancel / Save bar.
   ============================================================ */

.ef-shell[b-p5ma6db6pp] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.ef-hdr[b-p5ma6db6pp] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 20px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.28) 100%);
}

.ef-hdr__pattern[b-p5ma6db6pp] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.ef-back[b-p5ma6db6pp] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: -4px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.6px;
    cursor: pointer;
}

/* ===== Body ===== */
.ef-scroller[b-p5ma6db6pp] {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 24px;
}

.ef-field[b-p5ma6db6pp] {
    display: flex;
    flex-direction: column;
}

.ef-label[b-p5ma6db6pp] {
    padding: 0 4px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.4px;
    color: #2c2f34;
}

.ef-input[b-p5ma6db6pp] {
    width: 100%;
    height: 52px;
    padding: 0 12px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    color: #000;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.ef-input:focus[b-p5ma6db6pp] {
    border-color: var(--vp-brand-primary);
    box-shadow: 0 0 0 1px var(--vp-brand-primary);
}

/* ===== Sticky action bar ===== */
.ef-bar[b-p5ma6db6pp] {
    flex: 0 0 auto;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: rgba(247, 248, 250, .92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 -4px 7.65px rgba(0,0,0,.05);
}

.ef-bar__row[b-p5ma6db6pp] {
    display: flex;
    gap: 10px;
}

.ef-btn[b-p5ma6db6pp] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    height: 52px;
    padding: 12px 20px;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

.ef-btn--primary[b-p5ma6db6pp] {
    background: var(--vp-brand-primary);
    color: #fff;
}

.ef-btn--primary:disabled[b-p5ma6db6pp] {
    opacity: .6;
    cursor: default;
}

.ef-btn--secondary[b-p5ma6db6pp] {
    background: #edeef1;
    color: var(--vp-brand-primary);
}

.ef-back:focus-visible[b-p5ma6db6pp],
.ef-btn:focus-visible[b-p5ma6db6pp] {
    outline: 2px solid var(--vp-brand-secondary);
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/EditMobileNumber.razor.rz.scp.css */
/* ============================================================
   My Account: Edit Mobile Number (Figma 3121:36268).
   Prefix: em-. Same app-shell as My information: navy patterned
   header, scrolling body, sticky primary CTA.
   ============================================================ */

.em-shell[b-qelztf4m2l] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.em-hdr[b-qelztf4m2l] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 20px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.28) 100%);
}

.em-hdr__pattern[b-qelztf4m2l] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.em-back[b-qelztf4m2l] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: -4px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.6px;
    cursor: pointer;
}

/* ===== Body ===== */
.em-scroller[b-qelztf4m2l] {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 24px;
}

/* Current number (masked to its last 3 digits) */
.em-current[b-qelztf4m2l] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 24px;
}

.em-current__label[b-qelztf4m2l] {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.4px;
    color: #2c2f34;
}

.em-current__value[b-qelztf4m2l] {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.5px;
    color: #000000;
}

.em-field[b-qelztf4m2l] {
    display: flex;
    flex-direction: column;
}

.em-label[b-qelztf4m2l] {
    padding: 0 4px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.4px;
    color: #2c2f34;
}

/* Phone row: fixed +61 chip + number field (same shape as /setup-phone). */
.em-phone-row[b-qelztf4m2l] {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.em-cc[b-qelztf4m2l] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 52px;
    padding: 12px 16px 12px 10px;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
}

.em-flag[b-qelztf4m2l] {
    width: 36px;
    height: 24px;
    border-radius: 5px;
    box-shadow: 0 0 0.136px rgba(66, 71, 76, 0.32), 0 2.172px 1.629px rgba(66, 71, 76, 0.08);
}

.em-cc-code[b-qelztf4m2l] {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.5px;
    color: #000000;
}

.em-number[b-qelztf4m2l] {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
}

.em-number-input[b-qelztf4m2l] {
    flex: 1 0 0;
    min-width: 0;
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    padding: 12px 10px;
    background-color: #ffffff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.5px;
    color: #000000;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.em-number-input[b-qelztf4m2l]::placeholder {
    color: #9aa1ad;
    font-weight: 500;
}

.em-number-input:focus[b-qelztf4m2l] {
    border-color: var(--vp-brand-primary);
    box-shadow: 0 0 0 1px var(--vp-brand-primary);
}

.em-error[b-qelztf4m2l] {
    margin: 8px 0 0;
    padding: 0 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.2px;
    color: #fb2c36;
}

/* ===== Sticky action bar ===== */
.em-bar[b-qelztf4m2l] {
    flex: 0 0 auto;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: rgba(247, 248, 250, .92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 -4px 7.65px rgba(0,0,0,.05);
}

.em-btn[b-qelztf4m2l] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    padding: 12px 20px;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

.em-btn--primary[b-qelztf4m2l] {
    background: var(--vp-brand-primary);
    color: #fff;
}

.em-btn--primary:disabled[b-qelztf4m2l] {
    opacity: .6;
    cursor: default;
}

.em-back:focus-visible[b-qelztf4m2l],
.em-btn:focus-visible[b-qelztf4m2l] {
    outline: 2px solid var(--vp-brand-secondary);
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/EditNextOfKin.razor.rz.scp.css */
/* ============================================================
   Edit Next of Kin (Figma 843-36537 / 860-37507 / 843-36721).
   Prefix: ek-  Mirror of the Add form (ak-): per-hospital teal
   header (back + title), blue info banner, three pre-filled
   fields, sticky "Update Next of Kin" button.
   ============================================================ */

.ek-shell[b-laqpm5t1hm] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* no min-height:100vh — it beats dvh when the URL bar shows, pushing the bar off-screen */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.ek-hdr[b-laqpm5t1hm] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}

.ek-hdr__pattern[b-laqpm5t1hm] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.ek-back[b-laqpm5t1hm] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin-left: -6px;
    border: none;
    background: none;
    cursor: pointer;
}

.ek-hdr__title[b-laqpm5t1hm] {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}

/* ===== Scroller ===== */
.ek-scroller[b-laqpm5t1hm] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f4f6f8;
}

    .ek-scroller[b-laqpm5t1hm]::-webkit-scrollbar {
        display: none;
    }

.ek-body[b-laqpm5t1hm] {
    padding: 20px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* ===== Info banner ===== */
.ek-notify[b-laqpm5t1hm] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 12px 10px;
    background: #ddf4ff;
    border: 1px solid #bfd7fe;
    border-radius: 12px;
}

.ek-notify__text[b-laqpm5t1hm] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.2px;
    /* WCAG AA (1.4.3): blue/700 #1d64d8 on #ddf4ff = 4.8:1; blue/500 #3b82f6 was 3.23:1. */
    color: #1d64d8;
}

.ek-missing[b-laqpm5t1hm] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    color: #6b7280;
}

/* ===== Fields ===== */
.ek-fields[b-laqpm5t1hm] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ek-field[b-laqpm5t1hm] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ek-field__label[b-laqpm5t1hm] {
    padding: 0 4px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.4px;
    color: #060606;
}

.ek-field__input[b-laqpm5t1hm] {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 12px 10px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.3;
    color: #0e0f0c;
}

    .ek-field__input:focus-visible[b-laqpm5t1hm] {
        outline: none;
        border-color: #2570eb;
        box-shadow: 0 0 0 3px rgba(37,112,235,.18);
    }

/* ===== Sticky bottom action bar ===== */
.ek-actions[b-laqpm5t1hm] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: #f4f6f8;
}

.ek-btn-primary[b-laqpm5t1hm] {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 14px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

    .ek-btn-primary:disabled[b-laqpm5t1hm] {
        opacity: .5;
        cursor: default;
    }

    .ek-btn-primary:not(:disabled):hover[b-laqpm5t1hm] {
        background: #1e2b3c;
    }

.ek-back:focus-visible[b-laqpm5t1hm],
.ek-btn-primary:focus-visible[b-laqpm5t1hm] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/EnableBiometrics.razor.rz.scp.css */
/* First-login "Enable biometrics?" intro (Figma 2097:13831). */

.eb-screen[b-fth2t8cv3w] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    min-height: 100vh;
    width: 100%;
    padding: 70px 35px 40px;
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 600px while the background reaches the
       real viewport edges. Below 600px this resolves to the 35px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(35px, calc((100% - 600px) / 2));
    background: #f4f6f8;
    overflow: hidden;
}

/* Faint decorative brand sparkle, top-right (matches the Sign In screen). */
.eb-corner[b-fth2t8cv3w] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

.eb-content[b-fth2t8cv3w] {
    z-index: 1;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
}

.eb-icon[b-fth2t8cv3w] {
    width: 96px;
    height: 96px;
    margin-bottom: 18px;
    color: #26364a;
}

.eb-title[b-fth2t8cv3w] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.6px;
    color: #297381;
}

.eb-body[b-fth2t8cv3w] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.2px;
    color: #2c2f34;
}

.eb-footer[b-fth2t8cv3w] {
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

/* ::deep + !important so these reach and override MudButton's own filled/default styling
   (the scope attribute isn't applied to the child component's rendered <button>). */
[b-fth2t8cv3w] .eb-btn {
    height: 52px;
    border-radius: 14px;
    text-transform: none;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
}

[b-fth2t8cv3w] .eb-btn-primary {
    background-color: var(--vp-visitplus-primary) !important;
    color: #ffffff !important;
}

[b-fth2t8cv3w] .eb-btn-outline {
    background-color: #ffffff !important;
    border: 1px solid #d8dbdf !important;
    color: var(--vp-visitplus-primary) !important;
}

.eb-note[b-fth2t8cv3w] {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: #616161;
    text-align: center;
}
/* _content/VisitPlus.Shared/Pages/FAQ.razor.rz.scp.css */
/* ============================================================
   FAQs (Figma 2430-16602). Prefix: faq-. Navy patterned header +
   accordion cards. Content is CMS-backed (FaqViewModel).
   ============================================================ */

.faq-shell[b-niathaznz8] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.faq-hdr[b-niathaznz8] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 20px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.28) 100%);
}

.faq-hdr__pattern[b-niathaznz8] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.faq-back[b-niathaznz8] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: -4px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.6px;
    cursor: pointer;
}

/* ===== Scroller ===== */
.faq-scroller[b-niathaznz8] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
    background: #f4f6f8;
}

    .faq-scroller[b-niathaznz8]::-webkit-scrollbar {
        display: none;
    }

/* ===== Accordion card ===== */
.faq-card[b-niathaznz8] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px 12px 12px 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

.faq-q[b-niathaznz8] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 38px;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
    font-family: inherit;
}

.faq-q__text[b-niathaznz8] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.2px;
    color: #1e55af;
}

.faq-icon[b-niathaznz8] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border-radius: 22px;
    background: #eceff1;
}

.faq-a[b-niathaznz8] {
    padding-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.5px;
    color: #6b7280;
}

    /* Keep any CMS-authored HTML inside the answer readable/contained. */
    .faq-a :deep(p)[b-niathaznz8] {
        margin: 0 0 8px;
    }

    .faq-a :deep(p:last-child)[b-niathaznz8] {
        margin-bottom: 0;
    }

    .faq-a :deep(a)[b-niathaznz8] {
        color: #1e55af;
    }

/* ===== States ===== */
.faq-state[b-niathaznz8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 0;
}

.faq-state__text[b-niathaznz8] {
    font-size: 14px;
    font-weight: 600;
    color: #5b616e;
}

.faq-alert[b-niathaznz8] {
    padding: 12px 14px;
    border-radius: 12px;
    background: #fbe9e1;
    color: #c74307;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

.faq-alert--info[b-niathaznz8] {
    background: #eaf1fb;
    color: #1e55af;
}

.faq-retry[b-niathaznz8] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 12px;
    height: 44px;
    padding: 0 18px;
    border: 1px solid var(--vp-brand-primary);
    border-radius: 14px;
    background: none;
    color: var(--vp-brand-primary);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* ===== Focus visibility ===== */
.faq-back:focus-visible[b-niathaznz8],
.faq-q:focus-visible[b-niathaznz8],
.faq-retry:focus-visible[b-niathaznz8] {
    outline: 2px solid var(--vp-brand-secondary);
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/ForgotPassword.razor.rz.scp.css */
/* ============================================================
   Reset password — request code (Figma 156:1166).
   Light shell + sparkle, top-anchored, left-aligned. No logo:
   the "Reset password" title sits just below the back button.
   ============================================================ */
.fp-screen[b-y6io4y7wqo] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /* Figma: content (logo/title) sits at y=145, i.e. 35px below the 40px back button (top 70). */
    padding: max(125px, calc(95px + env(safe-area-inset-top, 0px))) 20px calc(32px + env(safe-area-inset-bottom, 0px));
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 600px while the background reaches the
       real viewport edges. Below 600px this resolves to the 20px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    overflow: hidden;
}

.fp-corner[b-y6io4y7wqo] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

[b-y6io4y7wqo] .fp-back {
    position: absolute;
    top: max(50px, calc(20px + env(safe-area-inset-top, 0px)));
    left: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: #ffffff;
    border-radius: 72px;
    color: var(--vp-visitplus-primary);
    box-shadow: 0 1px 3px rgba(34, 54, 76, 0.12);
}

[b-y6io4y7wqo] .fp-back:hover {
    background-color: #eef0f3;
}

.fp-content[b-y6io4y7wqo] {
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.fp-title[b-y6io4y7wqo] {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.04px;
    color: #297381;
}

/* Info banner (Figma "Notify" — blue/100 fill, blue/200 border, blue/500 text) */
[b-y6io4y7wqo] .fp-info {
    background-color: #ddf4ff !important;
    border: 1px solid #bfd7fe;
    border-radius: 12px;
    margin-bottom: 24px;
}

[b-y6io4y7wqo] .fp-info .mud-alert-icon,
[b-y6io4y7wqo] .fp-info .mud-icon-root {
    color: #1d64d8;
}

[b-y6io4y7wqo] .fp-info .mud-alert-message {
    /* WCAG 2.1/2.2 AA (1.4.3): blue/700 #1d64d8 on #ddf4ff = 4.8:1.
       Figma's blue/500 #3b82f6 was only 3.23:1 and failed the 4.5:1 minimum. */
    color: #1d64d8;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.2px;
}

[b-y6io4y7wqo] .fp-notify {
    margin-bottom: 16px;
}

/* Field */
.fp-field[b-y6io4y7wqo] {
    margin-bottom: 28px;
}

.fp-label[b-y6io4y7wqo] {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #22364c;
}

/* ============================================================
   Input colour states — Figma 315:1193 "40px Input".
   Default / Typing(focus) / Filled / Error / Disabled.
   ============================================================ */
[b-y6io4y7wqo] .fp-input .mud-input.mud-input-outlined {
    border-radius: 12px;
    background-color: #ffffff;
    height: 52px;
    align-items: center;
}

/* Default border: gray/200 */
[b-y6io4y7wqo] .fp-input .mud-input-outlined-border {
    border-radius: 12px;
    border-color: #d8dbdf;
    border-width: 1px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Value text: black when filled; placeholder: gray/500 */
[b-y6io4y7wqo] .fp-input input.mud-input-slot,
[b-y6io4y7wqo] .fp-input .mud-input.mud-input-outlined input.mud-input-slot {
    color: #000000;
    font-weight: 600;
    padding-top: 0;
    padding-bottom: 0;
}

[b-y6io4y7wqo] .fp-input input.mud-input-slot::placeholder {
    color: #6b7280;
    opacity: 1;
}

/* Typing (focus): blue/600 border + blue/100 ring (MudBlazor 8 uses :focus-within, not .mud-focused) */
[b-y6io4y7wqo] .fp-input .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: #2570eb !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 3px #ddf4ff;
}

/* Error: orange/700 border + orange/100 ring (override MudBlazor's theme red) */
[b-y6io4y7wqo] .fp-input.mud-input-error .mud-input-outlined-border,
[b-y6io4y7wqo] .fp-input .mud-input.mud-input-error .mud-input-outlined-border {
    border-color: #c74307 !important;
    box-shadow: 0 0 0 2px #fff5e5;
}

/* Disabled: neutral/50 fill + neutral/300 text */
[b-y6io4y7wqo] .fp-input .mud-input.mud-input-outlined.mud-disabled {
    background-color: #f7f8f8;
}

[b-y6io4y7wqo] .fp-input .mud-input.mud-disabled input.mud-input-slot {
    color: #b6bac3 !important;
}

/* Error helper: Figma shows icon + orange text, NOT the legacy pink box (app.css:1039). */
[b-y6io4y7wqo] .fp-input.mud-input-error .mud-input-control-helper-container {
    background-color: transparent !important;
    padding: 4px 0 0 24px !important;
    margin-top: 4px !important;
}

[b-y6io4y7wqo] .fp-input.mud-input-error .mud-input-control-helper-container::before {
    left: 0 !important;
    width: 16px !important;
    height: 16px !important;
    border-color: #c74307 !important;
    color: #c74307 !important;
    font-size: 11px !important;
}

[b-y6io4y7wqo] .fp-input.mud-input-error .mud-input-helper-text {
    color: #c74307 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px;
}

/* Submit button (navy filled; muted grey when disabled) */
[b-y6io4y7wqo] .fp-submit {
    height: 52px;
    border-radius: 14px;
    text-transform: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
    background-color: #22364c !important;
    color: #ffffff !important;
}

[b-y6io4y7wqo] .fp-submit:hover {
    background-color: #1b2c3f !important;
}

[b-y6io4y7wqo] .fp-submit:disabled,
[b-y6io4y7wqo] .fp-submit.mud-button-disabled {
    background-color: #9aa1ad !important;
    color: #ffffff !important;
    opacity: 1;
}
/* _content/VisitPlus.Shared/Pages/Home.razor.rz.scp.css */
/* ============================================================
   Home page (Figma: node 540-10841 / 1118-14158 / 1118-14960)
   Self-contained app shell: navy header that collapses into a
   compact "selected care" bar on scroll, appointment cards,
   and a 3-tab bottom bar. Prefix: hm-
   ============================================================ */

.hm-shell[b-aq8gcbhna3] {
    position: relative;
    height: 100dvh;
    min-height: 100vh;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

.hm-scroller[b-aq8gcbhna3] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .hm-scroller[b-aq8gcbhna3]::-webkit-scrollbar {
        display: none;
    }

/* ===================== Header ===================== */
.hm-hdr[b-aq8gcbhna3] {
    position: sticky;
    top: 0;
    z-index: 5;
    overflow: hidden; /* clip the pattern layer + its blur to the rounded header */
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    border-radius: 0 0 22px 22px;
    /* Base colour is the hospital's brand primary; the gradient adds depth on any hue. */
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
    transition: padding-bottom .3s ease, border-radius .3s ease;
}

    /* Fixed white cross-pattern layer (Figma 1646-18770 "layer"): over the colour, behind content.
       Pinned to the TOP-RIGHT corner at natural size (402x215) so on wide screens it stays a clean
       corner accent instead of stretching across the full width. Header overflow:hidden clips it. */
    .hm-hdr__pattern[b-aq8gcbhna3] {
        position: absolute;
        top: 0;
        right: 0;
        width: 402px;
        height: 215px;
        z-index: 0;
        pointer-events: none;
    }

.hm-hdr__bar[b-aq8gcbhna3] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
}

.hm-hdr__identity[b-aq8gcbhna3] {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    min-height: 48px;
}

/* Expanded greeting */
.hm-hdr__greet[b-aq8gcbhna3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    visibility: visible;
    transition: opacity .25s ease, visibility .25s ease;
}

.hm-hdr__hello[b-aq8gcbhna3] {
    color: rgba(255,255,255,.85);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.2px;
}

.hm-hdr__wave[b-aq8gcbhna3] {
    font-size: 14px;
}

.hm-hdr__name[b-aq8gcbhna3] {
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Collapsed compact identity (overlaps the greeting, cross-fades in) */
.hm-hdr__compact[b-aq8gcbhna3] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* override the UA <button> centering — keep it left-aligned */
    gap: 12px;
    /* reset button chrome */
    background: none;
    border: none;
    padding: 0;
    text-align: left;
    font: inherit;
    /* hidden (and unfocusable) until collapsed */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    cursor: pointer;
    transition: opacity .25s ease, visibility .25s ease;
}

.hm-hdr__compact-logo[b-aq8gcbhna3] {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .hm-hdr__compact-logo img[b-aq8gcbhna3] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.hm-hdr__compact-text[b-aq8gcbhna3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hm-hdr__compact-label[b-aq8gcbhna3] {
    color: rgba(255,255,255,.7);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

.hm-hdr__compact-name[b-aq8gcbhna3] {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.15;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Action icons (persist across both states) */
.hm-hdr__actions[b-aq8gcbhna3] {
    position: relative;
    z-index: 1;
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

.hm-iconbtn[b-aq8gcbhna3] {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,.2);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.hm-iconbtn__glyph[b-aq8gcbhna3] {
    width: 20px;
    height: 20px;
}

/* Figma 2558-30922: 16px orange pill riding the bell's top-right corner. */
.hm-iconbtn__badge[b-aq8gcbhna3] {
    position: absolute;
    top: -4px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: #f05b06;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* "Hospital:" pill (collapses away on scroll) */
.hm-hdr__pillwrap[b-aq8gcbhna3] {
    position: relative;
    z-index: 1;
    overflow: hidden;
    max-height: 120px;
    opacity: 1;
    visibility: visible;
    margin-top: 14px;
    transition: max-height .3s ease, opacity .22s ease, margin-top .3s ease, visibility .3s ease;
}

.hm-hdr__pill[b-aq8gcbhna3] {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background: rgba(0,0,0,.2); /* neutral darken — works over any hospital colour */
    border: none;
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
    text-align: left;
}

.hm-hdr__pill-label[b-aq8gcbhna3] {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    flex: 0 0 auto;
}

.hm-hdr__pill-card[b-aq8gcbhna3] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border-radius: 10px;
    padding: 7px 10px;
}

.hm-hdr__pill-logo[b-aq8gcbhna3] {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .hm-hdr__pill-logo img[b-aq8gcbhna3] {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

.hm-hdr__pill-name[b-aq8gcbhna3] {
    flex: 1 1 auto;
    min-width: 0;
    color: #3d404a;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ---- Collapsed state (toggled by home-collapse.js) ---- */
.hm-hdr--collapsed[b-aq8gcbhna3] {
    padding-bottom: 12px;
    border-radius: 0 0 18px 18px;
}

    .hm-hdr--collapsed .hm-hdr__greet[b-aq8gcbhna3] {
        opacity: 0;
        visibility: hidden;
    }

    .hm-hdr--collapsed .hm-hdr__compact[b-aq8gcbhna3] {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .hm-hdr--collapsed .hm-hdr__pillwrap[b-aq8gcbhna3] {
        max-height: 0;
        opacity: 0;
        visibility: hidden;
        margin-top: 0;
    }

/* ===================== Body ===================== */
.hm-body[b-aq8gcbhna3] {
    padding: 18px 16px 0;
}

/* ===================== Empty state (Figma 540-11135) ===================== */
.hm-empty[b-aq8gcbhna3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 318px;
    margin: 0 auto;
    padding-top: 58px;
    text-align: center;
}

.hm-empty__art[b-aq8gcbhna3] {
    position: relative;
    width: 172px;
    height: 172px;
}

.hm-empty__doc[b-aq8gcbhna3] {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: auto;
    overflow: visible; /* let the paper drop-shadows render outside the viewBox */
    color: var(--vp-brand-secondary); /* folded-corner accent follows the hospital */
}

.hm-empty__badge[b-aq8gcbhna3] {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--vp-brand-secondary); /* badge colour follows the hospital */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 3px rgba(255,255,255,.9), 0 4px 10px rgba(13,18,37,.25);
}

    .hm-empty__badge img[b-aq8gcbhna3] {
        width: 22px;
        height: 22px;
        display: block;
    }

.hm-empty__title[b-aq8gcbhna3] {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #26364a;
}

.hm-empty__text[b-aq8gcbhna3] {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -.5px;
    color: #6b7280;
}

.hm-section-title[b-aq8gcbhna3] {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: #0e0f0c;
    letter-spacing: -.3px;
}

.hm-section-head[b-aq8gcbhna3] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-top: 24px;
}

    .hm-section-head .hm-section-title[b-aq8gcbhna3] {
        margin-bottom: 12px;
    }

.hm-link[b-aq8gcbhna3] {
    background: none;
    border: none;
    padding: 0;
    color: var(--vp-brand-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

/* Appointment card styles now live in the shared VpApptCard component (vpc-). */

.hm-bottom-space[b-aq8gcbhna3] {
    /* clear the shared floating pill bar so the last card can scroll above it */
    height: 96px;
}

/* ===================== Focus (keyboard) ===================== */
.hm-hdr__pill:focus-visible[b-aq8gcbhna3],
.hm-hdr__compact:focus-visible[b-aq8gcbhna3],
.hm-iconbtn:focus-visible[b-aq8gcbhna3],
.hm-btn-outline:focus-visible[b-aq8gcbhna3],
.hm-btn-fill:focus-visible[b-aq8gcbhna3],
.hm-link:focus-visible[b-aq8gcbhna3] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
    border-radius: 8px;
}

/* ===================== Reduced motion ===================== */
@media (prefers-reduced-motion: reduce) {
    .hm-hdr[b-aq8gcbhna3],
    .hm-hdr__greet[b-aq8gcbhna3],
    .hm-hdr__compact[b-aq8gcbhna3],
    .hm-hdr__pillwrap[b-aq8gcbhna3] {
        transition: none;
    }
}
/* _content/VisitPlus.Shared/Pages/LinkedPatientDetails.razor.rz.scp.css */
/* ============================================================
   Linked patient details (Figma 2661-28487). Prefix: lpd-
   Per-hospital header (back + "Details") over two read-only
   cards of label/value rows with teal section headings.
   ============================================================ */

.lpd-shell[b-ci4r8se8d3] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.lpd-hdr[b-ci4r8se8d3] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}

.lpd-hdr__pattern[b-ci4r8se8d3] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.lpd-back[b-ci4r8se8d3] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin-left: -6px;
    border: none;
    background: none;
    cursor: pointer;
}

.lpd-hdr__title[b-ci4r8se8d3] {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}

/* ===== Scroller ===== */
.lpd-scroller[b-ci4r8se8d3] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f4f6f8;
}

    .lpd-scroller[b-ci4r8se8d3]::-webkit-scrollbar {
        display: none;
    }

.lpd-body[b-ci4r8se8d3] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 16px 12px 0;
}

.lpd-bottom-space[b-ci4r8se8d3] {
    height: 40px;
}

/* ===== Name-only fallback note ===== */
.lpd-notify[b-ci4r8se8d3] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 12px 10px;
    background: #ddf4ff;
    border: 1px solid #bfd7fe;
    border-radius: 12px;
}

.lpd-notify__text[b-ci4r8se8d3] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.2px;
    /* WCAG AA (1.4.3): blue/700 #1d64d8 on #ddf4ff = 4.8:1; blue/500 #3b82f6 was 3.23:1. */
    color: #1d64d8;
}

/* ===== Section ===== */
.lpd-section[b-ci4r8se8d3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lpd-section__head[b-ci4r8se8d3] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 32px;
    padding: 0 6px;
}

.lpd-section__title[b-ci4r8se8d3] {
    flex: 1 1 auto;
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.5px;
    color: #297381;
}

.lpd-iconbtn[b-ci4r8se8d3] {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    color: #5b616e; /* the inline SVG strokes in currentColor */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lpd-ico[b-ci4r8se8d3] {
    display: block;
    width: 24px;
    height: 24px;
}

/* ===== Card of rows ===== */
.lpd-card[b-ci4r8se8d3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.lpd-row[b-ci4r8se8d3] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eef1f5;
}

.lpd-row--last[b-ci4r8se8d3] {
    padding-bottom: 4px;
    border-bottom: none;
}

.lpd-row__label[b-ci4r8se8d3] {
    padding: 4px 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.5px;
    color: #6b7280;
}

.lpd-row__value[b-ci4r8se8d3] {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.5px;
    color: #26364a;
    overflow-wrap: anywhere;
}

/* ===== Error ===== */
.lpd-error[b-ci4r8se8d3] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 300px;
    margin: 0 auto;
    padding-top: 90px;
    text-align: center;
}

.lpd-error__title[b-ci4r8se8d3] {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.4px;
    color: #26364a;
}

.lpd-btn-primary[b-ci4r8se8d3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 160px;
    height: 52px;
    padding: 0 20px;
    border: none;
    border-radius: 14px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

    .lpd-btn-primary:hover[b-ci4r8se8d3] {
        background: #1e2b3c;
    }

/* ===== Record shortcuts (Figma 2675-25472) ===== */
/* One filled + two outlined buttons stacked under the cards. They stretch full width here, unlike
   the same primary button centred in the error state, hence the width override. */
.lpd-links[b-ci4r8se8d3] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .lpd-links .lpd-btn-primary[b-ci4r8se8d3] {
        width: 100%;
        min-width: 0;
    }

.lpd-btn-outline[b-ci4r8se8d3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    padding: 0 20px;
    border: 1px solid #b6bac3;
    border-radius: 14px;
    background: #fff;
    color: var(--vp-brand-primary);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

    .lpd-btn-outline:hover[b-ci4r8se8d3] {
        background: #f4f6f8;
    }

.lpd-back:focus-visible[b-ci4r8se8d3],
.lpd-iconbtn:focus-visible[b-ci4r8se8d3],
.lpd-btn-primary:focus-visible[b-ci4r8se8d3],
.lpd-btn-outline:focus-visible[b-ci4r8se8d3] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/LinkPatient.razor.rz.scp.css */
/* ============================================================
   Link someone I care for (Figma 2633-35470 / 2633-35832).
   Prefix: lp-  Per-hospital header, blue note, two white form
   cards, sticky primary action. Field styling matches
   AddNextOfKin (ak-) so the redesigned forms stay consistent.
   ============================================================ */

.lp-shell[b-ps8vfxuogv] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.lp-hdr[b-ps8vfxuogv] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}

.lp-hdr__pattern[b-ps8vfxuogv] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.lp-back[b-ps8vfxuogv] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin-left: -6px;
    border: none;
    background: none;
    cursor: pointer;
}

.lp-hdr__title[b-ps8vfxuogv] {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
    text-align: left;
}

/* ===== Scroller ===== */
.lp-scroller[b-ps8vfxuogv] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f4f6f8;
}

    .lp-scroller[b-ps8vfxuogv]::-webkit-scrollbar {
        display: none;
    }

.lp-body[b-ps8vfxuogv] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* bottom padding clears the sticky action bar */
    padding: 16px 12px calc(env(safe-area-inset-bottom, 0px) + 96px);
}

/* ===== Info banner ===== */
.lp-notify[b-ps8vfxuogv] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 8px 12px 10px;
    background: #ddf4ff;
    border: 1px solid #bfd7fe;
    border-radius: 12px;
}

.lp-notify__text[b-ps8vfxuogv] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.2px;
    /* WCAG AA (1.4.3): blue/700 #1d64d8 on #ddf4ff = 4.8:1; blue/500 #3b82f6 was 3.23:1. */
    color: #1d64d8;
}

/* ===== Submit error ===== */
.lp-alert[b-ps8vfxuogv] {
    padding: 10px 12px;
    background: #fdecec;
    border: 1px solid #f3b4b4;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.2px;
    color: #c5221f;
}

/* ===== Section ===== */
.lp-section[b-ps8vfxuogv] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lp-section__title[b-ps8vfxuogv] {
    margin: 0;
    padding: 0 6px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.2px;
    color: #222328;
}

.lp-card[b-ps8vfxuogv] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px 16px 20px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

/* ===== Fields ===== */
.lp-field[b-ps8vfxuogv] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lp-label-row[b-ps8vfxuogv] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
}

.lp-label[b-ps8vfxuogv] {
    padding: 2px 4px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.4px;
    color: #060606;
}

.lp-label-row .lp-label[b-ps8vfxuogv] {
    padding: 0;
}

.lp-help[b-ps8vfxuogv] {
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lp-input[b-ps8vfxuogv] {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 12px 10px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.3;
    color: #0e0f0c;
}

    .lp-input[b-ps8vfxuogv]::placeholder {
        color: #6b7280;
        font-weight: 600;
    }

    .lp-input:focus-visible[b-ps8vfxuogv] {
        outline: none;
        border-color: #2570eb;
        box-shadow: 0 0 0 3px rgba(37,112,235,.18);
    }

.lp-input--error[b-ps8vfxuogv] {
    border-color: #c74307;
}

/* iOS WKWebView renders input[type=date] as a NATIVE control, unlike desktop Safari/Chrome: it
   centres its value, adds its own internal padding, and grows past the declared height, so the DOB
   field ends up taller than the text fields beside it with the date floating in the middle.
   Resetting the appearance hands the box model back to us; the value itself lives in a shadow
   pseudo-element, so text-align on the input alone does nothing — ::-webkit-date-and-time-value
   is what actually moves it left. min-height keeps the row from collapsing while the value is
   empty (a date input has no placeholder — the attribute is ignored on every browser). */
.lp-input[type="date"][b-ps8vfxuogv] {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    text-align: left;
}

    .lp-input[type="date"][b-ps8vfxuogv]::-webkit-date-and-time-value {
        text-align: left;
        margin: 0;
        min-height: 1.3em;
    }

    .lp-input[type="date"][b-ps8vfxuogv]::-webkit-datetime-edit {
        padding: 0;
    }

/* Placeholder for the empty date field. A date input ignores the placeholder attribute, so the hint
   is a span laid over the box (pointer-events:none, so taps still reach the input and open the
   picker). While it shows, the input's own empty rendering has to be suppressed or the two collide:
   desktop Chrome/Firefox draw their own "dd/mm/yyyy" in the value area, iOS draws nothing.
   color:transparent covers the engines without the -webkit- shadow parts; the pseudo-element rule
   covers WebKit/Blink, whose value text ignores the input's own colour. */
.lp-datefield[b-ps8vfxuogv] {
    position: relative;
}

.lp-input--empty[b-ps8vfxuogv] {
    color: transparent;
}

    .lp-input--empty[b-ps8vfxuogv]::-webkit-datetime-edit {
        opacity: 0;
    }

.lp-datefield__hint[b-ps8vfxuogv] {
    position: absolute;
    top: 50%;
    left: 11px; /* input padding-left + 1px border */
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.3;
    color: #6b7280; /* matches .lp-input::placeholder */
}

/* ===== Facility select ===== */
.lp-select[b-ps8vfxuogv] {
    position: relative;
    display: flex;
    align-items: center;
}

.lp-select__input[b-ps8vfxuogv] {
    box-sizing: border-box;
    width: 100%;
    height: 52px;
    padding: 12px 36px 12px 10px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.3;
    color: #0e0f0c;
    /* the chevron is drawn separately to match Figma's icon */
    -webkit-appearance: none;
    appearance: none;
}

    /* "Select facility" reads as placeholder grey until a real option is chosen. */
    .lp-select__input--placeholder[b-ps8vfxuogv] {
        color: #6b7280;
    }

    .lp-select__input:focus-visible[b-ps8vfxuogv] {
        outline: none;
        border-color: #2570eb;
        box-shadow: 0 0 0 3px rgba(37,112,235,.18);
    }

[b-ps8vfxuogv] .lp-select__chevron {
    position: absolute;
    right: 10px;
    pointer-events: none;
}

/* ===== Mobile number (+61) ===== */
.lp-phone-row[b-ps8vfxuogv] {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.lp-cc[b-ps8vfxuogv] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 52px;
    padding: 12px 16px 12px 10px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
}

.lp-flag[b-ps8vfxuogv] {
    width: 36px;
    height: 24px;
    border-radius: 5px;
    box-shadow: 0 0 .136px rgba(66,71,76,.32), 0 2.172px 1.629px rgba(66,71,76,.08);
}

.lp-cc-code[b-ps8vfxuogv] {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.5px;
    color: #000;
}

.lp-phone-input[b-ps8vfxuogv] {
    flex: 1 1 auto;
    min-width: 0;
}

/* ===== Sticky action bar ===== */
.lp-actions[b-ps8vfxuogv] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: #fff;
    box-shadow: 0 -8px 20px rgba(0,0,0,.06);
}

.lp-btn-primary[b-ps8vfxuogv] {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 14px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

    .lp-btn-primary:disabled[b-ps8vfxuogv] {
        opacity: .6;
        cursor: default;
    }

    .lp-btn-primary:not(:disabled):hover[b-ps8vfxuogv] {
        background: #1e2b3c;
    }

.lp-back:focus-visible[b-ps8vfxuogv],
.lp-help:focus-visible[b-ps8vfxuogv],
.lp-btn-primary:focus-visible[b-ps8vfxuogv] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}

/* Field-level error under the date row. The page's .lp-alert is for submit failures; a bad DOB has to
   be explained beside the field, otherwise the CTA just sits disabled with no reason given. */
.lp-fielderr[b-ps8vfxuogv] {
    margin: 6px 0 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.2px;
    color: #c5221f;
}
/* _content/VisitPlus.Shared/Pages/LinkPatientVerify.razor.rz.scp.css */
/* ============================================================
   Patient linking verification (Figma 2636-37131). Prefix: lpv-
   Same light sparkle-corner shell as the auth OTP screens
   (VerifyPhone / ConfirmAccount), with the linking copy.
   ============================================================ */

.lpv-screen[b-5ns5rydont] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(125px, calc(95px + env(safe-area-inset-top, 0px))) 20px calc(32px + env(safe-area-inset-bottom, 0px));
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 600px while the background reaches the
       real viewport edges. Below 600px this resolves to the 20px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    overflow-x: hidden;
}

.lpv-corner[b-5ns5rydont] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

.lpv-content[b-5ns5rydont] {
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.lpv-title[b-5ns5rydont] {
    margin: 24px 0 24px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.04px;
    color: #297381;
}

[b-5ns5rydont] .lpv-alert {
    background-color: #fdecec !important;
    border: 1px solid #f3b4b4 !important;
    border-radius: 12px;
    margin-bottom: 20px;
}

[b-5ns5rydont] .lpv-alert .mud-alert-icon,
[b-5ns5rydont] .lpv-alert .mud-icon-root,
[b-5ns5rydont] .lpv-alert .mud-alert-message {
    color: #c5221f !important;
}

.lpv-instruction[b-5ns5rydont] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 24px;
}

.lpv-instruction__text[b-5ns5rydont] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.4px;
    color: #3d404a;
}

.lpv-instruction__number[b-5ns5rydont] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.2px;
    color: #26364a;
}

.lpv-code[b-5ns5rydont] {
    margin-bottom: 12px;
}

.lpv-resend[b-5ns5rydont] {
    text-align: right;
    margin: 0 0 40px;
}

[b-5ns5rydont] .lpv-resend-link {
    color: #2a2a2a !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.2px;
    text-decoration: underline;
    cursor: pointer;
}

[b-5ns5rydont] .lpv-submit {
    height: 52px;
    border-radius: 14px;
    text-transform: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    background-color: var(--vp-brand-primary) !important;
    color: #fff !important;
}

[b-5ns5rydont] .lpv-submit:hover {
    background-color: #1b2c3f !important;
}

[b-5ns5rydont] .lpv-submit:disabled,
[b-5ns5rydont] .lpv-submit.mud-button-disabled {
    background-color: var(--vp-brand-primary) !important;
    color: #fff !important;
    opacity: .6;
}

.lpv-footnote[b-5ns5rydont] {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.4px;
    text-align: center;
    color: #3d404a;
}
/* _content/VisitPlus.Shared/Pages/Login.razor.rz.scp.css */
/* ============================================================
   Sign-in method chooser (Figma 133:114).
   Light screen (#f4f6f8) with a faint brand sparkle top-right.
   Social = navy filled (#22364c); email/biometrics = white outlined.
   ============================================================ */
.si-screen[b-smit3un06f] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    /* Full-bleed shell; only the content column is capped (see padding-inline below). */
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /* Figma: 36px horizontal padding on the sign-in chooser (forms use 20px). */
    padding: clamp(140px, 26vh, 240px) 36px calc(32px + env(safe-area-inset-bottom, 0px));
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 600px while the background reaches the
       real viewport edges. Below 600px this resolves to the 36px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(36px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    overflow: hidden; /* clip the bleeding corner sparkle */
}

/* ---- Decorative brand sparkle (faint, top-right, bleeds off edge) ---- */
.si-corner[b-smit3un06f] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

/* ---- Back button (white circle, navy chevron) ---- */
[b-smit3un06f] .si-back {
    position: absolute;
    /* iOS WKWebView populates safe-area-inset-top; Android WebView reports 0, so floor at 50px. */
    top: max(50px, calc(20px + env(safe-area-inset-top, 0px)));
    left: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: #ffffff;
    border-radius: 72px;
    color: var(--vp-visitplus-primary);
    box-shadow: 0 1px 3px rgba(34, 54, 76, 0.12);
}

[b-smit3un06f] .si-back:hover {
    background-color: #eef0f3;
}

/* ---- Brand logo ---- */
.si-brand[b-smit3un06f] {
    z-index: 1;
    display: flex;
    justify-content: center;
    /* Figma: logo bottom y=292, heading top y=401 -> 109px on an 874px screen (12.5vh),
       tightened on short viewports so the column still fits. */
    margin-bottom: clamp(48px, 12.5vh, 109px);
}

[b-smit3un06f] .si-logo {
    /* Figma 2349:28087 — 227x51. */
    width: 227px;
    height: auto;
}

/* ---- Content column ---- */
.si-content[b-smit3un06f] {
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.si-title[b-smit3un06f] {
    margin: 0;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.6px;
    text-align: center;
    color: #297381;
}

/* ---- Options ---- */
.si-options[b-smit3un06f] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Figma 2349:28092 / :28107 — 8px inside a method group, 16px between groups (.si-options). */
.si-group[b-smit3un06f] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Shared button shape (overrides MudButton defaults) */
[b-smit3un06f] .si-btn {
    height: 52px;
    border-radius: 12px;
    text-transform: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
}

[b-smit3un06f] .si-btn .mud-button-label {
    gap: 12px;
    align-items: center;
}

/* Social = navy filled */
[b-smit3un06f] .si-btn-social {
    background-color: #22364c !important;
    color: #ffffff !important;
    border: 1px solid #dedede !important;
}

[b-smit3un06f] .si-btn-social:hover {
    background-color: #1b2c3f !important;
}

/* Email / biometrics = white outlined */
[b-smit3un06f] .si-btn-outline {
    background-color: #ffffff !important;
    color: var(--vp-visitplus-primary) !important;
    border: 1px solid #b6bac3 !important;
    border-radius: 14px;
}

[b-smit3un06f] .si-btn-outline:hover {
    background-color: #f5f6f8 !important;
}

[b-smit3un06f] .si-btn-outline .mud-icon-root {
    color: var(--vp-visitplus-primary);
    font-size: 22px;
}

.si-social-icon[b-smit3un06f] {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Apple logo asset is solid black; on the navy button it must render white. */
.si-icon-white[b-smit3un06f] {
    filter: brightness(0) invert(1);
}

/* ---- "or" divider ---- */
.si-divider[b-smit3un06f] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

/* Figma 2349:28104/:28106 — two fixed 45px rules either side of "or", not full-width. */
.si-divider-line[b-smit3un06f] {
    flex: 0 0 45px;
    width: 45px;
    height: 1px;
    background-color: #cdd2da;
}

.si-divider-text[b-smit3un06f] {
    font-size: 14px;
    font-weight: 600;
    color: #297381;
}

/* ---- Create-account footer ---- */
.si-create[b-smit3un06f] {
    margin: 0;
    text-align: center;
    font-size: 14px;
    line-height: 24px;
}

.si-create-muted[b-smit3un06f] {
    color: #616161;
}

[b-smit3un06f] .si-create-link {
    color: #22364c;
    font-weight: 700;
}

/* A button that is not accepting taps has to LOOK like it. The colours above are !important —
   they have to be, to beat MudBlazor's variant theming — which also beats the disabled styling
   MudBlazor would otherwise apply, leaving a dead button pixel-identical to a live one. */
[b-smit3un06f] .si-btn:disabled {
    opacity: .55;
}
/* _content/VisitPlus.Shared/Pages/LoginEmail.razor.rz.scp.css */
/* ============================================================
   Email/password sign-in form (Figma 138:131 etc.).
   Same light shell + sparkle as the chooser, but top-anchored and
   left-aligned (logo + title on the left), with a form below.
   ============================================================ */
.le-screen[b-smea41e4uf] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /* Figma: content (logo/title) sits at y=145, i.e. 35px below the 40px back button (top 70). */
    padding: max(125px, calc(95px + env(safe-area-inset-top, 0px))) 20px calc(32px + env(safe-area-inset-bottom, 0px));
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 600px while the background reaches the
       real viewport edges. Below 600px this resolves to the 20px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    overflow: hidden;
}

/* Decorative brand sparkle (faint, top-right) */
.le-corner[b-smea41e4uf] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

/* Back button (white circle, navy chevron) */
[b-smea41e4uf] .le-back {
    position: absolute;
    top: max(50px, calc(20px + env(safe-area-inset-top, 0px)));
    left: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: #ffffff;
    border-radius: 72px;
    color: var(--vp-visitplus-primary);
    box-shadow: 0 1px 3px rgba(34, 54, 76, 0.12);
}

[b-smea41e4uf] .le-back:hover {
    background-color: #eef0f3;
}

/* Brand logo — left aligned */
.le-brand[b-smea41e4uf] {
    z-index: 1;
    margin-bottom: 18px;
}

[b-smea41e4uf] .le-logo {
    width: 150px;
    height: auto;
    display: block;
}

/* Content column (full width, left aligned) */
.le-content[b-smea41e4uf] {
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.le-title[b-smea41e4uf] {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: #297381;
}

[b-smea41e4uf] .le-notify {
    margin-bottom: 20px;
}

/* Fields */
.le-field[b-smea41e4uf] {
    margin-bottom: 16px;
}

.le-label[b-smea41e4uf] {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #22364c;
}

/* ============================================================
   Input colour states — Figma 315:1193 "40px Input".
   Default / Typing(focus) / Filled / Error / Disabled.
   ============================================================ */
[b-smea41e4uf] .le-input .mud-input.mud-input-outlined {
    border-radius: 12px;
    background-color: #ffffff;
    /* MudBlazor outlined reserves floating-label space (tall). We have an external
       label, so compact to ~52px and vertically centre the text. */
    height: 52px;
    align-items: center;
}

/* Default border: gray/200 */
[b-smea41e4uf] .le-input .mud-input-outlined-border {
    border-radius: 12px;
    border-color: #d8dbdf;
    border-width: 1px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Value text: black when filled; placeholder: gray/500 */
[b-smea41e4uf] .le-input input.mud-input-slot,
[b-smea41e4uf] .le-input .mud-input.mud-input-outlined input.mud-input-slot {
    color: #000000;
    font-weight: 600;
    padding-top: 0;
    padding-bottom: 0;
}

[b-smea41e4uf] .le-input input.mud-input-slot::placeholder {
    color: #6b7280;
    opacity: 1;
}

/* Typing (focus): blue/600 border + blue/100 ring (MudBlazor 8 uses :focus-within, not .mud-focused) */
[b-smea41e4uf] .le-input .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: #2570eb !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 3px #ddf4ff;
}

/* Error: orange/700 border + orange/100 ring (override MudBlazor's theme red) */
[b-smea41e4uf] .le-input.mud-input-error .mud-input-outlined-border,
[b-smea41e4uf] .le-input .mud-input.mud-input-error .mud-input-outlined-border {
    border-color: #c74307 !important;
    box-shadow: 0 0 0 2px #fff5e5;
}

/* Disabled: neutral/50 fill + neutral/300 text */
[b-smea41e4uf] .le-input .mud-input.mud-input-outlined.mud-disabled {
    background-color: #f7f8f8;
}

[b-smea41e4uf] .le-input .mud-input.mud-disabled input.mud-input-slot {
    color: #b6bac3 !important;
}

/* Error helper: Figma shows icon + orange text, NOT the legacy pink box (app.css:1039). */
[b-smea41e4uf] .le-input.mud-input-error .mud-input-control-helper-container {
    background-color: transparent !important;
    padding: 4px 0 0 24px !important;
    margin-top: 4px !important;
}

[b-smea41e4uf] .le-input.mud-input-error .mud-input-control-helper-container::before {
    left: 0 !important;
    width: 16px !important;
    height: 16px !important;
    border-color: #c74307 !important;
    color: #c74307 !important;
    font-size: 11px !important;
}

[b-smea41e4uf] .le-input.mud-input-error .mud-input-helper-text {
    color: #c74307 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px;
}

/* Forgot password — right aligned under the password field */
.le-forgot[b-smea41e4uf] {
    text-align: right;
    margin: -2px 0 28px;
}

[b-smea41e4uf] .le-forgot-link {
    color: #22364c;
    font-size: 14px;
    font-weight: 600;
    text-decoration: underline;
}

/* Sign-in button (navy filled; muted grey when disabled) */
[b-smea41e4uf] .le-submit {
    height: 52px;
    border-radius: 14px;
    text-transform: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
    background-color: #22364c !important;
    color: #ffffff !important;
}

[b-smea41e4uf] .le-submit:hover {
    background-color: #1b2c3f !important;
}

[b-smea41e4uf] .le-submit:disabled,
[b-smea41e4uf] .le-submit.mud-button-disabled {
    background-color: #9aa1ad !important;
    color: #ffffff !important;
    opacity: 1;
}
/* _content/VisitPlus.Shared/Pages/LoginVerify.razor.rz.scp.css */
/* ============================================================
   Email-OTP entry (Figma 1388:34964 etc.). Light shell + sparkle,
   no logo / no heading — just instruction text, 6-digit code,
   resend, submit, and a spam-folder note.
   ============================================================ */
.lv-screen[b-ufv61inkeg] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /* Figma: content sits at y=145, i.e. 35px below the 40px back button (top 70). */
    padding: max(125px, calc(95px + env(safe-area-inset-top, 0px))) 20px calc(32px + env(safe-area-inset-bottom, 0px));
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 600px while the background reaches the
       real viewport edges. Below 600px this resolves to the 20px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    overflow: hidden;
}

.lv-corner[b-ufv61inkeg] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

[b-ufv61inkeg] .lv-back {
    position: absolute;
    top: max(50px, calc(20px + env(safe-area-inset-top, 0px)));
    left: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: #ffffff;
    border-radius: 72px;
    color: var(--vp-visitplus-primary);
    box-shadow: 0 1px 3px rgba(34, 54, 76, 0.12);
}

[b-ufv61inkeg] .lv-back:hover {
    background-color: #eef0f3;
}

.lv-content[b-ufv61inkeg] {
    z-index: 1;
    display: flex;
    flex-direction: column;
}

[b-ufv61inkeg] .lv-notify {
    margin-bottom: 20px;
}

.lv-instruction[b-ufv61inkeg] {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: #424242;
}

.lv-code[b-ufv61inkeg] {
    margin-bottom: 6px;
}

/* Resend link — right aligned under the code input */
.lv-resend[b-ufv61inkeg] {
    text-align: right;
    margin: 2px 0 26px;
}

/* Figma 1388:34998: #2a2a2a, semibold, underlined. !important beats MudLink's .mud-primary-text. */
[b-ufv61inkeg] .lv-resend-link {
    color: #2a2a2a !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.2px;
    text-decoration: underline;
    cursor: pointer;
}

/* Submit button */
[b-ufv61inkeg] .lv-submit {
    height: 52px;
    border-radius: 14px;
    text-transform: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
    background-color: #22364c !important;
    color: #ffffff !important;
}

[b-ufv61inkeg] .lv-submit:hover {
    background-color: #1b2c3f !important;
}

[b-ufv61inkeg] .lv-submit:disabled,
[b-ufv61inkeg] .lv-submit.mud-button-disabled {
    background-color: #9aa1ad !important;
    color: #ffffff !important;
    opacity: 1;
}

/* Spam-folder note (light blue, italic) below the button */
[b-ufv61inkeg] .lv-note {
    background-color: #e7f3fa !important;
    border-radius: 12px;
    margin-top: 24px;
}

[b-ufv61inkeg] .lv-note .mud-alert-icon,
[b-ufv61inkeg] .lv-note .mud-icon-root {
    display: none;
}

[b-ufv61inkeg] .lv-note .mud-alert-message {
    color: #2d6b87;
    font-size: 14px;
    line-height: 1.5;
    font-style: italic;
}
/* _content/VisitPlus.Shared/Pages/MyInformation.razor.rz.scp.css */
/* ============================================================
   My information (Figma 2421-30495 / -30752 / 2430-16927 / -17134).
   Prefix: mi-. Navy patterned header + labelled fields + sticky
   Edit / Cancel+Save bar. Shares the app-shell pattern with the
   My account screen.
   ============================================================ */

.mi-shell[b-xfo72zfeh7] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.mi-hdr[b-xfo72zfeh7] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 20px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.28) 100%);
}

.mi-hdr__pattern[b-xfo72zfeh7] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.mi-back[b-xfo72zfeh7] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: -4px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.6px;
    cursor: pointer;
}

/* ===== Scroller ===== */
.mi-scroller[b-xfo72zfeh7] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 28px 20px 24px;
    background: #f4f6f8;
}

    .mi-scroller[b-xfo72zfeh7]::-webkit-scrollbar {
        display: none;
    }

/* ===== Form ===== */
.mi-form[b-xfo72zfeh7] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.mi-field[b-xfo72zfeh7] {
    display: flex;
    flex-direction: column;
}

/* In Edit mode, locked fields (Surname / email) are dimmed per the design. */
.mi-field--locked[b-xfo72zfeh7] {
    opacity: .5;
}

.mi-label[b-xfo72zfeh7] {
    padding: 0 4px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.4px;
    color: #2c2f34;
}

.mi-input[b-xfo72zfeh7] {
    display: flex;
    align-items: center;
    width: 100%;
    height: 52px;
    padding: 0 12px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    box-sizing: border-box;
}

/* Read-only / locked value text is muted grey. */
.mi-input--readonly[b-xfo72zfeh7] {
    color: #6b7280;
}

/* Editable First name: black text, navy focus ring. */
.mi-input--edit[b-xfo72zfeh7] {
    color: #000;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

    .mi-input--edit:focus[b-xfo72zfeh7] {
        border-color: var(--vp-brand-primary);
        box-shadow: 0 0 0 1px var(--vp-brand-primary);
    }

/* Phone row: the +61 chip is fixed (mirrors /setup-phone); the number itself is read-only here. */
.mi-phone-row[b-xfo72zfeh7] {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.mi-cc[b-xfo72zfeh7] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 52px;
    padding: 12px 16px 12px 10px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
}

.mi-flag[b-xfo72zfeh7] {
    width: 36px;
    height: 24px;
    border-radius: 5px;
    box-shadow: 0 0 .136px rgba(66, 71, 76, .32), 0 2.172px 1.629px rgba(66, 71, 76, .08);
}

.mi-cc-code[b-xfo72zfeh7] {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.5px;
    color: #000;
}

.mi-input--phone[b-xfo72zfeh7] {
    flex: 1 1 0;
    min-width: 0;
}

/* ===== Sticky action bar ===== */
.mi-bar[b-xfo72zfeh7] {
    flex: 0 0 auto;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: rgba(247, 248, 250, .92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 -4px 7.65px rgba(0,0,0,.05);
}

.mi-bar__row[b-xfo72zfeh7] {
    display: flex;
    gap: 10px;
}

.mi-btn[b-xfo72zfeh7] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    height: 52px;
    padding: 12px 20px;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

.mi-btn--full[b-xfo72zfeh7] {
    width: 100%;
}

.mi-btn--primary[b-xfo72zfeh7] {
    background: var(--vp-brand-primary);
    color: #fff;
}

.mi-bar__stack[b-xfo72zfeh7] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* "Edit mobile number" — white/outlined next to the navy primary (Figma 2421:30495). */
.mi-btn--outline[b-xfo72zfeh7] {
    background: #fff;
    color: var(--vp-brand-primary);
    border: 1px solid #b6bac3;
}

.mi-btn--secondary[b-xfo72zfeh7] {
    background: #edeef1;
    color: var(--vp-brand-primary);
}

/* ===== Focus visibility ===== */
.mi-back:focus-visible[b-xfo72zfeh7],
.mi-btn:focus-visible[b-xfo72zfeh7] {
    outline: 2px solid var(--vp-brand-secondary);
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/MyLinkedPatients.razor.rz.scp.css */
/* ============================================================
   My Linked Patients (Figma 2653-25428 populated / 2633-35380
   empty). Prefix: mlp-  Per-hospital header (back + title + add
   FAB) over white name cards; shares the visual language of the
   Next of Kin list.
   ============================================================ */

.mlp-shell[b-ymhlh68cjb] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* no min-height:100vh — it beats dvh when the URL bar shows */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.mlp-hdr[b-ymhlh68cjb] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}

.mlp-hdr__pattern[b-ymhlh68cjb] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.mlp-hdr__bar[b-ymhlh68cjb] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
}

.mlp-back[b-ymhlh68cjb] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin-left: -6px; /* optically align the chevron to the edge */
    border: none;
    background: none;
    cursor: pointer;
}

.mlp-hdr__title[b-ymhlh68cjb] {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}

.mlp-fab[b-ymhlh68cjb] {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #fff;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ===== Scroller ===== */
.mlp-scroller[b-ymhlh68cjb] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f4f6f8;
}

    .mlp-scroller[b-ymhlh68cjb]::-webkit-scrollbar {
        display: none;
    }

.mlp-bottom-space[b-ymhlh68cjb] {
    height: 40px;
}

/* ===== Empty state (Figma 2633-35383) ===== */
.mlp-empty[b-ymhlh68cjb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 46px;
    max-width: 300px;
    margin: 0 auto;
    padding-top: 90px;
    text-align: center;
}

.mlp-empty__art[b-ymhlh68cjb] {
    position: relative;
    width: 172px;
    height: 172px;
    color: var(--vp-brand-secondary); /* brand/secondary — folded corner + badge (Figma) */
}

.mlp-empty__doc[b-ymhlh68cjb] {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: auto;
    overflow: visible;
}

.mlp-empty__badge[b-ymhlh68cjb] {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--vp-brand-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 3px rgba(255,255,255,.9), 0 4px 10px rgba(9,42,103,.2);
}

.mlp-empty__text[b-ymhlh68cjb] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mlp-empty__title[b-ymhlh68cjb] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.6px;
    color: #297381;
}

.mlp-empty__desc[b-ymhlh68cjb] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.2px;
    color: #3d404a;
}

/* ===== Populated list (Figma 2658-25979) ===== */
.mlp-list[b-ymhlh68cjb] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px 0;
}

.mlp-card[b-ymhlh68cjb] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 80px;
    padding: 12px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 7.5px rgba(0,0,0,.05);
}

/* The name + avatar is the tap target for the detail screen; the icons sit outside it so they
   don't nest interactive elements. Because flex:1 stretches this <button> past its content, WebKit
   centres what's inside it — hence the explicit justify-content plus the full-width inner row. */
.mlp-card__main[b-ymhlh68cjb] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

.mlp-card__inner[b-ymhlh68cjb] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

.mlp-avatar[b-ymhlh68cjb] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mlp-card__name[b-ymhlh68cjb] {
    min-width: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.2;
    color: #26364a;
    overflow-wrap: anywhere;
}

.mlp-card__acts[b-ymhlh68cjb] {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    align-items: center;
}

.mlp-iconbtn[b-ymhlh68cjb] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    color: #5b616e; /* the inline SVGs stroke in currentColor */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mlp-ico[b-ymhlh68cjb] {
    display: block;
    width: 24px;
    height: 24px;
}

/* ===== Buttons ===== */
.mlp-btn-primary[b-ymhlh68cjb] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 198px;
    height: 52px;
    padding: 0 20px;
    border: none;
    border-radius: 14px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

    .mlp-btn-primary:hover[b-ymhlh68cjb] {
        background: #1e2b3c;
    }

.mlp-btn-outline[b-ymhlh68cjb] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    padding: 0 20px;
    border: 1px solid #b6bac3;
    border-radius: 14px;
    background: #fff;
    color: var(--vp-brand-primary);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

    .mlp-btn-outline:hover[b-ymhlh68cjb] {
        background: #f4f6f8;
    }

.mlp-back:focus-visible[b-ymhlh68cjb],
.mlp-fab:focus-visible[b-ymhlh68cjb],
.mlp-card__main:focus-visible[b-ymhlh68cjb],
.mlp-iconbtn:focus-visible[b-ymhlh68cjb],
.mlp-btn-primary:focus-visible[b-ymhlh68cjb],
.mlp-btn-outline:focus-visible[b-ymhlh68cjb] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}

/* Name + optional "Waiting for approval" stacked in the row (see LinkStatus). */
.mlp-card__text[b-ymhlh68cjb] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}

.mlp-card__status[b-ymhlh68cjb] {
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    color: #6b7a8f;
}

/* A pending row is not openable, so it must not look pressable either. */
.mlp-card__main:disabled[b-ymhlh68cjb] {
    cursor: default;
    opacity: .72;
}
/* _content/VisitPlus.Shared/Pages/MyPatientRecord.razor.rz.scp.css */
/* ============================================================
   My Patient Record (Figma 2630-34281 populated / 2628-30771
   empty). Prefix: mpr-  Per-hospital header (back + title) over a single white
   name card; shares the visual language of the
   Next of Kin list.
   ============================================================ */

.mpr-shell[b-4qxyvo9i2k] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* no min-height:100vh — it beats dvh when the URL bar shows */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.mpr-hdr[b-4qxyvo9i2k] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}

.mpr-hdr__pattern[b-4qxyvo9i2k] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

/* No add-FAB in this header (Figma), but the row is still a plain div rather than the back button
   itself: a full-width <button> flex container centres its content in WebKit, which pushed the title
   to the middle of the header on iOS. The div owns the row (and the stacking context above the
   pattern artwork) and the button shrink-wraps inside it, so the title stays hard left. */
.mpr-hdr__bar[b-4qxyvo9i2k] {
    position: relative;
    z-index: 1;
    min-height: 40px;
    display: flex;
    align-items: center;
}

.mpr-back[b-4qxyvo9i2k] {
    flex: 0 1 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2px;
    padding: 0;
    margin-left: -6px; /* optically align the chevron to the edge */
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

.mpr-hdr__title[b-4qxyvo9i2k] {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}

/* ===== Scroller ===== */
.mpr-scroller[b-4qxyvo9i2k] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f4f6f8;
}

    .mpr-scroller[b-4qxyvo9i2k]::-webkit-scrollbar {
        display: none;
    }

.mpr-bottom-space[b-4qxyvo9i2k] {
    height: 40px;
}

/* ===== Empty state (Figma 2633-35383) ===== */
.mpr-empty[b-4qxyvo9i2k] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 46px;
    max-width: 300px;
    margin: 0 auto;
    padding-top: 90px;
    text-align: center;
}

.mpr-empty__art[b-4qxyvo9i2k] {
    position: relative;
    width: 172px;
    height: 172px;
    color: var(--vp-brand-secondary); /* brand/secondary — folded corner + badge (Figma) */
}

.mpr-empty__doc[b-4qxyvo9i2k] {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: auto;
    overflow: visible;
}

.mpr-empty__badge[b-4qxyvo9i2k] {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--vp-brand-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 3px rgba(255,255,255,.9), 0 4px 10px rgba(9,42,103,.2);
}

.mpr-empty__text[b-4qxyvo9i2k] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mpr-empty__title[b-4qxyvo9i2k] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.6px;
    color: #297381;
}

.mpr-empty__desc[b-4qxyvo9i2k] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.2px;
    color: #3d404a;
}

/* ===== Populated list (Figma 2658-25979) ===== */
.mpr-list[b-4qxyvo9i2k] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px 0;
}

.mpr-card[b-4qxyvo9i2k] {
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 80px;
    padding: 12px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 7.5px rgba(0,0,0,.05);
}

/* The name + avatar is the tap target for the detail screen; the icons sit outside it so they
   don't nest interactive elements. Because flex:1 stretches this <button> past its content, WebKit
   centres what's inside it — hence the explicit justify-content plus the full-width inner row. */
.mpr-card__main[b-4qxyvo9i2k] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    cursor: pointer;
}

.mpr-card__inner[b-4qxyvo9i2k] {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}

/* Single record, so the avatar takes the fixed brand teal from Figma rather than a per-row colour. */
.mpr-avatar[b-4qxyvo9i2k] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--vp-brand-secondary);
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mpr-card__name[b-4qxyvo9i2k] {
    min-width: 0;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.4px;
    line-height: 1.2;
    color: #26364a;
    overflow-wrap: anywhere;
}

.mpr-card__acts[b-4qxyvo9i2k] {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    align-items: center;
}

.mpr-iconbtn[b-4qxyvo9i2k] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    color: #5b616e; /* the inline SVGs stroke in currentColor */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mpr-ico[b-4qxyvo9i2k] {
    display: block;
    width: 24px;
    height: 24px;
}

/* ===== Buttons ===== */
.mpr-btn-primary[b-4qxyvo9i2k] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 198px;
    height: 52px;
    padding: 0 20px;
    border: none;
    border-radius: 14px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

    .mpr-btn-primary:hover[b-4qxyvo9i2k] {
        background: #1e2b3c;
    }

.mpr-back:focus-visible[b-4qxyvo9i2k],
.mpr-card__main:focus-visible[b-4qxyvo9i2k],
.mpr-iconbtn:focus-visible[b-4qxyvo9i2k],
.mpr-btn-primary:focus-visible[b-4qxyvo9i2k] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/NextOfKin.razor.rz.scp.css */
/* ============================================================
   Next of Kin list / empty state (Figma 870-37652). Prefix: nok-
   Per-hospital teal header (back + title + add FAB) over the
   shared paper-stack empty state. Shares the visual language of
   the Appointments empty state and the detail-page header.
   ============================================================ */

.nok-shell[b-kq6dqo2799] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* no min-height:100vh — it beats dvh when the URL bar shows */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.nok-hdr[b-kq6dqo2799] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}

.nok-hdr__pattern[b-kq6dqo2799] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.nok-hdr__bar[b-kq6dqo2799] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 40px;
}

.nok-back[b-kq6dqo2799] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin-left: -6px; /* optically align the chevron to the edge */
    border: none;
    background: none;
    cursor: pointer;
}

.nok-hdr__title[b-kq6dqo2799] {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}

.nok-fab[b-kq6dqo2799] {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: #fff;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* ===== Scroller ===== */
.nok-scroller[b-kq6dqo2799] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f4f6f8;
}

    .nok-scroller[b-kq6dqo2799]::-webkit-scrollbar {
        display: none;
    }

/* ===== Empty state ===== */
.nok-empty[b-kq6dqo2799] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    max-width: 318px;
    margin: 0 auto;
    padding-top: 80px;
    text-align: center;
}

.nok-empty__art[b-kq6dqo2799] {
    position: relative;
    width: 172px;
    height: 172px;
    color: var(--vp-brand-secondary); /* brand/secondary — folded corner + badge (Figma) */
}

.nok-empty__doc[b-kq6dqo2799] {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: auto;
    overflow: visible;
}

.nok-empty__badge[b-kq6dqo2799] {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--vp-brand-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 3px rgba(255,255,255,.9), 0 4px 10px rgba(13,18,37,.25);
}

.nok-empty__text[b-kq6dqo2799] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.nok-empty__title[b-kq6dqo2799] {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #26364a;
}

.nok-empty__desc[b-kq6dqo2799] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.5px;
    color: #6b7280;
}

.nok-em[b-kq6dqo2799] {
    color: #26364a;
}

.nok-btn-primary[b-kq6dqo2799] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 198px;
    height: 52px;
    padding: 0 20px;
    border: none;
    border-radius: 14px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

.nok-btn-primary:hover[b-kq6dqo2799] {
    background: #1e2b3c;
}

.nok-back:focus-visible[b-kq6dqo2799],
.nok-fab:focus-visible[b-kq6dqo2799],
.nok-btn-primary:focus-visible[b-kq6dqo2799] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}

.nok-bottom-space[b-kq6dqo2799] {
    height: 40px;
}

/* ===== Populated list (Figma 895-6416) ===== */
.nok-list[b-kq6dqo2799] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px 16px 0;
}

.nok-intro[b-kq6dqo2799] {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
}

.nok-intro__text[b-kq6dqo2799] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.4px;
    color: #5b616e;
}

    .nok-intro__text strong[b-kq6dqo2799] {
        font-weight: 700;
        color: #26364a;
    }

/* ===== Contact card ===== */
.nok-card[b-kq6dqo2799] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 12px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 6px 7.5px rgba(0,0,0,.05);
}

.nok-card__body[b-kq6dqo2799] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.nok-card__top[b-kq6dqo2799] {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.nok-card__id[b-kq6dqo2799] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    gap: 12px;
    align-items: center;
}

.nok-avatar[b-kq6dqo2799] {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nok-card__name[b-kq6dqo2799] {
    min-width: 0;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -.4px;
    line-height: 1.2;
    color: #26364a;
    overflow-wrap: anywhere;
}

.nok-card__acts[b-kq6dqo2799] {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    align-items: center;
}

.nok-iconbtn[b-kq6dqo2799] {
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.nok-card__phone[b-kq6dqo2799] {
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    color: #297381;
}

/* ===== "Share my patient record" sub-card ===== */
.nok-share[b-kq6dqo2799] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 10px;
    background: #f4f6f8;
    border: 1px solid #edeef1;
    border-radius: 10px;
}

.nok-share__text[b-kq6dqo2799] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nok-share__head[b-kq6dqo2799] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.nok-share__title[b-kq6dqo2799] {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
    line-height: 1.2;
    color: #222328;
}

.nok-badge[b-kq6dqo2799] {
    flex: 0 0 auto;
    min-width: 62px;
    height: 20px;
    padding: 0 3px 1px;
    border-radius: 5px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.2px;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nok-badge--unlinked[b-kq6dqo2799] {
    background: #ff9537;
    color: #fff;
}

.nok-badge--linked[b-kq6dqo2799] {
    background: #d5ffe6;
    border: 1px solid #70ffab;
    color: #00963c;
}

.nok-share__desc[b-kq6dqo2799] {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.2px;
    line-height: 1.3;
    color: #6b7280;
}

.nok-share__btn[b-kq6dqo2799] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 40px;
    padding: 0 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.07px;
    cursor: pointer;
}

.nok-share__btn--invite[b-kq6dqo2799] {
    border: none;
    background: var(--vp-brand-primary);
    color: #fff;
}

    .nok-share__btn--invite:hover[b-kq6dqo2799] {
        background: #1e2b3c;
    }

.nok-share__btn--unlink[b-kq6dqo2799] {
    border: 1px solid #d8dbdf;
    background: #fff;
    color: var(--vp-brand-primary);
}

    .nok-share__btn--unlink:hover[b-kq6dqo2799] {
        background: #f4f6f8;
    }

.nok-iconbtn:focus-visible[b-kq6dqo2799],
.nok-share__btn:focus-visible[b-kq6dqo2799] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/NotificationDetail.razor.rz.scp.css */
/* ============================================================
   Notification detail (Figma 2560-31463). Prefix: nd-
   Per-hospital header (back + "Details"), title + timestamp,
   rule, body with link-blue highlighted runs, and a sticky
   1–2 button action bar.
   ============================================================ */

.nd-shell[b-hckp3r52j5] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* no min-height:100vh — it beats dvh when the URL bar shows and pushes the sticky bar off-screen */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}

/* ===== Header ===== */
.nd-hdr[b-hckp3r52j5] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}

.nd-hdr__pattern[b-hckp3r52j5] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.nd-hdr__bar[b-hckp3r52j5] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

.nd-back[b-hckp3r52j5] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin-left: -6px; /* optically align the chevron to the edge */
    border: none;
    background: none;
    cursor: pointer;
}

.nd-hdr__title[b-hckp3r52j5] {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}

/* ===== Scroller ===== */
.nd-scroller[b-hckp3r52j5] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 33px 20px 0;
    background: #fff;
}

    .nd-scroller[b-hckp3r52j5]::-webkit-scrollbar {
        display: none;
    }

/* ===== Title + timestamp ===== */
.nd-head[b-hckp3r52j5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.nd-title[b-hckp3r52j5] {
    margin: 0;
    color: #26364a;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.96px;
}

.nd-stamp[b-hckp3r52j5] {
    margin: 0;
    color: #6b7280;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.2px;
}

.nd-rule[b-hckp3r52j5] {
    height: 0;
    margin: 24px 0;
    border: none;
    border-top: 1px solid #d8dbdf;
}

/* ===== Body ===== */
.nd-body[b-hckp3r52j5] {
    margin: 0;
    color: #2c2f34;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.5px;
    word-break: break-word;
}

.nd-body__hl[b-hckp3r52j5] {
    color: #1d64d8;
}

/* ===== Sticky actions ===== */
.nd-actions[b-hckp3r52j5] {
    flex: 0 0 auto;
    display: flex;
    gap: 10px;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
    background: #fff;
    box-shadow: 0 -4px 8px rgba(0,0,0,.05);
}

.nd-btn[b-hckp3r52j5] {
    flex: 1 1 0;
    min-width: 0;
    height: 52px;
    padding: 12px 20px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
    /* keep the 2-button bar to a single line on narrow phones (360px) + during font-swap */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nd-btn--secondary[b-hckp3r52j5] {
    border: 1px solid #b6bac3;
    background: #fff;
    color: var(--vp-brand-primary);
}

.nd-btn--primary[b-hckp3r52j5] {
    background: var(--vp-brand-primary);
    color: #fff;
}

.nd-bottom-space[b-hckp3r52j5] {
    height: 24px;
}
/* _content/VisitPlus.Shared/Pages/Notifications.razor.rz.scp.css */
/* ============================================================
   Notification list (Figma 2558-19474). Prefix: nt-
   Per-hospital header (back + title), "N Unread" / "Mark read
   all" bar, then a divided list of rows. Unread rows carry the
   orange status dot and a bold title. No bottom tab bar.
   ============================================================ */

.nt-shell[b-c746zggcms] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* no min-height:100vh — it beats dvh when the URL bar shows */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}

/* ===== Header ===== */
.nt-hdr[b-c746zggcms] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}

.nt-hdr__pattern[b-c746zggcms] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.nt-hdr__bar[b-c746zggcms] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

.nt-back[b-c746zggcms] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin-left: -6px; /* optically align the chevron to the edge */
    border: none;
    background: none;
    cursor: pointer;
}

.nt-hdr__title[b-c746zggcms] {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}

/* ===== Scroller ===== */
.nt-scroller[b-c746zggcms] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #fff;
}

    .nt-scroller[b-c746zggcms]::-webkit-scrollbar {
        display: none;
    }

/* ===== Unread count + mark-all bar ===== */
.nt-bar[b-c746zggcms] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    height: 56px;
    padding: 0 20px;
}

.nt-bar__count[b-c746zggcms] {
    color: #26364a;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
    line-height: 1.2;
}

.nt-bar__btn[b-c746zggcms] {
    flex: 0 0 auto;
    min-width: 70px;
    height: 28px;
    padding: 0 12px;
    border: none;
    border-radius: 10px;
    background: #e8e9ec; /* Figma: #edeef1 under a 2% dark overlay */
    color: var(--vp-brand-primary);
    font-size: 12px;
    font-weight: 600;
    line-height: 16px;
    cursor: pointer;
}

/* ===== List ===== */
.nt-list[b-c746zggcms] {
    margin: 0;
    padding: 0;
    list-style: none;
}

.nt-row[b-c746zggcms] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 20px 16px;
    border: none;
    border-bottom: 1px solid #d8dbdf;
    background: none;
    text-align: left;
    font: inherit;
    cursor: pointer;
}

/* fixed-width gutter so read and unread titles line up (Figma: 4px inset + 10px dot) */
.nt-row__status[b-c746zggcms] {
    flex: 0 0 18px;
    display: flex;
    justify-content: center;
    padding: 8px 4px 0;
}

.nt-dot[b-c746zggcms] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ff9537;
}

.nt-row__body[b-c746zggcms] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    word-break: break-word;
}

.nt-row__title[b-c746zggcms] {
    color: #000;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.5px;
}

.nt-row__title--unread[b-c746zggcms] {
    font-weight: 700;
    line-height: 28px;
    letter-spacing: -1px;
}

.nt-row__preview[b-c746zggcms] {
    color: #3d404a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.4px;
}

.nt-row__time[b-c746zggcms] {
    margin-top: 12px;
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.4px;
}

/* ===== Empty state ===== */
.nt-empty[b-c746zggcms] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 318px;
    margin: 0 auto;
    padding-top: 80px;
    text-align: center;
}

.nt-empty__badge[b-c746zggcms] {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--vp-brand-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.nt-empty__title[b-c746zggcms] {
    margin: 0 0 8px;
    color: #26364a;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.4px;
}

.nt-empty__desc[b-c746zggcms] {
    margin: 0;
    color: #6b7280;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}

.nt-bottom-space[b-c746zggcms] {
    height: calc(env(safe-area-inset-bottom, 0px) + 24px);
}
/* _content/VisitPlus.Shared/Pages/NotificationSettings.razor.rz.scp.css */
/* ============================================================
   Notification settings (Figma 2430-16755). Prefix: ns-. Navy
   header + a single card with a push-notification toggle.
   ============================================================ */

.ns-shell[b-09x7996ywu] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.ns-hdr[b-09x7996ywu] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 20px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.28) 100%);
}

.ns-hdr__pattern[b-09x7996ywu] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.ns-back[b-09x7996ywu] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: -4px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.6px;
    cursor: pointer;
}

/* ===== Content ===== */
.ns-scroller[b-09x7996ywu] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 20px 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
    background: #f4f6f8;
}

    .ns-scroller[b-09x7996ywu]::-webkit-scrollbar {
        display: none;
    }

.ns-card[b-09x7996ywu] {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 20px;
    background: #fff;
    border: 1px solid #f4f6f8;
    border-radius: 25px;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}

.ns-row[b-09x7996ywu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.ns-row__text[b-09x7996ywu] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.ns-row__title[b-09x7996ywu] {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.5px;
    color: #26364a;
}

.ns-row__sub[b-09x7996ywu] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.4px;
    color: #3d404a;
}

.ns-divider[b-09x7996ywu] {
    height: 1px;
    background: #e7eaee;
}

.ns-explain[b-09x7996ywu] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.4px;
    color: #5b616e;
}

/* ===== Toggle (Figma 2274:15336 — green ON) ===== */
.ns-toggle[b-09x7996ywu] {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* layout-based knob position — WKWebView-safe (no transform) */
    flex: 0 0 auto;
    width: 48px;
    height: 24px;
    padding: 2px;
    box-sizing: border-box;
    border: none;
    border-radius: 999px;
    background: #d8dbdf;
    box-shadow: 0 1.5px 1.5px rgba(0,0,0,.07);
    cursor: pointer;
    transition: background .2s ease;
}

.ns-toggle--on[b-09x7996ywu] {
    background: #00c048;
    justify-content: flex-end;
}

.ns-toggle__knob[b-09x7996ywu] {
    flex: 0 0 auto;
    width: 28px;
    height: 20px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 1.5px 3px rgba(0,0,0,.07);
}

/* ===== Focus visibility ===== */
.ns-back:focus-visible[b-09x7996ywu],
.ns-toggle:focus-visible[b-09x7996ywu] {
    outline: 2px solid var(--vp-brand-secondary);
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/PasswordReset.razor.rz.scp.css */
/* ============================================================
   Reset password — step 2 (Figma 167:2362 / 167:2494 / 1064:15105).
   Light shell + sparkle, top-anchored, no logo. New password + confirm +
   6-digit security code + resend.
   ============================================================ */
.pr-screen[b-ehiwa9f1od] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /* Figma: content (logo/title) sits at y=145, i.e. 35px below the 40px back button (top 70). */
    padding: max(125px, calc(95px + env(safe-area-inset-top, 0px))) 20px calc(32px + env(safe-area-inset-bottom, 0px));
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 600px while the background reaches the
       real viewport edges. Below 600px this resolves to the 20px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    overflow: hidden;
}

.pr-corner[b-ehiwa9f1od] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

[b-ehiwa9f1od] .pr-back {
    position: absolute;
    top: max(50px, calc(20px + env(safe-area-inset-top, 0px)));
    left: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: #ffffff;
    border-radius: 72px;
    color: var(--vp-visitplus-primary);
    box-shadow: 0 1px 3px rgba(34, 54, 76, 0.12);
}

[b-ehiwa9f1od] .pr-back:hover {
    background-color: #eef0f3;
}

.pr-content[b-ehiwa9f1od] {
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.pr-title[b-ehiwa9f1od] {
    margin: 0 0 16px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.04px;
    color: #297381;
}

/* Info banner (Figma "Notify" — blue/100 fill, blue/200 border, blue/500 text) */
[b-ehiwa9f1od] .pr-info {
    background-color: #ddf4ff !important;
    border: 1px solid #bfd7fe;
    border-radius: 12px;
    margin-bottom: 24px;
}

[b-ehiwa9f1od] .pr-info .mud-alert-icon,
[b-ehiwa9f1od] .pr-info .mud-icon-root {
    color: #1d64d8;
}

[b-ehiwa9f1od] .pr-info .mud-alert-message {
    /* WCAG AA (1.4.3): blue/700 #1d64d8 on #ddf4ff = 4.8:1; blue/500 #3b82f6 was 3.23:1. */
    color: #1d64d8;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.2px;
}

[b-ehiwa9f1od] .pr-notify {
    margin-bottom: 16px;
}

.pr-field[b-ehiwa9f1od] {
    margin-bottom: 16px;
}

.pr-label[b-ehiwa9f1od] {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #22364c;
}

/* ============================================================
   Input colour states — Figma 315:1193 "40px Input".
   Default / Typing(focus) / Filled / Error / Disabled.
   ============================================================ */
[b-ehiwa9f1od] .pr-input .mud-input.mud-input-outlined {
    border-radius: 12px;
    background-color: #ffffff;
    height: 52px;
    align-items: center;
}

/* Default border: gray/200 */
[b-ehiwa9f1od] .pr-input .mud-input-outlined-border {
    border-radius: 12px;
    border-color: #d8dbdf;
    border-width: 1px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Value text: black when filled; placeholder: gray/500 */
[b-ehiwa9f1od] .pr-input input.mud-input-slot,
[b-ehiwa9f1od] .pr-input .mud-input.mud-input-outlined input.mud-input-slot {
    color: #000000;
    font-weight: 600;
    padding-top: 0;
    padding-bottom: 0;
}

[b-ehiwa9f1od] .pr-input input.mud-input-slot::placeholder {
    color: #6b7280;
    opacity: 1;
}

/* Typing (focus): blue/600 border + blue/100 ring (MudBlazor 8 uses :focus-within, not .mud-focused) */
[b-ehiwa9f1od] .pr-input .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: #2570eb !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 3px #ddf4ff;
}

/* Error: orange/700 border + orange/100 ring (override MudBlazor's theme red) */
[b-ehiwa9f1od] .pr-input.mud-input-error .mud-input-outlined-border,
[b-ehiwa9f1od] .pr-input .mud-input.mud-input-error .mud-input-outlined-border {
    border-color: #c74307 !important;
    box-shadow: 0 0 0 2px #fff5e5;
}

/* Disabled: neutral/50 fill + neutral/300 text */
[b-ehiwa9f1od] .pr-input .mud-input.mud-input-outlined.mud-disabled {
    background-color: #f7f8f8;
}

[b-ehiwa9f1od] .pr-input .mud-input.mud-disabled input.mud-input-slot {
    color: #b6bac3 !important;
}

/* Error helper: Figma shows icon + orange text, NOT the legacy pink box (app.css:1039). */
[b-ehiwa9f1od] .pr-input.mud-input-error .mud-input-control-helper-container {
    background-color: transparent !important;
    padding: 4px 0 0 24px !important;
    margin-top: 4px !important;
}

[b-ehiwa9f1od] .pr-input.mud-input-error .mud-input-control-helper-container::before {
    left: 0 !important;
    width: 16px !important;
    height: 16px !important;
    border-color: #c74307 !important;
    color: #c74307 !important;
    font-size: 11px !important;
}

[b-ehiwa9f1od] .pr-input.mud-input-error .mud-input-helper-text {
    color: #c74307 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px;
}

/* Resend link — right aligned under the code input */
.pr-resend[b-ehiwa9f1od] {
    text-align: right;
    margin: 2px 0 26px;
}

/* Figma 1388:34998: #2a2a2a, semibold, underlined. !important beats MudLink's .mud-primary-text. */
[b-ehiwa9f1od] .pr-resend-link {
    color: #2a2a2a !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.2px;
    text-decoration: underline;
    cursor: pointer;
}

/* Submit button */
[b-ehiwa9f1od] .pr-submit {
    height: 52px;
    border-radius: 14px;
    text-transform: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
    background-color: #22364c !important;
    color: #ffffff !important;
}

[b-ehiwa9f1od] .pr-submit:hover {
    background-color: #1b2c3f !important;
}

[b-ehiwa9f1od] .pr-submit:disabled,
[b-ehiwa9f1od] .pr-submit.mud-button-disabled {
    background-color: #9aa1ad !important;
    color: #ffffff !important;
    opacity: 1;
}
/* _content/VisitPlus.Shared/Pages/PatientApproval.razor.rz.scp.css */
/* ============================================================
   Linked Patients: Approve/Decline Request + Confirmation
   (spec §23–24; Figma 2636-37299 / 37755 / 37821 / 37869).
   Prefix: pap-  Same light shell + corner sparkle as the sign-in
   screens (si-/le-), a left-aligned VisitPlus wordmark, a column
   of 18px body copy, and a sticky action bar.
   ============================================================ */

.pap-screen[b-8acf8ade8r] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(125px, calc(95px + env(safe-area-inset-top, 0px))) 20px
             calc(env(safe-area-inset-bottom, 0px) + 96px);
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra width, so the column
       stays 600px while the background reaches the real viewport edges. Below 600px this resolves
       to the 20px gutter, i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    overflow: hidden; /* clip the bleeding corner sparkle */
}

/* Decorative brand sparkle (faint, top-right, bleeds off edge) — same placement as .si-corner. */
.pap-corner[b-8acf8ade8r] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

/* ---- Brand wordmark ---- */
.pap-brand[b-8acf8ade8r] {
    z-index: 1;
    margin-bottom: 32px;
}

[b-8acf8ade8r] .pap-logo {
    width: 201px;
    max-width: 60%;
    height: auto;
    display: block;
}

/* ---- Body copy ---- */
.pap-content[b-8acf8ade8r] {
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.pap-text[b-8acf8ade8r] {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -.5px;
    color: #3d404a; /* gray/700 */
}

    /* The patient's own name is the one bold run in the greeting (Figma: Segoe UI Bold). */
    .pap-text b[b-8acf8ade8r] {
        font-weight: 700;
        letter-spacing: -1px;
    }

/* ---- Sticky bottom action bar ---- */
.pap-actions[b-8acf8ade8r] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    gap: 10px;
    box-sizing: border-box;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    /* Matches the content column on desktop so the buttons sit under the text, not at the edges. */
    padding-inline: max(16px, calc((100% - 600px) / 2));
    background: #fff;
}

.pap-btn[b-8acf8ade8r] {
    flex: 1 1 0;
    min-width: 120px;
    height: 52px;
    padding: 0 20px;
    border-radius: 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

    .pap-btn:disabled[b-8acf8ade8r] {
        opacity: .5;
        cursor: default;
    }

.pap-btn--primary[b-8acf8ade8r] {
    border: none;
    background: var(--vp-visitplus-primary);
    color: #fff;
}

    .pap-btn--primary:not(:disabled):hover[b-8acf8ade8r] {
        background: #1e2b3c;
    }

.pap-btn--outline[b-8acf8ade8r] {
    border: 1px solid #b6bac3;
    background: #fff;
    color: var(--vp-visitplus-primary);
}

    .pap-btn--outline:not(:disabled):hover[b-8acf8ade8r] {
        background: #f4f6f8;
    }

.pap-btn:focus-visible[b-8acf8ade8r] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/PatientLinkResult.razor.rz.scp.css */
/* ============================================================
   Patient-link outcome screens (Figma 2634-36785 success /
   2630-34242 not found / 2634-36524 age / 2634-36401 generic).
   Prefix: plr-  Same light sparkle-corner shell as the auth
   success screens; the badge + title switch teal ↔ orange.
   ============================================================ */

.plr-screen[b-xczrwp2ft6] {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: calc(64px + env(safe-area-inset-top, 0px)) 32px calc(32px + env(safe-area-inset-bottom, 0px));
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 600px while the background reaches the
       real viewport edges. Below 600px this resolves to the 20px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    overflow-x: hidden;
}

.plr-corner[b-xczrwp2ft6] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

.plr-content[b-xczrwp2ft6] {
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.plr-art[b-xczrwp2ft6] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.plr-title[b-xczrwp2ft6] {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.96px;
}

.plr-title--ok[b-xczrwp2ft6] {
    color: #297381;
}

.plr-title--warn[b-xczrwp2ft6] {
    color: #d94f04;
}

/* The title + copy are one block; the 40px gap belongs between art, block and button. */
.plr-content > .plr-title[b-xczrwp2ft6] {
    margin-bottom: -28px;
}

.plr-body[b-xczrwp2ft6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.plr-text[b-xczrwp2ft6] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.2px;
    color: #5b616e;
}

[b-xczrwp2ft6] .plr-continue {
    min-width: 174px;
    height: 52px;
    border-radius: 14px;
    text-transform: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    background-color: var(--vp-brand-primary) !important;
    color: #fff !important;
}

[b-xczrwp2ft6] .plr-continue:hover {
    background-color: #1b2c3f !important;
}
/* _content/VisitPlus.Shared/Pages/ReferralCancelPage.razor.rz.scp.css */
/* ============================================================
   Referral: Cancel (Figma 2653-24595). Prefix: rc-
   Header + sticky two-button bar reuse the Appointment Detail
   language (dt-); the blue info panel matches .dt-notify.
   ============================================================ */

.rc-shell[b-fl3ainy565] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* no min-height:100vh — it beats dvh when the URL bar shows and pushes the bar off-screen */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.rc-hdr[b-fl3ainy565] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.28) 100%);
}

.rc-hdr__pattern[b-fl3ainy565] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.rc-back[b-fl3ainy565] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: -6px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.rc-hdr__title[b-fl3ainy565] {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}

/* ===== Body ===== */
.rc-scroller[b-fl3ainy565] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .rc-scroller[b-fl3ainy565]::-webkit-scrollbar {
        display: none;
    }

.rc-body[b-fl3ainy565] {
    padding: 16px;
}

/* Blue explanatory panel — same tokens as the appointment detail notice (.dt-notify):
   blue/700 #1d64d8 on #ddf4ff = 4.8:1, WCAG AA. */
.rc-notify[b-fl3ainy565] {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #ddf4ff;
    border: 1px solid #bfd7fe;
    border-radius: 12px;
    padding: 12px;
}

.rc-notify__text[b-fl3ainy565] {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -.2px;
    color: #1d64d8;
}

.rc-h[b-fl3ainy565] {
    margin: 20px 0 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.3px;
    color: #0e0f0c;
}

.rc-notes[b-fl3ainy565] {
    box-sizing: border-box;
    width: 100%;
    min-height: 130px;
    margin-top: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    color: #0e0f0c;
    resize: vertical;
}

    .rc-notes[b-fl3ainy565]::placeholder {
        color: #8e95a2;
    }

.rc-notes__count[b-fl3ainy565] {
    margin: 6px 2px 0;
    text-align: right;
    font-size: 12px;
    color: #8e95a2;
}

.rc-spacer[b-fl3ainy565] {
    height: 40px;
}

/* ===== Sticky action bar ===== */
.rc-actions[b-fl3ainy565] {
    flex: 0 0 auto;
    display: flex;
    gap: 12px;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: #f4f6f8;
    border-top: 1px solid #edeef1;
}

.rc-btn-secondary[b-fl3ainy565] {
    flex: 0 0 44%;
    padding: 15px;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    background: #fff;
    color: var(--vp-brand-primary);
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.rc-btn-primary[b-fl3ainy565] {
    flex: 1 1 auto;
    padding: 15px;
    border: none;
    border-radius: 12px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

    .rc-btn-primary:disabled[b-fl3ainy565] {
        background: #b6bac3;
        cursor: not-allowed;
    }

/* ===== Focus ===== */
.rc-back:focus-visible[b-fl3ainy565],
.rc-notes:focus-visible[b-fl3ainy565],
.rc-btn-secondary:focus-visible[b-fl3ainy565],
.rc-btn-primary:focus-visible[b-fl3ainy565] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/ReferralDetailPage.razor.rz.scp.css */
/* ============================================================
   Referral: Details + FAQs (Figma 2648-40432 / 2652-23942).
   Prefix: rd-
   Header + tab bar reuse the Appointment Detail language (dt-);
   the FAQs accordion reuses the FAQs screen language (faq-).
   ============================================================ */

.rd-shell[b-mcdblnjxqt] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* no min-height:100vh — it beats dvh when the URL bar shows */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.rd-hdr[b-mcdblnjxqt] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.28) 100%);
}

.rd-hdr__pattern[b-mcdblnjxqt] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.rd-back[b-mcdblnjxqt] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: -6px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.rd-hdr__title[b-mcdblnjxqt] {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}

/* ===== Tabs ===== */
.rd-tabs[b-mcdblnjxqt] {
    flex: 0 0 auto;
    display: flex;
    background: #fff;
    border-bottom: 1px solid #edeef1;
}

.rd-tab[b-mcdblnjxqt] {
    position: relative;
    flex: 1 1 0;
    padding: 14px 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: #8e95a2;
    cursor: pointer;
}

.rd-tab--active[b-mcdblnjxqt] {
    color: var(--vp-brand-primary);
}

    .rd-tab--active[b-mcdblnjxqt]::after {
        content: "";
        position: absolute;
        left: 12px;
        right: 12px;
        bottom: -1px;
        height: 2px;
        background: var(--vp-brand-primary);
    }

/* ===== Body ===== */
.rd-scroller[b-mcdblnjxqt] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .rd-scroller[b-mcdblnjxqt]::-webkit-scrollbar {
        display: none;
    }

.rd-body[b-mcdblnjxqt] {
    padding: 12px 16px 0;
}

/* ===== Field card ===== */
.rd-card[b-mcdblnjxqt] {
    margin-top: 12px;
    background: #fff;
    border-radius: 16px;
    padding: 4px 16px;
    box-shadow: 0 2px 10px rgba(16,24,40,.06);
}

.rd-row[b-mcdblnjxqt] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
}

.rd-row__icon[b-mcdblnjxqt] {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    opacity: .6;
    display: block;
}

.rd-row__text[b-mcdblnjxqt] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: #26364a;
}

.rd-link[b-mcdblnjxqt] {
    color: #3b82f6;
}

.rd-help[b-mcdblnjxqt] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    cursor: pointer;
    opacity: .6;
}

/* Tap-to-reveal help note: the spec's "static tooltip message", inline so it also works on touch. */
.rd-tip[b-mcdblnjxqt] {
    margin: 0 0 12px 30px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    color: #6b7280;
}

.rd-divider[b-mcdblnjxqt] {
    height: 1px;
    background: #edeef1;
}

/* ===== Notes ===== */
.rd-h[b-mcdblnjxqt] {
    margin: 24px 0 8px;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.3px;
    color: #0e0f0c;
}

.rd-p[b-mcdblnjxqt] {
    margin: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
    color: #6b7280;
}

.rd-notes[b-mcdblnjxqt] {
    box-sizing: border-box;
    width: 100%;
    min-height: 130px;
    margin-top: 12px;
    padding: 14px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    color: #0e0f0c;
    resize: vertical;
}

    .rd-notes[b-mcdblnjxqt]::placeholder {
        color: #8e95a2;
    }

.rd-notes__count[b-mcdblnjxqt] {
    margin: 6px 2px 0;
    text-align: right;
    font-size: 12px;
    color: #8e95a2;
}

/* ===== Buttons ===== */
.rd-btn-outline[b-mcdblnjxqt] {
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    padding: 15px 20px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    color: var(--vp-brand-primary);
    cursor: pointer;
}

.rd-btn-outline--full[b-mcdblnjxqt] {
    display: block;
    width: 100%;
    margin-top: 20px;
}

/* ===== Missing referral ===== */
/* ===== FAQs accordion (mirrors the FAQs screen, Figma 2691-36409) ===== */
.rd-faqs[b-mcdblnjxqt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
}

.rd-faq[b-mcdblnjxqt] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px 12px 12px 16px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 2px 6px rgba(0,0,0,.04);
}

.rd-faq__q[b-mcdblnjxqt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    min-height: 38px;
    padding: 0;
    border: none;
    background: none;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.rd-faq__q-text[b-mcdblnjxqt] {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.2px;
    color: #1e55af;
}

.rd-faq__icon[b-mcdblnjxqt] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 22px;
    background: #eceff1;
}

.rd-faq__a[b-mcdblnjxqt] {
    padding-bottom: 6px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.5px;
    color: #6b7280;
}

.rd-spacer[b-mcdblnjxqt] {
    height: 40px;
}

/* ===== Focus ===== */
.rd-back:focus-visible[b-mcdblnjxqt],
.rd-tab:focus-visible[b-mcdblnjxqt],
.rd-help:focus-visible[b-mcdblnjxqt],
.rd-notes:focus-visible[b-mcdblnjxqt],
.rd-faq__q:focus-visible[b-mcdblnjxqt],
.rd-btn-outline:focus-visible[b-mcdblnjxqt] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/ReferralsList.razor.rz.scp.css */
/* ============================================================
   Referrals list / empty state (Figma 2641-39470 / 2641-39045).
   Prefix: rf-
   Same shell as the Next of Kin + My Patient Record screens:
   health-network header (back + title) over a scrolling body.
   ============================================================ */

.rf-shell[b-46ydn2q7yc] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* no min-height:100vh — it beats dvh when the URL bar shows */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.rf-hdr[b-46ydn2q7yc] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 16px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.30) 100%);
}

.rf-hdr__pattern[b-46ydn2q7yc] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.rf-hdr__bar[b-46ydn2q7yc] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 40px;
}

.rf-back[b-46ydn2q7yc] {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 0;
    margin-left: -6px; /* optically align the chevron to the edge */
    border: none;
    background: none;
    cursor: pointer;
}

.rf-hdr__title[b-46ydn2q7yc] {
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -1px;
    line-height: 1.2;
}

/* ===== Toolbar: search + filter ===== */
.rf-toolbar[b-46ydn2q7yc] {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    padding: 12px;
    background: #f4f6f8;
}

.rf-search[b-46ydn2q7yc] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 40px;
    padding: 0 10px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
}

.rf-search__input[b-46ydn2q7yc] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.4px;
    color: #0e0f0c;
}

    .rf-search__input[b-46ydn2q7yc]::placeholder {
        color: #6b7280;
        font-weight: 400;
    }

.rf-filter[b-46ydn2q7yc] {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background: #fff;
    border: 1px solid #b6bac3;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.rf-filter--active[b-46ydn2q7yc] {
    background: var(--vp-brand-primary); /* active filter => filled navy pill (icon turns white) */
    border-color: var(--vp-brand-primary);
}

/* ===== Scroller ===== */
.rf-scroller[b-46ydn2q7yc] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f4f6f8;
}

    .rf-scroller[b-46ydn2q7yc]::-webkit-scrollbar {
        display: none;
    }

/* ===== Count row ===== */
/* NB: the count row sits directly under the toolbar, so the empty state's padding-top is measured
   from there — the Figma gap (191px below the header) already includes the 64px toolbar. */
.rf-countrow[b-46ydn2q7yc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 16px 8px;
}

.rf-count[b-46ydn2q7yc] {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.4px;
    color: #000;
}

.rf-count__info[b-46ydn2q7yc] {
    opacity: .6;
}

/* ===== List ===== */
.rf-list[b-46ydn2q7yc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0 16px;
}

.rf-bottom-space[b-46ydn2q7yc] {
    height: 40px;
}

/* ===== Empty state ===== */
.rf-empty[b-46ydn2q7yc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 318px;
    margin: 0 auto;
    padding-top: 130px;
    text-align: center;
}

.rf-empty__art[b-46ydn2q7yc] {
    position: relative;
    width: 172px;
    height: 172px;
}

.rf-empty__doc[b-46ydn2q7yc] {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: auto;
}

/* Brand-secondary teal, not the network accent: the Figma empty state keeps the badge + the
   document's folded corner teal even on the navy Prince of Wales header. */
.rf-empty__badge[b-46ydn2q7yc] {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--vp-brand-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: inset 0 0 3px rgba(255,255,255,.9), 0 4px 10px rgba(13,18,37,.25);
}

    .rf-empty__badge img[b-46ydn2q7yc] {
        width: 22px;
        height: 22px;
        display: block;
    }

.rf-empty__text[b-46ydn2q7yc] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.rf-empty__title[b-46ydn2q7yc] {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1px;
    color: #26364a;
}

.rf-empty__desc[b-46ydn2q7yc] {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: -.4px;
    color: #5b616e;
}

/* ===== Filter bottom sheet (Figma 2646-40077) ===== */
.rf-sheet-overlay[b-46ydn2q7yc] {
    position: fixed;
    inset: 0;
    z-index: 1200;
    background: rgba(0,0,0,.5); /* Figma "BLACK 50%" */
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.rf-sheet[b-46ydn2q7yc] {
    width: 100%;
    max-width: 600px;
    background: #f4f6f8;
    border-radius: 20px 20px 0 0;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    animation: rf-sheet-up-b-46ydn2q7yc .25s ease;
}

@keyframes rf-sheet-up-b-46ydn2q7yc {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.rf-sheet__title[b-46ydn2q7yc] {
    background: #fff;
    border-radius: 20px 20px 0 0;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.2px;
    color: #0e0f0c;
    padding: 17px 0;
}

.rf-sheet__body[b-46ydn2q7yc] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
    max-height: 52vh;
    overflow-y: auto;
}

/* collapsible filter section card */
.rf-fsec[b-46ydn2q7yc] {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rf-fsec__head[b-46ydn2q7yc] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: #26364a;
}

.rf-fsec__body[b-46ydn2q7yc] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rf-check[b-46ydn2q7yc] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 32px;
    cursor: pointer;
}

.rf-check__box[b-46ydn2q7yc] {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: block;
}

.rf-check__label[b-46ydn2q7yc] {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: #6b7280;
}

.rf-check--on .rf-check__label[b-46ydn2q7yc] {
    color: #0e0f10;
}

.rf-sheet__actions[b-46ydn2q7yc] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 16px 8px;
}

.rf-btn-clear[b-46ydn2q7yc] {
    flex: 0 0 34%;
    padding: 14px;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    background: #fff;
    color: var(--vp-brand-primary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.rf-btn-apply[b-46ydn2q7yc] {
    flex: 1 1 auto;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

/* ===== Focus + reduced motion ===== */
.rf-back:focus-visible[b-46ydn2q7yc],
.rf-filter:focus-visible[b-46ydn2q7yc],
.rf-fsec__head:focus-visible[b-46ydn2q7yc],
.rf-check:focus-visible[b-46ydn2q7yc],
.rf-btn-clear:focus-visible[b-46ydn2q7yc],
.rf-btn-apply:focus-visible[b-46ydn2q7yc] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .rf-sheet[b-46ydn2q7yc] {
        animation: none;
    }
}
/* _content/VisitPlus.Shared/Pages/Register.razor.rz.scp.css */
/* ============================================================
   Sign-up by email (Figma 134:169 / 167:4178). Light shell + sparkle,
   top-anchored, logo + "Create your account" left-aligned, scrolling form.
   ============================================================ */
.rg-screen[b-9hqw1igjw5] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /* Figma: content (logo/title) sits at y=145, i.e. 35px below the 40px back button (top 70). */
    padding: max(125px, calc(95px + env(safe-area-inset-top, 0px))) 20px calc(32px + env(safe-area-inset-bottom, 0px));
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 600px while the background reaches the
       real viewport edges. Below 600px this resolves to the 20px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    /* Clip only the sparkle's horizontal bleed; let the form grow/scroll vertically. */
    overflow-x: hidden;
}

.rg-corner[b-9hqw1igjw5] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

[b-9hqw1igjw5] .rg-back {
    position: absolute;
    top: max(50px, calc(20px + env(safe-area-inset-top, 0px)));
    left: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: #ffffff;
    border-radius: 72px;
    color: var(--vp-visitplus-primary);
    box-shadow: 0 1px 3px rgba(34, 54, 76, 0.12);
}

[b-9hqw1igjw5] .rg-back:hover {
    background-color: #eef0f3;
}

/* The screen is one vertical stack with a 40px rhythm (node 2349:28350): logo -> Notify banner
   -> title+fields -> button. Every gap below comes off that node; they were 14/24/20/24, which is
   what made the banner look wedged between the logo and the title. */
.rg-brand[b-9hqw1igjw5] {
    z-index: 1;
    margin-bottom: 40px;
}

[b-9hqw1igjw5] .rg-logo {
    width: 150px;
    height: auto;
    display: block;
}

.rg-content[b-9hqw1igjw5] {
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.rg-title[b-9hqw1igjw5] {
    margin: 0 0 24px;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: #297381;
}

[b-9hqw1igjw5] .rg-notify {
    margin-bottom: 40px;
}

.rg-field[b-9hqw1igjw5] {
    margin-bottom: 12px;
}

.rg-label[b-9hqw1igjw5] {
    padding-left: 4px;      /* the node's label container is inset 4px from the input's edge */
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
    color: #22364c;
}

/* ============================================================
   Input colour states — Figma 315:1193 "40px Input".
   Default / Typing(focus) / Filled / Error / Disabled.
   ============================================================ */
[b-9hqw1igjw5] .rg-input .mud-input.mud-input-outlined {
    border-radius: 12px;
    background-color: #ffffff;
    height: 52px;
    align-items: center;
}

/* Default border: gray/200 */
[b-9hqw1igjw5] .rg-input .mud-input-outlined-border {
    border-radius: 12px;
    border-color: #d8dbdf;
    border-width: 1px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* Value text: black when filled; placeholder: gray/500 */
[b-9hqw1igjw5] .rg-input input.mud-input-slot,
[b-9hqw1igjw5] .rg-input .mud-input.mud-input-outlined input.mud-input-slot {
    color: #000000;
    font-weight: 600;
    padding-top: 0;
    padding-bottom: 0;
}

[b-9hqw1igjw5] .rg-input input.mud-input-slot::placeholder {
    color: #6b7280;
    opacity: 1;
}

/* Typing (focus): blue/600 border + blue/100 ring (MudBlazor 8 uses :focus-within, not .mud-focused) */
[b-9hqw1igjw5] .rg-input .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-color: #2570eb !important;
    border-width: 1px !important;
    box-shadow: 0 0 0 3px #ddf4ff;
}

/* Error: orange/700 border + orange/100 ring (override MudBlazor's theme red) */
[b-9hqw1igjw5] .rg-input.mud-input-error .mud-input-outlined-border,
[b-9hqw1igjw5] .rg-input .mud-input.mud-input-error .mud-input-outlined-border {
    border-color: #c74307 !important;
    box-shadow: 0 0 0 2px #fff5e5;
}

/* Disabled: neutral/50 fill + neutral/300 text */
[b-9hqw1igjw5] .rg-input .mud-input.mud-input-outlined.mud-disabled {
    background-color: #f7f8f8;
}

[b-9hqw1igjw5] .rg-input .mud-input.mud-disabled input.mud-input-slot {
    color: #b6bac3 !important;
}

/* The "already registered" message lives in the Notify banner, so the field shows the error ring
   alone — MudBlazor still renders the helper container (and its ::before glyph) for an empty
   ErrorText, which would leave an orange fragment under the box. */
[b-9hqw1igjw5] .rg-input--nohelp .mud-input-control-helper-container {
    display: none !important;
}

/* Error helper: Figma shows icon + orange text, NOT the legacy pink box (app.css:1039). */
[b-9hqw1igjw5] .rg-input.mud-input-error .mud-input-control-helper-container {
    background-color: transparent !important;
    padding: 4px 0 0 24px !important;
    margin-top: 4px !important;
}

[b-9hqw1igjw5] .rg-input.mud-input-error .mud-input-control-helper-container::before {
    left: 0 !important;
    width: 16px !important;
    height: 16px !important;
    border-color: #c74307 !important;
    color: #c74307 !important;
    font-size: 11px !important;
}

[b-9hqw1igjw5] .rg-input.mud-input-error .mud-input-helper-text {
    color: #c74307 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: -0.2px;
}

/* Terms & conditions consent row */
/* 17px above (the node groups fields + consent at gap 17), 40px below to the button. */
.rg-terms[b-9hqw1igjw5] {
    display: flex;
    align-items: flex-start;
    margin: 5px 0 40px;
}

[b-9hqw1igjw5] .rg-check {
    margin: -2px 2px 0 -10px;
}

/* T&C consent line — Figma 134:1174: black body text, blue/700 links */
.rg-terms-text[b-9hqw1igjw5] {
    font-size: 13px;
    line-height: 1.45;
    color: #000000;
    padding-top: 2px;
}

/* !important: MudLink's .mud-primary-text has equal specificity and loads after our scoped CSS. */
[b-9hqw1igjw5] .rg-terms-link {
    color: #1d64d8 !important;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}

[b-9hqw1igjw5] .rg-terms-link:hover {
    text-decoration: underline;
}

/* Create-account button */
[b-9hqw1igjw5] .rg-submit {
    height: 52px;
    border-radius: 14px;
    text-transform: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
    background-color: #22364c !important;
    color: #ffffff !important;
}

[b-9hqw1igjw5] .rg-submit:hover {
    background-color: #1b2c3f !important;
}

[b-9hqw1igjw5] .rg-submit:disabled,
[b-9hqw1igjw5] .rg-submit.mud-button-disabled {
    background-color: #9aa1ad !important;
    color: #ffffff !important;
    opacity: 1;
}

/* Sign-in footer */
.rg-signin[b-9hqw1igjw5] {
    margin: 8px 0 0;
    text-align: center;
    font-size: 14px;
}

.rg-signin-muted[b-9hqw1igjw5] {
    color: #616161;
}

[b-9hqw1igjw5] .rg-signin-link {
    color: #22364c;
    font-weight: 700;
}
/* _content/VisitPlus.Shared/Pages/RegistrationTerms.razor.rz.scp.css */
/* ============================================================
   Registration: Terms and Conditions (Figma 2943:47001).
   Prefix: rt-. Light shell + sparkle, heading + lead-in, then the shared
   accordion (Pages/Components/TermsAccordion.razor).
   ============================================================ */

.rt-screen[b-6333scxnhf] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /* Figma: content starts at y=153, i.e. 43px below the 40px back button (top 70). */
    padding: max(133px, calc(103px + env(safe-area-inset-top, 0px))) 16px calc(32px + env(safe-area-inset-bottom, 0px));
    padding-inline: max(16px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    overflow-x: hidden;
}

.rt-corner[b-6333scxnhf] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

[b-6333scxnhf] .rt-back {
    position: absolute;
    top: max(50px, calc(20px + env(safe-area-inset-top, 0px)));
    left: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    background-color: #ffffff;
    border-radius: 72px;
    color: var(--vp-visitplus-primary);
    box-shadow: 0 1px 3px rgba(34, 54, 76, 0.12);
}

[b-6333scxnhf] .rt-back:hover {
    background-color: #eef0f3;
}

.rt-content[b-6333scxnhf] {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
}

/* Heading/H5 */
.rt-title[b-6333scxnhf] {
    margin: 0 0 24px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.04px;
    color: #297381;
}

.rt-instruction[b-6333scxnhf] {
    margin: 0 0 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.6px;
    color: #676767;
}
/* _content/VisitPlus.Shared/Pages/RescheduleAppointment.razor.rz.scp.css */
/* ============================================================
   Reschedule appointment (Figma 1819-13560 / 1833-14184). Prefix: rs-
   Blue per-hospital header + intro + free-text reason + stacked
   "Keep appointment" / "Submit request" bottom bar.
   ============================================================ */

.rs-shell[b-z9sw736x8a] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh; /* no min-height:100vh — it beats dvh when the URL bar shows, pushing the bar off-screen */
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.rs-hdr[b-z9sw736x8a] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 20px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.28) 100%);
}

.rs-hdr__pattern[b-z9sw736x8a] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.rs-title[b-z9sw736x8a] {
    position: relative;
    z-index: 1;
    margin: 0;
    color: #fff;
    font-size: 26px;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.2;
}

/* ===== Scroller ===== */
.rs-scroller[b-z9sw736x8a] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    background: #f4f6f8;
}

    .rs-scroller[b-z9sw736x8a]::-webkit-scrollbar {
        display: none;
    }

.rs-body[b-z9sw736x8a] {
    padding: 16px;
}

.rs-intro[b-z9sw736x8a] {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.5px;
    color: #5b616e;
}

/* #Facility + "rescheduling/cancelling" emphasis (Figma blue). */
.rs-em[b-z9sw736x8a] {
    color: #1d64d8;
}

.rs-label[b-z9sw736x8a] {
    margin: 20px 0 8px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -.5px;
    color: #0e0f0c;
}

.rs-textarea[b-z9sw736x8a] {
    box-sizing: border-box;
    width: 100%;
    min-height: 220px;
    padding: 12px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    line-height: 1.3;
    font-family: inherit;
    color: #0e0f0c;
    resize: vertical;
}

    .rs-textarea[b-z9sw736x8a]::placeholder {
        color: #6b7280;
        font-weight: 600;
    }

    .rs-textarea:focus-visible[b-z9sw736x8a] {
        outline: 2px solid #2570eb;
        outline-offset: 2px;
        border-color: #2570eb;
    }

/* ===== Sticky bottom action bar (2 stacked, full-width) ===== */
.rs-actions[b-z9sw736x8a] {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 12px);
    background: #fff;
    box-shadow: 0 -4px 16px rgba(16,24,40,.06);
}

.rs-btn-secondary[b-z9sw736x8a],
.rs-btn-primary[b-z9sw736x8a] {
    width: 100%;
    height: 52px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

.rs-btn-secondary[b-z9sw736x8a] {
    background: #edeef1;
    color: var(--vp-brand-primary);
}

.rs-btn-primary[b-z9sw736x8a] {
    background: var(--vp-brand-primary);
    color: #fff;
}

    .rs-btn-primary:disabled[b-z9sw736x8a] {
        opacity: .6;
        cursor: default;
    }

.rs-btn-secondary:focus-visible[b-z9sw736x8a],
.rs-btn-primary:focus-visible[b-z9sw736x8a] {
    outline: 2px solid #2570eb;
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/SelectCareNetwork.razor.rz.scp.css */
/* ============================================================
   Select-care-network screen — full-bleed hero (Figma: 540:13861;
   spec: "App Main: Care Network Selection")
   Brand colours: navy #26364a / scrim #22364c, card white #ffffff
   Reuses the shared onboarding hero photo (nexa-welcome-bg.jpg).
   ============================================================ */
.scn-screen[b-4o8bg8k5za] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Full-bleed on every size — the photo reaches the viewport edges on desktop too.
       Only the content column is capped (see padding-inline below). */
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /* Figma: content sits in a 20px side gutter. */
    padding: 0 20px;
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 480px while the background reaches the
       real viewport edges. Below 480px this resolves to the 20px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 480px) / 2));
    padding-bottom: calc(34px + env(safe-area-inset-bottom, 0px));
    color: #ffffff;
    /* Clinic photo + flat darkening + vertical navy scrim (transparent at the top
       where the logo sits, solid navy at the bottom behind the cards). */
    background-color: #22364c;
    background-image:
        linear-gradient(180deg,
            rgba(34, 54, 76, 0) 0%,
            rgba(34, 54, 76, 0.08) 16%,
            rgba(34, 54, 76, 0.28) 32%,
            rgba(34, 54, 76, 0.62) 64%,
            rgb(34, 54, 76) 100%),
        linear-gradient(rgba(22, 26, 31, 0.30), rgba(22, 26, 31, 0.30)),
        url('images/nexa-welcome-bg.jpg');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center, center, center;
    background-size: cover, cover, cover;
}

/* Modal-style bottom-sheet transition: slide up from the bottom on open, down out the bottom
   on close. Enter uses fill:backwards (no residual transform at rest); leave uses fill:forwards
   so the screen stays off-screen during the short delay before the actual navigation fires. */
.scn-enter[b-4o8bg8k5za] {
    animation: scn-in-from-bottom-b-4o8bg8k5za .34s cubic-bezier(.22, .61, .36, 1) backwards;
}

.scn-leave[b-4o8bg8k5za] {
    animation: scn-out-to-bottom-b-4o8bg8k5za .3s cubic-bezier(.55, .06, .68, .19) forwards;
}

@keyframes scn-in-from-bottom-b-4o8bg8k5za {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

@keyframes scn-out-to-bottom-b-4o8bg8k5za {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}

@media (prefers-reduced-motion: reduce) {
    .scn-enter[b-4o8bg8k5za],
    .scn-leave[b-4o8bg8k5za] {
        animation: none;
    }
}

/* ---- 'My account' button (white circle, navy icon, top-right) ---- */
[b-4o8bg8k5za] .scn-account {
    position: absolute;
    /* iOS WKWebView populates safe-area-inset-top; Android WebView reports 0 for the
       regular status bar, so floor the offset at 50px so the button clears it there too. */
    top: max(50px, calc(20px + env(safe-area-inset-top, 0px)));
    right: 20px;
    z-index: 2;
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    background-color: #ffffff;
    border-radius: 72px;
    color: #26364a;
    box-shadow: 0 1px 3px rgba(34, 54, 76, 0.12);
}

[b-4o8bg8k5za] .scn-account .mud-icon-root {
    font-size: 24px;
}

@media (hover: hover) {
    [b-4o8bg8k5za] .scn-account:hover {
        background-color: #eef0f3;
    }
}

/* ---- Brand: logo + tagline ---- */
.scn-brand[b-4o8bg8k5za] {
    margin-top: 28vh;
    text-align: center;
}

[b-4o8bg8k5za] .scn-logo {
    display: block;
    width: 248px;
    max-width: 66%;
    height: auto;
    margin: 0 auto;
    /* Brand wordmark is navy/teal; render it solid white over the photo */
    filter: brightness(0) invert(1);
}

.scn-tagline[b-4o8bg8k5za] {
    margin: 4px auto 0;
    max-width: 270px;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
    /* Keep the tagline legible over the brighter upper part of the photo */
    text-shadow: 0 1px 8px rgba(22, 26, 31, 0.35);
}

/* ---- Content (heading + list, pushed to the bottom of the hero) ---- */
.scn-content[b-4o8bg8k5za] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.scn-title[b-4o8bg8k5za] {
    margin: 0;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.6px;
    color: #ffffff;
}

/* ---- Care network cards ---- */
.scn-list[b-4o8bg8k5za] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

[b-4o8bg8k5za] .scn-card {
    height: 80px;
    padding: 4px 16px 4px 6px;
    background-color: #ffffff !important;
    color: #26364a !important;
    border-radius: 16px !important;
    text-transform: none !important;
    box-shadow: none !important;
}

[b-4o8bg8k5za] .scn-card:hover {
    background-color: #f5f6f8 !important;
}

/* Visible keyboard focus ring (box-shadow is suppressed above, so add an explicit
   high-contrast outline that reads against both the white card and the navy gutter). */
[b-4o8bg8k5za] .scn-card:focus-visible {
    outline: 3px solid #ffffff;
    outline-offset: 2px;
}

/* Lay the label out as: logo (grows) ... chevron (fixed) */
[b-4o8bg8k5za] .scn-card .mud-button-label {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.scn-card-logo-wrap[b-4o8bg8k5za] {
    flex: 1 1 0;
    min-width: 0;
    height: 54px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.scn-card-logo[b-4o8bg8k5za] {
    display: block;
    height: 46px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: left center;
}

[b-4o8bg8k5za] .scn-card-chevron {
    flex-shrink: 0;
    color: #26364a;
    font-size: 24px;
}

/* ---- Desktop hero photo ----------------------------------------------
   Wider crop above the phone breakpoint, matching Welcome. The full
   background-image stack is restated because it is one property. */
@media (min-width: 768px) {
    .scn-screen[b-4o8bg8k5za] {
        background-image:
            linear-gradient(180deg,
                rgba(34, 54, 76, 0) 0%,
                rgba(34, 54, 76, 0.08) 16%,
                rgba(34, 54, 76, 0.28) 32%,
                rgba(34, 54, 76, 0.62) 64%,
                rgb(34, 54, 76) 100%),
            linear-gradient(rgba(22, 26, 31, 0.30), rgba(22, 26, 31, 0.30)),
            url('images/nexa-welcome-bg-wide.jpg');
        /* Photo pinned near the top of the frame — see the note in Welcome.razor.css. */
        background-position: center, center, center 20%;
    }
}
/* _content/VisitPlus.Shared/Pages/SetupPhone.razor.rz.scp.css */
/* ============================================================
   Account Recovery Step 1 — Add your mobile number (Figma 2317:24281).
   Light shell + sparkle, step-progress header, +61 country box + number
   field + Send OTP. Mirrors the auth shell.
   ============================================================ */
.sp-screen[b-lh8933wkb8] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(125px, calc(95px + env(safe-area-inset-top, 0px))) 20px calc(32px + env(safe-area-inset-bottom, 0px));
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 600px while the background reaches the
       real viewport edges. Below 600px this resolves to the 20px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    overflow-x: hidden;
}

.sp-corner[b-lh8933wkb8] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

.sp-content[b-lh8933wkb8] {
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sp-title[b-lh8933wkb8] {
    margin: 0;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.04px;
    color: #297381;
}

.sp-field[b-lh8933wkb8] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sp-label[b-lh8933wkb8] {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.4px;
    color: #060606;
}

.sp-phone-row[b-lh8933wkb8] {
    display: flex;
    align-items: stretch;
    gap: 4px;
}

.sp-cc[b-lh8933wkb8] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 52px;
    padding: 12px 16px 12px 10px;
    box-sizing: border-box;
    background-color: #ffffff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
}

.sp-flag[b-lh8933wkb8] {
    width: 36px;
    height: 24px;
    border-radius: 5px;
    box-shadow: 0 0 0.136px rgba(66, 71, 76, 0.32), 0 2.172px 1.629px rgba(66, 71, 76, 0.08);
}

.sp-cc-code[b-lh8933wkb8] {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.5px;
    color: #000000;
}

/* Dev: when the user types a full international number, the fixed +61 is bypassed — dim it to show so. */
.sp-cc.is-overridden[b-lh8933wkb8] {
    opacity: 0.45;
}

.sp-dev-hint[b-lh8933wkb8] {
    margin: 8px 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: #8a6d3b;
    background-color: #fbf4e6;
    border: 1px solid #f0e0bd;
    border-radius: 8px;
    padding: 6px 10px;
}

.sp-number[b-lh8933wkb8] {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
}

.sp-number-input[b-lh8933wkb8] {
    flex: 1 0 0;
    min-width: 0;
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    padding: 12px 10px;
    background-color: #ffffff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.5px;
    color: #000000;
    outline: none;
    appearance: none;
}

.sp-number-input[b-lh8933wkb8]::placeholder {
    color: #6b7280;
    font-weight: 600;
}

.sp-number-input:focus[b-lh8933wkb8] {
    /* Fixed VisitPlus colours, not --vp-brand-*: this step runs before the health network is
       picked, so there is no network in play. See --vp-visitplus-primary in app.css. */
    border-color: var(--vp-visitplus-secondary);
}

[b-lh8933wkb8] .sp-submit {
    height: 52px;
    margin-top: 16px;
    border-radius: 14px;
    text-transform: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.5px;
    background-color: var(--vp-visitplus-primary) !important;
    color: #ffffff !important;
}

[b-lh8933wkb8] .sp-submit:hover {
    background-color: #1b2c3f !important;
}

[b-lh8933wkb8] .sp-submit:disabled,
[b-lh8933wkb8] .sp-submit.mud-button-disabled {
    background-color: var(--vp-visitplus-primary) !important;
    color: #ffffff !important;
    opacity: 0.6;
}
/* _content/VisitPlus.Shared/Pages/UpdatePasswordPage.razor.rz.scp.css */
/* ============================================================
   Change password (Figma 2273-14355 / 2279-15908 / 2349-28754).
   Prefix: cp-. Navy patterned header + 3 password fields with
   eye toggles + sticky "Update password" button.
   ============================================================ */

.cp-shell[b-2t89c94pjv] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.cp-hdr[b-2t89c94pjv] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 20px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.28) 100%);
}

.cp-hdr__pattern[b-2t89c94pjv] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.cp-back[b-2t89c94pjv] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: -4px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.6px;
    cursor: pointer;
}

/* ===== Scroller ===== */
.cp-scroller[b-2t89c94pjv] {
    flex: 1 1 auto;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 28px 20px 24px;
    background: #f4f6f8;
}

    .cp-scroller[b-2t89c94pjv]::-webkit-scrollbar {
        display: none;
    }

/* ===== Form ===== */
.cp-form[b-2t89c94pjv] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.cp-field[b-2t89c94pjv] {
    display: flex;
    flex-direction: column;
}

.cp-label[b-2t89c94pjv] {
    padding: 0 4px;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -.4px;
    color: #2c2f34;
}

.cp-input[b-2t89c94pjv] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 52px;
    padding: 0 10px 0 12px;
    background: #fff;
    border: 1px solid #d8dbdf;
    border-radius: 12px;
    box-sizing: border-box;
}

    .cp-input:focus-within[b-2t89c94pjv] {
        border-color: var(--vp-brand-primary);
        box-shadow: 0 0 0 1px var(--vp-brand-primary);
    }

.cp-input--error[b-2t89c94pjv] {
    border-color: #c74307;
}

    .cp-input--error:focus-within[b-2t89c94pjv] {
        border-color: #c74307;
        box-shadow: 0 0 0 1px #c74307;
    }

.cp-input__el[b-2t89c94pjv] {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.5px;
    color: #000;
}

    .cp-input__el[b-2t89c94pjv]::placeholder {
        color: #6b7280;
        font-weight: 600;
    }

.cp-eye[b-2t89c94pjv] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
}

.cp-err[b-2t89c94pjv] {
    margin: 6px 4px 0;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: #c74307;
}

.cp-alert[b-2t89c94pjv] {
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #fbe9e1;
    color: #c74307;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.35;
}

/* ===== Sticky action bar ===== */
.cp-bar[b-2t89c94pjv] {
    flex: 0 0 auto;
    padding: 12px 20px calc(env(safe-area-inset-bottom, 0px) + 24px);
    background: #f4f6f8;
}

.cp-btn[b-2t89c94pjv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    padding: 12px 20px;
    border: none;
    border-radius: 14px;
    background: var(--vp-brand-primary);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

.cp-btn--disabled[b-2t89c94pjv] {
    opacity: .5;
    cursor: not-allowed;
}

/* ===== Focus visibility ===== */
.cp-back:focus-visible[b-2t89c94pjv],
.cp-btn:focus-visible[b-2t89c94pjv],
.cp-eye:focus-visible[b-2t89c94pjv] {
    outline: 2px solid #297381;
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/VerifyNewMobile.razor.rz.scp.css */
/* ============================================================
   My Account: Verify New Mobile Number (Figma 3121:36574 / 36476 / 36525).
   Prefix: vn-. App-shell (navy header) + the shared segmented code input
   + sticky primary CTA.
   ============================================================ */

.vn-shell[b-rqq2h415v0] {
    position: relative;
    height: 100vh; /* fallback for browsers without dvh */
    height: 100dvh;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #f4f6f8;
}

/* ===== Header ===== */
.vn-hdr[b-rqq2h415v0] {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px 20px;
    background-color: var(--vp-brand-primary);
    background-image: linear-gradient(158deg, rgba(255,255,255,.10) 0%, rgba(0,0,0,.06) 45%, rgba(0,0,0,.28) 100%);
}

.vn-hdr__pattern[b-rqq2h415v0] {
    position: absolute;
    top: 0;
    right: 0;
    width: 402px;
    height: 215px;
    z-index: 0;
    pointer-events: none;
}

.vn-back[b-rqq2h415v0] {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: -4px;
    padding: 0;
    border: none;
    background: none;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.6px;
    cursor: pointer;
}

/* ===== Body ===== */
.vn-scroller[b-rqq2h415v0] {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px 24px;
}

/* Error banner: shared VpNotify component; the page only owns the gap below it. */
[b-rqq2h415v0] .vn-notify {
    margin-bottom: 24px;
}

.vn-instruction[b-rqq2h415v0] {
    margin: 0 0 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.6px;
    color: #676767;
}

.vn-code[b-rqq2h415v0] {
    margin-bottom: 12px;
}

/* Resend link — right aligned under the code input. */
.vn-resend[b-rqq2h415v0] {
    text-align: right;
}

[b-rqq2h415v0] .vn-resend-link {
    color: #2a2a2a !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.2px;
    text-decoration: underline;
    cursor: pointer;
}

/* ===== Sticky action bar ===== */
.vn-bar[b-rqq2h415v0] {
    flex: 0 0 auto;
    padding: 12px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
    background: rgba(247, 248, 250, .92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 -4px 7.65px rgba(0,0,0,.05);
}

.vn-btn[b-rqq2h415v0] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px;
    padding: 12px 20px;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -.08px;
    cursor: pointer;
}

.vn-btn--primary[b-rqq2h415v0] {
    background: var(--vp-brand-primary);
    color: #fff;
}

.vn-btn--primary:disabled[b-rqq2h415v0] {
    opacity: .6;
    cursor: default;
}

.vn-back:focus-visible[b-rqq2h415v0],
.vn-btn:focus-visible[b-rqq2h415v0] {
    outline: 2px solid var(--vp-brand-secondary);
    outline-offset: 2px;
}
/* _content/VisitPlus.Shared/Pages/VerifyPhone.razor.rz.scp.css */
/* ============================================================
   Layer 2 Step 2 — Verify phone SMS OTP (doc S14). Mirrors ConfirmAccount.
   ============================================================ */
.vp-screen[b-ue6sf6qa4v] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: max(125px, calc(95px + env(safe-area-inset-top, 0px))) 20px calc(32px + env(safe-area-inset-bottom, 0px));
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 600px while the background reaches the
       real viewport edges. Below 600px this resolves to the 20px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 600px) / 2));
    background-color: #f4f6f8;
    overflow-x: hidden;
}

.vp-corner[b-ue6sf6qa4v] {
    position: absolute;
    top: -79px;
    right: -129px;
    width: 350px;
    height: 350px;
    background: url('images/signin-corner-sparkle.png') no-repeat center / contain;
    pointer-events: none;
    z-index: 0;
}

.vp-content[b-ue6sf6qa4v] {
    z-index: 1;
    display: flex;
    flex-direction: column;
}

.vp-title[b-ue6sf6qa4v] {
    margin: 24px 0 24px;
    font-size: 26px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -1.04px;
    color: #297381;
}

[b-ue6sf6qa4v] .vp-notify-gap {
    margin-bottom: 20px;
}

.vp-instruction[b-ue6sf6qa4v] {
    margin: 0 0 24px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.6px;
    color: #676767;
}

.vp-code[b-ue6sf6qa4v] {
    margin-bottom: 12px;
}

.vp-resend[b-ue6sf6qa4v] {
    text-align: right;
    margin: 0 0 40px;
}

[b-ue6sf6qa4v] .vp-resend-link {
    color: #2a2a2a !important;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.2px;
    text-decoration: underline;
    cursor: pointer;
}

[b-ue6sf6qa4v] .vp-submit {
    height: 52px;
    border-radius: 14px;
    text-transform: none;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
    /* Fixed VisitPlus colours, not --vp-brand-*: this step runs before the health network is
       picked, so there is no network in play. See --vp-visitplus-primary in app.css. */
    background-color: var(--vp-visitplus-primary) !important;
    color: #ffffff !important;
}

[b-ue6sf6qa4v] .vp-submit:hover {
    background-color: #1b2c3f !important;
}

[b-ue6sf6qa4v] .vp-submit:disabled,
[b-ue6sf6qa4v] .vp-submit.mud-button-disabled {
    background-color: var(--vp-visitplus-primary) !important;
    color: #ffffff !important;
    opacity: 0.6;
}
/* _content/VisitPlus.Shared/Pages/Welcome.razor.rz.scp.css */
/* ============================================================
   Welcome screen — full-bleed hero (Figma: 351:1851)
   Colours: primary var(--vp-visitplus-primary) (fixed — pre-auth, no network chosen yet),
   gray/300 border #b6bac3
   ============================================================ */
.welcome-screen[b-0yeqaaqvrh] {
    position: relative;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    /* Full-bleed on every size — the photo reaches the viewport edges on desktop too.
       Only the content column is capped (see padding-inline below). */
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    /* Figma: 35px horizontal padding on the landing/chooser screens (forms use 20px). */
    padding: 0 20px;
    /* Full-bleed shell, capped content: the gutter grows to absorb the extra
       width, so the column stays 480px while the background reaches the
       real viewport edges. Below 480px this resolves to the 20px gutter,
       i.e. mobile renders exactly as before. */
    padding-inline: max(20px, calc((100% - 480px) / 2));
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
    color: #ffffff;
    /* Photo + 12% brand overlay + bottom gradient scrim (transparent -> the brand primary) */
    background-color: var(--vp-visitplus-primary);
    background-image:
        linear-gradient(180deg,
            rgba(34, 54, 76, 0) 0%,
            rgba(34, 54, 76, 0.10) 23%,
            rgba(34, 54, 76, 0.32) 43%,
            rgba(34, 54, 76, 0.726) 68%,
            rgb(34, 54, 76) 100%),
        linear-gradient(rgba(34, 54, 76, 0.12), rgba(34, 54, 76, 0.12)),
        url('images/nexa-welcome-bg.jpg');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center bottom, center, center bottom;
    background-size: 100% 70%, cover, cover;
}

/* ---- Brand: logo + tagline ---- */
.welcome-brand[b-0yeqaaqvrh] {
    margin-top: 36vh;
    text-align: center;
}

[b-0yeqaaqvrh] .welcome-logo {
    display: block;
    width: 287px;
    max-width: 72%;
    height: auto;
    margin: 0 auto;
    /* Brand wordmark is navy/teal; render it solid white over the photo */
    filter: brightness(0) invert(1);
}

.welcome-tagline[b-0yeqaaqvrh] {
    margin: 4px auto 0;
    max-width: 270px;
    font-family: 'Poppins', 'Segoe UI', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.5;
    color: #ffffff;
}

/* ---- Actions ---- */
.welcome-actions[b-0yeqaaqvrh] {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.welcome-action-group[b-0yeqaaqvrh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.welcome-hint[b-0yeqaaqvrh] {
    margin: 0;
    width: 100%;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.2px;
    color: #ffffff;
}

/* ---- Buttons (override MudBlazor defaults) ---- */
[b-0yeqaaqvrh] .welcome-btn {
    height: 52px;
    border-radius: 14px !important;
    text-transform: none !important;
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.08px;
}

[b-0yeqaaqvrh] .welcome-btn-filled {
    background-color: var(--vp-visitplus-primary) !important;
    color: #ffffff !important;
}

[b-0yeqaaqvrh] .welcome-btn-filled:hover {
    background-color: #1d2a3a !important;
}

[b-0yeqaaqvrh] .welcome-btn-outlined {
    background-color: #ffffff !important;
    color: var(--vp-visitplus-primary) !important;
    border: 1px solid #b6bac3 !important;
}

[b-0yeqaaqvrh] .welcome-btn-outlined:hover {
    background-color: #f5f6f8 !important;
}

/* ---- Learn-more link ---- */
[b-0yeqaaqvrh] .welcome-learn-more {
    width: 100%;
    text-align: center;
    font-family: 'Segoe UI', sans-serif;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: #ffffff !important;
    text-decoration: underline;
}

/* ---- Footer ---- */
.welcome-footer[b-0yeqaaqvrh] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 24px;
    opacity: 0.6;
    font-family: 'Segoe UI', sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.15px;
    color: #ffffff;
}

.welcome-footer-divider[b-0yeqaaqvrh] {
    width: 1px;
    height: 13px;
    background-color: #ffffff;
}

/* ---- Desktop hero photo ----------------------------------------------
   The mobile photo is a 900x1466 portrait crop; on a landscape viewport
   `cover` throws most of it away. Swap in the wider 2000x2192 crop above
   the phone breakpoint. The whole background-image stack has to be
   restated because it is one property — only the last layer changes. */
@media (min-width: 768px) {
    .welcome-screen[b-0yeqaaqvrh] {
        background-image:
            linear-gradient(180deg,
                rgba(34, 54, 76, 0) 0%,
                rgba(34, 54, 76, 0.10) 23%,
                rgba(34, 54, 76, 0.32) 43%,
                rgba(34, 54, 76, 0.726) 68%,
                rgb(34, 54, 76) 100%),
            linear-gradient(rgba(34, 54, 76, 0.12), rgba(34, 54, 76, 0.12)),
            url('images/nexa-welcome-bg-wide.jpg');
        /* The photo layer is anchored `center bottom` for the phone crop, where the portrait image
           fits vertically anyway. On a wide, short viewport `cover` scales by width and bottom
           anchoring throws away the top — you get the floor and everyone's shoes. Pin it near the
           top of the frame so the people stay in shot, but far enough down that the seated
           couple's faces sit around the middle of the viewport instead of behind the buttons.
           Only the photo layer moves; the gradient scrim still sits on the bottom edge. */
        background-position: center bottom, center, center 35%;
    }
}