/* F4WEB Dark Tech - Custom CSS */
:root {
    --body-bg: #0f172a;
    --panel-bg: #1e293b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --brand-primary: #0ea5e9;
    /* Sky 500 */
    --brand-hover: #0284c7;
    /* Sky 600 */
    --primary-glow: 0 0 15px rgba(56, 189, 248, 0.5);
    --glass-border: rgba(255, 255, 255, 0.1);
    --font-family: 'Outfit', sans-serif;
}

body {
    background-color: var(--body-bg);
    color: var(--text-main);
    font-family: var(--font-family);
}

/* Typography Overrides */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #fff;
    font-weight: 700;
}

/* Navbar Overrides (if using Bootstrap nav) */
.navbar-main {
    background-color: rgba(15, 23, 42, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--glass-border);
}

/* Dashboard Panels & Cards */
.card,
.panel {
    background-color: var(--panel-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.card-header,
.panel-heading {
    background-color: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--glass-border);
    color: #fff;
    font-weight: 600;
}

.card-body,
.panel-body {
    color: var(--text-muted);
}

/* Tables (Invoices/Tickets/Services) */
.table {
    color: var(--text-muted);
    border-color: #334155;
}

.table thead th {
    border-bottom: 1px solid #334155;
    color: #fff;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.05em;
}

.table td,
.table th {
    border-top: 1px solid #334155;
}

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

.table-hover tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

/* Status Badges */
.label,
.badge {
    padding: 0.35em 0.8em;
    border-radius: 9999px;
    /* Pill */
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.label-success,
.badge-success {
    background-color: rgba(16, 185, 129, 0.2);
    color: #34d399;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.label-danger,
.badge-danger {
    background-color: rgba(239, 68, 68, 0.2);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.label-warning,
.badge-warning {
    background-color: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

/* Forms */
.form-control {
    background-color: #020617;
    border: 1px solid #334155;
    color: #fff;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    background-color: #020617;
    border-color: var(--brand-primary);
    box-shadow: var(--primary-glow);
    color: #fff;
}

/* Buttons */
.btn-primary {
    background-image: linear-gradient(to right, var(--brand-primary), var(--brand-hover));
    border: none;
    box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.2);
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-primary:hover,
.btn-primary:focus {
    box-shadow: var(--primary-glow);
    transform: translateY(-1px);
}

/* Sidebar */
.sidebar {
    background-color: transparent;
}

.sidebar .panel-sidebar {
    background-color: var(--panel-bg);
    border: 1px solid var(--glass-border);
}

.list-group-item {
    background-color: transparent;
    border-color: #334155;
    color: var(--text-muted);
}

.list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.list-group-item.active {
    background-color: rgba(14, 165, 233, 0.1);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
    font-weight: 600;
}

/* Login Page Specifics */
.login-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at top, #1e293b 0%, #0f172a 100%);
}

.login-card {
    background: rgba(30, 41, 59, 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Utility */
.text-neon {
    color: var(--brand-primary);
    text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
}

/* Mega Menu Fixes */
.group:hover>.absolute {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

/* Ensure Dropdown is on top */
.absolute {
    z-index: 100;
}

/* Tailwind Group Fix just in case */
.group {
    position: static;
    /* Allows absolute children to position relative to Header */
}

/* Force Header Z-Index */
#main-header {
    z-index: 1000 !important;
}

/* --- WHMCS ORDER FORM (Standard Cart) OVERRIDES --- */
/* Use !important to force overrides over default stylesheets */

/* Main Containers */
#order-standard_cart .main-content {
    background: transparent !important;
}

#order-standard_cart .header-lined {
    border-bottom: 1px solid var(--glass-border) !important;
    margin-bottom: 2rem;
}

#order-standard_cart .header-lined h1 {
    color: #fff !important;
    font-weight: 700;
}

/* Product Configuration Panel */
#order-standard_cart .product-info {
    background-color: var(--panel-bg) !important;
    border: 1px solid var(--glass-border) !important;
    backdrop-filter: blur(10px);
    border-radius: 1rem;
    padding: 2rem;
    color: #fff !important;
    /* Force text color */
}

#order-standard_cart .product-info p,
#order-standard_cart .product-info li,
#order-standard_cart .product-info span {
    color: #e2e8f0 !important;
    /* Slate 200 */
}

#order-standard_cart .product-info .product-title {
    color: #fff !important;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

/* Configurable Options */
#order-standard_cart .field-container {
    border-bottom: 1px solid var(--glass-border) !important;
}

#order-standard_cart .field-container .col-sm-4 {
    color: #fff !important;
    /* Label Color */
}

/* Order Summary Box */
#order-standard_cart .order-summary {
    background-color: rgba(30, 41, 59, 0.5) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 1rem;
    color: #fff !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

#order-standard_cart .order-summary h2 {
    background: rgba(255, 255, 255, 0.05) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: #fff !important;
    padding: 1rem;
    border-radius: 1rem 1rem 0 0;
    margin: 0;
    text-shadow: none !important;
}

#order-standard_cart .order-summary .summary-container {
    padding: 1rem;
    color: var(--text-muted) !important;
}

#order-standard_cart .order-summary .total-due-today {
    background-color: transparent !important;
    color: #fff !important;
}

#order-standard_cart .order-summary .amt {
    color: var(--brand-primary) !important;
    font-weight: 700;
}

#order-standard_cart .order-summary .loader {
    border: 4px solid var(--brand-primary) !important;
    border-top: 4px solid transparent !important;
}

/* Form Fields in Cart */
#order-standard_cart .form-control {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    color: #fff !important;
}

#order-standard_cart .form-control:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 10px rgba(14, 165, 233, 0.2) !important;
}

#order-standard_cart .input-group-addon {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #94a3b8 !important;
}

/* Cycles Dropdown */
#order-standard_cart .billing-cycle-chooser .billing-cycle-radio {
    background-color: var(--panel-bg) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-muted) !important;
}

#order-standard_cart .billing-cycle-chooser .billing-cycle-radio strong {
    color: #fff !important;
}

#order-standard_cart .billing-cycle-chooser .billing-cycle-radio.active {
    background-color: rgba(14, 165, 233, 0.1) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}

/* --- Checkout Layout Customization (No Sidebar) --- */
/* Hide sidebar */
#order-standard_cart .sidebar {
    display: none !important;
}

/* Force Full Width */
#order-standard_cart .main-content {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    float: none !important;
}

/* Center Content */
#order-standard_cart .row {
    justify-content: center;
}

/* --- CLIENT AREA DASHBOARD OVERRIDES --- */

/* Tiles (Services, Domains, Invoices, Tickets) */
.tiles {
    margin-bottom: 2rem;
}

.tile {
    background-color: var(--panel-bg) !important;
    border: 1px solid var(--glass-border) !important;
    color: #fff !important;
    border-radius: 1rem !important;
}

.tile:hover {
    background-color: rgba(30, 41, 59, 0.8) !important;
    border-color: var(--brand-primary) !important;
}

.tile .stat {
    color: var(--brand-primary) !important;
    font-weight: 700 !important;
    text-shadow: 0 0 10px rgba(14, 165, 233, 0.3);
}

.tile .title {
    color: #94a3b8 !important;
    font-weight: 600;
}

.tile .icon {
    opacity: 0.2 !important;
    color: #fff !important;
}

/* Dashboard Panels (Recent Support Tickets, Active Products, etc) */
.client-home-panels .panel,
.panel-default {
    background-color: var(--panel-bg) !important;
    border: 1px solid var(--glass-border) !important;
    margin-bottom: 2rem !important;
}

.client-home-panels .panel-heading,
.panel-default>.panel-heading {
    background-color: rgba(30, 41, 59, 0.95) !important;
    /* Darker background for header */
    border-bottom: 1px solid var(--glass-border) !important;
    color: #fff !important;
    padding: 1rem 1.5rem !important;
}

.client-home-panels .panel-header .h3,
.client-home-panels .panel-title,
.panel-default>.panel-heading .panel-title {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.client-home-panels .panel-body {
    background-color: transparent !important;
    color: #cbd5e1 !important;
    padding: 1.5rem !important;
}

/* List Groups inside Panels (e.g. Products List) */
.client-home-panels .list-group-item {
    background-color: transparent !important;
    border-bottom: 1px solid var(--glass-border) !important;
    color: #fff !important;
}

.client-home-panels .list-group-item:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Buttons in Panels */
.client-home-panels .btn {
    border-radius: 0.5rem;
}

/* Status Labels Overlay */
.label-active,
.label-success {
    background-color: rgba(16, 185, 129, 0.2) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.label-pending,
.label-warning {
    background-color: rgba(245, 158, 11, 0.2) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

/* Secondary Sidebar (if present on other pages) */
.panel-sidebar {
    background-color: var(--panel-bg) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: 1rem !important;
}

.panel-sidebar .panel-heading {
    background-color: rgba(255, 255, 255, 0.03) !important;
    color: #fff !important;
}

.panel-sidebar .list-group-item {
    border-color: var(--glass-border) !important;
}