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

@layer base {
  :root {
    --brand:      #C8102E;
    --brand-dark: #A50E25;
    --orange:     #C9A84C;
    --grey-50:    #f8f9fb;
    --grey-100:   #f1f3f7;
    --grey-200:   #e2e6ed;
    --grey-600:   #5c6472;
    --grey-900:   #1a1f2e;
  }
  html { scroll-behavior: smooth; }
  body {
    @apply font-sans text-[15px] text-[#1a1f2e] bg-white antialiased;
    line-height: 1.6;
  }
  h1,h2,h3,h4 {
    font-family: var(--font-barlow), system-ui, sans-serif;
    @apply font-bold;
  }
}

@layer components {
  /* Buttons */
  .btn-primary {
    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-brand text-white
           font-semibold text-sm px-5 py-2.5 transition-all duration-150
           hover:bg-brand-dark active:scale-[.98] whitespace-nowrap;
  }
  .btn-orange {
    @apply inline-flex items-center justify-center gap-2 rounded-xl bg-orange text-white
           font-semibold text-sm px-5 py-2.5 transition-all duration-150
           hover:bg-orange-dark active:scale-[.98] whitespace-nowrap;
  }
  .btn-outline {
    @apply inline-flex items-center justify-center gap-2 rounded-xl border border-brand
           text-brand font-semibold text-sm px-5 py-2.5 transition-all duration-150
           hover:bg-brand hover:text-white active:scale-[.98] whitespace-nowrap;
  }
  .btn-ghost {
    @apply inline-flex items-center gap-1.5 text-brand text-sm font-semibold
           hover:underline underline-offset-2;
  }

  /* Cards */
  .car-card {
    @apply bg-white rounded-2xl border border-[#e2e6ed] overflow-hidden
           transition-all duration-200 hover:-translate-y-1 hover:shadow-float hover:border-brand/20;
  }

  /* Section layout */
  .section-wrap  { @apply max-w-[1160px] mx-auto px-4 sm:px-6; }
  .section-title { @apply text-xl font-bold text-[#1a1f2e]; }
  .section-title::after {
    content: '';
    display: block;
    width: 2rem;
    height: 2px;
    background-color: var(--brand);
    margin-top: 0.35rem;
    border-radius: 1px;
  }
  .section-title.text-center::after {
    margin-left: auto;
    margin-right: auto;
  }
  .section-row   { @apply flex items-center justify-between mb-5; }

  /* Badges */
  .badge-sale  { @apply text-[10px] font-bold uppercase px-2 py-0.5 rounded bg-orange text-white tracking-wide; }
  .badge-new   { @apply text-[10px] font-bold uppercase px-2 py-0.5 rounded bg-emerald-500 text-white tracking-wide; }
  .badge-top   { @apply text-[10px] font-bold uppercase px-2 py-0.5 rounded bg-violet-600 text-white tracking-wide; }

  /* Scrollable rows */
  .hscroll {
    @apply flex gap-4 overflow-x-auto pb-2;
    scrollbar-width: thin;
    scrollbar-color: #e2e6ed transparent;
  }
  .hscroll::-webkit-scrollbar      { height: 3px; }
  .hscroll::-webkit-scrollbar-thumb { background: #e2e6ed; border-radius: 2px; }

  /* Pill tabs */
  .pill-tab {
    @apply flex-shrink-0 px-4 py-1.5 rounded-full text-sm font-medium border border-[#e2e6ed]
           text-[#5c6472] cursor-pointer transition-all hover:border-brand hover:text-brand;
  }
  .pill-tab.active {
    @apply bg-brand text-white border-brand;
  }

  /* Chip link */
  .brand-chip {
    @apply flex-shrink-0 px-5 py-2.5 rounded-xl bg-[#f1f3f7] text-[#1a1f2e] text-sm font-semibold
           border border-transparent transition-all hover:bg-brand hover:text-white hover:border-brand cursor-pointer;
  }

  /* City card */
  .city-card {
    @apply flex items-center justify-between p-4 rounded-2xl border border-[#e2e6ed] bg-white
           transition-all hover:border-brand/40 hover:bg-[#fff5f5] cursor-pointer;
  }

  /* FAQ */
  .faq-item {
    @apply border-b border-[#e2e6ed];
  }
  .faq-item summary {
    @apply flex justify-between items-center py-4 cursor-pointer select-none
           text-[15px] font-medium text-[#1a1f2e] list-none;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item[open] summary { @apply text-brand; }
  .faq-body { @apply pb-4 text-[#5c6472] text-sm leading-relaxed; }

  /* Review card */
  .review-card {
    @apply flex-shrink-0 w-72 bg-white rounded-2xl border border-[#e2e6ed] p-5 flex flex-col h-52;
  }
  .review-card-text {
    @apply flex-1 overflow-y-auto text-[#5c6472] text-[13px] leading-relaxed pr-1;
    scrollbar-width: thin;
    scrollbar-color: #e2e6ed transparent;
  }
  .review-card-text::-webkit-scrollbar { width: 4px; }
  .review-card-text::-webkit-scrollbar-track { background: transparent; }
  .review-card-text::-webkit-scrollbar-thumb { background: #e2e6ed; border-radius: 2px; }
}