/* ================================================================= */
/* ESTILOS PROFESIONALES PARA EL CARRITO DE COMPRAS                  */
/* ================================================================= */

/* Transiciones globales y efectos visuales generales */
.card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Tarjeta de buscador rápido */
.tracking-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
    border-left: 4px solid #0d6efd !important;
}

.tracking-card input:focus {
    background-color: #fff !important;
    box-shadow: none !important;
    border-color: #0d6efd !important;
}

/* Botón de retorno personalizado con estilo moderno */
.btn-regresar-tienda {
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    color: #475569;
    padding: 0.5rem 1rem;
    border-radius: 50rem;
    font-size: 0.875rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease-in-out;
    text-decoration: none !important; /* <--- Agrega esta línea para quitar el subrayado */
}

.btn-regresar-tienda:hover {
    background-color: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    transform: translateX(-3px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
    text-decoration: none !important; /* <--- Asegura que tampoco se subraye al pasar el mouse */
}
/* Tabla de productos y filas */
.table-row-hover {
    transition: background-color 0.2s ease;
}

.table-row-hover:hover {
    background-color: #f8fafc !important;
}

/* Imágenes de los productos con zoom sutil al pasar el cursor */
.product-img {
    transition: transform 0.3s ease;
}

.table-row-hover:hover .product-img {
    transform: scale(1.05);
}

/* Botón de eliminar producto */
.delete-btn {
    transition: all 0.2s ease;
    background-color: #fee2e2;
    color: #dc3545;
}

.delete-btn:hover {
    background-color: #dc3545 !important;
    color: #fff !important;
    transform: scale(1.1);
}

/* Tarjeta de resumen de compra fija (Sticky Sidebar) */
.summary-card {
    border-top: 4px solid #198754 !important;
    background: #ffffff;
}

/* Botones de acción del resumen */
.btn-checkout {
    background: linear-gradient(135deg, #198754 0%, #157347 100%);
    border: none;
    transition: all 0.3s ease;
}

.btn-checkout:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(25, 135, 84, 0.3) !important;
    background: linear-gradient(135deg, #157347 0%, #115c38 100%);
}

.btn-keep-shopping {
    transition: all 0.2s ease;
}

.btn-keep-shopping:hover {
    background-color: #0d6efd !important; /* Color de fondo al pasar el mouse (Ej: Azul Bootstrap) */
    border-color: #0d6efd !important;      /* Color del borde para que coincida */
    color: #ffffff !important;             /* Color del texto (Blanco para que contraste bien) */
    transform: translateY(-2px);           /* Pequeño efecto de elevación opcional */
}

/* Estado de carrito vacío */
.empty-cart-icon {
    width: 90px;
    height: 90px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f8fafc;
    color: #64748b;
}

.btn-explore {
    transition: all 0.3s ease;
}

.btn-explore:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(13, 110, 253, 0.3) !important;
}

/* ================================================================= */
/* DISEÑO RESPONSIVO (MÓVILES Y TABLETS)                             */
/* ================================================================= */
@media (max-width: 991.98px) {
    /* Desactiva el sticky en pantallas pequeñas para que no estorbe */
    .summary-card {
        position: static !important;
        margin-top: 1.5rem;
    }
}

@media (max-width: 576px) {
    /* Ajustes específicos para teléfonos móviles pequeños */
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    h2.fw-bold {
        font-size: 1.5rem;
    }
}