/* Soft sage keeps Donasi visible without competing with EVA's main workflow. */
#donateButton {
  gap: 8px;
  width: auto;
  min-height: 48px;
  flex: 0 0 auto;
  padding: 7px 14px 7px 7px;
  border: 1px solid #85b69e !important;
  border-radius: 14px;
  background: #dcefe6 !important;
  color: #145c43 !important;
  box-shadow: inset 0 1px 0 #fff, 0 2px 0 #a4cdb8, 0 6px 14px #125c431f !important;
  backdrop-filter: none !important;
  transition: transform 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease !important;
}

#donateButton .donate-button__icon {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #b9d8c8;
  border-radius: 10px;
  background: #f8fcfa;
  color: #167153;
}

#donateButton .donate-button__icon svg { width: 18px; height: 18px; }
#donateButton .donate-button__copy { display: block; text-align: left; }
#donateButton .donate-button__label { display: block; font-size: 14px; font-weight: 800; line-height: 1.15; }

#donateButton:hover {
  border-color: #6a9d80 !important;
  background: #cde8da !important;
  transform: translateY(-1px);
  box-shadow: inset 0 1px 0 #fff, 0 3px 0 #95c3ac, 0 8px 16px #125c4324 !important;
}
#donateButton:active { transform: translateY(1px); box-shadow: inset 0 1px 0 #fff, 0 1px 0 #95c3ac !important; }
#donateButton:focus-visible { outline: 3px solid #2f8d68; outline-offset: 4px; }

/* One brief heartbeat introduces the action without an endless pulse. */
@media (prefers-reduced-motion: no-preference) {
  #donateButton .donate-button__icon svg { animation: eva-donate-heart 1100ms ease-out 900ms 1; }
}
@keyframes eva-donate-heart {
  0%, 40%, 75%, 100% { transform: scale(1); }
  20%, 60% { transform: scale(1.16); }
}

@media (max-width: 720px) {
  #donateButton { min-height: 44px; padding: 5px 10px 5px 5px; margin-inline-end: 3px; gap: 6px; border-radius: 12px; }
  #donateButton .donate-button__icon { width: 30px; height: 30px; border-radius: 8px; }
  #donateButton .donate-button__icon svg { width: 16px; height: 16px; }
  #donateButton .donate-button__label { font-size: 12px; }
}
@media (max-width: 420px) {
  #donateButton { width: 62px; min-height: 50px; flex-direction: column; gap: 3px; padding: 5px 6px; }
  #donateButton .donate-button__icon { width: 21px; height: 19px; border-radius: 6px; }
  #donateButton .donate-button__icon svg { width: 13px; height: 13px; }
  #donateButton .donate-button__copy { display: block; text-align: center; }
  #donateButton .donate-button__label { display: block; font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  #donateButton { transition: none !important; }
  #donateButton .donate-button__icon svg { animation: none !important; }
}