/* Yandex SmartCaptcha styles for 1C-Bitrix */

.delement-yandexcaptcha-container {
    margin-top: 8px;
    margin-bottom: 8px;
    min-height: 65px;
}

.delement-yandexcaptcha-placeholder {
    min-height: 65px;
}

.delement-yandexcaptcha-container .smart-captcha {
    display: block;
    min-height: 65px;
}

form[data-delement-yandexcaptcha-ready="Y"] .captcha_reload {
    display: none !important;
}

.delement-yandexcaptcha-error {
    color: #c00;
    font-size: 13px;
    margin-top: 4px;
}

/* Aspro registration: prevent the legacy CAPTCHA flashing before JS initializes.
   visibility (not display) keeps dimensions for SmartCaptcha rendering.
   Without JS the normal CAPTCHA remains visible. */
html.delement-yandexcaptcha-js form#registraion-page-form .captcha-row {
    visibility: hidden;
}
html.delement-yandexcaptcha-js form#registraion-page-form[data-delement-yandexcaptcha-ready="Y"] .captcha-row,
html.delement-yandexcaptcha-js form#registraion-page-form[data-delement-yandexcaptcha-fallback="Y"] .captcha-row {
    visibility: visible;
}

.delement-yandexcaptcha-invalid iframe {
    outline: 2px solid #e53935 !important;
    outline-offset: -2px;
    border-radius: 6px;
}

.delement-yandexcaptcha-validation-message {
    color: #e53935;
    font-size: 13px;
    margin-top: 6px;
}

/* Aspro Lite77 registration layout migrated from custom.css.
   Scoped to #registraion-page-form so other forms stay untouched. */
/* 1. Основной контейнер Яндекс SmartCaptcha */
#registraion-page-form .captcha-row:has(
    .delement-yandexcaptcha-container
) {
    display: flow-root !important;
    position: relative;
    height: auto !important;
    min-height: 0 !important;
    width: 100%;
    max-width: 100%;
    padding: 0 !important;
    margin: 12px 0 24px !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    overflow: visible !important;
}


/* 2. Скрываем стандартную подпись "Введите код"
   только если Яндекс заменил CAPTCHA Битрикс */
#registraion-page-form .captcha-row:has(
    input[name="captcha_word"][data-delement-hidden="Y"]
) > label[for="captcha_word"] {
    display: none !important;
}


/* 3. Исправляем ширину блока CAPTCHA */
#registraion-page-form .captcha-row:has(
    .delement-yandexcaptcha-container
) > .captcha_input {
    display: block !important;
    position: static !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 118px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    overflow: visible !important;
}


/* 4. Убираем внешнюю рамку контейнера Яндекса */
#registraion-page-form .captcha-row:has(
    .delement-yandexcaptcha-container
) .delement-yandexcaptcha-container {
    position: relative;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* DEV v3: understated visual feedback, confined to the existing widget and message. */
.delement-yandexcaptcha-invalid iframe {
    animation: delement-yandexcaptcha-nudge 360ms ease-out,
               delement-yandexcaptcha-red-pulse 530ms ease-out;
}

.delement-yandexcaptcha-validation-message {
    animation: delement-yandexcaptcha-message-in 230ms ease-out both;
}

@keyframes delement-yandexcaptcha-nudge {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
}

@keyframes delement-yandexcaptcha-red-pulse {
    0% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
    45% { box-shadow: 0 0 0 4px rgba(229, 57, 53, 0.18); }
    100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); }
}

@keyframes delement-yandexcaptcha-message-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .delement-yandexcaptcha-invalid iframe,
    .delement-yandexcaptcha-validation-message {
        animation: none;
    }
}