 +    marginLeft: 5,
    },
    input: {
-     height: 40,
-@@ -83,7 +87,7 @@ export default class LiteCreditCardInput extends Component {
+-    height: 40,
++    height: 50,
+     color: "black",
++    fontSize: 16,
++    fontFamily: "Unica77LL-Regular"
+   },
+ });
+ 
+@@ -83,13 +89,13 @@ export default class LiteCreditCardInput extends Component {
  
    static defaultProps = {
      placeholders: {

+    const { focused, isInputFocused, valid, values: { number }, inputStyle, status: { number: numberStatus } } = this.props;
     const showRightPart = focused && focused !== "number";
 
+    const borderColor = "#E7E7E7" // black10
+    const borderColorFocused = "#1023D7" // blue100
+    const borderColorError = "#C82400" // red100
+
+    const showWarningState = !isInputFocused && !valid && number?.length

         <View style={[
           s.leftPart,
           showRightPart ? s.hidden : s.expanded,
@@ -152,16 +171,23 @@ export default class LiteCreditCardInput extends Component {
             keyboardType="numeric"
             containerStyle={s.numberInput} />
         </View>
