/**
 * NepalNet food vertical.
 *
 * Scoped under .kbfd-* so nothing here can reach the retail storefront. The
 * theme is Ecolife (Bootstrap 4 alpha), so the variables below adopt its
 * palette rather than restating colours: #253237 primary, #80b435 secondary.
 *
 * Mobile-first throughout. The people using this are standing up — a customer
 * on a bus, a merchant beside a stove, a courier on a scooter — so the base
 * styles are the small-screen ones and the media queries add the desk.
 */

:root {
    --kbfd-ink: #253237;
    --kbfd-ink-soft: #5a6b72;
    --kbfd-accent: #80b435;
    --kbfd-accent-dark: #6d9c2c;
    --kbfd-line: #e2e7e9;
    --kbfd-bg-soft: #f6f8f8;
    --kbfd-warn: #b45309;
    --kbfd-warn-bg: #fef3c7;
    --kbfd-error: #b91c1c;
    --kbfd-error-bg: #fee2e2;
    --kbfd-ok: #15803d;
    --kbfd-ok-bg: #dcfce7;
    --kbfd-radius: 8px;
}

/* ---------------------------------------------------------------------------
   Notes
   --------------------------------------------------------------------------- */

.kbfd-note {
    border-radius: var(--kbfd-radius);
    padding: 14px 16px;
    margin: 0 0 20px;
    border-left: 4px solid var(--kbfd-line);
    background: var(--kbfd-bg-soft);
    color: var(--kbfd-ink);
}

.kbfd-note h2 {
    margin: 0 0 8px;
    font-size: 1.15rem;
}

.kbfd-note p:last-child,
.kbfd-note ul:last-child {
    margin-bottom: 0;
}

.kbfd-note ul {
    margin: 0;
    padding-left: 20px;
}

.kbfd-note--ok { background: var(--kbfd-ok-bg); border-left-color: var(--kbfd-ok); }
.kbfd-note--warn { background: var(--kbfd-warn-bg); border-left-color: var(--kbfd-warn); }
.kbfd-note--error { background: var(--kbfd-error-bg); border-left-color: var(--kbfd-error); }
.kbfd-note--info { background: var(--kbfd-bg-soft); border-left-color: var(--kbfd-accent); }

/* ---------------------------------------------------------------------------
   Application form
   --------------------------------------------------------------------------- */

.kbfd-apply {
    max-width: 720px;
    margin: 0 auto;
}

.kbfd-lede {
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--kbfd-ink-soft);
    margin-bottom: 28px;
}

.kbfd-fieldset {
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    padding: 20px;
    margin: 0 0 22px;
    /* Bootstrap's reset leaves fieldsets full-bleed; this keeps the box. */
    min-width: 0;
}

.kbfd-fieldset > legend {
    width: auto;
    padding: 0 10px;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--kbfd-ink);
    border: 0;
}

.kbfd-field {
    margin-bottom: 18px;
}

.kbfd-field:last-child {
    margin-bottom: 0;
}

.kbfd-field > label,
.kbfd-label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--kbfd-ink);
}

.kbfd-field input[type="text"],
.kbfd-field input[type="number"],
.kbfd-field input[type="date"],
.kbfd-field textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    font-size: 1rem;
    color: var(--kbfd-ink);
    background: #fff;
}

.kbfd-field input:focus,
.kbfd-field textarea:focus {
    outline: 2px solid var(--kbfd-accent);
    outline-offset: 1px;
    border-color: var(--kbfd-accent);
}

.kbfd-field small,
.kbfd-hint {
    display: block;
    margin-top: 6px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--kbfd-ink-soft);
}

.kbfd-field--narrow input {
    max-width: 240px;
}

/* Radio and checkbox cards. Big targets, because half of these forms are
   filled in on a phone with one thumb. */
.kbfd-radio,
.kbfd-check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px;
    margin-bottom: 10px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    cursor: pointer;
    font-weight: 400;
}

.kbfd-radio:hover,
.kbfd-check:hover {
    border-color: var(--kbfd-accent);
    background: var(--kbfd-bg-soft);
}

.kbfd-radio input,
.kbfd-check input {
    margin-top: 3px;
    flex: 0 0 auto;
}

.kbfd-radio span,
.kbfd-check span {
    display: block;
}

.kbfd-radio strong,
.kbfd-check strong {
    display: block;
    color: var(--kbfd-ink);
}

.kbfd-radio small,
.kbfd-check small {
    display: block;
    margin-top: 3px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--kbfd-ink-soft);
}

.kbfd-check--declare {
    background: var(--kbfd-bg-soft);
    align-items: center;
}

/* Suburb autocomplete */
.kbfd-field {
    position: relative;
}

.kbfd-suggest {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    box-shadow: 0 6px 18px rgba(37, 50, 55, 0.12);
    max-height: 260px;
    overflow-y: auto;
}

.kbfd-suggest__item {
    padding: 10px 12px;
    cursor: pointer;
}

.kbfd-suggest__item:hover,
.kbfd-suggest__item:focus {
    background: var(--kbfd-bg-soft);
    outline: none;
}

/* Documents */
.kbfd-doc {
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    padding: 14px;
    margin-bottom: 14px;
    background: var(--kbfd-bg-soft);
}

.kbfd-doc__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
}

.kbfd-doc__head label {
    margin: 0;
    font-weight: 600;
    color: var(--kbfd-ink);
}

.kbfd-req {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    border-radius: 999px;
    background: var(--kbfd-ink);
    color: #fff;
}

.kbfd-doc__state {
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    background: #e5e7eb;
    color: var(--kbfd-ink-soft);
}

.kbfd-doc__state--1 { background: var(--kbfd-ok-bg); color: var(--kbfd-ok); }
.kbfd-doc__state--2 { background: var(--kbfd-error-bg); color: var(--kbfd-error); }
.kbfd-doc__state--3 { background: var(--kbfd-warn-bg); color: var(--kbfd-warn); }
.kbfd-doc__state--4 { background: var(--kbfd-error-bg); color: var(--kbfd-error); }

.kbfd-doc__note {
    margin: 0 0 10px;
    padding: 8px 10px;
    border-radius: 6px;
    background: #fff;
    border-left: 3px solid var(--kbfd-warn);
    font-size: 0.9rem;
    color: var(--kbfd-ink);
}

.kbfd-doc input[type="file"] {
    display: block;
    width: 100%;
    font-size: 0.9375rem;
}

.kbfd-doc__expiry {
    margin-top: 12px;
}

.kbfd-doc__expiry label {
    display: block;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.kbfd-doc__expiry input {
    padding: 8px 10px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    font-size: 0.9375rem;
}

.kbfd-submit {
    width: 100%;
    padding: 14px;
    font-size: 1.05rem;
    font-weight: 600;
}

@media (min-width: 768px) {
    .kbfd-submit {
        width: auto;
        min-width: 260px;
    }
}

/* ---------------------------------------------------------------------------
   Merchant settings
   --------------------------------------------------------------------------- */

.kbfd-settings {
    max-width: 860px;
    margin: 0 auto;
}

.kbfd-status {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border-radius: var(--kbfd-radius);
    margin-bottom: 22px;
    border-left: 4px solid;
}

.kbfd-status strong {
    font-size: 1.15rem;
}

.kbfd-status--open {
    background: var(--kbfd-ok-bg);
    border-left-color: var(--kbfd-ok);
    color: var(--kbfd-ok);
}

.kbfd-status--closed {
    background: var(--kbfd-warn-bg);
    border-left-color: var(--kbfd-warn);
    color: var(--kbfd-warn);
}

.kbfd-status span {
    color: var(--kbfd-ink);
}

.kbfd-day {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px 0;
    border-bottom: 1px solid var(--kbfd-line);
}

.kbfd-day:last-of-type {
    border-bottom: 0;
}

.kbfd-day__name {
    font-weight: 700;
    color: var(--kbfd-ink);
}

.kbfd-day__rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kbfd-window {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.kbfd-window input[type="time"] {
    padding: 8px 10px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    font-size: 1rem;
}

.kbfd-window select {
    padding: 8px 10px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    font-size: 0.9375rem;
    background: #fff;
}

.kbfd-window__remove {
    border: 0;
    background: transparent;
    color: var(--kbfd-error);
    font-size: 1.5rem;
    line-height: 1;
    padding: 0 8px;
    cursor: pointer;
}

.kbfd-day__add {
    justify-self: start;
    border: 1px dashed var(--kbfd-line);
    background: transparent;
    color: var(--kbfd-ink-soft);
    border-radius: var(--kbfd-radius);
    padding: 7px 14px;
    font-size: 0.9rem;
    cursor: pointer;
}

.kbfd-day__add:hover {
    border-color: var(--kbfd-accent);
    color: var(--kbfd-accent-dark);
}

.kbfd-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 16px 0;
}

.kbfd-closures {
    list-style: none;
    padding: 0;
    margin: 0 0 16px;
}

.kbfd-closures li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    margin-bottom: 8px;
}

.kbfd-closures em {
    display: block;
    font-style: normal;
    font-size: 0.875rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-link-danger {
    border: 0;
    background: transparent;
    color: var(--kbfd-error);
    text-decoration: underline;
    cursor: pointer;
    padding: 4px;
}

@media (min-width: 700px) {
    .kbfd-day {
        grid-template-columns: 150px 1fr auto;
        align-items: start;
    }

    .kbfd-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ---------------------------------------------------------------------------
   Menu builder
   --------------------------------------------------------------------------- */

.kbfd-builder__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 20px;
}

.kbfd-builder__title {
    margin: 0 0 4px;
    font-size: 1.4rem;
}

.kbfd-builder__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kbfd-loading,
.kbfd-empty {
    padding: 20px;
    text-align: center;
    color: var(--kbfd-ink-soft);
    background: var(--kbfd-bg-soft);
    border-radius: var(--kbfd-radius);
}

.kbfd-menu {
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    margin-bottom: 18px;
    overflow: hidden;
}

.kbfd-menu__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    background: var(--kbfd-bg-soft);
    border-bottom: 1px solid var(--kbfd-line);
}

.kbfd-menu__head h3 {
    margin: 0;
    font-size: 1.1rem;
    flex: 1 1 auto;
}

.kbfd-menu__body {
    padding: 12px 16px;
}

.kbfd-section {
    margin-bottom: 18px;
}

.kbfd-section:last-child {
    margin-bottom: 0;
}

.kbfd-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0 10px;
    border-bottom: 1px dashed var(--kbfd-line);
    margin-bottom: 10px;
}

.kbfd-section__head strong {
    flex: 1 1 auto;
}

.kbfd-dishes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kbfd-dish {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    margin-bottom: 8px;
    background: #fff;
}

.kbfd-dish__main {
    flex: 1 1 220px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    border: 0;
    background: transparent;
    text-align: left;
    padding: 4px;
    cursor: pointer;
    font-size: 1rem;
    color: var(--kbfd-ink);
}

.kbfd-dish__main:hover .kbfd-dish__name {
    text-decoration: underline;
}

.kbfd-dish__price {
    font-weight: 600;
    white-space: nowrap;
}

.kbfd-chip {
    display: inline-block;
    padding: 2px 9px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 999px;
    background: #e5e7eb;
    color: var(--kbfd-ink-soft);
    white-space: nowrap;
}

.kbfd-chip--warn { background: var(--kbfd-warn-bg); color: var(--kbfd-warn); }
.kbfd-chip--off { background: #e5e7eb; color: var(--kbfd-ink-soft); }

.kbfd-mini {
    border: 1px solid var(--kbfd-line);
    background: #fff;
    color: var(--kbfd-ink);
    border-radius: var(--kbfd-radius);
    padding: 7px 12px;
    font-size: 0.875rem;
    cursor: pointer;
    white-space: nowrap;
}

.kbfd-mini:hover { border-color: var(--kbfd-accent); }
.kbfd-mini--ok { border-color: var(--kbfd-ok); color: var(--kbfd-ok); }
.kbfd-danger { color: var(--kbfd-error); }

/* Editing panel */
.kbfd-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(37, 50, 55, 0.45);
    z-index: 1040;
}

.kbfd-panel {
    position: fixed;
    inset: 0;
    z-index: 1050;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.kbfd-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--kbfd-line);
}

.kbfd-panel__head h3 {
    margin: 0;
    font-size: 1.15rem;
}

.kbfd-panel__close {
    border: 0;
    background: transparent;
    font-size: 1.9rem;
    line-height: 1;
    cursor: pointer;
    color: var(--kbfd-ink-soft);
    padding: 0 6px;
}

.kbfd-panel__body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 16px;
    /* Room for the sticky footer plus a phone's home indicator. */
    padding-bottom: 96px;
}

.kbfd-panel__label {
    display: block;
    font-weight: 600;
    margin: 16px 0 6px;
}

.kbfd-panel__hint {
    margin: 0 0 8px;
    font-size: 0.875rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-panel__form input[type="text"],
.kbfd-panel__form input[type="number"],
.kbfd-panel__form textarea,
.kbfd-panel__form select {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    font-size: 1rem;
}

.kbfd-panel__form input[type="range"] {
    width: 100%;
}

.kbfd-panel__foot {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 8px;
    padding: 14px 0 0;
    margin-top: 20px;
    background: #fff;
    border-top: 1px solid var(--kbfd-line);
}

.kbfd-tagrow {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kbfd-tagbox {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border: 1px solid var(--kbfd-line);
    border-radius: 999px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 400;
    margin: 0;
}

.kbfd-tagbox:has(input:checked) {
    border-color: var(--kbfd-accent);
    background: var(--kbfd-bg-soft);
}

.kbfd-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.kbfd-photo {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: var(--kbfd-radius);
    overflow: hidden;
    border: 1px solid var(--kbfd-line);
}

.kbfd-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kbfd-photo__remove {
    position: absolute;
    top: 2px;
    right: 2px;
    border: 0;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    background: rgba(37, 50, 55, 0.75);
    color: #fff;
    cursor: pointer;
    line-height: 1;
}

.kbfd-groupcard {
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    padding: 12px;
    margin-bottom: 10px;
}

.kbfd-groupcard__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.kbfd-groupcard__head strong {
    flex: 1 1 auto;
}

.kbfd-groupcard__options {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-groupcard__options li {
    padding: 3px 0;
}

.kbfd-groupcard__options .kbfd-off {
    text-decoration: line-through;
    opacity: 0.6;
}

@media (min-width: 768px) {
    .kbfd-builder__head {
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
    }

    .kbfd-panel {
        inset: 0 0 0 auto;
        width: min(560px, 100%);
        box-shadow: -8px 0 30px rgba(37, 50, 55, 0.18);
    }
}

/* ---------------------------------------------------------------------------
   Directory
   --------------------------------------------------------------------------- */

.kbfd-where {
    background: var(--kbfd-bg-soft);
    border-radius: var(--kbfd-radius);
    padding: 16px;
    margin-bottom: 18px;
    position: relative;
}

.kbfd-where label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
}

.kbfd-where__row {
    display: flex;
    gap: 8px;
}

.kbfd-where__row input[type="text"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    font-size: 1rem;
}

.kbfd-modes {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    background: var(--kbfd-bg-soft);
    padding: 4px;
    border-radius: 999px;
}

.kbfd-mode {
    flex: 1 1 0;
    margin: 0;
    text-align: center;
    border-radius: 999px;
    padding: 9px 4px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-mode input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.kbfd-mode.is-on {
    background: #fff;
    color: var(--kbfd-ink);
    box-shadow: 0 1px 3px rgba(37, 50, 55, 0.12);
}

.kbfd-filters__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.kbfd-search {
    flex: 1 1 180px;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    font-size: 1rem;
}

.kbfd-sort {
    padding: 10px 12px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    background: #fff;
    font-size: 0.9375rem;
}

.kbfd-more summary {
    cursor: pointer;
    font-weight: 600;
    padding: 8px 0;
    color: var(--kbfd-ink);
}

.kbfd-more__body {
    padding: 8px 0 4px;
}

.kbfd-more .kbfd-label {
    margin: 12px 0 6px;
    font-weight: 600;
}

.kbfd-count {
    margin: 18px 0 12px;
    font-weight: 600;
    color: var(--kbfd-ink-soft);
}

.kbfd-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}

.kbfd-card {
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    overflow: hidden;
    background: #fff;
}

.kbfd-card--closed {
    opacity: 0.72;
}

.kbfd-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.kbfd-card__link:hover .kbfd-card__name {
    text-decoration: underline;
}

.kbfd-card__media {
    position: relative;
    aspect-ratio: 16 / 7;
    background: var(--kbfd-bg-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.kbfd-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kbfd-card__placeholder {
    font-size: 2.4rem;
    opacity: 0.35;
}

.kbfd-card__closed {
    position: absolute;
    inset: auto 0 0 0;
    background: rgba(37, 50, 55, 0.82);
    color: #fff;
    text-align: center;
    padding: 6px;
    font-size: 0.875rem;
    font-weight: 600;
}

.kbfd-card__body {
    padding: 14px;
}

.kbfd-card__name {
    margin: 0 0 4px;
    font-size: 1.1rem;
}

.kbfd-card__tagline {
    margin: 0 0 8px;
    font-size: 0.9375rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-card__meta,
.kbfd-card__service {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin: 0 0 6px;
    font-size: 0.875rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-card__service span:not(:last-child)::after {
    content: " ·";
    color: var(--kbfd-line);
}

.kbfd-rating {
    font-weight: 600;
    color: var(--kbfd-ink);
}

.kbfd-empty--big {
    padding: 40px 20px;
}

.kbfd-empty--big h2 {
    font-size: 1.2rem;
    margin: 0 0 8px;
}

.kbfd-pager {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin: 24px 0;
}

.kbfd-pager a,
.kbfd-pager__current {
    padding: 8px 14px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    text-decoration: none;
    color: var(--kbfd-ink);
}

.kbfd-pager__current {
    background: var(--kbfd-ink);
    color: #fff;
    border-color: var(--kbfd-ink);
}

.kbfd-recruit {
    margin: 36px 0 0;
    padding: 24px;
    background: var(--kbfd-bg-soft);
    border-radius: var(--kbfd-radius);
    text-align: center;
}

.kbfd-recruit h2 {
    margin: 0 0 8px;
    font-size: 1.2rem;
}

.kbfd-recruit p {
    max-width: 52ch;
    margin: 0 auto 16px;
    color: var(--kbfd-ink-soft);
}

/* ---------------------------------------------------------------------------
   Merchant page
   --------------------------------------------------------------------------- */

.kbfd-shop__banner {
    width: 100%;
    aspect-ratio: 16 / 6;
    object-fit: cover;
    border-radius: var(--kbfd-radius);
}

.kbfd-shop__identity {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin: 16px 0;
}

.kbfd-shop__logo {
    width: 64px;
    height: 64px;
    border-radius: var(--kbfd-radius);
    object-fit: cover;
    flex: 0 0 auto;
}

.kbfd-shop__name {
    margin: 0 0 4px;
    font-size: 1.5rem;
}

.kbfd-shop__tagline {
    margin: 0 0 8px;
    color: var(--kbfd-ink-soft);
}

.kbfd-shop__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin: 0;
    font-size: 0.9rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.kbfd-trust__badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--kbfd-ok-bg);
    color: var(--kbfd-ok);
    font-size: 0.8125rem;
    font-weight: 600;
}

.kbfd-trust__badge--home { background: #e0e7ff; color: #3730a3; }
.kbfd-trust__badge--claim { background: var(--kbfd-bg-soft); color: var(--kbfd-ink-soft); }

.kbfd-hint--tight { margin: 0 0 18px; }

.kbfd-service {
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    padding: 14px;
    margin-bottom: 22px;
}

.kbfd-service__to {
    margin: 0 0 10px;
    font-size: 0.9375rem;
}

.kbfd-service__options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.kbfd-service__option {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    background: var(--kbfd-bg-soft);
    border-radius: var(--kbfd-radius);
    font-size: 0.9rem;
}

.kbfd-service__option span { color: var(--kbfd-ink-soft); }
.kbfd-service__option--no { opacity: 0.65; }

.kbfd-jump {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 10px 0;
    margin-bottom: 8px;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 5;
    -webkit-overflow-scrolling: touch;
}

.kbfd-jump a {
    white-space: nowrap;
    padding: 7px 14px;
    border: 1px solid var(--kbfd-line);
    border-radius: 999px;
    text-decoration: none;
    color: var(--kbfd-ink);
    font-size: 0.9rem;
}

.kbfd-cat { margin-bottom: 26px; }

.kbfd-cat__name {
    font-size: 1.15rem;
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kbfd-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kbfd-item {
    border-bottom: 1px solid var(--kbfd-line);
}

.kbfd-item--out { opacity: 0.55; }

.kbfd-item__button {
    display: flex;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 14px 2px;
    cursor: pointer;
    color: inherit;
}

.kbfd-item__button:disabled { cursor: default; }
.kbfd-item__button:not(:disabled):hover .kbfd-item__name { text-decoration: underline; }

.kbfd-item__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kbfd-item__name {
    font-weight: 600;
    font-size: 1rem;
}

.kbfd-item__desc {
    font-size: 0.9rem;
    color: var(--kbfd-ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.kbfd-item__price {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}

.kbfd-item__media {
    flex: 0 0 auto;
    width: 88px;
    height: 88px;
    border-radius: var(--kbfd-radius);
    overflow: hidden;
}

.kbfd-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kbfd-allergy-note {
    margin: 24px 0;
    padding: 12px 14px;
    background: var(--kbfd-bg-soft);
    border-radius: var(--kbfd-radius);
    font-size: 0.875rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-about h2 {
    font-size: 1.15rem;
    margin: 24px 0 10px;
}

.kbfd-week {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.kbfd-week th,
.kbfd-week td {
    padding: 8px 4px;
    border-bottom: 1px solid var(--kbfd-line);
    text-align: left;
}

.kbfd-week th { font-weight: 500; color: var(--kbfd-ink-soft); }
.kbfd-week .is-today th,
.kbfd-week .is-today td { font-weight: 700; color: var(--kbfd-ink); }

/* Item sheet */
.kbfd-sheet__photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--kbfd-radius);
    margin-bottom: 12px;
}

.kbfd-sheet__desc { color: var(--kbfd-ink-soft); }

.kbfd-sheet__allergens,
.kbfd-sheet__may {
    font-size: 0.875rem;
    padding: 8px 10px;
    background: var(--kbfd-warn-bg);
    color: var(--kbfd-warn);
    border-radius: 6px;
    margin-bottom: 8px;
}

.kbfd-group {
    border: 0;
    border-top: 1px solid var(--kbfd-line);
    padding: 14px 0 4px;
    margin: 0;
    min-width: 0;
}

.kbfd-group > legend {
    width: 100%;
    padding: 0;
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 1rem;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.kbfd-group__rule {
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-group.is-incomplete > legend .kbfd-group__rule {
    color: var(--kbfd-warn);
    font-weight: 600;
}

.kbfd-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 4px;
    margin: 0;
    border-bottom: 1px solid var(--kbfd-bg-soft);
    cursor: pointer;
    font-weight: 400;
}

.kbfd-opt--out { opacity: 0.5; cursor: default; }
.kbfd-opt__label { flex: 1 1 auto; }
.kbfd-opt__price { color: var(--kbfd-ink-soft); font-size: 0.9rem; }

.kbfd-counter,
.kbfd-qty {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.kbfd-counter__btn {
    width: 36px;
    height: 36px;
    border: 1px solid var(--kbfd-line);
    background: #fff;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    color: var(--kbfd-ink);
}

.kbfd-counter__btn:disabled { opacity: 0.4; cursor: default; }

.kbfd-counter__value,
#kbfd-qty {
    min-width: 28px;
    text-align: center;
    font-weight: 600;
}

.kbfd-sheet__foot {
    position: sticky;
    bottom: 0;
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 14px 0;
    margin-top: 18px;
    background: #fff;
    border-top: 1px solid var(--kbfd-line);
}

.kbfd-add {
    flex: 1 1 auto;
    padding: 14px;
    font-size: 1rem;
    font-weight: 600;
}

.kbfd-add:disabled { opacity: 0.5; }

.kbfd-sheet__legal {
    font-size: 0.8125rem;
    color: var(--kbfd-ink-soft);
    text-align: center;
    margin: 10px 0 0;
}

@media (min-width: 700px) {
    .kbfd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kbfd-service__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1100px) {
    .kbfd-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ===========================================================================
   Design-review fixes (2026-08-24)
   Each of these was found by opening the pages in a real browser at 390px and
   1440px. None were visible from the code.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   BLOCKER: the cookie bar sat on top of the dish panel's Save button.
   
   The theme's consent bar is position:fixed, bottom:0, z-index:5101
   (theme.css:15690). The panel was 1050, so on a 390px screen the banner
   covered the action bar from y=722 while Save sat at y=703–748 — hit-testing
   returned the banner, not the button. A merchant edits a price, taps Save,
   and nothing happens, with no error to explain it.
   
   kbclassifieds hit the identical bug and solved it by measuring an offset.
   Here the right answer is simpler: this panel IS a modal dialog, and a modal
   outranks a cookie notice for as long as it is open. Raising it also fixes
   desktop, where the two were only 32px from colliding.
   --------------------------------------------------------------------------- */
.kbfd-panel { z-index: 5200; }
.kbfd-backdrop { z-index: 5190; }

/* ---------------------------------------------------------------------------
   BLOCKER: every label was right-aligned.
   
   The theme sets `label, .label { text-align: right }` globally
   (theme.css:1135). Labels were flush right while their inputs began flush
   left, so the eye zig-zagged on every field — worst on the radio cards, where
   the radio dot ended up alone at the far right and stopped reading as a radio
   button at all.
   --------------------------------------------------------------------------- */
.kbfd-apply label,
.kbfd-settings label,
.kbfd-builder label,
.kbfd-directory label,
.kbfd-shop label,
.kbfd-panel label,
.kbfd-panel__label,
.kbfd-label {
    text-align: left;
}

/* ---------------------------------------------------------------------------
   HIGH: a 96px strip below the sticky action bar leaked the scrolling form
   through it — half-cropped allergen chips and orphaned words like "Buff"
   sitting under the Save button.
   
   The padding was meant to reserve room for the bar, but the bar is an
   in-flow sticky element and already occupies its own space. The padding only
   extended the scroll area past it.
   --------------------------------------------------------------------------- */
.kbfd-panel__body {
    padding-bottom: 16px;
}

.kbfd-panel__foot,
.kbfd-sheet__foot {
    /* Clear a phone's home indicator without reintroducing the gap. */
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
    margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   MEDIUM: the theme capitalises button and heading text, so the panel title
   read "Momo (10 Pcs)" six pixels above a Name field containing the merchant's
   actual "Momo (10 pcs)". Showing someone their own typing, corrupted, next to
   the correct version is worse than either alone.
   --------------------------------------------------------------------------- */
.kbfd-builder .btn,
.kbfd-settings .btn,
.kbfd-apply .btn,
.kbfd-directory .btn,
.kbfd-shop .btn,
.kbfd-mini,
.kbfd-panel__head h3,
.kbfd-builder__title,
.kbfd-card__name,
.kbfd-shop__name,
.kbfd-item__name {
    text-transform: none;
}

/* ---------------------------------------------------------------------------
   MEDIUM: native controls rendered Chrome blue against a brand palette, so a
   ticked chip had a green border and a blue tick.
   --------------------------------------------------------------------------- */
.kbfd-apply input[type="checkbox"],
.kbfd-apply input[type="radio"],
.kbfd-settings input[type="checkbox"],
.kbfd-settings input[type="radio"],
.kbfd-builder input[type="checkbox"],
.kbfd-builder input[type="radio"],
.kbfd-builder input[type="range"],
.kbfd-directory input[type="checkbox"],
.kbfd-directory input[type="radio"],
.kbfd-panel input[type="checkbox"],
.kbfd-panel input[type="radio"],
.kbfd-panel input[type="range"] {
    accent-color: var(--kbfd-accent);
}

/* ---------------------------------------------------------------------------
   HIGH: dish rows are the primary "edit this dish" affordance and had
   cursor:pointer with no hover feedback whatsoever — a real mouseMoved left
   the computed background unchanged. On mobile the only thing in the row that
   looked tappable was the "Sold out" button, which is the one control an owner
   should hit LAST.
   --------------------------------------------------------------------------- */
.kbfd-dish {
    transition: border-color 0.12s ease, background-color 0.12s ease;
}

.kbfd-dish:hover,
.kbfd-dish:focus-within {
    border-color: var(--kbfd-accent);
    background: var(--kbfd-bg-soft);
}

.kbfd-dish__main {
    /* Below the 44px tap minimum at 32px. */
    min-height: 44px;
}

/* ---------------------------------------------------------------------------
   HIGH: destructive controls were 30x24px, under half the 44px minimum, and
   sat immediately beside "+ Add a time". On a tablet at 11pm an owner adding
   Sunday hours deletes Saturday dinner instead.
   --------------------------------------------------------------------------- */
.kbfd-window__remove,
.kbfd-photo__remove,
.kbfd-panel__close {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kbfd-photo__remove {
    /* The exception: it overlays a 96px thumbnail, so 44px would cover the
       photo it is meant to be removing. Kept at 28px and pulled clear of the
       "+ Add a time" style neighbours it does not have. */
    min-width: 28px;
    min-height: 28px;
    width: 28px;
    height: 28px;
}

/* Separate the delete from the add, so a mis-tap is a miss rather than a
   different action. */
.kbfd-window {
    padding: 8px;
    border: 1px solid transparent;
    border-radius: var(--kbfd-radius);
}

.kbfd-window:hover {
    border-color: var(--kbfd-line);
    background: var(--kbfd-bg-soft);
}

.kbfd-window__remove {
    margin-left: auto;
}

/* ---------------------------------------------------------------------------
   MEDIUM: .btn-default has no background in this theme, so identical classes
   rendered a <button> browser-grey and an <a> invisible. Three border radii
   and two heights in one toolbar.
   --------------------------------------------------------------------------- */
.kbfd-builder__actions .btn-default,
.kbfd-settings .btn-default,
.kbfd-apply .btn-default {
    background: #fff;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    color: var(--kbfd-ink);
    min-height: 44px;
    font-size: 0.9375rem;
}

.kbfd-builder__actions .btn-primary,
.kbfd-settings .btn-primary,
.kbfd-apply .btn-primary {
    border-radius: var(--kbfd-radius);
    min-height: 44px;
    font-size: 0.9375rem;
}

.kbfd-mini {
    min-height: 38px;
}

/* On a phone the primary action wrapped BELOW the two secondary ones,
   inverting the hierarchy. */
@media (max-width: 767px) {
    .kbfd-builder__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .kbfd-builder__actions .btn-primary {
        grid-column: 1 / -1;
        order: -1;
    }
}

/* ---------------------------------------------------------------------------
   MEDIUM: chip borders at #e2e7e9 on white were effectively invisible — the
   reviewer could not tell a chip existed without reading computed styles.
   --------------------------------------------------------------------------- */
.kbfd-tagbox {
    border-color: #c8d0d4;
    min-height: 40px;
}

/* ---------------------------------------------------------------------------
   HIGH: at 390px every trading-hours window broke into three stacked rows with
   the word "to" orphaned at the end of the first, and fourteen near-identical
   blocks ran together with nothing to say which x deleted which.
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .kbfd-window {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-areas:
            "from sep to"
            "mode mode remove";
        gap: 8px;
        align-items: center;
        border-color: var(--kbfd-line);
        background: #fff;
        margin-bottom: 10px;
    }

    .kbfd-window input[type="time"]:first-of-type { grid-area: from; }
    .kbfd-window span { grid-area: sep; text-align: center; color: var(--kbfd-ink-soft); }
    .kbfd-window input[type="time"]:last-of-type { grid-area: to; }
    .kbfd-window select { grid-area: mode; }
    .kbfd-window__remove { grid-area: remove; justify-self: end; }

    .kbfd-window input[type="time"] { width: 100%; }
}

/* ---------------------------------------------------------------------------
   NIT: 80-110px of dead white between the page banner and the first card.
   --------------------------------------------------------------------------- */
.kbfd-apply,
.kbfd-settings,
.kbfd-builder,
.kbfd-directory,
.kbfd-shop {
    margin-top: -24px;
}

/* ---------------------------------------------------------------------------
   The merchant nav, added because there was none.
   --------------------------------------------------------------------------- */
.kbfd-nav {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    margin: 0 0 22px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--kbfd-line);
    -webkit-overflow-scrolling: touch;
}

.kbfd-nav__item {
    white-space: nowrap;
    padding: 12px 16px;
    text-decoration: none;
    color: var(--kbfd-ink-soft);
    font-weight: 600;
    font-size: 0.9375rem;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.kbfd-nav__item:hover {
    color: var(--kbfd-ink);
    text-decoration: none;
}

.kbfd-nav__item.is-current {
    color: var(--kbfd-ink);
    border-bottom-color: var(--kbfd-accent);
}

.kbfd-nav__item--out {
    margin-left: auto;
    color: var(--kbfd-accent-dark);
}

/* Documents already held: name them, rather than showing an empty file
   picker next to a green "Approved" pill. */
.kbfd-doc__have {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 10px;
    padding: 10px 12px;
    background: #fff;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
}

.kbfd-doc__file {
    font-weight: 600;
    word-break: break-all;
}

.kbfd-doc__when {
    font-size: 0.8125rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-doc__upload {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 16px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    background: #fff;
    font-weight: 600;
    font-size: 0.9375rem;
    cursor: pointer;
    margin: 0;
}

.kbfd-doc__upload:hover {
    border-color: var(--kbfd-accent);
}

/* The native control is replaced by the label above, but stays reachable by
   keyboard and screen reader rather than being display:none. */
.kbfd-doc__input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.kbfd-doc__input:focus + .kbfd-doc__upload,
.kbfd-doc__upload:focus-within {
    outline: 2px solid var(--kbfd-accent);
    outline-offset: 2px;
}

/* ===========================================================================
   Verification-pass follow-ups (2026-08-24)
   =========================================================================== */

/* ---------------------------------------------------------------------------
   The action bar still had a 16px strip beneath it that the form scrolled
   through. `position: sticky; bottom: 0` parks against the padding box, not
   the border box, so any padding-bottom on the scroller becomes a gap the
   content slides under.
   
   The bar carries the safe-area inset itself instead, so it is genuinely the
   floor of the panel.
   --------------------------------------------------------------------------- */
.kbfd-panel__body {
    padding-bottom: 0;
}

.kbfd-panel__foot,
.kbfd-sheet__foot {
    padding: 14px 0 calc(14px + env(safe-area-inset-bottom, 0px));
    margin-top: 20px;
}

/* ---------------------------------------------------------------------------
   The theme's capitalize was still reaching menu and section headings, so a
   seller who names a menu "All day" saw "All Day". Same bug as the panel
   title, one level further down the tree — their own words, retyped for them.
   --------------------------------------------------------------------------- */
.kbfd-menu__head h3,
.kbfd-section__head strong,
.kbfd-cat__name,
.kbfd-menu-public__name,
.kbfd-dish__name,
.kbfd-groupcard__head strong,
.kbfd-jump a,
.kbfd-nav__item,
.kbfd-card__tagline,
.kbfd-shop__tagline {
    text-transform: none;
}

/* ---------------------------------------------------------------------------
   The mobile tab strip scrolled but gave no sign it did: "Your details" was
   clipped mid-word and "See your page" was entirely off-screen. Tighter
   padding fits more, and a fade at the right edge says there is more.
   --------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .kbfd-nav {
        position: relative;
        /* Room for the fade, so the last tab is never hidden beneath it. */
        padding-right: 28px;
        scroll-snap-type: x proximity;
    }

    .kbfd-nav__item {
        padding: 12px 11px;
        font-size: 0.875rem;
        scroll-snap-align: start;
    }

    .kbfd-nav__item--out {
        /* margin-left:auto collapses in a scrolling flex row and pushed this
           tab out of reach; a plain gap keeps it in the scroll order. */
        margin-left: 4px;
    }
}

/* The fade sits over the strip's right edge, outside the scrolling content so
   it stays put while the tabs move under it. */
@media (max-width: 560px) {
    .kbfd-nav::after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 1px;
        width: 28px;
        background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff 70%);
        pointer-events: none;
    }
}

/* ---------------------------------------------------------------------------
   .kbfd-mini was 38px. "Sold out for an hour" is a mid-service, one-handed,
   time-pressured tap on a phone beside a hot stove — it does not get to be
   under the minimum.
   --------------------------------------------------------------------------- */
.kbfd-mini {
    min-height: 44px;
}

/* ---------------------------------------------------------------------------
   The renewal-reminder helper text wrapped around the right edge of the date
   input and continued underneath it, reading as two disconnected fragments.
   --------------------------------------------------------------------------- */
.kbfd-doc__expiry {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
}

.kbfd-doc__expiry small {
    margin-top: 0;
}

/* A day with no trading windows reads as a decision, not as something
   half-finished. */
.kbfd-day__closed {
    margin: 0;
    padding: 8px 0;
    color: var(--kbfd-ink-soft);
    font-style: italic;
    font-size: 0.9375rem;
}

#kbfd-copy-week {
    margin-bottom: 14px;
}

/* ---------------------------------------------------------------------------
   Checkout and tracking
   --------------------------------------------------------------------------- */

.kbfd-checkout,
.kbfd-track {
    max-width: 640px;
    margin: 0 auto;
}

.kbfd-checkout__from,
.kbfd-track__ref {
    color: var(--kbfd-ink-soft);
    margin-bottom: 18px;
}

.kbfd-checkout__h {
    font-size: 1.05rem;
    margin: 0 0 12px;
    /* theme.css capitalises every card h2, which turns "Collect from" into
       "Collect From" and, worse, mangles merchant-entered text. */
    text-transform: none;
}

.kbfd-review {
    list-style: none;
    margin: 0 0 14px;
    padding: 0;
}

.kbfd-review__line {
    display: flex;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--kbfd-line);
}

.kbfd-review__line--out { opacity: 0.55; }
.kbfd-review__qty { font-weight: 700; flex: 0 0 auto; }
.kbfd-review__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kbfd-review__opts,
.kbfd-review__note { font-size: 0.875rem; color: var(--kbfd-ink-soft); }
.kbfd-review__note { font-style: italic; }
.kbfd-review__price { flex: 0 0 auto; font-weight: 600; }

/* ------------------------------------------- FR-8.3: an item has run out ---
   The decision block sits inside the line it belongs to, and deliberately does
   NOT inherit the line's dimming: the row is greyed because the dish is off,
   but the choice the customer has to make is the most important thing on the
   page while it is there. */
.kbfd-swap {
    flex: 1 0 100%;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--kbfd-warn-soft, #fff6e5);
    border: 1px solid var(--kbfd-warn-line, #f0d3a0);
    opacity: 1;
}
.kbfd-review__line--out .kbfd-swap { opacity: 1; }
.kbfd-swap__lead { margin: 0 0 10px; font-weight: 600; }
.kbfd-swap__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.kbfd-swap__actions .btn { flex: 0 1 auto; }
.kbfd-swap__options { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.kbfd-swap__option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 11px 12px;
    border-radius: 8px;
    border: 1px solid var(--kbfd-line, #e2e2e2);
    background: #fff;
    font: inherit;
    cursor: pointer;
    /* 44px of tappable height, because this is read standing up on a phone
       while somebody waits to hear what they are eating instead. */
    min-height: 44px;
}
.kbfd-swap__option:hover,
.kbfd-swap__option:focus { border-color: var(--kbfd-accent, #80b435); }
.kbfd-swap__option[disabled] { opacity: 0.5; cursor: default; }

@media (max-width: 480px) {
    .kbfd-swap__actions { flex-direction: column; }
    .kbfd-swap__actions .btn { width: 100%; }
}

.kbfd-totals__list { margin: 0; }

.kbfd-totals__list > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
}

.kbfd-totals__list dt,
.kbfd-totals__list dd { margin: 0; font-weight: 400; }

.kbfd-totals__grand {
    border-top: 2px solid var(--kbfd-ink);
    margin-top: 6px;
    padding-top: 12px !important;
    font-size: 1.15rem;
}

.kbfd-totals__grand dt,
.kbfd-totals__grand dd { font-weight: 700; }

.kbfd-totals__note dt,
.kbfd-totals__note dd { font-size: 0.8125rem; color: var(--kbfd-ink-soft); }

.kbfd-checkout__legal { text-align: center; margin-top: 14px; }

/* Tracking */
.kbfd-track__status {
    padding: 18px;
    border-radius: var(--kbfd-radius);
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    border-left: 4px solid;
}

.kbfd-track__status strong { font-size: 1.2rem; }
.kbfd-track__status--live { background: var(--kbfd-bg-soft); border-left-color: var(--kbfd-accent); }
.kbfd-track__status--done { background: var(--kbfd-ok-bg); border-left-color: var(--kbfd-ok); }
.kbfd-track__status--bad { background: var(--kbfd-error-bg); border-left-color: var(--kbfd-error); }
.kbfd-track__status span { color: var(--kbfd-ink); }

.kbfd-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px;
    margin-bottom: 20px;
    background: var(--kbfd-ink);
    color: #fff;
    border-radius: var(--kbfd-radius);
}

.kbfd-code__label { font-size: 0.875rem; opacity: 0.85; }

.kbfd-code__value {
    font-size: 2.4rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    font-variant-numeric: tabular-nums;
}

.kbfd-steps {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}

.kbfd-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    color: var(--kbfd-ink-soft);
    position: relative;
}

.kbfd-step__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid var(--kbfd-line);
    background: #fff;
    flex: 0 0 auto;
}

/* The connecting line, drawn between the dots rather than through them. */
.kbfd-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 30px;
    bottom: -9px;
    width: 2px;
    background: var(--kbfd-line);
}

.kbfd-step.is-done { color: var(--kbfd-ink); }
.kbfd-step.is-done .kbfd-step__dot { background: var(--kbfd-accent); border-color: var(--kbfd-accent); }
.kbfd-step.is-done:not(:last-child)::before { background: var(--kbfd-accent); }

.kbfd-step.is-current { color: var(--kbfd-ink); font-weight: 700; }
.kbfd-step.is-current .kbfd-step__dot {
    border-color: var(--kbfd-accent);
    box-shadow: 0 0 0 4px rgba(128, 180, 53, 0.22);
}

/* ---------------------------------------------------------------------------
   The order terminal
   ---------------------------------------------------------------------------

   Different rules apply here than anywhere else in this stylesheet. This is not
   a page someone reads; it is an instrument panel glanced at from two metres
   away by somebody holding a pan. So: larger type than the rest of the module,
   heavier weights, more contrast, and touch targets sized for a hand that has
   just come off a hot surface rather than a mouse pointer.

   Everything is scoped under .kbfd-terminal. The board's own card and sheet
   classes are deliberately named .kbfd-ticket / .kbfd-osheet rather than reusing
   .kbfd-card / .kbfd-sheet, which already mean something on the customer-facing
   pages.
   --------------------------------------------------------------------------- */

.kbfd-terminal {
    --kbfd-term-gap: 12px;
    max-width: 1500px;
    margin: 0 auto;
    padding-bottom: 96px;
}

.kbfd-terminal .is-hidden { display: none !important; }

/* Status bar */
.kbfd-term__bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    flex-wrap: wrap;
    gap: var(--kbfd-term-gap);
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    margin-bottom: var(--kbfd-term-gap);
    background: var(--kbfd-ink);
    color: #fff;
    border-radius: var(--kbfd-radius);
}

.kbfd-term__state {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.kbfd-term__state strong {
    font-size: 1.25rem;
    line-height: 1.2;
}

.kbfd-term__sub {
    font-size: 0.875rem;
    opacity: 0.8;
}

.kbfd-term__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #6b7280;
    flex: 0 0 auto;
    align-self: center;
}

.kbfd-term__dot--open { background: #4ade80; }
.kbfd-term__dot--paused { background: #fbbf24; }
.kbfd-term__dot--closed { background: #9ca3af; }

.kbfd-term__controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kbfd-term__ctl {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--kbfd-radius);
    background: transparent;
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    /* The theme capitalises every .btn; these are not .btn, but the theme also
       reaches buttons by element in places. Stated explicitly so a merchant's
       screen never says "Pause Orders". */
    text-transform: none;
    cursor: pointer;
}

.kbfd-term__ctl:hover { background: rgba(255, 255, 255, 0.12); }
.kbfd-term__ctl.is-on { background: var(--kbfd-accent); border-color: var(--kbfd-accent); }
.kbfd-term__ctl.is-suggested { border-color: var(--kbfd-accent); color: #cdea9b; }
.kbfd-term__ctl--pause { border-color: rgba(251, 191, 36, 0.6); }
.kbfd-term__ctl--resume { background: var(--kbfd-accent); border-color: var(--kbfd-accent); }

/* Offline */
.kbfd-term__offline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 16px;
    margin-bottom: var(--kbfd-term-gap);
    background: var(--kbfd-error-bg);
    border-left: 4px solid var(--kbfd-error);
    border-radius: var(--kbfd-radius);
    color: #7f1d1d;
}

.kbfd-term__offline strong { font-size: 1.0625rem; }

/* Tabs */
.kbfd-term__tabs {
    display: flex;
    gap: 4px;
    margin-bottom: var(--kbfd-term-gap);
    border-bottom: 2px solid var(--kbfd-line);
}

.kbfd-term__tab {
    min-height: 44px;
    padding: 0 18px;
    border: 0;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    background: transparent;
    color: var(--kbfd-ink-soft);
    font-size: 1rem;
    font-weight: 600;
    text-transform: none;
    cursor: pointer;
}

.kbfd-term__tab.is-current {
    color: var(--kbfd-ink);
    border-bottom-color: var(--kbfd-accent);
}

.kbfd-term__count {
    display: inline-block;
    min-width: 22px;
    padding: 1px 6px;
    margin-left: 6px;
    border-radius: 11px;
    background: var(--kbfd-line);
    font-size: 0.8125rem;
}

/* Lanes */
.kbfd-term__lanes {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--kbfd-term-gap);
}

@media (min-width: 900px) {
    .kbfd-term__lanes { grid-template-columns: repeat(3, 1fr); }
}

/* Grid and flex children default to min-width:auto, which means a child that
   cannot shrink — here a row of buttons with labels like "Waiting on the
   counter" — pushes its track wider than the viewport and the whole page
   scrolls sideways. Measured at 390px before this was added: every card ran off
   the right edge and the Reject button was unreachable. */
.kbfd-lane,
.kbfd-lane__body,
.kbfd-ticket {
    min-width: 0;
}

.kbfd-lane__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 8px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--kbfd-line);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kbfd-ink-soft);
}

.kbfd-lane--new .kbfd-lane__head { color: var(--kbfd-error); border-bottom-color: var(--kbfd-error); }

.kbfd-lane__body {
    display: flex;
    flex-direction: column;
    gap: var(--kbfd-term-gap);
}

/* An empty lane collapses on a phone rather than taking a screenful of
   whitespace, but stays visible on a wide screen so the three columns do not
   jump around as orders move between them. */
.kbfd-lane.is-empty { display: none; }

@media (min-width: 900px) {
    .kbfd-lane.is-empty { display: block; }
}

/* Tickets */
.kbfd-ticket {
    padding: 14px;
    background: #fff;
    border: 1px solid var(--kbfd-line);
    border-left: 5px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    cursor: pointer;
}

.kbfd-ticket.is-urgent {
    border-left-color: var(--kbfd-error);
    box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.16);
    animation: kbfd-pulse 1.6s ease-in-out infinite;
}

/* Motion is a genuine attention cue here, but it is also the thing most likely
   to make a screen unusable for someone who cannot tolerate it. The border and
   the shadow already carry the meaning; the animation is the enhancement. */
@media (prefers-reduced-motion: reduce) {
    .kbfd-ticket.is-urgent { animation: none; }
}

@keyframes kbfd-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(185, 28, 28, 0.16); }
    50% { box-shadow: 0 0 0 7px rgba(185, 28, 28, 0.05); }
}

.kbfd-ticket__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.kbfd-ticket__ref {
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.kbfd-ticket__mode,
.kbfd-ticket__sched {
    padding: 2px 8px;
    border-radius: 11px;
    background: var(--kbfd-bg-soft);
    font-size: 0.8125rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-ticket__timer,
.kbfd-ticket__age {
    margin-left: auto;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 1rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-ticket__timer { color: var(--kbfd-warn); }
.kbfd-ticket__timer.is-late { color: var(--kbfd-error); }

.kbfd-ticket__lines {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
}

.kbfd-ticket__line {
    display: flex;
    gap: 10px;
    padding: 6px 0;
    border-top: 1px solid var(--kbfd-line);
}

.kbfd-ticket__line:first-child { border-top: 0; }
.kbfd-ticket__line.is-out { opacity: 0.45; text-decoration: line-through; }

.kbfd-ticket__qty {
    flex: 0 0 auto;
    min-width: 26px;
    font-size: 1.125rem;
    font-weight: 700;
}

.kbfd-ticket__item {
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: 1.3;
}

.kbfd-ticket__item small,
.kbfd-ticket__item em,
.kbfd-ticket__item strong {
    display: block;
    font-size: 0.875rem;
    font-weight: 400;
}

.kbfd-ticket__item small { color: var(--kbfd-ink-soft); }

/* Special instructions and allergens are the two things that must survive a
   glance. They are the only text on a ticket that gets a colour. */
.kbfd-ticket__item em {
    font-style: normal;
    font-weight: 700;
    color: var(--kbfd-warn);
}

.kbfd-ticket__allergen { color: var(--kbfd-error); font-weight: 700; }

.kbfd-ticket__note {
    margin: 0 0 10px;
    padding: 8px 10px;
    background: var(--kbfd-warn-bg);
    border-radius: 6px;
    font-size: 0.9375rem;
    color: #78350f;
}

.kbfd-ticket__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kbfd-terminal .kbfd-btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 52px;
    padding: 8px 14px;
    /* A long label wraps inside the button rather than widening it. Two lines
       of "Waiting on the counter" is fine; a button half off the screen is
       not. */
    white-space: normal;
    line-height: 1.2;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    background: #fff;
    color: var(--kbfd-ink);
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    cursor: pointer;
}

.kbfd-terminal .kbfd-btn--primary {
    background: var(--kbfd-accent);
    border-color: var(--kbfd-accent);
    color: #fff;
}

.kbfd-terminal .kbfd-btn--quiet { flex: 0 0 auto; color: var(--kbfd-ink-soft); }
.kbfd-terminal .kbfd-btn[disabled] { opacity: 0.55; cursor: progress; }

.kbfd-term__empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--kbfd-ink-soft);
}

/* Today */
.kbfd-today__totals {
    display: flex;
    flex-wrap: wrap;
    gap: var(--kbfd-term-gap);
    margin-bottom: 20px;
}

.kbfd-today__total {
    flex: 1 1 140px;
    padding: 14px;
    background: var(--kbfd-bg-soft);
    border-radius: var(--kbfd-radius);
}

.kbfd-today__total span { display: block; font-size: 0.875rem; color: var(--kbfd-ink-soft); }
.kbfd-today__total strong { display: block; font-size: 1.5rem; }
.kbfd-today__total small { color: var(--kbfd-ink-soft); }
.kbfd-today__total--sub strong { font-size: 1.125rem; }

.kbfd-today__table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }

.kbfd-today__table th,
.kbfd-today__table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--kbfd-line);
    text-align: left;
}

.kbfd-today__table th { color: var(--kbfd-ink-soft); font-weight: 600; }
.kbfd-num { text-align: right !important; font-variant-numeric: tabular-nums; }
.kbfd-today__row--void { opacity: 0.5; }
.kbfd-today__row--void .kbfd-num { text-decoration: line-through; }

.kbfd-chip--food { background: var(--kbfd-ok-bg); color: var(--kbfd-ok); }
.kbfd-chip--pos { background: #dbeafe; color: #1e40af; }
.kbfd-chip--retail { background: #ede9fe; color: #5b21b6; }

/* ---------------------------------------------------------------------------
   Order sheet and prompts

   z-index 5200 and above. The theme's cookie bar is fixed at the bottom of the
   viewport with z-index 5101, and it will happily sit on top of the action
   buttons at the foot of this sheet — which on a phone means an accept button
   that cannot be tapped. This has already happened twice on this site.
   --------------------------------------------------------------------------- */

.kbfd-osheet {
    position: fixed;
    inset: 0;
    z-index: 5200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

@media (min-width: 768px) {
    .kbfd-osheet { align-items: center; }
}

.kbfd-osheet__scrim {
    position: absolute;
    inset: 0;
    background: rgba(37, 50, 55, 0.55);
}

.kbfd-osheet__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    background: #fff;
    border-radius: var(--kbfd-radius) var(--kbfd-radius) 0 0;
}

@media (min-width: 768px) {
    .kbfd-osheet__panel { border-radius: var(--kbfd-radius); }
}

.kbfd-osheet__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px;
    border-bottom: 1px solid var(--kbfd-line);
}

.kbfd-osheet__head h2 { margin: 0; font-size: 1.25rem; text-transform: none; }

.kbfd-osheet__close {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: transparent;
    font-size: 1.75rem;
    line-height: 1;
    color: var(--kbfd-ink-soft);
    cursor: pointer;
}

.kbfd-osheet__body { padding: 16px; overflow-y: auto; }

.kbfd-osheet__foot {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px;
    border-top: 1px solid var(--kbfd-line);
    /* Clear of the home indicator on an iPad, and of anything the theme pins
       to the bottom of the viewport. */
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}

.kbfd-detail__meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
    margin: 0 0 16px;
}

.kbfd-detail__meta dt { font-size: 0.8125rem; color: var(--kbfd-ink-soft); }
.kbfd-detail__meta dd { margin: 0; font-weight: 600; }
.kbfd-detail__code { font-size: 1.5rem; letter-spacing: 0.12em; }

.kbfd-detail__lines { list-style: none; margin: 0; padding: 0; }

.kbfd-detail__line {
    padding: 12px 0;
    border-top: 1px solid var(--kbfd-line);
}

.kbfd-detail__line.is-out { opacity: 0.5; }

.kbfd-detail__lineHead {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font-weight: 600;
}

.kbfd-detail__mods {
    list-style: none;
    margin: 6px 0 0;
    padding: 0 0 0 14px;
    font-size: 0.9375rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-detail__mods .is-nested { padding-left: 14px; }

.kbfd-detail__alert {
    margin: 8px 0 0;
    padding: 8px 10px;
    background: var(--kbfd-warn-bg);
    border-radius: 6px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #78350f;
}

.kbfd-terminal .kbfd-link {
    margin-top: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kbfd-error);
    font-size: 0.875rem;
    text-decoration: underline;
    text-transform: none;
    cursor: pointer;
}

/* Prompts */
.kbfd-prompt {
    position: fixed;
    inset: 0;
    z-index: 5300;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

@media (min-width: 768px) {
    .kbfd-prompt { align-items: center; }
}

.kbfd-prompt__scrim {
    position: absolute;
    inset: 0;
    background: rgba(37, 50, 55, 0.6);
}

.kbfd-prompt__panel {
    position: relative;
    width: 100%;
    max-width: 460px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 20px;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-radius: var(--kbfd-radius) var(--kbfd-radius) 0 0;
}

@media (min-width: 768px) {
    .kbfd-prompt__panel { border-radius: var(--kbfd-radius); }
}

.kbfd-prompt__panel h2 { margin: 0 0 6px; font-size: 1.25rem; text-transform: none; }
.kbfd-prompt__panel > p { margin: 0 0 16px; color: var(--kbfd-ink-soft); }

.kbfd-prompt__choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kbfd-prompt__choice {
    flex: 1 1 120px;
    min-height: 56px;
    padding: 10px 14px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    background: #fff;
    font-size: 1rem;
    font-weight: 600;
    text-align: left;
    text-transform: none;
    cursor: pointer;
}

.kbfd-prompt__choice:hover {
    border-color: var(--kbfd-accent);
    background: var(--kbfd-bg-soft);
}

.kbfd-prompt__free {
    display: block;
    margin: 16px 0 8px;
    /* The theme right-aligns every label on the site. */
    text-align: left;
    font-size: 0.875rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-prompt__free input {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 4px;
    padding: 0 12px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    font-size: 1rem;
}

.kbfd-prompt__cancel {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    border: 0;
    background: none;
    color: var(--kbfd-ink-soft);
    font-size: 0.9375rem;
    text-transform: none;
    cursor: pointer;
}

/* Toast */
.kbfd-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 5400;
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    padding: 14px 18px;
    background: var(--kbfd-ink);
    color: #fff;
    border-radius: var(--kbfd-radius);
    font-size: 0.9375rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    transition: opacity 0.3s ease;
}

.kbfd-toast--error { background: var(--kbfd-error); }
.kbfd-toast.is-out { opacity: 0; }

/* Printing */
.kbfd-print { display: none; }

@media print {
    /* Everything except the docket. A kitchen pressing print must get one
       ticket, not a screenshot of the whole board with the site's header on
       top of it.

       Hidden with visibility rather than display: the docket lives several
       levels down inside the page, and display:none on an ancestor cannot be
       undone by a descendant. visibility inherits but stays overridable, so
       the whole tree goes invisible and only the docket comes back. */
    body * { visibility: hidden; }

    .kbfd-print,
    .kbfd-print * { visibility: visible; }

    .kbfd-print {
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        margin: 0;
        padding: 0;
        font-family: "Courier New", monospace;
        color: #000;
    }

    .kbfd-docket { width: 72mm; font-size: 11pt; }
    .kbfd-docket h1 { font-size: 20pt; text-align: center; margin: 0 0 4mm; }
    .kbfd-docket__meta,
    .kbfd-docket__who { text-align: center; margin: 0 0 2mm; }
    .kbfd-docket__lines { list-style: none; margin: 4mm 0; padding: 0; }
    .kbfd-docket__lines > li { margin-bottom: 3mm; border-top: 1px dashed #000; padding-top: 2mm; }
    .kbfd-docket__item { font-size: 15pt; font-weight: bold; }
    .kbfd-docket__mods { list-style: none; margin: 1mm 0 0; padding-left: 5mm; }
    .kbfd-docket__alert { font-weight: bold; text-transform: uppercase; margin: 1mm 0 0; }
    .kbfd-docket .is-out { text-decoration: line-through; }
}

/* ---------------------------------------------------------------------------
   Cart bar (merchant page)

   Pinned to the bottom of the viewport at z-index 5200. The theme's cookie
   banner is fixed at 5101 and would otherwise sit exactly on top of the only
   route to checkout on a phone.
   --------------------------------------------------------------------------- */

.kbfd-cartbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5200;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--kbfd-ink);
    color: #fff;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18);
}

.kbfd-cartbar[hidden] { display: none; }

.kbfd-cartbar__summary {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.kbfd-cartbar__summary strong { font-size: 1rem; }
.kbfd-cartbar__summary span { font-size: 0.875rem; opacity: 0.85; }

.kbfd-cartbar__go {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    padding: 0 22px;
    background: var(--kbfd-accent);
    border-color: var(--kbfd-accent);
    color: #fff;
    font-weight: 700;
    text-transform: none;
}

@media (min-width: 768px) {
    .kbfd-cartbar {
        left: auto;
        right: 24px;
        bottom: 24px;
        max-width: 360px;
        border-radius: var(--kbfd-radius);
    }
}

/* Somebody is at the counter. The only badge on a ticket that means a person
   is physically standing there, so it is the loudest thing in the header. */
.kbfd-ticket__here {
    padding: 2px 9px;
    border-radius: 11px;
    background: var(--kbfd-error);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
}

/* ---------------------------------------------------------------------------
   A customer's order list
   --------------------------------------------------------------------------- */

.kbfd-orders { max-width: 780px; margin: 0 auto; }

.kbfd-orders__h {
    margin: 28px 0 12px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kbfd-ink-soft);
}

.kbfd-orders__live .kbfd-orders__h { margin-top: 0; }

.kbfd-orow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 16px;
    margin-bottom: 10px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    background: #fff;
    color: inherit;
}

a.kbfd-orow:hover { border-color: var(--kbfd-accent); color: inherit; text-decoration: none; }

.kbfd-orow--live { border-left: 4px solid var(--kbfd-accent); }
.kbfd-orow--void { opacity: 0.62; }

.kbfd-orow__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kbfd-orow__main strong { font-size: 1.0625rem; }
.kbfd-orow__items { color: var(--kbfd-ink-soft); }
.kbfd-orow__when { color: var(--kbfd-ink-soft); font-size: 0.8125rem; }

.kbfd-orow__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex: 0 0 auto;
    text-align: right;
}

.kbfd-orow__state { font-weight: 700; color: var(--kbfd-accent-dark); }
.kbfd-orow__side small { color: var(--kbfd-ink-soft); }

.kbfd-orders .kbfd-btn {
    min-height: 44px;
    padding: 0 16px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    background: #fff;
    color: var(--kbfd-ink);
    font-size: 0.9375rem;
    font-weight: 600;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
}

.kbfd-orders .kbfd-btn:hover { border-color: var(--kbfd-accent); text-decoration: none; }

@media (max-width: 560px) {
    /* Stack rather than squeeze. At this width the reorder button and the
       kitchen name were fighting over the same 90 pixels. */
    .kbfd-orow { flex-direction: column; align-items: stretch; }
    .kbfd-orow__side { align-items: stretch; text-align: left; }
    .kbfd-orders .kbfd-btn { width: 100%; }
}

.kbfd-empty { padding: 48px 20px; text-align: center; color: var(--kbfd-ink-soft); }
.kbfd-empty p { margin-bottom: 18px; }

.kbfd-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 24px 0;
    color: var(--kbfd-ink-soft);
}

/* Tracking-page actions */
.kbfd-track__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin: 18px 0 6px;
}

.kbfd-track__here { min-height: 48px; padding: 0 26px; text-transform: none; }

.kbfd-track__actions-note {
    margin: 0 0 18px;
    font-size: 0.9375rem;
}

.kbfd-track__actions-note.is-ok { color: var(--kbfd-ok); }
.kbfd-track__actions-note.is-error { color: var(--kbfd-error); }

/* Save a kitchen */
.kbfd-fav {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 0 12px;
    margin: 4px 0 8px;
    border: 1px solid var(--kbfd-line);
    border-radius: 18px;
    background: #fff;
    color: var(--kbfd-ink-soft);
    font-size: 0.875rem;
    text-transform: none;
    cursor: pointer;
}

.kbfd-fav__mark { color: var(--kbfd-line); font-size: 1rem; }
.kbfd-fav:hover { border-color: var(--kbfd-error); }
.kbfd-fav.is-on { border-color: var(--kbfd-error); color: var(--kbfd-error); }
.kbfd-fav.is-on .kbfd-fav__mark { color: var(--kbfd-error); }

/* ---------------------------------------------------------------------------
   The courier app
   ---------------------------------------------------------------------------

   Bottom-weighted and oversized throughout. This is used one-handed, outdoors,
   often in motion, by somebody who should be looking somewhere else. Nothing
   here is smaller than 44px and the primary action is 64.
   --------------------------------------------------------------------------- */

.kbfd-rider {
    max-width: 560px;
    margin: 0 auto;
    padding-bottom: 40px;
}

.kbfd-rider .is-hidden { display: none !important; }

.kbfd-rider__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 14px;
    background: var(--kbfd-ink);
    color: #fff;
    border-radius: var(--kbfd-radius);
}

.kbfd-rider__shift { display: flex; align-items: center; gap: 10px; }
.kbfd-rider__shift strong { font-size: 1.125rem; }

.kbfd-rider__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #6b7280;
}

.kbfd-rider__dot.is-on { background: #4ade80; }

.kbfd-rider__toggle {
    min-height: 48px;
    padding: 0 22px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--kbfd-radius);
    background: transparent;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    text-transform: none;
    cursor: pointer;
}

.kbfd-rider__toggle.is-on { background: var(--kbfd-accent); border-color: var(--kbfd-accent); }

.kbfd-rider__blocked {
    padding: 12px 14px;
    margin-bottom: 14px;
    background: var(--kbfd-warn-bg);
    border-left: 4px solid var(--kbfd-warn);
    border-radius: var(--kbfd-radius);
    color: #78350f;
    font-weight: 600;
}

.kbfd-rider__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}

.kbfd-rider__stats > div {
    padding: 10px 8px;
    background: var(--kbfd-bg-soft);
    border-radius: var(--kbfd-radius);
    text-align: center;
    min-width: 0;
}

.kbfd-rider__stats span {
    display: block;
    font-size: 0.75rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-rider__stats strong { display: block; font-size: 1.0625rem; }

/* Offers */
.kbfd-offer {
    padding: 16px;
    margin-bottom: 14px;
    background: #fff;
    border: 1px solid var(--kbfd-line);
    border-left: 5px solid var(--kbfd-accent);
    border-radius: var(--kbfd-radius);
}

.kbfd-offer__pay {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.1;
}

.kbfd-offer__pay small {
    display: block;
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--kbfd-ink-soft);
}

.kbfd-offer__where {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin: 14px 0;
}

.kbfd-offer__where span {
    display: block;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kbfd-ink-soft);
}

.kbfd-offer__where strong { display: block; font-size: 1.0625rem; }
.kbfd-offer__where small { color: var(--kbfd-ink-soft); }

/* The current trip */
.kbfd-trip {
    padding: 20px 16px;
    background: #fff;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
}

.kbfd-trip__stage {
    margin: 0;
    font-size: 0.8125rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--kbfd-ink-soft);
}

.kbfd-trip__who { margin: 4px 0 6px; font-size: 1.5rem; text-transform: none; }
.kbfd-trip__address { margin: 0 0 10px; font-size: 1.125rem; }

.kbfd-trip__note {
    margin: 0 0 10px;
    padding: 10px 12px;
    background: var(--kbfd-warn-bg);
    border-radius: 6px;
    font-weight: 600;
    color: #78350f;
}

.kbfd-trip__pay { margin: 0 0 16px; color: var(--kbfd-ink-soft); }

/* The one big action. 64px because a thumb on a handlebar is not precise. */
.kbfd-rider__go {
    display: block;
    width: 100%;
    min-height: 64px;
    margin-top: 12px;
    border: 0;
    border-radius: var(--kbfd-radius);
    background: var(--kbfd-accent);
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    text-transform: none;
    cursor: pointer;
}

.kbfd-rider__go[disabled] { opacity: 0.6; }

.kbfd-rider__map {
    display: block;
    width: 100%;
    min-height: 52px;
    line-height: 52px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    text-align: center;
    font-weight: 700;
    color: var(--kbfd-ink);
}

.kbfd-rider__map:hover { border-color: var(--kbfd-accent); text-decoration: none; }

/* Secondary, and deliberately unremarkable — it must not compete with the
   action above it for a hurried thumb. */
.kbfd-rider__quiet {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 14px;
    border: 0;
    background: none;
    color: var(--kbfd-ink-soft);
    font-size: 0.9375rem;
    text-decoration: underline;
    text-transform: none;
    cursor: pointer;
}

.kbfd-rider__idle {
    padding: 36px 20px;
    text-align: center;
    color: var(--kbfd-ink-soft);
}

.kbfd-rider__offline {
    padding: 14px 16px;
    margin-top: 14px;
    background: var(--kbfd-error-bg);
    border-left: 4px solid var(--kbfd-error);
    border-radius: var(--kbfd-radius);
    color: #7f1d1d;
    font-weight: 600;
}

/* Join page */
.kbfd-join { max-width: 680px; margin: 0 auto; }
.kbfd-join h2 { margin: 28px 0 10px; font-size: 1.15rem; text-transform: none; }
.kbfd-join__list { margin: 0 0 8px; padding-left: 20px; }
.kbfd-join__list li { margin-bottom: 6px; }

/* ---------------------------------------------------------------------------
   Reviews and reports
   --------------------------------------------------------------------------- */

.kbfd-stars { font-size: 1.5rem; letter-spacing: 2px; color: var(--kbfd-line); margin: 0 0 8px; }
.kbfd-stars .is-on { color: #f59e0b; }

.kbfd-rate { display: flex; gap: 4px; margin-bottom: 14px; }

.kbfd-rate__star {
    /* 44px so a thumb can hit the difference between three and four stars. */
    min-width: 44px;
    min-height: 44px;
    border: 0;
    background: none;
    font-size: 2rem;
    line-height: 1;
    color: var(--kbfd-line);
    cursor: pointer;
    transition: color 0.12s ease;
}

.kbfd-rate__star.is-on { color: #f59e0b; }

.kbfd-reply {
    margin-top: 12px;
    padding: 12px 14px;
    background: var(--kbfd-bg-soft);
    border-left: 3px solid var(--kbfd-accent);
    border-radius: 0 var(--kbfd-radius) var(--kbfd-radius) 0;
}

.kbfd-reply strong { display: block; font-size: 0.875rem; color: var(--kbfd-ink-soft); }
.kbfd-reply p { margin: 4px 0 0; }

.kbfd-track__after-note { margin: 12px 0; font-size: 0.9375rem; }
.kbfd-track__after-note.is-ok { color: var(--kbfd-ok); }
.kbfd-track__after-note.is-error { color: var(--kbfd-error); }

.kbfd-input {
    display: block;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    font-size: 1rem;
}

/* details/summary as the disclosure for reporting a problem. Closed by
   default: most orders are fine, and an always-open complaint form invites
   complaints. */
[data-issue-box] summary {
    cursor: pointer;
    padding: 8px 0;
    /* The theme's summary marker is invisible against this background. */
    list-style: revert;
}

/* Merchant review feed */
.kbfd-feed { list-style: none; margin: 0; padding: 0; }

.kbfd-feed__item {
    padding: 16px 0;
    border-top: 1px solid var(--kbfd-line);
}

.kbfd-feed__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
}

.kbfd-feed__who { font-weight: 600; }
.kbfd-feed__when { color: var(--kbfd-ink-soft); font-size: 0.8125rem; margin-left: auto; }

/* Quality dashboard */
.kbfd-quality {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.kbfd-quality__card {
    padding: 14px;
    background: var(--kbfd-bg-soft);
    border-radius: var(--kbfd-radius);
}

.kbfd-quality__card span { display: block; font-size: 0.8125rem; color: var(--kbfd-ink-soft); }
.kbfd-quality__card strong { display: block; font-size: 1.625rem; line-height: 1.2; }
.kbfd-quality__card small { color: var(--kbfd-ink-soft); }
.kbfd-quality__card.is-good strong { color: var(--kbfd-ok); }
.kbfd-quality__card.is-poor strong { color: var(--kbfd-error); }

.kbfd-replybox { margin-top: 10px; }
.kbfd-replybox .kbfd-label { display: block; text-align: left; font-size: 0.8125rem; color: var(--kbfd-ink-soft); }
.kbfd-replybox .kbfd-btn { flex: 0 0 auto; min-height: 44px; }

/* ---------------------------------------------------------------------------
   Festivals and scheduled cooking
   --------------------------------------------------------------------------- */

.kbfd-moments {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    margin-bottom: 20px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
}

.kbfd-moment {
    flex: 0 0 auto;
    padding: 12px 16px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    background: #fff;
    color: inherit;
}

.kbfd-moment:hover { border-color: var(--kbfd-accent); text-decoration: none; color: inherit; }
.kbfd-moment.is-now { border-left: 4px solid var(--kbfd-accent); }
.kbfd-moment strong { display: block; }
.kbfd-moment span { font-size: 0.8125rem; color: var(--kbfd-ink-soft); }

.kbfd-slots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.kbfd-slots__day {
    padding: 12px;
    background: var(--kbfd-bg-soft);
    border-radius: var(--kbfd-radius);
}

.kbfd-slots__day.is-full { opacity: 0.6; }
.kbfd-slots__day > strong { display: block; margin-bottom: 6px; }

.kbfd-slots__slot {
    display: block;
    padding: 4px 0;
    font-size: 0.9375rem;
}

.kbfd-slots__slot small { display: block; color: var(--kbfd-ink-soft); font-size: 0.8125rem; }
.kbfd-slots__out { font-style: normal; color: var(--kbfd-ink-soft); }
.kbfd-slots__few { font-style: normal; font-weight: 700; color: var(--kbfd-warn); }
.kbfd-moment.is-active { border-color: var(--kbfd-accent); background: var(--kbfd-ok-bg); }

/* ===========================================================================
   Design-review fixes, 2026-08-24
   ===========================================================================

   Three of these were blockers found by measuring `elementFromPoint` at each
   button's centre rather than by looking at a screenshot — which is the only
   way this class of bug is ever found, because every one of them renders
   perfectly and simply cannot be tapped.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. The cart bar was eating the item sheet's Add button.

   `.kbfd-panel` (the item sheet) and `.kbfd-cartbar` were BOTH z-index 5200,
   so DOM order decided it and the bar — added later in the template — won. At
   390px the sheet's whole footer was covered: a customer configuring their
   second dish saw an option list ending in nothing, tapped where Add should be
   and was thrown to checkout with the item never added. At 1280 the floating
   pill sliced the Add button in half.

   Two fixes, because either alone leaves a bad edge:
     - the bar drops below the sheet and its backdrop, and
     - the bar is hidden outright while a sheet is open, since a "Go to
       checkout" competing with the sheet's own primary action is wrong even
       when it is not physically on top of it.

   It stays above the theme's consent bar (5101), which it must, or the same
   bug reappears with a different lid.
   --------------------------------------------------------------------------- */
.kbfd-cartbar {
    z-index: 5150;
}

.kbfd-shop.has-sheet-open .kbfd-cartbar {
    display: none;
}

/* ---------------------------------------------------------------------------
   2. The theme's consent bar was covering the terminal's Accept button.

   Measured at 390×844: the bar is fixed at bottom:0, 122px tall, z-index 5101,
   and the newest order's Accept button sat inside it — `elementFromPoint` at
   the button's top, middle AND bottom all returned the banner. A kitchen could
   not accept its first order. Worse, the banner's own dismiss button is the
   same #80b435 green 44px below, so the likely outcome was a merchant tapping
   the green thing they could see, believing they had accepted, while the
   acceptance countdown ran on toward auto-cancel.

   It is NOT hidden here. It is a consent control and hiding it would mean
   nobody can consent. On the two operator pages it becomes a compact card in
   the corner, out of the action column, and the board gets enough bottom
   padding that the last card's buttons can always be scrolled clear of it.
   --------------------------------------------------------------------------- */
/* First attempt was a 320px card pinned bottom-right. Re-measured: on a 390px
   screen a 320px card still lands on the Accept button, so that fixed nothing.
   It is un-pinned instead — it flows at the end of the document, where it is
   still visible, still readable and still dismissible, and covers nothing. A
   consent notice is not a modal, and on a surface somebody is working on it has
   no business floating over the controls. */
body:has(.kbfd-terminal) #poscookielaw,
body:has(.kbfd-rider) #poscookielaw {
    position: static;
    width: auto;
    margin: 24px 0 0;
    border-radius: var(--kbfd-radius);
}

/* The fallback for browsers without :has(): the padding alone still lets an
   operator scroll any button clear of a bar pinned to the bottom. */
.kbfd-terminal,
.kbfd-rider {
    padding-bottom: 180px;
}

@supports selector(body:has(div)) {
    /* With :has() the bar no longer floats, so the reserve is not needed and
       would only push the marketing footer further from the last order card. */
    .kbfd-terminal,
    .kbfd-rider {
        padding-bottom: 24px;
    }
}

/* ---------------------------------------------------------------------------
   3. White on #80b435 is 2.49:1 — it fails WCAG AA at every size.

   These are the two worst reading environments this product has: a tablet
   under kitchen fluoro and a phone in Sydney daylight. #5F8A28 keeps the brand
   hue and clears 4.5:1 against white.

   --kbfd-accent stays exactly as it is: it is correct as a border, a rule and
   a fill behind dark text, and changing it would repaint the whole module to
   fix a text problem.
   --------------------------------------------------------------------------- */
:root {
    --kbfd-cta: #5f8a28;
    --kbfd-cta-hover: #4f7620;
    /* 3.26:1 on white — used for status text and links, also below AA. */
    --kbfd-accent-text: #4f7620;
}

.kbfd-terminal .kbfd-btn--primary,
.kbfd-rider__go,
.kbfd-rider__toggle.is-on,
.kbfd-term__ctl--resume,
.kbfd-cartbar__go {
    background: var(--kbfd-cta);
    border-color: var(--kbfd-cta);
}

.kbfd-terminal .kbfd-btn--primary:hover,
.kbfd-rider__go:hover,
.kbfd-cartbar__go:hover {
    background: var(--kbfd-cta-hover);
    border-color: var(--kbfd-cta-hover);
}

.kbfd-orow__state,
.kbfd-nav__item--out {
    color: var(--kbfd-accent-text);
}

/* ---------------------------------------------------------------------------
   4. "See your page" sat 230px past the right edge of a 390px screen.

   The nav already scrolls, but with no fade, no arrow and no partial-item peek
   a merchant on a phone believes they have three tabs and never finds the
   other two. A gradient mask on the right edge is the smallest honest hint
   that there is more.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .kbfd-nav {
        position: relative;
        /* Room for the mask so the last visible label is not sitting under it. */
        padding-right: 28px;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
        mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
    }
}

/* ---------------------------------------------------------------------------
   5. The Today table ran off a 390px screen and could not be scrolled to.

   The panel clipped horizontally, so the Total column — the money — was simply
   unreachable on a phone. Every wide thing in this module now scrolls inside
   its own container rather than pushing the page.
   --------------------------------------------------------------------------- */
.kbfd-term__panel {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.kbfd-today__table {
    min-width: 480px;
}

/* ---------------------------------------------------------------------------
   6. The restaurant name was the only centred thing on a left-aligned page.

   theme.css centres h1. The heading also inherited line-height 1.0, so a
   two-line name — common with Nepali names — collided with the tagline under
   it.
   --------------------------------------------------------------------------- */
.kbfd-shop .kbfd-shop__name {
    /* Two classes deep on purpose: theme.css carries
       `.page-header h1, .card-block h1 { text-align: center }` at (0,1,1),
       which outranks a single class however late it is loaded. Measured — the
       one-class version lost. */
    text-align: left;
    line-height: 1.2;
}

/* theme.css capitalises h2, which turned "What people said" into "What People
   Said" and would mangle any merchant-entered heading. */
.kbfd-shop .kbfd-about h2,
.kbfd-shop h2,
.kbfd-terminal .kbfd-orders__h {
    text-transform: none;
}

/* ---------------------------------------------------------------------------
   7. The item sheet's own controls.

   The notes field was 160px wide inside a 390px sheet, clipping its own
   placeholder mid-word ("No coriander, extra spic"), and was the only element
   in the sheet at that width. The quantity stepper was 36px, under the 44px
   minimum for a thumb.
   --------------------------------------------------------------------------- */
#kbfd-notes {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0 12px;
    margin-top: 4px;
    border: 1px solid var(--kbfd-line);
    border-radius: var(--kbfd-radius);
    font-size: 1rem;
}

.kbfd-counter__btn,
#kbfd-qty-minus,
#kbfd-qty-plus {
    min-width: 44px;
    min-height: 44px;
}

/* The Add button was disabled until every required group was chosen, with
   nothing saying so — and it still showed the price, so it looked live. A
   first-timer taps it, nothing happens, and there is no way to find out why. */
.kbfd-sheet__why {
    margin: 0 0 8px;
    font-size: 0.9375rem;
    color: var(--kbfd-warn);
    text-align: center;
}

/* ---------------------------------------------------------------------------
   8. On the orders list, one green served every state.

   "Ready to collect" (go now, your food is getting cold) rendered identically
   to "Delivered" (done, ignore). Colour was carrying no information at all, so
   it now carries exactly one thing: whether this order needs the customer to
   do something.
   --------------------------------------------------------------------------- */
.kbfd-orow__state { color: var(--kbfd-ink-soft); font-weight: 600; }

.kbfd-orow--act { border-left-color: var(--kbfd-warn); }
.kbfd-orow--act .kbfd-orow__state { color: var(--kbfd-warn); font-weight: 700; }

.kbfd-orow__total { font-weight: 700; white-space: nowrap; }

/* ---------------------------------------------------------------------------
   9. Allergens were quieter than taste preferences on a kitchen ticket.

   "No coriander" rendered bold amber; "Gluten, Egg" rendered regular-weight
   red underneath it. One of those is a preference and one of them can put
   somebody in hospital, and the preference was winning the glance. The
   allergen line now gets the weight, a tint behind it and the word "Contains",
   so it cannot be read as just more grey detail.
   --------------------------------------------------------------------------- */
.kbfd-ticket__allergen {
    display: inline-block;
    margin-top: 2px;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--kbfd-error-bg);
    color: #7f1d1d;
    font-weight: 700;
    letter-spacing: 0.01em;
}

/* And the preference steps back a notch so the two are not shouting together.
   It stays clearly visible — it is still the thing that makes an order wrong. */
.kbfd-ticket__item em {
    font-weight: 600;
}

/* ===========================================================================
   Design round 2 — the items the first round recorded and did not fix
   =========================================================================== */

/* ---------------------------------------------------------------------------
   A. Photographs, and what to do when a kitchen has none yet.

   Dish photos were always supported; merchant logos and banners had columns
   and a renderer but no upload UI anywhere, so every merchant page was grey
   text under the theme's generic stock banner. Both are uploadable now — and
   until a merchant gets round to it, the page states its own identity instead
   of showing a gap.
   --------------------------------------------------------------------------- */
.kbfd-shop__banner--none {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    width: 100%;
    aspect-ratio: 3 / 1;
    max-height: 220px;
    padding: 16px;
    /* The brand's own two colours rather than a stock photograph: honest about
       having no picture, and still looks deliberate. */
    background: linear-gradient(135deg, var(--kbfd-ink) 0%, #35474e 55%, var(--kbfd-accent-dark) 100%);
    border-radius: var(--kbfd-radius);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9375rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.kbfd-shop__logo--none {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--kbfd-accent);
    color: #fff;
    font-size: 1.75rem;
    font-weight: 700;
    text-transform: uppercase;
}

/* The dish row. It has always been a button; it has never looked like one. */
.kbfd-item__media {
    position: relative;
    flex: 0 0 auto;
    width: 84px;
    height: 84px;
    border-radius: var(--kbfd-radius);
    overflow: hidden;
}

.kbfd-item__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kbfd-item__media--none {
    /* A plate, drawn in CSS. Better than an empty box and better than a stock
       photo of food this kitchen does not sell. */
    background:
        radial-gradient(circle at 50% 50%, transparent 0 26%, var(--kbfd-line) 26% 27%, transparent 27%),
        radial-gradient(circle at 50% 50%, transparent 0 38%, var(--kbfd-line) 38% 39%, transparent 39%),
        var(--kbfd-bg-soft);
}

/* The add cue, on every orderable row. */
.kbfd-item__add {
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    color: var(--kbfd-cta);
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
}

.kbfd-item__button:hover .kbfd-item__add {
    background: var(--kbfd-cta);
    color: #fff;
}

/* Settings: the upload pair. */
.kbfd-photos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 16px;
}

@media (min-width: 700px) {
    .kbfd-photos { grid-template-columns: 2fr 1fr; }
}

.kbfd-photo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.kbfd-photo .kbfd-label { text-align: left; font-weight: 600; }

.kbfd-photo__preview,
.kbfd-photo__empty {
    width: 100%;
    max-width: 180px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: var(--kbfd-radius);
    background: var(--kbfd-bg-soft);
    border: 1px dashed var(--kbfd-line);
}

.kbfd-photo__preview--wide,
.kbfd-photo__empty--wide { max-width: 100%; aspect-ratio: 3 / 1; }
.kbfd-photo__preview { border-style: solid; }

/* ---------------------------------------------------------------------------
   B. The operator bar.

   What replaces ~215px of storefront chrome on the terminal and the courier
   app: who you are, where you are, and the way out. Nothing else.
   --------------------------------------------------------------------------- */
.kbfd-operator {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 12px 24px;
}

.kbfd-operator__bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--kbfd-line);
    font-size: 0.9375rem;
}

.kbfd-operator__home {
    font-weight: 700;
    color: var(--kbfd-ink);
}

.kbfd-operator__home:hover { color: var(--kbfd-cta); text-decoration: none; }
.kbfd-operator__who { margin-left: auto; color: var(--kbfd-ink-soft); }
.kbfd-operator__out { color: var(--kbfd-ink-soft); text-decoration: underline; }

.kbfd-operator .kbfd-terminal,
.kbfd-operator .kbfd-rider {
    padding-top: 0;
}

/* ---------------------------------------------------------------------------
   C. Only one thing on the board should be shouting.

   Five cards previously carried five identical saturated fills: Accept (urgent,
   on a countdown), Food is ready (mid-flow), Waiting on the counter (a passive
   status that also read as a label). In a kitchen you scan for the ONE thing to
   act on, and nothing was winning that scan.

   Accept keeps the fill. Everything downstream becomes an outline in the same
   green — still obviously the primary action of its own card, but it no longer
   competes across the board with an order that is about to auto-cancel.
   --------------------------------------------------------------------------- */
.kbfd-lane:not(.kbfd-lane--new) .kbfd-terminal .kbfd-btn--primary,
.kbfd-terminal .kbfd-lane:not(.kbfd-lane--new) .kbfd-btn--primary {
    background: #fff;
    border: 2px solid var(--kbfd-cta);
    color: var(--kbfd-cta-hover);
}

.kbfd-terminal .kbfd-lane:not(.kbfd-lane--new) .kbfd-btn--primary:hover {
    background: var(--kbfd-cta);
    color: #fff;
}

/* Pickup and courier are operationally opposite and had the identical grey
   pill. A cook glancing at a ticket needs to know whether somebody is walking
   in for this or a rider is coming. */
.kbfd-ticket__mode { border: 1px solid transparent; }
.kbfd-ticket__mode--pickup { background: #e0f2fe; color: #075985; }
.kbfd-ticket__mode--self_delivery { background: #fef3c7; color: #78350f; }
.kbfd-ticket__mode--courier { background: #ede9fe; color: #5b21b6; }

/* An order 90 minutes into a 20-minute quote was rendered at the same weight
   as the order number. Age earns emphasis as it goes wrong. */
.kbfd-ticket__age.is-over { color: var(--kbfd-error); font-weight: 700; }

/* ---------------------------------------------------------------------------
   D. Australian conventions, and saying the good thing out loud.
   --------------------------------------------------------------------------- */

/* The page previously said nothing when a kitchen was open — a customer got
   only the absence of a warning, which is not a signal. */
.kbfd-openline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 14px;
    background: var(--kbfd-ok-bg);
    border-radius: var(--kbfd-radius);
    color: #14532d;
}

.kbfd-openline__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--kbfd-ok);
    flex: 0 0 auto;
}

/* "free" was the single best selling point on the page, rendered at 14px
   lowercase grey — quieter than the street address beside it. */
.kbfd-free {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 11px;
    background: var(--kbfd-ok-bg);
    color: var(--kbfd-ok);
    font-weight: 700;
}

/* GST is a component of an inclusive price, never an addition, so it sits
   under the total in a quieter voice — the way an Australian receipt reads. */
.kbfd-totals__gst {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    color: var(--kbfd-ink-soft);
}

.kbfd-totals__gst dt,
.kbfd-totals__gst dd { font-weight: 400; margin: 0; }

/* The rating is a top-three decision factor and was smaller than the address
   printed next to it. */
.kbfd-shop__facts .kbfd-rating {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--kbfd-ink);
}

.kbfd-shop__facts .kbfd-rating small { font-weight: 400; color: var(--kbfd-ink-soft); }

/* The facts line ran together with no separators — but only when it IS a line.
   At 390px the facts stack, and a separator at the end of each wrapped row
   reads as a stray typo rather than punctuation. */
@media (min-width: 768px) {
    .kbfd-shop__facts > span:not(:last-child)::after {
        content: "·";
        margin: 0 6px 0 8px;
        color: var(--kbfd-line);
    }
}


/* Printer check on the terminal toolbar. Reads as information, never as an
   alarm: a kitchen with no thermal printer is in a perfectly normal state. */
.kbfd-term__printer {
    margin: 8px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--kbfd-surface-2, #f4f4f4);
    border: 1px solid var(--kbfd-line, #e2e2e2);
    font-size: 0.9375rem;
}
.kbfd-term__printer.is-ok {
    background: var(--kbfd-ok-soft, #eef7e6);
    border-color: var(--kbfd-ok-line, #c5e0aa);
}
.kbfd-term__printer.is-hidden { display: none; }

/* Printer setup, shown only to a kitchen that has not got one working yet. */
.kbfd-term__printer-setup {
    margin: 8px 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--kbfd-surface-2, #f4f4f4);
    border: 1px solid var(--kbfd-line, #e2e2e2);
    font-size: 0.9375rem;
}
.kbfd-term__printer-setup p { margin: 0 0 8px; }
.kbfd-term__printer-setup ol { margin: 0 0 8px; padding-left: 20px; }
.kbfd-term__printer-setup li { margin-bottom: 6px; }
.kbfd-term__printer-reassure { color: var(--kbfd-ink-soft, #666); }
.kbfd-term__printer-setup.is-hidden { display: none; }

.kbfd-term__printer-pick {
    margin: 8px 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--kbfd-surface-2, #f4f4f4);
    border: 1px solid var(--kbfd-line, #e2e2e2);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.kbfd-term__printer-pick select {
    /* 44px, because this is used standing up on a tablet. */
    min-height: 44px;
    padding: 8px 10px;
    border-radius: 6px;
    border: 1px solid var(--kbfd-line, #e2e2e2);
    font: inherit;
    background: #fff;
    max-width: 100%;
}
.kbfd-term__printer-saved { color: var(--kbfd-ok, #4a7c1f); font-size: 0.875rem; }
.kbfd-term__printer-saved.is-hidden,
.kbfd-term__printer-pick.is-hidden { display: none; }