/* catalog/view/theme/default/stylesheet/social_login.css */

.social-login-buttons {
    margin: 20px 0;
}

#User-menu .sl-header-login-icon,
.sl-header-login-fallback .sl-header-login-icon {
    display: block;
}

/* === SITE-SPECIFIC START: igoryork.com header login icon compatibility === */
/*
 * В теме igoryork есть правило:
 * #hrx .top-menu *:not(a):not(a>span):not(img):not(script){display:contents}
 * На мобильных браузерах это может ломать контейнеры вокруг иконки входа.
 * Принудительно фиксируем рендер нашей иконки (файл User.svg) и fallback-варианта.
 */
#hrx .top-menu .sl-header-login-trigger svg * {
    display: inline !important;
}

#User-menu > .sl-header-login-trigger:hover,
#User-menu > .sl-header-login-trigger:focus,
#User-menu .sl-header-login-trigger:hover,
#User-menu .sl-header-login-trigger:focus,
.sl-header-login-fallback > .sl-header-login-trigger:hover,
.sl-header-login-fallback > .sl-header-login-trigger:focus {
    opacity: 0.85 !important;
}

.sl-header-login-fallback {
    display: inline-flex;
    align-items: center;
}

#hrx .icon_block > .sl-header-login-fallback {
    margin-left: 30px;
    padding-bottom: 16px;
}

@media (max-width: 992px) {
    #hrx .icon_block > .sl-header-login-fallback {
        margin-left: 15px;
        padding-bottom: 0;
    }

}
/* === SITE-SPECIFIC END: igoryork.com header login icon compatibility === */

/* Social Login Header Modal */
#sl-login-modal {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    z-index: 1050 !important;
}

#sl-login-modal.fade,
#sl-login-modal.fade.in {
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
}

#sl-login-modal .sl-auth-modal-dialog {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    position: relative !important;
    float: none !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
}

#sl-login-modal.in {
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(0, 0, 0, 0.58);
    overflow-x: hidden;
    overflow-y: auto;
}

#sl-login-modal.in .sl-auth-modal-dialog {
    margin: 0 !important;
    transform: none !important;
}

#sl-login-modal .sl-auth-modal-content {
    border: 0;
    border-radius: 20px;
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.18);
    background: #ffffff;
    overflow: hidden;
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
}

#sl-login-modal .sl-auth-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 26px 16px;
    border-bottom: 0;
}

#sl-login-modal .sl-auth-modal-title {
    margin: 0;
    color: #101828;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    padding-right: 12px;
}

#sl-login-modal .sl-auth-modal-close {
    float: none;
    width: 36px;
    min-width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    opacity: 1;
    text-shadow: none;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color .15s ease, color .15s ease, opacity .15s ease;
}

#sl-login-modal .sl-auth-modal-close:hover {
    background: #f3f4f6;
    color: #111827;
    opacity: 1;
}

#sl-login-modal .sl-auth-modal-close:focus,
#sl-login-modal .sl-auth-modal-close:active {
    outline: none;
    opacity: 1;
}

#sl-login-modal .sl-auth-modal-close:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

#sl-login-modal .sl-auth-modal-close-icon {
    width: 16px;
    height: 16px;
    display: block;
    pointer-events: none;
}

#sl-login-modal .sl-auth-modal-close-text {
    font-size: 28px;
    line-height: 1;
    font-weight: 400;
    display: inline-block;
    margin-right: 2px;
    pointer-events: none;
}

#sl-login-modal .sl-auth-modal-body {
    padding: 0 26px 26px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#sl-login-modal .sl-auth-modal-text {
    margin: 0 0 18px;
    font-size: 14px;
    line-height: 1.55;
    color: #475467;
}

#sl-login-modal .sl-auth-modal-buttons {
    margin-top: 2px;
}

#sl-login-modal .sl-auth-modal-buttons .social-login-wrapper-dynamic {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
}

#sl-login-modal .sl-auth-modal-buttons .social-login-buttons {
    margin: 0;
}

#sl-login-modal .sl-auth-modal-buttons .social-login-buttons .buttons,
#sl-login-modal .sl-auth-modal-buttons .social-login-buttons .buttons.clearfix {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sl-account-links-block {
    margin: 0 0 24px;
    padding: 24px;
    border: 1px solid #dfe3ea;
    border-radius: 20px;
    background:
        radial-gradient(circle at top right, rgba(32, 156, 238, 0.08), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.sl-account-links-header {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 18px;
}

.sl-account-links-header-icon {
    width: 54px;
    min-width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0f766e 0%, #1d4ed8 100%);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    box-shadow: 0 14px 30px rgba(29, 78, 216, 0.18);
}

.sl-account-links-title {
    margin: 0 0 8px;
    font-size: 22px;
    line-height: 1.2;
    color: #0f172a;
}

.sl-account-links-description {
    margin: 0 0 10px;
    color: #475467;
    line-height: 1.6;
}

.sl-account-links-trust {
    display: inline-flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(15, 118, 110, 0.10);
    color: #0f766e;
    font-weight: 600;
    line-height: 1.45;
}

.sl-account-links-notice {
    margin-bottom: 18px;
    border-radius: 14px;
}

.sl-account-links-grid {
    display: flex;
    flex-wrap: wrap;
}

.sl-account-links-panel {
    height: 100%;
    padding: 18px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.92);
}

.sl-account-links-panel-connect {
    background: linear-gradient(180deg, rgba(249, 250, 251, 0.98) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.sl-account-links-panel-title {
    margin-bottom: 14px;
    font-size: 16px;
    font-weight: 700;
    color: #111827;
}

.sl-account-provider-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sl-account-provider-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 15px;
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    background: #fff;
}

.sl-account-provider-icon {
    width: 44px;
    min-width: 44px;
    height: 44px;
    border-radius: 14px;
    background: #f3f4f6;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.sl-account-provider-icon .sl-svg-icon {
    width: 22px;
    height: 22px;
}

.sl-account-provider-meta {
    min-width: 0;
}

.sl-account-provider-title {
    font-weight: 700;
    color: #111827;
}

.sl-account-provider-name,
.sl-account-provider-date,
.sl-account-links-empty {
    color: #667085;
    line-height: 1.55;
}

.sl-account-provider-date {
    font-size: 12px;
    margin-top: 2px;
}

.sl-account-links-buttons .social-login-buttons {
    margin: 0;
}

.sl-account-links-buttons .social-login-buttons .buttons,
.sl-account-links-buttons .social-login-buttons .buttons.clearfix {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sl-account-links-title-page {
    font-weight: 800;
}

.sl-account-links-metrics {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 18px;
}

.sl-account-links-metric {
    min-width: 140px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(148, 163, 184, 0.22);
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

.sl-account-links-metric-value {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.1;
    color: #0f172a;
}

.sl-account-links-metric-label {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    line-height: 1.45;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sl-account-security-page {
    padding-bottom: 24px;
}

.sl-account-security-page-header {
    margin-bottom: 20px;
}

.sl-account-security-page-title {
    margin: 0 0 8px;
    color: #0f172a;
}

.sl-account-security-page-intro {
    max-width: 780px;
    margin: 0;
    color: #475467;
    line-height: 1.65;
}

.sl-account-security-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    font-weight: 600;
}

.sl-account-security-back:before {
    content: '\f060';
    font-family: FontAwesome;
    font-size: 12px;
}

.sl-account-security-nav {
    margin: 0 0 28px;
}

.sl-account-security-nav-heading {
    margin: 0 0 14px;
}

.sl-account-security-nav-list {
    margin: 0;
}

.sl-account-security-nav-list li + li {
    margin-top: 10px;
}

.sl-account-security-nav-link,
.sl-account-sidebar-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.sl-account-security-nav-link {
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    text-decoration: none;
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}

.sl-account-security-nav-link:hover,
.sl-account-security-nav-link:focus {
    border-color: #bfdbfe;
    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.10);
    text-decoration: none;
}

.sl-account-security-nav-link.is-active,
.sl-account-sidebar-link.active {
    border-color: #93c5fd;
    background: linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
}

.sl-account-sidebar-link.active,
.sl-account-sidebar-link.active:hover,
.sl-account-sidebar-link.active:focus {
    color: #111827;
}

.sl-account-security-nav-link-copy,
.sl-account-sidebar-link-copy {
    min-width: 0;
}

.sl-account-security-nav-link-title {
    display: block;
    font-weight: 700;
    color: #111827;
}

.sl-account-security-nav-link-description {
    display: block;
    margin-top: 3px;
    color: #667085;
    line-height: 1.5;
}

.sl-account-sidebar-link {
    position: relative;
}

.sl-live-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 48px;
    padding: 6px 12px 6px 24px;
    border-radius: 999px;
    border: 1px solid rgba(34, 197, 94, 0.20);
    background: linear-gradient(180deg, rgba(240, 253, 244, 0.98) 0%, rgba(220, 252, 231, 0.98) 100%);
    color: #166534;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.02em;
}

.sl-live-badge:before {
    content: '';
    position: absolute;
    left: 11px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -3.5px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35);
    animation: sl-live-badge-pulse 2.2s infinite;
}

.sl-live-badge-sidebar {
    min-width: 42px;
    padding-right: 10px;
}

.sl-passkey-manage-block {
    margin: 0 0 24px;
    padding: 24px;
    border: 1px solid #dfe3ea;
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(16, 185, 129, 0.10), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.sl-passkey-manage-header-icon {
    background: linear-gradient(135deg, #0f766e 0%, #16a34a 100%);
    box-shadow: 0 14px 30px rgba(22, 163, 74, 0.18);
}

.sl-passkey-register-area {
    margin-bottom: 18px;
}

.sl-passkey-register-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border-radius: 16px;
}

.sl-account-links-recovery {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 18px;
    padding: 18px 20px;
    border: 1px solid rgba(37, 99, 235, 0.14);
    border-radius: 18px;
    background:
        radial-gradient(circle at top right, rgba(59, 130, 246, 0.10), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
}

.sl-account-links-recovery-title {
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;
}

.sl-account-links-recovery-text {
    margin: 0;
    color: #475467;
    line-height: 1.65;
}

.sl-account-links-recovery-btn {
    min-width: 220px;
    border-radius: 14px;
    font-weight: 700;
}

.sl-account-merge-block {
    margin: 0 0 24px;
    padding: 24px;
    border: 1px solid #dfe3ea;
    border-radius: 20px;
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.08);
}

.sl-account-merge-header-icon {
    background: linear-gradient(135deg, #0f766e 0%, #2563eb 100%);
    box-shadow: 0 14px 30px rgba(37, 99, 235, 0.20);
}

.sl-account-merge-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 18px 0 16px;
}

.sl-account-merge-step {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid #d7dce5;
    border-radius: 999px;
    background: #ffffff;
    color: #475467;
    font-weight: 600;
}

.sl-account-merge-step.is-active,
.sl-account-merge-step.is-complete {
    border-color: rgba(37, 99, 235, 0.16);
    background: rgba(239, 246, 255, 0.88);
    color: #1d4ed8;
}

.sl-account-merge-step-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(37, 99, 235, 0.10);
    font-size: 12px;
    font-weight: 800;
}

.sl-account-merge-notice,
.sl-account-merge-plan-message {
    margin-bottom: 18px;
}

.sl-account-merge-panel {
    padding: 20px;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.94);
}

.sl-account-merge-panel-intro {
    margin: 8px 0 18px;
    color: #667085;
    line-height: 1.7;
}

.sl-account-merge-form .form-control {
    height: 46px;
    border-radius: 12px;
}

.sl-account-merge-help {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(240, 253, 250, 0.88);
    color: #115e59;
    line-height: 1.65;
}

.sl-account-merge-compare {
    margin-bottom: 18px;
}

.sl-account-merge-card {
    height: 100%;
    padding: 18px;
    border: 1px solid #e6eaf0;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}

.sl-account-merge-card-primary {
    border-color: rgba(37, 99, 235, 0.18);
    background:
        radial-gradient(circle at top right, rgba(37, 99, 235, 0.08), transparent 36%),
        linear-gradient(180deg, #eff6ff 0%, #ffffff 100%);
}

.sl-account-merge-card-topline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.sl-account-merge-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #344054;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.sl-account-merge-card-name {
    font-size: 20px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.3;
}

.sl-account-merge-card-email {
    margin-top: 4px;
    color: #2563eb;
    word-break: break-word;
}

.sl-account-merge-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
}

.sl-account-merge-card-meta span {
    display: inline-flex;
    align-items: center;
    padding: 7px 10px;
    border-radius: 999px;
    background: #f8fafc;
    color: #475467;
    font-size: 12px;
    font-weight: 700;
}

.sl-account-merge-card-foot {
    margin-top: 16px;
    color: #667085;
    line-height: 1.6;
}

.sl-account-merge-summary {
    padding: 16px 18px;
    border-radius: 18px;
    background: #f8fafc;
}

.sl-merge-confidence-card {
    border: 1px solid rgba(14, 116, 144, 0.14);
    background:
        linear-gradient(180deg, rgba(236, 253, 245, 0.92) 0%, rgba(239, 246, 255, 0.92) 100%);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06);
}

.sl-account-merge-summary-title,
.sl-account-merge-list-title {
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.sl-account-merge-transfer-list {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.sl-account-merge-transfer-item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
}

.sl-account-merge-transfer-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 8px;
    border-radius: 999px;
    background: rgba(37, 99, 235, 0.10);
    color: #1d4ed8;
    font-size: 12px;
    font-weight: 800;
}

.sl-account-merge-transfer-label {
    color: #344054;
    font-weight: 600;
}

.sl-account-merge-list-block {
    margin-top: 16px;
    padding: 16px 18px;
    border-radius: 18px;
    background: rgba(240, 253, 244, 0.72);
}

.sl-account-merge-list-block.is-danger {
    background: rgba(254, 242, 242, 0.9);
}

.sl-account-merge-list {
    margin: 0;
    padding-left: 18px;
    color: #475467;
    line-height: 1.7;
}

.sl-account-merge-list-block.is-danger .sl-account-merge-list,
.sl-account-merge-list-block.is-danger .sl-account-merge-list-title {
    color: #991b1b;
}

.sl-account-merge-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.sl-account-merge-confirm-form {
    margin: 0;
}

.sl-account-merge-primary-btn {
    min-width: 250px;
    border-radius: 14px;
    font-weight: 700;
}

@keyframes sl-live-badge-pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.35);
    }

    70% {
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.sl-provider-google .sl-account-provider-icon {
    background: rgba(219, 68, 55, 0.10);
    color: #db4437;
}

.sl-provider-telegram .sl-account-provider-icon {
    background: rgba(32, 156, 238, 0.10);
    color: #209cee;
}

.sl-provider-vk .sl-account-provider-icon {
    background: rgba(39, 135, 245, 0.10);
    color: #2787f5;
}

.sl-provider-github .sl-account-provider-icon,
.sl-provider-apple .sl-account-provider-icon,
.sl-provider-steam .sl-account-provider-icon {
    background: rgba(17, 24, 39, 0.08);
    color: #111827;
}

.sl-provider-yandex .sl-account-provider-icon,
.sl-provider-tbank .sl-account-provider-icon {
    background: rgba(239, 68, 68, 0.10);
    color: #dc2626;
}

.sl-provider-sber .sl-account-provider-icon {
    background: rgba(22, 163, 74, 0.10);
    color: #16a34a;
}

.sl-provider-facebook .sl-account-provider-icon {
    background: rgba(37, 99, 235, 0.10);
    color: #2563eb;
}

.sl-provider-x .sl-account-provider-icon {
    background: rgba(51, 65, 85, 0.10);
    color: #334155;
}

@media (max-width: 767px) {
    .sl-account-links-block {
        padding: 18px;
        border-radius: 18px;
    }

    .sl-passkey-manage-block {
        padding: 18px;
        border-radius: 18px;
    }

    .sl-account-links-header {
        flex-direction: column;
    }

    .sl-account-links-header-icon {
        width: 48px;
        min-width: 48px;
        height: 48px;
    }

    .sl-account-links-grid > [class*="col-"] + [class*="col-"] {
        margin-top: 15px;
    }

    .sl-account-links-recovery,
    .sl-account-merge-card-topline,
    .sl-account-merge-actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .sl-account-links-recovery-btn,
    .sl-account-merge-primary-btn {
        width: 100%;
        min-width: 0;
    }

    .sl-account-merge-block {
        padding: 18px;
        border-radius: 18px;
    }

    .sl-account-merge-panel,
    .sl-account-merge-summary,
    .sl-account-merge-list-block {
        padding: 16px;
        border-radius: 16px;
    }

    .sl-account-merge-card {
        margin-bottom: 15px;
    }

    .sl-account-links-metric {
        min-width: calc(50% - 6px);
    }

    .sl-account-security-nav-link {
        flex-direction: column;
        align-items: flex-start;
    }

    .sl-live-badge,
    .sl-live-badge-sidebar {
        align-self: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-live-badge:before {
        animation: none;
    }
}

@media (max-width: 767px) {
    #sl-login-modal.in {
        align-items: flex-start;
        padding: 18px 10px;
    }

    #sl-login-modal .sl-auth-modal-dialog {
        width: 100%;
    }

    #sl-login-modal .sl-auth-modal-content {
        border-radius: 16px;
        max-height: calc(100vh - 36px);
    }

    #sl-login-modal .sl-auth-modal-header {
        padding: 18px 18px 12px;
    }

    #sl-login-modal .sl-auth-modal-title {
        font-size: 20px;
    }

    #sl-login-modal .sl-auth-modal-body {
        padding: 0 18px 18px;
    }

    #sl-login-modal .sl-auth-modal-text {
        margin-bottom: 14px;
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: no-preference) {
    #sl-login-modal.in .sl-auth-modal-dialog {
        animation: slModalPop .22s ease-out;
        transform-origin: top center;
    }
}

@keyframes slModalPop {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.social-login-buttons .buttons,
.social-login-buttons .buttons.clearfix {
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    gap: 10px;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
}

.social-login-buttons .buttons::-webkit-scrollbar,
.social-login-buttons .buttons.clearfix::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.sl-tel-country-selector.sl-tel-fixed {
    pointer-events: none;
    opacity: 0.95;
}

.sl-tel-country-selector.sl-tel-fixed .sl-tel-selected-country {
    cursor: default;
}

.social-login-wrapper-dynamic {
    width: 100%;
    /* <-- Новое изменение, ДОБАВЛЯЕМ */
}

/* Simple Checkout: guest auth card (old SMS-style visual shell with social buttons) */
#simplecheckout_customer.sl-simple-guest-mode > .checkout-heading,
#simplecheckout_customer.sl-simple-guest-mode > .simplecheckout-block-content {
    display: none !important;
}

.sl-simple-checkout-auth-card {
    border: 1px solid #8c8c8c;
    border-radius: 4px;
    background: #ffffff;
    padding: 22px 28px;
    margin: 0 0 18px;
}

.sl-simple-checkout-auth-card__title {
    margin: 0;
    text-align: center;
    color: #111111;
    font-size: 44px;
    line-height: 1.18;
    font-weight: 500;
}

.sl-simple-checkout-auth-card__divider {
    border-top: 1px solid #e7e7e7;
    margin: 22px 0 16px;
}

.sl-simple-checkout-auth-card__text {
    margin: 0 0 18px;
    text-align: center;
    color: #161616;
    font-size: 36px;
    line-height: 1.45;
}

.sl-simple-checkout-auth-card__buttons .social-login-wrapper-dynamic {
    max-width: none !important;
    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

@media (prefers-reduced-motion: no-preference) {
    .sl-simple-checkout-auth-card.sl-simple-checkout-auth-card--animated {
        animation: slSimpleCardIn .24s ease-out;
    }

    @keyframes slSimpleCardIn {
        from {
            opacity: 0;
            transform: translateY(6px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@media (max-width: 991px) {
    .sl-simple-checkout-auth-card {
        padding: 18px;
    }

    .sl-simple-checkout-auth-card__title {
        font-size: 34px;
    }

    .sl-simple-checkout-auth-card__text {
        font-size: 28px;
    }
}

@media (max-width: 767px) {
    .sl-simple-checkout-auth-card__title {
        font-size: 28px;
    }

    .sl-simple-checkout-auth-card__text {
        font-size: 22px;
        line-height: 1.35;
    }
}

/* Unishop2 modal: отключаем внутренние scroll-контейнеры у блока соц-кнопок,
   чтобы не появлялись полосы прокрутки рядом с SMS-кнопкой. */
#popup_register > .social-login-wrapper-dynamic,
#popup_register > .social-login-wrapper-dynamic .social-login-buttons,
#popup_register > .social-login-wrapper-dynamic .buttons,
#popup_register > .social-login-wrapper-dynamic .buttons.clearfix,
.modal-login .modal-body > .social-login-wrapper-dynamic,
.modal-login .modal-body > .social-login-wrapper-dynamic .social-login-buttons,
.modal-login .modal-body > .social-login-wrapper-dynamic .buttons,
.modal-login .modal-body > .social-login-wrapper-dynamic .buttons.clearfix {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
}

/* Дополнительно снимаем внутренний скролл с корневых контейнеров модалки авторизации. */
#popup_register,
#popup_register .popup_register,
.modal-login .modal-body,
.modal-login .modal-login__form {
    max-height: none !important;
    overflow: visible !important;
}

.vk-lowcode-container {
    width: 100% !important;
}

.yandex-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 44px;
    padding: 0 16px;
    border-radius: var(--sl-yandex-radius, 8px);
    text-decoration: none;
    font-family: -apple-system, system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1;
    transition: filter 0.2s ease-in-out;
    cursor: pointer;
    border: 1px solid transparent;
    width: 100%;
}

.yandex-login-button:hover {
    filter: brightness(0.95);
}

.yandex-login-button:active {
    filter: brightness(0.9);
    transform: translateY(1px);
}

.yandex-login-button__icon {
    display: flex;
    align-items: center;
    width: 24px;
    height: 24px;
    margin-right: 12px;
}

.yandex-login-button__icon svg {
    width: 100%;
    height: 100%;
}

.yandex-login-button__text {
    position: relative;
    top: 1px;
    margin-left: 8px;
    font-size: 16px;
    font-weight: 500;
}

.yandex-login-button--yellow {
    background-color: #FFDE00;
    color: #000000;
}

.yandex-login-button--light {
    background-color: #f5f5f5;
    color: #212121;
    border: 1px solid #e0e0e0;
}

.yandex-login-button--light:hover {
    background-color: #ebebeb;
    border-color: #d1d1d1;
    filter: none;
}

.yandex-login-button--dark {
    background-color: #2c2c2c;
    color: #f0f0f0;
    border: 1px solid #444;
}

.yandex-login-button--dark:hover {
    background-color: #3a3a3a;
    border-color: #555;
    filter: none;
}

/* Harmonize Yandex button heights with module button scale.
   Gateway can inject inline height/font-size (e.g. 48px for size-m),
   so we pin the expected S/M/L dimensions here. */
.yandex-login-button.yandex-login-button--size-s {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 14px;
}

.yandex-login-button.yandex-login-button--size-m {
    height: 44px !important;
    min-height: 44px !important;
    font-size: 16px;
}

.yandex-login-button.yandex-login-button--size-l {
    height: 48px !important;
    min-height: 48px !important;
    font-size: 16px;
}

/* === Стили для кнопки Сбер ID (Sber) === */
.sber-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-family: -apple-system, system-ui, sans-serif;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    width: 100%;
}

.sber-login-button:hover {
    filter: brightness(0.95);
}

.sber-login-button svg {
    margin-right: 12px;
}

.sber-login-button--size-s {
    padding: 0 16px;
    border-radius: 6px;
}

.sber-login-button--size-m {
    padding: 0 20px;
    border-radius: 8px;
}

.sber-login-button--size-l {
    padding: 0 24px;
    border-radius: 12px;
}

.sber-login-button--size-s svg {
    width: 16px;
    height: 16px;
}

.sber-login-button--size-m svg {
    width: 22px;
    height: 22px;
}

.sber-login-button--size-l svg {
    width: 26px;
    height: 26px;
}

/* === Стили для кнопки Google === */
.google-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
    font-family: -apple-system, system-ui, sans-serif;
    font-weight: 500;
    transition: background-color .2s, box-shadow .2s;
    cursor: pointer;
    width: 100%;
    border-radius: 8px;
}

.google-login-button__icon {
    margin-right: 12px;
    line-height: 0;
}

.google-login-button__icon svg {
    width: 20px;
    height: 20px;
}

.google-login-button__text {
    line-height: 1;
}

.google-login-button--light {
    background-color: #fff;
    color: #3C4043;
    border: 1px solid #dadce0;
}

.google-login-button--light.google-login-button--with-shadow {
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.google-login-button--light:hover {
    border-color: #cacdd1;
    background-color: #f8f9fa;
}

.google-login-button--light:hover.google-login-button--with-shadow {
    box-shadow: 0 1px 3px 0 rgba(60, 64, 67, .3), 0 4px 6px 3px rgba(60, 64, 67, .15);
}

.google-login-button--dark {
    background-color: #1a73e8;
    color: #fff;
    border: 1px solid transparent;
}

.google-login-button--dark:hover {
    background-color: #287ae6;
    box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15);
}

.google-login-button--dark:active {
    background-color: #5595e8;
}

.google-login-button--size-s {
    height: 32px;
    font-size: 13px;
}

.google-login-button--size-m {
    height: 40px;
    font-size: 16px;
}

.google-login-button--size-l {
    height: 48px;
    font-size: 16px;
}

/* === Стили для виджета Telegram === */
.telegram-login-container {
    width: 100% !important;
    display: flex;
    justify-content: center;
}

/* === Стили для кнопки Facebook === */
.facebook-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    min-height: 48px;
    padding: 8px 16px;
    background-color: #1877F2;
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-family: -apple-system, system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
    border: none;
}

.facebook-login-button:hover {
    background-color: #166fe5;
}

.facebook-login-icon {
    width: 24px;
    height: 24px;
    margin-right: 12px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M22,12c0-5.52-4.48-10-10-10S2,6.48,2,12c0,4.84,3.44,8.87,8,9.8V15H8v-3h2V9.5C10,7.57,11.57,6,13.5,6H16v3h-1.5 c-0.83,0-1,0.47-1,1v2h2.5l-0.5,3H13v6.95C18.05,21.45,22,17.19,22,12z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.facebook-disclaimer {
    font-size: 9px;
    font-weight: 400;
    opacity: 0.85;
    margin-top: 2px;
}

/* === Стили для кнопки GitHub === */
.github-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    background-color: #333333;
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    font-family: -apple-system, system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    transition: background-color 0.2s ease-in-out;
    cursor: pointer;
    border: none;
}

.github-login-button:hover {
    background-color: #444444;
}

.github-login-button .fa-github {
    margin-right: 12px;
    font-size: 1.4em;
}

/* === Стили для интеграции с Unishop2 === */
#popup_register,
.modal-login .modal-body {
    display: flex;
    flex-direction: column;
}

#popup_register .popup_register,
.modal-login .modal-login__form {
    order: 1;
}

.social-login-wrapper-unishop {
    order: 2;
    margin-top: 15px;
    margin-bottom: 15px;
}

#popup_register .modal-register__btn,
.modal-login .modal-login__btn {
    order: 3;
}

#popup_register .modal-register__links,
.modal-login .modal-login__links {
    order: 4;
}

/* Хосты модалок с SMS-формой: убираем внутренние полосы прокрутки.
   Высота модального контента должна расширяться вместе с формой. */
.sl-sms-host-no-scroll {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    min-height: 0 !important;
}

.sl-sms-host-no-scroll::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* === Стили для формата "Только иконки" === */
.social-buttons--icons .buttons,
.social-buttons--icons .buttons.clearfix {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin: 0;
    padding: 0;
}

.social-buttons--icons .social-button-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 8px;
    text-decoration: none;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    font-size: 24px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.social-buttons--icons .social-button-icon:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

.social-buttons--icons .social-button-icon--yandex {
    background-color: #FFDE00;
    color: #000000;
}

.social-buttons--icons .social-button-icon--vk {
    background-color: #0077FF;
    color: #FFFFFF;
    font-size: 22px;
}

.social-buttons--icons .social-button-icon--sber {
    background-color: #21A038;
    color: #FFFFFF;
}

.social-buttons--icons .social-button-icon--google {
    background-color: #FFFFFF;
    color: #757575;
    border: 1px solid #E0E0E0;
}

.social-buttons--icons .social-button-icon--telegram {
    background-color: #2AABEE;
    color: #FFFFFF;
}

.social-buttons--icons .social-button-icon--facebook {
    background-color: #1877F2;
    color: #FFFFFF;
}

.social-buttons--icons .social-button-icon--steam {
    background-color: #2a475e;
    color: #c7d5e0;
}

.social-buttons--icons .social-button-icon--github {
    background-color: #333333;
    color: #FFFFFF;
    font-size: 22px;
}

.social-buttons--icons .social-button-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

.social-buttons--icons .social-button-icon--google svg {
    fill: initial;
    width: 22px;
    height: 22px;
}

/* === Стили для кнопки T-Bank ID === */
.social-login-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    text-decoration: none;
    font-family: -apple-system, system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out, filter 0.2s ease-in-out;
}

.social-login-button:hover {
    filter: brightness(1.15);
}

.social-login-button__icon {
    margin-right: 12px;
    line-height: 0;
    display: flex;
    align-items: center;
}

.social-login-button--tbank {
    background-color: #333333;
    color: #ffffff;
}

.social-login-button--tbank:hover {
    background-color: #444444;
    filter: none;
}

.social-login-button--tbank .social-login-button__icon--tbank {
    width: 24px;
    height: 24px;
}

.social-buttons--icons .social-button-icon--tbank {
    background-color: #FFFFFF;
    border: 1px solid #E0E0E0;
    font-size: 29px;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.social-buttons--icons .social-button-icon--tbank:hover {
    background-color: #f5f5f5;
    border-color: #cccccc;
}

/* === Стили для кнопки MAX === */
.social-login-button--max {
    /* Фирменный градиент */
    background: linear-gradient(90deg, #E31E24 0%, #FF6B00 100%);
    color: #ffffff;
    border: none;
}

.social-login-button--max:hover {
    filter: brightness(1.1);
}

/* Иконка внутри полной кнопки (белая) */
.social-login-button--max .social-login-button__icon {
    /* SVG "M" in a square/bubble */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12zM7 9l2.5 5 2.5-5h2l-5 10L4 9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 24px;
    height: 24px;
    color: transparent;
    /* Скрываем текст иконки, если он есть */
}

/* Класс для fa-max, используемый в WappiProvider для OTP попапа (цветная) */
.fa-max {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23E31E24'%3E%3Cpath d='M20 2H4c-1.1 0-2 .9-2 2v18l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 14H6l-2 2V4h16v12zM7 9l2.5 5 2.5-5h2l-5 10L4 9z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 1.2em;
    /* Чуть шире обычной иконки */
    height: 1em;
    display: inline-block;
    vertical-align: middle;
}

.fa-max::before {
    content: "";
    /* Убираем стандартный контент FontAwesome */
}

/* Custom MAX Icon via Mask (Inherits Color) */
.fa-max-brand {
    width: 1em;
    height: 1em;
    display: inline-block;
    vertical-align: middle;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M508.211 878.328c-75.007 0-109.864-10.95-170.453-54.75-38.325 49.275-159.686 87.783-164.979 21.9 0-49.456-10.95-91.248-23.36-136.873-14.782-56.21-31.572-118.807-31.572-209.508 0-216.626 177.754-379.597 388.357-379.597 210.786 0 375.947 171.001 375.947 381.604.707 207.347-166.595 376.118-373.94 377.224m3.103-571.585c-102.564-5.292-182.499 65.7-200.201 177.024-14.6 92.162 11.315 204.398 33.397 210.238 10.585 2.555 37.23-18.98 53.837-35.587a189.8 189.8 0 0 0 92.71 33.032c106.273 5.112 197.08-75.794 204.215-181.95 4.154-106.382-77.67-196.486-183.958-202.574z' /%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M508.211 878.328c-75.007 0-109.864-10.95-170.453-54.75-38.325 49.275-159.686 87.783-164.979 21.9 0-49.456-10.95-91.248-23.36-136.873-14.782-56.21-31.572-118.807-31.572-209.508 0-216.626 177.754-379.597 388.357-379.597 210.786 0 375.947 171.001 375.947 381.604.707 207.347-166.595 376.118-373.94 377.224m3.103-571.585c-102.564-5.292-182.499 65.7-200.201 177.024-14.6 92.162 11.315 204.398 33.397 210.238 10.585 2.555 37.23-18.98 53.837-35.587a189.8 189.8 0 0 0 92.71 33.032c106.273 5.112 197.08-75.794 204.215-181.95 4.154-106.382-77.67-196.486-183.958-202.574z' /%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.fa-max-brand::before {
    content: '' !important;
    display: none;
}

/* Для режима "Только иконки" (Белый фон, цветная иконка) */
.social-buttons--icons .social-button-icon--max {
    background-color: #ffffff;
    color: #E31E24;
    /* Красный цвет самого логотипа */
    border: 1px solid #e0e0e0;
}

.social-buttons--icons .social-button-icon--max:hover {
    background-color: #fff0f0;
    border-color: #E31E24;
}

.social-buttons--icons .social-login-button__icon {
    margin-right: 0;
}


/* ==========================================================================
   [ИСПРАВЛЕНИЕ v4] Финальные стили для формы СМС без "прыжка"
   ========================================================================== */

/* 1. Родительский контейнер становится positioning context и плавно меняет высоту */
.sl-sms-container {
    position: relative;
    width: 100%;
    /* Начальная высота равна высоте кнопки */
    min-height: 44px;
    transition: min-height 0.35s ease-in-out;
}

/* 2. Оба блока (кнопка и форма) теперь позиционируются абсолютно внутри родителя */
.sl-sms-container .sl-sms-trigger,
.sl-sms-container .sl-sms-form {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Анимируем прозрачность и смещение, а не высоту */
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s 0.3s;
}

/* 3. Начальное состояние: кнопка видима... */
.sl-sms-container .sl-sms-trigger {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    transition-delay: 0.1s;
}

/* 4. ...а форма невидима и немного смещена вверх для красивой анимации */
.sl-sms-container .sl-sms-form {
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    pointer-events: none;
    /* Игнорируем клики по невидимой форме */
}

/* 5. Когда добавляется класс .sl-sms-form-active... */
.sl-sms-container.sl-sms-form-active .sl-sms-trigger {
    /* ...прячем кнопку */
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    pointer-events: none;
    transition-delay: 0s;
}

.sl-sms-container.sl-sms-form-active .sl-sms-form {
    /* ...и показываем форму */
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    /* Разрешаем взаимодействие с формой */
    transition-delay: 0.1s;
}

/* Стили для группы ввода номера */
.sl-tel-input-group {
    display: flex;
}

.sl-tel-country-selector {
    position: relative;
    flex-shrink: 0;
}

.sl-tel-selected-country {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 44px;
    padding: 0 10px 0 12px;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: var(--sl-sms-radius, 8px) 0 0 var(--sl-sms-radius, 8px);
    background-color: #f9f9f9;
    cursor: pointer;
    transition: background-color 0.2s;
}

.sl-tel-selected-country:hover {
    background-color: #f0f0f0;
}

.sl-tel-flag {
    width: 24px;
    height: 18px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-radius: 2px;
}

.sl-tel-selected-country .fa-caret-down {
    margin-left: 8px;
    color: #888;
    transition: transform 0.2s;
}

.sl-tel-country-selector.sl-tel-open .fa-caret-down {
    transform: rotate(180deg);
}

.sl-tel-country-list {
    position: fixed;
    z-index: 1051;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
    padding: 5px;
    margin: 0;
    list-style: none;
    max-height: 250px;
    overflow-y: auto;
    width: 300px;
}

.sl-tel-country-list.sl-tel-hidden {
    display: none;
}

.sl-tel-country-list li {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 4px;
}

.sl-tel-country-list li:hover,
.sl-tel-country-list li.sl-tel-highlight {
    background-color: #f0f8ff;
}

.sl-tel-country-list .sl-tel-flag {
    margin-right: 10px;
}

.sl-tel-country-list .sl-tel-country-name {
    flex-grow: 1;
    color: #333;
}

.sl-tel-country-list .sl-tel-dial-code {
    color: #888;
}

/* Стили для группы ввода (общее) */
.sl-input-group {
    display: flex;
    width: 100%;
    position: relative;
    /* Для позиционирования внутренних элементов */
}

.sl-input-group input {
    border: 1px solid #ccc;
    padding: 0 12px;
    height: 44px;
    font-size: 16px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.sl-input-group input:focus {
    border-color: #4CAF50;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
    z-index: 2;
}

/* Поле ввода номера телефона */
.sl-sms-phone-input {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    flex-grow: 1;
}

/* Поле ввода кода */
.sl-input-wrapper {
    position: relative;
    display: flex;
    flex-grow: 1;
}

.sl-input-wrapper .sl-sms-code-input {
    width: 100%;
    border-radius: var(--sl-sms-radius, 8px) 0 0 var(--sl-sms-radius, 8px);
    padding-right: 130px !important;
}

/* Ссылка "Изменить номер" */
/* Ссылка "Изменить номер" */
/* Ссылка "Изменить номер" */
.sl-change-number-link {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 500;
    color: #337ab7;
    text-decoration: none;
    cursor: pointer;

    /* --- ИСПРАВЛЕНИЯ --- */
    line-height: 1;
    /* Убирает невидимые отступы сверху/снизу текста */
    display: inline-block;
    /* Позволяет корректно применять трансформацию */
    white-space: nowrap;
    /* Запрещает перенос текста на две строки */

    /* Оптическая коррекция (раскомментируйте одну из строк, если нужно) */
    /* margin-top: -1px;   /* Если кажется, что текст слишком НИЗКО */
    /* margin-top: 1px;    /* Если кажется, что текст слишком ВЫСОКО */

    opacity: 0;
    /* Изначально полностью прозрачна */
    visibility: hidden;
    /* Изначально невидима и не кликабельна */
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;
    /* Анимация для прозрачности */
    z-index: 10;
    /* выше, чем z-index: 2 у input:focus */
    pointer-events: auto;
}

.sl-change-number-link:hover {
    text-decoration: underline;
    color: #23527c;
}

/* Когда контейнер classic в состоянии "шаг 2", делаем ссылку видимой */
.sl-sms-container.sl-sms-layout-classic.sl-sms-on-step-2 .sl-change-number-link {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
    /* Убираем задержку при появлении */
}

/* Единый стиль для всех кнопок в СМС-форме */
.sl-sms-button--styled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    text-decoration: none;
    font-family: -apple-system, system-ui, sans-serif;
    font-weight: 500;
    font-size: 16px;
    border: var(--strizh-sms-button-border, none);
    cursor: pointer;
    transition: filter 0.2s ease-in-out;
    background: var(--strizh-sms-button-bg, linear-gradient(45deg, var(--sl-sms-bg-start, #21d376), var(--sl-sms-bg-end, #00b3a1)));
    color: var(--strizh-sms-button-text, var(--sl-sms-text-color, #ffffff));
    border-radius: var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px));
    box-shadow: var(--strizh-sms-button-shadow, var(--sl-sms-shadow, none));
}

.sl-sms-button--styled:link,
.sl-sms-button--styled:visited,
.sl-sms-button--styled:active,
.sl-sms-button--styled:focus {
    color: var(--strizh-sms-button-text, var(--sl-sms-text-color, #ffffff));
}

.sl-sms-button--styled .social-login-button__text,
.sl-sms-button--styled .fa {
    color: inherit;
}

.sl-sms-button--styled:hover {
    color: var(--strizh-sms-button-hover-text, var(--sl-sms-hover-text-color, var(--strizh-sms-button-text, var(--sl-sms-text-color, #ffffff))));
    filter: brightness(1.1);
}

.sl-sms-button--styled:disabled {
    filter: brightness(0.8);
    cursor: not-allowed;
    opacity: 0.7;
}

.sl-sms-button--styled .fa-spinner {
    font-size: 1.2em;
}

.sl-visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.sl-sms-send-btn__icon {
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
}

.sl-sms-send-btn__text {
    display: inline-block;
    min-width: 0;
}

.sl-sms-send-btn {
    transition: width 0.18s ease, min-width 0.18s ease, max-width 0.18s ease, padding 0.18s ease, gap 0.18s ease;
}

.sl-sms-send-btn--icon_text,
.sl-sms-send-btn--icon-text,
.sl-sms-send-btn--icon,
.sl-sms-send-btn--icon-only {
    gap: 8px;
}

.sl-input-group .sl-sms-send-btn--icon_text,
.sl-input-group .sl-sms-send-btn--icon-text {
    padding-left: 12px;
    padding-right: 12px;
    max-width: 148px;
}

.sl-input-group .sl-sms-send-btn--icon_text .sl-sms-send-btn__text,
.sl-input-group .sl-sms-send-btn--icon-text .sl-sms-send-btn__text {
    max-width: 9ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sl-input-group .sl-sms-send-btn--icon,
.sl-input-group .sl-sms-send-btn--icon-only {
    width: 44px !important;
    min-width: 44px;
    padding: 0;
    justify-content: center;
}

/* Кнопка "Получить код" в группе */
.sl-input-group .sl-sms-send-btn {
    width: auto;
    flex-shrink: 0;
    border-radius: 0 var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) 0;
}

/* Кнопка "Войти" в группе */
.sl-input-group .sl-sms-verify-btn {
    width: auto;
    flex-shrink: 0;
    border-radius: 0 var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) 0;
}


/* Анимация "покачивания" */
@keyframes sl-shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.is-shaking {
    animation: sl-shake 0.6s cubic-bezier(.36, .07, .19, .97) both;
}

/* Поля с ошибкой */
.sl-input-group input.sl-input--error {
    border-color: #d9534f;
    box-shadow: 0 0 0 2px rgba(217, 83, 79, 0.2);
}

/* Контейнер для всех сообщений под формой */
.sl-sms-feedback-container {
    /* Убираем анимацию высоты отсюда */
    overflow: hidden;
    overflow-x: hidden;
    contain: layout paint;
}

.sl-sms-feedback-container>div {
    display: none;
    text-align: center;
    font-weight: 500;
    /* Переносим отступ сюда для корректного расчета высоты */
    padding-top: 8px;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sl-sms-feedback-container>div.is-active {
    display: block;
}

/* Стили для разных типов сообщений */
.sl-field-error {
    color: #d9534f;
    font-size: 13px;
}

.sl-sms-message {
    color: #3c763d;
    font-size: 13px;
}

.sl-sms-resend-timer {
    color: #888;
    font-size: 12px;
}

.sl-sms-fallback {
    text-align: center;
    font-size: 12px;
}


/* Поле-приманка (Honeypot) */
.form-field-hp {
    opacity: 0;
    position: absolute;
    top: 0;
    left: -9999px;
    height: 0;
    width: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

/* Контейнер для CAPTCHA */

/* Контейнер для невидимой reCAPTCHA */
#sl-recaptcha-container {
    position: relative;
    min-height: 10px;
    margin-top: 10px;
}


/* --- Контейнер защиты от ботов --- */
.sl-captcha-wrapper {
    margin: 10px 0;
    display: flex;
    justify-content: center;
    overflow: hidden;
    max-height: 180px;
    opacity: 1;
    transition: max-height 0.24s ease, opacity 0.2s ease, margin 0.2s ease, padding 0.2s ease;
    /* align-items: center;
    width: 100%;
    position: relative; */
    z-index: 10;

    /* По умолчанию высота 0, чтобы невидимые капчи не занимали место */
    /* min-height: 0;  */
}

/* Если капчи нет вообще (div пустой) - скрываем внешние отступы */
.sl-captcha-wrapper:empty {
    margin: 0;
    padding: 0;
}

/* После успешной проверки скрываем видимую CAPTCHA, чтобы не дублировать служебный статус провайдера. */
.sl-captcha-wrapper.sl-captcha-wrapper--solved {
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0;
    pointer-events: none;
}

/* Для Turnstile в interaction-only/invisible режиме не резервируем место в форме. */
.sl-captcha-wrapper.sl-captcha-wrapper--compact {
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sl-captcha-wrapper .cf-turnstile[data-appearance="interaction-only"],
.sl-captcha-wrapper .cf-turnstile[data-size="invisible"] {
    min-height: 0 !important;
    height: 0 !important;
    margin: 0 !important;
}

/* Фолбэк для старой разметки без .sl-captcha-wrapper */
.sl-captcha-widget--solved {
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
    transition: max-height 0.24s ease, opacity 0.2s ease, margin 0.2s ease, padding 0.2s ease;
}

/* --- Персональная настройка ТОЛЬКО для Google reCAPTCHA v2 --- */
/* Google v2 всегда видимая (галочка) и грузится медленно, вызывая наложение.
   Резервируем место ТОЛЬКО для неё. */
.sl-captcha-wrapper .g-recaptcha {
    min-height: 78px;
    min-width: 304px;
}

/* 
   Для Turnstile и hCaptcha высоту НЕ задаем.
   Если они настроены как "Visible" - они сами раздвинут контейнер при загрузке.
   Если они "Invisible" - они останутся скрытыми и не создадут пустую дыру.
*/



/* =========================
   SMS component (clean)
   ========================= */

/* Контекст контейнера */
.sl-sms-container {
    position: relative;
    width: 100%;
    min-height: 44px;
    transition: min-height 0.35s ease-in-out;
    box-sizing: border-box;
}

/* В модальных контекстах запрещаем анимацию высоты:
   это убирает мигающие полосы прокрутки при появлении сообщений. */
.sl-sms-container.sl-sms-in-modal {
    transition: none !important;
    overflow-x: hidden;
}

.sl-sms-container.sl-sms-in-modal .sl-sms-form,
.sl-sms-container.sl-sms-in-modal .sl-sms-step-1,
.sl-sms-container.sl-sms-in-modal .sl-sms-step-2,
.sl-sms-container.sl-sms-in-modal .sl-sms-feedback-container,
.sl-sms-container.sl-sms-in-modal .sl-sms-channel-note-host {
    overflow-x: hidden;
}

.sl-sms-container.sl-sms-in-modal .sl-webpush-teleport-toast {
    transform: none;
    transition: opacity 0.2s ease;
}

/* Триггер (кнопка) и сама форма — по умолчанию абсолютны, для анимации */
.sl-sms-container .sl-sms-trigger,
.sl-sms-container .sl-sms-form {
    position: absolute;
    inset: 0 0 auto 0;
    /* top:0; left:0; width:100% */
    width: 100%;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, visibility 0s 0.3s;
}

/* Начальное состояние: триггер видим, форма скрыта */
.sl-sms-container .sl-sms-trigger {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}

.sl-sms-container .sl-sms-form {
    opacity: 0;
    transform: translateY(-10px);
    visibility: hidden;
    pointer-events: none;
}

/* При активной форме показываем её, скрываем триггер */
.sl-sms-container.sl-sms-form-active .sl-sms-trigger {
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    pointer-events: none;
}

.sl-sms-container.sl-sms-form-active .sl-sms-form {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
}

/* Общие правила для input/group */
.sl-input-group {
    display: flex;
    width: 100%;
    align-items: center;
    position: relative;
    box-sizing: border-box;
}

/* Критично: позволяем детям сжиматься */
.sl-input-group>* {
    min-width: 0;
}

/* Поля */
.sl-input-group input {
    border: var(--strizh-sms-input-border, 1px solid var(--sl-sms-input-border, #ccc));
    padding: 0 12px;
    height: 44px;
    font-size: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    color: var(--strizh-sms-input-color, var(--sl-sms-input-color, #333));
    background-color: var(--strizh-sms-input-bg, var(--sl-sms-input-bg, #ffffff));
    font-weight: var(--strizh-sms-input-weight, var(--sl-sms-input-weight, 400));
}

.sl-input-group input:focus {
    border-color: var(--strizh-sms-input-focus-border, var(--sl-sms-input-focus-border, #4CAF50));
    box-shadow: var(--strizh-sms-input-focus-shadow, var(--sl-sms-input-focus-shadow, 0 0 0 2px rgba(76, 175, 80, 0.12)));
    z-index: 2;
}

/* Телефонное поле */
.sl-sms-phone-input {
    border-radius: 0;
    border-left: none;
    border-right: none;
    flex: 1 1 auto;
    min-width: 0;
}

/* Layout lock: composed code field keeps the left corner inside the input-group. */
.sl-input-group .sl-sms-code-input {
    border-radius: var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) 0 0 var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px)));
}

/* Wrapper для кода и overlay-кнопки */
.sl-input-wrapper {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
}

/* По умолчанию резервируем место под overlay (если нужен) */
.sl-input-wrapper .sl-sms-code-input {
    width: 100%;
    padding-right: 130px;
    box-sizing: border-box;
}

.sl-sms-container.sl-sms-layout-guided .sl-sms-step-2 {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
}

.sl-sms-container.sl-sms-layout-guided.sl-sms-on-step-2 .sl-sms-step-2 {
    display: flex !important;
}

.sl-sms-container.sl-sms-layout-guided .sl-sms-step-2-note-slot {
    display: block;
}

.sl-sms-channel-note-host {
    display: block;
    width: 100%;
    margin: 0;
    overflow: hidden;
}

.sl-sms-channel-note {
    --sl-channel-note-color: #2787F5;
    --sl-channel-note-rgb: 39, 135, 245;
    display: none;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(var(--sl-channel-note-rgb), 0.2);
    border-radius: 14px;
    background: linear-gradient(180deg,
            rgba(var(--sl-channel-note-rgb), 0.08) 0%,
            rgba(255, 255, 255, 0.98) 100%);
    box-shadow: 0 16px 28px -24px rgba(var(--sl-channel-note-rgb), 0.85);
    color: #0f172a;
    font-size: 13px;
    line-height: 1.35;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.sl-sms-channel-note.is-visible {
    display: flex;
    opacity: 1;
    transform: translateY(0);
}

.sl-otp-channel-pulse__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: rgba(var(--sl-channel-note-rgb), 0.12);
    color: var(--sl-channel-note-color);
    box-shadow: inset 0 0 0 1px rgba(var(--sl-channel-note-rgb), 0.12);
}

.sl-otp-channel-pulse__icon .fa {
    font-size: 15px;
    line-height: 1;
}

.sl-step2-channel-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
}

.sl-otp-channel-pulse__icon .sl-step2-channel-icon--max,
.sl-inline-delivery-message__icon .sl-step2-channel-icon--max {
    background: linear-gradient(96deg, #5a8cff 0%, #43d6ff calc(var(--sl-max-gradient-point, 0.64) * 100%), #8f3fff 99.6%);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M508.211 878.328c-75.007 0-109.864-10.95-170.453-54.75-38.325 49.275-159.686 87.783-164.979 21.9 0-49.456-10.95-91.248-23.36-136.873-14.782-56.21-31.572-118.807-31.572-209.508 0-216.626 177.754-379.597 388.357-379.597 210.786 0 375.947 171.001 375.947 381.604.707 207.347-166.595 376.118-373.94 377.224m3.103-571.585c-102.564-5.292-182.499 65.7-200.201 177.024-14.6 92.162 11.315 204.398 33.397 210.238 10.585 2.555 37.23-18.98 53.837-35.587a189.8 189.8 0 0 0 92.71 33.032c106.273 5.112 197.08-75.794 204.215-181.95 4.154-106.382-77.67-196.486-183.958-202.574z' /%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M508.211 878.328c-75.007 0-109.864-10.95-170.453-54.75-38.325 49.275-159.686 87.783-164.979 21.9 0-49.456-10.95-91.248-23.36-136.873-14.782-56.21-31.572-118.807-31.572-209.508 0-216.626 177.754-379.597 388.357-379.597 210.786 0 375.947 171.001 375.947 381.604.707 207.347-166.595 376.118-373.94 377.224m3.103-571.585c-102.564-5.292-182.499 65.7-200.201 177.024-14.6 92.162 11.315 204.398 33.397 210.238 10.585 2.555 37.23-18.98 53.837-35.587a189.8 189.8 0 0 0 92.71 33.032c106.273 5.112 197.08-75.794 204.215-181.95 4.154-106.382-77.67-196.486-183.958-202.574z' /%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.sl-inline-delivery-message__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 6px;
    font-size: 1.1em;
    line-height: 1;
    vertical-align: text-bottom;
}

.sl-otp-channel-pulse__body {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    flex-direction: column;
    gap: 4px;
}

.sl-otp-channel-pulse__badge {
    display: inline-flex;
    align-self: flex-start;
    max-width: 100%;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(var(--sl-channel-note-rgb), 0.14);
    color: var(--sl-channel-note-color);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.03em;
    line-height: 1.2;
    text-transform: uppercase;
}

.sl-otp-channel-pulse__headline {
    display: block;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.35;
}

.sl-otp-channel-pulse__scenario {
    display: block;
    color: #475569;
    font-size: 12px;
    line-height: 1.45;
}

.sl-sms-channel-note.is-pending {
    box-shadow: 0 16px 28px -24px rgba(99, 102, 241, 0.32);
}

.sl-sms-channel-note.is-success {
    box-shadow: 0 16px 28px -24px rgba(16, 185, 129, 0.26);
}

.sl-sms-channel-note.is-fallback {
    box-shadow: 0 16px 28px -24px rgba(245, 158, 11, 0.32);
}

.sl-sms-channel-note.is-error {
    box-shadow: 0 16px 28px -24px rgba(239, 68, 68, 0.3);
}

.sl-sms-container.sl-sms-layout-guided .sl-sms-step-2-note-slot.is-empty,
.sl-sms-container.sl-sms-layout-guided .sl-sms-step-2-note-slot:empty,
.sl-sms-container.sl-sms-layout-guided .sl-sms-channel-note-host.is-empty {
    display: none !important;
}

.sl-sms-container.sl-sms-layout-guided .sl-sms-step-2-main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 10px;
}

.sl-sms-container.sl-sms-layout-guided .sl-sms-step-2-title {
    margin: 0;
    color: #111827;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.sl-sms-container.sl-sms-layout-guided .sl-webpush-assist-timeline {
    display: none;
    width: 100%;
    min-height: 58px;
    margin: 2px 0 4px;
    padding: 12px 12px 10px;
    border-radius: 14px;
    border: 1px solid rgba(99, 102, 241, 0.18);
    background: linear-gradient(180deg, rgba(99, 102, 241, 0.06) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.sl-sms-container.sl-sms-layout-guided .sl-webpush-assist-timeline.is-visible {
    display: block;
}

.sl-sms-container.sl-sms-layout-guided .sl-webpush-assist-timeline.is-fallback {
    border-color: rgba(245, 158, 11, 0.22);
    background: linear-gradient(180deg, rgba(245, 158, 11, 0.07) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.sl-sms-container.sl-sms-layout-guided .sl-webpush-assist-timeline.is-error {
    border-color: rgba(239, 68, 68, 0.2);
    background: linear-gradient(180deg, rgba(239, 68, 68, 0.07) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.sl-webpush-assist-timeline__track {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: stretch;
}

.sl-webpush-assist-timeline__step {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 132px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.78);
    border: 1px solid rgba(148, 163, 184, 0.16);
}

.sl-webpush-assist-timeline__step.is-active {
    border-color: rgba(99, 102, 241, 0.32);
    box-shadow: 0 12px 24px -22px rgba(99, 102, 241, 0.8);
}

.sl-webpush-assist-timeline__step.is-done {
    border-color: rgba(16, 185, 129, 0.22);
    background: rgba(236, 253, 245, 0.92);
}

.sl-webpush-assist-timeline__dot {
    display: inline-flex;
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #cbd5e1;
    box-shadow: 0 0 0 4px rgba(203, 213, 225, 0.22);
}

.sl-webpush-assist-timeline__step.is-active .sl-webpush-assist-timeline__dot {
    background: #6366f1;
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.18);
}

.sl-webpush-assist-timeline__step.is-done .sl-webpush-assist-timeline__dot {
    background: #10b981;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
}

.sl-webpush-assist-timeline__label {
    display: block;
    min-width: 0;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.35;
}

@media (prefers-reduced-motion: no-preference) {
    .sl-webpush-assist-timeline__step.is-active {
        animation: sl-webpush-assist-pulse 1.8s ease-in-out infinite;
    }
}

@keyframes sl-webpush-assist-pulse {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-1px);
    }
}

/* Общий стиль для кнопок внутри SMS */
.sl-sms-button--styled {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    font-weight: 500;
    font-size: 16px;
    border: none;
    cursor: pointer;
    border-radius: 8px;
    box-sizing: border-box;
}

/* Кнопки в input-group: не растягиваем по ширине, unless stacked */
.sl-input-group .sl-sms-send-btn,
.sl-input-group .sl-sms-verify-btn {
    flex: 0 0 auto;
    width: auto;
}

.sl-sms-container.sl-sms-layout-guided .sl-input-wrapper .sl-sms-code-input {
    padding-right: 14px !important;
    border-radius: var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) 0 0 var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px)));
}

/* Overlay button (по умолчанию) */
.sl-input-wrapper .sl-sms-send-btn.overlay {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    white-space: nowrap;
}

/* Feedback container (сообщения) */
.sl-sms-feedback-container {
    overflow: hidden;
    overflow-x: hidden;
    contain: layout paint;
}

.sl-sms-feedback-container>div {
    display: none;
    text-align: center;
    padding-top: 8px;
    font-weight: 500;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.sl-sms-feedback-container>div.is-active {
    display: block;
}

/* Ошибки / сообщения */
.sl-field-error {
    color: #d9534f;
    font-size: 13px;
}

.sl-sms-message {
    color: #3c763d;
    font-size: 13px;
}

.sl-sms-resend-timer {
    color: #888;
    font-size: 12px;
}

.sl-sms-fallback {
    font-size: 13px;
}

.sl-sms-fallback.is-active {
    display: block !important;
    text-align: left;
    margin-top: 16px;
    padding-top: 0;
    color: #0f172a;
}

.sl-sms-fallback__compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    transition: opacity .3s ease, background-color .2s ease, border-color .2s ease;
}

.sl-sms-fallback.strizh-style-card .sl-sms-fallback__compact,
.strizh-fallback-wrapper.strizh-style-card {
    padding: 12px 16px;
    border: 1px solid rgba(203, 213, 225, 0.7);
    border-radius: 12px;
    background: #f8fafc;
}

.sl-sms-fallback.strizh-style-link .sl-sms-fallback__compact,
.strizh-fallback-wrapper.strizh-style-link {
    justify-content: center;
    gap: 6px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.sl-sms-fallback.strizh-style-link .sl-sms-fallback__content,
.strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__content {
    flex: 0 1 auto;
    gap: 6px;
}

.sl-sms-fallback__content {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.sl-sms-fallback__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #64748b;
    flex: 0 0 auto;
}

.sl-sms-fallback__icon svg {
    display: block;
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.sl-sms-fallback__text {
    min-width: 0;
    color: #64748b;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
}

.sl-sms-fallback.strizh-style-link .sl-sms-fallback__icon,
.strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__icon,
.sl-sms-fallback.strizh-style-link .strizh-fallback-icon,
.strizh-fallback-wrapper.strizh-style-link .strizh-fallback-icon {
    display: none;
}

.sl-sms-fallback__timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

.sl-sms-fallback__action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    min-height: 32px;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #0ea5e9;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}

.sl-sms-fallback__action:hover,
.sl-sms-fallback__action:focus {
    background: rgba(14, 165, 233, 0.1);
    color: #0284c7;
    text-decoration: none;
    box-shadow: none;
}

.sl-sms-fallback.strizh-style-link .sl-sms-fallback__text,
.strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__text {
    font-size: 14px;
}

.sl-sms-fallback.strizh-style-link .sl-sms-fallback__action,
.strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__action {
    min-height: 0;
    padding: 0;
    background: transparent;
    border: none;
    font-weight: 500;
    text-decoration: none;
}

.sl-sms-fallback.strizh-style-link .sl-sms-fallback__action:hover,
.sl-sms-fallback.strizh-style-link .sl-sms-fallback__action:focus,
.strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__action:hover,
.strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__action:focus {
    background: transparent;
    text-decoration: underline;
}

.sl-sms-fallback__action.is-disabled,
.sl-sms-fallback__action:disabled {
    background: transparent;
    color: #94a3b8;
    cursor: not-allowed;
    pointer-events: none;
}

.sl-sms-fallback.is-ready .sl-sms-fallback__action.is-unlock-bloom,
.strizh-fallback-wrapper .sl-sms-fallback__action.is-unlock-bloom {
    animation: slFallbackUnlockBloom 220ms ease-out;
}

@keyframes slFallbackUnlockBloom {
    0% {
        background: rgba(14, 165, 233, 0);
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
    }
    50% {
        background: rgba(14, 165, 233, 0.12);
        box-shadow: 0 0 0 6px rgba(14, 165, 233, 0.10);
    }
    100% {
        background: rgba(14, 165, 233, 0.06);
        box-shadow: 0 0 0 0 rgba(14, 165, 233, 0);
    }
}

.sl-sms-container.sl-sms-layout-guided .sl-sms-fallback.is-active {
    padding-top: 10px;
}

@media (max-width: 575px) {
    .sl-sms-fallback.strizh-style-card .sl-sms-fallback__compact,
    .strizh-fallback-wrapper.strizh-style-card {
        flex-wrap: wrap;
    }

    .sl-sms-fallback.strizh-style-card .sl-sms-fallback__action,
    .strizh-fallback-wrapper.strizh-style-card .sl-sms-fallback__action {
        width: 100%;
    }

    .sl-sms-fallback.strizh-style-card .sl-sms-fallback__content,
    .strizh-fallback-wrapper.strizh-style-card .sl-sms-fallback__content {
        width: 100%;
    }

    .sl-sms-fallback.strizh-style-link .sl-sms-fallback__compact,
    .strizh-fallback-wrapper.strizh-style-link {
        flex-wrap: wrap;
    }
}

.sl-sms-container.sl-sms-layout-guided .sl-sms-step-2-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.sl-sms-container.sl-sms-layout-guided .sl-sms-step-2-actions.is-empty {
    display: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.sl-sms-container.sl-sms-layout-guided .sl-sms-step-2-actions:empty {
    display: none !important;
}

.sl-sms-container[data-verify-button-enabled="0"] .sl-input-group .sl-sms-verify-btn,
.sl-sms-container.sl-sms-verify-btn-hidden .sl-input-group .sl-sms-verify-btn,
.sl-sms-container[data-verify-button-enabled="0"] .sl-sms-step-2-actions .sl-sms-verify-btn,
.sl-sms-container.sl-sms-verify-btn-hidden .sl-sms-step-2-actions .sl-sms-verify-btn,
.sl-sms-container[data-verify-button-enabled="0"] .sl-adopt-step2-actions .sl-sms-verify-btn,
.sl-sms-container.sl-sms-verify-btn-hidden .sl-adopt-step2-actions .sl-sms-verify-btn {
    display: none !important;
}

.sl-sms-container[data-verify-button-enabled="0"] .sl-sms-code-group,
.sl-sms-container.sl-sms-verify-btn-hidden .sl-sms-code-group {
    width: 100%;
}

.sl-sms-container[data-verify-button-enabled="0"] .sl-sms-code-group .sl-input-wrapper,
.sl-sms-container.sl-sms-verify-btn-hidden .sl-sms-code-group .sl-input-wrapper {
    width: 100%;
    flex: 1 1 100%;
}

.sl-sms-container[data-verify-button-enabled="0"] .sl-input-group .sl-sms-code-input,
.sl-sms-container.sl-sms-verify-btn-hidden .sl-input-group .sl-sms-code-input {
    border-radius: var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) !important;
}

.sl-sms-container[data-verify-button-enabled="0"] .sl-sms-step-2-actions,
.sl-sms-container.sl-sms-verify-btn-hidden .sl-sms-step-2-actions,
.sl-sms-container[data-verify-button-enabled="0"] .sl-adopt-step2-actions,
.sl-sms-container.sl-sms-verify-btn-hidden .sl-adopt-step2-actions {
    justify-content: center;
}

.sl-sms-change-number-btn {
    display: none;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0;
    border: 0;
    background: none;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: underline;
    cursor: pointer;
}

.sl-sms-change-number-btn:hover,
.sl-sms-change-number-btn:focus {
    color: #111827;
    text-decoration: underline;
}

.sl-sms-container.sl-sms-layout-guided.sl-sms-on-step-2 .sl-sms-change-number-btn {
    display: inline-flex;
}

/* Change number link (внутренняя ссылка в поле кода) */
.sl-change-number-link {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 500;
    color: #337ab7;
    text-decoration: none;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out;
    z-index: 10;
}

.sl-sms-container.sl-sms-layout-classic.sl-sms-on-step-2 .sl-change-number-link {
    opacity: 1;
    visibility: visible;
}

.sl-sms-container.sl-sms-layout-guided .sl-change-number-link {
    display: none;
}

/* === Респонсив / stacked behavior === */
/* Класс .sl-input-group--stacked добавляется JS при узкой ширине блока */
.sl-input-group.sl-input-group--stacked {
    display: grid !important;
    grid-template-columns: 56px 1fr;
    grid-template-rows: auto auto;
    align-items: stretch;
    row-gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

/* Селектор страны */
.sl-input-group.sl-input-group--stacked .sl-tel-country-selector {
    grid-column: 1;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 44px;
    align-self: stretch;
    padding: 0;
    box-sizing: border-box;
}

.sl-input-group.sl-input-group--stacked .sl-tel-selected-country {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 8px;
    border-radius: var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) 0 0 var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px)));
    box-sizing: border-box;
}

.sl-input-group.sl-input-group--stacked .sl-tel-flag {
    width: 24px;
    height: 16px;
}

/* Телефон — вторая колонка */
.sl-input-group.sl-input-group--stacked .sl-sms-phone-input {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    height: 44px;
    align-self: stretch;
    padding: 0 12px;
    line-height: 44px;
    border-left: none !important;
    border-right: 1px solid #ccc !important;
    border-radius: 0 var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) 0 !important;
    box-sizing: border-box;
}

/* Кнопка "получить код" — на второй строке, занимает всю ширину grid */
.sl-input-group.sl-input-group--stacked .sl-sms-send-btn {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    margin: 0;
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px)) !important;
    box-sizing: border-box;
}

.sl-input-group.sl-input-group--stacked .sl-sms-send-btn--icon_text,
.sl-input-group.sl-input-group--stacked .sl-sms-send-btn--icon-text,
.sl-input-group.sl-input-group--stacked .sl-sms-send-btn--icon,
.sl-input-group.sl-input-group--stacked .sl-sms-send-btn--icon-only {
    width: 100% !important;
    max-width: none;
    min-width: 0;
    padding: 10px 14px;
    margin-left: 0;
}

.sl-input-group.sl-input-group--stacked .sl-sms-send-btn__text {
    max-width: none;
}

/* При stacked: overlay-кнопка переводится в поток */
.sl-input-group.sl-input-group--stacked .sl-input-wrapper .sl-sms-send-btn.overlay {
    position: static;
    transform: none;
    right: auto;
    top: auto;
    width: 100%;
    margin-top: 6px;
}

/* При необходимости переводим форму в поток (чтобы она сдвигала соседей): класс sl-sms-inflow ставит JS */
.sl-sms-container.sl-sms-inflow .sl-sms-form {
    position: static;
    width: 100%;
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.sl-sms-container.sl-sms-inflow {
    min-height: auto;
}

/* Accessibility / touch targets */
.sl-input-group.sl-input-group--stacked .sl-sms-send-btn,
.sl-input-group.sl-input-group--stacked .sl-sms-phone-input {
    min-height: 44px;
}

/* ========== Визуальное выравнивание флага с полем телефона ========== */

/* Базовая рамка для селектора, чтобы он выглядел как "левая" часть инпута */
.sl-tel-selected-country {
    border: 1px solid #ccc;
    /* тот же базовый цвет, что и у поля */
    border-right: none;
    /* чтобы визуально соединиться с полем */
    border-radius: var(--sl-sms-radius, 8px) 0 0 var(--sl-sms-radius, 8px);
    height: 44px;
    /* согласуем с высотой инпута */
    display: flex;
    align-items: center;
    padding: 0 10px;
    background-color: #f9f9f9;
    box-sizing: border-box;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .15s;
}

/* На всякий случай: селектор не должен расширяться больше выделенной колонки */
.sl-tel-country-selector {
    flex: 0 0 auto;
}

/* Убираем двойную границу, если поле телефона рядом имеет свои правила:
   уже есть правило, делающее у .sl-sms-phone-input border-left:none; — это OK */

/* Composed tel input groups keep one outer focus ring.
   This prevents seam artifacts when stores customize child borders/radii. */
.sl-tel-input-group {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border-radius: var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px)));
}

.sl-tel-input-group::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: calc(var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) + 1px);
    pointer-events: none;
    opacity: 0;
    z-index: 3;
    box-shadow: 0 0 0 1px transparent, 0 0 0 0 transparent;
    transition: opacity .18s ease, box-shadow .18s ease;
}

.sl-tel-input-group:focus-within::after {
    opacity: 1;
    box-shadow: 0 0 0 1px var(--strizh-sms-group-focus-border, var(--strizh-sms-input-focus-border, var(--sl-sms-input-focus-border, #4CAF50))), var(--strizh-sms-group-focus-shadow, var(--strizh-sms-input-focus-shadow, var(--sl-sms-input-focus-shadow, 0 0 0 2px rgba(76, 175, 80, 0.12))));
}

.sl-tel-input-group .sl-sms-phone-input:focus,
.sl-tel-input-group:focus-within .sl-tel-selected-country,
.sl-tel-input-group:focus-within .sl-sms-phone-input {
    box-shadow: none !important;
    outline: none;
}

.sl-tel-input-group .sl-sms-phone-input:focus {
    border-color: transparent;
}

/* hover на селекторе — лёгкое изменение */
.sl-tel-selected-country:hover {
    background-color: #f0f0f0;
}

/* Error-state mirrors the same single-ring model for the tel group. */
.sl-tel-input-group.sl-has-error::after,
.sl-tel-input-group:has(.sl-sms-phone-input.sl-input--error)::after {
    opacity: 1;
    box-shadow: 0 0 0 1px var(--strizh-sms-group-error-border, #d9534f), var(--strizh-sms-group-error-shadow, 0 0 0 2px rgba(217, 83, 79, 0.12));
}

.sl-tel-input-group .sl-sms-phone-input.sl-input--error,
.sl-tel-input-group.sl-has-error .sl-tel-selected-country,
.sl-tel-input-group:has(.sl-sms-phone-input.sl-input--error) .sl-tel-selected-country {
    box-shadow: none !important;
}

.sl-tel-input-group .sl-sms-phone-input.sl-input--error {
    border-color: transparent;
}

/* Это для обрезания текста на кнопках*/
.social-login-button__text {
    white-space: nowrap;
    /* 1. Запрещаем перенос текста на новую строку */
    overflow: hidden;
    /* 2. Обрезаем все, что не помещается */
    text-overflow: ellipsis;
    /* 3. Добавляем многоточие в конце */
    display: inline-block;
    /* Необходимо для правильной работы text-overflow */
    vertical-align: middle;
    /* Улучшает вертикальное выравнивание */
    max-width: 100%;
    /* Гарантирует, что текст не вылезет за пределы родителя */
}

/* ==========================================================================
   FIX: Скругление углов для составной кнопки СМС
   ========================================================================== */

/* 1. Главная кнопка-триггер (изначальная "Войти по номеру...") */
/* Она должна быть скруглена со всех сторон */
.sl-sms-container .sl-sms-trigger {
    border-radius: var(--sl-sms-radius) !important;
}

/* 2. Левая часть формы: Селектор страны (флаг) */
/* Скругляем только левые углы */
.sl-tel-selected-country {
    border-radius: var(--sl-sms-radius) 0 0 var(--sl-sms-radius) !important;
}

/* 3. Левая часть формы: Поле ввода кода (на 2-м шаге) */
/* Скругляем только левые углы */
.sl-input-wrapper .sl-sms-code-input {
    border-radius: var(--sl-sms-radius) 0 0 var(--sl-sms-radius) !important;
}

/* 4. Правая часть формы: Кнопки действия ("Получить код", "Войти") */
/* Скругляем только правые углы */
.sl-input-group .sl-sms-send-btn,
.sl-input-group .sl-sms-verify-btn {
    border-radius: 0 var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) 0 !important;
}

/* 5. Исправление для поля ввода телефона */
/* У него не должно быть скругления, так как оно посередине */
.sl-sms-phone-input {
    border-radius: 0 !important;
}

/* 6. (Опционально) Если вдруг в теме Journal инпуты имеют свои жесткие скругления */
.sl-input-group input {
    border-radius: 0 !important;
}

/* --- Стили для кнопки Passkey --- */
.sl-passkey-login-btn {
    /* Скрываем по умолчанию. JS сам покажет её, если устройство поддерживает биометрию */
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 44px;
    padding: 0 16px;
    background-color: #333;
    color: #fff;
    border-radius: 8px;
    border: none;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    text-decoration: none;
    box-sizing: border-box;
}

.sl-passkey-login-btn:hover {
    background-color: #444;
    color: #fff;
    text-decoration: none;
}

.sl-passkey-login-btn i {
    margin-right: 10px;
    font-size: 1.2em;
}

/* =========================================
   СТИЛИ КНОПКИ PASSKEY (ВАУ-ЭФФЕКТЫ)
   ========================================= */

/* 1. БАЗОВЫЙ КЛАСС (Каркас) 
   Убрали отсюда background-color и color! 
   Теперь они задаются в конкретных стилях ниже.
*/
.sl-passkey-login-btn {
    /* Скрыта по умолчанию, JS покажет */
    display: none;

    /* Геометрия */
    width: 100%;
    height: 50px;
    /* Фиксируем высоту для всех стилей */
    padding: 0 16px;
    box-sizing: border-box;

    /* Текст и курсор */
    text-decoration: none;
    font-weight: 500;
    font-size: 16px;
    cursor: pointer;

    /* Сброс границ темы */
    border-bottom: none;

    /* Плавность для всех */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}



/* -------------------------------------------
   ВАРИАНТ 1: SCANNER (Биометрический - По умолчанию)
   ------------------------------------------- */
.sl-passkey-style-scanner {
    background: #1a1a1a;
    border: 1px solid #333;
    border-radius: 8px;
    color: #fff;
    font-family: -apple-system, monospace;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

.sl-passkey-style-scanner .sl-passkey-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    transition: stroke 0.3s ease;
}

/* Лазерный луч */
.sl-passkey-style-scanner::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 30%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(39, 174, 96, 0.8), transparent);
    transform: skewX(-20deg);
    transition: none;
    pointer-events: none;
}

.sl-passkey-style-scanner:hover {
    border-color: #27ae60;
    background-color: #000;
    box-shadow: 0 0 15px rgba(39, 174, 96, 0.3);
    transform: translateY(-2px);
}

.sl-passkey-style-scanner:hover .sl-passkey-icon svg {
    stroke: #27ae60;
}

.sl-passkey-style-scanner:hover::after {
    left: 150%;
    transition: left 0.6s ease-in-out;
}

/* -------------------------------------------
   ВАРИАНТ 2: APPLE PRO (Светлый премиум)
   ------------------------------------------- */
.sl-passkey-style-apple {
    background: #ffffff;
    border: 1px solid #d1d1d6;
    border-radius: 10px;
    color: #1c1c1e;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.sl-passkey-style-apple .sl-passkey-icon svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke-width: 2;
}

.sl-passkey-style-apple:hover {
    background-color: #f5f5f7;
    border-color: #aeaeb2;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.sl-passkey-style-apple:active {
    transform: scale(0.98);
    background-color: #e5e5ea;
}

/* -------------------------------------------
   ВАРИАНТ 3: CYBER NEON (Яркий градиент)
   ------------------------------------------- */
.sl-passkey-style-neon {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    border-radius: 50px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(118, 75, 162, 0.4);
}

.sl-passkey-style-neon .sl-passkey-icon svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: #fff;
    stroke-width: 2;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
}

.sl-passkey-style-neon:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}

/* Блик для неона */
.sl-passkey-shine {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s, opacity 0.5s;
    pointer-events: none;
}

.sl-passkey-style-neon:hover .sl-passkey-shine {
    transform: scale(1);
    opacity: 1;
    transition: 0s;
}

/* =======================================================
   СТИЛИ ДЛЯ PASSKEY В РЕЖИМЕ "ТОЛЬКО ИКОНКИ"
   ======================================================= */

/* Базовый сброс ширины для иконки, так как общий стиль .sl-passkey-login-btn дает width: 100% */
.social-button-icon.sl-passkey-login-btn {
    width: 48px !important;
    /* Возвращаем квадратный размер */
    height: 48px !important;
    border-radius: 8px;
}

/* --- ВАРИАНТ 1: SCANNER (Иконка) --- */
/* Определяем стиль по цвету фона, который задан инлайном в Rust */
.social-button-icon.sl-passkey-login-btn[style*="#1a1a1a"]:hover {
    border-color: #27ae60;
    box-shadow: 0 0 15px rgba(39, 174, 96, 0.5);
    transform: translateY(-3px);
}

.social-button-icon.sl-passkey-login-btn[style*="#1a1a1a"] svg {
    transition: stroke 0.3s;
}

.social-button-icon.sl-passkey-login-btn[style*="#1a1a1a"]:hover svg {
    stroke: #2ecc71;
    /* Ярко-зеленый при наведении */
    filter: drop-shadow(0 0 5px #2ecc71);
}

/* --- ВАРИАНТ 2: APPLE PRO (Иконка) --- */
.social-button-icon.sl-passkey-login-btn[style*="#ffffff"]:hover {
    background-color: #f5f5f7;
    border-color: #999;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-3px);
}

/* --- ВАРИАНТ 3: NEON (Иконка) --- */
.social-button-icon.sl-passkey-login-btn[style*="linear-gradient"]:hover {
    /* Инвертируем градиент или делаем ярче */
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
    box-shadow: 0 8px 20px rgba(118, 75, 162, 0.7);
    transform: translateY(-3px) scale(1.1);
}

/* --- CUSTOM MODE ANIMATIONS --- */

/* Shine effect (Блик) */
.sl-passkey-login-btn.sl-anim-shine .sl-passkey-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.4), transparent);
    transform: skewX(-20deg);
    transition: none;
}

.sl-passkey-login-btn.sl-anim-shine:hover .sl-passkey-shine {
    left: 150%;
    transition: left 0.5s ease-in-out;
}

/* Scanner effect (Лазер) */
.sl-passkey-login-btn.sl-anim-scanner {
    overflow: hidden;
    position: relative;
}

.sl-passkey-login-btn.sl-anim-scanner .sl-passkey-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 20px;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    filter: blur(2px);
    transform: skewX(-10deg);
}

.sl-passkey-login-btn.sl-anim-scanner:hover .sl-passkey-shine {
    left: 150%;
    transition: left 0.6s ease-in-out;
}


/* =========================================
   ПОСТОЯННАЯ АНИМАЦИЯ ОТПЕЧАТКА (LOOP)
   ========================================= */

/* 1. Определяем ключевые кадры анимации */

/* Анимация для нижней подложки (тускнеет) */
@keyframes sl-fingerprint-pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.3;
    }
}

/* Анимация для сканирующей линии (рисуется) */
@keyframes sl-fingerprint-scan {
    0% {
        stroke-dashoffset: 23;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    85% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: 0;
        opacity: 0;
    }
}

/* 2. Применяем к SVG */

.sl-passkey-icon svg.fingerprint {
    width: 24px;
    height: 24px;
}

/* Основной контур (задний план) */
.sl-passkey-icon svg.fingerprint path:first-child {
    /* Запускаем пульсацию бесконечно */
    animation: sl-fingerprint-pulse 2.5s ease-in-out infinite;
}

/* Сканирующий луч (передний план) */
.sl-passkey-icon svg.fingerprint path:last-child {
    stroke-dasharray: 23;
    stroke-dashoffset: 23;
    opacity: 0;
    /* Запускаем рисование линии бесконечно */
    animation: sl-fingerprint-scan 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    /* Небольшая задержка, чтобы анимации шли в противофазе красиво */
    animation-delay: 0.2s;
}


/* =========================================
   АДАПТАЦИЯ ЦВЕТОВ (КАК БЫЛО)
   ========================================= */

/* Для темных стилей (Scanner, Neon, Custom Dark) цвет линий - белый */
.sl-passkey-style-scanner .sl-passkey-icon svg.fingerprint path,
.sl-passkey-style-neon .sl-passkey-icon svg.fingerprint path {
    stroke: #62ff00;
}

/* Для светлого стиля (Apple) - линии черные */
.sl-passkey-style-apple .sl-passkey-icon svg.fingerprint path {
    stroke: #a938ff;
}

/* Для кастомного стиля - наследуем цвет текста */
.sl-passkey-style-custom .sl-passkey-icon svg.fingerprint path {
    stroke: currentColor;
}

/* =========================================
   ЭТАП 2: SMART UX (TOASTS & HIGHLIGHTS)
   ========================================= */

/* --- 1. Умная кнопка (Smart Button) --- */
/* Если мы знаем, что у юзера есть ключ, мы подсвечиваем кнопку */
.sl-passkey-login-btn.is-preferred {
    border-color: #27ae60 !important;
    /* Зеленая рамка */
    box-shadow: 0 0 0 1px #27ae60, 0 4px 15px rgba(39, 174, 96, 0.2) !important;
    order: -1;
    /* Пытаемся поднять её выше, если контейнер флекс */
    position: relative;
}

/* Пульсирующая точка "Рекомендуем" */
.sl-passkey-login-btn.is-preferred::before {
    content: '';
    position: absolute;
    top: -4px;
    right: -4px;
    width: 10px;
    height: 10px;
    background-color: #27ae60;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff;
    animation: slPulseGreen 2s infinite;
    z-index: 10;
}

@keyframes slPulseGreen {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(39, 174, 96, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(39, 174, 96, 0);
    }
}

/* --- 2. Система уведомлений (Toast Notifications) --- */
.sl-toast-container {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    /* Чтобы сквозь прозрачные области можно было кликать */
    width: 90%;
    max-width: 400px;
}

.sl-toast {
    background: #fff;
    border-radius: 12px;
    padding: 12px 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15), 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 12px;
    pointer-events: auto;

    /* Анимация появления */
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.320, 1.275);

    font-family: -apple-system, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    border-left: 4px solid #ccc;
}

.sl-toast.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Типы уведомлений */
.sl-toast--warning {
    border-left-color: #f39c12;
}

.sl-toast--error {
    border-left-color: #e74c3c;
}

.sl-toast--success {
    border-left-color: #27ae60;
}

.sl-toast__icon {
    font-size: 20px;
    flex-shrink: 0;
}

.sl-toast--warning .sl-toast__icon {
    color: #f39c12;
}

.sl-toast--error .sl-toast__icon {
    color: #e74c3c;
}

.sl-toast--success .sl-toast__icon {
    color: #27ae60;
}

.sl-toast__content {
    flex-grow: 1;
}

.sl-toast__title {
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}

.sl-toast__body {
    color: #666;
    font-size: 13px;
}


/* =========================================
   ЭТАП 4: UPSELL WIDGET (BOTTOM SHEET)
   ========================================= */

.sl-upsell-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.3s ease;
    /* ВАУ-ЭФФЕКТ: Размытие фона под шторкой (как в iOS) */
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.sl-upsell-sheet {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(120%);
    /* Спрятан внизу */
    width: 90%;
    max-width: 450px;
    background: #ffffff;
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    /* Apple-like easing */
    will-change: transform;
    text-align: center;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* На мобильных прижимаем к самому низу */
@media (max-width: 480px) {
    .sl-upsell-sheet {
        bottom: 0;
        width: 100%;
        max-width: 100%;
        border-radius: 20px 20px 0 0;
        padding-bottom: 35px;
        /* Учет safe-area на iPhone */
    }
}

.sl-upsell-sheet.is-visible {
    transform: translateX(-50%) translateY(0);
}

.sl-upsell-backdrop.is-visible {
    opacity: 1;
}

/* Контент внутри */
.sl-upsell-icon {
    width: 60px;
    height: 60px;
    background: #e8f5e9;
    color: #27ae60;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 15px auto;
    animation: slPulseGreen 3s infinite;
}

.sl-upsell-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
    line-height: 1.3;
}

.sl-upsell-desc {
    font-size: 15px;
    color: #666;
    margin-bottom: 25px;
    line-height: 1.5;
}

.sl-upsell-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sl-upsell-btn-primary {
    background: #27ae60;
    color: #fff;
    border: none;
    padding: 14px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    width: 100%;
    transition: transform 0.1s;
    text-decoration: none;
}

.sl-upsell-btn-primary:active {
    transform: scale(0.98);
}

.sl-upsell-btn-secondary {
    background: transparent;
    color: #999;
    border: none;
    padding: 10px;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
}

.sl-upsell-btn-secondary:hover {
    color: #666;
}

/* --- ВАУ-ЭФФЕКТ: Анимация отпечатка (Laser Scan) --- */

/* Контейнер иконки */
.sl-upsell-icon {
    width: 70px;
    height: 70px;
    background: #e8f5e9;
    /* Светло-зеленый фон */
    color: #27ae60;
    /* Основной зеленый */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px auto;
    position: relative;
    box-shadow: 0 4px 15px rgba(39, 174, 96, 0.15);
}

/* Сама SVG */
.sl-fingerprint-svg {
    width: 40px;
    height: 40px;
    display: block;
}

/* 1. Статический фон (тусклый) */
.sl-fp-static {
    color: #27ae60;
    /* Opacity уже задан в SVG (0.3), но можно продублировать тут */
    opacity: 0.3;
}

/* 2. Анимированный контур (рисуется поверх) */
.sl-fp-scan {
    color: #27ae60;
    stroke-dasharray: 120;
    /* Длина отрезка (примерно 1/3 общей длины линий) */
    stroke-dashoffset: 120;
    /* Начальное смещение (скрыто) */
    animation: slLaserScan 3s ease-in-out infinite;
    opacity: 0;
}

/* Анимация "бегущей строки" или лазера */
@keyframes slLaserScan {
    0% {
        stroke-dashoffset: 120;
        /* Линия еще не началась */
        opacity: 0;
    }

    10% {
        opacity: 1;
        /* Появилась */
    }

    50% {
        stroke-dashoffset: 0;
        /* Линия прошла половину пути */
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -120;
        /* Линия ушла в конец */
        opacity: 0;
    }
}



/* === ФИКС РАСПИРАНИЯ КНОПКИ PASSKEY (GRID VERSION) === */

@keyframes slFadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === ФИКС ЦЕНТРИРОВАНИЯ И ОБРЕЗКИ (FLEX VERSION) === */

/* 1. Контейнер кнопки */
.sl-passkey-login-btn.is-visible {
    /* Используем Flex для идеального центрирования */
    display: flex !important;
    justify-content: center !important;
    /* Собирает контент в центре */
    align-items: center !important;

    /* Отступ между иконкой и текстом */
    gap: 12px;

    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 15px !important;

    /* Анимация и оптимизация */
    animation: slFadeInUp 0.2s ease-out forwards !important;
    will-change: transform, opacity;
}

/* 2. Иконка */
.sl-passkey-login-btn .sl-passkey-icon {
    /* Запрещаем иконке сжиматься */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 3. Текст */
.sl-passkey-login-btn .social-login-button__text {
    /* ГЛАВНОЕ ИСПРАВЛЕНИЕ: */
    /* flex-grow: 0 -> не растягиваться на всю ширину */
    /* flex-shrink: 1 -> разрешить сжиматься, если не влезает */
    flex: 0 1 auto;

    /* Разрешает тексту уходить в многоточие, даже внутри flex */
    min-width: 0;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    /* Убираем лишние отступы, так как используем gap у родителя */
    margin: 0;
    padding: 0;
    text-align: left;
    /* Текст прижат к иконке */
}


/* =========================================
   ЭТАП 5: FACE ID ANIMATION (Apple Style)
   ========================================= */

.sl-faceid-svg {
    width: 24px;
    /* Размер для кнопки */
    height: 24px;
    display: block;
}

/* В виджете Upsell иконка больше */
.sl-upsell-icon .sl-faceid-svg {
    width: 40px;
    height: 40px;
}

/* Стили линий */
.sl-faceid-frame,
.sl-faceid-face {
    stroke: currentColor;
    /* Цвет наследуется (белый на кнопке, зеленый в виджете) */
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    opacity: 0.9;
}

/* Анимация рамки (пульсация углов) */
.sl-faceid-frame {
    animation: slFaceIdPulse 3s ease-in-out infinite;
    transform-origin: center;
}

/* Анимация лица (прорисовка) */
.sl-faceid-face {
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    animation: slDrawFace 3s ease-in-out infinite;
}

/* Задержки для разных частей лица */
.sl-faceid-face:nth-child(2) {
    animation-delay: 0.1s;
}

/* Левый глаз */
.sl-faceid-face:nth-child(3) {
    animation-delay: 0.1s;
}

/* Правый глаз */
.sl-faceid-face:nth-child(4) {
    animation-delay: 0.3s;
}

/* Нос/Рот */

@keyframes slFaceIdPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.8;
    }

    50% {
        transform: scale(1.05);
        opacity: 1;
    }
}

@keyframes slDrawFace {
    0% {
        stroke-dashoffset: 20;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    50% {
        stroke-dashoffset: 0;
    }

    /* Нарисовано */
    80% {
        stroke-dashoffset: 0;
        opacity: 1;
    }

    100% {
        stroke-dashoffset: -20;
        opacity: 0;
    }
}

/* --- ВАРИАНТ 3: ELASTIC SNAP (Эластичный отклик) --- */

.sl-passkey-login-btn.is-success,
.social-button-icon--passkey.is-success {
    background: #27ae60;
    border-color: #27ae60;
    color: #ffffff;
    box-shadow: 0 10px 20px -10px rgba(39, 174, 96, 0.5);

    /* Анимация самой кнопки */
    animation: slButtonSnap 0.4s cubic-bezier(0.175, 0.885, 0.320, 1.275) forwards;
}

/* Убираем псевдо-элементы */
.sl-passkey-login-btn.is-success::before,
.social-button-icon--passkey.is-success::after {
    display: none !important;
}

/* Галочка появляется с задержкой, чтобы попасть в такт кнопке */
.sl-icon-success {
    opacity: 0;
    animation: slFadeInCheck 0.2s ease-out 0.1s forwards;
    /* 0.1s задержка */
}

@keyframes slButtonSnap {
    0% {
        transform: scale(1);
    }

    30% {
        transform: scale(0.95);
    }

    /* Сжатие */
    60% {
        transform: scale(1.02);
    }

    /* Легкое увеличение */
    100% {
        transform: scale(1);
    }

    /* Норма */
}

@keyframes slFadeInCheck {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* =========================================
   ЭТАП 6: ПАНЕЛЬ УПРАВЛЕНИЯ КЛЮЧАМИ (LK)
   ========================================= */

.sl-passkey-list {
    margin-top: 20px;
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.sl-pk-header {
    font-size: 14px;
    font-weight: 600;
    color: #999;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.sl-pk-grid {
    display: grid;
    grid-template-columns: 1fr;
    /* По умолчанию 1 колонка */
    gap: 10px;
}

/* На планшетах и ПК делаем в 2 колонки, если место позволяет */
@media (min-width: 768px) {
    .sl-pk-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

/* Карточка устройства */
.sl-pk-card {
    display: flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 12px;
    padding: 12px;
    transition: all 0.2s ease;
}

.sl-pk-card:hover {
    background: #fff;
    border-color: #ced4da;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    transform: translateY(-2px);
}

/* Активная карточка (Только что использовалась) */
.sl-pk-card.is-active-now {
    background: #e8f5e9;
    /* Светло-зеленый */
    border-color: #a5d6a7;
}

/* Иконка устройства */
.sl-pk-icon-wrapper {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #555;
    margin-right: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    position: relative;
    /* Для точки онлайн */
    flex-shrink: 0;
}

.sl-pk-card.is-active-now .sl-pk-icon-wrapper {
    color: #27ae60;
}

/* Точка "Онлайн" */
.sl-pk-online-dot {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 12px;
    height: 12px;
    background-color: #27ae60;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Текстовая информация */
.sl-pk-info {
    flex-grow: 1;
    overflow: hidden;
    /* Чтобы длинное имя не ломало верстку */
}

.sl-pk-name {
    font-weight: 600;
    font-size: 15px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sl-pk-meta {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.sl-pk-last-used {
    color: #666;
    font-weight: 500;
}

.sl-pk-card.is-active-now .sl-pk-last-used {
    color: #2e7d32;
    /* Темно-зеленый текст */
}

/* Кнопка удаления */
.sl-pk-actions .btn {
    border-radius: 8px;
    padding: 6px 10px;
    background: transparent;
    border: 1px solid transparent;
    color: #d9534f;
    transition: all 0.2s;
}

.sl-pk-actions .btn:hover {
    background: #fff5f5;
    border-color: #ffcccc;
}

/* === Liquid Metal Effect for Apple Button === */
.sl-apple-liquid {
    position: relative;
    overflow: hidden;
    /* Используем background-image вместо background, чтобы не перебивать background-color из inline-style */
    /* Сама "металличность" теперь прозрачная и накладывается поверх основного цвета */
    background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.15) 45%, transparent 50%);
    background-size: 250% 100%;
    animation: sl-shine 4s infinite linear;
}

/* Дополнительный блеск через псевдоэлемент */
.sl-apple-liquid::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: sl-sheen 4s infinite linear;
    pointer-events: none;
}

@keyframes sl-shine {
    0% {
        background-position-x: 100%;
    }

    100% {
        background-position-x: -150%;
    }
}

@keyframes sl-sheen {
    0% {
        left: -100%;
    }

    20% {
        left: 200%;
    }

    /* Быстрый пролет блика */
    100% {
        left: 200%;
    }
}

/* === Liquid Metal Light Mode (Inverted Glare) === */
.sl-apple-light-mode.sl-apple-liquid::before {
    /* Темный блик вместо светлого для светлых кнопок */
    background: linear-gradient(to right,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.1) 50%,
            /* Легкая тень вместо света */
            rgba(0, 0, 0, 0) 100%);
}

.sl-apple-light-mode.sl-apple-liquid {
    /* Невидимый градиент, чтобы не затемнять светлый фон */
    background-image: none;
}

/* === Adaptive Theme Logic === */
@media (prefers-color-scheme: dark) {
    /* Если у пользователя темная тема, а кнопка адаптивная -> делаем её белой (чтобы выделялась) или черной? */
    /* Apple Guidelines: On black background use White button. On white background use Black button. */
    /* Так что если Dark Mode -> фон черный -> кнопка должна быть White. */

    .sl-apple-adaptive {
        background-color: #ffffff;
        color: #000000;
        border: 1px solid #e5e5e5;
    }

    .sl-apple-adaptive .fa-apple {
        color: #000000;
    }

    /* В темном режиме кнопка становится белой -> инвертируем блик на темный */
    .sl-apple-adaptive.sl-apple-liquid::before {
        background: linear-gradient(to right,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.1) 50%,
                rgba(0, 0, 0, 0) 100%);
    }

    .sl-apple-adaptive.sl-apple-liquid {
        background-image: none;
    }
}

@media (prefers-color-scheme: light) {

    /* Если светлая тема -> фон белый -> кнопка Черная. */
    .sl-apple-adaptive {
        background-color: #000000;
        color: #ffffff;
        border: none;
    }

    .sl-apple-adaptive .fa-apple {
        color: #ffffff;
    }

    /* Кнопка черная -> блик белый */
    .sl-apple-adaptive.sl-apple-liquid::before {
        background: linear-gradient(to right,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.1) 50%,
                rgba(255, 255, 255, 0) 100%);
    }

    .sl-apple-adaptive.sl-apple-liquid {
        background-image: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.15) 45%, transparent 50%);
    }
}

/* =========================================================================
 * Telegram phone adoption modal (bottom sheet)
 * ========================================================================= */

html.sl-adopt-lock,
html.sl-adopt-lock body {
    overflow: hidden !important;
}

.sl-adopt-modal {
    position: relative;
    z-index: 99999;
}

.sl-adopt-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(16, 20, 30, 0.46);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

/* Optional blur (can reduce text crispness on some GPUs/browsers) */
html.sl-adopt-use-blur .sl-adopt-backdrop {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.sl-adopt-sheet {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 0;
    margin: 0 auto;
    transform: translateY(110%);
    width: auto;
    max-width: 720px;
    max-height: 86vh;
    overflow: hidden; /* Prevent scrollbars (shine, fixed popups, rounding) */
    background: #ffffff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.30);
    opacity: 0;
    pointer-events: none;
    transition: transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1), opacity 200ms ease;
    padding: 18px 18px 14px;
    --sl-adopt-radius: 18px;
    --sl-sms-radius: 12px;
}

.sl-adopt-sheet.is-visible {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.sl-adopt-sheet.is-settled {
    /* Try to restore crisp text rendering on some GPUs after transform animation */
    transform: none !important;
    transition: none !important;
}

.sl-adopt-backdrop.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.sl-adopt-close {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.04);
    color: #333;
    cursor: pointer;
    transition: background 140ms ease, transform 140ms ease;
}

.sl-adopt-close:hover {
    background: rgba(0, 0, 0, 0.07);
}

.sl-adopt-close:active {
    transform: scale(0.98);
}

.sl-adopt-header {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: start;
    padding-right: 44px; /* reserve for close button */
}

.sl-adopt-sheet-content {
    /* Allows graceful overflow on very small viewports without showing scrollbars */
    position: relative;
    z-index: 2; /* keep content above decorative ::before */
    max-height: calc(86vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 12px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    -webkit-overflow-scrolling: touch;
}

.sl-adopt-sheet-content::-webkit-scrollbar {
    width: 0;
    height: 0;
}

.sl-adopt-sheet-content {
    scrollbar-width: none; /* Firefox */
}

/* Prevent horizontal page scroll if some internal fixed dropdown is wider than viewport */
.sl-tel-country-list {
    box-sizing: border-box;
    max-width: calc(100vw - 24px);
}

/* In bottom-sheet: keep the dropdown inside the safe viewport width */
.sl-adopt-sheet .sl-tel-country-list {
    width: 300px;
    max-width: calc(100vw - 24px);
}

.sl-adopt-badge {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%);
    color: #fff;
}

.sl-adopt-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #121826;
}

.sl-adopt-subtitle {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.35;
    color: #5b6472;
}

.sl-adopt-sms {
    margin-top: 14px;
}

.sl-adopt-footer {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.sl-adopt-hint {
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 10px;
}

.sl-adopt-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.sl-adopt-page-link {
    padding-left: 0;
}

/* Bottom-sheet form polish */
.sl-adopt-sheet .sl-input-group {
    box-sizing: border-box;
    min-width: 0;
}

.sl-adopt-sheet .sl-tel-country-selector {
    flex: 0 0 auto;
}

.sl-adopt-sheet .sl-sms-phone-input,
.sl-adopt-sheet .sl-sms-code-input {
    min-width: 0;
}

/* Fix phone input overflowing and missing right border inside modal */
.sl-adopt-sheet .sl-sms-phone-input {
    border-right: 1px solid #ccc !important;
    border-radius: 0 var(--sl-sms-radius, 12px) var(--sl-sms-radius, 12px) 0 !important;
}

.sl-adopt-input-group .sl-tel-selected-country {
    border-radius: var(--sl-sms-radius, 12px) 0 0 var(--sl-sms-radius, 12px);
}

.sl-sms-step-1.sl-sms-step-1--below-row {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sl-sms-step-1.sl-sms-step-1--below-row .sl-input-group {
    margin-bottom: 0;
}

.sl-sms-step-actions,
.sl-adopt-step-actions {
    width: 100%;
    margin-top: 12px;
}

.sl-sms-step-1.sl-sms-step-1--below-row .sl-sms-step-actions,
.sl-sms-step-1.sl-sms-step-1--below-row .sl-adopt-step-actions {
    margin-top: 0;
    margin-bottom: 12px;
}

.sl-sms-step-actions .sl-sms-send-btn--below-row,
.sl-adopt-step-actions .sl-sms-send-btn--below-row {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    justify-content: center;
    border-radius: var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px));
}

.sl-sms-step-actions .sl-sms-send-btn--below-row.sl-sms-send-btn--icon_text,
.sl-sms-step-actions .sl-sms-send-btn--below-row.sl-sms-send-btn--icon-text,
.sl-sms-step-actions .sl-sms-send-btn--below-row.sl-sms-send-btn--icon,
.sl-sms-step-actions .sl-sms-send-btn--below-row.sl-sms-send-btn--icon-only,
.sl-adopt-step-actions .sl-sms-send-btn--below-row.sl-sms-send-btn--icon_text,
.sl-adopt-step-actions .sl-sms-send-btn--below-row.sl-sms-send-btn--icon-text,
.sl-adopt-step-actions .sl-sms-send-btn--below-row.sl-sms-send-btn--icon,
.sl-adopt-step-actions .sl-sms-send-btn--below-row.sl-sms-send-btn--icon-only {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    padding: 0 14px;
    margin-left: 0 !important;
}

.sl-sms-step-actions .sl-sms-send-btn--below-row .sl-sms-send-btn__text,
.sl-adopt-step-actions .sl-sms-send-btn--below-row .sl-sms-send-btn__text {
    max-width: 100%;
}

.sl-adopt-step-actions .btn {
    width: 100%;
}

.sl-sms-step-actions .sl-sms-send-btn--icon,
.sl-sms-step-actions .sl-sms-send-btn--icon-only,
.sl-adopt-step-actions .sl-sms-send-btn--icon,
.sl-adopt-step-actions .sl-sms-send-btn--icon-only {
    width: 48px;
    min-width: 48px;
    padding: 0;
    margin-left: auto;
    justify-content: center;
}

.sl-sms-step-1.sl-sms-step-1--ultra-compact {
    gap: 8px;
}

.sl-sms-step-1.sl-sms-step-1--ultra-compact .sl-tel-country-selector {
    width: 58px;
    min-width: 58px;
}

.sl-sms-step-1.sl-sms-step-1--ultra-compact .sl-tel-selected-country {
    height: 42px;
    padding: 0 8px;
    justify-content: center;
}

.sl-sms-step-1.sl-sms-step-1--ultra-compact .sl-sms-phone-input {
    height: 42px;
    padding: 0 10px;
    font-size: 15px;
    line-height: 42px;
}

.sl-sms-step-1.sl-sms-step-1--ultra-compact .sl-sms-step-actions,
.sl-sms-step-1.sl-sms-step-1--ultra-compact .sl-adopt-step-actions {
    margin-bottom: 14px;
}

.sl-sms-step-1.sl-sms-step-1--ultra-compact .sl-sms-step-actions .sl-sms-send-btn,
.sl-sms-step-1.sl-sms-step-1--ultra-compact .sl-adopt-step-actions .sl-sms-send-btn {
    min-height: 42px;
    padding: 0 14px;
    font-size: 15px;
    box-shadow: none;
}

.sl-sms-step-1.sl-sms-step-1--ultra-compact .sl-sms-step-actions .sl-sms-send-btn__icon,
.sl-sms-step-1.sl-sms-step-1--ultra-compact .sl-adopt-step-actions .sl-sms-send-btn__icon {
    font-size: 15px;
}

.sl-adopt-step2-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sl-adopt-confirm-card {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(0, 114, 255, 0.04), rgba(255, 255, 255, 0.94));
}

.sl-adopt-confirm-title {
    margin-top: 0;
}

.sl-adopt-confirm-text {
    margin-bottom: 10px;
}

.sl-adopt-confirm-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sl-adopt-feedback {
    margin-top: 12px;
}

/* Buttons: keep Bootstrap 3, but make them feel modern */
.sl-adopt-sheet .btn {
    border-radius: 12px;
    height: 44px;
    line-height: 30px;
    font-weight: 600;
    letter-spacing: 0.2px;
    transition: transform 120ms ease, filter 120ms ease, box-shadow 140ms ease;
}

.sl-adopt-sheet .btn:active {
    transform: translateY(1px);
}

.sl-adopt-sheet .btn-primary {
    background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%);
    border-color: rgba(0, 0, 0, 0.04);
    box-shadow: 0 10px 26px rgba(0, 114, 255, 0.22);
}

.sl-adopt-sheet .btn-primary:hover {
    filter: brightness(0.98);
}

.sl-adopt-sheet .btn-success {
    background: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    border-color: rgba(0, 0, 0, 0.04);
    box-shadow: 0 10px 26px rgba(39, 174, 96, 0.18);
}

.sl-adopt-sheet .btn-default {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

.sl-adopt-sheet .btn-link {
    height: auto;
    line-height: inherit;
    padding: 6px 0;
    font-weight: 600;
}

/* Subtle WOW shine (optional, non-distracting) */
.sl-adopt-sheet.sl-adopt-wow::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    pointer-events: none;
    border-radius: 18px 18px 0 0;
    background: radial-gradient(600px 160px at 20% 0%, rgba(0, 114, 255, 0.10), transparent 60%),
        radial-gradient(500px 140px at 80% 10%, rgba(0, 198, 255, 0.10), transparent 60%);
    opacity: 0.70;
}

@media (max-width: 480px) {
    .sl-adopt-sheet {
        border-radius: 16px 16px 0 0;
        padding: 16px 14px 12px;
        left: 8px;
        right: 8px;
        max-width: none;
    }

    .sl-adopt-header {
        grid-template-columns: 40px 1fr;
    }

    .sl-adopt-badge {
        width: 40px;
        height: 40px;
        border-radius: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sl-adopt-backdrop,
    .sl-adopt-sheet {
        transition: none !important;
    }
}

/* =========================================================================
 * Consent gate (pre-login)
 * ========================================================================= */

.sl-consent-scope {
    position: relative;
}

.sl-consent-card {
    margin: 12px 0 10px;
    padding: 10px 12px;
    border: 1px solid rgba(16, 20, 30, 0.10);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.sl-consent-scope[data-consent-position="below"] .sl-consent-card {
    margin: 10px 0 12px;
}

.sl-consent-card .sl-consent-checkbox {
    margin: 2px 0 0;
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

.sl-consent-card.is-implied {
    gap: 0;
}

.sl-consent-card.is-implied .sl-consent-checkbox {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.sl-consent-text {
    font-size: 13px;
    line-height: 1.35;
    color: #1f2937;
}

.sl-consent-text a {
    color: #0b66ff;
    text-decoration: underline;
}

.sl-consent-text .strizh-consent-link {
    font-weight: 600;
}

.sl-consent-text a:hover {
    color: #0a58db;
}

.sl-consent-scope.is-locked .sl-consent-target {
    opacity: 0.55;
    filter: grayscale(0.05);
    pointer-events: none;
}

/* Some themes/widgets set pointer-events on descendants; ensure hard-lock is absolute. */
.sl-consent-scope.is-locked .sl-consent-target * {
    pointer-events: none !important;
}

.sl-consent-nudge {
    animation: sl-consent-nudge 420ms ease;
    border-color: rgba(220, 38, 38, 0.30);
    box-shadow: 0 10px 26px rgba(220, 38, 38, 0.10);
}

@keyframes sl-consent-nudge {
    0% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
    100% { transform: translateX(0); }
}

/* Builtin docs modal (no jQuery, bootstrap not required) */
.sl-consent-doc-modal {
    position: fixed;
    z-index: 99998;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease;
}

.sl-consent-doc-modal.sl-consent-info-modal {
    z-index: 100050;
}

.sl-consent-doc-modal.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.sl-consent-doc-backdrop {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(16, 20, 30, 0.50);
}

.sl-consent-doc-sheet {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 10vh;
    margin: 0 auto;
    max-width: 820px;
    max-height: 80vh;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.30);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 200ms ease, transform 200ms ease;
}

.sl-consent-doc-modal.is-visible .sl-consent-doc-sheet {
    opacity: 1;
    transform: translateY(0);
}

.sl-consent-doc-head {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.sl-consent-doc-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: #121826;
}

.sl-consent-doc-close {
    border: 0;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 12px;
    width: 38px;
    height: 38px;
    cursor: pointer;
}

.sl-consent-doc-body {
    padding: 14px 16px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.sl-consent-doc-body h1,
.sl-consent-doc-body h2,
.sl-consent-doc-body h3 {
    margin-top: 0;
}

/* WebPush OTP Teleportation UX */
.sl-webpush-teleport-toast {
    margin-top: 0;
    padding: 0 12px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.13), rgba(16, 185, 129, 0.06));
    border: 0 solid rgba(16, 185, 129, 0.28);
    color: #0f766e;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.35;
    max-height: 0;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    overflow: hidden;
    transition: opacity 0.24s ease, transform 0.24s ease, max-height 0.24s ease, margin-top 0.24s ease, padding-top 0.24s ease, padding-bottom 0.24s ease, border-width 0.24s ease;
}

.sl-webpush-teleport-toast.is-visible {
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-width: 1px;
    max-height: 120px;
    opacity: 1;
    transform: translateY(0);
}

.sl-input-wrapper .sl-sms-code-input.sl-input--teleport-success,
.sl-input-group .sl-sms-code-input.sl-input--teleport-success {
    border-color: var(--strizh-sms-success-border, #10b981);
    box-shadow: var(--strizh-sms-success-shadow, 0 0 0 3px rgba(16, 185, 129, 0.20));
    transition: border-color 0.20s ease, box-shadow 0.20s ease;
}

/* =========================================================================
 * Theme Studio compatibility layer
 * ========================================================================= */

.strizh-root,
.strizh-overlay-root {
    --strizh-primary: #0ea5e9;
    --strizh-primary-rgb: 14, 165, 233;
    --strizh-accent: #22c55e;
    --strizh-success: #22c55e;
    --strizh-success-rgb: 34, 197, 94;
    --strizh-danger: #ef4444;
    --strizh-danger-rgb: 239, 68, 68;
    --strizh-surface: #ffffff;
    --strizh-text: #0f172a;
    --strizh-muted: #64748b;
    --strizh-text-muted: var(--strizh-muted);
    --strizh-link-color: var(--strizh-primary);
    --strizh-input-border: #cbd5e1;
    --strizh-border-radius: 12px;
    --strizh-modal-radius: 16px;
    --strizh-input-radius: 12px;
    --strizh-shadow: 0 18px 40px rgba(15, 23, 42, 0.08);
    --strizh-gap: 16px;
    color: var(--strizh-text);
}

.strizh-root .strizh-phone-confirm-wrapper,
.strizh-overlay-root .sl-adopt-sheet {
    background: var(--strizh-surface);
    border-radius: var(--strizh-modal-radius);
    box-shadow: var(--strizh-shadow);
    color: var(--strizh-text);
}

.strizh-root .strizh-phone-confirm-wrapper {
    max-width: 480px;
    margin: 0 auto;
    padding: 24px;
    border: 1px solid #e2e8f0;
}

.strizh-root .strizh-phone-confirm-header,
.strizh-overlay-root .strizh-phone-confirm-header {
    margin-bottom: 24px;
}

.strizh-root .strizh-phone-confirm-title,
.strizh-overlay-root .strizh-phone-confirm-title {
    margin: 0 0 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--strizh-text);
    font-size: 20px;
    font-weight: 600;
}

.strizh-root .strizh-phone-confirm-title .fa,
.strizh-overlay-root .strizh-phone-confirm-title .fa {
    color: var(--strizh-primary);
}

.strizh-root .strizh-phone-confirm-subtitle,
.strizh-overlay-root .strizh-phone-confirm-subtitle {
    margin: 0 0 8px;
    color: #334155;
    font-size: 15px;
    font-weight: 500;
}

.strizh-root .strizh-phone-confirm-helper,
.strizh-overlay-root .strizh-phone-confirm-helper {
    margin: 0;
    color: var(--strizh-muted);
    font-size: 13px;
    line-height: 1.5;
}

.strizh-root .strizh-phone-confirm-section,
.strizh-overlay-root .strizh-phone-confirm-section {
    margin-bottom: 24px;
}

.strizh-root .strizh-phone-confirm-snooze,
.strizh-overlay-root .strizh-phone-confirm-snooze {
    margin-bottom: 16px;
}

.strizh-root .strizh-phone-confirm-snooze .sl-adopt-skip-btn,
.strizh-overlay-root .strizh-phone-confirm-snooze .sl-adopt-skip-btn {
    min-width: 200px;
}

.strizh-root .strizh-phone-confirm-footer,
.strizh-overlay-root .strizh-phone-confirm-footer {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e2e8f0;
    color: var(--strizh-muted);
}

.strizh-root .strizh-phone-confirm-footer-note,
.strizh-overlay-root .strizh-phone-confirm-footer-note {
    color: var(--strizh-muted);
    font-size: 13px;
    margin-right: 8px;
}

.strizh-root .strizh-phone-confirm-link,
.strizh-overlay-root .strizh-phone-confirm-link {
    color: var(--strizh-primary);
    font-size: 13px;
    font-weight: 500;
}

.strizh-root .sl-adopt-inline-link,
.strizh-overlay-root .sl-adopt-inline-link {
    padding: 0;
    border: 0;
    background: none;
    text-decoration: none;
    vertical-align: baseline;
}

.strizh-root .sl-input-group,
.strizh-overlay-root .sl-input-group,
.strizh-root .form-control,
.strizh-overlay-root .form-control {
    border-radius: var(--strizh-input-radius);
}

.strizh-root .sl-sms-step-actions,
.strizh-overlay-root .sl-sms-step-actions {
    margin-top: 12px;
}

.strizh-root .sl-sms-step-2-actions,
.strizh-overlay-root .sl-sms-step-2-actions,
.strizh-root .sl-adopt-confirm-actions,
.strizh-overlay-root .sl-adopt-confirm-actions,
.strizh-root .sl-adopt-actions,
.strizh-overlay-root .sl-adopt-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.strizh-root .sl-sms-feedback-container,
.strizh-overlay-root .sl-sms-feedback-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin-top: 12px;
}

.strizh-root .sl-sms-feedback-container > div,
.strizh-overlay-root .sl-sms-feedback-container > div {
    margin: 0;
    padding-top: 0;
}

.strizh-root .sl-sms-feedback-container .sl-field-error,
.strizh-root .sl-sms-feedback-container .sl-sms-message,
.strizh-overlay-root .sl-sms-feedback-container .sl-field-error,
.strizh-overlay-root .sl-sms-feedback-container .sl-sms-message {
    order: 1;
}

.strizh-root .sl-sms-feedback-container .sl-sms-resend-timer,
.strizh-overlay-root .sl-sms-feedback-container .sl-sms-resend-timer {
    order: 2;
}

.strizh-root .sl-sms-feedback-container .sl-sms-fallback,
.strizh-overlay-root .sl-sms-feedback-container .sl-sms-fallback {
    order: 3;
}

.strizh-root .sl-adopt-confirm,
.strizh-overlay-root .sl-adopt-confirm {
    margin-top: 14px;
    padding: 14px;
    border: 1px solid #e5e5e5;
    border-radius: var(--strizh-border-radius);
    background: #fff;
}

.strizh-root .sl-adopt-confirm-title,
.strizh-overlay-root .sl-adopt-confirm-title {
    margin-top: 0;
    margin-bottom: 10px;
    color: var(--strizh-text);
}

.strizh-root .sl-adopt-confirm-text,
.strizh-overlay-root .sl-adopt-confirm-text {
    margin-bottom: 10px;
    color: var(--strizh-muted);
}

/* Theme Studio visual lock: leave colors and radii overrideable from user CSS. */
.strizh-root .sl-sms-send-btn,
.strizh-root .sl-adopt-btn-primary,
.strizh-overlay-root .sl-sms-send-btn,
.strizh-overlay-root .sl-adopt-btn-primary {
    width: 100%;
    border-radius: var(--strizh-sms-button-radius, var(--sl-sms-radius, var(--strizh-border-radius)));
    background: var(--strizh-sms-button-bg, linear-gradient(45deg, var(--sl-sms-bg-start, var(--strizh-primary)), var(--sl-sms-bg-end, var(--strizh-primary))));
    border-color: var(--strizh-sms-button-border-color, var(--sl-sms-bg-end, var(--strizh-primary)));
    color: var(--strizh-sms-button-text, var(--sl-sms-text-color, #ffffff));
    box-shadow: var(--strizh-sms-button-shadow, var(--sl-sms-shadow, none));
}

.strizh-root .sl-sms-step-actions .sl-sms-send-btn--icon,
.strizh-root .sl-sms-step-actions .sl-sms-send-btn--icon-only,
.strizh-overlay-root .sl-sms-step-actions .sl-sms-send-btn--icon,
.strizh-overlay-root .sl-sms-step-actions .sl-sms-send-btn--icon-only,
.strizh-root .sl-adopt-step-actions .sl-sms-send-btn--icon,
.strizh-root .sl-adopt-step-actions .sl-sms-send-btn--icon-only,
.strizh-overlay-root .sl-adopt-step-actions .sl-sms-send-btn--icon,
.strizh-overlay-root .sl-adopt-step-actions .sl-sms-send-btn--icon-only {
    width: 48px;
    max-width: 48px;
    min-width: 48px;
    padding: 0;
    margin-left: auto;
}

.strizh-root .sl-sms-step-actions .sl-sms-send-btn--below-row,
.strizh-root .sl-adopt-step-actions .sl-sms-send-btn--below-row,
.strizh-overlay-root .sl-sms-step-actions .sl-sms-send-btn--below-row,
.strizh-overlay-root .sl-adopt-step-actions .sl-sms-send-btn--below-row {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding: 0 14px;
    border-radius: var(--strizh-sms-button-radius, var(--sl-sms-radius, var(--strizh-border-radius)));
}

/* Не растягиваем составные SMS-кнопки внутри строки ввода. Иначе input схлопывается. */
.strizh-root .sl-input-group:not(.sl-input-group--stacked) .sl-sms-send-btn,
.strizh-root .sl-input-group:not(.sl-input-group--stacked) .sl-sms-verify-btn,
.strizh-overlay-root .sl-input-group:not(.sl-input-group--stacked) .sl-sms-send-btn,
.strizh-overlay-root .sl-input-group:not(.sl-input-group--stacked) .sl-sms-verify-btn {
    width: auto;
    flex: 0 0 auto;
    border-radius: 0 var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) 0;
}

.strizh-root .sl-sms-verify-btn,
.strizh-root .sl-adopt-btn-success,
.strizh-overlay-root .sl-sms-verify-btn,
.strizh-overlay-root .sl-adopt-btn-success {
    border-radius: var(--strizh-sms-verify-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, var(--strizh-border-radius))));
    background: var(--strizh-sms-verify-bg, var(--strizh-sms-button-bg, linear-gradient(45deg, var(--sl-sms-bg-start, var(--strizh-accent)), var(--sl-sms-bg-end, var(--strizh-accent)))));
    border-color: var(--strizh-sms-verify-border-color, var(--strizh-sms-button-border-color, var(--sl-sms-bg-end, var(--strizh-accent))));
    color: var(--strizh-sms-verify-text, var(--strizh-sms-button-text, var(--sl-sms-text-color, #ffffff)));
    box-shadow: var(--strizh-sms-verify-shadow, var(--strizh-sms-button-shadow, var(--sl-sms-shadow, none)));
}

.strizh-root .sl-sms-change-number-btn,
.strizh-root .sl-adopt-confirm-back,
.strizh-overlay-root .sl-sms-change-number-btn,
.strizh-overlay-root .sl-adopt-confirm-back {
    border-radius: var(--strizh-border-radius);
}

.strizh-root .sl-auth-modal-content,
.strizh-overlay-root .sl-auth-modal-content,
.strizh-root .sl-consent-card,
.strizh-overlay-root .sl-consent-card,
.strizh-root .sl-consent-doc-sheet,
.strizh-overlay-root .sl-consent-doc-sheet,
.strizh-overlay-root .sl-upsell-sheet {
    background: var(--strizh-surface);
    border-radius: var(--strizh-modal-radius);
    box-shadow: var(--strizh-shadow);
}

.strizh-root .sl-auth-modal-title,
.strizh-overlay-root .sl-auth-modal-title,
.strizh-root .sl-consent-text,
.strizh-overlay-root .sl-consent-text,
.strizh-root .sl-consent-doc-title,
.strizh-overlay-root .sl-consent-doc-title,
.strizh-root .sl-consent-doc-body,
.strizh-overlay-root .sl-consent-doc-body,
.strizh-overlay-root .sl-upsell-title {
    color: var(--strizh-text);
}

.strizh-root .sl-auth-modal-text,
.strizh-overlay-root .sl-auth-modal-text,
.strizh-overlay-root .sl-upsell-desc,
.strizh-overlay-root .sl-upsell-btn-secondary {
    color: var(--strizh-muted);
}

.strizh-root .sl-auth-modal-close,
.strizh-overlay-root .sl-auth-modal-close {
    border-radius: calc(var(--strizh-border-radius) - 2px);
}

.strizh-root .sl-buttons-wrap,
.strizh-overlay-root .sl-buttons-wrap,
.strizh-root .social-login-buttons .buttons,
.strizh-root .social-login-buttons .buttons.clearfix,
.strizh-overlay-root .social-login-buttons .buttons,
.strizh-overlay-root .social-login-buttons .buttons.clearfix {
    gap: var(--strizh-gap);
}

.strizh-root .sl-passkey-login-btn,
.strizh-root .social-button-icon--passkey,
.strizh-overlay-root .sl-passkey-login-btn,
.strizh-overlay-root .social-button-icon--passkey {
    border-radius: var(--strizh-border-radius);
}

.strizh-root .sl-consent-text a,
.strizh-overlay-root .sl-consent-text a,
.strizh-overlay-root .sl-upsell-icon {
    color: var(--strizh-primary);
}

.strizh-overlay-root .sl-upsell-btn-primary {
    background: var(--strizh-primary);
    border-radius: var(--strizh-border-radius);
    color: #ffffff;
}

.strizh-overlay-root .sl-upsell-icon {
    background: rgba(14, 165, 233, 0.12);
}

/* =========================================================================
 * Premium OTP confirmation polish
 * ========================================================================= */

.strizh-root .sl-sms-step-2,
.strizh-overlay-root .sl-sms-step-2 {
    min-width: 0;
}

.strizh-root .sl-sms-step-2-stack,
.strizh-overlay-root .sl-sms-step-2-stack {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
}

.strizh-root .sl-sms-container.sl-sms-layout-guided .sl-sms-step-2-main,
.strizh-overlay-root .sl-sms-container.sl-sms-layout-guided .sl-sms-step-2-main {
    gap: 16px;
}

.strizh-root .sl-sms-container.sl-sms-layout-guided .sl-sms-step-2-note-slot:not(.is-empty),
.strizh-overlay-root .sl-sms-container.sl-sms-layout-guided .sl-sms-step-2-note-slot:not(.is-empty) {
    margin-bottom: 24px;
}

.strizh-root .sl-sms-container.sl-sms-on-step-2 .sl-sms-feedback-container,
.strizh-overlay-root .sl-sms-container.sl-sms-on-step-2 .sl-sms-feedback-container {
    margin-top: 12px;
    gap: 10px;
}

.strizh-root .sl-sms-container.sl-sms-layout-guided.sl-sms-change-number-below .sl-sms-step-2-actions,
.strizh-overlay-root .sl-sms-container.sl-sms-layout-guided.sl-sms-change-number-below .sl-sms-step-2-actions {
    gap: 4px;
}

.strizh-root .sl-sms-container.sl-sms-layout-guided.sl-sms-change-number-below .sl-sms-change-number-btn,
.strizh-overlay-root .sl-sms-container.sl-sms-layout-guided.sl-sms-change-number-below .sl-sms-change-number-btn {
    min-height: 22px;
    line-height: 1.2;
}

.strizh-root .sl-sms-container.sl-sms-layout-guided.sl-sms-change-number-below.sl-sms-on-step-2 .sl-sms-feedback-container,
.strizh-overlay-root .sl-sms-container.sl-sms-layout-guided.sl-sms-change-number-below.sl-sms-on-step-2 .sl-sms-feedback-container {
    margin-top: 4px;
    gap: 8px;
}

.strizh-root .strizh-otp-input,
.strizh-overlay-root .strizh-otp-input {
    border: 1px solid var(--strizh-input-border, #cbd5e1);
    background: var(--strizh-surface, #ffffff);
    color: var(--strizh-text, #0f172a);
    text-align: center;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: 4px;
    font-variant-numeric: tabular-nums;
    padding: 0 18px;
    caret-color: var(--strizh-primary, #0ea5e9);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.strizh-root .sl-input-wrapper .strizh-otp-input,
.strizh-overlay-root .sl-input-wrapper .strizh-otp-input {
    width: 100%;
}

.strizh-root .strizh-otp-input::placeholder,
.strizh-overlay-root .strizh-otp-input::placeholder {
    color: var(--strizh-text-muted, #64748b);
    opacity: 0.72;
    letter-spacing: 6px;
    font-weight: 500;
}

.strizh-root .strizh-otp-input:focus,
.strizh-overlay-root .strizh-otp-input:focus {
    border-color: var(--strizh-primary, #0ea5e9);
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--strizh-primary-rgb, 14, 165, 233), 0.18);
}

.strizh-root .strizh-otp-input.sl-input--error,
.strizh-root .sl-input-group.sl-has-error .strizh-otp-input,
.strizh-overlay-root .strizh-otp-input.sl-input--error,
.strizh-overlay-root .sl-input-group.sl-has-error .strizh-otp-input {
    border-color: var(--strizh-danger, #ef4444);
    box-shadow: 0 0 0 3px rgba(var(--strizh-danger-rgb, 239, 68, 68), 0.14);
}

.strizh-root .strizh-otp-input.sl-input--teleport-success,
.strizh-root .strizh-otp-input.sl-input--success,
.strizh-overlay-root .strizh-otp-input.sl-input--teleport-success,
.strizh-overlay-root .strizh-otp-input.sl-input--success {
    border-color: var(--strizh-success, #22c55e);
    box-shadow: 0 0 0 3px rgba(var(--strizh-success-rgb, 34, 197, 94), 0.16);
}

.strizh-root .sl-change-number-link,
.strizh-root .sl-sms-change-number-btn,
.strizh-overlay-root .sl-change-number-link,
.strizh-overlay-root .sl-sms-change-number-btn {
    color: var(--strizh-link-color, #0ea5e9);
    font-weight: 500;
    text-decoration: none;
}

.strizh-root .sl-change-number-link:hover,
.strizh-root .sl-change-number-link:focus,
.strizh-root .sl-sms-change-number-btn:hover,
.strizh-root .sl-sms-change-number-btn:focus,
.strizh-overlay-root .sl-change-number-link:hover,
.strizh-overlay-root .sl-change-number-link:focus,
.strizh-overlay-root .sl-sms-change-number-btn:hover,
.strizh-overlay-root .sl-sms-change-number-btn:focus {
    color: var(--strizh-link-color, #0ea5e9);
    text-decoration: underline;
}

.strizh-root .sl-sms-resend-timer,
.strizh-overlay-root .sl-sms-resend-timer {
    color: var(--strizh-text-muted, #64748b);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.45;
}

.strizh-root .sl-sms-channel-note,
.strizh-overlay-root .sl-sms-channel-note {
    border-radius: var(--strizh-modal-radius, 12px);
    box-shadow: var(--strizh-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.strizh-root .sl-sms-channel-note.is-pending,
.strizh-root .sl-sms-channel-note.is-success,
.strizh-root .sl-sms-channel-note.is-fallback,
.strizh-root .sl-sms-channel-note.is-error,
.strizh-overlay-root .sl-sms-channel-note.is-pending,
.strizh-overlay-root .sl-sms-channel-note.is-success,
.strizh-overlay-root .sl-sms-channel-note.is-fallback,
.strizh-overlay-root .sl-sms-channel-note.is-error {
    box-shadow: var(--strizh-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
}

.strizh-root .sl-otp-model-input,
.strizh-overlay-root .sl-otp-model-input {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.strizh-root .strizh-split-otp-container,
.strizh-overlay-root .strizh-split-otp-container {
    position: relative;
    display: grid;
    box-sizing: border-box;
    width: 100%;
    grid-template-columns: repeat(var(--sl-split-otp-length, 5), minmax(0, 1fr));
    --sl-split-otp-gap: 10px;
    gap: var(--sl-split-otp-gap);
    padding: 2px;
    align-items: stretch;
    overflow: hidden;
    transform-origin: center center;
    transition: opacity 120ms ease, transform 120ms ease, filter 120ms ease;
    --strizh-active-index: 0;
    --strizh-channel-rgb: 14, 165, 233;
}

.strizh-root .strizh-split-otp-container::before,
.strizh-overlay-root .strizh-split-otp-container::before {
    content: "";
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 2px;
    z-index: 0;
    width: calc((100% - (var(--sl-split-otp-length, 5) - 1) * var(--sl-split-otp-gap, 10px) - 4px) / var(--sl-split-otp-length, 5));
    border-radius: calc(var(--strizh-otp-cell-radius, 15px) + 1px);
    background: linear-gradient(180deg, rgba(var(--strizh-channel-rgb), 0.08) 0%, rgba(var(--strizh-channel-rgb), 0.00) 100%);
    transform: translateX(calc(var(--strizh-active-index, 0) * (100% + var(--sl-split-otp-gap, 10px))));
    transition: transform 0.18s ease, background 0.2s ease, opacity 0.2s ease;
    pointer-events: none;
}

.strizh-root .strizh-split-otp-container[data-channel="max"],
.strizh-overlay-root .strizh-split-otp-container[data-channel="max"] {
    --strizh-channel-rgb: 139, 92, 246;
}

.strizh-root .strizh-split-otp-container[data-channel="telegram"],
.strizh-overlay-root .strizh-split-otp-container[data-channel="telegram"] {
    --strizh-channel-rgb: 56, 189, 248;
}

.strizh-root .strizh-split-otp-container[data-channel="vk"],
.strizh-overlay-root .strizh-split-otp-container[data-channel="vk"] {
    --strizh-channel-rgb: 0, 119, 255;
}

.strizh-root .strizh-split-otp-container[data-channel="webpush"],
.strizh-overlay-root .strizh-split-otp-container[data-channel="webpush"] {
    --strizh-channel-rgb: 34, 197, 94;
}

.strizh-root .strizh-digit-box-wrap,
.strizh-overlay-root .strizh-digit-box-wrap {
    position: relative;
    display: flex;
    z-index: 1;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: center;
}

.strizh-root .strizh-digit-box,
.strizh-overlay-root .strizh-digit-box {
    position: relative;
    z-index: 2;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    height: 56px;
    border: 1px solid var(--strizh-input-border, #cbd5e1) !important;
    border-top: 1px solid var(--strizh-input-border, #cbd5e1) !important;
    border-right: 1px solid var(--strizh-input-border, #cbd5e1) !important;
    border-bottom: 1px solid var(--strizh-input-border, #cbd5e1) !important;
    border-left: 1px solid var(--strizh-input-border, #cbd5e1) !important;
    border-image: none !important;
    border-radius: var(--strizh-otp-cell-radius, 15px) !important;
    background-clip: padding-box;
    background: #ffffff !important;
    color: var(--strizh-text, #0f172a);
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.strizh-root .strizh-digit-box-wrap::after,
.strizh-overlay-root .strizh-digit-box-wrap::after {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    inset: -1px;
    border-radius: calc(var(--strizh-otp-cell-radius, 15px) + 1px);
    box-shadow: 0 0 0 0 rgba(var(--strizh-channel-rgb), 0);
    pointer-events: none;
    transition: box-shadow 0.2s ease, transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: box-shadow, transform;
}

.strizh-root .strizh-split-otp-container.is-underlined,
.strizh-overlay-root .strizh-split-otp-container.is-underlined {
    --sl-split-otp-gap: 12px;
    gap: var(--sl-split-otp-gap);
    align-items: end;
}

.strizh-root .strizh-split-otp-container.is-underlined::before,
.strizh-overlay-root .strizh-split-otp-container.is-underlined::before {
    top: 12px;
    bottom: 2px;
    border-radius: calc(var(--strizh-otp-cell-radius, 15px) + 1px) calc(var(--strizh-otp-cell-radius, 15px) + 1px) 8px 8px;
    background: linear-gradient(180deg, rgba(var(--strizh-channel-rgb), 0.06) 0%, rgba(var(--strizh-channel-rgb), 0.00) 88%);
}

.strizh-root .strizh-split-otp-container.is-underlined .strizh-digit-box-wrap,
.strizh-overlay-root .strizh-split-otp-container.is-underlined .strizh-digit-box-wrap {
    align-items: end;
}

.strizh-root .strizh-split-otp-container.is-underlined .strizh-digit-box,
.strizh-overlay-root .strizh-split-otp-container.is-underlined .strizh-digit-box {
    height: 54px;
    border: 0 !important;
    border-top: 0 !important;
    border-right: 0 !important;
    border-left: 0 !important;
    border-bottom: 2px solid rgba(var(--strizh-channel-rgb), 0.24) !important;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none;
    padding: 0;
}

.strizh-root .strizh-digit-box-wrap.is-focused .strizh-digit-box,
.strizh-root .strizh-digit-box-wrap:focus-within .strizh-digit-box,
.strizh-overlay-root .strizh-digit-box-wrap.is-focused .strizh-digit-box,
.strizh-overlay-root .strizh-digit-box-wrap:focus-within .strizh-digit-box {
    border-color: rgb(var(--strizh-channel-rgb)) !important;
}

.strizh-root .strizh-digit-box-wrap.is-focused::after,
.strizh-root .strizh-digit-box-wrap:focus-within::after,
.strizh-overlay-root .strizh-digit-box-wrap.is-focused::after,
.strizh-overlay-root .strizh-digit-box-wrap:focus-within::after {
    box-shadow: 0 0 0 4px rgba(var(--strizh-channel-rgb), 0.15);
}

.strizh-root .strizh-split-otp-container.is-underlined .strizh-digit-box-wrap.is-focused .strizh-digit-box,
.strizh-root .strizh-split-otp-container.is-underlined .strizh-digit-box-wrap:focus-within .strizh-digit-box,
.strizh-overlay-root .strizh-split-otp-container.is-underlined .strizh-digit-box-wrap.is-focused .strizh-digit-box,
.strizh-overlay-root .strizh-split-otp-container.is-underlined .strizh-digit-box-wrap:focus-within .strizh-digit-box {
    background: transparent;
    border-color: transparent !important;
    border-bottom-color: rgb(var(--strizh-channel-rgb)) !important;
    box-shadow: none !important;
}

.strizh-root .strizh-split-otp-container .strizh-digit-box.is-filled,
.strizh-overlay-root .strizh-split-otp-container .strizh-digit-box.is-filled {
    background: linear-gradient(180deg, rgba(var(--strizh-channel-rgb), 0.08) 0%, rgba(255, 255, 255, 0.98) 100%);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.04), 0 0 0 1px rgba(var(--strizh-channel-rgb), 0.08) !important;
    border-color: rgba(var(--strizh-channel-rgb), 0.32) !important;
    color: #0f172a;
}

.strizh-root .strizh-split-otp-container .strizh-digit-box-wrap.is-focused .strizh-digit-box.is-filled,
.strizh-root .strizh-split-otp-container .strizh-digit-box-wrap:focus-within .strizh-digit-box.is-filled,
.strizh-overlay-root .strizh-split-otp-container .strizh-digit-box-wrap.is-focused .strizh-digit-box.is-filled,
.strizh-overlay-root .strizh-split-otp-container .strizh-digit-box-wrap:focus-within .strizh-digit-box.is-filled {
    background: #ffffff;
    border-color: rgb(var(--strizh-channel-rgb)) !important;
}

.strizh-root .strizh-split-otp-container.is-underlined .strizh-digit-box.is-filled,
.strizh-overlay-root .strizh-split-otp-container.is-underlined .strizh-digit-box.is-filled {
    background: linear-gradient(180deg, rgba(var(--strizh-channel-rgb), 0.06) 0%, rgba(255, 255, 255, 0.00) 72%);
    border-color: transparent !important;
    border-bottom-color: rgba(var(--strizh-channel-rgb), 0.58) !important;
    box-shadow: none !important;
}

.strizh-root .strizh-split-otp-container.is-underlined .strizh-digit-box-wrap.is-focused .strizh-digit-box.is-filled,
.strizh-root .strizh-split-otp-container.is-underlined .strizh-digit-box-wrap:focus-within .strizh-digit-box.is-filled,
.strizh-overlay-root .strizh-split-otp-container.is-underlined .strizh-digit-box-wrap.is-focused .strizh-digit-box.is-filled,
.strizh-overlay-root .strizh-split-otp-container.is-underlined .strizh-digit-box-wrap:focus-within .strizh-digit-box.is-filled {
    background: linear-gradient(180deg, rgba(var(--strizh-channel-rgb), 0.08) 0%, rgba(255, 255, 255, 0.00) 72%);
    border-color: transparent !important;
    border-bottom-color: rgb(var(--strizh-channel-rgb)) !important;
    box-shadow: none !important;
}

.strizh-root .strizh-digit-box-wrap.is-pulsing .strizh-digit-box,
.strizh-overlay-root .strizh-digit-box-wrap.is-pulsing .strizh-digit-box {
    border-color: rgb(var(--strizh-channel-rgb)) !important;
}

.strizh-root .strizh-digit-box-wrap.is-pulsing::after,
.strizh-overlay-root .strizh-digit-box-wrap.is-pulsing::after {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(var(--strizh-channel-rgb), 0.25);
}

.strizh-root .strizh-split-otp-container.is-underlined .strizh-digit-box-wrap.is-pulsing .strizh-digit-box,
.strizh-overlay-root .strizh-split-otp-container.is-underlined .strizh-digit-box-wrap.is-pulsing .strizh-digit-box {
    border-color: transparent !important;
    border-bottom-color: rgb(var(--strizh-channel-rgb)) !important;
}

.strizh-root .strizh-split-otp-container.is-success-lock .strizh-digit-box,
.strizh-overlay-root .strizh-split-otp-container.is-success-lock .strizh-digit-box {
    border-color: var(--strizh-success, #22c55e) !important;
    color: var(--strizh-success, #16a34a) !important;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.08) 0%, #ffffff 100%) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03), 0 0 0 1px rgba(34, 197, 94, 0.12) !important;
}

.strizh-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap::after,
.strizh-overlay-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap::after {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2) !important;
}

.strizh-root .strizh-split-otp-container.is-success-lock::before,
.strizh-overlay-root .strizh-split-otp-container.is-success-lock::before {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.10) 0%, rgba(34, 197, 94, 0.00) 100%);
}

.strizh-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap,
.strizh-overlay-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap {
    animation: strizhSuccessCascade 200ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.strizh-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap:nth-child(1),
.strizh-overlay-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap:nth-child(1) { animation-delay: 0ms; }

.strizh-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap:nth-child(2),
.strizh-overlay-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap:nth-child(2) { animation-delay: 30ms; }

.strizh-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap:nth-child(3),
.strizh-overlay-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap:nth-child(3) { animation-delay: 60ms; }

.strizh-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap:nth-child(4),
.strizh-overlay-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap:nth-child(4) { animation-delay: 90ms; }

.strizh-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap:nth-child(5),
.strizh-overlay-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap:nth-child(5) { animation-delay: 120ms; }

.strizh-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap:nth-child(6),
.strizh-overlay-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap:nth-child(6) { animation-delay: 150ms; }

.strizh-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap.is-focused .strizh-digit-box,
.strizh-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap:focus-within .strizh-digit-box,
.strizh-overlay-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap.is-focused .strizh-digit-box,
.strizh-overlay-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap:focus-within .strizh-digit-box {
    border-color: var(--strizh-success, #22c55e) !important;
    color: var(--strizh-success, #16a34a) !important;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.08) 0%, #ffffff 100%) !important;
}

.strizh-root .strizh-split-otp-container.is-underlined.is-success-lock .strizh-digit-box,
.strizh-overlay-root .strizh-split-otp-container.is-underlined.is-success-lock .strizh-digit-box {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.08) 0%, rgba(255, 255, 255, 0.00) 72%) !important;
    border-color: transparent !important;
    border-bottom-color: var(--strizh-success, #22c55e) !important;
    box-shadow: inset 0 -3px 0 var(--strizh-success, #22c55e) !important;
}

.strizh-root .strizh-split-otp-container.is-underlined.is-success-lock .strizh-digit-box-wrap.is-focused .strizh-digit-box,
.strizh-root .strizh-split-otp-container.is-underlined.is-success-lock .strizh-digit-box-wrap:focus-within .strizh-digit-box,
.strizh-overlay-root .strizh-split-otp-container.is-underlined.is-success-lock .strizh-digit-box-wrap.is-focused .strizh-digit-box,
.strizh-overlay-root .strizh-split-otp-container.is-underlined.is-success-lock .strizh-digit-box-wrap:focus-within .strizh-digit-box {
    border-color: transparent !important;
    border-bottom-color: var(--strizh-success, #22c55e) !important;
    box-shadow: inset 0 -3px 0 var(--strizh-success, #22c55e) !important;
}

.strizh-root .strizh-split-otp-container.is-success-dissolve,
.strizh-overlay-root .strizh-split-otp-container.is-success-dissolve {
    opacity: 0.88;
    transform: scale(0.985);
    filter: saturate(1.04) brightness(1.01);
}

.strizh-root .strizh-split-otp-container.is-success-dissolve::before,
.strizh-overlay-root .strizh-split-otp-container.is-success-dissolve::before {
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.14) 0%, rgba(34, 197, 94, 0.03) 100%);
}

.strizh-root .strizh-split-otp-container.is-success-dissolve .strizh-digit-box-wrap::after,
.strizh-overlay-root .strizh-split-otp-container.is-success-dissolve .strizh-digit-box-wrap::after {
    box-shadow: 0 0 0 8px rgba(34, 197, 94, 0.10) !important;
}

.strizh-root .strizh-split-otp-container.is-complete-sweep::after,
.strizh-overlay-root .strizh-split-otp-container.is-complete-sweep::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: calc(var(--strizh-otp-cell-radius, 15px) + 2px);
    background: linear-gradient(90deg,
        rgba(var(--strizh-channel-rgb), 0.00) 0%,
        rgba(var(--strizh-channel-rgb), 0.10) 45%,
        rgba(var(--strizh-channel-rgb), 0.00) 100%);
    animation: strizhOtpSweep 180ms ease-out forwards;
    pointer-events: none;
    z-index: 10;
}

@keyframes strizhOtpSweep {
    from { transform: translateX(-20%); opacity: 0; }
    40% { opacity: 1; }
    to { transform: translateX(100%); opacity: 0; }
}

@keyframes strizhSuccessCascade {
    0% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
    100% { transform: translateY(0); }
}

.strizh-root .strizh-split-otp-container.is-error .strizh-digit-box,
.strizh-root .strizh-digit-box.is-error,
.strizh-overlay-root .strizh-split-otp-container.is-error .strizh-digit-box,
.strizh-overlay-root .strizh-digit-box.is-error {
    border-color: var(--strizh-danger, #ef4444) !important;
    box-shadow: 0 0 0 3px rgba(var(--strizh-danger-rgb, 239, 68, 68), 0.12);
}

.strizh-root .strizh-split-otp-container.is-success .strizh-digit-box,
.strizh-root .strizh-digit-box.is-success,
.strizh-overlay-root .strizh-split-otp-container.is-success .strizh-digit-box,
.strizh-overlay-root .strizh-digit-box.is-success {
    border-color: var(--strizh-success, #22c55e) !important;
    box-shadow: 0 0 0 3px rgba(var(--strizh-success-rgb, 34, 197, 94), 0.12);
}

.strizh-root .strizh-split-otp-container.is-success-lock .strizh-digit-box,
.strizh-overlay-root .strizh-split-otp-container.is-success-lock .strizh-digit-box {
    border-color: var(--strizh-success, #22c55e) !important;
    color: var(--strizh-success, #16a34a) !important;
    background: linear-gradient(180deg, rgba(34, 197, 94, 0.08) 0%, #ffffff 100%) !important;
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.03), 0 0 0 1px rgba(34, 197, 94, 0.12) !important;
}

.strizh-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap::after,
.strizh-overlay-root .strizh-split-otp-container.is-success-lock .strizh-digit-box-wrap::after {
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.2) !important;
}

.strizh-root .strizh-split-otp-container.is-disabled .strizh-digit-box,
.strizh-overlay-root .strizh-split-otp-container.is-disabled .strizh-digit-box {
    cursor: default;
    opacity: 0.72;
    background: rgba(226, 232, 240, 0.42);
}

.strizh-root .sl-sms-container.sl-sms-otp-split .sl-sms-code-group,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-split .sl-sms-code-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    row-gap: 0;
}

.strizh-root .sl-sms-container.sl-sms-otp-split .sl-sms-code-group .sl-input-wrapper,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-split .sl-sms-code-group .sl-input-wrapper {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}

.strizh-root .sl-sms-container.sl-sms-otp-split .sl-sms-code-group .sl-sms-code-input,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-split .sl-sms-code-group .sl-sms-code-input {
    border-radius: var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-split .sl-sms-code-group .sl-sms-verify-btn,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-split .sl-sms-code-group .sl-sms-verify-btn {
    display: none !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .strizh-split-otp-container,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .strizh-split-otp-container {
    display: none !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-input-wrapper,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-input-wrapper {
    position: relative;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    --sl-classic-otp-guide-inset: 28px;
    --sl-classic-otp-guide-gap: 14px;
    --sl-classic-otp-guide-rgb: 148, 163, 184;
    --sl-classic-otp-guide-alpha: 0.34;
    --sl-classic-otp-guide-inset-double: calc(var(--sl-classic-otp-guide-inset) + var(--sl-classic-otp-guide-inset));
    --sl-classic-otp-guide-gap-total: calc(var(--sl-classic-otp-guide-gap) + var(--sl-classic-otp-guide-gap) + var(--sl-classic-otp-guide-gap) + var(--sl-classic-otp-guide-gap));
    --sl-classic-otp-guide-segment: calc((100% - var(--sl-classic-otp-guide-inset-double) - var(--sl-classic-otp-guide-gap-total)) / 5);
    --sl-classic-otp-guide-step: calc(var(--sl-classic-otp-guide-segment) + var(--sl-classic-otp-guide-gap));
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-input-wrapper::after,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-input-wrapper::after {
    content: "";
    position: absolute;
    left: var(--sl-classic-otp-guide-inset);
    right: var(--sl-classic-otp-guide-inset);
    bottom: 10px;
    height: 2px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.96;
    background-image:
        linear-gradient(90deg, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 0%, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 100%),
        linear-gradient(90deg, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 0%, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 100%),
        linear-gradient(90deg, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 0%, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 100%),
        linear-gradient(90deg, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 0%, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 100%),
        linear-gradient(90deg, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 0%, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 100%);
    background-repeat: no-repeat;
    background-size:
        var(--sl-classic-otp-guide-segment) 2px,
        var(--sl-classic-otp-guide-segment) 2px,
        var(--sl-classic-otp-guide-segment) 2px,
        var(--sl-classic-otp-guide-segment) 2px,
        var(--sl-classic-otp-guide-segment) 2px;
    background-position:
        0 0,
        var(--sl-classic-otp-guide-step) 0,
        calc(var(--sl-classic-otp-guide-step) + var(--sl-classic-otp-guide-step)) 0,
        calc(var(--sl-classic-otp-guide-step) + var(--sl-classic-otp-guide-step) + var(--sl-classic-otp-guide-step)) 0,
        calc(var(--sl-classic-otp-guide-step) + var(--sl-classic-otp-guide-step) + var(--sl-classic-otp-guide-step) + var(--sl-classic-otp-guide-step)) 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input.sl-otp-model-input,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input.sl-otp-model-input {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    border-width: 1px !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input {
    position: relative;
    z-index: 1;
    padding-bottom: 8px;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input::placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input::placeholder,
.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input::-webkit-input-placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input::-webkit-input-placeholder,
.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input:-ms-input-placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input:-ms-input-placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-input-wrapper:focus-within,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-input-wrapper:focus-within {
    --sl-classic-otp-guide-rgb: var(--strizh-primary-rgb, 14, 165, 233);
    --sl-classic-otp-guide-alpha: 0.46;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group.sl-has-error .sl-input-wrapper,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group.sl-has-error .sl-input-wrapper {
    --sl-classic-otp-guide-rgb: var(--strizh-danger-rgb, 239, 68, 68);
    --sl-classic-otp-guide-alpha: 0.52;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input.sl-input--teleport-success + .sl-sms-verify-btn,
.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input.sl-input--success + .sl-sms-verify-btn,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input.sl-input--teleport-success + .sl-sms-verify-btn,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input.sl-input--success + .sl-sms-verify-btn {
    box-shadow: 0 0 0 3px rgba(var(--strizh-success-rgb, 34, 197, 94), 0.14);
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input.sl-input--teleport-success,
.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input.sl-input--success,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input.sl-input--teleport-success,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-code-input.sl-input--success {
    border-color: var(--strizh-success, #22c55e);
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-verify-btn,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-code-group .sl-sms-verify-btn {
    display: inline-flex !important;
}

/* Legacy OC23 step2 markup uses `.sl-sms-step-2 > .sl-input-group` instead of `.sl-sms-code-group`. */
.strizh-root .sl-sms-container.sl-sms-otp-split .sl-sms-step-2 > .sl-input-group,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-split .sl-sms-step-2 > .sl-input-group {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    row-gap: 0;
}

.strizh-root .sl-sms-container.sl-sms-otp-split .sl-sms-step-2 > .sl-input-group .sl-input-wrapper,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-split .sl-sms-step-2 > .sl-input-group .sl-input-wrapper {
    width: 100%;
    flex: 1 1 100%;
    min-width: 0;
}

.strizh-root .sl-sms-container.sl-sms-otp-split .sl-sms-step-2 > .sl-input-group .sl-sms-code-input,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-split .sl-sms-step-2 > .sl-input-group .sl-sms-code-input {
    border-radius: var(--strizh-sms-composed-radius, var(--strizh-sms-button-radius, var(--sl-sms-radius, 8px))) !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-split .sl-sms-step-2 > .sl-input-group .sl-sms-verify-btn,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-split .sl-sms-step-2 > .sl-input-group .sl-sms-verify-btn {
    display: none !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-input-wrapper,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-input-wrapper {
    position: relative;
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
    --sl-classic-otp-guide-inset: 28px;
    --sl-classic-otp-guide-gap: 14px;
    --sl-classic-otp-guide-rgb: 148, 163, 184;
    --sl-classic-otp-guide-alpha: 0.34;
    --sl-classic-otp-guide-inset-double: calc(var(--sl-classic-otp-guide-inset) + var(--sl-classic-otp-guide-inset));
    --sl-classic-otp-guide-gap-total: calc(var(--sl-classic-otp-guide-gap) + var(--sl-classic-otp-guide-gap) + var(--sl-classic-otp-guide-gap) + var(--sl-classic-otp-guide-gap));
    --sl-classic-otp-guide-segment: calc((100% - var(--sl-classic-otp-guide-inset-double) - var(--sl-classic-otp-guide-gap-total)) / 5);
    --sl-classic-otp-guide-step: calc(var(--sl-classic-otp-guide-segment) + var(--sl-classic-otp-guide-gap));
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-input-wrapper::after,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-input-wrapper::after {
    content: "";
    position: absolute;
    left: var(--sl-classic-otp-guide-inset);
    right: var(--sl-classic-otp-guide-inset);
    bottom: 10px;
    height: 2px;
    z-index: 2;
    pointer-events: none;
    opacity: 0.96;
    background-image:
        linear-gradient(90deg, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 0%, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 100%),
        linear-gradient(90deg, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 0%, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 100%),
        linear-gradient(90deg, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 0%, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 100%),
        linear-gradient(90deg, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 0%, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 100%),
        linear-gradient(90deg, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 0%, rgba(var(--sl-classic-otp-guide-rgb), var(--sl-classic-otp-guide-alpha)) 100%);
    background-repeat: no-repeat;
    background-size:
        var(--sl-classic-otp-guide-segment) 2px,
        var(--sl-classic-otp-guide-segment) 2px,
        var(--sl-classic-otp-guide-segment) 2px,
        var(--sl-classic-otp-guide-segment) 2px,
        var(--sl-classic-otp-guide-segment) 2px;
    background-position:
        0 0,
        var(--sl-classic-otp-guide-step) 0,
        calc(var(--sl-classic-otp-guide-step) + var(--sl-classic-otp-guide-step)) 0,
        calc(var(--sl-classic-otp-guide-step) + var(--sl-classic-otp-guide-step) + var(--sl-classic-otp-guide-step)) 0,
        calc(var(--sl-classic-otp-guide-step) + var(--sl-classic-otp-guide-step) + var(--sl-classic-otp-guide-step) + var(--sl-classic-otp-guide-step)) 0;
    transition: opacity 0.18s ease, transform 0.18s ease;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input.sl-otp-model-input,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input.sl-otp-model-input {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 6px 12px !important;
    border-width: 1px !important;
    overflow: visible !important;
    clip: auto !important;
    clip-path: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input {
    position: relative;
    z-index: 1;
    padding-bottom: 8px;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input::placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input::placeholder,
.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input::-webkit-input-placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input::-webkit-input-placeholder,
.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input:-ms-input-placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input:-ms-input-placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-input-wrapper:focus-within,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-input-wrapper:focus-within {
    --sl-classic-otp-guide-rgb: var(--strizh-primary-rgb, 14, 165, 233);
    --sl-classic-otp-guide-alpha: 0.46;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group.sl-has-error .sl-input-wrapper,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group.sl-has-error .sl-input-wrapper {
    --sl-classic-otp-guide-rgb: var(--strizh-danger-rgb, 239, 68, 68);
    --sl-classic-otp-guide-alpha: 0.52;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input.sl-input--teleport-success + .sl-sms-verify-btn,
.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input.sl-input--success + .sl-sms-verify-btn,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input.sl-input--teleport-success + .sl-sms-verify-btn,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input.sl-input--success + .sl-sms-verify-btn {
    box-shadow: 0 0 0 3px rgba(var(--strizh-success-rgb, 34, 197, 94), 0.14);
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input.sl-input--teleport-success,
.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input.sl-input--success,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input.sl-input--teleport-success,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-code-input.sl-input--success {
    border-color: var(--strizh-success, #22c55e);
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-verify-btn,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-sms-step-2 > .sl-input-group .sl-sms-verify-btn {
    display: inline-flex !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track::after,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track::after {
    opacity: 0 !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track .sl-sms-code-input,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track .sl-sms-code-input {
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    caret-color: transparent;
    text-shadow: none !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track {
    cursor: text;
    transition: box-shadow 0.18s ease, border-color 0.18s ease, background-color 0.18s ease;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track .strizh-classic-otp-track,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track .strizh-classic-otp-track {
    --sl-classic-otp-char-x-offset: -1.75px;
    position: absolute;
    top: 7px;
    bottom: 7px;
    left: var(--sl-classic-otp-guide-inset, 28px);
    right: calc(var(--sl-classic-otp-guide-inset, 28px) + var(--sl-classic-otp-trailing-space, 0px));
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(var(--sl-classic-otp-length, 5), minmax(0, 1fr));
    gap: var(--sl-classic-otp-guide-gap, 14px);
    align-items: stretch;
    pointer-events: auto;
    cursor: text;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track .strizh-classic-otp-slot,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track .strizh-classic-otp-slot {
    position: relative;
    min-width: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 2px;
    border-bottom: 2px solid rgba(var(--sl-classic-otp-guide-rgb, 148, 163, 184), var(--sl-classic-otp-guide-alpha, 0.34));
    box-shadow: 0 0 0 0 rgba(var(--strizh-primary-rgb, 14, 165, 233), 0);
    transition:
        border-bottom-color 110ms ease-out,
        box-shadow 110ms ease-out,
        transform 0.18s ease,
        opacity 0.18s ease;
    will-change: border-bottom-color, box-shadow, transform, opacity;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track .strizh-classic-otp-char,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track .strizh-classic-otp-char {
    display: block;
    width: 1ch;
    min-width: 1ch;
    text-align: center;
    color: var(--strizh-text, #0f172a);
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    font-size: 30px;
    line-height: 1;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    opacity: 0;
    transform: translate3d(var(--sl-classic-otp-char-x-offset, -1.75px), 4px, 0) scale(0.96);
    transition: opacity 0.16s ease, transform 0.16s ease, color 0.16s ease;
    will-change: opacity, transform, color;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track .strizh-classic-otp-slot.is-filled .strizh-classic-otp-char,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track .strizh-classic-otp-slot.is-filled .strizh-classic-otp-char {
    opacity: 1;
    transform: translate3d(var(--sl-classic-otp-char-x-offset, -1.75px), 2px, 0) scale(1);
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track .strizh-classic-otp-slot.is-caret-visible::after,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track .strizh-classic-otp-slot.is-caret-visible::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 2px;
    height: 26px;
    border-radius: 999px;
    background: rgba(var(--strizh-primary-rgb, 14, 165, 233), 0.92);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
    opacity: 1;
    transform: translateX(calc(-50% + var(--sl-classic-otp-char-x-offset, -1.75px)));
    animation: strizhClassicCaretBlink 1.05s steps(1, end) infinite;
    pointer-events: none;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-focused,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-focused {
    box-shadow: 0 0 0 3px rgba(var(--strizh-primary-rgb, 14, 165, 233), 0.12);
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-focused .strizh-classic-otp-slot.is-active,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-focused .strizh-classic-otp-slot.is-active {
    border-bottom-color: rgba(var(--strizh-primary-rgb, 14, 165, 233), 0.78);
    transform: translateY(-1px);
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-focused .strizh-classic-otp-slot.is-active .strizh-classic-otp-char,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-focused .strizh-classic-otp-slot.is-active .strizh-classic-otp-char {
    color: var(--strizh-primary, #0ea5e9);
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-error .strizh-classic-otp-slot,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-error .strizh-classic-otp-slot {
    border-bottom-color: rgba(var(--strizh-danger-rgb, 239, 68, 68), 0.42);
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-error,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-error {
    box-shadow: 0 0 0 3px rgba(var(--strizh-danger-rgb, 239, 68, 68), 0.10);
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-error .strizh-classic-otp-slot.is-filled,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-error .strizh-classic-otp-slot.is-filled {
    border-bottom-color: rgba(var(--strizh-danger-rgb, 239, 68, 68), 0.74);
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-error .strizh-classic-otp-char,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-error .strizh-classic-otp-char {
    color: var(--strizh-danger, #ef4444);
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success .strizh-classic-otp-slot,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success .strizh-classic-otp-slot {
    border-bottom-color: rgba(var(--strizh-success-rgb, 34, 197, 94), 0.52);
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success {
    box-shadow: 0 0 0 3px rgba(var(--strizh-success-rgb, 34, 197, 94), 0.10);
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success .strizh-classic-otp-char,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success .strizh-classic-otp-char {
    color: var(--strizh-success, #22c55e);
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-disabled .strizh-classic-otp-track,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-disabled .strizh-classic-otp-track {
    opacity: 0.56;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track .strizh-classic-otp-slot.is-just-filled,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track .strizh-classic-otp-slot.is-just-filled {
    animation: strizhClassicSlotPulse 180ms ease-out;
}

.strizh-root .sl-sms-container.sl-sms-classic-guide-enabled .sl-input-wrapper.has-classic-otp-track:not(.is-classic-otp-focused):not(.is-classic-otp-error):not(.is-classic-otp-success):not(.is-classic-otp-disabled) .strizh-classic-otp-slot:hover,
.strizh-overlay-root .sl-sms-container.sl-sms-classic-guide-enabled .sl-input-wrapper.has-classic-otp-track:not(.is-classic-otp-focused):not(.is-classic-otp-error):not(.is-classic-otp-success):not(.is-classic-otp-disabled) .strizh-classic-otp-slot:hover {
    border-bottom-color: rgba(var(--strizh-primary-rgb, 14, 165, 233), 0.68);
    box-shadow: 0 8px 16px -14px rgba(var(--strizh-primary-rgb, 14, 165, 233), 0.24);
    transition:
        border-bottom-color 50ms ease-in,
        box-shadow 50ms ease-in,
        transform 0.18s ease,
        opacity 0.18s ease;
}

.strizh-root .sl-sms-container.sl-sms-classic-guide-enabled .sl-input-wrapper.has-classic-otp-track.is-classic-guide-ripple .strizh-classic-otp-slot.is-active,
.strizh-overlay-root .sl-sms-container.sl-sms-classic-guide-enabled .sl-input-wrapper.has-classic-otp-track.is-classic-guide-ripple .strizh-classic-otp-slot.is-active {
    animation: strizhClassicGuideRipple 160ms ease-out;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success-wave .strizh-classic-otp-slot,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success-wave .strizh-classic-otp-slot {
    animation: strizhClassicSuccessWave 220ms ease-out forwards;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success-wave .strizh-classic-otp-slot:nth-child(2),
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success-wave .strizh-classic-otp-slot:nth-child(2) {
    animation-delay: 25ms;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success-wave .strizh-classic-otp-slot:nth-child(3),
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success-wave .strizh-classic-otp-slot:nth-child(3) {
    animation-delay: 50ms;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success-wave .strizh-classic-otp-slot:nth-child(4),
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success-wave .strizh-classic-otp-slot:nth-child(4) {
    animation-delay: 75ms;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success-wave .strizh-classic-otp-slot:nth-child(5),
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success-wave .strizh-classic-otp-slot:nth-child(5) {
    animation-delay: 100ms;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success-wave .strizh-classic-otp-slot:nth-child(6),
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success-wave .strizh-classic-otp-slot:nth-child(6) {
    animation-delay: 125ms;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success-wave .strizh-classic-otp-char,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper.has-classic-otp-track.is-classic-otp-success-wave .strizh-classic-otp-char {
    color: var(--strizh-success, #22c55e) !important;
}

@keyframes strizhClassicSlotPulse {
    0% {
        border-bottom-color: rgba(var(--sl-classic-otp-guide-rgb, 148, 163, 184), 0.38);
        box-shadow: 0 0 0 0 rgba(var(--strizh-primary-rgb, 14, 165, 233), 0);
        transform: translateY(0);
    }
    45% {
        border-bottom-color: rgba(var(--strizh-primary-rgb, 14, 165, 233), 0.88);
        box-shadow: 0 8px 18px -14px rgba(var(--strizh-primary-rgb, 14, 165, 233), 0.55);
        transform: translateY(-1px);
    }
    100% {
        border-bottom-color: rgba(var(--strizh-primary-rgb, 14, 165, 233), 0.52);
        box-shadow: 0 0 0 0 rgba(var(--strizh-primary-rgb, 14, 165, 233), 0);
        transform: translateY(0);
    }
}

@keyframes strizhClassicCaretBlink {
    0%,
    46% {
        opacity: 1;
    }
    47%,
    100% {
        opacity: 0;
    }
}

@keyframes strizhClassicSuccessWave {
    0% {
        border-bottom-color: rgba(var(--strizh-success-rgb, 34, 197, 94), 0.42);
        box-shadow: 0 0 0 0 rgba(var(--strizh-success-rgb, 34, 197, 94), 0);
        transform: translateY(0);
    }
    50% {
        border-bottom-color: rgba(var(--strizh-success-rgb, 34, 197, 94), 0.92);
        box-shadow: 0 10px 22px -16px rgba(var(--strizh-success-rgb, 34, 197, 94), 0.5);
        transform: translateY(-1px);
    }
    100% {
        border-bottom-color: rgba(var(--strizh-success-rgb, 34, 197, 94), 0.56);
        box-shadow: 0 0 0 0 rgba(var(--strizh-success-rgb, 34, 197, 94), 0);
        transform: translateY(0);
    }
}

@keyframes strizhClassicGuideRipple {
    0% {
        border-bottom-color: rgba(var(--strizh-primary-rgb, 14, 165, 233), 0.42);
        box-shadow: 0 0 0 0 rgba(var(--strizh-primary-rgb, 14, 165, 233), 0);
    }
    50% {
        border-bottom-color: rgba(var(--strizh-primary-rgb, 14, 165, 233), 0.92);
        box-shadow: 0 10px 18px -14px rgba(var(--strizh-primary-rgb, 14, 165, 233), 0.34);
    }
    100% {
        border-bottom-color: rgba(var(--strizh-primary-rgb, 14, 165, 233), 0.78);
        box-shadow: 0 0 0 0 rgba(var(--strizh-primary-rgb, 14, 165, 233), 0);
    }
}

.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-code-group .sl-input-wrapper::after,
.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-step-2 > .sl-input-group .sl-input-wrapper::after,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-code-group .sl-input-wrapper::after,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-step-2 > .sl-input-group .sl-input-wrapper::after {
    display: none !important;
    opacity: 0 !important;
    background: none !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-input-wrapper.has-classic-otp-track .strizh-classic-otp-track,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-input-wrapper.has-classic-otp-track .strizh-classic-otp-track {
    display: none !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-input-wrapper.has-classic-otp-track,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-input-wrapper.has-classic-otp-track {
    cursor: auto;
    box-shadow: none !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-input-wrapper.has-classic-otp-track .sl-sms-code-input,
.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-code-group .sl-sms-code-input,
.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-step-2 > .sl-input-group .sl-sms-code-input,
.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper:not(.has-classic-otp-track) .sl-sms-code-input,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-input-wrapper.has-classic-otp-track .sl-sms-code-input,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-code-group .sl-sms-code-input,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-step-2 > .sl-input-group .sl-sms-code-input,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper:not(.has-classic-otp-track) .sl-sms-code-input {
    color: var(--strizh-text, #0f172a) !important;
    -webkit-text-fill-color: currentColor !important;
    caret-color: var(--strizh-primary, #0ea5e9) !important;
    text-shadow: none !important;
    padding-bottom: 0 !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    text-align: left !important;
    font-variant-numeric: normal !important;
    font-family: inherit !important;
    line-height: 1.25 !important;
    text-indent: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-code-group .sl-sms-code-input::placeholder,
.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-step-2 > .sl-input-group .sl-sms-code-input::placeholder,
.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-input-wrapper.has-classic-otp-track .sl-sms-code-input::placeholder,
.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper:not(.has-classic-otp-track) .sl-sms-code-input::placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-code-group .sl-sms-code-input::placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-step-2 > .sl-input-group .sl-sms-code-input::placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-input-wrapper.has-classic-otp-track .sl-sms-code-input::placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper:not(.has-classic-otp-track) .sl-sms-code-input::placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-variant-numeric: normal !important;
    text-align: left !important;
    text-transform: none !important;
    -webkit-text-fill-color: #94a3b8 !important;
    font-family: inherit !important;
    line-height: 1.25 !important;
    text-indent: 0 !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-code-group .sl-sms-code-input::-webkit-input-placeholder,
.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-step-2 > .sl-input-group .sl-sms-code-input::-webkit-input-placeholder,
.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-input-wrapper.has-classic-otp-track .sl-sms-code-input::-webkit-input-placeholder,
.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper:not(.has-classic-otp-track) .sl-sms-code-input::-webkit-input-placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-code-group .sl-sms-code-input::-webkit-input-placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-step-2 > .sl-input-group .sl-sms-code-input::-webkit-input-placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-input-wrapper.has-classic-otp-track .sl-sms-code-input::-webkit-input-placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper:not(.has-classic-otp-track) .sl-sms-code-input::-webkit-input-placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-variant-numeric: normal !important;
    text-align: left !important;
    text-transform: none !important;
    -webkit-text-fill-color: #94a3b8 !important;
    font-family: inherit !important;
    line-height: 1.25 !important;
    text-indent: 0 !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-code-group .sl-sms-code-input:-ms-input-placeholder,
.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-step-2 > .sl-input-group .sl-sms-code-input:-ms-input-placeholder,
.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-input-wrapper.has-classic-otp-track .sl-sms-code-input:-ms-input-placeholder,
.strizh-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper:not(.has-classic-otp-track) .sl-sms-code-input:-ms-input-placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-code-group .sl-sms-code-input:-ms-input-placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-sms-step-2 > .sl-input-group .sl-sms-code-input:-ms-input-placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-classic-guide-disabled .sl-input-wrapper.has-classic-otp-track .sl-sms-code-input:-ms-input-placeholder,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic .sl-input-wrapper:not(.has-classic-otp-track) .sl-sms-code-input:-ms-input-placeholder {
    color: #94a3b8 !important;
    opacity: 1 !important;
    letter-spacing: 0 !important;
    word-spacing: 0 !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    font-variant-numeric: normal !important;
    text-align: left !important;
    text-transform: none !important;
    -webkit-text-fill-color: #94a3b8 !important;
    font-family: inherit !important;
    line-height: 1.25 !important;
    text-indent: 0 !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-change-number-below .sl-change-number-link,
.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-change-number-below .sl-change-number-link:hover,
.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-change-number-below .sl-change-number-link:focus,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-change-number-below .sl-change-number-link,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-change-number-below .sl-change-number-link:hover,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-change-number-below .sl-change-number-link:focus {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-change-number-below .sl-sms-step-2-actions,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-change-number-below .sl-sms-step-2-actions {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-change-number-below .sl-sms-change-number-btn,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-change-number-below .sl-sms-change-number-btn {
    display: inline-flex;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic[data-verify-button-enabled="0"] .sl-sms-code-group .sl-sms-verify-btn,
.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-verify-btn-hidden .sl-sms-code-group .sl-sms-verify-btn,
.strizh-root .sl-sms-container.sl-sms-otp-classic[data-verify-button-enabled="0"] .sl-sms-step-2 > .sl-input-group .sl-sms-verify-btn,
.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-verify-btn-hidden .sl-sms-step-2 > .sl-input-group .sl-sms-verify-btn,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic[data-verify-button-enabled="0"] .sl-sms-code-group .sl-sms-verify-btn,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-verify-btn-hidden .sl-sms-code-group .sl-sms-verify-btn,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic[data-verify-button-enabled="0"] .sl-sms-step-2 > .sl-input-group .sl-sms-verify-btn,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-verify-btn-hidden .sl-sms-step-2 > .sl-input-group .sl-sms-verify-btn {
    display: none !important;
}

.strizh-root .sl-sms-container.sl-sms-otp-classic[data-verify-button-enabled="0"] .sl-sms-step-2 > .sl-input-group .sl-input-wrapper,
.strizh-root .sl-sms-container.sl-sms-otp-classic.sl-sms-verify-btn-hidden .sl-sms-step-2 > .sl-input-group .sl-input-wrapper,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic[data-verify-button-enabled="0"] .sl-sms-step-2 > .sl-input-group .sl-input-wrapper,
.strizh-overlay-root .sl-sms-container.sl-sms-otp-classic.sl-sms-verify-btn-hidden .sl-sms-step-2 > .sl-input-group .sl-input-wrapper {
    width: 100%;
    flex: 1 1 100%;
}

.strizh-root .sl-sms-container.sl-sms-change-number-card .sl-sms-change-number-btn,
.strizh-root .sl-sms-container.sl-sms-change-number-card .sl-change-number-link:not(.sl-change-number-link--card),
.strizh-overlay-root .sl-sms-container.sl-sms-change-number-card .sl-sms-change-number-btn,
.strizh-overlay-root .sl-sms-container.sl-sms-change-number-card .sl-change-number-link:not(.sl-change-number-link--card) {
    display: none !important;
}

.strizh-root .sl-change-number-link--card,
.strizh-overlay-root .sl-change-number-link--card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    margin-top: 2px;
    padding: 0;
    border: 0;
    background: none;
    color: rgba(var(--sl-channel-note-rgb, 14, 165, 233), 0.88);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
    cursor: pointer;
}

.strizh-root .sl-sms-container.sl-sms-layout-guided .sl-change-number-link.sl-change-number-link--card,
.strizh-overlay-root .sl-sms-container.sl-sms-layout-guided .sl-change-number-link.sl-change-number-link--card {
    display: inline-flex !important;
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
}

.strizh-root .sl-change-number-link--card:hover,
.strizh-root .sl-change-number-link--card:focus,
.strizh-overlay-root .sl-change-number-link--card:hover,
.strizh-overlay-root .sl-change-number-link--card:focus {
    color: var(--sl-channel-note-color, var(--strizh-primary, #0ea5e9));
    text-decoration: underline;
}

.strizh-root .sl-change-number-link__icon,
.strizh-overlay-root .sl-change-number-link__icon {
    font-size: 11px;
    opacity: 0.84;
}

.strizh-root .strizh-zen-target,
.strizh-overlay-root .strizh-zen-target {
    transition: opacity 0.4s ease, height 0.4s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease, transform 0.4s ease;
    transform-origin: top center;
}

.strizh-zen-active .strizh-zen-target,
.strizh-root.strizh-zen-active .strizh-zen-target,
.strizh-overlay-root.strizh-zen-active .strizh-zen-target,
.sl-sms-container.strizh-zen-active ~ .strizh-zen-target {
    opacity: 0;
    height: 0;
    max-height: 0;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(-6px);
}

.strizh-root .sl-sms-container.strizh-zen-active,
.strizh-overlay-root .sl-sms-container.strizh-zen-active {
    position: relative;
    z-index: 2;
}

.strizh-root .sl-sms-fallback,
.strizh-overlay-root .sl-sms-fallback {
    color: var(--strizh-text-primary, #0f172a);
}

.strizh-root .sl-sms-fallback.is-active,
.strizh-overlay-root .sl-sms-fallback.is-active {
    margin-top: 16px;
    padding-top: 0;
}

.strizh-root .sl-sms-fallback__compact,
.strizh-overlay-root .sl-sms-fallback__compact {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.strizh-root .sl-sms-fallback.strizh-style-card .sl-sms-fallback__compact,
.strizh-overlay-root .sl-sms-fallback.strizh-style-card .sl-sms-fallback__compact,
.strizh-root .strizh-fallback-wrapper.strizh-style-card,
.strizh-overlay-root .strizh-fallback-wrapper.strizh-style-card {
    padding: 12px 16px;
    border: 1px solid rgba(148, 163, 184, 0.16);
    border-radius: calc(var(--strizh-input-radius, 12px) + 1px);
    background: var(--strizh-surface-muted, #f8fafc);
    box-shadow: 0 14px 28px -26px rgba(15, 23, 42, 0.2);
}

.strizh-root .sl-sms-fallback.strizh-style-link .sl-sms-fallback__compact,
.strizh-overlay-root .sl-sms-fallback.strizh-style-link .sl-sms-fallback__compact,
.strizh-root .strizh-fallback-wrapper.strizh-style-link,
.strizh-overlay-root .strizh-fallback-wrapper.strizh-style-link {
    justify-content: center;
    gap: 6px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.strizh-root .sl-sms-fallback.strizh-style-link .sl-sms-fallback__content,
.strizh-overlay-root .sl-sms-fallback.strizh-style-link .sl-sms-fallback__content,
.strizh-root .strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__content,
.strizh-overlay-root .strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__content {
    flex: 0 1 auto;
    gap: 6px;
}

.strizh-root .sl-sms-fallback__content,
.strizh-overlay-root .sl-sms-fallback__content {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 1 1 auto;
}

.strizh-root .sl-sms-fallback__icon,
.strizh-overlay-root .sl-sms-fallback__icon {
    width: 18px;
    height: 18px;
    color: var(--strizh-text-muted, #64748b);
}

.strizh-root .sl-sms-fallback__text,
.strizh-overlay-root .sl-sms-fallback__text {
    color: var(--strizh-text-muted, #64748b);
    font-size: 14px;
    font-weight: 400;
}

.strizh-root .sl-sms-fallback.strizh-style-link .sl-sms-fallback__icon,
.strizh-overlay-root .sl-sms-fallback.strizh-style-link .sl-sms-fallback__icon,
.strizh-root .strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__icon,
.strizh-overlay-root .strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__icon,
.strizh-root .sl-sms-fallback.strizh-style-link .strizh-fallback-icon,
.strizh-overlay-root .sl-sms-fallback.strizh-style-link .strizh-fallback-icon,
.strizh-root .strizh-fallback-wrapper.strizh-style-link .strizh-fallback-icon,
.strizh-overlay-root .strizh-fallback-wrapper.strizh-style-link .strizh-fallback-icon {
    display: none;
}

.strizh-root .sl-sms-fallback__timer,
.strizh-overlay-root .sl-sms-fallback__timer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 46px;
    padding: 4px 8px;
    border-radius: 999px;
    background: rgba(148, 163, 184, 0.12);
    color: var(--strizh-text-muted, #64748b);
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
}

.strizh-root .sl-sms-fallback__action,
.strizh-overlay-root .sl-sms-fallback__action {
    min-height: 32px;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--strizh-primary, #0ea5e9);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
}

.strizh-root .sl-sms-fallback__action:hover,
.strizh-root .sl-sms-fallback__action:focus,
.strizh-overlay-root .sl-sms-fallback__action:hover,
.strizh-overlay-root .sl-sms-fallback__action:focus {
    background: rgba(var(--strizh-primary-rgb, 14, 165, 233), 0.1);
    color: var(--strizh-primary, #0ea5e9);
    text-decoration: none;
    box-shadow: none;
}

.strizh-root .sl-sms-fallback.strizh-style-link .sl-sms-fallback__action,
.strizh-overlay-root .sl-sms-fallback.strizh-style-link .sl-sms-fallback__action,
.strizh-root .strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__action,
.strizh-overlay-root .strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__action {
    min-height: 0;
    padding: 0;
    border: none;
    background: transparent;
    font-weight: 500;
}

.strizh-root .sl-sms-fallback.strizh-style-link .sl-sms-fallback__action:hover,
.strizh-root .sl-sms-fallback.strizh-style-link .sl-sms-fallback__action:focus,
.strizh-overlay-root .sl-sms-fallback.strizh-style-link .sl-sms-fallback__action:hover,
.strizh-overlay-root .sl-sms-fallback.strizh-style-link .sl-sms-fallback__action:focus,
.strizh-root .strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__action:hover,
.strizh-root .strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__action:focus,
.strizh-overlay-root .strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__action:hover,
.strizh-overlay-root .strizh-fallback-wrapper.strizh-style-link .sl-sms-fallback__action:focus {
    background: transparent;
    text-decoration: underline;
}

.strizh-root .sl-sms-fallback__action.is-disabled,
.strizh-root .sl-sms-fallback__action:disabled,
.strizh-overlay-root .sl-sms-fallback__action.is-disabled,
.strizh-overlay-root .sl-sms-fallback__action:disabled {
    background: transparent;
    color: var(--strizh-text-muted, #94a3b8);
    opacity: 1;
}

.strizh-root .sl-sms-fallback.is-ready .sl-sms-fallback__action:not(:disabled),
.strizh-root .sl-sms-fallback.is-ready .sl-sms-fallback__action:not(.is-disabled),
.strizh-overlay-root .sl-sms-fallback.is-ready .sl-sms-fallback__action:not(:disabled),
.strizh-overlay-root .sl-sms-fallback.is-ready .sl-sms-fallback__action:not(.is-disabled) {
    color: var(--strizh-primary, #0ea5e9);
}

.strizh-root .sl-sms-fallback.is-ready .sl-sms-fallback__action.is-unlock-bloom,
.strizh-overlay-root .sl-sms-fallback.is-ready .sl-sms-fallback__action.is-unlock-bloom,
.strizh-root .strizh-fallback-wrapper .sl-sms-fallback__action.is-unlock-bloom,
.strizh-overlay-root .strizh-fallback-wrapper .sl-sms-fallback__action.is-unlock-bloom {
    animation: slFallbackUnlockBloom 220ms ease-out;
}

.strizh-root .sl-sms-fallback.is-waiting .sl-sms-fallback__timer,
.strizh-overlay-root .sl-sms-fallback.is-waiting .sl-sms-fallback__timer {
    background: rgba(148, 163, 184, 0.14);
}

@media (max-width: 575px) {
    .strizh-root .strizh-otp-input,
    .strizh-overlay-root .strizh-otp-input {
        font-size: 20px;
        letter-spacing: 3px;
    }

    .strizh-root .strizh-split-otp-container,
    .strizh-overlay-root .strizh-split-otp-container {
        --sl-split-otp-gap: 8px;
        gap: var(--sl-split-otp-gap);
    }

    .strizh-root .strizh-digit-box,
    .strizh-overlay-root .strizh-digit-box {
        height: 50px;
        font-size: 20px;
    }
}