.hm-map-tabs { display: flex; gap: 8px; margin: 16px 0; }
.hm-map-tab { flex: 1; min-height: 46px; padding: 8px; color: var(--hm-color-primary-dark); background: #fff; border: 1px solid var(--hm-color-primary); border-radius: 7px; font: inherit; font-weight: 700; cursor: pointer; }
.hm-map-tab.is-active { color: #fff; background: var(--hm-color-primary-dark); }
.hm-map-layout { display: grid; min-width: 0; gap: 18px; }
.hm-map-list { display: grid; gap: 14px; }
.hm-map-canvas-wrap { display: none; min-width: 0; }
.hm-map-canvas-wrap.is-active { display: block; }
.hm-map-list.is-hidden { display: none; }
.hm-map-canvas { width: 100%; height: max(58vh, 420px); min-height: 420px; border: 1px solid var(--hm-color-border); border-radius: var(--hm-radius); z-index: 1; }
.hm-marker { display: grid; width: 32px !important; height: 32px !important; margin: -16px 0 0 -16px !important; place-items: center; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 2px 6px rgb(0 0 0 / 28%); font-size: 16px; font-weight: 800; }
.hm-marker--spacious { color: #fff; background: #08735d; }
.hm-marker--available { color: #fff; background: #176b84; }
.hm-marker--full { color: #fff; background: #565e67; }
.hm-marker--over_capacity { color: #fff; background: #a63b32; }
.hm-marker--unknown { color: #3d3100; background: #f5d769; }
.hm-popup { line-height: 1.55; }
.hm-popup strong { display: block; margin-bottom: 5px; font-size: 1rem; }

@media (min-width: 960px) {
  .hm-map-tabs { display: none; }
  .hm-map-layout { grid-template-columns: minmax(320px, 40%) minmax(0, 60%); align-items: start; }
  .hm-map-list { display: grid !important; max-height: 720px; padding-right: 5px; overflow: auto; }
  .hm-map-canvas-wrap { display: block !important; position: sticky; top: 20px; }
  .hm-map-canvas { height: 720px; }
}