/* ════════════════════════════════════════════════════════════════════
   compare.css — تصميم صفحة المقارنة بين هاتفين
   نُقل من inline في page-compare.php للتخزين بالكاش.
   ════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}

:root{
  --cmp-ink:#0f172a;
  --cmp-ink-soft:#64748b;
  --cmp-ink-faint:#94a3b8;
  --cmp-bg:#f8fafc;
  --cmp-surface:#ffffff;
  --cmp-line:#e2e8f0;
  --cmp-line-strong:#cbd5e1;
  --cmp-accent:#0f172a;
  --cmp-win:#0ea968;
  --cmp-win-bg:#ecfdf5;
  --cmp-radius:14px;
  --cmp-radius-sm:9px;
}

/* ─── ملحوظة (بند H7 — 2026-07-05): بلوك إصلاح حاويات جنه اللي كان هنا
   (#main-content-row.tie-row بهوامش/حشوات/عرض مفروضين) اتشال — الإصلاح
   الموحّد بقى في style.css تحت body.ek-fullwidth (وصفحة المقارنة بتاخد
   الكلاس ده من فلتر body_class في functions.php). النسخة القديمة هنا كانت
   ناقصة أصلًا: بتصفّر هوامش الصف من غير padding الـ #content، فمحتوى
   صفحة المقارنة كان أضيق بـ 30px من باقي صفحات الموقع على الديسكتوب —
   التوحيد صلّح الفرق ده فمحتوى الصفحة هيتوسع 30px ويتحاذى مع باقي الموقع.
   قواعد width/max-width/box-sizing القديمة كانت زائدة عن الحاجة (الصف
   عنصر block بياخد عرض أبوه تلقائيًا بعد تصفير الهوامش) فاتشالت معاه. */

.cmp-wrap{
  max-width:1080px;margin:0 auto;padding:5px 16px 56px;
  direction:rtl;font-family:inherit;
  background:var(--cmp-bg);
  width:100%;
  box-sizing:border-box;
}
.cmp-wrap .ek-bc{
  margin-bottom:16px;
}

/* === HEADING === */
.cmp-hero{
  text-align:center;
  margin:0 0 32px;
}
.cmp-heading{
  font-size:26px;font-weight:800;color:var(--cmp-ink);
  margin:0 0 8px;line-height:1.3;
}
.cmp-sub{
  font-size:14px;color:var(--cmp-ink-soft);margin:0;
}

/* === SLOTS GRID === */
.cmp-slots{
  display:grid;
  grid-template-columns:1fr 52px 1fr;
  gap:14px;
  align-items:start;
  margin:0 0 22px;
  width:100%;
  max-width:100%;
  box-sizing:border-box;
  min-width:0;
}
/* السر: min-width:0 يسمح لعناصر الـ grid بالانكماش ومنع كسر التسنتر
   (عناصر grid افتراضياً min-width:auto فتتمدد بحجم محتواها) */
.cmp-slot-card{ min-width:0; }
.cmp-slot-header,
.cmp-slot-search-wrap,
.cmp-slot-search{ min-width:0; }

.cmp-vs{
  font-size:12px;font-weight:800;color:var(--cmp-surface);
  background:var(--cmp-ink);border-radius:50%;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;margin-top:38px;
  letter-spacing:.3px;
}

/* === SLOT CARD === */
.cmp-slot-card{
  border:1.5px solid var(--cmp-line);border-radius:var(--cmp-radius);
  background:var(--cmp-surface);overflow:visible;
  transition:border-color .2s,box-shadow .2s;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
}
.cmp-slot-card:focus-within{
  border-color:var(--cmp-ink);
  box-shadow:0 0 0 3px rgba(15,23,42,.07);
}

.cmp-slot-header{
  padding:14px 16px 12px;
  border-bottom:1px solid var(--cmp-line);
}
.cmp-slot-label{
  font-size:10.5px;font-weight:800;color:var(--cmp-ink-faint);
  text-transform:uppercase;letter-spacing:.7px;margin-bottom:8px
}

/* Search inside slot */
.cmp-slot-search{position:relative}
.cmp-slot-search input{
  width:100%;padding:10px 38px 10px 12px;
  border:1.5px solid var(--cmp-line);border-radius:var(--cmp-radius-sm);
  font-size:16px;outline:none;
  background:var(--cmp-bg);color:var(--cmp-ink);
  font-family:inherit;
  unicode-bidi:plaintext;
  transition:border-color .2s,background .2s
}
.cmp-slot-search input:focus{
  border-color:var(--cmp-ink);background:var(--cmp-surface);
}
.cmp-slot-search input::placeholder{color:var(--cmp-ink-faint)}
.cmp-slot-search svg{
  position:absolute;right:11px;top:50%;
  transform:translateY(-50%);
  width:16px;height:16px;stroke:var(--cmp-ink-faint);pointer-events:none
}

/* Selected phone preview inside slot */
.cmp-slot-preview{
  display:none;
  align-items:center;gap:12px;
  padding:14px 16px;
  background:var(--cmp-bg);
  border-top:1px solid var(--cmp-line);
}
.cmp-slot-preview.visible{display:flex}
.cmp-slot-preview img{
  width:48px;height:48px;object-fit:contain;
  border-radius:8px;background:var(--cmp-surface);
  border:1px solid var(--cmp-line);flex-shrink:0;
  padding:4px;
}
.cmp-slot-preview-name{
  flex:1;font-size:13.5px;font-weight:700;
  color:var(--cmp-ink);line-height:1.35;
  min-width:0;
  word-break:break-word;
  unicode-bidi:plaintext;
}
.cmp-slot-clear-btn{
  background:none;border:none;cursor:pointer;
  color:var(--cmp-ink-faint);font-size:18px;line-height:1;
  padding:4px 6px;flex-shrink:0;
  border-radius:6px;
  transition:color .15s,background .15s
}
.cmp-slot-clear-btn:hover{color:#dc2626;background:#fef2f2}

/* Dropdown list */
.cmp-dropdown{
  position:absolute;top:calc(100% + 6px);right:0;left:0;
  background:var(--cmp-surface);border:1.5px solid var(--cmp-line);
  border-radius:var(--cmp-radius-sm);box-shadow:0 12px 28px rgba(15,23,42,.12);
  max-height:280px;overflow-y:auto;
  z-index:999;display:none
}
.cmp-dropdown.open{display:block}
.cmp-dropdown::-webkit-scrollbar{width:5px}
.cmp-dropdown::-webkit-scrollbar-track{background:var(--cmp-bg);border-radius:3px}
.cmp-dropdown::-webkit-scrollbar-thumb{background:var(--cmp-line-strong);border-radius:3px}

.cmp-dd-item{
  display:flex;align-items:center;gap:11px;
  padding:10px 14px;cursor:pointer;
  border-bottom:1px solid var(--cmp-line);
  transition:background .15s
}
.cmp-dd-item:last-child{border-bottom:none}
.cmp-dd-item:hover{background:var(--cmp-bg)}
.cmp-dd-item img{
  width:38px;height:38px;object-fit:contain;
  border-radius:7px;flex-shrink:0;background:var(--cmp-bg);
  border:1px solid var(--cmp-line);padding:3px;
}
.cmp-dd-item .no-img-sm{
  width:38px;height:38px;background:var(--cmp-bg);
  border-radius:7px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--cmp-line);
}
.cmp-dd-item .no-img-sm svg{width:18px;height:18px;stroke:var(--cmp-ink-faint)}
.cmp-dd-item span{
  font-size:13px;font-weight:600;color:var(--cmp-ink);
  line-height:1.3;unicode-bidi:plaintext;
}
.cmp-dd-no-results{
  padding:18px;text-align:center;
  font-size:12.5px;color:var(--cmp-ink-faint)
}

/* Slot search wrapper needs relative for dropdown */
.cmp-slot-search-wrap{position:relative}

/* === SUBMIT === */
.cmp-submit-row{text-align:center;margin:0 0 40px}
.cmp-btn{
  background:var(--cmp-ink);color:#fff;border:none;
  padding:13px 38px;border-radius:99px;cursor:pointer;
  font-size:14px;font-weight:700;
  transition:background .2s,transform .1s,box-shadow .2s;
  display:inline-flex;align-items:center;gap:9px;
  box-shadow:0 4px 14px rgba(15,23,42,.18);
}
.cmp-btn:hover:not(:disabled){background:#1e293b;box-shadow:0 6px 18px rgba(15,23,42,.24)}
.cmp-btn:active:not(:disabled){transform:scale(.97)}
.cmp-btn:disabled{background:var(--cmp-line-strong);cursor:not-allowed;box-shadow:none}
.cmp-btn svg{width:15px;height:15px;stroke:#fff;flex-shrink:0}

/* === RESULTS === */
.cmp-results{margin-top:8px}
.cmp-badge{font-size:10.5px;font-weight:800;padding:4px 13px;border-radius:99px;color:#fff;letter-spacing:.2px}
.badge-1{background:var(--cmp-ink)}
.badge-2{background:var(--cmp-ink-soft)}

/* الكارت داخل thead — صورة + بادج + عنوان */
.cmp-th-card{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:10px 0;
}
.cmp-th-card img{
  max-width:100px;height:100px;object-fit:contain;
  background:var(--cmp-bg);border-radius:8px;
  border:1px solid var(--cmp-line);
  padding:4px;
}
.cmp-th-title{
  font-size:13px;font-weight:800;color:var(--cmp-ink);
  text-align:center;line-height:1.4;unicode-bidi:plaintext;
  display:block;
}

.cmp-table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;border:1.5px solid var(--cmp-line);border-radius:var(--cmp-radius);overflow:hidden;background:var(--cmp-surface)}
.cmp-table tr{border-bottom:1px solid var(--cmp-line)}
.cmp-table tr:last-child{border-bottom:none}

/* رأس الجدول الثابت — خلفية بيضاء مع border سفلي */
.cmp-table thead{
  position:sticky;top:0;z-index:5;
}
.cmp-table thead tr{
  border-bottom:2px solid var(--cmp-line-strong);
}
.cmp-th-empty{
  background:var(--cmp-surface);
  width:160px;
  padding:12px 14px;
  box-sizing:border-box;
  border-left:1px solid var(--cmp-line);
  border-bottom:2px solid var(--cmp-line-strong);
}
.cmp-th-name{
  background:var(--cmp-surface);color:var(--cmp-ink);
  padding:12px 14px;font-size:13px;font-weight:800;
  text-align:center;vertical-align:middle;
  unicode-bidi:plaintext;
  border-left:1px solid var(--cmp-line);
}
.cmp-th-name:last-child{border-left:none}
.cmp-table thead tr :first-child{border-top-right-radius:var(--cmp-radius)}
.cmp-table thead tr :last-child{border-top-left-radius:var(--cmp-radius)}

.cmp-th{
  background:var(--cmp-bg);color:var(--cmp-ink);
  padding:12px 14px;font-size:11.5px;font-weight:800;
  width:160px;text-align:center;vertical-align:middle;
  border-left:1px solid var(--cmp-line);
}
.cmp-td{padding:12px 14px;text-align:center;font-size:12.5px;color:var(--cmp-ink);background:var(--cmp-surface);vertical-align:middle;font-weight:600;unicode-bidi:plaintext}
.cmp-td.empty{color:var(--cmp-ink-faint);font-style:italic;font-weight:400}
/* القيمة الأفضل في كل صف تتميز بخلفية وأيقونة خضراء بدل التظليل الرمادي المحايد */
.cmp-td.win{
  background:var(--cmp-win-bg);
  color:#065f46;font-weight:800;
  position:relative;
}
.cmp-td.win::after{
  content:'✓';
  display:inline-block;
  margin-right:6px;
  color:var(--cmp-win);
  font-weight:900;
}

/* === RESPONSIVE === */
/* حماية من قطع المحتوى على التابلت (768-1199px تقريبًا):
   .cmp-table بعرض أعمدة ثابت (160px) وممكن يتجاوز عرض الشاشة في المدى ده.
   body عندها overflow-x:hidden عام، فبدون السطر ده أي تجاوز كان بيتقطع
   ويختفي تمامًا بدل ما يبقى قابل للتمرير. */
@media(max-width:1199px){
  .cmp-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
}
@media(max-width:700px){
  .cmp-slots{
    grid-template-columns:1fr;
    gap:10px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .cmp-slot-card{
    width:100%;
    max-width:100%;
    box-sizing:border-box;
  }
  .cmp-vs{
    margin:0 auto;
    width:34px;height:34px;font-size:11px
  }
  .cmp-th-card img{max-width:70px;height:70px}
  .cmp-th-title{font-size:11px}
  .cmp-th{width:100px;font-size:10.5px;padding:9px 8px}
  .cmp-td{font-size:11.5px;padding:9px 6px}
  .cmp-heading{font-size:21px}
}
@media(max-width:480px){
  .cmp-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .cmp-th-card img{max-width:60px;height:60px}
  .cmp-th-title{font-size:10px}
}
@media(min-width:1200px){
  .cmp-dropdown{max-height:320px}
}
/* Smart TV / large screens */
@media(min-width:1600px){
  .cmp-wrap{max-width:1320px}
  .cmp-slot-search input{font-size:15px;padding:11px 40px 11px 14px}
  .cmp-dd-item span{font-size:14px}
  .cmp-btn{font-size:15px;padding:15px 46px}
  .cmp-th{font-size:13px;padding:14px 16px}
  .cmp-td{font-size:14px;padding:14px 16px}
  .cmp-th-card img{max-width:120px;height:120px}
  .cmp-th-title{font-size:14px}
}