:root {
    --brand-primary: #1D57A8;
    --brand-secondary: #4C8FD6;
    --brand-accent: #1FB7E6;
    --brand-warning: #FF8A2A;
    --brand-bg: #F3F8FD;
    --brand-text: #1C2433;
}
body { background: linear-gradient(180deg, #f7fbff 0%, var(--brand-bg) 100%); color: var(--brand-text); }
.login-page { min-height: 100vh; }
.min-vh-75 { min-height: 75vh; }
.brand-mark { font-weight: 800; font-size: 1.2rem; color: var(--brand-primary); }
.login-card { border-radius: 24px; }
.login-hero { background: linear-gradient(145deg, var(--brand-primary), var(--brand-secondary)); min-height: 100%; }
.form-control, .form-check-input { border-radius: 12px; }
.btn-primary { background: var(--brand-primary); border-color: var(--brand-primary); }
.btn-primary:hover { background: #17498b; border-color: #17498b; }
.btn-social { border-radius: 12px; padding: .9rem 1rem; font-weight: 600; }
.btn-google { background: #fff; border: 1px solid #d8e2f0; color: var(--brand-text); }
.btn-facebook { background: #1877f2; border: 1px solid #1877f2; color: #fff; }
.divider { position: relative; text-align: center; }
.divider::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #e1e8f2; }
.divider span { position: relative; background: #fff; padding: 0 1rem; color: #73839a; }
.locale-switcher a { font-size: 1.25rem; }

/* Modern social buttons with gradients and shadows */
.btn-google,
.btn-facebook {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    font-size: 1rem;
    font-weight: 500;
    border: none;
    border-radius: 2rem;
    color: white;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.btn-google {
    background: linear-gradient(135deg, #EA4335 0%, #C5221F 100%);
}

.btn-google:hover {
    background: linear-gradient(135deg, #D3382A 0%, #A81814 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    color: white;
}

.btn-facebook {
    background: linear-gradient(135deg, #4267B2 0%, #365899 100%);
}

.btn-facebook:hover {
    background: linear-gradient(135deg, #365899 0%, #2D467A 100%);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    color: white;
}

/* Optional: add a subtle active effect */
.btn-google:active,
.btn-facebook:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}