/*!
 * DPARADOX — dparadox-image.css  (v1)
 * ------------------------------------------------------------
 * إضافة خالصة فوق dparadox-pdf.css: ما فيها إعادة تعريف لأي صنف
 * موجود هناك، فربطها لا يغيّر شكل أي صفحة قائمة.
 *
 * الربط:
 *   <link rel="stylesheet" href="dparadox-shared.css?v=4">
 *   <link rel="stylesheet" href="dparadox-pdf.css?v=6">
 *   <link rel="stylesheet" href="dparadox-image.css?v=1">
 *
 * © جميع الحقوق محفوظة — يمنع النسخ أو إعادة الاستخدام التجاري بدون إذن كتابي.
 */

/* ---- مصغّرة الصورة داخل صف الملف ---- */
.res-thumb{
  width:46px; height:46px; border-radius:10px; flex-shrink:0;
  object-fit:cover; background:#1A1720; border:1px solid var(--line);
}

/* ---- فرق الحجم: اللون يقول النتيجة قبل قراءة الرقم ---- */
.delta{ font-weight:700; font-family:'Space Grotesk', sans-serif; }
.delta.down{ color:var(--success); }
.delta.up{ color:var(--danger); }
.delta.flat{ color:var(--parchment-dim); }

/* ---- شريط ملخّص فوق النتائج ---- */
.batch-bar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin-top:18px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line); background:rgba(167,150,217,0.07);
  font-size:12.5px; color:var(--parchment);
}
.batch-bar b{ color:var(--gold-bright); font-family:'Space Grotesk', sans-serif; }
.batch-bar .grow{ flex:1; }

/* ---- شارة صغيرة داخل صف الملف (صيغة، تخطّي، تنبيه) ---- */
.tag{
  display:inline-block; padding:2px 8px; border-radius:100px;
  font-size:10.5px; font-weight:700; letter-spacing:.02em;
  background:rgba(167,150,217,0.16); color:var(--gold-bright);
}
.tag.muted{ background:rgba(255,255,255,0.06); color:var(--parchment-dim); }
.tag.warn{ background:rgba(216,168,84,0.16); color:#D8A854; }
.tag.bad{ background:rgba(212,94,110,0.16); color:var(--danger); }

/* ---- صف مرفوض: يبقى ظاهراً بسببه، لا يختفي بصمت ---- */
.file-item.rejected{ border-color:rgba(212,94,110,0.32); background:rgba(212,94,110,0.05); }

/* ---- زر تنزيل الصورة الواحدة داخل صف النتيجة ---- */
.res-dl{
  height:32px; padding:0 12px; border-radius:100px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  font-family:'Tajawal',sans-serif; font-size:12px; font-weight:700;
  border:1px solid rgba(79,195,217,.42); background:transparent; color:#4FC3D9;
  transition:background .18s, border-color .18s, transform .12s ease;
}
.res-dl svg{ width:14px; height:14px; fill:currentColor; }
.res-dl:hover{ background:rgba(79,195,217,.14); border-color:#4FC3D9; }
.res-dl:active{ transform:scale(.96); }

/* ---- زر تنزيل الكل (ZIP): اختصار لا مصير — يظهر فقط مع أكثر من صورة ---- */
#zipBtn{ color:#A78BE0; border-color:rgba(167,139,224,.42); }
#zipBtn svg{ fill:#A78BE0; }
#zipBtn:hover:not(:disabled){ background:rgba(167,139,224,.14); border-color:#A78BE0; }

/* ---- مقارنة قبل/بعد (تستخدمها أداة الضغط) ---- */
.compare{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.compare figure{ margin:0; }
.compare img{ width:100%; border-radius:12px; border:1px solid var(--line); display:block; background:#1A1720; }
.compare figcaption{ font-size:11.5px; color:var(--parchment-dim); text-align:center; margin-top:6px; }
@media (max-width:520px){ .compare{ grid-template-columns:1fr; } }

/* ---- معاينة العلامة المائية (إضافة v2) ---- */
.wm-preview-wrap{
  margin-top:18px; padding:14px; border-radius:14px;
  border:1px solid var(--line); background:rgba(255,255,255,0.03);
  text-align:center;
}
.wm-preview-title{
  font-size:11.5px; letter-spacing:.06em; color:var(--parchment-dim);
  margin-bottom:10px; font-family:'Space Grotesk', sans-serif;
}
.wm-preview{
  max-width:100%; height:auto; border-radius:10px;
  border:1px solid var(--line); background:#1A1720; display:inline-block;
}

/* ---- رقعة الشطرنج: تُظهر الشفافية الحقيقية بدل خلفية صمّاء (إضافة v3) ---- */
.checker{
  background-image:
    linear-gradient(45deg, rgba(255,255,255,.07) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(255,255,255,.07) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(255,255,255,.07) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(255,255,255,.07) 75%);
  background-size:18px 18px;
  background-position:0 0, 0 9px, 9px -9px, -9px 0;
}