/* ==========================================================================
   Andijon Premium Driving School — Apple Minimalist Theme System
   Dark Mode: Deep Space Black (#000000 / #0A0A0C)
   Light Mode: Apple Ceramic Light (#F5F5F7 / #FFFFFF)
   ========================================================================== */

:root {
  --bg-main: #000000;
  --bg-surface: #0a0a0c;
  --bg-card: rgba(255, 255, 255, 0.03);
  --bg-card-hover: rgba(255, 255, 255, 0.06);
  --border-subtle: rgba(255, 255, 255, 0.08);
  --border-light: rgba(255, 255, 255, 0.18);
  --border-highlight: rgba(255, 255, 255, 0.35);
  
  --text-primary: #ffffff;
  --text-secondary: #94a3b8;
  --text-tertiary: #64748b;
  --accent-white: #ffffff;
  --accent-soft-glow: rgba(255, 255, 255, 0.08);

  --btn-primary-bg: #ffffff;
  --btn-primary-text: #000000;
  --btn-secondary-bg: rgba(255, 255, 255, 0.06);
  --btn-secondary-border: rgba(255, 255, 255, 0.15);
  --btn-secondary-text: #ffffff;

  --toast-bg: rgba(10, 10, 12, 0.98);
  --toast-border: rgba(255, 255, 255, 0.18);
  --toast-text: #ffffff;
  --toast-bar: #ffffff;
}

[data-theme="light"] {
  --bg-main: #f5f5f7;
  --bg-surface: #ffffff;
  --bg-card: rgba(255, 255, 255, 0.75);
  --bg-card-hover: rgba(255, 255, 255, 0.95);
  --border-subtle: rgba(0, 0, 0, 0.08);
  --border-light: rgba(0, 0, 0, 0.15);
  --border-highlight: rgba(0, 0, 0, 0.3);
  
  --text-primary: #1d1d1f;
  --text-secondary: #515154;
  --text-tertiary: #86868b;
  --accent-white: #000000;
  --accent-soft-glow: rgba(0, 0, 0, 0.05);

  --btn-primary-bg: #000000;
  --btn-primary-text: #ffffff;
  --btn-secondary-bg: rgba(0, 0, 0, 0.05);
  --btn-secondary-border: rgba(0, 0, 0, 0.12);
  --btn-secondary-text: #1d1d1f;

  --toast-bg: rgba(255, 255, 255, 0.96);
  --toast-border: rgba(0, 0, 0, 0.12);
  --toast-text: #1d1d1f;
  --toast-bar: #000000;
}

/* Global Transitions for Theme Switching */
body {
  background-color: var(--bg-main) !important;
  color: var(--text-primary);
  transition: background-color 0.35s ease, color 0.35s ease;
}

/* Custom Minimalist Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-main);
}
::-webkit-scrollbar-thumb {
  background: #3f3f46;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #71717a;
}

/* Selection */
::selection {
  background-color: rgba(125, 125, 125, 0.25);
}

/* Apple Frosted Glass Core */
.frosted-glass {
  background: var(--bg-card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-subtle);
  box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.frosted-glass-card,
.course-card,
.bento-card {
  background: var(--bg-card);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid var(--border-subtle);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.35s ease;
  will-change: transform, box-shadow;
}

.frosted-glass-card:hover,
.course-card:hover,
.bento-card:hover {
  transform: translateY(-6px);
  background: var(--bg-card-hover);
  border-color: var(--border-light);
  box-shadow: 0 10px 30px -10px rgba(125, 125, 125, 0.15), 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Hover Effects on Photos */
.hover-photo-zoom {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), 
              filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, filter;
}
.group:hover .hover-photo-zoom,
.course-card:hover .hover-photo-zoom,
.swiper-slide-instructor:hover img {
  transform: scale(1.05);
  filter: brightness(1.08);
}

/* Standout Bestseller Card (Category B) */
.standout-bestseller {
  border: 1px solid var(--border-highlight) !important;
  box-shadow: 0 0 35px var(--accent-soft-glow), 0 25px 50px rgba(0, 0, 0, 0.12);
  position: relative;
}

/* Glass Header */
.glass-nav-apple {
  background: var(--bg-main);
  opacity: 0.94;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color 0.35s ease, border-color 0.35s ease;
}

/* Apple Typography Gradients */
.text-gradient-apple {
  background: linear-gradient(135deg, var(--text-primary) 30%, var(--text-secondary) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Apple Style Buttons */
.btn-apple-primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text) !important;
  font-weight: 700;
  border-radius: 9999px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-apple-primary:hover {
  opacity: 0.92;
  transform: scale(1.02);
}

.btn-apple-secondary {
  background: var(--btn-secondary-bg);
  color: var(--btn-secondary-text) !important;
  font-weight: 600;
  border: 1px solid var(--btn-secondary-border);
  border-radius: 9999px;
  backdrop-filter: blur(16px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-apple-secondary:hover {
  background: var(--btn-secondary-border);
  transform: scale(1.02);
}

/* Ambient Subtle Fog */
.ambient-glow-sphere {
  position: absolute;
  border-radius: 50%;
  filter: blur(140px);
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  will-change: transform;
}

/* Video Backdrop */
.hero-video-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(0.3) contrast(1.1) grayscale(0.2);
  transition: filter 0.35s ease;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(10, 10, 12, 0.4) 0%, rgba(0, 0, 0, 0.92) 80%, #000000 100%),
              linear-gradient(180deg, rgba(0, 0, 0, 0.85) 0%, transparent 45%, #000000 100%);
  transition: background 0.35s ease;
}

/* Radar Pulse for Map Marker */
@keyframes radarRing {
  0% {
    transform: scale(0.9);
    opacity: 0.8;
  }
  70% {
    transform: scale(2.5);
    opacity: 0;
  }
  100% {
    transform: scale(2.5);
    opacity: 0;
  }
}

.radar-marker-pulse {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid var(--text-primary);
  animation: radarRing 2.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite;
  pointer-events: none;
}

.custom-gold-pin {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--text-primary);
  border: 2px solid var(--bg-main);
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(125, 125, 125, 0.5), 0 6px 14px rgba(0, 0, 0, 0.4);
  color: var(--bg-main);
  font-size: 15px;
  font-weight: 800;
  transition: transform 0.25s ease;
  cursor: pointer;
}
.custom-gold-pin:hover {
  transform: scale(1.15);
}
.custom-gold-pin.active-pin {
  box-shadow: 0 0 28px rgba(125, 125, 125, 0.8), 0 0 10px var(--text-primary);
  transform: scale(1.25);
}

/* Leaflet Dark / Light Customizations */
#andijan-map {
  width: 100%;
  height: 520px;
  border-radius: 1.25rem;
  z-index: 10;
}

.leaflet-tile {
  filter: brightness(0.6) invert(1) contrast(3) hue-rotate(200deg) saturate(0.1) brightness(0.65);
  transition: filter 0.35s ease;
}

.leaflet-container {
  background: var(--bg-main) !important;
  font-family: inherit !important;
}

.leaflet-popup-content-wrapper {
  background: var(--toast-bg) !important;
  color: var(--toast-text) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4) !important;
  backdrop-filter: blur(20px) !important;
  padding: 4px !important;
}
.leaflet-popup-tip {
  background: var(--toast-bg) !important;
  border: 1px solid var(--border-light) !important;
}

/* Swiper 3D Instructor Slider */
.swiper-instructors {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 50px;
  perspective: 1000px;
}

.swiper-slide-instructor {
  width: 310px;
  height: 490px;
  border-radius: 1.75rem;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

@media (min-width: 640px) {
  .swiper-slide-instructor {
    width: 340px;
    height: 510px;
  }
}

.swiper-pagination-bullet {
  background: var(--text-tertiary) !important;
  width: 8px !important;
  height: 8px !important;
  transition: all 0.3s ease !important;
}
.swiper-pagination-bullet-active {
  background: var(--text-primary) !important;
  width: 28px !important;
  border-radius: 9999px !important;
  box-shadow: 0 0 12px var(--accent-soft-glow) !important;
}

.swiper-btn-nav {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--btn-secondary-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.25s ease;
  user-select: none;
}
.swiper-btn-nav:hover {
  background: var(--text-primary);
  color: var(--bg-main);
  box-shadow: 0 0 20px rgba(125, 125, 125, 0.25);
  transform: scale(1.08);
}

/* Accordion Item Active Glow */
.branch-acc-item.is-active {
  border-color: var(--border-light) !important;
  background: var(--bg-card-hover) !important;
}

/* 2x2 Grid Vehicle Image */
.course-card-image {
  height: 200px;
  width: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   Floating Glass Toast (Position: bottom 32px, right 32px with Drain Bar)
   ========================================================================== */
#toast-notification {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9999;
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
  max-width: 420px;
  width: calc(100% - 64px);
  overflow: hidden;
  border-radius: 1.25rem;
  background: var(--toast-bg);
  color: var(--toast-text);
  border: 1px solid var(--toast-border);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 20px var(--accent-soft-glow);
  backdrop-filter: blur(24px);
}

#toast-notification.toast-active {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.toast-progress-track {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(125, 125, 125, 0.15);
}

.toast-progress-bar {
  height: 100%;
  width: 100%;
  background: var(--toast-bar);
  transform-origin: left;
}

#toast-notification.toast-active .toast-progress-bar {
  animation: toastDrain 4s linear forwards;
}

@keyframes toastDrain {
  from { width: 100%; }
  to { width: 0%; }
}

/* ==========================================================================
   Light Theme Overrides (Apple Minimalist Aesthetic)
   ========================================================================== */
[data-theme="light"] .text-white {
  color: #1d1d1f !important;
}
[data-theme="light"] .text-slate-100 {
  color: #1d1d1f !important;
}
[data-theme="light"] .text-slate-200 {
  color: #27272a !important;
}
[data-theme="light"] .text-slate-300 {
  color: #3f3f46 !important;
}
[data-theme="light"] .text-slate-400 {
  color: #6e6e73 !important;
}
[data-theme="light"] .text-slate-500 {
  color: #86868b !important;
}
[data-theme="light"] .bg-black {
  background-color: #f5f5f7 !important;
}
[data-theme="light"] .bg-\[\#070709\] {
  background-color: #ffffff !important;
}
[data-theme="light"] .hero-video {
  filter: brightness(0.7) contrast(1.05) grayscale(0.1);
}
[data-theme="light"] .hero-video-overlay {
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.35) 0%, rgba(245, 245, 247, 0.9) 75%, #f5f5f7 100%),
              linear-gradient(180deg, rgba(245, 245, 247, 0.85) 0%, transparent 45%, #f5f5f7 100%);
}
[data-theme="light"] .leaflet-tile {
  filter: brightness(1) contrast(1.02);
}
[data-theme="light"] #booking-modal > div {
  background: rgba(255, 255, 255, 0.98);
  border-color: rgba(0, 0, 0, 0.12);
  color: #1d1d1f;
}
[data-theme="light"] #booking-form input,
[data-theme="light"] #booking-form select {
  background: #f5f5f7;
  color: #1d1d1f;
  border-color: rgba(0, 0, 0, 0.12);
}
[data-theme="light"] #mobile-menu-drawer {
  background: rgba(245, 245, 247, 0.98);
  border-left-color: rgba(0, 0, 0, 0.1);
}

/* Maintain dark scrim contrast for instructor slider in light mode */
[data-theme="light"] .swiper-slide-instructor .text-white,
[data-theme="light"] .swiper-slide-instructor .text-slate-100,
[data-theme="light"] .swiper-slide-instructor .text-slate-200,
[data-theme="light"] .swiper-slide-instructor .text-slate-300 {
  color: #ffffff !important;
}
[data-theme="light"] .swiper-slide-instructor .text-slate-400 {
  color: #cbd5e1 !important;
}

/* Maintain vehicle photo badge readability */
[data-theme="light"] .course-card .relative .text-white {
  color: #ffffff !important;
}

/* Toast badge in light mode */
[data-theme="light"] #toast-notification .rounded-full.bg-white {
  background-color: #000000 !important;
  color: #ffffff !important;
}

/* Active language pills in light mode */
[data-theme="light"] #lang-uz.bg-white,
[data-theme="light"] #lang-ru.bg-white,
[data-theme="light"] #mobile-lang-uz.bg-white,
[data-theme="light"] #mobile-lang-ru.bg-white {
  background-color: #000000 !important;
  color: #ffffff !important;
}