/* ============================================
   PUQ Navbar — puqvpncp.com style
   Colors: #6610f2 (primary), #0ae0b8 (accent)
   Dark: #0f172a, #1e293b
   Glass: rgba(20,14,35,.35)
   ============================================ */

/* === Main Navbar (fixed like puqvpncp.com) === */
nav.puq-navbar {
    position: fixed !important;
    top: 10px !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    margin: 0 !important;
    display: block !important;
    transition: top .3s ease !important;
}
#header.scrolled nav.puq-navbar {
    top: 10px !important;
}

nav.puq-navbar > .container {
    display: flex !important;
    align-items: center !important;
    background: rgba(20, 14, 35, 0.35) !important;
    backdrop-filter: blur(24px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 16px !important;
    padding: 10px 24px !important;
    transition: all .4s ease !important;
    gap: 8px !important;
    margin-left: 16px !important;
    margin-right: 16px !important;
    max-width: none !important;
    width: auto !important;
}
#header.scrolled nav.puq-navbar > .container {
    background: rgba(14, 9, 24, 0.55) !important;
    backdrop-filter: blur(28px) saturate(1.5) !important;
    -webkit-backdrop-filter: blur(28px) saturate(1.5) !important;
    border-color: rgba(255,255,255,.12) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.25) !important;
}

/* Light theme */
[data-bs-theme="light"] nav.puq-navbar > .container {
    background: rgba(255, 255, 255, 0.8) !important;
    border-color: rgba(0,0,0,.06) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,.04) !important;
}
[data-bs-theme="light"] #header.scrolled nav.puq-navbar > .container {
    background: rgba(255, 255, 255, 0.92) !important;
    border-color: rgba(0,0,0,.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.08) !important;
}

/* Body padding for fixed navbar */
body.primary-bg-color {
    padding-top: 100px !important;
}

/* === Logo === */
nav.puq-navbar .navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    letter-spacing: -0.01em !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}
nav.puq-navbar .logo-img {
    height: 34px !important;
    width: auto !important;
    max-width: 200px !important;
}
.logo-a { color: #6610f2 !important; font-weight: 800 !important; }
.logo-b { color: #0ae0b8 !important; font-weight: 800 !important; }
[data-bs-theme="dark"] .logo-a { color: #0ae0b8 !important; }
[data-bs-theme="dark"] .logo-b { color: #6610f2 !important; }

/* === Nav Links (primary menu) === */
nav.puq-navbar .nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-width: 0 !important;
}

/* === Nav List (menu items) === */
ul.puq-nav-list {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
}
ul.puq-nav-list > li {
    position: relative !important;
    white-space: nowrap !important;
}
ul.puq-nav-list > li > a,
ul.puq-nav-list > li > a.nav-link {
    color: rgba(255,255,255,.75) !important;
    font-size: .9rem !important;
    font-weight: 500 !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    transition: all .2s !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    border: none !important;
    background: none !important;
    font-family: 'Inter', sans-serif !important;
}
ul.puq-nav-list > li > a:hover,
ul.puq-nav-list > li.show > a {
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
}

/* Light theme nav links */
[data-bs-theme="light"] ul.puq-nav-list > li > a,
[data-bs-theme="light"] ul.puq-nav-list > li > a.nav-link {
    color: #475569 !important;
}
[data-bs-theme="light"] ul.puq-nav-list > li > a:hover,
[data-bs-theme="light"] ul.puq-nav-list > li.show > a {
    color: #0f172a !important;
    background: rgba(0,0,0,.04) !important;
}

/* === Dropdown Menus === */
ul.puq-nav-list .dropdown-menu {
    background: rgba(20, 14, 35, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    min-width: 220px !important;
    width: max-content !important;
    max-width: 90vw !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.2) !important;
    margin-top: 8px !important;
}
/* Allow dropdown content to wrap naturally */
ul.puq-nav-list .dropdown-menu li,
ul.puq-nav-list .dropdown-menu .dropdown-item,
ul.puq-nav-list .dropdown-menu li > a {
    white-space: normal !important;
}
[data-bs-theme="light"] ul.puq-nav-list .dropdown-menu {
    background: rgba(255,255,255,.97) !important;
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 16px 48px rgba(0,0,0,.1) !important;
}
ul.puq-nav-list .dropdown-menu .dropdown-item,
ul.puq-nav-list .dropdown-menu li.dropdown-item,
ul.puq-nav-list .dropdown-menu li.dropdown-item > a,
ul.puq-nav-list .dropdown-menu li > a.dropdown-item {
    color: rgba(255,255,255,.8) !important;
    font-size: .88rem !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    transition: all .15s !important;
    background: none !important;
}
ul.puq-nav-list .dropdown-menu .dropdown-item:hover,
ul.puq-nav-list .dropdown-menu li.dropdown-item:hover,
ul.puq-nav-list .dropdown-menu li.dropdown-item > a:hover,
ul.puq-nav-list .dropdown-menu li > a.dropdown-item:hover {
    background: rgba(255,255,255,.08) !important;
    color: #fff !important;
}
ul.puq-nav-list .dropdown-menu .dropdown-item i,
ul.puq-nav-list .dropdown-menu li i {
    color: #a78bfa !important;
    margin-right: 6px !important;
}
[data-bs-theme="light"] ul.puq-nav-list .dropdown-menu .dropdown-item,
[data-bs-theme="light"] ul.puq-nav-list .dropdown-menu li.dropdown-item,
[data-bs-theme="light"] ul.puq-nav-list .dropdown-menu li.dropdown-item > a,
[data-bs-theme="light"] ul.puq-nav-list .dropdown-menu li > a.dropdown-item {
    color: #475569 !important;
}
[data-bs-theme="light"] ul.puq-nav-list .dropdown-menu .dropdown-item:hover,
[data-bs-theme="light"] ul.puq-nav-list .dropdown-menu li.dropdown-item > a:hover,
[data-bs-theme="light"] ul.puq-nav-list .dropdown-menu li > a.dropdown-item:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
[data-bs-theme="light"] ul.puq-nav-list .dropdown-menu .dropdown-item i,
[data-bs-theme="light"] ul.puq-nav-list .dropdown-menu li i {
    color: var(--bs-primary) !important;
}

/* === Nav Actions (pushed right) === */
nav.puq-navbar .nav-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
}

/* Search box */
/* === Search Dropdown (appears below search icon) === */
.puq-search-wrapper {
    position: relative !important;
}
.puq-search-dropdown {
    position: absolute !important;
    top: calc(100% + 10px) !important;
    right: 0 !important;
    width: 360px !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s !important;
    z-index: 1050 !important;
}
.puq-search-dropdown.open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}
.puq-search-bar {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: rgba(20, 14, 35, 0.85) !important;
    backdrop-filter: blur(24px) saturate(1.4) !important;
    -webkit-backdrop-filter: blur(24px) saturate(1.4) !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.3) !important;
}
.puq-search-bar > i {
    color: rgba(255,255,255,.4) !important;
    font-size: 1rem !important;
    flex-shrink: 0 !important;
}
.puq-search-input {
    background: none !important;
    border: none !important;
    outline: none !important;
    color: #e2e8f0 !important;
    font-size: .9rem !important;
    font-family: 'Inter', sans-serif !important;
    width: 100% !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.puq-search-input::placeholder {
    color: rgba(255,255,255,.35) !important;
}
.puq-search-close {
    background: none !important;
    border: none !important;
    color: rgba(255,255,255,.4) !important;
    cursor: pointer !important;
    padding: 4px !important;
    border-radius: 6px !important;
    display: flex !important;
    align-items: center !important;
    transition: all .2s !important;
    flex-shrink: 0 !important;
}
.puq-search-close:hover {
    color: #fff !important;
    background: rgba(255,255,255,.1) !important;
}
/* Light theme search dropdown */
[data-bs-theme="light"] .puq-search-bar {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0,0,0,.08) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.1) !important;
}
[data-bs-theme="light"] .puq-search-bar > i {
    color: #94a3b8 !important;
}
[data-bs-theme="light"] .puq-search-input {
    color: #0f172a !important;
}
[data-bs-theme="light"] .puq-search-input::placeholder {
    color: #94a3b8 !important;
}
[data-bs-theme="light"] .puq-search-close {
    color: #94a3b8 !important;
}
[data-bs-theme="light"] .puq-search-close:hover {
    color: #0f172a !important;
    background: rgba(0,0,0,.04) !important;
}

/* === Notifications Popover (WHMCS uses popover-user-notifications class) === */
.popover-user-notifications {
    --bs-popover-max-width: 360px !important;
    --bs-popover-border-color: var(--bs-border-color) !important;
    --bs-popover-bg: var(--bs-card-bg) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.15) !important;
}
.popover-user-notifications .popover-body {
    padding: 0 !important;
}
.popover-user-notifications .client-alerts {
    list-style: none !important;
    margin: 0 !important;
    padding: 8px !important;
}
.popover-user-notifications .client-alerts li a {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    color: var(--bs-body-color) !important;
    transition: background .15s !important;
}
.popover-user-notifications .client-alerts li a:hover {
    background: var(--bs-tertiary-bg) !important;
}
.popover-user-notifications .client-alerts li a i {
    color: var(--bs-primary) !important;
    font-size: 1.1rem !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
}
.popover-user-notifications .client-alerts .message {
    font-size: .85rem !important;
    line-height: 1.4 !important;
}
.popover-user-notifications .client-alerts li.none {
    padding: 12px !important;
    text-align: center !important;
    color: var(--bs-secondary-color) !important;
    font-size: .85rem !important;
}
[data-bs-theme="dark"] .popover-user-notifications {
    box-shadow: 0 8px 32px rgba(0,0,0,.4) !important;
}

/* Mobile search */
.puq-offcanvas .nav-search-box.mobile {
    width: 100% !important;
    padding: 10px 14px !important;
    background: rgba(255,255,255,.05) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}
.puq-offcanvas .nav-search-box.mobile i {
    color: rgba(255,255,255,.4) !important;
}
.puq-offcanvas .nav-search-input {
    background: none !important;
    border: none !important;
    outline: none !important;
    color: #e2e8f0 !important;
    font-size: .9rem !important;
    width: 100% !important;
    padding: 0 !important;
    box-shadow: none !important;
}
[data-bs-theme="light"] .puq-offcanvas .nav-search-box.mobile {
    background: #f1f5f9 !important;
    border-color: #e2e8f0 !important;
}
[data-bs-theme="light"] .puq-offcanvas .nav-search-input {
    color: #0f172a !important;
}

/* Icon buttons (theme toggle, cart) */
nav.puq-navbar .nav-icon-btn {
    background: none !important;
    border: none !important;
    color: rgba(255,255,255,.6) !important;
    font-size: 1.1rem !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    position: relative !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
    transition: all .2s !important;
}
nav.puq-navbar .nav-icon-btn:hover {
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
}
[data-bs-theme="light"] nav.puq-navbar .nav-icon-btn {
    color: #64748b !important;
}
[data-bs-theme="light"] nav.puq-navbar .nav-icon-btn:hover {
    color: #0f172a !important;
    background: rgba(0,0,0,.04) !important;
}

/* Cart badge */
nav.puq-navbar .cart-badge {
    position: absolute !important;
    top: 1px !important;
    right: 1px !important;
    background: var(--bs-primary) !important;
    color: #fff !important;
    font-size: .6rem !important;
    font-weight: 700 !important;
    width: 16px !important;
    height: 16px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    padding: 0 !important;
}
[data-bs-theme="dark"] nav.puq-navbar .cart-badge {
    color: #0f172a !important;
}

/* Hamburger toggle */
nav.puq-navbar .nav-toggle {
    background: none !important;
    border: none !important;
    font-size: 1.5rem !important;
    color: rgba(255,255,255,.8) !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    border-radius: 8px !important;
    transition: all .2s !important;
}
nav.puq-navbar .nav-toggle:hover {
    color: #fff !important;
    background: rgba(255,255,255,.08) !important;
}
[data-bs-theme="light"] nav.puq-navbar .nav-toggle {
    color: #475569 !important;
}

/* === Mobile Menu === */
/* === Offcanvas Mobile Menu === */
.puq-offcanvas {
    background: rgba(14, 9, 24, 0.98) !important;
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    border-left: 1px solid rgba(255,255,255,.08) !important;
    color: #e2e8f0 !important;
    width: 320px !important;
    max-width: 85vw !important;
}
.puq-offcanvas .offcanvas-header {
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    padding: 16px 20px !important;
}
.puq-offcanvas .offcanvas-body {
    padding: 16px 20px !important;
}
[data-bs-theme="light"] .puq-offcanvas {
    background: rgba(255,255,255,.98) !important;
    border-left: 1px solid #e2e8f0 !important;
    color: #1e293b !important;
}
[data-bs-theme="light"] .puq-offcanvas .offcanvas-header {
    border-bottom: 1px solid #e2e8f0 !important;
}
[data-bs-theme="light"] .puq-offcanvas .btn-close {
    filter: none !important;
}
[data-bs-theme="light"] .puq-offcanvas hr {
    border-color: #e2e8f0 !important;
}
ul.puq-mobile-nav {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
ul.puq-mobile-nav > li {
    width: 100% !important;
}
ul.puq-mobile-nav > li > a,
ul.puq-mobile-nav > li > a.nav-link {
    color: rgba(255,255,255,.8) !important;
    font-weight: 500 !important;
    padding: 12px 14px !important;
    border-radius: 10px !important;
    font-size: .95rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    border: none !important;
    background: none !important;
    transition: background .15s !important;
}
ul.puq-mobile-nav > li > a:hover {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
}
[data-bs-theme="light"] ul.puq-mobile-nav > li > a,
[data-bs-theme="light"] ul.puq-mobile-nav > li > a.nav-link {
    color: #475569 !important;
}
[data-bs-theme="light"] ul.puq-mobile-nav > li > a:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}
/* Hide collapsable-dropdown (More) in offcanvas */
.puq-offcanvas .collapsable-dropdown {
    display: none !important;
}
/* Mobile dropdown: hidden by default, shown when parent has .show */
ul.puq-mobile-nav .dropdown-menu {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 4px 12px !important;
    margin: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    display: none;
    border-radius: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    float: none !important;
    overflow: hidden !important;
}
ul.puq-mobile-nav .dropdown-menu[data-bs-popper] {
    position: static !important;
    inset: auto !important;
    transform: none !important;
}
ul.puq-mobile-nav .dropdown.show > .dropdown-menu,
ul.puq-mobile-nav .dropdown-menu.show {
    display: block !important;
    position: static !important;
    inset: auto !important;
    transform: none !important;
    overflow: visible !important;
}
/* Dropdown toggle arrow rotation in mobile */
ul.puq-mobile-nav .dropdown-toggle::after,
ul.puq-mobile-nav .dropdown > .nav-link[data-mobile-dropdown]::after {
    transition: transform .2s !important;
    margin-left: auto !important;
}
ul.puq-mobile-nav .dropdown > .nav-link[data-mobile-dropdown]:not(.dropdown-toggle)::after {
    display: inline-block !important;
    content: "" !important;
    border-top: .3em solid !important;
    border-right: .3em solid transparent !important;
    border-bottom: 0 !important;
    border-left: .3em solid transparent !important;
    vertical-align: .255em !important;
    margin-left: auto !important;
}
ul.puq-mobile-nav .show > .dropdown-toggle::after,
ul.puq-mobile-nav .show > .nav-link[data-mobile-dropdown]::after {
    transform: rotate(180deg) !important;
}
/* Make mobile dropdown toggle full width */
ul.puq-mobile-nav .dropdown > .nav-link {
    justify-content: flex-start !important;
    width: 100% !important;
}
ul.puq-mobile-nav .dropdown-menu .dropdown-item,
ul.puq-mobile-nav .dropdown-menu li > a {
    color: rgba(255,255,255,.55) !important;
    font-size: .88rem !important;
    padding: 9px 14px 9px 20px !important;
    border-radius: 8px !important;
    background: none !important;
    border-left: 2px solid rgba(102,16,242,.3) !important;
    margin-left: 4px !important;
}
[data-bs-theme="light"] ul.puq-mobile-nav .dropdown-menu .dropdown-item,
[data-bs-theme="light"] ul.puq-mobile-nav .dropdown-menu li > a {
    color: #64748b !important;
    border-left-color: rgba(102,16,242,.2) !important;
}

/* Custom HTML content inside mobile dropdown (product cards, etc.) */
ul.puq-mobile-nav .dropdown-menu .row,
ul.puq-mobile-nav .dropdown-menu .card,
ul.puq-mobile-nav .dropdown-menu .col,
ul.puq-mobile-nav .dropdown-menu [class*="col-"] {
    color: #cbd5e1 !important;
}
ul.puq-mobile-nav .dropdown-menu .card {
    background: rgba(255,255,255,.04) !important;
    border: 1px solid rgba(255,255,255,.08) !important;
    border-radius: 10px !important;
    margin-bottom: 8px !important;
    padding: 12px !important;
}
[data-bs-theme="light"] ul.puq-mobile-nav .dropdown-menu .card {
    background: #f8fafc !important;
    border-color: #e2e8f0 !important;
}
ul.puq-mobile-nav .dropdown-menu .card h3,
ul.puq-mobile-nav .dropdown-menu .card h4,
ul.puq-mobile-nav .dropdown-menu .card h5,
ul.puq-mobile-nav .dropdown-menu .card strong {
    color: #e2e8f0 !important;
    font-size: .9rem !important;
}
[data-bs-theme="light"] ul.puq-mobile-nav .dropdown-menu .card h3,
[data-bs-theme="light"] ul.puq-mobile-nav .dropdown-menu .card h4,
[data-bs-theme="light"] ul.puq-mobile-nav .dropdown-menu .card h5,
[data-bs-theme="light"] ul.puq-mobile-nav .dropdown-menu .card strong {
    color: #0f172a !important;
}
ul.puq-mobile-nav .dropdown-menu .card a {
    color: #a78bfa !important;
    font-size: .85rem !important;
    border-left: none !important;
    margin-left: 0 !important;
    padding: 4px 0 !important;
}
ul.puq-mobile-nav .dropdown-menu .card a:hover {
    color: #c4b5fd !important;
}
[data-bs-theme="light"] ul.puq-mobile-nav .dropdown-menu .card a {
    color: var(--bs-primary) !important;
}

/* Make custom HTML dropdown content stack vertically in mobile */
ul.puq-mobile-nav .dropdown-menu .row {
    flex-direction: column !important;
}
ul.puq-mobile-nav .dropdown-menu [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
}

/* Ensure all nested content is visible */
ul.puq-mobile-nav .dropdown-menu * {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
}
ul.puq-mobile-nav .dropdown-menu .dropdown-divider {
    border-color: rgba(255,255,255,.06) !important;
}
[data-bs-theme="light"] ul.puq-mobile-nav .dropdown-menu .dropdown-divider {
    border-color: #e2e8f0 !important;
}

/* White text for any custom content */
ul.puq-mobile-nav .dropdown-menu h1,
ul.puq-mobile-nav .dropdown-menu h2,
ul.puq-mobile-nav .dropdown-menu h3,
ul.puq-mobile-nav .dropdown-menu h4,
ul.puq-mobile-nav .dropdown-menu h5,
ul.puq-mobile-nav .dropdown-menu h6,
ul.puq-mobile-nav .dropdown-menu p,
ul.puq-mobile-nav .dropdown-menu span,
ul.puq-mobile-nav .dropdown-menu div {
    color: inherit !important;
}
ul.puq-mobile-nav .dropdown-menu img {
    max-height: 40px !important;
    width: auto !important;
}
ul.puq-mobile-nav .dropdown-menu .dropdown-item:hover,
ul.puq-mobile-nav .dropdown-menu li > a:hover {
    background: rgba(255,255,255,.06) !important;
    color: #fff !important;
}

/* Badge */
ul.puq-nav-list .badge,
ul.puq-mobile-nav .badge {
    background: var(--bs-primary) !important;
    color: #fff !important;
    font-size: .7rem !important;
    padding: 2px 7px !important;
    border-radius: 50px !important;
}

/* === Breadcrumb === */
.master-breadcrumb {
    background: transparent !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    border: none !important;
}
.master-breadcrumb .breadcrumb {
    margin: 0 !important;
    padding: 6px 0 !important;
    font-size: .85rem !important;
    background: none !important;
}
.master-breadcrumb .breadcrumb-item a {
    color: #a78bfa !important;
    text-decoration: none !important;
}
.master-breadcrumb .breadcrumb-item a:hover {
    color: #c4b5fd !important;
}
.master-breadcrumb .breadcrumb-item.active {
    color: #64748b !important;
}
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #475569 !important;
}
[data-bs-theme="light"] .master-breadcrumb .breadcrumb-item a {
    color: var(--bs-primary) !important;
}
[data-bs-theme="light"] .master-breadcrumb .breadcrumb-item a:hover {
    color: #5a0dc8 !important;
}
[data-bs-theme="light"] .master-breadcrumb .breadcrumb-item.active {
    color: #94a3b8 !important;
}

/* === Responsive === */
@media (max-width: 1199.98px) {
    nav.puq-navbar .nav-links {
        display: none !important;
    }
    nav.puq-navbar .nav-actions > ul.puq-nav-list {
        display: none !important;
    }
    body.primary-bg-color {
        padding-top: 80px !important;
    }
}
@media (max-width: 767.98px) {
    nav.puq-navbar > .container {
        padding: 8px 16px !important;
    }
}

/* === Fix white gap above topbar === */
header#header {
    position: relative !important;
}
header#header::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 46px !important;
    background: #0f172a !important;
    z-index: 999 !important;
    transition: opacity .3s ease !important;
}
#header.scrolled::before {
    opacity: 0 !important;
    pointer-events: none !important;
}
/* When no topbar (not logged in), hide the dark strip */
header#header:not(:has(.topbar))::before {
    display: none !important;
}

/* === Smooth theme transition === */
body.primary-bg-color,
.card,
.card-header,
.card-footer,
.form-control,
.form-select,
.input-group-text,
.table,
.list-group-item,
.modal-content,
.breadcrumb,
.alert,
footer.footer,
.sidebar,
.master-breadcrumb,
#header .topbar,
header#header::before {
    transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease !important;
}
nav.puq-navbar > .container,
nav.puq-navbar .nav-search-box,
nav.puq-navbar .nav-icon-btn,
ul.puq-nav-list > li > a,
ul.puq-nav-list .dropdown-menu,
ul.puq-nav-list .dropdown-item,
.puq-offcanvas {
    transition: all .4s ease !important;
}

/* Light theme topbar strip */
[data-bs-theme="light"] header#header::before {
    background: #f1f5f9 !important;
}
[data-bs-theme="light"] #header .topbar {
    background: #f1f5f9 !important;
    border-bottom: 1px solid #e2e8f0 !important;
}
[data-bs-theme="light"] #header .topbar .topbar-btn {
    color: #64748b !important;
}
[data-bs-theme="light"] #header .topbar .topbar-btn:hover {
    color: #0f172a !important;
    background: rgba(0,0,0,.04) !important;
}
[data-bs-theme="light"] #header .topbar .topbar-user {
    color: #475569 !important;
}
[data-bs-theme="light"] #header .topbar .topbar-user:hover {
    color: #0f172a !important;
    background: rgba(0,0,0,.04) !important;
}
[data-bs-theme="light"] #header .topbar .topbar-user i {
    color: var(--bs-primary) !important;
}

/* === Domain Search Block — dark theme fix === */
[data-bs-theme="dark"] .home-domain-search,
[data-bs-theme="dark"] .home-domain-search.bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border: 1px solid #334155 !important;
}
[data-bs-theme="dark"] .home-domain-search h2 {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .home-domain-search .input-group-wrapper {
    background-color: #0f172a !important;
    border-color: #475569 !important;
}
[data-bs-theme="dark"] .home-domain-search .input-group-wrapper .form-control,
[data-bs-theme="dark"] .home-domain-search .form-control {
    background-color: transparent !important;
    color: #e2e8f0 !important;
    border-color: transparent !important;
}
[data-bs-theme="dark"] .home-domain-search .form-control::placeholder {
    color: #64748b !important;
}
[data-bs-theme="dark"] .home-domain-search .btn-link {
    color: #a78bfa !important;
}
[data-bs-theme="dark"] .home-domain-search .btn-link:hover {
    color: #c4b5fd !important;
}
[data-bs-theme="dark"] .home-domain-search .tld-logos {
    color: #64748b !important;
}
/* Light theme — ensure proper styling */
[data-bs-theme="light"] .home-domain-search,
[data-bs-theme="light"] .home-domain-search.bg-white {
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
}
.home-domain-search {
    transition: background-color .4s ease, color .4s ease, border-color .4s ease !important;
}

/* ============================================
   Dark theme fixes for WHMCS components
   (cart, tabs, forms, order summary, etc.)
   ============================================ */

/* --- Tabs --- */
[data-bs-theme="dark"] .nav-tabs {
    border-bottom-color: #334155 !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link {
    color: #94a3b8 !important;
    border-color: transparent !important;
}
[data-bs-theme="dark"] .nav-tabs .nav-link.active,
[data-bs-theme="dark"] .nav-tabs .nav-link:hover {
    color: #e2e8f0 !important;
    background-color: #1e293b !important;
    border-color: #334155 #334155 #1e293b !important;
}

/* --- View Cart Tabs --- */
[data-bs-theme="dark"] .view-cart-tabs {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
[data-bs-theme="dark"] .view-cart-tabs .tab-content {
    background-color: #1e293b !important;
}
[data-bs-theme="dark"] .view-cart-tabs .promo .form-control,
[data-bs-theme="dark"] .view-cart-tabs .form-control {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
[data-bs-theme="dark"] .view-cart-tabs .field-icon {
    color: #64748b !important;
}

/* --- Order Summary --- */
[data-bs-theme="dark"] .order-summary {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
[data-bs-theme="dark"] .order-summary h2 {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .order-summary .subtotal,
[data-bs-theme="dark"] .order-summary .recurring-totals {
    border-color: #334155 !important;
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .order-summary .total-due-today {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .order-summary .total-due-today .amt {
    color: var(--bs-info) !important;
}

/* --- Forms global dark --- */
[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme="dark"] select.form-control {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 .2rem rgba(102,16,242,.2) !important;
}
[data-bs-theme="dark"] .form-control::placeholder {
    color: #64748b !important;
}
[data-bs-theme="dark"] .input-group-text {
    background-color: #1e293b !important;
    color: #94a3b8 !important;
    border-color: #475569 !important;
}
[data-bs-theme="dark"] label,
[data-bs-theme="dark"] .form-label,
[data-bs-theme="dark"] .control-label {
    color: #cbd5e1 !important;
}

/* --- Tables --- */
[data-bs-theme="dark"] .table {
    color: #e2e8f0 !important;
    --bs-table-bg: transparent !important;
}
[data-bs-theme="dark"] .table thead th {
    background-color: rgba(102,16,242,.15) !important;
    color: #e2e8f0 !important;
    border-color: #334155 !important;
}
[data-bs-theme="dark"] .table td {
    border-color: #1e293b !important;
    color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,.02) !important;
}
[data-bs-theme="dark"] .table-hover tbody tr:hover {
    background-color: rgba(255,255,255,.04) !important;
}

/* --- Buttons dark refinement --- */
[data-bs-theme="dark"] .btn-default {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
[data-bs-theme="dark"] .btn-default:hover {
    background-color: #475569 !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .btn-primary {
    background: #0ae0b8 !important;
    border-color: #0ae0b8 !important;
    color: #0f172a !important;
}
[data-bs-theme="dark"] .btn-primary:hover {
    background: #08b896 !important;
    border-color: #08b896 !important;
    box-shadow: 0 4px 16px rgba(10,224,184,.35) !important;
}
[data-bs-theme="dark"] .btn-success {
    background: #22c55e !important;
    border-color: #22c55e !important;
}
[data-bs-theme="dark"] .btn-outline-primary {
    color: #a78bfa !important;
    border-color: var(--bs-primary) !important;
}
[data-bs-theme="dark"] .btn-outline-primary:hover {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .btn-link {
    color: #a78bfa !important;
}

/* --- Cards dark --- */
[data-bs-theme="dark"] .card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
[data-bs-theme="dark"] .card-header {
    background-color: rgba(255,255,255,.03) !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .card-body {
    color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .card-footer {
    border-color: #334155 !important;
}

/* --- Sidebar dark --- */
[data-bs-theme="dark"] .card-sidebar {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
[data-bs-theme="dark"] .card-sidebar .card-header {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .list-group-item {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .list-group-item.active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .list-group-item:hover:not(.active) {
    background-color: rgba(255,255,255,.04) !important;
}
[data-bs-theme="dark"] .list-group-item a {
    color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .list-group-item.active a {
    color: #fff !important;
}

/* --- Footer dark --- */
[data-bs-theme="dark"] footer.footer {
    background-color: #020617 !important;
    color: #64748b !important;
    border-top: 1px solid #1e293b !important;
}
[data-bs-theme="dark"] footer.footer a {
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] footer.footer a:hover {
    color: #e2e8f0 !important;
}

/* --- Modals dark --- */
[data-bs-theme="dark"] .modal-content {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
[data-bs-theme="dark"] .modal-header {
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .modal-footer {
    border-color: #334155 !important;
}
[data-bs-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%) !important;
}

/* --- Alerts dark --- */
[data-bs-theme="dark"] .alert-info {
    background-color: rgba(8,145,178,.15) !important;
    border-color: rgba(8,145,178,.3) !important;
    color: #67e8f9 !important;
}
[data-bs-theme="dark"] .alert-success {
    background-color: rgba(22,163,74,.15) !important;
    border-color: rgba(22,163,74,.3) !important;
    color: #86efac !important;
}
[data-bs-theme="dark"] .alert-warning {
    background-color: rgba(217,119,6,.15) !important;
    border-color: rgba(217,119,6,.3) !important;
    color: #fcd34d !important;
}
[data-bs-theme="dark"] .alert-danger {
    background-color: rgba(220,38,38,.15) !important;
    border-color: rgba(220,38,38,.3) !important;
    color: #fca5a5 !important;
}

/* --- Pagination dark --- */
[data-bs-theme="dark"] .page-link {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #a78bfa !important;
}
[data-bs-theme="dark"] .page-link:hover {
    background-color: #334155 !important;
    color: #c4b5fd !important;
}
[data-bs-theme="dark"] .page-item.active .page-link {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}

/* --- Loading overlay / spinner --- */
[data-bs-theme="dark"] #fullpage-overlay {
    background-color: rgba(15,23,42,.8) !important;
}

/* --- Text colors --- */
[data-bs-theme="dark"] .text-muted {
    color: #64748b !important;
}
[data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2,
[data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4,
[data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6 {
    color: #e2e8f0 !important;
}

/* --- Secondary cart sidebar --- */
[data-bs-theme="dark"] .secondary-cart-sidebar .order-summary {
    background: linear-gradient(135deg, #1e1045, #1e293b) !important;
    border: 1px solid #334155 !important;
    border-radius: 16px !important;
}

/* --- Promo / field icon --- */
[data-bs-theme="dark"] .prepend-icon .field-icon {
    color: #64748b !important;
}

/* --- Select / custom-select --- */
[data-bs-theme="dark"] .custom-select,
[data-bs-theme="dark"] select.custom-select {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}

/* ============================================
   Dark theme: TLD pricing, promo boxes,
   intl-tel-input, bg-white overrides
   ============================================ */

/* --- Override all bg-white in dark mode --- */
[data-bs-theme="dark"] .bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}

/* --- TLD Pricing Table --- */
[data-bs-theme="dark"] .tld-pricing-header {
    background-color: rgba(102,16,242,.12) !important;
    color: #e2e8f0 !important;
    font-weight: 600 !important;
}
[data-bs-theme="dark"] .tld-row {
    border-color: #1e293b !important;
    color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .tld-row.highlighted {
    background-color: rgba(255,255,255,.02) !important;
}
[data-bs-theme="dark"] .tld-row strong {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .tld-row small {
    color: #64748b !important;
}
[data-bs-theme="dark"] .tld-row.no-tlds {
    color: #64748b !important;
}
[data-bs-theme="dark"] .tld-filters .badge {
    background-color: #334155 !important;
    color: #94a3b8 !important;
    border: 1px solid #475569 !important;
}
[data-bs-theme="dark"] .tld-filters .text-bg-success,
[data-bs-theme="dark"] .tld-filters .badge-success {
    background-color: #059669 !important;
    color: #fff !important;
    border-color: #059669 !important;
}

/* --- Domain Promo Boxes --- */
[data-bs-theme="dark"] .domain-promo-box {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .domain-promo-box h3 {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .domain-promo-box p {
    color: #94a3b8 !important;
}

/* --- intl-tel-input Country Dropdown --- */
[data-bs-theme="dark"] .iti__dropdown-content,
[data-bs-theme="dark"] .intl-tel-input .country-list,
[data-bs-theme="dark"] .iti .iti__dropdown-content,
[data-bs-theme="dark"] .iti__country-list {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.4) !important;
}
[data-bs-theme="dark"] .iti__country,
[data-bs-theme="dark"] .intl-tel-input .country-list .country {
    color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .iti__country:hover,
[data-bs-theme="dark"] .iti__country--highlight,
[data-bs-theme="dark"] .intl-tel-input .country-list .country:hover,
[data-bs-theme="dark"] .intl-tel-input .country-list .country.highlight {
    background-color: #334155 !important;
    color: #fff !important;
}
[data-bs-theme="dark"] .iti__country-name {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .iti__dial-code {
    color: #64748b !important;
}
[data-bs-theme="dark"] .iti__search-input,
[data-bs-theme="dark"] .iti input.iti__search-input {
    background-color: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
[data-bs-theme="dark"] .iti__selected-flag,
[data-bs-theme="dark"] .intl-tel-input .selected-flag {
    background-color: transparent !important;
}
[data-bs-theme="dark"] .iti__selected-dial-code {
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .iti__arrow {
    border-top-color: #94a3b8 !important;
}
[data-bs-theme="dark"] .iti__arrow--up {
    border-bottom-color: #94a3b8 !important;
}
/* intl-tel-input container border */
[data-bs-theme="dark"] .iti {
    border-color: #475569 !important;
}

/* --- Select2 / custom dropdowns dark --- */
[data-bs-theme="dark"] .select2-container--default .select2-selection {
    background-color: #0f172a !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .select2-dropdown {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}
[data-bs-theme="dark"] .select2-results__option {
    color: #cbd5e1 !important;
}
[data-bs-theme="dark"] .select2-results__option--highlighted {
    background-color: #334155 !important;
    color: #fff !important;
}

/* --- Featured TLD section --- */
[data-bs-theme="dark"] .featured-tld {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .featured-tld .price {
    color: var(--bs-info) !important;
}

/* === Mega-menu dark theme overrides (inline styles from WHMCS) === */
[data-bs-theme="dark"] .puq-offcanvas .mega-menu-li a[style*="color:#555"],
[data-bs-theme="dark"] .puq-offcanvas .mega-menu-li a[style*="color: #555"],
[data-bs-theme="dark"] .puq-offcanvas .dropdown-menu a[style*="color:#555"],
[data-bs-theme="dark"] .puq-offcanvas .dropdown-menu a[style*="color: #555"] {
    color: #94a3b8 !important;
}
[data-bs-theme="dark"] .puq-offcanvas .mega-menu-li a:hover,
[data-bs-theme="dark"] .puq-offcanvas .dropdown-menu .mega-menu-li a:hover {
    color: #e2e8f0 !important;
}
[data-bs-theme="dark"] .puq-offcanvas .mega-menu-li,
[data-bs-theme="dark"] .puq-offcanvas .dropdown-menu .mega-menu-li {
    background: transparent !important;
    border: none !important;
}
/* Override min-width for mega-menu in mobile */
.puq-offcanvas .mega-menu-li .row,
.puq-offcanvas .dropdown-menu .row {
    min-width: 0 !important;
    flex-direction: column !important;
}
.puq-offcanvas .mega-menu-li [class*="col-"],
.puq-offcanvas .dropdown-menu [class*="col-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    padding: 8px 0 !important;
}
.puq-offcanvas .mega-menu-li h5 {
    font-size: .85rem !important;
}

/* === Hide "Powered by WHMCompleteSolution" === */
footer.footer p.copyright + p,
footer.footer a[href*="whmcs.com"],
p:has(> a[href*="whmcs.com"]),
a[href*="WHMCompleteSolution"],
a[href*="whmcompletesolution"] {
    display: none !important;
}