/* Keep consent controls in the viewport, including short landscape screens.
   The content scrolls independently; this must not affect the E-Beleg modal. */
#cnModal {
  box-sizing: border-box;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

#cnModal .cn-modal-content {
  position: relative;
  bottom: auto;
  box-sizing: border-box;
  flex-direction: column;
  width: min(845px, 100%);
  min-width: 0;
  max-height: 100%;
  margin: auto;
  animation: none;
}

#cnModal #desktopCN { display: flex; }
#cnModal #mobileCN { display: none; }

#cnModal .cn-modal-header,
#cnModal .cn-modal-footer {
  flex-shrink: 0;
}

#cnModal .cn-modal-header {
  gap: 8px;
}

#cnModal h4 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#cnModal .cn-close {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
}

#cnModal .cn-modal-body {
  min-height: 0;
  min-width: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
}

#cnModal .accordion-header span,
#cnModal .cookie-accordion .container .column {
  min-width: 0;
}

/* SimpleAccordion writes a pixel max-height on open. Cookie details must
   continue to fit after rotating the device or changing text size. */
#cnModal .accordion-body[aria-hidden="false"] {
  max-height: none !important;
}

#cnModal .cookie-accordion .container {
  width: 100%;
  box-sizing: border-box;
}

@media (max-width: 870px) {
  #cnModal #desktopCN { display: none; }
  #cnModal #mobileCN { display: flex; }

  #cnModal .cn-modal-content {
    width: 100%;
    margin: auto auto 0;
  }
}

@media (max-width: 700px) {
  #cnModal .cn-modal-header {
    margin-bottom: 16px;
    padding-inline: 20px;
  }

  #cnModal h4 { margin-block: 16px; }
  #cnModal .cn-modal-body { padding-inline: 20px; }

  #cnModal .cn-modal-footer {
    gap: 8px;
    margin-top: 16px;
    padding: 16px 20px;
  }

  #cnModal .cn-modal-footer .cn-button {
    margin: 0;
    min-height: 44px;
  }

  #cnModal .cookie-accordion .cookie-description { margin-inline: 0; }
  #cnModal .cookie-accordion .container { gap: 16px; }
}