/* ==========================================================================
   Backline-pop-up — versie Youri
   Liquid Glass: geblurde donkere laag, zachte lichtrand, ruime hoeken, zwart-wit (geen mint).
   Desktop: kaart in het midden. Gsm (≤ 600px): bottom sheet met safe area.
   ========================================================================== */
.blp { position: fixed; inset: 0; z-index: 2147483000; display: grid; place-items: center; padding: 24px; pointer-events: none; font-family: var(--sans); color: #f7f7f7; }
.blp.is-open { pointer-events: auto; }

.blp__scrim { position: absolute; inset: 0; background: rgba(8, 8, 8, .42); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .45s var(--ease); }
.blp.is-open .blp__scrim { opacity: 1; }

.blp__sheet {
  position: relative; width: min(440px, 100%); max-height: calc(100dvh - 48px); overflow-y: auto; overscroll-behavior: contain;
  padding: 30px 30px 26px; border-radius: 30px;
  background: linear-gradient(180deg, rgba(40, 40, 40, .62) 0%, rgba(22, 22, 22, .72) 100%);
  -webkit-backdrop-filter: blur(28px) saturate(1.6); backdrop-filter: blur(28px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 1px 0 rgba(255, 255, 255, .22), 0 30px 80px rgba(0, 0, 0, .5);
  opacity: 0; transform: translateY(18px) scale(.97);
  transition: opacity .45s var(--ease), transform .55s var(--ease);
}
/* zachte witte gloed bovenaan, loopt uit in het glas (geen harde rand) */
.blp__sheet::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 60% at 15% 0%, rgba(255, 255, 255, .08), transparent 60%); }
.blp.is-open .blp__sheet { opacity: 1; transform: none; }

.blp__grab { display: none; }

.blp__x { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); transition: background .3s; }
.blp__x:hover { background: rgba(255, 255, 255, .16); }
.blp__x svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.blp__kicker { position: relative; display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
  font-size: var(--t-label); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #f7f7f7; }
.blp__mark { width: 18px; height: 18px; fill: currentColor; }
.blp__mark rect:nth-child(odd) { transform-origin: left center; animation: blp-eq 1.6s var(--ease) infinite alternate; }
.blp__mark rect:nth-child(3) { animation-delay: .25s; }
.blp__mark rect:nth-child(5) { animation-delay: .5s; }
@keyframes blp-eq { to { transform: scaleX(.7); } }

.blp__title { position: relative; margin-bottom: 10px; font-size: clamp(34px, 5vw, 44px); font-weight: 700; line-height: .95; letter-spacing: -.01em; text-transform: uppercase; }
.blp__lead { position: relative; margin-bottom: 22px; font-size: 17px; line-height: 1.45; color: #d6d6d6; }

.blp__steps { position: relative; display: grid; gap: 8px; margin-bottom: 18px; }
.blp__steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 18px;
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); font-size: 15px; line-height: 1.4; color: var(--mute); }
.blp__steps span { font: 700 13px/1.6 var(--sans); letter-spacing: .04em; color: #f7f7f7; }
.blp__steps b { display: block; margin-bottom: 2px; font-size: 16px; font-weight: 700; color: #f7f7f7; }

.blp__for { position: relative; margin-bottom: 20px; font-size: var(--t-small); color: var(--mute); }

.blp__acts { position: relative; display: grid; gap: 8px; }
.blp__go, .blp__later { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; font: 700 15px/1 var(--sans); }
/* hoofdknop: wit glas met donkere tekst, zwart-wit */
.blp__go { background: linear-gradient(180deg, #ffffff 0%, #e6e6e6 100%); color: #111;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 10px 30px rgba(0, 0, 0, .35);
  transition: box-shadow .45s var(--ease); }
.blp__go:hover, .blp__go:focus-visible { outline: none;
  box-shadow: inset 0 0 0 1px #fff, 0 0 0 1.5px rgba(255, 255, 255, .7), 0 0 24px 4px rgba(255, 255, 255, .22), 0 10px 30px rgba(0, 0, 0, .35); }
.blp__go span { display: inline-block; transition: transform .3s var(--ease); }
.blp__go:hover span { transform: translate(2px, -2px); }
.blp__later { color: var(--mute); transition: color .3s; }
.blp__later:hover { color: #f7f7f7; }

/* ---------- gsm: glazen bottom sheet ---------- */
@media (max-width: 600px) {
  .blp { place-items: end stretch; padding: 0; }
  .blp__sheet { width: 100%; max-height: calc(100dvh - 40px); border-radius: 30px 30px 0 0;
    padding: 12px 20px calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); }
  .blp.is-open .blp__sheet { transform: none; }
  .blp__grab { display: block; width: 40px; height: 5px; margin: 0 auto 18px; border-radius: 99px; background: rgba(255, 255, 255, .28); }
  .blp__x { top: 10px; right: 10px; }
  .blp__steps li { padding: 12px 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .blp__scrim, .blp__sheet, .blp__go, .blp__go span { transition: opacity .2s; }
  .blp__sheet { transform: none; }
  .blp__mark rect { animation: none; }
}