/*
 * 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-bar, mk-bar__, mk-menu, mk-menu--
 */
/* Component: mk_bar */
.mk-bar {
  position: relative;
  height: var(--mk-bar-height);
  padding: 0 var(--mk-space-11);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mk-space-7);
}

.mk-bar__desktop {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--mk-space-7);
}

.mk-menu--bar-desktop {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.mk-bar__mobile {
  --mk-bar-panel-display: none;
  display: none;
}

.mk-bar__summary {
  display: none;
}

.mk-bar__panel {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--mk-space-7);
}

.mk-bar__action {
  flex: 0 0 auto;
}

@media (max-width: 991.98px) {
  .mk-bar {
    padding: 0 var(--mk-space-6);
    gap: var(--mk-space-3);
  }

  .mk-bar__desktop {
    display: none;
  }

  .mk-bar__mobile {
    display: block;
    flex: 0 0 auto;
    order: 3;
  }

  .mk-bar__summary {
    width: var(--mk-button-icon-size-sm);
    height: var(--mk-button-icon-size-sm);
    display: grid;
    place-items: center;
    border: 1px solid var(--mk-color-line-strong);
    border-radius: var(--mk-radius-control);
    background: var(--mk-color-light);
    cursor: pointer;
    list-style: none;
  }

  .mk-bar__summary::-webkit-details-marker {
    display: none;
  }

  .mk-bar__summary::before {
    content: "";
    width: 18px;
    height: 12px;
    border-top: 2px solid var(--mk-color-text);
    border-bottom: 2px solid var(--mk-color-text);
    box-shadow: 0 5px 0 var(--mk-color-text);
  }

  .mk-bar__panel {
    position: absolute;
    left: var(--mk-space-4);
    right: var(--mk-space-4);
    top: calc(var(--mk-bar-height) - 4px);
    z-index: 20;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: var(--mk-space-4);
    padding: var(--mk-space-4);
    border: 1px solid var(--mk-color-line);
    border-radius: var(--mk-card-radius);
    background: var(--mk-color-light);
    box-shadow: var(--mk-shadow-window);
  }

  .mk-bar__mobile[open] .mk-bar__panel {
    display: flex;
  }
}