/* Add custom CSS styles below */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@100;200;300;400;500;600;700&display=swap');

body {
    font-family: "IBM Plex Sans Arabic", serif !important;
    background-color: #070618 !important;
}

/* Main page background */
body.index:before, .dark body.index:before {
    content: "";
    width: 100%;
    height: 100%;
    background: #070618 url('https://l.top4top.io/p_336019knj1.png');
    position: fixed;
    z-index: 99999999999999999 !important;
    transform: scale(0);
    background-size: 215px !important;
    background-repeat: no-repeat;
    background-position: center !important;
    animation-name: logobg;
    animation-duration: 2s;
}

@keyframes logobg {
    0%, 20%, 78% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

/* Circular logo */
.navbar-brand img {
    content: url('https://l.top4top.io/p_336019knj1.png') !important;
    margin-right: -25px !important;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-color: #070618;
}

/* Rounded buttons with hover effect */
button,
.s-button-btn,
.s-button-element,
a.btn,
button.s-button-btn {
    border-radius: 9999px !important;
    padding: 0.5rem 1rem !important;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hover effect */
button:hover,
.s-button-btn:hover,
.s-button-element:hover,
a.btn:hover,
button.s-button-btn:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Button colors */
.button.stroke-b229be {
    border: 2px solid #B229BE;
    background-color: transparent;
    color: #ffffff;
}

.button.fill-b229be {
    background-color: #B229BE;
    color: #ffffff;
}

/* Background for sub-elements */
.main-nav-container.fixed-header .inner,
.store-footer__inner {
    background-color: #070618 !important;
    border-radius: 0 0 60px 60px;
}

/* Text color and effects */
.text-primary,
.text-xl,
.s-block__title h2,
.s-slider-block__title h2 {
    background: linear-gradient(to right, #B229BE 0%, #EF2889 30%, #FF6A3D 40%, #FF9B4D 60%, #EF2889 70%, #B229BE 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 500% auto;
    animation: textShine 5s ease-in-out infinite alternate;
}

@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

/* Popup window background */
.s-modal-body {
    background-color: #070618 !important;
    border: 1.5px solid #B229BE;
    border-radius: 30px;
}

/* Button text color and borders */
.s-product-card-content-footer.rounded-none button {
    background-color: #070618 !important;
    border: 2px solid #B229BE;
    color: #ffffff;
}

/* Sidebar menu background */
.mm-spn.mm-spn--navbar.mm-spn--main,
.s-modal-body,
.s-login-modal-main-btn {
    background-color: #070618 !important;
    border: 1.5px solid #B229BE;
    border-radius: 30px;
}

/* Footer links */
.store-footer a {
    color: #B229BE !important;
}

/* Product button background */
.product-entry salla-add-product-button .s-button-wrap .s-button-element {
    background: linear-gradient(to right, #B229BE 0%, #EF2889 30%, #FF6A3D 40%, #FF9B4D 60%, #EF2889 70%, #B229BE 100%);
    background-size: 500% auto;
    animation: textShine 5s ease-in-out infinite alternate;
}

/* Remove animated image link */
.sicon-cart:before {
    content: none !important;
}

/* Icon background */
.sicon-youtube2:before,
.sicon-twitter2:before,
.sicon-instagram2:before,
.sicon-tiktok:before,
.sicon-snapchat:before,
.sicon-mail:before,
.sicon-phone:before,
.sicon-iphone:before {
    background-color: #070618 !important;
}

/* Timer background */
.timer.product {
    background-color: #070618 !important;
}
.mm-ocd nav>ul>li a.active>h5,
header nav>ul>li a.active>div>span {
    color: #eb0e1a !important;
}



@keyframes ShineAnimation {
    0% {
        background-repeat: no-repeat;
        background-image: -webkit-linear-gradient(top left, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.0) 45%, rgba(255, 255, 255, 0.5) 48%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0.0) 57%, rgba(255, 255, 255, 0.0) 100%);
        background-position: -250px -250px;
        background-size: 600px 600px;
    }

    100% {
        background-repeat: no-repeat;
        background-position: 250px 250px;
    }
}

[dir=rtl] .rounded-be-xl {
    border-bottom-left-radius: 0.75rem;
    color: #ffffff !important;
    background: linear-gradient(to right, #eb0e1a 0%, #A45CD6 30%, #E81019 40%, #A45CD6 60%, #eb0e1a 70%, #eb0e1a 100%);
    background-size: 500% auto;
    animation: textShine 5s ease-in-out infinite alternate;
}


@keyframes textShine {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}



.s-cart-summary-wrapper {
    animation: wiggle 2.5s infinite;
}

@keyframes wiggle {
    0% {
        transform: rotate(0deg);
    }

    80% {
        transform: rotate(0deg);
    }

    85% {
        transform: rotate(5deg);
    }

    95% {
        transform: rotate(-5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.s-products-slider-card.swiper-slide {
    width: 70% !important;
}

@media (min-width: 768px) {
    .s-products-slider-card.swiper-slide {
        width: 25% !important;
    }

    .s-products-list-wrapper {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        ;
    }
}