main.sign-up-flow{
  background-color: var(--c-background);
  padding: 5rem 0;
  margin: auto;
}

/* Intro section */
section.intro{
  text-align: center;
}

section.intro h1{
  color: var(--c-orange-500);
  font-weight: 200;
}

section.intro p{
  color: var(--c-grey-700);
  font-weight: 300;
}

section.steps-indicator{
  --steps-padding: 1.5625rem;
  position: relative;
  background: var(--c-white);
  border-radius: var(--radius);
  padding: var(--steps-padding);

  display: flex;
  justify-content: space-between;
}

section.steps-indicator::after{
  position: absolute;
  content: '';
  height: 1px;
  width: calc(100% - var(--steps-padding)*2);

  top: 50%;
  left: var(--steps-padding);
  background-color: var(--c-blue-50);
  z-index: 0;
}

/* State management utils */
.step { display: none; }
.step.active { display: block; }
.hidden { display: none; }

/* Steps indicator */
section.steps-indicator .step{
  height: 2.1875rem;
  width: 2.1875rem;
  border-radius: 50%;
  z-index: 1;

  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--c-blue-50);
  color: var(--c-white);
  font-weight: 700;
  font-size: 0.875rem;
}

section.steps-indicator .step.done{
  background-color: var(--c-blue-500);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M530.8 134.1C545.1 144.5 548.3 164.5 537.9 178.8L281.9 530.8C276.4 538.4 267.9 543.1 258.5 543.9C249.1 544.7 240 541.2 233.4 534.6L105.4 406.6C92.9 394.1 92.9 373.8 105.4 361.3C117.9 348.8 138.2 348.8 150.7 361.3L252.2 462.8L486.2 141.1C496.6 126.8 516.6 123.6 530.9 134z' fill='%23fff'/%3E%3C/svg%3E");
  background-size: 50%;
  background-position: center;
  background-repeat: no-repeat;
}
section.steps-indicator .step.done span{
  display: none;
}

section.steps-indicator .step.in-progress{
  background-color: var(--c-orange-500);
}

/* Account type selector */
.fieldset{
  position: relative;
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 1.5625rem;
  margin: 1.5rem 0;
}

.form-controls{
  background: var(--c-white);
  border-radius: var(--radius);
  padding: 1.5625rem;
  margin: 1.5rem 0;

  display: grid;
  grid-template: 1fr / 1fr 1fr;
}

.form-controls button{
  background-color: var(--c-orange-500);
  border-radius: 5px;
  margin: 0;
}

.form-controls button.right{
  justify-self: end;
  grid-column: 2
}

.form-controls button.left{
  justify-self: start;
  grid-column: 1
}

.form-controls a.back{
  background-color: transparent;
  color: var(--c-blue-500);
  text-decoration: underline;
  padding-left: unset;
  align-self: center;
}

.fieldset h2{
  color: var(--c-orange-500);
  font-weight: 200;
  font-size: 1.5rem;
  padding-bottom: 15px;
  margin-bottom: 25px;
  border-bottom: 1px solid #CCCCCC;
}

.account-type{
  --cols: 4;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  grid-gap: 30px;
}

.account-type label{
  text-transform: capitalize;
}
.account-type input{
  display: none;
}

.account-type .type{
  outline: 1px solid var(--c-grey-50);
  padding: 25px 0;
  border-radius: 20px;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.account-type .type svg, .account-type .type i{
  color: var(--c-orange-500);
  font-size: 30px;
}

.account-type .type p{
  font-size: 0.75rem;
  color: var(--c-grey-700);
  text-align: center;
  margin-bottom: 0;
}

.account-type input:checked + div.type{
  outline: 2px solid var(--c-orange-500);
  background-color: var(--c-orange-25);
}

.account-type input:checked + div.type p{
  color: var(--c-orange-500)
}

.account-type + .errorbox{
  margin-top: 0rem;
}

/* Error state */

.errorbox{
  display: flex;
  gap: 0.4rem;
  background-color: var(--c-error-25);
  color: var(--c-error-800);
  align-items: center;
  border-radius: 5px;
  padding: 0.25rem 0.625rem;
  margin-bottom: 1rem;
  text-transform: none;
}

input[type="text"] + .errorbox,
input[type="password"] + .errorbox{
  margin-top: -1rem;
}

.errorbox p{
  margin-bottom: 0;
  font-size: 0.875rem;
}

/* Password validation */
div.password-validation{
  display: grid;
  grid-template-areas: "one" "two" "three" "four";
  row-gap: 1.25rem;
  padding-bottom: 1rem;
  margin: 1rem 0 1.5625rem;
  border-bottom: 1px solid var(--c-grey-100);
}

@media only screen and (min-width: 640px) {
  div.password-validation{
    grid-template-areas: "one three" "two four";
  }
}

div.password-validation .criteria{
  position: relative;
  display: grid;
  grid-template-columns: 16px auto;
  gap: 10px;
}

div.password-validation .criteria.one{
  grid-area: one;
}

div.password-validation .criteria.two{
  grid-area: two;
}

div.password-validation .criteria.three{
  grid-area: three;
}

div.password-validation .criteria.four{
  grid-column: four;
}

div.password-validation .criteria p{
  margin-bottom: 0;
  font-size: 14px;
  color: var(--c-grey-700);
}

div.password-validation .criteria::before{
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M320 112C434.9 112 528 205.1 528 320C528 434.9 434.9 528 320 528C205.1 528 112 434.9 112 320C112 205.1 205.1 112 320 112zM320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM231 231C221.6 240.4 221.6 255.6 231 264.9L286 319.9L231 374.9C221.6 384.3 221.6 399.5 231 408.8C240.4 418.1 255.6 418.2 264.9 408.8L319.9 353.8L374.9 408.8C384.3 418.2 399.5 418.2 408.8 408.8C418.1 399.4 418.2 384.2 408.8 374.9L353.8 319.9L408.8 264.9C418.2 255.5 418.2 240.3 408.8 231C399.4 221.7 384.2 221.6 374.9 231L319.9 286L264.9 231C255.5 221.6 240.3 221.6 231 231z' fill='%23525252'/%3E%3C/svg%3E");
  align-self: center;

}

div.password-validation .criteria.passed::before{
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3C!--!Font Awesome Free v7.0.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--%3E%3Cpath d='M320 576C178.6 576 64 461.4 64 320C64 178.6 178.6 64 320 64C461.4 64 576 178.6 576 320C576 461.4 461.4 576 320 576zM320 112C205.1 112 112 205.1 112 320C112 434.9 205.1 528 320 528C434.9 528 528 434.9 528 320C528 205.1 434.9 112 320 112zM390.7 233.9C398.5 223.2 413.5 220.8 424.2 228.6C434.9 236.4 437.3 251.4 429.5 262.1L307.4 430.1C303.3 435.8 296.9 439.4 289.9 439.9C282.9 440.4 276 437.9 271.1 433L215.2 377.1C205.8 367.7 205.8 352.5 215.2 343.2C224.6 333.9 239.8 333.8 249.1 343.2L285.1 379.2L390.7 234z' fill='%2312D35C'/%3E%3C/svg%3E");

}

/* Show password toggle */

.show-password-toggle{
  position: relative;
}

.show-password-toggle .show-password{
  position: absolute;
  top: 0;
  right: 0;
  color: var(--c-blue-500);

  cursor: pointer;

  width: 20px;
  display: grid;
  place-items: center;
}