/* Infotourist Contact Shortcodes Styles */

/* =============================================================================
   INFORMACIÓN DE CONTACTO - ESTILO PLANO SIN COLORES
   ============================================================================= */

.infotourist-contact-info {
    display: block;
    max-width: 400px;
    margin: 20px 0;
}

.contact-info-item {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    line-height: 1.5;
}

.contact-info-item:last-child {
    margin-bottom: 0;
}

.contact-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 12px;
    font-size: 16px;
    text-align: center;
    line-height: 24px;
    flex-shrink: 0;
    color: #666;
}

.contact-link, 
.contact-text {
    color: inherit;
    text-decoration: none;
    font-size: 16px;
    line-height: 1.4;
}

.contact-link:hover {
    text-decoration: underline;
}

.contact-text {
    display: inline-block;
}

/* =============================================================================
   MAPA DE CONTACTOS - REUTILIZAR ESTILOS DE POI
   ============================================================================= */

/* El mapa usa las clases del resource-explorer y poi-shortcodes para consistencia */
.contact-single-map {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.contact-single-map .infotourist-map-loading {
    font-size: 14px;
}

.contact-single-map .infotourist-map-error {
    border-radius: 4px;
}

/* =============================================================================
   MARCADORES PERSONALIZADOS CON IMAGEN
   ============================================================================= */

/* Estilos para las imágenes de marcadores en Google Maps */
.gm-style img[src*="wp-content/uploads"],
.gm-style img[src*="turismemont-roig.cat"] {
    border-radius: 50% !important;
    border: 3px solid white !important;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.4) !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

/* Efecto hover para marcadores de imagen */
.gm-style img[src*="wp-content/uploads"]:hover,
.gm-style img[src*="turismemont-roig.cat"]:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 5px 16px rgba(0, 0, 0, 0.5) !important;
    border-width: 4px !important;
}

/* Asegurar que las imágenes de marcador mantengan la proporción */
.gm-style img[src*="wp-content/uploads"],
.gm-style img[src*="turismemont-roig.cat"] {
    object-fit: cover !important;
    width: 50px !important;
    height: 50px !important;
}

.gm-style img[src*="wp-content/uploads"]:hover,
.gm-style img[src*="turismemont-roig.cat"]:hover {
    width: 60px !important;
    height: 60px !important;
}

/* =============================================================================
   TAXONOMÍAS DE CONTACTOS - ESTILO PLANO
   ============================================================================= */

/* Reutilizar estilos base de POI pero con modificaciones para diseño plano */
.infotourist-contact-details .infotourist-details-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.infotourist-contact-details .infotourist-details-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #eee;
    vertical-align: top;
}

.infotourist-contact-details .infotourist-details-table td:first-child {
    width: 30%;
    min-width: 120px;
}

.infotourist-contact-details .infotourist-details-table tr:last-child td {
    border-bottom: none;
}

.infotourist-contact-details h3 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 18px;
}

/* =============================================================================
   RESPONSIVO
   ============================================================================= */

@media (max-width: 768px) {
    .infotourist-contact-info {
        max-width: 100%;
    }
    
    .contact-info-item {
        margin-bottom: 15px;
    }
    
    .contact-icon {
        width: 20px;
        height: 20px;
        font-size: 14px;
        line-height: 20px;
        margin-right: 10px;
    }
    
    .contact-link,
    .contact-text {
        font-size: 15px;
    }
    
    .infotourist-contact-details .infotourist-details-table td {
        padding: 6px 8px;
        font-size: 14px;
    }
    
    .infotourist-contact-details .infotourist-details-table td:first-child {
        width: 35%;
        min-width: 100px;
    }
}

@media (max-width: 480px) {
    .contact-info-item {
        flex-direction: column;
        align-items: flex-start;
        margin-bottom: 18px;
    }
    
    .contact-icon {
        margin-bottom: 5px;
        margin-right: 0;
        font-size: 16px;
    }
    
    .infotourist-contact-details .infotourist-details-table,
    .infotourist-contact-details .infotourist-details-table tbody,
    .infotourist-contact-details .infotourist-details-table tr,
    .infotourist-contact-details .infotourist-details-table td {
        display: block;
    }
    
    .infotourist-contact-details .infotourist-details-table td {
        width: 100% !important;
        min-width: auto !important;
        border-bottom: none;
        padding: 3px 0;
    }
    
    .infotourist-contact-details .infotourist-details-table tr {
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #eee;
    }
    
    .infotourist-contact-details .infotourist-details-table tr:last-child {
        border-bottom: none;
    }
}