/* Advertisement Box Styles */
.advertisement-box {
    width: 100%;
    padding: 10px 15px;
    margin-bottom: 15px;
    text-align: center;
    overflow: hidden;
    position: relative;
    white-space: nowrap;
    box-sizing: border-box;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    perspective: 1000;
}

/* Animation: Scroll Right to Left */
.advertisement-box.scroll-right {
    padding-right: 0;
    padding-left: 0;
    overflow: hidden;
}

.advertisement-box.scroll-right .advertisement-text-wrapper {
    display: inline-flex;
    white-space: nowrap;
    animation: scrollRight 15s linear infinite;
    -webkit-animation: scrollRight 15s linear infinite;
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    width: max-content;
    will-change: transform;
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.advertisement-box.scroll-right .advertisement-text {
    display: inline-block;
    padding-right: 50px; /* Space between repeated text */
}

@keyframes scrollRight {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(calc(-50% - 25px)); /* Half width + half padding */
    }
}

@-webkit-keyframes scrollRight {
    from {
        -webkit-transform: translateX(0);
    }
    to {
        -webkit-transform: translateX(calc(-50% - 25px)); /* Half width + half padding */
    }
}

/* Animation: Scroll Left to Right */
.advertisement-box.scroll-left {
    padding-right: 0;
    padding-left: 0;
    overflow: hidden;
}

.advertisement-box.scroll-left .advertisement-text-wrapper {
    display: inline-flex;
    white-space: nowrap;
    animation: scrollLeft 15s linear infinite;
    -webkit-animation: scrollLeft 15s linear infinite;
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    width: max-content;
    will-change: transform;
    position: relative;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}

.advertisement-box.scroll-left .advertisement-text {
    display: inline-block;
    padding-right: 50px; /* Space between repeated text */
}

@keyframes scrollLeft {
    from {
        transform: translateX(calc(-50% - 25px)); /* Half width + half padding */
    }
    to {
        transform: translateX(0);
    }
}

@-webkit-keyframes scrollLeft {
    from {
        -webkit-transform: translateX(calc(-50% - 25px)); /* Half width + half padding */
    }
    to {
        -webkit-transform: translateX(0);
    }
}

/* Animation: Fade In/Out */
.advertisement-box.fade .advertisement-text {
    animation: fadeInOut 4s ease-in-out infinite;
    -webkit-animation: fadeInOut 4s ease-in-out infinite;
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    white-space: normal;
    width: 100%;
}

@keyframes fadeInOut {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeInOut {
    0%, 100% {
        opacity: 0.5;
    }
    50% {
        opacity: 1;
    }
}

/* Animation: Blink */
.advertisement-box.blink .advertisement-text {
    animation: blink 2s step-end infinite;
    -webkit-animation: blink 2s step-end infinite;
    animation-delay: 0s;
    -webkit-animation-delay: 0s;
    white-space: normal;
    width: 100%;
}

@keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

@-webkit-keyframes blink {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* Font Styles */
.advertisement-box .advertisement-text {
    margin: 0;
    display: inline-block;
    overflow-wrap: break-word;
}

.advertisement-box.font-normal .advertisement-text {
    font-style: normal;
    font-weight: normal;
}

.advertisement-box.font-italic .advertisement-text {
    font-style: italic;
    font-weight: normal;
}

.advertisement-box.font-bold .advertisement-text {
    font-style: normal;
    font-weight: bold;
}

.advertisement-box.font-bold-italic .advertisement-text {
    font-style: italic;
    font-weight: bold;
}

/* No Animation Style - Allow Text Wrapping */
.advertisement-box.none .advertisement-text {
    white-space: normal;
    width: 100%;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .advertisement-box {
        padding: 8px 10px;
        margin-bottom: 10px;
    }
    
    .advertisement-box.scroll-right .advertisement-text-wrapper,
    .advertisement-box.scroll-left .advertisement-text-wrapper {
        animation-duration: 10s; /* Faster animation on mobile */
        -webkit-animation-duration: 10s;
    }
    
    .advertisement-box.scroll-right .advertisement-text,
    .advertisement-box.scroll-left .advertisement-text {
        padding-right: 30px; /* Less spacing on mobile */
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    .advertisement-box {
        padding: 6px 8px;
    }
    
    .advertisement-box.scroll-right .advertisement-text-wrapper,
    .advertisement-box.scroll-left .advertisement-text-wrapper {
        animation-duration: 8s; /* Even faster on small screens */
        -webkit-animation-duration: 8s;
    }
    
    .advertisement-box.scroll-right .advertisement-text,
    .advertisement-box.scroll-left .advertisement-text {
        padding-right: 20px; /* Even less spacing on small screens */
    }
}

/* Fix for Android Chrome */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .advertisement-box.scroll-right .advertisement-text-wrapper,
    .advertisement-box.scroll-left .advertisement-text-wrapper {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/* Fix for iOS Safari */
@supports (-webkit-overflow-scrolling: touch) {
    .advertisement-box.scroll-right .advertisement-text-wrapper,
    .advertisement-box.scroll-left .advertisement-text-wrapper {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}