/* ================================================
   GOSITEME - COMPLETE WHMCS OVERHAUL
   Makes WHMCS look identical to the main site
   ================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --primary: #0074D9;
    --primary-light: #00A8FF;
    --cyan: #00D4FF;
    --purple: #7D00FF;
    --purple-light: #9D4EDD;
    --dark: #0a0a14;
    --dark-light: #12121f;
    --dark-card: #1a1a2e;
    --dark-card-hover: #252542;
    --text: #e0e0e0;
    --text-muted: #a8b2d1;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --border: rgba(255, 255, 255, 0.08);
    --border-hover: rgba(0, 168, 255, 0.3);
    --glow-primary: 0 4px 20px rgba(0, 116, 217, 0.4);
    --glow-purple: 0 4px 20px rgba(125, 0, 255, 0.4);
    --gradient-primary: linear-gradient(135deg, #0074D9, #00A8FF);
    --gradient-purple: linear-gradient(135deg, #7D00FF, #00A8FF);
}

/* ===== RESET & BASE ===== */
* {
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}

html, body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    background: #0a0a14 !important;
    color: var(--text) !important;
    line-height: 1.6 !important;
}

body {
    background: linear-gradient(180deg, #0a0a14 0%, #0f0f1a 50%, #0a0a14 100%) !important;
    background-attachment: fixed !important;
    min-height: 100vh;
}

/* Subtle grid overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(rgba(0, 168, 255, 0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 168, 255, 0.015) 1px, transparent 1px);
    background-size: 60px 60px;
    pointer-events: none;
    z-index: 0;
}

body > * {
    position: relative;
    z-index: 1;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Space Grotesk', sans-serif !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
}

p, span, div, li, td, th, label, input, select, textarea, button, a {
    font-family: 'Inter', sans-serif !important;
}

a {
    color: var(--cyan) !important;
    text-decoration: none !important;
}

a:hover {
    color: var(--primary-light) !important;
}

/* ===== CUSTOM HEADER ALREADY IN TEMPLATE ===== */
/* Hide old WHMCS header elements - custom one is in header.tpl */
#header.header,
header#header {
    display: none !important;
}

/* Hide breadcrumb */
.master-breadcrumb,
nav[aria-label="breadcrumb"] {
    display: none !important;
}

/* ===== BREADCRUMB ===== */
.master-breadcrumb,
.breadcrumb,
nav[aria-label="breadcrumb"] {
    background: rgba(0, 0, 0, 0.3) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 14px 0 !important;
    margin: 0 !important;
}

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

.breadcrumb-item,
.breadcrumb li,
.breadcrumb a {
    color: var(--text-muted) !important;
    font-size: 0.9rem !important;
}

.breadcrumb-item.active {
    color: var(--cyan) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.3) !important;
}

/* ===== MAIN CONTENT AREA ===== */
#main-body,
.main-content,
section#main-body,
main,
.wrapper,
#wrapper,
.content-wrapper {
    background: transparent !important;
    padding: 40px 0 80px !important;
}

.container {
    max-width: 1320px !important;
}

.primary-content,
.col-12.primary-content {
    background: transparent !important;
}

/* Force transparent backgrounds on all wrapper/content divs */
.main-content > .container,
#main-body > .container,
.home-content,
.portal-content {
    background: transparent !important;
}

/* Page Titles */
h1.page-title,
.page-header h1,
h1:first-of-type {
    font-size: 2.5rem !important;
    margin-bottom: 12px !important;
}

/* ===== BUTTONS ===== */
.btn {
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
    padding: 12px 24px !important;
    border-radius: 12px !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.btn-primary,
.btn-success {
    background: var(--gradient-purple) !important;
    color: #fff !important;
    box-shadow: var(--glow-purple) !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(125, 0, 255, 0.5) !important;
}

.btn-info {
    background: var(--gradient-primary) !important;
    color: #fff !important;
    box-shadow: var(--glow-primary) !important;
}

.btn-default,
.btn-secondary,
.btn-outline-primary,
.btn-light {
    background: rgba(255, 255, 255, 0.05) !important;
    color: var(--text) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
}

.btn-default:hover,
.btn-secondary:hover,
.btn-outline-primary:hover,
.btn-light:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--cyan) !important;
    color: var(--cyan) !important;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4) !important;
}

.btn-warning {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
    color: #000 !important;
}

.btn-sm {
    padding: 8px 16px !important;
    font-size: 0.85rem !important;
    border-radius: 8px !important;
}

.btn-lg {
    padding: 16px 32px !important;
    font-size: 1.1rem !important;
    border-radius: 14px !important;
}

.btn-block {
    width: 100% !important;
}

/* ===== CARDS & PANELS ===== */
.card,
.panel,
.panel-default,
.well,
.box,
.card-sidebar,
.panel-sidebar {
    background: rgba(26, 26, 46, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
    overflow: hidden !important;
    margin-bottom: 24px !important;
}

.card:hover,
.panel:hover {
    border-color: var(--border-hover) !important;
    box-shadow: 0 15px 50px rgba(0, 116, 217, 0.15) !important;
}

.card-header,
.panel-heading,
.panel-default > .panel-heading {
    background: linear-gradient(135deg, rgba(0, 116, 217, 0.12), rgba(125, 0, 255, 0.08)) !important;
    border-bottom: 1px solid rgba(0, 168, 255, 0.12) !important;
    padding: 20px 24px !important;
    color: #fff !important;
}

.card-header h3,
.panel-heading h3,
.panel-title {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.card-body,
.panel-body {
    padding: 24px !important;
    color: var(--text) !important;
}

.card-footer,
.panel-footer {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid var(--border) !important;
    padding: 16px 24px !important;
}

/* ===== SIDEBAR ===== */
.sidebar,
.cart-sidebar {
    margin-bottom: 24px !important;
}

.sidebar .card,
.sidebar .panel,
.cart-sidebar .card {
    background: rgba(26, 26, 46, 0.6) !important;
}

.list-group {
    background: transparent !important;
    border-radius: 12px !important;
    overflow: hidden !important;
}

.list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    padding: 14px 20px !important;
    font-weight: 500 !important;
}

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

.list-group-item:hover,
.list-group-item:focus {
    background: rgba(0, 168, 255, 0.08) !important;
    color: var(--cyan) !important;
}

.list-group-item.active {
    background: rgba(0, 168, 255, 0.15) !important;
    color: var(--cyan) !important;
    border-left: 3px solid var(--cyan) !important;
    font-weight: 600 !important;
}

.list-group-item i {
    margin-right: 10px !important;
    width: 20px !important;
    text-align: center !important;
}

/* ===== FORMS ===== */
.form-control,
input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
select,
textarea,
.input-group .form-control,
.domain-checker input,
input.domain-lookup-field,
#inputDomainChooser,
input[name="domain"],
input[placeholder*="example"],
input[placeholder*="domain"] {
    background: rgba(20, 20, 35, 0.95) !important;
    background-color: rgba(20, 20, 35, 0.95) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    color: #fff !important;
    padding: 14px 18px !important;
    font-size: 1rem !important;
    font-weight: 400 !important;
}

.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    background: rgba(25, 25, 45, 0.98) !important;
    background-color: rgba(25, 25, 45, 0.98) !important;
    border-color: var(--cyan) !important;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.12) !important;
    outline: none !important;
    color: #fff !important;
}

.form-control::placeholder,
input::placeholder {
    color: rgba(168, 178, 209, 0.5) !important;
}

/* Input group wrapper */
.input-group {
    background: rgba(20, 20, 35, 0.95) !important;
    border-radius: 12px !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    overflow: hidden !important;
}

.input-group .form-control {
    border: none !important;
    border-radius: 12px 0 0 12px !important;
}

.input-group:focus-within {
    border-color: var(--cyan) !important;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.12) !important;
}

label,
.control-label,
.form-label {
    color: var(--text) !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.form-group {
    margin-bottom: 20px !important;
}

/* Select dropdowns */
select.form-control,
.custom-select {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2300D4FF' viewBox='0 0 16 16'%3E%3Cpath d='M8 11L3 6h10l-5 5z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    padding-right: 44px !important;
}

/* Checkboxes & Radio */
.form-check-input {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

.form-check-input:checked {
    background-color: var(--cyan) !important;
    border-color: var(--cyan) !important;
}

/* ===== TABLES ===== */
.table,
table,
.table-responsive,
.table-responsive table,
.pricing-table,
.domain-pricing-table {
    color: var(--text) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin-bottom: 0 !important;
    background: rgba(26, 26, 46, 0.9) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

.table-responsive {
    background: rgba(26, 26, 46, 0.9) !important;
    border-radius: 16px !important;
    border: 1px solid var(--border) !important;
}

.table > thead > tr > th,
table > thead > tr > th,
.table-thead th,
thead th {
    background: linear-gradient(135deg, rgba(0, 116, 217, 0.2), rgba(125, 0, 255, 0.15)) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 18px 20px !important;
}

.table > thead > tr > th:first-child,
thead th:first-child {
    border-radius: 16px 0 0 0 !important;
}

.table > thead > tr > th:last-child,
thead th:last-child {
    border-radius: 0 16px 0 0 !important;
}

.table > tbody > tr,
table > tbody > tr,
tbody tr {
    background: transparent !important;
}

.table > tbody > tr > td,
table > tbody > tr > td,
tbody td {
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 16px 20px !important;
    vertical-align: middle !important;
    background: transparent !important;
    color: var(--text) !important;
}

.table > tbody > tr:last-child > td,
tbody tr:last-child td {
    border-bottom: none !important;
}

.table > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > td,
tbody tr:hover td {
    background: rgba(0, 168, 255, 0.08) !important;
}

.table-striped > tbody > tr:nth-of-type(odd) > td,
tbody tr:nth-of-type(odd) td {
    background: rgba(255, 255, 255, 0.02) !important;
}

.table-striped > tbody > tr:nth-of-type(even) > td,
tbody tr:nth-of-type(even) td {
    background: rgba(0, 0, 0, 0.15) !important;
}

/* Domain pricing table specific */
.domain-pricing td:first-child,
table td:first-child .domain-ext,
td .tld {
    color: var(--cyan) !important;
    font-weight: 600 !important;
}

/* Price cells */
td .price,
td span[class*="price"],
.domain-price,
td:nth-child(2),
td:nth-child(3),
td:nth-child(4) {
    color: var(--text) !important;
    font-weight: 500 !important;
}

/* Promo/sale badges in tables */
.table .badge,
td .badge {
    background: rgba(16, 185, 129, 0.2) !important;
    color: var(--success) !important;
}

/* ===== DOMAIN SEARCH PAGE ===== */
.domain-checker-container,
.domain-search-container,
.domain-checker,
[class*="domain-search"],
.domainchecker {
    background: rgba(26, 26, 46, 0.85) !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    padding: 40px !important;
    margin-bottom: 32px !important;
}

/* Domain search input */
.domain-checker input[type="text"],
.domain-search input,
input[name*="domain"],
.input-domain,
#inputDomain {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    padding: 20px 24px !important;
    font-size: 1.2rem !important;
    color: #fff !important;
    width: 100% !important;
}

.domain-checker input:focus,
.domain-search input:focus {
    border-color: var(--cyan) !important;
    box-shadow: 0 0 0 4px rgba(0, 212, 255, 0.15) !important;
}

/* Domain results */
.domain-available,
.available,
[class*="available"] {
    color: var(--success) !important;
}

.domain-unavailable,
.unavailable,
[class*="unavailable"] {
    color: var(--text-muted) !important;
}

/* Domain pricing display */
.domain-price,
.domainprice,
[class*="price"] {
    color: var(--cyan) !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}

/* Spotlight domain result */
.domain-lookup-result,
.spotlight-domain,
[class*="spotlight"] {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(0, 168, 255, 0.1)) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 16px !important;
    padding: 24px !important;
    margin: 24px 0 !important;
    text-align: center !important;
}

/* Suggested domains list */
.suggested-domains,
.domain-suggestions,
[class*="suggestion"] table {
    background: transparent !important;
}

.suggested-domains tr,
.domain-suggestions tr {
    border-bottom: 1px solid var(--border) !important;
}

.suggested-domains td,
.domain-suggestions td {
    padding: 16px 12px !important;
}

/* ===== ORDER / CART PAGES ===== */
#order-standard_cart,
.order-form,
[id*="order-"] {
    color: var(--text) !important;
}

/* Product cards in cart */
.product,
.product-item,
[class*="product"] {
    background: rgba(26, 26, 46, 0.85) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    padding: 28px !important;
    margin-bottom: 20px !important;
    transition: all 0.3s ease !important;
}

.product:hover {
    border-color: var(--border-hover) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 50px rgba(0, 116, 217, 0.15) !important;
}

.product header,
.product-header,
.product h3,
.product-name {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.4rem !important;
    font-weight: 600 !important;
    color: #fff !important;
    margin-bottom: 16px !important;
}

.product-desc,
.product-description,
.product p {
    color: var(--text-muted) !important;
    line-height: 1.7 !important;
    font-size: 0.95rem !important;
}

.product-pricing,
.product-price {
    margin: 20px 0 !important;
}

.product-pricing .price,
.product-price .amount {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: var(--cyan) !important;
}

.btn-order-now,
.order-btn,
button[type="submit"][name*="order"],
a[href*="cart.php?a=add"] {
    background: var(--gradient-purple) !important;
    color: #fff !important;
    padding: 14px 28px !important;
    border-radius: 12px !important;
    font-weight: 600 !important;
    box-shadow: var(--glow-purple) !important;
}

.btn-order-now:hover,
.order-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 30px rgba(125, 0, 255, 0.5) !important;
}

/* Cart summary */
.order-summary,
.cart-summary,
.summary-totals,
[class*="summary"] {
    background: rgba(26, 26, 46, 0.9) !important;
    border: 1px solid rgba(0, 168, 255, 0.2) !important;
    border-radius: 20px !important;
    padding: 28px !important;
}

.total-due,
.grand-total,
.total-due-today,
[class*="total"] strong {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.8rem !important;
    color: var(--cyan) !important;
    font-weight: 700 !important;
}

/* ===== BADGES & LABELS ===== */
.badge,
.label,
.status-label {
    font-weight: 600 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    font-size: 0.8rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.badge-success, .label-success, .badge-active { 
    background: rgba(16, 185, 129, 0.2) !important; 
    color: var(--success) !important; 
}
.badge-warning, .label-warning, .badge-pending { 
    background: rgba(245, 158, 11, 0.2) !important; 
    color: var(--warning) !important; 
}
.badge-danger, .label-danger, .badge-unpaid, .badge-overdue { 
    background: rgba(239, 68, 68, 0.2) !important; 
    color: var(--danger) !important; 
}
.badge-info, .label-info { 
    background: rgba(0, 168, 255, 0.2) !important; 
    color: var(--cyan) !important; 
}
.badge-primary, .label-primary { 
    background: rgba(125, 0, 255, 0.2) !important; 
    color: var(--purple-light) !important; 
}
.badge-secondary, .label-default { 
    background: rgba(255, 255, 255, 0.1) !important; 
    color: var(--text-muted) !important; 
}

/* ===== ALERTS ===== */
.alert {
    border: none !important;
    border-radius: 14px !important;
    padding: 18px 22px !important;
    margin-bottom: 20px !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.alert-info {
    background: rgba(0, 168, 255, 0.12) !important;
    border-left: 4px solid var(--cyan) !important;
    color: var(--cyan) !important;
}

.alert-success {
    background: rgba(16, 185, 129, 0.12) !important;
    border-left: 4px solid var(--success) !important;
    color: var(--success) !important;
}

.alert-warning {
    background: rgba(245, 158, 11, 0.12) !important;
    border-left: 4px solid var(--warning) !important;
    color: var(--warning) !important;
}

.alert-danger,
.alert-error {
    background: rgba(239, 68, 68, 0.12) !important;
    border-left: 4px solid var(--danger) !important;
    color: var(--danger) !important;
}

/* ===== MODALS ===== */
.modal-content {
    background: var(--dark-card) !important;
    border: 1px solid rgba(0, 168, 255, 0.15) !important;
    border-radius: 24px !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6) !important;
    overflow: hidden !important;
}

.modal-header {
    background: linear-gradient(135deg, rgba(0, 116, 217, 0.1), rgba(125, 0, 255, 0.08)) !important;
    border-bottom: 1px solid rgba(0, 168, 255, 0.1) !important;
    padding: 24px 28px !important;
}

.modal-title {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.3rem !important;
    color: #fff !important;
}

.modal-body {
    padding: 28px !important;
    color: var(--text) !important;
}

.modal-footer {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid var(--border) !important;
    padding: 20px 28px !important;
}

.close,
.btn-close {
    color: var(--text-muted) !important;
    opacity: 0.8 !important;
    text-shadow: none !important;
    font-size: 1.5rem !important;
}

.close:hover {
    color: #fff !important;
    opacity: 1 !important;
}

/* ===== PAGINATION ===== */
.pagination {
    gap: 6px !important;
}

.pagination > li > a,
.page-link {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-muted) !important;
    border-radius: 10px !important;
    padding: 10px 16px !important;
    font-weight: 500 !important;
}

.pagination > li > a:hover,
.page-link:hover {
    background: rgba(0, 168, 255, 0.12) !important;
    border-color: var(--cyan) !important;
    color: var(--cyan) !important;
}

.pagination > .active > a,
.page-item.active .page-link {
    background: var(--gradient-primary) !important;
    border-color: transparent !important;
    color: #fff !important;
}

/* ===== FOOTER ===== */
#footer,
footer,
.footer {
    background: rgba(10, 10, 20, 0.98) !important;
    border-top: 1px solid rgba(0, 168, 255, 0.1) !important;
    padding: 48px 0 32px !important;
    margin-top: 80px !important;
}

.footer a {
    color: var(--text-muted) !important;
}

.footer a:hover {
    color: var(--cyan) !important;
}

.footer .nav-link {
    padding: 6px 12px !important;
}

.copyright {
    color: var(--text-muted) !important;
    font-size: 0.9rem !important;
}

/* ===== CLIENT AREA ===== */
.client-home-panels .panel,
.service-list .panel {
    border-radius: 16px !important;
}

/* ===== TABS ===== */
.nav-tabs {
    border-bottom: 1px solid var(--border) !important;
    gap: 4px !important;
}

.nav-tabs .nav-link {
    background: transparent !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    color: var(--text-muted) !important;
    padding: 14px 20px !important;
    border-radius: 0 !important;
    font-weight: 500 !important;
}

.nav-tabs .nav-link:hover {
    border-bottom-color: rgba(0, 168, 255, 0.3) !important;
    color: var(--cyan) !important;
}

.nav-tabs .nav-link.active {
    background: transparent !important;
    border-bottom-color: var(--cyan) !important;
    color: var(--cyan) !important;
}

.tab-content {
    padding: 24px 0 !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--dark);
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 168, 255, 0.25);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 168, 255, 0.4);
}

/* ===== HOME PAGE PANELS & ICONS ===== */
.home-shortcuts,
.client-home-panels,
.panel-group,
.home-panels {
    background: transparent !important;
}

/* Product/Service browsing cards */
.card-deck,
.row .col-sm-4,
.row .col-md-4,
.row .col-lg-4,
.home-shortcuts .row > div,
.panel-teaser,
.shortcut,
.shortcut-icons a,
.icon-panel,
.icon-feature,
.feature-box,
[class*="shortcut"],
.browse-products .card,
.panel-surround {
    background: rgba(26, 26, 46, 0.85) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    color: var(--text) !important;
}

.panel-teaser:hover,
.shortcut:hover,
.shortcut-icons a:hover,
.icon-panel:hover,
.feature-box:hover,
[class*="shortcut"]:hover,
.panel-surround:hover {
    border-color: var(--border-hover) !important;
    background: rgba(30, 30, 50, 0.9) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 40px rgba(0, 116, 217, 0.15) !important;
}

/* Icon containers on homepage */
.icon-panel i,
.shortcut i,
.shortcut-icons i,
.panel-icon,
[class*="shortcut"] i,
.fa-3x,
.fa-4x,
.fa-5x {
    color: var(--cyan) !important;
    opacity: 0.9 !important;
}

/* SVG icons */
.icon-panel svg,
.shortcut svg,
[class*="shortcut"] svg,
.panel-icon svg {
    fill: var(--cyan) !important;
    stroke: var(--cyan) !important;
}

/* All images that are icons */
.icon-panel img,
.shortcut img,
[class*="icon"] img {
    filter: brightness(0) saturate(100%) invert(78%) sepia(76%) saturate(1000%) hue-rotate(155deg) brightness(101%) contrast(103%) !important;
    opacity: 0.85 !important;
}

/* Panel titles */
.panel-teaser h4,
.panel-teaser h5,
.shortcut h4,
.shortcut h5,
.icon-panel h4,
.icon-panel h5,
.icon-panel span,
.feature-box h4,
[class*="shortcut"] h4,
[class*="shortcut"] h5,
[class*="shortcut"] span,
.panel-title a,
.card-title {
    color: #fff !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
}

/* Panel descriptions */
.panel-teaser p,
.shortcut p,
.icon-panel p,
.feature-box p,
[class*="shortcut"] p {
    color: var(--text-muted) !important;
}

/* Section backgrounds on homepage */
section,
.main-content section,
#main-body section,
.section-product,
.section-help,
.section-account {
    background: transparent !important;
}

/* Any white backgrounds force dark */
.bg-white,
.bg-light,
[style*="background: #fff"],
[style*="background:#fff"],
[style*="background: white"],
[style*="background:white"],
[style*="background-color: #fff"],
[style*="background-color:#fff"],
[style*="background-color: white"],
[style*="background-color:white"] {
    background: var(--dark-card) !important;
}

/* Grid/card containers */
.row-eq-height > div,
.card-group .card,
.flex-card {
    background: rgba(26, 26, 46, 0.85) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
}

/* Twenty-one specific panels */
.twenty-one-home-panel,
.panel-accent,
.panel-feature {
    background: rgba(26, 26, 46, 0.85) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
}

/* TWENTY-ONE TEMPLATE CARD ACCENTS - Force all dark */
.card-columns.home .card,
.card-columns .card,
.card.mb-3,
[class*="card-accent-"],
.card-accent-asbestos,
.card-accent-green,
.card-accent-midnight-blue,
.card-accent-pomegranate,
.card-accent-sun-flower,
.card-accent-teal,
.card-accent-peter-river,
.card-accent-wisteria,
.card-accent-alizarin,
.card-accent-carrot,
.card-accent-emerald,
.card-accent-amethyst,
.card-accent-wet-asphalt,
.card-accent-turquoise,
.card-accent-orange,
.card-accent-nephritis,
.card-accent-belize-hole,
.card-accent-clouds,
.card-accent-concrete,
.card-accent-silver {
    background: rgba(26, 26, 46, 0.9) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    color: var(--text) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

.card-columns.home .card:hover,
[class*="card-accent-"]:hover {
    border-color: rgba(0, 168, 255, 0.3) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 15px 40px rgba(0, 116, 217, 0.15) !important;
}

/* Card body inside accent cards */
.card-columns .card .card-body,
[class*="card-accent-"] .card-body {
    background: transparent !important;
    color: var(--text) !important;
}

/* Card titles */
.card-columns .card h4,
.card-columns .card h5,
.card-columns .card .card-title,
[class*="card-accent-"] h4,
[class*="card-accent-"] h5,
[class*="card-accent-"] .card-title {
    color: #fff !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-weight: 600 !important;
}

/* Card text/descriptions */
.card-columns .card p,
.card-columns .card small,
[class*="card-accent-"] p,
[class*="card-accent-"] small {
    color: var(--text-muted) !important;
}

/* Icons inside cards - make cyan */
.card-columns .card i,
.card-columns .card .fal,
.card-columns .card .far,
.card-columns .card .fas,
.card-columns .card .fa,
[class*="card-accent-"] i,
[class*="card-accent-"] .fal,
[class*="card-accent-"] .far,
[class*="card-accent-"] .fas,
[class*="card-accent-"] .fa {
    color: var(--cyan) !important;
}

/* Buttons inside cards */
.card-columns .card .btn,
[class*="card-accent-"] .btn {
    margin-top: 12px !important;
}

.card-columns .card .btn-outline-primary,
[class*="card-accent-"] .btn-outline-primary {
    background: transparent !important;
    border: 1px solid var(--cyan) !important;
    color: var(--cyan) !important;
    border-radius: 10px !important;
    padding: 10px 20px !important;
}

.card-columns .card .btn-outline-primary:hover,
[class*="card-accent-"] .btn-outline-primary:hover {
    background: rgba(0, 212, 255, 0.12) !important;
    color: #fff !important;
}

/* Category panels */
.category-panel,
.product-category,
.service-category {
    background: rgba(26, 26, 46, 0.85) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
}

/* Action items/links panels */
.action-item,
.action-link,
.quick-action {
    background: rgba(26, 26, 46, 0.85) !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    color: var(--text) !important;
}

.action-item:hover,
.action-link:hover,
.quick-action:hover {
    background: rgba(30, 30, 50, 0.9) !important;
    border-color: var(--border-hover) !important;
}

/* ===== MISC ===== */
hr {
    border-color: var(--border) !important;
    opacity: 1 !important;
}

::selection {
    background: rgba(0, 168, 255, 0.3);
    color: #fff;
}

.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--primary-light) !important; }
.text-success { color: var(--success) !important; }
.text-danger { color: var(--danger) !important; }
.text-warning { color: var(--warning) !important; }
.text-info { color: var(--cyan) !important; }

/* Loading spinner */
.fa-spinner,
.spinner,
.loading {
    color: var(--cyan) !important;
}

/* Input groups */
.input-group {
    border-radius: 12px !important;
    overflow: hidden !important;
}

.input-group .form-control {
    border-radius: 12px 0 0 12px !important;
}

.input-group .btn,
.input-group-append .btn {
    border-radius: 0 12px 12px 0 !important;
}

/* ===== FORCE DARK EVERYWHERE ===== */
/* Nuclear option - override any remaining light backgrounds */
div, section, article, aside, header, footer, main, nav,
.card, .panel, .box, .well, .container-fluid,
.jumbotron, .hero, .banner, .wrapper {
    background-color: transparent !important;
}

/* Force all possible white/light colored backgrounds to dark */
.bg-white,
.bg-light,
.bg-gray,
.bg-grey,
[class*="bg-white"],
[class*="bg-light"],
[style*="background: white"],
[style*="background:#fff"],
[style*="background: #fff"],
[style*="background-color: white"],
[style*="background-color:#fff"],
[style*="background-color: #fff"],
[style*="background: rgb(255"],
[style*="background-color: rgb(255"] {
    background: rgba(26, 26, 46, 0.9) !important;
    background-color: rgba(26, 26, 46, 0.9) !important;
}

/* Promo boxes / CTA boxes at bottom of pages */
.promo-box,
.cta-box,
.highlight-box,
.marketing-box,
.upsell-box,
.cross-sell,
[class*="promo"],
[class*="upsell"],
.card.mb-4,
.col-md-6 > .card,
.row > .col-md-6 > div {
    background: rgba(26, 26, 46, 0.9) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
}

/* Those promo cards with icons */
.promo-box h4,
.cta-box h4,
[class*="promo"] h4,
[class*="promo"] h5 {
    color: #fff !important;
}

.promo-box p,
.cta-box p,
[class*="promo"] p {
    color: var(--text-muted) !important;
}

/* FORCE ALL INPUTS DARK - Maximum specificity */
html body input,
html body input.form-control,
html body .form-control,
html body input[type="text"],
html body .input-group input,
html body .domain-search input,
html body .domain-checker-bg input,
html body form input {
    background: rgba(20, 20, 35, 0.95) !important;
    background-color: rgba(20, 20, 35, 0.95) !important;
    color: #fff !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
}

html body .input-group {
    background: rgba(20, 20, 35, 0.95) !important;
    border: 2px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

/* Table wrappers */
.table-container,
.table-wrapper,
.table-responsive,
div.table-responsive,
.pricing-container {
    background: rgba(26, 26, 46, 0.9) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
}

/* Kill ALL remaining white backgrounds on any element */
* {
    --bs-body-bg: #0a0a14 !important;
    --bs-card-bg: rgba(26, 26, 46, 0.9) !important;
    --bs-table-bg: transparent !important;
}

/* Specifically target Bootstrap card backgrounds */
.card {
    background: rgba(26, 26, 46, 0.9) !important;
    --bs-card-bg: rgba(26, 26, 46, 0.9) !important;
}

.card .card-body {
    background: transparent !important;
}

/* Override Bootstrap white text utilities */
.text-dark {
    color: var(--text) !important;
}

.bg-white, .bg-light {
    background: rgba(26, 26, 46, 0.9) !important;
}

/* Icon box wrappers */
.icon-wrapper,
.icon-box,
.icon-circle,
.icon-square {
    background: rgba(0, 168, 255, 0.1) !important;
    border: 1px solid rgba(0, 168, 255, 0.2) !important;
    border-radius: 12px !important;
}

/* ===== AI PRODUCT CARDS ===== */
.ai-plan h4 {
    color: var(--cyan) !important;
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.2rem !important;
    margin-bottom: 12px !important;
}

.ai-plan p {
    color: var(--text-muted) !important;
    margin-bottom: 16px !important;
}

.ai-plan ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}

.ai-plan li {
    color: var(--text) !important;
    padding: 8px 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    font-size: 0.9rem !important;
    position: relative !important;
    padding-left: 24px !important;
}

.ai-plan li::before {
    content: '✓';
    position: absolute !important;
    left: 0 !important;
    color: var(--success) !important;
    font-weight: bold !important;
}

.ai-plan li:last-child {
    border-bottom: none !important;
}

/* Featured/Popular product */
.product.featured,
.product[data-featured="1"] {
    border: 2px solid var(--cyan) !important;
    position: relative !important;
}

.product.featured::before,
.product[data-featured="1"]::before {
    content: 'MOST POPULAR';
    position: absolute !important;
    top: -12px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: var(--gradient-purple) !important;
    color: #fff !important;
    padding: 4px 16px !important;
    border-radius: 20px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
}

/* Product pricing emphasis */
.product .price,
.product-pricing .price {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 2.5rem !important;
    font-weight: 700 !important;
    color: var(--cyan) !important;
}

.product .price-period,
.product-pricing .period {
    color: var(--text-muted) !important;
    font-size: 0.9rem !important;
}

/* Order button styling */
.product .btn-order-now,
.product .btn-success {
    background: var(--gradient-purple) !important;
    border: none !important;
    padding: 14px 28px !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 25px rgba(125, 0, 255, 0.4) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    margin-top: 16px !important;
}

.product .btn-order-now:hover,
.product .btn-success:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 35px rgba(125, 0, 255, 0.5) !important;
}

/* Products grid */
.products-list,
.product-group {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 24px !important;
}

/* Product card container */
.product {
    background: rgba(26, 26, 46, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 20px !important;
    padding: 32px !important;
    transition: all 0.4s ease !important;
    display: flex !important;
    flex-direction: column !important;
}

.product:hover {
    border-color: rgba(0, 168, 255, 0.3) !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 50px rgba(0, 116, 217, 0.15) !important;
}

.product header {
    margin-bottom: 20px !important;
}

.product header span {
    font-family: 'Space Grotesk', sans-serif !important;
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.product-desc {
    flex-grow: 1 !important;
}

/* ===== DOMAIN PRICING PAGE ===== */
.domain-pricing,
.tld-pricing,
#domainPricing,
.domain-pricing-table,
[class*="domain-pricing"],
[class*="tld-pricing"] {
    background: rgba(26, 26, 46, 0.9) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
}

.domain-pricing table,
.tld-pricing table,
#domainPricing table {
    background: transparent !important;
}

.domain-pricing th,
.tld-pricing th {
    background: linear-gradient(135deg, rgba(0, 116, 217, 0.2), rgba(125, 0, 255, 0.15)) !important;
    color: #fff !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px !important;
    padding: 16px 20px !important;
    border: none !important;
}

.domain-pricing td,
.tld-pricing td {
    background: transparent !important;
    color: var(--text) !important;
    padding: 14px 20px !important;
    border: none !important;
    border-bottom: 1px solid var(--border) !important;
}

.domain-pricing tr:hover td,
.tld-pricing tr:hover td {
    background: rgba(0, 168, 255, 0.08) !important;
}

/* TLD name column */
.domain-pricing td:first-child,
.tld-pricing td:first-child {
    color: var(--cyan) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
}

/* Yellow/gold left border on rows */
.domain-pricing tr td:first-child,
.tld-pricing tr td:first-child {
    border-left: 3px solid var(--cyan) !important;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .domain-checker-container,
    .domain-search-container {
        padding: 24px !important;
    }
    
    .product {
        padding: 20px !important;
    }
}

@media (max-width: 768px) {
    .card, .panel {
        border-radius: 14px !important;
    }
    
    .card-body, .panel-body {
        padding: 18px !important;
    }
    
    h1.page-title,
    .page-header h1 {
        font-size: 1.8rem !important;
    }
    
    .btn {
        padding: 10px 18px !important;
    }
}

/* ===== ANIMATIONS ===== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.card, .panel, .product, .alert {
    animation: fadeIn 0.4s ease-out;
}