/* 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: calc(100% - 70px) !important;
    height: auto !important;
    min-height: 30px !important;
    background-image: none !important;
    background: transparent !important;
    display: block !important;
    font-family: 'Orbitron', sans-serif !important;
    font-size: 1rem !important;           /* fixed size — never scales up */
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    white-space: normal !important;
    overflow: visible !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding-right: 10px !important;
}

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

/* Card header — flex, no overflow clip */
.wallet-card-header,
.credit-card-display .wallet-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 10px !important;
    flex-wrap: nowrap !important;
    margin-bottom: 16px !important;
    overflow: visible !important;         /* never clip the name */
}

/* Wallet card itself — allow height to grow for long names */
.wallet-card,
.credit-card-display {
    overflow: visible !important;         /* override the overflow:hidden */
    min-height: 200px !important;
}

/* Chip stays fixed size, never shrinks */
.wallet-card-chip {
    flex-shrink: 0 !important;
    width: 46px !important;
    height: 36px !important;
    background: linear-gradient(135deg, #FFD700, #FFA500) !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.3) !important;
    margin-top: 2px !important;
}

@media (max-width: 767px) {
    .wallet-company-name-only {
        font-size: 0.82rem !important;
        letter-spacing: 0.3px !important;
        max-width: calc(100% - 56px) !important;
    }
    .wallet-card-chip {
        width: 38px !important;
        height: 30px !important;
    }
}

/* Card number display at bottom */
.wallet-card-number-display {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    color: rgba(255,255,255,0.75) !important;
}
.wallet-dots {
    font-size: 1rem !important;
    letter-spacing: 3px !important;
    color: rgba(255,255,255,0.75) !important;
}
.wallet-acct-id {
    font-size: 0.75rem !important;
    color: rgba(255,255,255,0.6) !important;
    font-family: 'Orbitron', sans-serif !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;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2 !important;
}

.wallet-balance-display {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 2 !important;
    margin-bottom: 20px !important;
}

@media (max-width: 767px) {
    .wallet-balance-amount {
        font-size: 2.2rem !important;
        letter-spacing: 1px !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;
}

/* ============================================================
   GLOBAL SELECT / DROPDOWN FIX
   Applies to ALL pages — mobile and desktop
   ============================================================ */

/* Base select styling — all platforms */
select,
select.form-control,
.form-control[multiple],
.form-select,
select[class*="form-"],
.select-inline {
    width: 100% !important;
    padding: 10px 36px 10px 14px !important;
    font-size: 0.95rem !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 600 !important;
    color: #1a1a1a !important;
    background-color: #ffffff !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 fill='%230D47A1' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 12px 8px !important;
    border: 2px solid #d0d0d0 !important;
    border-radius: 8px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    line-height: 1.4 !important;
    min-height: 46px !important;
    display: block !important;
    box-shadow: none !important;
}

select:focus,
select.form-control:focus,
.form-select:focus {
    border-color: #0D47A1 !important;
    box-shadow: 0 0 0 3px rgba(13,71,161,0.15) !important;
    outline: none !important;
    color: #1a1a1a !important;
    background-color: #ffffff !important;
}

/* Option items — ensure text is always visible */
select option,
select.form-control option,
.form-select option {
    color: #1a1a1a !important;
    background-color: #ffffff !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
    line-height: 1.5 !important;
}

select option:checked,
select option:hover,
select option:focus,
select option:active {
    color: #ffffff !important;
    background-color: #0D47A1 !important;
    background: linear-gradient(#0D47A1, #0D47A1) !important;
}

select option[disabled],
select option:disabled {
    color: #999999 !important;
    background-color: #f5f5f5 !important;
    font-style: italic !important;
}

/* Mobile-specific select improvements */
@media (max-width: 767px) {
    select,
    select.form-control,
    .form-select,
    .select-inline {
        font-size: 16px !important; /* prevents iOS zoom on focus */
        min-height: 50px !important;
        padding: 12px 40px 12px 14px !important;
        -webkit-appearance: none !important;
        background-position: right 14px center !important;
    }
    
    select option {
        font-size: 16px !important;
        padding: 10px 14px !important;
    }
}

/* Input group selects */
.input-group select,
.input-group .form-control[multiple] {
    border-radius: 0 8px 8px 0 !important;
}

/* Form group label + select spacing */
.form-group label {
    font-weight: 700 !important;
    color: #333333 !important;
    margin-bottom: 6px !important;
    display: block !important;
    font-size: 0.9rem !important;
}

/* All text inputs consistent with selects */
input.form-control,
textarea.form-control {
    min-height: 46px !important;
}

@media (max-width: 767px) {
    input.form-control,
    textarea.form-control {
        font-size: 16px !important; /* prevents iOS auto-zoom */
        min-height: 50px !important;
    }
}



/* ============================================================
   GLOBAL MODAL FIX — v3 (Bootstrap-compatible, scroll-safe)
   Fixes: language/currency chooser, cart confirm, AJAX modals
   ALL popups across the entire platform
   ============================================================ */

/* ── 1. BODY — never lock page scroll when modal opens ── */
html.modal-open,
body.modal-open {
    overflow: auto !important;
    height: auto !important;
    padding-right: 0 !important;
}

/* ── 2. BACKDROP ── */
.modal-backdrop { background-color: #000 !important; }
.modal-backdrop.show,
.modal-backdrop.in { opacity: 0.5 !important; }

/* ── 3. MODAL WRAPPER
   Only add layout when Bootstrap has actually opened the modal (.show).
   NEVER set display on a closed modal — that invisible overlay blocks
   all page scrolling and click interaction.
── */
.modal {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 2050 !important;
}
.modal.show {
    display: block !important;
    padding-top: 30px !important;
    padding-bottom: 30px !important;
}

/* ── 4. MODAL DIALOG — centered, viewport-capped ── */
.modal-dialog {
    margin: 0 auto !important;
    max-width: min(560px, 94vw) !important;
    width: 100% !important;
    /* Use scrollable pattern: make dialog flex column with max-height */
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 60px) !important;
    pointer-events: none !important;
}
.modal-dialog.modal-lg {
    max-width: min(700px, 94vw) !important;
}
.modal-dialog.modal-sm {
    max-width: min(380px, 94vw) !important;
}

/* ── 5. MODAL CONTENT — flex column, inner scroll ── */
.modal-content {
    pointer-events: all !important;
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 60px) !important;
    overflow: hidden !important;              /* children scroll, not this */
    border-radius: 14px !important;
    border: none !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.45) !important;
    background: #ffffff !important;
}

/* Standard Bootstrap modal-header (used in AJAX modal etc.) */
.modal-content > .modal-header {
    flex-shrink: 0 !important;
    background: linear-gradient(135deg,#0D47A1,#1565C0) !important;
    border-bottom: none !important;
    border-radius: 14px 14px 0 0 !important;
    padding: 14px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.modal-content > .modal-header .modal-title,
.modal-content > .modal-header h4,
.modal-content > .modal-header h5 {
    color: #fff !important;
    font-family: 'Orbitron',sans-serif !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
}
.modal-content > .modal-header .close {
    color: #fff !important;
    opacity: 0.85 !important;
    text-shadow: none !important;
    font-size: 1.5rem !important;
    padding: 0 0 0 10px !important;
    margin: 0 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
}
.modal-content > .modal-header .close:hover { opacity: 1 !important; }

/* Standard modal-body — scrollable */
.modal-content > .modal-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 20px 18px !important;
    color: #222 !important;
    min-height: 0 !important;
}

/* Standard modal-footer — pinned bottom */
.modal-content > .modal-footer {
    flex-shrink: 0 !important;
    border-top: 1px solid #e8e8e8 !important;
    border-radius: 0 0 14px 14px !important;
    background: #f7f7f7 !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
    min-height: 0 !important;
}

/* Generic modal buttons */
.modal-footer .btn,
.modal-body > .btn {
    border-radius: 50px !important;
    padding: 9px 22px !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    min-width: 90px !important;
    min-height: 40px !important;
    border: none !important;
}
.modal-footer .btn-default,
.modal-footer .btn-secondary {
    background: #e8e8e8 !important;
    color: #333 !important;
}
.modal-footer .btn-primary {
    background: linear-gradient(135deg,#C62828,#E53935) !important;
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════════
   LANGUAGE / CURRENCY CHOOSER — #modalChooseLanguage
   Custom iglobe-* classes applied in footer.tpl restructure
   ═══════════════════════════════════════════════════════════════ */

/* The modal-content uses our custom flex layout class */
#modalChooseLanguage .iglobe-modal-flex {
    display: flex !important;
    flex-direction: column !important;
    max-height: calc(100vh - 60px) !important;
    overflow: hidden !important;
    border-radius: 14px !important;
}

/* HEADER — always visible, pinned, never scrolls */
#modalChooseLanguage .iglobe-modal-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-shrink: 0 !important;
    background: linear-gradient(135deg, #0D47A1, #1565C0) !important;
    padding: 14px 18px !important;
    border-radius: 14px 14px 0 0 !important;
    min-height: 56px !important;
}
#modalChooseLanguage .iglobe-modal-head-title {
    color: #ffffff !important;
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    letter-spacing: 0.5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

/* CLOSE BUTTON — always in header, always visible */
#modalChooseLanguage .iglobe-modal-close {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.15) !important;
    border: 1.5px solid rgba(255,255,255,0.4) !important;
    color: #ffffff !important;
    font-size: 1.3rem !important;
    line-height: 1 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all .2s !important;
    padding: 0 !important;
    text-shadow: none !important;
    opacity: 1 !important;
    outline: none !important;
}
#modalChooseLanguage .iglobe-modal-close:hover {
    background: rgba(255,255,255,0.3) !important;
    border-color: rgba(255,255,255,0.7) !important;
    transform: scale(1.1) !important;
}

/* BODY — THIS IS THE SCROLLABLE ZONE */
#modalChooseLanguage .iglobe-modal-scroll-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;             /* ← the key scroll fix */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    padding: 18px 16px 10px !important;
    min-height: 0 !important;               /* ← required for flex child scroll */
}

/* Section label inside body */
#modalChooseLanguage .iglobe-modal-section-label {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700 !important;
    font-size: 0.82rem !important;
    color: #0D47A1 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin: 0 0 12px 0 !important;
    padding: 0 0 8px 0 !important;
    border-bottom: 2px solid #e3f2fd !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
#modalChooseLanguage .iglobe-modal-section-label + .iglobe-item-grid {
    margin-bottom: 20px !important;
}

/* Language / currency option buttons */
#modalChooseLanguage .iglobe-lang-item {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 10px 6px !important;
    margin-bottom: 8px !important;
    min-height: 42px !important;
    border-radius: 8px !important;
    border: 1.5px solid #dce8ff !important;
    background: #f4f8ff !important;
    color: #333333 !important;
    font-size: 0.83rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all .18s !important;
    line-height: 1.3 !important;
    word-break: break-word !important;
}
#modalChooseLanguage .iglobe-lang-item:hover {
    background: #1565C0 !important;
    color: #ffffff !important;
    border-color: #1565C0 !important;
    text-decoration: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 3px 10px rgba(13,71,161,.25) !important;
}
#modalChooseLanguage .iglobe-lang-item.active {
    background: #0D47A1 !important;
    color: #ffffff !important;
    border-color: #0D47A1 !important;
    box-shadow: 0 2px 8px rgba(13,71,161,.35) !important;
}

/* FOOTER — always visible, pinned bottom */
#modalChooseLanguage .iglobe-modal-foot {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    flex-shrink: 0 !important;
    padding: 12px 16px !important;
    border-top: 1px solid #e8eaf6 !important;
    background: #f9faff !important;
    border-radius: 0 0 14px 14px !important;
    min-height: 0 !important;
}

.iglobe-btn-cancel {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 20px !important;
    border-radius: 50px !important;
    border: 1.5px solid #ccc !important;
    background: #eeeeee !important;
    color: #555 !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    cursor: pointer !important;
    min-height: 42px !important;
    transition: all .18s !important;
}
.iglobe-btn-cancel:hover {
    background: #e0e0e0 !important;
    color: #222 !important;
}

.iglobe-btn-apply {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 10px 24px !important;
    border-radius: 50px !important;
    border: none !important;
    background: linear-gradient(135deg, #0D47A1, #1565C0) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    cursor: pointer !important;
    min-height: 42px !important;
    box-shadow: 0 3px 12px rgba(13,71,161,.35) !important;
    transition: all .18s !important;
}
.iglobe-btn-apply:hover {
    background: linear-gradient(135deg, #0a3880, #0D47A1) !important;
    box-shadow: 0 5px 16px rgba(13,71,161,.45) !important;
    transform: translateY(-1px) !important;
}

/* ── MOBILE ─────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .modal.show {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        /* Slide up as a bottom sheet when open */
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
    }
    .modal-dialog {
        max-width: 100vw !important;
        width: 100vw !important;
        margin: 0 !important;
        max-height: 88vh !important;
        max-height: 88dvh !important;
    }
    .modal-content,
    #modalChooseLanguage .iglobe-modal-flex {
        border-radius: 20px 20px 0 0 !important;
        max-height: 88vh !important;
        max-height: 88dvh !important;
    }
    #modalChooseLanguage .iglobe-modal-head {
        border-radius: 20px 20px 0 0 !important;
    }
    /* 2-col grid on phone */
    #modalChooseLanguage .iglobe-item-grid .col-6,
    #modalChooseLanguage .iglobe-item-grid .col-sm-4,
    #modalChooseLanguage .iglobe-item-grid .col-md-3 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    /* Stack footer buttons */
    #modalChooseLanguage .iglobe-modal-foot {
        flex-direction: column-reverse !important;
        padding: 10px 12px max(12px, env(safe-area-inset-bottom)) !important;
    }
    .iglobe-btn-apply,
    .iglobe-btn-cancel {
        width: 100% !important;
        justify-content: center !important;
        min-height: 50px !important;
        font-size: 1rem !important;
    }
    /* Generic modal footer stack */
    .modal-content > .modal-footer {
        flex-direction: column-reverse !important;
        align-items: stretch !important;
    }
    .modal-footer .btn {
        width: 100% !important;
        min-height: 50px !important;
        font-size: 0.95rem !important;
    }
}

/* ── TABLET ── */
@media (min-width: 576px) and (max-width: 991px) {
    .modal-dialog { max-width: min(540px, 94vw) !important; }
    #modalChooseLanguage .modal-dialog { max-width: min(640px, 94vw) !important; }
}