/* ========================================
   Form Widgets - BOHOMES (Spain)
   Structure: Base → Dropdown → Location → Range → Property Tiles → Chips → Condition → Slider
   ======================================== */

/* --- Base Form Styles --- */
.page-search-bohomes-bostad input,
.page-search-bohomes-bostad select,
.page-search-bohomes-bostad textarea,
.page-search-bohomes-bostad button {
  font-family: inherit;
}

/* --- Plain Text/Number Inputs (e.g. Listing Number) ---
   Same --space-9/--font-size-sm/#707070 baseline as the dropdown, multi-select
   and range widgets. More specific rules (e.g. .range-widget-bostad
   input[type="number"]) still win over this for the widgets that need their
   own layout on top (unit suffix, icon spacing, etc.). */
.page-search-bohomes-bostad input[type="text"],
.page-search-bohomes-bostad input[type="number"] {
  width: 100%;
  height: var(--space-9);
  padding: 0 var(--space-3);
  border: 1px solid #707070;
  background: #fff;
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #000;
}

.page-search-bohomes-bostad input::placeholder {
  color: #8C8C8C;
}

/* --- New Development Radio (UUDISKOHTEET) ---
   Laid out horizontally (New development now gets its own full-width row in the Spain
   search form - see fieldset[data-name="is_new_development"] in search_form_bohomes.css -
   so the three options read left-to-right instead of needing the vertical stack a shared
   grid slot required). */
.radio-list-bostad {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-6);
}

.radio-list-bostad .radio-item-bostad {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.radio-list-bostad input[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio;
  width: 1rem;
  height: 1rem;
  margin: 0;
  margin-right: var(--space-1);
  cursor: pointer;
  filter: grayscale(1);
  flex-shrink: 0;
}

.radio-list-bostad label {
  font-size: var(--font-size-sm);
  font-weight: 400;
  text-transform: none;
  cursor: pointer;
  margin: 0 var(--space-6) 0 0;
}

/* --- Dropdown Base (.bo-dropdown) --- */
.bo-dropdown {
  position: relative;
  width: 100%;
}

.bo-dropdown > summary {
  list-style: none;
}

.bo-dropdown > summary::-webkit-details-marker {
  display: none;
}

.bo-dropdown .dropdown-trigger {
  height: var(--space-9);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--space-3);
  background: #fff;
  border: 1px solid #707070;
  cursor: pointer;
}

.bo-dropdown .dropdown-trigger-text {
  font-size: var(--font-size-sm);
  line-height: var(--space-6);
  font-weight: 500;
  letter-spacing: 0.32px;
  color: #8C8C8C;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bo-dropdown .dropdown-trigger-text.has-value {
  color: #000;
}

.bo-dropdown .dropdown-icon {
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.bo-dropdown[open] > summary .dropdown-icon {
  transform: rotate(180deg);
}

.bo-dropdown .dropdown-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 20;
  background: #fff;
  border: 1px solid #707070;
  border-top: none;
  max-height: 480px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

.bo-dropdown .dropdown-content > label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
}

/* --- Location Dropdown (.bo-location) ---
   No font-size of its own anywhere below: inherits var(--font-size-sm) from
   .dropdown-content above, so it matches the trigger and every other
   dropdown panel (.ms-drop-bostad) instead of falling back to the page
   default. */
/* No margin on .location-group itself - every row (group or plain item) gets the exact same
   vertical rhythm from the parent's flex `gap` (.dropdown-content/.location-children below),
   instead of a group additionally padding itself out with its own margin. */
.bo-location .location-group > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  cursor: pointer;
  list-style: none;
}

.bo-location .location-group > summary::-webkit-details-marker {
  display: none;
}

.bo-location .location-group-name {
  font-weight: 600;
}

.bo-location .location-count {
  color: #8C8C8C;
}

.bo-location .location-chevron {
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  transition: transform 0.15s ease;
}

.bo-location details[open] > summary .location-chevron {
  transform: rotate(-90deg);
}

.bo-location .location-children {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-left: var(--space-6);
  margin-top: var(--space-2);
}

.bo-location .location-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  cursor: pointer;
}

.bo-location .location-item.is-city .location-name {
  font-weight: 500;
}

/* --- City/Area multi-select location dropdowns (.bo-location-pair) ---
   Two independent .bo-dropdown.bo-location instances - ALUE (cities) and TARKENNA ALUETTA
   (areas, searchable/expandable, scoped to the cities checked in ALUE) - side by side.
   Both are genuine checkbox multi-selects, so they reuse every .bo-location rule above
   (.location-item/.location-group/.location-children/.location-count/.location-chevron)
   as-is; this block only adds what's specific to the two-dropdown layout and the
   TARKENNA-only search box/footer. */
.bo-location-pair {
  display: flex;
  gap: var(--space-3);
  width: 100%;
}

.bo-location-pair .bo-dropdown {
  flex: 1 1 0;
  min-width: 0;
}

/* .location-item/.location-group above set their own `display`, which otherwise beats the
   UA stylesheet's `[hidden] { display: none }` on specificity - the area-search filter and
   the ALUE<->TARKENNA city sync both hide rows by toggling the `hidden` attribute, so without
   this override a "hidden" row stays visibly laid out. */
.bo-location-pair [hidden] {
  display: none !important;
}

.bo-location-pair .location-search-input {
  width: 100%;
  height: var(--space-8);
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
  border: 1px solid #707070;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* flex+gap here (not per-row margin) is what gives every row - the heading and each
   quarter, group or leaf alike - the same vertical spacing; see .location-group above. */
.bo-location-pair .location-city-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.bo-location-pair .location-city-heading {
  padding: var(--space-2) var(--space-3);
  margin: 0 calc(var(--space-3) * -1);
  background: var(--canvas);
  font-weight: 600;
  font-size: var(--font-size-sm);
  text-transform: uppercase;
}

/* --- Dropdown Checkbox --- */
.bo-dropdown input[type="checkbox"] {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: #707070;
}

/* --- Multi-Select Widget (Property type) ---
   Sized/colored to match .bo-dropdown (location), which was itself resized down
   to --space-9 (36px) / --font-size-sm (14px) / #707070 border / #8C8C8C
   placeholder — the location trigger used to be a taller 56px/16px outlier
   next to this and the range inputs below, not the other way around. */
.ms-parent-bostad {
  position: relative;
  width: 100%;
}

.ms-parent-bostad .ms-choice-bostad {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: var(--space-9);
  padding: 0 var(--space-3);
  border: 1px solid #707070;
  background: #fff;
  cursor: pointer;
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #000;
  text-align: left;
}

.ms-parent-bostad .ms-choice-bostad span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-transform: none;
}

.ms-parent-bostad .ms-choice-bostad span.placeholder-bostad {
  color: #8C8C8C;
}

.ms-parent-bostad .ms-choice-bostad .icon-caret-bostad {
  width: var(--font-size-2xs);
  height: var(--font-size-2xs);
  border-right: 2px solid #707070;
  border-bottom: 2px solid #707070;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
  margin-left: var(--space-2);
}

.ms-parent-bostad .ms-choice-bostad .icon-caret-bostad.open-bostad {
  transform: rotate(-135deg);
}

.ms-parent-bostad .ms-drop-bostad {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  background: #fff;
  border: 1px solid #707070;
  border-top: none;
  margin-top: -1px;
  max-height: 480px;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ms-parent-bostad .ms-drop-bostad ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ms-parent-bostad .ms-drop-bostad li {
  padding: 0;
  margin: 0;
  text-align: left;
}

.ms-parent-bostad .ms-drop-bostad li label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  margin-bottom: 0;
  font-weight: 400;
  text-transform: none;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: #000;
  white-space: nowrap;
}

.ms-parent-bostad .ms-drop-bostad li label:hover {
  background: #f5f5f5;
}

.ms-parent-bostad .ms-drop-bostad li.selected-bostad label {
  background: #f5f5f5;
}

.ms-parent-bostad .ms-drop-bostad li.ms-select-all-bostad label {
  border-bottom: 1px solid #707070;
}

.ms-parent-bostad .ms-drop-bostad li.group-bostad label {
  font-weight: 700;
  background: #f5f5f5;
  border-top: 1px solid #707070;
}

.ms-parent-bostad .ms-drop-bostad li.group-bostad label:hover {
  background: #ebe9e5;
}

.ms-parent-bostad .ms-drop-bostad input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  flex-shrink: 0;
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: #707070;
}

.ms-parent-bostad .ms-drop-bostad .ms-no-results-bostad {
  padding: 12px 16px;
  color: #8C8C8C;
  font-style: italic;
}

/* --- Range Input (Price / Area) ---
   Same --space-9/--font-size-sm/#707070 sizing as the multi-select and
   location widgets above, so all four filter fields share one visual
   height/font baseline. */
.range-widget-bostad {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.range-widget-bostad .input-wrapper-bostad {
  position: relative;
  flex: 1;
  /* Low enough that two of these plus the separator still fit inside one (now-shrinkable,
     see .filter-fields-bostad's minmax(0, 1fr)) grid column all the way down to the mobile
     breakpoint - 100px here meant PRICE/AREA's own min-content stayed wider than their column
     between roughly 768-900px, overflowing sideways into the next field. */
  min-width: 70px;
}

.range-widget-bostad .separator-bostad {
  user-select: none;
  margin: 0 var(--space-1);
}

.range-widget-bostad input[type="number"] {
  width: 100%;
  height: var(--space-9);
  font-size: var(--font-size-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: #000;
  border: 1px solid #707070;
  border-radius: 0;
  padding: 0 var(--space-8) 0 var(--space-3);
  box-shadow: none;
}

.range-widget-bostad input[type="number"]::placeholder {
  color: #8C8C8C;
  opacity: 1;
}

.range-widget-bostad input[type="number"]::-webkit-outer-spin-button,
.range-widget-bostad input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.range-widget-bostad input[type="number"] {
  -moz-appearance: textfield;
}

.range-widget-bostad .unit-bostad {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  font-weight: 600;
  font-size: var(--font-size-2xs);
  color: #8C8C8C;
  pointer-events: none;
}

/* --- Range Input (.df-minmax) --- */
.df-minmax {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  max-width: 780px;
}

.df-minmax .input-wrapper {
  position: relative;
  flex: 1;
  min-width: 120px;
}

.df-minmax .separator {
  user-select: none;
  margin: 0 4px;
}

.df-minmax input[type="number"] {
  width: 100%;
  height: 56px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  letter-spacing: 0.32px;
  color: #000;
  border: 1px solid #707070;
  border-radius: 0;
  padding: 0 3rem 0 16px;
  box-shadow: none;
}

.df-minmax input[type="number"]::placeholder {
  color: #707070;
  opacity: 1;
}

.df-minmax input[type="number"]::-webkit-outer-spin-button,
.df-minmax input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.df-minmax input[type="number"] {
  -moz-appearance: textfield;
}

.df-unit {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: #000;
  pointer-events: none;
}

/* --- Property Type Tiles --- */
.df-grid-maintype-buttons {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 40px;
}

.bo-prop-tile {
  flex: 1;
  min-width: 160px;
}

.bo-prop-input {
  /* sr-only */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bo-prop-inner {
  height: 124px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: #000;
  border: 1px solid #707070;
  cursor: pointer;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.bo-prop-inner .bo-icon-regular {
  display: block;
}

.bo-prop-inner .bo-icon-negative {
  display: none;
}

.bo-prop-inner .bo-prop-label {
  font-size: 16px;
  line-height: 20px;
  letter-spacing: 0.1px;
  text-transform: uppercase;
  text-align: center;
  font-weight: 500;
}

.bo-prop-input:checked + .bo-prop-inner {
  background: #464545;
  color: #fff;
  border-color: #464545;
}

.bo-prop-input:checked + .bo-prop-inner .bo-icon-regular {
  display: none;
}

.bo-prop-input:checked + .bo-prop-inner .bo-icon-negative {
  display: block;
}

.bo-prop-input:checked + .bo-prop-inner .bo-prop-label {
  font-weight: 700;
}

.bo-prop-tile:hover .bo-prop-inner {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

/* Mobile property type dropdown */
.mobile-type-wrapper {
  width: 100%;
  margin-bottom: 24px;
}

.mobile-type-wrapper .mobile-type-label {
  display: block;
  color: #000;
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.12px;
  margin-bottom: 8px;
}

.mobile-type-dropdown .dropdown-content {
  gap: 16px;
}

.mobile-type-option {
  display: flex;
  align-items: center;
  padding: 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
}

.mobile-type-option:last-child {
  border-bottom: none;
}

.mobile-type-option:hover {
  background: #f9f9f9;
}

.mobile-type-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.mobile-type-option .option-label {
  flex: 1;
  font-size: 16px;
  font-weight: 500;
}

.mobile-type-option .option-check {
  display: none;
  width: 20px;
  height: 20px;
}

.mobile-type-option input:checked ~ .option-check {
  display: block;
}

/* --- Chips (.df-chips) --- */
.df-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
  margin: 0;
  padding: 0;
}

:root {
  --chip-w: 75px;
  --chip-h: 48px;
}

.df-chips label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--chip-w);
  height: var(--chip-h);
  padding: 0 16px;
  border: 1px solid #707070;
  background: #fff;
  color: #000;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: 0.02em;
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.df-chips label:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.df-chips input[type="checkbox"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.df-chips label:has(input:checked) {
  background: #707070;
  color: #fff;
  border-color: #707070;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
}

.df-chips label:has(input:focus-visible) {
  outline: 2px solid #000;
  outline-offset: 2px;
}

/* Fallback for browsers without :has() */
@supports not (selector(:has(*))) {
  .df-chips input[type="checkbox"] {
    position: static;
    width: auto;
    height: auto;
    opacity: 1;
    margin-right: 8px;
    accent-color: #707070;
  }
  .df-chips label {
    padding-left: 8px;
  }
}

#id_bedrooms {
  max-width: 496px;
}

/* --- Condition Checkboxes --- */
.search-form .df-item > div[id^="id_"]:not(.df-chips) {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.search-form .df-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  -webkit-appearance: auto;
  appearance: auto;
  accent-color: #707070;
}

.search-form input[type="checkbox"]:focus,
.search-form input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: none;
}

/* --- Slider (noUiSlider) --- */
.noUi-slider-anchor {
  margin: 24px 10px 10px 10px;
  width: 100%;
  max-width: 780px;
  display: none; /* Hidden by default */
}

.noUi-target {
  background: #D1D1D1;
  border-radius: 100px;
  border: none;
  box-shadow: none;
  height: 8px;
}

.noUi-connect {
  background: #707070;
}

.noUi-handle {
  background: #000;
  border: 0;
  border-radius: 50%;
  box-shadow: none;
  cursor: pointer;
  height: 20px;
  width: 20px;
  right: -10px;
  top: 50%;
  transform: translateY(-20%);
}

.noUi-handle:after,
.noUi-handle:before {
  display: none;
}

/* --- Responsive: Desktop --- */
@media (min-width: 768px) {
  .df-grid-maintype-buttons {
    display: flex;
  }

  .mobile-type-wrapper {
    display: none;
  }
}

/* --- Responsive: Mobile --- */
@media (max-width: 767.98px) {
  .mobile-type-wrapper {
    display: block;
  }

  .df-minmax {
    flex-direction: column;
    gap: 8px;
  }

  .df-minmax .input-wrapper {
    width: 100%;
  }

  .df-minmax .separator {
    display: block;
    text-align: center;
    line-height: 1;
  }

  #id_bedrooms {
    max-width: none;
  }
}