@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-bg: #ffffff;
    --color-surface: #f8fafc;
    --color-text: #0f172a;
    --color-text-secondary: #64748b;
    --color-border: #e2e8f0;
  }

  .dark {
    --color-bg: #0f172a;
    --color-surface: #1e293b;
    --color-text: #f1f5f9;
    --color-text-secondary: #94a3b8;
    --color-border: #334155;
  }

  html {
    scroll-behavior: smooth;
    overscroll-behavior-y: contain;
  }

  body {
    @apply bg-white text-slate-900 antialiased dark:bg-slate-950 dark:text-slate-100;
    font-family: 'Inter', 'Tajawal', system-ui, sans-serif;
    text-rendering: optimizeLegibility;
  }

  /* RTL Support */
  [dir="rtl"] body {
    font-family: 'Tajawal', 'Inter', system-ui, sans-serif;
  }

  [dir="rtl"] .ltr-only {
    direction: ltr;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-primary-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-primary-700 active:scale-[0.98] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 disabled:opacity-50 disabled:cursor-not-allowed dark:bg-primary-500 dark:hover:bg-primary-600;
  }

  .btn-secondary {
    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-white px-6 py-3 text-sm font-semibold text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 transition-all hover:bg-slate-50 active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed dark:bg-slate-800 dark:text-slate-100 dark:ring-slate-600 dark:hover:bg-slate-700;
  }

  .btn-success {
    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-emerald-600 px-6 py-3 text-sm font-semibold text-white shadow-sm transition-all hover:bg-emerald-700 active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed dark:bg-emerald-500 dark:hover:bg-emerald-600;
  }

  .card {
    @apply rounded-2xl bg-white p-6 shadow-sm ring-1 ring-slate-200 transition-shadow hover:shadow-md dark:bg-slate-800 dark:ring-slate-700;
  }

  .tool-card {
    @apply card cursor-pointer hover:ring-primary-300 hover:shadow-lg transition-all duration-200 dark:hover:ring-primary-600;
  }

  .input-field {
    @apply block w-full rounded-xl border-0 py-3 px-4 text-slate-900 shadow-sm ring-1 ring-inset ring-slate-300 placeholder:text-slate-400 focus:ring-2 focus:ring-inset focus:ring-primary-600 sm:text-sm sm:leading-6 dark:bg-slate-800 dark:text-slate-100 dark:ring-slate-600 dark:placeholder:text-slate-500;
  }

  .section-heading {
    @apply text-2xl font-bold tracking-tight text-slate-900 sm:text-3xl dark:text-slate-100;
  }
}

/* Upload zone styles */
.upload-zone {
  @apply flex flex-col items-center justify-center rounded-2xl border-2 border-dashed border-slate-300 bg-slate-50 p-4 text-center transition-colors cursor-pointer sm:p-6 lg:p-8 dark:border-slate-600 dark:bg-slate-800/50;
}

.upload-zone:hover,
.upload-zone.drag-active {
  @apply border-primary-400 bg-primary-50 dark:border-primary-500 dark:bg-primary-900/20;
}

.upload-zone.drag-active {
  @apply ring-2 ring-primary-300 dark:ring-primary-600;
}

/* Progress bar animation */
@keyframes progress-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

.progress-bar-animated {
  animation: progress-pulse 1.5s ease-in-out infinite;
}

/* Ad slot container */
.ad-slot {
  @apply flex items-center justify-center bg-slate-50 rounded-xl border border-slate-200 min-h-[90px] overflow-hidden dark:bg-slate-800 dark:border-slate-700;
}

/* Dropdown animation */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-in {
  animation: fadeSlideIn 0.15s ease-out;
}

/* ──────────────────────────────────────────────────────────────────────────
   Hero Upload Zone — premium glassmorphism card for the homepage
   ────────────────────────────────────────────────────────────────────────── */
.hero-upload-zone {
  @apply relative flex flex-col items-center justify-center rounded-3xl border border-slate-200/80 bg-white/80 backdrop-blur-sm p-6 text-center transition-all duration-300 ease-in-out cursor-pointer sm:p-10 lg:p-14 shadow-sm dark:border-slate-700/60 dark:bg-slate-800/60 dark:backdrop-blur-sm;
  background-image: radial-gradient(ellipse at top, rgba(219, 234, 254, 0.3) 0%, transparent 70%);
}

.dark .hero-upload-zone {
  background-image: radial-gradient(ellipse at top, rgba(30, 58, 138, 0.15) 0%, transparent 70%);
}

.hero-upload-zone::before {
  content: '';
  @apply absolute inset-0 rounded-3xl transition-opacity duration-300 opacity-0;
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.06) 0%, rgba(168, 85, 247, 0.04) 100%);
}

.hero-upload-zone:hover::before {
  @apply opacity-100;
}

.hero-upload-zone:hover {
  @apply border-primary-300 shadow-lg shadow-primary-100/50 -translate-y-1 dark:border-primary-600/60 dark:shadow-primary-900/30;
}

.hero-upload-zone.drag-active {
  @apply border-primary-500 shadow-2xl shadow-primary-200/60 scale-[1.02] dark:border-primary-400 dark:shadow-primary-900/40;
  background-image: radial-gradient(ellipse at top, rgba(191, 219, 254, 0.5) 0%, rgba(219, 234, 254, 0.2) 100%);
}

/* ──────────────────────────────────────────────────────────────────────────
   Glassmorphism card utility
   ────────────────────────────────────────────────────────────────────────── */
.glass-card {
  @apply bg-white/70 backdrop-blur-md border border-white/50 shadow-sm dark:bg-slate-800/60 dark:border-slate-700/50;
}

/* ──────────────────────────────────────────────────────────────────────────
   Gradient hero mesh background
   ────────────────────────────────────────────────────────────────────────── */
.hero-gradient-bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(59, 130, 246, 0.12) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(168, 85, 247, 0.06) 0%, transparent 60%),
    linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.dark .hero-gradient-bg {
  background:
    radial-gradient(ellipse 80% 60% at 50% -20%, rgba(30, 58, 138, 0.3) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 80% 20%, rgba(88, 28, 135, 0.15) 0%, transparent 60%),
    linear-gradient(180deg, #0f172a 0%, #0f172a 100%);
}

.marketing-shell {
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.1), transparent 30%),
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.08), transparent 26%),
    linear-gradient(180deg, rgba(248, 250, 252, 0.88) 0%, rgba(255, 255, 255, 0.92) 26%, #ffffff 100%);
}

.dark .marketing-shell {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.18), transparent 32%),
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.12), transparent 28%),
    linear-gradient(180deg, rgba(2, 6, 23, 0.96) 0%, rgba(15, 23, 42, 0.98) 26%, #020617 100%);
}

.marketing-panel {
  @apply rounded-[2rem] border border-slate-200/80 bg-white/90 shadow-sm backdrop-blur-sm dark:border-slate-700/70 dark:bg-slate-900/70;
}

.marketing-card {
  @apply rounded-[1.75rem] border border-slate-200/80 bg-white/90 p-6 shadow-sm transition-all duration-300 dark:border-slate-700/70 dark:bg-slate-900/75;
}

.marketing-card:hover {
  @apply -translate-y-1 shadow-lg shadow-slate-200/70 dark:shadow-slate-950/30;
}

.metric-card {
  @apply rounded-3xl border border-slate-200/80 bg-white/85 p-5 shadow-sm backdrop-blur-sm dark:border-slate-700/70 dark:bg-slate-900/70;
}

.section-kicker {
  @apply text-xs font-bold uppercase tracking-[0.24em] text-primary-600 dark:text-primary-400;
}

/* ──────────────────────────────────────────────────────────────────────────
   Shimmer loading effect
   ────────────────────────────────────────────────────────────────────────── */
@keyframes shimmer-sweep {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.shimmer-text {
  background: linear-gradient(90deg, #1e40af 30%, #7c3aed 50%, #1e40af 70%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer-sweep 4s linear infinite;
}

/* ──────────────────────────────────────────────────────────────────────────
   How it Works — connector line between steps
   ────────────────────────────────────────────────────────────────────────── */
.step-connector {
  @apply absolute top-8 left-[calc(50%+2.5rem)] hidden h-px w-[calc(100%-5rem)] sm:block;
  background: linear-gradient(90deg, rgba(59, 130, 246, 0.4) 0%, rgba(59, 130, 246, 0.1) 100%);
}

/* Modal animations */
@keyframes modalFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modalSlideUp {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.96);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.modal-backdrop {
  animation: modalFadeIn 0.2s ease-out;
}

.modal-content {
  animation: modalSlideUp 0.25s ease-out;
}

.deferred-section {
  content-visibility: auto;
  contain-intrinsic-size: 1px 2000px;
}

/* ──────────────────────────────────────────────────────────────────────────
   Mobile-first enhancements
   ────────────────────────────────────────────────────────────────────────── */

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Guard hover-dependent styles for touch devices */
@media (hover: hover) {
  .tool-card:hover {
    --tw-translate-y: -0.25rem;
  }
  .hero-upload-zone:hover {
    --tw-translate-y: -0.25rem;
  }
  .marketing-card:hover {
    --tw-translate-y: -0.25rem;
  }
}

/* Remove 300ms tap delay and prevent double-tap zoom on interactive elements */
a,
button,
input,
select,
textarea,
[role="button"] {
  touch-action: manipulation;
}

/* Safe-area inset support for notched phones */
.sticky-header-safe {
  padding-top: env(safe-area-inset-top);
}

.bottom-safe {
  padding-bottom: env(safe-area-inset-bottom);
}