/*
==========================================================================
Widgets: Sidebar
1. Base styles
2. Dark Mode Support
3. Accessibility and Hover Enhancements
==========================================================================
*/

/* ==========================================================================
   1. Base styles
========================================================================== */
.idx-sidebar {
  margin-bottom: 2em;
  padding: 1em;
  background: var(--surface-soft);
  border-radius: var(--radius-1, 6px);
  box-shadow: var(--shadow-sm);
  /* Moved here for grouping */
}

.idx-widget {
  margin-bottom: 1.5em;
}

/* ==========================================================================
   2. Dark Mode Support
========================================================================== */

/* ==========================================================================
   3. IDX Property Listings Widget Customization
========================================================================== */

/* IDX Widget Container */
.idx-broker-platinum-widget,
.idx-listings-container {
  margin: 2rem 0 !important;
  overflow: hidden !important;
  border-radius: var(--radius-2) !important;
  box-shadow: var(--shadow-md) !important;
}

/* IDX Property Cards */
.idx-property-card,
.idx-listing-item {
  overflow: hidden !important;
  background: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-1) !important;
  transition:
    transform var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease),
    box-shadow var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease),
    border-color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease),
    background-color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease) !important;
}

.idx-property-card:hover,
.idx-listing-item:hover {
  border-color: var(--kaplon-blue) !important;
  box-shadow: var(--shadow-lift-md) !important;
  transform: translateY(-2px) !important;
}

/* IDX Property Prices */
.idx-price,
.idx-listing-price {
  color: var(--kaplon-blue) !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
}

/* IDX Property Details */
.idx-property-details,
.idx-listing-details {
  color: var(--text-color) !important;
  font-size: 0.9rem !important;
}

/* IDX View Details Buttons */
/* Important: exclude overlay anchors used on cards */
.idx-view-details,
.idx-btn,
/* Avoid tinting full-card overlay links on map results */
a[href*="idx/details"]:not(.idx-property-card__link):not([class*="listing-card__image--link"]):not(.IDX-resultsPhotoLink):not(.IDX-resultsAddressLink):not(.IDX-carouselLink) {
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 42px;
  padding: 0.5rem 1rem !important;
  background: var(--kaplon-blue) !important;
  border: none !important;
  border-radius: var(--radius-1, 6px) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
  line-height: 1.15;
  text-align: center !important;
  text-decoration: none !important;
  transition:
    background-color var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease),
    filter var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease),
    transform var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease),
    box-shadow var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease) !important;
}

.idx-view-details:hover,
.idx-btn:hover,
:where(a[href*="idx/details"]:not(.idx-property-card__link):not([class*="listing-card__image--link"]):not(.IDX-resultsPhotoLink):not(.IDX-resultsAddressLink):not(.IDX-carouselLink)):hover {
  background: var(--kaplon-blue) !important;
  box-shadow: var(--shadow-lift-sm) !important;
  transform: translateY(-1px) !important;
  filter: brightness(1.1) !important;
}

/* Similar Listings/Card grids: ensure overlay link doesn't expand container */
.idx-similar-listings .idx-property-card__wrap,
.idx-property-card__wrap {
  position: relative;
}

.idx-property-card__link {
  display: block !important;
  margin: 0 !important;
  /* Global reset so full-card overlay anchors never pick up button styles */
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  text-decoration: none !important;
}

.idx-property-card__link:hover,
.idx-property-card__link:focus,
.idx-property-card__link:active {
  box-shadow: none !important;
  color: inherit !important;
  text-decoration: none !important;
  outline: 0 !important;
}

.idx-similar-listings .idx-property-card__link {
  display: block !important;
  margin: 0 !important;
  /* Constrain overlay anchors; no spacing or button styles */
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}

/* Ensure images don’t leave inline gap and fill container */
.idx-property-card__image--wrap img,
.idx-property-card__image {
  display: block;
  width: 100%;
  height: auto;
}

/* (Removed conflicting overlay approach for details to avoid layout clashes) */

/* IDX MLS Logo Styling */
.idx-mls-logo,
img[src*="mls-logo"] {
  opacity: 0.7 !important;
  transition: opacity var(--anim-duration-fast, 0.2s) var(--anim-ease-standard, ease) !important;
}

.idx-mls-logo:hover,
img[src*="mls-logo"]:hover {
  opacity: 1 !important;
}

/* IDX Property Images */
.idx-property-image img,
.idx-listing-image img {
  transition: transform var(--anim-duration-normal, 0.3s) var(--anim-ease-standard, ease) !important;
}

.idx-property-image:hover img,
.idx-listing-image:hover img {
  transform: scale(1.05) !important;
}

/* IDX Property Status Badges */
.idx-status-active {
  padding: 0.25rem 0.5rem !important;
  background: var(--success-color) !important;
  border-radius: var(--radius-1) !important;
  color: var(--white) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

.idx-status-pending {
  background: var(--warning-color) !important;
  color: var(--gray-900) !important;
}

.idx-status-sold {
  background: var(--error-color) !important;
  color: var(--white) !important;
}

/* Extended statuses */
.idx-status-comingsoon {
  background: var(--kaplon-blue) !important;
  color: var(--white) !important;
}

.idx-status-cancelled {
  background: var(--gray-700) !important;
  color: var(--white) !important;
}

.idx-status-withdrawn {
  background: var(--gray-600) !important;
  color: var(--white) !important;
}

/* ==========================================================================
   4. IDX Advanced Search Controls Text Fix
========================================================================== */

/* IDX Advanced Search Form Controls */
.idx-adv-halfBaths,
.idx-adv-fullBaths,
.idx-adv-bedrooms,
.idx-adv-minPrice,
.idx-adv-maxPrice,
.idx-adv-propertyType,
.idx-adv-sqft,
.idx-adv-acres,
div[class*="idx-adv-"] {
  color: var(--text-color) !important;
}

/* IDX Form Labels and Text */
div[class*="idx-adv-"] label,
div[class*="idx-adv-"] span,
div[class*="idx-adv-"] input,
div[class*="idx-adv-"] select,
div[class*="idx-adv-"] option {
  color: var(--gray-900) !important;
  font-weight: 500 !important;
}

/* IDX Form Input Fields */
div[class*="idx-adv-"] input[type="text"],
div[class*="idx-adv-"] input[type="number"],
div[class*="idx-adv-"] select {
  background-color: var(--white) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-color) !important;
}

/* 5. IDX Similar Listings: reverted to original vendor behavior (no overrides here) */

/* ==========================================================================
   6. Cookie Consent Vendors (moved from buttons.css)
   Purpose: unify cookie banner buttons to match theme branding
   ========================================================================== */

/* Base style for CookieYes buttons (modern .cky-* API and containers) */
.cky-btn,
.cky-button,
.cky-notice-group button,
.cky-notice button,
.cky-banner button,
.cky-modal button,
.cky-consent-container button,
.cky-consent-bar button,
.cookieyes-banner button,
.cookieyes-modal button,
[data-cookieyes*="banner"] button,
[data-cookieyes*="modal"] button,
[class*="cky-"] button {
  position: relative !important;
  z-index: 1 !important;
  display: inline-flex !important;
  justify-content: center !important;
  align-items: center !important;
  min-height: 42px !important;
  padding: var(--btn-padding) !important;
  background: var(--button-red-bg) !important;
  background-image: none !important;
  border: none !important;
  border-radius: var(--btn-radius) !important;
  box-shadow: var(--shadow-xs) !important;
  color: var(--white) !important;
  font: inherit !important;
  font-size: 0.95rem !important;
  font-weight: var(--btn-font-weight) !important;
  line-height: 1.15 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-shadow: 1px 1px 2px var(--kaplon-black) !important;
  letter-spacing: var(--ls-tight) !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition:
    background-color var(--anim-duration-normal, 0.3s) var(--anim-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
    color var(--anim-duration-normal, 0.3s) var(--anim-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
    border-color var(--anim-duration-normal, 0.3s) var(--anim-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
    box-shadow var(--anim-duration-normal, 0.3s) var(--anim-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)),
    transform var(--anim-duration-normal, 0.3s) var(--anim-ease-standard, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

.cky-btn::before,
.cky-button::before,
.cky-notice-group button::before,
.cky-notice button::before,
.cky-banner button::before,
.cky-modal button::before,
.cky-consent-container button::before,
.cky-consent-bar button::before,
.cookieyes-banner button::before,
.cookieyes-modal button::before,
[data-cookieyes*="banner"] button::before,
[data-cookieyes*="modal"] button::before,
[class*="cky-"] button::before {
  content: none !important;
}

.cky-btn:hover,
.cky-button:hover,
.cky-notice-group button:hover,
.cky-notice button:hover,
.cky-banner button:hover,
.cky-modal button:hover,
.cky-consent-container button:hover,
.cky-consent-bar button:hover,
.cookieyes-banner button:hover,
.cookieyes-modal button:hover,
[data-cookieyes*="banner"] button:hover,
[data-cookieyes*="modal"] button:hover,
[class*="cky-"] button:hover {
  background-color: var(--kaplon-blue) !important;
  color: var(--white) !important;
  transform: translateY(-1px) !important;
}

.cky-btn:active,
.cky-button:active,
.cky-notice-group button:active,
.cky-notice button:active,
.cky-banner button:active,
.cky-modal button:active,
.cky-consent-container button:active,
.cky-consent-bar button:active,
.cookieyes-banner button:active,
.cookieyes-modal button:active,
[data-cookieyes*="banner"] button:active,
[data-cookieyes*="modal"] button:active,
[class*="cky-"] button:active {
  transform: translateY(1px) !important;
}

.cky-btn[disabled],
.cky-button[disabled],
.cky-notice-group button[disabled],
.cky-notice button[disabled],
.cky-banner button[disabled],
.cky-modal button[disabled],
.cky-consent-container button[disabled],
.cky-consent-bar button[disabled],
.cookieyes-banner button[disabled],
.cookieyes-modal button[disabled],
[data-cookieyes*="banner"] button[disabled],
[data-cookieyes*="modal"] button[disabled],
[class*="cky-"] button[disabled],
.cky-btn[aria-disabled="true"],
.cky-button[aria-disabled="true"],
[class*="cky-"] button[aria-disabled="true"] {
  opacity: 0.6 !important;
  background-color: var(--gray-600) !important;
  box-shadow: none !important;
  color: var(--gray-200) !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
}

.cky-btn:focus-visible,
.cky-button:focus-visible,
.cky-notice-group button:focus-visible,
.cky-notice button:focus-visible,
.cky-banner button:focus-visible,
.cky-modal button:focus-visible,
.cky-consent-container button:focus-visible,
.cky-consent-bar button:focus-visible,
.cookieyes-banner button:focus-visible,
.cookieyes-modal button:focus-visible,
[data-cookieyes*="banner"] button:focus-visible,
[data-cookieyes*="modal"] button:focus-visible,
[class*="cky-"] button:focus-visible {
  position: relative !important;
  z-index: 2 !important;
  box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--kaplon-blue) !important;
  outline: none !important;
}

/* stylelint-disable selector-max-id */
/* Cookie Law Info (legacy CookieYes) */
:where(#cookie-law-info-bar, .cli-bar-container, .cli-modal) :where(.cli-btn, .cli-settings-button, .wt-cli-accept-all-btn, .wt-cli-reject-btn, .cli-plugin-main .cli_action_button, button, a) {
  background-color: var(--button-red-bg) !important;
  border: 1px solid var(--button-red-border) !important;
  border-radius: var(--btn-radius);
  color: var(--white) !important;
  text-shadow: none !important;
}

/* Complianz */
:where(#cmplz-cookiebanner) :where(.cmplz-btn, .cmplz-accept, .cmplz-deny, .cmplz-manage-options, button, a) {
  background-color: var(--button-red-bg) !important;
  border: 1px solid var(--button-red-border) !important;
  border-radius: var(--btn-radius);
  color: var(--white) !important;
}

/* Cookiebot */
:where(#CybotCookiebotDialog) :where(.CybotCookiebotDialogBodyButton, .CybotCookiebotDialogBodyLevelButton, button, a) {
  background-color: var(--button-red-bg) !important;
  border: 1px solid var(--button-red-border) !important;
  border-radius: var(--btn-radius);
  color: var(--white) !important;
}

/* Cookie Notice (dFactory) */
:where(#cookie-notice) :where(.cn-button, .cn-more-info, button, a) {
  background-color: var(--button-red-bg) !important;
  border: 1px solid var(--button-red-border) !important;
  border-radius: var(--btn-radius);
  color: var(--white) !important;
}

/* Real Cookie Banner */
:where(.rcb-consent-bar, .rcb-modal) :where(.rcb-consent-button, .rcb-button, button, a) {
  background-color: var(--button-red-bg) !important;
  border: 1px solid var(--button-red-border) !important;
  border-radius: var(--btn-radius);
  color: var(--white) !important;
}

/* Remove decorative borders/frames for cookie buttons (all vendors) */
:where(#cookie-law-info-bar, .cli-bar-container, .cli-modal, #cmplz-cookiebanner, #CybotCookiebotDialog, #cookie-notice, .rcb-consent-bar, .rcb-modal, .cky-notice-group, .cky-notice, .cky-banner, .cky-modal, .cky-consent-container, .cky-consent-bar, .cookieyes-banner, .cookieyes-modal, [data-cookieyes*="banner"], [data-cookieyes*="modal"]) :where(.cli-btn, .cmplz-btn, .CybotCookiebotDialogBodyButton, .rcb-consent-button, .cn-button, .cky-btn, .cky-button, button, a)::before {
  content: none !important;
}

/* Unified hover (brand blue) for all cookie vendors) */
:where(#cookie-law-info-bar, .cli-bar-container, .cli-modal, #cmplz-cookiebanner, #CybotCookiebotDialog, #cookie-notice, .rcb-consent-bar, .rcb-modal, .cky-notice-group, .cky-notice, .cky-banner, .cky-modal, .cky-consent-container, .cky-consent-bar, .cookieyes-banner, .cookieyes-modal, [data-cookieyes*="banner"], [data-cookieyes*="modal"]) :where(.cli-btn, .cmplz-btn, .CybotCookiebotDialogBodyButton, .rcb-consent-button, .cn-button, .cky-btn, .cky-button, button, a):hover {
  background-color: var(--kaplon-blue) !important;
  border-color: var(--kaplon-blue) !important;
  color: var(--white) !important;
}

/* stylelint-enable selector-max-id */

/* ========================================================================
   7. Toasts & Notifications (scoped)
   Purpose: Position IDX/WP toast containers bottom-right with tokenized UI
   ======================================================================== */

.IDX-wrapper-standard .idx-toast-container,
.IDX-wrapper-standard .IDX-toast-container,
.IDX-wrapper-standard .toast-container {
  position: fixed;
  right: clamp(12px, 2vw, 20px);
  bottom: clamp(12px, 2vw, 20px);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  pointer-events: none;
  gap: 8px;
}

.IDX-wrapper-standard .idx-toast,
.IDX-wrapper-standard .IDX-toast,
.IDX-wrapper-standard .toast {
  display: inline-flex;
  align-items: center;
  max-width: min(92vw, 420px);
  padding: 10px 14px;
  background: var(--surface-soft);
  border: 1px solid var(--gray-border);
  border-radius: var(--radius-2, 8px);
  box-shadow: var(--shadow-md);
  color: var(--gray-900);
  font-size: 0.95rem;
  line-height: 1.3;
  pointer-events: auto;
}

/* Optional icon/emoji sizing */
.IDX-wrapper-standard :where(.idx-toast .emoji, .IDX-toast .emoji, .toast .emoji) {
  margin-right: 6px;
  font-size: 1.1em;
  line-height: 1;
}

/* Close affordance alignment */
.IDX-wrapper-standard :where(.idx-toast__close, .IDX-toast__close, .toast .close, .toast [data-dismiss]) {
  margin-left: 10px;
  background: transparent;
  border: 0;
  color: inherit;
}

.IDX-wrapper-standard :where(.idx-toast__close, .IDX-toast__close, .toast .close, .toast [data-dismiss]):focus-visible {
  outline: 2px solid var(--kaplon-blue);
  outline-offset: 2px;
}

/* ========================================================================
   8. Floating Action Button (FAB)
   Purpose: Ensure FAB stays visible above overlays with brand styling
   ======================================================================== */

.IDX-wrapper-standard .idx-fab,
.IDX-wrapper-standard .IDX-fab,
.IDX-wrapper-standard .floating-action,
.IDX-wrapper-standard .fab {
  position: fixed;
  right: clamp(12px, 2vw, 20px);
  bottom: clamp(72px, 6vh, 96px);
  z-index: 10000;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 56px;
  height: 56px;
  background: var(--button-red-bg);
  border: none;
  border-radius: 50%;
  box-shadow: var(--shadow-lg);
  color: var(--white);
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.IDX-wrapper-standard :where(.idx-fab, .IDX-fab, .floating-action, .fab):hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-1px);
  filter: brightness(1.05);
}

.IDX-wrapper-standard :where(.idx-fab, .IDX-fab, .floating-action, .fab):focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}

@media (prefers-color-scheme: dark) {
  html[data-kaplon-color-mode=system] .idx-sidebar {
    background: var(--gray-900);
    color: var(--gray-200);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .idx-toast,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .IDX-toast,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .toast {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    box-shadow: var(--shadow-dark-sm);
    color: var(--text-primary-dark);
  }

  html[data-kaplon-color-mode=system] .IDX-wrapper-standard .idx-fab,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .IDX-fab,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .floating-action,html[data-kaplon-color-mode=system] 
  .IDX-wrapper-standard .fab {
    background: var(--button-red-bg);
    box-shadow: var(--shadow-dark-lg);
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .idx-listings-showcase__header {
    background: var(--gray-900);
    border-color: var(--gray-border-dark);
    box-shadow: var(--shadow-dark-sm);
    color: var(--white-90);
  }

  html[data-kaplon-color-mode=system] .idx-listings-showcase__header-text {
    color: var(--white);
    text-shadow: var(--shadow-text-soft);
  }

  html[data-kaplon-color-mode=system] .idx-listings-showcase__header>a {
    background: var(--kaplon-red);
    border-color: var(--kaplon-red);
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .idx-listings-showcase__header>a:where(:hover, :focus-visible) {
    background: color-mix(in oklab, var(--kaplon-red) 88%, black);
    border-color: color-mix(in oklab, var(--kaplon-red) 88%, black);
    color: var(--white);
  }

  html[data-kaplon-color-mode=system] .idx-listings-showcase,html[data-kaplon-color-mode=system] 
  .page-content-wrap .idx-listings-showcase {
    background: var(--gray-900) !important;
    border: 1px solid var(--gray-border-dark) !important;
    box-shadow: var(--shadow-dark-sm) !important;
    color: var(--white-90) !important;
  }
}

html[data-kaplon-color-mode=dark] .idx-sidebar {
    background: var(--gray-900);
    color: var(--gray-200);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .idx-toast,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .IDX-toast,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .toast {
    background: var(--dark-surface);
    border-color: var(--dark-border);
    box-shadow: var(--shadow-dark-sm);
    color: var(--text-primary-dark);
  }

html[data-kaplon-color-mode=dark] .IDX-wrapper-standard .idx-fab,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .IDX-fab,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .floating-action,html[data-kaplon-color-mode=dark] 
  .IDX-wrapper-standard .fab {
    background: var(--button-red-bg);
    box-shadow: var(--shadow-dark-lg);
    color: var(--white);
  }

html[data-kaplon-color-mode=dark] .idx-listings-showcase__header {
    background: var(--gray-900);
    border-color: var(--gray-border-dark);
    box-shadow: var(--shadow-dark-sm);
    color: var(--white-90);
  }

html[data-kaplon-color-mode=dark] .idx-listings-showcase__header-text {
    color: var(--white);
    text-shadow: var(--shadow-text-soft);
  }

html[data-kaplon-color-mode=dark] .idx-listings-showcase__header>a {
    background: var(--kaplon-red);
    border-color: var(--kaplon-red);
    color: var(--white);
  }

html[data-kaplon-color-mode=dark] .idx-listings-showcase__header>a:where(:hover, :focus-visible) {
    background: color-mix(in oklab, var(--kaplon-red) 88%, black);
    border-color: color-mix(in oklab, var(--kaplon-red) 88%, black);
    color: var(--white);
  }

html[data-kaplon-color-mode=dark] .idx-listings-showcase,html[data-kaplon-color-mode=dark] 
  .page-content-wrap .idx-listings-showcase {
    background: var(--gray-900) !important;
    border: 1px solid var(--gray-border-dark) !important;
    box-shadow: var(--shadow-dark-sm) !important;
    color: var(--white-90) !important;
  }