/* === ESTILOS PARA MAPAS INTERACTIVOS === */

/* 1. Contenedor Principal */
/* Le da un poco de espacio y un borde al contenedor completo. */
.mms-wrapper {

    padding: 20px;
}

/* 2. Contenedor de los Filtros */
/* Organiza los botones y el selector en una fila y los centra. */
.mms-filters {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos pasen a la siguiente línea en pantallas pequeñas */
    gap: 15px; /* Espacio entre los elementos */
    margin-bottom: 25px;
    align-items: center;
}

/* 3. Estilos para los Botones de Grupo */
.mms-group-buttons {
    display: flex;
    gap: 10px; /* Espacio entre botones */
}

.mms-btn {
    background-color: #ffffff; /* Color de fondo */
    color: #333333; /* Color del texto */
    border: 1px solid #cccccc;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.2s ease-in-out; /* Transición suave */
}

/* Estilo del botón al pasar el ratón por encima */
.mms-btn:hover {
    background-color: #f0f0f0;
    border-color: #bbbbbb;
}

/* Estilo para el botón que está SELECCIONADO (activo) */
.mms-btn.active {
    background-color: #0073aa; /* Color azul de WordPress */
    color: #ffffff; /* Texto blanco */
    border-color: #0073aa;
}

/* 4. Estilo para el Selector de Ciudad (Dropdown) */
.mms-city-select {
    padding: 10px;
    border: 1px solid #cccccc;
    border-radius: 5px;
    font-size: 16px;
    min-width: 200px; /* Ancho mínimo */
}

/* 5. Área del Mapa y Mensaje */
.mms-maps-area {
    margin-top: 20px;
    min-height: 480px; /* Altura mínima para que no se contraiga */
    position: relative;
}

/* Oculta todos los mapas por defecto */
.mms-map-container {
    display: none;
}

/* Estilo para el mensaje de "Selecciona una opción" */
.mms-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #fafafa;
    border: 2px dashed #dddddd;
    color: #666666;
    border-radius: 5px;
    min-height: 450px;
    width: 100%;
    transition: opacity 0.3s ease;
}