/* ==========================================================================
   Mokhtar GSM — Brand overrides v3
   S'appuie sur variables.css (tokens v3). Inclure AVANT app.css.
   ========================================================================== */

/* Bootstrap — boutons primaires (Accent unique) */
.btn-primary {
    --bs-btn-bg: var(--color-accent, var(--color-brand-red));
    --bs-btn-border-color: var(--color-accent, var(--color-brand-red));
    --bs-btn-hover-bg: var(--color-brand-red-hover);
    --bs-btn-hover-border-color: var(--color-brand-red-hover);
    --bs-btn-active-bg: var(--color-brand-red-active);
    --bs-btn-active-border-color: var(--color-brand-red-active);
    border-radius: var(--radius-sm);
    padding: 12px 24px;
    transition: transform var(--transition-lift), box-shadow var(--transition-lift), background var(--transition-base);
}
.btn-primary:hover {
    transform: translateY(var(--btn-lift));
    box-shadow: var(--shadow-md);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-navy);
    --bs-btn-border-color: var(--color-navy);
    --bs-btn-hover-bg: var(--color-navy);
    --bs-btn-hover-border-color: var(--color-navy);
    --bs-btn-active-bg: var(--color-navy);
    border-radius: var(--radius-sm);
}

.text-primary { color: var(--color-navy) !important; }
.bg-primary { background-color: var(--color-navy) !important; }
.text-brand-secondary { color: var(--color-navy) !important; }
.text-promo { color: var(--color-brand-red) !important; }
.bg-brand-soft { background-color: var(--color-bg-soft) !important; }

.btn-whatsapp {
    background-color: var(--color-whatsapp);
    border-color: var(--color-whatsapp);
    color: #fff;
    border-radius: var(--radius-sm);
    padding: 12px 24px;
}
.btn-whatsapp:hover {
    background-color: var(--color-whatsapp-hover);
    color: #fff;
    transform: translateY(var(--btn-lift));
}