/* =========================
   BA Quiz – Minimal Theme
   ========================= */

:root{
  --baq-bg: #fff;
  --baq-card: #fff;
  --baq-text: #0f172a;
  --baq-muted: #667085;
  --baq-border: #e6e8ec;
  --baq-track: #eef1f4;
  --baq-primary: #0ea5e9;    /* brand-blå */
  --baq-primary-ink: #fff;
  --baq-radius: 12px;
  --baq-shadow: 0 8px 20px rgba(15, 23, 42, 0.05);
  --baq-font: inherit;       /* brug temaets font */
}

/* Wrapper card */
.baq{
  font-family: var(--baq-font);
  color: var(--baq-text);
  background: var(--baq-card);
  border: 1px solid var(--baq-border);
  border-radius: 16px;
  box-shadow: var(--baq-shadow);
  padding: 20px;
  max-width: 720px;
  margin: 24px auto;
}

/* Visibility */
.baq .baq-questions[hidden],
.baq .baq-result[hidden],
.baq .baq-start[hidden]{ display:none !important; }

/* Start state – enkel */
.baq .baq-start{
  padding: 14px;
  border: 1px dashed var(--baq-border);
  border-radius: var(--baq-radius);
}

/* Progress */
.baq .baq-progress{ margin-bottom: 8px; }
.baq .baq-progress-track{
  width:100%; height: 8px; background: var(--baq-track);
  border-radius: 999px; overflow:hidden;
}
.baq .baq-progress-bar{
  height:100%; width:0%; background: var(--baq-primary);
  transition: width .2s ease;
}
.baq .baq-progress-label{
  margin-top: 6px; font-size: 13.5px; color: var(--baq-muted);
}

/* Slide + Question */
.baq .baq-slide{
  min-height: 140px;
  opacity: 0; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease;
}
.baq .baq-slide.baq-in{ opacity:1; transform: translateY(0); }

/* Spørgsmål – større og tydeligt */
.baq .baq-q-text{
  margin: 8px 0 12px;
  font-weight: 700;
  font-size: 20px;       /* mobil */
  line-height: 1.35;
}

/* Options as minimal choice cards */
.baq .baq-opt{
  display:flex; align-items:center; gap:.75rem;
  padding: 14px;
  margin: 10px 0;
  background: #fff;
  border: 1px solid var(--baq-border);
  border-radius: var(--baq-radius);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}

/* Skjul native radio – behold for a11y */
.baq .baq-opt input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Svartekst – større */
.baq .baq-opt .baq-opt-label{
  font-size: 17px;
  font-weight: 500;
}

/* Hover/active – meget subtilt */
.baq .baq-opt:hover{ background: #f9fbfd; }

/* Selected – KUN kant + svag baggrund */
.baq .baq-opt[data-selected="1"]{
  border-color: var(--baq-primary);
  background: #f0f9ff; /* meget svag blå */
}

/* Infoboks – neutral og diskret */
.baq .baq-inline{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem; margin-top: 12px; flex-wrap: wrap;
}
.baq .baq-infobox{
  flex: 1 1 auto;
  font-size: 14px; color: var(--baq-muted);
  background: #f6f8fa;
  border: 1px solid var(--baq-border);
  border-radius: var(--baq-radius);
  padding: 10px 12px;
}

/* Navigation */
.baq .baq-nav{ display:flex; gap:.6rem; }
.baq .baq-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height: 48px; padding: 0 16px;
  border-radius: var(--baq-radius); border: 0; cursor: pointer;
  font-weight: 700; font-size: 16px;
  background: var(--baq-primary); color: var(--baq-primary-ink);
  transition: filter .12s ease;
}
.baq .baq-btn:hover{ filter: brightness(0.98); }
.baq .baq-next[hidden]{ display:none !important; }

/* Result */
.baq .baq-result-title{
  margin: 0 0 .5rem; font-size: 22px; font-weight: 800;
}
.baq .baq-score{ margin:.25rem 0 1rem; color: var(--baq-muted); }
.baq .baq-cta{ min-width: 220px; text-align:center; }

/* Responsive */
@media (max-width: 767px){
  /* Næste = 100% bredde på mobil */
  .baq .baq-nav{ width:100%; }
  .baq .baq-next{ width:100%; }
}
@media (min-width: 1024px){
  .baq .baq-q-text{ font-size: 28px; }
  .baq .baq-opt .baq-opt-label{ font-size: 18px; }
}