/* temp start */

.metaweb-otp-verification-widget h4 {
  color: black !important;
  font-size: 21px !important;
  font-weight: 600 !important;
  margin-bottom: 0px;
}
.metaweb-otp-verification-widget p {
  font-size: 15px;
  color: black;
  line-height: 23px;
}
input#name {
  color: #000;
  padding: 23px 10px 23px 60px;
  border-radius: 13px;
  border: 1px solid #cdcdcd;
  font-size: 15px;
  width: 100%;
}
input#phone {
  color: #000;
  padding: 23px 10px 23px 73px;
  border-radius: 13px;
  border: 1px solid #cdcdcd;
  font-size: 15px;
  width: 100%;
}
.name-wrapper {
  position: relative;
}
.phone-wrapper {
  position: relative;
}
.name-wrapper:before {
  content: "";
  background: url("https://hellometa.ai/wp-content/uploads/2026/05/tricall-user-icon.png") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  height: 20px !important;
  width: 20px !important;
  display: block;
  position: absolute;
  top: 22px;
  left: 22px;
}
.phone-wrapper:before {
  content: "";
  background: url("https://hellometa.ai/wp-content/uploads/2026/05/tricall-phone-icon.png") !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  height: 20px !important;
  width: 20px !important;
  display: block;
  position: absolute;
  top: 28px;
  left: 21px;
}
.phone-prefix {
  color: #000000;
  position: absolute;
  left: 48px;
  top: 25px;
  font-size: 15px;
}
button.submission {
  padding: 23px 0px 23px 0px !important;
  width: 100%;
  font-size: 17px !important;
  text-align: center !important;
  background-color: #2565ae !important;
  background-image: linear-gradient(90deg, #2565ae 0%, #2565ae 100%) !important;
  border-radius: 13px !important;
  text-transform: none !important;
}
.phone-wrapper input::placeholder,
.name-wrapper input::placeholder {
  color: black;
}
.verifysection {
  background: #ffffff00;
  box-shadow: 0 9px 5px rgb(37 101 174 / 11%);
  text-align: center;
  border-radius: 12px;
  width: 100%;
  padding: 8px 15px 20px 15px;
  border-width: 1px 0px 0px 0px;
  border-style: solid;
  border-color: #2565ae17;
  margin-top: 35px !important;
}

span#countdown {
  font-weight: 500 !important;
}
.otp-inputs {
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}

.otp-inputs input {
  width: 38px;
  height: 43px;
  font-size: 20px;
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.2s;
  color: #000;
}

#countdownMsg {
  font-size: 14px !important;
  color: rgba(0, 0, 0, 0.904) !important;
  margin-top: 10px !important;
}
#verifyOtpBtn {
  background-image: linear-gradient(90deg, #2565ae 0%, #2565ae 100%) !important;
  font-size: 15px !important;
}
#verifyOtpBtn:hover,
#resendOtpBtn:hover {
  background-image: linear-gradient(90deg, #2e7bd3 0%, #2565ae 100%) !important;
  font-size: 15px !important;
}
.submission:hover {
  background-image: linear-gradient(90deg, #2e7bd3 0%, #2565ae 100%) !important;
  font-size: 17px !important;
}
#resendOtpBtn {
  background-image: linear-gradient(90deg, #2565ae 0%, #2565ae 100%) !important;
  font-size: 15px !important;
}
.otp-inputs input:focus {
  border-color: #007bff;
}
.otp-inputs input.error,
#otpform input.error {
  border: 2px solid red !important;
}
.loading {
  position: relative;
  padding-left: 45px; /* leave space for icon */
}
.response.response-error {
  color: red;
  text-align: center;
}
.loading::before {
  content: "";
  position: absolute;
  /* left: 120px; */
  right: 50px !important;
  top: 50%;
  width: 35px;
  height: 35px;
  transform: translateY(-50%);
  background-image: url("https://hellometa.ai/wp-content/uploads/2026/05/robot-loading.png"); /* replace with your actual image */
  background-size: contain;
  background-repeat: no-repeat;
  animation: jumpTwiceRotate 2s infinite ease-in-out;
}
.verify-response.otperror {
  color: red;
  font-size: 15px !important;
  margin-bottom: 10px !important;
}
.verify-response {
  color: #008500;
  font-size: 15px !important;
  margin-bottom: 10px !important;
}
.elementor-widget-metaweb_otp_validator {
  height: 387px !important;
}
#verifysection h3 {
  color: black !important;
  font-size: 20px !important;
  text-align: center !important;
  font-weight: 600 !important;
  margin-bottom: 0px !important;
}
.slide-left {
  /*position: absolute;*/
  /*width: 100%;*/
  animation: slideLeftOut 0.4s forwards;
}

.slide-right {
  /*position: absolute;*/
  /*width: 100%;*/
  animation: slideRightIn 0.4s forwards;
}
/* temp end */

@keyframes slideLeftOut {
  from {
    left: 0;
    opacity: 1;
  }
  to {
    left: -100%;
    opacity: 0;
  }
}

@keyframes slideRightIn {
  from {
    left: 100%;
    opacity: 0;
  }
  to {
    left: 0;
    opacity: 1;
  }
}

/*Loading icon */
@keyframes jumpTwiceRotate {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  10% {
    transform: translateY(-80%) rotate(0deg); /* jump 1 */
  }
  20% {
    transform: translateY(-50%) rotate(0deg);
  }
  30% {
    transform: translateY(-80%) rotate(0deg); /* jump 2 */
  }
  40% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg); /* rotate once at the end */
  }
}