/* LiveTV.eu - "Support" (Ko-fi): knop in de topbar + paneel (assets/js/support.js). Alleen .support-* klassen; stijl volgt .pwa-dialog. */
.support-link{border-color:rgba(0,185,254,.45)}
.support-link:hover{border-color:#00b9fe;color:#fff}
.support-link .ui-ic{color:#ff6b9a}
.topbar-actions .support-link{padding:9px 14px;border-radius:12px}
/* Met tekst: het hartje alleen lijkt op "My TV" (ook een hartje). Alleen bij 760-819px is daar geen ruimte
   voor (het zoekveld zou het logo raken); dan pictogram met eigen kleur, naam blijft "Support LiveTV.eu". */
.topbar-actions .support-link .actiontext{display:inline}
@media (min-width:760px) and (max-width:819px){.topbar-actions .support-link .actiontext{display:none}.topbar-actions .support-link{padding:9px 12px}}
@media (max-width:759px){.topbar-actions .support-link{gap:6px}}

.support-dialog{width:min(460px,calc(100vw - 32px));max-width:none;max-height:none;padding:0;border:0;background:transparent;color:var(--text,#eaf2ff);overflow:visible}
.support-dialog::backdrop{background:rgba(3,7,14,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.support-panel{position:relative;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:24px 20px 18px;
  border:1px solid var(--line-2,rgba(255,255,255,.16));border-radius:20px;
  background:linear-gradient(180deg,rgba(12,24,44,.98),rgba(6,12,22,.98));box-shadow:var(--shadow,0 24px 60px rgba(0,0,0,.5))}
.support-title{margin:0 0 6px;padding-right:40px;font-size:1.3rem;line-height:1.25}
.support-sub{margin:0 0 14px;color:var(--muted,#9fb0c8)}
.support-frame{position:relative;min-height:200px;border-radius:14px;background:#f9f9f9;overflow:hidden}
.support-frame iframe{display:block;width:100%;height:600px;border:0;background:#f9f9f9}
.support-loading{position:absolute;inset:0;display:grid;place-items:center;margin:0;color:#4a5568;font-size:.9rem}
.support-frame.is-loaded .support-loading{display:none}
.support-note{margin:12px 0 0;font-size:.8rem;color:var(--muted,#9fb0c8)}
.support-newtab{display:inline-block;margin-top:8px;font-size:.85rem;color:var(--accent,#2f9dff)}
.support-newtab:hover{color:#fff}
.support-x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:36px;height:36px;padding:0;
  border:1px solid var(--line,rgba(255,255,255,.1));border-radius:10px;background:transparent;color:var(--muted,#9fb0c8);cursor:pointer}
.support-x svg{width:18px;height:18px}
.support-x:hover{border-color:var(--line-2,rgba(255,255,255,.16));color:#fff}
html.support-open{overflow:hidden}
@media (max-width:559px){.support-panel{padding:20px 14px 14px}.support-frame iframe{height:560px}}

/* Steunbanner "Keep live TV free" (includes/support_banner.php): compact, rustig, geen animatie. De knop opent dezelfde dialoog. */
.support-strip-in{display:flex;align-items:center;gap:16px;min-height:68px;padding:12px 12px 12px 16px;
  border:1px solid rgba(0,185,254,.26);border-radius:16px;
  background:linear-gradient(90deg,rgba(0,185,254,.09),rgba(12,24,44,.55) 42%,rgba(6,12,22,.55))}
.support-strip-ic{display:grid;place-items:center;flex:0 0 auto;width:40px;height:40px;border-radius:12px;
  background:rgba(255,107,154,.12);color:#ff6b9a}
.support-strip-ic .ui-ic{width:20px;height:20px}
.support-strip-text{flex:1 1 auto;min-width:0}
.support-strip-kicker{margin:0;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#7fdcff}
.support-strip-sub{margin:2px 0 0;font-size:.9rem;line-height:1.4;color:var(--muted,#9fb0c8)}
.support-strip-cta{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;
  border-radius:999px;background:#00b9fe;color:#03111c;font-weight:700;text-decoration:none;white-space:nowrap}
.support-strip-cta:hover,.support-strip-cta:focus-visible{background:#3fcbff;color:#03111c}
.support-strip-cta:focus-visible{outline:2px solid #fff;outline-offset:2px}
.support-strip-cta .ui-ic{width:16px;height:16px}
/* Tablet: iets kleinere tekst, zodat de strook compact blijft (2 regels). */
@media (min-width:641px) and (max-width:1099px){.support-strip-in{padding-block:10px}.support-strip-sub{font-size:.82rem;line-height:1.3}}
/* Homepage: secties zijn schermbreed met eigen zijmarge (--gx), zoals .pwa-promo. Kanaalpagina staat al in .wrap. */
.home-main > .support-strip{padding-inline:var(--gx,0px)}
/* Mobiel: compact - tekst links, kleine knop rechts, geen icoontegel. */
@media (max-width:640px){
  .support-strip-in{gap:12px;min-height:0;padding:10px 10px 10px 14px}
  .support-strip-ic{display:none}
  .support-strip-kicker{font-size:.66rem}
  .support-strip-sub{font-size:.8rem;line-height:1.35}
  .support-strip-cta{min-height:40px;padding:0 14px;gap:6px}
  .support-strip-cta .ui-ic{width:14px;height:14px}
}