/* STORIES INDEX PAGE */


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

/* Single Story page for specific LEVEL A1/A2/B1/B2 etc */
.story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  padding: 0;
}

.story-grid .story-item {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
  transition: transform 0.5s;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 4px 4px 4px rgba(43, 23, 23, 0.468);
  height: 500px;
  background: white;
}

.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.6);
  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;
}

/* Fix for cover image and image display */
.story-grid .story-item .cover_image {
  flex: 1;
  position: relative;
  /* Keep this for absolute positioned children */
  background-image: url("/images/no-default-cover.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Make the image fill the container using absolute positioning */
.story-grid .story-item .storyItemImage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.blog-story-grid.story-grid .story-item .storyItemImage {
  position: relative;
}

.story-grid .story-item:hover {
  transform: scale(1.05);
  box-shadow: 4px 4px 15px rgba(43, 23, 23, 0.468);
}

.story-grid .story-item a {
  text-decoration: none;
}

.story-grid .story-item h2 {
  text-decoration: none;
  background: white;
  text-align: center;
  padding: 5px;
  color: black;
  /* min-height:92px; */
  font-size: 1.25rem;
  line-height: 35px;
  margin-bottom: 0;
}

.cover_image {
  position: relative;
}

.story-grid .showChapterProgress {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  background: white;
  font-size: 14px;
  font-weight: semi-bold;
  font-weight: bold;
  padding: 5px 15px;
  transform: translate(-50%, -50%);
  border-radius: 5px;
  opacity: 0.80;
}

.story-grid .showChapterProgress p {
  margin: 0;
}

.story-grid .showChapterProgress p.totalPages {
  margin-top: -10px;
}

.story-grid .story-meta {
  position: absolute;
  top: 5px;
  left: 5px;
}

.story-meta .item-level {
  color: white;
  font-weight: bold;
  border-radius: 5px;
  width: fit-content;
  padding: 0 10px;
  margin-top: 5px;
}

.story-grid .wordCount {
  padding: 0 5px;
  color: white;
  display: flex;
  align-content: center;
  gap: 5px;
  font-weight: bold;
  font-size: 16px;
  border-radius: 5px;
  margin-bottom: 5px;
}

.story-grid .storyLanguageFlags {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(255, 255, 255, 0.461);
  padding: 5px 10px;
  border-radius: 5px;
}

.story-grid .story-meta svg {
  height: 28px;
  width: 28px;
}

.genres {
  position: absolute;
  bottom: 5px;
  left: 5px;
  display: flex;
  flex-wrap: wrap-reverse;
  gap: 5px;
}

.genres .badge {
  padding: 0 5px;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  font-size: 14px;
}

.clarificationTitlea1 {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  margin-top: -1rem;
}

.storyChapter .clarificationTitlea1 {
  margin-top: 0;
}

.story-meta {
  text-align: center;
}

.story-grid .story-summary {
  padding: 5px 10px;
}

.story-grid .story-summary p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4rem;
}

.buttonReadThisStory {
  text-align: center;
}

.story-grid .story-item .buttonReadThisStory {
  padding: 15px;
  color: white;
  font-weight: bold;
  margin: 0;
}

.type .itemType {
  margin: 0;
  text-align: center;
  font-weight: bold;
  color: white;
  font-size: 18px;
}

.story-item a {
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Make the link fill the entire container */
  text-decoration: none;
  /* Remove default link underline */
  color: black;
}

@media (max-width: 1024px) {
  .story-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 2 columns on tablets */
  }
}

@media (max-width: 768px) {
  .story-grid {
    grid-template-columns: 1fr;
    /* 1 column on mobile */
  }
}


/* 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;
    }
  }
}

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 */
.majorContentSection: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;
}

/* 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;
}

/* Image container matches paragraph height automatically */
/* Base styles - combined unique properties */
.majorContentSection {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-flow: columns;
  gap: 50px;
  align-items: stretch;
  /* Makes both columns equal height */
}

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

/* Tablet breakpoint - only once */
@media screen and (max-width: 1240px) {
  .majorContentSection {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    grid-auto-flow: row;
    gap: 25px;
  }

  .imageDiv {
    height: 500px;
    /* Fixed height on tablet */
  }
}

/* Mobile breakpoint - only once */
@media screen and (max-width: 768px) {
  .imageDiv {
    height: 300px;
    /* Fixed height on mobile */
  }
}

/* Additional styles (keep these) */
.story-image.fallback-image {
  opacity: 0.9;
}


.majorContentSection.sectionReverse .storyParagraph:first-of-type {
  margin-top: 0px;
}

.majorContentSection.sectionReverse .audio-container {
  display: block;
}

.majorContentSection:not(:has(.imageDiv)) {
  grid-template-columns: 1fr;
}

.majorContentSection.sectionReverse .imageDiv {
  order: -1;

}

.majorContentSection.sectionReverse {
  margin-top: 25px;
}

.imageDiv img {
  height: 100%;
  border-radius: 10px;
  object-fit: cover;
  max-height: 900px;
  width: 100%;
}

/* } */

.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;
}

/* Animation triggers when .animate class is added */
.contentSection.storySuccess,
#grid-column-keuzeKaartje.animate {
  animation: fadeIn 1.5s ease-in forwards;
}

.contentSection.storySuccess h2,
.contentSection.storySuccess a {
  color: green;
}

.underline {
  text-decoration: underline;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(450px);
  }

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



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

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



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

/* Drag & Drop Exercise Styles */

.drag-drop-container {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.drag-drop-exercise {
  /* Touch handling for mobile */
  touch-action: manipulation;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  position: relative;
  overflow: hidden;
}

/* Words Bank */
.words-bank {
  margin-bottom: 30px;
  padding: 15px;
  background-color: #fff;
  border: 2px dashed #ccc;
  border-radius: 8px;
  /* Allow vertical scrolling in word bank if needed */
  touch-action: pan-y;
}

.words-bank h4 {
  margin: 0 0 15px 0;
  color: #666;
  font-size: 16px;
}

.word-bank-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Draggable Word Items */
.word-item {
  /* Styling */
  padding: 8px 16px;
  background-color: #007bff;
  color: white;
  border-radius: 20px;
  font-weight: 500;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  display: inline-block;
  margin: 4px;

  /* Interactive */
  cursor: grab;
  transition: all 0.2s ease;

  /* Touch handling */
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.word-item:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.word-item:active {
  cursor: grabbing;
}

/* Word item states */
.word-item.dragging {
  opacity: 0.7;
  cursor: grabbing;
  transform: rotate(5deg) scale(1.05);
}

.word-item.dragging-source {
  opacity: 0.3;
  transform: scale(0.95);
}

.word-item.used {
  background-color: #6c757d;
  cursor: not-allowed;
  opacity: 0.6;
}

/* Sentence Area */
.sentence-area {
  margin-bottom: 20px;
}

.sentence-area h4 {
  margin: 0 0 15px 0;
  color: #333;
  font-size: 16px;
}

.sentence {
  font-size: 18px;
  line-height: 1.6;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  min-height: 60px;
}

/* Drop Zones */
.drop-zone {
  display: inline-block;
  min-width: 80px;
  min-height: 30px;
  padding: 5px 10px;
  margin: 0 3px;
  border: 2px dashed #007bff;
  border-radius: 6px;
  background-color: #f8f9fa;
  text-align: center;
  vertical-align: middle;
  transition: all 0.3s ease;
  position: relative;
}

.drop-zone.drag-over {
  background-color: #007bff;
  border-color: #d7e9fb;
  transform: scale(1.05);
  border-style: solid;
}

.drop-zone.filled {
  background-color: #d4edda;
  border-color: #28a745;
  color: #155724;
  font-weight: 500;
  border-style: solid;
}

.drop-zone.error {
  background-color: #f8d7da;
  border-color: #dc3545;
  border-style: solid;
  animation: shake 0.5s ease-in-out;
}

@keyframes shake {

  0%,
  100% {
    transform: translateX(0);
  }

  25% {
    transform: translateX(-5px);
  }

  75% {
    transform: translateX(5px);
  }
}

/* Progress and Controls */
.progress-text {
  margin: 15px 0;
  font-size: 14px;
  color: #666;
}

.progress-counter {
  font-weight: 500;
}

.drag-drop-controls {
  margin-top: 15px;
}

.reset-exercise {
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 4px;
}

/* Dragging State - Prevent Scrolling */
body.dragging {
  overflow: hidden !important;
  touch-action: none !important;
  -webkit-user-select: none;
  user-select: none;
}

/* Visual Drag Clone (follows finger/cursor) */
.word-item.dragging-clone {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  background: #007bff;
  border-color: #2196f3;
  z-index: 9999;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .word-bank-items {
    justify-content: center;
  }

  .sentence {
    font-size: 16px;
  }

  .drop-zone {
    min-width: 60px;
    font-size: 14px;
  }

  .word-item {
    padding: 6px 12px;
    font-size: 14px;
  }
}


/* Geen Grid bij sectie met image */
.majorContentSection.sectionReverse:has(.imageDiv) .controls-row {
  display: grid;
  grid:
    'audioPlayer'
    'audioSpeed'
    'button';

  .translate-btn {
    grid-area: button;
  }

  .audio-section {
    grid-area: audioPlayer;
  }

  .speed-controls {
    grid-area: audioSpeed;
  }
}

@media screen and (max-width: 768px) {
  body .mainPage .controls-row button.translate-btn {
    display: flex;
    margin: 0;
  }
}


grammar-tips-btn span {
  line-height: 22px;
}

@media screen and (min-width: 768px) {
  .majorContentSection.sectionReverse:has(.imageDiv) .controls-row {
    display: grid;
    grid:
      'audioPlayer audioPlayer'
      'audioSpeed audioSpeed'
      'grammarTips translate';

    grid-template-columns: 1fr 1fr;

    .grammar-tips-btn {
      grid-area: grammarTips;
      width: 100%;
      background: rgb(250, 250, 250);
    }

    .translate-btn {
      grid-area: translate;
      width: 100%;
      display: flex;
      height: 100%;
      font-weight: 600;
      padding: 9px;
      background: rgb(250, 250, 250);
      border-radius: 5px;
      border: 2px solid transparent;
    }


    .audio-section {
      grid-area: audioPlayer;
    }

    .speed-controls {
      grid-area: audioSpeed;
    }
  }
}

@media screen and (min-width: 768px) and (max-width: 1240px) {
  .majorContentSection.sectionReverse:has(.imageDiv) .controls-row {
    display: grid;
    grid:
      'audioPlayer audioSpeed'
      'grammarTips translate';

    grid-template-columns: 1fr 1fr;

    .grammar-tips-btn {
      grid-area: grammarTips;
      width: 100%;
      background: rgb(250, 250, 250);
    }

    .translate-btn {
      grid-area: translate;
      width: 100%;
      display: flex;
      height: 100%;
      font-weight: 600;
      padding: 9px;
      background: rgb(250, 250, 250);
      border-radius: 5px;
    }


    .audio-section {
      grid-area: audioPlayer;
    }

    .speed-controls {
      grid-area: audioSpeed;
    }
  }
}

button.translate-btn {
  display: flex;
  align-items: center;
  margin: auto;
  border: 2px solid transparent;
  text-align: center;
  justify-content: center;
  gap: 15px;
  padding: 7px;
  font-weight: 600;
  border: 0;
  background: white;
}

/* Styling audio controls and show paragraph */

@media screen and (max-width: 768px) {

  .controls-row {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto auto;
    grid-auto-flow: row;
    gap: 15px;
    align-items: center;
  }
}


@media screen and (min-width: 768px) {
  .controls-row {
    display: grid;
    grid:
      'audioPlayer audioSpeed'
      'grammarTips translate';

    grid-template-columns: 1fr 1fr;
    gap: 15px;

    .grammar-tips-btn {
      grid-area: grammarTips;
      width: 100%;
      background: rgb(250, 250, 250);
    }

    .translate-btn {
      grid-area: translate;
      width: 100%;
      display: flex;
      height: 100%;
      font-weight: 600;
      padding: 9px;
      border: 0;
      background: white;
      border-radius: 5px;
    }

    .translate-btn svg {
      width: 30px;
      height: 30px;
      stroke: 2px;
    }

    .audio-section {
      grid-area: audioPlayer;
    }

    .speed-controls {
      grid-area: audioSpeed;
    }
  }
}



.translate-btn {
  margin-top: 0;
}

.paragraph-controls {
  background: #e8eff7;
  /* background:rgba(178, 34, 34, 0.1); */
  padding: 10px;
  margin-top: 5px;
  border-radius: 5px;
}

.paragraph-controls.background-a1 {
  background: rgba(var(--entryLevel-rgb), 0.15);
}

.paragraph-controls.background-a2 {
  background: rgba(var(--beginnerLevel-rgb), 0.15);
}

.paragraph-controls.background-b1 {
  background: rgba(var(--intermediateLevel-rgb), 0.15);
}

.paragraph-controls.background-b2 {
  background: rgba(var(--upperIntermediateLevel-rgb), 0.15);
}


/* Translation dropdown/slide-down content */
.translation-content {
  background: white;
  border: 1px solid #e9ecef;
  border-top: none;
  /* Connects seamlessly to the button row above */
  padding: 15px;
  display: none;
  /* Hidden by default, jQuery slideToggle handles visibility */
  border-radius: 8px;
  /* Rounded bottom corners only */
  margin: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Subtle shadow for depth */
  position: relative;
  z-index: 10;
}

.translation-content p {
  margin: 0;
  color: #666;
  line-height: 1.5;
  font-style: italic;
  font-size: 16px;
  padding: 0;
  background: transparent;
  border: none;
}

/* Optional: Add a subtle animation when content appears */
.translation-content {
  transition: opacity 0.3s ease-in-out;
}

/* Make the translation area span full width of the grid */
.translation-content {
  grid-column: 1 / -1;
  /* Spans all grid columns */
}



/* Optional: Hover effect on translation content */
.translation-content:hover {
  background: #f8f9fa;
}

/* Make sure text is readable and well-spaced */
.translation-content p {
  line-height: 1.6;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 18px;
  text-align: left;
}

/* For longer translations, add max-height and scroll */
.translation-content {
  overflow-y: auto;
  margin-top: 15px;
}


.translation-content:hover::after {
  opacity: 1;
}

/* PLAY SPEED CONTROLS */
.speed-controls {
  display: flex;
  gap: 8px;
  margin-top: 0px;
  justify-content: space-around;
}


.speed-btn {
  background: #ffffff;
  border: 2px solid #dee2e6;
  border-radius: 20px;
  padding: 0px 10px;
  font-size: 14px;
  font-weight: 600;
  color: #495057;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 30px;
  text-align: center;
  margin-top: 0px;
  width: fit-content;
}

@media screen and (max-width: 768px) {
  .speed-btn {
    padding: 0 10px;
  }

}


.speed-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 123, 255, 0.2);
}



.audio-container {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  padding: 10px;
  margin-top: 0px;
  /* margin-top: 10px; */
  /* margin-bottom:20px; */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;

}

.story-audio {
  width: 100%;
  height: 35px;
  place-self: center;
  border-radius: 5px;
}


.translateParagraphAndAudioDiv {
  background: rgb(225, 232, 238);
  padding: 10px;
  border-radius: 5px;
  display: grid;
  grid-auto-flow: row;
  row-gap: 10px;
  margin-top: 15px;
}

div.access-badge {
  text-align: center;
  margin-bottom: 5px;
  font-weight: bold;
}

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

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

@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;
}

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

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

/* STYLES FOR RIGHT ANSWERS */

.correct-answers-section {
  margin-bottom: 2rem;
}

.correct-answers-dropdown {
  background-color: #e8f5e9;
  border: 1px solid #4caf50;
  border-radius: 8px;
  padding: 1rem;
}

.correct-answers-summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  color: #2e7d32;
}

.correct-answers-summary::-webkit-details-marker {
  display: none;
}

.correct-answers-dropdown[open] .summary-icon {
  transform: rotate(180deg);
}

.summary-icon {
  transition: transform 0.3s ease;
}

.correct-answers-content {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #a5d6a7;
}

.correct-answers-content .form-group {
  background-color: white;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border-radius: 4px;
}

.correct-answers-content input:disabled,
.correct-answers-content select:disabled {
  background-color: #ffffff;
  cursor: not-allowed;
}

.drag-drop-completed {
  padding: 0.5rem;
  background-color: #ffffff;
  border: 1px solid #4caf50;
  border-radius: 4px;
}

.correct-answers-section .help-block {
  display: none;
}

.contentSection1Rem {
  margin-top: 1rem;
}

.contentSection0Rem {
  margin-top: 0rem;
}

/* Base state for locked chapters */
.not-accessible-chapter {
  opacity: 0.6;
  pointer-events: auto;
  /* Enable for hover effect */
  cursor: not-allowed;
  position: relative;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

/* Hover state - slightly brighten */
.not-accessible-chapter:hover {
  opacity: 0.75;
  filter: grayscale(80%);
}

/* Lock icon overlay - centered */
.not-accessible-chapter::after {
  content: "🔒";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 35px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.not-accessible-chapter:hover::after {
  opacity: 0.9;
}

/* Tooltip on hover */
.not-accessible-chapter::before {
  content: attr(data-unlock-message);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% - 60px)) scale(0.9);
  /* Position above center */
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 10;
  pointer-events: none;
}

.not-accessible-chapter:hover::before {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, calc(-50% - 60px)) scale(1);
}

/* Style specific elements within locked chapters */
.not-accessible-chapter .buttonReadThisStory {
  background-color: #ccc;
  color: #666;
}

.not-accessible-chapter .cover_image {
  filter: grayscale(100%);
}

/* Prevent actual clicking on links inside */
.not-accessible-chapter a {
  pointer-events: none;
}

/* Completed chapters - subtle grayscale but still clickable */
.completed-chapter {
  filter: grayscale(80%);
  opacity: 0.8;
  transition: all 0.3s ease;
}

.completed-chapter:hover {
  filter: grayscale(60%);
  opacity: 0.9;
}

/* Current chapter - full color, stands out */
.current-chapter {
  /* No filter, full vibrancy */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: scale(1.02);
}

/* STORY BACKGROUND POSITION */

.hero-background {
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 400px;
}

/* Desktop styles */
@media (min-width: 768px) {
  #hero-background.hero-background[data-crop-desktop="top-left"] {
    background-position: left top !important;
  }

  #hero-background.hero-background[data-crop-desktop="top"] {
    background-position: center top !important;
  }

  #hero-background.hero-background[data-crop-desktop="top-right"] {
    background-position: right top !important;
  }

  #hero-background.hero-background[data-crop-desktop="center-left"] {
    background-position: left center !important;
  }

  #hero-background.hero-background[data-crop-desktop="center"] {
    background-position: center center !important;
  }

  #hero-background.hero-background[data-crop-desktop="center-right"] {
    background-position: right center !important;
  }

  #hero-background.hero-background[data-crop-desktop="bottom-left"] {
    background-position: left bottom !important;
  }

  #hero-background.hero-background[data-crop-desktop="bottom"] {
    background-position: center bottom !important;
  }

  #hero-background.hero-background[data-crop-desktop="bottom-right"] {
    background-position: right bottom !important;
  }
}

/* Mobile styles */
@media (max-width: 767px) {
  #hero-background.hero-background[data-crop-mobile="top-left"] {
    background-position: left top !important;
  }

  #hero-background.hero-background[data-crop-mobile="top"] {
    background-position: center top !important;
  }

  #hero-background.hero-background[data-crop-mobile="top-right"] {
    background-position: right top !important;
  }

  #hero-background.hero-background[data-crop-mobile="center-left"] {
    background-position: left center !important;
  }

  #hero-background.hero-background[data-crop-mobile="center"] {
    background-position: center center !important;
  }

  #hero-background.hero-background[data-crop-mobile="center-right"] {
    background-position: right center !important;
  }

  #hero-background.hero-background[data-crop-mobile="bottom-left"] {
    background-position: left bottom !important;
  }

  #hero-background.hero-background[data-crop-mobile="bottom"] {
    background-position: center bottom !important;
  }

  #hero-background.hero-background[data-crop-mobile="bottom-right"] {
    background-position: right bottom !important;
  }
}

.grammar-tips-btn.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  /* Prevents clicks */
}

/* Optional: different mascot image for disabled state */
.grammar-tips-btn.disabled .grammar-btn-mascot {
  filter: grayscale(100%);
}

/* Grammar tips button */
.grammar-tips-btn {
  color: black;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.3s;
  font-size: 14px;
  font-weight: bold;
  font-size: 16px;
  background: white;
}


.grammar-icon {
  width: 20px;
  height: 20px;
}

/* Grammar tips content panel */
.grammar-tips-content {
  background: white;
  border: 1px solid;
  border-radius: 8px;
  padding: 20px;
  margin-top: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-left: 4px solid #007bff;
  border-right: 4px solid #007bff;
}

.grammar-tips-content.button-a1,
.translation-content.button-a1 {
  border-top: 0;
  border-bottom: 0;
  border-right: 4px solid var(--entryLevel);
  border-left: 4px solid var(--entryLevel);
}

.grammar-tips-content.button-a2,
.translation-content.button-a2 {
  border-top: 0;
  border-bottom: 0;
  border-left: 4px solid var(--beginnerLevel);
  border-right: 4px solid var(--beginnerLevel);
}

.grammar-tips-content.button-b1,
.translation-content.button-b1 {
  border-top: 0;
  border-bottom: 0;
  border-left: 4px solid var(--intermediateLevel);
  border-right: 4px solid var(--intermediateLevel);
}

.grammar-tips-content.button-b2,
.translation-content.button-b2 {
  border-top: 0;
  border-bottom: 0;
  border-left: 4px solid var(--upperIntermediateLevel);
  border-right: 4px solid var(--upperIntermediateLevel);
}

.grammar-tip-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* MAascotte in the button bar */
.grammar-btn-mascot {
  width: 60px;
}


/* Mascotte in de opengeklapte div */
.grammar-mascot {
  width: 60px;

}

.grammar-tip-title {
  flex: 1;
  margin: 0;
  font-size: 18px;
  color: #333;
}

.grammar-tip-nav {
  display: flex;
  align-items: center;
}

.grammar-tip-nav button {
  background: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  cursor: pointer;
  transition: all 0.2s;
}

.grammar-tip-nav button:hover:not(:disabled) {
  background: #f0f0f0;
}

.grammar-tip-nav button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.grammar-tip-counter {
  font-size: 14px;
  color: #666;
  min-width: 60px;
  text-align: center;
}

p.grammar-tip-explanation {
  color: #444;
  line-height: 1.6;
  margin: 0 0 12px 0;
  font-size: 18px;
}

.grammar-tip-examples {
  /* background: white; */
  border-radius: 6px;
  padding: 12px 16px;
  margin-top: 12px;
}

.button-a1 .grammar-tip-examples {
  color: var(--entryLevel);
}

.button-a2 .grammar-tip-examples {
  color: var(--beginnerLevel);
}

.button-b1 .grammar-tip-examples {
  color: var(--intermediateLevel);
}

.button-b2 .grammar-tip-examples {
  color: var(--upperIntermediateLevel);
}

.grammar-examples-list {
  margin: 8px 0 0 20px;
  padding: 0;
}

.grammar-examples-list li {
  margin: 4px 0;
  color: #666;
  font-style: italic;
}

/* Highlighting */
.word.grammar-highlightable.grammar-active {
  background-color: #ffeb3b;
  color: white;
  font-weight: 600;
  padding: 2px 5px;
  margin: 0px -3px;
  border-radius: 3px;
  transition: all 0.3s;
}

.buttonForContent-a1 .word.grammar-highlightable.grammar-active {
  background-color: var(--entryLevel);

}

.buttonForContent-a2 .word.grammar-highlightable.grammar-active {
  background-color: var(--beginnerLevel);

}

.buttonForContent-b1 .word.grammar-highlightable.grammar-active {
  background-color: var(--intermediateLevel);

}

.buttonForContent-b2 .word.grammar-highlightable.grammar-active {
  background-color: var(--upperIntermediateLevel);
}

/* Mobile responsive */
@media (max-width: 768px) {
  .controls-row {
    flex-wrap: wrap;
    gap: 10px;
  }

  .grammar-tips-btn {
    flex: 1;
    justify-content: center;
  }

  .grammar-tip-header {
    flex-wrap: wrap;
  }

  .grammar-tip-title {
    width: 100%;
    margin-bottom: 10px;
  }
}

/* CHECKBOXES IN BOOK OVERVIEW */

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

.pdf-options-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 25px;
  border: 1px solid #e0e0e0;
  display: flex;
  justify-content: space-between;
}

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

.pdf-options-row {
  display: flex;
  gap: 25px;
  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+.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);
}

/* Tooltip Styles */
.option-text::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background-color: #333;
  color: white;
  font-size: 13px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  pointer-events: none;
  margin-bottom: 8px;
  z-index: 10;
  max-width: 250px;
  white-space: normal;
  text-align: center;
}

/* Tooltip arrow */
.option-text::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #333;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
  margin-bottom: 2px;
  z-index: 10;
}

/* Show tooltip on hover */
.option-text:hover::before,
.option-text:hover::after {
  opacity: 1;
  visibility: visible;
}

/* 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;
}

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

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

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

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

/*  */
/* 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);
}

/* 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;
}

/* ===================================
   Enhanced Verb & Translation Tooltip Styles
   Version: 3.0 - Flexible list-based layout
   Description: Uses ul/li structure for better width handling
   =================================== */

/* Enhanced tooltip for verbs - flexible width */
.tooltip.has-verb-table {
  width: max-content;
  /* This is the key - let content determine width */
  min-width: 250px;
  max-width: min(90vw, 800px);
  height: auto;
  padding: 16px 40px 16px 16px;
  white-space: normal;

  /* Override base tooltip grid */
  display: block !important;

  /* Default: tooltip ABOVE the word */
  bottom: 120%;
  top: auto;
}

/* First section: tooltip BELOW the word */
/* .majorContentSection:first-of-type .tooltip {
  bottom: auto;
  top: 138%;
} */

.majorContentSection:first-of-type .tooltip.has-verb-table {
  bottom: auto;
  top: 138%;
}

/* Mobile max width */
@media (max-width: 768px) {
  .tooltip.has-verb-table {
    max-width: 90vw;
  }
}

/* Simple tooltip (non-verbs) - uses existing styles */
.tooltip:not(.has-verb-table) .tooltip-translation {
  font-weight: 500;
  font-size: 16px;
  color: #fff;
  display: block;
  margin-right: 15px;
}

/* Wrapper for side-by-side content in verb tooltips */
.tooltip-content-wrapper {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  color: #fff;
}

/* Left side - translation */
.tooltip-translation-side {
  flex: 0 0 auto;
  font-weight: bold;
  font-size: 16px;
  padding-right: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  min-width: 80px;
  display: flex;
  align-items: center;
  color: #fff;
}

/* Right side - verb conjugations */
.tooltip-verb-side {
  flex: 1;
}

/* Verb section styling */
.verb-section {
  font-size: 13px;
  color: #fff;
}

.verb-header {
  font-weight: bold;
  color: #fff;
  margin-bottom: 8px;
  font-size: 14px;
  text-align: left;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Conjugation list - replaces table */
.verb-conjugation-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.verb-conjugation-list li {
  padding: 3px 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  /* Reduced gap */
  white-space: nowrap;
  flex-wrap: nowrap;
  /* Prevent wrapping within a line */
}

/* Person label */
.conjugation-person {
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  /* min-width: 40px; */
  /* Reduced from 45px */
  text-align: right;
  flex-shrink: 0;
}

/* Conjugated form */
.conjugation-form {
  color: rgb(245, 245, 245);
  font-weight: 500;
  flex-shrink: 0;
}

/* Translation */
.conjugation-trans {
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  font-size: 12px;
  white-space: normal;
  /* Allow wrapping for translations if needed */
}

/* Highlight current form */
.verb-conjugation-list .current-form {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 2px 4px;
  margin: -2px -4px;
}

.verb-conjugation-list .current-form .conjugation-form {
  font-weight: bold;
  text-decoration: underline;
  color: #7bc57b;
}

/* Default arrow for tooltips ABOVE the word (pointing down) */
.tooltip::after,
.tooltip.has-verb-table::after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 8px;
  border-style: solid;
  border-color: #000000 transparent transparent transparent;
}

/* First section - tooltip BELOW word with upward arrow */
.majorContentSection:first-of-type .tooltip,
.majorContentSection:first-of-type .tooltip.has-verb-table {
  top: calc(100% + 5px);

}

.majorContentSection:first-of-type .tooltip::after,
.majorContentSection:first-of-type .tooltip.has-verb-table::after {
  /* Move arrow to top of tooltip */
  bottom: auto;
  top: -15px;
  /* Invert the triangle to point upward */
  border-color: transparent transparent #000000 transparent;
}

/* Verb word indicator */
.word.has-verb {
  cursor: pointer;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .tooltip.has-verb-table {
    width: auto;
    /* Override max-content on mobile */
    max-width: 95vw;
    min-width: 280px;
    left: 50%;
    transform: translateX(-50%);
  }

  /* First section on mobile - ensure tooltip stays below */
  .majorContentSection:first-of-type .tooltip,
  .majorContentSection:first-of-type .tooltip.has-verb-table {
    position: fixed;
    top: auto;
  }

  /* Stack vertically on mobile */
  .tooltip-content-wrapper {
    flex-direction: column;
    gap: 10px;
  }

  .tooltip-translation-side {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-right: 0;
    padding-bottom: 8px;
    text-align: center;
    width: 100%;
    min-width: auto;
    white-space: normal;
    /* Allow wrapping on mobile */
  }

  /* Stack vertically on mobile */
  .tooltip-content-wrapper {
    flex-direction: column;
    gap: 10px;
  }

  .tooltip-translation-side {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-right: 0;
    padding-bottom: 8px;
    text-align: center;
    width: 100%;
    min-width: auto;
  }

  .verb-header {
    text-align: center;
  }

  /* Allow wrapping on very small screens */
  .verb-conjugation-list li {
    flex-wrap: wrap;
  }

  /* .conjugation-trans {
    flex-basis: 100%;
    margin-left: 53px; 
  } */
}

/* Level-specific verb highlights
.buttonForContent-a1 .word.has-verb {
  border-bottom-color: var(--entryLevel);
}

.buttonForContent-a2 .word.has-verb {
  border-bottom-color: var(--beginnerLevel);
}

.buttonForContent-b1 .word.has-verb {
  border-bottom-color: var(--intermediateLevel);
}

.buttonForContent-b2 .word.has-verb {
  border-bottom-color: var(--upperIntermediateLevel);
} */

/* Ensure tooltips work with existing animations */
.word[aria-expanded="true"] .tooltip.has-verb-table {
  visibility: visible;
  animation: tooltipFadeIn 0.25s ease-in-out forwards;
}

.word[aria-expanded="false"] .tooltip.has-verb-table {
  animation: tooltipFadeOut 0.25s ease-in-out forwards;
  visibility: visible;
}

.word[aria-expanded="false"] .tooltip.has-verb-table.fade-complete {
  visibility: hidden;
}



/* Ensure close button works with verb tooltips */
.tooltip.has-verb-table .close-btn {
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  line-height: 1;
}

/* Optional: Add subtle hover effect on conjugation rows */
.verb-conjugation-list li:hover {
  background-color: rgba(255, 255, 255, 0.05);
  margin-left: -4px;
  margin-right: -4px;
  padding-left: 4px;
  padding-right: 4px;
}

/* Viewport edge detection - optional JavaScript can add these classes */
.tooltip.has-verb-table.near-top {
  bottom: auto;
  top: calc(100% + 15px);
}

.tooltip.has-verb-table.near-top::after {
  bottom: auto;
  top: -15px;
  border-color: transparent transparent #000000 transparent;
}

/* Print styles */
@media print {
  .word.has-verb {
    border-bottom: 1px solid #000 !important;
  }
}

/* Handle very long conjugations */
.tooltip-content-wrapper {
  max-width: 100%;
  width: fit-content;
  /* Let content determine width */
}

.conjugation-form {
  word-break: break-word;
  hyphens: auto;
}

/* For very long translations like "non hanno mai saputo" */
.tooltip.has-verb-table .tooltip-translation-side {
  max-width: none;
  /* Remove any max-width constraints */
  flex: 0 1 auto;
  /* Allow it to grow/shrink as needed */
}

/* BLUR */
/* Tooltip z-index for mobile/tablet */
@media (max-width: 1240px) {
  .word .tooltip {
    z-index: 999;
    max-width: 90vw;
    /* Prevent tooltip from being wider than viewport */
    max-height: 90vh;
    /* Prevent tooltip from being taller than viewport */
    overflow-y: auto;
    /* Allow scrolling if content is too tall */
  }
}

/* Style for the overlay (already added via JS, but you might want to customize) */
.tooltip-overlay {
  backdrop-filter: blur(2px);
  /* Optional: adds a blur effect */
}


/* Enhanced overlay styling (only appears for verb tooltips) */
.tooltip-overlay {
  /* Smooth fade-in animation */
  animation: overlayFadeIn 0.3s ease-out;

  /* Optional: Add a subtle pattern or gradient */
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);

  /* Ensure it's clickable */
  cursor: pointer;
}

@keyframes overlayFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Scale animation for verb tooltips appearing */
@media (max-width: 1240px) {
  .word[data-verb] .tooltip {
    animation: none;
    /* Remove default animation */
  }

  .word[data-verb][aria-expanded="true"] .tooltip[style*="position: fixed"] {
    animation: tooltipScaleIn 0.3s ease-out forwards;
  }
}

@keyframes tooltipScaleIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.9);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}



@media screen and (min-width:768px) and (max-width: 1240px) {
  .word[data-verb] .tooltip .close-btn {
    margin-left: 5px;
    margin-right: -5px;
  }
}

@media screen and (min-width: 1240px) {
  .tooltip.has-verb-table .close-btn {
    top: 15px;
  }
}

/* Custom scrollbar for verb tooltips on mobile */
@media (max-width: 1240px) {
  .word[data-verb] .tooltip[style*="position: fixed"] {

    /* Webkit browsers */
    &::-webkit-scrollbar {
      width: 8px;
    }

    &::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.1);
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb {
      background: rgba(255, 255, 255, 0.3);
      border-radius: 4px;
    }

    &::-webkit-scrollbar-thumb:hover {
      background: rgba(255, 255, 255, 0.5);
    }
  }
}

/* Optional: Add visual indicator for words with verbs */
.word[data-verb] {
  position: relative;
}

/* Small indicator dot for verb words (optional) */
.word[data-verb]::before {
  content: '';
  position: absolute;
  bottom: 5px;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  opacity: 0.3;
  border-radius: 1px;
}

/* Level-specific verb indicators */
.buttonForContent-a1 .word[data-verb]::before {
  background: var(--entryLevel);
}

.buttonForContent-a2 .word[data-verb]::before {
  background: var(--beginnerLevel);
}

.buttonForContent-b1 .word[data-verb]::before {
  background: var(--intermediateLevel);
}

.buttonForContent-b2 .word[data-verb]::before {
  background: var(--upperIntermediateLevel);
}

/* NEW CSS */
/* Story image styling */
.story-image {
  width: 100%;
  height: 100%;
  background-size: cover;
  /* Or use 'contain' to show full image */
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 10px;
}

/* Alternative: use contain to ensure full image is visible */
.story-image.full-image {
  background-size: contain;
}

/* ===================================
   Audio-Synced Word Highlighting CSS
   Version: 2.1 - Simple, matches hover styles exactly
   =================================== */

/* Audio highlighting - exactly matches hover styles, no fancy colors */

/* A1 Level - Entry */
.buttonForContent-a1 .word.audio-highlighted {
  background: rgba(var(--entryLevel-rgb), 0.15);
  border-radius: 5px;
  padding: 5px 5px 5px 5px;
  margin: 0;
}

/* A2 Level - Beginner */
.buttonForContent-a2 .word.audio-highlighted {
  background: rgba(var(--beginnerLevel-rgb), 0.15);
  border-radius: 5px;
  padding: 0 5px;
  margin: 0;
}

/* B1 Level - Intermediate */
.buttonForContent-b1 .word.audio-highlighted {
  background: rgba(var(--intermediateLevel-rgb), 0.15);
  border-radius: 5px;
  padding: 0 5px;
  margin: 0;
}

/* B2 Level - Upper Intermediate */
.buttonForContent-b2 .word.audio-highlighted {
  background: rgba(var(--upperIntermediateLevel-rgb), 0.15);
  border-radius: 5px;
  padding: 0 5px;
  margin: 0;
}

/* Speaker button - positioned left of the X close button */
.tooltip-speaker-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 24px;
  padding: 0;
  /* /* position: absolute; */
  /* right: 35px; */ 
    /* Position it left of the X button which is at right: 10px */
  /* top: 50%;
  transform: translateY(-50%); */
  color: #fff;
  transition: transform 0.2s ease;
  line-height: 1;
  z-index: 1;
}

.close-btn:hover,
.tooltip-speaker-btn:hover {
  transform: scale(1.15);
}

.tooltip-speaker-btn:active {
  transform: scale(0.9);
}

/* Adjust tooltip padding to accommodate speaker button */
.tooltip {
  padding-right: 60px;
  /* Make room for both speaker and close buttons */
}

/* Ensure close button stays in its position */
.tooltip .close-btn {

  font-size: 30px;
  color: #fff;
  cursor: pointer;
  background: transparent;
  border: none;
  z-index: 1;
}

/* Remove flex from translation divs since speaker is absolutely positioned */
.tooltip-translation,
.tooltip-translation-side {
  display: block;
  /* Changed from flex */
  color: #fff;
}

/* For verb tooltips, adjust positions */
.tooltip.has-verb-table .close-btn {
  /* position: absolute;
  right: 10px; */
  /* top: 10px; */
  /* Different positioning for verb tooltips */
  transform: none;
  /* Remove translateY */
}

.tooltip.has-verb-table .tooltip-speaker-btn {
  /* right: 35px; */
  /* top: 10px; */
  /* Match close button's top position */
  transform: none;
  /* Remove translateY */
}

.tooltip.has-verb-table .close-btn:hover,
.tooltip.has-verb-table .tooltip-speaker-btn:hover {
  transform: scale(1.15);
  /* Simple scale without translateY */
}

.tooltip.has-verb-table .tooltip-speaker-btn:active {
  transform: scale(0.9);
  /* Simple scale without translateY */
}

/* Ensure tooltips appear above highlighted words */
.word.audio-highlighted .tooltip {
  z-index: 1000;
}

/* ===================================
   UNIFIED TOOLTIP STYLES 
   Version: 4.0 - Consolidated & Fixed
   =================================== */

/* ===================================
   BASE TOOLTIP STYLES
   =================================== */
.tooltip {
  position: absolute;
  z-index: 1000;
  
  /* Center horizontally */
  left: 50%;
  transform: translateX(-50%);
  
  /* Position above word by default */
  bottom: calc(100% + 10px);
  
  /* Core styling */
  background-color: #000;
  color: #fff;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  
  /* Flexible width with sensible constraints */
  width: max-content;
  min-width: 180px;
  max-width: min(500px, 90vw); /* Never wider than viewport */
  
  .tooltip-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  }

  .tooltip-controls {
    display: flex;
  }

  /* Padding - space for buttons */
  padding: 15px;
  
  /* Typography */
  font-size: 18px;
  line-height: 1.4;
  white-space: normal; /* Allow text wrapping */
  word-wrap: break-word; /* Break long words if needed */
  
  /* Initial hidden state */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* Translation text */
.tooltip-translation {
  display: block;
  font-weight: 500;
  color: #fff;
  word-wrap: break-word;
  hyphens: auto;
}

/* ===================================
   TOOLTIP BUTTONS
   =================================== */
/* Close button */
.tooltip .close-btn {
  /* position: absolute; */
  /* top: 50%; */

  /* transform: translateY(-50%); */
  background: transparent;
  border: none;
  color: #fff;
  font-size: 30px;
  margin-top:0;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  width: 35px;
  height: 35px;
  font-size: 35px;
  margin-top:-3px;
}

/* Speaker button */
.tooltip-speaker-btn {
  /* position: absolute; */
  top: 50%;
  right: 40px;
  /* transform: translateY(-50%); */
  background: transparent;
  border: none;
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
  z-index: 2;
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 15px;

}

.tooltip-speaker-btn:hover,
.close-btn:hover{
  transform: scale(1.15);
}

/* ===================================
   TOOLTIP ARROW
   =================================== */
.tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #000;
}

/* First section - tooltip BELOW word */
.majorContentSection:first-of-type .tooltip {
  bottom: auto;
  top: calc(100% + 5px);
}

.majorContentSection:first-of-type .tooltip::after {
  top: auto;
  bottom: 100%;
  border-color: transparent transparent #000 transparent;
}

/* ===================================
   VERB TOOLTIP ENHANCEMENTS
   =================================== */
.tooltip.has-verb-table {
  max-width: min(600px, 95vw);
  padding: 15px;
}

/* Verb content wrapper */
.tooltip-content-wrapper {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
}

/* Translation side */
.tooltip-translation-side {
  flex: 0 1 auto; /* Allow shrinking */
  padding-right: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.3);
  font-weight: bold;
  font-size: 16px;
  color: #fff;
  min-width: 60px;
  word-wrap: break-word;
  hyphens: auto;
}

/* Verb conjugation side */
.tooltip-verb-side {
  flex: 1 1 auto;
  min-width: 0; /* Allow shrinking */
  overflow: hidden;
  margin-right: 15px;
}

.tooltip::before,
span.tooltip::before {
  content: '';
  height: 10px;
  width: 100%;
  background: transparent;
  top: -10px;
  position: absolute;
  z-index: 35;
  display: block;
  left: 0;
}

/* Verb header */
.verb-header {
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Conjugation list */
.verb-conjugation-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.verb-conjugation-list li {
  display: flex;
  gap: 10px;
  padding: 3px 0;
  align-items: baseline;
  flex-wrap: nowrap;
}

.conjugation-person {
  flex: 0 0 auto;   /* Size based on content */
  min-width: 75px;
  text-align: right;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;

}

.conjugation-form {
  flex: 0 1 auto;
  font-weight: 500;
  color: #f5f5f5;
  font-size: 16px;
  word-break: break-word;
}

.conjugation-trans {
  flex: 1 1 auto;
  font-style: italic;
  font-size: 16 px;
  color: rgba(255, 255, 255, 0.7);
  margin-left: 4px;
  word-break: break-word;
}

/* Current form highlight */
.verb-conjugation-list .current-form {
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  padding: 2px 4px;
  margin: -2px -4px;
}

.verb-conjugation-list .current-form .conjugation-form {
  font-weight: bold;
  text-decoration: underline;
  color: #7bc57b;
}

/* ===================================
   TABLET STYLES (768px - 1240px)
   =================================== */
@media (min-width: 768px) and (max-width: 1240px) {
  .tooltip {
    max-width: min(200px, 85vw);
  }
  
  .tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
      border-top-color: transparent;
    border-top-color: #000;
  }

    /* Center verb tooltips as modals */
  .word[data-verb] .tooltip {
    /* position: fixed;
    top: 50%;
    left: 50%; */
    position:absolute;
    transform: translate(-50%, -50%);
    bottom: auto;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    max-height: 85vh;
    overflow-y: auto;
    z-index: 999;
  }
  

  
  /* Better button positioning for verb tooltips */
  .tooltip.has-verb-table .close-btn {
    top: 16px;
    right: 16px;
    transform: none;
  }
  
  .tooltip.has-verb-table .tooltip-speaker-btn {
    top: 16px;
    right: 46px;
    transform: none;
  }
}

/* ===================================
   MOBILE STYLES (<768px)
   =================================== */
@media (max-width: 768px) {
  .tooltip {
    min-width: 100px;
    max-width: calc(100vw - 20px); /* Leave some margin */
    padding: 15px 25px;
    font-size: 15px;
  }
  
  /* Smaller buttons on mobile */
  .tooltip .close-btn {
    font-size: 22px;
    right: 8px;
  }
  
  .tooltip-speaker-btn {
    font-size: 18px;
    right: 35px;
  }
  
  /* All tooltips centered on mobile for better UX */
  .word .tooltip {
    /* position: fixed;
    top: 50%;
    left: 50%; */
    position:absolute;
    transform: translate(-50%, -50%);
    bottom: auto;
    max-height: 80vh;
    overflow-y: auto;
    z-index: 999;
  }
  
  
  /* Verb tooltips - stack content vertically */
  .tooltip.has-verb-table {
    max-width: calc(100vw - 20px);
    padding: 15px;
  }
  
  .tooltip-content-wrapper {
    flex-direction: column;
    gap: 10px;
  }
  
  .tooltip-translation-side {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding-right: 0;
    padding-bottom: 8px;
    text-align: center;
    width: 100%;
  }
  
  /* Adjust button positions for mobile verb tooltips */
  .tooltip.has-verb-table .close-btn {
    top: 10px;
    right: 10px;
    transform: none;
    font-size: 30px;
  }
  
  .tooltip.has-verb-table .tooltip-speaker-btn {
    top: 10px;
    right: 40px;
    transform: none;
  }
  
  /* Smaller text in conjugations */
  .verb-conjugation-list {
    font-size: 13px;
  }
  
  .conjugation-person {
    flex: 0 0 35px;
    font-size: 12px;
  }
  
  .conjugation-form {
    font-size: 13px;
  }
  
  .conjugation-trans {
    font-size: 11px;
  }
}

/* ===================================
   SMALL MOBILE STYLES (<480px)
   =================================== */
@media (max-width: 480px) {
  .tooltip {
    max-width: calc(100vw - 10px);
    padding: 15px;
    font-size: 16px;
  }
  
  .tooltip.has-verb-table {
    max-width: calc(100vw - 10px);
  }
  
  /* Even smaller buttons */
  .tooltip .close-btn {
    .tooltip .close-btn {
      font-size: 35px;
      height: 35px;
      width: 35px;
      right: 3px;
      padding-left: 15px;
      top: -2p;
      margin-top: -2px;
    }
  }
  
  .tooltip-speaker-btn {
    font-size: 16px;
    right: 40px;
  }
  
  /* Allow wrapping for very long conjugations */
  .verb-conjugation-list li {
    flex-wrap: wrap;
    gap: 4px;
  }
  
  .conjugation-trans {
    margin-top: 2px;
  }
}

/* ===================================
   ACTIVE STATE & ANIMATIONS
   =================================== */
.word[aria-expanded="true"] .tooltip {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Smooth fade animations */
@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(5px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes tooltipModalIn {
  from {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

/* Apply animations */
.word[aria-expanded="true"] .tooltip:not([style*="position: fixed"]) {
  animation: tooltipFadeIn 0.25s ease-out forwards;
}

.word[aria-expanded="true"] .tooltip[style*="position: fixed"] {
  animation: tooltipModalIn 0.3s ease-out forwards;
}

/* ===================================
   SCROLLBAR STYLING
   =================================== */
@media (max-width: 1240px) {
  .tooltip {
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.3) rgba(255, 255, 255, 0.1);
  }
  
  .tooltip::-webkit-scrollbar {
    width: 6px;
  }
  
  .tooltip::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
  }
  
  .tooltip::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
  }
}


/* ===================================
   OVERLAY FOR MOBILE MODALS
   =================================== */
.tooltip-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(2px);
  z-index: 998;
  cursor: pointer;
  animation: overlayFadeIn 0.3s ease-out;
}

@keyframes overlayFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}



.tooltip.has-verb-table {
  display: block;
  background: #1a1a1a; /* Dark background */
  color: #fff;

}

.tooltip.has-verb-table .tooltip-top-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 5px;
  background: rgba(255, 255, 255, 0.05); /* Subtle lighter background */
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tooltip-verb-info .verb-header strong {
  text-transform: capitalize;
}

.tooltip.has-verb-table .tooltip-info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.tooltip.has-verb-table .translation-text {
  font-weight: 500;
  color: #fff;
}

.tooltip.has-verb-table .verb-form-info {
  color: #aaa;
  font-size: 0.9em;
  font-style: italic;
}

.tooltip.has-verb-table .tooltip-controls {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 16px;
}

.tooltip.has-verb-table .tooltip-speaker-btn svg,
.tooltip.has-verb-table .close-btn {
  fill: #fff;
  color: #fff;
}

.tooltip.has-verb-table .tooltip-verb-info {
  padding: 10px 5px;
  cursor: default;
}

.tooltip.has-verb-table .verb-conjugation-list li.current-form {
  background-color: rgba(100, 200, 255, 0.2);
}