/* Масштабирование страницы (browser zoom до 200%): общие правила */

html {
  overflow-x: hidden;
  max-width: var(--zoom-safe-max-width);
}

body {
  max-width: var(--zoom-safe-max-width);
  overflow-x: hidden;
}

main {
  max-width: var(--zoom-safe-max-width);
  min-width: 0;
}

img,
video,
canvas,
svg {
  max-width: var(--zoom-safe-max-width);
  height: auto;
}

.container,
.container-fluid {
  max-width: var(--zoom-safe-max-width);
  min-width: 0;
}

.billing-navbar-billing-slot,
.billing-nav-cluster {
  max-width: var(--zoom-safe-max-width);
  min-width: 0;
}

/* Модалки Bootstrap и кастомные — не шире экрана при зуме */
.modal-dialog {
  max-width: min(var(--bs-modal-width, 500px), calc(100vw - 1.5rem));
  margin-left: auto;
  margin-right: auto;
}

.modal-body {
  overflow-x: auto;
  overflow-y: auto;
  max-height: min(85vh, 85dvh);
}

.offcanvas {
  max-width: min(100vw, var(--bs-offcanvas-width, 400px));
}

.table-responsive {
  max-width: var(--zoom-safe-max-width);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Каталог и прочие страницы: контент не вылезает за экран */
.search-bar,
.model-card,
.sidebar,
.footer .container {
  max-width: var(--zoom-safe-max-width);
  min-width: 0;
}