/* ════════════════════════════════════════════════════════════
   OXCART — Register Page Styles
   Extends css/login.css — only overrides and additions here.
   ════════════════════════════════════════════════════════════ */

/* ── Brand heading variant (BUILD. SHOWCASE. GROW.) ─────── */
.reg-heading {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  line-height: 1.05;
  margin-bottom: 32px;
}

/* ── Wider form wrap for more fields ─────────────────────── */
.reg-form-wrap {
  max-width: 420px;
}

/* ── Username public preview hint ────────────────────────── */
.field-hint {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  margin-top: 6px;
  min-height: 18px;
  font-style: italic;
  transition: opacity 0.2s;
}

.field-hint:empty {
  opacity: 0;
}

/* ── Telegram description text ───────────────────────────── */
.field-desc {
  font-family: var(--font-sans);
  font-size: 0.72rem;
  color: var(--color-text-muted);
  line-height: 1.55;
  margin-top: 8px;
}

/* ── Tighter field spacing for 6-field form ─────────────── */
.register-page .field-group {
  margin-bottom: 28px;
}

.register-page .form-header {
  margin-bottom: 36px;
}

/* ── Scrollable right panel when form is tall ───────────── */
.register-page .login-panel {
  align-items: flex-start;
  padding-top: 64px;
  padding-bottom: 64px;
  overflow-y: auto;
}

/* On tall enough screens — center vertically */
@media (min-height: 900px) {
  .register-page .login-panel {
    align-items: center;
  }
}

/* ── Left panel: stay aligned center on register ─────────── */
.register-page .login-brand {
  align-items: center;
}

/* ══════════════════════════════════════════════════════════
   RESPONSIVE OVERRIDES
   ══════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
  .reg-form-wrap {
    max-width: 480px;
  }

  .register-page .login-panel {
    align-items: flex-start;
    padding-top: 52px;
  }
}

@media (max-width: 600px) {
  .reg-heading {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }

  .reg-form-wrap {
    max-width: 100%;
  }

  .register-page .field-group {
    margin-bottom: 24px;
  }
}