/* :root {
  --clr--primary: #008bc5;
  --container--padding: 5rem;
  --font--primary--clr: #404041;
  --font--accent--clr: #767E7E;
} */

.register {
  padding: 4rem 10rem;
  display: flex;
}

.register_image {
    width: 50%;
    display: flex;
    justify-content: center;
}

.register_image img {
    object-fit: contain;
    display: flex;
    align-self: flex-start;
}

.register_body {
    width: 50%;
    padding-inline: 3.75rem;
}

.register__tabs {
  display: flex;
  align-items: stretch;
  padding-left: 0;
  list-style: none;
  border: 1px solid #E4E4E4;
  border-radius: 23px;
}

.register__tab {
  font-family: "Montserrat",sans-serif;
  width: 100%;
  padding-block: 1rem;
  color: #000;
  font-weight: 500;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  display:flex;
  justify-content: center;
  align-items: center;
  font-size: 1.5rem;
}

.ar .register__tab {
  text-align: right;
}

.register__tab:last-child {
  text-align: center;
}


.register__tabs__body {
  width: 100%;
  padding-block: 3rem;
}

.register__tab__body {
  flex-direction: column;
  gap: 22px
}

.login__body,
.signup__body {
  width: 100%;
  display: none;
}

.signup__body {
    flex-direction: column-reverse;
}

.active {
  display: flex;
  color: var(--clr--primary);
  position: relative;
}

.register__tab.active::before {
    content: '';
    width: 20%;
    height: 5px;
    border-radius: 23px;
    background-color: var(--clr--primary);
    position: absolute;
    bottom: 0;
}

.login__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}
.ar .login__form {
  padding-left: 10%;
  padding-right: 0;
}

.signup__form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}
.ar .signup__form {
  padding-inline: 1rem 3rem;
}

.phone__container,
.password__container,
.name__container,
.email__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  color: #5B5B5B;
  background-color: #FAFAFA;
  font-size: 1.25rem;
  border-radius: 30px;
  padding: 0.5rem 2rem;
}

.password__input__container{
    position:relative;
}

.show__password {
    position: absolute;
    top: 50%;
    /*right: 1rem;*/
    cursor: pointer;
    width: 20px;
    transform: translateY(-50%);
}

.phone__input,
.password__input,
.name__input,
.email__input {
  display: inline-block;
  width: 100%;
  background-color: #FAFAFA;
  color: #5B5B5B;
  font-size: 1.25rem;
}

.phone__input:focus,
.password__input:focus,
.name__input:focus,
.email__input:focus {
  background-color: #FAFAFA;
  outline: none;
}

.forget-password__btn {
  color: #9F9F9F;
  align-self: flex-end;
}

.login__btn,
.signup__btn {
  font-family: "Montserrat",sans-serif;
  font-size: 1.125rem;
  font-weight: 400;
  width: 100%;
  text-align: center;
  padding: 1rem 2rem;
  margin-top: 1rem;
  text-transform: uppercase;
  border-radius: 23px;
}

.login__links__container,
.signup__links__container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1.5rem;
}

.login__links__text,
.login__links__text__accent,
.sihnup__links__text,
.signup__links__text__accent {
  font-size: 1.25rem;
  font-weight: 700;
  color: #707070;
  text-align: center;
}

.login__links__text__accent,
.signup__links__text__accent {
  color: #9F9F9F;
}

.login__links,
.signup__links {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

.login__link,
.signup__link {
  font-family: "Montserrat",sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  justify-contetn: center
}

@media (max-width:1200px){
  .register {
    padding-inline: 2rem;
  }
}
@media (max-width:1000px){}
@media (max-width: 950px) {
    .register {
        flex-direction: column;
        gap: 5rem
    }
    .register_image {
        display:none;
    }
    .register_body {
        width: 100%;
    }
}
@media (max-width:800px){
  :root {
    font-size: 12px;
  }

  .register__tab__body {
    flex-direction: column;
    padding-inline: 2rem;
  }
  .login__form,
  .signup__form {
    padding-inline: 0;
    width: 100%;
    margin-bottom: 2rem;
  }

  .signup__form {
    order: -1;
  }
  .signup__links,
  .login__links {
    width: 100%;
  }
  .signup__link,
  .login__link {
    justify-content: center;
    gap: 1rem;
  }

  .login__links__container,
  .signup__links__container {
    width: 100%;
  }
}
@media (max-width:700px){
  .register__tab__body {
    padding-inline: 0;
  }
}
@media (max-width:600px){}
@media (max-width:500px){
  .register__tabs__body {
    padding-inline: 0;
  }
  .register_body {
      padding-inline: 0;
  }
}