/*
 * Page-specific styles for the registration surface. Shared chrome (.paper,
 * .bar, .gap, :root vars) lives in forum.css; this adds the labelled form-row
 * layout plus the section headers / inline radio + checkbox groupings, in the
 * same glossy 2000s-Discuz idiom as the other auth pages.
 */

.formwrap{max-width:680px; margin:0 auto}

.aform{padding:6px 18px 14px}

.sect{margin:10px -18px 4px; padding:5px 18px; font-weight:bold; font-size:12px; color:var(--cat-text);
     border-top:1px solid var(--cat-edge); border-bottom:1px solid var(--cat-edge);
     background:linear-gradient(to bottom, var(--cat-top) 0%, #D2DDEB 50%, #E1E9F4 75%, var(--cat-bot) 100%);
     box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}

.frow{display:flex; align-items:flex-start; padding:7px 0; border-bottom:1px solid var(--rule)}
.frow > label{flex:none; width:150px; padding-top:3px; font-weight:bold; color:#13386b; font-size:12px}
.frow .fin{flex:1; min-width:0; padding-top:1px}
.frow .req{color:#c00; font-weight:bold}

.aform input[type=text],
.aform input[type=password],
.aform select,
.aform textarea{
  font-family:inherit; font-size:12px; padding:3px 5px;
  border:1px solid #b9c4d6; background:#fff; border-radius:2px; vertical-align:middle}
.aform input[type=text]:focus,
.aform input[type=password]:focus,
.aform select:focus,
.aform textarea:focus{border-color:#5C84BE; outline:none; box-shadow:0 0 0 2px rgba(92,132,190,.18)}
.aform textarea{width:96%}

.inl{margin-right:16px; font-weight:normal; color:#000}
.blk{display:block; margin:2px 0; font-weight:normal; color:#000}

.cmt{margin-left:6px; font-size:11px; color:var(--muted)}

.fsubmit{padding:16px 0 4px; text-align:center}

.btn{display:inline-block; color:#003366; font-weight:bold; font-size:12px; text-decoration:none;
     padding:5px 22px; border:1px solid #6699cc; border-radius:2px; line-height:1.4; cursor:pointer;
     background:linear-gradient(to bottom,#fbfdff,#dceafd); box-shadow:inset 0 1px 0 #fff}
.btn:hover{background:linear-gradient(to bottom,#fff,#e8f1fe); text-decoration:none}

/* Step wizard: numbered stepper, show/hide panels, per-step navigation. The
   w-prefixed names avoid colliding with the global .panel rule in forum.css. */
.wsteps{display:flex; align-items:center; margin:0 -18px 8px; padding:14px 16px;
        border-bottom:1px solid var(--rule); background:#f6f9fd}
.wstep{display:flex; align-items:center; gap:7px; flex:none}
.wstep .wnum{width:24px; height:24px; border-radius:50%; background:#cdd8ea; color:#fff;
             display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:12px}
.wstep .wnm{font-weight:bold; color:#9aa6bb; font-size:12px; white-space:nowrap}
.wstep.active .wnum{background:linear-gradient(#7BA0D0,#5C84BE); box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.wstep.active .wnm{color:#13386b}
.wstep.done .wnum{background:#3aa15a}
.wstep.done .wnm{color:#33506f}
.wconn{flex:1; height:2px; background:#cdd8ea; margin:0 10px}
.wconn.done{background:#9ccfae}

.wpanel{display:none}
.wpanel.show{display:block}

.rules{padding:4px 2px 14px; font-size:12px; color:#444; line-height:1.9}

.ghead{padding:14px 0; display:flex; flex-direction:column; align-items:center; gap:12px; border-bottom:1px solid var(--rule)}

.wnav{display:flex; align-items:center; gap:10px; padding:16px 0 4px}
.wnav .r{margin-left:auto; display:flex; gap:10px}
.pbtn{display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 24px; box-sizing:border-box;
      border:1px solid #3f6aa6; border-radius:3px; color:#fff; font-weight:bold; font-size:13px; font-family:inherit; cursor:pointer; text-decoration:none;
      background:linear-gradient(to bottom,#7BA0D0,#5C84BE); box-shadow:inset 0 1px 0 rgba(255,255,255,.4); text-shadow:0 1px 0 rgba(0,0,0,.15)}
.pbtn:hover{background:linear-gradient(to bottom,#86abd9,#5e8ac5); text-decoration:none}
.sbtn{display:inline-flex; align-items:center; justify-content:center; height:32px; padding:0 20px; box-sizing:border-box;
      border:1px solid #9fc0e8; border-radius:3px; color:#13386b; font-weight:bold; font-size:13px; font-family:inherit; cursor:pointer; text-decoration:none;
      background:linear-gradient(#fbfdff,#dceafd); box-shadow:inset 0 1px 0 #fff}
.sbtn:hover{background:linear-gradient(#fff,#e8f1fe); text-decoration:none}

/* ===== mobile: stack form label above field ===== */
@media (max-width:700px){
  .aform{padding:12px 14px}
  .frow{flex-direction:column}
  .frow > label{width:auto; padding-top:0; margin-bottom:3px}
}