/* ============================================================
   Digitaal Rouwen – Coming soon
   Tokens en login-opbouw 1-op-1 overgenomen uit app.css van de
   Digitaal Rouwen-app, aangevuld met countdown en aanmeldformulier.
   ============================================================ */

:root{
  --white:#ffffff;
  --canvas:#fbfbfa;
  --ink:#1a1a1a;
  --ink-soft:#54524e;
  --ink-faint:#84827e;
  --line:#e9e8e4;
  --line-strong:#d4d3cf;

  --green-low:#9ee9c9;
  --green-mid:#45bf8b;
  --green-high:#00a55f;
  --green-ink:#0a5f3a;

  --orange-mid:#e46b3e;
  --red-mid:#d93653;
  --purple-mid:#8f67a3;

  --grad-green:linear-gradient(135deg,#45bf8b 0%,#00a55f 100%);
  --grad-green-soft:linear-gradient(135deg,#e7f9f0 0%,#c9f0de 100%);
  --grad-hero:linear-gradient(160deg,#063a26 0%,#0a5f3a 55%,#00a55f 100%);

  --r-sm:10px; --r-md:14px; --r-lg:20px; --r-xl:28px;
}

*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{
  font-family:'Figtree',system-ui,sans-serif;
  color:var(--ink);
  background:var(--canvas);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;line-height:1.1;letter-spacing:-.01em}
a{color:inherit}
svg{display:block}
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ---------- Knoppen ---------- */
.btn{font-family:'Figtree';font-weight:600;font-size:15px;border:none;border-radius:var(--r-sm);padding:11px 20px;min-height:44px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:.15s;text-decoration:none}
.btn-primary{background:var(--grad-green);color:#fff;box-shadow:0 6px 16px -6px rgba(0,165,95,.55)}
.btn-primary:hover{filter:brightness(1.05);transform:translateY(-1px)}
.btn-lg{padding:15px 26px;font-size:16px;border-radius:var(--r-md)}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(0,165,95,.4)}
.btn-primary:focus-visible{box-shadow:0 6px 16px -6px rgba(0,165,95,.55),0 0 0 3px rgba(0,165,95,.5)}

/* ---------- Velden ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--ink)}
.input{width:100%;font-family:'Figtree';font-size:15px;padding:12px 14px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:#fff;color:var(--ink);transition:.15s}
.input:focus{outline:none;border-color:var(--green-mid);box-shadow:0 0 0 3px rgba(69,191,139,.18)}
.input::placeholder{color:#b7b5b0}
.hint{font-size:12.5px;color:var(--ink-faint);margin-top:12px;line-height:1.45}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

/* ---------- Meldingen ---------- */
.dr-notice{position:relative;display:flex;align-items:flex-start;gap:12px;border-radius:var(--r-md);padding:13px 16px 13px 14px;font-size:14px;line-height:1.5;margin-bottom:18px;border:1px solid transparent;background:#f4f6f3;color:var(--ink-soft);animation:dr-notice-in .35s cubic-bezier(.2,.7,.2,1) both}
.dr-notice::before{content:"";flex:none;width:22px;height:22px;border-radius:50%;background:var(--ink-faint) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 11v6M12 7.5h.01'/></svg>") center/15px 15px no-repeat}
.dr-notice.is-ok{background:#e6f6ee;color:#0a5f3a;border-color:#cdeedc}.dr-notice.is-ok::before{background:var(--green-high) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12.5l4.5 4.5L19 7'/></svg>") center/15px 15px no-repeat}
.dr-notice.is-info{background:#eef0f7;color:#3d3f6b;border-color:#dcdff0}.dr-notice.is-info::before{background:var(--purple-mid) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 11v6M12 7.5h.01'/></svg>") center/15px 15px no-repeat}
.dr-notice.is-error{background:#fdeef0;color:#8a1130;border-color:#f7d5db}.dr-notice.is-error::before{background:var(--red-mid) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 7v6M12 17h.01'/></svg>") center/15px 15px no-repeat}
.dr-notice.is-warn{background:#fdf3e8;color:#7a3f10;border-color:#f6dfc4}.dr-notice.is-warn::before{background:var(--orange-mid) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 8.5v5M12 17h.01'/></svg>") center/15px 15px no-repeat}
@keyframes dr-notice-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ============ LOGIN-OPBOUW (identiek aan de app) ============ */
.dr-login{min-height:100vh;min-height:100dvh;background:var(--grad-hero);position:relative;isolation:isolate}
.loginwrap{display:grid;grid-template-columns:1fr 1fr;min-height:100vh;min-height:100dvh}
.login-left{background:transparent;color:#fff;padding:48px 48px 76px;position:relative;overflow:hidden;display:flex;flex-direction:column}
.login-left::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px);background-size:20px 20px}
.login-left>*{position:relative;z-index:1}
.login-brand{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.login-logo{display:flex;color:#fff}
.login-brandname{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:19px;letter-spacing:-.01em}
.login-left .quote{margin-top:auto;font-size:22px;font-family:'Bricolage Grotesque';line-height:1.3;max-width:22ch}
.login-left .by{margin-top:14px;font-size:13px;opacity:.8}
.login-sheet{background:#fff;border-radius:28px;box-shadow:0 30px 64px -24px rgba(0,40,22,.5);align-self:center;justify-self:center;width:100%;max-width:440px;margin:32px;padding:44px;display:flex;flex-direction:column;justify-content:center}
.login-sheet .inner{max-width:352px;margin:0 auto;width:100%}
.login-sheet h1{font-size:26px;margin-bottom:6px}
.login-sheet .lead{margin-bottom:22px;font-size:15px;color:var(--ink-soft)}

/* Achtergrondvideo */
.login-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--grad-hero)}
.login-bg-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);opacity:0;transition:opacity 1.6s ease;filter:saturate(.9)}
.login-bg-video.is-ready{opacity:1}
.login-bg-tint{position:absolute;inset:0;background:linear-gradient(160deg,color-mix(in srgb,var(--green-ink) 70%,transparent) 0%,color-mix(in srgb,var(--green-ink) 45%,transparent) 50%,color-mix(in srgb,var(--green-high) 22%,transparent) 100%);mix-blend-mode:multiply}
@supports not (color: color-mix(in srgb,#000,#fff)){.login-bg-tint{background:linear-gradient(160deg,rgba(6,58,38,.7) 0%,rgba(10,95,58,.45) 50%,rgba(0,165,95,.22) 100%)}}
.login-bg-vignette{position:absolute;inset:0;background:radial-gradient(120% 90% at 20% 20%,rgba(0,0,0,0) 40%,rgba(0,0,0,.3) 100%),linear-gradient(to top,rgba(0,0,0,.3),transparent 40%)}
.dr-login.has-video{background:transparent}
.dr-login.has-video .login-left::after{opacity:.5}
.dr-login.has-video .login-left .quote{text-shadow:0 2px 24px rgba(0,0,0,.35)}
.dr-login.has-video .login-sheet{background:rgba(255,255,255,.9);backdrop-filter:blur(18px) saturate(1.2);-webkit-backdrop-filter:blur(18px) saturate(1.2);box-shadow:0 30px 64px -24px rgba(0,20,10,.55),0 0 0 1px rgba(255,255,255,.35) inset}
@media (prefers-reduced-motion:reduce){.login-bg-video{display:none}.dr-notice{animation:none}}

/* ============ COMING SOON-ONDERDELEN ============ */
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--green-ink);background:var(--grad-green-soft);padding:5px 11px 5px 9px;border-radius:100px;margin-bottom:14px}
.eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--green-high);box-shadow:0 0 0 0 rgba(0,165,95,.45);animation:dr-pulse 2s ease-out infinite}
@keyframes dr-pulse{0%{box-shadow:0 0 0 0 rgba(0,165,95,.45)}70%{box-shadow:0 0 0 7px rgba(0,165,95,0)}100%{box-shadow:0 0 0 0 rgba(0,165,95,0)}}
@media (prefers-reduced-motion:reduce){.eyebrow-dot{animation:none}}

.dr-countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.cd-tile{background:var(--grad-green-soft);border-radius:var(--r-md);padding:12px 4px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:2px}
.cd-num{font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:26px;line-height:1;color:var(--green-ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.cd-label{font-size:11px;font-weight:600;color:var(--green-ink);opacity:.7;text-transform:uppercase;letter-spacing:.06em}
.cd-when{font-size:12.5px;color:var(--ink-faint);margin-bottom:24px}
.dr-countdown.is-live{display:block;background:var(--grad-green-soft);color:var(--green-ink);font-family:'Bricolage Grotesque',sans-serif;font-weight:600;font-size:18px;text-align:center;padding:18px 16px;border-radius:var(--r-md);margin-bottom:24px}

.dr-signup{padding-top:22px;border-top:1px solid var(--line);scroll-margin-top:24px}
.dr-signup .dr-notice:last-child{margin-bottom:0}

.login-foot{position:absolute;left:0;right:0;bottom:0;padding:14px 48px;display:flex;gap:8px;align-items:center;font-size:12px;color:rgba(255,255,255,.7);z-index:2;pointer-events:none}
.login-foot .sep{opacity:.6}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .loginwrap{grid-template-columns:1fr;min-height:0}
  .login-left{min-height:200px;padding:28px 24px}
  .login-left .quote{margin-top:28px;font-size:19px}
  .login-sheet{margin:0 16px 64px;padding:32px 24px;max-width:none;border-radius:24px}
  .login-sheet .inner{max-width:none}
  .cd-num{font-size:23px}
  .login-foot{position:static;padding:0 24px 24px;justify-content:center;color:rgba(255,255,255,.75);flex-wrap:wrap;text-align:center}
}
@media(max-width:380px){
  .dr-countdown{gap:6px}
  .cd-num{font-size:20px}
  .cd-label{font-size:10px}
}