/* Staff dashboard buttons — same palette as the guest website, used in turn:
   chili red for primary / save actions, black for dark alternate buttons. */
:root {
  --staff-btn-red: #c12c1f;
  --staff-btn-red-hover: #9a1f16;
  --staff-btn-red-deep: #7d1610;
  --staff-btn-black: #1a1a1a;
  --staff-btn-black-hover: #111111;
  --staff-btn-red-glow: rgba(193, 44, 31, 0.28);
  --bs-primary: #c12c1f;
  --bs-primary-rgb: 193, 44, 31;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--staff-btn-red);
  --bs-btn-border-color: var(--staff-btn-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--staff-btn-red-hover);
  --bs-btn-hover-border-color: var(--staff-btn-red-hover);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--staff-btn-red-deep);
  --bs-btn-active-border-color: var(--staff-btn-red-deep);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--staff-btn-red);
  --bs-btn-disabled-border-color: var(--staff-btn-red);
  background-color: var(--staff-btn-red) !important;
  border-color: var(--staff-btn-red) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible {
  background-color: var(--staff-btn-red-hover) !important;
  border-color: var(--staff-btn-red-hover) !important;
  color: #fff !important;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--staff-btn-red-deep) !important;
  border-color: var(--staff-btn-red-deep) !important;
  color: #fff !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--staff-btn-red);
  --bs-btn-border-color: var(--staff-btn-red);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--staff-btn-red);
  --bs-btn-hover-border-color: var(--staff-btn-red);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--staff-btn-red-hover);
  --bs-btn-active-border-color: var(--staff-btn-red-hover);
  color: var(--staff-btn-red) !important;
  border-color: var(--staff-btn-red) !important;
  background-color: transparent !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:focus-visible,
.btn-outline-primary.active,
.btn-check:checked + .btn-outline-primary {
  background-color: var(--staff-btn-red) !important;
  border-color: var(--staff-btn-red) !important;
  color: #fff !important;
}

.btn-premium {
  background: var(--staff-btn-red) !important;
  border: none;
  color: #fff !important;
  box-shadow: 0 6px 16px var(--staff-btn-red-glow);
}

.btn-premium:hover,
.btn-premium:focus {
  background: var(--staff-btn-red-hover) !important;
  color: #fff !important;
}

.btn-premium-outline:hover,
.btn-premium-outline:focus {
  border-color: var(--staff-btn-red) !important;
  color: var(--staff-btn-red-hover) !important;
}

.btn-dark {
  --bs-btn-bg: var(--staff-btn-black);
  --bs-btn-border-color: var(--staff-btn-black);
  --bs-btn-hover-bg: var(--staff-btn-black-hover);
  --bs-btn-hover-border-color: var(--staff-btn-black-hover);
  --bs-btn-active-bg: var(--staff-btn-black-hover);
  --bs-btn-active-border-color: var(--staff-btn-black-hover);
  background-color: var(--staff-btn-black) !important;
  border-color: var(--staff-btn-black) !important;
  color: #fff !important;
}

.btn-dark:hover,
.btn-dark:focus,
.btn-dark:focus-visible {
  background-color: var(--staff-btn-black-hover) !important;
  border-color: var(--staff-btn-black-hover) !important;
  color: #fff !important;
}

.premium-tabs__btn.is-active {
  background: var(--staff-btn-red) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px var(--staff-btn-red-glow);
}

.premium-period-toggle .btn-primary {
  background: var(--staff-btn-red) !important;
  border-color: var(--staff-btn-red) !important;
}