/* ============================================================
   AHIA MAIN MARKET — CRIMSON RED & WHITE THEME
   Complete brand identity: Crimson Red + White only
   Owner & Programmer: Onyeka E. Henry
   Copyright (c) 2025 Onyeka E. Henry. All rights reserved.
   ============================================================ */

:root {
    /* ── CRIMSON RED & WHITE COLOR SYSTEM ── */
    --crimson: #C1121F;
    --crimson-dark: #8B0000;
    --crimson-deeper: #5C0000;
    --crimson-light: #FDEBEC;
    --crimson-soft: #F8D7DA;
    --crimson-glow: #FF4D5A;
    --crimson-border: #E8B4B8;
    
    /* White / Off-White */
    --white: #FFFFFF;
    --off-white: #FCFCFC;
    --white-warm: #FFF5F5;
    
    /* Gradients */
    --brand-gradient: linear-gradient(135deg, #FF4D5A 0%, #C1121F 50%, #8B0000 100%);
    --brand-gradient-hover: linear-gradient(135deg, #FF6670 0%, #D41726 50%, #9A0000 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(193,18,31,0.08), rgba(139,0,0,0.04));
    --brand-gradient-light: linear-gradient(135deg, #FDEBEC 0%, #FFF5F5 100%);
    
    /* Text Colors */
    --text-primary: #1e1e24;
    --text-secondary: #4b5563;
    --text-muted: #6b7280;
    --text-on-red: #FFFFFF;
    --text-on-red-secondary: rgba(255,255,255,0.92);
    --text-on-red-muted: rgba(255,255,255,0.78);
    --text-on-white: #1e1e24;
    --text-on-white-secondary: #4b5563;
    --text-on-white-muted: #6b7280;
    --text-crimson: #C1121F;
    --text-crimson-dark: #8B0000;
    --text-white: #FFFFFF;
    
    /* Aliases used by templates */
    --primary-color: #C1121F;
    --success-color: #22C55E;
    
    /* Backgrounds */
    --bg-white: #FFFFFF;
    --bg-off-white: #FCFCFC;
    --bg-light-crimson: #FDEBEC;
    --bg-soft-crimson: #F8D7DA;
    --bg-crimson: #C1121F;
    --bg-crimson-dark: #8B0000;
    --bg-crimson-glass: rgba(193,18,31,0.65);
    
    /* Borders */
    --border-color: #E5E7EB;
    --border-crimson: #E8B4B8;
    --border-crimson-strong: #C1121F;
    
    /* Shadows — Soft, never dark */
    --shadow-xs: 0 1px 2px rgba(193,18,31,0.04);
    --shadow-sm: 0 1px 3px rgba(193,18,31,0.06), 0 1px 2px rgba(193,18,31,0.04);
    --shadow-md: 0 4px 6px -1px rgba(193,18,31,0.07), 0 2px 4px -2px rgba(193,18,31,0.05);
    --shadow-lg: 0 10px 15px -3px rgba(193,18,31,0.08), 0 4px 6px -4px rgba(193,18,31,0.04);
    --shadow-xl: 0 20px 25px -5px rgba(193,18,31,0.08), 0 8px 10px -6px rgba(193,18,31,0.04);
    --shadow-crimson: 0 4px 14px rgba(193,18,31,0.25);
    --shadow-crimson-lg: 0 8px 28px rgba(193,18,31,0.30);
    
    /* Border Radius */
    --radius-sm: 0.5rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.25rem;
    --radius-2xl: 1.5rem;
    --radius-pill: 9999px;
    
    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 0.875rem;
    --spacing-lg: 1.25rem;
    --spacing-xl: 1.5rem;
    --spacing-2xl: 2rem;
    
    /* PWA Safe Areas */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);
    
    /* Typography */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-base: 0.9375rem;
    --font-lg: 1rem;
    --font-xl: 1.125rem;
    --font-2xl: 1.3125rem;
    --font-3xl: 1.625rem;
    
    /* Bottom Nav */
    --bottom-nav-height: 64px;
}

/* ===== DARK MODE SUPPORT ===== */
html.dark-mode {
    --crimson: #C1121F;
    --crimson-dark: #8B0000;
    --crimson-deeper: #5C0000;
    --crimson-light: #2D1213;
    --crimson-soft: #1A0A0B;
    --crimson-glow: #FF4D5A;
    --crimson-border: #4A1A1C;
    --white: #1A1A1A;
    --off-white: #1E1E1E;
    --white-warm: #2A1A1A;
    --text-on-white: #F1F5F9;
    --text-on-white-secondary: #CBD5E1;
    --text-on-white-muted: #94A3B8;
    --text-on-red: #FFFFFF;
    --text-on-red-secondary: rgba(255,255,255,0.92);
    --text-on-red-muted: rgba(255,255,255,0.78);
    --text-crimson: #FF6B6B;
    --text-crimson-dark: #FF5252;
    --text-white: #F1F5F9;
    --text-primary: #F1F5F9;
    --text-secondary: #CBD5E1;
    --text-muted: #94A3B8;
    --primary-color: #C1121F;
    --success-color: #22C55E;
    --bg-white: #1A1A1A;
    --bg-off-white: #1E1E1E;
    --bg-light-crimson: #2D1213;
    --bg-soft-crimson: #1A0A0B;
    --bg-crimson: #C1121F;
    --bg-crimson-dark: #8B0000;
    --border-color: #334155;
    --border-crimson: #4A1A1C;
    --border-crimson-strong: #C1121F;
    --shadow-xs: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
    --shadow-lg: 0 10px 15px rgba(0,0,0,0.5), 0 4px 6px rgba(0,0,0,0.3);
    --shadow-xl: 0 20px 25px rgba(0,0,0,0.5), 0 8px 10px rgba(0,0,0,0.3);
    --shadow-crimson: 0 4px 14px rgba(193,18,31,0.4);
    --shadow-crimson-lg: 0 8px 28px rgba(193,18,31,0.5);
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f172a 100%) !important;
    color: #F1F5F9 !important;
}

html.dark-mode body {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f172a 100%) !important;
    color: #F1F5F9 !important;
}

html.dark-mode .main-header,
html.dark-mode .marketplace-header,
html.dark-mode .navbar {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f172a 100%) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

html.dark-mode .navbar-brand,
html.dark-mode .nav-brand {
    color: #F1F5F9 !important;
}

html.dark-mode .nav-link,
html.dark-mode .nav-icon-btn {
    color: #CBD5E1 !important;
}

html.dark-mode .nav-link:hover,
html.dark-mode .nav-icon-btn:hover {
    color: #F1F5F9 !important;
    background: rgba(255,255,255,0.08) !important;
}

html.dark-mode .card,
html.dark-mode .product-card,
html.dark-mode .dashboard-card,
html.dark-mode .order-card,
html.dark-mode .service-card,
html.dark-mode .content-card,
html.dark-mode .panel,
html.dark-mode .modal-content,
html.dark-mode .form-section,
html.dark-mode .cl-wrap,
html.dark-mode .lc-page,
html.dark-mode .ai-container,
html.dark-mode .sp-page,
html.dark-mode .sp-card,
html.dark-mode .sp-activity-card,
html.dark-mode .sp-kb-section,
html.dark-mode .nf-page,
html.dark-mode .cr-wrap,
html.dark-mode .cr-container,
html.dark-mode .nf-sheet,
html.dark-mode .nf-confirm-modal {
    background: #1E1E1E !important;
    border-color: #334155 !important;
    color: #F1F5F9 !important;
}

html.dark-mode .card h1,
html.dark-mode .card h2,
html.dark-mode .card h3,
html.dark-mode .card h4,
html.dark-mode .product-card h3,
html.dark-mode .dashboard-card h3 {
    color: #F1F5F9 !important;
}

html.dark-mode .card p,
html.dark-mode .product-card p,
html.dark-mode .dashboard-card p {
    color: #CBD5E1 !important;
}

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
    background: #1E1E1E !important;
    border-color: #334155 !important;
    color: #F1F5F9 !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #94A3B8 !important;
}

html.dark-mode .btn-primary,
html.dark-mode .btn-secondary,
html.dark-mode .btn-crimson {
    color: #FFFFFF !important;
}

html.dark-mode .btn-secondary {
    background: #334155 !important;
    border-color: #334155 !important;
}

html.dark-mode table {
    background: #1E1E1E !important;
    color: #F1F5F9 !important;
}

html.dark-mode th,
html.dark-mode td {
    border-color: #334155 !important;
    color: #CBD5E1 !important;
}

html.dark-mode th {
    background: #1A1A1A !important;
    color: #F1F5F9 !important;
}

html.dark-mode tr:nth-child(even) {
    background: rgba(255,255,255,0.03) !important;
}

html.dark-mode .modal-header {
    border-bottom-color: #334155 !important;
    color: #F1F5F9 !important;
}

html.dark-mode .modal-footer {
    border-top-color: #334155 !important;
}

html.dark-mode .footer,
html.dark-mode .main-footer,
html.dark-mode .marketplace-footer {
    background: #1A1A1A !important;
    color: #94A3B8 !important;
    border-top-color: #334155 !important;
}

html.dark-mode .footer a {
    color: #CBD5E1 !important;
}

html.dark-mode .mobile-bottom-nav {
    background: rgba(26, 26, 46, 0.95) !important;
    border-top-color: rgba(255,255,255,0.08) !important;
}

html.dark-mode .mobile-bottom-nav .nav-item,
html.dark-mode .mobile-bottom-nav a {
    color: #94A3B8 !important;
}

html.dark-mode .mobile-bottom-nav a.active,
html.dark-mode .mobile-bottom-nav a:hover {
    color: #FF4D5A !important;
}

html.dark-mode .hero-section {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f172a 100%) !important;
}

html.dark-mode .hero-section h1,
html.dark-mode .hero-section h2,
html.dark-mode .hero-section p {
    color: #F1F5F9 !important;
}

html.dark-mode .section-title {
    color: #F1F5F9 !important;
}

html.dark-mode .text-muted {
    color: #94A3B8 !important;
}

html.dark-mode .text-secondary {
    color: #CBD5E1 !important;
}

html.dark-mode a {
    color: #FF6B6B !important;
}

html.dark-mode a:hover {
    color: #FF4D5A !important;
}

html.dark-mode .dropdown-menu {
    background: #1E1E1E !important;
    border-color: #334155 !important;
}

html.dark-mode .dropdown-item {
    color: #CBD5E1 !important;
}

html.dark-mode .dropdown-item:hover {
    background: #2A2A3A !important;
    color: #F1F5F9 !important;
}

html.dark-mode .list-group-item {
    background: #1E1E1E !important;
    color: #CBD5E1 !important;
    border-color: #334155 !important;
}

html.dark-mode .badge {
    color: #F1F5F9 !important;
}

html.dark-mode .badge.bg-light {
    background: #334155 !important;
    color: #F1F5F9 !important;
}

html.dark-mode .breadcrumb {
    background: #1E1E1E !important;
}

html.dark-mode .breadcrumb-item a {
    color: #94A3B8 !important;
}

html.dark-mode .breadcrumb-item.active {
    color: #F1F5F9 !important;
}

html.dark-mode .pagination .page-link {
    background: #1E1E1E !important;
    border-color: #334155 !important;
    color: #CBD5E1 !important;
}

html.dark-mode .pagination .page-item.active .page-link {
    background: #C1121F !important;
    border-color: #C1121F !important;
    color: #FFFFFF !important;
}

html.dark-mode .alert {
    color: #F1F5F9 !important;
}

html.dark-mode .alert-info {
    background: #1E3A5F !important;
    border-color: #334155 !important;
    color: #CBD5E1 !important;
}

html.dark-mode .alert-warning {
    background: #5F4A1E !important;
    border-color: #334155 !important;
    color: #F1F5F9 !important;
}

html.dark-mode .alert-danger {
    background: #5F1E1E !important;
    border-color: #334155 !important;
    color: #F1F5F9 !important;
}

html.dark-mode .alert-success {
    background: #1E5F2E !important;
    border-color: #334155 !important;
    color: #F1F5F9 !important;
}

html.dark-mode .tooltip {
    background: #1E1E1E !important;
    color: #F1F5F9 !important;
}

html.dark-mode .tooltip .tooltip-arrow::before {
    border-top-color: #1E1E1E !important;
}

html.dark-mode .popover {
    background: #1E1E1E !important;
    color: #F1F5F9 !important;
    border-color: #334155 !important;
}

html.dark-mode .popover-header {
    background: #1A1A1A !important;
    border-bottom-color: #334155 !important;
    color: #F1F5F9 !important;
}

html.dark-mode .popover-body {
    color: #CBD5E1 !important;
}

html.dark-mode #ahiaDialogOverlay {
    background: rgba(0,0,0,0.6) !important;
}

html.dark-mode #ahiaDialogBox {
    background: #1E1E1E !important;
    border-color: #334155 !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4) !important;
}

html.dark-mode #ahiaDialogTitle {
    color: #F1F5F9 !important;
}

html.dark-mode #ahiaDialogMessage {
    color: #CBD5E1 !important;
}

html.dark-mode .ahia-dlg-cancel {
    background: #334155 !important;
    color: #F1F5F9 !important;
}

html.dark-mode .ahia-dlg-cancel:hover {
    background: #4A5568 !important;
}

html.dark-mode #global-call-overlay > div {
    background: #1E1E1E !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
}

html.dark-mode #global-call-overlay h4 {
    color: #F1F5F9 !important;
}

html.dark-mode #global-call-overlay p {
    color: #CBD5E1 !important;
}

html.dark-mode #ahiaShareOverlay > div {
    background: #1E1E1E !important;
    border-color: #334155 !important;
    box-shadow: 0 16px 48px rgba(0,0,0,0.4) !important;
}

html.dark-mode #ahiaShareOverlay h3 {
    color: #F1F5F9 !important;
}

html.dark-mode #ahiaShareOverlay p {
    color: #CBD5E1 !important;
}

html.dark-mode .nav-icon-btn {
    background: #334155 !important;
    border-color: #334155 !important;
    color: #CBD5E1 !important;
}

html.dark-mode .nav-icon-btn:hover {
    background: #4A5568 !important;
    border-color: #4A5568 !important;
    color: #F1F5F9 !important;
}

html.dark-mode .nav-menu-icons .nav-link {
    background: rgba(255,255,255,0.15) !important;
    border-color: rgba(255,255,255,0.3) !important;
    color: #CBD5E1 !important;
}

html.dark-mode .nav-menu-icons .nav-link:hover {
    background: rgba(255,255,255,0.25) !important;
    border-color: rgba(255,255,255,0.45) !important;
    color: #F1F5F9 !important;
}

/* ===== RESET & BASE ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    color: var(--text-on-white);
    background: var(--bg-white);
    font-size: var(--font-base);
    min-height: 100vh;
    animation: pageEnter 0.4s ease-out;
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--bottom-nav-height) + var(--safe-area-bottom));
}

/* ===== ANIMATIONS ===== */
@keyframes pageEnter { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeSlideDown { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
@keyframes shimmer { 0% { background-position: -468px 0; } 100% { background-position: 468px 0; } }
@keyframes badgePulse { 0% { transform: scale(1); } 50% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes ripple { to { transform: scale(4); opacity: 0; } }
@keyframes shimmerBar { 0%{background-position:0% 0%} 100%{background-position:200% 0%} }

/* Staggered entrance */
.main-content > .container > * { animation: fadeSlideUp 0.5s ease-out both; }
.main-content > .container > *:nth-child(1) { animation-delay: 0.05s; }
.main-content > .container > *:nth-child(2) { animation-delay: 0.10s; }
.main-content > .container > *:nth-child(3) { animation-delay: 0.15s; }
.main-content > .container > *:nth-child(4) { animation-delay: 0.20s; }
.main-content > .container > *:nth-child(5) { animation-delay: 0.25s; }
.main-content > .container > *:nth-child(6) { animation-delay: 0.30s; }

/* ===== SKELETON LOADING ===== */
.skeleton { 
    background: linear-gradient(90deg, var(--bg-soft-crimson) 25%, var(--bg-light-crimson) 50%, var(--bg-soft-crimson) 75%); 
    background-size: 936px 100%; 
    animation: shimmer 1.5s ease-in-out infinite; 
    border-radius: 6px; 
    color: transparent !important; 
    pointer-events: none; 
    user-select: none; 
}
.skeleton-text { height: 1em; margin-bottom: 0.5em; width: 100%; }
.skeleton-text.short { width: 60%; }
.skeleton-text.tiny { width: 30%; }
.skeleton-card { height: 200px; border-radius: var(--radius-lg); }

/* ===== CONTAINER ===== */
.container { max-width: 1140px; margin: 0 auto; padding: 0 var(--spacing-md); }

/* ===== CUSTOM SCROLLBAR ===== */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-crimson); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--crimson-border); }

/* ================================================================
   HEADER — Modern crimson glass, WHITE TEXT
   ================================================================ */
.main-header {
    position: sticky; top: 0; z-index: 1000; width: 100%;
    background: var(--bg-crimson-glass);
    backdrop-filter: saturate(140%) blur(14px);
    -webkit-backdrop-filter: saturate(140%) blur(14px);
    border-bottom: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 4px 20px rgba(139,0,0,0.15);
}
.main-header::after {
    content:''; position:absolute; left:0; right:0; bottom:-2px; height:3px;
    background: linear-gradient(90deg, #FF4D5A, #C1121F, #FF4D5A);
    background-size:200% 100%; animation:shimmerBar 3s linear infinite;
}

.navbar { padding: 10px 0; }
.nav-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; display:flex; align-items:center; justify-content:space-between; position:relative; gap: 10px; }
.nav-cart-center {
    position: relative;
    flex-shrink: 0;
}
.nav-icons { display: flex; align-items: center; gap: 10px; list-style: none; margin: 0; padding: 0; }
.nav-icon-btn {
    width: 38px; height: 38px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 19px;
    background: #FFFFFF;
    border: 2px solid #FFFFFF;
    color: #C1121F;
    font-size: 1.1rem;
    padding: 0;
    transition: transform .15s, box-shadow .15s;
    position: relative;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0,0,0,.18);
}
.nav-icon-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.25);
    background: #FFFFFF;
    border-color: #FFFFFF;
}
.brand-logo { width:38px; height:38px; border-radius:12px; object-fit:contain; }
.brand-title {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 1.2rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: -0.6px;
    line-height: 1;
}
.brand-subtitle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 0.65rem;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    letter-spacing: 3.5px;
    text-transform: uppercase;
    line-height: 1;
    margin-top: 2px;
}

/* Keep the cart visible and un-overlapped on small screens.
   The cart is a normal flex item (in flow, before the globe icon), so it
   never overlaps the theme/bell icons and stays visible in the Capacitor
   mobile app. */
@media (max-width: 768px) {
    .nav-cart-center { width: 40px; height: 40px; font-size: 1.1rem; }
}
@media (max-width: 380px) {
    .nav-cart-center { width: 36px; height: 36px; font-size: 1rem; }
    .brand-title { font-size: 1rem; }
}

.nav-menu { display:none; list-style:none; align-items:center; gap:6px; }
.nav-menu-icons { display: flex !important; align-items: center; gap: 6px; }
.nav-menu-icons .nav-item { margin: 0; }
.nav-menu-icons .nav-link {
    width: 36px; height: 36px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(255,255,255,.25);
    border: 1px solid rgba(255,255,255,.55);
    color: #FFFFFF;
    font-size: 1.05rem;
    padding: 0;
    transition: background .15s, border-color .15s;
    position: relative;
    text-decoration: none;
}
.nav-menu-icons .nav-link:hover {
    background: rgba(255,255,255,.40);
    border-color: rgba(255,255,255,.75);
    transform: none;
    box-shadow: none;
}
.nav-menu-icons .nav-link .nav-text { display: none !important; }
.nav-menu-icons .nav-link .badge-count {
    top: -5px; right: -6px;
    min-width: 14px; height: 14px;
    font-size: 9px; padding: 0 3px;
}
.nav-link {
    color:rgba(255,255,255,.95); text-decoration:none; font-weight:600; font-size:.85rem;
    padding:8px 12px; border-radius:999px; transition:all .2s ease;
    background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12);
    backdrop-filter: blur(6px);
}
.nav-link:hover { background:rgba(255,255,255,.18); transform:translateY(-1px); box-shadow:0 6px 18px rgba(0,0,0,.18); }

.mobile-menu-toggle {
    width: 36px; height: 36px;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    cursor: pointer;
    padding: 0;
    transition: background .15s, border-color .15s;
}
.mobile-menu-toggle:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.45);
}
.mobile-menu-toggle .menu-label { display: none !important; }
.mobile-menu-toggle .mobile-toggle-icon { font-size: 1.05rem; }

/* ================================================================
   MAIN CONTENT
   ================================================================ */
.main-content { padding: 28px 0 40px; position:relative; z-index:1; }

/* ================================================================
   HERO — White card on red background
   ================================================================ */
.hero-section {
    background: var(--bg-white);
    border: 1px solid var(--border-crimson);
    border-radius: var(--radius);
    box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.6);
    padding: 40px 36px; position:relative; overflow:hidden;
}
.hero-section::before {
    content:""; position:absolute; width:260px; height:260px; top:-60px; right:-60px;
    background: radial-gradient(circle, rgba(255,77,90,.18), transparent 70%);
    border-radius:50%; pointer-events:none;
}
.hero-section h1, .hero-section h2, .hero-section h3 { color: var(--text-crimson-dark); }
.hero-section p, .hero-section span { color: var(--text-on-white-secondary); }
.hero-section .btn { color: #fff; }

/* ================================================================
   CARDS — White background, DARK TEXT
   ================================================================ */
.card, .content-card, .product-card {
    background: var(--bg-white);
    border: 1px solid var(--border-crimson);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-on-white);
}
.card::before {
    content:""; position:absolute; left:0; right:0; top:0; height:1px;
    background: linear-gradient(90deg, transparent, rgba(193,18,31,.25), transparent);
}
.card-header {
    background: var(--brand-gradient-light);
    border-bottom: 1px solid var(--border-crimson);
    padding: 18px 22px; font-weight:700; color: var(--text-crimson-dark);
}
.card-body { padding: 22px; }
.card-footer {
    border-top: 1px solid var(--border-crimson);
    background: var(--bg-off-white);
    padding: 16px 22px;
}

/* ===== CONTENT CARDS ===== */
.content-card {
    background: var(--bg-white);
    border: 1px solid var(--border-crimson);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 24px; position:relative; overflow:hidden;
    color: var(--text-on-white);
}
.content-card::before {
    content:""; position:absolute; left:0; right:0; top:0; height:1px;
    background: linear-gradient(90deg, transparent, rgba(193,18,31,.22), transparent);
}

/* ===== WELCOME BANNER ===== */
.market-welcome-banner {
    background: var(--brand-gradient);
    border: none;
    border-radius: 24px;
    box-shadow: var(--shadow-crimson-lg);
    text-align:center; padding: 28px 24px;
    color: #fff;
}
.market-welcome-title {
    font-weight:900; letter-spacing:-.2px;
    color: #fff;
}
.market-welcome-subtitle {
    color: rgba(255,255,255,.85);
    font-weight: 500;
}

/* ===== CATEGORY CARDS ===== */
.market-category-card {
    background: var(--bg-white);
    border: 1px solid var(--border-crimson);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .2s ease, box-shadow .2s ease;
    color: var(--text-on-white);
}
.market-category-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--crimson); }
.market-category-icon { font-size: 2rem; }
.market-category-name { font-weight:700; color: var(--text-crimson-dark); }

/* ================================================================
   BUTTONS — High contrast, readable
   ================================================================ */
.btn {
    min-height:44px; min-width:44px; padding:12px 18px;
    border:none; border-radius:999px; font-weight:700; cursor:pointer;
    transition: all .2s ease; display:inline-flex; align-items:center; justify-content:center; gap:8px;
    color: #fff;
}
.btn-primary { background: var(--brand-gradient); box-shadow:0 10px 24px rgba(139,0,0,.25); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 14px 28px rgba(139,0,0,.30); }

.btn-secondary {
    background: var(--bg-white); color: var(--text-crimson);
    border:1.5px solid var(--border-crimson-strong); box-shadow:var(--shadow-sm);
}
.btn-secondary:hover { background: var(--bg-light-crimson); border-color: var(--crimson-dark); }

.btn-success { background: #C1121F; color: #fff; border-radius: 999px; }
.btn-success:hover { background: #780000; }
.btn-warning { background: #C1121F; color: #fff; border-radius: 999px; }
.btn-warning:hover { background: #780000; }

.btn-danger { background: var(--crimson); color: #fff; border-radius: 999px; }
.btn-danger:hover { background: var(--crimson-dark); }

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--border-crimson-strong);
    color: var(--text-crimson);
    border-radius: 999px;
}
.btn-outline:hover { background: var(--bg-crimson); color: #fff; }

.btn-brand {
    background: var(--brand-gradient);
    color: #fff;
    font-weight: 700;
    box-shadow: var(--shadow-crimson);
    border-radius: 999px;
}
.btn-brand:hover { box-shadow: var(--shadow-crimson-lg); transform: translateY(-3px); }

/* ================================================================
   FORMS — White bg, Crimson border, DARK TEXT
   ================================================================ */
.form-group { margin-bottom: 1.25rem; }

.form-label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 700;
    font-size: var(--font-sm);
    color: var(--text-on-white);
    letter-spacing: 0.025em;
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: var(--font-base);
    font-weight: 500;
    line-height: 1.5;
    border: 2px solid var(--border-crimson);
    border-radius: var(--radius-lg);
    transition: all 0.25s ease;
    background-color: var(--bg-white);
    color: var(--text-on-white);
    box-shadow: var(--shadow-xs);
    outline: none;
}

.form-control:focus {
    border-color: var(--crimson);
    box-shadow: 0 0 0 4px rgba(193,18,31,0.15), var(--shadow-sm);
}

.form-control:hover:not(:focus) { border-color: var(--crimson-dark); }

select.form-control {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23C1121F' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 1rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 3rem;
}

textarea.form-control { min-height: 120px; resize: vertical; }

/* Form Validation */
.form-control.is-valid { border-color: #10B981; box-shadow: 0 0 0 4px rgba(16,185,129,0.15); }
.form-control.is-invalid { border-color: var(--crimson); box-shadow: 0 0 0 4px rgba(193,18,31,0.15); }

/* Search Bar — Pill shape, Crimson border, Crimson search icon */
.search-bar {
    display: flex;
    align-items: center;
    background: var(--bg-white);
    border: 2px solid var(--border-crimson);
    border-radius: var(--radius-pill);
    padding: 0.5rem 0.75rem 0.5rem 1.25rem;
    transition: all 0.25s ease;
    box-shadow: var(--shadow-xs);
}
.search-bar:focus-within { border-color: var(--crimson); box-shadow: 0 0 0 4px rgba(193,18,31,0.12); }
.search-bar input { flex: 1; border: none; outline: none; font-size: var(--font-base); background: transparent; color: var(--text-on-white); }
.search-bar .search-icon { color: var(--text-crimson); font-size: 1.1rem; margin-right: 8px; }
.search-bar .search-btn {
    background: var(--brand-gradient);
    color: var(--text-white);
    border: none;
    border-radius: var(--radius-pill);
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.search-bar .search-btn:hover { box-shadow: var(--shadow-crimson); }

/* Form container */
.form-container {
    background: var(--bg-white);
    padding: 2rem;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-crimson);
    max-width: 500px;
    margin: 0 auto;
}

/* ================================================================
   FLASH MESSAGES
   ================================================================ */
.flash-messages { margin-bottom: var(--spacing-xl); }

.alert {
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-md);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    position: relative;
    box-shadow: var(--shadow-sm);
    font-weight: 600;
    animation: fadeSlideDown 0.35s ease-out;
}
.alert-success { background: #DCFCE7; color: #065f46 !important; border: 1px solid #22C55E; }
.alert-error { background: var(--bg-light-crimson); color: var(--text-crimson-dark) !important; border: 1px solid var(--crimson); }
.alert-warning { background: #FEF2F2; color: #C1121F !important; border: 1px solid #C1121F; }
.alert-info { background: var(--brand-gradient-light); color: var(--text-crimson-dark) !important; border: 1px solid var(--crimson); }
.alert-close { position: absolute; right: 1rem; background: none; border: none; font-size: 1.2rem; cursor: pointer; opacity: 0.6; }

/* ================================================================
   BADGES
   ================================================================ */
.badge, .badge-count, .notification-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--crimson);
    color: var(--text-white);
    border-radius: var(--radius-pill);
    padding: 2px 8px;
    font-size: 0.7rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    animation: badgePulse 2s ease-in-out infinite;
}

/* ================================================================
   FOOTER — Modern crimson gradient, WHITE TEXT
   ================================================================ */
.main-footer {
    position:relative;
    background: linear-gradient(135deg, #C1121F 0%, #8B0000 100%);
    color: var(--text-on-red);
    border-top: 1px solid rgba(255,255,255,.10);
}
.main-footer::before {
    content:""; position:absolute; left:0; right:0; top:0; height:2px;
    background: linear-gradient(90deg, #FF4D5A, #C1121F 40%, #FF4D5A);
    background-size:200% 100%; animation:shimmerBar 2.8s linear infinite;
}
.footer-section h4 {
    margin-bottom: 1rem;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 700;
}
.footer-section ul { list-style: none; }
.footer-section ul li { margin-bottom: 0.5rem; }
.footer-section a { color: rgba(255,255,255,.9); text-decoration:none; font-weight:500; transition:color .3s; }
.footer-section a:hover { color:#fff; text-decoration:underline; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,.08);
    padding: 1.25rem 20px;
    text-align: center;
    color: rgba(255,255,255,.75);
}

/* ================================================================
   GLOBAL RED BODY + READABLE RED/WHITE DESIGN
   ================================================================ */
body, html {
    background: linear-gradient(135deg, #FF4D5A 0%, #C1121F 45%, #4a0008 100%) !important;
    background-attachment: fixed !important;
    color: var(--text-on-red) !important;
    min-height: 100vh !important;
}

/* Transparent page wrappers so body red shows */
.main-content,.container,.hero-section,.section,.page-wrapper,.main-wrapper,.content-wrapper,.site-content,.site-main {
    background: transparent !important;
}

/* Modern white cards — DARK text for readability */
.card,.content-card,.product-card,.panel,.modal-content,.form-section,
.cl-wrap,.lc-page,.ai-container,.sp-page,.sp-hero,.sp-card,.sp-activity-card,.sp-kb-section,
.nf-page,.cr-wrap,.cr-container,.nf-sheet,.nf-confirm-modal,.market-welcome-banner,.market-category-card {
    background: var(--bg-white) !important;
    border: 1px solid var(--border-crimson) !important;
    color: var(--text-on-white) !important;
    backdrop-filter: blur(6px);
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
}

/* Links on white cards — crimson for visibility */
.card a,.content-card a,.product-card a,.panel a { color: var(--text-crimson) !important; }
.card a:hover,.content-card a:hover,.product-card a:hover { color: var(--text-crimson-dark) !important; }

/* Headings on white cards — dark crimson */
.card h1,.card h2,.card h3,.card h4,.card h5,
.content-card h1,.content-card h2,.content-card h3,
.product-card h3,.sp-card h3,.sp-activity-card h3 { color: var(--text-crimson-dark) !important; }

/* Paragraphs on white cards — readable gray */
.card p,.content-card p,.product-card p { color: var(--text-on-white-secondary) !important; }

/* Header/footer = crimson with WHITE text */
.main-header,.marketplace-header,.cl-header,.lc-header,.ai-header,.sp-hero,.navbar,header,footer,.main-footer,.marketplace-footer,.footer,.mobile-bottom-nav {
    background: linear-gradient(135deg, #FF4D5A 0%, #C1121F 50%, #8B0000 100%) !important;
    color: var(--text-on-red) !important;
}

/* Tables — white bg, dark text */
table,.table,.data-table { background: var(--bg-white) !important; color: var(--text-on-white) !important; border:1px solid var(--border-crimson) !important; border-radius:16px; overflow:hidden; }
th { background: var(--bg-light-crimson) !important; color: var(--text-crimson-dark) !important; }
th,td { border-bottom:1px solid var(--border-crimson) !important; color: var(--text-on-white) !important; }

/* Inputs — white bg, dark text, crimson border */
input, textarea, select {
    background: var(--bg-white) !important;
    color: var(--text-on-white) !important;
    border: 1.5px solid var(--border-crimson) !important;
    border-radius: 16px !important;
    box-shadow: inset 0 1px 2px rgba(0,0,0,.04);
}
input::placeholder, textarea::placeholder { color: var(--text-on-white-muted) !important; }
input:focus, textarea:focus, select:focus {
    border-color: var(--crimson) !important;
    box-shadow: 0 0 0 4px rgba(193,18,31,.10) !important;
    background: var(--bg-white) !important;
    outline: none !important;
}

/* Action buttons / links that need explicit colors in light mode */
.so-btn, .od-btn, .sd-btn, .dm-btn, .mp-item {
    color: #fff !important;
}
.so-btn-outline, .od-btn-outline, .dm-btn-outline {
    color: #780000 !important;
}

/* Labels — always readable */
label, .form-label, .label {
    color: var(--text-on-white) !important;
    font-weight: 600 !important;
}

/* Text on red backgrounds — always white */
.header-text, .nav-text, .footer-text, .hero-overlay-text {
    color: var(--text-on-red) !important;
}

/* Mobile wrappers */
@media (max-width: 768px) {
    .main-content,.container,.card,.content-card { background: transparent !important; }
    .hero-section { padding: 24px 18px; }
}

/* Staggered entrance animation */
.main-content > .container > * { animation: fadeSlideUp .5s ease-out both; }
.main-content > .container > *:nth-child(1){ animation-delay:.05s; }
.main-content > .container > *:nth-child(2){ animation-delay:.10s; }
.main-content > .container > *:nth-child(3){ animation-delay:.15s; }
.main-content > .container > *:nth-child(4){ animation-delay:.20s; }
.main-content > .container > *:nth-child(5){ animation-delay:.25s; }
.main-content > .container > *:nth-child(6){ animation-delay:.30s; }

/* Bottom nav active pill */
.mobile-bottom-nav a.active {
    color: var(--text-on-red) !important;
    background: rgba(255,255,255,.22) !important;
}

/* Footer */
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08) !important; }

/* Native app overrides */
html.native-app .main-header, html.native-app .main-footer, html.native-app .mobile-bottom-nav { background:none !important; color:inherit !important; }

/* ================================================================
   CHAT / SUPPORT / NOTIFICATION SURFACES
   ================================================================ */
.cl-header, .lc-header, .ai-header, .sp-hero {
    background: linear-gradient(135deg, #FF4D5A 0%, #C1121F 50%, #8B0000 100%) !important;
    color: var(--text-on-red) !important;
}
.cl-header h1, .lc-header h2, .ai-header-info h3, .sp-hero h1 { color: var(--text-on-red) !important; }
.cl-header p, .ai-header-info p, .sp-hero p { color: var(--text-on-red-secondary) !important; }

.cl-search, .cl-tabs, .lc-input, .lc-actions, .ai-input-area, .nf-header {
    background: var(--bg-white) !important;
    border-color: var(--border-crimson) !important;
    color: var(--text-on-white) !important;
}
.cl-search-box input, .lc-textinput, .ai-input {
    background: var(--bg-white) !important;
    color: var(--text-on-white) !important;
    border-color: var(--border-crimson) !important;
}
.cl-search-box input::placeholder, .lc-textinput::placeholder, .ai-input::placeholder { color: var(--text-on-white-muted) !important; }
.cl-search-box input:focus, .lc-textinput:focus, .ai-input:focus {
    border-color: var(--crimson) !important;
    box-shadow: 0 0 0 3px rgba(193,18,31,.10) !important;
}

.cl-item, .lc-msg.system .lc-msg-bubble, .lc-msg.agent .lc-msg-bubble, .ai-msg-bot .ai-bubble, .sp-list-item, .nf-item {
    color: var(--text-on-white) !important;
}
.cl-item:hover, .cl-item.unread { background: var(--bg-light-crimson) !important; }
.cl-item.unread:hover { background: var(--bg-soft-crimson) !important; }

.cl-name, .lc-msg-sender, .sp-list-info strong, .sp-card h3, .sp-activity-card h3, .sp-kb-section h3, .nf-text strong {
    color: var(--text-crimson-dark) !important;
}
.cl-time, .cl-preview, .cl-product, .lc-msg-time, .sp-list-info span, .sp-kb-meta, .nf-time {
    color: var(--text-on-white-muted) !important;
}

.cl-online { background: var(--crimson) !important; border-color: var(--bg-white) !important; }
.cl-tab { color: var(--text-on-white-muted) !important; }
.cl-tab.active { color: var(--text-crimson) !important; }
.cl-tab .cl-badge { background: var(--crimson) !important; color: var(--text-white) !important; }

.cl-unread-badge, .nf-unread-dot { background: var(--crimson) !important; color: var(--text-white) !important; }
.cl-archive-btn:hover { color: var(--text-crimson) !important; }
.cl-unarchive-btn, .lc-send, .cr-call-btn, .nf-action-primary {
    background: var(--crimson) !important;
    color: var(--text-white) !important;
    border-color: var(--crimson) !important;
}
.cl-browse-btn, .cl-fab, .nf-confirm-btn-danger {
    background: var(--brand-gradient) !important;
    color: var(--text-white) !important;
}

.cl-empty h3, .nf-empty h3, .sp-view-all { color: var(--text-crimson-dark) !important; }
.cl-empty p, .nf-empty p { color: var(--text-on-white-secondary) !important; }
.cl-empty-icon, .nf-empty-icon { background: var(--bg-light-crimson) !important; color: var(--text-crimson) !important; }

.lc-msg.user .lc-msg-bubble, .cr-msg.sent .cr-bubble, .ai-msg-user .ai-bubble {
    background: var(--crimson) !important;
    color: var(--text-white) !important;
}
.lc-msg.system .lc-msg-bubble, .lc-msg.agent .lc-msg-bubble, .cr-msg.received .cr-bubble, .ai-msg-bot .ai-bubble, .nf-confirm-btn-cancel {
    background: var(--bg-white) !important;
    color: var(--text-on-white) !important;
    border: 1px solid var(--border-crimson) !important;
}

.cr-conv.active { background: var(--bg-light-crimson) !important; border-left-color: var(--crimson) !important; }
.cr-conv strong, .cr-user-info h5, .cr-back { color: var(--text-crimson-dark) !important; }

.sp-card-badge { background: var(--bg-light-crimson) !important; color: var(--text-crimson) !important; }
.sp-status-open, .sp-status-waiting { background: var(--bg-light-crimson) !important; color: var(--text-crimson-dark) !important; }
.sp-status-in_progress { background: var(--bg-light-crimson) !important; color: var(--text-crimson) !important; }
.sp-status-resolved { background: var(--bg-light-crimson) !important; color: var(--text-on-white) !important; }
.sp-status-closed, .sp-status-ended { background: var(--bg-light-crimson) !important; color: var(--text-on-white-muted) !important; }
.sp-status-active { background: var(--bg-light-crimson) !important; color: var(--text-on-white) !important; }

.nf-item.unread { background: var(--bg-light-crimson) !important; }
.nf-item:hover { background: var(--bg-soft-crimson) !important; }
.nf-type-badge.delivery, .nf-type-badge.order, .nf-type-badge.account, .nf-type-badge.follower, .nf-type-badge.general {
    background: var(--crimson) !important; color: var(--text-white) !important;
}
.nf-type-badge.payment, .nf-type-badge.livestream { background: var(--crimson-glow) !important; color: var(--text-white) !important; }
.nf-type-badge.referral, .nf-type-badge.product { background: var(--crimson-dark) !important; color: var(--text-white) !important; }
.nf-confirm-icon { background: var(--bg-light-crimson) !important; color: var(--text-crimson) !important; }
.nf-confirm-body h3 { color: var(--text-crimson) !important; }
.nf-confirm-btn-cancel { background: var(--bg-light-crimson) !important; color: var(--text-crimson) !important; }
.nf-confirm-btn-cancel:hover { background: var(--bg-soft-crimson) !important; }
.nf-sheet-avatar { background: var(--bg-white) !important; color: var(--text-crimson) !important; border-color: var(--border-crimson) !important; }
.nf-sheet-preview { color: var(--text-on-white) !important; }
.nf-sheet-action .nf-sheet-sub { color: var(--text-on-white-secondary) !important; }
.nf-sheet-icon { background: var(--bg-light-crimson) !important; color: var(--text-crimson) !important; }
.nf-sheet-action.danger { color: var(--text-crimson) !important; }
.nf-sheet-action.danger .nf-sheet-icon { background: var(--bg-light-crimson) !important; color: var(--text-crimson) !important; }
.nf-action-secondary { background: var(--bg-light-crimson) !important; color: var(--text-crimson) !important; }
.nf-action-secondary:hover { background: var(--bg-soft-crimson) !important; }
.nf-loader-dots span { background: var(--crimson) !important; }
.nf-confirm-modal { background: var(--bg-white) !important; }
.nf-sheet { background: var(--bg-white) !important; }
.nf-sheet-handle { background: var(--border-crimson) !important; }
.nf-sheet-header { border-bottom-color: var(--border-crimson) !important; }

/* ================================================================
   MOBILE BOTTOM NAV — Modern crimson
   ================================================================ */
.mobile-bottom-nav { display: none !important; }

@media (max-width: 768px) {
    .mobile-bottom-nav {
        display: flex !important;
        position: fixed !important;
        bottom: 0 !important;
        left: 0;
        right: 0;
        background: linear-gradient(135deg, rgba(193,18,31,.92), rgba(80,6,12,.92));
        backdrop-filter: saturate(140%) blur(14px);
        -webkit-backdrop-filter: saturate(140%) blur(14px);
        border-top: 1px solid rgba(255,255,255,.18);
        padding: 4px 0;
        padding-bottom: max(4px, var(--safe-area-bottom));
        align-items: stretch;
        z-index: 99999;
        box-shadow: 0 -2px 10px rgba(193,18,31,.25);
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        flex-wrap: nowrap;
        justify-content: space-around;
    }
    .mobile-bottom-nav::-webkit-scrollbar { display: none; }
    
    .mobile-bottom-nav a {
        flex: 0 0 auto;
        min-width: 60px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 6px 8px;
        color: rgba(255,255,255,.85);
        text-decoration: none;
        font-size: 0.65em;
        font-weight: 500;
        transition: all 0.2s;
        white-space: nowrap;
        position: relative;
        border-radius: 12px;
    }
    .mobile-bottom-nav a.active, .mobile-bottom-nav a:hover { 
        color: var(--text-on-red); 
        background: rgba(255,255,255,.18);
        border-radius: 12px;
    }
    .mobile-bottom-nav a i { font-size: 1.3em; margin-bottom: 2px; color: rgba(255,255,255,.85); }
    .mobile-bottom-nav a.active i { color: var(--text-on-red); }
    .mobile-bottom-nav a .mobile-nav-icon { display: inline-flex; align-items: center; justify-content: center; font-size: 1.3em; line-height: 1; margin-bottom: 2px; min-height: 1.1em; }
    .mobile-bottom-nav a .mobile-icon-svg { width: 1.15em; height: 1.15em; display: block; }
}

/* Header icon buttons (globe/theme/cart/notifications) */
.nav-menu-icons { display: flex; align-items: center; gap: 6px; }
.nav-menu-icons .nav-item { margin: 0; }
.nav-menu-icons .nav-link {
    width: 36px; height: 36px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    font-size: 1.05rem;
    padding: 0;
    transition: background .15s, border-color .15s;
    position: relative;
}
.nav-menu-icons .nav-link:hover {
    background: rgba(255,255,255,.22);
    border-color: rgba(255,255,255,.45);
    transform: none;
    box-shadow: none;
}
.nav-menu-icons .nav-link .nav-text { display: none !important; }
.nav-menu-icons .nav-link .badge-count {
    top: -5px; right: -6px;
    min-width: 14px; height: 14px;
    font-size: 9px; padding: 0 3px;
}

/* Centered cart button in desktop header */
.nav-cart-center {
    width: 44px; height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 22px;
    background: #FFFFFF;
    border: 2px solid #FFFFFF;
    color: #C1121F;
    font-size: 1.25rem;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(0,0,0,.25);
    flex-shrink: 0;
}
.nav-cart-center:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,.35);
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: #C1121F;
}
.nav-cart-center .badge-count {
    top: -7px; right: -8px;
    min-width: 18px; height: 18px;
    font-size: 11px; padding: 0 4px;
}

/* Language selector dropdown */
#headerLanguageSelector {
    width: 340px;
    max-height: 520px;
    overflow-y: auto;
    padding: 0;
}
#headerLanguageSelector select,
#headerLanguageSelector .currency-item,
#headerLanguageSelector .language-item {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.95rem;
}
#headerLanguageSelector .currency-group-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
    text-transform: uppercase;
    padding: 8px 12px 4px;
    letter-spacing: 0.05em;
}
#headerLanguageSelector .load-more {
    text-align: center;
    color: #C1121F;
    cursor: pointer;
    font-weight: 600;
    padding: 10px;
    border-top: 1px solid #eee;
}
#headerLanguageSelector .load-more:hover {
    background: #FEF2F2;
}
#headerLangList .lang-item:hover {
    background: #f9fafb !important;
}
#langSearchInput:focus {
    border-color: #C1121F !important;
    box-shadow: 0 0 0 3px rgba(193,18,31,.12) !important;
}

/* FA emoji fallback */
i.fa-fallback, .fa-fallback {
    font-style: normal !important;
    font-family: inherit !important;
    -moz-osx-font-smoothing: auto !important;
    -webkit-font-smoothing: auto !important;
}
i.fa-fallback::before, .fa-fallback::before {
    content: attr(data-emoji) !important;
    font-family: inherit !important;
    font-weight: normal !important;
    font-style: normal !important;
}
i.fa-fallback.fa-spin::before { animation: none !important; }

/* Native app pwa overrides */
html.native-app main,
html.native-app .main-content,
html.native-app .container { padding-bottom: 0 !important; }

/* Desktop header menu button — direct link to menu page */
.nav-menu-toggle {
    display: none !important;
}

/* Always hide in native mobile app */
html.native-app .nav-menu-toggle {
    display: none !important;
}

/* Explicit mobile hide — multiple properties to prevent any visibility */
@media (max-width: 768px) {
    .nav-menu-toggle {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        max-height: 0 !important;
        max-width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* Show only on desktop browsers */
@media (min-width: 769px) {
    html:not(.native-app) .nav-menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: auto !important;
        min-width: 70px;
        height: 40px;
        border-radius: 10px;
        background: #FFFFFF !important;
        border: 2px solid #C1121F !important;
        color: #C1121F !important;
        font-size: 1rem;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
        margin-right: 8px;
        flex-shrink: 0;
        box-shadow: 0 2px 8px rgba(0,0,0,0.12) !important;
        padding: 0 12px;
        gap: 6px;
        transition: all 0.2s ease;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    html:not(.native-app) .nav-menu-toggle:hover {
        background: #FFF5F5 !important;
        border-color: #8B0000 !important;
        color: #8B0000 !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important;
    }
}

/* Desktop nav dropdown menu */
#desktopNavMenu.active {
    display: block;
}

/* ============================================================
   TEXT VISIBILITY SAFETY NET — LIGHT + DARK MODE
   Ensures readable contrast even when inline styles are used.
   ============================================================ */

/* Light mode defaults */
html:not(.dark-mode) body,
html:not(.dark-mode) .container,
html:not(.dark-mode) .main-content,
html:not(.dark-mode) .marketplace-content,
html:not(.dark-mode) .card,
html:not(.dark-mode) .product-card,
html:not(.dark-mode) .panel,
html:not(.dark-mode) .modal-content,
html:not(.dark-mode) .form-section,
html:not(.dark-mode) .form-container,
html:not(.dark-mode) .dropdown-menu,
html:not(.dark-mode) .table,
html:not(.dark-mode) .table-responsive,
html:not(.dark-mode) .live-market-preview,
html:not(.dark-mode) .featured-section,
html:not(.dark-mode) .sponsored-section,
html:not(.dark-mode) .live-card,
html:not(.dark-mode) .sponsored-card,
html:not(.dark-mode) .stream-card,
html:not(.dark-mode) .livestream-card {
    color: var(--text-on-white, #1e1e24) !important;
}

html:not(.dark-mode) .card h1,
html:not(.dark-mode) .card h2,
html:not(.dark-mode) .card h3,
html:not(.dark-mode) .card h4,
html:not(.dark-mode) .card h5,
html:not(.dark-mode) .product-card h3,
html:not(.dark-mode) .product-card h4,
html:not(.dark-mode) .section-header h2,
html:not(.dark-mode) .section-header p,
html:not(.dark-mode) .section-title,
html:not(.dark-mode) .hero-title,
html:not(.dark-mode) .hero-subtitle,
html:not(.dark-mode) .live-body h3,
html:not(.dark-mode) .live-body p,
html:not(.dark-mode) .sponsored-name,
html:not(.dark-mode) .sponsored-price,
html:not(.dark-mode) .sponsored-seller,
html:not(.dark-mode) .product-name,
html:not(.dark-mode) .product-price,
html:not(.dark-mode) .product-seller,
html:not(.dark-mode) h1, html:not(.dark-mode) h2, html:not(.dark-mode) h3,
html:not(.dark-mode) h4, html:not(.dark-mode) h5, html:not(.dark-mode) h6 {
    color: var(--text-on-white, #1e1e24) !important;
}

html:not(.dark-mode) .card p,
html:not(.dark-mode) .product-card p,
html:not(.dark-mode) .panel p,
html:not(.dark-mode) .form-section p,
html:not(.dark-mode) .form-text,
html:not(.dark-mode) .text-muted,
html:not(.dark-mode) .text-secondary,
html:not(.dark-mode) .help-block,
html:not(.dark-mode) .live-body p,
html:not(.dark-mode) .sponsored-body,
html:not(.dark-mode) .product-info,
html:not(.dark-mode) label,
html:not(.dark-mode) .form-label {
    color: var(--text-on-white-secondary, #4b5563) !important;
}

html:not(.dark-mode) input,
html:not(.dark-mode) textarea,
html:not(.dark-mode) select {
    color: var(--text-on-white, #1e1e24) !important;
}

html:not(.dark-mode) input::placeholder,
html:not(.dark-mode) textarea::placeholder {
    color: var(--text-on-white-muted, #6b7280) !important;
}

html:not(.dark-mode) a {
    color: var(--text-crimson, #C1121F) !important;
}

html:not(.dark-mode) .btn-link,
html:not(.dark-mode) .link-text {
    color: var(--text-crimson, #C1121F) !important;
}

/* Dark mode visibility overrides */
html.dark-mode body,
html.dark-mode .container,
html.dark-mode .main-content,
html.dark-mode .marketplace-content,
html.dark-mode .card,
html.dark-mode .product-card,
html.dark-mode .panel,
html.dark-mode .modal-content,
html.dark-mode .form-section,
html.dark-mode .form-container,
html.dark-mode .dropdown-menu,
html.dark-mode .table,
html.dark-mode .table-responsive {
    color: var(--text-on-white, #F1F5F9) !important;
}

html.dark-mode .card h1,
html.dark-mode .card h2,
html.dark-mode .card h3,
html.dark-mode .card h4,
html.dark-mode .card h5,
html.dark-mode .product-card h3,
html.dark-mode .product-card h4,
html.dark-mode .section-header h2,
html.dark-mode .section-title,
html.dark-mode .hero-title,
html.dark-mode .hero-subtitle,
html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
html.dark-mode h4, html.dark-mode h5, html.dark-mode h6 {
    color: var(--text-on-white, #F1F5F9) !important;
}

html.dark-mode .card p,
html.dark-mode .product-card p,
html.dark-mode .panel p,
html.dark-mode .form-section p,
html.dark-mode .form-text,
html.dark-mode .text-muted,
html.dark-mode .text-secondary,
html.dark-mode .help-block,
html.dark-mode label,
html.dark-mode .form-label {
    color: var(--text-on-white-secondary, #CBD5E1) !important;
}

html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
    color: var(--text-on-white, #F1F5F9) !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: var(--text-on-white-muted, #94A3B8) !important;
}

html.dark-mode a {
    color: var(--text-crimson, #FF6B6B) !important;
}

html.dark-mode .btn-link,
html.dark-mode .link-text {
    color: var(--text-crimson, #FF6B6B) !important;
}

/* Ensure inline-styled text also switches in dark mode */
html.dark-mode [style*="color: #fff"],
html.dark-mode [style*="color:#fff"],
html.dark-mode [style*="color: #FFFFFF"],
html.dark-mode [style*="color:#FFFFFF"],
html.dark-mode [style*="color: white"],
html.dark-mode [style*="color:white"] {
    color: var(--text-on-white, #F1F5F9) !important;
}

html.dark-mode [style*="color: #000"],
html.dark-mode [style*="color:#000"],
html.dark-mode [style*="color: black"],
html.dark-mode [style*="color:black"],
html.dark-mode [style*="color: #1e1e24"],
html.dark-mode [style*="color:#1e1e24"] {
    color: var(--text-on-white, #F1F5F9) !important;
}

/* Inline hero-title / hero-subtitle overrides for theme switching */
.hero-title,
.hero-subtitle {
    color: var(--text-on-white, #1e1e24) !important;
}

html.dark-mode .hero-title,
html.dark-mode .hero-subtitle {
    color: var(--text-on-white, #F1F5F9) !important;
}

/* ============================================================
   WHITE CONTAINER TEXT FIX — LIGHT MODE
   Force readable text on white/light containers.
   ============================================================ */

/* Ensure text is dark on common white containers */
html:not(.dark-mode) .hero-text-card,
html:not(.dark-mode) .hero-text-card *,
html:not(.dark-mode) .card,
html:not(.dark-mode) .card *,
html:not(.dark-mode) .product-card,
html:not(.dark-mode) .product-card *,
html:not(.dark-mode) .panel,
html:not(.dark-mode) .panel *,
html:not(.dark-mode) .modal-content,
html:not(.dark-mode) .modal-content *,
html:not(.dark-mode) .form-section,
html:not(.dark-mode) .form-section *,
html:not(.dark-mode) .form-container,
html:not(.dark-mode) .form-container *,
html:not(.dark-mode) .dropdown-menu,
html:not(.dark-mode) .dropdown-menu *,
html:not(.dark-mode) .table,
html:not(.dark-mode) .table *,
html:not(.dark-mode) .table-responsive,
html:not(.dark-mode) .table-responsive *,
html:not(.dark-mode) .content-card,
html:not(.dark-mode) .content-card *,
html:not(.dark-mode) .sponsored-card,
html:not(.dark-mode) .sponsored-card *,
html:not(.dark-mode) .live-card,
html:not(.dark-mode) .live-card *,
html:not(.dark-mode) .stream-card,
html:not(.dark-mode) .stream-card *,
html:not(.dark-mode) .livestream-card,
html:not(.dark-mode) .livestream-card * {
    color: var(--text-on-white, #1e1e24) !important;
}

/* Override inline white text inside white containers in light mode */
html:not(.dark-mode) .hero-text-card [style*="color: #fff"],
html:not(.dark-mode) .hero-text-card [style*="color:#fff"],
html:not(.dark-mode) .hero-text-card [style*="color: #FFF"],
html:not(.dark-mode) .hero-text-card [style*="color:#FFF"],
html:not(.dark-mode) .hero-text-card [style*="color: #FFFFFF"],
html:not(.dark-mode) .hero-text-card [style*="color:#FFFFFF"],
html:not(.dark-mode) .hero-text-card [style*="color: white"],
html:not(.dark-mode) .hero-text-card [style*="color:white"] {
    color: var(--text-on-white, #1e1e24) !important;
}

html:not(.dark-mode) .card [style*="color: #fff"],
html:not(.dark-mode) .card [style*="color:#fff"],
html:not(.dark-mode) .card [style*="color: #FFF"],
html:not(.dark-mode) .card [style*="color:#FFF"],
html:not(.dark-mode) .card [style*="color: #FFFFFF"],
html:not(.dark-mode) .card [style*="color:#FFFFFF"],
html:not(.dark-mode) .card [style*="color: white"],
html:not(.dark-mode) .card [style*="color:white"] {
    color: var(--text-on-white, #1e1e24) !important;
}

html:not(.dark-mode) .product-card [style*="color: #fff"],
html:not(.dark-mode) .product-card [style*="color:#fff"],
html:not(.dark-mode) .product-card [style*="color: #FFF"],
html:not(.dark-mode) .product-card [style*="color:#FFF"],
html:not(.dark-mode) .product-card [style*="color: #FFFFFF"],
html:not(.dark-mode) .product-card [style*="color:#FFFFFF"],
html:not(.dark-mode) .product-card [style*="color: white"],
html:not(.dark-mode) .product-card [style*="color:white"] {
    color: var(--text-on-white, #1e1e24) !important;
}

/* Force dark text on any element with white background in light mode */
html:not(.dark-mode) [style*="background: #fff"],
html:not(.dark-mode) [style*="background:#fff"],
html:not(.dark-mode) [style*="background: #FFF"],
html:not(.dark-mode) [style*="background:#FFF"],
html:not(.dark-mode) [style*="background: #FFFFFF"],
html:not(.dark-mode) [style*="background:#FFFFFF"],
html:not(.dark-mode) [style*="background: white"],
html:not(.dark-mode) [style*="background:white"],
html:not(.dark-mode) [style*="background-color: #FFFFFF"],
html:not(.dark-mode) [style*="background-color:#FFFFFF"],
html:not(.dark-mode) [style*="background-color: white"],
html:not(.dark-mode) [style*="background-color:white"] {
    color: var(--text-on-white, #1e1e24) !important;
}

/* Specific fix for hero text card - ensure all text is dark in light mode */
html:not(.dark-mode) .hero-text-card h1,
html:not(.dark-mode) .hero-text-card h2,
html:not(.dark-mode) .hero-text-card h3,
html:not(.dark-mode) .hero-text-card p,
html:not(.dark-mode) .hero-text-card span,
html:not(.dark-mode) .hero-text-card div {
    color: var(--text-on-white, #1e1e24) !important;
}

/* Fix for any remaining white text on white backgrounds */
html:not(.dark-mode) .text-white {
    color: var(--text-on-white, #1e1e24) !important;
}

html:not(.dark-mode) [class*="text-white"] {
    color: var(--text-on-white, #1e1e24) !important;
}

/* Ensure buttons in white cards have dark text in light mode */
html:not(.dark-mode) .card .btn,
html:not(.dark-mode) .product-card .btn,
html:not(.dark-mode) .panel .btn {
    color: var(--text-on-white, #1e1e24) !important;
}

/* Links in white cards should be crimson, not white */
html:not(.dark-mode) .card a,
html:not(.dark-mode) .product-card a,
html:not(.dark-mode) .panel a,
html:not(.dark-mode) .content-card a {
    color: var(--text-crimson, #C1121F) !important;
}