/**
 * Custom CSS for Quick View styling
 * Controls icon visibility in page vs quickview modal
 */

/* ========================================
   CONTROL DE VISIBILIDAD DEL ICONO
   - En página: Mostrar icono + texto
   - En quickview: Mostrar solo texto (ocultar icono)
   ======================================== */

/* Ocultar icono del carrito en quickview modal, mantener solo texto */
.quickview .add-to-cart i.fa-shopping-cart,
.modal.quickview .add-to-cart i.fa-shopping-cart {
    display: none !important;
}

/* ========================================
   ESTILOS DEL BOTÓN ADD TO CART
   ======================================== */

/* Estilos base del botón (se aplica en página y quickview) */
.add .add-to-cart {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #c98185;
    color: white !important;
    height: 40px;
    margin: 0px 12px;
    border-radius: 4px;
}

/* Hover effect */
.add .add-to-cart:hover:not(:disabled) {
    background-color: #b57175;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

/* Active state */
.add .add-to-cart:active:not(:disabled) {
    transform: translateY(0);
}

/* Disabled state */
.add .add-to-cart:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    background-color: #6c757d !important;
}

/* Icon styling */
.add .add-to-cart i {
    font-size: 16px;
}

/* ========================================
   MENSAJES DE ERROR DE VALIDACIÓN
   ======================================== */

/* Estilo mejorado para el div de error de cantidad */
#quantity-error {
    color: #721c24 !important;
    background-color: #f8d7da !important;
    border: 1px solid #f5c6cb !important;
    border-radius: 4px !important;
    padding: 2px 15px !important;
    margin-bottom: 15px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    display: none;
    animation: shake 0.3s ease-in-out;
    text-align: center;
}

#quantity-error::before {
    content: "⚠️ ";
    margin-right: 5px;
}

/* Animación de shake para llamar la atención */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Resaltar el input cuando hay error */
#quantity_wanted.invalid-quantity {
    border: 2px solid #dc3545 !important;
    background-color: #fff5f5 !important;
}