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

@layer base {
  :root {
    --primary: #1a56db;
    --primary-dark: #1e429f;
    --primary-light: #ebf5ff;
    --accent: #f97316;
    --accent-light: #fff7ed;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --text-muted: #9ca3af;
    --border: #e5e7eb;
    --border-dark: #d1d5db;
    --bg: #f3f4f6;
    --bg-white: #ffffff;
    --sidebar-w: 260px;
    /* Shared floater stack — CompareFloatingBar sets --compare-bar-height when visible */
    --compare-bar-height: 0px;
    --floater-gap: 0.75rem;
    --floater-bottom: calc(1.5rem + var(--compare-bar-height) + env(safe-area-inset-bottom, 0px));
    --back-to-top-bottom: calc(var(--floater-bottom) + 3.5rem);
  }

  * { box-sizing: border-box; }

  html {
    scroll-behavior: smooth;
    /* Prevent horizontal overflow on every viewport */
    overflow-x: hidden;
    /* Better text rendering */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  body {
    @apply bg-gray-100 text-gray-900 antialiased;
    font-family: var(--font-inter), ui-sans-serif, system-ui, -apple-system, sans-serif;
    /* Prevent body horizontal overflow without hiding intentional floats */
    overflow-x: hidden;
    /* Ensure minimum width so content never gets crushed below 320px */
    min-width: 320px;
  }

  /* Remove default tap highlight on mobile */
  a, button { -webkit-tap-highlight-color: transparent; }

  /* Ensure images never overflow their containers */
  img, video { max-width: 100%; height: auto; }

  /* Consistent focus ring across all interactive elements */
  :focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }

  ::-webkit-scrollbar { width: 5px; height: 5px; }
  ::-webkit-scrollbar-track { @apply bg-gray-100; }
  ::-webkit-scrollbar-thumb { @apply bg-gray-300 rounded-full; }
  ::-webkit-scrollbar-thumb:hover { @apply bg-primary; }
}

@layer components {
  /* ── Layout primitives ── */
  .page-container {
    @apply max-w-[1280px] mx-auto px-4 min-w-0;
  }

  /* Fixed UI anchors — keep advisor / back-to-top above compare bar */
  .floater-bottom {
    bottom: var(--floater-bottom);
  }
  .back-to-top-anchor {
    bottom: var(--back-to-top-bottom);
  }

  /* ── Buttons ── */
  .btn-primary {
    @apply bg-primary text-white text-sm font-semibold px-5 py-2.5 rounded
           hover:bg-primary-dark transition-colors duration-150 inline-flex items-center gap-2;
  }
  .btn-outline {
    @apply border border-primary text-primary text-sm font-semibold px-5 py-2.5 rounded
           hover:bg-primary-light transition-colors duration-150 inline-flex items-center gap-2;
  }
  .btn-ghost {
    @apply text-gray-600 text-sm px-3 py-2 rounded hover:bg-gray-100 transition-colors;
  }

  /* ── Card ── */
  .card-white {
    @apply bg-white border border-gray-200 rounded-lg;
  }

  /* ── Filter sidebar ── */
  .filter-section {
    @apply border-b border-gray-200 py-4;
  }
  .filter-title {
    @apply text-sm font-semibold text-gray-800 mb-3 flex items-center justify-between;
  }
  .filter-label {
    @apply flex items-center gap-2.5 text-sm text-gray-700 cursor-pointer
           hover:text-primary transition-colors py-0.5;
  }
  .filter-count {
    @apply text-xs text-gray-400 ml-auto;
  }

  /* ── Listing card ── */
  .list-card {
    @apply bg-white border border-gray-200 rounded-lg overflow-hidden
           hover:shadow-md hover:border-gray-300 transition-all duration-200 flex;
  }

  /* ── Skeleton ── */
  .skeleton {
    @apply bg-gray-200 rounded animate-pulse;
  }

  /* ── Tag/Badge ── */
  .spec-tag {
    @apply text-xs text-gray-600 bg-gray-50 border border-gray-200 rounded px-2 py-1
           flex items-center gap-1;
  }
  .fuel-tag {
    @apply text-xs font-medium px-2.5 py-1 rounded-full;
  }
  .tab-active {
    @apply border-b-2 border-primary text-primary font-semibold;
  }
  .tab-inactive {
    @apply border-b-2 border-transparent text-gray-600 hover:text-gray-900;
  }
}

/* Range slider */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  @apply bg-gray-200 rounded-full cursor-pointer;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 16px; height: 16px;
  border-radius: 50%;
  @apply bg-primary border-2 border-white shadow-sm cursor-pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid white;
  @apply bg-primary shadow-sm cursor-pointer;
}

/* Checkbox */
input[type="checkbox"] {
  @apply w-4 h-4 rounded border-gray-300 text-primary cursor-pointer;
  accent-color: var(--primary);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fadeIn 0.2s ease forwards; }

@keyframes loading-bar {
  0%   { transform: translateX(-100%) scaleX(0.3); }
  50%  { transform: translateX(0%)    scaleX(0.8); }
  100% { transform: translateX(200%)  scaleX(0.3); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}
.shimmer-bg {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}

/* Premium Sidebar Scrollbar */

.scrollbar-thin::-webkit-scrollbar {
  width: 6px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: transparent;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 999px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

/* Hide scrollbar entirely */
.scrollbar-none {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* ── Touch-friendly minimum target size (44×44px per WCAG 2.5.5) ── */
.touch-target {
  min-height: 44px;
  min-width: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Prevent text from breaking layout on small screens ── */
.text-break {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
}

/* ── Horizontal scroll container (no scrollbar visible) ── */
.scroll-x-smooth {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scroll-x-smooth::-webkit-scrollbar { display: none; }
.scroll-x-smooth > * { scroll-snap-align: start; }

/* ── Performance: will-change hint for animated cards ── */
.card-animated {
  will-change: transform;
  transform: translateZ(0); /* promote to own compositor layer */
}

/* ── Hero gradient overlay (used on banner slides) ── */
.hero-overlay {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0.05) 100%
  );
}
@media (max-width: 640px) {
  .hero-overlay {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.75) 0%,
      rgba(0, 0, 0, 0.40) 50%,
      rgba(0, 0, 0, 0.10) 100%
    );
  }
}

/* ── Utility: line-clamp polyfill for older Webkit ── */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* ── Content visibility: auto for off-screen sections ── */
.content-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 400px; /* hint to browser on typical height */
}