<!DOCTYPE html>
<html lang="<?php echo e(str_replace('_', '-', app()->getLocale())); ?>">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="csrf-token" content="<?php echo e(csrf_token()); ?>">
    <title><?php echo $__env->yieldContent('title', 'Swagvio — Login or Register'); ?></title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn-uicons.flaticon.com/2.6.0/uicons-regular-rounded/css/uicons-regular-rounded.css">
    <link rel="stylesheet" href="https://cdn-uicons.flaticon.com/2.6.0/uicons-solid-rounded/css/uicons-solid-rounded.css">
    <link rel="stylesheet" href="https://cdn-uicons.flaticon.com/2.6.0/uicons-brands/css/uicons-brands.css">
    <style>
        :root {
            --pink:       #e91e8c;
            --pink-dark:  #c2006e;
            --pink-light: #f7c5e0;
            --pink-bg:    #fdf0f7;
            --blue:       #1976d2;
            --bg:         #f5f5f5;
            --white:      #ffffff;
            --border:     #e0e0e0;
            --text:       #333333;
            --text-2:     #555555;
            --text-3:     #777777;
            --text-4:     #999999;
            --shadow:     0 2px 8px rgba(0,0,0,.1);
            --r: 4px;
        }
        *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
        html { scroll-behavior: smooth; }
        body {
            font-family: 'Open Sans', Arial, sans-serif;
            background: var(--bg); color: var(--text);
            min-height: 100vh; display: flex; flex-direction: column;
            -webkit-font-smoothing: antialiased; font-size: 14px;
        }
        a { color: var(--pink); text-decoration: none; }
        a:hover { text-decoration: underline; }

        /* HEADER */
        .guest-header {
            background: white; border-bottom: 1px solid var(--border);
            padding: 0 24px; height: 52px;
            display: flex; align-items: center; justify-content: space-between;
        }
        .guest-logo { display: flex; align-items: center; gap: 6px; text-decoration: none; }
        .guest-logo-icon { width: 26px; height: 26px; background: var(--pink); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white; font-size: 12px; }
        .guest-logo-name { font-size: 18px; font-weight: 800; color: var(--text); }
        .guest-logo-name span { color: var(--pink); }
        .guest-header-right { font-size: 13px; color: var(--text-3); }
        .guest-header-right a { color: var(--pink); font-weight: 600; }

        /* MAIN */
        .guest-main {
            flex: 1; display: flex; align-items: center; justify-content: center;
            padding: 32px 16px;
        }
        .guest-wrap { width: 100%; max-width: 420px; }

        /* CARD */
        .auth-card {
            background: white; border: 1px solid var(--border);
            border-radius: 6px; padding: 32px;
            box-shadow: var(--shadow);
            animation: cardIn .3s ease both;
        }
        @keyframes cardIn { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

        .auth-title { font-size: 20px; font-weight: 800; color: var(--text); margin-bottom: 4px; }
        .auth-subtitle { font-size: 13px; color: var(--text-3); margin-bottom: 24px; }

        /* FORMS */
        .form-group { margin-bottom: 14px; }
        .form-label { display: block; font-size: 12px; font-weight: 700; color: var(--text-2); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .3px; }
        .form-control {
            width: 100%; background: var(--bg); border: 1px solid var(--border);
            border-radius: var(--r); padding: 10px 12px; color: var(--text);
            font-size: 14px; font-family: 'Open Sans', sans-serif; outline: none; transition: border-color .2s;
        }
        .form-control:focus { border-color: var(--pink); background: white; }
        .form-control::placeholder { color: var(--text-4); }
        .form-control.is-invalid { border-color: #e53935; }
        .invalid-feedback { color: #e53935; font-size: 12px; margin-top: 4px; }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

        /* BUTTONS */
        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 6px;
            padding: 11px 20px; border-radius: var(--r);
            font-size: 14px; font-weight: 700; cursor: pointer; border: none;
            text-decoration: none; transition: all .2s; width: 100%;
            font-family: 'Open Sans', sans-serif; line-height: 1;
        }
        .btn-pink { background: var(--pink); color: white; }
        .btn-pink:hover { background: var(--pink-dark); color: white; text-decoration: none; }

        /* DIVIDER */
        .divider { display:flex; align-items:center; gap:12px; margin:18px 0; }
        .divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); }
        .divider span { color:var(--text-4); font-size:12px; white-space:nowrap; }

        /* ALERTS */
        .alert { padding:10px 14px; border-radius:var(--r); font-size:13px; margin-bottom:14px; display:flex; align-items:center; gap:8px; border:1px solid transparent; }
        .alert-error   { background:#fce4ec; border-color:#f48fb1; color:#880e4f; }
        .alert-success { background:#e8f5e9; border-color:#a5d6a7; color:#1b5e20; }

        /* MISC */
        .remember-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; font-size:13px; }
        .remember-label { display:flex; align-items:center; gap:7px; cursor:pointer; color:var(--text-2); }
        .remember-label input { accent-color: var(--pink); }
        .forgot-link { color:var(--pink); font-size:13px; font-weight:600; }
        .auth-switch { text-align:center; margin-top:18px; font-size:13px; color:var(--text-3); }
        .auth-switch a { color:var(--pink); font-weight:700; }
        .age-check { display:flex; align-items:flex-start; gap:9px; padding:10px 12px; background:var(--bg); border:1px solid var(--border); border-radius:var(--r); margin-bottom:14px; font-size:12px; color:var(--text-3); line-height:1.5; cursor:pointer; }
        .age-check input { margin-top:1px; accent-color:var(--pink); flex-shrink:0; width:15px; height:15px; }
        .age-check strong { color:var(--text-2); }
        .terms-note { text-align:center; font-size:11px; color:var(--text-4); margin-top:14px; line-height:1.5; }
        .terms-note a { color:var(--pink); }

        /* ALT BTNS */
        .alt-btn-row { display:flex; gap:8px; margin-top:14px; }
        .alt-btn {
            flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
            padding:10px 12px; border:1px solid var(--border); border-radius:var(--r);
            background:white; cursor:pointer; font-size:13px; font-weight:600;
            color:var(--text-2); transition:all .15s; font-family:'Open Sans',sans-serif;
        }
        .alt-btn:hover { border-color:var(--pink); color:var(--pink); }

        @media (max-width: 480px) {
            .auth-card { padding: 20px; }
            .form-row { grid-template-columns: 1fr; }
        }
    </style>
    <?php echo $__env->yieldContent('styles'); ?>
</head>
<body>
    <header class="guest-header">
        <a href="<?php echo e(route('home')); ?>" class="guest-logo">
            <img src="<?php echo e(asset('images/logo.png')); ?>" alt="Swagvio" style="height: 140px;"></span>
        </a>
        <div class="guest-header-right">
            <?php echo $__env->yieldContent('header-right', ''); ?>
        </div>
    </header>
    <main class="guest-main">
        <div class="guest-wrap">
            <?php echo $__env->yieldContent('content'); ?>
        </div>
    </main>
</body>
</html>
<?php /**PATH E:\project\escort promotion\resources\views/layouts/guest.blade.php ENDPATH**/ ?>