/* Estilos definitivos para el carrito - Mesa Maestra */

/* Reset y estilos base */
* {
    box-sizing: border-box;
}

/* Botones de cantidad */
.cart-quantity-btn {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: bold !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
    padding: 0 !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.cart-quantity-btn.decrease {
    background-color: #ef4444 !important;
    color: white !important;
}

.cart-quantity-btn.increase {
    background-color: #10b981 !important;
    color: white !important;
}

.cart-quantity-btn:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important;
}

/* Display de cantidad */
.cart-quantity-display {
    min-width: 40px !important;
    text-align: center !important;
    font-weight: bold !important;
    color: #374151 !important;
    font-size: 14px !important;
    background-color: #f3f4f6 !important;
    padding: 6px 8px !important;
    border-radius: 6px !important;
    border: 2px solid #d1d5db !important;
}

/* Botón Calcular Envío */
.calculate-delivery-btn {
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    background-color: #3b82f6 !important;
    color: white !important;
    font-weight: 500 !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    white-space: nowrap !important;
    transition: background-color 0.2s ease !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    display: inline-block !important;
}

.calculate-delivery-btn:hover {
    background-color: #2563eb !important;
}

/* Botón Finalizar Pedido */
.finalize-order-btn {
    width: 100% !important;
    background-color: #3b82f6 !important;
    color: white !important;
    padding: 0.75rem !important;
    border-radius: 0.5rem !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 0.875rem !important;
    text-align: center !important;
    display: block !important;
    text-decoration: none !important;
    transition: background-color 0.2s ease !important;
    margin: 0 !important;
    outline: none !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.finalize-order-btn:hover {
    background-color: #2563eb !important;
}

/* Botón Limpiar Carrito */
.clear-cart-btn {
    width: 100% !important;
    background-color: #f3f4f6 !important;
    color: #4b5563 !important;
    padding: 0.5rem !important;
    border-radius: 0.5rem !important;
    font-weight: 500 !important;
    border: none !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease !important;
}

.clear-cart-btn:hover {
    background-color: #e5e7eb !important;
}

/* Botón Eliminar Producto */
.remove-product-btn {
    color: #ef4444 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    margin-left: 8px !important;
    padding: 4px !important;
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
}

.remove-product-btn:hover {
    color: #dc2626 !important;
    background-color: #fef2f2 !important;
}

/* Botones de categorías */
.category-btn {
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    white-space: nowrap !important;
    border: none !important;
    cursor: pointer !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
}

.category-btn.active {
    background-color: #3b82f6 !important;
    color: white !important;
}

.category-btn.inactive {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

.category-btn.inactive:hover {
    background-color: #d1d5db !important;
}

/* Botones de tipo de orden */
.order-type-btn {
    padding: 0.5rem 1rem !important;
    border-radius: 0.5rem !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.order-type-btn.active {
    background-color: #3b82f6 !important;
    color: white !important;
}

.order-type-btn.inactive {
    background-color: #e5e7eb !important;
    color: #374151 !important;
}

.order-type-btn.inactive:hover {
    background-color: #d1d5db !important;
}

/* Botón principal del carrito */
.cart-toggle-btn {
    cursor: pointer !important;
}

/* Overlay del carrito */
.cart-overlay {
    cursor: pointer !important;
}

/* Botón cerrar carrito */
.cart-close-btn {
    cursor: pointer !important;
}

/* Productos clickeables */
.product-card {
    cursor: pointer !important;
}

/* Botón cerrar notificaciones */
.notification-close-btn {
    cursor: pointer !important;
}

/* Estilos de fuerza para asegurar visibilidad */
button.cart-quantity-btn,
button.calculate-delivery-btn,
a.finalize-order-btn,
button.clear-cart-btn,
button.remove-product-btn,
button.category-btn,
button.order-type-btn {
    opacity: 1 !important;
    visibility: visible !important;
    display: flex !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Específico para botones de cantidad */
button.cart-quantity-btn.decrease {
    background: #ef4444 !important;
    color: white !important;
    border: 2px solid #dc2626 !important;
}

button.cart-quantity-btn.increase {
    background: #10b981 !important;
    color: white !important;
    border: 2px solid #059669 !important;
}

/* Específico para botón calcular envío */
button.calculate-delivery-btn {
    background: #3b82f6 !important;
    color: white !important;
    border: 2px solid #2563eb !important;
}

/* Específico para botón finalizar pedido */
a.finalize-order-btn {
    background: #3b82f6 !important;
    color: white !important;
    border: 2px solid #2563eb !important;
}