/**
 * TGD Color Image Swapper - Estilos CSS
 * 
 * Estilos para mejorar la experiencia visual cuando se cambian las imágenes
 * al seleccionar diferentes colores en las variaciones de producto.
 */

/* Añadir una transición suave a las imágenes de la galería para los cambios */
.woocommerce-product-gallery__image {
    transition: opacity 0.3s ease-in-out;
}

/* Indicador visual para mostrar que se está cargando una nueva imagen */
.woocommerce-product-gallery.loading {
    position: relative;
}

.woocommerce-product-gallery.loading::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.6) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 50 50"><path fill="%232A00F9" d="M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z"><animateTransform attributeType="xml" attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="0.6s" repeatCount="indefinite"/></path></svg>') center no-repeat;
    z-index: 10;
    border-radius: 4px;
}

/* Destacar visualmente el color seleccionado */
.swatchly-swatch.swatchly-selected {
    transform: scale(1.1);
    box-shadow: 0 0 0 2px var(--primary-color, #2A00F9);
    z-index: 5;
}

/* Añadir un efecto sutil de hover en las miniaturas */
.flex-control-thumbs li img:hover {
    opacity: 0.7;
}

/* Mejorar la visibilidad de la miniatura activa */
.flex-control-thumbs li img.flex-active {
    border: 2px solid var(--primary-color, #2A00F9);
    opacity: 1;
}

/* Estilos específicos para la miniatura de la imagen de color */
.flex-control-thumbs li img.tgd-color-thumb {
    border: 2px dashed var(--primary-color, #2A00F9) !important;
    position: relative !important;
}

/* Añadir un badge con el nombre del color */
.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;
}

/* Estilos para el contenedor de la miniatura de color */
.flex-control-thumbs li {
    position: relative !important;
    margin: 0 5px 15px 0; /* Añadir espacio inferior extra para el badge */
}

/* Añadir un borde distintivo a la imagen de color en la galería principal */
.woocommerce-product-gallery__image.tgd-color-image {
    position: relative !important;
}

.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;
}

/* Asegurarse de que el botón de zoom aparezca correctamente en imágenes de color */
.woocommerce-product-gallery__image.tgd-color-image .woocommerce-product-gallery__zoom-trigger {
    visibility: visible !important;
    opacity: 1 !important;
}

/* Hacer que la quinta miniatura sea visible (anular regla que oculta la primera) */
.flex-control-nav.flex-control-thumbs li:nth-child(5) {
    display: block !important;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .woocommerce-product-gallery.loading::after {
        background-size: 30px;
    }
    
    .tgd-color-badge {
        font-size: 9px !important;
        padding: 1px 4px !important;
        bottom: -8px !important;
    }
    
    .flex-control-thumbs li {
        margin-bottom: 15px !important;
    }
}