/* stylelint-disable selector-class-pattern */

/* =========================================================
   JSC COMPONENT CONTRACT
   File: jsc-idx-results-map.css
   Layer: IDX / Results / Map
   Version: 1.2

   OWNS
   - Results page map toggle row
   - Open / Close map button styling
   - Results map wrapper shell
   - Results map card radius, border, spacing
   - Map marker chip styling
   - Info window typography and link color
   - Light polish for embedded Google map controls

   EXPECTS
   - .flexmls_connect__search_results_v2.flexmls-v2-widget
   - .flexmls-actions-wrapper
   - .close-map-button
   - .flexmls-map-wrapper
   - #idx-map
   - .flex-map-markerLabels
   - .flex-map-marker-price
========================================================= */

/* =========================================================
   1) TOGGLE ROW
========================================================= */

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flexmls-actions-wrapper{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 24px;
  padding-top: 8px;
  padding-right: 8px;
}

/* =========================================================
   2) OPEN / CLOSE MAP BUTTON
========================================================= */

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.close-map-button{
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid var(--jsc-divider-dark);
  border-radius: var(--jsc-radius-pill);
  background: rgb(var(--jsc-rgb-white) / var(--jsc-o-92));
  color: var(--jsc-text-on-light);
  font: inherit;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 8px 18px rgb(var(--jsc-rgb-mirage) / var(--jsc-o-08));
  transition:
    transform var(--jsc-fast) var(--jsc-ease),
    background var(--jsc-fast) var(--jsc-ease),
    border-color var(--jsc-fast) var(--jsc-ease),
    box-shadow var(--jsc-fast) var(--jsc-ease),
    color var(--jsc-fast) var(--jsc-ease);
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.close-map-button:hover{
  transform: translateY(-1px);
  background: var(--jsc-surface-light);
  border-color: rgb(var(--jsc-rgb-mirage) / var(--jsc-o-18));
  box-shadow: 0 12px 24px rgb(var(--jsc-rgb-mirage) / var(--jsc-o-10));
  color: var(--jsc-text-on-light);
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.close-map-button:focus-visible{
  outline: var(--jsc-outline-w) solid var(--jsc-focus-strong);
  outline-offset: var(--jsc-outline-offset);
}

/* =========================================================
   3) MAP SHELL
========================================================= */

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flexmls-map-wrapper{
  overflow: hidden;
  padding: 18px;
  margin-bottom: 24px;
  border: 1px solid var(--jsc-divider-accent);
  border-radius: 28px;
  background:
    linear-gradient(
      180deg,
      var(--jsc-surface-light-soft),
      var(--jsc-surface-light-muted)
    );
  box-shadow:
    0 18px 48px rgb(var(--jsc-rgb-black) / var(--jsc-o-10)),
    inset 0 1px 0 rgb(var(--jsc-rgb-white) / var(--jsc-o-42));
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
#idx-map.flex-map{
  min-height: 420px;
  border: 1px solid rgb(var(--jsc-rgb-green-kelp) / var(--jsc-o-08));
  border-radius: 22px;
  background: var(--jsc-surface-light-muted);
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flexmls-map-wrapper .gm-style,
:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flexmls-map-wrapper .gm-style > div:first-child,
:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flexmls-map-wrapper .gm-style iframe{
  border-radius: 22px;
}

/* =========================================================
   4) MARKER CHIPS
========================================================= */

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flex-map-markerLabels{
  overflow: visible !important;
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flex-map-marker-price{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgb(var(--jsc-rgb-sandwisp) / var(--jsc-o-42));
  border-radius: var(--jsc-radius-pill);
  background: rgb(var(--jsc-rgb-sandwisp) / var(--jsc-o-88));
  color: var(--jsc-text-on-light);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  box-shadow: 0 8px 18px rgb(var(--jsc-rgb-mirage) / var(--jsc-o-10));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition:
    transform var(--jsc-fast) var(--jsc-ease),
    box-shadow var(--jsc-fast) var(--jsc-ease),
    background var(--jsc-fast) var(--jsc-ease),
    border-color var(--jsc-fast) var(--jsc-ease);
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flex-map-marker-price:hover{
  transform: translateY(-1px);
  background: rgb(var(--jsc-rgb-sandwisp) / var(--jsc-o-94));
  border-color: rgb(var(--jsc-rgb-sandwisp) / var(--jsc-o-50));
  box-shadow: 0 12px 24px rgb(var(--jsc-rgb-mirage) / var(--jsc-o-12));
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flex-map-marker-price.active{
  background: rgb(var(--jsc-rgb-white) / var(--jsc-o-92));
  border-color: rgb(var(--jsc-rgb-sandwisp) / var(--jsc-o-50));
  color: var(--jsc-text-on-light);
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flex-map-marker-price .arrow{
  display: none;
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flex-map-marker-icon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  opacity: 0.72;
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flex-map-marker-content{
  display: inline-block;
  white-space: nowrap;
}

/* =========================================================
   5) INFO WINDOW
========================================================= */

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.gm-style .gm-style-iw-c{
  padding: 16px !important;
  border-radius: 20px !important;
  background: rgb(var(--jsc-rgb-white) / var(--jsc-o-96)) !important;
  box-shadow: 0 18px 34px rgb(var(--jsc-rgb-black) / var(--jsc-o-15)) !important;
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.gm-style .gm-style-iw-d{
  overflow: auto !important;
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.gm-style .gm-style-iw-tc::after{
  background: rgb(var(--jsc-rgb-white) / var(--jsc-o-96)) !important;
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.gm-style .gm-ui-hover-effect{
  top: 8px !important;
  right: 8px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 999px !important;
  background: rgb(var(--jsc-rgb-mirage) / var(--jsc-o-05)) !important;
  opacity: 1 !important;
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.gm-style .gm-ui-hover-effect span{
  margin: 0 auto !important;
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.gm-style .gm-style-iw-c,
:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.gm-style .gm-style-iw-c *{
  color: var(--jsc-text-on-light);
  font-family: inherit !important;
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.gm-style .gm-style-iw-c a{
  color: var(--jsc-accent-deep) !important;
  text-decoration: none !important;
  transition: color var(--jsc-fast) var(--jsc-ease);
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.gm-style .gm-style-iw-c a:hover{
  color: var(--jsc-mirage) !important;
  text-decoration: underline !important;
}

/* =========================================================
   6) GOOGLE CONTROLS
========================================================= */

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flexmls-map-wrapper .gm-style-mtc button,
:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flexmls-map-wrapper .gm-fullscreen-control,
:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flexmls-map-wrapper .gm-svpc,
:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flexmls-map-wrapper gmp-internal-camera-control button{
  border-radius: 14px !important;
  box-shadow: 0 8px 20px rgb(var(--jsc-rgb-mirage) / var(--jsc-o-10)) !important;
}

:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flexmls-map-wrapper .gm-style-cc,
:is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
.flexmls_connect__search_results_v2.flexmls-v2-widget
.flexmls-map-wrapper .gmnoscreen{
  opacity: 0.88;
}

/* =========================================================
   7) MOBILE
========================================================= */

@media (max-width: 767.98px){
  :is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
  .flexmls_connect__search_results_v2.flexmls-v2-widget
  .flexmls-actions-wrapper{
    margin-top: 16px;
    margin-bottom: 16px;
    padding-top: 4px;
    padding-right: 0;
  }

  :is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
  .flexmls_connect__search_results_v2.flexmls-v2-widget
  .close-map-button{
    min-height: 46px;
    padding: 0 18px;
  }

  :is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
  .flexmls_connect__search_results_v2.flexmls-v2-widget
  .flexmls-map-wrapper{
    padding: 12px;
    margin-bottom: 20px;
    border-radius: 22px;
  }

  :is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
  .flexmls_connect__search_results_v2.flexmls-v2-widget
  #idx-map.flex-map{
    min-height: 320px;
    height: 320px !important;
    border-radius: 18px;
  }

  :is(.jsc-idx-results-shell, body.flexmls_connect__search_results_page)
  .flexmls_connect__search_results_v2.flexmls-v2-widget
  .flex-map-marker-price{
    min-height: 32px;
    padding: 0 12px;
    font-size: 13px;
  }
}