<style>
.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#1c1c1e 50%,#2d1a0e);padding:20px;}
.auth-box{width:100%;max-width:380px;}
.auth-brand{text-align:center;margin-bottom:24px;}
.auth-brand .logo{font-size:2.5rem;margin-bottom:6px;}
.auth-brand .name{font-size:1.25rem;font-weight:800;color:#fff;letter-spacing:-.02em;}
.auth-brand .tagline{font-size:.8rem;color:rgba(255,255,255,.5);margin-top:2px;}
.auth-card{background:#fff;border-radius:20px;padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.4);}
.auth-card h2{font-size:1.1rem;font-weight:800;margin-bottom:4px;color:#1c1c1e;}
.auth-card .sub{font-size:.8rem;color:#6b7280;margin-bottom:20px;}
.auth-group{margin-bottom:14px;}
.auth-group label{font-size:.8rem;font-weight:600;color:#374151;display:block;margin-bottom:5px;}
.auth-group input{width:100%;padding:11px 14px;border:1.5px solid #e5e7eb;border-radius:10px;
    font-size:.9rem;outline:none;transition:border-color .15s;font-family:inherit;}
.auth-group input:focus{border-color:var(--accent);}
.auth-remember{display:flex;align-items:center;gap:8px;font-size:.8rem;color:#6b7280;margin-bottom:18px;}
.auth-remember input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;flex-shrink:0;}
.auth-submit{width:100%;padding:13px;background:var(--accent);color:#fff;border:none;border-radius:12px;
    font-size:.95rem;font-weight:800;cursor:pointer;transition:background .15s;letter-spacing:.01em;}
.auth-submit:hover{background:var(--accent-dark);}
.auth-divider{display:flex;align-items:center;gap:10px;margin:18px 0;color:#d1d5db;font-size:.78rem;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:#e5e7eb;}
.auth-guest-btn{width:100%;padding:11px;background:#f9fafb;border:1.5px solid #e5e7eb;border-radius:12px;
    font-size:.85rem;font-weight:600;color:#374151;cursor:pointer;transition:all .15s;text-align:center;
    text-decoration:none;display:block;}
.auth-guest-btn:hover{background:#f3f4f6;color:#1c1c1e;}
.auth-footer{text-align:center;margin-top:18px;font-size:.8rem;color:#6b7280;}
.auth-footer a{color:var(--accent);font-weight:600;text-decoration:none;}
</style>

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

    <div class="auth-brand">
        <?php if (!empty($shopSettings['restaurant_logo'])): ?>
        <img src="<?= e(upload_url($shopSettings['restaurant_logo'])) ?>" alt="Logo"
             style="width:72px;height:72px;border-radius:50%;object-fit:cover;margin:0 auto 10px;display:block;border:3px solid rgba(255,255,255,.3);">
        <?php else: ?>
        <div class="logo">🍕</div>
        <?php endif; ?>
        <div class="name"><?= e($shopSettings['restaurant_name'] ?? APP_NAME) ?></div>
        <div class="tagline">Order delicious food online</div>
    </div>

    <div class="auth-card">
        <h2>Welcome back!</h2>
        <div class="sub">Sign in to your account</div>

        <?= flash_alert() ?>

        <form method="POST" action="<?= url('shop/login') ?>">
            <?= csrf_field() ?>
            <input type="hidden" name="remember" id="rememberHid" value="0">

            <div class="auth-group">
                <label>Email Address</label>
                <input type="email" name="email" placeholder="you@example.com"
                       required autofocus autocomplete="email">
            </div>

            <div class="auth-group">
                <label>Password</label>
                <input type="password" name="password" placeholder="••••••••"
                       required autocomplete="current-password">
            </div>

            <label class="auth-remember">
                <input type="checkbox" id="rememberChk" onchange="document.getElementById('rememberHid').value=this.checked?'1':'0'">
                Keep me signed in for 30 days
            </label>

            <button type="submit" class="auth-submit">
                <i class="bi bi-box-arrow-in-right me-1"></i> Sign In
            </button>
        </form>

        <div class="auth-divider">or</div>

        <a href="<?= url('shop/menu') ?>" class="auth-guest-btn">
            <i class="bi bi-eye me-1"></i> Browse menu as guest
        </a>

        <div class="auth-footer">
            New here? <a href="<?= url('shop/register') ?>">Create a free account</a>
        </div>
    </div>

</div>
</div>
