/* ================================================================
   WEBMALL KENYA — STOREFRONT v3.0
   Dark Mode · Teal Accent · Premium Animations · Mobile & Desktop
   ================================================================ */

/* ── THEME TOKENS ───────────────────────────────────────────────── */
:root {
    /* Core brand */
    --wm-gold:          #f59e0b;
    --wm-gold-light:    #fde68a;
    --wm-gold-glow:     rgba(245,158,11,0.35);
    --wm-navy:          #0f172a;
    --wm-navy-2:        #1e293b;

    /* Complementary teal accent */
    --wm-teal:          #0ea5e9;
    --wm-teal-dark:     #0284c7;
    --wm-teal-glow:     rgba(14,165,233,0.3);
    --wm-teal-subtle:   rgba(14,165,233,0.08);

    /* Light mode surfaces */
    --wm-bg:            #f5f5f5;
    --wm-surface:       #ffffff;
    --wm-surface-2:     #f8fafc;
    --wm-border:        #e2e8f0;
    --wm-text:          #0f172a;
    --wm-text-muted:    #64748b;

    /* Shadows */
    --wm-shadow-sm:  0 2px 8px rgba(15,23,42,0.06);
    --wm-shadow-md:  0 8px 24px rgba(15,23,42,0.10);
    --wm-shadow-lg:  0 20px 48px rgba(15,23,42,0.14);

    /* Radii */
    --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 9999px;

    /* Transitions */
    --t-fast: 0.15s ease;
    --t-mid:  0.25s cubic-bezier(0.4,0,0.2,1);
    --t-slow: 0.4s cubic-bezier(0.4,0,0.2,1);
}

/* ── DARK MODE TOKENS ──────────────────────────────────────────── */
[data-theme="dark"] {
    --wm-bg:         #0b1120;
    --wm-surface:    #111827;
    --wm-surface-2:  #1a2332;
    --wm-border:     #1e2d40;
    --wm-text:       #f1f5f9;
    --wm-text-muted: #94a3b8;
    --wm-shadow-sm:  0 2px 8px rgba(0,0,0,0.4);
    --wm-shadow-md:  0 8px 24px rgba(0,0,0,0.5);
    --wm-shadow-lg:  0 20px 48px rgba(0,0,0,0.6);
}

/* ── GLOBAL RESET & BASE ────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background: var(--wm-bg);
    color: var(--wm-text);
    font-family: 'Outfit', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    transition: background var(--t-slow), color var(--t-slow);
}

/* ── KEYFRAME ANIMATIONS ───────────────────────────────────────── */
@keyframes wm-pulse-glow {
    0%,100% { box-shadow: 0 0 0 0 var(--wm-gold-glow); }
    50%      { box-shadow: 0 0 0 8px transparent; }
}
@keyframes wm-teal-pulse {
    0%,100% { box-shadow: 0 0 0 0 var(--wm-teal-glow); }
    50%      { box-shadow: 0 0 0 8px transparent; }
}
@keyframes wm-slide-up {
    from { opacity:0; transform:translateY(24px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes wm-fade-in {
    from { opacity:0; } to { opacity:1; }
}
@keyframes wm-skeleton-sweep {
    0%   { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}
@keyframes wm-live-dot {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.4; transform:scale(0.7); }
}
@keyframes wm-ticker-scroll {
    0%   { transform:translateX(0); }
    100% { transform:translateX(-50%); }
}
@keyframes wm-heart-beat {
    0%   { transform:scale(1); }
    25%  { transform:scale(1.3); }
    50%  { transform:scale(0.9); }
    75%  { transform:scale(1.15); }
    100% { transform:scale(1); }
}
@keyframes wm-ripple {
    to { transform:scale(4); opacity:0; }
}
@keyframes wm-float-up {
    0%   { transform:translateY(0); }
    50%  { transform:translateY(-6px); }
    100% { transform:translateY(0); }
}
@keyframes wm-shine {
    from { left:-100%; }
    to   { left:200%; }
}
@keyframes wm-spin-slow {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@keyframes wm-slide-in-bottom {
    from { transform:translateY(100%); opacity:0; }
    to   { transform:translateY(0);    opacity:1; }
}
@keyframes wm-count-flip {
    0%   { transform:rotateX(0deg);   }
    50%  { transform:rotateX(-90deg); }
    100% { transform:rotateX(0deg);   }
}

/* ── DARK MODE TOGGLE BUTTON ───────────────────────────────────── */
#wm-theme-toggle {
    width:36px; height:36px;
    border-radius:50%;
    background: var(--wm-surface-2);
    border: 1px solid var(--wm-border);
    color: var(--wm-text);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; cursor:pointer;
    transition: var(--t-mid);
    flex-shrink:0;
}
#wm-theme-toggle:hover {
    background: var(--wm-gold);
    color: var(--wm-navy);
    border-color: var(--wm-gold);
    transform: rotate(20deg) scale(1.1);
}

/* ── TOP BAR TICKER ─────────────────────────────────────────────── */
.wm-ticker-wrapper {
    overflow: hidden;
    flex:1;
}
.wm-ticker-track {
    display: flex;
    white-space: nowrap;
    animation: wm-ticker-scroll 28s linear infinite;
    gap: 0;
}
.wm-ticker-track:hover { animation-play-state: paused; }
.wm-ticker-item {
    display:inline-flex; align-items:center; gap:6px;
    padding: 0 28px;
    font-size:12px; font-weight:600;
    color: #cbd5e1;
    flex-shrink:0;
}
.wm-ticker-item .dot {
    width:4px; height:4px; border-radius:50%;
    background: var(--wm-gold);
    flex-shrink:0;
}

/* ── NAVBAR UPGRADES ────────────────────────────────────────────── */
.navbar {
    background: var(--wm-surface) !important;
    border-bottom: 1px solid var(--wm-border) !important;
    transition: background var(--t-slow), box-shadow var(--t-mid), padding var(--t-mid);
}
[data-theme="dark"] .navbar { background: var(--wm-surface) !important; }

.navbar .logo {
    height:38px; transition:height var(--t-mid);
    filter: drop-shadow(0 0 0px transparent);
}
.navbar.navbar-shrunken .logo { height:30px; }
.navbar .logo:hover {
    filter: drop-shadow(0 0 8px var(--wm-gold-glow));
}

/* Search glow on focus */
.wm-search-form {
    border: 1.5px solid var(--wm-gold) !important;
    background: var(--wm-surface-2) !important;
    transition: box-shadow var(--t-fast), background var(--t-slow);
}
.wm-search-form:focus-within {
    box-shadow: 0 0 0 3px var(--wm-gold-glow) !important;
}
.wm-search-input {
    background: transparent !important;
    color: var(--wm-text) !important;
}
.wm-search-input::placeholder { color: var(--wm-text-muted) !important; }

/* Cart badge pulse when items > 0 */
.cart-badge-pulse {
    animation: wm-pulse-glow 1.8s ease-in-out infinite;
}

/* ── DARK MODE SURFACE OVERRIDES ───────────────────────────────── */
[data-theme="dark"] .bg-white,
[data-theme="dark"] .bg-light { background: var(--wm-surface) !important; }

[data-theme="dark"] .text-dark  { color: var(--wm-text) !important; }
[data-theme="dark"] .text-muted { color: var(--wm-text-muted) !important; }
[data-theme="dark"] .border     { border-color: var(--wm-border) !important; }
[data-theme="dark"] .border-bottom { border-color: var(--wm-border) !important; }

[data-theme="dark"] .category-showcase-section,
[data-theme="dark"] .brands-section-wrapper,
[data-theme="dark"] .store-section-wrapper,
[data-theme="dark"] .flash-sale-section,
[data-theme="dark"] .discover-card,
[data-theme="dark"] .wm-section-block,
[data-theme="dark"] .market-product-card,
[data-theme="dark"] .brand-corporate-card,
[data-theme="dark"] .store-item-card,
[data-theme="dark"] .cat-image-wrapper,
[data-theme="dark"] .live-promo-card,
[data-theme="dark"] .card,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .mobile-install-app-card {
    background: var(--wm-surface) !important;
    border-color: var(--wm-border) !important;
    color: var(--wm-text) !important;
}

[data-theme="dark"] .dropdown-menu { color: var(--wm-text) !important; }
[data-theme="dark"] .dropdown-item { color: var(--wm-text) !important; }
[data-theme="dark"] .dropdown-item:hover { background: var(--wm-surface-2) !important; }

[data-theme="dark"] .store-stats-grid { background: var(--wm-surface-2) !important; }
[data-theme="dark"] .store-stat-val   { color: var(--wm-text) !important; }
[data-theme="dark"] .product-title-text { color: var(--wm-text) !important; }
[data-theme="dark"] .current-price-label { color: var(--wm-text) !important; }
[data-theme="dark"] .seller-meta-info { color: var(--wm-text-muted) !important; }
[data-theme="dark"] .cat-title-label { color: var(--wm-text) !important; }
[data-theme="dark"] #search-suggestions-dropdown {
    background: var(--wm-surface) !important;
    border-color: var(--wm-border) !important;
    color: var(--wm-text) !important;
}

/* ── PRODUCT CARD v3 ────────────────────────────────────────────── */
.market-product-card {
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--r-md);
    overflow: hidden;
    position: relative;
    display: flex; flex-direction:column;
    height:100%;
    box-shadow: var(--wm-shadow-sm);
    transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
}
.market-product-card::before {
    content:'';
    position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg, var(--wm-gold), var(--wm-teal));
    transform: scaleX(0); transform-origin:left;
    transition: transform var(--t-mid);
    z-index:2;
}
.market-product-card:hover { transform:translateY(-4px); box-shadow:var(--wm-shadow-md); border-color:#cbd5e1; }
.market-product-card:hover::before { transform:scaleX(1); }
.market-product-card:active { transform:scale(0.98); }

/* Skeleton shimmer while image loads */
.card-img-wrapper { position:relative; }
.card-img-wrapper::after {
    content:'';
    position:absolute; inset:0;
    background: linear-gradient(90deg,#f0f4f8 0%,#e2e8f0 50%,#f0f4f8 100%);
    background-size: 800px 100%;
    animation: wm-skeleton-sweep 1.4s ease infinite;
    opacity:0;
    pointer-events:none;
    transition: opacity 0.2s;
}
.card-img-wrapper.loading::after { opacity:1; }

[data-theme="dark"] .card-img-wrapper::after {
    background: linear-gradient(90deg,#1e293b 0%,#2d3748 50%,#1e293b 100%);
    background-size: 800px 100%;
}

/* Wishlist heart beat on click */
.overlay-action-btn.wishlisted i { color:#e11d48; }
.overlay-action-btn.wishlisted {
    background: #ffe4e6;
    border-color: #fecdd3;
    animation: wm-heart-beat 0.4s ease;
}

/* Add to cart ripple */
.btn-card-cart {
    position:relative; overflow:hidden;
    background: linear-gradient(135deg, var(--wm-gold) 0%, #f97316 100%);
    color: var(--wm-navy);
    border-radius: var(--r-sm);
    font-weight:700; font-size:11px;
    padding: 6px 0;
    border:none;
    display:flex; align-items:center; justify-content:center; gap:4px;
    transition: opacity var(--t-fast), transform var(--t-fast);
    margin-top:4px; width:100%;
    text-decoration:none;
}
.btn-card-cart:hover { opacity:0.9; transform:translateY(-1px); color:var(--wm-navy); }
.btn-card-cart .ripple-effect {
    position:absolute; border-radius:50%;
    transform:scale(0); animation: wm-ripple 0.5s linear;
    background: rgba(255,255,255,0.5);
    pointer-events:none;
}

/* ── HERO SECTION v3 ─────────────────────────────────────────────── */
.hero-section-container { margin: 14px 0 18px; }
.main-hero-carousel,
.main-hero-carousel .carousel-inner,
.main-hero-carousel img { height:320px !important; border-radius: var(--r-lg); }
.main-hero-carousel .carousel-item { height:320px !important; border-radius: var(--r-lg); }

@media (max-width:1023.98px) {
    .main-hero-carousel,.main-hero-carousel .carousel-inner,
    .main-hero-carousel .carousel-item,.main-hero-carousel img { height:260px !important; }
}
@media (max-width:575.98px) {
    .main-hero-carousel,.main-hero-carousel .carousel-inner,
    .main-hero-carousel .carousel-item,.main-hero-carousel img { height:200px !important; }
}

/* Glassmorphism overlay on banner */
.hero-slide-overlay {
    position:absolute; bottom:0; left:0; right:0;
    background: linear-gradient(to top, rgba(15,23,42,0.75) 0%, rgba(15,23,42,0.3) 60%, transparent 100%);
    padding: 20px 24px 20px;
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.hero-slide-title {
    font-size:20px; font-weight:800; color:#fff;
    text-shadow: 0 2px 8px rgba(0,0,0,0.4);
    margin:0 0 4px;
}
.hero-slide-sub { font-size:12px; color:#e2e8f0; margin:0 0 10px; }
.hero-slide-cta {
    display:inline-flex; align-items:center; gap:6px;
    background: var(--wm-gold);
    color: var(--wm-navy);
    font-weight:700; font-size:12px;
    padding: 6px 16px; border-radius: var(--r-pill);
    text-decoration:none;
    transition: var(--t-fast);
}
.hero-slide-cta:hover { background:#fff; color:var(--wm-navy); transform:scale(1.04); }

/* Dot indicators */
.hero-dots { display:flex; gap:6px; justify-content:center; margin-top:8px; }
.hero-dot {
    width:6px; height:6px; border-radius:50%;
    background: var(--wm-border); cursor:pointer;
    transition: var(--t-mid);
}
.hero-dot.active { width:20px; border-radius:3px; background:var(--wm-gold); }

/* ── LIVE PROMO STRIP v3 ────────────────────────────────────────── */
.live-promo-container {
    background: linear-gradient(135deg, #0f172a 0%, #0c2340 60%, #071a2e 100%);
    border: 1px solid rgba(14,165,233,0.2);
    border-radius: var(--r-md);
    padding:12px 16px;
    color:#fff; margin-top:16px; overflow:hidden; position:relative;
}
.live-promo-container::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(circle at 80% 20%, var(--wm-teal-subtle) 0%, transparent 60%);
    pointer-events:none;
}
.live-promo-badge {
    background: var(--wm-gold); color:var(--wm-navy);
    font-weight:800; font-size:10px;
    padding:2px 8px; border-radius:var(--r-pill);
    text-transform:uppercase;
    display:inline-flex; align-items:center; gap:4px;
}
.live-dot {
    width:7px; height:7px; border-radius:50%;
    background:#ef4444;
    animation: wm-live-dot 1.2s ease-in-out infinite;
    flex-shrink:0;
}
.live-promo-card {
    min-width:252px; max-width:252px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius:10px; padding:10px 12px;
    transition: var(--t-mid);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor:pointer; text-decoration:none; color:inherit;
    display:flex; flex-direction:column; justify-content:space-between;
}
.live-promo-card:hover {
    transform:translateY(-2px);
    background: rgba(14,165,233,0.12);
    border-color: var(--wm-teal);
    box-shadow: 0 4px 20px var(--wm-teal-glow);
}
.countdown-digital {
    font-family:monospace; font-size:10px;
    color: var(--wm-teal);
    font-weight:800; letter-spacing:1px;
}

/* ── FLASH SALE v3 ──────────────────────────────────────────────── */
.flash-sale-section {
    background: linear-gradient(135deg, #1a0000 0%, #2d0a0a 50%, #1a0014 100%);
    border-radius: var(--r-lg);
    padding:16px; margin:16px 0;
    border: 1px solid rgba(220,38,38,0.3);
    box-shadow: 0 8px 32px rgba(220,38,38,0.12);
    overflow:hidden; position:relative;
}
.flash-sale-section::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse at 20% 50%, rgba(245,158,11,0.08) 0%, transparent 60%);
    pointer-events:none;
}
.flash-sale-label { color:#ff6b6b; text-shadow: 0 0 16px rgba(255,107,107,0.6); }
.flash-time-digit {
    background: linear-gradient(135deg,#7f1d1d,#dc2626);
    color:#fff; font-weight:800; font-size:13px;
    padding:4px 7px; border-radius:5px;
    font-family:monospace;
    box-shadow: 0 2px 8px rgba(220,38,38,0.4);
    min-width:26px; text-align:center;
    display:inline-block;
}
.flash-sold-fill { background: linear-gradient(90deg, #dc2626, #f59e0b); }
.flash-sold-text { color:#fca5a5; }

[data-theme="dark"] .flash-sale-section { border-color: rgba(220,38,38,0.4); }

/* ── CATEGORIES v3 ──────────────────────────────────────────────── */
.category-showcase-section {
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--r-lg);
    padding:16px; margin:12px 0;
    box-shadow: var(--wm-shadow-sm);
    overflow:hidden;
}
.cat-image-wrapper {
    width:68px; height:68px; border-radius:50%;
    background: var(--wm-surface-2);
    border: 2px solid var(--wm-border);
    box-shadow: var(--wm-shadow-sm);
    transition: border-color var(--t-mid), box-shadow var(--t-mid), transform var(--t-mid);
    overflow:hidden;
    display:flex; align-items:center; justify-content:center;
    position:relative;
}
/* Gradient ring on hover */
.cat-showcase-card:hover .cat-image-wrapper {
    border-color: transparent;
    box-shadow: 0 0 0 2.5px var(--wm-gold), 0 0 0 4px var(--wm-teal), var(--wm-shadow-md);
    transform: scale(1.05);
}
.cat-title-label { color: var(--wm-text); }

/* ── BRAND CARDS v3 ─────────────────────────────────────────────── */
.brands-section-wrapper {
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--r-lg);
    padding:16px; margin:12px 0;
    box-shadow: var(--wm-shadow-sm);
    overflow:hidden;
}
.brand-corporate-card {
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius:10px;
    position:relative; overflow:hidden;
    transition: transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
}
/* Shine sweep effect */
.brand-corporate-card::after {
    content:'';
    position:absolute; top:0; left:-100%; width:60%; height:100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: none;
}
.brand-corporate-card:hover::after {
    animation: wm-shine 0.5s ease forwards;
}
.brand-corporate-card:hover {
    transform:translateY(-2px);
    border-color: var(--wm-teal);
    box-shadow: 0 6px 20px var(--wm-teal-glow);
}

/* ── TOP STORES v3 ──────────────────────────────────────────────── */
.store-section-wrapper {
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--r-lg);
    padding:16px; margin:12px 0;
    box-shadow: var(--wm-shadow-sm);
    overflow:hidden;
}
.store-item-card {
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--r-lg);
    overflow:hidden;
    box-shadow: var(--wm-shadow-sm);
    display:flex; flex-direction:column;
    justify-content:space-between;
    transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
    height:100%;
}
.store-item-card:hover {
    transform:translateY(-4px);
    box-shadow: var(--wm-shadow-md);
    border-color: var(--wm-teal);
}
.store-title-name { color: var(--wm-text); }
.store-stats-grid { background: var(--wm-surface-2); }

/* Animated star rating */
.store-rating-label i {
    transition: transform 0.15s;
}
.store-item-card:hover .store-rating-label i {
    animation: wm-heart-beat 0.3s ease;
}
.btn-visit-store {
    background: linear-gradient(135deg, var(--wm-gold) 0%, #fb923c 100%);
    color: var(--wm-navy) !important;
    border-radius: var(--r-sm);
    font-weight:700; font-size:11px;
    text-decoration:none;
    padding:6px 0; width:100%;
    display:flex; align-items:center; justify-content:center; gap:5px;
    transition: opacity var(--t-fast), transform var(--t-fast);
    border:none;
}
.btn-visit-store:hover { opacity:0.9; transform:translateY(-1px); }

/* ── DISCOVER WEBMALL v3 ────────────────────────────────────────── */
.discover-card {
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--r-md);
    padding:16px;
    transition: transform var(--t-mid), box-shadow var(--t-mid), border-color var(--t-mid);
    display:flex; flex-direction:column; justify-content:space-between;
    height:100%; box-shadow: var(--wm-shadow-sm);
    position:relative; overflow:hidden;
}
.discover-card::before {
    content:''; position:absolute; inset:0;
    background: linear-gradient(135deg, var(--wm-teal-subtle) 0%, transparent 70%);
    opacity:0; transition: opacity var(--t-mid);
    pointer-events:none;
}
.discover-card:hover { transform:translateY(-4px); box-shadow:var(--wm-shadow-md); border-color:var(--wm-teal); }
.discover-card:hover::before { opacity:1; }
.discover-icon-wrapper {
    width:48px; height:48px; border-radius:12px;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; margin-bottom:12px;
    transition: transform var(--t-mid), background var(--t-mid);
}
.discover-card:hover .discover-icon-wrapper { transform:scale(1.1) rotate(-5deg); }

/* ── SECTION HEADER v3 ──────────────────────────────────────────── */
.wm-section-header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:12px; padding:0 2px;
}
.wm-section-title-group { display:flex; align-items:center; gap:10px; }
.wm-section-icon {
    width:32px; height:32px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:15px; flex-shrink:0;
    position:relative; overflow:hidden;
}
.wm-section-icon::after {
    content:''; position:absolute; inset:0; border-radius:8px;
    background: rgba(255,255,255,0.15);
    opacity:0; transition:opacity var(--t-fast);
}
.wm-section-icon:hover::after { opacity:1; }
.wm-section-title { font-size:15px; font-weight:800; color:var(--wm-text); margin:0; }
.wm-section-subtitle { font-size:10.5px; color:var(--wm-text-muted); margin:0; }

.btn-wm-viewall {
    display:inline-flex; align-items:center; gap:4px;
    color: var(--wm-teal); font-size:11px; font-weight:700;
    text-decoration:none;
    padding:4px 12px; border-radius:var(--r-pill);
    border: 1px solid var(--wm-teal);
    transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
    white-space:nowrap;
}
.btn-wm-viewall:hover {
    background: var(--wm-teal); color:#fff;
    transform:translateX(2px);
}
.btn-wm-viewall .arr { transition:transform var(--t-fast); }
.btn-wm-viewall:hover .arr { transform:translateX(3px); }

/* ── MOBILE APP PROMO v3 ────────────────────────────────────────── */
.app-promo-card {
    background: linear-gradient(135deg, #0f172a 0%, #0c2340 50%, #071a2e 100%);
    border: 1px solid rgba(14,165,233,0.25);
    border-radius: var(--r-lg);
    padding:24px; color:#fff;
    margin:16px 0; position:relative; overflow:hidden;
}
.app-promo-card::before {
    content:''; position:absolute; inset:0;
    background: radial-gradient(circle at 85% 30%, rgba(14,165,233,0.15) 0%, transparent 60%);
    pointer-events:none;
}
.app-store-btn {
    display:inline-flex; align-items:center; gap:8px;
    padding:10px 20px; border-radius:var(--r-pill);
    font-weight:700; font-size:13px;
    text-decoration:none; transition: var(--t-mid);
}
.app-store-btn.gold { background:var(--wm-gold); color:var(--wm-navy); }
.app-store-btn.gold:hover { background:#fff; transform:translateY(-2px); box-shadow: 0 4px 16px var(--wm-gold-glow); }
.app-store-btn.outline { background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,0.4); }
.app-store-btn.outline:hover { background:rgba(255,255,255,0.1); transform:translateY(-2px); }

.mobile-install-app-card {
    background: var(--wm-surface);
    border: 1px solid var(--wm-border);
    border-radius: var(--r-md);
    padding:12px 14px; margin:16px 0;
    display:flex; align-items:center; justify-content:space-between;
    box-shadow: var(--wm-shadow-sm);
}

/* ── FOOTER v3 ──────────────────────────────────────────────────── */
.site-footer {
    background: linear-gradient(160deg, #0c1220 0%, #0f172a 40%, #061423 70%, #0b1a2e 100%);
    color:#dbe3f5; margin-top:70px; padding-top:50px;
    position:relative; overflow:hidden;
}
.site-footer::before {
    content:''; position:absolute; top:0; left:0; right:0; height:2px;
    background: linear-gradient(90deg, var(--wm-gold), var(--wm-teal), var(--wm-gold));
}
.site-footer h6 {
    color:#fff; font-weight:700; margin-bottom:18px;
    text-transform:uppercase; font-size:13px; letter-spacing:.8px;
}
.site-footer ul { list-style:none; padding:0; margin:0; }
.site-footer ul li { margin-bottom:10px; }
.site-footer a { color:#94a3b8; text-decoration:none; font-size:13.5px; transition:color var(--t-fast); }
.site-footer a:hover { color: var(--wm-teal); }

/* Social icons — branded */
.footer-social { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.footer-social a {
    display:inline-flex; align-items:center; justify-content:center;
    width:34px; height:34px; border-radius:50%;
    font-size:14px; font-weight:700;
    background: rgba(255,255,255,0.08);
    color:#fff; text-decoration:none;
    transition: var(--t-mid);
    border:1px solid rgba(255,255,255,0.1);
}
.footer-social a.fb:hover   { background:#1877f2; border-color:#1877f2; }
.footer-social a.tw:hover   { background:#000; border-color:#fff; }
.footer-social a.ig:hover   { background:radial-gradient(circle at 30% 107%,#fdf497 5%,#fd5949 45%,#d6249f 60%,#285AEB 90%); border-color:transparent; }
.footer-social a.yt:hover   { background:#ff0000; border-color:#ff0000; }
.footer-social a.wa:hover   { background:#25D366; border-color:#25D366; }

/* Payment badges */
.footer-payment-icons { display:flex; gap:8px; flex-wrap:wrap; margin-top:14px; }
.footer-payment-badge {
    display:inline-flex; align-items:center; gap:5px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius:6px;
    padding:5px 10px; font-size:11px;
    font-weight:700; color:#f1f5f9;
    transition: var(--t-fast);
}
.footer-payment-badge:hover { background:rgba(255,255,255,0.12); }

.footer-bottom {
    border-top:1px solid rgba(255,255,255,0.08);
    margin-top:40px; padding:20px 0;
    text-align:center; font-size:12.5px;
    color:#64748b;
}
.footer-bottom-gradient {
    height:2px;
    background: linear-gradient(90deg, transparent, var(--wm-teal), var(--wm-gold), transparent);
    margin-bottom:16px;
}

/* ── MOBILE BOTTOM NAV v3 ───────────────────────────────────────── */
.mobile-bottom-nav {
    background: var(--wm-surface) !important;
    border-top: 1px solid var(--wm-border) !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.1) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    animation: wm-slide-in-bottom 0.35s ease;
}
.mobile-bottom-nav-item { color: var(--wm-text-muted) !important; }
.mobile-bottom-nav-item.active { color: var(--wm-gold) !important; }
.mobile-bottom-nav-item:hover { color: var(--wm-teal) !important; }

/* Active glow indicator */
.mobile-bottom-nav-item.active i {
    filter: drop-shadow(0 0 6px var(--wm-gold-glow));
}

/* ── FAB STACK v3 ───────────────────────────────────────────────── */
.fab-item {
    animation: wm-fade-in 0.4s ease both;
    box-shadow: 0 4px 16px rgba(15,23,42,0.22);
}
.fab-item:nth-child(1) { animation-delay: 0.05s; }
.fab-item:nth-child(2) { animation-delay: 0.10s; }
.fab-item:nth-child(3) { animation-delay: 0.15s; }
.fab-item:nth-child(4) { animation-delay: 0.20s; }

.fab-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E) !important;
    animation: wm-pulse-glow 2.5s ease-in-out infinite, wm-fade-in 0.4s ease both;
}

/* ── NEWSLETTER PRE-FOOTER ──────────────────────────────────────── */
[data-theme="dark"] .bg-dark.text-white.pt-5 {
    background: #060d18 !important;
}

/* ── RESPONSIVE POLISH ──────────────────────────────────────────── */
@media (max-width:575.98px) {
    .wm-section-title { font-size:14px; }
    .hero-slide-title { font-size:15px; }
    .hero-slide-cta   { font-size:11px; padding:5px 12px; }
    .flash-sale-section { padding:12px; }
    .discover-icon-wrapper { width:40px; height:40px; font-size:18px; }
    .app-promo-card { padding:18px; }
}

@media (min-width:992px) {
    /* Desktop smooth scrollbar */
    ::-webkit-scrollbar { width:8px; height:8px; }
    ::-webkit-scrollbar-track { background: var(--wm-surface-2); }
    ::-webkit-scrollbar-thumb {
        background: linear-gradient(var(--wm-gold), var(--wm-teal));
        border-radius:4px;
    }
    ::-webkit-scrollbar-thumb:hover { background: var(--wm-gold); }
}

/* Horizontal scroll bars — hide on mobile sections */
.brands-scroll-container::-webkit-scrollbar,
.live-promo-slider::-webkit-scrollbar,
.categories-flex-wrapper::-webkit-scrollbar { display:none; }

/* ── SECTION ENTRANCE ANIMATION (Intersection Observer) ─────────── */
.wm-section-animate {
    opacity:0; transform:translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.wm-section-animate.visible {
    opacity:1; transform:translateY(0);
}