.form {
  width: 49%;
  padding: 0 3vw;
  color: var(--lightGrey);
  text-align: center;
  flex-direction: column;
  gap: 2.2vh;
  line-height: 1.2;
  display: none;
  margin: 0 auto;
}
.form_wide {
    width: 100%;
    padding: 0;
}
.form_rows {
    flex-direction: row;
    align-items: center;
    gap: 4vw;
}
.form_rows > div {
    flex: 1 1 100%;
    width: 100%;
}
.form__v2 {
  gap: 2vh;
}
.form.active,
main:not(:has(.form ~ .form)) .form {
  display: flex;
}
fieldset,
.form fieldset {
  border: none;
  outline: none;
  position: relative;
}
.form__input input {
  width: 100%;
  border: 1px solid var(--greyStroke);
  border-radius: 12px;
  text-align: center;
  font-size: 3vh;
  height: 10vh;
  background-color: var(--inputBg);
}
.form__v2 .form__input:before {
  content: '+7';
  font-size: 5vh;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  padding: 2.3vh 0 2vh 1.6vw;
}
.form__v2 .form__input input {
  border: 2px solid var(--greyStroke);
  padding: 2vh 0 2vh 6vw;
  text-align: left;
}
.form__input.form__input_error input {
  border-color: var(--error);
}
input[name="phone"]::placeholder {
  color: #70778F;
}
.form__v2 input[name="phone"]::placeholder {
  color: var(--greyStroke);
}
.form__error {
  color: var(--error);
  font-size: 2.8vh;
  padding: 1vh 0 0;
}
.form__note {
  font-size: 2.6vh;
  margin: 2.4vh 0;
}
.form__label {
  color: var(--black);
  font-size: 4.4vh;
  text-align: left;
}
.form__buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2vh;
}
.form__v2 .form__buttons {
  gap: 0;
}
.form__sbp {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 10vh;
  border: none;
  font-weight: 500;
  gap: 2vw;
  font-size: 3vh;
  border-radius: 12px;
  color: #2F3655;
  background: linear-gradient(45deg, #3DE8CA 0, #3DE8CA 39%, #33FF77 100%);
  position: relative;
  z-index: 1;
}
.form__sbp_green {
  background: var(--success);
  color: var(--white);
}
.form__sbp_blue {
  background: #649FF8;
  color: var(--white);
}
.form__sbp_blue-dark {
  background: #1C133B;
  color: var(--white);
}
.form__sbp_yellow {
  background: #F6C904;
  color: var(--black);
}
.form__sbp_gray {
  color: var(--lightGrey);
  background: var(--sectionBg);
}
.form__v2 .form__sbp {
  padding: 5vh 0;
  font-size: 4.4vh;
  border-radius: 12px;
  box-shadow: 0 5px 15px 0 rgba(61, 232, 202, .32);
}
.form__sbp img {
  height: 6vh;
}

.form__card {
  font-size: 3vh;
  white-space: nowrap;
  font-weight: 500;
  color: var(--lightGrey);
  background: var(--sectionBg);
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 10vh;
  justify-content: center;
  border-radius: 12px;
}

.form__card_green {
  font-size: 2vh;
  color: var(--white);
  background: var(--success);
}

.form__card_yellow {
  font-size: 2vh;
  background: #F6C904;
  color: var(--black);
  padding: 3vh 0;
}

.form__card_blue {
  font-size: 2vh;
  background: #649FF8;
  color: var(--white);
  padding: 3vh 0;
}
.form__card_violet {
  font-size: 2vh;
  background: #642AA6;
  color: var(--white);
  padding: 3vh 0;
}
.form__card_blue-dark {
  font-size: 2vh;
  background: #1A73E7;
  color: var(--white);
  padding: 3vh 0;
}
.form__card_blue-bordered {
    font-size: 2vh;
    border: 2px solid #2E6CFF;
    color: #3270FF;
    padding: 3vh 0;
}
.form__card_violet-bordered {
    font-size: 2vh;
    border: 1px solid #642AA6;
    color: #000;
    padding: 3vh 0;
}

.form__card_blue2 {
  background: #649FF8;
  color: var(--white);
  padding: 3vh 0;
}
.form__card_transparent {
    background-color: transparent;
}

.form__card span {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 40%;
}
.form__card span img {
  width: 28%;
}

.form__card_green span {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 40%;
}
.form__card_green span img {
  width: 28%;
}

.form__card_yellow span {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 40%;
}
.form__card_yellow span img {
  width: 28%;
}

.form__card_blue span {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 40%;
}
.form__card_blue span img {
  width: 28%;
}

.form__card_blue2 span {
  display: flex;
  align-items: center;
  margin: auto;
  gap: 8px;
  width: 40%;
}
.form__card_blue2 span img {
  width: 5vh;
}

.form__card_miniicons {
    font-size: 3vh;
    justify-content: space-between;
    padding: 0 4vw;
    height: 10vh;
}
.form__sbp.form__card_miniicons {
    justify-content: center;
}
.form__card_miniicons span {
    width: auto;
    gap: 4px;
    justify-content: end;
}
.form__card_miniicons span img {
    width: 20%;
    height: 2vw;
    object-fit: contain;
    object-position: center;
}

.form__v2 .form__card {
  background: var(--sectionBg);
  padding: 4vh 0 3vh;
  width: 100%;
  border-radius: 0 0 12px 12px;
  margin: -1vh 0 0;
}
.form__price {
  font-size: 2.6vh;
}
.form__v2 .form__price {
  padding-bottom: 2vh;
}
.form__label:has(b) {
  font-weight: 600;
  text-align: center;
}
.form__sbp + .form__price {
  font-size: 4vh;
  color: var(--black);
}
.form__checkbox {
  position: relative;
  text-align: center;
  line-height: 1;
}
.form__checkbox input[type="checkbox"] {
  position: absolute;
  left: -7vh;
  top: 0.2vw;
  width: 4vh;
  height: 4vh;
}
.form__checkbox label {
  font-size: 3vh;
  color: var(--lightGrey);
}
.form__checkbox label.form__note {
  font-size: 2.6vh;
  text-align: center;
  display: block;
}
.form__checkbox label a {
  color: var(--link);
}
.form__v2 .form__checkbox label a {
  line-height: 1.4;
}
.form__steps .form__checkbox label {
  color: var(--black);
}
.form__steps .form__checkbox label a {
  color: var(--linkGreen);
  text-decoration: underline;
}
@media screen and (max-aspect-ratio: 2) {
  .form__input input {
      font-size: 2.4vh;
  }
  .form__checkbox input[type="checkbox"] {
    left: -5vh;
    width: 3vh;
    height: 3vh;
  }
  .form__note,
  .form__error,
  .form__input p,
  .form__checkbox label,
  .form__checkbox label.form__note {
    font-size: 2vh;
  }
  .form__label {
    font-size: 3.4vh;
  }
  .form__sbp {
    padding: 1.6vh 0;
    font-size: 3.4vh;
  }
  .form__v2 .form__sbp {
    font-size: 3.8vh;
  }
  .form__sbp + .form__price {
    font-size: 3vh;
  }
  .form__card {
    font-size: 2vh;
  }
}

@media screen and (max-aspect-ratio: 1.35) {
  .form__label {
    font-size: 2.4vh;
  }
  .form__price {
    font-size: 2.6vh;
  }
  .form__sbp + .form__price {
    font-size: 2.4vh;
  }
  .form__input input {
    font-size: 2.4vh;
    padding: 2vh 0;
  }
  .form__v2 .form__input input {
    padding: 2vh 0 2vh 6vw;
  }
  .form__v2 .form__input:before {
    font-size: 2.4vh;
  }
  .form__sbp {
    padding: 0.8vh 0;
    font-size: 3vh;
  }
  .form__v2 .form__sbp {
    font-size: 3.4vh;
  }
}
@media screen and (max-width: 1024px), screen and (max-aspect-ratio: 0.6) {
  .form {
    max-width: 100%;
  }
  .form__price {
    font-size: 2vh;
  }
  .form__card_miniicons,
  .form__input input {
    height: 8vh;
  }
  .form__input p,
  .form__error,
  .form__note,
  .form__checkbox label,
  .form__checkbox label.form__note {
    font-size: 14px;
    line-height: 1;
  }
}
@media screen and (max-width: 1024px), screen and (max-aspect-ratio: 0.8) {
  .form {
    max-width: 88%;
  }
  .form_wide {
    max-width: 100%;
  }
  .form__input input {
      font-size: 2vh;
  }
  .form__checkbox:has(input) {
    padding: 0 0 0 4vh;
  }
  .form__checkbox input[type="checkbox"] {
    left: 0;
  }
  .form__card {
    font-size: 2vh;
  }
}
@media screen and (max-width: 1024px), screen and (max-aspect-ratio: 1) {
  .form {
    width: 100%;
    max-width: 72%;
    padding: 0;
    margin: 0 auto;
    gap: 1.3vh;
  }
  .form_wide {
    max-width: 100%;
  }
  .form_rows {
    flex-direction: column;
  }
  .form__v2 .form__input input {
    padding: 1.2vh 0 1.2vh 10vw;
  }
  .form__v2 .form__input:before {
    font-size: 2.6vh;
    padding: 1.55vh 0 1.2vh 3vw;
  }
  .form__input p {
    padding: 4px 0 0;
  }
  .form__buttons {
    gap: 1vh;
  }
  .form__v2 .form__sbp {
    font-size: 2.8vh;
  }
}
@media screen and (max-width: 1024px), screen and (max-aspect-ratio: 0.8) {
  .form {
    max-width: 88%;
  }
  .form_wide {
    max-width: 100%;
  }
  .form__checkbox:has(input) {
    padding: 0 0 0 4vh;
  }
  .form__checkbox input[type="checkbox"] {
    left: 0;
  }
}
@media screen and (max-width: 1024px), screen and (max-aspect-ratio: 0.6) {
  .form {
    max-width: 100%;
  }
}
@media screen and (max-width: 1024px) {
 .form__input input {
    font-size: 2.2vw;
    height: 7vw;
  }
  .form__note {
    font-size: 1.6vw;
    margin: 2vw 0;
  }
  .form__card_miniicons {
    font-size: 2.2vw;
    height: 7vw;
  }
  .form__sbp {
    font-size: 2.2vw;
    height: 7vw;
  }
  .form__sbp img {
    height: 3vw;
  }
  .form__checkbox label.form__note {
    font-size: 1.6vw;
  }
}
@media screen and (max-width: 768px) {
  .form__note {
    font-size: 2vw;
  }
  .form__sbp img {
    height: 3vw;
  }
  .form__checkbox label.form__note {
    font-size: 2vw;
  }
}
@media screen and (max-width: 480px) {
 .form__input input {
    font-size: 4vw;
    height: 12vw;
  }
  .form__note {
    font-size: 3vw;
    margin: 3vw 0;
  }
  .form__card_miniicons {
    font-size: 4vw;
    height: 12vw;
  }
  .form__sbp {
    font-size: 4vw;
    height: 12vw;
  }
  .form__card_miniicons span img {
    height: 5vw;
  }
  .form__sbp img {
    height: 7vw;
  }
  .form__checkbox label.form__note {
    font-size: 3vw;
  }
}