/* КНОПКИ КЕРУВАННЯ КАРТОЮ */

.map-ctrl-group {

  position: fixed; top: 16px; right: 16px; display: flex; gap: 10px; z-index: 1200; align-items: center;

}



.basemap-group {

  order: 1; display: flex; align-items: center; background: #fff; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.3); height: 36px; position: relative;

}

.basemap-options {

  display: flex; align-items: center; height: 100%;

}

#basemap-toggle-btn { display: none; }



#basemap-select {

  height: 100%; padding: 0 12px; border: none; background: transparent; font-family: 'Montserrat', sans-serif;

  font-size: 13px; outline: none; cursor: pointer; border-right: 1px solid #eee;

  border-top-left-radius: 6px; border-bottom-left-radius: 6px;

}



#opacity-btn {

  width: 36px; height: 100%; background: transparent; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;

  color: #444; border-top-right-radius: 6px; border-bottom-right-radius: 6px; padding: 0; transition: background 0.2s, color 0.2s;

}

#opacity-btn:hover { background: #f0f0f0; color: #000; }

#opacity-btn svg { width: 20px; height: 20px; fill: currentColor; }

.map-btn[hidden],
.map-nav-btn[hidden],
.basemap-group[hidden],
.opacity-ctrl[hidden] { display: none !important; }



.map-btn {

  width: 36px; height: 36px; background: #fff; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.3);

  cursor: pointer; display: flex; align-items: center; justify-content: center; border: none; padding: 0;

  color: #444; transition: background 0.2s, color 0.2s; position: relative;

}

.map-btn:hover { background: #f0f0f0; }

.map-btn.active { background: #ffcc00; color: #000; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1); }

.map-btn svg { width: 20px; height: 20px; fill: currentColor; }

#curtain-toggle-btn { order: 2; }

#home-btn { order: 3; }

.draw-menu-container { order: 7; }

.view-mode-switch {
  order: 5;
  display: flex;
  align-items: center;
  height: 36px;
}

.view-mode-desktop {
  display: none;
  height: 100%;
  overflow: hidden;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

.view-mode-btn {
  min-width: 48px;
  height: 100%;
  border: 0;
  border-right: 1px solid #eee;
  background: #fff;
  color: #444;
  cursor: pointer;
  font: 700 12px/1 'Montserrat', sans-serif;
  padding: 0 10px;
}

.view-mode-btn:last-child { border-right: 0; }
.view-mode-btn:hover { background: #f0f0f0; color: #000; }
.view-mode-btn.active { background: #ffcc00; color: #000; }

.view-mode-mobile {
  display: flex;
  font: 700 12px/1 'Montserrat', sans-serif;
}

.filter-toggle-btn { order: 6; }

.app-logo {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 1190;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.app-logo img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  display: block;
}

.app-menu-btn {
  order: 8;
  width: auto;
  min-width: 82px;
  gap: 7px;
  padding: 0 10px;
  font: 700 13px/1 'Montserrat', sans-serif;
}

.app-menu-label { white-space: nowrap; }

.filter-panel {
  position: fixed;
  top: 62px;
  right: 16px;
  z-index: 1600;
  width: 320px;
  min-height: 96px;
  max-width: calc(100vw - 32px);
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,.24);
  overflow: hidden;
}

.filter-panel[hidden] { display: none !important; }

.filter-panel-header,
.app-side-menu-header {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 12px;
  background: #fffbe6;
  border-bottom: 1px solid #f0df95;
  font: 700 14px/1 'Montserrat', sans-serif;
}

.filter-panel-close,
.app-side-menu-close {
  width: 30px;
  height: 30px;
  border: 1px solid #ffcc00;
  border-radius: 4px;
  background: #fff;
  color: #d4a000;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font: 700 16px/1 'Montserrat', sans-serif;
}

.filter-panel-close:hover,
.app-side-menu-close:hover {
  color: #ff4d4f;
  border-color: #ff4d4f;
  background: #fff0f0;
}

.filter-panel-content,
.app-side-menu-content {
  min-height: 56px;
  padding: 12px;
}

.app-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1790;
  background: rgba(0,0,0,.28);
}

.app-menu-backdrop[hidden] { display: none !important; }

.app-side-menu {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 1800;
  width: min(360px, calc(100vw - 40px));
  background: #fff;
  box-shadow: -8px 0 24px rgba(0,0,0,.24);
  transform: translateX(100%);
  transition: transform .24s ease;
  display: flex;
  flex-direction: column;
}

.app-side-menu.open { transform: translateX(0); }

.cadastral-input-panel {
  position: fixed;
  top: 16px;
  left: 68px;
  z-index: 1190;
  display: flex;
  align-items: center;
  width: 260px;
  max-width: calc(100vw - 84px);
  padding: 0;
  background: transparent;
  box-sizing: border-box;
}

.cadastral-input-panel input {
  width: 100%;
  height: 36px;
  border: 0;
  border-radius: 6px;
  padding: 0 12px;
  box-sizing: border-box;
  font: 600 13px/1 'Montserrat', sans-serif;
  color: #222;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  outline: none;
}

.cadastral-input-panel input:focus {
  box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 0 0 2px rgba(255,204,0,0.35);
}

.cadastral-input-panel input[aria-invalid="true"] {
  box-shadow: 0 2px 6px rgba(0,0,0,.3), 0 0 0 2px rgba(217,48,37,0.3);
}

.map-nav-controls {
  position: fixed;
  left: 16px;
  bottom: 184px;
  z-index: 1180;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #fff;
  padding: 4px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

.map-nav-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #eee;
  border-radius: 4px;
  background: #fff;
  color: #444;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 20px/1 'Montserrat', sans-serif;
  padding: 0;
  position: relative;
  transition: background 0.2s, color 0.2s, opacity 0.2s;
  touch-action: none;
}

.map-nav-btn:hover { background: #f0f0f0; color: #000; }
.map-nav-btn:disabled { opacity: 0.65; cursor: progress; }
.map-nav-btn svg { width: 20px; height: 20px; fill: currentColor; }
.map-north-btn { color: #444; background: #fff; }
.map-north-btn svg { transform-origin: 50% 50%; transition: transform 0.12s linear; }
body.left-layer-panel-hidden .map-nav-controls { bottom: 16px; }



.opacity-ctrl { position: relative; height: 100%; }

.opacity-dropdown {

  position: absolute; top: 100%; right: 0; background: #fff; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.3);

  display: none; padding: 10px 5px; min-width: 30px; justify-content: center; margin-top: 8px;

}

.opacity-dropdown::before { content: ''; position: absolute; top: -15px; left: 0; width: 100%; height: 20px; background: transparent; }

.opacity-ctrl:hover .opacity-dropdown { display: flex; }

.opacity-ctrl.open .opacity-dropdown { display: flex; }



/* МЕНЮ МАЛЮВАННЯ */

.draw-menu-container { display: flex; align-items: center; position: relative; }



#draw-toolbar {

  position: absolute; top: calc(100% + 8px); right: 0;

  display: none; flex-direction: column; gap: 6px; background: #fff; padding: 6px 4px;

  border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.3); margin-right: 0;

}

#draw-toolbar.visible { display: flex; }

.toolbar-separator { width: 100%; height: 1px; background: #eee; margin: 2px 0; }



.tool-btn {

  width: 32px; height: 32px; background: #fff; border: 1px solid #eee; border-radius: 4px; cursor: pointer;

  display: flex; align-items: center; justify-content: center; color: #555; position: relative;

}

.tool-btn:hover { background: #fdfdfd; border-color: #ffcc00; color: #000; }

.tool-btn.active { background: #fffbe6; border-color: #ffcc00; color: #d4a000; }

.tool-btn.clear-btn:hover { background: #fff0f0; border-color: #ff4d4f; color: #ff4d4f; }

.tool-btn svg { width: 18px; height: 18px; fill: currentColor; }



/* Tooltip styles */

.tool-btn::after,.map-btn::after,.panel-btn::after,.map-nav-btn::after {

  content: attr(data-tooltip); position: absolute; top: 100%; left: 50%; transform: translateX(calc(-50% + var(--tooltip-shift-x, 0px)));

  margin-top: 7px; background: rgba(0,0,0,0.85); color: #fff; padding: 4px 8px; border-radius: 4px;

  font-size: 11px; white-space: normal; width: max-content; max-width: calc(100vw - 16px); text-align: center; line-height: 1.25; pointer-events: none; opacity: 0; transition: opacity 0.2s;

  z-index: 1500; font-weight: 600;

}

.tool-btn:hover::after,.map-btn:hover::after,.panel-btn:hover::after,.map-nav-btn:hover::after { opacity: 1; }

.tool-btn::before,.map-btn::before,.panel-btn::before,.map-nav-btn::before {

  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px;

  border-width: 0 5px 6px 5px; border-style: solid; border-color: transparent transparent rgba(0,0,0,0.85) transparent;

  opacity: 0; transition: opacity 0.2s; pointer-events: none;

}

.tool-btn:hover::before,.map-btn:hover::before,.panel-btn:hover::before,.map-nav-btn:hover::before { opacity: 1; }

#draw-toolbar .tool-btn::after {

  top: 50%; left: auto; right: 100%; transform: translateY(-50%);

  margin-top: 0; margin-right: 6px;

}

#draw-toolbar .tool-btn::before {

  top: 50%; left: auto; right: 100%; transform: translateY(-50%);

  margin-top: 0; margin-right: 0;

  border-width: 5px 0 5px 6px; border-color: transparent transparent transparent rgba(0,0,0,0.85);

}

.panel .panel-btn::after {

  top: auto; bottom: 100%; margin-top: 0; margin-bottom: 5px;

}

.panel .panel-btn::before {

  top: auto; bottom: 100%; margin-top: 0; margin-bottom: 0;

  border-width: 6px 5px 0 5px; border-color: rgba(0,0,0,0.85) transparent transparent transparent;

}

.map-nav-controls .map-nav-btn::after {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-top: 0;
  margin-left: 8px;
}

.map-nav-controls .map-nav-btn::before {
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  margin-top: 0;
  margin-left: 2px;
  border-width: 5px 6px 5px 0;
  border-color: transparent rgba(0,0,0,0.85) transparent transparent;
}


input[type=range].vertical-range { writing-mode: bt-lr; -webkit-appearance: slider-vertical; appearance: slider-vertical; width: 20px; height: 100px; cursor: pointer; }

@media (orientation: landscape) and (hover: hover) and (pointer: fine) {
  .view-mode-desktop { display: flex; }
  .view-mode-mobile { display: none; }
}

@media (max-width: 700px), (hover: none) and (pointer: coarse) {

  .map-ctrl-group { top: 12px; right: 12px; gap: 8px; align-items: flex-start; flex-wrap: wrap; justify-content: flex-end; max-width: calc(100vw - 24px); }

  .basemap-group { height: 40px; background: transparent; box-shadow: none; }

  .map-btn { width: 40px; height: 40px; }

  .map-btn svg { width: 22px; height: 22px; }

  .view-mode-switch,
  .app-logo {
    height: 40px;
  }

  .view-mode-mobile {
    width: 44px;
    height: 40px;
  }

  .app-logo {
    width: 40px;
  }

  .app-logo img {
    width: 40px;
    height: 40px;
  }

  .app-menu-btn {
    min-width: 86px;
    height: 40px;
  }

  .filter-panel {
    top: 60px;
    right: 12px;
    width: min(320px, calc(100vw - 24px));
  }

  #basemap-toggle-btn { display: flex; }

  .basemap-options {

    display: none; position: absolute; top: calc(100% + 8px); right: 0;

    width: min(280px, calc(100vw - 120px)); min-width: 0; max-width: calc(100vw - 24px); height: auto; padding: 6px;

    background: #fff; border-radius: 6px; box-shadow: 0 2px 6px rgba(0,0,0,.3);

    flex-direction: row; align-items: center; gap: 6px;

  }

  .basemap-group.open .basemap-options { display: flex; }

  #basemap-select { flex: 1; min-width: 0; width: auto; height: 36px; padding: 0 8px; border: 1px solid #eee; border-radius: 4px; }

  .opacity-ctrl { flex: 0 0 auto; height: auto; display: flex; justify-content: flex-end; }

  #opacity-btn { width: 36px; height: 36px; border: 1px solid #eee; border-radius: 4px; }

  .opacity-dropdown { z-index: 2; }

  .tool-btn.tooltip-hidden::after,
  .map-btn.tooltip-hidden::after,
  .panel-btn.tooltip-hidden::after,
  .map-nav-btn.tooltip-hidden::after,
  .tool-btn.tooltip-hidden::before,
  .map-btn.tooltip-hidden::before,
  .panel-btn.tooltip-hidden::before,
  .map-nav-btn.tooltip-hidden::before { opacity: 0 !important; }

  .panel { bottom: 12px; width: 38px; max-height: 38px; }

  .map-nav-controls {
    left: 12px;
    bottom: 58px;
    gap: 4px;
  }

  .map-nav-btn {
    width: 34px;
    height: 34px;
  }

  body.left-layer-panel-hidden .map-nav-controls { bottom: 12px; }

  .panel.left { left: 12px; }

  .panel.right { right: 12px; }

  .panel.expanded { width: 300px; max-width: calc(100vw - 24px); max-height: calc(100vh - 96px); }

  .panel.left.expanded { left: 12px; right: auto; }

  .panel.right.expanded { left: auto; right: 12px; }

  .panel-header { height: 36px; min-height: 36px; padding: 0 6px; cursor: pointer; }

  .panel.expanded .panel-header { height: 40px; min-height: 40px; padding: 0 8px; }

  .panel.expanded .overlay-list { overflow-y: auto; -webkit-overflow-scrolling: touch; }

  .overlay-header { min-height: 34px; }

  .grip { font-size: 18px; min-width: 18px; }

  #edit-panel {
    top: auto !important;
    bottom: 68px;
  }

  #curtain {
    width: 30px;
    background: transparent !important;
    margin-left: -13px;
  }

  #curtain::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    background: #ffcc00;
  }

}

@media (max-width: 700px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .map-ctrl-group {
    right: 60px;
    max-width: calc(100vw - 72px);
  }

  .map-ctrl-group:not(:has(.app-menu-btn)):not(:has(.filter-toggle-btn)):not(:has(.draw-menu-container)) {
    right: 12px;
    max-width: calc(100vw - 24px);
  }

  .app-menu-btn {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1220;
    width: 40px;
    min-width: 40px;
    padding: 0;
    gap: 0;
  }

  .app-menu-label { display: none; }

  .filter-toggle-btn {
    position: fixed;
    top: 60px;
    right: 12px;
    z-index: 1220;
    order: auto;
  }

  .draw-menu-container {
    position: fixed;
    top: 108px;
    right: 12px;
    z-index: 1220;
    order: auto;
  }

  .filter-panel {
    top: 108px;
  }

  .map-ctrl-group:not(:has(.app-menu-btn)) .filter-toggle-btn {
    top: 12px;
  }

  .map-ctrl-group:not(:has(.app-menu-btn)) .draw-menu-container,
  .map-ctrl-group:not(:has(.filter-toggle-btn)) .draw-menu-container {
    top: 60px;
  }

  .map-ctrl-group:not(:has(.app-menu-btn)):not(:has(.filter-toggle-btn)) .draw-menu-container {
    top: 12px;
  }
}

@media (max-width: 700px) and (orientation: portrait), (max-height: 820px) and (orientation: portrait) {
  body.touch-device .cadastral-input-panel {
    top: auto;
    left: 50%;
    right: auto;
    bottom: 58px;
    width: 224px;
    max-width: calc(100vw - 24px);
    padding: 0;
    transform: translateX(-50%);
  }

  body.touch-device .cadastral-input-panel input {
    height: 40px;
    font-size: 14px;
  }

  body.touch-device.cadastral-input-enabled .map-nav-controls,
  body.touch-device.cadastral-input-enabled.left-layer-panel-hidden .map-nav-controls {
    bottom: 116px;
  }
}

@media (max-width: 700px) and (min-width: 340px) and (orientation: portrait), (max-height: 820px) and (min-width: 340px) and (orientation: portrait) {
  body.touch-device .cadastral-input-panel {
    left: 50%;
    right: auto;
    bottom: 12px;
    width: 224px;
    max-width: calc(100vw - 116px);
    transform: translateX(-50%);
  }

  body.touch-device.left-layer-panel-hidden .cadastral-input-panel {
    max-width: calc(100vw - 70px);
  }

  body.touch-device.right-layer-panel-hidden .cadastral-input-panel {
    max-width: calc(100vw - 70px);
  }

  body.touch-device.left-layer-panel-hidden.right-layer-panel-hidden .cadastral-input-panel {
    max-width: calc(100vw - 24px);
  }

  body.touch-device .cadastral-input-panel input {
    height: 40px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
  }

  body.touch-device.cadastral-input-enabled .map-nav-controls,
  body.touch-device.cadastral-input-enabled.left-layer-panel-hidden .map-nav-controls {
    bottom: 68px;
  }
}

body.touch-device.compact-layer-panels.curtain-mode-disabled .cadastral-input-panel {
  top: auto;
  left: 12px;
  right: auto;
  bottom: 12px;
  width: 224px;
  max-width: calc(100vw - 62px);
  transform: none;
}

body.touch-device.compact-layer-panels .cadastral-input-panel {
  top: auto;
  height: auto;
}

body.touch-device.compact-layer-panels .cadastral-input-panel input {
  height: 42px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

body.touch-device.compact-layer-panels.curtain-mode-disabled .cadastral-input-panel input {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

body.touch-device.compact-layer-panels.curtain-mode-disabled.cadastral-input-enabled .map-nav-controls,
body.touch-device.compact-layer-panels.curtain-mode-disabled.cadastral-input-enabled.left-layer-panel-hidden .map-nav-controls {
  left: 12px;
  right: auto;
  bottom: 62px;
}

@media (orientation: portrait) {
  body.touch-device.compact-layer-panels.curtain-mode-active .cadastral-input-panel {
    top: auto;
    left: 62px;
    right: 62px;
    bottom: 12px;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: none;
    transform: none;
  }

  body.touch-device.compact-layer-panels.curtain-mode-active.left-layer-panel-hidden .cadastral-input-panel {
    left: 12px;
  }

  body.touch-device.compact-layer-panels.curtain-mode-active.right-layer-panel-hidden .cadastral-input-panel {
    right: 12px;
  }

  body.touch-device.compact-layer-panels.curtain-mode-active.left-layer-panel-hidden.right-layer-panel-hidden .cadastral-input-panel {
    left: 12px;
    right: 12px;
  }

  body.touch-device.compact-layer-panels.curtain-mode-active.cadastral-input-enabled .map-nav-controls,
  body.touch-device.compact-layer-panels.curtain-mode-active.cadastral-input-enabled.left-layer-panel-hidden .map-nav-controls {
    left: auto;
    right: 12px;
    bottom: clamp(74px, 18vh, 102px);
  }

  body.touch-device.compact-layer-panels.curtain-mode-active:has(#draw-toolbar.visible) .map-nav-controls {
    bottom: clamp(62px, 14vh, 96px);
  }

  body.touch-device.compact-layer-panels.curtain-mode-disabled .cadastral-input-panel {
    left: 12px;
    right: auto;
    bottom: 12px;
    max-width: calc(100vw - 62px);
    transform: none;
  }

  body.touch-device.compact-layer-panels.curtain-mode-disabled.cadastral-input-enabled .map-nav-controls,
  body.touch-device.compact-layer-panels.curtain-mode-disabled.cadastral-input-enabled.left-layer-panel-hidden .map-nav-controls {
    left: auto;
    right: 12px;
    bottom: clamp(74px, 18vh, 102px);
  }

  body.touch-device.compact-layer-panels.curtain-mode-disabled:has(#draw-toolbar.visible) .map-nav-controls {
    bottom: clamp(62px, 14vh, 96px);
  }
}

@media (max-width: 700px) and (orientation: portrait), (max-height: 820px) and (orientation: portrait) {
  body.touch-device.curtain-mode-active .cadastral-input-panel {
    top: auto;
    left: 62px;
    right: 62px;
    bottom: 12px;
    width: auto;
    height: auto;
    min-width: 0;
    max-width: none;
    transform: none;
  }

  body.touch-device.curtain-mode-active.left-layer-panel-hidden .cadastral-input-panel {
    left: 12px;
    max-width: none;
  }

  body.touch-device.curtain-mode-active.right-layer-panel-hidden .cadastral-input-panel {
    right: 12px;
    max-width: none;
  }

  body.touch-device.curtain-mode-active.left-layer-panel-hidden.right-layer-panel-hidden .cadastral-input-panel {
    left: 12px;
    right: 12px;
    max-width: none;
  }

  body.touch-device.curtain-mode-active.cadastral-input-enabled .map-nav-controls,
  body.touch-device.curtain-mode-active.cadastral-input-enabled.left-layer-panel-hidden .map-nav-controls {
    left: auto;
    right: 12px;
    bottom: clamp(74px, 18vh, 102px);
  }

  body.touch-device.curtain-mode-active:has(#draw-toolbar.visible) .map-nav-controls {
    bottom: clamp(62px, 14vh, 96px);
  }
}

@media (max-width: 320px) and (orientation: portrait) {
  body.touch-device.compact-layer-panels.curtain-mode-disabled .cadastral-input-panel {
    width: calc(100vw - 74px);
    max-width: calc(100vw - 74px);
  }
}

@media (orientation: landscape) {
  body.touch-device.compact-layer-panels.curtain-mode-active .cadastral-input-panel,
  body.touch-device.compact-layer-panels.curtain-mode-disabled .cadastral-input-panel {
    top: auto;
    left: auto;
    right: 62px;
    bottom: 12px;
    width: 224px;
    height: auto;
    min-width: 0;
    max-width: calc(100vw - 124px);
    transform: none;
  }

  body.touch-device.compact-layer-panels.curtain-mode-disabled.cadastral-input-enabled .map-nav-controls,
  body.touch-device.compact-layer-panels.curtain-mode-disabled.cadastral-input-enabled.left-layer-panel-hidden .map-nav-controls {
    left: 12px;
    right: auto;
    bottom: 12px;
  }
}

@media (max-width: 700px) and (orientation: portrait) and (min-width: 450px) {
  #edit-panel {
    top: auto !important;
    bottom: 12px;
  }
}

@media (max-width: 700px) and (orientation: portrait), (hover: none) and (pointer: coarse) and (orientation: portrait) {
  body.cadastral-input-enabled #edit-panel {
    bottom: 112px !important;
  }
}

@media (max-width: 700px), (max-height: 560px) {
  #map-zoom-in,
  #map-zoom-out {
    display: none;
  }
}

@media (max-height: 560px) {
  #draw-toolbar.visible {
    display: grid !important;
    grid-template-columns: repeat(4, 32px);
    gap: 6px;
    padding: 6px;
  }
  #draw-toolbar.visible .toolbar-separator {
    display: none !important;
  }
}