/* ═══════════════════════════════════════════════════════════════
   app.css — السلوكيات التي كان القالب ينفّذها بالجافاسكربت
   (تبديل سطح المكتب/الجوال، وحالات hover و focus)
   محوّلة هنا إلى CSS خالص بنفس القيم الأصلية.
   ═══════════════════════════════════════════════════════════════ */

/* ── التبديل بين واجهة سطح المكتب والجوال (كان isMobile = vw < 900) ──
   نستخدم !important لأن قيمة display مكتوبة داخل السمة style مباشرةً
   كما هي في القالب الأصلي، ولا تُهزم بقاعدة عادية. */
@media (min-width: 900px) { .only-mobile { display: none !important; } }
@media (max-width: 899px) { .only-desktop { display: none !important; } }

/* عناصر الهيدر التي تظهر على الشاشات الواسعة فقط
   (roomyLogin = vw >= 1120، roomy = vw >= 1240) */
@media (max-width: 1119px) { .roomy-login { display: none !important; } }
@media (max-width: 1239px) { .roomy { display: none !important; } }

/* عناوين التنقّل المختصرة عند ضيق الشاشة (كان vw < 1080) */
.nav-label-short { display: none; }
@media (max-width: 1079px) {
  .nav-label-long { display: none; }
  .nav-label-short { display: inline; }
}

/* ── الشبكات التي كانت تعتمد على متغيّر mob ── */
.two-col {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
  gap: 20px;
  margin-top: 18px;
}

.faq-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 28px;
  margin-top: 64px;
  align-items: start;
}

.reg-grid {
  animation: rise .5s ease both;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 2fr);
  gap: 20px;
  max-width: 1100px;
  margin: 0 auto;
}

.admin-grid {
  animation: rise .5s ease both;
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr);
  gap: 20px;
}

.admin-aside {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px;
  border-radius: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  align-self: start;
  position: sticky;
  top: 112px;
}

.admin-me {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 16px;
}

.profile-head {
  display: flex;
  gap: 22px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.agent-side { position: sticky; top: 20px; min-height: 320px; padding: 140px 32px 32px; contain: paint; }

.to-top { bottom: 24px; }

@media (max-width: 899px) {
  .two-col { grid-template-columns: minmax(0, 1fr); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .reg-grid { grid-template-columns: minmax(0, 1fr); }
  .agent-side { position: static; min-height: 0; padding: 96px 22px 24px; border-radius: 20px; }
  .admin-grid { grid-template-columns: minmax(0, 1fr); }

  .admin-aside {
    flex-direction: row;
    gap: 6px;
    padding: 10px;
    border-radius: 16px;
    overflow-x: auto;
    position: sticky;
    top: 70px;
    z-index: 5;
  }

  .admin-me { display: none; }

  .profile-head {
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
  }

  .to-top { bottom: 92px; }
}

/* ── حالات hover المأخوذة من style-hover في القالب ── */
.hv-acc:hover { background: var(--acc-h); }
.hv-acc-color:hover { color: var(--acc-h); }
.hv-login:hover { border-color: var(--acc); color: var(--acc); }
.hv-icon:hover { background: var(--chip); color: var(--teal-t); }
.hv-cta:hover { background: var(--acc-h); transform: translateY(-2px); }
.hv-ink-acc:hover { color: var(--acc); }
.hv-arrow:hover { border-color: var(--acc); color: var(--acc); }
.hv-lift3:hover { transform: translateY(-3px); }
.hv-lift4:hover { transform: translateY(-4px); }
.hv-lift2:hover { transform: translateY(-2px); }
.hv-zoom:hover img,
img.hv-zoom-self:hover { transform: scale(1.07); }
.hv-zoom6:hover img { transform: scale(1.06); }
.hv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px var(--sh);
  border-color: rgba(15, 124, 140, .4);
}
.hv-vote-card:hover {
  transform: translateY(-6px);
  border-color: rgba(47, 158, 82, .5);
}
.hv-border-teal:hover { border-color: rgba(15, 124, 140, .4); }
.hv-border-teal5:hover { border-color: rgba(15, 124, 140, .5); }
.hv-border-hi:hover { border-color: var(--hi); }
.hv-chip:hover { background: var(--chip); }
.hv-teal:hover { background: var(--teal-h); }
.hv-acc-soft:hover { background: var(--acc-soft); }
.hv-row:hover { background: var(--chip); }
.hv-play:hover { transform: scale(1.08); }
.hv-white:hover { color: #fff; }
.hv-social:hover { background: rgba(255, 255, 255, .24); }
.hv-subscribe:hover { background: #146f36; }

/* ── حالات focus المأخوذة من style-focus ── */
.fc-teal:focus { border-color: var(--teal-t); }

/* الصور المتحركة داخل البطاقات */
.zoom-img { transition: transform .6s; }

/* حركة حلقة التقدّم في الملف الشخصي */
@keyframes ring { from { stroke-dashoffset: var(--dash); } }

/* القائمة الجانبية والنوافذ المنبثقة — مخفية حتى يفتحها المستخدم */
[hidden] { display: none !important; }

/* ── خيارات النموذج كشرائح (أزرار راديو حقيقية داخل النموذج) ── */
.opt-chip { position: relative; cursor: pointer; }
.opt-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.opt-chip span { display: block; padding: 9px 16px; border-radius: 8px; font-size: 13px; font-weight: 800; background: var(--bg); color: var(--ink2); border: 1px solid var(--line2); }
.opt-chip-square span { width: 44px; height: 44px; padding: 0; border-radius: 10px; display: grid; place-items: center; font-size: 16px; font-weight: 900; box-sizing: border-box; }
.opt-chip input:checked + span { background: var(--teal); color: var(--on-acc); border-color: var(--teal); }
.opt-chip input:focus-visible + span { outline: 2px solid var(--teal); outline-offset: 2px; }

/* ── ترقيم الصفحات ── */
.pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; margin: 0; padding: 0; list-style: none; }
.pager a, .pager span { min-width: 40px; height: 40px; padding: 0 12px; border-radius: 10px; display: grid; place-items: center; font-size: 14px; font-weight: 800; box-sizing: border-box; background: var(--surface); border: 1px solid var(--line2); color: var(--ink2); }
.pager a:hover { background: var(--chip); }
.pager .is-current { background: var(--teal); border-color: var(--teal); color: var(--on-acc); }
.pager .is-disabled { opacity: .45; }
.pager-summary { margin-top: 10px; text-align: center; font-size: 12px; color: var(--muted); font-weight: 700; }

/* ── خيار غير مسموح في شرائح النموذج (عدد مراحل يرفضه الخادم) ── */
.opt-chip input:disabled + span { opacity: .45; cursor: not-allowed; }

/* ── شارة «قريباً» على بطاقة مسابقة مرتقبة ── */
.soon-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 7px;
  font-size: 11px; font-weight: 900; white-space: nowrap;
  color: #2a1a00;
  background: linear-gradient(100deg, #ffd978, #ffb020 45%, #ffe9b0 55%, #ffb020);
  background-size: 200% 100%;
  box-shadow: 0 6px 18px rgba(255, 176, 32, .35);
  animation: goldshine 3s linear infinite, floaty 3.2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .soon-badge { animation: none; }
}

/* ── شريط اختيار المسابقة في صفحة التصويت ──────────────────────
   كان flex بتمرير أفقي، فأربع مسابقات تمتد نحو ٩٨٠ بكسل ويختفي
   نصفها خلف تمرير بلا دليل عليه. الالتفاف يُظهرها كلها. */
.vote-switch {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; padding: 2px 2px 8px;
}
.vote-switch > a { flex: 1 1 230px; min-width: 0; max-width: 300px; }

/* على الجوال بطاقة في كل سطر: ٢٣٠ بكسل لا تتسع لاسم مسابقة ومرحلتها */
@media (max-width: 430px) {
  .vote-switch > a { flex-basis: 100%; max-width: none; }
}

/* ── عدّاد المسابقات المفتوحة للتصويت بجوار رابط «التصويت» ── */
.nav-badge {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  margin-inline-start: 6px; border-radius: 10px;
  background: var(--acc); color: var(--on-acc);
  font-size: 11px; font-weight: 900; line-height: 1;
}

/* ── نبذة المسابقة عند وقوف المؤشر على بطاقتها ──────────────────
   تغطّي الصورة بسواد شفاف ويُقرأ النص في وسطها، مع ترك أسفل الصورة
   للاسم والتصنيف فلا يختفيان. لا تظهر على الأجهزة اللمسية: لا وقوف
   فيها، فكانت ستبقى معلّقة بعد أول لمسة. */
.comp-blurb {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 20px 18px 66px;
  background: rgba(4, 14, 26, .82);
  opacity: 0; transition: opacity .25s ease;
  pointer-events: none;
}
.comp-blurb > span {
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 13px; line-height: 1.95; font-weight: 700;
  color: #fff; text-align: center; text-wrap: pretty;
}

@media (hover: hover) {
  .hv-card:hover .comp-blurb,
  .hv-card:focus-visible .comp-blurb { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .comp-blurb { transition: none; }
}

/* علامة حالة التقييم على بطاقة الحكم.
   تتبع data-scored و data-dirty اللذين يضبطهما الحفظ دون إعادة تحميل،
   فتتحدّث العلامة فور الحفظ بلا شيفرة إضافية. */
.judge-flag {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  display: none;
  align-items: center;
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.6;
  backdrop-filter: blur(6px);
}

.judge-done { display: inline-flex; background: rgba(47, 158, 82, .92); color: #fff; }
.judge-saved { background: rgba(47, 158, 82, .92); color: #fff; }
.judge-dirty { background: rgba(234, 179, 8, .95); color: #1a1205; }

[data-scored="1"] .judge-saved { display: inline-flex; }

/* تعديل بعد آخر حفظ يسبق «مُقيَّمة»: ما يراه الحكم ليس محفوظاً بعد */
[data-dirty="1"] .judge-saved { display: none; }
[data-dirty="1"] .judge-dirty { display: inline-flex; }

/* ── الوكلاء ── */
.is-hidden { display: none !important; }
.agent-card { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.agent-card:hover { transform: translateY(-4px); border-color: rgba(15,124,140,.45) !important; box-shadow: 0 18px 40px var(--sh, rgba(15,42,74,.14)); }
.agent-chip:hover { border-color: var(--teal) !important; }