/*
 * OCFai CSS contract
 * AI_RULE: define only classes matching OCFAI_ALLOWED_PREFIXES in this file.
 * AI_RULE: shared UI patterns must use their canonical component CSS instead of local variants.
 * OCFAI_ROLE: component
 * OCFAI_ALLOWED_PREFIXES: mk-ocfai-map, mk-ocfai-map__
 */
/* Component: mk_ocfai_map */
.mk-ocfai-map {
  position: relative;
  min-width: 0;
  min-height: 520px;
  overflow: hidden;
  border: 0;
  border-radius: var(--mk-radius-panel);
  background:
    radial-gradient(circle at 56% 72%, rgb(var(--mk-accent-rgb) / .34), transparent 36%),
    radial-gradient(circle at 86% 22%, rgb(var(--mk-accent-rgb) / .18), transparent 34%),
    linear-gradient(135deg, var(--mk-color-dark-deep) 0%, var(--mk-color-dark) 48%, var(--mk-color-accent-dark) 100%);
  box-shadow: var(--mk-shadow-dark-window);
}

.mk-ocfai-map__canvas {
  display: block;
  width: 100%;
  height: 520px;
}

.mk-ocfai-map__caption {
  position: absolute;
  left: var(--mk-space-7);
  right: var(--mk-space-7);
  bottom: var(--mk-space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--mk-space-1);
  pointer-events: none;
}

.mk-ocfai-map__caption-item {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  padding: 0 var(--mk-space-2);
  border: 1px solid rgb(var(--mk-light-rgb) / .10);
  border-radius: var(--mk-radius-control);
  background: rgb(var(--mk-light-rgb) / .06);
  color: rgb(var(--mk-light-rgb) / .68);
  font-size: var(--mk-font-size-xs);
}

@media (max-width: 767.98px) {
  .mk-ocfai-map {
    min-height: 430px;
  }

  .mk-ocfai-map__canvas {
    height: 430px;
  }
}