/* smspay-preview.css */
.smspay-demo-stage {
    position: relative;
    height: var(--easypay-screen-height,342px);
    overflow: hidden;
    background: var(--color-bg-white);
}

.smspay-demo-stage > .service-easypay-screen {
    position: absolute;
    inset: 0;
    height: 100%;
    transform: none;
    transition: transform .7s cubic-bezier(.4,0,.2,1);
}

[data-messagepay-preview].is-sms .service-easypay-screen {
    transform: translateX(-100%);
}

[data-messagepay-preview].is-sms .linkpay-demo-sms {
    transform: none;
}

[data-messagepay-preview] .linkpay-demo-sms {
    transition-duration: .7s;
}

[data-messagepay-preview] .service-easypay-request {
    width: 100%;
    margin-top: 0;
    padding: 0 12px;
    border: 0;
    cursor: pointer;
}

[data-messagepay-preview] .service-easypay-check {
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

[data-messagepay-preview] :is(.service-easypay-request,.service-easypay-check):focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 3px;
}

[data-messagepay-preview] .linkpay-sms-scroll {
    padding-bottom: 24px;
}

[data-messagepay-preview] .linkpay-sms-bubble {
    width: 84%;
    margin-right: 0;
}

[data-messagepay-preview] .service-easypay-bubble b {
    font: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .smspay-demo-stage > .service-easypay-screen,
    [data-messagepay-preview] .linkpay-demo-sms {
        transition: none;
    }
}

[data-messagepay-native] .service-easypay-phone {
    zoom: var(--easypay-phone-scale,1);
    transform: none;
    left: var(--messagepay-phone-left,0px);
    top: var(--messagepay-phone-top,52px);
}