/* Override Background Colors - Cambiar fondos blancos por #f4f4f4 */

/* Variables CSS actualizadas */
:root {
    --bg-color: #f4f4f4;
    --bg-secondary: #f4f4f4;
    --bg-tertiary: #f4f4f4;
}

/* Aplicar el nuevo color de fondo a elementos específicos */
body {
    background-color: #f4f4f4 !important;
}

/* Navbar */
.navbar {
    background-color: #f4f4f4 !important;
}

/* Cards */
.card {
    background-color: #f4f4f4 !important;
}

/* Form controls */
.form-control {
    background-color: #f4f4f4 !important;
}

/* Payment forms */
.payment-form {
    background-color: #f4f4f4 !important;
}

/* Dashboard */
.dashboard-header {
    background-color: #f4f4f4 !important;
}

.stats-grid .stat-card {
    background-color: #f4f4f4 !important;
}

/* Checkout */
.checkout-container .checkout-form {
    background-color: #f4f4f4 !important;
}

.checkout-container .order-summary {
    background-color: #f4f4f4 !important;
}

/* Modal backgrounds */
.modal-content {
    background-color: #f4f4f4 !important;
}

/* Footer form controls */
.footer .form-control {
    background-color: rgba(244, 244, 244, 0.1) !important;
}

/* Container backgrounds */
.container, .container-fluid {
    background-color: transparent;
}

/* Section backgrounds */
.features-section {
    background-color: #f4f4f4 !important;
}

/* Hero section - mantener gradiente */
.hero-section {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
}