/**
 * Tracklify Business Suite - Storefront Theme Utility & Fallback Engine
 * Provides missing Tailwind v3 classes, gradient stops, high-contrast dark mode hardening,
 * and reliable widget / button styling for all 10 storefront themes.
 */

/* ==========================================================================
   1. COLOR UTILITIES (Tailwind v3 Fallbacks for Tailwind v2)
   ========================================================================== */

/* Amber */
.bg-amber-50  { background-color: #fffbeb !important; }
.bg-amber-100 { background-color: #fef3c7 !important; }
.bg-amber-200 { background-color: #fde68a !important; }
.bg-amber-300 { background-color: #fcd34d !important; }
.bg-amber-400 { background-color: #fbbf24 !important; }
.bg-amber-500 { background-color: #f59e0b !important; }
.bg-amber-600 { background-color: #d97706 !important; }
.bg-amber-700 { background-color: #b45309 !important; }
.text-amber-300 { color: #fcd34d !important; }
.text-amber-400 { color: #fbbf24 !important; }
.text-amber-500 { color: #f59e0b !important; }
.text-amber-600 { color: #d97706 !important; }
.text-amber-700 { color: #b45309 !important; }
.text-amber-800 { color: #92400e !important; }
.text-amber-900 { color: #78350f !important; }
.border-amber-100 { border-color: #fef3c7 !important; }
.border-amber-200 { border-color: #fde68a !important; }
.border-amber-300 { border-color: #fcd34d !important; }
.border-amber-400 { border-color: #fbbf24 !important; }
.border-amber-500 { border-color: #f59e0b !important; }

/* Orange */
.bg-orange-50  { background-color: #fff7ed !important; }
.bg-orange-100 { background-color: #ffedd5 !important; }
.bg-orange-500 { background-color: #f97316 !important; }
.bg-orange-600 { background-color: #ea580c !important; }
.bg-orange-700 { background-color: #c2410c !important; }
.text-orange-400 { color: #fb923c !important; }
.text-orange-500 { color: #f97316 !important; }
.text-orange-600 { color: #ea580c !important; }
.text-orange-700 { color: #c2410c !important; }
.border-orange-200 { border-color: #fed7aa !important; }
.border-orange-500 { border-color: #f97316 !important; }

/* Emerald */
.bg-emerald-50  { background-color: #ecfdf5 !important; }
.bg-emerald-100 { background-color: #d1fae5 !important; }
.bg-emerald-500 { background-color: #10b981 !important; }
.bg-emerald-600 { background-color: #059669 !important; }
.bg-emerald-700 { background-color: #047857 !important; }
.text-emerald-300 { color: #6ee7b7 !important; }
.text-emerald-400 { color: #34d399 !important; }
.text-emerald-500 { color: #10b981 !important; }
.text-emerald-600 { color: #059669 !important; }
.text-emerald-700 { color: #047857 !important; }
.text-emerald-800 { color: #065f46 !important; }
.border-emerald-100 { border-color: #d1fae5 !important; }
.border-emerald-200 { border-color: #a7f3d0 !important; }
.border-emerald-300 { border-color: #6ee7b7 !important; }
.border-emerald-400 { border-color: #34d399 !important; }
.border-emerald-500 { border-color: #10b981 !important; }

/* Teal / Cyan */
.bg-teal-500 { background-color: #14b8a6 !important; }
.bg-teal-600 { background-color: #0d9488 !important; }
.text-teal-400 { color: #2dd4bf !important; }
.text-teal-500 { color: #14b8a6 !important; }

/* Slate & 950 Shades (Crucial for Dark Sections & Themes) */
.bg-slate-50  { background-color: #f8fafc !important; }
.bg-slate-100 { background-color: #f1f5f9 !important; }
.bg-slate-800 { background-color: #1e293b !important; }
.bg-slate-900 { background-color: #0f172a !important; }
.bg-slate-950 { background-color: #020617 !important; }
.bg-gray-950  { background-color: #030712 !important; }
.bg-indigo-950 { background-color: #0c0a2a !important; }
.bg-purple-950 { background-color: #1a0b2e !important; }
.text-slate-100 { color: #f1f5f9 !important; }
.text-slate-200 { color: #e2e8f0 !important; }
.text-slate-300 { color: #cbd5e1 !important; }
.text-slate-400 { color: #94a3b8 !important; }
.text-slate-700 { color: #334155 !important; }
.text-slate-800 { color: #1e293b !important; }
.text-slate-900 { color: #0f172a !important; }
.border-slate-700 { border-color: #334155 !important; }
.border-slate-800 { border-color: #1e293b !important; }

/* Sky */
.bg-sky-500 { background-color: #0ea5e9 !important; }
.text-sky-400 { color: #38bdf8 !important; }
.text-sky-500 { color: #0ea5e9 !important; }

/* Rose */
.bg-rose-500 { background-color: #f43f5e !important; }
.bg-rose-600 { background-color: #e11d48 !important; }
.text-rose-400 { color: #fb7185 !important; }
.text-rose-500 { color: #f43f5e !important; }

/* Opacity and Alpha Backgrounds */
.bg-black\/20 { background-color: rgba(0, 0, 0, 0.2) !important; }
.bg-black\/30 { background-color: rgba(0, 0, 0, 0.3) !important; }
.bg-black\/50 { background-color: rgba(0, 0, 0, 0.5) !important; }
.bg-black\/70 { background-color: rgba(0, 0, 0, 0.7) !important; }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1) !important; }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2) !important; }
.bg-white\/30 { background-color: rgba(255, 255, 255, 0.3) !important; }
.bg-white\/40 { background-color: rgba(255, 255, 255, 0.4) !important; }
.bg-purple-500\/20 { background-color: rgba(139, 92, 246, 0.2) !important; }
.bg-purple-950\/80 { background-color: rgba(26, 11, 46, 0.8) !important; }
.bg-emerald-500\/20 { background-color: rgba(16, 185, 129, 0.2) !important; }
.bg-emerald-50\/40  { background-color: rgba(236, 253, 245, 0.5) !important; }
.bg-amber-500\/20   { background-color: rgba(245, 158, 11, 0.2) !important; }
.bg-indigo-500\/20  { background-color: rgba(99, 102, 241, 0.2) !important; }
.bg-blue-500\/20    { background-color: rgba(59, 130, 246, 0.2) !important; }

/* Font size fallbacks */
.text-\[10px\] { font-size: 10px !important; line-height: 14px !important; }
.text-\[11px\] { font-size: 11px !important; line-height: 15px !important; }

/* ==========================================================================
   2. GRADIENT COMBINATIONS
   ========================================================================== */
.from-amber-500.to-orange-600,
.bg-gradient-to-r.from-amber-500.to-orange-600,
.bg-gradient-to-br.from-amber-500.to-orange-600 {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
}

.from-emerald-500.to-teal-600,
.bg-gradient-to-r.from-emerald-500.to-teal-600 {
    background: linear-gradient(135deg, #10b981 0%, #0d9488 100%) !important;
}

.from-indigo-950.to-gray-950,
.from-indigo-950.via-purple-950.to-gray-950 {
    background: linear-gradient(180deg, #0c0a2a 0%, #1a0b2e 50%, #030712 100%) !important;
}

.from-gray-950.via-slate-900.to-gray-900 {
    background: linear-gradient(135deg, #030712 0%, #0f172a 50%, #111827 100%) !important;
}

/* ==========================================================================
   3. HIGH CONTRAST PRE-ORDER & WHOLESALE SECTIONS
   ========================================================================== */
#preorder-section {
    background: linear-gradient(180deg, #0c0a2a 0%, #1a0b2e 50%, #030712 100%) !important;
    color: #ffffff !important;
}
#preorder-section h2 {
    color: #ffffff !important;
}
#preorder-section p {
    color: #cbd5e1 !important;
}

#wholesale-section {
    background-color: #f0fdf4 !important;
}
.dark #wholesale-section {
    background-color: #064e3b !important;
}

/* ==========================================================================
   4. QUICK-ADD TO CART BUTTON (VIBRANT & HIGH CONTRAST)
   ========================================================================== */
.quick-add-btn {
    background: linear-gradient(135deg, #f59e0b 0%, #ea580c 100%) !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(234, 88, 12, 0.4) !important;
    cursor: pointer !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.quick-add-btn:hover {
    background: linear-gradient(135deg, #d97706 0%, #c2410c 100%) !important;
    box-shadow: 0 6px 20px rgba(234, 88, 12, 0.55) !important;
    transform: translateY(-2px) scale(1.05) !important;
}

.quick-add-btn:active {
    transform: translateY(0) scale(0.96) !important;
}

.quick-add-btn i {
    color: #ffffff !important;
    font-size: 14px !important;
    line-height: 1 !important;
}

/* ==========================================================================
   5. FLOATING CUSTOMER SUPPORT WIDGET (WHATSAPP & CALL)
   ========================================================================== */
#floating-support-widget {
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.25rem !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
}

#toggle-support-btn {
    background: linear-gradient(135deg, #10b981 0%, #0d9488 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.45) !important;
    cursor: pointer !important;
    border: none !important;
}

#toggle-support-btn:hover {
    background: linear-gradient(135deg, #059669 0%, #0f766e 100%) !important;
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.6) !important;
}

#support-popover-menu {
    z-index: 1000000 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25) !important;
}

/* Shared storefront redesign: solid surfaces, semantic contrast and responsive controls. */
:root { --store-surface: var(--surface, #fff); --store-muted-surface: var(--surface-muted, #f8fafc); --store-border: var(--border, #e5e7eb); --store-muted: var(--muted, #64748b); }
body { background: var(--bg) !important; color: var(--text) !important; }
.glass-header { box-shadow: 0 1px 0 var(--store-border) !important; }
.theme-btn-primary, .quick-add-btn, #toggle-support-btn { background: var(--primary) !important; background-image: none !important; box-shadow: none !important; }
.theme-hero-gradient, .theme-accent-gradient { background-image: none !important; }
.hero-slide .bg-gradient-to-r, .hero-slide .bg-gradient-to-br, .hero-slide .bg-gradient-to-b { background-image: none !important; background-color: rgba(15, 23, 42, .72) !important; }
.product-card, .store-surface, .category-card { background: var(--store-surface) !important; border: 1px solid var(--store-border) !important; box-shadow: 0 8px 24px rgba(15, 23, 42, .06) !important; }
.theme-fashion-boutique h1, .theme-luxury-watch h1, .theme-home-living h1 { letter-spacing: -.02em; }
.theme-luxury-watch { --surface: #171717; }
.theme-kids-world .product-card { border-radius: 1.25rem !important; }
.theme-industrial .product-card, .theme-auto-parts .product-card { border-radius: .35rem !important; box-shadow: 0 2px 0 var(--store-border) !important; }
.theme-sports-gear .product-card { border-left: 4px solid var(--accent) !important; }
.theme-tech-store .product-card { border-radius: .5rem !important; }
#hero-carousel { overflow: visible !important; }
#hero-carousel .container { min-height: 30rem; display: flex; align-items: center; }
#hero-carousel h1 { overflow-wrap: anywhere; }
#hero-carousel a { min-height: 2.75rem; white-space: normal; }
@media (max-width: 640px) {
  #hero-carousel .container { min-height: 34rem; align-items: flex-end; padding-bottom: 5.5rem; }
  #hero-carousel .flex.flex-wrap { flex-direction: column; align-items: stretch; }
  #hero-carousel .flex.flex-wrap a { width: 100%; justify-content: center; }
}
.store-category-nav, .category-nav { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-width: thin; }
.store-category-nav > *, .category-nav > * { flex: 0 0 auto; }

/* ==========================================================================
   6. DARK MODE HARDENING ACROSS STOREFRONT THEMES
   ========================================================================== */
.dark body {
    background-color: #090d16 !important;
    color: #f1f5f9 !important;
}

.dark .product-card {
    background-color: #111827 !important;
    border-color: #1f2937 !important;
    color: #f9fafb !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.dark .product-card h3,
.dark .product-card h4,
.dark .product-card .product-title,
.dark .product-card a {
    color: #f9fafb !important;
}

.dark .product-card .product-price,
.dark .product-card .price-tag {
    color: #f9fafb !important;
}

.dark .product-card .text-gray-900 {
    color: #f9fafb !important;
}

.dark .product-card .text-gray-800,
.dark .product-card .text-gray-700 {
    color: #cbd5e1 !important;
}

.dark .product-card .text-gray-600,
.dark .product-card .text-gray-500 {
    color: #94a3b8 !important;
}

/* General Headings in Dark Mode */
.dark h1, .dark h2, .dark h3, .dark h4 {
    color: #f8fafc;
}

/* Product Detail Page Dark Mode */
.dark #main-image-container,
.dark .gallery-thumb {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.dark .purchase-mode-card {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

.dark .purchase-mode-card.border-purple-600 {
    border-color: #8b5cf6 !important;
    background-color: rgba(139, 92, 246, 0.15) !important;
}

.dark .purchase-mode-card.border-emerald-600 {
    border-color: #10b981 !important;
    background-color: rgba(16, 185, 129, 0.15) !important;
}

.dark .purchase-mode-card.border-indigo-600 {
    border-color: #6366f1 !important;
    background-color: rgba(99, 102, 241, 0.15) !important;
}