.meta--form:first-of-type {
    margin-block-start: var(--space-4)
}

.meta--form {
    color: var(--text);
    font-size: var(--text-md);
}

.meta--form-muted {
    gap: var(--space-1);
}

.form-layout {
  border: var(--border-1, 1px solid rgba(0, 0, 0, 0.08));
  border-radius: var(--radius-lg, 16px);
  background: var(--surface-1);
  box-shadow: var(--shadow-md);
  max-width: 1376px;
  margin-block-end: var(--space-8);
  padding-block: var(--space-6);
  padding-inline: var(--space-6);
  position: relative;
}

.form-section:not(:last-of-type) {
  padding-bottom: var(--space-6);
  position: relative;
  margin-bottom: var(--space-6);
}

.form-section:not(:last-of-type):after {
  position: absolute;
  content: "";
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-strong);
  margin-inline: calc(var(--space-6) * -1);
}

.form-section__heading h2 {
  font-size: var(--h3);
  line-height: var(--leading-tight);
  font-weight: 500;
  margin-block-end: var(--space-5);
}

.button-register {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    height: 52px;
    padding-inline: var(--space-4);
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--primary);
    color: var(--surface);
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    font-size: var(--text-lg);
    box-shadow: var(--shadow-md);
    margin-inline: auto;
    justify-content: center;
}

.button-register:hover {
    background-color: var(--primary-hover);
}



.formInput {
  margin: 12px 0 8px 0;
  width: 400px;
  font-size: large;
  padding: 5px;
}

.formInput.is-invalid {
    border: 2px solid 
        color-mix(in srgb, var(--danger) 80%, transparent) !important;
    background: 
        color-mix(in srgb, var(--danger) 5%, transparent) !important;
    position: relative;
}

.formInput.is-invalid:focus {
    outline: 2px solid var(--danger);
    outline-offset: 2px;
}

/*.formInput.is-invalid::after {
    content: "This field is required";
    display: block;
    margin-top: 4px;
    font-size: 0.875rem;
    color: red; /* or your token e.g. var(--color-danger) */
}*/

.select-one-or-more {
  font-size: smaller;
}

.authMethods {
  display: grid;
  gap: 12px;
}

.formCheckboxWrapper {
  position: relative;
  display: block;
}

/* .formCheckboxWrapper label {
   font-size: 1rem;
   cursor: pointer;
   margin-left: 5px;
}*/

/*   .formCheckbox {
   cursor: pointer;
   display: grid;
   place-content: center;
   -webkit-appearance: none;
   appearance: none;
   background-color: #fff;
   border: 1px solid var(--primary);
}*/

/*.formCheckbox::before {
   content: "";
   width: 0.65em;
   height: 0.65em;
   transform: scale(0);
   transition: 120ms transform ease-in-out;
   box-shadow: inset 1em 1em var(--primary);
}*/

/*.formCheckbox:checked::before {
   transform: scale(1);
}*/

#formRegisterInstitutionSentWrapper p {
  text-align: center;
}

.sentsuccessicon {
  font-size: 60pt;
  color: limegreen;
  margin: 60px 0 30px 0;
}

/* Sections */
#formRegisterInstitution .form-section {
  display: flex;
  flex-direction: column;
}

#formRegisterInstitution .form-section__heading {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.2;
  flex-basis: 100%;
}

/* Individual fields */
#formRegisterInstitution .form-field {
  /*display: grid;*/
  gap: 0.5rem;
}

/* Labels */
#formRegisterInstitution label,
#formRegisterInstitution legend {
  margin: 0;
  font-size: var(--text-md);
  font-weight: 500;
}

/* Inputs and textarea */
#formRegisterInstitution .formInput,
#formRegisterInstitution textarea.input,
#formRegisterInstitution textarea.formInput {
  width: 100%;
  min-height: 2.75rem;
  padding: 0.75rem 0.875rem;
  border: var(--border-1);
  border-radius: var(--radius-md);
  background: var(--surface);
  font: inherit;
  line-height: 1.4;
  box-sizing: border-box;
  border-color: var(--border-strong);
  transition: all var(--dur-3) var(--ease-standard);
}

#formRegisterInstitution textarea.input,
#formRegisterInstitution textarea.formInput {
  min-height: 8rem;
  resize: vertical;
}

/* Focus states */
#formRegisterInstitution .formInput:focus,
#formRegisterInstitution textarea:focus,
#formRegisterInstitution .formCheckbox:focus {
  outline: 2px solid var(--focus, #005fcc);
  outline-offset: 2px;
}

/* Fieldset reset */
#formRegisterInstitution fieldset.form-field {
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;
}

#formRegisterInstitution fieldset.form-field legend {
  padding: 0;
  margin-bottom: 0.35rem;
}

/* Helper text */
#formRegisterInstitution .select-one-or-more {
  display: block;
  font-size: 0.9375rem;
  color: var(--text-muted, #555);
  margin-bottom: 0.5rem;
}

/* Checkbox layout */
 .authMethods {
  /*display: grid;*/
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/*#formRegisterInstitution .formCheckboxWrapper {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}*/

#formRegisterInstitution .formCheckboxWrapper label {
  font-size: var(--text-md);
  font-weight: 500;
}

/* Visually hide checkbox, but keep it accessible */
.formCheckbox {
  position: absolute;
  opacity: 0;
  inset: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.form--asterisk {
  color: var(--danger);
}

.authCard {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-4);
    align-items: center;
    width: 100%;
    padding: 1rem 1.125rem;
    border: var(--border-1);
    border-radius: var(--radius-lg);
    background: radial-gradient(circle at center, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.03) 40%, transparent 70%), linear-gradient(to bottom, var(--surface), var(--surface));
    color: #fff;
    cursor: pointer;
    box-sizing: border-box;
    transition: all var(--dur-3) var(--ease-standard);
    border-color: var(--border-strong);
    height: 100%;
}

.authCard:hover {
    box-shadow: var(--shadow-lg);
    border-color: color-mix(in srgb, var(--primary) 50%, transparent);
}

.authCard__icon {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 999px;
      background: 
color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: 1.125rem;
  flex-shrink: 0;
}

.authCard__content {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.authCard__title {
    display: block;
    font-size: var(--text-lg);
    font-weight: 500;
    line-height: var(--leading-tight);
    color: var(--text-strong);
}

.authCard__subtitle {
  display: block;
  font-size: 0.95rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.82);
}

/* Checked state */
.formCheckbox:checked + .authCard {
  border-color: var(--primary, #00a3e0);
  box-shadow: 0 0 0 3px
    color-mix(in srgb, var(--primary, #00a3e0) 22%, transparent);
  background:
    linear-gradient(180deg, rgba(0, 163, 224, 0.12), rgba(0, 163, 224, 0.05)),
    #1f2430;
}

.formCheckbox:checked + .authCard .authCard__icon {
  background: color-mix(in srgb, var(--primary, #00a3e0) 18%, transparent);
  color: var(--primary, #00a3e0);
}

/* Keyboard focus */
.formCheckbox:focus + .authCard,
.formCheckbox:focus-visible + .authCard {
  outline: 2px solid var(--focus, #005fcc);
  outline-offset: 3px;
}

/* Optional active press feel */
.authCard:active {
  transform: translateY(1px);
}

/* > 320px / 20rem */
@media only screen and (min-width: 20rem) {
}

/* > 480px / 30rem */
@media only screen and (min-width: 30rem) {
}

/* > 640px / 40rem */
@media only screen and (min-width: 40rem) {
  #formRegisterInstitution .form-section {
    gap: 1.25rem;
    flex-direction: row;
    flex-wrap: wrap;
  }

  #formRegisterInstitution .form-field {
    flex-basis: calc((100% - 1.25rem) / 2);
    align-items: start;
  }

  #formRegisterInstitution .form-field--institution,
  #formRegisterInstitution .form-field--method,
  #formRegisterInstitution .form-field--additional {
    flex-basis: 100% !important;
  }

  #formRegisterInstitution .form-field > label {
    padding-top: 0.85rem;
  }

  #formRegisterInstitution fieldset.form-field {
    /*grid-template-columns: 1fr;*/
  }

#form-InstitutionName::placeholder {
  color: var(--text-muted);
  opacity: 1; 
}



  .authMethods {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 48rem/768px*/
@media only screen and (min-width: 48rem) {
}

/* > 64rem / 1024px */
@media only screen and (min-width: 64rem) {
  #formRegisterInstitution.form-layout {
    gap: 2.5rem;
  }

 .authMethods {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* > 80rem / 1280px */
@media only screen and (min-width: 80rem) {
  #formRegisterInstitution.form-layout {
    padding-block: var(--space-8);
    padding-inline: var(--space-12);
  }

  #formRegisterInstitution .form-section {
    row-gap: 1.25rem;
    column-gap: var(--space-10);
  }

  .form-section:not(:last-of-type) {
    padding-bottom: var(--space-8);
    margin-bottom: var(--space-8);
  }

  .form-section:not(:last-of-type):after {
    margin-inline: calc(var(--space-12) * -1);
  }

  #formRegisterInstitution .form-field {
    flex-basis: calc((100% - var(--space-10)) / 2);
  }
}

/* 96rem / 1536px */
@media only screen and (min-width: 96rem) {
}