/* ════════════════════════════════════════════════════════════════════
   brand-taxonomy.css — تصميم صفحة أرشيف الـ brand taxonomy
   نُقل من inline في taxonomy-brand.php للتخزين بالكاش.
   يعتمد على mobiles.css لتنسيق .m-page/.m-sidebar/.m-main.
   ════════════════════════════════════════════════════════════════════ */
/* منع التمرير الأفقي الناتج عن أي عنصر يفيض عرضياً، وضمان محاذاة الصفحة بشكل صحيح
   على كل الشاشات (موبايل/تابلت) *//* ══ Layout ══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {/* "تفكيك" التجميع البصري لـ aside/main على الموبايل والتابلت فقط،
       لإعادة ترتيب أقسامهما الداخلية بحرية ضمن نفس عمود الصفحة، دون
       أي تأثير على تخطيط الديسكتوب (الذي يبقى كما هو تمامًا خارج هذا الاستعلام) *//* الترتيب المطلوب: العنوان ← الترتيب/العدد ← البحث ← الشبكة (كل المقالات) ← تصفح حسب الماركة */
    .brand-grid           { order: 4; }
    .m-box--filters      { order: 6; }
    .m-box--subfilter    { order: 6; }
    /* بند 2026-07-24: "آخر أخبار البراند" كانت الوحيدة الناقصة من نظام
       الترتيب ده — فكانت بترجع لـ order:0 الافتراضي وتظهر أول الصفحة قبل
       العنوان نفسه. مكانها فورًا بعد قسم الفلترة (طلب صريح)، و"تصفح حسب
       الماركة" بقت آخر حاجة في السلسلة بدلها. */
    .m-brand-news         { order: 7; }
    .m-box--brandslist   { order: 8; }/* بما أن aside صار display:contents فقدت أبناؤه المباشرون أي تباعد بصري
       موروث منها، نعيد له تباعد سفلي فردي بدل المسافة الجماعية السابقة */

    .m-box--search,
    .m-box--filters,
    .m-box--subfilter,
    .m-brand-news,
    .m-box--brandslist {
        margin-bottom: 18px;
    }}/* يمنع عناصر المحتوى (نصوص طويلة، صور) من إجبار عمود الشبكة على التمدد
   خارج حدوده المخصصة — سبب شائع لانزياح الصفحة بصرياً وظهور تمرير أفقي خفي *//* ══ Sidebar Box ═════════════════════════════════════════════════════ *//* دارك مود — الصندوق */

.main-nav-dark .m-sidebar .m-box {
    background: #1e1e1e;
    border-color: #2e2e2e;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.main-nav-dark .m-sidebar .m-box-title {
    background: #111;
}/* ══ Search ══════════════════════════════════════════════════════════ */
.m-s-thumb {
    width: 40px; height: 40px; flex-shrink: 0;
    border-radius: 6px; overflow: hidden;
    background: #f5f5f5;
    display: flex; align-items: center; justify-content: center;
}/* دارك مود — بحث */

.main-nav-dark .m-search-inner input {
    background: #2a2a2a; border-color: #3a3a3a; color: #ddd;
}
.main-nav-dark .m-search-inner input:focus { border-color: #cc0000; background: #2a2a2a; }
.main-nav-dark .m-results { background: #1e1e1e; border-color: #333; }
.main-nav-dark .m-s-item { color: #ddd; border-bottom-color: #2a2a2a; }
.main-nav-dark .m-s-item:hover { background: #252525; }
.main-nav-dark .m-s-thumb { background: #2a2a2a; }/* ══ Sub-brand Filter ════════════════════════════════════════════════ */

.m-sub-filter { display: flex; flex-direction: column; gap: 2px; }

.m-sub-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: 8px;
    text-decoration: none; color: #444;
    font-size: 13px; font-weight: 500;
    transition: all 0.15s; position: relative;
}
.m-sub-item::before {
    content: '';
    width: 3px; height: 0;
    background: #cc0000;
    border-radius: 2px;
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    transition: height 0.2s;
}
.m-sub-item:hover { background: #f8f8f8; color: #222; padding-right: 16px; }
.m-sub-item:hover::before { height: 60%; }
.m-sub-item.active {
    background: linear-gradient(135deg, #cc0000, #ff3333);
    color: #fff; font-weight: 700;
    box-shadow: 0 3px 10px rgba(204,0,0,0.25);
}
.m-sub-item.active::before { display: none; }
.m-sub-label { flex: 1; }
.m-sub-count {
    font-size: 11px; font-weight: 700;
    background: rgba(0,0,0,0.07);
    color: #666;
    padding: 2px 8px; border-radius: 20px;
    min-width: 24px; text-align: center;
}
.m-sub-item.active .m-sub-count { background: rgba(255,255,255,0.2); color: #fff; }
.m-sub-divider {
    height: 1px; background: #f0f0f0;
    margin: 4px 0;
}/* دارك مود — فلتر */

.main-nav-dark .m-sub-item { color: #bbb; }
.main-nav-dark .m-sub-item:hover { background: #252525; color: #eee; }

/* ══ صندوق الفلترة (بند 2026-07-24، فورم موحّد — بند 2026-07-25،
   تحويل السعر/التقييم لقوائم منسدلة — بند 2026-07-28) ═══════════════ */
.m-filter-group { margin-bottom: 16px; }
.m-filter-group:last-child { margin-bottom: 0; }
.m-filter-label {
    display: block;
    font-size: 12px; font-weight: 700; color: #888;
    margin-bottom: 8px;
}

/* بند إصلاح ارتفاع select (2026-07-25): القالب الأب (jannah/_general.scss)
   بيفرض select{height:30px} على مستوى الموقع كله. القاعدة هنا أعلى تخصيصًا
   فبتغلب في الـpadding/border، لكن مفيش حد منها كان بيحدد height خاص بيها،
   فقيمة الـ30px القديمة كانت لسه سارية وبتقص النص جوه الصندوق (line-height
   الموروثة من نفس ملف الأب 23px، أعلى من المساحة المتاحة فعليًا جوه 30px
   بعد الـpadding/border). height:auto هنا بيلغي القيمة المفروضة ويخلي
   الارتفاع يتحسب طبيعي من المحتوى. */
.m-filter-select {
    width: 100%;
    height: auto;
    padding: 9px 10px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 13px; color: #333;
    background: #fafafa;
    box-sizing: border-box;
}
.m-filter-select:focus { border-color: #c62828; outline: none; background: #fff; }
.m-filter-form { display: flex; flex-direction: column; gap: 16px; }
.m-filter-check {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: #444; cursor: pointer;
}
.m-filter-check input { accent-color: #c62828; width: 15px; height: 15px; }
/* بند 2026-07-28: نفس ألوان أزرار "المزيد"/"قارن الآن" في الرئيسية وصفحة
   المقارنة — أحمر شفاف خفيف بدل الأسود الصلب، عشان هوية الموقع تبقى واحدة. */
.m-filter-apply {
    padding: 8px 14px;
    border: 1px solid rgba(198,40,40,.3);
    border-radius: 8px;
    background: rgba(198,40,40,.12); color: #c62828;
    font-size: 12.5px; font-weight: 700;
    cursor: pointer; transition: background 0.15s;
}
.m-filter-apply:hover { background: rgba(198,40,40,.2); color: #c62828; }
.m-filter-reset {
    display: block;
    margin-top: 14px;
    text-align: center;
    font-size: 12px; font-weight: 700;
    color: #c62828; text-decoration: none;
}
.m-filter-reset:hover { text-decoration: underline; }

/* ══ ترتيب النتائج — شريط الأدوات ══════════════════════════════════════ */
.m-toolbar-sort { display: flex; align-items: center; gap: 8px; }
.m-sort-label { font-size: 12.5px; color: #888; white-space: nowrap; }
.m-toolbar-sort select {
    height: auto; /* نفس إصلاح select{height:30px} بتاع القالب الأب فوق */
    padding: 7px 10px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    font-size: 12.5px; color: #333;
    background: #fff;
}
.m-toolbar-sort select:focus { border-color: #cc0000; outline: none; }

/* دارك مود — صندوق الفلترة وقايمة الترتيب */
.main-nav-dark .m-filter-label   { color: #999; }
.main-nav-dark .m-filter-select,
.main-nav-dark .m-toolbar-sort select {
    background: #1e1e1e; border-color: #333; color: #ddd;
}
.main-nav-dark .m-filter-check   { color: #bbb; }
.main-nav-dark .m-filter-apply   { background: #2a2a2a; }
.main-nav-dark .m-sort-label     { color: #777; }
html.dark-skin .m-filter-label   { color: #999; }
html.dark-skin .m-filter-select,
html.dark-skin .m-toolbar-sort select {
    background: #1e1e1e; border-color: #333; color: #ddd;
}
html.dark-skin .m-filter-check   { color: #bbb; }
html.dark-skin .m-filter-apply   { background: #2a2a2a; }
html.dark-skin .m-sort-label     { color: #777; }
.main-nav-dark .m-sub-count { background: rgba(255,255,255,0.08); color: #999; }
.main-nav-dark .m-sub-divider { background: #2e2e2e; }/* ══ Browse by Brand (تصفح حسب الماركة) ════════════════════════════════ */
/* بند 2026-07-28: نفس أحمر أزرار "المزيد" في الرئيسية بدل التدرّج الأحمر
   الصريح، عشان هوية الموقع تبقى واحدة. */
.m-brands-list a.active {
    background: rgba(198,40,40,.12);
    color: #c62828; font-weight: 700;
    box-shadow: none;
}/* دارك مود — تصفح حسب الماركة */

.main-nav-dark .m-brands-list a { color: #bbb; }
.main-nav-dark .m-brands-list a:hover { background: #252525; color: #eee; }/* ══ Brand Header ════════════════════════════════════════════════════ */

.m-brand-header {
	background-color: var(--main-nav-background);
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 18px;
    display: flex; flex-direction: column; gap: 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.m-brand-top {
    display: flex; align-items: center; gap: 18px;
}
.m-brand-logo {
    width: 76px; height: 76px; flex-shrink: 0;
    background: #f7f7f7; border: 1px solid #eee;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center; padding: 10px;
}
.m-brand-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.m-brand-initial { font-size: 28px; font-weight: 800; color: #ccc; }
.m-brand-info h1 { margin: 0; font-size: 20px; font-weight: 800; color: #1a1a1a; }
.m-brand-description { font-size: 13px; line-height: 1.7; color: #555; margin: 0 0 8px; }
.m-brand-description p { margin: 0 0 8px; }
.m-brand-description p:last-child { margin-bottom: 0; }/* دارك مود — header */

.main-nav-dark .m-brand-header { background: #1e1e1e; border-color: #2e2e2e; }
.main-nav-dark .m-brand-logo   { background: #252525; border-color: #333; }
.main-nav-dark .m-brand-info h1 { color: #eee; }
.main-nav-dark .m-brand-description { color: #999; }/* ══ Toolbar ═════════════════════════════════════════════════════════ *//* دارك مود — toolbar */

.main-nav-dark .m-toolbar-count        { color: #666; }
.main-nav-dark .m-toolbar-count strong { color: #ccc; }
.main-nav-dark .m-sort-btn { background: #1e1e1e; border-color: #333; color: #999; }
.main-nav-dark .m-sort-btn:hover  { border-color: #cc0000; color: #cc0000; }
.main-nav-dark .m-sort-btn.active { background: #cc0000; border-color: #cc0000; color: #fff; }/* ══ Phone Card ══════════════════════════════════════════════════════ */

/* بند 2026-07-25: نفس نظام أعمدة شبكة .m-archive-grid بالحرف (صفحة "أحدث
   الموبايلات" /mobiles/، mobiles.css) — 4 أعمدة ديسكتوب / 3 تابلت / عمودين
   موبايل — بدل نظام الأعمدة الأوسع اللي كان هنا (3/2 مع استثناء تابلت خاص)،
   طلب صريح إن كارت صفحة البراند يبقى بنفس *مقاس* كارت أرشيف الموبايلات
   (بدون أي تغيير في التصميم نفسه — الألوان/تأثير اللمعة/الهوفر باقين
   زي ما هم بالكامل، الأعمدة الأكتر هي اللي بتصغّر الكارت). القاعدة التابلت
   الخاصة (900-560px) اللي كانت هنا (بند 2026-07-19) بقت كود ميت — نطاق
   الـ700-1100px هنا أصلًا بيدّي 3 أعمدة زي ما كانت بتعمل، فاتشالت. */
.brand-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
}
@media (max-width: 1100px) { .brand-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }}
@media (max-width: 700px)  { .brand-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }}

.m-card {
    position: relative;
    background: #fff;
    border: 1px solid #efefef;
    border-radius: 12px; overflow: hidden;
    text-decoration: none; color: #333;
    display: flex; flex-direction: column;
    transition: box-shadow 0.2s, transform 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.m-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    transform: translateY(-3px);
}/* ✨ تأثير اللمعة العابرة (Shine) */

.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-card:hover::after {
    animation: m-brand-shine .85s ease;
}
@keyframes m-brand-shine {
    0%   { left: -75%; opacity: 0; }
    20%  { opacity: 1; }
    100% { left: 125%; opacity: 0; }}
.m-card-thumb {
    aspect-ratio: 1/1;
    background: #ffffff;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.m-card-thumb img {
    /* بند 2026-07-25: padding نزل من 14px لـ10px — نفس قيمة .m-archive-thumb
       img (مقاسات كارت أحدث الموبايلات)، عشان الصورة تاخد نفس النسبة من
       مساحة الكارت في الاتنين. */
    width: 100%; height: 100%; object-fit: contain;
    padding: 10px; transition: transform 0.3s;
}
.m-card:hover .m-card-thumb img { transform: scale(1.06); }
.m-card-thumb .m-card-no-img {
    color: #ddd;
}
.m-card-body {
    padding: 10px 12px 12px;
    display: flex; flex-direction: column; gap: 0;
    border-top: 1px solid #f5f5f5;
}
/* بند 2026-07-19 (صفحة /brand/{slug}/ — أرشيف البراند): كان العنوان بيتقص
   بعد سطرين بالضبط (-webkit-line-clamp:2) على المقاسات العريضة (تابلت/
   ديسكتوب)، وده بقى واضح ومزعج أكتر بعد تصغير الكارت لـ4 أعمدة (بند
   2026-07-25) — عناوين كتير بقت محتاجة أكتر من سطرين فعليًا وبتتقص نص كلمة.
   بند 2026-07-25 (إزالة القص نهائيًا): طلب صريح إن العنوان يظهر كامل دايمًا
   (سطرين أو 3 حسب الطول، بدون أي قص)، على كل المقاسات — مش بس تحت 560px
   زي ما كان. "نمو رأسي مفتوح" فقط (عرض الكارت مش بيتأثر، محدد من عدد
   أعمدة .brand-grid). word-break إضافة أمان لمنع أي كلمة إنجليزية طويلة
   من عمل تجاوز أفقي. */
.m-card-title {
    font-size: 13px; font-weight: 700; color: #1a1a1a;
    line-height: 1.4;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ─── اسم الماركة فوق العنوان (بند 2026-07-25 — كارت أرشيف الموبايلات
   العام بس /mobiles/، مش صفحة براند واحد لأن الماركة معروفة ضمنيًا هناك) ─── */
.m-card-brand {
    display: block;
    color: #cc0000;
    font-size: 11px;
    font-weight: 700;
    margin-bottom: 4px;
    text-align: center;
}/* ══ Dark Mode — html.dark-skin ═════════════════════════════════════ */

html.dark-skin .m-sidebar .m-box {
    background: #1e1e1e;
    border-color: #2e2e2e;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
html.dark-skin .m-sidebar .m-box-title {
    background: #111;
}
html.dark-skin .m-search-inner input {
    background: #2a2a2a; border-color: #3a3a3a; color: #ddd;
}
html.dark-skin .m-search-inner input:focus {
    border-color: #cc0000;
}
html.dark-skin .m-results {
    background: #1e1e1e; border-color: #333;
}
html.dark-skin .m-s-item {
    color: #ddd; border-bottom-color: #2a2a2a;
}
html.dark-skin .m-s-item:hover   { background: #252525; }
html.dark-skin .m-s-thumb        { background: #2a2a2a; }
html.dark-skin .m-sub-item       { color: #bbb; }
html.dark-skin .m-sub-item:hover { background: #252525; color: #eee; }
html.dark-skin .m-sub-count      { background: rgba(255,255,255,0.08); color: #999; }
html.dark-skin .m-sub-divider    { background: #2e2e2e; }
html.dark-skin .m-brand-header   { background: #1e1e1e; border-color: #2e2e2e; }
html.dark-skin .m-brand-logo     { background: #252525; border-color: #333; }
html.dark-skin .m-brand-info h1  { color: #eee; }
html.dark-skin .m-brand-description { color: #999; }
html.dark-skin .m-toolbar-count         { color: #666; }
html.dark-skin .m-toolbar-count strong  { color: #ccc; }
html.dark-skin .m-sort-btn        { background: #1e1e1e; border-color: #333; color: #999; }
html.dark-skin .m-sort-btn:hover  { border-color: #cc0000; color: #cc0000; }
html.dark-skin .m-sort-btn.active { background: #cc0000; border-color: #cc0000; color: #fff; }
html.dark-skin .m-card            { background: #1e1e1e; border-color: #2a2a2a; }
html.dark-skin .m-card:hover      { box-shadow: 0 8px 24px rgba(0,0,0,0.4); }
html.dark-skin .m-card-thumb      { background: #252525; }
html.dark-skin .m-card-body       { border-top-color: #2a2a2a; }
html.dark-skin .m-card-title      { color: #ddd; }
html.dark-skin .m-pagination .page-numbers {
    background: #1e1e1e; border-color: #333; color: #888;
}
html.dark-skin .m-pagination .page-numbers.current,
html.dark-skin .m-pagination .page-numbers:hover {
    background: #cc0000; border-color: #cc0000; color: #fff;
}
html.dark-skin .m-empty-state { background: #1e1e1e; border-color: #2a2a2a; color: #555; }
html.dark-skin .m-page        { color: #ccc; }

/* بار تقييم الخبير جوه كارت الموبايل (بند 2026-07-24) — نفس مكوّن .ek-h2-bar
   المشترك (تعريفه الأساسي في expert-rating-badge.css)، هنا بس مسافة فوقه
   وتصغير رقمه عشان يتناسب مع كارت صغير (عنوانه 13px) بدل حجمه الأصلي المُعَدّ
   لجنب عنوان H2 كامل داخل متن المقالة.
   بند 2026-07-30: شفافية الـ65% بقت جزء من القاعدة الأساسية (.ek-h2-bar-fill
   في expert-rating-badge.css) بعد طلب توحيد شكل كل بارات/دوائر التقييم في
   الموقع — مفيش داعي لتكرارها هنا تاني. */
.m-card-rating { margin-top: 8px; }
.m-card-rating .ek-h2-bar-num { font-size: 12px; min-width: 18px; }
.m-card-rating .ek-h2-bar-track { height: 6px; }
html.dark-skin .m-card-rating .ek-h2-bar-track { background: #2a2a2a; }

/* سطر السعر تحت بار التقييم في الكارت (بند 2026-08-01) */
.m-card-price-numeric {
    margin-top: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #c62828;
}

/* Smart TV / شاشات كبيرة جدًا — نفس تخطيط الديسكتوب، تكبير القراءة فقط */
@media (min-width: 1900px) {
    .m-brand-info h1 { font-size: 26px; }
    .m-brand-description { font-size: 15px; }
    .m-card-title { font-size: 14px; }}

/* ══ قسم "آخر أخبار الماركة" (بند أخبار الماركات — 2026-07-22) ═══════════
   الكروت نفسها بتيجي جاهزة من news-archive.css (.news-hero-card وتوابعها —
   بيتحمّل على صفحات البراند، راجع functions.php). هنا بس: غلاف القسم
   وعنوانه وشبكته — بكلاس مستقل عن .news-hero-grid عشان قواعد شبكة الأرشيف
   (المبنية على عرض الصفحة الكامل 1280px) متتطبقش جوه عمود المحتوى الأضيق. */
.m-brand-news { margin-top: 28px; }
.m-brand-news-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}
.m-brand-news-title {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    color: #1a1a1a;
}
/* بند 2026-07-28: نفس تصميم/لون زرار "مزيد من..." المعتمد في الموقع
   (.m-more-brands-btn/.m-sb-more-btn في mobile-single-extra.css) — أحمر شفاف
   خفيف بدل كلمة+سهم بسيطة، اتساقًا مع باقي أزرار الموقع. نسخة مستقلة هنا
   (مش استدعاء الكلاس من الملف التاني) لأن mobile-single-extra.css مش
   متحمّل على صفحة البراند أصلًا — نفس مبدأ التكرار الخفيف المتّبع في باقي
   ملفات الـCSS الخاصة بكل صفحة. */
.m-brand-news-all {
    display: inline-block;
    background: rgba(198,40,40,.12);
    color: #c62828;
    border: 1px solid rgba(198,40,40,.3);
    padding: 6px 16px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: 0.2s;
}
.m-brand-news-all:hover {
    background: rgba(198,40,40,.2);
    color: #c62828;
}
.m-brand-news-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}
@media (max-width: 900px) {
    .m-brand-news-grid { grid-template-columns: repeat(2, 1fr); }
}
/* بند 2026-07-24: بتفضل عمودين حتى على أضيق شاشة، بدل الانهيار لعمود واحد —
   بالظبط زي معاملة قسم "آخر الأخبار" في الصفحة الرئيسية لنفس كارت الأخبار
   (.news-hero-card تحت .hp-post-grid في home.css)، اللي مالهوش نقطة انهيار
   لعمود واحد خالص. */
@media (max-width: 600px) {
    .m-brand-news-grid { gap: 10px; }
}

/* الوضع الليلي — نفس نمط باقي الصفحة */
html.dark-skin .m-brand-news-title { color: #ddd; }