/* Caring Humanity Trust — donation flow styles.

   Kept separate from styles.css so the recovered stylesheet stays as-deployed
   and everything added for payments is reviewable in one place.
*/

/* The donate button is a <button> now rather than an <a>, so it needs the
   pill's alignment explicitly. */
button.pill {
  border: 0;
  font: inherit;
  cursor: pointer;
  appearance: none;
}

button.pill-block {
  width: 100%;
  justify-content: center;
}

#giveBtn:disabled {
  cursor: progress;
  opacity: .72;
}

/* A quiet activity cue while the order is being created and Checkout opens. */
#giveBtn.is-busy svg {
  animation: cht-pulse 1s ease-in-out infinite;
}

@keyframes cht-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .35; }
}

/* ---------- status line ---------- */

.give-status {
  margin: 12px 0 0;
  padding: 11px 14px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  border: 1px solid transparent;
}

.give-status.is-info {
  background: var(--tint-blue);
  border-color: rgba(90, 155, 203, .45);
  color: #234b66;
}

.give-status.is-ok {
  background: var(--tint-green);
  border-color: rgba(73, 160, 93, .5);
  color: var(--forest-deep);
  font-weight: 600;
}

.give-status.is-warn {
  background: var(--tint-yellow);
  border-color: rgba(198, 145, 47, .5);
  color: var(--clay-deep);
}

.give-status.is-error {
  background: var(--tint-red);
  border-color: rgba(203, 80, 58, .45);
  color: var(--red-deep);
}

/* ---------- WhatsApp fallback ---------- */

.give-alt {
  margin: 12px 0 0;
  font-size: 13.5px;
  color: var(--ink-soft);
  text-align: center;
}

.give-alt a {
  color: var(--forest);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Once a donation succeeds, stop inviting another one in the same breath. */
.give-card.gave .amounts,
.give-card.gave .custom,
.give-card.gave #giveBtn,
.give-card.gave .give-alt {
  display: none;
}

/* ---------- per-case donate ---------- */

/* The card-level Donate is a <button> now (it opens the detail overlay) rather
   than a link straight to WhatsApp, so it needs the link's own styling. */
button.case2-donate {
  border: 0;
  font: inherit;
  cursor: pointer;
  appearance: none;
}

.detail-give {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 14px;
  flex-wrap: wrap;
}

.detail-amt-in {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  min-width: 132px;
  flex: 0 1 148px;
}

.detail-amt-in > span {
  font-weight: 700;
  color: var(--ink-soft);
}

.detail-amt-in input {
  border: 0;
  background: transparent;
  font: inherit;
  font-weight: 600;
  width: 100%;
  padding: 12px 0;
  color: var(--ink);
}

.detail-amt-in input:focus { outline: none; }
.detail-amt-in:focus-within { border-color: var(--forest); }

.detail-give .detail-donate {
  flex: 1 1 160px;
  justify-content: center;
}

.detail-give .detail-donate:disabled { cursor: progress; opacity: .72; }
.detail-amt-in input:disabled { color: var(--ink-soft); }

.case2-donate.is-busy,
.detail-donate.is-busy {
  opacity: .7;
  cursor: progress;
}

.case-status {
  margin: 10px 0 0;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
  line-height: 1.45;
  border: 1px solid transparent;
}

.case-status.is-info  { background: var(--tint-blue);   border-color: rgba(90,155,203,.45);  color: #234b66; }
.case-status.is-ok    { background: var(--tint-green);  border-color: rgba(73,160,93,.5);    color: var(--forest-deep); font-weight: 600; }
.case-status.is-warn  { background: var(--tint-yellow); border-color: rgba(198,145,47,.5);   color: var(--clay-deep); }
.case-status.is-error { background: var(--tint-red);    border-color: rgba(203,80,58,.45);   color: var(--red-deep); }

@media (prefers-reduced-motion: reduce) {
  #giveBtn.is-busy svg { animation: none; }
}