/* LiveTV.eu - installeren als app (assets/js/pwa.js). Alleen .pwa-* klassen; stijl volgt .actionlink en .cmdk-panel. */
.pwa-install{font:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
.pwa-install[hidden]{display:none!important}
/* Smalle desktop-topbar: alleen het pictogram (aria-label blijft "Install LiveTV.eu"). */
@media (min-width:760px) and (max-width:1099px){.pwa-install .actiontext{display:none}}
/* Geopend mobiel menu: altijd met tekst, zodat de optie herkenbaar is. */
@media (max-width:759px){.topbar-actions .pwa-install .actiontext{display:inline}.topbar-actions .pwa-install{gap:6px}}

.pwa-dialog{width:min(440px,calc(100vw - 32px));max-width:none;max-height:none;padding:0;border:0;background:transparent;color:var(--text,#eaf2ff);overflow:visible}
.pwa-dialog::backdrop{background:rgba(3,7,14,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pwa-panel{position:relative;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;padding:28px 24px 22px;
  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))}
.pwa-icon{display:block;width:72px;height:72px;margin:0 0 14px}
.pwa-title{margin:0 0 6px;padding-right:40px;font-size:1.3rem;line-height:1.25}
.pwa-sub{margin:0 0 16px;color:var(--muted,#9fb0c8)}
.pwa-steps{display:grid;gap:8px;margin:0;padding:14px 16px 14px 34px;border:1px solid var(--line,rgba(255,255,255,.1));border-radius:14px;
  background:rgba(255,255,255,.03);font-size:.94rem;line-height:1.45}
.pwa-extra{margin:10px 0 0;font-size:.85rem;color:var(--muted,#9fb0c8)}
.pwa-note{margin:12px 0 0;font-size:.8rem;color:var(--muted,#9fb0c8)}
.pwa-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.pwa-btn{flex:1 1 auto;min-height:44px;padding:0 18px;border:1px solid var(--line-2,rgba(255,255,255,.16));border-radius:999px;
  background:transparent;color:var(--text,#eaf2ff);font:inherit;font-weight:600;cursor:pointer}
.pwa-btn:hover{border-color:var(--accent,#2f9dff);color:#fff}
.pwa-btn.is-primary{background:#fff;border-color:#fff;color:#04101d}
.pwa-btn.is-primary:hover{background:#e3f2ff}
.pwa-btn[disabled]{opacity:.6;cursor:progress}
.pwa-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}
.pwa-x svg{width:18px;height:18px}
.pwa-x:hover{border-color:var(--line-2,rgba(255,255,255,.16));color:#fff}
html.pwa-open{overflow:hidden}

/* ---------------------------------------------------------------- installatiebanners (includes/pwa_promo.php)
   Variant hero: direct onder de homepagehero; variant footer: direct boven de footer. Echte HTML; lichtlijnen
   zijn twee dunne CSS-bogen (alleen transform-animatie, uit bij prefers-reduced-motion). */
.pwa-promo{padding-inline:var(--gx,0px);margin:clamp(18px,2.2vw,32px) 0 0}
.pwa-promo--footer{margin-top:clamp(36px,4.2vw,60px)}
.pwa-promo[hidden]{display:none!important}
.pwa-promo-in{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;gap:clamp(14px,1.6vw,24px);
  min-height:84px;padding:14px clamp(16px,1.8vw,26px);border:1px solid rgba(95,240,255,.3);border-radius:var(--radius,18px);
  background:radial-gradient(120% 160% at 0% 0%,rgba(47,157,255,.15),transparent 55%),linear-gradient(180deg,rgba(13,26,46,.92),rgba(5,10,20,.95));
  box-shadow:inset 0 0 0 1px rgba(95,240,255,.05),inset 0 0 26px rgba(0,200,255,.07),0 18px 40px rgba(0,0,0,.32);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.pwa-promo-in::before,.pwa-promo-in::after{content:"";position:absolute;z-index:-1;height:220%;border-radius:50%;pointer-events:none;
  border-top:1px solid rgba(95,240,255,.38);box-shadow:0 -1px 16px rgba(0,200,255,.14);animation:pwa-promo-drift 14s ease-in-out infinite alternate}
.pwa-promo-in::before{left:-30%;right:12%;bottom:-196%}
.pwa-promo-in::after{left:8%;right:-36%;bottom:-206%;border-top-color:rgba(47,157,255,.32);animation-delay:-7s}
@keyframes pwa-promo-drift{from{transform:translateX(-2%)}to{transform:translateX(2%)}}
.pwa-promo-icon{flex:none;width:56px;height:56px;border-radius:14px;box-shadow:0 0 0 1px rgba(95,240,255,.16),0 8px 22px rgba(0,160,255,.18)}
.pwa-promo-copy{flex:1 1 220px;min-width:0}
.pwa-promo-title{margin:0;color:#fff;font-size:clamp(1rem,1.2vw,1.18rem);font-weight:800;line-height:1.2;letter-spacing:-.01em}
.pwa-promo-sub{margin:3px 0 0;color:var(--muted,#93a8c6);font-size:.88rem;line-height:1.35}
.pwa-promo-perks{display:flex;align-items:center;flex:0 1 auto;margin:0;padding:0;list-style:none}
.pwa-promo-perks li{display:flex;align-items:center;gap:10px;padding:2px clamp(12px,1.3vw,20px);border-left:1px solid var(--line-2,rgba(120,166,224,.28))}
.pwa-promo-perks li:last-child{border-right:1px solid var(--line-2,rgba(120,166,224,.28))}
.pwa-promo-perk-ic{display:grid;place-items:center;flex:none;width:34px;height:34px;border:1px solid rgba(95,240,255,.22);border-radius:10px;
  background:rgba(0,200,255,.08);color:#5ff0ff}
.pwa-promo-perk-ic svg{width:17px;height:17px}
.pwa-promo-perk-tx b{display:block;color:var(--text,#eaf2ff);font-size:.88rem;font-weight:700;white-space:nowrap}
.pwa-promo-perk-tx small{display:block;color:var(--muted,#93a8c6);font-size:.78rem;white-space:nowrap}
.pwa-promo-cta{display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:none;min-height:46px;padding:0 20px;
  border:1px solid rgba(140,220,255,.55);border-radius:999px;background:linear-gradient(180deg,#36b4ff,#1673ff);color:#fff;
  font:inherit;font-size:.95rem;font-weight:700;white-space:nowrap;cursor:pointer;
  box-shadow:0 8px 24px rgba(22,115,255,.32),inset 0 1px 0 rgba(255,255,255,.32);transition:transform .2s ease,box-shadow .2s ease}
.pwa-promo-cta svg{width:18px;height:18px;flex:none}
.pwa-promo-cta-arrow{transition:transform .2s ease}
.pwa-promo-cta:hover{transform:translateY(-1px);box-shadow:0 12px 30px rgba(22,115,255,.45),inset 0 1px 0 rgba(255,255,255,.4)}
.pwa-promo-cta:hover .pwa-promo-cta-arrow{transform:translateX(3px)}
.pwa-promo-cta:focus-visible{outline:2px solid #5ff0ff;outline-offset:3px}
.pwa-promo--footer .pwa-promo-in{min-height:76px}
.pwa-promo--footer .pwa-promo-in::before,.pwa-promo--footer .pwa-promo-in::after{opacity:.7}
/* middelgroot: eerst de sublabels weg, daarna alleen pictogrammen (tekst blijft voor schermlezers) */
@media (max-width:1279px){.pwa-promo-perk-tx small{display:none}}
@media (max-width:1023px){
  .pwa-promo-perks li{padding-inline:10px}
  .pwa-promo-perk-tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
/* Nederlands: langere labels, dus eerder compact; kop en subtekst houden voorrang. */
@media (max-width:1599px){.pwa-promo--nl .pwa-promo-perk-tx small{display:none}}
@media (max-width:1365px){.pwa-promo--nl .pwa-promo-perk-tx{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* mobiel: maximaal twee rijen - [icoon | kop + subtekst] en [voordelen als pictogrammen | CTA] */
@media (max-width:759px){
  .pwa-promo-in{display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"icon copy copy" "perks perks cta";
    gap:12px 12px;padding:14px;min-height:0}
  .pwa-promo-icon{grid-area:icon;width:44px;height:44px;border-radius:12px}
  .pwa-promo-copy{grid-area:copy}
  .pwa-promo-title{font-size:1rem}
  .pwa-promo-sub{font-size:.82rem}
  .pwa-promo-perks{grid-area:perks;gap:8px}
  .pwa-promo-perks li,.pwa-promo-perks li:last-child{padding:0;border:0}
  .pwa-promo-perk-ic{width:32px;height:32px}
  .pwa-promo-cta{grid-area:cta;min-height:44px;padding:0 16px;font-size:.9rem}
  .pwa-promo--footer .pwa-promo-in{grid-template-areas:"icon copy copy" "cta cta cta"}
  .pwa-promo--footer .pwa-promo-cta{width:100%}
}
@media (max-width:359px){.pwa-promo-cta-arrow{display:none}.pwa-promo-cta{padding:0 14px}}
@media (prefers-reduced-motion:reduce){
  .pwa-promo-in::before,.pwa-promo-in::after{animation:none}
  .pwa-promo-cta,.pwa-promo-cta-arrow{transition:none}
  .pwa-promo-cta:hover,.pwa-promo-cta:hover .pwa-promo-cta-arrow{transform:none}
}