/* ---------- buttons ---------- */

.btn {
  border-radius: 8px;
  font-weight: 600;
}

/* Plain sibling `.btn`s (e.g. the view-profile "Доступні дії"/available-actions card) have no
   spacing between them by default — Bootstrap only adds that inside specific containers like
   .modal-footer. Wrap a row of buttons in this to keep them from rendering edge-to-edge, and to
   wrap onto their own lines instead of overflowing on narrow screens. */
.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.btn-primary {
  background-color: var(--wine);
  border-color: var(--wine);
  color: #fff5f0;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active {
  background-color: var(--wine-strong);
  border-color: var(--wine-strong);
  color: #fff;
}
.btn-primary:focus {
  box-shadow: 0 0 0 0.2rem rgba(232, 56, 108, 0.35);
}

.btn-secondary {
  background-color: transparent;
  border-color: var(--muted);
  color: var(--muted);
}
.btn-secondary:hover {
  background-color: var(--muted);
  border-color: var(--muted);
  color: #fff;
}

.btn-danger {
  background-color: #a3273f;
  border-color: #a3273f;
}
.btn-danger:hover {
  background-color: #8a1f34;
  border-color: #8a1f34;
}

.btn-info {
  background-color: var(--rose);
  border-color: var(--rose);
  color: #fff;
}
.btn-info:hover {
  background-color: #f0507f;
  border-color: #f0507f;
  color: #fff;
}

.btn-outline-dark {
  color: var(--velvet);
  border-color: var(--velvet);
}
.btn-outline-dark:hover {
  background-color: var(--velvet);
  border-color: var(--velvet);
}