:root {
    --primary-color: #3498db;
    --success-color: #2ecc71;
    --warning-color: #f39c12;
    --danger-color: #e74c3c;
    --info-color: #17a2b8;
    --dark-color: #2c3e50;
    --light-color: #f8f9fa;
    --border-radius: 6px;
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* ==========================================================================
   HEADER & NAVIGATION STYLES
   ========================================================================== */

.main-header .header-top .info li a,
.main-header .header-top .social-box li a {
    -webkit-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    position: relative;
}

#header-container,
#sticky-header-container {
    max-width: 1800px;
    padding: 0;
}

.main-header .main-menu .navigation>li>ul,
.main-header .main-menu .navigation>li>ul>li>ul {
    width: 16rem;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    visibility: hidden;
    background-color: var(--main-color);
}

.mobile-menu .navigation,
.mobile-menu .navigation li>ul>li:first-child {
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.main-header {
    position: fixed !important;
    top: 0;
    left: 75px !important; 
    width: auto !important; 
    
    /* This calculates the exact width of the user's scrollbar and stops the header before it */
    right: calc(100vw - 100%); 
    
    z-index: 999 !important;
    background: #fff;
    transition: all 0.3s ease;
    
    /* Clip horizontally to prevent bleeding, but keep vertical visible for dropdowns */
    overflow-x: clip !important;
    overflow-y: visible !important; 
}

.main-header .header-top {
    position: relative;
    overflow: hidden;
    background-color: var(--main-color-two);
}

.main-header .header-top .top-left {
    position: relative;
    float: left;
}

.main-header .header-top .info,
.main-header .header-top .social-box {
    position: relative;
    padding: 13px 0;
}

.main-header .header-top .info li {
    position: relative;
    display: inline-block;
    font-size: var(--font-15);
    color: var(--white-color);
    margin-right: var(--margin-right-20);
}

@media screen and (max-width: 1400px) {
    .main-header .main-menu .navigation li {
        margin-right: 10px !important;
    }
}

.main-header .main-menu .navigation li.dropdown>a::after {
    content: "\f107";
    font-size: 17px;
    transform: translateY(1px);
    display: inline-block;
    padding-left: 5px;
    font-weight: 300;
    font-family: FontAwesome;
}

.main-header .header-top .info li .icon {
    position: absolute;
    left: 0;
    color: var(--white-color);
}

.header-style-five .info-box li:last-child,
.main-header .header-top .info li:last-child {
    margin-right: 0;
}

.main-header .header-top .info li a {
    color: var(--white-color);
    transition: .3s;
    padding-left: var(--padding-left-25);
}

.header-style-three .header-lower .mobile-nav-toggler:hover,
.main-header .cart-box .icon a,
.main-header .cart-product .inner .cross-icon:hover,
.main-header .cart-product .inner h3 a:hover,
.main-header .header-top li a:hover,
.main-header .outer-box .nav-btn:hover,
.main-header .outer-box .search-box-btn:hover,
.main-header .sticky-header .main-menu .navigation>li.current>a,
.main-header .sticky-header .main-menu .navigation>li:hover>a {
    color: var(--main-color);
}

.main-header .header-top .social-box:before {
    position: absolute;
    content: '';
    left: -170px;
    top: 0;
    right: -1200px;
    bottom: 0;
    transform: skewX(-30deg);
    background-color: var(--main-color);
}

.main-header .header-top .social-box li {
    position: relative;
    display: inline-block;
    margin-left: var(--margin-left-25);
}

.main-header .header-top .social-box li a {
    color: var(--white-color);
    font-size: var(--font-16);
    transition: .3s;
}

.main-header .logo-box .logo img,
.main-header .main-box {
    -webkit-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
}

.main-header .header-top .social-box li a:hover {
    color: var(--main-color-two);
}

.main-header .header-upper {
    position: relative;
}

.main-header .main-box {
    position: relative;
    padding: 0;
    left: 0;
    top: 0;
    width: 100%;
    background: 0 0;
    transition: .3s;
}

.main-header .main-box .outer-container {
    position: relative;
    padding: 0 40px;
}

.main-header .logo-box {
    float: left;
    z-index: 10;
    padding: 22px;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media screen and (max-width: 1470px) {
    .main-header .main-menu .navigation>li {
        margin-right: 25px;
    }
    .main-header .logo-box {
        padding: 22px 10px 22px 22px;
    }
}

@media screen and (max-width: 1430px) {
    .main-header .outer-box {
        margin-left: 10px !important;
    }
    .main-header .main-menu .navigation>li {
        margin-right: 15px !important;
    }
    .main-header .main-menu .navigation {
        gap: 0px !important;
    }
    .main-header .button-box {
        margin: 0 !important;
    }
    .main-header .logo-box {
        padding: 10px;
    }
    .header-style-six .main-menu .navigation>li>a {
        font-size: 14px;
    }
}

@media screen and (max-width: 1375px) {
    .main-header .logo-box {
        padding: 22px 10px 22px 0px;
    }
}

@media screen and (max-width: 1320px) {
    .main-header .logo-box {
        padding: 22px 10px 22px 0px;
    }
    .main-header .main-menu .navigation>li {
        margin-right: 10px !important;
    }
}

@media screen and (max-width: 1300px) {
    .header-style-six .main-menu .navigation>li>a {
        font-size: 14px !important;
    }
    .btn-style-twelve {
        padding: 8px 8px !important;
        font-size: 14px !important;
    }
    .page-search-btn {
        font-size: 14px !important;
        min-width: 225px !important;
    }
}

@media screen and (max-width: 1200px) {
    .page-search-btn {
        font-size: 15px !important;
        padding: 5px 10px !important;
    }
    .btn-style-twelve {
        padding: 8px 7px !important;
        font-size: 15px !important;
    }
    .home-sec1 {
        padding: 40px 40px 35px !important;
    }
    #header-location-search {
        font-size: 14px !important;
    }
    .header-search-wrapper {
        width: 215px !important;
    }
}

.main-header .logo-box .logo img {
    display: inline-block;
    max-width: 100%;
    transition: .3s;
}

.main-header .header-lower,
.main-header .header-upper .logo-box .logo,
.main-header .sticky-header .main-menu .navigation>li,
.sidebar-info-contents,
.sidebar-info-contents .content-inner,
.sidebar-info-contents .content-inner .content-box {
    position: relative;
    box-shadow: 0 0 3px;
}

.main-header .header-lower .nav-outer {
    position: relative;
    float: right;
}

.main-header .header-upper .logo-box {
    position: relative;
    padding: 10px 0;
}

.main-header .main-menu {
    position: relative;
    float: left;
    transition: .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;
}

.main-header .main-menu .navbar-collapse {
    padding: 0;
    float: left;
    display: block !important;
}

.main-header .main-menu .navigation {
    position: relative;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.main-header .main-menu .navigation>li {
    position: relative;
    float: left;
    transition: .5s;
    margin-right: 0px;
}

.main-header .sticky-header .nav-outer .options-box {
    margin-top: var(--margin-top-40);
}

.main-header .sticky-header {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
    z-index: 0;
    transition: .5s;
    background-color: var(--white-color);
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.main-header .sticky-header .mobile-nav-toggler {
    display: none;
    cursor: pointer;
    color: var(--black-color);
    font-size: var(--font-30);
}

.main-header .sticky-header .logo {
    position: relative;
    padding: 25px 0;
}

.main-header.fixed-header .sticky-header {
    z-index: 999;
    opacity: 1;
    visibility: visible;
    animation-name: fadeInDown;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

.main-header .main-menu .navigation>li>a {
    position: relative;
    display: block;
    text-align: center;
    line-height: 30px;
    letter-spacing: 0;
    opacity: 1;
    font-weight: 600;
    padding: 35px 0;
    font-size: var(--font-16);
    color: var(--dark-color);
    text-transform: capitalize;
    transition: .5s;
}

.main-header .main-menu .navigation>li:last-child,
.main-header .sticky-header .main-menu .navigation>li:last-child {
    margin-right: var(--margin-zero);
}

.main-header .main-menu .navigation>li:last-child>a {
    padding-right: 0;
}

.main-header .main-menu .navigation>li:last-child ul {
    right: 0;
}

.main-header .main-menu .navigation>li.current>a,
.main-header .main-menu .navigation>li:hover>a {
    opacity: 1;
    color: var(--main-color);
}

.main-header .main-menu .navigation>li>ul {
    position: absolute;
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: .3s;
}

.main-header .main-menu .navigation>li>ul.from-right,
.main-header .main-menu .navigation>li>ul>li>ul.from-right {
    left: auto;
    right: 0;
}

.main-header .main-menu .navigation>li>ul>li,
.main-header .main-menu .navigation>li>ul>li>ul>li {
    position: relative;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.main-header .main-menu .navigation>li>ul>li:last-child,
.main-header .main-menu .navigation>li>ul>li>ul>li:last-child,
.main-header .mobile-menu .navigation li>ul>li:last-child,
.mobile-menu .navigation li>ul>li:last-child {
    border-bottom: none;
}

.main-header .main-menu .navigation>li>ul>li>a,
.main-header .main-menu .navigation>li>ul>li>ul>li>a {
    position: relative;
    display: block;
    padding: 12px 18px;
    line-height: 24px;
    font-weight: 500;
    font-size: var(--font-15);
    text-transform: capitalize;
    color: var(--white-color);
    transition: .5s;
}

.main-header .main-menu .navigation>li>ul>li>a:before,
.main-header .main-menu .navigation>li>ul>li>ul>li>a:before {
    position: absolute;
    left: 10px;
    top: 11px;
    opacity: 0;
    font-weight: 700;
    font-size: var(--font-12);
    color: var(--main-color);
    transition: .5s;
}

.main-header .main-menu .navigation>li>ul>li:hover>a::before,
.main-header .main-menu .navigation>li>ul>li>ul>li:hover>a::before {
    opacity: 1;
}

.main-header .main-menu .navigation>li>ul>li:hover>a,
.main-header .main-menu .navigation>li>ul>li>ul>li:hover>a {
    padding-left: 30px;
    color: var(--white-color);
    background-color: var(--main-color-two);
}

.main-header .main-menu .navigation>li>ul>li.dropdown>a:after {
    font-family: FontAwesome;
    content: "\f105";
    position: absolute;
    right: 15px;
    top: 13px;
    width: 10px;
    height: 20px;
    display: block;
    color: var(--white-color);
    line-height: 20px;
    font-size: var(--font-16);
    font-weight: 400;
    text-align: center;
    z-index: 5;
}

.main-header .main-menu .navigation>li>ul>li>ul {
    position: absolute;
    left: 100%;
    top: 0;
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: .3s;
}

.main-header .main-menu .navigation>li>ul>li>ul>li:hover>a {
    color: var(--white-color);
    background-color: var(--white-color-two);
}

.main-header .main-menu .navigation li>ul>li.dropdown:hover>ul,
.main-header .main-menu .navigation>li.dropdown:hover>ul {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
}

.main-header .main-menu .navbar-collapse>ul li.dropdown .dropdown-btn {
    position: absolute;
    right: 10px;
    top: 6px;
    width: 30px;
    height: 30px;
    text-align: center;
    color: var(--white-color);
    line-height: 28px;
    border: 1px solid var(--white-color-opicity-two);
    background-size: 20px;
    cursor: pointer;
    z-index: 5;
    display: none;
}

.main-menu .navigation>li>ul>li.updates {
    padding: 12px 15px;
    color: #fff;
    left: 0;
    right: 0;
    width: auto;
    font-weight: 600;
    font-size: var(--font-16);
    background-color: var(--main-color);
}

/* ==========================================================================
   MOBILE MENU STYLES
   ========================================================================== */
.main-header .nav-outer .mobile-nav-toggler {
    position: relative;
    float: right;
    padding: 2px 0 0;
    font-size: var(--font-26);
    line-height: 44px;
    cursor: pointer;
    color: var(--black-color);
    display: none;
}

.mobile-menu {
    position: fixed;
    right: 0;
    top: 0;
    width: 300px;
    padding-right: 30px;
    max-width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: 999999;
}

.mobile-menu .nav-logo {
    position: relative;
    padding: 20px;
    text-align: left;
}

.mobile-menu .nav-logo img {
    max-width: 200px;
}

.mobile-menu-visible {
    overflow: hidden;
}

.mobile-menu-visible .mobile-menu {
    visibility: visible;
}

.mobile-menu .menu-backdrop {
    position: fixed;
    right: 0;
    top: 0;
    width: 0%;
    height: 100%;
    z-index: 1;
    background: rgb(4 47 102 / 80%);
    transform: translateX(101%);
    transition: .9s 0.3s;
}

.mobile-menu-visible .mobile-menu .menu-backdrop {
    opacity: 1;
    width: 100%;
    visibility: visible;
    transition: .9s;
    transform: translateX(0);
}

.mobile-menu .menu-box {
    position: absolute;
    right: -400px;
    top: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    background: #fff;
    padding: 0;
    z-index: 5;
    border-radius: 0;
    transition: .9s;
}

.mobile-menu-visible .mobile-menu .menu-box {
    right: 0;
    transition-delay: 0.6s;
}

.mobile-menu .close-btn {
    position: absolute;
    right: 15px;
    top: 15px;
    line-height: 30px;
    width: 30px;
    text-align: center;
    font-size: 14px;
    color: #202020;
    cursor: pointer;
    z-index: 10;
    transition: .5s;
    transform: translateY(-50px);
}

.mobile-menu-visible .mobile-menu .close-btn {
    transform: translateY(0);
    transition-delay: 0.9s;
}

.main-header .mobile-menu .close-btn:hover,
.mobile-menu .close-btn:hover {
    opacity: .5;
}

.mobile-menu .navigation {
    position: relative;
    display: block;
    width: 100%;
}

.mobile-menu .navigation li {
    position: relative;
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.mobile-menu .navigation li>a {
    position: relative;
    display: block;
    line-height: 24px;
    padding: 10px 20px;
    font-size: 15px;
    color: #404040;
    text-transform: capitalize;
}

.mobile-menu .navigation li.current>a,
.mobile-menu .navigation li:hover>a {
    color: #111;
}

.mobile-menu .navigation li.dropdown .dropdown-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    text-align: center;
    font-size: 16px;
    line-height: 44px;
    color: #404040;
    cursor: pointer;
    z-index: 5;
}

.mobile-menu .navigation li.dropdown .dropdown-btn:after {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 1px;
    height: 24px;
    border-left: 1px solid rgba(0, 0, 0, .1);
}

.header-style-four .header-top .social-box:before,
.header-style-seven .header-top .social-box:before,
.main-header .cart-box .cart-box-btn:after,
.main-header .mobile-menu .navigation li>ul,
.main-header .mobile-menu .navigation li>ul>li>ul,
.main-header .sticky-header .navbar-header,
.mobile-menu .navigation li>ul,
.mobile-menu .navigation li>ul>li>ul {
    display: none;
}

.mobile-menu .navigation li>ul>li>a {
    padding-left: 30px;
}

.mobile-menu .navigation li>ul>li>ul {
    padding-left: 0;
}

.mobile-menu .navigation li>ul>li>ul>li>a {
    padding-left: 40px;
}

.main-header .mobile-menu .navigation {
    position: relative;
    display: block;
    width: 100%;
    border-top: 1px solid #ddd;
}

.main-header .mobile-menu .navigation li {
    position: relative;
    display: block;
    border-bottom: 1px solid #ddd;
}

.main-header .mobile-menu .navigation li>ul>li:first-child {
    border-top: 1px solid #ddd;
}

.main-header .mobile-menu .navigation li>a {
    position: relative;
    display: block;
    line-height: 24px;
    padding: 10px 20px;
    font-size: var(--font-16);
    color: var(--dark-color);
    text-transform: capitalize;
}

.main-header .mobile-menu .navigation li.current>a,
.main-header .mobile-menu .navigation li:hover>a {
    color: var(--dark-text-color-two);
}

.main-header .mobile-menu .navigation li.dropdown .dropdown-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    text-align: center;
    color: var(--dark-color);
    font-size: var(--font-16);
    line-height: 44px;
    cursor: pointer;
    z-index: 5;
}

.main-header .mobile-menu .navigation li.dropdown .dropdown-btn:after {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 1px;
    height: 24px;
    border-left: 1px solid #ddd;
}

.main-header .mobile-menu .menu-box .mCSB_scrollTools {
    width: 3px;
}

/* ==========================================================================
   HEADER SEARCH / NAV OPTIONS
   ========================================================================== */
.main-header .outer-box {
    position: relative;
    float: right;
    padding: 37px 0;
    margin-left: 0px;
}

.main-header .search-box-outer {
    position: relative;
    float: left;
    border-right: 1px solid #999;
    margin-right: var(--margin-right-20);
    padding-right: var(--padding-right-20);
}

.main-header .search-box-btn {
    position: relative;
    top: 0;
    display: block;
    float: left;
    font-size: var(--font-20);
    color: var(--main-color-two);
    line-height: 20px !important;
    cursor: pointer;
    background: 0 0;
    transition: .5s;
}

.main-header .outer-box .nav-btn {
    position: relative;
    float: left;
    cursor: pointer;
    line-height: 1em;
    font-size: var(--font-22);
    color: var(--main-color-two);
    margin-left: var(--margin-left-35);
    transition: .5s;
}

/* ==========================================================================
   HEADER CART STYLES
   ========================================================================== */
.main-header .cart-box,
.main-header .cart-box .cart-box-btn,
.main-header .cart-box .cart-panel .btns-boxed li a:hover {
    color: var(--main-color);
    background: 0 0;
}

.main-header .cart-box {
    position: relative;
    float: left;
    line-height: 1em;
    padding-top: 3px;
    display: inline-block;
    font-size: var(--font-16);
}

.main-header .cart-box .cart-box-btn {
    cursor: pointer;
    font-size: var(--font-24);
    transition: .3s;
}

.main-header .cart-box .cart-box-btn .total-cart {
    position: absolute;
    right: -8px;
    top: -8px;
    width: 18px;
    height: 18px;
    color: var(--white-color);
    font-size: var(--font-10);
    font-weight: 700;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    background-color: var(--dark-color-two);
}

.main-header .cart-product {
    position: relative;
    margin-bottom: var(--margin-bottom-20);
    min-height: 90px;
    border-bottom: 1px solid #e4e4e4;
}

.main-header .cart-product .inner {
    position: relative;
    padding-left: var(--padding-left-90);
    min-height: 70px;
}

.main-header .cart-product .inner .cross-icon {
    position: absolute;
    right: 0;
    top: -2px;
    z-index: 1;
    cursor: pointer;
    color: var(--dark-color);
    font-size: var(--font-18);
    transition: .5s;
}

.main-header .cart-product .inner .image {
    position: absolute;
    width: 70px;
    height: 70px;
    left: 0;
    top: 0;
}

.main-header .cart-product .inner h3 {
    position: relative;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: var(--font-15);
    margin: var(--margin-zero);
    text-transform: capitalize;
}

.main-header .cart-product .inner h3 a {
    color: var(--dark-color-two);
    transition: .3s;
}

.main-header .cart-product .inner .quantity-text {
    position: relative;
    font-weight: 300;
    color: var(--dark-color);
    font-size: var(--font-14);
    margin-top: var(--margin-top-5);
    margin-bottom: var(--margin-zero);
}

.main-header .cart-product .inner .price {
    position: relative;
    font-weight: 700;
    font-size: var(--font-16);
    margin-top: var(--margin-top-5);
    color: var(--dark-color);
}

.main-header .cart-box .cart-panel {
    left: auto !important;
    right: 0 !important;
    border-radius: 0;
    padding: 20px;
    min-width: 300px;
    margin-top: var(--margin-top-60);
    z-index: -1;
    box-shadow: 0 0 25px rgba(0, 0, 0, .15);
    border: 3px solid var(--main-color);
    transform: translate3d(0, 0, 0) !important;
}

.main-header .cart-box .cart-panel .cart-total {
    color: var(-dark-color-two);
    font-size: var(--font-15);
    font-weight: 400;
    text-align: center;
    text-transform: capitalize;
}

.main-header .cart-box .cart-panel .cart-total span {
    font-weight: 800;
    font-size: var(--font-16);
}

.main-header .cart-box .cart-panel .btns-boxed {
    position: relative;
    text-align: center;
    margin-top: var(--margin-top-20);
}

.main-header .cart-box .cart-panel .btns-boxed li {
    position: relative;
    margin: 0 5px;
    display: inline-block;
}

.main-header .cart-box .cart-panel .btns-boxed li a {
    position: relative;
    color: var(--white-color);
    font-weight: 500;
    font-size: var(--font-12);
    padding: 10px 20px 8px;
    border-radius: 2px;
    display: inline-block;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    text-transform: uppercase;
    transition: .3s;
}

/* ==========================================================================
   BUTTON & OFFER HEADER STYLES
   ========================================================================== */
.main-header .button-box {
    position: relative;
    float: left;
    margin-top: 0px;
    margin-left: 0px;
}

.btn-style-twelve {
    background: #0b7ab1;
    border-radius: 7px;
    padding: 8px 10px;
    font-size: 16px;
    text-transform: capitalize;
    font-family: var(--font-family-Sen);
    line-height: 20px;
}

.btn-style-twelve:hover .header-btn-text {
    color: #184780 !important;
}

.btn-style-twelve:hover {
    color: #184780 !important;
    background: #ebebeb;
}

.header-upper {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    background: #02073e;
    padding: 0px;
}

.offer-header {
    display: flex;
    min-width: 100%;
    gap: 0px;
    text-decoration: none;
    color: white;
    background: #02073e;
}

.marquee-content {
    display: flex;
    gap: 15px;
    width: 100%;
    min-width: max-content;
    padding: 10px 10px;
    background: #02073e;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
}

.marquee-content a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 700;
}

.special-test { font-weight: 700; }

.processor-color {
    color: #ff5733;
    font-weight: bold;
    transition: color 0.5s ease;
}

.price-color {
    color: #33c7ff;
    font-weight: bold;
    transition: color 0.5s ease;
}

@keyframes marquee {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

.offer-header-link {
    font-weight: bold;
    background: #1c9e00;
    color: #f2f2f2;
    padding: 10px 10px;
    border-radius: 15px;
    margin-left: 40px;
}

.offer-header:hover {
    background: #e4e4e4;
    color: #000000;
}

.offer-header:hover .marquee-content {
    background: #e4e4e4;
}

.offer-header:hover .offer-header-link {
    background: #02073e;
    color: white;
}

@media screen and (max-width: 1075px) {
    .marquee-content {
        width: max-content;
        min-width: 100%;
    }
}

/* ==========================================================================
   POPUP SEARCH STYLES
   ========================================================================== */
.search-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    transition: 1.5s cubic-bezier(.86, 0, .070, 1);
}

.search-popup .color-layer {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    background-color: rgba(0, 0, 0, .9);
    transition: 1.5s cubic-bezier(.86, 0, .070, 1);
}

.header-style-three .cart-box .cart-box-btn .total-cart,
.search-popup .close-search {
    background-color: var(--main-color);
}

.sidenav-bar-visible .search-popup { width: 80%; }

.search-popup:after {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 560px;
    background-image: url(../images/icons/waves-shape.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: 0;
    content: "";
}

.search-active .search-popup {
    transform: translateY(0);
    margin-top: var(--margin-zero);
}

.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    top: 75%;
    margin: -200px auto 0;
    border-radius: 50%;
    text-align: center;
    width: 70px;
    cursor: pointer;
    border-bottom: 3px solid var(--white-color);
    transition: .5s;
    opacity: 0;
    visibility: hidden;
}

.search-popup .close-search span {
    position: relative;
    display: block;
    height: 70px;
    width: 70px;
    font-size: var(--font-30);
    line-height: 70px;
    color: var(--white-color);
}

.search-active .search-popup .close-search {
    visibility: visible;
    opacity: 1;
    top: 50%;
    transition-delay: 1.5s;
}

.search-popup form {
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    z-index: 999;
    margin: -35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background-color: var(--dark-color);
    transition: .3s;
}

.search-active .search-popup form {
    transform: scaleX(1);
    transition-delay: 1.2s;
}

.search-popup .form-group {
    position: relative;
    margin: var(--margin-zero);
    overflow: hidden;
}

.search-popup .form-group input[type=search],
.search-popup .form-group input[type=text] {
    position: relative;
    display: block;
    font-size: var(--font-18);
    line-height: 50px;
    color: var(--black-color);
    height: 70px;
    width: 100%;
    padding: 10px 30px;
    background-color: var(--white-color);
    transition: .5s;
    font-weight: 500;
    text-transform: capitalize;
}

.search-popup .form-group button,
.search-popup .form-group input[type=submit] {
    position: absolute;
    right: 30px;
    top: 0;
    height: 70px;
    line-height: 70px;
    background: 0 0;
    text-align: center;
    font-size: var(--font-24);
    color: var(--black-color);
    padding: 0;
    cursor: pointer;
    transition: .5s;
}

.search-popup .form-group button:hover,
.search-popup .form-group input[type=submit]:hover {
    color: var(--black-color);
}

.search-popup input::placeholder,
.search-popup textarea::placeholder {
    color: var(--black-color);
}

.search-popup .close-search.style-two {
    position: absolute;
    right: 25px;
    left: auto;
    color: var(--white-color);
    width: auto;
    height: auto;
    top: 25px;
    margin: 0;
    border: none;
    background: 0 0 !important;
    box-shadow: none !important;
    transition: .5s;
}

.search-popup .close-search.style-two span {
    font-size: var(--font-20);
    color: var(--white-color);
}

/* ==========================================================================
   HEADER STYLE VARIANTS & SPECIFICS
   ========================================================================== */

/* Header Style Two, Three, Four, Five, Six, Seven Block (Kept for continuity) */
.header-style-two { position: absolute; top: 50px; left: 0; right: 0; }
.header-style-two .header-lower .inner-container { padding: 0 40px; background-color: var(--white-color); }

.header-style-three { position: absolute; top: 0; left: 0; right: 0; }
.header-style-three .search-box-outer { border-color: var(--white-color); }
.header-style-six .cart-box .cart-box-btn,
.header-style-six .search-box-outer .search-box-btn,
.header-style-three .cart-box .cart-box-btn,
.header-style-three .search-box-btn { color: var(--white-color); }

.header-style-three .header-lower .mobile-nav-toggler {
    display: block; line-height: 1em; margin-top: -3px; color: var(--white-color); margin-left: var(--margin-left-30); transition: .5s;
}
.header-style-three #navbarSupportedContent { display: block; }
.header-style-three .sticky-header .logo { padding: 0; }
.header-style-three .sticky-header { background-color: var(--dark-color-two); }
.header-style-five .sticky-header .outer-box,
.header-style-three .sticky-header .outer-box { padding: 27px 0; }
.header-style-three .header-lower .nav-outer .main-menu,
.header-style-three .sticky-header .main-menu { opacity: 0; visibility: hidden; }
.header-style-three .sticky-header .mobile-nav-toggler { display: block; float: left; color: var(--white-color); font-size: var(--font-24); margin-left: var(--margin-left-25); }
.header-style-five .sticky-header .main-menu .navigation>li>a,
.header-style-three .main-menu .navigation>li>a { padding: 25px 0; }

.header-style-four,
.main-header.header-style-seven { position: absolute; left: 0; right: 0; }
.header-style-four .header-top { background: 0 0; border-bottom: 1px solid #ebebeb; }
.header-style-four .auto-container,
.header-style-seven .auto-container { max-width: 1680px; }
.header-style-four .header-top .info li a,
.header-style-four .header-top .social-box li a,
.header-style-seven .header-top .info li a,
.header-style-seven .header-top .social-box li a { color: #64676c; }

.header-style-four .cart-box .cart-box-btn,
.header-style-four .header-top .info li a .icon,
.header-style-four .main-menu .navigation>li.current>a,
.header-style-four .main-menu .navigation>li:hover>a,
.header-style-four .main-menu .navigation>li>ul>li>a:before,
.header-style-four .main-menu .navigation>li>ul>li>ul>li>a:before,
.header-style-four .search-box-btn,
.header-style-four .sticky-header .main-menu .navigation>li.current>a,
.header-style-four .sticky-header .main-menu .navigation>li:hover>a { color: var(--main-color-four); }

.header-style-four .main-menu .navigation>li>a { color: #64676c; font-weight: 500; }
.header-style-four .main-menu .navigation>li>ul,
.header-style-four .main-menu .navigation>li>ul>li>ul { background-color: var(--main-color-four); }

.header-style-five { position: absolute; left: 0; top: 30px; right: 0; }
.header-style-five .inner-container { position: relative; padding-left: 250px; border-radius: 8px; background-color: var(--white-color); }
.header-style-five .inner-container .logo-box { position: absolute; left: 0; top: 0; padding: var(--padding-zero); background: linear-gradient(to right, var(--main-color-six) 0, var(--main-color-seven) 100%); }
.header-style-five .header-lower .main-menu,
.header-style-five .info-box li a { padding-left: var(--padding-left-40); }
.header-style-five .inner-container .logo-box:before { position: absolute; content: ''; right: -15px; bottom: 0; border-top: 9px solid var(--main-color-seven); border-right: 15px solid transparent; }
.header-style-five .info-box { position: relative; padding: 15px 0 15px 40px; border-bottom: 1px solid #ddd; }
.header-style-five .info-box li { position: relative; display: inline-block; font-size: var(--font-16); }
.header-style-five .info-box li .icon { position: absolute; left: 0; top: 0; width: 30px; height: 30px; line-height: 30px; border-radius: 50px; text-align: center; display: inline-block; font-size: var(--font-14); color: var(--main-color-six); background-color: var(--main-color-eight); }
.header-style-five .info-box li a { position: relative; padding-top: 3px; font-weight: 500; color: var(--dark-color-four); transition: .3s; font-family: var(--font-family-DM-Sans); }

.header-style-five .cart-box .cart-box-btn,
.header-style-five .info-box li a:hover,
.header-style-five .main-menu .navigation>li.current>a,
.header-style-five .main-menu .navigation>li:hover>a,
.header-style-five .main-menu .navigation>li>ul>li>a:before,
.header-style-five .main-menu .navigation>li>ul>li>ul>li>a:before,
.header-style-five .search-box-btn,
.header-style-five .sticky-header .main-menu .navigation>li.current>a,
.header-style-five .sticky-header .main-menu .navigation>li:hover>a { color: var(--main-color-seven); }

.header-style-five .header-lower .nav-outer { width: 100%; }
.header-style-five .main-menu .navigation>li>a { padding: 10px 0; color: #010048; font-weight: 500; font-family: var(--font-family-DM-Sans); }
.header-style-five .main-menu .navigation>li.dropdown>a { padding-right: 15px !important; }
.header-style-five .main-menu .navigation>li.dropdown::before { font-family: FontAwesome; content: "\f107"; position: absolute; right: 0; top: 15px; font-size: var(--font-16); color: var(--dark-color-four); transition: .5s; }

.header-style-five .main-menu .navigation>li.current>a,
.header-style-five .main-menu .navigation>li:hover>a { color: var(--main-color-six); background: linear-gradient(to left, var(--main-color-six) 0, var(--main-color-seven) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.header-style-five .main-menu .navigation>li.current::before,
.header-style-five .main-menu .navigation>li:hover::before { -webkit-text-fill-color: inherit !important; color: var(--main-color-six); }

.header-style-five .header-lower .outer-box { position: absolute; right: 0; top: 0; padding: var(--padding-zero); }
.header-style-five .outer-box .phone-box { position: relative; padding: 25px 20px 24px 0; font-weight: 700; font-size: var(--font-14); color: var(--white-color); font-family: var(--font-family-Sen); }
.header-style-five .outer-box .phone-box .box-inner { position: relative; padding-left: var(--padding-left-75); }
.header-style-five .outer-box .phone-box:before { position: absolute; content: ''; left: 29px; top: 0; right: 0; bottom: 0; background: linear-gradient(to right, var(--main-color-six) 0, var(--main-color-seven) 100%); }
.header-style-five .outer-box .phone-box a { position: relative; font-size: var(--font-26); color: var(--white-color); display: inline-block; margin-top: var(--margin-top-5); }
.header-style-five .outer-box .phone-box .icon { position: absolute; left: 0; top: -3px; width: 58px; height: 58px; line-height: 58px; text-align: center; border-radius: 50px; display: inline-block; font-size: var(--font-24); background: linear-gradient(to right, var(--main-color-six) 0, var(--main-color-seven) 100%); }
.header-style-five .sticky-header .main-menu .navigation>li.dropdown::before { top: 30px; }
.header-style-five .sticky-header .logo { padding: 15px 0; }
.header-style-five .main-menu .navigation>li>ul,
.header-style-five .main-menu .navigation>li>ul>li>ul { background-color: var(--main-color-six); }

/* Header Style Six Specific */
.header-style-six { background-color: #fff; }
.header-style-six .main-menu .navigation>li>a { font-weight: 700; padding: 30px 0; color: #000; font-family: var(--font-family-DM-Sans); }
.header-style-six .main-menu .navigation>li.current>a,
.header-style-six .main-menu .navigation>li:hover>a,
.header-style-six .main-menu .navigation>li>ul>li>a:before,
.header-style-six .main-menu .navigation>li>ul>li>ul>li>a:before,
.header-style-six .outer-box .nav-btn:hover,
.header-style-six .outer-box .search-box-btn:hover,
.header-style-six .sticky-header .main-menu .navigation>li.current>a,
.header-style-six .sticky-header .main-menu .navigation>li:hover>a { color: var(--main-color-ten); }
.header-style-six .main-menu .navigation>li>ul,
.header-style-six .main-menu .navigation>li>ul>li>ul { background-color: var(--main-color-nine); }
.header-style-six .search-box-outer { border: 0; padding: var(--padding-zero); margin-right: var(--margin-zero); margin-left: var(--margin-left-25); padding-left: var(--padding-left-20); border-left: 1px dashed var(--white-color); }
.header-style-six .cart-box .cart-box-btn .total-cart { font-weight: 700; font-family: var(--font-family-DM-Sans); background-color: var(--main-color-twelve); }
.header-style-six .outer-box { display: flex; padding: 0px; justify-content: center; align-items: center; gap: 4px; }
.header-style-six .cart-product .inner .cross-icon:hover,
.header-style-six .cart-product .inner h3 a:hover { color: var(--main-color-twelve); }
.header-style-six .cart-box .cart-panel { border-color: var(--main-color-twelve); }
.header-style-six .cart-box .cart-panel .btns-boxed li a { border-color: var(--main-color-twelve); background-color: var(--main-color-twelve); }
.header-style-six .sticky-header .search-box-outer { border-color: var(--main-color-nine); }
.header-style-six .sticky-header .cart-box .cart-box-btn,
.header-style-six .sticky-header .main-menu .navigation>li>a,
.header-style-six .sticky-header .search-box-outer .search-box-btn { color: var(--main-color-nine); }

/* Header Style Seven Specific */
.main-header.header-style-seven .auto-container { max-width: 1200px; }
.header-style-seven .header-top { background: 0 0; }
.header-style-seven .header-top .info li a .icon { opacity: .5; color: var(--black-color); }
.header-style-seven .header-top .social-box { margin-left: var(--margin-left-40); }
.header-style-seven .header-top .social-box li { margin-left: var(--margin-left-15); }
.header-style-seven .main-menu .navigation>li>a { color: var(--main-color-fourteen); }
.header-style-seven .main-menu .navigation>li.current>a,
.header-style-seven .main-menu .navigation>li:hover>a,
.main-header.header-style-seven .main-menu .navigation>li>ul>li>a:before,
.main-header.header-style-seven .main-menu .navigation>li>ul>li>ul>li>a:before { color: var(--main-color-fifteen); }
.header-style-seven .cart-box .cart-box-btn,
.header-style-seven .search-box-btn { color: var(--main-color-sixteen); }
.header-style-seven .outer-box .nav-btn { top: -5px; }
.main-header.header-style-seven .main-menu .navigation>li>ul,
.main-header.header-style-seven .main-menu .navigation>li>ul>li>ul { background-color: var(--main-color-fifteen); }

/* Sidebar Info Specific (Associated with Headers) */
.sidebar-info-contents .content-inner .logo { padding-bottom: var(--padding-bottom-20); }
.sidebar-info-contents .content-inner .logo img { display: inline-block; max-width: 100%; }
.sidebar-info-contents .content-inner h5 { color: var(--white-color); margin-bottom: var(--margin-top-20); }
.sidebar-info-contents .content-inner .content-box .text { color: var(--white-color); margin-bottom: var(--margin-top-25); }
.sidebar-info-contents .content-inner .contact-info { position: relative; margin-top: var(--margin-top-60); }
.sidebar-info-contents .content-inner .social-box { position: relative; margin-top: var(--margin-top-20); margin-bottom: var(--margin-top-30); }
.sidebar-info-contents .content-inner .social-box li { position: relative; display: inline-block; margin-right: var(--margin-right-5); transition: .9s; }
.sidebar-info-contents .content-inner .social-box li a { position: relative; width: 36px; height: 36px; color: var(--main-color-two); z-index: 1; font-size: var(--font-14); line-height: 36px; text-align: center; border-radius: 50%; display: inline-block; background-color: var(--white-color); transition: .5s; }
.sidebar-info-contents .content-inner .social-box li a:hover { color: var(--white-color); background-color: var(--main-color); }
.close-side-widget, .close-side-widget:hover { color: var(--white-color) !important; font-size: var(--font-24); }

@media only screen and (max-width:1350px) {
    .main-header .button-box { margin-left: 0; }
    .main-header .sticky-header .logo img { height: 30px; }
}

/* ==========================================================================
   LOCATION SEARCH DROPDOWN STYLES
   ========================================================================== */
.header-search-wrapper {
    position: relative;
    width: 250px;
}

.header-search-wrapper .search-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}

#header-location-search {
    width: 100%;
    height: 45px;
    padding: 10px 15px 10px 40px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    transition: all 0.3s ease;
}

@media screen and (min-width:1165px) {
    #header-location-search {
        width: 100%;
        height: 45px;
        padding: 10px 15px 10px 40px;
        border: 1px solid #ccc;
        border-radius: 8px;
        font-size: 16px;
        color: #333;
        background-color: #fff;
        transition: all 0.3s ease;
        margin-top: 0px;
    }

    .header-search-wrapper .search-icon {
        position: absolute;
        top: 64%;
        left: 15px;
        transform: translateY(-50%);
        color: #999;
        pointer-events: none;
    }
}

#header-location-search:focus {
    outline: none;
    border-color: #629904;
    box-shadow: 0 0 5px rgba(98, 153, 4, 0.5);
}

#header-location-search::placeholder {
    color: #c0392b;
    opacity: 1;
}

.search-dropdown-container {
    position: relative;
}

.location-search-container {
    background-color: transparent;
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    width: 224px;
    z-index: 1000;
    border-radius: 11px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.location-search-container.active {
    opacity: 1 !important;
    transform: translateY(0);
    visibility: visible !important;
}

.location-search-header,
.location-search-label {
    display: none;
}

.location-search-layout {
    padding: 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    min-width: 100%;
}

.Locationsearch {
    display: none;
}

.location-search-results {
    height: 300px;
    overflow-y: auto;
    background-color: #fff;
}

.location-search-results>h3 {
    padding: 0 20px;
    margin: 20px 0 5px 0;
    width: 100%;
}

.location-search-results>h3>a {
    text-decoration: none !important;
    text-transform: capitalize !important;
    color: #000;
    font-size: 16px !important;
    font-weight: 700 !important;
    width: 100%;
}

.location-search-results>ul {
    border-bottom: 1px solid #efefef;
    padding: 10px 20px;
    text-decoration: none !important;
    text-transform: capitalize !important;
    color: #000;
}

.navigation,
.navigation ul,
.accordion-box {
    list-style: none !important;
}

.location-search-results>ul>li {
    width: 100%;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.location-search-results>ul>li::before {
    content: '\f061';
    font-family: 'FontAwesome';
    color: #0060ff;
}

.location-search-results>ul>li>a {
    text-decoration: none !important;
    text-transform: capitalize !important;
    color: #000;
    width: 100%;
}

@media screen and (max-width:662px) {
    .location-search-layout {
        min-width: 100%;
    }
}

/* ==========================================================================
   MISC STYLES
   ========================================================================== */
.breadcrumb-item a {
    color: white;
}

/* ==========================================================================
   SIDEBAR STYLES
   ========================================================================== */

#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 75px;
    background-color: #112f5d;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    overflow-y: none;
    border-radius: 0px;
}

#sidebar a {
    color: #fff;
} 

#sidebar a:hover {
    color: #ffffff6b;
}

#sidebarNav {
    padding: 100px 20px;
    height: 100vh;
}

#sidebar .navbar-nav {
    flex-direction: column;
}

#sidebar .nav-link {
    padding: 10px 20px;
    font-size: 16px;
}

#sidebar .nav-link:hover {
    background-color: #f0f0f0;
}

#sidebar li {
    margin: 20px 0;
    position: relative !important; 
}

/* The Tooltip Bubble */
#sidebar li::before {
    background: #000000 !important; /* Deep Dark Blue */
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 15px rgba(17, 47, 93, 0.25) !important;
    position: absolute !important;
    top: 50% !important;
    left: 40px !important;
    transform: translateY(-50%) translateX(10px) !important; 
    opacity: 0; 
    visibility: hidden;
    pointer-events: none;
    z-index: 1050 !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55) !important;
}

/* Hover Trigger State */
#sidebar li:hover::before {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(-50%) translateX(20px) !important; /* Slides further right */
}

/* Make the icon vibrant blue on hover to match */
#sidebar li:hover a i {
    color: #ffffff !important;
    transition: color 0.2s ease !important;
}

/* --- Your Existing Content Definitions --- */
#sidebar li:first-child:hover::before { content: "Home"; }
#sidebar li:nth-child(2):hover::before { content: "Order"; }
#sidebar li:nth-child(3):hover::before { content: "Announcements"; }
#sidebar li:nth-child(4):hover::before { content: "Knowledgebase"; }
#sidebar li:nth-child(5):hover::before { content: "Downloads"; }
#sidebar li:nth-child(6):hover::before { content: "Tickets"; }
#sidebar li:nth-child(7):hover::before { content: "Network Status"; }
#sidebar li:nth-child(8):hover::before { content: "My Services"; }
#sidebar li:nth-child(9):hover::before { content: "My Invoices"; }
#sidebar li:nth-child(10):hover::before { content: "Contact Us"; }

/* ==========================================================================
   MOBILE RESPONSIVE SIDEBAR
   ========================================================================== */

@media (max-width: 991px) {
    #sidebar {
        position: relative;
        width: 100%;
        height: auto;
    }

    #sidebarNav {
        padding: 10px;
        height: auto;
    }

    #sidebar .navbar-nav {
        flex-direction: row;
        justify-content: space-between;
        overflow-x: auto;
    }

    #sidebar li {
        padding: 0 42px;
        margin: auto;
    }

    /* Adjust labels to be visible text under icons on mobile */
    #sidebar li::before {
        opacity: 1;
        color: #fff;
        font-size: 13px;
        background: transparent;
        padding: 2px 3px;
        border-radius: 23px;
        margin-left: -33px;
        position: relative; 
        top: -3px;
    }

    #sidebar li:first-child::before { content: "Home"; }
    #sidebar li:nth-child(2)::before { content: "Order"; }
    #sidebar li:nth-child(3)::before { content: "Announcements"; }
    #sidebar li:nth-child(4)::before { content: "Knowledgebase"; }
    #sidebar li:nth-child(5)::before { content: "Downloads"; }
    #sidebar li:nth-child(6)::before { content: "Tickets"; }
    #sidebar li:nth-child(7)::before { content: "Network"; }
    #sidebar li:nth-child(8)::before { content: "Services"; }
    #sidebar li:nth-child(9)::before { content: "Invoices"; }
    #sidebar li:nth-child(10)::before { content: "Contact"; }
}

/* ==========================================================================
   EPYTHEME HOMEPAGE STYLES
   ========================================================================== */

/* --- Base & Utility Overrides --- */
.container {
    max-width: 1905px;
    padding: 0px 25px;
}

@media (max-width: 991px) {
    .container {
        padding-left: 15px; /* Replaced 0px with 15px to maintain mobile padding */
        padding-right: 15px;
    }
}

.auto-container, .container-3 {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Typography & Spacing Utilities */
.fs-40 { font-size: 40px; font-weight: 700; line-height: 1.2; }
.fs-16 { font-size: 16px; font-weight: 600; }
.pb-10 { padding-bottom: 10px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pt-40 { padding-top: 40px; }
.mt-5 { margin-top: 3rem; }
.mb-5 { margin-bottom: 3rem; }
.br-10 { border-radius: 10px; }

/* Colors */
.txt-white, .text-white { color: #ffffff !important; }
.text-black { color: #000000 !important; }
.text-dark-blue { color: #1a2b4c !important; }
.bg-dgrey { background-color: #2c2f33; } /* Adjust to match your theme's dark grey */
.bg-6-new { background-image: linear-gradient(135deg, #1e2024 0%, #2b2e33 100%); } /* Dark gradient */
.bg-7 { background-color: #f8f9fa; transition: all 0.3s ease; border: 1px solid #e9ecef; }
.bg-7-new { background-color: #ffffff; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

/* --- Search & Product Section --- */
.billing-home-banner {
    padding: 40px 0;
}

.home-search-product #productSearch,
.home-search-product #productGroupDropdown {
    height: 45px;
    border-radius: 5px;
    border: 1px solid #ced4da;
    box-shadow: none;
}

.home-search-product #productSearch:focus,
.home-search-product #productGroupDropdown:focus {
    border-color: #3c6eb4;
    outline: none;
}

/* Product Cards */
.product-card {
    transition: all 0.3s ease-in-out;
}

.product-card.hidden {
    display: none;
}

.card-2 {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    text-align: center;
}

.card-2.dark {
    background-color: #1e2228; /* Dark card background */
    color: #ffffff;
    border: 1px solid #2a3038;
}

.card-2:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.card-2 .card-img-top {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 20px;
}

.card-2 .card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #ffffff;
}

.card-2 p {
    font-size: 14px;
    color: #aeb4be;
    margin-bottom: 20px;
    flex-grow: 1;
}

.cta-section .btn-light {
    background-color: #ffffff;
    color: #1e2228;
    font-weight: 600;
    padding: 8px 24px;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 13px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cta-section .btn-light:hover {
    background-color: #3c6eb4;
    color: #ffffff;
}

/* --- Help Section (How Can We Help) --- */
.help-sec {
    padding-top: 50px;
    padding-bottom: 50px;
}

.bx-s3 {
    width: 160px;
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin: 0 auto;
    cursor: pointer;
}

.bx-s3:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: #3c6eb4;
}

.bx-s3 .icon {
    margin-bottom: 15px;
}

.img-sm-c {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.txt-st3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

/* --- Quick Links / FAQ Section --- */
.pad-fix {
    padding-left: 15px;
    padding-right: 15px;
}

.faq-section a {
    text-decoration: none;
}

.faq-section .bg-7 {
    width: 220px;
    height: 160px;
}

.faq-section .bg-7:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border-color: #3c6eb4;
}

.faq-section .bg-7 i {
    font-size: 40px;
    margin-bottom: 15px;
}

.faq-section .bg-7 img {
    width: 40px;
    height: 40px;
    padding: 8px; /* Assuming the image is an icon with a background */
    margin-bottom: 15px;
}

a:hover {
    text-decoration: none !important;
}

ul {
    padding-inline-start: 0px !important;
}

footer ul {
    list-style: none !important;
}

.footer-widget .float-lg-right {
    background-color: white;
}

footer .auto-container .text-white {
    padding-top: 0px !important;
    font-weight: 900 !important;
}

#footer__copyright {
    padding-bottom: 20px !important;
}

/* Ensure the body has enough top padding so content isn't hidden under the header */
body {
    padding-top: 90px; /* Adjust this number to match the actual height of your white header */
    padding-left: 75px !important;
}

/* Add this to ensure the topbar (if used) also respects the scrollbar */
.topbar {
    width: auto !important;
    left: 75px !important;
    right: 0 !important;
}

.master-breadcrumb {
    width: 100% !important;
}

/* The Sidebar styling to match your screenshot */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 75px;
    height: 100vh;
    background-color: #112f5d; /* Dark blue from your image */
    z-index: 2000; /* Higher than header */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

/* If you are using a fixed or sticky header that covers the whole width */
.custom-navbar {
    width: 100%;
    right: 0;
    /* This ensures the header respects the gutter of the scrollbar */
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
}

/* Specifically for the sticky sidebar in your file */
.sticky-sidebar {
    z-index: 10;
}

#sidebar .navbar-nav {
    width: 100%;
    text-align: center;
}

#sidebar .nav-item {
    margin: 15px 0;
}

#sidebar .nav-item a {
    color: #fff;
    font-size: 20px;
    display: block;
    transition: 0.3s;
}

#sidebar .nav-item a:hover {
    color: #3c6eb4;
    background: rgba(255,255,255,0.1);
}

/* Mobile: Revert to standard layout */
@media (max-width: 991px) {
    body { padding-left: 0 !important; }
    .main-header, .topbar, .master-breadcrumb { 
        left: 0 !important; 
        width: 100% !important; 
    }
    #sidebar {
        position: relative;
        width: 100%;
        height: auto;
        flex-direction: row;
        padding: 10px;
    }
    #sidebar .navbar-nav {
        flex-direction: row;
        justify-content: space-around;
    }
}

.breadcrumb {
    background-color: transparent !important;
}

/* ==========================================================================
   HEADER & NAVIGATION STYLES
   ========================================================================== */

.main-header .header-top .info li a,
.main-header .header-top .social-box li a {
    -webkit-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
    position: relative;
}

#header-container,
#sticky-header-container {
    max-width: 1800px;
    padding: 0;
}

.main-header .main-menu .navigation>li>ul,
.main-header .main-menu .navigation>li>ul>li>ul {
    width: 16rem;
    border-radius: 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    visibility: hidden;
    background-color: var(--main-color);
}

.mobile-menu .navigation,
.mobile-menu .navigation li>ul>li:first-child {
    border-top: 1px solid rgba(0, 0, 0, .1);
}

.main-header {
    position: fixed !important;
    top: 0;
    left: 75px !important; 
    width: auto !important; 
    
    /* This calculates the exact width of the user's scrollbar and stops the header before it */
    right: calc(100vw - 100%); 
    
    z-index: 999 !important;
    background: #fff;
    transition: all 0.3s ease;
    
    /* Clip horizontally to prevent bleeding, but keep vertical visible for dropdowns */
    overflow-x: clip !important;
    overflow-y: visible !important; 
}

.main-header .header-top {
    position: relative;
    overflow: hidden;
    background-color: var(--main-color-two);
}

.main-header .header-top .top-left {
    position: relative;
    float: left;
}

.main-header .header-top .info,
.main-header .header-top .social-box {
    position: relative;
    padding: 13px 0;
}

.main-header .header-top .info li {
    position: relative;
    display: inline-block;
    font-size: var(--font-15);
    color: var(--white-color);
    margin-right: var(--margin-right-20);
}

@media screen and (max-width: 1400px) {
    .main-header .main-menu .navigation li {
        margin-right: 10px !important;
    }
}

.main-header .main-menu .navigation li.dropdown>a::after {
    content: "\f107";
    font-size: 17px;
    transform: translateY(1px);
    display: inline-block;
    padding-left: 5px;
    font-weight: 300;
    font-family: FontAwesome;
}

.main-header .header-top .info li .icon {
    position: absolute;
    left: 0;
    color: var(--white-color);
}

.header-style-five .info-box li:last-child,
.main-header .header-top .info li:last-child {
    margin-right: 0;
}

.main-header .header-top .info li a {
    color: var(--white-color);
    transition: .3s;
    padding-left: var(--padding-left-25);
}

.header-style-three .header-lower .mobile-nav-toggler:hover,
.main-header .cart-box .icon a,
.main-header .cart-product .inner .cross-icon:hover,
.main-header .cart-product .inner h3 a:hover,
.main-header .header-top li a:hover,
.main-header .outer-box .nav-btn:hover,
.main-header .outer-box .search-box-btn:hover,
.main-header .sticky-header .main-menu .navigation>li.current>a,
.main-header .sticky-header .main-menu .navigation>li:hover>a {
    color: var(--main-color);
}

.main-header .header-top .social-box:before {
    position: absolute;
    content: '';
    left: -170px;
    top: 0;
    right: -1200px;
    bottom: 0;
    transform: skewX(-30deg);
    background-color: var(--main-color);
}

.main-header .header-top .social-box li {
    position: relative;
    display: inline-block;
    margin-left: var(--margin-left-25);
}

.main-header .header-top .social-box li a {
    color: var(--white-color);
    font-size: var(--font-16);
    transition: .3s;
}

.main-header .logo-box .logo img,
.main-header .main-box {
    -webkit-transition: .3s;
    -ms-transition: .3s;
    -o-transition: .3s;
    -moz-transition: .3s;
}

.main-header .header-top .social-box li a:hover {
    color: var(--main-color-two);
}

.main-header .header-upper {
    position: relative;
}

.main-header .main-box {
    position: relative;
    padding: 0;
    left: 0;
    top: 0;
    width: 100%;
    background: 0 0;
    transition: .3s;
}

.main-header .main-box .outer-container {
    position: relative;
    padding: 0 40px;
}

.main-header .logo-box {
    float: left;
    z-index: 10;
    padding: 22px;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media screen and (max-width: 1470px) {
    .main-header .main-menu .navigation>li {
        margin-right: 25px;
    }
    .main-header .logo-box {
        padding: 22px 10px 22px 22px;
    }
}

@media screen and (max-width: 1430px) {
    .main-header .outer-box {
        margin-left: 10px !important;
    }
    .main-header .main-menu .navigation>li {
        margin-right: 15px !important;
    }
    .main-header .main-menu .navigation {
        gap: 0px !important;
    }
    .main-header .button-box {
        margin: 0 !important;
    }
    .main-header .logo-box {
        padding: 10px;
    }
    .header-style-six .main-menu .navigation>li>a {
        font-size: 14px;
    }
}

@media screen and (max-width: 1375px) {
    .main-header .logo-box {
        padding: 22px 10px 22px 0px;
    }
}

@media screen and (max-width: 1320px) {
    .main-header .logo-box {
        padding: 22px 10px 22px 0px;
    }
    .main-header .main-menu .navigation>li {
        margin-right: 10px !important;
    }
}

@media screen and (max-width: 1300px) {
    .header-style-six .main-menu .navigation>li>a {
        font-size: 14px !important;
    }
    .btn-style-twelve {
        padding: 8px 8px !important;
        font-size: 14px !important;
    }
    .page-search-btn {
        font-size: 14px !important;
        min-width: 225px !important;
    }
}

@media screen and (max-width: 1200px) {
    .page-search-btn {
        font-size: 15px !important;
        padding: 5px 10px !important;
    }
    .btn-style-twelve {
        padding: 8px 7px !important;
        font-size: 15px !important;
    }
    .home-sec1 {
        padding: 40px 40px 35px !important;
    }
    #header-location-search {
        font-size: 14px !important;
    }
    .header-search-wrapper {
        width: 215px !important;
    }
}

.main-header .logo-box .logo img {
    display: inline-block;
    max-width: 100%;
    transition: .3s;
}

.main-header .header-lower,
.main-header .header-upper .logo-box .logo,
.main-header .sticky-header .main-menu .navigation>li,
.sidebar-info-contents,
.sidebar-info-contents .content-inner,
.sidebar-info-contents .content-inner .content-box {
    position: relative;
    box-shadow: 0 0 3px;
}

.main-header .header-lower .nav-outer {
    position: relative;
    float: right;
}

.main-header .header-upper .logo-box {
    position: relative;
    padding: 10px 0;
}

.main-header .main-menu {
    position: relative;
    float: left;
    transition: .3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0px;
}

.main-header .main-menu .navbar-collapse {
    padding: 0;
    float: left;
    display: block !important;
}

.main-header .main-menu .navigation {
    position: relative;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.main-header .main-menu .navigation>li {
    position: relative;
    float: left;
    transition: .5s;
    margin-right: 0px;
}

.main-header .sticky-header .nav-outer .options-box {
    margin-top: var(--margin-top-40);
}

.main-header .sticky-header {
    position: fixed;
    opacity: 0;
    visibility: hidden;
    left: 0;
    top: 0;
    width: 100%;
    padding: 0;
    z-index: 0;
    transition: .5s;
    background-color: var(--white-color);
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.main-header .sticky-header .mobile-nav-toggler {
    display: none;
    cursor: pointer;
    color: var(--black-color);
    font-size: var(--font-30);
}

.main-header .sticky-header .logo {
    position: relative;
    padding: 25px 0;
}

.main-header.fixed-header .sticky-header {
    z-index: 999;
    opacity: 1;
    visibility: visible;
    animation-name: fadeInDown;
    animation-duration: .5s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
}

.main-header .main-menu .navigation>li>a {
    position: relative;
    display: block;
    text-align: center;
    line-height: 30px;
    letter-spacing: 0;
    opacity: 1;
    font-weight: 600;
    padding: 35px 0;
    font-size: var(--font-16);
    color: var(--dark-color);
    text-transform: capitalize;
    transition: .5s;
}

.main-header .main-menu .navigation>li:last-child,
.main-header .sticky-header .main-menu .navigation>li:last-child {
    margin-right: var(--margin-zero);
}

.main-header .main-menu .navigation>li:last-child>a {
    padding-right: 0;
}

.main-header .main-menu .navigation>li:last-child ul {
    right: 0;
}

.main-header .main-menu .navigation>li.current>a,
.main-header .main-menu .navigation>li:hover>a {
    opacity: 1;
    color: var(--main-color);
}

.main-header .main-menu .navigation>li>ul {
    position: absolute;
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: .3s;
}

.main-header .main-menu .navigation>li>ul.from-right,
.main-header .main-menu .navigation>li>ul>li>ul.from-right {
    left: auto;
    right: 0;
}

.main-header .main-menu .navigation>li>ul>li,
.main-header .main-menu .navigation>li>ul>li>ul>li {
    position: relative;
    width: 100%;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.main-header .main-menu .navigation>li>ul>li:last-child,
.main-header .main-menu .navigation>li>ul>li>ul>li:last-child,
.main-header .mobile-menu .navigation li>ul>li:last-child,
.mobile-menu .navigation li>ul>li:last-child {
    border-bottom: none;
}

.main-header .main-menu .navigation>li>ul>li>a,
.main-header .main-menu .navigation>li>ul>li>ul>li>a {
    position: relative;
    display: block;
    padding: 12px 18px;
    line-height: 24px;
    font-weight: 500;
    font-size: var(--font-15);
    text-transform: capitalize;
    color: var(--white-color);
    transition: .5s;
}

.main-header .main-menu .navigation>li>ul>li>a:before,
.main-header .main-menu .navigation>li>ul>li>ul>li>a:before {
    position: absolute;
    left: 10px;
    top: 11px;
    opacity: 0;
    font-weight: 700;
    font-size: var(--font-12);
    color: var(--main-color);
    transition: .5s;
}

.main-header .main-menu .navigation>li>ul>li:hover>a::before,
.main-header .main-menu .navigation>li>ul>li>ul>li:hover>a::before {
    opacity: 1;
}

.main-header .main-menu .navigation>li>ul>li:hover>a,
.main-header .main-menu .navigation>li>ul>li>ul>li:hover>a {
    padding-left: 30px;
    color: var(--white-color);
    background-color: var(--main-color-two);
}

.main-header .main-menu .navigation>li>ul>li.dropdown>a:after {
    font-family: FontAwesome;
    content: "\f105";
    position: absolute;
    right: 15px;
    top: 13px;
    width: 10px;
    height: 20px;
    display: block;
    color: var(--white-color);
    line-height: 20px;
    font-size: var(--font-16);
    font-weight: 400;
    text-align: center;
    z-index: 5;
}

.main-header .main-menu .navigation>li>ul>li>ul {
    position: absolute;
    left: 100%;
    top: 0;
    transform: scaleY(0);
    transform-origin: top;
    opacity: 0;
    transition: .3s;
}

.main-header .main-menu .navigation>li>ul>li>ul>li:hover>a {
    color: var(--white-color);
    background-color: var(--white-color-two);
}

.main-header .main-menu .navigation li>ul>li.dropdown:hover>ul,
.main-header .main-menu .navigation>li.dropdown:hover>ul {
    transform: scaleY(1);
    opacity: 1;
    visibility: visible;
}

.main-header .main-menu .navbar-collapse>ul li.dropdown .dropdown-btn {
    position: absolute;
    right: 10px;
    top: 6px;
    width: 30px;
    height: 30px;
    text-align: center;
    color: var(--white-color);
    line-height: 28px;
    border: 1px solid var(--white-color-opicity-two);
    background-size: 20px;
    cursor: pointer;
    z-index: 5;
    display: none;
}

.main-menu .navigation>li>ul>li.updates {
    padding: 12px 15px;
    color: #fff;
    left: 0;
    right: 0;
    width: auto;
    font-weight: 600;
    font-size: var(--font-16);
    background-color: var(--main-color);
}

/* ==========================================================================
   MOBILE MENU STYLES
   ========================================================================== */
.main-header .nav-outer .mobile-nav-toggler {
    position: relative;
    float: right;
    padding: 2px 0 0;
    font-size: var(--font-26);
    line-height: 44px;
    cursor: pointer;
    color: var(--black-color);
    display: none;
}

.mobile-menu {
    position: fixed;
    right: 0;
    top: 0;
    width: 300px;
    padding-right: 30px;
    max-width: 100%;
    height: 100%;
    visibility: hidden;
    z-index: 999999;
}

.mobile-menu .nav-logo {
    position: relative;
    padding: 20px;
    text-align: left;
}

.mobile-menu .nav-logo img {
    max-width: 200px;
}

.mobile-menu-visible {
    overflow: hidden;
}

.mobile-menu-visible .mobile-menu {
    visibility: visible;
}

.mobile-menu .menu-backdrop {
    position: fixed;
    right: 0;
    top: 0;
    width: 0%;
    height: 100%;
    z-index: 1;
    background: rgb(4 47 102 / 80%);
    transform: translateX(101%);
    transition: .9s 0.3s;
}

.mobile-menu-visible .mobile-menu .menu-backdrop {
    opacity: 1;
    width: 100%;
    visibility: visible;
    transition: .9s;
    transform: translateX(0);
}

.mobile-menu .menu-box {
    position: absolute;
    right: -400px;
    top: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    background: #fff;
    padding: 0;
    z-index: 5;
    border-radius: 0;
    transition: .9s;
}

.mobile-menu-visible .mobile-menu .menu-box {
    right: 0;
    transition-delay: 0.6s;
}

.mobile-menu .close-btn {
    position: absolute;
    right: 15px;
    top: 15px;
    line-height: 30px;
    width: 30px;
    text-align: center;
    font-size: 14px;
    color: #202020;
    cursor: pointer;
    z-index: 10;
    transition: .5s;
    transform: translateY(-50px);
}

.mobile-menu-visible .mobile-menu .close-btn {
    transform: translateY(0);
    transition-delay: 0.9s;
}

.main-header .mobile-menu .close-btn:hover,
.mobile-menu .close-btn:hover {
    opacity: .5;
}

.mobile-menu .navigation {
    position: relative;
    display: block;
    width: 100%;
}

.mobile-menu .navigation li {
    position: relative;
    display: block;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.mobile-menu .navigation li>a {
    position: relative;
    display: block;
    line-height: 24px;
    padding: 10px 20px;
    font-size: 15px;
    color: #404040;
    text-transform: capitalize;
}

.mobile-menu .navigation li.current>a,
.mobile-menu .navigation li:hover>a {
    color: #111;
}

.mobile-menu .navigation li.dropdown .dropdown-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    text-align: center;
    font-size: 16px;
    line-height: 44px;
    color: #404040;
    cursor: pointer;
    z-index: 5;
}

.mobile-menu .navigation li.dropdown .dropdown-btn:after {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 1px;
    height: 24px;
    border-left: 1px solid rgba(0, 0, 0, .1);
}

.header-style-four .header-top .social-box:before,
.header-style-seven .header-top .social-box:before,
.main-header .cart-box .cart-box-btn:after,
.main-header .mobile-menu .navigation li>ul,
.main-header .mobile-menu .navigation li>ul>li>ul,
.main-header .sticky-header .navbar-header,
.mobile-menu .navigation li>ul,
.mobile-menu .navigation li>ul>li>ul {
    display: none;
}

.mobile-menu .navigation li>ul>li>a {
    padding-left: 30px;
}

.mobile-menu .navigation li>ul>li>ul {
    padding-left: 0;
}

.mobile-menu .navigation li>ul>li>ul>li>a {
    padding-left: 40px;
}

.main-header .mobile-menu .navigation {
    position: relative;
    display: block;
    width: 100%;
    border-top: 1px solid #ddd;
}

.main-header .mobile-menu .navigation li {
    position: relative;
    display: block;
    border-bottom: 1px solid #ddd;
}

.main-header .mobile-menu .navigation li>ul>li:first-child {
    border-top: 1px solid #ddd;
}

.main-header .mobile-menu .navigation li>a {
    position: relative;
    display: block;
    line-height: 24px;
    padding: 10px 20px;
    font-size: var(--font-16);
    color: var(--dark-color);
    text-transform: capitalize;
}

.main-header .mobile-menu .navigation li.current>a,
.main-header .mobile-menu .navigation li:hover>a {
    color: var(--dark-text-color-two);
}

.main-header .mobile-menu .navigation li.dropdown .dropdown-btn {
    position: absolute;
    right: 0;
    top: 0;
    width: 44px;
    height: 44px;
    text-align: center;
    color: var(--dark-color);
    font-size: var(--font-16);
    line-height: 44px;
    cursor: pointer;
    z-index: 5;
}

.main-header .mobile-menu .navigation li.dropdown .dropdown-btn:after {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 1px;
    height: 24px;
    border-left: 1px solid #ddd;
}

.main-header .mobile-menu .menu-box .mCSB_scrollTools {
    width: 3px;
}

/* ==========================================================================
   HEADER SEARCH / NAV OPTIONS
   ========================================================================== */
.main-header .outer-box {
    position: relative;
    float: right;
    padding: 37px 0;
    margin-left: 0px;
}

.main-header .search-box-outer {
    position: relative;
    float: left;
    border-right: 1px solid #999;
    margin-right: var(--margin-right-20);
    padding-right: var(--padding-right-20);
}

.main-header .search-box-btn {
    position: relative;
    top: 0;
    display: block;
    float: left;
    font-size: var(--font-20);
    color: var(--main-color-two);
    line-height: 20px !important;
    cursor: pointer;
    background: 0 0;
    transition: .5s;
}

.main-header .outer-box .nav-btn {
    position: relative;
    float: left;
    cursor: pointer;
    line-height: 1em;
    font-size: var(--font-22);
    color: var(--main-color-two);
    margin-left: var(--margin-left-35);
    transition: .5s;
}

/* ==========================================================================
   HEADER CART STYLES
   ========================================================================== */
.main-header .cart-box,
.main-header .cart-box .cart-box-btn,
.main-header .cart-box .cart-panel .btns-boxed li a:hover {
    color: var(--main-color);
    background: 0 0;
}

.main-header .cart-box {
    position: relative;
    float: left;
    line-height: 1em;
    padding-top: 3px;
    display: inline-block;
    font-size: var(--font-16);
}

.main-header .cart-box .cart-box-btn {
    cursor: pointer;
    font-size: var(--font-24);
    transition: .3s;
}

.main-header .cart-box .cart-box-btn .total-cart {
    position: absolute;
    right: -8px;
    top: -8px;
    width: 18px;
    height: 18px;
    color: var(--white-color);
    font-size: var(--font-10);
    font-weight: 700;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    background-color: var(--dark-color-two);
}

.main-header .cart-product {
    position: relative;
    margin-bottom: var(--margin-bottom-20);
    min-height: 90px;
    border-bottom: 1px solid #e4e4e4;
}

.main-header .cart-product .inner {
    position: relative;
    padding-left: var(--padding-left-90);
    min-height: 70px;
}

.main-header .cart-product .inner .cross-icon {
    position: absolute;
    right: 0;
    top: -2px;
    z-index: 1;
    cursor: pointer;
    color: var(--dark-color);
    font-size: var(--font-18);
    transition: .5s;
}

.main-header .cart-product .inner .image {
    position: absolute;
    width: 70px;
    height: 70px;
    left: 0;
    top: 0;
}

.main-header .cart-product .inner h3 {
    position: relative;
    font-weight: 600;
    letter-spacing: 1px;
    font-size: var(--font-15);
    margin: var(--margin-zero);
    text-transform: capitalize;
}

.main-header .cart-product .inner h3 a {
    color: var(--dark-color-two);
    transition: .3s;
}

.main-header .cart-product .inner .quantity-text {
    position: relative;
    font-weight: 300;
    color: var(--dark-color);
    font-size: var(--font-14);
    margin-top: var(--margin-top-5);
    margin-bottom: var(--margin-zero);
}

.main-header .cart-product .inner .price {
    position: relative;
    font-weight: 700;
    font-size: var(--font-16);
    margin-top: var(--margin-top-5);
    color: var(--dark-color);
}

.main-header .cart-box .cart-panel {
    left: auto !important;
    right: 0 !important;
    border-radius: 0;
    padding: 20px;
    min-width: 300px;
    margin-top: var(--margin-top-60);
    z-index: -1;
    box-shadow: 0 0 25px rgba(0, 0, 0, .15);
    border: 3px solid var(--main-color);
    transform: translate3d(0, 0, 0) !important;
}

.main-header .cart-box .cart-panel .cart-total {
    color: var(-dark-color-two);
    font-size: var(--font-15);
    font-weight: 400;
    text-align: center;
    text-transform: capitalize;
}

.main-header .cart-box .cart-panel .cart-total span {
    font-weight: 800;
    font-size: var(--font-16);
}

.main-header .cart-box .cart-panel .btns-boxed {
    position: relative;
    text-align: center;
    margin-top: var(--margin-top-20);
}

.main-header .cart-box .cart-panel .btns-boxed li {
    position: relative;
    margin: 0 5px;
    display: inline-block;
}

.main-header .cart-box .cart-panel .btns-boxed li a {
    position: relative;
    color: var(--white-color);
    font-weight: 500;
    font-size: var(--font-12);
    padding: 10px 20px 8px;
    border-radius: 2px;
    display: inline-block;
    background-color: var(--main-color);
    border: 1px solid var(--main-color);
    text-transform: uppercase;
    transition: .3s;
}

/* ==========================================================================
   BUTTON & OFFER HEADER STYLES
   ========================================================================== */
.main-header .button-box {
    position: relative;
    float: left;
    margin-top: 0px;
    margin-left: 0px;
}

.btn-style-twelve {
    background: #0b7ab1;
    border-radius: 7px;
    padding: 8px 10px;
    font-size: 16px;
    text-transform: capitalize;
    font-family: var(--font-family-Sen);
    line-height: 20px;
}

.btn-style-twelve:hover .header-btn-text {
    color: #184780 !important;
}

.btn-style-twelve:hover {
    color: #184780 !important;
    background: #ebebeb;
}

.header-upper {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    position: relative;
    background: #02073e;
    padding: 0px;
}

.offer-header {
    display: flex;
    min-width: 100%;
    gap: 0px;
    text-decoration: none;
    color: white;
    background: #02073e;
}

.marquee-content {
    display: flex;
    gap: 15px;
    width: 100%;
    min-width: max-content;
    padding: 10px 10px;
    background: #02073e;
    justify-content: center;
    align-items: center;
    text-transform: capitalize;
}

.marquee-content a {
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: 700;
}

.special-test { font-weight: 700; }

.processor-color {
    color: #ff5733;
    font-weight: bold;
    transition: color 0.5s ease;
}

.price-color {
    color: #33c7ff;
    font-weight: bold;
    transition: color 0.5s ease;
}

@keyframes marquee {
    from { transform: translateX(100%); }
    to { transform: translateX(-100%); }
}

.offer-header-link {
    font-weight: bold;
    background: #1c9e00;
    color: #f2f2f2;
    padding: 10px 10px;
    border-radius: 15px;
    margin-left: 40px;
}

.offer-header:hover {
    background: #e4e4e4;
    color: #000000;
}

.offer-header:hover .marquee-content {
    background: #e4e4e4;
}

.offer-header:hover .offer-header-link {
    background: #02073e;
    color: white;
}

@media screen and (max-width: 1075px) {
    .marquee-content {
        width: max-content;
        min-width: 100%;
    }
}

/* ==========================================================================
   POPUP SEARCH STYLES
   ========================================================================== */
.search-popup {
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    z-index: 99999;
    margin-top: -540px;
    transform: translateY(-100%);
    transition: 1.5s cubic-bezier(.86, 0, .070, 1);
}

.search-popup .color-layer {
    position: absolute;
    content: '';
    left: 0;
    top: 0;
    height: 100vh;
    width: 100%;
    background-color: rgba(0, 0, 0, .9);
    transition: 1.5s cubic-bezier(.86, 0, .070, 1);
}

.header-style-three .cart-box .cart-box-btn .total-cart,
.search-popup .close-search {
    background-color: var(--main-color);
}

.sidenav-bar-visible .search-popup { width: 80%; }

.search-popup:after {
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    height: 560px;
    background-image: url(../images/icons/waves-shape.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin-top: 0;
    content: "";
}

.search-active .search-popup {
    transform: translateY(0);
    margin-top: var(--margin-zero);
}

.search-popup .close-search {
    position: absolute;
    left: 0;
    right: 0;
    top: 75%;
    margin: -200px auto 0;
    border-radius: 50%;
    text-align: center;
    width: 70px;
    cursor: pointer;
    border-bottom: 3px solid var(--white-color);
    transition: .5s;
    opacity: 0;
    visibility: hidden;
}

.search-popup .close-search span {
    position: relative;
    display: block;
    height: 70px;
    width: 70px;
    font-size: var(--font-30);
    line-height: 70px;
    color: var(--white-color);
}

.search-active .search-popup .close-search {
    visibility: visible;
    opacity: 1;
    top: 50%;
    transition-delay: 1.5s;
}

.search-popup form {
    position: absolute;
    max-width: 700px;
    top: 50%;
    left: 15px;
    right: 15px;
    z-index: 999;
    margin: -35px auto 0;
    transform: scaleX(0);
    transform-origin: center;
    background-color: var(--dark-color);
    transition: .3s;
}

.search-active .search-popup form {
    transform: scaleX(1);
    transition-delay: 1.2s;
}

.search-popup .form-group {
    position: relative;
    margin: var(--margin-zero);
    overflow: hidden;
}

.search-popup .form-group input[type=search],
.search-popup .form-group input[type=text] {
    position: relative;
    display: block;
    font-size: var(--font-18);
    line-height: 50px;
    color: var(--black-color);
    height: 70px;
    width: 100%;
    padding: 10px 30px;
    background-color: var(--white-color);
    transition: .5s;
    font-weight: 500;
    text-transform: capitalize;
}

.search-popup .form-group button,
.search-popup .form-group input[type=submit] {
    position: absolute;
    right: 30px;
    top: 0;
    height: 70px;
    line-height: 70px;
    background: 0 0;
    text-align: center;
    font-size: var(--font-24);
    color: var(--black-color);
    padding: 0;
    cursor: pointer;
    transition: .5s;
}

.search-popup .form-group button:hover,
.search-popup .form-group input[type=submit]:hover {
    color: var(--black-color);
}

.search-popup input::placeholder,
.search-popup textarea::placeholder {
    color: var(--black-color);
}

.search-popup .close-search.style-two {
    position: absolute;
    right: 25px;
    left: auto;
    color: var(--white-color);
    width: auto;
    height: auto;
    top: 25px;
    margin: 0;
    border: none;
    background: 0 0 !important;
    box-shadow: none !important;
    transition: .5s;
}

.search-popup .close-search.style-two span {
    font-size: var(--font-20);
    color: var(--white-color);
}

/* ==========================================================================
   HEADER STYLE VARIANTS & SPECIFICS
   ========================================================================== */

/* Header Style Two, Three, Four, Five, Six, Seven Block (Kept for continuity) */
.header-style-two { position: absolute; top: 50px; left: 0; right: 0; }
.header-style-two .header-lower .inner-container { padding: 0 40px; background-color: var(--white-color); }

.header-style-three { position: absolute; top: 0; left: 0; right: 0; }
.header-style-three .search-box-outer { border-color: var(--white-color); }
.header-style-six .cart-box .cart-box-btn,
.header-style-six .search-box-outer .search-box-btn,
.header-style-three .cart-box .cart-box-btn,
.header-style-three .search-box-btn { color: var(--white-color); }

.header-style-three .header-lower .mobile-nav-toggler {
    display: block; line-height: 1em; margin-top: -3px; color: var(--white-color); margin-left: var(--margin-left-30); transition: .5s;
}
.header-style-three #navbarSupportedContent { display: block; }
.header-style-three .sticky-header .logo { padding: 0; }
.header-style-three .sticky-header { background-color: var(--dark-color-two); }
.header-style-five .sticky-header .outer-box,
.header-style-three .sticky-header .outer-box { padding: 27px 0; }
.header-style-three .header-lower .nav-outer .main-menu,
.header-style-three .sticky-header .main-menu { opacity: 0; visibility: hidden; }
.header-style-three .sticky-header .mobile-nav-toggler { display: block; float: left; color: var(--white-color); font-size: var(--font-24); margin-left: var(--margin-left-25); }
.header-style-five .sticky-header .main-menu .navigation>li>a,
.header-style-three .main-menu .navigation>li>a { padding: 25px 0; }

.header-style-four,
.main-header.header-style-seven { position: absolute; left: 0; right: 0; }
.header-style-four .header-top { background: 0 0; border-bottom: 1px solid #ebebeb; }
.header-style-four .auto-container,
.header-style-seven .auto-container { max-width: 1680px; }
.header-style-four .header-top .info li a,
.header-style-four .header-top .social-box li a,
.header-style-seven .header-top .info li a,
.header-style-seven .header-top .social-box li a { color: #64676c; }

.header-style-four .cart-box .cart-box-btn,
.header-style-four .header-top .info li a .icon,
.header-style-four .main-menu .navigation>li.current>a,
.header-style-four .main-menu .navigation>li:hover>a,
.header-style-four .main-menu .navigation>li>ul>li>a:before,
.header-style-four .main-menu .navigation>li>ul>li>ul>li>a:before,
.header-style-four .search-box-btn,
.header-style-four .sticky-header .main-menu .navigation>li.current>a,
.header-style-four .sticky-header .main-menu .navigation>li:hover>a { color: var(--main-color-four); }

.header-style-four .main-menu .navigation>li>a { color: #64676c; font-weight: 500; }
.header-style-four .main-menu .navigation>li>ul,
.header-style-four .main-menu .navigation>li>ul>li>ul { background-color: var(--main-color-four); }

.header-style-five { position: absolute; left: 0; top: 30px; right: 0; }
.header-style-five .inner-container { position: relative; padding-left: 250px; border-radius: 8px; background-color: var(--white-color); }
.header-style-five .inner-container .logo-box { position: absolute; left: 0; top: 0; padding: var(--padding-zero); background: linear-gradient(to right, var(--main-color-six) 0, var(--main-color-seven) 100%); }
.header-style-five .header-lower .main-menu,
.header-style-five .info-box li a { padding-left: var(--padding-left-40); }
.header-style-five .inner-container .logo-box:before { position: absolute; content: ''; right: -15px; bottom: 0; border-top: 9px solid var(--main-color-seven); border-right: 15px solid transparent; }
.header-style-five .info-box { position: relative; padding: 15px 0 15px 40px; border-bottom: 1px solid #ddd; }
.header-style-five .info-box li { position: relative; display: inline-block; font-size: var(--font-16); }
.header-style-five .info-box li .icon { position: absolute; left: 0; top: 0; width: 30px; height: 30px; line-height: 30px; border-radius: 50px; text-align: center; display: inline-block; font-size: var(--font-14); color: var(--main-color-six); background-color: var(--main-color-eight); }
.header-style-five .info-box li a { position: relative; padding-top: 3px; font-weight: 500; color: var(--dark-color-four); transition: .3s; font-family: var(--font-family-DM-Sans); }

.header-style-five .cart-box .cart-box-btn,
.header-style-five .info-box li a:hover,
.header-style-five .main-menu .navigation>li.current>a,
.header-style-five .main-menu .navigation>li:hover>a,
.header-style-five .main-menu .navigation>li>ul>li>a:before,
.header-style-five .main-menu .navigation>li>ul>li>ul>li>a:before,
.header-style-five .search-box-btn,
.header-style-five .sticky-header .main-menu .navigation>li.current>a,
.header-style-five .sticky-header .main-menu .navigation>li:hover>a { color: var(--main-color-seven); }

.header-style-five .header-lower .nav-outer { width: 100%; }
.header-style-five .main-menu .navigation>li>a { padding: 10px 0; color: #010048; font-weight: 500; font-family: var(--font-family-DM-Sans); }
.header-style-five .main-menu .navigation>li.dropdown>a { padding-right: 15px !important; }
.header-style-five .main-menu .navigation>li.dropdown::before { font-family: FontAwesome; content: "\f107"; position: absolute; right: 0; top: 15px; font-size: var(--font-16); color: var(--dark-color-four); transition: .5s; }

.header-style-five .main-menu .navigation>li.current>a,
.header-style-five .main-menu .navigation>li:hover>a { color: var(--main-color-six); background: linear-gradient(to left, var(--main-color-six) 0, var(--main-color-seven) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.header-style-five .main-menu .navigation>li.current::before,
.header-style-five .main-menu .navigation>li:hover::before { -webkit-text-fill-color: inherit !important; color: var(--main-color-six); }

.header-style-five .header-lower .outer-box { position: absolute; right: 0; top: 0; padding: var(--padding-zero); }
.header-style-five .outer-box .phone-box { position: relative; padding: 25px 20px 24px 0; font-weight: 700; font-size: var(--font-14); color: var(--white-color); font-family: var(--font-family-Sen); }
.header-style-five .outer-box .phone-box .box-inner { position: relative; padding-left: var(--padding-left-75); }
.header-style-five .outer-box .phone-box:before { position: absolute; content: ''; left: 29px; top: 0; right: 0; bottom: 0; background: linear-gradient(to right, var(--main-color-six) 0, var(--main-color-seven) 100%); }
.header-style-five .outer-box .phone-box a { position: relative; font-size: var(--font-26); color: var(--white-color); display: inline-block; margin-top: var(--margin-top-5); }
.header-style-five .outer-box .phone-box .icon { position: absolute; left: 0; top: -3px; width: 58px; height: 58px; line-height: 58px; text-align: center; border-radius: 50px; display: inline-block; font-size: var(--font-24); background: linear-gradient(to right, var(--main-color-six) 0, var(--main-color-seven) 100%); }
.header-style-five .sticky-header .main-menu .navigation>li.dropdown::before { top: 30px; }
.header-style-five .sticky-header .logo { padding: 15px 0; }
.header-style-five .main-menu .navigation>li>ul,
.header-style-five .main-menu .navigation>li>ul>li>ul { background-color: var(--main-color-six); }

/* Header Style Six Specific */
.header-style-six { background-color: #fff; }
.header-style-six .main-menu .navigation>li>a { font-weight: 700; padding: 30px 0; color: #000; font-family: var(--font-family-DM-Sans); }
.header-style-six .main-menu .navigation>li.current>a,
.header-style-six .main-menu .navigation>li:hover>a,
.header-style-six .main-menu .navigation>li>ul>li>a:before,
.header-style-six .main-menu .navigation>li>ul>li>ul>li>a:before,
.header-style-six .outer-box .nav-btn:hover,
.header-style-six .outer-box .search-box-btn:hover,
.header-style-six .sticky-header .main-menu .navigation>li.current>a,
.header-style-six .sticky-header .main-menu .navigation>li:hover>a { color: var(--main-color-ten); }
.header-style-six .main-menu .navigation>li>ul,
.header-style-six .main-menu .navigation>li>ul>li>ul { background-color: var(--main-color-nine); }
.header-style-six .search-box-outer { border: 0; padding: var(--padding-zero); margin-right: var(--margin-zero); margin-left: var(--margin-left-25); padding-left: var(--padding-left-20); border-left: 1px dashed var(--white-color); }
.header-style-six .cart-box .cart-box-btn .total-cart { font-weight: 700; font-family: var(--font-family-DM-Sans); background-color: var(--main-color-twelve); }
.header-style-six .outer-box { display: flex; padding: 0px; justify-content: center; align-items: center; gap: 4px; }
.header-style-six .cart-product .inner .cross-icon:hover,
.header-style-six .cart-product .inner h3 a:hover { color: var(--main-color-twelve); }
.header-style-six .cart-box .cart-panel { border-color: var(--main-color-twelve); }
.header-style-six .cart-box .cart-panel .btns-boxed li a { border-color: var(--main-color-twelve); background-color: var(--main-color-twelve); }
.header-style-six .sticky-header .search-box-outer { border-color: var(--main-color-nine); }
.header-style-six .sticky-header .cart-box .cart-box-btn,
.header-style-six .sticky-header .main-menu .navigation>li>a,
.header-style-six .sticky-header .search-box-outer .search-box-btn { color: var(--main-color-nine); }

/* Header Style Seven Specific */
.main-header.header-style-seven .auto-container { max-width: 1200px; }
.header-style-seven .header-top { background: 0 0; }
.header-style-seven .header-top .info li a .icon { opacity: .5; color: var(--black-color); }
.header-style-seven .header-top .social-box { margin-left: var(--margin-left-40); }
.header-style-seven .header-top .social-box li { margin-left: var(--margin-left-15); }
.header-style-seven .main-menu .navigation>li>a { color: var(--main-color-fourteen); }
.header-style-seven .main-menu .navigation>li.current>a,
.header-style-seven .main-menu .navigation>li:hover>a,
.main-header.header-style-seven .main-menu .navigation>li>ul>li>a:before,
.main-header.header-style-seven .main-menu .navigation>li>ul>li>ul>li>a:before { color: var(--main-color-fifteen); }
.header-style-seven .cart-box .cart-box-btn,
.header-style-seven .search-box-btn { color: var(--main-color-sixteen); }
.header-style-seven .outer-box .nav-btn { top: -5px; }
.main-header.header-style-seven .main-menu .navigation>li>ul,
.main-header.header-style-seven .main-menu .navigation>li>ul>li>ul { background-color: var(--main-color-fifteen); }

/* Sidebar Info Specific (Associated with Headers) */
.sidebar-info-contents .content-inner .logo { padding-bottom: var(--padding-bottom-20); }
.sidebar-info-contents .content-inner .logo img { display: inline-block; max-width: 100%; }
.sidebar-info-contents .content-inner h5 { color: var(--white-color); margin-bottom: var(--margin-top-20); }
.sidebar-info-contents .content-inner .content-box .text { color: var(--white-color); margin-bottom: var(--margin-top-25); }
.sidebar-info-contents .content-inner .contact-info { position: relative; margin-top: var(--margin-top-60); }
.sidebar-info-contents .content-inner .social-box { position: relative; margin-top: var(--margin-top-20); margin-bottom: var(--margin-top-30); }
.sidebar-info-contents .content-inner .social-box li { position: relative; display: inline-block; margin-right: var(--margin-right-5); transition: .9s; }
.sidebar-info-contents .content-inner .social-box li a { position: relative; width: 36px; height: 36px; color: var(--main-color-two); z-index: 1; font-size: var(--font-14); line-height: 36px; text-align: center; border-radius: 50%; display: inline-block; background-color: var(--white-color); transition: .5s; }
.sidebar-info-contents .content-inner .social-box li a:hover { color: var(--white-color); background-color: var(--main-color); }
.close-side-widget, .close-side-widget:hover { color: var(--white-color) !important; font-size: var(--font-24); }

@media only screen and (max-width:1350px) {
    .main-header .button-box { margin-left: 0; }
    .main-header .sticky-header .logo img { height: 30px; }
}

/* ==========================================================================
   LOCATION SEARCH DROPDOWN STYLES
   ========================================================================== */
.header-search-wrapper {
    position: relative;
    width: 250px;
}

.header-search-wrapper .search-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
}

#header-location-search {
    width: 100%;
    height: 45px;
    padding: 10px 15px 10px 40px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    color: #333;
    background-color: #fff;
    transition: all 0.3s ease;
}

@media screen and (min-width:1165px) {
    #header-location-search {
        width: 100%;
        height: 45px;
        padding: 10px 15px 10px 40px;
        border: 1px solid #ccc;
        border-radius: 8px;
        font-size: 16px;
        color: #333;
        background-color: #fff;
        transition: all 0.3s ease;
        margin-top: 0px;
    }

    .header-search-wrapper .search-icon {
        position: absolute;
        top: 64%;
        left: 15px;
        transform: translateY(-50%);
        color: #999;
        pointer-events: none;
    }
}

#header-location-search:focus {
    outline: none;
    border-color: #629904;
    box-shadow: 0 0 5px rgba(98, 153, 4, 0.5);
}

#header-location-search::placeholder {
    color: #c0392b;
    opacity: 1;
}

.search-dropdown-container {
    position: relative;
}

.location-search-container {
    background-color: transparent;
    position: absolute;
    top: calc(100% + 5px);
    right: 0;
    width: 224px;
    z-index: 1000;
    border-radius: 11px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
}

.location-search-container.active {
    opacity: 1 !important;
    transform: translateY(0);
    visibility: visible !important;
}

.location-search-header,
.location-search-label {
    display: none;
}

.location-search-layout {
    padding: 0;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    min-width: 100%;
}

.Locationsearch {
    display: none;
}

.location-search-results {
    height: 300px;
    overflow-y: auto;
    background-color: #fff;
}

.location-search-results>h3 {
    padding: 0 20px;
    margin: 20px 0 5px 0;
    width: 100%;
}

.location-search-results>h3>a {
    text-decoration: none !important;
    text-transform: capitalize !important;
    color: #000;
    font-size: 16px !important;
    font-weight: 700 !important;
    width: 100%;
}

.location-search-results>ul {
    border-bottom: 1px solid #efefef;
    padding: 10px 20px;
    text-decoration: none !important;
    text-transform: capitalize !important;
    color: #000;
}

.navigation,
.navigation ul,
.accordion-box {
    list-style: none !important;
}

.location-search-results>ul>li {
    width: 100%;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.location-search-results>ul>li::before {
    content: '\f061';
    font-family: 'FontAwesome';
    color: #0060ff;
}

.location-search-results>ul>li>a {
    text-decoration: none !important;
    text-transform: capitalize !important;
    color: #000;
    width: 100%;
}

@media screen and (max-width:662px) {
    .location-search-layout {
        min-width: 100%;
    }
}

/* ==========================================================================
   MISC STYLES
   ========================================================================== */
.breadcrumb-item a {
    color: white;
}

/* ==========================================================================
   SIDEBAR STYLES
   ========================================================================== */

#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 75px;
    background-color: #112f5d;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    z-index: 1050;
    overflow-y: none;
    border-radius: 0px;
}

#sidebar a {
    color: #fff;
} 

#sidebar a:hover {
    color: #ffffff6b;
}

#sidebarNav {
    padding: 100px 20px;
    height: 100vh;
}

#sidebar .navbar-nav {
    flex-direction: column;
}

#sidebar .nav-link {
    padding: 10px 20px;
    font-size: 16px;
}

#sidebar .nav-link:hover {
    background-color: #f0f0f0;
}

#sidebar li {
    margin: 20px 0;
    position: relative;
}

/* --- Hover Tooltips for Desktop --- */
#sidebar li::before {
    color: #fff;
    font-size: 11px;
    background: black;
    padding: 4px 10px;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
    margin-left: -18px;
    position: absolute;
    top: -33px;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s ease;
    pointer-events: none;
}

#sidebar li:hover::before {
    opacity: 1; /* Show on hover */
}

#sidebar li:first-child:hover::before { content: "Home"; }
#sidebar li:nth-child(2):hover::before { content: "Order"; }
#sidebar li:nth-child(3):hover::before { content: "Announcements"; }
#sidebar li:nth-child(4):hover::before { content: "Knowledgebase"; }
#sidebar li:nth-child(5):hover::before { content: "Downloads"; }
#sidebar li:nth-child(6):hover::before { content: "Tickets"; }
#sidebar li:nth-child(7):hover::before { content: "Network Status"; }
#sidebar li:nth-child(8):hover::before { content: "My Services"; }
#sidebar li:nth-child(9):hover::before { content: "My Invoices"; }
#sidebar li:nth-child(10):hover::before { content: "Contact Us"; }


/* ==========================================================================
   MOBILE RESPONSIVE SIDEBAR
   ========================================================================== */

@media (max-width: 991px) {
    #sidebar {
        position: relative;
        width: 100%;
        height: auto;
    }

    #sidebarNav {
        padding: 10px;
        height: auto;
    }

    #sidebar .navbar-nav {
        flex-direction: row;
        justify-content: space-between;
        overflow-x: auto;
    }

    #sidebar li {
        padding: 0 42px;
        margin: auto;
    }

    /* Adjust labels to be visible text under icons on mobile */
    #sidebar li::before {
        opacity: 1;
        color: #fff;
        font-size: 13px;
        background: transparent;
        padding: 2px 3px;
        border-radius: 23px;
        margin-left: -33px;
        position: relative; 
        top: -3px;
    }

    #sidebar li:first-child::before { content: "Home"; }
    #sidebar li:nth-child(2)::before { content: "Order"; }
    #sidebar li:nth-child(3)::before { content: "Announcements"; }
    #sidebar li:nth-child(4)::before { content: "Knowledgebase"; }
    #sidebar li:nth-child(5)::before { content: "Downloads"; }
    #sidebar li:nth-child(6)::before { content: "Tickets"; }
    #sidebar li:nth-child(7)::before { content: "Network"; }
    #sidebar li:nth-child(8)::before { content: "Services"; }
    #sidebar li:nth-child(9)::before { content: "Invoices"; }
    #sidebar li:nth-child(10)::before { content: "Contact"; }
}

/* ==========================================================================
   EPYTHEME HOMEPAGE STYLES
   ========================================================================== */

.auto-container, .container-3 {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Typography & Spacing Utilities */
.fs-40 { font-size: 40px; font-weight: 700; line-height: 1.2; }
.fs-16 { font-size: 16px; font-weight: 600; }
.pb-10 { padding-bottom: 10px; }
.pb-30 { padding-bottom: 30px; }
.pb-40 { padding-bottom: 40px; }
.pt-40 { padding-top: 40px; }
.mt-5 { margin-top: 3rem; }
.mb-5 { margin-bottom: 3rem; }
.br-10 { border-radius: 10px; }

/* Colors */
.txt-white, .text-white { color: #ffffff !important; }
.text-black { color: #000000 !important; }
.text-dark-blue { color: #1a2b4c !important; }
.bg-dgrey { background-color: #2c2f33; } /* Adjust to match your theme's dark grey */
.bg-6-new { background-image: linear-gradient(135deg, #1e2024 0%, #2b2e33 100%); } /* Dark gradient */
.bg-7 { background-color: #f8f9fa; transition: all 0.3s ease; border: 1px solid #e9ecef; }
.bg-7-new { background-color: #ffffff; transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

/* --- Search & Product Section --- */
.billing-home-banner {
    padding: 40px 0;
}

.home-search-product #productSearch,
.home-search-product #productGroupDropdown {
    height: 45px;
    border-radius: 5px;
    border: 1px solid #ced4da;
    box-shadow: none;
}

.home-search-product #productSearch:focus,
.home-search-product #productGroupDropdown:focus {
    border-color: #3c6eb4;
    outline: none;
}

/* Product Cards */
.product-card {
    transition: all 0.3s ease-in-out;
}

.product-card.hidden {
    display: none;
}

.card-2 {
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
    text-align: center;
}

.card-2.dark {
    background-color: #1e2228; /* Dark card background */
    color: #ffffff;
    border: 1px solid #2a3038;
}

.card-2:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.card-2 .card-img-top {
    width: 64px;
    height: 64px;
    object-fit: contain;
    margin-bottom: 20px;
}

.card-2 .card-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #ffffff;
}

.card-2 p {
    font-size: 14px;
    color: #aeb4be;
    margin-bottom: 20px;
    flex-grow: 1;
}

.cta-section .btn-light {
    background-color: #ffffff;
    color: #1e2228;
    font-weight: 600;
    padding: 8px 24px;
    border-radius: 5px;
    text-transform: uppercase;
    font-size: 13px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.cta-section .btn-light:hover {
    background-color: #3c6eb4;
    color: #ffffff;
}

/* --- Help Section (How Can We Help) --- */
.help-sec {
    padding-top: 50px;
    padding-bottom: 50px;
}

.bx-s3 {
    width: 160px;
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    margin: 0 auto;
    cursor: pointer;
}

.bx-s3:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.1);
    border-color: #3c6eb4;
}

.bx-s3 .icon {
    margin-bottom: 15px;
}

.img-sm-c {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.txt-st3 {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

/* --- Quick Links / FAQ Section --- */
.pad-fix {
    padding-left: 15px;
    padding-right: 15px;
}

.faq-section a {
    text-decoration: none;
}

.faq-section .bg-7 {
    width: 220px;
    height: 160px;
}

.faq-section .bg-7:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    border-color: #3c6eb4;
}

.faq-section .bg-7 i {
    font-size: 40px;
    margin-bottom: 15px;
}

.faq-section .bg-7 img {
    width: 40px;
    height: 40px;
    padding: 8px; /* Assuming the image is an icon with a background */
    margin-bottom: 15px;
}

a:hover {
    text-decoration: none !important;
}

ul {
    padding-inline-start: 0px !important;
}

footer ul {
    list-style: none !important;
}

.footer-widget .float-lg-right {
    background-color: white;
}

footer .auto-container .text-white {
    padding-top: 0px !important;
    font-weight: 900 !important;
}

#footer__copyright {
    padding-bottom: 20px !important;
}

/* Ensure the body has enough top padding so content isn't hidden under the header */
body {
    padding-top: 90px; /* Adjust this number to match the actual height of your white header */
    padding-left: 75px !important;
}

/* Add this to ensure the topbar (if used) also respects the scrollbar */
.topbar {
    width: auto !important;
    left: 75px !important;
    right: 0 !important;
}

.master-breadcrumb {
    width: 100% !important;
}

/* The Sidebar styling to match your screenshot */
#sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: 75px;
    height: 100vh;
    background-color: #112f5d; /* Dark blue from your image */
    z-index: 2000; /* Higher than header */
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 20px;
}

/* If you are using a fixed or sticky header that covers the whole width */
.custom-navbar {
    width: 100%;
    right: 0;
    /* This ensures the header respects the gutter of the scrollbar */
    padding-right: constant(safe-area-inset-right);
    padding-right: env(safe-area-inset-right);
}

/* Specifically for the sticky sidebar in your file */
.sticky-sidebar {
    z-index: 10;
}

#sidebar .navbar-nav {
    width: 100%;
    text-align: center;
}

#sidebar .nav-item {
    margin: 15px 0;
}

#sidebar .nav-item a {
    color: #fff;
    font-size: 20px;
    display: block;
    transition: 0.3s;
}

#sidebar .nav-item a:hover {
    color: #3c6eb4;
    background: rgba(255,255,255,0.1);
}

/* Mobile: Revert to standard layout */
@media (max-width: 991px) {
    body { padding-left: 0 !important; }
    .main-header, .topbar, .master-breadcrumb { 
        left: 0 !important; 
        width: 100% !important; 
    }
    #sidebar {
        position: relative;
        width: 100%;
        height: auto;
        flex-direction: row;
        padding: 10px;
    }
    #sidebar .navbar-nav {
        flex-direction: row;
        justify-content: space-around;
    }
}

.breadcrumb {
    background-color: transparent !important;
}

/* ==========================================================================
   LOGIN PAGE WIDE REDESIGN (DARK THEME)
   ========================================================================== */

/* Main Wide Card Structure */
#epy-login-form .card.wide-login-card {
    max-width: 900px !important;
    margin: 4rem auto !important;
    border: none !important;
    border-radius: 20px !important;
    background: #0f2547 !important; /* Deep Blue Background for the Left Form */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    position: relative !important;
}

#epy-login-form .card.wide-login-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #3c6eb4 0%, #5b9bd5 50%, #00bfff 100%) !important; /* Brighter accent bar */
    z-index: 10 !important;
}

/* Flexbox Row for Columns */
#epy-login-form .row.no-gutters {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
    min-height: 550px !important;
}

/* ── Left Column: Login (Dark Mode Colors) ───────────────────────────────── */
#epy-login-form .login-section {
    flex: 1 1 55% !important;
    padding: 2.5rem 3rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1 !important;
}

#epy-login-form .card-body {
    padding: 0 !important;
    flex: none !important;
}

#epy-login-form .login-section .h3 {
    font-size: 2rem !important;
    font-weight: 700 !important;
    color: #ffffff !important; /* Changed to White */
    letter-spacing: -0.5px !important;
    margin-bottom: 0.5rem !important;
    line-height: 1.2 !important;
}

#epy-login-form .login-section .text-muted.mb-0 {
    font-size: 0.875rem !important;
    color: #88a0c7 !important; /* Changed to Light Blue */
}

#epy-login-form .form-group {
    margin-bottom: 1rem !important;
}

/* ── Right Column: Register (Matching Dark Blue) ─────────────────────────── */
#epy-login-form .register-section {
    flex: 1 1 45% !important;
    background: #f4f7fb !important; /* Clean, light background */
    border-left: 1px solid #e1e5eb !important; /* Subtle dividing line */
    position: relative !important;
    z-index: 5 !important;
}

#epy-login-form .register-section h3 {
    color: #0f2547 !important; /* Deep dark blue to match the left side */
    font-weight: 700 !important;
    font-size: 1.75rem !important;
}

#epy-login-form .register-section p {
    color: #6a82a6 !important; /* Muted blue-grey text for readability */
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
}

#epy-login-form .btn-outline-light {
    border: 2px solid #2b6cb0 !important; /* Vibrant blue border */
    color: #2b6cb0 !important; /* Vibrant blue text */
    background: transparent !important;
    padding: 0.6rem 2rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
    transition: all 0.3s ease !important;
}

#epy-login-form .btn-outline-light:hover {
    background: #2b6cb0 !important; /* Fills in blue on hover */
    color: #ffffff !important;
}

/* ── Animated CSS Server Rack (Untouched) ────────────────────────────────── */
#epy-login-form .server-rack-wrapper {
    width: 100% !important;
    max-width: 200px !important;
    margin: 0 auto 2.5rem auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    background: #0f2547 !important; /* Solid dark blue box so LEDs pop */
    border-radius: 12px !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    box-shadow: 0 10px 20px rgba(17, 47, 93, 0.15), inset 0 0 15px rgba(0, 0, 0, 0.4) !important;
}

#epy-login-form .server-blade {
    height: 38px !important;
    background: linear-gradient(90deg, #1a2b4c 0%, #112f5d 100%) !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    gap: 8px !important;
    position: relative !important;
    overflow: hidden !important;
}

#epy-login-form .server-blade::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important; 
    left: -100% !important;
    width: 50% !important; 
    height: 100% !important;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent) !important;
    animation: serverScanline 4s infinite linear !important;
}

#epy-login-form .server-blade:nth-child(2)::after { animation-delay: 1.5s !important; }
#epy-login-form .server-blade:nth-child(3)::after { animation-delay: 3s !important; }

#epy-login-form .led {
    width: 6px !important;
    height: 6px !important;
    border-radius: 50% !important;
    flex-shrink: 0 !important;
}

#epy-login-form .led-green { background: #00ff88 !important; box-shadow: 0 0 8px #00ff88 !important; animation: blinkLed 1.2s infinite alternate !important; }
#epy-login-form .led-blue { background: #00bfff !important; box-shadow: 0 0 8px #00bfff !important; animation: blinkLed 1.8s infinite alternate-reverse !important; }
#epy-login-form .led-orange { background: #ffaa00 !important; box-shadow: 0 0 8px #ffaa00 !important; animation: blinkLed 0.6s infinite alternate !important; }

#epy-login-form .server-lines {
    flex-grow: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-left: 10px !important;
}

#epy-login-form .server-line { height: 3px !important; background: rgba(255,255,255,0.1) !important; border-radius: 2px !important; }
#epy-login-form .server-line.w-25 { width: 25% !important; }
#epy-login-form .server-line.w-50 { width: 50% !important; }
#epy-login-form .server-line.w-75 { width: 75% !important; }
#epy-login-form .server-line.w-100 { width: 100% !important; }

@keyframes blinkLed { 0%, 20% { opacity: 0.2; } 50%, 100% { opacity: 1; } }
@keyframes serverScanline { 0% { left: -100%; } 100% { left: 200%; } }

/* ── Dark Mode Inputs, Buttons & Captcha ─────────────────────────────────── */
#epy-login-form .password-header-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 0.25rem !important; 
}

#epy-login-form .password-header-row .form-control-label {
    margin-bottom: 0 !important; 
}

#epy-login-form .forgot-password-link {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    color: #5b9bd5 !important; /* Cyan link on dark background */
    text-decoration: none !important;
    letter-spacing: 0.02em !important;
    transition: color 0.2s ease !important;
}

#epy-login-form .forgot-password-link:hover {
    color: #ffffff !important;
}

#epy-login-form .form-control-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #a6bcdc !important; /* Soft light blue for labels */
    margin-bottom: 0.25rem !important; 
    display: block !important;
}

#epy-login-form .input-group.input-group-merge {
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important; /* Subtle white border */
    border-radius: 10px !important;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.2) !important; /* Semi-transparent dark input */
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#epy-login-form .input-group.input-group-merge:focus-within {
    border-color: #5b9bd5 !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.2) !important;
    background: rgba(0, 0, 0, 0.4) !important; /* Darkens slightly on focus */
}

#epy-login-form .input-group-prepend .input-group-text,
#epy-login-form .input-group-append .btn-reveal-pw {
    background: transparent !important;
    border: none !important;
    padding: 0 0.9rem !important;
    color: #6a82a6 !important;
}

#epy-login-form .form-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0.75rem 0.5rem 0.75rem 0 !important;
    font-size: 0.9rem !important;
    color: #ffffff !important; /* White text when typing */
}

#epy-login-form .form-control::placeholder {
    color: #6a82a6 !important; /* Light blue/grey placeholder */
    opacity: 1 !important;
}

#epy-login-form .captcha-container {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important; 
}

#epy-login-form #login.btn.btn-primary {
    width: 100% !important;
    max-width: 100% !important; 
    padding: 0.8rem 1.5rem !important;
    /* Vibrant blue gradient for the button */
    background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%) !important; 
    border: none !important;
    border-radius: 10px !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease !important;
    box-shadow: 0 4px 14px rgba(66, 153, 225, 0.35) !important;
    margin: 0 !important; 
}

#epy-login-form #login.btn.btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(66, 153, 225, 0.5) !important;
}

#epy-login-form .remember-me-label {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.85rem !important;
    color: #88a0c7 !important; /* Light blue text */
    cursor: pointer !important;
    gap: 8px !important; 
}

#epy-login-form .remember-me-label input[type="checkbox"] {
    position: relative !important;
    margin: 0 !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

/* ── Responsive styling for mobile ───────────────────────────────────────── */
@media (max-width: 768px) {
    #epy-login-form .login-section,
    #epy-login-form .register-section {
        flex: 1 1 100% !important;
    }
    #epy-login-form .login-section {
        padding: 2.5rem 1.5rem !important;
    }
    #epy-login-form .register-section {
        padding: 3rem 1.5rem !important;
        border-left: none !important;
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    }
}

/* ==========================================================================
   REGISTRATION PAGE REDESIGN (LIGHT THEME)
   ========================================================================== */

#page-wrapper .main-body .row {
    display: flex !important;
    flex-wrap: wrap !important;
    max-width: 1600px !important;
    justify-content: center !important;
}

/* Structure & Typography */
#epy-register-wrapper {
    max-width: 100% !important;
    margin: 0 !important;
}

#epy-register-wrapper .epy-reg-card {
    border: none !important;
    border-radius: 16px !important;
    background: #f0f4f9 !important;
    box-shadow: 0 8px 30px rgba(17, 47, 93, 0.06) !important;
    position: relative !important;
    overflow: visible !important;
}

/* Gradient Top Bar for each card */
#epy-register-wrapper .epy-reg-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #3c6eb4 0%, #5b9bd5 50%, #00bfff 100%) !important;
    z-index: 10 !important;
    border-radius: 16px 16px 0 0 !important;
}

/* 3. Force the wrapper to take full width */
#epy-register-wrapper .iti {
    width: 100% !important;
    display: block !important;
}

/* ── FIX: Phone Number Flag, Dial Code & Arrow ─────────────────────────── */

/* 1. Force the flag container to act as a flexible row */
#epy-register-wrapper .iti__selected-flag {
    display: flex !important;
    align-items: center !important;
    padding: 0 10px 0 16px !important; /* Safe padding inside the grey box */
    width: auto !important;
    background: transparent !important;
}

/* 2. Space out the dial code text */
#epy-register-wrapper .selected-dial-code {
    margin-left: 8px !important;
    margin-right: 6px !important;
    color: #0f2547 !important; /* Match text color */
}

/* 3. Fix the arrow positioning so it never overlaps */
#epy-register-wrapper .iti-arrow {
    position: relative !important; /* Prevents it from floating over text */
    margin-left: 8px !important;
    right: 0px  !important;
    border-top-color: #88a0c7 !important; /* Makes the arrow visible */
}

/* 4. Increase input padding slightly more to clear the longest codes */
#epy-register-wrapper .iti #inputPhone,
#epy-register-wrapper #inputPhone {
    padding-left: 130px !important; 
}

/* 5. Hide the duplicate FontAwesome icon */
#epy-register-wrapper label[for="inputPhone"] {
    display: none !important;
}

/* 6. Ensure the dropdown menu doesn't get cut off */
#epy-register-wrapper .epy-reg-card {
    overflow: visible !important; 
}
#epy-register-wrapper .epy-reg-card::before {
    border-radius: 16px 16px 0 0 !important;
}
.iti__country-list {
    z-index: 9999 !important;
    border-radius: 8px !important;
    border: 1px solid #e1e5eb !important;
    box-shadow: 0 8px 25px rgba(17, 47, 93, 0.15) !important;
}

/* 5. Clean up the dropdown menu styling so it floats perfectly above everything */
.iti__country-list {
    z-index: 9999 !important;
    border-radius: 8px !important;
    border: 1px solid #e1e5eb !important;
    box-shadow: 0 8px 25px rgba(17, 47, 93, 0.15) !important;
}

#epy-register-wrapper .card-title {
    color: #0f2547 !important;
    font-weight: 800 !important;
    font-size: 1.15rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 1.75rem !important;
    padding-bottom: 0.75rem !important;
    position: relative !important;
    border-bottom: 2px solid #dce3ef !important; /* The full light grey line */
}

#epy-register-wrapper .card-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: -2px !important; /* Aligns perfectly over the grey border */
    left: 0 !important;
    width: 60px !important; /* Length of the blue accent */
    height: 2px !important;
    background: #2b6cb0 !important; /* Vibrant blue color */
}

/* ── Sleek Inputs with Icons ─────────────────────────────────────────────── */
#epy-register-wrapper .form-group {
    margin-bottom: 1.25rem !important;
}

#epy-register-wrapper .prepend-icon {
    position: relative !important;
}

#epy-register-wrapper .field-icon {
    position: absolute !important;
    left: 16px !important;
    top: 45% !important;
    transform: translateY(-50%) !important;
    color: #88a0c7 !important;
    z-index: 5 !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    transition: color 0.2s ease !important;
}

#epy-register-wrapper .form-control {
    background: #ffffff !important; /* Soft light tech-blue background */
    border: 1.5px solid #dce3ef !important;
    border-radius: 10px !important;
    padding: 0.8rem 1rem 0.8rem 2.8rem !important; /* Extra padding on left for icon */
    color: #0f2547 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    height: auto !important;
}

#epy-register-wrapper .form-control::placeholder {
    color: #a6bcdc !important;
    font-weight: 400 !important;
}

/* Input Focus States */
#epy-register-wrapper .form-control:focus {
    border-color: #5b9bd5 !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.15) !important;
    background: #ffffff !important;
}

#epy-register-wrapper .form-control:focus + .field-icon,
#epy-register-wrapper .prepend-icon:focus-within .field-icon {
    color: #2b6cb0 !important;
}

/* Dropdown specific fix */
#epy-register-wrapper select.form-control {
    padding-left: 2.8rem !important;
    appearance: auto !important;
}

/* ── Custom Buttons ──────────────────────────────────────────────────────── */
#epy-register-wrapper .register-submit-btn {
    background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0.9rem 3rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(66, 153, 225, 0.35) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}

#epy-register-wrapper .register-submit-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(66, 153, 225, 0.5) !important;
}

#epy-register-wrapper .btn-outline-primary {
    border: 1.5px solid #2b6cb0 !important;
    color: #2b6cb0 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    background: transparent !important;
}

#epy-register-wrapper .btn-outline-primary:hover {
    background: #2b6cb0 !important;
    color: #ffffff !important;
}

/* Password Strength Meter Fix */
#epy-register-wrapper .password-strength-meter .progress {
    border-radius: 10px !important;
    background: #e1e5eb !important;
}

/* ==========================================================================
   WHMCS SIDEBAR REDESIGN (DARK THEME)
   ========================================================================== */

/* ── Main Sidebar Card ───────────────────────────────────────────────────── */
.sidebar .card-sidebar {
    background: #0f2547 !important; /* Deep Dark Blue */
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(17, 47, 93, 0.15) !important;
    overflow: hidden !important;
    margin-bottom: 2rem !important;
    position: relative !important;
    padding: 0.5em !important;
}

/* ── Card Header & Title ─────────────────────────────────────────────────── */
.sidebar .card-sidebar .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 1.25rem 1.5rem !important;
}

/* Header Icons (Left) */
.sidebar .card-sidebar .card-title i:not(.card-minimise) {
    color: #5b9bd5 !important; /* Light blue accent */
    margin-right: 6px !important;
}

/* ── Card Title (Flexbox Layout) ─────────────────────────────────────────── */
.sidebar .card-sidebar .card-title {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.2px !important;
    display: flex !important; 
    align-items: center !important; /* Vertically centers the text and icons */
    width: 100% !important;
    margin: 0 !important;
}

/* Minimise Chevron (Forced to the Right) */
.sidebar .card-sidebar .card-minimise,
.sidebar .card-sidebar .card-title i.float-right {
    color: #6a82a6 !important;
    margin-left: auto !important; /* This pushes the arrow to the extreme right */
    float: none !important; /* Kills the native Bootstrap float so Flexbox works */
}

/* ── Card Body (Raw Text/Forms) ──────────────────────────────────────────── */
.sidebar .card-sidebar .card-body {
    color: #a6bcdc !important;
    font-size: 0.9rem !important;
    padding: 1.25rem 1.5rem !important;
    text-align: left;
}

.sidebar .card-sidebar .card-body p {
    color: #a6bcdc !important;
}

/* ── List Group & Links ──────────────────────────────────────────────────── */
.sidebar .card-sidebar .list-group-item {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #a6bcdc !important; /* Muted blue-grey */
    padding: 0.85rem 1.5rem !important;
    font-size: 0.9rem !important;
    transition: all 0.3s ease !important;
}

.sidebar .card-sidebar .list-group-item .title {
    display: flex;
    font-size: 1rem;
    font-weight: 600 !important;
    margin-bottom: -15px !important;
}

.sidebar .card-sidebar .list-group-item:last-child {
    border-bottom: none !important;
}

/* Hover Effect (Slide slightly to the right) */
.sidebar .card-sidebar .list-group-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
    padding-left: 1.8rem !important; /* Creates a cool sliding animation */
}

/* Active Menu Item */
.sidebar .card-sidebar .list-group-item.active {
    background: rgba(91, 155, 213, 0.1) !important;
    color: #5b9bd5 !important;
    border-left: 3px solid #5b9bd5 !important;
}

/* Icons inside the list */
.sidebar .card-sidebar .sidebar-menu-item-icon,
.sidebar .card-sidebar .list-group-item i {
    color: #6a82a6 !important;
    margin-right: 10px !important;
    width: 20px !important;
    text-align: center !important;
}

.sidebar .card-sidebar .list-group-item:hover i,
.sidebar .card-sidebar .list-group-item.active i {
    color: #5b9bd5 !important; /* Icons light up on hover */
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.sidebar .card-sidebar .badge {
    background: #2b6cb0 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
}

/* ── Buttons inside Sidebar ──────────────────────────────────────────────── */
.sidebar .card-sidebar .btn {
    background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.sidebar .card-sidebar .btn:hover {
    box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3) !important;
}

/* ==========================================================================
   GLOBAL HEADER & NAVIGATION STYLES
   ========================================================================== */

/* ── 1. Main Navbar (header2) ────────────────────────────────────────────── */
#header2.header2 {
    background: #ffffff !important;
    box-shadow: 0 4px 20px rgba(17, 47, 93, 0.05) !important;
    border-bottom: 1px solid #e1e5eb !important;
    padding: 0 !important;
}

#header2 .navbar-nav > li > a,
#header2 .navbar-nav .nav-link {
    color: #0f2547 !important; /* Deep dark blue for high contrast */
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 1.25rem 1rem !important;
    transition: color 0.2s ease !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

#header2 .navbar-nav > li > a:hover,
#header2 .navbar-nav > li.active > a {
    color: #2b6cb0 !important; /* Vibrant blue on hover */
}

/* Dropdown Menus */
#header2 .dropdown-menu {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(17, 47, 93, 0.1) !important;
    padding: 0.5rem 0 !important;
    margin-top: 0 !important;
}

#header2 .dropdown-item {
    color: #6a82a6 !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

#header2 .dropdown-item:hover {
    background: #f4f7fb !important;
    color: #2b6cb0 !important;
    padding-left: 1.8rem !important; /* Cool slide effect on hover */
}

/* ── 2. Master Breadcrumb ────────────────────────────────────────────────── */
.master-breadcrumb {
    background: linear-gradient(135deg, #0f2547 0%, #16335f 100%) !important; /* Matches dark theme */
    padding: 1.25rem 0 !important;
    border-top: 1px solid rgba(255,255,255,0.05) !important;
    border-bottom: 1px solid rgba(0,0,0,0.2) !important;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.2) !important;
}

.master-breadcrumb .breadcrumb {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
}

.master-breadcrumb .breadcrumb-item {
    font-size: 1rem !important;
    font-weight: 500 !important;
    color: #a6bcdc !important;
}

.master-breadcrumb .breadcrumb-item a {
    color: #a6bcdc !important; /* Soft light blue/grey */
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.master-breadcrumb .breadcrumb-item a:hover {
    color: #ffffff !important;
}

.master-breadcrumb .breadcrumb-item.active {
    color: #ffffff !important;
    font-weight: 700 !important;
}

/* Custom FontAwesome Divider for Breadcrumbs */
.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    content: "\f105" !important; /* Angle Right Icon */
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #5b9bd5 !important;
    padding: 0 12px !important;
}

/* ── 3. Network Issue Notifications ──────────────────────────────────────── */
.network-issue-alert {
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border: none !important;
    color: #ffffff !important;
}

.network-issue-alert.alert-critical {
    background: linear-gradient(135deg, #e53e3e 0%, #c53030 100%) !important; /* Urgent Red */
}

.network-issue-alert.alert-scheduled {
    background: linear-gradient(135deg, #3182ce 0%, #2b6cb0 100%) !important; /* Calm Blue */
}

.network-issue-alert .issue-btn {
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 20px !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    padding: 0.4rem 1.25rem !important;
    letter-spacing: 0.05em !important;
    transition: all 0.2s ease !important;
}

.network-issue-alert .issue-btn:hover {
    background: #ffffff !important;
    color: #0f2547 !important;
    border-color: #ffffff !important;
}

.network-issue-alert .icon-pulse {
    animation: pulseWarning 1.5s infinite alternate !important;
}

@keyframes pulseWarning {
    0% { opacity: 0.6; transform: scale(0.95); }
    100% { opacity: 1; transform: scale(1.15); }
}

/* ==========================================================================
   HOMEPAGE REDESIGN (MATCHING PREMIUM THEME)
   ========================================================================== */

/* ── Typography & Headers ────────────────────────────────────────────────── */
#epy-home-wrapper .section-title {
    color: #0f2547;
    font-weight: 800 !important;
    font-size: 1.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    position: relative !important;
    display: inline-block !important;
    padding-bottom: 10px !important;
}

#epy-home-wrapper .section-title::after {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 60px !important;
    height: 3px !important;
    background: #2b6cb0 !important; /* Vibrant blue accent */
    border-radius: 3px !important;
}

#epy-home-wrapper .section-title.text-white::after {
    background: #5b9bd5 !important; /* Brighter blue for the dark section */
}

/* ── Search & Filter Inputs ──────────────────────────────────────────────── */
#epy-home-wrapper .form-group.prepend-icon {
    position: relative !important;
}

#epy-home-wrapper .field-icon {
    position: absolute !important;
    left: 16px !important;
    top: 45% !important;
    transform: translateY(-50%) !important;
    color: #88a0c7 !important;
    z-index: 5 !important;
    margin: 0 !important;
    font-size: 0.9rem !important;
    transition: color 0.2s ease !important;
}

#epy-home-wrapper .form-control {
    background: #ffffff !important;
    border: 1.5px solid #dce3ef !important;
    border-radius: 10px !important;
    padding: 0.8rem 1rem 0.8rem 2.8rem !important; /* Space for icon */
    color: #0f2547 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    box-shadow: 0 4px 15px rgba(17, 47, 93, 0.05) !important;
    transition: all 0.2s ease !important;
    height: auto !important;
}

#epy-home-wrapper select.form-control {
    appearance: auto !important;
}

#epy-home-wrapper .form-control:focus {
    border-color: #5b9bd5 !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.15), 0 4px 15px rgba(17, 47, 93, 0.05) !important;
}

#epy-home-wrapper .form-control:focus + .field-icon,
#epy-home-wrapper .prepend-icon:focus-within .field-icon {
    color: #2b6cb0 !important;
}

/* ── Product Cards ───────────────────────────────────────────────────────── */
#epy-home-wrapper .epy-home-card {
    border: none !important;
    border-radius: 16px !important;
    background: #f0f4f9 !important; /* Soft light blue/grey */
    box-shadow: 0 8px 25px rgba(17, 47, 93, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    overflow: hidden !important;
}

#epy-home-wrapper .epy-home-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #3c6eb4 0%, #5b9bd5 50%, #00bfff 100%) !important;
}

#epy-home-wrapper .epy-home-card:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 15px 35px rgba(17, 47, 93, 0.1) !important;
}

#epy-home-wrapper .epy-home-card .card-title {
    color: #0f2547 !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
}

#epy-home-wrapper .btn-outline-primary {
    border: 2px solid #2b6cb0 !important;
    color: #2b6cb0 !important;
    background: transparent !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.3s ease !important;
}

#epy-home-wrapper .btn-outline-primary:hover {
    background: #2b6cb0 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(43, 108, 176, 0.3) !important;
}

/* ── "How Can We Help" Section (Dark Theme) ────────────────────────────── */
#epy-home-wrapper .help-sec {
    background: linear-gradient(135deg, #0f2547 0%, #16335f 100%) !important; /* Deep dark blue */
}

#epy-home-wrapper .text-light-blue {
    color: #a6bcdc !important;
    font-size: 1.05rem !important;
}

#epy-home-wrapper .help-box-link {
    text-decoration: none !important;
    display: block !important;
}

#epy-home-wrapper .help-box {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 2rem 1rem !important;
    height: 100% !important;
    transition: all 0.3s ease !important;
}

#epy-home-wrapper .help-box:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-5px) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

#epy-home-wrapper .help-box .icon-circle {
    width: 60px !important;
    height: 60px !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto 1rem auto !important;
}

#epy-home-wrapper .help-box img {
    max-width: 30px !important;
    filter: brightness(0) invert(1) !important; /* Makes custom images pure white */
}

#epy-home-wrapper .help-box h3 {
    color: #ffffff !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

/* ── "Your Account" Section (Light Theme) ──────────────────────────────── */
#epy-home-wrapper .account-box-link {
    text-decoration: none !important;
    display: block !important;
}

#epy-home-wrapper .account-box {
    background: #ffffff !important;
    border: 1.5px solid #dce3ef !important;
    border-radius: 16px !important;
    padding: 2rem 1rem !important;
    height: 100% !important;
    box-shadow: 0 4px 15px rgba(17, 47, 93, 0.03) !important;
    transition: all 0.3s ease !important;
}

#epy-home-wrapper .account-box:hover {
    border-color: #5b9bd5 !important;
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 25px rgba(91, 155, 213, 0.15) !important;
}

#epy-home-wrapper .account-box i {
    font-size: 2.5rem !important;
    color: #3c6eb4 !important; /* Main brand blue */
    margin-bottom: 1rem !important;
    transition: color 0.3s ease !important;
}

#epy-home-wrapper .account-box:hover i {
    color: #2b6cb0 !important; /* Darkens on hover */
}

#epy-home-wrapper .account-box h3 {
    color: #0f2547 !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

/* ── Convert White Server Icon to Dark Blue ────────────────────────────── */
#epy-home-wrapper .epy-home-card .card-icon-wrapper img {
    /* This specific filter combination converts pure white into your 
       deep dark blue theme color (#0f2547) 
    */
    filter: brightness(0) saturate(100%) invert(12%) sepia(35%) saturate(3065%) hue-rotate(205deg) brightness(95%) contrast(98%) !important;
}

/* Optional: Make it light up vibrant blue when the user hovers over the card */
#epy-home-wrapper .epy-home-card:hover .card-icon-wrapper img {
    filter: brightness(0) saturate(100%) invert(35%) sepia(76%) saturate(1478%) hue-rotate(189deg) brightness(96%) contrast(89%) !important;
    transition: filter 0.3s ease !important;
}

/* ==========================================================================
   PREMIUM BOOTSTRAP TOOLTIPS
   ========================================================================== */

/* Make the tooltip fully solid instead of slightly transparent */
.tooltip.show {
    opacity: 1 !important;
}

/* Style the main bubble */
.tooltip-inner {
    background-color: #0f2547 !important; /* Deep Dark Blue */
    color: #ffffff !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
    text-transform: uppercase !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 15px rgba(17, 47, 93, 0.25) !important;
    max-width: 250px !important; /* Ensures long text doesn't break */
}

/* Color the little arrow to match the dark blue background */
.bs-tooltip-right .arrow::before, 
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #0f2547 !important;
}

.bs-tooltip-left .arrow::before, 
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #0f2547 !important;
}

.bs-tooltip-top .arrow::before, 
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #0f2547 !important;
}

.bs-tooltip-bottom .arrow::before, 
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #0f2547 !important;
}

/* ==========================================================================
   CLIENT AREA DASHBOARD (HIGH CONTRAST / SOFT LIGHT THEME)
   ========================================================================== */

/* ── 1. Perfect 5-Column Grid for Desktop ────────────────────────────────── */
@media (min-width: 992px) {
    .col-lg-one-fifth {
        flex: 0 0 20% !important;
        max-width: 20% !important;
        min-width: 200px;
    }
}

/* ── 2. Top Stat Tiles ───────────────────────────────────────────────────── */
#epy-client-tiles .epy-tile {
    display: block !important;
    background: #f0f4f9 !important; /* Soft blue-grey stops the glare */
    border: 1px solid #dce3ef !important; /* Distinct, visible border */
    border-radius: 12px !important;
    padding: 1.5rem 1.25rem 1.25rem !important;
    box-shadow: 0 6px 15px rgba(17, 47, 93, 0.06) !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    text-align: left !important;
}

#epy-client-tiles .epy-tile:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(17, 47, 93, 0.12) !important;
    background: #ffffff !important; /* Brightens to pure white on hover */
    border-color: #c0cde0 !important;
}

/* Faint Background Icon - Darkened to be visible */
#epy-client-tiles .epy-tile .tile-icon {
    position: absolute !important;
    right: 15px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 3.5rem !important;
    color: #cbd5e1 !important; /* Darker grey */
    opacity: 0.5 !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
}

#epy-client-tiles .epy-tile:hover .tile-icon {
    transform: translateY(-50%) scale(1.1) !important;
    color: #a6bcdc !important; /* Turns slightly blue on hover */
}

/* Big Number Stat */
#epy-client-tiles .epy-tile .stat {
    font-size: 2.2rem !important;
    font-weight: 800 !important; /* Bolder text */
    line-height: 1 !important;
    margin-bottom: 0.3rem !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Big Number Stat */
#epy-client-tiles .epy-tile .stats {
    font-size: 1.5rem !important;
    font-weight: 800 !important; /* Bolder text */
    line-height: 1 !important;
    margin-bottom: 0.3rem !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Deeper Text Colors so they don't look washed out */
#epy-client-tiles .text-primary { color: #2b6cb0 !important; }
#epy-client-tiles .text-success { color: #19ab1f !important; }
#epy-client-tiles .text-danger { color: #dc2626 !important; }
#epy-client-tiles .text-warning { color: #f5a623 !important; }
#epy-client-tiles .text-info { color: #7c3aed !important; }

/* Bottom Title */
#epy-client-tiles .epy-tile .title {
    font-size: 0.75rem !important;
    font-weight: 800 !important; /* Bolder text */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #475f7b !important; /* Deeper blue-grey */
    position: relative !important;
    z-index: 2 !important;
}

/* Colored Bottom Border Highlight */
#epy-client-tiles .epy-tile .highlight {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important; /* Thicker bottom accent line */
}

.bg-color-blue { background-color: #2b90f9 !important; }
.bg-color-green { background-color: #19ab1f !important; }
.bg-color-red { background-color: #dc2626 !important; }
.bg-color-gold { background-color: #f5a623 !important; }
.bg-color-purple { background-color: #7c3aed !important; }

.text-newblue {
    color: #2b90f9 !important;
}

.card:nth-child(2)::before {
    background-color: transparent !important;
}

.card:first-child::before {
    background-color: transparent !important;
}

/* ── 3. WHMCS Dashboard Panels ───────────────────────────────────────────── */
#epy-home-panels .epy-panel-card {
    background: #f0f4f9 !important; /* Matches the soft blue-grey tiles */
    border: 1px solid #dce3ef !important;
    border-radius: 12px !important;
    box-shadow: 0 6px 15px rgba(17, 47, 93, 0.06) !important;
    margin-bottom: 1.75rem !important;
    overflow: hidden !important;
    border-top: 4px solid #5b9bd5 !important; 
}

#epy-home-panels .epy-panel-card .card-header {
    background: #ffffff !important; /* Bright white header to pop out */
    border-bottom: 2px solid #dce3ef !important; /* Thicker separator line */
    padding: 1.25rem 1.5rem !important;
}

#epy-home-panels .epy-panel-card .card-title {
    color: #0f2547 !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important; /* Bolder headers */
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
}

#epy-home-panels .epy-panel-card .card-title i {
    color: #6a82a6 !important;
}

#epy-home-panels .epy-panel-card .card-body {
    padding: 2.5rem 1.5rem !important;
    color: #475f7b !important; /* Darker, more readable text */
    text-align: center !important;
    font-weight: 500 !important;
}

#epy-home-panels .epy-panel-card .card-footer {
    background: #ffffff !important;
    border-top: 2px solid #dce3ef !important;
    padding: 1rem !important;
}

/* Panel Buttons */
#epy-home-panels .epy-panel-btn {
    color: #ffffff !important;
    background: #f5a623 !important; 
    border: none !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    border-radius: 6px !important;
    padding: 0.4rem 1rem !important;
    box-shadow: 0 3px 8px rgba(245, 166, 35, 0.3) !important;
    transition: all 0.2s ease !important;
}

#epy-home-panels .epy-panel-btn:hover {
    background: #e59613 !important;
    transform: translateY(-2px) !important;
}

/* List Items (e.g. Recent News) */
#epy-home-panels .list-group-item {
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
    border-color: #dce3ef !important;
    padding: 1.25rem 1.5rem !important;
    color: #475f7b !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    text-align: left;
}

#epy-home-panels .list-group-item:hover {
    background: #ffffff !important;
    color: #2b6cb0 !important;
}

/* ── Card Body (Adjusted padding since footer is gone) ── */
#epy-home-panels .epy-panel-card .card-body {
    padding: 2.5rem 1.5rem !important;
    color: #475f7b !important;
    text-align: center !important;
    font-weight: 500 !important;
}

/* ── Hide the Ugly Footers Completely ── */
#epy-home-panels .epy-panel-card .card-footer {
    display: none !important;
}

/* ==========================================================================
   COMMON DATA TABLES (SERVICES, INVOICES, TICKETS, QUOTES)
   ========================================================================== */

/* ── 1. The Outer Card Wrapper ───────────────────────────────────────────── */
.epy-table-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 2rem !important;
    padding: 0 !important;
}

/* ── 2. The Table Itself (Light Theme with Striped Rows) ─────────────────── */
.epy-custom-table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: collapse !important;
}

.epy-custom-table thead th {
    background: linear-gradient(180deg, #0f2547 0%, #16335f 100%) !important;
    color: #ffffff !important; /* Pure white text */
    font-size: 0.85rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 1.15rem 1.5rem !important;
    border: none !important;
    position: relative !important;
    box-shadow: inset 0 -2px 0 rgba(91, 155, 213, 0.3) !important; /* Subtle blue bottom glow */
}

.epy-custom-table thead th .text-dark {
    color: #ffffff !important; /* Force white text for any dark text elements in headers */
}

/* Rounded corners for the dark bar effect */
.epy-custom-table thead th:first-child { 
    border-top-left-radius: 8px !important; 
    border-bottom-left-radius: 8px !important; 
}
.epy-custom-table thead th:last-child { 
    border-top-right-radius: 8px !important; 
    border-bottom-right-radius: 8px !important; 
}

/* Custom styling for DataTables Sort Icons */
table.dataTable thead .sorting::before,
table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_asc::after {
    color: #5b9bd5 !important; /* Matches your brand light blue */
    opacity: 0.6 !important;
}

/* --- Row Striping Adjustments for Dark Header --- */
.epy-custom-table tbody tr:first-child td {
    border-top: 8px solid transparent !important; /* Adds breathing room under the dark bar */
}

.epy-custom-table tbody td:first-child {
    text-align: left !important;
    text-transform: capitalize;
}

.epy-custom-table tbody tr:nth-child(even) {
    background: #f8fafc !important; 
}

/* Table Rows - Base styling & Border */
.epy-custom-table tbody tr {
    border-bottom: 1px solid #e1e5eb !important; /* Thin border between rows */
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* Odd Rows (White) */
.epy-custom-table tbody tr:nth-child(odd) {
    background: #ffffff !important;
}

/* Even Rows (Soft Cool Grey) */
.epy-custom-table tbody tr:nth-child(even) {
    background: #f8fafc !important; 
}

/* Table Cells */
.epy-custom-table tbody td {
    padding: 1.25rem 1.5rem !important;
    color: #475f7b !important;
    font-size: 0.95rem !important;
    vertical-align: middle !important;
    border: none !important;
}

/* Hover Effect (Keeps the blue highlight line but darkens row slightly) */
.epy-custom-table tbody tr:hover {
    background: #f0f4f9 !important; /* Slightly darker grey on hover */
    box-shadow: inset 4px 0 0 #5b9bd5 !important; /* Cool left blue highlight line */
}

/* ── 3. DataTables Native Controls (Search, Length, Pagination) ────────── */
.dataTables_wrapper {
    padding: 0 !important;
}

/* The Search Input */
.dataTables_filter input {
    background: #ffffff !important;
    border: 1.5px solid #dce3ef !important;
    border-radius: 8px !important;
    padding: 0.5rem 1rem !important;
    color: #0f2547 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    outline: none !important;
    transition: border-color 0.2s ease !important;
}

.dataTables_filter input:focus {
    border-color: #5b9bd5 !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.15) !important;
}

/* ── Invoices Table — Pagination & Button Overrides ─────────────────── */

/* Pagination Buttons — base */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    background: #ffffff !important;
    border: 1.5px solid #dce3ef !important;
    border-radius: 6px !important;
    color: #475f7b !important;
    padding: 0.45rem 0.9rem !important;
    margin: 0 2px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* Hover & Active/Current page button */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #2b6cb0 !important;
    color: #ffffff !important;
    border-color: #2b6cb0 !important;
    box-shadow: 0 2px 6px rgba(43, 108, 176, 0.35) !important;
}

/* Disabled Previous/Next state */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
    background: #f8fafc !important;
    color: #b0bec5 !important;
    border-color: #e1e5eb !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
}

.dataTables_length select {
    background: #ffffff !important;
    border: 1.5px solid #dce3ef !important;
    border-radius: 8px !important;
    color: #0f2547 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    padding: 0.3rem 2rem 0.3rem 0.75rem !important;
    width: auto !important;
    min-width: 65px !important;
    display: inline-block !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    margin: 0 5px !important;
    cursor: pointer !important;
    transition: border-color 0.2s ease !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23475f7b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.65rem center !important;
    background-size: 10px 7px !important;
}

.dataTables_length select:focus {
    border-color: #5b9bd5 !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.15) !important;
    outline: none !important;
}

/* "Show X entries" label text */
.dataTables_length label {
    color: #475f7b !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
}

/* "Showing X to Y of Z entries" info text */
.dataTables_wrapper .dataTables_info {
    color: #475f7b !important;
    font-size: 0.875rem !important;
}

/* ── 4. Badges & Buttons ─────────────────────────────────────────────────── */
/* Pill Shaped Status Badges */
.epy-custom-table .label.status {
    border-radius: 20px !important;
    padding: 0.35rem 1rem !important;
    font-weight: 700 !important;
    font-size: 0.75rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: inline-block !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
}

/* Common Text Utilities */
.text-primary { color: #2b6cb0 !important; }

/* Custom Quotes Download Button */
.epy-btn-download {
    color: #ffffff !important;
    background: #f5a623 !important; /* Orange to match "My Services" */
    border: none !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 0.3rem 0.8rem !important;
    transition: all 0.2s ease !important;
}

.epy-btn-download:hover {
    background: #e59613 !important;
    transform: translateY(-2px) !important;
}

/* ── FIX: Missing Quote Status Colors ────────────────────────────────────── */
/* Gives the "On Hold" status a nice warning orange/gold color */
.epy-custom-table .status-on-hold { 
    background-color: #969696 !important; 
    color: #ffffff !important; 
}

/* Fallbacks for other standard WHMCS quote statuses just in case */
.epy-custom-table .label.status-draft { background-color: #6a82a6 !important; color: #ffffff !important; }
.epy-custom-table .label.status-lost { background-color: #dc2626 !important; color: #ffffff !important; }
.epy-custom-table .label.status-dead { background-color: #000000 !important; color: #ffffff !important; }

.dataTables_length select {
    width: auto !important;
    min-width: 65px !important; 
    padding: 0.3rem 1.5rem 0.3rem 0.75rem !important; /* Extra padding on right so number doesn't hit the arrow */
    display: inline-block !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important; /* Removes the ugly native overlapping arrow */
    margin: 0 5px !important;
}

/* ── Creative Custom Table Title ─────────────────────────────────────── */
.table-title-custom {
    font-size: 2rem !important;
    min-height: 30px;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    display: inline-block !important;
    margin-top: 0.15rem !important;
    padding-left: 16px !important; /* Space for the accent bar */
    position: relative !important;
    
    /* Premium Gradient Text Effect */
    background: linear-gradient(135deg, #0f2547 0%, #3c6eb4 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    color: #0f2547 !important; /* Fallback for older browsers */
}

/* Glowing Left Accent Bar */
.table-title-custom::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    height: 85% !important;
    width: 5px !important;
    background: linear-gradient(to bottom, #5b9bd5, #2b6cb0) !important;
    border-radius: 4px !important;
    box-shadow: 0 0 10px rgba(91, 155, 213, 0.4) !important;
}

/* ── 5. DataTables Layout Fixes (Left Alignment & Hide Search) ────────── */

/* Hide the Search Box entirely */
.dataTables_wrapper .dataTables_filter {
    display: none !important;
}

/* Force the Custom Title to the extreme left and give it breathing room */
.dataTables_wrapper .dataTables_info {
    float: left !important;
    text-align: left !important;
    width: 100% !important; /* Takes up the whole top row */
    padding: 0 0 1.25rem 0 !important; /* Space between title and table */
    margin: 0 !important;
}

/* Force the "Show Entries" dropdown to the extreme bottom-left */
.dataTables_wrapper .dataTables_length {
    float: left !important;
    text-align: left !important;
    padding-top: 1.25rem !important; /* Space between table and dropdown */
    margin: 0 !important;
}

/* Ensure the Pagination (Next/Prev) stays cleanly on the bottom-right */
.dataTables_wrapper .dataTables_paginate {
    float: right !important;
    text-align: right !important;
    padding-top: 1.25rem !important;
    margin: 0 !important;
}

/* Clearfix to prevent floated elements from breaking the container */
.dataTables_wrapper::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* ── Row Striping — Odd / Even ───────────────────────────────────────── */

/* Odd rows — clean white */
.epy-custom-table tbody tr:nth-child(odd) {
    background: #ffffff !important;
}

/* Even rows — deeper cool blue-grey (more visible contrast) */
.epy-custom-table tbody tr:nth-child(even) {
    background: #f5faff !important;
}

/* Hover — overrides both odd and even */
.epy-custom-table tbody tr:hover {
    background: #dce8f5 !important;
    box-shadow: inset 4px 0 0 #5b9bd5 !important;
}

.table-list>tbody>tr>td {
    background-color: transparent !important;
}

.sidebar .list-group-item.active, .sidebar .list-group-item.active:focus, .sidebar .list-group-item.active:hover {
    border-color: transparent;
}

/* ==========================================================================
   EPY CLIENT AREA REDESIGN — Professional Balanced Theme
   Palette: #0f2547 (Navy) | #48a0d8 (Blue) | #ffffff (White) | #000000 (Black)
   Scope: Right-side content area ONLY (tiles + home panels)
   ========================================================================== */

/* ============================================================
   STAT TILES  (#epy-client-tiles)
   ============================================================ */

#epy-client-tiles .epy-tile {
    display: flex !important;
    background: #ffffff !important;
    border: 1px solid #dce8f5 !important;
    border-radius: 14px !important;
    padding: 1.6rem 1.4rem 1.4rem !important;
    box-shadow: 0 4px 18px rgba(15, 37, 71, 0.08) !important;
    position: relative !important;
    overflow: hidden !important;
    text-decoration: none !important;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease !important;
    height: 100% !important;
    text-align: left !important;
    flex-direction: column;
    justify-content: flex-end;
}

/* Subtle top-left radial glow */
#epy-client-tiles .epy-tile::before {
    content: '' !important;
    position: absolute !important;
    top: -20px !important;
    left: -20px !important;
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    pointer-events: none !important;
}

/* Dynamic glow colors based on the tile's theme */
#epy-client-tiles .epy-tile-blue::before {
    background: radial-gradient(circle, rgba(72, 160, 216, 0.15) 0%, transparent 70%) !important;
}

#epy-client-tiles .epy-tile-green::before {
    background: radial-gradient(circle, rgba(22, 163, 74, 0.15) 0%, transparent 70%) !important;
}

#epy-client-tiles .epy-tile-red::before {
    background: radial-gradient(circle, rgba(220, 38, 38, 0.15) 0%, transparent 70%) !important;
}

#epy-client-tiles .epy-tile-gold::before {
    background: radial-gradient(circle, rgba(245, 166, 35, 0.15) 0%, transparent 70%) !important;
}

#epy-client-tiles .epy-tile-purple::before {
    background: radial-gradient(circle, rgba(124, 58, 237, 0.15) 0%, transparent 70%) !important;
}

/* Base hover animation (keeps the floating and shadow effects) */
#epy-client-tiles .epy-tile:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 30px rgba(15, 37, 71, 0.14) !important;
}

#epy-client-tiles .epy-tile:hover .tile-icon {
    transform: translateY(-50%) scale(1.10) !important;
}

/* --- Dynamic Hover Colors --- */

/* BLUE */
#epy-client-tiles .epy-tile-blue:hover {
    border-color: #48a0d8 !important;
    background: #f4f9ff !important;
}
#epy-client-tiles .epy-tile-blue:hover .tile-icon {
    color: #48a0d8 !important; /* Light blue icon */
}

/* GREEN */
#epy-client-tiles .epy-tile-green:hover {
    border-color: #16a34a !important;
    background: #f0fdf4 !important;
}
#epy-client-tiles .epy-tile-green:hover .tile-icon {
    color: #16a34a !important; /* Light green icon */
}

/* RED */
#epy-client-tiles .epy-tile-red:hover {
    border-color: #dc2626 !important;
    background: #fef2f2 !important;
}
#epy-client-tiles .epy-tile-red:hover .tile-icon {
    color: #dc2626 !important; /* Light red icon */
}

/* GOLD/WARNING */
#epy-client-tiles .epy-tile-gold:hover {
    border-color: #f5a623 !important;
    background: #fffcf5 !important;
}
#epy-client-tiles .epy-tile-gold:hover .tile-icon {
    color: #f5a623 !important; /* Light gold icon */
}

/* PURPLE */
#epy-client-tiles .epy-tile-purple:hover {
    border-color: #7c3aed !important;
    background: #faf5ff !important;
}
#epy-client-tiles .epy-tile-purple:hover .tile-icon {
    color: #7c3aed !important; /* Light purple icon */
}

/* Ghost background icon */
#epy-client-tiles .epy-tile .tile-icon {
    position: absolute !important;
    right: 18px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 3.8rem !important;
    opacity: 1 !important;
    z-index: 1 !important;
    transition: all 0.3s ease !important;
}

/* --- Dynamic Default Icon Colors (Faint) --- */
#epy-client-tiles .epy-tile-blue .tile-icon {
    color: #cfe3f5 !important; /* Faint Blue */
}
#epy-client-tiles .epy-tile-green .tile-icon {
    color: #c9edd6 !important; /* Faint Green */
}
#epy-client-tiles .epy-tile-red .tile-icon {
    color: #fee2e2 !important; /* Faint Red */
}
#epy-client-tiles .epy-tile-gold .tile-icon {
    color: #ffe9c4 !important; /* Faint Gold */
}
#epy-client-tiles .epy-tile-purple .tile-icon {
    color: #f3e8ff !important; /* Faint Purple */
}

/* Large stat number */
#epy-client-tiles .epy-tile .stat {
    font-size: 2.4rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin-bottom: 0.35rem !important;
    position: relative !important;
    z-index: 2 !important;
    letter-spacing: -0.02em !important;
}

/* Label text under the number */
#epy-client-tiles .epy-tile .title {
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #6b8aac !important;
    position: relative !important;
    z-index: 2 !important;
}

/* Bottom colour-bar accent */
#epy-client-tiles .epy-tile .highlight {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    border-radius: 0 0 14px 14px !important;
}

/* Highlight colours */
.bg-color-blue   { background-color: #48a0d8 !important; }
.bg-color-green  { background-color: #16a34a !important; }
.bg-color-red    { background-color: #dc2626 !important; }
.bg-color-purple { background-color: #7c3aed !important; }

.text-newblue { color: #1a85c8 !important; }

/* Specific layout for Credit Balance Tile */
#epy-client-tiles .epy-tile-credit {
    justify-content: space-between !important; /* Forces title top, stat bottom */
    padding-top: 1.2rem !important;
    padding-bottom: 1.2rem !important;
}

#epy-client-tiles .epy-tile-credit .title {
    margin-bottom: auto !important; /* Pushes everything else down */
    font-size: 0.65rem !important; /* Slightly smaller to fit "Credit Balance" comfortably */
}

#epy-client-tiles .epy-tile-credit .stat {
    font-size: 1.7rem !important; /* Balanced size for currency strings */
    margin-bottom: 0 !important;
    margin-top: 10px;
}

/* Ensure the icon stays centered behind the text */
#epy-client-tiles .epy-tile-credit .tile-icon {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* ============================================================
   HOME PANELS  (#epy-home-panels)
   ============================================================ */

#epy-home-panels .epy-panel-card {
    background: #ffffff !important;
    border: 1px solid #dce8f5 !important;
    border-radius: 14px !important;
    border-top: 3px solid #48a0d8 !important;
    box-shadow: 0 4px 20px rgba(15, 37, 71, 0.07) !important;
    margin-bottom: 1.75rem !important;
    overflow: hidden !important;
    transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}

#epy-home-panels .epy-panel-card:hover {
    box-shadow: 0 8px 30px rgba(15, 37, 71, 0.12) !important;
    border-color: #48a0d8 !important;
}

/* Card Header */
#epy-home-panels .epy-panel-card .card-header {
    background: #f4f9ff !important;
    border-bottom: 1px solid #dce8f5 !important;
    padding: 1.1rem 1.5rem !important;
}

/* Card Title */
#epy-home-panels .epy-panel-card .card-title {
    color: #0f2547 !important;
    font-size: 0.82rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.10em !important;
}

/* Icon in card title */
#epy-home-panels .epy-panel-card .card-title i {
    color: #48a0d8 !important;
}

/* Card Body */
#epy-home-panels .epy-panel-card .card-body {
    padding: 2rem 1.5rem !important;
    color: #5a7a9e !important;
    text-align: center !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    background: #ffffff !important;
}

/* Links inside card body */
#epy-home-panels .epy-panel-card .card-body a {
    color: #1a85c8 !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.2s ease !important;
}

#epy-home-panels .epy-panel-card .card-body a:hover {
    color: #0f2547 !important;
    text-decoration: underline !important;
}

/* Card Footer — hidden */
#epy-home-panels .epy-panel-card .card-footer {
    display: none !important;
}

/* Panel Action Button */
#epy-home-panels .epy-panel-btn {
    color: #ffffff !important;
    background: #48a0d8 !important;
    border: none !important;
    font-weight: 700 !important;
    font-size: 0.78rem !important;
    border-radius: 6px !important;
    padding: 0.45rem 1.15rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 3px 10px rgba(72, 160, 216, 0.30) !important;
    transition: all 0.22s ease !important;
}

#epy-home-panels .epy-panel-btn:hover {
    background: #1a85c8 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(72, 160, 216, 0.40) !important;
}

/* List-group rows */
#epy-home-panels .list-group-item {
    background: #ffffff !important;
    border-left: none !important;
    border-right: none !important;
    border-color: #e8f0f9 !important;
    padding: 1.1rem 1.5rem !important;
    color: #2c4a6e !important;
    font-weight: 500 !important;
    font-size: 0.93rem !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}

#epy-home-panels .list-group-item:hover {
    background: #f0f7ff !important;
    color: #0f2547 !important;
}

/* Icon in list items */
#epy-home-panels .list-group-item i {
    color: #48a0d8 !important;
}

/* "Open" status badge */
#epy-home-panels .badge-success,
#epy-home-panels .label-success,
#epy-home-panels .label.open,
#epy-home-panels .label[class*="open"] {
    background: #dcfce7 !important;
    color: #16a34a !important;
    border: 1px solid #bbf7d0 !important;
    border-radius: 20px !important;
    padding: 0.25em 0.85em !important;
    font-weight: 700 !important;
    font-size: 0.74rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
}

/* Sub-text / timestamps */
#epy-home-panels .list-group-item small,
#epy-home-panels .list-group-item .text-muted {
    color: #8faabf !important;
    font-size: 0.82rem !important;
}

/* Badge in list items */
#epy-home-panels .list-group-item .badge {
    background: #e0f0fb !important;
    color: #1a85c8 !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    padding: 0.3em 0.75em !important;
}

/* ==========================================================================
   SUPPORT TICKET SUBMISSION DESIGN
   ========================================================================== */

/* ── 1. General Flat Card Wrapper ────────────────────────────────────────── */
.epy-flat-card {
    background: #ffffff !important;
    border: 1px solid #e1e5eb !important;
    border-radius: 8px !important;
    box-shadow: none !important;
    overflow: hidden !important;
}

.epy-header-dark {
    background: linear-gradient(180deg, #0f2547 0%, #16335f 100%) !important;
    color: #ffffff !important;
    padding: 1.25rem 1.5rem !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
}

.epy-header-dark .card-title {
    color: #ffffff !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.03em !important;
}

/* ── 2. Department Selection Cards (Step 1) ──────────────────────────────── */
.epy-dept-card {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    border: 1px solid #dce3ef !important;
    border-radius: 8px !important;
    padding: 1.5rem !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    height: 100% !important;
    color: #0f2547 !important;
}

.epy-dept-card:hover {
    background: #f4f7fb !important;
    border-color: #5b9bd5 !important;
    box-shadow: 0 8px 25px rgba(91, 155, 213, 0.15) !important;
    transform: translateY(-3px) !important;
    text-decoration: none !important;
    color: #0f2547 !important;
}

.epy-dept-card .dept-icon {
    font-size: 2rem !important;
    color: #5b9bd5 !important;
    margin-right: 1.5rem !important;
    width: 40px !important;
    text-align: center !important;
    transition: color 0.3s ease !important;
}

.epy-dept-card:hover .dept-icon {
    color: #2b6cb0 !important;
}

.epy-dept-card .dept-info {
    flex-grow: 1 !important;
}

.epy-dept-card .dept-name {
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    margin-bottom: 0.25rem !important;
}

.epy-dept-card .dept-desc {
    font-size: 0.85rem !important;
    color: #6a82a6 !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
}

.epy-dept-card .dept-arrow {
    color: #c0cde0 !important;
    font-size: 1.25rem !important;
    margin-left: 1rem !important;
    transition: transform 0.3s ease, color 0.3s ease !important;
}

.epy-dept-card:hover .dept-arrow {
    color: #5b9bd5 !important;
    transform: translateX(5px) !important; /* Cool slide right animation */
}

/* ── 3. Ticket Form Inputs (Step 2) ──────────────────────────────────────── */
.epy-ticket-form .form-control {
    background: #ffffff !important;
    border: 1.5px solid #dce3ef !important;
    border-radius: 6px !important;
    padding: 0.6rem 1rem !important;
    color: #0f2547 !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
}

.epy-ticket-form .form-control:focus {
    border-color: #5b9bd5 !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.15) !important;
}

.epy-ticket-form select.form-control {
    height: auto !important;
    -webkit-appearance: auto !important;
    -moz-appearance: auto !important;
    appearance: auto !important;
}

/* Custom Submit Button (Vibrant Orange) */
.epy-btn-submit {
    background: #f5a623 !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 0.6rem 2rem !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3) !important;
    transition: all 0.2s ease !important;
}

.epy-btn-submit:hover {
    background: #e59613 !important;
    transform: translateY(-2px) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   CART SIDEBAR FIX (Ensures dark theme applies to order form)
   ========================================================================== */
#order-standard_cart .card-sidebar {
    background: #0f2547 !important;
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(17, 47, 93, 0.15) !important;
    padding: 0.5em !important;
}

#order-standard_cart .summary-container {
    background-color: transparent !important;
}

#order-standard_cart .card-sidebar .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 1.25rem 1.5rem !important;
}

#order-standard_cart .card-sidebar .card-title {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

#order-standard_cart .card-sidebar .list-group-item {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #a6bcdc !important;
    padding: 0.85rem 1.5rem !important;
    transition: all 0.3s ease !important;
}

#order-standard_cart .card-sidebar .list-group-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
    padding-left: 1.8rem !important;
}

#order-standard_cart .card-sidebar .list-group-item.active {
    background: rgba(91, 155, 213, 0.1) !important;
    color: #5b9bd5 !important;
    border-left: 3px solid #5b9bd5 !important;
}

#order-standard_cart .card-sidebar .list-group-item i {
    color: #6a82a6 !important;
}

#order-standard_cart .card-sidebar .list-group-item.active i,
#order-standard_cart .card-sidebar .list-group-item:hover i {
    color: #5b9bd5 !important;
}

.card {
    padding: 0 !important;
}

/* ==========================================================================
   PASSWORD RESET PAGE (DARK THEME)
   ========================================================================== */

#epy-pwreset-wrapper {
    width: 100% !important;
    max-width: 500px !important;
    margin: 0 !important;
    padding: 0 !important;
}

#epy-pwreset-wrapper .pwreset-card {
    border: none !important;
    border-radius: 16px !important;
    background: #0f2547 !important; /* Deep Blue Background */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    position: relative !important;
    margin-bottom: 0 !important;
}

/* Gradient Top Bar */
#epy-pwreset-wrapper .pwreset-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #3c6eb4 0%, #5b9bd5 50%, #00bfff 100%) !important;
    z-index: 10 !important;
}

#epy-pwreset-wrapper .pwreset-body {
    padding: 3rem 2.5rem !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Typography */
#epy-pwreset-wrapper .pwreset-title {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 0.5rem !important;
}

#epy-pwreset-wrapper .pwreset-desc {
    font-size: 0.9rem !important;
    color: #88a0c7 !important;
}

/* Inputs & Labels */
#epy-pwreset-wrapper .form-group {
    margin-bottom: 1.25rem !important;
    text-align: left !important;
}

#epy-pwreset-wrapper .form-control-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #a6bcdc !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

#epy-pwreset-wrapper .input-group.input-group-merge {
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: rgba(0, 0, 0, 0.2) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#epy-pwreset-wrapper .input-group.input-group-merge:focus-within {
    border-color: #5b9bd5 !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.2) !important;
    background: rgba(0, 0, 0, 0.4) !important;
}

#epy-pwreset-wrapper .input-group-prepend .input-group-text {
    background: transparent !important;
    border: none !important;
    padding: 0 1rem !important;
    color: #6a82a6 !important;
}

#epy-pwreset-wrapper .form-control {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0.8rem 0.8rem 0.8rem 0 !important;
    font-size: 0.95rem !important;
    color: #ffffff !important;
}

#epy-pwreset-wrapper .form-control::placeholder {
    color: #6a82a6 !important;
    opacity: 1 !important;
}

/* Submit Button */
#epy-pwreset-wrapper .epy-btn-submit {
    background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 0.85rem 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(66, 153, 225, 0.35) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}

#epy-pwreset-wrapper .epy-btn-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(66, 153, 225, 0.5) !important;
}

/* Links */
#epy-pwreset-wrapper .back-to-login-link {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #5b9bd5 !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

#epy-pwreset-wrapper .back-to-login-link:hover {
    color: #ffffff !important;
}

/* Captcha spacing */
#epy-pwreset-wrapper .captcha-container {
    margin: 1.5rem 0 !important;
}

/* Mobile Adjustments */
@media (max-width: 576px) {
    #epy-pwreset-wrapper .pwreset-body {
        padding: 2rem 1.5rem !important;
    }
}

.form-group {
    gap: 0 !important;
}

/* ==========================================================================
   PASSWORD RESET SUCCESS STATE (CSS-ONLY OVERRIDE)
   ========================================================================== */

/* 1. Turn the wrapper into our Dark Card ONLY when a success message is present */
.mw-540:has(.alert-success) {
    background: #0f2547 !important; /* Deep Navy Background */
    border-radius: 16px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25) !important;
    padding: 3.5rem 2.5rem !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    margin: 4rem auto !important;
    text-align: center !important;
}

/* 2. Add the Premium Gradient Top Bar */
.mw-540:has(.alert-success)::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #3c6eb4 0%, #5b9bd5 50%, #00bfff 100%) !important;
    z-index: 10 !important;
}

/* 3. Strip the default green WHMCS box and make it look like a pure white Title */
.mw-540 .alert.alert-success {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    padding: 25px 0px 0px !important;
    margin-bottom: 1rem !important;
    letter-spacing: -0.5px !important;
    box-shadow: none !important;
}

/* 4. Inject a nice large Green Checkmark Icon above the text */
.mw-540 .alert.alert-success::before {
    content: "\f058"; /* FontAwesome check-circle */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: block;
    font-size: 4rem;
    color: #16a34a; /* Vibrant Green */
    margin-bottom: 1.5rem;
}

/* 5. Style the instructional paragraph below the title */
.mw-540:has(.alert-success) p {
    color: #88a0c7 !important; /* Muted blue-grey */
    font-size: 1.05rem !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

/* ==========================================================================
   PASSWORD RESET EXTENDED STEPS (SECURITY & NEW PASSWORD)
   ========================================================================== */

/* Cancel Button styling for dark cards */
#epy-pwreset-wrapper .btn-outline-light {
    border: 1.5px solid #6a82a6 !important;
    color: #a6bcdc !important;
    background: transparent !important;
    border-radius: 10px !important;
    padding: 0.85rem 1.5rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    transition: all 0.2s ease !important;
}

#epy-pwreset-wrapper .btn-outline-light:hover {
    background: rgba(106, 130, 166, 0.1) !important;
    color: #ffffff !important;
    border-color: #a6bcdc !important;
}

/* Error Alert styling inside dark card */
#epy-pwreset-wrapper .epy-alert.alert-danger {
    background: rgba(220, 38, 38, 0.1) !important;
    border: 1px solid rgba(220, 38, 38, 0.3) !important;
    color: #fca5a5 !important;
    border-radius: 8px !important;
    padding: 0.85rem !important;
    font-weight: 600 !important;
}

/* Password Strength Progress Bar override for dark theme */
#epy-pwreset-wrapper .progress {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    height: 8px !important;
    margin-top: 8px !important;
    box-shadow: none !important;
}

#epy-pwreset-wrapper .pw-strength-text {
    color: #a6bcdc !important; /* Makes the "Weak/Strong" text readable */
    font-size: 0.85rem !important;
    margin-top: 5px !important;
    display: block !important;
}

/* ==========================================================================
   PASSWORD RESET - STRENGTH METER & BUTTON LAYOUT (DARK THEME)
   ========================================================================== */

/* ── 1. Password Strength Progress Bar ── */
#epy-pwreset-wrapper .pw-strength-wrapper .progress {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 6px !important;
    height: 8px !important;
    box-shadow: none !important;
    overflow: hidden !important;
    margin-bottom: 1.5rem !important;
}

#epy-pwreset-wrapper .pw-strength-wrapper .progress-bar {
    border-radius: 6px !important;
    transition: width 0.4s ease, background-color 0.4s ease !important;
}

/* Explicit colors driven by the Theme JS */
#epy-pwreset-wrapper .pw-strength-wrapper .bg-danger { background-color: #dc2626 !important; }
#epy-pwreset-wrapper .pw-strength-wrapper .bg-warning { background-color: #f5a623 !important; }
#epy-pwreset-wrapper .pw-strength-wrapper .bg-success { background-color: #16a34a !important; }

/* ── 2. "Tips for a Secure Password" Box ── */
#epy-pwreset-wrapper .pw-strength-wrapper .alert-info {
    background: rgba(91, 155, 213, 0.1) !important; /* Translucent blue */
    border: 1px solid rgba(91, 155, 213, 0.2) !important;
    color: #a6bcdc !important; /* Muted blue text */
    border-radius: 8px !important;
    padding: 1rem 1.25rem !important;
    font-size: 0.85rem !important;
    line-height: 1.7 !important;
    text-align: left !important;
    box-shadow: none !important;
}

#epy-pwreset-wrapper .pw-strength-wrapper .alert-info i {
    color: #5b9bd5 !important;
    margin-right: 5px !important;
}

#epy-pwreset-wrapper .pw-strength-wrapper .alert-info strong {
    color: #ffffff !important;
    font-size: 0.9rem !important;
    letter-spacing: 0.02em !important;
}

/* Style the symbols (e.g. #, $, !) */
#epy-pwreset-wrapper .pw-strength-wrapper .alert-info code {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-size: 0.8rem !important;
}

/* ── 3. Input Validation Overrides (Red/Green outlines while typing) ── */
#epy-pwreset-wrapper .form-control.is-invalid {
    border-color: #dc2626 !important;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}
#epy-pwreset-wrapper .form-control.is-warning {
    border-color: #f5a623 !important;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15) !important;
}
#epy-pwreset-wrapper .form-control.is-valid {
    border-color: #16a34a !important;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.15) !important;
}

/* "Passwords do not match" warning text */
#epy-pwreset-wrapper #inputNewPassword2Msg .text-muted {
    color: #fca5a5 !important; /* Light red */
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    margin-top: 8px !important;
    text-align: left !important;
}

/* ── 4. Captcha & Button Layout Fix ── */
#epy-pwreset-wrapper .action-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 15px !important;
    align-items: center !important;
}

/* Safely isolates the WHMCS injected Captcha <div> and forces it to the top */
#epy-pwreset-wrapper .action-buttons > div {
    width: 100% !important;
    display: flex !important;
    justify-content: center !important;
}

/* Ensures the Save and Cancel buttons share the remaining space evenly */
#epy-pwreset-wrapper .action-buttons button {
    flex: 1 !important;
    margin: 0 !important;
}

/* ==========================================================================
   FIX: VISIBLE PASSWORD STRENGTH BAR (DARK THEME)
   ========================================================================== */

/* 1. Force the empty track (background) to be visible */
#passwordStrengthBar {
    background-color: rgba(255, 255, 255, 0.08) !important; /* Noticeable translucent track */
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    border-radius: 8px !important;
    height: 12px !important; /* Slightly thicker so it's easy to see */
    width: 100% !important;
    display: flex !important;
    overflow: hidden !important;
    margin: 1.25rem 0 !important;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* 2. Style the inner filling bar */
#passwordStrengthBar .progress-bar {
    height: 100% !important;
    border-radius: 8px !important;
    transition: width 0.3s ease-in-out, background-color 0.3s ease !important;
}

/* 3. The 3 color states injected by the JS (with glowing effects) */
#passwordStrengthBar .progress-bar.bg-danger { 
    background-color: #ef4444 !important; /* Bright Red */
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.4) !important;
}
#passwordStrengthBar .progress-bar.bg-warning { 
    background-color: #f5a623 !important; /* Bright Orange */
    box-shadow: 0 0 10px rgba(245, 166, 35, 0.4) !important;
}
#passwordStrengthBar .progress-bar.bg-success { 
    background-color: #10b981 !important; /* Bright Green */
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.4) !important;
}

/* Hide the extra <br> tag injected by WHMCS's pwstrength.tpl */
#epy-pwreset-wrapper .pw-strength-wrapper br {
    display: none !important;
}

/* ==========================================================================
   PASSWORD RESET ERROR STATE (CSS-ONLY OVERRIDE FOR INVALID LINKS)
   ========================================================================== */

/* 1. Turn the wrapper into our Dark Card ONLY when a standalone error is present */
.mw-540:has(.alert-danger):not(:has(#epy-pwreset-wrapper)) {
    background: #0f2547 !important; /* Deep Navy Background */
    border-radius: 16px !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.25) !important;
    padding: 3.5rem 2.5rem !important;
    position: relative !important;
    overflow: hidden !important;
    border: none !important;
    margin: 4rem auto !important;
    text-align: center !important;
}

/* 2. Add the Premium Gradient Top Bar */
.mw-540:has(.alert-danger):not(:has(#epy-pwreset-wrapper))::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    background: linear-gradient(90deg, #3c6eb4 0%, #5b9bd5 50%, #00bfff 100%) !important;
    z-index: 10 !important;
}

/* 3. Strip the default red WHMCS box and style the text */
.mw-540:not(:has(#epy-pwreset-wrapper)) .alert.alert-danger {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important; /* Pure white text for readability */
    font-size: 1.15rem !important;
    font-weight: 600 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    line-height: 1.6 !important;
}

/* 4. Inject a large Red Warning Icon above the text */
.mw-540:not(:has(#epy-pwreset-wrapper)) .alert.alert-danger::before {
    content: "\f071"; /* FontAwesome exclamation-triangle */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    display: block;
    font-size: 4rem;
    color: #ef4444; /* Vibrant Red */
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   WHMCS SIDEBAR & PANEL HEADER FIX (FLEXBOX ALIGNMENT)
   ========================================================================== */

/* 1. Header Wrapper Styling */
.card-sidebar .card-header,
.card-sidebar .panel-heading,
.panel-sidebar .panel-heading {
    background: transparent !important; /* Let the dark card background show through */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 1.25rem 1.5rem !important;
}

/* 2. Flexbox for the Title (Aligns everything vertically) */
.card-sidebar .card-title,
.card-sidebar .panel-title,
.panel-sidebar .panel-title {
    color: #ffffff !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    display: flex !important;
    align-items: center !important; /* Centers icon and text vertically */
    width: 100% !important;
    margin: 0 !important;
}

/* 3. The Left Icon (e.g. Shopping Cart, Support Ring) */
.card-sidebar .card-title > i:first-child,
.card-sidebar .panel-title > i:first-child,
.panel-sidebar .panel-title > i:first-child {
    color: #5b9bd5 !important; /* Premium light blue */
    font-size: 1.15rem !important;
    margin-right: 0 !important;
}

/* 4. The Right Chevron (Minimise Icon) */
.card-sidebar .card-minimise,
.card-sidebar .panel-minimise,
.panel-sidebar .card-minimise,
.panel-sidebar .panel-minimise {
    color: #6a82a6 !important; /* Muted blue/grey */
    margin-left: auto !important; /* Forces the icon to the absolute right */
    float: none !important; /* Overrides WHMCS default pull-right/float-right */
    font-size: 0.9rem !important;
    cursor: pointer !important;
    transition: color 0.2s ease !important;
}

/* Hover effect for the chevron */
.card-sidebar .card-minimise:hover,
.card-sidebar .panel-minimise:hover,
.panel-sidebar .card-minimise:hover,
.panel-sidebar .panel-minimise:hover {
    color: #ffffff !important;
}

/* ==========================================================================
   CLIENT AREA FORMS (DETAILS, CONTACTS) - LIGHT PREMIUM THEME & FIXES
   ========================================================================== */

/* ── 1. Flat Card Structure ── */
.epy-client-card {
    background: #ffffff !important;
    border: 1px solid #dce8f5 !important;
    border-radius: 14px !important;
    box-shadow: 0 6px 20px rgba(15, 37, 71, 0.05) !important;
    position: relative !important;
    overflow: hidden !important;
    margin-bottom: 2rem !important;
}

/* Gradient Top Bar */
.epy-client-card::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 4px !important;
    /* background: linear-gradient(90deg, #3c6eb4 0%, #5b9bd5 50%, #00bfff 100%) !important; */
    z-index: 10 !important;
}

.epy-client-card .card-body {
    padding: 1.5rem 2.5rem 1.5rem !important;
    text-align: left !important; /* Forces Left-Alignment */
    overflow: visible !important;
}

/* ── 2. Custom Card Title ── */
.epy-card-title {
    color: #0f2547 !important;
    font-size: 1.15rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    margin-bottom: 1.75rem !important;
    border-bottom: 2px solid #f0f4f9 !important;
    padding-bottom: 1rem !important;
    display: flex !important;
    align-items: center !important;
}

.epy-card-title i {
    color: #48a0d8 !important; /* Premium light blue icon */
    margin-right: 12px !important;
    font-size: 1.25rem !important;
}

/* ── 3. Sleek Form Inputs ── */
.epy-details-form .form-group {
    margin-bottom: 1.25rem !important;
}

.epy-details-form .col-form-label {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: #8faabf !important; /* Muted blue/grey */
    margin-bottom: 0.25rem !important;
    padding-bottom: 0 !important;
}

.epy-details-form .form-control {
    background: #f8fafc !important; /* Soft grey default */
    border: 1.5px solid #dce3ef !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    color: #0f2547 !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
    height: auto !important;
}

/* Input Focus State */
.epy-details-form .form-control:focus {
    background: #ffffff !important;
    border-color: #5b9bd5 !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.15) !important;
}

/* Disabled Inputs */
.epy-details-form .form-control:disabled {
    background: #eef2f6 !important;
    color: #a6bcdc !important;
    cursor: not-allowed !important;
}

/* ==========================================================================
   FIX: PHONE NUMBER FIELD, DROPDOWN & CARD OVERFLOW
   ========================================================================== */

/* 1. CRITICAL: Allow the dropdown menu to overflow outside the card */
.epy-client-card {
    overflow: visible !important; 
}
.epy-client-card::before {
    border-radius: 14px 14px 0 0 !important;
}

/* 2. Target both older (intl-tel-input) and newer (iti) WHMCS wrappers */
.epy-details-form .intl-tel-input,
.epy-details-form .iti {
    width: 100% !important;
    display: block !important;
}

/* 3. Increase padding heavily to clear long dial codes (like +1242) */
.epy-details-form .intl-tel-input input[type="tel"],
.epy-details-form .iti input[type="tel"] {
    padding-left: 115px !important; 
}

/* 4. Flex the flag container so the flag, dial code, and arrow align beautifully */
.epy-details-form .intl-tel-input .selected-flag,
.epy-details-form .iti__selected-flag {
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 10px 0 15px !important;
    width: auto !important;
}

/* 5. Style the Dial Code Text */
.epy-details-form .intl-tel-input .selected-dial-code {
    color: #0f2547 !important;
    margin-left: 8px !important;
    margin-right: 6px !important;
    font-weight: 600 !important;
}

/* 6. Style the Dropdown Arrow so it is visible */
.epy-details-form .intl-tel-input .iti-arrow {
    border-top-color: #8faabf !important;
    border-width: 5px 4px 0 4px !important;
}
.epy-details-form .intl-tel-input .iti-arrow.up {
    border-top: none !important;
    border-bottom: 5px solid #5b9bd5 !important;
}

/* 7. Premium styling for the country dropdown list */
.epy-details-form .intl-tel-input .country-list,
.epy-details-form .iti__country-list {
    border-radius: 8px !important;
    border: 1px solid #dce3ef !important;
    box-shadow: 0 10px 30px rgba(15, 37, 71, 0.15) !important;
    z-index: 99999 !important; /* Forces it to the very front */
    margin-top: 5px !important;
    background: #ffffff !important;
    width: 280px !important; /* Gives the list more breathing room */
    white-space: normal !important;
}

/* Fixes the hover state inside the dropdown list */
.epy-details-form .intl-tel-input .country-list .country:hover,
.epy-details-form .intl-tel-input .country-list .country.highlight {
    background-color: #f4f7fb !important;
}

/* Fixes the divider line in the dropdown */
.epy-details-form .intl-tel-input .country-list .divider {
    border-bottom: 1px solid #dce3ef !important;
}

/* ── 5. Checkboxes & Text (Left Aligned) ── */
.epy-client-card p.text-muted {
    text-align: left !important;
}

.epy-checkbox-group, .epy-check-label {
    text-align: left !important;
    justify-content: flex-start !important;
    width: 100% !important;
    color: #475f7b !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
    cursor: pointer !important;
}

.epy-checkbox-group .form-check-input {
    margin-top: 0.3rem !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
    cursor: pointer !important;
    margin-right: 8px !important;
}

/* ── 6. Submit & Cancel Buttons (Inline Row) ── */
.epy-details-form .epy-details-actions {
    display: flex !important;
    flex-direction: row;
    justify-content: flex-start !important; /* Locks buttons to the left */
    align-items: center !important;
    gap: 15px !important; /* Clean spacing between Save and Cancel */
    margin-top: 1.5rem !important;
}

.epy-details-form .epy-details-actions button {
    margin: 0 !important; /* Strips old margins to keep row perfectly aligned */
}

.epy-details-form .epy-btn-submit {
    background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.8rem 2rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(66, 153, 225, 0.35) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}

.epy-details-form .epy-btn-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(66, 153, 225, 0.5) !important;
}

.epy-details-form .epy-btn-cancel {
    background: transparent !important;
    border: 2px solid #dce3ef !important;
    color: #6a82a6 !important;
    border-radius: 8px !important;
    padding: 0.75rem 2rem !important;
    font-size: 0.875rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    transition: all 0.2s ease !important;
}

.epy-details-form .epy-btn-cancel:hover {
    background: #f4f7fb !important;
    border-color: #a6bcdc !important;
    color: #0f2547 !important;
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .epy-client-card .card-body {
        padding: 1.5rem 1.25rem !important;
    }
}

/* ==========================================================================
   USER MANAGEMENT - BUTTONS, BADGES, MODALS & LAYOUT FIXES
   ========================================================================== */

/* ── 1. Outline Primary Button (Manage Permissions) ── */
.epy-btn-outline-primary {
    border: 2px solid #2b6cb0 !important;
    color: #2b6cb0 !important;
    background: transparent !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    padding: 0.4rem 1rem !important;
    transition: all 0.3s ease !important;
}
.epy-btn-outline-primary:hover {
    background: #2b6cb0 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 15px rgba(43, 108, 176, 0.3) !important;
}

/* ── 2. Danger Button (Remove Access) ── */
.epy-btn-danger {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #ffffff !important;
    padding: 0.4rem 1rem !important;
    box-shadow: 0 4px 14px rgba(220, 38, 38, 0.3) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}
.epy-btn-danger:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(220, 38, 38, 0.4) !important;
    color: #ffffff !important;
}

/* Disabled Button Overrides */
.btn.disabled, .btn[disabled] {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    box-shadow: none !important;
    pointer-events: none !important;
}

/* ── 3. Owner Pill Badge ── */
.epy-badge-owner {
    background: #e0f2fe !important;
    color: #0284c7 !important;
    border: 1px solid #bae6fd !important;
    border-radius: 20px !important;
    padding: 0.35em 0.8em !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* ── 4. Modal Overrides (Popups) ── */
.epy-modal-content {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 40px rgba(15, 37, 71, 0.25) !important;
}

.epy-modal-content .close {
    opacity: 0.7 !important;
    text-shadow: none !important;
}
.epy-modal-content .close:hover {
    opacity: 1 !important;
}

/* ── 5. Custom Permissions Box Styling ── */
.epy-permissions-box {
    border: 1px solid #dce8f5 !important;
    border-radius: 12px !important;
    background: #f8fafc !important;
}

/* ── 6. Prevent Action Buttons from Stacking in Table ── */
.epy-custom-table td.text-right {
    white-space: nowrap !important; /* Prevents line breaks */
}

.epy-custom-table td.text-right .btn {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* ── 7. Flexbox Fix: Force Radio Buttons into a Row (Invite User) ── */
/* Turn the parent container into a Flexbox row */
.epy-client-card form .form-group.epy-checkbox-group.mt-4 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Break the 100% width rule specifically for these inline labels */
.epy-client-card form .form-group.epy-checkbox-group.mt-4 label.epy-check-label.d-inline-block {
    width: max-content !important; /* Forces it to only be as wide as the text */
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 2rem !important; /* Nice gap between the two options */
    margin-bottom: 0 !important;
    margin-left: 20px !important;
}

/* Perfect alignment for the little radio circle */
.epy-client-card form .form-group.epy-checkbox-group.mt-4 label.epy-check-label.d-inline-block input[type="radio"] {
    margin-top: 0 !important;
    margin-right: 8px !important;
    position: relative !important;
    top: 5px !important; /* Micro-adjustment for perfect vertical centering */
}

/* ==========================================================================
   FIX: PERMISSIONS CHECKBOX ALIGNMENT (USER MANAGEMENT)
   ========================================================================== */

/* 1. Ensure the label acts as a perfect flex container */
.epy-permissions-box .epy-check-label {
    display: flex !important;
    align-items: flex-start !important; /* Keeps the box at the top with the title */
    gap: 12px !important; /* Adds a clean, consistent gap between the box and the text */
    width: 100% !important;
    cursor: pointer !important;
}

/* 2. Perfect the checkbox size, spacing, and alignment */
.epy-permissions-box .epy-check-label input[type="checkbox"] {
    margin-top: 1px !important; /* Nudges it down slightly to center exactly with the bold text */
    margin-left: 0 !important;
    margin-right: 0 !important; /* The 'gap' property above handles the spacing now */
    flex-shrink: 0 !important; /* Prevents the checkbox from getting squished by long text */
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

/* 3. Ensure the text wrapper behaves nicely */
.epy-permissions-box .epy-check-label div {
    flex-grow: 1 !important;
}

/* 4. Fine-tune the title spacing */
.epy-permissions-box .epy-check-label span.font-weight-bold {
    line-height: 1.2 !important;
    display: block !important;
    margin-bottom: 0px !important;
    margin-left: 24px !important;
}

/* ==========================================================================
   CONTACTS PAGE - TOP SELECTOR BOX
   ========================================================================== */
.epy-contact-selector .card-body {
    padding: 1.5rem 2.5rem !important; /* Slimmer padding for the top bar */
}

.epy-contact-selector .epy-selector-label {
    font-size: 0.9rem !important;
    font-weight: 800 !important;
    color: #0f2547 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.epy-contact-selector .text-primary {
    color: #5b9bd5 !important;
}

/* ==========================================================================
   FIX: MISSING DROPDOWN ARROWS & REMOVE WAVY PATTERN
   ========================================================================== */

.epy-details-form select.form-control,
.epy-client-card select.form-control,
select.custom-select {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-color: #f8fafc !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23475f7b' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1.25rem center !important;
    background-size: 12px 8px !important;
    padding-right: 2.5rem !important;
}

/* ==========================================================================
   FIX: PREVENT WAVY PATTERN ON FOCUS/ACTIVE
   ========================================================================== */

/* This rule ensures the arrow stays in place and doesn't repeat when clicked */
.epy-details-form select.form-control:focus,
.epy-details-form select.form-control:active,
.epy-client-card select.form-control:focus,
.epy-client-card select.form-control:active,
select.custom-select:focus,
select.custom-select:active {
    background-color: #ffffff !important;
    
    /* Re-inject the blue chevron icon */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%235b9bd5' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    
    /* CRITICAL FIX: Stop the icon from repeating/tiling */
    background-repeat: no-repeat !important;
    background-position: right 1.25rem center !important;
    background-size: 12px 8px !important;
    
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.15) !important;
}

/* ==========================================================================
   EMAIL HISTORY PAGE - SPECIFIC STYLING
   ========================================================================== */

/* Fix horizontal alignment for the Date column */
.epy-custom-table #tableEmailsList td.text-center {
    vertical-align: middle !important;
}

/* Style the Email Subject text */
.email-subject {
    color: #0f2547 !important;
    font-weight: 500 !important;
    font-size: 0.95rem !important;
}

/* Adjust the "View Message" button size specifically for tables */
#tableEmailsList .epy-btn-submit {
    padding: 0.4rem 1rem !important;
    font-size: 0.75rem !important;
    min-width: 130px !important;
}

/* Table Row Hover effect refinement */
#tableEmailsList tbody tr:hover .email-subject {
    color: #2b6cb0 !important;
    transition: color 0.2s ease !important;
}

/* Ensure the paperclip icon stays visible but muted */
.fa-paperclip {
    font-size: 0.85rem !important;
    opacity: 0.6 !important;
}

/* ==========================================================================
   USER PROFILE - VERIFICATION BADGES
   ========================================================================== */

.epy-badge-verified {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 20px !important;
    padding: 0.5em 1.2em !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.epy-badge-unverified {
    background: #fff7ed !important;
    color: #d97706 !important;
    border: 1px solid #ffedd5 !important;
    border-radius: 20px !important;
    padding: 0.5em 1.2em !important;
    font-size: 0.75rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Adjust title layout for email section to fit badge */
.epy-verification-status {
    margin-bottom: 0.5rem;
}

/* ==========================================================================
   PASSWORD PAGE - TWO COLUMN GRID FIX
   ========================================================================== */

/* Make the Generate button a sleek square icon-button */
.epy-details-form .input-group .generate-password {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    width: 50px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure the info alert box doesn't push the Confirm field down too far */
.epy-details-form .alert-info {
    margin-top: 10px !important;
    font-size: 0.85rem !important;
}

/* Fixes the password strength meter spacing in the new row */
.epy-details-form #passwordStrengthBar {
    margin-top: 5px !important;
    margin-bottom: 15px !important;
}

/* ==========================================================================
   PASSWORD GENERATOR MODAL REFINEMENTS
   ========================================================================== */

/* Make the generated password text stand out */
#inputGeneratePasswordOutput {
    letter-spacing: 0.05em !important;
    font-family: 'Courier New', Courier, monospace !important; /* Fixed width for passwords */
    background-color: #ffffff !important;
    border-color: #5b9bd5 !important;
}

/* Fix number input height to match theme */
#inputGeneratePasswordLength {
    max-width: 100px !important;
}

/* Center the footer buttons */
#modalGeneratePassword .modal-footer {
    justify-content: center !important;
    padding: 1.25rem !important;
}

/* Tooltip fix for copy button inside modal */
.copy-to-clipboard i {
    color: #6a82a6 !important;
}
.copy-to-clipboard:hover i {
    color: #0f2547 !important;
}

.gp-row {
    display: flex !important;
    flex-direction: row !important;
}

/* ==========================================================================
   USER SECURITY PAGE - SPECIFIC REFINEMENTS
   ========================================================================== */

/* Spacing and icons for linked accounts */
.epy-linked-accounts-wrapper .btn-remote-login {
    margin-bottom: 10px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

/* Ensure the warning alert for 2FA recommendation looks clean inside the card */
#epy-home-wrapper .alert-warning,
.epy-client-card .alert-warning {
    background-color: #fffbeb !important;
    border: 1px solid #fde68a !important;
    color: #92400e !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
}

/* Fix for the eye icons inside the 2-column security answer row */
.epy-password-wrapper .epy-toggle-password {
    top: 50% !important;
    transform: translateY(-50%) !important;
}

/* ==========================================================================
   TWO-FACTOR AUTHENTICATION MODAL STYLING
   ========================================================================== */

/* 1. Force Modal Header to Dark Theme */
.modal-dialog .modal-content {
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 15px 40px rgba(15, 37, 71, 0.25) !important;
}

.modal-dialog .modal-header {
    background: linear-gradient(180deg, #0f2547 0%, #16335f 100%) !important;
    color: #ffffff !important;
    padding: 1.25rem 1.5rem !important;
    border-bottom: none !important;
}

.modal-dialog .modal-title {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 1.15rem !important;
}

.modal-dialog .modal-header .close {
    color: #ffffff !important;
    opacity: 0.8 !important;
    text-shadow: none !important;
}

/* 2. Style the 2FA Module Selection Box */
.twofa-module {
    display: flex !important;
    align-items: flex-start !important;
    padding: 1.25rem !important;
    margin: 1rem 0 !important;
    background: #f8fafc !important;
    border: 2px solid #dce3ef !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.twofa-module:hover {
    border-color: #5b9bd5 !important;
    background: #f0f7ff !important;
}

/* Highlight the active selection */
.twofa-module.active {
    border-color: #2b6cb0 !important;
    background: #ffffff !important;
    box-shadow: 0 4px 15px rgba(43, 108, 176, 0.1) !important;
}

/* 3. Layout inside the Module Box */
.twofa-module .col-radio {
    margin-right: 15px !important;
}

.twofa-module .col-logo {
    margin-right: 20px !important;
    width: 40px !important;
}

.twofa-module .col-logo img {
    max-width: 100% !important;
}

.twofa-module .col-description {
    color: #475f7b !important;
    font-size: 0.9rem !important;
    line-height: 1 !important;
}

.twofa-module .col-description strong {
    color: #0f2547 !important;
    font-size: 1rem !important;
    display: block !important;
    margin-bottom: 2px !important;
}

/* 4. Modal Footer Buttons */
.modal-footer {
    background-color: #f8fafc !important;
    border-top: 1px solid #dce3ef !important;
    padding: 1.25rem !important;
    justify-content: center !important;
}

/* Styling the dynamic "Get Started" and "Submit" buttons */
.modal-body .btn-primary,
.modal-footer .btn-primary {
    background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%) !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 0.6rem 1.5rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    box-shadow: 0 4px 12px rgba(66, 153, 225, 0.3) !important;
}

.modal-footer .btn-default {
    background: transparent !important;
    border: 2px solid #dce3ef !important;
    color: #6a82a6 !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    padding: 0.55rem 1.5rem !important;
}

/* Loader styling */
.modal-footer .loader {
    color: #5b9bd5 !important;
    font-weight: 600 !important;
}

.twofa-module .col-radio {
    width: max-content !important;
}

.twofa-module .col-description {
    margin-left: 0px !important;
}

/* ==========================================================================
   PORTAL PAGES (KB, DOWNLOADS, ANNOUNCEMENTS)
   ========================================================================== */

/* ── 1. Grid Category Cards ── */
.epy-grid-card {
    background: #ffffff !important;
    border: 1px solid #dce8f5 !important;
    border-radius: 12px !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    box-shadow: 0 4px 15px rgba(15, 37, 71, 0.05) !important;
}

.epy-grid-card:hover {
    transform: translateY(-3px) !important;
    border-color: #48a0d8 !important;
    box-shadow: 0 8px 25px rgba(72, 160, 216, 0.12) !important;
}

.epy-icon-box {
    width: 50px;
    height: 50px;
    background: #f0f7ff;
    color: #48a0d8;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    font-size: 1.25rem;
}

.epy-grid-card:hover .epy-icon-box {
    background: #48a0d8;
    color: #ffffff;
}

/* ── 2. Premium Search Group ── */
.epy-search-group {
    background: #ffffff;
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 10px 30px rgba(15, 37, 71, 0.1) !important;
    border: 1px solid #dce3ef;
}

.epy-search-group .form-control {
    border: none !important;
    background: transparent !important;
    font-size: 1.1rem !important;
    padding-left: 1.5rem !important;
}

.epy-search-group .form-control:focus {
    box-shadow: none !important;
}

/* ── 3. List Groups & Badges ── */
.epy-list-group .list-group-item {
    border-color: #f0f4f9 !important;
    padding: 1.25rem 0 !important;
    transition: padding 0.2s ease !important;
}

.epy-list-group .list-group-item:hover {
    padding-left: 10px !important;
}

.epy-badge-blue {
    background: #e0f2fe !important;
    color: #0369a1 !important;
    font-weight: 700 !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
}

/* ── 4. Pagination Refinement ── */
.epy-page-link {
    border: 1px solid #dce3ef !important;
    color: #0f2547 !important;
    font-weight: 700 !important;
    margin: 0 3px !important;
    border-radius: 8px !important;
}

.page-item.active .epy-page-link {
    background: #2b6cb0 !important;
    border-color: #2b6cb0 !important;
}

/* Announcement Hover Title */
.hover-blue:hover {
    color: #2b6cb0 !important;
}

/* ==========================================================================
   SERVER & NETWORK STATUS REFINEMENTS
   ========================================================================== */

/* Priority Badge Styling */
.epy-priority-badge {
    border-radius: 20px !important;
    padding: 0.5em 1.2em !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

.status-critical { background: #fee2e2 !important; color: #dc2626 !important; border: 1px solid #fecaca !important; }
.status-high     { background: #fff7ed !important; color: #d97706 !important; border: 1px solid #ffedd5 !important; }
.status-low      { background: #ecfdf5 !important; color: #059669 !important; border: 1px solid #a7f3d0 !important; }
.status-info     { background: #eff6ff !important; color: #2563eb !important; border: 1px solid #dbeafe !important; }

/* Status Spinner Color Adjustment */
.fa-spinner, .fa-circle-notch {
    color: #48a0d8 !important; /* Soft brand blue */
}

/* Status Icons from WHMCS Logic (Online/Offline) */
.text-success i.fa-check-circle { color: #16a34a !important; }
.text-danger i.fa-times-circle { color: #dc2626 !important; }

/* Lead Text Spacing */
.lead-sm {
    line-height: 1.6 !important;
    font-size: 0.95rem !important;
}

/* ==========================================================================
   NETWORK STATUS EMPTY STATE FIX
   ========================================================================== */

/* Ensure the empty state icon has proper contrast */
.epy-empty-state .opacity-5 {
    opacity: 0.3 !important; /* Made slightly more visible than before */
    color: #a6bcdc !important; /* Soft premium blue-grey */
}

/* Specific spacing for the empty state text */
.epy-empty-state h4 {
    font-size: 1.25rem !important;
    letter-spacing: -0.01em !important;
    margin-bottom: 8px !important;
}

/* Ensure the card doesn't look squashed */
.epy-client-card.p-5 {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 250px !important;
}

/* ==========================================================================
   ADD FUNDS PAGE REFINEMENTS
   ========================================================================== */

/* Styling for the limits section */
.epy-limit-item {
    padding: 10px 0;
}

.epy-limit-item small {
    letter-spacing: 0.05em;
    font-size: 0.7rem !important;
    margin-bottom: 2px !important;
}

/* Ensure the divider line is visible in the card */
.epy-client-card .border-right {
    border-right: 1px solid #f0f4f9 !important;
}

/* Icon styling for the amount input */
.epy-details-form .input-group-text {
    border: 1.5px solid #dce3ef !important;
    border-right: none !important;
    border-radius: 8px 0 0 8px !important;
}

.epy-details-form .input-group .form-control {
    border-left: none !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Mobile responsive fix for the 2-column layout */
@media (max-width: 767px) {
    .epy-client-card .border-right {
        border-right: none !important;
        border-bottom: 1px solid #f0f4f9 !important;
        margin-bottom: 20px !important;
    }
}

/* ==========================================================================
   CONFIGURE PRODUCT PAGE - FULL PREMIUM THEME & ORDER SUMMARY
   ========================================================================== */

/* ── 1. UNBREAKABLE STICKY SUMMARY FIX ── */

/* CRITICAL: Force all ancestor containers to allow scrolling/overflow natively */
html, body,
#order-epycart,
#order-epycart .cart-body,
#order-epycart form {
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

/* Force the main row to stretch so the right column acts as a tall "Track" */
#epy-main-row {
    display: flex !important;
    align-items: stretch !important;
}

/* Kill WHMCS's JS-driven margins on the wrapper */
#scrollingPanelContainer {
    position: relative !important;
    margin-top: 0 !important;
    transform: none !important;
    top: auto !important;
    height: 100% !important; /* Forces track to full height */
}

/* Apply CSS sticky to our custom wrapper, pushing it under the main nav bar */
#epy-sticky-summary {
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 130px !important; /* Distance from top of screen. Clears the header. */
    z-index: 99 !important; /* Keeps it under your main top nav bar */
    height: max-content !important;
}

/* Clean up WHMCS's default summary card inline styles */
#orderSummary {
    margin-top: 0 !important;
    transform: none !important;
    box-shadow: 0 15px 40px rgba(15, 37, 71, 0.1) !important;
}

/* ── 2. DARK HEADERS & CARDS ── */
#order-epycart .epy-client-card {
    border: 1px solid #dce8f5 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(15, 37, 71, 0.04) !important;
    background: #ffffff !important;
}

#order-epycart .epy-client-card .card-header.epy-header-dark {
    background: linear-gradient(180deg, #0f2547 0%, #16335f 100%) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 1.25rem 1.5rem !important;
    border-bottom: 3px solid #5b9bd5 !important;
}

#order-epycart .epy-client-card .card-header.epy-header-dark h4,
#order-epycart .epy-client-card .card-header.epy-header-dark i {
    color: #ffffff !important;
}

#order-epycart .epy-client-card .card-header.epy-header-dark h4 i {
    color: #5b9bd5 !important;
}

#order-epycart .epy-client-card .epy-light-body {
    background: #fdfdfd !important;
}

/* Hide the very first injected <br> tag in the product description */
#order-epycart .epy-client-card .card-body p.epy-minor-text br:first-child {
    display: none !important;
}

/* ── 3. SELECTABLE ADDON CARDS ── */
.epy-addon-card {
    background: #ffffff !important;
    border: 2px solid #dce8f5 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(15, 37, 71, 0.03) !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

.epy-addon-card:hover {
    border-color: #a6bcdc !important;
    box-shadow: 0 8px 25px rgba(15, 37, 71, 0.08) !important;
}

.epy-addon-card.selected {
    background: #f4f9ff !important;
    border-color: #5b9bd5 !important;
    box-shadow: 0 8px 25px rgba(91, 155, 213, 0.15) !important;
}

.epy-addon-checkbox {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    accent-color: #2b6cb0 !important;
}

.epy-radio-label, .info-text-sm {
    font-size: 15px !important;
    color: #475f7b !important;
}

.epy-radio-label {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
}

/* ── 4. ORDER SUMMARY LOADER FIX ── */
.epy-summary-loader {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 37, 71, 0.85) !important;
    color: #ffffff !important;
    font-size: 1.5rem !important;
    z-index: 10 !important;
    border-radius: 12px 12px 0 0 !important;
    text-align: center !important;
    padding-top: 1.25rem !important; 
}

/* ── 5. ORDER SUMMARY AJAX CONTENT (PRICES & ALIGNMENT) ── */

/* Container wrapper gets a master padding so items don't hit the absolute wall */
#producttotal {
    padding: 0 !important; 
}

/* Force zero padding inside the rows to keep text perfectly aligned */
#producttotal .product-name,
#producttotal .product-group,
#producttotal .clearfix,
#producttotal .summary-totals,
#producttotal .total-due-today {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#producttotal .product-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f2547 !important;
    display: block !important;
    padding-top: 0 !important;
    margin-bottom: 5px !important;
    line-height: 1.4 !important;
}

#producttotal .product-group {
    display: block !important;
    font-size: 14px !important;
    color: #475f7b !important;
    margin-bottom: 15px !important;
}

#producttotal .summary-product,
#producttotal .summary-totals {
    font-size: 14px !important;
    color: #475f7b !important;
}

/* Convert floated elements into perfect flexbox rows with dashed dividers */
#producttotal .clearfix {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    border-bottom: 1px dashed #edf1f7 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

#producttotal .clearfix:last-child {
    border-bottom: none !important;
}

#producttotal .pull-left {
    float: none !important;
    text-align: left !important;
    flex: 1 !important;
    padding-right: 15px !important; 
}

/* Force prices to the far right */
#producttotal .pull-right {
    float: none !important;
    text-align: right !important;
    font-weight: 700 !important;
    color: #0f2547 !important;
    white-space: nowrap !important;
}

#producttotal .summary-totals {
    border-top: 1px solid #dce8f5 !important;
    margin-top: 10px !important;
    padding-top: 15px !important;
}

/* Fix "Total Due Today" layout and push price to right */
#producttotal .total-due-today {
    display: flex !important;
    flex-direction: row-reverse !important; /* Swaps the $482.00 and text automatically */
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding-top: 15px !important;
    border-top: 2px solid #5b9bd5 !important;
    font-size: 16px !important;
    color: #0f2547 !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
}

#producttotal .total-due-today .amt {
    font-size: 24px !important;
    color: #2b6cb0 !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   TICKET CREATION SUCCESS STATE
   ========================================================================== */

.epy-ticket-success-alert {
    background: #ecfdf5 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 12px !important;
    color: #065f46 !important;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.08) !important;
}

.epy-ticket-success-alert strong {
    color: #065f46 !important;
    font-weight: 700 !important;
}

.epy-ticket-success-alert .alert-link {
    color: #059669 !important;
    font-size: 1.25rem !important;
    font-weight: 800 !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

.epy-ticket-success-alert .alert-link:hover {
    color: #047857 !important;
}

/* Ensure the success page ignores the global left-align rules */
.epy-success-body {
    text-align: center !important;
}

.epy-success-body p {
    text-align: center !important;
}

.ticket-subject {
    text-align: left;
}

/* ==========================================================================
   VIEW TICKET PAGE REFINEMENTS & CC SIDEBAR FIX
   ========================================================================== */

/* ── 1. CC Sidebar Overrides ── */

/* Fix CC Sidebar Input Overlap */
#sidebarTicketCc .card-footer {
    background: transparent !important;
    border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
    padding: 1.25rem 1.5rem !important;
}

#sidebarTicketCc .input-group {
    display: flex !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
}

/* Ensure the email input fits inside the dark box without bleeding */
#sidebarTicketCc input#inputAddCcEmail {
    background: #ffffff !important;
    border: 1px solid #dce8f5 !important;
    border-radius: 6px 0 0 6px !important;
    color: #0f2547 !important;
    font-size: 0.85rem !important;
    padding: 0.5rem 0.75rem !important;
    min-width: 0 !important; /* Allows it to shrink */
    flex: 1 1 auto !important;
}

#sidebarTicketCc input#inputAddCcEmail:focus {
    box-shadow: none !important;
    border-color: #5b9bd5 !important;
    outline: none !important;
}

/* Fix the Add button in the CC box */
#sidebarTicketCc button#btnAddCcEmail {
    background: #5b9bd5 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 0 6px 6px 0 !important;
    padding: 3px 1rem !important;
    font-weight: 700 !important;
    transition: background 0.2s ease !important;
}

#sidebarTicketCc button#btnAddCcEmail:hover {
    background: #2b6cb0 !important;
}

/* Added CC Email rows styling */
#sidebarTicketCc .list-group-item {
    background: transparent !important;
    border-color: rgba(255, 255, 255, 0.05) !important;
    padding: 0.75rem 1.5rem !important;
}

#sidebarTicketCc .ticket-cc-email {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    color: #a6bcdc !important;
    font-size: 0.85rem !important;
    width: 100% !important;
}

#sidebarTicketCc .ticket-cc-email .email {
    flex-grow: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-right: 10px !important;
}

/* ── 2. FIX: Broken FontAwesome Pro Icon in CC List ── */
#sidebarTicketCc .delete-cc-email i {
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    color: #ef4444 !important; /* Vibrant Red */
    font-size: 1.1rem !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

/* Replace the missing icon with a standard 'times-circle' */
#sidebarTicketCc .delete-cc-email i::before {
    content: "\f057" !important; 
}

#sidebarTicketCc .delete-cc-email:hover i {
    color: #dc2626 !important;
    transform: scale(1.1) !important;
}

/* ── 3. Ticket Reply Message Adjustments ── */

/* Staff vs Client message background contrast */
.view-ticket .card-body.bg-light {
    background-color: #f0f4f9 !important; /* Soft grey for staff replies */
    border-top: 1px solid #dce8f5 !important;
    border-bottom: 1px solid #dce8f5 !important;
}

/* Attachments Box inside replies */
.view-ticket .attachments {
    background: #f8fafc !important;
    border: 1px dashed #c0cde0 !important;
}

/* Outline style for attachment buttons */
.view-ticket .attachments .btn-outline-secondary {
    border: 1px solid #c0cde0 !important;
    color: #475f7b !important;
    background: #ffffff !important;
    transition: all 0.2s ease !important;
}

.view-ticket .attachments .btn-outline-secondary:hover {
    background: #5b9bd5 !important;
    color: #ffffff !important;
    border-color: #5b9bd5 !important;
}

/* ── 4. Markdown Editor adjustments ── */
.epy-client-card .markdown-editor {
    border-radius: 6px !important;
    border: 1.5px solid #dce3ef !important;
}

.epy-client-card .md-editor {
    border-color: #dce3ef !important;
    border-radius: 6px !important;
    overflow: hidden !important;
}

/* Fix markdown toolbar background */
.epy-client-card .md-editor > .md-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #dce3ef !important;
    padding: 6px 10px !important;
}

/* ==========================================================================
   FIX: HIDE CC CLONE TEMPLATE & STYLE ERROR ALERTS
   ========================================================================== */

/* 1. Force the WHMCS JS Clone Row to stay hidden until duplicated */
#sidebarTicketCc #ccCloneRow,
#sidebarTicketCc .w-hidden,
#sidebarTicketCc .hidden {
    display: none !important;
}

/* 2. Premium Dark Theme styling for the validation error message */
#sidebarTicketCc #divCcEmailFeedback {
    margin-top: 12px !important;
    background: rgba(220, 38, 38, 0.15) !important; /* Translucent red */
    border: 1px solid rgba(239, 68, 68, 0.4) !important;
    color: #fca5a5 !important; /* Soft light red text */
    border-radius: 6px !important;
    padding: 0.6rem !important;
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    text-align: center !important;
}

/* ==========================================================================
   ====================================================================================================================================================
   ====================================================================================================================================================
   ====================================================================================================================================================
   ====================================================================================================================================================
   ====================================================================================================================================================
   ====================================================================================================================================================
   ====================================================================================================================================================
   ====================================================================================================================================================
   ====================================================================================================================================================
   ====================================================================================================================================================
   ====================================================================================================================================================
   ====================================================================================================================================================
   ====================================================================================================================================================
   ====================================================================================================================================================
   ========================================================================== */

/* ==========================================================================
   CART ADDONS PAGE - FULL PREMIUM THEME
   ========================================================================== */

/* ── 1. Sidebar Restoration & Theme ── */
#order-epycart .cart-sidebar {
    display: block !important; /* Restores the sidebar visibility */
}

/* Style the sidebar card to match the premium dark sidebar theme */
#order-epycart .cart-sidebar .card {
    background: #0f2547 !important; /* Premium navy blue background */
    border: none !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 30px rgba(17, 47, 93, 0.15) !important;
    padding: 0.5em !important;
    margin: 0 0 0 0 !important;
}

#order-epycart .cart-sidebar .card-header {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    padding: 1.25rem 1.5rem !important;
}

/* Sidebar List Items */
#order-epycart .cart-sidebar .list-group-item {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    color: #a6bcdc !important; /* Muted blue-grey */
    font-weight: 600 !important;
    padding: 0.85rem 1.5rem !important;
    transition: all 0.3s ease !important;
}

#order-epycart .cart-sidebar .list-group-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
    padding-left: 1.8rem !important; /* Slide animation */
}

/* Active Category Selection */
#order-epycart .cart-sidebar .list-group-item.active {
    background: rgba(91, 155, 213, 0.1) !important;
    color: #5b9bd5 !important;
    border-left: 3px solid #5b9bd5 !important;
}

/* ── 2. Addon Card Refinements ── */
#order-epycart .epy-client-card .card-body {
    padding: 1.75rem !important;
}

#order-epycart .epy-client-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 10px 25px rgba(17, 47, 93, 0.1) !important;
    border-color: #5b9bd5 !important;
}

/* Pricing Typography */
#order-epycart .product-pricing .h5 {
    letter-spacing: -0.02em !important;
    font-weight: 800 !important;
}

#order-epycart .product-pricing small {
    font-size: 0.65rem !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
}

/* ── 3. Layout Utilities ── */
.row-eq-height {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Button Styling Consistency */
#order-epycart .epy-btn-submit {
    font-size: 0.8rem !important;
    padding: 0.6rem 1.25rem !important;
}

/* Mobile Collapsed Header Style */
#order-epycart .card-header {
    background: #f8fafc !important;
    border-bottom: 1px solid #dce8f5 !important;
}

#order-epycart .card-title {
    font-size: 1rem !important;
    color: #0f2547 !important;
    font-weight: 700 !important;
}

/* Empty State Centering */
.epy-empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

/* ==========================================================================
   SIDEBAR COMPACT MODE (SCROLLABLE & LEFT-ALIGNED)
   ========================================================================== */

/* 1. Limit height and ensure strict left alignment */
.card-sidebar .list-group.collapsable-card-body {
    max-height: 450px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    text-align: left !important; /* Force left alignment for the container */
}

/* 2. Slim items and lock text alignment */
.card-sidebar .list-group-item {
    padding: 0.65rem 1.25rem !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
    text-align: left !important; /* Ensure each link is left-aligned */
    display: block !important;    /* Prevents flex-centering if active elsewhere */
    width: 100% !important;
}

/* 3. Custom Premium Scrollbar */
.card-sidebar .list-group.collapsable-card-body::-webkit-scrollbar {
    width: 6px;
}

.card-sidebar .list-group.collapsable-card-body::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
}

.card-sidebar .list-group.collapsable-card-body::-webkit-scrollbar-thumb {
    background: #5b9bd5; /* Brand light blue */
    border-radius: 10px;
}

/* 4. Cross-browser support */
.card-sidebar .list-group.collapsable-card-body {
    scrollbar-width: thin;
    scrollbar-color: #5b9bd5 rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   CART PRODUCTS PAGE - PREMIUM TWO-TONE CARDS & TYPOGRAPHY
   ========================================================================== */

/* ── 1. Global Font Sizes for Products ── */
#order-epycart {
    font-size: 16px !important; /* Standard Font Size */
}

#order-epycart .epy-minor-text {
    font-size: 15px !important; /* Minor Text Size */
    color: #6a82a6 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
}

/* ── 2. Sidebar Refinements ── */
#order-epycart .cart-sidebar {
    display: flex !important;
    flex-direction: column;
    gap: 15px;
}

#order-epycart .cart-sidebar .card {
    background: #0f2547 !important;
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(17, 47, 93, 0.15) !important;
    padding: 0.5em !important;
}

#order-epycart .cart-sidebar .card-header {
    background: transparent !important;
    border: none !important;
    color: #ffffff !important;
    padding: 1rem 1.25rem !important;
    font-size: 16px !important;
}

#order-epycart .cart-sidebar .list-group.collapsable-card-body {
    max-height: 450px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    text-align: left !important;
}

#order-epycart .cart-sidebar .list-group-item {
    background: transparent !important;
    border: none !important;
    color: #a6bcdc !important;
    font-weight: 600 !important;
    padding: 0.65rem 1.25rem !important;
    font-size: 15px !important; /* Minor Text */
    text-align: left !important;
    display: block !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
}

#order-epycart .cart-sidebar .list-group-item:hover {
    background: rgba(255, 255, 255, 0.03) !important;
    color: #ffffff !important;
    padding-left: 1.8rem !important;
}

#order-epycart .cart-sidebar .list-group-item.active {
    background: rgba(91, 155, 213, 0.1) !important;
    color: #5b9bd5 !important;
    border-left: 3px solid #5b9bd5 !important;
}

/* Custom Scrollbar */
#order-epycart .cart-sidebar .list-group.collapsable-card-body::-webkit-scrollbar { width: 6px; }
#order-epycart .cart-sidebar .list-group.collapsable-card-body::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 10px; }
#order-epycart .cart-sidebar .list-group.collapsable-card-body::-webkit-scrollbar-thumb { background: #5b9bd5; border-radius: 10px; }

/* ── 3. Two-Tone Product Cards ── */
#order-epycart .products .epy-client-card {
    padding: 0 !important;
    background: transparent !important;
    border: 1px solid #dce8f5 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease !important;
    box-shadow: 0 4px 15px rgba(15, 37, 71, 0.04) !important;
}

#order-epycart .products .epy-client-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 30px rgba(15, 37, 71, 0.12) !important;
    border-color: #5b9bd5 !important;
}

/* Dark Header - Tightened Padding */
#order-epycart .products .epy-client-card .card-header.epy-header-dark {
    background: linear-gradient(180deg, #0f2547 0%, #16335f 100%) !important;
    padding: 1rem 1.25rem !important; /* Reduced excessive padding */
    border-bottom: 3px solid #5b9bd5 !important; /* Slimmer accent line */
}

#order-epycart .products .epy-client-card .card-header h4 {
    color: #ffffff !important;
    font-size: 22px !important; 
    line-height: 1.3 !important;
    letter-spacing: 0.01em !important;
    font-weight: 700 !important;
}

/* Light Body - Tightened Padding */
#order-epycart .products .epy-client-card .epy-light-body {
    background: #fdfdfd !important; /* Very soft light background */
    padding: 1.25rem 1.25rem !important; /* Reduced huge spacing */
}

/* ── 4. Feature List Fix (Large Icon & Separated Descriptions) ── */
.epy-specs-list {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important; /* Space between different features */
}

.epy-specs-list .spec-item {
    border-bottom: 1px dashed #e1e5eb !important;
    padding-bottom: 15px !important;
}

.epy-specs-list .spec-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.epy-specs-list .spec-name {
    font-size: 16px !important; /* Standard Text Size */
    color: #0f2547 !important;
    letter-spacing: 0.02em !important;
}

.epy-specs-list .spec-value {
    font-size: 15px !important; /* Minor Text Size */
    color: #6a82a6 !important;
    line-height: 1.6 !important;
}

/* This ensures that WHMCS <br> tags add actual breathing room between the label (DC-39) and the sentence */
.epy-specs-list .spec-value br {
    display: block !important;
    margin-bottom: 8px !important;
    content: " " !important;
}

/* ── 5. Pricing & Buttons ── */
#order-epycart .product-pricing {
    text-align: left !important;
}

/* MASSIVE PRICE TEXT */
#order-epycart .product-pricing .h4, #order-epycart .product-pricing .price {
    font-size: 25px !important; /* Massively increased size */
    letter-spacing: -0.03em !important;
    color: #2b6cb0 !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    display: block !important;
    margin: 4px 0 !important;
}

#order-epycart .epy-btn-submit {
    font-size: 16px !important; /* Standard Text */
    padding: 0.75rem 1.5rem !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    background: linear-gradient(135deg, #f5a623 0%, #e59613 100%) !important; 
    border: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.3) !important;
    height: max-content !important;
    align-self: center !important;
}

#order-epycart .epy-btn-submit:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 18px rgba(245, 166, 35, 0.4) !important;
}

/* ── 6. Layout Utilities & Badges ── */
.row-eq-height {
    display: flex !important;
    flex-wrap: wrap !important;
}

.epy-badge-gold {
    background: #fffbeb !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
}

/* Hide the injected <br> tag inside the feature name */
.epy-specs-list .spec-name br {
    display: none !important;
}

/* ==========================================================================
   CONFIGURE PRODUCT PAGE - FULL PREMIUM THEME & ORDER SUMMARY
   ========================================================================== */

/* ── 1. DARK HEADERS & CARDS ── */
#order-standard_cart .epy-client-card {
    border: 1px solid #dce8f5 !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 15px rgba(15, 37, 71, 0.04) !important;
    background: #ffffff !important;
}

#order-standard_cart .epy-client-card .card-header.epy-header-dark {
    background: linear-gradient(180deg, #0f2547 0%, #16335f 100%) !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 1.25rem 1.5rem !important;
    border-bottom: 3px solid #5b9bd5 !important;
}

#order-standard_cart .epy-client-card .card-header.epy-header-dark h4,
#order-standard_cart .epy-client-card .card-header.epy-header-dark i {
    color: #ffffff !important;
}

#order-standard_cart .epy-client-card .card-header.epy-header-dark h4 i {
    color: #5b9bd5 !important;
}

#order-standard_cart .epy-client-card .epy-light-body {
    background: #fdfdfd !important;
}

/* Hide the very first injected <br> tag in the product description */
#order-standard_cart .epy-client-card .card-body p.epy-minor-text br:first-child {
    display: none !important;
}

/* Order Summary Box Shadow styling */
#order-standard_cart #orderSummary {
    box-shadow: 0 15px 40px rgba(15, 37, 71, 0.1) !important;
    border: none !important;
}

/* ── 2. SELECTABLE ADDON CARDS ── */
.epy-addon-card {
    background: #ffffff !important;
    border: 2px solid #dce8f5 !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 15px rgba(15, 37, 71, 0.03) !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
}

.epy-addon-card:hover {
    border-color: #a6bcdc !important;
    box-shadow: 0 8px 25px rgba(15, 37, 71, 0.08) !important;
}

.epy-addon-card.selected {
    background: #f4f9ff !important;
    border-color: #5b9bd5 !important;
    box-shadow: 0 8px 25px rgba(91, 155, 213, 0.15) !important;
}

.epy-addon-checkbox {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    accent-color: #2b6cb0 !important;
}

.epy-radio-label, .info-text-sm {
    font-size: 15px !important;
    color: #475f7b !important;
}

.epy-radio-label {
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
}

/* ── 3. ORDER SUMMARY LOADER FIX ── */
.epy-summary-loader {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 37, 71, 0.85) !important;
    color: #ffffff !important;
    font-size: 1.5rem !important;
    z-index: 10 !important;
    border-radius: 12px 12px 0 0 !important;
    text-align: center !important;
    padding-top: 1.25rem !important; 
}

/* ── 4. ORDER SUMMARY AJAX CONTENT (PRICES & ALIGNMENT) ── */

/* Force zero padding inside the rows to keep text perfectly aligned */
#producttotal .product-name,
#producttotal .product-group,
#producttotal .clearfix,
#producttotal .summary-totals,
#producttotal .total-due-today {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#producttotal .product-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #0f2547 !important;
    display: block !important;
    padding-top: 0 !important;
    margin-bottom: 5px !important;
    line-height: 1.4 !important;
}

#producttotal .product-group {
    display: block !important;
    font-size: 14px !important;
    color: #475f7b !important;
    margin-bottom: 15px !important;
}

#producttotal .summary-product,
#producttotal .summary-totals {
    font-size: 14px !important;
    color: #475f7b !important;
}

/* Convert floated elements into perfect flexbox rows with dashed dividers */
#producttotal .clearfix {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    border-bottom: 1px dashed #edf1f7 !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

#producttotal .clearfix:last-child {
    border-bottom: none !important;
}

#producttotal .pull-left {
    float: none !important;
    text-align: left !important;
    flex: 1 !important;
    padding-right: 15px !important; 
}

/* Force prices to the far right */
#producttotal .pull-right {
    float: none !important;
    text-align: right !important;
    font-weight: 700 !important;
    color: #0f2547 !important;
    white-space: nowrap !important;
}

#producttotal .summary-totals {
    border-top: 1px solid #dce8f5 !important;
    margin-top: 10px !important;
    padding-top: 15px !important;
}

/* Fix "Total Due Today" layout and push price to right */
#producttotal .total-due-today {
    display: flex !important;
    flex-direction: row-reverse !important; /* Swaps the $482.00 and text automatically */
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-top: 10px !important;
    padding-top: 15px !important;
    border-top: 2px solid #5b9bd5 !important;
    font-size: 16px !important;
    color: #0f2547 !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
}

#producttotal .total-due-today .amt {
    font-size: 24px !important;
    color: #2b6cb0 !important;
    font-weight: 800 !important;
}

/* ==========================================================================
   VIEW CART & ORDER SUMMARY - FORCED FONT SIZE OVERRIDES
   ========================================================================== */

/* ── 1. Order Summary Text Sizes ── */

/* Target the specific spans for Subtotal, Tax, and Recurring Totals */
#order-standard_cart .order-summary .summary-container .subtotal span,
#order-standard_cart .order-summary .summary-container .bordered-totals .clearfix span,
#order-standard_cart .order-summary .summary-container .recurring-totals > span {
    font-size: 16px !important;
}

/* Target the recurring cost specifically */
#order-standard_cart .order-summary .summary-container .recurring-totals .cost {
    font-size: 16px !important;
}

/* Force the "Total Due Today" flexbox row to push the price to the right */
#order-standard_cart .order-summary .summary-container .total-due-today {
    display: flex !important;
    flex-direction: row-reverse !important; /* Swaps price to the right, text to the left */
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 18px !important; /* Size for the text label */
    padding-top: 1.5rem !important;
    margin-top: 10px !important;
    border-top: 2px solid #5b9bd5 !important;
}

/* Massive font size for the actual $482.00 Amount */
#order-standard_cart .order-summary .summary-container .total-due-today .amt {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #2b6cb0 !important;
}

/* 1. Base span style: Make standard text a clean, dark blue-grey */
#order-standard_cart .summary-container span {
    font-size: 15px !important;
    color: #475f7b !important; 
    font-weight: 600 !important;
}

/* 2. Left labels ("Subtotal", "Totals"): Deep Navy Blue */
#order-standard_cart .summary-container .pull-left {
    font-size: 15px !important;
    color: #0f2547 !important; 
    font-weight: 700 !important;
}

/* 3. Right side prices ($482.00): Vibrant Brand Blue */
#order-standard_cart .summary-container .pull-right {
    font-size: 18px !important;
    color: #2b6cb0 !important; 
    font-weight: 800 !important;
}

/* 4. Subtotal specific ID */
#subtotal {
    font-size: 18px !important;
    color: #2b6cb0 !important;
}

/* 5. The actual "Total Due Today" Amount ($482.00) */
#order-standard_cart .summary-container #totalDueToday {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #2b6cb0 !important;
}

.p-0 {
    padding: 0 !important;
}

/* =========================================================
   CRITICAL FIX: Split the Total Due Today layout apart 
   so the price goes to the right and text stays left!
   ========================================================= */

/* The wrapper holding both the Price and the Text */
#order-standard_cart .summary-container .total-due-today {
    display: flex !important;
    flex-direction: row-reverse !important; /* Pushes price right, text left */
    justify-content: space-between !important;
    align-items: center !important;
    border-top: 2px solid #5b9bd5 !important; /* Adds the nice blue divider line */
    padding-top: 15px !important;
    margin-top: 10px !important;
}

/* The "Total Due Today" text label itself */
#order-standard_cart .summary-container .total-due-today span:not(#totalDueToday) {
    font-size: 16px !important;
    color: #0f2547 !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
}

/* ── 2. Apply Promo Code Section ── */

/* Enlarge the Tab text ("Apply Promo Code") */
#order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
    font-size: 16px !important;
    padding: 1.25rem 1.75rem !important;
}

/* Enlarge and bulk up the Promo Input Box */
#order-standard_cart #inputPromotionCode {
    font-size: 16px !important;
    padding: 1rem 1.5rem !important;
    height: auto !important;
}

/* Enlarge the "Validate Code" Button to match input height */
#order-standard_cart .view-cart-tabs .tab-content .btn {
    font-size: 16px !important;
    padding: 0 2rem !important;
    font-weight: 700 !important;
}

/* ==========================================================================
   VIEW CART PAGE (REVIEW & CHECKOUT) - UNIFIED THEME & TYPOGRAPHY
   ========================================================================== */

/* ── 1. Kill WHMCS Native Floats & Fix Grid ── */
#order-standard_cart .row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100%;
}

#order-standard_cart .cart-sidebar,
#order-standard_cart .cart-body,
#order-standard_cart .secondary-cart-body,
#order-standard_cart .secondary-cart-sidebar {
    float: none !important;
}

/* Ensure the main container overrides overflow hidden */
#order-standard_cart .cart-body {
    overflow: visible !important;
}


/* ── 2. Cart Items Container (Premium Styling & 14px Typography) ── */
#order-standard_cart .view-cart-items-header {
    display: none !important; /* Hide old WHMCS header, replaced in template */
}

#order-standard_cart .view-cart-items {
    border: none !important;
    margin: 0 !important;
}

#order-standard_cart .view-cart-items .item {
    background: #f2fffc !important;
    border-bottom: 1px solid #dce8f5 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    padding: 1.5rem !important;
    margin: 0 !important;
    transition: background 0.2s ease !important;
    box-shadow: 4px 4px 15px #02073e12 !important;
}

#order-standard_cart .view-cart-items .item:last-child {
    border-bottom: none !important;
}

#order-standard_cart .view-cart-items .item:nth-child(even) {
    background: #f8fafc !important; /* Soft zebra striping */
}

#order-standard_cart .view-cart-items .item:hover {
    background: #f4f9ff !important; /* Hover highlight */
}

/* Configuration options list (RAM, IP, OS, etc.) */
#order-standard_cart .view-cart-items .item small {
    font-size: 14px !important;
    line-height: 1.8 !important; 
}

/* Main Product Title */
#order-standard_cart .view-cart-items .item-title {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: #0f2547 !important;
}

/* Category/Group Name */
#order-standard_cart .view-cart-items .item-group {
    color: #6a82a6 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

#order-standard_cart .view-cart-items .item-domain {
    color: #2b6cb0 !important;
    font-weight: 600 !important;
}

/* Price & Cycle Scale */
#order-standard_cart .view-cart-items .item-price span {
    color: #2b6cb0 !important;
}

#order-standard_cart .view-cart-items .item-price span.font-weight-bold {
    font-size: 1.15rem !important;
}

#order-standard_cart .view-cart-items .item-price .cycle {
    color: #6a82a6 !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
}

/* Edit / Remove Buttons inside items */
#order-standard_cart .view-cart-items .epy-edit-btn {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    color: #5b9bd5 !important;
    text-decoration: none !important;
    padding: 0 !important;
}

#order-standard_cart .view-cart-items .epy-edit-btn:hover {
    color: #2b6cb0 !important;
}

#order-standard_cart .view-cart-items .btn-remove-from-cart {
    color: #ef4444 !important;
    padding: 0 !important;
    transition: transform 0.2s ease !important;
}

#order-standard_cart .view-cart-items .btn-remove-from-cart:hover {
    color: #dc2626 !important;
    transform: scale(1.1) !important;
}


/* ── 3. Promo & Taxes Tabs ── */
#order-standard_cart .view-cart-tabs {
    background: transparent !important;
    border: none !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom: 2px solid #dce8f5 !important;
    padding-left: 0 !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs .nav-link {
    color: #6a82a6 !important;
    font-weight: 700 !important;
    border: none !important;
    background: transparent !important;
    padding: 1rem 1.5rem !important;
    margin-right: 5px !important;
    border-radius: 12px 12px 0 0 !important;
    transition: all 0.2s ease !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs .nav-link:hover {
    color: #2b6cb0 !important;
    background: #f4f9ff !important;
}

#order-standard_cart .view-cart-tabs .nav-tabs .nav-link.active {
    color: #2b6cb0 !important;
    border-bottom: 3px solid #2b6cb0 !important;
    background: #ffffff !important;
}

#order-standard_cart .view-cart-tabs .tab-content {
    background: #ffffff !important;
    border: 1px solid #dce8f5 !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    padding: 2rem !important;
}


/* ── 4. Order Summary Structure & Enlarged Typography (>16px Scale) ── */
#order-standard_cart .order-summary {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#order-standard_cart .order-summary h2 {
    display: none !important; /* Hide old WHMCS dark header */
}

#order-standard_cart .order-summary .summary-container {
    background: transparent !important;
    padding: 0 !important;
}

/* Subtotal, Totals, and Recurring line items */
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .bordered-totals .clearfix,
#order-standard_cart .order-summary .recurring-totals {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px dashed #edf1f7 !important;
    padding: 12px 1.5rem !important;
    margin: 0 !important;
    font-size: 17px !important; /* Pushed larger */
    color: #475f7b !important;
}

#order-standard_cart .order-summary .recurring-totals {
    border-bottom: none !important;
    align-items: flex-start !important;
}

/* The "Monthly" or cycle text next to the recurring totals */
#order-standard_cart .order-summary .recurring-totals small.text-muted {
    font-size: 15px !important;
}

/* The "TOTAL DUE TODAY" label at the bottom */
#order-standard_cart .order-summary .total-due-today {
    display: flex !important;
    flex-direction: row-reverse !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 1.5rem !important;
    border-top: 2px solid #5b9bd5 !important;
    font-size: 18px !important; /* Enlarged label */
    color: #0f2547 !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
}

/* The actual massive Total Price Amount */
#order-standard_cart .order-summary .total-due-today .amt {
    font-size: 28px !important; /* Scaled up */
    color: #2b6cb0 !important;
    font-weight: 800 !important;
}

/* Fix WHMCS Floats in summary */
#order-standard_cart .order-summary .pull-left,
#order-standard_cart .order-summary .pull-right {
    float: none !important;
}

/* ==========================================================================
   CHECKOUT PAGE - MAXIMUM SPECIFICITY OVERRIDES & ICHECK FIX
   ========================================================================== */

/* ── 1. Kill WHMCS Native Floats & Widths ── */
/* WHMCS uses float:left and float:right which breaks modern Bootstrap flexbox */
#order-standard_cart .row {
    display: flex !important;
    flex-wrap: wrap !important;
}

#order-standard_cart .cart-sidebar,
#order-standard_cart .cart-body {
    float: none !important;
}

/* ── 2. Top Authentication Toggle Buttons ── */
#order-standard_cart .checkout-auth-toggles .btn {
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-size: 0.85rem !important;
}

#order-standard_cart #btnAlreadyRegistered, 
#order-standard_cart #btnNewUserSignup {
    margin-left: 10px !important;
}

/* ── 3. Total Due Alert Box ── */
#order-standard_cart .epy-total-alert {
    background: #f4f9ff !important;
    border: 2px solid #dce8f5 !important;
    border-radius: 12px !important;
    color: #475f7b !important;
    padding: 1.5rem !important;
    box-shadow: inset 0 0 15px rgba(91, 155, 213, 0.05) !important;
}

/* ── 4. Credit Balance Box ── */
#order-standard_cart .apply-credit-container,
#order-standard_cart .epy-credit-box {
    background: #f8fafc !important;
    border: 1px dashed #c0cde0 !important;
    border-radius: 12px !important;
    padding: 1.5rem !important;
}

/* ── 5. Selectable Payment Gateway Boxes (Forced 3-Column Flex) ── */

/* Force the row to behave as a perfect flex container */
#order-standard_cart #paymentGatewaysContainer .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

/* Force each column to take exactly 33.333% width */
#order-standard_cart #paymentGatewaysContainer .col-md-4 {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    margin-bottom: 1rem !important;
}

#order-standard_cart .epy-payment-method {
    background: #ffffff !important;
    border: 2px solid #dce8f5 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    transition: all 0.25s ease !important;
    cursor: pointer !important;
    box-shadow: 0 4px 15px rgba(15, 37, 71, 0.03) !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 !important;
}

#order-standard_cart .epy-payment-method:hover {
    border-color: #a6bcdc !important;
    box-shadow: 0 8px 25px rgba(15, 37, 71, 0.08) !important;
}

/* 🔥 CRITICAL FIX: Use :has() to light up the parent wrapper when the iCheck is checked */
#order-standard_cart .epy-payment-method:has(.iradio_square-blue.checked) {
    background: #f4f9ff !important;
    border-color: #5b9bd5 !important;
    box-shadow: 0 8px 25px rgba(91, 155, 213, 0.15) !important;
}

#order-standard_cart .epy-payment-method label {
    padding: 1rem 1.25rem !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important; 
    z-index: 20 !important;
}

#order-standard_cart .epy-payment-method strong {
    font-size: 14px !important;
    color: #0f2547 !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}

/* Turn text blue when checked */
#order-standard_cart .epy-payment-method:has(.iradio_square-blue.checked) strong {
    color: #2b6cb0 !important;
}

/* ── FIX: PAYMENT GATEWAY ICHECK ALIGNMENT & STYLING ── */

/* 1. Ensure the container holds the iCheck element correctly */
#order-standard_cart #paymentGatewaysContainer .iradio_square-blue {
    position: relative !important;
    display: inline-block !important;
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important; 
    border: 2px solid #a6bcdc !important; 
    border-radius: 50% !important; 
    flex-shrink: 0 !important; 
    transition: border-color 0.2s ease !important;
}

/* 2. Custom "Checked" state */
#order-standard_cart #paymentGatewaysContainer .iradio_square-blue.checked {
    border-color: #2b6cb0 !important; 
}

#order-standard_cart #paymentGatewaysContainer .iradio_square-blue.checked::after {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 10px !important;
    height: 10px !important;
    background: #2b6cb0 !important;
    border-radius: 50% !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 3. Invisible click target */
#order-standard_cart #paymentGatewaysContainer .iradio_square-blue input[type="radio"],
#order-standard_cart #paymentGatewaysContainer .iradio_square-blue ins {
    position: absolute !important;
    top: -50% !important;
    left: -50% !important;
    display: block !important;
    width: 200% !important;
    height: 200% !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important; 
    cursor: pointer !important;
    z-index: 10 !important;
}

/* Mobile responsive fallback to 1 column */
@media (max-width: 767px) {
    #order-standard_cart #paymentGatewaysContainer .col-md-4 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ── 6. Credit Card Input Wrapper Fix ── */
/* Overrides the ugly #f3f3f3 background injected by all.min.css */
#order-standard_cart .cc-input-container,
#order-standard_cart .epy-cc-container {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

/* ── 7. Input Group Appends (CVV Question Mark, Addon Buttons) ── */
#order-standard_cart .epy-details-form .input-group-append .btn-outline-secondary,
#order-standard_cart .epy-details-form .input-group-append .btn-default {
    border: 1.5px solid #dce3ef !important;
    border-left: none !important;
    background: #f8fafc !important;
    color: #6a82a6 !important;
    transition: all 0.2s ease !important;
    box-shadow: none !important;
    height: 100% !important;
    border-radius: 0 8px 8px 0 !important;
}

#order-standard_cart .epy-details-form .input-group-append .btn-outline-secondary:hover,
#order-standard_cart .epy-details-form .input-group-append .btn-default:hover {
    background: #5b9bd5 !important;
    color: #ffffff !important;
    border-color: #5b9bd5 !important;
}

/* ── 8. Form Inputs explicitly inside Checkout ── */
#order-standard_cart .form-control {
    background-color: #f8fafc !important;
    border: 1.5px solid #dce3ef !important;
    color: #0f2547 !important;
    border-radius: 8px !important;
    box-shadow: none !important;
}

#order-standard_cart .form-control:focus {
    background-color: #ffffff !important;
    border-color: #5b9bd5 !important;
    box-shadow: 0 0 0 3px rgba(91, 155, 213, 0.15) !important;
}

#order-standard_cart .field-icon {
    z-index: 10 !important; /* Ensures icons sit above the inputs */
}

/* ── 9. Checkout Submit Button ── */
#order-standard_cart #btnCompleteOrder {
    background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%) !important;
    border: none !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(66, 153, 225, 0.35) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease !important;
}

#order-standard_cart #btnCompleteOrder:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(66, 153, 225, 0.5) !important;
}

#order-standard_cart .prepend-icon .field-icon {
    top: 6px !important;
}

#order-standard_cart .prepend-icon .field {
    padding-left: 36px !important;
}

/* ==========================================================================
   VIEW INVOICE PAGE OVERRIDES
   ========================================================================== */

/* Fix the Payment Button on the View Invoice Page */
.epy-invoice-page .payment-btn-container .btn {
    background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0.6rem 2rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(66, 153, 225, 0.3) !important;
    transition: all 0.2s ease !important;
}

.epy-invoice-page .payment-btn-container .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(66, 153, 225, 0.45) !important;
}

/* ==========================================================================
   VIEW INVOICE PAGE OVERRIDES (PAYMENT GATEWAY BOX FIX)
   ========================================================================== */

/* 1. Create a Premium Light Card for the Payment Gateways */
.epy-invoice-page .payment-btn-container {
    background: #ffffff !important;
    padding: 1.25rem 1.5rem !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    display: inline-block !important;
    text-align: center !important;
    min-width: 250px !important;
    border: 2px solid #dce8f5 !important;
}

/* 2. Fix Text Colors inside the new Light Box (for modules that output custom text like USDT) */
.epy-invoice-page .payment-btn-container,
.epy-invoice-page .payment-btn-container div,
.epy-invoice-page .payment-btn-container span,
.epy-invoice-page .payment-btn-container p,
.epy-invoice-page .payment-btn-container strong {
    color: #0f2547 !important;
}

/* 3. Clean up and space out the Gateway Logos */
.epy-invoice-page .payment-btn-container img {
    max-height: 40px !important; /* Keeps giant logos under control */
    width: auto !important;
    margin: 0 5px 10px 5px !important; /* Adds space below the logo */
    vertical-align: middle !important;
}

/* 4. Force forms to stack cleanly & STRIP inline gateway styles */
.epy-invoice-page .payment-btn-container form {
    margin: 0 !important;
    padding: 15px 0 0 0 !important; /* Kills inline padding, but leaves 15px top for floating icons */
    border: none !important;        /* Kills the 1px solid #ddd inline border */
    box-shadow: none !important;    /* Kills the inline drop shadow */
    background: transparent !important;
    max-width: 100% !important;     /* Overrides the 400px inline restriction */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;  /* CRITICAL: Anchors absolutely positioned icons */
}

/* Clean up the inline H6 wrapper for the USDT Logo and Title */
.epy-invoice-page .payment-btn-container form h6 {
    margin: 0 0 10px 0 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #0f2547 !important;
}

/* Adjust the logo inside the H6 */
.epy-invoice-page .payment-btn-container form h6 img {
    margin: 0 10px 0 0 !important;
    max-height: 25px !important;
}

/* Enlarge the Amount text (USDT) */
.epy-invoice-page .payment-btn-container form p {
    margin: 0 0 15px 0 !important;
    font-size: 1.1rem !important;
}

/* ── BITCOIN / ACOIN ABSOLUTE POSITIONING FIXES ── */

/* Target the main aCoin image and center it */
.epy-invoice-page .payment-btn-container form > img {
    display: block !important;
    margin: 0 auto 10px auto !important;
    max-height: 40px !important;
    position: relative !important;
}

/* Force the Bitcoin icon to float at the top right of the aCoin logo */
.epy-invoice-page .payment-btn-container form > i.fa-bitcoin {
    position: absolute !important;
    top: 5px !important;
    right: 50% !important;
    transform: translateX(65px) !important; /* Pushes it exactly to the right edge of the logo */
    font-size: 1.25rem !important; 
    color: #ffffff !important;
    background: #f7931a !important; /* Bitcoin Orange */
    width: 26px !important;
    height: 26px !important;
    line-height: 26px !important;
    text-align: center !important;
    border-radius: 50% !important;
    border: 2px solid #ffffff !important; /* White border to cut into the logo behind it */
    box-shadow: 0 2px 8px rgba(247, 147, 26, 0.4) !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hide the useless <br> tag injected by the Bitcoin module */
.epy-invoice-page .payment-btn-container form > br {
    display: none !important;
}

/* 5. Style ANY button injected by a Payment Module (ENHANCED VISIBILITY) */
.epy-invoice-page .payment-btn-container input[type="submit"],
.epy-invoice-page .payment-btn-container input[type="button"],
.epy-invoice-page .payment-btn-container button,
.epy-invoice-page .payment-btn-container .btn {
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%) !important; /* Vibrant Success Green */
    border: none !important;
    color: #ffffff !important;
    padding: 0.85rem 2rem !important; /* Thicker, taller button */
    font-size: 1.15rem !important; /* Larger, highly readable text */
    font-weight: 800 !important; /* Extra bold */
    text-transform: uppercase !important;
    letter-spacing: 0.1em !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 15px rgba(22, 163, 74, 0.4) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    margin-top: 15px !important;
    display: inline-block !important;
    width: 100% !important; /* Fills the white box perfectly */
    animation: epyPayPulse 2s infinite !important; /* Adds a subtle glowing pulse */
}

/* Aggressive Hover Effect for the Button */
.epy-invoice-page .payment-btn-container input[type="submit"]:hover,
.epy-invoice-page .payment-btn-container input[type="button"]:hover,
.epy-invoice-page .payment-btn-container button:hover,
.epy-invoice-page .payment-btn-container .btn:hover {
    transform: translateY(-3px) !important; /* Lifts up more on hover */
    box-shadow: 0 8px 25px rgba(22, 163, 74, 0.6) !important; /* Deeper shadow */
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%) !important; /* Darkens slightly */
    color: #ffffff !important;
    animation: none !important; /* Stops pulsing when hovered */
}

/* The Pulsing Animation Keyframes */
@keyframes epyPayPulse {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
    70% { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Strip native borders from custom modules like USDT to blend smoothly into our new white card */
.epy-invoice-page .payment-btn-container > div {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Hover Effect for the Button */
.epy-invoice-page .payment-btn-container input[type="submit"]:hover,
.epy-invoice-page .payment-btn-container input[type="button"]:hover,
.epy-invoice-page .payment-btn-container button:hover,
.epy-invoice-page .payment-btn-container .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(66, 153, 225, 0.45) !important;
    color: #ffffff !important;
}

/* Strip native borders from custom modules like USDT to blend smoothly into our new white card */
.epy-invoice-page .payment-btn-container > div {
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ==========================================================================
   VIEW INVOICE PAGE OVERRIDES (TABLE HEADERS & TOTALS FIX)
   ========================================================================== */

/* 1. Fix Table Headers (Force White text on Navy background) */
.epy-invoice-page .epy-custom-table thead th,
.epy-invoice-page .epy-custom-table thead td {
    background-color: #0f2547 !important;
    color: #ffffff !important; /* Pure white text */
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    padding: 15px !important;
    border: none !important;
}

/* Optional: Add smooth rounded corners to the top of the dark table header */
.epy-invoice-page .epy-custom-table thead tr th:first-child,
.epy-invoice-page .epy-custom-table thead tr td:first-child {
    border-top-left-radius: 8px !important;
}
.epy-invoice-page .epy-custom-table thead tr th:last-child,
.epy-invoice-page .epy-custom-table thead tr td:last-child {
    border-top-right-radius: 8px !important;
}

/* 2. Enlarge the Total Price and Balance */
/* Targets the very last row (the Total/Balance row) in both tables */
.epy-invoice-page .epy-custom-table tbody tr:last-child td:last-child {
    font-size: 26px !important; /* Massive font size for the price */
    font-weight: 800 !important;
}

/* Ensure the text labels ("Total" and "Balance") match nicely */
.epy-invoice-page .epy-custom-table tbody tr:last-child td:first-child {
    font-size: 18px !important; /* Enlarged text label */
    font-weight: 800 !important;
    color: #0f2547 !important;
    vertical-align: middle !important; /* Aligns the label with the big price */
}

/* ==========================================================================
   VIEW INVOICE PAGE OVERRIDES (TOP ACTION ICON BUTTONS)
   ========================================================================== */

/* Sleek Icon Buttons (Back & Print) */
.epy-invoice-page .epy-icon-btn {
    border-radius: 8px !important;
    color: #475f7b !important;
    border: 1px solid #dce8f5 !important;
    background-color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03) !important;
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    font-size: 1.1rem !important;
}

.epy-invoice-page .epy-icon-btn:hover {
    color: #2b6cb0 !important;
    border-color: #a6bcdc !important;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08) !important;
    transform: translateY(-2px) !important;
}

/* Primary Gradient Icon Button (Download) */
.epy-invoice-page .epy-icon-btn-primary {
    border-radius: 8px !important;
    background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 10px rgba(91, 155, 213, 0.25) !important;
    width: 42px !important;
    height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
    font-size: 1.1rem !important;
}

.epy-invoice-page .epy-icon-btn-primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 15px rgba(91, 155, 213, 0.45) !important;
    color: #ffffff !important;
}

/* ==========================================================================
   VIEW INVOICE PAGE - PRINT MODE OPTIMIZATION
   ========================================================================== */

@media print {
    /* 1. Strip the webpage background and padding */
    body.epy-invoice-page {
        background-color: #ffffff !important;
        padding: 0 !important;
    }

    /* 2. Remove the outer card styling, shadows, and borders */
    .epy-invoice-page .invoice-container.card {
        box-shadow: none !important;
        border: none !important;
        margin: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
    }

    /* 3. Convert the dark web header to a clean white print header (Saves ink!) */
    .epy-invoice-page .card-header.epy-header-dark {
        background: #ffffff !important;
        padding: 0 0 20px 0 !important;
        border-bottom: 2px solid #dce8f5 !important;
        color: #0f2547 !important;
    }

    .epy-invoice-page .card-header.epy-header-dark h2,
    .epy-invoice-page .card-header.epy-header-dark h3 {
        color: #0f2547 !important;
    }

    /* 4. Hide buttons, status badges, and payment gateways so they don't print */
    .epy-invoice-page .payment-btn-container,
    .epy-invoice-page .epy-invoice-status,
    .epy-invoice-page .d-print-none {
        display: none !important;
    }

    /* 5. Adjust table headers for print (Dark text, light bg) */
    .epy-invoice-page .epy-custom-table thead th,
    .epy-invoice-page .epy-custom-table thead td {
        background-color: #f4f9ff !important;
        color: #0f2547 !important;
        border-bottom: 2px solid #0f2547 !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* 6. Remove excess padding inside the document so it fits on 1 page */
    .epy-invoice-page .card-body {
        padding: 20px 0 0 0 !important;
    }
    
    /* 7. Remove internal borders from tables */
    .epy-invoice-page .card {
        border: none !important;
        margin-bottom: 15px !important;
    }
}

/* --- Global Card Styling --- */
.card.shadow-lg {
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(2, 7, 62, 0.12) !important; /* Tinted shadow using your dark blue */
    overflow: hidden;
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* --- Header --- */
.card-header.bg-primary {
    background-color: #02073e !important; /* Dark Navy */
    border-bottom: none;
}

.card-header h3 {
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* --- Badges & Text --- */
.badge-info {
    background-color: #48a0d8 !important; /* Bright Blue */
    color: #ffffff;
    font-weight: 600;
    font-size: 0.85rem;
    box-shadow: 0 2px 4px rgba(72, 160, 216, 0.3);
}

p.text-muted {
    color: #6c757d;
    font-size: 1.05rem;
    margin-top: 0.5rem;
}

/* --- Form Elements --- */
.form-group label {
    font-weight: 600;
    color: #02073e; /* Dark Navy */
    margin-bottom: 0.5rem;
    display: block;
    text-align: left;
}

/* Intl-Tel-Input Container Fixes */
.iti {
    width: 100%;
    margin-bottom: 1.5rem;
}

.iti__tel-input {
    border: 1px solid #ced4da;
    border-radius: 8px;
    height: 50px;
    font-size: 1rem;
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.iti__tel-input:focus {
    border-color: #48a0d8;
    box-shadow: 0 0 0 0.2rem rgba(72, 160, 216, 0.25);
    outline: none;
}

/* --- Button Styling --- */
.btn-success {
    background-color: #48a0d8 !important; /* Overriding default green for brand consistency */
    border-color: #48a0d8 !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    padding: 0.75rem 1rem;
    transition: all 0.3s ease;
}

.btn-success:hover, 
.btn-success:focus {
    background-color: #02073e !important; /* Reverses to dark navy on hover */
    border-color: #02073e !important;
    box-shadow: 0 4px 15px rgba(2, 7, 62, 0.2) !important;
    transform: translateY(-1px);
}

/* --- Alert / Security Note --- */
.alert strong {
    color: #02073e;
    font-size: 0.95rem;
}

.alert ul {
    padding-left: 1.5rem;
    margin-top: 0.5rem;
}

.alert li {
    margin-bottom: 0.25rem;
}

/* ==========================================================================
   SECURE CREDENTIAL VAULT REDESIGN
   ========================================================================== */

.vault-card {
    border: 1px solid #eef0f2 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden;
    background: #fff;
}

.vault-header {
    background-color: #388bc8 !important; /* Premium light blue */
    padding: 1.5rem !important;
    border-bottom: none !important;
}

.vault-badge-dark {
    background-color: #1a2a47 !important; /* Dark navy */
    color: #ffffff;
    padding: 8px 20px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
}

.vault-form-group {
    gap: 10px;
    padding: 15px;
}

.vault-btn-primary {
    background-color: #388bc8 !important;
    border: 1px solid #388bc8 !important;
    color: #fff !important;
    font-weight: 500 !important;
    padding: 10px 24px !important;
    border-radius: 4px !important;
    font-size: 15px !important;
    transition: background-color 0.2s ease;
}

.vault-btn-primary:hover {
    background-color: #2b6da0 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   MOBILE PHONE INPUT ICON OVERRIDE
   ========================================================================== */

/* Force the wrapper to fill our new mobile-div */
.mobile-div .iti {
    width: 100% !important;
    display: block !important;
    margin-bottom: 0 !important;
}

/* Style the gray box on the left */
.mobile-div .iti__selected-flag,
.mobile-div .iti__selected-country {
    background-color: #f4f6f8 !important;
    border-right: 1px solid #e2e5e8 !important;
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

        /* Override the default intl-tel-input globe */
.iti__globe {
    background-image: none !important; /* Remove the default globe SVG */
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Insert the FontAwesome Phone Icon */
.iti__globe::before {
    content: "\f3cd"; /* FontAwesome unicode for 'phone' */
    font-family: "Font Awesome 5 Free";
    font-weight: 900; /* Font weight 900 is required for FA Solid icons */
    font-size: 12px; 
    color: #4b5563; /* Matches your UI's text color */
}

/* Adjust the tiny dropdown arrow to match the gray tone */
.mobile-div .iti__arrow {
    border-top-color: #64748b !important;
    margin-left: 8px !important;
}

/* Push the text input to the right so it doesn't overlap the new icon box */
.mobile-div .iti__tel-input,
.mobile-div .vault-input {
    padding-left: 60px !important;
    background-color: #f8f9fa !important;
    border: 1px solid #e2e5e8 !important;
    height: 48px !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease !important;
}

.mobile-div .vault-input:focus {
    border-color: #388bc8 !important;
}

/* Adjust the dropdown arrow to match the image */
#smsVerificationForm .iti__arrow {
    border-top-color: #64748b !important;
    margin-left: 8px !important;
}

/* Ensure the input text doesn't overlap the new icon box */
#smsVerificationForm .iti__tel-input {
    padding-left: 56px !important;
}

/* Redesigned Security Note Box */
.vault-note-box {
    border: 1px solid #f0f0f0;
    padding: 24px;
    background: #d3ebff;
}

.vault-status-badge {
    background-color: #f1f5f9;
    color: #64748b;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
}

.vault-note-item {
    background-color: #f4f7f9;
    border-radius: 6px;
    padding: 10px 15px;
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    color: #4b5563;
    font-size: 14.5px;
    text-align: left;
}

.vault-note-item:last-child {
    margin-bottom: 0;
}

.vault-note-item .text-primary {
    color: #388bc8 !important;
    margin-top: 4px;
    font-size: 14px;
}

.mobile-div {
    width: 350px;
    text-align: left;
}

.dropdown-item {
    min-width: 180px;
}

/* Core Layout & Reset */
:root {
    --primary: #3b82f6;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --info: #0ea5e9;
    --dark: #0f172a;
    --gray-text: #64748b;
    --gray-light: #f1f5f9;
    --border-color: #e2e8f0;
    --panel-bg: #ffffff;
    --box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    --border-radius: 12px;
    --transition: all 0.3s ease;
}

/* Modern Panel Component (Used across all cards) */
.modern-panel {
    background: var(--panel-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid var(--border-color);
    margin-bottom: 24px;
    overflow: hidden;
}

.modern-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--border-color);
    background: var(--panel-bg);
}

.modern-panel-title-area {
    display: flex;
    align-items: center;
    gap: 16px;
}

.modern-panel-icon {
    background: var(--gray-light);
    color: var(--primary);
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.modern-panel-titles h3 {
    margin: 0 0 4px 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--dark);
}

.modern-panel-titles p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--gray-text);
    text-align: left;
}

/* Panel Lists (For Service Details & Config Options) */
.modern-panel-list {
    display: flex;
    flex-direction: column;
}

.modern-panel-item {
    display: flex;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid var(--border-color);
}

.modern-panel-item:last-child {
    border-bottom: none;
}

.modern-panel-item-name {
    width: 35%;
    color: var(--gray-text);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 12px;
}

.modern-panel-item-name i {
    color: var(--primary);
    width: 16px;
    text-align: center;
}

.modern-panel-item-value {
    width: 65%;
    color: var(--dark);
    font-weight: 600;
    font-size: 0.95rem;
    text-align: left;
}

/* Badges */
.modern-badge {
    background: var(--primary);
    color: #ffffff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
}

.status-badge {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-active { background: #d1fae5; color: #059669; }
.status-pending { background: #fef3c7; color: #d97706; }
.status-suspended { background: #fee2e2; color: #dc2626; }
.status-terminated { background: #f1f5f9; color: #475569; }

/* Panel Footer & Actions */
.modern-panel-footer {
    padding: 20px 24px;
    background: #f8fafc;
    border-top: 1px solid var(--border-color);
}

.action-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: var(--transition);
    text-decoration: none;
    border: none;
    color: #fff;
}

.action-btn i { margin-right: 8px; }
.btn-upgrade { background: var(--primary); }
.btn-renew { background: var(--success); }
.btn-cancel { background: var(--danger); }

.action-btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
    color: #fff;
    text-decoration: none;
}

.action-btn.disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Nav Tabs */
.config-panel-header {
    background: #ffffff;
    padding: 0 24px;
    border-bottom: 1px solid var(--border-color);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
    display: flex;
    gap: 20px;
    margin-top: 30px;
}

.config-panel-header .nav-item {
    margin-bottom: -1px;
}

.config-panel-header .nav-link {
    color: var(--gray-text) !important;
    border: none;
    padding: 16px 0;
    font-weight: 500;
    border-bottom: 2px solid transparent;
}

.config-panel-header .nav-link.active {
    background-color: transparent !important;
    color: var(--primary) !important;
    border-bottom: 2px solid var(--primary);
    font-weight: 600;
}

.config-panel-header h4 {
    margin: 0;
    font-weight: inherit;
    font-size: 1rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-details-tab-container {
    border: 1px solid var(--border-color);
    border-top: none;
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    background: #ffffff;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.02);
}

/* Server Control Specifics */
.control-section {
    margin-bottom: 30px;
}
.control-section:last-child { margin-bottom: 0; }

.section-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dark);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-group-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.btn-control {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    transition: var(--transition);
    border: 1px solid var(--border-color);
    background: white;
    color: var(--gray-text);
    flex: 1;
    min-width: 140px;
    cursor: pointer;
}

.btn-control:hover {
    transform: translateY(-2px);
    box-shadow: var(--box-shadow);
}
.btn-control.reboot:hover { background-color: var(--warning); color: white; border-color: var(--warning); }
.btn-control.shutdown:hover { background-color: var(--danger); color: white; border-color: var(--danger); }
.btn-control.manual_reboot:hover { background-color: var(--info); color: white; border-color: var(--info); }

.os-install-section {
    background: var(--gray-light);
    border-radius: 8px;
    padding: 20px;
    border: 1px solid var(--border-color);
}

.os-form {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-end;
    margin-bottom: 12px;
}

.os-form .form-group { flex: 1; min-width: 250px; margin-bottom: 0; }
.os-form .form-label { font-weight: 600; margin-bottom: 8px; color: var(--dark); display: block; }
.os-form .form-control {
    border-radius: 8px;
    border: 1px solid #ced4da;
    padding: 5px 15px;
    width: 100%;
}
.os-form .form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25); }

.btn-install {
    background: var(--success);
    border: none;
    color: white;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    transition: var(--transition);
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.btn-install:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3); }
.btn-install:disabled { background: #94a3b8; cursor: not-allowed; }

.form-info { color: var(--gray-text); font-size: 0.85rem; display: flex; align-items: center; gap: 8px; }

/* Responsive adjustments */
@media (max-width: 768px) {
    .modern-panel-header, .modern-panel-item { flex-direction: column; align-items: flex-start; gap: 12px; }
    .modern-panel-item-name, .modern-panel-item-value { width: 100%; }
    .btn-group-controls, .os-form { flex-direction: column; align-items: stretch; }
    .btn-install { width: 100%; justify-content: center; margin-top: 10px; }
}

.status-cancelled {
    background-color: #87939f;
    color: white;
}

/* Additional CSS for Server Management Panel and Sidebar Buttons */

/* Content Area Colored Cards */
.server-control-card {
    transition: transform 0.2s, box-shadow 0.2s;
    border-radius: 12px;
}

.server-control-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15) !important;
}

.server-card-blue {
    background-color: #007bff; /* Main Blue */
    border-color: #007bff;
}
.server-card-blue:hover {
    background-color: #0069d9;
}

.server-card-red {
    background-color: #dc3545; /* Main Red */
    border-color: #dc3545;
}
.server-card-red:hover {
    background-color: #c82333;
}

.server-card-green {
    background-color: #28a745; /* Main Green */
    border-color: #28a745;
}
.server-card-green:hover {
    background-color: #218838;
}

/* Sidebar Colored Buttons */
.sidebar-btn {
    border-radius: 8px;
    color: white !important;
    transition: background-color 0.2s;
}

.sidebar-btn-blue {
    background-color: #007bff;
}
.sidebar-btn-blue:hover {
    background-color: #0069d9;
}

.sidebar-btn-red {
    background-color: #dc3545;
}
.sidebar-btn-red:hover {
    background-color: #c82333;
}

.sidebar-btn-green {
    background-color: #28a745;
}
.sidebar-btn-green:hover {
    background-color: #218838;
}

/* General Panel Styling */
.modern-panel {
    border: 1px solid #dee2e6;
    border-radius: 12px;
    background-color: #fff;
    overflow: hidden;
}

.modern-panel-header {
    background-color: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    padding: 1.25rem 1.5rem;
}

/* ==========================================================================
   SERVER MANAGEMENT AREA (BALANCED MID-DARK THEME)
   ========================================================================== */

.modern-panel-mid-dark {
    background: #1e293b !important; /* Lighter Slate (Mid-Dark Background) */
    border: 1px solid #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

/* Header inside Mid-Dark Panel (Darker Contrast) */
.modern-panel-mid-dark .modern-panel-header {
    background: #0f172a !important; /* Deep Dark Slate */
    border-bottom: 1px solid #334155 !important;
    padding: 1.5rem !important;
}

.modern-panel-mid-dark .modern-panel-titles h3 {
    color: #ffffff !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    text-align: left !important;
}

.modern-panel-mid-dark .modern-panel-titles p {
    color: #94a3b8 !important; /* Cool grey text */
}

/* Custom Icon Box */
.modern-panel-mid-dark .modern-panel-icon {
    background: #1e293b !important; /* Matches main bg */
    color: #3b82f6 !important;
    border: 1px solid #334155 !important;
}

/* Titles and Information blocks */
.modern-panel-mid-dark .section-title {
    color: #f1f5f9 !important;
    border-bottom: 1px solid #334155 !important;
    padding-bottom: 10px !important;
}

.modern-panel-mid-dark .form-info {
    color: #94a3b8 !important;
}

.modern-panel-mid-dark .form-info i {
    color: #3b82f6 !important;
}

/* Internal Box for OS Install (Recessed Dark Section) */
.modern-panel-mid-dark .os-install-section {
    background: #0f172a !important; /* Darker recessed background */
    border: 1px solid #0f172a !important;
    border-radius: 10px !important;
    padding: 20px !important;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.3) !important;
}

.modern-panel-mid-dark .form-label {
    color: #e2e8f0 !important;
}

/* Inputs and Selects inside dark panel */
.modern-panel-mid-dark .form-control {
    background-color: #1e293b !important; /* Mid-dark for inputs */
    border: 1px solid #334155 !important;
    color: #ffffff !important;
}

.modern-panel-mid-dark .form-control:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
    background-color: #0f172a !important;
}

/* Buttons - Control overrides for Dark Background */
.modern-panel-mid-dark .btn-control {
    background: #0f172a !important; /* Darker buttons */
    border: 1px solid #334155 !important;
    color: #e2e8f0 !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

.modern-panel-mid-dark .btn-control i {
    opacity: 0.9 !important;
}

.modern-panel-mid-dark .btn-control:hover {
    background: #334155 !important;
    color: #ffffff !important;
    border-color: #475569 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.modern-panel-mid-dark .btn-control:hover .fas {
    color: #ffffff !important;
}

/* Specific Hover actions */
.modern-panel-mid-dark .btn-control.reboot:hover {
    background: #f59e0b !important;
    border-color: #f59e0b !important;
}

.modern-panel-mid-dark .btn-control.shutdown:hover {
    background: #ef4444 !important;
    border-color: #ef4444 !important;
}

.modern-panel-mid-dark .btn-control.manual_reboot:hover {
    background: #0ea5e9 !important;
    border-color: #0ea5e9 !important;
}

.modern-panel-mid-dark .btn-install {
    background: #10b981 !important;
    color: #ffffff !important;
    border: none !important;
}

.modern-panel-mid-dark .btn-install:disabled {
    background: #334155 !important;
    color: #94a3b8 !important;
}

.modern-panel-mid-dark select:focus>option {
    background-color: #010048 !important;
}

.card-sidebar .btn-success {
    font-size: 14px !important;
    padding: 4px 10px !important;
}

.input-group-append .btn-success {
    padding: 2px 10px !important;
}

/* ==========================================================================
   SERVICES LIST - IP BADGE STYLING
   ========================================================================== */
.epy-ip-badge {
    display: inline-block !important;
    background-color: #f0f4f9 !important; /* Soft premium blue-grey background */
    color: #475f7b !important; /* Deep readable text */
    padding: 3px 10px 0px !important;
    border-radius: 6px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    margin-top: 6px !important;
    border: 1px solid #dce8f5 !important;
    font-family: 'Courier New', Courier, monospace !important; /* Makes IPs easy to read */
}

/* Hover effect so it feels interactive */
.epy-custom-table tbody tr:hover .epy-ip-badge {
    background-color: #ffffff !important;
    border-color: #5b9bd5 !important;
    color: #2b6cb0 !important;
    transition: all 0.2s ease !important;
}

#tableTicketsList_wrapper .id-subject a {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
}

@media screen and (max-width: 1600px) {
    #epy-client-tiles .epy-tile .tile-icon {
        font-size: 2rem !important;
    }
}

/* ==========================================================================
   WHMCS NOTIFICATION BANNER - DEFAULT (WARNING / YELLOW)
   ========================================================================== */

/* 1. Main Banner Container */
div.verification-banner.email-verification {
    background-color: #fffbeb !important;
    border: 1px solid #fde68a !important;
    border-radius: 8px !important;
    padding: 16px 0 !important;
    margin-bottom: 0px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.02) !important;
}

/* Align the row contents properly */
div.verification-banner.email-verification .row {
    align-items: center !important;
}

/* 2. Text and Icon Colors */
div.verification-banner.email-verification span.text,
div.verification-banner.email-verification i.fas {
    color: #78350f !important;
    font-weight: 500 !important;
}

div.verification-banner.email-verification i.fas {
    margin-right: 10px !important;
    font-size: 1.15rem !important;
}

/* 3. The Resend Button Override */
div.verification-banner.email-verification button.btn.btn-resend-verify-email {
    background-color: #ffffff !important;
    color: #d97706 !important;
    border: 1px solid #fde68a !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

div.verification-banner.email-verification button.btn.btn-resend-verify-email:hover {
    background-color: #d97706 !important;
    color: #ffffff !important;
    border-color: #d97706 !important;
}

/* 4. The Close (X) Button */
div.verification-banner.email-verification button.close {
    color: #78350f !important;
    opacity: 0.5 !important;
    text-shadow: none !important;
    transition: opacity 0.2s ease !important;
    margin-top: -2px !important;
}

div.verification-banner.email-verification button.close:hover {
    opacity: 1 !important;
}

/* ==========================================================================
   MODIFIERS: ERROR (Red) & INFO (Blue)
   Add "is-error" or "is-info" to the parent div in the template to use these
   ========================================================================== */

/* Error (Red) Override */
div.verification-banner.email-verification.is-error {
    background-color: #fef2f2 !important;
    border-color: #fecaca !important;
}
div.verification-banner.email-verification.is-error span.text,
div.verification-banner.email-verification.is-error i.fas,
div.verification-banner.email-verification.is-error button.close {
    color: #7f1d1d !important;
}
div.verification-banner.email-verification.is-error button.btn.btn-resend-verify-email {
    color: #dc2626 !important;
    border-color: #fecaca !important;
}
div.verification-banner.email-verification.is-error button.btn.btn-resend-verify-email:hover {
    background-color: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

/* Info (Blue) Override */
div.verification-banner.email-verification.is-info {
    background-color: #eff6ff !important;
    border-color: #bfdbfe !important;
}
div.verification-banner.email-verification.is-info span.text,
div.verification-banner.email-verification.is-info i.fas,
div.verification-banner.email-verification.is-info button.close {
    color: #1e3a8a !important;
}
div.verification-banner.email-verification.is-info button.btn.btn-resend-verify-email {
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}
div.verification-banner.email-verification.is-info button.btn.btn-resend-verify-email:hover {
    background-color: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

@media screen and (max-width: 1250px) {
    #header-container {
        max-width: 100%;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
}

@media screen and (max-width: 1150px) {
    .primary-bg-color {
        margin-top: 0px !important;
    }
}

/* ==========================================================================
   HEADER NAVIGATION FIX (Below 1200px)
   ========================================================================== */
@media screen and (max-width: 1200px) {
    /* Force the navbar to stay visible and horizontal instead of hiding */
    #mainNavbar.collapse:not(.show) {
        display: flex !important;
    }
    
    #mainNavbar .navbar-nav {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: end;
    }

    /* Reduce padding and font size so the items fit on one line */
    #mainNavbar .navbar-nav > li > a {
        padding: 10px 15px !important;
        font-size: 14px !important;
        white-space: nowrap !important;
    }
    
    /* Remove the excessive right padding on links */
    #mainNavbar .navbar-nav > li > a.pr-4 {
        padding-right: 15px !important;
    }

    /* Hide the mobile knowledgebase search form so it doesn't break the layout */
    #mainNavbar form.d-xl-none {
        display: none !important;
    }
}

@media screen and (max-width: 1400px) {
    .form-group {
        width: 100%;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 20px;
        position: relative;
        padding: 0 0px !important;
    }
}

/* Ensure boxes take full width on mobile/tablets */
@media screen and (max-width: 991px) {
    .row.justify-content-center > .col-lg-5.col-md-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 15px !important;
    }
}

/* ==========================================================================
   SIDEBAR MOBILE FIX (Below 992px)
   ========================================================================== */
@media screen and (max-width: 991px) {
    /* Make the sidebar relative and allow it to take full width */
    #sidebar {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
        padding: 0 !important;
        background-color: #4c5562;
        z-index: 0;
    }

    #sidebarNav {
        padding: 15px !important;
        height: auto !important;
    }

    /* Force flexbox, allow wrapping into multiple rows, and center everything */
    #sidebar .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 15px 35px !important; /* 15px row gap, 35px column gap */
        width: 100% !important;
        overflow: visible !important;
    }

    /* Remove the old 42px padding and auto margins that were breaking the layout */
    #sidebar .nav-item {
        margin: 0 !important;
        padding: 0 !important;
        flex: 0 0 auto !important; /* Prevents stretching */
    }

    #sidebar .nav-item a {
        display: block !important;
        padding: 10px !important;
    }

    /* Hide the text pseudoelements on mobile so the icons wrap cleanly in a grid */
    #sidebar li::before {
        display: none !important; 
    }
    section#main-body {
        padding: 0px 0 !important;
    }
}

@media (max-width: 991px) {
    .container {
        padding-left: 15px !important;
    }
}

@media (max-width: 850px) {
    .navbar{
        display: none !important;
    }
}

/* Force the warning icon to use the correct weight and font */
.verification-banner i.fa-exclamation-triangle {
    font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", "FontAwesome" !important;
    font-weight: 900 !important;
}

.order-1 {
    display: flex;
    justify-content: left;
    align-items: center;
}

.order-1 .text {
    font-size: 15px;
    padding-top: 0px !important;
}

/* ==========================================================================
   1150px HAMBURGER TOGGLE - FORCE VISIBILITY
   ========================================================================== */
@media screen and (max-width: 1150px) {
    /* 1. Hide the desktop menu and search box completely */
    .main-header .navbar-collapse,
    .main-header .outer-box {
        display: none !important;
    }

    /* 2. Force every parent wrapper to be visible and flexed */
    .main-header .nav-outer,
    .main-header .main-menu,
    .main-header .navbar-header {
        display: flex !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        height: auto !important;
        float: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 3. Force the Button to take up physical space */
    button.mobile-nav-toggler {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 35px !important;
        height: 24px !important;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 0 0 20px !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 99999 !important;
        position: relative !important;
    }

    /* 4. Force the 3 lines to paint (Dark Blue so they contrast against white) */
    button.mobile-nav-toggler .icon-bar {
        display: block !important;
        width: 100% !important;
        height: 4px !important;
        background-color: #0f2547 !important; 
        border-radius: 4px !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: 0 !important;
        box-shadow: none !important;
    }

    /* 5. Keep Logo on the left */
    .main-header .inner-container {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
        padding: 15px 25px !important;
        min-height: 90px;
    }

    /* 5. Force the wrapper containing the toggle to the far right */
    .main-header .nav-outer {
        display: flex !important;
        align-items: center !important;
        position: absolute !important;
        right: 25px !important; /* Pins it to the right edge */
        top: 50% !important;
        transform: translateY(-50%) !important; /* Centers it vertically */
        margin: 0 !important;
        padding: 0 !important;
        width: auto !important;
        z-index: 999 !important;
    }

    #navbarSupportedContent {
        display: none !important; /* Hide the desktop menu */
    }
}

/* ==========================================================================
   MOBILE MENU AUTHENTICATION BUTTONS
   ========================================================================== */
.mobile-auth-box {
    padding: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    background: #f8fafc; /* Soft contrasting background */
    margin-top: 10px;
}

.mobile-auth-box .user-welcome {
    color: #0f2547;
    font-weight: 800;
    font-size: 14px;
    margin-bottom: 15px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.epy-btn-mobile-auth {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.epy-btn-mobile-auth i {
    margin-right: 10px;
    font-size: 16px;
}

.epy-btn-mobile-auth:last-child {
    margin-bottom: 0;
}

/* Primary Button (Login / Dashboard) */
.epy-btn-mobile-auth.primary {
    background: linear-gradient(135deg, #2b6cb0 0%, #4299e1 100%);
    color: #ffffff !important;
    border: none;
    box-shadow: 0 4px 15px rgba(66, 153, 225, 0.3);
}

.epy-btn-mobile-auth.primary:hover {
    box-shadow: 0 6px 20px rgba(66, 153, 225, 0.4);
    transform: translateY(-2px);
}

/* Outline Button (Register) */
.epy-btn-mobile-auth.outline {
    background: transparent;
    color: #2b6cb0 !important;
    border: 2px solid #2b6cb0;
}

.epy-btn-mobile-auth.outline:hover {
    background: #2b6cb0;
    color: #ffffff !important;
}

/* Danger Button (Logout) */
.epy-btn-mobile-auth.danger {
    background: transparent;
    color: #dc2626 !important;
    border: 2px solid #fca5a5;
}

.epy-btn-mobile-auth.danger:hover {
    background: #dc2626;
    color: #ffffff !important;
    border-color: #dc2626;
}

/* Hide Announcements, Knowledgebase, and Network Status from the primary top navbar */
#nav li[menuitemname="Announcements"],
#nav li[menuitemname="Knowledgebase"],
#nav li[menuitemname="Network Status"] {
    display: none !important;
}

/* ==========================================================================
   PRODUCT TOGGLE DISPLAY
   ========================================================================== */
.product-card.toggle-hidden { 
    display: none !important; 
}

/* ==========================================================================
   RESPONSIVE DATA TABLES (Mobile Swipe-to-Scroll)
   ========================================================================== */
@media screen and (max-width: 991px) {
    /* 1. Force the table to become a horizontally scrollable block */
    .epy-custom-table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important; /* Smooth scrolling on iOS */
        border-bottom: none !important;
    }

    /* 2. Prevent text inside the cells from wrapping and squishing */
    .epy-custom-table th,
    .epy-custom-table td {
        white-space: nowrap !important; /* Keeps text in one line */
        min-width: 150px !important; /* Ensures columns don't get too thin */
    }

    /* Give the first and last columns a bit more specific sizing if needed */
    .epy-custom-table th:first-child,
    .epy-custom-table td:first-child {
        min-width: 60px !important;
    }

    /* 3. Center the pagination buttons so they don't break off the screen */
    .dataTables_wrapper .dataTables_paginate {
        float: none !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        padding-top: 20px !important;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        margin: 0 !important; /* Removed side margins since we are using gap */
    }

    /* 4. Fix the "Showing 1 to X" info text alignment for mobile */
    .dataTables_wrapper .dataTables_info {
        text-align: center !important;
        float: none !important;
        padding-bottom: 10px !important;
    }
}

/* ==========================================================================
   TABLE COMPRESSION FIX (Prevents cutoff between 992px and 1200px)
   ========================================================================== */
@media screen and (max-width: 1200px) {
    /* 1. Force the table to respect the container width */
    .epy-custom-table {
        table-layout: auto !important;
        width: 100% !important;
    }

    /* 2. Drastically reduce the left/right padding to free up space */
    .epy-custom-table th {
        padding: 1rem 0.5rem !important;
        font-size: 0.75rem !important; /* Slightly smaller headers */
        white-space: normal !important;
    }

    .epy-custom-table td {
        padding: 1rem 0.5rem !important;
        font-size: 0.85rem !important; /* Slightly smaller text */
        white-space: normal !important; /* ALLOWS TEXT TO WRAP */
        word-break: break-word !important;
    }

    /* 3. Allow the long Product Name to wrap properly */
    .epy-custom-table td strong {
        display: block !important;
        white-space: normal !important;
        line-height: 1.4 !important;
        font-size: 0.9rem !important;
    }

    /* 4. Keep the Date column from taking up too much room */
    .epy-custom-table td.text-center {
        min-width: 90px !important;
    }
}

/* ==========================================================================
   MOBILE TABLE FIX (Below 768px ONLY)
   ========================================================================== */
@media screen and (max-width: 767px) {
    /* If the screen gets to mobile size, the font gets a bit smaller so it still fits */
    .epy-custom-table th {
        padding: 0.75rem 0.4rem !important;
        font-size: 0.7rem !important;
    }
    
    .epy-custom-table td {
        padding: 0.75rem 0.4rem !important;
        font-size: 0.8rem !important;
    }

    .epy-custom-table td strong {
        font-size: 0.85rem !important;
    }
    
    /* Shrink the status badges slightly so they fit */
    .epy-custom-table .label.status {
        padding: 0.25rem 0.6rem !important;
        font-size: 0.65rem !important;
    }
}

/* ==========================================================================
   CUSTOM TRUSTPILOT FOOTER BUTTON
   ========================================================================== */
.trustpilot-btn {
    display: inline-flex !important;
    align-items: center !important;
    background-color: #ffffff !important; /* Forces the white background */
    border: 2px solid #00b67a !important; /* Trustpilot Green border */
    padding: 8px 12px !important;
    border-radius: 4px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.trustpilot-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
}

.trustpilot-btn .tp-text {
    color: #191919 !important; /* Dark text color */
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-right: 8px !important;
    font-family: Arial, sans-serif !important;
}

.trustpilot-btn .tp-logo {
    height: 24px !important; /* Keeps the logo image nicely sized */
    width: auto !important;
    display: block !important;
}

/* ==========================================================================
   FOOTER MOBILE RESPONSIVENESS FIX (CENTERED ALIGNMENT)
   ========================================================================== */
@media (max-width: 991px) {
    /* 1. Force columns to stack and align content to the center */
    .footer-style-three .footer-column {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        text-align: center !important;
        margin-bottom: 25px !important;
    }

    /* 2. Center the internal widgets (like headers and text blocks) */
    .footer-style-three .footer-widget {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    /* 3. Center the links inside the lists */
    .footer-style-three .quick-links-two {
        padding-left: 0 !important;
        text-align: center !important;
    }

    .footer-style-three .quick-links-two li {
        text-align: center !important;
        display: block !important;
    }

    /* 4. Center the language/currency selector button */
    .footer-style-three .float-lg-right {
        float: none !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 15px !important;
        width: 100% !important;
    }
    
    .footer-style-three .list-inline {
        padding-left: 0 !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* 5. Ensure the top Logo and Trustpilot buttons are perfectly centered */
    .footer-style-three .logo-box {
        float: none !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .trustpilot-custom {
        display: flex !important;
        justify-content: center !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   SWITCH ACCOUNT TABLE SPECIFICS
   ========================================================================== */
.epy-account-row {
    transition: background-color 0.2s ease, transform 0.2s ease !important;
}

.epy-account-row:hover:not(.disabled-row) {
    background-color: #f4f9ff !important;
    box-shadow: inset 4px 0 0 #5b9bd5 !important;
}

.epy-account-row.disabled-row {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    background-color: #f8fafc !important;
}

/* Custom Select Button */
.epy-btn-switch {
    background: transparent !important;
    color: #2b6cb0 !important;
    border: 2px solid #2b6cb0 !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    padding: 0.35rem 1rem !important;
    transition: all 0.2s ease !important;
}

.epy-account-row:hover:not(.disabled-row) .epy-btn-switch {
    background: #2b6cb0 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(43, 108, 176, 0.3) !important;
}

/* ==========================================================================
   TABLE HEADER - COLOR ADJUSTMENT
   ========================================================================== */
.epy-custom-table thead th {
    /* Vibrant brand blue gradient to contrast against the dark navy card header */
    background: linear-gradient(180deg, #2b6cb0 0%, #1c528c 100%) !important; 
    color: #ffffff !important;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.15) !important; /* Adds a slightly darker lip at the bottom */
    border: none !important;
}

div.md-editor.active {
    display: block;
    border: 1px solid #ddd;
    outline: 0;
    box-shadow: none;
    width: 100% !important;
}

.md-editor {
    border: 1px solid #ddd;
    border-radius: 3px;
    width: 100%;
}

#frmCheckout .conditions p {
    text-align: left;
}