/*
 * RentArest OAuth — Premium SaaS cascade
 * Visual order: UsersWP form -> divider -> Yandex -> VK ID -> SmartCaptcha.
 * We animate opacity/transform only, so Popup Maker keeps stable geometry.
 */

.pum-active .ra-auth-cascade-active .yandex-oauth-container,
.pum-active .ra-auth-cascade-active .rentarest-vkid-container,
.pum-active .ra-auth-cascade-active .ra-smartcaptcha-wrap {
    will-change: opacity, transform;
}

/* The Yandex shell becomes visible with the divider; its button follows later. */
.pum-active .ra-auth-cascade-active .yandex-oauth-container {
    pointer-events: none;
    opacity: 0 !important;
    transform: translate3d(0, 7px, 0) !important;
    transition:
        opacity .32s cubic-bezier(.22, 1, .36, 1),
        transform .36s cubic-bezier(.22, 1, .36, 1) !important;
}

.pum-active .ra-auth-cascade-active .yandex-oauth-container.ra-cascade-shell-visible {
    pointer-events: auto;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

.pum-active .ra-auth-cascade-active .yandex-divider,
.pum-active .ra-auth-cascade-active .yandex-login-btn {
    opacity: 0 !important;
    transform: translate3d(0, 6px, 0) !important;
    transition:
        opacity .29s cubic-bezier(.22, 1, .36, 1),
        transform .34s cubic-bezier(.22, 1, .36, 1) !important;
}

.pum-active .ra-auth-cascade-active .yandex-divider.ra-cascade-visible,
.pum-active .ra-auth-cascade-active .yandex-login-btn.ra-cascade-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

/* Premium, quiet divider: visible but not competing with auth actions. */
.pum-active .ra-auth-cascade-active .yandex-login-btn {
    pointer-events: none;
}

.pum-active .ra-auth-cascade-active .yandex-login-btn.ra-cascade-visible {
    pointer-events: auto;
}

.pum-active .ra-auth-cascade-active .yandex-divider {
    color: rgba(218, 213, 170, .50) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: .075em;
    line-height: 1;
    margin-bottom: 14px !important;
}

.pum-active .ra-auth-cascade-active .yandex-divider::before,
.pum-active .ra-auth-cascade-active .yandex-divider::after {
    background: linear-gradient(
        90deg,
        rgba(225, 183, 89, 0),
        rgba(225, 183, 89, .28),
        rgba(225, 183, 89, .10)
    ) !important;
}

.pum-active .ra-auth-cascade-active .yandex-divider::after {
    transform: scaleX(-1);
}

/* VK is considered visually ready only after VK SDK has inserted real items. */
.pum-active .ra-auth-cascade-active .rentarest-vkid-container {
    min-height: 44px;
    pointer-events: none;
    opacity: 0 !important;
    transform: translate3d(0, 8px, 0) !important;
    transition:
        opacity .34s cubic-bezier(.22, 1, .36, 1),
        transform .38s cubic-bezier(.22, 1, .36, 1) !important;
}

.pum-active .ra-auth-cascade-active .rentarest-vkid-container.ra-cascade-visible {
    pointer-events: auto;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

/* SmartCaptcha may render earlier, but visually enters only after VK. */
.pum-active .ra-auth-cascade-active .ra-smartcaptcha-wrap {
    min-height: 70px;
    pointer-events: none;
    opacity: 0 !important;
    transform: translate3d(0, 8px, 0) !important;
    transition:
        opacity .35s cubic-bezier(.22, 1, .36, 1),
        transform .40s cubic-bezier(.22, 1, .36, 1) !important;
}

.pum-active .ra-auth-cascade-active .ra-smartcaptcha-wrap.ra-cascade-visible {
    pointer-events: auto;
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
}

/* In invisible mode the auth button itself is the SmartCaptcha trigger. */
.pum-active .ra-auth-cascade-active .ra-smartcaptcha-wrap.ra-smartcaptcha-invisible,
.pum-active .ra-auth-cascade-active .ra-smartcaptcha-wrap.ra-smartcaptcha-invisible.ra-cascade-visible {
    min-height: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
}

/* Keep the existing surfaces crisp while the popup itself is animating. */
.pum-active .ra-auth-cascade-active .yandex-login-btn,
.pum-active .ra-auth-cascade-active .rentarest-vkid-container .VkIdSdk_oauth_item {
    backface-visibility: hidden;
    -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
    .pum-active .ra-auth-cascade-active .yandex-oauth-container,
    .pum-active .ra-auth-cascade-active .yandex-divider,
    .pum-active .ra-auth-cascade-active .yandex-login-btn,
    .pum-active .ra-auth-cascade-active .rentarest-vkid-container,
    .pum-active .ra-auth-cascade-active .ra-smartcaptcha-wrap {
        transition: none !important;
        transform: none !important;
    }
}


/* Security Release 1: user-facing OAuth collision message. */
.pum-active .rentarest-oauth-inline-error {
    margin: 10px 0 2px;
    font-size: 12px;
    line-height: 1.45;
    text-align: center;
    color: rgba(255, 235, 225, .92);
}

/* 0.5.3: Yandex logo is inline SVG. Never request the legacy Media Library background. */
.yandex-login-btn.yandex-official-black .yandex-logo-black {
    background: none !important;
}

.yandex-login-btn.yandex-official-black .yandex-logo-black > svg {
    display: block;
    width: 100%;
    height: 100%;
    flex: 0 0 auto;
}

/* Provider hand-off feedback: keep the popup readable while the callback is processed. */
.pum-active .yandex-login-btn.is-authenticating,
.pum-active .rentarest-vkid-container.is-authenticating .VkIdSdk_oauth_item {
    position: relative !important;
    pointer-events: none !important;
    cursor: wait !important;
}

.pum-active .yandex-login-btn.is-authenticating {
    padding-right: 48px !important;
    opacity: .82 !important;
}

.pum-active .yandex-login-btn.is-authenticating::after,
.pum-active .rentarest-vkid-container.is-authenticating .VkIdSdk_oauth_item:first-child::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    right: 17px !important;
    width: 17px !important;
    height: 17px !important;
    margin: -9px 0 0 !important;
    border: 2px solid rgba(218, 213, 170, .28) !important;
    border-top-color: #e1b759 !important;
    border-radius: 50% !important;
    background: transparent !important;
    box-shadow: none !important;
    animation: ra-oauth-provider-spin .72s linear infinite !important;
    z-index: 4;
}

.pum-active .rentarest-vkid-container.is-authenticating {
    pointer-events: none !important;
}

.pum-active .rentarest-vkid-container.is-authenticating .VkIdSdk_oauth_item {
    opacity: .76 !important;
}

@keyframes ra-oauth-provider-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .pum-active .yandex-login-btn.is-authenticating::after,
    .pum-active .rentarest-vkid-container.is-authenticating .VkIdSdk_oauth_item:first-child::after {
        animation-duration: 1.4s !important;
    }
}