#auth-pop-up {
  z-index: 1000;
  position: relative;
}

#auth-pop-up .header-account {
  position: fixed;
  top: 0;
  right: -150%;
  z-index: 1000;
  opacity: 0;
  height: 100%;
  width: 400px;
  padding: 20px 30px 30px;
  background-color: var(--color--white);
  color: var(--color--dark);
  font-size: var(--font-size--body);
  font-weight: 400;
  transition: all 0.5s ease-in-out;
  overflow-y: auto;
  @media (max-width: 470px) {
    width: 300px;
  }
  @media (max-width: 370px) {
    padding: 10px 10px 10px;
  }
}

#auth-pop-up .header-account.active {
  right: 0;
  opacity: 1;
}

#auth-pop-up .header-account__close-icon {
  position: absolute;
  cursor: pointer;
  top: 0;
  /* right: 100%; */
  width: 40px;
  height: 40px;
  padding: 13px;
  margin: 9px;
  border-radius: 50%;
  border: 1px solid black;
  background-color: var(--color--white);
  display: flex;
  justify-content: center;
  align-items: center;
}

#auth-pop-up .header-account__container,
#auth-pop-up .header-account__title-link {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
}

#auth-pop-up .header-account__container {
  gap: 30px;
}

#auth-pop-up .header-account__title-link {
  gap: 15px;
}

#auth-pop-up .header-account__title-icon {
  width: 24px;
  height: 24px;
}

#auth-pop-up .header-account__title {
  position: relative;
}

#auth-pop-up .header-account__title::before {
  content: "";
  height: 2px;
  width: 0;
  right: 0;
  position: absolute;
  transition: all 0.5s ease-in-out;
  bottom: -4px;
  background: currentColor;
}

#auth-pop-up .header-account__title-link:hover .header-account__title::before {
  width: 100%;
  left: 0;
  right: auto;
}

#auth-pop-up .header-account__content,
#auth-pop-up .form-login,
#auth-pop-up .form-reg {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 25px;
}

#auth-pop-up .form-login,
#auth-pop-up .form-reg {
  display: none;
  align-items: start;
}

#auth-pop-up .form-login.active,
#auth-pop-up .form-reg.active {
  display: flex;
}

#auth-pop-up .header-account__tabs {
  width: 100%;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-around;
  align-items: start;
  border-bottom: 1px solid var(--color--gray);
}

#auth-pop-up .tabs__item {
  width: 50%;
  text-align: center;
  opacity: 0.5;
  position: relative;
  color: var(--color--dark);
  font-size: var(--font-size--body);
  font-weight: 400;
  line-height: 150%;
  text-transform: uppercase;
}

#auth-pop-up .tabs__item::after {
  position: absolute;
  bottom: -11px;
  content: "";
  height: 2px;
  width: 0;
  right: 0;
  transition: all 0.5s ease-in-out;
  background: currentColor;
}

#auth-pop-up .tabs__item.active {
  opacity: 1;
}

#auth-pop-up .tabs__item.active::after {
  width: 100%;
  left: 0;
  right: auto;
}

#auth-pop-up #error-msg {
  color: var(--color--primary);
  font-weight: 600;
}

#auth-pop-up .form-login__row,
#auth-pop-up .form-reg__row {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

#auth-pop-up .label-text {
  text-transform: initial;
}

#auth-pop-up .input-text {
  border: 1px solid var(--color--grayscale-stroke);
  background-color: var(--color--white);
  outline: none;
  border-radius: 6px;
  width: 100%;
  padding: 10px;
  color: var(--color--dark);
  font-size: var(--font-size--body);
  box-shadow: none;
  text-align: start;
  cursor: text;
}

#auth-pop-up .form-login__row.error .input-text,
#auth-pop-up .form-reg__row.error .input-text {
  border: 1px solid var(--color--primary);
}

#auth-pop-up .form-login__row .error-message,
#auth-pop-up .form-reg__row .error-message {
  font-size: var(--font-size--small--mob);
  text-transform: initial;
  color: var(--color--primary);
  opacity: 0;
}

#auth-pop-up .form-login__row.error .error-message,
#auth-pop-up .form-reg__row.error .error-message {
  opacity: 1;
}

#auth-pop-up .input-text:focus {
  border: 1px solid var(--color--dark);
}

#auth-pop-up .input-password__wrapper {
  position: relative;
}

#auth-pop-up #password {
  padding: 10px 30px 10px 10px;
}

#auth-pop-up .show-password,
#auth-pop-up .hide-password {
  cursor: pointer;
  position: absolute;
  top: calc(50% - 8px);
  right: 12px;
}

.input-password__wrapper[data-type="password"] .hide-password,
.input-password__wrapper[data-type="text"] .show-password {
  display: none;
}

#auth-pop-up .field-lost-password {
  display: flex;
  flex-direction: row;
  justify-content: end;
  align-items: center;
  text-transform: initial;

  display: none;
}

#auth-pop-up .lost-password {
  text-decoration: underline;
  transition: all 0.5s ease-in-out;
}

#auth-pop-up .lost-password:hover {
  opacity: 0.5;
}

#auth-pop-up .button {
  width: 100%;
  padding: 10px;
  color: var(--color--white);
  font-size: var(--font-size--body);
  text-transform: initial;
  border: 1px solid var(--color--primary);
  background-color: var(--color--primary);
  color: var(--color--white);
  border-radius: 12px;
  transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

#auth-pop-up .button:hover {
  cursor: pointer;
  background-color: var(--hover--background--color--btn);
  color: var(--hover--color--btn-text);
}

#auth-pop-up .form-reg > p {
  text-transform: initial;
}

#auth-pop-up .privacy-policy-link {
  font-weight: 600;
}

#auth-pop-up .my-account__content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 20px;
}

#auth-pop-up .my-account__menu {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: start;
  gap: 20px;
}

#auth-pop-up .my-account__menu li {
  width: 100%;
}

#auth-pop-up .my-account__menu li a:hover {
  opacity: 0.5;
}

#auth-pop-up .auth-fixed-overlay {
  position: fixed;
  overflow: auto;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 1;
  transition: all 0.5s ease-in-out;
  display: none;
  opacity: 0;
}

#auth-pop-up .auth-fixed-overlay.active {
  display: block;
}

#auth-pop-up .auth-fixed-overlay.opacity {
  opacity: 1;
}

#auth-pop-up .loader {
  display: flex;
  justify-content: center;
  align-items: center;
}

#auth-pop-up .loader:after {
  content: " ";
  display: block;
  width: 64px;
  height: 64px;
  margin: 5% auto;
  border-radius: 50%;
  border: 6px solid var(--color--white);
  border-color: var(--color--white) transparent var(--color--white) transparent;
  animation: loader 1.2s linear infinite;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

#auth-pop-up .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1006;
  opacity: 1;
  transition: all 0.5s;
}

#auth-pop-up .hidden {
  display: none;
}