/* ============================================
   Problaq - Auth Pages (Login / Register)
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background:#f1f5f9; color:#1e293b; min-height:100vh;
  display:flex; flex-direction:column;
}

 /* Auth wrapper */
 .auth-page {
   flex:1; display:flex; align-items:center; justify-content:center;
   padding:40px 24px;
 }

.auth-card {
  background:#fff; border-radius:16px; padding:40px;
  width:100%; max-width:460px;
  box-shadow:0 4px 24px rgba(0,0,0,0.08);
  border:1px solid #e2e8f0;
}

 /* Logo */
 .auth-logo {
   display:flex; align-items:center; gap:8px; justify-content:center;
   margin-bottom:28px; text-decoration:none;
 }
 .auth-logo-icon {
   width:36px; height:36px; border-radius:8px;
   display:flex; align-items:center; justify-content:center;
   overflow: hidden;
 }
 .auth-logo-icon svg { width:24px; height:24px; }
 .auth-logo-text { font-size:1.2rem; font-weight:800; color:#1e293b; white-space:nowrap; }

.auth-title { font-size:1.5rem; font-weight:800; text-align:center; margin-bottom:6px; }
.auth-subtitle { text-align:center; color:#64748b; font-size:0.9rem; margin-bottom:28px; }

/* User type selector */
.user-type-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.user-type-option { position:relative; }
.user-type-option input[type="radio"] { position:absolute; opacity:0; width:0; height:0; }
.user-type-label {
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:16px 12px; border:2px solid #e2e8f0; border-radius:10px;
  cursor:pointer; transition:all 0.2s; text-align:center;
}
.user-type-label:hover { border-color:#14a800; background:#f0fdf4; }
.user-type-option input:checked + .user-type-label {
  border-color:#14a800; background:#f0fdf4; color:#14a800;
}
.user-type-emoji { font-size:1.6rem; }
.user-type-name { font-weight:600; font-size:0.9rem; }
.user-type-desc { font-size:0.75rem; color:#64748b; }

/* Form */
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-group { margin-bottom:16px; }
.form-group label {
  display:block; font-size:0.82rem; font-weight:600; color:#374151;
  margin-bottom:6px;
}
.form-input, .form-select {
  width:100%; padding:11px 14px; border:1px solid #e2e8f0; border-radius:8px;
  font-size:0.9rem; color:#1e293b; background:#fff; transition:border 0.2s;
  font-family:inherit;
}
.form-input:focus, .form-select:focus {
  outline:none; border-color:#14a800;
  box-shadow:0 0 0 3px rgba(20,168,0,0.08);
}
.form-input::placeholder { color:#94a3b8; }

/* Submit button */
.auth-btn {
  width:100%; padding:13px; background:#14a800; color:#fff;
  border:none; border-radius:8px; font-size:0.95rem; font-weight:700;
  cursor:pointer; transition:all 0.2s; margin-top:4px; font-family:inherit;
}
.auth-btn:hover { background:#0d8a00; transform:translateY(-1px); box-shadow:0 4px 16px rgba(20,168,0,0.25); }
.auth-btn:disabled { background:#94a3b8; cursor:not-allowed; transform:none; box-shadow:none; }

/* Alert */
.alert {
  padding:11px 14px; border-radius:8px; font-size:0.85rem;
  margin-bottom:16px; display:none;
}
.alert.show { display:block; }
.alert-error { background:#fef2f2; border:1px solid #fecaca; color:#dc2626; }
.alert-success { background:#f0fdf4; border:1px solid #bbf7d0; color:#16a34a; }

/* Divider */
.auth-divider { text-align:center; color:#94a3b8; font-size:0.85rem; margin:20px 0; position:relative; }
.auth-divider::before, .auth-divider::after {
  content:''; position:absolute; top:50%; width:42%; height:1px; background:#e2e8f0;
}
.auth-divider::before { left:0; }
.auth-divider::after { right:0; }

/* Footer link */
.auth-footer { text-align:center; margin-top:20px; font-size:0.88rem; color:#64748b; }
.auth-footer a { color:#14a800; font-weight:600; }
.auth-footer a:hover { text-decoration:underline; }

 /* Top nav bar for auth pages */
 .auth-nav {
   background:#fff; border-bottom:1px solid #e2e8f0;
   padding:0 16px; height:56px; display:flex; align-items:center;
   justify-content: center;
 }
 .auth-logo { margin-bottom: 0; }

 @media (max-width: 480px) {
   .auth-page {
     justify-content: flex-start;
     padding-top: 16px;
   }
   .auth-card { padding:20px 16px; }
   .form-row { grid-template-columns:1fr; }
   .user-type-grid { grid-template-columns:1fr; }
   .step-indicator { margin-bottom: 16px; }
   .step-dot { width: 24px; height: 24px; font-size: 0.7rem; }
   .step-line { max-width: 24px; }
   .auth-title { font-size: 1.3rem; }
   .auth-logo { gap: 6px; }
   .auth-logo-icon { width: 28px; height: 28px; }
   .auth-logo-icon svg { width: 20px; height: 20px; }
   .auth-logo-text { font-size: 1.1rem; }
   .project-template { padding: 12px; }
   .project-template-icon { font-size: 1.2rem; }
   .form-input, .form-select { font-size: 16px; /* prevent zoom on iOS */ }
 }