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

/* =========================================================
   JSC COMPONENT CONTRACT
   File: jsc-idx-search-panel.css
   Layer: IDX / Expanded Search Panel
   Version: 1.4

   PURPOSE
   ----------------------------------------------------------------
   Owns:
   - Expanded IDX search panel shell
   - Panel animation
   - FlexMLS widget layout + control styling inside the panel
   - Expanded search card focus states

   ELEMENTOR CLASS MAP
   ----------------------------------------------------------------
   - .jsc-idx-search-panel
   - .jsc-idx-search-panel__inner
   - .jsc-idx-search-panel__card
   - .jsc-idx-search-panel__widget
========================================================= */

/* =========================================================
   0) LOCAL PANEL TOKENS
========================================================= */

/* #region Local Panel Tokens */
:root{
  --jsc-idx-panel-shell-max: 1080px;

  --jsc-idx-panel-page-pad: clamp(14px, 2vw, 28px);

  --jsc-idx-panel-shell-pad: clamp(20px, 1.6vw, 26px);

  --jsc-idx-panel-gap-x: clamp(16px, 1.35vw, 22px);

  --jsc-idx-panel-gap-y: 20px;

  --jsc-idx-panel-control-h: 48px;

  --jsc-idx-panel-control-radius: var(--jsc-radius-lg);

  --jsc-idx-panel-control-radius-lg: 22px;

  --jsc-idx-panel-field-w: clamp(250px, 23vw, 300px);

  --jsc-idx-panel-type-w: clamp(220px, 20vw, 280px);

  --jsc-idx-panel-submit-min: 320px;

  --jsc-idx-panel-location-icon-size: 16px;

  --jsc-idx-panel-location-icon-offset: 20px;

  --jsc-idx-panel-location-pad-left: 64px;

  --jsc-idx-panel-shell-shadow:
    0 18px 40px rgb(var(--jsc-rgb-black) / 10%),
    inset 0 1px 0 rgb(var(--jsc-rgb-white) / 30%);

  --jsc-idx-search-panel-pad-top: 14px;

  --jsc-idx-search-panel-pad-bottom: 18px;

  --jsc-idx-search-card-pad-y: 34px;

  --jsc-idx-search-card-radius: 28px;

  --jsc-idx-search-button-gap: 28px;

  --jsc-idx-card-border-focus: rgb(var(--jsc-rgb-black) / var(--jsc-o-12));

  --jsc-idx-shadow-card:
    0 12px 32px rgb(var(--jsc-rgb-black) / 8%),
    0 2px 6px rgb(var(--jsc-rgb-black) / 4%);

  --jsc-idx-shadow-card-focus:
    0 10px 28px rgb(var(--jsc-rgb-black) / var(--jsc-o-10)),
    0 2px 6px rgb(var(--jsc-rgb-black) / var(--jsc-o-06));
}

/* #endregion Local Panel Tokens */

/* =========================================================
   1) EXPANDED IDX SEARCH PANEL SHELL
========================================================= */

/* #region Expanded IDX Search Panel Shell */
.jsc-idx-search-panel.elementor-element{
  width: 100%;
  padding-inline: var(--jsc-idx-shell-pad-inline);
  padding-top: var(--jsc-idx-search-panel-pad-top);
  padding-bottom: var(--jsc-idx-search-panel-pad-bottom);
  border-top: 1px solid var(--jsc-divider);
  background: rgb(var(--jsc-rgb-mirage) / 3%) !important;
  padding-block: clamp(28px, 4vw, 38px);
  overflow: clip;
  transform-origin: top center;
  transition:
    opacity var(--jsc-idx-med) var(--jsc-idx-ease),
    transform var(--jsc-idx-med) var(--jsc-idx-ease),
    max-height var(--jsc-idx-med) var(--jsc-idx-ease),
    padding-top var(--jsc-idx-med) var(--jsc-idx-ease),
    padding-bottom var(--jsc-idx-med) var(--jsc-idx-ease);
  position: relative;
  z-index: 2;
  pointer-events: auto;
}

.jsc-idx-search-panel[hidden]{
  display: none !important;
}

.jsc-idx-search-panel:not([hidden]){
  animation: jsc-idx-panel-open var(--jsc-idx-med) cubic-bezier(.22, .61, .36, 1);
}

.jsc-idx-search-panel__inner.elementor-element{
  width: 100%;
  max-width: var(--jsc-idx-shell-max);
  margin-inline: auto;
}

.jsc-idx-search-panel__inner.elementor-element,
.jsc-idx-search-panel__card,
.jsc-idx-search-panel__widget,
.jsc-idx-search-panel__widget *{
  pointer-events: auto;
}

.jsc-idx-search-panel__card{
  width: 100%;
  padding-top: var(--jsc-idx-search-card-pad-y);
  border-radius: var(--jsc-idx-search-card-radius);
  background: transparent;
  position: relative;
  z-index: 3;
}

@keyframes jsc-idx-panel-open{
  from{
    opacity: 0;
    transform: translateY(-6px) scale(.98);
  }

  to{
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.jsc-idx-search-panel__widget,
.jsc-idx-search-panel__widget .elementor-widget-container{
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* #endregion Expanded IDX Search Panel Shell */

/* =========================================================
   2) FLEXMLS GLOBAL SAFETY
========================================================= */

/* #region FlexMLS Global Safety */
.jsc-idx-search-panel__widget .flexmls_connect__search,
.jsc-idx-search-panel__widget .flexmls_connect__search *,
.jsc-idx-search-panel__widget .flexmls_connect__search *::before,
.jsc-idx-search-panel__widget .flexmls_connect__search *::after{
  box-sizing: border-box;
}

.jsc-idx-search-panel__widget .flexmls_connect__search{
  color: var(--jsc-text-on-light);
  font-family: inherit !important;
  max-width: none !important;
}

/* REMOVE NON-LAYOUT PLUGIN ITEMS */

.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new .flexmls_connect__search_new_title,
.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new input[type="hidden"],
.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new .query,
.jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__search_new_sort_by,
.jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__search_new_subtypes{
  display: none !important;
}

/* #endregion FlexMLS Global Safety */

/* =========================================================
   3) OUTER WIDGET SHELL
========================================================= */

/* #region Outer Widget Shell */
.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new{
  width: 100% !important;
  max-width: var(--jsc-idx-panel-shell-max) !important;
  margin-inline: auto !important;
  padding: var(--jsc-idx-panel-shell-pad) !important;
  background:
    linear-gradient(
      180deg,
      rgb(var(--jsc-rgb-white) / 95%),
      rgb(var(--jsc-rgb-white) / 88%)
    ) !important;
  border: 1px solid var(--jsc-divider-dark);
  border-radius: 28px;
  box-shadow: var(--jsc-idx-panel-shell-shadow);
  background-color: transparent !important;
  transition:
    box-shadow var(--jsc-idx-med) var(--jsc-idx-ease),
    transform var(--jsc-idx-med) var(--jsc-idx-ease),
    border-color var(--jsc-idx-med) var(--jsc-idx-ease);
}

.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new:focus-within{
  transform: translateY(-2px);
  box-shadow: var(--jsc-idx-shadow-card-focus);
  border-color: var(--jsc-idx-card-border-focus);
}

/* #endregion Outer Widget Shell */

/* =========================================================
   4) FORM LAYOUT
========================================================= */

/* #region Form Layout */
.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form{
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr)
    minmax(0, 1fr) !important;
  grid-template-areas:
    "location location location"
    "price beds type"
    "submit submit submit" !important;
  column-gap: var(--jsc-idx-panel-gap-x) !important;
  row-gap: var(--jsc-idx-panel-gap-y) !important;
  align-items: end !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form::after{
  content: "";
  grid-column: 1 / -1;
  grid-row: 2;
  align-self: start;
  justify-self: stretch;
  height: 1px;
  margin: -9px 0 0;
  pointer-events: none;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgb(var(--jsc-rgb-mirage) / 8%) 14%,
      rgb(var(--jsc-rgb-mirage) / 12%) 50%,
      rgb(var(--jsc-rgb-mirage) / 8%) 86%,
      transparent
    );
}

/* #endregion Form Layout */

/* =========================================================
   5) TYPOGRAPHY + LABEL RHYTHM
========================================================= */

/* #region Typography + Label Rhythm */
.jsc-idx-search-panel__widget .flexmls_connect__search label,
.jsc-idx-search-panel__widget .flexmls_connect__search legend{
  display: block;
  margin: 0 0 7px !important;
  color: var(--jsc-text-on-light);
  font-size: 0.95rem;
  line-height: 1.2;
  font-weight: 600;
}

/* #endregion Typography + Label Rhythm */

/* =========================================================
   6) BASE CONTROL SURFACE
========================================================= */

/* #region Base Control Surface */
.jsc-idx-search-panel__widget .flexmls_connect__search input[type="text"],
.jsc-idx-search-panel__widget .flexmls_connect__search input[type="search"],
.jsc-idx-search-panel__widget .flexmls_connect__search input[type="number"],
.jsc-idx-search-panel__widget .flexmls_connect__search select{
  width: 100%;
  min-width: 0;
  height: var(--jsc-idx-panel-control-h);
  min-height: var(--jsc-idx-panel-control-h);
  padding-inline: var(--jsc-space-md);
  border: 1px solid var(--jsc-divider-dark);
  border-radius: var(--jsc-idx-panel-control-radius);
  background:
    linear-gradient(
      180deg,
      rgb(var(--jsc-rgb-white) / 90%),
      rgb(var(--jsc-rgb-white) / 78%)
    );
  color: var(--jsc-text-on-light);
  box-shadow: inset 0 1px 0 rgb(var(--jsc-rgb-white) / 40%);
  appearance: none;
  transition:
    border-color var(--jsc-fast) var(--jsc-ease),
    box-shadow var(--jsc-fast) var(--jsc-ease),
    background-color var(--jsc-fast) var(--jsc-ease),
    transform var(--jsc-fast) var(--jsc-ease);
}

.jsc-idx-search-panel__widget .flexmls_connect__search input::placeholder{
  color: var(--jsc-text-on-light-muted);
  opacity: 1;
}

.jsc-idx-search-panel__widget .flexmls_connect__search input:hover,
.jsc-idx-search-panel__widget .flexmls_connect__search select:hover{
  border-color: rgb(var(--jsc-rgb-mirage) / 18%);
  background:
    linear-gradient(
      180deg,
      rgb(var(--jsc-rgb-white) / 96%),
      rgb(var(--jsc-rgb-white) / 84%)
    );
}

/* #endregion Base Control Surface */

/* =========================================================
   7) FOCUS SYSTEM
========================================================= */

/* #region Focus System */
.jsc-idx-search-panel__widget .flexmls_connect__search input[type="text"]:focus,
.jsc-idx-search-panel__widget .flexmls_connect__search input[type="search"]:focus,
.jsc-idx-search-panel__widget .flexmls_connect__search input[type="number"]:focus,
.jsc-idx-search-panel__widget .flexmls_connect__search select:focus{
  outline: none;
  border-color: rgb(var(--jsc-rgb-sandwisp) / 30%);
  box-shadow:
    0 0 0 2px rgb(var(--jsc-rgb-sandwisp) / 12%),
    inset 0 1px 0 rgb(var(--jsc-rgb-white) / 42%);
  transform: none;
}

/* #endregion Focus System */

/* =========================================================
   8) GRID AREA ASSIGNMENTS - FLEXMLS OVERRIDES
========================================================= */

/* #region Grid Area Assignments */

/*
  Direct children in this form are:
  1) .flexmls_connect__search_new_title
  2) div.flexmls_connect__search_field                   -> Location
  3) .flexmls_connect__search_new_min_max                -> Price + Beds wrapper
  4) fieldset.flexmls_connect__search_new_property_type  -> Property Type
  5) .flexmls_connect__search_new_links                  -> Submit row
*/

.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > div.flexmls_connect__search_field:nth-of-type(2){
  grid-area: location !important;
  width: 100% !important;
  max-width: var(--jsc-idx-panel-location-max) !important;
  min-width: 0 !important;
  justify-self: center !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > .flexmls_connect__search_new_min_max{
  display: contents !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > .flexmls_connect__search_new_min_max > .flexmls_connect__search_field:nth-child(1){
  grid-area: price !important;
  width: 100% !important;
  max-width: var(--jsc-idx-panel-field-max) !important;
  min-width: 0 !important;
  justify-self: center !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > .flexmls_connect__search_new_min_max > .flexmls_connect__search_field:nth-child(2){
  grid-area: beds !important;
  width: 100% !important;
  max-width: var(--jsc-idx-panel-field-max) !important;
  min-width: 0 !important;
  justify-self: center !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > fieldset.flexmls_connect__search_new_property_type{
  grid-area: type !important;
  width: 100% !important;
  max-width: var(--jsc-idx-panel-field-max) !important;
  min-width: 0 !important;
  justify-self: center !important;
  align-self: end !important;
  padding-left: 30px !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > .flexmls_connect__search_new_links{
  grid-area: submit !important;
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: none !important;
  justify-self: stretch !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding-top: 0 !important;
  margin-top: 0 !important;
  transform: none !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__search_new_links a{
  display: none !important;
}

/* #endregion Grid Area Assignments */

/* =========================================================
   9) HERO LOCATION / SELECT2 - FLEXMLS OVERRIDES
========================================================= */

/* #region Hero Location / select2 Overrides */
.jsc-idx-search-panel__widget .flexmls_connect__search .select2,
.jsc-idx-search-panel__widget .flexmls_connect__search .select2-container,
.jsc-idx-search-panel__widget .flexmls_connect__search .select2-container--default{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search .select2-selection--multiple{
  position: relative !important;
  width: 100% !important;
  min-height: 58px !important;
  border: 1px solid var(--jsc-divider-dark) !important;
  border-radius: var(--jsc-idx-panel-control-radius-lg) !important;
  background:
    linear-gradient(
      180deg,
      rgb(var(--jsc-rgb-white) / 90%),
      rgb(var(--jsc-rgb-white) / 78%)
    ) !important;
  padding:
    12px
    20px
    12px
    var(--jsc-idx-panel-location-pad-left) !important;
  display: flex !important;
  align-items: center !important;
  box-shadow: inset 0 1px 0 rgb(var(--jsc-rgb-white) / 40%) !important;
  transition:
    box-shadow var(--jsc-med) var(--jsc-ease),
    transform var(--jsc-med) var(--jsc-ease),
    border-color var(--jsc-med) var(--jsc-ease);
}

.jsc-idx-search-panel__widget .flexmls_connect__search .select2-container--focus .select2-selection--multiple,
.jsc-idx-search-panel__widget .flexmls_connect__search .select2-selection--multiple:focus-within{
  border-color: rgb(var(--jsc-rgb-sandwisp) / 38%) !important;
  box-shadow:
    0 10px 28px rgb(var(--jsc-rgb-black) / 10%),
    0 0 0 3px rgb(var(--jsc-rgb-sandwisp) / 14%),
    inset 0 1px 0 rgb(var(--jsc-rgb-white) / 60%) !important;
  transform: translateY(-1px);
}

.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > div.flexmls_connect__search_field:nth-of-type(2) .select2,
.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > div.flexmls_connect__search_field:nth-of-type(2) .select2-container,
.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > div.flexmls_connect__search_field:nth-of-type(2) .select2-selection--multiple{
  width: 100% !important;
  max-width: 100% !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > div.flexmls_connect__search_field:nth-of-type(2) .select2-container{
  position: relative !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > div.flexmls_connect__search_field:nth-of-type(2) .select2-selection--multiple::before{
  content: "";
  position: absolute;
  left: var(--jsc-idx-panel-location-icon-offset);
  top: 50%;
  transform: translateY(-50%);
  width: var(--jsc-idx-panel-location-icon-size);
  height: var(--jsc-idx-panel-location-icon-size);
  pointer-events: none;
  opacity: 0.52;
  z-index: 3;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Ccircle cx='7' cy='7' r='4.75' stroke='%23131A2F' stroke-width='1.5'/%3E%3Cpath d='M10.5 10.5L14 14' stroke='%23131A2F' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

.jsc-idx-search-panel__widget .flexmls_connect__search .select2-selection__placeholder{
  color: var(--jsc-text-on-light-muted) !important;
  font-size: 1.05rem !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search .select2-container--focus .select2-selection__placeholder{
  opacity: 0.65;
}

.jsc-idx-search-panel__widget .flexmls_connect__search .select2-selection__rendered{
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: var(--jsc-space-xs) !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search .select2-search--inline{
  float: none !important;
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 120px !important;
  margin: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border: 0 !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search .select2-search__field{
  width: 100% !important;
  min-width: 120px !important;
  height: 54px !important;
  margin: 0 !important;
  padding: 0 !important;
  font: inherit !important;
  font-size: 1.05rem !important;
  color: var(--jsc-text-on-light) !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search .select2-selection__choice{
  margin: 0 !important;
  padding: 7px 11px !important;
  border: 1px solid rgb(var(--jsc-rgb-mirage) / 10%) !important;
  border-radius: var(--jsc-radius-pill) !important;
  background:
    linear-gradient(
      180deg,
      rgb(var(--jsc-rgb-sandwisp) / 18%),
      rgb(var(--jsc-rgb-sandwisp) / 10%)
    ) !important;
  color: var(--jsc-text-on-light) !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search .select2-selection__choice__remove{
  color: var(--jsc-text-on-light-muted) !important;
  margin-right: 6px !important;
}

/* #endregion Hero Location / select2 Overrides */

/* =========================================================
   10) PRICE / BEDS MIN-MAX PAIRS
========================================================= */

/* #region Price / Beds Min-Max Pairs */
.jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__min_max_wrapper{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
  gap: 10px !important;
  align-items: center !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__min_max_wrapper input{
  text-align: center;
  padding-inline: var(--jsc-space-sm);
}

.jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__search_new_to{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  color: var(--jsc-text-on-light-muted);
  font-size: 0.92rem;
  line-height: 1;
  white-space: nowrap;
}

/* #endregion Price / Beds Min-Max Pairs */

/* =========================================================
   11) PROPERTY TYPE PILLS
========================================================= */

/* #region Property Type Pills */
.jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__search_new_property_type{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  gap: 10px !important;
  min-height: var(--jsc-idx-panel-control-h);
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__search_new_property_type > legend{
  width: 100%;
  margin: 0 0 10px !important;
  padding: 0 !important;
}

.jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__checkbox_wrapper{
  position: relative;
  display: inline-flex;
  align-items: center;
  margin: 0;
}

.jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__checkbox_wrapper input[type="checkbox"]{
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

.jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__checkbox_wrapper label{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid rgb(var(--jsc-rgb-mirage) / 10%);
  border-radius: var(--jsc-radius-pill);
  background: rgb(var(--jsc-rgb-white) / 68%);
  color: var(--jsc-text-on-light);
  font-size: 0.94rem;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--jsc-fast) var(--jsc-ease),
    border-color var(--jsc-fast) var(--jsc-ease),
    color var(--jsc-fast) var(--jsc-ease),
    box-shadow var(--jsc-fast) var(--jsc-ease),
    transform var(--jsc-fast) var(--jsc-ease);
}

.jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__checkbox_wrapper label:hover{
  border-color: rgb(var(--jsc-rgb-mirage) / 18%);
  background: rgb(var(--jsc-rgb-white) / 88%);
  transform: translateY(-1px);
}

.jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__checkbox_wrapper input[type="checkbox"]:focus + label,
.jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__checkbox_wrapper input[type="checkbox"]:focus-visible + label{
  outline: none;
  box-shadow: 0 0 0 2px rgb(var(--jsc-rgb-sandwisp) / 12%);
}

.jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__checkbox_wrapper input[type="checkbox"]:checked + label{
  border-color: rgb(var(--jsc-rgb-sandwisp) / 34%);
  background:
    linear-gradient(
      180deg,
      rgb(var(--jsc-rgb-sandwisp) / 24%),
      rgb(var(--jsc-rgb-sandwisp) / 14%)
    );
  color: var(--jsc-text-on-light);
  box-shadow:
    0 0 0 1px rgb(var(--jsc-rgb-sandwisp) / 16%),
    inset 0 1px 0 rgb(var(--jsc-rgb-white) / 45%);
}

/* #endregion Property Type Pills */

/* =========================================================
   12) CTA ROW
========================================================= */

/* #region CTA Row */
.jsc-idx-search-panel__widget .flexmls_connect__search input[type="submit"].flexmls_connect__search_new_submit{
  display: block !important;
  margin-inline: auto !important;
  min-width: var(--jsc-idx-panel-submit-min);
  width: auto;
  height: 56px;
  min-height: 56px;
  padding-inline: clamp(28px, 4vw, 48px);
  border: 1px solid rgb(var(--jsc-rgb-sandwisp) / 26%) !important;
  border-radius: var(--jsc-radius-pill) !important;
  background:
    linear-gradient(
      180deg,
      rgb(var(--jsc-rgb-sandwisp) / 98%),
      rgb(var(--jsc-rgb-sandwisp) / 86%)
    ) !important;
  color: rgb(var(--jsc-rgb-mirage)) !important;
  font: inherit;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: 0;
  box-shadow:
    0 14px 28px rgb(var(--jsc-rgb-black) / 12%),
    inset 0 1px 0 rgb(var(--jsc-rgb-white) / 38%);
  transition:
    transform var(--jsc-med) var(--jsc-ease),
    box-shadow var(--jsc-med) var(--jsc-ease),
    border-color var(--jsc-med) var(--jsc-ease),
    filter var(--jsc-med) var(--jsc-ease),
    background var(--jsc-med) var(--jsc-ease);
}

.jsc-idx-search-panel__widget .flexmls_connect__search input[type="submit"].flexmls_connect__search_new_submit:hover{
  transform: translateY(-1px);
  border-color: rgb(var(--jsc-rgb-sandwisp) / 36%) !important;
  background:
    linear-gradient(
      180deg,
      rgb(var(--jsc-rgb-sandwisp) / 100%),
      rgb(var(--jsc-rgb-sandwisp) / 90%)
    ) !important;
  box-shadow:
    0 18px 34px rgb(var(--jsc-rgb-black) / 16%),
    inset 0 1px 0 rgb(var(--jsc-rgb-white) / 44%);
  filter: saturate(1.02);
}

.jsc-idx-search-panel__widget .flexmls_connect__search input[type="submit"].flexmls_connect__search_new_submit:focus{
  outline: none;
  box-shadow:
    0 18px 34px rgb(var(--jsc-rgb-black) / 16%),
    0 0 0 3px rgb(var(--jsc-rgb-sandwisp) / 16%),
    inset 0 1px 0 rgb(var(--jsc-rgb-white) / 44%);
}

.jsc-idx-search-panel__widget .flexmls_connect__search input[type="submit"].flexmls_connect__search_new_submit:active{
  transform: translateY(0);
  box-shadow:
    0 10px 20px rgb(var(--jsc-rgb-black) / 10%),
    inset 0 1px 0 rgb(var(--jsc-rgb-white) / 34%);
}

/* #endregion CTA Row */

/* =========================================================
   13) NEUTRALIZE PLUGIN HORIZONTAL BEHAVIOR
========================================================= */

/* #region Neutralize Plugin Horizontal Behavior */
.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new.flexmls_connect__search_new_horizontal form,
.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new.flexmls_connect__search_new_horizontal .flexmls_connect__search_new_min_max,
.jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new.flexmls_connect__search_new_horizontal .flexmls_connect__search_new_links{
  float: none !important;
  clear: none !important;
}

/* #endregion Neutralize Plugin Horizontal Behavior */

/* =========================================================
   14) TABLET
========================================================= */

/* #region Tablet */
@media (max-width: 1199.98px){
  :root{
    --jsc-idx-search-card-pad-y: 28px;

    --jsc-idx-search-button-gap: 24px;
  }

  .jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-template-areas:
      "location location"
      "price beds"
      "type type"
      "submit submit" !important;
  }

  .jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form::after{
    display: none;
  }

  .jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > div.flexmls_connect__search_field:nth-of-type(2),
  .jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > .flexmls_connect__search_new_min_max > .flexmls_connect__search_field:nth-child(1),
  .jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > .flexmls_connect__search_new_min_max > .flexmls_connect__search_field:nth-child(2),
  .jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > fieldset.flexmls_connect__search_new_property_type{
    max-width: none !important;
    justify-self: stretch !important;
  }
}

/* #endregion Tablet */

/* =========================================================
   15) MOBILE
========================================================= */

/* #region Mobile */
@media (max-width: 767.98px){
  :root{
     --jsc-idx-search-panel-pad-top: 10px;

    --jsc-idx-search-panel-pad-bottom: 16px;

    --jsc-idx-search-card-pad-y: 22px;

    --jsc-idx-search-card-radius: 24px;

    --jsc-idx-search-button-gap: 20px;
  }

  .jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new{
    width: 100% !important;
    max-width: 100% !important;
    padding: 20px !important;
    border-radius: 20px;
  }

  .jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form{
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "location"
      "price"
      "beds"
      "type"
      "submit" !important;
  }

  .jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__min_max_wrapper{
    grid-template-columns: 1fr !important;
  }

  .jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__search_new_to{
    display: none !important;
  }

  .jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__search_new_links{
    justify-content: stretch !important;
  }

  .jsc-idx-search-panel__widget .flexmls_connect__search input[type="submit"],
  .jsc-idx-search-panel__widget .flexmls_connect__search .flexmls_connect__search_new_submit{
    width: 100% !important;
    min-width: 0 !important;
  }

  .jsc-idx-search-panel__widget .flexmls_connect__search .select2-selection--multiple{
    min-height: 58px !important;
    border-radius: 18px !important;
    padding-left: 48px !important;
  }

  .jsc-idx-search-panel__widget .flexmls_connect__search.flexmls_connect__search_new form > div.flexmls_connect__search_field:nth-of-type(2) .select2-selection--multiple::before{
    left: 18px;
  }
}

/* #endregion Mobile */

/* stylelint-enable selector-class-pattern */