/* ============ REGISTRATION PAGE ============ */

.reveal{
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.reg-section{
  padding:150px 0 100px;
  min-height:100vh;
  position:relative;
}

.reg-section::before{
  content:'';
  position:absolute;
  top:0; left:50%;
  transform:translateX(-50%);
  width:900px; height:520px;
  background:radial-gradient(ellipse at top, rgba(79,70,229,0.16), transparent 65%);
  pointer-events:none;
  z-index:-1;
}

.reg-container{
  max-width:760px;
}

.reg-head{
  text-align:center;
  margin-bottom:40px;
}

.reg-title{
  font-size:clamp(30px, 4.2vw, 44px);
  margin-bottom:14px;
}

.reg-title .muted{ color:var(--primary-hover); }

.reg-sub{
  color:var(--text-secondary);
  font-size:16px;
  max-width:460px;
  margin:0 auto;
  line-height:1.6;
}

/* ---- Stepper ---- */
.stepper{
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:0;
  margin-bottom:32px;
}

.step-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  width:130px;
  text-align:center;
}

.step-circle{
  width:36px; height:36px;
  border-radius:50%;
  background:var(--surface);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-secondary);
  font-family:var(--font-display);
  font-weight:700;
  font-size:14px;
  transition:background-color 0.3s var(--ease), border-color 0.3s var(--ease), color 0.3s var(--ease);
  position:relative;
}

.step-check{ width:15px; height:15px; display:none; }

.step-item.active .step-circle{
  border-color:var(--primary);
  color:var(--text);
  background:rgba(79,70,229,0.14);
}

.step-item.done .step-circle{
  background:var(--primary);
  border-color:var(--primary);
  color:#fff;
}

.step-item.done .step-num{ display:none; }
.step-item.done .step-check{ display:block; }

.step-label{
  font-size:12.5px;
  color:var(--text-secondary);
  font-weight:500;
  transition:color 0.3s var(--ease);
}

.step-item.active .step-label{ color:var(--text); }

.step-connector{
  width:56px;
  height:1px;
  background:var(--border);
  margin-top:18px;
  flex-shrink:0;
}

@media (max-width:640px){
  .step-connector{ width:24px; }
  .step-item{ width:88px; }
  .step-label{ font-size:11px; }
}

/* ---- Card ---- */
.reg-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:40px;
  box-shadow:0 40px 100px -40px rgba(0,0,0,0.6);
}

.reg-page{ display:none; }
.reg-page.active{ display:block; animation:fadeSlide 0.4s var(--ease); }

@keyframes fadeSlide{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

.reg-page-head{ margin-bottom:28px; }
.reg-page-head h2{ font-size:22px; margin-bottom:6px; }
.reg-page-head p{ color:var(--text-secondary); font-size:14.5px; }

/* ---- Fields ---- */
.field-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}

.field-grid.single{ grid-template-columns:1fr; }

.field-wide{ grid-column:1 / -1; }

.field{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.field label{
  font-size:13.5px;
  font-weight:600;
  color:var(--text);
}

.field label .req{ color:var(--primary-hover); }

.field input,
.field select,
.field textarea{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-size:14.5px;
  font-family:var(--font-body);
  color:var(--text);
  transition:border-color 0.2s var(--ease), background-color 0.2s var(--ease);
  width:100%;
}

.field textarea{ resize:vertical; min-height:52px; }

.field input::placeholder,
.field textarea::placeholder{ color:#71717a; }

.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--primary-hover);
  background:#1e1e22;
}

.field select{ appearance:none; cursor:pointer;
  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='%23A1A1AA' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 14px center;
  padding-right:36px;
}

.field-hint{ font-size:12px; color:var(--text-secondary); }

.field-error{
  font-size:12.5px;
  color:#f87171;
  display:none;
}

.field.invalid input,
.field.invalid select,
.field.invalid textarea{
  border-color:#f87171;
}

.field.invalid .field-error{ display:block; }
.field.invalid .field-hint{ display:none; }

/* ---- Chips (skills preview) ---- */
.chip-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:2px;
}

.chip{
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text-secondary);
  font-size:12.5px;
  padding:5px 12px;
  border-radius:100px;
}

/* ---- Level of learning cards ---- */
.level-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.level-card{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:18px;
  cursor:pointer;
  transition:border-color 0.25s var(--ease), background-color 0.25s var(--ease), transform 0.25s var(--ease);
}

.level-card:hover{ border-color:#54545c; transform:translateY(-2px); }

.level-card input{ position:absolute; opacity:0; pointer-events:none; }

.level-radio{
  width:18px; height:18px;
  border-radius:50%;
  border:2px solid var(--border);
  flex-shrink:0;
  margin-top:2px;
  position:relative;
  transition:border-color 0.25s var(--ease);
}

.level-radio::after{
  content:'';
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%,-50%) scale(0);
  width:9px; height:9px;
  border-radius:50%;
  background:var(--primary);
  transition:transform 0.2s var(--ease);
}

.level-card input:checked ~ .level-radio{ border-color:var(--primary); }
.level-card input:checked ~ .level-radio::after{ transform:translate(-50%,-50%) scale(1); }

.level-card:has(input:checked){
  border-color:var(--primary);
  background:rgba(79,70,229,0.1);
}

.level-title{ font-size:14.5px; font-weight:600; margin-bottom:3px; }
.level-desc{ font-size:13px; color:var(--text-secondary); line-height:1.5; }

.level-error{ margin-top:14px; text-align:center; }

@media (max-width:640px){
  .level-list{ grid-template-columns:1fr; }
  .field-grid{ grid-template-columns:1fr; }
  .reg-card{ padding:26px 20px; }
}

/* ---- Actions ---- */
.reg-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-top:36px;
  padding-top:28px;
  border-top:1px solid var(--border);
}

.reg-actions #backBtn{ visibility:hidden; }
.reg-actions #backBtn.show{ visibility:visible; }

/* ---- Success ---- */
.success-block{
  text-align:center;
  padding:20px 0 8px;
}

.success-icon{
  width:64px; height:64px;
  border-radius:50%;
  background:rgba(34,197,94,0.14);
  color:var(--success);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 22px;
}

.success-icon svg{ width:28px; height:28px; }

.success-block h2{ font-size:24px; margin-bottom:10px; }
.success-block p{ color:var(--text-secondary); font-size:15px; max-width:380px; margin:0 auto; line-height:1.6; }