/* Inspired by the CTA shared by the user: Uiverse.io / mobinkakei.
   Elementor integration and namespaced styling: Spider Animated CTA. */
.spcta-wrap {
    display: flex;
    justify-content: flex-start;
    padding: 12px 18px 18px;
    box-sizing: border-box;
    width: 100%;
}
.spcta-wrap .spcta-button {
    --spcta-bg: #6225e6;
    --spcta-text: #fff;
    --spcta-skew: -15deg;
    --spcta-arrow-hover: #fbc638;
    --spcta-arrow-size: 25px;
    --spcta-gap: 24px;
    --spcta-transition: .5s;
    --spcta-flash-duration: 1s;
    --spcta-focus: #008c87;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 11px 33px;
    font-family: inherit;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    color: var(--spcta-text);
    background: var(--spcta-bg);
    border: 0 solid transparent;
    border-radius: 0;
    box-shadow: 6px 6px 0 #000;
    transform: skewX(var(--spcta-skew));
    transform-origin: center;
    transition: background-color var(--spcta-transition), color var(--spcta-transition), box-shadow var(--spcta-transition), border-color var(--spcta-transition);
    -webkit-tap-highlight-color: transparent;
}
.spcta-wrap a.spcta-button { cursor: pointer; }
.spcta-wrap .spcta-button.spcta-no-shadow { box-shadow: none !important; }
.spcta-wrap .spcta-button:visited { color: var(--spcta-text); }
.spcta-wrap .spcta-button:hover,
.spcta-wrap .spcta-button:focus-visible {
    color: var(--spcta-text-hover, var(--spcta-text));
    background: var(--spcta-bg-hover, var(--spcta-bg));
    box-shadow: 10px 10px 0 #fbc638;
    text-decoration: none;
}
.spcta-wrap .spcta-button:focus-visible {
    outline: 3px solid var(--spcta-focus);
    outline-offset: 6px;
}
.spcta-inner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spcta-gap);
    min-width: 0;
    max-width: 100%;
    transform: skewX(calc(-1 * var(--spcta-skew)));
}
.spcta-text { min-width: 0; overflow-wrap: anywhere; text-align: center; }
.spcta-arrows {
    display: block;
    position: relative;
    flex: 0 0 auto;
    width: calc(var(--spcta-arrow-size) * .52);
    height: var(--spcta-arrow-size);
    transition: width var(--spcta-transition);
}
.spcta-arrows svg {
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    width: calc(var(--spcta-arrow-size) * 66 / 43);
    height: var(--spcta-arrow-size);
    max-width: none;
    overflow: visible;
    fill: var(--spcta-arrow, currentColor);
}
.spcta-arrows path { transition: transform var(--spcta-transition), fill var(--spcta-transition); }
.spcta-button:hover .spcta-arrows svg,
.spcta-button:focus-visible .spcta-arrows svg { fill: var(--spcta-arrow-hover); }
.spcta-animated:hover .spcta-arrows,
.spcta-animated:focus-visible .spcta-arrows { width: calc(var(--spcta-arrow-size) * 66 / 43); }
.spcta-animated:hover .spcta-one,
.spcta-animated:focus-visible .spcta-one { transform: translateX(-44px); }
.spcta-animated:hover .spcta-two,
.spcta-animated:focus-visible .spcta-two { transform: translateX(-22px); }
.spcta-animated:hover .spcta-arrows path,
.spcta-animated:focus-visible .spcta-arrows path {
    animation: spcta-color-flash var(--spcta-flash-duration) infinite;
}
.spcta-animated:hover .spcta-one,
.spcta-animated:focus-visible .spcta-one { animation-delay: .6s; }
.spcta-animated:hover .spcta-two,
.spcta-animated:focus-visible .spcta-two { animation-delay: .4s; }
.spcta-animated:hover .spcta-three,
.spcta-animated:focus-visible .spcta-three { animation-delay: .2s; }
@keyframes spcta-color-flash {
    0%, 100% { fill: var(--spcta-arrow, var(--spcta-text-hover, var(--spcta-text))); }
    50% { fill: var(--spcta-arrow-hover); }
}
@media (max-width: 767px) {
    .spcta-wrap .spcta-button { font-size: 18px; padding: 12px 20px; --spcta-gap: 16px; --spcta-arrow-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
    .spcta-wrap .spcta-button, .spcta-inner, .spcta-arrows, .spcta-arrows path { transition: none !important; }
    .spcta-animated:hover .spcta-arrows path, .spcta-animated:focus-visible .spcta-arrows path { animation: none !important; transform: none; }
    .spcta-animated:hover .spcta-arrows, .spcta-animated:focus-visible .spcta-arrows { width: calc(var(--spcta-arrow-size) * .52); }
}