/* ==========================================
   Переиспользуемая модалка (Module/Modal)
   Оболочка: подложка, диалог, кнопка закрытия.
   Содержимое модалки стилизует её модуль.
   ========================================== */

/* Пока модалка открыта, страница под ней не прокручивается. */
.ds-modal-open { overflow: hidden; }

.ds-modal {
  position: fixed;
  inset: 0;
  /* Выше выезжающей шторки сайдбара на мобиле (999) и её подложки (998):
     модалка всегда должна быть сверху. */
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ds-space-4);
}

.ds-modal[hidden] { display: none; }

.ds-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(0 0 0 / 0.72);
}

.ds-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
  padding: var(--ds-space-6);
  background: var(--ds-bg-raised);
  border: 1px solid var(--ds-border-light);
  border-radius: var(--ds-radius-lg);
  box-sizing: border-box;
}

.ds-modal--sm .ds-modal__dialog { max-width: 380px; }
.ds-modal--lg .ds-modal__dialog { max-width: 720px; }

.ds-modal__dialog:focus { outline: none; }
.ds-modal__dialog:focus-visible { outline: 2px solid var(--ds-text-link); outline-offset: 2px; }

.ds-modal__close {
  position: absolute;
  top: var(--ds-space-2);
  right: var(--ds-space-2);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ds-text-muted);
  font-size: var(--ds-font-size-lg);
  line-height: 1;
  cursor: pointer;
  transition: background var(--ds-transition), color var(--ds-transition);
}

.ds-modal__close:hover { background: var(--ds-bg-overlay); color: var(--ds-text-white); }
.ds-modal__close:focus-visible { outline: 2px solid var(--ds-text-link); outline-offset: 2px; }

.ds-modal__body { min-width: 0; }

@media (max-width: 480px) {
  .ds-modal { padding: var(--ds-space-2); }

  .ds-modal__dialog {
    max-height: calc(100vh - 16px);
    padding: var(--ds-space-5) var(--ds-space-4);
  }
}