/* Container */
.onix-auth-container {
   max-width: 400px;
   margin: 20px auto;
   padding: 20px;
   border: 1px solid #ddd;
   border-radius: 8px;
   background: #fff;
}

/* Progress Bar */
.onix-progress {
   background: #eee;
   border-radius: 6px;
   height: 10px;
   width: 100%;
   overflow: hidden;
}

.onix-progress-bar {
   height: 10px;
   background: #4caf50;
   width: 0%;
   transition: width 0.4s ease;
   border-radius: 6px;
}

/* Headings */
.onix-auth-container h3 {
   margin-bottom: 15px;
   color: #333;
}

/* Input fields */
.onix-auth-container input[type="text"],
.onix-auth-container input[type="password"] {
   width: 100%;
   padding: 10px;
   margin-bottom: 8px;
   border: 1px solid #ccc;
   border-radius: 6px;
   box-sizing: border-box;
   font-size: 14px;
}

/* Buttons */
.onix-auth-container button {
   padding: 10px 15px;
   background: #4caf50;
   border: none;
   color: #fff;
   border-radius: 6px;
   cursor: pointer;
   font-size: 14px;
   transition: background 0.3s ease;
}

.onix-auth-container button:hover {
   background: #45a049;
}

/* Messages */
.onix-msg {
   margin-top: 5px;
   font-size: 13px;
}

/* Error messages */
.onix-msg.error {
   color: red;
}

/* Success messages */
.onix-msg.success {
   color: green;
}

/* Hide steps initially */
#onix-step2-login,
#onix-step2-register,
#onix-step3-register {
   display: none;
}

/* Labels for Step 3 */
#onix-step3-register label {
   display: block;
   font-weight: bold;
   margin-top: 10px;
   margin-bottom: 3px;
   font-size: 13px;
}

/* Responsive */
@media (max-width: 480px) {
   .onix-auth-container {
      padding: 15px;
   }
   .onix-auth-container button {
      width: 100%;
   }
}