/**
 * TGD Color Image Swapper - Estilos para añadir al tema
 * 
 * Estos estilos pueden copiarse en Apariencia > Personalizar > CSS Adicional
 * o incluirse en el archivo style.css del tema hijo.
 */

/* Correcciones para asegurar que las miniaturas de color se muestren correctamente */
.flex-control-thumbs li img.tgd-color-thumb {
    border: 2px dashed var(--primary-color, #2A00F9) !important;
    position: relative !important;
}

/* Badge con el nombre del color - alta especificidad para evitar conflictos */
.woocommerce .flex-control-thumbs li .tgd-color-badge,
.elementor-element .flex-control-thumbs li .tgd-color-badge,
.tgd-color-badge {
    position: absolute !important;
    bottom: -10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background-color: var(--primary-color, #2A00F9) !important;
    color: white !important;
    padding: 2px 6px !important;
    border-radius: 3px !important;
    font-size: 10px !important;
    font-weight: bold !important;
    white-space: nowrap !important;
    z-index: 10 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
    display: block !important;
}

/* Corregir la regla que oculta la primera miniatura para que no afecte a otras */
.flex-control-nav.flex-control-thumbs li:first-child {
    display: none !important;
}

/* Asegurar que la miniatura del color seleccionado siempre sea visible */
.flex-control-nav.flex-control-thumbs li:nth-child(5),
.flex-control-nav.flex-control-thumbs li img.tgd-color-thumb {
    display: block !important;
}

/* Añadir bordes a la imagen de color en la galería principal */
.woocommerce-product-gallery__image.tgd-color-image::after,
.elementor-element .woocommerce-product-gallery__image.tgd-color-image::after {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    border: 3px dashed var(--primary-color, #2A00F9) !important;
    z-index: 5 !important;
    pointer-events: none !important;
}

/* Asegurar compatibilidad con el plugin de zoom */
.woocommerce-product-gallery__image.tgd-color-image .woocommerce-product-gallery__zoom-trigger {
    visibility: visible !important;
    opacity: 1 !important;
}