/* =============================================================
   Advanced Search Filter — Widget Styles
   ================================================================
   >>> BUILD SIGNATURE: ASF-CSS-VERSION-2.9.2-CLICK-FLASH-FIX-CSS-REFRESH <<<
   If you can read this line in your browser's DevTools →
   Sources → asf-style.css, then the NEW plugin file is loading.
   If you see the previous "v1.3.0" header instead, your site
   is still serving the OLD file — a caching layer (Autoptimize,
   LiteSpeed, WP Rocket, Cloudflare) is intercepting the request.
   ============================================================= */

:root {
  --asf-primary:        #1a3a5c;
  --asf-primary-hover:  #0f2540;
  --asf-accent:         #e8a020;
  --asf-surface:        #ffffff;
  --asf-surface-2:      #f4f7fa;
  --asf-border:         #dce4ed;
  --asf-border-focus:   #1a3a5c;
  --asf-text:           #1e2a38;
  --asf-text-muted:     #6b7a8d;
  --asf-shadow-focus:   0 0 0 3px rgba(26,58,92,0.18);
  --asf-radius-sm:      5px;
  --asf-transition:     0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --asf-accordion-dur:  0.36s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Widget wrapper ─────────────────────────────────────────── */
.asf-widget-wrap {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 13px;
  color: var(--asf-text);
  background: transparent;
  border: none;
  box-shadow: none;
  /* Float above all page layers when accordion expands */
  position: relative;
  z-index: 9999;
  overflow: visible;
}

/* ── Form layout ────────────────────────────────────────────── */
.asf-form {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: visible;
}

/* ── Field group ────────────────────────────────────────────── */
.asf-field-group {
  padding: 6px 0;
  background: transparent;
}

/* ── Custom Select ──────────────────────────────────────────── */
.asf-select-wrap {
  position: relative;
}

.asf-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  padding: 8px 32px 8px 10px;
  background: var(--asf-surface-2);
  border-radius: var(--asf-radius-sm);
  color: var(--asf-text);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12.5px;
  cursor: pointer;
  outline: none;
  transition: border-color var(--asf-transition), box-shadow var(--asf-transition), background var(--asf-transition);
  border: solid 3px #c1d2e8b2 !important;
}

/* Force Verdana into the native dropdown option list */
.asf-select option {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12.5px;
  color: var(--asf-text);
  background: var(--asf-surface);
}

.asf-select:hover {
  border-color: #b0bfcf;
  background: #edf2f8;
}

.asf-select:focus {
  border-color: var(--asf-border-focus);
  background: #ffffff7d !important;   /* 50% white — v2.8.4 focus tint */
  box-shadow: var(--asf-shadow-focus);
}

/* v2.9.2 — Suppress the focus-transition flash on mouse-driven focus.
   The base `.asf-select` (and `.asf-input`) has `background` in its
   transition list — a deliberate choice for smooth hover fades and
   Tab-key focus. But mouse users read a click-triggered 280ms
   grey → semi-white fade as a "flash". JS toggles this class on
   mousedown and removes it on blur, so mouse focus becomes instant
   (no flash) while keyboard focus keeps its smooth transition —
   the accessibility affordance is preserved. */
.asf-select.asf-no-transition,
.asf-input.asf-no-transition {
  transition: none !important;
}

/* Custom arrow */
.asf-select-arrow {
  pointer-events: none;
  position: absolute;
  right: 11px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left:  5px solid transparent;
  border-right: 5px solid transparent;
  border-top:   6px solid var(--asf-text-muted);
  transition: transform var(--asf-transition);
}

.asf-select:focus ~ .asf-select-arrow {
  transform: translateY(-50%) rotate(180deg);
  border-top-color: var(--asf-primary);
}

/* ── Loading spinner on select ──────────────────────────────── */
.asf-select.asf-loading {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 50 50'%3E%3Ccircle cx='25' cy='25' r='20' fill='none' stroke='%231a3a5c' stroke-width='5' stroke-linecap='round' stroke-dasharray='80 30'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 25 25' to='360 25 25' dur='0.8s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  background-size:     16px 16px;
  opacity: 0.7;
  pointer-events: none;
}

/* ── Text Input ─────────────────────────────────────────────── */
.asf-input-wrap { position: relative; }

.asf-input {
  display: block;
  width: 100%;
  padding: 8px 10px;
  background: var(--asf-surface-2);
  border: solid 1px #527293 !important;
  border-radius: var(--asf-radius-sm);
  color: var(--asf-text);
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12.5px;
  outline: none;
  box-sizing: border-box;
  transition:
    border-color var(--asf-transition),
    box-shadow   var(--asf-transition),
    background   var(--asf-transition);
}

.asf-input::placeholder { color: #a0aab4; }

.asf-input:hover {
  border-color: #b0bfcf;
  background: #edf2f8;
}

.asf-input:focus {
  border-color: var(--asf-border-focus);
  background: #ffffff7d !important;   /* 50% white — v2.8.4 focus tint */
  box-shadow: var(--asf-shadow-focus);
}

/* v2.9.0 — Focus tint bulletproofing.
   The class-based rules above lose the cascade on some setups
   (GeneratePress `.widget input[type="text"]:focus` and BuddyPress
   form styling both hit at higher specificity than a plain .asf-input:focus).
   ID selectors have 100× the specificity of class chains, so `#asf-keyword`
   and `#asf-zip` win against literally any theme/BP rule; the longhand
   `background-color` (not `background`) also survives CSS optimizers that
   rewrite the shorthand. */
#asf-keyword:focus,
#asf-zip:focus,
input.asf-input:focus,
select.asf-select:focus {
  background-color: #ffffff7d !important;
}

/* v2.10.3 — Zip + keyword input border/background overrides.
   These two inputs take a thicker, lighter 3px border instead of the
   base .asf-input 1px #527293. The ID+class selectors match what the
   request specified and beat the base rule's !important via higher
   specificity. The keyword input additionally goes transparent-bg. */
input#asf-zip.asf-input.asf-zip-input {
  border: solid 3px #c1d2e8b2 !important;
}

input#asf-keyword.asf-input {
  background: #fff0;
  border: solid 3px #c1d2e8b2 !important;
}

/* ── Accordion rows ─────────────────────────────────────────── */
.asf-accordion-row {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--asf-accordion-dur);
  background: linear-gradient(135deg, #f0f6ff00 0%, #fafcff00 100%);
  /* Ensure expanded rows paint over content below the widget */
  position: relative;
  z-index: 9999;
}

/* PHP pre-rendered open state — skip the CSS transition on load */
.asf-accordion-row.asf-preopen {
  transition: none;
}

.asf-accordion-row.asf-open {
  max-height: 120px;
}

.asf-accordion-inner {
  padding: 2px 0 4px 8px;
  border-left: 3px solid #4990c3;
}

.asf-accordion-row .asf-field-group {
  padding: 3px 0;
  background: transparent;
}

/* ── Subscribe row (v2.7.0) ─────────────────────────────────── */
.asf-subscribe-row {
  padding: 8px 2px 4px;
  background: transparent;
}

.asf-subscribe-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 12px;
  line-height: 1.4;
  color: var(--asf-text);
  padding: 4px 2px;
  border-radius: var(--asf-radius-sm);
  transition: background var(--asf-transition), color var(--asf-transition);
}

.asf-subscribe-label:hover {
  background: rgba(26, 58, 92, 0.04);
  color: var(--asf-primary);
}

.asf-subscribe-checkbox {
  /* Compact, square, themed to widget palette */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 1px 0 0 0;
  padding: 0;
  background: var(--asf-surface);
  border: 1.5px solid #b0bfcf;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  position: relative;
  transition:
    background var(--asf-transition),
    border-color var(--asf-transition),
    box-shadow var(--asf-transition);
}

.asf-subscribe-checkbox:hover {
  border-color: var(--asf-primary);
}

.asf-subscribe-checkbox:focus-visible {
  border-color: var(--asf-primary);
  box-shadow: var(--asf-shadow-focus);
}

.asf-subscribe-checkbox:checked {
  background: var(--asf-primary);
  border-color: var(--asf-primary);
}

/* Custom checkmark for the checked state — pure CSS so no asset loads. */
.asf-subscribe-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.asf-subscribe-text {
  /* Right of the checkbox, as specified */
  flex: 1 1 auto;
  text-align: left;
}

/* Gentle "noticed" pulse when the box becomes checked (e.g. after page-
   prefill from saved subscription) — purely decorative, fades fast. */
@keyframes asf-sub-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(26, 58, 92, 0.32); }
  70%  { box-shadow: 0 0 0 6px rgba(26, 58, 92, 0);  }
  100% { box-shadow: 0 0 0 0 rgba(26, 58, 92, 0);    }
}

/* Apply pulse briefly on initial render when the box arrives already-
   checked from the server (small UX cue that the form has been restored
   from a saved subscription). The animation runs once and is unobtrusive. */
.asf-subscribe-checkbox:checked {
  animation: asf-sub-pulse 0.9s ease-out 1;
}

/* ── Recommended-only checkbox (v2.9.3) ─────────────────────────
   Its row/label/text reuse the .asf-subscribe-* classes, so those need
   no extra rules. Only the checkbox carries a distinct class (to stay
   clear of the subscribe/unsubscribe JS), so we mirror the subscribe
   checkbox's appearance here 1:1 for a visually identical control. */
.asf-recommended-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 1px 0 0 0;
  padding: 0;
  background: var(--asf-surface);
  border: 1.5px solid #b0bfcf;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  position: relative;
  transition:
    background var(--asf-transition),
    border-color var(--asf-transition),
    box-shadow var(--asf-transition);
}

.asf-recommended-checkbox:hover {
  border-color: var(--asf-primary);
}

.asf-recommended-checkbox:focus-visible {
  border-color: var(--asf-primary);
  box-shadow: var(--asf-shadow-focus);
}

.asf-recommended-checkbox:checked {
  background: var(--asf-primary);
  border-color: var(--asf-primary);
}

.asf-recommended-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Allow-Notifications checkbox (v2.10.2) ─────────────────────
   Its row/label/text reuse the .asf-subscribe-* classes. The control
   itself carries a distinct class (`asf-allow-notifications-checkbox`)
   so only the push JS reacts to it — which meant it previously fell
   back to the browser's default checkbox look (wrong size/colour).
   These rules mirror the subscribe/recommended checkbox 1:1 so all
   three controls are visually identical, checked and unchecked. */
.asf-allow-notifications-checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 1px 0 0 0;
  padding: 0;
  background: var(--asf-surface);
  border: 1.5px solid #b0bfcf;
  border-radius: 3px;
  cursor: pointer;
  outline: none;
  position: relative;
  transition:
    background var(--asf-transition),
    border-color var(--asf-transition),
    box-shadow var(--asf-transition);
}

.asf-allow-notifications-checkbox:hover {
  border-color: var(--asf-primary);
}

.asf-allow-notifications-checkbox:focus-visible {
  border-color: var(--asf-primary);
  box-shadow: var(--asf-shadow-focus);
}

.asf-allow-notifications-checkbox:checked {
  background: var(--asf-primary);
  border-color: var(--asf-primary);
}

.asf-allow-notifications-checkbox:checked::after {
  content: '';
  position: absolute;
  top: 1px;
  left: 4px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ── Allow-Notifications confirmation modal (v2.10.2) ────────────
   Borrowed from the companion "Stats" plugin's visibility-confirm
   modal so the push opt-in popup matches the rest of the site: same
   dimmed backdrop, white rounded card, pop-in, and grey/green pill
   buttons. Namespaced `.asf-push-modal-*` so it never collides with
   the Stats plugin's own `.stats-visibility-modal-*` rules. */
.asf-push-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, 0.55);
  z-index: 99998;
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}
.asf-push-modal-backdrop[hidden] { display: none !important; }

.asf-push-modal {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  pointer-events: none;
}
.asf-push-modal[hidden] { display: none !important; }

.asf-push-modal-inner {
  pointer-events: auto;
  background: #ffffff;
  border-radius: 12px;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.10),
    0 12px 32px rgba(17, 24, 39, 0.28);
  max-width: 460px;
  width: 100%;
  padding: 22px 24px 18px;
  box-sizing: border-box;
  font-family: inherit;
  color: #1f2937;
  text-align: center;
  animation: asf-push-modal-pop 160ms ease-out;
}

@keyframes asf-push-modal-pop {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

.asf-push-modal-title {
  margin: 0 0 10px;
  padding: 0;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: #111827;
}

.asf-push-modal-body {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
  color: #374151;
}

.asf-push-modal-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
}

.asf-push-modal-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  padding: 9px 22px;
  border-radius: 25px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.asf-push-modal-btn-cancel {
  background: #e5e7eb;
  color: #1f2937;
  border-color: #e5e7eb;
}
.asf-push-modal-btn-cancel:hover,
.asf-push-modal-btn-cancel:focus {
  background: #d1d5db;
  border-color: #d1d5db;
  outline: none;
}

.asf-push-modal-btn-agree {
  background: #7db04a;
  color: #ffffff;
  border-color: #16a34a;
}
.asf-push-modal-btn-agree:hover,
.asf-push-modal-btn-agree:focus {
  background: #6a9d3c;
  border-color: #138a3f;
  color: #ffffff;
  outline: none;
}

@media (max-width: 520px) {
  .asf-push-modal { padding: 12px; }
  .asf-push-modal-inner { padding: 18px 18px 14px; }
  .asf-push-modal-title { font-size: 16px; }
  .asf-push-modal-body { font-size: 13.5px; }
}

/* ── Buttons ────────────────────────────────────────────────── */
.asf-buttons {
  display: flex;
  gap: 6px;
  padding: 8px 0 0;
  background: transparent;
}

/* Reset button — text-link style, always transparent */
.asf-btn-reset {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  border: none;
  background: transparent !important;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 14px;
  color: var(--asf-text-muted);
  cursor: pointer;
  outline: none;
  white-space: nowrap;
  transition: color var(--asf-transition);
}

.asf-btn-reset:hover,
.asf-btn-reset:focus {
  background: transparent !important;
  color: var(--asf-text);
}

.asf-btn-reset:active { transform: translateY(1px); }

/* Submit button — inherits theme, explicit padding applied.
   `position: relative` anchors the busy spinner (see below). */
.asf-btn-submit {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 5px 10px;
  cursor: pointer;
  position: relative;
}

.asf-btn-icon { font-size: 12px; line-height: 1; }

/* ── Submit busy state ──────────────────────────────────────────
 *
 * v2.9.4 bugfix — "button grows taller while submitting".
 *
 * The spinner used to be an IN-FLOW `display:inline-block` pseudo-element
 * with `vertical-align:middle`. That only stays harmless while the button
 * actually renders as a flex container (flex items ignore vertical-align).
 * But `.asf-btn-submit` (0,1,0) ties on specificity with the theme's own
 * `.button` / `.wp-element-button` rules, and the theme stylesheet loads
 * AFTER the plugin's (plugins enqueue before the theme), so a theme
 * `display:inline-block` wins the tie. The button is then NOT a flex
 * container, the spinner joins the text's line box, and `vertical-align:
 * middle` pushes that line box taller — which reads as extra space appearing
 * UNDER the "Search" text the moment the form is submitted.
 *
 * Fix: take the spinner out of flow with `position:absolute`. An
 * out-of-flow box cannot contribute to the line box or the flex line, so
 * the button's height (and width) are now identical in both states, in
 * every theme, regardless of which `display` value ends up winning.
 *
 * Two details worth keeping:
 *   • Centring uses a negative margin, NOT `transform: translateY(-50%)`,
 *     because `transform` is already owned by the spin animation and would
 *     be overwritten on the first keyframe.
 *   • `box-sizing: border-box` pins the ring to exactly 11px including its
 *     2px border, so the -5.5px margin is always exactly half — themes that
 *     reset pseudo-elements to `content-box` can't knock it off-centre.
 */
.asf-form.asf-submitting .asf-btn-submit {
  opacity: 0.7;
  pointer-events: none;
}

.asf-form.asf-submitting .asf-btn-submit::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 10px;
  width: 11px;
  height: 11px;
  margin-top: -5.5px;
  box-sizing: border-box;
  border: 2px solid rgba(255,255,255,0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: asf-spin 0.7s linear infinite;
}

@keyframes asf-spin { to { transform: rotate(360deg); } }

/* ── Select pulse on AJAX populate ─────────────────────────── */
@keyframes asf-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(26,58,92,0.35); }
  70%  { box-shadow: 0 0 0 7px rgba(26,58,92,0);  }
  100% { box-shadow: 0 0 0 0 rgba(26,58,92,0);    }
}

.asf-select.asf-pulse { animation: asf-pulse 0.5s ease-out; }

/* ── Responsive ─────────────────────────────────────────────── */
@media ( max-width: 320px ) {
  .asf-buttons { flex-direction: column; }
}

/* =============================================================
   Search by Distance (v2.8.0, redesigned v2.8.1)
   Zip input + mileage slider laid out as one horizontal flex row.
   The slider column stacks: centered "N miles" readout ABOVE the
   track, with generous breathing room around it — no tick labels,
   no browser-native marks. The step="10" attr does the snapping.
   ============================================================= */
.asf-distance-group { padding: 6px 0; }

.asf-distance-row {
  display: flex;
  align-items: center;         /* vertically center zip against slider column */
  gap: 12px;
}

/* Zip input takes a fixed-ish share on the left. */
.asf-distance-zip-wrap {
  flex: 0 0 40%;
  max-width: 130px;
}

.asf-zip-input {
  width: 100%;
  text-align: center;
  letter-spacing: 0.5px;
}

/* Slider column: readout on top, slider below, both centered.
   Negative margin-top lifts the whole column ~12px so the readout label sits
   closer to the top edge of the zip input beside it in the flex row.
   The double-class + !important is deliberate — some themes (Astra, OceanWP)
   and some CSS optimizers rewrite hairline-margin rules at build time; the
   extra specificity means our rule wins no matter what the cascade does. */
.asf-distance-slider-wrap {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 2px 4px 4px;
  margin-top: -12px;
}
.asf-distance-group .asf-distance-row .asf-distance-slider-wrap.asf-distance-slider-wrap {
  margin-top: -12px !important;
}

/* ── Centered mileage readout ABOVE the slider ── */
.asf-distance-readout {
  text-align: center;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  line-height: 1;
  margin: 0 0 12px;
  user-select: none;
}
.asf-distance-value {
  font-size: 16px;
  font-weight: 500;
  color: #3d6089;
  letter-spacing: 0.3px;
  transition: color var(--asf-transition);
}
span.asf-distance-unit {
  margin-left: 0px;
  color: #4f5f77;
  font-size: 13px;
}

/* ── Range slider (cross-browser, rounded thumb, filled track) ── */
.asf-distance-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 100%;
  height: 5px;
  margin: 4px 0 6px;
    margin-top: 4px;
    margin-bottom: 6px;
  border-radius: 999px;
  background: linear-gradient( to right, #9ca8b6 0%, #9fb6ce var(--asf-slider-fill, 50%), var(--asf-border) var(--asf-slider-fill, 50%), var(--asf-border) 100% );
  outline: none;
  cursor: pointer;
}

/* Thumb — WebKit */
.asf-distance-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--asf-surface);
  border: 3px solid var(--asf-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
  transition: transform var(--asf-transition), box-shadow var(--asf-transition);
}
.asf-distance-slider::-webkit-slider-thumb:hover { transform: scale(1.12); }
.asf-distance-slider:focus::-webkit-slider-thumb { box-shadow: var(--asf-shadow-focus); }

/* Thumb — Firefox */
.asf-distance-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--asf-surface);
  border: 3px solid var(--asf-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  cursor: pointer;
}
.asf-distance-slider::-moz-range-track {
  height: 5px;
  border-radius: 999px;
  background: transparent;
}
.asf-distance-slider:focus::-moz-range-thumb { box-shadow: var(--asf-shadow-focus); }

/* ── Inactive state — no zip entered (v2.9.4) ───────────────────
 *
 * The mileage slider only means something once a zip exists, so until then
 * it is rendered `disabled` (server-side on first paint, then kept in sync
 * by asf-script.js as the member types). These rules make that state read
 * as clearly unavailable rather than merely decorative.
 *
 * The zip input itself is deliberately NOT dimmed or disabled — it's the
 * one control that must stay usable, since typing in it is what activates
 * the filter. */
.asf-distance-group.asf-distance-inactive .asf-distance-slider-wrap {
  opacity: 0.45;
  filter: grayscale(1);
  transition: opacity var(--asf-transition), filter var(--asf-transition);
}

.asf-distance-slider:disabled {
  cursor: not-allowed;
}

/* Neutralise the hover/scale affordances so a dead control never invites a drag. */
.asf-distance-slider:disabled::-webkit-slider-thumb {
  cursor: not-allowed;
  background: #eef1f5;
  border-color: #b0bfcf;
  box-shadow: none;
}
.asf-distance-slider:disabled::-webkit-slider-thumb:hover {
  transform: none;
}
.asf-distance-slider:disabled::-moz-range-thumb {
  cursor: not-allowed;
  background: #eef1f5;
  border-color: #b0bfcf;
  box-shadow: none;
}

/* Hint line — communicates WHY the filter is inactive, or which place a valid
   zip resolved to. Hidden only in the one state where it has nothing to add. */
.asf-distance-hint {
  display: block;
  margin: 2px 2px 0;
  padding: 0;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  color: var(--asf-text-muted);
  transition: color var(--asf-transition);
}

/* Zip resolved to a real place → show "City, ST" as a positive confirmation. */
.asf-distance-group[data-asf-zip-state="valid"] .asf-distance-hint {
  color: var(--asf-primary);
  font-weight: 500;
}

/* Typed 5 digits, but the dataset has no such code. */
.asf-distance-group[data-asf-zip-state="unknown"] .asf-distance-hint {
  color: #a3452f;
}

/* Mid-flight server check. */
.asf-distance-group[data-asf-zip-state="checking"] .asf-distance-hint {
  font-style: italic;
  opacity: 0.8;
}

/* A valid zip with no resolvable place label would leave an empty line. */
.asf-distance-group[data-asf-zip-state="valid"] .asf-distance-hint:empty {
  display: none;
}

/* Narrow widgets: stack zip over slider. */
@media ( max-width: 360px ) {
  .asf-distance-row { flex-direction: column; align-items: stretch; }
  .asf-distance-zip-wrap { flex: 1 1 auto; max-width: none; }
}

/* =============================================================
   "OR" Divider (v2.9.0)
   Sits between the Locations block and the Search-by-Distance
   block to signal these are alternative geographic filters.
   Classic flexbox pattern: text between two hairlines.
   ============================================================= */
.asf-or-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 2px;
  padding: 2px 0;
  user-select: none;
}
.asf-or-divider::before,
.asf-or-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--asf-border);
  border: 0;
}
.asf-or-divider-text {
  flex: 0 0 auto;
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  color: #2f3f55;
  text-align: left;
  letter-spacing: 0.2px;
  line-height: 1.25;
  white-space: nowrap;
  padding: 0 6px;
    padding-top: 0px;
    padding-bottom: 0px;
  margin-left: -15px;
}
/* v2.9.2 — Two-line divider variant.
   The base rule now carries all font / padding / margin per user's spec.
   We only need to enforce the <br> break rendering here; `display: block`
   guarantees consistent line-break behaviour across browsers even when
   the parent has `white-space: nowrap`. */
.asf-or-divider-2line .asf-or-divider-text br {
  display: block;
  content: '';
  margin-top: 1px;
}
/* On tight widget columns, let the text wrap instead of overflowing. */
@media ( max-width: 320px ) {
  .asf-or-divider { flex-wrap: wrap; }
  .asf-or-divider-text { white-space: normal; padding: 2px 0; }
}

/* =============================================================
   Search-result recommendation credit (v2.9.6)

   Rendered by ASF_Recommended_Bridge::render_credit() and appended to the
   excerpt on search results, when the "recommended by my Friends or Team
   Members" filter is active:

       Recommended on 07/14/26 by: Jane Doe

   Scoped to spans because the theme prints the excerpt inside
   <p class="post-item__excerpt"> — a block element nested in a <p> would be
   auto-closed by the browser. `display:block` on a span gives the same
   result while keeping the markup valid.

   The GP child theme sets no rule on .post-item__excerpt, so it inherits the
   body font (17px / 500). Sizing here is relative (em) so the credit stays
   proportional if that body size is ever changed.
   ============================================================= */

.asf-rec-credit {
  display: block;
  margin-top: 0.5em;
  font-size: 0.8em;
  font-weight: 400;
  line-height: 1.5;
  color: var(--asf-text-muted);
}

.asf-rec-credit-line {
  display: block;
}

.asf-rec-date {
  font-weight: 600;
  color: #3d6089;
  white-space: nowrap;
}

.asf-rec-name {
  font-weight: 600;
}

/* Link colour tracks the theme's title-link accent on hover. */
a.asf-rec-name {
  color: var(--asf-primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(26, 58, 92, 0.25);
  transition: color var(--asf-transition), border-color var(--asf-transition);
}

a.asf-rec-name:hover,
a.asf-rec-name:focus {
  color: #e39602; /* matches .post-item__title > a:hover in the GP child theme */
  border-bottom-color: currentColor;
}

.asf-rec-credit-more {
  display: block;
  font-style: italic;
  opacity: 0.8;
}