/* /map?catalog_embed=1 — Layers button + panel top-right; no side tools. */

html.ask-catalog-embed,
html.ask-catalog-embed body {
  overflow: hidden;
}

/* No search/mode-seg above Layers in catalog iframe — beat slim chrome vars on body. */
html.ask-catalog-embed,
html.ask-catalog-embed body,
html.ask-catalog-embed body.ask-public-slim-map {
  --ask-map-right-rail-tools-top: calc(
    var(--ask-map-top-chrome-top, 12px) + env(safe-area-inset-top, 0px)
  );
  --ask-map-flyout-top: var(--ask-map-right-rail-tools-top);
}

html.ask-catalog-embed #askMapModeRail,
html.ask-catalog-embed body.ask-public-slim-map #askMapModeRail,
html.ask-catalog-embed body.ask-public-slim-map .ask-map-mode-rail {
  position: fixed !important;
  top: var(--ask-map-right-rail-tools-top) !important;
  bottom: auto !important;
  right: calc(var(--ask-map-right-rail-inset, 12px) + env(safe-area-inset-right, 0px)) !important;
  left: auto !important;
  z-index: 9200 !important;
}

/* Flyout top matches Layers button (not the slim search-offset row). */
html.ask-catalog-embed body.ask-public-slim-map .ask-map-layers-switcher.is-open .ask-map-layers-menu,
html.ask-catalog-embed body.ask-public-slim-map .ask-map-layers-switcher .ask-map-layers-menu {
  top: var(--ask-map-flyout-top) !important;
}

html.ask-catalog-embed #ask-map-ticker,
html.ask-catalog-embed #askMapTickerToggle,
html.ask-catalog-embed #ask-map-catalogs,
html.ask-catalog-embed #askbase-mode-seg,
html.ask-catalog-embed #askMapAgent,
html.ask-catalog-embed #askMapAgentPanel,
html.ask-catalog-embed #askMapAgentToggle,
html.ask-catalog-embed #askbaseTopSearch,
html.ask-catalog-embed #top-search-btn,
html.ask-catalog-embed #top-search-flyout,
html.ask-catalog-embed #askbase-userpoints-btn,
html.ask-catalog-embed #panel-open-btn,
html.ask-catalog-embed #askbase-panel,
html.ask-catalog-embed #ask-field-object-wrap,
html.ask-catalog-embed #ask-field-object-btn,
html.ask-catalog-embed #askbase-radar-btn,
html.ask-catalog-embed #askbase-expansion-btn,
html.ask-catalog-embed #askbase-clusters-btn,
html.ask-catalog-embed #askbase-urban-btn,
html.ask-catalog-embed #askbase-zoom-control:not(.askbase-zoom-control--layers),
html.ask-catalog-embed #ask-cabinet-root,
html.ask-catalog-embed #ask-profile-root,
html.ask-catalog-embed #expansion-panel-view,
html.ask-catalog-embed #urban-panel-view,
html.ask-catalog-embed #radar-panel-view,
html.ask-catalog-embed #clusters-panel-view,
html.ask-catalog-embed .ask-map-ticker,
html.ask-catalog-embed .ask-map-ticker-toggle,
html.ask-catalog-embed .ask-map-catalogs,
html.ask-catalog-embed .askbase-geo-stack-wrap,
html.ask-catalog-embed .askbase-radar-clusters-block,
html.ask-catalog-embed .leaflet-control-container .askbase-radar-clusters-block {
  display: none !important;
}

html.ask-catalog-embed #askMapModeMenu .ask-map-layers-menu__section:has(#askbase-locate-modes),
html.ask-catalog-embed #askMapModeMenu .ask-map-layers-menu__section:has(#askMapLayersRetail) {
  display: none !important;
}

/* Overlays in catalog: Громади / Заповідники / Берегові смуги; hide Roads / Metro / … */
html.ask-catalog-embed #askMapLayersList .askbase-pill:not([data-layer="otg_boundaries"]):not([data-layer="pzf_boundaries"]):not([data-layer="pzs_boundaries"]) {
  display: none !important;
}

html.ask-catalog-embed #askMapLayersList {
  grid-template-columns: 1fr 1fr !important;
  gap: 6px !important;
}

html.ask-catalog-embed #askMapModeMenu .ask-map-layers-menu__section:has(#askMapLayersList) > .ask-map-layers-menu__label {
  font-size: 0;
}

html.ask-catalog-embed #askMapModeMenu .ask-map-layers-menu__section:has(#askMapLayersList) > .ask-map-layers-menu__label::after {
  content: "Межі";
  font-size: 12px;
}

html.ask-catalog-embed .ask-map-layers-switcher.is-open .ask-map-layers-menu .ask-map-mode-option[data-map-mode="google"],
html.ask-catalog-embed .ask-map-layers-switcher .ask-map-layers-menu .ask-map-mode-option[data-map-mode="google"],
html.ask-catalog-embed .ask-map-layers-switcher.is-open .ask-map-layers-menu .ask-map-mode-option[data-map-mode="gearth"],
html.ask-catalog-embed .ask-map-layers-switcher .ask-map-layers-menu .ask-map-mode-option[data-map-mode="gearth"] {
  display: none !important;
}

html.ask-catalog-embed .ask-map-layers-switcher .ask-map-layers-menu__view {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

html.ask-catalog-embed .ask-map-layers-switcher .ask-map-layers-menu__view .ask-map-mode-option {
  grid-column: auto / span 1 !important;
}

/* Closed until the user opens Layers — ignore HTML is-open / [hidden] on first paint. */
html.ask-catalog-embed #askMapModeMenu,
html.ask-catalog-embed .ask-map-layers-switcher .ask-map-layers-menu[hidden],
html.ask-catalog-embed .ask-map-layers-switcher.is-open .ask-map-layers-menu[hidden] {
  display: none !important;
}
html.ask-catalog-embed.ask-catalog-layers-open #askMapModeMenu,
html.ask-catalog-embed.ask-catalog-layers-open .ask-map-layers-switcher.is-open .ask-map-layers-menu:not([hidden]),
html.ask-catalog-embed.ask-catalog-layers-open .ask-map-layers-switcher .ask-map-layers-menu:not([hidden]) {
  display: flex !important;
  /* Compact card; zoom rail still gets a usable slider height. */
  min-height: 0 !important;
  height: auto !important;
  max-height: calc(100dvh - 28px) !important;
  width: min(300px, calc(100vw - 56px)) !important;
  min-width: 260px !important;
  max-width: min(300px, calc(100vw - 56px)) !important;
}

html.ask-catalog-embed.ask-catalog-layers-open #askMapModeMenu .ask-map-layers-menu__main {
  flex: 0 1 auto;
  min-height: 0;
}

html.ask-catalog-embed.ask-catalog-layers-open #askMapModeMenu .ask-map-layers-menu__zoom {
  top: 8px;
  bottom: 8px;
}

html.ask-catalog-embed.ask-catalog-layers-open
  #askbase-zoom-control.askbase-zoom-control--layers
  .askbase-zoom-slider-wrap {
  min-height: 96px !important;
}

html.ask-catalog-embed .ask-otg-popup__open {
  display: inline-block;
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #3f5e96;
}