/* =========================
   REGISTER PAGE – LUXURY DARK
========================= */

.register-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 20px 10px 90px;
  background:
    radial-gradient(circle at top, rgba(206, 206, 206, 0.08), transparent 60%),
    linear-gradient(180deg, #111111, #000);
}

/* BOX */
.register-box {
  width: 100%;
  max-width: 380px;
  background: rgba(20,20,20,.85);
  backdrop-filter: blur(10px);
  border-radius: 18px;
  padding: 14px;
  box-shadow:
    0 15px 40px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(255,255,255,.04);
}

/* HEADER */
.register-header {
  text-align: center;
  margin-bottom: 15px;
}

.register-logo {
  width: 200px;
  margin-bottom: 6px;
}

.register-header h3 {
  font-size: 22px;
  letter-spacing: .5px;
  color: #fff;
}

.register-header p {
  font-size: 12px;
  color: #aaa;
  opacity: .85;
}

/* INFO */
.register-info {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(245,193,108,.08);
  border: 1px solid rgba(245,193,108,.25);
  color: #f5c16c;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  margin-bottom: 12px;
}

.register-info i {
  font-size: 14px;
  margin-top: 2px;
}

/* FORM */
.register-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* INPUT */
.reg-input {
  display: flex;
  align-items: center;
  background: #1c1c1c;
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.04);
  transition: all .25s ease;
}

.reg-input i {
  color: #aaa;
  margin-right: 8px;
  font-size: 14px;
  transition: color .25s;
}

.reg-input input,
.reg-input select {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  color: #fff;
  font-size: 13px;
}

.reg-input input::placeholder {
  color: #777;
  font-size: 12px;
}

.reg-input select option {
  background: #111;
  color: #fff;
}

.reg-input:focus-within {
  background: #222;
  border-color: rgba(245,193,108,.6);
  box-shadow: 0 0 0 2px rgba(245,193,108,.15);
}

.reg-input:focus-within i {
  color: #f5c16c;
}

/* USERNAME */
.username-wrap,
.phone-wrap {
  position: relative;
}

.username-inside,
.phone-inside {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  font-weight: 600;
  pointer-events: none;
  white-space: nowrap;
}

/* STATUS */
.username-inside.loading {
  color: #999;
}

.username-inside.ok,
.phone-inside.ok {
  color: #4cd964;
}

.username-inside.error,
.phone-inside.error {
  color: #ffb347;
}

.username-wrap input {
  padding-right: 90px;
}

.phone-wrap input {
  padding-right: 70px;
}

/* PASSWORD */
.password-wrap {
  position: relative;
}

.toggle-pass {
  position: absolute;
  right: 12px;
  cursor: pointer;
}

.toggle-pass i {
  color: #777;
  transition: color .25s;
}

.toggle-pass:hover i {
  color: #f5c16c;
}

/* CAPTCHA */
.reg-captcha {
  display: flex;
  gap: 8px;
}

.cap-code {
  background: repeating-linear-gradient(
    45deg,
    #1b1b1b,
    #1b1b1b 5px,
    #222 5px,
    #222 10px
  );
  color: #fff;
  font-weight: bold;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 20px;
  letter-spacing: 3px;
  user-select: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.8);
}

.reg-captcha input {
  flex: 1;
  background: #1b1b1b;
  color: #fff;
  border-radius: 8px;
  border: none;
  padding: 8px;
}

/* TERMS */
.reg-terms {
  font-size: 11px;
  color: #aaa;
  display: flex;
  gap: 6px;
  align-items: flex-start;
}

.reg-terms input {
  accent-color: #f5c16c;
  transform: scale(1.05);
}

/* BUTTON */
.register-btn {
  margin-top: 8px;
  background: linear-gradient(135deg, #f5c16c, #cfa14a);
  border: none;
  padding: 11px;
  border-radius: 12px;
  color: #000;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 10px 25px rgba(245,193,108,.35);
  transition: all .25s ease;
}

.register-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(245,193,108,.45);
}

.register-btn:active {
  transform: scale(.98);
}

/* FOOTER */
.register-footer {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  color: #aaa;
}

.register-footer a {
  color: #d6a24f;
  font-weight: 600;
  transition: color .2s;
}

.register-footer a:hover {
  color: #ffd98a;
}