/* Inloggen en de inloglink in de stijl van de portal (static/portal.css) */
body.ss-inloggen { background: var(--ss-bg); min-height: 100vh; display: flex; flex-direction: column; font-family: var(--ss-font); color: var(--ss-text); }
.ss-inloggen .ss-hero-inner { justify-content: center; padding: 30px 24px; }
.ss-inloggen .ss-brand { text-align: left; }
.login-wrapper { flex: 1; display: flex; align-items: flex-start; justify-content: center; padding: 28px 16px 40px; }
.login-card { width: 100%; max-width: 440px; border: 0; border-radius: var(--ss-radius); box-shadow: var(--ss-shadow); }
.login-card .card-body { padding: 28px; }
.login-card h5 { color: var(--ss-ink); font-weight: 700; font-size: 22px; }
.login-card .form-label { color: var(--ss-ink); font-weight: 600; font-size: 14px; }
.login-card .form-text { color: var(--ss-muted); }
.login-card .form-control { border-color: var(--ss-line); border-radius: 10px; padding: 10px 12px; }
.login-card .input-group > .form-control { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.login-card .input-group-text { border-color: var(--ss-line); background: var(--ss-head); color: var(--ss-muted); border-radius: 10px 0 0 10px; }
.login-card .form-control:focus { border-color: var(--ss-blue); box-shadow: 0 0 0 .2rem rgba(42, 111, 219, .18); }
.login-card .btn-primary { background: var(--ss-blue); border-color: var(--ss-blue); font-weight: 600; padding: 11px; border-radius: 10px; font-size: 16px; }
.login-card .btn-primary:hover, .login-card .btn-primary:focus { background: var(--ss-blue-700); border-color: var(--ss-blue-700); }
.login-card .btn-outline-primary { color: var(--ss-blue); border-color: #bcd2f5; font-weight: 600; padding: 11px; border-radius: 10px; }
.login-card .btn-outline-primary:hover { background: var(--ss-blue); border-color: var(--ss-blue); color: #fff; }
.toggle-link { color: var(--ss-blue); cursor: pointer; text-decoration: none; font-size: .875rem; }
.toggle-link:hover { text-decoration: underline; color: var(--ss-blue-700); }
.stap-id { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: var(--ss-blue-050); border-radius: 10px; padding: .55rem .8rem; margin-bottom: 1.25rem; }
.stap-id strong { color: var(--ss-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code-veld { font-size: 1.6rem; letter-spacing: .25em; text-align: center; font-variant-numeric: tabular-nums; }
.scheiding { text-align: center; margin: 1rem 0; }
.login-footer { text-align: center; padding: 18px 0; color: var(--ss-muted); font-size: 13px; }
.ss-inloggen .alert { font-size: .9rem; border-radius: 12px; }