/* styles.css */

/* Mobile region dropdown */
.map-region-select-mobile {
    display: none;
}

@media (max-width: 768px) {
    .container_map {
        display: none;
    }

    .map-region-select-mobile {
        display: block;
        padding: 10px 15px;
        background: white;
        border-radius: 8px;
        box-shadow: 0 0 10px rgba(0,0,0,0.1);
        margin-bottom: 10px;
    }

    .map-region-select-mobile select {
        width: 100%;
        padding: 9px 12px;
        border: 1px solid #ddd;
        border-radius: 4px;
        font-size: 1rem;
        background: white;
        color: #333;
        appearance: auto;
    }

    .map-region-select-mobile label {
        display: block;
        font-size: 0.85rem;
        color: #666;
        margin-bottom: 6px;
        font-weight: 600;
    }
}

.container_map {
    
    padding: 20px;
    background-color: white;
    
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.title {
    text-align: center;
    margin-bottom: 20px;
}

.map-container {
    width: 100%;
   /* height: 600px; */
   
}

.region {
    fill: #e5e7eb;
    stroke: white;
    stroke-width: 1;
    cursor: pointer;
    transition: fill 0.2s ease;
}

.region:hover {
    fill: #93c5fd;
}

.region.selected {
    fill: #2563eb;
}

.other-region {
    fill: #e5e7eb;
    stroke: white;
    stroke-width: 1;
    opacity: 0.5;
}