*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Segoe UI",sans-serif
}

body{
 background: linear-gradient(168deg, #ffffff 0%, #f8f8f8 20%, #f0f0f0 40%, #e8e8b5 60%, #d4e6a0 80%, #c8e0a0 100%);
 background-repeat:no-repeat;
 background-position:20% center;
 background-size:cover;
 background-attachment:fixed;
 color:#111827
}

/* Background container for the form content */
.form-container{
  max-width:1400px;
  margin:60px auto 0 auto;
  padding:30px;
  min-height:600px;
  background: linear-gradient(135deg, rgba(44, 90, 160, 0.2), rgba(30, 58, 95, 0.1));
  border:1px solid rgba(229,231,235,.6);
  border-radius:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
  -webkit-backdrop-filter:blur(6px);
  backdrop-filter:blur(6px); 
  display:flex;
  justify-content:center;
  overflow:visible;
}

.auth{
 max-width:1400px;
 margin:0 auto;
 padding:24px 18px 40px;
 min-height:calc(100vh - 100px);
 overflow:visible;
}

.auth__header{
 position:relative;
 margin-bottom:10px
}

.back{
 position:relative;
 text-decoration:none;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:10px;
 width:auto;
 padding:12px 20px;
 background:linear-gradient(135deg, #2c5aa0 0%, #1e3a5f 100%);
 border:1px solid rgba(255,255,255,0.2);
 border-radius:10px;
 box-shadow:0 3px 10px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.2);
 transition:all 0.2s ease;
 margin-bottom:20px;
 align-self:flex-start;
}

.back:hover{
 background:linear-gradient(135deg, #3d6bb0 0%, #2d4a6f 100%);
 box-shadow:0 5px 15px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.3);
 transform:translateY(-2px);
}

.back:active{
 transform:translateY(0);
 box-shadow:0 2px 5px rgba(0,0,0,0.2);
}

.back-arrow{
 color:#ffffff;
 font-size:24px;
 font-weight:bold;
 line-height:1;
 display:flex;
 align-items:center;
 justify-content:center;
 text-shadow:0 1px 2px rgba(0,0,0,0.2);
}

.back-label{
 color:#ffffff;
 font-size:1rem;
 font-weight:600;
 font-family:"Segoe UI",sans-serif;
}

.progress{
 display:flex;
 gap:10px;
 margin:28px 0 18px;
 justify-content:center
}

.progress__dot{
 flex:0 0 35%;
 height:6px;
 border-radius:999px;
 background:#e5e7eb
}

.progress__dot:last-child{display:none}

.progress__dot--active{
 background:#1e40ff
}

.brand{
 height:34px;
 margin:6px 0 10px
}

.header{
 font-size:28px;
 font-weight:600;
 line-height:1.25;
 margin:6px 0 12px;
 color:#000;
 font-family:"Segoe UI",sans-serif;
}

.form{
 display:flex;
 flex-direction:column;
 gap:14px;
 width:100%;
 max-width:100%;
}

/* Section headings inside the form (e.g., Register, Set Password) */
.section-title{
  font-size:1.5rem;
  font-weight:bold;
  color:#000000;
  text-align:center;
  margin:6px 0 4px;
  font-family:"Segoe UI",sans-serif;
}

/* Only the first section-title (Create your account) gets larger size and gap */
.form > .section-title:first-of-type{
  font-size:2rem;
  margin:-30px 0 50px;
}

.row{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:12px
}
.input_group{
 display:flex;
 flex-direction:column;
 gap:9px
}

.field__label{
 font-size:12px;
 color:#333;
 font-family:"Segoe UI",sans-serif;
 font-weight:600;
}

.nickname{
  font-size:15px;
  font-weight: 600;
  color:#333;
  margin-left:10px;
  font-family:"Segoe UI",sans-serif;
 }

.name{
  font-size:1rem;
  font-weight:600;
  color:#000000;
  margin-left:10px;
  font-family:"Segoe UI",sans-serif;
 }

.email{
 font-size:1rem;
 font-weight:600;
 color:#000000;
 margin-left:10px;
 font-family:"Segoe UI",sans-serif;
}

.age{
 font-size:1rem;
 font-weight:600;
 color:#000000;
 margin-left:10px;
 font-family:"Segoe UI",sans-serif;
}

.gender{
  font-size:1rem;
  font-weight:600;
  color:#000000;
  margin-left:10px;
  font-family:"Segoe UI",sans-serif;
 }

.position{
 font-size:1rem;
 font-weight:600;
 color:#000000;
 margin-left:10px;
 font-family:"Segoe UI",sans-serif;
}

.address{
 font-size:1rem;
 font-weight:600;
 color:#000000;
 margin-left:10px;
 font-family:"Segoe UI",sans-serif;
}


/* Horizontal divider between sections */
.form-section-divider{
  height:4px;
  background:#c7c7c7;
  border-radius:2px;
  margin:14px 0
}

.pass{
  font-size:1rem;
  font-weight:600;
  color:#000000;
  margin-left:10px;
  font-family:"Segoe UI",sans-serif;
 }

 .confirm{
  font-size:1rem;
  font-weight:600;
  color:#000000;
  margin-left:10px;
  font-family:"Segoe UI",sans-serif;
 }

/* Two-column layout */
.form-columns {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 30px;
  width: 100%;
  align-items: start;
}

.column-left,
.column-right {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.column-right .section-title {
  margin-bottom: 10px;
  margin-top: 0;
}

/* Logo container above button */
.logo-container-above-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin: 30px 0 20px 0;
}

.logo-container-above-btn .brand-richLogo {
  width: 140px;
  height: 140px;
  object-fit: contain;
}

.logo-container-above-btn .brand-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* Create account label */
.create-account-label {
  display: block;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  color: #ffffff;
  margin-bottom: 15px;
  font-family: "Segoe UI", sans-serif;
  cursor: pointer;
}

/* Vertical divider between columns */
.column-divider {
  width: 2px;
  background: #888888;
  align-self: stretch;
  margin: 0 10px;
}


.input_group input,
.input_group select,
.input_group textarea{
 width:100%;
 padding:11px 11px;
 border:1px solid #000000;
 border-radius:6px;
 background:#fff;
 font-size:1rem;
 font-family:"Segoe UI",sans-serif;
}

.input_group input:focus,
.input_group select:focus,
.input_group textarea:focus{
 outline:none;
 border-color:green;
}

.input_group textarea{
 resize:none;
 height:60px;
}

.checkbox{
 display:flex;
 align-items:center;
 gap:10px;
 color:#333;
 font-size:14px;
 font-family:"Segoe UI",sans-serif;
 font-weight:600;
}

.no-middle{
 margin-top:-4px
}

.checkbox input{
 width:18px;
 height:18px
}

.legal{
 color:#6b7280;
 font-size:14px;
 line-height:1.6;
 margin-top:2px;
 font-family:"Segoe UI",sans-serif;
 font-weight:600;
}

.legal a{
 color:#1e40ff;
 text-decoration:none
}

.btn{
 width:auto;
 max-width:75%;
 padding:16px 18px;
 border-radius:14px;
 border:1px solid transparent;
 font-weight:700;
 font-size:1.2rem;
 cursor:pointer;
 transition:background .2s,color .2s,border-color .2s;
 text-decoration:none;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 margin-top:40px;
 align-self:center;
}

.btn--primary{
 background:linear-gradient(135deg, #2c5aa0 0%, #1e3a5f 100%);
 color:#ffffff
}

.btn--outline{
 background:#ffffff;
 color:#1e40ff;
 border:2px solid #1e40ff
}

.divider{
 position:relative;
 text-align:center;
 color:#6b7280;
 margin:14px 0
}

.divider:before,
.divider:after{
 content:"";
 position:absolute;
 top:50%;
 width:35%;
 height:1px;
 background:#e5e7eb
}

.divider:before{
 left:0
}

.divider:after{
 right:0
}

.divider span{
 padding:0 8px;
 background:transparent
}

@media (max-width:960px){
 .form-columns{
  grid-template-columns:1fr;
  gap:20px;
 }
 .column-divider{
  display:none;
 }
 .form-container{
  max-width:820px;
 }
}

@media (max-width:560px){
 .row{grid-template-columns:1fr}.brand{height:30px}.title{font-size:24px}
 .form-columns{
  grid-template-columns:1fr;
 }
}


/* Placeholder state (no selection yet) */
.input_group select:invalid {
  color: #6b7280;
}

/* Actual choices in the dropdown list — must stay dark for readability */
.input_group select option {
  color: #111827;
  background-color: #ffffff;
}

.input_group select option[value=""] {
  color: #6b7280;
}

/* Once a value is chosen, label text is black (overrides :invalid gray) */
.input_group select:valid {
  color: #111827;
}

/* Inline field error message */
.field-error{color:#dc2626;font-size:12px;line-height:1.4;font-family:"Segoe UI",sans-serif;font-weight:600}

/* Simple invalid state styling */
.is-invalid{
  border-color:#dc2626 !important;
  outline:none;
  box-shadow:0 0 0 3px rgba(220,38,38,.15)
}

/* Password wrapper styling */
.password-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.password-toggle {
  position: absolute;
  right: 8px;
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  z-index: 10;
  font-size: 12px;
  font-weight: 500;
  color: #495057;
  transition: all 0.2s ease;
}

.password-toggle:hover {
  background: #e9ecef;
  border-color: #adb5bd;
}

.password-toggle:active {
  background: #dee2e6;
}

.password-icon {
  user-select: none;
}

.password-wrapper input {
  padding-right: 60px;
}

/* Password strength indicator container */
.password-strength-container {
  margin-top: 8px;
}

.password-strength-bar {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 4px;
}

.password-strength-fill {
  height: 100%;
  border-radius: 3px;
  width: 0%;
  transition: all 0.3s ease;
}

.password-strength-fill.too-short {
  width: 0%;
}

.password-strength-fill.weak {
  width: 25%;
  background: #dc2626;
}

.password-strength-fill.fair {
  width: 50%;
  background: #f59e0b;
}

.password-strength-fill.good {
  width: 75%;
  background: #3b82f6;
}

.password-strength-fill.strong {
  width: 100%;
  background: #10b981;
}

.password-strength-label {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
  font-family:"Segoe UI",sans-serif;
  font-weight:600;
}

.password-strength-label.too-short {
  color: #6b7280;
}

.password-strength-label.weak {
  color: #dc2626;
}

.password-strength-label.fair {
  color: #f59e0b;
}

.password-strength-label.good {
  color: #3b82f6;
}

.password-strength-label.strong {
  color: #10b981;
}

/* Password missing requirements */
.password-missing-requirements {
  margin-top: 8px;
  font-size: 15px;
  color: #181818;
  line-height: 1.5;
  font-weight: 600;
  font-family:"Segoe UI",sans-serif;
}

.password-missing-requirements.empty {
  display: none;
}

.missing-req-item {
  font-size: 15px;
  color: #181818;
  margin: 0;
  font-weight: 600;
  font-family:"Segoe UI",sans-serif;
}