Refactor code structure for improved readability and maintainability

src/app/auth/otp/otp.component.scss

@@ -1,47 +1,139 @@
-.otp-container {
-    max-width: 400px;
-    margin: 60px auto;
-    padding: 30px;
-    background: #fff;
-    border-radius: 16px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+/* Background wrapper */
+.verify-wrapper {
+    width: 100%;
+    height: 100vh;
+    background: #0e0e0e;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 20px;
+}
+
+/* Card */
+.verify-card {
+    width: 420px;
+
+    /* NEW: More contrast from background */
+    background: var(--bg-gradient-onyx);
+
+    border-radius: 18px;
+    padding: 35px 40px;
+
+    /* NEW: Clean gold glow */
+    box-shadow:
+        0 0 12px rgba(227, 179, 65, 0.25),
+        0 10px 35px rgba(0, 0, 0, 0.65);
+
+    /* NEW: Gold border highlight */
+    border: 1px solid rgba(227, 179, 65, 0.15);
+
+    /* Slight glass effect */
+    backdrop-filter: blur(6px);
+}
+
+
+/* Title */
+.title {
+    text-align: center;
+    color: #fff;
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 30px;
+}
+
+/* Labels */
+label {
+    color: #d6d6d6;
+    font-size: 14px;
+    margin-bottom: 6px;
+    display: block;
+}
+
+/* Inputs */
+input {
+    width: 100%;
+    padding: 14px;
+    background: #111;
+    border: 1px solid #333;
+    color: #fff;
+    border-radius: 10px;
+    font-size: 15px;
+    margin-bottom: 18px;
+    outline: none;
+    transition: 0.25s;
+
+    &:focus {
+        border-color: #e3b341;
+        box-shadow: 0 0 5px rgba(227, 179, 65, 0.45);
+    }
+
+    &::placeholder {
+        color: #777;
+    }
+}
+
+/* Primary buttons */
+button {
+    width: 100%;
+    padding: 14px;
+    background: #e3b341;
+    border: none;
+    color: #111;
+    font-size: 16px;
+    border-radius: 10px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: 0.25s;
     text-align: center;
 
-    h2 {
-        margin-bottom: 20px;
+    &:disabled {
+        background: #555;
+        color: #aaa;
+        cursor: not-allowed;
     }
 
-    input {
-        width: 100%;
-        padding: 10px;
-        margin: 10px 0;
-        font-size: 16px;
+    &:not(:disabled):hover {
+        background: #f2c85c;
+    }
+}
+
+/* Resend OTP button */
+.resend-btn {
+    margin-top: 12px;
+    background: transparent !important;
+    color: #e3b341 !important;
+    border: 1px solid #e3b341;
+    font-size: 14px;
+
+    &:hover:not(:disabled) {
+        background: rgba(227, 179, 65, 0.1);
     }
 
-    button {
-        width: 100%;
-        margin-top: 10px;
-        padding: 10px;
-        background-color: #007bff;
-        border: none;
-        color: white;
-        font-size: 16px;
-        border-radius: 8px;
-        cursor: pointer;
-
-        &:disabled {
-            background: #aaa;
-            cursor: not-allowed;
-        }
+    &:disabled {
+        border-color: #555;
+        color: #777;
     }
+}
 
-    .success {
-        color: green;
-        font-weight: 600;
-    }
+/* Success message */
+.success-msg {
+    margin-top: 10px;
+    font-size: 16px;
+    color: #78ff8c;
+    text-align: center;
+    font-weight: 500;
+}
 
-    .message {
-        margin-top: 15px;
-        color: #555;
-    }
+/* Error / general message */
+.error-message {
+    margin-top: 12px;
+    color: #ff6b6b;
+    text-align: center;
+    font-size: 14px;
+}
+
+.info-text {
+    color: #ccc;
+    font-size: 14px;
+    margin-bottom: 10px;
 }