/* Mutashabihat test demo widget — shared by the landing page section and /demo/. */

.mut-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--divider);
  overflow: hidden;
}
.mut-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 2px;
  transition: width .2s ease;
}

.mut-opt-btn {
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
  width: 100%;
}
/* Only real pointer devices (mouse) get the hover highlight — on touch
   screens :hover can "stick" after a tap since there's no cursor to leave. */
@media (hover: hover) and (pointer: fine) {
  .mut-opt-btn:hover:not(:disabled) {
    border-color: var(--gold);
    transform: translateY(-1px);
  }
}
.mut-opt-btn:disabled { cursor: default; }

.mut-opt-correct { background: var(--green) !important; border-color: var(--green) !important; }
.mut-opt-correct span { color: #fff !important; }
.mut-opt-wrong { background: var(--red) !important; border-color: var(--red) !important; }
.mut-opt-wrong span { color: #fff !important; }