/* =================================================================
   QUIZ CATEGORY PAGE (qc- prefix)
   Shared across all category pages: astrology-basics, kp-astrology-
   basics, kp-astrology-rules. File: quiz/[category]/index.html
   Matches the premium violet + gold theme frozen on quiz/index.html.
   ================================================================= */

:root {
  --qc-hero-1: #1a2472;
  --qc-hero-2: #312e81;
  --qc-hero-3: #4338ca;
  --qc-violet-deep: #3b0764;
  --qc-ink:       #1a1330;
  --qc-body-grey: #6b6478;
}

.qc-page-body {
  background: var(--quiz-light);
}

/* ---------- CONTENT SWITCHING (shared pattern with hub) ---------- */
body.lang-en .qc-txt-ta { display: none !important; }
body.lang-ta .qc-txt-en { display: none !important; }

/* ---------- TOP BAR: back link + language toggle ---------- */
.qc-topbar {
  background: var(--quiz-white);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-shadow: 0 4px 10px -6px rgba(26,19,48,0.18);
}

.qc-back-link {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--qc-violet-deep);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  background: #f3ecfe;
  border-radius: 20px;
  padding: 8px 16px;
  transition: background 0.2s ease;
}
.qc-back-link:hover { background: #ebe0fd; }

.qc-lang-toggle {
  display: inline-flex;
  background: var(--quiz-light);
  border: 1px solid #e2e8f0;
  border-radius: 30px;
  padding: 3px;
  gap: 2px;
  flex-shrink: 0;
}

.qc-lang-btn {
  border: none;
  background: transparent;
  font-family: 'Manrope', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--qc-body-grey);
  padding: 5px 14px;
  border-radius: 24px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.qc-lang-btn.qc-active {
  background: #6d28d9;
  color: var(--quiz-white);
}

/* ---------- BANNER ---------- */
.qc-banner {
  background: linear-gradient(135deg, var(--qc-hero-1) 0%, var(--qc-hero-2) 55%, var(--qc-hero-3) 100%);
  padding: 26px 20px 24px;
  text-align: center;
}

.qc-banner-inner {
  max-width: 560px;
  margin: 0 auto;
}

.qc-banner h1 {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  color: var(--quiz-white);
  font-size: clamp(24px, 7vw, 32px);
  line-height: 1.2;
  margin: 0 0 8px;
}

.qc-banner p {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  color: rgba(255,255,255,0.9);
  font-size: clamp(13px, 3.3vw, 15px);
  line-height: 1.6;
  max-width: 42ch;
  margin: 12px auto 0;
}

.qc-banner-badge {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--quiz-white);
  background: rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 6px 16px;
  display: inline-block;
}

/* Two-pill row — levels count + questions-per-level, side by side
   under the banner heading. */
.qc-banner-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

/* ---------- TOPICS SECTION ---------- */
.qc-topics-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 20px 6px;
  text-align: center;
}

.qc-section-label {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: clamp(20px, 5.5vw, 25px);
  letter-spacing: -0.2px;
  color: var(--qc-ink);
  border-bottom: 3px solid var(--quiz-gold);
  padding-bottom: 2px;
  margin-bottom: 18px;
}

.qc-chip-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  row-gap: 12px;
  column-gap: 20px;
}

.qc-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  color: var(--qc-ink);
  font-size: 14.5px;
}
.qc-chip::before {
  content: '\25C6';
  font-size: 12px;
  color: var(--quiz-gold);
}
.qc-chip.qc-txt-en { font-family: 'Manrope', sans-serif; font-weight: 600; }
.qc-chip.qc-txt-ta { font-family: 'Catamaran', sans-serif; font-weight: 400; }

/* ---------- LEVELS SECTION: one row style for every level ---------- */
.qc-levels-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 26px 20px 46px;
}

.qc-level-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: var(--quiz-white);
  border-left: 5px solid var(--quiz-gold);
  border-radius: 12px;
  padding: 17px 20px;
  margin-bottom: 12px;
  box-shadow: 0 4px 14px rgba(26,19,48,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.qc-level-row[data-state="available"]:hover,
.qc-level-row[data-state="completed"]:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(26,19,48,0.14);
}

.qc-level-row-name {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: var(--qc-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.qc-level-check {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  color: #166534;
}

/* Completed level — accent bar turns green */
.qc-level-row[data-state="completed"] {
  border-left-color: var(--quiz-green, #16a34a);
}

/* Available level — gold Select button */
.qc-level-cta {
  display: inline-block;
  flex-shrink: 0;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 15.5px;
  letter-spacing: 0.2px;
  border-radius: 50px;
  padding: 10px 22px;
  text-decoration: none;
  color: #000000;
  background: linear-gradient(135deg, var(--quiz-gold) 0%, var(--quiz-gold2) 100%);
  box-shadow: 0 5px 14px rgba(201,168,76,0.35);
  transition: opacity 0.2s, transform 0.15s;
}
.qc-level-cta:hover { opacity: 0.94; transform: translateY(-1px); }
.qc-level-cta:active { transform: scale(0.96); }

/* Completed level — quieter outline "Retake" instead of solid gold */
.qc-level-cta.qc-cta-outline {
  background: transparent;
  color: #000000;
  border: 2px solid var(--quiz-gold);
  box-shadow: none;
  padding: 8px 20px;
}

/* Not-yet-built level — muted grey accent bar, no shadow, disabled tag */
.qc-level-row[data-state="soon"] {
  border-left-color: #d7d2e0;
  box-shadow: none;
  background: #fbfafd;
}
.qc-level-row[data-state="soon"] .qc-level-row-name { color: #b2acc0; }
.qc-level-soon-tag {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #9a94ab;
  background: #f1eff6;
  border-radius: 20px;
  padding: 8px 16px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Locked level — the level itself exists (built), but the previous
   level in this category isn't completed yet. Same muted treatment
   as "soon" visually, distinct tag text so it's clear why it's not
   selectable. See hard-lock note in the page script. */
.qc-level-row[data-state="locked"] {
  border-left-color: #d7d2e0;
  box-shadow: none;
  background: #fbfafd;
}
.qc-level-row[data-state="locked"] .qc-level-row-name { color: #b2acc0; }
.qc-level-locked-tag {
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #9a94ab;
  background: #f1eff6;
  border-radius: 20px;
  padding: 8px 16px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ---------- BOTTOM SHARE PROMPT ---------- */
.qc-share-wrap {
  max-width: 480px;
  margin: 10px auto 0;
  padding-top: 22px;
  border-top: 1px solid #eef0f6;
  text-align: center;
}

.qc-share-text {
  font-family: 'Catamaran', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--qc-body-grey);
  margin: 0 0 14px;
}

.qc-share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--quiz-white);
  background: #25D366;
  border-radius: 50px;
  padding: 11px 24px;
  text-decoration: none;
  box-shadow: 0 5px 14px rgba(37,211,102,0.35);
  transition: opacity 0.2s, transform 0.15s;
}
.qc-share-btn:hover { opacity: 0.92; transform: translateY(-1px); color: var(--quiz-white); }
.qc-share-btn:active { transform: scale(0.96); }
.qc-share-btn svg { width: 16px; height: 16px; fill: currentColor; }