/* =========================================================
   OptiWake — mobilne panele mapy v1
   ========================================================= */

@media (max-width: 820px) {
  :root {
    --ow-mobile-header-height: 72px;
    --ow-map-panel-top:
      calc(var(--ow-mobile-header-height) + 8px);
  }

  /*
   * Pływający przycisk trackerów.
   * Widoczny wyłącznie przy zamkniętym panelu.
   */

  body.mobile-ui-active
  .ow-map-tracker-control {
    position: fixed !important;
    top: var(--ow-map-panel-top) !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 850 !important;

    min-height: 46px !important;
    margin: 0 !important;
  }

  /*
   * Otwarte panele wiatru i trackerów.
   */

  body.mobile-ui-active
  .tracker-legend,

  body.mobile-ui-active
  .mobile-trackers-panel,

  body.mobile-ui-active
  .mobile-tracker-panel,

  body.mobile-ui-active
  .wind-control.mobile-wind-panel {
    position: fixed !important;

    top: var(--ow-map-panel-top) !important;
    right: 10px !important;
    bottom: auto !important;
    left: auto !important;

    z-index: 1800 !important;

    width: min(
      390px,
      calc(100vw - 20px)
    ) !important;

    max-width:
      calc(100vw - 20px) !important;

    max-height:
      calc(
        100dvh -
        var(--ow-mobile-header-height) -
        105px
      ) !important;

    margin: 0 !important;
    padding-top: 48px !important;

    overflow-y: auto !important;

    border:
      1px solid #c7d5df !important;

    border-radius: 15px !important;

    background:
      rgba(255, 255, 255, 0.98) !important;

    box-shadow:
      0 14px 34px
      rgba(11, 29, 58, 0.2) !important;

    box-sizing: border-box !important;
  }

  /*
   * Panel trackerów nie może być zasłaniany
   * przez pływający przycisk.
   */

  body.mobile-ui-active.ow-trackers-panel-open
  .ow-map-tracker-control,

  body.mobile-ui-active.ow-wind-panel-open
  .ow-map-tracker-control {
    display: none !important;
  }

  /*
   * Przycisk zamknięcia panelu.
   */

  .ow-map-panel-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;

    z-index: 5 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    width: 34px !important;
    height: 34px !important;

    padding: 0 !important;

    border:
      1px solid #c7d5df !important;

    border-radius: 50% !important;

    background: #f2f7fa !important;
    color: #0b1d3a !important;

    box-shadow:
      0 2px 6px
      rgba(11, 29, 58, 0.1) !important;

    cursor: pointer !important;
  }

  .ow-map-panel-close svg {
    width: 17px !important;
    height: 17px !important;

    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2.2 !important;
    stroke-linecap: round !important;
  }

  .ow-map-panel-close:active {
    transform: scale(0.94);
  }

  /*
   * Panel wiatru bliżej górnej krawędzi.
   */

  body.mobile-ui-active
  .wind-control.mobile-wind-panel {
    top: var(--ow-map-panel-top) !important;
  }

  /*
   * Warstwa mapy i jej zwykłych kontrolek.
   */

  body.mobile-ui-active #map,
  body.mobile-ui-active
  .leaflet-container {
    z-index: 0 !important;
  }

  body.mobile-ui-active
  .leaflet-control-container,

  body.mobile-ui-active
  .leaflet-top,

  body.mobile-ui-active
  .leaflet-bottom {
    z-index: 600 !important;
  }

  /*
   * Panel konta użytkownika pozostaje wyżej.
   */

  body.mobile-ui-active
  .ow-account-backdrop {
    z-index: 30000 !important;
  }

  body.mobile-ui-active
  .ow-account-menu {
    z-index: 30010 !important;
  }

  body.mobile-ui-active.ow-account-open
  .tracker-legend,

  body.mobile-ui-active.ow-account-open
  .mobile-trackers-panel,

  body.mobile-ui-active.ow-account-open
  .mobile-tracker-panel,

  body.mobile-ui-active.ow-account-open
  .wind-control.mobile-wind-panel,

  body.mobile-ui-active.ow-account-open
  .ow-map-tracker-control {
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

@media (max-width: 400px) {
  :root {
    --ow-mobile-header-height: 68px;
  }

  body.mobile-ui-active
  .tracker-legend,

  body.mobile-ui-active
  .mobile-trackers-panel,

  body.mobile-ui-active
  .mobile-tracker-panel,

  body.mobile-ui-active
  .wind-control.mobile-wind-panel {
    right: 6px !important;

    width:
      calc(100vw - 12px) !important;

    max-width:
      calc(100vw - 12px) !important;
  }

  body.mobile-ui-active
  .ow-map-tracker-control {
    right: 6px !important;
  }
}