/* Global styles */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Prevent scrollbars */
    position: fixed; /* Ensure content is fixed within the viewport */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

header {
    background-color: #f9f9f9;
    color: #111;
    padding: 1rem;
    z-index: 10;
    position: relative;
    border-bottom: 1px solid #e0e0e0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}

.header-title {
    text-align: left;
}

.header-controls {
    text-align: right;
    flex-grow: 1;
    max-width: 400px;
}

.header-controls .controls-header {
    margin-bottom: 8px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.header-controls .controls-header h2 {
    color: #333;
    font-size: 0.95rem;
    text-align: left;
    font-weight: 500;
}

.header-controls .price-range-control {
    margin-bottom: 5px;
}

h1 {
    margin: 0;
    font-size: 3rem;
    font-family: 'DM Serif Text', serif;
    font-weight: normal;
    padding-left: 20px;
}

/* Layout */
.container {
    position: absolute;
    top: 130px; /* Space for header */
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.main-content {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

.map-container {
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

#map {
    height: 100%;
    width: 100%;
    cursor: default !important; /* Set cursor to default (standard arrow) */
}

/* Override Mapbox's cursor styles */
.mapboxgl-canvas-container {
    cursor: default !important;
}

.mapboxgl-canvas-container.mapboxgl-interactive {
    cursor: default !important;
}

.mapboxgl-canvas, 
.mapboxgl-map, 
.mapboxgl-canvas-container.mapboxgl-touch-drag-pan, 
.mapboxgl-canvas-container.mapboxgl-touch-zoom-rotate {
    cursor: default !important;
}

/* Controls Panel */
.controls-panel {
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    margin-bottom: 15px;
}

.controls-header {
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.controls-header h2 {
    font-size: 1.2rem;
    margin: 0;
}

/* Slider Styles */
.price-range-control {
    margin-bottom: 15px;
}

.slider-container {
    margin: 20px 0;
    padding: 30px 0 5px 0; /* Added more top padding to make room for the labels above the slider */
    position: relative;
}

/* Price labels that move with slider thumbs */
.price-label {
    position: absolute;
    top: -18px; /* Position above the slider, closer to the thumbs */
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.85rem;
    color: #333;
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background */
    padding: 3px 6px;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    transition: left 0.1s ease; /* Smooth transition */
    pointer-events: auto; /* Enable interactions with the label */
    z-index: 5; /* Ensure labels appear above slider */
}

/* Editable price display styles */
.editable-price {
    cursor: text;
    padding: 2px 5px;
    border-radius: 3px;
    transition: all 0.2s;
    position: relative;
    border: 1px dashed transparent; /* Invisible border by default */
}

/* No pencil icon (removed as requested) */

.editable-price:hover {
    background-color: #f0f0f0;
    border-color: #ccc; /* Show border on hover */
}

.editable-price.editing {
    background-color: #fff;
    border: 1px solid #ccc;
    outline: none;
    min-width: 70px;
    display: inline-block;
}

.editable-price.error {
    border-color: #dc3545;
    background-color: #fff8f8;
}

/* This rule is now included in the above declaration */

#price-range-slider {
    height: 6px;
    background: #e6e6e6;
    border-radius: 3px;
    position: relative;
    border: none !important;  /* Remove border/stroke */
}

.header-controls .range-inputs {
    gap: 5px;
}

.header-controls .input-group label {
    color: #666;
    font-size: 0.75rem;
    font-weight: 500;
}

.header-controls .price-input {
    border: 1px solid #ddd;
    background: white;
    color: #333;
    font-size: 0.85rem;
    padding: 6px;
    border-radius: 4px;
    width: 90px;
}

.header-controls #apply-filter {
    background-color: #2c3e50;
    border: none;
    color: white;
    padding: 6px 12px;
    font-size: 0.85rem;
    border-radius: 4px;
    font-weight: 500;
}

.header-controls #apply-filter:hover {
    background-color: #1a2530;
}

/* Custom slider handle styles */
.ui-slider-handle {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #2c3e50 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
    cursor: pointer !important;
    top: -6px !important;
    margin-left: -9px !important;
    border: none !important; /* Remove border/stroke */
    outline: none !important; /* Remove outline/focus stroke */
}

.ui-slider-handle:focus,
.ui-slider-handle:active,
.ui-slider-handle:hover {
    border: none !important;
    outline: none !important;
    background: #2c3e50 !important; /* Keep same color on hover */
}

.ui-slider-range {
    background: #2196F3 !important; /* Change from green (#4CAF50) to blue (#2196F3) */
    height: 6px !important;
    border: none !important; /* Remove border/stroke */
}

/* Override additional jQuery UI classes to ensure all strokes are removed */
.ui-widget-content {
    border: none !important;
}

.ui-widget-header {
    border: none !important;
}

/* Range Inputs */
.range-inputs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
}

.input-group {
    flex: 1;
    min-width: 100px;
}

.input-group label {
    display: block;
    font-size: 0.8rem;
    margin-bottom: 5px;
}

.price-input {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 0.9rem;
}

#apply-filter {
    background-color: #2c3e50;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 0.9rem;
}

#apply-filter:hover {
    background-color: #1a2530;
}

.cities-in-range {
    margin-top: 15px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 4px;
    font-size: 0.9rem;
    text-align: center;
}

/* Navigation */
.navigation {
    margin-top: 10px;
    margin-bottom: -10px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
}

.navigation button {
    background-color: #f5f5f5;
    border: 1px solid #e0e0e0;
    color: #555;
    padding: 6px 12px;
    margin-right: 8px;
    margin-bottom: 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
    font-weight: 500;
}

.navigation button:hover {
    background-color: #e0e0e0;
    color: #333;
}

/* Navigation items - clickable breadcrumbs */
.nav-item {
    padding: 4px 8px;
    font-size: 0.9rem;
    margin-right: 10px;
}

.nav-item.current {
    font-weight: 500;
    color: #333;
}

.nav-item.clickable {
    cursor: pointer;
    color: #2196F3;
}

.nav-item.clickable:hover {
    text-decoration: underline;
}

/* Back button styling */
.nav-item.back-button {
    background-color: #2196F3;
    color: white;
    border-radius: 4px;
    padding: 4px 10px;
    transition: background-color 0.2s;
}

.nav-item.back-button:hover {
    background-color: #0b7dda;
    text-decoration: none;
}

/* Style the second nav item (Back to State) different than the first */
.nav-item.clickable:not(.back-button) {
    border: 1px solid #2196F3;
    border-radius: 4px;
    padding: 3px 10px;
    transition: background-color 0.2s;
}

.nav-item.clickable:not(.back-button):hover {
    background-color: #e6f3ff;
    text-decoration: none;
}

.nav-separator {
    margin: 0 5px;
    color: #999;
}

/* Loading indicator */
#loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 255, 255, 0.9);
    padding: 15px 25px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    z-index: 10;
    font-weight: bold;
}

/* Footer */
.footer {
    font-size: 0.8rem;
    color: #777;
    padding-top: 10px;
    margin-top: 10px;
    border-top: 1px solid #eee;
    text-align: center;
}

/* Map markers info window */
.info-window {
    padding: 8px;
    font-family: 'DM Serif Text', serif;
}

.info-window h3 {
    margin-bottom: 5px;
    font-size: 16px;
    font-family: 'DM Serif Text', serif;
    font-weight: normal;
}

.info-window p {
    margin: 3px 0;
    font-size: 14px;
    font-family: 'DM Serif Text', serif;
}

/* Mapbox Popup Styles */
.mapboxgl-popup {
    max-width: 250px;
}

.mapboxgl-popup-content {
    padding: 15px;
    border-radius: 6px;
    font-family: 'DM Serif Text', serif;
}

/* Mapbox marker */
.marker {
    background-size: cover;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: default !important; /* Change to default cursor */
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* City and neighborhood markers */
.city-marker, .neighborhood-marker {
    opacity: 0.8 !important; /* Force 80% opacity (20% transparency) */
    cursor: default !important; /* Change to default cursor */
}

/* Mapbox state marker (larger) */
.state-marker {
    width: 36px;
    height: 36px;
    cursor: default !important; /* Change to default cursor */
}

/* Slider error state */
.error {
    border-color: #dc3545 !important;
    background-color: #fff8f8 !important;
}

.error-message {
    color: #dc3545;
    font-size: 0.8rem;
    margin-top: 5px;
    display: none;
}

/* Responsive design */
@media (max-width: 768px) {
    .header-container {
        flex-direction: column;
        align-items: stretch;
    }
    
    .header-title {
        margin-bottom: 10px;
        text-align: center;
    }
    
    .header-controls {
        max-width: 100%;
    }
    
    .container {
        top: 220px; /* Adjust for taller header on mobile */
    }
    
    .navigation {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    header {
        padding: 0.8rem;
    }
    
    h1 {
        font-size: 2rem;
        padding-left: 10px;
    }
    
    .header-controls .controls-header h2 {
        font-size: 0.9rem;
    }
    
    .range-inputs {
        flex-direction: column;
        gap: 5px;
    }
    
    .input-group {
        width: 100%;
    }
    
    #apply-filter {
        width: 100%;
        margin-top: 5px;
    }
}