/*
 * proximity.css — "Villas near..." POI filter + distance pills + Nearby widget.
 *
 * Design goals: quiet, sophisticated, MPS brand palette (deep navy #354766,
 * gold #c7b08f, ivory #f7f4ee). Chip animations are subtle: 120ms scale on
 * hover, 200ms color transition on activate. Card reorder is handled by JS
 * FLIP with a 320ms cubic ease.
 */

.proximity-picker {
  margin: 0 0 1.5rem;
}

.proximity-picker__inner {
  background: linear-gradient(180deg, #fbf8f1 0%, #f7f4ee 100%);
  border: 1px solid #e6ddc9;
  border-radius: 14px;
  padding: 1.1rem 1.25rem 1rem;
  box-shadow: 0 1px 2px rgba(53, 71, 102, 0.04);
}

.proximity-picker__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.85rem;
}

.proximity-picker__title-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
}

.proximity-picker__pin {
  font-size: 1.15rem;
}

.proximity-picker__title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #354766;
  margin: 0;
  letter-spacing: 0.01em;
}

.proximity-picker__clear {
  background: transparent;
  border: 1px solid #c7b08f;
  color: #354766;
  font: 500 0.78rem/1 'Inter', system-ui, sans-serif;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}
.proximity-picker__clear:hover {
  background: #354766;
  color: #f7f4ee;
}

.proximity-picker__categories {
  display: grid;
  gap: 0.65rem;
}

.proximity-cat {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 0.85rem;
  align-items: baseline;
}

@media (max-width: 720px) {
  .proximity-cat { grid-template-columns: 1fr; gap: 0.35rem; }
}

.proximity-cat__label {
  font: 600 0.68rem/1.1 'Inter', system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #7b8296;
  padding-top: 0.35rem;
}

.proximity-cat__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.5rem;
}

.proximity-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.7rem 0.4rem 0.55rem;
  border-radius: 999px;
  border: 1px solid #d6cdb8;
  background: #ffffff;
  color: #354766;
  font: 500 0.85rem/1 'Inter', system-ui, sans-serif;
  cursor: pointer;
  transition: transform 120ms ease, background 200ms ease, color 200ms ease,
              border-color 200ms ease, box-shadow 200ms ease;
  will-change: transform;
}

.proximity-chip:hover {
  transform: translateY(-1px) scale(1.02);
  border-color: #c7b08f;
  box-shadow: 0 2px 6px rgba(53, 71, 102, 0.08);
}

.proximity-chip:active { transform: scale(0.98); }

.proximity-chip.is-active {
  background: #354766;
  color: #f4e7c8;
  border-color: #354766;
  box-shadow: 0 3px 12px rgba(53, 71, 102, 0.18);
}

.proximity-chip.is-active .proximity-chip__icon { filter: none; }

.proximity-chip--partner {
  border-color: #c7b08f;
  background: linear-gradient(180deg, #fff8e6 0%, #f9edd0 100%);
}
.proximity-chip--partner.is-active {
  background: linear-gradient(180deg, #d4a45f 0%, #c7b08f 100%);
  color: #1c2438;
  border-color: #c7b08f;
}

.proximity-chip__icon {
  font-size: 0.95rem;
  line-height: 1;
}

.proximity-picker__status {
  margin-top: 0.85rem;
  font: 500 0.85rem/1.5 'Inter', system-ui, sans-serif;
  color: #596478;
  min-height: 1.2em;
}

.proximity-picker__status strong { color: #354766; }
.proximity-partner-link { color: #a06f2a; text-decoration: none; margin-left: 0.25rem; font-weight: 600; }
.proximity-partner-link:hover { text-decoration: underline; }

.proximity-empty { color: #8b3a3a; }

/* ---------- Distance pill on villa cards ---------- */

.villa-distance-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin: 0.5rem 0 0.25rem;
  padding: 0.28rem 0.65rem;
  background: linear-gradient(180deg, #f4e7c8 0%, #ecd9a8 100%);
  border: 1px solid #c7b08f;
  border-radius: 999px;
  font: 600 0.75rem/1.1 'Inter', system-ui, sans-serif;
  color: #354766;
  letter-spacing: 0.01em;
  animation: pillFadeIn 260ms cubic-bezier(.2,.7,.2,1);
}

.villa-distance-pill__pin { font-size: 0.85rem; line-height: 1; }
.villa-distance-pill--partner {
  background: linear-gradient(180deg, #354766 0%, #4a5c7a 100%);
  color: #f4e7c8;
  border-color: #354766;
}

@keyframes pillFadeIn {
  0%   { opacity: 0; transform: translateY(-2px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0)   scale(1);    }
}

/* Cards outside the max radius: dim but keep in DOM for consistency */
.villa-card.is-out-of-range {
  opacity: 0.35;
  filter: grayscale(0.4);
  transition: opacity 220ms ease, filter 220ms ease;
}

/* Smooth reorder — the FLIP transform is added inline by JS. */
.villa-grid .villa-card { transition: transform 320ms cubic-bezier(.2,.7,.2,1), opacity 220ms ease; }

/* ---------- Villa detail "Nearby" widget ---------- */

.nearby-widget {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  border: 1px solid #e6ddc9;
  border-radius: 12px;
  background: #fbf8f1;
}

.nearby-widget__title {
  font: 600 1rem/1.2 'Playfair Display', Georgia, serif;
  color: #354766;
  margin: 0 0 0.75rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.nearby-widget__pin { font-size: 1rem; }

.nearby-widget__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.4rem;
}

.nearby-row {
  display: grid;
  grid-template-columns: 1.3rem 1fr auto auto;
  align-items: baseline;
  gap: 0.55rem;
  font: 500 0.9rem/1.3 'Inter', system-ui, sans-serif;
  color: #354766;
  padding: 0.35rem 0;
  border-bottom: 1px dashed #e6ddc9;
}
.nearby-row:last-child { border-bottom: none; }

.nearby-icon { text-align: center; }
.nearby-name { color: #354766; }
.nearby-dist { color: #596478; font-variant-numeric: tabular-nums; font-weight: 600; }
.nearby-drive { color: #7b8296; font-size: 0.8rem; font-weight: 500; }

.nearby-widget__note {
  margin: 0.75rem 0 0;
  color: #7b8296;
  font: 400 0.75rem/1.3 'Inter', system-ui, sans-serif;
}