/* P94 — Centrum informacji ma jeden mobilny punkt wejścia w nagłówku. */

@media (max-width: 820px) {
  body.mobile-ui-active.ow-p36-mobile-header > header {
    grid-template-columns:
      minmax(104px, 1fr)
      104px
      42px
      44px !important;
    grid-template-areas:
      "brand wind info account" !important;
    gap: 5px !important;
  }

  body.mobile-ui-active.ow-p36-mobile-header
  > header
  #ow-p36-command-bell {
    grid-area: info !important;
    display: inline-grid !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    place-items: center !important;
    margin: 0 !important;
    border: 1px solid #c8d9e6 !important;
    border-radius: 12px !important;
    background: #fff !important;
    color: #0969a9 !important;
  }

  body.mobile-ui-active.ow-p36-mobile-header
  #ow-p36-command-bell:hover,
  body.mobile-ui-active.ow-p36-mobile-header
  #ow-p36-command-bell[aria-expanded="true"] {
    border-color: #77bde1 !important;
    background: #eaf6fb !important;
  }

  body.mobile-ui-active.ow-p36-mobile-header
  #ow-p36-command-bell
  .ow-p36-command-count {
    top: -4px !important;
    right: -4px !important;
  }

  body.mobile-ui-active.ow-p36-mobile-header
  #ow-system-center-v1
  .ow-sys-panel {
    top: calc(var(--ow-p36-header-height, 58px) + 6px) !important;
    right: 6px !important;
    width: min(410px, calc(100vw - 12px)) !important;
    max-height: calc(100dvh - var(--ow-p36-header-height, 58px) - var(--ow-mobile-nav-height, 68px) - 20px) !important;
    border-radius: 16px !important;
  }
}

@media (max-width: 390px) {
  body.mobile-ui-active.ow-p36-mobile-header > header {
    grid-template-columns:
      minmax(86px, 1fr)
      92px
      40px
      42px !important;
    gap: 4px !important;
  }

  body.mobile-ui-active.ow-p36-mobile-header
  > header
  #ow-p36-command-bell {
    width: 40px !important;
    min-width: 40px !important;
    height: 40px !important;
  }
}