/* Copy all of v5 */
/*!
 * IIGlobe WHMCS Theme — VERSION 4.0
 * ALL fixes implemented correctly:
 * 1. Home domain search: GREY background
 * 2. Dashboard welcome: Hero image + blue overlay, white text
 * 3. Wallet: Logo images, 4 tabs
 * 4. Mobile footer: Home + Login/Logout right, bold
 * 5. Mobile dropdown: Working
 * 6. Login/register: Hero background
 * 7. Invoice logo
 * 8. Shop page: All services + domain registration
 */

/* ============================================================
   ROOT RESET
   ============================================================ */
* { box-sizing: border-box !important; }

html, body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

p, h1, h2, h3, h4, h5, h6 { margin-bottom: 1rem !important; }
ul, ol { margin-bottom: 1rem !important; padding-left: 20px !important; }
li { margin-bottom: 0.25rem !important; }
img, video, iframe, embed, object, table { max-width: 100% !important; height: auto !important; }

/* ============================================================
   HIDE WHMCS NAV
   ============================================================ */
.header .navbar.navbar-light,
.navbar-expand-xl.main-navbar-wrapper,
.topbar,
.master-breadcrumb {
    display: none !important;
}

/* ============================================================
   HEADER
   ============================================================ */
.iglobe-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1050 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.iglobe-topbar {
    background: linear-gradient(90deg, #0D47A1 0%, #1565C0 100%) !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.iglobe-topbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 8px 10px !important;
    width: 100% !important;
}

.iglobe-logo-link {
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
}

.iglobe-logo-img {
    height: 50px !important;
    width: auto !important;
    max-height: 50px !important;
    transition: height .3s !important;
}

.iglobe-topbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.iglobe-cart-btn {
    position: relative !important;
    background: #C62828 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1rem !important;
    text-decoration: none !important;
}

.iglobe-cart-badge {
    position: absolute !important;
    top: -4px !important;
    right: -4px !important;
    background: #fff !important;
    color: #C62828 !important;
    border-radius: 50% !important;
    width: 17px !important;
    height: 17px !important;
    font-size: .6rem !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.iglobe-hamburger {
    display: none !important;
    background: transparent !important;
    border: 2px solid rgba(255,255,255,.75) !important;
    border-radius: 6px !important;
    color: #fff !important;
    padding: 5px 8px !important;
    font-size: .95rem !important;
    cursor: pointer !important;
    line-height: 1 !important;
}

/* Menu bar */
.iglobe-navbar {
    background: #ffffff !important;
    border-bottom: 3px solid #C62828 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

.iglobe-navbar-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    width: 100% !important;
}

.iglobe-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
}

.iglobe-nav-sep {
    color: #C62828 !important;
    opacity: .4 !important;
    font-size: .85rem !important;
    padding: 0 2px !important;
    user-select: none !important;
}

.iglobe-nav-item {
    position: relative !important;
    margin: 0 !important;
}

.iglobe-nav-link {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 13px 11px !important;
    color: #C62828 !important;
    font-weight: 700 !important;
    font-size: .92rem !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    transition: background .2s !important;
}

.iglobe-nav-link:hover {
    background: rgba(198,40,40,.07) !important;
    color: #8B1818 !important;
    border-radius: 4px !important;
}

/* Dropdowns */
.iglobe-has-dropdown {
    position: relative !important;
}

.iglobe-dropdown {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: #C62828 !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.2) !important;
    padding: 8px 0 !important;
    list-style: none !important;
    margin: 0 !important;
    min-width: 180px !important;
    z-index: 2000 !important;
    border: 2px solid #8B1818 !important;
}

.iglobe-has-dropdown:hover .iglobe-dropdown {
    display: block !important;
}

.iglobe-has-dropdown.open .iglobe-dropdown {
    display: block !important;
}

.iglobe-dropdown li {
    margin: 0 !important;
    padding: 0 !important;
}

.iglobe-dropdown li a {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    padding: 9px 14px !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: .86rem !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background .2s !important;
    background: transparent !important;
}

.iglobe-dropdown li a:hover {
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
}

.iglobe-dropdown-divider {
    border-top: 1px solid rgba(255,255,255,.25) !important;
    margin: 4px 0 !important;
}

.iglobe-dropdown-logout {
    color: #ffcccc !important;
}

/* ============================================================
   MOBILE HEADER (≤1199px)
   ============================================================ */
@media (max-width: 1199px) {
    .iglobe-hamburger {
        display: flex !important;
    }
    
    .iglobe-logo-img {
        height: 40px !important;
    }
    
    .iglobe-navbar-inner {
        padding: 0 !important;
        justify-content: flex-start !important;
    }
    
    .iglobe-nav {
        flex-direction: column !important;
        width: 100% !important;
        max-height: 0 !important;
        overflow: hidden !important;
        transition: max-height .35s ease !important;
        background: #ffffff !important;
    }
    
    .iglobe-nav.open {
        max-height: 700px !important;
        overflow-y: auto !important;
    }
    
    .iglobe-nav-sep {
        display: none !important;
    }
    
    .iglobe-nav-item {
        width: 100% !important;
    }
    
    .iglobe-nav-link {
        width: 100% !important;
        padding: 12px 15px !important;
        border-bottom: 1px solid rgba(198,40,40,.1) !important;
        font-size: .9rem !important;
        justify-content: flex-start !important;
    }
    
    /* Mobile dropdown inline */
    .iglobe-dropdown {
        position: static !important;
        transform: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        border: none !important;
        border-top: 1px solid rgba(255,255,255,.2) !important;
        width: 100% !important;
        display: none !important;
        padding: 0 !important;
    }
    
    .iglobe-has-dropdown.open > .iglobe-dropdown {
        display: block !important;
    }
    
    .iglobe-has-dropdown:hover > .iglobe-dropdown {
        display: none !important;
    }
    
    .iglobe-dropdown li a {
        padding: 10px 28px !important;
        font-size: .84rem !important;
        background: rgba(198,40,40,.05) !important;
    }
}

@media (max-width: 576px) {
    .iglobe-logo-img {
        height: 36px !important;
    }
    
    .iglobe-topbar-inner {
        padding: 6px 5px !important;
    }
    
    .iglobe-cart-btn {
        width: 36px !important;
        height: 36px !important;
    }
}

/* ============================================================
   MAIN BODY
   ============================================================ */
#main-body {
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}

#main-body > .container {
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 100% !important;
}

.row {
    margin: 0 !important;
}

.iglobe-sidebar-col {
    padding-right: 5px !important;
}

.primary-content {
    padding: 15px !important;
}

@media (max-width: 991px) {
    .iglobe-sidebar-col {
        display: none !important;
    }
    
    .col-lg-8.col-xl-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 5px !important;
    }
    
    .primary-content {
        padding: 10px !important;
    }
}

/* ============================================================
   FIX 1: HOMEPAGE DOMAIN SEARCH — GREY BACKGROUND
   ============================================================ */
.home-domain-search {
    background: #e8e8e8 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

.home-domain-search .p-5 {
    padding: clamp(16px,4vw,45px) clamp(12px,5vw,50px) !important;
}

.home-domain-search h2 {
    color: #C62828 !important;
    font-weight: 700 !important;
    text-align: center !important;
    font-size: clamp(1.3rem, 3.5vw, 2.2rem) !important;
    margin-bottom: 25px !important;
}

.home-domain-search .input-group {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    align-items: stretch !important;
}

.home-domain-search .input-group .form-control {
    flex: 1 !important;
    background: #42A5F5 !important;
    color: #ffffff !important;
    border: 2px solid #1E88E5 !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    font-size: .98rem !important;
    min-height: 52px !important;
}

.home-domain-search .input-group .form-control::placeholder {
    color: rgba(255,255,255,.9) !important;
}

.home-domain-search .input-group-append .btn {
    background: #C62828 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 14px 28px !important;
    font-weight: 700 !important;
    min-height: 52px !important;
}

@media (max-width: 767px) {
    .home-domain-search .input-group {
        flex-wrap: wrap !important;
    }
    
    .home-domain-search .input-group .form-control {
        min-width: 100% !important;
        margin-bottom: 10px !important;
    }
    
    .home-domain-search .input-group-append {
        width: 100% !important;
    }
    
    .home-domain-search .input-group-append .btn {
        flex: 1 !important;
    }
}

/* ============================================================
   FIX 6 & 7: LOGIN/REGISTRATION — HERO BACKGROUND
   ============================================================ */
body.login-page,
body[class*="login"] {
    background-color: #0D47A1 !important;
    background-image: url('../img/login-register-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-blend-mode: multiply !important;
    min-height: 100vh !important;
}

body.login-page::before,
body[class*="login"]::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(13,71,161,.88) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

body.login-page #main-body,
body[class*="login"] #main-body {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: calc(100vh - 120px) !important;
    position: relative !important;
    z-index: 1 !important;
}

.login-container {
    max-width: 480px !important;
    width: 100% !important;
    margin: 20px auto !important;
    padding: 40px 35px !important;
    background: rgba(255,255,255,.98) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 80px rgba(66,165,245,.3) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(66,165,245,.3) !important;
}

.login-container h1 {
    font-family: 'Orbitron', sans-serif !important;
    color: #0D47A1 !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    text-shadow: 0 2px 10px rgba(66,165,245,.3) !important;
}

body.register-page,
body[class*="register"] {
    background-color: #0D47A1 !important;
    background-image: url('../img/login-register-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-blend-mode: multiply !important;
    min-height: 100vh !important;
}

body.register-page::before,
body[class*="register"]::before {
    content: '' !important;
    position: fixed !important;
    inset: 0 !important;
    background: rgba(13,71,161,.88) !important;
    z-index: 0 !important;
    pointer-events: none !important;
}

body.register-page #main-body,
body[class*="register"] #main-body {
    position: relative !important;
    z-index: 1 !important;
    padding: 20px 10px !important;
}

.register-container {
    max-width: 900px !important;
    width: 100% !important;
    margin: 20px auto !important;
    padding: 40px 35px !important;
    background: rgba(255,255,255,.98) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 80px rgba(66,165,245,.3) !important;
    backdrop-filter: blur(10px) !important;
    border: 2px solid rgba(66,165,245,.3) !important;
}

/* ============================================================
   PHONE FIELD — NO FLAG
   ============================================================ */
.intl-tel-input .flag-container,
.iti__flag-container {
    display: none !important;
}

.intl-tel-input,
.iti {
    width: 100% !important;
}

input[name="phonenumber"],
input[type="tel"] {
    width: 100% !important;
    padding: 12px 14px !important;
    border: 2px solid #d0d0d0 !important;
    border-radius: 8px !important;
    font-size: .95rem !important;
    color: #333 !important;
    background: #fff !important;
}

/* ============================================================
   FORMS
   ============================================================ */
.form-group {
    margin-bottom: 18px !important;
}

.form-group label {
    display: block !important;
    margin-bottom: 6px !important;
    color: #333 !important;
    font-weight: 600 !important;
    font-size: .92rem !important;
}

.form-control {
    width: 100% !important;
    padding: 12px 14px !important;
    font-size: .95rem !important;
    color: #333 !important;
    background: #fff !important;
    border: 2px solid #d0d0d0 !important;
    border-radius: 8px !important;
    transition: border-color .2s !important;
}

.form-control:focus {
    border-color: #0D47A1 !important;
    box-shadow: 0 0 0 .2rem rgba(13,71,161,.15) !important;
    outline: none !important;
}

button[type="submit"],
.btn-primary {
    background: linear-gradient(135deg,#C62828,#E53935) !important;
    border: none !important;
    color: #fff !important;
    border-radius: 50px !important;
    padding: 14px 36px !important;
    font-weight: 700 !important;
    font-size: 1.05rem !important;
    transition: all .3s !important;
    box-shadow: 0 4px 12px rgba(198,40,40,.4) !important;
}

button[type="submit"]:hover,
.btn-primary:hover {
    background: linear-gradient(135deg,#B71C1C,#C62828) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(198,40,40,.5) !important;
}

/* ============================================================
   FIX 2: DASHBOARD WELCOME — HERO IMAGE + BLUE OVERLAY
   ============================================================ */
.dash-welcome {
    background-color: #0D47A1 !important;
    background-image: url('../img/login-register-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-blend-mode: multiply !important;
    position: relative !important;
    padding: 30px 25px !important;
    border-radius: 12px !important;
    margin: 0 0 5px 0 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.15) !important;
    overflow: hidden !important;
}

.dash-welcome::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(13,71,161,.85) !important;
    z-index: 0 !important;
}

.dash-welcome > * {
    position: relative !important;
    z-index: 1 !important;
}

.dash-welcome h1,
.dash-welcome p,
.dash-welcome * {
    color: #ffffff !important;
}

.dash-welcome h1 {
    font-family: 'Orbitron', sans-serif !important;
    font-size: 2rem !important;
    margin-bottom: 10px !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
}

/* Dashboard sections */
.dash-section {
    margin-bottom: 5px !important;
}

.dash-section-title {
    background: linear-gradient(135deg, #0D47A1, #1565C0) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 14px 20px !important;
    border-radius: 10px 10px 0 0 !important;
}

.dash-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    gap: 5px !important;
}

/* ============================================================
   FIX 3 & 4: WALLET PAGE
   ============================================================ */
.wallet-card {
    background-color: #0D47A1 !important;
    background-image: url('../img/wallet-card-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-blend-mode: multiply !important;
    border-radius: 20px !important;
    padding: 30px 35px !important;
    margin: 0 0 25px 0 !important;
    box-shadow: 0 10px 40px rgba(13,71,161,.3) !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 220px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.wallet-card::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(13,71,161,.75), rgba(21,101,192,.65)) !important;
    z-index: 0 !important;
}

.wallet-card > * {
    position: relative !important;
    z-index: 1 !important;
}

.wallet-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 30px !important;
}

.wallet-card-logo {
    width: 180px !important;
    height: 60px !important;
    background-image: url('../img/wallet-logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
}

.wallet-card-chip {
    width: 50px !important;
    height: 40px !important;
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    border-radius: 8px !important;
}

.wallet-balance-label {
    font-size: .85rem !important;
    color: rgba(255,255,255,.8) !important;
    margin-bottom: 5px !important;
}

.wallet-balance-amount {
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    font-family: 'Orbitron', sans-serif !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.5) !important;
}

.wallet-card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
}

.wallet-holder-label {
    font-size: .7rem !important;
    color: rgba(255,255,255,.7) !important;
    margin-bottom: 3px !important;
}

.wallet-holder-name {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
}

.wallet-card-company {
    width: 140px !important;
    height: 50px !important;
    background-image: url('../img/wallet-logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
}

/* 4 wallet action tabs */
.wallet-actions {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 25px !important;
}

@media (max-width: 767px) {
    .wallet-actions {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

.wallet-action-btn {
    background: linear-gradient(135deg, #C62828, #E53935) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 12px !important;
    font-weight: 700 !important;
    font-size: .9rem !important;
    text-align: center !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    transition: all .3s !important;
    min-height: 80px !important;
}

.wallet-action-btn:hover {
    background: linear-gradient(135deg, #B71C1C, #C62828) !important;
    transform: translateY(-3px) !important;
    color: #ffffff !important;
}

.wallet-action-btn i {
    font-size: 1.6rem !important;
}

.wallet-transactions {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
}

.wallet-transactions h3 {
    font-family: 'Orbitron', sans-serif !important;
    color: #0D47A1 !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* ============================================================
   FIX 5: MOBILE FOOTER — HOME + LOGIN/LOGOUT RIGHT, BOLD
   ============================================================ */
.mobile-footer-nav {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(90deg,#0D47A1,#1565C0) !important;
    border-top: 3px solid #C62828 !important;
    z-index: 9999 !important;
    padding: 6px 0 !important;
    display: none !important;
}

.mobile-footer-nav .nav {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 8px !important;
}

.mobile-footer-nav .nav-item {
    flex: 1 !important;
    text-align: center !important;
}

.mobile-footer-nav .nav-link {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    color: #ffffff !important;
    font-size: .72rem !important;
    font-weight: 700 !important;
    padding: 4px !important;
    text-decoration: none !important;
}

.mobile-footer-nav .nav-link i {
    font-size: 1.3rem !important;
    margin-bottom: 2px !important;
}

.mobile-footer-nav .nav-link.active,
.mobile-footer-nav .nav-link.active i {
    color: #C62828 !important;
}

@media (max-width: 991px) {
    .mobile-footer-nav {
        display: block !important;
    }
    
    body {
        padding-bottom: 60px !important;
    }
}

/* ============================================================
   FIX 8: INVOICE LOGO
   ============================================================ */
.invoice-logo img {
    content: url('../img/invoice-logo.png') !important;
    max-height: 80px !important;
    width: auto !important;
}

/* ============================================================
   TABLES
   ============================================================ */
.table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

.table > thead > tr > th {
    background: linear-gradient(135deg,#0D47A1,#1565C0) !important;
    color: #fff !important;
    padding: 10px 8px !important;
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
    min-height: 480px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 50px 15px !important;
}

.hero-section::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(13,71,161,.76), rgba(21,101,192,.63)) !important;
    z-index: 0 !important;
}

.hero-content {
    position: relative !important;
    z-index: 1 !important;
}

.hero-title {
    font-family: 'Orbitron', sans-serif !important;
    font-size: clamp(1.5rem, 5vw, 3.2rem) !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 15px !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.4) !important;
}

.hero-cta {
    display: inline-block !important;
    background: linear-gradient(135deg,#C62828,#E53935) !important;
    color: #fff !important;
    padding: 14px 40px !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    box-shadow: 0 5px 20px rgba(198,40,40,.4) !important;
}

/* ============================================================
   HOSTING PLANS
   ============================================================ */
.plans-grid {
    display: grid !important;
    grid-template-columns: repeat(3,1fr) !important;
    gap: 18px !important;
}

@media (max-width: 991px) {
    .plans-grid {
        grid-template-columns: repeat(2,1fr) !important;
    }
}

@media (max-width: 640px) {
    .plans-grid {
        grid-template-columns: 1fr !important;
    }
}

.plan-card {
    background: #fff !important;
    border: 1px solid #ddd !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.07) !important;
}

.plan-card .plan-header {
    background: linear-gradient(135deg,#0D47A1,#1565C0) !important;
    padding: 25px 15px !important;
    text-align: center !important;
}

.plan-card .plan-header * {
    color: #fff !important;
}

.plan-button {
    display: block !important;
    width: 100% !important;
    padding: 12px 24px !important;
    background: linear-gradient(135deg,#C62828,#E53935) !important;
    color: #fff !important;
    text-align: center !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    border: none !important;
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
    background: #fff !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.07) !important;
}

.sidebar .panel-heading,
.sidebar .card-header {
    background: linear-gradient(135deg,#0D47A1,#1565C0) !important;
    color: #fff !important;
    font-weight: 700 !important;
    padding: 11px 14px !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
    background-color: #0D47A1 !important;
    background-image: url('../img/footer-hero-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-blend-mode: multiply !important;
    padding: 35px 15px !important;
}

.footer::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: rgba(13,71,161,.82) !important;
    z-index: 0 !important;
}

.footer > * {
    position: relative !important;
    z-index: 1 !important;
}

.footer,
.footer * {
    color: #fff !important;
}

/* Remove WHMCS branding */
a[href*="whmcs.com"],
.whmcs-logo {
    display: none !important;
}

/* ============================================================
   VERSION 5 ADDITIONS
   - Wallet page styling fixes
   - Mobile nav: white text, red active
   ============================================================ */

/* Force wallet page to display properly */
body[class*="addfunds"],
.addfunds-page,
.wallet-page {
    background: #f5f8ff !important;
}

/* Wallet card - ensure it displays */
.wallet-card,
.credit-card-display {
    display: flex !important;
    background-color: #0D47A1 !important;
    background-image: url('../img/wallet-card-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-blend-mode: multiply !important;
    border-radius: 20px !important;
    padding: 30px 35px !important;
    margin: 0 0 25px 0 !important;
    box-shadow: 0 10px 40px rgba(13,71,161,.3), 0 0 80px rgba(66,165,245,.2) !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 220px !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

.wallet-card::before,
.credit-card-display::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(135deg, rgba(13,71,161,.75), rgba(21,101,192,.65)) !important;
    z-index: 0 !important;
}

.wallet-card > *,
.credit-card-display > * {
    position: relative !important;
    z-index: 1 !important;
}

.wallet-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 30px !important;
}

.wallet-card-logo {
    width: 180px !important;
    height: 60px !important;
    background-image: url('../img/wallet-logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left center !important;
}

.wallet-card-chip {
    width: 50px !important;
    height: 40px !important;
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
}

.wallet-balance-display {
    margin-bottom: 25px !important;
}

.wallet-balance-label {
    font-size: .85rem !important;
    color: rgba(255,255,255,.8) !important;
    margin-bottom: 5px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.wallet-balance-amount {
    font-size: 3rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.5) !important;
    font-family: 'Orbitron', sans-serif !important;
}

.wallet-card-footer {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-end !important;
}

.wallet-card-holder {
    display: flex !important;
    flex-direction: column !important;
}

.wallet-holder-label {
    font-size: .7rem !important;
    color: rgba(255,255,255,.7) !important;
    margin-bottom: 3px !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
}

.wallet-holder-name {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.wallet-card-company {
    width: 140px !important;
    height: 50px !important;
    background-image: url('../img/wallet-logo.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
}

/* Wallet actions - 4 tabs */
.wallet-actions {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin-bottom: 25px !important;
}

@media (max-width: 767px) {
    .wallet-card,
    .credit-card-display {
        padding: 25px 20px !important;
        min-height: 200px !important;
    }
    
    .wallet-balance-amount {
        font-size: 2.2rem !important;
    }
    
    .wallet-actions {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

.wallet-action-btn {
    background: linear-gradient(135deg, #C62828, #E53935) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px 12px !important;
    font-weight: 700 !important;
    font-size: .9rem !important;
    text-align: center !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    transition: all .3s !important;
    box-shadow: 0 3px 10px rgba(198,40,40,.3) !important;
    min-height: 80px !important;
}

.wallet-action-btn:hover {
    background: linear-gradient(135deg, #B71C1C, #C62828) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 6px 16px rgba(198,40,40,.4) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.wallet-action-btn i {
    font-size: 1.6rem !important;
}

.wallet-action-btn span {
    font-size: .85rem !important;
    line-height: 1.2 !important;
}

/* Wallet transactions */
.wallet-transactions {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
    margin-bottom: 20px !important;
}

.wallet-transactions h3 {
    font-family: 'Orbitron', sans-serif !important;
    color: #0D47A1 !important;
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin-bottom: 20px !important;
}

/* MOBILE NAV FIX: White text, red active */
.mobile-footer-nav .nav-link {
    color: #ffffff !important;
}

.mobile-footer-nav .nav-link i,
.mobile-footer-nav .nav-link span {
    color: #ffffff !important;
}

.mobile-footer-nav .nav-link.active,
.mobile-footer-nav .nav-link.active i,
.mobile-footer-nav .nav-link.active span {
    color: #C62828 !important;
}

.mobile-footer-nav .nav-link:hover i,
.mobile-footer-nav .nav-link:hover span {
    color: #ffcdd2 !important;
}

/* ============================================================
   VERSION 6 CRITICAL FIXES
   - Force wallet page to display
   - Keep sidebar titles WHITE
   - Keep mobile footer text WHITE
   ============================================================ */

/* FORCE WALLET PAGE TO DISPLAY */
body[class*="addfunds"] .wallet-card,
body[class*="addfunds"] .wallet-actions,
body[class*="addfunds"] .wallet-transactions,
.addfunds-page .wallet-card,
.addfunds-page .wallet-actions,
.addfunds-page .wallet-transactions {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.wallet-card {
    display: flex !important;
    visibility: visible !important;
}

.wallet-actions {
    display: grid !important;
    visibility: visible !important;
}

/* Ensure wallet card is always visible */
.wallet-card,
.credit-card-display {
    background-color: #0D47A1 !important;
    background-image: url('../img/wallet-card-bg.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-blend-mode: multiply !important;
    border-radius: 20px !important;
    padding: 30px 35px !important;
    margin: 20px 0 25px 0 !important;
    box-shadow: 0 10px 40px rgba(13,71,161,.3), 0 0 80px rgba(66,165,245,.2) !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 220px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
}

/* KEEP SIDEBAR TITLES WHITE */
.sidebar .panel-heading,
.sidebar .card-header,
.sidebar ul > li.header {
    background: linear-gradient(135deg,#0D47A1,#1565C0) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding: 11px 14px !important;
}

.sidebar .panel-heading *,
.sidebar .card-header *,
.sidebar ul > li.header * {
    color: #ffffff !important;
}

/* KEEP MOBILE FOOTER TEXT WHITE */
.mobile-footer-nav .nav-link {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.mobile-footer-nav .nav-link i,
.mobile-footer-nav .nav-link span {
    color: #ffffff !important;
}

.mobile-footer-nav .nav-link.active,
.mobile-footer-nav .nav-link.active i,
.mobile-footer-nav .nav-link.active span {
    color: #C62828 !important;
}

/* Container for wallet page */
body[class*="addfunds"] .container,
.addfunds-page .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 20px 10px !important;
}

/* ============================================================
   VERSION 6.1 SPECIFIC UPDATES
   - 2px margins desktop, 1px mobile
   - Company name as text instead of logo image
   ============================================================ */

/* Wallet page wrapper - 2px margins desktop */
.wallet-page-wrapper,
body[class*="addfunds"] .container,
.addfunds-page .container {
    padding: 2px !important;
    margin: 0 auto !important;
}

/* Mobile - 1px margins */
@media (max-width: 767px) {
    .wallet-page-wrapper,
    body[class*="addfunds"] .container,
    .addfunds-page .container {
        padding: 1px !important;
    }
}

/* All wallet elements - 2px margins */
.wallet-card,
.wallet-actions,
.wallet-transactions {
    margin: 2px 0 !important;
}

/* Mobile - 1px margins */
@media (max-width: 767px) {
    .wallet-card,
    .wallet-actions,
    .wallet-transactions {
        margin: 1px 0 !important;
    }
}

/* Company name text styling (replaces logo image) */
.wallet-card-logo {
    width: auto !important;
    max-width: 200px !important;
    height: auto !important;
    min-height: 40px !important;
    background-image: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,.4) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* If company field is empty, hide the logo area completely */
.wallet-card-logo:empty {
    display: none !important;
    width: 0 !important;
    min-height: 0 !important;
}

@media (max-width: 767px) {
    .wallet-card-logo {
        font-size: 1.1rem !important;
        max-width: 150px !important;
    }
}

/* Adjust card padding for tighter margins */
.wallet-card {
    padding: 25px 30px !important;
}

@media (max-width: 767px) {
    .wallet-card {
        padding: 20px 15px !important;
    }
}

/* ============================================================
   VERSION 6.2 SPECIFIC FIXES
   1. Remove logo image completely - show only company text
   2. Display balance amount in white bold
   ============================================================ */

/* REMOVE LOGO IMAGE - Company name only as text */
.wallet-company-name-only {
    width: auto !important;
    max-width: 250px !important;
    height: auto !important;
    min-height: 30px !important;
    background-image: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Hide if empty */
.wallet-company-name-only:empty {
    display: none !important;
    width: 0 !important;
    min-height: 0 !important;
}

@media (max-width: 767px) {
    .wallet-company-name-only {
        font-size: 1.2rem !important;
        max-width: 180px !important;
    }
}

/* BALANCE AMOUNT - White and Bold */
.wallet-balance-amount {
    font-size: 3.2rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 3px 15px rgba(0,0,0,.6) !important;
    font-family: 'Orbitron', sans-serif !important;
    letter-spacing: 2px !important;
    margin-bottom: 5px !important;
}

@media (max-width: 767px) {
    .wallet-balance-amount {
        font-size: 2.5rem !important;
    }
}

/* Ensure no logo images appear anywhere on wallet card */
.wallet-card-logo {
    background-image: none !important;
}

/* Remove any logo styling that might have background images */
.wallet-card img,
.wallet-card-header img {
    display: none !important;
}