/**
 * Dark Mode CSS - Client Pages Only
 * Áp dụng cho toàn bộ trang client khi admin bật dark_mode trong settings
 * Sử dụng CSS Variables để dễ dàng maintain
 */

/* ============================================
   CSS VARIABLES - LIGHT MODE (Default)
   ============================================ */
:root {
    /* Background Colors */
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;
    --bg-tertiary: #e5e7eb;

    /* Text Colors */
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-tertiary: #9ca3af;

    /* Border Colors */
    --border-primary: #e5e7eb;
    --border-secondary: #d1d5db;

    /* Card & Component */
    --card-bg: #ffffff;
    --card-border: #e5e7eb;
    --card-shadow: rgba(0, 0, 0, 0.05);

    /* Input & Form */
    --input-bg: #ffffff;
    --input-border: #d1d5db;
    --input-text: #1f2937;
    --input-placeholder: #9ca3af;

    /* Navigation */
    --nav-bg: #ffffff;
    --nav-text: #1f2937;
    --nav-hover: #f3f4f6;

    /* Button */
    --btn-secondary-bg: #f3f4f6;
    --btn-secondary-text: #1f2937;
    --btn-secondary-hover: #e5e7eb;
}

/* ============================================
   CSS VARIABLES - DARK MODE
   ============================================ */
body.dark-mode {
    /* Background Colors */
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #334155;

    /* Text Colors */
    --text-primary: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-tertiary: #94a3b8;

    /* Border Colors */
    --border-primary: #334155;
    --border-secondary: #475569;

    /* Card & Component */
    --card-bg: #1e293b;
    --card-border: #334155;
    --card-shadow: rgba(0, 0, 0, 0.3);

    /* Input & Form */
    --input-bg: #1e293b;
    --input-border: #475569;
    --input-text: #f1f5f9;
    --input-placeholder: #64748b;

    /* Navigation */
    --nav-bg: #1e293b;
    --nav-text: #f1f5f9;
    --nav-hover: #334155;

    /* Button */
    --btn-secondary-bg: #334155;
    --btn-secondary-text: #f1f5f9;
    --btn-secondary-hover: #475569;
}

/* ============================================
   DARK MODE - GLOBAL STYLES
   ============================================ */

body.dark-mode {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* Typography */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-primary);
}

body.dark-mode p:not([style*="color"]),
body.dark-mode span:not([style*="color"]),
body.dark-mode div:not([style*="color"]) {
}

body.dark-mode a {
    color: #60a5fa;
}

body.dark-mode a:hover {
    color: #93c5fd;
}

/* ============================================
   DARK MODE - CARDS & CONTAINERS
   ============================================ */

body.dark-mode .card,
body.dark-mode .feature-card,
body.dark-mode .account-card,
body.dark-mode .product-card {
    background-color: var(--card-bg);
    border-color: var(--card-border);
    box-shadow: 0 2px 8px var(--card-shadow);
}

body.dark-mode .feature-card {
    border: 1px solid var(--border-primary);
}

body.dark-mode .feature-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.dark-mode .feature-content {
    border-left-color: var(--border-primary);
}

body.dark-mode .card-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-primary);
}

body.dark-mode .card-body {
    background-color: var(--card-bg);
}

body.dark-mode .card-footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-primary);
}

/* ============================================
   DARK MODE - NAVIGATION & HEADER
   ============================================ */

body.dark-mode .navbar,
body.dark-mode .header-part,
body.dark-mode nav {
    background-color: var(--nav-bg) !important;
    border-bottom-color: var(--border-primary);
}

body.dark-mode .navbar-nav .nav-link {
    color: var(--nav-text);
}

body.dark-mode .navbar-nav .nav-link:hover {
    background-color: var(--nav-hover);
    color: var(--text-primary);
}

body.dark-mode .dropdown-menu {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    z-index: 10000 !important;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .dropdown-position-list {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    z-index: 10000 !important;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .dropdown-position-list::before {
    background: #1e293b !important;
    border-top-color: #334155 !important;
    border-left-color: #334155 !important;
}

body.dark-mode .dropdown-position-list li a {
    color: #cbd5e1 !important;
    background: transparent !important;
}

body.dark-mode .dropdown-position-list li a:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
}

body.dark-mode .dropdown-item {
    color: #f1f5f9 !important;
}

body.dark-mode .dropdown-item:hover {
    background-color: #334155 !important;
    color: #60a5fa !important;
}

/* ============================================
   DARK MODE - FORMS & INPUTS
   ============================================ */

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode input[type="text"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode input[type="number"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--input-bg);
    border-color: var(--input-border);
    color: var(--input-text);
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background-color: var(--input-bg);
    border-color: #3b82f6;
    color: var(--input-text);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

body.dark-mode ::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}

body.dark-mode .form-label,
body.dark-mode label {
    color: var(--text-primary);
}

/* ============================================
   DARK MODE - BUTTONS
   ============================================ */

body.dark-mode .btn-secondary {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--border-secondary);
}

body.dark-mode .btn-secondary:hover {
    background-color: var(--btn-secondary-hover);
    color: var(--btn-secondary-text);
}

body.dark-mode .btn-outline-primary {
    color: #60a5fa;
    border-color: #60a5fa;
}

body.dark-mode .btn-outline-primary:hover {
    background-color: #60a5fa;
    color: #ffffff;
}

body.dark-mode .btn-light {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

body.dark-mode .btn-light:hover {
    background-color: var(--border-secondary);
}

/* ============================================
   DARK MODE - TABLES
   ============================================ */

body.dark-mode .table {
    color: var(--text-primary);
    border-color: var(--border-primary);
}

body.dark-mode .table thead th {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

body.dark-mode .table tbody td {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary);
}

body.dark-mode .table tbody tr {
    background-color: var(--bg-primary) !important;
}

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

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

/* ============================================
   DARK MODE - BANK CARD TEXT FIX
   ============================================ */
/* Fix transfer content (copyNoiDung) */
body.dark-mode .transfer-content-box .tc-value span {
    color: #dc2626 !important;
}

/* Fix bank info labels */
body.dark-mode .bank-info .info-label {
    color: #374151 !important;
}

/* Fix bank info values - override inline styles */
body.dark-mode .bank-info .info-value {
    color: #000000 !important;
}

body.dark-mode .bank-info .info-value span {
    color: #000000 !important;
}

/* Fix transfer content label */
body.dark-mode .transfer-content-box .tc-label {
    color: #991b1b !important;
}

/* ============================================
   DARK MODE - CRYPTO FORM & PAYMENT MODAL
   ============================================ */
/* Crypto form heading */
body.dark-mode .crypto-form-inner h4 {
    color: #111827 !important;
}

/* Crypto form labels */
body.dark-mode .crypto-input-label {
    color: #2563eb !important;
}

/* Crypto form select and input */
body.dark-mode .crypto-input-field {
    background-color: #1e293b !important;
    color: #e5e7eb !important;
    border-color: #374151 !important;
}

body.dark-mode .crypto-input-field option {
    background-color: #1e293b !important;
    color: #e5e7eb !important;
}

/* Crypto form placeholder */
body.dark-mode .crypto-input-field::placeholder {
    color: #6b7280 !important;
}

/* Crypto rate box (green) - white text */
body.dark-mode .crypto-rate-box {
    color: #ffffff !important;
}

body.dark-mode .crypto-rate-box * {
    color: #ffffff !important;
}

/* Crypto info box (blue) - dark text */
body.dark-mode .crypto-info-box {
    color: #1e40af !important;
}

body.dark-mode .crypto-info-box * {
    color: #1e40af !important;
}

/* Crypto payment modal */
body.dark-mode .crypto-payment-modal h2,
body.dark-mode .crypto-payment-modal h3,
body.dark-mode .crypto-payment-modal h4 {
    color: #1f2937 !important;
}

body.dark-mode .crypto-payment-modal p,
body.dark-mode .crypto-payment-modal span,
body.dark-mode .crypto-payment-modal div {
    /* color: #374151 !important; */
}

body.dark-mode .crypto-payment-modal .wallet-address {
    color: #000000 !important;
    background-color: #f3f4f6 !important;
}

/* Keep specific colored elements */
body.dark-mode .crypto-payment-modal .text-success,
body.dark-mode .crypto-form-inner .text-success {
    color: #16a34a !important;
}

body.dark-mode .crypto-payment-modal .text-danger,
body.dark-mode .crypto-form-inner .text-danger {
    color: #dc2626 !important;
}

body.dark-mode .crypto-payment-modal .text-warning,
body.dark-mode .crypto-form-inner .text-warning {
    color: #ea580c !important;
}

/* ============================================
   DARK MODE - TABLE ROWS WITH INLINE STYLES
   ============================================ */
body.dark-mode table tbody tr[style],
body.dark-mode table tbody tr td[style],
body.dark-mode .table tbody tr[style],
body.dark-mode .table tbody tr td[style] {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode table tbody tr td *,
body.dark-mode .table tbody tr td * {
    color: var(--text-primary) !important;
}

/* Force text visibility in table cells */
body.dark-mode table td,
body.dark-mode table th,
body.dark-mode .table td,
body.dark-mode .table th {
    color: var(--text-primary) !important;
}

/* Fix tfoot background and text */
body.dark-mode table tfoot,
body.dark-mode .table tfoot,
body.dark-mode table tfoot tr,
body.dark-mode .table tfoot tr,
body.dark-mode table tfoot td,
body.dark-mode .table tfoot td {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode table tfoot td *,
body.dark-mode .table tfoot td * {
    color: var(--text-primary) !important;
}

/* Keep colored text in tfoot (red/blue numbers) */
body.dark-mode table tfoot strong[style*="color:red"],
body.dark-mode .table tfoot strong[style*="color:red"] {
    color: #ef4444 !important;
}

body.dark-mode table tfoot strong[style*="color:blue"],
body.dark-mode .table tfoot strong[style*="color:blue"] {
    color: #3b82f6 !important;
}

/* ============================================
   DARK MODE - SIMPLE NOTIFY (Toast notifications)
   ============================================ */
html.dark-mode .sn-notify,
body.dark-mode .sn-notify,
.sn-notify {
    z-index: 2 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

html.dark-mode .sn-notify-success,
body.dark-mode .sn-notify-success {
    background: #16a34a !important;
    color: #ffffff !important;
    border-color: #16a34a !important;
}

html.dark-mode .sn-notify-error,
body.dark-mode .sn-notify-error {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

html.dark-mode .sn-notify-warning,
body.dark-mode .sn-notify-warning {
    background: #ea580c !important;
    color: #ffffff !important;
    border-color: #ea580c !important;
}

html.dark-mode .sn-notify-info,
body.dark-mode .sn-notify-info {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

html.dark-mode .sn-notify-title,
body.dark-mode .sn-notify-title {
    color: #ffffff !important;
}

html.dark-mode .sn-notify-text,
body.dark-mode .sn-notify-text {
    color: #ffffff !important;
}

html.dark-mode .sn-notify-icon svg,
body.dark-mode .sn-notify-icon svg {
    color: #ffffff !important;
}

html.dark-mode .sn-notify-close svg,
body.dark-mode .sn-notify-close svg {
    color: rgba(255, 255, 255, 0.8) !important;
}

html.dark-mode .sn-notify-close:hover svg,
body.dark-mode .sn-notify-close:hover svg {
    color: #ffffff !important;
}

/* ============================================
   DARK MODE - PRODUCT DETAIL PAGE
   ============================================ */
body.dark-mode .product-detail-content,
body.dark-mode .detail-content,
body.dark-mode .api-content {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .detail-section,
body.dark-mode .api-section {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

body.dark-mode .nav-tabs {
    border-color: var(--border-primary) !important;
}

body.dark-mode .nav-tabs .nav-link {
    color: var(--text-secondary) !important;
    border-color: transparent !important;
}

body.dark-mode .nav-tabs .nav-link.active {
    color: var(--accent-primary) !important;
    background-color: transparent !important;
    border-color: var(--accent-primary) !important;
    border-bottom-color: transparent !important;
}

body.dark-mode .nav-tabs .nav-link:hover {
    color: var(--text-primary) !important;
}

body.dark-mode .tab-content {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .tab-pane {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .tab-pane {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .tab-pane.fade {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .product-details-frame {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

body.dark-mode .product-details-frame h1,
body.dark-mode .product-details-frame h2,
body.dark-mode .product-details-frame h3,
body.dark-mode .product-details-frame h4,
body.dark-mode .product-details-frame h5,
body.dark-mode .product-details-frame h6 {
    color: var(--text-primary) !important;
}

body.dark-mode .product-details-frame p,
body.dark-mode .product-details-frame span,
body.dark-mode .product-details-frame div {
    color: var(--text-primary) !important;
}

body.dark-mode .product-details-frame strong,
body.dark-mode .product-details-frame b {
    color: var(--text-primary) !important;
}

/* Alert boxes and cards with specific colors in product details - Dark mode with better contrast */
body.dark-mode .product-details-frame .alert {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

body.dark-mode .product-details-frame .alert-primary {
    background-color: rgba(59, 130, 246, 0.25) !important;
    color: #ffffff !important;
}

body.dark-mode .product-details-frame .alert-primary * {
    color: #ffffff !important;
}

body.dark-mode .product-details-frame .alert-info {
    background-color: rgba(14, 165, 233, 0.25) !important;
    color: #ffffff !important;
}

body.dark-mode .product-details-frame .alert-info * {
    color: #ffffff !important;
}

body.dark-mode .product-details-frame .alert-success {
    background-color: rgba(34, 197, 94, 0.25) !important;
    color: #ffffff !important;
}

body.dark-mode .product-details-frame .alert-success * {
    color: #ffffff !important;
}

body.dark-mode .product-details-frame .alert-warning {
    background-color: rgba(245, 158, 11, 0.3) !important;
    color: #ffffff !important;
}

body.dark-mode .product-details-frame .alert-warning * {
    color: #ffffff !important;
}

body.dark-mode .product-details-frame .alert-danger {
    background-color: rgba(239, 68, 68, 0.25) !important;
    color: #ffffff !important;
}

body.dark-mode .product-details-frame .alert-danger * {
    color: #ffffff !important;
}

body.dark-mode .product-details-frame .card {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

/* Product detail text sections */
body.dark-mode .product-description,
body.dark-mode .product-info-box {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .info-box,
body.dark-mode .detail-box {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

body.dark-mode .info-label,
body.dark-mode .detail-label {
    color: var(--text-secondary) !important;
}

body.dark-mode .info-value,
body.dark-mode .detail-value {
    color: var(--text-primary) !important;
}

/* API Integration section */
body.dark-mode .api-key-display,
body.dark-mode .api-endpoint {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

body.dark-mode code,
body.dark-mode pre {
    background-color: none !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

/* ============================================
   DARK MODE - MODALS
   ============================================ */

body.dark-mode .modal-content {
    background-color: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .modal-header {
    background-color: var(--bg-secondary);
    border-bottom-color: var(--border-primary);
}

body.dark-mode .modal-header .btn-close {
    filter: invert(1);
}

body.dark-mode .modal-body {
    background-color: var(--card-bg);
    color: var(--text-primary);
}

body.dark-mode .modal-footer {
    background-color: var(--bg-secondary);
    border-top-color: var(--border-primary);
}

/* ============================================
   DARK MODE - ALERTS & NOTIFICATIONS
   ============================================ */

body.dark-mode .alert {
    border-color: var(--border-primary);
}

body.dark-mode .alert-info {
    background-color: rgba(59, 130, 246, 0.1);
    color: #93c5fd;
    border-color: rgba(59, 130, 246, 0.3);
}

body.dark-mode .alert-success {
    background-color: rgba(34, 197, 94, 0.1);
    color: #86efac;
    border-color: rgba(34, 197, 94, 0.3);
}

body.dark-mode .alert-warning {
    background-color: rgba(245, 158, 11, 0.1);
    color: #fbbf24;
    border-color: rgba(245, 158, 11, 0.3);
}

body.dark-mode .alert-danger {
    background-color: rgba(239, 68, 68, 0.1);
    color: #f87171;
    border-color: rgba(239, 68, 68, 0.3);
}

/* ============================================
   DARK MODE - BADGES
   ============================================ */

body.dark-mode .badge {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

body.dark-mode .badge-primary {
    background-color: #1e40af;
    color: #93c5fd;
}

body.dark-mode .badge-success {
    background-color: #166534;
    color: #86efac;
}

body.dark-mode .badge-warning {
    background-color: #92400e;
    color: #fbbf24;
}

body.dark-mode .badge-danger {
    background-color: #991b1b;
    color: #fca5a5;
}

/* ============================================
   DARK MODE - PAGINATION
   ============================================ */

body.dark-mode .pagination .page-link {
    background-color: var(--card-bg);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

body.dark-mode .pagination .page-link:hover {
    background-color: var(--bg-secondary);
    color: var(--text-primary);
}

body.dark-mode .pagination .page-item.active .page-link {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}

body.dark-mode .pagination .page-item.disabled .page-link {
    background-color: var(--bg-secondary);
    color: var(--text-tertiary);
}

/* ============================================
   DARK MODE - BREADCRUMB
   ============================================ */

body.dark-mode .breadcrumb {
    background-color: var(--bg-secondary);
}

body.dark-mode .breadcrumb-item a {
    color: #60a5fa;
}

body.dark-mode .breadcrumb-item.active {
    color: var(--text-secondary);
}

/* ============================================
   DARK MODE - PRODUCT SPECIFIC
   ============================================ */

body.dark-mode .feature-content {
    background-color: var(--card-bg);
}

body.dark-mode .feature-name a {
    color: var(--text-primary);
}

body.dark-mode .feature-name a:hover {
    color: #60a5fa;
}

body.dark-mode .feature-desc {
    color: var(--text-secondary);
}

body.dark-mode .label-text {
    color: var(--text-secondary);
}

body.dark-mode .feature-price {
    color: #f87171;
}

/* Home Heading */
body.dark-mode .home-heading h3:not(.no-bg) {
    color: #f1f5f9;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

body.dark-mode .home-heading h3 {
    color: #f1f5f9;
}

/* Account Card */
body.dark-mode .account-card {
    background: var(--card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .account-title {
    border-bottom-color: var(--border-primary);
}

body.dark-mode .account-title h4 {
    color: var(--text-primary);
}

/* Profile Card */
body.dark-mode .profile-card {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

body.dark-mode .profile-card h6 {
    color: var(--text-primary);
}

body.dark-mode .profile-card p {
    color: var(--text-secondary);
}

/* Feature Rating */
body.dark-mode .feature-rating i,
body.dark-mode .feature-rating a {
    color: var(--text-secondary);
}

body.dark-mode .feature-rating a:hover {
    color: #60a5fa;
}

body.dark-mode .feature-rating .active {
    color: #fbbf24;
}

/* Feature Name */
body.dark-mode .feature-name a {
    color: var(--text-primary);
}

body.dark-mode .feature-name a:hover {
    color: #60a5fa;
}

/* Feature Price */
body.dark-mode .feature-price del {
    color: #f87171;
}

body.dark-mode .feature-price span {
    color: #60a5fa;
}

/* Label Text Badges */
body.dark-mode .label-text.off {
    background: #991b1b;
    color: #fca5a5;
}

body.dark-mode .label-text.new {
    background: #166534;
    color: #86efac;
}

body.dark-mode .label-text.sale {
    background: #9a3412;
    color: #fdba74;
}

body.dark-mode .label-text.feat {
    background: #581c87;
    color: #e9d5ff;
}

body.dark-mode .label-text.rate {
    background: #854d0e;
    color: #fde047;
}

body.dark-mode .label-text.order {
    background: #1e40af;
    color: #93c5fd;
}

/* Delivery Badges */
body.dark-mode .delivery-badge {
    border-color: var(--border-primary);
}

body.dark-mode .delivery-instant {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

body.dark-mode .delivery-queue {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

/* ============================================
   DARK MODE - PRODUCT DETAILS PAGE
   ============================================ */

body.dark-mode .details-gallery {
    background: transparent;
}

body.dark-mode .details-preview li img {
    border-color: var(--border-primary);
}

body.dark-mode .details-preview li img:hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.dark-mode .details-thumb li img {
    border-color: var(--border-primary);
}

body.dark-mode .details-thumb .slick-current img {
    border-color: #3b82f6;
}

body.dark-mode .product-navigation {
    background: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .product-navigation li a {
    color: var(--text-secondary);
}

body.dark-mode .product-navigation li a:hover {
    color: #60a5fa;
}

body.dark-mode .details-content {
    background: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .details-content:hover {
    border-color: #3b82f6;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.dark-mode .details-name {
    color: var(--text-primary);
}

body.dark-mode .details-name a {
    color: var(--text-primary);
}

body.dark-mode .details-name a:hover {
    color: #60a5fa;
}

body.dark-mode .details-meta p {
    color: var(--text-secondary);
}

body.dark-mode .details-meta span,
body.dark-mode .details-meta a {
    color: var(--text-secondary);
}

body.dark-mode .details-meta a:hover {
    color: #60a5fa;
}

body.dark-mode .details-rating i,
body.dark-mode .details-rating a {
    color: var(--text-secondary);
}

body.dark-mode .details-rating a:hover {
    color: #60a5fa;
}

body.dark-mode .details-rating .active {
    color: #fbbf24;
}

body.dark-mode .details-label.off {
    background: #991b1b;
    color: #fca5a5;
}

body.dark-mode .details-label.new {
    background: #166534;
    color: #86efac;
}

body.dark-mode .details-label.sale {
    background: #9a3412;
    color: #fdba74;
}

body.dark-mode .details-label.feat {
    background: #581c87;
    color: #e9d5ff;
}

body.dark-mode .details-label.rate {
    background: #854d0e;
    color: #fde047;
}

body.dark-mode .details-price del {
    color: #f87171;
}

body.dark-mode .details-price span {
    color: #60a5fa;
}

body.dark-mode .details-desc {
    color: var(--text-secondary);
}

body.dark-mode .details-list-title {
    color: var(--text-primary);
}

body.dark-mode .details-tag-list li a {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

body.dark-mode .details-tag-list li a:hover {
    color: #f8fafc;
    background: #3b82f6;
}

body.dark-mode .details-share-list li a {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

body.dark-mode .details-share-list li a:hover {
    color: #f8fafc;
    background: #3b82f6;
}

/* ============================================
   DARK MODE - FORMS & INPUTS
   ============================================ */

body.dark-mode .form-control {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

body.dark-mode .form-control:focus-within,
body.dark-mode .form-control:focus {
    background: var(--bg-tertiary);
    border-color: #3b82f6;
}

body.dark-mode .form-control::placeholder {
    color: var(--text-tertiary);
}

body.dark-mode .form-select {
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border-color: var(--border-primary);
}

body.dark-mode .form-select:focus-within {
    border-color: #3b82f6;
}

body.dark-mode .form-check-input {
    background-color: var(--bg-tertiary);
    border-color: var(--border-primary);
}

body.dark-mode .form-check-input:checked {
    background-color: #3b82f6;
    border-color: #3b82f6;
}

body.dark-mode .form-label {
    color: var(--text-primary);
}

body.dark-mode textarea.form-control {
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

/* ============================================
   DARK MODE - MODALS
   ============================================ */

body.dark-mode .modal-content {
    background: var(--bg-primary);
}

body.dark-mode .modal-close {
    background: var(--card-bg);
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.dark-mode .modal-close:hover {
    background: #3b82f6;
    color: #f8fafc;
}

body.dark-mode .modal-form {
    background: var(--card-bg);
}

body.dark-mode .modal-header {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-primary);
}

body.dark-mode .modal-body {
    background: var(--card-bg);
    color: var(--text-primary);
}

body.dark-mode .modal-footer {
    background: var(--bg-secondary);
    border-top-color: var(--border-primary);
}

body.dark-mode .modal-title {
    color: var(--text-primary);
}

/* Product View Modal */
body.dark-mode .product-view {
    background: var(--card-bg) !important;
}

body.dark-mode .view-details {
    color: var(--text-primary);
}

body.dark-mode .view-name,
body.dark-mode .view-name a {
    color: var(--text-primary) !important;
}

body.dark-mode .view-name a:hover {
    color: #60a5fa !important;
}

body.dark-mode .view-meta p,
body.dark-mode .view-meta label {
    color: var(--text-secondary) !important;
}

body.dark-mode .view-price {
    color: var(--text-primary) !important;
}

body.dark-mode .view-price del {
    color: var(--text-secondary) !important;
}

body.dark-mode .view-desc {
    color: var(--text-secondary) !important;
}

body.dark-mode .view-list-title {
    color: var(--text-primary) !important;
}

body.dark-mode .label-text {
    color: var(--text-secondary) !important;
}

body.dark-mode .card-hot-deal {
    background: rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

body.dark-mode .btn,
body.dark-mode .btn-primary,
body.dark-mode .btn-secondary {
    color: #ffffff !important;
}

body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode input[type="text"],
body.dark-mode input[type="number"],
body.dark-mode input[type="email"],
body.dark-mode input[type="password"],
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

body.dark-mode .form-control:focus,
body.dark-mode .form-select:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important;
}

body.dark-mode .form-control-view-product {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

body.dark-mode .product-action button i {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .product-action button i:hover {
    background-color: #3b82f6 !important;
    color: #ffffff !important;
}

body.dark-mode .product-action input,
body.dark-mode .action-input {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary) !important;
}

body.dark-mode .view-add-group .action-input {
    /* Button style, giữ màu primary */
    background: #3b82f6 !important;
    color: #ffffff !important;
}

body.dark-mode .label_favorite {
    background-color: var(--card-bg) !important;
    color: var(--text-primary) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

body.dark-mode .label_favorite svg {
    color: var(--text-primary) !important;
    stroke: var(--text-primary) !important;
}

body.dark-mode .input_favorite:checked + label svg {
    fill: hsl(0deg 100% 50%) !important;
    stroke: hsl(0deg 100% 50%) !important;
}

body.dark-mode .total-payment-amount,
body.dark-mode #into_pay {
    color: #fbbf24 !important;
}

body.dark-mode .text-wallet,
body.dark-mode .user-money-display {
    color: #fbbf24 !important;
}

/* ============================================
   DARK MODE - TABLES
   ============================================ */

body.dark-mode .table {
    color: var(--text-primary);
    border-color: var(--border-primary);
}

body.dark-mode .table thead th {
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

body.dark-mode .table tbody td {
    background: var(--card-bg);
    border-color: var(--border-primary);
    color: var(--text-secondary);
}

body.dark-mode .table-striped tbody tr:nth-of-type(odd) {
    background: var(--bg-secondary);
}

body.dark-mode .table-hover tbody tr:hover {
    background: var(--bg-tertiary);
}

body.dark-mode .table-name a {
    color: var(--text-primary);
}

body.dark-mode .table-name a:hover {
    color: #60a5fa;
}

body.dark-mode .table-price h6 {
    color: #60a5fa;
}

body.dark-mode .table-desc p {
    color: var(--text-secondary);
}

body.dark-mode .table-vendor a {
    color: var(--text-secondary);
}

body.dark-mode .table-vendor a:hover {
    color: #60a5fa;
}

body.dark-mode .order-track-list {
    background: var(--bg-secondary);
}

body.dark-mode .order-track-item {
    color: var(--text-secondary);
}

/* Buttons */
body.dark-mode .btn-more {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

body.dark-mode .btn-more:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .btn-buy {
    background: linear-gradient(181deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

body.dark-mode .btn-buy:hover {
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* Category Bar */
body.dark-mode .catbar {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
}

body.dark-mode .catbar-chip {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--border-primary);
}

body.dark-mode .catbar-chip:hover {
    background-color: var(--btn-secondary-hover);
}

body.dark-mode .catbar-chip.is-active {
    background-color: #3b82f6;
    color: #ffffff;
}

body.dark-mode .catbar-popover {
    background-color: var(--nav-bg);
    border-color: var(--border-primary);
}

/* ============================================
   DARK MODE - SCROLLBAR
   ============================================ */

body.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 6px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--border-secondary);
}

/* ============================================
   DARK MODE - MISC
   ============================================ */

body.dark-mode hr {
    border-color: var(--border-primary);
    opacity: 1;
}

body.dark-mode .border {
    border-color: var(--border-primary) !important;
}

body.dark-mode .text-muted {
    color: var(--text-secondary) !important;
}

body.dark-mode .bg-light {
    background-color: var(--bg-secondary) !important;
}

body.dark-mode .bg-white {
    background-color: var(--card-bg) !important;
}

body.dark-mode code {
    background-color: none;
    color: #f472b6;
}

body.dark-mode pre {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

/* ============================================
   DARK MODE - TRANSITIONS
   ============================================ */

body,
.card,
.form-control,
.btn,
.navbar,
.modal-content {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
}

/* ============================================
   DARK MODE - WALLET & ACCOUNT PAGES
   ============================================ */

body.dark-mode .my-wallet {
    /* background: var(--card-bg); */
}

body.dark-mode .my-wallet p {
    color: var(--text-secondary);
}

body.dark-mode .my-wallet h3 {
    color: #60a5fa;
}

body.dark-mode .wallet-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
}

body.dark-mode .wallet-card:hover {
    background: #3b82f6;
    border-color: #3b82f6;
}

body.dark-mode .wallet-card:hover p,
body.dark-mode .wallet-card:hover h3 {
    color: #ffffff;
}

body.dark-mode .wallet-card p {
    color: var(--text-secondary);
}

body.dark-mode .wallet-card h3 {
    color: var(--text-primary);
}

body.dark-mode .wallet-form input {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

body.dark-mode .wallet-form input:focus-within {
    border-color: #3b82f6;
    background: var(--bg-tertiary);
}

body.dark-mode .wallet-form button {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
}

body.dark-mode .wallet-suggest h6 {
    color: var(--text-primary);
}

body.dark-mode .wallet-suggest ul li a {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

body.dark-mode .wallet-suggest ul li a:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

body.dark-mode .account-content {
    /* background: var(--card-bg); */
}

body.dark-mode .form-group label {
    color: var(--text-primary);
}

body.dark-mode .add-wallet p {
    color: var(--text-secondary);
}

/* ============================================
   DARK MODE - SIDEBAR & PROFILE
   ============================================ */

body.dark-mode .profile-card {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

body.dark-mode .profile-card h6 {
    color: var(--text-primary);
}

body.dark-mode .profile-card p {
    color: var(--text-secondary);
}

body.dark-mode .account-nav {
    background: var(--card-bg);
    border: 1px solid var(--border-primary);
}

body.dark-mode .account-nav li a {
    color: var(--text-secondary);
    border-bottom-color: var(--border-primary);
}

body.dark-mode .account-nav li a:hover {
    color: #60a5fa;
    background: var(--bg-secondary);
}

body.dark-mode .account-nav li a.active {
    color: #60a5fa;
    background: var(--bg-secondary);
}

body.dark-mode .account-nav li a i {
    color: var(--text-secondary);
}

body.dark-mode .account-nav li a:hover i,
body.dark-mode .account-nav li a.active i {
    color: #60a5fa;
}

/* Buttons */
body.dark-mode .btn-more {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

body.dark-mode .btn-more:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

body.dark-mode .btn-buy {
    background: linear-gradient(181deg, #3b82f6 0%, #2563eb 100%) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

body.dark-mode .btn-buy:hover {
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
}

/* Category Bar */
body.dark-mode .catbar {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
}

body.dark-mode .catbar-chip {
    background-color: var(--btn-secondary-bg);
    color: var(--btn-secondary-text);
    border-color: var(--border-primary);
}

body.dark-mode .catbar-chip:hover {
    background-color: var(--btn-secondary-hover);
}

body.dark-mode .catbar-chip.is-active {
    background-color: #3b82f6;
    color: #ffffff;
}

body.dark-mode .catbar-popover {
    background-color: var(--nav-bg);
    border-color: var(--border-primary);
}

/* ============================================
   DARK MODE - SCROLLBAR
   ============================================ */

body.dark-mode ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: var(--bg-secondary);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--bg-tertiary);
    border-radius: 6px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--border-secondary);
}

/* ============================================
   DARK MODE - MISC
   ============================================ */

body.dark-mode hr {
    border-color: var(--border-primary);
    opacity: 1;
}

body.dark-mode .border {
    border-color: var(--border-primary) !important;
}

body.dark-mode .text-muted {
    color: var(--text-secondary) !important;
}

body.dark-mode .bg-light {
    background-color: var(--bg-secondary) !important;
}

body.dark-mode .bg-white {
    background-color: var(--card-bg) !important;
}

body.dark-mode code {
    background-color: none;
    color: #f472b6;
}

body.dark-mode pre {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

/* ============================================
   DARK MODE - TRANSITIONS
   ============================================ */

body,
.card,
.form-control,
.btn,
.navbar,
.modal-content {
    transition: background-color 0.3s ease,
                color 0.3s ease,
                border-color 0.3s ease;
}

/* ============================================
   DARK MODE - WALLET & ACCOUNT PAGES
   ============================================ */

body.dark-mode .my-wallet {
    /* background: var(--card-bg); */
}

body.dark-mode .my-wallet p {
    color: var(--text-secondary);
}

body.dark-mode .my-wallet h3 {
    color: #60a5fa;
}

body.dark-mode .wallet-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
}

body.dark-mode .wallet-card:hover {
    background: #3b82f6;
    border-color: #3b82f6;
}

body.dark-mode .wallet-card:hover p,
body.dark-mode .wallet-card:hover h3 {
    color: #ffffff;
}

body.dark-mode .wallet-card p {
    color: var(--text-secondary);
}

body.dark-mode .wallet-card h3 {
    color: var(--text-primary);
}

body.dark-mode .wallet-form input {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

body.dark-mode .wallet-form input:focus-within {
    border-color: #3b82f6;
    background: var(--bg-tertiary);
}

body.dark-mode .wallet-form button {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
}

body.dark-mode .wallet-suggest h6 {
    color: var(--text-primary);
}

body.dark-mode .wallet-suggest ul li a {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border: 1px solid var(--border-primary);
}

body.dark-mode .wallet-suggest ul li a:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

body.dark-mode .account-content {
    /* background: var(--card-bg); */
}

body.dark-mode .form-group label {
    color: var(--text-primary);
}

body.dark-mode .add-wallet p {
    color: var(--text-secondary);
}

/* ============================================
   DARK MODE - SIDEBAR & PROFILE
   ============================================ */

body.dark-mode .profile-card {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

body.dark-mode .profile-card h6 {
    color: var(--text-primary);
}

body.dark-mode .profile-card p {
    color: var(--text-secondary);
}

body.dark-mode .account-nav {
    background: var(--card-bg);
    border: 1px solid var(--border-primary);
}

body.dark-mode .account-nav li a {
    color: var(--text-secondary);
    border-bottom-color: var(--border-primary);
}

body.dark-mode .account-nav li a:hover {
    color: #60a5fa;
    background: var(--bg-secondary);
}

body.dark-mode .account-nav li a.active {
    color: #60a5fa;
    background: var(--bg-secondary);
}

body.dark-mode .account-nav li a i {
    color: var(--text-secondary);
}

body.dark-mode .account-nav li a:hover i,
body.dark-mode .account-nav li a.active i {
    color: #60a5fa;
}

/* ============================================
   DARK MODE - LOGIN & AUTH PAGES
   ============================================ */

body.dark-mode .user-form-card {
    background: var(--card-bg);
    border: 1px solid var(--border-primary);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.dark-mode .user-form-title h2 {
    color: var(--text-primary);
}

body.dark-mode .user-form-title p {
    color: var(--text-secondary);
}

body.dark-mode .user-form input.form-control {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

body.dark-mode .user-form input.form-control:focus {
    border-color: #3b82f6;
    background: var(--bg-tertiary);
}

body.dark-mode .user-form input.form-control::placeholder {
    color: var(--text-tertiary);
}

body.dark-mode .form-button button {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
}

body.dark-mode .form-button button:hover {
    filter: brightness(1.1);
}

body.dark-mode .form-button p a {
    color: #60a5fa;
}

body.dark-mode .form-button p a:hover {
    color: #93c5fd;
}

/* ============================================
   DARK MODE - NAVIGATION
   ============================================ */

body.dark-mode .nav-sidebar {
    background: var(--bg-primary);
    box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.5);
}

body.dark-mode .nav-header {
    border-bottom-color: var(--border-primary);
}

body.dark-mode .nav-close i {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

body.dark-mode .navbar-info p {
    color: var(--text-primary);
}

body.dark-mode .navbar-info p span {
    color: var(--text-primary);
}

body.dark-mode .navbar-info-link {
    color: #60a5fa !important;
}

body.dark-mode .navbar-info-link:hover {
    color: #93c5fd !important;
}

/* Nav-sidebar nav-btn */
body.dark-mode .nav-sidebar .nav-btn {
    background-color: transparent !important;
}

/* Nav-sidebar nav-link và dropdown */
body.dark-mode .nav-sidebar .nav-link {
    color: #e5e7eb !important;
    background-color: transparent !important;
}

body.dark-mode .nav-sidebar .nav-link:hover {
    color: #60a5fa !important;
    background-color: #1e293b !important;
}

body.dark-mode .nav-sidebar .nav-link.active {
    color: #60a5fa !important;
    background-color: #1e293b !important;
}

body.dark-mode .nav-sidebar .dropdown-list {
    background-color: transparent !important;
}

body.dark-mode .nav-sidebar .dropdown-list li a {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
}

body.dark-mode .nav-sidebar .dropdown-list li a:hover {
    background-color: #1e293b !important;
    color: #60a5fa !important;
}

body.dark-mode .header-top {
    background: #1e293b;
}

/* Header form search dark mode */
body.dark-mode .header-form {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode .header-form:focus-within {
    background-color: #0f172a !important;
    border-color: #60a5fa !important;
}

body.dark-mode .header-form input {
    background-color: transparent !important;
    color: #e5e7eb !important;
}

body.dark-mode .header-form input::placeholder {
    color: #94a3b8 !important;
}

body.dark-mode .header-form button {
    background-color: transparent !important;
    border: none !important;
}

body.dark-mode .header-form button i {
    color: #94a3b8 !important;
}

body.dark-mode .header-form button i:hover {
    color: #60a5fa !important;
}

body.dark-mode .header-select i,
body.dark-mode .header-select .nice-select .current {
    color: #f1f5f9;
}

/* Megamenu title - remove border-bottom in dark mode */
body.dark-mode .megamenu-title {
    border-bottom: none !important;
}

/* Cart-sidebar dark mode */
body.dark-mode .cart-sidebar {
    background-color: #0f172a !important;
    box-shadow: -15px 0px 25px 0px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .cart-header {
    border-bottom: 1px solid #334155 !important;
}

body.dark-mode .cart-total i,
body.dark-mode .cart-total span {
    color: #60a5fa !important;
}

body.dark-mode .cart-close {
    background-color: transparent !important;
    border-color: #334155 !important;
}

body.dark-mode .cart-close i {
    background-color: #1e293b !important;
    color: #e5e7eb !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .cart-close i:hover {
    background-color: #60a5fa !important;
    color: #ffffff !important;
    border-color: #60a5fa !important;
}

body.dark-mode .category-list {
    background-color: transparent !important;
}

body.dark-mode .category-item {
    border-bottom: 1px solid #334155 !important;
}

body.dark-mode .category-link {
    color: #e5e7eb !important;
    background-color: transparent !important;
}

body.dark-mode .category-link:hover {
    background-color: #1e293b !important;
    color: #60a5fa !important;
}

/* Category-sidebar dark mode */
body.dark-mode .category-sidebar {
    background-color: #0f172a !important;
    box-shadow: 15px 0px 25px 0px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .category-header {
    border-bottom: 1px solid #334155 !important;
}

body.dark-mode .category-close {
    background-color: transparent !important;
}

body.dark-mode .category-close i {
    background-color: #1e293b !important;
    color: #e5e7eb !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .category-close i:hover {
    background-color: #60a5fa !important;
    color: #ffffff !important;
    border-color: #60a5fa !important;
}

/* Mobile menu dark mode */
body.dark-mode .mobile-menu {
    background-color: #0f172a !important;
    box-shadow: 0px -5px 15px 0px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .mobile-menu a i,
body.dark-mode .mobile-menu button i {
    color: #e5e7eb !important;
}

body.dark-mode .mobile-menu a span,
body.dark-mode .mobile-menu button span {
    color: #94a3b8 !important;
}

body.dark-mode .mobile-menu a:hover i,
body.dark-mode .mobile-menu button:hover i {
    color: #60a5fa !important;
}

body.dark-mode .mobile-menu a:hover span,
body.dark-mode .mobile-menu button:hover span {
    color: #60a5fa !important;
}

/* Header media group buttons (mobile) - menu, search, user */
body.dark-mode .header-user i,
body.dark-mode .header-src i {
    background-color: #1e293b !important;
    color: #e5e7eb !important;
    border: 1px solid #334155 !important;
}

body.dark-mode .header-user i:hover,
body.dark-mode .header-src i:hover {
    background-color: #60a5fa !important;
    color: #ffffff !important;
    border-color: #60a5fa !important;
}

/* Nice Select Dropdown - Fix z-index & dark mode */
body.dark-mode .nice-select {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #f1f5f9 !important;
}

body.dark-mode .nice-select .list {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    z-index: 10000 !important;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .nice-select .option {
    color: #f1f5f9 !important;
}

body.dark-mode .nice-select .option:hover,
body.dark-mode .nice-select .option.focus,
body.dark-mode .nice-select .option.selected.focus {
    background-color: #334155 !important;
    color: #60a5fa !important;
}

body.dark-mode .nice-select .option.selected {
    color: #60a5fa !important;
    font-weight: 500;
}

body.dark-mode .nice-select:after {
    border-bottom-color: #f1f5f9;
    border-right-color: #f1f5f9;
}


/* ============================================
   DARK MODE - HEADER WIDGETS & ELEMENTS
   ============================================ */

body.dark-mode .header-widget i {
    color: var(--text-primary);
    background: var(--bg-tertiary);
}

body.dark-mode .header-widget:hover i {
    background: #3b82f6;
    color: #ffffff;
}

body.dark-mode .header-widget span {
    color: var(--text-primary);
}

body.dark-mode .header-widget:hover span {
    color: #60a5fa;
}

body.dark-mode .header-widget span small {
    color: var(--text-primary);
}

/* ============================================
   DARK MODE - BREADCRUMB & BANNERS
   ============================================ */

body.dark-mode .breadcrumb-item a {
    color: #60a5fa;
}

body.dark-mode .breadcrumb-item.active {
    color: var(--text-secondary);
}

body.dark-mode .single-banner h2 {
    color: var(--text-primary);
}

/* ============================================
   DARK MODE - EMPTY STATES
   ============================================ */

body.dark-mode .empty-state p {
    color: var(--text-secondary);
}

/* ============================================
   DARK MODE - FILTERS & DATE PICKERS
   ============================================ */

body.dark-mode .filter-card {
    background: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .filter-card .form-control,
body.dark-mode .filter-card .form-select {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

body.dark-mode .filter-card .form-control:focus,
body.dark-mode .filter-card .form-select:focus {
    background: var(--bg-tertiary);
    border-color: #3b82f6;
}

body.dark-mode .daterangepicker {
    background: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .daterangepicker .calendar-table {
    background: var(--card-bg);
}

body.dark-mode .daterangepicker td {
    color: var(--text-primary);
}

body.dark-mode .daterangepicker td.active {
    background: #3b82f6;
    color: #ffffff;
}

body.dark-mode .daterangepicker td:hover {
    background: var(--bg-secondary);
}

/* ============================================
   DARK MODE - STATUS BADGES & LABELS
   ============================================ */

body.dark-mode .status-badge {
    border-color: var(--border-primary);
}

body.dark-mode .status-success {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

body.dark-mode .status-pending {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
}

body.dark-mode .status-failed {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

body.dark-mode .status-processing {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}


/* ============================================
   DARK MODE - FORM INPUT GROUPS & BUTTONS
   ============================================ */

body.dark-mode .form-input-group i {
    color: var(--text-secondary);
}

body.dark-mode .form-input-group:focus-within i {
    color: #3b82f6;
}

body.dark-mode .form-btn,
body.dark-mode .form-btn-group {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
}

body.dark-mode .form-btn:hover,
body.dark-mode .form-btn-group:hover {
    filter: brightness(1.1);
}

/* ============================================
   DARK MODE - TABS & TAB NAVIGATION
   ============================================ */

body.dark-mode .nav-tabs {
    background: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .nav-tabs li {
    border-right-color: var(--border-primary);
}

body.dark-mode .nav-tabs .nav-link {
    color: var(--text-secondary);
}

body.dark-mode .nav-tabs .nav-link:hover {
    color: #60a5fa;
}

body.dark-mode .nav-tabs .nav-link.active {
    color: #60a5fa;
    background: var(--bg-secondary);
}

body.dark-mode .tab-content {
    background: var(--card-bg);
}

/* ============================================
   DARK MODE - COPY TO CLIPBOARD & TOOLTIPS
   ============================================ */

body.dark-mode .copy-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

body.dark-mode .copy-btn:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

body.dark-mode .tooltip-inner {
    background: var(--bg-primary);
    color: var(--text-primary);
}

body.dark-mode .tooltip .arrow::before {
    border-top-color: var(--bg-primary);
}

/* ============================================
   DARK MODE - CODE & PRE BLOCKS
   ============================================ */

body.dark-mode code {
    background-color: none;
    color: #f472b6;
}

body.dark-mode pre {
    background-color: var(--bg-secondary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

body.dark-mode pre code {
    background: transparent;
}


/* ============================================
   DARK MODE - ORDER TRACKING
   ============================================ */

body.dark-mode .order-track-list {
    background: var(--bg-secondary);
}

body.dark-mode .order-track-item::before {
    background: var(--bg-tertiary);
}

body.dark-mode .order-track-item.active::before {
    background: #3b82f6;
}

body.dark-mode .order-track-item i {
    color: var(--text-secondary);
    background: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .order-track-item.active i {
    color: #ffffff;
    background: #3b82f6;
    border-color: #3b82f6;
}

body.dark-mode .order-track-item span {
    color: var(--text-secondary);
}

body.dark-mode .order-track-item.active span {
    color: #60a5fa;
}

/* ============================================
   DARK MODE - NAV PILLS
   ============================================ */

body.dark-mode .nav-pills .nav-link {
    color: var(--text-secondary);
    background: var(--bg-tertiary);
}

body.dark-mode .nav-pills .nav-link:hover {
    color: #60a5fa;
    background: var(--bg-secondary);
}

body.dark-mode .nav-pills .nav-link.active {
    color: #ffffff;
    background: #3b82f6;
}

/* ============================================
   DARK MODE - LIST GROUPS
   ============================================ */

body.dark-mode .list-group-item {
    background: var(--card-bg);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

body.dark-mode .list-group-item:hover {
    background: var(--bg-secondary);
}

body.dark-mode .list-group-item.active {
    background: #3b82f6;
    border-color: #3b82f6;
    color: #ffffff;
}


/* ============================================
   DARK MODE - STANDARD PRICE & RATING
   ============================================ */

body.dark-mode .standard-price del {
    color: #f87171;
}

body.dark-mode .standard-price span {
    color: #60a5fa;
}

body.dark-mode .standard-rating i,
body.dark-mode .standard-rating a {
    color: var(--text-secondary);
}

body.dark-mode .standard-rating a:hover {
    color: #60a5fa;
}

body.dark-mode .standard-rating .active {
    color: #fbbf24;
}

body.dark-mode .standard-desc {
    color: var(--text-secondary);
}

/* ============================================
   DARK MODE - STANDARD ACTIONS & WISH
   ============================================ */

body.dark-mode .standard-action-group .product-add,
body.dark-mode .standard-action-group .action-input {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
}

body.dark-mode .standard-action-group .product-add:hover,
body.dark-mode .standard-action-group .action-input:hover {
    filter: brightness(1.1);
}

body.dark-mode .standard-wish {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

body.dark-mode .standard-wish:hover {
    background: var(--bg-secondary);
    color: #60a5fa;
}

/* ============================================
   DARK MODE - SPINNER & LOADING
   ============================================ */

body.dark-mode .spinner-border {
    border-color: var(--border-primary);
    border-right-color: #3b82f6;
}

body.dark-mode .loading-overlay {
    background: rgba(15, 23, 42, 0.8);
}

body.dark-mode .loading-text {
    color: var(--text-primary);
}


/* ============================================
   DARK MODE - BLOG CARDS & META
   ============================================ */

body.dark-mode .blog-card {
    background: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .blog-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

body.dark-mode .blog-content {
    background: var(--card-bg);
}

body.dark-mode .blog-meta li i {
    color: #60a5fa;
}

body.dark-mode .blog-meta li a,
body.dark-mode .blog-meta li span {
    color: var(--text-secondary);
}

body.dark-mode .blog-meta li a:hover {
    color: #60a5fa;
}

body.dark-mode .blog-title a {
    color: var(--text-primary);
}

body.dark-mode .blog-title a:hover {
    color: #60a5fa;
}

body.dark-mode .blog-desc {
    color: var(--text-secondary);
}

body.dark-mode .blog-btn {
    color: #60a5fa;
}

body.dark-mode .blog-btn:hover {
    color: #93c5fd;
}

/* ============================================
   DARK MODE - CONTACT & INFO SECTIONS
   ============================================ */

body.dark-mode .contact-card {
    background: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .contact-icon {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

body.dark-mode .contact-card:hover .contact-icon {
    background: #3b82f6;
    color: #ffffff;
}

body.dark-mode .contact-title {
    color: var(--text-primary);
}

body.dark-mode .contact-text {
    color: var(--text-secondary);
}

body.dark-mode .contact-link {
    color: #60a5fa;
}

body.dark-mode .contact-link:hover {
    color: #93c5fd;
}


/* ============================================
   DARK MODE - PROFILE CARD ACTIONS
   ============================================ */

body.dark-mode .profile-card ul li button {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.dark-mode .profile-card ul .edit {
    color: #86efac;
}

body.dark-mode .profile-card ul .edit:hover {
    color: #ffffff;
    background: #22c55e;
}

body.dark-mode .profile-card ul .trash {
    color: #fca5a5;
}

body.dark-mode .profile-card ul .trash:hover {
    color: #ffffff;
    background: #ef4444;
}

body.dark-mode .profile-card.active {
    background: rgba(34, 197, 94, 0.15);
    border-color: #22c55e;
}

/* ============================================
   DARK MODE - PAYMENT CARDS
   ============================================ */

body.dark-mode .payment-card {
    background: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .payment-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .payment-card h4 {
    color: var(--text-primary);
}

body.dark-mode .payment-card p {
    color: var(--text-primary);
}

body.dark-mode .payment-card h5 {
    color: var(--text-secondary);
}

body.dark-mode .payment-card.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: #3b82f6;
}

/* ============================================
   DARK MODE - SOCIAL LINKS & ICONS
   ============================================ */

body.dark-mode .social-links a {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

body.dark-mode .social-links a:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}


/* ============================================
   DARK MODE - TEAM & BRANCH CARDS
   ============================================ */

body.dark-mode .branch-overlay h4 {
    color: #f1f5f9;
}

body.dark-mode .branch-overlay p {
    color: #f1f5f9;
}

body.dark-mode .team-overlay {
    background: rgba(0, 0, 0, 0.6);
}

body.dark-mode .team-overlay a {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

body.dark-mode .team-overlay a:hover {
    background: #3b82f6;
    color: #ffffff;
}

body.dark-mode .team-meta h5 a {
    color: var(--text-primary);
}

body.dark-mode .team-meta h5 a:hover {
    color: #60a5fa;
}

body.dark-mode .team-meta p {
    color: var(--text-secondary);
}

/* ============================================
   DARK MODE - FOOTER
   ============================================ */

body.dark-mode .footer-part {
    background: var(--bg-primary);
    border-top-color: var(--border-primary);
}

body.dark-mode .footer-content h3 {
    color: var(--text-primary);
}

body.dark-mode .footer-content p {
    color: var(--text-secondary);
}

body.dark-mode .footer-list li a {
    color: var(--text-secondary);
}

body.dark-mode .footer-list li a:hover {
    color: #60a5fa;
}

body.dark-mode .footer-copyright {
    background: var(--bg-secondary);
    border-top-color: var(--border-primary);
    color: var(--text-secondary);
}

body.dark-mode .footer-copyright a {
    color: #60a5fa;
}

body.dark-mode .footer-copyright a:hover {
    color: #93c5fd;
}


/* ============================================
   DARK MODE - ACCORDION & COLLAPSE
   ============================================ */

body.dark-mode .accordion-item {
    background: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .accordion-button {
    background: var(--card-bg);
    color: var(--text-primary);
}

body.dark-mode .accordion-button:not(.collapsed) {
    background: var(--bg-secondary);
    color: #60a5fa;
}

body.dark-mode .accordion-button:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

body.dark-mode .accordion-body {
    background: var(--card-bg);
    color: var(--text-secondary);
}

/* ============================================
   DARK MODE - PROGRESS BARS
   ============================================ */

body.dark-mode .progress {
    background: var(--bg-tertiary);
}

body.dark-mode .progress-bar {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
}

/* ============================================
   DARK MODE - OFFCANVAS & DRAWER
   ============================================ */

body.dark-mode .offcanvas {
    background: var(--bg-primary);
}

body.dark-mode .offcanvas-header {
    border-bottom-color: var(--border-primary);
}

body.dark-mode .offcanvas-title {
    color: var(--text-primary);
}

body.dark-mode .offcanvas-body {
    background: var(--bg-primary);
    color: var(--text-primary);
}

body.dark-mode .btn-close {
    filter: invert(1);
}

/* ============================================
   DARK MODE - TOAST NOTIFICATIONS
   ============================================ */

body.dark-mode .toast {
    background: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .toast-header {
    background: var(--bg-secondary);
    border-bottom-color: var(--border-primary);
    color: var(--text-primary);
}

body.dark-mode .toast-body {
    background: var(--card-bg);
    color: var(--text-primary);
}

/* ============================================
   DARK MODE - CUTE ALERT
   ============================================ */

body.dark-mode .alert-frame {
    background: var(--card-bg) !important;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.6);
}

body.dark-mode .alert-title {
    color: var(--text-primary) !important;
}

body.dark-mode .alert-message {
    color: var(--text-secondary) !important;
}

body.dark-mode .alert-close {
    color: var(--text-secondary) !important;
}

body.dark-mode .alert-close:hover {
    color: var(--text-primary) !important;
}

body.dark-mode .alert-close-circle {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .alert-close-circle:hover {
    background: var(--bg-tertiary) !important;
}

/* Toast messages - Override mạnh mẽ cho dark mode */
body.dark-mode .toast-container {
    z-index: 10002 !important;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) !important;
    border-radius: 5px !important;
}

/* Override màu nền toast cho dark mode - dùng !important để ghi đè class gốc */
body.dark-mode .toast-container.error-bg,
body.dark-mode div.toast-container.error-bg,
body.dark-mode [class*="toast-container"][class*="error-bg"] {
    background: #dc2626 !important;
}

body.dark-mode .toast-container.success-bg,
body.dark-mode div.toast-container.success-bg,
body.dark-mode [class*="toast-container"][class*="success-bg"] {
    background: #16a34a !important;
}

body.dark-mode .toast-container.warning-bg,
body.dark-mode div.toast-container.warning-bg,
body.dark-mode [class*="toast-container"][class*="warning-bg"] {
    background: #ea580c !important;
}

body.dark-mode .toast-container.info-bg,
body.dark-mode div.toast-container.info-bg,
body.dark-mode [class*="toast-container"][class*="info-bg"] {
    background: #0284c7 !important;
}

body.dark-mode .toast-container.question-bg,
body.dark-mode div.toast-container.question-bg,
body.dark-mode [class*="toast-container"][class*="question-bg"] {
    background: #4f46e5 !important;
}

body.dark-mode .toast-frame {
    background: transparent !important;
}

body.dark-mode .toast-message {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .toast-close {
    color: rgba(255, 255, 255, 0.7) !important;
}

body.dark-mode .toast-close:hover {
    color: rgba(255, 255, 255, 1) !important;
}

body.dark-mode .toast-timer {
    opacity: 0.8 !important;
}


/* ============================================
   DARK MODE - TOOL PAGES
   ============================================ */

body.dark-mode .posterd {
    background: var(--bg-secondary);
    border-color: var(--border-primary);
}

body.dark-mode .welcomto {
    color: var(--text-primary);
}

body.dark-mode .box-intro {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

body.dark-mode iframe {
    border-color: var(--border-primary) !important;
}

/* ============================================
   DARK MODE - RECHARGE & PAYMENT PAGES
   ============================================ */

body.dark-mode .wallet-form {
    background: var(--card-bg);
}

body.dark-mode .wallet-form input,
body.dark-mode .wallet-form select,
body.dark-mode .wallet-form textarea {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

body.dark-mode .wallet-form input:focus,
body.dark-mode .wallet-form select:focus,
body.dark-mode .wallet-form textarea:focus {
    border-color: #3b82f6;
    background: var(--bg-tertiary);
}

body.dark-mode .wallet-form label {
    color: var(--text-primary);
}

/* ============================================
   DARK MODE - API DOCUMENTATION PAGE
   ============================================ */

body.dark-mode .input-group-text {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

body.dark-mode .col-form-label {
    color: var(--text-primary);
}

body.dark-mode .text-muted {
    color: var(--text-tertiary) !important;
}

body.dark-mode code,
body.dark-mode pre {
    background: none;
    border-color: var(--border-primary);
    color: var(--text-primary);
}

body.dark-mode .bg-light {
    background: var(--bg-secondary) !important;
}

/* ============================================
   DARK MODE - AFFILIATE PAGES
   ============================================ */

body.dark-mode .affiliate-stats {
    background: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .affiliate-card {
    background: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .affiliate-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.dark-mode .affiliate-link {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

body.dark-mode .affiliate-info {
    color: var(--text-secondary);
}

/* ============================================
   DARK MODE - STATISTICS & COUNTERS
   ============================================ */

body.dark-mode .stats-card {
    background: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .stats-value {
    color: var(--text-primary);
}

body.dark-mode .stats-label {
    color: var(--text-secondary);
}

body.dark-mode .bg-success {
    background: rgba(34, 197, 94, 0.15) !important;
    color: #86efac !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
}

body.dark-mode .bg-danger {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.3) !important;
}

body.dark-mode .bg-warning {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

body.dark-mode .bg-info {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, 0.3) !important;
}


/* ============================================
   DARK MODE - CART & SHOPPING
   ============================================ */

body.dark-mode .cart-media {
    background: var(--card-bg);
    border-color: var(--border-primary);
}

body.dark-mode .cart-media button i {
    background: var(--bg-tertiary);
    color: var(--text-primary);
}

body.dark-mode .cart-media button i:hover {
    background: #ef4444;
    color: #ffffff;
}

body.dark-mode .cart-info h6 a {
    color: var(--text-primary);
}

body.dark-mode .cart-info h6 a:hover {
    color: #60a5fa;
}

body.dark-mode .cart-info p {
    color: var(--text-secondary);
}

body.dark-mode .cart-action-group .product-action input {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

body.dark-mode .cart-action-group h6 {
    color: #60a5fa;
}

body.dark-mode .cart-footer {
    background: var(--card-bg);
    border-top-color: var(--border-primary);
    box-shadow: 0px -3px 7px 0px rgba(0, 0, 0, 0.3);
}

body.dark-mode .coupon-btn {
    color: #60a5fa;
}

body.dark-mode .coupon-form {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
}

body.dark-mode .coupon-form input {
    background: transparent;
    color: var(--text-primary);
}

body.dark-mode .coupon-form button {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
}

/* ============================================
   DARK MODE - SPINNER & LOADING STATES
   ============================================ */

body.dark-mode .spinner-border {
    border-color: var(--border-primary);
    border-right-color: #3b82f6;
}

body.dark-mode .loading-overlay {
    background: rgba(15, 23, 42, 0.8);
}

body.dark-mode .loading-text {
    color: var(--text-primary);
}

body.dark-mode .skeleton {
    background: var(--bg-tertiary);
}

body.dark-mode .skeleton::after {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.05), transparent);
}

/* ============================================
   DARK MODE - UTILITY CLASSES
   ============================================ */

body.dark-mode .bg-white {
    background: var(--card-bg) !important;
}

body.dark-mode .bg-light {
    background: var(--bg-secondary) !important;
}

body.dark-mode .text-dark {
    color: var(--text-primary) !important;
}

body.dark-mode .text-muted {
    color: var(--text-secondary) !important;
}

body.dark-mode .border {
    border-color: var(--border-primary) !important;
}

body.dark-mode .border-top {
    border-top-color: var(--border-primary) !important;
}

body.dark-mode .border-bottom {
    border-bottom-color: var(--border-primary) !important;
}

body.dark-mode .border-left {
    border-left-color: var(--border-primary) !important;
}

body.dark-mode .border-right {
    border-right-color: var(--border-primary) !important;
}

body.dark-mode hr {
    border-color: var(--border-primary);
    opacity: 1;
}

/* ============================================
   DARK MODE - SHADOWS
   ============================================ */

body.dark-mode .shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .shadow {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .shadow-lg {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}


/* ============================================
   DARK MODE - WIDGET TOOLS
   ============================================ */

body.dark-mode .hotmail-tool-card {
    background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%);
    border-color: rgba(59, 130, 246, 0.3);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .hotmail-tool-card:hover {
    box-shadow: 0 8px 30px rgba(59, 130, 246, 0.3);
    border-color: rgba(59, 130, 246, 0.5);
}

body.dark-mode .hotmail-tool-icon {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

body.dark-mode .hotmail-tool-icon svg {
    fill: #60a5fa;
}

body.dark-mode .hotmail-tool-title {
    color: #f1f5f9;
}

body.dark-mode .hotmail-tool-desc {
    color: #cbd5e1;
}

body.dark-mode .hotmail-tool-url {
    color: #93c5fd;
}

body.dark-mode .hotmail-tool-url:hover {
    color: #60a5fa;
}

body.dark-mode .hotmail-tool-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
}

body.dark-mode .hotmail-tool-btn:hover {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

/* ============================================
   DARK MODE - RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    body.dark-mode .product-box7-item {
        padding: 10px 14px;
    }
    
    body.dark-mode .account-card {
        padding: 16px;
    }
}

@media (max-width: 576px) {
    body.dark-mode .home-heading h3 {
        font-size: 18px;
    }
    
    body.dark-mode .feature-card {
        padding: 14px;
    }
}


/* ============================================
   DARK MODE - BOX 7 LAYOUT ENHANCEMENTS
   ============================================ */

body.dark-mode .product-box7-container {
    background: transparent;
}

body.dark-mode .product-box7-item {
    background: #1e293b;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.3),
        0 4px 12px rgba(0, 0, 0, 0.25),
        0 8px 24px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .product-box7-item:hover {
    border-color: rgba(255, 255, 255, 0.15);
    box-shadow:
        0 4px 8px rgba(0, 0, 0, 0.35),
        0 8px 20px rgba(0, 0, 0, 0.3),
        0 12px 32px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.dark-mode .product-box7-icon {
    background: linear-gradient(150deg, #334155, #1e293b);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.5),
        0 4px 16px rgba(0, 0, 0, 0.4),
        inset 0 1px 1px rgba(255, 255, 255, 0.08);
}

body.dark-mode .product-box7-title {
    color: #f1f5f9;
}

body.dark-mode .product-box7-title a {
    color: #f1f5f9;
}

body.dark-mode .product-box7-title a:hover {
    color: #38bdf8;
}

body.dark-mode .product-box7-subtitle {
    color: #94a3b8;
}

body.dark-mode .product-box7-stock {
    background: rgba(191, 90, 242, 0.15);
    color: #c084fc;
}

body.dark-mode .product-box7-chip.chip-location {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
}

body.dark-mode .product-box7-chip.chip-rotation {
    background: rgba(59, 130, 246, 0.15);
    color: #93c5fd;
}

body.dark-mode .product-box7-chip.chip-duration {
    background: rgba(34, 197, 94, 0.15);
    color: #86efac;
}

body.dark-mode .product-box7-check {
    color: #cbd5e1;
}

body.dark-mode .product-box7-price-wrap {
    background: rgba(15, 23, 42, 0.5);
}

body.dark-mode .product-box7-price {
    color: red;
}

body.dark-mode .product-box7-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 5px 14px rgba(59, 130, 246, 0.3);
}

body.dark-mode .product-box7-btn:hover {
    filter: brightness(1.15);
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
}

body.dark-mode .product-box7-more-wrap {
    background: transparent;
}

body.dark-mode .product-box7-more-btn {
    background: #1e293b;
    border-color: rgba(59, 130, 246, 0.3);
    color: #60a5fa;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 2px 6px rgba(0, 0, 0, 0.2),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .product-box7-more-btn:hover {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.35),
        0 4px 8px rgba(0, 0, 0, 0.25),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
}

body.dark-mode .product-box7-btn:focus-visible,
body.dark-mode .product-box7-more-btn:focus-visible {
    outline-color: #60a5fa;
}


/* ============================================
   DARK MODE - TRANSACTION & LOG PAGES
   ============================================ */

body.dark-mode .filter-show,
body.dark-mode .filter-short {
    background: transparent;
}

body.dark-mode .filter-label {
    color: var(--text-primary);
}

body.dark-mode .filter-select {
    background: var(--bg-tertiary);
    border-color: var(--border-primary);
    color: var(--text-primary);
}

body.dark-mode .filter-select:focus {
    border-color: #3b82f6;
    background: var(--bg-tertiary);
}

body.dark-mode .top-filter {
    background: transparent;
}

body.dark-mode .shop-widget-btn {
    background: var(--bg-tertiary);
    color: var(--text-primary);
    border-color: var(--border-primary);
}

body.dark-mode .shop-widget-btn:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

body.dark-mode .table-scroll {
    background: var(--card-bg);
}

body.dark-mode .table-wrapper {
    border-color: var(--border-primary);
}

body.dark-mode .text-right b {
    color: var(--text-primary);
}

body.dark-mode .text-center b {
    color: var(--text-primary);
}

body.dark-mode .inner-section {
    background: transparent;
}

body.dark-mode .profile-part {
    background: transparent;
}


/* ============================================
   DARK MODE - VAT INVOICE PAGE
   ============================================ */

body.dark-mode #vatTabs .nav-link {
    color: var(--text-secondary);
    background: transparent;
}

body.dark-mode #vatTabs .nav-link:hover:not(.active) {
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.05);
}

body.dark-mode #vatTabs .nav-link.active {
    color: #60a5fa;
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.3), 0 1px 3px rgba(0,0,0,0.3);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

body.dark-mode #vatTabs .nav-link i {
    color: var(--text-tertiary);
}

body.dark-mode #vatTabs .nav-link.active i {
    color: #60a5fa;
}

body.dark-mode #vatTabs .nav-link:not(.active) i {
    color: var(--text-tertiary);
}


/* ============================================
   DARK MODE - SECURITY & TOGGLE SWITCHES
   ============================================ */

body.dark-mode .switch {
    background: transparent;
}

body.dark-mode .switch input:checked + .slider {
    background: #3b82f6;
}

body.dark-mode .switch .slider {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
}

body.dark-mode .switch .slider:before {
    background: #ffffff;
}

body.dark-mode .form-btn {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: #ffffff;
    border: none;
}

body.dark-mode .form-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.4);
}

body.dark-mode .content-reverse {
    background: transparent;
}


/* ============================================
   DARK MODE - FAVORITES & WISHLIST PAGE
   ============================================ */

body.dark-mode .single-banner {
    background-color: rgba(15, 23, 42, 0.8) !important;
}

body.dark-mode .single-banner h2 {
    color: #f1f5f9;
}

body.dark-mode .feature-name a {
    color: var(--text-primary);
}

body.dark-mode .feature-name a:hover {
    color: #60a5fa;
}

body.dark-mode .btn-sm {
    font-size: 13px;
    padding: 6px 12px;
}

body.dark-mode .btn-primary {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    border-color: #3b82f6;
}

body.dark-mode .btn-primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
}

body.dark-mode .btn-success {
    background: linear-gradient(135deg, #22c55e, #16a34a);
    border-color: #22c55e;
}

body.dark-mode .btn-success:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.4);
}

body.dark-mode .btn-danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: #ef4444;
}

body.dark-mode .btn-danger:hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}


/* ============================================
   DARK MODE - CONTACT PAGE
   ============================================ */

body.dark-mode .contact-part {
    background: transparent;
}

body.dark-mode .contact-card {
    background: var(--card-bg);
    border-color: var(--border-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .contact-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    border-color: rgba(59, 130, 246, 0.3);
}

body.dark-mode .contact-card.active {
    background: rgba(59, 130, 246, 0.15);
    border-color: rgba(59, 130, 246, 0.3);
}

body.dark-mode .contact-card i {
    color: #60a5fa;
    background: rgba(59, 130, 246, 0.15);
}

body.dark-mode .contact-card h4 {
    color: var(--text-primary);
}

body.dark-mode .contact-card p {
    color: var(--text-secondary);
}

body.dark-mode .contact-card.active h4 {
    color: #60a5fa;
}

body.dark-mode .contact-card.active p {
    color: #93c5fd;
}


/* ============================================
   DARK MODE - STAR RATING & SLIDER ARROWS
   ============================================ */

body.dark-mode .star-rating label::before {
    color: var(--border-secondary);
}

body.dark-mode .star-rating label::after {
    color: #fbbf24;
}

body.dark-mode .dandik,
body.dark-mode .bamdik {
    color: #60a5fa;
    background: var(--card-bg);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--border-primary);
}

body.dark-mode .dandik:hover,
body.dark-mode .bamdik:hover {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* ============================================
   DARK MODE - COMPREHENSIVE FINAL TOUCHES
   ============================================ */

body.dark-mode .inner-section {
    background: transparent;
}

body.dark-mode .pt-4 {
    background: transparent;
}

body.dark-mode .container {
    background: transparent;
}

body.dark-mode .row {
    background: transparent;
}

body.dark-mode .col-lg-12,
body.dark-mode .col-lg-9,
body.dark-mode .col-lg-8,
body.dark-mode .col-lg-6,
body.dark-mode .col-lg-4,
body.dark-mode .col-lg-3 {
    background: transparent;
}

/* ============================================
   DARK MODE - NAVBAR MEGA DROPDOWN FIX
   ============================================ */

/* Product Dropdown Menu - Dark Mode */
body.dark-mode .navbar-link .navbar-dropdown,
body.dark-mode .mega-dropdown-menu {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    z-index: 10000 !important;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .navbar-dropdown .mega-title,
body.dark-mode .mega-dropdown-menu h3,
body.dark-mode .mega-dropdown-menu h4,
body.dark-mode .mega-dropdown-menu h5,
body.dark-mode .mega-dropdown-menu h6 {
    color: #f1f5f9 !important;
    border-bottom-color: #334155 !important;
}

body.dark-mode .navbar-dropdown .mega-link,
body.dark-mode .mega-dropdown-menu a {
    color: #cbd5e1 !important;
}

body.dark-mode .navbar-dropdown .mega-link:hover,
body.dark-mode .mega-dropdown-menu a:hover {
    color: #60a5fa !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
}

body.dark-mode .navbar-dropdown .mega-image img {
    border-color: #334155 !important;
}

/* History & Recharge Dropdown - Dark Mode */
body.dark-mode .history-dropdown,
body.dark-mode .recharge-dropdown {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    z-index: 10000 !important;
    box-shadow: 0 12px 32px -12px rgba(0, 0, 0, 0.6) !important;
}

body.dark-mode .history-dropdown a,
body.dark-mode .recharge-dropdown a {
    color: #cbd5e1 !important;
}

body.dark-mode .history-dropdown a:hover,
body.dark-mode .recharge-dropdown a:hover {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
}

/* ============================================
   DARK MODE - SWEETALERT
   ============================================ */

body.dark-mode .swal2-popup {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-primary);
}

body.dark-mode .swal2-title {
    color: var(--text-primary) !important;
}

body.dark-mode .swal2-html-container {
    color: var(--text-secondary) !important;
}

body.dark-mode .swal2-confirm,
body.dark-mode .swal2-cancel,
body.dark-mode .swal2-deny {
    color: #ffffff !important;
}

body.dark-mode .swal2-input,
body.dark-mode .swal2-textarea,
body.dark-mode .swal2-select {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-primary) !important;
}

body.dark-mode .swal2-validation-message {
    background-color: var(--bg-tertiary) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .swal2-loader {
    border-color: #3b82f6 rgba(0,0,0,0) #3b82f6 rgba(0,0,0,0) !important;
}


/* ============================================
   DARK MODE - SIDEBAR MENU
   ============================================ */
/* Sidebar menu items */
body.dark-mode .sidebar-menu,
body.dark-mode .account-sidebar,
body.dark-mode .menu-sidebar {
    background-color: #1e293b !important;
}

body.dark-mode .sidebar-menu a,
body.dark-mode .account-sidebar a,
body.dark-mode .menu-sidebar a,
body.dark-mode .sidebar_profile {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

body.dark-mode .sidebar_profile h6 {
    color: #f1f5f9 !important;
}

body.dark-mode .sidebar_profile i {
    color: #94a3b8 !important;
}

body.dark-mode .sidebar-menu a:hover,
body.dark-mode .account-sidebar a:hover,
body.dark-mode .menu-sidebar a:hover,
body.dark-mode .sidebar_profile:hover {
    background-color: #334155 !important;
}

body.dark-mode .sidebar-menu a.active,
body.dark-mode .account-sidebar a.active,
body.dark-mode .menu-sidebar a.active,
body.dark-mode .sidebar_profile.active,
body.dark-mode .sidebar_profile.mobile-menu-active {
    background-color: #2563eb !important;
    color: #ffffff !important;
}

body.dark-mode .sidebar_profile.active h6,
body.dark-mode .sidebar_profile.active i,
body.dark-mode .sidebar_profile.mobile-menu-active h6,
body.dark-mode .sidebar_profile.mobile-menu-active i {
    color: #ffffff !important;
}

/* ============================================
   DARK MODE - BLOG PAGES
   ============================================ */
/* Blog sidebar widgets */
body.dark-mode .blog-widget,
body.dark-mode .blog-sidebar,
body.dark-mode .widget {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

body.dark-mode .blog-widget h3,
body.dark-mode .blog-widget h4,
body.dark-mode .widget h3,
body.dark-mode .widget h4 {
    color: #f1f5f9 !important;
}

body.dark-mode .blog-widget input,
body.dark-mode .widget input {
    background-color: #334155 !important;
    color: #f1f5f9 !important;
    border-color: #475569 !important;
}

/* Blog content */
body.dark-mode .blog-content,
body.dark-mode .blog-post,
body.dark-mode .blog-detail {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

body.dark-mode .blog-content h1,
body.dark-mode .blog-content h2,
body.dark-mode .blog-content h3,
body.dark-mode .blog-content h4,
body.dark-mode .blog-content h5,
body.dark-mode .blog-content h6 {
    color: #f1f5f9 !important;
}

body.dark-mode .blog-content p,
body.dark-mode .blog-content div,
body.dark-mode .blog-content span {
    color: #e5e7eb !important;
}

/* Blog cards */
body.dark-mode .blog-card,
body.dark-mode .blog-item {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode .blog-card h3,
body.dark-mode .blog-card h4,
body.dark-mode .blog-item h3,
body.dark-mode .blog-item h4 {
    color: #f1f5f9 !important;
}

/* ============================================
   DARK MODE - API DOCUMENT PAGE
   ============================================ */
/* API Key text */
body.dark-mode #api_key {
    color: #3b82f6 !important;
}

body.dark-mode .account-card .copy {
    color: #60a5fa !important;
}

/* API documentation text */
body.dark-mode .account-card p,
body.dark-mode .account-card span,
body.dark-mode .account-card div {
}

body.dark-mode .account-card strong {
    color: #f1f5f9 !important;
}

/* API endpoints and URLs */
body.dark-mode .account-card a,
body.dark-mode .account-card .api-url {
    color: #60a5fa !important;
}

/* Code blocks and pre */
body.dark-mode .account-card pre,
body.dark-mode .account-card code {
    background-color: #1e293b !important;
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

/* ============================================
   DARK MODE - ALERT BOXES FIX
   ============================================ */
/* Alert boxes - ensure text is readable */
body.dark-mode .alert,
body.dark-mode .alert-warning,
body.dark-mode .alert-info,
body.dark-mode .alert-danger,
body.dark-mode .alert-success {
    color: inherit !important;
}

body.dark-mode .alert *,
body.dark-mode .alert-warning *,
body.dark-mode .alert-info *,
body.dark-mode .alert-danger *,
body.dark-mode .alert-success * {
    color: inherit !important;
}

/* ============================================
   DARK MODE - CRYPTO INPUTS OVERRIDE
   ============================================ */
/* Keep crypto form inputs WHITE - highest priority */
body.dark-mode .crypto-form-inner input,
body.dark-mode .crypto-form-inner select,
body.dark-mode .crypto-form-inner textarea,
body.dark-mode input.crypto-input-field,
body.dark-mode select.crypto-input-field,
body.dark-mode textarea.crypto-input-field {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

body.dark-mode .crypto-form-inner input::placeholder,
body.dark-mode input.crypto-input-field::placeholder {
    color: #9ca3af !important;
}

/* Yellow estimate card input - keep white */
body.dark-mode .crypto-estimate-card input,
body.dark-mode .estimate-input,
body.dark-mode .crypto-amount-estimate {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

/* Fix yellow card input and all inner elements */
body.dark-mode .alert-warning input,
body.dark-mode .alert-warning select,
body.dark-mode .alert-warning textarea,
body.dark-mode .bg-warning input,
body.dark-mode .bg-warning select,
body.dark-mode .bg-warning textarea {
    background-color: #ffffff !important;
    color: #1f2937 !important;
    border-color: #d1d5db !important;
}

/* Fix payment deadline text */
body.dark-mode .crypto-payment-deadline,
body.dark-mode .payment-deadline,
body.dark-mode .crypto-timer-label {
    color: #1f2937 !important;
    background-color: transparent !important;
}

/* Fix crypto yellow card - text should be dark on yellow background */
body.dark-mode .alert-warning,
body.dark-mode .bg-warning,
body.dark-mode .alert.alert-warning {
    background-color: inherit !important;
}

body.dark-mode .alert-warning *:not(input):not(select):not(textarea),
body.dark-mode .bg-warning *:not(input):not(select):not(textarea) {
    color: #1f2937 !important;
}

/* Fix bank recharge alert box - preserve inline styles */
body.dark-mode .account-card div[style*="color"],
body.dark-mode .account-card p[style*="color"],
body.dark-mode .account-card strong[style*="color"],
body.dark-mode .account-card span[style*="color"] {
    /* Don't override - let inline style win */
}

/* Exception: force white color for elements with color:#fff */
body.dark-mode .account-card div[style*="color:#fff"],
body.dark-mode .account-card p[style*="color:#fff"],
body.dark-mode .account-card div[style*="color:rgba(255,255,255"] {
    color: #ffffff !important;
}

body.dark-mode .account-card strong[style*="color:#dc2626"] {
    color: #dc2626 !important;
}

body.dark-mode .account-card strong[style*="color:#2563eb"] {
    color: #2563eb !important;
}

/* ============================================
   DARK MODE - CRYPTO PAYMENT MODAL FIX
   ============================================ */
/* Fix payment deadline and timer text - should be dark on light background */
body.dark-mode .crypto-payment-modal .payment_deadline,
body.dark-mode .crypto-payment-modal h5,
body.dark-mode .payment_deadline {
    color: #1f2937 !important;
}

/* Crypto modal cards with light background - text should be dark */
body.dark-mode .crypto-payment-modal .card,
body.dark-mode .crypto-payment-modal .alert {
    color: #1f2937 !important;
}

body.dark-mode .crypto-payment-modal .card *:not(button):not(.btn),
body.dark-mode .crypto-payment-modal .alert *:not(button):not(.btn) {
    color: inherit !important;
}

/* ============================================
   DARK MODE - PROXY ORDER & RESIDENT DETAIL PAGES
   ============================================ */
/* Main cards */
body.dark-mode .proxy-card,
body.dark-mode .proxy-detail-card,
body.dark-mode .proxy-order-card,
body.dark-mode .proxy-resident-card,
body.dark-mode .order-detail-card,
body.dark-mode .resident-detail-card {
    background-color: #1e293b !important;
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: #334155 !important;
}

/* Card headers and titles */
body.dark-mode .proxy-card h3,
body.dark-mode .proxy-card h4,
body.dark-mode .proxy-card h5,
body.dark-mode .proxy-detail-card h3,
body.dark-mode .proxy-detail-card h4,
body.dark-mode .proxy-detail-card h5,
body.dark-mode .order-detail-card h3,
body.dark-mode .order-detail-card h4 {
    color: #f1f5f9 !important;
}

/* Card body text */

/* Proxy list items */
body.dark-mode .proxy-item,
body.dark-mode .proxy-list-item {
    background-color: #334155 !important;
    background: #334155 !important;
    border-color: #475569 !important;
    color: #f1f5f9 !important;
}

/* Statistics cards */
body.dark-mode .statistics-card,
body.dark-mode .stat-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

/* Fix proxy status badges - preserve green/red colors */
body.dark-mode .proxy-item .badge,
body.dark-mode .proxy-item .status-badge,
body.dark-mode .proxy-item span[style*="color:#28a745"],
body.dark-mode .proxy-item span[style*="color:#dc3545"] {
    color: inherit !important;
}

body.dark-mode .proxy-item .text-success {
    color: #22c55e !important;
}

body.dark-mode .proxy-item .text-danger {
    color: #ef4444 !important;
}

/* ============================================
   DARK MODE - LOGIN/REGISTER PAGES
   ============================================ */
/* User form remind card */
body.dark-mode .user-form-remind,
body.dark-mode .user-form-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode .user-form-remind p,
body.dark-mode .user-form-remind span,
body.dark-mode .user-form-card p,
body.dark-mode .user-form-card span {
    color: #e5e7eb !important;
}

body.dark-mode .user-form-remind a,
body.dark-mode .user-form-card a {
    color: #60a5fa !important;
}

/* ============================================
   RESPONSIVE FIX - PRODUCT CARDS BUTTONS
   ============================================ */
/* Fix buttons overflow on mobile */
@media (max-width: 768px) {
    .Box7 .product-actions,
    .product-card .actions,
    .product-item .buttons {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .Box7 button,
    .Box7 a.btn,
    .product-card button,
    .product-card a.btn {
        font-size: 13px !important;
        padding: 8px 12px !important;
        white-space: nowrap !important;
    }
    
    /* Price button */
    .Box7 .price-btn,
    .product-card .price-btn {
        min-width: 100px !important;
        max-width: 120px !important;
    }
    
    /* Buy button */
    .Box7 .buy-btn,
    .product-card .buy-btn {
        min-width: 100px !important;
        flex: 1 !important;
    }
}

@media (max-width: 576px) {
    .Box7 button,
    .Box7 a.btn,
    .product-card button,
    .product-card a.btn {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }
}


/* ============================================
   DARK MODE - CATEGORY SIDEBAR MOBILE
   ============================================ */
body.dark-mode .category-sidebar {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

body.dark-mode .category-sidebar h3,
body.dark-mode .category-sidebar .sidebar-title {
    color: #f1f5f9 !important;
}

body.dark-mode .category-sidebar ul li a {
    color: #e5e7eb !important;
    border-color: #334155 !important;
}

body.dark-mode .category-sidebar ul li a:hover {
    background-color: #334155 !important;
    color: #60a5fa !important;
}

body.dark-mode .category-sidebar ul li.active a {
    background-color: #1e40af !important;
    color: #ffffff !important;
}

/* Dropdown list trong category sidebar */
body.dark-mode .category-sidebar .dropdown-list {
    background-color: transparent !important;
}

body.dark-mode .category-sidebar .dropdown-list li a {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
    border-color: #334155 !important;
    text-wrap: wrap;
}

body.dark-mode .category-sidebar .dropdown-list li a:hover {
    background-color: #1e293b !important;
    color: #60a5fa !important;
}


/* ============================================
   FEATURE CARD - Dark Mode Inline Colors
   ============================================ */
body.dark-mode .feature-card b[style*="color:blue"],
body.dark-mode .feature-card b[style*="color: blue"] {
    color: #60a5fa !important;
}

body.dark-mode .feature-card b[style*="color:red"],
body.dark-mode .feature-card b[style*="color: red"] {
    color: #f87171 !important;
}

body.dark-mode .feature-card b[style*="color:green"],
body.dark-mode .feature-card b[style*="color: green"] {
    color: #4ade80 !important;
}