/**
 * Reusable AB Clinic premium Elementor button.
 * Apply `ab-clinic-premium-cta` in Elementor > Advanced > CSS Classes.
 * Normal Elementor background and text colors remain editable.
 */

.ab-clinic-premium-cta .elementor-button,
.elementor-button.ab-clinic-premium-cta,
a.ab-clinic-premium-cta {
    --ab-cta-hover-start: #172130;
    --ab-cta-hover-mid: #6c3a91;
    --ab-cta-hover-end: #c18a45;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding-right: 58px;
    border-radius: 15px;
    box-shadow: 0 8px 18px rgba(7, 11, 18, .14);
    transform: translateZ(0);
    transition:
        color .34s ease,
        border-color .34s ease,
        box-shadow .4s cubic-bezier(.22, 1, .36, 1),
        transform .4s cubic-bezier(.22, 1, .36, 1);
}

.ab-clinic-premium-cta .elementor-button::before,
.elementor-button.ab-clinic-premium-cta::before,
a.ab-clinic-premium-cta::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 0;
    display: block;
    border-radius: inherit;
    background-image: linear-gradient(
        112deg,
        var(--ab-cta-hover-start) 0%,
        #263b5f 24%,
        var(--ab-cta-hover-mid) 49%,
        #963d9c 69%,
        var(--ab-cta-hover-end) 88%,
        var(--ab-cta-hover-start) 100%
    );
    background-repeat: no-repeat;
    background-size: 230% 100%;
    background-position: 0% 50%;
    clip-path: polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
    opacity: 1;
    pointer-events: none;
    transform: translateX(-108%);
    transform-origin: left center;
    transition:
        transform .72s cubic-bezier(.16, 1, .3, 1),
        background-position .72s cubic-bezier(.16, 1, .3, 1);
}

.ab-clinic-premium-cta .elementor-button::after,
.elementor-button.ab-clinic-premium-cta::after,
a.ab-clinic-premium-cta::after {
    content: "↗";
    position: absolute;
    top: 50%;
    right: 8px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 11px;
    color: #ffffff;
    background: #172130;
    box-shadow: 0 5px 12px rgba(7, 11, 18, .18);
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
    transition:
        color .32s ease,
        background .32s ease,
        border-color .32s ease,
        box-shadow .32s ease,
        transform .4s cubic-bezier(.22, 1, .36, 1);
}

.ab-clinic-premium-cta .elementor-button .elementor-button-content-wrapper,
.ab-clinic-premium-cta .elementor-button .elementor-button-text,
.elementor-button.ab-clinic-premium-cta .elementor-button-content-wrapper,
.elementor-button.ab-clinic-premium-cta .elementor-button-text,
a.ab-clinic-premium-cta > span {
    position: relative;
    z-index: 2;
}

.ab-clinic-premium-cta .elementor-button:hover,
.ab-clinic-premium-cta .elementor-button:focus-visible,
.elementor-button.ab-clinic-premium-cta:hover,
.elementor-button.ab-clinic-premium-cta:focus-visible,
a.ab-clinic-premium-cta:hover,
a.ab-clinic-premium-cta:focus-visible {
    color: #ffffff;
    box-shadow:
        0 16px 30px rgba(7, 11, 18, .24),
        0 0 0 3px rgba(193, 138, 69, .09);
    transform: translateY(-2px);
}

.ab-clinic-premium-cta .elementor-button:hover::before,
.ab-clinic-premium-cta .elementor-button:focus-visible::before,
.elementor-button.ab-clinic-premium-cta:hover::before,
.elementor-button.ab-clinic-premium-cta:focus-visible::before,
a.ab-clinic-premium-cta:hover::before,
a.ab-clinic-premium-cta:focus-visible::before {
    transform: translateX(0);
    background-position: 100% 50%;
    animation: none;
}

.ab-clinic-premium-cta .elementor-button:hover::after,
.ab-clinic-premium-cta .elementor-button:focus-visible::after,
.elementor-button.ab-clinic-premium-cta:hover::after,
.elementor-button.ab-clinic-premium-cta:focus-visible::after,
a.ab-clinic-premium-cta:hover::after,
a.ab-clinic-premium-cta:focus-visible::after {
    color: #172130;
    background: #ffffff;
    border-color: rgba(255, 255, 255, .72);
    box-shadow: 0 7px 15px rgba(7, 11, 18, .22);
    transform: translateY(-50%) translateX(2px);
}


@media (max-width: 767px) {
    .ab-clinic-premium-cta .elementor-button,
    .elementor-button.ab-clinic-premium-cta,
    a.ab-clinic-premium-cta {
        min-height: 46px;
        padding-right: 50px;
        border-radius: 13px;
    }

    .ab-clinic-premium-cta .elementor-button::after,
    .elementor-button.ab-clinic-premium-cta::after,
    a.ab-clinic-premium-cta::after {
        width: 31px;
        height: 31px;
        border-radius: 9px;
        font-size: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ab-clinic-premium-cta .elementor-button,
    .elementor-button.ab-clinic-premium-cta,
    a.ab-clinic-premium-cta,
    .ab-clinic-premium-cta .elementor-button::before,
    .elementor-button.ab-clinic-premium-cta::before,
    a.ab-clinic-premium-cta::before {
        animation: none;
        transition-duration: .01ms;
    }
}