.form__group--error.form__pincode input {
  background-color: #e74c3c;
}

.form__group--error.form__pincode input[disabled] {
  background-color: #e74c3c;
  color: #fff;
  opacity: 1;
}

.form__group--success.form__pincode input {
  background-color: #2ecc71;
}

.form__group--success.form__pincode input[disabled] {
  background-color: #2ecc71;
  color: #fff;
  opacity: 1;
}

.form__group--error.form__pincode input {
  background-color: #e74c3c;
}

.form__group--error.form__pincode input[disabled] {
  background-color: #e74c3c;
  color: #fff;
  opacity: 1;
}

.form__group--success.form__pincode input {
  background-color: #2ecc71;
}

.form__group--success.form__pincode input[disabled] {
  background-color: #2ecc71;
  color: #fff;
  opacity: 1;
}


/* General styles for input fields */

.form__pincode input {
  font-family: Arial, sans-serif;
  font-size: 22px;
  font-weight: 900;
  color: #333;
  background-color: #f9f9f9;
  border: 2px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  margin: 5px 0;
  width: 100%;
  box-sizing: border-box;
}

.form__pincode input:focus {
  border-color: #66afe9;
  outline: none;
  box-shadow: 0 0 8px rgba(102, 175, 233, 0.6);
}


/* Additional style */


/* Container styling */

#otpForm .form__group {
  display: flex;
  justify-content: center;
  align-items: center;
}


/* Remove unnecessary padding from input fields */

#otpForm .col-2 {
  padding: 0 4px;
}


/* Input fields styling */

#otpForm .form__group input[type="text"] {
  font-size: 2rem;
  /* Larger font size for better visibility */
  border-radius: 8px;
  /* Smooth edges */
  width: 100%;
  /* Make input field responsive */
  padding: 10px;
  /* Adequate padding for touch devices */
  text-align: center;
  /* Center the input value */
  transition: all 0.3s ease;
  /* Smooth transition for hover/focus states */
  font-weight: 700;
  /* Bold font for better readability */
  line-height: 130%;
  /* Improved line height */
  color: var(--heading-color);
  /* Text color from custom variable */
  background-color: var(--bg-color);
  /* Background color from custom variable */
}


/* Responsive adjustments for tablets */

@media (max-width: 768px) {
  #otpForm .form__group input[type="text"] {
    font-size: 1.5rem;
    /* Adjust font size for smaller screens */
    max-width: 40px;
    /* Adjust width for smaller screens */
    padding: 8px;
    /* Adjust padding */
  }
}


/* Responsive adjustments for mobile devices */

@media (max-width: 480px) {
  #otpForm .form__group input[type="text"] {
    font-size: 1.2rem;
    /* Further reduce font size for mobile devices */
    max-width: 35px;
    /* Adjust width for mobile devices */
    padding: 6px;
    /* Adjust padding */
  }
}