/**

 * @file

 * Search Results Page: 3-Column Layout, Rail Columns & Search Row

 * SMIP EC Knowledge Hub module.

 */


/**
 * @file
 * Search Results Page Stylesheet (3-Column Layout, Filters, Results Cards, Loader)
 * SMIP EC Knowledge Hub module.
 */

/* ==========================================================================
   Search Results Page: 3-Column Layout
   ========================================================================== */
.ecl-results-page-layout {
  width: 100%;
  padding: 0 0 64px 0;
  background: #FFFFFF;
  background-color: #FFFFFF;
  box-sizing: border-box;
  min-height: 80vh;
  /* Sticky search-only header: pad-top 64 + search row 64 + pad-bottom 20 */
  --ecl-results-search-sticky-offset: 148px;
}


/* Keep only the dialog above the page veil. Elevating the filter column or
 * dropdown creates a stacking context that leaves the breadcrumb/search header
 * visibly above the backdrop. */
html body .ecl-results-page__col--filters.ecl-filter-modal-active,
html body .ecl-results-page__col--filters:has(.ecl-custom-dropdown.is-open),
html body .ecl-custom-dropdown.is-open,
html body .ecl-filter-group {
  z-index: auto !important;
}

html body .ecl-results-page__col--filters.ecl-filter-modal-active::after {
  display: none !important;
}

/* Legacy search-header z-indexes must not place the results controls above the
 * modal backdrop at any viewport size. */
html body.ecl-filter-modal-open .ecl-results-page__search-row,
html body.ecl-filter-modal-open .ecl-results-page__search-row .ecl-results-page__search-wrap,
html body.ecl-filter-modal-open .ecl-results-page__search-wrap,
html body.ecl-filter-modal-open .ecl-search-box-wrapper,
html body.ecl-filter-modal-open .ecl-results-page__search-fixed-header,
html body.ecl-filter-modal-open .ecl-results-fixed-header {
  z-index: auto !important;
}

.ecl-results-page__breadcrumb-row {
  display: none !important;
}

.ecl-results-page__container {
  width: 100% !important;
  max-width: 1440px !important;
  margin: 0 auto !important;
  padding: 20px 48px 0 48px !important;
  display: grid !important;
  grid-template-columns: 318px minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: flex-start !important;
  box-sizing: border-box !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* Map Toggle: Main area maintains full width next to filters; Map is inside the content row */
.ecl-results-page-layout.is-map-hidden .ecl-results-page__container {
  grid-template-columns: 318px minmax(0, 1fr) !important;
}

.ecl-results-page-layout.is-map-hidden .ecl-results-page__col--map {
  display: none !important;
}

/* Column 1: Left Filter Panel
 * Sticky rail must keep overflow:visible so sticky stays tied to the viewport.
 * Internal clipping/scroll lives on .ecl-filter-panel instead. */
.ecl-results-page__col--filters {
  width: 318px !important;
  max-width: 318px !important;
  box-sizing: border-box !important;
  position: sticky !important;
  top: 20px !important;
  align-self: flex-start !important;
  height: auto !important;
  max-height: calc(100vh - 40px) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  z-index: 40 !important;
}

/* Keep the left filter rail painted & sticky behind drawer / filter-modal overlays.
 * Never use overflow:hidden on html/body for these states — it unsticks this rail. */
body.ecl-drawer-open .ecl-results-page__col--filters,
html.ecl-drawer-open .ecl-results-page__col--filters,
body.ecl-filter-modal-open .ecl-results-page__col--filters,
html.ecl-filter-modal-open .ecl-results-page__col--filters {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: sticky !important;
  top: 20px !important;
  z-index: 40 !important;
  overflow: visible !important;
  height: auto !important;
  max-height: calc(100vh - 40px) !important;
  pointer-events: auto !important;
}

.ecl-results-page__filter-breadcrumb {
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
  background: #FFFFFF !important;
  width: 100% !important;
  height: 20px !important;
  padding: 0 0 24px 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  box-sizing: content-box !important;
}

.ecl-results-page__filter-breadcrumb .ecl-breadcrumb {
  margin-bottom: 0 !important;
  padding: 0 !important;
  height: 20px !important;
  line-height: 20px !important;
}

/* Column 2: Center Main Content (Flows naturally with window scrollbar, no fixed height) */
.ecl-results-page__col--main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  box-sizing: border-box !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  position: static !important;
}

/* Fixed Search & Relevance Header Container (Sticky at top: 0, unified row) */
.ecl-results-page__search-fixed-header {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 100 !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  padding-top: 64px !important;
  /* Bottom spacing lives INSIDE the sticky box (padding, not margin) so the opaque
     background covers it and results are clipped below the gap while scrolling. */
  padding-bottom: 20px !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-top: -20px !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  isolation: isolate !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

/* Active Filters live in the middle panel column only (see .ecl-results-middle-col). */

.ecl-results-page__search-fixed-header.is-stuck {
  border-bottom: none !important;
  box-shadow: none !important;
}

.ecl-results-page__search-fixed-header::after {
  display: none !important;
}

/* Extends the header's solid background slightly beyond the column on both sides so the
   scrolling results card's side box-shadow is hidden next to/above the search bar. */
.ecl-results-page__search-fixed-header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  bottom: 0 !important;
  left: -16px !important;
  right: -16px !important;
  background: #FFFFFF !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

.ecl-results-page__search-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  position: relative !important;
  z-index: 150 !important;
  overflow: visible !important;
}

.ecl-results-page__search-row .ecl-results-page__search-wrap {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  position: relative !important;
  z-index: 150 !important;
}

.ecl-results-page__search-wrap {
  width: 100% !important;
  position: relative !important;
  z-index: 150 !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Distinct Results Body (Flows naturally with the page body, no internal scrollbar) */
.ecl-results-page__results-scroll-body {
  width: 100% !important;
  flex: 0 1 auto !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ecl-ai-overview,
.ecl-results-list,
.ecl-result-card,
.ecl-results-middle-col,
.ecl-results-page__col--map {
  scroll-margin-top: var(--ecl-results-search-sticky-offset, 148px) !important;
}

.ecl-results-page__search-wrap .ecl-search-box-wrapper {
  position: relative !important;
  z-index: 150 !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

.ecl-results-page__search-wrap .ecl-search-box-wrapper.is-dropdown-open,
.ecl-results-page__search-wrap .ecl-search-box-wrapper:focus-within,
.ecl-results-page__search-wrap:focus-within,
.ecl-results-page__search-row:focus-within {
  z-index: 300 !important;
}

.ecl-results-page__search-wrap .ecl-recent-searches-dropdown {
  z-index: 999 !important;
}

.ecl-results-page__search-wrap .ecl-search-form__clear-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  color: var(--ec-color-disable-text, #696984) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  flex: 0 0 28px !important;
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.1s ease !important;
}

.ecl-results-page__search-wrap .ecl-search-form__clear-btn:hover {
  background-color: rgba(0, 0, 46, 0.07) !important;
  color: var(--ec-color-text, #00002E) !important;
}

.ecl-results-page__search-wrap .ecl-search-form__clear-btn:active {
  transform: scale(0.92) !important;
}

.ecl-results-page__search-wrap .ecl-search-form__clear-btn.is-hidden,
.ecl-results-page__search-wrap .ecl-search-form__clear-btn[hidden] {
  display: none !important;
  visibility: hidden !important;
}

.ecl-results-page__search-wrap .ecl-search-form {
  width: 100% !important;
  max-width: 100% !important;
}

.ecl-results-page__search-wrap .ecl-search-form__inner {
  width: 100% !important;
  max-width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  background: var(--ec-color-white, #FFFFFF) !important;
  border: 1px solid var(--Border-border-grey, #696984) !important;
  border-radius: 4px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: none !important;
  opacity: 1 !important;
  transition: border-color 0.15s ease !important;
}

.ecl-results-page__search-wrap .ecl-search-form__inner:focus-within {
  border-color: var(--ec-color-primary, #0046FF) !important;
  box-shadow: 0 0 0 1px var(--ec-color-primary, #0046FF) !important;
}

.ecl-results-page__search-wrap .ecl-search-form__icon-wrapper {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  margin-left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ecl-results-page__search-wrap .ecl-search-form__icon {
  width: 24px !important;
  height: 24px !important;
}

.ecl-results-page__search-wrap .ecl-search-form__text-input,
.ecl-results-page__search-wrap .ecl-search-form__inner input.ecl-search-form__text-input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 100% !important;
  border: none !important;
  border-right: none !important;
  border-left: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: 18px !important;
  line-height: 28px !important;
  color: var(--ec-color-text, #00002E) !important;
}

.ecl-results-page__search-wrap .ecl-search-form__text-input::placeholder {
  font-size: 18px !important;
  line-height: 28px !important;
  color: var(--ec-color-text-secondary, #696984) !important;
}

.ecl-results-page__search-wrap .ecl-search-form__button,
.ecl-results-page__search-wrap button.ecl-search-form__button {
  width: 85px !important;
  height: 40px !important;
  min-width: 85px !important;
  max-height: 40px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  gap: 8px !important;
  border-radius: var(--Radius-s, 4px) !important;
  background: var(--ec-color-search-button, #FFBE5C) !important;
  background-color: var(--ec-color-search-button, #FFBE5C) !important;
  border: none !important;
  border-width: 0 !important;
  border-left: none !important;
  border-right: none !important;
  outline: none !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 85px !important;
  box-shadow: none !important;
  transition: opacity 0.15s ease, transform 0.1s ease !important;
}

.ecl-results-page__search-wrap .ecl-search-form__button::before,
.ecl-results-page__search-wrap .ecl-search-form__button::after,
.ecl-results-page__search-wrap button.ecl-search-form__button::before,
.ecl-results-page__search-wrap button.ecl-search-form__button::after {
  display: none !important;
  content: none !important;
  border: none !important;
}

.ecl-results-page__search-wrap .ecl-search-form__button:hover {
  opacity: 0.9 !important;
}

.ecl-results-page__search-wrap .ecl-search-form__button:active {
  transform: translateY(1px) !important;
}

.ecl-results-page__search-wrap .ecl-search-form__button:disabled,
.ecl-results-page__search-wrap .ecl-search-form__button.is-disabled,
.ecl-results-page__search-wrap button.ecl-search-form__button:disabled,
.ecl-results-page__search-wrap button.ecl-search-form__button.is-disabled {
  background: var(--ec-color-button-disabled, #FFF5E5) !important;
  background-color: var(--ec-color-button-disabled, #FFF5E5) !important;
  color: var(--ec-color-button-disabled-text, #84849B) !important;
  border: none !important;
  border-left: none !important;
  border-right: none !important;
  outline: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transform: none !important;
}

.ecl-results-page__search-wrap .ecl-search-form__button:disabled .ecl-search-form__button-label,
.ecl-results-page__search-wrap .ecl-search-form__button.is-disabled .ecl-search-form__button-label {
  color: var(--ec-color-button-disabled-text, #84849B) !important;
}

.ecl-results-page__search-wrap .ecl-search-form__button-label {
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-size: var(--Font-size-s, 14px) !important;
  line-height: var(--Line-height-s, 20px) !important;
  font-weight: 400 !important;
  color: var(--ec-color-text, #00002E) !important;
  text-align: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

.ecl-results-page__search-wrap .ecl-search-form__divider-wrap,
.ecl-results-page__search-wrap .ecl-search-form__vdivider {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0 !important;
}

/* Map Toggle Button (outside search bar, right side).
   Closed: grey border + dark icon.
   Active (map open): accent border + icon (#FFBE5C). */
.ecl-results-page__map-toggle-btn {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  padding: 0 !important;
  box-sizing: border-box !important;
  background: transparent !important;
  border: 1px solid var(--Border-border-grey, #696984) !important;
  border-radius: var(--Radius-s, 4px) !important;
  cursor: pointer !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease !important;
  flex-shrink: 0 !important;
}

.ecl-results-page__map-toggle-icon-wrap {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 22px !important;
  height: 22px !important;
}

/* Location count badge over the map icon */
.ecl-results-page__map-location-badge {
  position: absolute !important;
  top: -8px !important;
  right: -10px !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  min-width: 22px !important;
  height: 19px !important;
  padding: 2px 4px !important;
  gap: 8px !important;
  border-radius: var(--Radius-s, 4px) !important;
  background: var(--ec-color-tab, #FFDBBA) !important;
  box-shadow: 0 2px 3px 0 var(--ECEffectElevation03, rgba(0, 0, 46, 0.16)) !important;
  color: var(--ec-color-text, #00002E) !important;
  font-family: var(--Font-family-inter), 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-align: center !important;
  pointer-events: none !important;
}

.ecl-results-page__map-location-badge[hidden] {
  display: none !important;
}

.ecl-results-page__map-toggle-btn:hover {
  background: transparent !important;
  border-color: var(--Border-border-grey, #696984) !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
}

.ecl-results-page__map-toggle-btn:hover .ecl-results-page__map-icon {
  stroke: var(--On-surface-on-surface-brand, #00002E) !important;
}

/* Active (map open): accent border + icon; background stays transparent */
.ecl-results-page__map-toggle-btn.is-active {
  background: transparent !important;
  border-color: var(--ec-color-search-button, #FFBE5C) !important;
  color: var(--ec-color-search-button, #FFBE5C) !important;
}

.ecl-results-page__map-toggle-btn.is-active .ecl-results-page__map-icon {
  stroke: var(--ec-color-search-button, #FFBE5C) !important;
}

.ecl-results-page__map-toggle-btn.is-active:hover {
  border-color: var(--ec-color-search-button, #FFBE5C) !important;
  color: var(--ec-color-search-button, #FFBE5C) !important;
}

.ecl-results-page__map-toggle-btn.is-active:hover .ecl-results-page__map-icon {
  stroke: var(--ec-color-search-button, #FFBE5C) !important;
}

/* Focus must not restyle / disturb the button — only a subtle ring */
.ecl-results-page__map-toggle-btn:focus,
.ecl-results-page__map-toggle-btn:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.ecl-results-page__map-toggle-btn:focus-visible:not(.is-active) {
  border-color: var(--Border-border-grey, #696984) !important;
  color: var(--On-surface-on-surface-brand, #00002E) !important;
}

.ecl-results-page__map-icon {
  width: 22px !important;
  height: 22px !important;
  stroke: var(--On-surface-on-surface-brand, #00002E) !important;
  stroke-width: 2px !important;
  flex-shrink: 0 !important;
  transition: stroke 0.15s ease !important;
}

/* Right Map Panel: sticky under the search bar — same top as the middle panel when scrolled */
.ecl-results-page__col--map {
  width: 318px !important;
  max-width: 318px !important;
  min-width: 318px !important;
  flex: 0 0 318px !important;
  box-sizing: border-box !important;
  position: sticky !important;
  top: var(--ecl-results-search-sticky-offset, 148px) !important;
  margin-top: 0 !important;
  align-self: flex-start !important;
  height: calc(100vh - var(--ecl-results-search-sticky-offset, 148px) - 20px) !important;
  max-height: calc(100vh - var(--ecl-results-search-sticky-offset, 148px) - 20px) !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  border-radius: var(--Radius-s, 4px) !important;
  z-index: 20 !important;
}


/* ==========================================================================
   Center Results List & Cards (ecl-results-card-wrapper)
   ========================================================================== */
.ecl-results-list-container {
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  position: relative !important;
  z-index: 1 !important;
  isolation: isolate !important;
  box-sizing: border-box !important;
}

.ecl-results-main-row {
  width: 100% !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 24px !important;
  box-sizing: border-box !important;
}

.ecl-results-main-row .ecl-results-middle-col,
.ecl-results-main-row .ecl-results-content-stack {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.ecl-results-main-row .ecl-results-middle-col {
  display: flex !important;
  flex-direction: column !important;
  /* Gap between Active Filter → results found → content stack */
  gap: 0 !important;
}

/* Applied filters + results found: constrained to middle panel width, not over the map */
.ecl-results-middle-col > .ecl-active-filters {
  width: 100% !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.ecl-results-middle-col > .ecl-active-filters[hidden] {
  display: none !important;
  margin: 0 !important;
}

.ecl-results-middle-col > .ecl-results-top-bar {
  width: 100% !important;
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  /* Equal gap above + below the results-found bar */
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

.ecl-results-middle-col > .ecl-active-filters:not([hidden]) + .ecl-results-top-bar {
  margin-top: 12px !important;
}

.ecl-results-page-layout.is-map-hidden .ecl-results-main-row .ecl-results-middle-col,
.ecl-results-page-layout.is-map-hidden .ecl-results-main-row .ecl-results-content-stack {
  width: 100% !important;
}

.ecl-results-card-wrapper {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  background: var(--Surface-surface-white, #FFFFFF);
  border: 0;
  border-radius: 0;
  overflow: hidden;
  opacity: 1;
  box-shadow: none;
  box-sizing: border-box;
}

.ecl-results-content-stack {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border: 1px solid var(--ec-color-filter-border, #EDEDF0);
  border-radius: var(--Radius-s, 4px);
  overflow: hidden !important; /* keep AI overview / cards inside when map is open */
  background: var(--ec-color-white, #FFFFFF);
  box-shadow: none !important;
  box-sizing: border-box;
}

/* Map open: tighten padding so text/cards wrap cleanly in the narrower column */
.ecl-results-page-layout:not(.is-map-hidden) .ecl-ai-overview {
  padding: 20px 16px 24px 16px !important;
}

.ecl-results-page-layout:not(.is-map-hidden) .ecl-result-card {
  padding-left: 20px !important;
  padding-right: 20px !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Map open: keep Coverage / Landcover meta fitting the narrower column. */
.ecl-results-page-layout:not(.is-map-hidden) .ecl-result-card__meta,
.ecl-results-page-layout:not(.is-map-hidden) .ecl-result-card__meta-row--attrs,
.ecl-results-page-layout:not(.is-map-hidden) .ecl-result-card__meta-attrs,
.ecl-results-page-layout:not(.is-map-hidden) .ecl-result-card__meta-pair--nested {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* Map open / narrow column — keep header facts wrapping cleanly next to match badge */
.ecl-results-page-layout:not(.is-map-hidden) .ecl-result-card__header {
  gap: 8px !important;
}

.ecl-results-page-layout:not(.is-map-hidden) .ecl-result-card__facts {
  flex: 1 1 140px !important;
}

.ecl-results-page-layout:not(.is-map-hidden) .ecl-result-card__match-badge {
  margin-left: 0 !important;
}

/* ==========================================================================
   Results List Top Bar — top + bottom dividers (#D1D9F1), like the design
   ========================================================================== */
.ecl-results-top-bar {
  width: 100% !important;
  height: 40px !important;
  position: relative !important;
  top: auto !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  border-top: 1px solid var(--ec-color-divider, #D1D9F1) !important;
  border-bottom: 1px solid var(--ec-color-divider, #D1D9F1) !important;
  background: transparent !important;
  box-sizing: border-box !important;
  padding: 0 !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}