/* ============================================
   LOGIN.CSS — Login overlay, role selection, org form
   ============================================ */

.login-overlay { display:none; position:fixed; inset:0; z-index:200; background:rgba(10,10,14,0.55); backdrop-filter:blur(10px); align-items:center; justify-content:center; padding:24px; }
.login-overlay.show { display:flex; }

/* -- Role selection card -- */
.login-select { background:#ffffff; border-radius:24px; padding:40px; width:100%; max-width:600px; position:relative; overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.08);
    animation:slideUp 0.35s cubic-bezier(0.16,1,0.3,1); }
.login-select::before, .login-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px;
    background:linear-gradient(90deg, transparent, var(--gold), transparent); }
.role-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:8px; }
.role-card { background:#ffffff; border:1px solid var(--gray-200); border-radius:18px; padding:32px 24px; text-align:center;
    transition:border-color 0.3s ease, box-shadow 0.3s ease; cursor:default; display:flex; flex-direction:column; }
.role-card:hover { border-color:rgba(249,215,28,0.5); box-shadow:0 16px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(249,215,28,0.2); }
.role-icon { width:60px; height:60px; border-radius:18px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
    color:#c79a06; background:linear-gradient(135deg, rgba(249,215,28,0.2), rgba(249,215,28,0.05)); border:1px solid rgba(249,215,28,0.3); }
.role-icon svg { width:28px; height:28px; }
.role-icon-org { background:linear-gradient(135deg, #26262e, #14141a); border-color:rgba(249,215,28,0.25); }
.role-icon-org svg { color:var(--gold); }
.role-name { font-size:1.125rem; font-weight:700; color:var(--gray-900); margin-bottom:6px; }
.role-desc { font-size:0.8125rem; color:var(--gray-500); line-height:1.6; margin-bottom:20px; min-height:40px; }
.role-actions { display:flex; flex-direction:column; gap:8px; margin-top:auto; padding-top:4px; }
.btn-role { width:100%; margin-top:0; }

/* -- Back button -- */
.login-back { display:flex; align-items:center; gap:6px; font-size:0.8125rem; font-weight:600; color:var(--gray-500); margin-bottom:20px; transition:var(--transition); }
.login-back:hover { color:var(--gray-900); }
.login-back svg { width:16px; height:16px; }

/* -- Org login card -- */
.login-card { background:#ffffff; border-radius:24px; padding:40px; width:100%; max-width:440px; position:relative; overflow:hidden;
    box-shadow:0 30px 80px rgba(0,0,0,0.18), 0 8px 24px rgba(0,0,0,0.08);
    animation:slideUp 0.35s cubic-bezier(0.16,1,0.3,1); }
@keyframes slideUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
.login-close { position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; background:var(--gray-100); display:flex; align-items:center; justify-content:center; transition:var(--transition); }
.login-close:hover { background:var(--gray-200); }
.login-close svg { width:16px; height:16px; color:var(--gray-500); }
.login-title { font-size:1.375rem; font-weight:800; color:var(--gray-900); margin-bottom:4px; letter-spacing:-0.5px; }
.login-subtitle { font-size:0.8125rem; color:var(--gray-500); margin-bottom:24px; }

/* -- Input row (email + button) -- */
.input-row { display:flex; gap:8px; }
.input-row .form-input { flex:1; }
.btn-verify { padding:10px 16px; background:var(--gold); color:var(--gray-900); font-weight:700; font-size:0.75rem; border-radius:10px; transition:var(--transition); white-space:nowrap; }
.btn-verify:hover { background:var(--gold-hover); box-shadow:0 4px 14px rgba(249,215,28,0.35); }
.verify-group { display:none; }
.verify-hint { display:flex; align-items:center; gap:6px; font-size:0.75rem; color:var(--green); margin-top:6px; font-weight:500; }

/* -- Code inputs -- */
.code-inputs { display:flex; gap:8px; justify-content:center; }
.code-input { width:44px; height:48px; text-align:center; font-size:1.25rem; font-weight:700; border:1px solid var(--gray-200); border-radius:12px; outline:none; transition:var(--transition); }
.code-input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(249,215,28,0.25); }
/* Модал доторх бүх input — алтан focus ринг */
.login-select .form-input:focus, .login-card .form-input:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(249,215,28,0.25); }

/* -- Divider -- */
.divider { display:flex; align-items:center; gap:12px; margin:16px 0; }
.divider::before,.divider::after { content:''; flex:1; height:1px; background:var(--gray-200); }
.divider span { font-size:0.75rem; color:var(--gray-400); }

/* -- Google button -- */
.btn-sso { width:100%; padding:13px; background:#1a1a1f; border:none; color:#ffffff; font-weight:600; font-size:0.875rem; border-radius:12px; transition:all 0.2s ease; display:flex; align-items:center; justify-content:center; gap:10px; cursor:pointer; }
.btn-sso:hover { background:#000000; box-shadow:0 6px 18px rgba(0,0,0,0.25); }
.btn-sso:disabled { opacity:0.4; cursor:not-allowed; pointer-events:none; }
.btn-sso svg { stroke:#ffffff; }
.btn-google { width:100%; padding:13px; background:var(--white); border:1px solid var(--gray-200); color:var(--gray-700); font-weight:600; font-size:0.875rem; border-radius:12px; transition:all 0.2s ease; display:flex; align-items:center; justify-content:center; gap:10px; }
.btn-google:hover { background:var(--gray-50); border-color:var(--gray-300); box-shadow:var(--shadow-sm); }
.google-login-block { text-align:center; padding:20px 0 8px; }
.google-login-icon { margin-bottom:16px; }
.google-login-desc { font-size:0.8125rem; color:var(--gray-500); line-height:1.7; margin-bottom:20px; }
.register-link { text-align:center; margin-top:16px; font-size:0.8125rem; color:var(--gray-500); }
.register-link a { color:var(--gold-hover); font-weight:600; }

/* -- Dev shortcuts (Phase 2-д устгана) -- */
.dev-shortcuts { margin-top:24px; padding-top:20px; border-top:1px dashed var(--gray-200); text-align:center; }
.dev-label { font-size:0.6875rem; font-weight:600; color:var(--gray-400); text-transform:uppercase; letter-spacing:1px; margin-bottom:10px; }
.dev-btns { display:flex; gap:8px; justify-content:center; }
.dev-btn { padding:8px 20px; font-size:0.8125rem; font-weight:600; color:var(--gray-600); border:1px dashed var(--gray-300); border-radius:8px; transition:var(--transition); }
.dev-btn:hover { border-color:var(--gray-900); color:var(--gray-900); background:var(--gray-50); }

/* -- Consent checkbox -- */
.consent-row { display:flex; align-items:center; gap:8px; margin-bottom:16px; cursor:pointer; user-select:none; }
.consent-check { width:16px; height:16px; accent-color:var(--gold); cursor:pointer; flex-shrink:0; }
.consent-check:disabled { cursor:default; opacity:0.5; }
.consent-check:checked { opacity:1; }
.consent-text { font-size:0.75rem; color:var(--gray-500); line-height:1.4; }
.consent-link { color:var(--gray-900); font-weight:600; text-decoration:underline; }
.consent-link:hover { color:var(--gray-700); }

/* -- Consent modal -- */
.consent-overlay { display:none; position:fixed; inset:0; z-index:300; background:rgba(0,0,0,0.5); backdrop-filter:blur(4px); align-items:center; justify-content:center; padding:24px; }
.consent-overlay.show { display:flex; }
.consent-modal { background:var(--white); border-radius:var(--radius-xl); width:100%; max-width:520px; max-height:80vh; display:flex; flex-direction:column; box-shadow:0 20px 60px rgba(0,0,0,0.2); animation:slideUp 0.3s ease; }
.consent-modal-header { display:flex; justify-content:space-between; align-items:center; padding:24px 28px 16px; border-bottom:1px solid var(--gray-200); flex-shrink:0; }
.consent-modal-header h3 { font-size:1.125rem; font-weight:700; color:var(--gray-900); }
.consent-body { padding:24px 28px; overflow-y:auto; flex:1; }
.consent-body h4 { font-size:0.875rem; font-weight:700; color:var(--gray-900); margin:16px 0 8px; }
.consent-body h4:first-child { margin-top:0; }
.consent-body p { font-size:0.8125rem; color:var(--gray-600); line-height:1.7; margin-bottom:8px; }
.consent-footer { padding:16px 28px; border-top:1px solid var(--gray-200); flex-shrink:0; }
.consent-accept-btn { width:100%; padding:12px; font-size:0.875rem; }
.consent-accept-btn:disabled { opacity:0.4; cursor:not-allowed; }

/* -- Disabled Google/role buttons -- */
.btn-google:disabled { opacity:0.4; cursor:not-allowed; pointer-events:none; }
.btn-role:disabled { opacity:0.4; cursor:not-allowed; pointer-events:none; }

/* -- Responsive (mobile — төвд centered) -- */
@media(max-width:768px) {
    .login-overlay { padding:16px; }
    .role-grid { grid-template-columns:1fr; }
    .login-select { max-width:440px; padding:32px 24px; }
    .login-card { padding:32px 24px; }
    .code-input { width:40px; height:48px; }
    .btn-sso, .btn-google { padding:14px; }
    .role-card { padding:28px 20px; }
}