@import "./css/variables.css";

body {
  height: 100vh;
  overflow: hidden;
  background-image: url(/images/registration/bg.png);
}

/* status modal */

.bg_galassmorphism__dark {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(50px);
  width: 100vw !important;
  height: 100vh !important;
  position: fixed !important;
  z-index: 1;
  display: block !important;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

.bg_glassmorphism_2 {
  background-color: rgba(255, 255, 255, 0.1);
}

.status__modal {
  position: relative;
  overflow-x: hidden;
  overflow-y: clip;
  border: 2px solid rgba(255, 255, 255, 0.2);
  width: 100%;
  height: 50vh;
  position: fixed !important;
  z-index: 2;
  border-radius: 2rem 2rem 0 0;
  border-bottom: none !important;
  display: grid; /* grid*/
  align-content: space-around;
  justify-items: center;
  /* top: 0; */
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

.status__modalـtimelinetext {
  font-size: 1.8rem;
  font-family: dana-farsi-num;
}
.status__modal_timeline {
  position: absolute;
  content: "";
  width: 100%;
  height: 1rem;
  background-color: var(--primery-color);
  bottom: -2px !important;
  left: 0 !important;
  transition: all 500ms ease;
}

.status__modal_tag {
  display: flex;
  align-items: center;
  gap: 1rem;
  background-color: var(--primery-color);
  border-radius: 5rem;
  padding: 1rem;
}

.status__modal_tagـtext {
  font-family: dana-regular;
}

.status__modal__message {
  text-align: center;
}

.status__modal_title {
  font-family: dana-heavy;
  font-size: 2.2rem;
  margin-bottom: 1rem;
}
.status__modalـtext {
  margin-bottom: 1rem;
}

.status__modal_btns {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 2rem 2rem 0rem 2rem !important;
}

.status__modal_btn {
  border-radius: 1.5rem;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40% !important;
  height: 7rem;
  font-size: 1.8rem;
  background-color: var(--primery-color) !important;
  color: #fff;
}

.status__modal_btn:hover {
  background-color: #004099 !important;
}

.status__modal_btn_important {
  width: 70% !important;
  background: none !important;
  background-color: purple !important;
}

.status__modal_btn_important:hover {
  background-color: rgb(77, 0, 77) !important;
}

/* if click on link class should be sign up ro sign in */
/* control class name changing with flag */

.register--active {
  display: flex !important;
}

.register {
  width: 100%;
  position: absolute;
  bottom: 0;
  border-radius: 2rem 2rem 0 0;
  border-bottom: none !important;

  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(2rem);
  padding: 2rem;
  display: flex;
  height: 80vh;
  overflow-y: scroll;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}

.signIn #signup__userfullname__wrapper {
  display: none;
}

.signIn #checkbox__wrapper {
  display: none;
}

.signIn .register__link,
.signIn .register__btn {
  display: none;
}

.signIn #signUp__link,
.signIn #signIn__btn {
  display: block;
}

.signIn #sigIn_userName {
  display: block !important;
}

#signUp__link,
#signIn__btn {
  display: none;
}

.signIn .register {
  height: 60vh !important;
}

.register::-webkit-scrollbar {
  width: 0;
}

.register-logo {
  width: 10rem;
}

.register-wrapper {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.register__input-box {
  position: relative;
}

.register__input-img {
  width: 100%;
}

.register__input {
  position: absolute;
  left: 0;
  bottom: 15px;
  right: 0;
  padding-right: 3rem;
  height: 4rem;
  font-size: 1.4rem;
  font-family: dana-extra-bold;
}

.register__input-message-box {
  margin-top: -1rem;
  display: none;
}

.register__input-message {
  justify-content: start;
  gap: 5px;
}

.eyes {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  left: 1rem;
  top: 0;
  bottom: 0;
  margin: auto;
}

.eyes svg {
  width: 2.7rem;
  height: 2.7rem;
  cursor: pointer;
}

.eyes svg path {
  stroke: #006cff;
}

#hide__password {
  display: none;
}

.register__input-message-text--success {
  color: var(--success) !important;
}

.register__input-message-icon path {
  stroke: var(--accent-color);
}

.register__input-message-icon--success path {
  stroke: var(--success);
}

.register__input-message svg {
  width: 2rem;
  height: 2rem;
}

.register__input-messsage-text {
  font-size: 1.4rem;
  font-family: dana-regular;
  color: var(--accent-color);
}

#register_username_message > p,
#signup__password_message > p {
  font-size: 1.8rem !important;
}

.register__checkbox-wrapper {
  justify-content: start;
  gap: 1.5rem;
}

.register__checkbox-wrapper > label,
a {
  color: var(--primery-color);
}

.register__checkbox {
  display: none;
}

.register__checkbox:checked + .register__checkbox-style {
  background-image: url(/images/registration/checked.svg) !important;

  background-position: center;
  background-size: contain;
}

.register__checkbox-style {
  display: block;
  width: 4rem;
  height: 4rem;
  border: 2px solid var(--primery-color);
  border-radius: 100%;
}

.register__rules {
  text-decoration: underline;
}

.register__btn-box {
  width: 100%;
  text-align: center;
  display: grid;
  gap: 3rem;
}

.register__btn-box p {
  color: var(--accent-color);
  display: none;
}

.register__btn {
  padding: 2rem;
  background-color: var(--primery-color);
  border-radius: 2rem;
  width: 100%;
  font-size: 2rem;
}

.register__btn:hover {
  background-color: #0159d4;
  transition: all ease 250ms;
}

.register__link {
  font-family: dana-regular;
  color: #9097a4;
}