/* Tailwind CSS CDN + Custom YOLO Styling */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200;300;400;500;600;700;800;900&display=swap');

/* Tailwind will be loaded via CDN in HTML */

/* YOLO Custom Properties */
:root {
  /* Light Theme Colors */
  --yolo-primary: #FFDD2D;
  --yolo-secondary: #004AAD;
  --yolo-accent: #FF6B35;

  /* Dark Theme Colors */
  --yolo-primary-dark: #FFE55D;
  --yolo-secondary-dark: #4A9EFF;
  --yolo-accent-dark: #FF8A65;
}

/* Custom YOLO Classes */
.yolo-gradient {
  background: linear-gradient(135deg, var(--yolo-secondary) 0%, #0066CC 50%, #007AFF 100%);
}

.yolo-gradient-soft {
  background: linear-gradient(135deg, #ffffff 0%, #f8fafc 50%, #f1f5f9 100%);
}

.white-elegant {
  background: linear-gradient(135deg, #ffffff 0%, rgba(248, 250, 252, 0.8) 100%);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04), 0 8px 32px rgba(0, 0, 0, 0.06);
}

.yolo-gradient-dark {
  background: linear-gradient(135deg, var(--yolo-secondary-dark) 0%, #5AA3FF 50%, #4A9EFF 100%);
}

.yolo-card-shadow {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

.yolo-card-shadow-dark {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.yolo-transition {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Realistic Phone Mockup Styling */
.phone-mockup {
  background: linear-gradient(145deg, #ffffff, #f1f5f9);
  border: 3px solid #1e293b;
  border-radius: 2.75rem;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.1),
    0 1px 2px 0 rgba(15, 23, 42, 0.1),
    0 8px 32px 0 rgba(15, 23, 42, 0.15),
    0 16px 64px 0 rgba(15, 23, 42, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.phone-mockup::before {
  content: '';
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  background: #64748b;
  border-radius: 3px;
  z-index: 10;
}

.phone-mockup::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  z-index: 10;
}

.phone-screen {
  margin: 35px 12px 55px 12px;
  border-radius: 1.5rem;
  overflow: hidden;
  box-shadow:
    inset 0 1px 2px 0 rgba(0, 0, 0, 0.05),
    inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

.phone-mockup:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.1),
    0 4px 8px 0 rgba(15, 23, 42, 0.12),
    0 16px 48px 0 rgba(15, 23, 42, 0.2),
    0 24px 80px 0 rgba(15, 23, 42, 0.15);
}

/* Large phone mockup variant */
.phone-mockup-large {
  background: linear-gradient(145deg, #ffffff, #f8fafc);
  border: 4px solid #1e293b;
  border-radius: 3rem;
  position: relative;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.1),
    0 2px 4px 0 rgba(15, 23, 42, 0.1),
    0 12px 40px 0 rgba(15, 23, 42, 0.18),
    0 20px 80px 0 rgba(15, 23, 42, 0.12);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.phone-mockup-large::before {
  content: '';
  position: absolute;
  top: 25px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 8px;
  background: #475569;
  border-radius: 4px;
  z-index: 10;
}

.phone-mockup-large::after {
  content: '';
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #f8fafc, #e2e8f0);
  border: 3px solid #cbd5e1;
  border-radius: 50%;
  z-index: 10;
}

.phone-mockup-large .phone-screen {
  margin: 45px 16px 70px 16px;
  border-radius: 1.75rem;
}

.phone-mockup-large:hover {
  transform: translateY(-12px) scale(1.03);
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, 0.1),
    0 6px 12px 0 rgba(15, 23, 42, 0.15),
    0 20px 60px 0 rgba(15, 23, 42, 0.25),
    0 30px 100px 0 rgba(15, 23, 42, 0.18);
}

/* Custom animations */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

.float-animation {
  animation: float 3s ease-in-out infinite;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

/* RTL Support */
[dir="rtl"] .rtl\:space-x-reverse > :not([hidden]) ~ :not([hidden]) {
  --tw-space-x-reverse: 1;
}

/* Custom utility classes */
.text-gradient {
  background: linear-gradient(135deg, var(--yolo-primary), var(--yolo-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hover-lift {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-gray-100 dark:bg-gray-800;
}

::-webkit-scrollbar-thumb {
  @apply bg-gray-400 dark:bg-gray-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
  @apply bg-gray-500 dark:bg-gray-500;
}

/* Mobile Optimizations */
@media (max-width: 640px) {
  .container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  
  /* Improve tap targets */
  button, a, input, select {
    min-height: 44px; 
  }
  
  /* Prevent text override */
  body {
    -webkit-text-size-adjust: 100%;
  }
}

/* Safe Area for modern phones */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .safe-pb {
    padding-bottom: env(safe-area-inset-bottom);
  }
}

/* Print styles */
@media print {
  .no-print {
    display: none !important;
  }
}