/* --- تثبيت الأشرطة الملونة (الخلفية) --- */
body::before {
    content: "";
    display: block;
    width: 100%;
    height: 40px;
    background-color: #FF0000; /* أحمر ثابت */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9998;
}

body::after {
    content: "";
    display: block;
    width: 100%;
    height: 40px;
    background-color: #FFFF00; /* أصفر ثابت */
    position: fixed;
    top: 40px; /* تحت الأحمر مباشرة */
    left: 0;
    z-index: 9998;
}

/* --- إضافة النص المتحرك --- */
/* نستخدم كلاس إضافي (أو عنصر نصي) إذا كان متاحاً في قالبك */
/* بما أننا مقيدون، سنستخدم عنصر واجهة موجود مسبقاً في سلة مثل header */
header::before {
    content: "توصيل مجاني - ريد بوكس - مشتريات 100 ريال - التوصيل لجميع مناطق المملكة ✦ ✦ ✦ توصيل مجاني - ريد بوكس - مشتريات 100 ريال - التوصيل لجميع مناطق المملكة ";
    position: fixed;
    top: 10px;
    left: 0;
    width: 100%;
    color: #FFFF00;
    font-weight: bold;
    z-index: 9999;
    white-space: nowrap;
    animation: move-text 25s linear infinite;
    pointer-events: none;
}

header::after {
    content: "لتحصل على تخفيض 50% مع توصيل **مجاني** يرجى زيارة قسم الكتب المخفضة ✦ ✦ ✦ لتحصل على تخفيض 50% مع توصيل **مجاني** يرجى زيارة قسم الكتب المخفضة ";
    position: fixed;
    top: 50px;
    left: 0;
    width: 100%;
    color: #FF0000;
    font-weight: bold;
    z-index: 9999;
    white-space: nowrap;
    animation: move-text 25s linear infinite;
    pointer-events: none;
}

/* --- حركة النص فقط من اليسار إلى اليمين --- */
@keyframes move-text {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* --- ضبط المسافة --- */
body {
    padding-top: 80px !important;
}