/* =========================================================
   ServexHub — Error Pages Styles
   Path: /assets/css/pages/errors.css
   متوافقة مع الهيكلة الجديدة (.error-page ...)
   وتحافظ على توافق قديم مع (.error ...)
   ========================================================= */

/* قاعدة: نستخدم ألوان الهوية العامة من :root إن وُجدت.
   نحدد لون إبراز افتراضي ويمكن تغييره حسب كود الحالة. */
.error-page { --err-acc: var(--secondary, #00BCD9); }

/* ألوان إبراز لكل كود حالة */
.error-page[data-code="400"] { --err-acc:#f59e0b; }  /* طلب غير صالح */
.error-page[data-code="401"] { --err-acc:#3b82f6; }  /* غير مصرح */
.error-page[data-code="403"] { --err-acc:#fb923c; }  /* محظور */
.error-page[data-code="404"] { --err-acc:#a78bfa; }  /* غير موجود */
.error-page[data-code="419"] { --err-acc:#f97316; }  /* جلسة منتهية */
.error-page[data-code="429"] { --err-acc:#f43f5e; }  /* طلبات كثيرة */
.error-page[data-code="500"] { --err-acc:#ef4444; }  /* خطأ داخلي */
.error-page[data-code="503"] { --err-acc:#22c55e; }  /* صيانة/غير متاح */

.error-page {
  padding: 28px 14px;
}

.error-wrap {
  max-width: 760px;
  margin: 40px auto;
  padding: 28px 22px;
  background: var(--card, #0f172a);
  color: var(--ink, #e5e7eb);
  border: 1px solid var(--line, #1f2a44);
  border-radius: 16px;
  text-align: center;
  box-shadow:
    0 16px 48px rgba(0,0,0,.28),
    0 1px 0 rgba(255,255,255,.02) inset;
  position: relative;
  overflow: hidden;
}

/* شريط إبراز علوي */
.error-wrap::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--brand-from, #060066), var(--err-acc));
  opacity: .95;
}

/* وهج خفيف بلون الإبراز */
.error-wrap::after {
  content: "";
  position: absolute; inset: -30% -20% auto -20%; height: 60%;
  pointer-events: none;
  background: radial-gradient(60% 50% at 50% 0%, color-mix(in srgb, var(--err-acc) 20%, transparent) 0%, transparent 70%);
  opacity: .6;
}

/* رأس الصفحة: الكود والعنوان */
.error-head {
  display: grid;
  place-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.error-code {
  display: block;
  font-weight: 800;
  font-size: clamp(44px, 8vw, 72px);
  line-height: 1;
  color: var(--err-acc);
  letter-spacing: .5px;
  text-shadow: 0 4px 24px rgba(0,0,0,.25);
}

.error-title {
  margin: 0;
  color: #fff;
  font-weight: 800;
  font-size: clamp(20px, 3.6vw, 28px);
}

/* الوصف */
.error-desc {
  margin: 10px auto 0;
  color: var(--ink, #e5e7eb);
  opacity: .95;
  line-height: 1.9;
  max-width: 56ch;
}

/* منطقة الأزرار */
.error-actions {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

/* أزرار – تعتمد على ستايلات .btn العامة في الموقع،
   لكن نضيف تحسينات وصول وتركيز */
.error-actions .btn {
  border: 0;
  border-radius: 12px;
  padding: 10px 14px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .06s ease, box-shadow .2s ease, background-color .2s ease;
}
.error-actions .btn:active { transform: translateY(1px); }
.error-actions .btn:focus-visible {
  outline: 2px solid var(--err-acc);
  outline-offset: 2px;
}

/* تخصيص طفيف للأولية/الثانوية إن لم تكن معرفة سابقًا */
.error-actions .btn--primary {
  background: var(--primary, #0090A6);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0,144,166,.25);
}
.error-actions .btn--primary:hover { background: var(--primary-hov, #007a8d); }

.error-actions .btn--secondary {
  background: var(--secondary, #00BCD9);
  color: #00323a;
  box-shadow: 0 8px 20px rgba(0,188,217,.22);
}
.error-actions .btn--secondary:hover { background: var(--secondary-hov, #00a8c2); }

/* ظلال مختلفة حسب كود الحالة (لمسة بسيطة) */
.error-page[data-code="404"] .error-wrap { box-shadow: 0 16px 48px rgba(167,139,250,.18), 0 1px 0 rgba(255,255,255,.02) inset; }
.error-page[data-code="401"] .error-wrap { box-shadow: 0 16px 48px rgba(59,130,246,.18), 0 1px 0 rgba(255,255,255,.02) inset; }
.error-page[data-code="403"] .error-wrap { box-shadow: 0 16px 48px rgba(251,146,60,.18), 0 1px 0 rgba(255,255,255,.02) inset; }
.error-page[data-code="419"] .error-wrap { box-shadow: 0 16px 48px rgba(249,115,22,.18), 0 1px 0 rgba(255,255,255,.02) inset; }
.error-page[data-code="429"] .error-wrap { box-shadow: 0 16px 48px rgba(244,63,94,.18), 0 1px 0 rgba(255,255,255,.02) inset; }
.error-page[data-code="500"] .error-wrap { box-shadow: 0 16px 48px rgba(239,68,68,.20), 0 1px 0 rgba(255,255,255,.02) inset; }
.error-page[data-code="503"] .error-wrap { box-shadow: 0 16px 48px rgba(34,197,94,.18), 0 1px 0 rgba(255,255,255,.02) inset; }

/* تجاوبية */
@media (max-width: 480px) {
  .error-wrap { margin: 28px auto; padding: 22px 16px; }
  .error-desc { font-size: 15px; }
}

/* =========================================================
   توافق قديم مع الصفحات التي تستخدم .error / .error--404...
   (إبقاء الأنماط القديمة لكن بتحسينات بسيطة)
   ========================================================= */
.error {
  max-width: 760px;
  margin: 40px auto;
  padding: 24px;
  border-radius: 16px;
  border: 1px solid var(--line, #1f2a44);
  background: var(--card, #0f172a);
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.24);
}
.error h1 { margin: 0 0 8px; color: #fff; font-weight: 800; }
.error p { color: var(--ink, #e5e7eb); line-height: 1.9; }
.error .btn { margin-top: 8px; }

/* ظلال خاصة بالكلاسات القديمة */
.error--404 { box-shadow: 0 10px 40px rgba(167,139,250,.18); }
.error--401 { box-shadow: 0 10px 40px rgba(59,130,246,.18); }
.error--403 { box-shadow: 0 10px 40px rgba(251,146,60,.18); }