/* SDM Property Filters Pro v2.1.0 */

.sdm-pfp.sdm-pfp--code {
  display: flex;
  gap: .5rem;
  align-items: flex-end;
}
.sdm-pfp.sdm-pfp--code .sdm-pfp__field { flex: 1; }

/* ── Labels ───────────────────────────────────────────────────────── */
.sdm-pfp__sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Pills ────────────────────────────────────────────────────────── */
.sdm-pfp.property-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin: 0 auto 1rem;
}

.sdm-pfp__pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid #e2ddd5;
  border-radius: 999px;
  padding: .75rem 1.5rem;
  background: #fff;
  min-width: 0;
}

.sdm-pfp__pill:focus-within {
  border-color: #a9895f;
  box-shadow: 0 0 0 1px #a9895f;
}

.sdm-pfp__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a9895f;
  flex: 0 0 auto;
}
.sdm-pfp__icon svg { width: 17px; height: 17px; }

/* ── Visible value text (kept for any future custom-display use) ─── */
.sdm-pfp__value {
  font-size: 14px;
  line-height: 1.3;
  color: #364647;
  white-space: nowrap;
}

/* ── All inputs & selects — borderless inside the pill ───────────── */
.sdm-pfp__field select,
.sdm-pfp__field .sdm-pfp__input {
  border: none;
  background: transparent;
  padding: 0;
  font-size: 14px;
  line-height: 1.3;
  color: #364647;
  font-family: inherit;
  outline: none;
  min-width: 0;
}

.sdm-pfp__field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

/* Chevron sits in normal flex flow (not absolutely positioned) so its
   spacing comes from the pill's own `gap`, matching the icon's spacing on
   the other side — avoids the lopsided padding that absolute positioning
   plus the select's own reserved space was causing. */
.sdm-pfp__chevron {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #a9895f;
  border-bottom: 1.5px solid #a9895f;
  transform: rotate(45deg);
  margin-left: -.15rem;
  pointer-events: none;
}

/* ── Native date inputs ───────────────────────────────────────────── */
.sdm-pfp__field input[type="date"].sdm-pfp__date {
  cursor: pointer;
  appearance: auto;
  -webkit-appearance: auto;
}

.sdm-pfp__field input[type="date"].sdm-pfp__date::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  filter: sepia(1) saturate(2) hue-rotate(0deg);
}
.sdm-pfp__field input[type="date"].sdm-pfp__date::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* ── Buttons ──────────────────────────────────────────────────────── */
.sdm-pfp__actions {
  display: flex;
  gap: .5rem;
  align-items: center;
}

/* !important + all interaction states: the theme has a global button style
   (transparent bg, pink border/text) that otherwise wins on hover/focus/active
   even when the base state looks right — same issue as the calendar's nav
   arrows. Covering every state here beats it outright rather than patching
   it per-state via Additional CSS. */
.sdm-pfp__btn,
.sdm-pfp__btn:hover,
.sdm-pfp__btn:focus,
.sdm-pfp__btn:active {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  padding: .7rem 1.5rem !important;
  background: #2f3d33 !important;
  color: #fff !important;
  border: 1px solid #2f3d33 !important;
  border-radius: 999px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .03em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.5;
  outline: none !important;
}
.sdm-pfp__btn:hover:not(:disabled) { background: #232e27 !important; border-color: #232e27 !important; }

.sdm-pfp__reset {
  line-height: 2.15;
  text-decoration: none;
  color: #8a8578;
  font-size: 14px;
  white-space: nowrap;
}
.sdm-pfp__reset:hover { color: #364647; }

/* ── Availability notice ──────────────────────────────────────────── */
.sdm-pfp__notice {
  padding: .5rem 1rem;
  background: #faf7f2;
  border: 1px solid #ece7de;
  border-radius: 8px;
  font-size: 14px;
  color: #364647;
  margin-bottom: .75rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.sdm-pfp__spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid #ece7de;
  border-top-color: #a9895f;
  border-radius: 50%;
  animation: sdm-spin .7s linear infinite;
}
@keyframes sdm-spin { to { transform: rotate(360deg); } }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .sdm-pfp__pill { flex: 1 1 auto; }
  .sdm-pfp__actions { flex: 1 1 100%; }
  .sdm-pfp__btn { flex: 1; justify-content: center; }
}

/* ── Availability checking overlay ───────────────────────────────── */
.sdm-pfp__checking {
  background: #fff;
  border: 1px solid #ece7de;
  border-radius: 8px;
  padding: 1.25rem 2rem;
  font-size: 16px;
  color: #364647;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: .75rem;
  box-shadow: 0 4px 20px rgba(0,0,0,.12);
}

.sdm-pfp__no-results {
  padding: 2rem;
  font-size: 16px;
  color: #555;
  text-align: center;
  width: 100%;
}