.customer.register, .customer.login, .contact {
  h1, h2 {
    --font-size: 2rem;
    font-family: var(--font-family-secondary);
    font-size: var(--font-size);
    letter-spacing: calc(var(--font-size) * 0.1);
    text-transform: uppercase;
  }
}

@media screen and (min-width: 1024px) {
  .customer.register, .customer.login, .contact {
    h1, h2 {
      --font-size: 2.8rem;
    }
  }
}

.form-container .field {
  display: flex;
  flex-direction: column;
  justify-content: start;
  text-align: start;
  color: #2D2523;
  font-family: var(--font-family-primary);
  label {
    position: static;
    display: block;
    font-size: 1.4rem;
    margin-bottom: 0.8rem;
  }

  input, input:focus, textarea, textarea:focus {
    position: static;
    display: block;
    border: none;
    padding: 1.2rem 0.4rem;
    border: none;
    box-shadow: none;
    font-size: 1.2rem;
    font-weight: 300;
  }

  input::placeholder, textarea::placeholder {
    opacity: 1;
    display: block;
    color: #2D2523;
    font-weight: 300;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
  }
  input:focus::placeholder, textarea:focus::placeholder {
    opacity: 0;
  }

  hr {
    margin: 0;
    height: 1px;
    background-color: #D3C8BE ;
  }

  input:focus ~ hr, textarea:focus ~ hr {
    opacity: 1;
  }
}

@media screen and (min-width: 1024px) {
  .form-container .field {
    label {
      font-size: 1.6rem;
    }

    input, input:focus, textarea, textarea:focus {
      padding: 1.4rem 0.4rem;
      font-size: 1.4rem;
    }

    input::placeholder, textarea::placeholder {
      font-size: 1.4rem;
    }
  }
}

.form-container .field:hover {
  outline: none;
}

.form-container .field::after, .form-container .field::before {
  content: none;
}

password-input-toggler {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.customer.login, .customer.register, .contact {
  password-input-toggler {
    color: #2D2523;
    background: none;
  
    button {
      background: none;
      border: none;
      color: inherit;
      font-size: 1.2rem;
      font-weight: 300;
      cursor: pointer;
      margin: 0;
      padding-right: 0.4rem;
      width: fit-content;
      min-width: auto;
      min-height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    span {
      height: fit-content;
      width: fit-content;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    svg {
      width: 2rem;
      height: auto;
    }
  
    button::after, button::before {
      content: none;
    }
  
    button:not([data-status="hidden"]) {
      span[data-status-hidden] {
        display: none;
      }
    }
  
    button:not([data-status="showing"]) {
      span[data-status-showing] {
        display: none;
      }
    }
  }
}