/* *****************************************************

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

***************************************************** */

/* Custom CSS for Nexus Theme
 *
 * This file allows you to customize the theme colors and styles for the entire Nexus template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* Neutral shades */
    /* define own pallet with brand colors */
    --primary-50: var(--neutral-50);
    --primary-100: var(--neutral-100);
    --primary-200: var(--neutral-200);
    --primary-300: var(--neutral-300);
    --primary-400: var(--neutral-400);
    --primary-500: var(--neutral-500);
    --primary-600: var(--neutral-600);
    --primary-700: var(--neutral-700);
    --primary-800: var(--neutral-800);
    --primary-900: var(--neutral-900);
    --primary-950: var(--neutral-900);

    /* Primary colors */
    /* Use shades from comments if `primary` colors use other colors, then neutral */
    --primary: var(--neutral-900);          /* var(--primary-600) */
    --primary-lifted: var(--neutral-800);   /* var(--primary-700) */
    --primary-accented: var(--neutral-700); /* var(--primary-800) */

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

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

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

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

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* BigBoxHost-inspired client-area finish.  WHMCS markup and interactions remain unchanged. */
:root {
    --white: #ffffff;
    --neutral-50: #f8f8f8;
    --neutral-100: #f4f4f4;
    --neutral-200: #ebebeb;
    --neutral-300: #e4e4e4;
    --neutral-400: #b8b8b8;
    --neutral-500: #777777;
    --neutral-600: #4d4d4d;
    --neutral-700: #2d2d2d;
    --neutral-800: #151515;
    --neutral-900: #080808;
    --neutral-950: #000000;

    --primary-50: #f4fbff;
    --primary-100: #d9f3ff;
    --primary-200: #b8e9fb;
    --primary-300: #8ed8ef;
    --primary-400: #62c3de;
    --primary-500: #3aa7c6;
    --primary-600: #2589a8;
    --primary-700: #1c6d87;
    --primary-800: #18566c;
    --primary-900: #0b1a24;
    --primary-950: #080808;
    --primary: #080808;
    --primary-lifted: #151515;
    --primary-accented: #2d2d2d;
    --secondary: #4d4d4d;
    --secondary-lifted: #2d2d2d;
    --secondary-accented: #151515;
    --success: #198754;
    --success-lifted: #157347;
    --success-accented: #146c43;
    --info: #2589a8;
    --info-lifted: #1c6d87;
    --info-accented: #18566c;
    --notice: #6f42c1;
    --notice-lifted: #5a32a3;
    --notice-accented: #482682;
    --warning: #d97706;
    --warning-lifted: #b45309;
    --warning-accented: #92400e;
    --error: #dc3545;
    --error-lifted: #bb2d3b;
    --error-accented: #a52834;

    --grayscale: #080808;
    --grayscale-lifted: #151515;
    --grayscale-accented: #2d2d2d;
    --neutral: #777777;
    --neutral-lifted: #4d4d4d;
    --neutral-accented: #2d2d2d;
    --text-inverted: #ffffff;
    --text-muted: #777777;
    --text-lifted: #4d4d4d;
    --text-accented: #2d2d2d;
    --text: #080808;
    --border-muted: #f4f4f4;
    --border: #e8e8e8;
    --border-lifted: #d9d9d9;
    --border-accented: #b8b8b8;
    --bg: #ffffff;
    --bg-muted: #f8f8f8;
    --bg-lifted: #f4f4f4;
    --bg-accented: #d9f3ff;
    --bg-inverted: #0b1a24;

    /* Bootstrap variables used by older WHMCS components. */
    --blue: #080808;
    --primary: #080808;
    --secondary: #4d4d4d;
    --dark: #0b1a24;
    --light: #f8f8f8;
    --font-family-sans-serif: "Poppins", "Open Sans", Arial, sans-serif;
    --rounding-sm: 0.35rem;
    --rounding-md: 0.65rem;
    --rounding-lg: 0.9rem;
}

html,
body {
    font-family: "Poppins", "Open Sans", Arial, sans-serif;
    color: #080808;
    background-color: #ffffff;
}

body {
    font-size: 0.95rem;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
    color: #080808;
    font-weight: 500;
    letter-spacing: -0.02em;
}

p, .text-muted { color: #4d4d4d; }
a { color: #080808; transition: color 0.18s ease, background-color 0.18s ease; }
a:hover, a:focus { color: #4d4d4d; }

/* Minimal white header, black text, and a subtle separator. */















/* Pale blue wayfinding strip, echoing the public site's accent panels. */
.master-breadcrumb,
.master-breadcrumb .breadcrumb { background-color: #f4fbff; }
.master-breadcrumb .breadcrumb { margin: 0; padding: 0.75rem 0; }
.master-breadcrumb .breadcrumb a { color: #4d4d4d; }
.master-breadcrumb .breadcrumb .breadcrumb-item.active { color: #080808; }

/* Quiet cards and panels with thin borders instead of heavy shadows. */
.card,
.mc-promo-manage,
.mc-promo-login,
.primary-content .card,
.primary-content .mc-promo-manage,
.primary-content .mc-promo-login,
.sidebar .panel {
    border: 1px solid #e8e8e8;
    border-radius: 0.75rem;
    box-shadow: 0 3px 16px rgba(8, 8, 8, 0.035);
}
.card-header,
.panel > .panel-heading { color: #080808; background-color: #f8f8f8; border-bottom: 1px solid #eeeeee; }
.card-body,
.primary-content .card-body { color: #4d4d4d; }
.table thead th { color: #2d2d2d; background-color: #f8f8f8; border-bottom-color: #e8e8e8; }
.table td, .table th { border-top-color: #eeeeee; }
.list-group-item { border-color: #eeeeee; }

/* Black primary actions, with visible keyboard-focus feedback. */
.btn, .form-control, .custom-select { border-radius: 0.45rem; }
.btn-primary,
.btn-primary:visited,
.btn-primary:disabled,
.btn-primary.disabled { color: #ffffff; background-color: #080808; border-color: #080808; }
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle { color: #ffffff; background-color: #151515; border-color: #151515; }
.btn-primary:focus,
.btn-primary.focus,
.btn-outline-primary:focus,
.btn-outline-primary.focus { box-shadow: 0 0 0 0.2rem rgba(8, 8, 8, 0.16); }
.btn-outline-primary { color: #080808; border-color: #080808; background-color: #ffffff; }
.btn-outline-primary:hover,
.btn-outline-primary:active { color: #ffffff; background-color: #080808; border-color: #080808; }
.btn-secondary { color: #ffffff; background-color: #4d4d4d; border-color: #4d4d4d; }
.btn-secondary:hover,
.btn-secondary:focus { color: #ffffff; background-color: #2d2d2d; border-color: #2d2d2d; }
.badge-primary,
.pagination .page-item.active .page-link { color: #ffffff; background-color: #080808; }
.pagination .page-link { color: #080808; border-color: #e8e8e8; }

.form-control,
.custom-select { color: #2d2d2d; border-color: #d9d9d9; background-color: #ffffff; }
.form-control:focus,
.custom-select:focus { color: #080808; border-color: #4d4d4d; box-shadow: 0 0 0 0.18rem rgba(8, 8, 8, 0.09); }
.form-control::placeholder { color: #888888; }

.action-icon-btns a,
.action-icon-btns a:hover { color: #080808; }
.action-icon-btns a { border-radius: 0.75rem; }
.action-icon-btns a:hover { background-color: #f4fbff; }
.alert-info { color: #18566c; background-color: #f4fbff; border-color: #b8e9fb; }

/* Deep blue-black footer with readable links, as on the public site. */
footer.footer { color: #ffffff; background-color: #0b1a24; }
footer.footer .nav-link,
footer.footer a,
footer.footer .copyright { color: rgba(255, 255, 255, 0.82); }
footer.footer .nav-link:hover,
footer.footer a:hover { color: #ffffff; }
footer.footer .copyright { opacity: 0.75; }

@media (max-width: 767.98px) {
    
    .card,
    .mc-promo-manage,
    .mc-promo-login,
    .primary-content .card,
    .primary-content .mc-promo-manage,
    .primary-content .mc-promo-login { border-radius: 0.65rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; }
}

/* Integrated BigBoxHost public navigation and footer. */















footer.bbh-footer {
    margin-top: 3rem;
    padding: 0;
    color: #ffffff;
    background: #0b1a24;
    border-top: 4px solid #2589a8;
}
footer.bbh-footer a,
footer.bbh-footer .copyright { color: rgba(255, 255, 255, 0.82); }
footer.bbh-footer a:hover,
footer.bbh-footer a:focus { color: #ffffff; text-decoration: underline; }
.bbh-footer-top {
    padding-top: 2rem;
    padding-bottom: 1.6rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.bbh-footer-brand {
    display: inline-block;
    margin-bottom: 0.35rem;
    color: #ffffff !important;
    font-size: 1.55rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    text-decoration: none !important;
}
.bbh-company-name {
    margin-bottom: 0.35rem;
    color: #ffffff !important;
    font-weight: 500;
}
.bbh-footer-contact address,
.bbh-footer-phone {
    margin-bottom: 0.65rem;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
    font-style: normal;
}
.bbh-social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.75rem;
}
.bbh-social-links a {
    display: inline-flex;
    min-height: 2.15rem;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.65rem;
    color: #ffffff !important;
    font-size: 0.78rem;
    text-decoration: none !important;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 999px;
}
.bbh-social-links a:hover,
.bbh-social-links a:focus { background: #2589a8; border-color: #2589a8; }
.bbh-footer-controls { display: flex; justify-content: flex-end; }
.bbh-footer-links { padding-top: 1.8rem; padding-bottom: 1.5rem; }
.bbh-footer-links h2 {
    margin-bottom: 0.9rem;
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.03em;
}
.bbh-footer-links ul { margin: 0; padding: 0; list-style: none; }
.bbh-footer-links li { margin-bottom: 0.52rem; }
.bbh-footer-links a { font-size: 0.84rem; line-height: 1.45; }
.bbh-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.85rem 0 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.bbh-footer-legal { gap: 0.15rem; }
.bbh-footer-legal .nav-link { padding: 0.25rem 0.55rem 0.25rem 0; font-size: 0.8rem; }
.bbh-footer-bottom .copyright { font-size: 0.78rem; }
@media (max-width: 1199.98px) {
    
    
    
    
    
    
    
}
@media (max-width: 767.98px) {
    .bbh-footer-controls { justify-content: flex-start; margin-top: 1rem; }
    .bbh-footer-links { row-gap: 1.25rem; }
    .bbh-footer-bottom { align-items: flex-start; flex-direction: column; }
}


/* Stable integrated header layout: public navigation left, WHMCS navigation right. */







@media (min-width: 1200px) {
    
    
    
    
    
    
    
    
    
}

@media (max-width: 1199.98px) {
    
    
    
    
}


/* BigBoxHost reference-matched shared header and footer. */








































footer.footer.bbh-footer {
    margin-top: 1rem;
    padding: 0;
    color: #ffffff;
    background: #000000;
    border: 0;
}
.bbh-footer-container {
    width: 100%;
    max-width: 1250px;
    padding: 0 15px 2.25rem;
}
.bbh-footer-grid {
    display: grid;
    grid-template-columns: minmax(250px, 28%) minmax(0, 1fr);
    gap: 0;
    padding-top: 4rem;
}
.bbh-footer-contact { min-width: 0; padding-right: 1.5rem; }
.bbh-footer-brand {
    display: inline-block;
    margin: 0 0 1.15rem;
    line-height: 0;
    text-decoration: none;
}
.bbh-footer-logo {
    display: block;
    width: 195px;
    max-width: 100%;
    height: auto;
}
.bbh-company-name {
    margin: 0 0 0.15rem;
    color: #ffffff !important;
    font-size: 0.98rem;
    font-weight: 400;
    line-height: 1.55;
}
.bbh-footer-contact address {
    margin: 0;
    color: #e4e4e4;
    font-size: 0.94rem;
    font-style: normal;
    line-height: 1.55;
}
.bbh-social-links {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.05rem;
}
.bbh-social-links a {
    display: inline-flex;
    width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #000000 !important;
    background: #ffffff;
    border: 0;
    border-radius: 0;
    font-size: 1.1rem;
    line-height: 1;
    text-decoration: none !important;
}
.bbh-social-links a:hover,
.bbh-social-links a:focus { color: #000000 !important; background: #e6e6e6; }
.bbh-social-links .bbh-x-mark { font-size: 1.12rem; font-weight: 600; }
.bbh-footer-copyright {
    margin: 1.55rem 0 0;
    color: #e4e4e4;
    font-size: 0.93rem;
    line-height: 1.5;
}
.bbh-footer-links {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1.25fr 0.8fr;
    gap: 1.75rem;
    min-width: 0;
    padding: 1.05rem 0 0;
}
.bbh-footer-column { min-width: 0; }
.bbh-footer-column h2 {
    margin: 0 0 1.35rem;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.4;
}
.bbh-footer-column ul { margin: 0; padding: 0; list-style: none; }
.bbh-footer-column li { margin: 0 0 0.72rem; padding: 0; }
.bbh-footer-column a {
    color: #d7d7d7;
    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1.45;
    text-decoration: none;
}
.bbh-footer-column a:hover,
.bbh-footer-column a:focus { color: #ffffff; text-decoration: underline; }
.bbh-footer-tools { display: flex; justify-content: flex-end; margin-top: 1rem; }
.bbh-footer-tools .btn { color: #ffffff; border-color: rgba(255,255,255,0.65); border-radius: 0; }

@media (min-width: 1200px) {
    
    
    
}
@media (max-width: 1399.98px) and (min-width: 1200px) {
    
    
    
    
}
@media (max-width: 1199.98px) {
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .bbh-footer-grid { grid-template-columns: minmax(220px, 30%) minmax(0, 1fr); }
    .bbh-footer-links { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; row-gap: 1.8rem; }
}
@media (max-width: 767.98px) {
    .bbh-footer-container { padding-bottom: 1.5rem; }
    .bbh-footer-grid { grid-template-columns: minmax(0, 1fr); padding-top: 2.5rem; }
    .bbh-footer-contact { padding-right: 0; }
    .bbh-footer-links { padding-top: 2.5rem; column-gap: 1.25rem; row-gap: 1.65rem; }
    .bbh-footer-column h2 { margin-bottom: 0.9rem; }
    .bbh-footer-column li { margin-bottom: 0.58rem; }
    .bbh-footer-tools { justify-content: flex-start; }
}
@media (max-width: 480px) {
    
    .bbh-footer-links { grid-template-columns: minmax(0, 1fr); }
}


/* Spacious Virtual menu panel shown in the BigBoxHost public-header reference. */
@media (min-width: 1200px) {
    
    
    
    
    
    
    
}
@media (max-width: 1199.98px) {
    
    
    
    
    
    
    
}

@media (min-width: 1400px) {
    .bbh-footer-links {
        grid-template-columns: 200px 240px 235px minmax(max-content, 1fr);
        gap: 48px;
    }
}

/* Header refinement: align the logo with the public navigation and make the
   native WHMCS navigation a clearly subordinate, full-width client-area strip.
   Footer styles above are intentionally unchanged. */
@media (min-width: 1200px) {
    
    
    
    
    
    
    
    
    
    
}

@media (max-width: 1399.98px) and (min-width: 1200px) {
    
}

@media (max-width: 1199.98px) {
    
    
}


/* WHMCS client-menu row alignment: keep the label and primary links on the left
   and the account greeting/dropdown on the far right at desktop widths. */
@media (min-width: 1200px) {
    
    
    
    
    
    
}

/* Narrow layouts intentionally stack the label, client links, and account menu
   inside the existing responsive navigation collapse. */
@media (max-width: 1199.98px) {
    
    
    
    
}


/* Final integrated header fit: keep this styling limited to the header so the
   existing footer and all WHMCS navigation templates remain untouched. */
@media (min-width: 1200px) {
    

    

    

    

    

    

    

    

    

    

    

    

    
}

@media (max-width: 1399.98px) and (min-width: 1200px) {
    

    
}

@media (max-width: 1199.98px) {
    

    

    
}

/* BigBoxHost public-site header rebuild.
   Source: the live public site. Native WHMCS menus and Bootstrap hooks remain intact.
   Header-only rules: the approved footer and page styling are not part of this layer. */
#header.header {
    position: relative;
    z-index: 1030;
    padding: 0;
    color: #111;
    background: #fff;
    border: 0;
    font-family: 'Poppins', 'Open Sans', Arial, sans-serif;
}
#header .topbar {
    background: #fafafa;
    border-bottom: 1px solid #ededed;
    color: #666;
}
#header .topbar > .container {
    width: 92%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}
#header .topbar .d-flex { align-items: center; min-height: 30px; }
#header .topbar .btn,
#header .topbar .active-client .btn,
#header .topbar .active-client .input-group-text {
    min-height: 30px;
    padding: 4px 8px;
    color: #555;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 11px;
    line-height: 22px;
}
#header .topbar #accountNotifications { padding-left: 0; }
#header .topbar .active-client .btn.btn-active-client span {
    display: block;
    overflow: hidden;
    max-width: 260px;
    border-bottom: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#header .topbar .btn:hover { color: #000; }
#header .bbh-main-header {
    display: grid;
    grid-template-columns: max(4%, calc((100% - 1280px) / 2)) 185px minmax(0, 1fr) auto max(4%, calc((100% - 1280px) / 2));
    grid-template-rows: 104px auto;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    background: #fff;
    border: 0;
}
#header .bbh-header-container { display: contents; }
#header .navbar-brand {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    justify-self: start;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0;
    line-height: 1;
}
#header .logo-img,
#header .bigboxhost-logo {
    display: block;
    width: 185px;
    max-width: 185px;
    height: auto;
    max-height: 56px;
    object-fit: contain;
}
#header .bbh-header-tools {
    grid-column: 4;
    grid-row: 1;
    align-self: center;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 0 0 auto;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}
#header .bbh-header-search { display: block; width: 252px; flex: 0 0 252px; margin: 0; }
#header .bbh-mobile-search { display: none; }
#header .bbh-search-field {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
    height: 44px;
    margin: 0;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 0;
    transition: border-color .18s ease, box-shadow .18s ease;
}
#header .bbh-search-field:focus-within { border-color: #111; box-shadow: 0 0 0 1px #111; }
#header .bbh-search-field .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 42px;
    min-height: 0;
    margin: 0;
    padding: 0;
    color: #555;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    line-height: 1;
}
#header .bbh-search-field .form-control {
    flex: 1 1 auto;
    width: 0;
    min-width: 0;
    height: 42px;
    margin: 0;
    padding: 0 12px 0 0;
    color: #111;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font: 400 13px/1.5 'Poppins', 'Open Sans', Arial, sans-serif;
}
#header .bbh-search-field .form-control::placeholder { color: #777; opacity: 1; }
#header .bbh-search-field svg { display: block; width: 17px; height: 17px; }
#header .bbh-header-tools .cart-btn,
#header .bbh-header-tools .bbh-nav-toggler {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    box-sizing: border-box;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0 10px;
    color: #111;
    background: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 0;
    box-shadow: none;
    line-height: 1;
    text-decoration: none;
}
#header .bbh-header-tools .cart-btn { min-width: 64px; gap: 6px; }
#header .bbh-header-tools .cart-btn > svg { display: block; width: 20px; height: 20px; flex: 0 0 20px; }
#header .bbh-header-tools .cart-btn .badge {
    position: static;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-width: 18px;
    height: 18px;
    margin: 0;
    padding: 0 4px;
    color: #fff;
    background: #111;
    border-radius: 20px;
    font: 500 10px/18px 'Poppins', Arial, sans-serif;
    transform: none;
}
#header .bbh-header-tools .bbh-nav-toggler { display: none; width: 44px; padding: 0; }
#header .bbh-nav-toggler > svg { display: block; width: 20px; height: 20px; }
#header .bbh-header-tools .cart-btn:hover,
#header .bbh-header-tools .bbh-nav-toggler:hover { border-color: #111; background: #fafafa; }
#header .bbh-public-navigation {
    position: relative;
    grid-column: 3;
    grid-row: 1;
    align-self: stretch;
    display: flex;
    align-items: center;
    min-width: 0;
    width: auto;
    margin: 0;
    padding: 0 28px;
}
#header .bbh-public-nav {
    display: flex;
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 28px;
    width: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}
#header .bbh-public-nav > .nav-item { position: static; flex: 0 0 auto; width: auto; }
#header .bbh-public-nav > .nav-item > .nav-link {
    position: relative;
    display: flex;
    align-items: center;
    height: 104px;
    margin: 0;
    padding: 0;
    color: #111;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    white-space: nowrap;
}
#header .bbh-public-nav > .nav-item > .nav-link::after { display: none; }
#header .bbh-public-nav > .nav-item > .nav-link::before {
    position: absolute;
    right: 0;
    bottom: 22px;
    left: 0;
    height: 2px;
    background: #111;
    content: '';
    transform: scaleX(0);
    transition: transform .18s ease;
}
#header .bbh-public-nav > .nav-item:hover > .nav-link::before,
#header .bbh-public-nav > .nav-item.show > .nav-link::before,
#header .bbh-public-nav > .nav-item > .nav-link:focus-visible::before { transform: scaleX(1); }
#header .bbh-public-nav .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: auto;
    left: 50% !important;
    z-index: 1050;
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 20px;
    width: 680px;
    min-width: 0;
    max-width: calc(100vw - 48px);
    margin: 0;
    padding: 22px;
    background: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 0;
    box-shadow: 0 5px 12px rgba(0,0,0,.035), 0 16px 38px rgba(0,0,0,.075);
    transform: translateX(-50%) !important;
}
#header .bbh-public-nav .dropdown-menu.show { display: grid; }
#header .bbh-public-nav .bbh-menu-compact { width: 370px; grid-template-columns: minmax(0, 1fr); }
#header .bbh-public-nav .bbh-mega-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    min-width: 0;
    margin: 0;
    padding: 16px 12px;
    color: #111;
    background: #fff;
    border: 0;
    border-radius: 0;
    white-space: normal;
    text-decoration: none;
}
#header .bbh-public-nav .bbh-mega-item:hover,
#header .bbh-public-nav .bbh-mega-item:focus { color: #111; background: #f8f8f8; }
#header .bbh-menu-icon { display: block; width: 26px; height: 26px; flex: 0 0 26px; margin-top: 4px; object-fit: contain; opacity: .8; }
#header .bbh-mega-copy { display: block; min-width: 0; }
#header .bbh-mega-copy strong { display: block; margin: 0 0 4px; color: #111; font-size: 14px; font-weight: 400; line-height: 1.55; }
#header .bbh-mega-copy small { display: block; color: #555; font-size: 12px; font-weight: 300; line-height: 1.85; }
#header .bbh-clientbar { grid-column: 1 / -1; grid-row: 2; background: #fafafa; border-top: 1px solid #ededed; border-bottom: 1px solid #e8e8e8; }
#header .bbh-client-navigation {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr) max-content;
    align-items: center;
    column-gap: 20px;
    width: 92%;
    max-width: 1280px;
    min-height: 54px;
    margin: 0 auto;
    padding: 8px 0;
    background: transparent;
    border: 0;
}
#header .bbh-client-nav-label { margin: 0; color: #777; font-size: 10px; font-weight: 500; letter-spacing: .13em; line-height: 18px; text-transform: uppercase; white-space: nowrap; }
#header .bbh-client-navigation > ul { display: flex; flex-direction: row; align-items: center; width: auto; min-width: 0; margin: 0 !important; padding: 0; list-style: none; }
#header .bbh-client-primary { flex-wrap: wrap; justify-content: flex-start; gap: 0; }
#header .bbh-client-secondary { flex-wrap: nowrap; justify-content: flex-end; gap: 8px; }
#header .bbh-client-navigation > ul > li { position: relative; flex: 0 0 auto; width: auto; margin: 0; padding: 0; }
/* WHMCS autoCollapse uses a 30px threshold: the desktop primary row is 28px,
   so its native More menu appears only when links genuinely wrap. */
#header .bbh-client-primary > li > a,
#header .bbh-client-secondary > li > a {
    display: block;
    margin: 0;
    padding: 4px 10px;
    color: #333;
    background: transparent;
    border: 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    white-space: nowrap;
    text-decoration: none;
}
#header .bbh-client-primary > li > a:hover,
#header .bbh-client-primary > li.show > a { color: #000; background: #eee; }
#header .bbh-client-secondary > li > a { padding: 6px 13px; color: #111; background: #fff; border: 1px solid #222; }
#header .bbh-client-secondary > li > a:hover { color: #fff; background: #111; }
#header .bbh-client-navigation .dropdown-toggle::after { margin-left: 7px; vertical-align: middle; border-top-width: 3px; border-right-width: 3px; border-left-width: 3px; }
#header .bbh-client-navigation .dropdown-menu { z-index: 1050; min-width: 220px; margin: 8px 0 0; padding: 6px; border: 1px solid #e5e5e5; border-radius: 0; box-shadow: 0 12px 30px rgba(0,0,0,.08); }
#header .bbh-client-navigation .dropdown-menu > li.dropdown-item { padding: 0; border-radius: 0; }
#header .bbh-client-navigation .dropdown-menu > li > a { display: block; padding: 8px 10px !important; color: #333; border-radius: 0; font-size: 12px; line-height: 20px; white-space: normal; }
#header .bbh-client-navigation .dropdown-item:hover,
#header .bbh-client-navigation .dropdown-item:focus { color: #111; background: #f5f5f5; }
#header a:focus-visible,
#header button:focus-visible { outline: 2px solid #111; outline-offset: 4px; }
#header .bbh-search-field .btn:focus-visible { outline-offset: -4px; }
@media (min-width: 1200px) {
    #header #mainNavbar { display: contents !important; }
}
@media (min-width: 1200px) and (hover: hover) {
    #header .bbh-public-nav > .dropdown:hover > .dropdown-menu { display: grid; }
}
@media (max-width: 1199.98px) {
    #header .bbh-main-header { display: block; }
    #header .bbh-header-container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 92%; max-width: 1024px; min-height: 84px; margin: 0 auto; padding: 0; }
    #header .navbar-brand { flex: 0 0 auto; margin: 20px 0; }
    #header .logo-img,
    #header .bigboxhost-logo { width: 160px; max-width: 160px; max-height: 48px; }
    #header .bbh-header-tools { gap: 8px; margin: 20px 0 20px auto; }
    #header .bbh-header-search { display: none; }
    #header .bbh-header-tools .cart-btn { min-width: 56px; gap: 4px; padding-right: 6px; padding-left: 6px; }
    #header .bbh-header-tools .bbh-nav-toggler { display: inline-flex; }
    #header #mainNavbar { order: 3; flex: 0 0 100%; width: 100%; margin: 0; padding: 0; }
    #header #mainNavbar.collapse:not(.show) { display: none; }
    #header #mainNavbar.show { display: block; }
    #header .bbh-mobile-search { display: block; width: 100%; margin: 0; padding-top: 16px; border-top: 1px solid #ededed; }
    #header .bbh-search-field { height: 46px; }
    #header .bbh-search-field .btn,
    #header .bbh-search-field .form-control { height: 44px; }
    #header .bbh-search-field .form-control { font-size: 13px; }
    #header .bbh-public-navigation { display: block; width: 100%; height: auto; margin: 0; padding: 12px 0 20px; }
    #header .bbh-public-nav { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; width: 100%; }
    #header .bbh-public-nav > .nav-item { width: 100%; }
    #header .bbh-public-nav > .nav-item > .nav-link { display: flex; align-items: center; width: 100%; height: auto; min-height: 48px; padding: 12px 0; font-size: 15px; line-height: 24px; }
    #header .bbh-public-nav > .nav-item > .nav-link::before { display: none; }
    #header .bbh-public-nav > .nav-item > .nav-link::after { position: absolute; top: 19px; right: 4px; display: block; width: 7px; height: 7px; margin: 0; border: 0; border-right: 1px solid #555; border-bottom: 1px solid #555; content: ''; transform: rotate(45deg); }
    #header .bbh-public-nav > .nav-item.show > .nav-link::after { top: 22px; transform: rotate(225deg); }
    #header .bbh-public-nav .dropdown-menu,
    #header .bbh-public-nav .bbh-menu-compact { position: static !important; top: auto !important; right: auto; left: auto !important; grid-template-columns: minmax(0, 1fr); gap: 0; float: none; width: 100%; max-width: none; margin: 0 0 8px; padding: 4px 0 8px; border: 0; border-top: 1px solid #ededed; box-shadow: none; transform: none !important; }
    #header .bbh-public-nav .bbh-mega-item { gap: 14px; padding: 13px 10px; }
    #header .bbh-menu-icon { width: 24px; height: 24px; flex-basis: 24px; margin-top: 1px; }
    #header .bbh-mega-copy strong { font-size: 13px; }
    #header .bbh-clientbar { margin: 0 0 24px; padding: 20px 0 0; background: #fff; border-top: 1px solid #e8e8e8; border-bottom: 0; }
    #header .bbh-client-navigation { display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; max-width: none; min-height: 0; margin: 0; padding: 0; }
    #header .bbh-client-nav-label { align-self: flex-start; font-size: 10px; }
    #header .bbh-client-navigation > ul { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; flex-wrap: nowrap; width: 100%; }
    #header .bbh-client-navigation > ul > li { width: 100%; }
    #header .bbh-client-primary > li > a,
    #header .bbh-client-secondary > li > a { position: relative; display: block; width: 100%; min-height: 44px; padding: 10px 0; color: #222; background: transparent; border: 0; font-size: 14px; line-height: 24px; white-space: normal; }
    #header .bbh-client-navigation > ul > li > .dropdown-toggle::after { position: absolute; top: 21px; right: 4px; margin: 0; }
    #header .bbh-client-primary > li > a:hover,
    #header .bbh-client-secondary > li > a:hover { color: #000; background: transparent; }
    #header .bbh-client-secondary { gap: 0; margin-top: 4px !important; padding-top: 12px !important; border-top: 1px solid #ededed; }
    #header .bbh-client-navigation .dropdown-menu { position: static !important; float: none; width: 100%; min-width: 0; margin: 2px 0 8px; padding: 6px; background: #fafafa; border: 1px solid #ededed; box-shadow: none; transform: none !important; }
    #header .bbh-client-navigation .dropdown-menu > li > a { padding: 10px !important; font-size: 13px; }
}
@media (max-width: 767.98px) {
    #header .topbar > .container,
    #header .bbh-header-container { width: calc(100% - 40px); }
    #header .logo-img,
    #header .bigboxhost-logo { width: 145px; max-width: 145px; max-height: 44px; }
    #header .topbar .active-client .btn.btn-active-client span { max-width: 155px; }
    #header .topbar .btn,
    #header .topbar .active-client .btn { padding-right: 5px; padding-left: 5px; font-size: 10px; }
    #header .topbar .active-client .btn.btn-return-to-admin { padding-right: 0; }
    #header .bbh-mega-copy strong { margin-bottom: 0; font-size: 13px; line-height: 24px; }
    #header .bbh-mega-copy small { display: none; }
    #header .bbh-public-nav .bbh-help-item { padding-left: 10px; }
}
@media (max-width: 359.98px) {
    #header .logo-img,
    #header .bigboxhost-logo { width: 132px; max-width: 132px; }
}