#stb-dock,#stb-dock *{box-sizing:border-box!important;text-align:left!important}
#stb-dock{--stb-c:#169A47;--stb-t:#169A47;position:fixed;left:0;right:0;bottom:0;z-index:9990;margin:0;padding:0 0 env(safe-area-inset-bottom,0px);background:#0A1017;border-top:3px solid var(--stb-c);box-shadow:0 -6px 20px rgba(8,14,20,.20);font-family:'Plus Jakarta Sans',system-ui,sans-serif;transform:translateY(115%);visibility:hidden;transition:transform .25s ease,visibility 0s linear .25s}
#stb-dock.show{transform:translateY(0);visibility:visible;transition:transform .25s ease,visibility 0s}
#stb-dock .stb[hidden]{display:none!important}
#stb-dock .stb-inner{display:flex;align-items:center;gap:16px;max-width:1320px;margin:0 auto;padding:13px 40px}

#stb-dock .stb-tile{width:44px;height:44px;flex:none;border-radius:12px;background:var(--stb-t);display:flex;align-items:center;justify-content:center;overflow:hidden}
#stb-dock .stb-tg .stb-tile{background:#229ED9}
#stb-dock .stb-tile img{display:block;width:30px;height:30px;object-fit:contain;margin:0;border:0}
#stb-dock .stb-txt{flex:1 1 auto;min-width:0}
#stb-dock .stb-eyebrow{display:flex;align-items:center;gap:8px;min-width:0;font-size:10.5px;font-weight:700;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:#8A97A0}
#stb-dock .stb-eb-t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#stb-dock .stb-eyebrow.live{color:#6CC08B}
#stb-dock .stb-dot{width:7px;height:7px;flex:none;border-radius:50%;background:#EF4444;animation:stbBlink 1.2s ease-in-out infinite}
@keyframes stbBlink{0%,100%{opacity:1}50%{opacity:.3}}
#stb-dock .stb-mrate{display:none}
#stb-dock .stb-headline{margin:4px 0 0;font-family:'Poppins',system-ui,sans-serif;font-size:15.5px;font-weight:600;line-height:1.3;color:#F2F6F4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

#stb-dock .stb-rating{display:flex;align-items:center;gap:11px;flex:none}
#stb-dock .stb-rating[hidden]{display:none}
#stb-dock .stb-metric{font-family:'Poppins',system-ui,sans-serif;font-size:15px;font-weight:700;line-height:1;color:#F2F6F4;font-variant-numeric:tabular-nums;text-align:right!important}
#stb-dock .stb-metric b{font-weight:700}
#stb-dock .stb-metric span{font-size:11px;font-weight:500;color:#8A97A0}
#stb-dock .stb-metric-lbl{margin:4px 0 0;font-size:10.5px;line-height:1.2;color:#8A97A0;white-space:nowrap;text-align:right!important}
#stb-dock .stb-bar{display:block;width:54px;height:5px;flex:none;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
#stb-dock .stb-bar-fill{display:block;width:0;height:100%;border-radius:999px;background:#6CC08B}

/* Knop: mat groen, geen lift of glow */
#stb-dock a.stb-cta{display:inline-flex!important;align-items:center;justify-content:center;gap:8px;flex:none;height:46px;margin:0!important;padding:0 22px!important;background:#169A47!important;background-image:none!important;border:1px solid #169A47!important;border-radius:12px!important;box-shadow:none!important;filter:none!important;transform:none!important;color:#fff!important;font-family:'Poppins',system-ui,sans-serif!important;font-size:14.5px!important;font-weight:600!important;line-height:1!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none!important;white-space:nowrap;transition:background-color .15s ease,border-color .15s ease}
#stb-dock a.stb-cta:hover{background:#12833D!important;border-color:#12833D!important;color:#fff!important}
#stb-dock .stb-arr{display:block;width:15px;height:15px;flex:none;transition:transform .15s ease}
#stb-dock a.stb-cta:hover .stb-arr{transform:translateX(2px)}
#stb-dock button.stb-close{display:inline-flex!important;align-items:center;justify-content:center;width:34px;height:34px;flex:none;margin:0 -6px 0 -4px!important;padding:0!important;background:transparent!important;border:0!important;border-radius:999px!important;box-shadow:none!important;color:#8A97A0!important;cursor:pointer;transition:background-color .15s ease,color .15s ease}
#stb-dock button.stb-close:hover{background:rgba(255,255,255,.08)!important;color:#F2F6F4!important}
#stb-dock button.stb-close svg{display:block;width:16px;height:16px}
#stb-dock a.stb-cta:focus-visible,#stb-dock button.stb-close:focus-visible{outline:2px solid #6CC08B!important;outline-offset:2px}

/* Zwevende knoppen (cookie, leeftijd) omhoog zolang de balk zichtbaar is */
body.stb-on #av-reopen,body.stb-on #cb-reopen,body.stb-on .fs-cc-manager_component-2{bottom:calc(var(--stb-h,80px) + 12px)!important;transition:bottom .25s ease}

/* Mobiel: zwevende kaart, bonus volledig leesbaar, knop over de hele breedte */
@media (max-width:600px){
  #stb-dock{left:10px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom,0px));padding:0;border:1px solid rgba(255,255,255,.10);border-top:3px solid var(--stb-c);border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(8,14,20,.35);transform:translateY(calc(100% + 30px))}
  #stb-dock .stb-inner{display:grid;grid-template-columns:40px minmax(0,1fr) 28px;grid-template-areas:"tile txt close" "cta cta cta";align-items:center;gap:10px 12px;padding:12px 12px 12px 14px}
  #stb-dock .stb-tile{grid-area:tile;width:40px;height:40px;border-radius:10px}
  #stb-dock .stb-tile img{width:28px;height:28px}
  #stb-dock .stb-txt{grid-area:txt}
  #stb-dock .stb-eyebrow{font-size:10px;letter-spacing:.08em}
  #stb-dock .stb-mrate{display:inline-flex;align-items:center;gap:3px;flex:none;padding:2px 6px;border-radius:6px;background:rgba(108,192,139,.14);color:#6CC08B;font-size:10px;letter-spacing:0}
  #stb-dock .stb-headline{margin-top:3px;font-size:14.5px;line-height:1.3;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  #stb-dock .stb-rating{display:none}
  #stb-dock .stb-eb-x{display:none}
  #stb-dock a.stb-cta{grid-area:cta;width:100%;height:44px;font-size:14.5px!important}
  #stb-dock button.stb-close{grid-area:close;justify-self:end;align-self:start;width:28px;height:28px;margin:-4px -4px 0 0!important}
}
@media (prefers-reduced-motion:reduce){#stb-dock,#stb-dock *{animation:none!important;transition:none!important}}
