/* ثيم alkabos — قواعد مجموعة الدعم: tickets / viewticket / faq / contact.
   الغلاف يحمّل كل ملفّ في pages/ آليًّا على كل صفحة، فكل محدِّد هنا مسبوق
   بصنف صفحته (‎.sup-tickets‎ / ‎.sup-ticketview‎ / ‎.sup-faq‎ / ‎.sup-contact‎)
   أو بالصنف العامّ ‎.sup-page‎ الذي لا يحمله غير هذه الصفحات الأربع — ست
   مجموعات أخرى تشتغل في الثيم نفسه الآن، وقاعدة غير مُسنَدة تعيد تنسيق
   صفحاتها.
   الألوان كلّها بمتغيّرات الورقة (‎--main-color‎ و‎--bg-color‎ و‎--secondary-color‎
   و‎--border-color‎ و‎--text-main‎ و‎--shadow-color‎ و‎--card-bg‎) وهي تنقلب مع
   ‎html.dark‎، فلا نسخة ثانية للوضع الداكن. */

/* ===================== مشترك بين الأربع ===================== */

/* صفحتا الأسئلة والاتصال تُفتحان للزائر أيضًا، وغلاف الزائر لا يمرّ على
   ‎.page-content .content‎ التي تعطي الحشو في المنطقة الداخلية. */
.sup-page { padding: 25px; }
@media (max-width: 768px) { .sup-page { padding: 15px; } }

/* ‎.form-control‎ في الورقة تحمل ‎text-align:right‎ مثبَّتة — تتبع الاتجاه هنا. */
.sup-page .form-control { text-align: start; }

.sup-page .sup-lead {
  margin: 6px 0 0;
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--text-main);
  opacity: .8;
}

.sup-page .sup-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}
.sup-page .sup-actions.is-center { justify-content: center; }

/* الورقة لا تعرّف ‎.btn‎ خارج ‎.account‎ و‎.blog‎ — زرّ الروابط عندنا. */
.sup-page .sup-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-color);
  background: var(--secondary-color);
  color: var(--text-main);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all .25s ease;
}
.sup-page .sup-btn:hover {
  border-color: var(--main-color);
  background: var(--main-opacity);
  transform: translateY(-1px);
}
.sup-page .sup-btn.is-main {
  background: var(--main-color);
  border-color: var(--main-color);
  color: #fff;
}
.sup-page .sup-btn.is-main:hover { opacity: .92; }

/* حالة الفراغ */
.sup-page .sup-empty {
  text-align: center;
  padding: 26px 10px;
  color: var(--text-main);
  opacity: .85;
  font-size: 13px;
  line-height: 1.9;
  width: 100%;
}
.sup-page .sup-empty > i {
  display: block;
  font-size: 40px;
  margin-bottom: 12px;
  color: var(--main-color);
  opacity: .9;
}
.sup-page .sup-empty-title {
  font-size: 16px;
  font-weight: 800;
  margin-bottom: 6px;
}
.sup-page .sup-empty[hidden] { display: none; }

/* شارات الحالة الثلاث: أصناف لا أنماط سطرية، فلا تصل قيمة من قاعدة البيانات
   إلى سمة style. */
.sup-page .status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
.sup-page .status.is-pending  { background: rgba(245,158,11,.14); color: #d97706; border-color: rgba(245,158,11,.35); }
.sup-page .status.is-answered { background: rgba(34,197,94,.14);  color: #16a34a; border-color: rgba(34,197,94,.35); }
.sup-page .status.is-closed   { background: rgba(148,163,184,.16); color: #64748b; border-color: rgba(148,163,184,.35); }
.sup-page .status.is-unread   { background: var(--main-color); color: #fff; border-color: var(--main-color); }
html.dark .sup-page .status.is-pending  { color: #fcd34d; }
html.dark .sup-page .status.is-answered { color: #86efac; }
html.dark .sup-page .status.is-closed   { color: #cbd5e1; }

/* ===================== tickets.php ===================== */

/* شريط الخطوات: الورقة تلوّن ‎.step-highlight‎ بلون العلامة وتترك النصّ
   ‎--text-main‎ — وهو أسود في الوضع المضيء فوق أحمر. */
.sup-tickets .step-item.step-highlight,
.sup-tickets .step-item.step-highlight .step-badge { color: #fff; }
.sup-tickets .step-item.step-highlight .step-badge {
  background: rgba(255,255,255,.16);
}

.sup-tickets .card .ticket-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sup-tickets .card .ticket-title i { color: var(--main-color); }

/* زرّ الإرسال: الورقة تنسّقه بـ‎button[type=submit]‎ وتترك محتواه بلا محاذاة. */
.sup-tickets .card form button[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
}

/* الجدول: ‎.tickets table‎ تعطي الإطار والرأس الملوّن؛ يبقى منع الخروج عن
   البطاقة على الشاشات الضيّقة. */
.sup-tickets .sup-tablewrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 14px;
  border: 1px solid var(--border-color);
}
.sup-tickets table thead th { color: #fff; text-align: start; }
.sup-tickets table td { text-align: start; }
.sup-tickets table tbody tr:last-child td { border-bottom: 0; }
.sup-tickets .sup-subject {
  display: inline-block;
  max-width: min(46vw, 420px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.sup-tickets table tr[hidden] { display: none; }

/* التنبيه: ‎.alert.alert-success/.alert-danger‎ من الورقة، ويبقى اتّجاه نصّه. */
.sup-tickets .alert { width: 100%; text-align: start; }

/* ===================== viewticket.php ===================== */

/* ‎.page-content .content > div‎ تجعل كل ابن مباشر عمودًا مرنًا موسَّط المحاذاة،
   فتنكمش ترويسة البطاقة وصندوق الرد إلى عرض محتواهما. المحدِّد مُسنَد إلى
   ‎.sup-ticketview‎ (وهي ‎$os_main_class‎ لهذه الصفحة وحدها) فلا يمسّ غيرها،
   وأثقل من ‎.page-content .content>div‎ فيغلبها. */
.page-content .sup-ticketview > .ticketview { align-items: stretch; }

.sup-ticketview .card .header .title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.sup-ticketview .sup-id {
  color: var(--main-color);
  cursor: copy;
}
.sup-ticketview .sup-subject {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: min(58vw, 520px);
  font-weight: 700;
}
.sup-ticketview .sup-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.sup-ticketview .sup-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 12px;
  font-size: 12px;
  opacity: .8;
}
.sup-ticketview .sup-fact { display: inline-flex; align-items: center; gap: 6px; }
.sup-ticketview .sup-fact i { color: var(--main-color); }
.sup-ticketview .sup-fact b { font-weight: 700; }

/* الفقاعة: الورقة تعطيها الشكل، ويبقى كسر الروابط الطويلة داخلها. */
.sup-ticketview .chat .bubble { overflow-wrap: anywhere; }
.sup-ticketview .chat .sup-text { display: block; }
.sup-ticketview .chat .message.user .bubble { color: #fff; }
.sup-ticketview .chat .sup-empty { margin: auto; }

/* المرفق: مصغّرة بمؤشّر تكبير، و‎.sup-zoom‎ حالة العرض الكامل. */
.sup-ticketview .sup-attach {
  display: block;
  margin-top: 10px;
  max-width: 260px;
  width: 100%;
  height: auto;
  border-radius: 12px;
  cursor: zoom-in;
}
.sup-ticketview .sup-attach.sup-zoom {
  position: fixed;
  inset: 4vh 4vw;
  z-index: 10000;
  max-width: 92vw;
  max-height: 92vh;
  width: auto;
  margin: auto;
  object-fit: contain;
  background: rgba(0,0,0,.92);
  padding: 10px;
  cursor: zoom-out;
}

.sup-ticketview .reply label { display: block; }
.sup-ticketview .reply .uploader-wrapper {
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.sup-ticketview .reply .sup-hint { font-size: 11.5px; opacity: .7; }
.sup-ticketview .reply button[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
}

/* التنبيه: الورقة تعرّف ‎.ticket-alert.danger‎ وحدها. */
.sup-ticketview .ticket-alert {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sup-ticketview .ticket-alert.sup-alert-info {
  background: var(--secondary-color);
  border: 1px solid var(--border-color);
  color: var(--text-main);
}
.sup-ticketview .sup-alert-close {
  margin-inline-start: auto;
  background: 0 0;
  border: none;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

/* ===================== faq.php ===================== */

.sup-faq .sup-head { margin-bottom: 18px; width: 100%; }
.sup-faq .sup-head h2 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 26px;
  font-weight: 900;
  margin: 0;
}
.sup-faq .sup-head h2 i { color: var(--main-color); }

/* ‎.orders‎ عمودٌ مرن بمحاذاة ‎start‎، فكل ابن ينكمش إلى عرض محتواه ما لم
   يُصرَّح بعرضه — وشريط الأقسام كان يلتفّ قبل حافة الصفحة. */
.sup-faq .nav.nav-pills { width: 100%; }

/* عدّاد الأسئلة داخل رقاقة القسم */
.sup-faq .nav.nav-pills .sup-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--main-opacity);
  border: 1px solid var(--border-color);
  font-size: 11px;
  font-weight: 700;
}
.sup-faq .nav.nav-pills li.active .sup-count {
  background: rgba(255,255,255,.22);
  border-color: transparent;
  color: #fff;
}

.sup-faq .sup-groups { width: 100%; }
.sup-faq .sup-group { width: 100%; }
.sup-faq .sup-group[hidden] { display: none; }
.sup-faq .sup-group-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 800;
  margin: 26px 0 12px;
}
.sup-faq .sup-groups > .sup-group:first-child .sup-group-head { margin-top: 4px; }
.sup-faq .sup-group-head i { color: var(--main-color); }

/* الأكورديون: القالب يعرّف شكله تحت ‎.faq‎ في ورقة الزائر وحدها، أي أنه غائب
   تمامًا في المنطقة الداخلية — يُكتب هنا مرّة واحدة للوضعين، وبالعرض لا
   بـ‎max-height‎ فأجوبتنا تصل إلى عدّة فقرات وسقفٌ ثابت كان يقصّها. */
.sup-faq .accordion { width: 100%; }
.sup-faq .accordion-item {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: border-color .25s ease;
}
.sup-faq .accordion-item:hover { border-color: var(--main-color); }
.sup-faq .accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--text-main);
}
.sup-faq .accordion-header .sup-q { flex: 1; }
.sup-faq .accordion-header i {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--main-color);
  transition: transform .25s ease;
}
.sup-faq .accordion-body {
  display: none;
  padding: 0 18px 18px;
  font-size: 13px;
  line-height: 1.95;
  color: var(--text-main);
  opacity: .9;
  border-top: 1px solid var(--border-color);
  padding-top: 14px;
}
.sup-faq .accordion-item.active { border-color: var(--main-color); }
.sup-faq .accordion-item.active .accordion-header { color: var(--main-color); }
.sup-faq .accordion-item.active .accordion-body { display: block; }

/* الإعادة العامّة تُسطّح أجوبتنا (٨٥ فقرة وثلاث قوائم) إلى جدار نصّ بلا نقاط. */
.sup-faq .accordion-body p { margin: 0 0 10px; line-height: 1.95; }
.sup-faq .accordion-body p:last-child { margin-bottom: 0; }
.sup-faq .accordion-body ul,
.sup-faq .accordion-body ol {
  width: auto;
  margin: 0 0 10px;
  padding-inline-start: 22px;
  list-style: disc;
}
.sup-faq .accordion-body ol { list-style: decimal; }
.sup-faq .accordion-body li { margin: 6px 0; }
.sup-faq .accordion-body a { color: var(--main-color); font-weight: 700; text-decoration: underline; }
.sup-faq .accordion-body b,
.sup-faq .accordion-body strong { font-weight: 800; }
.sup-faq .accordion-body img { max-width: 100%; height: auto; border-radius: 10px; margin: 8px 0; }
.sup-faq .accordion-body .os-price { font-weight: 800; color: var(--main-color); }

/* ===================== contact.php ===================== */

.sup-contact .account .header { margin-bottom: 22px; }
.sup-contact .account .header .sup-lead {
  max-width: 720px;
  margin-inline: auto;
}

/* ‎.account .cards‎ عمودان وتغلب ‎.support-boxs .cards‎ (أربعة) لأنها متأخّرة
   في الورقة — قنوات التواصل تتوزّع حسب المتاح منها. */
.sup-contact .support-boxs { margin-bottom: 22px; }
.sup-contact .support-boxs .cards {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.sup-contact .support-boxs .card { text-decoration: none; }
.sup-contact .support-boxs .icon-box { position: relative; z-index: 2; display: flex; }

.sup-contact .account .card .title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.sup-contact .account .card .title i { color: var(--main-color); }

.sup-contact .sup-hints {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.sup-contact .sup-hints li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.85;
  opacity: .9;
}
.sup-contact .sup-hints li > i {
  flex: 0 0 auto;
  font-size: 18px;
  color: var(--main-color);
  margin-top: 2px;
}
.sup-contact .sup-hints li b { display: block; font-size: 13.5px; font-weight: 800; opacity: 1; }

.sup-contact .sup-contact-form .alert { width: 100%; text-align: start; margin-bottom: 14px; }
.sup-contact .account .card .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #fff;
}

/* غلاف الزائر لا يفتح ‎.page-content‎، فلا حدّ لعرض المتن — ‎.container‎ تكفله. */
@media (max-width: 992px) {
  .sup-contact .support-boxs .cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
  .sup-faq .sup-head h2 { font-size: 21px; }
  .sup-ticketview .sup-subject { max-width: 100%; }
  .sup-tickets .sup-subject { max-width: 60vw; }
}