/* --- CSS Variabler för White-labeling --- */
:root {
    /* Standardtema (Byts enkelt ut via PHP/Databas för olika kunder) */
    --primary-color: #1E293B; /* Mörkblå/grå */
    --accent-color: #2563EB; /* Klargblå */
    --accent-hover: #1D4ED8;
    --bg-color: #F8FAFC;
    --surface-color: #FFFFFF;
    --text-main: #0F172A;
    --text-muted: #64748B;
    --border-color: #E2E8F0;
    --font-family: 'Inter', system-ui, sans-serif;
}

/* --- Grundinställningar --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font-family); background-color: var(--bg-color); color: var(--text-main); }

/* --- Layout --- */
.passen-layout { display: flex; height: 100vh; align-items: center; justify-content: center; padding: 1rem; }
.passen-layout__container { display: flex; width: 100%; max-width: 1000px; height: 600px; background: var(--surface-color); border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.05); overflow: hidden; }

/* --- Inloggningssektion --- */
.passen-login { flex: 1; padding: 3rem; display: flex; flex-direction: column; justify-content: center; }
.passen-login__header { margin-bottom: 2rem; }
.passen-login__title { font-size: 1.5rem; margin-top: 1.5rem; margin-bottom: 0.5rem; }
.passen-login__subtitle { color: var(--text-muted); font-size: 0.9rem; }

/* --- Formulär --- */
.passen-form { display: flex; flex-direction: column; gap: 1rem; }
.passen-form__group { display: flex; flex-direction: column; gap: 0.4rem; }
.passen-form__label { font-size: 0.85rem; font-weight: 600; }
.passen-form__input { padding: 0.8rem; border: 1px solid var(--border-color); border-radius: 8px; font-size: 1rem; outline: none; transition: border-color 0.2s; }
.passen-form__input:focus { border-color: var(--accent-color); }
.passen-form__divider { text-align: center; color: var(--text-muted); font-size: 0.85rem; margin: 0.5rem 0; position: relative; }

/* --- Knappar (BEM Modifier) --- */
.passen-btn { padding: 0.8rem; border-radius: 8px; font-weight: 600; font-size: 1rem; cursor: pointer; border: none; transition: all 0.2s; display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
.passen-btn--primary { background-color: var(--primary-color); color: white; }
.passen-btn--primary:hover { opacity: 0.9; }
.passen-btn--bankid { background-color: var(--accent-color); color: white; }
.passen-btn--bankid:hover { background-color: var(--accent-hover); }

/* --- Dekorativ Högersida --- */
.passen-hero { flex: 1; background: linear-gradient(135deg, var(--primary-color), var(--accent-color)); padding: 3rem; display: flex; align-items: flex-end; color: white; }
@media (max-width: 768px) { .passen-hero { display: none; } }
.passen-hero__title { font-size: 2rem; margin-bottom: 1rem; line-height: 1.2; }
.passen-hero__text { font-size: 1rem; opacity: 0.9; }