/* ============================================================
   PREMIUM THEME — Car Option Store
   Inspired by: Porsche / BMW / Tesla / Apple / Linear / Awwwards
   ============================================================ */

/* ============================================================
   CSS Variables
   ============================================================ */
:root {
  /* Backgrounds */
  --bg-main:        #0B0B0C;
  --bg-secondary:   #111214;
  --bg-section:     #17181B;
  --bg-card:        #1D1F22;
  --bg-card-hover:  #23262A;
  --bg-footer:      #090A0B;

  /* Accent */
  --accent:         #FF8A00;
  --accent-light:   #FFB347;
  --accent-hover:   #E67A00;
  --accent-glow:    rgba(255,138,0,0.35);
  --accent-glow-sm: rgba(255,138,0,0.15);
  --accent-glow-lg: rgba(255,138,0,0.55);

  /* Borders */
  --border:         rgba(255,255,255,0.08);
  --border-hover:   rgba(255,138,0,0.45);
  --border-card:    rgba(255,255,255,0.06);

  /* Text */
  --text:           #FFFFFF;
  --text-secondary: #B8B8B8;
  --text-muted:     #6B6B6B;

  /* Shadows */
  --shadow-card:    0 4px 24px rgba(0,0,0,0.5);
  --shadow-hover:   0 0 32px var(--accent-glow), 0 16px 48px rgba(0,0,0,0.6);
  --shadow-btn:     0 4px 20px var(--accent-glow);

  /* Transitions */
  --t-fast:   150ms ease;
  --t-normal: 300ms ease;
  --t-slow:   500ms ease;
}

/* ============================================================
   BODY & GLOBAL BACKGROUND — layered depth
   ============================================================ */
body {
  background-color: var(--bg-main);
  color: var(--text);
  font-family: "Vazirmatn", sans-serif;

  /* Layered background: noise + radial glow + vignette */
  background-image:
    /* soft orange radial halo at top-center */
    radial-gradient(ellipse 90% 45% at 50% -5%,
      rgba(255,138,0,0.09) 0%, transparent 65%),
    /* secondary subtle glow bottom-right */
    radial-gradient(ellipse 60% 40% at 85% 110%,
      rgba(255,138,0,0.05) 0%, transparent 60%),
    /* very subtle noise texture */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E"),
    /* dot grid — very faint */
    radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 100% 100%, 100% 100%, 300px 300px, 28px 28px;
  background-attachment: fixed, fixed, fixed, fixed;
}

/* Global section separation */
section + section {
  position: relative;
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.1);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ============================================================
   HEADER / NAVBAR — floating glass
   ============================================================ */
header {
  background: rgba(11,11,12,0.75) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 1px 0 rgba(255,138,0,0.06), 0 8px 32px rgba(0,0,0,0.35) !important;
  transition: background var(--t-normal), box-shadow var(--t-normal) !important;
}

/* Logo icon glow */
header .bg-primary {
  box-shadow: 0 0 20px var(--accent-glow-sm), 0 0 6px var(--accent-glow) !important;
}

/* Nav links — animated underline */
header nav a {
  position: relative;
  color: var(--text-secondary) !important;
  transition: color var(--t-fast) !important;
}
header nav a::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transition: width var(--t-normal);
  box-shadow: 0 0 8px var(--accent-glow);
}
header nav a:hover { color: var(--text) !important; }
header nav a:hover::after { width: 100%; }

/* Cart badge glow */
#cart_items_count {
  background: var(--accent) !important;
  box-shadow: 0 0 10px var(--accent-glow), 0 0 4px var(--accent-glow-lg) !important;
  animation: badgePulse 2.5s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { box-shadow: 0 0 10px var(--accent-glow); }
  50%       { box-shadow: 0 0 18px var(--accent-glow-lg), 0 0 6px var(--accent); }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero-section {
  position: relative;
}

/* cinematic vignette overlay — فقط پایین صفحه، سمت چپ (ماشین) بدون تاریکی */
.hero-section::after {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 80% 40% at 50% 100%, rgba(11,11,12,0.50) 0%, transparent 70%);
  pointer-events: none;
  z-index: 5;
}

.hero-height {
  height: 58vh;
  min-height: 420px;
  max-height: 760px;
}
@media (min-width: 640px)  { .hero-height { height: 62vh; } }
@media (min-width: 1024px) { .hero-height { height: 68vh; max-height: 760px; } }
@media (max-width: 639px)  { .hero-height { height: 62vh; min-height: 360px; } }

/* gradient overlay: right-to-left for RTL layout */
.hero-overlay-rtl {
  background: linear-gradient(
    to left,
    rgba(11,11,12,0.97) 0%,
    rgba(11,11,12,0.75) 40%,
    rgba(11,11,12,0.25) 70%,
    transparent 100%
  );
}

/* Hero CTA button */
.hero-cta-btn {
  background: var(--accent);
  color: #000;
  font-weight: 800;
  letter-spacing: 0.5px;
  border-radius: 12px;
  box-shadow: 0 4px 20px var(--accent-glow), 0 0 40px rgba(255,138,0,0.15);
  transition: all var(--t-normal);
}
.hero-cta-btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 6px 32px var(--accent-glow-lg), 0 0 60px rgba(255,138,0,0.2);
  transform: translateY(-2px) scale(1.03);
}

/* Hero text styles */
.slide-title {
  text-shadow: 0 2px 20px rgba(0,0,0,0.8);
  font-size: clamp(1.8rem, 4vw, 3.5rem);
  line-height: 1.2;
  letter-spacing: -0.5px;
}
.slide-description { text-shadow: 0 1px 8px rgba(0,0,0,0.6); }

/* Slider nav buttons */
.slider-nav {
  background: rgba(17,18,20,0.7) !important;
  backdrop-filter: blur(12px);
  border: 1px solid var(--border) !important;
  transition: all var(--t-fast) !important;
}
.slider-nav:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 20px var(--accent-glow) !important;
}

/* Slider dots */
.slider-dot { background: rgba(255,255,255,0.25) !important; transition: all var(--t-normal); }
.slider-dot.active {
  background: var(--accent) !important;
  width: 2rem !important;
  box-shadow: 0 0 10px var(--accent-glow);
}

/* ============================================================
   SMART SEARCH BAR
   ============================================================ */
.smart-search-section,
section.py-8 {
  position: relative;
  z-index: 10;
}

/* The glass card */
.search-glass-card {
  background: rgba(23,24,27,0.85);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.05);
  position: relative;
  overflow: hidden;
}
.search-glass-card::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 160px;
  background: radial-gradient(ellipse, rgba(255,138,0,0.08) 0%, transparent 70%);
  pointer-events: none;
}

/* select input inside search */
.search-glass-card select,
.search-glass-card input {
  background: rgba(11,11,12,0.7) !important;
  border: 1px solid var(--border) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}
.search-glass-card select:focus,
.search-glass-card input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255,138,0,0.15) !important;
}

/* ============================================================
   SECTION BACKGROUNDS — alternating depth
   ============================================================ */
.section-main     { background-color: var(--bg-main); }
.section-alt      { background-color: var(--bg-secondary); }
.section-deep     { background-color: var(--bg-section); }

/* Subtle top-edge glow divider */
.section-glow-top {
  position: relative;
}
.section-glow-top::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right,
    transparent 0%, rgba(255,138,0,0.3) 50%, transparent 100%);
}

/* bg-[#0f0f0f] override */
.bg-\[#0f0f0f\] { background-color: var(--bg-secondary) !important; }

/* ============================================================
   PREMIUM CARD — glassmorphism + orange glow on hover
   ============================================================ */
.premium-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  transition: all var(--t-normal);
  position: relative;
  overflow: hidden;
}
/* top-edge shimmer line */
.premium-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,0.06), transparent);
  opacity: 0;
  transition: opacity var(--t-normal);
}
.premium-card:hover {
  background: var(--bg-card-hover);
  border-color: var(--border-hover);
  box-shadow: var(--shadow-hover);
  transform: translateY(-5px);
}
.premium-card:hover::before { opacity: 1; }

/* ============================================================
   PRODUCT CARD — full premium redesign
   ============================================================ */
.product-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-card) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-card) !important;
  transition: transform var(--t-normal), box-shadow var(--t-normal), border-color var(--t-normal) !important;
  position: relative;
  overflow: hidden;
}

/* inner top-line shimmer */
.product-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,138,0,0.3), transparent);
  opacity: 0;
  transition: opacity var(--t-normal);
  z-index: 2;
}

.product-card:hover {
  border-color: rgba(255,138,0,0.35) !important;
  box-shadow:
    0 0 0 1px rgba(255,138,0,0.15),
    0 0 30px rgba(255,138,0,0.12),
    0 20px 60px rgba(0,0,0,0.55) !important;
  transform: translateY(-6px) !important;
}
.product-card:hover::before { opacity: 1; }

/* image zoom */
.product-card:hover .product-card-image img {
  transform: scale(1.07) !important;
}
.product-card-image img { transition: transform var(--t-slow) !important; }

/* action buttons */
.product-card-actions {
  opacity: 0;
  transform: translateX(8px);
  transition: opacity var(--t-normal), transform var(--t-normal) !important;
  pointer-events: none;
}
.product-card:hover .product-card-actions {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

/* action button circles */
.product-card-actions button {
  background: rgba(11,11,12,0.85) !important;
  backdrop-filter: blur(8px);
  border: 1px solid var(--border) !important;
  transition: all var(--t-fast) !important;
}
.product-card-actions button:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 14px var(--accent-glow) !important;
}

/* ============================================================
   PRODUCT CARD — badge & price
   ============================================================ */
/* Discount badge */
.product-card .bg-red-600 {
  background: linear-gradient(135deg, #e53e3e, #c53030) !important;
  box-shadow: 0 2px 8px rgba(229,62,62,0.4) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}
/* New badge */
.product-card .bg-primary {
  background: var(--accent) !important;
  color: #000 !important;
  box-shadow: 0 2px 8px var(--accent-glow-sm) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

/* Add to cart button */
.add-to-cart-btn {
  background: var(--accent) !important;
  color: #000 !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 16px var(--accent-glow-sm) !important;
  transition: all var(--t-fast) !important;
}
.add-to-cart-btn:hover {
  background: var(--accent-hover) !important;
  box-shadow: 0 6px 24px var(--accent-glow), 0 0 40px rgba(255,138,0,0.15) !important;
  transform: scale(1.08) !important;
}

/* ============================================================
   CATEGORY CARDS
   ============================================================ */
/* category grid card hover — orange glow border */
section a.group.relative.overflow-hidden.rounded-2xl {
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--shadow-card);
  transition: all var(--t-normal) !important;
}
section a.group.relative.overflow-hidden.rounded-2xl:hover {
  border-color: rgba(255,138,0,0.5) !important;
  box-shadow: 0 0 28px rgba(255,138,0,0.18), 0 16px 48px rgba(0,0,0,0.55) !important;
}
/* zoom image on hover — inherited from existing group-hover:scale-110 */

/* category title hover to accent */
section a.group h3 { transition: color var(--t-fast) !important; }
section a.group:hover h3 { color: var(--accent) !important; }

/* ============================================================
   PROMOTIONAL BANNERS (3-col)
   ============================================================ */
.group.relative.rounded-2xl.overflow-hidden {
  border: 1px solid var(--border-card) !important;
  box-shadow: var(--shadow-card);
  transition: all var(--t-normal) !important;
}
.group.relative.rounded-2xl.overflow-hidden:hover {
  border-color: rgba(255,138,0,0.45) !important;
  box-shadow: 0 0 32px rgba(255,138,0,0.2), 0 20px 56px rgba(0,0,0,0.6) !important;
}

/* ============================================================
   FEATURE SECTION (4 icons row)
   ============================================================ */
/* background override */
section.py-12.bg-\[#0f0f0f\],
section.py-12.lg\:py-16.bg-\[#0f0f0f\] {
  background: var(--bg-secondary) !important;
  position: relative;
}
section.py-12.bg-\[#0f0f0f\]::before,
section.py-12.lg\:py-16.bg-\[#0f0f0f\]::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,138,0,0.25), transparent);
}

/* icon container */
.flex.size-14.items-center.justify-center.rounded-2xl.bg-primary\/10 {
  background: rgba(255,138,0,0.08) !important;
  border: 1px solid rgba(255,138,0,0.12) !important;
  box-shadow: 0 0 20px rgba(255,138,0,0.05);
  transition: all var(--t-normal) !important;
}
.group:hover .flex.size-14.items-center.justify-center.rounded-2xl.bg-primary\/10 {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 24px var(--accent-glow), 0 0 8px var(--accent-glow-sm) !important;
}

/* ============================================================
   BUTTONS — global premium style
   ============================================================ */
.btn-premium, .btn-cta, .btn-cta-lg, .btn-cta-sm {
  background: var(--accent) !important;
  color: #000 !important;
  font-weight: 700 !important;
  border: none !important;
  border-radius: 10px !important;
  cursor: pointer;
  transition: all var(--t-fast) !important;
  box-shadow: var(--shadow-btn);
}
.btn-premium:hover, .btn-cta:hover, .btn-cta-lg:hover, .btn-cta-sm:hover {
  background: var(--accent-hover) !important;
  box-shadow: 0 6px 28px var(--accent-glow), 0 0 50px rgba(255,138,0,0.12) !important;
  transform: translateY(-2px) !important;
}
.btn-premium:active, .btn-cta:active { transform: translateY(0) scale(0.98) !important; }

/* Tailwind bg-primary overrides */
.bg-primary { background-color: var(--accent) !important; }
.hover\:bg-primary-dark:hover { background-color: var(--accent-hover) !important; }
.text-primary { color: var(--accent) !important; }
.border-primary { border-color: var(--accent) !important; }
.ring-primary, .focus\:ring-primary:focus { --tw-ring-color: rgba(255,138,0,0.4) !important; }

/* glow on hover for any orange button */
.btn-glow:hover {
  box-shadow: 0 4px 24px var(--accent-glow), 0 0 40px rgba(255,138,0,0.15) !important;
}

/* Scroll-to-top button */
#scroll-top-btn {
  background: var(--accent) !important;
  box-shadow: 0 4px 20px var(--accent-glow) !important;
}
#scroll-top-btn:hover {
  box-shadow: 0 6px 28px var(--accent-glow-lg) !important;
  transform: translateY(-2px) !important;
}

/* ============================================================
   NEWSLETTER SECTION
   ============================================================ */
/* email input in newsletter */
section input[type="email"] {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: var(--text) !important;
  border-radius: 12px !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}
section input[type="email"]:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255,138,0,0.15) !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background-color: var(--bg-footer) !important;
  border-top: 1px solid var(--border) !important;
  position: relative;
  overflow: hidden;
}
/* ambient glow */
footer::before {
  content: '';
  position: absolute;
  bottom: -120px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 300px;
  background: radial-gradient(ellipse, rgba(255,138,0,0.05) 0%, transparent 70%);
  pointer-events: none;
}

/* footer links */
footer a {
  transition: color var(--t-fast) !important;
}
footer a:hover { color: var(--accent) !important; }

/* social icon buttons */
footer .size-10.rounded-lg {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid var(--border) !important;
  transition: all var(--t-fast) !important;
}
footer .size-10.rounded-lg:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  box-shadow: 0 0 16px var(--accent-glow) !important;
  color: #000 !important;
}

/* ============================================================
   SECTION HEADERS — accent left-border
   ============================================================ */
h2.border-r-4.border-primary {
  border-color: var(--accent) !important;
  background: linear-gradient(to left, transparent, rgba(255,138,0,0.04));
  padding-right: 12px !important;
  border-radius: 0 2px 2px 0;
}

/* "View all" links */
a.text-primary.font-bold { color: var(--accent) !important; }
a.text-primary.font-bold:hover { color: var(--accent-light) !important; }

/* ============================================================
   MOBILE MENU
   ============================================================ */
#mobile-menu {
  background: rgba(11,11,12,0.97) !important;
  backdrop-filter: blur(24px) !important;
  border-left: 1px solid var(--border) !important;
}
#mobile-menu-overlay { background: rgba(0,0,0,0.75) !important; }

/* ============================================================
   SEARCH BAR (header dropdown)
   ============================================================ */
#search-bar {
  background: rgba(17,18,20,0.98) !important;
  backdrop-filter: blur(16px) !important;
  border-top: 1px solid var(--border) !important;
}
#search-bar input {
  background: rgba(29,31,34,0.9) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}
#search-bar input:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255,138,0,0.12) !important;
}

/* ============================================================
   SECTION PATTERN BACKGROUNDS
   ============================================================ */
.section-pattern {
  background-color: var(--bg-section);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,138,0,0.04) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255,138,0,0.03) 0%, transparent 50%);
}
.automotive-pattern {
  background-color: var(--bg-main);
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(255,138,0,0.06) 0%, transparent 55%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FF8A00' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.dot-pattern {
  background-color: var(--bg-section);
  background-image: radial-gradient(circle, rgba(255,138,0,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}
.featured-section-bg {
  background-color: var(--bg-main);
  background-image:
    radial-gradient(ellipse 50% 40% at 50% 0%, rgba(255,138,0,0.07) 0%, transparent 60%),
    url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FF8A00' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

/* ============================================================
   GRADIENT DIVIDERS between sections
   ============================================================ */
.section-divider-gradient {
  background: linear-gradient(to right, transparent, rgba(255,138,0,0.2), transparent);
  height: 1px;
}
.gradient-fade-bottom {
  background: linear-gradient(to top, var(--bg-main) 0%, transparent 100%);
}
.gradient-fade-top {
  background: linear-gradient(to bottom, var(--bg-main) 0%, transparent 100%);
}
.orange-glow-gradient {
  background: radial-gradient(ellipse at center, rgba(255,138,0,0.12) 0%, transparent 65%);
}

/* ============================================================
   SKELETON LOADING — dark theme
   ============================================================ */
.skeleton {
  background: linear-gradient(90deg,
    rgba(29,31,34,1) 25%,
    rgba(35,38,42,1) 50%,
    rgba(29,31,34,1) 75%
  ) !important;
  background-size: 200% 100% !important;
}

/* ============================================================
   FORM INPUTS (global dark)
   ============================================================ */
input, select, textarea {
  background-color: var(--bg-card) !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px rgba(255,138,0,0.12) !important;
  outline: none !important;
}
input::placeholder, textarea::placeholder {
  color: var(--text-muted) !important;
}

/* ============================================================
   MICRO INTERACTIONS — global
   ============================================================ */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 12px var(--accent-glow); }
  50%       { box-shadow: 0 0 24px var(--accent-glow-lg), 0 0 8px var(--accent); }
}
.glow-pulse { animation: glowPulse 2.5s ease-in-out infinite; }

@keyframes floatUp {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-6px); }
}
.float-anim { animation: floatUp 3s ease-in-out infinite; }

/* ============================================================
   RESPONSIVE — prevent overflow issues
   ============================================================ */
@media (max-width: 640px) {
  .product-card:hover { transform: translateY(-3px) !important; }
  .hero-cta-btn:hover { transform: none !important; }
}

/* ============================================================
   PRODUCT PAGE — tabs, gallery thumbnails, price box
   ============================================================ */
/* Tab buttons */
.tab-btn {
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast) !important;
}
.tab-btn:hover { color: var(--text) !important; }

/* Thumbnail active state */
.thumbnail-btn {
  transition: border-color var(--t-fast), box-shadow var(--t-fast) !important;
}
.thumbnail-btn:hover {
  border-color: var(--accent) !important;
  box-shadow: 0 0 10px var(--accent-glow-sm) !important;
}

/* Similar products empty state */
#similarProducts {
  background: var(--bg-card) !important;
  border-color: var(--border-card) !important;
}

/* ============================================================
   FILTER SIDEBAR — range slider accent
   ============================================================ */
input[type="range"]::-webkit-slider-thumb {
  background: var(--accent) !important;
  box-shadow: 0 0 8px var(--accent-glow) !important;
}

/* ============================================================
   CART & CHECKOUT pages — background
   ============================================================ */
.cart-page-bg,
.checkout-page-bg {
  background: var(--bg-main);
  min-height: 100vh;
}

/* Table rows in cart */
.cart-row {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 12px;
  transition: border-color var(--t-fast);
}
.cart-row:hover { border-color: var(--border-hover); }

/* ============================================================
   SEARCH PAGE — result items
   ============================================================ */
.search-result-item {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  transition: all var(--t-normal);
}
.search-result-item:hover {
  border-color: rgba(255,138,0,0.3);
  box-shadow: 0 0 20px rgba(255,138,0,0.1), 0 8px 32px rgba(0,0,0,0.4);
  transform: translateY(-3px);
}

/* ============================================================
   BREADCRUMBS
   ============================================================ */
.breadcrumb-item { color: var(--text-secondary); transition: color var(--t-fast); }
.breadcrumb-item:hover { color: var(--text); }
.breadcrumb-sep { color: var(--text-muted); }

/* ============================================================
   ACCOUNT / LOGIN PAGE
   ============================================================ */
.auth-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 24px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.5);
}

/* ============================================================
   PAYMENT / CHECKOUT
   ============================================================ */
.order-summary-box {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 20px;
}

/* ============================================================
   VEHICLE SEARCH PAGE
   ============================================================ */
.vehicle-card {
  background: var(--bg-card);
  border: 1px solid var(--border-card);
  border-radius: 16px;
  transition: all var(--t-normal);
}
.vehicle-card:hover {
  border-color: rgba(255,138,0,0.35);
  box-shadow: 0 0 24px rgba(255,138,0,0.12), 0 12px 40px rgba(0,0,0,0.5);
  transform: translateY(-4px);
}

/* ============================================================
   ACCESS DENIED & ERROR PAGES
   ============================================================ */
.error-page-icon {
  color: var(--accent);
  filter: drop-shadow(0 0 20px var(--accent-glow));
}

/* ============================================================
   ADMIN AREA — keep existing, just unify bg
   ============================================================ */
.admin-sidebar { background: var(--bg-footer) !important; }
.admin-content { background: var(--bg-main) !important; }

/* ============================================================
   PROSE (article body)
   ============================================================ */
.prose { color: var(--text-secondary) !important; }
.prose h1,.prose h2,.prose h3,.prose h4 { color: var(--text) !important; }
.prose a { color: var(--accent) !important; }
.prose strong { color: var(--text) !important; }
.prose hr { border-color: var(--border) !important; }
.prose blockquote {
  border-right-color: var(--accent) !important;
  background: rgba(255,138,0,0.04) !important;
  border-radius: 0 8px 8px 0;
}

/* ============================================================
   HERO SECTION — body background-image را کنار می‌زنیم
   ============================================================ */

/* یه wrapper سفید/solid پشت hero می‌ذاریم تا body bg-image نبینیم */
.hero-bg-blocker {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #07070A; /* همون رنگ bg-main ولی solid */
}

/* hero section: isolation جدید برای stacking context */
section[data-hero] {
  isolation: isolate;
  contain: layout paint;
}