@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');

/* ===== BASE ===== */
html, body {
    background: #050A14 !important;
    color: #fff !important;
    font-family: 'Cairo', sans-serif !important;
}
#wrapper, .container, .container-fluid, main, section#main-body {
    background: #050A14 !important;
}

/* ===== NAVBAR ===== */
.navbar, header#header, .header {
    background: #050A14 !important;
    border-bottom: 1px solid rgba(0,102,255,0.2) !important;
}
.topbar {
    background: #030810 !important;
    border-bottom: 1px solid rgba(0,102,255,0.15) !important;
    font-size: 13px;
}
.navbar-brand, .navbar-brand:hover {
    color: #fff !important;
    font-weight: 900 !important;
    font-size: 22px !important;
}
.navbar-nav > li > a, .nav-link {
    color: #8899BB !important;
    font-weight: 600 !important;
    transition: color 0.2s !important;
}
.navbar-nav > li > a:hover, .nav-link:hover { color: #fff !important; }
.navbar-nav > .open > a, .navbar-nav > .active > a { background: transparent !important; color: #fff !important; }
.dropdown-menu {
    background: #0D1526 !important;
    border: 1px solid rgba(0,102,255,0.25) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.4) !important;
}
.dropdown-menu > li > a { color: #8899BB !important; padding: 8px 16px !important; }
.dropdown-menu > li > a:hover { background: #111B2E !important; color: #fff !important; }

/* ===== BREADCRUMB ===== */
.master-breadcrumb, nav.master-breadcrumb {
    background: #030810 !important;
    border-bottom: 1px solid rgba(0,102,255,0.1) !important;
}
.breadcrumb {
    background: transparent !important;
    margin: 0 !important;
    padding: 10px 0 !important;
}
.breadcrumb > li, .breadcrumb-item { color: #8899BB !important; font-size: 13px !important; }
.breadcrumb > li + li::before, .breadcrumb-item + .breadcrumb-item::before { color: #4466AA !important; }
.breadcrumb > li a, .breadcrumb-item a { color: #0066FF !important; }

/* ===== CARDS ===== */
.client-home-cards .card, .card {
    background: #0D1526 !important;
    border: 1px solid rgba(0,102,255,0.18) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
    margin-bottom: 20px !important;
}
.card:hover {
    border-color: rgba(0,102,255,0.45) !important;
    box-shadow: 0 8px 32px rgba(0,102,255,0.12) !important;
}
.card-header {
    background: #111B2E !important;
    border-bottom: 1px solid rgba(0,102,255,0.18) !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 14px 20px !important;
}
.card-header h3, .card-title {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    margin: 0 !important;
}
.card-body { color: #fff !important; padding: 20px !important; }
.card-footer {
    background: #0D1526 !important;
    border-top: 1px solid rgba(0,102,255,0.12) !important;
    border-radius: 0 0 16px 16px !important;
    padding: 10px 20px !important;
}
.card-footer:empty { display: none !important; }

.card-accent-blue   { border-top: 3px solid #0066FF !important; }
.card-accent-green  { border-top: 3px solid #00C85A !important; }
.card-accent-red    { border-top: 3px solid #FF3B3B !important; }
.card-accent-yellow { border-top: 3px solid #FFB300 !important; }
.card-accent-purple { border-top: 3px solid #7C3AED !important; }

/* ===== LIST GROUP ===== */
.list-group-item {
    background: #0D1526 !important;
    border-color: rgba(0,102,255,0.15) !important;
    color: #C8D4F0 !important;
    font-size: 14px !important;
    transition: all 0.15s !important;
}
.list-group-item:first-child { border-top: none !important; }
.list-group-item-action:hover { background: #111B2E !important; color: #fff !important; }
.list-group-item.active {
    background: rgba(0,102,255,0.15) !important;
    border-color: rgba(0,102,255,0.3) !important;
    color: #fff !important;
}
.list-group-item i { color: #0066FF !important; margin-left: 6px !important; }
.badge {
    background: rgba(0,102,255,0.2) !important;
    color: #6699FF !important;
    border-radius: 20px !important;
    font-size: 11px !important;
    padding: 3px 8px !important;
}

/* ===== PANELS ===== */
.panel, .panel-default {
    background: #0D1526 !important;
    border: 1px solid rgba(0,102,255,0.18) !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.3) !important;
}
.panel-heading {
    background: #111B2E !important;
    border-bottom: 1px solid rgba(0,102,255,0.18) !important;
    color: #fff !important;
    border-radius: 16px 16px 0 0 !important;
    font-weight: 700 !important;
}
.panel-body { color: #fff !important; }
.panel-footer {
    background: #0D1526 !important;
    border-top: 1px solid rgba(0,102,255,0.12) !important;
    border-radius: 0 0 16px 16px !important;
}
.well {
    background: #0D1526 !important;
    border: 1px solid rgba(0,102,255,0.18) !important;
    border-radius: 14px !important;
    color: #fff !important;
}

/* ===== BUTTONS ===== */
.btn-primary, .btn-success {
    background: #0066FF !important;
    border-color: #0066FF !important;
    color: #fff !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    transition: background 0.2s, box-shadow 0.2s !important;
}
.btn-primary:hover, .btn-success:hover {
    background: #0044CC !important;
    box-shadow: 0 4px 16px rgba(0,102,255,0.35) !important;
}
.btn-default {
    background: #111B2E !important;
    border-color: rgba(0,102,255,0.3) !important;
    color: #C8D4F0 !important;
    border-radius: 10px !important;
}
.btn-default:hover { background: #1A2540 !important; color: #fff !important; }
.btn-danger  { background: #CC2200 !important; border-color: #CC2200 !important; border-radius: 10px !important; }
.btn-warning { background: #CC8800 !important; border-color: #CC8800 !important; border-radius: 10px !important; color: #fff !important; }
.btn-xs { font-size: 12px !important; padding: 3px 10px !important; border-radius: 8px !important; }

/* ===== FORMS ===== */
.form-control {
    background: #111B2E !important;
    border: 1px solid rgba(0,102,255,0.3) !important;
    color: #fff !important;
    border-radius: 10px !important;
}
.form-control:focus {
    border-color: #0066FF !important;
    box-shadow: 0 0 0 3px rgba(0,102,255,0.15) !important;
    background: #0D1526 !important;
}
.form-control::placeholder { color: #4466AA !important; }
label { color: #8899BB !important; font-weight: 600 !important; font-size: 13px !important; }
.input-group-addon, .input-group-text {
    background: #111B2E !important;
    border-color: rgba(0,102,255,0.3) !important;
    color: #8899BB !important;
}

/* ===== TABLES ===== */
.table { color: #C8D4F0 !important; }
.table > thead > tr > th {
    border-color: rgba(0,102,255,0.2) !important;
    color: #8899BB !important;
    background: #111B2E !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}
.table > tbody > tr > td {
    border-color: rgba(0,102,255,0.08) !important;
    color: #C8D4F0 !important;
    vertical-align: middle !important;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: rgba(13,21,38,0.6) !important; }
.table-hover > tbody > tr:hover { background: #111B2E !important; }

/* ===== ALERTS ===== */
.alert { border-radius: 12px !important; font-weight: 600 !important; }
.alert-info    { background: #0A1628 !important; border-color: rgba(0,102,255,0.3) !important; color: #6699FF !important; }
.alert-success { background: #0A2018 !important; border-color: rgba(0,180,80,0.3) !important;  color: #4DCC88 !important; }
.alert-danger  { background: #200A0A !important; border-color: rgba(200,0,0,0.3) !important;   color: #FF6B6B !important; }
.alert-warning { background: #201408 !important; border-color: rgba(200,140,0,0.3) !important; color: #FFB347 !important; }

/* ===== BADGES / LABELS ===== */
.label-success, .badge-success { background: rgba(0,200,90,0.2) !important; color: #00C85A !important; border: 1px solid rgba(0,200,90,0.3) !important; border-radius: 20px !important; padding: 3px 10px !important; }
.label-danger,  .badge-danger  { background: rgba(255,59,59,0.15) !important; color: #FF6B6B !important; }
.label-warning, .badge-warning { background: rgba(255,179,0,0.15) !important; color: #FFB300 !important; }
.label-info,    .badge-info    { background: rgba(0,102,255,0.15) !important; color: #6699FF !important; }
.label-default { background: #111B2E !important; border: 1px solid rgba(0,102,255,0.2) !important; color: #8899BB !important; }

/* ===== LINKS ===== */
a { color: #5588FF !important; }
a:hover { color: #88AAFF !important; }
.text-muted { color: #6677AA !important; }
h1, h2, h3, h4, h5, h6 { color: #fff !important; }

/* ===== FOOTER ===== */
#footer, footer {
    background: #030810 !important;
    border-top: 1px solid rgba(0,102,255,0.15) !important;
    color: #6677AA !important;
    font-size: 13px !important;
}
#footer a, footer a { color: #4466CC !important; }

/* ===== PAGE HEADER ===== */
.page-header {
    border-bottom: 1px solid rgba(0,102,255,0.15) !important;
    margin-bottom: 24px !important;
}

/* ===== ACTIVE CLIENT BAR ===== */
.btn-active-client {
    background: #111B2E !important;
    color: #C8D4F0 !important;
    border: 1px solid rgba(0,102,255,0.25) !important;
    border-radius: 8px !important;
    font-size: 13px !important;
}

/* ===== MODAL ===== */
.modal-content {
    background: #0D1526 !important;
    border: 1px solid rgba(0,102,255,0.25) !important;
    border-radius: 16px !important;
}
.modal-header {
    background: #111B2E !important;
    border-bottom: 1px solid rgba(0,102,255,0.2) !important;
    border-radius: 16px 16px 0 0 !important;
    color: #fff !important;
}
.modal-footer {
    background: #0D1526 !important;
    border-top: 1px solid rgba(0,102,255,0.15) !important;
    border-radius: 0 0 16px 16px !important;
}
.modal-title { color: #fff !important; }

/* ===== PAGINATION ===== */
.pagination > li > a {
    background: #0D1526 !important;
    border-color: rgba(0,102,255,0.2) !important;
    color: #8899BB !important;
}
.pagination > li > a:hover { background: #111B2E !important; color: #fff !important; }
.pagination > .active > a { background: #0066FF !important; border-color: #0066FF !important; color: #fff !important; }

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #050A14; }
::-webkit-scrollbar-thumb { background: #1A2E55; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #0066FF; }

/* ===== LOGO ===== */
.logo-img { max-height: 40px !important; }

/* ===== TILES (stats section) ===== */
.tiles { background: transparent !important; }
.tile {
    display: block !important;
    background: #0D1526 !important;
    border: 1px solid rgba(0,102,255,0.18) !important;
    border-radius: 16px !important;
    padding: 24px 20px !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.2s !important;
    margin: 6px !important;
    position: relative !important;
    overflow: hidden !important;
}
.tile:hover {
    border-color: rgba(0,102,255,0.5) !important;
    box-shadow: 0 8px 32px rgba(0,102,255,0.15) !important;
    transform: translateY(-2px) !important;
    text-decoration: none !important;
}
.tile i {
    font-size: 28px !important;
    color: #0066FF !important;
    margin-bottom: 10px !important;
    display: block !important;
}
.tile .stat {
    font-size: 36px !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: 1 !important;
    margin-bottom: 6px !important;
}
.tile .title {
    font-size: 12px !important;
    color: #8899BB !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    font-weight: 600 !important;
}
.tile .highlight {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
}
.bg-color-blue  { background: #0066FF !important; }
.bg-color-green { background: #00C85A !important; }
.bg-color-red   { background: #FF3B3B !important; }
.bg-color-gold  { background: #FFB300 !important; }

/* ===== TILES BIGGER & FLATTER ===== */
.tiles { background: transparent !important; margin-bottom: 24px !important; }
.tile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: #0D1526 !important;
    border: 1px solid rgba(0,102,255,0.2) !important;
    border-radius: 18px !important;
    padding: 32px 16px !important;
    text-align: center !important;
    text-decoration: none !important;
    transition: all 0.25s !important;
    margin: 6px !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 140px !important;
}
.tile:hover {
    border-color: #0066FF !important;
    box-shadow: 0 0 0 1px #0066FF, 0 8px 32px rgba(0,102,255,0.2) !important;
    transform: translateY(-3px) !important;
    text-decoration: none !important;
}
.tile i {
    font-size: 36px !important;
    color: #0066FF !important;
    margin-bottom: 14px !important;
    display: block !important;
}
.tile .stat {
    font-size: 42px !important;
    font-weight: 900 !important;
    color: #fff !important;
    line-height: 1 !important;
    margin-bottom: 8px !important;
    font-family: Cairo, sans-serif !important;
}
.tile .title {
    font-size: 11px !important;
    color: #6688BB !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    font-weight: 700 !important;
}
.tile .highlight {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    border-radius: 0 0 18px 18px !important;
}
.bg-color-blue  { background: #0066FF !important; }
.bg-color-green { background: #00C85A !important; }
.bg-color-red   { background: #FF3B3B !important; }
.bg-color-gold  { background: #FFB300 !important; }
.client-home-cards .card, .card {
    background: #0D1526 !important;
    border: 1px solid rgba(0,102,255,0.18) !important;
    border-radius: 18px !important;
    box-shadow: none !important;
    margin-bottom: 20px !important;
}
.card-header {
    background: #0D1526 !important;
    border-bottom: 1px solid rgba(0,102,255,0.15) !important;
    border-radius: 18px 18px 0 0 !important;
    padding: 16px 22px !important;
}
.card-header i { color: #0066FF !important; margin-right: 8px !important; }
.btn {
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 13px !important;
    padding: 8px 18px !important;
    transition: all 0.2s !important;
    font-family: Cairo, sans-serif !important;
}
.btn-primary, .btn-success {
    background: #0066FF !important;
    color: #fff !important;
    box-shadow: none !important;
    border: none !important;
}
.btn-primary:hover, .btn-success:hover {
    background: #0055DD !important;
    box-shadow: 0 4px 20px rgba(0,102,255,0.4) !important;
}
.btn-default {
    background: #111B2E !important;
    color: #C8D4F0 !important;
    border: 1px solid rgba(0,102,255,0.25) !important;
}
.btn-default:hover { background: #1A2845 !important; color: #fff !important; }
.sidebar .panel, .sidebar .card {
    border-radius: 18px !important;
    box-shadow: none !important;
}
.list-group-item {
    padding: 12px 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}
.main-navbar-wrapper { border-top: 1px solid rgba(0,102,255,0.1) !important; }
.navbar-nav .nav-link {
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
}

/* ===== DROPDOWN MENUS ===== */
.dropdown-menu {
    background: #0D1526 !important;
    border: 1px solid rgba(0,102,255,0.25) !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 40px rgba(0,0,0,0.5) !important;
    padding: 8px !important;
    margin-top: 4px !important;
}
.dropdown-menu > li > a,
.dropdown-menu .dropdown-item {
    color: #C8D4F0 !important;
    border-radius: 8px !important;
    padding: 9px 16px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.15s !important;
    display: block !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu .dropdown-item:hover {
    background: rgba(0,102,255,0.15) !important;
    color: #fff !important;
}
.dropdown-menu > li.active > a,
.dropdown-menu .dropdown-item.active {
    background: #0066FF !important;
    color: #fff !important;
}
.dropdown-divider { border-color: rgba(0,102,255,0.15) !important; }

/* ===== MAIN NAV LINKS ===== */
.navbar-nav > li > a,
.nav-item .nav-link {
    color: #8899BB !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    transition: all 0.2s !important;
}
.navbar-nav > li > a:hover,
.nav-item .nav-link:hover {
    color: #fff !important;
    background: rgba(0,102,255,0.1) !important;
}
.navbar-nav > li.open > a,
.nav-item.show .nav-link {
    color: #fff !important;
    background: rgba(0,102,255,0.12) !important;
}

/* ===== TOPBAR ===== */
.topbar { font-size: 13px !important; }
.topbar .btn { font-size: 13px !important; color: #8899BB !important; }
.topbar .btn:hover { color: #fff !important; }
.input-group-text { font-size: 13px !important; }

/* ===== SIDEBAR LINKS ===== */
.sidebar a,
.list-group-item a {
    color: #C8D4F0 !important;
    text-decoration: none !important;
}
.sidebar a:hover { color: #fff !important; }

/* ===== ALL PAGE LINKS ===== */
.primary-content a:not(.btn):not(.tile):not(.navbar-brand) {
    color: #4488FF !important;
    text-decoration: none !important;
}
.primary-content a:not(.btn):not(.tile):not(.navbar-brand):hover {
    color: #77AAFF !important;
    text-decoration: underline !important;
}

/* ===== STORE CARDS ===== */
.store .product-list .product,
.store .col-md-4,
.store .col-sm-6,
.product-list-item,
.store .panel,
.store .card,
#store .card,
#store .panel {
    background: #0D1526 !important;
    border: 1px solid rgba(0,102,255,0.2) !important;
    border-radius: 18px !important;
    color: #fff !important;
}
.store h2, .store h3, .store h4,
#store h2, #store h3, #store h4 {
    color: #fff !important;
}
.store .text-muted, #store .text-muted { color: #8899BB !important; }
.store .price, #store .price { color: #0066FF !important; font-weight: 900 !important; }

/* ===== PRODUCT CARDS IN STORE ===== */
div[class*="col-"] .panel,
div[class*="col-"] .card {
    background: #0D1526 !important;
    border: 1px solid rgba(0,102,255,0.18) !important;
    border-radius: 18px !important;
    color: #fff !important;
}
div[class*="col-"] .panel-body,
div[class*="col-"] .card-body {
    background: #0D1526 !important;
    color: #fff !important;
}
div[class*="col-"] .panel-footer,
div[class*="col-"] .card-footer {
    background: #0A1020 !important;
    border-top: 1px solid rgba(0,102,255,0.15) !important;
}

/* ===== STORE PRICING CARDS ===== */
.pricing-section { background: #050A14 !important; }
.background-light { background: #080F1E !important; }
.background-main  { background: #050A14 !important; }
.pricing-card {
    background: #0D1526 !important;
    border: 1px solid rgba(0,102,255,0.2) !important;
    border-radius: 18px !important;
    color: #fff !important;
}
.pricing-header { background: #111B2E !important; border-radius: 18px 18px 0 0 !important; padding: 24px !important; }
.plan-name { color: #fff !important; font-weight: 700 !important; }
.plan-price { color: #0066FF !important; font-weight: 900 !important; }
.price-amount { color: #0066FF !important; font-size: 32px !important; font-weight: 900 !important; }
.plan-description { color: #8899BB !important; }
.plan-features { background: #0D1526 !important; }
.feature-item { color: #C8D4F0 !important; border-bottom: 1px solid rgba(0,102,255,0.08) !important; }
.feature-check { color: #00C85A !important; }
.feature-cross  { color: #FF3B3B !important; }
.plan-action { background: #0D1526 !important; border-top: 1px solid rgba(0,102,255,0.15) !important; border-radius: 0 0 18px 18px !important; padding: 20px !important; }
.plan-button {
    background: #0066FF !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    padding: 10px 24px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
}
.plan-button:hover { background: #0044CC !important; }
.pricing-title, .pricing-subtitle { color: #fff !important; }

/* ===== STORE ORDER PAGE ===== */
.store-order-container,
.tab-content.bg-white,
.store-domain-tab-content,
.bg-white { background: #0D1526 !important; }
.nav-tabs { border-bottom: 1px solid rgba(0,102,255,0.2) !important; }
.nav-tabs .nav-link { color: #8899BB !important; border-radius: 8px 8px 0 0 !important; }
.nav-tabs .nav-link.active { background: #0D1526 !important; color: #fff !important; border-color: rgba(0,102,255,0.3) !important; }
.tab-pane { background: #0D1526 !important; color: #fff !important; }

/* ===== STORE PRODUCT CARDS (order.tpl) ===== */
.store .panel, .store-order-container .panel,
.product-addons .panel { background: #0D1526 !important; border-color: rgba(0,102,255,0.2) !important; border-radius: 16px !important; }
.custom-select {
    background-color: #111B2E !important;
    color: #fff !important;
    border-color: rgba(0,102,255,0.3) !important;
    border-radius: 8px !important;
}