@import 'vars.css';

body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:linear-gradient(135deg,#FFF3E8,#FFE0C0); padding:1rem; }

.register-card {
  display:flex; width:100%; max-width:900px;
  background:#fff; border-radius:20px; overflow:hidden;
  box-shadow:0 16px 48px rgba(255,107,0,.15);
}

/* Left */
.reg-left {
  width:40%; background:linear-gradient(150deg,#FF6B00,#C04400);
  padding:3rem 2rem; color:#fff; display:flex; flex-direction:column; justify-content:center;
}
.logo-icon  { font-size:3rem; margin-bottom:.75rem; }
.reg-left h2{ font-size:1.5rem; font-weight:800; margin-bottom:.5rem; }
.reg-left p { opacity:.85; font-size:.9rem; margin-bottom:2rem; line-height:1.6; }

.steps { display:flex; flex-direction:column; gap:1rem; }
.step-item { display:flex; align-items:center; gap:.75rem; }
.step-num  { width:28px; height:28px; border-radius:50%; background:rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:700; flex-shrink:0; }
.step-text { font-size:.88rem; opacity:.9; }

/* Right */
.reg-right { flex:1; padding:2.5rem 2rem; overflow-y:auto; }
.reg-right h3 { font-size:1.4rem; font-weight:800; margin-bottom:.25rem; }

.msg-box { display:none; padding:.7rem 1rem; border-radius:8px; font-size:.88rem; font-weight:500; margin-bottom:1rem; }
.msg-success { background:var(--green-light); border:1px solid #BBF7D0; color:var(--green); }
.msg-error   { background:var(--red-light);   border:1px solid #FECACA; color:var(--red); }

.input-group { display:flex; flex-direction:column; gap:.35rem; margin-bottom:.9rem; }
.input-group label { font-size:.78rem; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.input-icon-wrap { position:relative; }
.input-icon-wrap .icon { position:absolute; left:.75rem; top:50%; transform:translateY(-50%); pointer-events:none; }
.input-icon-wrap input { padding-left:2.5rem; }

.otp-row { display:flex; gap:.5rem; }
.otp-row .input-icon-wrap { flex:1; }
.btn-send-otp {
  white-space:nowrap; padding:.55rem 1rem;
  background:var(--saffron); color:#fff; border:none;
  border-radius:8px; font-weight:600; font-size:.85rem; cursor:pointer;
  transition:background .2s;
}
.btn-send-otp:hover { background:var(--saffron-dark); }
.btn-send-otp:disabled { opacity:.6; cursor:not-allowed; }

.pw-wrap { position:relative; }
.pw-wrap input { padding-right:2.5rem; }
.pw-toggle { position:absolute; right:.75rem; top:50%; transform:translateY(-50%); cursor:pointer; }

.btn-register {
  width:100%; padding:.85rem; margin-top:.5rem;
  background:linear-gradient(135deg,#FF6B00,#E05500); color:#fff;
  border:none; border-radius:10px; font-size:1rem; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center; gap:.5rem;
  transition:opacity .2s;
}
.btn-register:hover { opacity:.9; }
.btn-register:disabled { opacity:.6; }

.reg-footer { text-align:center; margin-top:1rem; font-size:.87rem; color:var(--text-muted); }
.reg-footer a { color:var(--saffron); font-weight:600; text-decoration:none; }

@media(max-width:640px) {
  .register-card { flex-direction:column; }
  .reg-left { width:100%; padding:2rem 1.5rem; }
}