/* ═══════════════════════════════════════════════════════════════════════
   HET LIPJE - modules/edge-tab  (4.160.0)

   Twee losse, vaste elementen: het lipje en het paneel. De wrapper .tr-edge
   draagt alleen de stand (data-state) en neemt zelf geen ruimte in.

     idle   niets te zien (ook: [hidden] tot edge-tab.js het weghaalt)
     in     het lipje staat aan de rand
     open   breed: het paneel schuift van rechts uit, het lipje schuift mee
            telefoon (tot 599px): een blad van onderen met een waas erachter,
            het lipje gaat zolang weg
     gone   weggeklikt

   Breed staat het lipje op de hoogte van het paneel, zodat het bij openen
   niet verspringt. Op een telefoon staat het laag (bottom 120px): binnen
   bereik van een duim en onder de kop van de pagina.

   Groen komt hier alleen in de twee pictogrammen voor. De knop in het
   paneel is wit: groen is op deze site de kleur van de koopknop, en dit is
   geen koopknop.

   z-index: de header staat op 99990. Het lipje en het brede paneel blijven
   eronder (99980, 99981), zodat het mobiele menu eroverheen valt. Het blad
   op een telefoon bedekt de pagina en gaat er dus overheen (100000, 100001);
   de videomodal (2147483600) en de cookiebanner (2147483647) blijven boven.

   Verbergen zonder script: de cookiebanner zet show--consent op <html>, een
   open videomodal trdtc-modal-open op <body>.

   !important overal, om dezelfde reden als strip.css (WORKSPACE trap 1). De
   componentregels beginnen met .tr-edge zodat ze de reset voor button en a
   (0,1,1) verslaan.
   ═══════════════════════════════════════════════════════════════════════ */
.tr-edge{
	--tr-edge-w:348px !important;
	--tr-edge-top:max(88px, calc(50vh - 190px)) !important;
	font-family:'Inter','Inter Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif !important;
	font-size:14px !important;line-height:1.5 !important;color:#fff !important;text-align:left !important;
}
.tr-edge[hidden]{display:none !important}
.tr-edge *,.tr-edge *::before,.tr-edge *::after{box-sizing:border-box !important}

/* ── wat het thema aan knoppen en links meegeeft, eraf ── */
.tr-edge button,.tr-edge a{
	-webkit-appearance:none !important;appearance:none !important;margin:0 !important;
	font-family:inherit !important;text-transform:none !important;letter-spacing:normal !important;
	text-shadow:none !important;box-shadow:none !important;text-decoration:none !important;
	min-width:0 !important;min-height:0 !important;cursor:pointer !important;
	-webkit-tap-highlight-color:transparent !important;
}
.tr-edge button{background:none !important;border:0 !important;border-radius:0 !important;padding:0 !important;color:inherit !important;line-height:1 !important}
.tr-edge svg{display:block !important;flex:none !important;fill:none !important}
.tr-edge button:focus-visible,.tr-edge a:focus-visible{outline:2px solid #03c988 !important;outline-offset:-2px !important}

/* ── het lipje ── */
.tr-edge .tr-edge__tab{
	position:fixed !important;right:0 !important;left:auto !important;top:var(--tr-edge-top) !important;bottom:auto !important;z-index:99980 !important;
	display:flex !important;flex-direction:column !important;width:44px !important;margin:0 !important;padding:0 !important;
	background:#16273a !important;border:1px solid rgba(255,255,255,.14) !important;border-right:0 !important;border-radius:12px 0 0 12px !important;
	box-shadow:-10px 12px 30px -12px rgba(0,0,0,.6) !important;
	transform:translateX(110%) !important;transition:transform .35s cubic-bezier(.4,0,.2,1) !important;
}
.tr-edge[data-state="in"] .tr-edge__tab{transform:translateX(0) !important}
.tr-edge[data-state="open"] .tr-edge__tab{transform:translateX(calc(var(--tr-edge-w) * -1)) !important}

.tr-edge .tr-edge__x{
	position:relative !important;display:flex !important;align-items:center !important;justify-content:center !important;
	width:100% !important;height:30px !important;color:rgba(255,255,255,.62) !important;
	border-bottom:1px solid rgba(255,255,255,.1) !important;border-radius:11px 0 0 0 !important;
	transition:color .15s,background-color .15s !important;
}
.tr-edge .tr-edge__x svg{width:12px !important;height:12px !important}
.tr-edge .tr-edge__x:hover{color:#fff !important;background:rgba(255,255,255,.07) !important}

.tr-edge .tr-edge__open{
	position:relative !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;gap:10px !important;
	width:100% !important;padding:14px 0 16px !important;color:rgba(255,255,255,.92) !important;border-radius:0 0 0 11px !important;
	transition:background-color .15s !important;
}
.tr-edge .tr-edge__open:hover{background:rgba(255,255,255,.05) !important}
.tr-edge .tr-edge__open svg{width:18px !important;height:18px !important;color:#03c988 !important}
.tr-edge .tr-edge__label{
	display:block !important;writing-mode:vertical-rl !important;transform:rotate(180deg) !important;
	font-size:13px !important;font-weight:600 !important;letter-spacing:.01em !important;line-height:1 !important;white-space:nowrap !important;
}

/* ── het paneel, breed ── */
.tr-edge .tr-edge__scrim,.tr-edge .tr-edge__grab{display:none !important}
.tr-edge .tr-edge__panel{
	position:fixed !important;right:0 !important;left:auto !important;top:var(--tr-edge-top) !important;bottom:auto !important;z-index:99981 !important;
	width:var(--tr-edge-w) !important;max-width:calc(100vw - 44px) !important;max-height:calc(100vh - var(--tr-edge-top) - 16px) !important;overflow-y:auto !important;
	margin:0 !important;padding:22px 24px !important;
	background:#16273a !important;border:1px solid rgba(255,255,255,.14) !important;border-right:0 !important;border-radius:0 0 0 14px !important;
	box-shadow:-18px 18px 40px -14px rgba(0,0,0,.6) !important;outline:0 !important;
	transform:translateX(105%) !important;visibility:hidden !important;
	transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s linear .35s !important;
}
.tr-edge[data-state="open"] .tr-edge__panel{
	transform:translateX(0) !important;visibility:visible !important;
	transition:transform .35s cubic-bezier(.4,0,.2,1),visibility 0s !important;
}

.tr-edge .tr-edge__head{display:flex !important;align-items:flex-start !important;justify-content:space-between !important;gap:12px !important;margin:0 !important;padding:0 !important}
.tr-edge .tr-edge__kicker{margin:0 !important;padding:0 !important;font-size:10px !important;line-height:14px !important;font-weight:600 !important;letter-spacing:.7px !important;text-transform:uppercase !important;color:rgba(255,255,255,.6) !important}
.tr-edge .tr-edge__close{display:flex !important;align-items:center !important;justify-content:center !important;width:44px !important;height:44px !important;margin:-15px -15px -15px 0 !important;color:rgba(255,255,255,.62) !important;border-radius:8px !important;transition:color .15s !important}
.tr-edge .tr-edge__close svg{width:16px !important;height:16px !important}
.tr-edge .tr-edge__close:hover{color:#fff !important}
.tr-edge .tr-edge__title{margin:6px 0 0 !important;padding:0 !important;font-family:inherit !important;font-size:20px !important;line-height:1.25 !important;font-weight:700 !important;letter-spacing:-.02em !important;text-transform:none !important;color:rgba(255,255,255,.94) !important}
.tr-edge .tr-edge__body{margin:8px 0 0 !important;padding:0 !important;font-size:14px !important;line-height:1.5 !important;color:rgba(255,255,255,.65) !important}
.tr-edge .tr-edge__note{display:flex !important;align-items:flex-start !important;gap:12px !important;margin:14px 0 0 !important;padding:12px 14px !important;border-radius:10px !important;background:rgba(255,255,255,.05) !important;border:1px solid rgba(255,255,255,.12) !important}
.tr-edge .tr-edge__note svg{width:20px !important;height:20px !important;margin-top:1px !important;color:#03c988 !important}
.tr-edge .tr-edge__note p{margin:0 !important;padding:0 !important;font-size:13.5px !important;line-height:1.45 !important;color:rgba(255,255,255,.78) !important}
.tr-edge .tr-edge__cta{
	display:flex !important;align-items:center !important;justify-content:center !important;gap:8px !important;
	height:46px !important;margin:14px 0 0 !important;padding:0 16px !important;border:0 !important;border-radius:8px !important;
	background:#f8f9fa !important;color:#0c1927 !important;font-size:15px !important;font-weight:700 !important;line-height:1 !important;
	transition:background-color .15s !important;
}
.tr-edge .tr-edge__cta:hover,.tr-edge .tr-edge__cta:focus{background:#fff !important;color:#0c1927 !important}
.tr-edge .tr-edge__cta svg{width:15px !important;height:15px !important}
.tr-edge .tr-edge__foot{display:flex !important;flex-wrap:wrap !important;align-items:center !important;justify-content:space-between !important;gap:2px 16px !important;margin:10px 0 0 !important;padding:0 !important}
.tr-edge .tr-edge__more,.tr-edge .tr-edge__never{
	display:inline-block !important;padding:6px 0 !important;border:0 !important;font-size:13px !important;font-weight:400 !important;line-height:1.45 !important;color:rgba(255,255,255,.72) !important;
	text-decoration:underline !important;text-decoration-color:rgba(255,255,255,.3) !important;text-underline-offset:3px !important;
}
.tr-edge .tr-edge__more:hover,.tr-edge .tr-edge__never:hover{color:#fff !important}
.tr-edge .tr-edge__admin{margin:12px 0 0 !important;padding:8px 10px !important;border-radius:8px !important;background:rgba(255,196,0,.1) !important;border:1px solid rgba(255,196,0,.32) !important;font-size:12px !important;line-height:1.45 !important;color:rgba(255,255,255,.84) !important}

/* ── telefoon: een smal lipje, en het paneel als blad van onderen ── */
@media (max-width:599px){
	.tr-edge .tr-edge__tab{top:auto !important;bottom:120px !important;width:32px !important;border-radius:10px 0 0 10px !important}
	.tr-edge[data-state="open"] .tr-edge__tab{transform:translateX(110%) !important}
	/* 32px is te smal voor een duim: twaalf onzichtbare pixels erbij, links. */
	.tr-edge .tr-edge__x::before,.tr-edge .tr-edge__open::before{content:"" !important;position:absolute !important;left:-12px !important;top:0 !important;bottom:0 !important;width:12px !important}
	.tr-edge .tr-edge__x{height:32px !important;border-radius:9px 0 0 0 !important}
	.tr-edge .tr-edge__open{gap:8px !important;padding:12px 0 14px !important;border-radius:0 0 0 9px !important}
	.tr-edge .tr-edge__open svg{width:15px !important;height:15px !important}
	.tr-edge .tr-edge__label{font-size:12px !important}

	.tr-edge .tr-edge__scrim{
		display:block !important;position:fixed !important;top:0 !important;right:0 !important;bottom:0 !important;left:0 !important;z-index:100000 !important;
		background:rgba(4,10,16,.6) !important;opacity:0 !important;pointer-events:none !important;transition:opacity .3s !important;
	}
	.tr-edge[data-state="open"] .tr-edge__scrim{opacity:1 !important;pointer-events:auto !important}
	.tr-edge .tr-edge__grab{display:block !important;width:36px !important;height:4px !important;margin:0 auto 12px !important;border-radius:2px !important;background:rgba(255,255,255,.25) !important}
	.tr-edge .tr-edge__panel{
		top:auto !important;left:0 !important;right:0 !important;bottom:0 !important;z-index:100001 !important;
		width:auto !important;max-width:none !important;max-height:86vh !important;
		padding:10px 20px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
		border:0 !important;border-top:1px solid rgba(255,255,255,.14) !important;border-radius:18px 18px 0 0 !important;
		box-shadow:0 -18px 40px -14px rgba(0,0,0,.6) !important;
		transform:translateY(105%) !important;
	}
	.tr-edge[data-state="open"] .tr-edge__panel{transform:translateY(0) !important}
	.tr-edge .tr-edge__cta{height:48px !important}
}

/* ── wanneer het wijkt ── */
html.show--consent .tr-edge .tr-edge__tab{transform:translateX(110%) !important;pointer-events:none !important}
html.show--consent .tr-edge .tr-edge__panel,html.show--consent .tr-edge .tr-edge__scrim{display:none !important}
body.trdtc-modal-open .tr-edge{display:none !important}
@media print{ .tr-edge{display:none !important} }
@media (prefers-reduced-motion:reduce){ .tr-edge *{transition:none !important} }