/* 
 * KLTA Auth Portal Styles v12.03
 */

:root { --klta-deep-blue: #002b5c; --klta-gold: #fcc200; }

.klta-auth-container { 
    display: flex; 
    gap: 40px; 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 60px 20px; 
    justify-content: center; 
    align-items: flex-start; 
}

/* 🎯 SINGLE CARD CENTERING */
.klta-auth-container.single-card-mode {
    max-width: 550px;
}

.auth-card { flex: 1; background: #f8fafc; padding: 40px; border-radius: 20px; border: 1px solid #e2e8f0; box-sizing: border-box; }
.signup-card { background: white; border: 2px solid #e2e8f0; box-shadow: 0 20px 40px rgba(0,0,0,0.05); flex: 1.8; }

.auth-title { font-weight: 900; color: var(--klta-deep-blue); font-size: 32px; margin-bottom: 5px; }
.auth-subtitle { color: #64748b; font-size: 15px; margin-bottom: 30px; }

.auth-alert.danger { 
    background: #fee2e2; 
    color: #991b1b; 
    border: 1px solid #fecaca; 
    padding: 15px; 
    border-radius: 12px; 
    margin-bottom: 25px; 
    font-weight: 800; 
    font-size: 14px; 
    text-align: center; 
}

.form-group { margin-bottom: 20px; width: 100%; box-sizing: border-box; }
.form-group label { display: block; font-weight: 800; font-size: 11px; text-transform: uppercase; color: #475569; margin-bottom: 8px; }

.klta-form input { 
    width: 100% !important; 
    display: block !important;
    padding: 14px; 
    border: 2px solid #e2e8f0; 
    border-radius: 12px; 
    font-size: 14px; 
    box-sizing: border-box !important; 
}

.password-wrapper { position: relative; width: 100%; display: block; }
.password-wrapper input { padding-right: 45px !important; }
.toggle-password { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); color: #94a3b8; cursor: pointer; z-index: 10; font-size: 16px; }

.auth-grid-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; width: 100%; }
.auth-submit { width: 100%; padding: 18px; background: var(--klta-deep-blue); color: white; border: none; border-radius: 12px; font-weight: 900; cursor: pointer; transition: 0.3s; font-size: 15px; margin-top: 10px; }
.signup-btn { background: var(--klta-gold); color: var(--klta-deep-blue); }
.auth-link { font-size: 12px; color: var(--klta-deep-blue); font-weight: 700; text-decoration: none; }

@media (max-width: 1000px) { .klta-auth-container { flex-direction: column; } .auth-grid-row { grid-template-columns: 1fr; } }