/**
 * GeneLink – Register / Signup page styles
 * Adopts the split-panel layout from the design mockup (01-signup).
 */

.gl-register-split { display: grid; grid-template-columns: 340px 1fr; min-height: calc(100vh - 56px); }

.gl-reg-sidebar {
  background: var(--gl-accent, #2D6A4F);
  padding: 3rem 2.5rem;
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.gl-reg-sidebar::before { content: ''; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; border-radius: 50%; background: rgba(255,255,255,.07); }
.gl-reg-sidebar::after  { content: ''; position: absolute; bottom: 20px; left: -70px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,255,255,.04); }

.gl-reg-sidebar-title { font-family: 'DM Serif Display', serif; font-size: 1.9rem; color: #fff; line-height: 1.25; margin-bottom: .75rem; position: relative; z-index: 1; }
.gl-reg-sidebar-title em { font-style: italic; opacity: .7; display: block; font-size: 1.2rem; }
.gl-reg-sidebar-desc { color: rgba(255,255,255,.65); font-size: .85rem; max-width: 250px; position: relative; z-index: 1; }

.gl-reg-steps { list-style: none; margin: 0; padding: 0; margin-top: 2.5rem; display: flex; flex-direction: column; gap: 1.25rem; position: relative; z-index: 1; }
.gl-reg-step { display: flex; gap: .85rem; align-items: flex-start; }
.gl-reg-step-n { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; font-size: .72rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 3px; }
.gl-reg-step-t { color: rgba(255,255,255,.75); font-size: .82rem; }
.gl-reg-step-t strong { color: #fff; display: block; margin-bottom: .1rem; }
.gl-reg-sidebar-foot { color: rgba(255,255,255,.35); font-size: .72rem; position: relative; z-index: 1; }

.gl-reg-mobile-banner { display: none; background: var(--gl-accent, #2D6A4F); padding: 1.25rem 1rem; }
.gl-reg-mobile-banner h2 { font-family: 'DM Serif Display', serif; font-size: 1.3rem; color: #fff; margin-bottom: .25rem; }
.gl-reg-mobile-banner p { font-size: .8rem; color: rgba(255,255,255,.7); margin-bottom: .85rem; }
.gl-reg-mobile-steps { display: flex; gap: .6rem; overflow-x: auto; padding-bottom: .25rem; -webkit-overflow-scrolling: touch; }
.gl-reg-mobile-steps::-webkit-scrollbar { display: none; }
.gl-ms { background: rgba(255,255,255,.12); border-radius: 6px; padding: .55rem .8rem; flex-shrink: 0; min-width: 150px; }
.gl-ms-n { font-size: .6rem; font-weight: 600; color: rgba(255,255,255,.55); letter-spacing: .08em; text-transform: uppercase; margin-bottom: .15rem; }
.gl-ms-t { font-size: .78rem; font-weight: 600; color: #fff; margin-bottom: .1rem; }
.gl-ms-d { font-size: .7rem; color: rgba(255,255,255,.6); line-height: 1.35; }

.gl-reg-main { padding: 2.5rem 3rem; background: var(--gl-bg, #F7F6F3); }
.gl-reg-header,
.gl-fh { margin-bottom: 1.75rem; }
.gl-reg-header h2,
.gl-fh h2 { font-size: 1.7rem; margin-bottom: .35rem; }
.gl-reg-header p,
.gl-fh p { color: var(--gl-muted, #7A786F); font-size: .875rem; }

.gl-reg-submit-btn,
.gl-submit-btn { width: 100%; padding: .85rem 1.5rem; background: var(--gl-accent, #2D6A4F); color: #fff; border: none; border-radius: var(--gl-r, 8px); font-family: 'DM Sans', sans-serif; font-size: .95rem; font-weight: 500; cursor: pointer; transition: background .15s; margin-top: 1.25rem; touch-action: manipulation; }
.gl-reg-submit-btn:hover,
.gl-submit-btn:hover { background: #235840; }
.gl-reg-signin-link { text-align: center; font-size: .8rem; color: var(--gl-muted, #7A786F); margin-top: .75rem; }
.gl-reg-signin-link a { color: var(--gl-accent, #2D6A4F); text-decoration: none; font-weight: 500; }

.gl-reg-success { text-align: center; padding: 3rem 2rem; }
.gl-reg-success h2 { font-size: 1.6rem; margin-bottom: .75rem; }
.gl-reg-success p { color: var(--gl-muted, #7A786F); font-size: .9rem; }

@media (max-width: 860px) {
  .gl-register-split { grid-template-columns: 1fr; }
  .gl-reg-sidebar { display: none; }
  .gl-reg-mobile-banner { display: block; }
  .gl-reg-main { padding: 1.5rem 1.25rem; }
}
@media (max-width: 560px) {
  .gl-reg-main { padding: 1.25rem 1rem; }
  .gl-reg-header h2 { font-size: 1.4rem; }
}