/* =========================================================================
   Talent Gate — MODAL ĐĂNG KÝ (popup Landing page).
   Nạp SAU landing.css nên tái dùng được các biến :root (--orange, --ink...).
   File ngoài -> KHÔNG cần escape Razor @@. Không hardcode chuỗi tiếng Việt ở đây.
   ========================================================================= */

/* ---- overlay container ---- */
.reg-modal{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  padding:24px;
}
.reg-modal.open{ display:flex; }
.reg-modal .reg-overlay{
  position:absolute; inset:0;
  background:rgba(20,23,33,.55);
  backdrop-filter:saturate(140%) blur(4px);
  opacity:0; transition:opacity .28s var(--ease,cubic-bezier(.22,.61,.36,1));
}
.reg-modal.open .reg-overlay{ opacity:1; }

/* ---- dialog ---- */
.reg-dialog{
  position:relative; z-index:1;
  width:100%; max-width:468px;
  max-height:92vh; overflow-y:auto;
  background:#fff; border-radius:18px;
  box-shadow:var(--shadow-lg,0 30px 70px rgba(20,23,33,.16));
  padding:34px 34px 28px;
  transform:translateY(18px) scale(.96); opacity:0;
  transition:transform .34s var(--ease,cubic-bezier(.22,.61,.36,1)), opacity .34s var(--ease,cubic-bezier(.22,.61,.36,1));
}
.reg-modal.open .reg-dialog{ transform:translateY(0) scale(1); opacity:1; }
@media (prefers-reduced-motion:reduce){
  .reg-modal .reg-overlay,.reg-dialog{ transition:none; }
  .reg-dialog{ transform:none; }
}

/* close (x) */
.reg-x{
  position:absolute; top:14px; right:14px;
  width:38px; height:38px; border-radius:50%;
  display:grid; place-items:center; color:var(--muted,#717784);
  transition:.2s var(--ease,ease);
}
.reg-x:hover{ background:var(--orange-soft,#FFF1EA); color:var(--orange,#F15A22); transform:rotate(90deg); }

/* ---- head ---- */
.reg-head{ text-align:center; margin-bottom:22px; }
.reg-head .reg-logo{
  width:56px; height:56px; margin:0 auto 14px;
  border-radius:14px; display:grid; place-items:center;
  background:var(--orange-soft,#FFF1EA);
}
.reg-head .reg-logo svg,.reg-head .reg-logo img{ width:34px; height:34px; }
.reg-head h2{ font-size:23px; font-weight:800; color:var(--ink,#1E2330); letter-spacing:.2px; }
.reg-head p{ margin-top:6px; font-size:14px; color:var(--muted,#717784); line-height:1.5; }

/* ---- fields ---- */
.reg-field{ margin-bottom:15px; }
.reg-field label{
  display:block; font-size:13.5px; font-weight:600;
  color:var(--slate,#4B5563); margin-bottom:7px;
}
.reg-input{
  display:flex; align-items:center; gap:10px;
  border:1.5px solid var(--line,#ECEDF0); border-radius:11px;
  padding:0 13px; height:48px; background:#fff;
  transition:border-color .2s var(--ease,ease), box-shadow .2s var(--ease,ease);
}
.reg-input .ic{ color:var(--muted,#717784); display:flex; flex:none; }
.reg-input input{
  flex:1; min-width:0; height:100%;
  border:none; outline:none; background:transparent;
  font-family:inherit; font-size:15px; color:var(--ink,#1E2330);
}
.reg-input input::placeholder{ color:#aab0bb; }
.reg-input.focused{ border-color:var(--orange,#F15A22); box-shadow:0 0 0 4px rgba(var(--brand-rgb,241,90,34),.12); }
.reg-input .reg-toggle{
  flex:none; width:32px; height:32px; border-radius:8px;
  display:grid; place-items:center; color:var(--muted,#717784);
}
.reg-input .reg-toggle:hover{ color:var(--orange,#F15A22); }
.reg-input .reg-toggle .eye-off{ display:none; }
.reg-input.show-pass .reg-toggle .eye{ display:none; }
.reg-input.show-pass .reg-toggle .eye-off{ display:block; }

/* error state */
.reg-field.invalid .reg-input{ border-color:#e5484d; box-shadow:0 0 0 4px rgba(229,72,77,.12); }
.reg-err{ display:none; margin-top:6px; font-size:12.5px; color:#e5484d; }
.reg-field.invalid .reg-err{ display:block; }
.reg-input.shake{ animation:regShake .4s var(--ease,ease); }
@keyframes regShake{ 0%,100%{transform:translateX(0)} 20%,60%{transform:translateX(-5px)} 40%,80%{transform:translateX(5px)} }

/* ---- submit ---- */
.reg-submit{
  width:100%; justify-content:center; height:50px;
  margin-top:6px; font-size:15.5px;
  position:relative; overflow:hidden; /* giữ hiệu ứng ripple (.btn của landing.js) trong nút */
}
.reg-submit .spin{
  width:18px; height:18px; border-radius:50%;
  border:2.5px solid rgba(255,255,255,.45); border-top-color:#fff;
  display:none; animation:regSpin .7s linear infinite;
}
.reg-submit.loading .spin{ display:inline-block; }
.reg-submit.loading .lbl{ opacity:.85; }
.reg-submit[disabled]{ opacity:.75; cursor:default; transform:none; }
@keyframes regSpin{ to{ transform:rotate(360deg); } }

.reg-foot{ text-align:center; margin-top:16px; font-size:14px; color:var(--muted,#717784); }
.reg-foot a{ color:var(--orange,#F15A22); font-weight:600; }
.reg-foot a:hover{ text-decoration:underline; }

/* alert lỗi tổng (server / kết nối) */
.reg-alert{
  display:none; margin-bottom:16px; padding:11px 14px;
  border-radius:10px; font-size:13.5px; line-height:1.5;
  background:#fdeceb; color:#c0322f; border:1px solid #f5c2c0;
}
.reg-alert.show{ display:block; }

/* ---- success state ---- */
.reg-success{ text-align:center; padding:8px 4px 4px; }
.reg-success .reg-check{
  width:74px; height:74px; margin:0 auto 18px;
  border-radius:50%; display:grid; place-items:center;
  background:rgba(30,107,59,.12); color:var(--green,#1E6B3B);
  animation:regPop .45s var(--ease,ease);
}
@keyframes regPop{ 0%{transform:scale(.5);opacity:0} 60%{transform:scale(1.08)} 100%{transform:scale(1);opacity:1} }
.reg-success h3{ font-size:21px; font-weight:800; color:var(--ink,#1E2330); }
.reg-success p{ margin:10px 0 22px; font-size:14.5px; color:var(--slate,#4B5563); line-height:1.6; }
.reg-success .btn{ width:100%; justify-content:center; height:48px; }

/* ---- responsive ---- */
@media (max-width:520px){
  .reg-modal{ padding:14px; }
  .reg-dialog{ padding:26px 20px 22px; border-radius:16px; }
  .reg-head h2{ font-size:21px; }
}