/* ============================================
   SEARCH FORM - BOHOMES (Spain)

   Context: .page-search-bohomes-bostad on <body>
   Requires: tokens.css (loaded first via base_bohomes.html)
   Structure: Filter Area → Form Grid → Labels → Buttons → Sorting → Responsive

   Design decisions:
   - Page namespace includes -bostad suffix for WordPress embedding
   - Semantic button selectors (a, button[type="submit"]) instead of .btn-* classes
   - Sorting classes (.sorting-wrapper, .results-count, etc.) kept for clarity
   - Input height 56px (--space-14) matches Bohomes brand
   ============================================ */

/* --- Filter Area --- */
.page-search-bohomes-bostad #filter-area-bostad {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-muted);
  padding: var(--space-8) var(--space-4);
}

.page-search-bohomes-bostad .filter-grid {
  width: 100%;
}

/* --- Filter Form Grid (realty_filter_bofi.html, used by bofi_realty_list_spain) ---
   #filter-area-bostad above already provides the bordered container (shared with
   realty_filter_bohomes.html below), so .realty-search-bostad is a plain pass-through
   here rather than a second nested box. */
.page-search-bohomes-bostad .realty-search-bostad {
  width: 100%;
  text-align: left;
}

.page-search-bohomes-bostad .filter-fields-bostad {
  display: grid;
  /* minmax(0, 1fr), not plain 1fr: a grid item's implicit min-width is its own content's
     min-content size, which plain 1fr tracks don't override - around 820px wide (location
     spanning 2 columns plus the other fields' own minimums) that combined minimum exceeded
     the available width and the grid overflowed its own bordered box instead of shrinking.
     minmax(0, 1fr) caps each track's minimum at 0, so the columns shrink and truncate/wrap
     their contents instead. */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.page-search-bohomes-bostad .filter-fields-bostad > fieldset[data-section="advanced"] {
  display: none;
}

.page-search-bohomes-bostad .filter-fields-bostad.show-advanced-bostad > fieldset[data-section="advanced"] {
  display: flex;
}

.page-search-bohomes-bostad .filter-fields-bostad fieldset {
  display: flex;
  flex-direction: column;
  border: none;
  padding: 0;
  margin: 0;
  /* Browser default for <fieldset> is min-width: min-content, not auto - it ignores
     minmax(0, 1fr) on the grid track above (that zeroes the TRACK's own minimum, not an
     individual item's own CSS min-width) and keeps the fieldset from shrinking below its
     content's natural width, overflowing sideways into the next column once the track gets
     narrower than that - property type's trigger button hit this around 787-900px while its
     sibling fields (whose content happened to have a smaller natural minimum) shrank fine. */
  min-width: 0;
}

.page-search-bohomes-bostad .filter-fields-bostad legend {
  display: block;
  font-size: var(--font-size-label);
  font-weight: 700;
  text-transform: uppercase;
  margin: 0 0 var(--space-2);
  padding: 0;
  color: var(--ink);
  text-align: left;
}

.page-search-bohomes-bostad .filter-fields-bostad fieldset[data-name="area"] {
  position: relative;
}

/* location holds both the ALUE (City) and TARKENNA ALUETTA (Refine area) dropdowns side by
   side (CityAreaLocationWidget) - span 2 of the 3 grid columns so each gets roughly a full
   slot's width instead of being squeezed into one third. is_new_development moves out of
   this row entirely (own full-width row, horizontal radios - see .radio-list-bostad in
   form_widgets_bohomes.css) to free up the column this needs. */
.page-search-bohomes-bostad .filter-fields-bostad fieldset[data-name="location"] {
  grid-column: span 2;
}

.page-search-bohomes-bostad .filter-fields-bostad fieldset[data-name="is_new_development"] {
  grid-column: 1 / -1;
}

/* --- Filter Form Footer Buttons (realty_filter_bofi.html) --- */
.page-search-bohomes-bostad .realty-search-bostad > footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-8);
  padding-top: var(--space-6);
  margin-top: var(--space-6);
}

.page-search-bohomes-bostad .realty-search-bostad > footer button[type="button"] {
  display: inline-flex;
  align-items: center;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--ink);
  background: transparent;
  border: none;
  border-top: 1px solid var(--border-input);
  border-bottom: 1px solid var(--border-input);
  padding: var(--space-2) var(--space-8);
  font-size: var(--font-size-xs);
  cursor: pointer;
  white-space: nowrap;
}

.page-search-bohomes-bostad .realty-search-bostad > footer button[type="button"]:hover {
  background: var(--canvas);
}

.page-search-bohomes-bostad .realty-search-bostad > footer button[type="button"] svg {
  display: inline-block;
  margin-left: var(--space-2);
  width: 10px;
  height: 10px;
  transition: transform 0.2s;
}

.page-search-bohomes-bostad .realty-search-bostad > footer button[type="button"] svg.rotate-180-bostad {
  transform: rotate(180deg);
}

.page-search-bohomes-bostad .realty-search-bostad > footer button[type="reset"] {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--border-input);
  padding: var(--space-3) var(--space-6);
  width: 10.625rem;
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.page-search-bohomes-bostad .realty-search-bostad > footer button[type="reset"]:hover {
  background: var(--canvas);
}

.page-search-bohomes-bostad .realty-search-bostad > footer button[type="submit"] {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: var(--ink);
  background: var(--brand-blush);
  border: none;
  padding: var(--space-3) var(--space-6);
  width: 10.625rem;
  font-size: var(--font-size-xs);
  cursor: pointer;
}

.page-search-bohomes-bostad .realty-search-bostad > footer button[type="submit"]:hover {
  background: color-mix(in srgb, var(--brand-blush) 85%, var(--ink));
}

@media (max-width: 47.98rem) {
  .page-search-bohomes-bostad .filter-fields-bostad {
    grid-template-columns: 1fr;
  }

  /* location/is_new_development's grid-column span is sized for the 3-column desktop grid
     above - against a single explicit 1fr column here, a leftover "span 2"/"1 / -1" makes
     the grid implicitly create an extra auto-sized column to satisfy the span instead of
     collapsing to one field per row, breaking the mobile single-column stack entirely. */
  .page-search-bohomes-bostad .filter-fields-bostad fieldset[data-name="location"],
  .page-search-bohomes-bostad .filter-fields-bostad fieldset[data-name="is_new_development"] {
    grid-column: auto;
  }
}

/* --- Search Form Grid --- */
.page-search-bohomes-bostad .search-form {
  width: 100%;
  max-width: var(--bohomes-content-max);
  margin: 0 auto;
}

.page-search-bohomes-bostad .search-form.df-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, var(--bohomes-form-col-max)));
  justify-content: center;
  column-gap: var(--space-12);
  row-gap: var(--space-6);
}

.page-search-bohomes-bostad .search-form.df-grid > .df-grid-maintype-buttons {
  grid-column: 1 / -1;
}

.page-search-bohomes-bostad .search-form.df-grid > .df-item {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* --- Form Labels --- */
.page-search-bohomes-bostad .search-form .df-item > label {
  display: block;
  color: var(--ink);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: var(--space-2);
}

/* --- Form Buttons --- */
.page-search-bohomes-bostad .form-buttons {
  grid-column: 1 / -1;
  margin-top: var(--space-10);
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  gap: var(--space-4);
  width: 100%;
}

/* Semantic button selectors (no .btn-* classes) */
.page-search-bohomes-bostad .form-buttons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--space-14);
  min-width: 8.5rem;
  padding: 0 var(--space-5);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--border-input);
}

.page-search-bohomes-bostad .form-buttons button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--space-14);
  min-width: 8.5rem;
  padding: 0 var(--space-5);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--brand-blush);
  border: none;
  cursor: pointer;
}

.page-search-bohomes-bostad .form-buttons button[type="submit"] svg {
  width: var(--space-6);
  height: var(--space-6);
}

.page-search-bohomes-bostad .form-buttons a:hover {
  background: var(--canvas);
}

.page-search-bohomes-bostad .form-buttons button[type="submit"]:hover {
  background: color-mix(in srgb, var(--brand-blush) 85%, var(--ink));
}

/* --- Sorting Section --- */
.page-search-bohomes-bostad #sorting-bostad {
  width: 100%;
}

.page-search-bohomes-bostad .sorting-wrapper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);
}

.page-search-bohomes-bostad .sorting-left {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
}

.page-search-bohomes-bostad .results-count {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
}

.page-search-bohomes-bostad .map-toggle {
  display: none; /* Hidden by default */
  align-items: center;
  gap: var(--space-2);
}

.page-search-bohomes-bostad .map-toggle-icon {
  display: inline-flex;
  width: var(--space-6);
  height: var(--space-6);
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--ink-muted);
}

.page-search-bohomes-bostad .sorting-right {
  width: var(--bohomes-sort-select-w);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.page-search-bohomes-bostad .sort-label {
  font-size: var(--font-size-base);
  line-height: var(--space-6);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.page-search-bohomes-bostad .sort-select-wrapper {
  position: relative;
}

.page-search-bohomes-bostad .sort-select {
  appearance: none;
  width: 100%;
  height: var(--space-10);
  padding: 0 var(--space-3);
  padding-right: var(--space-10);
  font-size: var(--font-size-sm);
  color: var(--ink-muted);
  background: var(--surface);
  border: 1px solid var(--border-input);
  cursor: pointer;
}

.page-search-bohomes-bostad .sort-select-icon {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* --- Responsive: Tablet and above --- */
@media (min-width: 768px) {
  .page-search-bohomes-bostad #filter-area-bostad {
    padding: var(--space-20);
  }

  .page-search-bohomes-bostad .form-buttons a,
  .page-search-bohomes-bostad .form-buttons button[type="submit"] {
    width: auto;
  }
}

/* --- Responsive: Mobile --- */
@media (max-width: 767.98px) {
  .page-search-bohomes-bostad .search-form.df-grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-4);
  }

  .page-search-bohomes-bostad .form-buttons {
    flex-direction: column;
    margin-top: var(--space-6);
    gap: var(--space-3);
  }

  .page-search-bohomes-bostad .form-buttons a,
  .page-search-bohomes-bostad .form-buttons button[type="submit"] {
    width: 100%;
  }

  .page-search-bohomes-bostad .sorting-wrapper {
    flex-direction: column;
    gap: var(--space-6);
  }

  .page-search-bohomes-bostad .sorting-right {
    width: 100%;
  }
}