/* colors.css imported globally via style.css */

/* ==========================================================================
   _results.css – IDX search results (cards, labels, fields)
   ========================================================================== */

/* ==========================================================================
   Table of Contents
   ========================================================================== */
/**
 * 1.0 Search Results Container
 * 2.0 Result Card Styling
 * 3.0 Field Labels
 * 4.0 Dark Mode Overrides
 * 5.0 IDX Results Cells (hover/active ring)
 */

/* ==========================================================================
   1.0 Search Results Container
   ========================================================================== */

.idx-results {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  /* 2em ≈ 32px */
}

/* Uniform padding around IDX results zone */
.IDX-wrapper-standard .idx-results-wrapper {
  padding: clamp(20px, 3vw, 28px);
}

/* Intro + trust strip injected above results */
.IDX-wrapper-standard .kaplon-idx-intro {
  max-width: 1000px;
  margin: 2em auto;
  padding: 3em 1em;
  background: var(--surface-1);
  border-radius: 8px;
  box-shadow: var(--shadow-light);
  text-align: center;
}

.IDX-wrapper-standard .kaplon-idx-breadcrumbs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 12px;
  color: var(--gray-700);
  font-size: 0.9rem;
  gap: 6px;
}

.IDX-wrapper-standard .kaplon-idx-breadcrumbs__divider {
  opacity: 0.7;
}

.IDX-wrapper-standard .kaplon-idx-intro__title {
  margin-bottom: 1em;
  color: var(--kaplon-blue);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 2em;
  font-weight: bold;
}

.IDX-wrapper-standard .kaplon-idx-intro__lead {
  max-width: 800px;
  margin: 0 auto;
  color: var(--gray-700);
  font-family: Helvetica, Arial, sans-serif;
  font-size: 1.1em;
}

.IDX-wrapper-standard .kaplon-idx-intro__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 0 0;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--gray-border);
  color: var(--gray-600);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  gap: 8px;
}

.IDX-wrapper-standard .kaplon-idx-intro__trust span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.IDX-wrapper-standard .kaplon-idx-intro__trust span::before {
  color: var(--kaplon-red);
  content: "•";
}

.IDX-wrapper-standard .kaplon-idx-intro__trust span:first-child::before {
  content: none;
}

/* Minimal base for vendor panels in results (light mode) */
.IDX-wrapper-standard :where(.IDX-panel, .IDX-panel-default) {
  background-color: var(--surface-1);
  border: 1px solid var(--gray-border);
  color: var(--text-primary);
}

/* ==========================================================================
   2.0 Result Card Styling
   ========================================================================== */

.idx-results .idx-card {
  /* 1em */
  width: 100%;
  padding: var(--space-3);
  background: var(--white);
  border: 1px solid var(--gray-light);
  border-radius: var(--radius-2, 8px);
  box-shadow: var(--shadow-light);
}

/* IDX result card interactions (token-driven) */
.IDX-wrapper-standard .IDX-results .IDX-result-card:focus {
  border-color: var(--idx-border-strong, var(--gray-border));
}

.IDX-wrapper-standard .IDX-results .IDX-result-card:hover {
  box-shadow: 0 0 0 2px var(--idx-accent, var(--kaplon-red));
}

/* IDX card cleanup (maps to legacy .idx-listing markup) */
.IDX-wrapper-standard :where(.idx-listing, .IDX-results--cell .IDX-results--cell-inner-wrapper) {
  padding: 0 !important;
  overflow: hidden;
  background: var(--surface-1);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-2, 8px);
  box-shadow: var(--shadow-light);
}

.IDX-wrapper-standard .idx-listing img,
.IDX-wrapper-standard .IDX-results--cell .IDX-resultsPhotoImg {
  border-radius: 0;
}

.IDX-wrapper-standard .idx-listing,
.IDX-wrapper-standard .IDX-results--cell .IDX-results--cell-inner-wrapper {
  transition: box-shadow 0.12s ease, transform 0.12s ease;
}

.IDX-wrapper-standard .idx-listing:hover,
.IDX-wrapper-standard .IDX-results--cell:hover .IDX-results--cell-inner-wrapper {
  box-shadow: var(--shadow-card-xl);
  transform: translateY(-3px);
}

.IDX-wrapper-standard :where(.idx-listing .idx-price, .idx-listing .idx-address, .IDX-results--cell .IDX-resultsPrice, .IDX-results--cell .IDX-resultsAddress) {
  margin-bottom: 4px;
  font-weight: 600;
}

.IDX-wrapper-standard :where(.idx-listing .idx-price, .IDX-results--cell .IDX-resultsPrice) {
  color: var(--kaplon-red);
  font-size: 1.08rem;
  font-weight: 700;
}

.IDX-wrapper-standard :where(.idx-listing .idx-address, .IDX-results--cell .IDX-resultsAddress, .IDX-resultsAddressLink) {
  display: block;
  max-width: 100%;
  padding: 6px 10px;
  overflow: hidden;
  background-color: var(--kaplon-blue-dark, var(--kaplon-blue));
  border-bottom: 2px solid var(--color-accent-primary);
  color: var(--white);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

/* Featured/result addresses are rendered as nested spans inside a link. Keep
   the full address line readable on the dark title bar in light mode. */
.IDX-wrapper-standard .IDX-resultsAddress,
.IDX-wrapper-standard .IDX-resultsAddress a,
.IDX-wrapper-standard .IDX-resultsAddress a span,
.IDX-wrapper-standard a.IDX-resultsAddressLink {
  color: var(--white);
}

.IDX-wrapper-standard .IDX-resultsAddress a:hover,
.IDX-wrapper-standard .IDX-resultsAddress a:focus,
.IDX-wrapper-standard a.IDX-resultsAddressLink:hover,
.IDX-wrapper-standard a.IDX-resultsAddressLink:focus {
  color: var(--white);
}

/* IDX renders addresses as many token spans. Keep tokens inline and add
   explicit separators so upstream styles cannot collapse visual spacing. */
.IDX-wrapper-standard .IDX-resultsAddressLink :where(.IDX-resultsAddressNumber,
  .IDX-resultsAddressDirection,
  .IDX-resultsAddressName,
  .IDX-resultsEndAddressCommaOne,
  .IDX-resultsEndAddressCommaTwo,
  .IDX-resultsAddressCity,
  .IDX-resultsAddressState,
  .IDX-resultsAddressStateAbrv,
  .IDX-resultsAddressZip,
  .IDX-addressZip4) {
  display: inline !important;
  float: none !important;
  white-space: normal;
}

.IDX-wrapper-standard .IDX-resultsAddressLink :where(.IDX-resultsAddressNumber,
  .IDX-resultsAddressDirection) {
  margin-right: 0.25ch;
}

.IDX-wrapper-standard .IDX-resultsAddressLink :where(.IDX-resultsEndAddressCommaOne,
  .IDX-resultsEndAddressCommaTwo,
  .IDX-resultsAddressStateAbrv,
  .IDX-resultsAddressZip) {
  margin-right: 0.25ch;
}

.IDX-wrapper-standard .IDX-resultsAddressLink .IDX-resultsAddressStateAbrv {
  margin-left: 0.25ch;
}

.IDX-wrapper-standard .IDX-resultsAddressLink .IDX-resultsAddressState:not(:empty)+.IDX-resultsAddressStateAbrv::before {
  white-space: pre;
  content: "\00a0";
}

/* Guard tokenized label/value pairs (e.g., Listing ID + value) from collapsing. */
.IDX-wrapper-standard .IDX-resultsMainInfo .IDX-label+.IDX-resultsText::before,
.IDX-wrapper-standard .IDX-resultsMainInfo .IDX-label+.IDX-text::before {
  white-space: pre;
  content: "\00a0";
}

/* (merged accent styles into the primary selector above to avoid duplicates) */

.IDX-wrapper-standard :where(.idx-listing .idx-meta, .IDX-results--cell .IDX-resultsDetails, .idx-meta) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  color: var(--gray-600);
  font-size: 0.85rem;
  gap: 10px;
}

.IDX-wrapper-standard .idx-listing {
  margin-bottom: 24px;
}

.IDX-wrapper-standard :where(.idx-listing .idx-meta span, .IDX-results--cell .IDX-resultsDetails span) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.IDX-wrapper-standard :where(.idx-listing .idx-meta span::before, .IDX-results--cell .IDX-resultsDetails span::before) {
  display: inline-block;
  width: 6px;
  height: 6px;
  background: var(--gray-border);
  border-radius: 50%;
  content: "";
}

.IDX-wrapper-standard :where(.idx-listing .idx-meta span:first-child::before, .IDX-results--cell .IDX-resultsDetails span:first-child::before) {
  content: none;
}

/* Slightly lift inner data panel contrast in dark mode */

.IDX-wrapper-standard .idx-pagination select,
.IDX-wrapper-standard .idx-pagination input[type="text"],
.IDX-wrapper-standard .kaplon-idx-pagination select,
.IDX-wrapper-standard .kaplon-idx-pagination input[type="text"] {
  display: none !important;
}

.IDX-wrapper-standard .kaplon-idx-pagination select,
.IDX-wrapper-standard .kaplon-idx-pagination input[type="text"] {
  display: none !important;
}

.IDX-wrapper-standard .kaplon-idx-pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 16px 0 24px;
  padding: 10px 0;
  border-top: 1px solid var(--gray-border);
  border-bottom: 1px solid var(--gray-border);
  color: var(--gray-700);
  font-size: 0.94rem;
  font-weight: 600;
  gap: 0.875rem;
}

.IDX-wrapper-standard .kaplon-idx-pagination a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease, background-color 0.2s ease;
  gap: 6px;
}

.IDX-wrapper-standard .kaplon-idx-pagination a:hover,
.IDX-wrapper-standard .kaplon-idx-pagination a:focus-visible {
  background-color: var(--surface-soft);
  color: var(--kaplon-blue);
}

.IDX-wrapper-standard .kaplon-idx-pagination__summary {
  padding: 0 16px;
  border-right: 1px solid var(--gray-border);
  border-left: 1px solid var(--gray-border);
  color: var(--gray-600);
}

/* ==========================================================================
   1.1 Spacing Corrections (theme + IDX stack)
   ========================================================================== */

body.page,
body.page-template,
body .idx-wrapper,
.IDX-wrapper-standard .idx-container,
.IDX-wrapper-standard #idxStartOverLinks,
.IDX-wrapper-standard #IDX-main,
.IDX-wrapper-standard .entry-content,
.IDX-wrapper-standard #content {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.IDX-wrapper-standard :where(.idx-page-intro, .idx-custom-header, .idx-content) {
  margin-top: 20px !important;
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

@media (max-width: 768px) {
  .IDX-wrapper-standard :where(.idx-page-intro, .idx-custom-header) {
    margin-top: 10px !important;
    padding-top: 24px !important;
    padding-bottom: 30px !important;
  }
}

.IDX-wrapper-standard :where(.entry-content>div:first-child) {
  padding-top: 32px !important;
  padding-bottom: 32px !important;
}

/* ==========================================================================
   3.0 Field Labels
   ========================================================================== */

.idx-card .idx-label {
  color: var(--blue-bright);
  font-weight: bold;
}

/* Add more results styles as needed */

/* ==========================================================================
   4.0 Dark Mode Overrides
   ========================================================================== */

/* ==========================================================================
   6.0 MLS Disclaimer Refinement
   ========================================================================== */

.IDX-wrapper-standard :where(#IDX-footer, .idx-disclaimer) {
  max-width: min(900px, 100%);
  margin: 30px auto 60px;
  padding: 14px 18px;
  opacity: 0.75;
  background: var(--gray-bg);
  border-radius: var(--radius-2, 8px);
  color: var(--gray-600);
  font-size: 0.8125rem;
  line-height: 1.4;
  text-align: center;
}

/* =======================================================================
   Kaplon Realty Deal Badges (IDX results)
   Scope: Only within IDX wrappers; JS sets [data-kaplon] on our deals
   Rollback: remove this entire block
   ======================================================================= */

.IDX-wrapper-standard [data-kaplon] .ks-kaplon-badge {
  position: absolute;
  top: var(--space-1);
  left: var(--space-1);
  z-index: 2;
  padding: calc(var(--space-1) / 2) var(--space-1);
  background: var(--kaplon-red);
  /* 4px 8px */
  border-radius: var(--radius-1, 6px);
  box-shadow: var(--shadow-sm);
  /* Kaplon Red */
  color: var(--white);
  font:
    600 12px/1.2 Montserrat,
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Arial,
    sans-serif;
  pointer-events: none;
}

.IDX-wrapper-standard [data-kaplon="pending"] .ks-kaplon-badge {
  background: var(--kaplon-blue);
  /* Kaplon Blue */
}

/* Ensure photo container anchors the badge */
.IDX-wrapper-standard .IDX-resultsPhoto {
  position: relative;
}

/* Keyboard focus: make badge visibly outlined when card is focused */
.IDX-wrapper-standard :where([data-kaplon]) :where(.IDX-resultsPhotoLink):focus-visible+.ks-kaplon-badge,
.IDX-wrapper-standard :where([data-kaplon]) :where(.ks-kaplon-badge):focus-visible {
  box-shadow: var(--shadow-focus-dark);
  outline: 2px solid var(--white);
}

/* Dark mode polish */

/* ==========================================================================
   7.0 Supplemental Dark Mode (Similar Listings + Courtesy Overlay)
   --------------------------------------------------------------------------
   Moved from deprecated idxbroker/idx-custom-dark-mode-overlays.css.
   Hosted IDX now relies on core partial delivery; keep token usage here.
   ========================================================================== */

/* Courtesy text should flow beneath card details instead of overlaying content */
.listing-card__courtesy {
  position: static !important;
  display: block !important;
  margin-top: var(--space-2, 8px) !important;
  color: var(--idx-mid-text, var(--gray-600)) !important;
  font-size: 0.75rem !important;
  text-shadow: none !important;
  pointer-events: auto !important;
}

/* Mobile polish: IDX cards + badges */
@media (max-width: 480px) {

  /* Ensure photos scale cleanly */
  .IDX-wrapper-standard .IDX-resultsPhotoImg {
    display: block;
    width: 100%;
    height: auto;
  }

  /* Keep badge readable but compact */
  .IDX-wrapper-standard [data-kaplon] .ks-kaplon-badge {
    top: calc(var(--space-1) - 2px);
    left: calc(var(--space-1) - 2px);
    padding: calc(var(--space-1) / 2 - 1px) calc(var(--space-1) - 2px);
    font-size: 11px;
    /* leave precise size */
  }

  /* Long addresses should wrap, not overflow */
  .IDX-wrapper-standard .IDX-resultsAddressLink {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Make action buttons easy to tap */
  .IDX-wrapper-standard .IDX-resultsCellAction {
    display: inline-block;
    min-height: 44px;
    padding: 0 calc(var(--space-3) - 2px);
    line-height: 44px;
  }
}

/* Super-small screens (≤360px): avoid overlaps */
@media (max-width: 360px) {
  .IDX-wrapper-standard [data-kaplon] .ks-kaplon-badge {
    top: calc(var(--space-1) / 2);
    left: calc(var(--space-1) / 2);
  }
}

/* ==========================================================================
   5.0 IDX Results Cells (hover/active ring)
   --------------------------------------------------------------------------
   Goal: Provide a subtle default border and a brand-red ring on hover/active.
   Uses vendor structure: .IDX-results--cell > .IDX-results--cell-inner-wrapper
   ========================================================================== */

/* Base: subtle border and background */
.IDX-wrapper-standard .IDX-results--cell .IDX-results--cell-inner-wrapper {
  position: relative;
  /* anchor pseudo ring */
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-2, 8px);
  transition: border-color var(--anim-duration-fast, 120ms) ease;
}

/* Red ring via pseudo-element; shown on hover/active/focus */
.IDX-wrapper-standard .IDX-results--cell :where(.IDX-results--cell-inner-wrapper)::after {
  position: absolute;
  border: 2px solid transparent;
  border-radius: inherit;
  pointer-events: none;
  content: "";
  transition: border-color var(--anim-duration-fast, 120ms) ease;
  inset: 0;
}

/* Trigger ring on hover, active class, hover class, or keyboard focus */
.IDX-wrapper-standard :where(.IDX-results--cell):hover :where(.IDX-results--cell-inner-wrapper)::after,
.IDX-wrapper-standard :where(.IDX-results--cell) :where(.IDX-results--cell-inner-wrapper).IDX-results--cell-hover::after,
.IDX-wrapper-standard :where(.IDX-results--cell) :where(.IDX-results--cell-inner-wrapper).IDX-results--cell-active::after,
.IDX-wrapper-standard :where(.IDX-results--cell) :where(.IDX-results--cell-inner-wrapper):focus-within::after {
  border-color: var(--kaplon-red);
}

/* Neutralize vendor red border on hover/active to avoid double ring */
.IDX-wrapper-standard :where(.IDX-results--cell) :where(.IDX-results--cell-inner-wrapper).IDX-results--cell-hover,
.IDX-wrapper-standard :where(.IDX-results--cell) :where(.IDX-results--cell-inner-wrapper).IDX-results--cell-active {
  border-color: transparent;
}

/* Dark mode: darker base with subtle border; ring remains brand-red */

/* ==========================================================================
   Utility Classes for IDX Wrappers
   ========================================================================== */

.IDX-wrapper-standard .idx-center-text {
  text-align: center;
}

.IDX-wrapper-standard .idx-hidden-data {
  display: none !important;
}

@media (prefers-color-scheme: dark) {
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-results--cell :where(.IDX-resultsDetails, .IDX-resultsMainData, .IDX-results--cell-inner) {
    background-color: var(--panel-dark) !important;
    border: 1px solid var(--dark-border) !important;
  }

  html[data-kaplon-color-mode=system] .idx-results .idx-card {
    background-color: var(--dark-surface);
    border-color: var(--gray-700);
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .idx-card .idx-label {
    color: var(--blue-light);
  }

  /* Listing meta: increase to secondary token for readability */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.idx-listing .idx-meta, .IDX-results--cell .IDX-resultsDetails, .idx-meta) {
    color: var(--text-secondary-dark);
  }

  /* Ensure IDX info boxes in results stay visible */
  html[data-kaplon-color-mode=system] .IDX-resultsPropertyInfo,html[data-kaplon-color-mode=system] 
  .idx-listing-info,html[data-kaplon-color-mode=system] 
  .IDX-resultsAddress,html[data-kaplon-color-mode=system] 
  .IDX-resultsDetails {
    background-color: var(--dark-surface) !important;
    border-color: var(--gray-700) !important;
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .IDX-resultsPropertyInfo a,html[data-kaplon-color-mode=system] 
  .IDX-resultsPropertyInfo span {
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard [data-kaplon] .ks-kaplon-badge {
    box-shadow: var(--shadow-dark-sm);
  }

  /* Keep similar listings containers transparent to avoid heavy stacking */
  html[data-kaplon-color-mode=system] .idx-similar-listings,html[data-kaplon-color-mode=system] 
  .idx-similar-listings__header,html[data-kaplon-color-mode=system] 
  .idx-similar-listings--list,html[data-kaplon-color-mode=system] 
  .idx-similar-listings--list .idx-property-card,html[data-kaplon-color-mode=system] 
  .idx-similar-listings--list .idx-property-card__details {
    background-color: transparent !important;
  }

  /* Color/visual changes only in dark mode; layout defaults are applied globally below */
  html[data-kaplon-color-mode=system] .idx-similar-listings--list .idx-property-card__details {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  html[data-kaplon-color-mode=system] .idx-similar-listings--list .idx-property-card__image {
    mix-blend-mode: normal !important;
  }

  html[data-kaplon-color-mode=system] .listing-card__courtesy {
    color: var(--idx-light-text, var(--neutral-light)) !important;
  }

  /* Results card text: brighten price/address/meta without changing markup */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-results--cell :where(.IDX-results--cell-inner-wrapper) {
    background: var(--dark-surface);
    border-color: var(--border-subtle-dark);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-resultsPrice,
    .IDX-resultsPrice *,
    .IDX-resultsAddress,
    .IDX-resultsAddress *,
    .IDX-resultsAddressLink,
    .IDX-resultsAddressLink *) {
    color: var(--idx-light-text, var(--neutral-100)) !important;
    text-shadow: var(--shadow-dark-sm);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-resultsDetails,
    .IDX-resultsDetails *,
    .IDX-resultsBasicData,
    .IDX-resultsBasicData *,
    .IDX-resultsMeta,
    .IDX-resultsMeta *,
    .idx-meta,
    .idx-meta *) {
    color: var(--idx-mid-text, var, --neutral-300) !important;
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-resultsDetails span::before,
    .IDX-resultsMeta span::before,
    .idx-meta span::before) {
    background: var(--dark-border-mid) !important;
  }

  /* Listing card core stats (beds/baths/sqft/acres) inherit dark fallback #222 without override */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.listing-card__core-fields,
    .listing-card__core-fields *,
    .listing-card__details,
    .listing-card__details *,
    .listing-card__single-item,
    .listing-card__single-item *,
    .listing-card__additional-info,
    .listing-card__additional-info *,
    .listing-card__meta,
    .listing-card__meta *,
    .listing-card__address,
    .listing-card__address *) {
    color: var(--idx-mid-text, var, --neutral-200) !important;
  }

  /* IDX panel and panel-default styling for dark mode */
  html[data-kaplon-color-mode=system] .IDX-panel,html[data-kaplon-color-mode=system] 
  .IDX-panel-default {
    background-color: var(--gray-900) !important;
    border-color: var(--gray-700) !important;
    color: var(--white-85) !important;
  }

  /* Strong override for vendor MobileFirst rule
     Source to beat: .IDX-wrapper-standard .IDX-panel { background-color: #fff; }
     We mirror the parent class in our selector and use tokens + !important. */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-panel,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .IDX-panel-default {
    background-color: var(--dark-surface-alt) !important;
    border-color: var(--dark-border-soft, var(--dark-border)) !important;
    box-shadow: var(--shadow-dark-sm) !important;
    color: var(--dark-text-soft, var(--text-primary-dark)) !important;
  }

  /* Ensure text inside panels inherits readable color */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-panel *, .IDX-panel-default *) {
    color: inherit !important;
  }

  /* RESULTS MAIN INFO PANEL (hosted + embedded) ---------------------------
     Some IDX templates place IDX-resultsMainInfo and IDX-panel classes on
     the SAME element (no intermediate wrapper). Previous attempts only
     styled nested panels, leaving combined class nodes white.
     We cover 3 cases:
       1. Combined classes on same element (.IDX-resultsMainInfo.IDX-panel...)
       2. Combined with -default variant (.IDX-resultsMainInfo.IDX-panel-default)
       3. Panel nested inside a container (.IDX-resultsMainInfo .IDX-panel)
     All forced to dark tokens with readable text.
  ----------------------------------------------------------------------- */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-resultsMainInfo.IDX-panel,
    .IDX-resultsMainInfo.IDX-panel-default,
    .IDX-resultsMainInfo .IDX-panel,
    .IDX-resultsMainInfo .IDX-panel-default) {
    background-color: var(--dark-surface) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: var(--shadow-dark-sm) !important;
    color: var(--text-primary-dark) !important;
  }

  /* Inherit readable text for descendants */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-resultsMainInfo.IDX-panel *,
    .IDX-resultsMainInfo.IDX-panel-default *,
    .IDX-resultsMainInfo .IDX-panel *,
    .IDX-resultsMainInfo .IDX-panel-default *) {
    color: inherit !important;
  }

  /* Price field emphasis inside dark panel (avoid vendor rgba white overlay) */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-resultsMainInfo) :where(.IDX-field-listingPrice, .IDX-field-price, .IDX-field-listingprice) :where(.IDX-text) {
    color: var(--kaplon-red) !important;
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-resultsMainInfo) :where(.IDX-field-listingPrice, .IDX-field-price, .IDX-field-listingprice) :where(.IDX-label) {
    color: var(--text-secondary-dark) !important;
  }

  /* Ensure text inside IDX panels is readable */
  html[data-kaplon-color-mode=system] .IDX-panel *,html[data-kaplon-color-mode=system] 
  .IDX-panel-default * {
    color: var(--white-85) !important;
  }

  /* Keep headings white for better contrast */
  html[data-kaplon-color-mode=system] .IDX-panel h1,html[data-kaplon-color-mode=system] 
  .IDX-panel h2,html[data-kaplon-color-mode=system] 
  .IDX-panel h3,html[data-kaplon-color-mode=system] 
  .IDX-panel h4,html[data-kaplon-color-mode=system] 
  .IDX-panel-default h1,html[data-kaplon-color-mode=system] 
  .IDX-panel-default h2,html[data-kaplon-color-mode=system] 
  .IDX-panel-default h3,html[data-kaplon-color-mode=system] 
  .IDX-panel-default h4 {
    color: var(--white) !important;
  }

  /* Style links to be visible on dark background */
  html[data-kaplon-color-mode=system] .IDX-panel a,html[data-kaplon-color-mode=system] 
  .IDX-panel-default a {
    color: var(--kaplon-blue-light) !important;
  }

  html[data-kaplon-color-mode=system] .IDX-panel a:hover,html[data-kaplon-color-mode=system] 
  .IDX-panel-default a:hover {
    color: var(--kaplon-blue) !important;
  }
}

/* Listing meta: increase to secondary token for readability */

/* Ensure IDX info boxes in results stay visible */

/* Keep similar listings containers transparent to avoid heavy stacking */

/* Color/visual changes only in dark mode; layout defaults are applied globally below */

/* Results card text: brighten price/address/meta without changing markup */

/* Listing card core stats (beds/baths/sqft/acres) inherit dark fallback #222 without override */

/* IDX panel and panel-default styling for dark mode */

/* Strong override for vendor MobileFirst rule
     Source to beat: .IDX-wrapper-standard .IDX-panel { background-color: #fff; }
     We mirror the parent class in our selector and use tokens + !important. */

/* Ensure text inside panels inherits readable color */

/* RESULTS MAIN INFO PANEL (hosted + embedded) ---------------------------
     Some IDX templates place IDX-resultsMainInfo and IDX-panel classes on
     the SAME element (no intermediate wrapper). Previous attempts only
     styled nested panels, leaving combined class nodes white.
     We cover 3 cases:
       1. Combined classes on same element (.IDX-resultsMainInfo.IDX-panel...)
       2. Combined with -default variant (.IDX-resultsMainInfo.IDX-panel-default)
       3. Panel nested inside a container (.IDX-resultsMainInfo .IDX-panel)
     All forced to dark tokens with readable text.
  ----------------------------------------------------------------------- */

/* Inherit readable text for descendants */

/* Price field emphasis inside dark panel (avoid vendor rgba white overlay) */

/* Ensure text inside IDX panels is readable */

/* Keep headings white for better contrast */

/* Style links to be visible on dark background */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-results--cell :where(.IDX-resultsDetails, .IDX-resultsMainData, .IDX-results--cell-inner) {
    background-color: var(--panel-dark) !important;
    border: 1px solid var(--dark-border) !important;
  }

html[data-kaplon-color-mode=dark] .idx-results .idx-card {
    background-color: var(--dark-surface);
    border-color: var(--gray-700);
    color: var(--white);
  }

html[data-kaplon-color-mode=dark] .idx-card .idx-label {
    color: var(--blue-light);
  }

/* Listing meta: increase to secondary token for readability */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.idx-listing .idx-meta, .IDX-results--cell .IDX-resultsDetails, .idx-meta) {
    color: var(--text-secondary-dark);
  }

/* Ensure IDX info boxes in results stay visible */

html[data-kaplon-color-mode=dark] .IDX-resultsPropertyInfo,html[data-kaplon-color-mode=dark] 
  .idx-listing-info,html[data-kaplon-color-mode=dark] 
  .IDX-resultsAddress,html[data-kaplon-color-mode=dark] 
  .IDX-resultsDetails {
    background-color: var(--dark-surface) !important;
    border-color: var(--gray-700) !important;
    color: var(--white) !important;
  }

html[data-kaplon-color-mode=dark] .IDX-resultsPropertyInfo a,html[data-kaplon-color-mode=dark] 
  .IDX-resultsPropertyInfo span {
    color: var(--white) !important;
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard [data-kaplon] .ks-kaplon-badge {
    box-shadow: var(--shadow-dark-sm);
  }

/* Keep similar listings containers transparent to avoid heavy stacking */

html[data-kaplon-color-mode=dark] .idx-similar-listings,html[data-kaplon-color-mode=dark] 
  .idx-similar-listings__header,html[data-kaplon-color-mode=dark] 
  .idx-similar-listings--list,html[data-kaplon-color-mode=dark] 
  .idx-similar-listings--list .idx-property-card,html[data-kaplon-color-mode=dark] 
  .idx-similar-listings--list .idx-property-card__details {
    background-color: transparent !important;
  }

/* Color/visual changes only in dark mode; layout defaults are applied globally below */

html[data-kaplon-color-mode=dark] .idx-similar-listings--list .idx-property-card__details {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

html[data-kaplon-color-mode=dark] .idx-similar-listings--list .idx-property-card__image {
    mix-blend-mode: normal !important;
  }

html[data-kaplon-color-mode=dark] .listing-card__courtesy {
    color: var(--idx-light-text, var(--neutral-light)) !important;
  }

/* Results card text: brighten price/address/meta without changing markup */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-results--cell :where(.IDX-results--cell-inner-wrapper) {
    background: var(--dark-surface);
    border-color: var(--border-subtle-dark);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-resultsPrice,
    .IDX-resultsPrice *,
    .IDX-resultsAddress,
    .IDX-resultsAddress *,
    .IDX-resultsAddressLink,
    .IDX-resultsAddressLink *) {
    color: var(--idx-light-text, var(--neutral-100)) !important;
    text-shadow: var(--shadow-dark-sm);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-resultsDetails,
    .IDX-resultsDetails *,
    .IDX-resultsBasicData,
    .IDX-resultsBasicData *,
    .IDX-resultsMeta,
    .IDX-resultsMeta *,
    .idx-meta,
    .idx-meta *) {
    color: var(--idx-mid-text, var, --neutral-300) !important;
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-resultsDetails span::before,
    .IDX-resultsMeta span::before,
    .idx-meta span::before) {
    background: var(--dark-border-mid) !important;
  }

/* Listing card core stats (beds/baths/sqft/acres) inherit dark fallback #222 without override */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.listing-card__core-fields,
    .listing-card__core-fields *,
    .listing-card__details,
    .listing-card__details *,
    .listing-card__single-item,
    .listing-card__single-item *,
    .listing-card__additional-info,
    .listing-card__additional-info *,
    .listing-card__meta,
    .listing-card__meta *,
    .listing-card__address,
    .listing-card__address *) {
    color: var(--idx-mid-text, var, --neutral-200) !important;
  }

/* IDX panel and panel-default styling for dark mode */

html[data-kaplon-color-mode=dark] .IDX-panel,html[data-kaplon-color-mode=dark] 
  .IDX-panel-default {
    background-color: var(--gray-900) !important;
    border-color: var(--gray-700) !important;
    color: var(--white-85) !important;
  }

/* Strong override for vendor MobileFirst rule
     Source to beat: .IDX-wrapper-standard .IDX-panel { background-color: #fff; }
     We mirror the parent class in our selector and use tokens + !important. */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-panel,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .IDX-panel-default {
    background-color: var(--dark-surface-alt) !important;
    border-color: var(--dark-border-soft, var(--dark-border)) !important;
    box-shadow: var(--shadow-dark-sm) !important;
    color: var(--dark-text-soft, var(--text-primary-dark)) !important;
  }

/* Ensure text inside panels inherits readable color */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-panel *, .IDX-panel-default *) {
    color: inherit !important;
  }

/* RESULTS MAIN INFO PANEL (hosted + embedded) ---------------------------
     Some IDX templates place IDX-resultsMainInfo and IDX-panel classes on
     the SAME element (no intermediate wrapper). Previous attempts only
     styled nested panels, leaving combined class nodes white.
     We cover 3 cases:
       1. Combined classes on same element (.IDX-resultsMainInfo.IDX-panel...)
       2. Combined with -default variant (.IDX-resultsMainInfo.IDX-panel-default)
       3. Panel nested inside a container (.IDX-resultsMainInfo .IDX-panel)
     All forced to dark tokens with readable text.
  ----------------------------------------------------------------------- */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-resultsMainInfo.IDX-panel,
    .IDX-resultsMainInfo.IDX-panel-default,
    .IDX-resultsMainInfo .IDX-panel,
    .IDX-resultsMainInfo .IDX-panel-default) {
    background-color: var(--dark-surface) !important;
    border: 1px solid var(--dark-border) !important;
    box-shadow: var(--shadow-dark-sm) !important;
    color: var(--text-primary-dark) !important;
  }

/* Inherit readable text for descendants */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-resultsMainInfo.IDX-panel *,
    .IDX-resultsMainInfo.IDX-panel-default *,
    .IDX-resultsMainInfo .IDX-panel *,
    .IDX-resultsMainInfo .IDX-panel-default *) {
    color: inherit !important;
  }

/* Price field emphasis inside dark panel (avoid vendor rgba white overlay) */

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-resultsMainInfo) :where(.IDX-field-listingPrice, .IDX-field-price, .IDX-field-listingprice) :where(.IDX-text) {
    color: var(--kaplon-red) !important;
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-resultsMainInfo) :where(.IDX-field-listingPrice, .IDX-field-price, .IDX-field-listingprice) :where(.IDX-label) {
    color: var(--text-secondary-dark) !important;
  }

/* Ensure text inside IDX panels is readable */

html[data-kaplon-color-mode=dark] .IDX-panel *,html[data-kaplon-color-mode=dark] 
  .IDX-panel-default * {
    color: var(--white-85) !important;
  }

/* Keep headings white for better contrast */

html[data-kaplon-color-mode=dark] .IDX-panel h1,html[data-kaplon-color-mode=dark] 
  .IDX-panel h2,html[data-kaplon-color-mode=dark] 
  .IDX-panel h3,html[data-kaplon-color-mode=dark] 
  .IDX-panel h4,html[data-kaplon-color-mode=dark] 
  .IDX-panel-default h1,html[data-kaplon-color-mode=dark] 
  .IDX-panel-default h2,html[data-kaplon-color-mode=dark] 
  .IDX-panel-default h3,html[data-kaplon-color-mode=dark] 
  .IDX-panel-default h4 {
    color: var(--white) !important;
  }

/* Style links to be visible on dark background */

html[data-kaplon-color-mode=dark] .IDX-panel a,html[data-kaplon-color-mode=dark] 
  .IDX-panel-default a {
    color: var(--kaplon-blue-light) !important;
  }

html[data-kaplon-color-mode=dark] .IDX-panel a:hover,html[data-kaplon-color-mode=dark] 
  .IDX-panel-default a:hover {
    color: var(--kaplon-blue) !important;
  }

/* ==========================================================================
   Similar listings – layout defaults (mode-agnostic)
   Move layout/ordering/display rules here so dark-mode blocks remain colors-only
   ========================================================================== */

.idx-similar-listings--list .idx-property-card__wrap {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  background-color: var(--surface-1) !important;
  border: 1px solid var(--gray-border) !important;
}

.idx-similar-listings--list .idx-property-card__image--wrap {
  display: block !important;
  order: -1 !important;
}

.idx-similar-listings--list .idx-property-card__image--wrap img,
.idx-similar-listings--list .idx-property-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
}

.idx-similar-listings--list .idx-property-card__image--overlay {
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  mix-blend-mode: normal !important;
}