@charset "UTF-8";
/*
 Theme Path
========================================================================== */
/*
 Font Family
========================================================================== */
/*
 Font Size
========================================================================== */
/*
 Colors
========================================================================== */
/*
 Button Styles
========================================================================== */
/*
 Helpers
========================================================================== */
/*
 Sizes
========================================================================== */
/*
 Columns
========================================================================== */
/*
 Buttons – @include button();
========================================================================== */
/*
 Object Fit – @include object-fit(cover);
========================================================================== */
/*
 Rows – @include rows(4,10px); px or % support
========================================================================== */
/*
 Aspect Ratio – @include aspect-ratio(9,16) 0r @include aspect-ratio(70%,30%)
========================================================================== */
/*
 Align Full – @include alignfull;
========================================================================== */
/*
 Min Width Query – @include media($desktop);
========================================================================== */
/*
 Max Width Query – @include media-height($tablet);
========================================================================== */
/*
 Min Width and Max Width Query – @include media-between($tablet, $desktop);
========================================================================== */
/*
 Min Height Query – @include media-height($tablet);
========================================================================== */
/*
 Truncate – @include truncate-text(ellipsis);
========================================================================== */
/*
 Rem Calculate – @include rem(padding, 30px);
========================================================================== */
/*
 Column width with margin
========================================================================== */
/*
 Generates classes and css variables for custom color scale from of a specific Hexcode or HSLA
 @include generate-color-palette(#6a778c, 'slate', 'variables');
 @include generate-color-palette(hsla(217, 90%, 57%, 1.00), 'cobalt', 'classes');
========================================================================== */
/*
 Course Quiz
========================================================================== */
.course-quiz {
  background: #FFF;
  padding: 45px 30px;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}
@media screen and (min-width: 768px) {
  .course-quiz {
    padding: 45px;
  }
}
@media screen and (min-width: 992px) {
  .course-quiz {
    padding: 60px;
  }
}
.course-quiz .course-quiz-input-wrapper {
  margin-block: var(--wp--style--block-gap);
}
.course-quiz__question-title {
  color: var(--wp--custom--color--heading);
  font-family: var(--wp--preset--font-family--secondary);
  font-weight: 600;
  font-size: clamp(1.125rem, 14.4px + 0.75vw, 1.5rem);
  line-height: 1.5;
  margin-block: 0;
  text-align: center;
}
.course-quiz__question-title:focus {
  outline: none;
}
.course-quiz__question-description {
  font-size: clamp(0.8125rem, 12.4px + 0.125vw, 0.875rem);
  margin-block: 15px;
  text-align: center;
}
.course-quiz .quiz-action {
  margin-top: 30px;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

/*
 Quiz Progress Bar
========================================================================== */
.course-quiz-progress {
  max-width: 768px;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  overflow: hidden;
  min-height: 30px;
  margin-bottom: var(--wp--style--block-gap);
}
.course-quiz-progress li.step {
  width: 16px;
  height: 16px;
  border-radius: 40px;
  position: relative;
  background: rgb(229.71, 229.71, 229.71);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: all 300ms ease;
}
.course-quiz-progress li.step::after {
  position: absolute;
  content: "";
  width: 50vw;
  background: rgb(229.71, 229.71, 229.71);
  height: 3px;
  top: calc(50% - 2px);
  left: 100%;
}
.course-quiz-progress li.step .step-icon {
  line-height: 0;
  transform: scale(0.01%);
  opacity: 0;
  transition: all 300ms ease;
  fill: #FFF;
}
.course-quiz-progress li.step .step-icon svg {
  width: 20px;
  height: 20px;
}
.course-quiz-progress li.step-completed,
.course-quiz-progress li.step-current {
  width: 30px;
  height: 30px;
}
.course-quiz-progress li.step-completed .step-icon,
.course-quiz-progress li.step-current .step-icon {
  transform: scale(100%);
  opacity: 1;
}
.course-quiz-progress li.step-completed .step-icon-completed {
  display: block;
}
.course-quiz-progress li.step-completed .step-icon-current {
  display: none;
}
.course-quiz-progress li.step-completed::after {
  background: var(--wp--custom--color--links);
}
.course-quiz-progress li.step-current .step-icon-completed {
  display: none;
}
.course-quiz-progress li.step-current .step-icon-current {
  display: block;
}
.course-quiz-progress li.step-completed, .course-quiz-progress li.step-current {
  background: var(--wp--custom--color--links);
}

/*
 Quiz Choices (Radios & Checkboxes)
========================================================================== */
.course-quiz-choice-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.course-quiz-choice-wrapper li {
  position: relative;
  background: white;
  border: 2px solid rgb(222.3, 222.3, 222.3) !important;
  border-radius: var(--wp--custom--border--radius-button);
  box-shadow: none !important;
  padding: 20px;
  margin: 0 !important;
  display: flex;
  line-height: 1.3;
  align-items: center;
  gap: 16px;
  transition: border 0.1s ease;
  font-weight: 600;
  font-size: clamp(0.9375rem, 14.4px + 0.125vw, 1rem);
}
.course-quiz-choice-wrapper li:has(input:checked) {
  border-color: var(--wp--custom--color--links) !important;
}
.course-quiz-choice-wrapper li:hover {
  border: 2px solid rgb(197.6, 197.6, 197.6) !important;
}
.course-quiz-choice-wrapper input {
  padding: 0;
  margin: 0;
  width: 20px !important;
  height: 20px !important;
  border: none;
  box-shadow: inset 0 0 0 2px rgb(222.3, 222.3, 222.3) !important;
  flex-shrink: 0;
}
.course-quiz-choice-wrapper input[type=checkbox]:checked {
  background-color: #800000 !important;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.2) !important;
}
.course-quiz-choice-wrapper input[type=radio]:checked {
  box-shadow: inset 0 0 0 6px #800000 !important;
}
.course-quiz-choice-wrapper label::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

/*
 Cloud Checkboxes
========================================================================== */
.course-quiz-cloud-wrapper {
  border: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.course-quiz-cloud-wrapper .course-quiz-checkbox-wrapper {
  display: inline-flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 2px solid #e0e2e3 !important;
  border-radius: 50px;
  box-shadow: none !important;
  background: white;
  line-height: 1;
  font-weight: 600;
}
.course-quiz-cloud-wrapper .course-quiz-checkbox-wrapper label {
  margin: 0;
  padding: 15px 20px;
  display: block;
  cursor: pointer;
  font-size: clamp(0.9375rem, 14.4px + 0.125vw, 1rem);
}
.course-quiz-cloud-wrapper .course-quiz-checkbox-wrapper input {
  margin: 0;
  display: none;
}
.course-quiz-cloud-wrapper .course-quiz-checkbox-wrapper:hover {
  border: 2px solid rgb(197.6, 197.6, 197.6) !important;
}
.course-quiz-cloud-wrapper .course-quiz-checkbox-wrapper:has(input:checked) {
  background-color: #800000 !important;
  border-color: #800000 !important;
  color: #FFFFFF;
}

/*
 Textarea
========================================================================== */
.course-quiz-textarea-wrapper textarea {
  border: 2px solid #e0e2e3;
  height: 200px;
  border-radius: var(--wp--custom--border--radius);
  background: #FFF;
  font-size: clamp(0.9375rem, 14.4px + 0.125vw, 1rem);
  padding: 15px;
  line-height: 1.5;
}
.course-quiz-textarea-wrapper textarea::placeholder {
  color: #757575;
  opacity: 1;
}

/* Show the first step by default (fallback) */
.course-quiz-step-1 {
  display: block;
}

/* Show only the active step (this takes priority) */
.course-quiz-step-active {
  display: block !important;
}

/* Hide non-active steps when there's an active one */
.course-quiz-step:not(.course-quiz-step-active) {
  display: none;
}

/*
| Parsley Validation Styles
========================================================================== */
.block-course-quiz .parsley-errors-list,
.block-course-quiz [class$=-error] {
  margin-top: 8px;
}
.block-course-quiz .parsley-errors-list .parsley-error-message,
.block-course-quiz [class$=-error] .parsley-error-message {
  color: #d9534f;
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
  padding: 0;
}
.block-course-quiz .learning_experience-error,
.block-course-quiz .topic-error,
.block-course-quiz .learning_format-error,
.block-course-quiz .basic_program-error {
  display: none;
  color: #d9534f;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 8px;
}
.block-course-quiz .learning_experience-error:not(:empty),
.block-course-quiz .topic-error:not(:empty),
.block-course-quiz .learning_format-error:not(:empty),
.block-course-quiz .basic_program-error:not(:empty) {
  display: block;
}