:root {
    --ticker-height: 3.5rem;
    --ticker-gap: 2rem;
    --duration: 30s;
    /* تُضبط من JS */
}

/* الحاوية */
.ticker-wrap {
    width: 100%;
    height: var(--ticker-height);
    overflow: hidden;
    background-color: #63697b;
    display: flex;
    align-items: center;
    transform: translateZ(0);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
}
.ticker-wrap .fad{
    color: #ffffff !important;
}

/* مسار الحركة */
.ticker-track {
    display: inline-flex;
    /* ترتيب طبيعي بدون عكس */
    gap: var(--ticker-gap);
    will-change: transform;
    animation: ticker-left var(--duration) linear infinite;
    /* الافتراضي يسار */
}

/* عند الواجهة الإنجليزية (يسار ← يمين) أبقيها كما هي: ticker-left */
.ticker-wrap.ltr .ticker-track {
    animation-name: ticker-left;
}

/* عند الواجهة العربية (يمين ← يسار) نستخدم ticker-right */
.ticker-wrap.rtl .ticker-track {
    animation-name: ticker-right;
}

/* إيقاف عند التحويم */
.ticker-wrap:hover .ticker-track {
    animation-play-state: paused;
}

/* عناصر البنود */
.ticker-track .item {
    white-space: nowrap;
    font-size: 18px;
    color: #ffffff !important;
    font-weight: 800;
    font-family: sans-serif;
    line-height: 1;
    padding-inline: 0.5rem;
}

/* مفاتيح الحركة */
/* LTR: من 0 إلى -50% (يتحرك لليسار) */
@keyframes ticker-left {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* RTL: من 0 إلى +50% (يتحرك لليمين) */
@keyframes ticker-right {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(50%);
    }
}

/* تقليل الحركة */
@media (prefers-reduced-motion: reduce) {
    .ticker-track {
        animation: none;
        transform: none;
    }
}

/* تظليل الحواف (اختياري) */
.ticker-wrap::after,
.ticker-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    width: 2rem;
    height: 100%;
    pointer-events: none;
}

.ticker-wrap::before {
    left: 0;
    background: linear-gradient(to right, rgb(73 81 105), rgba(70, 73, 88, 0));
}

.ticker-wrap::after {
    right: 0;
    background: linear-gradient(to left, rgb(73 81 105), rgba(70, 73, 88, 0));
}

/* موبايل */
@media (max-width: 480px) {
    :root {
        --ticker-gap: 1rem;
    }
}