/* css-mobile-bar.css - styles that only matter on: any page with the mobile icon bar (sections/mobile-bar.liquid). */

/* A phone pattern: above the header's breakpoint the nav already carries these. */
.mbar { display: none; }

@media (max-width: 60rem) {
  /* The bar's fixed height; pages with their own bottom bar sit above it. */
  :root { --mbar-h: calc(4.4rem + env(safe-area-inset-bottom, 0px)); }

  .mbar {
    box-sizing: border-box;
    min-height: var(--mbar-h);
    position: fixed;
    inset: auto 0 0 0;
    z-index: 40;
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 0.25rem;
    padding: 0.4rem 0.5rem calc(0.4rem + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 18px rgb(23 25 15 / 0.06);
  }

  /* Page changes slide the whole page; the bar stays put (theme.css, the
   * `mbar` view-transition name). */

  /* Leave room so the bar never covers the footer's last line. */
  body:has(.mbar) { padding-bottom: var(--mbar-h); }
  body:has(.mbar):has(.cart-foot) { padding-bottom: calc(12rem + var(--mbar-h)); }

  /* Pages with their own fixed bottom bar (menu order bar, cart totals, dish
   * actions) would sit under this one; lift them above it. */
  body:has(.mbar) .order-bar { bottom: calc(var(--mbar-h) + 0.75rem); }
  body:has(.mbar) .cart-foot,
  body:has(.mbar) .pdp__actions { bottom: var(--mbar-h); }

  .mbar__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.4rem 0.25rem;
    border-radius: var(--radius-md, 0.6rem);
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1.1;
    text-decoration: none;
  }
  .mbar--icons .mbar__item { padding-block: 0.65rem; }

  .mbar__item[aria-current="page"] { background: var(--surface-3); color: var(--ink); font-weight: 600; }

  .mbar__icon { position: relative; display: inline-flex; }

  .mbar__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .mbar__count {
    position: absolute;
    top: -0.45rem;
    inset-inline-end: -0.7rem;
    min-width: 1.05rem;
    padding: 0.15rem 0.3rem;
    border-radius: 999px;
    background: var(--ink);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    line-height: 1;
    text-align: center;
  }
}

/* Full-page spinner shown from a bar tap until the next page arrives (js-mobile-bar.js). */
.mbar-busy {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--paper) 78%, transparent);
  backdrop-filter: blur(2px);
}

.mbar-busy__ring {
  width: 2.75rem;
  height: 2.75rem;
  border: 3px solid var(--line-2);
  border-top-color: var(--accent-ink, var(--accent));
  border-radius: 50%;
  animation: mbar-spin 0.8s linear infinite;
}

@keyframes mbar-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .mbar-busy__ring { animation-duration: 2.4s; }
}

/* Not every theme page defines a screen-reader-only class; this one is local. */
.mbar-busy .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }