/* ============================================================
   🎓 الاختبارات الإلكترونية - Academic Design System
   University Graduation Project
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800;900&display=swap');

:root {
  --primary: #1E3A5F;
  --primary-light: #2563EB;
  --primary-glow: rgba(37,99,235,0.3);
  --accent: #10B981;
  --accent-glow: rgba(16,185,129,0.3);
  --gold: #F59E0B;
  --gold-glow: rgba(245,158,11,0.3);
  --error: #EF4444;
  --bg-dark: #0F172A;
  --bg-card: #1E293B;
  --bg-surface: #334155;
  --glass-bg: rgba(255,255,255,0.04);
  --glass-border: rgba(255,255,255,0.08);
  --glass-hover: rgba(255,255,255,0.12);
  --text: #F8FAFC;
  --text-soft: rgba(248,250,252,0.85);
  --text-muted: #94A3B8;
  --font: 'Cairo', sans-serif;
  --fs-hero: clamp(2rem, 5vw, 3.5rem);
  --fs-h1: clamp(1.5rem, 3.5vw, 2.4rem);
  --fs-h2: clamp(1.2rem, 2.8vw, 1.8rem);
  --fs-h3: clamp(1rem, 2.2vw, 1.35rem);
  --fs-body: clamp(0.88rem, 1.8vw, 1.05rem);
  --fs-sm: clamp(0.78rem, 1.4vw, 0.9rem);
  --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px;
  --t-fast: 0.2s ease; --t-normal: 0.4s ease;
  --t-slow: 0.7s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; overflow-x:hidden; }

body {
  font-family: var(--font);
  background: var(--bg-dark);
  color: var(--text);
  direction: rtl;
  text-align: right;
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.75;
  font-size: var(--fs-body);
}

/* ---- Background ---- */
.bg-pattern {
  position: fixed; top:0; left:0; width:100%; height:100%;
  pointer-events: none; z-index:0; overflow:hidden;
  background:
    radial-gradient(circle at 20% 50%, rgba(37,99,235,0.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(16,185,129,0.04) 0%, transparent 50%),
    radial-gradient(circle at 50% 80%, rgba(245,158,11,0.03) 0%, transparent 50%);
}
.bg-grid {
  position: fixed; top:0; left:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ---- Progress Bar ---- */
.progress-bar-container {
  position:fixed; top:0; left:0; width:100%; height:4px;
  background:rgba(255,255,255,0.06); z-index:1000;
}
.progress-bar-fill {
  height:100%; width:0%;
  background: linear-gradient(90deg, var(--primary-light), var(--accent), var(--gold));
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 12px var(--primary-glow);
}

/* ---- Stepper Nav ---- */
.stepper-nav {
  position:fixed; left:16px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:6px; z-index:999;
}
.step-dot {
  width:12px; height:12px; border-radius:50%;
  background:rgba(255,255,255,0.12); border:2px solid rgba(255,255,255,0.2);
  cursor:pointer; transition:var(--t-normal); position:relative;
}
.step-dot:hover { background:rgba(255,255,255,0.3); transform:scale(1.2); }
.step-dot.active {
  background:var(--primary-light); border-color:var(--primary-light);
  box-shadow:0 0 10px var(--primary-glow); transform:scale(1.15);
}
.step-dot.visited { background:var(--accent); border-color:var(--accent); }
.step-dot .step-tip {
  position:absolute; right:20px; top:50%; transform:translateY(-50%);
  background:var(--bg-card); color:var(--text); padding:4px 10px;
  border-radius:var(--r-sm); font-size:var(--fs-sm);
  white-space:nowrap; opacity:0; pointer-events:none;
  transition:var(--t-fast); border:1px solid var(--glass-border);
}
.step-dot:hover .step-tip { opacity:1; }

/* ---- Sections ---- */
.section {
  min-height:100vh; display:none; flex-direction:column;
  align-items:center; justify-content:center;
  padding: 2rem 1.5rem; position:relative; z-index:1;
}
.section.active { display:flex; animation: fadeSlideIn 0.6s var(--t-slow) forwards; }
@keyframes fadeSlideIn {
  from { opacity:0; transform:translateY(30px); }
  to { opacity:1; transform:translateY(0); }
}

/* ---- Glass Card ---- */
.glass-card {
  background:var(--glass-bg); backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--glass-border); border-radius:var(--r-lg);
  padding:1.8rem; box-shadow:0 8px 32px rgba(0,0,0,0.3);
  transition:var(--t-normal);
}
.glass-card:hover {
  border-color:var(--glass-hover);
  box-shadow:0 12px 40px rgba(0,0,0,0.4);
}

/* ---- Buttons ---- */
.btn {
  padding:12px 32px; border:none; border-radius:var(--r-md);
  font-family:var(--font); font-size:var(--fs-body); font-weight:700;
  cursor:pointer; transition:var(--t-normal);
  display:inline-flex; align-items:center; gap:8px; text-decoration:none;
}
.btn:active { transform:scale(0.97); }
.btn-primary {
  background:linear-gradient(135deg, var(--primary-light), #1d4ed8);
  color:var(--text); box-shadow:0 4px 20px var(--primary-glow);
}
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--primary-glow); }
.btn-accent {
  background:linear-gradient(135deg, var(--accent), #059669);
  color:var(--bg-dark); box-shadow:0 4px 20px var(--accent-glow);
}
.btn-accent:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--accent-glow); }
.btn-gold {
  background:linear-gradient(135deg, var(--gold), #d97706);
  color:var(--bg-dark); box-shadow:0 4px 20px var(--gold-glow);
}
.btn-gold:hover { transform:translateY(-2px); box-shadow:0 8px 30px var(--gold-glow); }
.btn-outline {
  background:transparent; border:2px solid var(--glass-border); color:var(--text);
}
.btn-outline:hover { background:rgba(255,255,255,0.06); border-color:var(--primary-light); }
.nav-buttons { display:flex; justify-content:center; gap:1rem; margin-top:2.5rem; flex-wrap:wrap; }

/* ---- Section Header ---- */
.section-header { text-align:center; margin-bottom:2.5rem; }
.section-header .section-icon {
  width:64px; height:64px; margin:0 auto 0.8rem;
  background:linear-gradient(135deg, var(--primary-light), var(--accent));
  border-radius:var(--r-md); display:flex; align-items:center; justify-content:center;
  font-size:1.6rem; color:#fff; font-weight:800;
}
.section-header h2 {
  font-size:var(--fs-h1); font-weight:800;
  background:linear-gradient(135deg, var(--text), var(--primary-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.section-header p { color:var(--text-muted); font-size:var(--fs-body); margin-top:0.3rem; }

/* ============================================================
   SECTION 0: LANDING
   ============================================================ */
.landing-card {
  text-align:center; max-width:680px; width:100%; padding:2.5rem;
}
.logos-row {
  display:flex; justify-content:center; align-items:center; gap:2rem;
  margin-bottom:1.5rem;
}
.logos-row img { height:80px; object-fit:contain; filter:drop-shadow(0 2px 8px rgba(0,0,0,0.3)); }
.landing-title {
  font-size:var(--fs-hero); font-weight:900; line-height:1.2; margin-bottom:0.3rem;
  background:linear-gradient(135deg, var(--text), var(--primary-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.landing-subtitle {
  font-size:var(--fs-h3); color:var(--text-muted); margin-bottom:0.5rem; font-weight:400;
}
.landing-meta {
  display:flex; justify-content:center; gap:2rem; margin:1rem 0 1.5rem;
  flex-wrap:wrap; font-size:var(--fs-sm); color:var(--text-muted);
}
.landing-meta span { display:flex; align-items:center; gap:4px; }
.name-input-group {
  display:flex; flex-direction:column; align-items:center; gap:0.8rem; width:100%;
}
.name-input {
  width:100%; max-width:360px; padding:14px 20px;
  border:2px solid var(--glass-border); border-radius:var(--r-md);
  background:rgba(255,255,255,0.04); color:var(--text);
  font-family:var(--font); font-size:var(--fs-h3);
  text-align:center; outline:none; transition:var(--t-normal); direction:rtl;
}
.name-input::placeholder { color:var(--text-muted); }
.name-input:focus {
  border-color:var(--primary-light);
  box-shadow:0 0 16px var(--primary-glow);
  background:rgba(255,255,255,0.06);
}
.feature-badges {
  display:flex; flex-wrap:wrap; gap:0.5rem;
  justify-content:center; margin-top:1.2rem;
}
.feat-badge {
  padding:6px 14px; border-radius:20px;
  background:rgba(37,99,235,0.1); border:1px solid rgba(37,99,235,0.2);
  font-size:var(--fs-sm); color:var(--text-soft); font-weight:600;
}

/* ---- Loading Overlay ---- */
.loading-overlay {
  position:fixed; top:0; left:0; width:100%; height:100%;
  background:var(--bg-dark); display:none; align-items:center;
  justify-content:center; z-index:2000; flex-direction:column; gap:1.5rem;
}
.loading-overlay.active { display:flex; }
.loader {
  width:48px; height:48px; border:4px solid var(--glass-border);
  border-top-color:var(--primary-light); border-radius:50%;
  animation:spin 0.8s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.loading-text { color:var(--text-muted); font-size:var(--fs-h3); }

/* ============================================================
   CHAPTER SECTIONS
   ============================================================ */
.chapter-container { max-width:1200px; width:100%; }

/* Chapter Sub-Tabs */
.chapter-tabs {
  display:flex; gap:8px; margin-bottom:1.5rem; flex-wrap:wrap; justify-content:center;
}
.chapter-tab {
  padding:10px 22px; background:rgba(255,255,255,0.04);
  border:2px solid var(--glass-border); border-radius:var(--r-md);
  color:var(--text-muted); font-family:var(--font); font-size:var(--fs-sm);
  font-weight:600; cursor:pointer; transition:var(--t-normal);
  display:flex; align-items:center; gap:6px;
}
.chapter-tab:hover { border-color:var(--primary-light); color:var(--text); }
.chapter-tab.active {
  background:linear-gradient(135deg, var(--primary-light), #1d4ed8);
  border-color:transparent; color:#fff;
}

/* Chapter Content Panels */
.chapter-panel { display:none; }
.chapter-panel.active { display:block; animation:fadeSlideIn 0.4s ease forwards; }

/* Video */
.video-frame { position:relative; width:100%; padding-bottom:56.25%; background:#000; border-radius:var(--r-md); overflow:hidden; }
.video-player { position:absolute; top:0; left:0; width:100%; height:100%; border:none; border-radius:var(--r-md); }

/* PDF */
.pdf-wrapper {
  width:100%; height:85vh;
  border-radius:var(--r-md); overflow:hidden;
  border:1px solid var(--glass-border); background:var(--bg-card);
}
.pdf-wrapper embed, .pdf-wrapper iframe, .pdf-wrapper object {
  width:100%; height:100%; border:none;
}

/* Questions placeholder */
.questions-placeholder {
  text-align:center; padding:3rem 2rem;
  color:var(--text-muted); font-size:var(--fs-h3);
}
.questions-placeholder .placeholder-icon {
  font-size:3rem; margin-bottom:1rem; display:block; opacity:0.5;
}

/* Quiz Area (for chapter questions) */
.quiz-container { max-width:800px; width:100%; }
.quiz-meta {
  display:flex; justify-content:space-between; align-items:center;
  margin-bottom:1.5rem; flex-wrap:wrap; gap:1rem;
}
.quiz-progress { flex:1; min-width:200px; }
.quiz-progress-bar {
  height:6px; background:rgba(255,255,255,0.08); border-radius:3px; overflow:hidden;
}
.quiz-progress-fill {
  height:100%; background:linear-gradient(90deg, var(--primary-light), var(--accent));
  transition:width 0.4s ease; width:0%;
}
.quiz-progress-text { font-size:var(--fs-sm); color:var(--text-muted); margin-top:4px; display:block; }
.quiz-timer {
  display:flex; align-items:center; gap:6px;
  background:rgba(255,255,255,0.04); padding:8px 16px;
  border-radius:var(--r-md); border:1px solid var(--glass-border);
}
.quiz-timer.warning { border-color:var(--error); }
.quiz-timer.warning .timer-value { color:var(--error); }
.timer-value { font-weight:700; font-size:var(--fs-h3); color:var(--gold); }

/* Question Card */
.quiz-card { padding:2rem; }
.question-number {
  display:inline-block; padding:4px 14px; border-radius:20px;
  background:rgba(37,99,235,0.12); color:var(--primary-light);
  font-size:var(--fs-sm); font-weight:700; margin-bottom:1rem;
}
.question-text { font-size:var(--fs-h2); font-weight:700; margin-bottom:1.5rem; line-height:1.6; }

.options-list { display:flex; flex-direction:column; gap:10px; }
.option-btn {
  display:flex; align-items:center; gap:12px; padding:14px 18px;
  background:rgba(255,255,255,0.04); border:2px solid var(--glass-border);
  border-radius:var(--r-md); color:var(--text); font-family:var(--font);
  font-size:var(--fs-body); cursor:pointer; transition:var(--t-normal); text-align:right;
}
.option-btn:hover { background:rgba(37,99,235,0.08); border-color:var(--primary-light); }
.option-letter {
  width:32px; height:32px; border-radius:50%;
  background:rgba(255,255,255,0.06); display:flex; align-items:center;
  justify-content:center; font-weight:700; flex-shrink:0; font-size:var(--fs-sm);
}
.option-btn.correct { background:rgba(16,185,129,0.12); border-color:var(--accent); }
.option-btn.correct .option-letter { background:var(--accent); color:#fff; }
.option-btn.wrong { background:rgba(239,68,68,0.12); border-color:var(--error); }
.option-btn.wrong .option-letter { background:var(--error); color:#fff; }
.option-btn.disabled { pointer-events:none; opacity:0.85; }

.tf-options { display:flex; gap:12px; justify-content:center; }
.tf-btn { flex:1; max-width:200px; justify-content:center; }

.feedback-message {
  margin-top:1.2rem; padding:12px 18px; border-radius:var(--r-md);
  display:none; align-items:center; gap:10px; font-weight:600;
}
.feedback-message.show { display:flex; }
.feedback-message.correct { background:rgba(16,185,129,0.1); border:1px solid rgba(16,185,129,0.25); color:var(--accent); }
.feedback-message.wrong { background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.25); color:var(--error); }

/* ============================================================
   FINAL EXAM
   ============================================================ */
.exam-header {
  text-align:center; padding:1.5rem; margin-bottom:1.5rem;
  background:linear-gradient(135deg, rgba(37,99,235,0.08), rgba(16,185,129,0.05));
  border:1px solid var(--glass-border); border-radius:var(--r-lg);
}
.exam-header h3 { font-size:var(--fs-h2); color:var(--text); margin-bottom:0.3rem; }
.exam-rules { color:var(--text-muted); font-size:var(--fs-sm); }
.exam-rules li { margin:0.2rem 1.5rem 0 0; }

/* ============================================================
   RESULTS
   ============================================================ */
.results-container { max-width:700px; width:100%; text-align:center; }
.results-card { padding:2.5rem; }
.results-score {
  font-size:4rem; font-weight:900; margin:1rem 0 0.3rem;
  background:linear-gradient(135deg, var(--primary-light), var(--accent));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.results-grade { font-size:var(--fs-h2); font-weight:700; color:var(--gold); }
.results-message { color:var(--text-muted); margin:0.8rem 0; }
.results-time { color:var(--text-muted); font-size:var(--fs-sm); margin-bottom:1.5rem; }

.score-breakdown {
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; margin-top:1.5rem;
}
.score-item {
  padding:1rem; border-radius:var(--r-md);
  background:rgba(255,255,255,0.03); border:1px solid var(--glass-border);
}
.score-num { font-size:var(--fs-h1); font-weight:800; }
.score-label { font-size:var(--fs-sm); color:var(--text-muted); margin-top:0.2rem; }
.correct-score .score-num { color:var(--accent); }
.wrong-score .score-num { color:var(--error); }

/* ============================================================
   CERTIFICATE
   ============================================================ */
.cert-container { max-width:750px; width:100%; }
.certificate {
  padding:3rem 2.5rem; text-align:center; position:relative;
  background: linear-gradient(145deg, var(--bg-card), #1a2740);
  border:2px solid var(--gold); border-radius:var(--r-xl);
  box-shadow: 0 0 40px rgba(245,158,11,0.08);
}
.cert-logos { display:flex; justify-content:center; gap:1.5rem; margin-bottom:1rem; }
.cert-logos img { height:60px; object-fit:contain; }
.cert-title {
  font-size:var(--fs-h1); font-weight:900; color:var(--gold); margin-bottom:0.2rem;
}
.cert-subtitle { color:var(--text-muted); font-size:var(--fs-body); margin-bottom:1.5rem; }
.cert-name {
  font-size:var(--fs-hero); font-weight:800; color:var(--text);
  padding:0.5rem 0; border-bottom:2px solid var(--gold); border-top:2px solid var(--gold);
  margin:1rem auto; max-width:400px;
}
.cert-achievement { color:var(--text-soft); line-height:1.8; margin:1rem 0; }
.cert-score-box {
  display:inline-block; padding:0.8rem 2rem; border-radius:var(--r-md);
  background:rgba(245,158,11,0.1); border:1px solid rgba(245,158,11,0.25);
  margin:1rem 0;
}
.cert-score-box .score-val { font-size:var(--fs-h1); font-weight:900; color:var(--gold); }
.cert-score-box .score-lbl { font-size:var(--fs-sm); color:var(--text-muted); display:block; }
.cert-meta {
  display:flex; justify-content:space-around; margin-top:1.5rem;
  flex-wrap:wrap; gap:1rem;
}
.cert-meta-item { text-align:center; }
.cert-meta-item .meta-label { font-size:var(--fs-sm); color:var(--text-muted); display:block; }
.cert-meta-item .meta-value { font-weight:700; color:var(--text); }
.cert-date { color:var(--text-muted); font-size:var(--fs-sm); margin-top:1.5rem; }
.cert-footer { display:flex; gap:1rem; justify-content:center; margin-top:1.5rem; flex-wrap:wrap; }

/* ---- Confetti ---- */
.confetti-container { position:fixed; top:0; left:0; width:100%; height:100%; pointer-events:none; z-index:9999; overflow:hidden; }
.confetti-piece {
  position:absolute; top:-10px; opacity:0;
  animation: confettiFall var(--fall-duration, 3s) ease-out forwards;
}
@keyframes confettiFall {
  0% { opacity:1; transform:translateY(0) rotate(0deg); }
  100% { opacity:0; transform:translateY(100vh) rotate(720deg); }
}

/* ---- Review Answers ---- */
.review-list { display:flex; flex-direction:column; gap:1rem; margin-top:1.5rem; text-align:right; }
.review-item {
  padding:1.2rem; border-radius:var(--r-md); border:1px solid var(--glass-border);
  background:rgba(255,255,255,0.02);
}
.review-item.review-correct { border-color:rgba(16,185,129,0.3); }
.review-item.review-wrong { border-color:rgba(239,68,68,0.3); }
.review-q { font-weight:700; margin-bottom:0.5rem; font-size:var(--fs-body); }
.review-answer { font-size:var(--fs-sm); color:var(--text-muted); }
.review-answer span { display:block; margin:0.2rem 0; }
.review-answer .your-ans { color:var(--error); }
.review-answer .correct-ans { color:var(--accent); }
.review-answer .explanation { color:var(--text-muted); font-style:italic; margin-top:0.4rem; border-top:1px solid var(--glass-border); padding-top:0.4rem; }

/* ---- PDF Mobile Fallback ---- */
.pdf-fallback {
  text-align:center; padding:1rem;
  color:var(--text-muted); font-size:var(--fs-sm);
}
.pdf-fallback .fallback-icon { display:none; }
.pdf-fallback p { display:none; }
@media (max-width:768px) {
  .pdf-fallback .fallback-icon { display:block; font-size:2rem; margin-bottom:0.5rem; opacity:0.5; }
  .pdf-fallback p { display:block; margin-bottom:0.5rem; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:768px) {
  .stepper-nav { left:8px; gap:4px; }
  .step-dot { width:10px; height:10px; }
  .logos-row img { height:55px; }
  .landing-meta { gap:1rem; }
  .chapter-tabs { gap:4px; }
  .chapter-tab { padding:8px 14px; font-size:0.78rem; }
  .score-breakdown { grid-template-columns:1fr; }
  .certificate { padding:2rem 1.2rem; }
  .cert-logos img { height:45px; }
  .cert-name { font-size:var(--fs-h1); }
  .tf-options { flex-direction:column; }
  .tf-btn { max-width:100%; }
}

@media (max-width:480px) {
  .section { padding:1.2rem 1rem; }
  .glass-card { padding:1.2rem; }
  .logos-row { gap:1rem; }
  .logos-row img { height:45px; }
}

/* ---- Print ---- */
@media print {
  body { background:#fff !important; color:#000 !important; }
  .progress-bar-container, .stepper-nav, .nav-buttons,
  .cert-footer, .bg-pattern, .bg-grid, .confetti-container,
  .loading-overlay { display:none !important; }
  .section { display:none !important; min-height:auto !important; }
  #cert-section { display:flex !important; padding:0 !important; }
  .certificate {
    border-color:#c89f2d !important; box-shadow:none !important;
    background:#fff !important; color:#000 !important;
    -webkit-print-color-adjust:exact; print-color-adjust:exact;
    backdrop-filter:none !important; padding:2rem !important;
  }
  .cert-title { color:#c89f2d !important; -webkit-text-fill-color:#c89f2d !important; }
  .cert-name { color:#1a1a1a !important; border-color:#c89f2d !important; -webkit-text-fill-color:#1a1a1a !important; }
  .cert-achievement, .cert-subtitle, .cert-date { color:#555 !important; -webkit-text-fill-color:#555 !important; }
  .cert-score-box { border-color:#c89f2d !important; }
  .cert-score-box .score-val { color:#c89f2d !important; -webkit-text-fill-color:#c89f2d !important; }
  .cert-logos img { height:50px !important; }
  .section-header h2 { color:#1a1a1a !important; -webkit-text-fill-color:#1a1a1a !important; }
  .cert-meta-item .meta-value { color:#000 !important; }
  .cert-meta-item .meta-label { color:#666 !important; }
}