/* ============================================================
   MCQNepal.com — Main stylesheet (Bootstrap 5 companion)
   Modern, clean, mobile-first, dark-mode ready
   ============================================================ */
:root {
  --mn-primary: #1a56db;
  --mn-primary-dark: #1240a8;
  --mn-accent: #f59e0b;
  --mn-success: #059669;
  --mn-danger: #dc2626;
  --mn-bg: #f8fafc;
  --mn-surface: #ffffff;
  --mn-text: #1e293b;
  --mn-text-muted: #64748b;
  --mn-border: #e2e8f0;
  --mn-radius: 14px;
  --mn-shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 4px 14px rgba(15, 23, 42, .06);
  --mn-shadow-lg: 0 10px 34px rgba(15, 23, 42, .14);
}
[data-theme="dark"] {
  --mn-bg: #0f172a;
  --mn-surface: #1e293b;
  --mn-text: #e2e8f0;
  --mn-text-muted: #94a3b8;
  --mn-border: #334155;
  --mn-shadow: 0 1px 3px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.3);
  --mn-shadow-lg: 0 10px 34px rgba(0,0,0,.5);
}
html { scroll-behavior: smooth; }
body {
  background: var(--mn-bg);
  color: var(--mn-text);
  font-family: 'Segoe UI', system-ui, -apple-system, 'Noto Sans', sans-serif;
  transition: background .25s ease, color .25s ease;
}
a { color: var(--mn-primary); text-decoration: none; }
a:hover { color: var(--mn-primary-dark); }
.text-muted, .form-text { color: var(--mn-text-muted) !important; }

/* ---- Cards & surfaces ---- */
.card, .list-group-item, .dropdown-menu, .modal-content, .accordion-item {
  background: var(--mn-surface);
  color: var(--mn-text);
  border: 1px solid var(--mn-border);
}
.card { border-radius: var(--mn-radius); box-shadow: var(--mn-shadow); transition: transform .18s ease, box-shadow .18s ease; }
.card.hover-lift:hover { transform: translateY(-4px); box-shadow: var(--mn-shadow-lg); }
.card-header, .card-footer { background: transparent; border-color: var(--mn-border); }
.table { color: var(--mn-text); }
.table > :not(caption) > * > * { background: transparent; color: inherit; border-color: var(--mn-border); }
.form-control, .form-select {
  background: var(--mn-surface); color: var(--mn-text); border-color: var(--mn-border);
}
.form-control:focus, .form-select:focus {
  background: var(--mn-surface); color: var(--mn-text);
  border-color: var(--mn-primary); box-shadow: 0 0 0 .2rem rgba(26, 86, 219, .15);
}
.form-control::placeholder { color: var(--mn-text-muted); }

/* ---- Buttons ---- */
.btn-primary { background: var(--mn-primary); border-color: var(--mn-primary); }
.btn-primary:hover { background: var(--mn-primary-dark); border-color: var(--mn-primary-dark); }
.btn-accent { background: var(--mn-accent); border-color: var(--mn-accent); color: #fff; }
.btn-accent:hover { background: #d97706; color: #fff; }
.btn-outline-primary { color: var(--mn-primary); border-color: var(--mn-primary); }

/* ---- Navbar ---- */
.navbar-mn {
  background: var(--mn-surface);
  border-bottom: 1px solid var(--mn-border);
  box-shadow: var(--mn-shadow);
}
.navbar-mn .nav-link { color: var(--mn-text); font-weight: 500; }
.navbar-mn .nav-link:hover, .navbar-mn .nav-link.active { color: var(--mn-primary); }
.navbar-brand-mn { font-weight: 800; font-size: 1.45rem; color: var(--mn-primary) !important; letter-spacing: -0.5px; }
.navbar-brand-mn span { color: var(--mn-accent); }

/* ---- Hero ---- */
.hero {
  background: linear-gradient(135deg, #1a56db 0%, #1e3a8a 55%, #172554 100%);
  color: #fff;
  border-radius: 0 0 32px 32px;
  padding: 72px 0 84px;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(1000px 400px at 85% -10%, rgba(245,158,11,.25), transparent 60%);
}
.hero > .container { position: relative; z-index: 1; }
.hero h1 { font-weight: 800; font-size: clamp(2rem, 5vw, 3.4rem); letter-spacing: -1px; }
.hero .lead { color: #cbd5e1; max-width: 640px; }
.hero-stats .stat { text-align: center; }
.hero-stats .stat b { display: block; font-size: 1.6rem; color: #fbbf24; }
.hero-stats .stat span { color: #cbd5e1; font-size: .85rem; }

/* ---- Section headings ---- */
.section-title { font-weight: 700; letter-spacing: -.5px; margin-bottom: .35rem; }
.section-sub { color: var(--mn-text-muted); margin-bottom: 1.4rem; }

/* ---- Category / feature cards ---- */
.icon-badge {
  width: 52px; height: 52px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem; background: rgba(26,86,219,.1); color: var(--mn-primary);
}
.badge-soft { background: rgba(26,86,219,.12); color: var(--mn-primary); font-weight: 600; }
.badge-soft-green { background: rgba(5,150,105,.12); color: var(--mn-success); font-weight: 600; }
.badge-soft-amber { background: rgba(245,158,11,.15); color: #b45309; font-weight: 600; }
[data-theme="dark"] .badge-soft-amber { color: #fbbf24; }

/* ---- MCQ practice ---- */
.mcq-option {
  display: block; width: 100%; text-align: left;
  border: 2px solid var(--mn-border); border-radius: 12px;
  background: var(--mn-surface); color: var(--mn-text);
  padding: .8rem 1rem; margin-bottom: .6rem;
  transition: border-color .15s ease, background .15s ease;
  cursor: pointer;
}
.mcq-option:hover { border-color: var(--mn-primary); }
.mcq-option.correct { border-color: var(--mn-success); background: rgba(5,150,105,.1); }
.mcq-option.wrong { border-color: var(--mn-danger); background: rgba(220,38,38,.08); }
.mcq-option:disabled { cursor: default; opacity: .95; }
.mcq-option .opt-letter {
  display: inline-flex; width: 30px; height: 30px; border-radius: 8px;
  align-items: center; justify-content: center; margin-right: .7rem;
  background: rgba(26,86,219,.1); color: var(--mn-primary); font-weight: 700;
}
.explanation-box {
  border-left: 4px solid var(--mn-accent);
  background: rgba(245,158,11,.07);
  border-radius: 0 10px 10px 0;
  padding: .9rem 1.1rem;
}

/* ---- Quiz runner ---- */
.quiz-timer {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.25rem;
  color: var(--mn-primary);
}
.quiz-timer.danger { color: var(--mn-danger); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .55; } }
.quiz-progress { height: 8px; border-radius: 6px; }
.question-nav button {
  width: 40px; height: 40px; border-radius: 10px; font-weight: 600;
  border: 1px solid var(--mn-border); background: var(--mn-surface); color: var(--mn-text);
}
.question-nav button.answered { background: var(--mn-primary); color: #fff; border-color: var(--mn-primary); }
.question-nav button.current { outline: 3px solid rgba(26,86,219,.35); }

/* ---- Poll ---- */
.poll-bar { height: 26px; border-radius: 8px; background: var(--mn-border); overflow: hidden; position: relative; }
.poll-bar .fill {
  height: 100%; background: linear-gradient(90deg, var(--mn-primary), #3b82f6);
  border-radius: 8px; transition: width .8s cubic-bezier(.2,.8,.2,1);
}
.poll-bar .label { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 .7rem; font-size: .85rem; font-weight: 600; color: var(--mn-text); }

/* ---- Article prose ---- */
.prose { font-size: 1.06rem; line-height: 1.8; }
.prose h2 { margin-top: 2rem; font-weight: 700; }
.prose h3 { margin-top: 1.5rem; font-weight: 650; }
.prose img { max-width: 100%; border-radius: 12px; }
.prose blockquote { border-left: 4px solid var(--mn-primary); padding-left: 1rem; color: var(--mn-text-muted); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; }
.prose table th, .prose table td { border: 1px solid var(--mn-border); padding: .55rem .8rem; }
.prose pre { background: #0f172a; color: #e2e8f0; border-radius: 10px; padding: 1rem; overflow-x: auto; }
.internal-link { border-bottom: 1px dashed var(--mn-primary); }

/* ---- Certificate ---- */
.certificate-preview {
  border: 3px solid var(--mn-primary); border-radius: 12px;
  background: linear-gradient(180deg, #fffdf5, #fff);
  color: #1e293b;
  padding: 2.2rem; text-align: center; position: relative;
}
.certificate-preview .cert-id { font-family: monospace; letter-spacing: 1px; }

/* ---- Search suggest ---- */
.search-wrap { position: relative; }
.suggest-box {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 1050;
  background: var(--mn-surface); border: 1px solid var(--mn-border);
  border-radius: 12px; box-shadow: var(--mn-shadow-lg); overflow: hidden; margin-top: 6px;
}
.suggest-box a { display: flex; justify-content: space-between; padding: .6rem .9rem; color: var(--mn-text); }
.suggest-box a:hover { background: rgba(26,86,219,.08); }
.suggest-box .type { font-size: .75rem; color: var(--mn-text-muted); }

/* ---- Dashboard ---- */
.dash-sidebar .nav-link { color: var(--mn-text); border-radius: 10px; padding: .55rem .9rem; }
.dash-sidebar .nav-link.active, .dash-sidebar .nav-link:hover { background: rgba(26,86,219,.1); color: var(--mn-primary); }
.stat-card { border-left: 4px solid var(--mn-primary); }

/* ---- Footer ---- */
.footer-mn {
  background: #0f172a; color: #94a3b8; margin-top: 4rem; padding: 3rem 0 1.5rem;
}
.footer-mn a { color: #cbd5e1; }
.footer-mn a:hover { color: #fff; }
.footer-mn h6 { color: #fff; font-weight: 700; }

/* ---- Ads ---- */
.ad-slot { text-align: center; margin: 1.2rem auto; overflow: hidden; }

/* ---- Utility ---- */
.min-h-main { min-height: 60vh; }
.rounded-xl { border-radius: var(--mn-radius); }
img.lazy { opacity: 0; transition: opacity .4s; }
img.lazy.loaded { opacity: 1; }
::selection { background: rgba(26,86,219,.25); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}