
.alerts-container {
    padding: 16px 16px 0;
    max-width: 800px;
    margin: 0 auto;

    .alert-item {
        margin-bottom: 8px;
        transform: translateY(0);
        opacity: 1;
        transition: all 0.3s ease-in-out;
        animation: slideDown 0.3s ease-out;

        &:last-child {
            margin-bottom: 16px;
        }
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.auth-section {
    padding: 16px;

    h4 {
        margin-bottom: 16px;
        font-weight: 500;
        font-size: 1.5rem;
    }
}

.otp-actions {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.field-button {
    height: 48px;
    font-size: 1.1rem;
    font-weight: 500;
    padding: 0 24px;
}

.grow {
    flex-grow: 1;
}

.otp-request-btn {
    min-width: 160px;
}

.reset-btn {
    min-width: 140px;
}

.selected-words {
    background: #f0f2f5;
    padding: 16px;
    border-radius: 4px;
    margin-bottom: 20px;

    h5 {
        font-size: 1.1rem;
        font-weight: 500;
        margin-bottom: 8px;
        color: #1f1f1f;
    }

    .selected-word-list {
        font-size: 1.2rem;
        font-weight: 500;
        color: #1890ff;
        word-break: break-word;
        line-height: 1.4;
    }
}

.otp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.otp-card {
    background-color: white;
    border: 2px solid #d9d9d9;
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;

    &:hover:not(.disabled) {
        border-color: #40a9ff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

    &.selected {
        background-color: #096dd9;
        border-color: #096dd9;
        color: white;
        font-weight: 500;
    }

    &.disabled {
        background-color: #f5f5f5;
        color: rgba(0, 0, 0, 0.25);
        cursor: not-allowed;
        border-color: #d9d9d9;
    }
}

.otp-word {
    font-size: 1.2rem;
    line-height: 1.4;
    display: block;
    word-break: break-word;
}

h4 {
    margin-bottom: 16px;
    margin-left: 4px;
}

.text-password-login-container {
    display: flex;
    flex-direction: column;
    width: 250px;
    align-items: center;
    margin: 0 auto;
}

.login-actions {
    display: flex;
    justify-content: center;
    width: 100%;
}

.text-password-input {
    width: 100%;
}

.next-button {
    width: 100%;

    [nz-icon] {
        margin-left: 8px;
    }
}

:host ::ng-deep {
    .ant-alert {
        border-radius: 4px;

        &.ant-alert-error {
            border: 1px solid #ff4d4f;
            background-color: #fff1f0;
        }

        &.ant-alert-warning {
            border: 1px solid #faad14;
            background-color: #fffbe6;
        }

        .ant-alert-message {
            color: rgba(0, 0, 0, 0.85);
            font-size: 14px;
            line-height: 1.5715;
        }

        .ant-alert-icon {
            font-size: 16px;
            top: 12px;
            left: 16px;
        }
    }
}