.auth-page {
  background: var(--color-hero-fade);
}

.registration {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100svh;
  padding: 42px var(--container-padding);
}

.registration__layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 636px));
  gap: 24px;
  width: min(100%, 1296px);
  min-height: 870px;
}

.registration__panel,
.registration-slider {
  min-height: 833px;
  border-radius: var(--radius-2xl);
}

.registration__panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 42px 24px;
  background: var(--color-neutral-0);
}

.registration__top {
  display: flex;
  flex-direction: column;
  gap: 48px;
}

.registration__back-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  line-height: 130%;
  text-decoration: none;
}

.registration__back-link svg {
  flex: 0 0 20px;
}

.registration__back-link--button {
  padding: 0;
}

.registration__back-link:focus-visible {
  outline: var(--focus-ring-width) solid rgb(var(--color-primary-rgb) / 0.22);
  outline-offset: var(--focus-ring-offset);
}

.registration__bottom {
  display: flex;
  justify-content: flex-start;
  margin-top: 32px;
}

.registration__bottom .registration__back-link {
  align-self: center;
}

.registration__otp-back {
  display: none;
}

.registration.is-otp-active .registration__home-back {
  display: none;
}

.registration.is-otp-active .registration__otp-back {
  display: inline-flex;
}

.registration__brands {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
}

.registration__brands-logo {
  display: block;
  width: 281px;
  max-width: 100%;
  height: auto;
}

.registration__form-area {
  display: flex;
  flex-direction: column;
  gap: 42px;
}

.registration__intro {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.registration__title {
  margin: 0;
  color: var(--color-text);
  font-size: 28px;
  font-weight: var(--font-weight-semibold);

  text-align: center;
}

.registration__tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  box-shadow: inset 0 -1px 0 var(--color-black-05);
}

.registration__tab {
  min-width: 0;
  padding: 0 20px 20px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--color-black-03);
  font-size: 13px;
  font-weight: var(--font-weight-medium);

  text-align: center;
  white-space: nowrap;
  cursor: pointer;
}

.registration__tab.is-active {
  position: relative;
  z-index: 1;
  border-bottom-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.registration__tab:focus-visible {
  outline: var(--focus-ring-width) solid rgb(var(--color-primary-rgb) / 0.22);
  outline-offset: var(--focus-ring-offset);
}

.registration__form {
  gap: 32px;
}

.registration__message {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--color-success-surface);
  color: var(--color-success);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  line-height: 130%;
}

.registration__message.is-error {
  background: var(--color-error-surface);
  color: var(--color-error);
}

.registration__flow-panel[hidden] {
  display: none;
}

.registration__row {
  gap: 8px;
}

.registration .form-field__error {
  min-height: 0;
}

.registration__password-toggle {
  right: 10px;
}

.registration__eye {
  display: block;
  width: 18px;
  height: 18px;
  background: var(--color-text);
  mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9178 10.1678C10.7428 10.4629 10.5027 10.714 10.2158 10.9021C9.92884 11.0902 9.60273 11.2102 9.26235 11.253C8.92196 11.2958 8.5763 11.2602 8.25176 11.149C7.92723 11.0378 7.63241 10.8538 7.38983 10.6113C7.14724 10.3687 6.96331 10.0739 6.85209 9.74933C6.74086 9.42479 6.70528 9.07913 6.74807 8.73874C6.79085 8.39836 6.91087 8.07225 7.09896 7.78534C7.28704 7.49843 7.53821 7.2583 7.83329 7.0833M13.4955 12.7456C12.2025 13.7263 10.6229 14.2549 8.99999 14.25C7.68155 14.2735 6.38269 13.9288 5.24937 13.2547C4.11606 12.5806 3.19319 11.6037 2.58449 10.434C2.36445 9.98799 2.25 9.49733 2.25 9C2.25 8.50267 2.36445 8.01201 2.58449 7.566C3.20542 6.32948 4.19523 5.31646 5.41703 4.66704M15.3178 10.6002C15.3479 10.5432 15.3871 10.4921 15.4155 10.434C15.6355 9.98799 15.75 9.49732 15.75 8.99999C15.75 8.50266 15.6355 8.012 15.4155 7.56599C14.8068 6.39624 13.8839 5.41942 12.7506 4.74531C11.6173 4.0712 10.3184 3.72652 8.99999 3.75C8.8314 3.75 8.66751 3.7725 8.50107 3.78346M15.75 15L2.99999 2.25' stroke='black' stroke-width='0.9375' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9178 10.1678C10.7428 10.4629 10.5027 10.714 10.2158 10.9021C9.92884 11.0902 9.60273 11.2102 9.26235 11.253C8.92196 11.2958 8.5763 11.2602 8.25176 11.149C7.92723 11.0378 7.63241 10.8538 7.38983 10.6113C7.14724 10.3687 6.96331 10.0739 6.85209 9.74933C6.74086 9.42479 6.70528 9.07913 6.74807 8.73874C6.79085 8.39836 6.91087 8.07225 7.09896 7.78534C7.28704 7.49843 7.53821 7.2583 7.83329 7.0833M13.4955 12.7456C12.2025 13.7263 10.6229 14.2549 8.99999 14.25C7.68155 14.2735 6.38269 13.9288 5.24937 13.2547C4.11606 12.5806 3.19319 11.6037 2.58449 10.434C2.36445 9.98799 2.25 9.49733 2.25 9C2.25 8.50267 2.36445 8.01201 2.58449 7.566C3.20542 6.32948 4.19523 5.31646 5.41703 4.66704M15.3178 10.6002C15.3479 10.5432 15.3871 10.4921 15.4155 10.434C15.6355 9.98799 15.75 9.49732 15.75 8.99999C15.75 8.50266 15.6355 8.012 15.4155 7.56599C14.8068 6.39624 13.8839 5.41942 12.7506 4.74531C11.6173 4.0712 10.3184 3.72652 8.99999 3.75C8.8314 3.75 8.66751 3.7725 8.50107 3.78346M15.75 15L2.99999 2.25' stroke='black' stroke-width='0.9375' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.registration__password-toggle[aria-pressed="true"] .registration__eye {
  mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5915 7.41C11.4697 8.28825 11.4697 9.714 10.5915 10.5937C9.71325 11.472 8.2875 11.472 7.40775 10.5937C6.5295 9.7155 6.5295 8.28975 7.40775 7.41C8.2875 6.53025 9.7125 6.53025 10.5915 7.41Z' stroke='black' stroke-width='0.9375' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.25 9C2.25 8.50575 2.364 8.01675 2.5845 7.566C3.72075 5.24325 6.23175 3.75 9 3.75C11.7682 3.75 14.2793 5.24325 15.4155 7.566C15.636 8.01675 15.75 8.50575 15.75 9C15.75 9.49425 15.636 9.98325 15.4155 10.434C14.2793 12.7567 11.7682 14.25 9 14.25C6.23175 14.25 3.72075 12.7567 2.5845 10.434C2.364 9.98325 2.25 9.49425 2.25 9Z' stroke='black' stroke-width='0.9375' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.5915 7.41C11.4697 8.28825 11.4697 9.714 10.5915 10.5937C9.71325 11.472 8.2875 11.472 7.40775 10.5937C6.5295 9.7155 6.5295 8.28975 7.40775 7.41C8.2875 6.53025 9.7125 6.53025 10.5915 7.41Z' stroke='black' stroke-width='0.9375' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.25 9C2.25 8.50575 2.364 8.01675 2.5845 7.566C3.72075 5.24325 6.23175 3.75 9 3.75C11.7682 3.75 14.2793 5.24325 15.4155 7.566C15.636 8.01675 15.75 8.50575 15.75 9C15.75 9.49425 15.636 9.98325 15.4155 10.434C14.2793 12.7567 11.7682 14.25 9 14.25C6.23175 14.25 3.72075 12.7567 2.5845 10.434C2.364 9.98325 2.25 9.49425 2.25 9Z' stroke='black' stroke-width='0.9375' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.registration__consents {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.registration__consent {
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  color: var(--color-text);
  font-size: var(--font-size-sm);
}

.registration__consent a {
  color: inherit;
}

.registration__consent-copy > :first-child {
  margin-top: 0;
}

.registration__consent-copy > :last-child {
  margin-bottom: 0;
}

.registration__form.was-validated .registration__consent:has(input:invalid) .form-check__control {
  border-color: var(--color-error);
  background: var(--color-error-surface);
}

.registration__submit {
  width: 100%;
  min-height: 50px;
  border-radius: var(--radius-lg);
  font-size: 13px;
}

.registration__submit:disabled,
.registration__form.is-submitting .registration__submit {
  cursor: wait;
  opacity: 0.72;
}

.registration__account-form,
.registration__otp-form {
  gap: 32px;
}

.registration__account-heading,
.registration__otp-heading {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.registration__account-heading h2,
.registration__account-heading p,
.registration__otp-heading h2,
.registration__otp-heading p {
  margin: 0;
  color: var(--color-text);
}

.registration__account-heading h2,
.registration__otp-heading h2 {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-medium);
}

.registration__account-heading p,
.registration__otp-heading p {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
}

.registration__account-actions,
.registration__otp-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.registration__account-actions p,
.registration__otp-actions p {
  margin: 0;
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);

  text-align: center;
}

.registration__otp-heading strong {
  font-weight: var(--font-weight-semibold);
}

.registration__otp-group {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.registration__otp-input {
  width: 100%;
  min-width: 0;
  height: 90px;
  padding: 16px;
  border: solid 1px var(--color-brown-04);
  border-radius: var(--radius-md);
  outline: 0;
  background: var(--field-background);
  color: var(--color-text);
  font-family: var(--font-primary);
  font-size: 42px;
  font-weight: var(--font-weight-regular);

  text-align: center;
  caret-color: var(--color-brown-04);
  transition:
    border-color 160ms ease,
    box-shadow 160ms ease,
    background-color 160ms ease;
}

.registration__otp-input:focus {
  border-color: var(--color-brown-01);
}

.registration__otp-form.was-validated .registration__otp-input:invalid {
  border-color: var(--color-error);
  background: var(--color-error-surface);
  box-shadow: none;
}

.registration__otp-actions button[data-registration-resend] {
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.registration__otp-actions button[data-registration-resend]:focus-visible {
  outline: var(--focus-ring-width) solid rgb(var(--color-primary-rgb) / 0.22);
  outline-offset: var(--focus-ring-offset);
}

.registration-slider {
  position: relative;
  overflow: hidden;
  background: var(--color-hero-background);
}

.registration-slider__viewport,
.registration-slider__track,
.registration-slider__slide {
  width: 100%;
  height: 100%;
  min-height: inherit;
}

.registration-slider__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px 72px 110px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease;
}

.registration-slider__slide.is-active {
  z-index: 1;
  opacity: 1;
  pointer-events: auto;
}

.registration-slider__image,
.registration-slider__placeholder,
.registration-slider__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.registration-slider__image {
  max-width: none;
  object-fit: cover;
  object-position: center bottom;
}

.registration-slider__placeholder {
  background: var(--color-hero-background);
}

.registration-slider__placeholder::after {
  position: absolute;
  inset: 24px;
  border: 1px dashed var(--color-brown-04);
  border-radius: var(--radius-xl);
  content: "";
}

.registration-slider__overlay {
  background: linear-gradient(to bottom, transparent 45%, rgb(0 0 0 / 0.7) 100%);
}

.registration-slider__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  color: var(--color-neutral-0);
  text-align: center;
}

.registration-slider__title {
  margin: 0;
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
}

.registration-slider__description {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-regular);
}

.registration-slider__description > :last-child {
  margin-bottom: 0;
}

.registration-slider__pagination {
  position: absolute;
  bottom: 56px;
  left: 50%;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 8px;
  transform: translateX(-50%);
}

.registration-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-neutral-0);
  cursor: pointer;
  transition:
    width 160ms ease,
    height 160ms ease;
}

.registration-slider__dot.is-active {
  width: 12px;
  height: 12px;
}

.registration-slider__dot:focus-visible {
  outline: 2px solid var(--color-neutral-0);
  outline-offset: 3px;
}

@media (max-width: 1024px) {
  .registration {
    display: block;
    padding: 20px;
  }

  .registration__layout {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  .registration__panel,
  .registration-slider {
    min-height: auto;
    border-radius: 0;
  }

  .registration__panel {
    padding: 32px 20px 24px;
    border-radius: 16px;
    min-height: 85dvh;
  }

  .registration__top {
    gap: 36px;
  }

  .registration__brands {
    gap: 16px;
  }

  .registration__form-area {
    gap: 32px;
  }

  .registration__title {
    font-size: 24px;
  }

  .registration__tab {
    padding-inline: 8px;
    font-size: 12px;
  }

  .registration__row {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .registration__otp-input {
    height: 72px;
    padding: 8px;
    font-size: 32px;
    line-height: 118%;
  }

  .registration__consent {
    align-items: start;
  }

  .registration-slider {
    display: none;
  }

  .registration-slider__slide {
    padding: 64px 24px 90px;
  }

  .registration-slider__title {
    font-size: 28px;
  }

  .registration-slider__description {
    font-size: 16px;
  }

  .registration-slider__pagination {
    bottom: 40px;
  }

  .registration__bottom {
    justify-content: center;
  }

  .registration__account-actions {
    min-height: 170px;
    display: flex;
    justify-content: flex-end;
  }
}