/* Estilos para el loading al eliminar productos del carrito */
/* El tema ya tiene su propio loading, solo ajustamos opacidad y pointer-events */
.woocommerce-mini-cart-item.loading {
    position: relative;
    opacity: 0.6;
    pointer-events: none;
}

/* No añadimos otro spinner porque el tema ya tiene uno con ::after y ::before */
/* Si necesitamos personalizar el loading del tema, podemos hacerlo así: */
.woocommerce ul.cart_list li.loading::after,
.woocommerce ul.cart_list li.loading::before {
    /* El tema ya maneja estos elementos, no duplicamos */
    z-index: 9999;
}

/* Efecto hover al pasar sobre el botón eliminar - sin fondo rojo */
.woocommerce-mini-cart-item.will-remove {
    /* Eliminado el fondo rojo, solo un ligero efecto de opacidad */
    opacity: 0.95;
    transition: opacity 0.3s ease;
}

.woocommerce-mini-cart-item.will-remove .product-name a {
    /* Efecto más sutil sin tachado */
    opacity: 0.7;
    transition: all 0.3s ease;
}

/* Mejorar el estilo del botón eliminar sin añadir X extra */
.ts-tiny-cart-wrapper .remove_from_cart_button,
.shopping-cart-wrapper .remove_from_cart_button {
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    color: #999 !important;
    font-size: 18px !important;
    opacity: 0.7;
    text-indent: 0 !important; /* Asegurar que no haya text-indent */
    font-size: 0 !important; /* Ocultar cualquier texto "Remove" */
}

/* Mostrar solo el contenido después (la X) */
.ts-tiny-cart-wrapper .remove_from_cart_button::after,
.shopping-cart-wrapper .remove_from_cart_button::after {
    content: '×';
    display: inline-block;
    font-size: 20px;
    line-height: 1;
    color: inherit;
}

.ts-tiny-cart-wrapper .remove_from_cart_button:hover,
.shopping-cart-wrapper .remove_from_cart_button:hover {
    color: #333 !important;
    opacity: 1;
    transform: scale(1.1);
}

/* Animación de fadeOut al eliminar */
.woocommerce-mini-cart-item.removing {
    animation: slideOutRight 0.3s ease forwards;
}

@keyframes slideOutRight {
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* Estado del carrito actualizando */
.shopping-cart-wrapper.updating {
    pointer-events: none;
}

.shopping-cart-wrapper.updating .cart-dropdown-form {
    opacity: 0.7;
}

/* Mensaje de carrito vacío */
.cart-empty-message {
    text-align: center;
    padding: 40px 20px;
}

.cart-empty-message p {
    font-size: 16px;
    color: #666;
    margin-bottom: 20px;
}

.cart-empty-message .button {
    display: inline-block;
    padding: 10px 20px;
    background: #333;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    transition: background 0.3s ease;
}

.cart-empty-message .button:hover {
    background: #555;
}

/* Mejorar la transición cuando se actualiza el total */
.dropdown-footer .total {
    transition: all 0.3s ease;
}

.dropdown-footer .total.updating {
    opacity: 0.5;
}

/* Fix para el scroll del mini cart */
.ts-tiny-cart-wrapper .cart-content {
    max-height: 400px;
    overflow-y: auto;
    overflow-x: hidden;
}

.ts-tiny-cart-wrapper .cart-content::-webkit-scrollbar {
    width: 5px;
}

.ts-tiny-cart-wrapper .cart-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.ts-tiny-cart-wrapper .cart-content::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

.ts-tiny-cart-wrapper .cart-content::-webkit-scrollbar-thumb:hover {
    background: #555;
}