/*
 * Animaciones para el icono del carrito
 * Se activan cuando se añade un ítem a la cesta
 */

/* Animación principal: Pulso con efecto de escala */
@keyframes pulse-carrito {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

/* Animación de sacudida suave */
@keyframes shake-carrito {
    0%, 100% {
        transform: translateX(0) rotate(0deg);
    }

    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-3px) rotate(-3deg);
    }

    20%, 40%, 60%, 80% {
        transform: translateX(3px) rotate(3deg);
    }
}

/* Animación de rebote para el contador */
@keyframes bounce-contador {
    0%, 100% {
        transform: scale(1);
    }

    25% {
        transform: scale(1.3);
    }

    50% {
        transform: scale(0.9);
    }

    75% {
        transform: scale(1.15);
    }
}

/* Animación de destello de fondo */
@keyframes flash-fondo {
    0% {
        background-color: transparent;
    }

    50% {
        background-color: rgba(160, 175, 76, 0.3);
    }

    100% {
        background-color: transparent;
    }
}

/* Animación de color del texto del contador */
@keyframes color-numero {
    0%, 100% {
        color: inherit;
    }

    50% {
        color: #FECC00;
        text-shadow: 0 0 8px rgba(76, 116, 175, 0.6);
    }
}

/* Clases para aplicar a los elementos */
.carrito-icono-animado {
    animation: pulse-carrito 0.5s ease-in-out, shake-carrito 0.6s ease-in-out;
    display: inline-block;
    pointer-events: auto !important; /* Asegurar que los clics funcionen */
}

.carrito-contador-animado {
    animation: bounce-contador 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    display: inline-block;
    pointer-events: auto !important; /* Asegurar que los clics funcionen */
}

.carrito-contenedor-animado {
    animation: flash-fondo 0.8s ease-in-out;
    pointer-events: auto !important; /* Asegurar que los clics funcionen */
}

.carrito-numero-destacado {
    animation: color-numero 0.8s ease-in-out;
    font-weight: bold;
    pointer-events: auto !important; /* Asegurar que los clics funcionen */
}

/* Estilos adicionales para mejorar la visibilidad */
.btn-menu-MCtx,
.btn-menu-MCt {
    position: relative;
    transition: all 0.3s ease;
    display: inline-block !important; /* Asegurar que se pueda animar */
}

@media (max-width: 768px) {
    .btn-menu-MCt {
        padding: 46px 0 0;
    }
}



.MCC-account {
    display: inline-block;
    transition: all 0.3s ease;
    top: 2px;
    right: 32px;
}

@media (max-width: 768px) {
    .MCC-account {
        top: 3px;
        right: 8px;
    }
}

/* Estado del carrito cuando tiene ítems - FONDO AMARILLO */
.btn-menu-MCtx.carrito-con-items {
    background-color: #FECC00 !important;
    color: #00203D !important; /* Texto oscuro para contraste */
}

.btn-menu-MCt.carrito-con-items {
    background: url(../images/about/ICO-SHOPING-CART-LC.svg) center 10px no-repeat !important;
    background-size: 35px 35px !important;
    background-color: #FECC00 !important;
    color: #00203D !important; /* Texto oscuro para contraste */
}

.btn-menu-MCtx.carrito-con-items:hover {
    background: url(../images/about/ICO-SHOPING-CART-W.svg) #00203D center 15px no-repeat !important;
    color: #ffffff !important;
    background-size: 38px 38px !important;
    background-color: #00203D;
}

.btn-menu-MCt.carrito-con-items:hover {
    /* background: url(../images/about/ico-cesta-PL-ON.png) center 10px no-repeat #ffffff; */
    background: url(../images/about/ICO-SHOPING-CART-LC.svg) center 10px no-repeat #ffffff !important;
    color: #00203D;
    background-size: 35px 35px !important;
}
/* Borde azul para el contador cuando hay ítems (escritorio) */
.MCC-account.contador-con-items {
        top: 6px;
        right: 32px;
        border-style: solid;
        border-color: #fecc00;
        border-width: 2px;
        line-height: 15px;
        background-color: #00203D !important;
        color: #fecc00;
}

/* Regla ESPECÍFICA para WebsSociales (escritorio) */
.topBar-19 .MCC-account.contador-con-items {
    top: 2px !important;
    right: 31px !important;
}



/* Borde azul para el contador en móvil cuando hay ítems */
@media (max-width: 768px) {
    .MCC-account.contador-con-items {
        border-color: #fecc00;
        line-height: 17px;
        background-color: #00203D !important;
        color: #fecc00;
        top: 3px;
        right: 8px;
    }
    
    /* WebsSociales móvil (opcional, ajustar si es necesario) */
    .topBar-19 .MCC-account.contador-con-items {
        top: 3px !important;
        right: 8px !important;
    }
}

/* Mejora visual al pasar el mouse (estado normal) */
.btn-menu-MCtx:hover,
.btn-menu-MCt:hover {
    transform: scale(1.05);
}

/* Asegurar que las animaciones se muestren correctamente */
.carrito-icono-animado,
.carrito-contador-animado,
.carrito-contenedor-animado,
.carrito-numero-destacado {
    transform-origin: center center;
}

/* Forzar la animación en elementos con clase btn-menu-MCt */
a.btn-menu-MCt.carrito-icono-animado,
.btn-menu-MCtx.carrito-icono-animado {
    animation: pulse-carrito 0.5s ease-in-out, shake-carrito 0.6s ease-in-out !important;
    display: inline-block !important;
}