/* =========================
   Basisset & variabelen
   ========================= */
@font-face {
  font-family: 'Didact Gothic';
  src: url('/static/assets/DidactGothic-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}
:root{
  --ec-blue: #1E73BE;
  --ec-blue-2: #2575fc;
  --ec-blue-3: #0350d2;
  --ec-blue-soft: #e6f8ff;
  --ec-blue-bg: #f3faff;
  --ec-text: #464F7A;
  --ec-head: #000B41;
  --ec-white: #fff;
  --ec-shadow: 0 3px 32px #1e73be19;
  --radius-fancy: 0 18px 0 18px;   /* gewenste ‘hoekjes’ */
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background: var(--ec-blue-bg);
  font-family: 'Didact Gothic','Century Gothic',Arial,sans-serif;
  color: var(--ec-text);
}

/* =========================
   Intro overlay
   ========================= */
.wizard-intro-full{
  position:fixed; inset:0; z-index:9999; min-height:100vh; width:100vw;
  background:var(--ec-blue); color:var(--ec-white);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; animation: fadein 1s;
}
.intro-logo-main{ width:120px; margin:0 auto 1em; display:block; filter:drop-shadow(0 2px 14px #2223) }
.intro-bird-main{ width:80px; margin:0 auto 1.2em; display:block; animation: flybird 2s ease-in-out 1 }
.intro-btn-main{ composes: btn from global; } /* niet erg als je bundler dit negeert */
.intro-btn-main{
  background:var(--ec-white); color:var(--ec-blue); border:1.5px solid var(--ec-white);
  border-radius: var(--radius-fancy); font-weight:700; font-size:1.12em;
  padding:.9em 2.2em; box-shadow:0 2px 16px #0002; letter-spacing:.03em; cursor:pointer;
}
.intro-btn-main:hover,
.intro-btn-main:focus{ background:var(--ec-blue); color:#fff; border:2px solid #fff }

@media (max-width:600px){
  .wizard-intro-full{ font-size:.97em }
  .intro-logo-main{ width:80px }
  .intro-bird-main{ width:45px }
  .intro-btn-main{ font-size:1.02em; padding:.8em 1.4em }
}

/* =========================
   Layout
   ========================= */
.wizard-container{ display:flex; min-height:100vh; align-items:stretch }
.wizard-sidebar{
  background:var(--ec-blue); color:#fff; width:230px; min-height:100vh;
  padding:2em 1em; box-shadow:2px 0 18px #0002; display:flex; flex-direction:column;
}
.wizard-sidebar .logo{ display:block; margin:0 auto 1.5em; width:105px }

.wizard-main{ width:100%; padding:3em 5vw }

.wizard-header{ margin-bottom:2em }
.wizard-header h1{ margin:0 0 .3em; color:var(--ec-blue); letter-spacing:.02em; font-size:2.2em }
.wizard-progress{
  height:7px; background:var(--ec-blue-soft); border-radius:14px; overflow:hidden;
  margin-bottom:1.6em; box-shadow:0 1px 5px #1E73BE22
}
.wizard-progress-bar{ height:100%; background:linear-gradient(90deg, var(--ec-blue) 70%, #4BABFF 100%); transition:width .4s }

.wizard-content{
  background:#fff; border-radius: var(--radius-fancy); box-shadow: var(--ec-shadow);
  padding:2em; position:relative;
}

/* =========================
   Form elementen
   ========================= */
.wizard-content label{
  display:block; margin:.95em 0 .35em; color:var(--ec-head); font-weight:600; font-size:1.04em
}

.wizard-content input:not([type="radio"]):not([type="checkbox"]),
.wizard-content select{
  width:100%; max-width:820px;
  font-size:1em; background:#f7fdff; color:inherit;
  border:1.5px solid var(--ec-blue); border-radius:8px;
  padding:.6em .8em; margin-bottom:1em; transition:border-color .2s, box-shadow .2s;
}
.wizard-content input:focus, .wizard-content select:focus{
  outline:none; border-color:var(--ec-head); box-shadow:0 0 0 3px #4BABFF44;
}

.wizard-content .row{ display:flex; gap:.8em; max-width:820px }
.wizard-content .row > *{ flex:1; min-width:0 }

.wizard-content .form-note{
  background:#4BABFF22; color:var(--ec-blue);
  border-radius: var(--radius-fancy); padding:.7em 1.3em; margin-bottom:1.3em
}
.wizard-content .flash{
  background:#ffefef; color:#B4000B; border:1.2px solid #fba5a5; border-radius:10px;
  padding:.7em 1.3em; margin-bottom:1em
}

/* radios/checkboxes */
.wizard-content input[type="radio"],
.wizard-content input[type="checkbox"]{
  width:auto; margin:0; accent-color:var(--ec-blue);
  background:transparent; border:none; box-shadow:none
}
.choice-group{ display:flex; gap:1.2em; align-items:center; flex-wrap:wrap }
.choice-group label{ display:inline-flex; align-items:center; gap:.5em; white-space:nowrap }

/* =========================
   Tooltips
   ========================= */
.help-tip{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:1.25em; height:1.25em; margin-left:.5em; border-radius:50%;
  border:1px solid var(--ec-blue); color:var(--ec-blue); font-weight:700; cursor:help; line-height:1
}
.help-tip:focus-visible{ outline:3px solid #4BABFF6E }
.help-tip .tip-content{
  position:absolute; top:calc(100% + 8px); left:0;
  background:#fff; color:var(--ec-blue); border:1px solid #1E73BE33;
  box-shadow:0 8px 30px #1e73be26; border-radius:10px; padding:.8em 1em;
  width:min(86vw,420px); z-index:30; display:none
}
.help-tip:hover .tip-content, .help-tip:focus-within .tip-content{ display:block }
.help-tip .tip-content b{ color:var(--ec-head) }

/* =========================
   Knoppen – één universele stijl
   ========================= */
.btn{
  --btn-bg: var(--ec-blue-2);
  --btn-fg: #fff;
  --btn-border: var(--ec-blue-2);
  border-radius: var(--radius-fancy);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid var(--btn-border);
  padding: .8em 1.4em;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  box-shadow: 0 2px 10px #0001;
  transition: transform .05s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{ background: var(--ec-blue-3) }
.btn:active{ transform: translateY(1px) }
.btn:focus-visible{ outline:3px solid #4BABFF66; outline-offset:2px }

/* Secundair (grijs/blauw) */
.btn--secondary{
  --btn-bg: #8c8c8c; --btn-border:#464F7A; --btn-fg:#fff;
}
.btn--ghost{
  --btn-bg: #ffffff; --btn-border:#ffffff; --btn-fg: var(--ec-blue);
}
.btn--ghost:hover{
  background: var(--ec-blue); color:#fff; border-color:#fff;
}

/* Wizard buttonbar */
.wizard-buttons{ margin-top:2.1em; display:flex; gap:1em }
.wizard-buttons .btn{ padding:.82em 1.6em }
.wizard-buttons .back{ composes: btn btn--secondary; } /* ok als dit genegeerd wordt */
.wizard-buttons .back{ background:#1E73BE; border-color:#464F7A }
.wizard-buttons .back:hover{ background:#ffffff; color:1E73BE }

/* Sidebar: stappen als ‘knop’ met dezelfde look */
.wizard-steps{ list-style:none; margin:1.5em 0 0; padding:0 }
.wizard-steps li{
  border-radius: var(--radius-fancy);
  padding:.8em 1.2em; font-size:1.02em; font-weight:700;
  background: #2b79c7; color:#fff; border:1.5px solid #2b79c7;
  margin-bottom: .9em; cursor:pointer; transition: background .2s, color .2s, border-color .2s
}
.wizard-steps li:hover{ background:#2569ad }
.wizard-steps li.active{
  background:#fff; color:var(--ec-blue); border-color:#fff;
}

/* Sidebar - extra knoppen (Handleiding / Support / GitHub) */
.sidebar-buttons{
  border-top:1px solid #ffffff55; padding-top:1.2em; margin-top:auto;
  display:flex; flex-direction:column; gap:.7em
}
.sidebar-btn{ composes: btn btn--ghost; }
.sidebar-btn{
  background:#fff; color:var(--ec-blue); border-color:#fff; width:100%;
}
.sidebar-btn:hover{ background:var(--ec-blue); color:#fff; border-color:#fff }

/* =========================
   Audio controls – rond en consistent
   ========================= */
.audio-controls{
  display:flex; gap:.6em; align-items:center; justify-content:center; margin-bottom:1.4em
}
.audio-btn{
  width:44px; height:44px; border-radius:50%;
  border:1.5px solid #fff; background:#fff; color:var(--ec-blue);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.15rem; line-height:1; cursor:pointer; box-shadow:0 1px 8px #1e73be12;
  transition: background .2s, color .2s, border-color .2s, transform .05s;
}
.audio-btn:hover{ background:var(--ec-blue); color:#fff; border-color:#fff }
.audio-btn:active{ transform: translateY(1px) }

/* =========================
   Sidebar responsief
   ========================= */
@media (max-width:900px){
  .wizard-container{ flex-direction:column }
  .wizard-sidebar{
    width:100%; min-height:auto; flex-direction:row; align-items:flex-start; padding:1em .6em;
  }
  .wizard-sidebar .logo{ margin:0 1.2em 0 0 }
  .wizard-steps{ display:flex; flex-direction:row; gap:.6em; margin:0 }
  .wizard-steps li{ margin-bottom:0; padding:.6em 1em }
  .sidebar-buttons{ flex-direction:row; gap:.6em; margin-left:auto }
}

/* =========================
   Modals
   ========================= */
.modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.6); align-items:center; justify-content:center; z-index:1000 }
.modal-content{ position:relative; width:80%; max-width:800px; height:80%; background:#fff; border-radius:8px; overflow:hidden }
.modal-content iframe{ width:100%; height:100% }
.modal-close{ position:absolute; top:.5em; right:1em; font-size:2em; color:#333; cursor:pointer }

/* =========================
   Kleine hulpfuncties
   ========================= */
@media (max-width:820px){
  .wizard-content .row,
  .wizard-content input:not([type="radio"]):not([type="checkbox"]),
  .wizard-content select,
  .wizard-content form{ max-width:100% }
}

/* (optioneel) kleine animaties voor intro */
@keyframes fadein{ from{opacity:0} to{opacity:1} }
@keyframes flybird{ 0%{transform:translateY(0)} 50%{transform:translateY(-8px)} 100%{transform:translateY(0)} }
/* ————— Globale knoppen (uniform) ————— */
.btn{
  --btn-bg:#1E73BE; --btn-fg:#ffffff; --btn-br:#1E73BE;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.55em; font:600 1rem/1.1 "Didact Gothic", system-ui, sans-serif;
  color:var(--btn-fg); background:var(--btn-bg);
  border:1.5px solid var(--btn-br);
  padding:.78em 1.15em; border-radius:16px 0 16px 0; /* boven normaal */
  cursor:pointer; text-decoration:none; user-select:none;
  transition:transform .06s ease, background .2s, color .2s, border-color .2s, box-shadow .2s;
  box-shadow:0 2px 12px #1e73be22;
}
.btn-nav{
  --btn-bg:#1E73BE; --btn-fg:#ffffff; --btn-br:#1E73BE;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.55em; font:600 1rem/1.1 "Didact Gothic", system-ui, sans-serif;
  color:#ffffff;
  border:1.5px solid var(--btn-br);
  padding:.78em 1.15em; border-radius:16px 0 16px 0; /* boven normaal */
  cursor:pointer; text-decoration:none; user-select:none;
  transition:transform .06s ease, background .2s, color .2s, border-color .2s, box-shadow .2s;
  box-shadow:0 2px 12px #1e73be22;
}
.btn-nav:hover{ background:#ffffff; border-color:#0f5ca0;  color:#1e73be;}
.btn:hover{ transform:translateY(-1px); box-shadow:0 6px 18px #1e73be2e; }
.btn:active{ transform:translateY(0); box-shadow:0 2px 10px #1e73be24; }

/* primair (standaard) */
.btn{ --btn-bg:#1E73BE; --btn-fg:#fff; --btn-br:#1E73BE; }
.btn:hover{ background:#ffffff; border-color:#0f5ca0;  color:#1e73be;}

/* secundair (terug) – wit op blauw randje */
.btn.btn--secondary{
  --btn-bg:#ffffff; --btn-fg:#1E73BE; --btn-br:#1E73BE;
}
.btn.btn--secondary:hover{
  background:#ffffff; border-color:#0f5ca0; color:#1e73be;
}

/* ghost (op blauwe vlakken, intro/cookie) */
.btn.btn--ghost{
  --btn-bg:transparent; --btn-fg:#fff; --btn-br:#fff;
  box-shadow:none;
}
.btn.btn--ghost:hover{
  background:#ffffff1a; border-color:#fff; color:#fff;
}

/* Sidebar knoppen dezelfde stijl, volle breedte */
.sidebar-btn{ width:100%; }

/* Wizard actieknoppen rij */
.wizard-buttons{ margin-top:2.1em; display:flex; gap:1em; flex-wrap:wrap; }
.wizard-buttons .back{ order:0; } /* “Terug” eerst laten of aanpassen naar wens */

/* ————— Audio knoppen (perfect rond) ————— */
.audio-controls{ display:flex; gap:.6em; align-items:center; justify-content:center; margin-bottom:1.2em; }
.audio-btn{
  width:44px; height:44px; border-radius:9999px; border:1.5px solid #fff;
  background:#ffffff; color:#1E73BE; font-size:1.2rem; line-height:1;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 10px #1e73be22; cursor:pointer; transition:transform .06s, background .2s, color .2s;
}
.audio-btn:hover{ background:#1E73BE; color:#fff; transform:translateY(-1px); }
.audio-btn:active{ transform:translateY(0); }

/* ————— Sidebar stappen (al goed qua stijl, alleen cursor) ————— */
.wizard-steps li{ cursor:pointer; }

/* ————— Form breedte fix (zoals je had) ————— */
.wizard-content form,
.wizard-content input:not([type="radio"]):not([type="checkbox"]),
.wizard-content select,
.wizard-content .row{ max-width:820px; }
@media (max-width:820px){
  .wizard-content form,
  .wizard-content input:not([type="radio"]):not([type="checkbox"]),
  .wizard-content select,
  .wizard-content .row{ max-width:100%; }
}
