/* Register page layout */
.fmh-reg { max-width:1100px; margin:40px auto; padding:0 20px; }

.fmh-form label{
  display:block;
  margin-bottom:14px;
  font-weight:800;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-family:"Noto Sans", sans-serif;
  color:#fff;
}

.fmh-req{ color:#ff3b3b; font-weight:900; margin-left:6px; }

.fmh-form input,
.fmh-form select,
.fmh-form textarea{
  width:100%;
  height:52px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  padding:0 14px;
  font-size:16px;
  background: rgba(34,28,16,.55);
  color:#fff;
  outline:none;
  margin-top:8px;
}

.fmh-form input::placeholder,
.fmh-form textarea::placeholder{
  color: rgba(255,255,255,.45);
}

.fmh-form input:focus,
.fmh-form select:focus,
.fmh-form textarea:focus{
  border-color: rgba(236,164,19,.9);
  box-shadow: 0 0 0 1px rgba(236,164,19,.9);
}

.fmh-form textarea{
  height:auto;
  min-height:120px;
  padding:12px 14px;
}

/* Steps */
.fmh-step{ display:none; }
.fmh-step.is-active{ display:block; }
.fmh-step-title{
  margin:0 0 16px;
  font-size:28px;
  font-family:"Newsreader", serif;
}

/* Checkbox grid */
.fmh-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px 14px;
  margin:10px 0 16px;
}
.fmh-check{
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:12px;
  padding:12px;
  background: rgba(34,28,16,.45);
  font-family:"Noto Sans", sans-serif;
  font-weight:700;
  text-transform:none;
  letter-spacing:0;
  font-size:14px;
}
.fmh-check input{ width:auto; height:auto; margin:0; }

/* Help text */
.fmh-help{
  margin: 14px 0 6px;
  font-family:"Noto Sans", sans-serif;
  color: rgba(255,255,255,.62);
  text-transform:none;
  letter-spacing:0;
  font-size:13px;
  font-weight:600;
}

/* Buttons */
.fmh-actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
}

.fmh-btn{
  border-radius:999px;
  padding:12px 16px;
  border:0;
  cursor:pointer;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:"Noto Sans", sans-serif;
  letter-spacing:.05em;
}

.fmh-btn-ghost{
  background:transparent;
  color:#fff;
}
.fmh-btn-ghost:hover{ background: rgba(255,255,255,.06); }

.fmh-btn-primary{
  background:#eca413;
  color:#181611;
  box-shadow: 0 12px 24px rgba(236,164,19,.22);
}
.fmh-btn-primary:hover{ filter: brightness(1.03); transform: translateY(-1px); }
.fmh-btn-primary:active{ transform: translateY(0); }

.fmh-submit{}

/* Skin tone cards */
.fmh-labelRow{ display:flex; align-items:center; gap:6px; margin-top:14px; }
.fmh-labelText{
  font-weight:800;
  font-size:12px;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-family:"Noto Sans", sans-serif;
}

.fmh-toneGrid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:10px;
}

.fmh-tone{
  text-align:left;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(34,28,16,.55);
  padding:14px 14px;
  border-radius:14px;
  color:#fff;
  cursor:pointer;
  transition:transform .12s ease, border-color .15s ease, background .15s ease;
}
.fmh-tone:hover{
  transform: translateY(-1px);
  border-color: rgba(236,164,19,.55);
}
.fmh-tone.is-active{
  border-color: rgba(236,164,19,.9);
  box-shadow: 0 0 0 1px rgba(236,164,19,.9);
  background: rgba(236,164,19,.08);
}

.fmh-tone__title{
  display:block;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  font-size:13px;
  margin-bottom:6px;
  font-family:"Noto Sans", sans-serif;
}
.fmh-tone__desc{
  display:block;
  font-family:"Noto Sans", sans-serif;
  font-size:13px;
  color: rgba(255,255,255,.68);
  line-height:1.4;
}

.fmh-placeholderHint{
  margin:10px 0 0;
  font-family:"Noto Sans", sans-serif;
  color: rgba(255,255,255,.55);
  font-size:13px;
}
/* ================================
   Register shell layout (missing)
   - Uses your existing colors
   ================================ */

.fmh-reg__shell{
  display:grid;
  grid-template-columns: 1fr 420px;
  gap:24px;
  align-items:stretch;
}

.fmh-reg__left{
  border-radius:18px;
  overflow:hidden;
  /* keep dark look same as inputs */
  background: rgba(34,28,16,.35);
  border:1px solid rgba(255,255,255,.08);
}

.fmh-reg__container{
  padding: 22px;
}

/* Right panel background image/overlay (no new colors, only opacity) */
.fmh-reg__right{
  border-radius:18px;
  overflow:hidden;
  background:
    linear-gradient(to top, rgba(0,0,0,.62), rgba(0,0,0,.15), transparent),
    url("https://lh3.googleusercontent.com/aida-public/AB6AXuBbUG10eJCeaDSPn5frzXBc8JX5r4tn5x0smPV6sIFK2yW5wXbcH6xABYPOM0pjB0LMT4VirJyDz_Nb-a03h6DuoF5e39WYoDKU9VGthNQ7Sh-Sn4bdyWXnwMMejHfl64xKjKNAVTehR5TtrXLzYu3otiqKerMJUmoaG_fGrLNY3LtGvfDNmldP7SM1jz1EhP9e3om1snD3D1vgRFxLpoxfRKLByySiY8HHTFAAP3eDJpZo-5Et1s2X9ZiM594Rk5ndfdbBbaRW4CU");
  background-size:cover;
  background-position:center;
  min-height: 680px;
}

/* Make form not stretch weird */
.fmh-form{
  max-width: 720px;
}

/* Select arrow (so dropdowns look nice on dark bg) */
.fmh-form select{
  appearance:none;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.55) 50%),
    linear-gradient(135deg, rgba(255,255,255,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 12px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}

/* Buttons consistent width on desktop */
.fmh-actions .fmh-btn{
  min-width: 140px;
}

/* Responsive: hide right panel on mobile */
@media(max-width:980px){
  .fmh-reg__shell{ grid-template-columns:1fr; }
  .fmh-reg__right{ display:none; }
  .fmh-reg__container{ padding: 18px; }
}


/* Responsive */
@media(max-width:768px){
  .fmh-grid{ grid-template-columns:1fr; }
  .fmh-toneGrid{ grid-template-columns:1fr; }
}