.listing-search-form {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1rem;
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.listing-search-field {
margin-bottom: 20px;
}
.listing-search-field label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: #374151;
font-size: 14px;
}
.listing-select,
.listing-input {
width: 100%;
padding: 0.8rem;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 1rem;
background-color: #fff;
transition: border-color 0.2s, box-shadow 0.2s;
}
.listing-select:hover,
.listing-input:hover {
border-color: #719430;
}
.listing-select:focus,
.listing-input:focus {
outline: none;
border-color: #719430;
box-shadow: 0 0 0 2px rgba(113, 148, 48, 0.2);
}
.region-checkboxes {
max-height: 200px;
overflow-y: auto;
padding: 8px;
border: 1px solid #e5e7eb;
border-radius: 6px;
background: #ffffff;
}
.region-checkbox {
display: flex;
align-items: center;
padding: 8px;
margin: 2px 0;
border-radius: 4px;
cursor: pointer;
transition: all 0.2s ease;
}
.region-checkbox:hover {
background: rgba(var(--primary-color), 0.05);
}
.region-checkbox input[type="checkbox"] {
margin-right: 10px;
width: 18px;
height: 18px;
border: 2px solid #e5e7eb;
border-radius: 4px;
cursor: pointer;
position: relative;
transition: all 0.2s ease;
}
.region-checkbox input[type="checkbox"]:checked {
background-color: var(--primary-color);
border-color: var(--primary-color);
}
.region-checkbox input[type="checkbox"]:checked::after {
content: "✓";
position: absolute;
color: white;
font-size: 14px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.checkbox-label {
font-size: 14px;
color: #374151;
}
.price-range {
display: flex;
gap: 1rem;
}
.price-range input {
flex: 1;
}
.listing-search-submit {
background-color: #719430;
color: white;
border: none;
padding: 1rem;
border-radius: 4px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.2s;
width: 100%;
}
.listing-search-submit:hover {
background-color: #5a7a25;
}
.search-icon {
font-size: 18px;
} @media (max-width: 768px) {
.listing-search-form {
padding: 0.8rem;
}
.price-range {
flex-direction: column;
gap: 0.5rem;
}
.price-range input {
width: 100%;
}
.region-checkboxes {
max-height: 150px;
}
} .region-checkboxes::-webkit-scrollbar {
width: 8px;
}
.region-checkboxes::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
.region-checkboxes::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
.region-checkboxes::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}