/* JIP v3: laag over v2. Kleurverloop, matglas, zwevende tabbalk en het nieuwe woordmerk.
   Als laatste stylesheet laden, in app en website. Merkkleuren en merklogo's blijven onaangeroerd. */

/* ---------- gedeeld ---------- */
.btn-signal { background-image: var(--grad); border-color: transparent; }
.btn-primary { box-shadow: 0 8px 20px -8px rgba(20, 22, 28, .45); }
.progress > span { background: var(--grad); }
.merk-progress .progress > span { background: var(--merk-solid); }

/* Glazen vlakken. Elementen in een merktint ([data-mk] met eigen achtergrond) houden hun tint. */
.card, .tip, .stat, .badges, .causes, .jip-steps, .ob-option, .search, .home-avatar, .export-card, .soon-card, .jip-brand {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  border-color: var(--glass-line);
  box-shadow: var(--glass-shadow);
}
.search { border-radius: 18px; }
.search:focus-within { border-color: var(--signal-2); box-shadow: var(--glass-shadow), var(--focus); }
.card-link:hover { border-color: var(--glass-line); transform: translateY(-1px); }
.tip::before { background: var(--grad) !important; }

/* ---------- app ---------- */
.device-screen {
  background:
    radial-gradient(130% 46% at 50% -4%, var(--glow-1) 0%, var(--glow-2) 42%, transparent 72%),
    radial-gradient(70% 30% at 100% 100%, var(--glow-3), transparent 70%),
    var(--bg);
}
@media (min-width: 960px) {
  body {
    background:
      radial-gradient(900px 600px at 78% 22%, var(--glow-1), transparent 65%),
      radial-gradient(700px 500px at 60% 95%, var(--glow-3), transparent 70%),
      var(--bg);
  }
  .statusbar, .device-screen[data-route="welkom"] .statusbar { background: transparent; }
  .stage-points li span { background: var(--glass-strong); border-color: var(--glass-line); }
  .stage-qr { background: var(--glass); border-color: var(--glass-line); box-shadow: var(--glass-shadow); }
  .stage-logo svg { height: 52px; }
}
.view:focus, .view:focus-visible { box-shadow: none; outline: none; }
.appbar { background: color-mix(in srgb, var(--bg) 55%, transparent); }
.appbar-large { background: transparent; }

/* Home: Storing donker met gele gloed, Installeren in glas */
.entry { border-radius: 22px; }
.entry-warm {
  background: linear-gradient(160deg, #2B2E37 0%, #14161C 100%);
  border-color: transparent; color: #FFFFFF;
  box-shadow: 0 16px 30px -12px rgba(20, 22, 28, .55);
}
.entry-warm::after { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 199, 44, .45), rgba(255, 199, 44, 0) 70%); pointer-events: none; }
.entry-warm .entry-sub { color: rgba(255, 255, 255, .72); }
.entry-warm .entry-ic { background: var(--grad); color: #14161C; }
.entry-warm .entry-go, .entry-warm:hover .entry-go { color: #FFC72C; }
.entry-warm:hover { border-color: transparent; }
.entry-cool {
  background: var(--glass); border-color: var(--glass-line); box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
}
.entry-cool .entry-ic { background: #14161C; color: #FFC72C; }
.entry-cool .entry-go, .entry-cool:hover .entry-go { color: var(--ink); }
.entry-cool:hover { border-color: var(--glass-line); }
:root[data-theme="dark"] .entry-warm { background: var(--grad); color: #14161C; box-shadow: 0 16px 30px -12px rgba(255, 159, 28, .35); }
:root[data-theme="dark"] .entry-warm .entry-sub { color: rgba(20, 22, 28, .72); }
:root[data-theme="dark"] .entry-warm .entry-ic { background: #14161C; color: #FFC72C; }
:root[data-theme="dark"] .entry-warm .entry-go { color: #14161C; }
:root[data-theme="dark"] .entry-warm::after { display: none; }
:root[data-theme="dark"] .entry-cool .entry-ic { background: var(--grad); color: #14161C; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .entry-warm { background: var(--grad); color: #14161C; box-shadow: 0 16px 30px -12px rgba(255, 159, 28, .35); }
  :root:not([data-theme="light"]) .entry-warm .entry-sub { color: rgba(20, 22, 28, .72); }
  :root:not([data-theme="light"]) .entry-warm .entry-ic { background: #14161C; color: #FFC72C; }
  :root:not([data-theme="light"]) .entry-warm .entry-go { color: #14161C; }
  :root:not([data-theme="light"]) .entry-warm::after { display: none; }
  :root:not([data-theme="light"]) .entry-cool .entry-ic { background: var(--grad); color: #14161C; }
}
.home-search .search { min-height: 60px; border-radius: 20px; }

/* Tabbalk: zwevende glazen pil, actieve tab als donkere pil */
.tabbar {
  height: var(--tabbar-h); margin: 0 12px calc(10px + env(safe-area-inset-bottom)); padding: 6px; gap: 2px;
  border-radius: 26px; border: 1px solid var(--glass-line);
  background: var(--glass-strong);
  -webkit-backdrop-filter: blur(20px) saturate(1.5); backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: var(--glass-shadow), 0 14px 30px -10px rgba(20, 22, 28, .22);
}
.tab { border-radius: 20px; font-size: 11px; transition: color var(--t-fast), background var(--t-med) var(--ease); }
.tab::before { display: none; }
.tab.is-active { background: var(--brand); color: var(--brand-ink); }
.tab.is-active .ic { color: var(--tab-ic); }

/* Vraag JIP: knop in het verloop */
.fab {
  bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px);
  background: var(--grad); color: #14161C;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 12px 28px -6px rgba(200, 110, 0, .5);
}
.fab .ic { fill: currentColor; stroke: none; }
.device-screen .toast-host { bottom: calc(var(--tabbar-h) + 96px + env(safe-area-inset-bottom)); }

/* Chat */
.jip-avatar { background: #14161C; color: #FFFFFF; box-shadow: 0 6px 14px -6px rgba(20, 22, 28, .5); }
.jip-avatar svg { height: 18px !important; }
.composer { background: color-mix(in srgb, var(--bg) 70%, transparent); }
.composer-row { background: var(--glass-strong); border-color: var(--glass-line); box-shadow: var(--glass-shadow); }
.composer-send:not(:disabled) { background: var(--grad); color: #14161C; }
.bubble { border-radius: 20px 20px 6px 20px; }

/* Ik en Over */
.profile-avatar { background: var(--grad); color: #14161C; }
.over-icon { background: #14161C; box-shadow: 0 18px 36px -12px rgba(20, 22, 28, .5); border-radius: 26px; }
.over-icon svg { height: 52px !important; }

/* Onboarding: de vonk valt in */
.ob-mark .vonk { transform-box: fill-box; transform-origin: 50% 50%; animation: vonkIn 900ms var(--ease) 250ms both; }
@keyframes vonkIn { from { opacity: 0; transform: scale(.2) rotate(-120deg); } }

/* ---------- website ---------- */
body.site {
  background:
    radial-gradient(900px 700px at 96% -4%, var(--mesh-a), transparent 60%),
    radial-gradient(700px 560px at 62% 46%, var(--mesh-b), transparent 66%),
    radial-gradient(600px 500px at -4% 70%, var(--glow-2), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}
.site .hero { background: transparent; }
.site .blob.b1 { background: radial-gradient(closest-side, color-mix(in srgb, var(--signal) 55%, transparent), transparent); opacity: .7; }
.site .blob.b2 { background: radial-gradient(closest-side, color-mix(in srgb, var(--signal-2) 45%, transparent), transparent); opacity: .6; }
.s-header.is-stuck { background: var(--glass-strong); border-bottom-color: var(--glass-line); }
.s-logo .s-mark { height: 40px; width: auto; }
.s-logo .vonk { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 520ms var(--ease); }
.s-logo:hover .vonk { transform: rotate(90deg) scale(1.15); }
.kicker::before, .s-progress i, .s-nav a::after { background: var(--grad); }
.site .btn-secondary { background: var(--glass); border-color: var(--glass-line); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.site .btn-signal { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 10px 24px -8px rgba(200, 110, 0, .55); }
.stage-card { border-radius: 32px; }
.float-chip { background: var(--glass-strong); border: 1px solid var(--glass-line); box-shadow: var(--glass-shadow); border-radius: 16px; }
.ph-big div { background: var(--glass); border-color: var(--glass-line); }
.ph-big div:first-child { background: linear-gradient(160deg, #2B2E37, #14161C); color: #FFFFFF; border-color: transparent; }
.ph-big div:first-child .ic { color: #FFC72C; }
.ph-prog i, .walk-bar i { background: var(--grad); }
.moment h3 .ic, .fc-ic { background: var(--grad); color: #14161C; }
.band {
  background:
    radial-gradient(60% 90% at 92% 0%, rgba(255, 199, 44, .38), transparent 62%),
    radial-gradient(50% 80% at 0% 100%, rgba(255, 159, 28, .26), transparent 62%),
    #14161C;
  color: #FFFFFF;
}
.cta::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--signal) 45%, transparent), transparent); }

@media (prefers-reduced-motion: reduce) {
  .ob-mark .vonk { animation: none; }
  .s-logo .vonk { transition: none; }
}