/* ============================================================
   الصفحات النظامية وتذييل الموقع وأيقونة الدردشة.

   ملف واحد تشترك فيه صفحات «من نحن» و«تواصل معنا» والسياسات،
   ويستعمله كذلك تذييلُ الصفحات القائمة (الدخول والاشتراك والتسجيل)
   ونافذةُ الدردشة في كل صفحة. وكلّه مبنيّ على متغيّرات app.css
   نفسها، فينقلب مع الوضع الليلي بلا قاعدة إضافية.
   ============================================================ */

/* ==================== هيكل الصفحة النظامية ==================== */
.doc-wrap{position:relative;z-index:2;width:min(960px,100%);margin:0 auto;
  display:grid;gap:18px}
/* عناصر الشبكة لا تتمدّد بعرض أعرض جدولٍ فيها: الجدول يتمرّر داخل إطاره (.doc-table-wrap) */
.doc-wrap > *{min-width:0}

.doc-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap}
.doc-top .back-link{display:inline-flex;align-items:center;gap:8px;
  font-size:14.3px;font-weight:600;color:var(--text-secondary);text-decoration:none;
  padding:8px 14px;border-radius:12px;border:1px solid var(--border);
  background:var(--surface-glass);backdrop-filter:blur(12px);transition:.18s}
.doc-top .back-link:hover{color:var(--accent-ink);border-color:var(--accent);
  transform:translateX(3px)}

/* ترويسة الصفحة: العنوان وسطرُ تعريفه وتاريخ آخر تحديث */
.doc-head{text-align:center;padding:30px 22px 26px;border-radius:22px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#fff;box-shadow:0 26px 60px -34px rgba(57,135,229,.95);
  position:relative;overflow:hidden}
.doc-head::after{content:'';position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1px);
  background-size:22px 22px;opacity:.55}
.doc-head .ic{width:52px;height:52px;margin:0 auto 12px;border-radius:16px;
  display:grid;place-items:center;font-size:22px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.34)}
.doc-head h1{font-size:clamp(22px,4.4vw,33px);font-weight:900;line-height:1.55;
  margin:0 0 8px;position:relative}
.doc-head p{font-size:clamp(13.8px,3vw,16px);line-height:2;margin:0 auto;
  max-width:640px;opacity:.95;position:relative;font-weight:400}
.doc-head .stamp{display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:13px;font-weight:600;padding:6px 13px;border-radius:999px;
  background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);
  position:relative}

/* بطاقة المحتوى */
.doc-card{background:var(--surface-glass);backdrop-filter:blur(20px) saturate(150%);
  border:1px solid var(--border);border-radius:22px;padding:28px 26px;
  box-shadow:var(--shadow-modal)}
@media (max-width:600px){ .doc-card{padding:22px 17px;border-radius:18px} }

/* فهرس البنود — يختصر على القارئ البحث في صفحة طويلة */
.doc-toc{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;
  padding-bottom:20px;border-bottom:1px dashed var(--border)}
.doc-toc a{font-size:13.5px;font-weight:600;color:var(--text-secondary);
  text-decoration:none;padding:7px 13px;border-radius:11px;
  background:var(--surface-3);border:1px solid transparent;transition:.16s}
.doc-toc a:hover{color:var(--accent-ink);border-color:var(--accent);
  background:var(--accent-soft)}

.doc-sec{scroll-margin-top:20px}
.doc-sec + .doc-sec{margin-top:26px;padding-top:24px;border-top:1px solid var(--hairline)}
.doc-sec > h2{display:flex;align-items:center;gap:11px;
  font-size:clamp(16.5px,2.6vw,19.8px);font-weight:800;line-height:1.6;
  color:var(--text-primary);margin:0 0 13px}
.doc-sec > h2 .n{flex:0 0 auto;width:30px;height:30px;border-radius:10px;
  display:grid;place-items:center;font-size:14.3px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 8px 16px -9px rgba(57,135,229,.9)}
.doc-sec h3{font-size:15.2px;font-weight:800;line-height:1.7;
  color:var(--text-secondary);margin:18px 0 8px}
.doc-sec p{font-size:14.7px;line-height:2.1;color:var(--text-secondary);margin:0 0 11px}
.doc-sec p:last-child{margin-bottom:0}
.doc-sec b,.doc-sec strong{color:var(--text-primary);font-weight:700}
.doc-sec a{color:var(--accent-ink);font-weight:600}

.doc-sec ul,.doc-sec ol{margin:0 0 12px;padding-inline-start:21px;display:grid;gap:8px}
.doc-sec li{font-size:14.5px;line-height:2.05;color:var(--text-secondary)}
.doc-sec li::marker{color:var(--accent);font-weight:700}
.doc-sec li b{color:var(--text-primary)}

/* لوحة تنبيه — للتنويه النظامي وما يجب أن يُقرأ ولا يُتجاوز */
.doc-note{display:flex;gap:12px;align-items:flex-start;
  padding:15px 17px;border-radius:14px;margin:16px 0;
  background:var(--accent-soft);border:1px solid rgba(57,135,229,.28)}
.doc-note > i{flex:0 0 auto;font-size:16.5px;color:var(--accent-ink);margin-top:3px}
.doc-note p{margin:0;font-size:14.2px;line-height:2;color:var(--text-secondary)}
.doc-note.warn{background:rgba(217,89,38,.10);border-color:rgba(217,89,38,.30)}
.doc-note.warn > i{color:#c0501f}
:root[data-theme="dark"] .doc-note.warn{background:rgba(217,89,38,.16)}
:root[data-theme="dark"] .doc-note.warn > i{color:#ffbe8e}
.doc-note.good{background:rgba(25,158,112,.10);border-color:rgba(25,158,112,.30)}
.doc-note.good > i{color:#14795a}
:root[data-theme="dark"] .doc-note.good{background:rgba(25,158,112,.16)}
:root[data-theme="dark"] .doc-note.good > i{color:#7ee0b6}

/* جدول موجز — لبيانات الباقة وجدول الاسترداد */
.doc-table-wrap{overflow-x:auto;margin:14px 0;border-radius:14px;
  border:1px solid var(--border)}
.doc-table{width:100%;border-collapse:collapse;min-width:480px;background:var(--surface-1)}
.doc-table th,.doc-table td{padding:12px 14px;text-align:start;
  font-size:14px;line-height:1.9;border-bottom:1px solid var(--hairline)}
.doc-table th{background:var(--surface-3);font-weight:800;color:var(--text-primary);
  white-space:nowrap}
.doc-table td{color:var(--text-secondary)}
.doc-table tr:last-child td{border-bottom:0}
.doc-table td b{color:var(--text-primary)}

/* بطاقات قنوات التواصل في صفحة «تواصل معنا» */
.ch-grid{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  margin:6px 0 4px}
.ch-card{display:flex;flex-direction:column;gap:7px;padding:19px 17px;
  border-radius:16px;background:var(--surface-1);border:1px solid var(--border);
  text-decoration:none;transition:.18s}
.ch-card:hover{transform:translateY(-3px);border-color:var(--accent);
  box-shadow:0 18px 36px -22px rgba(57,135,229,.85)}
.ch-card .ic{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;
  font-size:18.7px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.ch-card.wa .ic{background:linear-gradient(135deg,#25d366,#128c7e)}
.ch-card.tg .ic{background:linear-gradient(135deg,#37aee2,#1e96c8)}
.ch-card.mail .ic{background:linear-gradient(135deg,#d95926,#c98500)}
.ch-card h3{font-size:15px;font-weight:800;color:var(--text-primary);margin:0}
.ch-card span{font-size:13.9px;color:var(--text-muted);line-height:1.9;
  word-break:break-word}
.ch-card .val{font-size:14.7px;font-weight:700;color:var(--accent-ink);direction:ltr;
  text-align:start;unicode-bidi:plaintext}

/* ==================== نموذج الشكوى والمقترح ==================== */
.sup-form{display:grid;gap:14px;margin-top:6px}
.sup-row{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.sup-field{display:grid;gap:7px}
.sup-field label{font-size:13.9px;font-weight:700;color:var(--text-secondary)}
.sup-field label .req{color:#d95926;font-weight:800}
.sup-field input,.sup-field textarea,.sup-field select{
  width:100%;padding:12px 14px;border-radius:13px;font-family:inherit;font-size:14.7px;
  color:var(--text-primary);background:var(--surface-1);
  border:1px solid var(--border);transition:.16s}
.sup-field textarea{min-height:130px;resize:vertical;line-height:1.9}
.sup-field input:focus,.sup-field textarea:focus,.sup-field select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.sup-field .hint{font-size:12.8px;color:var(--text-muted);line-height:1.8}

/* اختيار نوع الرسالة: شكوى أو مقترح أو غيرهما */
.kind-pick{display:grid;gap:10px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:520px){ .kind-pick{grid-template-columns:1fr} }
.kind-pick label{display:flex;align-items:center;gap:9px;cursor:pointer;
  padding:13px 14px;border-radius:13px;background:var(--surface-1);
  border:1.5px solid var(--border);transition:.16s;font-size:14.3px;font-weight:700;
  color:var(--text-secondary)}
.kind-pick label:hover{border-color:var(--accent)}
.kind-pick input{accent-color:var(--accent);width:17px;height:17px;flex:0 0 auto}
.kind-pick input:checked + span{color:var(--accent-ink)}
.kind-pick label:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}

.sup-submit{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.btn-send{display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  padding:13px 26px;border:0;border-radius:14px;font-family:inherit;
  font-size:15.4px;font-weight:800;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 16px 32px -16px rgba(57,135,229,.95);transition:.18s}
.btn-send:hover:not(:disabled){transform:translateY(-2px)}
.btn-send:disabled{opacity:.6;cursor:not-allowed;transform:none}

.sup-result{display:none;gap:12px;align-items:flex-start;padding:16px 18px;
  border-radius:14px;font-size:14.5px;line-height:2;
  background:rgba(25,158,112,.10);border:1px solid rgba(25,158,112,.32);
  color:var(--text-secondary)}
.sup-result.show{display:flex}
.sup-result.err{background:rgba(217,89,38,.10);border-color:rgba(217,89,38,.32)}
.sup-result > i{font-size:18.7px;margin-top:2px;color:#14795a;flex:0 0 auto}
.sup-result.err > i{color:#c0501f}
.sup-result .ref{display:inline-block;margin-top:5px;padding:4px 11px;border-radius:9px;
  font-weight:800;direction:ltr;background:var(--surface-3);color:var(--text-primary);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14.3px}
:root[data-theme="dark"] .sup-result > i{color:#7ee0b6}
:root[data-theme="dark"] .sup-result.err > i{color:#ffbe8e}

/* ==================== تذييل الموقع ==================== */
.site-footer{position:relative;z-index:2;width:100%;margin-top:34px;
  padding:26px 20px 8px;border-top:1px solid var(--border)}
.site-footer .sf-inner{max-width:960px;margin:0 auto;display:grid;gap:14px;
  text-align:center}

.sf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:7px 9px}
.sf-links a,.sf-links .here{font-size:13.9px;font-weight:600;line-height:1.6;
  padding:7px 13px;border-radius:11px;text-decoration:none;transition:.16s}
.sf-links a{color:var(--text-secondary);background:var(--surface-glass);
  border:1px solid var(--border)}
.sf-links a:hover{color:var(--accent-ink);border-color:var(--accent);
  background:var(--accent-soft)}
.sf-links .here{color:var(--accent-ink);background:var(--accent-soft);
  border:1px solid var(--accent);cursor:default}

.sf-channels{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px}
.sf-channels .ch{display:inline-flex;align-items:center;gap:8px;
  font-size:13.9px;font-weight:700;color:var(--text-secondary);text-decoration:none;
  padding:8px 14px;border-radius:11px;border:1px solid var(--border);
  background:var(--surface-1);transition:.16s}
.sf-channels .ch:hover{border-color:var(--accent);color:var(--accent-ink)}
.sf-channels .ch > i{font-size:14.3px;color:var(--accent)}
.sf-channels .ch.wa:hover{border-color:#25d366;color:#128c7e}
.sf-channels .ch.wa > i{color:#25d366;font-size:16.5px}
:root[data-theme="dark"] .sf-channels .ch.wa:hover{color:#5ce68f}
.sf-channels .ch.tg:hover{border-color:#229ed9;color:#1a7fb0}
.sf-channels .ch.tg > i{color:#229ed9;font-size:16.5px}
:root[data-theme="dark"] .sf-channels .ch.tg:hover{color:#6cc6f0}

.sf-hours,.sf-identity,.sf-disclaimer{font-size:13.4px;line-height:2;
  color:var(--text-muted);margin:0;max-width:760px;margin-inline:auto}
.sf-identity b{color:var(--text-secondary);font-weight:700}
.sf-identity .sf-id-title{display:block;color:var(--text-primary);font-weight:800}
.sf-identity .sf-id-item{white-space:nowrap}
.sf-identity .sf-id-label{color:var(--text-muted)}
.sf-identity a{color:inherit}
.provider-table th{width:34%;white-space:nowrap}
/* جداول نصّية طويلة الخلايا: تلتفّ خلاياها بدل أن تمدّ الجدول (app.css يمنع الالتفاف عامّةً) */
.doc-table.wrap td{white-space:normal}
.doc-table.provider-table{min-width:0}
.provider-table td{overflow-wrap:anywhere}
.sf-hours > i{color:var(--accent);margin-inline-end:5px}
.sf-disclaimer{padding:12px 16px;border-radius:13px;
  background:var(--surface-3);border:1px solid var(--hairline);font-size:13.1px}
.sf-disclaimer > i{color:var(--accent);margin-inline-end:5px}

.sf-bottom{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 8px;
  font-size:13.1px;color:var(--text-muted);line-height:1.9}
.sf-bottom > span > i{color:var(--accent);margin-inline-end:4px}
.site-footer .sep{opacity:.45}
.sf-credit{font-size:13px;color:var(--text-muted);line-height:1.9;
  padding-top:10px;border-top:1px solid var(--hairline)}
.sf-credit b{color:var(--text-secondary)}

/* ==================== أيقونة الدردشة ونافذتها ==================== */
/* الجهة: إشعارات النظام (.toasts) تقف في inset-inline-start، فالأيقونة في
   الجهة المقابلة كي لا يحجب زرُّ الدردشة رسالةَ تأكيدٍ للمستخدم. */
.chat-fab{position:fixed;inset-inline-end:20px;inset-block-end:20px;z-index:1200;
  width:58px;height:58px;border:0;border-radius:19px;cursor:pointer;
  display:none;place-items:center;font-size:24.2px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  box-shadow:0 20px 40px -16px rgba(57,135,229,.95);
  transition:transform .2s,box-shadow .2s}
.chat-fab.ready{display:grid}
.chat-fab:hover{transform:translateY(-3px) scale(1.04)}
.chat-fab[aria-expanded="true"] .i-open{display:none}
.chat-fab:not([aria-expanded="true"]) .i-close{display:none}
@media (prefers-reduced-motion:reduce){ .chat-fab,.chat-panel{transition:none} }

/* نقطة الحالة على الأيقونة — خضراء متصل، رمادية غير متصل */
.chat-fab .dot{position:absolute;inset-block-start:6px;inset-inline-start:6px;
  width:13px;height:13px;border-radius:50%;background:#94a3b8;
  border:2.5px solid var(--surface-1);transition:background .2s}
.chat-fab.online .dot{background:#22c55e}
.chat-fab.online .dot::after{content:'';position:absolute;inset:-4px;border-radius:50%;
  border:2px solid rgba(34,197,94,.55);animation:chat-pulse 2s ease-out infinite}
@keyframes chat-pulse{0%{transform:scale(.7);opacity:.9}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){ .chat-fab.online .dot::after{animation:none} }

/* شارة الرسائل غير المقروءة */
.chat-fab .unread{position:absolute;inset-block-start:-5px;inset-inline-end:-5px;
  min-width:21px;height:21px;padding:0 6px;border-radius:999px;
  display:none;place-items:center;font-size:12.7px;font-weight:800;
  background:#e05a52;color:#fff;border:2px solid var(--surface-1)}
.chat-fab .unread.show{display:grid}

.chat-panel{position:fixed;inset-inline-end:20px;inset-block-end:88px;z-index:1201;
  width:min(370px,calc(100vw - 32px));max-height:min(560px,calc(100dvh - 130px));
  display:none;flex-direction:column;overflow:hidden;border-radius:20px;
  background:var(--surface-1);border:1px solid var(--border);
  box-shadow:var(--shadow-modal);
  opacity:0;transform:translateY(14px) scale(.97);transition:opacity .2s,transform .2s}
.chat-panel.open{display:flex}
.chat-panel.shown{opacity:1;transform:none}
@media (max-width:520px){
  .chat-panel{inset-inline:10px;inset-block-end:84px;width:auto;
    max-height:calc(100dvh - 120px)}
}

.chat-head{display:flex;align-items:center;gap:11px;padding:14px 16px;
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.chat-head .av{width:38px;height:38px;border-radius:12px;flex:0 0 auto;
  display:grid;place-items:center;font-size:17.6px;
  background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.32)}
.chat-head .who{flex:1;min-width:0}
.chat-head .who b{display:block;font-size:15.2px;font-weight:800;line-height:1.5}
.chat-head .who small{display:flex;align-items:center;gap:6px;
  font-size:12.8px;opacity:.94;line-height:1.7}
.chat-head .who small::before{content:'';width:8px;height:8px;border-radius:50%;
  background:#cbd5e1;flex:0 0 auto}
.chat-panel.is-online .chat-head .who small::before{background:#4ade80}
.chat-head button{width:32px;height:32px;border:0;border-radius:10px;cursor:pointer;
  display:grid;place-items:center;font-size:15.4px;color:#fff;
  background:rgba(255,255,255,.16);transition:.16s}
.chat-head button:hover{background:rgba(255,255,255,.3)}

.chat-body{flex:1;min-height:150px;overflow-y:auto;padding:16px 14px;
  display:flex;flex-direction:column;gap:10px;background:var(--surface-2)}
.chat-msg{max-width:82%;padding:10px 14px;border-radius:15px;
  font-size:14.4px;line-height:1.95;white-space:pre-wrap;word-break:break-word}
.chat-msg .t{display:block;margin-top:4px;font-size:11.7px;opacity:.7;direction:ltr;
  text-align:start;unicode-bidi:plaintext}
.chat-msg.visitor{align-self:flex-start;color:#fff;border-end-start-radius:5px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.chat-msg.agent{align-self:flex-end;border-end-end-radius:5px;
  background:var(--surface-1);border:1px solid var(--border);color:var(--text-primary)}
.chat-msg.agent .who{display:block;font-size:12.1px;font-weight:800;
  color:var(--accent-ink);margin-bottom:3px}
.chat-msg.system{align-self:center;max-width:94%;text-align:center;
  font-size:13.4px;color:var(--text-secondary);
  background:var(--accent-soft);border:1px solid rgba(57,135,229,.24)}

.chat-intro{padding:4px 2px 0;display:grid;gap:11px}
.chat-intro p{font-size:13.9px;line-height:1.95;color:var(--text-secondary);margin:0}
.chat-intro input{width:100%;padding:11px 13px;border-radius:12px;font-family:inherit;
  font-size:14.3px;color:var(--text-primary);background:var(--surface-1);
  border:1px solid var(--border)}
.chat-intro input:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}

.chat-foot{padding:11px 12px;border-top:1px solid var(--border);
  background:var(--surface-1);display:grid;gap:9px}
.chat-form{display:flex;align-items:flex-end;gap:9px}
.chat-form textarea{flex:1;min-height:42px;max-height:110px;resize:none;
  padding:11px 13px;border-radius:13px;font-family:inherit;font-size:14.4px;
  line-height:1.7;color:var(--text-primary);background:var(--surface-2);
  border:1px solid var(--border)}
.chat-form textarea:focus{outline:none;border-color:var(--accent);
  box-shadow:0 0 0 3px var(--accent-soft)}
.chat-form button{width:42px;height:42px;flex:0 0 auto;border:0;border-radius:13px;
  cursor:pointer;display:grid;place-items:center;font-size:16.5px;color:#fff;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));transition:.16s}
.chat-form button:hover:not(:disabled){transform:translateY(-2px)}
.chat-form button:disabled{opacity:.55;cursor:not-allowed;transform:none}

/* الروابط والصور في فقاعات الدردشة — نافذة الزائر ولوحة الدعم ودردشة المدرسة
   (support-media.js). الرابط يرث لون الفقاعة فيُقرأ فوق التدرّج وفوق السطح الفاتح. */
.chat-link{color:inherit;text-decoration:underline;text-underline-offset:2px;
  overflow-wrap:anywhere;unicode-bidi:isolate}
.chat-link:hover{opacity:.85}
.chat-img{display:block;margin:2px 0 6px;line-height:0}
.chat-img img{display:block;max-width:min(260px,100%);max-height:260px;width:auto;height:auto;
  border-radius:10px;object-fit:contain;background:rgba(0,0,0,.06);cursor:zoom-in}
.chat-attach{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px;
  background:var(--surface-2);border:1px dashed var(--border);font-size:13.2px;
  color:var(--text-secondary)}
.chat-attach img{width:48px;height:48px;object-fit:cover;border-radius:8px;flex:0 0 auto}
.chat-attach-note{flex:1;min-width:0}
.chat-attach-x{width:28px;height:28px;flex:0 0 auto;border:0;border-radius:8px;cursor:pointer;
  font-size:19.8px;line-height:1;color:var(--text-secondary);background:var(--surface-1)}
.chat-attach-x:hover{color:#dc2626}
.sup-thread .chat-attach,.ssup-thread .chat-attach{margin:10px 14px 0}
.chat-form button i{transform:scaleX(-1)}   /* السهم يشير إلى جهة الإرسال في RTL */

.chat-alt{font-size:12.7px;line-height:1.85;color:var(--text-muted);text-align:center}
.chat-alt a{color:var(--accent-ink);font-weight:700}
.chat-err{font-size:13.2px;line-height:1.8;color:#c0501f;text-align:center;padding:0 4px}
:root[data-theme="dark"] .chat-err{color:#ffbe8e}

/* داخل لوحة النظام على الجوال: يرتفع الزرّ قليلاً عن حافة الشاشة السفلية
   حيث تقع أشرطة المتصفّح، فلا يُضغط عليه خطأً. */
@media (max-width:900px){
  body:has(> .layout) .chat-fab{inset-block-end:74px}
  body:has(> .layout) .chat-panel{inset-block-end:140px}
}