/* ═══ مركز الإبداع — نموذج التسجيل للدورات ═══ */
/*
 * ملاحظة: لا يوجد @font-face هنا عن قصد.
 * مجلد assets/fonts/ فارغ، فكانت كل قواعد @font-face تُنتج 404
 * في كل زيارة (5 طلبات فاشلة). الخطوط تُحمَّل مرة واحدة من
 * assets/css/cairo-local.css في جذر الموقع.
 */

/* ── أدوات ── */
.vh {
  position:absolute !important; width:1px; height:1px; margin:-1px;
  padding:0; border:0; overflow:hidden; clip:rect(0 0 0 0);
  clip-path:inset(50%); white-space:nowrap;
}
/* كان left:-9999px لإخفاء المصيدة. في صفحة RTL لا يُخفيها بل يوسّع
   المساحة القابلة للتمرير 9999px إلى جهة اليسار، فيصغّر المتصفح
   الصفحة كلها ويبدو المحتوى مزيحاً. نستخدم الإخفاء بالـ clip نفس
   تقنية .vh أعلاه: العنصر يبقى في DOM (يقرأه الروبوت) ولا يضيف
   أي عرض. */
.hp-trap {
  position:absolute !important; width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%);
  white-space:nowrap; opacity:0; pointer-events:none;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

:root {
  --blue-1:#1e3a6e; --blue-2:#2563ab; --blue-3:#3b82f6;
  --gold:#d4a017; --bg:#f4f7fb; --ink:#1f2937; --muted:#6b7280;
  --ok:#16a34a; --warn:#d97706; --err:#dc2626;
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
  font-family:'Cairo','Tahoma',sans-serif; direction:rtl;
  background:var(--bg); color:var(--ink); line-height:1.7;
}
a { color:var(--blue-2); text-decoration:none; }

/* ── Header (مضغوط: الشريط كان يلتهم نصف الشاشة) ── */
.train-header {
  background:linear-gradient(135deg,var(--blue-1) 0%,var(--blue-2) 100%);
  color:#fff; padding:14px 18px 16px; text-align:center; line-height:1.45;
  border-radius:0 0 18px 18px; box-shadow:0 3px 12px rgba(30,58,110,.28);
}
/* الشعار صار رابطاً. display:inline-block ضروري: بدونه يلتفّ
   السطر حول الصورة فقط فلا تعمل المنطقة القابلة للنقر. */
.train-logo-link {
  display:inline-block; line-height:0;
  border-radius:12px; transition:transform .2s, opacity .2s;
}
.train-logo-link:hover { transform:scale(1.05); opacity:.92; }
.train-logo-link:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.train-header .train-logo {
  display:block; margin:0 auto 6px;
  height:56px; width:auto;   /* العرض يتبع نسبة الصورة الأصلية */
}
.train-header h1 { font-weight:700; font-size:1.3rem; line-height:1.35; }
.train-header p  { opacity:.9; font-size:.88rem; margin-top:2px; font-weight:300; }
@media (max-width:640px){
  .train-header{ padding:10px 12px 12px; }
  .train-header .train-logo{ height:46px; width:auto; margin-bottom:4px; }
  .train-header h1{ font-size:1.08rem; }
  .train-header p { font-size:.8rem; }
}

/* ── Layout ── */
.wrap { max-width:1100px; margin:26px auto 60px; padding:0 16px; }
.card-panel {
  background:#fff; border-radius:16px; padding:26px;
  box-shadow:0 4px 18px rgba(30,58,110,.08); margin-bottom:26px;
  border:1px solid #e5edf6;
}
.section-title {
  color:var(--blue-1); font-weight:700; font-size:1.25rem; margin-bottom:16px;
  display:flex; align-items:center; gap:10px;
}
.section-title::before {
  content:''; width:5px; height:26px; border-radius:4px;
  background:linear-gradient(180deg,var(--blue-2),var(--blue-3)); display:inline-block;
}

/* ── Form fields ── */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:14px; }
.field label { display:block; font-weight:600; font-size:.88rem; color:var(--blue-1); margin-bottom:5px; }
.field input, .field select, .field textarea {
  width:100%; border:1.5px solid #dbe4f0; border-radius:10px; padding:10px 12px;
  font-family:inherit; font-size:.95rem; background:#fbfdff; transition:.2s; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline:none; border-color:var(--blue-2); box-shadow:0 0 0 3px rgba(37,99,171,.15); background:#fff;
}
.field .hint { font-size:.75rem; color:var(--muted); margin-top:3px; }
.required::after { content:' *'; color:var(--err); }

/* ── Course cards ── */
.courses-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px; }
.course-card {
  background:#fff; border:2px solid #e5edf6; border-radius:16px; overflow:hidden;
  transition:.25s; cursor:pointer; position:relative; display:flex; flex-direction:column;
}
.course-card:hover { transform:translateY(-4px); box-shadow:0 12px 28px rgba(30,58,110,.15); }
.course-card.selected { border-color:var(--blue-2); box-shadow:0 0 0 4px rgba(37,99,171,.18); }
.course-card.selected .checkmark { opacity:1; transform:scale(1); }
.checkmark {
  position:absolute; top:12px; left:12px; width:32px; height:32px; border-radius:50%;
  background:var(--blue-2); color:#fff; display:flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(.4); transition:.25s; z-index:2; font-weight:700;
}
.course-card.full { opacity:.55; cursor:not-allowed; }
.course-flag { position:absolute; top:12px; right:12px; z-index:2; }
.course-thumb { height:150px; background:linear-gradient(135deg,var(--blue-1),var(--blue-3));
  display:flex; align-items:center; justify-content:center; color:#fff; font-size:2.6rem; overflow:hidden; }
.course-thumb img { width:100%; height:100%; object-fit:cover; }
.course-body { display:flex; padding:16px; flex:1; flex-direction:column; gap:8px; }
.course-title { display:block; color:var(--blue-1); font-weight:700; font-size:1.05rem; }
.course-desc { display:block; font-size:.85rem; color:var(--muted); max-height:88px; overflow:hidden; }
.course-desc.open { max-height:none; }
.course-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:auto; }
.badge {
  background:#eef4fc; color:var(--blue-1); border-radius:50px; padding:3px 12px;
  font-size:.75rem; font-weight:600;
}
.badge.gold { background:#fdf6e3; color:#9a7206; }
.badge.full-b { background:#fee2e2; color:var(--err); }
.course-free {
  position:absolute; top:12px; right:12px; background:var(--ok); color:#fff;
  border-radius:50px; padding:3px 14px; font-size:.78rem; font-weight:700; z-index:2;
}
.course-price {
  position:absolute; top:12px; right:12px; background:#1e3a6e; color:#fff;
  border-radius:50px; padding:3px 14px; font-size:.78rem; font-weight:700; z-index:2;
}
.read-more { font-size:.8rem; color:var(--blue-2); background:none; border:none; cursor:pointer;
  font-family:inherit; font-weight:600; align-self:flex-start; padding:0; }

/* ── Certificate choice ── */
.cert-choice { display:flex; gap:12px; flex-wrap:wrap; }
.cert-opt {
  flex:1; min-width:200px; border:2px solid #dbe4f0; border-radius:12px; padding:14px;
  text-align:center; cursor:pointer; transition:.2s; background:#fbfdff;
}
.cert-opt.active { border-color:var(--gold); background:#fffaf0; box-shadow:0 0 0 3px rgba(212,160,23,.15); }
.cert-opt input { margin-left:6px; }
.cert-total {
  background:linear-gradient(135deg,#fff8e6,#fdf0c9); border:1px dashed var(--gold);
  border-radius:12px; padding:12px 16px; font-weight:700; color:#7a5c04; display:none;
}

/* ── "اختياري" tag on non-required fields ── */
.opt-tag {
  display:inline-block; margin-right:6px; padding:1px 8px; border-radius:50px;
  background:#eef4fc; border:1px solid #cfe0f5; color:#2563ab;
  font-size:.68rem; font-weight:600; line-height:1.6; vertical-align:middle;
}
label.required::after { content:' *'; color:#dc2626; font-weight:700; }

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; gap:8px; background:linear-gradient(135deg,var(--blue-1),var(--blue-2));
  color:#fff; border:none; border-radius:12px; padding:12px 32px; font-family:inherit;
  font-size:1rem; font-weight:700; cursor:pointer; transition:.25s;
}
.btn:hover { transform:translateY(-2px); box-shadow:0 8px 20px rgba(30,58,110,.35); }
.btn.gold { background:linear-gradient(135deg,#b8860b,var(--gold)); }
.btn.sm { padding:7px 16px; font-size:.82rem; border-radius:9px; }
.btn.danger { background:linear-gradient(135deg,#b91c1c,#ef4444); }
.btn.ghost { background:#fff; color:var(--blue-1); border:1.5px solid var(--blue-2); }

.alert { border-radius:12px; padding:14px 18px; margin-bottom:18px; font-weight:600; }
.alert.ok { background:#dcfce7; color:#14532d; border:1px solid #86efac; }
.alert.err { background:#fee2e2; color:#7f1d1d; border:1px solid #fca5a5; }

.turnstile-wrap { display:flex; justify-content:center; }
/* الودجت بحجمه الطبيعي (300px) في المنتصف بدل التمدد على كامل العرض،
   فهو عنصر خارجي (iframe) ولا يمكن تنسيقه داخلياً. */
.turnstile-wrap { display:flex; justify-content:center; }
.turnstile-wrap .hint { text-align:center; }

/* ── Summary / thank you ── */
.summary-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.summary-table th, .summary-table td { padding:9px 12px; border-bottom:1px solid #e5edf6; text-align:right; }
.summary-table th { background:#f2f7fd; color:var(--blue-1); }
.reg-code {
  background:linear-gradient(135deg,var(--blue-1),var(--blue-2)); color:#fff; border-radius:16px;
  padding:22px; text-align:center; font-size:1.15rem; font-weight:700; margin-bottom:22px;
}

/* ── Admin ── */
.admin-topbar { background:var(--blue-1); color:#fff; padding:14px 22px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:10px; }
.admin-topbar a { color:#fff; }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px; }
.tab { padding:9px 22px; border-radius:50px; background:#eef4fc; color:var(--blue-1); font-weight:700; cursor:pointer; border:none; font-family:inherit; font-size:.9rem; }
.tab.active { background:linear-gradient(135deg,var(--blue-1),var(--blue-2)); color:#fff; }
table.data { width:100%; border-collapse:collapse; background:#fff; border-radius:12px; overflow:hidden; font-size:.88rem; }
table.data th { background:var(--blue-1); color:#fff; padding:10px; text-align:right; white-space:nowrap; }
table.data td { padding:9px 10px; border-bottom:1px solid #eef2f8; text-align:right; }
table.data tr:hover td { background:#f6f9fd; }
.pill { border-radius:50px; padding:2px 12px; font-size:.75rem; font-weight:700; display:inline-block; }
.pill.pending { background:#fef9c3; color:#854d0e; }
.pill.confirmed { background:#dcfce7; color:#14532d; }
.pill.cancelled { background:#fee2e2; color:#7f1d1d; }
.pill.attended { background:#dbeafe; color:#1e3a8a; }
.pill.paid { background:#d1fae5; color:#065f46; }
.pill.unpaid { background:#ffe4e6; color:#881337; }

/* ── Footer ── */
.train-footer { text-align:center; padding:26px; color:var(--muted); font-size:.85rem; }

/* ── Mobile ── */
@media (max-width:640px){
  .wrap{padding:0 10px;} .card-panel{padding:16px;}
  .train-footer{padding:18px 12px;}
}

/* ══════════════════════════════════════════════════════════════
 * إصلاح التجاوز الأفقي على الجوّال
 *
 * courses-grid كان يستخدم minmax(320px,1fr). الحدّ الأدنى 320px
 * أكبر من عرض الشاشة في بعض الأجهزة بعد خصم الحشو، فتجاوز المحتوى
 * عرض النافذة."Because الصفحة RTL, يثبّت المتصفّح التمرير عند اليمين
 * فتظهر المساحة الفارغة على اليسار وتبدو الصفحة "بيضاء".
 *
 * clamp() يعطي عموداً واحداً يتقلّص تلقائياً بدل أن يصرّ على 320px.
 * ══════════════════════════════════════════════════════════════ */
html { overflow-x: hidden; }
body { overflow-x: hidden; max-width: 100%; }
.wrap { width: 100%; }

.courses-grid,
.grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }

@media (max-width:640px){
  .courses-grid,
  .grid { grid-template-columns: 1fr; }
  .course-card { min-width: 0; }
}