/* =========================================================
   Timothy Academy — Register page styles
   ========================================================= */

/* wider form column, sticky brand panel */
.register-shell{
  grid-template-columns: 1fr 1.15fr;
}

.register-shell .auth-brand{
  position:sticky;
  top:0;
  height:100vh;
  align-self:start;
}

.register-shell .auth-form-wrap{
  align-items:flex-start;
  padding:40px 56px 60px;
  overflow-y:auto;
}

.register-shell .auth-card{
  max-width:560px;
  padding-top:8px;
}

/* ---------- form sections ---------- */
.form-section{
  margin-bottom:24px;
}
.form-section__title{
  font-size:12.5px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.6px;
  color:var(--blue-120);
  padding-bottom:10px;
  margin:0 0 16px;
  border-bottom:2px solid var(--blue-20);
  display:flex;
  align-items:center;
  gap:8px;
}
.form-section__title svg{
  width:16px; height:16px;
}

/* ---------- two-column row ---------- */
.field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

/* ---------- optional label ---------- */
.label-optional{
  color:var(--muted);
  font-weight:400;
  font-size:11.5px;
  margin-inline-start:5px;
}

/* ---------- hint under a field ---------- */
.field-hint{
  font-size:12px;
  color:var(--muted);
  margin-top:5px;
}

/* ---------- track radio cards ---------- */
.track-grid{
  display:grid;
  gap:10px;
}
.track-card{
  position:relative;
  cursor:pointer;
  display:block;
}
.track-card input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.track-card__inner{
  border:1.5px solid var(--line);
  background:#FBFDFF;
  border-radius:12px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.track-card__dot{
  width:20px; height:20px;
  border-radius:50%;
  border:1.5px solid var(--blue-40);
  background:#fff;
  flex:0 0 20px;
  position:relative;
  transition:border-color .15s;
}
.track-card__dot::after{
  content:'';
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:var(--blue-100);
  transform:scale(0);
  transition:transform .15s;
}
.track-card__txt{ min-width:0; }
.track-card__txt strong{
  display:block;
  font-size:15px;
  font-weight:700;
  color:var(--text);
}
.track-card__txt small{
  display:block;
  font-size:12.5px;
  color:var(--muted);
  margin-top:2px;
  line-height:1.5;
}
.track-card:hover .track-card__inner{
  border-color:var(--blue-60);
  background:#F4F9FF;
}
.track-card input:checked + .track-card__inner{
  border-color:var(--blue-100);
  background:#EEF6FF;
  box-shadow:0 0 0 4px rgba(0,119,204,.1);
}
.track-card input:checked + .track-card__inner .track-card__dot{
  border-color:var(--blue-100);
}
.track-card input:checked + .track-card__inner .track-card__dot::after{
  transform:scale(1);
}
.track-card input:focus-visible + .track-card__inner{
  box-shadow:0 0 0 4px rgba(0,119,204,.28);
}

/* ---------- notice box ---------- */
.notice{
  display:flex;
  gap:11px;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  background:var(--orange-20);
  border:1.5px solid var(--orange-40);
  color:#7A4A00;
  font-size:13.5px;
  line-height:1.6;
  margin:20px 0 22px;
}
.notice svg{
  flex:0 0 20px;
  margin-top:1px;
  color:var(--orange-120);
}
.notice strong{
  display:block;
  margin-bottom:2px;
  font-weight:800;
}

/* ---------- success state ---------- */
.success-state{
  text-align:center;
  padding:14px 0 0;
  animation:rise .5s ease both;
}
.success-state__icon{
  width:84px; height:84px;
  margin:0 auto 24px;
  border-radius:50%;
  background:linear-gradient(135deg, #2E7D32, #1B5E20);
  display:grid;
  place-items:center;
  box-shadow:0 12px 30px rgba(46,125,50,.35);
}
.success-state__icon svg{
  width:40px; height:40px;
  color:#fff;
}
.success-state h2{
  font-size:26px;
  margin:0 0 12px;
  font-weight:800;
}
.success-state > p{
  color:var(--muted);
  font-size:15px;
  margin:0 0 10px;
  line-height:1.7;
}
.success-state__meta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--blue-20);
  color:var(--blue-140);
  font-size:13px;
  font-weight:600;
  padding:8px 14px;
  border-radius:999px;
  margin:14px 0 4px;
}
.success-state__meta svg{ width:15px; height:15px; }

.success-state__actions{
  margin-top:28px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.btn-outline{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  padding:13px 18px;
  border:1.5px solid var(--line);
  background:#fff;
  border-radius:var(--radius-sm);
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  color:var(--blue-120);
  transition:background .15s, border-color .15s;
}
.btn-outline:hover{
  background:var(--blue-20);
  border-color:var(--blue-40);
}

/* ---------- responsive ---------- */
@media (max-width: 980px){
  .register-shell{
    grid-template-columns:1fr;
  }
  .register-shell .auth-form-wrap{
    padding:28px 20px 48px;
    background:
      linear-gradient(180deg, var(--blue-20) 0%, var(--surface) 30%);
  }
  .register-shell .auth-card{
    max-width:560px;
  }
  .field-row{
    grid-template-columns:1fr;
  }
}