/* ============================================================
   RAFIQI — Gamification & 2026 Vision Layer
   ملف إضافي مستقل — لا يُعدّل أو يستبدل style.css الأساسي
   ============================================================ */

:root {
  --clr-flame: #FF6B35;
  --clr-flame-light: #FFF1EB;
  --clr-xp-gold: #FFC93C;
  --clr-xp-gold-light: #FFFAEB;
}

/* ── Streak / XP / Rank Bar ───────────────────────────────── */
.stat-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-3, 0.75rem);
  background: var(--clr-surface, #fff);
  border: 1px solid var(--clr-border, #E4E9F2);
  border-radius: var(--radius-lg, 16px);
  padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem);
  margin-bottom: var(--sp-6, 1.5rem);
  flex-wrap: wrap;
}

.stat-chip {
  display: flex;
  align-items: center;
  gap: var(--sp-2, 0.5rem);
  padding: var(--sp-2, 0.5rem) var(--sp-4, 1rem);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-sm, 0.875rem);
  font-weight: 700;
}

.stat-chip-streak { background: var(--clr-flame-light); color: var(--clr-flame); }
.stat-chip-streak.danger-zone { animation: pulse-flame 1.5s ease-in-out infinite; }
.stat-chip-xp { background: var(--clr-xp-gold-light); color: #92700A; }
.stat-chip-rank { background: var(--clr-primary-50, #EEF4FB); color: var(--clr-primary, #0F2B5B); }

@keyframes pulse-flame {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* ── Achievement / Badge Cards ─────────────────────────────── */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: var(--sp-4, 1rem);
}

.badge-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2, 0.5rem);
  padding: var(--sp-5, 1.25rem) var(--sp-3, 0.75rem);
  border-radius: var(--radius-lg, 16px);
  text-align: center;
  background: var(--clr-bg, #F7F8FC);
  border: 1.5px solid var(--clr-border, #E4E9F2);
  transition: all 0.25s ease;
}

.badge-card.earned {
  background: linear-gradient(135deg, var(--clr-xp-gold-light), #fff);
  border-color: var(--clr-xp-gold);
}

.badge-card.locked { opacity: 0.4; filter: grayscale(1); }
.badge-card .badge-icon { font-size: 2rem; }
.badge-card .badge-name { font-size: var(--text-xs, 0.75rem); font-weight: 600; }

/* ── Daily Suggestion Card ────────────────────────────────── */
.suggestion-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4, 1rem);
  background: linear-gradient(135deg, var(--clr-primary-50, #EEF4FB), var(--clr-cyan-light, #E0F7FF));
  border: 1px solid var(--clr-primary-200, #BED3F0);
  border-radius: var(--radius-xl, 24px);
  padding: var(--sp-6, 1.5rem);
  margin-bottom: var(--sp-6, 1.5rem);
  flex-wrap: wrap;
}

.suggestion-icon { font-size: 2.2rem; flex-shrink: 0; }
.suggestion-content { flex: 1; min-width: 200px; }
.suggestion-content h4 { font-size: var(--text-base, 1rem); margin-bottom: var(--sp-1, 0.25rem); }
.suggestion-content p { font-size: var(--text-sm, 0.875rem); margin-bottom: 0; }

/* ── Subject Progress Ring ─────────────────────────────────── */
.progress-ring-wrap { position: relative; width: 72px; height: 72px; flex-shrink: 0; }
.progress-ring-wrap svg { transform: rotate(-90deg); }
.progress-ring-bg { fill: none; stroke: var(--clr-border, #E4E9F2); stroke-width: 6; }
.progress-ring-fg {
  fill: none; stroke: var(--clr-cyan, #00A8CC); stroke-width: 6;
  stroke-linecap: round; transition: stroke-dashoffset 0.6s ease;
}
.progress-ring-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm, 0.875rem); font-weight: 700; color: var(--clr-text, #1A2238);
}

/* ── Subject Timeline (Chapters) ──────────────────────────── */
.subject-timeline { display: flex; align-items: center; gap: 0; overflow-x: auto; padding: var(--sp-6, 1.5rem) var(--sp-2, 0.5rem); }
.timeline-node { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2, 0.5rem); min-width: 100px; position: relative; text-decoration: none; }
.timeline-node::before { content: ''; position: absolute; top: 18px; right: 50%; width: 100%; height: 3px; background: var(--clr-border, #E4E9F2); z-index: 0; }
.timeline-node:first-child::before { display: none; }
.timeline-dot {
  width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: var(--text-sm, 0.875rem); font-weight: 700; background: var(--clr-surface, #fff);
  border: 3px solid var(--clr-border, #E4E9F2); z-index: 1; position: relative;
}
.timeline-node.completed .timeline-dot { background: var(--clr-success, #10B981); border-color: var(--clr-success, #10B981); color: #fff; }
.timeline-node.current .timeline-dot { background: var(--clr-cyan, #00A8CC); border-color: var(--clr-cyan, #00A8CC); color: #fff; animation: pulse-ring 2s ease-in-out infinite; }

@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,168,204,.4); }
  50% { box-shadow: 0 0 0 8px rgba(0,168,204,0); }
}

.timeline-node span:last-child { font-size: var(--text-xs, 0.75rem); color: var(--clr-text-secondary, #5C6B8A); text-align: center; font-weight: 500; }

/* ── Quiz Result Celebration ───────────────────────────────── */
.result-celebration { text-align: center; padding: var(--sp-10, 2.5rem) var(--sp-6, 1.5rem); }
.result-ring-big { width: 160px; height: 160px; margin: 0 auto var(--sp-6, 1.5rem); position: relative; }
.result-ring-big svg { transform: rotate(-90deg); width: 100%; height: 100%; }
.result-ring-big .ring-text { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.result-ring-big .ring-pct { font-size: var(--text-3xl, 1.875rem); font-weight: 800; color: var(--clr-primary, #0F2B5B); }
.result-ring-big .ring-label { font-size: var(--text-xs, 0.75rem); color: var(--clr-text-muted, #9BA8C0); }
.result-comparison {
  display: inline-flex; align-items: center; gap: var(--sp-2, 0.5rem);
  background: var(--clr-success-light, #D1FAE5); color: var(--clr-success, #10B981);
  padding: var(--sp-2, 0.5rem) var(--sp-5, 1.25rem); border-radius: var(--radius-full, 9999px);
  font-size: var(--text-sm, 0.875rem); font-weight: 600; margin-bottom: var(--sp-6, 1.5rem);
}

.xp-earned-badge {
  display: inline-block; background: #92700A; color: var(--clr-xp-gold-light, #FFFAEB);
  padding: 4px 16px; border-radius: 99px; font-weight: 700; margin-top: var(--sp-3, 0.75rem);
}

/* ── Upgrade: Locked Content Summary ───────────────────────── */
.locked-summary { background: var(--clr-dark, #0A1628); border-radius: var(--radius-xl, 24px); padding: var(--sp-8, 2rem); color: #fff; margin-bottom: var(--sp-8, 2rem); }
.locked-summary h3 { color: #fff; margin-bottom: var(--sp-4, 1rem); }
.locked-items { display: flex; flex-direction: column; gap: var(--sp-3, 0.75rem); }
.locked-item { display: flex; align-items: center; gap: var(--sp-3, 0.75rem); padding: var(--sp-3, 0.75rem) var(--sp-4, 1rem); background: rgba(255,255,255,.06); border-radius: var(--radius-md, 10px); font-size: var(--text-sm, 0.875rem); }
.locked-item .lock-icon { opacity: .6; }

.social-proof-bar {
  display: flex; align-items: center; gap: var(--sp-3, 0.75rem);
  background: var(--clr-primary-50, #EEF4FB); border-radius: var(--radius-lg, 16px);
  padding: var(--sp-4, 1rem) var(--sp-5, 1.25rem); margin-bottom: var(--sp-6, 1.5rem); font-size: var(--text-sm, 0.875rem);
}

/* ── Perfect Score Feed Cards ──────────────────────────────── */
.feed-grid { columns: 1; column-gap: var(--sp-5, 1.25rem); }
@media (min-width: 768px) { .feed-grid { columns: 2; } }
@media (min-width: 1100px) { .feed-grid { columns: 3; } }

.feed-card { break-inside: avoid; margin-bottom: var(--sp-5, 1.25rem); border-radius: var(--radius-xl, 24px); overflow: hidden; border: 1px solid var(--clr-border, #E4E9F2); background: var(--clr-surface, #fff); }

.feed-card-quote { background: linear-gradient(135deg, var(--clr-primary, #0F2B5B), var(--clr-primary-400, #2B5FA3)); color: #fff; padding: var(--sp-8, 2rem); text-align: center; border: none; }
.feed-card-quote .quote-mark { font-size: 2.5rem; opacity: .3; line-height: 1; }
.feed-card-quote p { color: #fff; font-size: var(--text-lg, 1.125rem); font-weight: 600; line-height: 1.6; }
.feed-card-quote small { color: rgba(255,255,255,.6); display: block; margin-top: var(--sp-4, 1rem); }

.feed-card-tip { background: var(--clr-xp-gold-light); border-color: var(--clr-xp-gold); padding: var(--sp-6, 1.5rem); }
.feed-card-tip .tip-icon { font-size: 1.8rem; margin-bottom: var(--sp-3, 0.75rem); }

.feed-card-story { padding: var(--sp-6, 1.5rem); }
.feed-card-story .story-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--clr-cyan, #00A8CC); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; margin-bottom: var(--sp-3, 0.75rem); }

.feed-card-formula { background: var(--clr-dark, #0A1628); color: #fff; padding: var(--sp-6, 1.5rem); font-family: 'Courier New', monospace; }
.feed-card-formula .formula-label { font-family: var(--font-main); font-size: var(--text-xs, 0.75rem); color: var(--clr-cyan, #00A8CC); margin-bottom: var(--sp-3, 0.75rem); }

.feed-card-mindset { background: var(--clr-success-light, #D1FAE5); padding: var(--sp-6, 1.5rem); text-align: center; }

.feed-card-type-label { display: inline-block; font-size: var(--text-xs, 0.75rem); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: var(--sp-3, 0.75rem); opacity: .7; }

.feed-like-btn { background: none; border: none; cursor: pointer; font-size: 1.1rem; padding: var(--sp-2, 0.5rem); opacity: .6; transition: all 0.2s; }
.feed-like-btn:hover, .feed-like-btn.liked { opacity: 1; transform: scale(1.15); }

/* ── Bottom Navigation (Mobile) ────────────────────────────── */
.bottom-nav {
  display: none; position: fixed; bottom: 0; left: 0; right: 0;
  background: var(--clr-surface, #fff); border-top: 1px solid var(--clr-border, #E4E9F2);
  z-index: 200; padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav-items { display: flex; align-items: center; justify-content: space-around; }
.bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--sp-2, 0.5rem) var(--sp-3, 0.75rem); font-size: 10px; color: var(--clr-text-muted, #9BA8C0); flex: 1; text-align: center; text-decoration: none; }
.bottom-nav-item .bn-icon { font-size: 1.3rem; }
.bottom-nav-item.active { color: var(--clr-primary, #0F2B5B); }

@media (max-width: 767px) {
  .bottom-nav { display: block; }
  .main-content { padding-bottom: 64px; }
  .sidebar { display: none; }
}

/* ── Live Activity Ticker (Home) ──────────────────────────── */
.activity-ticker { background: var(--clr-dark, #0A1628); padding: var(--sp-3, 0.75rem) 0; overflow: hidden; white-space: nowrap; }
.ticker-track { display: inline-flex; gap: var(--sp-8, 2rem); animation: ticker-scroll 30s linear infinite; }
.ticker-item { display: inline-flex; align-items: center; gap: var(--sp-2, 0.5rem); color: rgba(255,255,255,.7); font-size: var(--text-sm, 0.875rem); }
.ticker-item .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--clr-success, #10B981); flex-shrink: 0; }

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Onboarding radio cards (Register) ────────────────────── */
.onboarding-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--sp-3, 0.75rem); margin: var(--sp-5, 1.25rem) 0; }
.onboarding-card { position: relative; }
.onboarding-card input { position: absolute; opacity: 0; }
.onboarding-card label {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2, 0.5rem);
  padding: var(--sp-5, 1.25rem); border: 2px solid var(--clr-border, #E4E9F2); border-radius: var(--radius-lg, 16px);
  cursor: pointer; text-align: center; font-weight: 600; font-size: var(--text-sm, 0.875rem); transition: all 0.2s;
}
.onboarding-card input:checked + label { border-color: var(--clr-cyan, #00A8CC); background: var(--clr-cyan-light, #E0F7FF); }
.onboarding-card .ob-icon { font-size: 1.8rem; }

/* ── Content Preview Blur Lock ─────────────────────────────── */
.content-locked-wrap { position: relative; }
.content-blur-overlay {
  position: absolute; inset: 0; top: 40%;
  background: linear-gradient(to bottom, rgba(247,248,252,0) 0%, var(--clr-bg, #F7F8FC) 90%);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--sp-6, 1.5rem);
}
.content-locked-wrap .lesson-body { filter: blur(0); }
.content-locked-wrap .lesson-body-partial { max-height: 220px; overflow: hidden; position: relative; }

/* ── Interstitial Ad Placeholder ──────────────────────────── */
.ad-native-card {
  border: 1.5px dashed var(--clr-border-strong, #C8D3E8); border-radius: var(--radius-lg, 16px);
  padding: var(--sp-5, 1.25rem); text-align: center; color: var(--clr-text-muted, #9BA8C0);
  font-size: var(--text-xs, 0.75rem); margin-block: var(--sp-6, 1.5rem); background: var(--clr-bg, #F7F8FC);
}
.ad-banner-slot { min-height: 100px; display: flex; align-items: center; justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .stat-chip-streak.danger-zone { animation: none; }
  .timeline-node.current .timeline-dot { animation: none; }
}