/**
 * LetzDeal - Clean White & Blue Premium Theme
 * Palette style Stripe/Airbnb - Blanc pur + bleu moderne
 */

:root {
  /* === CLEAN WHITE & BLUE COLOR PALETTE === */
  
  /* Neutrals - Clean whites & light grays */
  --apple-white: #ffffff;          /* Blanc pur */
  --apple-gray-50: #fafbfc;        /* Fond ultra-léger */
  --apple-gray-100: #f6f8fa;       /* Fond sections */
  --apple-gray-200: #e8ebed;       /* Bordures claires */
  --apple-gray-300: #d1d5db;       /* Bordures */
  --apple-gray-400: #9ca3af;       /* Texte secondaire */
  --apple-gray-500: #6b7280;       /* Texte tertiaire */
  --apple-gray-600: #4b5563;       /* Texte désactivé */
  --apple-gray-700: #374151;       /* Texte sombre */
  --apple-gray-800: #1f2937;       /* Texte très sombre */
  --apple-gray-900: #111827;       /* Texte principal */
  --apple-black: #000000;          /* Noir pur */
  
  /* Primary - Modern blue (Stripe-inspired) */
  --apple-blue: #0066ff;           /* Bleu moderne principal */
  --apple-blue-hover: #0052cc;     /* Bleu hover */
  --apple-blue-light: #e6f0ff;     /* Bleu très clair (backgrounds) */
  --apple-blue-dark: #004099;      /* Bleu foncé */
  
  /* Success - Fresh green */
  --apple-green: #00d084;
  --apple-green-hover: #00b872;
  
  /* Warning - Warm orange */
  --apple-orange: #ff9500;
  --apple-orange-hover: #e68600;
  
  /* Error - Clean red */
  --apple-red: #ff3b30;
  --apple-red-hover: #e6352a;
  
  /* Clean accents */
  --clean-blue-glow: rgba(0, 102, 255, 0.08);
  --clean-shadow: rgba(0, 0, 0, 0.08);
  
  /* === SHADOWS (subtle & clean) === */
  --shadow-sm: 0 1px 2px 0 var(--clean-shadow);
  --shadow-md: 0 2px 8px 0 var(--clean-shadow);
  --shadow-lg: 0 4px 16px 0 var(--clean-shadow);
  --shadow-xl: 0 8px 32px 0 var(--clean-shadow);
  
  /* === TYPOGRAPHY === */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Courier New', monospace;
  
  /* === SPACING (8px grid) === */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  
  /* === BORDER RADIUS (modern & smooth) === */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;
  
  /* === TRANSITIONS (smooth luxury) === */
  --transition-fast: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 350ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-smooth: 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* === GLOBAL OVERRIDES === */

body {
  font-family: var(--font-sans);
  background-color: var(--apple-gray-50);   /* Fond blanc léger */
  color: var(--apple-gray-900);             /* Texte noir */
}

/* === BUTTONS (Apple style) === */
.btn-primary {
  background: var(--apple-blue) !important;
  color: var(--apple-white) !important;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-weight: 500;
  border: none;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
}

.btn-primary:hover {
  background: var(--apple-blue-hover) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--apple-white) !important;
  color: var(--apple-gray-900) !important;
  border-radius: var(--radius-md);
  padding: 10px 20px;
  font-weight: 500;
  border: 1px solid var(--apple-gray-300);
  transition: all var(--transition-base);
}

.btn-secondary:hover {
  background: var(--apple-gray-50) !important;
  border-color: var(--apple-blue);
  color: var(--apple-blue);
}

/* === CARDS (Clean White style) === */
.card-apple {
  background: var(--apple-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--apple-gray-200);
  transition: all var(--transition-base);
}

.card-apple:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
  border-color: var(--apple-blue);
}

/* === HEADER (Clean White frosted glass) === */
header {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid var(--apple-gray-200);
}

/* === GRADIENT BANNER (Clean Blue gradient - Stripe style) === */
.gradient-bg {
  background: linear-gradient(135deg, 
    #0066ff 0%,      /* Bleu moderne */
    #0052cc 50%,     /* Bleu profond */
    #004099 100%     /* Bleu foncé */
  ) !important;
  border-bottom: none;
  box-shadow: var(--shadow-lg);
}

/* === INPUTS (Clean White style) === */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
  background: var(--apple-white);
  color: var(--apple-gray-900);
  border: 1px solid var(--apple-gray-300);
  border-radius: var(--radius-md);
  padding: 12px 16px;
  font-size: 16px;
  transition: all var(--transition-base);
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--apple-blue);
  box-shadow: 0 0 0 4px var(--clean-blue-glow);
  background: var(--apple-white);
}

/* === BADGES (Clean White & Blue) === */
.badge-premium {
  background: linear-gradient(135deg, var(--apple-blue) 0%, var(--apple-blue-dark) 100%);
  color: var(--apple-white);
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: var(--shadow-md);
}

/* === AI SEARCH WIDGET (Clean White) === */
.ai-search-widget {
  background: var(--apple-white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--apple-gray-200);
  overflow: hidden;
}

.ai-widget-header {
  background: linear-gradient(135deg, var(--apple-gray-50) 0%, var(--apple-white) 100%);
  border-bottom: 1px solid var(--apple-gray-200);
}

.ai-search-input {
  background: var(--apple-gray-50);
  border: 2px solid var(--apple-gray-200);
  border-radius: var(--radius-lg);
  font-size: 17px;
  padding: 14px 20px;
}

.ai-search-input:focus {
  background: var(--apple-white);
  border-color: var(--apple-blue);
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.1);
}

.ai-search-btn {
  background: var(--apple-blue);
  color: var(--apple-white);
  border-radius: var(--radius-md);
  padding: 14px 28px;
  font-weight: 500;
  transition: all var(--transition-base);
}

.ai-search-btn:hover {
  background: var(--apple-blue-hover);
  transform: scale(1.02);
}

.ai-suggestion-chip {
  background: var(--apple-gray-100);
  border: 1px solid var(--apple-gray-200);
  border-radius: var(--radius-full);
  padding: 8px 16px;
  color: var(--apple-gray-900);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--transition-fast);
}

.ai-suggestion-chip:hover {
  background: var(--apple-gray-200);
  border-color: var(--apple-gray-300);
}

.ai-listing-card {
  background: var(--apple-white);
  border: 1px solid var(--apple-gray-200);
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
  overflow: hidden;
}

.ai-listing-card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
  border-color: var(--apple-gray-300);
}

.ai-listing-link {
  background: var(--apple-blue);
  color: var(--apple-white);
  border: none;
  border-radius: var(--radius-sm);
  padding: 8px 16px;
  font-weight: 500;
  font-size: 14px;
  transition: all var(--transition-base);
  cursor: pointer;
}

.ai-listing-link:hover {
  background: var(--apple-blue-hover);
  transform: scale(1.05);
}

/* === DARK MODE === */
.dark body {
  background-color: var(--apple-black);
  color: var(--apple-gray-100);
}

.dark header {
  background: rgba(29, 29, 31, 0.8) !important;
  border-bottom-color: var(--apple-gray-800);
}

.dark .card-apple,
.dark .ai-search-widget {
  background: var(--apple-gray-900);
  border-color: var(--apple-gray-800);
}

.dark input,
.dark textarea,
.dark select {
  background: var(--apple-gray-800);
  border-color: var(--apple-gray-700);
  color: var(--apple-gray-100);
}

.dark .ai-search-input {
  background: var(--apple-gray-800);
  border-color: var(--apple-gray-700);
}

.dark .ai-suggestion-chip {
  background: var(--apple-gray-800);
  border-color: var(--apple-gray-700);
  color: var(--apple-gray-100);
}

.dark .ai-listing-card {
  background: var(--apple-gray-800);
  border-color: var(--apple-gray-700);
}

/* === ANIMATIONS - Apple Premium Effects === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.6s var(--transition-smooth);
}

.animate-fade-in {
  animation: fadeIn 0.4s var(--transition-base);
}

.animate-scale-in {
  animation: scaleIn 0.4s var(--transition-bounce);
}

.animate-slide-in-right {
  animation: slideInRight 0.5s var(--transition-smooth);
}

/* === MICRO-INTERACTIONS - Apple Style === */

/* Hover lift effect */
.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

/* Button press effect */
.btn-press {
  transition: transform var(--transition-fast);
}

.btn-press:active {
  transform: scale(0.98);
}

/* Smooth scale */
.hover-scale {
  transition: transform var(--transition-base);
}

.hover-scale:hover {
  transform: scale(1.02);
}

/* Glow effect on focus */
.focus-glow:focus {
  outline: none;
  box-shadow: 0 0 0 4px rgba(0, 122, 255, 0.15);
  transition: box-shadow var(--transition-base);
}

/* Shimmer loading effect */
.shimmer {
  background: linear-gradient(
    90deg,
    var(--apple-gray-200) 0px,
    var(--apple-gray-100) 40px,
    var(--apple-gray-200) 80px
  );
  background-size: 1000px 100%;
  animation: shimmer 1.5s infinite;
}

.dark .shimmer {
  background: linear-gradient(
    90deg,
    var(--apple-gray-800) 0px,
    var(--apple-gray-700) 40px,
    var(--apple-gray-800) 80px
  );
}

/* === GLOBAL SMOOTH TRANSITIONS (Apple-level fluidity) === */

/* Base transitions for all elements */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Smooth color transitions globally */
* {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: 250ms;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Interactive elements get faster, smoother transitions */
button,
a,
input,
textarea,
select,
.card,
.listing-card,
.nav-item {
  transition: all 300ms cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

/* Disable transitions on page load for performance */
.preload * {
  transition: none !important;
}

/* === APPLE-STYLE HOVER EFFECTS === */

/* Navigation items */
.nav-item {
  position: relative;
  overflow: hidden;
}

.nav-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.04);
  opacity: 0;
  transition: opacity 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-item:hover::before {
  opacity: 1;
}

.dark .nav-item::before {
  background: rgba(255, 255, 255, 0.06);
}

/* Cards with lift effect */
.listing-card,
.card-apple {
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, box-shadow;
}

.listing-card:hover,
.card-apple:hover {
  transform: translateY(-4px) translateZ(0);
  transition: transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* === SMOOTH SCROLL WITH MOMENTUM === */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}

/* Enable momentum scrolling on iOS */
body,
.overflow-y-auto {
  -webkit-overflow-scrolling: touch;
}

/* === HARDWARE ACCELERATION === */
.gpu-accelerate {
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
}

/* === BACKDROP BLUR - Apple Frosted Glass === */
.backdrop-blur-premium {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* === SMOOTH SCROLL === */
html {
  scroll-behavior: smooth;
}

/* Webkit scrollbar styling (Apple-like) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--apple-gray-100);
}

.dark ::-webkit-scrollbar-track {
  background: var(--apple-gray-900);
}

::-webkit-scrollbar-thumb {
  background: var(--apple-gray-400);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--apple-gray-500);
}

.dark ::-webkit-scrollbar-thumb {
  background: var(--apple-gray-600);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: var(--apple-gray-500);
}

/* === SIDEBAR (Clean White) === */
.sidebar {
  background: var(--apple-white);
  border-right: 1px solid var(--apple-gray-200);
}

.dark .sidebar {
  background: var(--apple-white);
  border-right-color: var(--apple-gray-200);
}

/* === MOBILE MENU === */
@media (max-width: 768px) {
  .btn-primary,
  .btn-secondary {
    padding: 12px 20px;
    font-size: 15px;
  }
}