/* Donation cards: compact parchment, dark ink and a soft animated sheen. */
.coins-section {
  position:relative;
  isolation:isolate;
  overflow:clip;
  border-block:1px solid #b28b4733;
  background:
    radial-gradient(ellipse at 50% 55%,#93612426,transparent 64%),
    radial-gradient(ellipse at 100% 0,#b78c4030,transparent 55%),
    linear-gradient(130deg,#171711,#292015 50%,#181611);
}
.coins-section::before { content:''; position:absolute; inset:0; z-index:-1; opacity:.3; background:url('./assets/parchment-grain.svg') repeat; pointer-events:none; }
.coins-section::after { content:''; position:absolute; z-index:-1; width:min(850px,90%); height:550px; right:-25px; top:-12px; opacity:.28; background:url('./assets/treasury-background-v1.png') right top/cover no-repeat; mask-image:radial-gradient(ellipse at 70% 30%,#000 22%,#000b 48%,transparent 76%); pointer-events:none; }
.coins-inner { position:relative; }
.coins-section .coins-heading h2 { color:#f5ecda; }
.coins-section .coins-heading h2 em { color:#e4c58a; }
.coins-section .coins-lede { color:#c5b9a5; }
.coins-section .coins-lede strong { color:#fff0d8; }
.coins-section .donation-status { color:#bcae96; }
.coins-section .rail-caption { color:#cbbca3; }
@media(max-width:700px) { .coins-section::after { width:460px; height:350px; right:-100px; top:0; opacity:.2; } }
.coins-section .package-grid { max-width:1100px; margin-inline:auto; gap:18px; }
.coins-section .coins-lede { margin-bottom:30px; }
.coins-section .package {
  --ink:#322619;
  --paper:#e7cd98;
  container-type:inline-size;
  display:block;
  isolation:isolate;
  padding:22px 23px 20px;
  min-width:0;
  border:1px solid #c2a368;
  border-radius:5px 12px 5px 12px;
  color:var(--ink);
  background:
    url('./assets/parchment-grain.svg') repeat,
    radial-gradient(ellipse at 4% 2%,#71411950,transparent 38%),
    radial-gradient(ellipse at 96% 100%,#7b431a4d,transparent 42%),
    linear-gradient(115deg,#c6a56c 0%,#e9d4a5 8%,#f2dfb5 45%,#e5cc96 90%,#c3a168);
  box-shadow:inset 0 0 0 3px #f8e7c340,inset 0 0 24px #77502035,0 7px 20px #0003;
  transition:transform .3s,border-color .3s,box-shadow .3s;
}
.coins-section .package::before {
  content:'';
  position:absolute;
  z-index:0;
  inset:9px;
  width:auto;
  height:auto;
  border:1px solid #76521d40;
  border-radius:1px 6px 1px 6px;
  background:
    linear-gradient(#79521e,#79521e) left top/15px 1px no-repeat,
    linear-gradient(#79521e,#79521e) left top/1px 15px no-repeat,
    linear-gradient(#79521e,#79521e) right bottom/15px 1px no-repeat,
    linear-gradient(#79521e,#79521e) right bottom/1px 15px no-repeat;
  pointer-events:none;
}
.coins-section .package::after {
  content:'';
  position:absolute;
  z-index:2;
  inset:-50% -100%;
  background:linear-gradient(105deg,transparent 44%,#fff4c854 49%,#fff9dc80 50%,transparent 56%);
  transform:translateX(-48%);
  animation:parchment-glint 10s ease-in-out infinite;
  pointer-events:none;
}
.coins-section .package:nth-child(2n)::after { animation-delay:-3s; }
.coins-section .package:nth-child(3n)::after { animation-delay:-6s; }
.coins-section .package>* { position:relative; z-index:1; }
.coins-section .package>.package-watermark { position:absolute; z-index:0; width:36px; height:36px; top:18px; right:20px; opacity:.88; image-rendering:auto; filter:drop-shadow(0 2px 2px #76542525); pointer-events:none; }
@media(max-width:700px) { .coins-section .package>.package-watermark { width:32px; height:32px; top:15px; right:17px; } }
.coins-section .package .package-bonus {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  margin:0 0 11px;
  border:1px solid #84552646;
  border-radius:2px;
  background:#85512212;
  color:#634013;
  font-size:9px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.5;
}
.coins-section .package .package-bonus>span { color:#83591d; font-size:12px; line-height:1; }
.coins-section .package h3 {
  display:flex;
  flex-direction:row;
  align-items:baseline;
  flex-wrap:nowrap;
  gap:8px;
  margin:0 0 4px;
  color:var(--ink);
  line-height:1.1;
}
.coins-section .package h3 b {
  color:var(--ink);
  font-family:Cinzel,Georgia,serif;
  font-size:40px;
  font-weight:500;
  letter-spacing:-.055em;
  line-height:1.15;
  text-shadow:0 1px #fff1cd;
}
.coins-section .package h3>span { font-size:10px; font-weight:750; letter-spacing:.05em; text-transform:uppercase; }
.coins-section .package .package-original { display:block; font-size:11px; color:#67502f; line-height:1.65; margin:0; max-width:100%; }
.coins-section .package .package-footer { display:flex; gap:12px; align-items:center; justify-content:space-between; padding-top:16px; margin-top:15px; border-top:1px solid #7d572d35; }
.coins-section .package .package-price { display:flex; align-items:baseline; gap:4px; flex-shrink:0; margin:0; color:#665035; font-size:10px; white-space:nowrap; }
.coins-section .package .package-price strong { color:var(--ink); font-size:24px; font-weight:800; letter-spacing:-.055em; }
.coins-section .package .package-price>span { color:var(--ink); font-size:10px; margin-left:-3px; }
.coins-section .package .package-button {
  width:auto;
  min-height:42px;
  margin:0;
  padding:10px 12px;
  gap:13px;
  border:1px solid #3f2d1d;
  border-radius:3px;
  color:#ffe3a6;
  background:linear-gradient(130deg,#473522,#241b14);
  box-shadow:inset 0 0 0 2px #b7893a38,0 3px 5px #74502524;
  font-size:10px;
  font-weight:750;
  white-space:nowrap;
}
.coins-section .package .package-button svg { width:14px; height:14px; transition:transform .25s; }
.coins-section .package .package-button:hover { background:linear-gradient(130deg,#604421,#342216); transform:none; }
.coins-section .package .package-button:hover svg { transform:translateX(3px); }
.coins-section .package .package-button:focus-visible { outline:2px solid #4b2c0a; outline-offset:3px; }
.coins-section .package-special { border-color:#efd497; box-shadow:inset 0 0 0 3px #f8e7c340,inset 0 0 24px #77502035,0 0 26px #d9b16717; }
.coins-section .package-special .package-bonus { background:linear-gradient(120deg,#703722,#4e251b); color:#ffdf9a; border-color:#924923; box-shadow:inset 0 0 0 1px #eaba6340; }
.coins-section .package-special .package-bonus>span { color:#ffdc88; }
.coins-section .donation-status { margin-top:22px; }
@media(hover:hover) and (pointer:fine) {
  .coins-section .package.visible:hover { transform:translateY(-4px); border-color:#ffe7b3; box-shadow:inset 0 0 0 3px #f8e7c340,inset 0 0 24px #77502035,0 10px 25px #0004,0 0 22px #e6ba6224; }
}
@media(min-width:701px) and (max-width:1040px) {
  .coins-section .package { padding:20px; }
  .coins-section .package h3 b { font-size:35px; }
  .coins-section .package .package-footer { gap:8px; }
  .coins-section .package .package-button { padding-inline:10px; gap:8px; }
  .coins-section .package .package-price strong { font-size:21px; }
}
@media(max-width:700px) {
  .coins-section .package-grid { max-width:none; margin:0 -20px 0 0; gap:12px; }
  .coins-section .package { padding:19px 19px 18px; }
  .coins-section .package .package-bonus { margin-bottom:8px; font-size:8px; padding:3px 7px; }
  .coins-section .package h3 { gap:6px; }
  .coins-section .package h3 b { font-size:clamp(31px,15cqw,38px); }
  .coins-section .package h3>span { font-size:8px; }
  .coins-section .package .package-original { font-size:10px; }
  .coins-section .package .package-footer { gap:8px; padding-top:12px; margin-top:12px; }
  .coins-section .package .package-price strong { font-size:clamp(18px,8.5cqw,23px); }
  .coins-section .package .package-button { min-height:44px; padding:10px; font-size:10px; gap:9px; }
}
@media(max-width:359px) {
  .coins-section .package { padding:18px 17px 17px; }
  .coins-section .package .package-original { font-size:10px; }
  .coins-section .package .package-button { gap:6px; padding-inline:8px; }
  .coins-section .package .package-price { gap:3px; }
}
@keyframes parchment-glint { 0%,72% { transform:translateX(-48%); opacity:0; } 76% { opacity:.6; } 91%,100% { transform:translateX(48%); opacity:0; } }
@media(prefers-reduced-motion:reduce) {
  html:not(.motion-enabled) .coins-section .package::after { animation:none; opacity:0; }
  html:not(.motion-enabled) .coins-section .package,html:not(.motion-enabled) .coins-section .package * { transition:none; }
}
.is-paused .coins-section .package::after { animation:none!important; opacity:0; }

/* Matching parchment offer dialog, including login and Pix states. */
.donation-dialog {
  width:min(440px,calc(100% - 32px));
  max-height:calc(100dvh - 32px);
  padding:30px 32px 25px;
  border:1px solid #c3a167;
  border-radius:5px 15px 5px 15px;
  color:#322619;
  background:
    url('./assets/parchment-grain.svg') repeat,
    radial-gradient(ellipse at 0 0,#71411945,transparent 40%),
    radial-gradient(ellipse at 100% 100%,#71411935,transparent 45%),
    linear-gradient(115deg,#cfb17a,#f2dfb5 44%,#e5cc96 92%,#c3a168);
  box-shadow:inset 0 0 0 6px #eedbb43d,inset 0 0 0 7px #75501b40,inset 0 0 24px #77502030,0 24px 90px #0009;
  scrollbar-width:thin;
  scrollbar-color:#896738 #dcc18a;
}
.donation-dialog[open] { animation:parchment-dialog-in .3s ease-out; }
.donation-dialog::backdrop { background:#04070dcb; backdrop-filter:blur(7px); }
.donation-dialog>form { position:sticky; top:0; height:0; margin:0; z-index:5; }
.donation-dialog .dialog-close { position:absolute; top:0; right:-9px; width:44px; height:44px; display:grid; place-items:center; padding:0; font-size:26px; line-height:1; border:1px solid #78501d38; border-radius:50%; color:#604520; background:#e6ce9b; box-shadow:inset 0 0 0 3px #f7e4bd66; }
.donation-dialog .dialog-close:hover { background:#f2dfb5; color:#322619; }
.donation-seal { display:grid; place-items:center; width:46px; height:46px; margin:0 auto 13px; border:1px solid #7e5a27; border-radius:4px 11px 4px 11px; background:linear-gradient(135deg,#5d4428,#2f2319); color:#ffe2a2; font:500 26px/1 Cinzel,Georgia,serif; box-shadow:inset 0 0 0 3px #d8ae5f45,0 3px 8px #69462130; }
.donation-seal .coin-icon { width:32px; height:32px; image-rendering:auto; }
.donation-dialog .eyebrow { color:#72501e; font-size:9px; font-weight:800; letter-spacing:.18em; margin:0 0 11px; }
.donation-dialog h2 { color:#322619; font-family:Cinzel,Georgia,serif; font-size:31px; font-weight:500; letter-spacing:-.035em; line-height:1.2; margin:0 0 8px; }
.donation-dialog #dialog-detail { color:#5b4225; font-size:12px; line-height:1.7; margin:0 0 20px; }
.dialog-offer { margin:0 0 17px; padding:15px 12px 13px; border-top:1px solid #825c293d; border-bottom:1px solid #825c293d; background:linear-gradient(90deg,transparent,#fdf0cc60,transparent); }
.dialog-offer-label { color:#73532c; font-size:9px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; margin:0 0 4px; }
.donation-dialog .dialog-price { color:#322619; font-size:31px; line-height:1.25; font-weight:800; letter-spacing:-.04em; margin:0; }
.donation-dialog #dialog-account { color:#4f3c24; font-size:12px; font-weight:750; margin:0 0 12px; }
.donation-dialog #dialog-account:empty { display:none; }
.donation-dialog .dialog-status { color:#594226; font-size:12px; line-height:1.8; margin:0 0 17px; min-height:0; }
.donation-dialog .dialog-status.payment-success { color:#285337; padding:12px; background:#d5dfb9; border:1px solid #48714a55; border-radius:4px; }
.donation-dialog .button { border:1px solid #79562a65; border-radius:3px; background:#8964330b; color:#4b341b; font-size:12px; font-weight:750; min-height:46px; padding:12px 14px; }
.donation-dialog .button:hover { background:#8964331b; transform:none; }
.donation-dialog .button.gold { background:linear-gradient(130deg,#473522,#241b14); color:#ffe3a6; border-color:#3f2d1d; box-shadow:inset 0 0 0 2px #b7893a38,0 3px 5px #74502524; }
.donation-dialog .button.gold:hover { background:linear-gradient(130deg,#604421,#342216); }
.donation-dialog :is(button,a,textarea):focus-visible { outline:2px solid #52320f; outline-offset:3px; }
.donation-dialog #dialog-return { border-color:transparent; background:transparent; font-size:11px; min-height:44px; margin-top:7px; }
.donation-dialog #dialog-return:hover { text-decoration:underline; text-underline-offset:4px; }
.donation-dialog #payment-view { padding-top:18px; margin-top:18px; border-top:1px solid #825c293d; }
.donation-dialog #pix-qr { background:#fff; padding:12px; border:1px solid #aa87573d; border-radius:4px; box-shadow:0 3px 10px #79552b15; }
.donation-dialog #pix-code-group label { color:#604720; font-size:11px; font-weight:750; }
.donation-dialog #pix-code { background:#f8edcf; color:#33281a; border-color:#997849; border-radius:3px; }
.donation-dialog #copy-pix { margin-top:9px; }
.donation-dialog #pix-ticket { color:#513619; text-decoration:underline; text-underline-offset:4px; }
.donation-dialog #payment-note { color:#594226; font-size:12px; }
@media(max-width:480px) {
  .donation-dialog { padding:24px 23px 18px; }
  .donation-dialog .dialog-close { right:-6px; }
  .donation-dialog h2 { font-size:clamp(25px,7.1vw,31px); }
  .donation-dialog #dialog-detail { font-size:11px; margin-bottom:16px; }
  .donation-dialog .dialog-price { font-size:28px; }
  .dialog-offer { padding-block:12px; margin-bottom:14px; }
}
@keyframes parchment-dialog-in { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { html:not(.motion-enabled) .donation-dialog[open] { animation:none; } }
.is-paused .donation-dialog[open] { animation:none!important; }
