/* ============================================================
   auth.css — Signup, Login, Shop Setup, Install, Pick Tenant
============================================================ */

/* --- Shared base for auth pages (full-page layout) --- */
.auth-body{
  font-family:'Prompt',system-ui,sans-serif;
  background:
    radial-gradient(900px 600px at 90% 0%, rgba(var(--brand-rgb),.14), transparent 55%),
    radial-gradient(700px 500px at 0% 80%, rgba(167,139,250,.12), transparent 55%),
    #fafafa;
  color:#18181b;
  min-height:100vh;margin:0;
}

/* --- Top bar (signup/login) --- */
.top-bar{max-width:1240px;margin:0 auto;padding:22px 28px;display:flex;align-items:center;justify-content:space-between}
.top-brand{display:flex;align-items:center;gap:10px;font-weight:900;font-size:1.15rem;color:#18181b;text-decoration:none}
.top-brand .logo{
  width:36px;height:36px;border-radius:11px;
  background:linear-gradient(135deg,var(--brand),var(--brand-soft));
  display:grid;place-items:center;color:#fff;font-size:1.05rem;
  box-shadow:0 6px 16px rgba(var(--brand-rgb),.3);
}
.top-login{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 18px;border-radius:999px;
  background:#fff;border:1.5px solid rgba(0,0,0,.08);
  text-decoration:none;color:#374151;font-weight:600;font-size:13px;
  transition:.18s;
}
.top-login:hover{border-color:var(--brand);color:var(--brand)}

/* --- Hero wrapper (2 cols) --- */
.hero-wrap{max-width:1240px;margin:0 auto;padding:0 28px 60px;display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:start}
@media (max-width:992px){ .hero-wrap{grid-template-columns:1fr; gap:24px} }

/* --- Form card --- */
.form-card{
  background:#fff;border-radius:28px;
  box-shadow:0 24px 60px rgba(24,24,27,.08), 0 8px 18px rgba(24,24,27,.04);
  overflow:hidden;
}
.form-card-head{
  padding:30px 36px 22px;
  background:linear-gradient(135deg,#fff 0%, var(--brand-pale) 100%);
  border-bottom:1px solid rgba(0,0,0,.04);
}
.form-card-head .badge-free{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 12px;border-radius:999px;
  background:rgba(34,197,94,.10);color:#15803d;
  border:1px solid rgba(34,197,94,.25);
  font-size:11px;font-weight:700;letter-spacing:.3px;
  margin-bottom:10px;
}
.form-card-head h1{margin:0;font-size:1.85rem;font-weight:900;color:#18181b;line-height:1.2}
.form-card-head h1 .pop{background:linear-gradient(135deg,var(--brand),var(--brand-soft));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.form-card-head p{margin:8px 0 0;color:#6b7280;font-size:14px}
.form-card-body{padding:24px 36px 32px}

/* --- Steps --- */
.steps{display:flex;gap:10px;margin-bottom:22px;flex-wrap:wrap}
.step{flex:1;min-width:120px;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:#f4f4f5;color:#71717a;font-size:12px;font-weight:600;transition:.18s}
.step.active{background:linear-gradient(135deg,var(--brand),var(--brand-soft));color:#fff;box-shadow:0 8px 20px rgba(var(--brand-rgb),.25)}
.step.done{background:rgba(34,197,94,.18);color:#15803d}
.step .num{width:24px;height:24px;border-radius:50%;background:rgba(0,0,0,.08);color:#52525b;display:grid;place-items:center;font-weight:800;font-size:11px;flex-shrink:0}
.step.active .num{background:rgba(255,255,255,.25);color:#fff}
.step.done .num{background:rgba(34,197,94,.25);color:#15803d}

/* --- Social login buttons --- */
.social-row{display:flex;gap:10px;flex-wrap:wrap}
.social-btn{flex:1;min-width:180px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:13px 18px;border-radius:14px;font-weight:700;font-size:14px;text-decoration:none;border:1.5px solid transparent;transition:.18s}
.social-google{background:#fff;color:#3c4043;border-color:#dadce0}
.social-google:hover{background:#f8f9fa;box-shadow:0 6px 16px rgba(0,0,0,.06);transform:translateY(-1px)}
.social-line{background:#06C755;color:#fff;border-color:#06C755}
.social-line:hover{background:#05a548;box-shadow:0 8px 20px rgba(6,199,85,.3);transform:translateY(-1px)}
.divider{position:relative;text-align:center;margin:20px 0 14px;font-size:11px;color:#9ca3af;text-transform:uppercase;letter-spacing:1.5px}
.divider:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.08)}
.divider span{position:relative;background:#fff;padding:0 16px}

/* --- Fields (modern input) --- */
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:600;color:#52525b;margin-bottom:6px;letter-spacing:.2px}
.field label .req{color:#ef4444}
.field .input-wrap{position:relative}
.field .input-wrap i{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:#9ca3af;font-size:1rem;pointer-events:none}
.field input{width:100%;height:48px;padding:0 14px 0 42px;border-radius:14px;border:1.5px solid rgba(0,0,0,.10);font-family:inherit;font-size:14px;background:#fff;color:#18181b;transition:.15s}
.field input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px rgba(var(--brand-rgb),.12)}
.field input::placeholder{color:#a1a1aa}
.row2{display:grid;grid-template-columns:1.5fr 1fr;gap:12px}
@media (max-width:640px){ .row2{grid-template-columns:1fr} }
.row2-eq{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){ .row2-eq{grid-template-columns:1fr} }

/* --- Trial banner --- */
.trial-banner{margin-top:6px;padding:14px 16px;border-radius:14px;background:linear-gradient(135deg,#dcfce7 0%,#bbf7d0 100%);border:1px solid rgba(34,197,94,.30);color:#14532d;display:flex;align-items:flex-start;gap:12px;font-size:13px;line-height:1.55}
.trial-banner i{color:#16a34a;font-size:1.4rem;flex-shrink:0;margin-top:1px}

/* --- CTA --- */
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.btn-cta{flex:1;min-width:200px;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 22px;border-radius:14px;border:0;background:linear-gradient(135deg,var(--brand),var(--brand-soft));color:#fff;font-family:inherit;font-weight:800;font-size:15px;cursor:pointer;box-shadow:0 12px 30px rgba(var(--brand-rgb),.30);transition:.18s;text-decoration:none}
.btn-cta:hover{transform:translateY(-2px);box-shadow:0 16px 36px rgba(var(--brand-rgb),.40);color:#fff}
.btn-cta:active{transform:translateY(0)}
.btn-ghost{padding:15px 22px;border-radius:14px;background:#fff;border:1.5px solid rgba(0,0,0,.10);text-decoration:none;color:#52525b;font-weight:600;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.btn-ghost:hover{border-color:#52525b;color:#18181b}

/* --- Errors --- */
.err-box{padding:12px 14px;border-radius:12px;background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.25);color:#991b1b;font-size:13px;margin-bottom:14px;display:flex;align-items:center;gap:10px}

/* --- Right side panels --- */
.right-stack{display:flex;flex-direction:column;gap:18px;position:sticky;top:32px}
@media (max-width:992px){ .right-stack{position:static} }
.perks-card{background:#fff;border-radius:22px;padding:24px;box-shadow:0 12px 32px rgba(24,24,27,.06);border:1px solid rgba(0,0,0,.04)}
.perks-card h3{margin:0 0 16px;font-size:1.05rem;font-weight:800;display:flex;align-items:center;gap:8px}
.perks-card h3 i{color:var(--brand)}
.perk{display:flex;align-items:flex-start;gap:14px;padding:12px 0;border-bottom:1px dashed rgba(0,0,0,.06);font-size:13.5px;line-height:1.55}
.perk:last-child{border:0;padding-bottom:0}
.perk:first-child{padding-top:0}
.perk .ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;flex-shrink:0;background:color-mix(in srgb, var(--c, #22c55e) 14%, white);color:var(--c, #22c55e);font-size:1.05rem}
.perk b{color:#18181b;font-weight:700}
.perk .desc{color:#6b7280;font-size:12.5px;margin-top:2px}

.trust-card{background:linear-gradient(135deg,var(--brand),var(--brand-soft));border-radius:22px;padding:24px;color:#fff;box-shadow:0 16px 40px rgba(var(--brand-rgb),.28);position:relative;overflow:hidden}
.trust-card:after{content:"";position:absolute;right:-50px;bottom:-50px;width:180px;height:180px;border-radius:50%;background:rgba(255,255,255,.10)}
.trust-card h4{margin:0 0 8px;font-size:1.05rem;font-weight:800}
.trust-card p{margin:0;font-size:13px;line-height:1.6;opacity:.95;position:relative}
.trust-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px;position:relative}
.trust-tags span{padding:5px 12px;border-radius:999px;background:rgba(255,255,255,.20);font-size:11px;font-weight:700}
.help-card{background:#fff;border-radius:16px;padding:16px 18px;border:1px solid rgba(0,0,0,.06);font-size:12.5px;color:#6b7280;display:flex;align-items:center;gap:12px}
.help-card i{font-size:1.4rem;color:var(--brand)}

/* --- Footer mini --- */
.footer-mini{text-align:center;color:#9ca3af;font-size:11px;padding:24px 0 32px;letter-spacing:.5px}
.footer-mini a{color:#71717a;text-decoration:none}
.footer-mini a:hover{color:var(--brand)}

/* --- Login (gn-login) — soft mauve variant --- */
:root{
  --gn-pink: var(--brand);
  --gn-pink-soft: rgba(var(--brand-rgb),.72);
  --gn-pink-softer: rgba(var(--brand-rgb),.55);
}
body.gn-login{min-height:100vh}
.gn-login-stage{position:relative;padding:42px 14px;display:flex;justify-content:center;align-items:center;min-height:100vh;overflow:hidden}
.gn-login-stage:before{
  content:"";position:absolute;inset:-120px;
  background:
    radial-gradient(circle at 50% 18%, rgba(var(--brand-rgb),.22), transparent 52%),
    radial-gradient(circle at 18% 12%, rgba(var(--brand-rgb),.14), transparent 46%),
    radial-gradient(circle at 82% 22%, rgba(var(--brand-rgb),.10), transparent 52%);
  pointer-events:none;filter:blur(1px);opacity:.95;
}
.gn-login-stage > *{position:relative;z-index:1}
.gn-login-wrap{width:100%;max-width:640px}
.gn-login-card{border-radius:26px;overflow:hidden}
.gn-login-top{padding:26px 26px 14px;text-align:center;border-bottom:1px solid rgba(255,255,255,.08)}
.gn-login-logo{width:min(520px,100%);max-height:150px;height:auto;object-fit:contain;display:block;margin:0 auto 14px}
.gn-login-head{max-width:520px;margin:0 auto;text-align:center}
.gn-login-title{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:900;font-size:1.14rem;margin:0;letter-spacing:.2px}
.gn-login-title i{color:var(--gn-pink-soft);font-size:1.18rem;line-height:1}
.gn-login-desc{margin-top:6px;font-size:.90rem;opacity:.80;line-height:1.45}
.gn-login-body{padding:18px 26px 18px}
.gn-field-label{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;opacity:.9;margin-bottom:8px}
.gn-input-wrap{position:relative}
.gn-input-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);opacity:.75;font-size:1.05rem;pointer-events:none}
.gn-input{padding-left:44px !important;border-radius:16px !important;height:48px}
.gn-login .form-control:focus{border-color:rgba(var(--brand-rgb),.50) !important;box-shadow:0 0 0 .18rem rgba(var(--brand-rgb),.16) !important}
.gn-login-actions{margin-top:14px}
.gn-login-btn{width:100%;height:52px;border-radius:999px !important;font-weight:800;letter-spacing:.2px}
.gn-login-bottom{padding:0 26px 22px}
.gn-dev-pill{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:12px 14px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:12px;line-height:1.5;opacity:.95}
.gn-dev-pill i{color:var(--gn-pink-soft);font-size:1.05rem}
.gn-dev-brand{font-weight:900;text-decoration:none;color:inherit}

/* Login social buttons (different from signup .social-btn) */
.login-social{display:flex;flex-direction:column;gap:8px}
.login-social-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px;border-radius:14px;font-weight:700;font-size:14px;text-decoration:none;border:1.5px solid transparent;transition:.18s}
.login-social-google{background:#fff;color:#3c4043;border-color:#dadce0}
.login-social-google:hover{background:#f8f9fa}
.login-social-line{background:#06C755;color:#fff}
.login-social-line:hover{background:#05a548}
.login-social-divider{position:relative;text-align:center;margin:6px 0;font-size:12px;color:rgba(255,255,255,.5)}
.login-social-divider:before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(255,255,255,.10)}
.login-social-divider span{position:relative;background:#1a1a1a;padding:0 12px}

/* Install steps */
.install-pills{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.install-pill{flex:1;min-width:140px;padding:12px;border-radius:16px;background:rgba(var(--brand-rgb),.08);border:1px solid rgba(var(--brand-rgb),.18);text-align:center;font-size:13px;font-weight:700}
.install-pill i{display:block;font-size:1.4rem;color:var(--brand);margin-bottom:6px}
.install-pill small{display:block;font-weight:400;opacity:.7;font-size:11px;margin-top:4px}
.next-step{padding:14px 16px;border-radius:14px;background:rgba(0,0,0,.03);border:1px solid rgba(0,0,0,.06);margin-top:8px}
.next-step b{color:var(--brand)}

/* Shop setup + Signup pay (legacy) */
.step-pills{display:flex;gap:8px;margin-bottom:18px}
.step-pill{flex:1;padding:10px;border-radius:14px;background:rgba(0,0,0,.04);text-align:center;font-size:13px;font-weight:700}
.step-pill.active{background:linear-gradient(135deg,var(--brand),var(--brand-soft));color:#fff}
.step-pill.done{background:rgba(34,197,94,.18);color:#15803d}