.yyic-quiz {
  --yyic-bg:#fff; --yyic-fg:#0b0b0b; --yyic-muted:#000;
  --yyic-accent:#FC4C02;  --yyic-accent-2:#6516C1; --yyic-card-bg:#f9fafb; --yyic-br:18px;
  --yyic-shadow:0 10px 30px rgba(0,0,0,.08); background: var(--yyic-bg); color:var(--yyic-fg); border-radius:var(--yyic-br);
  padding:clamp(20px,3vw,28px); box-shadow:var(--yyic-shadow);
}
.yyic-step{opacity:0;transform:translateY(8px);pointer-events:none;transition:.35s ease;transition-property:opacity,transform;}
.yyic-step.is-active{opacity:1;transform:translateY(0);pointer-events:auto;}
.yyic-title{color:var(--yyic-accent);font-size:clamp(22px,2.5vw,28px);margin:0 0 6px;font-weight:700;text-transform: uppercase;font-family: 'Centra No1 Black', Helvetica, Arial, Lucida, sans-serif;}
.yyic-sub{margin:0 0 18px;color:var(--yyic-muted);}
.yyic-cards{display:grid;grid-template-columns:1fr;gap:14px}
@media (min-width:760px){.yyic-cards{grid-template-columns:repeat(3,1fr)}}
.yyic-card{background:var(--yyic-card-bg);border-radius:var(--yyic-br);padding:16px;border:1px solid #e5e7eb;cursor:pointer;transition:.2s;border-color:#e5e7eb}
.yyic-card:hover,.yyic-card:focus{transform:translateY(-2px);box-shadow:var(--yyic-shadow);border-color:#d1d5db}
.yyic-card .yyic-emoji{font-size:28px;margin-bottom:8px}
.yyic-card h3{margin:0 0 4px;font-size:18px;font-weight:700}
.yyic-card p{margin:0;color:var(--yyic-muted);line-height:1.4}
.yyic-card--neutral{border-style:dashed}
.yyic-buttons{display:grid;gap:10px;margin:10px 0 6px}
.yyic-btn{border:1px solid #e5e7eb;background:#fff;padding:12px 14px;border-radius:12px;font-weight:600;text-align:left;cursor:pointer;transition:.2s}
.yyic-btn:hover{transform:translateY(-1px);box-shadow:var(--yyic-shadow);border-color:#d1d5db;background:#f8fafc}
.yyic-linkback{background:transparent;border:none;color:var(--yyic-accent-2);font-weight:600;margin-top:8px;cursor:pointer;text-decoration:underline}
.yyic-result{display:grid;gap:6px;margin-bottom:12px}
.yyic-result-icon{font-size:28px}
.yyic-result-title{color:var(--yyic-accent-2);margin:0;font-size:clamp(20px,2.2vw,24px);font-weight:800}
.yyic-result-sub{margin:0;color:var(--yyic-muted)}
.yyic-location{margin:12px 0 6px}
.yyic-label{display:block;font-weight:700;margin-bottom:6px}
.yyic-select{width:100%;border:1px solid #e5e7eb;background:#fff;border-radius:12px;padding:10px 12px;font-size:16px}
.yyic-cta{margin-top:14px;display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.yyic-cta-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--yyic-accent-2);color:#fff;border:none;padding:12px 16px;border-radius:999px;font-weight:800;text-decoration:none;transition:.2s}
.yyic-cta-btn:hover{transform:translateY(-1px);box-shadow:var(--yyic-shadow)}
/* Zorgt dat stap 2-kaarten zelfde spacing krijgen als stap 1 */
.yyic-step[data-step="followup"] .yyic-cards {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

/* Optioneel: een iets andere accentkleur voor stap 2-icoontjes */
.yyic-step[data-step="followup"] .yyic-emoji {
  background: #eef2ff;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}
/* 1) Iconen centreren in kaarten (stap 1 & 2) */
.yyic-card .yyic-emoji{
  display:flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  border-radius:50%;
  background:#eef2ff;
  font-size:24px;
  margin:0 auto 8px; /* center horizontaal */
}

/* 2) Stage toont telkens 1 step op exact dezelfde plek */
.yyic-stage{
  position:relative;
  transition:height .32s ease; /* smooth hoogte-aanpassing */
  overflow:hidden;
}
.yyic-step{
  position:absolute;
  inset:0;                  /* overlayt exact dezelfde ruimte */
  opacity:0;
  transform:translateX(24px);
  pointer-events:none;
}
.yyic-step.is-active{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}

/* 3) Animaties */
@keyframes yy-exit-left{
  to{ opacity:0; transform:translateX(-24px); }
}
@keyframes yy-enter-right{
  from{ opacity:0; transform:translateX(24px); }
  to{ opacity:1; transform:translateX(0); }
}
.yyic-step.is-exiting{ animation:yy-exit-left .28s ease forwards; }
.yyic-step.is-entering{ animation:yy-enter-right .28s ease forwards; }

/* optioneel: iets andere layout voor followup cards (2 naast elkaar) */
.yyic-step[data-step="followup"] .yyic-cards{
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}
.yy-vacatures__grid.yy-vacatures__grid--mini {
  margin-top: 12px;
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fill,minmax(260px,1fr));
}
.yyic-suggestions .yy-card .yy-card__title { font-size: 1rem; }

/* Mini-kaarten onder quizresultaat: strakker, compacter */
.yy-vacatures__grid.yy-vacatures__grid--mini {
  margin-top: 12px;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.yy-card.yy-card--mini {
  background: var(--yyic-card-bg);
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 12px;
  transition: .2s;
}
.yy-card.yy-card--mini:hover { transform: translateY(-2px); box-shadow: var(--yyic-shadow); border-color: #d1d5db; }

.yy-card.yy-card--mini .yy-card__title {
  font-size: 16px;
  line-height: 1.25;
  margin: 0 0 6px;
  font-weight: 700;
}

.yy-card.yy-card--mini .yy-card__meta {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 4px;
}

.yy-card.yy-card--mini .yy-card__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--yyic-muted);
}

/* Optioneel: icon alignment */
.yy-card.yy-card--mini .icoVLocatie,
.yy-card.yy-card--mini .icoVLoon {
  display: inline-block;
  width: 18px;
  height: 18px;
}
/* Suggesties onder resultaat: exact 2 kolommen */
.yy-vacatures__grid.yy-vacatures__grid--mini {
  margin-top: 12px;
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 640px){
  .yy-vacatures__grid.yy-vacatures__grid--mini {
    grid-template-columns: 1fr;
  }
}

/* Compacte kaartstijl blijft hetzelfde */
.yy-card.yy-card--mini { background: var(--yyic-card-bg); border:1px solid #e5e7eb; border-radius:14px; padding:12px; transition:.2s; }
.yy-card.yy-card--mini:hover { transform:translateY(-2px); box-shadow:var(--yyic-shadow); border-color:#d1d5db; }
.yy-card.yy-card--mini .yy-card__title { font-size:16px; line-height:1.25; margin:0 0 6px; font-weight:700; }
.yy-card.yy-card--mini .yy-card__meta { list-style:none; padding:0; margin:0; display:grid; gap:4px; }
.yy-card.yy-card--mini .yy-card__meta-item { display:flex; align-items:center; gap:6px; font-size:14px; color:var(--yyic-muted); }
.yy-card__link_mini {margin-bottom:0px!important;}