/* Invitation styles are scoped and preserve the reading surface underneath. */
.support-overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: flex-end; padding: 24px; pointer-events: none; }
.support-panel { pointer-events: auto; position: relative; width: min(100%, 380px); max-height: calc(100dvh - 48px); overflow: auto; overscroll-behavior: contain; padding: 29px 26px 22px; border: 1px solid #bdcbd1; border-top: 4px solid #146759; border-radius: 12px; color: #263c47; background: #fff; box-shadow: 0 18px 65px #10293430; animation: support-appear .18s ease-out; }
.support-is-modal { pointer-events: auto; align-items: center; justify-content: center; background: #10263080; }
.support-is-modal .support-panel { width: min(100%, 440px); }
.support-overlay [hidden] { display: none !important; }
.support-panel button, .support-panel textarea { font-family: var(--sans, system-ui, sans-serif); }
.support-panel button { cursor: pointer; }
.support-panel button:focus-visible, .support-panel textarea:focus-visible { outline: 3px solid #0878b5; outline-offset: 3px; }
.support-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; display: grid; place-items: center; background: transparent; border: 0; border-radius: 6px; color: #3f5863; font-size: 1.8rem; line-height: 1; }
.support-close:hover { background: #edf3f4; }
.support-kicker { display: flex; align-items: center; gap: 10px; margin: 0 34px 10px 0; color: #146759; font: 700 .75rem/1.5 var(--sans, system-ui, sans-serif); letter-spacing: .075em; text-transform: uppercase; }
.support-panel h2 { margin: 0; padding-right: 16px; font: 700 1.5rem/1.3 var(--sans, system-ui, sans-serif); letter-spacing: -.025em; color: #17333e; }
.support-copy { font-size: 1rem; line-height: 1.65; margin: 13px 0 20px; color: #4b616b; }
.support-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; margin: 0 0 18px; }
.support-amount { min-height: 46px; padding: 9px 4px; border: 1px solid #becbd1; border-radius: 6px; background: #fff; color: #263e4b; font-size: .9375rem; font-weight: 650; line-height: 1.35; }
.support-amount:hover { background: #f1f6f6; }
.support-amount[aria-pressed="true"] { border: 2px solid #146759; padding: 8px 3px; background: #e8f5ef; color: #10594b; }
.support-amount:disabled { opacity: .5; cursor: default; }
.support-payment-note { margin: 0 0 13px; font-size: .875rem; line-height: 1.55; color: #4b616b; }
.support-qr-preview { position: fixed; z-index: 1; pointer-events: none; width: 304px; padding: 24px 24px 12px; border-radius: 10px; background: #fff; color: #17333e; box-shadow: 0 8px 35px #10293440; animation: support-qr-appear .14s ease-out; }
.support-qr { display: block; width: 256px; height: 256px; clip-path: inset(2px); object-fit: contain; background: #fff; margin: 0; }
.support-qr-preview p { margin: 12px 0 0; text-align: center; font: 650 .875rem/1.5 var(--sans, system-ui, sans-serif); }
@keyframes support-qr-appear { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 680px), (hover: none), (pointer: coarse) { .support-qr-preview { display: none !important; } }
.support-copy-button { width: 100%; min-height: 46px; padding: 12px 16px; border: 1px solid transparent; border-radius: 6px; background: #155f53; color: #fff; font-size: 1rem; font-weight: 650; line-height: 1.4; }
.support-copy-button:hover { background: #0c5145; }
.support-copy-status { margin: 10px 0 0; color: #315d52; font-size: .875rem; line-height: 1.55; }
.support-copy-status:empty { display: none; }
.support-copy-fallback { margin-top: 12px; }
.support-copy-fallback p { font-size: .875rem; line-height: 1.5; margin: 0 0 8px; }
.support-copy-fallback textarea { width: 100%; padding: 10px; font-size: 1rem; line-height: 1.4; resize: vertical; min-height: 76px; border: 1px solid #8cabb4; border-radius: 5px; background: #f8fafb; color: #223b46; overflow-wrap: anywhere; }
.support-later, .support-optout { display: block; width: 100%; min-height: 44px; padding: 11px 5px; font-size: .875rem; line-height: 1.5; color: #4c626e; border: 0; background: transparent; border-radius: 5px; }
.support-later { margin-top: 10px; }
.support-later:hover, .support-optout:hover { background: #eff4f5; color: #1b4452; }
.support-optout { border-top: 1px solid #dce5e8; border-radius: 0; margin-top: 5px; text-decoration: underline; text-underline-offset: 3px; }
@keyframes support-appear { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 680px) {
  .support-overlay { padding: 16px; }
  .support-panel, .support-is-modal .support-panel { max-height: calc(100dvh - 32px); width: min(100%, 420px); padding: 26px 20px 17px; }
}
@media (max-width: 360px) {
  .support-overlay { padding: 10px; }
  .support-panel, .support-is-modal .support-panel { padding-inline: 17px; max-height: calc(100dvh - 20px); }
  .support-panel h2 { font-size: 1.375rem; }
  .support-amounts { gap: 5px; }
  .support-amount { font-size: .875rem; }
}
@media (prefers-reduced-motion: reduce) { .support-panel, .support-qr-preview { animation: none; scroll-behavior: auto; } }
@media (forced-colors: active) {
  .support-panel, .support-amount, .support-copy-button { border: 2px solid CanvasText; }
  .support-amount[aria-pressed="true"] { outline: 2px solid Highlight; outline-offset: -4px; }
}

/* A small decorative cup keeps the invitation warm without competing with the PIX. */
.support-coffee { position: relative; display: inline-block; flex: 0 0 32px; width: 32px; height: 34px; color: #146759; }
.support-coffee::after { content: ''; position: absolute; left: 1px; bottom: 1px; width: 26px; height: 2px; border-radius: 50%; background: currentColor; opacity: .65; }
.support-coffee-cup { position: absolute; left: 3px; bottom: 5px; width: 20px; height: 14px; border: 1.7px solid currentColor; border-radius: 2px 2px 7px 7px; background: #e8f5ef; }
.support-coffee-cup::after { content: ''; position: absolute; left: 100%; top: 1px; width: 7px; height: 8px; border: 1.7px solid currentColor; border-left: 0; border-radius: 0 5px 5px 0; }
.support-coffee-steam { position: absolute; left: 6px; top: 4px; width: 5px; height: 8px; border-left: 1.5px solid currentColor; border-radius: 50%; opacity: .5; animation: support-steam 2.8s ease-in-out infinite; }
.support-coffee-steam:nth-child(3) { left: 12px; top: 2px; animation-delay: -.9s; }
.support-coffee-steam:nth-child(4) { left: 18px; animation-delay: -1.8s; }
@keyframes support-steam { 0%, 100% { transform: translateY(1px) rotate(-8deg); opacity: .35; } 50% { transform: translateY(-2px) rotate(8deg); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .support-coffee-steam { animation: none; } }

.support-launcher { position: fixed; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); z-index: 90; display: grid; place-items: center; width: 56px; height: 56px; padding: 0; border: 1px solid #b5cfc4; border-radius: 50%; background: #f3faf6; box-shadow: 0 4px 18px #10293425; cursor: pointer; transition: background-color .18s ease, box-shadow .18s ease, transform .15s ease; }
.support-launcher[hidden] { display: none; }
.support-launcher:hover { background: #e3f3e9; box-shadow: 0 5px 22px #10293435; transform: translateY(-2px); }
.support-launcher:active { transform: scale(.95); }
.support-launcher:focus-visible { outline: 3px solid #0878b5; outline-offset: 3px; }
.support-launcher .support-coffee { transform: translate(1px, -1px); }
@media (max-width: 680px) { .support-launcher { right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); width: 52px; height: 52px; } }
@media (prefers-reduced-motion: reduce) { .support-launcher { transition: none; } }

.support-kicker > .support-coffee { transform: translateY(-4px); }