:root {
  --rd-form-primary: rgb(21, 251, 238);
  --rd-form-primary-hover: rgb(34 212 202);
  --rd-form-secondary: rgb(27, 27, 77);
  --rd-form-gray: rgba(255, 255, 255, .5);
  --rd-form-shadow: rgba(50, 118, 71, 0.1);

  --rd-form-light-bg: #6282abd1;
  --rd-form-light-primary: rgb(255, 255, 255);
  --rd-form-light-secondary: rgb(51, 103, 164);
  --rd-form-light-accent: rgb(237, 31, 1);
  --rd-form-light-accent-hover: rgb(182, 24, 1);
  --rd-form-light-gray: #ffffff80;

}

.rd-order {
  position: relative;
  font-family: 'Inter', sans-serif;
  color: white;
  border-radius: 20px;
  background: var(--rd-modal-gradient);
  padding: 30px 18px;
  width: 100%;
  max-width: 580px;
}

.rd-order__message {
  text-align: center;
  margin-bottom: 20px;
}

.rd-order__message.hidden {
  display: none;
}

.rd-order__wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  width: 100%;
}

.rd-order__content {
  max-width: 300px;
  /* flex-basis: 330px; */
  flex-grow: 1;
}

.rd-order__sale {
  display: inline-block;
  font-size: 35px;
  font-weight: 900;
  color: white;
  background: var(--rd-modal-accent);
  clip-path: polygon(100% 100%, 100% 100%, 98.854% 98.62%, 97.634% 97.311%, 96.338% 96.091%, 94.965% 94.978%, 93.513% 93.988%, 91.979% 93.138%, 90.363% 92.448%, 88.662% 91.933%, 86.875% 91.611%, 85% 91.5%, 33.2% 91.5%, 33.2% 91.5%, 29.09% 90.883%, 25.222% 89.034%, 21.598% 85.96%, 18.219% 81.663%, 15.088% 76.15%, 12.205% 69.425%, 9.573% 61.492%, 7.194% 52.358%, 5.069% 42.025%, 3.2% 30.5%, 3.2% 30.5%, 2.765% 27.351%, 2.358% 24.208%, 1.98% 21.077%, 1.627% 17.964%, 1.3% 14.875%, 0.997% 11.816%, 0.716% 8.793%, 0.458% 5.812%, 0.219% 2.879%, 0% 0%, 0% 0%, 1.468% 2.135%, 3.053% 4.145%, 4.759% 6.006%, 6.59% 7.694%, 8.55% 9.188%, 10.642% 10.462%, 12.869% 11.493%, 15.235% 12.259%, 17.744% 12.736%, 20.4% 12.9%, 69.9% 12.9%, 69.9% 12.9%, 70.821% 13.217%, 72.42% 13.971%, 74.571% 15.318%, 77.148% 17.414%, 80.025% 20.413%, 83.076% 24.47%, 86.175% 29.743%, 89.196% 36.385%, 92.013% 44.552%, 94.5% 54.4%, 94.5% 54.4%, 95.569% 59.735%, 96.502% 64.931%, 97.307% 69.976%, 97.991% 74.858%, 98.563% 79.563%, 99.029% 84.078%, 99.398% 88.393%, 99.678% 92.493%, 99.876% 96.366%, 100% 100%);
  padding: 6px 12px;
  position: absolute;
  top: 0;
  right: 0;
}

.rd-order__product {
  flex-basis: 170px;
  position: relative;
}

.rd-order__pack {
  display: block;
  width: 100%;
  max-width: 100%;
}

.rd-order__pack--sale {
  padding-top: 20px;
}

.rd-order .rd-price {
  margin-bottom: 22px;
}

/*Price*/
.rd-price {
  display: flex;
  justify-content: space-around;
  gap: 10px;
  width: 100%;
  text-align: center;
}

.rd-price__item {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
}

.rd-price__line {
  display: block;
  flex-shrink: 0;
  width: 1px;
  background-color: white;
}

.rd-price__title {
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  color: white;
}

.rd-price__title--old {
  font-weight: 300;
  color: var(--rd-form-gray);
}

.rd-price__value {
  margin: 0;
  font-size: 26px;
  font-weight: 400
}

.rd-price__value--old {
  font-weight: 300;
  color: var(--rd-form-gray);
  text-decoration-line: line-through;
}

/*Form*/
.rd-form {
  display: flex;
  flex-direction: column;
  gap: 13px;
}

.rd-form__label,
.rd-form__input {
  width: 100%;
}

.rd-form__input {
  font-size: 18px;
  text-align: center;
  color: var(--rd-form-secondary);
  border-radius: 100px;
  box-shadow: 0 5px 20px 0 var(--rd-form-shadow);
  background: white;
  border: none;
  outline: none;
  padding: 15px 24px;
}

.rd-form__input::placeholder {
  color: var(--rd-form-secondary);
}

.rd-form__button {
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  color: var(--rd-form-secondary);
  background-color: var(--rd-form-primary);
  border: none;
  border-radius: 100px;
  outline: none;
  cursor: pointer;
  padding: 15px 24px;
  transition: background-color .2s;
}

.rd-form__button:hover {
  background-color: var(--rd-form-primary-hover);
}

/*Light theme - Тільки для форми яка вікористовується за межами попапу (для попапу користуємось .rd-modal--light)*/
.rd-order--light {
  background: var(--rd-form-light-bg);
  border: 1px solid var(--rd-form-light-primary);
}

.rd-order--light .rd-order__message {
  color: var(--rd-form-light-primary);
}

.rd-order--light .rd-form__button {
  color: white;
  background: var(--rd-modal-accent);
}

.rd-order--light .rd-form__button:hover {
  background: var(--rd-form-light-accent-hover);
}

.rd-order--light .rd-price__title {
  color: var(--rd-form-light-primary);
}

.rd-order--light .rd-price__value {
  color: var(--rd-form-light-primary);
}

.rd-order--light .rd-price__title--old,
.rd-order--light .rd-price__value--old {
  color: var(--rd-form-light-gray);
}

.rd-order--light .rd-price__line {
  background: var(--rd-form-light-gray);
}

.rd-order--light .rd-form__input {
  border: 1px solid var(--rd-form-light-primary);
}

/*End Light theme*/

@media (max-width: 767px) {
  .rd-order {
    width: 100%;
    max-width: 400px;
  }

  .rd-order__wrapper {
    flex-direction: column;
    gap: 15px;
  }

  .rd-order__sale {
    font-size: 38px;
  }

  .rd-order__product {
    flex-basis: auto;
    width: 160px;
  }

  .rd-order__content {
    flex-basis: auto;
    width: 100%;
  }

  .rd-price {
    justify-content: space-evenly;
  }
}

@media (max-width: 479px) {
  .rd-order__product {
    width: 140px;
  }

  .rd-order__sale {
    font-size: 30px;
  }

  .rd-price__title {
    font-size: 14px;
  }

  .rd-price__value {
    font-size: 30px;
  }

  .rd-form__input,
  .rd-form__button {
    font-size: 16px;
  }
}