/* Auth page styles moved from login.blade.php */
:root {
    --bg-deep-yellow: #f1c40f;
    --bg-light-yellow: #fff9c4;
    --accent-gold: #d4ac0d;
    --text-dark: #2c3e50;
}

body { background: radial-gradient(circle, var(--bg-deep-yellow) 0%, var(--bg-light-yellow) 70%, #fffde7 100%); }

.particles { position: absolute; top:0; left:0; width:100%; height:100%; z-index:1; background-image: radial-gradient(rgba(184,134,11,0.4) 1.5px, transparent 1.5px); background-size:40px 40px; }

/* Tighter top/sides: keep centered horizontally but start nearer top */
.login-container { position: relative; z-index:10; width:100%; max-width:720px; padding:0 12px 20px 12px; margin:0 auto; min-height: auto; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; }

    .page-logo {
        width: 100%;
        max-width: 560px; /* match .login-card max-width */
        margin: 0 auto 6px auto;
        display: block;
        text-align: center;
        z-index: 12;
        padding: 0 12px; /* small horizontal padding on narrow screens */
        box-sizing: border-box;
    }
    .page-logo img { display:block; width:100%; height:auto; object-fit:contain; }

    .logo-area { width:100px; height:100px; background:white; border-radius:50%; margin:0 auto -44px; display:flex; align-items:center; justify-content:center; color:var(--bg-deep-yellow); position:relative; z-index:11; box-shadow:0 8px 20px rgba(0,0,0,0.08); border:3px solid var(--bg-light-yellow); }

.login-card { background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); border-radius:20px; padding:32px 28px 24px 28px; box-shadow:0 14px 30px rgba(0,0,0,0.08); border:1px solid rgba(255,255,255,0.5); width:95%; max-width:560px; }

.form-control { border-radius:12px; border:2px solid rgba(200,180,100,0.25); padding:0.7rem; background-color:#fffdf2; transition:all 0.18s ease; font-size: 0.95rem; }
.form-control:focus { background-color:#fff; border-color:var(--bg-deep-yellow); box-shadow:0 6px 18px rgba(212,172,13,0.08); }

.form-control.is-invalid { border-color: #dc3545; box-shadow: none; }
.invalid-feedback { display: none; }
.form-control.is-invalid + .invalid-feedback { display: block; }

.btn-login { background: linear-gradient(135deg, var(--bg-deep-yellow), var(--accent-gold)); border:none; border-radius:12px; padding:0.8rem; font-weight:600; color:#fff; margin-top:1rem; }

.form-label { font-weight:600; color:var(--text-dark); font-size:0.85rem; margin-bottom:0.4rem; }

/* Responsive tweaks */
@media (max-width: 1024px) {
    .login-card { padding: 24px 24px 20px 24px; }
    .page-logo { max-width: 480px; }
}

@media (max-height: 800px) {
    .login-container { margin: 0 auto; }
    .page-logo { max-width: 400px; margin-bottom: 0; }
    .logo-area { width: 80px; height: 80px; margin: 0 auto -36px; }
    .login-card { padding: 20px 24px 16px 24px; }
    .btn-login { padding: 0.6rem; margin-top: 0.5rem; }
}

@media (max-width: 768px) {
    .login-container { padding: 0 10px; min-height: auto; margin-top:0; }
    .login-card { padding: 28px 18px 20px 18px; border-radius:16px; }
    .logo-area { width:88px; height:88px; margin:0 auto -40px; }
}

@media (max-width: 420px) {
    .login-container { padding: 10px 8px; margin:0.75rem auto; }
    .login-card { padding: 22px 14px 16px 14px; }
    .logo-area { width:76px; height:76px; margin:0 auto -36px; }
}