/* Signup page styles (matches home header + clean card layout) */

/* Tokens */
:root{
  --ink:#1f2937; --muted:#6b7280; --accent:#ff7a59; --accent-strong:#ff5a2b;
  --bg1:#fafafa; --card:#ffffff; --ring:#f2f2f2; --shadow:0 10px 30px rgba(0,0,0,0.08);
  --radius:16px; --maxw:1120px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background: linear-gradient(180deg, #ffffff, #f7f7f7);
}

/* Layout */
.su-main{ display:grid; place-items:center; padding:40px 16px 64px; }
.su-card{
  width:100%; max-width:560px;
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:28px 24px;
}

/* Headings */
.su-title{ margin:0 0 4px; font-size:28px; font-weight:800; }
.su-sub{ margin:0 0 16px; color:var(--muted); }

/* Google area */
.su-google-slot{ display:grid; gap:10px; }
.su-help{ font-size:12px; color:var(--muted); }

/* Fallback button (only shows if no client ID) */
.su-btn{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; width:100%;
  padding:12px 16px; border-radius:999px; font-weight:800; text-decoration:none;
  border:1px solid transparent; transition:filter .2s;
}
.su-btn:hover{ filter:brightness(1.03); }
.su-btn-google{ background:#fff; color:var(--ink); border:1px solid #e6e6e6; }
.su-gicon{
  display:inline-grid; place-items:center; width:20px; height:20px; border-radius:4px;
  background:#fff; color:#4285F4; font-weight:900; border:1px solid #dcdcdc;
}

/* Divider */
.su-divider{ position:relative; text-align:center; margin:16px 0; }
.su-divider::before, .su-divider::after{ content:""; display:block; height:1px; background:#eee; position:absolute; left:0; right:0; top:50%; }
.su-divider span{ position:relative; padding:0 10px; background:#fff; color:var(--muted); font-size:13px; }

/* Form */
.su-form{ display:grid; gap:10px; margin-top:6px; }
.su-label{ font-weight:700; font-size:13px; }
.su-input{
  width:100%; padding:10px 12px; border-radius:12px; border:1px solid #e6e6e6; outline:none;
}
.su-input:focus{ border-color:#d0d0d0; box-shadow:0 0 0 3px #f1f5f9; }

/* Primary CTA */
.su-btn-primary{
  background: linear-gradient(180deg, var(--accent-strong), var(--accent));
  color:#fff; box-shadow:0 12px 28px rgba(255,90,43,.35);
  margin-top:10px; border:0;
}

/* Tiny note */
.su-note{ margin:8px 0 0; font-size:13px; color:var(--muted); }
.su-note a{ color:var(--ink); font-weight:700; text-decoration:none; }
.su-note a:hover{ text-decoration:underline; }

/* Footer */
.hb-footer{ max-width:var(--maxw); margin:24px auto 40px; padding:0 24px; color:var(--muted); }

/* === Center the card text and Google button; let the button fill width up to GIS limit === */
.su-card { text-align:center; }                 /* center headings + small text */
.su-title, .su-sub, .su-note { text-align:center; }

.su-google-slot{
  display:flex;                                  /* override earlier grid */
  justify-content:center;
  align-items:center;
  width:100%;
  margin:8px 0 16px;
}

/* Keep inputs full-width and labels readable even with centered card text */
.su-form { text-align:left; margin-left:auto; margin-right:auto; }
@media (max-width: 420px){
  .su-google-slot{ padding:0 4px; }
}