/* *****************************************************
   RepoxHosting Portal — React Dashboard Clone
   Zinc palette, Lucide icons, Inter font, sidebar layout
***************************************************** */

/* =====================================================
   CSS VARIABLES
   ===================================================== */
:root {
    --rx-zinc-950: #09090b;
    --rx-zinc-900: #18181b;
    --rx-zinc-800: #27272a;
    --rx-zinc-700: #3f3f46;
    --rx-zinc-600: #52525b;
    --rx-zinc-500: #71717a;
    --rx-zinc-400: #a1a1aa;
    --rx-zinc-300: #d4d4d8;
    --rx-zinc-200: #e4e4e7;
    --rx-zinc-100: #f4f4f5;

    --rx-sidebar-bg: #111;
    --rx-body-bg: #111;
    --rx-card-bg: rgba(24,24,27,0.7);
    --rx-card-solid: #18181b;
    --rx-border: rgba(39,39,42,0.5);
    --rx-border-solid: rgba(39,39,42,0.7);

    --rx-blue-600: #2563eb;
    --rx-blue-500: #3b82f6;
    --rx-blue-400: #60a5fa;
    --rx-blue-glow: rgba(59,130,246,0.2);
    --rx-blue-bg: rgba(59,130,246,0.12);

    --rx-green: #22c55e;
    --rx-amber: #f59e0b;
    --rx-red: #ef4444;

    --rx-sidebar-w: 280px;
    --rx-radius: 8px;
    --rx-radius-lg: 12px;
}

/* =====================================================
   GLOBAL
   ===================================================== */
*, *::before, *::after { box-sizing: border-box; }

body {
    background: var(--rx-body-bg) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    color: var(--rx-zinc-400) !important;
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scrollbar-width: thin;
    scrollbar-color: rgba(59,130,246,0.3) #111;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #111; }
::-webkit-scrollbar-thumb { background: rgba(59,130,246,0.25); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(59,130,246,0.45); }

a { color: var(--rx-blue-400); transition: color 0.15s; }
a:hover { color: var(--rx-blue-500); text-decoration: none; }

h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 { color: var(--rx-zinc-100) !important; font-weight: 600; }
p { color: var(--rx-zinc-400); }
strong, b { color: var(--rx-zinc-200); }
hr { border-color: var(--rx-border); }

/* =====================================================
   LAYOUT
   ===================================================== */
.rx-layout { display: flex; min-height: 100vh; }
.rx-main { flex: 1; min-height: 100vh; background: var(--rx-body-bg); }
.rx-logged-in .rx-main { margin-left: var(--rx-sidebar-w); }
.rx-content { padding: 1.5rem 1.5rem 3rem; max-width: 100%; }

/* Kill WHMCS default chrome */
#header,.rx-header,.rx-nav,.master-breadcrumb,#footer.footer,.footer,
section#main-body,.sidebar,.sidebar-secondary,.breadcrumb,
.row > .col-lg-4.col-xl-3:has(.sidebar) { display: none !important; }

/* Fix WHMCS content columns */
.primary-content { max-width: 100% !important; flex: 0 0 100% !important; }
.col-lg-8.col-xl-9.primary-content { max-width: 100% !important; flex: 0 0 100% !important; }

/* =====================================================
   ADMIN BAR
   ===================================================== */
.rx-admin-bar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
    background: var(--rx-red); padding: 0.4rem 1rem; text-align: center;
}
.rx-admin-return { color: #fff !important; font-size: 0.78rem; font-weight: 500; }
.rx-admin-return i { margin-right: 0.3rem; }

/* =====================================================
   EMAIL VERIFICATION TOAST - REFINED GLASSMORPHISM
   ===================================================== */
.verification-banner.email-verification {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    width: 420px;
    max-width: calc(100vw - 3rem);
    background: rgba(30, 30, 32, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 1rem;
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.48),
        0 2px 8px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    z-index: 10000;
    animation: toastSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    position: fixed;
}

@keyframes toastSlideIn {
    0% {
        transform: translateX(400px) scale(0.9);
        opacity: 0;
    }
    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

.verification-banner .container {
    max-width: 100% !important;
    padding: 0 !important;
}

.verification-banner .row {
    display: flex;
    align-items: center;
    margin: 0 !important;
    gap: 0;
}

.verification-banner .row > [class*="col-"] {
    padding: 0 !important;
}

/* Content container (icon + text) */
.verification-banner .col-10 {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    order: 1;
    padding-right: 2rem !important;
}

/* Close button container */
.verification-banner .col-2 {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: auto;
    order: 2;
}

/* Button container */
.verification-banner .col-12 {
    flex: 0 0 100%;
    width: 100%;
    margin-top: 0.875rem;
    padding-left: 2.625rem !important;
    order: 3;
}

/* Warning Icon */
.verification-banner i.fa-exclamation-triangle {
    color: #fbbf24;
    font-size: 0.9375rem;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, rgba(251, 191, 36, 0.08) 100%);
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid rgba(251, 191, 36, 0.15);
    position: relative;
}

.verification-banner i.fa-exclamation-triangle::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Message Text */
.verification-banner .text {
    color: #f4f4f5;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    flex: 1;
    letter-spacing: -0.01em;
}

/* Close Button */
.verification-banner .btn.close {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: #a1a1aa;
    font-size: 1.125rem;
    font-weight: 400;
    opacity: 1;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 0;
    margin: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
}

.verification-banner .btn.close span {
    line-height: 0;
    font-size: 1.25rem;
    display: block;
}

.verification-banner .btn.close:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
    color: #e4e4e7;
    transform: scale(1.05);
}

.verification-banner .btn.close:active {
    transform: scale(0.95);
}

/* Resend Button */
.verification-banner .btn-resend-verify-email {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1) 0%, rgba(251, 191, 36, 0.08) 100%);
    border: 1px solid rgba(251, 191, 36, 0.2);
    color: #fbbf24;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    letter-spacing: 0.01em;
    cursor: pointer;
}

.verification-banner .btn-resend-verify-email:hover {
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.16) 0%, rgba(251, 191, 36, 0.12) 100%);
    border-color: rgba(251, 191, 36, 0.3);
    color: #fcd34d;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.15);
}

.verification-banner .btn-resend-verify-email:active {
    transform: translateY(0);
}

.verification-banner .btn-resend-verify-email .loader {
    margin-right: 0.5rem;
}

/* Mobile responsive */
@media (max-width: 576px) {
    .verification-banner.email-verification {
        top: 1rem;
        right: 1rem;
        left: 1rem;
        width: auto;
        max-width: none;
    }
    
    .verification-banner i.fa-exclamation-triangle {
        font-size: 1rem;
        width: 32px;
        height: 32px;
    }
    
    .verification-banner .text {
        font-size: 0.8125rem;
    }
}

/* =====================================================
   SIDEBAR
   ===================================================== */
.rx-sidebar {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--rx-sidebar-w);
    background: var(--rx-sidebar-bg);
    border-right: 1px solid rgba(39,39,42,0.7);
    z-index: 100;
    display: flex; flex-direction: column;
}

.rx-sidebar-inner {
    display: flex; flex-direction: column; height: 100%;
    overflow-y: auto; overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.05) transparent;
}

/* Logo */
.rx-sb-logo {
    display: flex; align-items: center;
    height: 64px; padding: 0 1.5rem 0 1rem;
    border-bottom: 1px solid rgba(39,39,42,0.7);
    flex-shrink: 0;
}
.rx-sb-logo a { display: flex; align-items: flex-start; text-decoration: none; }
.rx-sb-logo-img { height: 32px; width: auto; opacity: 0.95; }

/* Nav */
.rx-sb-nav {
    flex: 1; padding: 1rem 1rem;
    display: flex; flex-direction: column; gap: 2px;
}

.rx-sb-section {
    font-size: 0.65rem; font-weight: 600; letter-spacing: 0.08em;
    color: var(--rx-zinc-500); padding: 1rem 0.75rem 0.3rem;
    text-transform: uppercase; user-select: none;
}

.rx-sb-link {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem 0.75rem; font-size: 0.875rem;
    color: var(--rx-zinc-400); border-radius: 6px;
    transition: all 0.15s ease; text-decoration: none !important;
    position: relative;
}

/* Lucide icon sizing inside sidebar links */
.rx-sb-link > i,
.rx-sb-link > svg,
.rx-sb-link > [data-lucide] {
    width: 16px !important; height: 16px !important;
    stroke-width: 1.75; flex-shrink: 0;
    color: var(--rx-zinc-500);
    transition: color 0.15s;
}

.rx-sb-link:hover {
    color: var(--rx-zinc-100);
    background: rgba(39,39,42,0.5);
}
.rx-sb-link:hover > i,
.rx-sb-link:hover > svg { color: var(--rx-zinc-400); }

.rx-sb-link.active {
    color: var(--rx-zinc-100);
    background: rgba(39,39,42,0.8);
    font-weight: 500;
}
.rx-sb-link.active > i,
.rx-sb-link.active > svg { color: var(--rx-blue-400) !important; }

/* Support card */
.rx-sb-support {
    margin: auto 0.65rem 0.65rem;
    padding: 0.85rem; border-radius: 8px;
    background: rgba(39,39,42,0.3);
    border-top: 1px solid rgba(39,39,42,0.5);
    flex-shrink: 0;
}
.rx-sb-support-head {
    display: flex; align-items: center; gap: 0.45rem;
    margin-bottom: 0.4rem; font-size: 0.82rem;
}
.rx-sb-support-head strong { color: var(--rx-zinc-200); font-size: 0.82rem; }
.rx-sb-support-icon,
.rx-sb-support-head > i,
.rx-sb-support-head > svg {
    width: 16px !important; height: 16px !important;
    color: var(--rx-blue-400) !important;
}
.rx-sb-support p {
    font-size: 0.7rem; color: var(--rx-zinc-400);
    line-height: 1.55; margin: 0 0 0.55rem;
}
.rx-sb-support-btn {
    display: flex; align-items: center; justify-content: center;
    gap: 0.35rem; width: 100%;
    padding: 0.4rem 0.65rem; font-size: 0.78rem; font-weight: 500;
    color: var(--rx-zinc-300) !important;
    background: rgba(39,39,42,0.5);
    border: 1px solid var(--rx-zinc-700);
    border-radius: 6px; transition: all 0.15s;
    text-decoration: none !important;
}
.rx-sb-support-btn:hover {
    background: var(--rx-zinc-800);
    color: var(--rx-zinc-100) !important;
}

/* User area */
.rx-sb-user {
    border-top: 1px solid var(--rx-border);
    padding: 0.75rem 0.65rem; flex-shrink: 0;
}
.rx-sb-user-info {
    display: flex; align-items: center; gap: 0.55rem;
    margin-bottom: 0.55rem; position: relative;
}
.rx-sb-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--rx-zinc-800); color: var(--rx-zinc-200);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.68rem; font-weight: 600; flex-shrink: 0;
    border: 1.5px solid var(--rx-zinc-700);
}
.rx-sb-user-text { flex: 1; min-width: 0; }
.rx-sb-user-name {
    display: block; font-size: 0.8rem; font-weight: 500;
    color: var(--rx-zinc-100); white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.rx-sb-user-email {
    display: block; font-size: 0.65rem; color: var(--rx-zinc-500);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rx-sb-chevron {
    background: none; border: none; color: var(--rx-zinc-400);
    padding: 0.2rem; cursor: pointer; flex-shrink: 0;
    display: flex; align-items: center;
}
.rx-sb-chevron::after { display: none !important; }
.rx-sb-chevron:hover { color: var(--rx-zinc-200); }

.rx-sb-logout {
    display: flex; align-items: center; gap: 0.45rem;
    width: 100%; padding: 0.4rem 0.65rem;
    font-size: 0.78rem; color: var(--rx-zinc-400) !important;
    background: transparent; border: 1px solid var(--rx-zinc-800);
    border-radius: 6px; text-decoration: none !important;
    transition: all 0.15s; justify-content: flex-start;
}
.rx-sb-logout:hover {
    background: var(--rx-zinc-800); color: var(--rx-zinc-100) !important;
}

/* Dropdown in sidebar */
.rx-sb-dropdown {
    background: var(--rx-zinc-900) !important;
    border: 1px solid var(--rx-zinc-800) !important;
    border-radius: 8px !important; padding: 0.25rem !important;
    min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
.rx-sb-dropdown .dropdown-item {
    color: var(--rx-zinc-300) !important; font-size: 0.8rem;
    padding: 0.4rem 0.65rem; border-radius: 4px;
    display: flex; align-items: center;
}
.rx-sb-dropdown .dropdown-item:hover,
.rx-sb-dropdown .dropdown-item:focus {
    background: var(--rx-zinc-800) !important; color: var(--rx-zinc-100) !important;
}
.rx-sb-dropdown .dropdown-divider { border-color: var(--rx-zinc-800); margin: 0.2rem 0; }

/* =====================================================
   MOBILE
   ===================================================== */
.rx-mobile-bar {
    position: fixed; top: 0; left: 0; right: 0; height: 64px;
    background: var(--rx-sidebar-bg); border-bottom: 1px solid rgba(39,39,42,0.7);
    display: flex; align-items: center; padding: 0 1rem; z-index: 90; gap: 0.75rem;
}
.rx-mobile-toggle {
    background: none; border: none; color: var(--rx-zinc-400);
    padding: 0.35rem; cursor: pointer; display: flex; align-items: center;
}
.rx-mobile-logo img { height: 22px; width: auto; }
.rx-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65); z-index: 99; }

@media (max-width: 991px) {
    .rx-sidebar { transform: translateX(-100%); transition: transform 0.25s ease; }
    .rx-sidebar.open { transform: translateX(0); }
    .rx-sidebar-overlay.open { display: block; }
    .rx-logged-in .rx-main { margin-left: 0; }
    .rx-logged-in .rx-content { padding-top: calc(64px + 1.5rem); }
    .rx-content { padding: 1.25rem 1rem 2rem; }
}
@media (min-width: 992px) {
    .rx-mobile-bar { display: none !important; }
    .rx-sidebar-overlay { display: none !important; }
}
@media (max-width: 576px) {
    .rx-content { padding: 1rem 0.75rem 2rem; }
}

/* =====================================================
   CARDS
   ===================================================== */
.card {
    background: var(--rx-card-bg) !important;
    border: 1px solid var(--rx-border) !important;
    border-radius: var(--rx-radius) !important;
    color: var(--rx-zinc-400) !important;
    box-shadow: none !important;
    overflow: hidden;
}
.card-header {
    background: transparent !important;
    border-bottom: 1px solid var(--rx-border) !important;
    color: var(--rx-zinc-100) !important;
    padding: 0.85rem 1.25rem !important;
    font-size: 0.88rem;
}
.card-body {
    background: transparent !important;
    color: var(--rx-zinc-400) !important;
    padding: 1.15rem 1.25rem !important;
}
.card-footer {
    background: transparent !important;
    border-top: 1px solid var(--rx-border) !important;
    color: var(--rx-zinc-400) !important;
    padding: 0.75rem 1.25rem !important;
}
.card-title { color: var(--rx-zinc-100) !important; font-weight: 600; }
.panel { background: var(--rx-card-bg); border-color: var(--rx-border); }
.panel-heading { background: var(--rx-card-solid) !important; border-color: var(--rx-border) !important; color: var(--rx-zinc-100) !important; }

/* =====================================================
   FORMS
   ===================================================== */
.form-control {
    background: var(--rx-zinc-900) !important;
    border: 1px solid var(--rx-border) !important;
    border-radius: 6px !important;
    color: var(--rx-zinc-200) !important;
    font-size: 0.85rem; padding: 0.5rem 0.75rem;
    min-height: 40px; transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
    border-color: var(--rx-blue-500) !important;
    box-shadow: 0 0 0 3px var(--rx-blue-glow) !important;
    background: var(--rx-card-solid) !important;
}
.form-control::placeholder { color: var(--rx-zinc-600) !important; }
.form-control:disabled,.form-control[readonly] { background: var(--rx-zinc-900) !important; color: var(--rx-zinc-500) !important; opacity: 0.7; }
select.form-control,.custom-select { background-color: var(--rx-zinc-900) !important; color: var(--rx-zinc-200) !important; border-color: var(--rx-border) !important; }
.input-group-text { background: var(--rx-card-solid) !important; border-color: var(--rx-border) !important; color: var(--rx-zinc-500) !important; }
label { color: var(--rx-zinc-300) !important; font-weight: 500; font-size: 0.82rem; }
.custom-file-label { background: var(--rx-zinc-900) !important; border-color: var(--rx-border) !important; color: var(--rx-zinc-400) !important; }
.custom-file-label::after { background: var(--rx-zinc-800) !important; border-color: var(--rx-border) !important; color: var(--rx-zinc-200) !important; }

/* =====================================================
   BUTTONS
   ===================================================== */
.btn { 
    border-radius: 6px; 
    font-weight: 500; 
    font-size: 0.8rem; 
    padding: 0.4rem 0.85rem; 
    transition: all 0.15s;
    line-height: 1.3;
}
.btn-primary { background: var(--rx-blue-500) !important; border-color: var(--rx-blue-500) !important; color: #fff !important; }
.btn-primary:hover { background: var(--rx-blue-600) !important; border-color: var(--rx-blue-600) !important; box-shadow: 0 4px 12px var(--rx-blue-glow); }
.btn-default,.btn-secondary { background: var(--rx-zinc-800) !important; border: 1px solid var(--rx-zinc-700) !important; color: var(--rx-zinc-300) !important; }
.btn-default:hover,.btn-secondary:hover { background: var(--rx-zinc-700) !important; color: var(--rx-zinc-100) !important; }
.btn-success { background: var(--rx-green) !important; border-color: var(--rx-green) !important; color: #fff !important; }
.btn-danger { background: var(--rx-red) !important; border-color: var(--rx-red) !important; color: #fff !important; }
.btn-warning { background: var(--rx-amber) !important; border-color: var(--rx-amber) !important; color: #000 !important; }
.btn-info { background: var(--rx-blue-500) !important; border-color: var(--rx-blue-500) !important; color: #fff !important; }
.btn-outline-primary { border-color: var(--rx-blue-500) !important; color: var(--rx-blue-400) !important; background: transparent !important; }
.btn-outline-primary:hover { background: var(--rx-blue-bg) !important; }
.btn-link { color: var(--rx-blue-400) !important; }

/* =====================================================
   TABLES & DATATABLES
   ===================================================== */
.table { color: var(--rx-zinc-400) !important; }
.table th,.table td { border-color: var(--rx-border) !important; padding: 0.6rem 0.85rem !important; font-size: 0.82rem; vertical-align: middle; }
.table thead th {
    background: rgba(24,24,27,0.5) !important; color: var(--rx-zinc-300) !important;
    font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em;
    border-bottom: 1px solid var(--rx-border) !important;
}
.table td { color: var(--rx-zinc-400) !important; background: transparent !important; }
.table-striped tbody tr:nth-of-type(odd) { background: rgba(24,24,27,0.25) !important; }
.table-hover tbody tr:hover { background: rgba(39,39,42,0.3) !important; }

.dataTables_wrapper { color: var(--rx-zinc-400); }
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input { background: var(--rx-zinc-900) !important; border: 1px solid var(--rx-border) !important; color: var(--rx-zinc-300) !important; border-radius: 6px; }
.dataTables_wrapper .dataTables_info { color: var(--rx-zinc-500); font-size: 0.78rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button { color: var(--rx-zinc-400) !important; background: transparent !important; border: 1px solid var(--rx-border) !important; border-radius: 6px; margin: 0 2px; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current { background: var(--rx-blue-bg) !important; border-color: var(--rx-blue-500) !important; color: var(--rx-blue-400) !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button:hover { background: var(--rx-zinc-800) !important; color: var(--rx-zinc-100) !important; }
table.dataTable { border: none !important; box-shadow: none !important; }
table.dataTable.no-footer { border-bottom: 1px solid var(--rx-border) !important; }

/* =====================================================
   ALERTS, BADGES, MODALS, DROPDOWNS, TABS, PAGINATION
   ===================================================== */
.alert { border-radius: var(--rx-radius); font-size: 0.85rem; }
.alert-success { background: rgba(34,197,94,0.08) !important; border-color: rgba(34,197,94,0.2) !important; color: var(--rx-green) !important; }
.alert-danger { background: rgba(239,68,68,0.08) !important; border-color: rgba(239,68,68,0.2) !important; color: var(--rx-red) !important; }
.alert-warning { background: rgba(245,158,11,0.08) !important; border-color: rgba(245,158,11,0.2) !important; color: var(--rx-amber) !important; }
.alert-info { background: rgba(59,130,246,0.08) !important; border-color: rgba(59,130,246,0.2) !important; color: var(--rx-blue-400) !important; }

.badge,.label { font-size: 0.68rem; font-weight: 600; padding: 0.2em 0.5em; border-radius: 4px; }
.badge-primary,.label-primary { background: var(--rx-blue-bg) !important; color: var(--rx-blue-400) !important; }
.badge-success,.label-success { background: rgba(34,197,94,0.12) !important; color: var(--rx-green) !important; }
.badge-danger,.label-danger { background: rgba(239,68,68,0.12) !important; color: var(--rx-red) !important; }
.badge-warning,.label-warning { background: rgba(245,158,11,0.12) !important; color: var(--rx-amber) !important; }
.badge-info,.label-info { background: var(--rx-blue-bg) !important; color: var(--rx-blue-400) !important; }
.badge-default,.label-default { background: var(--rx-zinc-800) !important; color: var(--rx-zinc-400) !important; }

.modal-content { background: var(--rx-card-solid) !important; border: 1px solid var(--rx-border) !important; border-radius: var(--rx-radius-lg) !important; color: var(--rx-zinc-400) !important; }
.modal-header { border-bottom-color: var(--rx-border) !important; }
.modal-header .close { color: var(--rx-zinc-400) !important; text-shadow: none; }
.modal-title { color: var(--rx-zinc-100) !important; }
.modal-footer { border-top-color: var(--rx-border) !important; }

.dropdown-menu { background: var(--rx-zinc-900) !important; border: 1px solid var(--rx-zinc-800) !important; border-radius: 8px !important; padding: 0.25rem !important; box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important; }
.dropdown-item { color: var(--rx-zinc-300) !important; font-size: 0.82rem; padding: 0.4rem 0.65rem; border-radius: 4px; }
.dropdown-item:hover,.dropdown-item:focus { background: var(--rx-zinc-800) !important; color: var(--rx-zinc-100) !important; }
.dropdown-divider { border-color: var(--rx-zinc-800) !important; }

.nav-tabs { border-bottom-color: var(--rx-border) !important; }
.nav-tabs .nav-link { color: var(--rx-zinc-400) !important; border: none !important; font-size: 0.85rem; font-weight: 500; padding: 0.5rem 1rem; border-radius: 6px !important; }
.nav-tabs .nav-link:hover { color: var(--rx-zinc-100) !important; background: rgba(39,39,42,0.3); }
.nav-tabs .nav-link.active { background: var(--rx-blue-bg) !important; color: var(--rx-blue-400) !important; font-weight: 600; }
.tab-content { color: var(--rx-zinc-400); }

.pagination .page-link { background: transparent !important; border-color: var(--rx-border) !important; color: var(--rx-zinc-400) !important; }
.pagination .page-item.active .page-link { background: var(--rx-blue-bg) !important; border-color: var(--rx-blue-500) !important; color: var(--rx-blue-400) !important; }
.pagination .page-link:hover { background: var(--rx-zinc-800) !important; color: var(--rx-zinc-100) !important; }

/* =====================================================
   LIST GROUPS (dashboard panels etc)
   ===================================================== */
.list-group-item {
    background: transparent !important;
    border-color: var(--rx-border) !important;
    color: var(--rx-zinc-400) !important;
    transition: background 0.15s;
}
.list-group-item:hover { background: rgba(39,39,42,0.25) !important; }
.list-group-item.active { background: var(--rx-blue-bg) !important; border-color: var(--rx-blue-500) !important; color: var(--rx-blue-400) !important; }
.list-group-item-action { color: var(--rx-zinc-400) !important; }
.list-group-item-action:hover { color: var(--rx-zinc-200) !important; }

/* =====================================================
   AUTH PAGE (Login / Register)
   ===================================================== */
.rx-auth-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 2rem 1rem;
    background: var(--rx-body-bg);
}

.rx-auth-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    max-width: 1000px;
    width: 100%;
    background: var(--rx-card-solid);
    border: 1px solid var(--rx-border);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}

.rx-auth-box {
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
}

.rx-auth-header {
    margin-bottom: 2rem;
}

.rx-auth-logo-wrap {
    margin-bottom: 2rem;
    text-align: left;
}

.rx-auth-logo {
    height: 40px;
    width: auto;
}

.rx-auth-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--rx-zinc-100);
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

.rx-auth-subtitle {
    font-size: 0.9rem;
    color: var(--rx-zinc-500);
    margin: 0;
    line-height: 1.5;
}

/* Auth Form */
.rx-auth-form {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.rx-auth-field {
    margin-bottom: 0.75rem;
}

.rx-auth-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--rx-zinc-300);
    margin-bottom: 0.5rem;
}

.rx-auth-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.rx-auth-forgot {
    font-size: 0.8rem;
    color: var(--rx-blue-400);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.15s;
}
.rx-auth-forgot:hover {
    color: var(--rx-blue-500);
}

.rx-auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.rx-auth-input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: var(--rx-zinc-900);
    border: 1px solid var(--rx-border);
    border-radius: 8px;
    color: var(--rx-zinc-200);
    font-size: 0.9rem;
    transition: all 0.15s;
}
.rx-auth-input:focus {
    outline: none;
    border-color: var(--rx-blue-400);
    background: var(--rx-zinc-800);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.rx-auth-input::placeholder {
    color: var(--rx-zinc-600);
}

.rx-auth-input-password .rx-auth-input {
    padding-right: 3rem;
}

.rx-auth-eye {
    position: absolute;
    right: 0.75rem;
    background: none;
    border: none;
    color: var(--rx-zinc-500);
    cursor: pointer;
    padding: 0.35rem;
    border-radius: 4px;
    transition: all 0.15s;
}
.rx-auth-eye:hover {
    background: rgba(59, 130, 246, 0.1);
    color: var(--rx-blue-400);
}

/* Remember Me Checkbox */
.rx-auth-remember {
    margin: 0.5rem 0 1.5rem;
}

.rx-auth-checkbox {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    user-select: none;
}

.rx-auth-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rx-auth-checkbox-box {
    width: 18px;
    height: 18px;
    border: 2px solid var(--rx-zinc-700);
    border-radius: 4px;
    background: var(--rx-zinc-900);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
    position: relative;
}

.rx-auth-checkbox input:checked + .rx-auth-checkbox-box {
    background: var(--rx-blue-500);
    border-color: var(--rx-blue-500);
}

.rx-auth-checkbox input:checked + .rx-auth-checkbox-box::after {
    content: '✓';
    color: white;
    font-size: 12px;
    font-weight: bold;
}

.rx-auth-checkbox-label {
    font-size: 0.875rem;
    color: var(--rx-zinc-400);
}

/* Submit Button */
.rx-auth-btn-submit {
    width: 100%;
    padding: 0.85rem 1.5rem;
    background: var(--rx-blue-500);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    cursor: pointer;
    transition: all 0.15s;
}
.rx-auth-btn-submit:hover {
    background: var(--rx-blue-600);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
}

/* Footer */
.rx-auth-footer {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--rx-border);
    text-align: center;
}

.rx-auth-footer-text {
    font-size: 0.875rem;
    color: var(--rx-zinc-500);
}

.rx-auth-footer-link {
    font-size: 0.875rem;
    color: var(--rx-blue-400);
    font-weight: 600;
    text-decoration: none;
    margin-left: 0.35rem;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    transition: color 0.15s;
}
.rx-auth-footer-link:hover {
    color: var(--rx-blue-500);
}

/* Side Panel */
.rx-auth-side {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
    border-left: 1px solid var(--rx-border);
    padding: 3rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rx-auth-side-content {
    text-align: center;
}

.rx-auth-side-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--rx-blue-400);
}

.rx-auth-side-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rx-zinc-100);
    margin: 0 0 0.75rem;
}

.rx-auth-side-text {
    font-size: 0.95rem;
    color: var(--rx-zinc-400);
    line-height: 1.6;
    margin: 0 0 2rem;
}

.rx-auth-side-features {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    text-align: left;
}

.rx-auth-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(24, 24, 27, 0.5);
    border: 1px solid var(--rx-border);
    border-radius: 8px;
    color: var(--rx-zinc-300);
    font-size: 0.875rem;
}

.rx-auth-feature i {
    color: var(--rx-blue-400);
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .rx-auth-container {
        grid-template-columns: 1fr;
    }
    
    .rx-auth-side {
        display: none;
    }
    
    .rx-auth-box {
        padding: 2rem 1.5rem;
    }
}

/* =====================================================
   LOGIN PAGE (Legacy - keeping for backwards compatibility)
   ===================================================== */
.rx-login-wrapper { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem 1rem; }
.rx-login-card { width: 100%; max-width: 420px; background: var(--rx-card-solid); border: 1px solid var(--rx-border); border-radius: 16px; overflow: hidden; }
.rx-login-header { text-align: center; padding: 2.5rem 2rem 0; }
.rx-login-logo { height: 36px; width: auto; margin-bottom: 1.5rem; }
.rx-login-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 0.3rem; }
.rx-login-subtitle { font-size: 0.82rem; color: var(--rx-zinc-500); margin: 0; }
.rx-login-body { padding: 2rem 2rem 1.5rem; }
.rx-login-field { margin-bottom: 1.15rem; }
.rx-login-field label { font-size: 0.78rem !important; color: var(--rx-zinc-400) !important; margin-bottom: 0.35rem; }
.rx-login-field-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.35rem; }
.rx-login-field-top label { margin-bottom: 0 !important; }
.rx-login-forgot { font-size: 0.72rem; color: var(--rx-blue-400); }
.rx-login-input-wrap { position: relative; display: flex; align-items: center; }
.rx-login-input-wrap > i { position: absolute; left: 0.85rem; font-size: 0.8rem; color: var(--rx-zinc-500); z-index: 2; pointer-events: none; }
.rx-login-input-wrap .form-control { padding-left: 2.35rem !important; }
.rx-login-eye { position: absolute; right: 0.6rem; background: none; border: none; color: var(--rx-zinc-500); cursor: pointer; padding: 0.3rem; z-index: 2; }
.rx-login-remember { margin-bottom: 1.15rem; }
.rx-login-check { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--rx-zinc-400) !important; cursor: pointer; margin: 0; }
.rx-login-check input[type="checkbox"] { accent-color: var(--rx-blue-500); width: 15px; height: 15px; }
.rx-login-btn { display: flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; padding: 0.6rem; background: var(--rx-blue-500) !important; color: #fff !important; border: none !important; border-radius: 6px; font-size: 0.88rem; font-weight: 600; }
.rx-login-btn:hover { background: var(--rx-blue-600) !important; }
.rx-login-footer { text-align: center; padding: 0.85rem 2rem 1.25rem; font-size: 0.8rem; color: var(--rx-zinc-500); border-top: 1px solid var(--rx-border); }
.rx-login-footer a { color: var(--rx-blue-400); font-weight: 600; margin-left: 0.3rem; }

/* =====================================================
   MARKDOWN EDITOR
   ===================================================== */
.md-editor { background: var(--rx-zinc-900) !important; border: 1px solid var(--rx-border) !important; border-radius: 8px !important; }
.md-editor > .md-header { background: var(--rx-card-solid) !important; border-color: var(--rx-border) !important; }
.md-editor > .md-header .btn { color: var(--rx-zinc-400) !important; }
.md-editor > textarea { background: var(--rx-zinc-900) !important; color: var(--rx-zinc-200) !important; border: none !important; }
.md-editor > .md-footer { background: var(--rx-card-solid) !important; border-color: var(--rx-border) !important; color: var(--rx-zinc-500) !important; }
.md-editor > .md-preview { background: var(--rx-zinc-900) !important; color: var(--rx-zinc-300) !important; }
textarea.form-control,#inputMessage { background: var(--rx-zinc-900) !important; color: var(--rx-zinc-200) !important; }

/* =====================================================
   MISC OVERRIDES
   ===================================================== */
.bg-default,.bg-white,.bg-light { background: var(--rx-card-bg) !important; }
.text-muted { color: var(--rx-zinc-500) !important; }
.text-primary { color: var(--rx-blue-400) !important; }
.text-success { color: var(--rx-green) !important; }
.text-danger { color: var(--rx-red) !important; }
.text-warning { color: var(--rx-amber) !important; }
.border-bottom { border-bottom-color: var(--rx-border) !important; }
.border-top { border-top-color: var(--rx-border) !important; }

.popover { background: var(--rx-zinc-900) !important; border-color: var(--rx-zinc-800) !important; }
.popover-body { color: var(--rx-zinc-400) !important; }
.client-alerts li a { color: var(--rx-zinc-400) !important; padding: 0.5rem; display: flex; align-items: center; gap: 0.5rem; border-bottom: 1px solid var(--rx-border); }
.jumbotron { background: var(--rx-card-bg) !important; border: 1px solid var(--rx-border) !important; border-radius: var(--rx-radius) !important; }
.progress { background: var(--rx-zinc-800) !important; border-radius: 4px; }
.progress-bar { background: var(--rx-blue-500) !important; }
.tooltip-inner { background: var(--rx-zinc-800); color: var(--rx-zinc-100); }

/* Invoice page (standalone) */
.invoice-container { color: var(--rx-zinc-400) !important; padding: 2rem; }
.invoice-container h2,.invoice-container h3,.invoice-container h4,.invoice-container strong { color: var(--rx-zinc-100) !important; }
.invoice-container address,.invoice-container .small-text { color: var(--rx-zinc-400) !important; }
.invoice-container hr { border-color: var(--rx-border) !important; }
.invoice-container .card { background: var(--rx-card-solid) !important; border: 1px solid var(--rx-border) !important; }
.invoice-container .card-header,.invoice-container .card-title { background: rgba(24,24,27,0.5) !important; color: var(--rx-zinc-100) !important; }
.invoice-container .table th,.invoice-container .table td { border-color: var(--rx-border) !important; color: var(--rx-zinc-400) !important; background: transparent !important; }
.invoice-container .table thead td,.invoice-container .table thead th { background: rgba(24,24,27,0.5) !important; color: var(--rx-zinc-200) !important; }
.invoice-container td.total-row { background: rgba(24,24,27,0.3) !important; }
.invoice-container .bg-info { background: var(--rx-blue-500) !important; color: #fff !important; }
.invoice-container a { color: var(--rx-blue-400); }
.invoice-container .btn-default { background: var(--rx-zinc-800) !important; border-color: var(--rx-zinc-700) !important; color: var(--rx-zinc-300) !important; }
.invoice-container .invoice-status .paid { color: var(--rx-green); }
.invoice-container .invoice-status .unpaid { color: var(--rx-red); }

/* Store page overrides */
.store-order-container { color: var(--rx-zinc-400); }
.store-order-container h2,.store-order-container h4 { color: var(--rx-zinc-100) !important; }
.store-order-container .tab-content.bg-white,.store-order-container .tab-content,.store-domain-tab-content { background: var(--rx-card-solid) !important; color: var(--rx-zinc-400) !important; border: 1px solid var(--rx-border) !important; }
.landing-page .product-options .item { background-color: var(--rx-card-solid) !important; border: 1px solid var(--rx-border); color: var(--rx-zinc-400); }
.landing-page .product-options .item h4 { color: var(--rx-zinc-100) !important; }
.landing-page .product-options .item .btn { background-color: var(--rx-blue-500) !important; color: #fff !important; }
.landing-page .hero { color: var(--rx-zinc-400) !important; }
.landing-page .hero h2,.landing-page .hero h3 { color: var(--rx-zinc-100) !important; }

/* =====================================================
   VIEW TICKET PAGE (rx-vt-* classes)
   ===================================================== */

/* Status Banner */
.rx-vt-banner {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.75rem 1rem; border-radius: var(--rx-radius);
    margin-bottom: 1.25rem; font-size: 0.85rem;
}
.rx-vt-banner-closed {
    background: rgba(239,68,68,0.08);
    border: 1px solid rgba(239,68,68,0.2);
    color: var(--rx-red);
}
.rx-vt-banner-icon { font-size: 1rem; flex-shrink: 0; }
.rx-vt-banner-text { display: flex; flex-direction: column; gap: 0.15rem; }
.rx-vt-banner-text strong { color: var(--rx-red); font-size: 0.85rem; }
.rx-vt-banner-text span { color: var(--rx-zinc-400); font-size: 0.78rem; }

/* Ticket Hero */
.rx-vt-hero {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
    padding-bottom: 1.25rem; margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--rx-border);
}
.rx-vt-hero-left { flex: 1; min-width: 0; }
.rx-vt-ticket-id {
    display: inline-block; font-size: 0.72rem; font-weight: 600;
    color: var(--rx-blue-400); background: var(--rx-blue-bg);
    padding: 0.15em 0.5em; border-radius: 4px; margin-bottom: 0.35rem;
}
.rx-vt-title {
    font-size: 1.35rem !important; font-weight: 700 !important;
    color: var(--rx-zinc-100) !important; margin: 0 0 0.4rem !important;
    line-height: 1.3;
}
.rx-vt-meta {
    display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.35rem; font-size: 0.78rem; color: var(--rx-zinc-500);
}
.rx-vt-meta-item { display: inline-flex; align-items: center; gap: 0.3rem; }
.rx-vt-meta-item i { font-size: 0.72rem; color: var(--rx-zinc-600); }
.rx-vt-meta-sep { color: var(--rx-zinc-700); }

.rx-vt-hero-actions {
    display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0;
}

/* Ticket Buttons */
.rx-vt-btn-reply {
    background: var(--rx-blue-500) !important; color: #fff !important;
    border: none !important; border-radius: 6px; font-size: 0.82rem;
    font-weight: 500; padding: 0.45rem 1rem;
    display: inline-flex; align-items: center; gap: 0.35rem;
    transition: all 0.15s;
}
.rx-vt-btn-reply:hover { background: var(--rx-blue-600) !important; box-shadow: 0 4px 12px var(--rx-blue-glow); }

.rx-vt-btn-close {
    background: transparent !important; color: var(--rx-zinc-400) !important;
    border: 1px solid var(--rx-zinc-700) !important; border-radius: 6px;
    font-size: 0.82rem; font-weight: 500; padding: 0.45rem 1rem;
    display: inline-flex; align-items: center; gap: 0.35rem;
    transition: all 0.15s;
}
.rx-vt-btn-close:hover { background: var(--rx-zinc-800) !important; color: var(--rx-zinc-100) !important; }

.rx-vt-status-pill {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.75rem; font-weight: 600; padding: 0.3em 0.7em;
    border-radius: 999px;
}
.rx-vt-status-closed { background: rgba(239,68,68,0.12); color: var(--rx-red); }

/* Conversation */
.rx-vt-convo { margin-bottom: 1.5rem; }
.rx-vt-convo-label {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.85rem; font-weight: 600; color: var(--rx-zinc-300);
    margin-bottom: 1rem;
}
.rx-vt-convo-label i { color: var(--rx-zinc-500); font-size: 0.8rem; }
.rx-vt-convo-count {
    font-size: 0.68rem; font-weight: 600; padding: 0.1em 0.5em;
    background: var(--rx-zinc-800); color: var(--rx-zinc-400);
    border-radius: 999px; min-width: 20px; text-align: center;
}

/* Message bubbles */
.rx-vt-bubble {
    background: var(--rx-card-bg);
    border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius);
    padding: 1rem 1.25rem; margin-bottom: 0.75rem;
    transition: border-color 0.2s;
}
.rx-vt-bubble:hover { border-color: var(--rx-border-solid); }

.rx-vt-bubble-staff {
    background: rgba(59,130,246,0.04);
    border-color: rgba(59,130,246,0.15);
}
.rx-vt-bubble-staff:hover { border-color: rgba(59,130,246,0.25); }

.rx-vt-bubble-top {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.75rem;
}
.rx-vt-who { display: flex; align-items: center; gap: 0.55rem; }
.rx-vt-initials {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--rx-zinc-800); color: var(--rx-zinc-300);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem; font-weight: 600; flex-shrink: 0;
}
.rx-vt-initials-staff { background: rgba(59,130,246,0.15); color: var(--rx-blue-400); }
.rx-vt-who-name { font-size: 0.85rem; font-weight: 600; color: var(--rx-zinc-100); display: block; }
.rx-vt-who-role {
    font-size: 0.68rem; font-weight: 500; padding: 0.1em 0.45em;
    border-radius: 3px; display: inline-block; margin-top: 1px;
}
.rx-vt-role-owner { background: var(--rx-zinc-800); color: var(--rx-zinc-400); }
.rx-vt-role-operator { background: rgba(59,130,246,0.12); color: var(--rx-blue-400); }
.rx-vt-time { font-size: 0.72rem; color: var(--rx-zinc-500); flex-shrink: 0; }

/* Message content */
.rx-vt-content {
    font-size: 0.85rem; line-height: 1.7; color: var(--rx-zinc-300);
    word-break: break-word;
}
.rx-vt-content p { color: var(--rx-zinc-300); margin-bottom: 0.6rem; }
.rx-vt-content a { color: var(--rx-blue-400); }
.rx-vt-content pre { background: var(--rx-zinc-900); border: 1px solid var(--rx-border); border-radius: 6px; padding: 0.75rem; color: var(--rx-zinc-300); overflow-x: auto; }
.rx-vt-content code { background: var(--rx-zinc-800); color: var(--rx-zinc-200); padding: 0.15em 0.35em; border-radius: 3px; font-size: 0.82em; }
.rx-vt-content blockquote { border-left: 3px solid var(--rx-blue-500); padding-left: 0.75rem; margin: 0.5rem 0; color: var(--rx-zinc-400); }

/* Attachments */
.rx-vt-files { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--rx-border); }
.rx-vt-files-label { font-size: 0.78rem; font-weight: 500; color: var(--rx-zinc-400); display: flex; align-items: center; gap: 0.35rem; margin-bottom: 0.45rem; }
.rx-vt-files-label i { color: var(--rx-zinc-500); }
.rx-vt-files-removed { font-size: 0.72rem; color: var(--rx-red); margin-left: 0.5rem; }
.rx-vt-files-grid { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.rx-vt-file {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.75rem; padding: 0.3rem 0.6rem;
    background: var(--rx-zinc-800); color: var(--rx-zinc-300) !important;
    border-radius: 4px; text-decoration: none !important; transition: background 0.15s;
}
.rx-vt-file:hover { background: var(--rx-zinc-700); color: var(--rx-zinc-100) !important; }
.rx-vt-file-gone { opacity: 0.5; cursor: default; }

/* Rating */
.rx-vt-rate { margin-top: 0.75rem; padding-top: 0.5rem; border-top: 1px solid var(--rx-border); display: flex; align-items: center; gap: 0.5rem; }
.rx-vt-rate-text { font-size: 0.72rem; color: var(--rx-zinc-500); }
.rx-vt-rate .star { cursor: pointer; font-size: 1rem; color: var(--rx-zinc-600); transition: color 0.15s; }
.rx-vt-rate .star.active { color: var(--rx-amber); }
.rx-vt-rate .star:hover { color: var(--rx-amber); }

/* Reply form */
.rx-vt-reply {
    background: var(--rx-card-bg);
    border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius);
    overflow: hidden;
}
.rx-vt-reply-header {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.85rem 1.25rem; font-size: 0.9rem; font-weight: 600;
    color: var(--rx-zinc-100);
    border-bottom: 1px solid var(--rx-border);
}
.rx-vt-reply-header i { color: var(--rx-zinc-500); font-size: 0.82rem; }
.rx-vt-reply-body { padding: 1.25rem; }
.rx-vt-reply-footer {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--rx-border);
}
.rx-vt-btn-send {
    background: var(--rx-blue-500) !important; color: #fff !important;
    border: none !important; border-radius: 6px; font-size: 0.82rem;
    font-weight: 500; padding: 0.45rem 1rem;
    display: inline-flex; align-items: center; gap: 0.35rem;
    transition: all 0.15s;
}
.rx-vt-btn-send:hover { background: var(--rx-blue-600) !important; }
.rx-vt-btn-discard {
    background: transparent !important; color: var(--rx-zinc-400) !important;
    border: 1px solid var(--rx-zinc-700) !important; border-radius: 6px;
    font-size: 0.82rem; font-weight: 500; padding: 0.45rem 1rem;
}
.rx-vt-btn-discard:hover { background: var(--rx-zinc-800) !important; color: var(--rx-zinc-100) !important; }

/* =====================================================
   TICKET LIST PAGE
   ===================================================== */
.table-list { width: 100%; }
.table-list tbody tr { cursor: pointer; transition: background 0.15s; }
.table-list tbody tr:hover { background: rgba(39,39,42,0.35) !important; }
.table-list .ticket-number {
    font-size: 0.72rem; font-weight: 600; color: var(--rx-blue-400);
    margin-right: 0.5rem;
}
.table-list .ticket-subject { color: var(--rx-zinc-200); font-weight: 500; }
.table-list .ticket-subject.unread { color: var(--rx-zinc-100); font-weight: 600; }
.table-list .border-left { border-left: none !important; padding-left: 0 !important; text-decoration: none !important; }
.table-list a { color: var(--rx-zinc-200) !important; text-decoration: none !important; }
.table-list a:hover { color: var(--rx-zinc-100) !important; }

/* Status labels in tables */
.label.status,
span.label.status {
    font-size: 0.68rem; font-weight: 600;
    padding: 0.2em 0.55em; border-radius: 4px;
    display: inline-block; line-height: 1.4;
}
.label.status-active,.status-open { background: rgba(34,197,94,0.12) !important; color: var(--rx-green) !important; }
.label.status-answered { background: var(--rx-blue-bg) !important; color: var(--rx-blue-400) !important; }
.label.status-closed { background: rgba(239,68,68,0.12) !important; color: var(--rx-red) !important; }
.label.status-customer-reply,.label.status-customerreply { background: rgba(245,158,11,0.12) !important; color: var(--rx-amber) !important; }
.label.status-on-hold,.label.status-onhold { background: var(--rx-zinc-800) !important; color: var(--rx-zinc-400) !important; }
.label.status-in-progress,.label.status-inprogress { background: rgba(168,85,247,0.12) !important; color: #a855f7 !important; }
.label.status-pending { background: rgba(245,158,11,0.12) !important; color: var(--rx-amber) !important; }

/* =====================================================
   ANNOUNCEMENTS PAGE
   ===================================================== */
.announcements .announcement {
    padding: 1.25rem 0;
    border-bottom: 1px solid var(--rx-border);
}
.announcements .announcement:last-child { border-bottom: none; }
.announcements .announcement h1 {
    font-size: 1.1rem !important; font-weight: 600 !important;
    margin: 0 0 0.4rem !important; line-height: 1.4;
}
.announcements .announcement h1 a { color: var(--rx-zinc-100) !important; }
.announcements .announcement h1 a:hover { color: var(--rx-blue-400) !important; }
.announcements .announcement .list-inline { margin-bottom: 0.6rem; }
.announcements .announcement .list-inline-item { font-size: 0.78rem; color: var(--rx-zinc-500) !important; }
.announcements .announcement article {
    font-size: 0.85rem; line-height: 1.7; color: var(--rx-zinc-400);
    margin-bottom: 0.75rem;
}
.announcements .announcement article a { color: var(--rx-blue-400); }
.announcements .announcement .btn-default { font-size: 0.78rem; }
.announcements .announcement .show-on-hover { opacity: 0; transition: opacity 0.15s; }
.announcements .announcement:hover .show-on-hover { opacity: 1; }

/* =====================================================
   PROFILE / DETAILS PAGE
   ===================================================== */
.client-profile-image { border-radius: 50%; border: 2px solid var(--rx-zinc-700); }
.profile-img-container { text-align: center; }

/* =====================================================
   KNOWLEDGEBASE
   ===================================================== */
.kb-article-content {
    font-size: 0.88rem; line-height: 1.8; color: var(--rx-zinc-300);
}
.kb-article-content h1,.kb-article-content h2,.kb-article-content h3 { color: var(--rx-zinc-100) !important; }
.kb-article-content a { color: var(--rx-blue-400); }
.kb-article-content pre { background: var(--rx-zinc-900); border: 1px solid var(--rx-border); border-radius: 6px; padding: 0.75rem; color: var(--rx-zinc-300); }
.kb-article-content code { background: var(--rx-zinc-800); color: var(--rx-zinc-200); padding: 0.15em 0.35em; border-radius: 3px; }
.kb-article-content img { max-width: 100%; border-radius: 6px; }

/* Sidebar categories */
.kb-sidebar-category { color: var(--rx-zinc-400); }
.kb-sidebar-category a { color: var(--rx-zinc-300) !important; transition: color 0.15s; }
.kb-sidebar-category a:hover { color: var(--rx-blue-400) !important; }

/* =====================================================
   REGISTER PAGE
   ===================================================== */
.rx-register-wrapper { max-width: 600px; margin: 0 auto; }

/* =====================================================
   CONTACT PAGE
   ===================================================== */
.contact-form .form-group { margin-bottom: 1.15rem; }

/* =====================================================
   DOMAIN PAGES
   ===================================================== */
.domain-details-grid { display: grid; gap: 0.5rem; }
.domain-status-active { color: var(--rx-green) !important; }
.domain-status-expired { color: var(--rx-red) !important; }
.domain-status-pending { color: var(--rx-amber) !important; }

/* Nameserver table */
.nameservers-table td { padding: 0.5rem 0.75rem !important; }

/* =====================================================
   PRODUCT DETAILS PAGE
   ===================================================== */
.product-details-tab-container .nav-pills .nav-link {
    color: var(--rx-zinc-400) !important;
    border-radius: 6px;
    padding: 0.45rem 0.85rem;
    font-size: 0.82rem;
    transition: all 0.15s;
}
.product-details-tab-container .nav-pills .nav-link.active {
    background: var(--rx-blue-bg) !important;
    color: var(--rx-blue-400) !important;
    font-weight: 600;
}
.product-details-tab-container .nav-pills .nav-link:hover {
    background: rgba(39,39,42,0.3);
    color: var(--rx-zinc-100) !important;
}

/* Module control buttons */
.module-queue-container .btn { margin: 0.15rem; }

/* =====================================================
   INVOICE STANDALONE PAGE (viewinvoice.tpl)
   ===================================================== */
body:has(.invoice-container) {
    background: var(--rx-body-bg) !important;
}
.invoice-container {
    color: var(--rx-zinc-400) !important;
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1.5rem;
}
.invoice-container h2,.invoice-container h3,.invoice-container h4 { color: var(--rx-zinc-100) !important; }
.invoice-container strong { color: var(--rx-zinc-200) !important; }
.invoice-container address,.invoice-container .small { color: var(--rx-zinc-400) !important; }
.invoice-container hr { border-color: var(--rx-border) !important; }
.invoice-container .card { background: var(--rx-card-solid) !important; border: 1px solid var(--rx-border) !important; border-radius: var(--rx-radius) !important; }
.invoice-container .card-header,.invoice-container .card-title { background: transparent !important; color: var(--rx-zinc-100) !important; border-bottom-color: var(--rx-border) !important; }
.invoice-container .table th,.invoice-container .table td { border-color: var(--rx-border) !important; color: var(--rx-zinc-400) !important; background: transparent !important; }
.invoice-container .table thead td,.invoice-container .table thead th { background: rgba(24,24,27,0.5) !important; color: var(--rx-zinc-200) !important; }
.invoice-container td.total-row { background: rgba(24,24,27,0.3) !important; }
.invoice-container .bg-info { background: var(--rx-blue-500) !important; color: #fff !important; }
.invoice-container a { color: var(--rx-blue-400); }
.invoice-container .well { background: var(--rx-zinc-900) !important; border-color: var(--rx-border) !important; color: var(--rx-zinc-400) !important; }
.invoice-container .text-center .btn { margin: 0.25rem; }
.invoice-container .invoice-header { margin-bottom: 1.5rem; }
.invoice-container .logo-container img { max-height: 60px; }
.invoice-container .status-label {
    font-size: 0.82rem; font-weight: 600; padding: 0.25em 0.7em;
    border-radius: 4px; text-transform: uppercase;
}

/* =====================================================
   SMOOTH SCROLL FUNCTION
   ===================================================== */
html { scroll-behavior: smooth; }

/* =====================================================
   GLOBAL TRANSITIONS & ANIMATIONS
   ===================================================== */
.card, .list-group-item, .btn, .form-control, .rx-sb-link, .rx-vt-bubble {
    transition: all 0.15s ease;
}

/* Fade-in animation for page content */
.rx-content {
    animation: rxFadeIn 0.25s ease-out;
}
@keyframes rxFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =====================================================
   ADDITIONAL WHMCS OVERRIDES
   ===================================================== */

/* Fix any remaining white backgrounds */
.bg-white { background: var(--rx-card-bg) !important; }
.bg-light { background: var(--rx-card-bg) !important; }
.border { border-color: var(--rx-border) !important; }
.shadow, .shadow-sm, .shadow-lg { box-shadow: none !important; }

/* Fix WHMCS page title styling */
h1.page-title, .page-title { font-size: 1.35rem !important; }

/* Toggle switch */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--rx-blue-500) !important;
    border-color: var(--rx-blue-500) !important;
}
.custom-control-label::before {
    background-color: var(--rx-zinc-800) !important;
    border-color: var(--rx-zinc-700) !important;
}
.custom-switch .custom-control-label::after {
    background-color: var(--rx-zinc-400) !important;
}

/* Checkbox and radio */
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--rx-blue-500) !important;
    border-color: var(--rx-blue-500) !important;
}

/* Select2 dropdowns */
.select2-container--default .select2-selection--single {
    background-color: var(--rx-zinc-900) !important;
    border-color: var(--rx-border) !important;
    color: var(--rx-zinc-200) !important;
    min-height: 40px; border-radius: 6px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--rx-zinc-200) !important; line-height: 40px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
}
.select2-container--default .select2-results__option {
    color: var(--rx-zinc-300) !important; background: var(--rx-zinc-900) !important;
    font-size: 0.85rem; padding: 0.4rem 0.65rem;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: var(--rx-zinc-800) !important; color: var(--rx-zinc-100) !important;
}
.select2-dropdown { background: var(--rx-zinc-900) !important; border-color: var(--rx-zinc-800) !important; border-radius: 8px !important; }
.select2-search--dropdown .select2-search__field { background: var(--rx-zinc-800) !important; border-color: var(--rx-zinc-700) !important; color: var(--rx-zinc-200) !important; border-radius: 4px; }

/* Account emails list */
.email-list .email-item { border-color: var(--rx-border) !important; }
.email-list .email-item:hover { background: rgba(39,39,42,0.25) !important; }
.email-list .email-subject { color: var(--rx-zinc-200); font-weight: 500; }
.email-list .email-date { color: var(--rx-zinc-500); font-size: 0.78rem; }

/* Sidebar panel in WHMCS context */
.panel-sidebar,
.panel-default {
    background: var(--rx-card-bg) !important;
    border-color: var(--rx-border) !important;
}
.panel-default > .panel-heading { background: var(--rx-card-solid) !important; color: var(--rx-zinc-100) !important; border-color: var(--rx-border) !important; }
.panel-body { color: var(--rx-zinc-400) !important; }

/* Well (used in some WHMCS pages) */
.well {
    background: var(--rx-zinc-900) !important;
    border: 1px solid var(--rx-border) !important;
    border-radius: var(--rx-radius) !important;
    color: var(--rx-zinc-400) !important;
}

/* Fix anchor tag in tables */
.table a { color: var(--rx-blue-400) !important; }
.table a:hover { color: var(--rx-blue-500) !important; }

/* Fix pagination wrapper */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter { margin-bottom: 0.75rem; }
.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label { color: var(--rx-zinc-400) !important; font-size: 0.82rem; }

/* Input group append */
.input-group-append .btn { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }

/* Ticket submit step one — department selection */
.ticket-department-item {
    background: var(--rx-card-bg) !important;
    border: 1px solid var(--rx-border) !important;
    border-radius: var(--rx-radius) !important;
    padding: 1rem 1.25rem;
    margin-bottom: 0.5rem;
    transition: all 0.15s;
    cursor: pointer;
}
.ticket-department-item:hover { border-color: var(--rx-blue-500) !important; background: rgba(59,130,246,0.05) !important; }
.ticket-department-item h4 { color: var(--rx-zinc-100) !important; font-size: 0.95rem; }
.ticket-department-item p { color: var(--rx-zinc-400) !important; font-size: 0.82rem; }

/* =====================================================
   RESPONSIVE ADDITIONS
   ===================================================== */
@media (max-width: 768px) {
    .rx-vt-hero { flex-direction: column; }
    .rx-vt-hero-actions { width: 100%; }
    .rx-vt-hero-actions .btn { flex: 1; justify-content: center; }
    .rx-vt-bubble { padding: 0.85rem 1rem; }
    
    /* Dashboard stat grid responsive */
    .card-body [style*="grid-template-columns: repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 576px) {
    .rx-vt-title { font-size: 1.1rem !important; }
    .rx-vt-meta { font-size: 0.72rem; }
    .rx-vt-bubble-top { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
    .rx-vt-time { margin-left: calc(34px + 0.55rem); }
}

/* =====================================================
   STORE / LANDING / PRODUCT CONFIG PAGES
   ===================================================== */

/* Store landing page hero */
.landing-page { color: var(--rx-zinc-400); }
.landing-page h1,.landing-page h2,.landing-page h3,.landing-page h4 { color: var(--rx-zinc-100) !important; }
.landing-page p { color: var(--rx-zinc-400); }
.landing-page .hero { background: var(--rx-card-bg) !important; border: 1px solid var(--rx-border); border-radius: var(--rx-radius); padding: 2rem; margin-bottom: 1.5rem; }
.landing-page .hero h2 { font-size: 1.5rem !important; }
.landing-page .hero .btn { margin-top: 0.75rem; }

/* Product options / pricing cards */
.landing-page .product-options { margin-bottom: 1.5rem; }
.landing-page .product-options .item {
    background: var(--rx-card-bg) !important;
    border: 1px solid var(--rx-border) !important;
    border-radius: var(--rx-radius) !important;
    padding: 1.25rem;
    transition: border-color 0.2s, transform 0.15s;
    color: var(--rx-zinc-400);
}
.landing-page .product-options .item:hover {
    border-color: var(--rx-blue-500) !important;
    transform: translateY(-2px);
}
.landing-page .product-options .item h4 { color: var(--rx-zinc-100) !important; font-size: 1rem; margin-bottom: 0.5rem; }
.landing-page .product-options .item .price { color: var(--rx-zinc-200); font-size: 1.25rem; font-weight: 700; }
.landing-page .product-options .item .price span { color: var(--rx-zinc-500); font-size: 0.78rem; font-weight: 400; }
.landing-page .product-options .item ul { color: var(--rx-zinc-400); font-size: 0.85rem; }
.landing-page .product-options .item .btn {
    background: var(--rx-blue-500) !important; color: #fff !important;
    border: none !important; width: 100%; margin-top: 0.75rem;
}
.landing-page .product-options .item .btn:hover { background: var(--rx-blue-600) !important; }

/* Feature sections */
.landing-page .features .feature-icon { color: var(--rx-blue-400); }
.landing-page .features h4 { color: var(--rx-zinc-100) !important; }

/* Store order container */
.store-order-container { color: var(--rx-zinc-400); }
.store-order-container h2,.store-order-container h3,.store-order-container h4 { color: var(--rx-zinc-100) !important; }
.store-order-container .tab-content,
.store-order-container .tab-content.bg-white,
.store-domain-tab-content {
    background: var(--rx-card-solid) !important;
    color: var(--rx-zinc-400) !important;
    border: 1px solid var(--rx-border) !important;
    border-radius: 0 0 var(--rx-radius) var(--rx-radius);
}

/* Product config page */
.product-config-container { color: var(--rx-zinc-400); }
.product-config-container h3,.product-config-container h4 { color: var(--rx-zinc-100) !important; }
.product-config-container .config-option { padding: 0.75rem 0; border-bottom: 1px solid var(--rx-border); }
.product-config-container .config-option:last-child { border-bottom: none; }

/* Order summary sidebar */
.order-summary {
    background: var(--rx-card-bg) !important;
    border: 1px solid var(--rx-border) !important;
    border-radius: var(--rx-radius) !important;
    color: var(--rx-zinc-400) !important;
}
.order-summary h3,.order-summary h4 { color: var(--rx-zinc-100) !important; }
.order-summary .total { color: var(--rx-zinc-100); font-size: 1.1rem; font-weight: 700; }
.order-summary .total .price { color: var(--rx-blue-400); }
.order-summary hr { border-color: var(--rx-border); }
.order-summary .promo-input { display: flex; gap: 0.5rem; }

/* Domain search in store */
.domain-checker-container { color: var(--rx-zinc-400); }
.domain-checker-container h4 { color: var(--rx-zinc-100) !important; }
.domain-checker-result {
    padding: 0.65rem 1rem;
    border-bottom: 1px solid var(--rx-border);
    display: flex; align-items: center; justify-content: space-between;
}
.domain-checker-result .domain-name { color: var(--rx-zinc-200); font-weight: 500; }
.domain-checker-result .domain-price { color: var(--rx-zinc-300); font-weight: 600; }
.domain-checker-result .domain-unavailable { color: var(--rx-red); }

/* =====================================================
   SECURITY PAGE
   ===================================================== */
.security-container .security-question {
    background: var(--rx-card-bg);
    border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius);
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
}

/* Two-factor auth */
.two-factor-container .qr-code { background: #fff; padding: 1rem; border-radius: 8px; display: inline-block; }

/* =====================================================
   ADD FUNDS PAGE
   ===================================================== */
.add-funds-container .form-group { max-width: 400px; }

/* =====================================================
   FLASH MESSAGES
   ===================================================== */
.flash-message { margin-bottom: 1rem; }

/* =====================================================
   WHMCS PANEL OVERRIDES (used in many pages)
   ===================================================== */
.panel-default,
.panel-primary,
.panel-success,
.panel-warning,
.panel-danger,
.panel-info {
    background: var(--rx-card-bg) !important;
    border: 1px solid var(--rx-border) !important;
    border-radius: var(--rx-radius) !important;
    overflow: hidden;
}
.panel-default > .panel-heading,
.panel-primary > .panel-heading,
.panel-success > .panel-heading,
.panel-warning > .panel-heading,
.panel-danger > .panel-heading,
.panel-info > .panel-heading {
    background: var(--rx-card-solid) !important;
    border-color: var(--rx-border) !important;
    color: var(--rx-zinc-100) !important;
    padding: 0.85rem 1.25rem;
    font-size: 0.9rem; font-weight: 600;
}
.panel > .panel-body {
    padding: 1.15rem 1.25rem;
    color: var(--rx-zinc-400) !important;
}
.panel > .panel-footer {
    background: transparent !important;
    border-color: var(--rx-border) !important;
    color: var(--rx-zinc-400) !important;
}

/* =====================================================
   BREADCRUMB (hidden but just in case)
   ===================================================== */
.breadcrumb {
    background: transparent !important;
    padding: 0; margin: 0;
}
.breadcrumb-item,.breadcrumb-item a { color: var(--rx-zinc-500) !important; font-size: 0.78rem; }
.breadcrumb-item.active { color: var(--rx-zinc-300) !important; }

/* =====================================================
   CLOSE BUTTON FIX
   ===================================================== */
.close { color: var(--rx-zinc-400) !important; text-shadow: none !important; opacity: 0.8; }
.close:hover { color: var(--rx-zinc-100) !important; opacity: 1; }

/* =====================================================
   TOOLTIP
   ===================================================== */
.tooltip-inner { background: var(--rx-zinc-800) !important; color: var(--rx-zinc-100) !important; font-size: 0.78rem; border-radius: 6px; }
.bs-tooltip-top .arrow::before { border-top-color: var(--rx-zinc-800) !important; }
.bs-tooltip-bottom .arrow::before { border-bottom-color: var(--rx-zinc-800) !important; }
.bs-tooltip-left .arrow::before { border-left-color: var(--rx-zinc-800) !important; }
.bs-tooltip-right .arrow::before { border-right-color: var(--rx-zinc-800) !important; }

/* =====================================================
   POPOVER
   ===================================================== */
.popover { background: var(--rx-zinc-900) !important; border: 1px solid var(--rx-zinc-800) !important; border-radius: 8px !important; }
.popover-header { background: var(--rx-card-solid) !important; border-bottom-color: var(--rx-zinc-800) !important; color: var(--rx-zinc-100) !important; }
.popover-body { color: var(--rx-zinc-400) !important; }
.bs-popover-bottom .arrow::after { border-bottom-color: var(--rx-zinc-900) !important; }
.bs-popover-top .arrow::after { border-top-color: var(--rx-zinc-900) !important; }

/* =====================================================
   ITEM SELECTOR (language/currency modal)
   ===================================================== */
.item-selector .item {
    display: block; padding: 0.5rem 0.75rem;
    background: var(--rx-zinc-800); color: var(--rx-zinc-300) !important;
    border-radius: 6px; margin-bottom: 0.35rem;
    text-decoration: none !important; text-align: center;
    transition: all 0.15s; font-size: 0.85rem;
}
.item-selector .item:hover { background: var(--rx-zinc-700); color: var(--rx-zinc-100) !important; }
.item-selector .item.active { background: var(--rx-blue-bg); color: var(--rx-blue-400) !important; border: 1px solid var(--rx-blue-500); }

/* =====================================================
   DOMAIN PRICING TABLE
   ===================================================== */
.domain-pricing-table { width: 100%; }
.domain-pricing-table th {
    background: rgba(24,24,27,0.5) !important;
    color: var(--rx-zinc-300) !important;
    font-size: 0.75rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.domain-pricing-table td {
    color: var(--rx-zinc-400) !important;
    font-size: 0.85rem;
}
.domain-pricing-table .tld-row { font-weight: 600; color: var(--rx-zinc-200) !important; }

/* =====================================================
   FIX: WHMCS .container width inside sidebar layout
   ===================================================== */
.rx-content .container {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Fix .row negative margins */
.rx-content > .row { margin-left: 0; margin-right: 0; }
.rx-content > .row > [class*="col-"] { padding-left: 0; padding-right: 0; }

/* =====================================================
   SHARED PAGE HEADER (used across all pages)
   ===================================================== */
.rx-page-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    flex-wrap: wrap; gap: 1rem;
    margin-bottom: 1.5rem;
}
.rx-page-header-left { flex: 1; min-width: 0; }
.rx-page-header-right { flex-shrink: 0; }
.rx-page-title {
    font-size: 1.5rem !important; font-weight: 700 !important;
    color: #f4f4f5 !important; margin: 0 !important; line-height: 1.3;
}
.rx-page-subtitle {
    font-size: 0.85rem; color: #a1a1aa; margin: 0.25rem 0 0 !important;
}

/* =====================================================
   SHARED BUTTONS
   ===================================================== */
.rx-btn-primary {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.85rem; font-size: 0.8rem; font-weight: 500;
    background: var(--rx-blue-600); color: #fff !important;
    border: none; border-radius: 6px; cursor: pointer;
    text-decoration: none !important;
    transition: all 0.15s ease;
    line-height: 1.3;
    white-space: nowrap;
}
.rx-btn-primary:hover {
    background: #1d4ed8; color: #fff !important;
    box-shadow: 0 4px 14px rgba(37,99,235,0.35);
    transform: translateY(-1px);
}
.rx-btn-sm { 
    padding: 0.35rem 0.65rem; 
    font-size: 0.75rem; 
    line-height: 1.3;
    white-space: nowrap;
}

/* =====================================================
   DASHBOARD — My Services Card
   ===================================================== */
.rx-dash-card {
    background: rgba(24,24,27,0.7);
    border: 1px solid rgba(39,39,42,0.5);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.rx-dash-card-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem;
    padding: 1.15rem 1.5rem;
    border-bottom: 1px solid rgba(39,39,42,0.5);
}
.rx-dash-card-title-wrap {
    display: flex; align-items: center; gap: 0.65rem;
}
.rx-dash-card-icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(39,39,42,0.5);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rx-dash-card-title {
    font-size: 1.1rem !important; font-weight: 600 !important;
    color: #f4f4f5 !important; margin: 0 !important; line-height: 1.2;
}
.rx-dash-card-desc {
    font-size: 0.8rem; color: #a1a1aa; margin: 0.15rem 0 0 !important;
}
.rx-dash-card-body { padding: 1.25rem 1.5rem; }

/* Stat grid */
.rx-dash-stats {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem;
}
.rx-dash-stat {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1rem 1.1rem;
    background: rgba(39,39,42,0.25);
    border: 1px solid rgba(39,39,42,0.5);
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.rx-dash-stat::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    opacity: 0; transition: opacity 0.2s;
}
.rx-dash-stat:hover {
    border-color: rgba(59,130,246,0.3);
    background: rgba(39,39,42,0.45);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.rx-dash-stat:hover::before { opacity: 1; }
.rx-dash-stat-icon {
    width: 42px; height: 42px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: transform 0.2s;
}
.rx-dash-stat:hover .rx-dash-stat-icon { transform: scale(1.08); }
.rx-dash-stat-blue { background: rgba(59,130,246,0.12); color: #60a5fa; }
.rx-dash-stat-blue + .rx-dash-stat-info .rx-dash-stat-num { color: #f4f4f5; }
.rx-dash-stat:nth-child(1)::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.rx-dash-stat-green { background: rgba(34,197,94,0.12); color: #22c55e; }
.rx-dash-stat:nth-child(2)::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
.rx-dash-stat-amber { background: rgba(245,158,11,0.12); color: #f59e0b; }
.rx-dash-stat:nth-child(3)::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.rx-dash-stat-red { background: rgba(239,68,68,0.12); color: #ef4444; }
.rx-dash-stat:nth-child(4)::before { background: linear-gradient(90deg, #ef4444, #f87171); }
.rx-dash-stat-info { display: flex; flex-direction: column; }
.rx-dash-stat-num {
    font-size: 1.35rem; font-weight: 700; color: #f4f4f5; line-height: 1.1;
}
.rx-dash-stat-label {
    font-size: 0.72rem; color: #71717a; margin-top: 2px; font-weight: 500;
}

/* =====================================================
   DASHBOARD — Panels
   ===================================================== */
.rx-dash-panels-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 1rem;
}
.rx-dash-panel {
    background: rgba(24,24,27,0.7);
    border: 1px solid rgba(39,39,42,0.5);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 1rem;
    transition: border-color 0.2s;
}
.rx-dash-panel:hover { border-color: rgba(39,39,42,0.8); }
.rx-dash-panel-header {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid rgba(39,39,42,0.5);
}
.rx-dash-panel-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.92rem; font-weight: 600; color: #f4f4f5;
}
.rx-dash-panel-badge {
    font-size: 0.65rem; font-weight: 600; padding: 0.15em 0.5em;
    background: rgba(59,130,246,0.12); color: #60a5fa;
    border-radius: 4px;
}
.rx-dash-panel-body {
    padding: 1.15rem 1.25rem;
    color: #a1a1aa; font-size: 0.85rem; line-height: 1.6;
}
.rx-dash-panel-body a { color: #60a5fa !important; }
.rx-dash-panel-list { display: flex; flex-direction: column; }
.rx-dash-panel-item {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.7rem 1.25rem;
    font-size: 0.82rem; color: #a1a1aa !important;
    text-decoration: none !important;
    border-top: 1px solid rgba(39,39,42,0.35);
    transition: all 0.15s;
}
.rx-dash-panel-item:first-child { border-top: none; }
a.rx-dash-panel-item:hover {
    background: rgba(39,39,42,0.3);
    color: #e4e4e7 !important;
}
.rx-dash-panel-item-label { flex: 1; }
.rx-dash-panel-item-badge {
    font-size: 0.65rem; font-weight: 600; padding: 0.15em 0.45em;
    background: #27272a; color: #a1a1aa; border-radius: 4px;
}
.rx-dash-panel-footer {
    padding: 0.75rem 1.25rem;
    border-top: 1px solid rgba(39,39,42,0.5);
    font-size: 0.82rem; color: #a1a1aa;
}
.rx-dash-panel-footer a { color: #60a5fa !important; }

/* =====================================================
   ANNOUNCEMENTS PAGE — Custom Styles
   ===================================================== */
.rx-ann-card {
    background: rgba(24,24,27,0.7);
    border: 1px solid rgba(39,39,42,0.5);
    border-radius: 12px;
    overflow: hidden;
}
.rx-ann-card-header {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(39,39,42,0.5);
}
.rx-ann-card-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.92rem; font-weight: 500; color: #d4d4d8;
}
.rx-ann-card-body { min-height: 0; }

/* Announcement item */
.rx-ann-item {
    display: flex; gap: 1rem; padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(39,39,42,0.35);
    text-decoration: none !important;
    transition: background 0.15s;
    color: inherit !important;
}
.rx-ann-item:last-child { border-bottom: none; }
.rx-ann-item:hover { background: rgba(39,39,42,0.2); }
.rx-ann-icon-wrap {
    width: 40px; height: 40px; border-radius: 8px;
    background: rgba(59,130,246,0.1);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rx-ann-item-content { flex: 1; min-width: 0; }
.rx-ann-item-top {
    display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.25rem;
}
.rx-ann-item-title {
    font-size: 0.92rem !important; font-weight: 500 !important;
    color: #f4f4f5 !important; margin: 0 !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rx-ann-edit-link {
    color: #71717a; cursor: pointer; opacity: 0; transition: opacity 0.15s;
    flex-shrink: 0;
}
.rx-ann-item:hover .rx-ann-edit-link { opacity: 1; }
.rx-ann-edit-link:hover { color: #a1a1aa; }
.rx-ann-item-text {
    font-size: 0.82rem; color: #a1a1aa; margin: 0 0 0.4rem !important;
    line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rx-ann-item-meta {
    display: flex; align-items: center; gap: 0.35rem;
    font-size: 0.72rem; color: #71717a;
}

/* Empty state */
.rx-ann-empty {
    padding: 3rem 1.5rem; text-align: center;
}
.rx-ann-empty-icon {
    color: #a1a1aa; margin-bottom: 1rem;
    display: flex; align-items: center; justify-content: center;
}
.rx-ann-empty-title {
    font-size: 1.1rem !important; font-weight: 500 !important;
    color: #d4d4d8 !important; margin: 0 0 0.35rem !important;
}
.rx-ann-empty-text {
    font-size: 0.85rem; color: #71717a; margin: 0 !important;
}

.rx-ann-pagination { margin-top: 1.25rem; }

/* Single announcement view */
.rx-ann-back-link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    font-size: 0.8rem; color: #71717a;
    text-decoration: none !important;
    margin-bottom: 0.5rem;
    transition: color 0.15s;
}
.rx-ann-back-link:hover { color: #a1a1aa; }

.rx-ann-view-meta {
    display: flex; align-items: center; gap: 0.5rem;
    margin-top: 0.35rem;
    flex-wrap: wrap;
}
.rx-ann-view-meta-item {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.78rem; color: #71717a;
}
.rx-ann-view-meta-sep { color: #3f3f46; font-size: 0.75rem; }
.rx-ann-view-edit {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.78rem; color: #60a5fa;
    text-decoration: none !important; transition: color 0.15s;
}
.rx-ann-view-edit:hover { color: #93c5fd; }

.rx-ann-view-card { margin-top: 0; }
.rx-ann-view-body {
    padding: 1.75rem 1.5rem;
}
.rx-ann-view-content {
    color: #d4d4d8;
    font-size: 0.9rem;
    line-height: 1.75;
}
.rx-ann-view-content h1,
.rx-ann-view-content h2,
.rx-ann-view-content h3,
.rx-ann-view-content h4 {
    color: #f4f4f5 !important;
    margin-top: 1.5rem !important;
    margin-bottom: 0.5rem !important;
    font-weight: 600 !important;
}
.rx-ann-view-content p { margin-bottom: 0.75rem !important; }
.rx-ann-view-content a { color: #60a5fa !important; text-decoration: underline; }
.rx-ann-view-content a:hover { color: #93c5fd !important; }
.rx-ann-view-content ul,
.rx-ann-view-content ol {
    padding-left: 1.25rem !important;
    margin-bottom: 0.75rem !important;
    color: #a1a1aa;
}
.rx-ann-view-content li { margin-bottom: 0.25rem !important; }
.rx-ann-view-content pre,
.rx-ann-view-content code {
    background: rgba(15,15,17,0.8) !important;
    border: 1px solid rgba(63,63,70,0.5) !important;
    border-radius: 6px !important;
    color: #a3e635 !important;
    font-size: 0.82rem !important;
}
.rx-ann-view-content pre { padding: 1rem !important; overflow-x: auto !important; }
.rx-ann-view-content code { padding: 0.1rem 0.35rem !important; }

.rx-ann-view-footer {
    margin-top: 1.25rem;
    display: flex; align-items: center; gap: 0.75rem;
}
.rx-ann-view-back-btn {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: rgba(39,39,42,0.6);
    border: 1px solid rgba(63,63,70,0.5);
    border-radius: 8px;
    color: #a1a1aa !important;
    font-size: 0.85rem; font-weight: 500;
    text-decoration: none !important;
    transition: all 0.15s;
}
.rx-ann-view-back-btn:hover {
    background: rgba(63,63,70,0.8);
    color: #f4f4f5 !important;
}

/* =====================================================
   TICKET LIST PAGE — Custom Styles
   ===================================================== */

/* Filter bar */
.rx-tl-filters {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.rx-tl-tabs {
    display: inline-flex; align-items: center;
    background: #18181b; border: 1px solid #3f3f46;
    border-radius: 8px; padding: 3px; gap: 2px;
}
.rx-tl-tab {
    padding: 0.38rem 1.25rem; font-size: 0.82rem; font-weight: 500;
    color: #a1a1aa; background: transparent;
    border: none; border-radius: 6px; cursor: pointer;
    transition: all 0.15s;
}
.rx-tl-tab:hover { color: #e4e4e7; background: rgba(39,39,42,0.4); }
.rx-tl-tab.active {
    background: #16a34a; color: #fff;
    box-shadow: 0 2px 8px rgba(22,163,74,0.3);
}

.rx-tl-search-wrap {
    display: flex; align-items: center; gap: 0.5rem;
}
.rx-tl-search {
    height: 36px; width: 220px;
    background: rgba(39,39,42,0.5); border: 1px solid #3f3f46;
    border-radius: 6px; padding: 0 0.75rem;
    font-size: 0.82rem; color: #f4f4f5;
    outline: none; transition: border-color 0.15s;
    font-family: inherit;
}
.rx-tl-search::placeholder { color: #71717a; }
.rx-tl-search:focus { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,0.15); }

.rx-tl-settings-btn {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(39,39,42,0.5); border: 1px solid #3f3f46;
    border-radius: 6px; color: #a1a1aa; cursor: pointer;
    transition: all 0.15s;
}
.rx-tl-settings-btn:hover { background: rgba(63,63,70,0.5); color: #e4e4e7; }

/* Ticket list */
.rx-tl-list { display: flex; flex-direction: column; gap: 0.75rem; }

/* Ticket card */
.rx-tl-card {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.15rem 1.35rem;
    background: rgba(24,24,27,0.7);
    border: 1px solid rgba(39,39,42,0.5);
    border-radius: 10px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    color: inherit !important;
}
.rx-tl-card:hover {
    background: rgba(39,39,42,0.3);
    border-color: rgba(59,130,246,0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.2);
}
.rx-tl-card-left { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 0; }
.rx-tl-card-right { flex-shrink: 0; margin-left: 1rem; }

.rx-tl-card-row1 { display: flex; align-items: center; gap: 0.5rem; }
.rx-tl-type-icon { flex-shrink: 0; display: flex; align-items: center; }
.rx-tl-subject {
    font-size: 0.92rem; font-weight: 500; color: #e4e4e7;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.rx-tl-card-row2 {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.78rem; color: #a1a1aa;
}
.rx-tl-tid { color: #a1a1aa; }
.rx-tl-sep { color: #52525b; }
.rx-tl-date { color: #a1a1aa; }

.rx-tl-card-row3 { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.15rem; }

/* Status badge */
.rx-tl-status-badge {
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.2em 0.6em; font-size: 0.7rem; font-weight: 600;
    border-radius: 5px; border: 1px solid transparent;
}
.rx-tl-status-open { background: rgba(59,130,246,0.1); color: #60a5fa; border-color: rgba(59,130,246,0.2); }
.rx-tl-status-answered { background: rgba(34,197,94,0.1); color: #22c55e; border-color: rgba(34,197,94,0.2); }
.rx-tl-status-customer-reply,
.rx-tl-status-customerreply { background: rgba(245,158,11,0.1); color: #f59e0b; border-color: rgba(245,158,11,0.2); }
.rx-tl-status-closed { background: rgba(34,197,94,0.1); color: #22c55e; border-color: rgba(34,197,94,0.2); }
.rx-tl-status-on-hold,
.rx-tl-status-onhold { background: rgba(113,113,122,0.1); color: #a1a1aa; border-color: rgba(113,113,122,0.2); }
.rx-tl-status-in-progress,
.rx-tl-status-inprogress { background: rgba(168,85,247,0.1); color: #a855f7; border-color: rgba(168,85,247,0.2); }

/* Department badge */
.rx-tl-dept-badge {
    display: inline-flex; align-items: center;
    padding: 0.2em 0.55em; font-size: 0.68rem; font-weight: 600;
    background: rgba(39,39,42,0.5); color: #a1a1aa;
    border: 1px solid #3f3f46; border-radius: 5px;
    text-transform: uppercase; letter-spacing: 0.02em;
}

/* View details button */
.rx-tl-view-btn {
    display: inline-flex; align-items: center;
    padding: 0.4rem 0.85rem; font-size: 0.78rem; font-weight: 500;
    background: rgba(39,39,42,0.5); color: #d4d4d8;
    border: 1px solid #3f3f46; border-radius: 6px;
    transition: all 0.15s; white-space: nowrap;
}
.rx-tl-card:hover .rx-tl-view-btn {
    background: rgba(63,63,70,0.5); color: #f4f4f5;
}

/* Empty state */
.rx-tl-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 3.5rem 1.5rem;
    border: 1px dashed rgba(39,39,42,0.6);
    border-radius: 10px;
    background: rgba(24,24,27,0.5);
    text-align: center;
}
.rx-tl-empty-icon {
    width: 56px; height: 56px; border-radius: 50%;
    background: rgba(59,130,246,0.1);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}
.rx-tl-empty-title {
    font-size: 1.1rem !important; font-weight: 500 !important;
    color: #d4d4d8 !important; margin: 0 0 0.35rem !important;
}
.rx-tl-empty-text {
    font-size: 0.85rem; color: #71717a; margin: 0 !important;
    max-width: 400px;
}

/* =====================================================
   RESPONSIVE — New Components
   ===================================================== */
@media (max-width: 768px) {
    .rx-page-header { flex-direction: column; }
    .rx-dash-stats { grid-template-columns: repeat(2, 1fr); }
    .rx-tl-filters { flex-direction: column; align-items: stretch; }
    .rx-tl-search-wrap { width: 100%; }
    .rx-tl-search { width: 100%; }
    .rx-tl-card { flex-direction: column; align-items: flex-start; }
    .rx-tl-card-right { margin-left: 0; margin-top: 0.75rem; width: 100%; }
    .rx-tl-view-btn { width: 100%; justify-content: center; }
    .rx-dash-panels-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .rx-dash-stats { grid-template-columns: 1fr; }
    .rx-tl-tabs { width: 100%; }
    .rx-tl-tab { flex: 1; text-align: center; }
}

/* =====================================================
   INVOICE LIST
   ===================================================== */
.rx-inv-list { display: flex; flex-direction: column; gap: 0.75rem; }

.rx-inv-card {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem; background: var(--rx-card-bg);
    border: 1px solid var(--rx-border); border-radius: var(--rx-radius);
    transition: all 0.2s; text-decoration: none !important;
}
.rx-inv-card:hover {
    border-color: var(--rx-blue-400);
    background: var(--rx-card-solid);
}

.rx-inv-card-left {
    display: flex; gap: 0.875rem; align-items: center; flex: 1;
}

.rx-inv-icon {
    width: 40px; height: 40px; border-radius: 8px;
    background: rgba(59,130,246,0.1); display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}

.rx-inv-info { display: flex; flex-direction: column; gap: 0.25rem; }
.rx-inv-num { font-size: 0.875rem; font-weight: 500; color: var(--rx-zinc-100); }
.rx-inv-meta { font-size: 0.75rem; color: var(--rx-zinc-500); }
.rx-inv-sep { margin: 0 0.35rem; }

.rx-inv-card-right {
    display: flex; flex-direction: column; align-items: flex-end; gap: 0.5rem;
}
.rx-inv-amount { font-size: 1rem; font-weight: 600; color: var(--rx-zinc-100); }

.rx-inv-status {
    padding: 0.25rem 0.65rem; border-radius: 6px; font-size: 0.7rem;
    font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em;
}
.rx-inv-status-paid {
    background: rgba(34,197,94,0.15); color: #22c55e;
    border: 1px solid rgba(34,197,94,0.3);
}
.rx-inv-status-unpaid {
    background: rgba(239,68,68,0.15); color: #ef4444;
    border: 1px solid rgba(239,68,68,0.3);
}
.rx-inv-status-cancelled, .rx-inv-status-canceled {
    background: rgba(113,113,122,0.15); color: var(--rx-zinc-400);
    border: 1px solid rgba(113,113,122,0.3);
}
.rx-inv-status-refunded {
    background: rgba(245,158,11,0.15); color: var(--rx-amber);
    border: 1px solid rgba(245,158,11,0.3);
}
.rx-inv-status-collections {
    background: rgba(168,85,247,0.15); color: #a855f7;
    border: 1px solid rgba(168,85,247,0.3);
}
.rx-inv-status-draft {
    background: rgba(113,113,122,0.15); color: var(--rx-zinc-400);
    border: 1px solid rgba(113,113,122,0.3);
}
.rx-inv-status-paymentpending {
    background: rgba(96,165,250,0.15); color: var(--rx-blue-400);
    border: 1px solid rgba(96,165,250,0.3);
}

.rx-inv-empty {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: 4rem 2rem;
    text-align: center; background: var(--rx-card-bg);
    border: 1px solid var(--rx-border); border-radius: var(--rx-radius-lg);
}
.rx-inv-empty-icon { margin-bottom: 1rem; }
.rx-inv-empty-title {
    font-size: 1.125rem; font-weight: 600;
    color: var(--rx-zinc-100); margin-bottom: 0.5rem;
}
.rx-inv-empty-text { color: var(--rx-zinc-500); font-size: 0.875rem; }

/* =====================================================
   PROFILE CARDS & FORMS
   ===================================================== */
.rx-profile-card {
    background: var(--rx-card-bg); border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-lg); margin-bottom: 1.5rem;
}

.rx-profile-card-header {
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--rx-border);
}

.rx-profile-card-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 1rem; font-weight: 600; color: var(--rx-zinc-100);
}

.rx-profile-card-body { padding: 1.5rem; }

.rx-profile-card-footer {
    padding: 1rem 1.5rem; border-top: 1px solid var(--rx-border);
    display: flex; justify-content: flex-end; gap: 0.75rem;
}

/* Form Rows & Groups */
.rx-form-row {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 1rem; margin-bottom: 1rem;
}
.rx-form-row:last-child { margin-bottom: 0; }

.rx-form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.rx-form-group-full { grid-column: 1 / -1; }

.rx-form-label {
    font-size: 0.875rem; font-weight: 500;
    color: var(--rx-zinc-300); display: block;
}

.rx-form-input, .rx-form-select, .rx-form-textarea, select.rx-form-input {
    padding: 0.65rem 0.875rem; font-size: 0.875rem;
    background: rgba(39,39,42,0.5); border: 1px solid var(--rx-border);
    border-radius: 6px; color: var(--rx-zinc-200);
    transition: all 0.2s; width: 100%;
    font-family: inherit;
}

.rx-form-input:focus, .rx-form-select:focus, .rx-form-textarea:focus, select.rx-form-input:focus {
    outline: none; border-color: var(--rx-blue-400);
    background: rgba(39,39,42,0.8);
}

.rx-form-input:disabled, .rx-form-select:disabled, .rx-form-textarea:disabled {
    opacity: 0.5; cursor: not-allowed;
}

.rx-form-textarea {
    min-height: 100px; resize: vertical;
}

.rx-form-help {
    font-size: 0.75rem; color: var(--rx-zinc-500);
    margin-top: 0.25rem; display: block;
}

.rx-form-check {
    display: flex; align-items: center; gap: 0.65rem;
    padding: 0.5rem 0;
}

.rx-form-checkbox {
    width: 18px; height: 18px; cursor: pointer;
    accent-color: var(--rx-blue-500);
}

.rx-form-check-label {
    font-size: 0.875rem; color: var(--rx-zinc-300);
    cursor: pointer; user-select: none;
}

/* Override WHMCS country dropdown */
#country.form-control, #inputState.form-control {
    padding: 0.65rem 0.875rem !important;
    background: rgba(39,39,42,0.5) !important;
    border: 1px solid var(--rx-border) !important;
    color: var(--rx-zinc-200) !important;
}

/* =====================================================
   ALERTS
   ===================================================== */
.rx-alert {
    padding: 0.875rem 1rem; border-radius: var(--rx-radius);
    display: flex; align-items: flex-start; gap: 0.75rem;
    margin-bottom: 1.25rem; font-size: 0.875rem;
}

.rx-alert i, .rx-alert svg { flex-shrink: 0; margin-top: 0.1rem; }

.rx-alert-success {
    background: rgba(34,197,94,0.1); color: #22c55e;
    border: 1px solid rgba(34,197,94,0.3);
}

.rx-alert-error, .rx-alert-danger {
    background: rgba(239,68,68,0.1); color: #ef4444;
    border: 1px solid rgba(239,68,68,0.3);
}

.rx-alert-warning {
    background: rgba(245,158,11,0.1); color: var(--rx-amber);
    border: 1px solid rgba(245,158,11,0.3);
}

.rx-alert-info {
    background: rgba(96,165,250,0.1); color: var(--rx-blue-400);
    border: 1px solid rgba(96,165,250,0.3);
}

/* =====================================================
   PAYMENT METHODS
   ===================================================== */
.rx-pm-list { display: flex; flex-direction: column; gap: 0.75rem; }

.rx-pm-card {
    background: var(--rx-card-bg); border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius); padding: 1.25rem;
    transition: all 0.2s;
}
.rx-pm-card:hover { border-color: var(--rx-border-solid); }

.rx-pm-card-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.75rem;
}

.rx-pm-card-left { display: flex; align-items: center; gap: 0.875rem; }

.rx-pm-icon {
    width: 40px; height: 40px; border-radius: 8px;
    background: rgba(59,130,246,0.1); display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
    font-size: 1.125rem; color: var(--rx-blue-400);
}

.rx-pm-info { display: flex; flex-direction: column; gap: 0.25rem; }
.rx-pm-name { font-size: 0.875rem; font-weight: 500; color: var(--rx-zinc-100); }
.rx-pm-desc { font-size: 0.75rem; color: var(--rx-zinc-500); }

.rx-pm-badge {
    padding: 0.25rem 0.65rem; border-radius: 6px;
    font-size: 0.7rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.rx-pm-badge-active {
    background: rgba(34,197,94,0.15); color: #22c55e;
    border: 1px solid rgba(34,197,94,0.3);
}
.rx-pm-badge-default {
    background: rgba(96,165,250,0.15); color: var(--rx-blue-400);
    border: 1px solid rgba(96,165,250,0.3);
}

.rx-pm-actions {
    display: flex; gap: 0.5rem; margin-top: 0.75rem;
    padding-top: 0.75rem; border-top: 1px solid var(--rx-border);
}

/* =====================================================
   SERVER DETAILS
   ===================================================== */
.rx-server-header {
    background: var(--rx-card-bg); border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-lg); padding: 1.5rem; margin-bottom: 1.5rem;
}

.rx-server-status-wrap {
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.25rem;
}

.rx-server-status-icon {
    width: 56px; height: 56px; border-radius: 10px;
    background: rgba(59,130,246,0.1); display: flex;
    align-items: center; justify-content: center;
}
.rx-server-status-icon i { font-size: 1.5rem; color: var(--rx-blue-400); }

.rx-server-info { flex: 1; }
.rx-server-title {
    font-size: 1.25rem; font-weight: 600;
    color: var(--rx-zinc-100); margin-bottom: 0.25rem;
}
.rx-server-subtitle {
    font-size: 0.875rem; color: var(--rx-zinc-500);
}

.rx-server-meta-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem; margin-top: 1.25rem;
}

.rx-server-meta-item { display: flex; flex-direction: column; gap: 0.25rem; }
.rx-server-meta-label {
    font-size: 0.75rem; color: var(--rx-zinc-500);
    text-transform: uppercase; letter-spacing: 0.05em;
}
.rx-server-meta-value {
    font-size: 0.875rem; font-weight: 500; color: var(--rx-zinc-200);
}

.rx-server-actions {
    display: flex; flex-wrap: wrap; gap: 0.75rem;
    margin-top: 1.25rem; padding-top: 1.25rem;
    border-top: 1px solid var(--rx-border);
}

/* Server Tabs */
.rx-server-tabs {
    display: flex; gap: 0.5rem; margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--rx-border);
    overflow-x: auto; scrollbar-width: thin;
}

.rx-server-tab {
    padding: 0.75rem 1rem; font-size: 0.875rem; font-weight: 500;
    color: var(--rx-zinc-400); border: none; background: none;
    border-bottom: 2px solid transparent; cursor: pointer;
    transition: all 0.2s; white-space: nowrap;
    display: flex; align-items: center; gap: 0.5rem;
}
.rx-server-tab:hover { color: var(--rx-zinc-200); }
.rx-server-tab.active {
    color: var(--rx-blue-400);
    border-bottom-color: var(--rx-blue-400);
}

.rx-server-tab-content {
    background: var(--rx-card-bg); border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-lg); padding: 1.5rem;
}

/* =====================================================
   INVOICE VIEW PAGE OVERRIDES
   ===================================================== */
body:has(.invoice-container) {
    background: var(--rx-body-bg) !important;
}

.invoice-container {
    max-width: 900px; margin: 2rem auto;
    padding: 2rem; background: var(--rx-card-bg) !important;
    border: 1px solid var(--rx-border); border-radius: var(--rx-radius-lg);
}

.invoice-header { margin-bottom: 2rem; }
.invoice-header h2, .invoice-header h3 {
    color: var(--rx-zinc-100) !important;
}

.invoice-status span {
    padding: 0.5rem 1rem; border-radius: 8px;
    font-weight: 600; font-size: 0.875rem; display: inline-block;
}
.invoice-status .unpaid {
    background: rgba(239,68,68,0.15); color: #ef4444;
    border: 1px solid rgba(239,68,68,0.3);
}
.invoice-status .paid {
    background: rgba(34,197,94,0.15); color: #22c55e;
    border: 1px solid rgba(34,197,94,0.3);
}
.invoice-status .draft, .invoice-status .cancelled {
    background: rgba(113,113,122,0.15); color: var(--rx-zinc-400);
    border: 1px solid rgba(113,113,122,0.3);
}
.invoice-status .collections {
    background: rgba(168,85,247,0.15); color: #a855f7;
    border: 1px solid rgba(168,85,247,0.3);
}

.invoice-container .card {
    background: rgba(24,24,27,0.5) !important;
    border: 1px solid var(--rx-border) !important;
    margin-bottom: 1.5rem;
}

.invoice-container .card-header {
    background: rgba(39,39,42,0.3) !important;
    border-bottom: 1px solid var(--rx-border) !important;
}

.invoice-container .card-title {
    color: var(--rx-zinc-100) !important;
}

.invoice-container .table {
    color: var(--rx-zinc-300);
}

.invoice-container .table thead td,
.invoice-container .table thead th {
    color: var(--rx-zinc-100); font-weight: 600;
    border-color: var(--rx-border) !important;
}

.invoice-container .table tbody td {
    border-color: var(--rx-border) !important;
}

.invoice-container .total-row {
    background: rgba(39,39,42,0.3) !important;
    font-weight: 600; color: var(--rx-zinc-100) !important;
}

.invoice-container .small-text {
    color: var(--rx-zinc-400);
}

.invoice-container address {
    color: var(--rx-zinc-300);
}

.payment-btn-container .btn-primary {
    background: var(--rx-blue-600) !important;
    border-color: var(--rx-blue-600) !important;
    padding: 0.65rem 1.5rem; font-weight: 500;
}
.payment-btn-container .btn-primary:hover {
    background: var(--rx-blue-500) !important;
}

.invoice-container hr {
    border-color: var(--rx-border);
}

.invoice-container .btn-default {
    background: rgba(39,39,42,0.5) !important;
    border-color: var(--rx-border) !important;
    color: var(--rx-zinc-300) !important;
}
.invoice-container .btn-default:hover {
    background: rgba(39,39,42,0.8) !important;
}

.transactions-container .table {
    margin-bottom: 0;
}

/* =====================================================
   RESPONSIVE — New Components
   ===================================================== */
@media (max-width: 768px) {
    .rx-form-row { grid-template-columns: 1fr; }
    .rx-inv-card { flex-direction: column; align-items: flex-start; }
    .rx-inv-card-right {
        width: 100%; flex-direction: row;
        justify-content: space-between; align-items: center;
        margin-top: 0.75rem; padding-top: 0.75rem;
        border-top: 1px solid var(--rx-border);
    }
    .rx-server-meta-grid { grid-template-columns: 1fr; }
    .rx-server-actions { flex-direction: column; }
    .rx-server-actions .rx-btn-primary,
    .rx-server-actions .rx-btn-secondary { width: 100%; }
}

@media (max-width: 480px) {
    .rx-profile-card-body { padding: 1rem; }
    .rx-profile-card-header { padding: 1rem; }
    .rx-pm-actions { flex-direction: column; }
    .rx-pm-actions .rx-btn-sm { width: 100%; }
}

/* =====================================================
   ADDITIONAL BUTTON STYLES
   ===================================================== */
.rx-btn-sm {
    padding: 0.35rem 0.65rem; 
    font-size: 0.75rem;
    font-weight: 500; 
    border-radius: 6px;
    display: inline-flex; 
    align-items: center; 
    gap: 0.35rem;
    transition: all 0.2s; 
    text-decoration: none !important;
    cursor: pointer; 
    border: none;
    line-height: 1.3;
    white-space: nowrap;
}

.rx-btn-outline {
    background: transparent;
    border: 1px solid var(--rx-border);
    color: var(--rx-zinc-300);
}
.rx-btn-outline:hover {
    background: rgba(39,39,42,0.5);
    border-color: var(--rx-border-solid);
    color: var(--rx-zinc-100);
}

.rx-btn-outline-danger {
    background: transparent;
    border: 1px solid rgba(239,68,68,0.3);
    color: #ef4444;
}
.rx-btn-outline-danger:hover {
    background: rgba(239,68,68,0.1);
    border-color: rgba(239,68,68,0.5);
    color: #ef4444;
}
.rx-btn-outline-danger.disabled {
    opacity: 0.5; cursor: not-allowed;
}

/* =====================================================
   MODULE CLIENT AREA STYLING
   ===================================================== */
.module-client-area {
    color: var(--rx-zinc-300);
}
.module-client-area table {
    color: var(--rx-zinc-300);
}
.module-client-area .btn {
    margin: 0.25rem;
}

/* =====================================================
   KNOB/DIAL STYLING OVERRIDES
   ===================================================== */
canvas.dial-usage {
    margin: 0 auto;
}

/* =====================================================
   SERVERS PAGE - SEARCH & FILTER TOOLBAR
   ===================================================== */
.rx-servers-toolbar {
    display: flex; gap: 1rem; margin-bottom: 1.5rem;
    flex-wrap: wrap; align-items: center;
}

.rx-servers-search {
    flex: 1; min-width: 250px; position: relative;
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.65rem 1rem; background: var(--rx-card-bg);
    border: 1px solid var(--rx-border); border-radius: var(--rx-radius);
}

.rx-servers-search-input {
    flex: 1; background: transparent; border: none;
    color: var(--rx-zinc-200); font-size: 0.875rem;
    outline: none; width: 100%;
}
.rx-servers-search-input::placeholder {
    color: var(--rx-zinc-500);
}

.rx-servers-tabs {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
}

.rx-servers-tab {
    padding: 0.65rem 1rem; background: var(--rx-card-bg);
    border: 1px solid var(--rx-border); border-radius: var(--rx-radius);
    color: var(--rx-zinc-400); font-size: 0.875rem; font-weight: 500;
    cursor: pointer; transition: all 0.2s; white-space: nowrap;
    display: flex; align-items: center; gap: 0.5rem;
}
.rx-servers-tab:hover {
    border-color: var(--rx-border-solid);
    background: var(--rx-card-solid); color: var(--rx-zinc-200);
}
.rx-servers-tab.active {
    background: rgba(59,130,246,0.1); border-color: var(--rx-blue-400);
    color: var(--rx-blue-400);
}
.rx-servers-tab-count {
    color: var(--rx-zinc-500); font-size: 0.75rem;
}
.rx-servers-tab.active .rx-servers-tab-count {
    color: var(--rx-blue-400);
}

/* =====================================================
   SERVERS PAGE - SERVER CARDS
   ===================================================== */
.rx-sv-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 1rem;
}

.rx-sv-card {
    position: relative;
    background: var(--rx-card-bg);
    border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-lg);
    overflow: hidden;
    transition: all 0.2s ease;
    text-decoration: none !important;
    display: block;
}

.rx-sv-card:hover {
    border-color: var(--rx-border-solid);
    background: var(--rx-card-solid);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.rx-sv-card-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--rx-blue-500) 0%, var(--rx-blue-400) 100%);
}

.rx-sv-card-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem;
    gap: 1rem;
}

.rx-sv-card-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex: 1;
    min-width: 0;
}

.rx-sv-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: rgba(59, 130, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rx-sv-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.rx-sv-card-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--rx-zinc-100);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rx-sv-card-meta {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--rx-zinc-500);
}

.rx-sv-card-domain {
    color: var(--rx-zinc-400);
}

.rx-sv-card-sep {
    color: var(--rx-zinc-600);
    margin: 0 0.1rem;
}

.rx-sv-card-right {
    flex-shrink: 0;
}

/* Server Status Badges */
.rx-sv-status {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.75rem;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    white-space: nowrap;
}

.rx-sv-status-active {
    background: rgba(34, 197, 94, 0.12);
    color: var(--rx-green);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

.rx-sv-status-pending {
    background: rgba(245, 158, 11, 0.12);
    color: var(--rx-amber);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

.rx-sv-status-suspended {
    background: rgba(239, 68, 68, 0.12);
    color: var(--rx-red);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.rx-sv-status-terminated {
    background: rgba(113, 113, 122, 0.12);
    color: var(--rx-zinc-400);
    border: 1px solid rgba(113, 113, 122, 0.2);
}

.rx-sv-status-cancelled {
    background: rgba(239, 68, 68, 0.12);
    color: var(--rx-red);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

.rx-sv-status-fraud {
    background: rgba(239, 68, 68, 0.12);
    color: var(--rx-red);
    border: 1px solid rgba(239, 68, 68, 0.2);
}

/* Empty State */
.rx-sv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 4rem 2rem;
    text-align: center;
    background: var(--rx-card-bg);
    border: 1px dashed var(--rx-border);
    border-radius: var(--rx-radius-lg);
}

.rx-sv-empty-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(59, 130, 246, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.rx-sv-empty-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--rx-zinc-200);
    margin: 0 0 0.5rem;
}

.rx-sv-empty-text {
    font-size: 0.875rem;
    color: var(--rx-zinc-500);
    margin: 0;
    max-width: 400px;
}

/* No Results State */
.rx-sv-no-results {
    margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .rx-sv-list {
        grid-template-columns: 1fr;
    }
    
    .rx-sv-card-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .rx-sv-card-right {
        width: 100%;
        display: flex;
        justify-content: flex-start;
    }
}

/* =====================================================
   DASHBOARD - OVERVIEW CARDS
   ===================================================== */
.rx-dash-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem; margin-bottom: 2rem;
}

.rx-dash-overview-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem; background: var(--rx-card-bg);
    border: 1px solid var(--rx-border); border-radius: var(--rx-radius-lg);
    transition: all 0.2s; text-decoration: none !important;
}
.rx-dash-overview-card:hover {
    border-color: var(--rx-border-solid);
    background: var(--rx-card-solid);
    transform: translateY(-2px);
}

.rx-dash-overview-icon {
    width: 48px; height: 48px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rx-dash-overview-blue { background: rgba(59,130,246,0.1); color: var(--rx-blue-400); }
.rx-dash-overview-amber { background: rgba(245,158,11,0.1); color: var(--rx-amber); }
.rx-dash-overview-red { background: rgba(239,68,68,0.1); color: var(--rx-red); }

.rx-dash-overview-info {
    display: flex; flex-direction: column; gap: 0.25rem;
}
.rx-dash-overview-num {
    font-size: 1.75rem; font-weight: 700;
    color: var(--rx-zinc-100); line-height: 1;
}
.rx-dash-overview-label {
    font-size: 0.875rem; color: var(--rx-zinc-500);
    font-weight: 500;
}

/* =====================================================
   DASHBOARD - SECTIONS
   ===================================================== */
.rx-dash-grid {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.rx-dash-section {
    background: var(--rx-card-bg); border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-lg); overflow: hidden;
    margin-bottom: 1.5rem;
}

.rx-dash-section-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--rx-border);
}

.rx-dash-section-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 1rem; font-weight: 600; color: var(--rx-zinc-100);
}

.rx-dash-section-body {
    padding: 1.5rem;
}

/* Dashboard Products */
.rx-dash-products {
    display: flex; flex-direction: column;
}

.rx-dash-product {
    display: flex; align-items: center; gap: 1rem;
    padding: 1rem; border-bottom: 1px solid var(--rx-border);
    transition: all 0.2s; text-decoration: none !important;
}
.rx-dash-product:last-child { border-bottom: none; }
.rx-dash-product:hover {
    background: rgba(39,39,42,0.3);
}

.rx-dash-product-icon {
    width: 40px; height: 40px; border-radius: 8px;
    background: rgba(59,130,246,0.1); display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}

.rx-dash-product-info {
    flex: 1; display: flex; flex-direction: column; gap: 0.25rem;
}
.rx-dash-product-name {
    font-size: 0.875rem; font-weight: 500; color: var(--rx-zinc-100);
}
.rx-dash-product-meta {
    font-size: 0.75rem; color: var(--rx-zinc-500);
}

/* Dashboard Tickets */
.rx-dash-tickets {
    display: flex; flex-direction: column;
}

.rx-dash-ticket {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem; border-bottom: 1px solid var(--rx-border);
    transition: all 0.2s; text-decoration: none !important;
}
.rx-dash-ticket:last-child { border-bottom: none; }
.rx-dash-ticket:hover {
    background: rgba(39,39,42,0.3);
}

.rx-dash-ticket-left {
    display: flex; align-items: center; gap: 0.875rem; flex: 1;
}

.rx-dash-ticket-icon {
    width: 36px; height: 36px; border-radius: 8px;
    background: rgba(59,130,246,0.1); display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}

.rx-dash-ticket-info {
    display: flex; flex-direction: column; gap: 0.25rem;
}
.rx-dash-ticket-subject {
    font-size: 0.875rem; font-weight: 500; color: var(--rx-zinc-200);
}
.rx-dash-ticket-meta {
    font-size: 0.75rem; color: var(--rx-zinc-500);
}

/* Dashboard Announcements */
.rx-dash-announcements {
    display: flex; flex-direction: column;
}

.rx-dash-announcement {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.875rem 1rem; border-bottom: 1px solid var(--rx-border);
    transition: all 0.2s; text-decoration: none !important;
}
.rx-dash-announcement:last-child { border-bottom: none; }
.rx-dash-announcement:hover {
    background: rgba(39,39,42,0.3);
}

.rx-dash-announcement-icon {
    width: 32px; height: 32px; border-radius: 6px;
    background: rgba(59,130,246,0.1); display: flex;
    align-items: center; justify-content: center; flex-shrink: 0;
}

.rx-dash-announcement-text {
    flex: 1; font-size: 0.875rem; color: var(--rx-zinc-300);
}

.rx-dash-empty {
    text-align: center; padding: 2rem;
    color: var(--rx-zinc-500);
}

/* =====================================================
   BILLING PAGE - STATS OVERVIEW
   ===================================================== */
.rx-billing-overview {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem; margin-bottom: 2rem;
}

.rx-billing-stat-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem; background: var(--rx-card-bg);
    border: 1px solid var(--rx-border); border-radius: var(--rx-radius-lg);
    transition: all 0.2s;
}
.rx-billing-stat-card:hover {
    border-color: var(--rx-border-solid);
    background: var(--rx-card-solid);
}

.rx-billing-stat-icon {
    width: 48px; height: 48px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rx-billing-stat-blue { background: rgba(59,130,246,0.1); color: var(--rx-blue-400); }
.rx-billing-stat-green { background: rgba(34,197,94,0.1); color: var(--rx-green); }
.rx-billing-stat-amber { background: rgba(245,158,11,0.1); color: var(--rx-amber); }
.rx-billing-stat-purple { background: rgba(168,85,247,0.1); color: #a855f7; }

.rx-billing-stat-info {
    display: flex; flex-direction: column; gap: 0.35rem;
}
.rx-billing-stat-label {
    font-size: 0.8rem; color: var(--rx-zinc-500);
    font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.03em;
}
.rx-billing-stat-value {
    font-size: 1.5rem; font-weight: 700;
    color: var(--rx-zinc-100); line-height: 1;
}

.rx-billing-section {
    margin-bottom: 2rem;
}

.rx-billing-section-header {
    margin-bottom: 1rem;
}

.rx-billing-section-title {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 1.125rem; font-weight: 600;
    color: var(--rx-zinc-100);
}

/* =====================================================
   SETTINGS PAGE - GRID LAYOUT
   ===================================================== */
.rx-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.rx-settings-card {
    display: flex; align-items: center; gap: 1rem;
    padding: 1.25rem; background: var(--rx-card-bg);
    border: 1px solid var(--rx-border); border-radius: var(--rx-radius-lg);
    transition: all 0.2s; text-decoration: none !important;
}
.rx-settings-card:hover {
    border-color: var(--rx-border-solid);
    background: var(--rx-card-solid);
    transform: translateY(-2px);
}

.rx-settings-icon {
    width: 52px; height: 52px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rx-settings-blue { background: rgba(59,130,246,0.1); color: var(--rx-blue-400); }
.rx-settings-green { background: rgba(34,197,94,0.1); color: var(--rx-green); }
.rx-settings-purple { background: rgba(168,85,247,0.1); color: #a855f7; }
.rx-settings-amber { background: rgba(245,158,11,0.1); color: var(--rx-amber); }
.rx-settings-red { background: rgba(239,68,68,0.1); color: var(--rx-red); }
.rx-settings-teal { background: rgba(20,184,166,0.1); color: #14b8a6; }

.rx-settings-info {
    flex: 1;
}
.rx-settings-info h3 {
    font-size: 0.938rem; font-weight: 600;
    color: var(--rx-zinc-100); margin-bottom: 0.25rem;
}
.rx-settings-info p {
    font-size: 0.8rem; color: var(--rx-zinc-500);
    margin: 0; line-height: 1.4;
}

/* =====================================================
   RESPONSIVE - NEW COMPONENTS
   ===================================================== */
@media (max-width: 768px) {
    .rx-servers-toolbar {
        flex-direction: column; align-items: stretch;
    }
    .rx-servers-search { min-width: 100%; }
    .rx-servers-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
    .rx-dash-overview { grid-template-columns: 1fr; }
    .rx-dash-grid { grid-template-columns: 1fr; }
    .rx-billing-overview { grid-template-columns: repeat(2, 1fr); }
    .rx-settings-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .rx-billing-overview { grid-template-columns: 1fr; }
    .rx-dash-overview-card { flex-direction: column; text-align: center; }
    .rx-billing-stat-card { flex-direction: column; text-align: center; }
}

/* =====================================================
   TICKET VIEW PAGE
   ===================================================== */
.rx-ticket-banner {
    padding: 1rem 1.25rem; border-radius: var(--rx-radius);
    display: flex; align-items: center; gap: 1rem;
    margin-bottom: 1.5rem;
}
.rx-ticket-banner-closed {
    background: rgba(245,158,11,0.1);
    border: 1px solid rgba(245,158,11,0.3);
}
.rx-ticket-banner-icon {
    width: 40px; height: 40px; border-radius: 8px;
    background: rgba(245,158,11,0.15);
    display: flex; align-items: center; justify-content: center;
    color: var(--rx-amber); flex-shrink: 0;
}
.rx-ticket-banner-text strong {
    display: block; font-size: 0.938rem;
    color: var(--rx-zinc-100); margin-bottom: 0.25rem;
}
.rx-ticket-banner-text span {
    font-size: 0.8rem; color: var(--rx-zinc-400);
}

/* Ticket Header */
.rx-ticket-hero {
    background: var(--rx-card-bg); border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-lg); padding: 1.5rem;
    margin-bottom: 1.5rem; display: flex;
    justify-content: space-between; align-items: flex-start; gap: 1.5rem;
}

.rx-ticket-hero-main { flex: 1; }

.rx-ticket-hero-top {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.rx-ticket-id {
    padding: 0.35rem 0.75rem; border-radius: 6px;
    background: rgba(59,130,246,0.1); color: var(--rx-blue-400);
    font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.02em;
}

.rx-ticket-dept {
    padding: 0.35rem 0.75rem; border-radius: 6px;
    background: rgba(113,113,122,0.15); color: var(--rx-zinc-400);
    font-size: 0.75rem; font-weight: 500;
}

.rx-ticket-title {
    font-size: 1.5rem; font-weight: 600;
    color: var(--rx-zinc-100); margin-bottom: 0.5rem;
    line-height: 1.3;
}

.rx-ticket-meta {
    display: flex; align-items: center; gap: 0.5rem;
    flex-wrap: wrap;
}
.rx-ticket-meta-item {
    display: flex; align-items: center; gap: 0.4rem;
    font-size: 0.8rem; color: var(--rx-zinc-500);
}
.rx-ticket-meta-sep {
    color: var(--rx-zinc-600);
}

.rx-ticket-hero-actions {
    display: flex; gap: 0.75rem; flex-shrink: 0;
}

/* Ticket Chat/Messages */
.rx-ticket-chat {
    display: flex; flex-direction: column; gap: 1.5rem;
    margin-bottom: 2rem;
}

.rx-ticket-message {
    display: flex; gap: 1rem; align-items: flex-start;
}

.rx-ticket-message-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(59,130,246,0.1);
    display: flex; align-items: center; justify-content: center;
    color: var(--rx-blue-400); font-weight: 600;
    font-size: 0.875rem; flex-shrink: 0;
}
.rx-ticket-message-avatar-staff {
    background: rgba(34,197,94,0.1);
    color: var(--rx-green);
}

.rx-ticket-message-content {
    flex: 1; background: var(--rx-card-bg);
    border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-lg);
    padding: 1.25rem;
}

.rx-ticket-message-staff .rx-ticket-message-content {
    background: rgba(34,197,94,0.05);
    border-color: rgba(34,197,94,0.2);
}

.rx-ticket-message-header {
    display: flex; justify-content: space-between;
    align-items: flex-start; margin-bottom: 0.875rem;
    gap: 1rem;
}

.rx-ticket-message-author {
    display: flex; align-items: center; gap: 0.5rem;
}

.rx-ticket-message-name {
    font-size: 0.875rem; font-weight: 600;
    color: var(--rx-zinc-100);
}

.rx-ticket-message-role {
    padding: 0.2rem 0.5rem; border-radius: 4px;
    background: rgba(113,113,122,0.15);
    color: var(--rx-zinc-500);
    font-size: 0.7rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: 0.03em;
}
.rx-ticket-message-role-staff {
    background: rgba(34,197,94,0.15);
    color: var(--rx-green);
}

.rx-ticket-message-time {
    font-size: 0.75rem; color: var(--rx-zinc-500);
    white-space: nowrap;
}

.rx-ticket-message-body {
    font-size: 0.875rem; line-height: 1.6;
    color: var(--rx-zinc-300);
}
.rx-ticket-message-body p {
    margin-bottom: 0.75rem;
}
.rx-ticket-message-body p:last-child {
    margin-bottom: 0;
}

/* Ticket Attachments */
.rx-ticket-attachments {
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid var(--rx-border);
}

.rx-ticket-attachments-label {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8rem; font-weight: 500;
    color: var(--rx-zinc-400); margin-bottom: 0.75rem;
}

.rx-ticket-attachments-list {
    display: flex; flex-direction: column; gap: 0.5rem;
}

.rx-ticket-attachment-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.75rem; background: rgba(39,39,42,0.5);
    border: 1px solid var(--rx-border); border-radius: 6px;
    font-size: 0.8rem; color: var(--rx-zinc-300);
    text-decoration: none !important; transition: all 0.2s;
}
.rx-ticket-attachment-item:hover {
    background: rgba(39,39,42,0.8);
    border-color: var(--rx-border-solid);
    color: var(--rx-blue-400);
}

/* Ticket Rating */
.rx-ticket-rating {
    margin-top: 1rem; padding-top: 1rem;
    border-top: 1px solid var(--rx-border);
    display: flex; align-items: center; gap: 1rem;
}

.rx-ticket-rating-text {
    font-size: 0.8rem; color: var(--rx-zinc-500);
}

.rating {
    display: flex; gap: 0.25rem;
}
.rating .star {
    cursor: pointer; color: var(--rx-zinc-600);
    font-size: 1.125rem; transition: color 0.2s;
}
.rating .star:hover,
.rating .star.active {
    color: var(--rx-amber);
}

.rating-done {
    display: flex; align-items: center; gap: 0.75rem;
}
.rating-done .star {
    color: var(--rx-zinc-600);
    font-size: 1rem;
}
.rating-done .star.active {
    color: var(--rx-amber);
}

/* Reply Form */
.rx-ticket-reply-form {
    background: var(--rx-card-bg); border: 1px solid var(--rx-border);
    border-radius: var(--rx-radius-lg); padding: 1.5rem;
}

.rx-ticket-reply-header {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 1.5rem; padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--rx-border);
}
.rx-ticket-reply-header i { color: var(--rx-blue-400); }
.rx-ticket-reply-header span {
    font-size: 1rem; font-weight: 600; color: var(--rx-zinc-100);
}

.rx-ticket-reply-actions {
    display: flex; gap: 0.75rem; margin-top: 1.5rem;
    padding-top: 1.25rem; border-top: 1px solid var(--rx-border);
}

.rx-ticket-upload .custom-file-label {
    background: rgba(39,39,42,0.5);
    border-color: var(--rx-border);
    color: var(--rx-zinc-400);
}

/* =====================================================
   RESPONSIVE - TICKET VIEW
   ===================================================== */
@media (max-width: 768px) {
    .rx-ticket-hero {
        flex-direction: column;
    }
    .rx-ticket-hero-actions {
        width: 100%;
    }
    .rx-ticket-hero-actions button {
        flex: 1;
    }
    .rx-ticket-message {
        flex-direction: column;
    }
    .rx-ticket-message-avatar {
        align-self: flex-start;
    }
    .rx-ticket-reply-actions {
        flex-direction: column;
    }
    .rx-ticket-reply-actions button {
        width: 100%;
    }
}

/* =====================================================
   PROFESSIONAL LOGIN PAGE (SPLIT SCREEN)
   ===================================================== */
.rx-login-split {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: 100vh;
    max-height: 100vh;
    overflow: hidden;
    background: #09090b;
}

/* Home Button */
.rx-login-home-btn {
    position: absolute;
    top: 1.5rem;
    left: 1.5rem;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    background: transparent;
    border: none;
    color: var(--rx-zinc-400);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s;
    border-radius: 6px;
}

.rx-login-home-btn:hover {
    color: #fff;
    background: rgba(39,39,42,0.5);
}

/* Gradient Separator */
.rx-login-separator {
    position: absolute;
    top: 0;
    left: 50%;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to right, transparent 0%, transparent 45%, rgba(9,9,11,0.3) 49%, rgba(24,24,27,0.15) 51%, transparent 55%, transparent 100%);
    z-index: 10;
    display: none;
}

@media (min-width: 1024px) {
    .rx-login-separator { display: block; }
}

/* Left Panel - Branding */
.rx-login-left {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 2rem 2.5rem;
    background: #09090b;
    height: 100vh;
    overflow: hidden;
}

@media (max-width: 1023px) {
    .rx-login-left { display: none; }
}

/* Background Decorations */
.rx-login-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.rx-login-bg-image {
    position: absolute;
    inset: 0;
    background-image: url('../images/palworld_bg2.webp');
    background-size: cover;
    background-position: center;
    opacity: 0.1;
}

.rx-login-bg-gradient-tl {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top left, rgba(59,130,246,0.05) 0%, rgba(0,0,0,0) 50%);
}

.rx-login-bg-paths {
    position: absolute;
    inset: 0;
    opacity: 0.8;
    transform: scale(1.5);
}

.rx-login-svg {
    width: 100%;
    height: 100%;
    color: #fff;
}

/* Logo and Branding */
.rx-login-brand {
    position: relative;
    z-index: 10;
    margin-top: 2rem;
}

.rx-login-logo-wrap {
    margin-bottom: 2rem;
}

.rx-login-logo {
    height: 5rem;
    width: auto;
}

@media (min-width: 768px) {
    .rx-login-logo { height: 6rem; }
}

.rx-login-tagline {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--rx-zinc-400);
    max-width: 28rem;
}

/* Testimonial */
.rx-login-testimonial {
    position: relative;
    z-index: 10;
    border-left: 4px solid var(--rx-blue-500);
    padding-left: 1rem;
    max-width: 32rem;
}

.rx-login-testimonial-text {
    font-size: 1rem;
    font-style: italic;
    color: var(--rx-zinc-300);
    margin-bottom: 0.5rem;
    line-height: 1.5;
}

.rx-login-testimonial-author {
    font-size: 0.875rem;
    color: var(--rx-zinc-500);
}

/* Right Panel - Form */
.rx-login-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: rgba(24,24,27,0.5);
    height: 100vh;
    overflow-y: auto;
}

@media (max-width: 1023px) {
    .rx-login-right {
        grid-column: 1 / -1;
    }
}

/* Background Gradient */
.rx-login-right-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at bottom right, rgba(59,130,246,0.05) 0%, rgba(0,0,0,0) 50%);
}

/* Form Container */
.rx-login-form-container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 28rem;
}

/* Form Header */
.rx-login-form-header {
    margin-bottom: 1.25rem;
}

.rx-login-form-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--rx-zinc-100) !important;
    margin-bottom: 0.375rem;
    line-height: 1.2;
}

.rx-login-form-subtitle {
    font-size: 0.9rem;
    color: var(--rx-zinc-400);
    line-height: 1.4;
}

/* Form */
.rx-login-form {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
}

.rx-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.rx-form-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--rx-zinc-200);
}

.rx-form-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rx-form-forgot {
    font-size: 0.875rem;
    color: var(--rx-zinc-400);
    text-decoration: none;
    transition: color 0.15s;
}

.rx-form-forgot:hover {
    color: var(--rx-blue-400);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.rx-form-input-wrap {
    position: relative;
}

.rx-form-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--rx-zinc-400);
    transition: color 0.2s;
}

.rx-form-input-wrap:focus-within .rx-form-icon {
    color: var(--rx-blue-400);
}

.rx-form-input {
    width: 100%;
    padding: 0.625rem 0.75rem 0.625rem 2.5rem;
    background: transparent;
    border: 1px solid rgba(63,63,70,0.6);
    border-radius: 8px;
    color: var(--rx-zinc-100);
    font-size: 1rem;
    transition: all 0.2s;
}

.rx-form-input::placeholder {
    color: var(--rx-zinc-600);
}

.rx-form-input:focus {
    outline: none;
    background: rgba(39,39,42,0.3);
    border-color: rgba(59,130,246,0.6);
    box-shadow: none;
}

.rx-form-eye {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--rx-zinc-400);
    cursor: pointer;
    padding: 0.25rem;
    transition: color 0.15s;
}

.rx-form-eye:hover {
    color: var(--rx-zinc-100);
}

/* Remember Me */
.rx-form-remember {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

.rx-form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    cursor: pointer;
    user-select: none;
}

.rx-form-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    width: 0;
    height: 0;
}

.rx-form-checkbox-box {
    width: 16px;
    height: 16px;
    min-width: 16px;
    border: 1.5px solid rgba(113,113,122,0.5);
    border-radius: 3px;
    background: transparent;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rx-form-checkbox input[type="checkbox"]:checked + .rx-form-checkbox-box {
    background: var(--rx-blue-500);
    border-color: var(--rx-blue-500);
}

.rx-form-checkbox input[type="checkbox"]:checked + .rx-form-checkbox-box::after {
    content: '✓';
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.rx-form-checkbox-label {
    font-size: 0.875rem;
    color: var(--rx-zinc-300);
    line-height: 1;
    white-space: nowrap;
}

/* Submit Button */
.rx-form-submit {
    width: 100%;
    padding: 0.7rem 1.5rem;
    margin-top: 0.375rem;
    background: var(--rx-blue-500);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    position: relative;
    overflow: hidden;
}

.rx-form-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.1), transparent);
    transform: translateX(-100%);
    transition: transform 0.6s;
}

.rx-form-submit:hover {
    background: var(--rx-blue-600);
    transform: translateY(-1px);
}

.rx-form-submit:hover::before {
    transform: translateX(100%);
}

.rx-form-submit:active {
    transform: translateY(0);
}

/* Form Footer */
.rx-login-form-footer {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--rx-zinc-400);
}

.rx-form-link {
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.15s;
}

.rx-form-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Responsive */
@media (max-width: 1280px) {
    .rx-login-logo { height: 6rem; }
    .rx-login-tagline { font-size: 1rem; }
    .rx-login-testimonial-text { font-size: 1rem; }
}

@media (max-width: 1023px) {
    .rx-login-split {
        grid-template-columns: 1fr;
    }
    .rx-login-form-title {
        font-size: 1.5rem;
    }
}

/* =====================================================
   REGISTRATION PAGE STYLES
   ===================================================== */

/* Registration Disabled State */
.rx-register-disabled {
    min-height: 100vh;
    background: #09090b;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.rx-register-disabled-content {
    text-align: center;
    max-width: 500px;
    background: rgba(24, 24, 27, 0.6);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 16px;
    padding: 3rem 2rem;
    backdrop-filter: blur(10px);
}

/* Large button style only for registration page */
.rx-register-split .rx-btn-primary,
.rx-register-form .rx-register-submit {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: 1px solid rgba(37, 99, 235, 0.3);
    color: #fff !important;
    padding: 0.875rem 1.5rem;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.2s;
}

.rx-register-split .rx-btn-primary:hover,
.rx-register-form .rx-register-submit:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.3);
}

/* Split Layout */
.rx-register-split {
    display: grid;
    grid-template-columns: 420px 1fr;
    min-height: 100vh;
    background: #09090b;
}

/* ===== LEFT PANEL - BRANDING ===== */
.rx-register-left {
    background: linear-gradient(135deg, #18181b 0%, #0f0f10 100%);
    padding: 3rem 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
    border-right: 1px solid rgba(63, 63, 70, 0.3);
}

/* Background decorations */
.rx-register-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    pointer-events: none;
}

.rx-register-bg-gradient {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle at 30% 30%, rgba(37, 99, 235, 0.08) 0%, transparent 50%);
}

.rx-register-bg-paths {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    opacity: 0.6;
}

.rx-register-svg {
    width: 100%;
    height: 100%;
    color: #3b82f6;
}

/* Branding */
.rx-register-brand {
    position: relative;
    z-index: 1;
}

.rx-register-logo {
    height: 7rem;
    width: auto;
    max-width: 100%;
    margin-bottom: 1.5rem;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3));
}

.rx-register-tagline {
    font-size: 1.125rem;
    color: #d4d4d8;
    line-height: 1.6;
    margin: 0;
}

/* Features List */
.rx-register-features {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    position: relative;
    z-index: 1;
}

.rx-register-feature {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.rx-register-feature-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
}

.rx-register-feature-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fafafa;
    margin: 0 0 0.25rem;
}

.rx-register-feature-text {
    font-size: 0.875rem;
    color: #a1a1aa;
    margin: 0;
}

/* ===== RIGHT PANEL - FORM ===== */
.rx-register-right {
    background: #09090b;
    padding: 0;
    overflow-y: auto;
    height: 100vh;
}

.rx-register-form-container {
    max-width: 700px;
    margin: 0 auto;
    padding: 2.5rem 2rem;
}

/* Header */
.rx-register-header {
    margin-bottom: 2rem;
    position: relative;
}

.rx-register-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #a1a1aa;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 1.5rem;
    transition: color 0.2s;
}

.rx-register-back:hover {
    color: #fafafa;
}

.rx-register-title {
    font-size: 2.25rem;
    font-weight: 700;
    color: #fafafa;
    margin: 0 0 0.5rem;
    letter-spacing: -0.02em;
}

.rx-register-subtitle {
    font-size: 1rem;
    color: #a1a1aa;
    margin: 0;
}

/* Progress Steps */
.rx-register-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
    position: relative;
    padding: 0 2rem;
}

.rx-register-steps::before {
    content: "";
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(63, 63, 70, 0.4);
    z-index: 0;
}

.rx-register-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    position: relative;
    z-index: 1;
}

.rx-step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(39, 39, 42, 0.8);
    border: 2px solid rgba(63, 63, 70, 0.6);
    color: #71717a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.3s;
}

.rx-step-label {
    font-size: 0.8125rem;
    color: #71717a;
    font-weight: 500;
    transition: color 0.3s;
}

.rx-register-step.active .rx-step-number {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border-color: #2563eb;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2);
}

.rx-register-step.active .rx-step-label {
    color: #fafafa;
}

.rx-register-step.completed .rx-step-number {
    background: #22c55e;
    border-color: #22c55e;
    color: #fff;
}

.rx-register-step.completed .rx-step-number::before {
    content: "✓";
    font-size: 1rem;
}

.rx-register-step.completed .rx-step-label {
    color: #a1a1aa;
}

/* Wizard Steps */
.rx-wizard-step {
    display: none;
    animation: fadeInStep 0.3s ease;
    overflow: visible;
}

.rx-wizard-step.active {
    display: block;
}

@keyframes fadeInStep {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Wizard Navigation */
.rx-wizard-nav {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

.rx-btn-wizard-next,
.rx-btn-wizard-prev {
    background: #2563eb;
    border: 1px solid #2563eb;
    color: #fff;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.rx-btn-wizard-prev {
    background: rgba(39, 39, 42, 0.8);
    border: 1px solid rgba(63, 63, 70, 0.6);
    color: #a1a1aa;
}

.rx-btn-wizard-next:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.rx-btn-wizard-prev:hover {
    background: rgba(39, 39, 42, 1);
    border-color: rgba(63, 63, 70, 0.8);
    color: #fafafa;
}

.rx-btn-wizard-next:active,
.rx-btn-wizard-prev:active {
    transform: scale(0.98);
}

/* Form Sections */
.rx-register-section {
    background: rgba(24, 24, 27, 0.6);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 12px;
    margin-bottom: 1.5rem;
    backdrop-filter: blur(10px);
    overflow: visible;
}

.rx-register-section-header {
    background: rgba(39, 39, 42, 0.5);
    padding: 0.875rem 1.25rem;
    border-bottom: 1px solid rgba(63, 63, 70, 0.4);
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #fafafa;
}

.rx-register-section-header i {
    color: #60a5fa;
}

.rx-register-section-content {
    padding: 1.25rem;
}

/* Form Grids */
.rx-register-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1.25rem;
    overflow: visible;
}

.rx-register-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

/* Form Groups - Reuse login form styles */
.rx-register-form .rx-form-group {
    margin-bottom: 0;
    position: relative;
    overflow: visible;
}

.rx-register-form .rx-form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #e4e4e7;
}

.rx-register-form .rx-form-optional {
    color: #71717a;
    font-weight: 400;
    font-size: 0.8125rem;
}

.rx-register-form .rx-form-input {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(63, 63, 70, 0.6);
    color: #fafafa;
    padding: 0.625rem 0.875rem;
    border-radius: 8px;
    font-size: 0.9375rem;
    transition: all 0.2s;
}

.rx-register-form .rx-form-input:focus {
    background: rgba(24, 24, 27, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
    outline: none;
}

.rx-register-form .rx-form-input::placeholder {
    color: #52525b;
}

.rx-register-form .rx-form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a1a1aa' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    padding-right: 2.5rem;
    cursor: pointer;
    appearance: none;
}

.rx-register-form .rx-form-help {
    font-size: 0.8125rem;
    color: #71717a;
    margin-top: 0.375rem;
    margin-bottom: 0;
}

/* Password Input with Icon and Toggle */
.rx-register-form .rx-form-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.rx-register-form .rx-form-input-wrap .rx-form-input {
    padding-left: 2.75rem;
    padding-right: 2.75rem;
}

/* Password Actions (Generate + Strength) */
.rx-register-pw-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 0.875rem;
    padding: 0 1.25rem 1.25rem;
}

.rx-btn-generate {
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.25);
    color: #60a5fa;
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.rx-btn-generate:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.4);
    color: #93c5fd;
}

.rx-pw-strength {
    flex: 1;
}

.rx-pw-strength-bar {
    height: 6px;
    background: rgba(39, 39, 42, 0.6);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.375rem;
}

.rx-pw-strength-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #22c55e 0%, #4ade80 100%);
    transition: width 0.3s, background 0.3s;
    border-radius: 3px;
}

.rx-pw-strength-text {
    font-size: 0.75rem;
    color: #71717a;
    margin: 0;
    text-align: center;
}

/* Marketing Text */
.rx-register-marketing-text {
    color: #a1a1aa;
    font-size: 0.875rem;
    margin: 0 0 1rem;
}

/* Phone Number Dropdown Fix */
.rx-register-form .intl-tel-input {
    width: 100%;
    position: relative;
    z-index: 10;
}

.rx-register-form .intl-tel-input .country-list {
    z-index: 9999 !important;
    position: absolute !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #18181b !important;
    border: 1px solid rgba(63, 63, 70, 0.8) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important;
    margin-top: 0.25rem !important;
    width: 280px !important;
}

.rx-register-form .intl-tel-input .country-list .country {
    padding: 0.5rem 0.75rem !important;
    color: #d4d4d8 !important;
    transition: background 0.15s !important;
    font-size: 0.8125rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

.rx-register-form .intl-tel-input .country-list .country .country-name {
    flex: 1 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.rx-register-form .intl-tel-input .country-list .country .dial-code {
    color: #71717a !important;
    font-size: 0.75rem !important;
    flex-shrink: 0 !important;
}

.rx-register-form .intl-tel-input .country-list .country:hover {
    background: rgba(39, 39, 42, 0.6) !important;
}

.rx-register-form .intl-tel-input .country-list .country.highlight {
    background: rgba(59, 130, 246, 0.12) !important;
}

/* Custom Scrollbar for Phone Dropdown */
.rx-register-form .intl-tel-input .country-list::-webkit-scrollbar {
    width: 6px !important;
}

.rx-register-form .intl-tel-input .country-list::-webkit-scrollbar-track {
    background: rgba(39, 39, 42, 0.4) !important;
    border-radius: 3px !important;
}

.rx-register-form .intl-tel-input .country-list::-webkit-scrollbar-thumb {
    background: rgba(113, 113, 122, 0.5) !important;
    border-radius: 3px !important;
}

.rx-register-form .intl-tel-input .country-list::-webkit-scrollbar-thumb:hover {
    background: rgba(113, 113, 122, 0.7) !important;
}

.rx-register-form .intl-tel-input .selected-flag {
    background: transparent !important;
    border-right: 1px solid rgba(63, 63, 70, 0.6) !important;
    padding: 0 0.625rem !important;
    width: 85px !important;
    min-width: 85px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.rx-register-form .intl-tel-input .selected-flag:hover {
    background: rgba(39, 39, 42, 0.3) !important;
}

.rx-register-form .intl-tel-input .selected-flag .iti-flag {
    margin-right: 0.5rem !important;
}

.rx-register-form .intl-tel-input .selected-flag .selected-dial-code {
    font-size: 0.875rem !important;
    color: #a1a1aa !important;
    margin-right: 0.25rem !important;
}

.rx-register-form .intl-tel-input .selected-flag .iti-arrow {
    border-left: 3px solid transparent !important;
    border-right: 3px solid transparent !important;
    border-top: 4px solid #71717a !important;
    margin: 0 !important;
}

.rx-register-form .intl-tel-input input[type="tel"] {
    padding-left: 95px !important;
}

/* Country Dropdown - Clean and Simple (No Flags) */
.rx-register-form #inputCountry {
    padding-left: 0.875rem !important;
    padding-right: 2.5rem !important;
    cursor: pointer !important;
    position: relative !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    height: 42px !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
}

/* Custom arrow for country dropdown */
.rx-form-group:has(#inputCountry) {
    position: relative;
}

.rx-form-group:has(#inputCountry)::after {
    content: "";
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    margin-top: 1.25rem;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #71717a;
    pointer-events: none;
}

/* Style country select dropdown panel */
.rx-register-form #inputCountry:focus {
    background-color: rgba(24, 24, 27, 0.3) !important;
    border-color: rgba(59, 130, 246, 0.5) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
    outline: none !important;
}

/* Country dropdown scrollbar - same as phone */
.rx-register-form select#inputCountry {
    scrollbar-width: thin !important;
    scrollbar-color: rgba(113, 113, 122, 0.5) rgba(39, 39, 42, 0.4) !important;
}

.rx-register-form select#inputCountry::-webkit-scrollbar {
    width: 6px !important;
}

.rx-register-form select#inputCountry::-webkit-scrollbar-track {
    background: rgba(39, 39, 42, 0.4) !important;
    border-radius: 3px !important;
}

.rx-register-form select#inputCountry::-webkit-scrollbar-thumb {
    background: rgba(113, 113, 122, 0.5) !important;
    border-radius: 3px !important;
}

.rx-register-form select#inputCountry::-webkit-scrollbar-thumb:hover {
    background: rgba(113, 113, 122, 0.7) !important;
}

/* Style the dropdown options - dark theme like phone dropdown */
.rx-register-form #inputCountry option {
    background-color: #18181b !important;
    color: #d4d4d8 !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8125rem !important;
}

.rx-register-form #inputCountry option:hover,
.rx-register-form #inputCountry option:focus {
    background-color: rgba(39, 39, 42, 0.6) !important;
    color: #fafafa !important;
}

.rx-register-form #inputCountry option:checked {
    background-color: rgba(59, 130, 246, 0.12) !important;
    color: #fafafa !important;
}

/* State Input - Increased Height */
.rx-register-form #state {
    height: 42px !important;
    padding: 0.75rem 0.875rem !important;
}

/* Increase height for all inputs in grid to match */
.rx-register-grid-3 .rx-form-input {
    height: 42px !important;
    padding: 0.75rem 0.875rem !important;
}

/* Captcha Styling in Registration */
.rx-register-section-content .captchacontainer {
    margin: 0;
}

.rx-register-section-content .g-recaptcha {
    display: inline-block;
}

.rx-register-section-content .h-captcha {
    display: inline-block;
}

/* Password Strength Bar Improvements */
.rx-pw-strength-bar {
    height: 4px;
    background: rgba(39, 39, 42, 0.6);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.375rem;
}

.rx-pw-strength-fill {
    height: 100%;
    width: 0%;
    background: #ef4444;
    transition: width 0.3s, background 0.3s;
    border-radius: 2px;
}

.rx-pw-strength-fill.weak {
    background: #ef4444;
    width: 33%;
}

.rx-pw-strength-fill.moderate {
    background: #f59e0b;
    width: 66%;
}

.rx-pw-strength-fill.strong {
    background: #22c55e;
    width: 100%;
}

/* Actions Footer */
.rx-register-actions {
    background: rgba(24, 24, 27, 0.6);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    backdrop-filter: blur(10px);
}

.rx-register-actions .rx-wizard-nav {
    margin-top: 1rem;
}

/* Final Step - No Card Style for Checkboxes and Buttons */
#step-4 .rx-form-checkbox {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    user-select: none;
    padding: 0.75rem 0;
}

#step-4 .rx-form-checkbox input[type="checkbox"] {
    display: none;
}

#step-4 .rx-form-checkbox-box {
    width: 18px;
    height: 18px;
    min-width: 18px;
    border: 1.5px solid rgba(113, 113, 122, 0.5);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

#step-4 .rx-form-checkbox input[type="checkbox"]:checked + .rx-form-checkbox-box {
    background: #3b82f6;
    border-color: #3b82f6;
}

#step-4 .rx-form-checkbox input[type="checkbox"]:checked + .rx-form-checkbox-box::after {
    content: "✓";
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

#step-4 .rx-form-checkbox-label {
    font-size: 0.875rem;
    color: #e4e4e7;
    line-height: 1.5;
}

/* Submit Button */
.rx-register-submit {
    background: #22c55e;
    border: 1px solid #22c55e;
    color: #fff;
    padding: 0.625rem 1.25rem;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.rx-register-submit:hover {
    background: #16a34a;
    border-color: #16a34a;
}

.rx-register-submit:active {
    transform: scale(0.98);
}

/* Login Link */
.rx-register-login-link {
    text-align: center;
    font-size: 0.875rem;
    color: #a1a1aa;
    margin: 1rem 0 0;
}

.rx-register-login-link a {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
}

.rx-register-login-link a:hover {
    color: #93c5fd;
}

/* TOS Link */
.rx-register-tos-link {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 500;
}

.rx-register-tos-link:hover {
    color: #93c5fd;
    text-decoration: underline;
}

/* Alert Styles */
.rx-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.rx-alert i {
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.rx-alert-error {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-left: 4px solid #ef4444;
    color: #fecaca;
}

.rx-alert-info {
    background: rgba(59, 130, 246, 0.12);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-left: 4px solid #3b82f6;
    color: #dbeafe;
}

/* Responsive */
@media (max-width: 1280px) {
    .rx-register-split {
        grid-template-columns: 380px 1fr;
    }
    
    .rx-register-left {
        padding: 2.5rem 2rem;
    }
    
    .rx-register-logo {
        height: 6rem;
    }
}

@media (max-width: 1023px) {
    .rx-register-split {
        grid-template-columns: 1fr;
    }
    
    .rx-register-left {
        display: none;
    }
    
    .rx-register-form-container {
        padding: 2rem 1.5rem;
    }
    
    .rx-register-title {
        font-size: 1.75rem;
    }
    
    .rx-register-steps {
        padding: 0 1rem;
    }
    
    .rx-step-label {
        font-size: 0.75rem;
    }
}

@media (max-width: 640px) {
    .rx-register-grid-2,
    .rx-register-grid-3 {
        grid-template-columns: 1fr;
    }
    
    .rx-register-form-container {
        padding: 1.5rem 1rem;
    }
    
    .rx-register-section-content,
    .rx-register-grid-2 {
        padding: 1rem;
    }
    
    .rx-register-pw-actions {
        flex-direction: column;
        align-items: stretch;
        padding: 0 1rem 1rem;
    }
    
    .rx-register-steps {
        padding: 0 0.5rem;
    }
    
    .rx-step-number {
        width: 32px;
        height: 32px;
        font-size: 0.75rem;
    }
    
    .rx-step-label {
        font-size: 0.7rem;
    }
    
    .rx-wizard-nav {
        flex-direction: column;
    }
    
    .rx-btn-wizard-next,
    .rx-btn-wizard-prev {
        width: 100%;
    }
}

/* =====================================================


/* =====================================================
   TICKET VIEW PAGE - COMPLETELY REDESIGNED
   ===================================================== */

/* Back to list link */
.rx-ticket-back {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    color: #a1a1aa;
    text-decoration: none;
    margin-bottom: 1.5rem;
    transition: color 0.2s;
}

.rx-ticket-back:hover {
    color: #fafafa;
}

/* Ticket Header */
.rx-ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}

.rx-ticket-header-info {
    flex: 1;
}

.rx-ticket-meta-line {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
}

.rx-ticket-date {
    color: #d4d4d8;
}

.rx-ticket-dept {
    color: #a1a1aa;
    text-transform: uppercase;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    background: rgba(113, 113, 122, 0.15);
}

.rx-ticket-meta-sep {
    color: #52525b;
}

.rx-ticket-status {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
    text-transform: uppercase;
}

.rx-ticket-status-open {
    color: #22c55e;
    background: rgba(34, 197, 94, 0.1);
}

.rx-ticket-status-closed {
    color: #fbbf24;
    background: rgba(251, 191, 36, 0.1);
}

.rx-ticket-title {
    font-size: 1.875rem;
    font-weight: 600;
    color: #fafafa;
    margin: 0;
    line-height: 1.3;
}

.rx-btn-add-reply {
    background: rgba(39, 39, 42, 0.8);
    color: #fafafa;
    border: 1px solid rgba(63, 63, 70, 0.8);
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

.rx-btn-add-reply:hover {
    background: rgba(63, 63, 70, 0.9);
    border-color: rgba(113, 113, 122, 0.8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Divider */
.rx-ticket-divider {
    border: none;
    border-top: 1px solid rgba(63, 63, 70, 0.6);
    margin: 1.5rem 0 2rem 0;
}

/* Closed Notice */
.rx-ticket-closed-notice {
    margin-bottom: 2rem;
    padding: 0.875rem 1rem;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 8px;
    color: #fbbf24;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Reply Section - Completely Redesigned */
.rx-reply-section {
    background: transparent;
    padding: 0;
    margin-bottom: 3rem;
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rx-reply-section-title {
    font-size: 1rem;
    font-weight: 500;
    color: #fafafa;
    margin: 0 0 1rem 0;
}

/* Reply Editor - Clean Design */
.rx-reply-editor {
    background: rgba(24, 24, 27, 0.4);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.2s;
}

.rx-reply-editor:focus-within {
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.rx-reply-textarea {
    width: 100%;
    min-height: 140px;
    padding: 1rem;
    background: transparent;
    border: none;
    color: #d4d4d8;
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    outline: none;
}

.rx-reply-textarea::placeholder {
    color: #71717a;
}

.rx-reply-editor-footer {
    padding: 0.625rem 1rem;
    background: rgba(39, 39, 42, 0.4);
    border-top: 1px solid rgba(63, 63, 70, 0.4);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rx-reply-editor-hint {
    font-size: 0.75rem;
    color: #71717a;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rx-reply-hint-key {
    font-weight: 600;
    color: #a1a1aa;
}

.rx-reply-word-count {
    font-weight: 500;
    color: #a1a1aa;
}

.rx-reply-cancel {
    color: #a1a1aa;
    cursor: pointer;
    transition: color 0.2s;
    font-weight: 500;
}

.rx-reply-cancel:hover {
    color: #fafafa;
}

/* Reply Actions */
.rx-reply-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1rem;
    gap: 1rem;
    flex-wrap: wrap;
}

.rx-reply-attach-section {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
}

.rx-attach-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: rgba(39, 39, 42, 0.6);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 6px;
    color: #a1a1aa;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.rx-attach-btn:hover {
    background: rgba(39, 39, 42, 0.9);
    border-color: rgba(113, 113, 122, 0.6);
    color: #d4d4d8;
}

.rx-attach-input {
    display: none;
}

.rx-attach-info {
    font-size: 0.75rem;
    color: #71717a;
}

/* Send Reply Button */
.rx-btn-send-reply {
    background: rgba(39, 39, 42, 0.8);
    color: #fafafa;
    border: 1px solid rgba(63, 63, 70, 0.8);
    padding: 0.625rem 1.5rem;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.rx-btn-send-reply:hover {
    background: rgba(63, 63, 70, 0.9);
    border-color: rgba(113, 113, 122, 0.8);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Conversation Thread */
.rx-ticket-thread {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rx-ticket-message {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.5rem 0;
    border-bottom: 1px solid rgba(63, 63, 70, 0.4);
}

.rx-ticket-message:last-child {
    border-bottom: none;
}

.rx-message-avatar {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: rgba(63, 63, 70, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fafafa;
    font-weight: 600;
    font-size: 0.875rem;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(82, 82, 91, 0.6);
}

.rx-message-avatar-staff {
    background: #18181b;
    border: 1px solid rgba(63, 63, 70, 0.6);
}

.rx-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

.rx-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.rx-message-content-wrap {
    flex: 1;
    min-width: 0;
}

.rx-message-meta {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

.rx-message-author {
    font-weight: 600;
    font-size: 0.9375rem;
    color: #fafafa;
}

.rx-message-role {
    font-size: 0.875rem;
    color: #71717a;
}

.rx-message-timestamp {
    font-size: 0.8125rem;
    color: #71717a;
    display: block;
    margin-bottom: 0.75rem;
}

.rx-message-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #d4d4d8;
    word-wrap: break-word;
}

.rx-message-text p {
    margin: 0 0 0.75rem 0;
}

.rx-message-text p:last-child {
    margin-bottom: 0;
}

.rx-message-text a {
    color: #6366f1;
    text-decoration: underline;
}

.rx-message-text a:hover {
    color: #818cf8;
}

.rx-message-text strong {
    font-weight: 600;
    color: #fafafa;
}

.rx-message-text ul,
.rx-message-text ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

.rx-message-text li {
    margin-bottom: 0.25rem;
}

.rx-message-text code {
    background: rgba(39, 39, 42, 0.6);
    padding: 0.15rem 0.35rem;
    border-radius: 3px;
    font-size: 0.85rem;
    color: #fbbf24;
    font-family: 'Courier New', monospace;
}

.rx-message-text pre {
    background: rgba(39, 39, 42, 0.8);
    padding: 0.875rem;
    border-radius: 6px;
    overflow-x: auto;
    margin: 0.75rem 0;
}

.rx-message-text pre code {
    background: none;
    padding: 0;
    color: #d4d4d8;
}

/* Message Attachments */
.rx-message-attachments {
    margin-top: 0.875rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.rx-message-att-file {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.65rem;
    background: rgba(39, 39, 42, 0.6);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 6px;
    font-size: 0.8rem;
    color: #d4d4d8;
    text-decoration: none;
    transition: all 0.2s;
}

.rx-message-att-file:hover {
    background: rgba(39, 39, 42, 0.9);
    border-color: rgba(113, 113, 122, 0.6);
    color: #fafafa;
    transform: translateY(-1px);
}

/* Responsive Design */
@media (max-width: 768px) {
    .rx-ticket-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .rx-btn-add-reply {
        width: 100%;
    }
    
    .rx-ticket-title {
        font-size: 1.5rem;
    }
    
    .rx-reply-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .rx-reply-attach-section {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .rx-btn-send-reply {
        width: 100%;
    }
    
    .rx-message-avatar {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 0.8rem;
    }
    
    .rx-ticket-message {
        gap: 0.75rem;
    }
}



/* =====================================================
   SUBMIT TICKET - CLEAN LANDSCAPE LAYOUT
   ===================================================== */

.rx-submit-wrapper {
    max-width: 1500px !important;
    margin: 0 auto;
    padding: 1rem;
}

/* Top Bar */
.rx-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(63, 63, 70, 0.6);
}

.rx-top-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.rx-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #a1a1aa;
    text-decoration: none;
    font-size: 0.875rem;
    transition: color 0.2s;
}

.rx-btn-back:hover {
    color: #fafafa;
}

.rx-page-h1 {
    font-size: 1.5rem;
    font-weight: 600;
    color: #fafafa;
    margin: 0;
}

.rx-btn-submit-top {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1.5rem;
    background: rgba(39, 39, 42, 0.8);
    border: 1px solid rgba(63, 63, 70, 0.8);
    border-radius: 8px;
    color: #fafafa;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.rx-btn-submit-top:hover {
    background: rgba(63, 63, 70, 0.9);
    transform: translateY(-1px);
}

/* Two Column Grid */
.rx-ticket-grid {
    display: grid !important;
    grid-template-columns: 400px 1fr !important;
    gap: 2rem !important;
}

.rx-grid-left {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.rx-grid-right {
    display: flex;
}

/* Field Group */
.rx-field-group {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.rx-label-main {
    font-size: 0.875rem;
    font-weight: 500;
    color: #e4e4e7;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.rx-req {
    padding: 0.125rem 0.5rem;
    background: rgba(39, 39, 42, 0.8);
    border-radius: 4px;
    font-size: 0.75rem;
    color: #a1a1aa;
    font-weight: 400;
}

/* Department Radio Buttons */
.rx-dept-select {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.625rem;
}

.rx-dept-radio {
    position: relative;
    cursor: pointer;
}

.rx-dept-radio input {
    position: absolute;
    opacity: 0;
}

.rx-dept-radio-box {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    background: rgba(39, 39, 42, 0.8);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 8px;
    color: #d4d4d8;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.rx-dept-radio:hover .rx-dept-radio-box {
    background: rgba(39, 39, 42, 1);
    border-color: rgba(113, 113, 122, 0.6);
}

.rx-dept-radio input:checked + .rx-dept-radio-box {
    background: rgba(39, 39, 42, 0.8);
    border: 2px solid #60a5fa;
    color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

/* Input with Icon */
.rx-input-wrapper {
    position: relative;
}

.rx-input-left-icon {
    position: absolute;
    left: 0.875rem;
    top: 50%;
    transform: translateY(-50%);
    color: #71717a;
    pointer-events: none;
}

.rx-input-main {
    width: 100%;
    padding: 0.75rem 0.875rem 0.75rem 2.75rem;
    background: rgba(39, 39, 42, 0.8);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 8px;
    color: #fafafa;
    font-size: 0.9375rem;
    transition: all 0.2s;
    outline: none;
}

.rx-input-main:focus {
    background: rgba(39, 39, 42, 1);
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.1);
}

.rx-input-main::placeholder {
    color: #71717a;
}

/* Select */
.rx-select-main {
    width: 100%;
    padding: 0.75rem 0.875rem;
    background: rgba(39, 39, 42, 0.8);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 8px;
    color: #fafafa;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.875rem center;
    padding-right: 2.5rem;
}

.rx-select-main:focus {
    background: rgba(39, 39, 42, 1);
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.1);
}

/* Row Grid */
.rx-row-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

/* File Upload */
.rx-file-row {
    display: flex;
    gap: 0.625rem;
}

.rx-file-hidden {
    display: none;
}

.rx-file-choose {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(39, 39, 42, 0.8);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 8px;
    color: #a1a1aa;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s;
}

.rx-file-choose:hover {
    background: rgba(39, 39, 42, 1);
    border-color: rgba(113, 113, 122, 0.6);
}

.rx-file-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rx-file-plus {
    width: 44px;
    height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(39, 39, 42, 0.8);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 8px;
    color: #a1a1aa;
    cursor: pointer;
    transition: all 0.2s;
}

.rx-file-plus:hover {
    background: rgba(39, 39, 42, 1);
    border-color: rgba(113, 113, 122, 0.6);
}

.rx-help-text {
    font-size: 0.75rem;
    color: #71717a;
    margin: 0.5rem 0 0 0;
}

/* Message Box - Full Height */
.rx-message-box {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.625rem;
    min-height: 100%;
    width: 100% !important;
}

.rx-textarea-box {
    position: relative;
    min-height: 380px;
    display: flex;
    width: 100% !important;
}

.rx-textarea-icon-top {
    position: absolute;
    left: 0.875rem;
    top: 0.875rem;
    color: #71717a;
    pointer-events: none;
    z-index: 1;
}

.rx-textarea-main {
    width: 100% !important;
    min-height: 380px;
    padding: 0.875rem 0.875rem 0.875rem 2.75rem;
    background: rgba(39, 39, 42, 0.8);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 8px;
    color: #fafafa;
    font-size: 0.9375rem;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    transition: all 0.2s;
    outline: none;
    max-width: 100% !important;
}

.rx-textarea-main:focus {
    background: rgba(39, 39, 42, 1);
    border-color: #60a5fa;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.1);
}

.rx-textarea-main::placeholder {
    color: #71717a;
}

.rx-textarea-bottom {
    padding: 0.75rem 0;
}

.rx-char-counter {
    font-size: 0.8125rem;
    color: #71717a;
}

.rx-char-value {
    font-weight: 600;
    color: #a1a1aa;
}

/* Captcha */
.rx-captcha-box {
    display: flex;
    justify-content: center;
    padding: 0.5rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .rx-ticket-grid {
        grid-template-columns: 1fr;
    }
    
    .rx-message-box {
        min-height: 300px;
    }
    
    .rx-textarea-box {
        min-height: 300px;
    }
    
    .rx-textarea-main {
        min-height: 300px;
    }
}

@media (max-width: 768px) {
    .rx-top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }
    
    .rx-top-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
    
    .rx-btn-submit-top {
        width: 100%;
        justify-content: center;
    }
    
    .rx-dept-select {
        grid-template-columns: 1fr;
    }
    
    .rx-row-2 {
        grid-template-columns: 1fr;
    }
}

/* =====================================================
   SUBMIT TICKET - DEPARTMENT SELECTION
   ===================================================== */

.rx-info-notice {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.125rem;
    background: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 8px;
    margin-bottom: 2rem;
}

.rx-info-notice i {
    color: #60a5fa;
    flex-shrink: 0;
}

.rx-info-notice p {
    font-size: 0.875rem;
    color: #93c5fd;
    margin: 0;
}

.rx-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: #fafafa;
    margin: 0 0 1.25rem 0;
}

.rx-section-title i {
    color: #60a5fa;
}

.rx-dept-list {
    display: grid;
    gap: 1rem;
}

.rx-dept-card {
    display: flex;
    align-items: center;
    gap: 1.125rem;
    padding: 1.25rem 1.5rem;
    background: rgba(39, 39, 42, 0.5);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s;
}

.rx-dept-card:hover {
    background: rgba(39, 39, 42, 0.8);
    border-color: rgba(113, 113, 122, 0.6);
    transform: translateX(3px);
}

.rx-dept-card-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 10px;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
}

.rx-dept-card-content {
    flex: 1;
    min-width: 0;
}

.rx-dept-card-title {
    font-size: 1rem;
    font-weight: 600;
    color: #fafafa;
    margin: 0 0 0.25rem 0;
}

.rx-dept-card-desc {
    font-size: 0.875rem;
    color: #a1a1aa;
    margin: 0;
    line-height: 1.5;
}

.rx-dept-card-arrow {
    color: #52525b;
    flex-shrink: 0;
    transition: transform 0.2s;
}

.rx-dept-card:hover .rx-dept-card-arrow {
    transform: translateX(4px);
    color: #71717a;
}

/* =====================================================
   TICKET SUCCESS - AUTO REDIRECT
   ===================================================== */

.rx-redirect-wrapper {
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.rx-redirect-card {
    max-width: 500px;
    width: 100%;
    text-align: center;
}

.rx-redirect-icon {
    margin-bottom: 1.5rem;
    color: #22c55e;
    animation: scaleIn 0.5s ease-out;
}

@keyframes scaleIn {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.rx-redirect-title {
    font-size: 2rem;
    font-weight: 700;
    color: #fafafa;
    margin: 0 0 1rem 0;
}

.rx-redirect-ticket {
    font-size: 1.125rem;
    color: #d4d4d8;
    margin-bottom: 1.5rem;
}

.rx-redirect-ticket a {
    color: #60a5fa;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s;
}

.rx-redirect-ticket a:hover {
    color: #93c5fd;
}

.rx-redirect-message {
    font-size: 0.9375rem;
    color: #a1a1aa;
    margin: 0 0 1.5rem 0;
}

.rx-redirect-loader {
    width: 100%;
    height: 4px;
    background: rgba(63, 63, 70, 0.5);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 1.5rem;
}

.rx-loader-bar {
    height: 100%;
    background: linear-gradient(90deg, #60a5fa, #93c5fd);
    border-radius: 2px;
    animation: loading 2s ease-in-out;
}

@keyframes loading {
    0% {
        width: 0%;
    }
    100% {
        width: 100%;
    }
}

.rx-redirect-link {
    display: inline-block;
    font-size: 0.875rem;
    color: #71717a;
    text-decoration: none;
    transition: color 0.2s;
}

.rx-redirect-link:hover {
    color: #a1a1aa;
}

/* Responsive */
@media (max-width: 640px) {
    .rx-redirect-title {
        font-size: 1.5rem;
    }
    
    .rx-redirect-ticket {
        font-size: 1rem;
    }
}

/* =====================================================
   ADD FUNDS PAGE
   ===================================================== */

.rx-addfunds-wrapper {
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* Header */
.rx-addfunds-header {
    padding-bottom: 1.5rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid rgba(63, 63, 70, 0.6);
}

.rx-page-title {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.875rem;
    font-weight: 700;
    color: #fafafa;
    margin: 0 0 0.5rem 0;
}

.rx-page-subtitle {
    font-size: 0.9375rem;
    color: #a1a1aa;
    margin: 0;
}

/* Info Cards Grid */
.rx-funds-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.rx-funds-info-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    background: rgba(39, 39, 42, 0.5);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 10px;
    transition: all 0.2s;
}

.rx-funds-info-card:hover {
    background: rgba(39, 39, 42, 0.7);
    border-color: rgba(113, 113, 122, 0.6);
}

.rx-funds-info-icon {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 10px;
    background: rgba(96, 165, 250, 0.1);
    border: 1px solid rgba(96, 165, 250, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #60a5fa;
}

.rx-funds-info-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.rx-funds-info-label {
    font-size: 0.8125rem;
    color: #a1a1aa;
    font-weight: 500;
}

.rx-funds-info-value {
    font-size: 1.25rem;
    color: #fafafa;
    font-weight: 600;
}

/* Form Card */
.rx-funds-form-card {
    background: rgba(39, 39, 42, 0.5);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.rx-funds-form-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1.5rem;
    background: rgba(39, 39, 42, 0.5);
    border-bottom: 1px solid rgba(63, 63, 70, 0.6);
    color: #fafafa;
    font-size: 1.125rem;
    font-weight: 600;
}

.rx-funds-form-header i {
    color: #60a5fa;
}

.rx-funds-form {
    padding: 2rem 1.5rem;
}

/* Form Fields */
.rx-funds-field {
    margin-bottom: 1.75rem;
}

.rx-funds-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.9375rem;
    font-weight: 500;
    color: #e4e4e7;
    margin-bottom: 0.75rem;
}

.rx-funds-required {
    padding: 0.125rem 0.5rem;
    background: rgba(39, 39, 42, 0.8);
    border-radius: 4px;
    font-size: 0.75rem;
    color: #a1a1aa;
    font-weight: 400;
}

/* Input with Icon */
.rx-funds-input-wrapper {
    position: relative;
}

.rx-funds-input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #71717a;
    pointer-events: none;
}

.rx-funds-input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 3rem;
    background: rgba(39, 39, 42, 0.8);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 8px;
    color: #fafafa;
    font-size: 1rem;
    font-weight: 500;
    transition: all 0.2s;
    outline: none;
}

.rx-funds-input:focus {
    background: rgba(39, 39, 42, 1);
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.rx-funds-input::placeholder {
    color: #71717a;
}

.rx-funds-hint {
    font-size: 0.8125rem;
    color: #71717a;
    margin: 0.5rem 0 0 0;
}

/* Select with Icon */
.rx-funds-select-wrapper {
    position: relative;
}

.rx-funds-select-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #71717a;
    pointer-events: none;
    z-index: 1;
}

.rx-funds-select {
    width: 100%;
    padding: 0.875rem 2.5rem 0.875rem 3rem;
    background: rgba(39, 39, 42, 0.8);
    border: 1px solid rgba(63, 63, 70, 0.6);
    border-radius: 8px;
    color: #fafafa;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.2s;
    outline: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 14 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 5L7 9L11 5' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
}

.rx-funds-select:focus {
    background-color: rgba(39, 39, 42, 1);
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

/* Submit Button */
.rx-funds-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 1rem;
    background: #60a5fa;
    border: 1px solid #60a5fa;
    border-radius: 8px;
    color: #09090b;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 1.25rem;
}

.rx-funds-submit:hover {
    background: #93c5fd;
    border-color: #93c5fd;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
}

.rx-funds-submit:active {
    transform: translateY(0);
}

/* Notice */
.rx-funds-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: rgba(234, 179, 8, 0.1);
    border: 1px solid rgba(234, 179, 8, 0.2);
    border-radius: 8px;
    font-size: 0.875rem;
    color: #fde047;
}

.rx-funds-notice i {
    color: #facc15;
    flex-shrink: 0;
}

/* Alert Styles */
.rx-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.rx-alert-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
}

.rx-alert-error i {
    color: #ef4444;
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .rx-page-title {
        font-size: 1.5rem;
    }
    
    .rx-funds-info-grid {
        grid-template-columns: 1fr;
    }
    
    .rx-funds-form {
        padding: 1.5rem 1rem;
    }
}


/* =====================================================
   CLIENT AREA DETAILS - PHONE NUMBER DARK THEME FIX
   ===================================================== */

/* Target the correct intl-tel-input classes (iti__ prefix) */

/* Dropdown container */
.iti__country-list {
    background: #1c1c1e !important;
    border: 1px solid rgba(63, 63, 70, 0.8) !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    max-height: 250px !important;
    width: 300px !important;
}

/* Individual country items */
.iti__country {
    background: #1c1c1e !important;
    padding: 0.625rem 1rem !important;
    color: #fafafa !important;
    display: flex !important;
    align-items: center !important;
}

.iti__country:hover {
    background: #2c2c2e !important;
}

.iti__country.iti__highlight,
.iti__country.iti__active {
    background: #3a3a3c !important;
}

/* Country name */
.iti__country-name {
    color: #fafafa !important;
    flex: 1 !important;
}

/* Dial code */
.iti__dial-code {
    color: #a1a1aa !important;
    margin-left: auto !important;
}

/* Divider */
.iti__divider {
    border-bottom: 1px solid rgba(63, 63, 70, 0.6) !important;
    margin: 0 !important;
}

/* Search input */
.iti__search-input {
    background: rgba(39, 39, 42, 0.8) !important;
    border: 1px solid rgba(63, 63, 70, 0.6) !important;
    border-radius: 6px !important;
    color: #fafafa !important;
    margin: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
}

.iti__search-input::placeholder {
    color: #71717a !important;
}

/* Scrollbar */
.iti__country-list::-webkit-scrollbar {
    width: 6px !important;
}

.iti__country-list::-webkit-scrollbar-track {
    background: rgba(39, 39, 42, 0.4) !important;
}

.iti__country-list::-webkit-scrollbar-thumb {
    background: rgba(113, 113, 122, 0.6) !important;
    border-radius: 3px !important;
}

/* State/Region Select */
#inputState {
    width: 100% !important;
    padding: 0.75rem 0.875rem !important;
    background: rgba(39, 39, 42, 0.8) !important;
    border: 1px solid rgba(63, 63, 70, 0.6) !important;
    border-radius: 8px !important;
    color: #fafafa !important;
    font-size: 0.9375rem !important;
    height: 42px !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 4.5L6 8L9.5 4.5' stroke='%23a1a1aa' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.875rem center !important;
    padding-right: 2.5rem !important;
}

#inputState:focus {
    background: rgba(39, 39, 42, 1) !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.1) !important;
}

#inputState option {
    background: #27272a !important;
    color: #fafafa !important;
}

/* Maximum specificity overrides for phone dropdown */
body .iti__country-list,
html body .iti__country-list,
.rx-profile-card .iti__country-list,
div.iti__country-list {
    background-color: #1c1c1e !important;
    background: #1c1c1e !important;
}

body .iti__country,
html body .iti__country,
.rx-profile-card .iti__country,
.iti__country-list .iti__country {
    background-color: #1c1c1e !important;
    background: #1c1c1e !important;
    color: #fafafa !important;
}

body .iti__country:hover,
html body .iti__country:hover,
.iti__country-list .iti__country:hover {
    background-color: #2c2c2e !important;
    background: #2c2c2e !important;
}

body .iti__country.iti__highlight,
html body .iti__country.iti__highlight,
body .iti__country.iti__active {
    background-color: #3a3a3c !important;
    background: #3a3a3c !important;
}

body .iti__country-name,
html body .iti__country-name,
.iti__country .iti__country-name {
    color: #fafafa !important;
}

body .iti__dial-code,
html body .iti__dial-code,
.iti__country .iti__dial-code {
    color: #a1a1aa !important;
}

body .iti__search-input,
html body .iti__search-input {
    background-color: rgba(39, 39, 42, 0.8) !important;
    background: rgba(39, 39, 42, 0.8) !important;
    border: 1px solid rgba(63, 63, 70, 0.6) !important;
    color: #fafafa !important;
}

/* ===============================================
   STRIPE DYNAMIC PAYMENTS - DARK THEME
   =============================================== */

/* Stripe Payment Form Container */
.payment-options.panel-body,
.gateway-payment-container,
.payment-form-container {
    background: transparent !important;
    border: none !important;
}

/* Stripe Elements Container Dark Theme */
.__PrivateStripeElement,
.StripeElement,
[class*="StripeElement"] {
    background-color: rgba(39, 39, 42, 0.8) !important;
    border: 1px solid rgba(63, 63, 70, 0.8) !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    color: #fafafa !important;
    transition: all 0.2s ease !important;
}

.StripeElement--focus,
.__PrivateStripeElement--focus {
    background-color: rgba(39, 39, 42, 1) !important;
    border-color: rgba(106, 90, 205, 0.8) !important;
    box-shadow: 0 0 0 3px rgba(106, 90, 205, 0.1) !important;
}

.StripeElement--invalid,
.__PrivateStripeElement--invalid {
    border-color: #ef4444 !important;
}

.StripeElement--webkit-autofill,
.__PrivateStripeElement--webkit-autofill {
    background-color: rgba(106, 90, 205, 0.1) !important;
}

/* Stripe Payment Element (Embedded Form) - Main Container */
#stripe-payment-element,
[id*="stripe-payment"],
.stripe-payment-element-container {
    background: transparent !important;
    padding: 0 !important;
}

/* Stripe Payment Element Iframe Wrapper */
.payment-options iframe[name*="privateStripe"],
iframe[name*="__privateStripe"],
iframe[src*="stripe.com"] {
    border: none !important;
    background: transparent !important;
}

/* Payment Method Section Headers */
.payment-options .payment-method-header,
.payment-method-title {
    color: #fafafa !important;
    background: rgba(39, 39, 42, 0.5) !important;
    padding: 12px 16px !important;
    border-radius: 8px !important;
    margin-bottom: 16px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
}

/* Stripe Card Input Fields Dark Theme */
.CardField,
.CardNumberField,
.CardExpiryField,
.CardCVCField,
[class*="CardField"],
[class*="StripeField"] {
    background-color: rgba(39, 39, 42, 0.8) !important;
    border: 1px solid rgba(63, 63, 70, 0.8) !important;
    border-radius: 8px !important;
    color: #fafafa !important;
}

/* Payment Form Labels */
.payment-options label,
.gateway-payment-container label,
label[for*="stripe"],
label[for*="card"] {
    color: #e4e4e7 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

/* Payment Method Radio Buttons / Tabs */
.payment-options .payment-type-btn,
.payment-method-selector button,
[class*="PaymentMethodButton"] {
    background: rgba(39, 39, 42, 0.6) !important;
    border: 1px solid rgba(63, 63, 70, 0.6) !important;
    color: #fafafa !important;
    border-radius: 8px !important;
    padding: 12px 20px !important;
    transition: all 0.2s ease !important;
}

.payment-options .payment-type-btn:hover,
.payment-method-selector button:hover {
    background: rgba(39, 39, 42, 0.9) !important;
    border-color: rgba(106, 90, 205, 0.5) !important;
}

.payment-options .payment-type-btn.active,
.payment-method-selector button.selected,
.payment-method-selector button[aria-selected="true"] {
    background: rgba(106, 90, 205, 0.2) !important;
    border-color: rgba(106, 90, 205, 0.8) !important;
    color: #fafafa !important;
}

/* Error Messages */
.payment-options .StripeElement-error,
.stripe-error,
[class*="StripeError"],
#card-errors,
.card-errors {
    color: #ef4444 !important;
    font-size: 13px !important;
    margin-top: 8px !important;
    background: rgba(239, 68, 68, 0.1) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    border-left: 3px solid #ef4444 !important;
}

/* Success Messages */
.payment-options .StripeElement-success,
.stripe-success {
    color: #22c55e !important;
    font-size: 13px !important;
    margin-top: 8px !important;
    background: rgba(34, 197, 94, 0.1) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    border-left: 3px solid #22c55e !important;
}

/* Payment Button Styling */
.payment-options button[type="submit"],
.gateway-payment-container button[type="submit"],
button.btn-stripe-submit {
    background: linear-gradient(135deg, #6a5acd 0%, #7b68ee 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 14px 32px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    margin-top: 20px !important;
}

.payment-options button[type="submit"]:hover,
button.btn-stripe-submit:hover {
    background: linear-gradient(135deg, #7b68ee 0%, #8a78ff 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(106, 90, 205, 0.3) !important;
}

.payment-options button[type="submit"]:active {
    transform: translateY(0) !important;
}

.payment-options button[type="submit"]:disabled,
button.btn-stripe-submit:disabled {
    background: rgba(63, 63, 70, 0.5) !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
}

/* Loading Spinner */
.payment-options .spinner,
.stripe-spinner,
[class*="LoadingSpinner"] {
    border-top-color: #6a5acd !important;
}

/* Saved Payment Methods List */
.saved-payment-methods {
    background: rgba(39, 39, 42, 0.5) !important;
    border: 1px solid rgba(63, 63, 70, 0.6) !important;
    border-radius: 8px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
}

.saved-payment-method-item {
    background: rgba(39, 39, 42, 0.8) !important;
    border: 1px solid rgba(63, 63, 70, 0.6) !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    color: #fafafa !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
    transition: all 0.2s ease !important;
}

.saved-payment-method-item:hover {
    border-color: rgba(106, 90, 205, 0.5) !important;
    background: rgba(39, 39, 42, 1) !important;
}

.saved-payment-method-item.selected {
    border-color: rgba(106, 90, 205, 0.8) !important;
    background: rgba(106, 90, 205, 0.1) !important;
}

/* Card Brand Icons */
.payment-options .card-brand-icon,
.stripe-card-brand {
    filter: brightness(1.2) !important;
}

/* Payment Request Button (Apple Pay / Google Pay) */
.payment-options .PaymentRequestButton,
[class*="PaymentRequestButton"],
#payment-request-button {
    border-radius: 8px !important;
    height: 48px !important;
    margin-bottom: 16px !important;
}

/* OR Separator */
.payment-options .payment-separator {
    text-align: center !important;
    margin: 20px 0 !important;
    position: relative !important;
    color: #a1a1aa !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

.payment-options .payment-separator::before,
.payment-options .payment-separator::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    width: 40% !important;
    height: 1px !important;
    background: rgba(63, 63, 70, 0.6) !important;
}

.payment-options .payment-separator::before {
    left: 0 !important;
}

.payment-options .payment-separator::after {
    right: 0 !important;
}

/* Invoice Payment Form Specific */
.invoice-container .payment-options,
.invoice-container .gateway-payment-container {
    background: rgba(24, 24, 27, 0.8) !important;
    border: 1px solid rgba(63, 63, 70, 0.6) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin: 20px 0 !important;
}

/* Payment Gateway Selection */
.invoice-container .paymethod-info select,
.invoice-container select[name="gateway"] {
    background: rgba(39, 39, 42, 0.8) !important;
    border: 1px solid rgba(63, 63, 70, 0.8) !important;
    color: #fafafa !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
}

.invoice-container .paymethod-info select:focus {
    border-color: rgba(106, 90, 205, 0.8) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(106, 90, 205, 0.1) !important;
}

/* Stripe Link Styling */
[class*="LinkButton"],
.stripe-link-button {
    background: #00d924 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    padding: 12px 20px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}

[class*="LinkButton"]:hover {
    background: #00c220 !important;
}

/* Additional Stripe Element States */
.StripeElement--empty {
    background-color: rgba(39, 39, 42, 0.6) !important;
}

.StripeElement--complete {
    border-color: rgba(34, 197, 94, 0.6) !important;
}

/* Payment Options Radio Group */
.payment-options input[type="radio"] {
    accent-color: #6a5acd !important;
}

/* Input Placeholders */
.payment-options input::placeholder,
.payment-options textarea::placeholder {
    color: #71717a !important;
}

/* Stripe Postal Code Field */
.payment-options input[name*="postal"],
.payment-options input[name*="zip"] {
    background-color: rgba(39, 39, 42, 0.8) !important;
    border: 1px solid rgba(63, 63, 70, 0.8) !important;
    color: #fafafa !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
}

.payment-options input[name*="postal"]:focus,
.payment-options input[name*="zip"]:focus {
    border-color: rgba(106, 90, 205, 0.8) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(106, 90, 205, 0.1) !important;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .invoice-container .payment-options,
    .invoice-container .gateway-payment-container {
        padding: 16px !important;
        margin: 15px 0 !important;
    }
    
    .payment-options button[type="submit"] {
        padding: 12px 24px !important;
        font-size: 14px !important;
    }
}

/* =====================================================
   STORE — Product Listing Page
   (/store/* client-area route)
   ===================================================== */

/* Wrapper: sidebar + content two-column grid */
.rx-store-wrapper {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    align-items: start;
}

.rx-store-sidebar {
    position: sticky;
    top: 1.5rem;
    height: fit-content;
}

.rx-store-content {
    min-width: 0;
}

/* Store page header (inside the content column) */
.rx-store-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1.25rem;
    margin-bottom: 1.75rem;
    border-bottom: 1px solid rgba(63, 63, 70, 0.5);
}

.rx-store-title {
    font-size: 1.625rem;
    font-weight: 700;
    margin: 0 0 0.2rem;
    letter-spacing: -0.02em;
    color: #fafafa;
    line-height: 1.2;
    /* No gradient — matches plain page titles for cleanliness */
}

.rx-store-subtitle {
    font-size: 0.8125rem;
    color: var(--rx-zinc-500);
    margin: 0;
    line-height: 1.5;
}

/* ── Sidebar panels (Bootstrap .panel / .card rendered by sidebar-categories.tpl) ── */

.rx-store-sidebar .panel,
.rx-store-sidebar .card {
    background: rgba(24, 24, 27, 0.6) !important;
    border: 1px solid var(--rx-border-solid) !important;
    border-radius: var(--rx-radius-lg) !important;
    overflow: hidden;
    margin-bottom: 0.75rem;
    backdrop-filter: blur(10px);
}

.rx-store-sidebar .panel:last-child,
.rx-store-sidebar .card:last-child {
    margin-bottom: 0;
}

.rx-store-sidebar .panel-heading,
.rx-store-sidebar .card-header {
    background: rgba(39, 39, 42, 0.5) !important;
    border-bottom: 1px solid var(--rx-border) !important;
    padding: 0.75rem 1rem !important;
}

.rx-store-sidebar .panel-title {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    color: var(--rx-zinc-400) !important;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 !important;
}

.rx-store-sidebar .panel-title i:first-child { color: var(--rx-blue-400) !important; margin-right: 0.4rem; }

.rx-store-sidebar .card-minimise,
.rx-store-sidebar .panel-minimise {
    color: var(--rx-zinc-600) !important;
    font-size: 0.7rem !important;
    cursor: pointer;
    transition: color 0.15s;
}
.rx-store-sidebar .card-minimise:hover,
.rx-store-sidebar .panel-minimise:hover { color: var(--rx-zinc-400) !important; }

/* Category list items */
.rx-store-sidebar .list-group { background: transparent !important; }

.rx-store-sidebar .list-group-item {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--rx-border) !important;
    color: var(--rx-zinc-400) !important;
    font-size: 0.8125rem !important;
    padding: 0.55rem 1rem !important;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.rx-store-sidebar .list-group-item:hover {
    background: rgba(39, 39, 42, 0.5) !important;
    color: var(--rx-zinc-100) !important;
}

.rx-store-sidebar .list-group-item.active {
    background: rgba(59, 130, 246, 0.12) !important;
    border-color: var(--rx-border) !important;
    color: var(--rx-blue-400) !important;
    font-weight: 500 !important;
}

.rx-store-sidebar .list-group-item.active:hover {
    background: rgba(59, 130, 246, 0.18) !important;
}

.rx-store-sidebar .list-group-item i {
    width: 14px;
    color: var(--rx-zinc-600);
    flex-shrink: 0;
    transition: color 0.15s;
}
.rx-store-sidebar .list-group-item:hover i { color: var(--rx-zinc-400); }
.rx-store-sidebar .list-group-item.active i { color: var(--rx-blue-400); }

.rx-store-sidebar .badge {
    background: var(--rx-zinc-700) !important;
    color: var(--rx-zinc-300) !important;
    font-size: 0.65rem !important;
    padding: 0.15rem 0.4rem !important;
    border-radius: 4px !important;
    margin-left: auto;
    font-weight: 500;
}

/* ── Product Grid ── */

.rx-products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 0.875rem;
}

/* ── Product Card — compact minimal ── */

.rx-product-card {
    background: #1c1c1f;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s;
    position: relative;
}

.rx-product-card:hover {
    border-color: rgba(96, 165, 250, 0.3);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

/* Card header */
.rx-product-header {
    padding: 1.1rem 1.25rem 0.9rem;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.rx-product-name {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #f4f4f5 !important;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.3;
    -webkit-text-fill-color: unset;
}

/* Stock badge */
.rx-product-stock {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.5rem;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
    border-radius: 20px;
    font-size: 0.625rem;
    color: #4ade80;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Card body */
.rx-product-body {
    padding: 0.9rem 1.25rem 1rem;
    flex: 1;
}

.rx-product-desc {
    font-size: 0.75rem;
    color: #71717a;
    line-height: 1.55;
    margin: 0 0 0.75rem;
}

/* Feature list — compact dot bullets */
.rx-product-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.rx-product-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0;
    font-size: 0.75rem;
    color: #a1a1aa;
    background: transparent;
    border: none;
    border-radius: 0;
    transition: color 0.15s;
}

.rx-product-features li::before {
    content: '';
    display: inline-flex;
    width: 4px;
    height: 4px;
    min-width: 4px;
    min-height: 4px;
    background: #3b82f6;
    border-radius: 50%;
    flex-shrink: 0;
    align-self: center;
}

.rx-product-features li:hover { color: #d4d4d8; }
.rx-product-features li:hover::before { background: #60a5fa; }

.rx-product-features li i,
.rx-product-features li svg { display: none !important; }

.rx-product-features li strong { color: #d4d4d8; font-weight: 500; }
.rx-product-features li span { flex: 1; }

/* Card footer */
.rx-product-footer {
    padding: 0.9rem 1.25rem 1.1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Price inline with button side by side */
.rx-product-pricing {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.rx-price-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: #52525b;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 0.1rem;
}

.rx-price-amount {
    font-size: 1.375rem;
    font-weight: 700;
    color: #f4f4f5 !important;
    letter-spacing: -0.03em;
    line-height: 1;
    -webkit-text-fill-color: unset;
}

.rx-price-cycle {
    font-size: 0.7rem;
    color: #52525b;
    font-weight: 400;
    margin-top: 0.1rem;
}

.rx-price-setup {
    font-size: 0.65rem;
    color: #f59e0b;
    margin-top: 0.1rem;
}

/* Order button — compact, right-aligned */
.rx-btn-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #ffffff !important;
    background: #2563eb;
    border: none;
    border-radius: 7px;
    text-decoration: none !important;
    transition: background 0.18s, transform 0.18s, box-shadow 0.18s;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.rx-btn-order:hover {
    background: #1d4ed8;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}

.rx-btn-order:active { transform: none; box-shadow: none; }

.rx-btn-order svg {
    flex-shrink: 0;
    opacity: 0.75;
    transition: transform 0.18s;
}
.rx-btn-order:hover svg { transform: translateX(2px); opacity: 1; }

/* Empty parsed feature list — hide until JS populates it */
.rx-features-parsed:empty { display: none; }

/* Alert blocks inside store */
.rx-store-content .rx-alert {
    margin-bottom: 1.5rem;
}

/* Mobile category dropdown — hidden on desktop, shown on mobile */
.rx-mobile-categories {
    display: none;
    margin-bottom: 1.25rem;
}

.rx-mobile-categories select,
.rx-mobile-categories .form-control {
    width: 100%;
    background: rgba(24, 24, 27, 0.8) !important;
    border: 1px solid var(--rx-border-solid) !important;
    color: var(--rx-zinc-200) !important;
    border-radius: var(--rx-radius) !important;
    padding: 0.55rem 0.9rem !important;
    font-size: 0.875rem !important;
    appearance: auto;
}

/* ── Store responsive ── */

@media (max-width: 960px) {
    .rx-store-wrapper {
        grid-template-columns: 240px 1fr;
        gap: 1.5rem;
    }
}

@media (max-width: 768px) {
    .rx-store-wrapper {
        grid-template-columns: 1fr;
    }

    .rx-store-sidebar {
        position: static;
        display: none;
    }

    .rx-mobile-categories {
        display: block !important;
    }

    .rx-products-grid {
        grid-template-columns: 1fr;
    }

    .rx-store-title { font-size: 1.375rem; }
}

@media (min-width: 1200px) {
    .rx-products-grid {
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    }
}

/* =====================================================
   STORE SIDEBAR — Categories nav (replaces Bootstrap panels)
   ===================================================== */

/* Override: hide any leftover Bootstrap panel chrome inside the store sidebar */
.rx-store-sidebar .panel-heading,
.rx-store-sidebar .card-header,
.rx-store-sidebar .card-minimise,
.rx-store-sidebar .panel-minimise { display: none !important; }

/* Suppress Bootstrap card background on the outer wrapper if WHMCS still injects one */
.rx-store-sidebar .panel,
.rx-store-sidebar .card {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none;
    margin-bottom: 0 !important;
    overflow: visible;
}

/* ── Category section ── */
.rx-sb-cat-section {
    margin-bottom: 0.25rem;
}

/* Section heading — matches the rx-sb-section label style */
.rx-sb-cat-label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rx-zinc-500);
    padding: 1rem 0.75rem 0.4rem;
    user-select: none;
}

.rx-sb-cat-badge {
    margin-left: auto;
    background: var(--rx-zinc-700);
    color: var(--rx-zinc-300);
    font-size: 0.6rem;
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    font-weight: 500;
}

.rx-sb-cat-body {
    padding: 0 0.5rem 0.5rem;
    font-size: 0.8125rem;
    color: var(--rx-zinc-400);
}

/* ── Category list ── */
.rx-sb-cat-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Individual category link — mirrors rx-sb-link exactly */
.rx-sb-cat-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--rx-zinc-400);
    border-radius: 6px;
    text-decoration: none !important;
    transition: all 0.15s ease;
    cursor: pointer;
}

.rx-sb-cat-item i,
.rx-sb-cat-item svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--rx-zinc-600);
    transition: color 0.15s;
}

.rx-sb-cat-item:hover {
    color: var(--rx-zinc-100);
    background: rgba(39, 39, 42, 0.5);
}

.rx-sb-cat-item:hover i,
.rx-sb-cat-item:hover svg { color: var(--rx-zinc-400); }

.rx-sb-cat-item.active {
    color: var(--rx-zinc-100);
    background: rgba(39, 39, 42, 0.8);
    font-weight: 500;
}

.rx-sb-cat-item.active i,
.rx-sb-cat-item.active svg { color: var(--rx-blue-400) !important; }

.rx-sb-cat-item.disabled {
    opacity: 0.4;
    pointer-events: none;
}

/* Item count/badge */
.rx-sb-cat-count {
    margin-left: auto;
    background: var(--rx-zinc-800);
    color: var(--rx-zinc-400);
    font-size: 0.65rem;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    font-weight: 500;
    flex-shrink: 0;
}

.rx-sb-cat-footer {
    padding: 0.5rem 0.75rem;
    font-size: 0.75rem;
    color: var(--rx-zinc-500);
}

/* ── Cart icon button (top-right of store header) ── */
.rx-store-cart-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--rx-radius);
    background: rgba(39, 39, 42, 0.6);
    border: 1px solid var(--rx-border-solid);
    color: var(--rx-zinc-300) !important;
    text-decoration: none !important;
    transition: all 0.2s ease;
    flex-shrink: 0;
    position: relative;
}

.rx-store-cart-btn:hover {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(96, 165, 250, 0.35);
    color: var(--rx-blue-400) !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.08);
}

.rx-store-cart-btn i,
.rx-store-cart-btn svg {
    transition: transform 0.2s ease;
}

.rx-store-cart-btn:hover i,
.rx-store-cart-btn:hover svg {
    transform: scale(1.1);
}

/* ── Mobile category select ── */
.rx-mobile-cat-select {
    margin-bottom: 0.5rem;
}

.rx-mobile-cat-select select,
.rx-mobile-cat-select .form-control,
.rx-mobile-cat-select .custom-select {
    width: 100%;
    background: rgba(24, 24, 27, 0.8) !important;
    border: 1px solid var(--rx-border-solid) !important;
    color: var(--rx-zinc-200) !important;
    border-radius: var(--rx-radius) !important;
    padding: 0.55rem 0.9rem !important;
    font-size: 0.875rem !important;
}

/* ── Global card input white text fix ── */
#frmPayment input[type="text"],
#frmPayment input[type="tel"],
#frmPayment input[type="number"],
#frmPayment select {
    color: #f4f4f5 !important;
    -webkit-text-fill-color: #f4f4f5 !important;
    caret-color: #f4f4f5 !important;
}
#frmPayment input:-webkit-autofill,
#frmPayment input:-webkit-autofill:hover,
#frmPayment input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f4f4f5 !important;
    -webkit-box-shadow: 0 0 0 1000px #18181b inset !important;
    transition: background-color 9999s ease-in-out 0s;
}

/* ═══════════════════════════════════════════════════════════
   Email History  (clientareaemails.tpl)
   ═══════════════════════════════════════════════════════════ */
.rx-emails-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 1rem;
}

.rx-email-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.125rem;
    background: rgba(24,24,27,0.7);
    border: 1px solid rgba(63,63,70,0.35);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    text-decoration: none;
}
.rx-email-card:hover {
    background: rgba(39,39,42,0.6);
    border-color: rgba(63,63,70,0.65);
}

.rx-email-card-header {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    width: 100%;
    min-width: 0;
}

.rx-email-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: rgba(96,165,250,0.08);
    border: 1px solid rgba(96,165,250,0.15);
    color: #60a5fa;
    flex-shrink: 0;
}

.rx-email-card-info {
    flex: 1;
    min-width: 0;
}

.rx-email-card-subject {
    font-size: 0.875rem;
    font-weight: 500;
    color: #e4e4e7;
    margin: 0 0 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rx-email-card-meta {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
}

.rx-email-card-date,
.rx-email-card-attachment {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: #71717a;
}

.rx-email-card-attachment { color: #a1a1aa; }

.rx-email-card-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #a1a1aa;
    background: rgba(39,39,42,0.6);
    border: 1px solid rgba(63,63,70,0.5);
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
    flex-shrink: 0;
    white-space: nowrap;
}
.rx-email-card-btn:hover {
    color: #e4e4e7;
    border-color: rgba(96,165,250,0.4);
    background: rgba(96,165,250,0.06);
}

.rx-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 4rem 2rem;
    color: #52525b;
    text-align: center;
}
.rx-empty-state h3 { font-size: 1rem; font-weight: 500; color: #71717a; margin: 0; }
.rx-empty-state p  { font-size: 0.825rem; margin: 0; }