.customer.login,
.customer.register,
.customer.reset-password {
  --text-color-primary: #002341;
  --text-color-secondary: #576e82;
  --form-container-width: 400px;
  --color-alert: #db1420;

  a {
    text-decoration: underline;
    font-size: var(--font-size--md);

    &:hover,
    &:focus {
      text-decoration: none;
    }
  }
}

.customer.login {
  :target {
    scroll-margin-top: var(--header-group-height, 50px);
  }
}

.customer__section-heading:focus-visible,
.form__message:focus-visible,
#RecoverEmail:focus-visible {
  outline: none;
}

.customer__section-heading,
.customer__section-subheading {
  text-align: center;
}

.customer__section-heading {
  text-transform: uppercase;
  font-size: var(--font-size--4xl);
  max-width: var(--form-container-width);
  margin: 0 auto 8px;
}

.customer__form-wrapper {
  background-color: #f5f6f7;
  border-radius: var(--style-border-radius-sm);
}

.customer__form-content {
  margin: 0 auto;
  max-width: var(--form-container-width);
}

.login .customer__form-content form {
  margin-top: 24px;
}

.customer-field {
  margin-bottom: var(--input-padding-x);
  flex-direction: column;

  &.customer-field--no-indentation {
    margin-bottom: 0;
  }

  input {
    width: 100%;
  }
}

.customer__submit-button {
  width: 100%;
  margin-top: 24px;
}

.customer__link-wrapper {
  margin-top: 8px;
}

.customer__create-account-link {
  margin-block-start: 24px;
  margin-block-end: 0;
  font-size: 16px;
  line-height: 1.7;
}

.customer__main-color {
  color: var(--color-foreground);
}

.password-toggle {
  display: block;
  position: relative;

  .password-toggle__btn {
    position: absolute;
    width: 44px;
    height: 100%;
    top: 50%;
    transform: translateY(-50%);
    right: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
  }

  &:not(.is-visible) .icon-eye--closed {
    display: none;
  }

  &.is-visible .icon-eye--opened {
    display: none;
  }
}

.customer__form-content form:not(#create_customer, #ResetPasswordForm) {
  padding-block-end: 24px;
}

.login__footnote {
  padding-block-start: 24px;
  border-top: 1px solid #d9dee3;
}

.customer__banner {
  display: flex;
  max-width: 26.25rem;
  width: 100%;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  border-bottom-right-radius: var(--style-border-radius-sm);
  border-top-right-radius: var(--style-border-radius-sm);
}

.customer__banner-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.form__errors-wrapper,
.form__message.recovery-success-message {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--padding-2xs);
  border-radius: var(--border-radius-sm);
  padding: var(--padding-lg);
  padding-inline-start: 55px;
  border: 1px solid var(--color-alert);
  background: #fae5e5;
  margin-block: 0 var(--margin-2xl);
  line-height: 1.31;

  &[hidden] {
    display: none;
  }

  * {
    color: var(--color-alert);
  }

  .form__errors-list-wrapper ul {
    margin: 0;
    list-style: none;
    padding: 0;
  }

  .svg-wrapper {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    width: 1.875rem;
    height: 1.875rem;

    svg {
      width: 100%;
      height: 100%;
    }
  }

  .form__message {
    display: flex;
    align-items: center;
    column-gap: 6px;
    margin: 0;
    color: var(--color-alert);

    &:focus-visible {
      outline: none;
    }
  }

  .form__errors-list-wrapper,
  .form__message {
    font-size: var(--font-size--md);

    &.h4 {
      line-height: normal;
      font-family: var(--font-body--family);
      font-weight: 700;
    }
  }

  .form__errors-list-wrapper li a {
    font-size: inherit;
  }
}

.form__message.recovery-success-message {
  background: var(--color-background-success);
  border-color: var(--color-success-secondary);

  *,
  .form__message {
    color: var(--color-success-secondary);
  }
}

.customer-field__error {
  display: none;
  color: var(--color-alert);
}

.customer-field.is-invalid .customer-field__error {
  display: inline;
}

.customer-field--password.is-invalid .customer-field__error {
  display: none;
}

.customer-password-validation {
  display: none;
  color: var(--color-alert);
  font-size: var(--font-size--sm);
  line-height: 1.4;
  margin-bottom: var(--margin-xs);
}

.customer-password-validation.is-visible {
  display: block;
}

.customer-password-mismatch {
  display: none;
  margin: 0 0 var(--margin-xs) 0;
  color: var(--color-alert);
  font-size: var(--font-size--sm);
  line-height: 1.4;
}

.customer-password-mismatch.is-visible {
  display: block;
}

.customer__login-link-wrapper {
  margin-top: var(--margin-2xl);
  text-align: center;
}

@media screen and (max-width: 749px) {
  .shopify-section .customer.login,
  .shopify-section .customer.register,
  .shopify-section .reset-password {
    background-color: #f5f6f7;
  }
}

@media screen and (max-width: 989px) {
  .customer__banner {
    display: none;
  }
}

@media screen and (min-width: 750px) {
  .customer.login .customer__form-wrapper,
  .customer.register .customer__form-wrapper,
  .customer.reset-password .customer__form-wrapper {
    padding-block: var(--padding-5xl);
  }
}

@media screen and (min-width: 990px) {
  .customer__form-wrapper {
    flex: 1;

    &.customer__form-wrapper--with-banner {
      border-bottom-right-radius: 0;
      border-top-right-radius: 0;
    }
  }

  .customer__container {
    display: flex;
  }

  .customer__section-subheading,
  .customer__section-heading {
    text-align: start;
  }
}

.register,
.reset-password {
  .customer__form-content {
    display: flex;
    flex-direction: column;
    gap: var(--gap-2xl);
  }

  .customer__section-heading-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xs);
  }

  .customer__section-heading,
  .customer__section-subheading {
    text-align: start;
  }

  .customer-field__label-info,
  .customer__form-consent {
    font-size: var(--font-size--sm);

    a {
      font-size: inherit;
    }
  }

  .customer__form-consent {
    padding-block-end: var(--padding-2xl);
    border-bottom: 1px solid #d9dee3;
  }

  .customer__login-text {
    font-size: var(--font-size--md);
  }

  .customer__submit-button,
  .customer__login-text,
  .customer__form-consent,
  .customer__section-heading,
  .customer__section-subheading,
  .customer-field__label-info {
    margin: 0;
  }

  .customer-field__label-info {
    line-height: 1.41;
  }

  .customer-field--password {
    .customer-field__label-info {
      margin-block-end: var(--padding-2xs);
    }
  }
}

.reset-password .form__errors-wrapper,
.reset-password .form__message.recovery-success-message {
  margin: 0;
}

.customer-field__checkbox-wrapper {
  margin-block-end: 12px;
}

.customer label.customer-field__checkbox {
  display: flex;
  gap: var(--gap-lg);
  align-items: flex-start;
  padding-block: var(--input-padding-x);

  input[type='checkbox'] {
    width: var(--size--sm);
    height: var(--size--sm);
    flex-shrink: 0;
    background: var(--color-input-background);
    border: var(--border-width-sm) solid #8293a2;
    border-radius: var(--style-border-radius-inputs);
    appearance: none;
    outline: none;
    cursor: pointer;
    position: relative;

    &:checked {
      background-color: #002341;
    }
  }
}

.register .customer__banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 23, 47, 0.8) 0%, rgba(0, 23, 47, 0.9) 100%);
  z-index: 0;
}

.customer__banner-overlay {
  position: absolute;
  padding: 60px;
  top: 0;
  width: 100%;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2xl, 1rem);
  justify-content: flex-start;
  align-items: flex-start;
  color: #ffffff;
}

.customer__banner-heading {
  margin: 0 0 1rem;
  text-transform: uppercase;
  font-size: var(--font-size--3xl);
  line-height: 1.1;
}

.customer__banner-heading-highlight {
  color: var(--register-banner-highlight-color, #ec6500);
}

.customer__banner-usp {
  font-size: var(--font-size--sm, 14px);
}

.customer__banner-usp ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.customer__banner-usp li {
  position: relative;
  padding-left: var(--padding-3xl);
  font-size: var(--font-size--md);
}

.customer__banner-usp li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15' fill='none'%3E%3Cpath d='M13.501 1L5.1159 12.9782C5.00526 13.1372 4.85844 13.2676 4.68751 13.3587C4.51659 13.4498 4.32647 13.499 4.13282 13.5022C3.93916 13.5054 3.74752 13.4625 3.57368 13.3771C3.39984 13.2917 3.24878 13.1662 3.13295 13.011L1 10.1674' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
}