/**
 * Evoiii Filter - CSS
 * ------------------------------------------------------------
 * الجزء الأول من هذا الملف (evoiii-gallery-*) منسوخ كما هو من
 * تصميم معرض التصنيفات المرفق حتى تكون نتائج الفلتر بنفس الشكل
 * البصري تماماً. الإضافات الخاصة بشريط الفلتر (evoiii-filter-*)
 * موجودة في نهاية الملف.
 * ------------------------------------------------------------
 * Evoiii Gallery - Enhanced Independent CSS
 * Version: 2.0.0
 * Based on YouVideo theme but enhanced
 * Works with ANY theme - Light & Dark mode ready
 * Class prefix: evoiii-gallery-
 */

/* ============================================================
   WRAPPER & HEADER
   ============================================================ */
.evoiii-gallery-wrapper {
    max-width: 1360px;
    margin: 0 auto;
    padding: 15px 8px;
    /* الخلفية البيضاء معطلة - محفوظة للاستخدام المستقبلي */
    /* background: #ffffff; */
    /* الخلفية السوداء مفعلة */
    background: #181818;
    border-radius: 5px;
}

.evoiii-gallery-header {
    padding: 0 8px;
    margin-bottom: 15px;
}

.evoiii-gallery-title {
    font-size: 18px;
    font-weight: 400;
    margin: 0 0 5px 0;
    /* اللون الأسود معطل - محفوظ للاستخدام المستقبلي */
    /* color: #222; */
    /* اللون الأبيض مفعل */
    color: #ffffff;
}

/* ============================================================
   SUBTITLE - HIDDEN (Browse all hidden via CSS)
   ============================================================ */
.evoiii-gallery-subtitle {
    
}

/* ============================================================
   GRID - 4 Columns
   ============================================================ */
.evoiii-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    /* margin: 0 -8px; تمت إزالته: القالب الأصلي (content-loop.php +
       .hentry.ht_grid_1_4) لا يستخدم أي تعويض بـ margin سالب هنا،
       فإبقاؤه كان يجعل صور صفحة الفلتر أقرب لحافة الصفحة بمقدار 8px
       عن صور "Latest Videos" الحقيقية (هامش 8px بدل 16px). حذفه
       يطابق الهامش تماماً: padding الحاوية (8px) + padding العنصر
       (8px) = 16px، تمامًا كما في القالب. */
}

/* ============================================================
   ITEM CARD
   ============================================================ */
.evoiii-gallery-item {
    padding: 0 8px;
    margin-bottom: 20px;
    position: relative;
    transition: all 0.3s ease;
}

.evoiii-gallery-link {
    display: block;
    position: relative;
    line-height: 0.5;
    text-align: center;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
}

.evoiii-gallery-link:hover {
    text-decoration: none !important;
    color: inherit !important;
}

/* ============================================================
   THUMBNAIL - 16:9
   ============================================================ */
.evoiii-gallery-thumbnail {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background: #2b2b2b;
    overflow: hidden;
    line-height: 0.5;
    margin-bottom: 5px;
}

.evoiii-gallery-thumbnail img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.3s ease-out 0s;
}

.evoiii-gallery-item:hover .evoiii-gallery-thumbnail img {
    transform: scale(1.1);
}

/* ============================================================
   BADGE (post count) - VISIBLE & LARGER
   ============================================================ */
.evoiii-gallery-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.75);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 4px;
    line-height: 1.4;
    z-index: 5;
    /* اللون الأسود معطل للاستخدام المستقبلي */
    /* color: #222; */
}

/* ============================================================
   PLAY BUTTON
   ============================================================ */
.evoiii-gallery-play {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    width: 28px;
    height: 28px;
    line-height: 25px;
    text-align: center;
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    z-index: 5;
}

.evoiii-gallery-item:hover .evoiii-gallery-play {
    opacity: 1;
    visibility: visible;
}

.evoiii-gallery-play:hover {
    background: #d8201d;
}

.evoiii-gallery-play svg {
    width: 16px;
    height: 16px;
    fill: #fff;
    vertical-align: middle;
}

/* ============================================================
   CONTENT - Title in center, larger, bold
   ============================================================ */
.evoiii-gallery-content {
    padding-top: 0;
    text-align: center;
}

.evoiii-gallery-item-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.evoiii-gallery-item-title a {
    /* اللون الأسود معطل - محفوظ للاستخدام المستقبلي */
    /* color: #222 !important; */
    /* اللون الأبيض مفعل */
    color: #ffffff !important;
    text-decoration: none !important;
}

.evoiii-gallery-item-title a:hover {
    color: #d8201d !important;
    text-decoration: none !important;
}

/* ============================================================
   META (post count under title) - HIDDEN via CSS
   ============================================================ */
.evoiii-gallery-meta {
    
}

/* ============================================================
   EMPTY STATE
   ============================================================ */
.evoiii-gallery-empty {
    text-align: center;
    padding: 40px 0;
    color: #ccc;
    font-size: 16px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet: 2 columns */
@media only screen and (min-width: 768px) and (max-width: 959px) {
    .evoiii-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: 1 column */
@media only screen and (max-width: 767px) {
    .evoiii-gallery-grid {
        grid-template-columns: 1fr;
    }
    
    .evoiii-gallery-wrapper {
        padding: 10px 4px;
    }
    
    .evoiii-gallery-item {
        padding: 0 4px;
    }
    
    .evoiii-gallery-title {
        font-size: 16px;
    }
    
    .evoiii-gallery-item-title {
        font-size: 16px;
    }
    
    .evoiii-gallery-badge {
        font-size: 14px;
        padding: 3px 10px;
        top: 8px;
        right: 8px;
    }
}

/* ============================================================
   DARK MODE - Active (background #181818)
   ============================================================ */
@media (prefers-color-scheme: dark) {
    .evoiii-gallery-wrapper {
        background: #181818;
    }
    
    .evoiii-gallery-title {
        color: #ffffff;
    }
    
    .evoiii-gallery-item-title a {
        color: #ffffff !important;
    }
    
    .evoiii-gallery-item-title a:hover {
        color: #d8201d !important;
    }
    
    .evoiii-gallery-thumbnail {
        background: #2b2b2b;
    }
    
    .evoiii-gallery-empty {
        color: #ccc;
    }
    
    .evoiii-gallery-badge {
        background: rgba(0, 0, 0, 0.8);
        color: #ffffff;
    }
}

/* ============================================================
   LIGHT MODE - DISABLED (kept for future use)
   ============================================================ */
/*
@media (prefers-color-scheme: light) {
    .evoiii-gallery-wrapper {
        background: #ffffff;
    }
    
    .evoiii-gallery-title {
        color: #222;
    }
    
    .evoiii-gallery-item-title a {
        color: #222 !important;
    }
    
    .evoiii-gallery-item-title a:hover {
        color: #d8201d !important;
    }
    
    .evoiii-gallery-thumbnail {
        background: #e0e0e0;
    }
    
    .evoiii-gallery-empty {
        color: #666;
    }
    
    .evoiii-gallery-badge {
        background: rgba(0, 0, 0, 0.75);
        color: #fff;
    }
}
*/

/* ============================================================
   REUSABLE - For related posts, etc.
   ============================================================ */
.evoiii-gallery-related .evoiii-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
}

@media only screen and (max-width: 959px) {
    .evoiii-gallery-related .evoiii-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media only screen and (max-width: 767px) {
    .evoiii-gallery-related .evoiii-gallery-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   UTILITY CLASSES
   ============================================================ */
.evoiii-gallery-text-center {
    text-align: center;
}

.evoiii-gallery-mb-20 {
    margin-bottom: 20px;
}

.evoiii-gallery-mt-20 {
    margin-top: 20px;
}

.evoiii-gallery-p-20 {
    padding: 20px;
}

.evoiii-gallery-clearfix:after {
    content: '';
    display: table;
    clear: both;
}

/* ============================================================
   PAGINATION
   ------------------------------------------------------------
   Default styling modeled after the theme's own pagination look
   (numbered boxes, red current page, dark "Next" button). If you
   send over the theme's pagination CSS this can be refined to
   match pixel-for-pixel.
   ============================================================ */
.evoiii-gallery-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 25px 0 10px;
    padding: 0 8px;
}

.evoiii-gallery-pagination a,
.evoiii-gallery-pagination span.evoiii-gallery-page-num,
.evoiii-gallery-pagination .evoiii-gallery-next {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    background: #2b2b2b;
    color: #ffffff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    border-radius: 3px;
    text-decoration: none !important;
    transition: background 0.2s ease;
}

.evoiii-gallery-pagination a:hover,
.evoiii-gallery-pagination .evoiii-gallery-next:hover {
    background: #3a3a3a;
    color: #ffffff !important;
}

.evoiii-gallery-pagination .evoiii-gallery-page-num.current {
    background: #d8201d;
    color: #ffffff;
    cursor: default;
}

.evoiii-gallery-pagination .evoiii-gallery-page-dots {
    color: #888;
    padding: 0 6px;
    font-weight: 700;
}

@media only screen and (max-width: 767px) {
    .evoiii-gallery-pagination a,
    .evoiii-gallery-pagination span.evoiii-gallery-page-num,
    .evoiii-gallery-pagination .evoiii-gallery-next {
        min-width: 32px;
        height: 32px;
        padding: 0 10px;
        font-size: 13px;
    }
}
/* ============================================================
   EVOIII FILTER - شريط الفلتر (بحث + Dropdowns + زر Filter)
   ============================================================ */
.evoiii-filter-wrapper {
    max-width: 1360px;
    margin: 0 auto;
    background: var(--evoiii-bg, #181818);
    border-radius: 5px;
    /*
     * لا نضيف أي padding أفقي هنا: هذا الغلاف يجلس مباشرة داخل
     * main.site-main الحقيقي من القالب، والذي يوفر بالفعل
     * padding:15px 8px (نفس القيمة المستخدمة في "Latest Videos").
     * إضافة padding إضافي هنا كانت تُضاعف المسافة اليسرى/اليمنى
     * (8+8=16 بدل 8 فقط)، وهو ما ظهر بوضوح كفارق حقيقي بالبكسل
     * (32px في صفحة الفلتر مقابل 16px في Latest Videos) عند قياس
     * صور الشاشة.
     */
}

.evoiii-filter-bar {
    background: transparent;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 15px;
    /* صف واحد يضم عنصرين رئيسيين فقط الآن:
       1) .evoiii-filter-controls-row (الـ Dropdowns، عنصر واحد
          display:contents فتصطف عناصره الداخلية فرادى).
       2) .evoiii-filter-search-cluster (مربع البحث + زر Filter +
          خيار Live) كعنصر flex واحد متلازم، بحيث عند ضيق الشاشة
          يفيض هو بمجموعه إلى سطر إضافي (بفضل wrap-reverse يظهر هذا
          السطر بصرياً فوق صف الـ Dropdowns) بدل أن ينفصل مربع
          البحث عن الزر/الخيار كما كان سابقاً. */
    display: flex;
    flex-wrap: wrap-reverse;
    align-items: center;
    gap: 15px; /* يطابق margin-right:15px بين عناصر #primary-menu li بالقالب */
}

/* إلغاء الصندوق الوسيط الخاص بالـ Dropdowns حتى تصبح عناصره
   الداخلية أبناء مباشرين لـ .evoiii-filter-bar ويشتركوا في نفس صف
   الـ flex أعلاه (تصطف فرادى، بعكس مجموعة البحث المتلازمة). */
.evoiii-filter-controls-row {
    display: contents;
}

.evoiii-filter-dropdown {
    order: 1;
    flex: 0 0 auto;
    position: relative;
}

/* ------------------------------------------------------------
   مجموعة متلازمة: مربع البحث + زر Filter + خيار Live.
   عنصر flex واحد داخل evoiii-filter-bar (وليس contents)، فينتقل
   بمجموعه كوحدة واحدة عند الحاجة للف بدل أن تتوزع عناصره فرادى.
   order أكبر من الـ Dropdowns (order:1) ليأتي بعدها في ترتيب
   الملء، فيكون هو من يفيض إلى السطر العلوي عند ضيق المساحة.
   ------------------------------------------------------------ */
.evoiii-filter-search-cluster {
    order: 99;
    flex: 1 1 320px;
    min-width: 260px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.evoiii-filter-search-input {
    width: auto;
    box-sizing: border-box !important;
    height: 30px !important; /* نفس ارتفاع باقي عناصر شريط الفلتر (dropdown/زر) */
    line-height: 30px !important;
    padding: 0 16px !important;
    margin: 0;
    font-size: 14px;
    border: none !important;
    border-radius: 4px;
    background: #2b2b2b;
    color: #fff;
    -webkit-appearance: none;
    appearance: none;
    vertical-align: middle;
    /* يكبر ليأخذ كل المساحة المتبقية داخل المجموعة */
    flex: 1 1 auto;
    min-width: 140px;
}

.evoiii-filter-search-input::placeholder {
    color: #999;
}

.evoiii-filter-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.evoiii-filter-dropdown-toggle {
    background: #2b2b2b;
    color: #fff;
    border: none;
    border-radius: 3px; /* كان 4px */
    padding: 0 8px; /* كان 10px 14px */
    height: 30px; /* يطابق line-height:30px لعناصر #primary-menu li a بالقالب */
    line-height: 30px;
    cursor: pointer;
    font-size: 14px; /* مطابق أصلاً لعناصر القائمة العلوية */
    font-weight: 400;
    white-space: nowrap;
    transition: background 0.2s ease;
}

.evoiii-filter-dropdown-toggle:hover {
    background: #3a3a3a;
}

/* خلفية مختلفة (نفس أخضر خيار Live) لأي قائمة بداخلها عنصر واحد
   مختار على الأقل، بحيث يتضح بصرياً للزائر أي القوائم عليها فلتر
   نشط حالياً دون الحاجة لفتحها. */
.evoiii-filter-dropdown.has-selected .evoiii-filter-dropdown-toggle {
    background: #2e9e4f;
}

.evoiii-filter-dropdown.has-selected .evoiii-filter-dropdown-toggle:hover {
    background: #278a44;
}

.evoiii-filter-dropdown-panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    inset-inline-start: 0;
    background: #2b2b2b;
    border-radius: 4px;
    padding: 10px;
    min-width: 200px;
    z-index: 20;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* عمود واحد رأسي إجباري (!important احتياطًا من أي CSS آخر
   قادم من الإضافة نفسها يجعلها تصطف أفقيًا) */
.evoiii-filter-dropdown.open .evoiii-filter-dropdown-panel {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
}

/* مربع البحث اللايف داخل القائمة المنسدلة (اختياري عبر الإعدادات) */
.evoiii-filter-dropdown-search {
    box-sizing: border-box;
    width: 100%;
    height: 28px;
    line-height: 28px;
    padding: 0 8px;
    margin-bottom: 8px;
    border: none;
    border-radius: 3px;
    background: #1c1c1c;
    color: #fff;
    font-size: 13px;
    flex: 0 0 auto;
}

.evoiii-filter-dropdown-search::placeholder {
    color: #888;
}

/* مفتاح AND/OR الخاص بكل تصنيف (يظهر فقط عند terms_relation = user_choice) */
.evoiii-filter-relation-toggle {
    display: flex;
    gap: 4px;
    margin-bottom: 8px;
    flex: 0 0 auto;
}

.evoiii-filter-relation-btn {
    flex: 1 1 0;
    background: #1c1c1c;
    color: #999;
    border: none;
    border-radius: 3px;
    height: 30px; /* نفس ارتفاع Search/Live Filter/Clear في الشريط العلوي */
    line-height: 30px;
    padding: 0;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.evoiii-filter-relation-btn:hover {
    background: #262626;
}

.evoiii-filter-relation-btn.is-active {
    background: #d8201d;
    color: #fff;
}

/* قائمة العناصر نفسها هي من يتمرّر (Scroll) عند تجاوز الارتفاع،
   وليس الـ panel بالكامل، حتى يبقى مربع البحث ومفتاح AND/OR
   ثابتين في الأعلى دائماً. */
.evoiii-filter-checkbox-list {
    max-height: 220px;
    overflow-y: auto;
    flex: 0 1 auto;
}

.evoiii-filter-checkbox-item {
    display: block !important;
    width: 100% !important;
    color: #fff;
    font-size: 13px;
    padding: 4px 0;
    cursor: pointer;
    white-space: nowrap;
}

/* إخفاء عنصر غير مطابق لبحث القائمة المنسدلة. specificity أعلى من
   القاعدة أعلاه (كلاسان بدل واحد) فتتغلّب عليها رغم أن كلتيهما
   !important. نستخدم كلاساً لا inline style لأن .toggle()/.hide()
   في jQuery يضعان display:none كـ inline، وهو ما كانت القاعدة
   أعلاه تُبطله دائماً بصرف النظر عن الترتيب. */
.evoiii-filter-checkbox-item.is-search-hidden {
    display: none !important;
}

.evoiii-filter-checkbox-item input {
    margin-inline-end: 6px;
}

.evoiii-filter-no-match {
    color: #888;
    font-size: 13px;
    padding: 6px 0;
    margin: 0;
    white-space: normal;
}

/* عنصر لا يُرجع أي نتيجة لو أُضيف للاختيار الحالي (تضييق تبادلي
   بين التصنيفات المختلفة، أو تضييق ذاتي داخل نفس التصنيف عند
   AND) — يبقى ظاهراً لكن باهتاً وغير قابل للاختيار، دون أن يُخفى
   بالكامل حتى يفهم الزائر لماذا لا يمكنه تحديده. */
.evoiii-filter-checkbox-item.is-unavailable {
    opacity: 0.35;
}

.evoiii-filter-checkbox-item.is-unavailable .evoiii-filter-checkbox-item-text,
.evoiii-filter-checkbox-item input:disabled {
    cursor: not-allowed;
}

/* ------------------------------------------------------------
   خيار Live: دائم الظهور بجانب زر Filter (لا أيقونة ترس بعد الآن)،
   بنفس شكل/خلفية باقي عناصر الشريط (dropdown/زر)، ويتحول للون
   الأخضر عند التفعيل. الـ checkbox الفعلي مخفي بصرياً، ونعرض بدلاً
   منه نقطة صغيرة (dot) تتحول للأبيض عند التفعيل كمؤشر بصري.
   ------------------------------------------------------------ */
.evoiii-filter-live-toggle {
    background: #2b2b2b;
    color: #fff;
    border-radius: 3px;
    height: 30px;
    padding: 0 12px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
    transition: background 0.2s ease;
    flex: 0 0 auto;
}

.evoiii-filter-live-toggle:hover {
    background: #3a3a3a;
}

/* حالة التفعيل: خلفية خضراء (نفس الفكرة السابقة لزر "Live" لكن
   الآن على الخيار نفسه بدل الزر، والزر يختفي بدلاً من ذلك). */
.evoiii-filter-live-toggle.is-checked {
    background: #2e9e4f;
}

.evoiii-filter-live-toggle.is-checked:hover {
    background: #2e9e4f;
}

/* الـ checkbox الحقيقي مخفي بصرياً لكن يبقى قابلاً للوصول
   (accessible) عبر لوحة المفاتيح وقارئات الشاشة. */
.evoiii-filter-live-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.evoiii-filter-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #888;
    flex: 0 0 auto;
    transition: background 0.2s ease;
}

.evoiii-filter-live-toggle.is-checked .evoiii-filter-live-dot {
    background: #fff;
}

/* ------------------------------------------------------------
   زر Filter
   ------------------------------------------------------------ */
.evoiii-filter-submit-button {
    background: #d8201d;
    color: #fff;
    border: none;
    border-radius: 3px; /* كان 4px */
    padding: 0 14px; /* كان 10px 20px */
    height: 30px; /* نفس ارتفاع عناصر #primary-menu li بالقالب */
    line-height: 30px;
    font-size: 14px;
    font-weight: 700; /* أبقيناه bold لتمييزه كزر إجراء (CTA)، غيّرها لـ 400 لو تبيها مطابقة 100% */
    cursor: pointer;
    transition: background 0.2s ease;
    flex: 0 0 auto;
}

.evoiii-filter-submit-button:hover {
    background: #b81714;
}

/* عند تفعيل Live (نمط "يختار الزائر") يُخفى زر Filter تماماً لأنه
   لا حاجة له بعد أن أصبحت الفلترة تحدث تلقائياً. */
.evoiii-filter-submit-button.is-hidden {
    display: none;
}

/* زر Clear: بنفس شكل/خلفية باقي عناصر الشريط (وليس بلون بارز مثل
   زر Filter) حتى يبقى إجراءً ثانوياً بصرياً، لا ينافس زر الإجراء
   الأساسي. */
.evoiii-filter-clear-button {
    background: #2b2b2b;
    color: #fff;
    border: none;
    border-radius: 3px;
    padding: 0 14px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    transition: background 0.2s ease;
    flex: 0 0 auto;
    white-space: nowrap;
}

.evoiii-filter-clear-button:hover {
    background: #3a3a3a;
}

.evoiii-filter-results-container.evoiii-filter-loading {
    opacity: 0.5;
    pointer-events: none;
}

/* شارة مدة الفيديو: أصغر من شارة العدد، وفي الزاوية السفلى بدل العلوية */
.evoiii-filter-duration-badge {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 3px;
    z-index: 5;
}

/* شارة عدد العناصر (evoiii-gallery-badge) غير مستخدمة في نتائج الفلتر */
.evoiii-filter-results .evoiii-gallery-badge {
    display: none;
}

/*
 * .evoiii-gallery-wrapper (المستخدمة أيضاً كـ .evoiii-filter-results)
 * مصممة أصلاً لتحاكي صندوق .site-main بالكامل (خلفية #181818 +
 * padding:15px 8px + border-radius) لاستخدامها في سياقات أخرى
 * (كمعرض التصنيفات) حيث لا تكون متداخلة داخل site-main حقيقي.
 * لكن هنا، داخل صفحة الفلتر، هي بالفعل متداخلة داخل site-main
 * الحقيقي من القالب (نفس الخلفية ونفس الـ padding). تكرار هذا
 * الصندوق كان يُضيف padding أفقي إضافي (8px زائدة على كل جانب)
 * وخلفية سوداء متداخلة لا فائدة بصرية منها (نفس اللون تماماً).
 * نُلغيها هنا فقط ضمن سياق نتائج الفلتر تحديداً.
 */
.evoiii-filter-results {
    background: transparent;
    padding: 0;
    border-radius: 0;
    max-width: none;
    margin: 0;
}

.evoiii-filter-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #2b2b2b, #3a3a3a);
}

/* ============================================================
   RESULTS APPEARANCE (driven by the plugin settings)
   ------------------------------------------------------------
   Values come from CSS variables printed inline on
   .evoiii-filter-wrapper (Settings -> Appearance):
   --evoiii-bg, --evoiii-title-color, --evoiii-title-size,
   --evoiii-title-weight, --evoiii-title-align.
   The title is fully isolated from the theme: `all: unset` wipes
   whatever the theme applies to h2/a (backgrounds, gradients,
   borders, padding, margins, fonts, shadows) and only the values
   below are applied.
   ============================================================ */
.evoiii-filter-wrapper .evoiii-filter-results .evoiii-gallery-item {
    /* vertical gap between rows (kept small on purpose) */
    margin-bottom: var(--evoiii-item-gap, 12px);
}

.evoiii-filter-wrapper .evoiii-filter-results .evoiii-gallery-empty {
    color: var(--evoiii-title-color, #ffffff);
    opacity: 0.7;
}

.evoiii-filter-wrapper .evoiii-filter-results .evoiii-gallery-content {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-align: var(--evoiii-title-align, left) !important;
}

.evoiii-filter-wrapper .evoiii-filter-results .evoiii-gallery-item-title {
    all: unset !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    color: var(--evoiii-title-color, #ffffff) !important;
    font-size: var(--evoiii-title-size, 16px) !important;
    font-weight: var(--evoiii-title-weight, 400) !important;
    line-height: 1.3 !important;
    text-align: var(--evoiii-title-align, left) !important;
    text-decoration: none !important;
}

.evoiii-filter-wrapper .evoiii-filter-results .evoiii-gallery-item-title a {
    all: unset !important;
    cursor: pointer !important;
    color: var(--evoiii-title-color, #ffffff) !important;
    text-decoration: none !important;
}

.evoiii-filter-wrapper .evoiii-filter-results .evoiii-gallery-item-title a:hover {
    color: #d8201d !important;
}

/* Decorative bars/arrows some themes add via pseudo-elements. */
.evoiii-filter-wrapper .evoiii-filter-results .evoiii-gallery-content::before,
.evoiii-filter-wrapper .evoiii-filter-results .evoiii-gallery-content::after,
.evoiii-filter-wrapper .evoiii-filter-results .evoiii-gallery-item-title::before,
.evoiii-filter-wrapper .evoiii-filter-results .evoiii-gallery-item-title::after,
.evoiii-filter-wrapper .evoiii-filter-results .evoiii-gallery-item-title a::before,
.evoiii-filter-wrapper .evoiii-filter-results .evoiii-gallery-item-title a::after {
    content: none !important;
    display: none !important;
}

/* ------------------------------------------------------------
   Star rating under the title (Settings -> Appearance -> Rating).
   Two stacked layers of stars: a grey one, and a gold one clipped to
   the rating percentage. Follows the title alignment.
   ------------------------------------------------------------ */
.evoiii-filter-wrapper .evoiii-filter-results .evoiii-filter-rating {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    line-height: 1;
    text-align: var(--evoiii-title-align, left);
}

.evoiii-filter-wrapper .evoiii-filter-results .evoiii-filter-stars {
    position: relative;
    display: inline-block;
    direction: ltr;
    unicode-bidi: isolate;
    font-size: var(--evoiii-star-size, 18px);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.evoiii-filter-wrapper .evoiii-filter-results .evoiii-filter-stars-bg {
    display: block;
    color: #777777;
}

.evoiii-filter-wrapper .evoiii-filter-results .evoiii-filter-stars-fg {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    color: #f5b301;
}

.evoiii-filter-wrapper .evoiii-filter-results .evoiii-filter-rating-text {
    display: inline-block;
    margin-inline-start: 6px;
    /* scales with the star size, never below 12px */
    font-size: max(12px, calc(var(--evoiii-star-size, 18px) * 0.7));
    line-height: 1;
    vertical-align: middle;
    color: var(--evoiii-title-color, #ffffff);
    opacity: 0.7;
}

@media only screen and (max-width: 767px) {
    .evoiii-filter-controls-row {
        gap: 8px;
    }

    .evoiii-filter-dropdown-toggle,
    .evoiii-filter-submit-button,
    .evoiii-filter-clear-button,
    .evoiii-filter-live-toggle {
        font-size: 13px;
        /* padding أفقي فقط (بدون عمودي) حتى لا يتجاوز الارتفاع
           الموحد 30px المضبوط أصلاً لكل عناصر الشريط بما فيها
           مربع البحث - وهذا هو سبب اختلاف الارتفاع الذي كان ملاحظاً
           سابقاً في padding الرأسي هنا. */
        padding: 0 10px;
    }

    .evoiii-filter-search-cluster {
        min-width: 220px;
        gap: 6px;
    }

    .evoiii-filter-actions {
        gap: 6px;
    }
}

/* ============================================================
   [تجريبي] العمود الجانبي + عنوان "Filter"
   ------------------------------------------------------------
   هذان الأمران (ظهور Sidebar في صفحة الفلتر، وعنوان "Filter"
   غير مطابق لعنوان "Latest Videos") مصدرهما قالب/ثيم الصفحة
   نفسها (PHP/HTML) وليس ملفي evoiii-filter.css / style.css. لا
   أملك كود ذلك القالب، لذلك القواعد أدناه تخمين بأسماء أصناف
   شائعة في قوالب ووردبريس (:has يعمل على أغلب المتصفحات الحديثة).

   الحل الأدق: من لوحة تحكم ووردبريس، افتح صفحة "Filter" في
   المحرر وابحث عن خاصية "Page Attributes / قالب الصفحة" واختر
   نفس القالب المستخدم في صفحة "Latest Videos" (عادة يسمى
   Full Width / No Sidebar). هذا سيحل مشكلة العمود الجانبي نهائيًا
   دون الحاجة لأي CSS.

   إن لم يتوفر هذا الخيار، افتح Inspect Element على العمود
   الجانبي وعلى عنوان Filter وأرسل لي الأصناف (class) الحقيقية
   لأضبط القواعد بدقة بدل التخمين.
   ============================================================ */
body:has(.evoiii-filter-wrapper) #secondary,
body:has(.evoiii-filter-wrapper) .widget-area,
body:has(.evoiii-filter-wrapper) aside.sidebar,
body:has(.evoiii-filter-wrapper) .sidebar {
    display: none !important;
}

/*
 * ملاحظة: كانت هذه القاعدة سابقاً تجبر .site-content (وهي نفسها
 * #content التي تحمل أيضاً كلاس .container بعرض ثابت 1360px
 * ومتمركز بـ margin:0 auto) على max-width:100%، فتُلغي بذلك تمركز
 * الصفحة بأكملها (وليس فقط #primary)، مما جعل خلفية صفحة الفلتر
 * تمتد حتى حافتي الشاشة تماماً بعكس صفحة "Latest Videos" التي تبقي
 * الهامش الرمادي (لون الـ body) على الجانبين. بعد تعيين قالب
 * full-width.php الحقيقي للصفحة (نفس قالب "Latest Videos" تماماً)،
 * أصبح #primary يحصل فعلياً على كلاس full-width من الثيم نفسه دون
 * أي حاجة لهذا التخمين، لذا تمت إزالته بالكامل لتفادي كسر تمركز
 * .container الأصلي.
 */

body:has(.evoiii-filter-wrapper) .entry-title,
body:has(.evoiii-filter-wrapper) .page-title {
    font-size: 18px !important;
    font-weight: 400 !important;
    color: #ffffff !important;
    margin: 0 0 5px 0 !important;
}

/* ------------------------------------------------------------
   تصحيح إضافي: صفحة الفلتر (WP Page = singular) تصطدم بقاعدة
   ".single .site-main / .wp-singular .site-main { padding:15px }"
   من ملف style.css الرئيسي، بينما "Latest Videos" (أرشيف/الرئيسية،
   ليست singular) تستخدم القاعدة الأساسية "padding:15px 8px".
   هذا الفرق (15px يمين/يسار بدل 8px) هو ما يزيح حواف الشبكة عن
   حافة الصندوق الأسود مقارنة بصفحة المقالات الحقيقية. نعيدها هنا
   لنفس القيمة الأصلية 15px 8px داخل سياق صفحة الفلتر فقط.
   ------------------------------------------------------------ */
body:has(.evoiii-filter-wrapper) .site-main {
    padding: 15px 8px !important;
}

/* الغلاف الإضافي .single-wrap (يظهر فقط في صفحات WP Page العادية
   التي تحجز مساحة للـ Sidebar) لا يوجد له أي تعريف CSS خاص به في
   القالب، لكن حتى لا يبقى أي احتمال لتأثيره على العرض/التموضع
   (float/width) نجبره هنا أيضاً على التمدد الكامل، تماماً كما
   يحدث في صفحة "Latest Videos" (full-width) التي لا تحتوي على هذا
   الغلاف أصلاً. */
body:has(.evoiii-filter-wrapper) .single-wrap {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    display: block !important;
}

/* إصلاح خلل منفصل: قاعدة عامة في style.css الرئيسي
   ".entry-content input[type=\"text\"], input[type=\"search\"] { width:300px }"
   لها specificity أعلى من ".evoiii-filter-search-input" فتجبر مربع
   البحث على عرض ثابت 300px بدل التمدد الطبيعي داخل المجموعة. */
body:has(.evoiii-filter-wrapper) .evoiii-filter-search-input {
    width: auto !important;
}