/* ============================================================
   EINHOST.RO — CS:GO DARK GAMING THEME
   WHMCS Twenty-One — Complete Custom Stylesheet
   v4.0 — Full theme, all components covered
   ============================================================ */

/* ── FONTS ─────────────────────────────────────────────────── */
/* Loaded via head.tpl via Google Fonts */

/* ── CSS VARIABLE OVERRIDES ────────────────────────────────── */
html { font-size: 14px; }

:root {
    /* Override WHMCS Twenty-One variables */
    --white: #ffffff;
    --neutral-50:  #c7d5e0; --neutral-100: #8f98a0; --neutral-200: #67707b;
    --neutral-300: #3d4450; --neutral-400: #2a475e; --neutral-500: #1e2328;
    --neutral-600: #1b2838; --neutral-700: #171a21; --neutral-800: #131720;
    --neutral-900: #0d1117; --neutral-950: #0a0d12;
    --primary: #de9b35;         --primary-lifted: #c4872a;    --primary-accented: #a87020;
    --secondary: #2a475e;       --secondary-lifted: #1e2328;  --secondary-accented: #171a21;
    --success: #5ba32b;         --success-lifted: #4a8a22;    --success-accented: #3a7019;
    --info: #de9b35;            --info-lifted: #c4872a;       --info-accented: #a87020;
    --notice: #de9b35;          --notice-lifted: #c4872a;     --notice-accented: #a87020;
    --warning: #e8a94a;         --warning-lifted: #de9b35;    --warning-accented: #c4872a;
    --error: #cd4545;           --error-lifted: #b33333;      --error-accented: #992222;
    --grayscale: #3d4450;       --grayscale-lifted: #2a475e;  --grayscale-accented: #1e2328;
    --text-inverted: #171a21; --text-muted: #67707b; --text-lifted: #8f98a0;
    --text-accented: #c7d5e0; --text: #c7d5e0;
    --border-muted: rgba(222,155,53,.1); --border: rgba(222,155,53,.2);
    --border-lifted: rgba(222,155,53,.35); --border-accented: rgba(222,155,53,.5);
    --bg: #171a21; --bg-muted: #1b2838; --bg-lifted: #1e2328;
    --bg-accented: #2a475e; --bg-inverted: #c7d5e0;
    --rounding-sm: 3px; --rounding-md: 5px; --rounding-lg: 8px;

    /* EinHost theme tokens */
    --eh-bg:        #171a21;
    --eh-bg2:       #1b2838;
    --eh-bg3:       #1e2328;
    --eh-card:      rgba(13,16,22,.96);
    --eh-card2:     rgba(19,27,38,.9);
    --eh-border:    rgba(222,155,53,.18);
    --eh-border2:   rgba(222,155,53,.35);
    --eh-orange:    #de9b35;
    --eh-orange2:   #f0b04a;
    --eh-orange3:   #c4872a;
    --eh-text:      #c7d5e0;
    --eh-muted:     #8f98a0;
    --eh-dim:       #67707b;
    --eh-dark:      #3d4450;
    --eh-green:     #5ba32b;
    --eh-red:       #cd4545;
    --eh-font:      'Rajdhani', -apple-system, sans-serif;
    --eh-font-h:    'Teko', 'Rajdhani', sans-serif;
    --eh-font-d:    'Bebas Neue', 'Teko', sans-serif;
}

/* ── RESET & BASE ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html, body, .primary-bg-color {
    background: var(--eh-bg) !important;
    color: var(--eh-text) !important;
}

body {
    font-family: var(--eh-font) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    line-height: 1.6 !important;
    background: var(--eh-bg) !important;
    background-image:
        radial-gradient(ellipse at 15% 0%, rgba(94,80,42,.28) 0%, transparent 45%),
        radial-gradient(ellipse at 85% 100%, rgba(42,71,94,.18) 0%, transparent 45%),
        linear-gradient(180deg, #171a21 0%, #1b2838 100%) !important;
    background-attachment: fixed !important;
    -webkit-font-smoothing: antialiased !important;
}

/* CS:GO Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0d12; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--eh-orange), var(--eh-orange3)); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--eh-orange2); }
* { scrollbar-width: thin; scrollbar-color: var(--eh-orange) #0a0d12; }

/* Typography */
html body a { color: var(--eh-muted); transition: color .2s; }
html body a:hover { color: var(--eh-orange) !important; text-decoration: none; }
html body h1, html body h2, html body h3, html body h4, html body h5, html body h6 {
    font-family: var(--eh-font-h) !important; letter-spacing: 1px; color: #fff !important;
}
html body p { color: var(--eh-text); }
html body small, html body .small { color: var(--eh-dim) !important; }
html body .text-muted { color: var(--eh-dim) !important; }
html body .text-primary { color: var(--eh-orange) !important; }
html body .text-success { color: var(--eh-green) !important; }
html body .text-danger  { color: var(--eh-red) !important; }

/* ── NUCLEAR BG OVERRIDES ───────────────────────────────────── */
html body .bg-white,
html body .bg-light,
html body .einhost-bg-dark,
html body .einhost-bg-muted,
html body .einhost-card-dark { background: var(--eh-card) !important; color: var(--eh-text) !important; }

html body .bg-primary { background: var(--eh-orange) !important; color: #171a21 !important; }
html body .bg-dark { background: var(--eh-bg) !important; }

html body .landing-page, html body .landing-page.einhost-bg-dark { background: transparent !important; }
html body .tab-content, html body .store-domain-tab-content { background: transparent !important; }

/* ── HEADER COMPONENTS ──────────────────────────────────────── */
html body #header {
    background: linear-gradient(180deg, rgba(8,10,16,.98) 0%, rgba(18,21,28,.97) 100%) !important;
    border-bottom: 1px solid var(--eh-border) !important;
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    position: sticky; top: 0; z-index: 1040;
    box-shadow: 0 2px 20px rgba(0,0,0,.5);
}

/* Topbar */
html body .einhost-topbar-btn {
    font-family: var(--eh-font) !important; font-weight: 600; font-size: .8rem;
    color: var(--eh-dim) !important; padding: .25rem .6rem;
    background: transparent !important; border: none !important;
    transition: color .2s;
}
html body .einhost-topbar-btn:hover { color: var(--eh-orange) !important; }

html body .einhost-topbar-label {
    display: inline-flex; align-items: center;
    background: rgba(10,13,19,.6) !important;
    border: 1px solid var(--eh-border) !important;
    border-right: none !important;
    color: var(--eh-dim) !important;
    font-family: var(--eh-font); font-size: .78rem; font-weight: 600;
    letter-spacing: .4px; padding: .25rem .75rem;
    border-radius: 4px 0 0 4px;
}

html body .einhost-user-btn {
    font-family: var(--eh-font) !important; font-weight: 600; font-size: .82rem;
    color: var(--eh-text) !important;
    background: rgba(222,155,53,.1) !important;
    border: 1px solid var(--eh-border) !important;
    border-radius: 0 !important; padding: .25rem .75rem;
    transition: all .2s;
}
html body .einhost-user-btn:hover { color: var(--eh-orange) !important; background: rgba(222,155,53,.18) !important; }

html body .einhost-icon-btn {
    background: rgba(42,71,94,.3) !important; border: 1px solid var(--eh-border) !important;
    color: var(--eh-dim) !important; border-radius: 0 4px 4px 0 !important; padding: .25rem .5rem;
}
html body .einhost-icon-btn:hover { color: var(--eh-orange) !important; }

html body .einhost-admin-btn {
    background: rgba(205,69,69,.15) !important; border: 1px solid rgba(205,69,69,.4) !important;
    color: #e07070 !important; font-family: var(--eh-font-h) !important;
    letter-spacing: 1px; font-size: .82rem; text-transform: uppercase; border-radius: 4px !important; padding: .25rem .6rem;
}
html body .einhost-admin-btn:hover { background: rgba(205,69,69,.28) !important; color: #fff !important; }

html body .einhost-admin-fixed {
    position: fixed !important; bottom: 1rem !important; right: 1rem !important;
    background: rgba(205,69,69,.18) !important; border: 1px solid rgba(205,69,69,.45) !important;
    color: #e07070 !important; border-radius: 6px !important;
    font-family: var(--eh-font-h) !important; font-size: .9rem; letter-spacing: 1px;
    text-transform: uppercase; padding: .4rem .8rem !important; text-decoration: none !important;
    z-index: 9999 !important; box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
    transition: all .2s !important; display: inline-flex !important; align-items: center; gap: .4rem;
}
html body .einhost-admin-fixed:hover { background: rgba(205,69,69,.32) !important; color: #fff !important; transform: translateY(-2px) !important; }

/* Logo */
html body .einhost-logo { display: flex; align-items: center; text-decoration: none !important; flex-shrink: 0; }
html body .einhost-logo-img { height: 44px; width: auto; object-fit: contain; filter: drop-shadow(0 2px 8px rgba(222,155,53,.3)); transition: filter .3s; }
html body .einhost-logo:hover .einhost-logo-img { filter: drop-shadow(0 4px 16px rgba(222,155,53,.55)); }
html body .einhost-logo-text { font-family: var(--eh-font-d); font-size: 1.7rem; letter-spacing: 3px; color: #fff; }

/* Main navbar */
html body .einhost-navbar-main {
    padding: .5rem 0;
    background: transparent;
}
html body .einhost-navbar-links {
    background: rgba(8,10,16,.55);
    border-top: 1px solid rgba(222,155,53,.08);
}

/* Topbar wrapper */
html body .topbar {
    background: rgba(8,10,16,.75) !important;
    border-bottom: 1px solid rgba(222,155,53,.1) !important;
    padding: 3px 0;
}

/* Search */
html body .einhost-search-wrap { display: flex; }
html body .einhost-search-btn {
    background: rgba(222,155,53,.12) !important; border: 1px solid var(--eh-border) !important;
    border-right: none !important; color: var(--eh-orange) !important;
    border-radius: 5px 0 0 5px !important; padding: .4rem .75rem; cursor: pointer;
}
html body .einhost-search-input {
    background: rgba(10,13,19,.85) !important; border: 1px solid var(--eh-border) !important;
    border-left: none !important; color: var(--eh-text) !important;
    font-family: var(--eh-font); font-size: .9rem;
    border-radius: 0 5px 5px 0 !important; padding: .4rem .75rem;
    outline: none; flex: 1;
    transition: border-color .2s;
}
html body .einhost-search-input::placeholder { color: var(--eh-dark); }
html body .einhost-search-input:focus { border-color: rgba(222,155,53,.5) !important; box-shadow: 0 0 0 2px rgba(222,155,53,.1); }

/* Cart */
html body .einhost-cart-btn {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(222,155,53,.12) !important; border: 1px solid var(--eh-border) !important;
    border-radius: 5px !important; color: var(--eh-orange) !important;
    padding: .4rem .75rem !important; text-decoration: none !important;
    transition: all .2s !important;
}
html body .einhost-cart-btn:hover { background: rgba(222,155,53,.25) !important; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(222,155,53,.2); }
html body .einhost-badge {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 18px; height: 18px; padding: 0 4px;
    background: var(--eh-orange) !important; color: #171a21 !important;
    border-radius: 9px; font-size: .7rem; font-weight: 700; line-height: 1;
}

/* Hamburger */
html body .einhost-hamburger {
    display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 40px; height: 40px; background: rgba(222,155,53,.1) !important;
    border: 1px solid var(--eh-border) !important; border-radius: 5px !important;
    cursor: pointer; padding: 8px;
}
html body .einhost-hamburger span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: all .3s; }

/* Nav links */
html body #nav .nav-link, html body #mainNavbar .navbar-nav .nav-link,
html body .einhost-navbar-links .nav-link {
    font-family: var(--eh-font-h) !important; font-size: 1.1rem !important;
    font-weight: 500 !important; letter-spacing: 1.5px !important;
    text-transform: uppercase !important; color: var(--eh-muted) !important;
    padding: .55rem 1rem !important; border-radius: 4px !important;
    transition: color .2s, background .2s !important;
}
html body #nav .nav-link:hover, html body #nav .nav-link.active,
html body #nav .active>.nav-link,
html body .einhost-navbar-links .nav-link:hover,
html body .einhost-navbar-links .navbar-nav .active>.nav-link {
    color: var(--eh-orange) !important; background: rgba(222,155,53,.08) !important;
}

html body .dropdown-menu {
    background: rgba(8,10,16,.98) !important; border: 1px solid var(--eh-border) !important;
    border-radius: 7px !important; box-shadow: 0 14px 45px rgba(0,0,0,.7) !important; padding: 5px !important;
}
html body .dropdown-item {
    font-family: var(--eh-font) !important; font-size: .92rem !important;
    font-weight: 600 !important; color: var(--eh-muted) !important;
    border-radius: 4px !important; padding: .48rem 1rem !important; transition: all .15s !important;
}
html body .dropdown-item:hover { background: rgba(222,155,53,.12) !important; color: var(--eh-orange) !important; }
html body .dropdown-divider { border-color: rgba(222,155,53,.1) !important; }

@media(max-width:1199px) {
    html body #einNavbar, html body .collapse {
        background: rgba(8,10,16,.98) !important; border: 1px solid var(--eh-border) !important;
        border-radius: 8px !important; margin-top: .4rem !important; padding: .75rem !important;
        box-shadow: 0 14px 45px rgba(0,0,0,.7) !important;
    }
}

/* ── BREADCRUMB ─────────────────────────────────────────────── */
html body .einhost-breadcrumb, html body .master-breadcrumb {
    background: rgba(13,16,22,.75) !important; border-bottom: 1px solid rgba(222,155,53,.1) !important;
    padding: .3rem 0 !important;
}
html body .breadcrumb { background: transparent !important; margin: 0 !important; padding: .3rem 0 !important; font-family: var(--eh-font); font-size: .82rem; }
html body .breadcrumb-item a { color: var(--eh-dim) !important; }
html body .breadcrumb-item a:hover { color: var(--eh-orange) !important; }
html body .breadcrumb-item.active { color: var(--eh-orange) !important; font-weight: 600; }
html body .breadcrumb-item+.breadcrumb-item::before { color: var(--eh-dark) !important; }

/* ── MAIN CONTENT ───────────────────────────────────────────── */
html body #main-body { background: transparent !important; padding: 1.5rem 0 3rem !important; min-height: 60vh; }
html body .container, html body .container-fluid,
html body .primary-content, html body .row, html body [class*="col-"] { background: transparent !important; }

/* ── SIDEBAR ────────────────────────────────────────────────── */
html body .sidebar {
    background: var(--eh-card) !important; border: 1px solid var(--eh-border) !important;
    border-radius: 8px !important; overflow: hidden; margin-bottom: 1.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,.45) !important;
}
html body .sidebar>.card, html body .sidebar .card { background: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; }
html body .sidebar .card-header, html body .card.card-sidebar>.card-header {
    background: rgba(19,27,38,.9) !important; border-bottom: 1px solid var(--eh-border) !important;
    color: var(--eh-orange) !important; font-family: var(--eh-font-h) !important;
    font-size: 1.05rem !important; font-weight: 500 !important;
    letter-spacing: 1.5px !important; text-transform: uppercase !important;
    padding: .65rem 1rem !important; display: flex; align-items: center; justify-content: space-between;
}
html body .sidebar .card-header h3, html body .sidebar h3.card-title {
    font-family: var(--eh-font-h) !important; font-size: 1.05rem !important;
    letter-spacing: 1.5px !important; text-transform: uppercase !important;
    color: var(--eh-orange) !important; margin: 0 !important;
}
html body .sidebar .card-header .fas, html body .sidebar .card-header .far,
html body .sidebar .card-header .fal, html body .sidebar .card-header .card-minimise { color: rgba(222,155,53,.6) !important; font-size: .75rem; }
html body .sidebar .list-group { border-radius: 0 !important; }
html body .sidebar .list-group-item {
    background: transparent !important; border-color: rgba(222,155,53,.07) !important;
    color: var(--eh-muted) !important; font-family: var(--eh-font) !important;
    font-weight: 600 !important; font-size: .9rem !important; padding: .5rem 1rem !important;
    transition: all .15s !important; border-top: none !important;
}
html body .sidebar .list-group-item:hover { background: rgba(222,155,53,.07) !important; color: var(--eh-orange) !important; padding-left: 1.3rem !important; }
html body .sidebar .list-group-item.active { background: rgba(222,155,53,.14) !important; border-left: 3px solid var(--eh-orange) !important; color: var(--eh-orange) !important; font-weight: 700 !important; }
html body .sidebar .sidebar-menu-item-icon, html body .sidebar .fas.sidebar-menu-item-icon { color: rgba(222,155,53,.6) !important; }
html body .sidebar .collapsable-card-body, html body .sidebar .card-body { background: transparent !important; }

/* ── CARDS ──────────────────────────────────────────────────── */
html body .card, html body .panel, html body .well {
    background: var(--eh-card) !important; border: 1px solid var(--eh-border) !important;
    border-radius: 8px !important; color: var(--eh-text) !important;
    box-shadow: 0 4px 18px rgba(0,0,0,.45) !important;
    transition: border-color .25s, box-shadow .25s, transform .25s;
}
html body .card:not(.card-sidebar):hover {
    border-color: var(--eh-border2) !important;
    box-shadow: 0 8px 30px rgba(0,0,0,.55), 0 0 18px rgba(222,155,53,.08) !important;
    transform: translateY(-2px);
}
/* No lift for login, modal, sidebar cards */
html body .login-form .card:hover, html body .card.mw-540:hover,
html body .card.card-sidebar:hover, html body .modal .card:hover { transform: none !important; box-shadow: none !important; }

html body .card-body { background: transparent !important; color: var(--eh-text) !important; }
html body .card-header, html body .panel-heading {
    background: var(--eh-card2) !important; border-bottom: 1px solid var(--eh-border) !important;
    color: #fff !important; font-family: var(--eh-font-h) !important; font-size: 1.1rem !important;
    letter-spacing: 1px !important; text-transform: uppercase !important;
    border-radius: 8px 8px 0 0 !important; padding: .7rem 1.25rem !important;
}
html body .card-footer, html body .panel-footer {
    background: rgba(8,10,14,.6) !important; border-top: 1px solid var(--eh-border) !important;
    border-radius: 0 0 8px 8px !important;
}
html body .card-title { font-family: var(--eh-font-h) !important; font-size: 1.2rem !important; letter-spacing: 1px !important; color: #fff !important; text-transform: uppercase; }
html body .card-text, html body .card>p { color: var(--eh-muted) !important; }

/* Login card */
html body .login-form .card, html body .card.mw-540 {
    background: rgba(8,10,16,.97) !important; border: 1px solid rgba(222,155,53,.22) !important;
    border-radius: 10px !important; box-shadow: 0 20px 60px rgba(0,0,0,.7), 0 0 30px rgba(222,155,53,.06) !important;
    max-width: 540px; margin: 2rem auto !important;
}
html body .login-form .card .h3, html body .card.mw-540 .h3 {
    font-family: var(--eh-font-h) !important; font-size: 1.8rem !important;
    letter-spacing: 2px !important; text-transform: uppercase !important; color: #fff !important;
}
html body .login-form a.small { color: var(--eh-dim) !important; }
html body .login-form a.small:hover { color: var(--eh-orange) !important; }

/* ── BUTTONS ─────────────────────────────────────────────────── */
html body .btn {
    font-family: var(--eh-font-h) !important; letter-spacing: 1px !important;
    text-transform: uppercase !important; border-radius: 5px !important;
    font-size: .95rem !important; transition: all .2s ease !important;
}
html body .btn-primary {
    background: linear-gradient(135deg, var(--eh-orange) 0%, var(--eh-orange3) 100%) !important;
    border-color: rgba(240,176,74,.5) !important; color: #171a21 !important;
    box-shadow: 0 3px 12px rgba(222,155,53,.25) !important; font-weight: 600 !important;
}
html body .btn-primary:hover, html body .btn-primary:focus {
    background: linear-gradient(135deg, var(--eh-orange2) 0%, var(--eh-orange) 100%) !important;
    box-shadow: 0 6px 20px rgba(222,155,53,.4) !important; color: #171a21 !important; transform: translateY(-1px) !important;
}
/* "Comandă acum" — orange, not green */
html body .btn-success {
    background: linear-gradient(135deg, var(--eh-orange) 0%, var(--eh-orange3) 100%) !important;
    border-color: rgba(240,176,74,.5) !important; color: #171a21 !important;
    box-shadow: 0 3px 12px rgba(222,155,53,.25) !important; font-weight: 700 !important;
}
html body .btn-success:hover {
    background: linear-gradient(135deg, var(--eh-orange2) 0%, var(--eh-orange) 100%) !important;
    box-shadow: 0 6px 20px rgba(222,155,53,.4) !important; transform: translateY(-1px) !important; color: #171a21 !important;
}
html body .btn-danger { background: linear-gradient(135deg,#cd4545,#b33333) !important; border-color: #cd4545 !important; color: #fff !important; }
html body .btn-danger:hover { background: linear-gradient(135deg,#e05555,#cd4545) !important; transform: translateY(-1px) !important; }
html body .btn-default, html body .btn-secondary { background: rgba(42,71,94,.4) !important; border: 1px solid var(--eh-border) !important; color: var(--eh-text) !important; }
html body .btn-default:hover, html body .btn-secondary:hover { background: rgba(42,71,94,.65) !important; border-color: var(--eh-border2) !important; color: var(--eh-orange) !important; }
html body .btn-outline-primary { border: 1px solid rgba(222,155,53,.45) !important; color: var(--eh-orange) !important; background: rgba(222,155,53,.08) !important; }
html body .btn-outline-primary:hover { background: rgba(222,155,53,.2) !important; border-color: var(--eh-orange) !important; color: var(--eh-orange2) !important; box-shadow: 0 4px 16px rgba(222,155,53,.2) !important; }
html body .btn-link { color: var(--eh-orange) !important; }
html body .btn-link:hover { color: var(--eh-orange2) !important; }

/* ── FORMS ───────────────────────────────────────────────────── */
html body .form-control, html body .custom-select {
    background: rgba(8,10,16,.85) !important; border: 1px solid var(--eh-border) !important;
    color: var(--eh-text) !important; border-radius: 5px !important;
    font-family: var(--eh-font) !important; font-size: .95rem !important; font-weight: 500 !important;
    transition: border-color .2s, box-shadow .2s;
}
html body .form-control::placeholder { color: var(--eh-dark) !important; }
html body .form-control:focus, html body .custom-select:focus {
    background: rgba(13,19,30,.9) !important; border-color: rgba(222,155,53,.5) !important;
    color: var(--eh-text) !important; box-shadow: 0 0 0 3px rgba(222,155,53,.1) !important; outline: none;
}
html body .form-control:disabled, html body .form-control[readonly] { background: rgba(6,7,10,.7) !important; color: var(--eh-dark) !important; }
html body .form-control-label, html body label {
    color: var(--eh-muted) !important; font-family: var(--eh-font);
    font-weight: 600; font-size: .82rem; letter-spacing: .5px; text-transform: uppercase;
}
/* Custom select arrow — exclude phone country picker & iti selects */
html body select.form-control:not([name="dial_code"]):not([name="country"]):not([name="phonecountry"]):not(.iti__flag-container select):not([data-iti]) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23de9b35' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important; background-position: right .75rem center !important; background-size: 16px 12px !important;
}

/* intl-tel-input (phone flag + country selector) */
html body .iti, html body .intl-tel-input { display: block !important; width: 100%; }
html body .iti__flag-container, html body .intl-tel-input .flag-container {
    background: rgba(19,27,38,.9) !important;
    border: 1px solid var(--eh-border) !important;
    border-right: none !important;
    border-radius: 5px 0 0 5px !important;
}
html body .iti__selected-flag, html body .intl-tel-input .selected-flag {
    background: rgba(19,27,38,.9) !important;
    border-radius: 5px 0 0 5px !important;
    padding: 0 .5rem !important;
    outline: none !important;
}
html body .iti__selected-flag:hover, html body .iti__selected-flag:focus,
html body .intl-tel-input .selected-flag:hover { background: rgba(42,71,94,.5) !important; }
html body .iti__selected-dial-code, html body .intl-tel-input .selected-dial-code { color: var(--eh-muted) !important; font-family: var(--eh-font); font-size: .85rem; }
html body .iti__arrow, html body .intl-tel-input .arrow {
    border-top-color: var(--eh-orange) !important;
    border-bottom-color: var(--eh-orange) !important;
}
html body .iti__country-list, html body .intl-tel-input .country-list {
    background: rgba(8,10,16,.98) !important;
    border: 1px solid var(--eh-border) !important;
    border-radius: 6px !important;
    box-shadow: 0 12px 40px rgba(0,0,0,.6) !important;
    scrollbar-width: thin; scrollbar-color: var(--eh-orange) #0a0d12;
}
html body .iti__country, html body .intl-tel-input .country {
    color: var(--eh-muted) !important; font-family: var(--eh-font); font-size: .88rem; padding: .4rem .75rem !important;
}
html body .iti__country:hover, html body .intl-tel-input .country:hover,
html body .iti__country.iti__highlight { background: rgba(222,155,53,.1) !important; color: var(--eh-orange) !important; }
html body .iti__divider { border-bottom-color: rgba(222,155,53,.12) !important; }
html body .iti__country-name, html body .intl-tel-input .country-name { color: var(--eh-muted) !important; }
html body .iti__dial-code, html body .intl-tel-input .dial-code { color: var(--eh-dim) !important; }

/* Force phone input inside iti to have no left padding collision */
html body .iti__tel-input, html body .iti + .form-control,
html body input[type="tel"].form-control {
    background: rgba(8,10,16,.85) !important;
    border: 1px solid var(--eh-border) !important;
    color: var(--eh-text) !important;
}
html body .input-group-text {
    background: rgba(13,19,30,.9) !important; border: 1px solid var(--eh-border) !important;
    color: var(--eh-dim) !important; font-family: var(--eh-font); font-weight: 600;
}
html body .custom-control-label::before { background: rgba(8,10,16,.85) !important; border: 1px solid rgba(222,155,53,.3) !important; }
html body .custom-control-input:checked~.custom-control-label::before { background: var(--eh-orange) !important; border-color: var(--eh-orange) !important; }

/* ── TABLES ──────────────────────────────────────────────────── */
html body .table { color: var(--eh-text) !important; border-color: rgba(222,155,53,.1) !important; font-family: var(--eh-font); font-size: .95rem; font-weight: 500; }
html body .table thead th {
    background: rgba(13,19,30,.9) !important; border-bottom: 2px solid rgba(222,155,53,.3) !important;
    color: var(--eh-orange) !important; font-family: var(--eh-font-h) !important;
    font-size: 1rem !important; letter-spacing: 1px !important; text-transform: uppercase !important; font-weight: 500 !important;
}
html body .table td { border-color: rgba(222,155,53,.07) !important; vertical-align: middle !important; }
html body .table-striped tbody tr:nth-of-type(odd) { background: rgba(27,40,56,.18) !important; }
html body .table-hover tbody tr:hover { background: rgba(42,71,94,.2) !important; color: #fff !important; }
html body .table-bordered { border-color: rgba(222,155,53,.12) !important; }

/* ── ALERTS ──────────────────────────────────────────────────── */
html body .alert { border-radius: 6px !important; font-family: var(--eh-font) !important; font-weight: 600 !important; border-left-width: 3px !important; }
html body .alert-success { background: rgba(91,163,43,.1) !important; border-color: rgba(91,163,43,.5) !important; color: #7dc855 !important; }
html body .alert-danger  { background: rgba(205,69,69,.1) !important; border-color: rgba(205,69,69,.5) !important; color: #e07070 !important; }
html body .alert-warning { background: rgba(222,155,53,.1) !important; border-color: rgba(222,155,53,.5) !important; color: var(--eh-orange) !important; }
html body .alert-info    { background: rgba(42,71,94,.3) !important; border-color: rgba(222,155,53,.3) !important; color: var(--eh-text) !important; }

/* ── BADGES ──────────────────────────────────────────────────── */
html body .badge-primary { background: var(--eh-orange) !important; color: #171a21 !important; }
html body .badge-success { background: var(--eh-green) !important; color: #fff !important; }
html body .badge-danger  { background: var(--eh-red) !important; color: #fff !important; }
html body .badge-warning { background: var(--eh-orange) !important; color: #171a21 !important; }
html body .badge-secondary { background: var(--eh-bg3) !important; color: var(--eh-text) !important; }
html body .badge-info { background: var(--eh-orange) !important; color: #171a21 !important; font-weight: 700; }

/* ── VERIFICATION BANNER (admin) ────────────────────────────── */
html body .verification-banner, html body .user-validation {
    background: rgba(205,69,69,.1) !important; border-bottom: 1px solid rgba(205,69,69,.3) !important;
    padding: .4rem 0 !important; font-family: var(--eh-font); font-size: .82rem; color: #e07070 !important;
}

/* ── TABS ────────────────────────────────────────────────────── */
html body .nav-tabs { border-bottom: 1px solid rgba(222,155,53,.2) !important; }
html body .nav-tabs .nav-link {
    font-family: var(--eh-font-h) !important; font-size: 1rem !important; letter-spacing: 1px !important;
    text-transform: uppercase !important; color: var(--eh-dim) !important;
    border: 1px solid transparent !important; border-radius: 5px 5px 0 0 !important; transition: all .2s !important;
}
html body .nav-tabs .nav-link:hover { color: var(--eh-orange) !important; border-color: var(--eh-border) var(--eh-border) transparent !important; }
html body .nav-tabs .nav-link.active { background: rgba(222,155,53,.1) !important; border-color: rgba(222,155,53,.3) rgba(222,155,53,.3) transparent !important; color: var(--eh-orange) !important; }
html body .tab-content, html body .tab-pane { background: transparent !important; }
html body .nav-pills .nav-link { font-family: var(--eh-font) !important; font-weight: 600 !important; color: var(--eh-dim) !important; border-radius: 5px !important; }
html body .nav-pills .nav-link.active { background: rgba(222,155,53,.2) !important; color: var(--eh-orange) !important; }

/* Store domain tabs */
html body .store-domain-tabs .nav-link { font-family: var(--eh-font-h) !important; font-size: .95rem !important; text-transform: uppercase !important; letter-spacing: 1px !important; color: var(--eh-dim) !important; }
html body .store-domain-tabs .nav-link.active { color: var(--eh-orange) !important; background: rgba(222,155,53,.1) !important; }
html body .responsive-tabs-sm-connector { background: transparent !important; border-color: rgba(222,155,53,.15) !important; }

/* ── PAGINATION ──────────────────────────────────────────────── */
html body .pagination .page-link { background: rgba(13,16,22,.7) !important; border: 1px solid var(--eh-border) !important; color: var(--eh-muted) !important; font-family: var(--eh-font) !important; font-weight: 600 !important; }
html body .pagination .page-link:hover { background: rgba(42,71,94,.5) !important; border-color: var(--eh-border2) !important; color: var(--eh-orange) !important; }
html body .pagination .page-item.active .page-link { background: var(--eh-orange) !important; border-color: var(--eh-orange) !important; color: #171a21 !important; font-weight: 700 !important; }

/* ── MODALS ──────────────────────────────────────────────────── */
html body .modal-content { background: rgba(8,10,16,.97) !important; border: 1px solid rgba(222,155,53,.22) !important; border-radius: 10px !important; box-shadow: 0 20px 60px rgba(0,0,0,.7) !important; color: var(--eh-text) !important; }
html body .modal-header { background: rgba(13,19,30,.7) !important; border-bottom: 1px solid var(--eh-border) !important; border-radius: 10px 10px 0 0 !important; }
html body .modal-title { font-family: var(--eh-font-h) !important; font-size: 1.3rem !important; letter-spacing: 1px !important; text-transform: uppercase !important; color: #fff !important; }
html body .modal-footer { background: rgba(6,7,10,.5) !important; border-top: 1px solid var(--eh-border) !important; border-radius: 0 0 10px 10px !important; }
html body .modal-body { color: var(--eh-text) !important; background: transparent !important; }
html body .close { color: var(--eh-muted) !important; } html body .close:hover { color: var(--eh-orange) !important; }

/* ── HOMEPAGE ────────────────────────────────────────────────── */
html body h2.text-center {
    font-family: var(--eh-font-h) !important; font-size: 1.8rem !important;
    letter-spacing: 2px !important; text-transform: uppercase !important;
    color: #fff !important; position: relative; padding-bottom: .5rem;
}
html body h2.text-center::after {
    content: ''; display: block; width: 60px; height: 2px;
    background: linear-gradient(90deg, var(--eh-orange), var(--eh-orange2));
    margin: .5rem auto 0; border-radius: 2px; box-shadow: 0 0 10px rgba(222,155,53,.4);
}
html body .action-icon-btns a {
    background: var(--eh-card) !important; border: 1px solid var(--eh-border) !important; border-radius: 8px !important;
    color: var(--eh-muted) !important; font-family: var(--eh-font-h) !important; font-size: 1rem !important;
    letter-spacing: 1px !important; text-transform: uppercase !important; text-decoration: none !important;
    display: flex !important; flex-direction: column !important; align-items: center !important;
    justify-content: center !important; padding: 1.5rem 1rem !important; transition: all .25s ease !important;
}
html body .action-icon-btns a:hover { border-color: var(--eh-border2) !important; background: rgba(42,71,94,.35) !important; color: var(--eh-orange) !important; transform: translateY(-3px) !important; box-shadow: 0 8px 24px rgba(222,155,53,.12) !important; }
html body .ico-container {
    background: rgba(222,155,53,.1) !important; border: 1px solid rgba(222,155,53,.2) !important; border-radius: 8px !important;
    width: 56px !important; height: 56px !important; display: flex !important; align-items: center !important;
    justify-content: center !important; margin-bottom: .75rem !important; color: var(--eh-orange) !important;
    font-size: 1.4rem !important; transition: all .25s !important;
}
html body .action-icon-btns a:hover .ico-container { background: rgba(222,155,53,.2) !important; box-shadow: 0 0 16px rgba(222,155,53,.2) !important; }
html body .card-columns.home .card { background: var(--eh-card) !important; border: 1px solid var(--eh-border) !important; }

/* ── STORE ───────────────────────────────────────────────────── */
html body .pricing-card-title { font-family: var(--eh-font-d) !important; font-size: 1.4rem !important; letter-spacing: 2px !important; color: #fff !important; }
html body .price, html body .billing-cycle-price { color: var(--eh-orange) !important; font-family: var(--eh-font-h) !important; font-size: 2rem !important; font-weight: 500 !important; }
html body .price small, html body .price .currency, html body .price .period { font-size: 1rem !important; color: var(--eh-dim) !important; }
html body .promo-banner { background: var(--eh-card) !important; border: 1px solid var(--eh-border) !important; border-radius: 8px !important; color: var(--eh-text) !important; }
html body .promo-banner h3, html body .promo-banner h4 { color: var(--eh-orange) !important; }
html body .store-domain-tab-content { background: transparent !important; border: 1px solid var(--eh-border) !important; border-radius: 0 0 8px 8px !important; }
html body .product-addons, html body .configoptions { background: var(--eh-card) !important; border: 1px solid var(--eh-border) !important; border-radius: 8px !important; }
/* Dynamic store */
html body .dynamic-landing-page { background: var(--eh-bg) !important; color: var(--eh-text) !important; }
html body .dynamic-landing-page .pricing-card { background: var(--eh-card) !important; border: 1px solid var(--eh-border) !important; border-radius: 10px !important; color: var(--eh-text) !important; }
html body .dynamic-landing-page .plan-button { background: linear-gradient(135deg,var(--eh-orange),var(--eh-orange3)) !important; border-color: rgba(240,176,74,.5) !important; color: #171a21 !important; font-family: var(--eh-font-h) !important; letter-spacing: 1px !important; border-radius: 5px !important; }
html body .dynamic-landing-page .plan-button:hover { background: linear-gradient(135deg,var(--eh-orange2),var(--eh-orange)) !important; }
html body .background-light { background: rgba(19,27,38,.55) !important; }
html body .background-main { background: transparent !important; }
html body .background-dark { background: rgba(8,10,16,.9) !important; }
html body .background-gradient { background: linear-gradient(135deg,rgba(19,27,38,.8) 0%,rgba(10,13,19,.9) 100%) !important; }

/* ── DOMAIN SEARCH ───────────────────────────────────────────── */
html body .domain-search-container, html body #domain-search-wrap { background: rgba(8,10,16,.9) !important; border-bottom: 1px solid var(--eh-border) !important; padding: 1.5rem 0 !important; }

/* ── MISC COMPONENTS ─────────────────────────────────────────── */
html body .popover { background: rgba(8,10,16,.97) !important; border: 1px solid rgba(222,155,53,.22) !important; border-radius: 8px !important; box-shadow: 0 12px 40px rgba(0,0,0,.6) !important; }
html body .popover-header { background: rgba(13,19,30,.7) !important; border-bottom: 1px solid var(--eh-border) !important; color: var(--eh-orange) !important; font-family: var(--eh-font-h) !important; letter-spacing: 1px !important; text-transform: uppercase !important; }
html body .popover-body { color: var(--eh-text) !important; }
html body .tooltip .tooltip-inner { background: rgba(8,10,16,.97) !important; border: 1px solid rgba(222,155,53,.22) !important; color: var(--eh-text) !important; font-family: var(--eh-font) !important; font-size: .82rem !important; font-weight: 600 !important; }
html body .client-alerts { padding: 0; list-style: none; }
html body .client-alerts li { border-bottom: 1px solid rgba(222,155,53,.08) !important; }
html body .client-alerts a { color: var(--eh-muted) !important; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; font-family: var(--eh-font); font-weight: 600; font-size: .85rem; }
html body .client-alerts a:hover { color: var(--eh-orange) !important; background: rgba(222,155,53,.05) !important; }
html body .client-alerts i { color: var(--eh-orange); }
html body .item-selector .item { background: rgba(13,19,30,.7) !important; border: 1px solid var(--eh-border) !important; border-radius: 5px !important; color: var(--eh-muted) !important; display: block; padding: .6rem 1rem; margin-bottom: .5rem; font-family: var(--eh-font); font-weight: 600; transition: all .15s; }
html body .item-selector .item:hover { border-color: var(--eh-border2) !important; color: var(--eh-orange) !important; background: rgba(42,71,94,.3) !important; }
html body .item-selector .item.active { background: rgba(222,155,53,.15) !important; border-color: rgba(222,155,53,.5) !important; color: var(--eh-orange) !important; }
html body #fullpage-overlay { background: rgba(8,10,16,.92) !important; backdrop-filter: blur(10px); }
html body hr { border-color: rgba(222,155,53,.12) !important; }

/* Status labels */
html body .status-active, html body .label.status-active { color: var(--eh-green) !important; font-weight: 700; }
html body .status-suspended, html body .status-cancelled { color: var(--eh-red) !important; font-weight: 700; }
html body .status-pending { color: var(--eh-orange) !important; font-weight: 700; }

/* ── FOOTER ──────────────────────────────────────────────────── */
html body #footer {
    background: linear-gradient(180deg, rgba(8,10,16,.98) 0%, rgba(5,6,9,1) 100%) !important;
    border-top: 1px solid var(--eh-border) !important;
    position: relative; padding: 0; font-family: var(--eh-font);
}
html body #footer::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(222,155,53,.6) 30%, rgba(240,176,74,.85) 50%, rgba(222,155,53,.6) 70%, transparent 100%);
}
html body .footer-inner { position: relative; z-index: 1; padding: 2.5rem 0 0; }
html body .footer-grid {
    display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 3rem; padding-bottom: 2rem;
}
@media(max-width:768px) { html body .footer-grid { grid-template-columns: 1fr; gap: 1.5rem; } }
html body .footer-col-brand {}
html body .footer-logo { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none !important; margin-bottom: 1rem; }
html body .footer-logo-img { height: 40px; width: auto; filter: drop-shadow(0 2px 8px rgba(222,155,53,.3)); transition: filter .3s; }
html body .footer-logo:hover .footer-logo-img { filter: drop-shadow(0 4px 16px rgba(222,155,53,.55)); }
html body .footer-logo-text { font-family: var(--eh-font-d); font-size: 1.5rem; letter-spacing: 3px; color: #fff; }
html body .footer-tagline { font-size: .88rem; line-height: 1.7; color: var(--eh-dark); margin-bottom: 1.2rem; max-width: 320px; }
html body .footer-tagline strong { color: var(--eh-orange); }
html body .footer-socials { display: flex; gap: .5rem; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
html body .footer-socials a, html body .list-social a, html body .footer .list-inline-item a {
    display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px;
    background: rgba(222,155,53,.08) !important; border: 1px solid rgba(222,155,53,.2) !important;
    border-radius: 5px !important; color: var(--eh-dark) !important; font-size: .95rem;
    transition: all .2s !important; text-decoration: none !important;
}
html body .footer-socials a:hover, html body .list-social a:hover, html body .footer .list-inline-item a:hover {
    background: rgba(222,155,53,.2) !important; color: var(--eh-orange) !important;
    border-color: rgba(222,155,53,.45) !important; transform: translateY(-2px);
}
html body .footer-col-title {
    font-family: var(--eh-font-h); font-size: 1.05rem; font-weight: 500;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--eh-text);
    margin-bottom: 1rem; padding-bottom: .5rem;
    border-bottom: 1px solid rgba(222,155,53,.12);
    display: flex; align-items: center; gap: .5rem;
}
html body .footer-col-title i { color: var(--eh-orange); font-size: .85rem; }
html body .footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; }
html body .footer-links a { color: var(--eh-dark); font-size: .88rem; font-weight: 600; text-decoration: none !important; transition: color .15s, padding-left .15s; display: flex; align-items: center; gap: .4rem; }
html body .footer-links a::before { content: ''; display: inline-block; width: 4px; height: 4px; background: rgba(222,155,53,.4); border-radius: 50%; flex-shrink: 0; transition: background .15s; }
html body .footer-links a:hover { color: var(--eh-orange) !important; padding-left: 4px; }
html body .footer-links a:hover::before { background: var(--eh-orange); }
html body .footer-links li { color: var(--eh-dark); font-size: .85rem; font-weight: 600; margin-bottom: .3rem; display: flex; align-items: center; }
html body .footer-locale { display: flex; justify-content: center; margin-bottom: 1rem; }
html body .footer-locale-btn {
    font-family: var(--eh-font); font-size: .82rem; font-weight: 600; color: var(--eh-dark);
    border: 1px solid rgba(222,155,53,.15) !important; background: rgba(222,155,53,.05) !important;
    border-radius: 5px !important; padding: .3rem .8rem; display: flex; align-items: center; gap: .4rem;
    cursor: pointer; transition: all .2s;
}
html body .footer-locale-btn:hover { color: var(--eh-orange); border-color: rgba(222,155,53,.35) !important; background: rgba(222,155,53,.1) !important; }
html body .footer-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(222,155,53,.15), transparent); margin: 0; }
html body .footer-bottom { padding: 1rem 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; }
html body .footer-copy { font-size: .78rem; color: var(--eh-dark); margin: 0; }
html body .footer-bottom-links { display: flex; align-items: center; gap: 1.2rem; list-style: none; padding: 0; margin: 0; }
html body .footer-bottom-links a { color: var(--eh-dark); font-size: .78rem; text-decoration: none !important; transition: color .15s; }
html body .footer-bottom-links a:hover { color: var(--eh-orange) !important; }
html body .footer-bottom-links .sep { color: var(--eh-bg3); font-size: .7rem; }
html body .copyright { color: var(--eh-dark) !important; font-size: .8rem !important; }
html body .footer .nav-link { color: var(--eh-dark) !important; }
html body .footer .nav-link:hover { color: var(--eh-orange) !important; }
@media(max-width:576px) { html body .footer-bottom { justify-content: center; text-align: center; } }

/* ── ERROR PAGES ─────────────────────────────────────────────── */
html body .error-page, html body .error-container { text-align: center; padding: 4rem 1rem; }
html body .error-page h1, html body .error-container h1 { font-family: var(--eh-font-d) !important; font-size: 6rem !important; color: var(--eh-orange) !important; letter-spacing: 4px !important; text-shadow: 0 0 30px rgba(222,155,53,.3); }
html body .error-page h2 { font-family: var(--eh-font-h) !important; letter-spacing: 2px !important; color: #fff !important; }

/* ── INVOICE STYLES ──────────────────────────────────────────── */
html body .invoice-overview { background: var(--eh-card) !important; border: 1px solid var(--eh-border) !important; border-radius: 8px !important; }

/* ── KNOWLEDGEBASE ───────────────────────────────────────────── */
html body .kbarticle-nav { background: var(--eh-card) !important; border: 1px solid var(--eh-border) !important; border-radius: 8px !important; }

/* ── ANNOUNCEMENTS ───────────────────────────────────────────── */
html body .announcement-item { border-bottom: 1px solid rgba(222,155,53,.1) !important; }
html body .announcement-item:hover { background: rgba(222,155,53,.04) !important; }

/* ── SUPPORT TICKETS ─────────────────────────────────────────── */
html body .ticket-reply { background: var(--eh-card) !important; border: 1px solid var(--eh-border) !important; border-radius: 8px !important; margin-bottom: 1rem; }
html body .ticket-reply.admin-reply { border-left: 3px solid var(--eh-orange) !important; }

/* ── SERVERLESS ADDITIONS ────────────────────────────────────── */
/* Remove the default WHMCS Open Sans font */
html body { font-family: var(--eh-font) !important; }

/* ── BROWSER AUTOFILL OVERRIDE ──────────────────────────────── */
/* Fix blue/white autofill background on inputs */
html body input:-webkit-autofill,
html body input:-webkit-autofill:hover,
html body input:-webkit-autofill:focus,
html body input:-webkit-autofill:active,
html body select:-webkit-autofill,
html body textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px rgba(16,22,32,.95) inset !important;
    box-shadow: 0 0 0 1000px rgba(16,22,32,.95) inset !important;
    -webkit-text-fill-color: #c7d5e0 !important;
    border-color: rgba(222,155,53,.3) !important;
    caret-color: #c7d5e0 !important;
}

/* ── PASSWORD STRENGTH BAR ──────────────────────────────────── */
html body .progress { background: rgba(13,16,22,.8) !important; border-radius: 4px !important; height: 6px !important; }
html body .progress-bar { border-radius: 4px !important; }

/* ── REGISTER PAGE SPECIFIC ─────────────────────────────────── */
html body .clientregister .card-header,
html body #clientregistration .card-header {
    font-family: 'Teko', sans-serif !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
}

/* Flag dropdown fix for iti v17+ (newer intl-tel-input) */
html body .iti__dropdown-content {
    background: rgba(8,10,16,.98) !important;
    border: 1px solid rgba(222,155,53,.22) !important;
    border-radius: 6px !important;
}
html body .iti__search-input {
    background: rgba(13,19,30,.9) !important;
    border: 1px solid rgba(222,155,53,.2) !important;
    color: #c7d5e0 !important;
    font-family: 'Rajdhani', sans-serif !important;
}