/* Scoped to the donation page: no changes to catalog or account layouts. */
.donation-page {
  --ink: #edf6ff;
  --muted: #afc3d5;
  --teal: #4bd2ff;
  --line: #25465c;
  --canvas: #040b13;
  color-scheme: dark;
  background: var(--canvas);
  color: var(--ink);
}

.donation-page .seo-main {
  width: min(880px, calc(100% - 40px));
  margin-block: 40px 56px;
}

.donation-page .seo-header { background: #071321; }
.donation-page .seo-notice { background: #0c2031; color: #c2d8e9; }
.donation-page .seo-footer { color: #afc3d5; }
.donation-page a { color: #58d4ff; }
.donation-page .seo-header a { color: #e9f3fb; }
.donation-page h1 { font-size: clamp(30px, 5vw, 52px); letter-spacing: -.035em; }
.donation-page h2 { font-size: clamp(21px, 3vw, 28px); }
.donation-page p { overflow-wrap: anywhere; }

#donation-start { scroll-margin-top: 24px; }

.donation-card {
  padding: clamp(20px, 4vw, 36px);
  margin: 24px 0;
  min-width: 0;
  border: 1px solid #25465c;
  border-radius: 20px;
  background: linear-gradient(135deg, #102638, #081521 75%);
  box-shadow: 0 14px 40px #0003;
  overflow-wrap: anywhere;
}

.donation-card > :last-child { margin-bottom: 0; }
.donation-card p { color: #bcd0e0; }
.donation-card label { display: block; margin: 20px 0 8px; font-weight: 650; }
.donation-card code {
  display: block;
  padding-block: 10px;
  max-width: 100%;
  color: #e3f5ff;
  font: 15px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
  word-break: break-all;
  white-space: normal;
  user-select: all;
}

.donation-network {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  padding: 16px 18px;
  margin-block: 20px;
  border: 1px solid #22617c;
  border-radius: 12px;
  background: #063049;
  color: #e7f7ff;
}

.donation-network p { margin: 0; color: inherit; }
.donation-network strong { color: #6ee0ff; }
.donation-network dt { font-size: 13px; color: #afc3d5; }
.donation-network dd { margin: 4px 0 0; font-weight: 750; color: #6ee0ff; }

.donation-address-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: stretch;
  min-width: 0;
}

#donation-address {
  flex: 1 1 340px;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid #3c617b;
  border-radius: 9px;
  background: #030c16;
  color: #f2f8ff;
  font: 16px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  direction: ltr;
  text-align: left;
  text-overflow: clip;
}

#copy-donation-address {
  flex: 0 1 auto;
  min-height: 52px;
  max-width: 100%;
  margin: 0;
  padding: 12px 20px;
  border: 1px solid #55d7ff;
  border-radius: 9px;
  background: #10b9f2;
  color: #021522;
  font: inherit;
  font-weight: 750;
  line-height: 1.4;
  white-space: normal;
  cursor: pointer;
}

#copy-donation-address:hover { background: #62d9ff; }
#copy-donation-address:disabled { opacity: .65; cursor: wait; }
.donation-page button:focus-visible,
.donation-page input:focus-visible,
.donation-page a:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }

#donation-copy-status { min-height: 1.5em; margin: 12px 0; font-size: 14px; color: #bdd8ea; }
#donation-copy-status[data-state="copied"] { color: #91edcf; }
#donation-copy-status[data-state="manual"],
#donation-copy-status[data-state="missing"] { color: #ffd1a2; }

.donation-warning {
  margin-block: 24px;
  padding: 18px 20px;
  border: 1px solid #8b6031;
  border-left: 4px solid #eeb475;
  border-radius: 10px;
  background: #281e14;
  color: #ffe4c6;
}

.donation-warning p { color: inherit; }
.donation-warning > :last-child { margin-bottom: 0; }
.donation-qr { display: block; width: min(240px, 100%); max-width: 100%; height: auto; margin: 22px auto; background: #fff; }

@media (max-width: 600px) {
  .donation-page .seo-main { width: calc(100% - 28px); margin-block: 24px 36px; }
  .donation-card { padding: 18px; border-radius: 14px; }
  .donation-address-row { flex-direction: column; }
  #donation-address { flex-basis: auto; }
  #copy-donation-address { width: 100%; }
  .donation-warning { padding: 16px; }
}