/* assets/css/style.css */

/* Design Tokens & Custom Variables */
:root {
  --color-brand: #10b981;
  --color-brand-hover: #059669;
  --color-brand-light: rgba(16, 185, 129, 0.08);
  --color-heading: #0f172a;
  --color-text: #334155; /* Slate 700 for better contrast */
  --color-text-dark: #0f172a;
  --color-bg-light: #f0fdf4;
  --font-heading: 'Outfit', sans-serif;
  --font-body: 'Outfit', sans-serif;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  background-color: #ffffff;
}

h1, h2, h3, h4, .font-outfit {
  font-family: var(--font-heading);
}

/* Clean & Modern Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f8fafc; 
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1; 
  border-radius: 9999px;
  border: 2px solid #f8fafc;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-brand); 
}

/* Smooth Scrolling */
html {
  scroll-behavior: smooth;
}

/* Hero Section Radial Glow Background */
.hero-radial-bg {
  background-color: #ffffff;
  background-image: 
    radial-gradient(circle at 85% 30%, #e2f6ee 0%, rgba(244, 250, 247, 0.4) 45%, rgba(255, 255, 255, 0) 80%),
    radial-gradient(circle at 15% 85%, #f4faf7 0%, rgba(255, 255, 255, 0) 50%);
}

/* Sticky Glassmorphism Navbar active state & transitions */
#navbar {
  transition: padding 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
  border-bottom: 1px solid transparent;
}

#navbar.nav-scrolled {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  background-color: rgba(248, 250, 252, 0.95) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 4px 24px rgba(10, 58, 48, 0.06);
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}

/* Default transparent state text/link colors (since the background is light) */
#navbar .menu-link {
  color: var(--color-text-dark) !important;
  opacity: 0.8;
}
#navbar .menu-link:hover {
  opacity: 1;
  color: var(--color-brand) !important;
}

#navbar .logo-text {
  color: var(--color-heading) !important;
}

#navbar #mobile-menu-btn {
  color: var(--color-heading) !important;
}

#navbar .admin-btn {
  color: var(--color-text-dark) !important;
  background-color: #ffffff;
  border: 1px solid rgba(15, 45, 38, 0.1) !important;
  transition: all 0.3s ease;
}
#navbar .admin-btn:hover {
  background-color: #f8fafc !important;
  border-color: var(--color-brand) !important;
  box-shadow: 0 4px 12px rgba(0, 177, 114, 0.05);
}

/* Premium Desktop Menu Underline Animation */
.menu-link {
  position: relative;
  transition: all 0.3s ease;
}
.menu-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -4px;
  left: 0;
  background-color: var(--color-brand);
  transition: width 0.3s ease;
}

.menu-link:hover::after,
.menu-link.active::after {
  width: 100%;
}
.menu-link.active {
  color: var(--color-brand) !important;
  opacity: 1 !important;
  font-weight: 600;
}

/* Animated Mobile Menu Dropdown */
#mobile-menu {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease-out;
}
#mobile-menu.open {
  max-height: 450px;
  opacity: 1;
}

/* Mobile Menu Inner Styling */
#mobile-menu .mobile-menu-inner {
  background-color: rgba(255, 255, 255, 0.98) !important;
  border-bottom-color: rgba(0, 177, 114, 0.08) !important;
}
#mobile-menu a {
  color: var(--color-text-dark) !important;
}
#mobile-menu a:hover {
  color: var(--color-brand) !important;
  background-color: var(--color-brand-light);
}
#mobile-menu hr {
  border-color: rgba(0, 177, 114, 0.08);
}

/* Premium Springy Modal Animations */
#info-modal {
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
  opacity: 0;
  visibility: hidden;
}
#info-modal.modal-open {
  opacity: 1;
  visibility: visible;
}
#info-modal .bg-white {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease-in-out;
  transform: scale(0.9) translateY(20px);
  opacity: 0;
}
#info-modal.modal-open .bg-white {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* Dynamic Active State Filter Buttons */
.btn-filter {
  transition: all 0.3s ease;
}
.btn-filter.active {
  background-color: var(--color-brand) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 10px 15px -3px rgba(0, 177, 114, 0.25), 0 4px 6px -4px rgba(0, 177, 114, 0.2) !important;
}

/* Float Animation */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}
.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Soft Pulsing Ring for Badge Alert */
@keyframes pulse-ring {
  0% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(0, 177, 114, 0.2); }
  70% { transform: scale(1.02); box-shadow: 0 0 0 8px rgba(0, 177, 114, 0); }
  100% { transform: scale(0.96); box-shadow: 0 0 0 0 rgba(0, 177, 114, 0); }
}
.pulse-badge {
  animation: pulse-ring 3s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Glassmorphism Floating Badge style */
.glass-badge {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow: 0 8px 32px 0 rgba(10, 58, 48, 0.06);
}/* --- DARK MODE SYSTEM OVERRIDES --- */
.dark body {
  color: #ffffff !important;
  background-color: #090d16 !important; /* deep slate-950 */
}

/* Bulletproof Global Background Overrides for Dark Mode */
.dark .bg-white,
.dark .bg-slate-50,
.dark .bg-slate-100 {
  background-color: #0d1527 !important;
}

/* Specific section overrides */
.dark section#unggulan,
.dark section#katalog {
  background-color: #090d16 !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Cards & Components backgrounds */
.dark #stats-section,
.dark .product-card,
.dark #no-results-msg,
.dark #stats-section > div,
.dark .grid > div.bg-white,
.dark .bg-white.rounded-2xl {
  background-color: #0d1527 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Bulletproof Global Text Overrides for Dark Mode */
.dark .text-slate-900,
.dark .text-slate-800,
.dark .text-slate-750,
.dark .text-slate-700,
.dark .text-brand-900,
.dark .text-slate-650 {
  color: #ffffff !important;
}

.dark .text-slate-500,
.dark .text-slate-400 {
  color: #94a3b8 !important;
}

/* Inactive Filters and Inputs */
.dark .btn-filter:not(.active) {
  background-color: #0b1329 !important;
  color: rgba(255, 255, 255, 0.8) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.dark #search-input {
  background-color: #0b1329 !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* Scrollbars */
.dark ::-webkit-scrollbar-track {
  background: #0f172a; 
}
.dark ::-webkit-scrollbar-thumb {
  background: #1e293b; 
  border: 2px solid #0f172a;
}

/* Hero section */
.dark .hero-radial-bg {
  background-color: #0b0f19 !important;
  background-image: 
    radial-gradient(circle at 85% 30%, #062f22 0%, rgba(11, 15, 25, 0.4) 45%, rgba(11, 15, 25, 0) 80%),
    radial-gradient(circle at 15% 85%, #05261b 0%, rgba(11, 15, 25, 0) 50%) !important;
}

/* Navbar specific elements with high specificity */
.dark #navbar {
  background-color: rgba(15, 23, 42, 0.95) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
.dark #navbar.nav-scrolled {
  background-color: rgba(15, 23, 42, 0.95) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.dark #navbar .menu-link {
  color: rgba(255, 255, 255, 0.8) !important;
}
.dark #navbar .menu-link:hover,
.dark #navbar .menu-link.active {
  color: var(--color-brand) !important;
}

.dark #navbar .logo-text {
  color: #ffffff !important;
}

.dark #navbar #mobile-menu-btn {
  color: #ffffff !important;
}

.dark #navbar .admin-btn {
  color: #ffffff !important;
  background-color: #1e293b !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}
.dark #navbar .admin-btn:hover {
  background-color: #334155 !important;
}

.dark #mobile-menu .mobile-menu-inner {
  background-color: rgba(15, 23, 42, 0.98) !important;
  border-bottom-color: rgba(255, 255, 255, 0.05) !important;
}
.dark #mobile-menu a {
  color: rgba(255, 255, 255, 0.85) !important;
}
.dark #mobile-menu a:hover {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: var(--color-brand) !important;
}
.dark #mobile-menu hr {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

.dark .glass-badge {
  background: rgba(15, 23, 42, 0.85) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Detail page specific element overrides */
.dark .bg-gradient-to-br {
  background-image: linear-gradient(to bottom right, rgba(16, 185, 129, 0.05), #090d16) !important;
  border-color: rgba(16, 185, 129, 0.15) !important;
}