/* ===== Web fonts (hoisted; @import must precede all other rules) ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@0;1&family=Inter:wght@300;400;500;600;700&display=swap');

/* ===== wwwroot/app.css (base styles) ===== */
html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Blazor's reconnect UI is intentionally invisible; wwwroot/js/reconnection.js
   auto-reloads the page once reconnection definitively fails or is rejected,
   instead of showing a manual "click to retry" modal. */
#components-reconnect-modal {
    display: none !important;
}

/* ===== Components/Admin/Spas.razor ===== */
    /* ═══════════════════════════════════════════════════════════

                           Admin page — MedSpa Theme

                           Same palette as MainLayout.razor / the Presentation Viewer:

                             --mv-bg      #f7f1ea   page background (soft cream)

                             --mv-card    #ffffff   card surfaces

                             --mv-border  #ece0d1   hairline borders / dividers

                             --mv-ink     #2e2822   primary text (warm near-black)

                             --mv-muted   #948a7c   secondary text

                             --mv-accent  #a9805a   warm gold/brown accent

                             --mv-accent-2#8a6a49   deeper accent (hover/active)

                           ═══════════════════════════════════════════════════════ */



.pres-admin {

        font-family: 'Inter', system-ui, sans-serif;

        color: #2e2822;

    }



        .pres-admin h1 {

            font-family: 'Inter', system-ui, sans-serif;

            font-weight: 500;

            font-size: 1.9rem;

            color: #2e2822;

            margin-bottom: 1.5rem;

        }



    /* ── Card wrapper around each section ───────────────────────── */

    .pres-card {

        background: #ffffff;

        border: 1px solid #ece0d1;

        border-radius: 14px;

        box-shadow: 0 6px 18px rgba(60,45,25,.06);

        padding: 1.5rem;

        margin-bottom: 1.5rem;

    }

        .pres-admin .btn-success:hover,

        .pres-admin .btn-success:focus {

            background-color: darkgreen;

            border-color: green;

        }


    /* ── Grid / table ────────────────────────────────────────────── */

    .pres-admin .table {

        background: #ffffff;

        color: #2e2822;

    }



    .pres-admin .table-bordered,

    .pres-admin .table-bordered th,

    .pres-admin .table-bordered td {

        border-color: #ece0d1;

    }



    .pres-admin .table thead th {

        background: #f7f1ea;

        color: #948a7c;

        text-transform: uppercase;

        font-size: 0.78rem;

        letter-spacing: 0.04em;

        font-weight: 600;

        border-color: #ece0d1;

    }



    .pres-admin .table-striped > tbody > tr:nth-of-type(odd) > * {

        background-color: #faf6f0;

    }



    .pres-admin .table-hover > tbody > tr:hover > * {

        background-color: #f3ebdf;

    }



/*    .pres-admin .page-link {

        color: #a9805a;

        border-color: #ece0d1;

    }*/



/*        .pres-admin .page-link:hover {

            color: #8a6a49;

            background-color: #f3ebdf;

        }



    .pres-admin .page-item.active .page-link {

        background-color: #a9805a;

        border-color: #a9805a;

        color: #fbf7f1;

    }*/



    .pres-admin a {

        color: #a9805a;

        text-decoration: none;

        font-weight: 500;

    }



        .pres-admin a:hover {

            color: #8a6a49;

            text-decoration: underline;

        }



    /* ── Thumbnails ──────────────────────────────────────────────── */

    .img-thumbnail_l {

        padding: .25rem;

        background-color: #ffffff;

        border: 1px solid #ece0d1;

        border-radius: 10px;

        max-width: 100%;

        height: 100px;

    }



    .thumbnail_l {

        background-color: #efe6d8;

        display: flex;

        justify-content: center;

        border: 0;

        border-radius: 10px;

        overflow: hidden;

        width: 150px;

    }



    /* ── Modal form ──────────────────────────────────────────────── */

    .pres-admin .modal-content {

        background: #ffffff;

        color: #2e2822;

        border-radius: 14px;

        border: 1px solid #ece0d1;

    }



    .pres-admin .modal-header {

        border-bottom: 1px solid #ece0d1;

    }



    .pres-admin .modal-footer {

        border-top: 1px solid #ece0d1;

    }



    .pres-admin .form-label {

        font-weight: 500;

        color: #948a7c;

        font-size: 0.85rem;

        text-transform: uppercase;

        letter-spacing: 0.03em;

    }

    /* ═══════════════════════════════════════════════════════════

                               Company Information — MedSpa Theme

                               Palette shared with MainLayout / Presentation Viewer:

                                 --mv-bg      #f7f1ea   page background (soft cream)

                                 --mv-card    #ffffff   card surfaces

                                 --mv-border  #ece0d1   hairline borders / dividers

                                 --mv-ink     #2e2822   primary text (warm near-black)

                                 --mv-muted   #948a7c   secondary text

                                 --mv-accent  #a9805a   warm gold/brown accent

                                 --mv-accent-2#8a6a49   deeper accent (hover/active)

                               ═══════════════════════════════════════════════════════ */



.ci-wrap {

        max-width: 720px;

        margin: 0 auto;

        padding: 2rem 1rem 4rem;

        font-family: 'Inter', system-ui, sans-serif;

        color: #2e2822;

    }



    .ci-header {

        margin-bottom: 1.75rem;

    }



        .ci-header h1 {

            font-family: 'Inter', system-ui, sans-serif;

            font-weight: 500;

            font-size: 2rem;

            color: #2e2822;

            margin-bottom: .25rem;

        }



        .ci-header p {

            color: #948a7c;

            font-size: .95rem;

            margin: 0;

        }



    .ci-card {

        background: #ffffff;

        border: 1px solid #ece0d1;

        border-radius: 14px;

        padding: 2rem;

        box-shadow: 0 4px 24px rgba(60, 45, 25, .06);

    }



    .ci-section-title {

        font-family: 'Inter', system-ui, sans-serif;

        font-size: 1.05rem;

        font-weight: 500;

        color: #a9805a;

        margin: 0 0 1rem;

        padding-bottom: .5rem;

        border-bottom: 1px solid #ece0d1;

    }



    .ci-section + .ci-section {

        margin-top: 1.75rem;

    }



    .ci-field {

        margin-bottom: 1.1rem;

    }



        .ci-field label {

            display: block;

            font-size: .85rem;

            font-weight: 600;

            color: #2e2822;

            margin-bottom: .35rem;

        }



        .ci-field .hint {

            font-size: .78rem;

            color: #948a7c;

            margin-top: .3rem;

        }



    .ci-input {

        width: 100%;

        padding: .6rem .75rem;

        border: 1px solid #ece0d1;

        border-radius: 8px;

        background: #fbf7f1;

        color: #2e2822;

        font-family: 'Inter', system-ui, sans-serif;

        font-size: .95rem;

        transition: border-color .15s ease, box-shadow .15s ease;

    }



        .ci-input:focus {

            outline: none;

            border-color: #a9805a;

            box-shadow: 0 0 0 3px rgba(169,128,90,.15);

            background: #ffffff;

        }



    textarea.ci-input {

        min-height: 90px;

        resize: vertical;

    }



    .ci-row {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 1rem;

    }



    @media (max-width: 620px) {

        .ci-row {

            grid-template-columns: 1fr;

        }

    }



    /* Appointment method choice — styled as segmented toggle cards */

    .ci-choice-group {

        display: flex;

        gap: .75rem;

        margin-bottom: 1.1rem;

    }



    .ci-choice-option {

        flex: 1;

        position: relative;

        border: 1px solid #ece0d1;

        border-radius: 10px;

        padding: .85rem 1rem;

        cursor: pointer;

        background: #fbf7f1;

        transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;

    }



        .ci-choice-option:hover {

            border-color: #cbb190;

        }



        .ci-choice-option input[type="radio"] {

            position: absolute;

            opacity: 0;

            inset: 0;

            margin: 0;

            cursor: pointer;

        }



        .ci-choice-option.is-selected {

            border-color: #a9805a;

            background: rgba(169,128,90,.08);

            box-shadow: 0 0 0 3px rgba(169,128,90,.12);

        }



        .ci-choice-option .opt-title {

            display: flex;

            align-items: center;

            gap: .5rem;

            font-weight: 600;

            font-size: .9rem;

            color: #2e2822;

        }



        .ci-choice-option .opt-sub {

            font-size: .78rem;

            color: #948a7c;

            margin-top: .15rem;

        }



    .ci-actions {

        display: flex;

        justify-content: flex-end;

        gap: .75rem;

        margin-top: 2rem;

    }



    .ci-btn {

        font-family: 'Inter', system-ui, sans-serif;

        font-size: .9rem;

        font-weight: 600;

        padding: .65rem 1.4rem;

        border-radius: 8px;

        border: 1px solid transparent;

        cursor: pointer;

        transition: background .15s ease, border-color .15s ease, color .15s ease;

    }



    .ci-btn-primary {

        background: #a9805a;

        color: #fbf7f1;

    }



        .ci-btn-primary:hover {

            background: #8a6a49;

        }



    .ci-btn-secondary {

        background: transparent;

        color: #948a7c;

        border-color: #ece0d1;

    }



        .ci-btn-secondary:hover {

            color: #2e2822;

            border-color: #cbb190;

        }



    .ci-success {

        margin-top: 1.25rem;

        padding: .75rem 1rem;

        border-radius: 8px;

        background: rgba(169,128,90,.10);

        border: 1px solid #ece0d1;

        color: #7a5a37;

        font-size: .88rem;

    }



    .ci-invalid {

        border-color: #d98a5f !important;

    }



    .validation-message {

        color: #b04b28;

        font-size: .78rem;

        margin-top: .3rem;

        display: block;

    }

/* ===== Components/Pages/AccessDenied.razor ===== */
    /* ═══════════════════════════════════════════════════════════
                       Access Denied — MedSpa Theme
                       Same palette as MainLayout.razor / FAQ.razor:
                         --mv-bg      #f7f1ea   page background (soft cream)
                         --mv-card    #ffffff   card surfaces
                         --mv-border  #ece0d1   hairline borders / dividers
                         --mv-ink     #2e2822   primary text (warm near-black)
                         --mv-muted   #948a7c   secondary text
                         --mv-accent  #a9805a   warm gold/brown accent
                         --mv-accent-2#8a6a49   deeper accent (hover/active)
                       ═══════════════════════════════════════════════════════ */

.denied-wrap {
        max-width: 560px;
        margin: 4rem auto;
        padding: 2.5rem 2rem;
        font-family: 'Inter', system-ui, sans-serif;
        color: #2e2822;
        background: #ffffff;
        border: 1px solid #ece0d1;
        border-radius: 14px;
        box-shadow: 0 4px 24px rgba(60,45,25,.06);
        text-align: center;
    }

    .denied-icon {
        color: #a9805a;
        margin-bottom: 1.25rem;
    }

    .denied-wrap h1 {
        font-family: 'Playfair Display', serif;
        font-weight: 500;
        font-size: 1.9rem;
        color: #2e2822;
        margin-bottom: .5rem;
    }

    .denied-wrap p {
        color: #948a7c;
        font-size: .95rem;
        line-height: 1.6;
        margin-bottom: 1.75rem;
    }

    .denied-btn {
        display: inline-block;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: .9rem;
        font-weight: 600;
        padding: .65rem 1.4rem;
        border-radius: 8px;
        border: 1px solid transparent;
        cursor: pointer;
        background: #a9805a;
        color: #fbf7f1;
        text-decoration: none;
        transition: background .15s ease;
        margin: 0 .35rem;
    }

        .denied-btn:hover {
            background: #8a6a49;
            color: #fbf7f1;
            text-decoration: none;
        }

    .denied-btn-outline {
        display: inline-block;
        font-family: 'Inter', system-ui, sans-serif;
        font-size: .9rem;
        font-weight: 600;
        padding: .65rem 1.4rem;
        border-radius: 8px;
        border: 1px solid #ece0d1;
        cursor: pointer;
        background: transparent;
        color: #2e2822;
        text-decoration: none;
        transition: border-color .15s ease;
        margin: 0 .35rem;
    }

        .denied-btn-outline:hover {
            border-color: #cbb190;
            color: #2e2822;
            text-decoration: none;
        }

/* ===== Components/Pages/FAQ.razor ===== */
    /* ═══════════════════════════════════════════════════════════

                           FAQ Page — MedSpa Theme

                           Same palette as MainLayout.razor / Index.razor:

                             --mv-bg      #f7f1ea   page background (soft cream)

                             --mv-card    #ffffff   card surfaces

                             --mv-border  #ece0d1   hairline borders / dividers

                             --mv-ink     #2e2822   primary text (warm near-black)

                             --mv-muted   #948a7c   secondary text

                             --mv-accent  #a9805a   warm gold/brown accent

                             --mv-accent-2#8a6a49   deeper accent (hover/active)

                           ═══════════════════════════════════════════════════════ */



.faq-wrap {

        max-width: 780px;

        margin: 0 auto;

        padding: 2rem 1rem 4rem;

        font-family: 'Inter', system-ui, sans-serif;

        color: #2e2822;

    }



    .faq-header {

        margin-bottom: 1.75rem;

        text-align: center;

    }



        .faq-header h1 {

            font-family: 'Playfair Display', serif;

            font-weight: 500;

            font-size: 2.1rem;

            color: #2e2822;

            margin-bottom: .35rem;

        }



        .faq-header p {

            color: #948a7c;

            font-size: .95rem;

            margin: 0;

        }



    /* ── Search box ──────────────────────────────────────────────── */

    .faq-search-wrap {

        margin: 1.75rem 0;

        position: relative;

    }



    .faq-search {

        width: 100%;

        padding: .75rem 1rem .75rem 2.6rem;

        border: 1px solid #ece0d1;

        border-radius: 10px;

        background: #ffffff;

        color: #2e2822;

        font-family: 'Inter', system-ui, sans-serif;

        font-size: .95rem;

        transition: border-color .15s ease, box-shadow .15s ease;

    }



        .faq-search:focus {

            outline: none;

            border-color: #a9805a;

            box-shadow: 0 0 0 3px rgba(169,128,90,.15);

        }



    .faq-search-icon {

        position: absolute;

        left: .95rem;

        top: 50%;

        transform: translateY(-50%);

        color: #948a7c;

        pointer-events: none;

    }



    /* ── Category chips ─────────────────────────────────────────── */

    .faq-categories {

        display: flex;

        flex-wrap: wrap;

        gap: .6rem;

        margin-bottom: 1.75rem;

        justify-content: center;

    }



    .faq-chip {

        border: 1px solid #ece0d1;

        background: #ffffff;

        color: #948a7c;

        font-size: .82rem;

        font-weight: 600;

        padding: .4rem 1rem;

        border-radius: 999px;

        cursor: pointer;

        transition: all .15s ease;

    }



        .faq-chip:hover {

            border-color: #cbb190;

            color: #2e2822;

        }



        .faq-chip.is-active {

            background: #a9805a;

            border-color: #a9805a;

            color: #fbf7f1;

        }



    /* ── Section title ───────────────────────────────────────────── */

    .faq-section-title {

        font-family: 'Playfair Display', serif;

        font-size: 1.05rem;

        font-weight: 500;

        color: #a9805a;

        margin: 2rem 0 1rem;

        padding-bottom: .5rem;

        border-bottom: 1px solid #ece0d1;

    }



        .faq-section-title:first-of-type {

            margin-top: 0;

        }



    /* ── Accordion ───────────────────────────────────────────────── */

    .faq-list {

        display: flex;

        flex-direction: column;

        gap: .75rem;

    }



    .faq-item {

        background: #ffffff;

        border: 1px solid #ece0d1;

        border-radius: 14px;

        box-shadow: 0 4px 18px rgba(60,45,25,.05);

        overflow: hidden;

        transition: border-color .15s ease;

    }



        .faq-item.is-open {

            border-color: #cbb190;

        }



    .faq-question {

        display: flex;

        align-items: center;

        justify-content: space-between;

        gap: 1rem;

        width: 100%;

        text-align: left;

        background: transparent;

        border: none;

        padding: 1.1rem 1.4rem;

        cursor: pointer;

        font-family: 'Inter', system-ui, sans-serif;

        font-size: .98rem;

        font-weight: 600;

        color: #2e2822;

    }



        .faq-question:hover {

            background: #faf6f0;

        }



    .faq-chevron {

        flex-shrink: 0;

        width: 20px;

        height: 20px;

        color: #a9805a;

        transition: transform .2s ease;

    }



    .faq-item.is-open .faq-chevron {

        transform: rotate(180deg);

    }



    .faq-answer-outer {

        max-height: 0;

        overflow: hidden;

        transition: max-height .25s ease;

    }



    .faq-item.is-open .faq-answer-outer {

        max-height: 800px;

    }



    .faq-answer {

        padding: 0 1.4rem 1.25rem;

        color: #5c5347;

        font-size: .92rem;

        line-height: 1.6;

        border-top: 1px solid #ece0d1;

        padding-top: .9rem;

    }



    /* ── Empty state ─────────────────────────────────────────────── */

    .faq-empty {

        text-align: center;

        padding: 3rem 1rem;

        color: #948a7c;

    }



        .faq-empty svg {

            color: #ece0d1;

            margin-bottom: 1rem;

        }



    /* ── Contact footer card ─────────────────────────────────────── */

    .faq-contact {

        margin-top: 2.5rem;

        background: #ffffff;

        border: 1px solid #ece0d1;

        border-radius: 14px;

        padding: 1.75rem;

        text-align: center;

        box-shadow: 0 4px 24px rgba(60,45,25,.06);

    }



        .faq-contact h2 {

            font-family: 'Playfair Display', serif;

            font-weight: 500;

            font-size: 1.15rem;

            color: #2e2822;

            margin-bottom: .35rem;

        }



        .faq-contact p {

            color: #948a7c;

            font-size: .88rem;

            margin-bottom: 1.1rem;

        }



    .faq-btn {

        display: inline-block;

        font-family: 'Inter', system-ui, sans-serif;

        font-size: .9rem;

        font-weight: 600;

        padding: .65rem 1.4rem;

        border-radius: 8px;

        border: 1px solid transparent;

        cursor: pointer;

        background: #a9805a;

        color: #fbf7f1;

        text-decoration: none;

        transition: background .15s ease;

    }



        .faq-btn:hover {

            background: #8a6a49;

            color: #fbf7f1;

            text-decoration: none;

        }

/* ===== Components/Pages/Home.razor ===== */
    .valid.modified:not([type=checkbox]) {

        outline: 1px solid #26b050;

    }



    .invalid {

        outline: 1px solid red;

    }



    .validation-message {

        color: red;

    }

/* ===== Components/Pages/Privacy.razor ===== */
    /* ═══════════════════════════════════════════════════════════
                           Privacy Policy — MedSpa Theme
                           Same palette as MainLayout.razor / Terms.razor:
                             --mv-bg      #f7f1ea   page background (soft cream)
                             --mv-card    #ffffff   card surfaces
                             --mv-border  #ece0d1   hairline borders / dividers
                             --mv-ink     #2e2822   primary text (warm near-black)
                             --mv-muted   #948a7c   secondary text
                             --mv-accent  #a9805a   warm gold/brown accent
                             --mv-accent-2#8a6a49   deeper accent (hover/active)
                           ═══════════════════════════════════════════════════════ */

.privacy-wrap {
        max-width: 820px;
        margin: 0 auto;
        padding: 2rem 1rem 4rem;
        font-family: 'Inter', system-ui, sans-serif;
        color: #2e2822;
    }

    .privacy-header {
        margin-bottom: 1.5rem;
        text-align: center;
    }

        .privacy-header h1 {
            font-family: 'Playfair Display', serif;
            font-weight: 500;
            font-size: 2.1rem;
            color: #2e2822;
            margin-bottom: .35rem;
        }

        .privacy-header p {
            color: #948a7c;
            font-size: .9rem;
            margin: 0;
        }

    .privacy-card {
        background: #ffffff;
        border: 1px solid #ece0d1;
        border-radius: 14px;
        box-shadow: 0 4px 24px rgba(60,45,25,.06);
        padding: 2rem 2.25rem;
    }

    .privacy-card section {
        margin-bottom: 1.75rem;
    }

        .privacy-card section:last-child {
            margin-bottom: 0;
        }

    .privacy-card h2 {
        font-family: 'Playfair Display', serif;
        font-size: 1.05rem;
        font-weight: 500;
        color: #a9805a;
        margin: 0 0 .6rem;
        padding-bottom: .5rem;
        border-bottom: 1px solid #ece0d1;
    }

    .privacy-card h3 {
        font-family: 'Inter', system-ui, sans-serif;
        font-size: .93rem;
        font-weight: 600;
        color: #2e2822;
        margin: 1rem 0 .35rem;
    }

    .privacy-card p, .privacy-card li {
        color: #5c5347;
        font-size: .93rem;
        line-height: 1.65;
    }

    .privacy-card ul {
        margin: .5rem 0 0;
        padding-left: 1.25rem;
    }

        .privacy-card ul li + li {
            margin-top: .35rem;
        }

    .privacy-card a {
        color: #a9805a;
        text-decoration: none;
    }

        .privacy-card a:hover {
            color: #8a6a49;
            text-decoration: underline;
        }

    .privacy-callout {
        background: #faf6f0;
        border: 1px solid #ece0d1;
        border-radius: 10px;
        padding: 1rem 1.15rem;
        margin-top: .75rem;
    }

        .privacy-callout p {
            margin: 0;
        }

        .privacy-callout p + p {
            margin-top: .5rem;
        }

    .privacy-meta {
        color: #948a7c;
        font-size: .85rem;
        margin-top: -.5rem;
        margin-bottom: 1.75rem;
        text-align: center;
    }

/* ===== Components/Pages/Terms.razor ===== */
    /* ═══════════════════════════════════════════════════════════
                           Terms & Conditions — MedSpa Theme
                           Same palette as MainLayout.razor / FAQ.razor:
                             --mv-bg      #f7f1ea   page background (soft cream)
                             --mv-card    #ffffff   card surfaces
                             --mv-border  #ece0d1   hairline borders / dividers
                             --mv-ink     #2e2822   primary text (warm near-black)
                             --mv-muted   #948a7c   secondary text
                             --mv-accent  #a9805a   warm gold/brown accent
                             --mv-accent-2#8a6a49   deeper accent (hover/active)
                           ═══════════════════════════════════════════════════════ */

.terms-wrap {
        max-width: 820px;
        margin: 0 auto;
        padding: 2rem 1rem 4rem;
        font-family: 'Inter', system-ui, sans-serif;
        color: #2e2822;
    }

    .terms-header {
        margin-bottom: 1.5rem;
        text-align: center;
    }

        .terms-header h1 {
            font-family: 'Playfair Display', serif;
            font-weight: 500;
            font-size: 2.1rem;
            color: #2e2822;
            margin-bottom: .35rem;
        }

        .terms-header p {
            color: #948a7c;
            font-size: .9rem;
            margin: 0;
        }

    .terms-card {
        background: #ffffff;
        border: 1px solid #ece0d1;
        border-radius: 14px;
        box-shadow: 0 4px 24px rgba(60,45,25,.06);
        padding: 2rem 2.25rem;
    }

    .terms-card section {
        margin-bottom: 1.75rem;
    }

        .terms-card section:last-child {
            margin-bottom: 0;
        }

    .terms-card h2 {
        font-family: 'Playfair Display', serif;
        font-size: 1.05rem;
        font-weight: 500;
        color: #a9805a;
        margin: 0 0 .6rem;
        padding-bottom: .5rem;
        border-bottom: 1px solid #ece0d1;
    }

    .terms-card p, .terms-card li {
        color: #5c5347;
        font-size: .93rem;
        line-height: 1.65;
    }

    .terms-card ul {
        margin: .5rem 0 0;
        padding-left: 1.25rem;
    }

        .terms-card ul li + li {
            margin-top: .35rem;
        }

    .terms-card a {
        color: #a9805a;
        text-decoration: none;
    }

        .terms-card a:hover {
            color: #8a6a49;
            text-decoration: underline;
        }

    .terms-meta {
        color: #948a7c;
        font-size: .85rem;
        margin-top: -.5rem;
        margin-bottom: 1.75rem;
        text-align: center;
    }

/* ===== Components/Presentations/Index.razor ===== */
    /* ═══════════════════════════════════════════════════════════

                   Admin page — MedSpa Theme

                   Same palette as MainLayout.razor / the Presentation Viewer:

                     --mv-bg      #f7f1ea   page background (soft cream)

                     --mv-card    #ffffff   card surfaces

                     --mv-border  #ece0d1   hairline borders / dividers

                     --mv-ink     #2e2822   primary text (warm near-black)

                     --mv-muted   #948a7c   secondary text

                     --mv-accent  #a9805a   warm gold/brown accent

                     --mv-accent-2#8a6a49   deeper accent (hover/active)

                   ═══════════════════════════════════════════════════════ */



.pres-admin {

        font-family: 'Inter', system-ui, sans-serif;

        color: #2e2822;

    }



        .pres-admin h1 {

            font-family: 'Playfair Display', serif;

            font-weight: 500;

            font-size: 1.9rem;

            color: #2e2822;

            margin-bottom: 1.5rem;

        }



    /* ── Card wrapper around each section ───────────────────────── */

    .pres-card {

        background: #ffffff;

        border: 1px solid #ece0d1;

        border-radius: 14px;

        box-shadow: 0 6px 18px rgba(60,45,25,.06);

        padding: 1.5rem;

        margin-bottom: 1.5rem;

    }

    /* ── Grid / table ────────────────────────────────────────────── */

    .pres-admin .table {

        background: #ffffff;

        color: #2e2822;

    }



    .pres-admin .table-bordered,

    .pres-admin .table-bordered th,

    .pres-admin .table-bordered td {

        border-color: #ece0d1;

    }



    .pres-admin .table thead th {

        background: #f7f1ea;

        color: #948a7c;

        text-transform: uppercase;

        font-size: 0.78rem;

        letter-spacing: 0.04em;

        font-weight: 600;

        border-color: #ece0d1;

    }



    .pres-admin .table-striped > tbody > tr:nth-of-type(odd) > * {

        background-color: #faf6f0;

    }



    .pres-admin .table-hover > tbody > tr:hover > * {

        background-color: #f3ebdf;

    }



/*    .pres-admin .page-link {

        color: #a9805a;

        border-color: #ece0d1;

    }



        .pres-admin .page-link:hover {

            color: #8a6a49;

            background-color: #f3ebdf;

        }



    .pres-admin .page-item.active .page-link {

        background-color: #a9805a;

        border-color: #a9805a;

        color: #fbf7f1;

    }*/



    .pres-admin a {

        color: #a9805a;

        text-decoration: none;

        font-weight: 500;

    }



        .pres-admin a:hover {

            color: #8a6a49;

            text-decoration: underline;

        }



    /* ── Thumbnails ──────────────────────────────────────────────── */

    .img-thumbnail_l {

        padding: .25rem;

        background-color: #ffffff;

        border: 1px solid #ece0d1;

        border-radius: 10px;

        max-width: 100%;

        height: 100px;

    }



    .thumbnail_l {

        background-color: #efe6d8;

        display: flex;

        justify-content: center;

        border: 0;

        border-radius: 10px;

        overflow: hidden;

        width: 150px;

    }

/* ===== Components/Spa/Edit.razor ===== */
    /* ═══════════════════════════════════════════════════════════

                           Admin page — MedSpa Theme

                           Same palette as MainLayout.razor / the Presentation Viewer:

                             --mv-bg      #f7f1ea   page background (soft cream)

                             --mv-card    #ffffff   card surfaces

                             --mv-border  #ece0d1   hairline borders / dividers

                             --mv-ink     #2e2822   primary text (warm near-black)

                             --mv-muted   #948a7c   secondary text

                             --mv-accent  #a9805a   warm gold/brown accent

                             --mv-accent-2#8a6a49   deeper accent (hover/active)

                           ═══════════════════════════════════════════════════════ */



.pres-admin {

        font-family: 'Inter', system-ui, sans-serif;

        color: #2e2822;

        width: 50%;

        margin: 0;

    }



        .pres-admin h1 {

            font-family: 'Inter', system-ui, sans-serif;

            font-weight: 500;

            font-size: 1.9rem;

            color: #2e2822;

            margin-bottom: 1.5rem;

        }



    /* ── Card wrapper around each section ───────────────────────── */

    .pres-card {

        background: #ffffff;

        border: 1px solid #ece0d1;

        border-radius: 14px;

        box-shadow: 0 6px 18px rgba(60,45,25,.06);

        padding: 1.5rem;

        margin-bottom: 1.5rem;

    }

    /* ── Grid / table ────────────────────────────────────────────── */

    .pres-admin .table {

        background: #ffffff;

        color: #2e2822;

    }



    .pres-admin .table-bordered,

    .pres-admin .table-bordered th,

    .pres-admin .table-bordered td {

        border-color: #ece0d1;

    }



    .pres-admin .table thead th {

        background: #f7f1ea;

        color: #948a7c;

        text-transform: uppercase;

        font-size: 0.78rem;

        letter-spacing: 0.04em;

        font-weight: 600;

        border-color: #ece0d1;

    }



    .pres-admin .table-striped > tbody > tr:nth-of-type(odd) > * {

        background-color: #faf6f0;

    }



    .pres-admin .table-hover > tbody > tr:hover > * {

        background-color: #f3ebdf;

    }



/*    .pres-admin .page-link {

        color: #a9805a;

        border-color: #ece0d1;

    }



        .pres-admin .page-link:hover {

            color: #8a6a49;

            background-color: #f3ebdf;

        }



    .pres-admin .page-item.active .page-link {

        background-color: #a9805a;

        border-color: #a9805a;

        color: #fbf7f1;

    }*/



    .pres-admin a {

        color: #a9805a;

        text-decoration: none;

        font-weight: 500;

    }



        .pres-admin a:hover {

            color: #8a6a49;

            text-decoration: underline;

        }



    /* ── Thumbnails ──────────────────────────────────────────────── */

    .img-thumbnail_l {

        padding: .25rem;

        background-color: #ffffff;

        border: 1px solid #ece0d1;

        border-radius: 10px;

        max-width: 100%;

        height: 100px;

    }



    .thumbnail_l {

        background-color: #efe6d8;

        display: flex;

        justify-content: center;

        border: 0;

        border-radius: 10px;

        overflow: hidden;

        width: 150px;

    }



    /* ── Modal form ──────────────────────────────────────────────── */

    .pres-admin .modal-content {

        background: #ffffff;

        color: #2e2822;

        border-radius: 14px;

        border: 1px solid #ece0d1;

    }



    .pres-admin .modal-header {

        border-bottom: 1px solid #ece0d1;

    }



    .pres-admin .modal-footer {

        border-top: 1px solid #ece0d1;

    }



    .pres-admin .form-label {

        font-weight: 500;

        color: #948a7c;

        font-size: 0.85rem;

        text-transform: uppercase;

        letter-spacing: 0.03em;

    }

    /* ═══════════════════════════════════════════════════════════

                               Company Information — MedSpa Theme

                               Palette shared with MainLayout / Presentation Viewer:

                                 --mv-bg      #f7f1ea   page background (soft cream)

                                 --mv-card    #ffffff   card surfaces

                                 --mv-border  #ece0d1   hairline borders / dividers

                                 --mv-ink     #2e2822   primary text (warm near-black)

                                 --mv-muted   #948a7c   secondary text

                                 --mv-accent  #a9805a   warm gold/brown accent

                                 --mv-accent-2#8a6a49   deeper accent (hover/active)

                               ═══════════════════════════════════════════════════════ */



.ci-wrap {

        max-width: 720px;

        margin: 0 auto;

        padding: 2rem 1rem 4rem;

        font-family: 'Inter', system-ui, sans-serif;

        color: #2e2822;

    }



    .ci-header {

        margin-bottom: 1.75rem;

    }



        .ci-header h1 {

            font-family: 'Inter', system-ui, sans-serif;

            font-weight: 500;

            font-size: 2rem;

            color: #2e2822;

            margin-bottom: .25rem;

        }



        .ci-header p {

            color: #948a7c;

            font-size: .95rem;

            margin: 0;

        }



    .ci-card {

        background: #ffffff;

        border: 1px solid #ece0d1;

        border-radius: 14px;

        padding: 2rem;

        box-shadow: 0 4px 24px rgba(60, 45, 25, .06);

    }



    .ci-section-title {

        font-family: 'Inter', system-ui, sans-serif;

        font-size: 1.05rem;

        font-weight: 500;

        color: #a9805a;

        margin: 0 0 1rem;

        padding-bottom: .5rem;

        border-bottom: 1px solid #ece0d1;

    }



    .ci-section + .ci-section {

        margin-top: 1.75rem;

    }



    .ci-field {

        margin-bottom: 1.1rem;

    }



        .ci-field label {

            display: block;

            font-size: .85rem;

            font-weight: 600;

            color: #2e2822;

            margin-bottom: .35rem;

        }



        .ci-field .hint {

            font-size: .78rem;

            color: #948a7c;

            margin-top: .3rem;

        }



    .ci-input {

        width: 100%;

        padding: .6rem .75rem;

        border: 1px solid #ece0d1;

        border-radius: 8px;

        background: #fbf7f1;

        color: #2e2822;

        font-family: 'Inter', system-ui, sans-serif;

        font-size: .95rem;

        transition: border-color .15s ease, box-shadow .15s ease;

    }



        .ci-input:focus {

            outline: none;

            border-color: #a9805a;

            box-shadow: 0 0 0 3px rgba(169,128,90,.15);

            background: #ffffff;

        }



    textarea.ci-input {

        min-height: 90px;

        resize: vertical;

    }



    .ci-row {

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 1rem;

    }



    @media (max-width: 620px) {

        .ci-row {

            grid-template-columns: 1fr;

        }

    }



    /* Appointment method choice — styled as segmented toggle cards */

    .ci-choice-group {

        display: flex;

        gap: .75rem;

        margin-bottom: 1.1rem;

    }



    .ci-choice-option {

        flex: 1;

        position: relative;

        border: 1px solid #ece0d1;

        border-radius: 10px;

        padding: .85rem 1rem;

        cursor: pointer;

        background: #fbf7f1;

        transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;

    }



        .ci-choice-option:hover {

            border-color: #cbb190;

        }



        .ci-choice-option input[type="radio"] {

            position: absolute;

            opacity: 0;

            inset: 0;

            margin: 0;

            cursor: pointer;

        }



        .ci-choice-option.is-selected {

            border-color: #a9805a;

            background: rgba(169,128,90,.08);

            box-shadow: 0 0 0 3px rgba(169,128,90,.12);

        }



        .ci-choice-option .opt-title {

            display: flex;

            align-items: center;

            gap: .5rem;

            font-weight: 600;

            font-size: .9rem;

            color: #2e2822;

        }



        .ci-choice-option .opt-sub {

            font-size: .78rem;

            color: #948a7c;

            margin-top: .15rem;

        }



    .ci-actions {

        display: flex;

        justify-content: flex-end;

        gap: .75rem;

        margin-top: 2rem;

    }



    .ci-btn {

        font-family: 'Inter', system-ui, sans-serif;

        font-size: .9rem;

        font-weight: 600;

        padding: .65rem 1.4rem;

        border-radius: 8px;

        border: 1px solid transparent;

        cursor: pointer;

        transition: background .15s ease, border-color .15s ease, color .15s ease;

    }



    .ci-btn-primary {

        background: #a9805a;

        color: #fbf7f1;

    }



        .ci-btn-primary:hover {

            background: #8a6a49;

        }



    .ci-btn-secondary {

        background: transparent;

        color: #948a7c;

        border-color: #ece0d1;

    }



        .ci-btn-secondary:hover {

            color: #2e2822;

            border-color: #cbb190;

        }



    .ci-success {

        margin-top: 1.25rem;

        padding: .75rem 1rem;

        border-radius: 8px;

        background: rgba(169,128,90,.10);

        border: 1px solid #ece0d1;

        color: #7a5a37;

        font-size: .88rem;

    }



    .ci-invalid {

        border-color: #d98a5f !important;

    }



    .validation-message {

        color: #b04b28;

        font-size: .78rem;

        margin-top: .3rem;

        display: block;

    }

/* ===== Components/Spa/Providers.razor ===== */
    /* ==========================================================================

           OurProviders.razor.css

           Uses the shared MedSpa design tokens (cream/gold palette, Playfair

           Display for headings, Inter for body copy). Adjust the var() fallbacks

           below if your global tokens use different names.

           ========================================================================== */



    .providers-page {

        padding: 3rem 1.5rem 4rem;

        max-width: 1200px;

        margin: 0 auto;

        font-family: var(--font-body, 'Inter', sans-serif);

        color: var(--color-text, #3a2f28);

    }



    /* ---------- Hero ---------- */



    .providers-hero {

        text-align: center;

        margin-bottom: 3rem;

    }



    .providers-hero__eyebrow {

        display: block;

        font-size: 0.85rem;

        letter-spacing: 0.12em;

        text-transform: uppercase;

        color: var(--color-gold, #b8925a);

        margin-bottom: 0.75rem;

    }



    .providers-hero__title {

        font-family: var(--font-heading, 'Playfair Display', serif);

        font-size: 2.5rem;

        font-weight: 600;

        color: var(--color-heading, #3a2f28);

        margin: 0;

    }



    /* ---------- Grid ---------- */



    .providers-grid {

        display: grid;

        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));

        gap: 2rem;

    }



    .provider-card {

        background: var(--color-surface, #fffaf3);

        border: 1px solid var(--color-border, #eaddc7);

        border-radius: 0.75rem;

        padding: 1.5rem;

        text-align: center;

        display: flex;

        flex-direction: column;

        align-items: center;

        transition: box-shadow 0.2s ease, transform 0.2s ease;

    }



        .provider-card:hover {

            box-shadow: 0 8px 24px rgba(184, 146, 90, 0.18);

            transform: translateY(-3px);

        }



    .provider-card__photo-wrap {

        width: 140px;

        height: 140px;

        border-radius: 50%;

        overflow: hidden;

        border: 3px solid var(--color-gold, #b8925a);

        margin-bottom: 1rem;

    }



    .provider-card__photo {

        width: 100%;

        height: 100%;

        object-fit: cover;

    }



    .provider-card__name {

        font-family: var(--font-heading, 'Playfair Display', serif);

        font-size: 1.25rem;

        margin: 0.25rem 0 0.1rem;

        color: var(--color-heading, #3a2f28);

    }



    .provider-card__credential {

        font-size: 0.85rem;

        letter-spacing: 0.05em;

        text-transform: uppercase;

        color: var(--color-gold, #b8925a);

        margin: 0 0 0.75rem;

    }



    .provider-card__teaser {

        font-size: 0.9rem;

        line-height: 1.5;

        color: var(--color-text-muted, #6b5d4f);

        margin: 0 0 1.25rem;

    }



    .btn-edit-bio {

        border: 1px solid var(--color-gold, #b8925a);

        background: transparent;

        color: var(--color-gold, #b8925a);

        font-size: 0.85rem;

        letter-spacing: 0.05em;

        text-transform: uppercase;

        padding: 0.5rem 1.5rem;

        border-radius: 2rem;

        cursor: pointer;

        transition: background 0.2s ease, color 0.2s ease;

    }



        .btn-edit-bio:hover {

            background: var(--color-gold, #b8925a);

            color: #fff;

        }



    /* ---------- CTA ---------- */



    .providers-cta {

        text-align: center;

        margin-top: 4rem;

        padding-top: 3rem;

        border-top: 1px solid var(--color-border, #eaddc7);

    }



    .providers-cta__title {

        font-family: var(--font-heading, 'Playfair Display', serif);

        font-size: 1.85rem;

        color: var(--color-heading, #3a2f28);

        margin-bottom: 1.5rem;

    }



    .btn-book-now {

        display: inline-block;

        background: var(--color-gold, #b8925a);

        color: #fff;

        text-decoration: none;

        font-size: 0.95rem;

        letter-spacing: 0.05em;

        text-transform: uppercase;

        padding: 0.85rem 2.5rem;

        border-radius: 2rem;

        transition: opacity 0.2s ease;

    }



        .btn-book-now:hover {

            opacity: 0.9;

        }



    /* ---------- Modal content ---------- */



    .provider-modal {

        display: flex;

        gap: 1.5rem;

        flex-wrap: wrap;

    }



    .provider-modal__photo {

        width: 160px;

        height: 160px;

        object-fit: cover;

        border-radius: 0.75rem;

        flex-shrink: 0;

    }



    .provider-modal__content {

        flex: 1;

        min-width: 200px;

    }



    .provider-modal__credential {

        display: inline-block;

        font-size: 0.85rem;

        letter-spacing: 0.05em;

        text-transform: uppercase;

        color: var(--color-gold, #b8925a);

        margin-bottom: 0.75rem;

    }



    .provider-modal__paragraph {

        font-size: 0.95rem;

        line-height: 1.6;

        color: var(--color-text, #3a2f28);

        margin: 0 0 0.9rem;

    }



    .provider-modal__instagram {

        color: var(--color-gold, #b8925a);

        font-weight: 600;

        text-decoration: none;

    }



        .provider-modal__instagram:hover {

            text-decoration: underline;

        }



    /* ---------- Edit form ---------- */



    .provider-edit-form {

        display: flex;

        gap: 1.5rem;

        flex-wrap: wrap;

    }



    .provider-edit-form__photo {

        width: 160px;

        height: 160px;

        object-fit: cover;

        border-radius: 0.75rem;

        flex-shrink: 0;

    }



    .provider-edit-form__fields {

        flex: 1;

        min-width: 240px;

        display: flex;

        flex-direction: column;

        gap: 0.9rem;

    }



    .provider-edit-form__group label {

        display: block;

        font-size: 0.8rem;

        letter-spacing: 0.05em;

        text-transform: uppercase;

        color: var(--color-gold, #b8925a);

        margin-bottom: 0.35rem;

    }



    .provider-edit-form__group input,

    .provider-edit-form__group textarea {

        width: 100%;

        font-family: var(--font-body, 'Inter', sans-serif);

        font-size: 0.95rem;

        color: var(--color-text, #3a2f28);

        background: var(--color-surface, #fffaf3);

        border: 1px solid var(--color-border, #eaddc7);

        border-radius: 0.5rem;

        padding: 0.55rem 0.75rem;

        box-sizing: border-box;

    }



        .provider-edit-form__group input:focus,

        .provider-edit-form__group textarea:focus {

            outline: none;

            border-color: var(--color-gold, #b8925a);

        }



    .provider-edit-form__group textarea {

        resize: vertical;

        line-height: 1.5;

    }



    .provider-edit-form__hint {

        font-size: 0.8rem;

        color: var(--color-text-muted, #6b5d4f);

        margin: 0.25rem 0 0;

    }



    @media (max-width: 480px) {

        .providers-hero__title {

            font-size: 1.9rem;

        }



        .provider-modal {

            flex-direction: column;

            align-items: center;

            text-align: center;

        }



        .provider-edit-form {

            flex-direction: column;

            align-items: center;

        }

    }

/* ===== Components/Layout/MainLayout.razor ===== */
    /* ═══════════════════════════════════════════════════════════

                       App Shell — MedSpa Theme

                       Shares the palette used in the Presentation Viewer:

                         --mv-bg      #f7f1ea   page background (soft cream)

                         --mv-card    #ffffff   card / sidebar surfaces

                         --mv-border  #ece0d1   hairline borders / dividers

                         --mv-ink     #2e2822   primary text (warm near-black)

                         --mv-muted   #948a7c   secondary text

                         --mv-accent  #a9805a   warm gold/brown accent

                         --mv-accent-2#8a6a49   deeper accent (hover/active)

                       ═══════════════════════════════════════════════════════ */



/* BlazorBootstrap Sidebar2 theme variables */

    :root {

        --bb-sidebar2-width: 270px;

        --bb-sidebar2-collapsed-width: 60px;

        --bb-sidebar2-background-color: #ffffff;

        --bb-sidebar2-top-row-background-color: #ffffff;

        --bb-sidebar2-top-row-border-color: #ece0d1;

        --bb-sidebar2-title-text-color: #2e2822;

        --bb-sidebar2-brand-icon-color: #a9805a;

        --bb-sidebar2-title-badge-text-color: #fbf7f1;

        --bb-sidebar2-title-badge-background-color: #a9805a;

        --bb-sidebar2-navbar-toggler-icon-color: #2e2822;

        --bb-sidebar2-navbar-toggler-background-color: rgba(169,128,90,.10);

        --bb-sidebar2-content-border-color: #ece0d1;

        --bb-sidebar2-nav-item-text-color: rgba(46,40,34,.75);

        --bb-sidebar2-nav-item-text-active-color-rgb: 169,128,90;

        --bb-sidebar2-nav-item-text-hover-color: rgba(169,128,90,.9);

        --bb-sidebar2-nav-item-text-active-color: rgba(169,128,90,.95);

        --bb-sidebar2-nav-item-background-hover-color: rgba(169,128,90,.08);

        --bb-sidebar2-nav-item-group-background-color: rgba(169,128,90,.05);

    }



    html, body {

        background: #f7f1ea;

        color: #2e2822;

        font-family: 'Inter', system-ui, sans-serif;

    }



    .bb-page {

        min-height: 100vh;

        background: #f7f1ea;

    }



    .text-primary {

        --bs-text-opacity: 1;

        color: rgba(46,40,34,.75) !important;

    }



    main {

        background: #f7f1ea;

    }



    article.content {

        background: #f7f1ea;

        color: #2e2822;

        min-height: 100vh;

    }



    /* Error banner recolored to match the warm palette while staying alert-toned */

    #blazor-error-ui {

        background: #fdece0;

        color: #7a3b1e;

        border-top: 1px solid #eac9a8;

        box-shadow: 0 -4px 18px rgba(60,45,25,.08);

        font-family: 'Inter', system-ui, sans-serif;

    }



        #blazor-error-ui .reload {

            color: #a9805a;

            font-weight: 600;

        }



        #blazor-error-ui .dismiss {

            color: #7a3b1e;

        }

/* ===== Components/Pages/Unsubscribe.razor ===== */
    /* Same warm MedSpa palette as the Presentation Viewer / admin pages */
    .unsub-root {
        min-height: 100vh;
        background: #f7f1ea;
        color: #2e2822;
        font-family: 'Inter', system-ui, sans-serif;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
    }

    .unsub-card {
        background: #ffffff;
        border: 1px solid #ece0d1;
        border-radius: 14px;
        box-shadow: 0 6px 18px rgba(60,45,25,.06);
        padding: 2.5rem;
        max-width: 440px;
        width: 100%;
        text-align: center;
    }

    .unsub-card h1 {
        font-size: 1.4rem;
        font-weight: 600;
        margin-bottom: .75rem;
    }

    .unsub-card p {
        color: #948a7c;
        margin-bottom: 1.5rem;
    }

    .unsub-btn {
        background-color: #a9805a;
        border-color: #a9805a;
        color: #fbf7f1;
        border: 1px solid #a9805a;
        border-radius: 8px;
        padding: .6rem 1.5rem;
        font-weight: 600;
        cursor: pointer;
    }

        .unsub-btn:hover {
            background-color: #8a6a49;
            border-color: #8a6a49;
        }

        .unsub-btn:disabled {
            opacity: .6;
            cursor: default;
        }

/* ===== Components/Presentations/Edit.razor ===== */
    /* ═══════════════════════════════════════════════════════════

                               Admin page — MedSpa Theme

                               Same palette as MainLayout.razor / the Presentation Viewer:

                                 --mv-bg      #f7f1ea   page background (soft cream)

                                 --mv-card    #ffffff   card surfaces

                                 --mv-border  #ece0d1   hairline borders / dividers

                                 --mv-ink     #2e2822   primary text (warm near-black)

                                 --mv-muted   #948a7c   secondary text

                                 --mv-accent  #a9805a   warm gold/brown accent

                                 --mv-accent-2#8a6a49   deeper accent (hover/active)

                               ═══════════════════════════════════════════════════════ */



.pres-admin {

        font-family: 'Inter', system-ui, sans-serif;

        color: #2e2822;

    }



        .pres-admin h1 {

            font-family: 'Inter', system-ui, sans-serif;

            font-weight: 600;

            font-size: 1.9rem;

            color: #2e2822;

            margin-bottom: 1.5rem;

        }



    /* ── Card wrapper around each form section ─────────────────── */

    .pres-card {

        background: #ffffff;

        border: 1px solid #ece0d1;

        border-radius: 14px;

        box-shadow: 0 6px 18px rgba(60,45,25,.06);

        padding: 1.5rem;

        margin-bottom: 1.5rem;

    }



    /* ── Section headers inside cards ──────────────────────────── */

    .pres-admin .pres-section-title {

        font-family: 'Inter', system-ui, sans-serif;

        font-weight: 600;

        font-size: 1.15rem;

        color: #2e2822;

        margin-bottom: 1.25rem;

        padding-bottom: .6rem;

        border-bottom: 1px solid #ece0d1;

    }



    /* ── Form labels ─────────────────────────────────────────────── */

    .pres-admin .form-label {

        font-size: .78rem;

        text-transform: uppercase;

        letter-spacing: .04em;

        font-weight: 600;

        color: #948a7c;

        margin-bottom: .35rem;

    }



    /* ── Form controls ──────────────────────────────────────────── */

    .pres-admin .form-control,

    .pres-admin .form-select {

        border-color: #ece0d1;

        color: #2e2822;

    }



        .pres-admin .form-control:focus,

        .pres-admin .form-select:focus {

            border-color: #a9805a;

            box-shadow: 0 0 0 0.2rem rgba(169,128,90,.15);

        }



    /* ── Checkboxes ──────────────────────────────────────────────── */

    .pres-admin .form-check-input {

        accent-color: #a9805a;

    }



    .pres-admin .form-check-label {

        color: #2e2822;

    }

    .pres-admin .btn-primary {

        background-color: #a9805a;

        border-color: #a9805a;

    }



        .pres-admin .btn-primary:hover {

            background-color: #8a6a49;

            border-color: #8a6a49;

        }



    /* ── Grid / table ────────────────────────────────────────────── */

    .pres-admin .table {

        background: #ffffff;

        color: #2e2822;

    }



    .pres-admin .table-bordered,

    .pres-admin .table-bordered th,

    .pres-admin .table-bordered td {

        border-color: #ece0d1;

    }



    .pres-admin .table thead th {

        background: #f7f1ea;

        color: #948a7c;

        text-transform: uppercase;

        font-size: 0.78rem;

        letter-spacing: 0.04em;

        font-weight: 600;

        border-color: #ece0d1;

    }



    .pres-admin .table-striped > tbody > tr:nth-of-type(odd) > * {

        background-color: #faf6f0;

    }



    .pres-admin .table-hover > tbody > tr:hover > * {

        background-color: #f3ebdf;

    }



/*    .pres-admin .page-link {

        color: #a9805a;

        border-color: #ece0d1;

    }



        .pres-admin .page-link:hover {

            color: #8a6a49;

            background-color: #f3ebdf;

        }



    .pres-admin .page-item.active .page-link {

        background-color: #a9805a;

        border-color: #a9805a;

        color: #fbf7f1;

    }*/



    /* ── Thumbnails ──────────────────────────────────────────────── */

    .img-thumbnail_l {

        padding: .25rem;

        background-color: #ffffff;

        border: 1px solid #ece0d1;

        border-radius: 10px;

        max-width: 100%;

        height: 100px;

        cursor: pointer;

    }



    .thumbnail_l {

        background-color: #efe6d8;

        display: flex;

        justify-content: center;

        border: 0;

        border-radius: 10px;

        overflow: hidden;

        width: 150px;

    }



    /* ── Offcanvas video preview ─────────────────────────────────── */

    .offcanvas {

        background: #fbf7f1;

        color: #2e2822;

    }



    .offcanvas-header {

        border-bottom: 1px solid #ece0d1;

    }



    .offcanvas-title {

        font-family: 'Inter', system-ui, sans-serif;

        font-weight: 600;

    }

/* ===== Components/PresentationViewer/Index.razor ===== */
    /* ═══════════════════════════════════════════════════════════

                       First Look Beauty Presentation Viewer

                       Palette (warm, editorial, spa-like):

                         --mv-bg      #f7f1ea   page background (soft cream)

                         --mv-card    #ffffff   card surfaces

                         --mv-border  #ece0d1   hairline borders / dividers

                         --mv-ink     #2e2822   primary text (warm near-black)

                         --mv-muted   #948a7c   secondary text

                         --mv-accent  #a9805a   warm gold/brown accent

                         --mv-accent-2#8a6a49   deeper accent (hover/active)

                       ═══════════════════════════════════════════════════════════ */



*, *::before, *::after {

        box-sizing: border-box;

        margin: 0;

        padding: 0;

    }



    .mv-root {

        min-height: 100vh;

        background: #f7f1ea;

        color: #2e2822;

        font-family: 'Inter', system-ui, sans-serif;

        font-size: 15px;

        line-height: 1.5;

        padding-bottom: 96px; /* clearance for fixed bottom nav */

    }



    /* ── Hero / Player ────────────────────────────────────────── */

    .mv-hero {

        position: relative;

        width: 100%;

        background: #000;

    }



    .mv-player-wrap {

        position: relative;

        width: 100%;

        aspect-ratio: 3 / 4;

        max-height: 78vh;

        background: #d8cabb;

        overflow: hidden;

        cursor: pointer;

    }



    .mv-video {

        width: 100%;

        height: 100%;

        object-fit: cover;

        display: block;

        background: #d8cabb;

    }



    .mv-hero-scrim {

        position: absolute;

        inset: 0;

        background: linear-gradient(to top, rgba(20,14,8,.68) 0%, rgba(20,14,8,.15) 42%, transparent 62%);

        pointer-events: none;

    }



    .mv-overlay {

        position: absolute;

        inset: 0;

        display: flex;

        flex-direction: column;

        justify-content: flex-end;

    }



    /* ── Idle state: title + outline play button ─────────────── */

    .mv-idle-content {

        padding: 2rem 1.75rem 2.5rem;

        display: flex;

        flex-direction: column;

        gap: 1.5rem;

    }



    .mv-hero-title {

        font-family: 'Playfair Display', serif;

        font-style: italic;

        font-weight: 500;

        font-size: clamp(1.9rem, 6vw, 2.6rem);

        line-height: 1.15;

        color: #fbf7f1;

        text-shadow: 0 2px 16px rgba(0,0,0,.35);

        max-width: 80%;

    }



    .mv-play-outline {

        width: 68px;

        height: 68px;

        border-radius: 50%;

        border: 2px solid rgba(251,247,241,.9);

        background: rgba(255,255,255,.06);

        backdrop-filter: blur(2px);

        color: #fbf7f1;

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        transition: background .2s, transform .15s;

    }



        .mv-play-outline:hover {

            background: rgba(255,255,255,.18);

            transform: scale(1.06);

        }



    /* ── Playing state ─────────────────────────────────────────── */

    .mv-now-playing {

        display: inline-flex;

        align-items: center;

        gap: 0.5rem;

        font-size: 0.72rem;

        font-weight: 600;

        letter-spacing: 0.18em;

        color: #e9c88f;

        margin-bottom: 0.35rem;

    }



    .mv-np-dot {

        width: 7px;

        height: 7px;

        border-radius: 50%;

        background: #e9c88f;

        box-shadow: 0 0 0 0 rgba(233,200,143,.6);

        animation: mv-pulse 1.8s ease-in-out infinite;

    }



    @keyframes mv-pulse {

        0% {

            box-shadow: 0 0 0 0 rgba(233,200,143,.6);

        }



        60% {

            box-shadow: 0 0 0 7px rgba(233,200,143,0);

        }



        100% {

            box-shadow: 0 0 0 0 rgba(233,200,143,0);

        }

    }



    .mv-playing-top {

        padding: 1.5rem 1.75rem 0;

    }



    .mv-center-controls {

        flex: 1;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 2.25rem;

        vertical-align: text-bottom;

    }



    .mv-ctrl-btn {

        background: rgba(255,255,255,.14);

        border: 1px solid rgba(255,255,255,.35);

        color: #fbf7f1;

        width: 46px;

        height: 46px;

        border-radius: 50%;

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        transition: background .2s;

        backdrop-filter: blur(3px);

    }



        .mv-ctrl-btn:hover {

            background: rgba(255,255,255,.24);

        }



    .mv-play-btn-mid {

        width: 64px;

        height: 64px;

        border-radius: 50%;

        background: rgba(169,128,90,.9);

        border: 2px solid rgba(251,247,241,.85);

        color: #fbf7f1;

        display: flex;

        align-items: center;

        justify-content: center;

        cursor: pointer;

        transition: transform .15s, background .2s;

    }



        .mv-play-btn-mid:hover {

            background: #8a6a49;

            transform: scale(1.06);

        }



    /* ── Bottom controls (shown while playing) ────────────────── */

    .mv-bottom-controls {

        padding: 0 1.25rem 1.25rem;

        display: flex;

        flex-direction: column;

        gap: 0.6rem;

    }



    .mv-progress-bar {

        position: relative;

        height: 4px;

        background: rgba(255,255,255,.28);

        border-radius: 2px;

        cursor: pointer;

    }



    .mv-progress-fill {

        position: absolute;

        left: 0;

        top: 0;

        height: 100%;

        background: linear-gradient(to right, #c9a26d, #e9c88f);

        border-radius: 2px;

        pointer-events: none;

    }



    .mv-progress-thumb {

        position: absolute;

        top: 50%;

        transform: translate(-50%, -50%);

        width: 12px;

        height: 12px;

        border-radius: 50%;

        background: #e9c88f;

        box-shadow: 0 0 6px rgba(0,0,0,.4);

        pointer-events: none;

    }



    .mv-time-display {

        display: flex;

        justify-content: space-between;

        font-size: 0.72rem;

        color: #e4d9c9;

        font-variant-numeric: tabular-nums;

    }



    .mv-bottom-right {

        display: flex;

        align-items: center;

        gap: 0.75rem;

        justify-content: flex-end;

    }



    .mv-ctrl-sm {

        background: none;

        border: none;

        color: #f0e6d8;

        cursor: pointer;

        padding: 4px;

        display: flex;

        align-items: center;

        line-height: 0;

    }



    .mv-volume-slider {

        width: 72px;

        height: 4px;

        -webkit-appearance: none;

        appearance: none;

        background: rgba(255,255,255,.3);

        border-radius: 2px;

        outline: none;

        cursor: pointer;

    }



        .mv-volume-slider::-webkit-slider-thumb {

            -webkit-appearance: none;

            width: 11px;

            height: 11px;

            border-radius: 50%;

            background: #e9c88f;

            cursor: pointer;

        }



        .mv-volume-slider::-moz-range-thumb {

            width: 11px;

            height: 11px;

            border-radius: 50%;

            background: #e9c88f;

            cursor: pointer;

            border: none;

        }



    /* ── Library section ──────────────────────────────────────── */

    .mv-library {

        padding: 1.75rem 1.25rem 2.5rem;

        width: 100%;

        min-height: min-content;

        overflow: visible;

    }



    .mv-library-grid {

        display: grid;

        grid-template-columns: minmax(0, 1fr) 220px;

        gap: 1.75rem;

        align-items: start;

        max-width: 1000px;

        width: 100%;

        margin: 0 auto;

    }



    .mv-section-title {

        font-family: 'Playfair Display', serif;

        font-weight: 500;

        font-size: 1.55rem;

        color: #2e2822;

        margin-bottom: 1rem;

    }



    /* ── Library rows ─────────────────────────────────────────── */

    .mv-lib-row {

        display: flex;

        align-items: center;

        gap: 0.9rem;

        padding: 0.85rem 0;

        cursor: pointer;

        transition: opacity .15s;

    }



        .mv-lib-row:hover {

            opacity: 0.82;

        }



        .mv-lib-row.active .mv-lib-title {

            color: #a9805a;

        }



    .mv-lib-divider {

        height: 1px;

        background: #ece0d1;

    }



    .mv-lib-thumb {

        position: relative;

        flex-shrink: 0;

        width: 84px;

        height: 84px;

        border-radius: 10px;

        overflow: hidden;

        background: #e3d7c6;

    }



        .mv-lib-thumb img {

            width: 100%;

            height: 100%;

            object-fit: cover;

            display: block;

        }



    .mv-lib-play {

        position: absolute;

        inset: 0;

        display: flex;

        align-items: center;

        justify-content: center;

        background: rgba(30,22,14,.28);

        color: #fbf7f1;

    }



    .mv-library-list {

        min-width: 0;

        width: 100%;

    }



    .mv-lib-text {

        flex: 1;

        min-width: 0;

    }



    .mv-lib-title {

        font-weight: 700;

        font-size: 0.98rem;

        color: #2e2822;

        margin-bottom: 0.2rem;

    }



    .mv-lib-desc {

        font-size: 0.85rem;

        color: #948a7c;

        line-height: 1.35;

        display: -webkit-box;

        -webkit-line-clamp: 2;

        -webkit-box-orient: vertical;

        overflow: hidden;

    }



    .mv-lib-chevron {

        flex-shrink: 0;

        color: #c7b9a5;

    }



    /* ── Sidebar ───────────────────────────────────────────────── */

    .mv-sidebar {

        display: flex;

        flex-direction: column;

        gap: 1.1rem;

    }



    .mv-card {

        background: #ffffff;

        border-radius: 14px;

        border: 1px solid #ece0d1;

        box-shadow: 0 6px 18px rgba(60,45,25,.06);

    }



    .mv-logo-card {

        padding: 1.6rem 1.25rem;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 0.85rem;

        text-align: center;

    }



    .mv-logo-mark {

        color: #a9805a;

    }



    .mv-logo-caption {

        font-size: 0.85rem;

        color: #948a7c;

        letter-spacing: 0.02em;

    }



    .mv-link-row {

        display: flex;

        align-items: center;

        justify-content: space-between;

        padding: 0.9rem 0.1rem;

        text-decoration: none;

        color: #2e2822;

        font-weight: 500;

        font-size: 0.95rem;

        border-bottom: 1px solid #ece0d1;

    }



    /* Icon is only shown in the desktop card layout (see laptop theme below) */

    .mv-link-icon {

        display: none;

        color: #a9805a;

        flex-shrink: 0;

    }



    /* On mobile this just passes the title/desc spans straight through

               as inline text next to each other, matching the original single-line row */

    .mv-link-text {

        display: contents;

    }



    .mv-link-title::after {

        content: " ";

    }



    .mv-link-chevron {

        color: #c7b9a5;

        flex-shrink: 0;

    }



    .mv-phone-card {

        padding: 1.5rem 1.25rem;

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 0.9rem;

        text-align: center;

        text-decoration: none;

        color: #2e2822;

        font-weight: 500;

        line-height: 1.4;

    }



        .mv-phone-card > svg:first-child {

            color: #a9805a;

        }



    .mv-phone-text {

        display: contents;

    }



    .mv-phone-title::after {

        content: " ";

    }



    /* Chevron on the phone card only appears in the desktop layout */

    .mv-phone-chevron {

        display: none;

        color: #c7b9a5;

        flex-shrink: 0;

    }



    /* ── Bottom nav ────────────────────────────────────────────── */

    .mv-bottomnav {

        position: fixed;

        left: 0;

        right: 0;

        bottom: 0;

        z-index: 100;

        background: rgba(247,241,234,.97);

        backdrop-filter: blur(10px);

        -webkit-backdrop-filter: blur(10px);

        border-top: 1px solid #ece0d1;

        padding: 0.6rem 0 0.5rem;

    }



    .mv-nav-items {

        display: flex;

        justify-content: space-around;

        max-width: 1000px;

        margin: 0 auto;

    }



    .mv-nav-item {

        display: flex;

        flex-direction: column;

        align-items: center;

        gap: 0.3rem;

        text-decoration: none;

        color: #948a7c;

        font-size: 0.72rem;

        font-weight: 500;

    }



        .mv-nav-item svg {

            color: #a9805a;

        }



    .mv-powered-by {

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 0.35rem;

        margin-top: 0.55rem;

        font-size: 0.78rem;

        color: #948a7c;

    }



    .mv-firstlook-logo {

        display: inline-flex;

        align-items: center;

        gap: 0.3rem;

        font-weight: 700;

        color: #2e2822;

    }



        .mv-firstlook-logo svg {

            color: #6b4fa0;

        }



    /* ── Responsive ────────────────────────────────────────────── */

    @media (max-width: 640px) {

        .mv-library-grid {

            grid-template-columns: minmax(0, 1fr) minmax(0, 150px);

            gap: 1rem;

        }



        .mv-lib-thumb {

            width: 68px;

            height: 68px;

        }



        .mv-hero-title {

            max-width: 90%;

        }



        .mv-volume-slider {

            width: 50px;

        }

    }



    @media (max-width: 460px) {

        .mv-library-grid {

            grid-template-columns: minmax(0, 1fr);

        }



        .mv-library-list {

            width: 100%;

        }



        .mv-sidebar {

            flex-direction: row;

            flex-wrap: wrap;

            width: 100%;

        }



        .mv-logo-card, .mv-phone-card {

            flex: 1 1 140px;

            min-width: 0;

        }



        .mv-link-row {

            flex: 1 1 100%;

        }



        .mv-lib-row {

            flex-wrap: nowrap;

        }



        .mv-lib-title,

        .mv-lib-desc {

            overflow-wrap: break-word;

        }

    }



    /* ── Laptop / desktop theme ──────────────────────────────────

                       Mobile rules above are untouched; everything below only

                       kicks in at wider viewports and reflows the same markup

                       into a two-column layout to match the desktop mock.

                       ═══════════════════════════════════════════════════════ */

    @media (min-width: 1024px) {



        body {

            background: #f7f1ea;

        }



        .mv-root {

            max-width: 1400px;

            margin: 0 auto;

            padding: 2.5rem 2.5rem 0;

            display: grid;

            grid-template-columns: minmax(0, 1fr) 320px;

            grid-template-areas:

                "hero    sidebar"

                "library ."

                "nav     nav";

            column-gap: 2.5rem;

            row-gap: 2rem;

        }

        /* ── Hero ─────────────────────────────────────────────── */

        .mv-hero {

            grid-area: hero;

            border-radius: 20px;

            overflow: hidden;

        }



        .mv-player-wrap {

            aspect-ratio: 16 / 10;

            max-height: 560px;

        }



        .mv-idle-content {

            padding: 2.5rem;

        }

        /* ── Lift the nested list/sidebar grid up so its children

                       become direct grid items of .mv-root ────────────────── */

        .mv-library,

        .mv-library-grid {

            display: contents;

        }

        /* ── Video library becomes a 3-up card grid ─────────────── */

        .mv-library-list {

            grid-area: library;

            display: grid;

            grid-template-columns: repeat(3, 1fr);

            column-gap: 0;

            row-gap: 0;

        }



        .mv-section-title {

            grid-column: 1 / -1;

        }



        .mv-lib-divider {

            display: none;

        }



        .mv-lib-row {

            flex-direction: column;

            align-items: flex-start;

            position: relative;

            padding: 0 1.75rem 0.5rem 0;

            gap: 0.85rem;

        }



            .mv-lib-row:not(:first-of-type) {

                border-left: 1px solid #ece0d1;

                padding-left: 1.75rem;

            }



        .mv-lib-thumb {

            width: 100%;

            height: 128px;

        }



        .mv-lib-chevron {

            position: absolute;

            right: 0.25rem;

            top: 50%;

            transform: translateY(-50%);

        }

        /* ── Sidebar ─────────────────────────────────────────────── */

        .mv-sidebar {

            grid-area: sidebar;

        }



        .mv-link-row {

            background: #ffffff;

            border: 1px solid #ece0d1;

            border-radius: 14px;

            box-shadow: 0 6px 18px rgba(60,45,25,.06);

            border-bottom: none;

            padding: 1.1rem 1.25rem;

            gap: 0.9rem;

        }



        .mv-link-icon {

            display: flex;

            align-items: center;

        }



        .mv-link-text {

            display: flex;

            flex-direction: column;

            gap: 0.15rem;

            flex: 1;

        }



        .mv-link-title {

            font-weight: 700;

            color: #2e2822;

        }



            .mv-link-title::after {

                content: "";

            }



        .mv-link-desc {

            font-weight: 400;

            font-size: 0.85rem;

            color: #948a7c;

        }



        .mv-phone-card {

            flex-direction: row;

            align-items: center;

            text-align: left;

            padding: 1.1rem 1.25rem;

            gap: 0.9rem;

        }



        .mv-phone-text {

            display: flex;

            flex-direction: column;

            gap: 0.15rem;

            flex: 1;

        }



        .mv-phone-title {

            font-weight: 700;

            color: #2e2822;

        }



            .mv-phone-title::after {

                content: "";

            }



        .mv-phone-desc {

            font-weight: 400;

            font-size: 0.85rem;

            color: #948a7c;

        }



        .mv-phone-chevron {

            display: flex;

            margin-left: auto;

        }

        /* ── Bottom nav becomes an inline footer bar ────────────── */

        .mv-bottomnav {

            grid-area: nav;

            position: static;

            display: flex;

            align-items: center;

            justify-content: space-between;

            background: transparent;

            backdrop-filter: none;

            -webkit-backdrop-filter: none;

            border-top: 1px solid #ece0d1;

            margin-top: 0.5rem;

            padding: 1.5rem 0 2.5rem;

        }



        .mv-nav-items {

            justify-content: flex-start;

            gap: 2.5rem;

            max-width: none;

            margin: 0;

        }



        .mv-nav-item {

            flex-direction: row;

            gap: 0.5rem;

            font-size: 0.85rem;

        }



        .mv-powered-by {

            margin-top: 0;

        }

    }



    /* ── Reduced motion ───────────────────────────────────────── */

    @media (prefers-reduced-motion: reduce) {

        .mv-np-dot {

            animation: none;

        }

    }

    /* ---------- Modal content ---------- */



    .provider-modal {

        display: flex;

        gap: 1.5rem;

        flex-wrap: wrap;

    }



    .provider-modal__photo {

        width: 160px;

        height: 160px;

        object-fit: cover;

        border-radius: 0.75rem;

        flex-shrink: 0;

    }



    .provider-modal__content {

        flex: 1;

        min-width: 200px;

    }



    .provider-modal__credential {

        display: inline-block;

        font-size: 0.85rem;

        letter-spacing: 0.05em;

        text-transform: uppercase;

        color: var(--color-gold, #b8925a);

        margin-bottom: 0.75rem;

    }



    .provider-modal__paragraph {

        font-size: 0.95rem;

        line-height: 1.6;

        color: var(--color-text, #3a2f28);

        margin: 0 0 0.9rem;

    }



    .provider-modal__instagram {

        color: var(--color-gold, #b8925a);

        font-weight: 600;

        text-decoration: none;

    }



        .provider-modal__instagram:hover {

            text-decoration: underline;

        }



    /* ── Bio Modal (edit) ─────────────────────────────────────── */

    .mv-bio-modal .modal-content {

        background: #ffffff;

        color: #2e2822;

        border: 1px solid #ece0d1;

        border-radius: 16px;

        box-shadow: 0 12px 40px rgba(60,45,25,.18);

        font-family: 'Inter', system-ui, sans-serif;

    }



    .mv-bio-modal .modal-header {

        border-bottom: 1px solid #ece0d1;

        padding: 1.25rem 1.5rem;

    }



    .mv-bio-modal .modal-title {

        font-family: 'Playfair Display', serif;

        font-style: italic;

        font-weight: 500;

        font-size: 1.3rem;

        color: #2e2822;

    }



    .mv-bio-modal .btn-close {

        opacity: .55;

    }



        .mv-bio-modal .btn-close:hover {

            opacity: 1;

        }



    .mv-bio-modal .modal-body {

        padding: 1.5rem;

        background: #fbf7f1;

    }



    .mv-bio-modal .modal-footer {

        border-top: 1px solid #ece0d1;

        padding: 1rem 1.5rem;

        background: #ffffff;

    }



        .mv-bio-modal .modal-footer .btn-secondary {

            background: transparent;

            border-color: #ece0d1;

            color: #948a7c;

            font-weight: 600;

        }



            .mv-bio-modal .modal-footer .btn-secondary:hover,

            .mv-bio-modal .modal-footer .btn-secondary:focus {

                border-color: #cbb190;

                color: #2e2822;

                background: #faf6f0;

            }



    /* ── Provider edit form ──────────────────────────────────── */

    .provider-edit-form {

        display: flex;

        gap: 1.5rem;

        align-items: flex-start;

    }



    .provider-edit-form__photo {

        width: 96px;

        height: 96px;

        border-radius: 12px;

        object-fit: cover;

        border: 1px solid #ece0d1;

        background: #efe6d8;

        flex-shrink: 0;

    }



    .provider-edit-form__fields {

        flex: 1;

        min-width: 0;

        display: flex;

        flex-direction: column;

        gap: 1.1rem;

    }



    .provider-edit-form__group label {

        display: block;

        font-weight: 600;

        font-size: .8rem;

        text-transform: uppercase;

        letter-spacing: .03em;

        color: #948a7c;

        margin-bottom: .4rem;

    }



    .provider-edit-form__group input,

    .provider-edit-form__group textarea {

        width: 100%;

        padding: .6rem .75rem;

        border: 1px solid #ece0d1;

        border-radius: 8px;

        background: #ffffff;

        color: #2e2822;

        font-family: 'Inter', system-ui, sans-serif;

        font-size: .92rem;

        transition: border-color .15s ease, box-shadow .15s ease;

    }



        .provider-edit-form__group input:focus,

        .provider-edit-form__group textarea:focus {

            outline: none;

            border-color: #a9805a;

            box-shadow: 0 0 0 3px rgba(169,128,90,.15);

            background: #ffffff;

        }



    .provider-edit-form__group textarea {

        resize: vertical;

        min-height: 70px;

    }



    .provider-edit-form__hint {

        font-size: .76rem;

        color: #948a7c;

        margin-top: .35rem;

    }



    @media (max-width: 560px) {

        .provider-edit-form {

            flex-direction: column;

            align-items: center;

            text-align: center;

        }



        .provider-edit-form__group {

            width: 100%;

        }



        .provider-edit-form__photo {

            width: 88px;

            height: 88px;

        }

    }