Refactor code structure for improved readability and maintainability

src/app/auth/otp/otp.component.html

@@ -1,40 +1,51 @@
-<div class="otp-container">
-    <h2>🔐 Email Verification</h2>
+<div class="verify-wrapper">
+    <div class="verify-card">
 
-    <!-- Step 1: Enter Email -->
-    @if (!isOtpSent()) {
-        <form [formGroup]="emailForm" (ngSubmit)="sendOtp()">
+        <h2 class="title">🔐 OTP Verification</h2>
+
+        <!-- Step 1: Enter Email -->
+        @if (!isOtpSent()) {
+        <form [formGroup]="emailForm" (ngSubmit)="sendOtp()" class="form-section">
             <label>Email Address</label>
             <input type="email" formControlName="email" placeholder="Enter your email" />
             <button type="submit" [disabled]="emailForm.invalid">Send OTP</button>
         </form>
-    }
+        }
 
-    <!-- Step 2: Enter OTP -->
-    @if (isOtpSent() && !isVerified()) {
-        <div>
-            <p>OTP sent to <b>{{ emailForm.value.email }}</b></p>
+        <!-- Step 2: OTP Input -->
+        @if (isOtpSent() && !isVerified()) {
+        <div class="otp-section">
+            <p class="info-text">
+                OTP sent to <b>{{ emailForm.value.email }}</b>
+            </p>
 
             <form [formGroup]="otpForm" (ngSubmit)="verifyOtp()">
                 <label>Enter 6-digit OTP</label>
                 <input type="text" maxlength="6" formControlName="otp" placeholder="123456" />
-                <button type="submit" [disabled]="otpForm.invalid">Verify OTP</button>
+                <button type="submit" [disabled]="otpForm.invalid">
+                    Verify OTP
+                </button>
             </form>
 
-            <button (click)="resendOtp()" [disabled]="countdown() > 0">
-                Resend OTP @if (countdown() > 0) {
-                    <span>({{ countdown() }}s)</span>
+            <button class="resend-btn" (click)="resendOtp()" [disabled]="countdown() > 0">
+                Resend OTP
+                @if (countdown() > 0) {
+                <span>({{ countdown() }}s)</span>
                 }
             </button>
         </div>
-    }
+        }
 
-    <!-- Step 3: Success -->
-    @if (isVerified()) {
+        <!-- Step 3: Success -->
+        <!-- @if (isVerified()) {
         <div>
-            <p class="success">✅ Your email has been verified successfully!</p>
+            <p class="success-msg">{{ message() }}✅</p>
         </div>
-    }
+        }
 
-    <p class="message">{{ message() }}</p>
+        @if (isError()) {
+        <p class="error-message">{{ message() }}</p>
+        } -->
+
+    </div>
 </div>