/* error messages and loading state */
.error-msg{
    color:#dc2626;
    font-size:13px;
    margin-top:8px;
}

.btn-primary.loading{
    opacity:0.9;
}

.btn-primary.loading::after{
    content:'';
    display:inline-block;
    width:16px;height:16px;margin-left:8px;border-radius:50%;
    border:2px solid rgba(255,255,255,0.6);border-top-color:#fff;animation:spin .8s linear infinite;vertical-align:middle;
}

@keyframes spin{to{transform:rotate(360deg)}}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', sans-serif;
}

/* Clean, mobile-first Laravel-style login CSS */
:root{--bg:#f7fafc;--card:#ffffff;--muted:#7b8794;--accent:#3b82f6}
*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial}
body{background:var(--bg);color:#0f172a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;display:flex;flex-direction:column;min-height:100vh}

/* Centered container */
.guest-root{flex:1;display:flex;align-items:center;justify-content:center;padding:20px}

.card{background:var(--card);border-radius:12px;box-shadow:0 10px 40px rgba(15,23,42,0.08);width:92vw;max-width:1200px;margin:0 auto;padding:30px 26px;max-height:calc(100vh - 120px);overflow:auto;display:block;box-sizing:border-box}
.card .content{display:flex;flex-direction:column;gap:18px;align-items:stretch;width:100%;max-width:100%;margin:12px auto 0}

.logo{width:104px;height:104px;border-radius:14px;background:transparent;display:block;margin:0 auto 12px}
.logo-img{width:100%;height:100%;object-fit:contain;border-radius:6px;display:block}
.subtitle{
    text-align:center;
    color:var(--muted);
    font-size:clamp(13px,1.6vw,16px);
    margin:8px 0 28px; /* more space below subtitle */
}

.login-form{width:100%;display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:6px}
.field input{width:100%;padding:12px 14px;border-radius:8px;border:1px solid #e6e9ef;background:#fff;font-size:15px;color:#0f172a}
.field input:focus{outline:none;box-shadow:0 6px 18px rgba(59,130,246,0.08);border-color:rgba(59,130,246,0.4)}
.error-msg{color:#dc2626;font-size:13px}

.form-row{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.form-row label{display:flex;align-items:center;gap:8px}

.btn-primary{width:100%;padding:12px;border-radius:10px;border:none;background:var(--accent);color:#fff;font-weight:600;font-size:15px;cursor:pointer}
.btn-primary:active{transform:translateY(1px)}

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

/* Footer */
.site-footer{width:100%;text-align:center;color:var(--muted);font-size:13px;padding:14px 0;margin-top:12px}

@media (max-width:720px){
    .card{padding:18px;border-radius:12px;max-height:calc(100vh - 120px)}
    .logo{width:72px;height:72px}
    .subtitle{font-size:14px;margin:6px 0 20px}
}

@media (max-width:420px){
    .card{padding:16px;border-radius:10px;max-height:calc(100vh - 40px)}
    .logo{width:56px;height:56px}
    .subtitle{font-size:13px;margin:6px 0 16px}
}

@media (min-width:1024px){
    .card{width:130%;max-width:none;max-height:calc(100vh - 80px)}
}

/* keep things simple: mobile-first, clean, and aligned with Laravel default feel */

/* Fluid typography */
.title{ font-size: clamp(18px, 2.6vw, 20px); }

/* Ensure input and icon scale */
.field .icon{ left: 12px }
.field input{ padding-left: 44px }

/* Touch target improvements */
.btn-primary, .btn-social{ min-height:44px }