/* ════ Brands Page ════ */
.lxb-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.lxb-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 30px;
    font-weight: 700;
    color: var(--text-h);
    margin-bottom: 6px;
}
@media (max-width: 640px) { .lxb-title { font-size: 24px; } }
.lxb-sub { font-size: 13.5px; color: var(--text-m); }
.lxb-count {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-primary);
    background: var(--brand-primary)12;
    padding: 6px 16px;
    border-radius: var(--r-full);
    border: 1px solid var(--brand-primary)25;
    white-space: nowrap;
    transition: opacity .15s;
}

.lxb-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--bg-card);
    border: 1.5px solid var(--border);
    border-radius: var(--r-md);
    padding: 12px 16px;
    margin-bottom: 26px;
    max-width: 420px;
    transition: border-color .2s;
}
.lxb-search-wrap:focus-within { border-color: var(--brand-primary); }
.lxb-search-wrap input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13.5px;
    font-family: 'Tajawal', sans-serif;
    color: var(--text-h);
}
.lxb-search-wrap input::placeholder { color: var(--text-m); }
.lxb-search-wrap i { color: var(--text-m); width: 16px; height: 16px; flex-shrink: 0; }
.lxb-clear { display: flex; color: var(--text-m); text-decoration: none; flex-shrink: 0; }
.lxb-clear:hover { color: var(--brand-primary); }
.lxb-clear i { width: 15px; height: 15px; }

.lxb-results { transition: opacity .15s; }

.lxb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
}
@media (max-width: 640px) {
    .lxb-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
}

.lxb-no-results, .lxb-empty {
    text-align: center;
    padding: 70px 20px;
    color: var(--text-m);
}
.lxb-no-results i, .lxb-empty i { display: block; margin-bottom: 14px; opacity: .25; width: 52px; height: 52px; margin-inline: auto; }
.lxb-empty h3, .lxb-no-results h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 20px;
    color: var(--text-h);
    margin-bottom: 6px;
}
.lxb-reset-link {
    display: inline-block;
    margin-top: 10px;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--brand-primary);
    text-decoration: none;
}
.lxb-reset-link:hover { text-decoration: underline; }
.lx-pg-btn:hover:not(.active):not([aria-disabled]) { border-color:var(--brand-primary);color:var(--brand-primary); }
.lx-pg-btn[aria-disabled] { opacity:.35;cursor:not-allowed; }

/* ════ شريط الفهرس الأبجدي (A-Z / أ-ي) — صفّان منفصلان، كل واحد
   سلايدر أفقي مستقل قابل للسحب. مُوحَّدة هنا بقاعدة واحدة نظيفة (كانت
   مكرّرة بقاعدتين متضاربتين بمحاولة سابقة — wrap بمكان وnowrap بمكان،
   سبب فعلي محتمل لتعطّل السحب). أزلنا أيضًا خدعة "الهامش السالب" اللي
   كانت تحاول تمديد الصف لحافة الشاشة، لأنها القالب الأرجح لتسريب سحب
   الصف كسحب للصفحة كاملة أفقيًا (نفس أعراض المشكلة المذكورة بالضبط). */
.lxb-alpha-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--border);
}
.lxb-alpha-group {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
}
.lxb-alpha-group::-webkit-scrollbar { display: none; height: 0; }
.lxb-alpha-divider { display: none; }
.lxb-alpha-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--border);
    background: var(--bg-card);
    color: var(--text-b);
    border-radius: var(--r-sm);
    font-size: 12.5px;
    font-weight: 700;
    font-family: 'Tajawal', sans-serif;
    cursor: pointer;
    transition: all .15s;
    flex-shrink: 0;
}
.lxb-alpha-btn:hover { border-color: var(--brand-primary); color: var(--brand-primary); }
.lxb-alpha-btn.active {
    background: var(--brand-primary);
    color: #fff;
    border-color: var(--brand-primary);
    box-shadow: 0 3px 10px var(--brand-primary)40;
}

@media (max-width: 640px) {
    /* ⚠️ على الهاتف، الـ٢٦ حرف يفوقون عرض الشاشة (يحتاجون سحبًا)، وتوسيط
       صف overflow-scroll فيه محتوى فائض يخلي المتصفح يبدأ العرض من
       منتصف المحتوى (يحتاج سحب لليمين وليسار كلاهما عشان توصلي لأول
       حرف A أو آخر حرف Z) — تجربة استخدام سيئة. نلغي التوسيط هنا
       تحديدًا فقط، فيبدأ السحب من أول حرف طبيعيًا كما هو متوقَّع.
       التوسيط يبقى فعّالًا بالكمبيوتر حيث الـ٢٦ حرف تتسع بالعرض
       بلا أي حاجة للسحب أصلاً. */
    .lxb-alpha-group { justify-content: flex-start; }
    .lxb-alpha-btn {
        min-width: 28px;
        height: 28px;
        font-size: 12px;
    }
}