.tg-banner{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; max-width:1060px; margin:0 auto 16px; padding:11px 16px; background:#eef5ff; border:1px solid #c3dbfa; color:#1e3a8a; border-radius:12px; font-size:.88rem; }
.tg-banner[data-empty]{ background:#fef3c7; border-color:#fcd34d; color:#92400e; }
.tg-banner svg{ flex-shrink:0; }
.tg-banner a{ margin-left:auto; font-weight:700; color:inherit; white-space:nowrap; }
/* Korte linktekst voor een telefoon; staat altijd in de HTML, alleen zichtbaar onder 640px. */
.tg-kort{ display:none; }
/* Wegtik-knop. Het script zet hem alleen neer als de pagina er zelf nog geen heeft (de
   editors voegen een eigen × toe); op het bureaublad blijft hij verborgen. */
.tg-weg{ display:none; background:none; border:0; color:inherit; cursor:pointer; font-size:1.1rem; line-height:1; padding:0; }
.tg-overlay{ position:fixed; inset:0; z-index:9999; background:rgba(15,23,42,.58); display:flex; align-items:center; justify-content:center; padding:20px; -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); }
/* CRUCIAAL: author-CSS `display:flex` hierboven overschrijft het HTML-attribuut
   `hidden` (UA-regel [hidden]{display:none}), waardoor de overlay ALTIJD zichtbaar
   stond — op elke tools-pagina, voor iedereen, ongeacht tool_paid, en `o.hidden=true`
   (o.a. 'Misschien later') deed niets. Deze regel laat `hidden` weer winnen. */
.tg-overlay[hidden]{ display:none !important; }
.tg-card{ background:#fff; border-radius:18px; max-width:430px; width:100%; padding:30px 28px 22px; text-align:center; box-shadow:0 34px 70px -22px rgba(0,0,0,.55); font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; }
.tg-ic{ width:58px; height:58px; border-radius:16px; background:#eef4fd; color:#1e5a9e; display:flex; align-items:center; justify-content:center; margin:0 auto 15px; }
.tg-card h3{ font-size:1.28rem; margin:0 0 9px; color:#0f172a; font-weight:700; }
.tg-card p{ color:#475569; font-size:.95rem; line-height:1.55; margin:0 0 12px; }
.tg-list{ text-align:left; margin:0 auto 18px; max-width:320px; padding:0; list-style:none; font-size:.9rem; color:#334155; }
.tg-list li{ display:flex; align-items:flex-start; gap:8px; padding:4px 0; }
.tg-list svg{ color:#0e7a4f; flex-shrink:0; margin-top:2px; }
.tg-btn{ display:block; width:100%; background:#1e5a9e; color:#fff; border-radius:12px; padding:.85rem; font-weight:700; text-decoration:none; font-size:1rem; }
.tg-btn:hover{ filter:brightness(1.08); }
.tg-close{ background:none; border:none; color:#94a3b8; margin-top:12px; cursor:pointer; font-size:.88rem; }
.tg-close:hover{ color:#475569; }
/* ===== Telefoon (<= 640px) — gemeten 09-09-2026 op 390px (harnas gate_mobiel.py) =====
   Toolpagina: de banner stond BOVEN de kopbalk en was 112px hoog (icoon, zin en link
   elk op een eigen regel, 11px binnenmarge); de kopbalk begon pas op y=144, terwijl
   die zelf net naar ~90px was teruggebracht. Editor (imageeditor, videoeditor en
   cadtools zetten #tgBanner op position:fixed onderin): een pil van 104px, over de
   zoekknop #dlpalBtn en over de onderste knoppen van de panelen.
   Nu: één regel van ~32px — icoon, de zin met een beletsel, één korte link en een
   wegtik-knop die per dag onthouden wordt (localStorage; telt alleen op deze breedte,
   het bureaublad is ongewijzigd). De zwevende variant krijgt van het script de klasse
   tg-vast en gaat linksonder, binnen calc(100vw - 72px): rechts blijft 62px vrij voor
   de zoekknop (44px + 2x 10px marge - 2px), en de onderrand houdt rekening met de
   iOS-systeembalk. Selector #tgBanner.tg-banner.tg-vast: de editor-regels staan NA
   deze include met #tgBanner, dus alleen een hogere specificiteit wint daar. */
@media (max-width:640px){
  .tg-banner{ flex-wrap:nowrap; gap:7px; margin:0 0 8px; padding:6px 10px; font-size:.78rem; line-height:1.3; border-radius:10px; }
  .tg-banner svg{ width:14px; height:14px; }
  .tg-banner > span{ flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tg-banner a{ margin-left:0; flex:0 0 auto; }
  .tg-banner a + a{ display:none; }   /* de Pro-proef-link; die staat ook in de overlay */
  .tg-lang{ display:none; }
  .tg-kort{ display:inline; }
  /* Elke knop in de banner (de onze of de × van een editor) krijgt een tikvlak van 30px
     zonder de regel hoger te maken. */
  .tg-banner button{ flex:0 0 auto; min-width:30px; min-height:30px; margin:-6px -6px -6px -2px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; }
  .tg-weg{ display:inline-flex; }
  .tg-banner[data-weg]{ display:none !important; }
  #tgBanner.tg-banner.tg-vast{ left:10px; right:auto; transform:none; bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    width:auto; max-width:calc(100vw - 72px); margin:0; padding:6px 10px; gap:7px; font-size:.78rem; }
}