/*
 * ProTech Design System — v1.0.0
 * نظام التصميم الموحد لمقالات برو تك
 * المسار: wp-content/uploads/protech-design/protech-style.css
 * لتحديث التصميم: عدّل هذا الملف فقط — يُطبَّق تلقائياً على كل المقالات
 * =====================================================================
 */

/* =====================================================================
   المتغيرات العامة
   ===================================================================== */
.pt-article {
  --pt-primary:    #6366f1;
  --pt-dark:       #0f172a;
  --pt-dark-2:     #1e293b;
  --pt-dark-3:     #334155;
  --pt-light:      #f8faff;
  --pt-border:     #e2e8f0;
  --pt-text:       #374151;
  --pt-text-light: #64748b;

  --pt-blue:       #3b82f6;
  --pt-green:      #22c55e;
  --pt-orange:     #f97316;
  --pt-red:        #ef4444;
  --pt-yellow:     #f59e0b;
  --pt-purple:     #a855f7;

  direction: rtl;
  font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
  color: var(--pt-text);
  max-width: 880px;
  margin: 0 auto;
  box-sizing: border-box;
}

.pt-article * { box-sizing: border-box; }

/* =====================================================================
   بطاقة تعريف المقال (Hero)
   الاستخدام: <div class="pt-article"><div class="pt-hero"> ... </div>
   ===================================================================== */
.pt-hero {
  background: linear-gradient(145deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
  border-radius: 16px;
  padding: 28px 24px;
  margin: 0 0 24px;
  border: 1px solid #312e81;
}
.pt-hero-label {
  color: #e0e7ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0 0 10px;
  opacity: 0.65;
}
.pt-hero-desc {
  color: #c7d2fe;
  font-size: 15px;
  line-height: 1.8;
  margin: 0 0 18px;
}
.pt-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.pt-tag {
  background: rgba(99,102,241,0.25);
  border: 1px solid rgba(99,102,241,0.45);
  color: #a5b4fc;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

/* =====================================================================
   شبكة المعلومات السريعة
   الاستخدام: <div class="pt-info-grid"><div class="pt-info-card"> ...
   ===================================================================== */
.pt-info-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 24px;
}
.pt-info-card {
  flex: 1 1 150px;
  background: var(--pt-light);
  border: 1px solid #e0e7ff;
  border-radius: 12px;
  padding: 14px 16px;
  border-top: 3px solid var(--pt-primary);
}
.pt-info-card .pt-label {
  font-size: 11px;
  color: var(--pt-primary);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
}
.pt-info-card .pt-value {
  font-size: 14px;
  color: var(--pt-dark);
  font-weight: 700;
}

/* ===== ألوان بديلة لـ pt-info-card ===== */
.pt-info-card.blue  { border-top-color: var(--pt-blue);   }
.pt-info-card.blue  .pt-label { color: var(--pt-blue);    }
.pt-info-card.green { border-top-color: var(--pt-green);  }
.pt-info-card.green .pt-label { color: var(--pt-green);   }
.pt-info-card.orange{ border-top-color: var(--pt-orange); }
.pt-info-card.orange .pt-label{ color: var(--pt-orange);  }
.pt-info-card.red   { border-top-color: var(--pt-red);    }
.pt-info-card.red   .pt-label { color: var(--pt-red);     }

/* =====================================================================
   صناديق التنبيه
   الاستخدام: <div class="pt-alert pt-warn"> ...
   أنواع: pt-warn / pt-ok / pt-info / pt-danger / pt-note
   ===================================================================== */
.pt-alert {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: 12px;
  margin: 16px 0;
  border-right: 4px solid;
}
.pt-alert-icon { font-size: 22px; flex-shrink: 0; line-height: 1.2; }
.pt-alert-body { flex: 1; }
.pt-alert-title { font-size: 14px; font-weight: 800; margin: 0 0 5px; display: block; }
.pt-alert-text  { font-size: 14px; margin: 0; line-height: 1.75; }

.pt-warn   { background: #fffbeb; border-color: var(--pt-yellow); }
.pt-warn   .pt-alert-title { color: #92400e; }
.pt-warn   .pt-alert-text  { color: #78350f; }

.pt-ok     { background: #f0fdf4; border-color: var(--pt-green); }
.pt-ok     .pt-alert-title { color: #14532d; }
.pt-ok     .pt-alert-text  { color: #166534; }

.pt-info   { background: #eff6ff; border-color: var(--pt-blue); }
.pt-info   .pt-alert-title { color: #1e3a8a; }
.pt-info   .pt-alert-text  { color: #1e40af; }

.pt-danger { background: #fef2f2; border-color: var(--pt-red); }
.pt-danger .pt-alert-title { color: #7f1d1d; }
.pt-danger .pt-alert-text  { color: #991b1b; }

.pt-note   { background: #faf5ff; border-color: var(--pt-purple); }
.pt-note   .pt-alert-title { color: #581c87; }
.pt-note   .pt-alert-text  { color: #6b21a8; }

/* =====================================================================
   بطاقات الطرق / الأقسام
   الاستخدام: <div class="pt-method"><div class="pt-method-head pt-head-blue"> ...
   ===================================================================== */
.pt-method {
  border-radius: 16px;
  overflow: hidden;
  margin: 24px 0;
  border: 1px solid var(--pt-border);
}
.pt-method-head {
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.pt-method-num {
  min-width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 900;
  color: #fff;
  flex-shrink: 0;
}
.pt-method-head h3 { color: #fff; font-size: 16px; font-weight: 800; margin: 0 0 3px; }
.pt-method-head p  { color: rgba(255,255,255,0.78); font-size: 12.5px; margin: 0; }
.pt-method-body    { padding: 22px; background: #fafbff; }

/* ألوان رأس البطاقة */
.pt-head-blue   { background: linear-gradient(135deg, #2563eb, #1d4ed8); }
.pt-head-green  { background: linear-gradient(135deg, #16a34a, #15803d); }
.pt-head-orange { background: linear-gradient(135deg, #ea580c, #c2410c); }
.pt-head-red    { background: linear-gradient(135deg, #dc2626, #b91c1c); }
.pt-head-purple { background: linear-gradient(135deg, #9333ea, #7e22ce); }
.pt-head-dark   { background: linear-gradient(135deg, #1e293b, #0f172a); }
.pt-head-indigo { background: linear-gradient(135deg, #4f46e5, #4338ca); }

/* =====================================================================
   قوائم المتطلبات / الأدوات
   الاستخدام: <div class="pt-reqs"><span>اسم الأداة</span> ...
   ===================================================================== */
.pt-reqs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}
.pt-reqs span {
  background: #fff;
  border: 1px solid var(--pt-border);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13.5px;
  color: var(--pt-text);
  display: flex;
  align-items: center;
  gap: 6px;
}
.pt-reqs span::before { content: "→"; color: var(--pt-primary); font-weight: 700; }

/* =====================================================================
   الخطوات المرقّمة
   الاستخدام: <ol class="pt-steps"><li> ...
   ===================================================================== */
.pt-steps {
  list-style: none;
  padding: 0;
  margin: 14px 0;
  counter-reset: pt-step;
}
.pt-steps li {
  counter-increment: pt-step;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #fff;
  border: 1px solid #e9ecef;
  border-radius: 12px;
  font-size: 14.5px;
  color: var(--pt-text);
  line-height: 1.75;
}
.pt-steps li::before {
  content: counter(pt-step);
  min-width: 30px;
  height: 30px;
  background: var(--pt-dark);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}

/* =====================================================================
   قائمة لا يعمل / يعمل
   الاستخدام: <ul class="pt-list-no"> أو <ul class="pt-list-yes">
   ===================================================================== */
.pt-list-no, .pt-list-yes {
  list-style: none;
  padding: 0;
  margin: 12px 0;
}
.pt-list-no li, .pt-list-yes li {
  padding: 10px 14px;
  margin-bottom: 8px;
  border-radius: 8px;
  font-size: 14.5px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pt-list-no li {
  background: rgba(239,68,68,0.07);
  border-right: 3px solid var(--pt-red);
  color: #7f1d1d;
}
.pt-list-no li::before  { content: "✕"; color: var(--pt-red); font-weight: 800; font-size: 13px; }
.pt-list-yes li {
  background: rgba(34,197,94,0.07);
  border-right: 3px solid var(--pt-green);
  color: #14532d;
}
.pt-list-yes li::before { content: "✓"; color: var(--pt-green); font-weight: 800; font-size: 13px; }

/* =====================================================================
   بطاقات اختيار المعالج / الفئة
   الاستخدام: <div class="pt-selector"><div class="pt-chip pt-chip-orange"> ...
   ===================================================================== */
.pt-selector { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.pt-chip {
  flex: 1 1 200px;
  border-radius: 14px;
  padding: 20px;
  border: 2px solid;
}
.pt-chip-label {
  display: inline-block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 3px 10px;
  border-radius: 20px;
  margin-bottom: 10px;
  color: #fff;
}
.pt-chip-name    { font-size: 18px; font-weight: 800; margin: 0 0 8px; }
.pt-chip-devices { font-size: 13px; color: var(--pt-text-light); line-height: 1.7; margin: 0; }

.pt-chip-orange { background: #fff7ed; border-color: var(--pt-orange); }
.pt-chip-orange .pt-chip-label { background: var(--pt-orange); }
.pt-chip-orange .pt-chip-name  { color: #c2410c; }

.pt-chip-green  { background: #f0fdf4; border-color: var(--pt-green); }
.pt-chip-green  .pt-chip-label { background: var(--pt-green); }
.pt-chip-green  .pt-chip-name  { color: #15803d; }

.pt-chip-blue   { background: #eff6ff; border-color: var(--pt-blue); }
.pt-chip-blue   .pt-chip-label { background: var(--pt-blue); }
.pt-chip-blue   .pt-chip-name  { color: #1d4ed8; }

.pt-chip-red    { background: #fef2f2; border-color: var(--pt-red); }
.pt-chip-red    .pt-chip-label { background: var(--pt-red); }
.pt-chip-red    .pt-chip-name  { color: #b91c1c; }

.pt-chip-purple { background: #faf5ff; border-color: var(--pt-purple); }
.pt-chip-purple .pt-chip-label { background: var(--pt-purple); }
.pt-chip-purple .pt-chip-name  { color: #7e22ce; }

/* =====================================================================
   جدول المقارنة
   الاستخدام: <div class="pt-table-wrap"><table class="pt-table"> ...
   ===================================================================== */
.pt-table-wrap {
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--pt-border);
  margin: 16px 0;
}
.pt-table { width: 100%; border-collapse: collapse; }
.pt-table thead tr { background: linear-gradient(135deg, #0f172a, #1e1b4b); }
.pt-table thead th {
  color: #e0e7ff;
  padding: 14px 16px;
  font-size: 13.5px;
  text-align: right;
  font-weight: 700;
}
.pt-table tbody tr:nth-child(odd)  { background: #fff; }
.pt-table tbody tr:nth-child(even) { background: #f8faff; }
.pt-table tbody td {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--pt-text);
  border-bottom: 1px solid #f1f5f9;
}
.pt-table tbody tr:last-child td { border-bottom: none; }
.pt-table .pt-ok-cell   { color: #16a34a; font-weight: 800; }
.pt-table .pt-no-cell   { color: #dc2626; font-weight: 800; }
.pt-table .pt-warn-cell { color: #d97706; font-weight: 800; }
.pt-table .pt-best td:first-child { border-right: 3px solid var(--pt-green); }
.pt-table .pt-best { background: #f0fdf4 !important; }

/* =====================================================================
   عنوان القسم
   الاستخدام: <h2 class="pt-section-title"> أو مع لون: pt-section-title blue
   ===================================================================== */
.pt-section-title {
  font-size: 20px;
  color: var(--pt-dark);
  margin: 28px 0 12px;
  border-right: 4px solid var(--pt-primary);
  padding-right: 12px;
  font-weight: 800;
}
.pt-section-title.blue   { border-color: var(--pt-blue);   }
.pt-section-title.green  { border-color: var(--pt-green);  }
.pt-section-title.orange { border-color: var(--pt-orange); }
.pt-section-title.red    { border-color: var(--pt-red);    }

/* =====================================================================
   كود / أوامر
   ===================================================================== */
.pt-article code {
  background: #1e293b;
  color: #7dd3fc;
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 13px;
  font-family: 'Courier New', Consolas, monospace;
}

/* =====================================================================
   بطاقة CTA (دعوة للتواصل)
   الاستخدام: <div class="pt-cta"> ...
   ===================================================================== */
.pt-cta {
  background: linear-gradient(145deg, #0f172a, #1e1b4b);
  border-radius: 16px;
  padding: 28px 24px;
  margin-top: 28px;
  text-align: center;
  border: 1px solid #312e81;
}
.pt-cta p { color: #c7d2fe; font-size: 15.5px; margin: 0 0 18px; line-height: 1.75; }
.pt-cta a {
  display: inline-block;
  background: linear-gradient(135deg, var(--pt-primary), #4f46e5);
  color: #fff !important;
  text-decoration: none !important;
  padding: 13px 32px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 15px;
}

/* =====================================================================
   زر تحميل
   الاستخدام: <a class="pt-download-btn" href="#">تحميل الأداة</a>
   ===================================================================== */
.pt-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: #fff !important;
  text-decoration: none !important;
  padding: 12px 24px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14.5px;
  margin: 8px 4px;
}
.pt-download-btn::before { content: "↓"; font-size: 16px; }
.pt-download-btn.blue { background: linear-gradient(135deg, #2563eb, #1d4ed8); }

/* =====================================================================
   الوضع الليلي — Dark Mode تلقائي
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  .pt-article { color: #e2e8f0; }

  .pt-info-card { background: #1e293b; border-color: #334155; }
  .pt-info-card .pt-value { color: #f1f5f9; }

  .pt-method-body { background: #0f172a; }
  .pt-steps li    { background: #1e293b; border-color: #374151; color: #cbd5e1; }
  .pt-reqs span   { background: #1e293b; border-color: #475569; color: #cbd5e1; }

  .pt-list-no li  { background: rgba(239,68,68,0.12); color: #fca5a5; }
  .pt-list-yes li { background: rgba(34,197,94,0.10); color: #86efac; }

  .pt-chip-orange { background: #1c0f00; }
  .pt-chip-green  { background: #052e16; }
  .pt-chip-blue   { background: #0c1a3a; }
  .pt-chip-red    { background: #1c0505; }
  .pt-chip-purple { background: #1a0533; }
  .pt-chip-devices { color: #94a3b8; }

  .pt-table tbody tr:nth-child(odd)  { background: #1e293b; }
  .pt-table tbody tr:nth-child(even) { background: #0f172a; }
  .pt-table tbody td { color: #cbd5e1; border-color: #334155; }
  .pt-table .pt-best { background: #052e16 !important; }

  .pt-warn   { background: #1c1200; }
  .pt-warn   .pt-alert-title { color: #fcd34d; }
  .pt-warn   .pt-alert-text  { color: #fde68a; }

  .pt-ok     { background: #052e16; }
  .pt-ok     .pt-alert-title { color: #86efac; }
  .pt-ok     .pt-alert-text  { color: #bbf7d0; }

  .pt-info   { background: #0c1a3a; }
  .pt-info   .pt-alert-title { color: #93c5fd; }
  .pt-info   .pt-alert-text  { color: #bfdbfe; }

  .pt-danger { background: #1c0505; }
  .pt-danger .pt-alert-title { color: #fca5a5; }
  .pt-danger .pt-alert-text  { color: #fecaca; }

  .pt-note   { background: #1a0533; }
  .pt-note   .pt-alert-title { color: #d8b4fe; }
  .pt-note   .pt-alert-text  { color: #e9d5ff; }

  .pt-article code { background: #0f172a; color: #7dd3fc; }

  .pt-section-title { color: #f1f5f9; }
}