/* === AUTH buttons === */
.auth-actions {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}
.auth-actions button {
  flex: 1;
  background-color: var(--auth-btn-bg);
  color: var(--auth-btn-text);
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  font-weight: 600;
}

/* Hover via class */
.auth-actions button.hover,
#authLoginBtn.hover,
#authSignupBtn.hover,
.auth-modal .btn.hover,
.auth-modal button.hover {
  background-color: var(--auth-btn-bg-hover);
  color: var(--auth-btn-text-hover);
}

/* === LOGIN REQUIRED MODAL === */
#loginRequiredLoginBtn {
  background-color: var(--meldingen-blauw);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
@media (hover: hover) and (pointer: fine) {
  #loginRequiredLoginBtn:hover {
    background-color: var(--meldingen-blauw-hover);
  }
}
/* Mobiel: hover uitgeschakeld */
@media (hover: none), (pointer: coarse) {
  #loginRequiredLoginBtn:hover {
    background-color: var(--meldingen-blauw);
  }
}