/* ============================
   CONTACTS PAGE
   ============================ */

/* Extend container to match Figma frame (1440px − 120px×2 = 1200px content) */
.contacts .container {
  max-width: 1440px;
}

/* ── mainscreen ── */
.contacts {
  padding: 40px 0 60px;
}

.contacts__row {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.contacts__info {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contacts__title {
  font-family: var(--font-montserrat);
  font-weight: var(--fw-medium);
  font-size: 32px;
  line-height: var(--lh-heading);
  color: var(--color-black);
}

.contacts__description {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--color-black);
  max-width: 480px;
}

.contacts__details {
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 40px;
}

.contacts__detail-group {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contacts__detail-label {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-text);
  line-height: var(--lh-body);
  color: var(--color-black);
}

.contacts__phone-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contacts__phone,
.contacts__email {
  font-family: var(--font-pt-sans);
  font-size: var(--fs-text);
  line-height: var(--lh-body);
  color: var(--color-black);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition-fast);
}

.contacts__phone:hover,
.contacts__email:hover {
  color: var(--color-orange);
}

/* ── form wrapper ── */
.contacts__form {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.contacts__form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--form-row-gap);
}

.contacts__form-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

/* success message — queried by common.js as .callback__success */
.callback__success {
  font-family: var(--font-golos);
  font-size: var(--fs-h5);
  color: var(--color-orange);
  display: none;
  padding: 20px 0;
}

.callback__success--visible {
  display: block;
}

/* ── tablet: contact details side by side ── */
@media (min-width: 768px) {
  .contacts__details {
    flex-direction: row;
    gap: 60px;
  }
}

/* ── desktop: two-column layout ── */
@media (min-width: 1024px) {
  .contacts {
    padding: 80px 0 100px;
  }

  .contacts__row {
    flex-direction: row;
    align-items: flex-start;
    gap: 40px;
  }

  .contacts__info {
    flex: 1;
    min-width: 0;
  }

  .contacts__form-wrap {
    width: 50%;
    max-width: 615px;
    flex-shrink: 0;
  }

  .contacts__title {
    font-size: var(--fs-h1);
  }
}

/* ── wide: точные пропорции Figma (container override даёт 1200px контента) ── */
@media (min-width: 1440px) {
  .contacts__row {
    gap: 0;
    justify-content: space-between;
  }

  .contacts__form-wrap {
    width: 615px;
    max-width: none;
  }
}

/* ── widget (map) ── */
.contacts-widget {
  width: 100%;
  height: 400px;
  position: relative;
  overflow: hidden;
}

.contacts-widget iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.contacts-map {
  width: 100%;
  height: 100%;
}

.contacts-map-pin {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  z-index: 10;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.contacts-map-pin__circle {
  width: 74px;
  height: 74px;
  background: #EC5800;
  border-radius: 50%;
  border: 3px solid #fff;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contacts-map-pin__tail {
  width: 0;
  height: 0;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 18px solid #EC5800;
  margin-top: -2px;
}

@media (min-width: 768px) {
  .contacts-widget {
    height: 600px;
  }
}


/* ── МОБ (≤767px): форма контактов — меньше отступы, кнопка на всю ширину ── */
@media (max-width: 767px) {
  /* меньше расстояние форма↔чекбокс и чекбокс↔кнопка */
  .contacts__form {
    gap: 30px;
  }
  /* у чекбокса согласия свой margin-top 20px — убираем, иначе зазор 50px */
  .contacts__form .form-consent {
    margin-top: 0;
  }
  .contacts__form-footer {
    flex-direction: column;
    align-items: stretch;
  }
  .contacts__form-footer .form__error-msg:empty {
    display: none;
  }
  /* кнопка «Отправить» — на всю ширину экрана */
  .contacts__form-footer .btn--primary {
    width: 100%;
    justify-content: space-between;
  }
}