/* =========================================================
   SharkExam — أنماط الصفحة الرئيسية فقط
   (لا تُستخدم داخل صفحات الامتحانات — كل امتحان مستقل تمامًا)
   ========================================================= */

:root {
  /* لوحة SharkExam — مبهجة ومضيئة */
  --paper:      #0F3460;   /* كحلي متوسط أكثر إشراقاً — الخلفية الرئيسية */
  --card:       #16427A;   /* كحلي دافئ — البطاقات */
  --card-alt:   #0C2D55;   /* كحلي أعمق قليلاً — sections متناوبة */
  --ink:        #F0F6FF;   /* أبيض دافئ مائل للأزرق — النص الأساسي */
  --ink-soft:   #A8CEFF;   /* أزرق فاتح مشرق — النصوص الثانوية */
  --rule:       #2A5490;   /* حدود أكثر وضوحاً */
  --mark:       #74BCFF;   /* أزرق سماوي مشرق — لون التمييز الأساسي */
  --mark-deep:  #4FA3F0;   /* أزرق أعمق للـ hover */
  --accent:     #E8694A;   /* مرجان دافئ — للاستخدام النادر جداً */
  --wa:         #22C45E;
  --wa-dark:    #1AA84F;

  --maxw: 1080px;
  --gap: clamp(1rem, 3vw, 2rem);
  --sec-y: clamp(3.5rem, 8vw, 6.5rem);

  --font: "IBM Plex Sans Arabic", "Segoe UI", "Noto Sans Arabic", Tahoma, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { line-height: 1.25; font-weight: 700; margin: 0 0 .6em; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.05rem, 5.6vw, 3.2rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2rem); }
h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: .25em; }
p  { margin: 0 0 1rem; max-width: 62ch; }

a { color: inherit; }

img { max-width: 100%; height: auto; display: block; }

.wrap { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }

.skip-link {
  position: absolute; inset-inline-start: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: .6rem 1rem; z-index: 60;
}
.skip-link:focus { inset-inline-start: 0; }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- الأزرار ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: inherit; font-weight: 600; text-decoration: none;
  border-radius: 999px; border: 0; cursor: pointer;
  transition: background-color .18s ease;
}
.btn::before {
  content: ""; width: 1.15em; height: 1.15em; flex: none;
  background: currentColor;
  -webkit-mask: var(--wa-icon) center / contain no-repeat;
  mask: var(--wa-icon) center / contain no-repeat;
}
:root {
  --wa-icon: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12.04 2C6.58 2 2.13 6.45 2.13 11.91c0 1.75.46 3.45 1.32 4.95L2 22l5.28-1.38a9.9 9.9 0 0 0 4.76 1.21h.01c5.46 0 9.9-4.45 9.9-9.91C21.95 6.45 17.5 2 12.04 2Zm5.8 14.06c-.24.68-1.4 1.3-1.94 1.35-.5.05-.96.23-3.23-.67-2.72-1.07-4.44-3.86-4.58-4.04-.13-.18-1.1-1.46-1.1-2.79 0-1.32.7-1.97.94-2.24.25-.27.54-.34.72-.34.18 0 .36 0 .52.01.17.01.39-.06.61.47.24.56.8 1.94.87 2.08.07.14.12.3.02.48-.09.18-.14.29-.27.45-.14.16-.29.35-.41.47-.14.14-.28.29-.12.56.16.27.71 1.17 1.53 1.9 1.05.94 1.94 1.23 2.21 1.37.27.14.43.12.59-.07.16-.18.68-.79.86-1.07.18-.27.36-.22.61-.13.25.09 1.6.76 1.87.9.27.14.45.2.52.31.07.11.07.65-.17 1.33Z"/></svg>');
}
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: var(--wa-dark); }
.btn-sm { padding: .5rem 1rem; font-size: .92rem; }
.btn-lg { padding: .95rem 1.7rem; font-size: 1.08rem; box-shadow: 0 6px 18px rgba(23,133,63,.22); }

/* ---------- الفقاعة (الموتيف الأساسي) ---------- */
.bubble {
  display: inline-block; width: .85em; height: .85em; flex: none;
  border: 2px solid var(--mark); border-radius: 50%;
  background: transparent;
}
.bubble.filled { background: var(--mark); border-color: var(--mark); }

/* ---------- الهيدر ---------- */
.site-head { border-bottom: 1px solid var(--rule); background: rgba(13,42,82,.92); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 40; }
.head-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem 0;
}
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; }
.brand-mark { display: inline-flex; gap: .22rem; align-items: center; font-size: .8rem; }
.brand-name { font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }

/* ---------- الهيرو ---------- */
.hero { padding-block: clamp(2.5rem, 6vw, 5rem) var(--sec-y); }
.hero-grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 880px) {
  .hero-grid { grid-template-columns: 1.05fr .95fr; }
}
.lede { font-size: clamp(1.05rem, 2vw, 1.2rem); color: var(--ink-soft); font-weight: 300; }
.hero-facts {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; gap: .55rem; font-size: .95rem; color: var(--ink-soft);
}
.hero-facts li { display: flex; align-items: center; gap: .6rem; }
.hero-facts li::before {
  content: ""; width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--mark); flex: none;
}

/* ورقة الإجابة في الهيرو */
.hero-sheet { display: flex; justify-content: center; }
.sheet {
  width: min(100%, 26rem); background: var(--card);
  border: 1px solid var(--rule); border-radius: 14px;
  padding: 1.4rem 1.5rem 1.2rem;
  box-shadow: 0 0 0 1px rgba(98,174,255,.15), 0 20px 40px rgba(0,0,0,.4);
}
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.sheet-title { font-weight: 600; font-size: .95rem; }
.sheet-timer { font-variant-numeric: tabular-nums; font-size: .9rem; color: var(--ink-soft); }
.sheet-progress { height: 5px; background: var(--rule); border-radius: 3px; margin: .9rem 0 1.3rem; overflow: hidden; }
.sheet-progress span { display: block; height: 100%; width: 37.5%; background: var(--mark); }
.sheet-q { font-size: 1.15rem; font-weight: 600; margin-bottom: 1.1rem; }
.sheet-choices { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.sheet-choices li {
  display: flex; align-items: center; gap: .7rem;
  border: 1px solid var(--rule); border-radius: 10px;
  padding: .6rem .85rem; font-size: 1rem;
}
.sheet-choices .picked { border-color: var(--mark); background: rgba(98,174,255,.08); }
.sheet-foot { margin-top: 1.2rem; font-size: .85rem; color: var(--ink-soft); }

/* لحظة الحركة الوحيدة في الصفحة: تعبئة الفقاعة المختارة */
.bubble.fills { animation: fill-in .5s ease-out .9s both; }
@keyframes fill-in {
  from { background: transparent; border-color: var(--mark); }
  to   { background: var(--mark); border-color: var(--mark); }
}
@media (prefers-reduced-motion: reduce) {
  .bubble.fills { animation: none; background: var(--mark); border-color: var(--mark); }
  * { transition: none !important; }
}

/* ---------- الخطوات ---------- */
.steps { padding-block: var(--sec-y); border-top: 1px solid var(--rule); background: var(--card-alt); }
.step-list {
  list-style: none; counter-reset: step; margin: 2rem 0 0; padding: 0;
  display: grid; gap: 0;
}
.step-list li {
  counter-increment: step;
  display: grid; grid-template-columns: 2.6rem 1fr; gap: 1.2rem;
  padding: 1.4rem 0; border-top: 1px solid var(--rule);
}
.step-list li:last-child { border-bottom: 1px solid var(--rule); }
.step-list li::before {
  content: counter(step);
  width: 2.6rem; height: 2.6rem; display: grid; place-items: center;
  border: 2px solid var(--mark); border-radius: 50%;
  color: var(--mark);
  font-weight: 700; font-size: 1rem;
}
.step-list li:first-child::before { background: var(--mark); border-color: var(--mark); color: var(--paper); }
.step-body { min-width: 0; }
.step-list p { margin: 0; color: var(--ink-soft); }

/* ---------- المميزات ---------- */
.features { padding-block: var(--sec-y); background: var(--card); border-block: 1px solid var(--rule); }
.feature-list { margin: 2rem 0 0; display: grid; gap: 1.6rem; }
@media (min-width: 760px) { .feature-list { grid-template-columns: repeat(3, 1fr); gap: 2.2rem; } }
.feature-list dt {
  font-weight: 700; font-size: 1.05rem; margin-bottom: .4rem;
  padding-top: .9rem; border-top: 3px solid var(--mark);
  color: var(--mark);
}
.feature-list dd { margin: 0; color: var(--ink-soft); font-size: .97rem; }

/* ---------- الأمثلة ---------- */
.samples { padding-block: var(--sec-y); }
.samples-note { color: var(--ink-soft); font-size: .95rem; margin-bottom: 2rem; }
.shots { display: grid; gap: 1.4rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .shots { grid-template-columns: repeat(3, 1fr); } }
.shots figure { margin: 0; }
.shots img { border: 1px solid var(--rule); border-radius: 10px; background: var(--card); width: 100%; }
.shots figcaption { margin-top: .6rem; font-size: .88rem; color: var(--ink-soft); }

/* ---------- نداء أخير ---------- */
.cta { padding-block: var(--sec-y); background: var(--card-alt); border-top: 1px solid var(--rule); }
.cta-inner { text-align: center; }
.cta h2 { color: var(--ink); }
.cta p { color: var(--ink-soft); margin-inline: auto; margin-bottom: 1.8rem; }
.cta .btn-lg { box-shadow: none; }

/* ---------- الفوتر ---------- */
.site-foot { padding-block: 2.8rem; border-top: 1px solid var(--rule); font-size: .95rem; background: var(--paper); }
.foot-inner { display: grid; gap: 1.4rem; }
@media (min-width: 760px) {
  .foot-inner { grid-template-columns: 1fr auto; align-items: start; }
  .copy { grid-column: 1 / -1; }
}
.foot-line { color: var(--ink-soft); margin: .3rem 0 0; }
.foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.foot-links a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px; color: var(--ink-soft); }
.foot-links a:hover { border-color: var(--mark); color: var(--mark); }
.copy { color: var(--ink-soft); font-size: .85rem; margin: 0; }
.nojs { width: min(100% - 2.5rem, var(--maxw)); margin: 1rem auto 0; color: var(--ink-soft); font-size: .9rem; }

/* ---------- زر واتساب العائم ---------- */
.wa-float {
  position: fixed; inset-block-end: 1.1rem; inset-inline-end: 1.1rem; z-index: 50;
  display: inline-flex; align-items: center; gap: .6rem;
  background: var(--wa); color: #fff; text-decoration: none;
  padding: .8rem 1.2rem; border-radius: 999px; font-weight: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.22);
}
.wa-float:hover { background: var(--wa-dark); }
.wa-float::before {
  content: ""; width: 1.4em; height: 1.4em; flex: none; background: currentColor;
  -webkit-mask: var(--wa-icon) center / contain no-repeat;
  mask: var(--wa-icon) center / contain no-repeat;
}
@media (max-width: 520px) {
  .wa-float .wa-float-label { display: none; }
  .wa-float { padding: .95rem; }
}

/* ---------- العرض التفاعلي في الهيرو ---------- */
.sheet-badge {
  font-size: .8rem; font-weight: 600;
  background: rgba(116,188,255,.15);
  color: var(--mark);
  padding: .15rem .55rem; border-radius: 999px;
  white-space: nowrap;
}

/* شريط التقدم — انتقال سلس */
.sheet-progress span { transition: width .35s ease; }

/* حالة الإجابة الصحيحة */
.sheet-choices li.answer-correct {
  border-color: #2ec87b;
  background: rgba(46,200,123,.12);
}
.sheet-choices li.answer-correct .bubble {
  background: #2ec87b; border-color: #2ec87b;
}

/* حالة الإجابة الخاطئة */
.sheet-choices li.answer-wrong {
  border-color: #e86050;
  background: rgba(232,96,80,.1);
}
.sheet-choices li.answer-wrong .bubble {
  border-color: #e86050;
}

/* تغذية راجعة في الأسفل */
.foot-correct { color: #2ec87b; font-weight: 600; }
.foot-wrong   { color: #e86050; font-weight: 600; }

/* زر إعادة العرض */
.demo-restart {
  display: inline-block; margin-top: .4rem;
  background: var(--mark); color: var(--paper);
  border: 0; border-radius: 999px;
  padding: .45rem 1.1rem; font-family: inherit;
  font-size: .9rem; font-weight: 700;
  cursor: pointer; transition: background .18s ease;
}
.demo-restart:hover { background: var(--mark-deep); }