/* FaceServers WHMCS Theme - CSS Variables and Base Styling */

:root {
    /* Primary / Accent Colors */
    --primary: #ac8e13;
    --primary-lifted: rgba(255, 204, 0, 0.75);
    --primary-accented: rgba(255, 204, 0, 0.9);

    /* Backgrounds */
    --bg: #3d3d3d;
    --bg-lifted: #333;
    --bg-accented: #2a2a2a;
    --bg-inverted: #1f1f1f;

    /* Text */
    --text: #838383;
    --text-lifted: #cecece;
    --text-accented: #fff;

    /* Borders */
    --border: #444;
    --border-lifted: #555;

    /* Rounding */
    --rounding-md: 0.5rem;
    --rounding-lg: 1.25rem;

    /* Transitions */
    --transition-speed: 0.25s;
}

/* Layout */
#wrapper .container > .row {
    margin: 0 -15px;
}

#maincontent {
    padding: 2rem 1rem;
}

@media (min-width: 768px) {
    #maincontent {
        padding: 3rem 2rem;
    }
}

/* Layout */
#wrapper .container > .row {
    margin: 0 -15px;
}

#maincontent {
    padding: 2rem 1rem;
}

@media (min-width: 768px) {
    #maincontent {
        padding: 3rem 2rem;
    }
}

/* Typography */
body {
    font-family: 'Inter', 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: var(--bg);
    color: var(--text);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 800;
    color: var(--text-accented);
}

a {
    color: var(--primary);
    transition: color var(--transition-speed) ease;
}

a:hover {
    color: var(--primary-accented);
    text-decoration: none;
}

/* Cards / Panels */
.card, .panel, .list-group-item, .well {
    background-color: var(--bg-lifted);
    border-color: var(--border);
    border-radius: var(--rounding-lg) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.card:hover, .panel:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.15);
}

.card-header, .panel-heading {
    background-color: var(--bg-accented);
    border-color: var(--border);
    color: var(--text-accented);
}

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

.card-title, .panel-title {
    color: var(--text-accented);
}

/* Buttons */
.btn-primary, .btn-gold {
    background-color: rgba(255, 204, 0, 0.6) !important;
    border-color: rgba(255, 204, 0, 0.6) !important;
    color: #fff !important;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: var(--rounding-md) !important;
    transition: background-color var(--transition-speed) ease, transform var(--transition-speed) ease;
}

.btn-primary:hover, .btn-gold:hover {
    background-color: rgba(255, 204, 0, 0.75) !important;
    border-color: rgba(255, 204, 0, 0.75) !important;
    transform: translateY(-1px);
}

.btn-primary:active, .btn-gold:active {
    transform: translateY(0);
}

/* Override default Bootstrap button styles */
.btn {
    border-radius: var(--rounding-md);
    font-weight: 600;
    transition: all var(--transition-speed) ease;
}

/* Fix unreadable buttons on dark background - Cancel, secondary actions */
.btn-default, .btn-secondary, .btn-light {
    background-color: #444 !important;
    border-color: #555 !important;
    color: #fff !important;
}

.btn-default:hover, .btn-secondary:hover, .btn-light:hover {
    background-color: #555 !important;
    color: #fff !important;
}

/* Form Inputs */
.form-control, input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"], input[type="url"],
textarea, select {
    background-color: var(--bg-accented);
    border-color: var(--border);
    color: var(--text-lifted);
    border-radius: var(--rounding-md) !important;
    transition: border-color var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.form-control:focus, input:focus, textarea:focus, select:focus {
    background-color: var(--bg-inverted);
    border-color: var(--primary);
    color: var(--text-accented);
    box-shadow: 0 0 0 2px rgba(172, 142, 19, 0.3);
}

.form-control::placeholder {
    color: #666;
}

label {
    color: var(--text-lifted);
    font-weight: 600;
}

/* Navigation Bar */
.navbar {
    background-color: var(--bg-lifted) !important;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}

.navbar-brand {
    color: var(--text-accented) !important;
}

.navbar-nav .nav-link {
    color: var(--text-lifted) !important;
    font-weight: 600;
    transition: color var(--transition-speed) ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--primary) !important;
}

.navbar-toggler {
    border-color: var(--border-lifted) !important;
}

.navbar-toggler-icon {
    filter: invert(1);
}

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--bg-lifted);
    border-color: var(--border);
}

/* BS3 JS toggles .open class and display:block; BS4 CSS uses .show + visibility/opacity */
.open > .dropdown-menu,
.open > .dropdown-menu > .dropdown-menu-parent {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.dropdown-menu .dropdown-item {
    color: var(--text);
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: var(--bg-accented);
    color: var(--primary);
}

/* Sidebar - match cart page styling (transparent/lighter) */
.sidebar {
    background-color: transparent;
    border-color: transparent;
}

.sidebar .panel,
.sidebar .card {
    background-color: var(--bg-lifted);
    border: 1px solid var(--border);
    border-radius: var(--rounding-lg) !important;
    margin-bottom: 1rem;
}

.sidebar .nav-link {
    color: var(--text);
    border-radius: var(--rounding-md);
    transition: all var(--transition-speed) ease;
}

.sidebar .nav-link:hover,
.sidebar .nav-link.active {
    background-color: var(--bg-accented);
    color: var(--primary);
}

/* Footer */
footer {
    background-color: var(--bg-lifted) !important;
    border-top: 1px solid var(--border);
}

footer a {
    color: var(--text);
    transition: color var(--transition-speed) ease;
}

footer a:hover {
    color: var(--primary);
}

footer p, footer span, footer small {
    color: var(--text);
}

/* Tables */
.table {
    color: var(--text);
}

.table thead th {
    background-color: var(--bg-accented);
    border-color: var(--border);
    color: var(--text-accented);
}

.table tbody td {
    border-color: var(--border);
    color: var(--text);
}

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

.table-hover tbody tr:hover {
    background-color: var(--bg-accented);
    color: var(--text-lifted);
}

/* Homepage product cards */
.homepage .product-group-card {
    background-color: var(--bg-lifted);
    border: 1px solid var(--border);
    border-radius: var(--rounding-lg) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
    transition: all var(--transition-speed) ease;
}

.homepage .product-group-card:hover {
    border-color: var(--primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 25px rgba(172, 142, 19, 0.15);
}

/* Action icon buttons */
.action-icon {
    background-color: var(--bg-lifted);
    border: 1px solid var(--border);
    color: var(--text-lifted);
    border-radius: var(--rounding-lg) !important;
    transition: all var(--transition-speed) ease;
}

.action-icon:hover {
    background-color: var(--bg-accented);
    border-color: var(--primary);
    color: var(--primary);
    transform: translateY(-2px);
}

/* Client Area stat tiles */
.stat-tile, .dashboard-stat {
    background-color: var(--bg-lifted);
    border: 1px solid var(--border);
    border-radius: var(--rounding-lg) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
}

.stat-tile .stat-value, .dashboard-stat .stat-value {
    color: var(--text-accented);
    font-weight: 800;
}

.stat-tile .stat-label, .dashboard-stat .stat-label {
    color: var(--text);
}

/* Login page */
.login-container {
    background-color: var(--bg-lifted);
    border-radius: var(--rounding-lg) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

/* Breadcrumbs */
.breadcrumb {
    background-color: var(--bg-lifted);
    border-radius: var(--rounding-md);
}

.breadcrumb-item a {
    color: var(--primary);
}

.breadcrumb-item.active {
    color: var(--text-lifted);
}

/* Alerts */
.alert {
    border-radius: var(--rounding-md);
    border: none;
}

.alert-info {
    background-color: rgba(172, 142, 19, 0.15);
    color: var(--primary-accented);
    border: 1px solid rgba(172, 142, 19, 0.3);
}

.alert-success {
    background-color: rgba(40, 167, 69, 0.15);
    color: #5dd879;
    border: 1px solid rgba(40, 167, 69, 0.3);
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.15);
    color: #ffc107;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.15);
    color: #ea5455;
    border: 1px solid rgba(220, 53, 69, 0.3);
}

/* Pagination */
.pagination .page-link {
    background-color: var(--bg-lifted);
    border-color: var(--border);
    color: var(--text-lifted);
    border-radius: var(--rounding-md) !important;
}

.pagination .page-link:hover {
    background-color: var(--bg-accented);
    color: var(--primary);
}

.pagination .active .page-link {
    background-color: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* Modals - BS3 .in class fix for BS4 CSS */
.modal.fade.in {
    opacity: 1 !important;
}

.modal-content {
    background-color: var(--bg-lifted);
    border: 1px solid var(--border);
    border-radius: var(--rounding-lg) !important;
}

.modal-header {
    border-bottom-color: var(--border);
}

.modal-footer {
    border-top-color: var(--border);
}

.modal-title {
    color: var(--text-accented);
}

/* Modal footer buttons - white text on dark bg */
.modal-footer .btn-default,
.modal-footer .btn-secondary {
    background-color: #444 !important;
    border-color: #555 !important;
    color: #fff !important;
}

.modal-footer .btn-default:hover,
.modal-footer .btn-secondary:hover {
    background-color: #555 !important;
    color: #fff !important;
}

/* Badges */
.badge {
    font-weight: 700;
    border-radius: var(--rounding-md);
}

/* Progress bars */
.progress {
    background-color: var(--bg-accented);
    border-radius: var(--rounding-md);
}

/* Tabs */
.nav-tabs .nav-link {
    color: var(--text);
    border-radius: var(--rounding-md) var(--rounding-md) 0 0;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link.active {
    color: var(--primary);
}

.nav-tabs .nav-link.active {
    background-color: var(--bg-lifted);
    border-color: var(--border);
    border-bottom-color: transparent;
}

.tab-content {
    background-color: var(--bg-lifted);
    border: 1px solid var(--border);
    border-top: none;
    border-radius: 0 0 var(--rounding-md) var(--rounding-md);
}

/* Scrollbar styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: var(--border-lifted);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .card, .panel {
        border-radius: var(--rounding-md) !important;
    }

    .navbar-nav .nav-link {
        padding: 0.5rem 1rem;
    }

    .stat-tile, .dashboard-stat {
        margin-bottom: 1rem;
    }
}

/* WHMCS-specific overrides */
#headerArea {
    background-color: var(--bg-lifted) !important;
}

#footerArea {
    background-color: var(--bg-lifted) !important;
}

.clientareahome .card {
    border-radius: var(--rounding-lg) !important;
}

/* Client area greeting - ensure name is visible */
.welcome-msg, .welcome-message, #welcome-msg,
.greeting, .client-name, .user-greeting {
    color: var(--text-accented) !important;
}

.welcome-msg *, .welcome-message *, #welcome-msg *,
.greeting *, .client-name *, .user-greeting * {
    color: var(--text-accented) !important;
}

/* Client area page headers */
.page-header h1, .page-header h2, .page-header h3 {
    color: var(--text-accented) !important;
}

/* Fix loading spinner that shouldn't be visible - only hide stale spinners */
#maincontent .loader:not(.active),
#maincontent .loader[style*="display: block"]:not(:animated) {
    /* Don't force-hide; let JS control visibility */
}

/* Security page / 2FA - ensure content is visible */
#security-content, .security-settings, .two-factor-auth,
#twofa, #twofactorauth, .mfa-container {
    display: block !important;
    color: var(--text) !important;
}

/* Client area action pages - ensure forms and content visible */
.clientarea .form-group, .clientarea .panel-body,
#maincontent .card-body, #maincontent .panel-body {
    color: var(--text) !important;
}

/* Hide domain search on homepage (FaceServers doesn't sell domains) */
.homepage #domainRegister,
.homepage .domain-search,
.homepage [data-nav="domains"] {
    display: none !important;
}

/* WHMCS Store / Cart pages - header readability */
.cart-body .header-lined,
#order-standard_cart .header-lined {
    background-color: #2a2a2a !important;
    border-radius: var(--rounding-lg) !important;
    padding: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.cart-body .header-lined h1,
#order-standard_cart .header-lined h1 {
    color: #fff !important;
}

.cart-body .header-lined p,
#order-standard_cart .header-lined p {
    color: var(--text) !important;
}

/* Store product page header */
.product-config-header,
.configuration-step h2,
.configuration-step h3 {
    color: #fff !important;
}

/* Checkout / confirmation pages */
.order-summary .card-header,
.checkout-review .card-header {
    background-color: var(--bg-accented) !important;
    color: #fff !important;
}

/* Nexus Registration Page - preserve form layout */
#registration .prepend-icon {
    position: relative;
}

#registration .field-icon {
    position: absolute;
    left: 12px;
    top: 38px;
    z-index: 2;
    color: #838383;
    pointer-events: none;
}

#registration .prepend-icon .form-control,
#registration .prepend-icon input.field {
    padding-left: 35px !important;
    width: 100% !important;
}

/* Password strength meter */
.passwordstrength {
    height: 8px !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    margin-top: 5px !important;
}

.passwordstrength .meter {
    height: 100% !important;
    transition: width 0.3s ease, background-color 0.3s ease !important;
}

.passwordstrength-weak { background-color: #dc3545 !important; }
.passwordstrength-moderate { background-color: #ffc107 !important; }
.passwordstrength-strong { background-color: #28a745 !important; }

/* Registration card styling */
#registration .card {
    background-color: var(--bg-lifted) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--rounding-lg) !important;
}

#registration .card-title {
    color: var(--text-accented) !important;
    font-weight: 800;
}

/* Login page card */
.login-container .form-group label {
    color: var(--text-lifted);
    font-weight: 600;
}

/* Mailing list opt-in on clientarea details page - checkbox left of text */
.marketing-email-optin,
.mailing-list-optin {
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 2rem !important;
}

.marketing-email-optin input[type="checkbox"],
.mailing-list-optin input[type="checkbox"] {
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
}

.marketing-email-optin h4,
.marketing-email-optin h5,
.mailing-list-optin h4,
.mailing-list-optin h5 {
    grid-column: 2 !important;
    grid-row: 1 !important;
    margin-bottom: 0 !important;
}

.marketing-email-optin p,
.mailing-list-optin p {
    grid-column: 2 !important;
    grid-row: 2 !important;
    margin-top: 4px !important;
}