/**
 * easyMember Public Pages v2.0 - Premium Design System
 * WCAG 2.0 AA Compliant
 * 
 * Separate CSS file for public/external pages (before login)
 * Optimized for premium user experience and modern aesthetics
 */

/* Import CSS variables from v2.0 (reference them) */
/* Note: Variables are defined in easymember-v2.css, we reference them here */

/* ============================================
   BASE STYLES
   ============================================ */

* {
    box-sizing: border-box;
}

html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
}

body.em-public-v2-body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: #111827;
    background-color: #0f172a;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

/* ============================================
   PREMIUM GRADIENT BACKGROUNDS
   ============================================ */

.bg-primary-dark-op {
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background:
        radial-gradient(1200px 700px at 14% 12%, rgba(30, 58, 138, 0.4), rgba(30, 64, 175, 0) 62%),
        radial-gradient(1000px 820px at 86% 22%, rgba(37, 99, 235, 0.35), rgba(30, 64, 175, 0) 62%),
        linear-gradient(135deg, #1e3a8a 0%, #1e40af 45%, #2563eb 100%);
    animation: gradientShift 20s ease infinite;
    background-size: 200% 200%;
}

@keyframes gradientShift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.bg-primary-dark-op::before {
    content: "";
    position: absolute;
    inset: -10%;
    pointer-events: none;
    background: radial-gradient(closest-side at 75% 80%, rgba(255,255,255,0.06), transparent 70%);
    mix-blend-mode: overlay;
    opacity: .35;
    animation: lightPulse 8s ease-in-out infinite;
}

.bg-primary-dark-op::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: 
        radial-gradient(circle at 20% 30%, rgba(37, 99, 235, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(30, 64, 175, 0.12) 0%, transparent 50%),
        radial-gradient(circle at 50% 50%, rgba(30, 58, 138, 0.08) 0%, transparent 60%);
    animation: particleFloat 25s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes lightPulse {
    0%, 100% {
        opacity: .35;
    }
    50% {
        opacity: .45;
    }
}

@keyframes particleFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.6;
    }
    33% {
        transform: translate(30px, -30px) scale(1.1);
        opacity: 0.8;
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
        opacity: 0.5;
    }
}

@media (prefers-reduced-motion: reduce) {
    .bg-primary-dark-op,
    .bg-primary-dark-op::before,
    .bg-primary-dark-op::after {
        animation: none !important;
    }
    
    .auth-card,
    .login-card,
    .reset-card,
    .two-factor-card {
        animation: none !important;
    }
    
    .hero-logo {
        animation: none !important;
    }
    
    .two-factor-icon {
        animation: none !important;
    }
    
    .outside-auth .btn-primary {
        animation: none !important;
    }
}

/* ============================================
   OUTSIDE AUTH WRAPPER
   ============================================ */

.outside-auth {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--em-spacing-lg, 1.5rem);
}

.hero-static {
    width: 100%;
    max-width: 100%;
}

.hero-variant-logo-only {
    /* Specific variant styling */
}

/* ============================================
   PREMIUM GLASSMORPHISM CARDS
   ============================================ */

.auth-card,
.login-card,
.reset-card,
.two-factor-card {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-radius: 24px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(255, 255, 255, 0.3) inset,
        0 8px 32px rgba(47, 85, 212, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.4);
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
    animation: cardEntrance 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes cardEntrance {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.auth-card::before,
.login-card::before,
.reset-card::before,
.two-factor-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, 
        transparent,
        rgba(47, 85, 212, 0.6) 20%,
        rgba(37, 99, 235, 0.8) 50%,
        rgba(47, 85, 212, 0.6) 80%,
        transparent
    );
    opacity: 0.8;
    animation: shimmer 3s ease-in-out infinite;
}

@keyframes shimmer {
    0%, 100% {
        opacity: 0.4;
        transform: translateX(-100%);
    }
    50% {
        opacity: 0.8;
        transform: translateX(100%);
    }
}

.auth-card::after,
.login-card::after,
.reset-card::after,
.two-factor-card::after {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(47, 85, 212, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s ease;
    pointer-events: none;
}

.auth-card:hover::after,
.login-card:hover::after {
    opacity: 1;
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .auth-card,
    .login-card,
    .reset-card,
    .two-factor-card {
        background: rgba(17, 24, 39, 0.9);
        border-color: rgba(255, 255, 255, 0.15);
        box-shadow: 
            0 25px 80px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(255, 255, 255, 0.08) inset,
            0 8px 32px rgba(47, 85, 212, 0.15);
    }
}

/* Hover effects for interactive cards */
.login-card:hover,
.auth-card:hover {
    transform: translateY(-8px) scale(1.01);
    box-shadow: 
        0 35px 100px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(255, 255, 255, 0.35) inset,
        0 12px 48px rgba(47, 85, 212, 0.2),
        0 0 60px rgba(37, 99, 235, 0.15);
    border-color: rgba(255, 255, 255, 0.5);
}

@media (prefers-reduced-motion: reduce) {
    .auth-card,
    .login-card,
    .reset-card,
    .two-factor-card {
        transition: none !important;
    }
    
    .auth-card:hover,
    .login-card:hover {
        transform: none !important;
    }
}

/* ============================================
   HERO LOGO
   ============================================ */

.hero-logo {
    display: inline-block;
    margin-bottom: var(--em-spacing-xl, 2rem);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInDown 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.hero-logo::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(47, 85, 212, 0.2) 0%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    transition: transform 0.6s ease;
    pointer-events: none;
    border-radius: 50%;
    opacity: 0;
}

.hero-logo:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.hero-logo:hover {
    transform: scale(1.05) translateY(-4px);
    filter: drop-shadow(0 12px 32px rgba(47, 85, 212, 0.4));
}

.hero-logo img {
    max-height: 128px;
    width: auto;
    height: auto;
    display: block;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.25));
    transition: filter 0.4s ease;
    position: relative;
    z-index: 1;
}

.hero-logo:hover img {
    filter: drop-shadow(0 12px 40px rgba(47, 85, 212, 0.5));
}

@media (max-width: 480px) {
    .hero-logo img {
        max-height: 96px;
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   PREMIUM FORM STYLES
   ============================================ */

.outside-auth .form-floating {
    position: relative;
    margin-bottom: 1.25rem;
}

.outside-auth .form-control {
    background-color: #F8FAFC;
    color: #111827;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    padding: 1rem 1rem 1rem 1rem;
    font-size: 1rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    height: calc(3.5rem + 2px);
}

.outside-auth .form-control:focus {
    background-color: #FFFFFF;
    border-color: #2F55D4;
    box-shadow: 
        0 0 0 4px rgba(47, 85, 212, 0.15),
        0 8px 24px rgba(47, 85, 212, 0.2),
        0 0 40px rgba(37, 99, 235, 0.1);
    outline: none;
    transform: translateY(-2px) scale(1.01);
    border-width: 2px;
}

.outside-auth .form-control.is-invalid {
    border-color: #ef4444;
    background-color: #FEF2F2;
}

.outside-auth .form-control.is-invalid:focus {
    box-shadow: 
        0 0 0 4px rgba(239, 68, 68, 0.1),
        0 4px 12px rgba(239, 68, 68, 0.15);
}

.outside-auth .form-label {
    color: #64748b;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.outside-auth .form-floating > .form-control:focus ~ label,
.outside-auth .form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: #2F55D4;
    transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(47, 85, 212, 0.2);
}

.outside-auth .invalid-feedback {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.875rem;
    color: #ef4444;
    animation: shake 0.4s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* Password toggle */
.password-toggle {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    cursor: pointer;
    z-index: 10;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    padding: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
}

.password-toggle:hover {
    color: #2F55D4;
    background: rgba(47, 85, 212, 0.15);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 4px 12px rgba(47, 85, 212, 0.3);
}

.password-toggle:focus {
    outline: 2px solid #2F55D4;
    outline-offset: 2px;
    border-radius: 4px;
}

.password-toggle:active {
    transform: translateY(-50%) scale(0.95);
}

/* Dark theme form styles */
@media (prefers-color-scheme: dark) {
    .outside-auth .form-control {
        background-color: rgba(30, 41, 59, 0.6);
        border-color: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.95);
    }
    
    .outside-auth .form-control:focus {
        background-color: rgba(30, 41, 59, 0.8);
        border-color: #2F55D4;
    }
    
    .outside-auth .form-label {
        color: rgba(255, 255, 255, 0.7);
    }
    
    .outside-auth .form-control::placeholder {
        color: rgba(255, 255, 255, 0.4);
    }
}

/* ============================================
   PREMIUM BUTTONS
   ============================================ */

.outside-auth .btn {
    border-radius: 12px;
    font-weight: 600;
    padding: 0.75rem 1.5rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform, box-shadow;
    position: relative;
    overflow: hidden;
}

.outside-auth .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    background-size: 200% 200%;
    border: none;
    color: #ffffff;
    box-shadow: 
        0 10px 30px rgba(37, 99, 235, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
    animation: gradientMove 3s ease infinite;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes gradientMove {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.outside-auth .btn-primary::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s ease;
}

.outside-auth .btn-primary:hover::before {
    left: 100%;
}

.outside-auth .btn-primary:hover {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    transform: translateY(-4px) scale(1.02);
    box-shadow: 
        0 16px 40px rgba(37, 99, 235, 0.5),
        0 8px 16px rgba(0, 0, 0, 0.2),
        0 0 60px rgba(37, 99, 235, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    color: #ffffff;
}

.outside-auth .btn-primary:active {
    transform: translateY(0);
    box-shadow: 
        0 4px 12px rgba(37, 99, 235, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.1);
}

.outside-auth .btn-primary:focus {
    box-shadow: 
        0 0 0 4px rgba(37, 99, 235, 0.25),
        0 8px 20px rgba(37, 99, 235, 0.35);
    outline: none;
}

.outside-auth .btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.outside-auth .btn {
    padding: 0.625rem 1.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.outside-auth .btn-outline-primary {
    border: 2px solid #2563eb;
    color: #2563eb;
    background: transparent;
}

.outside-auth .btn-outline-primary:hover {
    background: linear-gradient(135deg, #1e40af 0%, #2563eb 100%);
    color: #ffffff;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 12px 32px rgba(37, 99, 235, 0.4),
        0 0 40px rgba(37, 99, 235, 0.2);
    border-color: transparent;
}

.outside-auth .btn-outline-secondary {
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.9);
    background: transparent;
}

.outside-auth .btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff;
}

.outside-auth .btn-outline-success {
    border: 2px solid #10b981;
    color: #10b981;
    background: transparent;
}

.outside-auth .btn-outline-success:hover {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 
        0 12px 32px rgba(16, 185, 129, 0.4),
        0 0 40px rgba(16, 185, 129, 0.2);
    border-color: transparent;
}

.outside-auth .btn-dark {
    background: #1e293b;
    border: none;
    color: #ffffff;
}

.outside-auth .btn-dark:hover {
    background: #334155;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

/* Loading state */
.outside-auth .btn .spinner-border-sm {
    width: 1rem;
    height: 1rem;
    border-width: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .outside-auth .btn {
        transition: none !important;
    }
    
    .outside-auth .btn:hover,
    .outside-auth .btn:active {
        transform: none !important;
    }
}

/* ============================================
   PREMIUM ALERTS
   ============================================ */

.outside-auth .alert {
    border-radius: 16px;
    border: none;
    padding: 1.25rem 1.5rem;
    margin-bottom: var(--em-spacing-md, 1rem);
    animation: fadeInUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.1) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.outside-auth .alert::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: currentColor;
    opacity: 0.8;
}

.outside-auth .alert-success {
    background: linear-gradient(135deg, rgba(209, 250, 229, 0.95) 0%, rgba(167, 243, 208, 0.95) 100%);
    color: #065f46;
    border-left: 4px solid #10b981;
    box-shadow: 
        0 8px 24px rgba(16, 185, 129, 0.2),
        0 0 0 1px rgba(16, 185, 129, 0.1) inset;
}

.outside-auth .alert-danger {
    background: linear-gradient(135deg, rgba(254, 226, 226, 0.95) 0%, rgba(254, 202, 202, 0.95) 100%);
    color: #991b1b;
    border-left: 4px solid #ef4444;
    box-shadow: 
        0 8px 24px rgba(239, 68, 68, 0.2),
        0 0 0 1px rgba(239, 68, 68, 0.1) inset;
}

.outside-auth .alert-warning {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    border-left: 4px solid #f59e0b;
}

.outside-auth .alert-info {
    background: linear-gradient(135deg, #e8edff 0%, #dbeafe 100%);
    color: #1e40af;
    border-left: 4px solid #2F55D4;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Dark theme alerts */
@media (prefers-color-scheme: dark) {
    .outside-auth .alert-success {
        background: rgba(16, 185, 129, 0.15);
        color: #6ee7b7;
    }
    
    .outside-auth .alert-danger {
        background: rgba(239, 68, 68, 0.15);
        color: #fca5a5;
    }
    
    .outside-auth .alert-warning {
        background: rgba(245, 158, 11, 0.15);
        color: #fcd34d;
    }
    
    .outside-auth .alert-info {
        background: rgba(47, 85, 212, 0.15);
        color: #93c5fd;
    }
}

/* ============================================
   TEXT STYLES
   ============================================ */

.outside-auth .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

.outside-auth .auth-card .text-muted {
    color: #64748b !important;
}

@media (prefers-color-scheme: dark) {
    .outside-auth .auth-card .text-muted {
        color: rgba(255, 255, 255, 0.6) !important;
    }
}

.outside-auth h1,
.outside-auth h2,
.outside-auth h3,
.outside-auth h4,
.outside-auth h5,
.outside-auth h6 {
    color: #ffffff;
    font-weight: 700;
    margin-bottom: var(--em-spacing-md, 1rem);
    line-height: 1.3;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    letter-spacing: -0.02em;
}

.outside-auth h1 {
    font-size: 2.5rem;
    color: #ffffff;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    animation: none !important;
}

/* Only apply gradient text to h1 outside cards, and only if not in auth-card */
.outside-auth > h1:not(.auth-card h1) {
    /* Keep simple white text, no gradient */
    color: #ffffff;
}

.outside-auth .auth-card h1,
.outside-auth .auth-card h2,
.outside-auth .auth-card h3,
.outside-auth .auth-card h4,
.outside-auth .auth-card h5,
.outside-auth .auth-card h6 {
    color: #111827;
    background: none !important;
    -webkit-background-clip: unset !important;
    -webkit-text-fill-color: unset !important;
    background-clip: unset !important;
    animation: none !important;
    text-shadow: none;
}

@media (prefers-color-scheme: dark) {
    .outside-auth .auth-card h1,
    .outside-auth .auth-card h2,
    .outside-auth .auth-card h3,
    .outside-auth .auth-card h4,
    .outside-auth .auth-card h5,
    .outside-auth .auth-card h6 {
        color: rgba(255, 255, 255, 0.95);
    }
}

.outside-auth p {
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
}

.outside-auth .auth-card p {
    color: #374151;
    line-height: 1.7;
}

@media (prefers-color-scheme: dark) {
    .outside-auth .auth-card p {
        color: rgba(255, 255, 255, 0.85);
    }
}

.outside-auth a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    transition: color 0.2s ease;
}

.outside-auth a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Forgot password link - visible and styled */
.forgot-password-link {
    color: #2F55D4 !important;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9375rem;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
}

.forgot-password-link:hover {
    color: #2544b0 !important;
    background: rgba(47, 85, 212, 0.1);
    transform: translateY(-1px);
    text-decoration: none;
}

.forgot-password-link:focus {
    outline: 2px solid #2F55D4;
    outline-offset: 2px;
}

.forgot-password-link i {
    font-size: 0.875rem;
}

@media (prefers-color-scheme: dark) {
    .forgot-password-link {
        color: #3b82f6 !important;
    }
    
    .forgot-password-link:hover {
        color: #60a5fa !important;
        background: rgba(37, 99, 235, 0.15);
    }
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-white-50 {
    color: rgba(255, 255, 255, 0.5) !important;
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.75) !important;
}

.fs-sm {
    font-size: 0.875rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .outside-auth {
        padding: var(--em-spacing-md, 1rem);
    }
    
    .auth-card,
    .login-card,
    .reset-card {
        border-radius: 16px;
        padding: var(--em-spacing-lg, 1.5rem) !important;
    }
    
    .outside-auth .btn-lg {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .outside-auth {
        padding: var(--em-spacing-sm, 0.5rem);
    }
    
    .auth-card,
    .login-card,
    .reset-card {
        padding: var(--em-spacing-md, 1rem) !important;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

/* Focus visible for keyboard navigation */
.outside-auth *:focus-visible {
    outline: 2px solid #2F55D4;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip link */
.visually-hidden-focusable:focus {
    position: absolute;
    z-index: 10000;
    padding: 0.5rem 1rem;
    background: #2F55D4;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
}

/* ============================================
   2FA SPECIFIC STYLES
   ============================================ */

.two-factor-icon {
    width: 90px;
    height: 90px;
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 50%, #2563eb 100%);
    background-size: 200% 200%;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    box-shadow: 
        0 12px 40px rgba(47, 85, 212, 0.5),
        0 0 60px rgba(37, 99, 235, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    animation: fadeInDown 0.8s cubic-bezier(0.4, 0, 0.2, 1), iconPulse 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
}

.two-factor-icon::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
    animation: iconShine 4s ease-in-out infinite;
}

@keyframes iconPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 
            0 12px 40px rgba(47, 85, 212, 0.5),
            0 0 60px rgba(37, 99, 235, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 
            0 16px 50px rgba(47, 85, 212, 0.6),
            0 0 80px rgba(37, 99, 235, 0.4);
    }
}

@keyframes iconShine {
    0%, 100% {
        transform: translate(-50%, -50%) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) rotate(180deg);
        opacity: 0.5;
    }
}

.two-factor-icon i {
    color: #ffffff;
    font-size: 2rem;
}

.otp-input-group {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 1.75rem 0 0.5rem;
}

.otp-input {
    width: 56px;
    height: 64px;
    text-align: center;
    font-size: 1.75rem;
    font-weight: 700;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.95);
    transition: all 0.2s ease;
}

.otp-input:focus {
    outline: none;
    border-color: #2F55D4;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 
        0 0 0 4px rgba(47, 85, 212, 0.3),
        0 8px 24px rgba(47, 85, 212, 0.25),
        0 0 40px rgba(37, 99, 235, 0.15);
    transform: translateY(-4px) scale(1.05);
    border-width: 3px;
    animation: inputPulse 2s ease-in-out infinite;
}

@keyframes inputPulse {
    0%, 100% {
        box-shadow: 
            0 0 0 4px rgba(47, 85, 212, 0.3),
            0 8px 24px rgba(47, 85, 212, 0.25),
            0 0 40px rgba(37, 99, 235, 0.15);
    }
    50% {
        box-shadow: 
            0 0 0 6px rgba(47, 85, 212, 0.4),
            0 12px 32px rgba(47, 85, 212, 0.35),
            0 0 60px rgba(37, 99, 235, 0.25);
    }
}

@media (prefers-color-scheme: dark) {
    .otp-input {
        background: rgba(30, 41, 59, 0.4);
        border-color: rgba(255, 255, 255, 0.15);
        color: rgba(255, 255, 255, 0.95);
    }
    .otp-input:focus {
        background: rgba(30, 41, 59, 0.6);
        border-color: #2F55D4;
    }
}

.btn-primary-2fa {
    background: linear-gradient(135deg, #2F55D4 0%, #202942 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(47, 85, 212, 0.35);
    transition: all 0.2s ease;
}

.btn-primary-2fa:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 
        0 16px 40px rgba(47, 85, 212, 0.5),
        0 0 60px rgba(37, 99, 235, 0.3);
    filter: brightness(1.1);
    color: #fff;
    background: linear-gradient(135deg, #2544b0 0%, #4f46e5 50%, #151d33 100%);
}

.btn-danger-2fa {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    border: none;
    color: #fff;
    font-weight: 600;
    padding: 0.75rem 2rem;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(239, 68, 68, 0.25);
    transition: all 0.2s ease;
}

.btn-danger-2fa:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 
        0 16px 40px rgba(239, 68, 68, 0.5),
        0 0 60px rgba(239, 68, 68, 0.3);
    filter: brightness(1.15);
    color: #fff;
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
}

.authenticator-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    background: rgba(47, 85, 212, 0.15);
    border: 2px solid rgba(47, 85, 212, 0.3);
    border-radius: 12px;
    color: rgba(255, 255, 255, 0.95);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    margin: 1rem 0;
}

.authenticator-link:hover {
    background: rgba(37, 99, 235, 0.3);
    border-color: #2563eb;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 
        0 12px 32px rgba(47, 85, 212, 0.3),
        0 0 40px rgba(37, 99, 235, 0.2);
    color: #ffffff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* 2FA overrides for em-login-card context */
.em-login-card .otp-input {
    width: 44px;
    height: 56px;
    font-size: 1.5rem;
    background: #f8fafc;
    color: #1e293b;
    border-color: #cbd5e1;
    transform: none;
    box-shadow: none;
}
.em-login-card .otp-input:focus {
    border-color: #2563eb;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    transform: none;
}
.em-login-card .authenticator-link {
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.25);
    color: #2563eb;
}
.em-login-card .authenticator-link:hover {
    background: rgba(37, 99, 235, 0.15);
    border-color: #2563eb;
    color: #2563eb;
}
.em-login-card .two-factor-icon {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: #eff6ff;
    margin: 0 auto 1rem;
    box-shadow: none;
}
.em-login-card .two-factor-icon::before {
    display: none;
}
.em-login-card .two-factor-icon i {
    color: #2563eb;
    font-size: 1.5rem;
    text-shadow: none;
    filter: none;
}

/* ============================================
   FAQ SPECIFIC STYLES
   ============================================ */

/* FAQ Category Cards */
.outside-auth .card {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    position: relative;
    overflow: hidden;
}

.outside-auth .card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s ease;
}

.outside-auth .card:hover::before {
    left: 100%;
}

.outside-auth .card:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-8px) scale(1.03);
    box-shadow: 
        0 20px 60px rgba(0, 0, 0, 0.3),
        0 0 40px rgba(47, 85, 212, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.4);
}

.outside-auth .card-title {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
}

/* FAQ Accordion */
.outside-auth .accordion-button {
    background: rgba(255, 255, 255, 0.08) !important;
    border: none;
    border-radius: 12px !important;
    color: rgba(255, 255, 255, 0.95) !important;
    font-weight: 600;
    padding: 1rem 1.25rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.outside-auth .accordion-button::before {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.outside-auth .accordion-button:hover::before {
    left: 100%;
}

.outside-auth .accordion-button:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.outside-auth .accordion-button:not(.collapsed) {
    background: rgba(255, 255, 255, 0.12) !important;
    color: rgba(255, 255, 255, 1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.outside-auth .accordion-button:focus {
    box-shadow: 0 0 0 4px rgba(47, 85, 212, 0.25);
    border-color: transparent;
}

.outside-auth .accordion-body {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 0 0 12px 12px;
    color: rgba(255, 255, 255, 0.9);
    padding: 1.25rem;
}

.outside-auth .accordion-item {
    border: none;
    margin-bottom: 0.75rem;
}

/* ============================================
   MODAL STYLES - Modern v2.0 Design
   ============================================ */

#generalMessageModal .modal-dialog {
    max-width: 520px;
    margin: 1.25rem auto;
}

#generalMessageModal .modal-content {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
        0 8px 32px rgba(47, 85, 212, 0.15);
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: modalEntrance 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalEntrance {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media (prefers-color-scheme: dark) {
    #generalMessageModal .modal-content {
        background: rgba(17, 24, 39, 0.95);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: 
            0 25px 80px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(255, 255, 255, 0.05) inset,
            0 8px 32px rgba(47, 85, 212, 0.2);
    }
}

#generalMessageModal .modal-header {
    background: #ffffff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom: 1px solid #f1f5f9;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
}

#generalMessageModal .modal-title {
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.125rem;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    line-height: 1.2;
}

#generalMessageModal .btn-close {
    opacity: 0.6;
    filter: none;
    transition: all 0.18s ease;
    margin: 0;
    padding: 0.5rem;
    align-self: center;
    border-radius: 8px;
}

#generalMessageModal .btn-close:hover {
    opacity: 1;
    background: rgba(15, 23, 42, 0.06);
}

/* Subtle tinted header per message type — color encodes intent without shouting */
#generalMessageModal #generalMessageModalHeader.bg-primary {
    background: #eff6ff;
}

#generalMessageModal #generalMessageModalHeader.bg-primary .modal-title i {
    color: #2563eb;
}

#generalMessageModal #generalMessageModalHeader.bg-danger {
    background: #fef2f2;
}

#generalMessageModal #generalMessageModalHeader.bg-danger .modal-title i {
    color: #dc2626;
}

#generalMessageModal #generalMessageModalHeader.bg-warning {
    background: #fffbeb;
}

#generalMessageModal #generalMessageModalHeader.bg-warning .modal-title i {
    color: #d97706;
}

#generalMessageModal #generalMessageModalHeader.bg-success {
    background: #ecfdf5;
}

#generalMessageModal #generalMessageModalHeader.bg-success .modal-title i {
    color: #059669;
}

#generalMessageModal #generalMessageModalHeader.bg-info,
#generalMessageModal #generalMessageModalHeader.bg-info- {
    background: #f0f9ff;
}

#generalMessageModal #generalMessageModalHeader.bg-info .modal-title i,
#generalMessageModal #generalMessageModalHeader.bg-info- .modal-title i {
    color: #0284c7;
}

#generalMessageModal .modal-body {
    padding: 1.5rem;
    color: #111827;
    line-height: 1.7;
    font-size: 1rem;
}

@media (prefers-color-scheme: dark) {
    #generalMessageModal .modal-body {
        color: rgba(255, 255, 255, 0.95);
        background: rgba(17, 24, 39, 0.95);
    }
}

#generalMessageModal .modal-footer {
    border-top: 1px solid #f1f5f9;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    padding: 0.875rem 1.5rem;
    background: #ffffff;
}

@media (prefers-color-scheme: dark) {
    #generalMessageModal .modal-footer {
        border-top-color: rgba(255, 255, 255, 0.1);
        background: rgba(17, 24, 39, 0.95);
    }
}

#generalMessageModal .modal-footer .btn {
    border-radius: 10px;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    transition: all 0.18s ease;
}

#generalMessageModal .modal-footer .btn-secondary {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
}

@media (prefers-color-scheme: dark) {
    #generalMessageModal .modal-footer .btn-secondary {
        background: rgba(107, 114, 128, 0.2);
        border-color: rgba(107, 114, 128, 0.3);
        color: rgba(255, 255, 255, 0.9);
    }
}

#generalMessageModal .modal-footer .btn-secondary:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #cbd5e1;
}

#generalMessageModal .modal-footer .btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: none;
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.20);
}

#generalMessageModal .modal-footer .btn-primary:hover {
    box-shadow: 0 6px 18px rgba(37, 99, 235, 0.30);
    filter: brightness(1.05);
}

/* Modal backdrop */
.modal-backdrop {
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-backdrop.show {
    opacity: 1;
}

/* Contact and Terms Modals - Modern v2.0 Design */
#modal-block-contact_us .modal-dialog,
#modal-block-payment_terms .modal-dialog {
    max-width: 600px;
    margin: 1.25rem auto;
}

#modal-block-payment_terms .modal-dialog {
    max-width: 700px;
}

#modal-block-contact_us .modal-content,
#modal-block-payment_terms .modal-content {
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(255, 255, 255, 0.2) inset,
        0 8px 32px rgba(47, 85, 212, 0.15);
    overflow: hidden;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    animation: modalEntrance 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
    #modal-block-contact_us .modal-content,
    #modal-block-payment_terms .modal-content {
        background: rgba(17, 24, 39, 0.95);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: 
            0 25px 80px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(255, 255, 255, 0.05) inset,
            0 8px 32px rgba(47, 85, 212, 0.2);
    }
}

#modal-block-contact_us .modal-header,
#modal-block-payment_terms .modal-header {
    background: #ffffff;
    border-top-left-radius: 24px;
    border-top-right-radius: 24px;
    border-bottom: 1px solid #f1f5f9;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
}

#modal-block-contact_us .modal-title,
#modal-block-payment_terms .modal-title {
    font-weight: 700;
    letter-spacing: -0.01em;
    font-size: 1.125rem;
    color: #0f172a;
    margin: 0;
    display: flex;
    align-items: center;
    line-height: 1.2;
    padding: 0;
}

#modal-block-contact_us .modal-title i,
#modal-block-payment_terms .modal-title i {
    color: #2563eb;
}

#modal-block-contact_us .btn-close,
#modal-block-payment_terms .btn-close {
    opacity: 0.6;
    filter: none;
    transition: all 0.18s ease;
    margin: 0;
    padding: 0.5rem;
    align-self: center;
    border-radius: 8px;
}

#modal-block-contact_us .btn-close:hover,
#modal-block-payment_terms .btn-close:hover {
    opacity: 1;
    background: rgba(15, 23, 42, 0.06);
}

#modal-block-contact_us .modal-body,
#modal-block-payment_terms .modal-body {
    padding: 1.5rem;
    color: #111827;
    line-height: 1.7;
    font-size: 0.9375rem;
    max-height: 60vh;
    overflow-y: auto;
}

@media (prefers-color-scheme: dark) {
    #modal-block-contact_us .modal-body,
    #modal-block-payment_terms .modal-body {
        color: rgba(255, 255, 255, 0.95);
        background: rgba(17, 24, 39, 0.95);
    }
}

#modal-block-contact_us .modal-body a,
#modal-block-payment_terms .modal-body a {
    color: #2F55D4;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.2s ease;
}

#modal-block-contact_us .modal-body a:hover,
#modal-block-payment_terms .modal-body a:hover {
    color: #2544b0;
    text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
    #modal-block-contact_us .modal-body a,
    #modal-block-payment_terms .modal-body a {
        color: #3b82f6;
    }
    
    #modal-block-contact_us .modal-body a:hover,
    #modal-block-payment_terms .modal-body a:hover {
        color: #60a5fa;
    }
}

#modal-block-contact_us .contact-info p,
#modal-block-payment_terms .terms-content p {
    margin-bottom: 1rem;
}

#modal-block-contact_us .modal-footer,
#modal-block-payment_terms .modal-footer {
    border-top: 1px solid #f1f5f9;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
    padding: 0.875rem 1.5rem;
    background: #ffffff;
}

@media (prefers-color-scheme: dark) {
    #modal-block-contact_us .modal-footer,
    #modal-block-payment_terms .modal-footer {
        border-top-color: rgba(255, 255, 255, 0.1);
        background: rgba(17, 24, 39, 0.95);
    }
}

#modal-block-contact_us .modal-footer .btn,
#modal-block-payment_terms .modal-footer .btn {
    border-radius: 10px;
    font-weight: 600;
    padding: 0.5rem 1.25rem;
    transition: all 0.18s ease;
}

#modal-block-contact_us .modal-footer .btn-secondary,
#modal-block-payment_terms .modal-footer .btn-secondary {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #334155;
}

@media (prefers-color-scheme: dark) {
    #modal-block-contact_us .modal-footer .btn-secondary,
    #modal-block-payment_terms .modal-footer .btn-secondary {
        background: rgba(107, 114, 128, 0.2);
        border-color: rgba(107, 114, 128, 0.3);
        color: rgba(255, 255, 255, 0.9);
    }
}

#modal-block-contact_us .modal-footer .btn-secondary:hover,
#modal-block-payment_terms .modal-footer .btn-secondary:hover {
    background: #e2e8f0;
    color: #0f172a;
    border-color: #cbd5e1;
}

/* ============================================
   REDUCE MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   LOGIN PAGE - Premium Modern Design v2.1
   Mobile-first · WCAG 2.0 AA · Micro-interactions
   ============================================ */

/* ── Page wrapper ─────────────────────────── */

.em-login-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f8fafc;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    /* Bara vågrätt. `overflow: hidden` fanns för att de dekorativa kloten inte
       ska ge en vågrät scrollbar, men det klippte också bort allt som inte fick
       plats i höjdled — och kortet blir högt: med stängt-rutan, BankID,
       engångskod och språkraden passerar det 1000 px, mer än en bärbar skärm.
       Eftersom flexboxen centrerar blev det kortets ÖVERKANT som försvann, och
       sidan gick inte att scrolla till den. Logotyp och rubrik var alltså
       oåtkomliga med mus. `overflow-x: hidden` ensamt ger overflow-y: auto,
       så höjden scrollar igen (2026-09-16). */
    overflow-x: hidden;
    /* Safe area support for notched phones */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* Long-form pages (signup etc.) - single scroll context inside viewport-height container */
.em-login-page--scroll {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    align-items: flex-start;
    padding-top: 2rem;
    padding-bottom: 2rem;
    -webkit-overflow-scrolling: touch;
    background-attachment: fixed;
}

@media (max-width: 767.98px) {
    .em-login-page--scroll {
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* Desktop: animated gradient overlay on background image */
@media (min-width: 768px) {
    .em-login-page::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            rgba(15, 23, 42, 0.32) 0%,
            rgba(30, 58, 138, 0.22) 40%,
            rgba(37, 99, 235, 0.16) 100%
        );
        z-index: 0;
    }

    /* Scroll pages: pin gradient overlay to viewport so it doesn't scroll away */
    .em-login-page.em-login-page--scroll::before {
        position: fixed;
        pointer-events: none;
    }
}

/* Mobile: clean white, no background image */
@media (max-width: 767.98px) {
    .em-login-page {
        background-image: none !important;
        background-color: #ffffff;
        align-items: flex-start;
        padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom) 0;
    }
}

/* ── Decorative floating orbs (desktop only) ── */

.em-login-orb {
    display: none;
}

@media (min-width: 768px) {
    .em-login-orb {
        display: block;
        position: absolute;
        border-radius: 50%;
        pointer-events: none;
        z-index: 0;
        filter: blur(80px);
        opacity: 0;
        animation: emOrbFadeIn 1.5s ease 0.6s forwards;
    }

    .em-login-orb--1 {
        width: 400px;
        height: 400px;
        background: rgba(59, 130, 246, 0.15);
        top: -10%;
        left: -5%;
        animation: emOrbFadeIn 1.5s ease 0.6s forwards, emOrbFloat1 18s ease-in-out infinite 2s;
    }

    .em-login-orb--2 {
        width: 300px;
        height: 300px;
        background: rgba(139, 92, 246, 0.12);
        bottom: -8%;
        right: -3%;
        animation: emOrbFadeIn 1.5s ease 0.9s forwards, emOrbFloat2 22s ease-in-out infinite 2.5s;
    }

    .em-login-orb--3 {
        width: 200px;
        height: 200px;
        background: rgba(14, 165, 233, 0.10);
        top: 60%;
        left: 15%;
        animation: emOrbFadeIn 1.5s ease 1.2s forwards, emOrbFloat3 15s ease-in-out infinite 3s;
    }
}

@keyframes emOrbFadeIn {
    to { opacity: 1; }
}

@keyframes emOrbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 15px) scale(0.95); }
}

@keyframes emOrbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(-25px, 20px) scale(1.08); }
    66% { transform: translate(15px, -25px) scale(0.97); }
}

@keyframes emOrbFloat3 {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(20px, -15px); }
}

/* ── Wrapper ──────────────────────────────── */

.em-login-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 410px;
    padding: 1rem 1rem 5rem;
}

/* Centreringen ligger här i stället för att bara komma från förälderns
   align-items: center. Auto-marginaler centrerar likadant men lämnar
   överkanten nåbar när kortet är högre än fönstret; align-items gör den inte
   det. Se kommentaren i .em-login-page.

   Undantar --scroll-sidorna (signup m.fl.): de toppställer sitt innehåll med
   flit, och auto-marginaler skulle centrera ett kort formulär i stället. */
.em-login-page:not(.em-login-page--scroll) > .em-login-wrapper {
    margin: auto;
}

@media (max-width: 767.98px) {
    .em-login-wrapper {
        max-width: 100%;
        padding: 1.5rem 1.25rem 2rem;
    }
}

/* ── Card ─────────────────────────────────── */

.em-login-card {
    background: #ffffff;
    border-radius: 24px;
    padding: 2rem;
    position: relative;
    opacity: 0;
    transform: translateY(12px) scale(0.99);
    animation: emLoginCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

@keyframes emLoginCardIn {
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Desktop: elevated card on an opaque surface, frostat glas i ringen runtom
   2026-09-16: kortet låg på rgba(255, 255, 255, 0.88) med backdrop-blur, så 12 %
   av föreningens egen bakgrundsbild slog igenom textytan. Varenda dämpad färg i
   det här blocket är uträknad mot vitt (se kommentarerna "WCAG AA: x:1 on
   white") och den förutsättningen gällde alltså inte på desktop. Mätt mot ett
   gräsgrönt foto blev kortytan ~#eef4e8 och #64748b landade på 4,25:1; mot ett
   mörkt foto 3,85:1 — båda under AA:s 4,5. Bilden väljs av föreningen, så ingen
   alfanivå håller för hela färgrymden (css.md). Ytan är därför opak och
   frostningen flyttad till ringen utanför kortet, där ingen text står. */
@media (min-width: 768px) {
    .em-login-card {
        background: #ffffff;
        box-shadow:
            0 30px 90px rgba(15, 23, 42, 0.28),
            0 10px 40px rgba(15, 23, 42, 0.12),
            0 0 0 1px rgba(15, 23, 42, 0.05);
    }

    .em-login-card::before {
        content: '';
        position: absolute;
        inset: -14px;
        z-index: -1;
        border-radius: 34px;
        background: rgba(255, 255, 255, 0.26);
        border: 1px solid rgba(255, 255, 255, 0.4);
        backdrop-filter: saturate(160%) blur(20px);
        -webkit-backdrop-filter: saturate(160%) blur(20px);
        pointer-events: none;
    }
}

/* Mobile: flat, full-width, native-app feel */
@media (max-width: 767.98px) {
    .em-login-card {
        border-radius: 0;
        box-shadow: none;
        padding: 1.5rem 0.5rem;
    }
}

/* Small phones */
@media (max-width: 374.98px) {
    .em-login-card {
        padding: 1.25rem 0.25rem;
    }
}

/* ── Staggered entrance animations ───────── */

.em-stagger {
    opacity: 0;
    transform: translateY(10px);
    animation: emStaggerIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.em-stagger--1 { animation-delay: 0.15s; }
.em-stagger--2 { animation-delay: 0.25s; }
.em-stagger--3 { animation-delay: 0.35s; }
.em-stagger--4 { animation-delay: 0.50s; }
.em-stagger--5 { animation-delay: 0.60s; }
.em-stagger--6 { animation-delay: 0.70s; }

@keyframes emStaggerIn {
    to { opacity: 1; transform: translateY(0); }
}

/* Lock in visible state after entrance animation completes */
.em-login-card.em-animated {
    opacity: 1;
    transform: none;
    animation: none;
}

.em-stagger.em-animated {
    opacity: 1;
    transform: none;
    animation: none;
}

/* Shake on error with red ring (only when card is already visible) */
.em-login-card.em-animated.shake {
    animation: emLoginShake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97);
    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.3), 0 20px 60px rgba(0, 0, 0, 0.15);
}

@keyframes emLoginShake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); }
    20%, 40%, 60%, 80% { transform: translateX(6px); }
}

/* ── Logo ─────────────────────────────────── */

.em-login-logo {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.em-login-logo:hover {
    transform: scale(1.04);
}

.em-login-logo:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 4px;
    border-radius: 8px;
}

.em-login-logo img {
    max-height: 76px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
}

@media (max-width: 576px) {
    .em-login-logo img {
        max-height: 80px;
    }
}

/* ── Title ────────────────────────────────── */

.em-login-title {
    text-align: center;
    font-size: 1.625rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 0.25rem;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.em-login-subtitle {
    text-align: center;
    color: #475569; /* WCAG AA: 6.06:1 on white */
    font-size: 0.9375rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
}

/* ── Input groups ─────────────────────────── */

.em-input-group {
    position: relative;
}

.em-input-wrapper {
    position: relative;
}

/* ── Form labels with icons ───────────────── */

.em-login-card .form-label {
    color: #374151;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.em-label-icon {
    color: #94a3b8;
    font-size: 0.8125rem;
    transition: color 0.2s ease;
}

/* Highlight label icon when input is focused */
.em-input-wrapper:focus-within ~ .form-label .em-label-icon,
.em-input-group:focus-within .em-label-icon {
    color: #2563eb;
}

/* ── Form fields ──────────────────────────── */

.em-login-card .form-control {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    min-height: 48px;
    width: 100%;
}

.em-login-card .form-control::placeholder {
    color: #94a3b8;
}

.em-login-card .form-control:focus {
    background: #ffffff;
    border-color: #2563eb;
    color: #0f172a;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04);
    outline: none;
}

.em-login-card .form-control:not(:placeholder-shown) {
    color: #0f172a;
    background: #ffffff;
}

/* Valid state with animated checkmark */
.em-login-card .form-control.is-valid {
    border-color: #10b981;
    background: #ffffff;
    padding-right: 2.75rem;
}

.em-login-card .form-control.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.em-input-check {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%) scale(0);
    color: #10b981;
    font-size: 0.875rem;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.form-control.is-valid ~ .em-input-check {
    transform: translateY(-50%) scale(1);
}

/* Autofill fix */
.em-login-card .form-control:-webkit-autofill,
.em-login-card .form-control:-webkit-autofill:hover,
.em-login-card .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #0f172a;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    box-shadow: 0 0 0px 1000px #ffffff inset;
    background-color: #ffffff;
}

/* Invalid state */
.em-login-card .form-control.is-invalid {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.em-login-card .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.em-login-card .invalid-feedback {
    font-size: 0.8125rem;
    color: #dc2626;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ── Caps Lock warning ────────────────────── */

.em-capslock-warning {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: #d97706;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 0.375rem 0.625rem;
    margin-top: 0.375rem;
    animation: emSlideDown 0.2s ease;
}

.em-capslock-warning[hidden] {
    display: none;
}

@keyframes emSlideDown {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Password toggle (WCAG: 44px touch target) ── */

.em-password-toggle {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    /* #94a3b8 gav 2,58:1 mot vitt — under WCAG 1.4.11:s 3:1 för ikoner som bär
       betydelse. Ögat är sidans enda sätt att visa lösenordet. */
    color: #64748b;
    background: transparent;
    border: none;
    padding: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, background-color 0.15s ease;
    min-width: 44px;
    min-height: 44px;
}

.em-password-toggle:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
}

.em-password-toggle:active {
    transform: translateY(-50%) scale(0.9);
}

.em-password-toggle:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.em-password-toggle[aria-pressed="true"] {
    color: #2563eb;
}

/* ── Remember me ──────────────────────────── */

.em-remember-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.em-remember-wrapper input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    border: 1.5px solid #d1d5db;
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    outline: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.em-remember-wrapper input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg) scale(0);
    transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.em-remember-wrapper input[type="checkbox"]:checked {
    background: #2563eb;
    border-color: #2563eb;
}

.em-remember-wrapper input[type="checkbox"]:checked::after {
    transform: translate(-50%, -55%) rotate(45deg) scale(1);
    animation: emCheckBounce 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes emCheckBounce {
    0% { transform: translate(-50%, -55%) rotate(45deg) scale(0); }
    60% { transform: translate(-50%, -55%) rotate(45deg) scale(1.15); }
    100% { transform: translate(-50%, -55%) rotate(45deg) scale(1); }
}

.em-remember-wrapper input[type="checkbox"]:hover {
    border-color: #94a3b8;
}

.em-remember-wrapper input[type="checkbox"]:focus-visible {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.em-remember-wrapper label {
    color: #475569; /* WCAG AA: 6.06:1 on white */
    font-size: 0.875rem;
    cursor: pointer;
    font-weight: 400;
    line-height: 1;
    user-select: none;
    margin: 0;
}

/* ── Forgot password ──────────────────────── */

.em-forgot-link {
    color: #2563eb;
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s ease;
    white-space: nowrap;
    padding: 0.25rem 0;
}

.em-forgot-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.em-forgot-link:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── Primary button with state transitions ── */

.em-btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    color: #ffffff;
    border: none;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.8125rem 1.5rem;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    min-height: 50px;
    position: relative;
    overflow: hidden;
}

.em-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35), 0 2px 6px rgba(0, 0, 0, 0.08);
    color: #ffffff;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.em-btn-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

.em-btn-primary:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px;
}

.em-btn-primary:disabled,
.em-btn-primary.btn-loading {
    opacity: 0.7;
    pointer-events: none;
    transform: none;
}

.em-btn-primary .fa,
.em-btn-primary .fas,
.em-btn-primary .far {
    color: #ffffff;
}

/* Button state management */
.em-btn-content,
.em-btn-loading,
.em-btn-success {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.em-btn-loading,
.em-btn-success {
    display: none;
}

.em-btn-primary.is-loading .em-btn-content { display: none; }
.em-btn-primary.is-loading .em-btn-loading { display: flex; }

.em-btn-primary.is-success .em-btn-content { display: none; }
.em-btn-primary.is-success .em-btn-success { display: flex; }
.em-btn-primary.is-success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35) !important;
}

/* Custom spinner */
.em-spinner {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(255, 255, 255, 0.3);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: emSpin 0.6s linear infinite;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

@keyframes emSpin {
    to { transform: rotate(360deg); }
}

/* Spinner variant for use on light/overlay backgrounds */
.em-spinner--overlay {
    border-color: rgba(37, 99, 235, 0.2);
    border-top-color: #2563eb;
}

/* ── BankID button ────────────────────────── */

.em-btn-bankid {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #0f172a;
    font-weight: 600;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    transition: all 0.2s ease;
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.em-btn-bankid:hover {
    background: #f8fafc;
    border-color: #1e3a8a;
    color: #1e3a8a;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.10);
    transform: translateY(-1px);
}

.em-btn-bankid:active {
    transform: translateY(0);
}

.em-btn-bankid:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ── Outline button (kept for compatibility) ── */

.em-btn-outline {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #374151;
    font-weight: 500;
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    transition: all 0.2s ease;
    min-height: 50px;
}

.em-btn-outline:hover {
    background: #f8fafc;
    border-color: #2563eb;
    color: #2563eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.em-btn-outline:active {
    transform: translateY(0);
}

.em-btn-outline:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ── Ghost button (low-weight tertiary action, e.g. signup on login) ── */

.em-btn-ghost {
    background: rgba(37, 99, 235, 0.07);
    border: 1px solid rgba(37, 99, 235, 0.18);
    color: #1d4ed8;
    font-weight: 600;
    font-size: 0.9375rem;
    padding: 0.625rem 1.5rem;
    border-radius: 10px;
    transition: all 0.18s ease;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.em-btn-ghost:hover {
    background: rgba(37, 99, 235, 0.13);
    color: #1e40af;
    border-color: rgba(37, 99, 235, 0.30);
    transform: translateY(-1px);
}

.em-btn-ghost:active {
    background: rgba(37, 99, 235, 0.18);
    transform: translateY(0);
}

.em-btn-ghost:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ── Secondary button ─────────────────────── */

.em-btn-secondary {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    color: #374151;
    font-weight: 500;
    font-size: 0.9375rem;
    padding: 0.6875rem 1.5rem;
    border-radius: 12px;
    transition: all 0.2s ease;
    min-height: 48px;
}

.em-btn-secondary:hover {
    background: #f8fafc;
    border-color: #2563eb;
    color: #2563eb;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.em-btn-secondary:active {
    transform: translateY(0);
}

.em-btn-secondary:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ── Signup prompt (replaces 'eller' separator on login) ── */

.em-signup-prompt {
    text-align: center;
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 0.75rem;
    margin-bottom: 0.5rem;
}

/* ── Separator ────────────────────────────── */

.em-separator {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0.75rem 0;
}

.em-separator::before,
.em-separator::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, #e2e8f0, transparent);
}

.em-separator span {
    color: #64748b; /* WCAG AA: 4.62:1 on white */
    font-size: 0.8125rem;
    font-weight: 400;
    white-space: nowrap;
    text-transform: lowercase;
}

/* ── OTC link ─────────────────────────────── */

.em-otc-link {
    color: #64748b;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.em-otc-link:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
}

.em-otc-link:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ── Trust badge ──────────────────────────── */

.em-trust-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin-top: 1.25rem;
    padding: 0.5rem 0;
    color: #94a3b8;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 0.01em;
}

.em-trust-badge i {
    color: #10b981;
    font-size: 0.8125rem;
}

/* ── Footer ───────────────────────────────── */

.em-login-footer {
    text-align: center;
    padding-top: 1.25rem;
    margin-top: 1.5rem;
    border-top: 1px solid #f1f5f9;
}

.em-footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
}

.em-footer-links a {
    color: #64748b; /* WCAG AA: 4.62:1 on white */
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 400;
    transition: color 0.15s ease;
    padding: 0.375rem 0.25rem;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.em-footer-links a:hover {
    color: #374151;
}

.em-footer-links a:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 4px;
}

.em-footer-links span {
    color: #9ca3af;
    font-size: 0.75rem;
}

.em-branding {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

.em-branding img {
    opacity: 0.4;
    transition: opacity 0.2s ease;
}

.em-branding:hover img {
    opacity: 0.6;
}

.em-branding span {
    color: #6b7280; /* WCAG AA: ~5.0:1 on white */
    font-size: 0.75rem;
}

/* ── Alert within login card ──────────────── */

.em-login-card .alert-warning {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    color: #92400e;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
}

/* ── Inline login error alert ─────────────── */

.em-login-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-left: 4px solid #ef4444;
    border-radius: 12px;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    animation: emAlertSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    position: relative;
}

.em-login-alert[hidden] {
    display: none;
}

@keyframes emAlertSlideIn {
    from {
        opacity: 0;
        transform: translateY(-8px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Dismiss animation */
.em-login-alert.is-dismissing {
    animation: emAlertSlideOut 0.25s ease forwards;
}

@keyframes emAlertSlideOut {
    to {
        opacity: 0;
        transform: translateY(-6px) scale(0.98);
    }
}

.em-login-alert__icon {
    color: #ef4444;
    font-size: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

.em-login-alert__content {
    flex: 1;
    min-width: 0;
}

.em-login-alert__title {
    display: block;
    color: #991b1b;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.125rem;
}

.em-login-alert__message {
    display: block;
    color: #b91c1c;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
}

.em-login-alert__close {
    background: none;
    border: none;
    color: #b91c1c;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    flex-shrink: 0;
    transition: background-color 0.15s ease, color 0.15s ease;
    margin: -0.125rem -0.25rem 0 0;
}

.em-login-alert__close:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #991b1b;
}

.em-login-alert__close:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

/* ── Success alert (password reset, etc.) ─── */

.em-auth-success {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-left: 4px solid #10b981;
    border-radius: 12px;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    color: #065f46;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
}

.em-auth-success__icon {
    color: #10b981;
    font-size: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

/* ── Back link ───────────────────────────── */

.em-back-link {
    color: #64748b; /* WCAG AA: 4.62:1 on white */
    font-weight: 500;
    font-size: 0.875rem;
    text-decoration: none;
    transition: color 0.15s ease;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

.em-back-link:hover {
    color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
}

.em-back-link:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

/* ── Loading state ────────────────────────── */

.em-login-card .btn-loading {
    pointer-events: none;
    opacity: 0.8;
}

/* ============================================
   SIGNUP PAGE - Premium Modern Design
   Extends login design system · Same tokens
   ============================================ */

/* ── Signup wrapper ──────────────────────── */

.em-signup-wrapper {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 620px;
    padding: 2rem 1rem;
}

@media (max-width: 767.98px) {
    .em-signup-wrapper {
        max-width: 100%;
        padding: 1.5rem 1.25rem 2rem;
    }
}

/* ── Signup card ─────────────────────────── */

.em-signup-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 2.5rem 2rem;
    position: relative;
    opacity: 0;
    transform: translateY(12px) scale(0.99);
    animation: emLoginCardIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

/* Desktop: elevated card with glassmorphism */
@media (min-width: 768px) {
    .em-signup-card {
        box-shadow:
            0 25px 80px rgba(0, 0, 0, 0.18),
            0 8px 32px rgba(0, 0, 0, 0.08),
            0 0 0 1px rgba(255, 255, 255, 0.08),
            inset 0 1px 0 rgba(255, 255, 255, 0.5);
        backdrop-filter: saturate(150%) blur(20px);
        -webkit-backdrop-filter: saturate(150%) blur(20px);
        background: rgba(255, 255, 255, 0.97);
    }
}

/* Mobile: flat, full-width, native-app feel */
@media (max-width: 767.98px) {
    .em-signup-card {
        border-radius: 0;
        box-shadow: none;
        padding: 1.5rem 0.5rem;
    }
}

/* Small phones */
@media (max-width: 374.98px) {
    .em-signup-card {
        padding: 1.25rem 0.25rem;
    }
}

/* Lock in visible state after entrance animation completes */
.em-signup-card.em-animated {
    opacity: 1;
    transform: none;
    animation: none;
}

/* ── Signup form fields (mirrors login card) ── */

.em-signup-card .form-label {
    color: #374151;
    font-weight: 500;
    font-size: 0.875rem;
    margin-bottom: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.em-signup-card .form-control {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    min-height: 48px;
    width: 100%;
}

.em-signup-card .form-control::placeholder {
    color: #94a3b8;
}

.em-signup-card .form-control:focus {
    background: #ffffff;
    border-color: #2563eb;
    color: #0f172a;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04);
    outline: none;
}

.em-signup-card .form-control:not(:placeholder-shown) {
    color: #0f172a;
    background: #ffffff;
}

.em-signup-card .form-control.is-valid {
    border-color: #10b981;
    background: #ffffff;
    padding-right: 2.75rem;
}

.em-signup-card .form-control.is-valid:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.em-signup-card .form-control.is-invalid {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.em-signup-card .form-control.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.em-signup-card .invalid-feedback {
    font-size: 0.8125rem;
    color: #dc2626;
    margin-top: 0.375rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.em-signup-card .form-select {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    color: #0f172a;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 10px;
    padding: 0.75rem 1rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
    min-height: 48px;
    width: 100%;
}

.em-signup-card .form-select:focus {
    background: #ffffff;
    border-color: #2563eb;
    color: #0f172a;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12), 0 1px 2px rgba(0, 0, 0, 0.04);
    outline: none;
}

.em-signup-card .form-select.is-invalid {
    border-color: #ef4444;
    background-color: #fef2f2;
}

.em-signup-card .form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* Autofill fix */
.em-signup-card .form-control:-webkit-autofill,
.em-signup-card .form-control:-webkit-autofill:hover,
.em-signup-card .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: #0f172a;
    -webkit-box-shadow: 0 0 0px 1000px #ffffff inset;
    box-shadow: 0 0 0px 1000px #ffffff inset;
    background-color: #ffffff;
}

/* ── Signup checkbox / radio inputs ──────── */

.em-signup-card .form-check-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    min-width: 1.25rem;
    border: 1.5px solid #d1d5db;
    background: #ffffff;
    cursor: pointer;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    outline: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.em-signup-card .form-check-input[type="checkbox"] {
    border-radius: 5px;
}

.em-signup-card .form-check-input[type="radio"] {
    border-radius: 50%;
}

.em-signup-card .form-check-input:checked {
    background: #2563eb;
    border-color: #2563eb;
}

.em-signup-card .form-check-input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 45%;
    left: 50%;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translate(-50%, -55%) rotate(45deg) scale(1);
}

.em-signup-card .form-check-input[type="radio"]:checked::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: #ffffff;
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

.em-signup-card .form-check-input:hover {
    border-color: #94a3b8;
}

/* Minimum 44x44px touch target for checkboxes/radios (WCAG 2.5.5) */
.em-signup-card .form-check-input::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
}

.em-signup-card .form-check-input:focus-visible {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.em-signup-card .form-check-input.is-invalid {
    border-color: #ef4444;
}

.em-signup-card .form-check-label {
    color: #475569;
    font-size: 0.875rem;
    cursor: pointer;
    font-weight: 400;
    line-height: 1.4;
    user-select: none;
    margin: 0;
}

/* ── Section title ───────────────────────── */

.em-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #0f172a;
    margin-top: 2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

/* ── Two-column form row ─────────────────── */

.em-form-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 576px) {
    .em-form-row {
        flex-direction: row;
    }

    .em-form-row > * {
        flex: 1;
        min-width: 0;
    }
}

/* ── Membership selection cards ──────────── */

.em-membership-card {
    background: #f8fafc;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.em-membership-card:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

.em-membership-card.is-selected {
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.04);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.em-membership-card__check {
    display: none;
    color: #2563eb;
}

.em-membership-card.is-selected .em-membership-card__check {
    display: inline-flex;
}

.em-membership-card:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}

.em-membership-card + .em-membership-card {
    margin-top: 0.75rem;
}

.em-membership-card__content {
    flex: 1;
    min-width: 0;
}

.em-membership-card__header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.em-membership-card__header strong {
    color: #0f172a;
    font-size: 1rem;
}

.em-membership-card__price {
    color: #2563eb;
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
}

.em-membership-card__detail {
    color: #64748b;
    font-size: 0.8125rem;
    margin-bottom: 0.25rem;
}

.em-membership-card__total {
    color: #0f172a;
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 0.375rem;
}

.em-membership-card__meta {
    color: #64748b;
    font-size: 0.8125rem;
    margin-bottom: 0.125rem;
}

.em-membership-card__desc {
    color: #475569;
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* ── Family member section ───────────────── */

.em-family-section {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    margin-top: 1.5rem;
}

.em-family-member {
    padding: 1rem 0;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 0.75rem;
}

.em-family-member:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

/* ── Form help text ──────────────────────── */

.em-form-help {
    color: #64748b; /* WCAG AA: 4.62:1 on white */
    font-size: 0.8125rem;
    margin-bottom: 0.5rem;
    line-height: 1.4;
}

/* ── Radio group ─────────────────────────── */

.em-radio-group {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 0.25rem;
}

/* ── Danger button (remove family member) ── */

.em-btn-danger {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #dc2626;
    font-weight: 500;
    font-size: 0.8125rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: all 0.15s ease;
    min-height: 44px;
}

.em-btn-danger:hover {
    background: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
}

.em-btn-danger:focus-visible {
    outline: 2px solid #ef4444;
    outline-offset: 2px;
}

/* ── Terms box ───────────────────────────── */

.em-terms-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
}

.em-terms-box__title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
}

.em-terms-box__title i {
    color: #2563eb;
}

.em-terms-box a {
    color: #2563eb;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.em-terms-box a:hover {
    color: #1d4ed8;
}

/* ── Cookie policy / informational content ── */

.em-cookies-content {
    color: #334155;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.em-cookies-content section + section {
    margin-top: 1.5rem;
}

.em-cookies-content h2 {
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.em-cookies-content h3 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #0f172a;
    margin-top: 1rem;
    margin-bottom: 0.375rem;
}

.em-cookies-content p {
    margin: 0 0 0.75rem;
}

.em-cookies-content p:last-child {
    margin-bottom: 0;
}

.em-cookies-content ul {
    padding-left: 1.25rem;
    margin: 0 0 0.5rem;
}

.em-cookies-content li {
    margin-bottom: 0.25rem;
}

/* ── Compact pre-submit summary ──────────── */

.em-submit-summary {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 0.875rem 1.125rem;
}

.em-submit-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: #0f172a;
    font-size: 0.9375rem;
    font-weight: 500;
}

.em-submit-summary__total strong {
    color: #2563eb;
    font-size: 1.125rem;
    font-weight: 700;
}

.em-submit-summary__note {
    color: #64748b;
    font-size: 0.8125rem;
    margin: 0.5rem 0 0;
    line-height: 1.4;
}

/* ── Loading overlay ─────────────────────── */

.em-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Verification notice ─────────────────── */

.em-verification-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-left: 4px solid #f59e0b;
    border-radius: 12px;
    padding: 0.875rem 1rem;
    margin-bottom: 1.25rem;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    animation: emAlertSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) 0.3s forwards;
    position: relative;
}

.em-verification-notice__icon {
    color: #f59e0b;
    font-size: 1.125rem;
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

.em-verification-notice__content {
    flex: 1;
    min-width: 0;
}

.em-verification-notice__title {
    display: block;
    color: #92400e;
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 0.125rem;
}

.em-verification-notice__message {
    display: block;
    color: #b45309;
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.4;
}

/* ── Reduced motion ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .em-login-card,
    .em-signup-card,
    .em-stagger {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .em-login-card.shake {
        animation: none !important;
    }

    .em-login-orb {
        display: none !important;
    }

    .em-login-logo,
    .em-btn-primary,
    .em-btn-bankid,
    .em-btn-outline,
    .em-btn-secondary,
    .em-password-toggle,
    .em-forgot-link,
    .em-otc-link,
    .em-input-check,
    .em-remember-wrapper input[type="checkbox"]::after,
    .em-remember-wrapper input[type="checkbox"]:checked::after,
    .em-capslock-warning,
    .em-btn-bankid-device,
    .em-login-alert,
    .em-login-alert__close,
    .em-back-link,
    .em-membership-card,
    .em-btn-danger,
    .em-verification-notice,
    .em-signup-card .form-control,
    .em-signup-card .form-select,
    .em-signup-card .form-check-input,
    .em-loading-overlay {
        transition: none !important;
        animation: none !important;
    }

    .em-verification-notice {
        opacity: 1 !important;
        transform: none !important;
    }

    .em-spinner {
        animation: emSpin 1.5s linear infinite !important;
    }
}