/* ==========================================================================
   iLabel mobile bottom bar (phones and tablets). Loaded on every page.
   Which buttons appear on which page is set in the OCMOD (common/footer).
   ========================================================================== */
.il-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.il-bottomnav {
  --il-ink: #0b0d14;
  --il-muted: #5b6778;
  --il-line: #e3e8ef;
  --il-accent: #dc2626;
  --il-accent-strong: #b91c1c;
  display: none;
}

@media (max-width: 991.98px) {
  .il-bottomnav {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 900;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px);
    border-top: 1px solid var(--il-line);
    box-shadow: 0 -6px 20px rgba(11, 13, 20, .08);
    font-family: inherit;
  }
  .il-bottomnav, .il-bottomnav * { box-sizing: border-box; }

  .il-bn {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 52px; padding: 0; border: 0; border-radius: 10px; background: none;
    color: var(--il-muted); font: 600 11px/1.2 inherit; text-decoration: none; cursor: pointer;
  }
  .il-bottomnav a.il-bn:hover, .il-bottomnav a.il-bn:focus { color: var(--il-accent-strong); text-decoration: none; }
  .il-bn:hover, .il-bn.is-active, .il-bn[aria-expanded="true"] { color: var(--il-accent-strong); }
  .il-bn.is-active::before { content: ""; position: absolute; top: -7px; left: 30%; right: 30%; height: 3px; border-radius: 0 0 3px 3px; background: var(--il-accent); }
  .il-bn .il-icon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .il-bn__badge { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: var(--il-accent); color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; }
  .il-bn__badge[hidden] { display: none; }
  .il-bn:focus-visible { outline: 3px solid var(--il-accent-strong); outline-offset: 2px; }

  /* keep the end of the page clear of the bar */
  body.il-has-bottomnav { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
}