/* Shared auth UI styles for user-info displayed after login */
.user-info{
    display:flex;
    align-items:center;
    gap:10px;
    color:#fff;
}
/* Use Cairo font as the site-wide UI font (fallbacks included) */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;900&display=swap');
html,body,input,button,textarea,select{font-family:'Cairo', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}
.user-name{
    font-weight:700;
    background:linear-gradient(90deg, rgba(255,255,255,0.08), rgba(255,255,255,0.06));
    padding:8px 12px;
    border-radius:20px;
    color:#fff;
    font-size:15px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.12) inset;
}
.icon-btn{
    background:rgba(255,255,255,0.08);
    border:none;
    color:#fff;
    width:40px;
    height:40px;
    border-radius:50%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    font-size:18px;
    transition:all .18s ease;
}
.icon-btn:hover{ transform:translateY(-2px); background:rgba(255,255,255,0.14); }
/* Ensure login button keeps similar visual when present */
.login-btn{ text-transform:uppercase; letter-spacing:0.6px; background:rgba(255,255,255,0.08); padding:8px 14px; border-radius:20px; color:#fff; border:1px solid rgba(255,255,255,0.06) }

/* small responsive helpers */
@media (max-width:640px){
    .sla-login-modal{padding:14px}
    .user-name{display:none}
}

/* centered large submit button inside modal */
.submit-wrap{display:flex;align-items:center;justify-content:center;margin-top:8px}
.submit-wrap .submit-btn{width:100%;max-width:320px;padding:12px 18px;font-size:16px}
.sla-login-modal .remember{flex:1}