/**
 * Стили блока callback с главной — для страниц с tinting/assets/css/style.css.
 * Селектор .callback.callback--main не затрагивает tinting-форму «Расчёт по фото» (.callback__content).
 */

.callback.callback--main {
  position: relative;
  color: #fff
}

.callback.callback--main .callback__anchor {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

.callback.callback--main .callback__img {
  position: absolute;
  left: -40px;
  bottom: -40px
}

.callback.callback--main .callback__wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto
}

.callback.callback--main .callback__wrapper:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  translate: -50% 0;
  pointer-events: none;
  background: linear-gradient(90deg, #007bff 0, #0cf 100%);
  border-radius: 20px
}

.callback.callback--main .callback__title {
  margin-bottom: 12px
}

.callback.callback--main .callback__form {
  position: relative;
  z-index: 2;
  padding: 32px;
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 16px
}

.callback.callback--main .callback__form .input,
.callback.callback--main .callback__form .textarea {
  background: rgba(255, 255, 255, .2);
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff
}

.callback.callback--main .callback__form .input::placeholder,
.callback.callback--main .callback__form .textarea::placeholder {
  color: rgba(255, 255, 255, .8)
}

.callback.callback--main .callback__form .form__fields {
  display: grid;
  gap: 16px
}

.callback.callback--main .callback__form .checkbox,
.callback.callback--main .callback__form .textarea,
.callback.callback--main .callback__form .button {
  margin: 0
}

/* Чекбоксы как на главной (tinting: input { appearance:none } ломает ::before на input) */
.callback.callback--main .callback__form .checkbox {
  align-items: center;
  gap: 12px;
  color: #fff;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: normal
}

.callback.callback--main .callback__form .checkbox__text a {
  color: inherit
}

.callback.callback--main .callback__form input.checkbox__input[type="checkbox"] {
  position: relative;
  flex: 0 0 24px;
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  margin: 0;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 6px;
  background-color: transparent;
  background-image: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 14px 11px;
  box-shadow: none;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  vertical-align: middle;
  transition: background-color .3s, border-color .3s
}

.callback.callback--main .callback__form input.checkbox__input[type="checkbox"]:checked {
  background-color: color-mix(in srgb, white 20%, transparent);
  border-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg width='17' height='13' viewBox='0 0 17 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.742126 5.36594L5.92586 11.1051L15.3508 0.670288' stroke='white' stroke-width='2'/%3E%3C/svg%3E")
}

.callback.callback--main .callback__form input.checkbox__input[type="checkbox"]:focus-visible {
  outline: 0;
  border-color: #fff;
  background-color: color-mix(in srgb, white 85%, #007bff)
}

.callback.callback--main .callback__form input.checkbox__input[type="checkbox"]:disabled~.checkbox__text {
  opacity: .4;
  cursor: not-allowed
}

.callback.callback--main .callback__form .checkbox__input:before,
.callback.callback--main .callback__form .checkbox__input:after {
  display: none;
  content: none
}

.callback.callback--main .button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  padding: .25em 1.25em;
  min-height: 56px;
  border-radius: 12px;
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
  --icon: url(../img/icons/next.svg)
}

.callback.callback--main .button:after {
  content: "";
  width: 1em;
  height: 1em;
  mask: var(--icon) center/contain no-repeat;
  -webkit-mask: var(--icon) center/contain no-repeat;
  background: #fff;
  transition: all .4s
}

.callback.callback--main .button_white {
  background: #fff;
  color: #2b2f33
}

.callback.callback--main .button_white:after {
  background: #2b2f33
}

@media (min-width:1440px) {
  .callback.callback--main .callback__wrapper {
    gap: 124px;
    padding: 40px
  }

  .callback.callback--main .callback__form {
    width: round(clamp(min(620px, 480px), 60px + 29.1666666667vw, max(620px, 480px)), 1px)
  }
}

@media (min-width:1921px) {
  .callback.callback--main .callback__img {
    width: 795px;
    height: 375px
  }
}

@media (max-width:1920px) {
  .callback.callback--main .callback__img {
    width: calc(424px + 371*((100vw - 375px)/1545));
    height: calc(200px + 175*((100vw - 375px)/1545))
  }
}

@media (max-width:1439px) {
  .callback.callback--main .callback__wrapper {
    gap: round(clamp(min(124px, 20px), -5.2427184466px + 6.7313915858vw, max(124px, 20px)), 1px);
    padding: round(clamp(min(40px, 20px), 15.145631068px + 1.2944983819vw, max(40px, 20px)), 1px)
  }

  .callback.callback--main .callback__form {
    width: 480px
  }

  .callback.callback--main:after {
    width: calc(100% - 40px)
  }

  .callback.callback--main .callback__wrapper {
    gap: 44px
  }

  .callback.callback--main .callback__img {
    width: round(clamp(min(728.7px, 208.2px), 24.7531015038px + 48.9191729323vw, max(728.7px, 208.2px)), 1px);
    height: round(clamp(min(334.6px, 95.6px), 11.3659774436px + 22.462406015vw, max(334.6px, 95.6px)), 1px)
  }
}

@media (max-width:991px) {
  .callback.callback--main {
    padding-bottom: 0;
    background: linear-gradient(90deg, #007bff 0, #0cf 100%);
    border-radius: 20px;
    margin-inline: 8px
  }

  .callback.callback--main:after {
    display: none
  }

  .callback.callback--main .callback__wrapper {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 16px 28px
  }

  .callback.callback--main .callback__wrapper:after {
    display: none
  }

  .callback.callback--main .callback__left {
    order: 1;
    padding: 0
  }

  .callback.callback--main .callback__form {
    order: 2;
    width: 100%;
    margin: 0;
    padding: 20px 16px
  }

  .callback.callback--main .callback__img {
    order: 3;
    position: static;
    left: auto;
    bottom: auto;
    width: min(100%, 300px);
    max-width: 300px;
    height: auto;
    margin: 0 auto;
    scale: none
  }

  .callback.callback--main .callback__title,
  .callback.callback--main .callback__subtitle {
    text-align: center
  }

  .callback.callback--main .callback__subtitle {
    margin-bottom: 0
  }
}

@media (max-width:767px) {
  .callback.callback--main .callback__wrapper {
    gap: 20px;
    padding: 20px 12px 24px;
    overflow: visible
  }

  .callback.callback--main .callback__form {
    padding: 16px 12px
  }

  .callback.callback--main .callback__img {
    max-width: 260px
  }
}

@media (max-width:575px) {
  .callback.callback--main .callback__wrapper {
    padding: 16px 8px 20px;
    gap: 16px
  }

  .callback.callback--main .callback__form {
    padding: 16px 12px
  }

  .callback.callback--main .callback__form .form__fields {
    gap: 12px
  }

  .callback.callback--main .callback__form .input {
    height: 48px
  }

  .callback.callback--main .callback__form .textarea {
    min-height: 96px;
    height: auto
  }

  .callback.callback--main .callback__title {
    line-height: 1.15
  }

  .callback.callback--main .button {
    width: 100%;
    min-height: 48px
  }

  .callback.callback--main .callback__img {
    max-width: 220px
  }
}

@media (any-hover:hover) {
  .callback.callback--main .button:hover:after {
    translate: 4px 0
  }

  .callback.callback--main .button_white:hover {
    background: color-mix(in srgb, black 5%, #fff)
  }
}