/* Property Search Form Styles - Bento Box Layout 20 colonne */

.property-search-form {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: auto auto auto;
    gap: 16px;
    background: var(--e-global-color-aa5884c);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    margin-bottom: 30px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

/* Loading state per risultati live */
.custom-list-view, .listing-view, .listing-wrap {
    transition: opacity 0.3s ease;
}

.custom-list-view.loading, .listing-view.loading, .listing-wrap.loading {
    position: relative;
}

.custom-list-view.loading::after, .listing-view.loading::after, .listing-wrap.loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50px;
    height: 50px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #b88a44;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1000;
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Prima riga: 3 elementi distribuiti su 20 colonne */
.property-search-form select:nth-child(1) { 
    grid-row: 1; 
    grid-column: 1 / 8; /* 7 colonne - Tipo proprietà */
}
.property-search-form select:nth-child(2) { 
    grid-row: 1; 
    grid-column: 8 / 14; /* 6 colonne - Città */
}
.property-search-form select:nth-child(3) { 
    grid-row: 1; 
    grid-column: 14 / 21; /* 7 colonne - Quartieri */
}

/* Seconda riga: 4 elementi distribuiti su 20 colonne */
.property-search-form select:nth-child(4) { 
    grid-row: 2; 
    grid-column: 1 / 6; /* 5 colonne - Camere */
}
.property-search-form select:nth-child(5) { 
    grid-row: 2; 
    grid-column: 6 / 11; /* 5 colonne - Bagni */
}
.property-search-form .range-control:nth-child(6) { 
    grid-row: 2; 
    grid-column: 11 / 16; /* 5 colonne - Prezzo */
}
.property-search-form .range-control:nth-child(7) { 
    grid-row: 2; 
    grid-column: 16 / 21; /* 5 colonne - Superficie */
}

/* Buttons styling */
.property-search-form button[type="reset"] {
    grid-row: 3;
    grid-column: 1 / 6; /* 5 colonne */
    background: #dc3545 !important;
    border: 2px solid #dc3545 !important;
    border-radius: 8px !important;
    padding: 0px 18px !important;
    font-size: 14px !important;
    color: var(--e-global-color-aa5884c) !important;
    width: 100% !important;
    height: 46px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
}

.property-search-form button[type="reset"]:hover {
    background: #c82333 !important;
    border-color: #c82333 !important;
    transform: translateY(-2px);
}

.property-search-form button[type="submit"] {
    grid-row: 3;
    grid-column: 16 / 21; /* 5 colonne */
    background: #b88a44 !important;
    border: 2px solid #b88a44 !important;
    border-radius: 8px !important;
    padding: 0px 18px !important;
    font-size: 14px !important;
    color: var(--e-global-color-aa5884c) !important;
    width: 100% !important;
    height: 46px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
}

.property-search-form button[type="submit"]:hover {
    background: #966d33 !important;
    border-color: #966d33 !important;
    transform: translateY(-2px);
}

/* All select elements - unified white style */
.property-search-form select,
.property-search-form select.white-select,
.range-control .range-min,
.range-control .range-max {
    background: var(--e-global-color-aa5884c) !important;
    border: 2px solid #e1e5e9 !important;
    border-radius: 8px !important;
    padding: 0px 18px !important;
    font-size: 14px !important;
    color: #2c3e50 !important;
    width: 100% !important;
    min-width: unset !important;
    height: 46px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23666' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 8px !important;
}

.property-search-form select:focus,
.property-search-form select.white-select:focus,
.range-control .range-min:focus,
.range-control .range-max:focus {
    outline: none !important;
    border-color: #b88a44 !important;
    box-shadow: 0 0 0 3px rgba(184, 138, 68, 0.1) !important;
}

.property-search-form select:hover,
.property-search-form select.white-select:hover,
.range-control .range-min:hover,
.range-control .range-max:hover {
    border-color: #b88a44 !important;
}

/* Select disabilitato */
.property-search-form select:disabled,
.property-search-form select.white-select:disabled {
    background: #f5f6f7 !important;
    border-color: #e1e5e9 !important;
    color: #95a5a6 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.property-search-form select:disabled:hover,
.property-search-form select.white-select:disabled:hover {
    border-color: #e1e5e9 !important;
}

.property-search-form select option {
    background: var(--e-global-color-aa5884c) !important;
    color: #2c3e50 !important;
    padding: 8px !important;
}

/* Range controls styling - per prezzo e superficie con popup */
.range-control {
    display: block;
    position: relative;
    width: 100%;
}

/* Styles for select-based range controls */
.select-container {
    display: flex;
    gap: 8px;
    align-items: center;
}
.select-container .range-select {
    padding: 8px 10px !important;
    border-radius: 8px !important;
    background: var(--e-global-color-aa5884c) !important;
    border: 2px solid #e1e5e9 !important;
    height: 46px !important;
    font-size: 14px !important;
    color: #2c3e50 !important;
    appearance: none !important;
}

.range-toggle {
    background: var(--e-global-color-aa5884c) !important;
    border: 2px solid #e1e5e9 !important;
    border-radius: 8px !important;
    padding: 0px 18px !important;
    font-size: 14px !important;
    color: #2c3e50 !important;
    width: 100% !important;
    height: 46px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-align: left !important;
    font-weight: 400 !important;
}

.range-toggle:hover {
    border-color: #b88a44 !important;
}

.range-control.open .range-toggle {
    border-color: #b88a44 !important;
}

.range-label {
    color: #2c3e50;
    font-weight: 400;
}

.range-dropdown {
    position: absolute;
    left: 0;
    top: 110%;
    background: var(--e-global-color-aa5884c);
    border: 2px solid #e1e5e9;
    padding: 20px;
    border-radius: 8px;
    display: none;
    z-index: 1000; /* aumenta per stare sopra altri elementi */
    box-shadow: 0 6px 18px rgba(0,0,0,0.15);
    width: 100%;
    font-family: var(--e-global-typography-secondary-font-family), Sans-serif;
}

.range-control.open .range-dropdown {
    display: block;
}

.slider-control-inner {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.slider-control-inner .slider-label {
    display: block;
    font-weight: 600;
    color: var(--colore-primario-blu) !important;
    font-size: 13px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.slider-value-display {
    text-align: center;
}

.slider-control-inner .slider-value {
    display: block;
    color: #2c3e50;
    font-size: 14px;
    font-weight: 600;
}

.slider-control-inner .slider-container {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
}

/* Highlight marrone tra i due pallini */
.slider-range-highlight {
    position: absolute;
    height: 6px;
    background: #b88a44;
    border-radius: 3px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 0;
}

/* Slider styling dentro il dropdown */
.slider-container .range-slider {
    position: absolute;
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    outline: none;
    pointer-events: none;
}

.slider-container .range-slider::-webkit-slider-track {
    width: 100%;
    height: 6px;
    background: #e1e5e9;
    border-radius: 3px;
}

.slider-container .range-slider::-moz-range-track {
    width: 100%;
    height: 6px;
    background: #e1e5e9;
    border-radius: 3px;
}

.slider-container .range-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: #b88a44;
    border: 3px solid var(--e-global-color-aa5884c);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.slider-container .range-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #b88a44;
    border: 3px solid var(--e-global-color-aa5884c);
    border-radius: 50%;
    cursor: pointer;
    pointer-events: all;
    transition: transform 0.2s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

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

.slider-container .range-slider::-moz-range-thumb:hover {
    transform: scale(1.15);
}

/* Posizionamento slider min e max sovrapposti */
.slider-container .range-slider-min {
    z-index: 2;
    padding: 12px 0;
    margin: 0;
}

.slider-container .range-slider-max {
    z-index: 1;
    padding: 12px 0;
    margin: 0;
}

/* Submit button */
.property-search-form button[type="submit"] {
    background: #b88a44 !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--e-global-color-aa5884c) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    height: 46px !important;
    min-width: 120px !important;
}

.property-search-form button[type="submit"]:hover {
    background: #966d33 !important;
    transform: translateY(-2px);
}

/* Responsive design */

/* No results message */
.no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.no-results p {
  margin: 0;
}

.no-results .btn-reset-search {
  background: #dc3545 !important;
  border: 2px solid #dc3545 !important;
  border-radius: 8px !important;
  padding: 0px 18px !important;
  font-size: 14px !important;
  color: var(--e-global-color-aa5884c) !important;
  width: auto !important;
  min-width: 140px !important;
  height: 46px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-weight: 600 !important;
  margin-top: 18px;
}

/* Opportunità pill styling - rimosso da qui; ora nel CSS della card
     Se mai servisse nello specifico contesto del form, scopa così:
     .property-search-form .opportunita-pill { ... } */