/* =========================================================
   SUCCESS MODAL
========================================================= */

.success_modal .modal-dialog {
  max-width: 450px;
  margin: 1rem auto;
}

.success_modal .modal-content {
  border: 0;
  border-radius: 24px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18);
  animation: successModalIn 0.4s ease-out;
}

@keyframes successModalIn {
  from {
    opacity: 0;
    transform: translateY(25px) scale(0.94);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* =========================================================
   MODAL BODY
========================================================= */

.success_modal .modal-body {
  position: relative;
  padding: 38px 35px 40px;
}

/* =========================================================
   LOTTIE
========================================================= */

.success_lottie {
  width: 130px;
  height: 130px;
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.success_lottie svg {
  width: 100% !important;
  height: 100% !important;
}

/* =========================================================
   CONTENT
========================================================= */

.success_content h3 {
  margin: 5px 0 10px;
  font-size: 28px;
  line-height: 1.2;
  font-weight: 700;
  color: #171717;
}

.success_content p {
  margin: 0 auto;
  max-width: 330px;
  font-size: 15px;
  line-height: 1.7;
  color: #707070;
}

/* =========================================================
   REDIRECT MESSAGE
========================================================= */

.success_timer {
  margin-top: 16px;
  font-size: 12px;
  font-weight: 500;
  color: #999;
  letter-spacing: 0.2px;
}

/* =========================================================
   BUTTON
========================================================= */

.success_modal .send_btn {
  margin-top: 22px;
  min-width: 120px;
  padding: 11px 28px;
  border: 0;
  border-radius: 50px;
  background: linear-gradient(135deg, #ff3b30, #d00000);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(208, 0, 0, 0.22);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.success_modal .send_btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(208, 0, 0, 0.3);
}

.success_modal .send_btn:active {
  transform: translateY(0);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {
  .success_modal .modal-dialog {
    max-width: calc(100% - 30px);
  }

  .success_modal .modal-body {
    padding: 30px 22px 32px;
  }

  .success_lottie {
    width: 110px;
    height: 110px;
  }

  .success_content h3 {
    font-size: 24px;
  }

  .success_content p {
    font-size: 14px;
  }

  .success_modal .send_btn {
    width: 100%;
  }
}