/* MediaDIV App Navigation · scoped shared frontend / Divi 5 preview styles. */
.mdav-nav,
.mdav-nav * {
  box-sizing: border-box;
}

.mdav-portal {
  display: contents !important;
}

.mdav-portal[hidden],
.mdav-nav[hidden] {
  display: none !important;
}

.mdav-nav {
  position: fixed;
  inset: auto 0 0;
  z-index: var(--mdav-z-index, 1000);
  min-block-size: var(--mdav-min-height, 64px);
  padding-block: var(--mdav-pad-top, 8px) calc(var(--mdav-pad-bottom, 8px) + env(safe-area-inset-bottom, 0px));
  background: var(--mdav-bg, #fff);
  color: var(--mdav-text, #4b5563);
  border: 0;
  border-top: var(--mdav-border-width, 1px) var(--mdav-border-style, solid) var(--mdav-border-color, #e5e7eb);
  border-radius: var(--mdav-radius, 0);
  box-shadow: var(--mdav-shadow, 0 -4px 20px rgba(15, 23, 42, .05));
  font-family: var(--mdav-font-family, inherit);
  font-size: var(--mdav-font-size, 11px);
  font-weight: var(--mdav-font-weight, 500);
  line-height: var(--mdav-line-height, 1.3);
  letter-spacing: var(--mdav-letter-spacing, 0);
  text-align: center;
  isolation: isolate;
}

.mdav-nav[data-border="all"] {
  border: var(--mdav-border-width, 1px) var(--mdav-border-style, solid) var(--mdav-border-color, #e5e7eb);
}

.mdav-nav[data-border="none"] {
  border: 0;
}

.mdav-nav[data-layout="floating"] {
  inset-inline: var(--mdav-float-side, 12px);
  inset-block-end: calc(var(--mdav-float-bottom, 12px) + env(safe-area-inset-bottom, 0px));
  inline-size: calc(100% - var(--mdav-float-side, 12px) * 2);
  max-inline-size: var(--mdav-max-width, 600px);
  margin-inline: auto;
  padding-block-end: var(--mdav-pad-bottom, 8px);
  border-radius: var(--mdav-radius, 20px);
  box-shadow: var(--mdav-shadow, 0 6px 28px rgba(15, 23, 42, .12));
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .mdav-nav[data-glass="on"] {
    background: var(--mdav-bg, rgba(255, 255, 255, .88));
    -webkit-backdrop-filter: blur(var(--mdav-glass-blur, 16px)) saturate(var(--mdav-glass-saturation, 140%));
    backdrop-filter: blur(var(--mdav-glass-blur, 16px)) saturate(var(--mdav-glass-saturation, 140%));
  }
}

.mdav-nav .mdav-items {
  display: flex;
  align-items: stretch;
  inline-size: 100%;
  min-inline-size: 0;
  padding-inline: max(4px, env(safe-area-inset-left, 0px)) max(4px, env(safe-area-inset-right, 0px));
}

.mdav-nav .mdav-items .mdav-item {
  position: relative;
  display: flex;
  flex: 1 1 0;
  min-inline-size: 44px;
  margin: 0;
}

/* Native Divi column gutters target every et_pb_module; these items form one navigation. */
.mdav-nav[data-mdav-nav] .mdav-items .mdav-item.et_pb_module {
  margin: 0;
}

.mdav-nav .mdav-link {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--mdav-icon-gap, 4px);
  min-block-size: 44px;
  min-inline-size: 44px;
  inline-size: 100%;
  max-inline-size: 100%;
  padding: 4px 3px;
  border: var(--mdav-active-border-width, 0px) solid transparent;
  border-radius: var(--mdav-active-radius, 12px);
  background: transparent;
  color: var(--mdav-text, #4b5563);
  font: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  text-decoration: none;
  transform: translateY(var(--mdav-item-offset, 0px));
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.mdav-nav a.mdav-link {
  cursor: pointer;
}

.mdav-nav .mdav-icon {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  inline-size: var(--mdav-icon-size, 22px);
  block-size: var(--mdav-icon-size, 22px);
  color: var(--mdav-icon, #4b5563);
  font-size: var(--mdav-icon-size, 22px);
  line-height: 1;
  transition: background-color 150ms ease, color 150ms ease, transform 150ms ease;
}

.mdav-nav .mdav-icon svg,
.mdav-nav .mdav-icon img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
}

.mdav-nav .mdav-icon .et-pb-icon {
  font-size: inherit;
  line-height: 1;
}

.mdav-nav .mdav-icon > span:not(.et-pb-icon):not(.mdav-badge) {
  display: contents;
}

.mdav-nav .mdav-label {
  display: block;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mdav-nav .mdav-icon:empty,
.mdav-nav .mdav-label:empty {
  display: none;
}

/* Keep icon-only labels available as an accessible fallback. */
.mdav-nav[data-display="icon"] .mdav-item:not([data-display="both"]):not([data-display="text"]) .mdav-label,
.mdav-nav .mdav-item[data-display="icon"] .mdav-label {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mdav-nav[data-display="text"] .mdav-item:not([data-display="both"]):not([data-display="icon"]) .mdav-icon,
.mdav-nav .mdav-item[data-display="text"] .mdav-icon {
  display: none;
}

.mdav-nav .mdav-item[data-appearance="highlight"] .mdav-link {
  min-block-size: max(44px, var(--mdav-action-size, 48px));
  background: var(--mdav-action-bg, #111827);
  color: var(--mdav-action-color, #fff);
  border-radius: var(--mdav-action-radius, 12px);
}

.mdav-nav .mdav-item[data-appearance="highlight"] .mdav-icon {
  color: var(--mdav-action-color, #fff);
}

.mdav-nav .mdav-item[data-appearance="floating"] {
  --mdav-item-offset: calc(0px - var(--mdav-action-offset, 12px));
}

.mdav-nav .mdav-item[data-appearance="floating"] .mdav-icon {
  inline-size: var(--mdav-action-size, 48px);
  block-size: var(--mdav-action-size, 48px);
  padding: max(0px, calc((var(--mdav-action-size, 48px) - var(--mdav-icon-size, 22px)) / 2));
  background: var(--mdav-action-bg, #111827);
  color: var(--mdav-action-color, #fff);
  border-radius: var(--mdav-action-radius, 50%);
}

.mdav-nav .mdav-badge {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: calc(50% + var(--mdav-icon-size, 22px) / 2 - 5px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: 16px;
  min-block-size: 16px;
  max-inline-size: 70%;
  padding: 2px 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--mdav-badge-bg, #111827);
  color: var(--mdav-badge-text, #fff);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.1;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}

.mdav-nav .mdav-item[data-badge-position="left"] .mdav-badge {
  inset-inline-start: auto;
  inset-inline-end: calc(50% + var(--mdav-icon-size, 22px) / 2 - 5px);
}

@media (hover: hover) and (pointer: fine) {
  .mdav-nav a.mdav-link:hover {
    background: var(--mdav-hover-bg, rgba(15, 23, 42, .05));
    color: var(--mdav-hover-text, #111827);
  }

  .mdav-nav a.mdav-link:hover .mdav-icon {
    color: var(--mdav-hover-icon, #111827);
  }
}

.mdav-nav .mdav-item.is-active .mdav-link {
  background: var(--mdav-active-bg, rgba(15, 23, 42, .06));
  color: var(--mdav-active-text, #111827);
  border-color: var(--mdav-active-border-color, transparent);
}

.mdav-nav .mdav-item.is-active .mdav-icon {
  color: var(--mdav-active-icon, #111827);
  transform: scale(var(--mdav-active-scale, 1));
}

.mdav-nav .mdav-item[data-appearance="floating"].is-active .mdav-icon {
  background: var(--mdav-action-bg, #111827);
  color: var(--mdav-action-color, #fff);
}

.mdav-nav .mdav-item[data-appearance="highlight"].is-active .mdav-link {
  background: var(--mdav-action-bg, #111827);
  color: var(--mdav-action-color, #fff);
}

.mdav-nav .mdav-item[data-appearance="highlight"].is-active .mdav-icon,
.mdav-nav .mdav-item[data-appearance="floating"] a.mdav-link:hover .mdav-icon {
  color: var(--mdav-action-color, #fff);
}

.mdav-nav[data-marker="dot"] .mdav-item.is-active .mdav-link::after,
.mdav-nav[data-marker="bar"] .mdav-item.is-active .mdav-link::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inline-size: 4px;
  block-size: 4px;
  border-radius: 50%;
  background: var(--mdav-active-icon, #111827);
  pointer-events: none;
}

.mdav-nav[data-marker="bar"] .mdav-item.is-active .mdav-link::after {
  inline-size: 20px;
  block-size: 2px;
  border-radius: 999px;
}

.mdav-nav a.mdav-link:focus-visible {
  outline: 2px solid var(--mdav-focus, #374151);
  outline-offset: -2px;
}

/* Only unusually dense navigations scroll; normal action items remain unclipped. */
.mdav-nav[data-mdav-overflow="on"] .mdav-items {
  overflow-x: auto;
  overflow-y: hidden;
  padding-block-start: var(--mdav-action-offset, 12px);
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
}

.mdav-spacer {
  display: block !important;
  position: relative;
  flex-shrink: 0;
  inline-size: 100%;
  min-block-size: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  clear: both;
  pointer-events: none;
  background: var(--lbo-background, #000000);
}

@media (max-width: 767px) {
  .mdav-nav[data-phone="off"] {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 980px) {
  .mdav-nav[data-tablet="off"] {
    display: none;
  }
}

@media (min-width: 981px) {
  .mdav-nav:not([data-desktop="on"]) {
    display: none;
  }
}

/* Builder preview stays in its module so Divi controls remain accessible. */
.et-fb .mdav-nav,
.et-fb-root-ancestor .mdav-nav,
[data-mdav-builder] .mdav-nav,
.mdav-nav[data-mdav-builder] {
  position: relative !important;
  inset: auto !important;
  display: block;
  z-index: auto;
}

.mdav-nav .mdav-empty {
  margin-inline: auto;
  padding: 12px;
  font-size: 12px;
}

.mdav-host .mdav-builder-hint {
  margin-block: 8px 0;
  color: #525b66;
  font-size: 12px;
  line-height: 1.5;
}

@media (prefers-reduced-motion: reduce) {
  .mdav-nav .mdav-link,
  .mdav-nav .mdav-icon {
    transition: none;
  }
}