/* =========================
   Custom Gold & Dark Theme for Watch Store
   ========================= */

/* Fonts */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+Pro:wght@300;400;600&display=swap");

/* =========================
   Color Variables
   ========================= */
:root {
  --watch-bg-dark: #0d0d0d; /* body background */
  --watch-primary: #1a1a1a; /* dark panels/navs */
  --watch-gold: #d4af37; /* main gold accent */
  --watch-gold-light: #f4e19c;
  --watch-text: #f5f5f5;
  --watch-muted: #b0b0b0;
  --watch-border: #2d2d2d;
  --watch-danger: #c0392b;
}

/* =========================
   Base Styles
   ========================= */
body {
  background-color: var(--watch-bg-dark);
  color: var(--watch-text);
  font-family: "Source Sans Pro", sans-serif;
}

/* =========================
   Navigation
   ========================= */
.category-nav {
  background-color: var(--watch-primary);
  border-bottom: 1px solid var(--watch-border);
}

.navbar-brand {
  color: var(--watch-gold) !important;
}

.nav-link {
  color: var(--watch-text) !important;
  transition: color 0.3s, background 0.3s;
}

.nav-link:hover {
  color: var(--watch-gold) !important;
  background-color: rgba(212, 175, 55, 0.1);
}

.btn-outline-light {
  border-color: var(--watch-gold) !important;
  color: var(--watch-gold) !important;
}

.btn-outline-light:hover {
  background-color: var(--watch-gold) !important;
  color: var(--watch-primary) !important;
}

/* =========================
   Buttons
   ========================= */
.btn-primary,
.btn-primary-custom {
  background-color: var(--watch-gold);
  border: none;
  color: var(--watch-primary);
  transition: all 0.3s;
}

.btn-primary:hover,
.btn-primary-custom:hover {
  background-color: var(--watch-gold-light);
  color: var(--watch-primary);
}

.btn-accent-custom {
  background-color: var(--watch-primary);
  color: var(--watch-gold);
  border: 1px solid var(--watch-gold);
}

.btn-accent-custom:hover {
  background-color: var(--watch-gold);
  color: var(--watch-primary);
}

/* =========================
   Cards
   ========================= */
.watch-card {
  background-color: var(--watch-primary);
  border: 1px solid var(--watch-border);
  border-radius: 10px;
  transition: transform 0.3s, box-shadow 0.3s;
}

.watch-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.3);
}

.price-original {
  color: var(--watch-muted);
  text-decoration: line-through;
}

.price-discounted {
  color: var(--watch-gold);
  font-weight: 600;
}

/* =========================
   Badges & Timers
   ========================= */
.discount-badge {
  background: linear-gradient(135deg, var(--watch-gold), var(--watch-gold-light));
  color: var(--watch-primary);
  font-weight: 700;
  border-radius: 6px;
  padding: 6px 12px;
}

.countdown-timer {
  background: var(--watch-primary);
  color: var(--watch-gold);
  border: 1px solid var(--watch-gold);
  font-weight: 600;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
}

/* =========================
   Footer
   ========================= */
footer {
  background-color: var(--watch-primary) !important;
  color: var(--watch-text) !important;
}

footer a {
  color: var(--watch-gold);
  text-decoration: none;
}

footer a:hover {
  color: var(--watch-gold-light);
}

/* =========================
   Product Gallery
   ========================= */
.main-image {
  border: 1px solid var(--watch-border);
  border-radius: 8px;
  background-color: var(--watch-bg-dark);
  transition: transform 0.3s ease, opacity 0.3s ease;
  cursor: pointer;
}

.main-image:hover {
  transform: scale(1.02);
}

.product-gallery-thumbnails img {
  border: 1px solid var(--watch-border);
  border-radius: 6px;
}

.product-gallery-thumbnails img:hover {
  border-color: var(--watch-gold);
}

/* =========================
   Scrollbar
   ========================= */
::-webkit-scrollbar {
  height: 6px;
}

::-webkit-scrollbar-thumb {
  background: var(--watch-gold);
  border-radius: 3px;
}

/* =========================
   Animations
   ========================= */
.fade-in {
  animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}