@import url("https://mxmst.ru/fonts/mont_lato.css");

* {
  margin: 0;
  padding: 0;
  font-family: Montserrat, sans-serif;
  text-decoration: none;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

:root {
  --brand-green: #009846;
  --brand-red: #E31E24;
  --brand-yellow: #D7B56D;
  --brand-blue: #14395E;

  --main-color: var(--brand-green);
}

div,
body,
aside,
article,
header,
footer,
nav,
main,
form {
  display: flex;
  flex-direction: column;
}

a {
  color: black;
  transition: .2s color;
}

a:hover {
  color: var(--main-color)
}

body {
  min-height: 100dvh;
  width: 100vw;
  overflow-x: hidden;
  align-items: center;
  padding-bottom: 2.4rem;

  :has(dialog[open]) {
    overflow: hidden;
  }
}

header {
  flex-direction: row;
  max-width: 1200px;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  padding: 1.4rem;
}

dialog {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  border: 0;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  border-radius: 1rem;
  outline: none;
  width: 90vw;
  max-width: 600px;
  transition: .3s opacity;

  &[open],
  &[open]::backdrop {
    animation: dialogFadeIn .5s ease normal;
  }
}

.modal-wrapper {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}

.modal-header {
  gap: .6rem;
  margin-bottom: -.4rem;
}


.home-link {
  margin-right: 49px;
}

.stages-buttons {
  flex-direction: row;
  gap: 1rem;
}

.stage-button {
  --stage-button-size: 2.6rem;

  height: var(--stage-button-size);
  width: var(--stage-button-size);
  align-items: center;
  justify-content: center;
  border: 2px solid #009746;
  -webkit-border-radius: .7rem;
  -moz-border-radius: .7rem;
  border-radius: .7rem;
  cursor: pointer;
  transition: .15s background-color, .1s transform;
  user-select: none;
}

.stage-button p {
  font-weight: 600;
  font-size: 1.2rem;
}

.stage-button:hover {
  background-color: #edf6f1;
}

.stage-button:active {
  transform: scale(.96);
}

.stage-button.current-stage {
  background-color: #ceeedb;
}

main {
  --offset: 0vw;
  --top: 7rem;

  flex-direction: row;
  position: absolute;
  min-height: calc(100dvh - var(--top) - 2rem);
  top: var(--top);
  left: 0;
  gap: calc(100vw - min(90vw, 500px));
  width: 100vw;
  overflow-x: hidden;
  overflow-y: hidden;
  padding: 0 calc(50vw - min(90vw, 500px) / 2) 2rem;
  scroll-behavior: smooth;
  transition: .2s height;
  scroll-snap-type: x mandatory;

  & h3 {
    margin: 2rem 0 -.4rem;
    font-weight: 600;
  }
}

.page {
  max-width: 500px;
  width: 90vw;
  gap: 3rem;
  flex-grow: 1;
  flex-shrink: 0;
  /*justify-content: space-between;*/
  height: fit-content;
  scroll-snap-align: center;
}

.form-wrapper {
  gap: 2rem;
}

main h2 {
  font-weight: 400;
  color: #888888;
  font-size: .9rem;
  text-align: center;
  width: 100%;
}

form {
  width: 100%;
  gap: 1.8rem;
}

.form-row {
  width: 100%;
}

.horizontal-input__wrapper {
  flex-direction: row;
  /*align-items: center;*/
  margin-top: .5rem;
  flex-wrap: wrap;

  & span {
    margin: auto 0;
  }

  &>div {
    /*max-width: fit-content;*/
  }
}

.form-row div {
  width: 100%;
  gap: .5rem;
}

.form-row label {
  font-size: .9rem;
}

.form-row>div[required] label:after {
  content: " *";
  color: red;
}

.form-row h3 {
  font-size: 2rem;
}

.form-row.final {
  gap: .6rem;
}

input,
textarea,
select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  height: 56px;
  border: 1px solid var(--main-color);
  -webkit-border-radius: .5rem;
  -moz-border-radius: .5rem;
  border-radius: .5rem;
  padding: 1rem;
  outline-color: var(--main-color);
  font-size: 1.05rem;
  transition: .2s;
}

.select-wrapper {
  position: relative;
}

select {
  /*position: absolute;*/
  z-index: 10000;
  width: 100%;
  background-color: transparent;
}

.select-wrapper::after {
  content: "";
  background: no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='black'%3E%3Cpath d='M480-361q-8 0-15-2.5t-13-8.5L268-556q-11-11-11-28t11-28q11-11 28-11t28 11l156 156 156-156q11-11 28-11t28 11q11 11 11 28t-11 28L508-372q-6 6-13 8.5t-15 2.5Z'/%3E%3C/svg%3E");
  height: 24px;
  width: 24px;
  display: block;
  right: .4rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1000;
}

textarea {
  resize: none;
  height: 10rem;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-wrapper {
  position: relative;
}

.input-wrapper::after {
  position: absolute;
  content: "";
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--main-color);
  border-bottom-color: transparent;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  animation: rotation 1s linear infinite;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: .2s opacity;
  opacity: 0;
}

.input-wrapper.loading::after {
  opacity: 1;
}

.wrong {
  outline-color: var(--brand-red);
  border: 1px solid var(--brand-red);
}

.stage-controllers {
  flex-direction: row;
  gap: 1rem;
  justify-content: space-between;
  flex-wrap: wrap;
  user-select: none;
}

.stage-controllers div {
  flex-direction: row;
  align-items: center;
  gap: .2rem;
  padding: .8rem 1rem;
  -webkit-border-radius: .6rem;
  -moz-border-radius: .6rem;
  border-radius: .6rem;
  cursor: pointer;
  transition: .1s transform, .15s background-color;
  border: 1px solid #009846;
}

.stage-controllers p {
  padding: 0 .3rem .05rem;
}

.stage-controllers div:active,
.submit:active {
  transform: scale(.98);
}

.controller-previous:hover {
  background-color: #edf6f1;
}

.controller-next:hover,
.submit:hover {
  background-color: #b7e5ca;
}

.controller-next {
  background-color: #ceeedb;
  font-weight: 400;
}

.stage-controllers svg {
  height: 1.2rem;
}

.submit,
.submit-modal {
  --border-radius: .8rem;

  flex-direction: row;
  align-items: center;
  gap: .2rem;
  padding: 1rem 1rem;
  -webkit-border-radius: var(--border-radius);
  -moz-border-radius: var(--border-radius);
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: .1s transform, .15s background-color;
  border: 1px solid #009846;
  background-color: #ceeedb;
  font-weight: 600;
  justify-content: center;
  font-size: 1.1rem;
  user-select: none;

  &:active {
    transform: scale(.96);
  }
}

.agreement-external-link {
  height: 0;
  opacity: 0;
  transition: .2s height, .2s padding, .1s border, .6s opacity ease-in-out;
  padding: 0;
  border-top: none;

  &.visible {
    height: fit-content;
    opacity: 1;
    padding-top: 1rem;
    border-top: 1px solid var(--main-color);
  }
}

.agreement-external-link a {
  color: #10a459;
}


.invalid-fields-list {
  gap: .8rem;
}

.invalid-field p::before {
  content: "—";
  position: relative;
  margin-right: 1ch;
}

.notifications {
  position: fixed;
  bottom: 3rem;
  right: 2rem;
  width: calc(40vw - 250px);
  max-width: 300px;
}

.notifications>div {
  border: 2px solid #ddd;
  padding: 1.2rem 1.5rem;
  -webkit-border-radius: 1.4rem;
  -moz-border-radius: 1.4rem;
  border-radius: 1.4rem;
  background-color: #fff;
}

.progress {
  gap: 1.2rem;
  opacity: 0;
  transition: opacity .4s;
}

.progress-text {
  gap: .3rem;
}

.progress-text span {
  color: var(--main-color);
  font-weight: 600;
}

.progress-bar {
  width: 100%;
  background-color: #eeeeee;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  height: 4px;
}

.progress-bar__thumb {
  background-color: var(--main-color);
  width: 0;
  height: 100%;
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  transition: width .4s;
}

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  z-index: 1000000;
}

.c-progress-size-big {
  animation: rotate 2s linear infinite;
  height: 100px;
  width: 100px
}

.c-progress-size-big .c-progress__path {
  stroke-width: 4px;
  r: 26px;
  cx: 50px;
  cy: 50px;
  animation: dash-big 1.5s ease-in-out infinite
}

.c-progress__path {
  stroke-dasharray: 1, 200;
  stroke-dashoffset: 0;
  stroke-linecap: round;
  stroke: var(--main-color);
  fill: none;
  stroke-miterlimit: 10
}

.tooltip {
  --b: 2em;
  /* base */
  --h: 1em;
  /* height */

  --p: 50%;
  /* position  */
  --r: 1.2em;
  /* the radius */
  --c: #4ECDC4;

  border-radius: var(--r);
  clip-path: polygon(0 100%, 0 0, 100% 0, 100% 100%,
      min(100%, var(--p) + var(--b) / 2) 100%,
      var(--p) calc(100% + var(--h)),
      max(0%, var(--p) - var(--b) / 2) 100%);
  background: var(--c);
  border-image: conic-gradient(var(--c) 0 0) fill 0/ var(--r) calc(100% - var(--p) - var(--b) / 2) 0 calc(var(--p) - var(--b) / 2)/ 0 0 var(--h) 0;
}

@media screen and (max-width: 1150px) {
  .notifications {
    display: none;
  }
}

@media screen and (max-width: 650px) {
  header {
    flex-direction: column;
    gap: 1rem;
  }

  .header-mail {
    display: none;
  }

  .home-link {
    margin: 0;
  }

  .stages-buttons {
    flex-wrap: wrap;
    justify-content: center;
  }

  .stage-button {
    --stage-button-size: 3rem;
  }
}

@media screen and (max-width: 340px) {
  .stage-controllers div {
    flex-grow: 1;
    justify-content: center;
  }
}

@keyframes rotate {
  to {
    transform: rotate(1turn)
  }
}

@keyframes dash-big {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0
  }

  50% {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -35
  }

  to {
    stroke-dasharray: 89, 200;
    stroke-dashoffset: -160
  }
}

@keyframes dialogFadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes rotation {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }

  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}