/*
 * Public auth-modal-stiler for artikkel-/legal-sider som inkluderer
 * templates/public-auth-modal.php (landingssiden bruker landing.css).
 * Design-tokens er scopet til .login-overlay så de aldri overstyrer sidens øvrige tokens.
 */
.login-overlay {
    --c-primary: #26a69a;
    --c-primary-hover: #1e8c82;
    --c-primary-dark: #004d40;
    --c-primary-bg: #e0f2f1;
    --c-bg: #f5f7fa;
    --c-surface: #ffffff;
    --c-text: #1a2332;
    --c-text-secondary: #5f6d7e;
    --c-text-tertiary: #94a3b8;
    --c-border: #e2e8f0;
    --c-border-light: #f1f5f9;
    --c-bankid: #39134C;
    --c-bankid-hover: #470D70;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-pill: 999px;
    --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --shadow-glow: 0 4px 20px rgba(38,166,154,0.35);
    position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,0.5); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition);
}
.login-overlay.open { opacity: 1; visibility: visible; }
.login-panel { position: absolute; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100vw; background: var(--c-surface); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); overflow-y: auto; }
.login-overlay.open .login-panel { transform: translateX(0); }
.login-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 28px; border-bottom: 1px solid var(--c-border-light); position: sticky; top: 0; background: var(--c-surface); z-index: 1; }
.login-panel-header h3 { font-size: 1.15rem; }
.login-panel-close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); color: var(--c-text-secondary); transition: background var(--transition); border: none; background: none; cursor: pointer; }
.login-panel-close:hover { background: var(--c-bg); }
.login-panel-close svg { width: 20px; height: 20px; }
.login-panel-body { flex: 1; padding: 28px; }
.login-tabs { display: flex; border-bottom: 2px solid var(--c-border-light); margin-bottom: 28px; }
.login-tab { flex: 1; padding: 12px 16px; font-size: 0.9rem; font-weight: 600; color: var(--c-text-tertiary); text-align: center; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color var(--transition), border-color var(--transition); border-left: none; border-right: none; border-top: none; background: none; cursor: pointer; }
.login-tab.active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
.login-tab:hover { color: var(--c-text); }
.login-view { display: none; }
.login-view.active { display: block; }
.lp-bankid-hero { text-align: center; margin-bottom: 32px; }
.lp-bankid-shield { width: 68px; height: 68px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: var(--c-primary-bg); border-radius: 50%; color: var(--c-primary); }
.lp-bankid-shield svg { width: 34px; height: 34px; }
.lp-bankid-desc { font-size: 0.95rem; color: var(--c-text-secondary); line-height: 1.65; max-width: 340px; margin: 0 auto; }
.btn-bankid-large { display: flex; align-items: center; justify-content: center; gap: 14px; width: 100%; padding: 14px 24px; min-height: 48px; background: var(--c-bankid); color: #fff; font-family: 'Roboto', 'Inter', sans-serif; font-size: 18px; font-weight: 500; border-radius: var(--radius-pill); transition: background var(--transition), box-shadow var(--transition); margin-bottom: 20px; border: none; cursor: pointer; }
.btn-bankid-large:hover { background: var(--c-bankid-hover); color: #fff; box-shadow: 0 6px 24px rgba(57,19,76,0.3); }
.btn-bankid-large:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-bankid-large img { height: 24px; }
.lp-login-type { display: flex; background: var(--c-bg); border-radius: var(--radius-pill); padding: 4px; margin-bottom: 28px; gap: 4px; }
.lp-login-type-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: var(--radius-pill); font-size: 0.88rem; font-weight: 500; color: var(--c-text-secondary); transition: all 0.2s ease; cursor: pointer; background: transparent; border: none; }
.lp-login-type-btn.active { background: var(--c-surface); color: var(--c-text); font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
.lp-login-type-btn:hover:not(.active) { color: var(--c-text); }
.lp-login-type-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.lp-login-user-content, .lp-login-doctor-content { display: none; }
.lp-login-user-content.active, .lp-login-doctor-content.active { display: block; }
.lp-bankid-trust { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; background: var(--c-bg); border-radius: var(--radius-md); font-size: 0.82rem; color: var(--c-text-secondary); margin-bottom: 20px; text-align: center; line-height: 1.5; }
.lp-bankid-trust svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--c-primary); }
.lp-doctor-info-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 20px; padding: 14px 16px; background: rgba(38,166,154,0.06); border: 1px solid rgba(38,166,154,0.12); border-radius: var(--radius-md); font-size: 0.82rem; color: var(--c-text-secondary); line-height: 1.55; }
.lp-doctor-info-note svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--c-primary); margin-top: 1px; }
.lp-doctor-info-note a { color: var(--c-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.lp-doctor-info-note a:hover { color: var(--c-primary-dark); }
.lp-bankid-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 28px; padding: 20px; background: var(--c-bg); border-radius: var(--radius-md); }
.lp-bankid-steps-title { font-size: 0.78rem; font-weight: 600; color: var(--c-text-tertiary); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; }
.lp-bankid-step { display: flex; align-items: center; gap: 12px; font-size: 0.9rem; color: var(--c-text-secondary); }
.lp-bankid-step-num { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--c-primary-bg); color: var(--c-primary-dark); font-size: 0.78rem; font-weight: 700; border-radius: 50%; flex-shrink: 0; }
.lp-bankid-trial { display: flex; align-items: center; gap: 10px; padding: 16px; background: linear-gradient(135deg, rgba(38,166,154,0.08) 0%, rgba(0,77,64,0.06) 100%); border: 1px solid rgba(38,166,154,0.15); border-radius: var(--radius-md); margin-bottom: 20px; }
.lp-bankid-trial svg { width: 20px; height: 20px; color: var(--c-primary); flex-shrink: 0; }
.lp-bankid-trial span { font-size: 0.88rem; color: var(--c-text-secondary); line-height: 1.5; }
.lp-bankid-trial strong { color: var(--c-primary-dark); }
.login-form-group { margin-bottom: 18px; }
.login-form-group label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--c-text); margin-bottom: 6px; }
.login-form-group input { width: 100%; padding: 12px 16px; border: 1px solid var(--c-border); border-radius: var(--radius-md); font-size: 0.95rem; color: var(--c-text); background: var(--c-surface); transition: border-color var(--transition), box-shadow var(--transition); }
.login-form-group input:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(38,166,154,0.12); }
.login-form-group input::placeholder { color: var(--c-text-tertiary); }
.btn-login-submit { display: flex; align-items: center; justify-content: center; width: 100%; padding: 14px 20px; background: var(--c-primary); color: #fff; font-size: 0.95rem; font-weight: 600; border-radius: var(--radius-md); transition: background var(--transition), box-shadow var(--transition); border: none; cursor: pointer; }
.btn-login-submit:hover { background: var(--c-primary-hover); box-shadow: var(--shadow-glow); }
.btn-login-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.login-message { padding: 12px 16px; border-radius: var(--radius-md); font-size: 0.88rem; margin-bottom: 20px; display: none; }
.login-message.error { display: block; background: rgba(239,68,68,0.08); color: #dc2626; border: 1px solid rgba(239,68,68,0.15); }
.login-message.success { display: block; background: rgba(16,185,129,0.08); color: #059669; border: 1px solid rgba(16,185,129,0.15); }

@media (max-width: 639px) {
    .login-panel-body { padding: 20px; }
    .lp-bankid-shield { width: 56px; height: 56px; }
    .lp-bankid-shield svg { width: 28px; height: 28px; }
    .lp-bankid-hero { margin-bottom: 24px; }
    .btn-bankid-large { padding: 14px 20px; font-size: 16px; }
    .lp-bankid-steps { padding: 16px; gap: 12px; }
    .lp-login-type-btn { padding: 10px 12px; font-size: 0.82rem; gap: 6px; }
    .lp-login-type-btn svg { width: 16px; height: 16px; }
}