@font-face {
  font-family: "Trajan Sans Pro";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/TrajanSansPro/trajansanspro-semibold.otf") format("opentype");
}

.calculator.section--bg,
#page-home .calculator.section--bg,
.direction-page .calculator.section--bg,
.service-page .calculator.section--bg {
  background: #11162b;
}

.calculator-form > .section-title,
#page-home .calculator-form > .section-title,
.direction-page .calculator-form > .section-title {
  font-family: "Trajan Sans Pro", "Home Inter", Arial, sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}

.calculator-form > .text--14,
#page-home .calculator-form > .text--14,
.direction-page .calculator-form > .text--14 {
  color: #b7c0d0;
  font-size: 14px;
  line-height: 20px;
}

.calculator-form .step-title,
#page-home .calculator-form .step-title,
.direction-page .calculator-form .step-title {
  color: #626a7e;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  opacity: 1;
  text-align: left;
}

.calculator-form .step-title.active,
#page-home .calculator-form .step-title.active,
.direction-page .calculator-form .step-title.active {
  color: #ffffff;
}

.calculator-form .delivery-types,
#page-home .calculator-form .delivery-types,
.direction-page .calculator-form .delivery-types {
  gap: 16px;
}

.calculator-form .delivery-btn,
#page-home .calculator-form .delivery-btn,
.direction-page .calculator-form .delivery-btn {
  min-height: 56px;
  padding: 14px 24px;
  border: 1px solid #0064ff;
  border-radius: 999px;
  background: transparent;
  color: #ffffff;
  font-family: "Direction Inter", "Home Inter", "Montserrat", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  gap: 12px;
}

.calculator-form .delivery-btn svg,
#page-home .calculator-form .delivery-btn svg,
.direction-page .calculator-form .delivery-btn svg {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  filter: brightness(0) invert(1);
}

.calculator-form .delivery-btn.active,
#page-home .calculator-form .delivery-btn.active,
.direction-page .calculator-form .delivery-btn.active {
  border-color: #ffffff;
  background: #ffffff;
  color: #11162b;
}

.calculator-form .delivery-btn.active svg,
#page-home .calculator-form .delivery-btn.active svg,
.direction-page .calculator-form .delivery-btn.active svg {
  filter: none;
}

.calculator-form .delivery-btn:hover:not(.active),
#page-home .calculator-form .delivery-btn:hover:not(.active),
.direction-page .calculator-form .delivery-btn:hover:not(.active) {
  border-color: #0064ff;
  background: rgba(0, 100, 255, 0.08);
}

.calculator-form .form-grid {
  gap: 16px;
}

.calculator-form .input-wrapper,
#page-home .calculator-form .input-wrapper,
.direction-page .calculator-form .input-wrapper {
  min-height: 72px;
  padding: 10px 16px;
  gap: 16px;
  border: 1px solid #29324b;
  border-radius: 8px;
  background: #1a2038;
}

.calculator-form .input-wrapper:focus-within,
#page-home .calculator-form .input-wrapper:focus-within,
.direction-page .calculator-form .input-wrapper:focus-within {
  border-color: #0064ff;
  background: #1a2038;
}

.calculator-form .input-wrapper > svg,
#page-home .calculator-form .input-wrapper > svg,
.direction-page .calculator-form .input-wrapper > svg {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
}

.calculator-form .input-wrapper input,
.calculator-form .input-wrapper select,
.calculator-form .input-wrapper textarea,
.calculator-form .select-selected,
#page-home .calculator-form .input-wrapper input,
#page-home .calculator-form .select-selected,
.direction-page .calculator-form .input-wrapper input,
.direction-page .calculator-form .input-wrapper textarea,
.direction-page .calculator-form .select-selected {
  min-width: 0;
  color: #ffffff;
  font-family: "Direction Inter", "Home Inter", "Montserrat", Arial, sans-serif;
  font-size: 16px;
  line-height: 24px;
}

.calculator-form .input-wrapper input::placeholder,
.calculator-form .input-wrapper textarea::placeholder,
#page-home .calculator-form .input-wrapper input::placeholder,
.direction-page .calculator-form .input-wrapper input::placeholder,
.direction-page .calculator-form .input-wrapper textarea::placeholder {
  color: #9aa3b6;
  opacity: 1;
}

.calculator-form .input-wrapper.additional-info-wrapper,
#page-home .calculator-form .input-wrapper.additional-info-wrapper,
.direction-page .calculator-form .input-wrapper.additional-info-wrapper {
  min-height: 96px;
  border-radius: 8px;
}

.calculator-form .submit-btn,
#page-home .calculator-form .submit-btn,
.direction-page .calculator-form .submit-btn,
.direction-page .calculator-form button[type="submit"] {
  width: 248px;
  max-width: 100%;
  min-height: 56px;
  padding: 16px 32px;
  border: 0;
  border-radius: 999px;
  background: #0064ff;
  color: #ffffff;
  font-family: "Direction Inter", "Home Inter", "Montserrat", Arial, sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

@media (max-width: 768px) {
  .calculator-form > .section-title {
    font-size: 28px;
    line-height: 1.2;
  }

  #page-home .calculator-form > .section-title,
  .direction-page .calculator-form > .section-title {
    font-size: 28px;
    line-height: 1.2;
  }

  .calculator-form > .text--14,
  #page-home .calculator-form > .text--14,
  .direction-page .calculator-form > .text--14 {
    font-size: 14px;
    line-height: 20px;
  }

  .calculator-form .step-title,
  #page-home .calculator-form .step-title,
  .direction-page .calculator-form .step-title {
    font-size: 14px;
    line-height: 20px;
    text-align: left;
  }

  .calculator-form .delivery-types,
  #page-home .calculator-form .delivery-types,
  .direction-page .calculator-form .delivery-types {
    gap: 12px;
  }

  .calculator-form .delivery-btn,
  #page-home .calculator-form .delivery-btn,
  .direction-page .calculator-form .delivery-btn {
    min-height: 54px;
    padding: 14px 16px;
    font-size: 14px;
  }

  #page-home .calculator-form .delivery-btn {
    min-width: 0;
    min-height: 46px;
    padding: 9px 11px;
    font-size: 11px;
    line-height: 16px;
    white-space: normal;
  }

  #page-home .calculator-form .delivery-btn svg {
    width: 18px;
    height: 18px;
    flex-basis: 18px;
  }

  .calculator-form .input-wrapper,
  #page-home .calculator-form .input-wrapper,
  .direction-page .calculator-form .input-wrapper {
    min-height: 64px;
    padding: 8px 12px;
    gap: 12px;
    border-radius: 8px;
  }

  .calculator-form .input-wrapper > svg,
  #page-home .calculator-form .input-wrapper > svg,
  .direction-page .calculator-form .input-wrapper > svg {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px;
  }
}