/* ===========================
   Brand / layout basics
=========================== */

/* Page background */
html {
  background: #fff !important;
  height: 100%; /* Ensure html takes full height */
}
body {
  margin: 0;
  min-height: 100vh; /* Use viewport height to ensure it fills the screen */
  font-family: "Nunito", sans-serif;
  background: linear-gradient(
    to bottom,
    #a6e1dc 0%,
    #a6e1dc 40%,
    #eaf8f7 75%,
    #fff 100%
  ) !important;
  background-attachment: scroll !important;
  background-repeat: no-repeat !important;
  background-size: 100% auto !important;

  /* New Flexbox layout for sticky footer */
  display: flex;
  flex-direction: column;
}

main#main.site-main {
  flex: 1 0 auto; /* Allows the main content to grow and push the footer down */
}

footer {
  flex-shrink: 0; /* Prevents the footer from shrinking */
}

/* Logo */
.site-logo {
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-logo img {
  width: 80% !important;
  height: 80% !important;
  object-fit: cover;
  margin: 3% 0;
}
@media (max-width: 768px) {
  .site-logo img {
    width: 50% !important;
  }
}

/* Containers look clean on the gradient */
#page,
.site,
.container,
.site-content,
#ays-quiz-container-3,
.step.active-step,
.ays-start-page {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
  outline: none !important;
}

/* Header */
header {
  position: sticky;
  top: 0;
  z-index: 999;
}
.after-header {
  padding-top: 10px;
  background: linear-gradient(
    to bottom,
    #a6e1dc 10%,
    #a6e1dc 40%,
    #fff 85%,
    #fff 100%
  ) !important;
}
header .container {
  display: flex !important;
  justify-content: center !important;
  gap: 20px !important;
}

/* Accessibility helpers */
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===========================
   Quiz – shared styles
=========================== */

.ays-quiz-container {
  padding-bottom: 10px !important;
}

/* Start page headings + finish page text */
#ays-quiz-container-3 .ays-start-page *:not(input),
#ays_finish_quiz_3 p {
  text-align: center;
  color: #34495e !important;
  font-size: 2rem !important;
  font-weight: bolder !important;
}

.ays-fs-title {
  display: none !important;
}
.ays-fs-subtitle {
  font-family: "Nunito", serif !important;
  font-weight: bolder !important;
}

/* Result step background */
#ays-quiz-container-3 #ays_finish_quiz_3 div.step {
  min-height: 450px;
  font-family: "Nunito", sans-serif;
  background: linear-gradient(to bottom, rgba(14, 241, 236, 0.3), #fff);
}

/* Inputs container */
#ays-quiz-container-3 .ays-field {
  border: none !important;
}

/* Option buttons */
#ays-quiz-container-3 .ays-field label {
  display: block !important;
  width: 200px !important;
  padding: 0.3rem 1rem !important;
  background: #fff !important;
  color: #34495e !important;
  font-weight: bolder !important;
  border: 2.5px solid #34495e !important;
  border-radius: 2rem !important;
  text-align: center !important;
  font-family: "Nunito", sans-serif !important;
  font-size: 18px !important;
  line-height: 1.4 !important;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.2s ease-in-out !important;
  cursor: pointer !important;
}

/* Remove Google-Translate's <font> wrappers */
#ays-quiz-container-3 .ays-field label font {
  all: unset !important;
  display: inline !important;
  font: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
}

/* Normalize plugin font sizes */
#ays-quiz-container-3 .ays-field input,
#ays-quiz-container-3 .ays-field label,
#ays-quiz-container-3 .select2-container {
  font-size: 18px !important;
}

/* Primary buttons */
.start_button,
.ays_restart_button,
.ays_previous,
.ays_next,
input[type="button"][value="Next"],
input[type="button"][value="Prev"],
input[type="submit"][value="See Result"] {
  min-width: 150px !important;
  max-width: 90% !important;
  padding: 0.6rem 1.3rem !important;
  margin: 1rem auto !important;
  border-radius: 2rem !important;
  font-size: 18px !important;
  text-align: center !important;
  font-family: "Nunito", sans-serif !important;
  display: block !important;
  background: #eb5f59 !important;
  color: #fff !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4) !important;
  transition: all 0.2s ease-in-out !important;
  white-space: nowrap;
  text-transform: uppercase !important;
}
#ays-quiz-container-3 input[type="button"] {
  text-transform: uppercase !important;
  font-size: 160% !important;
  font-weight: bold !important;
}
.ays_restart_button {
  color: #fff !important;
}

/* GTranslate Fix: Force translated text inside buttons to behave */
html[class*="translated-"] .start_button font,
html[class*="translated-"] .ays_restart_button font,
html[class*="translated-"] .ays_previous font,
html[class*="translated-"] .ays_next font {
  all: unset !important;
  font-size: inherit !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  text-transform: inherit !important;
  color: inherit !important;
  line-height: inherit !important;
  display: inline !important;
}

/* Start button size on translated pages */
html[class*="translated-"]
  #ays-quiz-container-3
  .ays-start-page
  input.start_button {
  font-size: 70% !important;
  font-family: "Nunito", sans-serif !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  padding: 0.6rem 1.5rem !important;
  text-indent: 5px !important;
}

/* Progress */
.ays-progress-bar:after {
  background-image: linear-gradient(
    45deg,
    rgba(204, 51, 51, 0.8) 25%,
    #1ac6e5 25%,
    #1ac6e5 50%,
    rgba(204, 51, 51, 0.8) 50%,
    rgba(204, 51, 51, 0.8) 75%,
    #1ac6e5 75%,
    #1ac6e5
  );
  background-size: 20px 20px;
}
p.ays-question-counter.animated,
.ays-field input[type="radio"] + label:before {
  display: none !important;
}

/* Question text */
.ays_quiz_question {
  font-size: 26px;
  font-family: "Nunito", sans-serif;
}

footer,
#footer-container {
  text-align: center;
}

/* ===========================
   Privacy policy link
=========================== */
.bottom-area-panel {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

a.privacy-link,
.wp-block-file.aligncenter a {
  color: #eb5f59 !important;
  text-decoration: none !important;
  font-weight: bold !important;
  padding: 4px 6px;
  transition: all 0.2s ease-in-out;
  font-family: "Nunito", sans-serif;
}

/* ===========================
   GTranslate (clean look)
=========================== */

/* Site-wide compact switcher used under the logo */
.site-lang {
  display: flex;
  justify-content: center;
  margin: 1rem;
}
.site-lang .gtranslate_wrapper {
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
}
.site-lang .gtranslate_wrapper .gt_switcher {
  display: flex !important;
  flex-direction: column-reverse !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  position: relative !important;
}
.site-lang .gtranslate_wrapper,
.site-lang .gtranslate_wrapper .gt_option a {
  display: inline-block !important;
  background: #fff !important;
  color: #34495e !important;
  font-family: "Nunito", sans-serif !important;
  font-weight: 700 !important;
  text-align: center !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  transition: all 0.2s ease-in-out !important;
  border: 2.5px solid rgba(235, 95, 89, 0.9) !important;
  border-radius: 2rem !important;
  padding: 0.5rem 2.5rem !important;
  line-height: 1.2 !important;
  font-size: 14px !important;
}
.site-lang .gtranslate_wrapper .gt_selected a {
  display: inline-block !important;
  background: #fff !important;
  color: #34495e !important;
  font-family: "Nunito", sans-serif !important;
  font-weight: 700 !important;
  border: 3px solid rgba(235, 95, 89, 0.9) !important;
  border-radius: 2rem !important;
  padding: 0.5rem 1rem !important;
  line-height: 1.2 !important;
  font-size: 20px !important;
  margin-top: 0 !important; /* Changed from 2rem to 0 */
  min-width: auto !important; /* Changed from 160px to auto */
}
.site-lang .gtranslate_wrapper .gt_option {
  position: sticky !important;
  z-index: 9998 !important;
  background: transparent !important;
  border: none !important;
  display: none;
  box-sizing: content-box !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 198px !important;
  width: 80% !important;
  margin-top: 1% !important;
}
.gtranslate_wrapper img {
  display: none !important;
}

/* Kill Google’s injected UI chrome */
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
.goog-text-highlight,
iframe.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
}
html,
body {
  top: 0 !important;
  position: static !important;
}

/* ===========================
   Step layout (the important bit)
=========================== */

/* --- REPLACE IT WITH THIS --- */
/* Keep non-active steps hidden, EXCEPT on the final results page */
#ays-quiz-container-3:not(:has(.ays_thank_you_fs.active-step))
  .step:not(.active-step) {
  display: none !important;
}

/* START page – keep items close so no scrolling is needed */
#ays-quiz-container-3 .ays-start-page {
  min-height: auto !important;
  padding: 2rem 1rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 1rem !important;
}

/* ACTIVE question step (not start) – tight spacing + centered options */
#ays-quiz-container-3 .step.active-step:not(.ays-start-page) {
  min-height: auto !important;
  padding: 0.5rem 1rem 2rem !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 0.75rem !important;
}
#ays-quiz-container-3
  .step.active-step:not(.ays-start-page)
  .ays_quiz_question {
  margin-top: 0.5rem !important;
  text-align: center !important;
}
#ays-quiz-container-3 .step.active-step:not(.ays-start-page) .ays-field {
  width: 100% !important;
  max-width: 560px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.75rem !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
#ays-quiz-container-3 .step.active-step:not(.ays-start-page) .ays-field label {
  max-width: 320px !important;
  margin: 0 !important;
}
#ays-quiz-container-3 .step.active-step:not(.ays-start-page) .ays_buttons_div {
  width: 100% !important;
  max-width: 680px !important;
  gap: 1rem !important;
  text-align: center !important;
}

/*
 * COMBINED: Visuals and Layout for the text-based Prev/Next buttons
*/
#ays-quiz-container-3 .ays_buttons_div input.ays_previous,
#ays-quiz-container-3 .ays_buttons_div input.ays_next {
  /* --- Visual Styles (from your original code) --- */
  font-size: 150% !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  color: #fff !important;
  text-shadow: 0 0 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff,
    0 -1px 0 #fff, 1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff,
    -1px -1px 0 #fff !important;

  /* --- Layout Styles (from my fix) --- */
  display: inline-block !important;
  vertical-align: middle !important;
  width: 150px;
  margin: 1rem 0.5rem !important;
}

#ays-quiz-container-3 .ays_buttons_div input[type="submit"] {
  font-size: 160% !important;
  font-weight: bold !important;
  color: #fff !important;
  text-shadow: none !important;
}

/* ===========================
   Responsive tweaks
=========================== */

@media (min-width: 1024px) {
  #ays-quiz-container-3
    .step.active-step:not(.ays-start-page)
    .ays_quiz_question {
    margin-top: 0.75rem !important;
  }
  #ays-quiz-container-3
    .step.active-step:not(.ays-start-page)
    .ays-field
    label {
    margin-top: 0.75rem !important;
  }
}

@media (max-height: 800px) {
  #ays-quiz-container-3 .step.active-step {
    padding-bottom: 3rem !important;
  }
  #ays-quiz-container-3
    .step.active-step:not(.ays-start-page)
    .ays-field
    label {
    margin: 0.8rem auto !important;
    font-size: 18px !important;
  }
}

@media (max-width: 768px) {
  /* Fix for privacy policy being pushed down on tall screens */
  main#main.site-main {
    flex-grow: 0 !important;
  }

  #ays-quiz-container-3 .ays-start-page {
    gap: 0.75rem !important;
    padding: 1.25rem 0.75rem !important;
  }

  /* 1. Scoot question up on mobile */
  #ays-quiz-container-3 .step.active-step:not(.ays-start-page) {
    gap: 1rem !important;
    padding: 1rem 0.75rem !important;
  }

  /* 4. Scoot options down from question */
  #ays-quiz-container-3 .step.active-step:not(.ays-start-page) .ays-field {
    margin-top: 2% !important;
  }

  /* 3. Make option pills wider on mobile */
  #ays-quiz-container-3
    .step.active-step:not(.ays-start-page)
    .ays-field
    label {
    width: 200px !important;
    max-width: 85% !important;
    font-size: 130% !important;
  }

  #ays_finish_quiz_3 p {
    font-size: 110% !important;
  }

  .ays_feedback_button_div,
  .ays_buttons_div {
    font-size: 85% !important;
  }

  /* scoot next/prev buttons down */
  #ays-quiz-container-3 .step .ays_buttons_div input[type="button"],
  #ays-quiz-container-3 .step .ays_buttons_div input[type="submit"] {
    margin-top: 1em !important;
  }

  /*adjust start page title size */
  #ays-quiz-container-3 .ays-start-page *:not(input) {
    font-size: 160% !important;
  }

  /* Lock the start page title size on translated pages */
  html[class*="translated-"]
    #ays-quiz-container-3
    .ays-start-page
    .ays-fs-subtitle,
  html[class*="translated-"]
    #ays-quiz-container-3
    .ays-start-page
    .ays-fs-subtitle
    p,
  html[class*="translated-"]
    #ays-quiz-container-3
    .ays-start-page
    .ays-fs-subtitle
    font {
    font-size: 127% !important;
    line-height: 1.3 !important;
  }

  /*adjust language selector size */
  .site-lang .gtranslate_wrapper {
    padding: 0.5rem 2.5rem !important;
  }

  /*makes the language pop-up responsive */
  .gt_white_content {
    /* 1. Use a percentage of the screen width, not fixed pixels. */
    width: 90vw !important;
    max-width: 450px !important; /* A sensible maximum limit. */

    /* 2. Allow the height to be flexible but not too tall. */
    height: auto !important;
    max-height: 75vh !important;

    /* 3. Replace the old negative margin trick with modern centering. */
    margin: 0 !important;
    transform: translate(-50%, -50%) !important;
  }

  /* Bigger fonts for mobile buttons */
  .site-lang a.gt_switcher-popup span {
    font-size: 20px !important;
  }
  .start_button {
    font-size: 22px !important;
  }

  /* Language selector arrow */
  .site-lang a.gt_switcher-popup span + span {
    font-size: 8px !important;
    vertical-align: middle !important;
    color: #34495e !important;
  }

  #ays_finish_quiz_3 .ays_score,
  #ays_finish_quiz_3 .ays_average {
    font-size: 150% !important;
  }
  div#ays-quiz-container-3 [id^="ays_finish_quiz_"] div.step div.ays-abs-fs {
    width: 100% !important;
  }
}

/* ===========================
   Small extras
=========================== */

#ays-quiz-container-3 #ays_finish_quiz_3 div.step {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.wp-block-file.aligncenter {
  display: block !important;
  text-align: center !important;
  margin: 1.5rem auto 1.5rem !important;
  position: static !important;
  transform: none !important;
}

/* ===========================
   CUSTOM FIXES
=========================== */

/* Style GTranslate Popup Language Links */
.gt_white_content a {
  color: #34495e !important;
  text-decoration: none !important;
}

/* Remove Underline from GTranslate Switcher Link */
.site-lang a.gt_switcher-popup {
  text-decoration: none !important;
  color: #34495e !important;
}

/* Ensure all quiz question text is blue */
.ays_quiz_question,
.ays_quiz_question * {
  color: #34495e !important;
}

/* FIX: Explicitly hide the ICON-based <button> elements. */
#ays-quiz-container-3 .ays_buttons_div button.ays_previous,
#ays-quiz-container-3 .ays_buttons_div button.ays_next {
  display: none !important;
}

/* =======================================
 * FINAL FIX: Correct/Wrong Answer Highlights
======================================= */

/*
 * 1. Force the rectangular container to be fully transparent by
 * removing both its background AND any box-shadow overlay.
*/
#ays-quiz-container-3 .step.active-step .ays-field.correct_div,
#ays-quiz-container-3 .step.active-step .ays-field.wrong_div {
  background: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* 2. Apply a LIGHTER green background to the pill (label) itself */
#ays-quiz-container-3 .ays-field.correct_div label {
  background: #e8f5e9 !important; /* Lighter Green */
  border-color: #59bb60 !important; /* Border matches checkmark color */
  color: #34495e !important; /* Dark text for readability */
}

/* 3. Apply a LIGHTER red background to the pill (label) itself */
#ays-quiz-container-3 .ays-field.wrong_div label {
  background: #fce4ec !important; /* Lighter Red */
  border-color: #eb4465 !important; /* Border matches x-mark color */
  color: #34495e !important; /* Dark text for readability */
}

/* ===========================
/* --- LOADER STYLES --- */

/* Container: For positioning and centering the dots */
/* This selector is now more specific to avoid affecting the score page */
.ays-quiz-container div[data-role="loader"].lds-ellipsis {
  display: flex !important;
  justify-content: center !important;
  margin-top: 8rem !important;
  margin-bottom: 8rem !important;
}

/* Dots: For the color */
.ays-quiz-container div[data-role="loader"].lds-ellipsis div {
  background: #3498db !important;
}

main#main.site-main {
  color: #34495e;
  font-family: "Nunito", sans-serif;
}

.go-back-button {
  font-family: "Nunito", sans-serif !important;
  color: #eb5f59 !important;
  text-decoration: none; /* removes underline if you don’t want it */
  font-weight: 700; /* optional: makes it bold */
  font-size: 20px;
}

.go-back-button:hover {
  color: #34495e !important; /* optional: hover color (matches your quiz buttons) */
}

/* ===========================
   Quiz Maker Plugin Update Fixes
/* new CSS after quiz maker plugin update */ 

.ays_empty_before_content {
    opacity: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    display: none !important;
}

.ays-field:hover {
    background: transparent !important;
}

/* Hide the empty image-answer labels everywhere in this quiz */
#ays-quiz-container-3 label[for^="ays-answer-"][class*="ays_answer_image"] {
    display: none !important;
}

/* Safety: also hide any leftover pseudo-elements on those labels */
#ays-quiz-container-3 label[for^="ays-answer-"][class*="ays_answer_image"]::before,
#ays-quiz-container-3 label[for^="ays-answer-"][class*="ays_answer_image"]::after {
    content: none !important;
    display: none !important;
}

/* Make quiz answer labels react instantly, but still smooth */
#ays-quiz-container-3 label.ays-quiz-keyboard-label {
  /* fast, soft transition only on colours / opacity */
  transition: background-color 0.12s ease-out,
              box-shadow       0.12s ease-out,
              color            0.12s ease-out,
              opacity          0.12s ease-out !important;
  transition-delay: 0s !important;
  animation: none !important;
}

/* When an answer is marked (correct / wrong), avoid extra animations */
#ays-quiz-container-3 label.ays-quiz-keyboard-label.answered,
#ays-quiz-container-3 label.ays-quiz-keyboard-label.correct,
#ays-quiz-container-3 label.ays-quiz-keyboard-label.wrong {
  animation: none !important;
  transition-delay: 0s !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Keep size consistent across normal / answered / correct / wrong */
#ays-quiz-container-3 label.ays-quiz-keyboard-label,
#ays-quiz-container-3 label.ays-quiz-keyboard-label.answered,
#ays-quiz-container-3 label.ays-quiz-keyboard-label.correct,
#ays-quiz-container-3 label.ays-quiz-keyboard-label.wrong {
  box-sizing: border-box;
  padding: 10px 34px !important;   /* adjust if your pill height changes */
  border-width: 3px !important;
}

/* Remove space between quiz options */
.ays-field.ays_list_view_item {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Also remove any vertical gap coming from the container */
.ays-quiz-answers.ays_list_view_container {
    gap: 0 !important;
}

/* FORCE the start button to be full size on translated pages */
html[class*="translated-"] #ays-quiz-container-3 .ays-start-page input.start_button {
    font-size: 27px !important;  /* It was set to 70% before */
    min-width: 150px !important;
    padding: 0.6rem 1.3rem !important;
    display: inline-block !important;
}