/* CHINATRAVEL_EXTRA_LABEL_4_FRONT_V6 */

/*
 * Светлая акцентная метка.
 * Яркий акцент сосредоточен только на сияющей звезде.
 */

.ct-tour-extra-label.ct-tour-extra-label--attention {
    position: relative !important;
    z-index: 2 !important;

    overflow: visible !important;

    color: #8d2323 !important;

    border:
        1px solid rgba(171, 25, 23, .27) !important;

    background:
        linear-gradient(
            135deg,
            rgba(171, 25, 23, .11) 0%,
            rgba(255, 245, 222, .97) 100%
        ) !important;

    font-weight: 600 !important;

    transform-origin: center center;

    animation:
        ctTourAttentionSoftV6
        2.2s
        ease-in-out
        infinite !important;

    will-change:
        transform,
        box-shadow;
}


/* Яркая золотая звезда */

.ct-tour-extra-label.ct-tour-extra-label--attention:before {
    content: "★" !important;

    position: relative !important;
    z-index: 3 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;

    margin-right: 2px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            #fffbd2 0%,
            #ffe45c 28%,
            #ffb914 62%,
            #e38b00 100%
        ) !important;

    color: #ffffff !important;

    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 700 !important;

    text-shadow:
        0 0 2px #ffffff,
        0 0 5px #fff7a8,
        0 0 9px #ffd738,
        0 0 14px rgba(255, 174, 0, .95);

    box-shadow:
        0 0 4px rgba(255, 245, 157, 1),
        0 0 8px rgba(255, 211, 45, .95),
        0 0 14px rgba(255, 166, 0, .70);

    transform-origin: center center;

    animation:
        ctTourAttentionStarV6
        1.25s
        ease-in-out
        infinite !important;
}


/* Пульсирующий ореол вокруг звезды */

.ct-tour-extra-label.ct-tour-extra-label--attention:after {
    content: "" !important;

    position: absolute !important;
    z-index: 1 !important;

    left: 3px !important;
    top: 50% !important;

    display: block !important;

    width: 25px !important;
    height: 25px !important;

    border-radius: 50% !important;

    background:
        radial-gradient(
            circle,
            rgba(255, 246, 154, .78) 0%,
            rgba(255, 210, 50, .42) 36%,
            rgba(255, 161, 0, .16) 66%,
            rgba(255, 161, 0, 0) 100%
        ) !important;

    pointer-events: none !important;

    transform:
        translateY(-50%)
        scale(.76);

    animation:
        ctTourAttentionHaloV6
        1.25s
        ease-out
        infinite !important;
}


/* Небольшое движение всей метки */

@keyframes ctTourAttentionSoftV6 {
    0%,
    100% {
        transform:
            translateY(0)
            scale(1);

        box-shadow:
            0 3px 9px
            rgba(171, 25, 23, .09);
    }

    50% {
        transform:
            translateY(-3px)
            scale(1.03);

        box-shadow:
            0 7px 15px
            rgba(171, 25, 23, .17);
    }
}


/* Яркая пульсация самой звезды */

@keyframes ctTourAttentionStarV6 {
    0%,
    100% {
        transform:
            scale(1)
            rotate(-4deg);

        filter:
            brightness(1.05)
            saturate(1.05);

        text-shadow:
            0 0 2px #ffffff,
            0 0 5px #fff7a8,
            0 0 9px #ffd738,
            0 0 13px rgba(255, 174, 0, .82);

        box-shadow:
            0 0 4px rgba(255, 245, 157, .90),
            0 0 8px rgba(255, 211, 45, .80),
            0 0 12px rgba(255, 166, 0, .58);
    }

    50% {
        transform:
            scale(1.28)
            rotate(6deg);

        filter:
            brightness(1.45)
            saturate(1.30);

        text-shadow:
            0 0 3px #ffffff,
            0 0 8px #fffbd0,
            0 0 14px #ffe13f,
            0 0 22px rgba(255, 153, 0, 1);

        box-shadow:
            0 0 6px rgba(255, 255, 220, 1),
            0 0 13px rgba(255, 224, 75, 1),
            0 0 22px rgba(255, 161, 0, .95),
            0 0 30px rgba(255, 132, 0, .45);
    }
}


/* Расходящийся золотой ореол */

@keyframes ctTourAttentionHaloV6 {
    0% {
        opacity: .88;

        transform:
            translateY(-50%)
            scale(.72);
    }

    75%,
    100% {
        opacity: 0;

        transform:
            translateY(-50%)
            scale(1.65);
    }
}


@media (prefers-reduced-motion: reduce) {
    .ct-tour-extra-label.ct-tour-extra-label--attention,
    .ct-tour-extra-label.ct-tour-extra-label--attention:before,
    .ct-tour-extra-label.ct-tour-extra-label--attention:after {
        animation: none !important;
    }
}

/* /CHINATRAVEL_EXTRA_LABEL_4_FRONT_V6 */