@import '../../../../styles/design-tokens';

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,27,48,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
  backdrop-filter: blur(6px);
  padding: 20px;
}

.box {
  background: #fff;
  border-radius: $r-lg;
  box-shadow: $sh-modal;
  width: 480px;
  max-width: 100%;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  border-top: 3px solid $gold-500;
}

.narrow { width: 420px; text-align: center; padding: 30px; }

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 26px 0;
}

.title {
  font-family: $font-serif;
  font-size: 19px;
  font-weight: 600;
  color: $navy-900;
}

.body { padding: 18px 26px 26px; }

.narrowBody { padding: 0; }

.text {
  font-size: 13px;
  color: $gray-500;
  margin-bottom: 24px;
  line-height: 1.6;
}

// wrap обязателен, а не косметика: кнопки .btn — white-space: nowrap, сжаться по
// тексту не могут, а justify-content: flex-end выталкивает не влезающие ВЛЕВО,
// за границу .box — и они просто исчезают из виду (так пропадала кнопка «Нет,
// пропустить» в диалоге на четыре варианта, см. ManageByUserDuplicateModal).
// С переносом лишние кнопки уезжают на вторую строку и остаются доступны.
.footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 26px 22px;
}

.narrowFooter { justify-content: center; padding: 0; margin-top: 24px; }