/* The 80mm thermal document — shared by the receipt and the guest check.
 *
 * These rules used to live inside Receipt.razor's own <style> block, which meant they existed only
 * while a RECEIPT was on screen. The pre-bill reuses the same classes on purpose, and rendered with
 * none of them: a check that read "المطلوب8,250" because the flex that separates a label from its
 * amount was never applied. A style two components depend on is a stylesheet, not a component
 * detail.
 */
    .r80 {
        width: 300px;
        padding: 12px 14px;
        color: #111;
        font-size: 12.5px;
        line-height: 1.5;
        font-family: 'Segoe UI', Tahoma, sans-serif;
    }

    .r80-co { text-align: center; font-weight: 800; font-size: 15px; }
    .r80-sub { text-align: center; color: #444; font-size: 11px; }
    .r80-line { border-block-start: 1px dashed #888; margin: 7px 0; }
    .r80-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; }
    .r80-fx { color: #444; font-size: 10.5px; padding-inline-start: 10px; }
    .r80-item { margin: 3px 0; }
    .r80-item-name { font-weight: 600; }
    .r80-item-nums { display: flex; justify-content: space-between; color: #333; gap: 8px; }
    /* Outlined, never filled: thermal paper renders a grey fill as a smudge. */
    .r80-gift .r80-item-name { font-style: italic; }
    .r80-gift-chip { border: 1px solid #111; border-radius: 8px; padding: 0 5px; font-size: 10.5px; font-weight: 700; }
    .r80-tot { display: flex; justify-content: space-between; }
    .r80-grand { font-weight: 800; font-size: 14.5px; border-block: 1px solid #111; padding: 3px 0; margin: 3px 0; }
    .r80-thanks { text-align: center; color: #555; font-size: 11px; }
    .r80-barcode { text-align: center; margin: 4px 0; }
    .r80-barcode svg { max-width: 100%; height: 40px; }

/* Modifiers under a line on the guest check: what was asked for, and what it added. */
.r80-item-mods {
    color: #444;
    font-size: 11px;
    padding-inline-start: 10px;
}