@import url(main.css);

.modal-backdrop {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0%;
  left: 0%;
  background: #2d2c2c30;
}

/* modal */
.modal {
  position: fixed;
  width: 55%;
  max-width: 1021px;
  height: auto;
  padding: var(--ws-3);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--primary-clr);
  background-image: url("../assets/images/main-bg.webp");
  background-position: bottom;
  background-repeat: no-repeat;
  background-size: contain;
  transition: 0.5s;
  border-radius: var(--onboarding-radius);
  animation: modaldrop 0.7s forwards;
}

.modal.is-active {
  transform: translate(-50%, -400%);
}

@keyframes modaldrop {
  from {
    top: -50%;
  }
  to {
    top: 50%;
  }
}

.modal-counter {
  opacity: 0;
  transition: 0.3s;
}

.modal-counter > span {
  width: 20px;
  height: 20px;
  border-radius: var(--br-auto);
  background: var(--tint-dark-clr);
}

.modal-counter span.is-active {
  background: var(--red-clr);
  color: var(--primary-clr);
}

.modal-content {
  width: 100%;
  height: 100%;
  padding: var(--ws-2);
  transition: 0.3s ease-in-out;
}

.modal-navigation {
  margin-top: var(--ws-2);
  gap: var(--ws-1);
}

.modal-navigation .primary-btn {
  cursor: pointer;
}

.modal-text {
  width: 60%;
  text-align: center;
  margin: 0px auto;
}

.previous > p {
  font-size: var(--paragraph-ff);
}

.previous > p:hover {
  color: var(--blue-clr);
  cursor: pointer;
}

/* onboarding style */
.onboard-content {
  width: 100%;
  height: 100%;
  transition: ease-in;
}

.onboarding {
  gap: var(--ws-1);
}

.onboarding-title {
  text-align: center;
  margin: 0px auto;
  max-width: 350px;
}

.onboard-img-1, .onboard-img-2, .onboard-img-3 {
  height: auto;
  margin: 0px auto;
}

.onboard-img-1 {
  width: 45%;
}

.onboard-img-2 {
  width: 30%;
}

.onboard-img-3 {
  width: 15%;
}

.time-title {
    width: 300px
}

.call-title, .like-title {
    width: 400px;
}

.hilite-div {
  max-width: 564px;
  margin: var(--ws-2) auto 0px;
}

.hilite-paragraph {
    width: 80%;
    margin: 0px auto;
}

.business-info-container {
  position: relative;
  width: 374px;
  max-width: 526px; 
  height: 40px;
  border: 1px solid var(--tint-text-clr);
  padding: var(--ws-1);
  border-radius: var(--br-1);
  margin: 12px auto 0px;
  cursor: pointer;
}

.business-info-container input {
  width: 100%;
  border: 0px;
  outline: none;
  color: var(--dark-clr);
  padding: 0px 0.3rem;
  cursor: pointer;
  font-size: var(--paragraph-ff);
  font-weight: 600;
}

.business-info-container::before {
  content: attr(data-label);
  position: absolute;
  color: var(--tint-text-clr);
  font-size: var(--paragraph-ff);
  height: auto;
  width: fit-content;
  background: var(--primary-clr);
  top: -20%;
  left: 10px;
  padding: 0px 0.3rem;
}

.business-number-input {
  gap: var(--ws-2);
  min-width: 354px;
  max-width: 537px;
  margin: 0px auto;
}

.business-number-input .business-info-container {
  width: 50%;
}

/* business category */
.business-info-container .misc-dark-text {
  padding: 0px 0.3rem;
}

/* onboarding animation and classes  */
@keyframes heightin {
  from {
    height: 0px;
  }
  to {
    height: fit-content;
  }
}

.hidden {
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.on-display {
  /* animation: heightin 1s forwards; */
  opacity: 1;
}

@media (max-width: 1112px) {
  .modal-text { 
    width: 70%;
  }
}


@media (max-width: 974px) {
  .modal {
    width: 100%;
    height: 100vh;
    border-radius: 0px;
  }

  .modal-content {
    display: grid;
    place-content: center;
  }

  .business-number-input {
    flex-direction: column;
  }
  .business-number-input .business-info-container, .business-info-container {
    width: 100%;
  }
}

@media (max-width: 689px) {
  .modal {
    width: 100%;
    padding: var(--ws-2);
  }

  .modal-content {
    padding: 0px;
  }

  .modal-text {
    width: 80%;
  }

  .onboard-img-1 {
    width: 85%;
  }
  
  .onboard-img-2 {
    width: 60%;
  }
}

@media (max-width: 482px) {
  .business-number-input .business-info-container, .business-info-container {
    width: 80%;
  }
}
