

<?php $__env->startSection('site_title', formatTitle([__('Login'), config('settings.title')])); ?>

<?php $__env->startSection('head_content'); ?>
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=Instrument+Serif:ital@0;1&display=swap" rel="stylesheet">
<style>
    :root {
        --brand-teal: #0e7c86;
        --brand-teal-hover: #0a646d;
        --brand-teal-light: #e6f4f5;
        --left-bg: #ffffff;
        --right-bg: #0d3d47;
        --right-accent: #0e7c86;
        --text-primary: #0f1c20;
        --text-muted: #6b7c80;
        --input-border: #d4dfe1;
        --input-focus: #0e7c86;
        --radius: 14px;
        --radius-sm: 8px;
    }

    * { box-sizing: border-box; }

    body, html {
        margin: 0; padding: 0;
        font-family: 'DM Sans', sans-serif;
        background: #f0f4f5;
    }

    .login-wrapper {
        display: flex;
        min-height: 100vh;
        align-items: center;
        justify-content: center;
        padding: 32px 16px;
        background: #f0f4f5;
    }

    .login-card {
        display: flex;
        width: 100%;
        max-width: 960px;
        min-height: 580px;
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 24px 64px rgba(14, 61, 71, 0.14), 0 4px 16px rgba(14, 124, 134, 0.08);
    }

    /* ── Left Panel ── */
    .login-left {
        flex: 0 0 420px;
        background: var(--left-bg);
        display: flex;
        flex-direction: column;
        padding: 44px 48px;
    }

    .login-brand {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 40px;
    }

    .login-brand-icon {
        width: 36px;
        height: 36px;
        background: var(--brand-teal);
        border-radius: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .login-brand-icon svg {
        width: 20px;
        height: 20px;
        fill: white;
    }

    .login-brand-name {
        font-family: 'DM Sans', sans-serif;
        font-weight: 600;
        font-size: 18px;
        color: var(--text-primary);
        letter-spacing: -0.3px;
    }

    .login-heading {
        font-family: 'Instrument Serif', serif;
        font-size: 30px;
        font-weight: 400;
        color: var(--text-primary);
        margin: 0 0 6px 0;
        letter-spacing: -0.5px;
        line-height: 1.2;
    }

    .login-subheading {
        font-size: 14px;
        color: var(--text-muted);
        margin: 0 0 32px 0;
        font-weight: 400;
        line-height: 1.5;
    }



    /* Form */
    .form-field {
        margin-bottom: 18px;
    }

    .form-field label {
        display: block;
        font-size: 13px;
        font-weight: 500;
        color: var(--text-primary);
        margin-bottom: 7px;
        letter-spacing: 0.1px;
    }

    .input-wrap {
        position: relative;
    }

    .input-wrap svg {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        width: 16px;
        height: 16px;
        color: #9aadaf;
        pointer-events: none;
    }

    .form-input {
        width: 100%;
        padding: 11px 14px 11px 40px;
        border: 1.5px solid var(--input-border);
        border-radius: var(--radius-sm);
        font-size: 14px;
        font-family: 'DM Sans', sans-serif;
        color: var(--text-primary);
        background: #fafcfc;
        transition: border-color 0.2s, box-shadow 0.2s;
        outline: none;
    }

    .form-input:focus {
        border-color: var(--input-focus);
        box-shadow: 0 0 0 3px rgba(14, 124, 134, 0.1);
        background: white;
    }

    .form-input.is-invalid {
        border-color: #e74c3c;
        box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.08);
    }

    .invalid-feedback {
        display: block;
        font-size: 12px;
        color: #e74c3c;
        margin-top: 5px;
    }

    /* Password toggle */
    .pass-toggle {
        position: absolute;
        right: 12px;
        top: 50%;
        transform: translateY(-50%);
        background: none;
        border: none;
        cursor: pointer;
        color: #9aadaf;
        padding: 2px;
        display: flex;
        align-items: center;
    }

    .pass-toggle svg { width: 16px; height: 16px; }

    /* Row: remember + forgot */
    .form-row-split {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
    }

    .custom-checkbox-wrap {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: pointer;
    }

    .custom-checkbox-wrap input[type="checkbox"] {
        width: 16px;
        height: 16px;
        accent-color: var(--brand-teal);
        cursor: pointer;
    }

    .custom-checkbox-wrap span {
        font-size: 13px;
        color: var(--text-muted);
    }

    .forgot-link {
        font-size: 13px;
        color: var(--brand-teal);
        text-decoration: none;
        font-weight: 500;
    }

    .forgot-link:hover { text-decoration: underline; }

    /* Submit button */
    .btn-signin {
        width: 100%;
        padding: 13px;
        background: var(--brand-teal);
        color: white;
        border: none;
        border-radius: var(--radius-sm);
        font-size: 15px;
        font-weight: 600;
        font-family: 'DM Sans', sans-serif;
        cursor: pointer;
        letter-spacing: 0.1px;
        transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
        box-shadow: 0 4px 14px rgba(14, 124, 134, 0.35);
    }

    .btn-signin:hover {
        background: var(--brand-teal-hover);
        box-shadow: 0 6px 20px rgba(14, 124, 134, 0.45);
        transform: translateY(-1px);
    }

    .btn-signin:active { transform: translateY(0); }



    .register-footer {
        margin-top: 24px;
        text-align: center;
        font-size: 13px;
        color: var(--text-muted);
    }

    .register-footer a {
        color: var(--brand-teal);
        font-weight: 600;
        text-decoration: none;
    }

    .register-footer a:hover { text-decoration: underline; }

    /* ── Right Panel ── */
    .login-right {
        flex: 1;
        background: var(--right-bg);
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-end;
        padding: 40px 40px 48px;
        overflow: hidden;
    }

    .right-grid-bg {
        position: absolute;
        inset: 0;
        background-image:
            linear-gradient(rgba(14,124,134,0.15) 1px, transparent 1px),
            linear-gradient(90deg, rgba(14,124,134,0.15) 1px, transparent 1px);
        background-size: 36px 36px;
        pointer-events: none;
    }

    .right-glow {
        position: absolute;
        top: -80px;
        right: -80px;
        width: 380px;
        height: 380px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(14,124,134,0.3) 0%, transparent 70%);
        pointer-events: none;
    }

    .right-cards {
        position: absolute;
        top: 32px;
        left: 0;
        right: 0;
        display: flex;
        justify-content: center;
        gap: 12px;
        padding: 0 24px;
        transform: perspective(900px) rotateX(6deg);
    }

    .preview-card {
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.12);
        border-radius: 16px;
        padding: 16px 18px;
        backdrop-filter: blur(12px);
        color: white;
        min-width: 180px;
        font-size: 12px;
    }

    .preview-card-label {
        font-size: 10px;
        color: rgba(255,255,255,0.5);
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 6px;
    }

    .preview-card-value {
        font-size: 22px;
        font-weight: 700;
        font-family: 'DM Sans', sans-serif;
        color: white;
        letter-spacing: -0.5px;
    }

    .preview-card-trend {
        font-size: 11px;
        color: #4dd9a0;
        margin-top: 4px;
        font-weight: 500;
    }

    .preview-bar {
        width: 100%;
        height: 4px;
        background: rgba(255,255,255,0.1);
        border-radius: 99px;
        margin-top: 12px;
        overflow: hidden;
    }

    .preview-bar-fill {
        height: 100%;
        border-radius: 99px;
        background: linear-gradient(90deg, #0e7c86, #4dd9a0);
    }

    .right-bottom {
        position: relative;
        z-index: 2;
        text-align: center;
    }

    .right-icon-box {
        width: 52px;
        height: 52px;
        background: var(--brand-teal);
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 20px;
        box-shadow: 0 8px 28px rgba(14, 124, 134, 0.5);
    }

    .right-icon-box svg { width: 26px; height: 26px; fill: white; }

    .right-title {
        font-size: 24px;
        font-weight: 700;
        color: white;
        line-height: 1.25;
        letter-spacing: -0.4px;
        margin-bottom: 10px;
    }

    .right-title strong { color: white; }

    .right-desc {
        font-size: 13.5px;
        color: rgba(255,255,255,0.55);
        line-height: 1.6;
        max-width: 320px;
        margin: 0 auto;
    }

    /* Responsive */
    @media (max-width: 768px) {
        .login-card { flex-direction: column; border-radius: 20px; }
        .login-left { flex: unset; padding: 36px 28px; }
        .login-right { display: none; }
    }
</style>
<?php $__env->stopSection(); ?>

<?php $__env->startSection('content'); ?>
<div class="login-wrapper">
    <div class="login-card">

        
        <div class="login-left">

            
            <div class="login-brand">
                <div class="login-brand-icon">
                    <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                </div>
                <span class="login-brand-name"><?php echo e(config('settings.title', 'App')); ?></span>
            </div>

            <h1 class="login-heading">Welcome back.</h1>
            <p class="login-subheading"><?php echo e(__('Sign in to continue to your account.')); ?></p>



            
            <form method="POST" action="<?php echo e(route('login')); ?>">
                <?php echo csrf_field(); ?>

                
                <div class="form-field">
                    <label for="i-email"><?php echo e(__('Email Address')); ?> <span style="color:#e74c3c">*</span></label>
                    <div class="input-wrap">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
                        </svg>
                        <input
                            id="i-email"
                            type="text"
                            dir="ltr"
                            class="form-input<?php echo e($errors->has('email') ? ' is-invalid' : ''); ?>"
                            name="email"
                            value="<?php echo e(old('email')); ?>"
                            placeholder="<?php echo e(__('Enter your email address')); ?>"
                            autofocus>
                    </div>
                    <?php if($errors->has('email')): ?>
                        <span class="invalid-feedback" role="alert">
                            <strong><?php echo e($errors->first('email')); ?></strong>
                        </span>
                    <?php endif; ?>
                </div>

                
                <div class="form-field">
                    <label for="i-password"><?php echo e(__('Password')); ?> <span style="color:#e74c3c">*</span></label>
                    <div class="input-wrap">
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
                        </svg>
                        <input
                            id="i-password"
                            type="password"
                            class="form-input<?php echo e($errors->has('password') ? ' is-invalid' : ''); ?>"
                            name="password"
                            placeholder="<?php echo e(__('Enter your password')); ?>">
                        <button type="button" class="pass-toggle" onclick="togglePassword()" title="Show/hide password">
                            <svg id="eye-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                                <path stroke-linecap="round" stroke-linejoin="round" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                            </svg>
                        </button>
                    </div>
                    <?php if($errors->has('password')): ?>
                        <span class="invalid-feedback" role="alert">
                            <strong><?php echo e($errors->first('password')); ?></strong>
                        </span>
                    <?php endif; ?>
                </div>

                
                <div class="form-row-split">
                    <label class="custom-checkbox-wrap">
                        <input type="checkbox" name="remember" id="i-remember" <?php echo e(old('remember') ? 'checked' : ''); ?>>
                        <span><?php echo e(__('Remember me')); ?></span>
                    </label>
                    <?php if(Route::has('password.request')): ?>
                        <a href="<?php echo e(route('password.request')); ?>" class="forgot-link"><?php echo e(__('Forgot password?')); ?></a>
                    <?php endif; ?>
                </div>

                
                <button type="submit" class="btn-signin"><?php echo e(__('Sign In')); ?></button>
            </form>


            
            <?php if(config('settings.registration')): ?>
                <div class="register-footer">
                    <?php echo e(__("Don't have an account?")); ?>

                    <a href="<?php echo e(route('register')); ?>"><?php echo e(__('Register')); ?></a>
                </div>
            <?php endif; ?>
        </div>

        
        <div class="login-right d-none d-lg-flex">
            <div class="right-grid-bg"></div>
            <div class="right-glow"></div>

            
            <div class="right-cards">
                <div class="preview-card">
                    <div class="preview-card-label">Total Value</div>
                    <div class="preview-card-value">$17,366</div>
                    <div class="preview-card-trend">↑ 1.12% this week</div>
                    <div class="preview-bar"><div class="preview-bar-fill" style="width:72%"></div></div>
                </div>
                <div class="preview-card" style="margin-top:18px">
                    <div class="preview-card-label">Available</div>
                    <div class="preview-card-value">$2,005</div>
                    <div class="preview-card-trend">↑ 4.3% from last month</div>
                    <div class="preview-bar"><div class="preview-bar-fill" style="width:55%"></div></div>
                </div>
            </div>

            
            <div class="right-bottom">
                <div class="right-icon-box">
                    <svg viewBox="0 0 24 24"><path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"/></svg>
                </div>
                <div class="right-title">Grow Faster with SEO<br>That <strong>Actually Converts</strong></div>
                <p class="right-desc">Tired of vanity metrics? We focus on real growth — boosting your rankings, traffic, and revenue with tailored SEO and digital strategies that deliver measurable results.</p>
            </div>
        </div>

    </div>
</div>

<script>
function togglePassword() {
    var input = document.getElementById('i-password');
    input.type = input.type === 'password' ? 'text' : 'password';
}
</script>
<?php $__env->stopSection(); ?>
<?php echo $__env->make('layouts.auth', \Illuminate\Support\Arr::except(get_defined_vars(), ['__data', '__path']))->render(); ?><?php /**PATH /home/repixa5/optimathink.com/resources/views/auth/login.blade.php ENDPATH**/ ?>