@import "instance";

.hotspots_away_jersey {
    @include bc($c2, $c1);
    @include position;
    @include wh(100vw);
    padding: 125px 0 0;
    z-index: 1;

    &::before {
        @include bg_two_section((
            gradient: $gra8_j,
            yaxis: top
        ));
    }

    &::after {
        @include bg_two_section((
            gradient: $gra9_j,
            z: 1
        ));
    }

    .bg_hotspots_away {
        @include position(absolute);
        @include whs(100%);
        background-image: $gra1_a;
        display: block;
        z-index: 1;
    }

    .container_hotspots_away_jersey {
        @include position;
        @include brp($b7) {
            width: 90%;
            margin: 0 auto;
        }
        z-index: 2;

        .container_title_hotspots_away_jersey {
            .title_hotspots_away_jersey {
                @include t1((
                    size: clamp(szrem(30), 2.6vw, szrem(50)),
                    font: $f1,
                    weight: 700,
                    transform: uppercase,
                ));
                text-wrap-style: balance;
                margin-block-end: 10px;
            }

            .description_hotspots_away_jersey {
                @include t1((
                    size: clamp(szrem(18), 1.25vw, szrem(24)),
                    font: $f1,
                    weight: 400,
                ));
            }
        }

        .swiper_away_jersey {
            margin-top: clamp(40px, 4.17vw, 80px);
            padding: 20px 0;
            position: relative;

            .swiper-wrapper {
                align-items: center;
            }

            .swiper-slide {
                @media (min-width: #{$b7 + 1}px) {
                    width: 95%;
                    max-width: 875px;
                    transition: transform $t4 ease, opacity $t4 ease;
                    opacity: 0.7;

                    &.swiper-slide-active {
                        width: 70%;
                        opacity: 1;
                        transform: scale(1);
                    }

                    &:not(.swiper-slide-active) {
                        transform: scale(0.98);
                    }
                }

                @include brp($b7) {
                    width: 100%;
                    opacity: 1;
                    transform: scale(1);

                    &.swiper-slide-active {
                        width: 100%;
                    }
                }
            }

            .swiper-button-next,
            .swiper-button-prev {
                @include whs(50px);
                background-color: rgba($c1, 0.2);
                border: 2px solid $c1;
                border-radius: 50%;
                color: $c1;
                margin-top: 0;
                top: 50%;
                transform: translateY(-50%);

                &::after {
                    font-size: 20px;
                    font-weight: 700;
                    color: $c1;
                }

                &:hover {
                    background-color: rgba($c1, 0.3);
                }

                @include brp($b7) {
                    top: 80%;
                }

                @include brp($b10) {
                    @include whs(35px);

                    &::after {
                        font-size: 20px;
                    }
                }
            }

            .swiper-button-next {
                right: calc(50% - 500px);

                @include brp($b4) {
                    right: 20px;
                }

                @include brp($b7) {
                    right: 10px;
                }

                &::after {
                    margin-left: 5px;
                }
            }

            .swiper-button-prev {
                left: calc(50% - 500px);

                @include brp($b4) {
                    left: 20px;
                }

                @include brp($b7) {
                    left: 10px;
                }

                &::after {
                    margin-right: 3px;
                }
            }

            .swiper-pagination {
                position: relative;
                margin-top: clamp(15px, 1.56vw, 30px);
                bottom: auto;

                .swiper-pagination-bullet {
                    @include whs(12px);
                    background-color: rgba($c1, 0.4);
                    opacity: 1;
                    margin: 0 6px;
                    transition: background-color $t4 ease;

                    &-active {
                        background-color: $c1;
                    }
                }
            }
        }

        .card_hotspots_away_jersey {
            @include wh(100%);
            @include bc($c2, $c1);
            border-radius: 10px;
            border: $bd3_a;
            padding: 20px;

            @include brp($b8) {
                padding: 20px 20px 45px;
            }

            .container_image {
                @include wh(100%);
                aspect-ratio: calc(300 / 500);

                .img {
                    @include whs(100%);
                    object-fit: cover;
                    border-radius: 10px;
                }
            }

            .title_card {
                .title {
                    @include t1((
                        size: clamp(szrem(24), 1.67vw, szrem(32)),
                        font: $f1,
                        weight: 700,
                        align: left
                    ));
                }

                .description_card {
                    @include t1((
                        size: clamp(szrem(14), 0.83vw, szrem(16)),
                        font: $f1,
                        weight: 400,
                        align: left
                    ));
                    text-wrap-style: balance;
                    margin-top: 20px;

                    @include brp($b7) {
                        max-width: 481px;
                    }
                }
            }

            .hotspots {
                @include align-self(center);
                @include position;
                @include wh(100%);
                z-index: 1;
                background-color: $c2;

                .hotspots_image {
                    @include position;
                    @include wh(100%);
                    object-fit: contain;
                    z-index: 1;
                }

                .hotspots_points {
                    @include position(absolute);
                    @include whs(100%);
                    pointer-events: none;
                    object-fit: cover;
                    z-index: 2;

                    .hotspot_item {
                        @include transform(translate(-50%, -50%));
                        @include position(absolute);
                        cursor: pointer;
                        z-index: 1;

                        &:has(.hotspot_tooltip.active) {
                            z-index: 2;
                        }

                        .hotspot_trigger {
                            @include position;
                            @include border-radius(50%);
                            @include whs(16px);
                            pointer-events: auto;
                            display: block;
                            cursor: pointer;
                            z-index: 3;

                            &::before {
                                @include border-radius(50%);
                                @include hv-center;
                                @include whs(20px);
                                border: $bd2;
                                content: "";
                            }
                        }

                        .hotspot_tooltip {
                            @include transition((
                                opacity $t4 ease,
                                visibility $t4 ease
                            ));
                            @include position(absolute, 24px, 50%, bottom);
                            @include border-radius(6px);
                            @include wh(clamp(180px, 10.41vw, 200px));
                            @include bc($c1, $c2);
                            pointer-events: none;
                            box-shadow: $sha1_a;
                            visibility: hidden;
                            padding: 10px 8px;
                            opacity: 0;
                            z-index: 4;


                            &.active {
                                opacity: 1;
                                visibility: visible;
                                pointer-events: auto;
                            }

                            .close_hotspot_tooltip {
                                @include center-flex-column;
                                @include position(absolute, 5px, 5px, top, right);
                                @include whs(30px);
                                @include bc($c0, $c2);
                                @include no-margins;
                                @include no-border;
                                pointer-events: auto;
                                font-size: szrem(32);
                                cursor: pointer;
                                line-height: 1;
                                z-index: 3;

                                &:hover { opacity: 0.7; }
                            }

                            .hotspot_title {
                                @include t1((
                                    size: clamp(szrem(16), 1.04vw, szrem(20)),
                                    font: $f1,
                                    weight: 700,
                                    transform: uppercase,
                                    align: left
                                ));
                                @include bc($c0, $c2);
                                padding-inline-end: 25px;
                                margin-bottom: 2px;
                                line-height: 0.8;
                            }

                            .hotspot_price {
                                @include t1((
                                    size: clamp(szrem(16), 0.93vw, szrem(18)),
                                    font: $f1,
                                    weight: 400,
                                    align: left
                                ));
                                @include bc($c0, $c2);
                                margin: 0 0 5px 0;
                            }

                            .btn_hotspot_ver_mas {
                                @include transition(background-color $t4 ease);
                                @include t1((
                                    size: clamp(szrem(12), 0.83vw, szrem(14)),
                                    font: $f1,
                                    weight: 400,
                                    transform: none
                                ));
                                @include wh;
                                @include bc($c2, $c1);
                                display: inline-block;
                                padding: 10px 20px;
                                box-sizing: border-box;

                                &:hover {
                                    @include bc(rgba($c2, 0.8), $c1);
                                }
                            }
                        } // hotspot_tooltip
                    } // hotspot_item
                } // hotspots_points
            } // hotspots

            .advice_card {
                @include align-self(flex-end);
                @include t1((
                    size: clamp(szrem(14), 0.83vw, szrem(16)),
                    font: $f1,
                    weight: 400,
                    align: left,
                ));

                @include brp($b7) {
                    grid-area: s2_advice;
                    margin-top: 20px;
                    text-align: center;
                }
            }

            .btn_calltoaction_3 {
                @include align-self(flex-end);

                @include brp($b7) {
                    @include justify-self(center);
                }
            }
        }

        .instruction_products {
            @include t1((
                size: clamp(szrem(14), 0.83vw, szrem(16)),
                font: $f1,
                weight: 400,
            ));
            text-align: center;
        }
    }

    .container_marquee_away {
        &.marquee_1 {
            @include position(absolute, 35px);
            margin-block-start: 0;
        }
    }
}