/* Frontend CSS for Custom Quiz - copied from user's design */

.container { 
  padding: 2vw 2vw 2vw 2vw; 
  background-color : #F6FFF6;
  position:relative;
}
.chapter-review {
  letter-spacing: 2px;
  font-size: 1rem;
  color: #118C4F;
  margin-bottom: 7px;
  font-weight: 500;
}
.heading {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 35px 0;
  color: #171717;
}
.question-info {
  font-size:1.04rem;
  color: #444;
  letter-spacing: 2px;
  margin-bottom: 18px;
  font-weight: 600;
}
.question-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: #202122;
  margin-bottom: 24px;
  margin-top: 0;
  line-height: 1.36;
}
.options-list {
  list-style: none;
  padding: 0;
  margin: 0 0 34px 0;
}
.option-item {
  padding: 10px;
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 6px;
  border: 2px solid transparent;
  transition: background 0.19s, border 0.19s;
}
.option-item.selected, .option-item:hover {
  background-color: #e8faee;
  border-color: #118C4F;
}
.option-item.correct {
  background-color: #bdf8c4;
  border-color: #118C4F;
}
.option-item.incorrect {
  background-color: #ffdddd;
  border-color: #ff6666;
}
.custom-radio {
  margin: auto 10px auto 0px;
  width: 21px;
  height: 21px;
  accent-color: #118C4F;
  flex-shrink: 0;
}
.option-label {
  font-size: 1.07rem;
  color: #39374C;
  user-select: none;
}
.submit-btn {
  display:flex;
  margin-left:auto;
  background: #118C4F!important;
  color: #fff;
  font-size: 1.13rem;
  font-weight: 600;
  border: none;
  border-radius: 26px;
  padding: 12px 38px;
  letter-spacing: .4px;
  cursor: pointer;
  transition: background .18s;
}
.result {
  font-size: 1.1rem;
  color: #118C4F;
  font-weight: 700;
  text-align: left;
}
hr.solid {
  border-top: 1px solid #118C4F;
  margin-bottom:30px;
}
@media (max-width: 700px) {
  .container { padding: 15px 4vw 22px 4vw; }
  .heading { font-size:1.5rem; }
  .question-title { font-size:1.2rem; }
  .option-item {
    padding: 5px;
  }
}