/*
 * The form component.
 *
 * Edit this file. It is served as it is — nothing compiles it, and the
 * order it loads in is set in resources/css/order.php.
 */

.contact-form__wrapper {
  background-color:#e1251b;
  bottom:-2px;
  color:#fff;
  display:flex;
  flex-direction:column;
  left:var(--offset-x);
  overflow:auto;
  padding:42px var(--offset-x) 48px;
  position:fixed;
  transform:translateY(100%);
  transition:transform .4s ease;
  width:calc(var(--grid-column-width)*6 - var(--offset-x));
  z-index:20;
}

@media screen and (max-width:1440px) {

  .contact-form__wrapper {
    padding:24px var(--offset-x) 32px;
  }
}

@media screen and (max-width:1199px) {

  .contact-form__wrapper {
    width:calc(var(--grid-column-width)*9 - var(--offset-x));
    z-index:101;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .contact-form__wrapper {
    left:0;
    right:0;
    top:0;
    width:100vw;
  }
}

.contact-form__wrapper--opened {
  transform:translateY(0);
}

.contact-form__close-btn {
  align-items:center;
  align-self:center;
  border:1px solid #fff6;
  color:#fff;
  display:flex;
  flex-shrink:0;
  height:48px;
  justify-content:center;
  width:96px;
}

.contact-form__close-btn svg {
  --size:16px;
  height:var(--size);
  width:var(--size);
}

@media screen and (max-width:1440px) {

  .contact-form__close-btn {
    height:32px;
    width:64px;
  }
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .contact-form__close-btn:not(:disabled):hover {
    background-color:#181818;
  }
}

.contact-form__heading {
  font-size:32px;
  letter-spacing:-3.25%;
  line-height:130%;
  margin-top:42px;
}

@media screen and (max-width:1440px) {

  .contact-form__heading {
    margin-top:54px;
  }
}

@media screen and (max-width:1199px) {

  .contact-form__heading {
    margin-top:46px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .contact-form__heading {
    margin-top:64px;
  }
}

.contacts-form {
  margin-top:48px;
  width:100%;
}

@media screen and (max-width:1440px) {

  .contacts-form {
    margin-top:32px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .contacts-form {
    margin-top:24px;
  }
}

.contacts-form__inputs-container {
  display:flex;
  flex-direction:column;
  gap:20px;
  width:100%;
}

@media screen and (max-width:1440px) {

  .contacts-form__inputs-container {
    gap:12px;
  }
}

.contacts-form .contact-form__input,
.contacts-form .contact-form__textarea {
  background-color:#e1251b;
  border-bottom:1px solid #fff6;
  caret-color:#fff;
  color:#fff;
  padding:16px 12px 14px;
  transition:border-color .3s ease;
  width:100%;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .contacts-form .contact-form__input:not(:disabled):hover,
  .contacts-form .contact-form__textarea:not(:disabled):hover {
    border-color:#fff;
  }
}

@media screen and (max-width:1440px) {

  .contacts-form .contact-form__input,
  .contacts-form .contact-form__textarea {
    padding:10px 8px 8px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .contacts-form .contact-form__input,
  .contacts-form .contact-form__textarea {
    padding:14px 8px 12px;
  }
}

.contacts-form .contact-form__input::placeholder,
.contacts-form .contact-form__textarea::placeholder {
  color:#fff;
}

.contacts-form .contact-form__input:-webkit-autofill,
.contacts-form .contact-form__textarea:-webkit-autofill {
  -webkit-text-fill-color:#fff;
  box-shadow:inset 0 0 0 1000px #e1251b;
  caret-color:#fff;
  color:#fff;
  -webkit-transition:background-color 9999s ease-out 0s;
  transition:background-color 9999s ease-out 0s;
}

.contacts-form .contact-form__input:-webkit-autofill,
.contacts-form .contact-form__input:autofill,
.contacts-form .contact-form__textarea:-webkit-autofill,
.contacts-form .contact-form__textarea:autofill {
  -webkit-text-fill-color:#fff;
  box-shadow:inset 0 0 0 1000px #e1251b;
  caret-color:#fff;
  color:#fff;
  -webkit-transition:background-color 9999s ease-out 0s;
  transition:background-color 9999s ease-out 0s;
}

.contacts-form .contact-form__input:-webkit-autofill:first-line,
.contacts-form .contact-form__textarea:-webkit-autofill:first-line {
  -webkit-text-fill-color:#fff;
  color:#fff;
  font:inherit;
  letter-spacing:inherit;
}

.contacts-form .contact-form__input:-webkit-autofill:first-line,
.contacts-form .contact-form__input:autofill:first-line,
.contacts-form .contact-form__textarea:-webkit-autofill:first-line,
.contacts-form .contact-form__textarea:autofill:first-line {
  -webkit-text-fill-color:#fff;
  color:#fff;
  font:inherit;
  letter-spacing:inherit;
}

.contacts-form .contact-form__input:focus::placeholder,
.contacts-form .contact-form__textarea:focus::placeholder {
  opacity:0;
}

.contacts-form .contact-form__textarea {
  height:110px;
}

@media screen and (max-width:1440px) {

  .contacts-form .contact-form__textarea {
    height:68px;
  }
}

.contacts-form .contacts-form__input-wrapper {
  position:relative;
}

.contacts-form .contacts-form__label {
  font-size:10px;
  left:12px;
  letter-spacing:-.0325em;
  opacity:0;
  position:absolute;
  top:0;
  transform:translateY(100%);
  transition:transform .3s ease,opacity .3s ease;
}

@media screen and (max-width:1440px) {

  .contacts-form .contacts-form__label {
    left:8px;
  }
}

.contacts-form .contact-form__input:focus+.contacts-form__label,
.contacts-form .contact-form__textarea:focus+.contacts-form__label {
  opacity:1;
  transform:translateY(0);
}

.contacts-form .contacts-form__buttons-container {
  align-items:center;
  display:flex;
  justify-content:space-between;
  margin-top:56px;
  width:100%;
}

@media screen and (max-width:1440px) {

  .contacts-form .contacts-form__buttons-container {
    margin-top:35px;
  }
}

@media screen and (max-width:1199px) {

  .contacts-form .contacts-form__buttons-container {
    margin-top:183px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .contacts-form .contacts-form__buttons-container {
    margin-top:153px;
  }
}

.contacts-form .contact-form__checkbox-wrapper {
  position:relative;
  width:calc(var(--grid-column-width)*2 + var(--grid-gap)*1);
}

@media screen and (max-width:1440px) {

  .contacts-form .contact-form__checkbox-wrapper {
    width:calc(var(--grid-column-width)*2.5 + var(--grid-gap)*1.5);
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .contacts-form .contact-form__checkbox-wrapper {
    width:calc(var(--grid-column-width)*13 + var(--grid-gap)*12);
  }
}

.contacts-form .contact-form__checkbox-wrapper .form-error {
  left:105%;
  right:auto;
}

.contacts-form .contacts-checkox__label {
  align-items:center;
  display:flex;
  gap:10px;
}

@media screen and (max-width:1440px) {

  .contacts-form .contacts-checkox__label {
    gap:6px;
  }
}

.contacts-form .contacts-checkox__input {
  -webkit-clip-path:inset(0);
  clip-path:inset(0);
  opacity:0;
  position:absolute;
  visibility:hidden;
  z-index:-1;
}

.contacts-form .contacts-checkox__input:checked+.contacts-checkox__label .contacts-checkox__el {
  border-color:#fff;
}

.contacts-form .contacts-checkox__input:checked+.contacts-checkox__label .contacts-checkox__el:after {
  background-color:#fff;
}

.contacts-form .contacts-checkox__el {
  --size:20px;
  border:1px solid #fff6;
  cursor:pointer;
  display:block;
  flex-shrink:0;
  height:var(--size);
  position:relative;
  transition:border-color .3s ease;
  width:var(--size);
}

.contacts-form .contacts-checkox__el:after {
  content:"";
  inset:1px;
  position:absolute;
  transition:background-color .3s ease;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .contacts-form .contacts-checkox__el:not(:disabled):hover {
    border-color:#fff;
  }
}

@media screen and (max-width:1440px) {

  .contacts-form .contacts-checkox__el {
    --size:14px;
  }
}

.contacts-form .contacts-form__submit-btn {
  align-items:center;
  background-color:#181818;
  display:flex;
  height:48px;
  justify-content:center;
  overflow:hidden;
  position:relative;
  width:calc(var(--grid-column-width)*2 + var(--grid-gap)*1);
}

.contacts-form .contacts-form__submit-btn span {
  position:relative;
  z-index:2;
}

@media screen and (max-width:1440px) {

  .contacts-form .contacts-form__submit-btn {
    height:32px;
  }
}

@media (max-width:900px)and (orientation:landscape),screen and (max-width:767px) {

  .contacts-form .contacts-form__submit-btn {
    height:40px;
    width:calc(var(--grid-column-width)*10 + var(--grid-gap)*9);
  }
}

.contacts-form .contacts-form__submit-btn:after {
  background-color:#fff;
  content:"";
  inset:0;
  position:absolute;
  transform:translateY(100%);
  transition:transform .3s ease;
  z-index:1;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .contacts-form .contacts-form__submit-btn:not(:disabled):hover {
    color:#181818;
  }

  .contacts-form .contacts-form__submit-btn:not(:disabled):hover:after {
    transform:translateY(0);
  }
}

.contacts-form .form-error {
  opacity:0;
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  transition:opacity .3s ease;
}

.contacts-form .form-error svg {
  --size:14px;
  height:var(--size);
  width:var(--size);
}

.contacts-form .form-error.form-error--visible {
  opacity:1;
}

.contacts-form .contacts-checkbox__link {
  text-decoration:underline;
  transition:opacity .3s ease;
}

@media(any-hover:hover),(hover:hover)and (pointer:fine) {

  .contacts-form .contacts-checkbox__link:not(:disabled):hover {
    opacity:.4;
  }
}