/* ============================================
   MOSS MOUNTAIN OUTFITTERS — DARK MODE
   Realistic starry night sky + shooting stars
   ============================================ */

/* ============ HEADER TOGGLE (in nav bar) ============ */
.theme-toggle-header {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.theme-toggle-header:hover {
  background: rgba(255,255,255,0.1);
  transform: rotate(20deg);
}

.header.scrolled .theme-toggle-header:hover,
.header.mega-open .theme-toggle-header:hover {
  background: rgba(43,95,43,0.06);
}

.theme-toggle-header svg {
  width: 20px;
  height: 20px;
  stroke: var(--cream);
  transition: stroke 0.35s, transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.header.scrolled .theme-toggle-header svg,
.header.mega-open .theme-toggle-header svg {
  stroke: var(--text-dark);
}

.theme-toggle-header .icon-sun { display: none; }
.theme-toggle-header .icon-moon { display: block; }

[data-theme="dark"] .theme-toggle-header .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle-header .icon-moon { display: none; }

[data-theme="dark"] .theme-toggle-header svg { stroke: var(--tan); }
[data-theme="dark"] .header.scrolled .theme-toggle-header svg,
[data-theme="dark"] .header.mega-open .theme-toggle-header svg { stroke: var(--tan); }

[data-theme="dark"] .theme-toggle-header:hover {
  background: rgba(200,169,110,0.1);
}

/* Hide old floating toggle if still present */
.darkmode-toggle { display: none; }

/* ============ DARK MODE VIDEO BACKGROUND ============ */
.dark-video-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: none;
  overflow: hidden;
}

.dark-video-bg video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.dark-video-bg video.playing {
  opacity: 0.25;
}

.dark-video-bg video {
  /* Slow the playback down */
}

[data-theme="dark"] .dark-video-bg {
  display: block;
}

/* ============ DARK MODE BODY ============ */
[data-theme="dark"] body {
  background: #080c12;
  color: #e0ddd6;
}

/* No old CSS backgrounds — Mux video is the sole dark mode backdrop */
.shooting-star-container { display: none; }

/* ============ HEADER DARK ============ */
[data-theme="dark"] .header.scrolled,
[data-theme="dark"] .header.mega-open {
  background: rgba(8,12,18,0.95);
  backdrop-filter: blur(20px);
  box-shadow: 0 2px 24px rgba(0,0,0,0.4);
}

[data-theme="dark"] .header-topbar {
  background: rgba(0,0,0,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

[data-theme="dark"] .header.scrolled .mega-nav-item,
[data-theme="dark"] .header.mega-open .mega-nav-item {
  color: rgba(224,221,214,0.65);
}

[data-theme="dark"] .header.scrolled .mega-nav-item:hover,
[data-theme="dark"] .header.mega-open .mega-nav-item:hover,
[data-theme="dark"] .header.scrolled .mega-nav-item.active,
[data-theme="dark"] .header.mega-open .mega-nav-item.active {
  color: var(--tan);
}

[data-theme="dark"] .header.scrolled .mega-nav-item::after,
[data-theme="dark"] .header.mega-open .mega-nav-item::after {
  background: var(--tan);
}

[data-theme="dark"] .header.scrolled .header-search-btn svg,
[data-theme="dark"] .header.scrolled .cart-btn svg,
[data-theme="dark"] .header.mega-open .header-search-btn svg,
[data-theme="dark"] .header.mega-open .cart-btn svg {
  stroke: rgba(224,221,214,0.7);
}

[data-theme="dark"] .header.scrolled .hamburger span,
[data-theme="dark"] .header.mega-open .hamburger span {
  background: #e0ddd6;
}

[data-theme="dark"] .header.scrolled .header-search-btn:hover,
[data-theme="dark"] .header.scrolled .cart-btn:hover,
[data-theme="dark"] .header.mega-open .header-search-btn:hover,
[data-theme="dark"] .header.mega-open .cart-btn:hover {
  background: rgba(200,169,110,0.08);
}

/* ============ MEGA PANEL DARK ============ */
[data-theme="dark"] .mega-panel {
  background: #0e1319;
  border-top-color: var(--tan);
  box-shadow: 0 20px 80px rgba(0,0,0,0.6);
}

[data-theme="dark"] .mega-panel-title { color: var(--tan); }
[data-theme="dark"] .mega-panel-header { border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .mega-col-title { color: var(--tan); border-bottom-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .mega-col a { color: rgba(224,221,214,0.55); }
[data-theme="dark"] .mega-col a:hover { color: var(--cream); }
[data-theme="dark"] .mega-col .mega-link-bold { color: var(--tan); }
[data-theme="dark"] .mega-sub-title { color: rgba(224,221,214,0.3); }
[data-theme="dark"] .mega-brands { border-top-color: rgba(255,255,255,0.05); }
[data-theme="dark"] .mega-brands span { color: rgba(224,221,214,0.4); }
[data-theme="dark"] .mega-brands-divider { background: rgba(255,255,255,0.06); }
[data-theme="dark"] .mega-close:hover { background: rgba(255,255,255,0.05); }
[data-theme="dark"] .mega-close svg { stroke: rgba(224,221,214,0.5); }
[data-theme="dark"] .mega-overlay { background: rgba(0,0,0,0.55); }

/* ============ CARDS DARK ============ */
[data-theme="dark"] .story-banner,
[data-theme="dark"] .features-card,
[data-theme="dark"] .collection-card:first-child,
[data-theme="dark"] .testimonial-card,
[data-theme="dark"] .instagram-card,
[data-theme="dark"] .insta-card,
[data-theme="dark"] .impact-stats,
[data-theme="dark"] .values-card,
[data-theme="dark"] .order-summary {
  background: #0e1319;
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
  border: 1px solid rgba(200,169,110,0.06);
}

[data-theme="dark"] .story-banner-content,
[data-theme="dark"] .features-content {
  color: #e0ddd6;
}

[data-theme="dark"] .story-quote {
  border-top-color: rgba(200,169,110,0.3);
  color: var(--tan-light);
}

[data-theme="dark"] .story-quote-attr { color: rgba(224,221,214,0.4); }

[data-theme="dark"] .paragraph-lg,
[data-theme="dark"] .feature-text p,
[data-theme="dark"] .product-card-category,
[data-theme="dark"] .blog-date,
[data-theme="dark"] .insta-comments {
  color: rgba(224,221,214,0.45);
}

[data-theme="dark"] .display-1,
[data-theme="dark"] .display-2,
[data-theme="dark"] .feature-text h4,
[data-theme="dark"] .product-card-info h3,
[data-theme="dark"] .blog-card-info h3,
[data-theme="dark"] .testimonial-text,
[data-theme="dark"] .insta-username,
[data-theme="dark"] .insta-likes,
[data-theme="dark"] .testimonial-name,
[data-theme="dark"] .impact-stat-label {
  color: #e0ddd6;
}

[data-theme="dark"] .impact-stat-number { color: var(--tan); }
[data-theme="dark"] .impact-stat-divider { background: rgba(255,255,255,0.06); }

/* ============ PRODUCT CARDS DARK ============ */
[data-theme="dark"] .product-card-image {
  border-color: rgba(200,169,110,0.06);
  background: #0a0e14;
}

[data-theme="dark"] .product-card:hover .product-card-image {
  border-color: rgba(200,169,110,0.15);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}

[data-theme="dark"] .product-price-badge {
  background: rgba(8,12,18,0.85);
  color: var(--tan);
  border: 1px solid rgba(200,169,110,0.15);
  backdrop-filter: blur(8px);
}

[data-theme="dark"] .product-card:hover .product-price-badge {
  background: var(--tan);
  color: #080c12;
  border-color: var(--tan);
}

/* ============ FEATURE ICONS DARK ============ */
[data-theme="dark"] .feature-icon {
  background: rgba(200,169,110,0.06);
  border: 1px solid rgba(200,169,110,0.08);
}

[data-theme="dark"] .feature-icon svg { stroke: var(--tan); }

/* ============ SECTIONS DARK ============ */
[data-theme="dark"] .section-subtitle { color: var(--tan); }

[data-theme="dark"] .cat-promo {
  background: #0e1319;
  border: 1px solid rgba(200,169,110,0.12);
}

[data-theme="dark"] .category-card {
  border: 1px solid rgba(200,169,110,0.06);
}

[data-theme="dark"] .category-card:hover {
  border-color: rgba(200,169,110,0.15);
}

/* ============ BUTTONS DARK ============ */
[data-theme="dark"] .btn-secondary {
  color: rgba(224,221,214,0.8);
  border-color: rgba(224,221,214,0.2);
}

[data-theme="dark"] .btn-secondary:hover {
  background: #e0ddd6;
  color: #080c12;
  border-color: #e0ddd6;
}

[data-theme="dark"] .btn-primary {
  background: var(--tan);
  color: #080c12;
}

[data-theme="dark"] .btn-primary:hover {
  background: var(--tan-light);
  box-shadow: 0 8px 28px rgba(200,169,110,0.2);
}

[data-theme="dark"] .header:not(.scrolled):not(.mega-open) .btn-primary {
  background: rgba(200,169,110,0.15);
  border-color: rgba(200,169,110,0.25);
  color: var(--tan);
}

[data-theme="dark"] .header:not(.scrolled):not(.mega-open) .btn-primary:hover {
  background: rgba(200,169,110,0.25);
}

/* ============ BLOG CARDS DARK ============ */
[data-theme="dark"] .blog-card-image {
  box-shadow: 0 4px 24px rgba(0,0,0,0.3);
}

[data-theme="dark"] .blog-tag {
  background: rgba(200,169,110,0.08);
  color: var(--tan);
  border: 1px solid rgba(200,169,110,0.1);
}

/* ============ SEARCH / INPUTS DARK ============ */
[data-theme="dark"] .search-input input,
[data-theme="dark"] .category-dropdown select {
  background: #0e1319;
  border-color: rgba(200,169,110,0.1);
  color: #e0ddd6;
}

[data-theme="dark"] .search-input input:focus,
[data-theme="dark"] .category-dropdown select:focus {
  border-color: var(--tan);
  box-shadow: 0 0 0 4px rgba(200,169,110,0.08);
}

[data-theme="dark"] .search-input svg { stroke: rgba(224,221,214,0.35); }

/* ============ TESTIMONIALS DARK ============ */
[data-theme="dark"] .testimonial-card:hover {
  border-color: rgba(200,169,110,0.12);
  box-shadow: 0 16px 48px rgba(0,0,0,0.3);
}

[data-theme="dark"] .testimonial-stars svg { fill: var(--tan); }
[data-theme="dark"] .testimonial-location { color: rgba(224,221,214,0.35); }

/* ============ INSTAGRAM DARK ============ */
[data-theme="dark"] .insta-card {
  border-color: rgba(200,169,110,0.06);
}

[data-theme="dark"] .insta-card-header,
[data-theme="dark"] .insta-card-footer {
  background: #0e1319;
}

[data-theme="dark"] .insta-actions svg { stroke: #e0ddd6; }
[data-theme="dark"] .insta-handle { color: rgba(224,221,214,0.35); }
[data-theme="dark"] .insta-avatar { background: var(--tan); }
[data-theme="dark"] .insta-avatar svg { fill: #080c12; }

/* ============ COLLECTION CARDS DARK ============ */
[data-theme="dark"] .collection-link { color: var(--tan); }

/* ============ SCROLL PROGRESS DARK ============ */
[data-theme="dark"] .scroll-progress {
  background: linear-gradient(90deg, var(--tan), var(--burnt-orange));
}

/* ============ FOOTER DARK ============ */
[data-theme="dark"] .footer {
  background: #050810;
}

[data-theme="dark"] .footer-card {
  background: transparent;
}

[data-theme="dark"] .footer-card::before {
  background: linear-gradient(90deg, transparent, rgba(200,169,110,0.2), transparent);
}

/* ============ MOBILE NAV DARK ============ */
[data-theme="dark"] .mobile-nav {
  background: #080c12;
}

[data-theme="dark"] .mobile-nav-header { border-bottom-color: rgba(200,169,110,0.08); }
[data-theme="dark"] .mobile-nav-section { border-bottom-color: rgba(200,169,110,0.06); }
[data-theme="dark"] .mobile-nav-trigger { color: #e0ddd6; }
[data-theme="dark"] .mobile-nav-trigger svg { stroke: rgba(224,221,214,0.35); }
[data-theme="dark"] .mobile-nav-dropdown a { color: rgba(224,221,214,0.55); }
[data-theme="dark"] .mobile-nav-link { color: #e0ddd6; border-bottom-color: rgba(200,169,110,0.06); }

/* ============ PAGE LOADER DARK ============ */
[data-theme="dark"] .page-loader {
  background: #080c12;
}

/* ============ SMOOTH THEME TRANSITIONS ============ */
body,
.header,
.story-banner,
.features-card,
.testimonial-card,
.product-card-image,
.product-price-badge,
.impact-stats,
.cat-promo,
.btn-primary,
.btn-secondary,
.search-input input,
.feature-icon,
.insta-card,
.category-card,
.blog-tag {
  transition-property: background, color, border-color, box-shadow;
  transition-duration: 0.6s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce) {
  .shooting-star { animation: none !important; }
  [data-theme="dark"] body::after { animation: none; }
}