/*
 * National IDX Search — national-search.css
 * Plugin: sidx-national-search
 * Selector namespace: .sidx-national-*
 * Version: 1.1.0
 *
 * Brand: 1 Percent Lists — primary red #E31E24, navy #1B3A6B, white background.
 * Colors and interaction patterns (franchise badge, price-pin markers,
 * card active/selected states) match the approved v0.dev design reference
 * (real-estate-search-view), hand-ported to vanilla CSS — no Tailwind/React
 * dependency, consistent with every other plugin in this codebase.
 *
 * Covers both plugin surfaces:
 *   .sidx-national-page — dedicated search page ([national_idx_search])
 *   .sidx-national-omni — homepage omni search ([national_idx_omni_search])
 */

/* ─── Custom Properties ─────────────────────────────────────────────────── */

.sidx-national-page,
.sidx-national-omni {
  --sidx-national-primary:      #E31E24;
  --sidx-national-primary-dark: #b81319;
  --sidx-national-navy:         #1B3A6B;
  --sidx-national-navy-dark:    #12294d;
  --sidx-national-bg:           #f5f6f7;
  --sidx-national-card-bg:      #ffffff;
  --sidx-national-border:       #dddddd;
  --sidx-national-text:         #222222;
  --sidx-national-text-muted:   #5a6472;
  --sidx-national-text-faint:   #98a1ab;
  --sidx-national-radius-sm:    6px;
  --sidx-national-radius-md:    10px;
  --sidx-national-radius-pill:  999px;
  --sidx-national-shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.08);
  --sidx-national-shadow-md:    0 4px 16px rgba(0, 0, 0, 0.14);
  --sidx-national-transition:   0.2s ease;
  --sidx-national-gap:          20px;

  box-sizing: border-box;
  font-family: inherit;
  color: var(--sidx-national-text);
}

.sidx-national-page *,
.sidx-national-page *::before,
.sidx-national-page *::after,
.sidx-national-omni *,
.sidx-national-omni *::before,
.sidx-national-omni *::after {
  box-sizing: inherit;
}

/* ─── Dedicated Page Shell ───────────────────────────────────────────────── */

.sidx-national-page {
  /* No max-width here by design (2026-07-11) — this fills whatever
     container WordPress/the page builder places it in, which is now
     Astra's normal ~1240px theme container, matching every other page on
     the site. A full-width override used to force this wider (see git
     history) — removed per Dean's request to make the search page match
     the rest of the site's width instead of standing out as full-bleed. */
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* ─── Top Search Bar ─────────────────────────────────────────────────────── */

.sidx-national-topbar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}

.sidx-national-topbar input[type="text"] {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--sidx-national-border);
  border-radius: var(--sidx-national-radius-sm);
  font-size: 16px;
  font-family: inherit;
  color: var(--sidx-national-text);
  background: var(--sidx-national-card-bg);
  outline: none;
  transition: border-color var(--sidx-national-transition), box-shadow var(--sidx-national-transition);
  -webkit-appearance: none;
  appearance: none;
}

.sidx-national-topbar input[type="text"]:focus-visible {
  border-color: var(--sidx-national-primary);
  box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.15);
}

.sidx-national-btn {
  padding: 12px 24px;
  background: var(--sidx-national-primary);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  border: none;
  border-radius: var(--sidx-national-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--sidx-national-transition), transform var(--sidx-national-transition);
  -webkit-appearance: none;
  appearance: none;
}

.sidx-national-btn:hover { background: var(--sidx-national-primary-dark); }
.sidx-national-btn:active { transform: scale(0.98); }
.sidx-national-btn:focus-visible { outline: 3px solid var(--sidx-national-navy); outline-offset: 2px; }

@media (min-width: 600px) {
  .sidx-national-topbar { flex-direction: row; }
  .sidx-national-field { flex: 1 1 auto; }
}

/* ─── Search box autocomplete ────────────────────────────────────────────── */

.sidx-national-autocomplete {
  position: relative;
}

.sidx-national-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--sidx-national-card-bg);
  border: 1px solid var(--sidx-national-border);
  border-radius: var(--sidx-national-radius-sm);
  box-shadow: var(--sidx-national-shadow-md);
  max-height: 260px;
  overflow-y: auto;
}

.sidx-national-suggestion-item {
  padding: 10px 16px;
  font-size: 15px;
  color: var(--sidx-national-text);
  cursor: pointer;
}

.sidx-national-suggestion-item:hover,
.sidx-national-suggestion-item.is-active {
  background: var(--sidx-national-bg);
  color: var(--sidx-national-navy);
}

/* ─── Filters Bar ────────────────────────────────────────────────────────── */

.sidx-national-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 12px;
  padding: 12px 0 20px;
  border-bottom: 1px solid var(--sidx-national-border);
  margin-bottom: 16px;
}

.sidx-national-filter-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--sidx-national-text-muted);
}

.sidx-national-filter-label { font-weight: 600; }

.sidx-national-filter-field input,
.sidx-national-filter-field select {
  padding: 8px 10px;
  border: 1px solid var(--sidx-national-border);
  border-radius: var(--sidx-national-radius-pill);
  font-size: 14px;
  font-family: inherit;
  background: var(--sidx-national-card-bg);
  color: var(--sidx-national-text);
  min-width: 96px;
}

.sidx-national-filter-field input:focus-visible,
.sidx-national-filter-field select:focus-visible {
  outline: 2px solid var(--sidx-national-primary);
  outline-offset: 1px;
}

.sidx-national-filter-apply,
.sidx-national-filter-clear {
  padding: 9px 18px;
  border-radius: var(--sidx-national-radius-pill);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background var(--sidx-national-transition), color var(--sidx-national-transition);
}

.sidx-national-filter-apply {
  background: var(--sidx-national-navy);
  color: #ffffff;
  border: none;
}
.sidx-national-filter-apply:hover { background: var(--sidx-national-navy-dark); }

.sidx-national-filter-clear {
  background: transparent;
  color: var(--sidx-national-text-muted);
  border: 1px solid var(--sidx-national-border);
}
.sidx-national-filter-clear:hover { border-color: var(--sidx-national-text-muted); color: var(--sidx-national-text); }

/* ─── Status Line ────────────────────────────────────────────────────────── */

.sidx-national-status {
  font-size: 14px;
  color: var(--sidx-national-text-muted);
  min-height: 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.sidx-national-status.is-loading::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--sidx-national-border);
  border-top-color: var(--sidx-national-primary);
  border-radius: 50%;
  animation: sidx-national-spin 0.7s linear infinite;
  flex-shrink: 0;
}

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

/* ─── Split Layout: results + map ───────────────────────────────────────── */

.sidx-national-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sidx-national-gap);
}

.sidx-national-results-col { min-width: 0; }
.sidx-national-map-col { display: none; }

@media (min-width: 1024px) {
  .sidx-national-layout {
    /* minmax(0, 1.1fr) lets the results column shrink below its content's
       natural size instead of using the default auto-min, which otherwise
       lets the results grid's card content out-compete the empty map
       column for space — observed collapsing the map track to 0px during
       QA. minmax(320px, 0.9fr) gives the map column an explicit floor so
       it can never lose that competition, regardless of what either
       column's content demands. */
    grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
    align-items: start;
  }
  .sidx-national-map-col { display: block; position: sticky; top: 16px; min-width: 0; }
  .sidx-national-map {
    height: calc(100vh - 220px);
    min-height: 480px;
    border-radius: var(--sidx-national-radius-md);
    overflow: hidden;
    box-shadow: var(--sidx-national-shadow-sm);
  }
}

.sidx-national-map { width: 100%; }

/* ─── Results Grid ───────────────────────────────────────────────────────── */

.sidx-national-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sidx-national-gap);
}

@media (min-width: 560px) {
  .sidx-national-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  /* single column inside the narrower results column once the map appears */
  .sidx-national-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1400px) {
  .sidx-national-results { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ─── Listing Card ───────────────────────────────────────────────────────── */

/* .sidx-national-card-link is a <button> as of the own-site listing detail
   modal (it opens a modal, not a navigation) — reset every UA button
   default (background, border, padding, font, text-align, appearance) on
   top of the same block/inherit reset the old <a> version needed. Without
   this, the browser's default button chrome wraps the card content instead
   of the card filling the button, which is what broke the card's visual
   sizing after the <a>→<button> swap. */
.sidx-national-card-link {
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: none;
  color: inherit;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}

.sidx-national-card {
  /* min-width: 0 overrides the grid item default of min-width: auto, which
     otherwise sizes this column to the card's unshrinkable content (the
     price/address text) rather than the column's actual available space —
     the same class of bug fixed on .sidx-national-layout above, one level
     deeper. Without it, 3 columns of ~420px content-driven cards blow out
     a 631px results column and visually overlap the map. */
  min-width: 0;
  background: var(--sidx-national-card-bg);
  border-radius: var(--sidx-national-radius-md);
  box-shadow: var(--sidx-national-shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 2px solid transparent;
  transition: box-shadow var(--sidx-national-transition), transform var(--sidx-national-transition), border-color var(--sidx-national-transition);
}

.sidx-national-card:hover,
.sidx-national-card.is-pin-hovered {
  box-shadow: var(--sidx-national-shadow-md);
  transform: translateY(-2px);
}

.sidx-national-card.is-pin-selected {
  border-color: var(--sidx-national-navy);
}

.sidx-national-photo { position: relative; }

.sidx-national-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  max-width: 100%;
  height: auto;
}

.sidx-national-badges {
  position: absolute;
  top: 10px;
  left: 10px;
  right: 44px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sidx-national-badge {
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background: var(--sidx-national-navy);
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  padding: 5px 10px;
  border-radius: var(--sidx-national-radius-pill);
  letter-spacing: 0.02em;
}

.sidx-national-status-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 5px 10px;
  border-radius: var(--sidx-national-radius-pill);
  white-space: nowrap;
  letter-spacing: 0.02em;
  background: var(--sidx-national-primary);
  color: #ffffff;
}

.sidx-national-status-badge.sidx-national-status-pending { background: var(--sidx-national-navy); }
.sidx-national-status-badge.sidx-national-status-sold,
.sidx-national-status-badge.sidx-national-status-closed { background: #757575; }
.sidx-national-status-badge.sidx-national-status-active-under-contract { background: var(--sidx-national-navy); }
.sidx-national-status-badge.sidx-national-status-coming-soon { background: var(--sidx-national-primary); }

.sidx-national-favorite {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.92);
  color: var(--sidx-national-text);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform var(--sidx-national-transition);
}

.sidx-national-favorite:hover { transform: scale(1.08); }
.sidx-national-favorite.is-active { color: var(--sidx-national-primary); }
.sidx-national-favorite:focus-visible { outline: 2px solid var(--sidx-national-navy); outline-offset: 2px; }

.sidx-national-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidx-national-price {
  font-size: 21px;
  font-weight: 700;
  color: var(--sidx-national-primary);
  line-height: 1.1;
}

.sidx-national-address {
  font-size: 14px;
  font-weight: 500;
  color: var(--sidx-national-text);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidx-national-meta {
  font-size: 13px;
  color: var(--sidx-national-text-muted);
}

/* ─── IDX Data-Source Citation ───────────────────────────────────────────── */

.sidx-national-citation {
  font-size: 11px;
  color: var(--sidx-national-text-faint);
  font-style: italic;
  padding-top: 2px;
  border-top: 1px solid var(--sidx-national-border);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ─── Empty / Error States ───────────────────────────────────────────────── */

.sidx-national-empty,
.sidx-national-error {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 24px;
  color: var(--sidx-national-text-muted);
  font-size: 15px;
  border-radius: var(--sidx-national-radius-md);
  background: var(--sidx-national-bg);
}

.sidx-national-empty p:first-child,
.sidx-national-error p:first-child {
  font-size: 17px;
  font-weight: 600;
  margin-bottom: 6px;
}

.sidx-national-empty p:first-child { color: var(--sidx-national-text); }

.sidx-national-error {
  background: #fdeceb;
}
.sidx-national-error p:first-child { color: var(--sidx-national-primary-dark); }

.sidx-national-empty .sidx-national-filter-clear,
.sidx-national-error .sidx-national-filter-clear {
  margin-top: 12px;
}

/* ─── Pagination ─────────────────────────────────────────────────────────── */

.sidx-national-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 28px;
}

.sidx-national-page-btn {
  padding: 10px 22px;
  background: transparent;
  color: var(--sidx-national-navy);
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  border: 2px solid var(--sidx-national-navy);
  border-radius: var(--sidx-national-radius-sm);
  cursor: pointer;
  transition: background var(--sidx-national-transition), color var(--sidx-national-transition);
}

.sidx-national-page-btn:hover:not(:disabled) { background: var(--sidx-national-navy); color: #ffffff; }
.sidx-national-page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.sidx-national-page-indicator {
  font-size: 14px;
  font-weight: 600;
  color: var(--sidx-national-text-muted);
}

/* ─── Skeleton Loading Cards ─────────────────────────────────────────────── */

.sidx-national-skeleton {
  background: var(--sidx-national-card-bg);
  border-radius: var(--sidx-national-radius-md);
  box-shadow: var(--sidx-national-shadow-sm);
  overflow: hidden;
}

.sidx-national-skeleton-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: sidx-national-shimmer 1.4s ease-in-out infinite;
}

.sidx-national-skeleton-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidx-national-skeleton-line {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 50%, #eee 75%);
  background-size: 200% 100%;
  animation: sidx-national-shimmer 1.4s ease-in-out infinite;
}

.sidx-national-skeleton-line.wide  { width: 80%; }
.sidx-national-skeleton-line.mid   { width: 55%; }
.sidx-national-skeleton-line.short { width: 35%; }
.sidx-national-skeleton-line.price { height: 22px; width: 50%; }

@keyframes sidx-national-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ─── Map Price Pins (Leaflet divIcon content) ───────────────────────────── */

.sidx-national-pin-wrap { background: transparent; border: none; }

.sidx-national-pin {
  display: inline-block;
  padding: 5px 10px;
  background: var(--sidx-national-primary);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  border-radius: var(--sidx-national-radius-pill);
  box-shadow: var(--sidx-national-shadow-sm);
  white-space: nowrap;
  transform: translate(-50%, -100%);
  cursor: pointer;
}

.sidx-national-pin.is-active {
  background: var(--sidx-national-navy);
  transform: translate(-50%, -100%) scale(1.08);
}

/* Cluster bubble (Leaflet.markercluster) — same pill language, navy instead
   of red so a "24 listings" cluster reads distinctly from an individual
   price pin at a glance, and larger since it represents many listings. */
.sidx-national-pin-cluster {
  min-width: 32px;
  padding: 8px 12px;
  background: var(--sidx-national-navy);
  border: 2px solid #ffffff;
  font-size: 13px;
  text-align: center;
}

/* ─── Homepage Omni Search ───────────────────────────────────────────────── */

.sidx-national-omni { max-width: 640px; margin: 0 auto; }

.sidx-national-omni-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.sidx-national-omni-form input[type="text"] {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--sidx-national-border);
  border-radius: var(--sidx-national-radius-pill);
  font-size: 16px;
  font-family: inherit;
  color: var(--sidx-national-text);
  background: var(--sidx-national-card-bg);
  outline: none;
  transition: border-color var(--sidx-national-transition), box-shadow var(--sidx-national-transition);
}

.sidx-national-omni-form input[type="text"]:focus-visible {
  border-color: var(--sidx-national-primary);
  box-shadow: 0 0 0 3px rgba(227, 30, 36, 0.15);
}

.sidx-national-omni-form input[aria-invalid="true"] {
  border-color: var(--sidx-national-primary);
}

.sidx-national-omni-form .sidx-national-btn { border-radius: var(--sidx-national-radius-pill); }

.sidx-national-omni-error {
  font-size: 13px;
  color: var(--sidx-national-primary-dark);
  min-height: 16px;
}

@media (min-width: 600px) {
  .sidx-national-omni-form { flex-direction: row; }
  .sidx-national-omni-form input[type="text"] { flex: 1 1 auto; }
}

/* ─── Reduced Motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .sidx-national-card,
  .sidx-national-btn,
  .sidx-national-page-btn,
  .sidx-national-favorite {
    transition: none;
  }

  .sidx-national-status.is-loading::after,
  .sidx-national-skeleton-img,
  .sidx-national-skeleton-line {
    animation: none;
  }
}