/* ARTIZS.SAY v0.5.8 — Support Modal Polish + QR Lightbox */

/* Clean reward milestones. v0.5.4 had legacy dark selectors that could leak into light mode; these overrides are intentional. */
.support-modal .support-tier-strip{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
  margin:10px 0 8px!important;
}
.support-modal .support-tier-item,
.support-modal .support-tier-item.coffee,
.support-modal .support-tier-item.supporter{
  min-width:0!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:10px!important;
  padding:11px!important;
  border:1px solid #e7eaf0!important;
  border-radius:14px!important;
  background:#fff!important;
  box-shadow:0 1px 0 rgba(20,30,45,.02)!important;
  color:#1c2430!important;
  transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease,background .16s ease!important;
}
.support-modal .support-tier-item.coffee{background:#fffdf9!important}
.support-modal .support-tier-item.supporter{background:#fbfaff!important}
.support-modal .support-tier-item.is-active{
  border-color:#bbc7dc!important;
  box-shadow:0 5px 16px rgba(34,48,73,.07)!important;
  transform:translateY(-1px)!important;
}
.support-modal .support-tier-item.coffee.is-active{border-color:#e8cf8f!important;background:#fffaf0!important}
.support-modal .support-tier-item.supporter.is-active{border-color:#c8bdf2!important;background:#f8f5ff!important}
.support-tier-icon{
  flex:0 0 34px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:11px;
  background:#f4f6f9;
  font-size:17px;line-height:1;
}
.support-tier-item.coffee .support-tier-icon{background:#fff4d9}
.support-tier-item.supporter .support-tier-icon{background:#f1edff}
.support-tier-copy{display:grid;min-width:0;gap:1px}
.support-tier-copy b{font-size:10px!important;line-height:1.15!important;color:#6b7482!important;font-weight:900!important}
.support-tier-copy strong{font-size:10.5px!important;line-height:1.25!important;color:#202734!important;font-weight:900!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.support-tier-copy small{font-size:8.5px!important;line-height:1.25!important;color:#8a929e!important;font-weight:700!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.support-modal .support-unlock-preview{
  min-height:0!important;
  margin:0 0 7px!important;
  padding:3px 4px!important;
  border:0!important;
  background:transparent!important;
  color:#8a919c!important;
  font-size:8.5px!important;
  line-height:1.3!important;
  font-weight:750!important;
  text-align:center!important;
}
.support-modal .support-unlock-preview[data-tier="60"],
.support-modal .support-unlock-preview[data-tier="100"]{background:transparent!important;color:#7e8794!important}

/* QR artwork is the visual hero and the whole image is a zoom target. */
.support-modal .support-qr-hero{
  appearance:none!important;
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:100%!important;
  min-height:286px!important;
  margin:4px 0 13px!important;
  padding:0!important;
  border:0!important;
  border-radius:18px!important;
  background:transparent!important;
  cursor:zoom-in!important;
  overflow:visible!important;
}
.support-modal .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;
  transition:transform .16s ease,filter .16s ease!important;
  filter:drop-shadow(0 14px 24px rgba(25,30,40,.05))!important;
}
.support-modal .support-qr-hero:hover>img#supportQr{transform:scale(1.015)!important;filter:drop-shadow(0 16px 28px rgba(25,30,40,.09))!important}
.support-qr-zoom-hint{
  position:absolute;
  right:10px;bottom:7px;
  display:inline-flex;align-items:center;gap:5px;
  min-height:25px;padding:5px 8px;
  border:1px solid rgba(218,223,231,.9);
  border-radius:999px;
  background:rgba(255,255,255,.91);
  box-shadow:0 5px 18px rgba(20,28,42,.06);
  color:#697382;font-size:8.5px;font-weight:850;
  backdrop-filter:blur(8px);
}
.support-qr-zoom-icon{font-size:11px;line-height:1}

/* Slip upload is a compact, friendly upload card instead of a browser-style field. */
.support-proof-field{display:block!important;margin-top:0!important}
.support-modal .support-proof-field>span:first-child{margin-bottom:7px!important}
.support-proof-picker{
  position:relative!important;
  display:grid!important;
  grid-template-columns:38px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  min-height:66px!important;
  padding:9px 10px!important;
  border:1px dashed #d6dce5!important;
  border-radius:14px!important;
  background:#fbfcfe!important;
  color:#485363!important;
  cursor:pointer!important;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease!important;
}
.support-proof-picker:hover{background:#f7f9fc!important;border-color:#bac4d1!important;box-shadow:0 5px 16px rgba(25,35,50,.04)!important}
.support-proof-picker.has-file{background:#f7fbf8!important;border-style:solid!important;border-color:#bcd7c5!important}
.support-proof-icon{
  width:38px;height:38px;
  display:grid;place-items:center;
  border-radius:11px;
  background:#eef2f7;
  color:#536173;
}
.support-proof-picker.has-file .support-proof-icon{background:#e6f5eb;color:#3f7f56}
.support-proof-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.support-proof-copy{display:grid;min-width:0;gap:3px;text-align:left}
.support-proof-copy strong{font-size:10.5px;line-height:1.2;color:#253040;font-weight:900}
.support-proof-copy small{font-size:8.5px;line-height:1.25;color:#8a94a1;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.support-proof-cta{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:30px;padding:6px 9px;
  border:1px solid #dde2e9;border-radius:9px;
  background:#fff;color:#505d6d;
  font-size:8.5px;font-weight:900;white-space:nowrap;
}
.support-proof-picker.has-file .support-proof-cta{border-color:#cddfd2;color:#3c704e}
.support-proof-picker input{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;opacity:0!important;cursor:pointer!important}
.support-proof-remove{
  display:block;
  margin:5px 2px 0 auto;
  padding:2px 0;
  border:0;background:transparent;color:#9a6a70;
  font-size:8.5px;font-weight:800;cursor:pointer;
}
.support-proof-remove:hover{color:#b44350}
.support-proof-remove.hidden{display:none!important}

/* Full-screen QR lightbox for easy scanning. */
html.support-lightbox-open,html.support-lightbox-open body{overflow:hidden!important}
.support-qr-lightbox{
  position:fixed;inset:0;z-index:5000;
  display:grid;place-items:center;
  padding:28px;
  background:rgba(8,11,16,.86);
  backdrop-filter:blur(10px);
}
.support-qr-lightbox.hidden{display:none!important}
.support-qr-lightbox-inner{display:grid;place-items:center;gap:10px;max-width:min(94vw,920px);max-height:94vh}
.support-qr-lightbox-inner img{
  display:block;
  width:min(82vw,760px);
  height:min(82vw,760px);
  max-width:94vw;max-height:84vh;
  object-fit:contain;
  border-radius:22px;
  background:#fff;
  box-shadow:0 22px 70px rgba(0,0,0,.38);
}
.support-qr-lightbox-inner p{margin:0;color:rgba(255,255,255,.86);font-size:11px;font-weight:800;text-align:center}
.support-qr-lightbox-close{
  position:fixed;top:18px;right:20px;z-index:2;
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;
  font-size:28px;line-height:1;font-weight:300;cursor:pointer;
  backdrop-filter:blur(8px);
}
.support-qr-lightbox-close:hover{background:#fff;color:#141922}

html[data-theme="dark"] .support-modal .support-tier-item,
html[data-theme="dark"] .support-modal .support-tier-item.coffee,
html[data-theme="dark"] .support-modal .support-tier-item.supporter{background:#151b23!important;border-color:#303946!important;color:#eef2f7!important}
html[data-theme="dark"] .support-modal .support-tier-item.coffee.is-active{background:#211e16!important;border-color:#695b34!important}
html[data-theme="dark"] .support-modal .support-tier-item.supporter.is-active{background:#1e1a2a!important;border-color:#574b79!important}
html[data-theme="dark"] .support-tier-copy strong{color:#eef2f7!important}
html[data-theme="dark"] .support-tier-copy b,html[data-theme="dark"] .support-tier-copy small{color:#aab4c1!important}
html[data-theme="dark"] .support-tier-icon{background:#242c37}
html[data-theme="dark"] .support-tier-item.coffee .support-tier-icon{background:#332b19}
html[data-theme="dark"] .support-tier-item.supporter .support-tier-icon{background:#2a2439}
html[data-theme="dark"] .support-proof-picker{background:#121820!important;border-color:#394452!important;color:#d0d6df!important}
html[data-theme="dark"] .support-proof-picker:hover{background:#171f28!important;border-color:#4b5868!important}
html[data-theme="dark"] .support-proof-picker.has-file{background:#142019!important;border-color:#3c6249!important}
html[data-theme="dark"] .support-proof-icon{background:#222b36;color:#bcc7d4}
html[data-theme="dark"] .support-proof-picker.has-file .support-proof-icon{background:#1e3828;color:#88c39c}
html[data-theme="dark"] .support-proof-copy strong{color:#edf1f6}
html[data-theme="dark"] .support-proof-copy small{color:#99a5b3}
html[data-theme="dark"] .support-proof-cta{background:#1d2530;border-color:#35404d;color:#c8d1dc}
html[data-theme="dark"] .support-qr-zoom-hint{background:rgba(21,27,35,.9);border-color:#36404c;color:#c5ced9}

@media(max-width:520px){
  .support-modal .support-tier-strip{grid-template-columns:1fr!important;gap:7px!important}
  .support-modal .support-tier-item{padding:9px 10px!important}
  .support-tier-icon{width:32px;height:32px;flex-basis:32px}
  .support-qr-zoom-hint{right:4px;bottom:4px}
  .support-proof-picker{grid-template-columns:36px minmax(0,1fr) auto!important;gap:8px!important;min-height:62px!important;padding:8px 9px!important}
  .support-proof-icon{width:36px;height:36px}
  .support-proof-cta{padding:6px 8px}
  .support-qr-lightbox{padding:14px}
  .support-qr-lightbox-inner img{width:94vw;height:94vw;max-height:80vh;border-radius:16px}
  .support-qr-lightbox-close{top:12px;right:12px;width:38px;height:38px;font-size:25px}
}