/* ═══════════════════════════════════════════════════════════
   تحضيري — اشتراك المجموعات | التصميم المبسّط
   خط أكبر · ترويسة ضمن المحتوى · زر الإجراء تحت المحتوى
   ═══════════════════════════════════════════════════════════ */

body.lite { background: #EDF2F7; font-size: 15px; line-height: 1.75; }
body.lite .page { max-width: 880px; margin: 0 auto; padding: 14px 12px 40px; }

/* ── الترويسة: مجموعتان (الهوية + الأسعار) تلتفّان ككتلتين ── */
body.lite .topline {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 14px; margin-bottom: 12px; box-shadow: var(--sh-1);
}
body.lite .topline .brand { display: flex; align-items: center; gap: 10px; }
body.lite .topline .brand a { display: flex; line-height: 0; }
body.lite .topline .brand img { height: 40px; border-radius: 6px; }
body.lite .topline .brand b { font-size: 18px; font-weight: 700; white-space: nowrap; }
body.lite .topline .tags {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-inline-start: auto;              /* لليسار على الشاشات الواسعة */
}
body.lite .topline .pill {
  background: var(--brand); color: #fff; border-radius: 999px;
  padding: 4px 13px; font-size: 14px; font-weight: 700; white-space: nowrap;
}
body.lite .topline .pill i { font-style: normal; font-weight: 400; opacity: .9; font-size: 12px; }
body.lite .topline .minpill {
  background: var(--warn-bg); color: var(--warn);
  border: 1px solid #F5E3BC; border-radius: 999px;
  padding: 3px 12px; font-size: 13px; font-weight: 600; white-space: nowrap;
}
body.lite .topline .minpill b { font-size: 15px; font-weight: 800; }

/* ── الخطوات ── */
body.lite .steps { display: flex; gap: 6px; margin-bottom: 12px; }
body.lite .steps .s {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 10px; font-size: 15px; font-weight: 600; color: var(--ink-2);
  cursor: pointer; white-space: nowrap;
}
body.lite .steps .s i {
  width: 21px; height: 21px; border-radius: 50%; background: var(--line-2);
  display: grid; place-items: center; font-size: 12px; font-style: normal; font-weight: 700;
}
body.lite .steps .s.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 700; }
body.lite .steps .s.on i { background: rgba(255,255,255,.3); color: #fff; }
body.lite .steps .s.done { color: var(--ok); border-color: #BFE8E2; }
body.lite .steps .s.done i { background: var(--ok); color: #fff; }

body.lite .pn { display: none; }
body.lite .pn.on { display: block; }

body.lite .box {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; margin-bottom: 12px; box-shadow: var(--sh-1);
}

/* ── اختيار طريقة الإدخال ── */
body.lite .pick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.lite .pick .opt {
  border: 2px dashed var(--brand-100); background: var(--brand-050);
  border-radius: 12px; padding: 26px 16px; cursor: pointer; text-align: center;
  font-family: var(--font); transition: .15s;
}
body.lite .pick .opt:hover { border-color: var(--brand); background: var(--brand-100); }
body.lite .pick .opt .i { font-size: 34px; display: block; line-height: 1.3; }
body.lite .pick .opt b { display: block; font-size: 17px; color: var(--brand-700); margin-top: 6px; }
body.lite .pick .opt small { display: block; font-size: 14px; color: var(--ink-2); margin-top: 4px; }

/* ── الحقول ── */
body.lite .inp { padding: 10px 12px; font-size: 15px; border-radius: 9px; }
body.lite .inp.sm { padding: 7px 10px; font-size: 14px; }
body.lite textarea.inp { min-height: 92px; line-height: 1.8; }
body.lite .drop { padding: 26px 16px; border-radius: 11px; }
body.lite .drop b { font-size: 17px; margin: 0; }
body.lite .drop small { font-size: 14px; color: var(--ink-2); }
body.lite .ai-busy { display: none; padding: 12px; font-size: 14px; text-align: center; }
body.lite .ai-busy.on { display: block; }
body.lite .spin { display: inline-block; width: 16px; height: 16px; border-width: 2px; margin: 0 5px -3px 0; }

/* ── العدّادات ── */
body.lite .counts {
  display: flex; align-items: center; gap: 15px; flex-wrap: wrap;
  font-size: 14px; color: var(--ink-2); font-weight: 600; margin-bottom: 10px;
}
body.lite .counts b { font-size: 17px; }
body.lite .counts .sp { flex: 1; }
body.lite .c-ok b   { color: var(--ok); }
body.lite .c-err b  { color: var(--err); }
body.lite .c-warn b { color: var(--warn); }
body.lite .c-blue b { color: var(--brand); }
body.lite .lnk {
  border: none; background: none; cursor: pointer; font-family: var(--font);
  font-size: 14px; font-weight: 600; color: var(--brand-600); padding: 4px 7px; border-radius: 6px;
}
body.lite .lnk:hover { background: var(--brand-050); }
body.lite .lnk.danger { color: var(--err); }

/* ── الجدول ── */
body.lite table.tbl { font-size: 15px; min-width: 680px; }
body.lite table.tbl th { padding: 10px 10px; font-size: 14px; color: var(--ink); }
body.lite table.tbl td { padding: 5px 8px; }
body.lite table.tbl input.cell { padding: 9px 10px; font-size: 15px; color: var(--ink); }
body.lite table.tbl input.cell::placeholder { color: #9AAAB8; }
body.lite .tag { padding: 3px 10px; font-size: 13px; }
body.lite .msg { font-size: 12.5px; }
body.lite .idx { width: 30px; }

body.lite .row-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
body.lite .row-line .k { font-size: 15px; color: var(--ink); min-width: 46px; font-weight: 700; }

/* ── الباقات ── */
body.lite .packs { display: flex; gap: 10px; }
body.lite .pack {
  border: 2px solid var(--line); border-radius: 10px; padding: 8px 18px;
  display: flex; align-items: baseline; gap: 7px; cursor: pointer; background: #fff;
}
body.lite .pack::after { content: none; }
body.lite .pack b { font-size: 21px; color: var(--brand); font-weight: 800; }
body.lite .pack span { font-size: 14px; color: var(--ink-2); font-weight: 600; }
body.lite .pack.sel { border-color: var(--brand); background: var(--brand-050); }
body.lite .pack.sel span { color: var(--brand-700); }

/* ── الدفع ── */
body.lite .paytab {
  border: 2px solid var(--line); border-radius: 10px; padding: 10px 18px;
  font-size: 15px; font-weight: 600; cursor: pointer; background: #fff; text-align: center;
}
body.lite .paytab.sel { border-color: var(--brand); background: var(--brand-050); color: var(--brand-700); font-weight: 700; }

/* ── البنوك ── */
body.lite .banks { display: grid; gap: 6px; margin-top: 10px; }
body.lite .bk {
  display: flex; align-items: center; gap: 9px;
  background: #F7FAFC; border: 1px solid var(--line); border-radius: 9px; padding: 7px 11px;
}
body.lite .bk b { font-size: 14px; min-width: 104px; }
body.lite .bk code { font-size: 14px; direction: ltr; flex: 1; overflow-x: auto; }
body.lite .copy { font-size: 13px; padding: 5px 11px; }

/* ── شريط الإجراء: تحت المحتوى، غير عائم ── */
body.lite .actions {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 16px; box-shadow: var(--sh-1); flex-wrap: wrap;
}
body.lite .actions .sum { flex: 1; display: flex; align-items: baseline; gap: 12px; font-size: 15px; font-weight: 600; }
body.lite .actions .total { font-size: 22px; font-weight: 800; color: var(--brand); }
body.lite .actions .disc { font-size: 12.5px; color: var(--ok); }
body.lite .btn-lg { padding: 12px 26px; font-size: 16px; }

/* ── شاشة التأكيد ── */
body.lite .rv { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
body.lite .rv-r {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 11px 14px; font-size: 15px; border-bottom: 1px solid var(--line-2);
}
body.lite .rv-r span:first-child { color: var(--ink-2); font-weight: 600; }
body.lite .rv-r span:last-child { font-weight: 600; }
body.lite .rv-t {
  display: flex; justify-content: space-between;
  padding: 13px 14px; background: var(--brand-050); font-weight: 800; font-size: 17px;
}
body.lite .rv-t b { color: var(--brand); font-size: 22px; }

body.lite .alert { padding: 10px 14px; font-size: 14px; margin-bottom: 10px; border-radius: 9px; }
body.lite .muted { color: var(--ink-2); font-size: 14px; }

/* ── زر واتساب العائم ── */
.wa {
  position: fixed; inset-inline-start: 18px; bottom: 18px; z-index: 60;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: grid; place-items: center; text-decoration: none;
  box-shadow: 0 4px 14px rgba(37,211,102,.45);
  transition: .18s;
}
.wa:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(37,211,102,.55); }

@media (max-width: 700px) {
  body.lite { font-size: 14.5px; }

  /* الترويسة على الجوال: سطر للهوية وسطر للأسعار — كلاهما في الوسط */
  body.lite .topline { flex-direction: column; gap: 8px; padding: 12px 10px; text-align: center; }
  body.lite .topline .brand { justify-content: center; }
  body.lite .topline .brand img { height: 34px; }
  body.lite .topline .brand b { font-size: 16px; }
  body.lite .topline .tags { margin-inline-start: 0; justify-content: center; gap: 6px; }
  body.lite .topline .pill { font-size: 12.5px; padding: 3px 10px; }
  body.lite .topline .pill i { font-size: 11px; }
  body.lite .topline .minpill { font-size: 12px; padding: 2px 10px; }
  body.lite .topline .minpill b { font-size: 13px; }

  body.lite .pick { grid-template-columns: 1fr; }
  body.lite .steps .s { font-size: 12px; padding: 9px 4px; gap: 5px; }
  body.lite .packs { flex: 1; }
  body.lite .pack { flex: 1; justify-content: center; }
  body.lite .actions .sum { order: 2; width: 100%; }
  body.lite .actions .btn-lg { flex: 1; }
  .wa { width: 48px; height: 48px; inset-inline-start: 12px; bottom: 12px; }
}

body.lite .topline .minpill b { font-size: 15px; font-weight: 800; }
@media (max-width: 700px) {
  body.lite .topline .minpill { font-size: 12px; padding: 3px 10px; }
}

/* لا نص رصاصي باهت في الصفحة — كل النصوص مقروءة */
body.lite small, body.lite .muted, body.lite .counts { color: var(--ink-2); }
body.lite small { font-size: 14px; }
body.lite .topline .minpill { font-size: 14px; }

/* نص الجدول في الوسط — مثل رؤوس الأعمدة */
body.lite table.tbl th { text-align: center; }
body.lite table.tbl td { text-align: center; }
body.lite table.tbl input.cell { text-align: center; }
body.lite table.tbl input.cell.ltr { text-align: center; direction: ltr; }
body.lite table.tbl td .msg { text-align: center; }

/* تنبيهات SweetAlert بخط الموقع */
.swal2-popup.swal-ar { font-family: var(--font); font-size: 14.5px; }
.swal2-popup.swal-ar .swal2-title { font-size: 15px; font-weight: 600; line-height: 1.8; }
.swal2-container { z-index: 9999; }

/* شريط الإجراء على الجوال: العدد والسعر فوق، والزر تحته بعرض كامل */
@media (max-width: 700px) {
  body.lite .actions {
    flex-direction: column; align-items: stretch; gap: 10px; padding: 12px;
  }
  body.lite .actions .sum {
    order: 0; width: 100%; justify-content: center; gap: 10px;
    background: var(--brand-050); border-radius: 9px; padding: 9px 12px;
  }
  body.lite .actions .sum .total { font-size: 20px; }
  body.lite .actions #backBtn { order: 2; width: 100%; }
  body.lite .actions .btn-lg { order: 1; width: 100%; }
}

/* ── بطاقات الباقة الكبيرة (الخطوة 1) ── */
body.lite .bigpacks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.lite .bigpack {
  position: relative; display: block; cursor: pointer; text-align: center;
  border: 2px solid var(--line); border-radius: 14px; padding: 20px 14px;
  background: #fff; transition: .15s;
}
body.lite .bigpack:hover { border-color: var(--brand-100); box-shadow: var(--sh-2); }
body.lite .bigpack.sel { border-color: var(--brand); background: var(--brand-050); box-shadow: var(--sh-2); }
body.lite .bigpack .tick {
  position: absolute; top: 10px; inset-inline-start: 10px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--line-2); color: transparent;
  display: grid; place-items: center; font-size: 13px; font-weight: 700;
}
body.lite .bigpack.sel .tick { background: var(--brand); color: #fff; }
body.lite .bigpack .ttl { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
body.lite .bigpack .pr {
  display: block; font-size: 40px; font-weight: 800; color: var(--brand);
  line-height: 1.25; margin-top: 4px;
}
body.lite .bigpack .pr em { font-style: normal; font-size: 16px; font-weight: 600; }
body.lite .bigpack .per { display: block; font-size: 13px; color: var(--ink-2); }
body.lite .bigpack .sub {
  display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600;
  background: var(--line-2); color: var(--ink-2); border-radius: 999px; padding: 3px 12px;
}
body.lite .bigpack.sel .sub { background: var(--brand-100); color: var(--brand-700); }

@media (max-width: 700px) {
  body.lite .bigpacks { grid-template-columns: 1fr; gap: 10px; }
  body.lite .bigpack { padding: 16px 12px; }
  body.lite .bigpack .pr { font-size: 34px; }
}

/* ═══════════════════════════════════════════════════════════
   تبسيط الألوان: أزرق الهوية + رمادي فقط — والأحمر للأخطاء وحدها.
   (كل ما كان أخضر/كهرماني صار أزرق أو رمادي)
   ═══════════════════════════════════════════════════════════ */

/* الشارات */
body.lite .tag-ok,
body.lite .tag-green   { background: var(--brand-100); color: var(--brand-700); }
body.lite .tag-warn,
body.lite .tag-amber,
body.lite .tag-gray    { background: var(--line-2);   color: var(--ink-2); }
body.lite .tag-blue    { background: var(--brand-100); color: var(--brand-700); }
body.lite .tag-err,
body.lite .tag-red     { background: var(--err-bg);   color: var(--err); }

/* العدّادات */
body.lite .c-ok b      { color: var(--brand-700); }
body.lite .c-warn b    { color: var(--ink-2); }
body.lite .c-blue b    { color: var(--brand-700); }
body.lite .c-err b     { color: var(--err); }

/* شارة الحد الأدنى: رمادية بدل الكهرماني */
body.lite .topline .minpill {
  background: var(--line-2); color: var(--ink-2); border-color: var(--line);
}

/* رسائل الصفوف */
body.lite .msg-warn    { color: var(--ink-2); }

/* التنبيهات */
body.lite .alert-info,
body.lite .alert-ok    { background: var(--brand-050); border-color: var(--brand-100); color: var(--brand-700); }
body.lite .alert-warn  { background: #F7FAFC; border-color: var(--line); color: var(--ink-2); }
body.lite .alert-err   { background: var(--err-bg); border-color: #F7CFCA; color: var(--err); }

/* صف الجدول: بلا خلفية كهرمانية للتنبيه */
body.lite table.tbl tr.warn { background: none; }
body.lite table.tbl tr.bad  { background: var(--err-bg); }

/* تبويبات الدفع بالصور */
body.lite .paytab { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 16px; }
body.lite .paytab .logos { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 22px; }
body.lite .paytab .logos img { height: 20px; width: auto; }
body.lite .paytab b { font-size: 14px; font-weight: 600; }
body.lite .paytab.sel b { font-weight: 700; }
@media (max-width: 700px) {
  body.lite .paytab { flex: 1; }
  body.lite .paytab b { font-size: 13px; }
}

/* شعارات وسائل الدفع */
body.lite .paytab .logos { flex-wrap: wrap; gap: 5px; }
body.lite .paytab .logos img { height: 17px; width: auto; object-fit: contain; }

/* زر الاشتراك الفردي في الترويسة — بجوار «الحد الأدنى 10 معلمين» */
body.lite .topline .onepill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 11px; border-radius: 999px;
  border: 1px solid var(--brand); color: var(--brand-700);
  background: var(--brand-050);
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  white-space: nowrap; line-height: 1.7;
}
body.lite .topline .onepill:hover { background: var(--brand); color: #fff; }