@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;500;700;900&display=swap');

.hidden {
  display: none; /* Hide elements by default */
}

.quiz-stage {
  display:flex;
  flex-direction: column;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 2%;
}

.quiz-stage-2 {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%;
  width: 100%;
  align-items: center;
  margin: 5%;
}

/*
body {
  font-family: Arial, sans-serif;  
  font-size: 1.2em; 
  background-color: #f4f4f9;
  color: #333;
  margin: 0;
  padding: 0;
}
*/

/* Body text container with padding/margin */
.text-container {
  max-width: 800px; /* Optional: Limit text width */
  margin: 5px auto; /* Center the text and add spacing */
  padding: 20px; /* Add padding inside the container */
  text-align: center; /* Center-align text */
  font-size: 1.5em; 
}

/* Image stretching to screen edges */
.stretch-image {
  position: fixed; /* Anchors the image to the viewport */
  bottom: 0; /* Positions the image at the bottom of the screen */
  left: 0; /* Starts from the left edge of the screen */
  width: 100%; /* Stretches the image to fill the screen width */
  height: auto; /* Maintains the image's aspect ratio */
  padding-top: 200px; /* Prevents text from overlapping the image */
  z-index: -1; /* Places the image behind other content */
  display: block;
}

/*
.quiz-container {
  max-width: 800px;
  margin: 0 auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
*/

.quiz-container {
  display: flex;
  margin-top: 40px; 
  flex-direction: column;
  width: 100%;                 /* Full width of the container */
  height: 100%;
  align-items: center;
  justify-content: center;
}

h1, h2 {
  font-size: 2.0em; /* Adjust text size */
  font-weight: bold; /* Optional: Make text bold */
  color: #4caf50;
  margin-top: -2%;
}

.image-text-container {
  position: relative; /* Allows positioning the text over the image */
  width: 100%; /* Full width of the container */
}

.overlay-text {
  position: absolute; /* Position text over the image */
  top: 75%; /* Center vertically */
  left: 85%; /* Center horizontally */
  transform: translate(-50%, -50%); /* Adjust for proper centering */
  color: black; /* Text color (adjust for better visibility) */
  text-align: center;
  font-size: 3.5em; /* Adjust text size */
}

.overlay-button {
  position: absolute; /* Positions the button relative to the start page */
  bottom: 15%; /* Distance from the bottom of the container */
  right: 7%; /* Distance from the right edge of the container */
  background-color: #ba1c1c; /* Green background */
  color: white; /* White text */
  border: none; /* Remove border */
  padding: 10px 20px; /* Add padding for size */
  font-size: 3em; /* Font size */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Pointer cursor on hover */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Optional shadow for depth */
}

.overlay-button:hover {
  background-color: #45a049; /* Slightly darker green on hover */
}

#explanation-page {
  text-align: center;
  padding: 20px;
  max-width: 800px;
  margin: 20px auto;
}
.progress-container {
  display: none; /* Hide the progress bar by default */
  width: 100%;
  background-color: #e0e0e0;
  height: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background-color: #ca74b1;
  border-radius: 5px;
  transition: width 0.4s ease;
}


circle.selected {
  stroke: rgb(32, 31, 28);
  stroke-width: 3;
}

.start-page-image {
  display: block; /* Ensures the image behaves like a block-level element */
  width: 100%; /* Make the image fill the width of the container */
  height: auto; /* Maintain aspect ratio */
  margin-top: 5px; /* Add some spacing between the image and other content */
  object-fit: cover; /* Ensures the image scales nicely */
}
.values-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(350px, 1fr)); /* Create 5 equal-width columns */
  grid-gap: 0px; /* Add some space between the items */
  /*display: block;
  margin: auto; */
  flex-wrap: wrap;
  gap: 20px ;
  margin-bottom: 20px;
}

.values-list label {
  background-color: #eee;
  padding: 10px;
  border-radius: 4px;
  display: block; /* Ensure that each label and checkbox are on the same line */
  cursor: pointer; /* Make it easy to click the label to select the checkbox */
  width: 90%;
  text-align: center;
}

.values-list input[type="checkbox"] {
 margin-right: 8px; /* Add some space between the checkbox and the label */
  display: none;
}

.values-list input[type="checkbox"]:checked + label {
  background-color: #4caf50;
  color: #fff;
}

button {
  background-color: #4caf50;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.navigation {
  display: flex;
  justify-content: center; /* Center-aligns the buttons */
  gap: 10px; /* Adds space between the buttons */
}

.navigation button {
  padding: 10px 20px;
  font-size: 1em;
  background-color: #808080;
  color: white;
}

.proceed {
  display: flex;
  justify-content: flex-end; /* Aligns the button to the right */
}

.proceed button {
  padding: 10px 20px;
  font-size: 1em;
  background-color: #808080;
  color: white;
}

/*
.quiz-stage {
  display: none;
}

.quiz-stage.active {
  display: block;
}
*/

/* Container for each value */
/*.value-container {
  position: relative;
  display: inline-block;
  margin: 10px;
}*/

/*#stage1-counter, #stage2-counter, #stage3-counter  {
  position: fixed;          /* Position fixed to make it float 
  bottom: 20px;             /* Distance from the bottom of the screen 
  right: 20px;              /* Distance from the right of the screen 
  background-color: #be6a78; /* Pink background color 
  color: white;             /* White text color 
  padding: 10px 20px;       /* Some padding for better visibility 
  border-radius: 8px;       /* Rounded corners 
  font-size: 16px;          /* Adjust the text size 
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Optional shadow for better visibility 
  z-index: 1000;            /* Ensure it's above other elements 
}
*/
.drag-drop-container {
  display: flex;
  flex-direction: column;
  width: 80%;                 /* Full width of the container */
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

/* Style for the original value grid */
/*#value-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Space between items */
  /*justify-content: center;
}
*/

.value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* Adjust based on screen size */
  gap: 10px;
  width: 100%;
  border: 1px solid #ccc;
  padding: 10px;
  justify-content: center;
  background-color: #f9f9f9;
  border-radius: 5px;
}

.value-item {
  display: flex;
  width: 80%;
  height: auto;
  justify-content: center;
  aspect-ratio: 7/1;
  background: #0d2e6b;
  padding: 10px;
  color: #fff;
  border-radius: 5px;
  flex-shrink: 0; /* Prevent shrinking */
  flex-grow: 0; /* Prevent growing */
  cursor: grab;
  text-align: center;
  font-style: 6rem;
  align-items: center;
  position: relative;
  margin-left: 10%;
}
/*
.value-item .tooltip {
  visibility: hidden;
  position: absolute;
  bottom: 100%; /* Position above the item */
  /*left: 50%;
  transform: translateX(-50%);
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 5px;
  white-space: normal;
  border-radius: 5px;
  z-index: 10;
  font-size: 0.9em;
  line-height: 1.5; /* Set line height to ensure proper spacing */
 /* opacity: 0;
  transition: opacity 0.3s ease;
}


.value-item:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
*/
.bins {
  display: flex;
  width: 80%;
  flex-direction: row;
  gap: 20px;
}

.bin {
  border: 2px dashed #ccc;
  padding: 20px;
  background-color: #f4f4f4;
  border-radius: 5px;
  flex: 1;
}

.bin h3 {
  margin: 0 0 10px;
}

.bin-content {
  display: grid; /* Use CSS Grid for layout */
  grid-template-columns: repeat(2, 1fr); /* Two equal-width columns */
  justify-content: center;
  gap: 10px; /* Space between items */
  min-height: 150px;
  background: #fff;
  border-radius: 5px;
  padding: 10px;
}

.bin-content .value-item {
  flex: 1 1 auto; /* Allow items to grow/shrink within the bin */
  max-width: calc(33% - 10px); /* Example: Up to three items per row */
  min-width: 80px; /* Ensure a minimum size */
  height: auto; /* Adjust height dynamically */
  gap: 10px;
}

.dragging {
  opacity: 0.5; /* Make the item semi-transparent during drag */
  transform: scale(1.1); /* Optional: Slightly enlarge the item */
  z-index: 1000; /* Ensure it's above other elements */
}


.ranking-list {
  margin-left: 5%;
  margin-right: 5%;
  display: flex;
  flex-direction: column;
  gap: 50px; /* Space between ranking items */
}

.ranking-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* center; */
  /*justify-content: space-between; */
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.ranking-item label {
  font-weight: bold;
  flex: 1; /* Allow label to take up available space */
  margin-right: 10px;
}

.ranking-item .description {
  font-size: 1.1em;
  color: #555;
  margin-left: 20px;
  flex: 2; /* Allows description to take up space next to label */
}

.slider-container {
  display: grid;
  grid-template-columns: auto 1fr auto; /* Align labels and slider */
  gap: 10px; /* Space between labels and slider */
  align-items: center; /* Align vertically */
  width: 100%;
  position: relative; /* Position tickmarks relative to container */
  margin-top: 20px;
}

.slider-label {
  font-size: 0.9em; /* Adjust font size */
  color: #555; /* Set a soft color */
  flex: 0 0 auto; /* Prevent shrinking */
  text-align: center; /* Center align text */
}


.slider-wrapper {
  position: relative; /* Position for layering tick marks */
  width: 100%; /* Full width within the 1fr column */
}

/*
.likert-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

.likert-option {
  text-align: center;
  font-size: 0.9em;
}

.likert-option input[type="radio"] {
  display: none; 
}

.likert-option span {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

.likert-option input[type="radio"]:checked + span {
  background-color: #007BFF;
  color: white;
  border-color: #007BFF;
}

.description {
  font-size: 1em;
  color: #555;

}

.likert-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  margin-bottom: 10px;
}

.likert-option {
  text-align: center;
  font-size: 0.9em;
}

.likert-option input[type="radio"] {
  display: none; } 

.likert-option span {
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #f9f9f9;
  cursor: pointer;
  transition: background-color 0.3s, border-color 0.3s;
}

.likert-option input[type="radio"]:checked + span {
  background-color: #007BFF;
  color: white;
  border-color: #007BFF;
}
*/

.ranking-item input[type="range"] {
  flex: 1; /* Slider scales evenly */
  width: 100%;
  margin-top: 10px; /* Space above slider */
}

input[type="range"] {
  width: 100%;
  appearance: none;
  margin: 0; /* Remove default margin */
  background: linear-gradient(to right, #dff9df 0%, #dff9df 100%, #ddd 0%);
  border-radius: 5px;
  outline: none;
  transition: background 0.3s ease-in-out;
  z-index: 2; /* Ensure slider is above tick marks */
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 8px;
  background: transparent;
  border-radius: 5px;
  z-index: 0; /* Ensure slider track is above tick marks */

}

input[type="range"]::-webkit-slider-thumb {
  width: 20px;
  height: 20px;
  border: 2px solid #ffffff;
  background: var(--thumb-color, #2ecc71); /* Use the custom property set by JS */
  border-radius: 50%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); /* Add a drop shadow */
  cursor: pointer;
  appearance: none;
  z-index: 2;
  margin-top: -8px; /* Align thumb with track */
  transition: background-color 0.3s ease-in-out;
}

.tickmarks {
  display: flex;
  justify-content: space-between;
  position: absolute;
  width: 100%;
  margin-top: -6px;
  top: 50%; /* Adjust to align with slider */
  left: 0; /* Offset for label spacing */
  /*right: 10%; /* Offset for label spacing */
  pointer-events: none; /* Disable interaction */
  z-index: 0;
}


.tick {
  width: 16px; /* Match slider thumb size */
  height: 16px;
  border-radius: 50%;
  background: #ddd; /* Empty center */
  z-index: 0;
}

button {
  margin-top: 20px;
  padding: 10px 20px;
  font-size: 1em;
  color: white;
  background-color: #4caf50;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

button:hover {
  background-color: #45a049;
}

.tooltip {
  position: absolute;
  opacity: 0; /* Initially hidden */
  background: #333;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  top: 110%; /* Adjust as needed */
  left: 50%;
  text-align: center;
  transform: translateX(-50%) translateY(100%);
  pointer-events: none; /* Prevent tooltip from interfering with mouse events */
  transition: opacity 0.2s; /* Smooth fade-in and fade-out */
}



.bin-tooltip {
  visibility: hidden;
  background-color: #ffffff;
  color: #3a3a3a;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
  top: 110%; /* Adjust as needed */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Tooltip arrow */
.tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
}

/* Tooltip arrow */
.bin-tooltip::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
}
.value-container:hover .tooltip {
  visibility: visible;
  opacity: 1;
}
/*
label:hover + .tooltip {
  visibility: visible;
  opacity: 1;
}
*/

.flashcard-container {
  display: flex;
  justify-content: center; /* Center the flashcards horizontally */
  gap: 30px; /* Add some space between the flashcards */
}

.flashcard-container button {
 /* width: 100%; */
  width: 300px;
  height: 150px;
  padding: 10px;
  font-size: 1.5em;
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
  color: #333;
  border-radius: 5px;
  transition: background-color 0.3s ease;
}

.flashcard-container button:hover{
  background-color: #4caf50; /* Hover effect */
  color: white;
} 

.flashcard  {
  position: relative; /* Needed for tooltip positioning */
  display: inline-block;
}

/*
.flashcard button {
  width:45%;
  padding: 50px;
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
  font-size: 1.2em;
  margin-right: 30px ;
  background-color: #eee;
  color: #333;
}
*/
.flashcard button:hover {
  background-color: #4caf50; /* Green color when hovering */
  color: white; /* Text color change */
}

.flashcard:hover .bin-tooltip {
  visibility: visible; /* Show tooltip on hover */
  opacity: 1;
}

.value-description-container {
  display: flex;
  align-items: baseline; /* Align value and description properly */
  gap: 10px;            /* Space between value and description */
  margin-left: -3%;
  margin-right: -10%;

}

.value-name {
  font-weight: bold;
  font-size: 1.2em;
}

.value-description {
  font-size: 1em;
  color: #666;          /* Optional: A lighter color for the description */
  /*margin-left: 10px;    /* Space between name and description */
}

#final-ranking li {
  font-size: 1rem;
  line-height: 1.5; /* Improves readability */
  display: flex;
  justify-content: space-between;
  list-style-position: inside;
  white-space: nowrap;

}
#final-ranking {
  display: flex;
  flex-direction: column;
  max-width: 90%;
  margin: auto;
  padding-left: 0;     
}


@media (max-width: 480px) {
  #final-ranking li {
      font-size: 0.7rem; /* Slightly reduces font size on very narrow screens */
  }
}

.hidden {
  display: none;
}


/* General styling for the "Next Steps" stage */
#next-steps {
  width: 60%; /* Fills the middle 60% of the screen */
  margin: 0 auto; /* Centers the content horizontally */
  text-align: center; /* Centers text content inside */
}

/* Ensure the content in the Next Steps section is not wrapped in a container */
#next-steps > * {
  margin: 0; /* Removes unnecessary margins */
  padding: 0; /* Removes unnecessary padding */
}

/* Styling for the list (if you are using a <ul>) */
#next-steps ul {
  margin-bottom: 2rem; /* Adds space between the list and the PDF */
  list-style-type: none; /* Optional: Removes bullets from the list */
  padding: 0; /* Removes default padding */
}

/* Styling for the embedded PDF */
#next-steps iframe {
  width: 100%; /* Ensures the embedded PDF spans the available width */
  height: 500px; /* Adjust height as necessary */
  margin-top: 2rem; /* Adds space between the list and the PDF */
}

/* Optional: Media query for responsiveness */
@media (max-width: 768px) {
  #next-steps {
      width: 80%; /* Adjust width for smaller screens */
  }

  #next-steps iframe {
      height: 300px; /* Reduce PDF height on smaller screens */
  }
}

#next-steps button {
  margin-top: 1rem;
  padding: 0.5rem 1.5rem;
  font-size: 1rem;
  border: none;
  background-color: #007BFF;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

#next-steps button:hover {
  background-color: #0056b3;
}