/* ---------------------------- STYLING AF HELE MODULET ---------------------------- */
.quiz-module {
  width: 75%; /* Benyttes til at illustrere opsætningen på siderne - skal sletts ved deploy */
  height: 550px; /* En fast højde på modulet */
  margin: 0 auto; /* Placerer boksen i midten af skærmen*/
  border: 1px solid #7284FA; /* Giver en tynd kant rundt om hele modulet */
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); /* Giver skygge rundt om boksen, så den står mere ud */
  padding-left: 70px; /* Den indvendige padding i venstre side */
  padding-right: 70px; /* Den indvendige padding i højre side */
  border-radius: 15px; /* Giver hele modulet (boksen) afrundede kanter */
}

@media only screen and (max-width: 480px) {
  .quiz-module {
    width: 90%; /* Bredden på quizmodulet i mobil tilstand */
    height: 650px;
    padding: 40px 40px; /* Alt indhold har 40px ud til quizzens horisontale kanter */
  }
}

/* STYLING AF PROCESSBAREN */
.progress-bar {
  opacity: 0; /* Progressbaren vises ikke på startsiden */
  display: flex; /* Placerer linjerne på en linje */
  gap: 10px; /* Skaber afstand mellem hver linje */
  justify-content: center; /* Placerer linjerne i midten */
  margin-top: 40px; /* Afstand til toppen */
  transition: opacity 0.5s ease; /* Overgang mellem opaciteten på processbaren */
}

@media only screen and (max-width: 480px) {
  .progress-bar {
    margin: 0;
  }
}

.progress-bar.show {opacity: 1; /* Processbaren vises ved klik på start */}

.progress-step {
  width: 40px; /* En fast bredde på hver linje */
  height: 4px; /* En fast højde på linjen */
  background-color: #E9E8FA; /* Baggrundsfarven */
  border-radius: 2px; /* Skaber afrundede kanter */
  transition: background-color 0.3s ease; /* Baggrundsfarven skifter med en trasition */
}

/* ---------------------------- STYLING AF STARTSIDEN ---------------------------- */
.quiz-module-start-text {margin-top: 137px; /* Afstanden fra startteksten op til progress-baren */}

@media only screen and (max-width: 480px) {
  .quiz-module-start-text {margin-top: 140px; /* Afstand fra top af quiz-modul ned til teksten */}
}

.quiz-module-start-text h2 {
  color: #7284FA; /* Eyebrow-headling får en anden farve */
  margin: 0; /* Margin default styling fra master css fjernes */
}

@media only screen and (max-width: 480px) {
  .quiz-module-start-text h1 {
    font-size: 28px;
  }
  
  .quiz-module-start-text h2 {
    font-size: 22px;
  }
}

/* STYLING AF STARTKNAP */
.quiz-start-button-container { 
  display: flex; /* Gør det muligt at placere knappen */
  justify-content: flex-end; /* Placerer startknappen i højre side*/
  margin: 90px 0 36px; /* Oven- og nedstående afstand */
}

@media only screen and (max-width: 480px) {
  .quiz-start-button-container {
    margin: 150px 0 0;
  }
}

/* ---------------------------- STYLING AF SPØRGSMÅL- OG SVARSIDEN ---------------------------- */
.question-and-answer {
  display: flex; /* Placerer indholdet på en horisontal linje */
  gap: 70px; /* Skaber afstand mellem de to containere */
  align-items: center; /* Placerer indholdet centreret på den vertikale retning, så det står på den horisontale linje */
  margin-top: 100px; /* Afstand mellem top og indholdet af spørgsmål og svar */
  height: 240px; /* Containeren har altid en fast højde */
}

@media only screen and (max-width: 480px) {
  .question-and-answer {
    flex-direction: column; /* Indholdet placeres på en vertikal linje */
    margin: 0; /* Al margin nulstilles */
    padding: 0; /* Padding nulstilles */
    height: 525px; /* Højden på quiz-modulet minus padding i top og bund og submitknappens højde */
    gap: 0; /* Nulstiller gap fra desktop */
    justify-content: space-between; /* Spørgsmålet og svarmulighederne skubbes op til toppen og ned til bunden af containeren */
  }
  
  .question-and-answer h2 {
    margin-top: 60px; /* Placerer overskriften 60px fra top */
    text-align: center !important;
  }
}

.question-and-answer > div {
  flex: 1; /* Begge div'er får samme bredde */
}

.quiz-module-answer-options {
  display: flex; /* Placerer elementerne på linje */
  flex-direction: column; /* Elementerne placeres på en horisontal linje */
  justify-content: center; /* Det placeres i midten af containeren */
  align-items: center; /* Det placeres i midten af containeren */
}

@media only screen and (max-width: 480px) {
  .quiz-module-answer-options {
    width: 100%; /* Containeren med svarmuligheder fylder hele bredden */
  }
}

/* STYLING AF SPØRGSMÅL- OG SVARMULIGHEDSSIDEN */
.answer-option {
  width: 100%; /* En fast bredde */
  min-height: 45px; /* En fast højde */
  font-size: 20px; /* Fontstørrelsen */
  background-color: #E9E8FA; /* Giver en baggrundsfarve */
  border: 1px solid #7284FA; /* Giver en kant */
  border-radius: 50px; /* Afrunder kanterne */
  cursor: pointer; /* Tydeliggør at det er klikbart*/
  margin-bottom: 15px; /* Der skabes en afstand på 15px til understående elementer */
  color: #000; /* Gør skriftfarven sort, der overruler master-css */
  padding: 0; /* Fjern default button styling */
  line-height: normal; /* Fjern default button styling */
  transition: all 0.1s ease; /* Overgangen fra hover til !hover */
}

@media only screen and (max-width: 375px) {
  .answer-option {
    font-size: 18px;
  }
}

/* STYLING AF SVARMULIGHEDER */
.answer-option:hover {
    background-color: #B7C1FC; /* Lidt mørkere når den besøgende hover */
    outline: 2px solid #7284FA; /* Kanten bliver tykkere ved hover */
}

/* STYLING AF SVARMULIGHEDER */
.answer-option.selected {
    background-color: #B7C1FC; /* Baggrundsfarven er mere fed */
    outline: 2px solid #7284FA; /* Der benyttes outline for ikke at skubbe layoutet */
    border: none; /* Kanten på boksen i normal tilstand fjernes */
}

.answer-option.disabled {
  pointer-events: none;
  cursor: default;
}

/* STYLING AF SUBMIT-KNAP */
.submit-button-container {
  display: flex; /* Gør det muligt at placere knappen efter ønske */
  justify-content: center; /* Knappen placeres i midten */
  margin: 90px 0 36px; /* Knappens placering */
}

@media only screen and (max-width: 480px) {
  .submit-button-container {
    margin: 0; /* Nulstiller al margin for knappens container */
  }
}

/* RYSTEANIMATION PÅ SUBMIT, HVIS DER IKKE ER KLIKKET PÅ NOGET */
.submit-button.inactive {
    opacity: 0.5; /* Når knappen ikke er klikbar får den en lavere opacitet */
    cursor: not-allowed; /* Cursoren sættes til not-allowed */
}

.submit-button.active {
    opacity: 1; /* Opaciteten er 100%, når knappen er klikbar */
    cursor: pointer; /* Pointer-cursor for at tydeligør klikbarhed */
}

/* Selve rysteanimationen - fundet på W3-schools*/
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

.shake {
  animation: shake 0.5s ease-in-out; /* Fundet på W3-schools */
}

/* GENEREL STYLING AF KNAPPER */
.quiz-module-start-button, .submit-button {
    width: 150px; /* Fast bredde til alle knapper */
    height: 45px; /* Fast minimumshøjde */
    display: flex; /* Tekst og pil stilles på linje */
    align-items: center; /* Indholdet står på linje */
    justify-content: space-between; /* Tekst til venstre, pil til højre */
    padding: 10px 20px; /* Padding omkring indholdet */
    background-color: #182975; /* Baggrundsfarven overruler master-css */
    color: #FFF; /* Giver en skriftfarve */
    border-radius: 50px; /* Skaber afrundede kanter */    
    font-size: 20px; /* Giver teksten en bestemt størrelse */
    gap: 8px; /* Mellemrum mellem tekst og pil i start-knap */
    text-decoration: none; /* Ingen underline */
    margin-top: 15px;
}

/* Sikrer at teksten altid starter samme sted */
.quiz-module-start-button h3, .submit-button h3 {
    flex: 1; /* Må fylder lige så meget som det andre flex-element */
    text-align: left; /* Teksten placeres til venstre i boksen */
    margin: 0; /* Margin fra master-css overrules */
    font-size: 20px; /* Sætter en bestemt størrelse på heading i knappen */
    color: #FFF; /* Giver heading en bestemt farve */
}

/* Pilen placeres altid samme sted til højre */
.quiz-module-start-button svg, .submit-button svg {flex-shrink: 0; /* Forhindrer pilen i at skrumpe */}

/* ---------------------------- STYLING AF FORKLARING ---------------------------- */
.question-and-explanation {
  display: flex; /* Placerer indholdet på en horisontal linje */
  gap: 70px; /* Skaber afstand mellem de to containere */
  align-items: center; /* Placerer indholdet centreret på den vertikale retning, så det står på den horisontale linje */
  margin-top: 100px; /* Afstand mellem top og indholdet af spørgsmål og svar */
  height: 240px; /* Containeren har altid en fast højde */
}

.question-and-explanation > div {flex: 1; /* Begge div'er får samme bredde */}

.question-and-explanation h3 {
  color: #7284FA; /* Overskriftfarve på forklaringssiden */
  margin: 0; /* Fjerner al default-styling */
}

.quiz-module-answer-description {
  text-align: left;
}

@media only screen and (max-width: 480px) {
  .question-and-explanation {
    flex-direction: column; /* Indholdet placeres på en vertikal linje */
    margin: 0; /* Al margin nulstilles */
    padding: 0; /* Padding nulstilles */
    height: 525px; /* Højden på quiz-modulet minus padding i top og bund og submitknappens højde */
    gap: 0; /* Nulstiller gap fra desktop */
    justify-content: space-between; /* Spørgsmålet og svarmulighederne skubbes op til toppen og ned til bunden af containeren */
    align-items: initial; /* Fjerne stylingen fra desktop-versionen */
  }
  
  .question-and-explanation h2 {
    margin-top: 60px; /* Placerer overskriften 60px fra top */
    text-align: center !important; /* Overskriften i forklaringen placeres i midten*/
  }
  
  .question-and-explanation h3 {
    text-align: left !important;
  }
  
  .question-and-explanation p {
    text-align: left !important;
  }
}

/* ---------------------------- STYLING AF RESULTATER - GENERELT ---------------------------- */
.quiz-module-result-overview {
  display: flex; /* Placerer elementer på linje */
  gap: 70px; /* Skaber afstand mellem de to containere */
  align-items: start; /* Placerer indholdet centreret på den vertikale retning, så det står på den horisontale linje */
  margin-top: 100px; /* Afstand mellem top og indholdet af spørgsmål og svar */
  height: 350px; /* Containeren har altid en fast højde */
}

.share-heading {
  margin: 0;
}

@media only screen and (max-width: 480px) {
  .quiz-module-result-overview {
    flex-direction: column; /* Indholdet placeres på en vertikal linje */
    margin: 0; /* Al margin nulstilles */
    padding: 0; /* Padding nulstilles */
    height: 525px; /* Højden på quiz-modulet minus padding i top og bund og submitknappens højde */
    gap: 0; /* Nulstiller gap fra desktop */
    justify-content: space-between; /* Spørgsmålet og svarmulighederne skubbes op til toppen og ned til bunden af containeren */
  }
}

/* ---------------------------- STYLING AF RESULTATER - VENSTRE SIDE ---------------------------- */
.quiz-module-results-left {
  flex: 1;
}

@media only screen and (max-width: 480px) {
  .quiz-module-results-left {
    width: 100%;
    display: block; /* Add this - left visible on mobile initially */
  }
}

.score-display {
  color: #7284FA; /* Eyebrow-headling får en anden farve */
  margin: 0; /* Margin default styling fra master css fjernes */
}

@media only screen and (max-width: 375px) {
  .score-display, .share-heading {
    font-size: 20px;
  }
}

.toggle-container {
  display: none;
}

@media only screen and (max-width: 480px) {
  .toggle-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #182975; /* Giver den blå kant på toggleboksen */
    border-radius: 50px;
    background-color: #FFF;
    margin: 20px 0 0;
    height: 45px;
    position: relative;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1); /* Giver skygge rundt om boksen, så den står mere ud */
    width: 100%;
  }
  
  .toggle-container.toggle-right {
    display: none;
  }
  
  .toggle-container.toggle-left {
    display: flex; /* Starttilstand - synlig */
  }
  
  /* Sørg for at toggle-containerene placeres korrekt */
  .quiz-module-results-left .toggle-container {
    order: 1; /* Placér efter heading */
  }
  
  .sliding-element {
    display: flex;
    position: absolute;
    width: 50%;
    height: 100%;
    background-color: #182975;
    top: 0;
    left: 0;
    color: #FFF;
    border-radius: 50px;
    transition: transform 0.4s ease-in-out;
  }
  
  .toggle-item {
    padding: 5px 30px;
    margin: 0;
    position: relative;
    z-index: 1;
  }

  .toggle-item.active {
    color: #FFF;
  }
}

@media only screen and (min-width: 481px) {
  .sliding-element {
    display: none;
  }
}

/* STYLING AF KOPIERINGSTEKST */
.quiz-module-copy-text {
  border: 1px solid #7284FA; /* Kantstyling på tekstfeltet på resultatsiden*/
  border-radius: 6px; /* Giver afrundede kanter */
  width: 100%; /* Feltet må fylde 100% af sin container*/
  height: 100%; /* Feltet må fylde 100% af sin container */
  padding: 20px; /* Skaber afstand mellem teksten og dens kant */
  position: relative; /* Gør det muligt at placere børnelementer aboslut inden i */
}

@media only screen and (max-width: 480px) {
  .quiz-module-copy-text {
    width: 100%; /* Indholdet får lov til at fylde hele containerens bredde */
    height: auto; /* Højden justereres efter indholdet */
    margin-top: 20px;
  }
  
  .desktop-copy-icon {
    display: none; /* Ikonet i kopier-boksen vises ikke */
  }
  
  .score-display {
    margin-top: 40px;
  }
}

.copy-text-p-tags {
  width: 90%; /* En fast bredde, så tekstfelterne ikke går ind over copy-knappen */
  margin: 0; /* Fjerner al margin fra master-css */
}

.copy-text-p-tags p {
  margin: 0;
}

/* Sørg for at span ikke har display: block */
#copy-score {
    display: inline; /* eller inline-block */
}

@media only screen and (max-width: 480px) {
  .copy-text-p-tags p {
    font-size: 14px;
  }
}

.desktop-copy-button {
    position: absolute;
    top: 15px; /* Knappens placering fra top */
    right: 15px; /* Knappens placering fra højre side */
    cursor: pointer; /* Pointerer at knappen er klikbar */
}

.desktop-copy-button:hover::after {
    content: "Copy"; /* Teksten inden i */
    position: absolute; /* Placering */
    bottom: 100%; /* Sikrer placeringen af beskeden */
    background: #182975; /* Baggrundsfarven på beskeden */
    color: #FFF; /* Tekstfarven på beskeden */
    padding: 4px 8px; /* Afstand omkring teksten i beskeden */
    border-radius: 4px; /* Afrundede kanter på beskeden */
    font-size: 12px; /* Skriftstørrelsen */
    white-space: nowrap; /* Bogstaver stilles på linje */
}

.mobile-copy-button-container::after {
    content: "Copied";
    position: absolute;
    bottom: 100%;
    left: 20%;
    background: #182975;
    color: #FFF;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0; /* Hidden by default */
    pointer-events: none; /* So it doesn’t interfere with clicks */
    transition: opacity 0.3s ease-in-out;
}

.mobile-copy-button-container.copied::after {
    opacity: 1; /* Show when .copied is added */
}

.desktop-copy-button.copied:hover::after {
    content: "Copied!"; /* Beskeden ændres til dette */
}

.mobile-copy-button-container {
  display: none;
}

@media only screen and (max-width: 480px) {
  .desktop-copy-button {
    display: none;
  }
  
  .mobile-copy-button-container {
    position: absolute; /* Position absolutely within the copy text container */
    display: flex;
    left: 35%;
    top: 77%;
  }
  
  .mobile-copy-button {
    display: flex;
    align-items: center;
    justify-content: center; 
    background-color: #FFF;
    border: 1px solid #182975;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.1);
    border-radius: 50px;
    width: 100px;
    height: 45px;
    padding: 0;
    margin: 0;
    gap: 5px;
  }
  
  .mobile-copy-button h3 {
    align-items: center;
    padding: 0;
    margin: 0;
    color: #182975;
  }

}

@media only screen and (max-width: 375px) {
  .mobile-copy-button h3 {
    font-size: 16px;
  }
  
  .mobile-copy-button-container {
    position: absolute; /* Position absolutely within the copy text container */
    display: flex;
    left: 30%;
    top: 80%;
  }
}

/* ---------------------------- STYLING AF RESULTS OVERVIEW - HØJRE SIDE ---------------------------- */

.quiz-module-results-right {
  flex: 1; /* Må fylde lige så meget som de andre containere i containeren */
  flex-direction: column; /* Indholdet sættes på en verikal række */
  gap: 20px; /* Der er et gap mellem hvert spørgsmål */
  align-items: center; /* Indholdet placeres i midten */
  max-height: 350px; /* Sæt maksimal højde */
  overflow-y: auto; /* Tilføj vertikal scrollbar */
  overflow-x: hidden; /* Skjul horisontal scrollbar */
}

.mobile-heading-right {
  display: none;
}

@media only screen and (max-width: 480px) {
  .quiz-module-results-right {
    width: 100%; /* Containeren må fylde hele bredden */
    margin-top: 35px; /* Det placeres 35px fra ovenstående indhold */
    display: none; /* Add this - right hidden on mobile initially */
  }
}

@media only screen and (max-width: 375px) {
  .quiz-module-results-right {
    gap: 0;
  }
}

/* Styling af hver 'boks' hvori spørgsmålet står */
.result-question-item {
  border-bottom: 1px solid #182975; /* Kant i bunden af hvert spørgsmål */
  padding-bottom: 15px; /* Indvendig mellemrum mellem indhold og border*/
  padding-right: 10px; /* Afstand mellem scrollbar og indhold */
  margin-bottom: 15px; /* Afstand mellem hvert spørgsmål */
}

@media only screen and (max-width: 480px) {
  .result-question-item {
    display: none;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 0;
  }
}

.result-question-header {
  display: flex; /* Placerer spørgsmål og pil på linje */
  justify-content: space-between; /* Placerer indholdet */
  align-items: center; /* Placerer tekst og pil på en horisontal lije */
  cursor: pointer; /* Tydeligør at elementet er klikbart */
  gap: 45px; /* Spørgsmål og foldu-pil står med minimum 45px mellemrum */
}

.quiz-explanation-link {
  display: flex; /* Tekst og pil på linje */
  justify-content: end; /* Placeres i højre side af sin container */
  align-items: center; /* Tekst og pil står på en horisontal linje */
  gap: 12px; /* De står med 12px afstand til hinanden */
  text-decoration: none; /* Ingen underline */
  color: #7284FA; /* Linket får den lilla farve */
  font-weight: 500; /* Tykkelsen på linket */
}

.quiz-explanation-link svg {
  width: 24px; /* Bredden på pilen i linket */
  height: 11px; /* Højden på pilen i linket */
  transition: transform 0.4s ease; /* En effekt, der får pilen til at flytte sig frem og tilbage */
}

/* NÅR MUSEN HOLDES OVER LINKET */
.quiz-explanation-link:hover svg {
  transform: translate(8px, 0px); /* Pilens bevægelse */
}

/* NÅR MUSEN HOLDES OVER LINKET */
.quiz-explanation-link:hover .quiz-explanation-link {text-decoration: underline; /* Når der hover over linket for teksten en underline - tydeligører klikbarheden */}

/* Styling af hver overskrift i denne boks*/
.result-question-item h3 {margin: 0; /* Fjerner al margin fra master-css*/}

.result-status-text {
    margin: 0;
    padding: 10px 0;
}

.result-question-details {
    display: none; /* Som standard skjult */
    padding-top: 15px; /* Lidt afstand når den åbnes */
    transition: all 0.3s ease; /* Smooth overgang */
}

.result-question-details.open {
    display: block; /* Vises når den er åben */
    margin: 0; /* Fjerner margin fra master-css */
    padding: 0; /* Fjerner padding fra master-css */
}

.result-question-header svg {transition: transform 0.3s ease; /* Rotation af pil */}

.result-question-item.open .result-question-header svg {transform: rotate(90deg); /* Rotér pil når åben */}

.quiz-module-answer-options, .quiz-module-answer-description {opacity: 1; transition: opacity 0.3s ease;}

.quiz-module-answer-options.fade-out, .quiz-module-answer-description.fade-out {opacity: 0;}

/* STYLING AF HØJRE SIDE HVIS ALT ER KORRET */
.quiz-module-all-correct {flex: 1; /* Må fylde lige så meget som det andet element i flex-containeren */}


/* STYLING AF KNAP TIL AT SE SVAR */
.show-answers-text {
    margin-top: 15px;
    text-decoration: underline; /* Underline, der tydeliggør klikbarheden */
    color: #182975; /* Farven på teksten */
    opacity: 0.3; /* Opacitet på farven */
    cursor: pointer; /* Tydeligør at det er klikbart */
    font-size: 14px; /* Lidt mindre tekst */
    /* font-weight: 400; Tykkere tekst */
}

.show-answers-text:hover font-weight: 500; /* Lidt federe ved hover */

@media only screen and (max-width: 480px) {
  .show-answers-text {
    display: none; /* Denne tekst vises ikke i mobil */
  }
}


/* SKIFT MELLEM HØJRE SIDE AF RESULTS-SIDEN, HVOR BRUGEREN KAN SKIFTE MELLEM CELEBRATION OG OVERSIGT OVER SPØRGSMÅL OG SVAR - DETTE ER KUN SYNLIGT FOR DEN BRUGER, DER SVARER KORREKT PÅ ALLE SPØRGSMÅL */
.quiz-module-results-right, .quiz-module-all-correct {
    opacity: 1; /* Indholdet vises */
    transition: opacity 0.3s ease; /* Glidende overgang */
}

.quiz-module-results-right.fade-out, .quiz-module-all-correct.fade-out {opacity: 0;} /* Indholdet vises ikke */

@media only screen and (max-width: 480px) {
  .show-answers-text {
    display: none !important; /* Force hide on mobile */
  }

  .quiz-module-all-correct {
    display: none !important; /* Force hide celebration on mobile */
  }
}