/* =================================================================
   QUIZ LEVEL REGISTRATION FORM (qr- prefix)
   Shared across every category's level-1.html (and future levels,
   for categories that ask again). Matches the violet + gold theme.
   ================================================================= */

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

body.lang-en .qr-txt-ta { display: none !important; }
body.lang-ta .qr-txt-en { display: none !important; }

/* ---------- FORM WRAP ---------- */
.qr-form-wrap {
  max-width: 440px;
  margin: 0 auto;
  padding: 26px 20px 50px;
}

.qr-form-card {
  background: var(--quiz-white);
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(26,19,48,0.12);
  overflow: hidden;
  animation: qr-card-in 0.5s ease both;
}

@keyframes qr-card-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .qr-form-card { animation: none; }
}

.qr-form-intro {
  text-align: center;
  padding: 22px 24px 20px;
  background: #3b0764;
}

.qr-form-intro h2 {
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 25px;
  color: var(--quiz-white);
  margin: 0 0 6px;
}

.qr-form-intro p {
  font-family: 'Catamaran', sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  color: rgba(255,255,255,0.85);
  line-height: 1.6;
  margin: 0;
}

.qr-form-fields {
  padding: 24px 24px 100px;
}

/* ---------- FIELDS ---------- */
.qr-field {
  margin-bottom: 18px;
}

.qr-field label {
  display: block;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--qc-ink, #1a1330);
  margin-bottom: 4.5px;
}

.qr-required {
  color: #dc2626;
  font-weight: 800;
}

.qr-field input[type="text"],
.qr-field input[type="tel"],
.qr-field input[type="email"] {
  width: 100%;
  font-family: 'Manrope', sans-serif;
  font-size: 14.5px;
  color: var(--qc-ink, #1a1330);
  background: var(--quiz-light);
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 14px;
  transition: border-color 0.2s ease;
}

.qr-field input:focus {
  outline: none;
  border-color: #7c3aed;
  background: var(--quiz-white);
}

.qr-field input.qr-input-error {
  border-color: #dc2626;
}

.qr-error-msg {
  display: none;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 12px;
  color: #dc2626;
  margin-top: 6px;
}
.qr-field.qr-has-error .qr-error-msg { display: block; }

/* ---------- YES/NO TOGGLE ---------- */
.qr-yn-toggle {
  display: flex;
  gap: 10px;
}

.qr-yn-btn {
  flex: 1;
  text-align: center;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--qc-body-grey, #6b6478);
  background: var(--quiz-light);
  border: 1.5px solid #e2e8f0;
  border-radius: 10px;
  padding: 11px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.qr-yn-btn.qr-yn-active {
  background: linear-gradient(135deg, #7c3aed, #4c1d95);
  color: var(--quiz-white);
  border-color: transparent;
}

/* ---------- SUBMIT ---------- */
.qr-submit-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  background: var(--quiz-white);
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -6px 20px rgba(26,19,48,0.12);
  text-align: center;
}

.qr-submit-btn {
  display: block;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  font-family: 'Manrope', sans-serif;
  font-weight: 800;
  font-size: 19px;
  color: #000000;
  background: linear-gradient(135deg, var(--quiz-gold) 0%, var(--quiz-gold2) 100%);
  border: none;
  border-radius: 50px;
  padding: 14px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(201,168,76,0.4);
  transition: opacity 0.2s, transform 0.15s;
}
.qr-submit-btn:hover { opacity: 0.94; transform: translateY(-1px); }
.qr-submit-btn:active { transform: scale(0.98); }

.qr-saved-tick {
  display: none;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: #166534;
  margin-top: 12px;
}
.qr-saved-tick.qr-show { display: block; }