/* ==========================================================================
   Braysons Host — WHMCS 9 Client Area Theme
   Child theme of Twenty-One. Brand tokens mirror braysons.co.ke.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Nexus cart palette (kept from parent custom.css, mapped to brand)
   -------------------------------------------------------------------------- */
html { font-size: 15px; }

:root {
    --white: #fff;
    --neutral-50: #f8fafc;
    --neutral-100: #f1f5f9;
    --neutral-200: #e2e8f0;
    --neutral-300: #cbd5e1;
    --neutral-400: #94a3b8;
    --neutral-500: #6B7C93;
    --neutral-600: #41536B;
    --neutral-700: #2d3f57;
    --neutral-800: #1a2b42;
    --neutral-900: #0F1E33;
    --neutral-950: #081627;

    --primary-50: #F3F8FD;
    --primary-100: #E6F0FA;
    --primary-200: #C5D6E8;
    --primary-300: #9FC2E7;
    --primary-400: #5699DA;
    --primary-500: #3A88D3;
    --primary-600: #2577C9;
    --primary-700: #1E66B0;
    --primary-800: #17528F;
    --primary-900: #10304F;
    --primary-950: #0B2440;

    --primary: var(--primary-600);
    --primary-lifted: var(--primary-700);
    --primary-accented: var(--primary-800);

    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    --success: #00875A;
    --success-lifted: #00704a;
    --success-accented: #015a3c;
    --info: #2577C9;
    --info-lifted: #1E66B0;
    --info-accented: #17528F;
    --notice: #6E4BD8;
    --notice-lifted: #5a3cc0;
    --notice-accented: #4a30a0;
    --warning: #E8890C;
    --warning-lifted: #c97408;
    --warning-accented: #9f5c06;
    --error: #D64545;
    --error-lifted: #b93636;
    --error-accented: #962b2b;

    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    --border-muted: #E8EFF7;
    --border: #DCE6F1;
    --border-lifted: #C5D6E8;
    --border-accented: var(--neutral-600);

    --bg: var(--white);
    --bg-muted: #F7FAFE;
    --bg-lifted: #F3F8FD;
    --bg-accented: #E6F0FA;
    --bg-inverted: #0B2440;

    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;
    --rounding-sm: 0.375rem;
    --rounding-md: 0.625rem;
    --rounding-lg: 1rem;
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* --------------------------------------------------------------------------
   1. Brand tokens
   -------------------------------------------------------------------------- */
:root {
    --bh-blue: #2577C9;
    --bh-blue-600: #1E66B0;
    --bh-blue-700: #17528F;
    --bh-sky: #5699DA;
    --bh-sky-100: #E6F0FA;
    --bh-sky-50: #F3F8FD;
    --bh-navy: #0B2440;
    --bh-navy-800: #10304F;
    --bh-ink: #0F1E33;
    --bh-body: #41536B;
    --bh-muted: #6B7C93;
    --bh-line: #DCE6F1;
    --bh-star: #F5B301;
    --bh-wa: #25D366;
    --bh-wa-dark: #1DA851;
    --bh-green: #00875A;
    --bh-red: #D64545;
    --bh-orange: #E8890C;
    --bh-violet: #6E4BD8;
    --bh-teal: #0E9F9A;

    --bh-bg: #F3F8FD;
    --bh-surface: #FFFFFF;
    --bh-surface-2: #F7FAFE;
    --bh-surface-3: #EEF4FB;
    --bh-text: var(--bh-ink);
    --bh-text-2: var(--bh-body);
    --bh-heading: var(--bh-ink);

    --bh-grad: linear-gradient(135deg, #2577C9 0%, #5699DA 100%);
    --bh-grad-deep: linear-gradient(135deg, #0B2440 0%, #17528F 55%, #2577C9 100%);

    --bh-radius: 16px;
    --bh-radius-sm: 10px;
    --bh-radius-lg: 22px;
    --bh-shadow-sm: 0 1px 2px rgba(11, 36, 64, .06);
    --bh-shadow: 0 1px 2px rgba(11, 36, 64, .06), 0 8px 24px rgba(11, 36, 64, .07);
    --bh-shadow-lg: 0 2px 4px rgba(11, 36, 64, .06), 0 24px 48px rgba(11, 36, 64, .12);
    --bh-ring: 0 0 0 4px rgba(37, 119, 201, .18);

    --bh-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --bh-font-head: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

    --bh-sidenav-w: 272px;
    --bh-rail-w: 84px;
    --bh-topbar-h: 68px;
    --bh-ease: cubic-bezier(.2, .8, .2, 1);
}

html[data-bh-theme="dark"] {
    color-scheme: dark;
    --bh-bg: #071629;
    --bh-surface: #0D223B;
    --bh-surface-2: #10294A;
    --bh-surface-3: #143257;
    --bh-line: #1D3F66;
    --bh-text: #E8F0FA;
    --bh-text-2: #A9BCD3;
    --bh-heading: #F3F8FD;
    --bh-muted: #7F98B4;
    --bh-sky-100: #12345A;
    --bh-sky-50: #0C2644;
    --bh-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .28);
    --bh-shadow-lg: 0 2px 4px rgba(0, 0, 0, .3), 0 24px 48px rgba(0, 0, 0, .4);
    --bg: #0D223B;
    --bg-muted: #10294A;
    --bg-lifted: #0C2644;
    --bg-accented: #143257;
    --text: #E8F0FA;
    --text-accented: #A9BCD3;
    --text-lifted: #7F98B4;
    --border: #1D3F66;
    --border-muted: #173659;
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
body.bh-body,
body.primary-bg-color {
    background: var(--bh-bg);
    color: var(--bh-text-2);
    font-family: var(--bh-font-body);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
body.bh-body h1, body.bh-body h2, body.bh-body h3, body.bh-body h4, body.bh-body h5, body.bh-body h6,
body.bh-body .h1, body.bh-body .h2, body.bh-body .h3, body.bh-body .h4, body.bh-body .h5, body.bh-body .h6 {
    font-family: var(--bh-font-head);
    color: var(--bh-heading);
    letter-spacing: -.01em;
}
body.bh-body a { color: var(--bh-blue); transition: color .2s; }
body.bh-body a:hover { color: var(--bh-blue-600); text-decoration: none; }
html[data-bh-theme="dark"] body.bh-body a:not(.btn):not(.list-group-item):not(.dropdown-item) { color: #7DB6EC; }
body.bh-body .text-muted { color: var(--bh-muted) !important; }
body.bh-body hr { border-top-color: var(--bh-line); }
body.bh-body code { color: #C2185B; background: var(--bh-surface-3); padding: 2px 6px; border-radius: 6px; }
::selection { background: rgba(37, 119, 201, .2); }
*:focus-visible { outline: 3px solid rgba(37, 119, 201, .45); outline-offset: 2px; }
body.bh-body ::-webkit-scrollbar { width: 10px; height: 10px; }
body.bh-body ::-webkit-scrollbar-thumb { background: rgba(107, 124, 147, .35); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
body.bh-body ::-webkit-scrollbar-thumb:hover { background-color: rgba(107, 124, 147, .55); }

.bh-skip {
    position: fixed; top: -60px; left: 16px; z-index: 3000;
    background: var(--bh-blue); color: #fff !important; padding: 10px 16px; border-radius: 10px;
    transition: top .2s;
}
.bh-skip:focus { top: 12px; }

.bh-progress {
    position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 3000;
    background: linear-gradient(90deg, #5699DA, #2577C9, #F5B301);
    box-shadow: 0 0 10px rgba(37, 119, 201, .6);
    transition: width .4s var(--bh-ease), opacity .3s;
    opacity: 0;
}
.bh-progress.is-active { opacity: 1; }

/* --------------------------------------------------------------------------
   3. App shell — side navigation
   -------------------------------------------------------------------------- */
.bh-sidenav {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--bh-sidenav-w);
    z-index: 1045;
    display: flex; flex-direction: column;
    background:
        radial-gradient(120% 60% at 0% 0%, rgba(86, 153, 218, .22) 0%, rgba(86, 153, 218, 0) 60%),
        linear-gradient(180deg, #0B2440 0%, #0E2A4A 60%, #10304F 100%);
    color: #C9D7E8;
    box-shadow: 4px 0 24px rgba(11, 36, 64, .12);
    transition: width .3s var(--bh-ease), transform .3s var(--bh-ease);
}
.bh-sidenav-brand {
    height: var(--bh-topbar-h);
    display: flex; align-items: center; justify-content: space-between;
    padding: 0 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    flex-shrink: 0;
}
.bh-brand-link { display: flex; align-items: center; min-width: 0; }
.bh-logo-chip {
    display: inline-flex; align-items: center;
    background: #fff; border-radius: 12px; padding: 6px 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.bh-logo-chip img, .bh-sidenav .bh-logo { max-height: 34px; max-width: 180px; width: auto; display: block; }
.bh-wordmark { display: inline-flex; align-items: center; gap: 10px; font-family: var(--bh-font-head); font-weight: 700; font-size: 1.15rem; color: #fff; white-space: nowrap; }
.bh-wordmark-mark {
    width: 36px; height: 36px; border-radius: 11px; display: inline-grid; place-items: center;
    background: var(--bh-grad); color: #fff; font-weight: 800; box-shadow: 0 6px 16px rgba(37, 119, 201, .45);
}
.bh-guest .bh-wordmark-text { color: var(--bh-heading); }
.bh-guest .bh-footer .bh-wordmark-text { color: #fff; }

.bh-sidenav-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 18px 14px 24px; scrollbar-width: thin; }
.bh-sidenav-scroll::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .15) !important; }

.bh-sidenav-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-bottom: 18px; padding: 12px 16px;
    border-radius: 12px; background: var(--bh-grad); color: #fff !important; font-weight: 600;
    box-shadow: 0 10px 24px rgba(37, 119, 201, .35);
    transition: transform .2s var(--bh-ease), box-shadow .2s;
    white-space: nowrap; overflow: hidden;
}
.bh-sidenav-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(37, 119, 201, .45); }
.bh-sidenav-cta i { width: 26px; height: 26px; border-radius: 8px; display: inline-grid; place-items: center; background: rgba(255, 255, 255, .2); font-size: .8rem; }

.bh-nav-list, .bh-subnav { list-style: none; margin: 0; padding: 0; }
.bh-nav-item { margin-bottom: 4px; }
.bh-nav-link {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 10px 12px; border: 0; border-radius: 12px;
    background: transparent; color: #C9D7E8 !important; font-weight: 500; font-size: .96rem;
    text-align: left; cursor: pointer; white-space: nowrap;
    transition: background .2s, color .2s;
    position: relative;
}
.bh-nav-link:hover { background: rgba(255, 255, 255, .06); color: #fff !important; }
.bh-nav-ico {
    width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: inline-grid; place-items: center;
    background: rgba(255, 255, 255, .06); color: #9FC2E7; transition: all .2s;
}
.bh-nav-link:hover .bh-nav-ico { background: rgba(86, 153, 218, .22); color: #fff; }
.bh-nav-label { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.bh-caret { font-size: .7rem; opacity: .6; transition: transform .25s var(--bh-ease); }
.bh-nav-item.is-open > .bh-nav-link .bh-caret { transform: rotate(180deg); }
.bh-nav-item.is-active > .bh-nav-link { background: rgba(37, 119, 201, .22); color: #fff !important; }
.bh-nav-item.is-active > .bh-nav-link .bh-nav-ico { background: var(--bh-grad); color: #fff; box-shadow: 0 6px 16px rgba(37, 119, 201, .45); }
.bh-nav-item.is-active > .bh-nav-link::before {
    content: ""; position: absolute; left: -14px; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--bh-sky);
}
.bh-nav-badge {
    margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    background: var(--bh-star); color: var(--bh-navy); font-size: .72rem; font-weight: 700; display: inline-grid; place-items: center;
}
.bh-subnav {
    max-height: 0; overflow: hidden; transition: max-height .35s var(--bh-ease), margin .35s var(--bh-ease);
    margin-left: 28px; padding-left: 14px; border-left: 1px dashed rgba(255, 255, 255, .12);
}
.bh-nav-item.is-open > .bh-subnav { max-height: 900px; margin-top: 4px; margin-bottom: 8px; }
.bh-subnav a {
    display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px;
    color: #A9BCD3 !important; font-size: .9rem; white-space: nowrap;
    transition: background .2s, color .2s, padding .2s;
}
.bh-subnav a i { font-size: .8rem; opacity: .7; width: 16px; }
.bh-subnav a:hover { color: #fff !important; background: rgba(255, 255, 255, .05); padding-left: 14px; }
.bh-subnav a.active { color: #fff !important; background: rgba(86, 153, 218, .18); font-weight: 600; }
.bh-subnav-divider { height: 1px; margin: 6px 10px; background: rgba(255, 255, 255, .08); }

.bh-sidenav-help {
    margin-top: 22px; padding: 16px; border-radius: 14px; display: flex; gap: 12px;
    background: linear-gradient(135deg, rgba(37, 211, 102, .14), rgba(37, 211, 102, .04));
    border: 1px solid rgba(37, 211, 102, .25);
}
.bh-sidenav-help-ico { width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0; display: grid; place-items: center; background: var(--bh-wa); color: #fff; font-size: 1.2rem; }
.bh-sidenav-help-body { font-size: .84rem; line-height: 1.45; color: #A9BCD3; display: flex; flex-direction: column; gap: 4px; }
.bh-sidenav-help-body strong { color: #fff; font-size: .92rem; }
.bh-sidenav-help-link { color: #5EE596 !important; font-weight: 600; }
.bh-sidenav-help-link i { font-size: .75rem; transition: transform .2s; }
.bh-sidenav-help-link:hover i { transform: translateX(3px); }

.bh-sidenav-foot { padding: 12px 14px; border-top: 1px solid rgba(255, 255, 255, .06); flex-shrink: 0; }
.bh-rail-toggle {
    width: 100%; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; border: 0;
    background: transparent; color: #7F98B4; font-size: .86rem; cursor: pointer; transition: all .2s;
}
.bh-rail-toggle:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.bh-rail-toggle i { width: 34px; text-align: center; transition: transform .3s; }

.bh-backdrop {
    position: fixed; inset: 0; z-index: 1040; background: rgba(7, 22, 41, .55);
    backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s;
}

/* Desktop: fixed sidenav, content shifts */
@media (min-width: 1200px) {
    body.bh-app .bh-shell { padding-left: var(--bh-sidenav-w); transition: padding .3s var(--bh-ease); }
    html.bh-rail body.bh-app .bh-shell { padding-left: var(--bh-rail-w); }
    html.bh-rail .bh-sidenav { width: var(--bh-rail-w); }
    html.bh-rail .bh-sidenav .bh-nav-label,
    html.bh-rail .bh-sidenav .bh-caret,
    html.bh-rail .bh-sidenav .bh-nav-badge,
    html.bh-rail .bh-sidenav .bh-subnav,
    html.bh-rail .bh-sidenav-help-body,
    html.bh-rail .bh-sidenav-cta span,
    html.bh-rail .bh-rail-toggle span,
    html.bh-rail .bh-sidenav .bh-wordmark-text { display: none !important; }
    html.bh-rail .bh-sidenav-brand { padding: 0; justify-content: center; }
    html.bh-rail .bh-logo-chip { padding: 4px; max-width: 52px; overflow: hidden; }
    html.bh-rail .bh-logo-chip img { max-width: none; height: 30px; object-fit: cover; object-position: left center; width: 44px; }
    html.bh-rail .bh-nav-link { justify-content: center; padding: 8px; }
    html.bh-rail .bh-sidenav-cta { padding: 10px; }
    html.bh-rail .bh-sidenav-help { padding: 10px; justify-content: center; }
    html.bh-rail .bh-rail-toggle i { transform: rotate(180deg); }
    html.bh-rail .bh-nav-item.has-children:hover > .bh-subnav {
        display: block; position: fixed; left: calc(var(--bh-rail-w) - 6px); max-height: none;
        margin: 0; padding: 8px; min-width: 220px; border: 1px solid rgba(255, 255, 255, .08);
        background: #0E2A4A; border-radius: 14px; box-shadow: var(--bh-shadow-lg); z-index: 1100;
    }
}
@media (max-width: 1199.98px) {
    .bh-sidenav { transform: translateX(-105%); width: min(86vw, 300px); }
    html.bh-nav-open .bh-sidenav { transform: none; }
    html.bh-nav-open .bh-backdrop { opacity: 1; visibility: visible; }
    html.bh-nav-open, html.bh-nav-open body { overflow: hidden; }
}
.bh-sidenav-close { color: #C9D7E8 !important; background: rgba(255, 255, 255, .06) !important; border-color: transparent !important; }

/* --------------------------------------------------------------------------
   4. Top bar (shared) + guest navigation
   -------------------------------------------------------------------------- */
.bh-strip { background: var(--bh-navy); color: #A9BCD3; font-size: .82rem; }
.bh-strip-inner { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 16px; }
.bh-strip-left, .bh-strip-right { display: flex; align-items: center; gap: 22px; }
.bh-strip a, .bh-strip span { color: #C9D7E8 !important; display: inline-flex; align-items: center; gap: 7px; }
.bh-strip a:hover { color: #fff !important; }
.bh-strip .fa-whatsapp { color: var(--bh-wa); }

header.header.bh-topbar {
    position: sticky; top: 0; z-index: 1030;
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--bh-line);
    transition: box-shadow .25s, background .25s;
}
html[data-bh-theme="dark"] header.header.bh-topbar { background: rgba(7, 22, 41, .82); }
header.header.bh-topbar.is-scrolled { box-shadow: 0 8px 24px rgba(11, 36, 64, .08); }
.bh-topbar-inner { display: flex; align-items: center; gap: 14px; min-height: var(--bh-topbar-h); }
body.bh-app .bh-topbar-inner { padding: 0 28px; max-width: 1480px; margin: 0 auto; }
@media (max-width: 575.98px) { body.bh-app .bh-topbar-inner { padding: 0 14px; gap: 8px; } }

.bh-topbar-logo img { max-height: 34px; width: auto; }
header.header .bh-brand { display: flex; align-items: center; margin-right: 8px; }
header.header .bh-brand .logo-img, header.header .logo-img { max-height: 46px; width: auto; }

.bh-search-trigger {
    display: flex; align-items: center; gap: 10px; flex: 0 1 420px; min-width: 0;
    height: 44px; padding: 0 12px 0 16px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--bh-line); background: var(--bh-surface-2); color: var(--bh-muted);
    font-size: .92rem; transition: border-color .2s, box-shadow .2s, background .2s;
}
.bh-search-trigger:hover { border-color: var(--bh-sky); background: var(--bh-surface); box-shadow: var(--bh-ring); }
.bh-search-text { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bh-guest .bh-search-trigger { margin-left: auto; flex-basis: 300px; }
@media (max-width: 575.98px) {
    body.bh-app .bh-search-trigger { width: 44px; flex: 0 0 44px; padding: 0; justify-content: center; margin-left: auto; }
    body.bh-app .bh-search-text { display: none; }
}
kbd {
    font-family: var(--bh-font-body); font-size: .7rem; font-weight: 600; color: var(--bh-muted);
    background: var(--bh-surface); border: 1px solid var(--bh-line); border-bottom-width: 2px; border-radius: 6px;
    padding: 2px 6px; box-shadow: none;
}

.bh-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
body.bh-app .bh-search-trigger + .bh-topbar-actions { margin-left: auto; }
header.header .bh-icon-btn, .bh-icon-btn {
    position: relative; width: 42px; height: 42px; flex-shrink: 0;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 12px; border: 1px solid var(--bh-line); background: var(--bh-surface);
    color: var(--bh-body) !important; font-size: 1.05rem; line-height: 1; padding: 0; cursor: pointer;
    transition: all .2s var(--bh-ease);
}
header.header .bh-icon-btn:hover, .bh-icon-btn:hover { color: var(--bh-blue) !important; border-color: var(--bh-sky); transform: translateY(-1px); box-shadow: var(--bh-shadow); }
html[data-bh-theme="dark"] .bh-icon-btn { color: var(--bh-text-2) !important; }
.bh-dot {
    position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    background: var(--bh-red); color: #fff; font-size: .66rem; font-weight: 700; display: grid; place-items: center;
    border: 2px solid var(--bh-surface); animation: bh-pop .4s var(--bh-ease);
}
.cart-btn .bh-dot { background: var(--bh-blue); }
.bh-dot-empty { display: none; }
@keyframes bh-pop { from { transform: scale(0); } to { transform: scale(1); } }

.bh-ico-light { display: none; }
html[data-bh-theme="dark"] .bh-ico-light { display: inline-block; color: var(--bh-star); }
html[data-bh-theme="dark"] .bh-ico-dark { display: none; }

.bh-user-btn {
    display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; height: 44px;
    border-radius: 999px; border: 1px solid var(--bh-line); background: var(--bh-surface); cursor: pointer;
    transition: all .2s;
}
.bh-user-btn:hover { border-color: var(--bh-sky); box-shadow: var(--bh-ring); }
.bh-avatar {
    width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; flex-shrink: 0;
    background: var(--bh-grad); color: #fff; font-family: var(--bh-font-head); font-weight: 700; font-size: .82rem; letter-spacing: .02em;
}
.bh-avatar-lg { width: 46px; height: 46px; font-size: 1rem; }
.bh-user-meta { flex-direction: column; align-items: flex-start; line-height: 1.15; max-width: 170px; }
.bh-user-name { font-weight: 600; color: var(--bh-heading); font-size: .88rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-user-sub { font-size: .74rem; color: var(--bh-muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bh-user-caret { font-size: .65rem; color: var(--bh-muted); }
.bh-user-menu { min-width: 270px; padding: 8px; }
.bh-user-menu-head { display: flex; gap: 12px; align-items: center; padding: 10px 12px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--bh-line); }
.bh-user-menu-head strong { display: block; color: var(--bh-heading); font-size: .95rem; }
.bh-user-menu-head small { color: var(--bh-muted); }
.bh-text-danger { color: var(--bh-red) !important; }
.bh-text-warning { color: var(--bh-orange) !important; }

/* Guest login/register in top bar */
header.header .bh-login-link { color: var(--bh-heading) !important; font-weight: 600; }
.bh-cta-pill, header.header .bh-cta-pill { border-radius: 999px !important; padding: 9px 22px !important; color: #fff !important; }

/* Guest horizontal nav */
/* Note: Twenty-One's autoCollapse() moves items into "More" when #nav is >= 30px tall,
   so keep link height under 30px and put vertical spacing on the wrapper. */
header.header .bh-guest-nav { padding: 10px 0; border-top: 1px solid var(--bh-line); background: transparent; }
header.header .bh-guest-nav #nav { padding: 0; margin: 0; }
header.header .bh-guest-nav .navbar-nav > li > a {
    display: inline-flex; align-items: center; padding: 3px 16px !important; line-height: 22px; color: var(--bh-heading) !important;
    font-weight: 500; font-size: .95rem; position: relative;
}
header.header .bh-guest-nav .navbar-nav > li > a::after { transition: transform .2s; }
header.header .bh-guest-nav .navbar-nav > li > a:hover { color: var(--bh-blue) !important; }
header.header .bh-guest-nav .navbar-nav > li > a:not(.dropdown-toggle)::before {
    content: ""; position: absolute; left: 16px; right: 16px; bottom: -8px; height: 2px; border-radius: 2px;
    background: var(--bh-blue); transform: scaleX(0); transition: transform .25s var(--bh-ease);
}
header.header .bh-guest-nav .navbar-nav > li > a:hover::before { transform: scaleX(1); }
@media (max-width: 1199.98px) {
    header.header .bh-guest-nav .navbar-collapse { padding: 12px 0 16px; }
    header.header .bh-guest-nav .navbar-nav > li > a { padding: 10px 6px !important; }
}

/* Dropdown menus */
body.bh-body .dropdown-menu {
    border: 1px solid var(--bh-line); border-radius: 14px; padding: 8px;
    background: var(--bh-surface); box-shadow: var(--bh-shadow-lg);
    animation: bh-drop .18s var(--bh-ease);
}
@keyframes bh-drop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
body.bh-body .dropdown-item, body.bh-body .dropdown-menu li.dropdown-item > a {
    border-radius: 9px; padding: 8px 12px; color: var(--bh-text) !important; font-size: .92rem;
}
body.bh-body .dropdown-menu li.dropdown-item { padding: 0; background: transparent; }
body.bh-body .dropdown-item i { color: var(--bh-muted); margin-right: 6px; }
body.bh-body .dropdown-item:hover, body.bh-body .dropdown-item:focus,
body.bh-body .dropdown-menu li.dropdown-item > a:hover { background: var(--bh-sky-100); color: var(--bh-blue) !important; }
body.bh-body .dropdown-item:hover i { color: var(--bh-blue); }
body.bh-body .dropdown-divider { border-color: var(--bh-line); margin: 6px 0; }

/* Notifications popover */
body.bh-body .popover {
    border: 1px solid var(--bh-line); border-radius: 16px; box-shadow: var(--bh-shadow-lg);
    background: var(--bh-surface); font-family: var(--bh-font-body); max-width: 360px;
}
body.bh-body .popover .arrow::after { border-bottom-color: var(--bh-surface); }
body.bh-body .popover-body { color: var(--bh-text-2); padding: 8px; }
body.bh-body .popover-user-notifications ul li, body.bh-body .client-alerts li { border-color: var(--bh-line); }
body.bh-body .client-alerts { list-style: none; margin: 0; padding: 0; }
body.bh-body .client-alerts li a {
    display: flex; gap: 12px; padding: 10px; border-radius: 10px; color: var(--bh-text-2) !important; font-size: .88rem;
}
body.bh-body .client-alerts li a:hover { background: var(--bh-sky-50); }
body.bh-body .client-alerts li a i { margin-top: 3px; color: var(--bh-blue); }
body.bh-body .client-alerts li a i.fa-exclamation-circle { color: var(--bh-red); }
body.bh-body .client-alerts li a i.fa-exclamation-triangle { color: var(--bh-orange); }
body.bh-body .client-alerts li.none { padding: 16px; text-align: center; color: var(--bh-muted); }

/* --------------------------------------------------------------------------
   5. Page head, breadcrumb and main container
   -------------------------------------------------------------------------- */
.bh-container, .container.bh-container { width: 100%; max-width: 1480px; margin: 0 auto; padding: 0 28px; }
@media (max-width: 575.98px) { .bh-container, .container.bh-container { padding: 0 14px; } }

.bh-pagehead {
    position: relative; padding: 30px 0 26px;
    background:
        radial-gradient(80% 140% at 100% 0%, rgba(86, 153, 218, .16) 0%, rgba(86, 153, 218, 0) 60%),
        linear-gradient(180deg, var(--bh-surface) 0%, var(--bh-bg) 100%);
    border-bottom: 1px solid var(--bh-line);
}
.bh-guest .bh-pagehead { padding: 38px 0 32px; }
body.bh-body .bh-pagehead-title { font-size: clamp(1.45rem, 1.1rem + 1.2vw, 2rem); font-weight: 700; margin: 4px 0 0; }
.bh-pagehead-sub { margin: 6px 0 0; color: var(--bh-muted); }
body.bh-body .master-breadcrumb { background: transparent; padding: 0; border: 0; margin: 0; }
body.bh-body .master-breadcrumb .breadcrumb { background: transparent; padding: 0; margin: 0; font-size: .84rem; }
body.bh-body .breadcrumb-item a { color: var(--bh-muted); }
body.bh-body .breadcrumb-item a:hover { color: var(--bh-blue); }
body.bh-body .breadcrumb-item.active { color: var(--bh-blue); font-weight: 600; }
body.bh-body .breadcrumb-item + .breadcrumb-item::before { content: "\203A"; color: var(--bh-muted); }

body.bh-body #main-body { padding: 28px 0 56px; background: transparent; outline: none; }
body.bh-tpl-clientareahome #main-body { padding-top: 24px; }
body.bh-tpl-homepage #main-body { padding-top: 8px; }

/* --------------------------------------------------------------------------
   6. Core components
   -------------------------------------------------------------------------- */
/* Cards */
body.bh-body .card,
body.bh-body .primary-content .card,
body.bh-body .mc-promo-manage, body.bh-body .mc-promo-login {
    background: var(--bh-surface); border: 1px solid var(--bh-line); border-radius: var(--bh-radius);
    box-shadow: var(--bh-shadow); color: var(--bh-text-2);
}
body.bh-body .card { overflow: visible; }
body.bh-body .card-header {
    background: transparent; border-bottom: 1px solid var(--bh-line); padding: 16px 20px;
}
body.bh-body .card-header:first-child { border-radius: var(--bh-radius) var(--bh-radius) 0 0; }
body.bh-body .card-footer { background: var(--bh-surface-2); border-top: 1px solid var(--bh-line); padding: 12px 20px; }
body.bh-body .card-footer:last-child { border-radius: 0 0 var(--bh-radius) var(--bh-radius); }
body.bh-body .card-footer:empty { display: none; }
body.bh-body .card-title, body.bh-body .primary-content .card-title {
    font-family: var(--bh-font-head); font-weight: 600; font-size: 1.05rem; color: var(--bh-heading);
}
body.bh-body .primary-content .card-body { padding: 22px; }
body.bh-body .bg-white { background-color: var(--bh-surface) !important; }
body.bh-body .bg-light { background-color: var(--bh-surface-2) !important; }
body.bh-body .border, body.bh-body .border-top, body.bh-body .border-bottom { border-color: var(--bh-line) !important; }

/* Card accent colours (home panels / sidebars) */
body.bh-body [class*="card-accent-"] { border-top: 1px solid var(--bh-line); }
body.bh-body .card[class*="card-accent-"] { position: relative; }
body.bh-body .card[class*="card-accent-"]::before {
    content: ""; position: absolute; top: -1px; left: 20px; right: 20px; height: 3px; border-radius: 0 0 4px 4px;
    background: var(--bh-accent, var(--bh-blue));
}
.card-accent-blue, .card-accent-midnight-blue, .card-accent-brand-xovinow-blue { --bh-accent: #2577C9; }
.card-accent-green, .card-accent-emerald { --bh-accent: #00875A; }
.card-accent-red, .card-accent-pomegranate { --bh-accent: #D64545; }
.card-accent-gold, .card-accent-sun-flower { --bh-accent: #F5B301; }
.card-accent-orange, .card-accent-brand-cpanel-orange { --bh-accent: #E8890C; }
.card-accent-purple, .card-accent-amethyst, .card-accent-magenta, .card-accent-pink { --bh-accent: #6E4BD8; }
.card-accent-teal, .card-accent-turquoise { --bh-accent: #0E9F9A; }
.card-accent-lime { --bh-accent: #7CB342; }
.card-accent-silver, .card-accent-asbestos, .card-accent-wet-asphalt { --bh-accent: #6B7C93; }

/* Contextual sidebar (WHMCS primary/secondary sidebars) */
body.bh-body .sidebar .card-sidebar, body.bh-body .sidebar .card { margin-bottom: 18px !important; overflow: hidden; }
body.bh-body .sidebar .card-header { padding: 14px 18px; background: var(--bh-surface-2); }
body.bh-body .sidebar .card-title { font-size: .95rem; display: flex; align-items: center; gap: 8px; }
body.bh-body .sidebar .card-title > i:first-child { color: var(--bh-blue); }
body.bh-body .sidebar .card-minimise { margin-left: auto; color: var(--bh-muted); cursor: pointer; transition: transform .25s; }
body.bh-body .sidebar .card-minimise.minimised { transform: rotate(180deg); }
body.bh-body .sidebar .list-group { font-size: .92rem; }
body.bh-body .sidebar .list-group-item {
    padding: 10px 18px; border-color: var(--bh-line); background: transparent; color: var(--bh-text-2);
    transition: background .2s, color .2s, padding .2s;
}
body.bh-body .sidebar .list-group-item-action:hover { background: var(--bh-sky-50); color: var(--bh-blue); padding-left: 22px; }
body.bh-body .sidebar .list-group-item.active, body.bh-body .sidebar .list-group-item.active:hover, body.bh-body .sidebar .list-group-item.active:focus {
    background: var(--bh-sky-100); border-color: var(--bh-line); color: var(--bh-blue); font-weight: 600;
    box-shadow: inset 3px 0 0 var(--bh-blue);
}
body.bh-body .sidebar .sidebar-menu-item-icon { color: var(--bh-muted); width: 18px; text-align: center; }
body.bh-body .sidebar .list-group-item.active .sidebar-menu-item-icon, body.bh-body .sidebar .list-group-item:hover .sidebar-menu-item-icon { color: var(--bh-blue); }
body.bh-body .sidebar .list-group-item .badge {
    width: auto; min-width: 26px; padding: 3px 8px; border-radius: 999px;
    background: var(--bh-sky-100); color: var(--bh-blue); font-weight: 700;
}
body.bh-body .sidebar .list-group-item.active .badge { background: var(--bh-blue); color: #fff; }
body.bh-body .sidebar .list-group-item > i.far.fa-circle { color: var(--bh-muted); }
@media (min-width: 992px) {
    body.bh-app .bh-context .sidebar { position: relative; }
}

/* List groups */
body.bh-body .list-group-item { background: var(--bh-surface); border-color: var(--bh-line); color: var(--bh-text-2); }
body.bh-body .list-group-item-action:hover, body.bh-body .list-group-item-action:focus { background: var(--bh-sky-50); color: var(--bh-blue); }
body.bh-body .list-group-item.active { background: var(--bh-blue); border-color: var(--bh-blue); color: #fff; }

/* Buttons */
body.bh-body .btn {
    border-radius: 11px; font-weight: 600; font-size: .92rem; padding: .55rem 1.1rem;
    transition: transform .15s var(--bh-ease), box-shadow .2s, background .2s, border-color .2s, color .2s;
    position: relative; overflow: hidden;
}
body.bh-body .btn:active { transform: translateY(1px); }
body.bh-body .btn-sm, body.bh-body .btn-group-sm > .btn { padding: .35rem .8rem; font-size: .82rem; border-radius: 9px; }
body.bh-body .btn-xs { padding: .2rem .6rem; font-size: .76rem; border-radius: 8px; }
body.bh-body .btn-lg { padding: .8rem 1.5rem; font-size: 1rem; border-radius: 13px; }
body.bh-body .btn-primary, body.bh-body .btn-info {
    background: var(--bh-blue); border-color: var(--bh-blue); color: #fff;
    box-shadow: 0 6px 16px rgba(37, 119, 201, .25);
}
body.bh-body .btn-primary:hover, body.bh-body .btn-primary:focus, body.bh-body .btn-info:hover {
    background: var(--bh-blue-600); border-color: var(--bh-blue-600); color: #fff;
    box-shadow: 0 10px 22px rgba(37, 119, 201, .35); transform: translateY(-1px);
}
body.bh-body .btn-primary:not(:disabled):not(.disabled):active, body.bh-body .btn-primary:not(:disabled):not(.disabled).active {
    background: var(--bh-blue-700); border-color: var(--bh-blue-700);
}
body.bh-body .btn-outline-primary { color: var(--bh-blue); border-color: var(--bh-blue); background: transparent; }
body.bh-body .btn-outline-primary:hover { background: var(--bh-blue); color: #fff; }
body.bh-body .btn-success { background: var(--bh-green); border-color: var(--bh-green); color: #fff; }
body.bh-body .btn-success:hover { background: #00704a; border-color: #00704a; box-shadow: 0 10px 22px rgba(0, 135, 90, .28); }
body.bh-body .btn-danger { background: var(--bh-red); border-color: var(--bh-red); }
body.bh-body .btn-warning { background: var(--bh-star); border-color: var(--bh-star); color: var(--bh-navy); }
body.bh-body .btn-default, body.bh-body .btn-secondary, body.bh-body .btn-light {
    background: var(--bh-surface); border: 1px solid var(--bh-line); color: var(--bh-text);
}
body.bh-body .btn-default:hover, body.bh-body .btn-secondary:hover, body.bh-body .btn-light:hover {
    border-color: var(--bh-sky); color: var(--bh-blue); background: var(--bh-sky-50);
}
body.bh-body .btn-link { color: var(--bh-blue); box-shadow: none; }
body.bh-body .btn:focus, body.bh-body .btn.focus { box-shadow: var(--bh-ring); }
body.bh-body .btn-group > .btn { border-radius: 0; }
body.bh-body .btn-group > .btn:first-child { border-radius: 11px 0 0 11px; }
body.bh-body .btn-group > .btn:last-child { border-radius: 0 11px 11px 0; }
body.bh-body .btn-group > .btn:only-child { border-radius: 11px; }
.bh-ripple {
    position: absolute; border-radius: 50%; transform: scale(0); pointer-events: none;
    background: rgba(255, 255, 255, .45); animation: bh-ripple .6s linear;
}
.btn-default .bh-ripple, .btn-light .bh-ripple { background: rgba(37, 119, 201, .18); }
@keyframes bh-ripple { to { transform: scale(3.2); opacity: 0; } }

.bh-btn-wa { background: var(--bh-wa) !important; border-color: var(--bh-wa) !important; color: #fff !important; border-radius: 999px !important; box-shadow: 0 10px 24px rgba(37, 211, 102, .3); }
.bh-btn-wa:hover { background: var(--bh-wa-dark) !important; }
.bh-btn-light { background: #fff !important; color: var(--bh-navy) !important; border-radius: 999px !important; border: 0 !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .15); }
.bh-btn-light:hover { transform: translateY(-2px); }
.bh-btn-ghost { background: rgba(255, 255, 255, .12) !important; color: #fff !important; border: 1px solid rgba(255, 255, 255, .35) !important; border-radius: 999px !important; }
.bh-btn-ghost:hover { background: rgba(255, 255, 255, .22) !important; }
.bh-link-btn { background: none; border: 0; color: var(--bh-blue); font-weight: 600; font-size: .88rem; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; }

/* Forms */
body.bh-body .form-control, body.bh-body .custom-select, body.bh-body select.form-control {
    border: 1px solid var(--bh-line); border-radius: 11px; background-color: var(--bh-surface);
    color: var(--bh-text); min-height: 44px; padding: .5rem .9rem; font-size: .95rem;
    transition: border-color .2s, box-shadow .2s;
}
body.bh-body textarea.form-control { min-height: 110px; }
body.bh-body .form-control:focus, body.bh-body .custom-select:focus {
    border-color: var(--bh-blue); box-shadow: var(--bh-ring); background-color: var(--bh-surface); color: var(--bh-text);
}
body.bh-body .form-control::placeholder { color: #9AAAC0; }
body.bh-body .form-control:disabled, body.bh-body .form-control[readonly] { background: var(--bh-surface-3); }
body.bh-body label, body.bh-body .form-control-label, body.bh-body .col-form-label { font-weight: 600; color: var(--bh-heading); font-size: .9rem; }
body.bh-body .input-group-text { background: var(--bh-surface-2); border: 1px solid var(--bh-line); color: var(--bh-muted); border-radius: 11px; }
body.bh-body .input-group > .form-control:not(:first-child), body.bh-body .input-group > .input-group-prepend + .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body.bh-body .input-group > .form-control:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.bh-body .input-group-prepend .input-group-text, body.bh-body .input-group-prepend .btn { border-top-right-radius: 0; border-bottom-right-radius: 0; }
body.bh-body .input-group-append .input-group-text, body.bh-body .input-group-append .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; }
body.bh-body .input-group-merge:focus-within .input-group-text { border-color: var(--bh-blue); color: var(--bh-blue); }
body.bh-body .custom-control-input:checked ~ .custom-control-label::before { background: var(--bh-blue); border-color: var(--bh-blue); }
body.bh-body .form-check-input, body.bh-body input[type="checkbox"], body.bh-body input[type="radio"] { accent-color: var(--bh-blue); }
body.bh-body .field-help-text, body.bh-body .form-text { color: var(--bh-muted); }
body.bh-body .is-invalid, body.bh-body .has-error .form-control { border-color: var(--bh-red) !important; }
body.bh-body .bootstrap-switch { border-radius: 999px; border-color: var(--bh-line); }
body.bh-body .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-primary,
body.bh-body .bootstrap-switch .bootstrap-switch-handle-on.bootstrap-switch-success { background: var(--bh-blue); }
body.bh-body .icheckbox_square-blue.checked, body.bh-body .iradio_square-blue.checked { filter: hue-rotate(-6deg) saturate(1.1); }

/* Tables & DataTables */
body.bh-body .table { color: var(--bh-text-2); margin-bottom: 0; }
body.bh-body .table th, body.bh-body .table td { border-color: var(--bh-line); vertical-align: middle; padding: .85rem 1rem; }
body.bh-body .table thead th {
    border-bottom: 1px solid var(--bh-line); border-top: 0; background: var(--bh-surface-2);
    color: var(--bh-muted); text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; font-weight: 700;
}
body.bh-body .table-striped tbody tr:nth-of-type(odd) { background: var(--bh-surface-2); }
body.bh-body .table-hover tbody tr:hover, body.bh-body .table-list tbody tr:hover { background: var(--bh-sky-50); }
body.bh-body .table-container {
    background: var(--bh-surface); border: 1px solid var(--bh-line); border-radius: var(--bh-radius);
    box-shadow: var(--bh-shadow); padding: 14px; overflow-x: auto;
}
body.bh-body table.table-list { border-radius: 12px; overflow: hidden; }
body.bh-body table.table-list thead th { border: 0 !important; }
body.bh-body table.table-list tbody td { border-top: 1px solid var(--bh-line); }
body.bh-body table.table-list tbody tr { cursor: pointer; transition: background .15s; }
body.bh-body table.table-list tbody tr td:first-child { font-weight: 600; color: var(--bh-heading); }
body.bh-body .dataTables_wrapper .dataTables_filter input,
body.bh-body .dataTables_wrapper .dataTables_length select {
    border: 1px solid var(--bh-line); border-radius: 10px; padding: 6px 12px; background: var(--bh-surface); color: var(--bh-text);
}
body.bh-body .dataTables_wrapper .dataTables_filter input:focus { border-color: var(--bh-blue); box-shadow: var(--bh-ring); outline: 0; }
body.bh-body .dataTables_wrapper .dataTables_info { color: var(--bh-muted); font-size: .85rem; }
body.bh-body .view-filter-btns .list-group-item, body.bh-body .view-filter-btns a { border-radius: 999px; }

/* Pagination */
body.bh-body .pagination { gap: 6px; flex-wrap: wrap; }
body.bh-body .page-link {
    border-radius: 10px !important; border: 1px solid var(--bh-line); color: var(--bh-text-2);
    background: var(--bh-surface); min-width: 38px; text-align: center; font-weight: 600;
}
body.bh-body .page-link:hover { background: var(--bh-sky-50); color: var(--bh-blue); border-color: var(--bh-sky); }
body.bh-body .page-item.active .page-link { background: var(--bh-blue); border-color: var(--bh-blue); color: #fff; box-shadow: 0 6px 14px rgba(37, 119, 201, .3); }
body.bh-body .page-item.disabled .page-link { background: var(--bh-surface-2); color: var(--bh-muted); }

/* Status labels & badges */
body.bh-body .label, body.bh-body .label.status {
    display: inline-flex; align-items: center; gap: 6px; padding: .32em .8em; border-radius: 999px;
    font-size: .74rem; font-weight: 700; letter-spacing: .02em; line-height: 1.3; text-transform: none;
}
body.bh-body .label.status::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .85;
}
body.bh-body .status-active, body.bh-body .status-open, body.bh-body .status-completed, body.bh-body .status-paid,
body.bh-body .status-accepted, body.bh-body .status-delivered { background: #E3F6EE !important; color: #00704a !important; }
body.bh-body .status-pending, body.bh-body .status-pending-transfer, body.bh-body .status-pending-registration,
body.bh-body .status-payment-pending, body.bh-body .status-inprogress, body.bh-body .status-onhold, body.bh-body .status-grace { background: #FFF5DA !important; color: #9a6b00 !important; }
body.bh-body .status-suspended, body.bh-body .status-redemption, body.bh-body .status-customer-reply { background: #FFEBD9 !important; color: #b15c00 !important; }
body.bh-body .status-unpaid, body.bh-body .status-fraud, body.bh-body .status-dead, body.bh-body .status-lost,
body.bh-body .status-collections { background: #FDECEA !important; color: #B3261E !important; }
body.bh-body .status-answered { background: #EAF2FC !important; color: var(--bh-blue-600) !important; }
body.bh-body .status-terminated, body.bh-body .status-cancelled, body.bh-body .status-closed, body.bh-body .status-expired,
body.bh-body .status-transferred-away, body.bh-body .status-refunded { background: #EEF2F6 !important; color: #5B6B80 !important; }
html[data-bh-theme="dark"] body.bh-body .label.status { filter: saturate(1.2) brightness(.92); }
body.bh-body .badge { border-radius: 999px; font-weight: 700; padding: .35em .65em; }
body.bh-body .badge-info, body.bh-body .badge-primary { background: var(--bh-blue); }
body.bh-body .badge-success { background: var(--bh-green); }
body.bh-body .badge-warning { background: var(--bh-star); color: var(--bh-navy); }
body.bh-body .badge-danger { background: var(--bh-red); }

/* Alerts */
body.bh-body .alert {
    border-radius: 14px; border: 1px solid transparent; border-left-width: 4px; padding: 14px 18px; font-size: .94rem;
}
body.bh-body .alert-info { background: #EAF2FC; border-color: #C6DCF4; border-left-color: var(--bh-blue); color: #17528F; }
body.bh-body .alert-success { background: #E7F7F0; border-color: #BFE7D6; border-left-color: var(--bh-green); color: #005a3c; }
body.bh-body .alert-warning { background: #FFF7E3; border-color: #FBE3A6; border-left-color: var(--bh-star); color: #7a5600; }
body.bh-body .alert-danger { background: #FDEDEC; border-color: #F6CAC7; border-left-color: var(--bh-red); color: #98221b; }
html[data-bh-theme="dark"] body.bh-body .alert-info { background: rgba(37, 119, 201, .14); color: #9FC2E7; border-color: rgba(37, 119, 201, .3); border-left-color: var(--bh-sky); }
html[data-bh-theme="dark"] body.bh-body .alert-success { background: rgba(0, 135, 90, .14); color: #7fd8b3; border-color: rgba(0, 135, 90, .3); }
html[data-bh-theme="dark"] body.bh-body .alert-warning { background: rgba(245, 179, 1, .12); color: #f5d27a; border-color: rgba(245, 179, 1, .3); }
html[data-bh-theme="dark"] body.bh-body .alert-danger { background: rgba(214, 69, 69, .14); color: #f1a5a5; border-color: rgba(214, 69, 69, .3); }

/* Tabs & pills */
body.bh-body .nav-tabs { border-bottom: 1px solid var(--bh-line); gap: 4px; }
body.bh-body .nav-tabs .nav-link {
    border: 0; border-bottom: 2px solid transparent; color: var(--bh-muted); font-weight: 600; padding: 12px 16px; border-radius: 0;
}
body.bh-body .nav-tabs .nav-link:hover { color: var(--bh-blue); }
body.bh-body .nav-tabs .nav-link.active, body.bh-body .nav-tabs .nav-item.show .nav-link {
    color: var(--bh-blue); background: transparent; border-bottom-color: var(--bh-blue);
}
body.bh-body .nav-pills .nav-link { border-radius: 999px; color: var(--bh-text-2); font-weight: 600; }
body.bh-body .nav-pills .nav-link.active { background: var(--bh-blue); color: #fff; }
body.bh-body .tab-content { color: var(--bh-text-2); }

/* Modals */
body.bh-body .modal-content {
    border: 0; border-radius: 20px; background: var(--bh-surface); color: var(--bh-text-2);
    box-shadow: 0 30px 80px rgba(7, 22, 41, .35); overflow: hidden;
}
body.bh-body .modal-header { border-bottom: 1px solid var(--bh-line); padding: 18px 22px; }
body.bh-body .modal-header .modal-title { font-family: var(--bh-font-head); font-weight: 600; color: var(--bh-heading); }
body.bh-body .modal-footer { border-top: 1px solid var(--bh-line); background: var(--bh-surface-2); }
body.bh-body .modal-backdrop.show { opacity: .6; background: #071629; }
body.bh-body .close { color: var(--bh-muted); text-shadow: none; opacity: .8; }
body.bh-body .modal-localisation .modal-content { background: var(--bh-grad-deep); color: #fff; }
body.bh-body .modal-localisation .modal-content .h5, body.bh-body .modal-localisation .modal-content h5 { color: #fff; }
body.bh-body .modal-localisation .item-selector .item {
    display: block; padding: 10px 14px; margin-bottom: 8px; border-radius: 10px; color: #E6F0FA !important;
    border: 1px solid rgba(255, 255, 255, .12); transition: all .2s;
}
body.bh-body .modal-localisation .item-selector .item:hover { background: rgba(255, 255, 255, .08); }
body.bh-body .modal-localisation .item-selector .item.active { background: #fff; color: var(--bh-navy) !important; font-weight: 600; }
body.bh-body .modal-localisation .modal-footer { background: rgba(0, 0, 0, .15); border-top-color: rgba(255, 255, 255, .1); }

/* Progress & tooltips */
body.bh-body .progress { height: 10px; border-radius: 999px; background: var(--bh-surface-3); }
body.bh-body .progress-bar { background: var(--bh-grad); border-radius: 999px; }
body.bh-body .tooltip-inner { background: var(--bh-navy); border-radius: 8px; padding: 6px 10px; font-size: .8rem; }

/* Overlay */
body.bh-body #fullpage-overlay { background: rgba(7, 22, 41, .7); backdrop-filter: blur(4px); }

/* --------------------------------------------------------------------------
   7. Dashboard
   -------------------------------------------------------------------------- */
.bh-section { margin-top: 30px; }
.bh-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
body.bh-body .bh-section-head h2 { font-size: 1.25rem; font-weight: 700; margin: 0; }
.bh-section-head-center { flex-direction: column; align-items: center; text-align: center; margin-bottom: 28px; }
body.bh-body .bh-section-head-center h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem); }
.bh-section-head-center p { max-width: 620px; margin: 8px 0 0; color: var(--bh-muted); }
.bh-eyebrow {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px;
    background: var(--bh-sky-100); color: var(--bh-blue); font-weight: 600; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase;
    margin-bottom: 10px;
}
.bh-eyebrow-light { background: rgba(255, 255, 255, .14); color: #fff; }

.bh-welcome {
    position: relative; overflow: hidden; border-radius: var(--bh-radius-lg);
    padding: 34px 36px; margin-bottom: 22px; color: #fff;
    background: var(--bh-grad-deep);
    box-shadow: 0 24px 48px rgba(11, 36, 64, .22);
    display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center;
}
.bh-welcome-pattern {
    position: absolute; inset: 0; pointer-events: none; opacity: .5;
    background:
        radial-gradient(circle at 85% 20%, rgba(86, 153, 218, .55) 0, rgba(86, 153, 218, 0) 40%),
        radial-gradient(circle at 100% 100%, rgba(245, 179, 1, .25) 0, rgba(245, 179, 1, 0) 35%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='2' cy='2' r='1.4' fill='%23ffffff' fill-opacity='.10'/%3E%3C/svg%3E");
}
.bh-welcome-body, .bh-welcome-side { position: relative; }
.bh-welcome-date { display: inline-block; font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; color: #9FC2E7; font-weight: 600; }
body.bh-body .bh-welcome-title { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); font-weight: 700; margin: 6px 0 8px; }
.bh-welcome-sub { color: #C9D7E8; margin: 0 0 20px; max-width: 560px; }
.bh-welcome-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.bh-welcome-side { display: flex; flex-direction: column; gap: 12px; min-width: 260px; }
.bh-balance {
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px;
    padding: 16px 18px; backdrop-filter: blur(6px); display: flex; flex-direction: column; gap: 2px;
}
.bh-balance-label { font-size: .78rem; color: #9FC2E7; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.bh-balance-label i { margin-right: 4px; }
.bh-balance-value { font-family: var(--bh-font-head); font-size: 1.6rem; font-weight: 700; color: #fff; }
.bh-balance-link { color: #fff !important; font-size: .85rem; font-weight: 600; opacity: .85; }
.bh-balance-link:hover { opacity: 1; }
.bh-balance-hint { font-size: .85rem; color: #C9D7E8; line-height: 1.4; }
.bh-balance-alt { background: rgba(37, 211, 102, .1); border-color: rgba(37, 211, 102, .28); }
.bh-balance-alt .bh-balance-label { color: #7BE8A6; }
@media (max-width: 991.98px) {
    .bh-welcome { grid-template-columns: 1fr; padding: 26px 22px; }
    .bh-welcome-side { flex-direction: row; min-width: 0; }
    .bh-welcome-side > * { flex: 1; }
}
@media (max-width: 575.98px) { .bh-welcome-side { flex-direction: column; } }

.bh-billing-alert {
    display: flex; align-items: center; gap: 16px; padding: 16px 20px; margin-bottom: 22px;
    border-radius: var(--bh-radius); background: var(--bh-surface); border: 1px solid #FBE3A6;
    box-shadow: var(--bh-shadow); position: relative; overflow: hidden;
}
.bh-billing-alert::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--bh-star); }
.bh-billing-alert.is-overdue { border-color: #F6CAC7; }
.bh-billing-alert.is-overdue::before { background: var(--bh-red); }
.bh-billing-alert-ico { width: 46px; height: 46px; flex-shrink: 0; border-radius: 13px; display: grid; place-items: center; background: #FFF5DA; color: #b07d00; font-size: 1.2rem; }
.bh-billing-alert.is-overdue .bh-billing-alert-ico { background: #FDECEA; color: var(--bh-red); animation: bh-pulse 2s infinite; }
.bh-billing-alert-body { flex: 1; display: flex; flex-direction: column; }
.bh-billing-alert-body strong { color: var(--bh-heading); font-size: 1rem; }
.bh-billing-alert-body span { color: var(--bh-muted); font-size: .9rem; }
.bh-billing-alert-body b { color: var(--bh-heading); }
.bh-billing-alert-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@keyframes bh-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(214, 69, 69, .35); } 50% { box-shadow: 0 0 0 10px rgba(214, 69, 69, 0); } }
@media (max-width: 767.98px) { .bh-billing-alert { flex-wrap: wrap; } .bh-billing-alert-actions { width: 100%; } .bh-billing-alert-actions .btn { flex: 1; } }

/* Stat tiles */
body.bh-body .tiles.bh-tiles { margin-bottom: 0; }
body.bh-body .bh-tiles .row { margin: 0 -9px; }
body.bh-body .bh-tiles .row > div { padding: 9px; }
body.bh-body .tiles .tile.bh-tile {
    display: flex; flex-direction: column; height: 100%; padding: 20px 20px 18px; border: 1px solid var(--bh-line) !important;
    border-radius: var(--bh-radius); background: var(--bh-surface); box-shadow: var(--bh-shadow);
    position: relative; overflow: hidden; transition: transform .25s var(--bh-ease), box-shadow .25s, border-color .25s;
}
body.bh-body .tiles .tile.bh-tile::after {
    content: ""; position: absolute; right: -40px; top: -40px; width: 140px; height: 140px; border-radius: 50%;
    background: var(--bh-tile-soft); opacity: .7; transition: transform .4s var(--bh-ease);
}
body.bh-body .tiles .tile.bh-tile:hover { transform: translateY(-4px); box-shadow: var(--bh-shadow-lg); border-color: var(--bh-tile) !important; background: var(--bh-surface); }
body.bh-body .tiles .tile.bh-tile:hover::after { transform: scale(1.25); }
body.bh-body .tiles .tile.bh-tile i { position: static; font-size: 1.15rem; color: #fff; transition: none; }
body.bh-body .tiles .tile.bh-tile:hover i { font-size: 1.15rem; color: #fff; }
.bh-tile-ico {
    width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; position: relative; z-index: 1;
    background: var(--bh-tile); box-shadow: 0 8px 18px var(--bh-tile-shadow);
}
body.bh-body .tiles .tile.bh-tile .stat {
    margin-top: 18px; font-family: var(--bh-font-head); font-size: 2.4rem; font-weight: 700; line-height: 1;
    color: var(--bh-heading); position: relative; z-index: 1;
}
body.bh-body .tiles .tile.bh-tile .title {
    margin-top: 6px; font-size: .78rem; letter-spacing: .07em; font-weight: 700; color: var(--bh-muted); position: relative; z-index: 1;
}
.bh-tile-more { margin-top: 14px; font-size: .84rem; font-weight: 600; color: var(--bh-tile); position: relative; z-index: 1; }
.bh-tile-more i { font-size: .72rem; transition: transform .2s; }
.bh-tile:hover .bh-tile-more i { transform: translateX(4px); }
body.bh-body .tiles .tile.bh-tile .bh-tile-more i { color: var(--bh-tile); font-size: .72rem; }
.bh-tile-blue { --bh-tile: #2577C9; --bh-tile-soft: rgba(37, 119, 201, .10); --bh-tile-shadow: rgba(37, 119, 201, .35); }
.bh-tile-green { --bh-tile: #00875A; --bh-tile-soft: rgba(0, 135, 90, .10); --bh-tile-shadow: rgba(0, 135, 90, .3); }
.bh-tile-violet { --bh-tile: #6E4BD8; --bh-tile-soft: rgba(110, 75, 216, .10); --bh-tile-shadow: rgba(110, 75, 216, .3); }
.bh-tile-gold { --bh-tile: #D99A00; --bh-tile-soft: rgba(245, 179, 1, .14); --bh-tile-shadow: rgba(245, 179, 1, .35); }
.bh-tile.has-attention .bh-tile-ico { animation: bh-bob 2.4s ease-in-out infinite; }
@keyframes bh-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* Quick actions */
.bh-quick { display: grid; grid-template-columns: repeat(8, 1fr); gap: 14px; }
@media (max-width: 1399.98px) { .bh-quick { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 575.98px) { .bh-quick { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.bh-quick-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center;
    padding: 18px 10px; border-radius: var(--bh-radius); background: var(--bh-surface); border: 1px solid var(--bh-line);
    color: var(--bh-heading) !important; font-weight: 600; font-size: .86rem; box-shadow: var(--bh-shadow-sm);
    transition: transform .2s var(--bh-ease), box-shadow .2s, border-color .2s;
}
.bh-quick-item:hover { transform: translateY(-3px); box-shadow: var(--bh-shadow); border-color: var(--bh-sky); }
.bh-quick-ico { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 1.2rem; transition: transform .25s var(--bh-ease); }
.bh-quick-item:hover .bh-quick-ico { transform: scale(1.08) rotate(-4deg); }
.ico-blue { background: rgba(37, 119, 201, .12); color: #2577C9; }
.ico-green { background: rgba(0, 135, 90, .12); color: #00875A; }
.ico-sky { background: rgba(86, 153, 218, .16); color: #3A88D3; }
.ico-gold { background: rgba(245, 179, 1, .16); color: #b07d00; }
.ico-teal { background: rgba(14, 159, 154, .13); color: #0E9F9A; }
.ico-violet { background: rgba(110, 75, 216, .12); color: #6E4BD8; }
.ico-navy { background: rgba(11, 36, 64, .10); color: #0B2440; }
html[data-bh-theme="dark"] .ico-navy { background: rgba(159, 194, 231, .12); color: #9FC2E7; }
.ico-wa { background: rgba(37, 211, 102, .14); color: #1DA851; }

/* Home panels */
.bh-panels { margin-top: 30px; }
body.bh-body .client-home-cards .card { margin-bottom: 20px; }
body.bh-body .client-home-cards .card-header { padding: 16px 20px; }
body.bh-body .client-home-cards .card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.bh-body .client-home-cards .card-title > .float-right { order: 9; margin-left: auto; float: none !important; }
body.bh-body .card-title .badge, body.bh-body .card-title > .badge {
    background: var(--bh-sky-100); color: var(--bh-blue); font-size: .72rem; min-width: 24px; padding: .3em .6em;
}
.bh-panel-ico {
    width: 32px; height: 32px; border-radius: 10px; display: inline-grid; place-items: center;
    background: color-mix(in srgb, var(--bh-accent, #2577C9) 14%, transparent); color: var(--bh-accent, #2577C9); font-size: .9rem;
}
body.bh-body .client-home-cards .card-title .btn { border-radius: 999px; background: var(--bh-sky-50) !important; color: var(--bh-blue) !important; border-color: var(--bh-line); }
body.bh-body .client-home-cards .card-title .btn:hover { background: var(--bh-blue) !important; color: #fff !important; }
body.bh-body .client-home-cards .list-group-item { border-left: 0; border-right: 0; padding: 12px 20px; font-size: .92rem; }
body.bh-body .client-home-cards .list-group-item:first-child { border-top: 0; }
body.bh-body .client-home-cards .list-group-item .label { float: right; }

/* Help grid */
.bh-help-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.bh-help-grid-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 1199.98px) { .bh-help-grid, .bh-help-grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .bh-help-grid, .bh-help-grid-5 { grid-template-columns: 1fr; } }
.bh-help-card {
    display: flex; flex-direction: column; gap: 6px; padding: 22px; border-radius: var(--bh-radius);
    background: var(--bh-surface); border: 1px solid var(--bh-line); box-shadow: var(--bh-shadow-sm);
    color: var(--bh-text-2) !important; transition: all .25s var(--bh-ease);
}
.bh-help-card i {
    width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 8px;
    background: var(--bh-sky-100); color: var(--bh-blue); font-size: 1.1rem; transition: all .25s;
}
.bh-help-card strong { color: var(--bh-heading); font-family: var(--bh-font-head); font-weight: 600; }
.bh-help-card span { font-size: .88rem; color: var(--bh-muted); }
.bh-help-card:hover { transform: translateY(-3px); box-shadow: var(--bh-shadow); border-color: var(--bh-sky); }
.bh-help-card:hover i { background: var(--bh-grad); color: #fff; }

/* --------------------------------------------------------------------------
   8. Guest homepage
   -------------------------------------------------------------------------- */
.bh-hero {
    position: relative; overflow: hidden; padding: 64px 0 46px; color: #fff;
    background: var(--bh-grad-deep);
}
.bh-hero-glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(50% 60% at 15% 10%, rgba(86, 153, 218, .45), rgba(86, 153, 218, 0) 70%),
        radial-gradient(40% 50% at 90% 90%, rgba(245, 179, 1, .2), rgba(245, 179, 1, 0) 70%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cpath d='M40 0H0v40' fill='none' stroke='%23ffffff' stroke-opacity='.05'/%3E%3C/svg%3E");
}
.bh-hero-copy { max-width: 820px; margin: 0 auto; }
body.bh-body .bh-hero-title { color: #fff; font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem); font-weight: 800; line-height: 1.1; margin: 14px 0; }
.bh-hero-title span { background: linear-gradient(90deg, #9FC2E7, #fff 60%, #F5D277); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bh-hero-sub { color: #C9D7E8; font-size: 1.08rem; max-width: 640px; margin: 0 auto 28px; }
.bh-hero .bh-eyebrow { background: rgba(255, 255, 255, .12); color: #fff; }
.bh-hero-search { max-width: 880px; margin: 0 auto; }
body.bh-body .bh-hero .home-domain-search { background: transparent !important; }
body.bh-body .bh-hero .home-domain-search .container { padding: 0; max-width: none; }
body.bh-body .bh-hero .home-domain-search .p-5 {
    padding: 26px !important; border-radius: 22px; background: rgba(255, 255, 255, .98);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .25);
}
html[data-bh-theme="dark"] body.bh-body .bh-hero .home-domain-search .p-5 { background: var(--bh-surface); }
body.bh-body .bh-hero .home-domain-search h2 { font-size: 1.15rem; margin-bottom: 14px !important; color: var(--bh-heading); text-align: left !important; }
body.bh-body .bh-hero .home-domain-search .input-group {
    border: 2px solid var(--bh-line); border-radius: 16px; overflow: hidden; background: var(--bh-surface);
    transition: border-color .2s, box-shadow .2s; box-shadow: none;
}
body.bh-body .bh-hero .home-domain-search .input-group:focus-within { border-color: var(--bh-blue); box-shadow: var(--bh-ring); }
body.bh-body .bh-hero .home-domain-search .form-control,
body.bh-body .bh-hero .home-domain-search textarea { border: 0 !important; box-shadow: none !important; min-height: 58px; font-size: 1.05rem; padding-left: 20px; background: transparent; }
body.bh-body .bh-hero .home-domain-search .input-group-append .btn { border-radius: 0; height: 100%; min-height: 58px; padding: 0 26px; box-shadow: none; }
body.bh-body .bh-hero .home-domain-search .input-group-append .btn:last-child { border-radius: 0 13px 13px 0; }
body.bh-body .bh-hero .home-domain-search .tld-logos { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
body.bh-body .bh-hero .home-domain-search .tld-logos li {
    display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
    background: var(--bh-sky-50); border: 1px solid var(--bh-line); color: var(--bh-heading); font-weight: 600; font-size: .88rem;
}
body.bh-body .bh-hero .home-domain-search .tld-logos img { height: 20px; }
body.bh-body .bh-hero .home-domain-search .btn-link { margin-top: 10px; }
.bh-trust { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; color: #C9D7E8; font-size: .92rem; }
.bh-trust i { color: var(--bh-star); margin-right: 6px; }

.bh-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.bh-product-card {
    position: relative; display: flex; flex-direction: column; gap: 8px; padding: 26px; border-radius: var(--bh-radius-lg);
    background: var(--bh-surface); border: 1px solid var(--bh-line); box-shadow: var(--bh-shadow);
    color: var(--bh-text-2) !important; overflow: hidden; transition: all .3s var(--bh-ease);
}
.bh-product-card::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--bh-grad);
    transform: scaleX(0); transform-origin: left; transition: transform .35s var(--bh-ease);
}
.bh-product-card:hover { transform: translateY(-5px); box-shadow: var(--bh-shadow-lg); border-color: var(--bh-sky); }
.bh-product-card:hover::after { transform: scaleX(1); }
body.bh-body .bh-product-card h3 { font-size: 1.15rem; font-weight: 700; margin: 6px 0 0; }
.bh-product-card p { margin: 0; color: var(--bh-muted); font-size: .92rem; flex: 1; }
.bh-product-ico { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--bh-sky-100); color: var(--bh-blue); font-size: 1.3rem; }
.bh-product-cta { margin-top: 12px; font-weight: 600; color: var(--bh-blue); }
.bh-product-cta i { font-size: .8rem; transition: transform .2s; }
.bh-product-card:hover .bh-product-cta i { transform: translateX(5px); }
.bh-product-card-accent { background: var(--bh-grad-deep); border-color: transparent; color: #C9D7E8 !important; }
body.bh-body .bh-product-card-accent h3 { color: #fff; }
.bh-product-card-accent p { color: #C9D7E8; }
.bh-product-card-accent .bh-product-ico { background: rgba(255, 255, 255, .14); color: #fff; }
.bh-product-card-accent .bh-product-cta { color: #F5D277; }

.bh-account-band {
    display: grid; grid-template-columns: 1.1fr 1fr; gap: 30px; align-items: center; padding: 38px;
    border-radius: var(--bh-radius-lg); background: var(--bh-grad-deep); color: #C9D7E8; position: relative; overflow: hidden;
}
body.bh-body .bh-account-band h2 { color: #fff; font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem); margin: 4px 0 8px; }
.bh-account-band p { margin: 0; }
.bh-account-band-links { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bh-account-band-links a {
    display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: 13px;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); color: #fff !important; font-weight: 600; font-size: .92rem;
    transition: all .2s;
}
.bh-account-band-links a:hover { background: #fff; color: var(--bh-navy) !important; transform: translateY(-2px); }
.bh-account-band-links a i { color: #9FC2E7; }
.bh-account-band-links a:hover i { color: var(--bh-blue); }
@media (max-width: 991.98px) { .bh-account-band { grid-template-columns: 1fr; padding: 26px; } }
@media (max-width: 479.98px) { .bh-account-band-links { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------------
   9. Authentication (login + other auth pages)
   -------------------------------------------------------------------------- */
body.bh-tpl-login #main-body { padding: 36px 0 60px; }
.bh-auth {
    display: grid; grid-template-columns: 1.05fr 1fr; max-width: 1080px; margin: 0 auto;
    background: var(--bh-surface); border-radius: 26px; overflow: hidden;
    border: 1px solid var(--bh-line); box-shadow: var(--bh-shadow-lg);
}
.bh-auth-brand { position: relative; overflow: hidden; padding: 46px 44px; background: var(--bh-grad-deep); color: #C9D7E8; }
.bh-auth-brand-glow {
    position: absolute; inset: 0; pointer-events: none;
    background:
        radial-gradient(60% 50% at 0% 0%, rgba(86, 153, 218, .45), rgba(86, 153, 218, 0) 70%),
        radial-gradient(45% 40% at 100% 100%, rgba(245, 179, 1, .14), rgba(245, 179, 1, 0) 70%);
}
.bh-auth-brand-inner { position: relative; }
body.bh-body .bh-auth-title { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); font-weight: 700; margin: 8px 0 10px; }
.bh-auth-lead { color: #C9D7E8; margin-bottom: 26px; }
.bh-auth-features { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 14px; }
.bh-auth-features li { display: flex; gap: 14px; align-items: flex-start; font-size: .9rem; line-height: 1.4; }
.bh-auth-features li > span {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0; display: grid; place-items: center;
    background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .14); color: #fff;
}
.bh-auth-features li strong { display: block; color: #fff; font-weight: 600; margin-bottom: 2px; }
.bh-auth-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.bh-auth-badges span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .14); font-size: .78rem; color: #E6F0FA; }
.bh-auth-badges i { color: var(--bh-star); margin-right: 4px; }
.bh-auth-form { padding: 46px 48px; display: flex; flex-direction: column; justify-content: center; }
.bh-auth-head { margin-bottom: 24px; }
.bh-auth-ico { width: 50px; height: 50px; border-radius: 15px; display: grid; place-items: center; background: var(--bh-sky-100); color: var(--bh-blue); font-size: 1.15rem; margin-bottom: 14px; }
body.bh-body .bh-auth-head h1 { font-weight: 700; margin-bottom: 4px; }
.bh-forgot { color: var(--bh-blue) !important; font-weight: 600; }
.bh-input .form-control { min-height: 50px; }
.bh-capslock { display: block; margin-top: 6px; color: var(--bh-orange); font-weight: 600; }
.bh-check { display: inline-flex; align-items: center; gap: 8px; font-weight: 500 !important; color: var(--bh-text-2) !important; cursor: pointer; }
.bh-check .form-check-input { position: static; margin: 0; width: 17px; height: 17px; }
.bh-btn-submit { min-height: 52px; border-radius: 14px !important; background: var(--bh-grad) !important; border: 0 !important; }
.bh-auth-social .providerPreLinking { margin-top: 22px; position: relative; }
.bh-auth-social .providerPreLinking::before {
    content: "or continue with"; display: block; text-align: center; color: var(--bh-muted); font-size: .8rem; margin-bottom: 14px;
    background: linear-gradient(var(--bh-line), var(--bh-line)) left center / 30% 1px no-repeat, linear-gradient(var(--bh-line), var(--bh-line)) right center / 30% 1px no-repeat;
}
.bh-auth-social .social-signin-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.bh-auth-foot { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--bh-line); text-align: center; color: var(--bh-muted); font-size: .92rem; }
.bh-auth-foot a { font-weight: 700; margin-left: 4px; }
.bh-auth-help { margin-top: 12px; text-align: center; font-size: .85rem; color: var(--bh-muted); }
.bh-auth-help i { color: var(--bh-wa); margin-right: 4px; }
@media (max-width: 991.98px) {
    .bh-auth { grid-template-columns: 1fr; }
    .bh-auth-brand { padding: 30px 26px; }
    .bh-auth-features { grid-template-columns: 1fr 1fr; }
    .bh-auth-form { padding: 32px 26px; }
}
@media (max-width: 575.98px) {
    .bh-auth-features, .bh-auth-badges { display: none; }
    .bh-auth { border-radius: 20px; }
}

/* Other auth-style single-card pages */
body.bh-body .primary-content .card.mw-540,
body.bh-body .primary-content .card.mw-750 { border-radius: 22px; box-shadow: var(--bh-shadow-lg); }
body.bh-body .primary-content .card.mw-540 .card-body,
body.bh-body .primary-content .card.mw-750 .card-body { padding: 36px 40px; }
body.bh-tpl-password-reset-container .card, body.bh-tpl-clientregister .card { border-top: 4px solid var(--bh-blue); }
body.bh-tpl-clientregister .sub-heading span, body.bh-body .sub-heading span { background: var(--bh-surface); color: var(--bh-blue); font-weight: 600; }
body.bh-body .sub-heading { border-color: var(--bh-line); }

/* --------------------------------------------------------------------------
   10. Support tickets — conversation view
   -------------------------------------------------------------------------- */
body.bh-body .ticket-reply {
    border: 1px solid var(--bh-line); border-radius: 18px 18px 18px 6px; background: var(--bh-surface);
    margin-bottom: 18px; box-shadow: var(--bh-shadow-sm); overflow: hidden; max-width: 92%;
}
body.bh-body .ticket-reply.staff {
    margin-left: auto; border-radius: 18px 18px 6px 18px; border-color: #C6DCF4;
    background: linear-gradient(180deg, var(--bh-sky-50), var(--bh-surface));
}
body.bh-body .ticket-reply .posted-by { background: transparent; border-bottom: 1px solid var(--bh-line); padding: 12px 18px; color: var(--bh-muted); font-size: .85rem; }
body.bh-body .ticket-reply .posted-by-name { color: var(--bh-heading); font-weight: 700; }
body.bh-body .ticket-reply.staff .posted-by-name { color: var(--bh-blue); }
body.bh-body .ticket-reply .message { color: var(--bh-text-2); }
body.bh-body .ticket-reply .attachments { background: var(--bh-surface-2); border-top: 1px solid var(--bh-line); }
@media (max-width: 767.98px) { body.bh-body .ticket-reply { max-width: 100%; } }
body.bh-body .ticket-subject { font-family: var(--bh-font-head); color: var(--bh-heading); }
body.bh-body .markdown-editor, body.bh-body .md-editor { border-radius: 12px; border-color: var(--bh-line); }
body.bh-body .kb-article-title, body.bh-body .announcement-single h3 { font-family: var(--bh-font-head); }

/* Knowledgebase / announcements search box on content pages */
body.bh-body .kb-search .form-control, body.bh-body .input-group-lg .form-control { min-height: 54px; }

/* --------------------------------------------------------------------------
   11. Footer, floating actions, command palette, toast
   -------------------------------------------------------------------------- */
body.bh-body .footer.bh-footer { background: transparent; color: var(--bh-text-2); padding: 0; margin: 0; border: 0; }
.bh-guest .bh-footer { background: var(--bh-navy) !important; color: #A9BCD3 !important; padding-bottom: 8px !important; }
.bh-footer-cta { background: var(--bh-grad); padding: 30px 0; margin-bottom: 46px; }
.bh-footer-cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
body.bh-body .bh-footer-cta h3 { color: #fff; margin: 0 0 4px; font-size: 1.4rem; }
.bh-footer-cta p { color: #E6F0FA; margin: 0; }
.bh-footer-cta .bh-btn-wa { padding: .8rem 1.5rem; }
.bh-footer-grid h4 { color: #fff !important; font-size: .95rem; font-weight: 600; margin-bottom: 16px; }
.bh-footer-brand { display: inline-block; margin-bottom: 14px; }
.bh-footer-brand img { max-height: 40px; }
.bh-footer-about { font-size: .9rem; color: #A9BCD3; max-width: 340px; }
.bh-social { list-style: none; padding: 0; margin: 16px 0 0; display: flex; gap: 10px; }
.bh-social a {
    width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: #C9D7E8 !important; transition: all .2s;
}
.bh-social a:hover { background: var(--bh-blue); border-color: var(--bh-blue); color: #fff !important; transform: translateY(-2px); }
.bh-footer-links { list-style: none; padding: 0; margin: 0; }
.bh-footer-links li { margin-bottom: 9px; }
.bh-footer-links a { color: #A9BCD3 !important; font-size: .9rem; transition: color .2s, padding .2s; }
.bh-footer-links a:hover { color: #fff !important; padding-left: 4px; }
.bh-footer-contact { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.bh-footer-contact li { display: flex; gap: 12px; font-size: .9rem; color: #C9D7E8; }
.bh-footer-contact li > i { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, .06); color: #9FC2E7; }
.bh-footer-contact li > i.fa-whatsapp { color: var(--bh-wa); }
.bh-footer-contact span { display: block; font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: #7F98B4; }
.bh-footer-contact a { color: #fff !important; }
.bh-footer-badges { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.bh-footer-badges span { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); font-size: .8rem; color: #C9D7E8; }
.bh-footer-badges i { color: var(--bh-star); margin-right: 4px; }
.bh-footer-badges .bh-pay i { color: #9FC2E7; }
.bh-footer-bottom {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    padding: 18px 0 22px; border-top: 1px solid var(--bh-line); font-size: .85rem; color: var(--bh-muted);
}
.bh-guest .bh-footer-bottom { border-top-color: rgba(255, 255, 255, .08); color: #7F98B4; }
.bh-footer-meta { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0; padding: 0; }
.bh-footer-meta a, .bh-locale-btn { color: var(--bh-muted) !important; }
.bh-guest .bh-footer-meta a, .bh-guest .bh-locale-btn { color: #A9BCD3 !important; }
.bh-footer-meta a:hover { color: var(--bh-blue) !important; }
.bh-locale-btn { background: none; border: 1px solid var(--bh-line); border-radius: 999px; padding: 4px 12px; font-size: .82rem; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.bh-guest .bh-locale-btn { border-color: rgba(255, 255, 255, .15); }
.bh-footer-meta .list-inline-item { margin: 0; }
.bh-footer-meta .list-inline-item a { color: inherit; font-size: 1rem; }
body.bh-app .bh-footer { border-top: 0; }
body.bh-app .bh-footer-bottom { border-top: 1px solid var(--bh-line); }

.bh-fab-wa {
    position: fixed; right: 22px; bottom: 22px; z-index: 1035; height: 56px; min-width: 56px; padding: 0 18px 0 16px;
    display: inline-flex; align-items: center; gap: 10px; border-radius: 999px;
    background: var(--bh-wa); color: #fff !important; font-weight: 600; font-size: .92rem;
    box-shadow: 0 14px 30px rgba(29, 168, 81, .4); transition: transform .25s var(--bh-ease), box-shadow .25s;
}
.bh-fab-wa i { font-size: 1.6rem; }
.bh-fab-wa:hover { transform: translateY(-3px) scale(1.02); box-shadow: 0 18px 36px rgba(29, 168, 81, .5); }
.bh-fab-wa::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid var(--bh-wa);
    animation: bh-ring 2.6s ease-out infinite; pointer-events: none;
}
@keyframes bh-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.35); opacity: 0; } }
@media (max-width: 767.98px) { .bh-fab-wa { padding: 0; width: 56px; justify-content: center; } .bh-fab-label { display: none; } }
body.bh-in-cart .bh-fab-wa { bottom: 90px; }

.bh-totop {
    position: fixed; right: 30px; bottom: 92px; z-index: 1034; width: 42px; height: 42px; border-radius: 12px;
    border: 1px solid var(--bh-line); background: var(--bh-surface); color: var(--bh-blue); box-shadow: var(--bh-shadow);
    display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px);
    transition: all .25s var(--bh-ease);
}
.bh-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.bh-totop:hover { background: var(--bh-blue); color: #fff; }
@media (max-width: 767.98px) { .bh-totop { right: 29px; } }

.bh-palette { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; }
.bh-palette[hidden] { display: none; }
.bh-palette-backdrop { position: absolute; inset: 0; background: rgba(7, 22, 41, .55); backdrop-filter: blur(4px); animation: bh-fade .2s; }
.bh-palette-box {
    position: relative; width: 100%; max-width: 620px; background: var(--bh-surface); border-radius: 20px;
    border: 1px solid var(--bh-line); box-shadow: 0 40px 90px rgba(7, 22, 41, .45); overflow: hidden;
    animation: bh-zoom .22s var(--bh-ease);
}
@keyframes bh-fade { from { opacity: 0; } }
@keyframes bh-zoom { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.bh-palette-input { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--bh-line); }
.bh-palette-input i { color: var(--bh-blue); }
.bh-palette-input input { flex: 1; border: 0; outline: 0; background: transparent; font-size: 1.05rem; color: var(--bh-text); font-family: var(--bh-font-body); }
.bh-palette-list { list-style: none; margin: 0; padding: 8px; max-height: 52vh; overflow-y: auto; }
.bh-palette-group { padding: 10px 12px 4px; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--bh-muted); }
.bh-palette-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; cursor: pointer; color: var(--bh-text); }
.bh-palette-item .bh-pi-ico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--bh-sky-50); color: var(--bh-blue); flex-shrink: 0; }
.bh-palette-item .bh-pi-label { flex: 1; font-weight: 500; }
.bh-palette-item .bh-pi-label mark { background: rgba(245, 179, 1, .3); color: inherit; padding: 0 1px; border-radius: 3px; }
.bh-palette-item .bh-pi-go { color: var(--bh-muted); font-size: .75rem; opacity: 0; }
.bh-palette-item.is-active { background: var(--bh-sky-100); }
.bh-palette-item.is-active .bh-pi-ico { background: var(--bh-blue); color: #fff; }
.bh-palette-item.is-active .bh-pi-go { opacity: 1; }
.bh-palette-empty { padding: 26px; text-align: center; color: var(--bh-muted); }
.bh-palette-foot { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--bh-line); background: var(--bh-surface-2); font-size: .76rem; color: var(--bh-muted); }
.bh-palette-foot kbd { margin-right: 3px; }
@media (max-width: 575.98px) { .bh-palette { padding-top: 70px; } .bh-palette-foot { display: none; } }

.bh-toast {
    position: fixed; left: 50%; bottom: 26px; z-index: 2100; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
    background: var(--bh-navy); color: #fff; padding: 12px 20px; border-radius: 12px; font-size: .9rem; font-weight: 500;
    box-shadow: var(--bh-shadow-lg); transition: all .3s var(--bh-ease);
}
.bh-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   12. Order forms (standard_cart) — brand alignment
   -------------------------------------------------------------------------- */
body.bh-body #order-standard_cart .header-lined h1 { font-family: var(--bh-font-head); color: var(--bh-heading); }
body.bh-body #order-standard_cart .btn-primary,
body.bh-body #order-standard_cart .btn-checkout,
body.bh-body #order-standard_cart .btn-success { background: var(--bh-blue); border-color: var(--bh-blue); color: #fff; border-radius: 12px; }
body.bh-body #order-standard_cart .btn-checkout { background: var(--bh-grad); border: 0; box-shadow: 0 10px 24px rgba(37, 119, 201, .35); }
body.bh-body #order-standard_cart .products .product {
    border: 1px solid var(--bh-line); border-radius: var(--bh-radius); background: var(--bh-surface); box-shadow: var(--bh-shadow);
    overflow: hidden; transition: transform .25s var(--bh-ease), box-shadow .25s;
}
body.bh-body #order-standard_cart .products .product:hover { transform: translateY(-4px); box-shadow: var(--bh-shadow-lg); }
body.bh-body #order-standard_cart .products .product header { background: var(--bh-grad-deep); color: #fff; padding: 16px 20px; border: 0; }
body.bh-body #order-standard_cart .products .product header span { color: #fff; font-family: var(--bh-font-head); font-weight: 600; }
body.bh-body #order-standard_cart .products .product div.product-pricing span.price { color: var(--bh-heading); font-family: var(--bh-font-head); }
body.bh-body #order-standard_cart .order-summary { background: var(--bh-navy); border-radius: var(--bh-radius); border: 0; overflow: hidden; }
body.bh-body #order-standard_cart .order-summary h2 { background: transparent; font-family: var(--bh-font-head); }
body.bh-body #order-standard_cart .summary-container { background: var(--bh-surface); border-radius: 0 0 var(--bh-radius) var(--bh-radius); }
body.bh-body #order-standard_cart .order-summary .total-due-today .amt { color: var(--bh-blue); font-family: var(--bh-font-head); }
body.bh-body #order-standard_cart .view-cart-items-header { background: var(--bh-navy); border-radius: 12px 12px 0 0; }
body.bh-body #order-standard_cart .view-cart-items { border-color: var(--bh-line); }
body.bh-body #order-standard_cart .view-cart-items .item { background: var(--bh-surface); }
body.bh-body #order-standard_cart .field, body.bh-body #order-standard_cart .form-control { border-radius: 11px; border-color: var(--bh-line); }
body.bh-body #order-standard_cart .panel-addon { border-radius: 14px; border-color: var(--bh-line); }
body.bh-body #order-standard_cart .panel-addon-selected { border-color: var(--bh-blue); }
body.bh-body #order-standard_cart .panel-addon-selected .panel-add { background: var(--bh-blue); }
body.bh-body #order-standard_cart .domain-checker-container { background: var(--bh-grad-deep); border-radius: var(--bh-radius-lg); }
body.bh-body #order-standard_cart .domain-checker-bg { background: none; }
body.bh-body #order-standard_cart .domain-pricing .tld-row.highlighted { background: var(--bh-sky-50); }
body.bh-body #order-standard_cart .cart-sidebar .card, body.bh-body .cart-sidebar .list-group-item.active { border-radius: 0; }
body.bh-body #order-standard_cart .sub-heading span { background: var(--bh-bg); color: var(--bh-blue); }
body.bh-body #order-standard_cart .payment-methods label, body.bh-body #order-standard_cart .account-select-container .account { border-radius: 12px; }
body.bh-body #order-standard_cart .account.active { border-color: var(--bh-blue); background: var(--bh-sky-50); }

/* --------------------------------------------------------------------------
   13. Dark mode — Bootstrap & Twenty-One fixes
   -------------------------------------------------------------------------- */
html[data-bh-theme="dark"] body.bh-body .table { color: var(--bh-text-2); }
html[data-bh-theme="dark"] body.bh-body .table-bordered, html[data-bh-theme="dark"] body.bh-body .table-bordered td,
html[data-bh-theme="dark"] body.bh-body .table-bordered th { border-color: var(--bh-line); }
html[data-bh-theme="dark"] body.bh-body .text-dark, html[data-bh-theme="dark"] body.bh-body .text-body { color: var(--bh-text) !important; }
html[data-bh-theme="dark"] body.bh-body .bg-light, html[data-bh-theme="dark"] body.bh-body .bg-white,
html[data-bh-theme="dark"] body.bh-body .bg-default { background-color: var(--bh-surface) !important; }
html[data-bh-theme="dark"] body.bh-body .dropdown-menu, html[data-bh-theme="dark"] body.bh-body .popover { background: var(--bh-surface); }
html[data-bh-theme="dark"] body.bh-body .popover .arrow::after { border-bottom-color: var(--bh-surface); border-top-color: var(--bh-surface); }
html[data-bh-theme="dark"] body.bh-body .custom-select { background-color: var(--bh-surface); }
html[data-bh-theme="dark"] body.bh-body .form-control:disabled, html[data-bh-theme="dark"] body.bh-body .form-control[readonly] { background: var(--bh-surface-3); }
html[data-bh-theme="dark"] body.bh-body .bh-billing-alert { border-color: rgba(245, 179, 1, .35); }
html[data-bh-theme="dark"] body.bh-body .bh-billing-alert-ico { background: rgba(245, 179, 1, .14); }
html[data-bh-theme="dark"] body.bh-body .ticket-reply.staff { border-color: #1D4A78; }
html[data-bh-theme="dark"] body.bh-body .sidebar .list-group-item .badge { background: rgba(86, 153, 218, .18); color: #9FC2E7; }
html[data-bh-theme="dark"] body.bh-body .status-active, html[data-bh-theme="dark"] body.bh-body .status-paid,
html[data-bh-theme="dark"] body.bh-body .status-open, html[data-bh-theme="dark"] body.bh-body .status-completed { background: rgba(0, 135, 90, .18) !important; color: #7fd8b3 !important; }
html[data-bh-theme="dark"] body.bh-body .status-pending, html[data-bh-theme="dark"] body.bh-body .status-payment-pending,
html[data-bh-theme="dark"] body.bh-body .status-inprogress, html[data-bh-theme="dark"] body.bh-body .status-onhold { background: rgba(245, 179, 1, .16) !important; color: #f5d27a !important; }
html[data-bh-theme="dark"] body.bh-body .status-unpaid, html[data-bh-theme="dark"] body.bh-body .status-fraud { background: rgba(214, 69, 69, .18) !important; color: #f1a5a5 !important; }
html[data-bh-theme="dark"] body.bh-body .status-terminated, html[data-bh-theme="dark"] body.bh-body .status-cancelled,
html[data-bh-theme="dark"] body.bh-body .status-closed, html[data-bh-theme="dark"] body.bh-body .status-expired { background: rgba(127, 152, 180, .16) !important; color: #A9BCD3 !important; }
html[data-bh-theme="dark"] body.bh-body .status-suspended, html[data-bh-theme="dark"] body.bh-body .status-customer-reply { background: rgba(232, 137, 12, .18) !important; color: #f3b56a !important; }
html[data-bh-theme="dark"] body.bh-body .status-answered { background: rgba(37, 119, 201, .2) !important; color: #9FC2E7 !important; }
html[data-bh-theme="dark"] body.bh-body #order-standard_cart .products .product,
html[data-bh-theme="dark"] body.bh-body #order-standard_cart .view-cart-items .item,
html[data-bh-theme="dark"] body.bh-body #order-standard_cart .summary-container { background: var(--bh-surface); color: var(--bh-text-2); }
html[data-bh-theme="dark"] body.bh-body .ico-navy { color: #9FC2E7; }
html[data-bh-theme="dark"] .bh-guest .bh-footer { background: #05101F !important; }

html.bh-theme-anim body, html.bh-theme-anim body *, html.bh-theme-anim body *::before {
    transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important;
}

/* --------------------------------------------------------------------------
   14. Motion, accessibility & print
   -------------------------------------------------------------------------- */
.bh-reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--bh-ease), transform .6s var(--bh-ease); }
.bh-reveal.is-in { opacity: 1; transform: none; }
html.bh-no-js .bh-reveal, .bh-no-observer .bh-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
    .bh-reveal { opacity: 1; transform: none; }
}
@media print {
    .bh-sidenav, .bh-backdrop, header.header.bh-topbar, .bh-strip, .bh-fab-wa, .bh-totop, .bh-palette, .bh-footer, .bh-pagehead .master-breadcrumb { display: none !important; }
    body.bh-app .bh-shell { padding-left: 0 !important; }
    body.bh-body { background: #fff; }
    body.bh-body .card { box-shadow: none; }
}

/* Footer: neutralise Twenty-One's footer spacing */
body.bh-body .bh-footer .copyright { margin: 0; text-align: left; font-size: .85rem; }
body.bh-body .bh-footer .btn-icon { background: transparent; color: inherit; }
.bh-topbar-logo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; font-family: var(--bh-font-head); font-weight: 700; color: var(--bh-heading) !important; }

/* Brand logo sizing */
.bh-sidenav .bh-brand-link > .bh-logo { max-height: 46px; max-width: 200px; width: auto; }
.bh-sidenav-brand { height: 76px; }
header.header .bh-brand .logo-img { max-height: 50px; }
.bh-topbar-logo img { max-height: 38px; }
.bh-footer-logo { max-height: 52px; width: auto; display: block; }
.bh-auth-logo { display: block; max-height: 54px; width: auto; margin-bottom: 22px; }
@media (min-width: 1200px) {
    html.bh-rail .bh-sidenav .bh-brand-link > .bh-logo { max-width: none; height: 46px; width: 46px; object-fit: cover; object-position: left center; }
}
@media (max-width: 575.98px) { .bh-auth-logo { max-height: 44px; margin-bottom: 14px; } }
.bh-sidenav-brand { height: var(--bh-topbar-h); }
.bh-sidenav .bh-brand-link > .bh-logo { max-height: 42px; }
html[data-bh-theme="dark"] header.header .bh-brand .logo-img,
html[data-bh-theme="dark"] .bh-topbar-logo img { filter: brightness(0) invert(1); }