Refactor mobile detection to use unified composable

- Add useMobileDetection composable to centralize device detection logic
- Replace direct utility imports with composable usage across components
- Update MultipleNationalityInput, PhoneInputWrapper, and auth pages
- Simplify mobile-specific styling and behavior handling
- Improve code maintainability by consolidating detection logic

pages/auth/setup-password.vue

@@ -153,21 +153,24 @@
 </template>
 
 <script setup lang="ts">
-import { 
-  getOptimizedClasses,
-  applyMobileSafariFixes 
-} from '~/utils/mobile-safari-utils';
+import { useMobileDetection } from '~/composables/useMobileDetection';
 
 definePageMeta({
   layout: false,
   middleware: 'guest'
 });
 
+// Use unified mobile detection
+const mobileDetection = useMobileDetection();
+
 // Mobile Safari optimization classes
-const containerClasses = computed(() => [
-  'password-setup-page',
-  ...getOptimizedClasses()
-].join(' '));
+const containerClasses = computed(() => {
+  const classes = ['password-setup-page'];
+  if (mobileDetection.isMobile) classes.push('is-mobile');
+  if (mobileDetection.isMobileSafari) classes.push('is-mobile-safari');
+  if (mobileDetection.isIOS) classes.push('is-ios');
+  return classes.join(' ');
+});
 
 // Reactive state
 const loading = ref(false);
@@ -300,13 +303,8 @@ const setupPassword = async () => {
   }
 };
 
-// Apply mobile Safari fixes
+// Component initialization
 onMounted(() => {
-  // Apply mobile Safari fixes
-  if (typeof window !== 'undefined') {
-    applyMobileSafariFixes();
-  }
-  
   console.log('[setup-password] Password setup page loaded for:', email.value);
   
   // Check if we have required parameters

pages/auth/verify-success.vue

@@ -91,10 +91,7 @@
 </template>
 
 <script setup lang="ts">
-import { 
-  getOptimizedClasses,
-  applyMobileSafariFixes 
-} from '~/utils/mobile-safari-utils';
+import { useMobileDetection } from '~/composables/useMobileDetection';
 
 definePageMeta({
   layout: false,
@@ -106,11 +103,17 @@ const route = useRoute();
 const email = computed(() => route.query.email as string || '');
 const partialWarning = computed(() => route.query.warning === 'partial');
 
+// Use unified mobile detection
+const mobileDetection = useMobileDetection();
+
 // Mobile Safari optimization classes
-const containerClasses = computed(() => [
-  'verification-success',
-  ...getOptimizedClasses()
-].join(' '));
+const containerClasses = computed(() => {
+  const classes = ['verification-success'];
+  if (mobileDetection.isMobile) classes.push('is-mobile');
+  if (mobileDetection.isMobileSafari) classes.push('is-mobile-safari');
+  if (mobileDetection.isIOS) classes.push('is-ios');
+  return classes.join(' ');
+});
 
 // Setup password URL for Keycloak - Fixed URL structure
 const setupPasswordUrl = computed(() => {
@@ -144,13 +147,8 @@ const goToPasswordSetup = () => {
   });
 };
 
-// Apply mobile Safari fixes and track verification
+// Track verification
 onMounted(() => {
-  // Apply mobile Safari fixes
-  if (typeof window !== 'undefined') {
-    applyMobileSafariFixes();
-  }
-  
   console.log('[verify-success] Email verification completed', { 
     email: email.value,
     partialWarning: partialWarning.value,

pages/auth/verify.vue

@@ -121,21 +121,24 @@
 </template>
 
 <script setup lang="ts">
-import { 
-  getOptimizedClasses,
-  applyMobileSafariFixes 
-} from '~/utils/mobile-safari-utils';
+import { useMobileDetection } from '~/composables/useMobileDetection';
 
 definePageMeta({
   layout: false,
   middleware: 'guest'
 });
 
+// Use unified mobile detection
+const mobileDetection = useMobileDetection();
+
 // Mobile Safari optimization classes
-const containerClasses = computed(() => [
-  'verification-page',
-  ...getOptimizedClasses()
-].join(' '));
+const containerClasses = computed(() => {
+  const classes = ['verification-page'];
+  if (mobileDetection.isMobile) classes.push('is-mobile');
+  if (mobileDetection.isMobileSafari) classes.push('is-mobile-safari');
+  if (mobileDetection.isIOS) classes.push('is-ios');
+  return classes.join(' ');
+});
 
 // Reactive state
 const verifying = ref(true);
@@ -202,13 +205,8 @@ const retryVerification = () => {
   verifyEmail();
 };
 
-// Apply mobile Safari fixes and start verification
+// Start verification on mount
 onMounted(() => {
-  // Apply mobile Safari fixes
-  if (typeof window !== 'undefined') {
-    applyMobileSafariFixes();
-  }
-  
   console.log('[auth/verify] Starting email verification with token:', token.value?.substring(0, 20) + '...');
   
   // Start verification process