@extends('layouts.public')

@section('title', 'Create Account - BANKING')

@section('content')

<div class="auth-page">
    <div class="auth-split">

        {{-- Left Panel: Branding --}}
        <div class="auth-left">
            <div class="auth-left-content">
                <a href="{{ route('home') }}" class="auth-left-logo">
                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
                        <rect width="48" height="48" rx="12" fill="rgba(255,255,255,0.15)"/>
                        <rect x="2" y="2" width="44" height="44" rx="10" stroke="rgba(255,255,255,0.2)" stroke-width="1"/>
                        <path d="M12 18h24v3H12zm0 6h18v3H12zm0 6h12v3H12z" fill="white"/>
                        <rect x="33" y="24" width="9" height="9" rx="2" fill="rgba(255,255,255,0.3)"/>
                    </svg>
                    <span>BANKING</span>
                </a>

                <h1 class="auth-left-title">Start Your<br>Digital Banking Journey</h1>
                <p class="auth-left-subtitle">Open your free account in under 3 minutes. No paperwork, no branch visits — just pure digital banking.</p>

                <div class="auth-left-badges">
                    <div class="auth-badge">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M10 2l7 3v4c0 3.5-3 6.5-7 8-4-1.5-7-4.5-7-8V5l7-3z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/><path d="M7 10l2 2 4-4.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <span>Bank-Grade Security</span>
                    </div>
                    <div class="auth-badge">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="8" stroke="currentColor" stroke-width="1.5"/><path d="M6 10l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <span>Free Account — No Fees</span>
                    </div>
                    <div class="auth-badge">
                        <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M4 10h12M12 6l4 4-4 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                        <span>Instant Transfers</span>
                    </div>
                </div>
            </div>
        </div>

        {{-- Right Panel: Register Form --}}
        <div class="auth-right">
            <div class="auth-card auth-card-wide">

                {{-- Mobile Logo --}}
                <div class="auth-mobile-header">
                    <a href="{{ route('home') }}" class="auth-mobile-logo">
                        <svg width="36" height="36" viewBox="0 0 48 48" fill="none">
                            <rect width="48" height="48" rx="12" fill="#0D6B58"/>
                            <path d="M12 18h24v3H12zm0 6h18v3H12zm0 6h12v3H12z" fill="white"/>
                            <rect x="33" y="24" width="9" height="9" rx="2" fill="#138A6E"/>
                        </svg>
                        <span>BANKING</span>
                    </a>
                </div>

                <div class="auth-card-body">
                    <div class="auth-card-header">
                        <h2 class="auth-card-title">Create Your Account</h2>
                        <p class="auth-card-subtitle">Fill in the details below to get started</p>
                    </div>

                    {{-- Validation Errors --}}
                    @if($errors->any())
                    <div class="auth-alert auth-alert-error">
                        <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="8" stroke="currentColor" stroke-width="1.5"/><path d="M9 5.5v4M9 12h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                        <div>
                            @foreach($errors->all() as $error)
                            <div>{{ $error }}</div>
                            @endforeach
                        </div>
                    </div>
                    @endif

                    <form method="POST" action="{{ route('register') }}" class="auth-form" id="registerForm">
                        @csrf
                        @method('POST')

                        {{-- Personal Information --}}
                        <div class="auth-form-section">
                            <h3 class="auth-form-section-title">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="6" r="3" stroke="currentColor" stroke-width="1.5"/><path d="M3 16c0-2.7 2.7-5 6-5s6 2.3 6 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                                Personal Information
                            </h3>

                            <div class="auth-field">
                                <label class="auth-label" for="name">Full Name</label>
                                <div class="auth-input-wrap">
                                    <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="6" r="3" stroke="currentColor" stroke-width="1.5"/><path d="M3 16c0-2.7 2.7-5 6-5s6 2.3 6 5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    <input type="text" id="name" name="name" class="auth-input @error('name') is-error @enderror" value="{{ old('name') }}" placeholder="Enter your full name" required>
                                </div>
                                @error('name') <span class="auth-field-error">{{ $message }}</span> @enderror
                            </div>

                            <div class="auth-field-row">
                                <div class="auth-field">
                                    <label class="auth-label" for="username">Username</label>
                                    <div class="auth-input-wrap">
                                        <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 5h12M3 9h12M3 13h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                                        <input type="text" id="username" name="username" class="auth-input @error('username') is-error @enderror" value="{{ old('username') }}" placeholder="Choose a username" required>
                                    </div>
                                    @error('username') <span class="auth-field-error">{{ $message }}</span> @enderror
                                </div>

                                <div class="auth-field">
                                    <label class="auth-label" for="email">Email Address</label>
                                    <div class="auth-input-wrap">
                                        <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="4" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M2 6l7 4 7-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                        <input type="email" id="email" name="email" class="auth-input @error('email') is-error @enderror" value="{{ old('email') }}" placeholder="you@example.com" required>
                                    </div>
                                    @error('email') <span class="auth-field-error">{{ $message }}</span> @enderror
                                </div>
                            </div>

                            <div class="auth-field-row">
                                <div class="auth-field">
                                    <label class="auth-label" for="phone">Phone Number</label>
                                    <div class="auth-input-wrap">
                                        <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="5" y="2" width="8" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M8 14h2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                                        <input type="tel" id="phone" name="phone" class="auth-input @error('phone') is-error @enderror" value="{{ old('phone') }}" placeholder="+234 800 000 0000" required>
                                    </div>
                                    @error('phone') <span class="auth-field-error">{{ $message }}</span> @enderror
                                </div>

                                <div class="auth-field">
                                    <label class="auth-label" for="date_of_birth">Date of Birth</label>
                                    <div class="auth-input-wrap">
                                        <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="3" width="14" height="13" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M2 7h14M6 1v4M12 1v4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                                        <input type="date" id="date_of_birth" name="date_of_birth" class="auth-input @error('date_of_birth') is-error @enderror" value="{{ old('date_of_birth') }}" required>
                                    </div>
                                    @error('date_of_birth') <span class="auth-field-error">{{ $message }}</span> @enderror
                                </div>
                            </div>

                            <div class="auth-field-row">
                                <div class="auth-field">
                                    <label class="auth-label" for="gender">Gender</label>
                                    <div class="auth-input-wrap auth-input-wrap-select">
                                        <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7" stroke="currentColor" stroke-width="1.5"/><path d="M9 5v8M6 8l3-3 3 3" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
                                        <select id="gender" name="gender" class="auth-input auth-select @error('gender') is-error @enderror" required>
                                            <option value="">Select gender</option>
                                            <option value="male" {{ old('gender') === 'male' ? 'selected' : '' }}>Male</option>
                                            <option value="female" {{ old('gender') === 'female' ? 'selected' : '' }}>Female</option>
                                            <option value="other" {{ old('gender') === 'other' ? 'selected' : '' }}>Other</option>
                                        </select>
                                    </div>
                                    @error('gender') <span class="auth-field-error">{{ $message }}</span> @enderror
                                </div>

                                <div class="auth-field">
                                    <label class="auth-label" for="country">Country</label>
                                    <div class="auth-input-wrap auth-input-wrap-select">
                                        <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7" stroke="currentColor" stroke-width="1.5"/><path d="M2 9h14M9 2c-2 2-2 5-2 7s0 5 2 7M9 2c2 2 2 5 2 7s0 5-2 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                                        <select id="country" name="country" class="auth-input auth-select @error('country') is-error @enderror" required>
                                            <option value="">Select country</option>
                                            <option value="Nigeria" {{ old('country') === 'Nigeria' ? 'selected' : '' }}>Nigeria</option>
                                            <option value="Ghana" {{ old('country') === 'Ghana' ? 'selected' : '' }}>Ghana</option>
                                            <option value="Kenya" {{ old('country') === 'Kenya' ? 'selected' : '' }}>Kenya</option>
                                            <option value="South Africa" {{ old('country') === 'South Africa' ? 'selected' : '' }}>South Africa</option>
                                            <option value="United States" {{ old('country') === 'United States' ? 'selected' : '' }}>United States</option>
                                            <option value="United Kingdom" {{ old('country') === 'United Kingdom' ? 'selected' : '' }}>United Kingdom</option>
                                            <option value="Other" {{ old('country') === 'Other' ? 'selected' : '' }}>Other</option>
                                        </select>
                                    </div>
                                    @error('country') <span class="auth-field-error">{{ $message }}</span> @enderror
                                </div>
                            </div>

                            <div class="auth-field">
                                <label class="auth-label" for="address">Address</label>
                                <div class="auth-input-wrap">
                                    <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M9 1C6 1 3 3.5 3 7c0 4 6 10 6 10s6-6 6-10c0-3.5-3-6-6-6z" stroke="currentColor" stroke-width="1.5"/><circle cx="9" cy="7" r="2" stroke="currentColor" stroke-width="1.5"/></svg>
                                    <input type="text" id="address" name="address" class="auth-input @error('address') is-error @enderror" value="{{ old('address') }}" placeholder="Enter your address" required>
                                </div>
                                @error('address') <span class="auth-field-error">{{ $message }}</span> @enderror
                            </div>

                            <div class="auth-field">
                                <label class="auth-label" for="state">State / Province</label>
                                <div class="auth-input-wrap">
                                    <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="2" width="14" height="14" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M2 7h14M7 2v14" stroke="currentColor" stroke-width="1.5"/></svg>
                                    <input type="text" id="state" name="state" class="auth-input @error('state') is-error @enderror" value="{{ old('state') }}" placeholder="Enter your state" required>
                                </div>
                                @error('state') <span class="auth-field-error">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        {{-- Security --}}
                        <div class="auth-form-section">
                            <h3 class="auth-form-section-title">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="4" y="8" width="10" height="8" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M6 8V6a3 3 0 116 0v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                                Security
                            </h3>

                            <div class="auth-field-row">
                                <div class="auth-field">
                                    <label class="auth-label" for="password">Password</label>
                                    <div class="auth-input-wrap">
                                        <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="4" y="8" width="10" height="8" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M6 8V6a3 3 0 116 0v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="12.5" r="1" fill="currentColor"/></svg>
                                        <input type="password" id="password" name="password" class="auth-input @error('password') is-error @enderror" placeholder="Create a password" required>
                                    </div>
                                    <div class="auth-password-strength" id="passwordStrength">
                                        <div class="auth-password-bar"><div class="auth-password-fill" id="passwordFill"></div></div>
                                        <span class="auth-password-text" id="passwordText"></span>
                                    </div>
                                    @error('password') <span class="auth-field-error">{{ $message }}</span> @enderror
                                </div>

                                <div class="auth-field">
                                    <label class="auth-label" for="password_confirmation">Confirm Password</label>
                                    <div class="auth-input-wrap">
                                        <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="4" y="8" width="10" height="8" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M6 8V6a3 3 0 116 0v2" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/><circle cx="9" cy="12.5" r="1" fill="currentColor"/></svg>
                                        <input type="password" id="password_confirmation" name="password_confirmation" class="auth-input" placeholder="Confirm your password" required>
                                    </div>
                                </div>
                            </div>

                            <div class="auth-field-row">
                                <div class="auth-field">
                                    <label class="auth-label" for="pin">6-Digit Login PIN</label>
                                    <div class="auth-input-wrap">
                                        <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="5" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M6 9h.01M9 9h.01M12 9h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                                        <input type="password" id="pin" name="pin" class="auth-input @error('pin') is-error @enderror" placeholder="Create 6-digit PIN" maxlength="6" inputmode="numeric" pattern="[0-9]*" required>
                                    </div>
                                    @error('pin') <span class="auth-field-error">{{ $message }}</span> @enderror
                                </div>

                                <div class="auth-field">
                                    <label class="auth-label" for="pin_confirmation">Confirm Login PIN</label>
                                    <div class="auth-input-wrap">
                                        <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><rect x="2" y="5" width="14" height="10" rx="2" stroke="currentColor" stroke-width="1.5"/><path d="M6 9h.01M9 9h.01M12 9h.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                                        <input type="password" id="pin_confirmation" name="pin_confirmation" class="auth-input" placeholder="Confirm 6-digit PIN" maxlength="6" inputmode="numeric" pattern="[0-9]*" required>
                                    </div>
                                </div>
                            </div>

                            <div class="auth-field" style="margin-top: 16px;">
                                <label class="auth-label">Preferred Login Method</label>
                                <p class="auth-form-hint">Choose how you want to sign in after registration.</p>
                                <div class="auth-field-row">
                                    <label class="auth-choice">
                                        <input type="radio" name="login_method" value="pin" {{ old('login_method', 'pin') === 'pin' ? 'checked' : '' }}>
                                        <span class="auth-choice-mark"></span>
                                        <span>
                                            <strong>6-Digit PIN</strong>
                                            <small>Sign in with your PIN</small>
                                        </span>
                                    </label>
                                    <label class="auth-choice">
                                        <input type="radio" name="login_method" value="password" {{ old('login_method') === 'password' ? 'checked' : '' }}>
                                        <span class="auth-choice-mark"></span>
                                        <span>
                                            <strong>Password</strong>
                                            <small>Sign in with your password</small>
                                        </span>
                                    </label>
                                </div>
                                @error('login_method') <span class="auth-field-error">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        {{-- Security Question --}}
                        <div class="auth-form-section">
                            <h3 class="auth-form-section-title">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7" stroke="currentColor" stroke-width="1.5"/><path d="M7 7a2 2 0 012.8-1.8c.5.4.8 1 .8 1.8 0 1.2-1.4 1.4-1.4 2.5M9.2 13h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                                Security Question
                            </h3>

                            <div class="auth-field">
                                <label class="auth-label" for="security_question">Select a Security Question</label>
                                <div class="auth-input-wrap auth-input-wrap-select">
                                    <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7" stroke="currentColor" stroke-width="1.5"/><path d="M7 7a2 2 0 012.8-1.8c.5.4.8 1 .8 1.8 0 1.2-1.4 1.4-1.4 2.5M9.2 13h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    <select id="security_question" name="security_question" class="auth-input auth-select @error('security_question') is-error @enderror" required>
                                        <option value="">Choose a question</option>
                                        <option value="What is your mother's maiden name?" {{ old('security_question') === "What is your mother's maiden name?" ? 'selected' : '' }}>What is your mother's maiden name?</option>
                                        <option value="What was the name of your first pet?" {{ old('security_question') === 'What was the name of your first pet?' ? 'selected' : '' }}>What was the name of your first pet?</option>
                                        <option value="What city were you born in?" {{ old('security_question') === 'What city were you born in?' ? 'selected' : '' }}>What city were you born in?</option>
                                        <option value="What is the name of your favorite teacher?" {{ old('security_question') === 'What is the name of your favorite teacher?' ? 'selected' : '' }}>What is the name of your favorite teacher?</option>
                                        <option value="What was your childhood nickname?" {{ old('security_question') === 'What was your childhood nickname?' ? 'selected' : '' }}>What was your childhood nickname?</option>
                                    </select>
                                </div>
                                @error('security_question') <span class="auth-field-error">{{ $message }}</span> @enderror
                            </div>

                            <div class="auth-field">
                                <label class="auth-label" for="security_answer">Your Answer</label>
                                <div class="auth-input-wrap">
                                    <svg class="auth-input-icon" width="18" height="18" viewBox="0 0 18 18" fill="none"><path d="M3 5h12M3 9h12M3 13h8" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/></svg>
                                    <input type="text" id="security_answer" name="security_answer" class="auth-input @error('security_answer') is-error @enderror" value="{{ old('security_answer') }}" placeholder="Enter your answer" required>
                                </div>
                                @error('security_answer') <span class="auth-field-error">{{ $message }}</span> @enderror
                            </div>
                        </div>

                        {{-- Terms --}}
                        <div class="auth-field">
                            <label class="auth-checkbox">
                                <input type="checkbox" name="terms" id="terms" {{ old('terms') ? 'checked' : '' }} required>
                                <span class="auth-checkbox-mark"></span>
                                <span class="auth-checkbox-text">I agree to the <a href="#" target="_blank" class="auth-link">Terms & Conditions</a> and <a href="#" target="_blank" class="auth-link">Privacy Policy</a></span>
                            </label>
                            @error('terms') <span class="auth-field-error">{{ $message }}</span> @enderror
                        </div>

                        <button type="submit" class="auth-submit" id="registerBtn">
                            <span class="auth-submit-text">Create Account</span>
                            <span class="auth-submit-spinner" style="display:none">
                                <svg width="18" height="18" viewBox="0 0 18 18" fill="none"><circle cx="9" cy="9" r="7" stroke="currentColor" stroke-width="2" stroke-opacity="0.3"/><path d="M9 2a7 7 0 017 7" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
                            </span>
                        </button>
                    </form>

                    <div class="auth-footer">
                        <p>Already have an account? <a href="{{ route('login') }}" class="auth-link-bold">Sign In</a></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
.auth-page {
    min-height: calc(100vh - 70px);
    background: #f8fafb;
}
.auth-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: calc(100vh - 70px);
}
.auth-left {
    background: linear-gradient(135deg, #0D6B58 0%, #094E41 50%, #073D33 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    position: relative;
    overflow: hidden;
}
.auth-left::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
}
.auth-left::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -80px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255,255,255,0.02);
}
.auth-left-content {
    max-width: 420px;
    position: relative;
    z-index: 1;
    color: white;
}
.auth-left-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: white;
    margin-bottom: 48px;
}
.auth-left-logo span {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
}
.auth-left-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 20px;
    letter-spacing: -0.02em;
}
.auth-left-subtitle {
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255,255,255,0.75);
    margin: 0 0 48px;
}
.auth-left-badges {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.auth-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    backdrop-filter: blur(10px);
}
.auth-right {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 40px;
    overflow-y: auto;
    max-height: calc(100vh - 70px);
}
.auth-card {
    width: 100%;
    max-width: 440px;
}
.auth-card-wide {
    max-width: 600px;
}
.auth-mobile-header {
    display: none;
}
.auth-card-body {
    background: white;
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    border: 1px solid #e8ecf0;
}
.auth-card-header {
    margin-bottom: 28px;
}
.auth-card-title {
    font-size: 26px;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 6px;
}
.auth-card-subtitle {
    font-size: 15px;
    color: #64748b;
    margin: 0;
}
.auth-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    margin-bottom: 24px;
}
.auth-alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}
.auth-alert svg {
    flex-shrink: 0;
    margin-top: 1px;
}

/* Form Sections */
.auth-form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.auth-form-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
}
.auth-form-section:last-of-type {
    border-bottom: none;
    padding-bottom: 0;
}
.auth-form-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: #1a1a2e;
    margin: 0 0 4px;
}
.auth-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.auth-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.auth-form-hint {
    font-size: 12px;
    color: #94a3b8;
    margin: -2px 0 10px;
}
.auth-choice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
}
.auth-choice strong {
    display: block;
    color: #1a1a2e;
    font-size: 13px;
}
.auth-choice small {
    color: #64748b;
    font-size: 12px;
}
.auth-choice:has(input:checked) {
    border-color: #0D6B58;
    background: rgba(13,107,88,0.05);
}
.auth-choice input {
    display: none;
}
.auth-choice-mark {
    width: 18px;
    height: 18px;
    border: 1.5px solid #d1d5db;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
    transition: all 0.2s;
}
.auth-choice input:checked + .auth-choice-mark {
    border-color: #0D6B58;
}
.auth-choice input:checked + .auth-choice-mark::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #0D6B58;
}
.auth-label {
    font-size: 13px;
    font-weight: 600;
    color: #334155;
}
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-input-wrap-select::after {
    content: '';
    position: absolute;
    right: 14px;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #94a3b8;
    pointer-events: none;
}
.auth-input-icon {
    position: absolute;
    left: 14px;
    color: #94a3b8;
    pointer-events: none;
    z-index: 1;
}
.auth-input {
    width: 100%;
    padding: 12px 14px 12px 42px;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: #1a1a2e;
    background: #f8fafb;
    transition: all 0.2s ease;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}
.auth-select {
    padding-right: 36px;
    cursor: pointer;
}
.auth-input:focus {
    border-color: #0D6B58;
    background: white;
    box-shadow: 0 0 0 3px rgba(13,107,88,0.1);
}
.auth-input.is-error {
    border-color: #dc2626;
}
.auth-input::placeholder {
    color: #94a3b8;
}
.auth-field-error {
    font-size: 12px;
    color: #dc2626;
    margin-top: 2px;
}

/* Password Strength */
.auth-password-strength {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
}
.auth-password-bar {
    flex: 1;
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
}
.auth-password-fill {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: all 0.3s ease;
}
.auth-password-text {
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

/* Checkbox */
.auth-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    font-size: 13px;
    color: #64748b;
    line-height: 1.4;
}
.auth-checkbox input {
    display: none;
}
.auth-checkbox-mark {
    width: 18px;
    height: 18px;
    border: 1.5px solid #d1d5db;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    margin-top: 1px;
}
.auth-checkbox input:checked + .auth-checkbox-mark {
    background: #0D6B58;
    border-color: #0D6B58;
}
.auth-checkbox input:checked + .auth-checkbox-mark::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) translateY(-1px);
}
.auth-link {
    color: #0D6B58;
    text-decoration: none;
    font-weight: 500;
}
.auth-link:hover {
    text-decoration: underline;
}

/* Submit */
.auth-submit {
    width: 100%;
    padding: 13px 24px;
    background: #0D6B58;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.auth-submit:hover {
    background: #094E41;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(13,107,88,0.3);
}
.auth-submit:active {
    transform: translateY(0);
}
.auth-submit-spinner svg {
    animation: spin 0.8s linear infinite;
}
@keyframes spin {
    100% { transform: rotate(360deg); }
}
.auth-footer {
    text-align: center;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid #f1f5f9;
}
.auth-footer p {
    font-size: 14px;
    color: #64748b;
    margin: 0;
}
.auth-link-bold {
    color: #0D6B58;
    font-weight: 600;
    text-decoration: none;
}
.auth-link-bold:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 1024px) {
    .auth-left {
        display: none;
    }
    .auth-split {
        grid-template-columns: 1fr;
    }
    .auth-right {
        min-height: calc(100vh - 70px);
        align-items: center;
    }
    .auth-mobile-header {
        display: block;
        text-align: center;
        margin-bottom: 24px;
    }
    .auth-mobile-logo {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
        color: #1a1a2e;
        font-size: 20px;
        font-weight: 800;
    }
}
@media (max-width: 640px) {
    .auth-right {
        padding: 24px 16px;
    }
    .auth-card-body {
        padding: 28px 20px;
    }
    .auth-card-title {
        font-size: 22px;
    }
    .auth-field-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}
</style>

@push('scripts')
<script>
document.getElementById('registerForm').addEventListener('submit', function() {
    var btn = document.getElementById('registerBtn');
    btn.querySelector('.auth-submit-text').style.display = 'none';
    btn.querySelector('.auth-submit-spinner').style.display = 'inline-flex';
    btn.disabled = true;
});

var passwordInput = document.getElementById('password');
var passwordFill = document.getElementById('passwordFill');
var passwordText = document.getElementById('passwordText');

passwordInput.addEventListener('input', function() {
    var val = this.value;
    var strength = 0;
    if (val.length >= 6) strength++;
    if (val.length >= 10) strength++;
    if (/[A-Z]/.test(val) && /[a-z]/.test(val)) strength++;
    if (/[0-9]/.test(val)) strength++;
    if (/[^A-Za-z0-9]/.test(val)) strength++;

    var pct = (strength / 5) * 100;
    var color, text;
    if (strength <= 1) { color = '#dc2626'; text = 'Weak'; }
    else if (strength <= 2) { color = '#f59e0b'; text = 'Fair'; }
    else if (strength <= 3) { color = '#10b981'; text = 'Good'; }
    else if (strength <= 4) { color = '#059669'; text = 'Strong'; }
    else { color = '#0D6B58'; text = 'Very Strong'; }

    passwordFill.style.width = pct + '%';
    passwordFill.style.background = color;
    passwordText.textContent = val.length > 0 ? text : '';
    passwordText.style.color = color;
});
</script>
@endpush

@endsection