/* ------------------------------------------------------------------
   FIX — FORZAR FONT AWESOME EN POPUP LEAFLET
------------------------------------------------------------------ */

/* A Leaflet popup sometimes blocks external icon fonts.  
   This forces FA to load inside the popup container. */
.leaflet-container i,
.leaflet-popup-content i,
.drm-popup i,
.drm-popup .popup-row i {
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
}

/* Asegura que los pseudo-elementos funcionen */
.leaflet-popup-content i:before {
    font-family: "Font Awesome 6 Free" !important;
}

/* ------------------------------------------------------------------
   POPUP (Leaflet) — ESTILOS FORZADOS
------------------------------------------------------------------ */

/* Espaciado general del popup */
.leaflet-popup-content {
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
}

/* Contenedor interno */
.drm-popup {
    padding: 15px 18px !important;
    line-height: 1.35 !important;
}

/* Imagen */
.drm-popup-img {
    width: 100% !important;
    border-radius: 6px !important;
    margin-bottom: 15px !important;
}

/* Título */
.drm-popup .popup-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 10px !important;
    color: #1A1A1A !important;
}

/* Filas (dirección / enlaces) */
.drm-popup .popup-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px !important;
    gap: 7px;
    font-size: 15px !important;
}

/* Íconos */
.drm-popup .popup-row i {
    color: #E46A28 !important;
    font-size: 16px !important;
}

/* Enlaces */
.drm-popup a {
    color: #E46A28 !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* Hover subrayado */
.drm-popup a:hover {
    text-decoration: underline !important;
}

/* ------------------------------------------------------------------
   TARJETA IZQUIERDA — Uniformidad con popup
------------------------------------------------------------------ */

/* Íconos */
#restaurantes-list li i {
    color: #E46A28 !important;
}

/* Forzar color/estilo para enlaces y los elementos dentro de ellos */
#restaurantes-list li a {
    font-weight: 700 !important;
    font-family: inherit !important;
}

/* Hover igual al popup */
#restaurantes-list li a:hover {
    text-decoration: underline !important;
}

/* Íconos dentro del enlace (refuerzo) */
#restaurantes-list li a i {
    color: #E46A28 !important;
}

/* ------------------------------------------------------------------
   CONTENEDORES GENERALES
------------------------------------------------------------------ */

#restaurantes-container {
    display: flex;
    gap: 15px;
}

#restaurantes-list {
    width: 35%;
    max-height: 600px;
    overflow-y: auto;
}

#restaurantes-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#restaurantes-list li {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

#restaurantes-list li:hover {
    background: #f8f8f8;
}

#map {
    width: 65%;
    height: 600px;
    border-radius: 8px;
}

/* ------------------------------------------------------------------
   RESPONSIVE DESIGN — MAPA ARRIBA EN MÓVIL
------------------------------------------------------------------ */

@media (max-width: 768px) {

    #restaurantes-container {
        flex-direction: column;
    }

    #map {
        order: -1;
        width: 100% !important;
        height: 500px !important;
        margin-bottom: 15px;
    }

    #restaurantes-list {
        width: 100% !important;
        max-height: 500px !important;
        overflow-y: scroll !important;
        padding-right: 6px;
    }

    #restaurantes-list li {
        padding: 12px 16px;
    }
}

/* Contenedor de flechas */
#scroll-arrows {
    display: none;
}

@media (max-width: 768px) {
    #scroll-arrows {
        display: flex !important;
        flex-direction: row;
        gap: 6px;
        justify-content: flex-end;
        width: 100%;
        margin: 10px 0;
    }
}

#scroll-arrows button {
    background: #ffffff;
    border: 1px solid #ccc;
    padding: 4px 6px;
    font-size: 14px;
    border-radius: 6px;
    cursor: pointer;
    width: 28px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

#scroll-arrows button:hover {
    background: #f2f2f2;
}

#scroll-arrows i {
    color: #d1652e !important;
}

#scroll-arrows button:hover i {
    color: #a74f23 !important;
}

/* Ocultar controles de zoom en DESKTOP */
.leaflet-control-zoom {
    display: none !important;
}

@media (max-width: 768px) {
    /* Mostrar controles de zoom solo en móvil */
    .leaflet-control-zoom {
        display: block !important;
    }
}