/* HOSTOWEB htw26 / WHMCS native navigation, 2026 v4.
   Deliberately scoped: no imported sitewide CSS and no changes to custom.css. */
#hostoweb-topbar.htw26-topbar,
#header.htw26-site-header {
    --htw26-navy: #01132b;
    --htw26-topbar: #051a31;
    --htw26-lime: #a2e326;
    --htw26-light-ink: #10253d;
    --htw26-border: #e0e8ee;
    font-family: 'Poppins','Quicksand',sans-serif;
    padding-left: 10px;
}
#hostoweb-topbar.htw26-topbar *,
#header.htw26-site-header *,
#header.htw26-site-header *::before,
#header.htw26-site-header *::after { box-sizing: border-box; }
#hostoweb-topbar.htw26-topbar a,
#header.htw26-site-header a { text-decoration: none; }
/* Corporate header: full viewport width, same side gutters as hostoweb.com. */
.htw26-header-container { width: 100%; max-width: none; margin: 0; padding-left: 21px; padding-right: 30px; }

/* Topbar: dark, static, scrolls offscreen naturally. */
#hostoweb-topbar.htw26-topbar {
    position: relative; z-index: 1001; min-height: 44px;
    background: #051a31; border-bottom: 1px solid rgba(255,255,255,.09);
    color: #dbe8ef; font-size: 11px;
}
#hostoweb-topbar .htw26-topbar-inner,
#hostoweb-topbar .htw26-topbar-left,
#hostoweb-topbar .htw26-topbar-right { display: flex; align-items: center; }
#hostoweb-topbar .htw26-topbar-inner { min-height: 44px; justify-content: space-between; gap: 16px; }
#hostoweb-topbar .htw26-topbar-left,
#hostoweb-topbar .htw26-topbar-right { gap: 15px; min-width: 0; }
#hostoweb-topbar .htw26-topbar-phone,
#hostoweb-topbar .htw26-topbar-notifications,
#hostoweb-topbar .htw26-topbar-cart {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; color: #e6eff4; white-space: nowrap; line-height: 1.2;
}
#hostoweb-topbar .htw26-topbar-phone i { color: var(--htw26-lime); font-size: 12px; }
#hostoweb-topbar .htw26-topbar-phone strong { font-weight: 600; color: #f4f8fb; }
#hostoweb-topbar .htw26-topbar-phone:hover strong { color: var(--htw26-lime); }
#hostoweb-topbar .htw26-topbar-help { color: #9fb3c0; }
#hostoweb-topbar .htw26-topbar-divider { display: block; width: 1px; height: 17px; background: rgba(255,255,255,.17); }
#hostoweb-topbar .htw26-topbar-notifications {
    position: relative; cursor: pointer; padding: 8px 6px;
    border: 0; border-radius: 7px; background: transparent; font-size: 13px;
}
#hostoweb-topbar .htw26-topbar-notifications:hover { color: #a2e326; }
#hostoweb-topbar .htw26-notification-count {
    position: absolute; top: 1px; right: -4px; min-width: 15px; height: 15px; padding: 1px 3px;
    border-radius: 12px; background: #a2e326; color: #01132b;
    font: 700 9px/13px 'Poppins',sans-serif; text-align: center;
}
#hostoweb-topbar .htw26-topbar-cart { position: relative; padding: 8px 6px; font-size: 13px; }
#hostoweb-topbar .htw26-topbar-cart:hover { color: var(--htw26-lime); }
#hostoweb-topbar .htw26-cart-count {
    position: absolute; top: 0; right: -5px;
    display: flex; align-items: center; justify-content: center; min-width: 15px; height: 15px;
    border-radius: 20px; padding: 0 3px; background: var(--htw26-lime);
    color: var(--htw26-navy); font: 700 9px/1 'Poppins',sans-serif;
}

/* The ONE navigation row: native WHMCS links, HOSTOWEB styling. */
#header.header.htw26-site-header {
    position: sticky; top: 0; z-index: 1000; isolation: isolate;
    margin: 0; padding: 0; border: 0;
    background: var(--htw26-navy) !important; background-image: none !important;
    box-shadow: none; transition: background-color .18s,box-shadow .18s;
}
#header.header.htw26-site-header.is-scrolled {
    background: #fff !important; box-shadow: 0 10px 30px rgba(1,19,43,.13);
}
#header.htw26-site-header .htw26-main-nav {
    position: relative; display: flex; min-height: 125px;
    margin: 0; padding: 0; border: 0; background: transparent;
    transition: min-height .18s;
}
#header.htw26-site-header.is-scrolled .htw26-main-nav { min-height: 100px; }
#header.htw26-site-header .htw26-nav-inner {
    display: flex; align-items: center; gap: 13px; min-height: inherit;
}
#header.htw26-site-header .htw26-brand {
    position: relative; display: block; flex: 0 0 236px; width: 236px;
    height: 79px; margin: 0 11px 0 0; padding: 0;
}
#header.htw26-site-header .htw26-brand img {
    position: absolute; top: 50%; left: 0;
    display: block; width: 236px; max-height: 65px; height: auto;
    transform: translateY(-50%); object-fit: contain;
    transition: opacity .15s;
}
#header.htw26-site-header .htw26-logo-dark { opacity: 0; }
#header.htw26-site-header.is-scrolled .htw26-logo-light { opacity: 0; }
#header.htw26-site-header.is-scrolled .htw26-logo-dark { opacity: 1; }
#header.htw26-site-header .htw26-native-menu {
    min-width: 0; flex: 0 1 auto; align-items: center; justify-content: flex-end;
    padding: 0; margin: 0 0 0 auto; border: 0;
}
#header.htw26-site-header .htw26-native-menu > .navbar-nav {
    display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; gap: 5px;
    margin: 0 !important; padding: 0; min-width: 0;
}
#header.htw26-site-header .htw26-native-menu > .htw26-native-secondary {
    margin-left: 9px !important; padding-left: 0;
}
#header.htw26-site-header .htw26-native-menu > .navbar-nav > li {
    position: relative; display: block; margin: 0; padding: 0;
}
#header.htw26-site-header .htw26-native-menu > .navbar-nav > li > a {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 43px; padding: 11px 7px !important;
    border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: #e4edf4 !important;
    font: 700 10.8px/1.3 'Poppins','Quicksand',sans-serif;
    text-transform: uppercase;
    white-space: nowrap; text-decoration: none;
    transition: color .15s,background-color .15s;
}
#header.htw26-site-header .htw26-native-menu > .navbar-nav > li > a > i { color: #96acb9; font-size: 12px; margin-right: 1px; }
#header.htw26-site-header .htw26-native-menu > .navbar-nav > li > a:hover,
#header.htw26-site-header .htw26-native-menu > .navbar-nav > li.show > a,
#header.htw26-site-header .htw26-native-menu > .navbar-nav > li.active > a {
    color: #a2e326 !important; background: rgba(255,255,255,.07);
}
#header.htw26-site-header .htw26-native-menu > .navbar-nav > li > a:hover > i,
#header.htw26-site-header .htw26-native-menu > .navbar-nav > li.show > a > i { color: #a2e326; }
#header.htw26-site-header.is-scrolled .htw26-native-menu > .navbar-nav > li > a { color: #1e394e !important; }
#header.htw26-site-header.is-scrolled .htw26-native-menu > .navbar-nav > li > a > i { color: #718896; }
#header.htw26-site-header.is-scrolled .htw26-native-menu > .navbar-nav > li > a:hover,
#header.htw26-site-header.is-scrolled .htw26-native-menu > .navbar-nav > li.show > a,
#header.htw26-site-header.is-scrolled .htw26-native-menu > .navbar-nav > li.active > a {
    color: #527f0c !important; background: #eff7e6;
}
#header.htw26-site-header .htw26-native-menu > .htw26-native-secondary > li:last-child > a {
    padding: 10px 14px !important; border-color: #a2e326;
    border-radius: 8px; background: #a2e326; color: #01132b !important;
    font-weight: 700;
}
#header.htw26-site-header .htw26-native-menu > .htw26-native-secondary > li:last-child > a > i { color: #01132b; }
#header.htw26-site-header .htw26-native-menu > .htw26-native-secondary > li:last-child > a:hover,
#header.htw26-site-header .htw26-native-menu > .htw26-native-secondary > li:last-child.show > a,
#header.htw26-site-header.is-scrolled .htw26-native-menu > .htw26-native-secondary > li:last-child > a,
#header.htw26-site-header.is-scrolled .htw26-native-menu > .htw26-native-secondary > li:last-child > a:hover {
    color: #01132b !important; background: #a2e326;
}
#header.htw26-site-header .htw26-native-menu > .navbar-nav > li > a.dropdown-toggle::after {
    margin-left: 1px; border-top-color: currentColor;
}
#header.htw26-site-header .htw26-native-menu .badge {
    padding: 3px 6px; border-radius: 10px; background: #a2e326; color: #01132b;
    font: 700 9px/1.2 'Poppins',sans-serif;
}
/* Bootstrap 4 dropdowns and WHMCS's nested dropdown-item LI/A markup. */
#header.htw26-site-header .htw26-native-menu .dropdown-menu {
    min-width: 228px; max-width: min(320px,calc(100vw - 24px));
    padding: 8px; margin-top: 1px; border: 1px solid #e0e8ee;
    border-radius: 12px; background: #fff;
    box-shadow: 0 20px 46px rgba(1,19,43,.17); z-index: 1010;
}
#header.htw26-site-header .htw26-native-menu .dropdown-menu > li.dropdown-item {
    display: block; margin: 0; padding: 0; background: transparent; white-space: normal;
}
#header.htw26-site-header .htw26-native-menu .dropdown-menu > li.dropdown-item > a,
#header.htw26-site-header .htw26-native-menu .dropdown-menu > a.dropdown-item {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 10px 11px !important; border: 0; border-radius: 7px;
    background: #fff; color: #284358 !important;
    font: 500 12px/1.45 'Poppins','Quicksand',sans-serif;
    white-space: normal;
}
#header.htw26-site-header .htw26-native-menu .dropdown-menu a > i {
    flex: 0 0 17px; width: 17px; text-align: center; color: #678597;
}
#header.htw26-site-header .htw26-native-menu .dropdown-menu > li.dropdown-item > a:hover,
#header.htw26-site-header .htw26-native-menu .dropdown-menu > a.dropdown-item:hover {
    background: #f1f8e9; color: #527f0c !important;
}
#header.htw26-site-header .htw26-native-menu .dropdown-menu .dropdown-divider { margin: 7px 3px; border-color: #e6ecf0; }
/* All native WHMCS menu links remain visible on desktop; no More grouping. */
#header.htw26-site-header .htw26-native-menu .collapsable-dropdown-menu { max-height: 65vh; overflow-y: auto; }

/* Search: native WHMCS KB endpoint and Bootstrap 4 dropdown. */
#header.htw26-site-header .htw26-header-tools { display: flex; flex: 0 0 auto; align-items: center; gap: 7px; margin-left: 0; }
#header.htw26-site-header .htw26-search-toggle,
#header.htw26-site-header .htw26-menu-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 8px; min-width: 38px; min-height: 39px;
    border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: #e7f1f5;
    cursor: pointer; font-size: 14px;
}
#header.htw26-site-header .htw26-search-toggle::after { display: none; }
#header.htw26-site-header .htw26-search-toggle:hover { color: #a2e326; background: rgba(255,255,255,.07); }
#header.htw26-site-header.is-scrolled .htw26-search-toggle,
#header.htw26-site-header.is-scrolled .htw26-menu-toggle { color: #1e394e; }
#header.htw26-site-header.is-scrolled .htw26-search-toggle:hover { color: #527f0c; background: #f1f8e9; }
#header.htw26-site-header .htw26-search-menu {
    width: min(330px,calc(100vw - 30px)); padding: 16px;
    margin-top: 12px; border: 1px solid #dfe7ec;
    border-radius: 12px; background: #fff;
    box-shadow: 0 20px 46px rgba(1,19,43,.18);
}
#header.htw26-site-header .htw26-search-form label { display: block; margin-bottom: 9px; color: #345367; font-size: 11px; font-weight: 650; }
#header.htw26-site-header .htw26-search-form input { min-width: 0; }
#header.htw26-site-header .htw26-search-form .input-group-append .btn { border-radius: 0 7px 7px 0; }
#header.htw26-site-header .htw26-menu-toggle { display: none; padding: 8px 11px; font: 600 11px/1 'Poppins',sans-serif; }
#header.htw26-site-header .htw26-menu-close-icon { display: none; }
#header.htw26-site-header .htw26-menu-toggle[aria-expanded="true"] .htw26-menu-open-icon { display: none; }
#header.htw26-site-header .htw26-menu-toggle[aria-expanded="true"] .htw26-menu-close-icon { display: inline-block; }

#hostoweb-topbar a:focus-visible,
#hostoweb-topbar button:focus-visible,
#header.htw26-site-header a:focus-visible,
#header.htw26-site-header button:focus-visible { outline: 2px solid #a2e326; outline-offset: 3px; }
/* Native WHMCS breadcrumb, clean separator. */
#header.htw26-site-header ~ .master-breadcrumb {
    background: #f7f9fc; border-top: 0; border-bottom: 1px solid #e0e8ee;
}

@media (max-width: 1199.98px) {
    #header.htw26-site-header .htw26-main-nav { min-height: 71px; }
    #header.htw26-site-header.is-scrolled .htw26-main-nav { min-height: 60px; }
    #header.htw26-site-header .htw26-nav-inner { gap: 12px; }
    #header.htw26-site-header .htw26-header-tools { margin-left: auto; }
    #header.htw26-site-header .htw26-menu-toggle { display: inline-flex; }
    #header.htw26-site-header .htw26-native-menu {
        position: absolute; margin-left: 0; top: 100%; left: 0; right: 0;
        width: 100%; max-height: calc(100vh - 75px); overflow-y: auto;
        padding: 12px max(17px,calc((100vw - 1000px)/2)) 20px;
        border-top: 1px solid rgba(255,255,255,.11);
        background: #06213a; box-shadow: 0 24px 36px rgba(1,19,43,.22);
        z-index: 1015;
    }
    #header.htw26-site-header.is-scrolled .htw26-native-menu { background: #fff; border-top-color: #e0e8ee; }
    #header.htw26-site-header .htw26-native-menu > .navbar-nav {
        flex-direction: column; align-items: stretch; gap: 1px; width: 100%;
    }
    #header.htw26-site-header .htw26-native-menu > .htw26-native-secondary {
        margin-left: 0 !important; margin-top: 12px !important;
        padding: 12px 0 0; border-top: 1px solid rgba(160,185,200,.3);
    }
    #header.htw26-site-header .htw26-native-menu > .navbar-nav > li > a {
        display: flex; justify-content: flex-start; width: 100%;
        min-height: 43px; padding: 11px 12px !important; font-size: 12px;
    }
    #header.htw26-site-header .htw26-native-menu .navbar-nav > li > a.dropdown-toggle::after { margin-left: auto; }
    #header.htw26-site-header .htw26-native-menu .dropdown-menu,
    #header.htw26-site-header .htw26-native-menu .dropdown-menu-right {
        position: static !important; transform: none !important;
        min-width: 0; max-width: 100%; width: 100%;
        margin: 0 0 8px; box-shadow: none;
    }
    #header.htw26-site-header .htw26-native-menu .collapsable-dropdown { display: none !important; }
}
@media (max-width: 767.98px) {
    .htw26-header-container { padding-left: 17px; padding-right: 17px; }
    #hostoweb-topbar .htw26-topbar-inner { gap: 6px; min-height: 42px; }
    #hostoweb-topbar .htw26-topbar-left,#hostoweb-topbar .htw26-topbar-right { gap: 8px; }
    #hostoweb-topbar .htw26-topbar-help { display: none; }
    #hostoweb-topbar .htw26-topbar-phone { font-size: 10px; gap: 6px; }
    #hostoweb-topbar .htw26-topbar-divider { height: 13px; }

    #header.htw26-site-header .htw26-brand { flex-basis: 131px; width: 131px; height: 42px; }
    #header.htw26-site-header .htw26-brand img { width: 131px; }
    #header.htw26-site-header .htw26-menu-toggle span { display: none; }
    #header.htw26-site-header .htw26-menu-toggle { min-width: 38px; padding: 7px; }
}
@media (max-width: 400px) {

    #hostoweb-topbar .htw26-topbar-phone strong { font-size: 9px; }
    #header.htw26-site-header .htw26-brand { flex-basis: 117px; width: 117px; }
    #header.htw26-site-header .htw26-brand img { width: 117px; }
}
@media (prefers-reduced-motion: reduce) {
    #header.htw26-site-header,#header.htw26-site-header .htw26-main-nav,
    #header.htw26-site-header .htw26-brand img { transition: none; }
}

/* =======================================================
   HOSTOWEB V4 — full-width header, navbar aligned right
   ======================================================= */

@media (min-width: 1200px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1220px;
  }
}

#hostoweb-topbar .htw26-topbar-inner,
#header.htw26-site-header .htw26-nav-inner { width: 100%; max-width: none; }
#header.htw26-site-header .htw26-native-menu { margin-left: auto; justify-content: flex-end; }
#header.htw26-site-header .htw26-header-tools { margin-left: 4px; }
#hostoweb-topbar.htw26-topbar { font-size: 11px; }
#hostoweb-topbar .htw26-topbar-right { gap: 12px; }
#hostoweb-topbar .htw26-active-account { display: flex; align-items: center; min-width: 0; max-width: 250px; gap: 3px; }
#hostoweb-topbar .htw26-active-account-name {
    display: inline-flex; align-items: center; gap: 7px;
    min-width: 0; max-width: 156px; color: #eaf3f7; font-size: 11px;
    font-weight: 600; line-height: 1.3; padding: 6px 5px; border-radius: 6px;
}
#hostoweb-topbar .htw26-active-account-name > span { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#hostoweb-topbar .htw26-active-account-name i { font-size: 12px; color: #a2e326; flex: 0 0 auto; }
#hostoweb-topbar .htw26-active-account-name:hover,
#hostoweb-topbar .htw26-switch-account:hover,
#hostoweb-topbar .htw26-return-admin:hover { background: rgba(255,255,255,.09); color: #a2e326; }
#hostoweb-topbar .htw26-switch-account {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    padding: 7px; border-radius: 6px; white-space: nowrap; color: #c6d6df;
    font: 600 11px/1.2 'Poppins',sans-serif;
}
#hostoweb-topbar .htw26-switch-account i { color: #a2e326; }
#hostoweb-topbar .htw26-return-admin { display: inline-flex; padding: 7px; color: #eef5f8; border-radius: 6px; }
#header.htw26-site-header .htw26-native-menu > .htw26-native-primary > li.collapsable-dropdown { display: none !important; }
/* Never hide native WHMCS items inside the desktop navigation. */
@media (min-width: 1200px) {
    #header.htw26-site-header .htw26-native-menu > .htw26-native-primary > li:not(.collapsable-dropdown) { display: block !important; }
    #header.htw26-site-header .htw26-native-menu > .navbar-nav > li > a { padding-left: 7px !important; padding-right: 7px !important; }
    #header.htw26-site-header .htw26-nav-inner { gap: 12px; }
    #header.htw26-site-header .htw26-native-menu > .htw26-native-secondary { padding-left: 3px; }
    #header.htw26-site-header .htw26-brand { flex: 0 0 225px; width: 225px; height: 79px; margin-right: 4px; }
    #header.htw26-site-header .htw26-brand img { width: 225px; max-height: 65px; }
    #header.htw26-site-header .htw26-native-menu > .navbar-nav > li > a { font-size: 11px; letter-spacing: 0; }
    #header.htw26-site-header .htw26-header-tools { gap: 0; }
}
/* Restore full HOSTOWEB scale above 1400px. */
@media (min-width: 1400px) {
    #header.htw26-site-header .htw26-brand { flex-basis: 236px; width: 236px; }
    #header.htw26-site-header .htw26-brand img { width: 236px; }
    #header.htw26-site-header .htw26-native-menu > .navbar-nav > li > a { font-size: 12px; }
}
@media (max-width: 1199.98px) {
    #hostoweb-topbar .htw26-switch-account span { display: none; }
    #hostoweb-topbar .htw26-active-account { max-width: 160px; }
    #hostoweb-topbar .htw26-active-account-name { max-width: 120px; }
    #header.htw26-site-header .htw26-brand { flex-basis: 195px; width: 195px; height: 64px; }
    #header.htw26-site-header .htw26-brand img { width: 195px; max-height: 64px; }
}
@media (max-width: 767.98px) {
    .htw26-header-container { padding-left: 14px; padding-right: 14px; }
    #hostoweb-topbar .htw26-topbar-right { gap: 5px; }
    #hostoweb-topbar .htw26-topbar-account-divider { display: none; }
    #hostoweb-topbar .htw26-active-account-name { display: none; }
    #hostoweb-topbar .htw26-active-account { max-width: 34px; }
    #hostoweb-topbar .htw26-switch-account { padding: 6px; }
    #header.htw26-site-header .htw26-brand { flex-basis: 145px; width: 145px; height: 50px; }
    #header.htw26-site-header .htw26-brand img { width: 145px; max-height: 50px; }
}
@media (max-width: 400px) {
    #header.htw26-site-header .htw26-brand { flex-basis: 126px; width: 126px; }
    #header.htw26-site-header .htw26-brand img { width: 126px; }
}