<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Login | EMI CREDITS</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --black: #050505;
            --black-soft: #0b0b0b;
            --black-card: #101010;
            --yellow: #ffd21c;
            --yellow-dark: #e9b900;
            --white: #ffffff;
            --text-soft: #a7a7a7;
            --border: rgba(255, 210, 28, 0.20);
        }

        body {
            min-height: 100vh;
            font-family: Inter, Arial, Helvetica, sans-serif;
            background:
                radial-gradient(circle at 8% 15%, rgba(255,210,28,0.10), transparent 28%),
                radial-gradient(circle at 92% 85%, rgba(255,210,28,0.07), transparent 30%),
                var(--black);
            color: var(--white);
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            pointer-events: none;
            opacity: .18;
            background-image:
                linear-gradient(rgba(255,210,28,.035) 1px, transparent 1px),
                linear-gradient(90deg, rgba(255,210,28,.035) 1px, transparent 1px);
            background-size: 42px 42px;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .page {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 35px 20px;
            position: relative;
            z-index: 1;
        }

        .login-wrapper {
            width: 100%;
            max-width: 1080px;
            min-height: 630px;
            display: grid;
            grid-template-columns: 1fr 1fr;
            background: #0a0a0a;
            border: 1px solid rgba(255,210,28,.22);
            border-radius: 26px;
            overflow: hidden;
            box-shadow:
                0 30px 90px rgba(0,0,0,.60),
                0 0 50px rgba(255,210,28,.04);
        }

        /* ==================================
           LEFT SIDE
        ================================== */

        .brand-side {
            position: relative;
            padding: 55px;
            color: white;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            overflow: hidden;
            background:
                radial-gradient(circle at 80% 18%, rgba(255,210,28,.15), transparent 27%),
                linear-gradient(145deg, #050505, #111111);
            border-right: 1px solid rgba(255,210,28,.12);
        }

        .brand-side::before {
            content: "";
            position: absolute;
            width: 410px;
            height: 410px;
            border: 1px solid rgba(255,210,28,.12);
            border-radius: 50%;
            right: -190px;
            top: -150px;
        }

        .brand-side::after {
            content: "";
            position: absolute;
            width: 300px;
            height: 300px;
            border: 1px solid rgba(255,210,28,.08);
            border-radius: 50%;
            left: -170px;
            bottom: -140px;
        }

        .brand-content,
        .benefits {
            position: relative;
            z-index: 2;
        }

        .logo {
            display: inline-flex;
            align-items: center;
            padding: 0;
            margin-bottom: 58px;
            background: transparent;
            border-radius: 0;
            box-shadow: none;
        }

        .logo img {
            height: 40px;
            width: auto;
            max-width: 180px;
            display: block;
        }

        .eyebrow {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            align-self: flex-start;
            width: fit-content;
            gap: 7px;
            color: var(--yellow);
            border: 1px solid rgba(255,210,28,.28);
            background: rgba(255,210,28,.05);
            padding: 8px 13px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 800;
            letter-spacing: .7px;
            text-transform: uppercase;
            margin: 0 0 20px 0;
            text-align: left;
        }

        .brand-content h1 {
            font-size: 44px;
            line-height: 1.08;
            letter-spacing: -1.8px;
            margin-bottom: 20px;
        }

        .brand-content h1 span {
            color: var(--yellow);
        }

        .brand-content p {
            color: #ababab;
            font-size: 15px;
            max-width: 410px;
            line-height: 1.75;
        }

        .benefits {
            display: flex;
            flex-direction: column;
            gap: 13px;
        }

        .benefit {
            display: flex;
            align-items: center;
            gap: 11px;
            color: #d7d7d7;
            font-size: 13px;
        }

        .benefit-icon {
            width: 31px;
            height: 31px;
            flex: 0 0 31px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: rgba(255,210,28,.10);
            border: 1px solid rgba(255,210,28,.22);
            color: var(--yellow);
            border-radius: 9px;
            font-size: 13px;
        }

        /* ==================================
           RIGHT SIDE
        ================================== */

        .form-side {
            padding: 55px;
            display: flex;
            align-items: center;
            background:
                radial-gradient(circle at 90% 5%, rgba(255,210,28,.07), transparent 30%),
                #0b0b0b;
        }

        .form-container {
            width: 100%;
            max-width: 400px;
            margin: auto;
        }

        .mobile-logo {
            display: none;
        }

        .form-header {
            margin-bottom: 30px;
        }

        .form-header h2 {
            font-size: 31px;
            letter-spacing: -1px;
            margin-bottom: 9px;
            color: #ffffff;
        }

        .form-header h2 span {
            color: var(--yellow);
        }

        .form-header p {
            color: #888888;
            font-size: 14px;
        }

        /* ==================================
           SESSION STATUS
        ================================== */

        .status-message {
            padding: 12px 14px;
            background: rgba(58, 190, 105, .08);
            border: 1px solid rgba(58, 190, 105, .28);
            color: #7ce19b;
            border-radius: 10px;
            font-size: 13px;
            margin-bottom: 18px;
        }

        /* ==================================
           ERROR
        ================================== */

        .error-box {
            padding: 12px 14px;
            background: rgba(255, 70, 70, .07);
            border: 1px solid rgba(255, 100, 100, .22);
            color: #ff9b9b;
            border-radius: 10px;
            font-size: 13px;
            margin-bottom: 18px;
        }

        .error-box ul {
            padding-left: 18px;
        }

        /* ==================================
           FORM
        ================================== */

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            color: #e7e7e7;
            font-size: 13px;
            font-weight: 700;
            margin-bottom: 8px;
        }

        .input-wrapper {
            position: relative;
        }

        .input-icon {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #777777;
            font-size: 15px;
            pointer-events: none;
            z-index: 2;
        }

        .form-input {
            width: 100%;
            height: 50px;
            border: 1px solid #292929;
            border-radius: 11px;
            background: #111111;
            padding: 0 14px 0 42px;
            color: #ffffff;
            font-size: 14px;
            outline: none;
            transition: .2s ease;
        }

        .form-input:hover {
            border-color: #3a3a3a;
        }

        .form-input:focus {
            background: #0e0e0e;
            border-color: var(--yellow);
            box-shadow: 0 0 0 3px rgba(255,210,28,.08);
        }

        .form-input::placeholder {
            color: #666666;
        }

        /* ==================================
           OPTIONS
        ================================== */

        .form-options {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 3px 0 25px;
        }

        .remember {
            display: flex;
            align-items: center;
            gap: 7px;
            color: #8b8b8b;
            font-size: 12px;
        }

        .remember input {
            width: 14px;
            height: 14px;
            accent-color: var(--yellow);
        }

        .forgot {
            color: var(--yellow);
            font-size: 12px;
            font-weight: 700;
        }

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

        /* ==================================
           LOGIN BUTTON
        ================================== */

        .login-button {
            width: 100%;
            height: 51px;
            border: none;
            border-radius: 11px;
            background: linear-gradient(135deg, #ffd21c, #f0b900);
            color: #080808;
            font-size: 14px;
            font-weight: 800;
            cursor: pointer;
            box-shadow: 0 12px 28px rgba(255,210,28,.15);
            transition: .2s ease;
        }

        .login-button:hover {
            transform: translateY(-1px);
            box-shadow: 0 15px 32px rgba(255,210,28,.22);
        }

        .login-button:active {
            transform: translateY(0);
        }

        /* ==================================
           REGISTER
        ================================== */

        .register-text {
            text-align: center;
            color: #777777;
            font-size: 13px;
            margin-top: 25px;
        }

        .register-text a {
            color: var(--yellow);
            font-weight: 800;
        }

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

        .back-home {
            display: block;
            text-align: center;
            margin-top: 22px;
            color: #707070;
            font-size: 12px;
        }

        .back-home:hover {
            color: var(--yellow);
        }

        /* ==================================
           MOBILE
        ================================== */

        @media (max-width: 800px) {

            .page {
                padding: 18px 14px;
            }

            .login-wrapper {
                max-width: 520px;
                min-height: auto;
                grid-template-columns: 1fr;
                border-radius: 22px;
            }

            .brand-side {
                display: none;
            }

            .form-side {
                padding: 38px 26px;
                min-height: calc(100vh - 36px);
            }

            .mobile-logo {
                display: flex;
                justify-content: center;
                margin-bottom: 34px;
            }

            .mobile-logo a {
                display: inline-flex;
                padding: 0;
                background: transparent;
                border-radius: 0;
                box-shadow: none;
            }

            .mobile-logo img {
                height: 42px;
                max-width: 185px;
                display: block;
            }

            .form-header {
                text-align: center;
            }
        }

        @media (max-width: 450px) {

            body {
                background: #050505;
            }

            body::before {
                display: none;
            }

            .page {
                padding: 0;
            }

            .login-wrapper {
                min-height: 100vh;
                border: none;
                border-radius: 0;
                box-shadow: none;
            }

            .form-side {
                min-height: 100vh;
                padding: 30px 22px;
            }

            .mobile-logo {
                margin-bottom: 30px;
            }

            .form-header h2 {
                font-size: 28px;
            }

            .form-header p {
                font-size: 13px;
            }

            .form-options {
                gap: 10px;
            }

            .login-button {
                height: 52px;
            }
        }
    </style>
</head>

<body>

<div class="page">

    <div class="login-wrapper">

        <!-- =================================
             LEFT BRAND PANEL
        ================================== -->

        <div class="brand-side">

            <div class="brand-content">

                <a href="/" class="logo">
                    <img
                        src="<?php echo e(asset('images/logo.png')); ?>"
                        alt="EMI CREDITS"
                    >
                </a>

                <div class="eyebrow">
                    ✦ Smart EMI Solutions
                </div>

                <h1>
                    Welcome <span>back.</span>
                </h1>

                <p>
                    Login to your EMI CREDITS account
                    and continue your application journey
                    with a simple, secure and flexible
                    digital finance experience.
                </p>

            </div>

            <div class="benefits">

                <div class="benefit">
                    <div class="benefit-icon">✓</div>
                    Simple digital application
                </div>

                <div class="benefit">
                    <div class="benefit-icon">🔒</div>
                    Secure account access
                </div>

                <div class="benefit">
                    <div class="benefit-icon">💳</div>
                    Access your card application
                </div>

                <div class="benefit">
                    <div class="benefit-icon">₹</div>
                    Flexible EMI solutions
                </div>

            </div>

        </div>

        <!-- =================================
             LOGIN FORM
        ================================== -->

        <div class="form-side">

            <div class="form-container">

                <!-- MOBILE LOGO -->

                <div class="mobile-logo">

                    <a href="/">
                        <img
                            src="<?php echo e(asset('images/logo.png')); ?>"
                            alt="EMI CREDITS"
                        >
                    </a>

                </div>

                <!-- HEADER -->

                <div class="form-header">

                    <h2>
                        Sign <span>in</span>
                    </h2>

                    <p>
                        Enter your account details to continue.
                    </p>

                </div>

                <!-- SESSION STATUS -->

                <?php if(session('status')): ?>

                    <div class="status-message">
                        <?php echo e(session('status')); ?>

                    </div>

                <?php endif; ?>

                <!-- VALIDATION ERRORS -->

                <?php if($errors->any()): ?>

                    <div class="error-box">

                        <ul>

                            <?php $__currentLoopData = $errors->all(); $__env->addLoop($__currentLoopData); foreach($__currentLoopData as $error): $__env->incrementLoopIndices(); $loop = $__env->getLastLoop(); ?>

                                <li>
                                    <?php echo e($error); ?>

                                </li>

                            <?php endforeach; $__env->popLoop(); $loop = $__env->getLastLoop(); ?>

                        </ul>

                    </div>

                <?php endif; ?>

                <!-- LOGIN FORM -->

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

                    <?php echo csrf_field(); ?>

                    <!-- EMAIL -->

                    <div class="form-group">

                        <label
                            for="email"
                            class="form-label"
                        >
                            Email Address
                        </label>

                        <div class="input-wrapper">

                            <span class="input-icon">
                                ✉
                            </span>

                            <input
                                id="email"
                                type="email"
                                name="email"
                                class="form-input"
                                value="<?php echo e(old('email')); ?>"
                                placeholder="Enter your email"
                                required
                                autofocus
                                autocomplete="username"
                            >

                        </div>

                    </div>

                    <!-- PASSWORD -->

                    <div class="form-group">

                        <label
                            for="password"
                            class="form-label"
                        >
                            Password
                        </label>

                        <div class="input-wrapper">

                            <span class="input-icon">
                                🔒
                            </span>

                            <input
                                id="password"
                                type="password"
                                name="password"
                                class="form-input"
                                placeholder="Enter your password"
                                required
                                autocomplete="current-password"
                            >

                        </div>

                    </div>

                    <!-- OPTIONS -->

                    <div class="form-options">

                        <label class="remember">

                            <input
                                type="checkbox"
                                name="remember"
                            >

                            Remember me

                        </label>

                        <?php if(Route::has('password.request')): ?>

                            <a
                                href="<?php echo e(route('password.request')); ?>"
                                class="forgot"
                            >
                                Forgot password?
                            </a>

                        <?php endif; ?>

                    </div>

                    <!-- LOGIN -->

                    <button
                        type="submit"
                        class="login-button"
                    >
                        Sign In →
                    </button>

                </form>

                <!-- REGISTER -->

                <?php if(Route::has('register')): ?>

                    <div class="register-text">

                        Don't have an account?

                        <a href="<?php echo e(route('register')); ?>">
                            Create Account
                        </a>

                    </div>

                <?php endif; ?>

                <!-- HOME -->

                <a
                    href="/"
                    class="back-home"
                >
                    ← Back to EMI CREDITS
                </a>

            </div>

        </div>

    </div>

</div>

</body>
</html><?php /**PATH /home/eduintxshop/public_html/loan.eduintx.shop/resources/views/auth/login.blade.php ENDPATH**/ ?>