/* ==========================================================================
   Toolzen — Support (Buy Me a Coffee) modal   /tz/support-v1.css
   Reads the EXISTING Toolzen tool tokens. No per-tool CSS edits needed:
     tools use --acc / --card / --ink / --mut / --line / --r
     hub   uses --card / --text / --muted / --card-border / --r
   Dark mode follows automatically because those tokens already flip.
   Versioned filename — bump to -v2 on edit (Toolzen caching doctrine).
   Copyright (c) 2026 Dot2Shape.
   ========================================================================== */

.tz-sup-root{
  --tz-sup-accent:      var(--acc, #FFDD00);
  --tz-sup-accent-ink:  #0D0C22;                                  /* JS recomputes for contrast */
  --tz-sup-surface:     var(--card, #ffffff);
  --tz-sup-ink:         var(--ink, var(--text, #14141c));
  --tz-sup-muted:       var(--mut, var(--muted, #5c5c6b));
  --tz-sup-line:        var(--line, var(--card-border, rgba(20,20,28,.12)));
  --tz-sup-radius:      var(--r, 16px);
  --tz-sup-z:           2147483000;
}

.tz-sup-overlay{
  position:fixed; inset:0; z-index:var(--tz-sup-z);
  display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(10,10,18,.58);
  -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  opacity:0; visibility:hidden;
  transition:opacity .22s ease, visibility .22s ease;
}
.tz-sup-overlay[data-open="true"]{ opacity:1; visibility:visible; }

.tz-sup-card{
  position:relative; width:100%; max-width:400px;
  background:var(--tz-sup-surface); color:var(--tz-sup-ink);
  border:1px solid var(--tz-sup-line);
  border-radius:var(--tz-sup-radius);
  box-shadow:0 24px 60px -12px rgba(6,6,14,.42), 0 4px 12px rgba(6,6,14,.14);
  padding:28px 24px 20px; text-align:center;
  transform:translateY(14px) scale(.97);
  transition:transform .26s cubic-bezier(.2,.8,.3,1);
  font:400 15px/1.55 inherit; box-sizing:border-box;
}
.tz-sup-overlay[data-open="true"] .tz-sup-card{ transform:none; }
.tz-sup-card *,.tz-sup-card *::before,.tz-sup-card *::after{ box-sizing:border-box; }

.tz-sup-close{
  position:absolute; top:9px; right:9px; width:34px; height:34px;
  display:inline-flex; align-items:center; justify-content:center;
  border:0; border-radius:50%; background:transparent;
  color:var(--tz-sup-muted); cursor:pointer; line-height:0;
  transition:background .15s ease, color .15s ease;
}
.tz-sup-close:hover{ background:var(--tz-sup-line); color:var(--tz-sup-ink); }
.tz-sup-close:focus-visible{ outline:2px solid var(--tz-sup-accent); outline-offset:2px; }
.tz-sup-close svg{ width:16px; height:16px; }

.tz-sup-mark{
  width:62px; height:62px; margin:0 auto 14px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--tz-sup-accent); color:var(--tz-sup-accent-ink);
}
.tz-sup-mark svg{ width:31px; height:31px; }

.tz-sup-title{ margin:0 0 6px; font-size:20px; line-height:1.3; font-weight:800; letter-spacing:-.01em; color:var(--tz-sup-ink); }
.tz-sup-text{ margin:0 0 20px; font-size:14.5px; line-height:1.6; color:var(--tz-sup-muted); }

.tz-sup-actions{ display:flex; flex-direction:column; gap:8px; }
.tz-sup-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  width:100%; min-height:48px; padding:12px 18px;
  border:0; border-radius:calc(var(--tz-sup-radius) * .7);
  font:700 15px/1 inherit; text-decoration:none; cursor:pointer;
  transition:transform .12s ease, box-shadow .18s ease, background .15s ease;
}
.tz-sup-btn:focus-visible{ outline:2px solid var(--tz-sup-ink); outline-offset:2px; }
.tz-sup-btn--primary{ background:var(--tz-sup-accent); color:var(--tz-sup-accent-ink); box-shadow:0 2px 0 rgba(0,0,0,.10); }
.tz-sup-btn--primary:hover{ transform:translateY(-1px); box-shadow:0 8px 18px -6px rgba(0,0,0,.35); }
.tz-sup-btn--primary:active{ transform:none; }
.tz-sup-btn--primary svg{ width:19px; height:19px; flex:0 0 auto; }
.tz-sup-btn--ghost{ background:transparent; color:var(--tz-sup-muted); min-height:38px; font-size:13.5px; font-weight:600; }
.tz-sup-btn--ghost:hover{ color:var(--tz-sup-ink); }

.tz-sup-note{ margin:12px 0 0; font-size:11.5px; line-height:1.5; color:var(--tz-sup-muted); opacity:.75; }

/* inline link — footer / hub / anywhere */
.tz-sup-inline{
  display:inline-flex; align-items:center; gap:7px;
  font-size:inherit; font-weight:600; text-decoration:none; color:inherit;
  border-bottom:1px solid transparent; transition:border-color .15s ease;
}
.tz-sup-inline:hover{ border-bottom-color:currentColor; }
.tz-sup-inline svg{ width:15px; height:15px; color:var(--tz-sup-accent); flex:0 0 auto; }

@media (max-width:420px){
  .tz-sup-card{ padding:24px 18px 16px; }
  .tz-sup-title{ font-size:18.5px; }
}
@media (prefers-reduced-motion:reduce){
  .tz-sup-overlay,.tz-sup-card,.tz-sup-btn{ transition:none !important; }
  .tz-sup-card{ transform:none !important; }
}
@media (forced-colors:active){
  .tz-sup-card{ border:1px solid CanvasText; }
  .tz-sup-btn--primary{ border:1px solid ButtonText; }
}
html.tz-sup-locked, body.tz-sup-locked{ overflow:hidden !important; }