/* Custom CSS Styles for Affiliate Digital Store */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&display=swap');

:root {
  --font-sora: 'Sora', sans-serif;
  --radius-custom: 12px;
}

body {
  font-family: var(--font-sora);
  transition: background-color 0.35s ease, color 0.35s ease;
  overflow-x: hidden;
}

/* Base Body Themes */
.dark body {
  background-color: #030712;
  color: #f3f4f6;
}

html:not(.dark) body {
  background-color: #f8fafc;
  color: #0f172a;
}

/* Ambient Glow Orbs Background Effect */
.glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  z-index: 0;
  transition: opacity 0.5s ease;
}

.dark .glow-orb-cyan {
  background: radial-gradient(circle, rgba(6, 182, 212, 0.4) 0%, rgba(59, 130, 246, 0) 70%);
}

.dark .glow-orb-blue {
  background: radial-gradient(circle, rgba(99, 102, 241, 0.35) 0%, rgba(168, 85, 247, 0) 70%);
}

html:not(.dark) .glow-orb-cyan {
  background: radial-gradient(circle, rgba(186, 230, 253, 0.65) 0%, rgba(241, 245, 249, 0) 70%);
}

html:not(.dark) .glow-orb-blue {
  background: radial-gradient(circle, rgba(224, 231, 255, 0.7) 0%, rgba(241, 245, 249, 0) 70%);
}

/* PUBLIC FLOATING HEADER NAVBAR */
header.public-header {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.floating-nav {
  background: rgba(15, 23, 42, 0.88);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(51, 65, 85, 0.6);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 20px rgba(6, 182, 212, 0.15);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Header Shrink Animation on Scroll ONLY for Public Header */
header.public-header.header-shrunk {
  max-width: 66rem !important;
  top: 0.5rem !important;
}

header.public-header.header-shrunk .floating-nav {
  padding-top: 0.45rem !important;
  padding-bottom: 0.45rem !important;
  box-shadow: 0 18px 35px -5px rgba(0, 0, 0, 0.65), 0 0 22px rgba(6, 182, 212, 0.22);
  border-color: rgba(6, 182, 212, 0.45);
}

/* Light Mode Floating Nav */
html:not(.dark) .floating-nav {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid #cbd5e1;
  box-shadow: 0 8px 25px -4px rgba(15, 23, 42, 0.08), 0 0 15px rgba(2, 132, 199, 0.12);
}

html:not(.dark) header.public-header.header-shrunk .floating-nav {
  box-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.12), 0 0 20px rgba(2, 132, 199, 0.18);
  border-color: #0284c7;
}

/* Active Nav Pill Button */
.nav-pill-active {
  background: #06b6d4;
  color: #0f172a !important;
  box-shadow: 0 0 15px rgba(6, 182, 212, 0.5);
  font-weight: 700;
}

html:not(.dark) .nav-pill-active {
  background: #0284c7;
  color: #ffffff !important;
  box-shadow: 0 0 15px rgba(2, 132, 199, 0.35);
}

/* HERO BANNER GRADIENT OVERLAY (DARK LEFT ~88%, BRIGHT RIGHT ~18%) */
.hero-overlay-gradient {
  background: linear-gradient(to right, rgba(3, 7, 18, 0.88) 0%, rgba(3, 7, 18, 0.55) 50%, rgba(3, 7, 18, 0.18) 100%);
}

.hero-slide, 
.hero-slide *,
.hero-slide h1,
.hero-slide p,
.hero-slide span,
html:not(.dark) .hero-slide,
html:not(.dark) .hero-slide *,
html:not(.dark) .hero-slide h1,
html:not(.dark) .hero-slide p,
html:not(.dark) .hero-slide span {
  color: #ffffff !important;
}

.hero-slide p,
html:not(.dark) .hero-slide p {
  color: #e2e8f0 !important;
}

/* Category Filter Pills Light Mode Overrides */
html:not(.dark) .home-cat-pill:not(.cat-active),
html:not(.dark) .katalog-cat-pill:not(.cat-active) {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

html:not(.dark) .home-cat-pill:not(.cat-active):hover,
html:not(.dark) .katalog-cat-pill:not(.cat-active):hover {
  background-color: #e2e8f0 !important;
  color: #0284c7 !important;
  border-color: #0284c7 !important;
}

html:not(.dark) .home-cat-pill.cat-active,
html:not(.dark) .katalog-cat-pill.cat-active {
  background-color: #0284c7 !important;
  color: #ffffff !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.3) !important;
}

/* Settings Inactive Tab Button Light Mode Override */
html:not(.dark) #tab-btn-settings:not(.bg-cyan-500),
html:not(.dark) #tab-btn-security:not(.bg-cyan-500) {
  background-color: #f1f5f9 !important;
  color: #334155 !important;
  border: 1px solid #cbd5e1 !important;
}

html:not(.dark) #tab-btn-settings:not(.bg-cyan-500):hover,
html:not(.dark) #tab-btn-security:not(.bg-cyan-500):hover {
  background-color: #e2e8f0 !important;
  color: #0284c7 !important;
}

/* Admin Secondary & Public Header Mobile Buttons in Light Mode */
html:not(.dark) .admin-secondary-btn,
html:not(.dark) .theme-btn-public,
html:not(.dark) .mobile-menu-btn-public,
html:not(.dark) .theme-toggle-btn {
  background-color: #f1f5f9 !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

html:not(.dark) .admin-secondary-btn:hover,
html:not(.dark) .theme-btn-public:hover,
html:not(.dark) .mobile-menu-btn-public:hover,
html:not(.dark) .theme-toggle-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0284c7 !important;
}

/* FLOATING BLINKING LIGHT-TO-DARK GREEN WHATSAPP BUTTON ANIMATION */
.wa-float-btn {
  animation: waBlinkGreen 1.4s infinite ease-in-out;
}

@keyframes waBlinkGreen {
  0%, 100% {
    background-color: #22c55e;
    box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.85), 0 12px 28px -5px rgba(0, 0, 0, 0.45);
    transform: scale(1);
  }
  50% {
    background-color: #15803d;
    box-shadow: 0 0 0 16px rgba(34, 197, 94, 0), 0 12px 28px -5px rgba(0, 0, 0, 0.45);
    transform: scale(1.08);
  }
}

/* Card Styling */
.product-card {
  border-radius: 12px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.dark .product-card {
  background-color: rgba(15, 23, 42, 0.85);
  border-color: rgba(51, 65, 85, 0.8);
}

html:not(.dark) .product-card {
  background-color: #ffffff;
  border-color: #cbd5e1;
  box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.06);
}

.product-card:hover {
  transform: translateY(-4px);
}

.dark .product-card:hover {
  box-shadow: 0 14px 35px -10px rgba(6, 182, 212, 0.3);
  border-color: rgba(6, 182, 212, 0.5);
}

html:not(.dark) .product-card:hover {
  box-shadow: 0 14px 30px -5px rgba(2, 132, 199, 0.18);
  border-color: #0284c7;
}

/* Filter Item Animation */
.card-filter-item {
  transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-filter-item.filter-hidden {
  display: none !important;
  opacity: 0;
  transform: scale(0.95);
}

/* Entrance Animations */
.animate-fade-in-up {
  animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-zoom-in {
  animation: zoomIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes zoomIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: rgba(15, 23, 42, 0.5); }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #06b6d4; }

/* LIGHT MODE OVERRIDES FOR PUBLIC & ADMIN */

/* Public Footer in Light Mode */
html:not(.dark) footer {
  background-color: #ffffff !important;
  border-top: 1px solid #cbd5e1 !important;
}

html:not(.dark) footer h4 {
  color: #0f172a !important;
}

html:not(.dark) footer p,
html:not(.dark) footer li,
html:not(.dark) footer span {
  color: #334155 !important;
}

html:not(.dark) footer a {
  color: #0284c7 !important;
}

/* General Container & Card Overrides in Light Mode */
html:not(.dark) .bg-slate-900\/90,
html:not(.dark) .bg-slate-900\/80,
html:not(.dark) .bg-slate-900\/60 {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

html:not(.dark) .bg-slate-950,
html:not(.dark) .bg-slate-950\/60 {
  background-color: #f8fafc !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

/* Form Inputs in Light Mode */
html:not(.dark) input[type="text"],
html:not(.dark) input[type="password"],
html:not(.dark) input[type="email"],
html:not(.dark) input[type="url"],
html:not(.dark) input[type="number"],
html:not(.dark) select,
html:not(.dark) textarea {
  background-color: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

html:not(.dark) input:focus,
html:not(.dark) select:focus,
html:not(.dark) textarea:focus {
  border-color: #0284c7 !important;
  box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
}

/* Specific text-white rule excluding hero slides & active pills */
html:not(.dark) body :not(.hero-slide):not(.hero-slide *):not(.cat-active).text-white {
  color: #0f172a !important;
}

html:not(.dark) .text-slate-300 { color: #334155 !important; }
html:not(.dark) .text-slate-400 { color: #475569 !important; }
html:not(.dark) .border-slate-800,
html:not(.dark) .border-slate-700 { border-color: #cbd5e1 !important; }

/* Admin Panel Specific Light Mode Styling & Sidebar Hover Fix */
html:not(.dark) header.admin-header {
  background-color: #ffffff !important;
  border-bottom: 1px solid #cbd5e1 !important;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05) !important;
  position: sticky !important;
  top: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  transform: none !important;
}

html:not(.dark) aside#admin-sidebar {
  background-color: #ffffff !important;
  border-right: 1px solid #cbd5e1 !important;
}

/* ADMIN SIDEBAR HOVER IN LIGHT MODE FIX */
html:not(.dark) aside#admin-sidebar nav a:not(.bg-cyan-500) {
  color: #334155 !important;
}

html:not(.dark) aside#admin-sidebar nav a:not(.bg-cyan-500):hover {
  background-color: #f1f5f9 !important;
  color: #0284c7 !important;
}

html:not(.dark) .admin-theme-btn {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html:not(.dark) .admin-theme-btn:hover {
  background-color: #e2e8f0 !important;
}

html:not(.dark) .admin-pub-store-btn {
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  color: #0f172a !important;
}

html:not(.dark) .admin-pub-store-btn:hover {
  background-color: #e2e8f0 !important;
  color: #0284c7 !important;
}

html:not(.dark) table thead {
  background-color: #f1f5f9 !important;
  color: #475569 !important;
  border-bottom: 1px solid #cbd5e1 !important;
}

html:not(.dark) table tbody tr {
  border-bottom: 1px solid #e2e8f0 !important;
}

html:not(.dark) table tbody tr:hover {
  background-color: #f8fafc !important;
}