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

body {
  @apply bg-white text-blue-950 antialiased transition-colors dark:text-slate-100;
}

html.dark body {
  background-image:
    linear-gradient(180deg, #172554 0%, #1b3068 35%, #0f1a40 100%);
}

.shell {
  @apply mx-auto max-w-7xl px-4 sm:px-6 lg:px-8;
}

.card {
  @apply rounded-[2rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
  border-color: rgb(231 229 228 / 0.8);
  background-color: rgb(255 255 255 / 0.82);
}

html.dark .card {
  border-color: rgb(30 64 175 / 0.40);
  background-color: rgb(23 37 84 / 0.72);
}

.site-page {
  @apply min-h-screen overflow-hidden text-blue-950;
  background-image:
    linear-gradient(180deg, #ffffff 0%, #fafafa 28%, #f5f5f5 58%, #ffffff 100%);
}

html.dark .site-page {
  @apply text-slate-100;
  background-image:
    linear-gradient(180deg, #172554 0%, #1b3068 35%, #0f1a40 100%);
}

.site-glow {
  background-image:
    radial-gradient(circle at top left, rgba(234, 88, 12, 0.24), transparent 34%),
    radial-gradient(circle at top right, rgba(59, 130, 246, 0.18), transparent 26%);
}

html.dark .site-glow {
  background-image:
    radial-gradient(circle at top left, rgba(251, 146, 60, 0.22), transparent 34%),
    radial-gradient(circle at top right, rgba(30, 64, 175, 0.18), transparent 26%);
}

.site-section {
  @apply shell py-10 sm:py-14 lg:py-16;
}

.site-panel {
  @apply rounded-[2rem] border p-7 shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors sm:p-8;
  border-color: rgb(231 229 228 / 0.8);
  background-color: rgb(255 255 255 / 0.82);
}

html.dark .site-panel {
  border-color: rgb(30 64 175 / 0.40);
  background-color: rgb(23 37 84 / 0.72);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.36);
}

.site-panel-muted {
  @apply rounded-[2rem] border p-7 transition-colors sm:p-8;
  border-color: rgb(231 229 228 / 0.8);
  background-image: linear-gradient(160deg, #fafafa 0%, #f5f5f5 100%);
}

html.dark .site-panel-muted {
  border-color: rgb(30 64 175 / 0.40);
  background-image: linear-gradient(160deg, #172554 0%, #1b3068 100%);
}

.site-panel-contrast {
  @apply rounded-[2rem] border p-7 text-white shadow-[0_30px_80px_rgba(28,25,23,0.18)] transition-colors sm:p-8;
  border-color: rgb(20 45 95 / 0.8);
  background-color: #172554;
}

html.dark .site-panel-contrast {
  border-color: rgb(30 64 175);
}

.site-kicker {
  @apply text-xs font-bold uppercase tracking-[0.28em] text-orange-600 dark:text-orange-400;
}

.site-title {
  @apply mt-4 text-4xl font-black tracking-[-0.04em] text-blue-950 dark:text-white sm:text-5xl;
}

.site-lead {
  @apply mt-5 text-base leading-8 text-stone-600 dark:text-slate-300 sm:text-lg;
}

.site-link-primary {
  @apply rounded-full bg-orange-600 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400;
}

.site-link-secondary {
  @apply rounded-full border border-stone-300 bg-white/85 px-6 py-3 text-sm font-semibold text-stone-700 transition hover:border-blue-900 hover:text-blue-900 dark:border-[#2e50f1] dark:bg-[#2e50f1]/30 dark:text-[#1e3de0] dark:hover:border-[#1e3de0] dark:hover:text-white;
}

/* Carplace public experience */
html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

html[lang='ar'] body {
  font-family: 'Noto Sans Arabic', Tahoma, Arial, sans-serif;
  line-height: 1.75;
}

:focus-visible {
  outline: 3px solid #f97316;
  outline-offset: 3px;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  inset-block-start: .5rem;
  inset-inline-start: .5rem;
  transform: translateY(-160%);
  border-radius: .75rem;
  background: #172554;
  color: white;
  padding: .75rem 1rem;
  font-weight: 800;
  transition: transform .15s ease;
}

.skip-link:focus { transform: translateY(0); }

.carplace-header {
  position: sticky;
  z-index: 100;
  inset-block-start: 0;
  border-bottom: 1px solid rgb(231 229 228 / .9);
  background: rgb(255 255 255 / .94);
  box-shadow: 0 1px 2px rgb(15 23 42 / .06);
  backdrop-filter: blur(14px);
}

html.dark .carplace-header {
  border-color: rgb(30 64 175 / .55);
  background: rgb(23 37 84 / .94);
}

.carplace-control,
.carplace-icon-button,
.carplace-company-link,
.carplace-primary-button,
.carplace-secondary-button,
.carplace-light-button,
.carplace-orange-button {
  @apply inline-flex min-h-11 items-center gap-2 rounded-xl px-4 py-2.5 text-sm font-bold no-underline transition disabled:cursor-not-allowed disabled:opacity-60;
}

.carplace-control,
.carplace-icon-button,
.carplace-secondary-button {
  @apply border border-stone-300 bg-white text-stone-700 hover:border-blue-900 hover:text-blue-900 dark:border-blue-800 dark:bg-blue-950 dark:text-slate-200 dark:hover:border-blue-500 dark:hover:text-white;
}

.carplace-icon-button { @apply min-w-11 justify-center px-0; }
.carplace-company-link { @apply bg-blue-950 text-white hover:bg-blue-900 dark:bg-orange-500 dark:hover:bg-orange-400; }
.carplace-primary-button,
.carplace-orange-button { @apply bg-orange-600 text-white hover:bg-orange-700 dark:bg-orange-500 dark:hover:bg-orange-400; }
.carplace-light-button { @apply bg-white text-blue-950 hover:bg-blue-50; }

.carplace-menu {
  @apply absolute top-full z-50 mt-2 w-60 overflow-hidden rounded-2xl border border-stone-200 bg-white p-1 shadow-2xl dark:border-blue-800 dark:bg-blue-950;
}

.carplace-menu-item { @apply flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-start text-sm font-semibold text-stone-700 hover:bg-blue-50 dark:text-slate-200 dark:hover:bg-blue-900/50; }

.carplace-hero {
  background-image:
    radial-gradient(circle at 10% 10%, rgb(249 115 22 / .16), transparent 28%),
    radial-gradient(circle at 92% 8%, rgb(37 99 235 / .14), transparent 28%),
    linear-gradient(180deg, #fff, #f8fafc);
}

html.dark .carplace-hero {
  background-image:
    radial-gradient(circle at 10% 10%, rgb(249 115 22 / .18), transparent 28%),
    radial-gradient(circle at 92% 8%, rgb(59 130 246 / .16), transparent 28%),
    linear-gradient(180deg, #172554, #0f1a40);
}

.carplace-search {
  @apply rounded-[2rem] border border-stone-200 bg-white/95 p-5 shadow-[0_30px_90px_rgba(15,23,42,0.14)] backdrop-blur dark:border-blue-800 dark:bg-blue-950/95 sm:p-6;
}

.carplace-search-compact {
  @apply rounded-2xl p-4 shadow-none;
}

.carplace-input {
  @apply min-h-11 w-full rounded-xl border border-stone-300 bg-white px-3 py-2 text-sm font-medium text-blue-950 outline-none transition placeholder:text-stone-400 hover:border-blue-500 focus:border-blue-700 focus:ring-2 focus:ring-blue-200 dark:border-blue-800 dark:bg-blue-950 dark:text-white dark:focus:border-blue-400 dark:focus:ring-blue-900;
}

.carplace-choice { @apply cursor-pointer rounded-full border border-stone-300 bg-white px-3 py-2 text-xs font-bold text-stone-600 transition dark:border-blue-800 dark:bg-blue-950 dark:text-slate-300; }
.carplace-choice-active { @apply border-orange-500 bg-orange-50 text-orange-800 dark:bg-orange-950/40 dark:text-orange-200; }
.carplace-trust-pill { @apply inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white/85 px-3 py-2 shadow-sm dark:border-blue-800 dark:bg-blue-950/70; }
.carplace-dark-pill { @apply inline-flex items-center gap-2 rounded-full border border-blue-700 bg-blue-900/70 px-3 py-2; }
.carplace-spec { @apply inline-flex items-center gap-1.5 rounded-full bg-stone-100 px-3 py-1.5 dark:bg-blue-900/45; }

.carplace-city-link { @apply inline-flex items-center gap-2 rounded-full border border-stone-200 bg-white px-4 py-2.5 text-sm font-bold text-stone-700 no-underline shadow-sm transition hover:-translate-y-0.5 hover:border-orange-400 hover:text-orange-700 dark:border-blue-800 dark:bg-blue-950 dark:text-slate-200 dark:hover:border-orange-500 dark:hover:text-orange-300; }
.carplace-category-card,
.carplace-company-card { @apply rounded-[1.5rem] border border-stone-200 bg-white p-5 no-underline shadow-[0_14px_45px_rgba(15,23,42,0.06)] transition hover:-translate-y-1 hover:border-blue-300 hover:shadow-[0_20px_60px_rgba(15,23,42,0.12)] dark:border-blue-900 dark:bg-blue-950 dark:hover:border-blue-600; }
.carplace-offer-card { @apply rounded-[2rem] bg-gradient-to-br from-blue-950 to-blue-800 p-6 shadow-[0_24px_70px_rgba(15,23,42,0.2)]; }
.carplace-guidance { @apply flex gap-3 rounded-2xl border border-stone-200 bg-white p-5 dark:border-blue-900 dark:bg-blue-950; }
.carplace-faq { @apply rounded-2xl border border-stone-200 bg-white p-5 dark:border-blue-900 dark:bg-blue-950; }
.carplace-faq summary { @apply cursor-pointer font-black text-blue-950 dark:text-white; }
.carplace-faq p { @apply mb-0 mt-3 text-sm leading-7 text-stone-600 dark:text-slate-300; }

.carplace-vehicle-card { @apply flex min-w-0 flex-col overflow-hidden rounded-[1.75rem] border border-stone-200 bg-white shadow-[0_18px_60px_rgba(15,23,42,0.08)] transition hover:-translate-y-1 hover:border-blue-300 hover:shadow-[0_24px_70px_rgba(15,23,42,0.14)] dark:border-blue-900 dark:bg-blue-950 dark:hover:border-blue-600; }
.carplace-card-action { @apply grid h-11 w-11 shrink-0 place-items-center rounded-xl bg-blue-950 text-white no-underline transition hover:bg-orange-600 dark:bg-orange-500 dark:hover:bg-orange-400; }
.carplace-booking { @apply rounded-[2rem] border border-stone-200 bg-white p-6 shadow-[0_24px_70px_rgba(15,23,42,0.12)] dark:border-blue-800 dark:bg-blue-950; }
.carplace-step { @apply flex min-w-0 flex-col items-center gap-1 text-center text-[10px] font-bold text-stone-400; }
.carplace-step span { @apply grid h-7 w-7 place-items-center rounded-full border border-stone-300 bg-white dark:border-blue-800 dark:bg-blue-950; }
.carplace-step-active { @apply text-orange-700 dark:text-orange-300; }
.carplace-step-active span { @apply border-orange-500 bg-orange-50 dark:bg-orange-950/50; }
.carplace-step-done { @apply text-emerald-700 dark:text-emerald-300; }
.carplace-step-done span { @apply border-emerald-500 bg-emerald-50 dark:bg-emerald-950/50; }

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