/* Sign Up Page — tiffin web app */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:'Inter',sans-serif;background:#f8fafc}
:root{--primary:#4A1594;--primary-dark:#380f73;--red:#ef4444;--green:#16a34a;--border:#e5e7eb;--text:#111827;--muted:#6b7280}

/* ── Top bar ──────────────────────────────────────── */
.top-bar{display:flex;align-items:center;padding:16px;background:#f8fafc;gap:8px;position:sticky;top:0;z-index:10}
.back-btn{width:44px;height:44px;border-radius:50%;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.top-title{flex:1;text-align:center;font-size:18px;font-weight:700;color:var(--text)}
.top-spacer{width:44px;flex-shrink:0}

/* ── Content ──────────────────────────────────────── */
.content{padding:8px 20px 60px;max-width:480px;margin:0 auto;width:100%}
.page-heading{font-size:32px;font-weight:800;color:var(--text);margin-bottom:6px}
.page-sub{font-size:16px;color:var(--muted);margin-bottom:28px;line-height:1.4}

/* ── Fields ───────────────────────────────────────── */
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:600;color:#1f2937;margin-bottom:6px}
.field input,.field select{width:100%;height:46px;background:#fff;border-radius:14px;border:1.5px solid var(--border);padding:0 16px;font-size:15px;color:var(--text);font-family:inherit;outline:none;transition:border-color .15s;appearance:auto}
.field input:focus,.field select:focus{border-color:var(--primary)}
.field input.err,.field select.err{border-color:var(--red)}
.field-err{font-size:12px;color:var(--red);margin-top:4px;margin-left:2px}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:48px}
.pw-eye{position:absolute;right:14px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:#94a3b8;display:flex;padding:4px}
.pw-eye:hover{color:#475569}

/* ── Phone row ────────────────────────────────────── */
.phone-row{display:flex;gap:8px}
.phone-row select{width:110px;flex-shrink:0;padding:0 8px;font-size:14px}
.phone-row input{flex:1}

/* ── Terms ────────────────────────────────────────── */
.terms-row{display:flex;align-items:flex-start;gap:12px;margin:16px 0 6px;cursor:pointer}
.checkbox{width:22px;height:22px;border-radius:6px;border:1.5px solid #c7c7c7;flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:all .15s;margin-top:1px}
.checkbox.checked{background:var(--primary);border-color:var(--primary)}
.checkbox.err-check{border-color:var(--red)}
.terms-text{font-size:13px;color:var(--muted);line-height:1.5;flex:1}
.terms-link{color:var(--primary);font-weight:600;text-decoration:none}

/* ── Submit ───────────────────────────────────────── */
.submit-btn{width:100%;height:50px;background:var(--primary);color:#fff;border:none;border-radius:16px;font-size:16px;font-weight:700;cursor:pointer;font-family:inherit;display:flex;align-items:center;justify-content:center;gap:8px;margin-top:10px;transition:background .15s}
.submit-btn:hover{background:var(--primary-dark)}
.submit-btn:disabled{background:#9ca3af;cursor:not-allowed}
.spinner{width:20px;height:20px;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Alert ────────────────────────────────────────── */
.alert{border-radius:12px;padding:12px 16px;font-size:13px;font-weight:500;margin-bottom:16px;display:none}
.alert.err{background:#fef2f2;color:var(--red);border:1px solid #fecaca}
.alert.ok{background:#f0fdf4;color:var(--green);border:1px solid #bbf7d0}

/* ── Footer ───────────────────────────────────────── */
.footer-row{text-align:center;margin-top:28px;font-size:15px;color:var(--muted)}
.footer-row a{color:var(--primary);font-weight:700;text-decoration:none}