@import url("../fonts/google-fonts.css");

.bi {
    vertical-align: -0.125em;
}

:root {
    --cel-50: #f0f9ff;
    --cel-100: #ddf1fd;
    --cel-200: #b3e4fb;
    --cel-300: #5bc8f5;
    --cel-400: #29b6f0;
    --cel-500: #0a9fd8;
    --cel-600: #0880b0;
    --cel-700: #0a6690;
    --cel-800: #0d5272;
    --cel-900: #0f3f57;
    --cel-50-rgb: 240, 249, 255;
    --cel-100-rgb: 221, 241, 253;
    --cel-200-rgb: 179, 228, 251;
    --cel-300-rgb: 91, 200, 245;
    --cel-400-rgb: 41, 182, 240;
    --cel-500-rgb: 10, 159, 216;
    --cel-600-rgb: 8, 128, 176;
    --cel-700-rgb: 10, 102, 144;
    --cel-800-rgb: 13, 82, 114;
    --cel-900-rgb: 15, 63, 87;

    --warm-50: #fdfaf6;
    --warm-100: #f7f2eb;
    --warm-200: #ede6d9;
    --warm-300: #d9cfc0;
    --warm-400: #cdc1ae;
    --warm-50-rgb: 253, 250, 246;
    --warm-100-rgb: 247, 242, 235;
    --warm-200-rgb: 237, 230, 217;
    --warm-300-rgb: 217, 207, 192;
    --warm-400-rgb: 205, 193, 174;

    --ink-900: #1a1a2e;
    --ink-700: #2d3561;
    --ink-500: #6b7280;
    --ink-300: #9ca3af;
    --ink-900-rgb: 26, 26, 46;
    --ink-700-rgb: 45, 53, 97;
    --ink-500-rgb: 107, 114, 128;
    --ink-300-rgb: 156, 163, 175;

    --coral: #f97316;
    --coral-dk: #ea6c0a;
    --coral-btn: #c2410c;
    --coral-btn-hover: #a83608;
    --coral-btn-active: #8f2d06;
    --amber: #f59e0b;
    --warning-text: #854d0e;
    --success: #22c55e;
    --success-text: #15803d;
    --coral-rgb: 249, 115, 22;
    --coral-dk-rgb: 234, 108, 10;
    --coral-btn-rgb: 194, 65, 12;
    --coral-btn-hover-rgb: 168, 54, 8;
    --coral-btn-active-rgb: 143, 45, 6;
    --amber-rgb: 245, 158, 11;
    --warning-text-rgb: 133, 77, 14;
    --success-rgb: 34, 197, 94;
    --success-text-rgb: 21, 128, 61;

    --brand: var(--cel-300);
    --brand-strong: var(--cel-500);
    --brand-soft: var(--cel-100);
    --brand-contrast: #ffffff;
    --brand-contrast-rgb: 255, 255, 255;
    --brand-icon-bg: var(--cel-700);
    --brand-icon-bg-rgb: var(--cel-700-rgb);

    --bg: var(--warm-50);
    --surface: #ffffff;
    --surface-rgb: 255, 255, 255;
    --surface-alt: var(--warm-100);
    --border: var(--warm-300);
    --text: var(--ink-700);
    --text-strong: var(--ink-900);
    --text-muted: var(--ink-500);
    --text-disabled: var(--ink-300);
    --text-on-brand: #ffffff;
    --cta: var(--coral);
    --cta-hover: var(--coral-dk);

    --font-ui: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-serif: "Instrument Serif", Georgia, "Times New Roman", serif;

    --bs-body-font-family: var(--font-ui);
    --bs-body-bg: var(--bg);
    --bs-body-color: var(--text);
    --bs-body-color-rgb: var(--ink-700-rgb);
    --bs-heading-color: var(--text-strong);
    --bs-primary: var(--brand-icon-bg);
    --bs-primary-rgb: var(--brand-icon-bg-rgb);
    --bs-secondary: var(--text-muted);
    --bs-secondary-rgb: var(--ink-500-rgb);
    --bs-success: var(--success);
    --bs-success-rgb: var(--success-rgb);
    --bs-warning: var(--amber);
    --bs-warning-rgb: var(--amber-rgb);
    --bs-danger: var(--coral-btn);
    --bs-danger-rgb: var(--coral-btn-rgb);
    --bs-info: var(--cel-400);
    --bs-info-rgb: var(--cel-400-rgb);
    --bs-light: var(--warm-100);
    --bs-light-rgb: var(--warm-100-rgb);
    --bs-dark: var(--ink-900);
    --bs-dark-rgb: var(--ink-900-rgb);
    --bs-border-color: var(--border);
    --bs-border-color-translucent: var(--warm-300);
    --bs-border-radius: .75rem;
    --bs-border-radius-sm: .5rem;
    --bs-border-radius-lg: 1rem;
    --bs-border-radius-xl: 1.375rem;
    --bs-border-radius-xxl: 1.75rem;
    --bs-border-radius-pill: 100rem;
    --bs-link-color: var(--brand-icon-bg);
    --bs-link-color-rgb: var(--brand-icon-bg-rgb);
    --bs-link-hover-color: var(--cel-800);
    --bs-link-hover-color-rgb: var(--cel-800-rgb);
    --bs-secondary-color: var(--ink-700);
    --bs-tertiary-color: var(--ink-500);
}

html,
body {
    background-color: var(--bg);
}

body {
    background: var(--bg);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body>footer {
    margin-top: auto;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    color: var(--text-strong);
}

.font-serif,
.display-serif {
    font-family: var(--font-serif);
}

.display-serif {
    color: var(--ink-900);
    font-size: clamp(3.2rem, 8vw, 7rem);
    font-style: italic;
    line-height: .85;
}

.fw-500 {
    font-weight: 500 !important;
}

.fw-600 {
    font-weight: 600 !important;
}

.fw-700 {
    font-weight: 700 !important;
}

.fw-800 {
    font-weight: 800 !important;
}

.min-w-0 {
    min-width: 0 !important;
}

.app-shell {
    max-width: 1180px;
}

.navbar {
    --bs-navbar-color: var(--ink-700);
    --bs-navbar-hover-color: var(--cel-700);
    --bs-navbar-active-color: var(--ink-900);
    background: rgb(var(--surface-rgb) / .78);
    border: 1px solid rgb(var(--warm-200-rgb) / .92);
    box-shadow: 0 14px 40px rgb(var(--ink-900-rgb) / .06);
    backdrop-filter: blur(20px) saturate(170%);
}

.app-header {
    background: var(--surface);
    position: relative;
    z-index: 1070;
}

.provider-header {
    --bs-navbar-color: var(--hero-text);
    --bs-navbar-hover-color: var(--hero-text);
    --bs-navbar-active-color: var(--hero-text);
    --bs-navbar-toggler-border-color: rgb(var(--hero-text-rgb) / .26);
    padding-top: .5rem;
    padding-bottom: .5rem;
    background: transparent;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
}

body.has-provider-hero .provider-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.provider-header .navbar-toggler {
    display: none;
}

.provider-header .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
    flex-grow: 0;
}

.provider-header .header-actions {
    margin-top: 0 !important;
}

.provider-header .btn-soft {
    --bs-btn-color: var(--hero-text);
    --bs-btn-bg: rgb(var(--hero-text-rgb) / .12);
    --bs-btn-border-color: rgb(var(--hero-text-rgb) / .22);
    --bs-btn-hover-color: var(--hero-text);
    --bs-btn-hover-bg: rgb(var(--hero-text-rgb) / .18);
    --bs-btn-hover-border-color: rgb(var(--hero-text-rgb) / .3);
    --bs-btn-active-color: var(--hero-text);
    --bs-btn-active-bg: rgb(var(--hero-text-rgb) / .22);
    --bs-btn-active-border-color: rgb(var(--hero-text-rgb) / .34);
}

.provider-header .btn-primary {
    --bs-btn-color: var(--brand-contrast);
    --bs-btn-bg: var(--cta);
    --bs-btn-border-color: var(--cta);
    --bs-btn-hover-color: var(--brand-contrast);
    --bs-btn-hover-bg: color-mix(in srgb, var(--cta) 86%, var(--ink-900));
    --bs-btn-hover-border-color: color-mix(in srgb, var(--cta) 86%, var(--ink-900));
    --bs-btn-active-color: var(--brand-contrast);
    --bs-btn-active-bg: color-mix(in srgb, var(--cta) 78%, var(--ink-900));
    --bs-btn-active-border-color: color-mix(in srgb, var(--cta) 78%, var(--ink-900));
    box-shadow: 0 10px 28px rgb(var(--portal-accent-rgb) / .3), 0 2px 10px rgb(var(--ink-900-rgb) / .14);
}

.header-actions .btn-sm {
    --bs-btn-border-radius: .65rem;
    --bs-btn-font-size: .75rem;
    --bs-btn-padding-x: .7rem;
    --bs-btn-padding-y: .38rem;
}

.app-header .nav-link {
    font-size: .8125rem;
}

.footer-brand-copy {
    color: var(--ink-500);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.dropdown-menu {
    --bs-dropdown-color: var(--ink-700);
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-link-color: var(--ink-700);
    --bs-dropdown-link-hover-color: var(--cel-800);
    --bs-dropdown-link-hover-bg: var(--cel-50);
    --bs-dropdown-link-active-color: var(--surface);
    --bs-dropdown-link-active-bg: var(--cel-700);
    --bs-dropdown-link-disabled-color: var(--ink-300);
    --bs-dropdown-border-color: var(--warm-200);
    z-index: 1080;
    background: var(--surface);
    border: 1px solid var(--warm-200);
    box-shadow: 0 18px 55px rgb(var(--ink-900-rgb) / .08);
}

.brand-mark {
    flex: 0 0 auto;
    height: 42px;
    width: 42px;
}

.brand-name {
    color: var(--ink-900);
    font-weight: 800;
    letter-spacing: -.035em;
    line-height: 1;
}

.brand-sub {
    color: var(--ink-500);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    line-height: 1;
    text-transform: uppercase;
}

.eyebrow {
    color: var(--cel-700);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hero-panel,
.mh-card,
.offcanvas,
.toast,
.popover {
    background: rgb(var(--surface-rgb) / .86);
    border: 1px solid rgb(var(--warm-200-rgb) / .98);
    box-shadow: 0 18px 55px rgb(var(--ink-900-rgb) / .08);
}

.hero-panel {
    border-radius: 1.5rem;
}

@media (min-width: 768px) {
    .provider-hero-meta {
        padding-left: calc(72px + 1rem);
    }
}

@media (max-width: 767.98px) {
    .provider-header {
        display: none;
    }

    body.has-provider-hero [data-hero] {
        padding-top: 1.5rem !important;
    }

    .provider-mobile-footer-cta {
        display: flex;
        justify-content: center;
        gap: .5rem;
        padding: .75rem 0 1rem;
    }

    .provider-mobile-footer-cta .btn {
        flex: 1 1 0;
    }
}

@media (min-width: 768px) {
    .provider-mobile-footer-cta {
        display: none;
    }
}

.mh-card {
    border-radius: 1rem;
}

.card {
    --bs-card-bg: var(--surface);
    --bs-card-border-color: var(--warm-200);
    --bs-card-border-radius: 1rem;
}

.modal-content {
    background: var(--surface);
    border: 1px solid var(--warm-200);
    box-shadow: 0 18px 55px rgb(var(--ink-900-rgb) / .12);
}

.modal-backdrop {
    z-index: 1990;
}

.modal {
    z-index: 2000;
}

.btn {
    --bs-btn-border-radius: .7rem;
    --bs-btn-font-size: .875rem;
    --bs-btn-font-weight: 700;
    --bs-btn-padding-x: .85rem;
    --bs-btn-padding-y: .5rem;
    letter-spacing: -.01em;
}

.btn-primary {
    --bs-btn-color: var(--brand-contrast);
    --bs-btn-bg: var(--cel-700);
    --bs-btn-border-color: var(--cel-700);
    --bs-btn-hover-color: var(--brand-contrast);
    --bs-btn-hover-bg: var(--cel-800);
    --bs-btn-hover-border-color: var(--cel-800);
    --bs-btn-active-color: var(--brand-contrast);
    --bs-btn-active-bg: var(--cel-900);
    --bs-btn-active-border-color: var(--cel-900);
    --bs-btn-disabled-color: var(--brand-contrast);
    --bs-btn-disabled-bg: var(--ink-300);
    --bs-btn-disabled-border-color: var(--ink-300);
}

.btn-outline-primary {
    --bs-btn-color: var(--cel-700);
    --bs-btn-border-color: var(--cel-300);
    --bs-btn-hover-bg: var(--cel-700);
    --bs-btn-hover-border-color: var(--cel-700);
    --bs-btn-active-bg: var(--cel-800);
    --bs-btn-active-border-color: var(--cel-800);
    --bs-btn-disabled-color: var(--cel-600);
    --bs-btn-disabled-border-color: var(--cel-200);
    --bs-btn-focus-shadow-rgb: var(--cel-300-rgb);
}

.btn-outline-secondary {
    --bs-btn-color: var(--ink-700);
    --bs-btn-border-color: var(--warm-300);
    --bs-btn-hover-color: var(--cel-800);
    --bs-btn-hover-bg: var(--cel-50);
    --bs-btn-hover-border-color: var(--cel-200);
    --bs-btn-active-color: var(--cel-900);
    --bs-btn-active-bg: var(--cel-100);
    --bs-btn-active-border-color: var(--cel-300);
}

.btn-coral {
    --bs-btn-color: var(--surface);
    --bs-btn-bg: var(--coral-btn);
    --bs-btn-border-color: var(--coral-btn);
    --bs-btn-hover-color: var(--surface);
    --bs-btn-hover-bg: var(--coral-btn-hover);
    --bs-btn-hover-border-color: var(--coral-btn-hover);
    --bs-btn-active-color: var(--surface);
    --bs-btn-active-bg: var(--coral-btn-active);
    --bs-btn-active-border-color: var(--coral-btn-active);
    --bs-btn-disabled-color: var(--surface);
    --bs-btn-disabled-bg: var(--ink-300);
    --bs-btn-disabled-border-color: var(--ink-300);
}

.btn-soft {
    --bs-btn-color: var(--cel-700);
    --bs-btn-bg: var(--cel-100);
    --bs-btn-border-color: var(--cel-200);
    --bs-btn-hover-color: var(--cel-800);
    --bs-btn-hover-bg: var(--cel-200);
    --bs-btn-hover-border-color: var(--cel-300);
    --bs-btn-active-color: var(--cel-900);
    --bs-btn-active-bg: var(--cel-200);
    --bs-btn-active-border-color: var(--cel-300);
    --bs-btn-disabled-color: var(--ink-500);
    --bs-btn-disabled-bg: var(--warm-100);
    --bs-btn-disabled-border-color: var(--warm-200);
}

.badge {
    --bs-badge-border-radius: 999px;
    letter-spacing: .03em;
}

.text-muted {
    color: var(--ink-500) !important;
}

.text-secondary {
    color: var(--ink-700) !important;
}

.text-primary,
.text-celeste {
    color: var(--cel-700) !important;
}

.bg-primary {
    background-color: var(--cel-700) !important;
}

.bg-warm {
    background-color: var(--warm-50) !important;
}

.bg-warm-100 {
    background-color: var(--warm-100) !important;
}

.bg-coral {
    background-color: var(--coral-btn) !important;
}

.bg-celeste-soft {
    background-color: var(--cel-100) !important;
}

.border-warm {
    border-color: var(--warm-300) !important;
}

.form-control,
.form-select,
.form-control-color,
.form-range,
.input-group-text {
    background-color: var(--surface);
    border-color: var(--warm-200);
    color: var(--ink-700);
}

.form-control:focus,
.form-select:focus {
    background-color: var(--surface);
    border-color: var(--cel-400);
    box-shadow: 0 0 0 .25rem rgb(var(--cel-300-rgb) / .24);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--warm-100);
    border-color: var(--warm-200);
    color: var(--ink-500);
}

.form-control.is-valid,
.was-validated .form-control:valid {
    border-color: var(--success);
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: var(--success);
    box-shadow: 0 0 0 .25rem rgb(var(--success-rgb) / .18);
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    border-color: var(--coral-btn);
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: var(--coral-btn);
    box-shadow: 0 0 0 .25rem rgb(var(--coral-btn-rgb) / .18);
}

.valid-feedback {
    color: var(--success-text);
}

.invalid-feedback {
    color: var(--coral-btn);
}

.form-check-input:checked {
    background-color: var(--cel-700);
    border-color: var(--cel-700);
}

.form-check-input:focus {
    border-color: var(--cel-400);
    box-shadow: 0 0 0 .25rem rgb(var(--cel-300-rgb) / .22);
}

.form-range::-webkit-slider-thumb {
    background: var(--cel-700);
}

.form-range::-moz-range-thumb {
    background: var(--cel-700);
}

.nav-pills {
    --bs-nav-pills-border-radius: .75rem;
    --bs-nav-pills-link-active-bg: var(--cel-700);
    --bs-nav-pills-link-active-color: var(--surface);
}

.nav-pills .nav-link,
.nav-tabs .nav-link,
.nav-underline .nav-link {
    color: var(--ink-500);
    font-weight: 700;
}

.nav-tabs {
    --bs-nav-tabs-border-color: var(--warm-200);
    --bs-nav-tabs-link-hover-border-color: var(--cel-100) var(--cel-100) var(--warm-200);
    --bs-nav-tabs-link-active-color: var(--cel-800);
    --bs-nav-tabs-link-active-bg: var(--surface);
    --bs-nav-tabs-link-active-border-color: var(--warm-200) var(--warm-200) var(--surface);
}

.nav-underline {
    --bs-nav-underline-link-active-color: var(--cel-800);
    --bs-nav-underline-gap: 1.25rem;
}

.nav-underline .nav-link:hover {
    color: var(--cel-700);
}

.table {
    --bs-table-color: var(--ink-700);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--warm-200);
    --bs-table-striped-bg: rgb(var(--cel-100-rgb) / .42);
    --bs-table-hover-bg: rgb(var(--cel-200-rgb) / .36);
    --bs-table-active-bg: var(--cel-100);
}

.table thead th {
    color: var(--ink-500);
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.alert-primary {
    --bs-alert-bg: var(--cel-100);
    --bs-alert-border-color: var(--cel-200);
    --bs-alert-color: var(--cel-800);
}

.progress {
    --bs-progress-bg: var(--warm-200);
    --bs-progress-bar-bg: var(--cel-700);
    height: .6rem;
}

.progress,
.progress-bar {
    border-radius: 100rem;
}

.list-group {
    --bs-list-group-bg: transparent;
    --bs-list-group-border-color: var(--warm-200);
    --bs-list-group-color: var(--ink-700);
    --bs-list-group-active-bg: var(--cel-700);
    --bs-list-group-active-border-color: var(--cel-700);
    --bs-list-group-active-color: var(--surface);
    --bs-list-group-action-hover-bg: var(--cel-50);
    --bs-list-group-action-hover-color: var(--cel-800);
    --bs-list-group-action-active-bg: var(--cel-100);
    --bs-list-group-action-active-color: var(--cel-800);
}

.accordion {
    --bs-accordion-bg: var(--surface);
    --bs-accordion-border-color: var(--warm-200);
    --bs-accordion-active-bg: var(--cel-50);
    --bs-accordion-active-color: var(--cel-800);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgb(var(--cel-300-rgb) / .22);
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--ink-300);
    --bs-breadcrumb-item-active-color: var(--ink-500);
    font-size: .86rem;
    font-weight: 700;
}

.pagination {
    --bs-pagination-color: var(--cel-700);
    --bs-pagination-bg: rgb(var(--surface-rgb) / .86);
    --bs-pagination-border-color: var(--warm-200);
    --bs-pagination-hover-color: var(--cel-800);
    --bs-pagination-hover-bg: var(--cel-100);
    --bs-pagination-hover-border-color: var(--cel-200);
    --bs-pagination-active-bg: var(--cel-700);
    --bs-pagination-active-border-color: var(--cel-700);
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgb(var(--cel-300-rgb) / .22);
}

.tooltip {
    --bs-tooltip-bg: var(--ink-900);
    --bs-tooltip-color: var(--surface);
    --bs-tooltip-border-radius: .6rem;
    --bs-tooltip-padding-x: .75rem;
    --bs-tooltip-padding-y: .45rem;
}

.popover {
    --bs-popover-border-color: var(--warm-200);
    --bs-popover-header-bg: var(--cel-50);
    --bs-popover-header-color: var(--cel-800);
    --bs-popover-body-color: var(--ink-700);
    --bs-popover-border-radius: 1rem;
}

.toast {
    --bs-toast-border-color: var(--warm-200);
    --bs-toast-header-bg: var(--cel-50);
    --bs-toast-header-color: var(--ink-900);
    backdrop-filter: blur(20px) saturate(170%);
}

.offcanvas {
    --bs-offcanvas-color: var(--ink-700);
    --bs-offcanvas-bg: rgb(var(--surface-rgb) / .96);
    --bs-offcanvas-border-color: var(--warm-200);
}

.placeholder {
    background-color: var(--cel-200);
}

.carousel {
    border-radius: 1rem;
    overflow: hidden;
}

.carousel-caption {
    background: rgb(var(--ink-900-rgb) / .7);
    border-radius: .85rem;
    left: 1rem;
    right: 1rem;
}

.carousel-indicators [data-bs-target] {
    background-color: var(--cel-100);
}

.utility-surface {
    background: var(--surface);
    border: 1px solid var(--warm-200);
    border-radius: 1rem;
}

.calendar-cell {
    background: var(--surface);
    border: 1px solid var(--warm-200);
    border-radius: .85rem;
    min-height: 88px;
}

.slot {
    background: var(--cel-100);
    border: 1px solid var(--cel-200);
    border-radius: .7rem;
    color: var(--cel-800);
    font-size: .78rem;
    font-weight: 700;
    padding: .45rem .55rem;
}

.avatar {
    align-items: center;
    background: var(--cel-100);
    border: 1px solid var(--cel-200);
    border-radius: 50%;
    color: var(--cel-800);
    display: inline-flex;
    font-weight: 800;
    height: 2.35rem;
    justify-content: center;
    width: 2.35rem;
}

.avatar img {
    border-radius: inherit;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.avatar-sm {
    font-size: 0.7rem;
    height: 1.4rem;
    width: 1.4rem;
    margin: -0.25rem 0;
}

.avatar-lg {
    font-size: 1.375rem;
    height: 3.5rem;
    width: 3.5rem;
}

.avatar-xl {
    font-size: 1.75rem;
    height: 4.5rem;
    width: 4.5rem;
}

.color-dot {
    border-radius: 50%;
    display: inline-block;
    height: .7rem;
    width: .7rem;
}

.dot-primary {
    background: var(--brand-icon-bg);
}

.dot-bg {
    background: var(--bg);
}

.dot-heading {
    background: var(--text-strong);
}

.dot-cta {
    background: var(--coral-btn);
}

.component-title {
    color: var(--ink-500);
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.footer-link {
    font-size: .75rem;
}

.blog-card,
.provider-card,
.post-card,
.service-card {
    transition: background .15s, border-color .15s, box-shadow .15s, transform .15s;
}

.blog-card:hover,
.provider-card:hover,
.post-card:hover,
.service-card:hover {
    background: var(--surface) !important;
    border-color: var(--cel-300) !important;
    box-shadow: 0 18px 55px rgb(var(--ink-900-rgb) / .08);
    transform: translateY(-1px);
}

.post-card:hover,
.post-card:focus-visible {
    background: var(--cel-50) !important;
    border-color: var(--cel-500) !important;
    box-shadow: none;
    transform: none;
}

.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--surface);
    border: 1px solid var(--warm-200);
    color: var(--ink-700);
    font-size: .75rem;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s, border-color .15s, color .15s;
}

.cat-chip:hover,
.cat-chip:focus-visible {
    background: var(--cel-50);
    border-color: var(--cel-500);
    color: var(--ink-900);
}

.cat-chip.active,
.cat-chip.active:hover,
.cat-chip.active:focus-visible {
    background: var(--cel-600);
    border-color: var(--cel-600);
    color: var(--brand-contrast);
}

.narrow-page {
    min-height: 100vh;
}

.narrow-page-container {
    max-width: 600px;
}

.page-back-link {
    color: var(--ink-500);
    font-size: .875rem;
    font-weight: 700;
    text-decoration: none;
}

.page-back-link:hover {
    color: var(--cel-800);
}

.section-heading-sm {
    color: var(--ink-900);
    font-size: .9375rem;
    font-weight: 700;
}

.account-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-stat {
    border-right: 1px solid var(--warm-200);
    min-width: 0;
}

.account-stat:last-child {
    border-right: 0;
}

.account-stat-value {
    color: var(--cel-600);
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1;
}

.account-stat-label,
.meta-text {
    color: var(--ink-700);
    font-size: .8125rem;
}

.account-stat-label {
    font-size: .75rem;
    margin-top: .25rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.appointment-card,
.provider-summary-card {
    background: var(--surface);
    border: 1px solid var(--warm-200);
    border-radius: .75rem;
}

.provider-summary-card {
    border-top: 3px solid var(--cel-500);
}

.appointment-title,
.provider-summary-title {
    color: var(--ink-900);
    font-size: .9375rem;
    font-weight: 600;
}

.provider-summary-title {
    font-size: .875rem;
    font-weight: 700;
    line-height: 1.3;
}

.account-shell {
    min-height: 100vh;
}

.account-container {
    max-width: 1120px;
}

.account-layout {
    align-items: flex-start;
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 240px minmax(0, 1fr);
}

.account-sidebar {
    background: rgb(var(--surface-rgb) / .9);
    border: 1px solid var(--warm-200);
    border-radius: 1rem;
    box-shadow: 0 18px 55px rgb(var(--ink-900-rgb) / .06);
    padding: 1rem;
    position: sticky;
    top: 5rem;
}

.account-sidebar-head {
    align-items: center;
    border-bottom: 1px solid var(--warm-200);
    display: flex;
    gap: .75rem;
    padding-bottom: 1rem;
}

.account-sidebar-name {
    color: var(--ink-900);
    font-size: .95rem;
    font-weight: 800;
}

.account-sidebar-email,
.account-subtitle,
.account-section p,
.account-record-meta,
.account-highlight-label {
    color: var(--ink-700);
    font-size: .8125rem;
}

.account-nav {
    display: grid;
    gap: .25rem;
    padding-top: 1rem;
}

.account-nav-link {
    align-items: center;
    border-radius: .75rem;
    color: var(--ink-700);
    display: flex;
    font-size: .9rem;
    font-weight: 700;
    justify-content: space-between;
    padding: .7rem .75rem;
    text-decoration: none;
}

.account-nav-link:hover,
.account-nav-link.is-active {
    background: var(--cel-100);
    color: var(--cel-900);
}

.account-nav-count {
    background: var(--surface);
    border: 1px solid var(--cel-200);
    border-radius: 999px;
    color: var(--cel-800);
    font-size: .7rem;
    min-width: 1.45rem;
    padding: .1rem .4rem;
    text-align: center;
}

.account-main {
    display: grid;
    gap: 1rem;
    min-width: 0;
}

.account-hero,
.account-section,
.account-summary-grid {
    background: rgb(var(--surface-rgb) / .92);
    border: 1px solid var(--warm-200);
    border-radius: 1rem;
    box-shadow: 0 18px 55px rgb(var(--ink-900-rgb) / .06);
}

.account-hero {
    align-items: flex-end;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    padding: 1.35rem;
}

.account-title {
    color: var(--ink-900);
    font-size: clamp(1.75rem, 3vw, 2.35rem);
    font-weight: 850;
    letter-spacing: 0;
    line-height: 1.05;
}

.account-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
}

.account-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    overflow: hidden;
}

.account-summary-item {
    border-right: 1px solid var(--warm-200);
    display: grid;
    gap: .25rem;
    padding: 1rem;
    text-align: center;
    text-decoration: none;
}

.account-summary-item:last-child {
    border-right: 0;
}

.account-summary-item:hover {
    background: var(--warm-100);
}

.account-summary-value {
    color: var(--cel-700);
    font-size: 1.5rem;
    font-weight: 850;
    line-height: 1;
}

.account-summary-label {
    color: var(--ink-700);
    font-size: .78rem;
    font-weight: 700;
}

.account-section {
    padding: 1.1rem;
}

.account-section-head {
    align-items: flex-start;
    display: flex;
    gap: 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.account-section h2 {
    color: var(--ink-900);
    font-size: 1.05rem;
    font-weight: 850;
    letter-spacing: 0;
    margin: 0;
}

.account-section p {
    margin: .25rem 0 0;
}

.account-overview-grid,
.account-package-grid,
.account-provider-grid {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.account-list {
    display: grid;
    gap: .65rem;
}

.account-record,
.account-highlight,
.account-provider,
.account-security-row,
.account-empty {
    background: var(--warm-50);
    border: 1px solid var(--warm-200);
    border-radius: .8rem;
    padding: .85rem;
}

.account-record,
.account-provider,
.account-security-row {
    align-items: center;
    display: flex;
    gap: .8rem;
    justify-content: space-between;
}

.account-record.is-muted {
    opacity: .78;
}

.account-record-date {
    background: var(--surface);
    border: 1px solid var(--warm-200);
    border-radius: .7rem;
    color: var(--ink-700);
    display: grid;
    flex: 0 0 8.25rem;
    font-size: .73rem;
    gap: .15rem;
    padding: .55rem;
    text-align: center;
}

.account-record-date strong {
    color: var(--ink-900);
    font-size: 1rem;
}

.account-record-body {
    flex: 1 1 auto;
    min-width: 0;
}

.account-record-title {
    color: var(--ink-900);
    font-size: .95rem;
    font-weight: 800;
}

.account-record-actions {
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: .5rem;
}

.account-subsection-title {
    color: var(--ink-900);
    font-size: .88rem;
    font-weight: 800;
    margin-bottom: .55rem;
}

.account-highlight-label {
    font-weight: 800;
    margin-bottom: .3rem;
    text-transform: uppercase;
}

.account-package {
    background: linear-gradient(135deg, var(--surface), var(--warm-100));
    border: 1px solid var(--warm-200);
    border-radius: .9rem;
    padding: 1rem;
}

.account-progress {
    background: var(--warm-200);
    border-radius: 999px;
    height: .45rem;
    overflow: hidden;
}

.account-progress span {
    background: linear-gradient(90deg, var(--cel-600), var(--coral-btn));
    display: block;
    height: 100%;
}

.account-package-foot {
    color: var(--ink-700);
    display: flex;
    font-size: .8125rem;
    gap: .75rem;
    justify-content: space-between;
    margin-top: .75rem;
}

.account-security-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin-top: .75rem;
}

.account-mobile-nav {
    display: none;
}

.badge-soft {
    background: var(--warm-200);
    color: var(--ink-700);
    font-size: .6875rem;
    font-weight: 600;
}

.badge-outline-primary-soft,
.badge-outline-muted {
    background: transparent;
    border: 1px solid;
    font-size: .6875rem;
    font-weight: 500;
}

.badge-outline-primary-soft {
    border-color: var(--cel-400);
    color: var(--cel-700);
}

.badge-outline-muted {
    border-color: var(--warm-300);
    color: var(--ink-700);
}

.status-badge {
    align-items: center;
    border-radius: 999px;
    display: inline-flex;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1;
    padding: .35rem .6rem;
}

.status-confirmed {
    background: rgb(var(--success-rgb) / .14);
    color: var(--success-text);
}

.status-pending {
    background: rgb(var(--amber-rgb) / .18);
    color: var(--warning-text);
}

.status-canceled {
    background: rgb(var(--coral-btn-rgb) / .13);
    color: var(--coral-btn);
}

.status-default {
    background: var(--warm-100);
    color: var(--ink-700);
}

.btn-link-danger {
    color: var(--coral-btn);
    font-size: .75rem;
    font-weight: 700;
    text-decoration: none;
}

.btn-link-danger:hover {
    color: var(--coral-btn-hover);
}

.form-compact .form-control {
    font-size: .9375rem;
}

.form-compact .form-label {
    font-size: .875rem;
    font-weight: 500;
}

.form-compact .form-text {
    font-size: .8125rem;
}

.resize-none {
    resize: none;
}

@media (max-width: 575.98px) {
    .account-stats {
        grid-template-columns: 1fr;
    }

    .account-stat {
        border-bottom: 1px solid var(--warm-200);
        border-right: 0;
        padding: .75rem 0;
    }

    .account-stat:first-child {
        padding-top: 0;
    }

    .account-stat:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }

    .account-stat-label {
        white-space: normal;
    }

    .account-layout {
        grid-template-columns: 1fr;
    }

    .account-sidebar {
        display: none;
    }

    .account-mobile-nav {
        display: flex;
        gap: .5rem;
        margin-left: -.25rem;
        margin-right: -.25rem;
        overflow-x: auto;
        padding: .25rem;
        scrollbar-width: none;
    }

    .account-mobile-nav::-webkit-scrollbar {
        display: none;
    }

    .account-mobile-link {
        background: var(--surface);
        border: 1px solid var(--warm-200);
        border-radius: 999px;
        color: var(--ink-700);
        flex: 0 0 auto;
        font-size: .85rem;
        font-weight: 800;
        padding: .55rem .85rem;
        text-decoration: none;
    }

    .account-mobile-link.is-active,
    .account-mobile-link:hover {
        background: var(--cel-100);
        border-color: var(--cel-200);
        color: var(--cel-900);
    }

    .account-hero,
    .account-section-head,
    .account-record,
    .account-provider,
    .account-security-row {
        align-items: stretch;
        flex-direction: column;
    }

    .account-actions {
        justify-content: stretch;
    }

    .account-actions .btn {
        width: 100%;
    }

    .account-summary-grid,
    .account-overview-grid,
    .account-package-grid,
    .account-provider-grid {
        grid-template-columns: 1fr;
    }

    .account-summary-item {
        border-bottom: 1px solid var(--warm-200);
        border-right: 0;
    }

    .account-summary-item:last-child {
        border-bottom: 0;
    }

    .account-record-date {
        flex-basis: auto;
        text-align: left;
    }

    .account-record-actions {
        align-items: flex-start;
    }
}

/* ---- Booking flow (stepper, option cards, bottom bar) ---- */
.booking-stepper {
    display: flex;
}

.booking-step {
    flex: 1;
    text-align: center;
    position: relative;
    padding-top: 4px;
}

.booking-step+.booking-step::before {
    content: '';
    position: absolute;
    top: 15px;
    left: calc(-50% + 11px);
    right: calc(50% + 11px);
    height: 1px;
    background-color: var(--warm-300);
}

.booking-step.completed+.booking-step::before {
    background-color: var(--cel-500);
}

.step-indicator {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--warm-300);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--ink-300);
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}

.booking-step.active .step-indicator {
    border-color: var(--cel-700);
    background: var(--cel-700);
    color: var(--brand-contrast);
}

.booking-step.completed .step-indicator {
    border-color: var(--cel-500);
    background: var(--cel-500);
    color: var(--brand-contrast);
}

.step-label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--ink-300);
    display: block;
    line-height: 1.2;
}

.booking-step.active .step-label {
    color: var(--ink-900);
    font-weight: 700;
}

.booking-step.completed .step-label {
    color: var(--ink-500);
}

.step-optional {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--cel-600);
    display: block;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 4px;
}

.booking-option-card {
    border: 2px solid var(--warm-200);
    transition: border-color .12s, background-color .12s;
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    border-radius: 12px;
    background: var(--surface);
    text-decoration: none;
}

.booking-option-card:has(input[type="radio"]:checked) {
    border-color: var(--cel-500) !important;
    background-color: var(--cel-50) !important;
}

.booking-option-card .location-icon {
    fill: var(--ink-300);
    flex-shrink: 0;
    margin-top: 2px;
}

.booking-option-card:has(input[type="radio"]:checked) .location-icon {
    fill: var(--cel-600);
}

.booking-option-card.slot-card {
    align-items: center;
}

.booking-option-card.slot-card:has(input[type="radio"]:checked) {
    border-color: var(--cel-500) !important;
    background-color: var(--cel-50) !important;
}

.booking-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--surface);
    border-top: 1px solid var(--warm-200);
    padding-top: 12px;
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    z-index: 1050;
    box-shadow: 0 -2px 12px rgba(26, 26, 46, .06);
}

/* ---- Provider dashboard (sidebar, tables, calendar, chat, staff) ---- */
/* Layout */
.db-wrap {
    display: flex;
    flex: 1;
    min-height: 0;
    background: var(--warm-50);
}

.db-sidebar {
    width: 240px;
    background: var(--cel-900);
    border-right: 0;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    overflow-y: auto;
}

.db-main {
    flex: 1;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.db-topbar {
    background: #fff;
    border-bottom: 1px solid var(--warm-200);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 100;
}

/* Sidebar nav */
.db-brand {
    padding: 20px 16px 12px;
    border-bottom: 1px solid var(--cel-800);
}

.db-provider {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cel-800);
}

.db-provider-logo {
    align-items: center;
    background: var(--warm-100);
    border-radius: 50%;
    color: var(--ink-700);
    display: inline-flex;
    flex: 0 0 auto;
    font-size: 0.875rem;
    font-weight: 800;
    height: 36px;
    justify-content: center;
    overflow: hidden;
    width: 36px;
}

.db-provider-logo img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.db-provider-logo-light {
    background: var(--cel-100);
    color: var(--cel-800);
}

.db-nav {
    flex: 1;
    padding: 8px 0;
}

.db-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-on-brand);
    width: 100%;
    text-align: left;
    text-decoration: none;
    border-radius: 0;
    transition: background 0.12s, color 0.12s;
}

.db-nav-item:hover {
    background: var(--cel-700);
    color: var(--text-on-brand);
}

.db-nav-item.active {
    background: var(--cel-800);
    color: #fff;
    font-weight: 600;
}

.db-nav-item .badge {
    margin-left: auto;
    font-size: 0.625rem;
}

.db-nav-icon {
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.db-back {
    padding: 12px 16px 16px;
    border-top: 1px solid var(--cel-800);
}

/* Content area */
.db-content {
    flex: 1;
    padding: clamp(20px, 1.6vw, 40px);
    width: 100%;
}

.db-footer {
    width: 100%;
    margin-top: auto;
    padding: 16px clamp(20px, 1.6vw, 40px);
    border-top: 1px solid var(--warm-200);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 0.8125rem;
    color: var(--ink-500);
}

.db-footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-right: auto;
}

.db-footer-links a {
    color: var(--ink-500);
    text-decoration: none;
}

.db-footer-links a:hover {
    color: var(--cel-700);
    text-decoration: underline;
}

.db-section-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.db-section-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--ink-900);
}

/* Stat cards */
.db-stat-card {
    background: #fff;
    border: 1px solid var(--warm-200);
    border-radius: 14px;
    padding: 18px 20px;
}

.db-stat-val {
    font-size: 2rem;
    font-weight: 800;
    color: var(--ink-900);
    line-height: 1;
}

.db-stat-lbl {
    font-size: 0.75rem;
    color: var(--ink-500);
    margin-top: 4px;
    font-weight: 500;
}

/* Tables */
.db-table-wrap {
    background: #fff;
    border: 1px solid var(--warm-200);
    border-radius: 14px;
    overflow: hidden;
}

.db-table {
    margin: 0;
}

.db-table th {
    background: var(--warm-50);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-500);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--warm-200);
    padding: 10px 14px;
    white-space: nowrap;
}

.db-table td {
    padding: 10px 14px;
    font-size: 0.875rem;
    color: var(--ink-900);
    vertical-align: middle;
    border-bottom: 1px solid var(--warm-100);
}

.db-table tr:last-child td {
    border-bottom: none;
}

.db-table tr:hover td {
    background: var(--cel-50);
}

.db-table td .btn-outline-secondary {
    --bs-btn-hover-bg: var(--cel-100);
    --bs-btn-hover-border-color: var(--cel-300);
    --bs-btn-hover-color: var(--cel-900);
    transition: background-color .12s ease, border-color .12s ease, color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.db-table td .btn-outline-secondary:hover {
    box-shadow: 0 1px 3px rgba(2, 39, 56, .14);
    transform: translateY(-1px);
}

.db-table td form.d-inline {
    margin-left: .25rem;
}

/* Status badges */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 100px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.status-blocked {
    background: rgb(var(--coral-btn-rgb) / .13);
    color: var(--coral-btn);
}

/* Dashboard helpers (shared by bookings & clients) */
.db-act {
    font-size: 0.75rem;
    padding: 3px 8px;
}

.db-note-dot {
    color: var(--coral);
    font-weight: 700;
}

.db-note-box {
    background: var(--warm-100);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 0.875rem;
    color: var(--ink-700);
    white-space: pre-wrap;
    word-break: break-word;
}

.db-note-box.is-empty {
    color: var(--ink-500);
    font-style: italic;
}

.form-control.is-locked {
    background-color: var(--warm-100);
    cursor: default;
}

.client-link {
    background: none;
    border: 0;
    padding: 0;
    color: var(--cel-700);
    cursor: pointer;
    text-align: left;
}

.client-link:hover {
    color: var(--cel-900);
    text-decoration: underline;
}

.cl-mini-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 0;
    border-bottom: 1px solid var(--warm-100);
    font-size: 0.875rem;
}

.cl-mini-item:last-child {
    border-bottom: 0;
}

/* View toggle */
.view-toggle {
    display: flex;
    background: var(--warm-100);
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}

.view-toggle button {
    border: none;
    background: none;
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-500);
    cursor: pointer;
}

.view-toggle button.active {
    background: #fff;
    color: var(--ink-900);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Calendar */
.cal-outer {
    background: #fff;
    border: 1px solid var(--warm-200);
    border-radius: 14px;
    overflow: hidden;
}

.cal-head {
    display: grid;
    border-bottom: 1px solid var(--warm-200);
}

.cal-head-time {
    width: 52px;
    border-right: 1px solid var(--warm-200);
    background: var(--warm-50);
}

.cal-head-day {
    flex: 1;
    padding: 8px 6px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--ink-500);
    border-right: 1px solid var(--warm-100);
}

.cal-head-day.today {
    color: var(--cel-700);
}

.cal-head-day .day-date {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ink-900);
    line-height: 1.2;
}

.cal-head-day.today .day-date {
    color: var(--cel-700);
}

.cal-body {
    display: flex;
    overflow-x: auto;
}

.cal-times {
    width: 52px;
    flex-shrink: 0;
    background: var(--warm-50);
    border-right: 1px solid var(--warm-200);
}

.cal-time-row {
    height: 80px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 4px 8px 0 0;
    font-size: 0.6875rem;
    color: var(--ink-500);
    font-weight: 500;
    border-bottom: 1px solid var(--warm-100);
}

.cal-days {
    flex: 1;
    display: grid;
    min-width: 0;
}

.cal-day-col {
    flex: 1;
    position: relative;
    border-right: 1px solid var(--warm-100);
}

.cal-day-col:last-child {
    border-right: none;
}

.cal-hour-line {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px solid var(--warm-100);
}

.cal-booking-block {
    position: absolute;
    left: 3px;
    right: 3px;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    color: #fff;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    line-height: 1.3;
}

.cal-booking-block:hover {
    filter: brightness(0.92);
}

/* Chat */
.chat-wrap {
    background: #fff;
    border: 1px solid var(--warm-200);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    height: 560px;
}

.chat-list {
    width: 260px;
    border-right: 1px solid var(--warm-200);
    overflow-y: auto;
    flex-shrink: 0;
}

.chat-conv-item {
    padding: 14px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--warm-100);
    transition: background 0.1s;
}

.chat-conv-item:hover {
    background: var(--warm-50);
}

.chat-conv-item.active {
    background: var(--cel-50);
}

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--warm-200);
    color: var(--ink-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.chat-thread {
    display: none;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

.chat-thread.active {
    display: flex;
}

.chat-thread-hdr {
    padding: 14px 16px;
    border-bottom: 1px solid var(--warm-200);
    font-weight: 600;
    font-size: 0.9375rem;
    background: var(--warm-50);
}

.chat-msgs {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-bubble {
    max-width: 70%;
    padding: 9px 13px;
    border-radius: 12px;
    font-size: 0.875rem;
    line-height: 1.45;
    word-break: break-word;
}

.chat-bubble-in {
    background: var(--warm-100);
    color: var(--ink-900);
    border-bottom-left-radius: 4px;
}

.chat-bubble-out {
    background: var(--cel-700);
    color: var(--brand-contrast);
    border-bottom-right-radius: 4px;
    margin-left: auto;
}

.chat-time {
    font-size: 0.6875rem;
    opacity: 0.6;
    margin-top: 3px;
}

.chat-input-row {
    padding: 12px 16px;
    border-top: 1px solid var(--warm-200);
    display: flex;
    gap: 8px;
}

.chat-empty-state {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ink-500);
    font-size: 0.9375rem;
}

/* Notifications bell */
.notif-menu {
    width: 320px;
    max-width: 90vw;
    max-height: 70vh;
    overflow-y: auto;
    padding-top: 4px;
    padding-bottom: 4px;
}

.notif-link {
    white-space: normal;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* Public chat widget */
.chat-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 1040;
}

.chat-fab {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--cel-700);
    color: var(--brand-contrast);
    font-size: 1.5rem;
    line-height: 1;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chat-fab:hover {
    filter: brightness(0.95);
}

.chat-panel {
    position: absolute;
    right: 0;
    bottom: 70px;
    width: 340px;
    max-width: calc(100vw - 40px);
    height: 380px;
    max-height: calc(100vh - 140px);
    background: var(--surface);
    border: 1px solid var(--warm-200);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-panel[hidden] {
    display: none;
}

.chat-panel-hdr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--warm-200);
    background: var(--warm-50);
}

.chat-panel-close {
    border: none;
    background: none;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ink-500);
}

.chat-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.chat-panel-empty {
    margin: auto;
    color: var(--ink-500);
    font-size: 0.875rem;
    text-align: center;
}

.chat-panel-form {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--warm-200);
    align-items: flex-end;
}

.chat-panel-form textarea {
    resize: none;
    font-size: 0.875rem;
}

.chat-panel-signin {
    padding: 16px;
    text-align: center;
    border-top: 1px solid var(--warm-200);
}

.chat-feedback {
    font-size: 0.8125rem;
    color: #b00020;
    text-align: center;
    padding: 4px 0;
}

.chat-status {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.6875rem;
    color: var(--ink-500);
    margin-top: 1px;
}

.chat-status[hidden] {
    display: none;
}

.chat-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ink-300, #b9b2a8);
    flex-shrink: 0;
}

.chat-dot.online {
    background: #22c55e;
}

.chat-capture {
    align-self: flex-start;
    max-width: 88%;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    background: var(--warm-100);
    color: var(--ink-900);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
}

.chat-thanks {
    align-self: flex-start;
    max-width: 88%;
    padding: 9px 13px;
    background: var(--warm-100);
    color: var(--ink-900);
    border-radius: 12px;
    border-bottom-left-radius: 4px;
    font-size: 0.875rem;
}

.chat-capture[hidden],
.chat-thanks[hidden] {
    display: none;
}

#chat-turnstile:empty {
    display: none;
}

#chat-turnstile {
    padding: 0 14px;
}

@media (max-width: 480px) {
    .chat-panel {
        width: calc(100vw - 32px);
        height: min(420px, calc(100vh - 120px));
    }
}

/* Settings form */
.db-settings-section {
    background: #fff;
    border: 1px solid var(--warm-200);
    border-radius: 14px;
    padding: 20px 24px;
    margin-bottom: 16px;
}

.db-settings-section h6 {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ink-500);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

/* Staff cards */
.staff-card {
    background: #fff;
    border: 1px solid var(--warm-200);
    border-radius: 14px;
    padding: 18px 20px;
}

.staff-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--warm-200);
    color: var(--ink-700);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Mobile sidebar drawer */
.db-drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 200;
}

.db-drawer-overlay.open {
    display: block;
}

.db-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 260px;
    background: var(--cel-900);
    z-index: 201;
    transform: translateX(-100%);
    transition: transform 0.22s;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.db-drawer .db-brand,
.db-drawer .db-provider {
    border-color: var(--cel-800);
}

.db-drawer .db-brand {
    background: var(--surface);
}

.db-drawer .db-provider .fw-700 {
    color: var(--cel-50) !important;
}

.db-bottom-nav {
    display: none;
}

.db-drawer.open {
    transform: translateX(0);
}

@media (max-width: 991px) {
    .dashboard-page {
        overflow-x: hidden;
    }

    .dashboard-page .dashboard-header .navbar-toggler {
        display: none;
    }

    .dashboard-page .dashboard-header .navbar-collapse {
        display: flex !important;
        flex-basis: auto;
    }

    .dashboard-page .dashboard-header .navbar-brand img {
        width: 136px;
        height: auto;
    }

    .dashboard-page .dashboard-header .header-actions {
        margin-top: 0 !important;
    }

    .db-sidebar {
        display: none;
    }

    /* The top bar is declared inside .db-wrap, but on mobile it must sit
       above the main content instead of becoming a horizontal flex column. */
    .db-wrap {
        display: block;
    }

    .db-main {
        width: 100%;
    }

    .db-content {
        padding: 16px 14px 32px;
    }

    .db-section-hdr {
        align-items: stretch;
    }

    .db-section-title {
        font-size: 1.2rem;
    }

    .db-section-hdr > .d-flex {
        width: 100%;
    }

    .db-section-hdr > .d-flex > .btn {
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
    }

    .db-settings-section {
        padding: 16px;
    }

    .db-footer {
        padding: 14px;
    }

    .db-footer-links {
        width: 100%;
        margin-right: 0;
    }

    .table-responsive {
        scrollbar-width: thin;
    }

    .db-table {
        min-width: 620px;
    }
}

@media (max-width: 767.98px) {
    .product-header .container {
        flex-wrap: nowrap;
        min-width: 0;
        padding-left: 12px;
        padding-right: 12px;
    }

    .product-header .navbar-toggler {
        display: none;
    }

    .product-header .navbar-collapse {
        display: flex !important;
        flex: 1 1 auto;
        flex-basis: auto;
        min-width: 0;
    }

    .product-header .navbar-brand {
        flex: 0 1 auto;
        min-width: 0;
        margin-right: .5rem !important;
    }

    .product-header .navbar-brand img {
        width: 136px;
        height: auto;
    }

    .product-header .header-actions {
        flex: 0 0 auto;
        min-width: 0;
        gap: 4px !important;
        margin-top: 0 !important;
    }

    .product-header .header-actions .btn {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .product-header #notifBell,
    .product-header #accountMenu {
        align-items: center;
        display: inline-flex;
        height: 36px;
        justify-content: center;
        min-height: 36px;
    }

    .product-header #notifBell {
        min-width: 36px;
    }

    .product-header #accountMenu > .text-truncate {
        display: none;
    }

    .product-header #accountMenu + .dropdown-menu {
        max-width: calc(100vw - 24px);
        overflow-x: hidden;
    }

    .product-header .profile-business-item,
    .product-header .profile-business-item .dropdown-item {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .dashboard-page .dashboard-header .container {
        flex-wrap: nowrap;
        min-width: 0;
    }

    .dashboard-page .dashboard-header .container {
        padding-left: 12px;
        padding-right: 12px;
    }

    .dashboard-page .dashboard-header .header-actions {
        gap: 4px !important;
    }

    .dashboard-page .dashboard-header .header-actions .btn {
        padding-left: .5rem;
        padding-right: .5rem;
    }

    .dashboard-page .dashboard-header .navbar-brand {
        flex: 0 1 auto;
        min-width: 0;
        margin-right: .5rem !important;
    }

    .dashboard-page .dashboard-header .navbar-collapse {
        flex: 1 1 auto;
        min-width: 0;
    }

    .dashboard-page .dashboard-header .header-actions {
        flex: 0 0 auto;
        min-width: 0;
    }

    .dashboard-page .dashboard-header #accountMenu > .text-truncate {
        display: none;
    }

    .dashboard-page .dashboard-header #accountMenu + .dropdown-menu {
        max-width: calc(100vw - 24px);
        overflow-x: hidden;
    }

    .dashboard-page .dashboard-header .profile-business-item,
    .dashboard-page .dashboard-header .profile-business-item .dropdown-item {
        overflow-wrap: anywhere;
        white-space: normal;
    }

    .dashboard-page .db-topbar {
        display: none;
    }

    .dashboard-page .db-content {
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .dashboard-page .db-stat-card {
        padding: 14px 12px;
    }

    .dashboard-page .db-stat-val {
        font-size: 1.65rem;
    }

    .dashboard-page .chat-wrap {
        display: block;
        height: auto;
        min-height: 0;
    }

    .dashboard-page .chat-list {
        width: 100%;
        max-height: 190px;
        border-right: 0;
        border-bottom: 1px solid var(--warm-200);
    }

    .dashboard-page .chat-thread {
        height: 390px;
    }

    .dashboard-page .chat-thread-hdr {
        padding: 12px;
    }

    .dashboard-page .chat-msgs {
        padding: 12px;
    }

    .dashboard-page .chat-input-row {
        padding: 10px 12px;
    }

    .dashboard-page .chat-bubble {
        max-width: 88%;
    }

    .dashboard-page .modal-dialog {
        margin: .5rem;
        max-width: calc(100% - 1rem);
    }

    .dashboard-page .modal-body,
    .dashboard-page .modal-footer,
    .dashboard-page .modal-header {
        padding-left: 14px;
        padding-right: 14px;
    }

    .dashboard-page .db-footer {
        padding-bottom: calc(74px + env(safe-area-inset-bottom));
    }

    .dashboard-page .db-bottom-nav {
        align-items: stretch;
        background: var(--cel-900);
        border-top: 1px solid var(--cel-800);
        bottom: 0;
        box-shadow: 0 -8px 24px rgb(var(--ink-900-rgb) / .18);
        display: flex;
        height: calc(56px + env(safe-area-inset-bottom));
        justify-content: space-around;
        left: 0;
        padding: 2px 6px env(safe-area-inset-bottom);
        position: fixed;
        right: 0;
        z-index: 190;
    }

    .dashboard-page .db-bottom-item {
        align-items: center;
        background: transparent;
        border: 0;
        border-radius: 10px;
        color: var(--cel-100);
        display: flex;
        flex: 1 1 0;
        flex-direction: column;
        font-family: inherit;
        font-size: .625rem;
        font-weight: 600;
        gap: 0;
        justify-content: center;
        max-width: 96px;
        min-width: 0;
        padding: 2px 4px;
        position: relative;
        text-decoration: none;
    }

    .dashboard-page .db-bottom-item:hover,
    .dashboard-page .db-bottom-item:focus-visible,
    .dashboard-page .db-bottom-item.active {
        background: var(--cel-800);
        color: #fff;
    }

    .dashboard-page .db-bottom-icon {
        font-size: 1rem;
        line-height: 1.2;
    }

    .dashboard-page .db-bottom-badge {
        align-items: center;
        background: var(--amber);
        border: 2px solid var(--cel-900);
        border-radius: 999px;
        color: #78350f;
        display: inline-flex;
        font-size: .55rem;
        font-weight: 800;
        justify-content: center;
        min-height: 17px;
        min-width: 17px;
        padding: 0 3px;
        position: absolute;
        right: 15%;
        top: 3px;
    }

    .dashboard-page .db-bottom-badge[hidden] {
        display: none;
    }
}


@media (min-width: 992px) {
    .db-topbar {
        display: none !important;
    }
}

.post-body {
    font-size: 1rem;
    line-height: 1.8;
}

.post-body > :first-child {
    margin-top: 0;
}

.post-body h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--ink-900);
    margin: 2rem 0 0.75rem;
}

.post-body h3 {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ink-900);
    margin: 1.5rem 0 0.5rem;
}

.post-body h4 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink-900);
    margin: 1.25rem 0 0.5rem;
}

.post-body p {
    margin: 0 0 1rem;
}

.post-body ul,
.post-body ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}

.post-body li {
    margin-bottom: 0.375rem;
}

.post-body a {
    color: var(--bs-primary, #0d6efd);
    text-decoration: underline;
}

.post-body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
    margin: 1rem 0;
}

.post-body figure {
    margin: 1.5rem 0;
}

.post-body figcaption {
    font-size: 0.8125rem;
    color: var(--ink-600);
    text-align: center;
    margin-top: 0.5rem;
}

.post-body blockquote {
    border-left: 3px solid var(--warm-400);
    padding-left: 1rem;
    margin: 1rem 0;
    color: var(--ink-600);
}

.post-body pre {
    background: var(--warm-100);
    border: 1px solid var(--warm-300);
    border-radius: 0.5rem;
    padding: 1rem;
    overflow-x: auto;
    font-size: 0.875rem;
}

.post-body code {
    background: var(--warm-100);
    border-radius: 0.25rem;
    padding: 0.1rem 0.3rem;
    font-size: 0.875rem;
}

.post-body pre code {
    background: none;
    padding: 0;
}

.post-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.9375rem;
}

.post-body th,
.post-body td {
    border: 1px solid var(--warm-300);
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}

.post-body th {
    background: var(--warm-100);
    font-weight: 700;
}

.post-body caption {
    caption-side: bottom;
    font-size: 0.8125rem;
    color: var(--ink-600);
    padding-top: 0.5rem;
}

.post-body iframe {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    border: 0;
    border-radius: 0.5rem;
    margin: 1.5rem 0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}

.hours-popover.popover {
    --bs-popover-bg: var(--surface);
    max-width: none;
    background: var(--surface);
    border: 1px solid var(--warm-300);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(var(--ink-900-rgb), 0.18);
}

.hours-popover .popover-body {
    padding: 12px 14px;
}