/* ARTIZS.SAY v0.5.3 — Support experience + brand logo auto-fit */

/* Brand: reserve a real visual area and let JS crop transparent/white padding automatically. */
.brand-logo-only{height:72px!important;padding:6px 7px 10px!important;display:flex!important;align-items:center!important;overflow:hidden!important}
.brand-logo-viewport{position:relative;display:block;width:min(198px,100%);height:54px;overflow:hidden;flex:0 0 auto}
.brand-logo-viewport .brand-logo-image{display:block!important;max-width:none!important;max-height:none!important;object-fit:contain!important;transform:none!important}
.brand-logo-only .brand-wordmark{font-size:19px!important;font-weight:950;letter-spacing:-.04em}

/* Main Support card: concise, readable, brand-first. */
.support-card-rich{min-height:178px!important;padding:18px 104px 18px 18px!important}
.support-card-rich-copy{max-width:164px!important}
.support-card-headline strong{font-size:14px!important;line-height:1.25!important;letter-spacing:-.025em}
.support-card-rich-copy>p{font-size:11px!important;margin:7px 0 9px!important;line-height:1.4!important}
.support-card-perks{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 12px}
.support-card-perks span{display:inline-flex;align-items:center;min-height:23px;padding:4px 7px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(123,111,255,.14);font-size:8px;font-weight:800;color:#66627a;white-space:nowrap}
.support-card-cta{min-height:38px!important;padding:9px 12px!important;font-size:9px!important;line-height:1.25!important;white-space:normal!important}
.support-card-rich>img{width:110px!important;height:110px!important;right:-2px!important;bottom:-7px!important;object-fit:contain!important}

/* Payment modal: fewer boxes, QR is the hero. */
.support-modal{width:min(420px,calc(100vw - 24px))!important;padding:27px 25px 21px!important;border-radius:24px!important}
.support-modal .modal-kicker{font-size:9px!important;letter-spacing:.12em!important;color:#9aa0ab!important;margin-bottom:8px!important}
.support-modal h2{font-size:25px!important;line-height:1.12!important;margin:0 0 7px!important;letter-spacing:-.045em!important}
.support-modal #supportModalIntro{font-size:12px!important;line-height:1.45!important;margin:0 0 18px!important;color:#777f8b!important}
.support-amount-field{margin-bottom:10px!important}
.support-amount-field>span,.support-proof-field>span:first-child{display:block;font-size:9.5px!important;font-weight:850!important;color:#565e6b!important;margin-bottom:6px!important}
.support-modal .money-input{height:48px!important;border-radius:13px!important;background:#fff!important;border:1px solid #e1e5eb!important;box-shadow:none!important}
.support-modal .money-input input{font-size:16px!important}
.support-qr-hero{display:grid!important;place-items:center!important;min-height:286px!important;margin:5px 0 12px!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;overflow:visible!important}
.support-qr-hero>img#supportQr{display:block!important;width:min(286px,82vw)!important;height:min(286px,82vw)!important;max-width:100%!important;object-fit:contain!important;filter:drop-shadow(0 14px 24px rgba(25,30,40,.05))}
.support-proof-field{margin-top:0!important}
.support-proof-picker{min-height:44px!important;border:1px solid #e1e5eb!important;border-radius:12px!important;background:#f9fafb!important;padding:10px 12px!important;font-size:10px!important;font-weight:800!important;color:#58616e!important}
.support-proof-picker:hover{background:#f5f7fa!important;border-color:#cfd6df!important}
.support-request-status{font-size:9px!important;line-height:1.4!important;margin:9px 1px 0!important;padding:8px 10px!important;border-radius:10px!important;background:#fff8e6!important;color:#7f6720!important}
.support-modal .primary-btn{min-height:48px!important;border-radius:13px!important;font-size:11px!important;margin-top:12px!important}
.support-modal .text-btn{font-size:9px!important;margin-top:7px!important;color:#9197a0!important}

/* Thank-you state after proof submission. */
.support-thankyou-stage{text-align:center;padding:2px 2px 4px}
.support-thankyou-mascot{display:block;width:190px;height:160px;object-fit:contain;margin:-2px auto 3px}
.support-thankyou-stage .modal-kicker{margin-top:0!important}
.support-thankyou-stage h2{max-width:340px;margin:0 auto 8px!important}
.support-thankyou-stage>p{font-size:12px!important;color:#69727f!important;margin:0 0 10px!important}
.support-thankyou-status{display:inline-flex;align-items:center;justify-content:center;padding:7px 10px;border-radius:999px;background:#fff7dc;color:#7d6519;font-size:9px;font-weight:850;margin:0 auto 13px}
.support-thankyou-perks{display:flex;justify-content:center;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.support-thankyou-perks span{padding:6px 9px;border-radius:999px;background:#f6f3ff;border:1px solid #ebe5ff;color:#645b85;font-size:8.5px;font-weight:850}
.support-thankyou-stage .primary-btn{width:100%;margin-top:10px!important}

/* Supporter perks are visible in profile only after approval. */
.supporter-perks{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.supporter-perks span{padding:4px 7px;border-radius:999px;background:#fff7df;border:1px solid #f3dfa6;color:#7c6220;font-size:8px;font-weight:850}
.supporter-sticker{position:relative;background:linear-gradient(145deg,#fff8df,#f5f0ff)!important;box-shadow:inset 0 0 0 1px rgba(202,164,55,.25)}
.supporter-sticker::after{content:'✦';position:absolute;right:3px;top:2px;font-size:7px;color:#c89a1b}

html[data-theme="dark"] .support-card-perks span{background:rgba(255,255,255,.07);border-color:#374252;color:#c3cad6}
html[data-theme="dark"] .support-modal .money-input{background:#111820!important;border-color:#35404d!important}
html[data-theme="dark"] .support-proof-picker{background:#111820!important;border-color:#35404d!important;color:#c9d1dc!important}
html[data-theme="dark"] .support-thankyou-perks span{background:#1b1728;border-color:#352e50;color:#c9c0ee}

@media(max-width:1099px){
  .brand-logo-only{height:70px!important}
  .brand-logo-viewport{width:196px;height:52px}
}
@media(max-width:520px){
  .support-modal{padding:23px 18px 18px!important}
  .support-modal h2{font-size:22px!important}
  .support-qr-hero{min-height:250px!important}
  .support-qr-hero>img#supportQr{width:min(250px,78vw)!important;height:min(250px,78vw)!important}
  .support-thankyou-mascot{width:165px;height:145px}
}