@charset "utf-8";
@import url("../library/inputs/input-floating-label-v2.css");

.member-profile.presentation {
  --a: 217deg;
  --b: 127deg;
  --c: 336deg;
  min-height: 100vh;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: linear-gradient(var(--b), var(--government-dark), var(--government-med) 70.71%), linear-gradient(var(--c), var(--business), var(--business-lt) 70.71%), linear-gradient(var(--a), var(--government), var(--business-dark) 70.71%);
  
  & > * {
    margin: 5rem 0;
  }
}

.member-profile-information {
  background: white;
  flex-direction: column;
  border-radius: .5rem;
  padding: 1rem 2rem 4rem;
  row-gap: 1rem;
  max-width: 475px;
  min-width: 350px;
  /*min-height: calc(100dvh - 6rem);*/
  box-shadow: var(--float);
  align-self: flex-start;
}

.member-profile-information .logo {
  max-width: 5rem;
  align-self: center;
}

.member-profile-information .title {
  text-align: center;
  font-size: 2rem;
  align-items: center;
  align-self: center;
}

  .member-profile-information .subhead {
    font-weight: bold;
    line-height: 1.2;
    align-items: center;
    column-gap: 1rem;
  }

 .member-profile-information :is(
  .border-box, 
  .validation-summary-errors li) {
    flex-direction: column;
    row-gap: .5rem;
    position: relative;
    padding: 1rem;
    border-radius: .125rem;
    background: var(--compare);
    border: 1px solid var(--compare);
    border-left-width: 8px;
    cursor: pointer;
  }

.member-profile-information {

  & .success {
    border-color: var(--business-med) !important;
  }
  & .alert{
    border-color: var(--visitor) !important;
  }
}

.member-profile .validation-summary-valid {
  display: none;
}

.member-profile-information .validation-summary-errors li {
  border-color: var(--resident);
}

.member-profile-information :is(
  .border-box:has(:checked),
  a.border-box:hover,
  a.border-box:focus,
  .error, 
  .alert, 
  .list) {
  border-color: var(--color-med);
  line-height: 1.3;
}

.member-profile-information .instruction-steps {
  flex-direction: column;
  counter-reset: count 0;
  row-gap: 1rem;
}

.member-profile-information .step {
  flex-direction: column;
  counter-increment: count 1;
  width: 100%;
  align-self: flex-end;
  row-gap: .5rem;

    &::before {
    content: counter(count, decimal);
    display: flex !important;
    height: 2rem;
    width: 2rem;
    border-radius: var(--circle);
    background: var(--color-lt);
    align-items: center;
    justify-content: center;
    align-self: center;
  }
}

.member-profile-information .instruction {
    display: revert;
    line-height: 1.3;

    & * {
      display: revert;
    }

    & a {
      display: revert;
      color: var(--color-med);
      font-weight: bold;
    }
  }

.member-profile-information .info {
  line-height: 1.3;
  align-items: center;

  &.isValid svg{
    color: var(--business-med);
  }

  & svg {
    stroke-width: 1.5;
    margin-right: .5rem;
    flex-shrink: 0;
    order: -1;
  }
}


.member-profile-information :is(.call-to-action,.call-to-action-alternative) {
  width: 100%;
  padding: 1rem;
  box-shadow: none;
  align-items: center;
  justify-content: center;
  background: var(--color-med);
  color: white;
  font-weight: 500;
  border: 1px solid transparent;
  position:relative;

  &:hover,&:focus {
   color: var(--compare);
   background: var(--contrast);
   text-decoration: underline;
   border-color: var(--contrast);
 }
  &:hover {
    box-shadow: var(--concave-sm);
  }
}

.member-profile-information .call-to-action-alternative,
.member-profile-information:has(.call-to-action-alternative:focus) .call-to-action {
  background: transparent;
  color: var(--contrast);
  border-radius: .25rem;
  border: 1px solid var(--contrast-less);
}

.member-profile-information .highlighted-information {
  column-gap: .5rem;
  width: 100%;
  align-items: center;
  justify-content: center;
  background: var(--color-highlight);
  color: var(--color-darkest);
  font-weight: 600;
  padding: .5rem;
  word-break: break-word;
}

.member-profile-information .otp {
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: .5rem;
  text-align: center;
  border: 1px solid var(--color-lt);
}

.member-profile-information .cancel-action {
  width: 100%;
  align-items: center;
  justify-content: center;
}

.member-profile-information .qr-code {
  max-width: 10rem;
  width: 50%;
  align-self: center;
  justify-self: center;
}

.member-profile-information .reduce-font {
  font-size: .85rem;
}


.member-profile-information:has(#login) {
  width: 350px;
}

.member-profile-information 
  form:has(h1.title) 
  h1.title {
  margin-bottom: .5rem;
}

.member-profile-information label:has(input[type="checkbox"]){
  cursor: pointer;
  user-select: none;
}

.member-profile-information .instruction :is(a:hover,a:focus) {
  text-decoration-thickness:from-font;
  text-decoration-style: dotted;
  color: var(--resident);
}

.member-profile-information :is(.form, form:not(form:has(.form))) {
  flex-direction: column;
  row-gap: 1rem;
}


.member-profile-information .switch-row {
  flex-direction: row;
  column-gap: 1rem;
}

.member-profile-information ul {
  flex-direction: column;
  row-gap:.5rem;
  font-size: .85rem;
}


.member-profile-information .required::before {
  left: calc(100% + .25rem);
  top: 15%;

}

.member-profile-information :is(label,a, .input-wrapper) {
  position: relative;
}

.member-profile-information :is(
a.border-box:focus,
.call-to-action:focus,
.call-to-action-alternative:focus,
.input-wrapper:has(.otp:focus))::after {
  content: "➤";
  position: absolute;
  left: -1.5rem;
  align-self: center;
  color: var(--color-med);
  height: 2ch;
  opacity: 1;
}

.member-profile-information 
a:not(a[class*="call-to-action"], a.border-box):focus-visible{
  align-items: center;
  color: var(--resident);

  &::before
  {
    content: "➤";
    align-self: center;
    color: var(--resident);
    position: relative;
    padding: 0 .5rem;
  }
}

.member-profile-information .call-to-action:is([disabled],.disabled) {
  box-shadow: none !important;
  background: transparent;
  border-color: var(--compare);
  color: var(--compare);

  &:hover {
    background: transparent;
    box-shadow: none !important;
    color: var(--compare);
    border-color: var(--compare) !important;
  }
}

@media screen and (max-width: 480px) {
  .member-profile-information ol li {
    max-width: unset !important;
    margin-left: unset !important;
  }
}