/* MY ORDER — full-width bar fixed to the bottom of the screen, shown once an item is added.
   Loaded after the page's own .my-order-fab rules on Menu, Home and Search.
   Follows the theme colour by default; override with --order-bar-bg, --order-bar-text,
   --order-bar-badge-bg, --order-bar-badge-text, --order-bar-height. */
.fab-group .my-order-fab {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 401;
    width: 100%;
    min-height: calc(var(--order-bar-height, 3.25rem) + env(safe-area-inset-bottom, 0px));
    padding: 0 1rem env(safe-area-inset-bottom, 0px);
    justify-content: center;
    gap: .6rem;
    border-radius: 0;
    background: var(--order-bar-bg, var(--brand-primary, #1a0a05));
    color: var(--order-bar-text, #fff);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: .06em;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, .18);
    transition: filter .15s ease;
}
.fab-group .my-order-fab:hover {
    opacity: 1;
    transform: none;
    filter: brightness(1.2);
}
.fab-group .my-order-fab:focus-visible {
    outline: 3px solid var(--order-bar-badge-bg, #fff);
    outline-offset: -6px;
}
.fab-group .my-order-fab > i { display: none; }
.fab-group .my-order-fab .my-order-fab-badge {
    width: 1.45rem;
    height: 1.45rem;
    background: var(--order-bar-badge-bg, #fff);
    color: var(--order-bar-badge-text, var(--brand-primary, #1a0a05));
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* While the bar is showing: keep the floating buttons and the page end clear of it. */
body:has(.my-order-fab.visible) .fab-group {
    bottom: calc(var(--order-bar-height, 3.25rem) + env(safe-area-inset-bottom, 0px) + .75rem);
}
body:has(.my-order-fab.visible) {
    padding-bottom: calc(var(--order-bar-height, 3.25rem) + env(safe-area-inset-bottom, 0px));
}