/* =========================================================
   Custom styling til QSM-quizzen (Quiz and Survey Master)
   Målsætning: kort-baseret layout med "piller" til svarmuligheder,
   som på designet du sendte.

   Indsæt denne kode et af følgende steder:
   1) Udseende -> Tilpas -> Ekstra CSS (WordPress Customizer), eller
   2) Elementor -> Site Settings -> Custom CSS (hvis I bruger Elementor Pro), eller
   3) QSM-quizzens egne indstillinger under "Style"-fanen, hvis der
      findes et "Custom CSS"-felt der.

   Alle klassenavne er hentet fra dine DevTools-skærmbilleder, så
   koden matcher jeres nuværende markup 1:1.

   NB: Se også quiz-click-fix.js. CSS alene kan ikke gøre hele
   pillen klikbar (kun selve teksten/radioknappen er det som
   standard) - dét kræver et lille script.
   ========================================================= */

:root {
  --quiz-accent: #5B3347;
  --quiz-accent-transparant: #5b33470a;
  /* mørk plomme/bordeaux - matcher logo/heart-ikonet */
  --quiz-accent-soft: #C0C0C0;
  --quiz-card-bg: #ffffff79;
  --quiz-pill-bg: #fff;
  --quiz-page-bg: #ece6ea;
  /* let lavendel/grå baggrund */
  --quiz-border: #DDDDDD;
  --quiz-text: #2f2530;
  --quiz-radius-card: 10px;
  --quiz-radius-pill: 10px;
  --quiz-error: #a23b4c;
  /* dæmpet rosa-rød i stedet for kraftig rød */
  --quiz-error-bg: #faecee;
  --quiz-error-border: #eec4cb;
}

/* Baggrund omkring quizzen (fjern/juster hvis siden allerede har sin egen baggrund) */
.qsm-quiz-container {
  background: transparent;
  width: 100%;
}

/* ---------- Overskrift + intro-tekst over quizzen ---------- */
.qsm-quiz-container h1,
.qsm-quiz-container h2.qsm-quiz-title {
  color: var(--quiz-accent);
  font-weight: 500;
  text-align: center;
}

/* ---------- Hvert spørgsmål som et selvstændigt "kort" ---------- */
.quiz_section.qsm-question-wrapper {
  background: var(--quiz-card-bg);
  border-radius: var(--quiz-radius-card);
  padding: 32px 36px;
  margin-bottom: 22px;
  border: none;
}

/* Selve spørgsmålsteksten */
.quiz_section .mlw_qmn_new_question {
  font-size: 20px;
  line-height: 1.45;
  font-weight: 500;
  color: var(--quiz-accent);
  margin: 0 0 20px 0;
}

/* Evt. undertekst-felt (ofte tomt) - skjul hvis der ikke er indhold */
.quiz_section .mlw_qmn_question:empty {
  display: none;
}

/* Nulstil fieldset/legend, som ellers tilføjer indrykning/kant */
.qsm-question-wrapper fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

.qsm-question-wrapper legend {
  display: none;
}

/* ---------- Række af svarmuligheder ----------
   Grid i stedet for flex, så pillerne altid deler hele
   bredden ligeligt mellem sig (løser "ikke fuld bredde").
   !important bruges fordi quiz-pluginets egen CSS ellers
   nogle steder vinder over vores regler. */
.qmn_radio_answers {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* ---------- Hver svarmulighed som en "pille" ---------- */
.qmn_mc_answer_wrap {
  display: flex !important;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  background: var(--quiz-pill-bg);
  border: 1px solid var(--quiz-border);
  border-radius: var(--quiz-radius-pill);
  padding: 14px 20px;
  min-height: 54px;
  cursor: pointer;
  text-align: center;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.qmn_mc_answer_wrap:hover {
  border-color: var(--quiz-accent-soft);
}

/* Label-teksten i hver pille */
.qmn_mc_answer_wrap .qsm-input-label {
  margin: 0;
  cursor: pointer;
  font-size: 16px;
  color: var(--quiz-text);
  user-select: none;
  transition: color .15s ease;
}

/* Valgt svar: mørk udfyldt pille */
.qmn_mc_answer_wrap:has(input:checked) {
  background: var(--quiz-accent-transparant);
  border-color: var(--quiz-accent);
}

.qmn_mc_answer_wrap:has(input:checked) .qsm-input-label {
  color: var(--quiz-accent);
  font-weight: 400;
}

/* ---------- Custom radioknap ----------
   Bruger en bred selector (input[type="radio"] inde i selve
   svar-pillen, i stedet for kun de to specifikke klassenavne)
   + !important på alt. QSM/temaet/page builderen (Breakdance)
   har tilsyneladende en anden CSS-regel et sted, der vinder over
   klasse-selectoren og re-aktiverer browserens NATIVE (blå)
   radioknap på nogle spørgsmål - denne version er lavet for at
   vinde uanset hvad. */
.qsm-quiz-form .qmn_mc_answer_wrap input[type="radio"],
.qsm-quiz-form input.qmn_quiz_radio.qmn_multiple-choice-input[type="radio"] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 2px solid var(--quiz-border) !important;
  background: var(--quiz-pill-bg) !important;
  box-sizing: border-box !important;
  display: inline-block !important;
  position: relative !important;
  cursor: pointer;
  transition: border-color .15s ease;
  /* Fallback for browsere der (delvist) ignorerer appearance:none */
  accent-color: var(--quiz-accent);
  box-shadow: none !important;
  outline: none !important;
}

/* Prikken placeres med absolut positionering + translate i stedet
   for grid/place-content - det giver 100% pixel-præcis centrering
   uafhængigt af evt. skæve standard-margener/paddings på <input>,
   som var årsagen til at prikken sad lidt skævt. */
.qsm-quiz-form .qmn_mc_answer_wrap input[type="radio"]::before,
.qsm-quiz-form input.qmn_quiz_radio.qmn_multiple-choice-input[type="radio"]::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 9px !important;
  height: 9px !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .12s ease-in-out;
  background: var(--quiz-accent) !important;
}

.qsm-quiz-form .qmn_mc_answer_wrap input[type="radio"]:checked::before,
.qsm-quiz-form input.qmn_quiz_radio.qmn_multiple-choice-input[type="radio"]:checked::before {
  transform: translate(-50%, -50%) scale(1);
}

/* Når pillen er valgt: ring i accentfarven med udfyldt prik i midten
   (matcher jeres lyse pille-baggrund, i stedet for den gamle
   hvide-ring-på-mørk-pille variant) */
.qmn_mc_answer_wrap:has(input:checked) input[type="radio"] {
  border-color: var(--quiz-accent) !important;
  background: var(--quiz-pill-bg) !important;
}

/* ---------- Blødere fejl-styling ----------
   QSM's standard-fejl er en kraftig rød boks + rød kant om
   spørgsmålskortet. Det bliver dæmpet til en rolig rosa-tone,
   der passer til resten af designet. !important bruges fordi
   QSM's egne fejl-regler ellers vinder. */

/* Selve fejlbeskeden (fx "Sæt en prik, hvis du vil videre") */
.qsm-quiz-container .qmn_error_message_section,
.qsm-quiz-container .qsm-error-message {
  background: var(--quiz-error-bg) !important;
  border: 1px solid var(--quiz-error-border) !important;
  color: var(--quiz-error) !important;
  border-radius: 14px !important;
  padding: 14px 20px !important;
  margin-bottom: 22px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  box-shadow: none !important;
  text-align: left !important;
}

/* QSM sætter faktisk to ens fejlbeskeder ind - en i toppen af
   quizzen (#mlw_error_message) og en i bunden (#mlw_error_message_bottom).
   Vi vil kun vise den nederste, og kun når den rent faktisk
   indeholder en fejl (ellers står den som en tom, farvet boks). */
#mlw_error_message {
  display: none !important;
}

#mlw_error_message_bottom:empty {
  display: none !important;
}

/* Spørgsmålskort der mangler et svar: rolig rosa kant/baggrund
   i stedet for en kraftig rød ramme */
.quiz_section.qsm-question-wrapper.qmn_error {
  border: 1.5px solid var(--quiz-error-border) !important;
  outline: none !important;
  background: var(--quiz-error-bg) !important;
}

.quiz_section.qsm-question-wrapper.qmn_error .mlw_qmn_new_question {
  color: var(--quiz-accent) !important;
}

/* Fjern den ekstra røde/lyserøde boks (kant + baggrund + padding),
   som QSM sætter omkring selve svarrækken (fundet i dit DevTools-
   screenshot: .qsm-quiz-form .qmn_error .qmn_radio_answers { border:
   1px solid #da4f49; background:#F2DEDE; padding:5px; ... }).
   Vi matcher samme selector for at være sikre på at vinde, og
   fjerner den samme boks på checkbox-/accept-typer spørgsmål. */
.quiz_section.qsm-question-wrapper.qmn_error fieldset,
.qsm-quiz-form .qmn_error .qmn_radio_answers,
.qsm-quiz-form .qmn_error .qmn_check_answers,
.qsm-quiz-form .qmn_error .qmn_accept_answers,
.quiz_section.qsm-question-wrapper.qmn_error .qmn_radio_answers,
.quiz_section.qsm-question-wrapper.qmn_error .qmn_check_answers,
.quiz_section.qsm-question-wrapper.qmn_error .qmn_accept_answers {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Den lille røde "prik" med "-" som QSM sætter i øverste højre
   hjørne af kortet (via .qmn_error:after) - fjernes, så det ikke
   bliver dobbelt op med den bløde kort-farve ovenfor. */
.qsm-quiz-form .qmn_error::after,
.quiz_section.qsm-question-wrapper.qmn_error::after {
  content: none !important;
}

.quiz_section.quiz_begin {
  display: none;
}

/* Foretrækker du en lille, blød markering i stedet for slet
   ingenting? Slet reglen lige ovenfor og fjern kommentarerne her: */
/*
.qsm-quiz-form .qmn_error::after,
.quiz_section.qsm-question-wrapper.qmn_error::after {
  content: "" !important;
  background: var(--quiz-error) !important;
  width: 8px !important;
  height: 8px !important;
  top: 16px !important;
  right: 16px !important;
  box-shadow: none !important;
}
*/

/* ---------- Submit-/næste-knap ----------
   Præcise klasser fra dit DevTools-screenshot:
   <input type="submit" class="qsm-btn qsm-submit-btn qmn_btn" value="Næste">
   <a class="qsm-btn qsm-next qmn_btn ..." href="javascript:void(0)">Næste</a>
   Begge er "gå videre"-knappen (hedder "Næste" undervejs i quizzen
   og bliver til den endelige submit-knap på sidste side) - de
   styles ens efter jeres Figma-spec, så det er konsistent gennem
   hele quizzen: inline-flex, padding 15px 25px, radius 6px,
   center-justeret indhold, 10px gap, hvid bold tekst, let skygge. */
.qsm-quiz-form .qsm-btn.qsm-submit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  padding: 15px 25px !important;
  border: none !important;
  border-radius: 6px !important;
  background: var(--quiz-accent) !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.15) !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: filter .15s ease, transform .05s ease !important;
}

.qsm-quiz-form .qsm-btn.qsm-submit-btn:hover {
  filter: brightness(1.08);
  color: #ffffff !important;
}

.qsm-quiz-form .qsm-btn.qsm-submit-btn:active {
  transform: translateY(1px);
}





/* ---------- Responsivt: stak pillerne på smalle skærme ---------- */
@media (max-width: 640px) {
  .qmn_mc_answer_wrap {
    flex: 1 1 100%;
  }

  .quiz_section.qsm-question-wrapper {
    padding: 24px 20px;
  }
}