/* S2E QUIZ ATTEMPT UI V10
   Floating compact Quiz Options below the Next side of Previous / Next on mobile.
*/

/* Hide the old top Question List block visually. It remains in DOM as the data/action source. */
body#page-mod-quiz-attempt #mod_quiz_navblock {
  display: none !important;
}
body#page-mod-quiz-attempt aside#block-region-above-content:has(#mod_quiz_navblock) {
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Remove all older injected top controls if cached DOM survives history navigation. */
body#page-mod-quiz-attempt #s2e-v4-question-controls,
body#page-mod-quiz-attempt #s2e-v5-question-controls,
body#page-mod-quiz-attempt #s2e-quiz-top-actions {
  display: none !important;
}

/* Only one finish path: V6 menu -> Moodle Final Review. */
body#page-mod-quiz-attempt .s2e-custom-nav-wrap .s2e-finish-btn {
  display: none !important;
}

/* Add safe scroll space so fixed controls never cover the last answer on mobile. */
body#page-mod-quiz-attempt #region-main,
body#page-mod-quiz-attempt #page-content {
  padding-bottom: 150px !important;
}

/* =========================================================
   Floating options controller
========================================================= */
body#page-mod-quiz-attempt #s2e-v6-quiz-options {
  position: fixed !important;
  left: 50% !important;
  bottom: 18px !important;
  transform: translateX(-50%) !important;
  z-index: 2147483646 !important;
  width: min(350px, calc(100vw - 24px)) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  direction: rtl !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
  font-family: Tahoma, Arial, sans-serif !important;
}

body#page-mod-quiz-attempt #s2e-v6-quiz-options > * {
  pointer-events: auto !important;
}

body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-main-trigger {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 205px !important;
  min-height: 52px !important;
  padding: 7px 15px !important;
  border: 2px solid #ffffff !important;
  border-radius: 17px !important;
  background: #0b55b7 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(11,85,183,.25), 0 0 0 2px rgba(11,85,183,.10) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  line-height: 1 !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-main-trigger .s2e-v6-trigger-icon {
  font-size: 18px !important;
  line-height: 1 !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-main-trigger > span:last-child {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 2px !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-main-trigger b {
  color: #fff !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-main-trigger small {
  color: rgba(255,255,255,.85) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
}

/* Three actions open above the single button. */
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-options-menu {
  display: none !important;
  width: 100% !important;
  padding: 7px !important;
  border: 1px solid #cfe2fa !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 12px 30px rgba(0,38,92,.17) !important;
  grid-template-columns: 1fr !important;
  gap: 5px !important;
  box-sizing: border-box !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options.menu-open .s2e-v6-options-menu {
  display: grid !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-option-action {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 100% !important;
  min-height: 43px !important;
  padding: 6px 12px !important;
  border: 1px solid #d5e5f8 !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: #0b4aa6 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 9px !important;
  cursor: pointer !important;
  box-shadow: none !important;
  text-align: right !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-option-action > span {
  width: 25px !important;
  text-align: center !important;
  font-size: 17px !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-option-action b {
  color: inherit !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-later-action {
  background: #eef7ff !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-finish-action {
  background: #f3fff7 !important;
  border-color: #bde8cb !important;
  color: #16834a !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-option-action:disabled {
  opacity: .6 !important;
  cursor: wait !important;
}

/* Question numbers open UPWARD above the menu; never push quiz content. */
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-question-panel {
  display: none !important;
  width: 100% !important;
  max-height: min(36vh, 245px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  padding: 9px !important;
  border: 1px solid #cfe2fa !important;
  border-radius: 16px !important;
  background: rgba(248,251,255,.99) !important;
  box-shadow: 0 12px 30px rgba(0,38,92,.17) !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 6px !important;
  box-sizing: border-box !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options.list-open .s2e-v6-question-panel {
  display: flex !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v9-qpanel-title {
  flex: 0 0 100% !important;
  width: 100% !important;
  margin: 0 0 2px !important;
  text-align: center !important;
  color: #0b4aa6 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-qbtn {
  width: 35px !important;
  height: 35px !important;
  min-width: 35px !important;
  min-height: 35px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #cfe3fb !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #0b4cab !important;
  -webkit-text-fill-color: #0b4cab !important;
  box-shadow: 0 2px 6px rgba(0,60,140,.06) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  text-decoration: none !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-qbtn.thispage,
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-qbtn.answersaved,
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-qbtn.answered,
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-qbtn.complete,
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-qbtn.correct {
  background: #0b55b7 !important;
  border-color: #0b55b7 !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-qbtn.s2e-v10-current {
  outline: 2px solid #ffbf57 !important;
  outline-offset: 2px !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-qbtn.flagged {
  outline: 2px solid #ffbf57 !important;
  outline-offset: 1px !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-q-empty {
  font-size: 12px !important;
  font-weight: 800 !important;
  color: #6b7f98 !important;
}

/* =========================================================
   A+ / A- text size controls
========================================================= */
body#page-mod-quiz-attempt .s2e-v9-zoom-control {
  min-height: 46px !important;
  height: 46px !important;
  padding: 0 11px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
body#page-mod-quiz-attempt .s2e-v9-zoom-caption {
  display: none !important;
}

/* Desktop/laptop: keep the options control in the unused far-left space. */
@media (min-width: 641px) {
  body#page-mod-quiz-attempt #s2e-v6-quiz-options {
    left: 24px !important;
    right: auto !important;
    transform: none !important;
    align-items: flex-start !important;
  }
  body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-options-menu,
  body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-question-panel {
    align-self: flex-start !important;
  }

  /* Move the text-size controls higher on laptop/desktop and label the pair,
     instead of putting separate words under A+ and A-. */
  body#page-mod-quiz-attempt .s2e-v9-zoom-group {
    position: relative !important;
    transform: translateY(-18px) !important;
    padding-bottom: 15px !important;
  }
  body#page-mod-quiz-attempt .s2e-v9-zoom-group .s2e-v9-zoom-caption {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    color: #657890 !important;
    -webkit-text-fill-color: #657890 !important;
    font-family: Tahoma,Arial,sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    pointer-events: none !important;
  }
}

@media (max-width: 640px) {

  body#page-mod-quiz-attempt #region-main,
  body#page-mod-quiz-attempt #page-content {
    padding-bottom: 165px !important;
  }
  body#page-mod-quiz-attempt #s2e-v6-quiz-options {
    left: auto !important;
    right: 14px !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px) !important;
    transform: none !important;
    width: min(310px, calc(100vw - 28px)) !important;
    align-items: flex-end !important;
  }

  /* Keep the closed button exactly where it is, but when the menu opens,
     lift the menu itself above the fixed Previous/Next strip. The JS sets
     --s2e-v6-open-bottom from the real strip position, so this also survives
     different phone heights and browser bars. */
  body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-options-menu {
    position: fixed !important;
    right: 14px !important;
    left: auto !important;
    bottom: var(--s2e-v6-open-bottom, 118px) !important;
    z-index: 2147483646 !important;
  }
  body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-question-panel {
    position: fixed !important;
    right: 14px !important;
    left: auto !important;
    bottom: calc(var(--s2e-v6-open-bottom, 118px) + var(--s2e-v6-menu-height, 150px) + 7px) !important;
    z-index: 2147483646 !important;
  }

  body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-main-trigger {
    width: 168px !important;
    min-height: 48px !important;
    padding: 6px 12px !important;
    border-radius: 15px !important;
  }
  body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-main-trigger b {
    font-size: 14px !important;
  }
  body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-options-menu,
  body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-question-panel {
    width: min(300px, calc(100vw - 28px)) !important;
    border-radius: 14px !important;
    align-self: flex-end !important;
  }
  body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-option-action {
    min-height: 41px !important;
    padding: 5px 10px !important;
  }
  body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v9-qpanel-title {
  flex: 0 0 100% !important;
  width: 100% !important;
  margin: 0 0 2px !important;
  text-align: center !important;
  color: #0b4aa6 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-qbtn {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    font-size: 12px !important;
  }
}


/* =========================================================
   V12 SAFE RECOVERY — NEVER HIDE QUESTION BLOCKS
========================================================= */
body#page-mod-quiz-attempt .que.s2e-v11-hidden-question,
body#page-mod-quiz-attempt .que.s2e-v11-active-question {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}
body#page-mod-quiz-attempt .que {
  scroll-margin-top: 128px !important;
}
body#page-mod-quiz-attempt .que .questionflag,
body#page-mod-quiz-attempt .que .questionflaglink,
body#page-mod-quiz-attempt .que [class*="questionflag"] {
  max-width: calc(100vw - 24px) !important;
  overflow: visible !important;
  clip: auto !important;
}

@media (min-width: 641px) {
  body#page-mod-quiz-attempt #s2e-v11-text-size-dock {
    position: fixed !important;
    top: 112px !important;
    right: 34px !important;
    z-index: 2147483645 !important;
    display: grid !important;
    grid-template-columns: 48px 48px !important;
    grid-template-rows: 46px auto !important;
    gap: 5px 7px !important;
    align-items: center !important;
    justify-items: center !important;
    direction: ltr !important;
    width: 103px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
  }
  body#page-mod-quiz-attempt #s2e-v11-text-size-dock .s2e-v9-zoom-control {
    width: 48px !important;
    min-width: 48px !important;
    height: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    transform: none !important;
  }
  body#page-mod-quiz-attempt #s2e-v11-text-size-dock .s2e-v11-text-size-caption {
    grid-column: 1 / -1 !important;
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    text-align: center !important;
    color: #657890 !important;
    -webkit-text-fill-color: #657890 !important;
    font-family: Tahoma,Arial,sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    white-space: nowrap !important;
  }
}
@media (max-width: 640px) {
  body#page-mod-quiz-attempt #s2e-v11-text-size-dock { display:none !important; }
}

/* =========================================================
   STEP2ENGLISH QUIZ OPTIONS v787
   True far-left desktop placement.
========================================================= */
@media (min-width: 992px) {
  html body#page-mod-quiz-attempt #s2e-v6-quiz-options {
    left: 10px !important;
    right: auto !important;
    bottom: 18px !important;
    transform: none !important;
    width: 205px !important;
    max-width: 205px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin: 0 !important;
  }

  html body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-main-trigger {
    width: 205px !important;
    margin: 0 !important;
    align-self: flex-start !important;
  }

  html body#page-mod-quiz-attempt #s2e-v6-quiz-options.menu-open,
  html body#page-mod-quiz-attempt #s2e-v6-quiz-options.list-open {
    width: 350px !important;
    max-width: min(350px, calc(100vw - 20px)) !important;
  }

  html body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-options-menu,
  html body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-question-panel {
    align-self: flex-start !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================================================
   STEP2ENGLISH QUIZ OPTIONS v788
   Mobile: true viewport-centered trigger + opened panels.
========================================================= */
@media (max-width: 640px) {
  html body#page-mod-quiz-attempt #s2e-v6-quiz-options {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(310px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  html body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-main-trigger {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  html body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-options-menu,
  html body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-question-panel {
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(300px, calc(100vw - 28px)) !important;
    max-width: calc(100vw - 28px) !important;
    align-self: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================================================
   S2E QUIZ V792 — question-number state colors (CSS only)
   Blue = current question. Orange = reminder/flag only.
   No JavaScript behavior is changed here.
========================================================= */
body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-qbtn.s2e-v10-current:not(.flagged) {
  outline: 2px solid #7cc7f5 !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, .12), 0 2px 6px rgba(0,60,140,.06) !important;
}

body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-qbtn.flagged {
  background: #fff4e5 !important;
  background-color: #fff4e5 !important;
  border: 2px solid #f59e0b !important;
  color: #b45309 !important;
  -webkit-text-fill-color: #b45309 !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(245,158,11,.10), 0 3px 8px rgba(180,83,9,.10) !important;
}

body#page-mod-quiz-attempt #s2e-v6-quiz-options .s2e-v6-qbtn.flagged.s2e-v10-current {
  background: #fff4e5 !important;
  background-color: #fff4e5 !important;
  border-color: #f59e0b !important;
  color: #b45309 !important;
  -webkit-text-fill-color: #b45309 !important;
  outline: 2px solid #fbbf24 !important;
  outline-offset: 2px !important;
}