/* Luxury Theme System - High-End Restaurant Aesthetics */
/* Seamlessly integrated with the luxury design system */

/* Dark theme for sophisticated blue aesthetics */
.dark {
  --champagne: #0f172a;
  --cream: #020617;
  --ivory: #0f172a;
  --gold: #3b82f6;
  --gold-light: #60a5fa;
  --gold-dark: #2563eb;
  --copper: #1e40af;
  --copper-light: #3b82f6;
  --burgundy: #1e3a8a;
  --burgundy-light: #2563eb;
  --charcoal: #f8fafc;
  --charcoal-light: #e2e8f0;
  --slate: #cbd5e1;
  --sage: #94a3b8;
  --mist: #1e293b;
}

/* Prevent white flash by applying dark styles immediately */
html.dark .form-select,
html.dark select {
  background: #1f2937 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'") no-repeat left 0.75rem center / 16px 12px !important;
  color: white !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}

/* Hide white version immediately when dark mode is active to prevent flash */
html.dark .form-select:not([style*="background"]),
html.dark select:not([style*="background"]) {
  background: #1f2937 !important;
  color: white !important;
}

html.dark .dropdown-menu {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
  color: white !important;
  border: 2px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

html.dark .dropdown-item {
  color: white !important;
}

html.dark .dropdown-item:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%) !important;
  color: white !important;
}

/* Light theme enhancements for better color depth */
:root {
  --light-accent: #dbeafe;
  --light-accent-2: #bfdbfe;
  --light-accent-3: #93c5fd;
}

/* Theme toggle button styling */
#themeToggle {
  background: linear-gradient(135deg, var(--gold) 0%, var(--copper) 100%);
  color: var(--ivory);
  border: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-md);
  font-size: 0.9rem;
  min-width: 80px;
  position: relative;
  overflow: hidden;
}

#themeToggle::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left var(--transition-smooth);
}

#themeToggle:hover::before {
  left: 100%;
}

#themeToggle:hover {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--copper-light) 100%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3);
}

#themeToggle:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Navbar luxury styling */
.navbar {
  background: linear-gradient(135deg, rgba(224, 242, 254, 0.95) 0%, rgba(240, 249, 255, 0.95) 100%) !important;
  backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 2px solid rgba(37, 99, 235, 0.2);
  box-shadow: var(--shadow-md);
}

.dark .navbar {
  background: rgba(15, 23, 42, 0.95) !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.2);
}

.navbar-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--gold) 0%, var(--copper) 50%, var(--burgundy) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all var(--transition-smooth);
  text-shadow: 0 2px 4px rgba(37, 99, 235, 0.1);
}

.navbar-brand:hover {
  transform: scale(1.05);
}

.navbar-nav .nav-link {
  font-weight: 500;
  color: var(--charcoal) !important;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-md);
  transition: all var(--transition-smooth);
  position: relative;
  overflow: hidden;
}

.navbar-nav .nav-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(37, 99, 235, 0.1), transparent);
  transition: left var(--transition-smooth);
}

.navbar-nav .nav-link:hover::before {
  left: 100%;
}

.navbar-nav .nav-link:hover {
  background: rgba(37, 99, 235, 0.1);
  color: var(--charcoal) !important;
  transform: translateY(-1px);
}

/* Filter drawer styles moved to filter_drawer.css for complete decoupling */

/* Modal luxury styling */
#confirmationModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: none;
  justify-content: center;
  align-items: center;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(10px);
}

.modal-content {
  position: relative;
  background: var(--ivory) !important;
  color: var(--charcoal) !important;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(37, 99, 235, 0.2);
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
  padding: 2rem;
  max-width: 500px;
  width: 90%;
  text-align: center;
  z-index: 10000;
}

.modal-content {
  background: var(--ivory) !important;
  color: var(--charcoal) !important;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(37, 99, 235, 0.2);
  box-shadow: var(--shadow-lg) !important;
  overflow: hidden;
}

.modal-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--copper) 100%);
}

.modal-content button {
  border-radius: var(--radius-md);
  font-weight: 500;
  transition: all var(--transition-smooth);
  margin: 0.5rem;
  padding: 0.75rem 1.5rem;
}

.modal-content #confirmBtn {
  background: linear-gradient(135deg, var(--gold) 0%, var(--copper) 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: var(--shadow-md) !important;
}

.modal-content #confirmBtn:hover {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--copper-light) 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(37, 99, 235, 0.3) !important;
}

.modal-content #cancelBtn {
  background: var(--mist) !important;
  color: white !important;
  border: 2px solid var(--mist) !important;
}

.modal-content #cancelBtn:hover {
  background: var(--sage) !important;
  color: white !important;
  border-color: var(--sage) !important;
}

/* Light mode modal button text colors */
.modal-content #confirmBtn {
  color: black !important;
}

.modal-content #cancelBtn {
  color: black !important;
}

.modal-content #confirmBtn:hover {
  color: black !important;
}

.modal-content #cancelBtn:hover {
  color: black !important;
}

/* Form elements luxury styling */
.form-control, .form-select {
  background: linear-gradient(135deg, var(--ivory) 0%, var(--light-accent) 100%) !important;
  color: var(--charcoal) !important;
  border: 2px solid var(--mist) !important;
  border-radius: var(--radius-md);
  transition: all var(--transition-smooth);
}

.form-control:focus, .form-select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important;
  transform: translateY(-1px);
}

.form-control::placeholder {
  color: var(--sage) !important;
  font-style: italic;
}

/* Dropdown luxury styling */
.dropdown-menu {
  background: linear-gradient(135deg, var(--ivory) 0%, var(--light-accent) 100%) !important;
  color: var(--charcoal) !important;
  border: 2px solid rgba(37, 99, 235, 0.4) !important;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.dropdown-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--copper) 100%);
}

.dropdown-item {
  color: var(--charcoal) !important;
  transition: all var(--transition-fast);
}

.dropdown-item:hover {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.15) 0%, rgba(59, 130, 246, 0.1) 100%) !important;
  color: var(--charcoal) !important;
  transform: translateX(-2px);
}

/* Dark mode dropdown overrides */
html.dark .dropdown-menu {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%) !important;
  color: white !important;
  border: 2px solid rgba(59, 130, 246, 0.4) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Remove the decorative line in dark mode */
html.dark .dropdown-menu::before {
  display: none !important;
}

html.dark .dropdown-item {
  color: white !important;
}

html.dark .dropdown-item:hover {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.2) 0%, rgba(37, 99, 235, 0.15) 100%) !important;
  color: white !important;
}

html.dark .dropdown-item:active,
html.dark .dropdown-item:focus {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.3) 0%, rgba(37, 99, 235, 0.25) 100%) !important;
  color: white !important;
}

/* Enhanced dropdown visibility for location selector */
.form-select {
  border: 2px solid var(--mist) !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.1) !important;
  position: relative;
  font-weight: 600 !important;
}

.form-select::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, transparent 0%, rgba(37, 99, 235, 0.02) 50%, transparent 100%);
  pointer-events: none;
  border-radius: var(--radius-md);
}

.form-select:focus {
  border-color: var(--gold) !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2) !important;
  transform: translateY(-1px);
}

/* Make dropdown arrow more visible and position on left */
.form-select {
  background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%232563eb' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'") no-repeat left 0.75rem center / 16px 12px !important;
  padding-left: 2.5rem !important;
}

/* Dark mode form-select overrides */
html.dark .form-select {
  background: #1f2937 url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m1 6 7 7 7-7'") no-repeat left 0.75rem center / 16px 12px !important;
  color: white !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}

/* Remove the form-select::before pseudo-element in dark mode */
html.dark .form-select::before {
  display: none !important;
}

html.dark .form-select:focus {
  background-color: #374151 !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2) !important;
}

html.dark .form-select option {
  background-color: #1f2937 !important;
  color: white !important;
}

html.dark .form-select option:hover {
  background-color: #374151 !important;
}

/* Table luxury styling */
#appointmentsTable tbody tr.highlighted {
  border-right: 8px solid var(--gold) !important;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.1) 0%, rgba(29, 78, 216, 0.05) 100%) !important;
}

/* Get Location Button luxury styling */
#getLocationBtn {
  background: linear-gradient(135deg, var(--gold) 0%, var(--copper) 100%) !important;
  color: var(--ivory) !important;
  border: none;
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-weight: 500;
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-md);
}

#getLocationBtn:hover, #getLocationBtn:focus {
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--copper-light) 100%) !important;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* Toggle button luxury styling */
#toggleEarliestBtn {
  background: var(--ivory);
  color: var(--charcoal);
  border: 2px solid var(--mist);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  font-weight: 500;
  transition: all var(--transition-smooth);
  box-shadow: var(--shadow-sm);
}

#toggleEarliestBtn:hover {
  background: var(--gold);
  color: var(--ivory);
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* About page styling removed for simplicity */

/* Filter drawer close button styles moved to filter_drawer.css for complete decoupling */

/* Filter drawer location button styles moved to filter_drawer.css for complete decoupling */

/* Filter drawer form group and explanation styles moved to filter_drawer.css for complete decoupling */

/* Filter drawer dark mode styles moved to filter_drawer.css for complete decoupling */

/* Responsive improvements - moved to consolidated media queries section */

/* Enhanced Navigation Styling */
.navbar-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
  background: linear-gradient(135deg, var(--gold) 0%, var(--copper) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.navbar-brand::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold) 0%, var(--copper) 100%);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform var(--transition-smooth);
}

.navbar-brand:hover::after {
  transform: scaleX(1);
}

/* Consolidated dark mode text styling */
.dark *,
html.dark * {
  color: var(--ivory) !important;
}

/* Exception for buttons and interactive elements */
.dark .btn,
.dark .btn-primary,
.dark .btn-secondary,
.dark .btn-outline,
.dark .btn-outline-primary,
.dark .btn-outline-secondary,
.dark .step-badge,
html.dark .btn,
html.dark .btn-primary,
html.dark .btn-secondary,
html.dark .btn-outline,
html.dark .btn-outline-primary,
html.dark .btn-outline-secondary,
html.dark .step-badge {
  color: var(--ivory) !important;
}

/* Dark mode utility colors */
.dark .text-muted,
html.dark .text-muted {
  color: var(--charcoal-light) !important;
}

.dark .text-danger,
html.dark .text-danger {
  color: #fca5a5 !important;
}

.dark .text-warning,
html.dark .text-warning {
  color: #fde047 !important;
}

.dark .text-success,
html.dark .text-success {
  color: #86efac !important;
}

.dark .text-info,
html.dark .text-info {
  color: #93c5fd !important;
}

.dark .text-primary,
html.dark .text-primary {
  color: var(--gold-light) !important;
}

/* Exception for gradient text elements */
.dark h1,
.dark .hero-title,
html.dark h1,
html.dark .hero-title {
  background: linear-gradient(135deg, var(--gold) 0%, var(--copper) 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  color: transparent !important;
}

/* Exception for availability status colors */
.dark .availability-status.available,
html.dark .availability-status.available {
  color: #86efac !important;
}

.dark .availability-status.limited,
html.dark .availability-status.limited {
  color: #fde047 !important;
}

.dark .availability-status.unavailable,
html.dark .availability-status.unavailable {
  color: #fca5a5 !important;
}

/* Additional button exceptions for dark mode */
.dark .action-btn,
.dark .table-action-btn,
.dark .distance-btn,
html.dark .action-btn,
html.dark .table-action-btn,
html.dark .distance-btn {
  color: var(--ivory) !important;
}

/* Exception for icons that should keep their colors */
.dark .appointments-icon,
.dark .distance-filter-icon,
.dark .distance-info-icon,
.dark .filter-icon,
.dark .alert-icon,
html.dark .appointments-icon,
html.dark .distance-filter-icon,
html.dark .distance-info-icon,
html.dark .filter-icon,
html.dark .alert-icon {
  color: var(--gold-light) !important;
}

/* Comprehensive dark mode text styling - consolidated */
html.dark h1,
html.dark h2,
html.dark h3,
html.dark h4,
html.dark h5,
html.dark h6,
html.dark p,
html.dark span,
html.dark div,
html.dark label,
html.dark input,
html.dark input::placeholder,
html.dark .hero-subtitle,
html.dark .section-heading,
html.dark .divider-text,
html.dark .step-header,
html.dark .step-content,
html.dark .location-options,
html.dark .info-alert,
html.dark .alert-info,
html.dark .highlight-text,
html.dark .faq-container,
html.dark .navbar-nav .nav-link,
html.dark .navbar-brand,
html.dark .form-label,
html.dark .text-muted,
html.dark .text-dark,
html.dark .text-black,
html.dark .text-body,
html.dark .text-secondary,
html.dark .text-body-secondary,
html.dark .bg-white,
html.dark .bg-light,
html.dark .bg-dark,
html.dark .border,
html.dark .card,
html.dark .card-body,
html.dark .table,
html.dark .table th,
html.dark .table td,
html.dark .table-striped > tbody > tr:nth-of-type(odd) > td,
html.dark .table-striped > tbody > tr:nth-of-type(even) > td,
html.dark .table-bordered,
html.dark .table-hover > tbody > tr:hover > td,
html.dark caption,
html.dark [class*="text-"],
html.dark .luxury-text-charcoal,
html.dark .luxury-text-slate {
  color: white !important;
}

/* HTML.dark filter drawer overrides */
/* Filter drawer html.dark styles moved to filter_drawer.css for complete decoupling */

/* Additional dark mode dropdown and select overrides */
html.dark select,
html.dark select option {
  background-color: #1f2937 !important;
  color: white !important;
}

html.dark select:focus,
html.dark select:active {
  background-color: #374151 !important;
  border-color: #3b82f6 !important;
}

html.dark .dropdown-toggle {
  background-color: #1f2937 !important;
  color: white !important;
  border-color: rgba(59, 130, 246, 0.4) !important;
}

html.dark .dropdown-toggle:hover,
html.dark .dropdown-toggle:focus {
  background-color: #374151 !important;
  border-color: #3b82f6 !important;
}

/* Ensure all select elements in dark mode have proper styling */
html.dark .form-select,
html.dark select,
html.dark .dropdown-menu,
html.dark .dropdown-item {
  background-color: #1f2937 !important;
  color: white !important;
}

/* ======================================== */
/* CONSOLIDATED MEDIA QUERIES SECTION */
/* ======================================== */

/* Mobile Medium (max-width: 576px) */
@media (max-width: 576px) {
  body { padding: var(--space-md) !important; }
  /* Filter drawer responsive styles moved to filter_drawer.css for complete decoupling */
  h1, h2 { font-size: 1.5rem !important; }
  #toggleEarliestBtn, #getLocationBtn, #notifyForm button[type="submit"] { width: 100%; }
  .navbar-nav { gap: 1rem !important; }
  
  /* Theme toggle responsive styling */
  #themeToggle {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.85rem;
    min-width: 70px;
  }
  
  .navbar-brand {
    font-size: 1.3rem;
  }
  
  .d-flex.align-items-center.gap-3 {
    gap: var(--space-sm) !important;
  }
}

/* Tablet and Mobile Large (max-width: 768px) */
@media (max-width: 768px) {
  #themeToggle {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.9rem;
    min-width: 75px;
  }
  
  .navbar-brand {
    font-size: 1.4rem;
  }
  
  .d-flex.align-items-center.gap-3 {
    gap: var(--space-md) !important;
  }
}