/* Zeerab Store - Global Stylesheet */
/* Base styles are in the main layout <style> tag for performance */
/* This file contains additional component and utility styles */

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

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Selection color ── */
::selection { background: rgba(233, 69, 96, 0.15); color: #1a1a2e; }

/* ── Focus visible ── */
:focus-visible { outline: 2px solid #e94560; outline-offset: 2px; }

/* ── No JS fallbacks ── */
.no-js .accordion-body { max-height: none; }

/* ── Print styles ── */
@media print {
  .navbar, .wa-float, .footer, .btn { display: none !important; }
  body { font-size: 12pt; }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Loading spinner ── */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Number formatting ── */
.price-large {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  font-size: 2rem;
  color: #e94560;
}

/* ── Smooth image loading ── */
img {
  transition: opacity 0.3s ease;
}
img[loading] {
  opacity: 0;
}
img.loaded {
  opacity: 1;
}

/* ── Notification dot ── */
.notification-dot {
  width: 8px;
  height: 8px;
  background: #e94560;
  border-radius: 50%;
  display: inline-block;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.3); opacity: 0.7; }
}

/* ── Overlay ── */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(26, 26, 46, 0.5);
  backdrop-filter: blur(4px);
  z-index: 998;
  display: none;
}
.overlay.active { display: block; }