/* ================= Registration (server-driven 4-step) ================= */
/* .auth-back is defined in auth.css (shared across all auth pages). */

/* Compact stepper — fits the panel on desktop without wrapping */
.reg-steps{display:flex;align-items:center;gap:6px;margin:0 0 22px}
.reg-steps__item{display:flex;align-items:center;gap:7px;flex:0 0 auto}
.reg-steps__num{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#fff;
  border:1.5px solid var(--ipiz-line);color:var(--ipiz-muted);font-weight:700;font-size:.8rem;font-family:var(--font-head);flex:none}
.reg-steps__label{font-size:.76rem;font-weight:600;color:var(--ipiz-muted);white-space:nowrap;font-family:var(--font-head)}
.reg-steps__line{flex:1 1 auto;height:2px;background:var(--ipiz-line);min-width:8px;border-radius:2px}
.reg-steps__item.is-active .reg-steps__num{background:var(--ipiz-green);border-color:var(--ipiz-green);color:#fff}
.reg-steps__item.is-active .reg-steps__label{color:var(--ipiz-green-dark)}
.reg-steps__item.is-done .reg-steps__num{background:var(--ipiz-green-soft);border-color:var(--ipiz-green);color:var(--ipiz-green)}
.reg-steps__item.is-done .reg-steps__label{color:var(--ipiz-green-dark)}
.reg-steps__line.is-done{background:var(--ipiz-green)}

/* Email context chip — shows the registering email on steps 2-4 */
.reg-email{display:inline-flex;align-items:center;gap:8px;max-width:100%;margin:-4px 0 18px;padding:8px 12px;
  background:var(--ipiz-green-soft);border:1px solid #b9e3cd;border-radius:10px;font-size:.85rem}
.reg-email__ico{color:var(--ipiz-green);display:grid;place-items:center;flex:none}
.reg-email__label{color:var(--ipiz-muted);font-weight:600;font-family:var(--font-head);flex:none}
.reg-email__val{color:var(--ipiz-green-dark);font-weight:600;word-break:break-word;overflow-wrap:anywhere}

/* Stable body height so the form does not jump between steps */
.reg-body{min-height:296px}
.reg-form{margin:0}
.reg-actions{margin-top:22px}
.reg-actions--split{display:flex;gap:12px}
.reg-actions__grow{flex:1}

/* Field-level validation */
.field-error{color:var(--ipiz-danger);font-size:.82rem;font-weight:500;margin-top:6px}
.field-error a{color:var(--ipiz-danger);font-weight:700;text-decoration:underline}
.auth-body input.is-invalid{border-color:var(--ipiz-danger);box-shadow:0 0 0 3px rgba(220,38,38,.12)}

/* Step 2 — verification note (clean single card, not a messy yellow block) */
.reg-note{background:var(--ipiz-green-soft);border:1px solid #b9e3cd;border-radius:14px;padding:16px 18px;margin-bottom:20px}
.reg-note__head{display:flex;align-items:center;gap:10px;margin-bottom:6px}
.reg-note__ico{width:30px;height:30px;border-radius:9px;background:#fff;color:var(--ipiz-green);display:grid;place-items:center;flex:none}
.reg-note__head h3{margin:0;font-size:1rem;color:var(--ipiz-green-dark)}
.reg-note p{margin:0;color:#2f4a3d;font-size:.9rem;line-height:1.5}
.reg-note__sub{margin-top:8px !important;font-size:.82rem;color:#4a6154}

/* Step 3 — selected type tick */
.type-choice__box{position:relative}
.type-choice__tick{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;
  background:var(--ipiz-green);color:#fff;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:.15s}
.type-choice input:checked + .type-choice__box .type-choice__tick{opacity:1;transform:scale(1)}

/* Step 4 — live password checklist (compact; reads as requirements, not radios) */
.pw-check{margin:10px 0 2px;background:var(--ipiz-mint);border:1px solid var(--ipiz-green-soft);border-radius:10px;padding:10px 12px}
.pw-check__title{display:block;font-family:var(--font-head);font-weight:600;font-size:.78rem;color:var(--ipiz-ink);margin-bottom:7px}
.pw-check .pw-rules{display:grid;grid-template-columns:1fr 1fr;gap:5px 14px;margin:0;padding:0}
.pw-check .pw-rules li{list-style:none;display:flex;align-items:center;gap:7px;color:var(--ipiz-muted);font-size:.78rem;line-height:1.3}
/* grey check = unmet requirement (clearly a checklist item, never a clickable control) */
.pw-check .pw-rules li::before{content:"";width:14px;height:14px;flex:none;
  background:no-repeat center / 14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b6c0ba' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}
.pw-check .pw-rules li.ok{color:var(--ipiz-success);font-weight:600}
.pw-check .pw-rules li.ok::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23006b3f' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")}

/* Confirm-password live match */
.pw-match{margin-top:8px;font-size:.82rem;font-weight:600}
.pw-match.is-ok{color:var(--ipiz-success)}
.pw-match.is-bad{color:var(--ipiz-danger)}

@media(max-width:480px){
  .reg-steps__item:not(.is-active) .reg-steps__label{display:none}
  .pw-check .pw-rules{grid-template-columns:1fr}
}

/* ---- Password reset flow (shared with register styles) ---- */
.reset-forwho{margin:-6px 0 18px;font-size:.9rem;color:var(--ipiz-muted);word-break:break-word;overflow-wrap:anywhere}
.reset-forwho strong{color:var(--ipiz-green-dark)}
.auth-success{text-align:center;padding:6px 0 2px}
.auth-success__ico{width:56px;height:56px;border-radius:50%;background:var(--ipiz-green-soft);color:var(--ipiz-green);
  display:grid;place-items:center;margin:4px auto 16px}
.auth-success .auth-title{margin-bottom:8px}
.auth-success .auth-desc{margin-bottom:22px}