/* ===== Force ALL buttons: red bg + black text ===== */
:root{
  --btn-red: #dc3545;   /* base red */
  --btn-red-hover: #c42f3c;  /* hover/active */
}

/* Base + size variants */
.btn,
.btn-sm,
.btn-lg {
  background: var(--btn-red) !important;
  color: #000 !important;
  border-color: var(--btn-red) !important;
  background-image: none !important;
}

/* Hover / active / focus */
.btn:hover,
.btn:focus,
.btn:active,
.btn:active:focus {
  background: var(--btn-red-hover) !important;
  border-color: var(--btn-red-hover) !important;
  color: #000 !important;
  box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .15) !important;
}

/* Disabled */
.btn:disabled,
.btn.disabled {
  opacity: .65 !important;
  background: var(--btn-red) !important;
  border-color: var(--btn-red) !important;
  color: #000 !important;
}

/* Cover all Bootstrap variants */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-danger,
.btn-warning,
.btn-info,
.btn-light,
.btn-dark {
  background: var(--btn-red) !important;
  border-color: var(--btn-red) !important;
  color: #000 !important;
}

/* Outline variants should look the same (solid red) */
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-danger,
.btn-outline-warning,
.btn-outline-info,
.btn-outline-light,
.btn-outline-dark {
  background: var(--btn-red) !important;
  border-color: var(--btn-red) !important;
  color: #000 !important;
}

/* Project-specific class used in your UI */
.btn-gradient {
  background: var(--btn-red) !important;
  border-color: var(--btn-red) !important;
  color: #000 !important;
}

/* --- Space below the fixed header --- */
body.sticky-offset { padding-top: 72px !important; }          /* phones */
@media (min-width: 768px) { body.sticky-offset { padding-top: 84px !important; } }  /* tablets/desktop */

/* Keep the header on top and give it a subtle divider */
.navbar.fixed-top { z-index: 1030; box-shadow: 0 1px 0 rgba(0,0,0,.06); }