/* Efecto de atención para los botones de producto */
.attention-effect-product {
    animation: pulse-product 1.5s infinite;
    transition: all 0.3s ease;
}

.attention-effect-product:hover,
.attention-effect-product:focus {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Animación de pulso para producto */
@keyframes pulse-product {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(75, 0, 130, 0.7); /* Verde */
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(75, 0, 130, 0); /* Verde */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(75, 0, 130, 0); /* Verde */
    }
}

/* Efecto de atención para los botones de video */
.attention-effect-video {
    animation: pulse-video 1.5s infinite;
    transition: all 0.3s ease;
}

.attention-effect-video:hover,
.attention-effect-video:focus {
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Animación de pulso para video */
@keyframes pulse-video {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.7); /* Celeste */
    }
    70% {
        transform: scale(1.1);
        box-shadow: 0 0 0 10px rgba(23, 162, 184, 0); /* Celeste */
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(23, 162, 184, 0); /* Celeste */
    }
}

/* Estilos Responsivos */
@media (max-width: 768px) {
    .attention-effect-product:hover,
    .attention-effect-product:focus,
    .attention-effect-video:hover,
    .attention-effect-video:focus {
        transform: none; /* Eliminar transformaciones en móviles */
        box-shadow: none; /* Eliminar sombras en móviles */
    }
}

#productFeaturesContainer .form-label {
    flex-grow: 1;
    margin-bottom: 0;
    width: 100px; /* Ancho fijo para las etiquetas */
}

#productFeaturesContainer .btn-outline-secondary {
    width: 36px;
}

#productFeaturesContainer .btn-outline-primary {
    width: 36px;
}

#productFeaturesContainer .input-group-sm input {
    width: 50px;
}

#productFeaturesContainer .d-flex {
    gap: 8px; /* Espacio entre los elementos */
}

#productFeaturesContainer .input-group-sm {
    flex-shrink: 0; /* Evitar que el grupo de entrada se reduzca */
}

#productPicture.custom-size {
    width: 100%;
    height: 500px; /* Ajusta la altura según tus necesidades */
    max-height: 500px; /* Asegura que no se extienda más allá de este tamaño */
    object-fit: contain; /* Mantiene la proporción de la imagen sin recortarla */
    object-position: center;
    background-color: #f8f9fa; /* Color de fondo para ver el espacio en blanco si la imagen no llena el contenedor */
}

#productFeaturesContainer {
    max-height: 300px; /* Ajusta este valor según sea necesario */
    overflow-y: auto; /* Habilita el scroll vertical */
}

#videoModal .loader {
    display: none;
    text-align: center;
    padding: 20px;
}

#videoModal iframe {
    display: none;
    width: 100%;
}

.custom-zoom-icon {
    background-color: rgba(
        255,
        255,
        255,
        0.8
    ); /* Fondo semitransparente para el icono */
    border-radius: 50%; /* Bordes redondeados */
    padding: 10px; /* Espaciado interno para que el icono no esté pegado al borde */
    color: #7367f0; /* Color del icono */
    font-size: 32px; /* Aumentar el tamaño del icono */
    cursor: pointer;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-zoom-icon i {
    transition: color 0.3s ease; /* Transición suave al cambiar el color */
}

#productPicture:hover + .custom-zoom-icon,
.custom-zoom-icon:hover {
    background-color: #7367f0; /* Fondo sólido cuando se pasa el mouse */
    color: #fff; /* Color del icono en blanco cuando se pasa el mouse */
}

/* Asegurar que los botones están por encima de otros elementos y reciben eventos */
.btnProduct,
.btnVideo {
    z-index: 99999 !important;
    pointer-events: auto;
    touch-action: none;
    padding: 10px; /* Aumentar el área de clic si es necesario */
}

/* Evitar que .turn-page intercepte eventos */
/* .turn-page {
    pointer-events: none;
} */

/* Asegurar que los botones dentro de .turn-page reciban eventos */
/* .turn-page .btnProduct,
.turn-page .btnVideo {
    pointer-events: auto;
} */

/* Permitir que el botón de inicio del tour reciba eventos de clic */
/* .turn-page #shepherd-example {
    pointer-events: auto;
} */

#productFeaturesContainer .row {
    opacity: 0;
    transform: translateY(20px);
    animation: slideIn 0.8s forwards; /* Aumentar la duración de la animación */
    animation-delay: calc(0.05s * var(--i)); /* Retardo para cada fila */
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}