/**
 * citybook-custom.css
 * -----------------------------------------------------------------------
 * Ajustes propios sobre el template original. Se carga DESPUÉS de
 * style.css/color.css para que estas reglas ganen.
 * -----------------------------------------------------------------------
 */

/* --- Tarjetas de locales: mismo tamaño de imagen y misma altura del
   bloque de información, sin importar el tamaño real de la foto ni el
   largo del texto --- */
.card-listing .geodir-category-img {
    height: 220px;
    overflow: hidden;
}
.card-listing .geodir-category-img img {
    height: 220px;
    width: 100%;
    object-fit: cover;
    float: none;
}
.card-listing .geodir-category-content {
    min-height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.card-listing .geodir-category-content h3.listing-title {
    min-height: 23px;
    line-height: 23px;
    margin-bottom: 10px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.card-listing .geodir-category-content .listing-geodir-category {
    align-self: flex-start;
}

/* --- Mapa: el template calcula la altura por JavaScript (scripts.js),
   pero si por cualquier motivo ese script no llega a correr antes de que
   Leaflet inicialice el mapa, el contenedor queda con 0px de alto y el
   mapa se ve roto. Este mínimo garantiza que SIEMPRE tenga una altura
   real desde el primer render, sin depender de JS. --- */
.map-container.column-map {
    min-height: 500px;
}
#map-main, #singleMap {
    background: #e5e3df; /* color de fondo mientras cargan los tiles */
}

/* Los tiles de Leaflet no deben heredar restricciones de ancho de otras
   reglas globales del template. */
.leaflet-container img {
    max-width: none !important;
    width: auto;
    height: auto;
}

/* --- Buscador: input, select y botón en una sola línea, con jerarquía
   visual clara (el select se ve como parte del formulario, el celeste
   sólido queda reservado para el botón de acción). --- */
.listsearch-input-wrap {
    display: flex;
    align-items: stretch;
    gap: 12px;
    flex-wrap: wrap;
}
.listsearch-input-wrap .listsearch-input-item {
    float: none;
    width: auto;
    margin: 0;
    padding: 0;
}
.listsearch-input-wrap .listsearch-input-item:first-child {
    flex: 2 1 260px;
}
.listsearch-input-wrap .listsearch-input-item:nth-child(2) {
    flex: 1 1 220px;
}
.listsearch-input-wrap .listsearch-input-item input {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}
.listsearch-input-wrap .listsearch-input-item .nice-select {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #f9f9f9;
    border-color: #eee;
    color: #333;
    line-height: 46px;
}
.listsearch-input-wrap .listsearch-input-item .nice-select:after {
    border-bottom: 2px solid #999;
    border-right: 2px solid #999;
}
.citybook-native-select {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    background: #f9f9f9 url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 16px center;
    background-size: 16px;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 0 40px 0 20px;
    font-size: 14px;
    color: #333;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}
.listsearch-input-wrap .fs-map-btn {
    flex: 0 0 auto;
    width: auto;
    padding: 0 32px;
    white-space: nowrap;
}
@media only screen and (max-width: 640px) {
    .listsearch-input-wrap .listsearch-input-item,
    .listsearch-input-wrap .fs-map-btn {
        flex: 1 1 100%;
    }
}

/* --- Agrupaciones de marcadores en el mapa (Leaflet.markercluster):
   por defecto vienen en tonos verde/amarillo/naranja y se ven poco. Se
   pasan al celeste de la marca, con número más grande y en blanco. --- */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
    background-color: rgba(77, 183, 254, 0.35);
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
    background-color: #4DB7FE;
    width: 36px;
    height: 36px;
    margin-left: 2px;
    margin-top: 2px;
}
.marker-cluster span {
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    line-height: 36px;
}

/* --- Borde de la tarjeta un poco más oscuro, para que se note más --- */
.card-listing .geodir-category-listing {
    border: 1px solid #d5d5d5;
}

/* --- Dirección de la tarjeta: alto fijo y recortada a 2 líneas, para
   que dos tarjetas con direcciones de distinto largo terminen midiendo
   exactamente lo mismo. --- */
.card-listing .geodir-category-location {
    height: 64px;
    line-height: 18px;
    float: none;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.card-listing .geodir-category-location a {
    display: block;
}

/* --- Tarjeta simple (locales no premium, sin foto): nombre + familia +
   dirección, sin badge ni estrellas. Clases propias, sin compartir nada
   con la tarjeta con foto, para que no le afecte ningún otro ajuste. --- */
.citybook-simple-card {
    padding: 30px 20px;
    text-align: left;
}
.citybook-simple-title {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    height: 30px;
    line-height: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.citybook-simple-title a {
    color: #334e6f;
}
.citybook-simple-divider {
    border-top: 1px solid #eee;
    margin: 16px 0;
}
.citybook-simple-familia {
    text-align: left;
    color: #999;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.citybook-simple-address {
    text-align: left;
    font-size: 13px;
    color: #666;
    height: 40px;
    line-height: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.citybook-simple-address i {
    color: #4DB7FE;
    margin-right: 4px;
}

/* --- Encabezado de detalle.php sobre fondo celeste degradado: los
   botones venían pensados para ir sobre una foto oscura, y con el fondo
   celeste se pierden. Se pasan a blanco sólido con texto azul, para que
   contrasten bien. --- */
.list-single-section.gradient-bg .viewed-counter,
.list-single-section.gradient-bg .custom-scroll-link {
    background: #fff;
    color: #2a3a55 !important;
    border-color: #fff;
}
.list-single-section.gradient-bg .viewed-counter i,
.list-single-section.gradient-bg .custom-scroll-link i {
    color: #4DB7FE;
}
.list-single-section.gradient-bg .viewed-counter:hover,
.list-single-section.gradient-bg .custom-scroll-link:hover {
    background: #eef7ff;
}
.list-single-section.gradient-bg .list-single-header-cat a {
    background: #fff;
    color: #2a3a55;
}

/* --- Etiquetas de detalle.php: el template original solo daba espacio
   horizontal entre ellas (margin-right), pero no vertical -- cuando
   pasan a una segunda fila, quedaban pegadas de arriba a abajo. --- */
.tags-stylwrap a {
    margin-bottom: 10px;
}

/* --- Mapa de la ficha (sidebar): cuadrado en vez de rectangular fijo,
   para que se vean bien todas las sucursales sin quedar aplastado. --- */
#singleMap {
    height: auto;
    aspect-ratio: 1 / 1;
}

/* --- Encabezado de detalle.php: el template original reserva 180px de
   espacio arriba/abajo, pensado para un fondo de foto -- con el fondo de
   color plano que usamos, ese espacio queda vacío de más. Se reduce. --- */
section.single-par.gradient-bg {
    padding: 60px 0;
}

/* --- Ícono de WhatsApp para el botón de compartir (no venía en la
   librería de íconos original, los demás sí). --- */
.share-icon-whatsapp:before {
    content: "\f232";
}

/* --- "Twitter" ahora se llama X, y esta librería de íconos no tiene el
   logo nuevo -- se reemplaza el pajarito por la letra "X" tal cual. --- */
.share-icon-twitter:before {
    font-family: Arial, sans-serif;
    font-weight: 700;
    content: "X";
}