/* Loaded here rather than only via a <link> in the template: this stylesheet is
   served straight from disk, so the font arrives without waiting on a Node
   restart to pick up a changed .hbs. Must stay above every rule below. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Tamil:wght@400;500;600;700&family=Noto+Sans+Devanagari:wght@400;500;600;700&display=swap');

/* Quiz text is AI-generated and may be in Tamil or Hindi. Barlow (forced on
   body with !important in style.css) covers Latin only, so Indic characters
   would otherwise fall back to whatever the reader's OS provides — or render as
   tofu boxes on a system with no Indic font. Barlow stays first so Latin text
   and digits keep the existing look; the browser falls back per-glyph to the
   Noto faces for Tamil and Devanagari. Inherited !important from body loses to
   a directly-matching declaration, so no !important is needed here. */
/* Each element is named because smart-read-press.css sets font-family on `*`,
   and a direct match beats inheritance — styling only .quiz-container would
   leave the <li> answer options on the Latin-only reset stack. */
.quiz,
.quiz-container,
.quiz-header .quiz-title,
.quiz-content .question-text,
.quiz-content .answer-options,
.quiz-content .answer-options li,
.quiz .config-container,
.quiz .config-container p,
.quiz .config-container h2,
.quiz .result-container,
.quiz .result-container p,
.quiz .result-container h4 {
  font-family: "Barlow", "Noto Sans Tamil", "Noto Sans Devanagari", sans-serif;
}


/* Importing Google fonts - Montserrat */
/* @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100..900&display=swap'); */

.feature-container{
  width: 100%;
  height: auto;
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
}

.quiz{
  width: 100%;
  height: fit-content;
  display: none;
}

:where(.config-container, .quiz-container, .result-container) {
  display: none;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

/* Quiz Configuration Stylings */
.config-container  {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.25rem;
  width: 100%;
  height: auto;
  padding: 0;
  text-align: center;
}

.config-container .config-title {
  font-size: 1.31rem;
}

.config-container .config-option {
  margin-top: 25px;
}

.config-option .option-title {
  font-weight: 500;
  font-size: 1.125rem;
  margin-bottom: 20px;
}

.config-option .category-options {
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(2, 1fr);
}

.config-option .question-options {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 0 30px;
  justify-content: center;
}

.config-option button {
  padding: 12px;
  font-size: 0.938rem;
  color: #000;
  cursor: pointer;
  font-weight: 500;
  border-radius: 7px;
  background: #fff;
  border: 1px solid #9B8FFF;
  transition: 0.3s ease;
}

.config-option button.active {
  color: #5145BA;
  border-color: #5145BA;
  background: #dfdafd;
}

.config-option button:hover,
.quiz-content .answer-option:hover {
  background: #dad5fd;
}

.config-option .question-options button {
  flex: 1 1 10%;
}

.config-container .start-quiz-btn,
.quiz-footer .next-question-btn,
.result-container .try-again-btn {
  color: #fff;
  border: none;
  font-weight: 500;
  background: #5145BA;
  padding: 13px 25px;
  cursor: pointer;
  font-size: 1rem;
  border-radius: 7px;
  transition: background 0.3s ease;
}

.config-container .start-quiz-btn {
  display: none;
}

.config-container .start-quiz-btn:hover,
.quiz-footer .next-question-btn:hover,
.result-container .try-again-btn:hover {
  background: #403795;
}

/* Quiz Container Stylings */


.quiz-container .quiz-header {
  display: flex;
  padding: 14px 25px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.09);
}

.quiz-header .quiz-title {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
  flex: 1;
  text-align: center;
}

.quiz-header .quiz-timer {
  display: flex;
  width: 70px;
  color: #fff;
  gap: 5px;
  align-items: center;
  background: #32313C;
  border-radius: 7px;
  padding: 7px 9px;
  font-weight: 600;
  transition: 0.2s ease;
}

.quiz-header .quiz-timer span {
  font-size: 1.4rem;
}

.quiz-header .quiz-timer p{
  margin-bottom: 0% !important;
}

.quiz-container .quiz-content {
  padding: 20px 25px 25px;
}

.quiz-content .question-text {
  font-size: 1.5rem;
  font-weight: 600;
}

.quiz-content .answer-options {
  list-style: none;
  display: flex;
  gap: 15px;
  margin-top: 20px;
  flex-direction: column;
  padding-left: 0%;
}

.quiz-content .answer-option {
  display: flex;
  cursor: pointer;
  align-items: center;
  font-weight: 500;
  border-radius: 7px;
  padding: 13px 16px;
  border: 1px solid #B5ACFF;
  background: #F3F1FF;
  justify-content: space-between;
  transition: 0.3s ease;
}

.quiz-content .answer-option span {
  display: block;
  flex-shrink: 0;
  margin: -4px -3px -4px 12px;
}

.quiz-content .answer-option.correct {
  border-color: #B7E1C1;
  background: #D4EDDA;
  color: #155724;
}

.quiz-content .answer-option.correct span {
  color: #16AE56;
}

.quiz-content .answer-option.incorrect {
  border-color: #F4BEC3;
  background: #F8D7DA;
  color: #721C24;
}

.quiz-content .answer-option.incorrect span {
  color: #F23723;
}

.quiz-container .quiz-footer {
  padding: 15px 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #C6C6C6;
}

.quiz-footer .question-status {
  font-weight: 500;
}

.quiz-footer .question-status b,
.result-container .result-message b {
  font-weight: 600;
}

.quiz-footer .next-question-btn {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 9px 17px;
}

/* Quiz Result Stylings */
.result-container {
  text-align: center;
  padding: 40px;
  width: 100%;
}

.result-container .result-img {
  width: 60px;
}

.result-container .result-title {
  margin-top: 30px;
}

.result-container .result-message {
  font-size: 1.125rem;
  font-weight: 500;
  margin-top: 15px;
}

.result-container .try-again-btn {
  padding: 12px 20px;
  margin-top: 30px;
}



.start-quiz-loader {
  width: 50px;
  padding: 8px;
  margin: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #5372F0;
  --_m: 
    conic-gradient(#0000 10%,#000),
    linear-gradient(#000 0 0) content-box;
  -webkit-mask: var(--_m);
          mask: var(--_m);
  -webkit-mask-composite: source-out;
          mask-composite: subtract;
  animation: l3 2s infinite linear;
}
@keyframes l3 {to{transform: rotate(1turn)}}


.info-list {
  padding: 15px 0px;
  text-align: left;
  font-weight: 500;
  display: flex;
  flex-direction: column;
}
.config-container .info-list .info {
  margin: 5px 0;
  font-size: 17px;
  padding: 5px;
}
.config-container .info-list .info span {
  font-weight: 600;
  color: #5372F0 !important;
}

/* Media query code for mobile screens */
@media (max-width: 624px) {

  .config-container,
  .quiz-container .quiz-content {
    padding: 20px;
  }

  .quiz-content .answer-option {
    padding: 12px 10px 12px 14px;
  }

  .config-container .question-options {
    padding: 0 15px;
  }

  .quiz-container .quiz-header,
  .quiz-container .quiz-footer {
    padding: 13px 20px;
  }

  .quiz-header .quiz-title,
  .quiz-content .question-text {
    font-size: 1.3rem;
  }

  .result-container {
    padding: 40px 20px;
  }

  .result-container .result-title {
    font-size: 1.4rem;
  }

  .quiz-content .answer-options {
    padding-left: 0px !important;
  }

  .timer-duration{
    margin-bottom: 0% !important ;
  }
}

/* Align icons and text for quiz UI */
.quiz .start-quiz-btn,
.quiz .next-question-btn,
.quiz .try-again-btn,
.quiz .quiz-header,
.quiz .quiz-header .material-symbols-rounded,
.quiz .quiz-timer,
.quiz .answer-options li,
.quiz .result-container img,
.quiz .config-container .quiz-rule,
.quiz .config-container .quiz-rule .rule-number {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	vertical-align: middle;
}

.quiz .quiz-header { justify-content: space-between; }
.quiz .quiz-timer { display: inline-flex; align-items: center; gap: 0.35rem; }
.quiz .answer-options li { display: flex; align-items: center; }

/* Mobile responsiveness */
@media (max-width: 768px) {
	/* height auto — let content determine size */
	.quiz-panel-overlay .quiz-panel-content {
		width: 100% !important;
		height: auto !important;
		max-width: none !important;
		border-radius: 16px 16px 0 0 !important;
		padding: 1rem !important;
	}

	.quiz .config-container {
		padding: 1rem !important;
	}

	/* Header stacks nicely */
	.quiz .quiz-header {
		/* flex-direction: column; */
		align-items: flex-start;
		gap: 4.5rem;
	}
	.quiz .quiz-title { font-size: 1.1rem; text-align: left; }
	.quiz .quiz-timer { align-self: flex-start; }

	/* Fix large margins that break layout */
	.quiz .quiz-title {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* Options full width */
	.quiz .answer-options { width: 100%; }
	.quiz .answer-options li {
		width: 100%;
		padding: 0.85rem 1rem;
		font-size: 0.95rem;
	}

	/* Buttons full width and larger tap targets */
	.quiz .start-quiz-btn,
	.quiz .next-question-btn,
	.quiz .try-again-btn {
		width: 100%;
		justify-content: center;
		padding: 0.9rem 1rem;
		font-size: 1rem;
	}

	/* Reduce gaps and whitespace */
	.quiz .config-container .quiz-rules { gap: 0.75rem !important; }
	.quiz .config-container .quiz-rule { gap: 0.5rem !important; }
	.quiz .result-container { padding: 1rem !important; }

	/* Images */
	.quiz .result-container .result-img {
		max-width: 70%;
		height: auto;
	}
}

/* Mobile typography/alignment for quiz */
@media (max-width: 768px) {
	.quiz .quiz-title { font-size: 1.1rem !important; text-align: left; }
	.quiz .quiz-timer { font-size: 0.95rem; }
	.quiz .question-text { font-size: 1.05rem; line-height: 1.4; text-align: left; }
	.quiz .answer-options li { text-align: left; }
	.quiz .next-question-btn, .quiz .start-quiz-btn { font-size: 1rem; }
	.quiz .result-title { font-size: 1.1rem; }
	.quiz .result-message { font-size: 0.95rem; }
}