@layer components {
  /* ═══════════════════════════════════════════════════════════════
     ARCHIVE HERO
  ═══════════════════════════════════════════════════════════════ */

  .archive-hero {
    @apply bg-slate-900 text-white py-6 md:py-8 bg-cover;
  }
  /* Breadcrumb hero içinde — koyu arka plan için renk override */
  .archive-hero .breadcrumb {
    @apply text-slate-300 pb-3 pt-0;
  }
  .archive-hero .breadcrumb__link {
    @apply text-slate-300 hover:text-white;
  }
  .archive-hero .breadcrumb__sep {
    @apply text-slate-500;
  }
  .archive-hero .breadcrumb__current {
    @apply text-white font-medium;
  }
  .archive-hero__title {
    @apply text-3xl md:text-4xl lg:text-5xl font-extrabold leading-tight text-white;
  }
  .archive-hero__description {
    @apply mt-4 text-slate-400 text-base md:text-lg leading-relaxed max-w-2xl;
  }
  .archive-hero__description p {
    @apply mb-0;
  }

  /* ═══════════════════════════════════════════════════════════════
     ARCHIVE LAYOUT
  ═══════════════════════════════════════════════════════════════ */

  .archive-layout {
    @apply grid grid-cols-1 lg:grid-cols-[280px_1fr] gap-8 lg:gap-10 py-8 md:py-12;
  }
  .archive-main {
    @apply min-w-0 flex flex-col gap-6;
  }

  /* ═══════════════════════════════════════════════════════════════
     FILTER SIDEBAR
  ═══════════════════════════════════════════════════════════════ */

  .filter-sidebar {
    @apply bg-white p-5;
    /* Mobile: bottom sheet */
    @apply fixed bottom-0 inset-x-0 overflow-y-auto
           rounded-t-3xl shadow-2xl border border-slate-200 border-b-0
           translate-y-full transition-transform duration-300 ease-out;
    max-height: 60vh;
    /* Desktop: static sidebar */
    @apply lg:static lg:rounded-2xl lg:border lg:border-slate-200 lg:shadow-none
           lg:translate-y-0 lg:transition-none lg:h-fit lg:max-h-none lg:overflow-visible;
  }
  .filter-sidebar.is-open {
    @apply translate-y-0 z-49;
  }
  /* Backdrop overlay on mobile when open */
  .filter-sidebar-backdrop {
    @apply fixed inset-0 z-40 lg:hidden;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
  }
  .filter-sidebar-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
  }
  /* Drag handle indicator */
  .filter-sidebar__handle {
    @apply flex justify-center pt-2 pb-1 lg:hidden;
  }
  .filter-sidebar__handle::before {
    content: "";
    @apply block w-10 h-1 rounded-full bg-slate-300;
  }

  .filter-sidebar__header {
    @apply flex items-center justify-between mb-5 pb-4 border-b border-slate-100;
  }
  .filter-sidebar__title {
    @apply text-base font-bold text-slate-900;
  }
  .filter-sidebar__close {
    @apply lg:hidden;
  }
  .filter-sidebar__actions {
    @apply flex flex-col gap-2 pt-4 mt-4 border-t border-slate-100;
  }

  /* ── Filter Groups ── */
  .filter-group {
    @apply border-b border-slate-100 last:border-0 py-4;
  }
  .filter-group__toggle {
    @apply w-full flex items-center justify-between text-sm font-semibold text-slate-800
           hover:text-slate-900 transition-colors;
  }
  .filter-group__toggle svg {
    @apply text-slate-400 transition-transform duration-200 shrink-0;
  }
  .filter-group__toggle[aria-expanded="false"] svg {
    @apply rotate-[-90deg];
  }
  .filter-group__body {
    @apply grid gap-1.5 mt-3;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  }
  /* Force single column for price, rating (need full width) */
  .filter-group--single .filter-group__body {
    grid-template-columns: 1fr;
  }

  /* ── Checkboxes ── */
  .filter-checkbox {
    @apply flex items-center gap-2.5 py-1 cursor-pointer;
  }
  .filter-checkbox input[type="checkbox"] {
    @apply w-4 h-4 rounded border-slate-300 text-slate-900
           focus:ring-2 focus:ring-offset-1 focus:ring-slate-500 cursor-pointer shrink-0;
  }
  .filter-checkbox__label {
    @apply text-sm text-slate-700 group-hover:text-slate-900 transition-colors flex-1;
  }
  .filter-checkbox__count {
    @apply text-xs text-slate-400 tabular-nums;
  }
  .filter-checkbox--stars {
    @apply items-center;
  }
  .filter-checkbox__stars {
    @apply flex items-center gap-0.5;
  }
  .star--filled {
    @apply text-yellow-400;
  }
  .star--empty {
    @apply text-slate-200;
  }
  .filter-checkbox__label-suffix {
    @apply text-xs text-slate-500 ml-1;
  }

  /* ── Price Range ── */
  .price-range__inputs {
    @apply flex items-end gap-2;
  }
  .price-range__sep {
    @apply text-slate-400 pb-3 shrink-0;
  }

  /* ═══════════════════════════════════════════════════════════════
     SORT BAR
  ═══════════════════════════════════════════════════════════════ */

  .sort-bar {
    @apply flex flex-wrap items-center justify-between gap-4
           bg-white border border-slate-200 rounded-2xl px-4 py-3;
  }
  .sort-bar__count {
    @apply text-sm text-slate-600;
  }
  .sort-bar__count strong {
    @apply text-slate-900 font-bold;
  }
  .sort-bar__controls {
    @apply flex items-center gap-2 flex-wrap;
  }

  /* ── Sort Select ── */
  .sort-select-wrap {
    @apply relative flex items-center;
  }
  .sort-select {
    @apply appearance-none bg-white border border-slate-200 rounded-xl pl-4 pr-8 py-2
           text-sm font-medium text-slate-700 cursor-pointer
           focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent transition;
  }
  .sort-select__icon {
    @apply absolute right-2 top-1/2 -translate-y-1/2 text-slate-400 pointer-events-none;
  }

  /* ── View Toggle ── */
  .view-toggle {
    @apply flex items-center border border-slate-200 rounded-xl overflow-hidden;
  }
  .view-toggle__btn {
    @apply w-9 h-9 flex items-center justify-center text-slate-500
           hover:bg-slate-100 hover:text-slate-800 transition-colors;
  }
  .view-toggle__btn.is-active {
    @apply bg-slate-900 text-white;
  }
  .view-toggle__btn + .view-toggle__btn {
    @apply border-l border-slate-200;
  }

  /* ═══════════════════════════════════════════════════════════════
     ACTIVE FILTER PILLS
  ═══════════════════════════════════════════════════════════════ */

  .active-filters {
    @apply flex flex-wrap items-center gap-2;
  }
  .active-filter-pill {
    @apply inline-flex items-center gap-1.5 pl-3 pr-2.5 py-1.5 rounded-full
           text-xs font-semibold text-slate-700 bg-slate-100 border border-slate-200
           hover:bg-slate-200 hover:border-slate-300 transition-colors;
  }
  .active-filter-pill--clear {
    @apply text-red-600 bg-red-50 border-red-100 hover:bg-red-100 hover:border-red-200;
  }
  .active-filter-pill__remove {
    @apply text-slate-400 ml-0.5 text-base leading-none hover:text-red-500 transition-colors;
  }

  /* ═══════════════════════════════════════════════════════════════
     TOUR GRID — LOADING STATE
  ═══════════════════════════════════════════════════════════════ */

  .tour-grid.is-loading {
    @apply relative pointer-events-none select-none;
  }
  .tour-grid.is-loading::after {
    content: "";
    @apply absolute inset-0 rounded-2xl z-10 bg-white/60;
  }
  .tour-grid.is-loading .tour-card {
    @apply opacity-50;
  }

  /* ═══════════════════════════════════════════════════════════════
     EMPTY STATE
  ═══════════════════════════════════════════════════════════════ */

  .empty-state {
    @apply flex flex-col items-center justify-center text-center py-20 px-6;
  }
  .empty-state__icon {
    @apply text-slate-200 mb-5;
  }
  .empty-state__title {
    @apply text-xl font-bold text-slate-800 mb-2;
  }

  /* ═══════════════════════════════════════════════════════════════
     ARCHIVE — FILTER SIDEBAR MOBILE OVERLAY
     (backdrop behind the drawer on small screens)
  ═══════════════════════════════════════════════════════════════ */

  body.filter-sidebar-open {
    @apply overflow-hidden;
  }

  /* ═══════════════════════════════════════════════════════════════
     ARCHIVE — MAP VIEW
  ═══════════════════════════════════════════════════════════════ */

  .archive-map {
    @apply rounded-2xl overflow-hidden border border-slate-200;
    height: 560px;
    width: 100%;
  }

  .map-no-location {
    @apply flex items-center justify-center h-full text-slate-400 text-sm;
  }

  /* Leaflet custom pin */
  .map-pin-icon {
    background: transparent !important;
    border: none !important;
  }

  .map-pin-dot {
    @apply block w-7 h-7 rounded-full bg-primary border-4 border-white shadow-lg
           transition-transform duration-150;
  }

  .map-pin-icon:hover .map-pin-dot,
  .leaflet-marker-icon:focus .map-pin-dot {
    @apply scale-125;
  }

  /* Leaflet popup custom styles */
  .leaflet-popup-content-wrapper {
    @apply !rounded-2xl !shadow-xl !border !border-slate-200 !p-0 !overflow-hidden;
  }

  .leaflet-popup-content {
    @apply !m-0;
    width: 240px !important;
  }

  .leaflet-popup-tip-container {
    @apply mt-0;
  }

  .map-popup {
    @apply flex flex-col;
  }

  .map-popup__img {
    @apply w-full object-cover;
    height: 120px;
  }

  .map-popup__body {
    @apply p-3 flex flex-col gap-1.5;
  }

  .map-popup__location {
    @apply text-xs text-slate-400 font-medium;
  }

  .map-popup__title {
    @apply text-sm font-bold text-slate-900 leading-snug line-clamp-2;
  }

  .map-popup__footer {
    @apply flex items-center justify-between gap-2 mt-1;
  }

  .map-popup__price {
    @apply text-sm font-bold text-emerald-600;
  }

  .map-popup__btn {
    @apply inline-flex items-center px-3 py-1.5 bg-slate-900 text-white text-xs
           font-semibold rounded-lg hover:bg-slate-700 transition-colors no-underline;
  }

}