/* ════════════════════════════════════════════════════════════════════════════
   mobile-single-extra.css
   تخطيط صفحة الموبايل المفردة — نُقل من inline (single-mobile.php + tab-phones.php)
   يُحمَّل على صفحات الموبايل فقط، ويعتمد على mobile-single.css فيُحمَّل بعده.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── [1] محاذاة علوية (من single-mobile.php) ── */
/* غلاف محاذاة علوي: يضمن أن العنوان والميتا والـ breadcrumb على نفس
   الخط الرأسي (الـ datum) بالضبط مثل محتوى .m-page تحتها — نفس
   max-width ونفس الـ padding الأفقي بالحرف الواحد */
.m-top-align {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 16px;
    box-sizing: border-box;
}
/* الميتا تبدأ من نفس datum العنوان — منع أي إزاحة */
.m-top-align .m-meta-bar {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}
/* margin البريدكرامب داخل .m-top-align */
.m-top-align nav.ek-breadcrumb {
    margin: 4px 0 16px !important;
}
.m-top-align .m-meta-bar .post-meta,
.m-top-align .m-meta-bar .single-post-meta {
    margin: 0 0 14px !important;
    padding: 0 !important;
}
.m-top-align .m-meta-bar .post-meta::before,
.m-top-align .m-meta-bar .post-meta::after,
.m-top-align .m-meta-bar .single-post-meta::before,
.m-top-align .m-meta-bar .single-post-meta::after {
    display: none !important;
    content: none !important;
}

/* ── [2] تبويبات/مواصفات (من tab-phones.php) ── */
/* ===== الهيكل العام ===== */
.aps-group {
    background:#fff;
    border:1px solid #eaeaea;
    border-radius:6px;
    overflow:hidden;
    margin-bottom:30px;
    direction:rtl;
    box-shadow:0 2px 5px rgba(0,0,0,0.02);
}
.m-tabs-desktop-wrap {
    border-bottom:1px solid #e8e9ea;
    margin-top:10px;
    margin-bottom:0;
    box-sizing:border-box;
}
.aps-tabs {
    margin:0;
    padding:10px;
    list-style:none;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    background:#F5F5F5;
}
.aps-tabs li a {
    display:block;
    padding:8px 14px;
    color:#333333;
    font-weight:700;
    font-size:14px;
    text-decoration:none;
    border-radius:4px;
    transition:.2s;
}
.aps-tabs li a:hover { color:#333; background:#f5f5f5; }
.aps-tabs li.active a { color:#fff !important; background:#01688a; }

/* ── سكرول أفقي للتابات + أسهم التنقل (بند 2026-07-11 v7) ──
   القواعد دي اتنقلت لبلوك <style data-no-optimize> inline جوه tab-phones.php
   عشان LiteSpeed UCSS كان بيشيلها أحيانًا من الملف ده فالأسهم تختفي.
   متضيفش أي قواعد للأسهم هنا تاني — المصدر الوحيد بقى في tab-phones.php. */

.aps-tab-ad-slot {
    margin-top:0;
    margin-bottom:16px;
    min-height:0;
    text-align:center;
    overflow:hidden;
}
.aps-tab-ad-slot:empty { margin-bottom:0; }
.aps-tab-container { padding:0; border-top:1px solid #f0f0f0; }
.aps-tab-heading {
    direction: rtl;
    background: #f9f9f9;
    border: 1px solid #ebebeb;
    border-right: 4px solid #c62828;
    padding: 12px 16px;
    margin: 0 0 20px;
    font-size: 17px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.5;
    box-sizing: border-box;
}
.aps-tab-content {
    display:none;
    animation:fadeInTab .35s ease-in-out;
    padding:20px;
}
@keyframes fadeInTab {
    from { opacity:0; transform:translateY(8px); }
    to   { opacity:1; transform:translateY(0);   }
}

/* ===== محتوى عام ===== */
.aps-box { margin-bottom:25px; }
.mz-content { font-size:18px; line-height:1.8; color:#4b4b4b; }
.mz-article p { margin-bottom:16px; }
.mz-article img { max-width:100%; height:auto; border-radius:8px; }

/* ===== جدول المواصفات ===== */
.aps-table {
    width:100%;
    max-width:100%;
    table-layout:fixed;
    border-collapse:collapse;
    font-size:16px;
    background:#fff;
    border:1px solid #eaeaea;
    margin-bottom:16px;
    box-sizing:border-box;
}
.aps-table th, .aps-table td {
    padding:12px 16px;
    border-bottom:1px solid #f2f2f2;
    text-align:right;
    vertical-align:top;
    word-break:break-word;
    overflow-wrap:break-word;
}
.aps-table th {
    background:#fafafa;
    font-weight:700;
    width:32%;
    color:#444;
    border-left:1px solid #f2f2f2;
}
.aps-table tr:last-child th,
.aps-table tr:last-child td { border-bottom:0; }

/* ── هوفر صف جدول المواصفات (بند 2026-07-11): تلوين الصف كله عشان الزائر
   يعرف هو واقف فين وهو بيقرأ ───────────────────────────────────────────── */
.aps-table tr:hover > th,
.aps-table tr:hover > td {
    background-color:#fbeaea;
}

/* ── عناوين أقسام جدول المواصفات (بند 2026-07-11) ─────────────────────────
   شريط ملوّن بلون العلامة التجارية + أيقونة + اسم القسم، فوق كل جدول فرعي
   مباشرة (الشاشة/الكاميرا/الهاردوير/البطارية...إلخ)، وقابل للقفز إليه من
   جدول المواصفات السريع بجانب الصورة البارزة. ──────────────────────────── */
.aps-spec-section-heading {
    display:flex;
    align-items:center;
    gap:10px;
    background:#c62828;
    color:#fff;
    font-size:16px;
    font-weight:800;
    padding:12px 16px;
    margin:24px 0 0;
    border-radius:8px 8px 0 0;
    direction:rtl;
    scroll-margin-top:90px; /* عشان القفز ميحطش العنوان تحت أي هيدر ثابت */
}
.mz-content > .aps-spec-section-heading:first-child {
    margin-top:0;
}
.aps-spec-section-heading + table.aps-table {
    margin-top:0;
    border-top:none;
    border-radius:0 0 8px 8px;
}
.aps-spec-section-icon {
    width:20px;
    height:20px;
    flex-shrink:0;
    background-color:#fff;
    -webkit-mask-size:contain;
    mask-size:contain;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
}

/* ── بند 2026-07-11 (إصلاح ظهور): بعض المقالات القديمة فيها كود CSS خاص
   بيها بس (مضاف من WPCode Page Scripts على مستوى المقالة، مش من ملفات
   الثيم) بيخفي أول <table class="aps-table"> في تاب المواصفات — كان ده
   قديمًا بيستهدف جدول فاضي دايمًا (زي جدول "الوسائط" لما يكون بلا بيانات)
   فمكانش بيبان تأثيره. بعد ما بقينا لا نطبع أي جدول فاضي أصلاً، أول جدول
   حقيقي (زي "معلومات عامة") بقى هو اللي بياخد هذا الإخفاء بالغلط. القاعدة
   دي بتضمن ظهور أي جدول مواصفات فيه عنوان قسم فوقه دايمًا، بغض النظر عن أي
   كود تاني مكتوب لمقالة بعينها. ──────────────────────────────────────── */
#aps-specs .aps-spec-section-heading + table.aps-table {
    display:table !important;
}

/* ===== السعر والشراء — DEAL CARD DESIGN ===== */
.aps-deal-list {
    display:flex;
    flex-direction:column;
    gap:14px;
}

.aps-deal-card {
    --deal-ink:#16213e;
    --deal-ink-soft:#6b7280;
    --deal-accent:#d4861f;
    --deal-accent-bg:#fef6ea;
    --deal-line:#edf0f5;
    background:#fff;
    border:1px solid #e9ecf2;
    border-radius:14px;
    box-shadow:0 2px 10px rgba(22,33,62,.05);
    overflow:hidden;
    direction:rtl;
    transition:box-shadow .25s ease, transform .25s ease;
}
.aps-deal-card:hover {
    box-shadow:0 10px 26px rgba(22,33,62,.10);
    transform:translateY(-2px);
}
.aps-deal-card *,
.aps-deal-card *::before,
.aps-deal-card *::after { box-sizing:border-box; }

/* ---- رأس الكارت ---- */
.aps-deal-head {
    display:flex;
    align-items:center;
    gap:14px;
    padding:18px 20px;
    border-bottom:1px solid var(--deal-line);
}

.aps-deal-logo {
    flex:0 0 80px;
    width:80px;
    height:80px;
    border-radius:14px;
    background:#ffffff;
    border:1px solid var(--deal-line);
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.aps-deal-logo img {
    max-width:82%;
    max-height:68%;
    width:auto;
    height:auto;
    object-fit:contain;
}
.aps-deal-logo-text {
    font-size:28px;
    font-weight:800;
    color:var(--deal-ink);
}

.aps-deal-store {
    flex:1 1 auto;
    min-width:0;
    display:flex;
    align-items:center;
}
.aps-deal-store-name {
    font-size:17px;
    color:var(--deal-ink);
    font-weight:700;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.aps-deal-price {
    flex:0 0 auto;
    max-width:42%;
    text-align:left;
}
.aps-deal-price-value {
    display:inline-block;
    font-size:19px;
    font-weight:800;
    color:#1a1a1a;
    background:var(--deal-accent-bg);
    padding:6px 14px;
    border-radius:9px;
    line-height:1.3;
    unicode-bidi:plaintext;
}
.aps-deal-stock {
    flex:0 0 auto;
    font-size:13px;
    font-weight:700;
    padding:6px 12px;
    border-radius:9px;
}
.aps-deal-out {
    color:#b3261e;
    background:#fdecea;
}

/* ---- جسم الكارت: شراء + كوبون ---- */
.aps-deal-body {
    display:flex;
    align-items:center;
    gap:14px;
    padding:16px 20px;
    flex-wrap:wrap;
}

.aps-deal-buybtn {
    flex:1 1 180px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:linear-gradient(135deg,#16213e 0%,#2b3d6e 100%);
    color:#fff !important;
    text-decoration:none;
    padding:13px 18px;
    border-radius:10px;
    font-size:14.5px;
    font-weight:700;
    letter-spacing:.2px;
    box-shadow:0 6px 16px rgba(22,33,62,.22);
    transition:filter .2s ease, transform .2s ease;
}
.aps-deal-buybtn:hover {
    filter:brightness(1.12);
    transform:translateY(-1px);
}
.aps-deal-arrow { transform:scaleX(-1); } /* السهم يشاور لليسار في RTL */

.aps-deal-coupon {
    flex:1 1 220px;
    display:flex;
    align-items:center;
    gap:8px;
    background:#fbfbfd;
    border:1.5px dashed #d7dbe4;
    border-radius:10px;
    padding:8px 10px;
}
.aps-deal-coupon-icon {
    flex:0 0 auto;
    color:var(--deal-ink-soft);
    display:flex;
}
.aps-deal-coupon-code {
    flex:1;
    min-width:0;
    font-family:'Courier New', monospace;
    font-weight:700;
    font-size:14px;
    letter-spacing:1px;
    color:var(--deal-ink);
    text-align:center;
    direction:ltr;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.aps-deal-coupon-btn {
    flex:0 0 auto;
    background:#fff;
    color:var(--deal-ink);
    border:1px solid #d7dbe4;
    border-radius:7px;
    padding:7px 12px;
    font-size:12.5px;
    font-weight:700;
    cursor:pointer;
    transition:.2s ease;
    white-space:nowrap;
}
.aps-deal-coupon-btn:hover {
    background:var(--deal-ink);
    color:#fff;
    border-color:var(--deal-ink);
}
.aps-deal-coupon-btn.copied {
    background:#1e8a5f;
    border-color:#1e8a5f;
    color:#fff;
}

/* ---- موبايل ---- */
@media (max-width:560px) {
    .aps-deal-head { flex-wrap:wrap; padding:16px; }
    .aps-deal-price { flex-basis:100%; text-align:right; margin-top:4px; }
    .aps-deal-price-value { display:block; }
    .aps-deal-body { flex-direction:column; align-items:stretch; padding:14px 16px; }
    .aps-deal-buybtn, .aps-deal-coupon { flex:1 1 auto; width:100%; }
}

/* ===== معرض الصور ===== */
.aps-gallery-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:12px;
}
.aps-gallery-item {
    position:relative;
    display:block;
    overflow:hidden;
    border-radius:6px;
}
.aps-gallery-img {
    width:100%; aspect-ratio:1/1;
    border-radius:6px;
    border:1px solid #eaeaea;
    transition:.25s; cursor:pointer; object-fit:contain;
    background:#fff;
}
.aps-gallery-item:hover .aps-gallery-img {
    transform:translateY(-4px);
    box-shadow:0 6px 15px rgba(0,0,0,.1);
}
/* ✨ تأثير اللمعة العابرة (Shine) */
.aps-gallery-item::after {
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    z-index:3;
    width:50%;
    height:100%;
    pointer-events:none;
    background:linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.55) 50%,
        rgba(255,255,255,0) 100%);
    transform:skewX(-20deg);
    opacity:0;
}
.aps-gallery-item:hover::after {
    animation:aps-gal-shine .85s ease;
}
@keyframes aps-gal-shine {
    0%   { left:-75%; opacity:0; }
    20%  { opacity:1; }
    100% { left:125%; opacity:0; }
}

/* ===== الفيديو ===== */
.aps-video-wrap {
    position:relative; padding-bottom:56.25%; height:0;
    overflow:hidden; border-radius:8px;
    box-shadow:0 4px 12px rgba(0,0,0,.1);
}
.aps-video-wrap iframe {
    position:absolute; top:0; left:0;
    width:100%; height:100%; border:none;
}

/* ===== ريسبونسف ===== */
@media(max-width:768px) {
    .aps-group { border-radius:0; border-left:0; border-right:0; border-bottom:0; }
    /* قواعد سكرول التابات والأسهم اتنقلت inline لـ tab-phones.php (بند v7) */
    .aps-tab-content { padding:15px 10px; }
    .aps-gallery-grid { grid-template-columns:repeat(2,1fr); gap:8px; }
    .aps-table th { width:40%; font-size:16px; padding:10px; }
    .aps-table td { font-size:16px; padding:10px; }
    .aps-tabs li a { padding:8px 10px; font-size:14px; white-space:nowrap; }
}
@media(max-width:480px) {
    .aps-tab-content { padding:12px 5px; }
}

/* Smart TV / شاشات كبيرة جدًا */
@media(min-width:1900px) {
    .aps-tabs li a { font-size:16px; padding:14px 22px; }
    .aps-table th, .aps-table td { font-size:16px; padding:16px; }
    .aps-tab-content { font-size:16px; }
}

/* ── [3] تخطيط الصفحة الأساسي (من single-mobile.php) ── */
/* ═══════════════════════════════════════════════
   DESKTOP LAYOUT — تعريفات الديسك توب الأساسية
   ═══════════════════════════════════════════════ *//* الحاوية الرئيسية للصفحة: عمودين (محتوى + سايدبار) */

.m-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  align-items: start;
  direction: rtl;
}

@media (max-width: 992px) {
  .m-page {
    grid-template-columns: 1fr;
  }}/* العمود الرئيسي */

.m-main {
  background: #fff;
  padding: 15px 0;
  min-width: 0; /* يمنع التمدد */
}/* العمود الجانبي */

.m-sidebar {
  min-width: 0;
}/* Hero: صورة الموبايل + مواصفاته جنباً إلى جنب */

.m-hero {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .m-hero {
    grid-template-columns: 1fr;
  }}

.m-phone-image {
  order: 0;
}

.m-specs {
  order: 0;
}

/* ═══════════════════════════════════════════════
   RESPONSIVE — تعديلات الموبايل فقط
   ═══════════════════════════════════════════════ */

@media (max-width: 768px) {/* Hero: عمود واحد */

  .m-hero {
    grid-template-columns: 1fr;
    gap: 12px;
  }/* ترتيب: الصورة أولاً ثم المواصفات */

  .m-phone-image {
    order: 1;
    position: static; /* إلغاء sticky على الموبايل */
  }

  .m-specs {
    order: 2;
  }
}/* ═══════════════════════════════════════════════
   SMART TV — شاشات كبيرة جدًا (نفس تخطيط الديسكتوب
   بالضبط، تكبير القراءة فقط لمسافة المشاهدة البعيدة)
   ═══════════════════════════════════════════════ */

@media (min-width: 1900px) {
  h1.m-mobile-title { font-size: 32px; }
}/* ══ Dark Mode ════════════════════════════════════════════ *//* ── Layout ── */

html.dark-skin .m-main {
  background: #1e1e1e;
}

/* ═══════════════════════════════════════════════════════════════════
   CSS الـ include files — نُقل من inline في كل ملف للتخزين بالكاش
   ═══════════════════════════════════════════════════════════════════ */

/* ══ layout-phones.php ══ */

/* ─── Layout ─────────────────────────────────── */
/* ملاحظة: .m-page / .m-main / .m-sidebar / .m-hero معرّفة في single-mobile.php
   وهو المصدر الوحيد الصحيح لها (يشمل الحماية وقواعد الموبايل/التابلت). أي
   تعريف مكرر لها هنا كان من نسخة تطوير قديمة ويتسبب في تضارب الـ CSS
   (يظهر بصورة محسوسة كفائض في الصورة وزر المقارنة وجدول المواصفات على
   حافة الشاشة، خصوصًا على الموبايل) — لذلك حُذف نهائيًا من هنا. */
.m-phone-image{display:flex;flex-direction:column;gap:8px}
.m-phone-image img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff;display:block;border:1px solid #eee}

/* ✨ تأثير اللمعة العابرة (Shine) على الصورة البارزة */
.m-phone-image{position:relative;overflow:hidden;border-radius:4px}
.m-phone-image::after{
    content:"";
    position:absolute;
    top:0;
    left:-75%;
    z-index:3;
    width:50%;
    height:100%;
    pointer-events:none;
    background:linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.55) 50%,
        rgba(255,255,255,0) 100%);
    transform:skewX(-20deg);
    opacity:0;
}
.m-phone-image:hover::after{
    animation:m-shine .85s ease;
}
@keyframes m-shine{
    0%   { left:-75%; opacity:0; }
    20%  { opacity:1; }
    100% { left:125%; opacity:0; }
}
.m-compare-match-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 44px; /* حد أدنى أمان لو عمود المواصفات قصير جدًا (هاتف مواصفاته قليلة) */
    padding: 12px 14px;
    background: #fbfbfb;
    color: #666;
    text-decoration: none;
    font-size: 15px; /* كُبِّر بسيط من 14px بناءً على طلب المستخدم */
    font-weight: 600;
    text-align: center;
    border: 1px solid #eee;
    border-top: none;
    transition: all 0.2s;
    box-sizing: border-box;
}
.m-compare-match-btn:hover {
    background: #f1f1f1;
    color: #333;
}
.m-compare-btn-wrap {
    width: 100%;
    /* ياخد كل المساحة المتبقية في العمود تلقائيًا (بعد الصورة + المسافة)،
       فالزرار يوصل بالظبط لآخر خط عمود المواصفات مهما كان عدد صفوفها،
       من غير ما نغيّر حجم الصورة أو المسافة بينها وبين الزرار */
    flex: 1;
    margin-top: 0;
}

/* ─── Hero Specs — تصميم مقتبس من PhoneArena ──────────────────────────────
   قائمة بيضا نضيفة: أيقونة صغيرة + نص بس، من غير أي صناديق أو خلفيات ملونة.
   الأيقونة CSS mask (مش <img> عادي) عشان نضمن لون دقيق (رمادي عادي، أحمر
   عند الـ hover) بغض النظر عن الألوان الأصلية جوه ملف SVG نفسه. */
.m-specs{
    display:flex;
    flex-direction:column;
    gap:4px;
    width:100%;
    box-sizing:border-box;
    min-width:0;
    background:#fff;
}
.m-spec-row{
    display:flex;
    align-items:center;
    gap:14px;
    padding:11px 12px;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
    border-radius:8px;
    border-right:3px solid transparent;
    /* ── بند 2026-07-11: الصف بقى <a> قابل للضغط (يقفز لجدول المواصفات
       الكامل) — تصفير تنسيق الرابط الافتراضي عشان يفضل شكله زي ما هو ──── */
    text-decoration:none;
    color:inherit;
    cursor:pointer;
    /* ── تلوين الصفوف بالتبادل (بند 2026-07-10، مُعاد ضبطه) — رمادي محايد بس ── */
    background:#f5f5f5;
    /* ── حالة البداية قبل الظهور (بند 2026-07-10) ───────────────────────── */
    opacity:0;
    transform:translateX(14px);
    transition:opacity .5s ease, transform .5s ease, background-color .3s ease, border-color .3s ease;
}
.m-spec-row:nth-child(even){
    background:#f5f5f5;
}
/* ── الظهور التدريجي المتتابع: كل صف بيتأخر شوية عن اللي قبله ─────────── */
.m-specs.is-visible .m-spec-row{
    opacity:1;
    transform:translateX(0);
}
.m-specs.is-visible .m-spec-row:nth-child(1){ transition-delay:.05s; }
.m-specs.is-visible .m-spec-row:nth-child(2){ transition-delay:.15s; }
.m-specs.is-visible .m-spec-row:nth-child(3){ transition-delay:.25s; }
.m-specs.is-visible .m-spec-row:nth-child(4){ transition-delay:.35s; }
.m-specs.is-visible .m-spec-row:nth-child(5){ transition-delay:.45s; }
.m-specs.is-visible .m-spec-row:nth-child(6){ transition-delay:.55s; }
@media (prefers-reduced-motion: reduce){
    .m-spec-row{ opacity:1; transform:none; transition:none; }
}
/* ── هوفر الصف: رمادي غامق شوية + خط أحمر جانبي (مش خلفية وردي) ─────────── */
.m-spec-row:hover{
    background:#ececec;
    border-right-color:#000000;
}

/* ── شارة الأيقونة: خلفية رمادية محايدة، الأيقونة نفسها هي اللي حاملة اللون الأحمر ── */
.m-spec-icon-box{
    width:32px;
    height:32px;
    flex-shrink:0;
    background:#e9e9e9;
    border-radius:8px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background-color .25s ease, transform .35s ease;
}
.m-spec-icon-mask{
    width:18px;
    height:18px;
    flex-shrink:0;
    background-color:#C62828; /* أحمر العلامة التجارية ثابت — زي أيقونات آراء الزوار بالظبط */
    -webkit-mask-size:contain;
    mask-size:contain;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    -webkit-mask-position:center;
    mask-position:center;
}
.m-spec-value{
    font-family:'Tajawal Body','Tajawal Fallback Body',sans-serif;
    font-size:14px;
    font-weight:600;
    color:#333333;
    line-height:1.5;
    direction:rtl;
    text-align:right;
    transition: color 0.25s ease;
    min-width:0;
    word-break:break-word;
}
/* ── الـ hover: الشارة بتدور شوية وتكبر، وخلفيتها بتبقى بيضاء صافية عشان تبان أوضح ── */
.m-spec-row:hover .m-spec-icon-box{
    background-color:#e9e9e9;
    transform: scale(1.3) rotate(8deg);
}
.m-spec-row:hover .m-spec-value{
    color:#333333;
}


/* ─── Responsive ─────────────────────────────── */
@media(max-width:768px){
    .m-page{grid-template-columns:1fr}
    .m-sidebar{order:2}
    .m-main{order:1; min-width:0}
    .m-hero{grid-template-columns:1fr; min-width:0; max-width:100%}
    .m-specs{width:100%; max-width:100%}
    .m-spec-row{width:100%; max-width:100%}
}

/* Smart TV / شاشات كبيرة جدًا */
@media(min-width:1900px){
    .m-spec-value { font-size:17px; }
    .m-spec-row { padding:15px 12px; }
    .m-spec-icon-box { width:38px; height:38px; }
    .m-spec-icon-mask { width:20px; height:20px; }
    .m-compare-match-btn { font-size:16px; padding:15px 18px; }
}


/* ══ related-phones.php ══ */
/* قسم الهواتف ذات الصلة */
.m-related-section {
    margin-top: 40px;
    margin-bottom: 25px;
    clear: both;
}
.m-related-header {
    border-bottom: 4px solid #333;
    padding-top: 10px;
    margin-bottom: 15px;
}
.m-related-header h3 {
    font-size: 18px;
    font-weight: 800;
    color: #333;
    padding: 10px;
    margin: 0;
    text-align: right;
    direction: rtl;
}

/* شبكة: صفّان × 4 كروت (نفس تصميم كروت أحدث الهواتف) */
.m-related-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    min-width: 0;
}

/* الكارت — نفس تصميم كروت الشريط الجانبي (صورة فوق + عنوان تحت) */
.m-related-grid .m-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 175px;
    transition: box-shadow .2s, transform .2s;
    min-width: 0;
}
.m-related-grid .m-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
    transform: translateY(-2px);
}
/* ✨ تأثير اللمعة العابرة (Shine) */
.m-related-grid .m-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 3;
    width: 50%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.55) 50%,
        rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    opacity: 0;
}
.m-related-grid .m-card:hover::after {
    animation: m-rel-shine .85s ease;
}
@keyframes m-rel-shine {
    0%   { left: -75%; opacity: 0; }
    20%  { opacity: 1; }
    100% { left: 125%; opacity: 0; }
}
.m-related-grid .m-card-link {
    text-decoration: none;
    color: inherit;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.m-related-grid .m-card-thumb-wrap {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 150px !important;
    overflow: hidden;
    background: #fff;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-bottom: 0 !important;
}
.m-related-grid .m-card-thumb-wrap img,
.m-related-grid .m-card-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block;
}
.m-related-grid .m-card-title {
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 1.5;
    color: #111 !important;
    direction: rtl;
    text-align: center;
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* تابلت: صفّان × 3 */
@media (max-width: 900px) {
    .m-related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* موبايل: عمودان */
@media (max-width: 600px) {
    .m-related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Smart TV */
@media (min-width: 1900px) {
    .m-related-header h3 { font-size: 22px; }
    .m-related-grid .m-card-title { font-size: 14px !important; }
}

/* ══ sidebar-latest-mobiles.php ══ */
.slm-box { margin-bottom: 28px; }
.slm-box .n-sb-title {
    padding: 10px 0;
    font-weight: 800;
    font-size: 18px;
    color: #333;
    direction: rtl;
    border-bottom: 3px solid #333;
    text-align: center;
    margin-bottom: 15px;
}
.slm-box .n-sb-body { direction: rtl; }
.slm-box .n-sb-mobiles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
.slm-box .n-sb-mobiles-grid .m-card {
    position: relative;
    overflow: hidden;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px;
    background: #fff !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 175px;
    transition: box-shadow .2s, transform .2s;
    min-width: 0;
}
.slm-box .n-sb-mobiles-grid .m-card:hover {
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
    transform: translateY(-2px);
}
/* ✨ تأثير اللمعة العابرة (Shine) */
.slm-box .n-sb-mobiles-grid .m-card::after {
    content: "";
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 3;
    width: 50%;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(120deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.55) 50%,
        rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    opacity: 0;
}
.slm-box .n-sb-mobiles-grid .m-card:hover::after {
    animation: m-shine .85s ease;
}
@keyframes m-shine {
    0%   { left: -75%; opacity: 0; }
    20%  { opacity: 1; }
    100% { left: 125%; opacity: 0; }
}
.slm-box .n-sb-mobiles-grid .m-card-link {
    text-decoration: none;
    color: inherit;
    padding: 8px !important;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}
.slm-box .n-sb-mobiles-grid .m-card-thumb-wrap {
    aspect-ratio: 1 / 1 !important;
    width: 100% !important;
    height: auto !important;
    max-height: 130px !important;
    overflow: hidden;
    background: #fff;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin-bottom: 0 !important;
}
.slm-box .n-sb-mobiles-grid .m-card-thumb-wrap img,
.slm-box .n-sb-mobiles-grid .m-card-thumb {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    display: block;
}
.slm-box .n-sb-mobiles-grid .m-card-title {
    font-weight: 700 !important;
    font-size: 12px !important;
    line-height: 1.5;
    color: #111 !important;
    direction: rtl;
    text-align: center;
    margin: 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* ══ sidebar-latest-news.php ══ */
.sln-box { margin-bottom: 28px; }
.sln-box .n-sb-title {
    padding: 10px 0;
    font-weight: 800;
    font-size: 18px;
    color: #333;
    direction: rtl;
    border-bottom: 3px solid #333;
    text-align: center;
    margin-bottom: 15px;
}
.sln-box .n-sb-body { direction: rtl; }
.sln-box .n-sb-item {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f0f0f0;
    text-decoration: none;
    direction: rtl;
}
.sln-box .n-sb-item:last-child { border-bottom: none; }
.sln-box .n-sb-thumb {
    width: 75px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: #f0f0f0;
}
.sln-box .n-sb-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.sln-box .n-sb-noimg {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
}
.sln-box .n-sb-item-title {
    flex: 1;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    color: #333;
    text-align: right;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sln-box .n-sb-item:hover .n-sb-item-title { color: #c62828; }

/* ══ mobile-brands.php ══ */
/* تنسيق صندوق الماركات والبحث */
.m-brands-box {
  margin-bottom: 25px;
  background: #fff;
}
.m-brands-box-title {
  padding: 10px 0;
  font-weight: 800;
  font-size: 18px;
  color: #333;
  direction: rtl;
border-bottom: 3px solid #333;
  margin-bottom: 15px;
  align-items: center;
  text-align: center;
  gap: 8px;
}

.m-brand-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px 10px;
  direction: rtl;
}
.m-brand-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
}
.m-brand-item img {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 5px;
}
.m-brand-item span {
  font-size: 12px;
  font-weight: 600;
}
.m-more-brands-btn {
  display: block;
  text-align: center;
  background: #cc0000;
  color: #fff;
  padding: 8px;
  font-weight: bold;
  text-decoration: none;
  margin-top: 20px;
  border-radius: 2px;
  transition: 0.2s;
}
.m-more-brands-btn:hover {
  background: #a00000;
  color: #fff;
}



/* ══ mobile-author-box.php ══ */
/* ─── صندوق الكاتب ─── تصميم موحّد على كل الشاشات ─────────────────── */
.m-author-box {
    direction: rtl;
    background: #f9f9f9;
    border: 1px solid #ebebeb;
    border-right: 4px solid #c62828;
    padding: 16px;
    margin: 32px 0 8px;
    box-sizing: border-box;
}

/* الصف العلوي: الصورة + (الوصف/الاسم) جنباً إلى جنب */
.m-author-top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}

.m-author-avatar {
    flex-shrink: 0;
    display: block;
    line-height: 0;
}
.m-author-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

.m-author-head {
    flex: 1;
    min-width: 0;
    text-align: right;
}
.m-author-label {
    font-size: 11px;
    font-weight: 600;
    color: #c62828;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}
.m-author-name {
    font-size: 16px;
    font-weight: 800;
    color: #1a1a1a;
    text-decoration: none;
    display: block;
}
.m-author-name:hover { color: #c62828; }

/* ── أيقونات السوشيال ميديا لكارت الكاتب (E-E-A-T) — 2026-07-10 ────────── */
.m-author-social {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}
.m-author-social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #eee;
    color: #555;
    transition: background-color .2s, color .2s;
}
.m-author-social-link:hover {
    color: #fff;
}
.m-author-social-facebook:hover { background: #1877f2; }
.m-author-social-twitter:hover  { background: #000000; }
.m-author-social-linkedin:hover { background: #0a66c2; }

/* النبذة: فقرة كاملة العرض تبدأ من نفس نقطة بداية الصورة (يمين الصندوق) */
.m-author-bio {
    font-size: 13px;
    color: #555;
    line-height: 1.7;
    margin: 0;
    text-align: right;
}

/* تكبير بسيط على الشاشات الكبيرة جداً — نفس التصميم بدون أي نقل عناصر */
@media (min-width: 1900px) {
    .m-author-avatar img { width: 96px; height: 96px; }
    .m-author-name { font-size: 19px; }
    .m-author-bio  { font-size: 15px; }
}

/* روابط جوه نص المقالة (تبويب "مراجعة") — نضيف تحته خط عشان مايبقوش
   معتمدين على اللون بس للتمييز عن باقي النص (مطلوب لضعاف البصر) */
.mz-content.mz-article a {
    text-decoration: underline;
    text-underline-offset: 2px;
}