:root {
  --primary: rgb(17, 0, 255);
  --success: #22c55e;
}

.submit-btn {
  position: relative;
  width: 200px;
  height: 60px;
  background: linear-gradient(180deg, #ff8e7e 0%, #d95448 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 0 1px rgba(255, 92, 54, 0.9),
    0 0 10px rgba(255, 92, 54, 0.5);
  color: #fff;
  border: 1px solid rgba(255, 92, 54, 0.9);
  font-weight: 500;
  border-radius: 8px;

  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

  overflow: hidden;
  margin: 50px auto;
}

.submit-btn:hover {
  background: rgba(206, 17, 38);
  color: rgb(255, 255, 255);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 0 0 1px rgba(255, 120, 84, 1),
    0 0 12px rgba(255, 92, 54, 0.6);
  -webkit-animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1)
    both;
  animation: scale-up-center 0.4s cubic-bezier(0.39, 0.575, 0.565, 1) both;
}

/* Loading State - Turn into a Circle */
.submit-btn.loading {
  width: 60px;
  border-radius: 50%;
  color: transparent;
  background: #1e293b;
}

/* Spinner Logic */
.loader {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 24px;
  height: 24px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
}

.submit-btn.loading .loader {
  display: block;
  animation: spin 0.8s linear infinite;
}

/* Success State */
.submit-btn.success {
  background: var(--success);
  width: 60px;
  border-radius: 50%;
}

.check {
  display: none;
  font-size: 24px;
}

.submit-btn.success .check {
  display: block;
  color: white;
}
.submit-btn.success .loader,
.submit-btn.success .text {
  display: none;
}

@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}