/* ===================================================================
   LEAVES THEME SYSTEM — Dark/Light Mode
   Load AFTER style.css to override with theme-aware variables.
   =================================================================== */

/* ── Extended Light-Mode Tokens ── */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f5f7f5;
    --bg-card: #ffffff;
    --bg-input: #ffffff;
    --text-primary: #232f3e;
    --text-secondary: #546b57;
    --text-muted: #888888;
    --border-color: rgba(0, 0, 0, 0.08);
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    --nav-bg: #154d19;
    --section-alt-bg: #f0f4f0;
    --modal-bg: #ffffff;
    --mobile-nav-bg: #ffffff;
    --sidebar-bg-theme: #141b22;
}

/* ── Dark Mode Overrides ── */
body.dark-mode {
    --primary-color: #4caf50;
    --primary-color-rgb: 76, 175, 80;
    --accent-color: #388e3c;
    --highlight-color: #81c784;
    --light-green: #0d1a0d;
    --dark-grey: #e8f5e9;
    --light-grey: #0a0a0a;
    --shadow: 0 4px 12px rgba(76, 175, 80, 0.12);
    --header-grad-1: #0a1a0a;
    --header-grad-2: #1a3a1a;
    --bg-primary: #0a0a0a;
    --bg-secondary: #111311;
    --bg-card: #161816;
    --bg-input: #1a1e1a;
    --text-primary: #e0e8e0;
    --text-secondary: #a5d6a7;
    --text-muted: #6b7c6d;
    --border-color: rgba(255, 255, 255, 0.08);
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    --nav-bg: #0d150d;
    --section-alt-bg: #0d0f0d;
    --modal-bg: #161816;
    --mobile-nav-bg: #111311;
    --sidebar-bg-theme: #0a0d0a;
}

/* ── BODY ── */
body {
    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
}

/* ══════════════════════════════════════════════
   THEME TOGGLE SWITCH — Clean Pill Slider
   ══════════════════════════════════════════════ */
.theme-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}

.theme-switch-track {
    position: relative;
    width: 52px;
    height: 28px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.08));
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.theme-switch-track::before {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: #ffffff;
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

/* Dark mode active state */
body.dark-mode .theme-switch-track {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.3), rgba(56, 142, 60, 0.15));
    border-color: rgba(76, 175, 80, 0.5);
}

body.dark-mode .theme-switch-track::before {
    transform: translateX(24px);
    background: #4caf50;
    box-shadow: 0 0 10px rgba(76, 175, 80, 0.6), 0 2px 4px rgba(0, 0, 0, 0.3);
}

.theme-switch-track:hover {
    border-color: rgba(255, 255, 255, 0.5);
    transform: scale(1.08);
}

body.dark-mode .theme-switch-track:hover {
    border-color: rgba(76, 175, 80, 0.7);
}

/* ══════════════════════════════════════════════
   DARK MODE — COMPONENT OVERRIDES
   ══════════════════════════════════════════════ */

/* ── HEADER ── */
body.dark-mode .leaves-premium-header {
    background: linear-gradient(135deg, var(--header-grad-1), var(--header-grad-2)) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}

body.dark-mode .leaves-premium-header .header-search-form {
    background: var(--bg-input) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}

body.dark-mode .leaves-premium-header .header-search-input {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .leaves-premium-header .header-search-input::placeholder {
    color: var(--text-muted) !important;
}

body.dark-mode .leaves-premium-header .header-apk-btn {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
}

body.dark-mode .leaves-main-nav {
    background: var(--nav-bg) !important;
}

body.dark-mode .top-promo {
    background: linear-gradient(90deg, #1a3a1a, #0d250d) !important;
}

/* ── CATEGORIES ROW ── */
body.dark-mode .categories-circle-row {
    background: var(--bg-primary) !important;
}

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

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

body.dark-mode .category-circle img {
    background: var(--bg-card) !important;
    border-color: var(--primary-color) !important;
}

/* "Shop by Category" heading */
body.dark-mode .top-categories h2 {
    color: var(--text-primary) !important;
}

body.dark-mode .top-categories {
    background: var(--bg-primary) !important;
}

/* ── ALL SECTIONS WITH INLINE BACKGROUNDS ── */
body.dark-mode section {
    background-color: var(--bg-primary) !important;
}

body.dark-mode section[style*="background"] {
    background: var(--bg-primary) !important;
}

/* Keep the hero/promo/dark showcase sections dark */
body.dark-mode #home {
    background: linear-gradient(120deg, #050d10, #0a1a14, #0d2520) !important;
}

body.dark-mode #promoBanner {
    /* Already dark — keep as-is */
}

body.dark-mode #promoBanner>img+div {
    /* gradient overlay — keep */
}

/* ── ALL INLINE HEADINGS ── */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4 {
    color: var(--text-primary) !important;
}

/* Fix the gradient text headings — keep them green */
body.dark-mode [style*="-webkit-text-fill-color:transparent"] {
    -webkit-text-fill-color: transparent !important;
}

body.dark-mode [style*="webkit-background-clip:text"] span {
    -webkit-text-fill-color: transparent !important;
}

/* ── ALL PARAGRAPH + SUBTITLE TEXT ── */
body.dark-mode p {
    color: var(--text-secondary) !important;
}

/* Keep white text in dark showcase sections */
body.dark-mode #home p {
    color: rgba(255, 255, 255, 0.75) !important;
}

body.dark-mode #promoBanner p {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* ── PRODUCT CARDS — Premium Redesign Dark Mode ── */
body.dark-mode .product-card {
    background: var(--bg-card) !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.35) !important;
    border: 1px solid var(--border-color) !important;
}

body.dark-mode .product-card:hover {
    box-shadow: 0 18px 40px rgba(76, 175, 80, 0.12), 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

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

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

body.dark-mode .pc-title-link:hover .pc-name {
    color: var(--primary-color) !important;
}

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

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

body.dark-mode .pc-discount {
    color: #4caf50 !important;
}

body.dark-mode .pc-delivery {
    color: #4caf50 !important;
}

body.dark-mode .pc-stock-alert {
    color: #ef5350 !important;
}

body.dark-mode .pc-rating-num {
    background: rgba(76, 175, 80, 0.15) !important;
    color: var(--text-primary) !important;
}

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

body.dark-mode .pc-action-btn {
    background: var(--bg-card) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
}

body.dark-mode .pc-action-btn:hover {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: transparent !important;
}

body.dark-mode .pc-action-btn.wishlist-btn:hover {
    background: #e53935 !important;
}

body.dark-mode .pc-quick-view {
    background: rgba(22, 24, 22, 0.92) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .pc-cart-btn,
body.dark-mode .add-to-cart-btn {
    background: linear-gradient(135deg, #388e3c, #2e7d32) !important;
    box-shadow: 0 4px 14px rgba(76, 175, 80, 0.2) !important;
}

body.dark-mode .pc-cart-btn:hover,
body.dark-mode .add-to-cart-btn:hover {
    background: linear-gradient(135deg, #43a047, #388e3c) !important;
    box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3) !important;
}

body.dark-mode .pc-cart-btn:disabled,
body.dark-mode .add-to-cart-btn:disabled {
    background: #2a2a2a !important;
    color: var(--text-muted) !important;
}

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

/* Keep badges vivid in dark mode */
body.dark-mode .pc-badge--best {
    background: linear-gradient(135deg, #e64a19, #f57c00) !important;
}

body.dark-mode .pc-badge--top {
    background: linear-gradient(135deg, #5c6bc0, #7b1fa2) !important;
}

body.dark-mode .pc-badge--deal {
    background: linear-gradient(135deg, #c62828, #e57373) !important;
}

body.dark-mode .pc-badge--oos {
    background: #424242 !important;
}

/* ── "See All" LINK BUTTONS ── */
body.dark-mode a[style*="border:1.5px solid"] {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

/* ── CATEGORY CARDS ── */
body.dark-mode .category-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* ── SEARCH MODAL ── */
body.dark-mode .search-modal-content {
    background: var(--modal-bg) !important;
}

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

body.dark-mode .search-result-item {
    background: var(--bg-card) !important;
    border-left-color: var(--primary-color) !important;
}

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

/* ── MODALS ── */
body.dark-mode .modal-content {
    background-color: var(--modal-bg) !important;
}

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

body.dark-mode .modal-header {
    background: linear-gradient(135deg, var(--primary-color), #388e3c) !important;
}

body.dark-mode .modal-footer {
    background: var(--bg-card) !important;
    border-top-color: var(--border-color) !important;
}

/* ── ORDER CARDS ── */
body.dark-mode .order-card {
    background: var(--bg-card) !important;
    border-left-color: var(--primary-color) !important;
}

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

body.dark-mode .order-item-row {
    color: var(--text-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}

/* ── ORDERS SECTION ── */
body.dark-mode .orders-section {
    background: var(--bg-secondary) !important;
}

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

body.dark-mode .orders-tab-btn.active {
    background: var(--primary-color) !important;
    color: #fff !important;
}

/* ── FEATURED TABS ── */
body.dark-mode .featured-tab-btn {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

body.dark-mode .featured-tab-btn.active {
    background: var(--primary-color) !important;
    color: #fff !important;
}

/* ── BREADCRUMB ── */
body.dark-mode .breadcrumb-row {
    background: var(--bg-card) !important;
}

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

/* ── SIDEBAR ── */
body.dark-mode .sidebar {
    background: var(--sidebar-bg-theme) !important;
}

body.dark-mode .sidebar-header {
    background: linear-gradient(135deg, #1a3a1a, #0d250d) !important;
}

body.dark-mode .sidebar-footer {
    background: var(--bg-card) !important;
    border-top-color: var(--border-color) !important;
}

body.dark-mode .sidebar-footer a,
body.dark-mode .sidebar-footer span {
    color: var(--text-primary) !important;
}

/* ── FOOTER ── */
body.dark-mode footer {
    background: linear-gradient(135deg, #050505 0%, #020202 100%) !important;
}

/* ── CART ITEMS ── */
body.dark-mode .cart-item {
    background: var(--bg-card) !important;
    border-bottom-color: var(--border-color) !important;
}

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

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

/* ── FORM ELEMENTS ── */
body.dark-mode .form-group input[type="text"],
body.dark-mode .form-group input[type="email"],
body.dark-mode .form-group textarea,
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: var(--bg-input) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* ── MOBILE BOTTOM NAV ── */
body.dark-mode #mobileBottomNav {
    background: var(--mobile-nav-bg) !important;
    border-top-color: var(--border-color) !important;
}

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

body.dark-mode .mb-nav-item.active {
    color: var(--primary-color) !important;
}

/* ── PWA INSTALL BANNER ── */
body.dark-mode #pwaInstallBanner {
    background: var(--bg-card) !important;
    border-left-color: var(--primary-color) !important;
}

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

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

/* ── NO DATA / EMPTY STATES ── */
body.dark-mode .no-data {
    background: var(--bg-card) !important;
    color: var(--text-muted) !important;
}

body.dark-mode .empty-cart,
body.dark-mode .no-orders {
    color: var(--text-muted) !important;
}

/* ── FLASH DEALS ── */
body.dark-mode .flash-deal-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

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

body.dark-mode .flash-deals-header,
body.dark-mode .flash-deals-title,
body.dark-mode #flash-deals,
body.dark-mode #countdownTimer {
    color: var(--text-primary) !important;
}

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

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

/* ── RECENTLY VIEWED ── */
body.dark-mode .recently-viewed-section {
    background: var(--bg-primary) !important;
}

body.dark-mode .rec-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

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

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

/* ── HEADINGS & TITLES ── */
body.dark-mode .section-title {
    color: var(--text-primary) !important;
}

/* ── REVIEWS SECTION (index.html premium redesign) ── */
body.dark-mode .rv-section {
    background: linear-gradient(160deg, #050805 0%, #0a0d0a 55%, #0d100d 100%) !important;
}

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

/* ── OFFER BANNER ── */
body.dark-mode .offer-banner {
    background: linear-gradient(135deg, #1a3a1a, #0d250d) !important;
}

/* ── FEATURED DEALS GRID CARDS (magazine layout) ── */
body.dark-mode #featuredGrid>div,
body.dark-mode #featuredGrid>a {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

body.dark-mode #featuredGrid h3,
body.dark-mode #featuredGrid .fd-name {
    color: var(--text-primary) !important;
}

body.dark-mode #featuredGrid .fd-price,
body.dark-mode #featuredGrid .price {
    color: var(--primary-color) !important;
}

/* ── AI RECOMMENDED CAROUSEL CARDS ── */
body.dark-mode #aiRecommendedGrid>div,
body.dark-mode #aiRecommendedGrid>a {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

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

/* ── EXCLUSIVE OFFERS / INLINE BG SECTIONS ── */
body.dark-mode section[style*="padding: 2rem 0 2.5rem"] {
    background: var(--bg-secondary) !important;
}

/* ── CAROUSEL CARD STYLES ── */
body.dark-mode .cc-card,
body.dark-mode .na-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

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

/* ── PRODUCT PAGE SPECIFICS ── */
body.dark-mode .product-main {
    background: var(--bg-primary) !important;
}

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

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

body.dark-mode .review-form-container {
    background: var(--bg-card) !important;
    border-left-color: var(--primary-color) !important;
}

body.dark-mode .review-form-container h3 {
    color: var(--primary-color) !important;
}

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

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

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

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

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

/* ── NEWSLETTER / SUBSCRIBE ── */
body.dark-mode .newsletter-section,
body.dark-mode [class*="newsletter"],
body.dark-mode [class*="subscribe"] {
    background: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
}

/* ── FONT CONSISTENCY ── */
body,
body.dark-mode {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ── Prevent transition flicker on images & videos ── */
img,
video,
svg,
canvas,
iframe {
    transition: none !important;
}

/* ── Sort select in dark mode ── */
body.dark-mode select[id*="catSortSelect"],
body.dark-mode select {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* ── SPAN COLOR FIX ── */
body.dark-mode span.review-count,
body.dark-mode span.rating-count {
    color: var(--text-muted) !important;
}

/* ── CAROUSEL CARDS (Recommended for You) ── */
body.dark-mode .carousel-card {
    background: var(--bg-card) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
    border: 1px solid var(--border-color) !important;
}

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

body.dark-mode .carousel-card-body .cc-rating {
    color: #f59e0b !important;
}

/* ── MAGAZINE CARDS (Featured Deals) ── */
body.dark-mode .mag-small {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

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

/* ── RANK CARDS (Best Sellers) ── */
body.dark-mode .rank-card {
    background: var(--bg-card) !important;
    border-color: var(--border-color) !important;
}

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

/* ── DARK CARDS (New Arrivals) ── */
body.dark-mode .dark-card {
    border-color: var(--border-color) !important;
}

/* ── Section heading text with inline colors ── */
body.dark-mode [style*="color:#1a2a1a"] {
    color: var(--text-primary) !important;
}

body.dark-mode [style*="color: #1a2a1a"] {
    color: var(--text-primary) !important;
}

body.dark-mode [style*="color:#222"] {
    color: var(--text-primary) !important;
}

/* ── Inline background override for light sections ── */
body.dark-mode section[style*="background: linear-gradient(180deg, #f8fff8, #fff)"],
body.dark-mode section[style*="background:linear-gradient(180deg,#f8fff8,#fff)"] {
    background: var(--bg-primary) !important;
}

body.dark-mode section[style*="background:#fff"],
body.dark-mode section[style*="background: #fff"] {
    background: var(--bg-primary) !important;
}

body.dark-mode section[style*="background: #f0f4f0"],
body.dark-mode section[style*="background:#f0f4f0"] {
    background: var(--bg-secondary) !important;
}

/* ── Loading placeholders ── */
body.dark-mode [style*="color:#888"] {
    color: var(--text-muted) !important;
}

body.dark-mode [style*="color: #888"] {
    color: var(--text-muted) !important;
}

/* ── Container divs with white-ish backgrounds ── */
body.dark-mode .container {
    color: var(--text-primary);
}

/* ── Named Section Overrides ── */
body.dark-mode nav.top-categories {
    background: var(--bg-primary) !important;
}

body.dark-mode .section-recommended {
    background: var(--bg-primary) !important;
}

body.dark-mode .section-featured {
    background: var(--bg-primary) !important;
}

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

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

/* ── Exclusive Offers deal cards ── */
body.dark-mode .offer-deal-card,
body.dark-mode [class*="deal-card"],
body.dark-mode [class*="exclusive"] .product-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
}

/* ── CHECKOUT PAGE DARK MODE ── */
body.dark-mode .checkout-wrap {
    color: var(--text-primary);
}

body.dark-mode .checkout-card {
    background-color: var(--bg-card) !important;
    border-color: var(--border-color) !important;
    box-shadow: var(--card-shadow) !important;
}

body.dark-mode .step-dot {
    background: var(--bg-input) !important;
    color: var(--text-muted) !important;
}

body.dark-mode .step-dot.active {
    background: var(--primary-color) !important;
    color: #fff !important;
}

body.dark-mode .step-dot.done {
    background: var(--accent-color) !important;
    color: #fff !important;
}

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

body.dark-mode .order-summary {
    background: var(--bg-secondary) !important;
    border: 1px solid var(--border-color) !important;
}

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

body.dark-mode .payment-option.selected {
    border-color: var(--primary-color) !important;
    background: rgba(76, 175, 80, 0.08) !important;
}

body.dark-mode .payment-box {
    background-color: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

body.dark-mode .payment-box-header {
    background-color: var(--bg-secondary) !important;
    border-bottom-color: var(--border-color) !important;
}