/* ==========================================================================
   2M GARAGE - Modern Mobile App Styling (X-Clusive Luxury Automotive Theme)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

:root {
  --app-bg: #050505;
  --app-surface: #0a0e17;
  --app-card: #101522;
  --app-border: rgba(255, 255, 255, 0.08);
  --app-gold: #c9a84c;
  --app-gold-light: #f2db9a;
  --app-orange: #f97316;
  --app-orange-glow: rgba(249, 115, 22, 0.4);
  --font-main: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --nav-height: 72px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background-color: var(--app-bg);
  color: #f1f5f9;
  font-family: var(--font-main);
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* Safe Area Insets for iOS Notch & Android Navigation */
.safe-top {
  padding-top: env(safe-area-inset-top, 16px);
}

.safe-bottom {
  padding-bottom: calc(var(--nav-height) + env(safe-area-inset-bottom, 16px));
}

/* Custom App Scrollbar */
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(201, 168, 76, 0.25);
  border-radius: 4px;
}

/* Glassmorphism Panels */
.glass-panel {
  background: rgba(16, 21, 34, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.glass-card-gold {
  background: linear-gradient(135deg, rgba(20, 26, 40, 0.9) 0%, rgba(10, 14, 23, 0.95) 100%);
  border: 1px solid rgba(201, 168, 76, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
}

.glass-card-gold:active {
  transform: scale(0.985);
  border-color: rgba(201, 168, 76, 0.5);
}

/* App Screens Transition */
.app-screen {
  display: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.28s ease-out, transform 0.28s ease-out;
}

.app-screen.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* Fixed Bottom Navigation Bar */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: calc(var(--nav-height) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(8, 11, 16, 0.92);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-around;
  box-shadow: 0 -10px 35px rgba(0, 0, 0, 0.85);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 12px;
  border-radius: 16px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  cursor: pointer;
}

.nav-item i {
  font-size: 20px;
  margin-bottom: 4px;
  transition: transform 0.25s ease, color 0.25s ease;
}

.nav-item.active {
  color: #f2db9a;
}

.nav-item.active i {
  color: #c9a84c;
  transform: translateY(-2px) scale(1.12);
  filter: drop-shadow(0 0 10px rgba(201, 168, 76, 0.6));
}

.nav-item.active::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 16px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #c9a84c, #f97316);
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.8);
}

/* Central Floating Action Booking Tab (Özel Vurgulu Randevu Butonu) */
.nav-item-highlight {
  position: relative;
  top: -12px;
  background: linear-gradient(135deg, #c9a84c 0%, #f97316 100%);
  color: #050505 !important;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  padding: 0;
  box-shadow: 0 8px 25px rgba(249, 115, 22, 0.5), inset 0 1px 2px rgba(255, 255, 255, 0.5);
  border: 3px solid #050505;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.nav-item-highlight:active {
  transform: scale(0.92) translateY(-8px);
}

.nav-item-highlight i {
  margin: 0;
  color: #050505 !important;
  font-size: 22px;
}

/* Input Styles */
.mobile-input {
  background: rgba(16, 21, 34, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #ffffff;
  padding: 14px 16px;
  border-radius: 14px;
  font-size: 14px;
  width: 100%;
  outline: none;
  transition: all 0.2s ease;
}

.mobile-input:focus {
  border-color: #c9a84c;
  box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.2);
  background: rgba(22, 29, 46, 0.95);
}

/* Chip Buttons & Quick Filter Pills */
.filter-chip {
  padding: 8px 16px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  white-space: nowrap;
  transition: all 0.2s ease;
  cursor: pointer;
}

.filter-chip.active {
  background: linear-gradient(135deg, #c9a84c, #b98638);
  color: #050505;
  border-color: #f2db9a;
  box-shadow: 0 4px 15px rgba(201, 168, 76, 0.35);
}

/* Time Slot Chip */
.time-slot-btn {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  background: rgba(16, 21, 34, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
  transition: all 0.2s ease;
  cursor: pointer;
}

.time-slot-btn.selected {
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #ffffff;
  border-color: #fb923c;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

/* Brand Grid Button */
.brand-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  border-radius: 14px;
  background: rgba(16, 21, 34, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: all 0.2s ease;
  cursor: pointer;
}

.brand-btn.selected {
  border-color: #c9a84c;
  background: rgba(201, 168, 76, 0.15);
  box-shadow: 0 0 15px rgba(201, 168, 76, 0.3);
}

/* 5-Second Mobile Intro Overlay */
#mobile-intro-overlay {
  position: fixed;
  inset: 0;
  background: #050505;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.75s;
}

#mobile-intro-overlay.fade-out {
  opacity: 0 !important;
  transform: scale(1.05) !important;
  visibility: hidden;
  pointer-events: none;
}

.mobile-logo-anim {
  animation: mobileLogoAwaken 3.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mobileLogoAwaken {
  0% {
    opacity: 0;
    transform: scale(0.72);
    filter: brightness(0.04) contrast(2.0) grayscale(1) blur(10px);
  }
  24% {
    opacity: 0.6;
    transform: scale(0.85);
    filter: brightness(0.18) contrast(1.6) grayscale(0.7) blur(5px);
  }
  50% {
    opacity: 0.88;
    transform: scale(0.96);
    filter: brightness(0.4) contrast(1.3) grayscale(0.3) blur(1px);
  }
  68% {
    opacity: 1;
    transform: scale(1.04);
    filter: brightness(1.35) contrast(1.15) grayscale(0) blur(0);
  }
  84%, 100% {
    opacity: 1;
    transform: scale(1.0);
    filter: brightness(1.0) contrast(1.0) grayscale(0) blur(0);
  }
}

.mobile-aura-anim {
  animation: mobileAuraPulse 4.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mobileAuraPulse {
  0%, 30% { opacity: 0; transform: scale(0.8); }
  65% { opacity: 0.95; transform: scale(1.15); }
  85%, 100% { opacity: 0.65; transform: scale(1.0); }
}

.mobile-shimmer-sweep {
  position: absolute;
  top: -80%;
  left: -160%;
  width: 220%;
  height: 260%;
  background: linear-gradient(65deg, transparent 35%, rgba(255, 255, 255, 0.55) 48%, rgba(242, 219, 154, 0.45) 52%, transparent 65%);
  transform: rotate(20deg);
  pointer-events: none;
  animation: shimmerPass 4.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes shimmerPass {
  0%, 50% { left: -160%; opacity: 0; }
  54% { opacity: 1; }
  78% { left: 140%; opacity: 1; }
  85%, 100% { left: 140%; opacity: 0; }
}

.mobile-text-anim {
  animation: mobileTextReveal 3.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mobileTextReveal {
  0%, 42% { opacity: 0; transform: translateY(16px); filter: blur(5px); }
  70%, 100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.mobile-laser-anim {
  animation: laserLoad 4.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes laserLoad {
  0% { width: 0%; }
  25% { width: 22%; }
  55% { width: 58%; }
  80% { width: 86%; }
  100% { width: 100%; }
}

/* Toast Notifications */
.app-toast {
  position: fixed;
  top: calc(env(safe-area-inset-top, 16px) + 16px);
  left: 20px;
  right: 20px;
  z-index: 100000;
  display: flex;
  align-items: center;
  space-x: 12px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(10, 14, 23, 0.95);
  border: 1px solid rgba(201, 168, 76, 0.35);
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(20px);
  transform: translateY(-50px);
  opacity: 0;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  pointer-events: none;
}

.app-toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}