/* STORIES INDEX PAGE */

h1.PageHeader {
  margin-top: 10px;
  margin-bottom: 10px;
}

.cover_image {
  position: relative;
  /* Enable absolute positioning for children */
}

.premium-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  /* Above image, below word count and genres */
  border-radius: inherit;
  /* Match any border radius of the parent */
}

.premium-text {
  color: white;
  font-weight: bold;
  font-size: 1.1rem;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  /* Better readability */
}

.story-grid .story-item.storyChapter {
  height: 500px;
}


/* OVERVIEW PAGE */
@media screen and (min-width: 768px) {
  .overviewContent {
    display: flex;
    flex-direction: row-reverse;
    width: 100%;
    gap: 50px;
  }

  .overviewContentDetails,
  .contentSection.storyContent {
    flex: 1;
  }

  .contentSection.storyContent {
    margin-top: 10px;
  }

  .story-cover-image {
    width: 100%;
    height: auto;
    /* Maintains aspect ratio */
    object-fit: cover;
    object-position: center;
    /* Ensures image covers the area while maintaining aspect ratio */
    border-radius: 25px;
    height: 500px
  }
}

.overviewContent .overviewContentDetails div p {
  margin: 0;
}

.overviewContent .overviewContentDetails p.paragraph {
  margin-top: 1rem;
}

main {
  width: 900px;
  margin: auto;
  margin-top: 5rem;
  max-width: 90vw;
}

@media screen and (max-width: 768px) {
  main {
    margin-top: 2rem;
  }
}

.titleDiv {
  margin-bottom: 2rem;
  background-color: #eeeeee;
}

.titleDiv h1 {
  background: rgb(0, 0, 0);
  color: white;
}

.titleDiv h1 {
  padding: 15px;
}

.titleDiv p {
  padding: 5px 15px;
}

main {
  background: rgb(238, 237, 237);
  padding: 25px;
}

.breadcrumb {
  margin-top: 10px;
  font-size: 12px;
}

.chapterTitle h1 {
  line-height: 5rem;
  margin-top: 0rem;
  margin-bottom: 20px;
  text-align: center;
}

.chapterTitle p {
  font-size: 22px;
  font-weight: 500;
  margin-top: -25px;
  text-align: center;
}

@media screen and (max-width: 768px) {
  .chapterTitle h1 {
    font-size: 2rem;
    line-height: 3rem;

    .chapterTitle p {
      font-size: 20px;
      font-weight: 500;
    }
  }
}

#search-input {
  width: 100% !important;
}


/* OVERVIEW FILTERING AND SORTING STYLES FOR SINGLE LANGUAGE AND LEVEL  */

/* =========================================
     SINGLE LANGUAGE LEVEL FILTERING SECTION
     ========================================= */

/* Main container */
.singleLanguageLevelFiltering {
  margin-bottom: 2rem;
}

@media screen and (min-width: 768px) {
  .contentSection.singleLanguageLevelFiltering {
    min-height: 900px;
  }
}

@media screen and (max-width: 768px) {
  .contentSection.guidedLanguageCourse {
    margin-top: 1rem;
    margin-bottom: -1rem;
  }
}

/* Filter controls wrapper */

.singleLanguageLevelFiltering .filter-controls-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-flow: row;
  /* background: lightcoral; */
  /* place-items: center; */
  border-radius: 8px;
  margin-bottom: 1rem;
  gap: 2rem;
  padding: 1rem;
  border: 1px solid black;
}

@media screen and (min-width: 768px) {
  .singleLanguageLevelFiltering .filter-controls-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr
  }
}


@media screen and (min-width: 1240px) {
  .singleLanguageLevelFiltering .filter-controls-wrapper {
    display: grid;
    grid-template-columns: 3fr 4fr 3fr 3fr;
    /* background: lightcoral; */
    place-items: center;
    border-radius: 8px;
    margin-bottom: 2rem;
    gap: 2rem;
    /* padding: 1rem; */
    padding: 5px 1rem 15px 1rem;

  }
}

.singleLanguageLevelFiltering .filter-controls-wrapper select,
.singleLanguageLevelFiltering .filter-controls-wrapper input {
  border: 2px solid black;
}

/* Content type filter buttons group */
.singleLanguageLevelFiltering .content-type-filter {
  display: flex;
  gap: 0.5rem;
  place-self: end;
}

details.filter-dropdown {
  position: relative;
}

@media screen and (min-width: 768px) {
  .filters-dropdown-panel {
    position: absolute;
    width: 450px;
    padding: 2rem;
    left: -70px
  }
}

details.filters-dropdown[open] {
  text-align: center;
}

.filters-dropdown {
  place-self: end;
}

.filters-dropdown .filters-dropdown-panel {
  border: 2px solid black;
  margin-top: 20px;
}

.filter-row .filter-label {
  font-size: 1rem;
  font-weight: bold;
  text-align: left;
}


@media screen and (min-width: 768px) {
  .filters-dropdown .filters-dropdown-panel {
    margin-left: -25px;
  }
}


/* Content type buttons - remove default margin */
.singleLanguageLevelFiltering .content-type-filter .button {
  margin: 0;
}

/* Sorting controls group */
.singleLanguageLevelFiltering .sorting-controls {
  display: flex;
  width: 100%;
  flex-direction: column;

}



/* Sort select dropdown */
.singleLanguageLevelFiltering .sort-select {
  padding: 8px 12px;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  background: white;
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.singleLanguageLevelFiltering .sort-select:hover {
  border-color: #adb5bd;
}

.singleLanguageLevelFiltering .sort-select:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
}

/* Filtered content container */
.singleLanguageLevelFiltering .filtered-content-container {
  position: relative;
  min-height: 400px;
  transition: opacity 0.2s ease;
}

/* Results summary */
.singleLanguageLevelFiltering .results-summary {
  text-align: center;
  margin-top: 2rem;
  color: #666;
  font-size: 0.9rem;
}

.singleLanguageLevelFiltering .results-summary p {
  margin: 0;
}

/* Loading state for content container */
.singleLanguageLevelFiltering .filtered-content-container.loading {
  opacity: 0.7;
  pointer-events: none;
}

/* Tablet responsive */
@media screen and (max-width: 1024px) {
  .singleLanguageLevelFiltering .filter-controls-wrapper {
    gap: 1.5rem;
  }
}

/* Mobile responsive - Filter buttons inline, sorting below */
@media screen and (max-width: 768px) {
  .singleLanguageLevelFiltering .filter-controls-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    padding: 0 1rem 0.5rem 1rem;
  }

  .singleLanguageLevelFiltering .content-type-filter {
    width: 100%;
    display: flex;
    flex-direction: row;
    /* Keep buttons horizontal */
    justify-content: space-between;
    gap: 5px;
    /* Tight gap between buttons */
  }

  .singleLanguageLevelFiltering .content-type-filter .button {
    flex: 1;
    /* Equal width for all buttons */
    padding: 8px 5px;
    /* Explicit 5px horizontal padding as requested */
    text-align: center;
    font-size: 14px;
    /* Slightly smaller to fit better */
    min-width: 0;
    /* Allow buttons to shrink */
  }

  .singleLanguageLevelFiltering .sorting-controls {
    width: 100%;
    flex-direction: row;
    /* Keep label and dropdown on same line */
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
  }

  .singleLanguageLevelFiltering .sort-select {
    flex: 1;
    max-width: none;
  }

  .singleLanguageLevelFiltering .filtered-content-container {
    min-height: 300px;
  }
}

/* Extra small mobile - might need smaller font */
@media screen and (max-width: 480px) {
  .singleLanguageLevelFiltering .content-type-filter .button {
    font-size: 13px;
    /* Even smaller on very small screens */
    padding: 6px 5px;
    /* Keep 5px horizontal padding */
  }
}

/* Hover effects for better UX */
.singleLanguageLevelFiltering .content-type-filter .button:not(.buttonGrey):hover {
  transform: scale(1.05);
}

/* Active filter indication */
.singleLanguageLevelFiltering .content-type-filter .button:not(.buttonGrey) {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Disabled state for filters during loading */
.singleLanguageLevelFiltering.is-loading .filter-controls-wrapper {
  pointer-events: none;
  opacity: 0.6;
}

/* Animation for content updates */
@keyframes contentFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.singleLanguageLevelFiltering .filtered-content-container.content-updated {
  animation: contentFadeIn 0.3s ease;
}

/* Focus styles for accessibility */
.singleLanguageLevelFiltering .content-type-filter .button:focus {
  outline: 2px solid #4A90E2;
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .singleLanguageLevelFiltering .filter-controls-wrapper {
    display: none;
  }

  .singleLanguageLevelFiltering .results-summary {
    font-weight: bold;
    border-top: 1px solid #ddd;
    padding-top: 1rem;
  }
}

/* END OF FILTERING AND SORTING STYLES */

details {
  background: white;
  border: 2px solid black;
  display: block;
  width: 100%;
  /* width: fit-content; */
  /* min-width:300px; */
  text-align: center;
  padding: 5px 25px;
  border-radius: 5px;
  /* margin-top: 10px; */
  font-size: 18px;
  margin-bottom: 0px;
}

details[open] {
  /* Styles when the details is expanded */
  text-align: left;
  /* Any other styles you want when open */
}

details p {
  padding: 10px;
  font-size: 18px;
  text-align: left;
}


.paragraph {
  margin-top: 2rem;
  max-width: 900px;
  margin: auto;
  font-size: 18px;
  margin-top: 1rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  margin-bottom: 2rem;

}

.word {
  position: relative;
  display: inline-block;
  cursor: pointer;
  margin: 0px;
  padding: 5px;
  font-size: 18px;
}

/* First section - arrow pointing UP */
.storyParagraph:first-of-type .tooltip::after {
  bottom: auto;
  top: -15px;
  /* Inverted triangle - points upward */
  border-color: transparent transparent #000000 transparent;
}

/* Fade in animation */
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Fade out animation */
@keyframes tooltipFadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.buttonForContent-a1 .word:hover,
.buttonForContent-a1 .word[aria-expanded="true"] {
  background: rgba(178, 34, 34, 0.15);
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  margin: 0;
}

.buttonForContent-a2 .word:hover,
.buttonForContent-a2 .word[aria-expanded="true"] {
  background: rgba(255, 166, 0, 0.15);
  border-radius: 5px;
  padding: 0 5px;
  margin: 0;
}

.buttonForContent-b1 .word[aria-expanded="true"],
.buttonForContent-b1 .word:hover {
  background: rgba(55, 116, 55, 0.15);
  border-radius: 5px;
  padding: 0 5px;
  margin: 0;
}

.buttonForContent-b2 .word[aria-expanded="true"],
.buttonForContent-b2 .word:hover {
  background: rgba(83, 83, 194, 0.15);
  border-radius: 5px;
  padding: 0 5px;
  margin: 0;
}

.buttonForContent-c1 .word[aria-expanded="true"],
.buttonForContent-c1 .word:hover {
  background: rgba(15, 15, 15, 0.15);
  border-radius: 5px;
  padding: 0 5px;
  margin: 0;
}

/* Show tooltip when aria-expanded is true */
.word[aria-expanded="true"] .tooltip {
  visibility: visible;
  animation: tooltipFadeIn 0.25s ease-in-out forwards;
}

/* Hide tooltip when aria-expanded is false */
.word[aria-expanded="false"] .tooltip {
  animation: tooltipFadeOut 0.25s ease-in-out forwards;
  /* Keep visible during animation, then hide */
  visibility: visible;
}

/* After fade out completes, hide visibility */
.word[aria-expanded="false"] .tooltip.fade-complete {
  visibility: hidden;
}


.word[aria-expanded="true"] .tooltip {
  visibility: visible;
  opacity: 1;
}

/* Initially hide tooltips completely */
.word:not([aria-expanded]) .tooltip,
.word[aria-expanded="false"] .tooltip {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Mobile-friendly adjustments */
@media (max-width: 600px) {
  .tooltip {
    font-size: 16px;
  }
}

.translateParagraphButton {
  cursor: pointer;
}

.audio-container {
  margin-top: 5px;
}

/* Base image div */
.imageDiv {
  height: 100%;
  /* Takes full height of grid row */
  /* min-height: 300px; */
  /* Optional minimum height */
}

.storyParagraph {
  margin: 5px 0 0 0;
}

@media screen and (min-width: 768px) {
  .storyParagraph {
    margin: 25px 0 0 0;
  }
}

/* FORM SUBMISSIONS */
.correct-answer {
  background-color: rgba(40, 167, 69, 0.1);
  border-radius: 4px;
  padding: 10px;
  border-left: 4px solid #28a745;
}

.incorrect-answer {
  background-color: rgba(220, 53, 69, 0.1);
  border-radius: 4px;
  padding: 10px;
  border-left: 4px solid #dc3545;
}

.correct-answer label {
  color: #28a745;
  font-weight: bold;
}

.incorrect-answer label {
  color: #dc3545;
  font-weight: bold;
}

.text-success {
  color: #28a745;
}

.text-danger {
  color: #dc3545;
}

/* Styling van controle van of antwoord goes is of niet */
.questionAndAnswer {
  display: flex;
  flex-direction: column;

}

@media screen and (min-width: 1240px) {
  .questionAndAnswer {
    flex-basis: 500px;
  }
}

.questionAndAnswer .help-block {
  font-weight: semi-bold;
}

.contentSection.storySuccess {
  border: 3px solid green;
  font-weight: bold;
  font-size: 18px;
  padding: 25px;
  border-radius: 10px;
  opacity: 0;
  position: relative;
}

.contentSection.storySuccess .storySuccessButton {
  background: green;
  color: white;
  padding: 15px 50px;
  display: inline-block;
}

.contentSection.storySuccess .storySuccessButton:hover {
  border-color: green !important;
}

.contentSection.storySuccess .linkToProfileAfterCompletingChapter {
  color: #555555;
}

.storySuccessInner a {
  /* display: block; */
  padding-bottom: 15px;
}


/*  */
/* LUISTERMODUS PAGINA */


.flexSeparatorDiv {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.flexSeparatorDiv>div {
  border: solid 1px var(--border);
  border-radius: 5px;
}

.flex.luisterModusaccordion {
  justify-content: space-between;
  margin: 5px;
  align-items: center;

  gap: 15px;
}

.flex.luisterModusaccordion p {
  font-weight: bold;
  font-size: 20px;
  margin-bottom: 0;
}

@media screen and (max-width: 768px) {
  .luisterModusaccordion p {
    margin: auto;
  }

  .luisterModusaccordion a {
    flex-grow: 1;
  }
}


.audioPage .voice-selector-wrapper {
  margin-bottom: 1rem;
  border-bottom: none;
  box-shadow: none;
}

/*  */

/* CHECKBOXES IN BOOK OVERVIEW */

/*  */
/* PDF Options Section Styles */
/*  */

.pdf-options-section {
  background: var(--surface);
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 25px;
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  justify-content: space-between;
}

.pdf-options-section h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.pdf-options-row {
  display: flex;
  gap: 25px;
  flex-wrap: wrap;
}

.pdf-options-row .flexSeparatorDiv {
  flex-direction: row;
  flex-wrap: wrap;
}

.pdf-option-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  user-select: none;
  position: relative;
  overflow: visible;
}

/* Hidden checkbox */
.pdf-option-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Custom checkbox visual */
.checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #ddd;
  border-radius: 4px;
  position: relative;
  transition: all 0.2s ease;
  flex-shrink: 0;
  order: 3;
  /* Places it last visually */
}

/* Icon styling */
.option-icon {
  order: 1;
  /* Places it first visually */
  flex-shrink: 0;
  color: #333;
}

/* Text styling */
.option-text {
  order: 2;
  /* Places it in the middle */
  font-size: 16px;
  font-weight: 500;
  margin: 0 10px;
  position: relative;
  cursor: pointer;
  border-bottom: 1px dotted #999;
}




/* Checked state */
.pdf-option-checkbox:checked+.a1.checkbox-custom {
  background-color: var(--entryLevel);
  border-color: var(--entryLevel);
}

.pdf-option-checkbox:checked+.a2.checkbox-custom {
  background-color: var(--beginnerLevel);
  border-color: var(--beginnerLevel);
}

.pdf-option-checkbox:checked+.b1.checkbox-custom {
  background-color: var(--intermediateLevel);
  border-color: var(--intermediateLevel);
}

.pdf-option-checkbox:checked+.b2.checkbox-custom {
  background-color: var(--upperIntermediateLevel);
  border-color: var(--upperIntermediateLevel);
}

.pdf-option-checkbox:checked+.c1.checkbox-custom {
  background-color: var(--advancedLevel);
  border-color: var(--advancedLevel);
}

.pdf-option-checkbox:checked+.checkbox-custom::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: bold;
}

/* Hover effects */
.pdf-option-label:hover .a1.checkbox-custom {
  border-color: var(--entryLevel);
}

.pdf-option-label:hover .a2.checkbox-custom {
  border-color: var(--beginnerLevel);
}

.pdf-option-label:hover .b1.checkbox-custom {
  border-color: var(--intermediateLevel);
}

.pdf-option-label:hover .b2.checkbox-custom {
  border-color: var(--upperIntermediateLevel);
}

.pdf-option-label:hover .a1.option-icon {
  color: var(--entryLevel);
}

.pdf-option-label:hover .a2.option-icon {
  color: var(--beginnerLevel);
}

.pdf-option-label:hover .b1.option-icon {
  color: var(--intermediateLevel);
}

.pdf-option-label:hover .b2.option-icon {
  color: var(--upperIntermediateLevel);
}

.pdf-option-label:hover .c1.option-icon {
  color: var(--advancedLevel);
}



/* Focus styles for accessibility */
.pdf-option-label:focus-within .a1.checkbox-custom {
  outline: 2px solid var(--entryLevel);
  outline-offset: 2px;
}

.pdf-option-label:focus-within .ab.checkbox-custom {
  outline: 2px solid var(--beginnerLevel);
  outline-offset: 2px;
}

.pdf-option-label:focus-within .b1.checkbox-custom {
  outline: 2px solid var(--intermediateLevel);
  outline-offset: 2px;
}

.pdf-option-label:focus-within .b2.checkbox-custom {
  outline: 2px solid var(--upperIntermediateLevel);
  outline-offset: 2px;
}

.pdf-option-label:focus-within .c1.checkbox-custom {
  outline: 2px solid var(--advancedLevel);
  outline-offset: 2px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .pdf-options-section {
    flex-direction: column;
    gap: 15px;
  }

  .pdf-options-row {
    flex-direction: column;
    gap: 12px;
    align-items: flex-end;
  }

  .option-text::before {
    left: 0;
    transform: translateX(0);
    margin-left: -10px;
  }

  .option-text::after {
    left: 20px;
    transform: translateX(0);
  }
}

.chapters-list .chapter-item {
  display: flex;
  gap: 25px;
  align-items: center;
  justify-content: space-between;
  padding-left: 1rem;
}

@media screen and (max-width: 768px) {
  .chapters-list .chapter-item {
    display: flex;
    gap: 25px;
    align-items: center;
    justify-content: space-between;
    padding-left: 0rem;
    margin-bottom: 1rem;
  }

  .chapters-list .chapter-item p {
    margin: auto;
    text-align: center;
  }

  .chapters-list .chapter-item a {
    width: 100%;
  }
}

/* Chapter overview hoofdstukken downloaden */
.chapters-list .chapter-item p {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0;
}

.chapter-drill-block h3 {
  font-size: 18px;
  margin: 0.5 0
}


@media screen and (max-width: 768px) {
  .chapters-list .chapter-item {
    flex-direction: column;
    gap: 5px;
    align-items: start;
  }
}

.chapters-list .chapter-item .download {
  display: flex;
  align-items: center;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  gap: 15px;
}

.chapters-list .chapter-item .downloadChapterButton {
  padding: 5px 25px;
  min-width: 235px;
}

.downloadChapterButton .download {
  display: flex;
  gap: 25px;
  align-items: center;
}

.button.downloadChapterButton {
  padding: 5px 25px;
  height: 50px;
}

.downloadButtonStory {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

/*  */
/* SPINNER */
/*  */

/* Hide cursor during PDF download */
body.pdf-downloading,
body.pdf-downloading * {
  cursor: none !important;
}

/* Base button transitions */
.pdf-link {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  /* height:50px; */
}

/* Button state when generating PDF */
.pdf-link.pdf-generating {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: progress !important;
  min-height: 44px;
  /* Maintain minimum height */
}

/* Spinner container */
.pdf-spinner {
  width: 24px;
  height: 24px;
  position: relative;
  display: inline-block;
  margin-bottom: -20px;
  padding-bottom: 20px;
}

/* Spinner blades */
.spinner-blade {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 10px;
  background: currentColor;
  opacity: 0.8;
  border-radius: 2px;
  transform-origin: center -5px;
}

/* Blade rotations with staggered animations */
.spinner-blade:nth-child(1) {
  transform: translate(-50%, -50%) rotate(0deg);
  animation: fade 1s infinite linear;
}

.spinner-blade:nth-child(2) {
  transform: translate(-50%, -50%) rotate(45deg);
  animation: fade 1s infinite linear 0.125s;
}

.spinner-blade:nth-child(3) {
  transform: translate(-50%, -50%) rotate(90deg);
  animation: fade 1s infinite linear 0.25s;
}

.spinner-blade:nth-child(4) {
  transform: translate(-50%, -50%) rotate(135deg);
  animation: fade 1s infinite linear 0.375s;
}

.spinner-blade:nth-child(5) {
  transform: translate(-50%, -50%) rotate(180deg);
  animation: fade 1s infinite linear 0.5s;
}

.spinner-blade:nth-child(6) {
  transform: translate(-50%, -50%) rotate(225deg);
  animation: fade 1s infinite linear 0.625s;
}

.spinner-blade:nth-child(7) {
  transform: translate(-50%, -50%) rotate(270deg);
  animation: fade 1s infinite linear 0.75s;
}

.spinner-blade:nth-child(8) {
  transform: translate(-50%, -50%) rotate(315deg);
  animation: fade 1s infinite linear 0.875s;
}

/* Fade animation for spinner blades */
@keyframes fade {
  0% {
    opacity: 0.1;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.1;
  }
}

/* Maintain button colors during loading */
.pdf-link.a1.pdf-generating {
  background-color: var(--entryLevel);
}

.pdf-link.a2.pdf-generating {
  background-color: var(--beginnerLevel);
}

.pdf-link.b1.pdf-generating {
  background-color: var(--intermediateLevel);
}

.pdf-link.b2.pdf-generating {
  background-color: var(--upperIntermediateLevel);
}

.pdf-link.c1.pdf-generating {
  background-color: var(--advancedLevel);
}

/* Optional: Subtle glow effect during loading */
.pdf-link.pdf-generating {
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

/* Ensure spinner color contrasts well on all backgrounds */
.pdf-link.b1.pdf-generating .spinner-blade {
  background: #333;
  /* Dark color for light backgrounds */
}

/* Questionnaire */
.questionnaireSuccess {
  max-width: 300px;
}




/* NEW FILTERING LAYOUTN WITH FILLS */

/* Scoped */
#ll-pills-ui.ll-pills-ui {
  --ll-bg: #f4f5f7;
  --ll-border: #d9dce1;
  --ll-text: #1f2328;
  --ll-muted: #6b7280;
  --ll-accent: #111827;

  display: block;
}

/* Segmented pills (content type) */
#ll-pills-ui .ll-control-block {
  display: grid;
  gap: 8px;
  width: 100%
}

@media screen and (max-width: 768px) {
  #ll-pills-ui .ll-control-block {
    display: grid;
    gap: 0px;
    width: 100%;
    align-items: center;
    grid-template-columns: 1fr;
  }
}

#ll-pills-ui .ll-label {
  font-size: 0.9rem;
  color: var(--text);
  font-weight: 800;
}

#ll-pills-ui .ll-pill-seg {
  position: relative;
  display: inline-flex;
  justify-content: space-evenly;
  gap: 10px;
  padding: 3px 7px;
  border: 2px solid var(--border);
  background: var(--surface);
  border-radius: 999px;
  width: 100%;
  overflow: auto;
}

#ll-pills-ui .ll-pill-indicator {
  position: absolute;
  top: 8px;
  bottom: 8px;
  left: var(--indicator-left, 4px);
  width: var(--indicator-width, 60px);
  border-radius: 999px;
  background: var(--surface);
  transition: left 180ms ease, width 180ms ease;
  z-index: 0;
}

#ll-pills-ui .ll-pill-btn {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 8px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

#ll-pills-ui .ll-pill-btn.is-active {
  color: #fff;
  background: black;
}

#ll-pills-ui .ll-pill-btn:focus-visible {
  outline: 2px solid var(--ll-accent);
  outline-offset: 2px;
}

/* Layout */
#ll-pills-ui .filter-controls-wrapper {
  display: grid;
  gap: 5px 15px;
  align-items: end;
  border: 2px solid var(--border);
}

@media screen and (max-width: 768px) {
  #ll-pills-ui .filter-controls-wrapper {
    gap: 5px;
  }
}

/* Filters popover */
#ll-pills-ui .ll-filters-popover {
  position: relative;
}


#ll-pills-ui .ll-filters-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--border);
  background: var(--surface);
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
  width: 100%;
  border-radius: 10px;
  padding: 10px 1rem;
}

#ll-pills-ui .ll-filters-badge {
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: var(--ll-accent);
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  border: 1px solid black;
  height: 33px;
  width: 33px;
  margin-left: auto;
}

#ll-pills-ui .ll-filters-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  /* width: min(520px, calc(100vw - 32px)); */
  border: 1px solid var(--ll-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  padding: 12px;
  z-index: 50;
  margin-left: -10px;
}


@media screen and (min-width: 768px) {
  .filter-controls-wrapper {
    position: relative;
  }

  #ll-pills-ui .ll-filters-popover {
    position: static
  }

  #ll-pills-ui .ll-filters-panel {
    position: absolute;
    left: 10px;
    right: 0;

  }

  .facetFilteringGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    /* vertical alignment of grid items */
    justify-items: stretch;
    /* optional: fill column width */
    gap: 12px;
    margin-left: 0px;
  }

  #ll-pills-ui .ll-filters-panel {
    padding: 1rem;
  }
}

/* Vanaf 1000px 3 kolom layout */
@media screen and (min-width: 1350px) {
  .facetFilteringGrid {
    grid-template-columns: 1fr 2fr;
  }

  #category-facet.ll-facet-rows {
    grid-template-columns: 1fr 1fr;
  }
}




#ll-pills-ui .ll-filters-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ll-border);
  margin-bottom: 12px;
}

#ll-pills-ui .ll-filters-panel-title {
  font-weight: 900;
}

#ll-pills-ui .ll-panel-close {
  border: 0;
  background: transparent;
  font-size: 2rem;
  cursor: pointer;
}

#ll-pills-ui .ll-facet-section {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

#ll-pills-ui .ll-facet-title {
  font-weight: 900;
  color: var(--ll-text);
  font-size: 16px;
}

#ll-pills-ui .ll-facet-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}

@media screen and (min-width: 768px) {
  #category-facet.ll-facet-rows {
    padding-left: 10px;
    border-left: 1px solid black;
  }
}


/* Row item: label + count + small toggle on the right */
#ll-pills-ui .ll-facet-row-btn {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 7px 10px;
  border-radius: 12px;
  border: 1px solid var(--ll-border);
  background: var(--ll-bg);
  cursor: pointer;
  text-align: left;
}

@media screen and (max-width: 768px) {
  #ll-pills-ui .ll-facet-row-btn {
    padding: 5px 10px;
  }
}

#ll-pills-ui .ll-facet-row-label {
  font-weight: 700;
  color: var(--ll-text);
  font-size: 14px;
}

#ll-pills-ui .ll-facet-row-count {
  font-weight: 700;
  color: var(--ll-muted);
  font-variant-numeric: tabular-nums;
  font-size: 14px;
}

/* Toggle pill (small, only at the right) */
#ll-pills-ui .ll-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
}

#ll-pills-ui .ll-toggle-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#ll-pills-ui .ll-toggle-pill {
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--ll-border);
  background: #fff;
  position: relative;
}

#ll-pills-ui .ll-toggle-pill::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--ll-border);
  transition: transform 140ms ease, background 140ms ease;
}

#ll-pills-ui .ll-toggle-input:checked+.ll-toggle-pill {
  border-color: var(--ll-accent);
}

#ll-pills-ui .ll-toggle-input:checked+.ll-toggle-pill::after {
  background: var(--ll-accent);
  transform: translateX(20px);
}

/* Disabled rows */
#ll-pills-ui .ll-facet-row.is-disabled .ll-facet-row-btn {
  opacity: 0.45;
  cursor: not-allowed;
}

#ll-pills-ui .ll-facet-row.is-disabled .ll-toggle-pill::after {
  background: var(--ll-border);
}

/* Panel footer */
#ll-pills-ui .ll-filters-panel-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--ll-border);
}

/* Sort dropdown */
#ll-pills-ui .ll-sort {
  position: relative;
  width: 100%;
}

#ll-pills-ui .ll-sort-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  padding: 10px 12px;
  font-weight: 800;
  cursor: pointer;
}

#ll-pills-ui .ll-sort-caret {
  color: var(--ll-muted);
}

#ll-pills-ui .ll-sort-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  width: 100%;
  border: 1px solid var(--ll-border);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
  z-index: 50;
  overflow: hidden;
}

#ll-pills-ui .ll-sort-option {
  width: 100%;
  border: 0;
  background: transparent;
  padding: 10px 1rem;
  text-align: left;
  cursor: pointer;
  font-weight: 800;
}

#ll-pills-ui .ll-sort-option:hover {
  background: var(--ll-bg);
}

#ll-pills-ui .ll-sort-option.is-active {
  background: var(--bg);
}

/* Search box (custom, no datalist) */
#ll-pills-ui .ll-searchbox {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  border: 2px solid var(--border);
  background: #fff;
  border-radius: 12px;
  padding: 8px 10px;
  min-width: min(520px, 100%);
  background: var(--surface);
}

#ll-pills-ui .ll-searchbox-icon {
  color: var(--text);

  font-weight: 900;
  display: grid;
  place-items: center;
}

#ll-pills-ui .ll-searchbox-icon svg {
  fill: var(--text);
}


#ll-pills-ui .ll-searchbox-input {
  border: 0;
  outline: none;
  background: transparent;
  padding: 3px 0 2px 0;
  font-weight: 750;
  color: var(--text);
  width: 100%;

}

#ll-pills-ui .ll-searchbox-input::placeholder {
  color: var(--ll-muted);
  font-weight: 700;
}

#ll-pills-ui .ll-searchbox-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  border-radius: 999px;
  padding: 1px 12px;
  font-weight: 900;
  cursor: pointer;
  white-space: nowrap;
}

#ll-pills-ui .ll-searchbox-btn.is-reset {
  border-color: var(--ll-accent);
}

#ll-pills-ui .ll-searchbox:focus-within {
  border-color: var(--ll-accent);
  box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.12);
}

#ll-pills-ui .ll-searchbox-hint {
  min-height: 18px;
  font-size: 0.85rem;
  color: var(--ll-muted);
}


/* MOBILE FILTER OVERLAY */

/* Overlay for mobile drawer */
#ll-pills-ui .ll-filters-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 49;
  /* panel uses 50 */
  opacity: 0;
  transition: opacity 220ms ease;
}

#ll-pills-ui .ll-filters-overlay.is-open {
  opacity: 1;
}

/* Mobile: filters become an off-canvas drawer */
@media screen and (max-width: 768px) {
  #ll-pills-ui .ll-filters-panel {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    /* full screen */
    height: 100dvh;

    margin: 0;
    border-radius: 0;
    /* full screen drawer */
    transform: translateX(-105%);
    transition: transform 260ms ease;

    /* OVER 9000!! */
    z-index: 9001;

    /* Make header/body/footer behave nicely */
    display: grid;
    grid-template-rows: auto 1fr auto;
    overflow: hidden;
    /* body scrolls */
  }

  #ll-pills-ui .ll-filters-panel.is-open {
    transform: translateX(0);
  }

  /* Make the middle area scroll */
  #ll-pills-ui .facetFilteringGrid {
    overflow: auto;
    padding: 12px;
    display: block;
    /* stack sections on mobile */
  }

  /* Optional: sticky header/footer in the drawer */
  #ll-pills-ui .ll-filters-panel-header {
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
    padding: 12px;
    margin-bottom: 0;
  }

  #ll-pills-ui .ll-filters-panel-footer {
    position: sticky;
    bottom: 0;
    background: #fff;
    z-index: 1;
    padding: 12px;
  }
}

/* Lock background scroll when drawer is open */
body.ll-no-scroll {
  overflow: hidden;
}