/*hystmodal*/
.hystmodal::before {
  background-color: var(--black);
}

.hystmodal--active::before {
  opacity: 0.4;
}


.hystmodal__window {
  width: calc(100% - 30px);
  max-width: 500px;
  background: none;
}

/*re-modal*/
.re-modal {
  position: relative;
  color: var(--black);
  background-color: var(--white);
  padding: 32px;
  border-radius: 12px;
}

.re-modal__close {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  width: 56px;
  height: 56px;
  outline: none;
  opacity: 0.5;
  border: none;
  color: inherit;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3.5 20.5L20.5 3.5M20.5 20.5L3.5 3.5' stroke='%23000000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
  border-radius: 12px;
}

.re-modal__title {
  margin: 0;
  margin-bottom: 20px;
  font-size: 36px;
  font-weight: 600;
  text-align: center;
}

.error-massage {
  --error: #FF3B30;
}

.shaked {
  -webkit-animation-name: shake;
  animation-name: shake;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-duration: 0.6s;
  animation-duration: 0.6s
}

.cb-form {
  display: -ms-grid;
  display: grid;
  row-gap: 20px;
}

.cb-form__offset-top {
  padding-top: 12px;
}

.cb-form__button {
  width: 100%;
  padding: 20px;
}

/*text-field*/
.text-field {
  font-size: 16px;
  line-height: 1.2;
  padding: 8px 20px;
  width: 100%;
  color: inherit;
  background-color: #F5F7FA;
  border: 1px solid #F2F2F2;
  border-radius: 6px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

.text-field:focus {
  border-color: #5893F7;
}

.text-field--area {
  resize: none;
  height: 6em;
  border-radius: 24px;
}

.text-field--select {
  -webkit-appearance: auto;
  -moz-appearance: auto;
  appearance: auto;
  padding: 8px;
}

.text-field:-webkit-autofill,
.text-field:-webkit-autofill:focus {
  -webkit-transition: background-color 0s 600000s, color 0s 600000s !important;
  transition: background-color 0s 600000s, color 0s 600000s !important;
}

/*form-change*/

.form-change__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  white-space: nowrap;
  -webkit-clip-path: inset(100%);
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.form-change__input:checked + .form-change__text::before {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='15' viewBox='0 0 16 15' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 7.76471L5.48 12L15 3' stroke='%235893F7' stroke-width='2'/%3E%3C/svg%3E%0A");
}

.form-change__text {
  font-size: 14px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.form-change__text::before {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  border: 1px solid #c5c5c5;
  -webkit-transform: translateY(4px);
  transform: translateY(4px);
  margin-right: 4px;
}

.cb-block__content {
  background-color: var(--white);
  border-radius: 12px;
  padding: 24px;
  width: 100%;
}

.cb-block__title {
  margin: 0;
  margin-bottom: 32px;
  font-weight: 600;
  font-size: 36px;
  text-align: center;
}

@media (min-width: 1024px) {
  .cb-block__content {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
    padding: 32px 64px;
  }

  .cb-block__content--full {
    width: 100%;
  }
}

@-webkit-keyframes shake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-7px);
    transform: translateX(-7px);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(7px);
    transform: translateX(7px);
  }
}

@keyframes shake {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    -webkit-transform: translateX(-7px);
    transform: translateX(-7px);
  }

  20%,
  40%,
  60%,
  80% {
    -webkit-transform: translateX(7px);
    transform: translateX(7px);
  }
}

.requisites__cards-wrap {
  margin: 0;
  display: grid;
  gap: 24px 30px;
}
.requisites__card {
  width: auto;
  margin: 0;
}

@media (min-width: 1024px) {
  .requisites__cards-wrap {
    grid-template-columns: 2fr 2fr;
  }
}