@import url("auth.css");

/* ── Wider card for two-column layout ── */
.auth-card {
  text-align: right;
  animation: slideUp 0.35s ease both;
  margin-top: 15px;
  margin-bottom: 15px;
}

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

/* ── Two-column inner layout ── */
.register-layout {
  display: flex;
  gap: 32px;
  align-items: flex-start;
}
.register-form-col {
  flex: 1;
}
.register-side-col {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ── Avatar circle ── */
.avatar-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8d5b0 0%, #d4b896 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  transition:
    box-shadow 0.25s,
    transform 0.2s;
}
.avatar-circle:hover {
  box-shadow: 0 0 0 4px rgba(36, 99, 235, 0.2);
  transform: scale(1.05);
}
.avatar-circle > svg {
  width: 64px;
  height: 64px;
  fill: #9a7a56;
}

/* ── Nickname field ── */
.register-side-col .input-group label {
  font-size: 1.3rem;
}

/* ── Input fields ── */
.input-group input {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-size: 1.4rem;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
  text-align: right;
  direction: rtl;
  background-color: #fff;
}

.input-group input:focus {
  border-color: #2463eb;
  box-shadow: 0 0 0 3px rgba(36, 99, 235, 0.1);
}

/* ── Labels ── */
.input-group label {
  font-size: 1.3rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

/* ── Two-column row ── */
.input-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ── Responsive collapse ── */
@media (max-width: 768px) {
  .register-layout {
    flex-direction: column;
  }
  .register-side-col {
    width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
  }
  .avatar-wrapper {
    flex-direction: row;
  }
  .input-row {
    grid-template-columns: 1fr;
  }
}