/* ============================================================
   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 — White on red, Dark on white */
    --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;
    
    /* 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;
}

/* ===== 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-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;
}

.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; border: 1px solid #22C55E; }
.alert-error { background: var(--bg-light-crimson); color: var(--text-crimson-dark); border: 1px solid var(--crimson); }
.alert-warning { background: #FEF2F2; color: #C1121F; border: 1px solid #C1121F; }
.alert-info { background: var(--brand-gradient-light); color: var(--text-crimson-dark); 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;
}

/* 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; }