/* Basic Reset & Root Variables */
:root {
    --primary-color: #4CAF50;
    --secondary-color: #FF9800;
    --light-gray: #f4f4f4;
    --medium-gray: #e0e0e0;
    --dark-gray: #555;
    --text-color: #333;
    --bg-color: #ffffff;
    --sidebar-bg: #f8f9fa;
    --border-radius: 4px;
    --spacing-unit: 8px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    background-color: var(--bg-color);
    color: var(--text-color);
}

/* Layout */
.container {
    display: flex;
    flex-direction: column; /* Mobile first: stack */
    height: 100%;
    overflow: hidden; /* Prevent scrolling on container */
}

.sidebar {
    background-color: var(--sidebar-bg);
    padding: calc(var(--spacing-unit) * 2);
    overflow-y: auto;
    flex-shrink: 0;
    border-bottom: 1px solid var(--medium-gray);
    height: 45%; /* Adjust as needed for mobile */
    display: flex;
    flex-direction: column;
}

.map-container {
    flex-grow: 1; /* Take remaining space */
    height: 55%; /* Adjust as needed for mobile */
}

#map {
    height: 100%;
    width: 100%;
    background-color: var(--light-gray);
}

/* Sidebar Elements */
.sidebar-header {
    padding-bottom: var(--spacing-unit);
    border-bottom: 1px solid var(--medium-gray);
    margin-bottom: var(--spacing-unit);
}

.sidebar section {
    margin-bottom: calc(var(--spacing-unit) * 2);
}

.sidebar h1 {
    font-size: 1.3em;
    color: var(--primary-color);
    text-align: center;
}

.sidebar h3 {
    font-size: 1.1em;
    margin-bottom: var(--spacing-unit);
    color: var(--dark-gray);
}
.sidebar h4 {
    font-size: 1em;
    margin: 0; /* Remove default margin */
    font-weight: 600; /* Make summary slightly bolder */
}

/* Use details/summary for collapsible sections */
.filter-group summary {
    cursor: pointer;
    padding: var(--spacing-unit) 0;
    border-bottom: 1px solid var(--light-gray);
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none; /* Remove default marker */
}
.filter-group summary::-webkit-details-marker { display: none; } /* Hide marker in Chrome/Safari */

.filter-group summary::after { /* Add arrow indicator */
    content: '▼';
    font-size: 0.8em;
    transition: transform 0.2s ease-in-out;
    margin-left: var(--spacing-unit);
}
.filter-group[open] summary::after {
    transform: rotate(180deg);
}
.filter-group > div { /* Content within details */
    padding-top: var(--spacing-unit);
}


/* Forms & Controls */
input[type="text"],
input[type="number"],
select {
    width: 100%;
    padding: var(--spacing-unit);
    margin-bottom: var(--spacing-unit);
    border: 1px solid var(--medium-gray);
    border-radius: var(--border-radius);
    font-size: 0.95em;
}
input[type="range"] {
    width: 100%;
    margin-top: calc(var(--spacing-unit) / 2);
    accent-color: var(--primary-color);
}

button {
    padding: calc(var(--spacing-unit) * 1.2) calc(var(--spacing-unit) * 1.5);
    border: none;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-size: 0.95em;
    font-weight: 600;
    transition: background-color 0.2s ease;
    width: 100%; /* Make buttons full width by default */
    margin-top: var(--spacing-unit);
}
button.button-primary {
    background-color: var(--primary-color);
    color: white;
}
button.button-primary:hover {
    background-color: #45a049; /* Darker shade */
}
button.button-secondary {
    background-color: var(--medium-gray);
    color: var(--text-color);
}
button.button-secondary:hover {
    background-color: #cccccc; /* Darker shade */
}
button#add-condition-button {
    width: auto; /* Override full width */
    padding: calc(var(--spacing-unit) * 0.5) var(--spacing-unit);
    font-size: 0.85em;
    margin-top: 0;
    margin-left: auto; /* Push to right */
}
.added-condition button { /* Remove button */
    background-color: #f44336;
    color: white;
    padding: 2px 5px;
    font-size: 0.8em;
    line-height: 1;
    border-radius: 50%;
    margin-left: var(--spacing-unit);
    border: none;
    cursor: pointer;
}
.find-button {
    margin-top: calc(var(--spacing-unit) * 2); /* More space above main button */
}


/* Checkboxes / Radios */
.checkbox-item { /* Keep using this class name */
    display: flex;
    align-items: flex-start; /* Align top for label + details */
    padding: calc(var(--spacing-unit) / 2) 0;
    position: relative;
}
.checkbox-item input[type="checkbox"] {
    margin-right: var(--spacing-unit);
    margin-top: 0.2em; /* Align checkbox better with first line */
    width: 1.1em;
    height: 1.1em;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}
.checkbox-item label {
    flex-grow: 1;
    cursor: pointer;
    display: inline; /* Allow details span to follow */
}
.checkbox-item .details {
    font-size: 0.8em; /* Smaller details text */
    color: var(--dark-gray);
    /* margin-left: calc(var(--spacing-unit) * 3); Indent removed */
    display: inline; /* Keep details inline if possible */
    margin-left: var(--spacing-unit);
    line-height: 1.2;
}
.require-all-toggle {
    margin-top: var(--spacing-unit);
    padding-top: var(--spacing-unit);
    border-top: 1px solid var(--light-gray);
}
.require-all-toggle label {
    font-weight: 600;
}

/* Condition List */
.condition-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-unit);
}
.condition-controls label {
    font-size: 0.9em;
}
.condition-controls select,
.condition-controls input[type="number"] {
    flex-grow: 1; /* Allow them to grow */
    margin-bottom: 0; /* Remove bottom margin */
    width: auto; /* Override default width */
    max-width: 120px; /* Limit max width */
}
.added-condition {
    background-color: var(--light-gray);
    padding: calc(var(--spacing-unit) / 2) var(--spacing-unit);
    border-radius: var(--border-radius);
    margin-bottom: calc(var(--spacing-unit) / 2);
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.9em;
}
.added-condition span { flex-grow: 1; margin-right: var(--spacing-unit); }

/* Footer/Status */
.sidebar-footer {
    margin-top: auto; /* Push footer to bottom */
    padding-top: var(--spacing-unit);
    border-top: 1px solid var(--medium-gray);
}
#status {
    font-style: italic;
    font-size: 0.9em;
    color: var(--dark-gray);
    min-height: 1.2em;
    text-align: center;
}

/* Amenity Emojis */
.amenity-emoji { display: inline-block; width: 1.3em; text-align: center; }

/* Map Markers & Highlights */
.emoji-marker-on-map {
    font-size: 20px; text-align: center; line-height: 1;
    text-shadow: 0px 0px 3px rgba(255, 255, 255, 0.9);
    background-color: transparent !important;
    border: none !important;
    width: 20px !important; /* Ensure consistent size */
    height: 20px !important;
}
.highlight-cluster {
    fillOpacity: 0.1; /* Even fainter */
    weight: 2;
    color: var(--secondary-color);
    fillColor: var(--secondary-color);
}

/* Larger Screen Layout Adjustments */
@media (min-width: 768px) {
    .container {
        flex-direction: row; /* Side-by-side */
    }
    .sidebar {
        width: 360px; /* Slightly wider fixed width */
        height: 100%;
        border-right: 1px solid var(--medium-gray);
        border-bottom: none; /* Remove bottom border */
    }
    .map-container {
        height: 100%;
    }
    .amenity-section, .conditions-section {
        max-height: 350px; /* Allow more height */
    }
    .checkbox-item .details {
       display: block; /* Stack details below label on larger screens */
       margin-left: calc(var(--spacing-unit) * 3); /* Re-apply indent */
       margin-top: calc(var(--spacing-unit) / 4);
    }
}

/* Leaflet Control Styles */
.leaflet-control-layers.legend-control { /* Style legend specifically */
     background-color: rgba(255,255,255,0.9);
     padding: 10px;
     border-radius: 4px;
     max-height: 300px;
     overflow-y: auto;
     font-size: 0.85em;
     box-shadow: 0 1px 5px rgba(0,0,0,0.2);
     line-height: 1.4;
}
.leaflet-control-attribution a {
    color: var(--primary-color);
}
.leaflet-popup-content-wrapper {
    border-radius: var(--border-radius);
}
.leaflet-popup-content {
    font-size: 0.95em;
}
.leaflet-popup-content hr {
    border: none;
    border-top: 1px solid var(--light-gray);
    margin: calc(var(--spacing-unit) * 0.75) 0;
}
.leaflet-tooltip {
    border-radius: var(--border-radius);
    font-size: 0.9em;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--text-color);
}