/* ================================================================
   2HTRONICS PREMIUM HEADER
   Upload as: /templates/YOUR-TEMPLATE/css/custom.css
   Scoped to .premium-tech-header so the rest of WHMCS stays intact.
   ================================================================ */

:root {
    --2h-navy-950: #030916;
    --2h-navy-900: #071225;
    --2h-navy-800: #0b1d3b;
    --2h-blue: #1672ff;
    --2h-blue-bright: #35a2ff;
    --2h-white: #ffffff;
    --2h-muted: #b8c8df;
}

/* Main header shell */
.premium-tech-header {
    position: relative;
    color: var(--2h-white);
    background:
        radial-gradient(circle at 15% 15%, rgba(22, 114, 255, .22), transparent 34%),
        radial-gradient(circle at 88% 75%, rgba(22, 114, 255, .14), transparent 33%),
        linear-gradient(135deg, var(--2h-navy-950) 0%, var(--2h-navy-900) 46%, #051736 100%);
    border-bottom: 1px solid rgba(53, 162, 255, .65);
    box-shadow: 0 9px 26px rgba(0, 18, 55, .28);
    overflow: visible;
}

/* Subtle circuit-line effect without a separate background image */
.premium-tech-header::before,
.premium-tech-header::after {
    content: "";
    position: absolute;
    pointer-events: none;
    opacity: .21;
    z-index: 0;
}

.premium-tech-header::before {
    right: -4%;
    bottom: 54px;
    width: 48%;
    height: 120px;
    background:
        linear-gradient(135deg, transparent 0 35%, rgba(22,114,255,.55) 35% 36%, transparent 36% 48%, rgba(53,162,255,.32) 48% 49%, transparent 49%),
        linear-gradient(155deg, transparent 0 52%, rgba(22,114,255,.42) 52% 53%, transparent 53%);
    filter: drop-shadow(0 0 7px rgba(22,114,255,.5));
}

.premium-tech-header::after {
    left: -2%;
    top: 15px;
    width: 300px;
    height: 150px;
    background-image:
        linear-gradient(30deg, rgba(22,114,255,.12) 12%, transparent 12.5%, transparent 87%, rgba(22,114,255,.12) 87.5%),
        linear-gradient(150deg, rgba(22,114,255,.12) 12%, transparent 12.5%, transparent 87%, rgba(22,114,255,.12) 87.5%),
        linear-gradient(30deg, rgba(22,114,255,.12) 12%, transparent 12.5%, transparent 87%, rgba(22,114,255,.12) 87.5%);
    background-size: 42px 74px;
}

/* Keep actual header content above decorative effects */
.premium-tech-header > * {
    position: relative;
    z-index: 1;
}

/* Logged-in top bar */
.premium-tech-header .topbar {
    background: rgba(0, 0, 0, .24);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

.premium-tech-header .topbar .btn,
.premium-tech-header .topbar .input-group-text {
    color: #eaf3ff;
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.12);
}

.premium-tech-header .topbar .btn:hover {
    background: rgba(22,114,255,.22);
    color: #fff;
}

/* Upper logo/search/cart row */
.premium-tech-header > .navbar.navbar-light {
    min-height: 118px;
    padding-top: 8px;
    padding-bottom: 8px;
    background: transparent;
}

.premium-tech-header .navbar-brand {
    display: flex;
    align-items: center;
    max-width: 610px;
    width: min(54vw, 610px);
    padding: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.premium-tech-header .navbar-brand picture {
    display: block;
    width: 100%;
}

.premium-tech-header .premium-logo-img {
    display: block;
    width: 100%;
    max-width: 610px;
    height: 110px;
    object-fit: contain;
    object-position: left center;
    border-radius: 5px;
    mix-blend-mode: screen;
    filter: drop-shadow(0 0 14px rgba(22,114,255,.28));
}

/* Search */
.premium-tech-header .input-group.search {
    min-width: 365px;
}

.premium-tech-header .input-group.search .btn,
.premium-tech-header .input-group.search .form-control {
    color: #f3f7ff;
    background: rgba(3, 12, 29, .76);
    border-color: rgba(130, 190, 255, .62);
    border-radius: 10px;
}

.premium-tech-header .input-group.search .form-control::placeholder {
    color: #a8bad2;
}

.premium-tech-header .input-group.search .form-control:focus {
    border-color: var(--2h-blue-bright);
    box-shadow: 0 0 0 .18rem rgba(22,114,255,.18), 0 0 14px rgba(53,162,255,.22);
}

/* Cart and mobile menu controls */
.premium-tech-header .toolbar .nav-link {
    color: #fff;
    background: linear-gradient(180deg, rgba(22,114,255,.25), rgba(4,18,43,.55));
    border: 1px solid rgba(53,162,255,.42);
    border-radius: 9px;
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.premium-tech-header .toolbar .nav-link:hover {
    color: #fff;
    background: rgba(22,114,255,.42);
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(22,114,255,.22);
}

/* Main navigation */
.premium-tech-header .main-navbar-wrapper {
    background: rgba(14, 35, 69, .94);
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(53,162,255,.3);
    backdrop-filter: blur(6px);
}

.premium-tech-header .main-navbar-wrapper .nav-link {
    position: relative;
    color: #ffffff;
    font-weight: 600;
    letter-spacing: .015em;
    transition: color .2s ease;
}

.premium-tech-header .main-navbar-wrapper .nav-link:hover,
.premium-tech-header .main-navbar-wrapper .nav-item.active > .nav-link,
.premium-tech-header .main-navbar-wrapper .nav-link.active {
    color: #43b4ff;
}

.premium-tech-header .main-navbar-wrapper .nav-link::after {
    content: "";
    position: absolute;
    left: .75rem;
    right: .75rem;
    bottom: .32rem;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--2h-blue-bright), transparent);
    transform: scaleX(0);
    transition: transform .2s ease;
    box-shadow: 0 0 14px rgba(80,190,255,.95);
}

.premium-tech-header .main-navbar-wrapper .nav-link:hover::after,
.premium-tech-header .main-navbar-wrapper .nav-item.active > .nav-link::after {
    transform: scaleX(1);
}

/* Dropdown menus */
.premium-tech-header .dropdown-menu {
    color: #eaf3ff;
    background: #08162c;
    border: 1px solid rgba(53,162,255,.34);
    box-shadow: 0 12px 28px rgba(0,0,0,.34);
}

.premium-tech-header .dropdown-item {
    color: #eaf3ff;
}

.premium-tech-header .account a,
.premium-tech-header .dropdown-toggle {
    color: #ffffff !important;
}

.premium-tech-header .account a:hover,
.premium-tech-header .dropdown-toggle:hover {
    color: #43b4ff !important;
}

.premium-tech-header .dropdown-item:hover,
.premium-tech-header .dropdown-item:focus {
    color: #fff;
    background: rgba(22,114,255,.26);
}

/* Breadcrumb coordinates with the new header */
.master-breadcrumb {
    border-bottom: 1px solid #d8e0ea;
    background: #edf1f5;
}

/* Responsive behavior */
@media (max-width: 1199.98px) {
    .premium-tech-header > .navbar.navbar-light {
        min-height: 94px;
    }

    .premium-tech-header .navbar-brand {
        width: min(68vw, 520px);
    }

    .premium-tech-header .premium-logo-img {
        height: 72px;
    }

    .premium-tech-header .main-navbar-wrapper {
        background: rgba(1, 8, 21, .94);
    }

    .premium-tech-header .navbar-collapse {
        padding: 14px 0 18px;
    }

    .premium-tech-header .main-navbar-wrapper .nav-link::after {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .premium-tech-header::before {
        width: 76%;
        opacity: .24;
    }

    .premium-tech-header::after {
        display: none;
    }

    .premium-tech-header > .navbar.navbar-light {
        min-height: 78px;
        padding-top: 9px;
        padding-bottom: 9px;
    }

    .premium-tech-header .navbar-brand {
        width: 86px;
        max-width: 86px;
        margin-right: 8px !important;
    }

    .premium-tech-header .premium-logo-img {
        width: 76px;
        height: 62px;
        border-radius: 8px;
        object-position: center;
    }

    .premium-tech-header .toolbar .nav-item {
        margin-left: .45rem !important;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .premium-tech-header *,
    .premium-tech-header *::before,
    .premium-tech-header *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* ================================================================
   TWENTY-ONE TEMPLATE FORCE OVERRIDES
   These selectors match WHMCS Twenty-One's actual header markup.
   ================================================================ */

body header#header.premium-tech-header .main-navbar-wrapper {
    background: #102b54 !important;
    border-top: 1px solid rgba(105, 190, 255, .28) !important;
    border-bottom: 1px solid #35a2ff !important;
}

body header#header.premium-tech-header .main-navbar-wrapper .navbar-nav > .nav-item > .nav-link,
body header#header.premium-tech-header .main-navbar-wrapper .navbar-nav > .nav-item > a,
body header#header.premium-tech-header .main-navbar-wrapper #nav > li > a,
body header#header.premium-tech-header .main-navbar-wrapper .dropdown-toggle {
    color: #ffffff !important;
    opacity: 1 !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

body header#header.premium-tech-header .main-navbar-wrapper .navbar-nav > .nav-item > .nav-link:hover,
body header#header.premium-tech-header .main-navbar-wrapper .navbar-nav > .nav-item > a:hover,
body header#header.premium-tech-header .main-navbar-wrapper #nav > li > a:hover,
body header#header.premium-tech-header .main-navbar-wrapper .navbar-nav > .nav-item.active > .nav-link,
body header#header.premium-tech-header .main-navbar-wrapper .navbar-nav > .nav-item.active > a,
body header#header.premium-tech-header .main-navbar-wrapper .dropdown-toggle:hover {
    color: #68c7ff !important;
}

body header#header.premium-tech-header > .navbar.navbar-light {
    min-height: 118px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}

body header#header.premium-tech-header .navbar-brand {
    width: min(58vw, 680px) !important;
    max-width: 680px !important;
}

body header#header.premium-tech-header .navbar-brand .premium-logo-img {
    height: 110px !important;
    max-width: 680px !important;
    filter:
        drop-shadow(0 0 10px rgba(22, 114, 255, .34))
        drop-shadow(0 0 22px rgba(22, 114, 255, .14)) !important;
}

body header#header.premium-tech-header .input-group.search .btn,
body header#header.premium-tech-header .input-group.search .form-control {
    background: rgba(2, 13, 34, .82) !important;
    border-color: rgba(145, 205, 255, .78) !important;
    color: #ffffff !important;
}

body header#header.premium-tech-header .input-group.search .btn {
    border-radius: 10px 0 0 10px !important;
}

body header#header.premium-tech-header .input-group.search .form-control {
    border-radius: 0 10px 10px 0 !important;
}

body header#header.premium-tech-header .input-group.search .form-control::placeholder {
    color: #c4d3e6 !important;
    opacity: 1 !important;
}

body header#header.premium-tech-header .input-group.search .form-control:focus {
    border-color: #68c7ff !important;
    box-shadow:
        0 0 0 .18rem rgba(22, 114, 255, .18),
        0 0 15px rgba(53, 162, 255, .30) !important;
}

body header#header.premium-tech-header::before,
body header#header.premium-tech-header::after {
    opacity: .14 !important;
}

@media (max-width: 1199.98px) {
    body header#header.premium-tech-header .main-navbar-wrapper {
        background: #102b54 !important;
    }
}

@media (max-width: 575.98px) {
    body header#header.premium-tech-header .navbar-brand {
        width: 86px !important;
        max-width: 86px !important;
    }

    body header#header.premium-tech-header .navbar-brand .premium-logo-img {
        height: 62px !important;
        width: 76px !important;
    }
}


/* V6 cart alignment is also embedded in header.tpl to load last. */