.payment-button-red {
  border-radius: 10px;
  --c: #fff;
  /* text color */
  background:
    linear-gradient(90deg, #0000 33%, #fff5, #0000 67%) var(--_p, 100%) / 300% no-repeat,
    linear-gradient(to right, #800000 33%, #cb2a2a 80%); /** button color **/
  /* background color */
  color: #0000;
  border: none;
  text-shadow:
    calc(var(--_i, -1) * 0.08em) -0.01em 0 var(--c),
    calc(var(--_i, -1) * -0.08em) 0.01em 2px #00000010; /* shadow color */
  outline-offset: 0.1em;
  transition: 0.3s;
}

.payment-button-red:hover,
.payment-button-red:focus-visible {
  --_p: 0%;
  --_i: 1;
}

.payment-button-red:active {
  text-shadow: none;
  color: var(--c);
  transition: 0s;
}

.payment-button-red {
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  border-radius: 18px;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  position: relative;
  text-decoration: none;
  gap: 5px;
  display: flex;
  
  font-family: var(--main-font);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.1;
  padding: 14px 24px;
  max-height: 80px;
}

@media screen and (max-width: 400px) {
  .payment-button-red {
    font-size: 3.5vw;
  }
}