@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/PTSansRegular.woff2") format("woff2"),
  url("../fonts/PTSansRegular.woff") format("woff");
}

@font-face {
  font-family: "PT Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/PTSansBold.woff2") format("woff2"),
  url("../fonts/PTSansBold.woff") format("woff");
}

html {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  min-height: 100vh;
}

body {
  position: relative;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  min-width: 320px;
  font-family: "PT Sans", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: #000000;
  background-color: transparent;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none;
  color: #10D1FA;
  transition: opacity 0.3s ease;
}

a:hover {
  text-decoration: none;
  color: #10D1FA;
  opacity: 0.75;
}

img {
  max-width: 100%;
  height: auto;
}

.visually-hidden:not(:focus):not(:active),
input[type="checkbox"].visually-hidden,
input[type="radio"].visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%); /* stylelint-disable-line property-no-vendor-prefix */
  clip-path: inset(100%); /* stylelint-disable-line indentation */
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.rub {
  display: inline-block;
  vertical-align: top;
  margin-left: 0.25em;
  width: 0.54em;
  height: 1.25em;
  background-image: url("../images/ruble.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.donate-form {
  padding: 60px 0;
}

.donate-form__el {
  margin: 0 auto;
  width: 100%;
  max-width: 790px;
}

.donate-form__el h1 {
  margin: 0 0 32px;
  text-align: center;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.1;
}

.donate-form__progress {
  margin: 0 auto 40px;
  max-width: 585px;
}

.donate-form__methods {
  margin-bottom: 25px;
}

.donate-form__options {
  margin: 0 auto 32px;
}

.donate-form__row {
  display: flex;
  width: 100%;
}

.donate-form__row > .row {
  margin-bottom: 32px;
  width: calc(100% + 30px);
}

.donate-form__fixed-sums {
  flex-grow: 1;
  margin-bottom: 24px;
  box-sizing: border-box;
  padding-right: 14px;
  max-width: calc(100% - 335px);
}

.donate-form__custom-sum {
  position: relative;
  flex: none;
  margin-left: 16px;
  margin-bottom: 24px;
  width: 319px;
}

.donate-form__message {
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 30px;
  width: 175px;
  color: #7D7D7D;
}

.donate-form__field {
  margin-bottom: 24px;
  height: 40px;
  color: #000000;
  border-color: #212529;
}

.donate-form__field_sum {
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='12' viewBox='0 0 9 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.80925 6.624H1.94525V0.912C2.35058 0.816 2.78258 0.752 3.24125 0.719999C3.71058 0.688 4.17458 0.672 4.63325 0.672C5.12392 0.672 5.60392 0.72 6.07325 0.815999C6.55325 0.911999 6.97458 1.088 7.33725 1.344C7.71058 1.6 8.00925 1.94667 8.23325 2.384C8.45725 2.82133 8.56925 3.38133 8.56925 4.064C8.56925 4.736 8.45192 5.296 8.21725 5.744C7.99325 6.192 7.68925 6.55467 7.30525 6.832C6.93192 7.10933 6.49992 7.30667 6.00925 7.424C5.52925 7.54133 5.03858 7.60533 4.53725 7.616L3.27325 7.632V8.768H5.92925V9.76H3.27325V12H1.94525V9.76H0.80925V8.768H1.94525V7.616H0.80925V6.624ZM4.66525 1.792C4.38792 1.792 4.12125 1.80267 3.86525 1.824C3.61992 1.83467 3.42258 1.856 3.27325 1.888V6.528H4.48925C4.80925 6.528 5.12925 6.496 5.44925 6.432C5.76925 6.368 6.05725 6.24533 6.31325 6.064C6.56925 5.88267 6.77725 5.63733 6.93725 5.328C7.09725 5.008 7.17192 4.592 7.16125 4.08C7.17192 3.64267 7.10792 3.28 6.96925 2.992C6.84125 2.69333 6.65992 2.45867 6.42525 2.288C6.20125 2.10667 5.93458 1.97867 5.62525 1.904C5.32658 1.82933 5.00658 1.792 4.66525 1.792Z' fill='%23212529'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 10px auto;
  background-position: center right 11px;
}

.donate-form__field:focus {
  color: #000000;
  border-color: #10D1FA;
  box-shadow: 0 0 0 1px #10D1FA;
  outline: none;
}

.donate-form__submit {
  align-self: flex-start;
  display: block;
  box-sizing: border-box;
  padding: 13px 24px;
  width: 278px;
  max-width: 100%;
  text-align: center;
  font-family: inherit;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: #ffffff;
  background-color: #10D1FA;
  border: 0;
  border-radius: 24px;
  transition: opacity 0.3s ease;
}

.donate-form__submit:hover {
  opacity: 0.75;
}

.donate-form__warning {
  color: #7d7d7d;
}

.donate-form__warning p {
  margin-bottom: 10px;
}

.progress-block {
  padding: 16px 32px;
  background-color: #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
}

.progress-block__bar {
  position: relative;
  margin-bottom: 8px;
  height: 16px;
  background-color: #ECECEC;
  border-radius: 10px;
  overflow: hidden;
}

.progress-block__line {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  background-color: #FFC101;
}

.progress-block__message {
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  color: #212529;
}

.payment-method-toggles {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.payment-method-toggles li {
  margin: 0 15px 15px;
}

.payment-method-toggles__button {
  display: inline-block;
  vertical-align: top;
  padding: 0;
  font-family: inherit;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  white-space: nowrap;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  border-radius: 0;
  transition: color 0.3s ease, border-bottom-color 0.3s ease;
}

.payment-method-toggles__button:hover,
.payment-method-toggles__button:focus {
  color: #10D1FA;
  outline: none;
}

.payment-method-toggles__button.active {
  border-bottom-color: #10D1FA;
}

.payment-options {
  position: relative;
}

.payment-options__list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0;
  padding: 8px;
  list-style: none;
  border: 1px solid #000000;
  border-radius: 32px;
}

.payment-options__list li {
  flex: none;
  width: calc(50% - 4px);
}

.payment-options__item {
  display: block;
  margin: 0;
  padding: 10px 13px;
  text-align: center;
  font-size: 24px;
  line-height: 1.06;
  border-radius: 28px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.payment-options__item:hover {
  opacity: 0.75;
}

input:checked + .payment-options__item {
  color: #ffffff;
  background-color: #10D1FA;
}

.payment-options__message {
  position: absolute;
  top: 100%;
  right: 8px;
  box-sizing: border-box;
  margin-top: 16px;
  padding: 16px;
  width: calc(50% - 12px);
  background-color: #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  z-index: 1;
}

.payment-options__message p {
  margin-bottom: 10px;
}

.payment-options__buttons {
  display: flex;
  justify-content: space-between;
  width: 100%;
}

.payment-options__buttons button {
  flex: none;
  display: block;
  box-sizing: border-box;
  padding: 8px 24px;
  width: calc(50% - 5px);
  text-align: center;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.4;
  color: #10D1FA;
  background-color: transparent;
  border: 1px solid #10D1FA;
  border-radius: 24px;
}

.fixed-sum-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 -14px 0 0;
  text-align: center;
}

.fixed-sum-option__label {
  margin: 0 -15px 0;
  color: #7D7D7D;
}

.fixed-sum-option__button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  padding: 8px 13px;
  width: 100%;
  text-align: center;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.4;
  border: 1px solid #7D7D7D;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.fixed-sum-option__button:hover {
  color: #10D1FA;
  background-color: #F4F4F4;
  border-color: #10D1FA;
}

input:checked + .fixed-sum-option__button {
  color: #ffffff;
  background-color: #10D1FA;
  border-color: #10D1FA;
}

.fixed-sum-option__button .rub {
  width: 0.55em;
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='12' viewBox='0 0 9 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.328938 6.176H1.59294V0.912C2.04094 0.826666 2.50494 0.762666 2.98494 0.719999C3.46494 0.666666 3.9716 0.639999 4.50494 0.639999C5.0596 0.639999 5.59294 0.687999 6.10494 0.783999C6.61694 0.879999 7.06494 1.056 7.44894 1.312C7.83294 1.568 8.13694 1.92 8.36094 2.368C8.5956 2.816 8.71294 3.392 8.71294 4.096C8.71294 4.74667 8.5956 5.30133 8.36094 5.76C8.13694 6.208 7.83294 6.576 7.44894 6.864C7.0756 7.152 6.64894 7.36 6.16894 7.488C5.68894 7.616 5.19827 7.68 4.69694 7.68C4.5476 7.68 4.3556 7.68 4.12094 7.68C3.89694 7.66933 3.72627 7.65333 3.60894 7.632V8.56H6.16894V10.016H3.60894V12H1.59294V10.016H0.328938V8.56H1.59294V7.632H0.328938V6.176ZM4.68094 2.4C4.4676 2.4 4.26494 2.41067 4.07294 2.432C3.88094 2.44267 3.72627 2.45867 3.60894 2.48V6.096C3.69427 6.11733 3.83294 6.13867 4.02494 6.16C4.21694 6.17067 4.3556 6.176 4.44094 6.176C4.72894 6.176 5.00094 6.13867 5.25694 6.064C5.5236 5.98933 5.75294 5.872 5.94494 5.712C6.13694 5.552 6.28627 5.34933 6.39294 5.104C6.51027 4.848 6.56894 4.544 6.56894 4.192C6.56894 3.54133 6.39294 3.08267 6.04094 2.816C5.68894 2.53867 5.2356 2.4 4.68094 2.4Z' fill='%23212529'/%3E%3C/svg%3E%0A");
}

.fixed-sum-option__button:hover .rub {
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='12' viewBox='0 0 9 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.328938 6.176H1.59294V0.912C2.04094 0.826666 2.50494 0.762666 2.98494 0.719999C3.46494 0.666666 3.9716 0.639999 4.50494 0.639999C5.0596 0.639999 5.59294 0.687999 6.10494 0.783999C6.61694 0.879999 7.06494 1.056 7.44894 1.312C7.83294 1.568 8.13694 1.92 8.36094 2.368C8.5956 2.816 8.71294 3.392 8.71294 4.096C8.71294 4.74667 8.5956 5.30133 8.36094 5.76C8.13694 6.208 7.83294 6.576 7.44894 6.864C7.0756 7.152 6.64894 7.36 6.16894 7.488C5.68894 7.616 5.19827 7.68 4.69694 7.68C4.5476 7.68 4.3556 7.68 4.12094 7.68C3.89694 7.66933 3.72627 7.65333 3.60894 7.632V8.56H6.16894V10.016H3.60894V12H1.59294V10.016H0.328938V8.56H1.59294V7.632H0.328938V6.176ZM4.68094 2.4C4.4676 2.4 4.26494 2.41067 4.07294 2.432C3.88094 2.44267 3.72627 2.45867 3.60894 2.48V6.096C3.69427 6.11733 3.83294 6.13867 4.02494 6.16C4.21694 6.17067 4.3556 6.176 4.44094 6.176C4.72894 6.176 5.00094 6.13867 5.25694 6.064C5.5236 5.98933 5.75294 5.872 5.94494 5.712C6.13694 5.552 6.28627 5.34933 6.39294 5.104C6.51027 4.848 6.56894 4.544 6.56894 4.192C6.56894 3.54133 6.39294 3.08267 6.04094 2.816C5.68894 2.53867 5.2356 2.4 4.68094 2.4Z' fill='%2310D1FA'/%3E%3C/svg%3E%0A");
}

input:checked + .fixed-sum-option__button .rub {
  background-image: url("data:image/svg+xml,%3Csvg width='9' height='12' viewBox='0 0 9 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.328938 5.676H1.59294V0.412C2.04094 0.326666 2.50494 0.262666 2.98494 0.219999C3.46494 0.166666 3.9716 0.139999 4.50494 0.139999C5.0596 0.139999 5.59294 0.187999 6.10494 0.283999C6.61694 0.379999 7.06494 0.555999 7.44894 0.811999C7.83294 1.068 8.13694 1.42 8.36094 1.868C8.5956 2.316 8.71294 2.892 8.71294 3.596C8.71294 4.24667 8.5956 4.80133 8.36094 5.26C8.13694 5.708 7.83294 6.076 7.44894 6.364C7.0756 6.652 6.64894 6.86 6.16894 6.988C5.68894 7.116 5.19827 7.18 4.69694 7.18C4.5476 7.18 4.3556 7.18 4.12094 7.18C3.89694 7.16933 3.72627 7.15333 3.60894 7.132V8.06H6.16894V9.516H3.60894V11.5H1.59294V9.516H0.328938V8.06H1.59294V7.132H0.328938V5.676ZM4.68094 1.9C4.4676 1.9 4.26494 1.91067 4.07294 1.932C3.88094 1.94267 3.72627 1.95867 3.60894 1.98V5.596C3.69427 5.61733 3.83294 5.63867 4.02494 5.66C4.21694 5.67067 4.3556 5.676 4.44094 5.676C4.72894 5.676 5.00094 5.63867 5.25694 5.564C5.5236 5.48933 5.75294 5.372 5.94494 5.212C6.13694 5.052 6.28627 4.84933 6.39294 4.604C6.51027 4.348 6.56894 4.044 6.56894 3.692C6.56894 3.04133 6.39294 2.58267 6.04094 2.316C5.68894 2.03867 5.2356 1.9 4.68094 1.9Z' fill='white'/%3E%3C/svg%3E%0A");
}

@media (max-width: 1200px) {
  .donate-form__message {
    position: static;
    margin-left: 0;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .donate-form {
    padding: 56px 0;
  }

  .donate-form__el h1 {
    margin-bottom: 33px;
    font-size: 30px;
    line-height: 1.1;
  }

  .donate-form__progress {
    margin-bottom: 20px;
  }

  .donate-form__methods {
    margin-bottom: 8px;
  }

  .donate-form__options {
    margin-bottom: 16px;
  }

  .donate-form__row {
    display: block;
  }

  .donate-form__fixed-sums {
    margin-bottom: 8px;
    max-width: 100%;
  }

  .donate-form__custom-sum {
    margin-left: 0;
    width: 100%;
  }

  .donate-form__field {
    margin-bottom: 12px;
  }

  .donate-form__row > .row {
    margin-bottom: 20px;
  }

  .donate-form__submit {
    margin-bottom: 18px;
    width: 100%;
  }

  .payment-options__item {
    padding: 8px 13px 7px;
    font-size: 16px;
    line-height: 1.4;
  }

  .payment-options__message {
    position: static;
    width: 100%;
  }

  .fixed-sum-option__label {
    display: none;
  }
}

@media (max-width: 575px) {
  .payment-method-toggles {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin-left: -15px;
    margin-right: -15px;
    box-sizing: border-box;
    padding: 0 1px;
    width: calc(100% + 30px);
    overflow-x: auto;
  }
}