/* colors.css imported globally via style.css */
/* ==========================================================================
   Table of Contents
   ==========================================================================


   1.0 Pagination Container
   2.0 Pagination Links
       2.1 Default State
       2.2 Hover State
       2.3 Active State
   3.0 Previous/Next Arrows

   ========================================================================== */

/* ==========================================================================
   1.0 Pagination Container
   ========================================================================== */

.IDX-wrapper-standard :where(.idx-pagination) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin: 12px 0 16px;
  padding: 6px 0;
  color: var(--gray-700);
  font-size: 0.95rem;
  font-weight: 500;
  gap: 10px 12px;
}

/* Nudge spacing for classic uppercase .IDX-pagination without altering layout */
.IDX-wrapper-standard :where(.IDX-pagination) {
  margin: 12px 0 16px;
  padding: 6px 0;
}

.IDX-wrapper-standard .kaplon-idx-pagination__summary {
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-right: 1px solid var(--gray-border);
  border-left: 1px solid var(--gray-border);
  border-radius: 999px;
  color: inherit;
  gap: 6px;
}

.pagination {
  display: flex;
  justify-content: center;
  margin: calc(var(--space-2) + var(--space-1)) 0;
  padding: 0;
  /* 20px 0 */
  list-style: none;
}

/* ==========================================================================
   IDX Pagination – Core Styles (Prev/Next)
   These anchors often render with no inner text; we provide visible arrows.
   ========================================================================== */

/* Base look for IDX pagination anchors */
.IDX-pagination-action :where(a[role="button"]) {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: auto;
  min-height: 2.25rem;
  padding: 0.5rem 0.75rem;
  background-color: var(--white);
  border: 1px solid var(--kaplon-blue);
  border-radius: var(--radius-1, 6px);
  color: var(--kaplon-blue);
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
}

/* Enabled state (not disabled) */
.IDX-pagination-action :where(a[role="button"]):not(.IDX-disabled) {
  background-color: var(--button-red-bg);
  border-color: var(--button-red-border);
  color: var(--white);
}

.IDX-pagination-action :where(a[role="button"]):not(.IDX-disabled):hover {
  filter: brightness(0.95);
}

/* Force visible arrow glyphs; override any upstream ::before content rules */
#IDX-pagination-header-prev::before,
#IDX-pagination-footer-prev::before,
.IDX-pagination-action #IDX-pagination-header-prev::before,
.IDX-pagination-action #IDX-pagination-footer-prev::before {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: currentcolor;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  content: "◀ Previous" !important;
}

#IDX-pagination-header-next::before,
#IDX-pagination-footer-next::before,
.IDX-pagination-action #IDX-pagination-header-next::before,
.IDX-pagination-action #IDX-pagination-footer-next::before {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: currentcolor;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  vertical-align: middle;
  content: "Next ▶" !important;
}

/* If IDX ever includes text, keep it but ensure spacing works */
.IDX-pagination-action :where(a[role="button"])>span {
  display: inline;
}

/* ==========================================================================
   IDX Pagination – Disabled State
   Scoped to IDX Broker result pages. Keeps behavior consistent site-wide.
   ========================================================================== */

.IDX-pagination-action :where(.IDX-btn.IDX-disabled[role="button"]) {
  /* show disabled cursor */
  /* keep full opacity so glyph stays readable; mute via colors instead */
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  opacity: 1;
  background-color: var(--gray-100) !important;
  /* arrow inherits */
  border-color: var(--gray-300) !important;
  /* no hover dimming */
  box-shadow: none !important;
  color: var(--gray-400) !important;
  pointer-events: none;
  /* prevent clicking */
  cursor: not-allowed;
  filter: none;
  /* remove odd shadow */
}

.IDX-pagination-action :where(.IDX-btn.IDX-disabled[role="button"]):hover {
  filter: none !important;
}

/* ==========================================================================
   2.0 Pagination Links
   ========================================================================== */

/* 2.1 Default State */
.pagination a {
  display: inline-block;
  margin: 0 calc(var(--space-1) / 2);
  padding: var(--space-1) calc(var(--space-2) + var(--space-1));
  border: 1px solid var(--kaplon-blue);
  border-radius: var(--radius-1, 6px);
  color: var(--kaplon-blue);
  text-decoration: none;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

/* 2.2 Hover State */
.pagination a:hover {
  background-color: var(--kaplon-blue);
  border-color: var(--kaplon-blue);
  color: var(--white);
}

/* 2.3 Active State */
.pagination .active a {
  background-color: var(--button-red-bg);
  border-color: var(--button-red-border);
  color: var(--white);
  cursor: default;
}

/* ==========================================================================
   3.0 Previous/Next Arrows
   ========================================================================== */

.pagination .prev a,
.pagination .next a {
  display: inline-block;
  margin: 0 calc(var(--space-1) / 2);
  padding: var(--space-1) calc(var(--space-2) + var(--space-1));
  border: 1px solid var(--kaplon-blue);
  border-radius: var(--radius-1, 6px);
  color: var(--kaplon-blue);
  font-size: 1.1em;
  font-weight: bold;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
}

.pagination :where(.prev a):hover,
.pagination :where(.next a):hover {
  background-color: var(--kaplon-blue);
  border-color: var(--kaplon-blue);
  color: var(--white);
}

/* ==========================================================================
   2.4 IDX List-Style Pagination Items
   Align list items with our brand tokens (light/dark). Covers spans too.
   ==========================================================================
*/

/* Base list item links/spans */
.IDX-wrapper-standard .IDX-pagination>li :where(a),
.IDX-wrapper-standard .IDX-pagination>li :where(span) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  margin: 0 calc(var(--space-1) / 2);
  padding: 0 var(--space-2);
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-1, 6px);
  color: var(--kaplon-blue);
  text-decoration: none;
  transition:
    background-color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease),
    color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease),
    border-color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease);
}

/* Classic lowercase .idx-pagination support */
.IDX-wrapper-standard .idx-pagination>li>a,
.IDX-wrapper-standard .idx-pagination>li>span {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 2.25rem;
  height: 2.25rem;
  margin: 0 calc(var(--space-1) / 2);
  padding: 0 var(--space-2);
  background: var(--white);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-1, 6px);
  color: var(--kaplon-blue);
  text-decoration: none;
  transition:
    background-color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease),
    color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease),
    border-color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease);
}

/* Hover */
.IDX-wrapper-standard :where(.IDX-pagination)>li :where(a):hover {
  background: var(--kaplon-blue);
  border-color: var(--kaplon-blue);
  color: var(--white);
}

/* Classic lowercase hover */
.IDX-wrapper-standard .idx-pagination>li>a:hover {
  background: var(--kaplon-blue);
  border-color: var(--kaplon-blue);
  color: var(--white);
}

/* Active/current */
.IDX-wrapper-standard .IDX-pagination>.IDX-active :where(a),
.IDX-wrapper-standard .IDX-pagination>.IDX-active :where(span) {
  background: var(--button-red-bg);
  border-color: var(--button-red-border);
  color: var(--white);
  cursor: default;
}

/* Classic lowercase active/current */
.IDX-wrapper-standard .idx-pagination>.active>a,
.IDX-wrapper-standard .idx-pagination>.active>span {
  background: var(--button-red-bg);
  border-color: var(--button-red-border);
  color: var(--white);
  cursor: default;
}

/* Disabled */
.IDX-wrapper-standard .IDX-pagination>.IDX-disabled :where(a,
  span,
  a:hover,
  a:focus,
  span:hover,
  span:focus) {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--gray-600);
  pointer-events: none;
  cursor: not-allowed;
}

/* Classic lowercase disabled state support */
.IDX-wrapper-standard .idx-pagination>.disabled>a,
.IDX-wrapper-standard .idx-pagination>.disabled>span,
.IDX-wrapper-standard .idx-pagination>.disabled>a:hover,
.IDX-wrapper-standard .idx-pagination>.disabled>a:focus,
.IDX-wrapper-standard .idx-pagination>.disabled>span:hover,
.IDX-wrapper-standard .idx-pagination>.disabled>span:focus,
.IDX-wrapper-standard .idx-pagination>.inactive>a,
.IDX-wrapper-standard .idx-pagination>.inactive>span {
  background: var(--gray-100);
  border-color: var(--gray-300);
  color: var(--gray-600);
  pointer-events: none;
  cursor: not-allowed;
}

/* Ellipsis */
.IDX-wrapper-standard .IDX-pagination>li :where(.idx-paginator--ellipsis) {
  color: var(--gray-600);
}

/* Classic lowercase ellipsis */
.IDX-wrapper-standard .idx-pagination>li .idx-paginator--ellipsis {
  color: var(--gray-600);
}

/* Focus accessibility */
.IDX-wrapper-standard :where(.IDX-pagination)>li :where(a):focus-visible {
  /* Dual-ring keeps pagination keyboard focus obvious */
  box-shadow: 0 0 0 2px var(--white),
    0 0 0 4px var(--kaplon-blue);
  outline: none;
}

/* Classic lowercase focus */
.IDX-wrapper-standard .idx-pagination>li>a:focus-visible {
  box-shadow: 0 0 0 2px var(--white),
    0 0 0 4px var(--kaplon-blue);
  outline: none;
}

/* ==========================================================================
   4.0 Dark Mode Overrides
   ========================================================================== */
@media (prefers-color-scheme: dark) {

  /* IDX Pagination – Dark Mode */
  html[data-kaplon-color-mode=system] .IDX-pagination-action :where(a[role="button"]) {
    background-color: var(--dark-surface-base);
    border-color: var(--dark-border);
    color: var(--dark-text-strong);
  }

  html[data-kaplon-color-mode=system] .IDX-pagination-action :where(a[role="button"]):not(.IDX-disabled) {
    /* Use accessible red CTA in dark mode for better contrast (matches other IDX CTAs) */
    background-color: var(--button-red-bg);
    border-color: var(--button-red-border);
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .IDX-pagination-action :where(a[role="button"]):not(.IDX-disabled):hover {
    background-color: var(--kaplon-blue-dark);
    border-color: var(--kaplon-blue-dark);
  }

  /* Disabled pagination button – dark mode */
  html[data-kaplon-color-mode=system] .IDX-pagination-action :where(.IDX-btn.IDX-disabled[role="button"]) {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
  }

  html[data-kaplon-color-mode=system] .pagination a {
    background-color: var(--dark-surface-base);
    border-color: var(--dark-border);
    color: var(--dark-text-strong);
  }

  html[data-kaplon-color-mode=system] .pagination a:hover {
    background-color: var(--dark-hover-bg);
    border-color: var(--dark-border);
    color: var(--neutral-light);
  }

  html[data-kaplon-color-mode=system] .pagination .active a {
    background-color: var(--button-red-bg);
    border-color: var(--button-red-border);
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .pagination .prev a,html[data-kaplon-color-mode=system] 
  .pagination .next a {
    background-color: var(--dark-surface-base);
    border-color: var(--dark-border);
    color: var(--dark-text-strong);
  }

  html[data-kaplon-color-mode=system] .pagination :where(.prev a):hover,html[data-kaplon-color-mode=system] 
  .pagination :where(.next a):hover {
    background-color: var(--dark-hover-bg);
    border-color: var(--dark-border);
    color: var(--neutral-light);
  }

  /* IDX list pagination (dark) */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-pagination>li :where(a),html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .IDX-pagination>li :where(span) {
    background: var(--dark-surface-base);
    border-color: var(--dark-border);
    color: var(--dark-text-strong);
  }

  /* Classic lowercase .idx-pagination (dark) */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .idx-pagination>li>a,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .idx-pagination>li>span {
    background: var(--dark-surface-base);
    border-color: var(--dark-border);
    color: var(--dark-text-strong);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-pagination)>li :where(a):hover {
    background: var(--dark-hover-bg);
    border-color: var(--dark-border);
    color: var(--neutral-light);
  }

  /* Classic lowercase hover (dark) */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .idx-pagination>li>a:hover {
    background: var(--dark-hover-bg);
    border-color: var(--dark-border);
    color: var(--neutral-light);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-pagination>.IDX-active :where(a),html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .IDX-pagination>.IDX-active :where(span) {
    background: var(--button-red-bg);
    border-color: var(--button-red-border);
    color: var(--white);
  }

  /* Classic lowercase active/current (dark) */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .idx-pagination>.active>a,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .idx-pagination>.active>span {
    background: var(--button-red-bg);
    border-color: var(--button-red-border);
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-pagination>.IDX-disabled :where(a,
    span,
    a:hover,
    a:focus,
    span:hover,
    span:focus) {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
  }

  /* Classic lowercase disabled (dark) */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .idx-pagination>.disabled>a,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .idx-pagination>.disabled>span,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .idx-pagination>.disabled>a:hover,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .idx-pagination>.disabled>a:focus,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .idx-pagination>.disabled>span:hover,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .idx-pagination>.disabled>span:focus,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .idx-pagination>.inactive>a,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .idx-pagination>.inactive>span {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard :where(.IDX-pagination)>li :where(a):focus-visible {
    box-shadow: 0 0 0 2px var(--dark-surface),
      0 0 0 4px var(--kaplon-blue-light);
  }

  /* Classic lowercase focus ring (dark) */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .idx-pagination>li>a:focus-visible {
    box-shadow: 0 0 0 2px var(--dark-surface),
      0 0 0 4px var(--kaplon-blue-light);
  }

  /* IDX Result Cell Action Buttons – Dark Mode */
  html[data-kaplon-color-mode=system] .IDX-resultsCellAction {
    background-color: var(--button-red-bg) !important;
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .IDX-resultsDetailsLink .IDX-resultsCellAction {
    background-color: var(--button-red-bg) !important;
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .IDX-resultsDetailsLink .IDX-resultsCellAction:hover {
    background-color: var(--kaplon-blue) !important;
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .IDX-resultsPhotogallery .IDX-resultsCellAction,html[data-kaplon-color-mode=system] 
  .IDX-resultsSaveProperty .IDX-resultsCellAction {
    background-color: var(--button-red-bg) !important;
    border-color: var(--button-red-border) !important;
    color: var(--white) !important;
  }

  html[data-kaplon-color-mode=system] .IDX-resultsPhotogallery .IDX-resultsCellAction:hover,html[data-kaplon-color-mode=system] 
  .IDX-resultsSaveProperty .IDX-resultsCellAction:hover {
    background-color: var(--kaplon-blue) !important;
    border-color: var(--kaplon-blue) !important;
    color: var(--white) !important;
  }

  /* Ensure gallery count text stays white */
  html[data-kaplon-color-mode=system] .IDX-resultsPhotogallery .IDX-resultsCellAction .IDX-galleryCount {
    color: var(--white) !important;
  }

  /* IDX Results Count Alert – Dark Mode (muted, cohesive) */
  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-alert-success {
    background-color: var(--results-bar-bg);
    border-color: var(--results-bar-border);
    color: var(--results-bar-text);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .IDX-alert-success .IDX-resultsCount {
    color: var(--kaplon-red-light);
  }
}
/* IDX Pagination – Dark Mode */
/* Disabled pagination button – dark mode */
/* IDX list pagination (dark) */
/* Classic lowercase .idx-pagination (dark) */
/* Classic lowercase hover (dark) */
/* Classic lowercase active/current (dark) */
/* Classic lowercase disabled (dark) */
/* Classic lowercase focus ring (dark) */
/* IDX Result Cell Action Buttons – Dark Mode */
/* Ensure gallery count text stays white */
/* IDX Results Count Alert – Dark Mode (muted, cohesive) */
/* IDX Pagination – Dark Mode */
html[data-kaplon-color-mode=dark] .IDX-pagination-action :where(a[role="button"]) {
    background-color: var(--dark-surface-base);
    border-color: var(--dark-border);
    color: var(--dark-text-strong);
  }
html[data-kaplon-color-mode=dark] .IDX-pagination-action :where(a[role="button"]):not(.IDX-disabled) {
    /* Use accessible red CTA in dark mode for better contrast (matches other IDX CTAs) */
    background-color: var(--button-red-bg);
    border-color: var(--button-red-border);
    color: var(--white);
  }
html[data-kaplon-color-mode=dark] .IDX-pagination-action :where(a[role="button"]):not(.IDX-disabled):hover {
    background-color: var(--kaplon-blue-dark);
    border-color: var(--kaplon-blue-dark);
  }
/* Disabled pagination button – dark mode */
html[data-kaplon-color-mode=dark] .IDX-pagination-action :where(.IDX-btn.IDX-disabled[role="button"]) {
    background-color: var(--dark-surface) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text) !important;
  }
html[data-kaplon-color-mode=dark] .pagination a {
    background-color: var(--dark-surface-base);
    border-color: var(--dark-border);
    color: var(--dark-text-strong);
  }
html[data-kaplon-color-mode=dark] .pagination a:hover {
    background-color: var(--dark-hover-bg);
    border-color: var(--dark-border);
    color: var(--neutral-light);
  }
html[data-kaplon-color-mode=dark] .pagination .active a {
    background-color: var(--button-red-bg);
    border-color: var(--button-red-border);
    color: var(--white);
  }
html[data-kaplon-color-mode=dark] .pagination .prev a,html[data-kaplon-color-mode=dark] 
  .pagination .next a {
    background-color: var(--dark-surface-base);
    border-color: var(--dark-border);
    color: var(--dark-text-strong);
  }
html[data-kaplon-color-mode=dark] .pagination :where(.prev a):hover,html[data-kaplon-color-mode=dark] 
  .pagination :where(.next a):hover {
    background-color: var(--dark-hover-bg);
    border-color: var(--dark-border);
    color: var(--neutral-light);
  }
/* IDX list pagination (dark) */
html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-pagination>li :where(a),html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .IDX-pagination>li :where(span) {
    background: var(--dark-surface-base);
    border-color: var(--dark-border);
    color: var(--dark-text-strong);
  }
/* Classic lowercase .idx-pagination (dark) */
html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .idx-pagination>li>a,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .idx-pagination>li>span {
    background: var(--dark-surface-base);
    border-color: var(--dark-border);
    color: var(--dark-text-strong);
  }
html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-pagination)>li :where(a):hover {
    background: var(--dark-hover-bg);
    border-color: var(--dark-border);
    color: var(--neutral-light);
  }
/* Classic lowercase hover (dark) */
html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .idx-pagination>li>a:hover {
    background: var(--dark-hover-bg);
    border-color: var(--dark-border);
    color: var(--neutral-light);
  }
html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-pagination>.IDX-active :where(a),html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .IDX-pagination>.IDX-active :where(span) {
    background: var(--button-red-bg);
    border-color: var(--button-red-border);
    color: var(--white);
  }
/* Classic lowercase active/current (dark) */
html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .idx-pagination>.active>a,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .idx-pagination>.active>span {
    background: var(--button-red-bg);
    border-color: var(--button-red-border);
    color: var(--white);
  }
html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-pagination>.IDX-disabled :where(a,
    span,
    a:hover,
    a:focus,
    span:hover,
    span:focus) {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
  }
/* Classic lowercase disabled (dark) */
html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .idx-pagination>.disabled>a,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .idx-pagination>.disabled>span,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .idx-pagination>.disabled>a:hover,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .idx-pagination>.disabled>a:focus,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .idx-pagination>.disabled>span:hover,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .idx-pagination>.disabled>span:focus,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .idx-pagination>.inactive>a,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .idx-pagination>.inactive>span {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    color: var(--dark-text);
  }
html[data-kaplon-color-mode=dark] .IDX-wrapper-standard :where(.IDX-pagination)>li :where(a):focus-visible {
    box-shadow: 0 0 0 2px var(--dark-surface),
      0 0 0 4px var(--kaplon-blue-light);
  }
/* Classic lowercase focus ring (dark) */
html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .idx-pagination>li>a:focus-visible {
    box-shadow: 0 0 0 2px var(--dark-surface),
      0 0 0 4px var(--kaplon-blue-light);
  }
/* IDX Result Cell Action Buttons – Dark Mode */
html[data-kaplon-color-mode=dark] .IDX-resultsCellAction {
    background-color: var(--button-red-bg) !important;
    color: var(--white) !important;
  }
html[data-kaplon-color-mode=dark] .IDX-resultsDetailsLink .IDX-resultsCellAction {
    background-color: var(--button-red-bg) !important;
    color: var(--white) !important;
  }
html[data-kaplon-color-mode=dark] .IDX-resultsDetailsLink .IDX-resultsCellAction:hover {
    background-color: var(--kaplon-blue) !important;
    color: var(--white) !important;
  }
html[data-kaplon-color-mode=dark] .IDX-resultsPhotogallery .IDX-resultsCellAction,html[data-kaplon-color-mode=dark] 
  .IDX-resultsSaveProperty .IDX-resultsCellAction {
    background-color: var(--button-red-bg) !important;
    border-color: var(--button-red-border) !important;
    color: var(--white) !important;
  }
html[data-kaplon-color-mode=dark] .IDX-resultsPhotogallery .IDX-resultsCellAction:hover,html[data-kaplon-color-mode=dark] 
  .IDX-resultsSaveProperty .IDX-resultsCellAction:hover {
    background-color: var(--kaplon-blue) !important;
    border-color: var(--kaplon-blue) !important;
    color: var(--white) !important;
  }
/* Ensure gallery count text stays white */
html[data-kaplon-color-mode=dark] .IDX-resultsPhotogallery .IDX-resultsCellAction .IDX-galleryCount {
    color: var(--white) !important;
  }
/* IDX Results Count Alert – Dark Mode (muted, cohesive) */
html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-alert-success {
    background-color: var(--results-bar-bg);
    border-color: var(--results-bar-border);
    color: var(--results-bar-text);
  }
html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .IDX-alert-success .IDX-resultsCount {
    color: var(--kaplon-red-light);
  }

/* ==========================================================================
   IDX Action Buttons – Consistent Styling
   ========================================================================== */

/* Base IDX button style */
.IDX-btn {
  display: inline-block;
  padding: 0.5em 1em;
  border-radius: var(--radius-1, 6px);
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out,
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* Subtle feedback on hover (parity with .btn) */
.IDX-btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* Reset IDX default gray gradients/shadows */
.IDX-btn.IDX-btn-default {
  background-image: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

/* Primary: Modify Search */
#IDX-modifySearch {
  background-color: var(--button-red-bg) !important;
  border: none !important;
  color: var(--white) !important;
}

#IDX-modifySearch:hover {
  background-color: var(--kaplon-blue) !important;
  color: var(--white) !important;
}

/* Secondary: Save & New Search (outlined) */
#IDX-saveSearch,
#IDX-newSearch {
  background-color: var(--white) !important;
  background-image: none !important;
  border: 1px solid var(--kaplon-red) !important;
  color: var(--kaplon-red) !important;
}

/* Override IDX default topAction styling */
.IDX-wrapper-standard .IDX-topAction #IDX-saveSearch,
.IDX-wrapper-standard .IDX-topAction #IDX-newSearch {
  color: var(--kaplon-red) !important;
}

#IDX-saveSearch:hover,
#IDX-newSearch:hover {
  background-color: var(--kaplon-blue) !important;
  border-color: var(--kaplon-blue) !important;
  color: var(--white) !important;
}

/* Override IDX topAction hover */
.IDX-wrapper-standard .IDX-topAction #IDX-saveSearch:hover,
.IDX-wrapper-standard .IDX-topAction #IDX-newSearch:hover {
  color: var(--white) !important;
}

#IDX-saveSearch:focus,
#IDX-newSearch:focus,
#IDX-modifySearch:focus {
  outline: 2px solid var(--kaplon-blue);
  outline-offset: 2px;
}

/* ==========================================================================
   IDX Property Cell Action Buttons – Consistent Styling
   ========================================================================== */

/* Reset default gray style */
.IDX-resultsCellAction {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 42px;
  padding: 0.5em 1em;
  background-image: none !important;
  border-radius: var(--radius-1, 6px);
  box-shadow: none !important;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-shadow: none !important;
  cursor: pointer;
  transition:
    background-color 0.2s ease-in-out,
    color 0.2s ease-in-out,
    transform 0.2s ease,
    opacity 0.2s ease;
}

/* Subtle feedback on hover without disrupting color hovers */
.IDX-resultsCellAction:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

/* Primary CTA: View Details */
.IDX-resultsDetailsLink .IDX-resultsCellAction {
  background-color: var(--button-red-bg);
  border: none;
  color: var(--white) !important;
}

.IDX-resultsDetailsLink .IDX-resultsCellAction:hover {
  background-color: var(--kaplon-blue);
  color: var(--white);
}

/* Secondary CTAs: Gallery + Favorites (filled red, hover blue) */
.IDX-resultsPhotogallery .IDX-resultsCellAction,
.IDX-resultsSaveProperty .IDX-resultsCellAction {
  background-color: var(--button-red-bg);
  border: 1px solid var(--button-red-border);
  color: var(--white);
}

.IDX-resultsPhotogallery .IDX-resultsCellAction:hover,
.IDX-resultsSaveProperty .IDX-resultsCellAction:hover {
  background-color: var(--kaplon-blue);
  border-color: var(--kaplon-blue);
  color: var(--white);
}

/* Ensure gallery count text matches button text color */
.IDX-resultsPhotogallery .IDX-resultsCellAction .IDX-galleryCount {
  color: inherit !important;
}

/* Hide IDX injected date in search results */
.post-header-wrap .author-meta .list-inline-item {
  display: none !important;
}

/* ==========================================================================
   IDX Results Count – Brand Styling
   ========================================================================== */

.IDX-wrapper-standard .IDX-alert-success {
  /* Muted info bar to replace bright green tally */
  background-color: color-mix(in oklab, var(--kaplon-red) 8%, var(--surface-soft));
  border: 1px solid color-mix(in oklab, var(--kaplon-red) 35%, var(--kaplon-blue));
  color: var(--kaplon-blue);
  font-weight: 600;
}

.IDX-wrapper-standard .IDX-alert-success .IDX-resultsCount {
  color: var(--kaplon-red);
  font-weight: 700;
}

/* IDX pagination active chip */
.IDX-wrapper-standard :where(.pagination .active a,
  .idx-pagination .active > a,
  .idx-pagination .active > button) {
  background: var(--idx-color-accent-bg, var(--button-red-bg));
  border: 1px solid var(--idx-color-accent, var(--button-red-border));
  border-radius: 4px;
  box-shadow: 0 0 0 2px var(--idx-color-accent-ring, color(srgb 0 0 0 / 0.08));
  color: var(--idx-color-accent-text, var(--white));
}

/* ======================================================================
   IDX Pagination – Unified CTA Look (Dark Palette)
   Spec:
   - Background: #1a1a22 (use var(--panel-dark))
   - Text: #f2f2f2 (use var(--text-primary-dark))
   - Radius: 4px
   - Padding: 0.4rem 1rem
   - Weight: 600
   - Hover: darken background by ~10%
   - Active: background var(--accent-red-primary) with white text
   Applies to: PREVIOUS/NEXT actions and page numbers (both IDX/idx variants)
   ====================================================================== */

/* Base items (numbers and spans) */
.IDX-wrapper-standard :where(.IDX-pagination > li > a,
  .IDX-pagination > li > span,
  .idx-pagination > li > a,
  .idx-pagination > li > span) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 1rem;
  background: var(--panel-dark);
  border: none;
  border-radius: 4px;
  color: var(--text-primary-dark);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

/* Hover for items */
.IDX-wrapper-standard :where(.IDX-pagination > li > a:hover,
  .idx-pagination > li > a:hover) {
  background: color-mix(in oklab, var(--panel-dark) 90%, black);
  color: var(--text-primary-dark);
}

/* Active/current page */
.IDX-wrapper-standard :where(.IDX-pagination > .IDX-active > a,
  .IDX-pagination > .IDX-active > span,
  .idx-pagination > .active > a,
  .idx-pagination > .active > span) {
  background: var(--accent-red-primary);
  color: var(--white);
}

/* Prev/Next action buttons */
.IDX-wrapper-standard :where(.IDX-pagination-action a[role="button"]) {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.4rem 1rem;
  background: var(--panel-dark);
  border: none;
  border-radius: 4px;
  color: var(--text-primary-dark);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
}

.IDX-wrapper-standard :where(.IDX-pagination-action a[role="button"]:hover) {
  background: color-mix(in oklab, var(--panel-dark) 90%, black);
}

/* Active state (if applicable on action buttons) */
.IDX-wrapper-standard :where(.IDX-pagination-action .IDX-active a[role="button"]) {
  background: var(--accent-red-primary);
  color: var(--white);
}