:root {
    --primary-color: #27449d;
    --secendary-color: #f18022;
    --bac-cart-color: #f1f5f6;
    --hover-font-color: #27449d;
    --brd-r: 32px;
}
* {
    box-sizing: border-box;
}

.swiper-button-next:after {
    content: "<" !important;
    font-family: cursive;
}
.swiper-button-prev:after {
    content: ">";
    font-family: cursive;
}

.cart {
    border-radius: var(--brd-r);
    background: var(--primary-color);
    color: #fff;
}

.head-cart {
    position: relative;
    color: var(--secendary-color);
}

.cart .white {
    color: #fff;
}

.footer-cart {
    position: relative;
    border-top: 5px dotted #fff;
    transition: all 0.5s;
}

.footer-cart:after,
.footer-cart:before {
    content: "";
    background: #fff;
    display: block;
    width: 20px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    right: 0;
    top: 0;
    translate: 50% -50%;
}
.footer-cart:after {
    right: unset;
    left: 0;
    translate: -50% -50%;
}


.cart-button {
    background: var(--secendary-color);
    color: var(--primary-color);
    text-decoration: none;
    padding: 10px 15px;
    border-radius: var(--brd-r);
    display: inline-block;
    margin-top: 1rem;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.cart-button span {
    position: relative;
    pointer-events: none;
}
.cart-button:hover::before {
    color: red !important;
}

.cart-button:before {
    content: "";
    display: block;
    background: var(--primary-color);
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    position: absolute;
    bottom: 100%;
    left: 100%;
    transition: all 0.3s;
}

/* transition */
.head-cart,
.cart-button,
.head-cart:before {
    transition: all 0.3s;
}

/* active */
.cart.active .footer-cart {
    max-height: 800px;
    padding: 2rem 1rem;
    border-top: 5px dotted #fff;
}
.cart.active .head-cart:after {
    rotate: 90deg;
    margin-right: -5px;
}

/* hover */
.cart:hover,
.cart.active {
    background: var(--secendary-color);
    color: #fff;
}
.cart:hover .head-cart,
.cart.active .head-cart {
    color: #fff !important;
}
.cart:hover .cart-button,
.cart.active .cart-button {
    color: var(--secendary-color);

}

.cart:hover .cart-button:before,
.cart.active .cart-button:before {
    left: 50%;
    bottom: -50%;
    width: 150%;
    translate: -50% 50%;

}

/* responsive */
@media (max-width: 768px) {
    .swiper-wrapper {
        display: block;
    }

    .cart {
        margin-bottom: 20px;
    }

    .head-cart {
        display: flex;
        flex-direction: column;
        flex-wrap: wrap;
        height: 110px;
        justify-content: space-between;
        align-items: center;
    }
    .head-cart * {
        line-height: 1;
        font-size: 1.2rem;
    }

    .head-cart :nth-child(1) {
        order: 0;
    }
    .head-cart :nth-child(2) {
        order: 1;
    }
    .head-cart :nth-child(3) {
        order: 3;
    }
    .head-cart :nth-child(4) {
        order: 3;
    }

    .head-cart:after {
        content: ">";
        rotate: -90deg;
        color: #fff;
        font-family: fantasy;
        font-size: 1.4rem;
        order: 2;
        width: fit-content;
        line-height: 0.6;
        transition: all 0.3s;
    }
    @keyframes ring {
        25% {
            rotate: -110deg;
        }
        50% {
            rotate: -70deg;
        }
        7% {
            rotate: -100deg;
        }
    }
    .cart.animate .head-cart:after {
        animation: ring 2s ease-in-out;
    }

    .head-cart:before {
        content: url("data:image/svg+xml,%3Csvg viewBox='0 0 344 140' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='.05'%3E%3Cpath d='M-62 115.277l42.2468-24.6438c46.3357-27.0291 103.632-27.0291 149.968 0l42.2468 24.6438 42.2468 24.6438c46.3357 27.0291 103.632 27.0291 149.968 0l42.2468-24.6438' stroke='%23fff' stroke-width='2.81538' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-62 91.8299l42.2468-24.6439c46.3357-27.0292 103.632-27.0292 149.968 0l42.2468 24.6439 42.2468 24.6439c46.3357 27.0292 103.632 27.0292 149.968 0l42.2468-24.6439' stroke='%23fff' stroke-width='2.81538' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-62 68.3846l42.2468-24.644c46.3357-27.0291 103.632-27.0291 149.968 0l42.2468 24.644 42.2468 24.644c46.3357 27.0291 103.632 27.0291 149.968 0l42.2468-24.644' stroke='%23fff' stroke-width='2.81538' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-62 138.723l42.2468-24.6438c46.3357-27.0292 103.632-27.0292 149.968 0l42.2468 24.6438 42.2468 24.6438c46.3357 27.0292 103.632 27.0292 149.968 0l42.2468-24.6438' stroke='%23fff' stroke-width='2.81538' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-62 162.17l42.2468-24.6438c46.3357-27.0292 103.632-27.0292 149.968 0l42.2468 24.6438 42.2468 24.6438c46.3357 27.0292 103.632 27.0292 149.968 0l42.2468-24.6438' stroke='%23fff' stroke-width='2.81538' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M-62 185.615l42.2468-24.6438c46.3357-27.0292 103.632-27.0292 149.968 0l42.2468 24.6438 42.2468 24.6438c46.3357 27.0292 103.632 27.0292 149.968 0l42.2468-24.6438' stroke='%23fff' stroke-width='2.81538' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
        display: block; /* یا inline-block بسته به نیاز */
        width: 100%; /* عرض SVG */
        height: 140px; /* ارتفاع SVG */
        position: absolute; /* یا relative بسته به نیاز */
        /* تنظیمات اضافی برای موقعیت یا استایل */
        bottom: 0;
        left: 0;
        pointer-events: none;
    }

    .footer-cart {
        position: relative;
        border-top: none;
        max-height: 0;
        padding: 0;
    }

    @keyframes down-up {
        0% {
            border-top: 5px dotted #fff;
        }
        50% {
            padding: 1rem 0;
            max-height: 100px;
        }
        95% {
            border-top: 5px dotted #fff;
        }
    }
    .swiper-slide:first-child .cart.animate .footer-cart {
        animation: down-up 1.5s 1s ease-in-out;
    }
}