/* jQuery-free Step Form Wizard skin for MudStepper.
   Vendor themes (sky/sea/simple/circle/sun) and transitions (slide/fade/cube/none)
   are visual inspiration only — no plugin CSS, images, or JS are copied. */

.sso-step-form {
  --sso-step-duration: 420ms;
  --sso-step-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --sso-step-accent: #283d50;
  --sso-step-accent-hot: #f56b46;
  --sso-step-accent-soft: #f2f2f9;
  --sso-step-upcoming: #adb3b8;
  --sso-step-upcoming-bg: #f2f2f2;
  --sso-step-done: #36b28c;
  --sso-step-shape: 3px;
  --sso-step-icon: 30px;
  --sso-step-connector: 4px;
  --sso-step-nav-pad: 8px 0 20px;
  direction: rtl;
}

.sso-step-form.sso-step-anim-none,
.sso-step-form[data-sso-step-anim="none"] {
  --sso-step-duration: 0ms;
}

.sso-step-form-canvas {
  overflow: hidden;
  perspective: 1100px;
}

.sso-step-form .sso-step-form-stepper.mud-stepper {
  gap: 0;
}

.sso-step-form .mud-stepper .mud-stepper-nav {
  display: flex;
  align-items: stretch;
  padding: var(--sso-step-nav-pad);
  margin-block-end: 4px;
  gap: 0;
  width: 100%;
}

.sso-step-form .mud-stepper .mud-stepper-nav .mud-step {
  padding: 10px 16px !important;
  pointer-events: auto;
  flex: 1 1 0;
  min-width: 0;
  transition:
    background-color 200ms ease,
    color 200ms ease,
    box-shadow 200ms ease,
    transform 200ms ease;
}

/* MudBlazor 8: current step is .mud-step.active; completed often keeps .mud-theme-primary on the icon. */
.sso-step-form .mud-stepper .mud-stepper-nav .mud-step.active,
.sso-step-form .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"] {
  z-index: 2;
}

.sso-step-form .mud-stepper .mud-stepper-nav .mud-step.mud-clickable:hover,
.sso-step-form .mud-stepper .mud-stepper-nav .mud-step.mud-clickable:focus-visible,
.sso-step-form .mud-stepper .mud-stepper-nav .mud-step.mud-clickable:active {
  background-color: transparent;
}

.sso-step-form .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon {
  width: var(--sso-step-icon) !important;
  height: var(--sso-step-icon) !important;
  min-width: var(--sso-step-icon);
  border-radius: var(--sso-step-shape) !important;
  font-weight: 700;
  z-index: 1;
}

.sso-step-form .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon .mud-typography,
.sso-step-form .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon .mud-icon-root {
  font-size: 0.85rem;
  line-height: 1;
}

.sso-step-form .mud-stepper .mud-stepper-nav-connector {
  align-self: center;
  min-width: 28px;
}

.sso-step-form .mud-stepper .mud-stepper-nav-connector .mud-stepper-nav-connector-line {
  border-top-width: var(--sso-step-connector) !important;
  border-color: var(--sso-step-upcoming-bg) !important;
}

.sso-step-form .mud-stepper .mud-stepper-content {
  padding: 16px 18px !important;
  border: 1px solid color-mix(in srgb, var(--sso-step-accent) 18%, var(--mud-palette-lines-inputs, #e7e7e7));
  border-radius: var(--sso-step-shape);
  background: var(--mud-palette-surface);
  transform-origin: center;
}

.sso-step-form .sso-step-form-actions {
  width: 100%;
}

.sso-context-drawer .mud-toggle-group {
  flex-wrap: wrap;
}

/* —— sky: navy pills + coral hanging numbers —— */
.sso-step-form.sso-step-theme-sky,
.sso-step-form[data-sso-step-theme="sky"] {
  --sso-step-accent: #283d50;
  --sso-step-accent-hot: #f56b46;
  --sso-step-done: #36b28c;
  --sso-step-shape: 3px;
  --sso-step-icon: 30px;
  --sso-step-nav-pad: 4px 0 22px;
}

.sso-step-form.sso-step-theme-sky .mud-stepper .mud-stepper-nav .mud-step,
.sso-step-form[data-sso-step-theme="sky"] .mud-stepper .mud-stepper-nav .mud-step {
  background: var(--sso-step-upcoming-bg) !important;
  color: var(--sso-step-upcoming) !important;
  border-radius: 3px;
  min-height: 52px;
  padding: 6px 22px 14px !important;
  position: relative;
}

.sso-step-form.sso-step-theme-sky .mud-stepper .mud-stepper-nav .mud-step.active,
.sso-step-form.sso-step-theme-sky .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"],
.sso-step-form.sso-step-theme-sky .mud-stepper .mud-stepper-nav .mud-step:has(.mud-theme-primary),
.sso-step-form[data-sso-step-theme="sky"] .mud-stepper .mud-stepper-nav .mud-step.active,
.sso-step-form[data-sso-step-theme="sky"] .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"],
.sso-step-form[data-sso-step-theme="sky"] .mud-stepper .mud-stepper-nav .mud-step:has(.mud-theme-primary) {
  background: #283d50 !important;
  color: #fff !important;
}

.sso-step-form.sso-step-theme-sky .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-content,
.sso-step-form[data-sso-step-theme="sky"] .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-content {
  color: inherit !important;
}

.sso-step-form.sso-step-theme-sky .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="sky"] .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon {
  position: absolute;
  inset-block-end: -15px;
  inset-inline-start: 50%;
  translate: -50% 0;
  background: #c7c7c7 !important;
  color: #fff !important;
  border: 3px solid var(--mud-palette-surface, #fff);
  border-radius: 50% !important;
}

.sso-step-form.sso-step-theme-sky .mud-stepper .mud-stepper-nav .mud-step.active .mud-step-label-icon,
.sso-step-form.sso-step-theme-sky .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"] .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="sky"] .mud-stepper .mud-stepper-nav .mud-step.active .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="sky"] .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"] .mud-step-label-icon {
  background: #f56b46 !important;
}

.sso-step-form.sso-step-theme-sky .mud-stepper .mud-stepper-nav .mud-step:not(.active):has(.mud-theme-primary) .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="sky"] .mud-stepper .mud-stepper-nav .mud-step:not(.active):has(.mud-theme-primary) .mud-step-label-icon {
  background: #36b28c !important;
}

.sso-step-form.sso-step-theme-sky .mud-stepper .mud-stepper-nav-connector,
.sso-step-form[data-sso-step-theme="sky"] .mud-stepper .mud-stepper-nav-connector {
  min-width: 30px;
}

.sso-step-form.sso-step-theme-sky .mud-stepper .mud-stepper-nav-connector-line,
.sso-step-form[data-sso-step-theme="sky"] .mud-stepper .mud-stepper-nav-connector-line {
  border-top-width: 0 !important;
  height: 12px;
  background:
    linear-gradient(to left, transparent 0 4px, #c7c7c7 4px 8px, transparent 8px) center / 12px 12px no-repeat;
}

/* —— sea: charcoal block tabs, teal active + downward caret, large numbers —— */
.sso-step-form.sso-step-theme-sea,
.sso-step-form[data-sso-step-theme="sea"] {
  --sso-step-accent: #283d50;
  --sso-step-accent-hot: #14b5c8;
  --sso-step-done: #5c3665;
  --sso-step-upcoming: #fff;
  --sso-step-upcoming-bg: #283d50;
  --sso-step-shape: 3px;
  --sso-step-icon: 48px;
  --sso-step-nav-pad: 0 0 14px;
  --sso-step-connector: 0;
}

.sso-step-form.sso-step-theme-sea .mud-stepper .mud-stepper-nav .mud-step,
.sso-step-form[data-sso-step-theme="sea"] .mud-stepper .mud-stepper-nav .mud-step {
  background: #283d50 !important;
  color: #fff !important;
  border-radius: 3px;
  min-height: 64px;
  padding: 0 16px 0 10px !important;
  position: relative;
  overflow: visible;
  margin: 0 !important;
  flex: 1 1 0;
}

.sso-step-form.sso-step-theme-sea .mud-stepper.mud-stepper__horizontal .mud-stepper-nav,
.sso-step-form[data-sso-step-theme="sea"] .mud-stepper.mud-stepper__horizontal .mud-stepper-nav {
  gap: 2px;
  align-items: stretch;
}

/* Completed / visited (icon keeps primary) but not the current step */
.sso-step-form.sso-step-theme-sea .mud-stepper .mud-stepper-nav .mud-step:has(.mud-theme-primary):not(.active):not([aria-current="step"]),
.sso-step-form[data-sso-step-theme="sea"] .mud-stepper .mud-stepper-nav .mud-step:has(.mud-theme-primary):not(.active):not([aria-current="step"]) {
  background: #5c3665 !important;
}

.sso-step-form.sso-step-theme-sea .mud-stepper .mud-stepper-nav .mud-step.active,
.sso-step-form.sso-step-theme-sea .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"],
.sso-step-form.sso-step-theme-sea .mud-stepper .mud-stepper-nav .mud-step:has(> .mud-step-label .mud-step-label-icon.mud-theme-primary).active,
.sso-step-form[data-sso-step-theme="sea"] .mud-stepper .mud-stepper-nav .mud-step.active,
.sso-step-form[data-sso-step-theme="sea"] .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"] {
  background: #14b5c8 !important;
  margin-block-start: 6px !important;
  min-height: 58px;
  z-index: 3;
}

.sso-step-form.sso-step-theme-sea .mud-stepper .mud-stepper-nav .mud-step.active::after,
.sso-step-form.sso-step-theme-sea .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"]::after,
.sso-step-form[data-sso-step-theme="sea"] .mud-stepper .mud-stepper-nav .mud-step.active::after,
.sso-step-form[data-sso-step-theme="sea"] .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"]::after {
  content: "";
  position: absolute;
  inset-block-end: -12px;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 0;
  height: 0;
  border: 12px solid transparent;
  border-block-start-color: #14b5c8;
  border-block-end-width: 0;
  z-index: 4;
  pointer-events: none;
  display: block !important;
}

.sso-step-form.sso-step-theme-sea .mud-stepper .mud-stepper-nav .mud-step .mud-step-label,
.sso-step-form[data-sso-step-theme="sea"] .mud-stepper .mud-stepper-nav .mud-step .mud-step-label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px;
  height: 100%;
  overflow: hidden;
}

.sso-step-form.sso-step-theme-sea .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-content,
.sso-step-form[data-sso-step-theme="sea"] .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-content {
  color: #fff !important;
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.25;
  z-index: 1;
}

.sso-step-form.sso-step-theme-sea .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="sea"] .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon {
  background: transparent !important;
  color: rgb(255 255 255 / 32%) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  font-size: 3.25rem;
  font-weight: 800;
  width: 2.4rem !important;
  height: 3.5rem !important;
  min-width: 2.4rem;
  overflow: hidden;
  align-self: stretch;
  justify-content: flex-start;
  padding: 0;
  z-index: 0;
}

.sso-step-form.sso-step-theme-sea .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon .mud-typography,
.sso-step-form[data-sso-step-theme="sea"] .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon .mud-typography {
  font-size: 3.5rem !important;
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.04em;
  color: inherit !important;
}

.sso-step-form.sso-step-theme-sea .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon .mud-icon-root,
.sso-step-form[data-sso-step-theme="sea"] .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon .mud-icon-root {
  display: none !important;
}

.sso-step-form.sso-step-theme-sea .mud-stepper .mud-stepper-nav-connector,
.sso-step-form[data-sso-step-theme="sea"] .mud-stepper .mud-stepper-nav-connector {
  display: none !important;
  flex: 0 0 0 !important;
  min-width: 0 !important;
  width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.sso-step-form.sso-step-theme-sea .mud-stepper .mud-stepper-nav-connector-line,
.sso-step-form[data-sso-step-theme="sea"] .mud-stepper .mud-stepper-nav-connector-line {
  border-top-width: 0 !important;
  display: none !important;
}

.sso-step-form.sso-step-theme-sea .mud-stepper .mud-stepper-content,
.sso-step-form[data-sso-step-theme="sea"] .mud-stepper .mud-stepper-content {
  border: 1px solid #e7e7e7;
  border-radius: 3px;
  background: #fff;
  box-shadow: none;
  padding: 18px 20px !important;
}

.sso-step-form.sso-step-theme-sea .sso-step-form-actions .mud-button-filled-primary,
.sso-step-form[data-sso-step-theme="sea"] .sso-step-form-actions .mud-button-filled-primary {
  background-color: #283d50 !important;
  color: #fff !important;
  border-radius: 3px;
  min-height: 42px;
  text-transform: none;
  box-shadow: none !important;
}

.sso-step-form.sso-step-theme-sea .sso-step-form-actions .mud-button-filled-primary:hover,
.sso-step-form[data-sso-step-theme="sea"] .sso-step-form-actions .mud-button-filled-primary:hover {
  background-color: #14b5c8 !important;
}

/* —— simple: square numbers on a connector line —— */
.sso-step-form.sso-step-theme-simple,
.sso-step-form[data-sso-step-theme="simple"] {
  --sso-step-accent: #b21948;
  --sso-step-accent-hot: #b21948;
  --sso-step-done: #f22b4a;
  --sso-step-upcoming: #7a7a7a;
  --sso-step-shape: 0;
  --sso-step-icon: 30px;
  --sso-step-connector: 2px;
  --sso-step-nav-pad: 4px 0 12px;
}

.sso-step-form.sso-step-theme-simple .mud-stepper .mud-stepper-nav .mud-step,
.sso-step-form[data-sso-step-theme="simple"] .mud-stepper .mud-stepper-nav .mud-step {
  background: transparent !important;
  padding: 4px 12px !important;
}

.sso-step-form.sso-step-theme-simple .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-content,
.sso-step-form[data-sso-step-theme="simple"] .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-content {
  color: #7a7a7a !important;
}

.sso-step-form.sso-step-theme-simple .mud-stepper .mud-stepper-nav .mud-step.active .mud-step-label-content,
.sso-step-form.sso-step-theme-simple .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"] .mud-step-label-content,
.sso-step-form[data-sso-step-theme="simple"] .mud-stepper .mud-stepper-nav .mud-step.active .mud-step-label-content,
.sso-step-form[data-sso-step-theme="simple"] .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"] .mud-step-label-content {
  color: #b21948 !important;
  font-weight: 600;
}

.sso-step-form.sso-step-theme-simple .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="simple"] .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon {
  background: #fff !important;
  color: #7a7a7a !important;
  border: 1px solid #a3a3a3;
  border-radius: 0 !important;
}

.sso-step-form.sso-step-theme-simple .mud-stepper .mud-stepper-nav .mud-step.active .mud-step-label-icon,
.sso-step-form.sso-step-theme-simple .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"] .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="simple"] .mud-stepper .mud-stepper-nav .mud-step.active .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="simple"] .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"] .mud-step-label-icon {
  background: #b21948 !important;
  color: #fff !important;
  border-color: #b21948;
}

.sso-step-form.sso-step-theme-simple .mud-stepper .mud-stepper-nav .mud-step:not(.active):has(.mud-theme-primary) .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="simple"] .mud-stepper .mud-stepper-nav .mud-step:not(.active):has(.mud-theme-primary) .mud-step-label-icon {
  background: #f22b4a !important;
  color: #fff !important;
  border-color: #f22b4a;
}

.sso-step-form.sso-step-theme-simple .mud-stepper .mud-stepper-nav-connector-line,
.sso-step-form[data-sso-step-theme="simple"] .mud-stepper .mud-stepper-nav-connector-line {
  border-top-width: 2px !important;
  border-color: #dadada !important;
}

.sso-step-form.sso-step-theme-simple .mud-stepper .mud-stepper-content,
.sso-step-form[data-sso-step-theme="simple"] .mud-stepper .mud-stepper-content {
  border-inline: 0;
  border-radius: 0;
  border-block: 1px solid #dadada;
}

/* —— circle: concentric numbered rings + bar connectors —— */
.sso-step-form.sso-step-theme-circle,
.sso-step-form[data-sso-step-theme="circle"] {
  --sso-step-accent: #13d9b7;
  --sso-step-accent-hot: #13d9b7;
  --sso-step-done: #40d8a3;
  --sso-step-upcoming: #a3aab0;
  --sso-step-shape: 50%;
  --sso-step-icon: 56px;
  --sso-step-connector: 12px;
  --sso-step-nav-pad: 12px 0 8px;
}

.sso-step-form.sso-step-theme-circle .mud-stepper.mud-stepper__horizontal .mud-stepper-nav,
.sso-step-form[data-sso-step-theme="circle"] .mud-stepper.mud-stepper__horizontal .mud-stepper-nav {
  align-items: flex-start;
}

.sso-step-form.sso-step-theme-circle .mud-stepper .mud-stepper-nav .mud-step,
.sso-step-form[data-sso-step-theme="circle"] .mud-stepper .mud-stepper-nav .mud-step {
  background: transparent !important;
  padding: 4px 8px !important;
  flex: 1 1 0;
}

.sso-step-form.sso-step-theme-circle .mud-stepper .mud-stepper-nav .mud-step .mud-step-label,
.sso-step-form[data-sso-step-theme="circle"] .mud-stepper .mud-stepper-nav .mud-step .mud-step-label {
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start;
  gap: 10px;
}

.sso-step-form.sso-step-theme-circle .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-content,
.sso-step-form[data-sso-step-theme="circle"] .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-content {
  text-align: center !important;
  color: #787878 !important;
  font-weight: 700;
}

.sso-step-form.sso-step-theme-circle .mud-stepper .mud-stepper-nav .mud-step.active .mud-step-label-content,
.sso-step-form.sso-step-theme-circle .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"] .mud-step-label-content,
.sso-step-form[data-sso-step-theme="circle"] .mud-stepper .mud-stepper-nav .mud-step.active .mud-step-label-content,
.sso-step-form[data-sso-step-theme="circle"] .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"] .mud-step-label-content {
  color: #40464b !important;
}

.sso-step-form.sso-step-theme-circle .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="circle"] .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon {
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: #fff !important;
  color: #929292 !important;
  border: 8px solid #dedede;
  box-shadow: inset 0 2px 3px #c7c6c5;
}

.sso-step-form.sso-step-theme-circle .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon .mud-typography,
.sso-step-form[data-sso-step-theme="circle"] .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon .mud-typography {
  font-size: 1.2rem;
  font-weight: 800;
}

.sso-step-form.sso-step-theme-circle .mud-stepper .mud-stepper-nav .mud-step.active .mud-step-label-icon,
.sso-step-form.sso-step-theme-circle .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"] .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="circle"] .mud-stepper .mud-stepper-nav .mud-step.active .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="circle"] .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"] .mud-step-label-icon {
  border-color: #13d9b7;
  color: #40464b !important;
  box-shadow: inset 0 3px 4px #00b89b;
  background: #f4f4f4 !important;
}

.sso-step-form.sso-step-theme-circle .mud-stepper .mud-stepper-nav .mud-step:not(.active):has(.mud-theme-primary) .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="circle"] .mud-stepper .mud-stepper-nav .mud-step:not(.active):has(.mud-theme-primary) .mud-step-label-icon {
  border-color: #40d8a3;
  color: #61676b !important;
  box-shadow: inset 0 3px 4px #04b497;
}

.sso-step-form.sso-step-theme-circle .mud-stepper.mud-stepper__horizontal .mud-stepper-nav-connector,
.sso-step-form[data-sso-step-theme="circle"] .mud-stepper.mud-stepper__horizontal .mud-stepper-nav-connector {
  margin: 26px -8px 0 !important;
  align-self: flex-start;
}

.sso-step-form.sso-step-theme-circle .mud-stepper .mud-stepper-nav-connector-line,
.sso-step-form[data-sso-step-theme="circle"] .mud-stepper .mud-stepper-nav-connector-line {
  border-top-width: 12px !important;
  border-color: #dedede !important;
}

.sso-step-form.sso-step-theme-circle .mud-stepper .mud-stepper-content,
.sso-step-form[data-sso-step-theme="circle"] .mud-stepper .mud-stepper-content {
  border-radius: 5px;
  border: 1px solid #c7c6c5;
  box-shadow: inset 0 0 0 8px #e4e4e4;
  padding: 24px 22px !important;
}

/* —— sun: chevron / arrow steps —— */
.sso-step-form.sso-step-theme-sun,
.sso-step-form[data-sso-step-theme="sun"] {
  --sso-step-accent: #feaa07;
  --sso-step-accent-hot: #f99200;
  --sso-step-done: #f97200;
  --sso-step-upcoming-bg: #f3f3f3;
  --sso-step-shape: 0;
  --sso-step-icon: 36px;
  --sso-step-nav-pad: 8px 0 16px;
}

.sso-step-form.sso-step-theme-sun .mud-stepper .mud-stepper-nav .mud-step,
.sso-step-form[data-sso-step-theme="sun"] .mud-stepper .mud-stepper-nav .mud-step {
  background: #ffc85e !important;
  color: #fff !important;
  min-height: 50px;
  padding: 0 28px 0 18px !important;
  clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 12px 100%, 0 50%);
}

.sso-step-form.sso-step-theme-sun .mud-stepper .mud-stepper-nav .mud-step:not(.active):not(:has(.mud-theme-primary)),
.sso-step-form[data-sso-step-theme="sun"] .mud-stepper .mud-stepper-nav .mud-step:not(.active):not(:has(.mud-theme-primary)) {
  background: #f3f3f3 !important;
  color: #b8b8b8 !important;
}

.sso-step-form.sso-step-theme-sun .mud-stepper .mud-stepper-nav .mud-step:has(.mud-theme-primary):not(.active),
.sso-step-form[data-sso-step-theme="sun"] .mud-stepper .mud-stepper-nav .mud-step:has(.mud-theme-primary):not(.active) {
  background: #feaa07 !important;
  color: #fff !important;
}

.sso-step-form.sso-step-theme-sun .mud-stepper .mud-stepper-nav .mud-step.active,
.sso-step-form.sso-step-theme-sun .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"],
.sso-step-form[data-sso-step-theme="sun"] .mud-stepper .mud-stepper-nav .mud-step.active,
.sso-step-form[data-sso-step-theme="sun"] .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"] {
  background: #feaa07 !important;
  color: #fff !important;
}

.sso-step-form.sso-step-theme-sun .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-content,
.sso-step-form[data-sso-step-theme="sun"] .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-content {
  color: inherit !important;
}

.sso-step-form.sso-step-theme-sun .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="sun"] .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-icon {
  background: #ffd687 !important;
  color: #fff !important;
  border-radius: 0 !important;
  width: 36px !important;
  height: 50px !important;
}

.sso-step-form.sso-step-theme-sun .mud-stepper .mud-stepper-nav .mud-step.active .mud-step-label-icon,
.sso-step-form.sso-step-theme-sun .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"] .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="sun"] .mud-stepper .mud-stepper-nav .mud-step.active .mud-step-label-icon,
.sso-step-form[data-sso-step-theme="sun"] .mud-stepper .mud-stepper-nav .mud-step[aria-current="step"] .mud-step-label-icon {
  background: #f99200 !important;
}

.sso-step-form.sso-step-theme-sun .mud-stepper .mud-stepper-nav-connector,
.sso-step-form[data-sso-step-theme="sun"] .mud-stepper .mud-stepper-nav-connector {
  min-width: 8px;
  flex: 0 0 8px;
}

.sso-step-form.sso-step-theme-sun .mud-stepper .mud-stepper-nav-connector-line,
.sso-step-form[data-sso-step-theme="sun"] .mud-stepper .mud-stepper-nav-connector-line {
  border-top-width: 0 !important;
}

.sso-step-form.sso-step-theme-sun .mud-stepper .mud-stepper-content,
.sso-step-form[data-sso-step-theme="sun"] .mud-stepper .mud-stepper-content {
  border-inline: 0;
  border-radius: 0;
  border-block: 1px solid #dadada;
}

/* —— panel transitions (content only; nav stays put) ——
   tick-a / tick-b MUST use distinct animation-name values so the browser
   restarts the transition when the step index changes. Identical names on both
   ticks previously caused “no visible animation” on Personal Info. */
.sso-step-form.sso-step-anim-fade.sso-step-form-tick-a .mud-stepper-content,
.sso-step-form.sso-step-anim-fade.sso-step-form-tick-a .sso-step-form-panel,
.sso-step-form[data-sso-step-anim="fade"].sso-step-form-tick-a .mud-stepper-content,
.sso-step-form[data-sso-step-anim="fade"].sso-step-form-tick-a .sso-step-form-panel {
  animation: sso-step-fade-rise-a var(--sso-step-duration) var(--sso-step-ease) both;
}

.sso-step-form.sso-step-anim-fade.sso-step-form-tick-b .mud-stepper-content,
.sso-step-form.sso-step-anim-fade.sso-step-form-tick-b .sso-step-form-panel,
.sso-step-form[data-sso-step-anim="fade"].sso-step-form-tick-b .mud-stepper-content,
.sso-step-form[data-sso-step-anim="fade"].sso-step-form-tick-b .sso-step-form-panel {
  animation: sso-step-fade-rise-b var(--sso-step-duration) var(--sso-step-ease) both;
}

.sso-step-form.sso-step-anim-slide.sso-step-form-tick-a .mud-stepper-content,
.sso-step-form.sso-step-anim-slide.sso-step-form-tick-a .sso-step-form-panel,
.sso-step-form[data-sso-step-anim="slide"].sso-step-form-tick-a .mud-stepper-content,
.sso-step-form[data-sso-step-anim="slide"].sso-step-form-tick-a .sso-step-form-panel {
  animation: sso-step-slide-fade-rtl-a var(--sso-step-duration) var(--sso-step-ease) both;
}

.sso-step-form.sso-step-anim-slide.sso-step-form-tick-b .mud-stepper-content,
.sso-step-form.sso-step-anim-slide.sso-step-form-tick-b .sso-step-form-panel,
.sso-step-form[data-sso-step-anim="slide"].sso-step-form-tick-b .mud-stepper-content,
.sso-step-form[data-sso-step-anim="slide"].sso-step-form-tick-b .sso-step-form-panel {
  animation: sso-step-slide-fade-rtl-b var(--sso-step-duration) var(--sso-step-ease) both;
}

/* 3d-cube (template 03-transition): unique animation-name per motion slot so
   consecutive step changes always restart. Inspired by vendor rotateY + translateZ;
   Blazor shows one active panel, so this is an enter-face cube — not jQuery dual-face. */
.sso-step-form.sso-step-anim-cube .sso-step-form-canvas,
.sso-step-form[data-sso-step-anim="cube"] .sso-step-form-canvas {
  perspective: 1200px;
  transform-style: preserve-3d;
}

.sso-step-form.sso-step-anim-cube .mud-stepper-content,
.sso-step-form.sso-step-anim-cube .sso-step-form-panel,
.sso-step-form[data-sso-step-anim="cube"] .mud-stepper-content,
.sso-step-form[data-sso-step-anim="cube"] .sso-step-form-panel {
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: center center;
}

.sso-step-form.sso-step-anim-cube.sso-step-form-motion-0 .mud-stepper-content,
.sso-step-form.sso-step-anim-cube.sso-step-form-motion-0 .sso-step-form-panel,
.sso-step-form[data-sso-step-anim="cube"].sso-step-form-motion-0 .mud-stepper-content,
.sso-step-form[data-sso-step-anim="cube"].sso-step-form-motion-0 .sso-step-form-panel {
  animation: sso-step-cube-rtl-0 720ms var(--sso-step-ease) both;
}

.sso-step-form.sso-step-anim-cube.sso-step-form-motion-1 .mud-stepper-content,
.sso-step-form.sso-step-anim-cube.sso-step-form-motion-1 .sso-step-form-panel,
.sso-step-form[data-sso-step-anim="cube"].sso-step-form-motion-1 .mud-stepper-content,
.sso-step-form[data-sso-step-anim="cube"].sso-step-form-motion-1 .sso-step-form-panel {
  animation: sso-step-cube-rtl-1 720ms var(--sso-step-ease) both;
}

.sso-step-form.sso-step-anim-cube.sso-step-form-motion-2 .mud-stepper-content,
.sso-step-form.sso-step-anim-cube.sso-step-form-motion-2 .sso-step-form-panel,
.sso-step-form[data-sso-step-anim="cube"].sso-step-form-motion-2 .mud-stepper-content,
.sso-step-form[data-sso-step-anim="cube"].sso-step-form-motion-2 .sso-step-form-panel {
  animation: sso-step-cube-rtl-2 720ms var(--sso-step-ease) both;
}

.sso-step-form.sso-step-anim-cube.sso-step-form-motion-3 .mud-stepper-content,
.sso-step-form.sso-step-anim-cube.sso-step-form-motion-3 .sso-step-form-panel,
.sso-step-form[data-sso-step-anim="cube"].sso-step-form-motion-3 .mud-stepper-content,
.sso-step-form[data-sso-step-anim="cube"].sso-step-form-motion-3 .sso-step-form-panel {
  animation: sso-step-cube-rtl-3 720ms var(--sso-step-ease) both;
}

/* Admin / hosts without motion-* still restart via distinct tick names. */
.sso-step-form.sso-step-anim-cube.sso-step-form-tick-a:not([class*="sso-step-form-motion-"]) .mud-stepper-content,
.sso-step-form.sso-step-anim-cube.sso-step-form-tick-a:not([class*="sso-step-form-motion-"]) .sso-step-form-panel,
.sso-step-form[data-sso-step-anim="cube"].sso-step-form-tick-a:not([class*="sso-step-form-motion-"]) .mud-stepper-content,
.sso-step-form[data-sso-step-anim="cube"].sso-step-form-tick-a:not([class*="sso-step-form-motion-"]) .sso-step-form-panel {
  animation: sso-step-cube-rtl-0 720ms var(--sso-step-ease) both;
}

.sso-step-form.sso-step-anim-cube.sso-step-form-tick-b:not([class*="sso-step-form-motion-"]) .mud-stepper-content,
.sso-step-form.sso-step-anim-cube.sso-step-form-tick-b:not([class*="sso-step-form-motion-"]) .sso-step-form-panel,
.sso-step-form[data-sso-step-anim="cube"].sso-step-form-tick-b:not([class*="sso-step-form-motion-"]) .mud-stepper-content,
.sso-step-form[data-sso-step-anim="cube"].sso-step-form-tick-b:not([class*="sso-step-form-motion-"]) .sso-step-form-panel {
  animation: sso-step-cube-rtl-1 720ms var(--sso-step-ease) both;
}

@keyframes sso-step-fade-rise-a {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sso-step-fade-rise-b {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes sso-step-slide-fade-rtl-a {
  from {
    opacity: 0;
    transform: translateX(2rem) scale(0.98);
    filter: blur(1.5px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes sso-step-slide-fade-rtl-b {
  from {
    opacity: 0;
    transform: translateX(2rem) scale(0.98);
    filter: blur(1.5px);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@keyframes sso-step-cube-rtl-0 {
  0% {
    opacity: 0.25;
    transform: perspective(1200px) translateZ(-220px) rotateY(90deg);
  }
  33% {
    opacity: 0.55;
    transform: perspective(1200px) translateZ(-280px) rotateY(60deg);
  }
  66% {
    opacity: 0.9;
    transform: perspective(1200px) translateZ(-90px) rotateY(18deg);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) translateZ(0) rotateY(0deg);
  }
}

@keyframes sso-step-cube-rtl-1 {
  0% {
    opacity: 0.25;
    transform: perspective(1200px) translateZ(-220px) rotateY(-90deg);
  }
  33% {
    opacity: 0.55;
    transform: perspective(1200px) translateZ(-280px) rotateY(-60deg);
  }
  66% {
    opacity: 0.9;
    transform: perspective(1200px) translateZ(-90px) rotateY(-18deg);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) translateZ(0) rotateY(0deg);
  }
}

@keyframes sso-step-cube-rtl-2 {
  0% {
    opacity: 0.2;
    transform: perspective(1200px) translateZ(-200px) rotateY(85deg) translateX(0.6rem);
  }
  40% {
    opacity: 0.7;
    transform: perspective(1200px) translateZ(-260px) rotateY(40deg) translateX(0.25rem);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) translateZ(0) rotateY(0deg) translateX(0);
  }
}

@keyframes sso-step-cube-rtl-3 {
  0% {
    opacity: 0.2;
    transform: perspective(1200px) translateZ(-200px) rotateY(-85deg) translateX(-0.6rem);
  }
  40% {
    opacity: 0.7;
    transform: perspective(1200px) translateZ(-260px) rotateY(-40deg) translateX(-0.25rem);
  }
  100% {
    opacity: 1;
    transform: perspective(1200px) translateZ(0) rotateY(0deg) translateX(0);
  }
}

/* —— side navigator (template showNav left/right pattern; Mud HORIZONTAL DOM) ——
   MudBlazor Vertical nests each step's content inside .mud-stepper-nav. Prior CSS
   constrained that nav to ~280px, crushing form fields. Side chrome must keep
   MudStepper Vertical=false so .mud-stepper-content is a full-width sibling. */
.sso-step-form.sso-step-form-vertical .sso-step-form-canvas {
  overflow: visible;
}

.sso-step-form.sso-step-form-vertical .mud-stepper {
  display: flex;
  align-items: stretch;
  gap: 14px;
  flex-wrap: wrap;
  min-height: 0;
}

.sso-step-form.sso-step-form-vertical.sso-step-panel-right .mud-stepper {
  flex-direction: row;
}

/* showNav: 'left' — physical left rail in RTL (nav is first DOM child; row-reverse). */
.sso-step-form.sso-step-form-vertical.sso-step-panel-left .mud-stepper {
  flex-direction: row-reverse;
}

.sso-step-form.sso-step-form-vertical.sso-step-panel-left .mud-stepper > .mud-stepper-nav {
  order: 0;
}

.sso-step-form.sso-step-form-vertical.sso-step-panel-left .mud-stepper > .mud-stepper-content {
  order: 0;
  flex: 1 1 0;
}

.sso-step-form.sso-step-form-vertical .mud-stepper > .mud-stepper-nav {
  flex: 0 0 clamp(220px, 26vw, 300px);
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  max-height: min(70vh, 780px);
  overflow-x: hidden;
  overflow-y: auto;
  padding: 10px 8px 14px !important;
  margin: 0 !important;
  border: 1px solid color-mix(in srgb, var(--sso-step-accent) 16%, var(--mud-palette-lines-inputs, #e7e7e7));
  border-radius: var(--sso-step-shape);
  background: color-mix(in srgb, var(--mud-palette-background) 70%, var(--mud-palette-surface));
}

.sso-step-form.sso-step-form-vertical .mud-stepper > .mud-stepper-nav .mud-step {
  width: 100%;
  margin-block: 4px;
  min-height: 52px;
  display: flex !important;
  align-items: center;
  clip-path: none !important;
}

.sso-step-form.sso-step-form-vertical .mud-stepper > .mud-stepper-nav .mud-step .mud-step-label {
  display: flex !important;
  flex-direction: row-reverse;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.sso-step-form.sso-step-form-vertical .mud-stepper > .mud-stepper-nav .mud-step .mud-step-label-content {
  flex: 1 1 auto;
  min-width: 0;
  text-align: start;
  color: inherit !important;
}

.sso-step-form.sso-step-form-vertical .mud-stepper > .mud-stepper-nav .mud-step .mud-step-label-icon {
  position: static !important;
  inset: auto !important;
  translate: none !important;
  flex: 0 0 auto;
  margin: 0 !important;
  height: var(--sso-step-icon) !important;
  width: var(--sso-step-icon) !important;
}

/* 17-icons pattern: Material icon replaces step number inside the badge. */
.sso-step-form.sso-step-form-vertical .mud-stepper > .mud-stepper-nav .mud-step .mud-step-label-icon .mud-icon-root {
  font-size: 1.15rem !important;
  width: 1.15rem;
  height: 1.15rem;
}

.sso-step-form.sso-step-form-vertical.sso-step-theme-circle .mud-stepper > .mud-stepper-nav .mud-step .mud-step-label-icon,
.sso-step-form.sso-step-form-vertical[data-sso-step-theme="circle"] .mud-stepper > .mud-stepper-nav .mud-step .mud-step-label-icon {
  --sso-step-icon: 42px;
}

.sso-step-form.sso-step-form-vertical.sso-step-theme-circle .mud-stepper > .mud-stepper-nav .mud-step .mud-step-label-icon .mud-icon-root,
.sso-step-form.sso-step-form-vertical[data-sso-step-theme="circle"] .mud-stepper > .mud-stepper-nav .mud-step .mud-step-label-icon .mud-icon-root {
  font-size: 1.35rem !important;
  width: 1.35rem;
  height: 1.35rem;
}

.sso-step-form.sso-step-form-vertical .mud-stepper > .mud-stepper-nav .mud-step.active::after,
.sso-step-form.sso-step-form-vertical .mud-stepper > .mud-stepper-nav .mud-step::before {
  display: none !important;
  content: none !important;
}

.sso-step-form.sso-step-form-vertical .mud-stepper > .mud-stepper-nav .mud-stepper-nav-connector {
  display: none !important;
  flex: 0 0 0 !important;
  min-width: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
}

.sso-step-form.sso-step-form-vertical .mud-stepper > .mud-stepper-content {
  flex: 1 1 0;
  min-width: min(100%, 18rem);
  min-height: 20rem;
  max-width: 100%;
  overflow: visible !important;
  opacity: 1;
  z-index: 1;
  color: var(--mud-palette-text-primary);
  background: var(--mud-palette-surface);
}

.sso-step-form.sso-step-form-vertical .mud-stepper > .mud-stepper-actions {
  flex: 0 0 auto;
  flex-basis: 100%;
  width: 100%;
}

/* Side nav keeps title + secondary text; neutralize horizontal-only theme geometry. */
.sso-step-form.sso-step-form-vertical.sso-step-theme-sky .mud-stepper > .mud-stepper-nav .mud-step,
.sso-step-form.sso-step-form-vertical[data-sso-step-theme="sky"] .mud-stepper > .mud-stepper-nav .mud-step {
  padding: 10px 12px !important;
}

.sso-step-form.sso-step-form-vertical.sso-step-theme-sky .mud-stepper > .mud-stepper-nav .mud-step .mud-step-label-icon,
.sso-step-form.sso-step-form-vertical[data-sso-step-theme="sky"] .mud-stepper > .mud-stepper-nav .mud-step .mud-step-label-icon {
  border-width: 2px !important;
}

.sso-step-form.sso-step-form-vertical.sso-step-theme-sea .mud-stepper > .mud-stepper-nav .mud-step,
.sso-step-form.sso-step-form-vertical[data-sso-step-theme="sea"] .mud-stepper > .mud-stepper-nav .mud-step {
  padding: 8px 12px !important;
  margin-block-start: 0 !important;
}

.sso-step-form.sso-step-form-vertical.sso-step-theme-sea .mud-stepper > .mud-stepper-nav .mud-step.active,
.sso-step-form.sso-step-form-vertical[data-sso-step-theme="sea"] .mud-stepper > .mud-stepper-nav .mud-step.active {
  margin-block-start: 0 !important;
}

.sso-step-form.sso-step-form-vertical.sso-step-theme-circle .mud-stepper > .mud-stepper-nav .mud-step .mud-step-label,
.sso-step-form.sso-step-form-vertical[data-sso-step-theme="circle"] .mud-stepper > .mud-stepper-nav .mud-step .mud-step-label {
  flex-direction: row-reverse !important;
}

.sso-step-form.sso-step-form-vertical.sso-step-theme-sun .mud-stepper > .mud-stepper-nav .mud-step,
.sso-step-form.sso-step-form-vertical[data-sso-step-theme="sun"] .mud-stepper > .mud-stepper-nav .mud-step {
  padding: 10px 12px !important;
  clip-path: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .sso-step-form .mud-stepper-content,
  .sso-step-form .sso-step-form-panel,
  .sso-step-form .sso-step-form-canvas {
    animation: none !important;
    filter: none !important;
  }
}

@media (max-width: 960px) {
  .sso-step-form.sso-step-form-vertical.sso-step-panel-right .mud-stepper,
  .sso-step-form.sso-step-form-vertical.sso-step-panel-left .mud-stepper {
    flex-direction: column;
  }

  .sso-step-form.sso-step-form-vertical .mud-stepper > .mud-stepper-nav {
    flex: 0 0 auto;
    max-height: min(36vh, 280px);
    width: 100%;
  }

  .sso-step-form.sso-step-form-vertical .mud-stepper > .mud-stepper-content {
    min-height: 16rem;
  }
}

@media (max-width: 720px) {
  .sso-step-form.sso-step-form-horizontal .mud-stepper .mud-stepper-nav .mud-step .mud-step-label-content {
    display: none;
  }

  .sso-step-form.sso-step-form-horizontal.sso-step-theme-sun .mud-stepper .mud-stepper-nav .mud-step,
  .sso-step-form.sso-step-form-horizontal[data-sso-step-theme="sun"] .mud-stepper .mud-stepper-nav .mud-step {
    padding-inline: 10px !important;
  }
}