/* ══════════════════════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  box-sizing: border-box;
  padding: 0.55rem 1.4rem;
  font-size: 0.95rem;
  font-family: var(--font-sans);
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-light);
  background: var(--color-dark);
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--duration);
}

.btn:hover {
  background: var(--color-mid);
  color: var(--color-light);
  text-decoration: none;
}

/* Icon-only buttons: larger icon (21px), circular */
.btn:has(> svg:only-child) {
  padding: 0.9rem;
  line-height: 0;
  border-radius: 50%;
}

.btn:has(> svg:only-child) svg {
  width: 21px;
  height: 21px;
}

/* Small buttons */
.btn--sm {
  font-size: 0.8rem;
  padding: 0.25rem 0.6rem;
}

/* Small icon-only buttons */
.btn.btn--sm:has(> svg:only-child) {
  padding: 0.4rem;
}

.btn.btn--sm:has(> svg:only-child) svg {
  width: 14px;
  height: 14px;
}

.btn--secondary {
  background: transparent;
  color: var(--color-dark);
  border: 1px solid var(--color-dark);
}

.btn--secondary:visited,
div.page-content a.btn.btn--secondary,
div.page-content a.btn.btn--secondary:visited {
  background: transparent;
  color: var(--color-dark);
  border: 1px solid var(--color-dark);
}

.btn--secondary:hover,
div.page-content a.btn.btn--secondary:hover {
  background: var(--color-dark);
  color: var(--color-light);
}

.btn.btn--danger {
  background: var(--color-error-bg);
  color: var(--color-error);
  border: 1px solid var(--color-error-border);
}

.btn.btn--danger:hover {
  background: var(--color-error);
  color: #fff;
  border-color: var(--color-error);
}

.btn--additional {
  margin-top: 0.6rem;
}

.btn--cancel {
  font-size: 0.9rem;
  color: var(--color-muted);
  text-decoration: none;
  margin-top: 0.5rem;
}

/* Filter toggle buttons (invite guests page) */
.btn--filter {
  padding: 0.25rem 0.75rem;
  border: 1px solid #ccc;
  border-radius: var(--radius-sm);
  background: #fff;
  font-size: 0.85rem;
  cursor: pointer;
  color: #333;
}

.btn--filter-active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}

/* Compact buttons for inline row actions (reorder, remove, etc.) */
.btn--row-edit-spacer {
  opacity: 0;
  pointer-events: none;
}

.btn--row-edit {
  padding: 0.4rem;
  font-size: 0.8rem;
  line-height: 1;
  border-radius: var(--radius-lg);
}

.btn.btn--row-edit:has(> svg:only-child) {
  padding: 0.4rem;
  border-radius: var(--radius-lg);
}

.btn.btn--row-edit:has(> svg:only-child) svg {
  width: 14px;
  height: 14px;
}