/* Dish label tags (new customer site). Markup from customer-core labelHtml().
   Flat, quiet tags on the photo corner: "New" is solid brand blue, every
   other label is white with a small icon, a free-text note ("Back in
   October") is pale blue. No cartoon shapes, no pink-on-dark. */
.lbl {
    --lbl-blue: #004190;
    --lbl-solid-bg: var(--lbl-blue);
    --lbl-solid-fg: #ffffff;
    display: inline-flex; align-items: center; gap: 5px;
    height: 26px; padding: 0 10px; border-radius: 8px;
    background: #ffffff; color: var(--lbl-blue);
    font-family: "Archivo", ui-sans-serif, sans-serif; font-weight: 700; font-size: 11.5px;
    letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; line-height: 1;
    box-shadow: 0 1px 2px rgba(0, 30, 80, 0.16);
    pointer-events: none;
}
html[dir="rtl"] .lbl { font-family: "Assistant", sans-serif; font-weight: 800; font-size: 13px; letter-spacing: 0; text-transform: none; }
.lbl b { font-weight: inherit; }
.lbl i { font-size: 13px; }
/* Always the physical left corner: several menu photos have a sticker printed
   on their top-right, and an RTL "start" corner would land on top of it. */
.lbl-at { position: absolute; z-index: 2; top: 10px; left: 10px; }

.lbl-new { background: var(--lbl-solid-bg); color: var(--lbl-solid-fg); }
.lbl-bestseller i { color: #e0457b; }
.lbl-favourite i { color: #e0457b; }
.lbl-spicy i { color: #c2410c; }
.lbl-halloween { background: #15110d; color: #ff9a3c; }
.lbl svg { width: 20px; height: 9px; fill: currentColor; flex: none; }
.lbl-note { background: #dfe8f8; text-transform: none; letter-spacing: 0.01em; font-size: 12.5px; }
html[dir="rtl"] .lbl-note { font-size: 13px; }

/* Gyoza mood faces (fe/shared/mood.js). Line art in currentColor, body fill
   from --mf-fill, stroke width per size (non scaling stroke keeps small faces
   legible). Idle: white body, blue line. Picked: pink body, pink-ink line. */
.mf { display: block; flex: none; overflow: visible; color: #004190; stroke-width: 2.25px; width: 48px; height: 48px; }
.mf .mf-blush { fill: #e0457b; stroke: none; }
.mf-18 { width: 18px; height: 18px; stroke-width: 1.6px; }
.mf-20 { width: 20px; height: 20px; stroke-width: 1.6px; }
.mf-22 { width: 22px; height: 22px; stroke-width: 1.75px; }
.mf-24 { width: 24px; height: 24px; stroke-width: 1.75px; }
.mf-28 { width: 28px; height: 28px; stroke-width: 1.9px; }
.mf-52 { width: 52px; height: 52px; stroke-width: 2.25px; }
.mf-72 { width: 72px; height: 72px; stroke-width: 2.75px; }
.mf-96 { width: 96px; height: 96px; stroke-width: 3px; }
.mf-picked { --mf-fill: #ff8fc0; color: #002a61; }

/* An image whose source and fallback both failed (customer-core marks it):
   never the browser's broken icon. Pages may show their own placeholder. */
img.img-failed { visibility: hidden; }