body.bl-catalog-contact-modal-open{
  overflow:hidden;
}

body.bl-catalog-contact-modal-open .city-ask{
  display:none !important;
}

.bl-catalog-contact-modal{
  position:fixed;
  inset:0;
  z-index:200010;
  display:grid;
  place-items:center;
  padding:18px;
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease;
}

.bl-catalog-contact-modal.is-open{
  opacity:1;
  pointer-events:auto;
}

.bl-catalog-contact-modal__backdrop{
  position:absolute;
  inset:0;
  background:rgba(15,23,42,.56);
  backdrop-filter:blur(10px);
}

.bl-catalog-contact-modal__dialog{
  position:relative;
  z-index:1;
  width:min(780px,calc(100vw - 36px));
  max-height:calc(100vh - 36px);
  overflow:auto;
  padding:30px;
  border-radius:28px;
  background:#fff;
  color:#162233;
  box-shadow:0 38px 120px rgba(15,23,42,.34);
  transform:translateY(16px) scale(.985);
  transition:transform .18s ease;
}

.bl-catalog-contact-modal.is-open .bl-catalog-contact-modal__dialog{
  transform:translateY(0) scale(1);
}

.bl-catalog-contact-modal__close{
  position:absolute;
  top:16px;
  right:16px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:0;
  border-radius:999px;
  background:#f4f7fb;
  color:#162233;
  box-shadow:0 12px 26px rgba(15,35,58,.12);
  cursor:pointer;
  font-family:inherit;
  font-size:28px;
  line-height:1;
}

.bl-catalog-contact-modal__close:hover,
.bl-catalog-contact-modal__close:focus{
  background:#fff;
}

.bl-catalog-contact-modal__head{
  max-width:560px;
  padding-right:44px;
}

.bl-catalog-contact-modal__eyebrow{
  margin:0 0 8px;
  color:#0f6b45;
  font-size:12px;
  font-weight:850;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.bl-catalog-contact-modal__head h2{
  margin:0;
  color:#162233;
  font-size:30px;
  font-weight:780;
  line-height:1.08;
  letter-spacing:0;
}

.bl-catalog-contact-modal__head p{
  margin:10px 0 0;
  color:#5f6f84;
  font-size:15px;
  line-height:1.5;
}

.bl-catalog-contact-modal__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:22px;
}

.bl-catalog-contact-card{
  display:grid;
  grid-template-columns:48px minmax(0,1fr) 22px;
  gap:14px;
  align-items:center;
  min-height:104px;
  padding:16px;
  border:0;
  border-radius:18px;
  background:#f7fafc;
  color:#162233;
  text-decoration:none;
  box-shadow:0 16px 34px rgba(15,35,58,.08);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.bl-catalog-contact-card:hover,
.bl-catalog-contact-card:focus{
  transform:translateY(-2px);
  background:#fff;
  box-shadow:0 22px 46px rgba(15,35,58,.13);
}

.bl-catalog-contact-card__icon{
  display:inline-grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:16px;
  background:#eaf8f1;
  color:#0f6b45;
  font-size:22px;
  line-height:1;
}

.bl-catalog-contact-card--telegram .bl-catalog-contact-card__icon{
  background:#eaf6ff;
  color:#229ed9;
}

.bl-catalog-contact-card--whatsapp .bl-catalog-contact-card__icon{
  background:#e8f8ef;
  color:#16a34a;
}

.bl-catalog-contact-card--phone .bl-catalog-contact-card__icon{
  background:#eef4ff;
  color:#1d4ed8;
}

.bl-catalog-contact-card__icon img{
  display:block;
  width:24px;
  height:24px;
  object-fit:contain;
}

.bl-catalog-contact-card__body{
  display:grid;
  gap:5px;
  min-width:0;
}

.bl-catalog-contact-card__body strong{
  color:#162233;
  font-size:15px;
  font-weight:850;
  line-height:1.2;
}

.bl-catalog-contact-card__body small{
  color:#68778c;
  font-size:12px;
  font-weight:700;
  line-height:1.25;
  overflow-wrap:anywhere;
}

.bl-catalog-contact-card__arrow{
  justify-self:end;
  color:#0f6b45;
  font-size:17px;
  font-weight:900;
  line-height:1;
}

.bl-catalog-contact-card--phone{
  grid-column:1 / -1;
}

@media (max-width:680px){
  .bl-catalog-contact-modal{
    padding:12px;
  }

  .bl-catalog-contact-modal__dialog{
    width:min(100vw - 24px,100%);
    max-height:calc(100vh - 24px);
    padding:24px 16px 18px;
    border-radius:22px;
  }

  .bl-catalog-contact-modal__head{
    padding-right:42px;
  }

  .bl-catalog-contact-modal__head h2{
    font-size:24px;
  }

  .bl-catalog-contact-modal__grid{
    grid-template-columns:1fr;
  }

  .bl-catalog-contact-card--phone{
    grid-column:auto;
  }
}