/* IronForge Personal Trainer Theme - Dark & Energetic */

:root {
  /* Primary Colors */
  --color-primary: #ff4500;
  --color-primary-dark: #cc3700;
  --color-primary-light: #ff6a33;
  --color-secondary: #ff4500;
  
  /* Background Colors */
  --color-background: #1a1a1a;
  --color-background-dark: #121212;
  --color-background-light: #222222;
  --color-surface: #1a1a1a;
  
  /* Text Colors */
  --color-text: #f4f4f4;
  --color-text-light: #a0a0a0;
  --color-text-inverse: #f4f4f4;
  --color-text-muted: #666666;
  --text-primary: #f4f4f4;
  --text-secondary: #a0a0a0;
  
  /* UI Colors */
  --color-border: #333333;
  --color-shadow: rgba(0, 0, 0, 0.4);
  --color-overlay: rgba(0, 0, 0, 0.75);
  
  /* Typography */
  --font-heading: 'Montserrat', sans-serif;
  --font-body: 'Montserrat', sans-serif;
  
  /* Spacing */
  --header-height: 80px;
}

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

/* Global dark theme overrides */
body {
  background-color: var(--color-background-dark);
  color: var(--color-text);
  font-family: var(--font-body);
}

/* Navigation styling */
nav, .navigation, header {
  background: rgba(18, 18, 18, 0.95) !important;
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Logo text */
a[class*="logoText"] {
  color: var(--color-text) !important;
}

/* Nav links - light text on dark nav */
a[class*="navLink"] {
  color: var(--color-text-light) !important;
}

a[class*="navLink"]:hover {
  color: var(--color-primary) !important;
}

/* Reserve button override */
a[class*="reserveButton"] {
  background: var(--color-primary) !important;
  color: #fff !important;
  border-radius: 4px !important;
}

a[class*="reserveButton"]:hover {
  background: var(--color-primary-dark) !important;
  color: #fff !important;
}

/* User menu icon */
[class*="userIcon"] {
  color: var(--color-text-light) !important;
}

[class*="userMenuTrigger"]:hover {
  background: rgba(255,255,255,0.1) !important;
}

/* Mobile menu background - ensure solid dark background */
nav ul, [class*="navList"] {
  background-color: #121212 !important;
}

@media (max-width: 768px) {
  nav ul, [class*="navList"] {
    background-color: #121212 !important;
  }
}

/* Logo styling */
.logo span, .siteName span {
  color: var(--color-primary);
}

/* Button styling */
.btn-primary, .btn.btn-primary {
  background: transparent;
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.btn-primary:hover, .btn.btn-primary:hover {
  background: var(--color-primary);
  color: #fff;
  box-shadow: 0 0 15px rgba(255, 69, 0, 0.4);
}

/* Hero section overrides */
.hero, [class*="hero"] {
  background-color: var(--color-background-dark);
}

.heroOverlay, [class*="heroOverlay"] {
  background: var(--color-overlay) !important;
}

/* Section backgrounds */
section, .section {
  background-color: var(--color-background-dark);
}

/* Card styling */
.card, [class*="Card"], [class*="card"] {
  background: var(--color-background);
  border: 1px solid #333;
  transition: all 0.3s ease;
}

.card:hover, [class*="Card"]:hover {
  transform: translateY(-10px);
  border-color: var(--color-primary);
  box-shadow: 0 10px 40px rgba(255, 69, 0, 0.15);
}

/* Pricing cards */
[class*="pricing"], [class*="Pricing"] {
  background: var(--color-background);
  border: 1px solid #333;
}

/* Footer */
footer {
  background: #0a0a0a;
  border-top: 1px solid #222;
}

/* Links */
a {
  color: var(--color-text);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--color-primary);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  color: var(--color-text);
}

/* Primary color accents */
.accent, .highlight, [class*="primary"] {
  color: var(--color-primary);
}

/* Quote/divider sections */
[class*="quote"], [class*="Quote"], [class*="divider"], [class*="Divider"] {
  background: var(--color-background-dark);
  border-top: 1px solid #222;
  border-bottom: 1px solid #222;
}

/* Feature sections alternating backgrounds */
/* Use background-color to avoid overriding background-image on child elements */
[class*="feature"]:nth-child(odd), [class*="Feature"]:nth-child(odd) {
  background-color: var(--color-background);
}

[class*="feature"]:nth-child(even), [class*="Feature"]:nth-child(even) {
  background-color: var(--color-background-dark);
}

/* Story/transformation cards */
[class*="story"], [class*="Story"] {
  background: var(--color-background);
  border-right: 4px solid var(--color-primary);
}

/* Labels */
.label, [class*="label"], [class*="Label"] {
  background: #000;
  color: #fff;
  padding: 8px 15px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Section headers */
[class*="sectionHeader"], [class*="SectionHeader"] {
  color: var(--color-primary);
  font-size: 0.9rem;
  letter-spacing: 2px;
  font-weight: 700;
}

/* Stat numbers */
[class*="stat"] [class*="number"], [class*="Stat"] [class*="Number"] {
  color: var(--color-primary);
}

/* Input fields */
input, textarea, select {
  background: var(--color-background);
  border: 1px solid #333;
  color: var(--color-text);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--color-primary);
  outline: none;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-background-dark);
}

::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}


/* Reservation flow - Worker and Product selection cards */
[class*="workerCard"], [class*="productCard"] {
  background: var(--color-background) !important;
  border-color: #333 !important;
}

[class*="workerCard"]:hover, [class*="productCard"]:hover {
  border-color: var(--color-primary) !important;
}

[class*="workerName"], [class*="productName"] {
  color: var(--color-text) !important;
}

[class*="workerInfo"], [class*="productDescription"], [class*="productDuration"] {
  color: var(--color-text-light) !important;
}

[class*="stepTitle"], [class*="dateHeader"] {
  color: #1a1a2e !important;
}

[class*="selectionInfo"] {
  color: var(--color-text-light) !important;
}

[class*="slotButton"] {
  background: #333 !important;
  color: var(--color-text) !important;
}

[class*="slotButton"]:hover {
  background: var(--color-primary) !important;
  color: #fff !important;
}

[class*="bookingSummary"], [class*="customerInfo"] {
  background: var(--color-background) !important;
}

[class*="bookingSummary"] p, [class*="customerInfo"] p {
  color: var(--color-text-light) !important;
}

[class*="bookingSummary"] strong, [class*="customerInfo"] strong {
  color: var(--color-text) !important;
}


/* User menu dropdown */
[class*="menuItem"] {
  color: #1a1a2e !important;
}

[class*="menuItem"]:hover {
  background: #f3f4f6 !important;
  color: var(--color-primary) !important;
}

[class*="dropdown"], [class*="Dropdown"], [class*="menu"]:not(nav *) {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
}