/* =========================================================
   Страница «Контакты».
   Масштаб обычный: 1rem = 1px при 320 · 540 · 1560 · 1920.
   ========================================================= */

/* ---------- Хлебные крошки ---------- */
.contacts-top { display: flex; margin: 22rem 0 44rem; }
@media (min-width: 768px) and (max-width: 991px) { .contacts-top { margin: 22rem 0 32rem; } }
@media (max-width: 767px) { .contacts-top { margin: 22rem 0 20rem; } }

/* ---------- Карточки связи ---------- */
@media (min-width: 1200px) {
  .contacts-consult.section { margin: 154rem 0 126rem; }
  .contacts-consult .section-title { margin-bottom: 54rem; }
}
@media (max-width: 767px) { .contacts-consult.section { margin-bottom: 0; } }

.contacts-cards {
  --gap: 20rem;
  --columns: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 40rem var(--gap);
  justify-content: center;
  max-width: 1150rem;
  margin: 0 auto;
}
.contacts-card {
  display: flex;
  flex-direction: column;
  width: calc(100% / var(--columns) - var(--gap) + var(--gap) / var(--columns));
  max-width: 450rem;
}
.contacts-card__avatar { position: relative; z-index: 1; max-width: 180rem; margin-bottom: -90rem; margin-left: 52rem; }
.contacts-card__avatar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180rem;
  height: 180rem;
  overflow: hidden;
  border-radius: 50%;
  background: linear-gradient(140deg, #00374D 0%, #1C5D75 48%, #E84C61 118%);
}
.contacts-card__avatar svg { width: 64rem; height: 64rem; transition: transform .3s; }
.contacts-card:hover .contacts-card__avatar svg { transform: scale(1.25); }
.contacts-card__indicator {
  position: absolute;
  right: 19px;
  bottom: 7px;
  width: 26rem;
  height: 26rem;
  border: 4px solid #fff;
  border-radius: 50%;
  background: #10BA18;
}
.contacts-card__box { flex: 1; background-color: #fff; border-radius: 90rem; padding: 110rem 52rem 48rem; }
.contacts-card__title {
  margin: 0 0 32rem;
  font-family: var(--font-main);
  font-weight: var(--fw-medium);
  font-size: 22rem;
  line-height: 24rem;
  color: #202020;
}
.contacts-card__line {
  margin-bottom: 12rem;
  font-family: var(--font-main);
  font-weight: var(--fw-regular);
  font-size: 18rem;
  line-height: 23rem;
  color: #25262B;
}
.contacts-card__line a { color: #25262B; text-decoration: none; }
.contacts-card__chips { display: flex; flex-wrap: wrap; gap: 8rem; margin-bottom: 10rem; }
.contacts-chip {
  display: flex;
  align-items: center;
  gap: 4rem;
  padding: 0 12rem 0 0;
  border: 0;
  border-radius: 20rem;
  background-color: #F2F2F2;
  font-family: var(--font-main);
  font-weight: var(--fw-regular);
  font-size: 14rem;
  line-height: 18rem;
  color: #29282A;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .3s;
}
.contacts-chip:hover { background-color: #E8E8E8; }
.contacts-chip svg { flex-shrink: 0; width: 22rem; height: 22rem; }
.contacts-card__note {
  font-family: var(--font-main);
  font-weight: var(--fw-regular);
  font-size: 18rem;
  line-height: 23rem;
  color: #909090;
  overflow-wrap: anywhere;
}
.contacts-card__note a { color: #909090; text-decoration: none; }
.contacts-card__hours { display: block; margin-top: 8rem; color: #25262B; }

@media (max-width: 991px) and (min-width: 768px) {
  .contacts-cards { --gap: 10rem; gap: 24rem var(--gap); }
}
@media (max-width: 767px) {
  .contacts-cards { --columns: 2; --gap: 8rem; gap: var(--gap); }
  .contacts-card__avatar { display: flex; justify-content: center; max-width: 86rem; margin: 0 auto -43rem; }
  .contacts-card__avatar-inner { width: 86rem; height: 86rem; }
  .contacts-card__avatar svg { width: 32rem; height: 32rem; }
  .contacts-card__indicator { right: 10px; bottom: 4px; width: 12rem; height: 12rem; border: 2rem solid #fff; }
  .contacts-card__box { padding: 58rem 12rem 12rem; border-radius: 20rem; }
  /* в оригинале 13/9; высота строки больше, чтобы узбекский заголовок мог перенестись */
  .contacts-card__title { margin: -2rem -4rem 2rem; font-size: 13rem; line-height: 13rem; text-align: center; }
  .contacts-card__line { margin-bottom: 14rem; font-size: 10rem; line-height: 13rem; text-align: center; }
  .contacts-card__chips { margin-top: 14rem; margin-bottom: 14rem; }
  .contacts-chip { padding-right: 8rem; border-radius: 16rem; font-size: 10rem; line-height: 13rem; }
  .contacts-chip svg { width: 16rem; height: 16rem; }
  .contacts-card__note { font-size: 9rem; line-height: 11rem; }
  .contacts-card__hours { margin-top: 4rem; }
}

/* ---------- Карта ---------- */
.contacts-map { margin: 80rem 0 40rem; border-radius: 30rem; background-color: #fff; padding: 10rem; scroll-margin-top: 120px; }
.contacts-map__wrapper { border-radius: 20rem; overflow: hidden; height: 310px; background: var(--c-light); }
.contacts-map__wrapper iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (min-width: 768px) and (max-width: 991px) { .contacts-map { margin: 32rem 0 40rem; } }
@media (max-width: 767px) { .contacts-map { margin: 40rem 0; scroll-margin-top: 70px; } }

/* ---------- Форма обращения ---------- */
.contacts-form {
  display: flex;
  justify-content: space-between;
  gap: 70rem;
  margin: 0 0 40rem;
  padding: 40rem 50rem;
  border-radius: 30rem;
  background-color: #fff;
  font-family: var(--font-main);
  scroll-margin-top: 120px;
}
.contacts-form__meta { width: 430rem; flex-shrink: 0; }
.contacts-form__title { margin: 0 0 12rem; font-family: var(--font-main); font-weight: var(--fw-medium); font-size: 36rem; line-height: 42rem; color: var(--c-head); }
.contacts-form__text { font-weight: var(--fw-regular); font-size: 18rem; line-height: 23rem; color: #25262B; }
.contacts-form__fields { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16rem; }
.contacts-form input[type=text], .contacts-form input[type=tel], .contacts-form textarea {
  display: block;
  width: 100%;
  height: 52rem;
  padding: 0 22rem;
  border: 1px solid #E3E5E8;
  border-radius: 26rem;
  background: var(--c-bg);
  font-family: var(--font-main);
  font-weight: var(--fw-regular);
  font-size: 18rem;
  line-height: 23rem;
  color: #25262B;
  outline: none;
  transition: border-color .3s;
}
.contacts-form textarea { grid-column: 1 / -1; height: 104rem; padding: 14rem 22rem; resize: none; }
.contacts-form input::placeholder, .contacts-form textarea::placeholder { color: #909090; opacity: 1; }
.contacts-form input:focus, .contacts-form textarea:focus { border-color: var(--c-head); }
.contacts-form input.is-invalid { border-color: var(--c-accent); }
.contacts-form__bottom { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 24rem; }
.contacts-form__agree { position: relative; padding-left: 30rem; font-weight: var(--fw-regular); font-size: 14rem; line-height: 18rem; color: #909090; }
.contacts-form__agree input[type=checkbox] { position: absolute; left: 0; top: 0; width: 20rem; height: 20rem; margin: 0; accent-color: var(--c-accent); }
.contacts-form__agree a { color: #25262B; text-decoration: none; border-bottom: 1px solid; }
.contacts-form__agree.is-invalid label { color: var(--c-accent); }
.contacts-form__bottom .btn { flex-shrink: 0; }
.contacts-form__state { grid-column: 1 / -1; font-size: 16rem; line-height: 20rem; color: #25262B; }
.contacts-form__state a { color: var(--c-accent); }

@media (max-width: 767px) {
  .contacts-form { flex-direction: column; gap: 14rem; margin-bottom: 40rem; padding: 18rem 12rem 16rem; border-radius: 20rem; scroll-margin-top: 70px; }
  .contacts-form__meta { width: auto; text-align: center; }
  .contacts-form__title { margin-bottom: 6rem; font-size: 16rem; line-height: 17rem; }
  .contacts-form__text { font-size: 10rem; line-height: 13rem; }
  .contacts-form__fields { gap: 8rem; }
  .contacts-form input[type=text], .contacts-form input[type=tel], .contacts-form textarea { height: 32rem; padding: 0 14rem; border-radius: 16rem; font-size: 12rem; line-height: 15rem; }
  .contacts-form textarea { height: 64rem; padding: 8rem 14rem; }
  .contacts-form__bottom { flex-direction: column; gap: 10rem; }
  .contacts-form__agree { padding-left: 20rem; font-size: 10rem; line-height: 12rem; }
  .contacts-form__agree input[type=checkbox] { width: 14rem; height: 14rem; }
  .contacts-form__state { font-size: 10rem; line-height: 13rem; text-align: center; }
}