@import url(lower.css);

.contact {
  --red-c: #e62c2c;
  --f-sz: 14px;
}
.container {
  display: flex;
  gap: 1em;
  padding: 0 5vw max(8vw, 3rem);
  &:has([name="contact-form"]) {
    padding-top: max(8vw, 60px);
  }
}
.progress {
  display: flex;
  gap: 1em;
  flex-direction: column;
  order: 1;
  width: calc(var(--f-sz) * 4 + 5vw - 1em);
  height: fit-content;
  position: sticky;
  top: calc(50vh - 1.5em * 1.4 - 1em);
  counter-reset: num 0;
  li {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    color: #ccc;
    counter-increment: num 1;
    &::after {
      position: absolute;
      content: "";
      inset: 0 0 0 auto;
      width: 3px;
      background-color: #ccc;
    }
    &.done {
      color: #333;
      &::after {
        background-color: #333;
      }
    }
    &::before {
      content: counter(num) " .";
      width: 1.6em;
    }
  }
}

form {
  flex: 1;
}
.input-area {
  display: flex;
  gap: 5vw;
  margin-inline: auto;
  width: min(100%, 600px);
  transform-style: preserve-3d;
  perspective: 100vmax;
  ~ .input-area {
    margin-top: 2.6em;
  }
}

.label {
  position: relative;
  flex: 1;
  span {
    font-size: 16px;
    position: absolute;
    inset: 0.9em auto auto 1em;
    pointer-events: none;
    background-color: #fff;
    padding-inline: 0.5em;
    transition-property: font-size, inset;
    transition-duration: 0.4s;
  }
}
.required,
.no-required {
  align-self: start;
  border-radius: 6px;
  font-size: var(--f-sz);
  padding: 0.3em 1em;
  &:is(:not(:has(.radio)) *) {
    margin-top: 0.7rem;
  }
}
.required {
  overflow: hidden;
  --w: 4em;
  width: var(--w);
  height: 2em;
  box-shadow: inset 2px 2px 4px rgb(0 0 0/0.3), inset -2px -2px 4px #fff;
  position: relative;

  .inner {
    position: absolute;
    z-index: -1;
    inset: 0 -200% 0 0;
    display: flex;
    justify-content: space-between;
    background: linear-gradient(to right, #fbd0e2 34%, #fff 66%);
    transition: inset 1s;
    &:is(.input-area:has(.is-ok) *) {
      inset: 0 0 0 -200%;
    }
  }
  span {
    width: var(--w);
    display: grid;
    place-items: center;
  }
  &:is(.input-area:has(.radio) *),
  &:is(.input-area:has(.agree) *) {
    margin-top: 0.2em;
  }
}
.no-required {
  background-color: #eee;
}
input,
select,
textarea {
  font-size: 16px;
  box-shadow: inset 2px 2px 4px rgb(0 0 0/0.3), inset -2px -2px 4px #fff;
  padding: 0.8em 1.4em;
  border-radius: 1.6em;
  outline: 2px solid transparent;
  outline-offset: -1px;
  width: 100%;
  /* &:where(:focus) {
    outline-color: var(--secondary-c);
  } */
}
/* .is-error {
  outline-color: #fbd0e2;
} */
input:focus + span,
input:not(:placeholder-shown) + span,
textarea:focus + span,
textarea:not(:placeholder-shown) + span,
.label select + span {
  font-size: 0.8em;
  inset: -0.6rem auto auto 1.4em;
}
:-webkit-autofill {
  transition: background-color calc(infinity * 1s);
}
.select-box::before {
  position: absolute;
  content: "";
  inset: 1.3em 1.6em auto auto;
  width: 7px;
  height: 7px;
  border-right: 1px solid;
  border-bottom: 1px solid;
  rotate: 45deg;
  pointer-events: none;
  transition: 0.4s;
}
fieldset {
  display: flex;
  gap: 2em;
  label {
    display: flex;
    gap: 1em;
    align-items: center;
  }
}
textarea {
  resize: none;
}
.lead {
  margin: max(5vw, 50px) auto;
  width: min(100%, 500px);
  line-height: 1.8;
}
.agree {
  display: flex;
  align-items: start;
  gap: 1em;
  > p {
    line-height: 1.6;
    padding-top: 0.2em;
  }
  a {
    color: var(--link-c);
    border-bottom: 1px solid;
    transition: 0.4s;
    &:hover {
      opacity: 0.6;
    }
  }
}
.check-box,
.radio {
  position: relative;
  &::before {
    pointer-events: none;
    position: absolute;
    content: "";
    inset: 0;
    margin: auto;
    width: 0.8em;
    height: 0.4em;
    border-bottom: 2px solid;
    border-left: 2px solid;
    rotate: -45deg;
    opacity: 0;
    scale: 0.3;
  }
  &:has(:checked)::before {
    animation: check-bounce 0.5s ease-in forwards;
  }
}
@keyframes check-bounce {
  50% {
    scale: 1.3;
    opacity: 1;
  }
  to {
    scale: 1;
    opacity: 1;
  }
}
input[type="checkbox"],
input[type="radio"] {
  width: 2em;
  height: 2em;
  padding: 0;
  display: inline-block;
}
form button,
.complete-link {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin: 2.6em auto 0;
  font-size: 1.2rem;
  padding-inline: 1.4em;
  height: 3em;
  border-radius: 1.6em;
  width: fit-content;
  color: #fff;
  background-color: #333;
  border: 1px solid #333;
  box-shadow: 0 10px 20px -2px #ccc;
  transition: 0.4s;
  &:not([disabled]):hover {
    background-color: transparent;
    border-color: #333;
    color: #333;
  }
  span {
    font-size: 34px;
    font-variation-settings: "wght" 300;
  }
}
button[disabled] {
  opacity: 0.2;
}
&.btn_back {
  background-color: transparent;
  color: #333;
  &:hover {
    background-color: #333;
    color: #fff;
  }
}
.btn_confirm {
  translate: calc((var(--f-sz) * 4 + 5vw) / 2);
}
.error-text,
.error-text-mail {
  color: var(--red-c);
  margin-top: 0.6em;
  display: none;
}
.label:has(.is-error) .error-text,
.label:has(.is-error-mail) .error-text-mail {
  display: block;
}
/* ========== conf-form ========== */

.container:has(.conf_form) {
  padding-top: max(5vw, 30px);
}
.conf_form .progress,
.complete-box .progress {
  margin-top: max(5vw, 50px);
}

.conf_wrap {
  width: min(100%, 500px);
  padding-block: 1.8em;
  border-bottom: 1px solid rgb(0, 0, 0, 0.1);
  margin-inline: auto;
}
.conf_label {
  font: 500 1em var(--weight-variable);
  color: var(--dark-c);
  opacity: 0.5;
  margin-bottom: 0.4em;
  display: block;
}
.button_wrap {
  display: flex;
  width: min(100%, 500px);
  justify-content: space-between;
  margin-inline: auto;
}
.button_wrap button {
  margin-top: 0;
}
.conf-lead {
  margin-block: 2em;
  text-align: center;
  font-weight: 500;
}

/* ========== complete-box ========== */

.container:has(.complete-box) {
  padding-block: max(5vw, 30px) max(8vw, 3rem);
}
.complete-box {
  text-align: center;
  flex: 1;
  h2 {
    font-size: max(1.6vw, 1.2em);
    font-weight: 500;
    color: var(--secondary-c);
    margin-bottom: max(3vw, 30px);
    span {
      display: block;
      font-size: 80px;
      margin-bottom: 10px;
      font-variation-settings: "wght" 300;
    }
  }
}
.complete-text {
  width: min(100%, 500px);
  text-align: center;
  line-height: 1.8;
  margin: 0 auto max(3vw, 30px);
}

.error {
  display: flex;
  gap: 1em;
  align-items: center;
  font-size: 1.4em;
  color: var(--red-c);
  border: 1px solid;
  padding: 1em 2em;
  width: fit-content;
  margin: max(5vw, 50px) auto;
  span {
    font-size: 1.4em;
  }
}

@media (width < 768px) {
  .container {
    flex-direction: column;
    gap: 50px;
  }
  .lead {
    padding-inline: 5vw;
  }
  .progress {
    position: static;
    order: 0;
    flex-direction: row;
    width: 100%;
    gap: 8px;
    &.in-conf {
      margin-top: 50px;
    }
    li {
      padding-top: 2em;
      flex: 1;
      &::after {
        inset: 0 0 auto;
        width: auto;
        height: 3px;
      }
    }
  }
  .contact {
    font-size: 0.9em;
  }
  .input-area {
    font-size: 1rem;
    gap: 0.8em;
    flex-direction: column;
    ~ .input-area {
      margin-top: 1.6em;
    }
  }
  .required {
    margin-top: 0;
  }
  .error-text {
    font-size: 14px;
  }
  form button,
  .complete-link {
    font-size: 1rem;
    span {
      font-size: 28px;
    }
  }
  [name="contact-form"] button {
    translate: 0;
  }

  .conf_form,
  .complete-box {
    padding-top: 0;
  }
  .conf_wrap {
    padding-block: 1.2em;
  }
}