/* ============================================================
   COLBY LILLEY — IDX BROKER LUXURY CSS OVERRIDE
   ============================================================
   Brand System:
   - Charcoal:     #2D3632
   - Dark:         #1A1A1A
   - Ivory:        #F9F7F2
   - Champagne Gold: #C5A059
   - White:        #FFFFFF

   Typography:
   - Display/Headings: 'Cormorant Garamond', Georgia, serif
   - Editorial:        'Bodoni Moda', 'Cormorant Garamond', serif
   - Body/Controls:    'Inter', ui-sans-serif, system-ui, sans-serif

   This CSS overrides IDX Broker's default blue visual language with
   Colby's luxury charcoal/ivory/champagne-gold brand system.
   All selectors target confirmed IDX Broker DOM classes/IDs.
   ============================================================ */

/* Import Colby's brand fonts (also loaded in wrapper <head>) */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Inter:wght@300;400;500;600;700&family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;1,6..96,400&display=swap');

/* ============================================================
   1. GLOBAL FOUNDATION — Remove IDX Blue, Set Brand Tokens
   ============================================================ */

:root {
  --cl-charcoal: #2D3632;
  --cl-dark: #1A1A1A;
  --cl-ivory: #F9F7F2;
  --cl-gold: #C5A059;
  --cl-gold-light: #D4B578;
  --cl-gold-dark: #A8833A;
  --cl-white: #FFFFFF;
  --cl-border: rgba(197, 160, 89, 0.2);
  --cl-text-muted: rgba(26, 26, 26, 0.55);
  --cl-font-display: 'Cormorant Garamond', Georgia, serif;
  --cl-font-editorial: 'Bodoni Moda', 'Cormorant Garamond', Georgia, serif;
  --cl-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Main IDX container — set the base font and background */
#IDX-main,
.IDX-pageContainer {
  font-family: var(--cl-font-body) !important;
  background-color: var(--cl-ivory) !important;
  color: var(--cl-dark) !important;
  font-size: 16px;
  line-height: 1.6;
}

/* All headings use serif display typography */
#IDX-main h1,
#IDX-main h2,
#IDX-main h3,
#IDX-main h4,
#IDX-main h5,
#IDX-main h6 {
  font-family: var(--cl-font-display) !important;
  color: var(--cl-dark) !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em;
}

/* Remove all IDX blue from links */
#IDX-main a,
.idx-results a,
.idx-map a {
  color: var(--cl-charcoal) !important;
  text-decoration: none !important;
  transition: color 0.3s ease;
}

#IDX-main a:hover {
  color: var(--cl-gold) !important;
}

/* ============================================================
   2. BUTTON SYSTEM — Replace IDX Blue with Brand Buttons
   ============================================================ */

/* Base button reset — kill all IDX blue backgrounds/borders */
#IDX-main .IDX-btn,
.idx-results .IDX-btn,
.idx-map .IDX-btn,
#prime-map-search-page .IDX-btn {
  font-family: var(--cl-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: 0 !important;
  padding: 10px 22px !important;
  transition: all 0.3s ease !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

/* Primary buttons — Charcoal background, gold hover */
#IDX-main .IDX-btn-primary,
.idx-results .IDX-btn-primary,
#IDX-saveSearch,
.idx-results .IDX-btn-primary.IDX-btn__PL--inverse {
  background-color: var(--cl-charcoal) !important;
  color: var(--cl-white) !important;
  border-color: var(--cl-charcoal) !important;
}

#IDX-main .IDX-btn-primary:hover,
.idx-results .IDX-btn-primary:hover,
#IDX-saveSearch:hover,
.idx-results .IDX-btn-primary.IDX-btn__PL--inverse:hover {
  background-color: var(--cl-gold) !important;
  border-color: var(--cl-gold) !important;
  color: var(--cl-white) !important;
}

/* Link / outline buttons — Refined outlined secondary */
#IDX-main .IDX-btn--link,
#IDX-main .IDX-btn-link,
.idx-results .IDX-btn--link,
.idx-results .IDX-btn-link,
.IDX-newSearch,
.IDX-modifySearch,
.IDX-resultsAction {
  background-color: transparent !important;
  color: var(--cl-charcoal) !important;
  border: 1px solid var(--cl-border) !important;
}

#IDX-main .IDX-btn--link:hover,
#IDX-main .IDX-btn-link:hover,
.idx-results .IDX-btn--link:hover,
.idx-results .IDX-btn-link:hover,
.IDX-newSearch:hover,
.IDX-modifySearch:hover,
.IDX-resultsAction:hover {
  border-color: var(--cl-gold) !important;
  color: var(--cl-gold) !important;
  background-color: transparent !important;
}

/* Rounded button override — luxury uses sharp edges */
#IDX-main .IDX-btn--rounded {
  border-radius: 0 !important;
}

/* ============================================================
   3. SEARCH PAGES — Basic, Advanced, AI Smart Search
   ============================================================ */

#IDX-searchPageWrapper {
  background-color: var(--cl-ivory) !important;
  padding: 40px 24px !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

#IDX-searchForm,
.IDX-searchForm {
  background-color: var(--cl-white) !important;
  padding: 40px !important;
  border: 1px solid var(--cl-border) !important;
  box-shadow: 0 4px 40px rgba(26, 26, 26, 0.04) !important;
}

#IDX-coreSearchFields,
.IDX-row-content {
  padding: 0 !important;
}

/* Control groups */
.IDX-control-group {
  margin-bottom: 24px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* Labels */
#IDX-main .IDX-title--PL,
.IDX-title,
.IDX-control-group label,
.IDX-controls label {
  font-family: var(--cl-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--cl-charcoal) !important;
  margin-bottom: 8px !important;
  display: block !important;
}

/* Select / input fields */
#IDX-main .IDX-select,
#IDX-main select,
#IDX-main input[type="text"],
#IDX-main input[type="number"],
#IDX-main input[type="email"],
#IDX-main input[type="password"],
#IDX-main input[type="tel"],
#IDX-main textarea {
  font-family: var(--cl-font-body) !important;
  font-size: 14px !important;
  color: var(--cl-dark) !important;
  background-color: var(--cl-white) !important;
  border: 1px solid rgba(26, 26, 26, 0.15) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
  outline: none !important;
  box-shadow: none !important;
  height: auto !important;
  line-height: 1.5 !important;
}

/* Focus state — gold accent */
#IDX-main .IDX-select:focus,
#IDX-main select:focus,
#IDX-main input[type="text"]:focus,
#IDX-main input[type="number"]:focus,
#IDX-main input[type="email"]:focus,
#IDX-main input[type="password"]:focus,
#IDX-main input[type="tel"]:focus,
#IDX-main textarea:focus {
  border-color: var(--cl-gold) !important;
  box-shadow: 0 0 0 1px var(--cl-gold) !important;
  background-color: var(--cl-white) !important;
}

/* Select2 dropdown customization */
#IDX-main .select2-container--default .select2-selection--multiple,
#IDX-main .select2-container--default .select2-selection--single {
  border: 1px solid rgba(26, 26, 26, 0.15) !important;
  border-radius: 0 !important;
  background-color: var(--cl-white) !important;
  min-height: 42px !important;
  padding: 4px 8px !important;
}

#IDX-main .select2-container--default.select2-container--focus .select2-selection--multiple,
#IDX-main .select2-container--default.select2-container--focus .select2-selection--single,
#IDX-main .select2-container--default .select2-selection--multiple:focus,
#IDX-main .select2-container--default .select2-selection--single:focus {
  border-color: var(--cl-gold) !important;
  box-shadow: 0 0 0 1px var(--cl-gold) !important;
}

#IDX-main .select2-container--default .select2-selection__placeholder {
  color: var(--cl-text-muted) !important;
  font-family: var(--cl-font-body) !important;
  font-size: 14px !important;
}

#IDX-main .select2-container--default .select2-results__option--highlighted[aria-selected] {
  background-color: var(--cl-charcoal) !important;
  color: var(--cl-white) !important;
}

#IDX-main .select2-container--default .select2-results__option[aria-selected="true"] {
  background-color: var(--cl-gold) !important;
  color: var(--cl-white) !important;
}

#IDX-main .select2-dropdown {
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  background-color: var(--cl-white) !important;
  font-family: var(--cl-font-body) !important;
}

/* Search submit button */
#IDX-main .IDX-searchSubmit,
#IDX-main input[type="submit"],
#IDX-main button[type="submit"] {
  background-color: var(--cl-charcoal) !important;
  color: var(--cl-white) !important;
  font-family: var(--cl-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 14px 32px !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
  width: auto !important;
  min-width: 200px !important;
}

#IDX-main .IDX-searchSubmit:hover,
#IDX-main input[type="submit"]:hover,
#IDX-main button[type="submit"]:hover {
  background-color: var(--cl-gold) !important;
}

/* ============================================================
   4. RESULTS PAGE — Listing Results, Top Actions, Alerts
   ============================================================ */

.idx-results {
  background-color: var(--cl-ivory) !important;
  padding: 32px 24px !important;
}

/* Top action bar — New Search, Modify Search, Save Search */
.IDX-topAction,
.IDX-top-action__group,
.IDX-top-action__group--no-refinement {
  padding: 0 0 24px 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  background: transparent !important;
  border: none !important;
}

/* Alert / notification bar — remove blue, use charcoal */
#IDX-main .IDX-alert,
.idx-results .IDX-results__alert,
.IDX-alert-info {
  background-color: var(--cl-charcoal) !important;
  color: var(--cl-white) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  font-family: var(--cl-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  margin-bottom: 24px !important;
  text-align: left !important;
}

/* Results header — count + map toggle */
#idx-results-header,
.idx-results__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 0 20px 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--cl-border) !important;
  background: transparent !important;
}

/* Result count — remove blue badge, use serif typography */
.idx-results__total,
.idx-results-total__heading {
  font-family: var(--cl-font-display) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: var(--cl-dark) !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  border: none !important;
  display: block !important;
}

/* Map toggle button */
.idx-results__map-toggle,
#idx-results-map-toggle {
  background-color: transparent !important;
  color: var(--cl-charcoal) !important;
  border: 1px solid var(--cl-border) !important;
  font-family: var(--cl-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 8px 18px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.idx-results__map-toggle:hover,
#idx-results-map-toggle:hover {
  border-color: var(--cl-gold) !important;
  color: var(--cl-gold) !important;
  background-color: transparent !important;
}

/* Results content area */
#idx-results-content,
.idx-results__content {
  background-color: var(--cl-ivory) !important;
  padding: 24px 0 0 0 !important;
}

/* ============================================================
   5. LISTING CARDS — Luxury Card Design
   ============================================================ */

/* Listing card container — both legacy and modern IDX class patterns */
#IDX-main .idx-listing-container,
#IDX-main .IDX-listingContainer,
#IDX-main .idx-listing-card,
#IDX-main .IDX-listingCard,
#IDX-main .idx-listing,
#IDX-main .IDX-listing {
  background-color: var(--cl-white) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
  transition: box-shadow 0.4s ease, border-color 0.4s ease !important;
  box-shadow: 0 2px 12px rgba(26, 26, 26, 0.03) !important;
}

#IDX-main .idx-listing-container:hover,
#IDX-main .IDX-listingContainer:hover,
#IDX-main .idx-listing-card:hover,
#IDX-main .IDX-listingCard:hover,
#IDX-main .idx-listing:hover,
#IDX-main .IDX-listing:hover {
  box-shadow: 0 8px 40px rgba(26, 26, 26, 0.08) !important;
  border-color: var(--cl-gold) !important;
}

/* Listing photo — dominant, clean crop */
#IDX-main .idx-listing-photo,
#IDX-main .IDX-listingPhoto,
#IDX-main .idx-listing-photo-link,
#IDX-main .IDX-photo,
#IDX-main .idx-listing-image,
#IDX-main .IDX-listingImage {
  display: block !important;
  width: 100% !important;
  height: 240px !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: var(--cl-charcoal) !important;
}

#IDX-main .idx-listing-photo img,
#IDX-main .IDX-listingPhoto img,
#IDX-main .IDX-photo img,
#IDX-main .idx-listing-image img,
#IDX-main .IDX-listingImage img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

#IDX-main .idx-listing-container:hover .idx-listing-photo img,
#IDX-main .IDX-listingContainer:hover .IDX-listingPhoto img,
#IDX-main .idx-listing-card:hover .IDX-photo img,
#IDX-main .idx-listing:hover .idx-listing-image img {
  transform: scale(1.05) !important;
}

/* Listing card body */
#IDX-main .idx-listing-details,
#IDX-main .IDX-listingDetails,
#IDX-main .idx-listing-info,
#IDX-main .IDX-listingInfo {
  padding: 20px 24px 24px 24px !important;
  background-color: var(--cl-white) !important;
}

/* Price — elegant serif typography */
#IDX-main .idx-listing-price,
#IDX-main .IDX-listingPrice,
#IDX-main .IDX-price,
#IDX-main .idx-price {
  font-family: var(--cl-font-display) !important;
  font-size: 26px !important;
  font-weight: 500 !important;
  color: var(--cl-dark) !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.01em !important;
  background: transparent !important;
  display: block !important;
}

/* Address — clearly readable */
#IDX-main .idx-listing-address,
#IDX-main .IDX-listingAddress,
#IDX-main .IDX-address,
#IDX-main .idx-address {
  font-family: var(--cl-font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--cl-charcoal) !important;
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  line-height: 1.4 !important;
  display: block !important;
}

#IDX-main .idx-listing-address a,
#IDX-main .IDX-listingAddress a,
#IDX-main .IDX-address a {
  color: var(--cl-charcoal) !important;
}

#IDX-main .idx-listing-address a:hover,
#IDX-main .IDX-listingAddress a:hover,
#IDX-main .IDX-address a:hover {
  color: var(--cl-gold) !important;
}

/* Property specs (beds, baths, sqft) — secondary text */
#IDX-main .idx-listing-specs,
#IDX-main .IDX-listingSpecs,
#IDX-main .IDX-specs,
#IDX-main .idx-specs,
#IDX-main .idx-listing-bedrooms,
#IDX-main .idx-listing-baths,
#IDX-main .idx-listing-sqft,
#IDX-main .IDX-listingSpecs span,
#IDX-main .idx-listing-specs span {
  font-family: var(--cl-font-body) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  color: var(--cl-text-muted) !important;
  letter-spacing: 0.02em !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.5 !important;
}

/* Status badge — small, refined */
#IDX-main .idx-listing-status,
#IDX-main .IDX-listingStatus,
#IDX-main .IDX-status,
#IDX-main .idx-status,
#IDX-main .idx-listing-status-badge,
#IDX-main .IDX-statusBadge {
  font-family: var(--cl-font-body) !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: var(--cl-gold) !important;
  background-color: transparent !important;
  border: 1px solid var(--cl-gold) !important;
  padding: 4px 10px !important;
  border-radius: 0 !important;
  display: inline-block !important;
  margin: 0 0 12px 0 !important;
}

/* Favorite / heart icon — gold accent */
#IDX-main .idx-listing-favorite,
#IDX-main .IDX-favorite,
#IDX-main .idx-favorite,
#IDX-main .IDX-listingFavorite,
#IDX-main .idx-listing-favorite-btn,
#IDX-main .IDX-favoriteBtn {
  color: var(--cl-gold) !important;
  background-color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 50% !important;
  width: 36px !important;
  height: 36px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.3s ease !important;
}

#IDX-main .idx-listing-favorite:hover,
#IDX-main .IDX-favorite:hover,
#IDX-main .idx-favorite:hover,
#IDX-main .IDX-listingFavorite:hover,
#IDX-main .idx-listing-favorite-btn:hover,
#IDX-main .IDX-favoriteBtn:hover {
  background-color: var(--cl-gold) !important;
  color: var(--cl-white) !important;
  border-color: var(--cl-gold) !important;
}

/* ============================================================
   6. MAP SEARCH — Premium Filter Bar & Surrounding UI
   ============================================================ */

#IDX-main.IDX-page-mapsearch,
#IDX-main .IDX-page-mapsearch {
  background-color: var(--cl-ivory) !important;
}

#prime-map-search-page {
  background-color: var(--cl-ivory) !important;
  font-family: var(--cl-font-body) !important;
}

/* Navigation tabs (Advanced, Listing ID, Address, AI Smart, Map) */
#navigation-container {
  background-color: var(--cl-white) !important;
  border-bottom: 1px solid var(--cl-border) !important;
  padding: 0 !important;
}

.idx-nav-button-container {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

.idx-nav-button {
  font-family: var(--cl-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--cl-charcoal) !important;
  padding: 18px 24px !important;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  background-color: transparent !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
}

.idx-nav-button:hover {
  color: var(--cl-gold) !important;
  border-bottom-color: var(--cl-gold) !important;
  background-color: transparent !important;
}

.idx-nav-button__active,
.idx-nav-button.idx-nav-button__active {
  color: var(--cl-dark) !important;
  border-bottom-color: var(--cl-gold) !important;
  background-color: transparent !important;
}

.no-gap-hr {
  border: none !important;
  border-top: 1px solid var(--cl-border) !important;
  margin: 0 !important;
}

/* Filter bar */
#prime-map-search--filter-bar {
  background-color: var(--cl-white) !important;
  border-bottom: 1px solid var(--cl-border) !important;
  padding: 12px 24px !important;
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

/* Fly-to / location search field */
#prime-map-search--filter-bar__flyto {
  flex: 0 0 auto !important;
}

.pm-ccz-fly-to-field {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background-color: var(--cl-ivory) !important;
  border: 1px solid rgba(26, 26, 26, 0.12) !important;
  padding: 8px 12px !important;
  min-width: 260px !important;
  transition: border-color 0.3s ease !important;
}

.pm-ccz-fly-to-field:focus-within {
  border-color: var(--cl-gold) !important;
}

.pm-ccz-fly-to-field input.ti-new-tag-input {
  font-family: var(--cl-font-body) !important;
  font-size: 13px !important;
  color: var(--cl-dark) !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  flex: 1 !important;
  min-width: 120px !important;
}

.pm-ccz-fly-to-field input.ti-new-tag-input::placeholder {
  color: var(--cl-text-muted) !important;
}

/* Vue tags input overrides */
.vue-tags-input {
  background: transparent !important;
  max-width: none !important;
}

.vue-tags-input .ti-input {
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
}

.vue-tags-input .ti-tags {
  border: none !important;
  background: transparent !important;
}

.vue-tags-input .ti-new-tag-input-wrapper {
  padding: 0 !important;
  background: transparent !important;
}

/* Remove button in fly-to field */
.rm-btn {
  background-color: var(--cl-charcoal) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
}

.rm-btn:hover {
  background-color: var(--cl-gold) !important;
}

.rm-btn-disabled {
  opacity: 0.3 !important;
  cursor: not-allowed !important;
}

/* Filter buttons container */
.filter-buttons-container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

/* Individual filter buttons (Status, Price, Bed & Baths, Type, More) */
.idx-filter-button {
  font-family: var(--cl-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--cl-charcoal) !important;
  background-color: var(--cl-ivory) !important;
  border: 1px solid rgba(26, 26, 26, 0.12) !important;
  border-radius: 0 !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.idx-filter-button:hover {
  border-color: var(--cl-gold) !important;
  color: var(--cl-gold) !important;
  background-color: var(--cl-white) !important;
}

.idx-filter-button > div {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.idx-filter-button svg path {
  stroke: var(--cl-charcoal) !important;
  transition: stroke 0.3s ease !important;
}

.idx-filter-button:hover svg path {
  stroke: var(--cl-gold) !important;
}

/* Main filters container (expanded filter panel) */
.idx-main-filters-container {
  background-color: var(--cl-white) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  padding: 20px !important;
  margin-top: 8px !important;
  box-shadow: 0 4px 20px rgba(26, 26, 26, 0.06) !important;
}

/* Apply Filters button — charcoal primary */
.idx-main-filters-container .IDX-btn-primary,
.idx-main-filters-container button.IDX-btn-primary,
.filter-buttons-container .IDX-btn-primary,
.idx-apply-filters,
.idx-apply-filters-btn {
  background-color: var(--cl-charcoal) !important;
  color: var(--cl-white) !important;
  border: 1px solid var(--cl-charcoal) !important;
  font-family: var(--cl-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 10px 24px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.idx-main-filters-container .IDX-btn-primary:hover,
.idx-main-filters-container button.IDX-btn-primary:hover,
.filter-buttons-container .IDX-btn-primary:hover,
.idx-apply-filters:hover,
.idx-apply-filters-btn:hover {
  background-color: var(--cl-gold) !important;
  border-color: var(--cl-gold) !important;
}

/* Mobile filter container */
.mls-filter-container-mobile {
  background-color: var(--cl-white) !important;
  font-family: var(--cl-font-body) !important;
}

.mls-filter-container-mobile-header {
  background-color: var(--cl-charcoal) !important;
  color: var(--cl-white) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.mls-filter-container-mobile-header .header-results {
  font-family: var(--cl-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--cl-white) !important;
  background: transparent !important;
}

.mls-filter-container-mobile-header .header-close {
  cursor: pointer !important;
}

.mls-filter-container-mobile-header .header-close svg path {
  stroke: var(--cl-white) !important;
}

.mls-filter-container-mobile-body {
  padding: 20px !important;
  background-color: var(--cl-white) !important;
}

/* Property status filter checkboxes */
.property-status-filter {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 8px 0 !important;
}

.property-status-filter input[type="checkbox"] {
  accent-color: var(--cl-gold) !important;
  width: 16px !important;
  height: 16px !important;
  cursor: pointer !important;
}

.property-status-filter label,
.header-label-text-format {
  font-family: var(--cl-font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--cl-charcoal) !important;
  cursor: pointer !important;
  letter-spacing: 0.02em !important;
}

/* Price filter dropdowns */
.price-filter-container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 12px 0 !important;
}

.min-price-filter,
.max-price-filter {
  flex: 1 !important;
}

.min-price-filter select,
.max-price-filter select {
  font-family: var(--cl-font-body) !important;
  font-size: 13px !important;
  color: var(--cl-dark) !important;
  background-color: var(--cl-ivory) !important;
  border: 1px solid rgba(26, 26, 26, 0.12) !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  width: 100% !important;
  cursor: pointer !important;
}

.min-price-filter select:focus,
.max-price-filter select:focus {
  border-color: var(--cl-gold) !important;
  outline: none !important;
}

.min-max-price-seperator {
  color: var(--cl-text-muted) !important;
  font-size: 14px !important;
}

/* ============================================================
   7. LEAFLET MAP — Minimal Restyling (Do NOT Break Map)
   ============================================================
   Only style the map container border/background.
   Do NOT touch leaflet-pane, leaflet-tile, leaflet-marker,
   leaflet-control, or any map positioning/transform rules.
   ============================================================ */

#IDX-map,
.idx-map,
.idx-map.leaflet-container {
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  background-color: var(--cl-ivory) !important;
  font-family: var(--cl-font-body) !important;
  z-index: 1 !important;
}

/* Leaflet zoom controls — subtle gold accent */
.leaflet-bar a {
  background-color: var(--cl-white) !important;
  color: var(--cl-charcoal) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  font-family: var(--cl-font-body) !important;
  transition: all 0.3s ease !important;
}

.leaflet-bar a:hover {
  background-color: var(--cl-gold) !important;
  color: var(--cl-white) !important;
  border-color: var(--cl-gold) !important;
}

/* Leaflet popup — luxury styling */
.leaflet-popup-content-wrapper {
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 30px rgba(26, 26, 26, 0.1) !important;
  font-family: var(--cl-font-body) !important;
}

.leaflet-popup-tip {
  border: 1px solid var(--cl-border) !important;
}

/* ============================================================
   8. PROPERTY DETAIL PAGES
   ============================================================ */

#IDX-detailsPageContainer {
  background-color: var(--cl-ivory) !important;
  padding: 0 !important;
  font-family: var(--cl-font-body) !important;
}

#IDX-detailsWrapper {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  background-color: var(--cl-ivory) !important;
}

#IDX-detailsMain {
  padding: 32px 0 !important;
  background-color: var(--cl-ivory) !important;
}

/* Primary photo / gallery */
#IDX-primaryPhoto {
  margin-bottom: 32px !important;
  background-color: var(--cl-charcoal) !important;
}

#IDX-primaryPhotoStatic img {
  width: 100% !important;
  height: auto !important;
  max-height: 600px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Swiper gallery navigation */
.swiper-button-prev,
.swiper-button-next {
  background-color: rgba(45, 54, 50, 0.8) !important;
  border: none !important;
  border-radius: 0 !important;
  width: 44px !important;
  height: 44px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease !important;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background-color: var(--cl-gold) !important;
}

.swiper-button-prev::after,
.swiper-button-next::after {
  font-size: 0 !important;
}

.swiper-pagination {
  background-color: rgba(26, 26, 26, 0.7) !important;
  padding: 6px 14px !important;
  border-radius: 0 !important;
  font-family: var(--cl-font-body) !important;
  font-size: 12px !important;
  color: var(--cl-white) !important;
}

.swiper-pagination-current,
.swiper-pagination-total {
  color: var(--cl-white) !important;
  font-weight: 500 !important;
}

/* Detail page price — large serif */
#IDX-main .IDX-price,
#IDX-main .idx-price,
#IDX-detailsWrapper .IDX-price,
#IDX-detailsWrapper .idx-price {
  font-family: var(--cl-font-display) !important;
  font-size: 36px !important;
  font-weight: 500 !important;
  color: var(--cl-dark) !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.2 !important;
}

/* Detail page address */
#IDX-main .IDX-address,
#IDX-main .idx-address,
#IDX-detailsWrapper .IDX-address,
#IDX-detailsWrapper .idx-address {
  font-family: var(--cl-font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--cl-charcoal) !important;
  margin: 0 0 24px 0 !important;
  line-height: 1.4 !important;
}

/* Property info tables — clean, spacious */
#IDX-main .IDX-propertyInfo,
#IDX-main .idx-property-info,
#IDX-main .IDX-infoTable,
#IDX-main .idx-info-table,
#IDX-main table {
  font-family: var(--cl-font-body) !important;
  font-size: 14px !important;
  color: var(--cl-dark) !important;
  border-collapse: collapse !important;
  width: 100% !important;
  background-color: var(--cl-white) !important;
}

#IDX-main .IDX-propertyInfo th,
#IDX-main .IDX-infoTable th,
#IDX-main table th {
  font-family: var(--cl-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--cl-charcoal) !important;
  background-color: var(--cl-ivory) !important;
  padding: 12px 16px !important;
  border: 1px solid var(--cl-border) !important;
  text-align: left !important;
}

#IDX-main .IDX-propertyInfo td,
#IDX-main .IDX-infoTable td,
#IDX-main table td {
  font-family: var(--cl-font-body) !important;
  font-size: 14px !important;
  color: var(--cl-dark) !important;
  padding: 12px 16px !important;
  border: 1px solid var(--cl-border) !important;
  background-color: var(--cl-white) !important;
}

/* Detail page section headings */
#IDX-main .IDX-sectionTitle,
#IDX-main .idx-section-title,
#IDX-main .IDX-groupTitle,
#IDX-main .idx-group-title {
  font-family: var(--cl-font-display) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: var(--cl-dark) !important;
  margin: 32px 0 16px 0 !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--cl-border) !important;
  letter-spacing: 0.01em !important;
}

/* ============================================================
   9. FORMS — Lead, Save Search, Registration, Login
   ============================================================ */

#IDX-main form,
.idx-results form,
#prime-map-search-page form {
  font-family: var(--cl-font-body) !important;
}

#IDX-main form input[type="text"],
#IDX-main form input[type="email"],
#IDX-main form input[type="password"],
#IDX-main form input[type="tel"],
#IDX-main form input[type="number"],
#IDX-main form textarea,
#IDX-main form select {
  font-family: var(--cl-font-body) !important;
  font-size: 14px !important;
  color: var(--cl-dark) !important;
  background-color: var(--cl-white) !important;
  border: 1px solid rgba(26, 26, 26, 0.15) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
  outline: none !important;
  box-shadow: none !important;
  width: 100% !important;
  max-width: 400px !important;
  line-height: 1.5 !important;
}

#IDX-main form input[type="text"]:focus,
#IDX-main form input[type="email"]:focus,
#IDX-main form input[type="password"]:focus,
#IDX-main form input[type="tel"]:focus,
#IDX-main form input[type="number"]:focus,
#IDX-main form textarea:focus,
#IDX-main form select:focus {
  border-color: var(--cl-gold) !important;
  box-shadow: 0 0 0 1px var(--cl-gold) !important;
}

#IDX-main form label,
#IDX-main form .IDX-label,
#IDX-main form .idx-label {
  font-family: var(--cl-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--cl-charcoal) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

/* Form submit buttons */
#IDX-main form input[type="submit"],
#IDX-main form button[type="submit"],
#IDX-main form .IDX-btn-primary {
  background-color: var(--cl-charcoal) !important;
  color: var(--cl-white) !important;
  border: 1px solid var(--cl-charcoal) !important;
  font-family: var(--cl-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 12px 28px !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  max-width: none !important;
  width: auto !important;
}

#IDX-main form input[type="submit"]:hover,
#IDX-main form button[type="submit"]:hover,
#IDX-main form .IDX-btn-primary:hover {
  background-color: var(--cl-gold) !important;
  border-color: var(--cl-gold) !important;
}

/* ============================================================
   10. PAGINATION
   ============================================================ */

#IDX-main .IDX-pagination,
#IDX-main .idx-pagination,
#IDX-main .IDX-pager,
#IDX-main .idx-pager {
  font-family: var(--cl-font-body) !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  margin: 32px 0 !important;
  padding: 0 !important;
}

#IDX-main .IDX-pagination a,
#IDX-main .idx-pagination a,
#IDX-main .IDX-pager a,
#IDX-main .idx-pager a,
#IDX-main .IDX-pagination span,
#IDX-main .idx-pagination span {
  font-family: var(--cl-font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  color: var(--cl-charcoal) !important;
  background-color: transparent !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  padding: 8px 14px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 40px !important;
}

#IDX-main .IDX-pagination a:hover,
#IDX-main .idx-pagination a:hover,
#IDX-main .IDX-pager a:hover,
#IDX-main .idx-pager a:hover {
  border-color: var(--cl-gold) !important;
  color: var(--cl-gold) !important;
  background-color: transparent !important;
}

/* Active/current page */
#IDX-main .IDX-pagination .IDX-active,
#IDX-main .IDX-pagination .active,
#IDX-main .idx-pagination .IDX-active,
#IDX-main .idx-pagination .active,
#IDX-main .IDX-pager .IDX-active,
#IDX-main .IDX-pager .active {
  background-color: var(--cl-charcoal) !important;
  color: var(--cl-white) !important;
  border-color: var(--cl-charcoal) !important;
}

#IDX-main .IDX-pagination .IDX-active a,
#IDX-main .IDX-pagination .active a,
#IDX-main .idx-pagination .IDX-active a,
#IDX-main .idx-pagination .active a {
  color: var(--cl-white) !important;
}

/* ============================================================
   11. MISC — Breadcrumbs, Saved Links, Market Reports
   ============================================================ */

/* Breadcrumbs */
#IDX-main .IDX-breadcrumb,
#IDX-main .idx-breadcrumb,
#IDX-main .IDX-breadcrumbs,
#IDX-main .idx-breadcrumbs {
  font-family: var(--cl-font-body) !important;
  font-size: 12px !important;
  color: var(--cl-text-muted) !important;
  padding: 16px 0 !important;
  margin: 0 !important;
  background: transparent !important;
}

#IDX-main .IDX-breadcrumb a,
#IDX-main .idx-breadcrumb a,
#IDX-main .IDX-breadcrumbs a,
#IDX-main .idx-breadcrumbs a {
  color: var(--cl-charcoal) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

#IDX-main .IDX-breadcrumb a:hover,
#IDX-main .idx-breadcrumb a:hover,
#IDX-main .IDX-breadcrumbs a:hover,
#IDX-main .idx-breadcrumbs a:hover {
  color: var(--cl-gold) !important;
}

/* Browse by City / Market Reports grid */
#IDX-main .IDX-cityGrid,
#IDX-main .idx-city-grid,
#IDX-main .IDX-marketReport,
#IDX-main .idx-market-report {
  font-family: var(--cl-font-body) !important;
}

#IDX-main .IDX-cityGrid a,
#IDX-main .idx-city-grid a,
#IDX-main .IDX-marketReport a,
#IDX-main .idx-market-report a {
  font-family: var(--cl-font-body) !important;
  font-size: 14px !important;
  color: var(--cl-charcoal) !important;
  text-decoration: none !important;
  padding: 12px 16px !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  display: block !important;
  margin-bottom: 8px !important;
  background-color: var(--cl-white) !important;
  transition: all 0.3s ease !important;
}

#IDX-main .IDX-cityGrid a:hover,
#IDX-main .idx-city-grid a:hover,
#IDX-main .IDX-marketReport a:hover,
#IDX-main .idx-market-report a:hover {
  border-color: var(--cl-gold) !important;
  color: var(--cl-gold) !important;
  background-color: var(--cl-ivory) !important;
}

/* ============================================================
   12. MOBILE RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  #IDX-searchPageWrapper,
  #IDX-searchForm,
  .IDX-searchForm {
    padding: 20px !important;
  }

  #IDX-detailsWrapper {
    padding: 0 16px !important;
  }

  .idx-results {
    padding: 20px 16px !important;
  }

  #prime-map-search--filter-bar {
    padding: 10px 16px !important;
    gap: 8px !important;
  }

  .pm-ccz-fly-to-field {
    min-width: 100% !important;
  }

  .filter-buttons-container {
    width: 100% !important;
    justify-content: flex-start !important;
  }

  .idx-filter-button {
    font-size: 11px !important;
    padding: 6px 12px !important;
  }

  /* Listing cards on mobile — stack vertically */
  #IDX-main .idx-listing-container,
  #IDX-main .IDX-listingContainer,
  #IDX-main .idx-listing-card,
  #IDX-main .IDX-listingCard {
    margin-bottom: 16px !important;
  }

  #IDX-main .idx-listing-photo,
  #IDX-main .IDX-listingPhoto,
  #IDX-main .IDX-photo,
  #IDX-main .idx-listing-image {
    height: 200px !important;
  }

  #IDX-main .idx-listing-price,
  #IDX-main .IDX-listingPrice,
  #IDX-main .IDX-price {
    font-size: 22px !important;
  }

  /* Detail page price/address */
  #IDX-detailsWrapper .IDX-price,
  #IDX-detailsWrapper .idx-price {
    font-size: 28px !important;
  }

  #IDX-main .IDX-sectionTitle,
  #IDX-main .idx-section-title {
    font-size: 20px !important;
  }

  /* Prevent horizontal overflow */
  #IDX-main,
  .IDX-pageContainer,
  .idx-results,
  #IDX-detailsWrapper {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* Map search — full width on mobile */
  #IDX-map,
  .idx-map,
  #idx-map,
  #map,
  .idx-map-container,
  #idx-map-container,
  #idx-map-search-container {
    width: 100% !important;
  }
}

/* ============================================================
   12B. DESKTOP MAP SEARCH — Two-Column Layout Fix (68/32)
   ============================================================
   At desktop widths (≥1024px), force the Map Search page into a
   clean side-by-side layout: map ~68%, results ~32%, no gap.

   Targets all confirmed IDX Broker Prime Map Search containers:
   - #idx-map-search-container / .idx-wrapper (parent)
   - #idx-map-container / .idx-map-container (parent)
   - #idx-map / #map / #IDX-map / .idx-map (map pane)
   - #idx-results / #idx-map-results-container (results pane)

   IMPORTANT: Does NOT touch Leaflet internals (.leaflet-pane,
   .leaflet-tile, .leaflet-marker, transforms, or absolute
   positioning). Only sets container widths and flex layout.
   ============================================================ */

@media (min-width: 1024px) {

  /* --- Parent container: flex row, no gap, full width --- */
  #idx-map-search-container,
  .idx-wrapper,
  #idx-map-container,
  .idx-map-container,
  #prime-map-search-page > div:not(#prime-map-search--filter-bar) {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  /* --- Map pane: 68% width, full height --- */
  #idx-map,
  #map,
  #IDX-map,
  .idx-map,
  #idx-map-container > div:first-child,
  #idx-map-search-container > div:first-child,
  .idx-wrapper > div:first-child,
  .idx-map-container > div:first-child {
    flex: 0 0 68% !important;
    width: 68% !important;
    max-width: 68% !important;
    height: calc(100vh - 180px) !important;
    min-height: 500px !important;
    padding: 0 !important;
    margin: 0 !important;
    position: relative !important;
  }

  /* --- Results pane: 32% width, internal scroll --- */
  #idx-results,
  #idx-map-results-container,
  .idx-map-results-container,
  #idx-map-container > div:last-child,
  #idx-map-search-container > div:last-child,
  .idx-wrapper > div:last-child,
  .idx-map-container > div:last-child {
    flex: 0 0 32% !important;
    width: 32% !important;
    max-width: 32% !important;
    height: calc(100vh - 180px) !important;
    min-height: 500px !important;
    padding: 0 16px !important;
    margin: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background-color: var(--cl-ivory) !important;
    border-left: 1px solid var(--cl-border) !important;
  }

  /* --- Leaflet map fills its container (no transform/position changes) --- */
  #idx-map .leaflet-container,
  #map.leaflet-container,
  #IDX-map.leaflet-container,
  .idx-map.leaflet-container,
  #idx-map-container > div:first-child .leaflet-container,
  #idx-map-search-container > div:first-child .leaflet-container {
    width: 100% !important;
    height: 100% !important;
  }

  /* --- Results listing cards fill the 32% column --- */
  #idx-results .idx-listing-container,
  #idx-results .IDX-listingContainer,
  #idx-results .idx-listing-card,
  #idx-results .IDX-listingCard,
  #idx-map-results-container .idx-listing-container,
  #idx-map-results-container .IDX-listingContainer,
  #idx-map-results-container .idx-listing-card,
  #idx-map-results-container .IDX-listingCard,
  #idx-map-results-container .idx-listing,
  #idx-map-results-container .IDX-listing {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px 0 !important;
  }

  /* --- Results listing photos fill card width --- */
  #idx-results .idx-listing-photo,
  #idx-results .IDX-listingPhoto,
  #idx-results .IDX-photo,
  #idx-results .idx-listing-image,
  #idx-map-results-container .idx-listing-photo,
  #idx-map-results-container .IDX-listingPhoto,
  #idx-map-results-container .IDX-photo,
  #idx-map-results-container .idx-listing-image {
    width: 100% !important;
    height: 180px !important;
  }

  /* --- Filter bar aligns to full content width --- */
  #prime-map-search--filter-bar {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px 24px !important;
    margin: 0 !important;
  }

  /* --- Navigation tabs align to full content width --- */
  #navigation-container,
  .idx-nav-button-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 24px !important;
    margin: 0 !important;
  }

  /* --- Prevent horizontal page overflow --- */
  #IDX-main.IDX-page-mapsearch,
  #IDX-searchPageWrapper,
  #prime-map-search-page {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* --- Results header (count badge) fills column --- */
  #idx-results .idx-results__header,
  #idx-results #idx-results-header,
  #idx-map-results-container .idx-results__header,
  #idx-map-results-container #idx-results-header {
    width: 100% !important;
    padding: 12px 0 !important;
    margin: 0 !important;
  }
}

/* ============================================================
   13. UTILITY OVERRIDES — Kill Remaining IDX Blue
   ============================================================ */

/* Any remaining blue backgrounds */
#IDX-main [style*="background"],
#IDX-main [style*="background-color"] {
  /* Target inline styles that might use blue */
}

/* Force-override common IDX blue color values */
#IDX-main .IDX-btn-primary:not(:hover),
.idx-results .IDX-btn-primary:not(:hover) {
  background-color: var(--cl-charcoal) !important;
}

/* Notification bars / info bars — charcoal not blue */
#IDX-main .IDX-notice,
#IDX-main .IDX-info,
#IDX-main .idx-notice,
#IDX-main .idx-info,
#IDX-main .IDX-message,
#IDX-main .idx-message {
  background-color: var(--cl-charcoal) !important;
  color: var(--cl-white) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 20px !important;
  font-family: var(--cl-font-body) !important;
  font-size: 13px !important;
}

/* Selected/active states — gold not blue */
#IDX-main .selected,
#IDX-main .IDX-selected,
#IDX-main .active,
#IDX-main .IDX-active {
  background-color: var(--cl-gold) !important;
  color: var(--cl-white) !important;
}

/* ============================================================
   14. MLS DISCLOSURE — Preserve Required Attribution
   ============================================================
   Do NOT hide IDX/MLS required disclosures, attribution,
   or compliance information. Only restyle to match brand.
   ============================================================ */

#IDX-main .IDX-disclaimer,
#IDX-main .idx-disclaimer,
#IDX-main .IDX-mlsDisclaimer,
#IDX-main .idx-mls-disclaimer,
#IDX-main .IDX-compliance,
#IDX-main .idx-compliance,
#IDX-main .IDX-attribution,
#IDX-main .idx-attribution {
  font-family: var(--cl-font-body) !important;
  font-size: 11px !important;
  color: var(--cl-text-muted) !important;
  background-color: var(--cl-ivory) !important;
  padding: 16px 0 !important;
  margin: 24px 0 0 0 !important;
  border-top: 1px solid var(--cl-border) !important;
  line-height: 1.5 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Equal Housing Opportunity logo */
#IDX-main .IDX-equalHousing,
#IDX-main .idx-equal-housing,
#IDX-main .IDX-equal-housing {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ============================================================
   15. PRODUCTION DOM EXTENSIONS — Verified Selectors
   Added after auditing live IDX Broker DOM. These extend existing
   selector groups for elements confirmed present in production but
   not covered by sections 1–14. No speculative selectors.
   ============================================================ */

/* --- Mobile nav select dropdown (map search page) --- */
.idx-nav-button-container-mobile select {
  font-family: var(--cl-font-body) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--cl-charcoal) !important;
  background-color: var(--cl-white) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  width: 100% !important;
  cursor: pointer !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* --- Results page refinement bar (Price / Beds / Baths / More dropdowns) --- */
/* Override §3 .IDX-searchForm styling on the refinement form — remove the
   40px padding, border, and box-shadow that create the "giant white container".
   Use #IDX-main prefix for higher specificity (2,0,0) to beat IDX Broker's
   default #IDX-main .IDX-searchForm rule (1,1,0) that sets display: block. */
#IDX-main .idx-results__refinement {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
}

#IDX-main .idx-results-refinement__title {
  font-family: var(--cl-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--cl-charcoal) !important;
  margin-right: 4px !important;
  flex: 0 0 auto !important;
}

/* Refinement form — override .IDX-searchForm (§3) and IDX Broker defaults.
   #IDX-main #IDX-refinementSearchForm = specificity (2,0,0), beats both
   #IDX-main .IDX-searchForm (1,1,0) and IDX Broker's default rules. */
#IDX-main #IDX-refinementSearchForm,
#IDX-main #IDX-refinementSearchForm.IDX-searchForm {
  background-color: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: 100% !important;
}

/* --- Dropdown containers — size to content, do not stretch --- */
#IDX-main .idx-dropdown,
.idx-results .idx-dropdown {
  position: relative !important;
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
}

/* Dropdown toggle button — extend .IDX-btn-primary styling.
   Use #IDX-main prefix for higher specificity to override IDX Broker defaults. */
#IDX-main .idx-dropdown .IDX-dropdown-toggle,
#IDX-main .idx-dropdown .IDX-btn.IDX-btn-primary.IDX-btn__PL {
  font-family: var(--cl-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  background-color: var(--cl-white) !important;
  color: var(--cl-charcoal) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  padding: 8px 16px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  white-space: nowrap !important;
}

#IDX-main .idx-dropdown .IDX-dropdown-toggle:hover,
#IDX-main .idx-dropdown .IDX-btn.IDX-btn-primary.IDX-btn__PL:hover {
  border-color: var(--cl-gold) !important;
  color: var(--cl-gold) !important;
  background-color: var(--cl-white) !important;
}

/* Dropdown toggle arrow */
#IDX-main .idx-dropdown .IDX-dropdown-toggle .fa,
#IDX-main .idx-dropdown .IDX-dropdown-toggle i.fa {
  font-size: 10px !important;
  color: var(--cl-charcoal) !important;
  margin-left: 4px !important;
}

#IDX-main .idx-dropdown .IDX-dropdown-toggle:hover .fa,
#IDX-main .idx-dropdown .IDX-dropdown-toggle:hover i.fa {
  color: var(--cl-gold) !important;
}

/* --- Apply Filters & Save Search CTAs — prevent full-width stretching.
   These buttons must have intentional CTA widths, not flex:1 or width:100%.
   #IDX-main form .IDX-btn-primary = (1,1,1), but IDX Broker may set
   width:100% with higher specificity, so we use #IDX-main prefix + ID/form
   context to win. */
#IDX-main #IDX-refinementSearchForm input[type="submit"],
#IDX-main #IDX-refinementSearchForm button[type="submit"],
#IDX-main #IDX-refinementSearchForm .IDX-btn-primary:not(.IDX-dropdown-toggle),
#IDX-main .idx-results__refinement .IDX-btn-primary:not(.IDX-dropdown-toggle),
#IDX-main #IDX-saveSearch,
.idx-results #IDX-saveSearch {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 140px !important;
  max-width: 220px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* --- Dropdown menu panel --- */
.idx-dropdown__menu {
  background-color: var(--cl-white) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 30px rgba(26, 26, 26, 0.12) !important;
  padding: 16px !important;
  min-width: 220px !important;
  z-index: 100 !important;
}

.idx-dropdown__menu fieldset {
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.idx-dropdown__menu legend {
  font-family: var(--cl-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--cl-charcoal) !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
}

/* --- Custom radio button labels (Beds / Baths selectors) --- */
.IDX-custom-form-element__label {
  font-family: var(--cl-font-body) !important;
  font-size: 13px !important;
  color: var(--cl-dark) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 4px 0 !important;
  transition: color 0.3s ease !important;
}

.IDX-custom-form-element__label:hover {
  color: var(--cl-gold) !important;
}

/* Custom radio button visual box */
.IDX-radio-button__box {
  width: 16px !important;
  height: 16px !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  background-color: var(--cl-white) !important;
  transition: all 0.3s ease !important;
}

/* Checked state — gold fill */
.idx-form__group input[type="radio"]:checked + .IDX-custom-form-element__label .IDX-radio-button__box {
  border-color: var(--cl-gold) !important;
  background-color: var(--cl-gold) !important;
}

/* --- Form groups in dropdowns --- */
.idx-form__group {
  font-family: var(--cl-font-body) !important;
  margin-bottom: 8px !important;
}

.idx-form__group--inline {
  display: inline-flex !important;
  align-items: center !important;
  margin-right: 16px !important;
  margin-bottom: 8px !important;
}

/* --- Form control (refinement selects) --- */
.IDX-form-control {
  font-family: var(--cl-font-body) !important;
  font-size: 14px !important;
  color: var(--cl-dark) !important;
  background-color: var(--cl-white) !important;
  border: 1px solid rgba(26, 26, 26, 0.15) !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  outline: none !important;
  box-shadow: none !important;
}

.IDX-form-control:focus {
  border-color: var(--cl-gold) !important;
  box-shadow: 0 0 0 1px var(--cl-gold) !important;
}

/* --- Refinement dropdown text inputs (min/max price) --- */
.idx-dropdown__menu input[type="text"] {
  font-family: var(--cl-font-body) !important;
  font-size: 14px !important;
  color: var(--cl-dark) !important;
  background-color: var(--cl-white) !important;
  border: 1px solid rgba(26, 26, 26, 0.15) !important;
  border-radius: 0 !important;
  padding: 8px 12px !important;
  outline: none !important;
  box-shadow: none !important;
  width: 100% !important;
  margin-bottom: 8px !important;
}

.idx-dropdown__menu input[type="text"]:focus {
  border-color: var(--cl-gold) !important;
  box-shadow: 0 0 0 1px var(--cl-gold) !important;
}

/* --- Desktop spacing tightening (search page) --- */
@media (min-width: 769px) {
  #IDX-searchPageWrapper {
    padding: 32px 24px !important;
  }

  /* Only the ADVANCED search form should get 32px padding — NOT the refinement
     form on the results page, which must stay borderless and compact. */
  #IDX-searchForm,
  #IDX-searchPageWrapper .IDX-searchForm {
    padding: 32px !important;
  }

  .idx-nav-button {
    padding: 14px 24px !important;
  }
}

/* --- Desktop refinement toolbar (≥1024px) — single horizontal row --- */
@media (min-width: 1024px) {
  #IDX-main .idx-results__refinement {
    flex-wrap: nowrap !important;
    padding: 10px 0 !important;
    gap: 12px !important;
  }

  #IDX-main #IDX-refinementSearchForm,
  #IDX-main #IDX-refinementSearchForm.IDX-searchForm {
    flex-wrap: nowrap !important;
    gap: 12px !important;
  }

  /* Dropdowns size to content on desktop */
  #IDX-main .idx-dropdown,
  .idx-results .idx-dropdown {
    flex: 0 0 auto !important;
  }

  /* CTAs have intentional widths, not full-width */
  #IDX-main #IDX-refinementSearchForm input[type="submit"],
  #IDX-main #IDX-refinementSearchForm button[type="submit"],
  #IDX-main #IDX-refinementSearchForm .IDX-btn-primary:not(.IDX-dropdown-toggle),
  #IDX-main .idx-results__refinement .IDX-btn-primary:not(.IDX-dropdown-toggle),
  #IDX-main #IDX-saveSearch,
  .idx-results #IDX-saveSearch {
    flex: 0 0 auto !important;
    width: auto !important;
  }
}

/* --- Tablet (769–1023px) — controlled two-row layout --- */
@media (min-width: 769px) and (max-width: 1023px) {
  #IDX-main .idx-results__refinement {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  #IDX-main #IDX-refinementSearchForm,
  #IDX-main #IDX-refinementSearchForm.IDX-searchForm {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
}

/* --- Mobile spacing (≤768px) — stacking is acceptable --- */
@media (max-width: 768px) {
  #IDX-main .idx-results__refinement {
    padding: 10px 0 !important;
    gap: 8px !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #IDX-main #IDX-refinementSearchForm,
  #IDX-main #IDX-refinementSearchForm.IDX-searchForm {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #IDX-main .idx-dropdown,
  .idx-results .idx-dropdown {
    width: 100% !important;
  }

  #IDX-main .idx-dropdown .IDX-dropdown-toggle,
  #IDX-main .idx-dropdown .IDX-btn.IDX-btn-primary.IDX-btn__PL {
    padding: 10px 14px !important;
    font-size: 10px !important;
    width: 100% !important;
    justify-content: center !important;
  }

  #IDX-main .idx-dropdown__menu {
    min-width: unset !important;
    width: 100% !important;
    max-width: 100vw !important;
    padding: 12px !important;
  }

  #IDX-main .idx-form__group--inline {
    margin-right: 10px !important;
    margin-bottom: 6px !important;
  }

  /* CTAs full-width on mobile for adequate tap targets */
  #IDX-main #IDX-refinementSearchForm input[type="submit"],
  #IDX-main #IDX-refinementSearchForm button[type="submit"],
  #IDX-main #IDX-refinementSearchForm .IDX-btn-primary:not(.IDX-dropdown-toggle),
  #IDX-main .idx-results__refinement .IDX-btn-primary:not(.IDX-dropdown-toggle),
  #IDX-main #IDX-saveSearch,
  .idx-results #IDX-saveSearch {
    width: 100% !important;
    max-width: 100% !important;
    min-width: unset !important;
  }
}

/* ============================================================
   16. CITY DETAIL & BROWSE-BY-CITY DIRECTORY PAGES
   Scoped exclusively to IDX page-type classes:
   - IDX-page-homesforsale  → /idx/city-c047-{City}-{ID}
   - IDX-page-searchbycity  → /idx/searchbycity/
   These selectors DO NOT affect results, search, map, listing detail,
   or any other IDX page type. Verified against production DOM.
   ============================================================ */

/* --- Shared content shell — centered, max-width, breathing room --- */
#IDX-main.IDX-page-homesforsale .IDX-pageContainer,
#IDX-main.IDX-page-searchbycity .IDX-pageContainer {
  max-width: 1320px !important;
  margin: 0 auto !important;
  padding: 48px 40px 64px 40px !important;
  background-color: transparent !important;
}

/* ============================================================
   16a. CITY DETAIL PAGE — /idx/city-c047-{City}-{ID}
   DOM: #IDX-homesForSaleContainer > h1 + #IDX-homesForSale (ul)
        ul contains h2.IDX-homesForSalePropType + li.IDX-hfsIncrement-*
   ============================================================ */

/* H1 — editorial serif with gold eyebrow */
#IDX-main.IDX-page-homesforsale #IDX-homesForSaleContainer > h1 {
  font-family: var(--cl-font-display) !important;
  font-size: clamp(2.25rem, 5vw, 3.75rem) !important;
  font-weight: 400 !important;
  color: var(--cl-charcoal) !important;
  text-align: center !important;
  margin: 0 0 3rem 0 !important;
  line-height: 1.1 !important;
}

#IDX-main.IDX-page-homesforsale #IDX-homesForSaleContainer > h1::before {
  content: "Property Search";
  display: block;
  font-family: var(--cl-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4em !important;
  text-transform: uppercase !important;
  color: var(--cl-gold) !important;
  margin-bottom: 14px !important;
}

/* Category headings — Residential / Farm / Land Properties */
#IDX-main.IDX-page-homesforsale .IDX-homesForSalePropType {
  font-family: var(--cl-font-display) !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  color: var(--cl-charcoal) !important;
  margin: 2.5rem 0 1rem 0 !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid var(--cl-border) !important;
  line-height: 1.2 !important;
}

/* First category heading — no extra top margin */
#IDX-main.IDX-page-homesforsale #IDX-homesForSale .IDX-homesForSalePropType:first-child {
  margin-top: 0 !important;
}

/* List — remove bullets and default padding */
#IDX-main.IDX-page-homesforsale #IDX-homesForSale {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* List items — clean card/row treatment */
#IDX-main.IDX-page-homesforsale #IDX-homesForSale > li {
  background-color: var(--cl-white) !important;
  border: 1px solid var(--cl-border) !important;
  margin-bottom: 8px !important;
  list-style: none !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

#IDX-main.IDX-page-homesforsale #IDX-homesForSale > li:hover {
  border-color: var(--cl-gold) !important;
  box-shadow: 0 2px 12px rgba(197, 160, 89, 0.08) !important;
}

/* Links inside list items — full-width clickable rows */
#IDX-main.IDX-page-homesforsale #IDX-homesForSale > li > a {
  display: block !important;
  padding: 14px 20px !important;
  font-family: var(--cl-font-body) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--cl-charcoal) !important;
  text-decoration: none !important;
  transition: color 0.3s ease, background-color 0.3s ease !important;
  line-height: 1.5 !important;
}

#IDX-main.IDX-page-homesforsale #IDX-homesForSale > li > a:hover {
  color: var(--cl-gold) !important;
  background-color: var(--cl-ivory) !important;
}

/* Attribution — intentional spacing, branded link */
#IDX-main.IDX-page-homesforsale > div[style*="text-align:center"] {
  font-family: var(--cl-font-body) !important;
  font-size: 11px !important;
  color: var(--cl-muted) !important;
  padding: 40px 0 16px 0 !important;
  text-align: center !important;
}

#IDX-main.IDX-page-homesforsale > div[style*="text-align:center"] a {
  color: var(--cl-gold) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

#IDX-main.IDX-page-homesforsale > div[style*="text-align:center"] a:hover {
  color: var(--cl-gold-dark) !important;
}

/* ============================================================
   16b. BROWSE-BY-CITY DIRECTORY — /idx/searchbycity/
   DOM: #IDX-searchByCityContainer > ul (top link) + a[name] + h2
        + ul#IDX-searchByCity-c047.IDX-searchByCityList (> li > a)
   ============================================================ */

/* Top "Browse by City" link — eyebrow style */
#IDX-main.IDX-page-searchbycity #IDX-searchByCityContainer > ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 2rem 0 !important;
  text-align: center !important;
}

#IDX-main.IDX-page-searchbycity #IDX-searchByCityContainer > ul > li {
  list-style: none !important;
}

#IDX-main.IDX-page-searchbycity #IDX-searchByCityContainer > ul > li > a {
  font-family: var(--cl-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3em !important;
  text-transform: uppercase !important;
  color: var(--cl-gold) !important;
  text-decoration: none !important;
  transition: color 0.3s ease !important;
}

#IDX-main.IDX-page-searchbycity #IDX-searchByCityContainer > ul > li > a:hover {
  color: var(--cl-gold-dark) !important;
}

/* "Real Estate in local MLS" — section heading */
#IDX-main.IDX-page-searchbycity #IDX-searchByCityContainer > h2 {
  font-family: var(--cl-font-display) !important;
  font-size: clamp(1.75rem, 4vw, 2.75rem) !important;
  font-weight: 400 !important;
  color: var(--cl-charcoal) !important;
  text-align: center !important;
  margin: 0 0 2.5rem 0 !important;
  line-height: 1.1 !important;
}

/* City directory list — multi-column responsive grid */
#IDX-main.IDX-page-searchbycity .IDX-searchByCityList {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 0 24px !important;
}

/* City list items — clean rows with bottom dividers */
#IDX-main.IDX-page-searchbycity .IDX-searchByCityList > li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border-bottom: 1px solid var(--cl-border) !important;
}

/* City links — comfortable padding, readable typography */
#IDX-main.IDX-page-searchbycity .IDX-searchByCityList > li > a {
  display: block !important;
  padding: 10px 4px !important;
  font-family: var(--cl-font-body) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: var(--cl-charcoal) !important;
  text-decoration: none !important;
  transition: color 0.2s ease, background-color 0.2s ease !important;
  line-height: 1.4 !important;
  word-break: break-word !important;
}

#IDX-main.IDX-page-searchbycity .IDX-searchByCityList > li > a:hover,
#IDX-main.IDX-page-searchbycity .IDX-searchByCityList > li > a:focus {
  color: var(--cl-gold) !important;
  background-color: var(--cl-ivory) !important;
}

/* --- Responsive: directory columns --- */
/* 3 columns on normal desktop (≤1279px) */
@media (max-width: 1279px) {
  #IDX-main.IDX-page-searchbycity .IDX-searchByCityList {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 2 columns on tablet (≤1023px) */
@media (max-width: 1023px) {
  #IDX-main.IDX-page-searchbycity .IDX-searchByCityList {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* 1 column on mobile (≤767px) */
@media (max-width: 767px) {
  #IDX-main.IDX-page-homesforsale .IDX-pageContainer,
  #IDX-main.IDX-page-searchbycity .IDX-pageContainer {
    padding: 32px 20px 48px 20px !important;
  }

  #IDX-main.IDX-page-searchbycity .IDX-searchByCityList {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }

  /* City detail H1 — smaller on mobile */
  #IDX-main.IDX-page-homesforsale #IDX-homesForSaleContainer > h1 {
    font-size: clamp(1.75rem, 6vw, 2.5rem) !important;
    margin-bottom: 2rem !important;
  }

  /* Category headings — smaller on mobile */
  #IDX-main.IDX-page-homesforsale .IDX-homesForSalePropType {
    font-size: 1.3rem !important;
    margin-top: 2rem !important;
  }
}

/* ============================================================
   17. REGISTRATION MODAL — Signup/Login Popup
   ============================================================
   Targets the jQuery UI Dialog (.ui-dialog.IDX-registrationModal)
   that IDX Broker injects as a BODY-LEVEL sibling of #IDX-main,
   NOT inside #IDX-main. This is why the existing #IDX-main-scoped
   button/form overrides in Sections 2 and 9 do NOT reach the modal.

   Production DOM (verified from live fetch):
   <div class="ui-dialog ... IDX-registrationModal">
     <div class="ui-dialog-titlebar ...">
       <span class="ui-dialog-title">Sign Up</span>
       <a class="ui-dialog-titlebar-close"><span class="ui-icon ui-icon-closethick">close</span></a>
     </div>
     <div id="IDX-registration" class="ui-dialog-content ...">
       <div id="IDX-registrationContent">
         <div id="IDX-registrationSignup" class="IDX-signupLoginContent">
           <p>To create an account, fill out the following form:</p>
           <form id="IDX-signupForm" class="IDX-form IDX-modalForm">
             <div class="IDX-customRegistrationFields">
               <div class="IDX-control-group">
                 <label class="IDX-control-label">First Name<span class="IDX-required">*</span></label>
                 <div class="IDX-controls"><input class="IDX-input"></div>
               </div>
             </div>
             <p class="IDX-googleRecaptchaPolicy">This site is protected by reCAPTCHA ...</p>
             <div class="IDX-form-actions">
               <button id="IDX-submitBtn" class="IDX-btn IDX-btn-primary" data-theme="b">Sign Up!</button>
             </div>
             <div id="IDX-leadSignUpLogin" class="IDX-signupLoginToggleWrap">
               <a id="IDX-toggleLogIn" class="IDX-signupLoginToggle"><span>Log in</span></a>
             </div>
           </form>
         </div>
         <div id="IDX-registrationLogin" class="IDX-signupLoginContent" style="display:none;">
           ... (#IDX-loginForm, #IDX-loginSubmit, #IDX-toggleSignUp) ...
         </div>
       </div>
     </div>
   </div>
   <div class="ui-widget-overlay"></div>
   NOTE: #IDX-registrationDefaultMessage appears in Request/Force
   registration modes and contains the "click this link" skip text.
   ============================================================ */

/* --- Modal Overlay --- */
.ui-widget-overlay {
  background-color: rgba(26, 26, 26, 0.55) !important;
  background-image: none !important;
  opacity: 1 !important;
  z-index: 999 !important;
}

/* --- Modal Container --- */
.ui-dialog.IDX-registrationModal {
  font-family: var(--cl-font-body) !important;
  background-color: var(--cl-white) !important;
  color: var(--cl-dark) !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: 0 8px 60px rgba(26, 26, 26, 0.15), 0 2px 20px rgba(197, 160, 89, 0.06) !important;
  max-width: 480px !important;
  width: calc(100% - 32px) !important;
  overflow: hidden !important;
}

/* --- Modal Header / Titlebar --- */
.ui-dialog.IDX-registrationModal .ui-dialog-titlebar {
  font-family: var(--cl-font-body) !important;
  background-color: var(--cl-white) !important;
  color: var(--cl-dark) !important;
  border: none !important;
  border-bottom: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  padding: 24px 28px 16px !important;
  min-height: auto !important;
  position: relative !important;
}

/* --- Modal Title --- */
.ui-dialog.IDX-registrationModal .ui-dialog-title {
  font-family: var(--cl-font-editorial) !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  color: var(--cl-dark) !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  line-height: 1.2 !important;
  display: block !important;
}

/* --- Close Button (×) — 40×40 tap target --- */
.ui-dialog.IDX-registrationModal .ui-dialog-titlebar-close {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border: 1px solid var(--cl-border) !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  margin: 0 !important;
  top: 18px !important;
  right: 18px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: border-color 0.3s ease, background-color 0.3s ease !important;
}

.ui-dialog.IDX-registrationModal .ui-dialog-titlebar-close:hover,
.ui-dialog.IDX-registrationModal .ui-dialog-titlebar-close:focus {
  border-color: var(--cl-gold) !important;
  background-color: var(--cl-ivory) !important;
}

/* Replace jQuery UI's blue closethick sprite with a CSS × */
.ui-dialog.IDX-registrationModal .ui-dialog-titlebar-close .ui-icon {
  background-image: none !important;
  width: 16px !important;
  height: 16px !important;
  text-indent: 0 !important;
  background: transparent !important;
}

.ui-dialog.IDX-registrationModal .ui-dialog-titlebar-close .ui-icon-closethick::before {
  content: '\00d7' !important;
  display: block !important;
  font-size: 20px !important;
  line-height: 1 !important;
  color: var(--cl-dark) !important;
  font-family: var(--cl-font-body) !important;
}

/* --- Modal Content --- */
.ui-dialog.IDX-registrationModal #IDX-registration {
  background-color: var(--cl-white) !important;
  color: var(--cl-dark) !important;
  border: none !important;
  padding: 24px 28px 28px !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

.ui-dialog.IDX-registrationModal #IDX-registrationContent {
  background: transparent !important;
}

/* --- Intro Copy --- */
.ui-dialog.IDX-registrationModal #IDX-registrationSignup > p,
.ui-dialog.IDX-registrationModal #IDX-registrationLogin > p,
.ui-dialog.IDX-registrationModal #IDX-registrationDefaultMessage {
  font-family: var(--cl-font-body) !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
  color: var(--cl-text-muted) !important;
  margin: 0 0 20px 0 !important;
  padding: 0 !important;
}

/* Links inside intro copy / default message */
.ui-dialog.IDX-registrationModal #IDX-registrationDefaultMessage a,
.ui-dialog.IDX-registrationModal #IDX-registrationSignup > p a,
.ui-dialog.IDX-registrationModal #IDX-registrationLogin > p a {
  color: var(--cl-gold) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--cl-gold) !important;
  transition: color 0.3s ease, border-color 0.3s ease !important;
}

.ui-dialog.IDX-registrationModal #IDX-registrationDefaultMessage a:hover,
.ui-dialog.IDX-registrationModal #IDX-registrationSignup > p a:hover,
.ui-dialog.IDX-registrationModal #IDX-registrationLogin > p a:hover {
  color: var(--cl-gold-dark) !important;
  border-bottom-color: var(--cl-gold-dark) !important;
}

/* --- Form --- */
.ui-dialog.IDX-registrationModal #IDX-signupForm,
.ui-dialog.IDX-registrationModal #IDX-loginForm {
  font-family: var(--cl-font-body) !important;
  margin: 0 !important;
  padding: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
}

.ui-dialog.IDX-registrationModal .IDX-customRegistrationFields {
  margin: 0 !important;
  padding: 0 !important;
}

/* --- Field Groups — tighter spacing --- */
.ui-dialog.IDX-registrationModal .IDX-control-group {
  margin-bottom: 16px !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* --- Form Labels — uppercase/letter-spaced --- */
.ui-dialog.IDX-registrationModal .IDX-control-label {
  font-family: var(--cl-font-body) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--cl-charcoal) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.ui-dialog.IDX-registrationModal .IDX-required {
  color: var(--cl-gold) !important;
  margin-left: 2px !important;
}

/* --- Text Inputs — full width, 44px min height --- */
.ui-dialog.IDX-registrationModal .IDX-input,
.ui-dialog.IDX-registrationModal input[type="text"],
.ui-dialog.IDX-registrationModal input[type="email"],
.ui-dialog.IDX-registrationModal input[type="password"],
.ui-dialog.IDX-registrationModal input[type="tel"] {
  font-family: var(--cl-font-body) !important;
  font-size: 15px !important;
  color: var(--cl-dark) !important;
  background-color: var(--cl-white) !important;
  border: 1px solid rgba(26, 26, 26, 0.15) !important;
  border-radius: 0 !important;
  padding: 10px 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  outline: none !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}

.ui-dialog.IDX-registrationModal .IDX-input:focus,
.ui-dialog.IDX-registrationModal input[type="text"]:focus,
.ui-dialog.IDX-registrationModal input[type="email"]:focus,
.ui-dialog.IDX-registrationModal input[type="password"]:focus,
.ui-dialog.IDX-registrationModal input[type="tel"]:focus {
  border-color: var(--cl-gold) !important;
  box-shadow: 0 0 0 1px var(--cl-gold) !important;
}

/* Keep Me Logged In */
.ui-dialog.IDX-registrationModal #IDX-keepLoggedIn {
  margin: 12px 0 16px !important;
  font-family: var(--cl-font-body) !important;
  font-size: 13px !important;
  color: var(--cl-text-muted) !important;
}

.ui-dialog.IDX-registrationModal .IDX-keepLoggedInCheckBox {
  accent-color: var(--cl-gold) !important;
  margin-right: 6px !important;
}

/* --- reCAPTCHA Disclosure — muted, small, centered --- */
.ui-dialog.IDX-registrationModal .IDX-googleRecaptchaPolicy {
  font-family: var(--cl-font-body) !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  color: rgba(26, 26, 26, 0.4) !important;
  text-align: center !important;
  margin: 16px 0 20px 0 !important;
  padding: 0 8px !important;
}

.ui-dialog.IDX-registrationModal .IDX-googleRecaptchaPolicy a {
  color: rgba(26, 26, 26, 0.5) !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color 0.3s ease !important;
}

.ui-dialog.IDX-registrationModal .IDX-googleRecaptchaPolicy a:hover {
  color: var(--cl-gold) !important;
}

/* --- Form Actions --- */
.ui-dialog.IDX-registrationModal .IDX-form-actions {
  margin: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

/* --- Primary Sign Up / Log In Button --- */
/* HIGH SPECIFICITY: ID + class to override jQuery UI data-theme="b" blue
   and IDX default .IDX-btn-primary blue. Modal is outside #IDX-main so
   Section 2's #IDX-main-scoped override does NOT reach these buttons. */
.ui-dialog.IDX-registrationModal #IDX-submitBtn,
.ui-dialog.IDX-registrationModal #IDX-loginSubmit,
.ui-dialog.IDX-registrationModal .IDX-form-actions .IDX-btn.IDX-btn-primary {
  font-family: var(--cl-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  background-color: var(--cl-charcoal) !important;
  background-image: none !important;
  color: var(--cl-white) !important;
  border: 1px solid var(--cl-charcoal) !important;
  border-radius: 0 !important;
  padding: 0 28px !important;
  min-height: 48px !important;
  height: 48px !important;
  width: 100% !important;
  max-width: 100% !important;
  cursor: pointer !important;
  transition: background-color 0.3s ease, border-color 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  line-height: 1.4 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

.ui-dialog.IDX-registrationModal #IDX-submitBtn:hover,
.ui-dialog.IDX-registrationModal #IDX-loginSubmit:hover,
.ui-dialog.IDX-registrationModal .IDX-form-actions .IDX-btn.IDX-btn-primary:hover {
  background-color: var(--cl-gold) !important;
  border-color: var(--cl-gold) !important;
  color: var(--cl-white) !important;
}

.ui-dialog.IDX-registrationModal #IDX-submitBtn:focus-visible,
.ui-dialog.IDX-registrationModal #IDX-loginSubmit:focus-visible {
  outline: 2px solid var(--cl-gold) !important;
  outline-offset: 2px !important;
}

/* --- Login / Sign Up Toggle Links — secondary action --- */
.ui-dialog.IDX-registrationModal #IDX-leadSignUpLogin,
.ui-dialog.IDX-registrationModal #IDX-loginSignupToggle {
  margin: 20px 0 0 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.ui-dialog.IDX-registrationModal #IDX-leadSignUpLogin p,
.ui-dialog.IDX-registrationModal #IDX-loginSignupToggle p {
  margin: 0 !important;
  padding: 0 !important;
}

.ui-dialog.IDX-registrationModal #IDX-toggleLogIn,
.ui-dialog.IDX-registrationModal #IDX-toggleSignUp {
  font-family: var(--cl-font-body) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--cl-charcoal) !important;
  text-decoration: none !important;
  border: 1px solid var(--cl-border) !important;
  padding: 10px 24px !important;
  display: inline-block !important;
  transition: border-color 0.3s ease, color 0.3s ease !important;
  cursor: pointer !important;
}

.ui-dialog.IDX-registrationModal #IDX-toggleLogIn:hover,
.ui-dialog.IDX-registrationModal #IDX-toggleSignUp:hover {
  border-color: var(--cl-gold) !important;
  color: var(--cl-gold) !important;
  background-color: transparent !important;
}

/* --- Form Response --- */
.ui-dialog.IDX-registrationModal .IDX-formResponse {
  margin: 0 0 12px 0 !important;
  padding: 0 !important;
  font-family: var(--cl-font-body) !important;
  font-size: 13px !important;
}

/* ============================================================
   17B. REGISTRATION MODAL — Mobile (<=768px)
   ============================================================ */
@media (max-width: 768px) {
  .ui-dialog.IDX-registrationModal {
    width: calc(100% - 24px) !important;
    max-width: 420px !important;
    max-height: calc(100dvh - 32px) !important;
    margin: 0 auto !important;
    position: fixed !important;
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .ui-dialog.IDX-registrationModal .ui-dialog-titlebar {
    padding: 18px 20px 12px !important;
  }

  .ui-dialog.IDX-registrationModal .ui-dialog-title {
    font-size: 28px !important;
  }

  .ui-dialog.IDX-registrationModal .ui-dialog-titlebar-close {
    top: 14px !important;
    right: 14px !important;
  }

  .ui-dialog.IDX-registrationModal #IDX-registration {
    padding: 18px 20px 22px !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-height: calc(100dvh - 100px) !important;
  }

  .ui-dialog.IDX-registrationModal #IDX-registrationSignup > p,
  .ui-dialog.IDX-registrationModal #IDX-registrationLogin > p,
  .ui-dialog.IDX-registrationModal #IDX-registrationDefaultMessage {
    font-size: 14px !important;
    line-height: 1.55 !important;
    margin-bottom: 16px !important;
  }

  .ui-dialog.IDX-registrationModal .IDX-control-group {
    margin-bottom: 14px !important;
  }

  .ui-dialog.IDX-registrationModal .IDX-input,
  .ui-dialog.IDX-registrationModal input[type="text"],
  .ui-dialog.IDX-registrationModal input[type="email"],
  .ui-dialog.IDX-registrationModal input[type="password"],
  .ui-dialog.IDX-registrationModal input[type="tel"] {
    font-size: 16px !important;
    min-height: 44px !important;
  }

  .ui-dialog.IDX-registrationModal #IDX-submitBtn,
  .ui-dialog.IDX-registrationModal #IDX-loginSubmit,
  .ui-dialog.IDX-registrationModal .IDX-form-actions .IDX-btn.IDX-btn-primary {
    min-height: 48px !important;
    height: 48px !important;
  }

  .ui-dialog.IDX-registrationModal .IDX-googleRecaptchaPolicy {
    font-size: 11px !important;
    margin: 14px 0 18px 0 !important;
  }
}

/* ============================================================
   17C. SHORT-HEIGHT DEVICES (<=667px viewport height)
   ============================================================ */
@media (max-height: 667px) {
  .ui-dialog.IDX-registrationModal {
    max-height: calc(100dvh - 24px) !important;
    top: 12px !important;
  }

  .ui-dialog.IDX-registrationModal .ui-dialog-titlebar {
    padding: 14px 20px 10px !important;
  }

  .ui-dialog.IDX-registrationModal .ui-dialog-title {
    font-size: 24px !important;
  }

  .ui-dialog.IDX-registrationModal #IDX-registration {
    padding: 14px 20px 18px !important;
    max-height: calc(100dvh - 80px) !important;
  }

  .ui-dialog.IDX-registrationModal .IDX-control-group {
    margin-bottom: 12px !important;
  }

  .ui-dialog.IDX-registrationModal #IDX-registrationSignup > p,
  .ui-dialog.IDX-registrationModal #IDX-registrationLogin > p,
  .ui-dialog.IDX-registrationModal #IDX-registrationDefaultMessage {
    margin-bottom: 12px !important;
  }

  .ui-dialog.IDX-registrationModal .IDX-googleRecaptchaPolicy {
    margin: 10px 0 14px 0 !important;
  }
}