/* QALC Nahw Quiz — public styles.
   Design language: indigo + Hafs (Arabic) + Hind Siliguri (Bengali).
   The .ar / .bn classes match the inline markup used inside the CSV question bank. */

@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&display=swap');

@font-face {
  font-family: 'Hafs';
  src: url('https://quranicarabiclearningcafe.com/wp-content/fonts/hafs/hafs.18.woff2') format('woff2');
  font-display: swap;
}

.qnq-app {
  --qnq-indigo: #4b0082;
  --qnq-indigo-2: #6a0dad;
  --qnq-bg: #e6f0ff;
  --qnq-soft: #d1c4e9;
  --qnq-green: #1b8a4c;
  --qnq-red: #c0392b;
  font-family: 'Hind Siliguri', sans-serif;
  color: #222;
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px;
  box-sizing: border-box;
}
.qnq-app *, .qnq-app *::before, .qnq-app *::after { box-sizing: border-box; }

/* Inline content classes used inside questions/options/explanations (from CSV). */
.qnq-app .ar, .qnq-app .qnq-ar { font-family: 'Hafs', serif; direction: rtl; unicode-bidi: isolate; }
.qnq-app .bn { font-family: 'Hind Siliguri', sans-serif; font-weight: 400; }

/* ------------------------------------------------------------- Generic UI */
.qnq-card { background:#fff; border:2px solid var(--qnq-soft); border-radius:16px; padding:20px; box-shadow:0 8px 18px rgba(0,0,0,.12); margin:12px 0; }
.qnq-h { color: var(--qnq-indigo); font-size:1.4rem; font-weight:800; margin:0 0 14px; }
.qnq-muted { color:#555; font-size:.9rem; }
.qnq-notice { background:#fff8e6; border:1px solid #f0d589; border-radius:10px; padding:14px 16px; }
.qnq-intro { font-size:1.05rem; color: var(--qnq-indigo); font-weight:600; }

.qnq-btn { background: var(--qnq-indigo); color:#fff; border:none; border-radius:10px; padding:10px 20px; min-width:120px; font-size:1rem; font-family:inherit; cursor:pointer; transition:background .25s, transform .15s; }
.qnq-btn:hover { background: var(--qnq-indigo-2); color:#fff; }
.qnq-btn:active { transform: scale(.97); }
.qnq-btn:disabled { opacity:.55; cursor:not-allowed; }
.qnq-btn.secondary { background:#fff; color: var(--qnq-indigo); border:2px solid var(--qnq-indigo); }
.qnq-btn.secondary:hover { background:#f5f0ff; }
.qnq-btn.small { min-width:0; padding:6px 14px; font-size:.9rem; }

.qnq-loading { text-align:center; padding:40px 10px; color: var(--qnq-indigo); font-weight:600; }
.qnq-spinner { display:inline-block; width:18px; height:18px; vertical-align:-3px; border:3px solid var(--qnq-soft); border-top-color: var(--qnq-indigo); border-radius:50%; animation: qnqspin .8s linear infinite; }
@keyframes qnqspin { to { transform: rotate(360deg); } }

.qnq-form-msg { min-height:22px; font-weight:600; margin:8px 0; }
.qnq-form-msg.error { color: var(--qnq-red); }
.qnq-form-msg.success { color: var(--qnq-green); }

.qnq-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:12px 16px; margin-bottom:12px; }
.qnq-app label { display:flex; flex-direction:column; font-weight:600; font-size:.92rem; color:#333; gap:4px; }
.qnq-app input[type=text], .qnq-app input[type=email], .qnq-app input[type=password], .qnq-app input[type=tel], .qnq-app input[type=search], .qnq-app select {
  border:1.5px solid var(--qnq-soft); border-radius:8px; padding:9px 12px; font-family:inherit; font-size:1rem; background:#fff; color:#222;
}
.qnq-app input:focus, .qnq-app select:focus { outline:2px solid var(--qnq-indigo-2); border-color: var(--qnq-indigo-2); }

/* ------------------------------------------------------------- Dashboard */
.qnq-welcome { font-size:1.5rem; font-weight:800; color: var(--qnq-indigo); margin:6px 0 2px; }
.qnq-welcome small { display:block; font-size:.95rem; color:#555; font-weight:500; }

.qnq-stats { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:16px 0; }
.qnq-stat { background:#f8f5ff; border:1px solid var(--qnq-soft); border-radius:14px; padding:14px; text-align:center; }
.qnq-stat .num { display:block; font-size:1.7rem; font-weight:800; color:#2b0050; }
.qnq-stat .lbl { font-size:.85rem; color:#555; font-weight:600; }

.qnq-menu { display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 18px; }
.qnq-menu button { background:#fff; color: var(--qnq-indigo); border:2px solid var(--qnq-soft); border-radius:999px; padding:8px 16px; font-family:inherit; font-weight:600; font-size:.92rem; cursor:pointer; transition:all .2s; }
.qnq-menu button:hover { border-color: var(--qnq-indigo); }
.qnq-menu button.active { background: var(--qnq-indigo); color:#fff; border-color: var(--qnq-indigo); }

/* Module cards */
.qnq-modules { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px; margin:16px 0; }
.qnq-module-card { background:#fff; border:2px solid var(--qnq-soft); border-radius:16px; padding:20px; text-align:center; box-shadow:0 6px 14px rgba(0,0,0,.08); display:flex; flex-direction:column; }
.qnq-module-card .ico { font-size:2.4rem; }
.qnq-module-card h3 { color: var(--qnq-indigo); font-size:1.5rem; margin:6px 0 2px; }
.qnq-module-card .en { color:#777; font-size:.85rem; margin-bottom:10px; }
.qnq-module-card .meta { color:#555; font-size:.9rem; margin-bottom:10px; }
.qnq-progress-bar { background:#eee; border-radius:999px; height:14px; overflow:hidden; margin:6px 0 4px; }
.qnq-progress-bar > span { display:block; height:100%; background:linear-gradient(90deg,#6a0dad,#9b59d0); transition:width .6s; }
.qnq-module-card .pct { font-weight:700; color: var(--qnq-indigo); margin-bottom:12px; }
.qnq-module-card .qnq-btn { margin-top:auto; }
.qnq-module-card.done { border-color: var(--qnq-green); }
.qnq-module-badge { display:inline-block; font-size:.78rem; font-weight:700; color:#fff; background: var(--qnq-green); border-radius:999px; padding:2px 10px; margin-bottom:8px; }

/* ----------------------------------------------------------------- Quiz */
.qnq-qz-box { background:#90e0ef !important; color:#0F172A !important; padding:30px; border-radius:12px; box-shadow:0 4px 15px rgba(0,0,0,.1); margin:12px 0; }
.qnq-qz-box h2, .qnq-qz-box h3, .qnq-qz-box h4, .qnq-qz-box p, .qnq-qz-box li { color:#0F172A; }
.qnq-qz-meta { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; margin-bottom:12px; font-weight:600; color:#0F172A; }
.qnq-quiz-timer { font-weight:800; color:#0F172A; font-size:1.05rem; background:rgba(255,255,255,.6); border-radius:999px; padding:4px 16px; display:inline-block; }
.qnq-quiz-timer.danger { color:#c62828; background:#ffe5e2; }
.qnq-qz-progress { background:rgba(255,255,255,.5); border-radius:999px; height:8px; overflow:hidden; margin-bottom:14px; }
.qnq-qz-progress > span { display:block; height:100%; background: var(--qnq-indigo); transition:width .4s; }

.qnq-qz-question { font-size:1.4rem !important; font-weight:700; margin:0 0 20px; color:#111 !important; line-height:1.6; }
.qnq-qz-question .ar, .qnq-qz-question .qnq-ar { font-size:2.2rem; line-height:1.9; }

.qnq-qz-options { margin:14px 0; }
.qnq-qz-options button {
  display:block !important; margin:10px auto !important; padding:16px 22px !important; width:90% !important; min-width:0 !important;
  background:#fff !important; color:#000 !important; border:2px solid #ccc !important; border-radius:10px !important; text-align:left !important;
  cursor:pointer; font-size:1.25rem !important; line-height:1.6 !important; font-family:inherit !important; font-weight:400 !important;
  text-transform:none !important; box-shadow:none !important; transition:background-color .3s, border-color .3s; white-space:normal !important;
}
.qnq-qz-options button .ar, .qnq-qz-options button .qnq-ar { font-size:1.9rem; }
.qnq-qz-options button:hover:not(:disabled) { background:#dce2eb !important; }
.qnq-qz-options button:focus-visible { outline:3px solid rgba(33,150,243,.65); outline-offset:3px; }
.qnq-qz-options button.correct { background:#4CAF50 !important; color:#fff !important; border-color:#388E3C !important; }
.qnq-qz-options button.wrong { background:#f44336 !important; color:#fff !important; border-color:#c62828 !important; }
.qnq-qz-options button:disabled { cursor:default; }

.qnq-qz-explanation { display:none; margin-top:20px; padding:15px; background:#eef3fc; border-left:5px solid #2196f3; border-radius:8px; font-size:1.1rem; line-height:1.7; }
.qnq-qz-explanation.show { display:block; }
.qnq-qz-explanation .ar, .qnq-qz-explanation .qnq-ar { font-size:1.7rem; line-height:1.9; color: var(--qnq-indigo); }

.qnq-qz-nav { margin-top:25px; text-align:right; }
.qnq-qz-nav button { padding:10px 22px !important; border:none !important; background:#2196f3 !important; color:#fff !important; border-radius:8px !important; cursor:pointer; font-weight:600 !important; font-size:1.2rem !important; font-family:inherit !important; min-width:0 !important; width:auto !important; }
.qnq-qz-nav button:disabled { background:#aaa !important; cursor:not-allowed; }

/* Correct/Wrong popup */
.qnq-popup { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(15,23,42,.28); z-index:99999; opacity:0; pointer-events:none; transition:opacity .25s ease; }
.qnq-popup.show { opacity:1; pointer-events:auto; }
.qnq-popup-card { min-width:180px; max-width:280px; padding:22px 26px; border-radius:18px; text-align:center; color:#fff; box-shadow:0 14px 35px rgba(0,0,0,.22); transform:scale(.82); transition:transform .25s ease; }
.qnq-popup.show .qnq-popup-card { transform:scale(1); }
.qnq-popup-card.correct { background:linear-gradient(135deg,#22c55e,#16a34a); }
.qnq-popup-card.wrong { background:linear-gradient(135deg,#ef4444,#dc2626); }
.qnq-popup-icon { font-size:2.6rem; margin-bottom:8px; }
.qnq-popup-text { font-size:1.3rem; font-weight:700; }

/* Result screen */
.qnq-result { text-align:center; }
.qnq-result-big { font-size:2.6rem; font-weight:800; color: var(--qnq-indigo); }
.qnq-result-score { font-size:1.4rem; font-weight:700; margin:8px 0 16px; }
.qnq-summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin:14px 0; }
.qnq-summary-grid .qnq-stat .num { font-size:1.5rem; }

/* Tables */
.qnq-table-wrap { overflow-x:auto; }
.qnq-table { width:100%; border-collapse:collapse; font-size:.95rem; }
.qnq-table th, .qnq-table td { padding:10px 12px; border-bottom:1px solid #eee; text-align:left; }
.qnq-table th { background:#f8f5ff; color: var(--qnq-indigo); font-weight:700; }
.qnq-table tr.me { background:#fff8e6; font-weight:700; }
.qnq-rank-medal { font-size:1.1rem; }

.qnq-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:14px; }

/* Charts */
.qnq-chart-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px; }
.qnq-chart-box { background:#fff; border:1px solid var(--qnq-soft); border-radius:14px; padding:14px; min-height:260px; }
.qnq-chart-box h4 { margin:0 0 8px; color: var(--qnq-indigo); }

/* Achievements */
.qnq-achievements { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px; }
.qnq-ach { border:1.5px solid var(--qnq-soft); border-radius:12px; padding:12px; text-align:center; }
.qnq-ach .icon { font-size:1.8rem; }
.qnq-ach.locked { opacity:.35; filter:grayscale(1); }

/* Certificate */
.qnq-certificate { border:3px solid #c9a437; border-radius:12px; padding:40px 36px; text-align:center; background:#fffdf5; margin:16px 0; box-shadow:inset 0 0 0 6px #fffdf5, inset 0 0 0 9px rgba(201,164,55,.25); }
.qnq-cert-masha { color:#c9a437; font-size:1rem; letter-spacing:.12em; margin:6px 0 4px; font-style:italic; }
.qnq-certificate h2 { color:#1d4d35; font-size:1.7rem; margin:4px 0 10px; }
.qnq-cert-divider { width:60px; height:2px; background:#c9a437; margin:14px auto; border-radius:2px; }
.qnq-certificate .name { font-size:2rem; font-weight:800; color:#1d4d35; border-bottom:2px solid #c9a437; display:inline-block; padding:4px 32px 6px; margin-top:6px; }
.qnq-cert-achievement { font-size:1.05rem; font-weight:700; color:#1d4d35; margin:8px 0; }
.qnq-cert-date { font-size:.85rem; color:#888; margin-top:10px; }
.qnq-certificate .verify { font-size:.8rem; color:#777; margin-top:14px; background:#f5f0e0; border-radius:6px; padding:6px 14px; display:inline-block; }

@media print { body * { visibility:hidden; } .qnq-print-area, .qnq-print-area * { visibility:visible; } .qnq-print-area { position:absolute; left:0; top:0; width:100%; } .qnq-noprint { display:none !important; } }

/* Responsive */
@media (max-width:860px) { .qnq-stats { grid-template-columns:repeat(2,1fr); } .qnq-chart-grid { grid-template-columns:1fr; } .qnq-modules { grid-template-columns:1fr; } }
@media (max-width:600px) { .qnq-grid-2 { grid-template-columns:1fr; } .qnq-qz-box { padding:18px; } .qnq-qz-options button { width:100% !important; font-size:1.1rem !important; } .qnq-summary-grid { grid-template-columns:1fr; } }