/* Общие стили модалок MAX / телефон / контакты */

.phone-modal,
.contacts-modal,
.max-modal {
  z-index: 2147483200 !important;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px max(12px, env(safe-area-inset-bottom, 0px)) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start !important;
}

.phone-modal.active,
.contacts-modal.active,
.max-modal.active {
  pointer-events: auto !important;
}

.max-modal-box,
.phone-modal-box,
.contacts-modal-box {
  margin: auto !important;
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px) !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

.max-modal-close,
.phone-modal-close,
.contacts-close {
  top: 8px !important;
  right: 8px !important;
  z-index: 5 !important;
  position: absolute !important;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.max-modal-box {
  padding-top: 44px !important;
}

@media (max-width: 768px) {
  .max-modal-box {
    max-width: 100% !important;
    width: 100% !important;
    padding: 44px 20px 24px !important;
    border-radius: 20px !important;
  }

  .max-modal-title {
    font-size: 20px !important;
  }

  .max-modal-phone {
    font-size: 18px !important;
    word-break: break-word;
  }

  .float-btns {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px)) !important;
    left: 12px !important;
    z-index: 2147482900 !important;
  }

  .float-btn {
    width: 46px !important;
    height: 46px !important;
  }
}