/* ===========================================================================
 * SkyForj — the customer Register page in two steps (sfrg_*).
 * Colours come from the page's own text colour and the theme's primary, so
 * every sign-in card style and every workspace theme keeps its own look.
 * ======================================================================== */

/* The two old column headings are replaced by the progress row. */
#register-form.sfrg-on .register-contact-info-heading,
#register-form.sfrg-on .register-company-info-heading { display: none; }

/* ── Progress ── */
#register-form .sfrg-progress {
  padding: 0 15px;
  margin: 0 0 clamp(14px, 2.4vw, 22px);
}
#register-form .sfrg-progress-text {
  margin: 0 0 8px;
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 600;
  line-height: 1.3;
}
#register-form .sfrg-progress-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  background: color-mix(in srgb, currentColor 16%, transparent);
  overflow: hidden;
}
#register-form .sfrg-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 50%;
  border-radius: inherit;
  /* The card's own text colour: a theme's primary can be as dark as the
     card itself, and the filled part must always stand out from the track. */
  background: currentColor;
  transition: width .35s ease;
}
#register-form .sfrg-progress-steps {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  font-size: 14px;
  line-height: 1.35;
}
#register-form .sfrg-progress-steps li { opacity: .62; }
#register-form .sfrg-progress-steps li.is-current { opacity: 1; font-weight: 600; }
#register-form .sfrg-progress-steps li.is-done { opacity: .85; }
#register-form .sfrg-progress-steps li { flex: 1 1 0; text-align: center; }
#register-form .sfrg-progress-steps li:first-child { text-align: left; }
#register-form .sfrg-progress-steps li:last-child { text-align: right; }

/* ── Each step: one column, two side by side when the card has room ──
   The card body is the measured container, so the step follows the width
   of the card, not the screen. */
#register-form.sfrg-on .panel-body { container-type: inline-size; }
#register-form .sfrg-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: clamp(16px, 3vw, 28px);
  padding: 0 15px;
}
#register-form .sfrg-step[hidden],
#register-form .sfrg-step .form-group[hidden] { display: none; }
#register-form .sfrg-step > .form-group,
#register-form .sfrg-step > div[class*="register-"] {
  float: none;
  width: auto;
  margin-left: 0;
  margin-right: 0;
  /* The platform's half-width boxes carry column padding on one side only,
     which made them narrower than their neighbours. The grid gap spaces them. */
  padding-left: 0;
  padding-right: 0;
}
#register-form .sfrg-step .mtop15 { margin-top: 0; }
/* Every box a comfortable 44px to tap, on every screen. */
#register-form .sfrg-step .form-control:not(.bootstrap-select),
#register-form .sfrg-step .bootstrap-select > .dropdown-toggle { min-height: 44px; }
/* The country picker's words sit in the middle of the taller box. */
#register-form .sfrg-step .bootstrap-select > .dropdown-toggle { display: flex; align-items: center; }
#register-form .sfrg-step .bootstrap-select > .dropdown-toggle .filter-option { display: flex; align-items: center; }

/* Two columns from 560px of card width. Whole-width rows: the first
   question, the company name, the address, any extra fields and the terms. */
@container (min-width: 560px) {
  #register-form .sfrg-step { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #register-form .sfrg-step .sfrg-kind-group,
  #register-form .sfrg-step .register-company-group,
  #register-form .sfrg-step .register-saas-info-group,
  #register-form .sfrg-step .register-address-group,
  #register-form .sfrg-step .register-contact-custom-fields,
  #register-form .sfrg-step .register-company-custom-fields,
  #register-form .sfrg-step .register-terms-and-conditions-wrapper,
  #register-form .sfrg-step > :not(.form-group):not([class*="register-"]) { grid-column: 1 / -1; }
}

/* ── Buttons ── */
#register-form .sfrg-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
}
#register-form .sfrg-footer [hidden] { display: none; }
#register-form .sfrg-footer .sfrg-back { margin-right: auto; }
/* Back and Register stay side by side on a phone: each may shrink to half. */
#register-form .sfrg-footer .btn { min-height: 44px; min-width: min(120px, calc(50% - 6px)); }
#register-form .sfrg-msg { margin: 6px 0 0; }

@media (prefers-reduced-motion: reduce) {
  #register-form .sfrg-progress-fill { transition: none; }
}