/* Podglad certyfikatu (<dialog>), uklad jak popupy 1119/1688 na PROD: pelny ekran w kolorze granatowym, pasek
   z logo i zamknieciem (klasy .site-menu__* z menu-dialog.css), tresc 1068 px, pod nia stopka strony. */
.cert-dialog {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100vh;
  max-height: none;
  margin: 0;
  padding: 0;
  overflow: auto;
  border: 0;
  background: var(--color-primary);
  box-shadow: 2px 8px 23px 3px rgba(0, 0, 0, .2);
  color: var(--color-white);
  font-family: var(--font);
}
.cert-dialog::backdrop { background: rgba(0, 0, 0, .8); }

.cert-dialog__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(100vh - 245px);
  background: url("/assets/img/menu-bg.svg") no-repeat 84% 100%;
}
.cert-dialog__bar { align-self: stretch; }

.cert-dialog__content {
  display: flex;
  justify-content: space-between;
  width: 1068px;
  max-width: 100%;
  padding: 39px 0 140px;
}
.cert-dialog__badge { text-align: center; }
.cert-dialog__badge img { display: block; width: 250px; height: 250px; margin: 0 auto 32px; }
.cert-dialog__title {
  margin: 0;
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--color-white);
}
.cert-dialog__scan { align-self: flex-start; }

.cert-dialog > .colophon { background: var(--color-white); }

@media (max-width: 1024px) {
  .cert-dialog__main { background-position: 100% 100%; }
  .cert-dialog__content { width: 100%; gap: 40px; padding: 50px 20px; }
  .cert-dialog__badge { flex: 1 0 auto; }
}

@media (max-width: 767px) {
  .cert-dialog__content { flex-wrap: wrap; }
  .cert-dialog__badge { width: 100%; }
}