/* ============================================================
   tr_public.css — Tally Receipt public-facing pages (the signup
   flow: tr_signup.php, tr_signup_pack.php, tr_signup_confirm.php).
   These pages have no sidebar/topbar (no login exists yet), so
   they need their own header/back-button/responsive layout,
   separate from tally_receipt.css's logged-in-page styles.
   ============================================================ */

.tr-public-body{
  background:var(--tr-bg);
  min-height:100vh;
  padding:70px 16px 50px;
}

/* ── Back button, fixed top-left ── */
.tr-public-back{
  position:fixed;top:16px;left:16px;z-index:50;
  width:42px;height:42px;border-radius:50%;
  background:#fff;border:1.5px solid var(--tr-border);
  display:flex;align-items:center;justify-content:center;
  color:var(--tr-navy);text-decoration:none;
  box-shadow:0 2px 8px rgba(11,31,58,.08);
  transition:.15s;
}
.tr-public-back:hover{background:var(--tr-navy);color:#fff;border-color:var(--tr-navy)}
.tr-public-back svg{width:20px;height:20px}

/* ── Language toggle, fixed top-right ── */
.tr-public-lang{
  position:fixed;top:16px;right:16px;z-index:50;
}

/* ── Header: logo + title side by side ── */
.tr-public-wrap{max-width:620px;margin:0 auto}
.tr-public-header{
  display:flex;align-items:center;gap:16px;
  justify-content:center;margin-bottom:26px;
  text-align:left;
}
.tr-public-logo{
  width:58px;height:58px;border-radius:50%;object-fit:cover;flex-shrink:0;
}
.tr-public-header h1{
  font-size:22px;font-weight:900;color:var(--tr-navy);margin:0 0 4px;
}
.tr-public-header p{
  font-size:13px;color:var(--tr-text-muted);margin:0;line-height:1.4;
}

.tr-public-card{
  background:#fff;border-radius:18px;padding:26px;
  box-shadow:0 4px 20px rgba(11,31,58,.08);
}
.tr-public-card h2{font-size:18px;font-weight:800;color:var(--tr-navy);margin-bottom:10px}
.tr-public-card > p{font-size:13.5px;color:var(--tr-text-muted);margin-bottom:20px;line-height:1.5}

/* ── Step indicator (1 → 2 → 3) ── */
.tr-public-steps{
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin-bottom:18px;
}
.tr-step{
  width:30px;height:30px;border-radius:50%;
  background:#fff;border:2px solid var(--tr-border);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:800;color:var(--tr-text-faint);
  flex-shrink:0;
}
.tr-step.active{border-color:var(--tr-green);color:var(--tr-green);background:#F0FDF9}
.tr-step.done{border-color:var(--tr-green);color:#fff;background:var(--tr-green)}
.tr-step-line{width:36px;height:2px;background:var(--tr-border);flex-shrink:0}

/* ── Responsive ── */
@media(max-width:640px){
  .tr-public-body{padding:64px 12px 40px}
  .tr-public-back,.tr-public-lang{top:10px}
  .tr-public-back{left:10px;width:38px;height:38px}
  .tr-public-lang{right:10px}
  .tr-public-header{
    flex-direction:column;text-align:center;gap:10px;margin-bottom:20px;
  }
  .tr-public-header p{text-align:center}
  .tr-public-card{padding:18px;border-radius:14px}
  .tr-public-card h2{font-size:16px}
  .tr-step{width:26px;height:26px;font-size:12px}
  .tr-step-line{width:24px}
}
@media(max-width:380px){
  .tr-public-logo{width:48px;height:48px}
  .tr-public-header h1{font-size:19px}
}