/* Marquee Top Bar Styles */
.marquee-container {
    width: 100%;
    overflow: hidden;
    padding: 8px 0;
    font-size: 14px;
    font-weight: 500;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.marquee-content {
    width: 100%;
    overflow: hidden;
    position: relative;
    backface-visibility: hidden;
}

.marquee-scroll {
    display: flex;
    white-space: nowrap;
    position: relative;
    animation: marquee-scroll-rtl 25s linear infinite;
    direction: rtl;
    will-change: transform;
    transform: translateZ(0); /* Hardware acceleration */
    backface-visibility: hidden;
}

.marquee-text {
    padding-left: 50px;
    display: inline-block;
    flex-shrink: 0; /* Prevent text from shrinking */
    text-rendering: optimizeLegibility;
    backface-visibility: hidden;
}

@keyframes marquee-scroll-rtl {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(50%); /* Moves exactly half the total width */
    }
}

/* Original LTR animation kept for reference */
@keyframes marquee-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

/* RTL support is now default */
html[dir="ltr"] .marquee-scroll,
body:not(.rtl) .marquee-scroll {
    direction: ltr;
    animation-name: marquee-scroll;
}

html[dir="ltr"] .marquee-text,
body:not(.rtl) .marquee-text {
    padding-right: 50px;
    padding-left: 0;
    text-align: left;
}

/* Adjust navbar position when marquee is active */
body:has(.marquee-container) .navbar.fixed-top {
    top: 36px; /* Adjust based on marquee height */
}

/* Fallback for browsers that don't support :has */
.marquee-container + .navbar.fixed-top {
    top: 36px;
}

@media (max-width: 767.98px) {
    .marquee-container {
        font-size: 12px;
        padding: 6px 0;
    }
    
    body:has(.marquee-container) .navbar.fixed-top,
    .marquee-container + .navbar.fixed-top {
        top: 30px;
    }
    
    .marquee-text {
        padding-left: 30px;
        padding-right: 0;
    }
    
    html[dir="ltr"] .marquee-text,
    body:not(.rtl) .marquee-text {
        padding-right: 30px;
        padding-left: 0;
    }
    
    @keyframes marquee-scroll-rtl {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(50%);
        }
    }
    
    @keyframes marquee-scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }
}