/* Bleed-to-edge feature carousel with header arrows (e.g. "Optimize your payment flow").
   Arrows live in the section header; override Splide's default absolute positioning
   and give them the gradient-ring circle. Class-scoped so multiple instances work. */

.payment-flow-slider .splide__arrows {
    position: static;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.payment-flow-slider .splide__arrow {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    transform: none;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 9999px;
    color: #005de8;
    opacity: 1;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Gradient ring drawn as a masked overlay so it follows the circle. */
.payment-flow-slider .splide__arrow::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    padding: 1.5px;
    background: linear-gradient(180deg, #85b6ff 0%, #005de8 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
}

.payment-flow-slider .splide__arrow svg {
    width: 22px;
    height: 22px;
    fill: none;
    transform: none;
}

.payment-flow-slider .splide__arrow--prev svg {
    transform: rotate(180deg);
}

.payment-flow-slider .splide__arrow:hover:not(:disabled) {
    background: #d6e7ff;
}

.payment-flow-slider .splide__arrow:disabled {
    opacity: 0.4;
    cursor: default;
}

.payment-flow-slider .splide__arrow:focus {
    outline: none;
}

.payment-flow-slider .splide__arrow:focus-visible {
    outline: 2px solid #005de8;
    outline-offset: 2px;
}