/* ============================================================
   ملف: topbar.css
   الشريط المتحرك (Marquee) + شريط أزرار الروابط (اتصل بنا / الأسئلة / القوانين ...)
   يظهر أسفل البنر مباشرة — الألوان تعتمد على متغيّر --site-color
   المعرّف بأعلى public/index.ejs (يتبع لون الشات من لوحة التحكم تلقائياً)
   ============================================================ */

/* 📢 الشريط المتحرك */
.site-marquee-bar {
    width: 100%;
    overflow: hidden;
    background: var(--site-color);
    white-space: nowrap;
    box-sizing: border-box;
    height: 30px;
    line-height: 30px;
}
.site-marquee-track {
    display: inline-flex;
    white-space: nowrap;
    animation: site-marquee-scroll 18s linear infinite;
    will-change: transform;
}
.site-marquee-track span {
    display: inline-block;
    padding-left: 60px;
    color: #fff !important;
    font-size: 13px;
    font-weight: bold;
}
@keyframes site-marquee-scroll {
    0%   { transform: translateX(-50%); }
    100% { transform: translateX(0%); }
}
.site-marquee-bar:hover .site-marquee-track { animation-play-state: paused; }

/* 🔗 شريط أزرار الروابط */
.site-quicklinks-bar {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px;
    background: #fff;
    padding: 5px 4px;
    direction: rtl;
}
.site-quicklink-btn {
    background: var(--site-color);
    color: #fff !important;
    font-size: 11px;
    font-weight: bold;
    padding: 3px 14px;
    border-radius: 5px;
    text-decoration: none !important;
    white-space: nowrap;
    line-height: 1.3;
}
/* أول زر (يمين الصف) — الطرف الخارجي (يمين) مقوّس بالكامل للخارج، والطرف الداخلي مربع */
.site-quicklink-btn:first-child {
    border-radius: 5px 999px 999px 5px;
}
/* آخر زر (يسار الصف) — الطرف الخارجي (يسار) مقوّس بالكامل للخارج، والطرف الداخلي مربع */
.site-quicklink-btn:last-child {
    border-radius: 999px 5px 5px 999px;
}
.site-quicklink-btn:hover { opacity: .85; }
.site-quicklink-btn i { margin-left: 4px; }

/* 📄 كتلة المحتوى الداخلي لأغراض SEO/الأرشفة فقط.
   موجودة بالكامل بمصدر الصفحة (يقرأها جوجل عادي) لكن مُخرجة تماماً من مساحة العرض/التمرير
   بحيث ما تظهر أبداً للمستخدم ولا تحت الكيبورد ولا بأي مكان بالواجهة. */
.site-seo-content {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}