/* Tier badge (Budget / Entry Luxury / Luxury / Ultra Luxury).
   Sits bottom-left of a listing card's media, distinct from .card__badge. */
.tier-badge {
  position: absolute;
  bottom: 12px; left: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: #f7f1e3;
  background: rgba(20, 16, 10, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: 2;
}
.tier-badge--budget       { background: rgba(20, 16, 10, 0.55); }
.tier-badge--entry_luxury { background: rgba(20, 16, 10, 0.70); }
.tier-badge--luxury       { background: var(--gold); color: #fff; }
.tier-badge--ultra_luxury { background: var(--gold-deep); color: #fff; }

/* In-page (non-card) inline tier chip, e.g. on the villa detail intro. */
.tier-chip-inline {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  background: var(--card);
}
.tier-chip-inline--luxury,
.tier-chip-inline--ultra_luxury { border-color: var(--gold); color: var(--gold-deep); }

/* Breathing room between the tier pill and the description it sits above
   in the villa intro — scoped so other places (cards, search results)
   that use this chip inline don't pick up the spacing. */
.lc-intro .tier-chip-inline { margin-bottom: 1.4rem; }

/* Multi-select tier filter chips on the search page. */
.srch-tiers {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 0;
  align-items: center;
}
.srch-refine .srch-tiers { grid-column: 1 / -1; }
.srch-tiers__label {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); font-weight: 600; margin-right: 6px;
}
.tier-chip {
  position: relative;
  display: inline-flex; align-items: center;
  padding: 7px 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--ink-2);
  background: var(--surface);
  cursor: pointer;
  user-select: none;
  transition: background .15s, border-color .15s, color .15s;
}
.tier-chip:hover { border-color: var(--ink-2); }
.tier-chip input { position: absolute; opacity: 0; pointer-events: none; }
.tier-chip:has(input:checked) {
  background: var(--ink);
  border-color: var(--ink);
  color: #f7f1e3;
}