/* ==========================================================================
   FILTER SYSTEM
   Yêu cầu: main.css load trước — cung cấp tất cả --z-* và color tokens.
   File này KHÔNG khai báo :root.
   ========================================================================== */


/* ==========================================================================
   1. FILTER LAYOUT
   ========================================================================== */
.filter-container {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  position: relative;
  z-index: var(--z-filter);
  overflow: visible !important;
}

.filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  padding: 8px 18px;
  border-radius: 50px;
  background: var(--bg-card-2);
  border: 1px solid rgba(255,255,255,.05);
  position: relative;
  z-index: var(--z-filter);
  overflow: visible !important;
}

.filter-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 40px;
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
  color: var(--text-muted);
  transition: all .25s ease;
}
.filter-item:hover                    { background: rgba(255,255,255,.08); color: var(--text); }
.filter-item:not(.dropdown-stars) span { color: var(--text); }

/* Cards nằm dưới filter */
.place-card,
.card-thumb { position: relative; z-index: 1; }


/* ==========================================================================
   2. CHECKBOX / TOGGLE
   ========================================================================== */
.filter-checkbox,
.dropdown-toggle { position: absolute; opacity: 0; width: 0; height: 0; }

.filter-checkbox:checked + .filter-toggle {
  border: 1px solid rgba(34,197,94,.5);
  background: rgba(34,197,94,.2);
}
.filter-checkbox:checked + .filter-toggle span    { color: var(--color-open); }
.filter-checkbox:checked + .filter-toggle .toggle-dot {
  animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}


/* ==========================================================================
   3. ICONS
   ========================================================================== */
.area-trigger             { display: flex; align-items: center; }
.area-trigger svg         { display: block; flex-shrink: 0; }
.area-trigger svg:first-of-type { color: var(--primary-pink); }
.area-trigger svg:nth-of-type(2),
.dropdown-label svg,
.filter-toggle svg        { color: var(--text); }
.filter-geo svg           { color: var(--color-open); animation: bounce-geo 2s ease-in-out infinite; }
.selected-area            { font-weight: 500; font-size: 14px; }

.dropdown-stars { position: relative; user-select: none; color: var(--text) !important; z-index: var(--z-filter); }


/* ==========================================================================
   4. PURE CSS DROPDOWN BASE (AREA / STAR / RADIUS)
   ========================================================================== */
.area-dd,
.star-dd,
.radius-dd { position: relative; display: inline-block; }

.area-dd { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* Ẩn input controls */
.area-dd .dd-state,
.area-dd .dd-panel,
.star-dd .sd-state,
.star-dd .sd-option,
.radius-dd .rd-state,
.radius-dd .rd-option { position: absolute; opacity: 0; pointer-events: none; }

/* Panel — style chung */
.area-dd .dd,
.star-dd .sd,
.radius-dd .rd {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  background: var(--bg-card);
  box-shadow: 0 20px 40px rgba(0,0,0,.6);
  overflow: hidden;
  z-index: var(--z-menu);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all .2s ease;
  pointer-events: none;
}
/* Panel — kích thước riêng */
.area-dd .dd   { min-width: 250px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; }
.star-dd .sd   { min-width: 180px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; }
.radius-dd .rd { min-width: 200px; border: 1px solid rgba(255,255,255,.12); border-radius: 14px; }

/* Trạng thái mở */
.area-dd   #dd-open:checked ~ .dd,
.star-dd   #sd-open:checked ~ .sd,
.radius-dd #rd-open:checked ~ .rd {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* Click-out overlays */
.area-dd .dd-overlay,
.star-dd .sd-overlay,
.radius-dd .rd-overlay {
  position: fixed;
  inset: 0;
  display: none;
  z-index: var(--z-overlay);
  cursor: default;
}
.area-dd   #dd-open:checked ~ .dd-overlay,
.star-dd   #sd-open:checked ~ .sd-overlay,
.radius-dd #rd-open:checked ~ .rd-overlay { display: block; }


/* ==========================================================================
   5. AREA DROPDOWN CONTENT
   ========================================================================== */
.dd-head {
  text-align: center;
  padding: 12px 16px;
  font-size: 14px; font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.dd-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.dd-back  { color: var(--primary-pink); font-weight: 500; cursor: pointer; user-select: none; font-size: 14px; }
.dd-title { color: var(--text); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; font-size: 14px; }
.dd-arrow { color: var(--primary-pink); font-size: 14px; margin-left: auto; flex-shrink: 0; }

.dd-list  { max-height: 400px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.dd-list::-webkit-scrollbar             { width: 4px; }
.dd-list::-webkit-scrollbar-track       { background: rgba(255,255,255,.04); }
.dd-list::-webkit-scrollbar-thumb       { background: var(--color-scrollbar); border-radius: 10px; }
.dd-list::-webkit-scrollbar-thumb:hover { background: var(--color-scrollbar-hover); }

.dd-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  font-size: 14px;
  color: var(--text-body);
  border-bottom: 1px solid rgba(255,255,255,.05);
  cursor: pointer; user-select: none;
  transition: background .15s ease;
}
.dd-item-wrapper:hover         { background: rgba(255,255,255,.04); }
.dd-item-wrapper.dd-strong     { font-weight: 500; }
.dd-item-wrapper.is-active     { background: rgba(255,255,255,.06); }
.dd-item-wrapper.is-active:hover { background: rgba(255,255,255,.08); }

.dd-item-link { width: 100%; display: block; color: inherit; text-decoration: none; }
.dd-item-text { display: block; flex: 1; }

.area-dd .panel { display: none; }


/* ==========================================================================
   6. STAR DROPDOWN CONTENT
   ========================================================================== */
.star-trigger {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text) !important;
}

.sd-head {
  text-align: center;
  padding: 12px 16px;
  font-size: 14px; font-weight: 500;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,.05);
}

.sd-list { max-height: 320px; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.sd-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--text-body);
  cursor: pointer; user-select: none;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background .15s ease;
}
.sd-item-wrapper:hover     { background: rgba(255,255,255,.04); color: var(--text); }
.sd-item-wrapper.is-active { background: rgba(255,255,255,.08); font-weight: 500; }


/* ==========================================================================
   7. RADIUS DROPDOWN CONTENT
   ========================================================================== */
.radius-dd .rd-list { padding: 10px 0; }

.radius-dd .rd-item {
  display: block;
  padding: 12px 16px;
  cursor: pointer; user-select: none;
  color: var(--text-body);
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .15s ease;
}
.radius-dd .rd-item:last-child { border-bottom: 0; }
.radius-dd .rd-item:hover      { background: rgba(255,255,255,.06); }
.radius-dd .rd-item.is-active  { background: rgba(255,255,255,.10); font-weight: 600; }


/* ==========================================================================
   8. LEGACY DROPDOWN-STARS
   ========================================================================== */
.dropdown-stars .dropdown-menu {
  position: absolute;
  left: 0;
  top: calc(100% + 10px);
  min-width: 160px;
  margin: 0; padding: 6px 0;
  list-style: none;
  opacity: 0; visibility: hidden;
  transform: translateY(-8px);
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border-3);
  box-shadow: 0 10px 30px rgba(0,0,0,.8);
  transition: all .2s ease-out;
  z-index: var(--z-menu);
}
.dropdown-toggle:checked ~ .dropdown-menu  { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-toggle:checked ~ .dropdown-label { background: rgba(255,255,255,.05); }

.dropdown-menu li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--text-body);
  cursor: pointer;
  transition: all .15s ease;
}
.dropdown-menu li:hover  { background: var(--border-3); color: var(--text); }
.dropdown-menu li.active { background: #2563eb; color: var(--text); font-weight: 500; }


/* ==========================================================================
   9. ANIMATIONS
   ========================================================================== */
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%     { opacity: .6; transform: scale(1.3); }
}
@keyframes bounce-geo {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-3px); }
}


/* ==========================================================================
   10. RESPONSIVE
   ========================================================================== */
@media (max-width: 480px) {
  .area-dd .dd { width: min(92vw, 360px); }
}

@media (max-width: 768px) {
  .filter-container {
    padding: 12px;
    margin: 15px 0;
    width: 100%;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 16px;
    backdrop-filter: blur(15px) saturate(160%);
    -webkit-backdrop-filter: blur(15px) saturate(160%);
  }
  .filter-bar {
    width: 100%; flex-wrap: wrap; gap: 12px;
    background: transparent; border: none; padding: 0; border-radius: 0;
  }
  .filter-item {
    flex: 0 0 auto;
    background: rgba(37,40,54,.6);
    border: 1px solid rgba(255,255,255,.08);
    color: var(--text-body);
    border-radius: 12px;
  }
  .filter-item:active { background: rgba(255,255,255,.1); transform: scale(.95); }
  .filter-checkbox:checked + .filter-toggle {
    background: rgba(34,197,94,.15);
    border: 1px solid rgba(34,197,94,.5);
  }
  .star-dd .sd,
  .dropdown-stars .dropdown-menu { min-width: 150px; }
}