/* ============================================================
   DESIGN SYSTEM OVERHAUL — Customer Calendar (Faza 5)
   Mindbody/ClassPass · Mobile-First · Dual Theme (Light + Dark)

   Strategy: Override --nb-* variables + kill gold/glassmorphism
   to match NexiBook gold primary.
   ============================================================ */

/* ==========================================================
   1. VARIABLE OVERRIDES — Replace gold with NexiBook gold
   ========================================================== */
:root {
  /* Override NB gold variables with design system primary */
  --nb-gold: var(--color-primary, #FFD700) !important;
  --nb-gold-strong: var(--color-primary-hover, #f0c050) !important;
  --nb-gold-light: rgba(0, 131, 99, 0.1) !important;
  --nb-gold-border: rgba(0, 131, 99, 0.3) !important;

  /* Override dark backgrounds with design system */
  --nb-bg: var(--color-bg, #FFFFFF) !important;
  --nb-fg: var(--color-text, #2D2D2D) !important;
  --nb-muted: var(--color-text-secondary, #6B7280) !important;
  --nb-card: var(--color-bg, #FFFFFF) !important;
  --nb-border: var(--color-border, #E5E7EB) !important;

  /* Functional colors kept */
  --nb-purple: #7C3AED;
  --nb-blue: #3B82F6;
  --nb-green: #10B981;
  --nb-red: #EF4444;
  --nb-orange: #F59E0B;

  /* Glass → solid */
  --glass-bg: var(--color-bg, #FFFFFF) !important;
  --glass-border: var(--color-border, #E5E7EB) !important;
  --glass-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1)) !important;
  --glass-blur: none !important;

  /* Description modal */
  --desc-overlay: rgba(0, 0, 0, 0.5) !important;
  --desc-modal-bg: var(--color-bg, #FFFFFF) !important;
  --desc-modal-border: var(--color-border, #E5E7EB) !important;
  --desc-modal-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1)) !important;
  --desc-header-bg: var(--color-bg-secondary, #F7F8FA) !important;
  --desc-header-border: var(--color-border, #E5E7EB) !important;
  --desc-title-color: var(--color-text, #2D2D2D) !important;
  --desc-close-bg: var(--color-bg-secondary, #F7F8FA) !important;
  --desc-close-color: var(--color-text, #2D2D2D) !important;
  --desc-close-border: var(--color-border, #E5E7EB) !important;
  --desc-close-hover: var(--color-bg-tertiary, #EFF1F5) !important;
  --desc-body-color: var(--color-text, #2D2D2D) !important;
  --desc-body-shadow: none !important;
}

/* Dark theme variable overrides */
[data-theme="dark"] {
  --nb-bg: var(--color-bg, #0F172A) !important;
  --nb-fg: var(--color-text, #F1F5F9) !important;
  --nb-muted: var(--color-text-secondary, #94A3B8) !important;
  --nb-card: var(--color-bg-secondary, #1E293B) !important;
  --nb-border: var(--color-border, #334155) !important;

  --glass-bg: var(--color-bg-secondary, #1E293B) !important;
  --glass-border: var(--color-border, #334155) !important;

  --desc-overlay: rgba(0, 0, 0, 0.7) !important;
  --desc-modal-bg: var(--color-bg-secondary, #1E293B) !important;
  --desc-modal-border: var(--color-border, #334155) !important;
  --desc-header-bg: rgba(255,255,255,0.03) !important;
  --desc-header-border: var(--color-border, #334155) !important;
  --desc-title-color: var(--color-text, #F1F5F9) !important;
  --desc-close-bg: rgba(255,255,255,0.05) !important;
  --desc-close-color: var(--color-text, #F1F5F9) !important;
  --desc-close-border: transparent !important;
  --desc-close-hover: rgba(255,255,255,0.1) !important;
  --desc-body-color: var(--color-text, #F1F5F9) !important;
  --desc-body-shadow: none !important;
}

/* Also support the legacy html.theme-light / html.theme-dark */
html.theme-light {
  --nb-bg: #FFFFFF !important;
  --nb-fg: #2D2D2D !important;
  --nb-muted: #6B7280 !important;
  --nb-card: #FFFFFF !important;
  --nb-border: #E5E7EB !important;
  --nb-gold: #FFD700 !important;
  --nb-gold-strong: #f0c050 !important;
  --nb-gold-light: rgba(0, 131, 99, 0.1) !important;
  --nb-gold-border: rgba(0, 131, 99, 0.3) !important;
  --glass-bg: #FFFFFF !important;
  --glass-border: #E5E7EB !important;
}


/* ==========================================================
   2. BODY — Kill old backgrounds
   ========================================================== */
body {
  background: var(--color-bg, #FFFFFF) !important;
  background-image: none !important;
  color: var(--color-text, #2D2D2D) !important;
  font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif) !important;
}

[data-theme="dark"] body,
html.theme-dark body {
  background: var(--color-bg, #0F172A) !important;
  background-image: none !important;
  color: var(--color-text, #F1F5F9) !important;
}

html.theme-light body {
  background: #FFFFFF !important;
  background-image: none !important;
}


/* ==========================================================
   3. HEADER — Clean, no glassmorphism
   ========================================================== */
.calendar-header {
  background: var(--color-bg, #FFFFFF) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: 1px solid var(--color-border, #E5E7EB) !important;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)) !important;
}

[data-theme="dark"] .calendar-header {
  background: var(--color-bg-secondary, #1E293B) !important;
  border-bottom-color: var(--color-border, #334155) !important;
}

.brand-logo {
  color: var(--color-text, #2D2D2D) !important;
}

.brand-logo i {
  color: var(--color-primary, #FFD700) !important;
}

[data-theme="dark"] .brand-logo {
  color: var(--color-text, #F1F5F9) !important;
}

/* Header buttons */
.filter-btn {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  color: var(--color-text, #2D2D2D) !important;
  backdrop-filter: none !important;
  border-radius: var(--radius-md, 12px) !important;
  font-weight: 500 !important;
  transition: all 0.2s ease !important;
}

.filter-btn:hover {
  background: var(--color-bg-tertiary, #EFF1F5) !important;
  border-color: var(--color-primary, #FFD700) !important;
  color: var(--color-primary, #FFD700) !important;
}

[data-theme="dark"] .filter-btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--color-border, #334155) !important;
  color: var(--color-text, #F1F5F9) !important;
}

[data-theme="dark"] .filter-btn:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: var(--color-primary, #FFD700) !important;
  color: var(--color-primary, #FFD700) !important;
}


/* ==========================================================
   4. VIEW TOGGLE — Gold active instead of gold
   ========================================================== */
.view-toggle-group {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  border-radius: var(--radius-md, 12px) !important;
}

[data-theme="dark"] .view-toggle-group {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--color-border, #334155) !important;
}

.view-toggle-btn {
  color: var(--color-text-secondary, #6B7280) !important;
  border-right-color: var(--color-border, #E5E7EB) !important;
}

.view-toggle-btn:hover {
  background: var(--color-bg-tertiary, #EFF1F5) !important;
  color: var(--color-text, #2D2D2D) !important;
}

.view-toggle-btn.active {
  background: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
}

[data-theme="dark"] .view-toggle-btn {
  color: var(--color-text-secondary, #94A3B8) !important;
  border-right-color: var(--color-border, #334155) !important;
}

[data-theme="dark"] .view-toggle-btn:hover {
  background: rgba(255,255,255,0.08) !important;
  color: var(--color-text, #F1F5F9) !important;
}

[data-theme="dark"] .view-toggle-btn.active {
  background: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
}

/* Mobile View Toggle */
.mobile-view-btn.active {
  background: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
  border-color: var(--color-primary, #FFD700) !important;
  box-shadow: 0 4px 12px rgba(0, 131, 99, 0.3) !important;
}

.mobile-view-btn {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  color: var(--color-text-secondary, #6B7280) !important;
  border-radius: var(--radius-md, 12px) !important;
}

[data-theme="dark"] .mobile-view-btn {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--color-border, #334155) !important;
  color: var(--color-text-secondary, #94A3B8) !important;
}

.mobile-view-toggle {
  background: transparent !important;
  border-bottom: 1px solid var(--color-border, #E5E7EB) !important;
}

[data-theme="dark"] .mobile-view-toggle {
  border-bottom-color: var(--color-border, #334155) !important;
}


/* ==========================================================
   5. DATE NAVIGATION
   ========================================================== */
.date-navigation {
  border-bottom: 1px solid var(--color-border, #E5E7EB) !important;
  background: transparent !important;
}

[data-theme="dark"] .date-navigation {
  border-bottom-color: var(--color-border, #334155) !important;
}

.date-display {
  color: var(--color-text, #2D2D2D) !important;
}

.date-main {
  color: var(--color-text, #2D2D2D) !important;
}

[data-theme="dark"] .date-main {
  color: var(--color-text, #F1F5F9) !important;
}

.date-subtitle {
  color: var(--color-text-secondary, #6B7280) !important;
}

.nav-arrow {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  color: var(--color-text, #2D2D2D) !important;
}

.nav-arrow:hover {
  background: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
  border-color: var(--color-primary, #FFD700) !important;
  transform: scale(1.05) !important;
}

[data-theme="dark"] .nav-arrow {
  background: rgba(255,255,255,0.06) !important;
  border-color: var(--color-border, #334155) !important;
  color: var(--color-text, #F1F5F9) !important;
}

/* Date chips */
.date-chip {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  color: var(--color-text-secondary, #6B7280) !important;
  border-radius: var(--radius-md, 12px) !important;
}

.date-chip:hover {
  background: var(--color-bg-tertiary, #EFF1F5) !important;
  border-color: var(--color-primary, #FFD700) !important;
}

.date-chip.active {
  background: var(--color-primary, #FFD700) !important;
  border-color: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
  box-shadow: 0 4px 12px rgba(0, 131, 99, 0.3) !important;
}

[data-theme="dark"] .date-chip {
  background: rgba(255,255,255,0.04) !important;
  border-color: var(--color-border, #334155) !important;
  color: var(--color-text-secondary, #94A3B8) !important;
}

[data-theme="dark"] .date-chip.active {
  background: var(--color-primary, #FFD700) !important;
  border-color: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
}


/* ==========================================================
   6. FILTERS SIDEBAR
   ========================================================== */
.filters-sidebar {
  background: var(--color-bg, #FFFFFF) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  border-radius: var(--radius-lg, 16px) !important;
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1)) !important;
}

[data-theme="dark"] .filters-sidebar {
  background: var(--color-bg-secondary, #1E293B) !important;
  border-color: var(--color-border, #334155) !important;
}

.filters-header {
  border-bottom: 1px solid var(--color-border, #E5E7EB) !important;
}

.filters-header h3 {
  color: var(--color-text, #2D2D2D) !important;
}

[data-theme="dark"] .filters-header h3 {
  color: var(--color-text, #F1F5F9) !important;
}

.filter-section h4 {
  color: var(--color-text-secondary, #6B7280) !important;
}

.filter-option {
  color: var(--color-text, #2D2D2D) !important;
}

[data-theme="dark"] .filter-option {
  color: var(--color-text, #F1F5F9) !important;
}

.filter-option:hover {
  background: var(--color-bg-secondary, #F7F8FA) !important;
}

[data-theme="dark"] .filter-option:hover {
  background: rgba(255,255,255,0.05) !important;
}

.filter-option input[type="checkbox"] {
  accent-color: var(--color-primary, #FFD700) !important;
}

.close-btn {
  color: var(--color-text-secondary, #6B7280) !important;
}

.close-btn:hover {
  color: var(--color-primary, #FFD700) !important;
}

/* Filters status bar */
.filters-status {
  background: rgba(0, 131, 99, 0.05) !important;
  border-bottom: 1px solid rgba(0, 131, 99, 0.2) !important;
}

.active-filters {
  color: var(--color-primary, #FFD700) !important;
}

.clear-filters-btn {
  color: var(--color-primary, #FFD700) !important;
}


/* ==========================================================
   7. TIME SLOT GROUPS — Clean cards
   ========================================================== */
.time-slot-group {
  background: var(--color-bg, #FFFFFF) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  border-radius: var(--radius-lg, 16px) !important;
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05)) !important;
}

.time-slot-group:hover {
  border-color: var(--color-primary, #FFD700) !important;
  box-shadow: var(--shadow-md, 0 4px 6px -1px rgba(0,0,0,0.1)) !important;
}

[data-theme="dark"] .time-slot-group {
  background: var(--color-bg-secondary, #1E293B) !important;
  border-color: var(--color-border, #334155) !important;
}

[data-theme="dark"] .time-slot-group:hover {
  border-color: var(--color-primary, #FFD700) !important;
}

.time-slot-header {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border-bottom-color: var(--color-border, #E5E7EB) !important;
}

[data-theme="dark"] .time-slot-header {
  background: rgba(255,255,255,0.02) !important;
}

.time-slot-group:not(.collapsed) .time-slot-header {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border-bottom-color: var(--color-border, #E5E7EB) !important;
}

[data-theme="dark"] .time-slot-group:not(.collapsed) .time-slot-header {
  background: rgba(255,255,255,0.04) !important;
  border-bottom-color: var(--color-border, #334155) !important;
}

.time-range {
  color: var(--color-text, #2D2D2D) !important;
}

[data-theme="dark"] .time-range {
  color: var(--color-text, #F1F5F9) !important;
}

.service-count {
  color: var(--color-text-secondary, #6B7280) !important;
  background: var(--color-bg-tertiary, #EFF1F5) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
}

[data-theme="dark"] .service-count {
  background: rgba(255,255,255,0.05) !important;
  color: var(--color-text-secondary, #94A3B8) !important;
  border-color: transparent !important;
}

.expand-icon {
  color: var(--color-text-secondary, #6B7280) !important;
}

.time-slot-header:hover .expand-icon {
  color: var(--color-text, #2D2D2D) !important;
}


/* ==========================================================
   8. SERVICE CARDS — Clean, no glassmorphism
   ========================================================== */
.service-card {
  background: var(--color-bg, #FFFFFF) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  border-radius: var(--radius-md, 12px) !important;
}

.service-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1)) !important;
  border-color: var(--color-primary, #FFD700) !important;
  background: var(--color-bg, #FFFFFF) !important;
}

[data-theme="dark"] .service-card {
  background: rgba(255,255,255,0.03) !important;
  border-color: var(--color-border, #334155) !important;
}

[data-theme="dark"] .service-card:hover {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--color-primary, #FFD700) !important;
}

/* Service card highlight - gold primary */
.service-card-highlight {
  border: 2px solid var(--color-primary, #FFD700) !important;
  box-shadow: 0 0 20px rgba(0, 131, 99, 0.3) !important;
}

@keyframes highlightPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0, 131, 99, 0.3); }
  50% { box-shadow: 0 0 30px rgba(0, 131, 99, 0.5); }
}

/* Zoom cards */
.service-card.zoom-class-card {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.05) 0%, rgba(124, 58, 237, 0.02) 100%) !important;
}

.service-card.zoom-class-card:hover {
  border-color: var(--nb-purple) !important;
}

/* Service text */
.service-type {
  color: var(--color-text-secondary, #6B7280) !important;
}

.service-meta {
  color: var(--color-text-secondary, #6B7280) !important;
}

.trainer-name {
  color: var(--color-text, #2D2D2D) !important;
}

[data-theme="dark"] .trainer-name {
  color: var(--color-text, #F1F5F9) !important;
}

.trainer-specialty {
  color: var(--color-text-secondary, #6B7280) !important;
}

/* Trainer avatar */
.trainer-avatar {
  background: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
  border: 2px solid rgba(0, 131, 99, 0.3) !important;
}

/* Service tags */
.service-tag.pilates {
  background: rgba(124, 58, 237, 0.1) !important;
  color: #7C3AED !important;
  border: 1px solid rgba(124, 58, 237, 0.2) !important;
}

.service-tag.yoga {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #3B82F6 !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.service-tag.training {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #10B981 !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
}


/* ==========================================================
   9. CLASS DESCRIPTION
   ========================================================== */
.class-description {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border-left-color: var(--color-primary, #FFD700) !important;
  color: var(--color-text-secondary, #6B7280) !important;
}

[data-theme="dark"] .class-description {
  background: rgba(255,255,255,0.03) !important;
  color: var(--color-text-secondary, #94A3B8) !important;
}


/* ==========================================================
   10. AVAILABILITY — Keep functional colors, clean container
   ========================================================== */
.availability-bar {
  background: var(--color-border, #E5E7EB) !important;
}

[data-theme="dark"] .availability-bar {
  background: rgba(255,255,255,0.1) !important;
}

.availability-text {
  color: var(--color-text-secondary, #6B7280) !important;
}

.availability-status.available {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #059669 !important;
  border: 1px solid rgba(16, 185, 129, 0.2) !important;
}

[data-theme="dark"] .availability-status.available {
  color: #34D399 !important;
}

.availability-status.limited {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #D97706 !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

[data-theme="dark"] .availability-status.limited {
  color: #FBBF24 !important;
}

.availability-status.full {
  background: rgba(239, 68, 68, 0.1) !important;
  color: #DC2626 !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

[data-theme="dark"] .availability-status.full {
  color: #F87171 !important;
}


/* ==========================================================
   11. PRICE — Solid gold, no gold shimmer
   ========================================================== */
.price {
  color: var(--color-primary, #FFD700) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--color-primary, #FFD700) !important;
  background-clip: unset !important;
  animation: none !important;
}

[data-theme="dark"] .price,
html.theme-dark .price {
  -webkit-text-fill-color: rgba(255, 215, 0, 0.7) !important;
  color: rgba(255, 215, 0, 0.7) !important;
  background: none !important;
  background-clip: unset !important;
  -webkit-background-clip: unset !important;
  animation: none !important;
}

/* Weekly view time headers - gold primary */
.calendar-2025-weekly-time,
.calendar-2025-weekly-day .time-header,
.time-slot-group .time-range span,
.calendar-2025-weekly-services .service-time-label {
  color: var(--color-primary, #FFD700) !important;
}

.price-info {
  border-top: 1px solid var(--color-border, #E5E7EB) !important;
}

[data-theme="dark"] .price-info {
  border-top-color: var(--color-border, #334155) !important;
}

.session-type {
  color: var(--color-text-secondary, #6B7280) !important;
}


/* ==========================================================
   12. BOOK BUTTON — Gold primary CTA
   ========================================================== */
.book-btn {
  background: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
  border: none !important;
  border-radius: var(--radius-md, 12px) !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 12px rgba(0, 131, 99, 0.2) !important;
  min-height: 48px !important;
}

.book-btn:hover {
  background: var(--color-primary-hover, #f0c050) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(0, 131, 99, 0.3) !important;
}

.book-btn:not(:disabled):active {
  transform: translateY(-1px) scale(0.98) !important;
}

.book-btn:not(:disabled):hover {
  transform: translateY(-2px) scale(1.01) !important;
  box-shadow: 0 10px 25px rgba(0, 131, 99, 0.3) !important;
}

.book-btn:disabled {
  background: var(--color-border, #E5E7EB) !important;
  color: var(--color-text-secondary, #6B7280) !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

[data-theme="dark"] .book-btn:disabled {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.3) !important;
}

.book-btn.btn-full {
  background: var(--nb-orange) !important;
  color: var(--color-primary-text, #111111) !important;
}


/* ==========================================================
   13. MOBILE FILTER BOTTOM SHEET — Clean
   ========================================================== */
.mobile-filters-overlay {
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(4px) !important;
}

.filters-bottom-sheet {
  background: var(--color-bg, #FFFFFF) !important;
  border-top: 2px solid var(--color-primary, #FFD700) !important;
  border-radius: 20px 20px 0 0 !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .filters-bottom-sheet {
  background: var(--color-bg-secondary, #1E293B) !important;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5) !important;
}

.sheet-header {
  border-bottom: 1px solid var(--color-border, #E5E7EB) !important;
}

.sheet-header h3 {
  color: var(--color-text, #2D2D2D) !important;
}

[data-theme="dark"] .sheet-header h3 {
  color: var(--color-text, #F1F5F9) !important;
}

.sheet-actions {
  border-top: 1px solid var(--color-border, #E5E7EB) !important;
}

[data-theme="dark"] .sheet-actions {
  border-top-color: var(--color-border, #334155) !important;
}

.sheet-actions .btn-primary,
.btn-primary {
  background: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
  border: none !important;
  border-radius: var(--radius-md, 12px) !important;
}

.sheet-actions .btn-primary:hover,
.btn-primary:hover {
  background: var(--color-primary-hover, #f0c050) !important;
}

.sheet-actions .btn-secondary,
.btn-secondary {
  background: transparent !important;
  color: var(--color-text, #2D2D2D) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  border-radius: var(--radius-md, 12px) !important;
}

[data-theme="dark"] .sheet-actions .btn-secondary {
  color: var(--color-text, #F1F5F9) !important;
  border-color: var(--color-border, #334155) !important;
}


/* ==========================================================
   14. TOAST NOTIFICATIONS
   ========================================================== */
.toast-container {
  z-index: 10001 !important;
}

.toast {
  background: var(--color-bg, #FFFFFF) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  border-radius: var(--radius-md, 12px) !important;
  color: var(--color-text, #2D2D2D) !important;
  box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0,0,0,0.1)) !important;
}

[data-theme="dark"] .toast {
  background: var(--color-bg-secondary, #1E293B) !important;
  border-color: var(--color-border, #334155) !important;
  color: var(--color-text, #F1F5F9) !important;
}

.toast-success {
  border-left: 4px solid #10B981 !important;
}

.toast-info {
  border-left: 4px solid #3B82F6 !important;
}

.toast-warning {
  border-left: 4px solid #F59E0B !important;
}


/* ==========================================================
   15. LOADING OVERLAY
   ========================================================== */
.loading-overlay {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(4px) !important;
}

[data-theme="dark"] .loading-overlay {
  background: rgba(15, 23, 42, 0.9) !important;
}

.loading-spinner {
  color: var(--color-text, #2D2D2D) !important;
}

[data-theme="dark"] .loading-spinner {
  color: var(--color-text, #F1F5F9) !important;
}

.spinner {
  border-color: var(--color-border, #E5E7EB) !important;
  border-top-color: var(--color-primary, #FFD700) !important;
}

[data-theme="dark"] .spinner {
  border-color: rgba(255,255,255,0.1) !important;
  border-top-color: var(--color-primary, #FFD700) !important;
}


/* ==========================================================
   16. BOOKING MODAL — Clean design system look
   ========================================================== */
#booking-popup.modal {
  background: rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] #booking-popup.modal {
  background: rgba(0, 0, 0, 0.7) !important;
}

#booking-popup .modal-content,
#booking-popup .modal-content.high-readability {
  background: var(--color-bg, #FFFFFF) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  border-radius: var(--radius-lg, 16px) !important;
  box-shadow: var(--shadow-xl, 0 20px 25px -5px rgba(0,0,0,0.1)) !important;
  color: var(--color-text, #2D2D2D) !important;
}

[data-theme="dark"] #booking-popup .modal-content,
[data-theme="dark"] #booking-popup .modal-content.high-readability {
  background: var(--color-bg-secondary, #1E293B) !important;
  border-color: var(--color-border, #334155) !important;
  color: var(--color-text, #F1F5F9) !important;
}

#booking-popup h2 {
  color: var(--color-text, #2D2D2D) !important;
}

[data-theme="dark"] #booking-popup h2 {
  color: var(--color-text, #F1F5F9) !important;
}

#booking-popup .close {
  color: var(--color-text-secondary, #6B7280) !important;
}

#booking-popup .close:hover {
  color: var(--color-text, #2D2D2D) !important;
}

.booking-service-name {
  color: var(--color-primary, #FFD700) !important;
}

.booking-when-lg {
  color: var(--color-text, #2D2D2D) !important;
}

[data-theme="dark"] .booking-when-lg {
  color: var(--color-text, #F1F5F9) !important;
}

.booking-resource {
  color: var(--color-text-secondary, #6B7280) !important;
}

.booking-price-lg {
  color: var(--color-primary, #FFD700) !important;
}

[data-theme="dark"] .booking-price-lg {
  color: rgba(255, 215, 0, 0.7) !important;
}

/* Purchase type buttons */
#purchase-type-group .btn-outline-primary {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  color: var(--color-text, #2D2D2D) !important;
  border-color: var(--color-border, #E5E7EB) !important;
  border-radius: var(--radius-md, 12px) !important;
}

[data-theme="dark"] #purchase-type-group .btn-outline-primary {
  background: rgba(255,255,255,0.05) !important;
  color: var(--color-text, #F1F5F9) !important;
  border-color: var(--color-border, #334155) !important;
}

.btn-check:checked + .btn-outline-primary.option-single,
.btn-outline-primary.active-state.option-single {
  background: var(--color-text, #2D2D2D) !important;
  color: var(--color-primary-text, #111111) !important;
  border-color: var(--color-text, #2D2D2D) !important;
  box-shadow: var(--shadow-md) !important;
}

[data-theme="dark"] .btn-check:checked + .btn-outline-primary.option-single {
  background: #FFFFFF !important;
  color: #111 !important;
  border-color: #FFFFFF !important;
}

.btn-check:checked + .btn-outline-primary.option-package,
.btn-outline-primary.active-state.option-package {
  background: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
  border-color: var(--color-primary, #FFD700) !important;
  box-shadow: 0 0 15px rgba(0, 131, 99, 0.3) !important;
}

.btn-check:checked + .btn-outline-primary.option-subscription,
.btn-outline-primary.active-state.option-subscription {
  background: #3B82F6 !important;
  color: var(--color-primary-text, #111111) !important;
  border-color: #3B82F6 !important;
  box-shadow: 0 0 15px rgba(59, 130, 246, 0.3) !important;
}

/* Form controls in modal */
#booking-popup .form-select,
#booking-popup .form-control {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  color: var(--color-text, #2D2D2D) !important;
  border-radius: var(--radius-md, 12px) !important;
}

[data-theme="dark"] #booking-popup .form-select,
[data-theme="dark"] #booking-popup .form-control {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--color-border, #334155) !important;
  color: var(--color-text, #F1F5F9) !important;
}

/* Proceed button */
#proceed-button {
  background: var(--color-primary, #FFD700) !important;
  border: none !important;
  border-radius: var(--radius-md, 12px) !important;
  color: var(--color-primary-text, #111111) !important;
}

#proceed-button:disabled {
  background: var(--color-border, #E5E7EB) !important;
  color: var(--color-text-secondary, #6B7280) !important;
  opacity: 0.7 !important;
}

[data-theme="dark"] #proceed-button:disabled {
  background: rgba(255,255,255,0.1) !important;
  color: rgba(255,255,255,0.4) !important;
}

/* Terms box in modal */
.terms-box {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  border-radius: var(--radius-sm, 8px) !important;
  color: var(--color-text, #2D2D2D) !important;
}

[data-theme="dark"] .terms-box {
  background: rgba(255,255,255,0.03) !important;
  border-color: var(--color-border, #334155) !important;
  color: var(--color-text, #F1F5F9) !important;
}

.terms-box h3, .terms-box h4 {
  color: var(--color-text, #2D2D2D) !important;
}

[data-theme="dark"] .terms-box h3,
[data-theme="dark"] .terms-box h4 {
  color: var(--color-text, #F1F5F9) !important;
}

.terms-box p, .terms-box li, .terms-box ul, .terms-box ol {
  color: var(--color-text-secondary, #6B7280) !important;
}

[data-theme="dark"] .terms-box p,
[data-theme="dark"] .terms-box li {
  color: var(--color-text-secondary, #94A3B8) !important;
}

/* Terms checkbox */
#terms-section .form-check {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  border-radius: var(--radius-sm, 8px) !important;
}

[data-theme="dark"] #terms-section .form-check {
  background: rgba(255,255,255,0.03) !important;
  border-color: var(--color-border, #334155) !important;
}

#terms-section .form-check-label {
  color: var(--color-text, #2D2D2D) !important;
}

[data-theme="dark"] #terms-section .form-check-label {
  color: var(--color-text, #F1F5F9) !important;
}

#terms-section .form-check-label a {
  color: var(--color-primary, #FFD700) !important;
}

/* Alert boxes in modal */
.alert-warning {
  background: rgba(245, 158, 11, 0.1) !important;
  border: 1px solid rgba(245, 158, 11, 0.2) !important;
  color: var(--color-text, #2D2D2D) !important;
  border-radius: var(--radius-sm, 8px) !important;
}

[data-theme="dark"] .alert-warning {
  background: rgba(245, 158, 11, 0.15) !important;
  color: var(--color-text, #F1F5F9) !important;
}


/* ==========================================================
   17. DESCRIPTION MODAL
   ========================================================== */
#description-modal .modal-content {
  background: var(--color-bg, #FFFFFF) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  border-radius: var(--radius-xl, 20px) !important;
  box-shadow: var(--shadow-xl) !important;
  backdrop-filter: none !important;
}

[data-theme="dark"] #description-modal .modal-content {
  background: var(--color-bg-secondary, #1E293B) !important;
  border-color: var(--color-border, #334155) !important;
}

.modal-premium-header {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border-bottom: 1px solid var(--color-border, #E5E7EB) !important;
}

[data-theme="dark"] .modal-premium-header {
  background: rgba(255,255,255,0.03) !important;
  border-bottom-color: var(--color-border, #334155) !important;
}

.modal-premium-title {
  color: var(--color-text, #2D2D2D) !important;
}

[data-theme="dark"] .modal-premium-title {
  color: var(--color-text, #F1F5F9) !important;
}

.modal-premium-title i {
  color: var(--color-primary, #FFD700) !important;
}

.modal-premium-close {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  color: var(--color-text, #2D2D2D) !important;
}

.modal-premium-close:hover {
  background: var(--color-bg-tertiary, #EFF1F5) !important;
}

[data-theme="dark"] .modal-premium-close {
  background: rgba(255,255,255,0.05) !important;
  border-color: transparent !important;
  color: var(--color-text, #F1F5F9) !important;
}

#desc-modal-content {
  color: var(--color-text, #2D2D2D) !important;
  text-shadow: none !important;
}

[data-theme="dark"] #desc-modal-content {
  color: var(--color-text, #F1F5F9) !important;
}

/* Read more trigger */
.read-more-trigger,
a.read-more-trigger,
.class-description .read-more-trigger,
.class-description-text .read-more-trigger,
[class*="read-more"] {
  color: var(--color-primary, #FFD700) !important;
}

[data-theme="dark"] .read-more-trigger,
[data-theme="dark"] a.read-more-trigger {
  color: rgba(255, 215, 0, 0.7) !important;
}


/* ==========================================================
   18. LOAD MORE BUTTON
   ========================================================== */
.load-more-btn {
  border: 1px solid var(--color-border, #E5E7EB) !important;
  color: var(--color-text, #2D2D2D) !important;
  border-radius: var(--radius-md, 12px) !important;
  background: transparent !important;
}

.load-more-btn:hover {
  border-color: var(--color-primary, #FFD700) !important;
  color: var(--color-primary, #FFD700) !important;
}

[data-theme="dark"] .load-more-btn {
  border-color: var(--color-border, #334155) !important;
  color: var(--color-text, #F1F5F9) !important;
}

[data-theme="dark"] .load-more-btn:hover {
  border-color: var(--color-primary, #FFD700) !important;
  color: var(--color-primary, #FFD700) !important;
}


/* ==========================================================
   19. SCROLLBAR
   ========================================================== */
::-webkit-scrollbar-track {
  background: var(--color-bg, #FFFFFF) !important;
}

::-webkit-scrollbar-thumb {
  background: var(--color-border, #E5E7EB) !important;
  border-radius: 4px !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary, #FFD700) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--color-bg, #0F172A) !important;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #475569 !important;
}


/* ==========================================================
   20. NB-CARD HOVER — Gold of gold
   ========================================================== */
.nb-card:hover {
  border-color: rgba(0, 131, 99, 0.3) !important;
  box-shadow: 0 8px 24px rgba(0, 131, 99, 0.15) !important;
}

.nb-gold-accent {
  color: var(--color-primary, #FFD700) !important;
}


/* ==========================================================
   21. WEEKLY VIEW SPECIFIC — Gold highlights
   ========================================================== */
.calendar-2025-weekly-day-header.today {
  color: var(--color-primary, #FFD700) !important;
}

.calendar-2025-weekly-day-header.today::after {
  background: var(--color-primary, #FFD700) !important;
}


/* ==========================================================
   22. CALENDAR CONTAINER
   ========================================================== */
.calendar-container {
  max-width: 1400px !important;
  margin: 0 auto !important;
}


/* ==========================================================
   23. LEGACY OVERRIDES — Kill old theme classes bleeding through
   ========================================================== */

/* Kill sintra-theme overrides */
html.theme-light .calendar-header,
html.theme-light body {
  background: var(--color-bg, #FFFFFF) !important;
  background-image: none !important;
}

html.theme-light .filter-btn,
html.theme-light .view-toggle-group,
html.theme-light .nav-arrow {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border-color: var(--color-border, #E5E7EB) !important;
  color: var(--color-text, #2D2D2D) !important;
}

html.theme-light .view-toggle-btn.active {
  background: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
}

html.theme-light .mobile-view-btn.active {
  background: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
  border-color: var(--color-primary, #FFD700) !important;
}

html.theme-light .date-chip.active {
  background: var(--color-primary, #FFD700) !important;
  border-color: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
}

html.theme-light .time-slot-group {
  background: var(--color-bg, #FFFFFF) !important;
  border-color: var(--color-border, #E5E7EB) !important;
  box-shadow: var(--shadow-sm) !important;
}

html.theme-light .time-slot-group:hover {
  border-color: var(--color-primary, #FFD700) !important;
}

html.theme-light .time-slot-header {
  background: var(--color-bg-secondary, #F7F8FA) !important;
}

html.theme-light .service-card {
  background: var(--color-bg, #FFFFFF) !important;
  border-color: var(--color-border, #E5E7EB) !important;
}

html.theme-light .service-card:hover {
  border-color: var(--color-primary, #FFD700) !important;
}

html.theme-light .class-description {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border-left-color: var(--color-primary, #FFD700) !important;
}

html.theme-light .book-btn {
  background: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
  border-color: var(--color-primary, #FFD700) !important;
}

html.theme-light .book-btn:hover {
  background: var(--color-primary-hover, #f0c050) !important;
}

html.theme-light .book-btn:disabled {
  background: var(--color-border, #E5E7EB) !important;
  color: var(--color-text-secondary, #6B7280) !important;
}

html.theme-light .price {
  color: var(--color-primary, #FFD700) !important;
  -webkit-text-fill-color: var(--color-primary, #FFD700) !important;
}

html.theme-light .trainer-avatar {
  background: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
  border-color: rgba(0, 131, 99, 0.3) !important;
}

html.theme-light .filters-sidebar {
  background: var(--color-bg, #FFFFFF) !important;
  border-color: var(--color-border, #E5E7EB) !important;
}

html.theme-light .filters-bottom-sheet {
  background: var(--color-bg, #FFFFFF) !important;
  border-top-color: var(--color-primary, #FFD700) !important;
}

html.theme-light .toast {
  background: var(--color-bg, #FFFFFF) !important;
  border-color: var(--color-border, #E5E7EB) !important;
  color: var(--color-text, #2D2D2D) !important;
}

html.theme-light .loading-overlay {
  background: rgba(255, 255, 255, 0.9) !important;
}

html.theme-light .spinner {
  border-color: var(--color-border, #E5E7EB) !important;
  border-top-color: var(--color-primary, #FFD700) !important;
}

/* Booking modal light */
html.theme-light #booking-popup .modal-content.high-readability {
  background: var(--color-bg, #FFFFFF) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  color: var(--color-text, #2D2D2D) !important;
}

html.theme-light #booking-popup .btn-primary,
html.theme-light #proceed-button {
  background: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
}

html.theme-light #booking-popup .btn-primary:disabled,
html.theme-light #proceed-button:disabled {
  background: var(--color-border, #E5E7EB) !important;
  color: var(--color-text-secondary, #6B7280) !important;
}

html.theme-light .active-filters {
  color: var(--color-primary, #FFD700) !important;
}

html.theme-light .clear-filters-btn {
  color: var(--color-primary, #FFD700) !important;
}

html.theme-light .close-btn:hover {
  color: var(--color-primary, #FFD700) !important;
}

/* Override old gold variables that theme-light sets */
html.theme-light .booking-service-name {
  color: var(--color-primary, #FFD700) !important;
}

html.theme-light .booking-price-lg {
  color: var(--color-primary, #FFD700) !important;
}

html.theme-light .read-more-trigger {
  color: var(--color-primary, #FFD700) !important;
  text-shadow: none !important;
}


/* ==========================================================
   23b. SITE HEADER NAV — Design system styling
   ========================================================== */
.site-header,
nav.site-header {
  background: var(--color-bg-secondary, #1E293B) !important;
  border-bottom: 1px solid var(--color-border, #334155) !important;
  backdrop-filter: none !important;
}

[data-theme="light"] .site-header,
[data-theme="light"] nav.site-header {
  background: var(--color-bg, #FFFFFF) !important;
  border-bottom: 1px solid var(--color-border, #E5E7EB) !important;
}

.site-header a,
.site-header .brand {
  color: var(--color-text, #F1F5F9) !important;
}

[data-theme="light"] .site-header a,
[data-theme="light"] .site-header .brand {
  color: var(--color-text, #2D2D2D) !important;
}

.site-header .btn-primary,
.site-header a.btn-primary {
  background: var(--color-primary, #FFD700) !important;
  color: var(--color-primary-text, #111111) !important;
  border-color: var(--color-primary, #FFD700) !important;
}

/* "Back to Main Dashboard" link */
.site-header a[href*="dashboard"] {
  color: var(--color-text-secondary, #94A3B8) !important;
}

.site-header a[href*="dashboard"]:hover {
  color: var(--color-primary, #FFD700) !important;
}


/* ==========================================================
   24. MOBILE OPTIMIZATIONS
   ========================================================== */
@media (max-width: 768px) {
  /* Extra bottom padding for mobile bottom nav */
  body {
    padding-bottom: 80px !important;
  }

  /* Make filter btn accessible */
  .filter-btn {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Touch-friendly book button */
  .book-btn {
    min-height: 48px !important;
    font-size: 1rem !important;
  }

  /* Nav arrows accessible */
  .nav-arrow {
    width: 44px !important;
    height: 44px !important;
  }

  /* Mobile view buttons */
  .mobile-view-btn {
    min-height: 44px !important;
  }
}


/* ==========================================================
   25. PROMO CODE SECTION
   ========================================================== */
#promo-code-section .form-label {
  color: var(--color-text-secondary, #6B7280) !important;
}

#promo-code-section .form-control {
  background: var(--color-bg-secondary, #F7F8FA) !important;
  border: 1px solid var(--color-border, #E5E7EB) !important;
  color: var(--color-text, #2D2D2D) !important;
  border-radius: var(--radius-sm, 8px) !important;
}

[data-theme="dark"] #promo-code-section .form-control {
  background: rgba(255,255,255,0.05) !important;
  border-color: var(--color-border, #334155) !important;
  color: var(--color-text, #F1F5F9) !important;
}

#promo-code-section .btn-outline-secondary {
  border-color: var(--color-border, #E5E7EB) !important;
  color: var(--color-text-secondary, #6B7280) !important;
}


/* ==========================================================
   26. FORM ELEMENTS IN MODAL
   ========================================================== */
#booking-popup legend,
#purchase-type-group legend {
  color: var(--color-text, #2D2D2D) !important;
}

[data-theme="dark"] #booking-popup legend,
[data-theme="dark"] #purchase-type-group legend {
  color: var(--color-text, #F1F5F9) !important;
}

#booking-modal-description {
  color: var(--color-text-secondary, #6B7280) !important;
}

[data-theme="dark"] #booking-modal-description {
  color: var(--color-text-secondary, #94A3B8) !important;
}

/* Alert boxes */
.alert-info {
  background: rgba(59, 130, 246, 0.1) !important;
  border: 1px solid rgba(59, 130, 246, 0.2) !important;
  color: var(--color-text, #2D2D2D) !important;
  border-radius: var(--radius-sm, 8px) !important;
}

.alert-danger {
  background: rgba(239, 68, 68, 0.1) !important;
  border: 1px solid rgba(239, 68, 68, 0.2) !important;
  color: #DC2626 !important;
  border-radius: var(--radius-sm, 8px) !important;
}

[data-theme="dark"] .alert-info {
  color: var(--color-text, #F1F5F9) !important;
}

[data-theme="dark"] .alert-danger {
  color: #F87171 !important;
}