/**
 * @file
 * Property search section styles for Invertir Pro theme.
 *
 * Multi-field search form inspired by cristinamoriones.com
 */

/* ========================================
 * SEARCH SECTION
 * ======================================== */

.property-search {
  background-color: var(--color-bg-light);
  padding: var(--space-2xl) 0;
}

@media (min-width: 768px) {
  .property-search {
    padding: var(--space-3xl) 0;
  }
}

.property-search__container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* ========================================
 * SEARCH HEADER
 * ======================================== */

.property-search__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.property-search__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  background-color: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.property-search__icon svg {
  width: 28px;
  height: 28px;
  color: var(--color-peach-dark);
}

.property-search__title {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

@media (min-width: 768px) {
  .property-search__title {
    font-size: var(--font-size-3xl);
  }
}

/* ========================================
 * SEARCH FORM
 * ======================================== */

.property-search__form {
  background-color: var(--color-white);
  padding: var(--space-lg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}

@media (min-width: 768px) {
  .property-search__form {
    padding: var(--space-xl);
  }
}

/* Form grid */
.property-search__fields {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 576px) {
  .property-search__fields {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .property-search__fields {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .property-search__fields {
    grid-template-columns: repeat(6, 1fr);
  }
}

/* ========================================
 * SEARCH FIELD
 * ======================================== */

.property-search__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.property-search__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.property-search__input,
.property-search__select {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.property-search__input:focus,
.property-search__select:focus {
  outline: none;
  border-color: var(--color-black);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.property-search__select {
  padding-right: var(--space-2xl);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  background-size: 12px;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

/* ========================================
 * PRICE RANGE SLIDER
 * ======================================== */

.property-search__field--price {
  grid-column: span 1;
}

@media (min-width: 1200px) {
  .property-search__field--price {
    grid-column: span 2;
  }
}

.property-search__price-display {
  display: flex;
  justify-content: space-between;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  margin-top: var(--space-xs);
}

/* Range slider styling */
.property-search__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  background: var(--color-bg-gray);
  border-radius: var(--radius-full);
  outline: none;
  margin-top: var(--space-sm);
}

.property-search__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--color-black);
  border: 2px solid var(--color-white);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-fast);
}

.property-search__range::-webkit-slider-thumb:hover {
  transform: scale(1.1);
}

.property-search__range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--color-black);
  border: 2px solid var(--color-white);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--shadow-md);
}

/* ========================================
 * DUAL-HANDLE PRICE RANGE SLIDER
 * (Progressive enhancement over min/max inputs)
 * ======================================== */

/* Reset the Drupal fieldset wrapper for the price slider.
 * Use data-drupal-selector (not ID) because Drupal appends --2, --3
 * suffixes to IDs on AJAX refresh, breaking the ID selector. */
[data-drupal-selector="edit-pi-wrapper"] {
  border: none;
  padding: 0;
  margin: 0;
}

[data-drupal-selector="edit-pi-wrapper"] > legend {
  display: none;
}

.price-range-slider {
  border: none;
  margin: 0;
  padding: 0;
  width: 100%;
}

.price-range-slider__legend {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  padding: 0;
  margin-bottom: var(--space-sm);
}

.price-range-slider__track-container {
  position: relative;
  height: 40px;
  display: flex;
  align-items: center;
}

.price-range-slider__track {
  position: absolute;
  width: 100%;
  height: 3px;
  background: var(--color-border);
  border-radius: var(--radius-full);
}

.price-range-slider__track-range {
  position: absolute;
  height: 100%;
  background: var(--color-black);
  border-radius: var(--radius-full);
  left: var(--low, 0%);
  right: calc(100% - var(--high, 100%));
}

.price-range-slider__input {
  position: absolute;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  outline: none;
}

/* Min thumb sits below max. */
.price-range-slider__input--min {
  z-index: 2;
}

/* Max thumb sits above min so it's always grabbable. */
.price-range-slider__input--max {
  z-index: 3;
}

/* Webkit thumb */
.price-range-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--color-black);
  border: 2px solid var(--color-white);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.price-range-slider__input::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

.price-range-slider__input::-webkit-slider-thumb:active {
  transform: scale(1.25);
}

/* Firefox thumb */
.price-range-slider__input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: var(--color-black);
  border: 2px solid var(--color-white);
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: var(--shadow-sm);
  transition: transform var(--transition-fast);
}

.price-range-slider__input::-moz-range-thumb:hover {
  transform: scale(1.15);
}

.price-range-slider__input::-moz-range-thumb:active {
  transform: scale(1.25);
}

/* Firefox track (must be transparent). */
.price-range-slider__input::-moz-range-track {
  background: transparent;
  border: none;
  height: 0;
}

/* Price display below slider */
.price-range-slider__display {
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  margin-top: var(--space-xs);
  line-height: var(--line-height-snug);
}

/* Focus ring for keyboard accessibility */
.price-range-slider__input:focus::-webkit-slider-thumb {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

.price-range-slider__input:focus::-moz-range-thumb {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .price-range-slider__input::-webkit-slider-thumb,
  .price-range-slider__input::-moz-range-thumb {
    transition: none;
  }
}

/* High contrast */
@media (prefers-contrast: high) {
  .price-range-slider__track {
    background: GrayText;
    height: 4px;
  }

  .price-range-slider__track-range {
    background: CanvasText;
  }

  .price-range-slider__input::-webkit-slider-thumb {
    border: 3px solid CanvasText;
    background: Canvas;
  }

  .price-range-slider__input::-moz-range-thumb {
    border: 3px solid CanvasText;
    background: Canvas;
  }
}

/* ========================================
 * SEARCH ACTIONS
 * ======================================== */

.property-search__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-light);
}

.property-search__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background-color: var(--color-black);
  color: var(--color-white);
  padding: var(--space-md) var(--space-2xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.property-search__submit:hover {
  background-color: var(--color-text-secondary);
  transform: translateY(-2px);
}

.property-search__submit svg {
  width: 18px;
  height: 18px;
}

.property-search__reset {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  background-color: transparent;
  color: var(--color-text-secondary);
  padding: var(--space-md) var(--space-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  border: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.property-search__reset:hover {
  color: var(--color-text-primary);
}

/* ========================================
 * EXPOSED FORM (DRUPAL VIEWS)
 * ======================================== */

.views-exposed-form {
}

.views-exposed-form .form--inline {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 576px) {
  .views-exposed-form .form--inline {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px) {
  .views-exposed-form .form--inline {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
}

.views-exposed-form .form-item {
  margin: 0;
}

.views-exposed-form .form-actions {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-end;
  margin: 0;
  padding: 0;
  border: none;
}

@media (min-width: 992px) {
  .views-exposed-form .form-actions {
    grid-column: span 1;
  }
}

/* ========================================
 * HORIZONTAL MULTI-ROW FILTER LAYOUT
 * ======================================== */

.views-exposed-form--propiedades,
.views-exposed-form--residencial,
.views-exposed-form--suelo,
.views-exposed-form--terciario,
.views-exposed-form--anexos,
.views-exposed-form--inversiones-alternativas {
}

.views-exposed-form--propiedades .filter-row,
.views-exposed-form--residencial .filter-row,
.views-exposed-form--suelo .filter-row,
.views-exposed-form--terciario .filter-row,
.views-exposed-form--anexos .filter-row,
.views-exposed-form--inversiones-alternativas .filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.views-exposed-form--propiedades .filter-row .form-item,
.views-exposed-form--residencial .filter-row .form-item,
.views-exposed-form--suelo .filter-row .form-item,
.views-exposed-form--terciario .filter-row .form-item,
.views-exposed-form--anexos .filter-row .form-item,
.views-exposed-form--inversiones-alternativas .filter-row .form-item {
  margin: 0;
}

/* Mobile: Stack filters vertically */
@media (max-width: 767px) {
  .views-exposed-form--propiedades .filter-row .form-item,
  .views-exposed-form--residencial .filter-row .form-item,
  .views-exposed-form--suelo .filter-row .form-item,
  .views-exposed-form--terciario .filter-row .form-item,
  .views-exposed-form--anexos .filter-row .form-item,
  .views-exposed-form--inversiones-alternativas .filter-row .form-item {
    flex: 1 1 100%;
  }
}

/* Tablet: 2-3 columns */
@media (min-width: 768px) and (max-width: 1199px) {
  .views-exposed-form--propiedades .filter-row .form-item,
  .views-exposed-form--residencial .filter-row .form-item,
  .views-exposed-form--suelo .filter-row .form-item,
  .views-exposed-form--terciario .filter-row .form-item,
  .views-exposed-form--anexos .filter-row .form-item,
  .views-exposed-form--inversiones-alternativas .filter-row .form-item {
    flex: 1 1 calc(33.333% - var(--space-md));
    min-width: 200px;
  }
}

/* Desktop: Full horizontal layout */
@media (min-width: 1200px) {
  .views-exposed-form--propiedades .filter-row--1 .form-item,
  .views-exposed-form--residencial .filter-row--1 .form-item,
  .views-exposed-form--suelo .filter-row--1 .form-item,
  .views-exposed-form--terciario .filter-row--1 .form-item,
  .views-exposed-form--anexos .filter-row--1 .form-item,
  .views-exposed-form--inversiones-alternativas .filter-row--1 .form-item {
    flex: 1 1 calc(16.666% - var(--space-md)); /* 6 items per row */
    min-width: 0;
  }

  .views-exposed-form--propiedades .filter-row--2 .form-item,
  .views-exposed-form--residencial .filter-row--2 .form-item,
  .views-exposed-form--suelo .filter-row--2 .form-item,
  .views-exposed-form--terciario .filter-row--2 .form-item,
  .views-exposed-form--anexos .filter-row--2 .form-item,
  .views-exposed-form--inversiones-alternativas .filter-row--2 .form-item {
    flex: 1 1 calc(14.285% - var(--space-md)); /* 7 items */
    min-width: 0;
  }

  /* Give price slider double width in the filter row. */
  .views-exposed-form--propiedades .filter-row--2 .form-item-pi,
  .views-exposed-form--residencial .filter-row--2 .form-item-pi,
  .views-exposed-form--suelo .filter-row--2 .form-item-pi,
  .views-exposed-form--terciario .filter-row--2 .form-item-pi,
  .views-exposed-form--anexos .filter-row--2 .form-item-pi,
  .views-exposed-form--inversiones-alternativas .filter-row--2 .form-item-pi {
    flex: 2 1 calc(28.571% - var(--space-md));
    min-width: 200px;
  }

  .views-exposed-form--propiedades .filter-row--3 .form-item,
  .views-exposed-form--residencial .filter-row--3 .form-item,
  .views-exposed-form--suelo .filter-row--3 .form-item,
  .views-exposed-form--terciario .filter-row--3 .form-item,
  .views-exposed-form--anexos .filter-row--3 .form-item,
  .views-exposed-form--inversiones-alternativas .filter-row--3 .form-item {
    flex: 1 1 calc(14.285% - var(--space-md)); /* 7 items */
  }
}

/* Action row: share left, apply button right on desktop. */
.views-exposed-form--propiedades .filter-actions,
.views-exposed-form--residencial .filter-actions,
.views-exposed-form--suelo .filter-actions,
.views-exposed-form--terciario .filter-actions,
.views-exposed-form--anexos .filter-actions,
.views-exposed-form--inversiones-alternativas .filter-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.views-exposed-form--propiedades .filter-actions .form-actions,
.views-exposed-form--residencial .filter-actions .form-actions,
.views-exposed-form--suelo .filter-actions .form-actions,
.views-exposed-form--terciario .filter-actions .form-actions,
.views-exposed-form--anexos .filter-actions .form-actions,
.views-exposed-form--inversiones-alternativas .filter-actions .form-actions {
  display: flex;
  gap: var(--space-sm);
  margin: 0;
  margin-left: auto;
  padding: 0;
  border: none;
}

/* Share block inline: strip card styling when inside filter-actions. */
.filter-actions .invertir-share-block {
  background-color: transparent;
  padding: 0;
  border-radius: 0;
  margin-bottom: 0;
}

/* Mobile: apply button above, share section below. */
@media (max-width: 767px) {
  .views-exposed-form--propiedades .filter-actions,
  .views-exposed-form--residencial .filter-actions,
  .views-exposed-form--suelo .filter-actions,
  .views-exposed-form--terciario .filter-actions,
  .views-exposed-form--anexos .filter-actions,
  .views-exposed-form--inversiones-alternativas .filter-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .views-exposed-form--propiedades .filter-actions .form-actions,
  .views-exposed-form--residencial .filter-actions .form-actions,
  .views-exposed-form--suelo .filter-actions .form-actions,
  .views-exposed-form--terciario .filter-actions .form-actions,
  .views-exposed-form--anexos .filter-actions .form-actions,
  .views-exposed-form--inversiones-alternativas .filter-actions .form-actions {
    order: -1;
    margin-left: 0;
  }

  .filter-actions .invertir-share-block {
    width: 100%;
  }
}

/* ========================================
 * COMPACT FILTER LAYOUT
 * Reduces vertical space so more results are visible above the fold.
 * ======================================== */

/* Tighter row spacing. */
.views-exposed-form--propiedades .filter-row,
.views-exposed-form--residencial .filter-row,
.views-exposed-form--suelo .filter-row,
.views-exposed-form--terciario .filter-row,
.views-exposed-form--anexos .filter-row,
.views-exposed-form--inversiones-alternativas .filter-row {
  margin-bottom: var(--space-sm);
  gap: var(--space-sm);
}

/* Smaller labels. */
.views-exposed-form--propiedades label,
.views-exposed-form--residencial label,
.views-exposed-form--suelo label,
.views-exposed-form--terciario label,
.views-exposed-form--anexos label,
.views-exposed-form--inversiones-alternativas label {
  font-size: 0.75rem;
  margin-bottom: 2px;
}

/* Shorter inputs and selects. */
.views-exposed-form--propiedades input[type="text"],
.views-exposed-form--propiedades select,
.views-exposed-form--residencial input[type="text"],
.views-exposed-form--residencial select,
.views-exposed-form--suelo input[type="text"],
.views-exposed-form--suelo select,
.views-exposed-form--terciario input[type="text"],
.views-exposed-form--terciario select,
.views-exposed-form--anexos input[type="text"],
.views-exposed-form--anexos select,
.views-exposed-form--inversiones-alternativas input[type="text"],
.views-exposed-form--inversiones-alternativas select {
  padding: 6px 10px;
  font-size: var(--font-size-sm);
}

/* Tighter action row. */
.views-exposed-form--propiedades .filter-actions,
.views-exposed-form--residencial .filter-actions,
.views-exposed-form--suelo .filter-actions,
.views-exposed-form--terciario .filter-actions,
.views-exposed-form--anexos .filter-actions,
.views-exposed-form--inversiones-alternativas .filter-actions {
  margin-top: 0;
}

/* Compact price slider. */
.views-exposed-form--propiedades .price-range-slider__legend,
.views-exposed-form--residencial .price-range-slider__legend,
.views-exposed-form--suelo .price-range-slider__legend,
.views-exposed-form--terciario .price-range-slider__legend,
.views-exposed-form--anexos .price-range-slider__legend,
.views-exposed-form--inversiones-alternativas .price-range-slider__legend {
  margin-bottom: 4px;
}

.views-exposed-form--propiedades .price-range-slider__track-container,
.views-exposed-form--residencial .price-range-slider__track-container,
.views-exposed-form--suelo .price-range-slider__track-container,
.views-exposed-form--terciario .price-range-slider__track-container,
.views-exposed-form--anexos .price-range-slider__track-container,
.views-exposed-form--inversiones-alternativas .price-range-slider__track-container {
  height: 30px;
}

.views-exposed-form--propiedades .price-range-slider__display,
.views-exposed-form--residencial .price-range-slider__display,
.views-exposed-form--suelo .price-range-slider__display,
.views-exposed-form--terciario .price-range-slider__display,
.views-exposed-form--anexos .price-range-slider__display,
.views-exposed-form--inversiones-alternativas .price-range-slider__display {
  margin-top: 2px;
}

/* ========================================
 * SEARCH BLOCK (HEADER)
 * ======================================== */

.search-block-form {
  display: flex;
  align-items: center;
}

.search-block-form .form-item {
  margin: 0;
}

.search-block-form input[type="search"] {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  min-width: 200px;
}

.search-block-form .form-submit {
  padding: var(--space-xs) var(--space-md);
  font-size: var(--font-size-sm);
  margin-left: var(--space-xs);
}

/* ========================================
 * COLUMNAS VISIBLES - COLLAPSIBLE SECTION
 * ======================================== */

/* Wrapper for collapsible section */
.columnas-visibles-wrapper {
  grid-column: 1 / -1;
  margin-top: var(--space-xl);
}

/* Hide inside the exposed form; JS moves it below the table */
.views-exposed-form .columnas-visibles-wrapper {
  display: none;
}

/* Hide the toggle checkbox (it's only for CSS state) */
.columnas-visibles-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Clickable header that acts as toggle button */
.columnas-visibles-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  user-select: none;
}

.columnas-visibles-header:hover {
  background-color: var(--color-peach-light);
  border-color: var(--color-peach);
}

/* Title text */
.columnas-visibles-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* Chevron icon (arrow) */
.columnas-visibles-chevron {
  width: 20px;
  height: 20px;
  color: var(--color-text-secondary);
  transition: transform var(--transition-normal);
  flex-shrink: 0;
}

/* Rotate chevron when expanded */
.columnas-visibles-toggle:checked ~ .columnas-visibles-header .columnas-visibles-chevron {
  transform: rotate(180deg);
}

/* Change header style when expanded */
.columnas-visibles-toggle:checked ~ .columnas-visibles-header {
  background-color: var(--color-peach-light);
  border-color: var(--color-peach);
}

/* Collapsible content container */
.columnas-visibles-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow) ease-in-out;
}

/* Expand content when checkbox is checked */
.columnas-visibles-toggle:checked ~ .columnas-visibles-content {
  max-height: 1200px; /* High enough to fit all checkboxes */
  transition: max-height var(--transition-slow) ease-in-out;
}

/* Select all / deselect all action links */
.columnas-visibles-actions {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md) 0;
}

.columnas-visibles-actions a {
  font-size: var(--font-size-sm);
  color: var(--color-peach);
  text-decoration: underline;
  cursor: pointer;
}

.columnas-visibles-actions a:hover {
  color: var(--color-primary);
}

/* Hide the original label from Views Fields On/Off module */
.columnas-visibles-content .form-item-views-fields-on-off-form > label,
.columnas-visibles-content #edit-views-fields-on-off-form-wrapper > label {
  display: none;
}

/* Inner content padding */
.columnas-visibles-content .form-item-views-fields-on-off-form,
.columnas-visibles-content #edit-views-fields-on-off-form-wrapper {
  padding: var(--space-lg) var(--space-md) var(--space-md);
}

/* Checkboxes layout */
.columnas-visibles-content .form-checkboxes {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: var(--space-md) var(--space-lg) !important;
  margin: 0 !important;
}

/* Individual checkbox styling */
.columnas-visibles-content .form-checkboxes .form-type-checkbox {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--space-xs);
  margin: 0 !important;
  padding: var(--space-xs) 0;
  flex: 0 0 auto;
  min-width: 140px;
}

/* Checkbox input */
.columnas-visibles-content .form-checkboxes input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  cursor: pointer;
  border: 2px solid var(--color-border-dark);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
}

.columnas-visibles-content .form-checkboxes input[type="checkbox"]:checked {
  background-color: var(--color-peach);
  border-color: var(--color-peach);
}

.columnas-visibles-content .form-checkboxes input[type="checkbox"]:hover {
  border-color: var(--color-peach);
}

.columnas-visibles-content .form-checkboxes input[type="checkbox"]:focus {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

/* Checkbox labels */
.columnas-visibles-content .form-checkboxes label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
  line-height: var(--line-height-snug);
}

/* ========================================
 * RESPONSIVE BEHAVIOR
 * ======================================== */

/* Mobile: 2 columns */
@media (max-width: 575px) {
  .columnas-visibles-content .form-checkboxes {
    gap: var(--space-sm) var(--space-md) !important;
  }

  .columnas-visibles-content .form-checkboxes .form-type-checkbox {
    min-width: calc(50% - var(--space-md) / 2);
  }

  .columnas-visibles-title {
    font-size: var(--font-size-base);
  }
}

/* Tablet: 3 columns */
@media (min-width: 576px) and (max-width: 991px) {
  .columnas-visibles-content .form-checkboxes .form-type-checkbox {
    min-width: calc(33.333% - var(--space-lg) * 2 / 3);
  }
}

/* Desktop: 4-5 columns */
@media (min-width: 992px) {
  .columnas-visibles-content .form-checkboxes .form-type-checkbox {
    min-width: 160px;
  }
}

/* Extra large: More spacing */
@media (min-width: 1400px) {
  .columnas-visibles-content .form-checkboxes {
    gap: var(--space-lg) var(--space-xl) !important;
  }

  .columnas-visibles-content .form-checkboxes .form-type-checkbox {
    min-width: 180px;
  }
}

/* ========================================
 * ACCESSIBILITY
 * ======================================== */

/* Focus state for keyboard navigation */
.columnas-visibles-header:focus-within {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

.columnas-visibles-toggle:focus + .columnas-visibles-header {
  outline: 2px solid var(--color-info);
  outline-offset: 2px;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .columnas-visibles-content,
  .columnas-visibles-chevron,
  .columnas-visibles-header {
    transition: none;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .columnas-visibles-header {
    border: 2px solid currentColor;
  }

  .columnas-visibles-toggle:checked ~ .columnas-visibles-header {
    border: 2px solid currentColor;
  }
}

/* Print: Always expand */
@media print {
  .columnas-visibles-content {
    max-height: none !important;
    overflow: visible !important;
  }

  .columnas-visibles-chevron {
    display: none;
  }
}

/* ========================================
 * PROPERTY ROW SELECTION
 * ======================================== */

/* Checkbox column — collapse to checkbox size. */
th.views-field-selection,
td.views-field-selection {
  width: 0;
  min-width: 0;
  max-width: 28px;
  padding: 2px 4px !important;
  text-align: center;
  vertical-align: middle;
  box-sizing: content-box;
}

.views-field-selection input[type="checkbox"] {
  width: 13px;
  height: 13px;
  margin: 0;
  cursor: pointer;
  accent-color: var(--color-black);
}

/* Selection bar below the table. */
.property-selection-bar {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.property-selection-count {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-sm);
}

.property-selection-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-sm);
}

.property-selection-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  font-size: 0.75rem;
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}

.property-selection-pill__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  background: none;
  font-size: 14px;
  line-height: 1;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 50%;
}

.property-selection-pill__remove:hover {
  background-color: var(--color-error);
  color: var(--color-white);
}

.property-selection-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

.property-selection-btn {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 1px solid var(--color-border);
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.property-selection-btn--apply {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

.property-selection-btn--apply:hover {
  background-color: var(--color-text-primary);
}

.property-selection-btn--share {
  background-color: var(--color-white);
  color: var(--color-text-primary);
}

.property-selection-btn--share:hover {
  background-color: var(--color-bg-light);
}

.property-selection-btn--show-all {
  background-color: var(--color-white);
  color: var(--color-text-primary);
}

.property-selection-btn--show-all:hover {
  background-color: var(--color-bg-light);
}

.property-selection-btn--apply:disabled {
  opacity: 0.6;
  cursor: default;
}

.property-selection-btn--clear {
  background-color: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}

.property-selection-btn--clear:hover {
  color: var(--color-error);
}