/* =============================================
   SCENEKEY STORE - Custom Styles
   ============================================= */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');

:root {
  --primary: #003087;
  --primary-dark: #001f5b;
  --primary-light: #0041b8;
  --accent: #FFD700;
  --accent-hover: #f5c800;
  --gray-bg: #F3F4F6;
  --text-dark: #111827;
  --text-mid: #374151;
  --text-light: #6B7280;
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: #f8f9fb;
  color: var(--text-dark);
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #003087; border-radius: 3px; }

/* Navbar */
.navbar-gradient {
  background: linear-gradient(135deg, #002060 0%, #003087 50%, #0041b8 100%);
}

/* Hero Section */
.hero-gradient {
  background: linear-gradient(135deg, #001233 0%, #002060 30%, #003087 60%, #004ab5 100%);
}

.hero-pattern {
  background-image: radial-gradient(circle at 20% 50%, rgba(255,215,0,0.08) 0%, transparent 50%),
                    radial-gradient(circle at 80% 20%, rgba(0,100,200,0.15) 0%, transparent 40%);
}

/* Product Cards */
.product-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.product-card:hover {
  transform: translateY(-4px);
}

/* Category Cards */
.category-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.category-card:hover {
  transform: translateY(-3px);
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, #003087, #0041b8);
  color: white;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #001f5b, #003087);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(0,48,135,0.3);
}

.btn-accent {
  background: linear-gradient(135deg, #FFD700, #FFC107);
  color: #111;
  transition: all 0.2s ease;
}
.btn-accent:hover {
  background: linear-gradient(135deg, #f5c800, #e6b800);
  transform: translateY(-1px);
  box-shadow: 0 4px 15px rgba(255,215,0,0.4);
}

/* Line Clamp */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; }

/* Smooth transitions */
.transition-smooth {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Category Scroll on Mobile */
.category-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.category-scroll::-webkit-scrollbar { display: none; }

/* Glass Effect */
.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Promo Banner */
.promo-gradient {
  background: linear-gradient(135deg, #FF6B6B, #FF8E53);
}

/* Deal Timer */
.timer-box {
  background: rgba(0,0,0,0.1);
  border-radius: 8px;
  padding: 4px 8px;
  font-weight: 700;
  font-size: 1.1rem;
  min-width: 2.5rem;
  text-align: center;
}

/* Input Focus */
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 48, 135, 0.15);
}

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Bottom Mobile Nav */
.mobile-nav {
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}

/* Range Input */
input[type='range'] {
  accent-color: var(--primary);
}

/* Checkbox & Radio */
input[type='checkbox'], input[type='radio'] {
  accent-color: var(--primary);
}

/* Marquee for brands */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  animation: marquee 20s linear infinite;
}
.marquee-track:hover {
  animation-play-state: paused;
}

/* Page fade in */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  animation: fadeInUp 0.5s ease forwards;
}

/* Text Shadow Utility */
.text-shadow { text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.text-shadow-lg { text-shadow: 0 4px 16px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.4); }

/* Quantity Input */
.qty-input {
  -moz-appearance: textfield;
  appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Progress Steps */
.step-active { background: #003087; color: white; }
.step-done { background: #22c55e; color: white; }
.step-inactive { background: #e5e7eb; color: #6b7280; }

/* Section Divider */
.section-divider {
  height: 3px;
  background: linear-gradient(90deg, #003087, #0041b8, #FFD700, transparent);
  border-radius: 2px;
}

/* Responsive Images */
img { max-width: 100%; height: auto; }

/* Hover Underline Effect */
.hover-underline {
  position: relative;
}
.hover-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: #FFD700;
  transition: width 0.3s ease;
}
.hover-underline:hover::after { width: 100%; }

/* =============================================
   RESPONSIVE UTILITIES
   ============================================= */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 769px) {
  .show-mobile-only { display: none !important; }
}

@media (min-width: 1024px) {
  .product-grid { grid-template-columns: repeat(4, 1fr); }
}