/* ============================================================
   MENU

   assets/css/menu.css

   Part of the Rodi Express child theme. Loaded by inc/enqueue.php.
   The homepage menu: filter bar, dietary badges, allergen tags,
   product cards and the product modal.
   ============================================================ */

/* ============================================================
   Fix: Related Products inside the product modal
   Targets the actual classes used by the plugin:
   .foodmaster-modern-related > ul.foodmaster-products
   ============================================================ */

/* Remove bullet points from the list */
.foodmaster-modern-related ul.foodmaster-products {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Each product row: flex layout, image + info + button in a line */
.foodmaster-modern-related ul.foodmaster-products li.foodmaster-product-loop {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--fm-border) !important;
    list-style: none !important;
}

.foodmaster-modern-related ul.foodmaster-products li.foodmaster-product-loop:last-child {
    border-bottom: none !important;
}

/* Thumbnail */
.foodmaster-modern-related ul.foodmaster-products li.foodmaster-product-loop .product-image img {
    width: 52px !important;
    height: 52px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    flex-shrink: 0 !important;
    display: block !important;
}

/* Let the product info grow */
.foodmaster-modern-related ul.foodmaster-products li.foodmaster-product-loop .product-title {
    flex: 1 !important;
    font-size: 0.85rem !important;
    line-height: 1.3 !important;
}

.foodmaster-modern-related ul.foodmaster-products li.foodmaster-product-loop .product-short-descr {
    font-size: 0.78rem !important;
    color: #666 !important;
    margin-top: 2px !important;
}

.foodmaster-modern-related ul.foodmaster-products li.foodmaster-product-loop .product-price {
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: var(--fm-primary) !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* Reset the oversized pill button */
.foodmaster-modern-related .foodmaster-quickview-button.button {
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    width: auto !important;
    /* Reset the 50px border-radius from the plugin */
    border-radius: 6px !important;
}
.foodmaster-modern-related ul.foodmaster-products li.foodmaster-product-loop .product-title span {
    font-weight: 700 !important;
}

/* ============================================================
   TWO-STATE DIETARY BADGES
   Colour arrives from PHP as --rodi-badge-color.
   --served    solid fill         = true as served
   --adaptable dashed outline + * = available on request
   ============================================================ */

.rodi-dietary-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 5px;
}

.rodi-dietary-badge {
    display: inline-block;
    font-size: 0.62rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
    border: 1px solid var(--rodi-badge-color, #555);
    cursor: help;
}

.rodi-dietary-badge--served {
    background: var(--rodi-badge-color, #555) !important;
    color: #fff !important;
}

.rodi-dietary-badge--adaptable {
    background: transparent !important;
    color: var(--rodi-badge-color, #555) !important;
    border-style: dashed;
}

.rodi-dietary-badge--adaptable::after {
    content: "*";
}

/* Diet tags inside the product modal */

.rodi-diet-tag {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 4px;
    line-height: 1.5;
    border: 1px solid var(--rodi-badge-color, #555);
    margin: 0 4px 4px 0;
}

.rodi-diet-tag--served {
    background: var(--rodi-badge-color, #555) !important;
    color: #fff !important;
}

.rodi-diet-tag--adaptable {
    background: transparent !important;
    color: var(--rodi-badge-color, #555) !important;
    border-style: dashed;
}

.rodi-diet-tag--adaptable::after {
    content: "*";
    margin-left: 2px;
}

.rodi-adaptable-note {
    margin: 8px 0 0;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #666;
}

.rodi-diet-section {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

.rodi-allergen-section {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.product-allergens .allergen-tag.rodi-allergen-tag {
    background: var(--rodi-badge-color, #c62828) !important;
    background-color: var(--rodi-badge-color, #c62828) !important;
    color: #fff !important;
    border: none !important;
}

/* ============================================================
   LONG DISH NAMES BREAKING MID-WORD
   FoodMaster sets word-break:break-word with min-width:100px on
   .product-title, so "Revithosalata" chopped as "Revithosalat/a".
   ============================================================ */

.wf-template-wrapper.wf-template-default-grid .wf-template-product .product-title {
    flex: 1 1 auto;
    min-width: 155px;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}

/* "Revithosalata" and "Spanakopitakia" are single words around
   150px at 16px semibold. hyphens:auto cannot help them - the
   browser's English dictionary has no break points for Greek
   loanwords, so it falls through to overflow-wrap and chops
   mid-word. The only real fix is enough room for the word, so
   the floor above is set just past their measured width. */

/* 769-1024px is where cards are tightest: the plugin keeps two
   columns right down to 768px, so the tablet band squeezes hardest.
   This is where "Revithosalata" breaks, not on phones. */
@media (min-width: 769px) and (max-width: 1024px) {

    .wf-template-wrapper.wf-template-default-grid .wf-template-product .product-title {
        min-width: 140px;
        font-size: 15px;
    }
}

/* At 768px the plugin collapses the grid to a single column, so the
   title has the full width and can go back to full size. */
@media (max-width: 768px) {

    .wf-template-wrapper.wf-template-default-grid .wf-template-product .product-title {
        min-width: 140px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {

    .wf-template-wrapper.wf-template-default-grid .wf-template-product .product-title {
        min-width: 0;
        font-size: 15px;
    }
}

/* ============================================================
   MENU FILTER BAR  [rodi_menu_filter]

   Resting state is a single row: search plus a Filters button.
   Everything else - diet chips, allergens, legend, kitchen
   statement - lives in a sheet that slides up on mobile and
   centres as a dialog on desktop.

   The previous version put nine chips inline. Scrolling them
   hid most of the filters; wrapping them pushed the menu below
   the fold. Neither is acceptable on a page whose job is to
   show food, so the controls collapse to one row instead.
   ============================================================ */

.rodi-fb {
    margin: 0 0 6px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--fm-border, #ececec);
}

.rodi-fb--sticky {
    position: sticky;
    top: 0;
    z-index: 90;
    background: #fff;
    padding-top: 10px;
}

/* ---- The one row ---- */

.rodi-fb-bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

.rodi-fb-search {
    position: relative;
    flex: 1;
    min-width: 0;
}

.rodi-fb-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: #a8a8a8;
    pointer-events: none;
}

.rodi-fb-search-input {
    width: 100%;
    height: 44px;
    padding: 0 14px 0 40px;
    border: 1px solid #e4e4e4;
    border-radius: 999px;
    background: #fff;
    font-size: 0.9rem;
    color: #2f2f2f;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    -webkit-appearance: none;
}

.rodi-fb-search-input::placeholder {
    color: #767676;
}

.rodi-fb-search-input:focus {
    border-color: var(--fm-primary, #cf2027);
    box-shadow: 0 0 0 3px rgba(207, 32, 39, 0.1);
}

.rodi-fb-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

/* ---- Filters button ---- */

.rodi-fb-open {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    height: 44px;
    padding: 0 18px;
    border-radius: 999px;
    border: 1px solid #e4e4e4;
    background: #fff;
    color: #2f2f2f;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.rodi-fb-open svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.rodi-fb-open:hover {
    border-color: #bdbdbd;
}

.rodi-fb.has-filters .rodi-fb-open {
    background: var(--fm-primary, #cf2027);
    border-color: var(--fm-primary, #cf2027);
    color: #fff;
}

.rodi-fb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: #fff;
    color: var(--fm-primary, #cf2027);
    font-size: 0.7rem;
    font-weight: 800;
}

.rodi-fb-badge[hidden] {
    display: none;
}

/* ---- Status line ---- */

.rodi-fb-status {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.rodi-fb-status[hidden] {
    display: none;
}

.rodi-fb-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: #555;
}

.rodi-fb-clear {
    height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--fm-primary, #cf2027);
    background: transparent;
    color: var(--fm-primary, #cf2027);
    font-size: 0.74rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    margin-left: auto;
}

.rodi-fb-clear:hover {
    background: var(--fm-primary, #cf2027);
    color: #fff;
}

/* ---- Scrim + sheet ---- */

.rodi-fb-scrim {
    position: fixed;
    inset: 0;
    z-index: 9998;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.rodi-fb-scrim.is-open {
    opacity: 1;
}

.rodi-fb-scrim[hidden] {
    display: none;
}

body.rodi-fb-locked {
    overflow: hidden;
}

.rodi-fb-sheet {
    position: fixed;
    z-index: 9999;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 40px rgba(0, 0, 0, 0.18);
    transform: translateY(100%);
    transition: transform 0.28s cubic-bezier(0.32, 0.72, 0, 1);
}

.rodi-fb-sheet.is-open {
    transform: translateY(0);
}

.rodi-fb-sheet[hidden] {
    display: none;
}

.rodi-fb-sheet-grip {
    width: 38px;
    height: 4px;
    border-radius: 2px;
    background: #dcdcdc;
    margin: 10px auto 4px;
    flex-shrink: 0;
}

.rodi-fb-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 18px 12px;
    border-bottom: 1px solid var(--fm-border, #ececec);
    flex-shrink: 0;
}

.rodi-fb-sheet-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #222;
}

.rodi-fb-close {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: #f4f4f4;
    color: #555;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}

.rodi-fb-close:hover {
    background: #ebebeb;
}

.rodi-fb-sheet-body {
    padding: 4px 18px 18px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
}

.rodi-fb-block {
    padding-top: 16px;
}

.rodi-fb-block + .rodi-fb-block {
    margin-top: 4px;
    border-top: 1px solid #f4f4f4;
}

.rodi-fb-block-title {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b6b6b;
    margin-bottom: 3px;
}

/* Tells people whether a group is one-of or stacking, so the radio
   behaviour is not a surprise when a chip releases on its own. */
.rodi-fb-block-note {
    display: block;
    font-size: 0.74rem;
    color: #6b6b6b;
    margin-bottom: 10px;
    line-height: 1.4;
}

/* ---- Diet dropdown: one choice, so a native select ---- */

.rodi-fb-select-wrap {
    position: relative;
}

.rodi-fb-select {
    width: 100%;
    height: 46px;
    padding: 0 40px 0 14px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background: #fff;
    color: #2f2f2f;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    outline: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rodi-fb-select:focus {
    border-color: var(--fm-primary, #cf2027);
    box-shadow: 0 0 0 3px rgba(207, 32, 39, 0.1);
}

.rodi-fb-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    color: #999;
    pointer-events: none;
}

/* ---- Checkbox rows: everything that stacks ---- */

.rodi-fb-rows {
    display: flex;
    flex-direction: column;
}

.rodi-fb-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 2px;
    border-bottom: 1px solid #f3f3f3;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.rodi-fb-row:last-child {
    border-bottom: none;
}

.rodi-fb-dot {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    flex-shrink: 0;
}

.rodi-fb-row-label {
    flex: 1;
    font-size: 0.88rem;
    color: #2f2f2f;
    line-height: 1.35;
}

/* The real input stays in the accessibility tree but is visually replaced
   by .rodi-fb-tick, so the whole row is a tap target. */
.rodi-fb-check {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.rodi-fb-tick {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid #dcdcdc;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.rodi-fb-check:checked ~ .rodi-fb-tick {
    background: var(--fm-primary, #cf2027);
    border-color: var(--fm-primary, #cf2027);
}

.rodi-fb-check:checked ~ .rodi-fb-tick::after {
    content: "";
    width: 5px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translateY(-1px);
}

.rodi-fb-check:focus-visible ~ .rodi-fb-tick {
    box-shadow: 0 0 0 3px rgba(207, 32, 39, 0.18);
}

/* Allergens are a long list, so keep those rows tighter. */
.rodi-fb-rows--allergen .rodi-fb-row {
    padding: 9px 2px;
}

.rodi-fb-rows--allergen .rodi-fb-dot {
    width: 16px;
    height: 16px;
    border-radius: 4px;
}

.rodi-fb-rows--allergen .rodi-fb-row-label {
    font-size: 0.84rem;
}

.rodi-fb-legend {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rodi-fb-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #666;
}

.rodi-fb-hint,
.rodi-fb-statement {
    margin: 10px 0 0;
    font-size: 0.76rem;
    line-height: 1.55;
    color: #888;
}

.rodi-fb-statement a {
    color: var(--fm-primary, #cf2027);
    font-weight: 600;
}

/* ---- Sheet footer ---- */

.rodi-fb-sheet-foot {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--fm-border, #ececec);
    background: #fff;
    flex-shrink: 0;
}

.rodi-fb-sheet-clear {
    border: none;
    background: none;
    color: #777;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 8px 4px;
    text-decoration: underline;
}

.rodi-fb-sheet-clear:hover {
    color: #333;
}

.rodi-fb-apply {
    flex: 1;
    height: 46px;
    border: none;
    border-radius: 10px;
    background: var(--fm-primary, #cf2027);
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.15s ease;
}

.rodi-fb-apply:hover {
    background: var(--fm-primary-hover, #b91c22);
}

/* ---- Empty state ---- */

.rodi-fb-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin-top: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    background: #fdf6e9;
    font-size: 0.83rem;
    line-height: 1.5;
    color: #6d4c41;
}

.rodi-fb-empty[hidden] {
    display: none;
}

.rodi-fb-empty strong {
    display: block;
    width: 100%;
    color: #b45309;
    font-size: 0.88rem;
}

.rodi-fb-empty span {
    flex: 1;
    min-width: 180px;
}

/* ---- Category match counts ---- */

.rodi-cat-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    margin-left: 10px;
    padding: 0 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.3);
    color: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    vertical-align: middle;
}

/* ---- Desktop: centre the sheet as a dialog ---- */

@media (min-width: 769px) {

    .rodi-fb-sheet {
        top: 50%;
        left: 50%;
        right: auto;
        bottom: auto;
        width: 480px;
        max-height: 78vh;
        border-radius: 16px;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
        transform: translate(-50%, -46%);
        opacity: 0;
        transition: transform 0.22s ease, opacity 0.22s ease;
    }

    .rodi-fb-sheet.is-open {
        transform: translate(-50%, -50%);
        opacity: 1;
    }

    .rodi-fb-sheet-grip {
        display: none;
    }

    .rodi-fb-sheet-head {
        padding-top: 16px;
    }
}

@media (max-width: 480px) {

    .rodi-fb-search-input {
        font-size: 16px; /* under 16px iOS zooms the page on focus */
    }

    .rodi-fb-open-label {
        display: none; /* icon and count only, to keep the row short */
    }

    .rodi-fb-open {
        padding: 0 14px;
    }
}

/* ============================================================
   FILTER RESULTS ON THE MENU
   ============================================================ */

.wf-template-product.rodi-hidden {
    display: none !important;
}

.rodi-empty-category {
    display: none !important;
}

.wf-template-product.rodi-flagged {
    background: #fff8e1;
    outline: 2px solid #f9a825;
    outline-offset: -2px;
    border-radius: 8px;
}

.rodi-flag-note {
    display: inline-block;
    margin-top: 5px;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #b71c1c;
    background: #ffebee;
    border-radius: 3px;
    padding: 2px 6px;
}

/* ---- Small phones (matches the plugin's own 480px tier) ---- */

@media (max-width: 480px) {

    .rodi-fb-search-input {
        height: 38px;
        font-size: 16px; /* under 16px iOS zooms the page on focus */
    }

    .rodi-fb-select {
        height: 44px;
        font-size: 16px; /* stops iOS zooming on focus */
    }

    .rodi-fb-row {
        padding: 12px 2px; /* a little taller: thumbs, not cursors */
    }

    .rodi-fb-legend {
        gap: 5px 12px;
    }

    .rodi-fb-legend-item,
    .rodi-fb-hint,
    .rodi-fb-statement {
        font-size: 0.72rem;
    }

    .rodi-fb-empty {
        padding: 11px 12px;
        font-size: 0.78rem;
    }

    .rodi-cat-count {
        min-width: 21px;
        height: 21px;
        margin-left: 7px;
        font-size: 0.68rem;
    }

    .rodi-flag-note {
        font-size: 0.64rem;
    }
}

/* ------------------------------------------------------------
   "Max 1 choice" hint on collapsed option groups.

   Plugin behaviour, not ours: inc/func/extra_options.php prints
   .foodmaster-choices-hint whenever a group has a maximum set,
   and it sits as a sibling of a.toggle, OUTSIDE ul.inner. The
   options hide when the accordion closes; the hint does not, so
   it hangs under a shut header as a stray pink bar.

   It only shows up once a group is set to Limited Choice with a
   maximum - before that there was no maximum, so nothing to
   print.

   Keep it, but show it where it is useful: inside the group
   while the customer is actually choosing. The error state is
   exempt, since that is exactly when the rule needs restating.
   ------------------------------------------------------------ */

.extra-options-accordion li[cat-id] > .foodmaster-choices-hint {
    display: none;
}

.extra-options-accordion li[cat-id]:has(> .inner.shown) > .foodmaster-choices-hint,
.extra-options-accordion li[cat-id].error > .foodmaster-choices-hint {
    display: block;
    margin: 0 20px 10px;
}

/* Fallback for browsers without :has() - hide only when the group is one we
   promoted and left collapsed, which is the case in the screenshot. */

.rodi-promoted:not(:has(.inner.shown)) > .foodmaster-choices-hint {
    display: none;
}

/* ------------------------------------------------------------
   Close the gap between the filter bar and the first category.

   Three things stack up there: the bar's own bottom margin
   (trimmed above), the accordion wrapper's top margin, and the
   spacing on whatever block the shortcode sits in - WordPress
   also tends to wrap a bare shortcode in a <p> with its own
   margins, and leave an empty <p> behind it.
   ------------------------------------------------------------ */

.foodmaster-accordion-layout,
.foodmaster-accordion-wrapper {
    margin-top: 0;
}

/* The shortcode's own paragraph wrapper, and the empty one
   WordPress often leaves after it. */

p:has(> .rodi-fb) {
    margin: 0 0 6px;
}

p:empty {
    display: none;
}

/* Any block immediately following the bar. */

.rodi-fb + * {
    margin-top: 0;
}

/* ------------------------------------------------------------
   The wrapper in between.

   .rodi-fb + * only matches a direct next sibling. The shortcode
   normally sits inside its own block wrapper, so the accordion
   is not a sibling of the bar at all - the space belongs to a
   container between them.

   :has() finds those containers by what they hold rather than by
   class name, which is the only reliable way to do it across
   Gutenberg, Elementor and the rest. body and html are excluded
   so page-level spacing is left alone.
   ------------------------------------------------------------ */

*:not(body):not(html):has(> .rodi-fb),
*:not(body):not(html):has(> * > .rodi-fb) {
    margin-bottom: 8px !important;
    padding-bottom: 0 !important;
}

*:not(body):not(html):has(> .foodmaster-accordion-layout),
*:not(body):not(html):has(> * > .foodmaster-accordion-layout),
*:not(body):not(html):has(> .foodmaster-accordion-wrapper) {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ------------------------------------------------------------
   Search bar - the obvious place to start

   The search is how most people find a dish, so it gets more
   presence: taller, a firmer border, the icon in brand red and
   a soft shadow lifting it off the page. The Filters button
   matches its height, outlined in red so it reads as the
   companion control. Both keep 16px text on phones, so iOS does
   not zoom in when the box is tapped.
   ------------------------------------------------------------ */

.rodi-fb-search-input {
    height: 52px;
    padding-left: 46px;
    border: 1.5px solid #d9d9d9;
    font-size: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.rodi-fb-search-input::placeholder {
    color: #8a8a8a;
}

.rodi-fb-search-input:focus {
    border-color: var(--fm-primary, #cf2027);
    box-shadow: 0 0 0 4px rgba(207, 32, 39, 0.12);
}

.rodi-fb-search-icon {
    left: 17px;
    width: 19px;
    height: 19px;
    color: var(--fm-primary, #cf2027);
}

.rodi-fb-open {
    height: 52px;
    padding: 0 20px;
    border: 1.5px solid var(--fm-primary, #cf2027);
    color: var(--fm-primary, #cf2027);
    font-size: 0.95rem;
}

.rodi-fb-open:hover {
    background: #fdf2f2;
}

/* ------------------------------------------------------------
   Line the search bar up with the basket panel

   The panel sits in the theme's sidebar, outside the page
   content, so any space the content column adds on top pushes
   the search below the panel's top edge. Nothing above the
   filter bar on the menu page should add any.
   ------------------------------------------------------------ */

.home .modern-page-body > :first-child,
.home .modern-page-body > p:first-child > .rodi-fb:first-child,
.home .rodi-fb {
    margin-top: 0 !important;
}

.home .modern-sidebar,
.home .modern-sidebar > .widget:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ------------------------------------------------------------
   Empty basket panel

   FoodMaster's empty state offers "Continue Shopping", linking to
   the shop page - which this site sends back to the menu. On the
   menu itself it just reloads the page, so it is hidden there.
   Elsewhere it stays, relabelled "See the menu" in
   inc/woocommerce.php.
   ------------------------------------------------------------ */

.home .foodmaster-mini-cart-empty .continue-shopping {
    display: none !important;
}

.foodmaster-mini-cart-empty .empty-message {
    max-width: 22ch;
    margin: 0 auto 12px;
    line-height: 1.5;
    color: #666;
}

@media (max-width: 600px) {

    .rodi-fb-search-input,
    .rodi-fb-open {
        height: 48px;
    }
}
/* =======================================================
   SIDE BASKET ("Your Order"): compact rows
   Photo on the left, name with quantity and price beside it, and the
   remove button in the corner, so far more dishes fit before scrolling.
   The list also uses the height of the screen instead of a fixed 300px.
======================================================= */

.foodmaster-mini-cart-items{max-height:min(calc(100vh - 360px), 520px)!important;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#e0b4b4 transparent}
.foodmaster-mini-cart-items::-webkit-scrollbar{width:6px}
.foodmaster-mini-cart-items::-webkit-scrollbar-thumb{background:#e0b4b4;border-radius:6px}

.foodmaster-mini-cart-item{position:relative!important;display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;gap:10px!important;align-items:start!important;padding:10px 30px 10px 4px!important;border-bottom:1px solid #f1f1f1!important}
.foodmaster-mini-cart-item:last-child{border-bottom:0!important}
.foodmaster-mini-cart-item .item-thumbnail{width:48px!important;height:48px!important;margin:0!important;border-radius:10px;overflow:hidden;background:#f6f6f6}
.foodmaster-mini-cart-item .item-thumbnail img{width:48px!important;height:48px!important;object-fit:cover;display:block}
.foodmaster-mini-cart-item .item-details{min-width:0;margin:0!important;padding:0!important}
.foodmaster-mini-cart-item .item-name{margin:0 0 6px!important;font-size:14px!important;font-weight:600;line-height:1.3;color:#212121}
.foodmaster-mini-cart-item .item-price-quantity{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:8px;margin:0!important}
.foodmaster-mini-cart-item .item-quantity{display:inline-flex!important;align-items:center;gap:4px;margin:0!important}
.foodmaster-mini-cart-item .quantity-btn{width:26px!important;height:26px!important;min-width:26px;padding:0!important;line-height:1!important;font-size:15px!important;border-radius:7px!important}
.foodmaster-mini-cart-item .item-quantity input{width:34px!important;height:26px!important;padding:0!important;text-align:center;font-size:13.5px!important}
.foodmaster-mini-cart-item .item-price{margin:0!important;font-size:14px!important;font-weight:700;color:#c62828;white-space:nowrap}
.foodmaster-mini-cart-item .item-price .tax_label{display:none}
.foodmaster-mini-cart-item .item-remove{position:absolute!important;top:8px!important;right:4px!important;margin:0!important}
.foodmaster-mini-cart-item .remove-item{width:22px!important;height:22px!important;min-width:22px;padding:0!important;border-radius:50%!important;font-size:14px!important;line-height:22px!important;opacity:.75}
.foodmaster-mini-cart-item .remove-item:hover{opacity:1}

/* Offers: tag on dishes, and the "spend £X more" line */
li.wf-template-product .rodi-offer-tag{display:inline-block!important;width:auto!important;margin:5px 0 0!important;padding:3px 9px!important;border-radius:999px!important;background:#c62828!important;color:#fff!important;font-size:11px!important;font-weight:800!important;line-height:1.3!important;letter-spacing:.3px;vertical-align:middle;white-space:nowrap;text-transform:uppercase}
.rodi-spend{display:flex;flex-direction:column;gap:4px;margin:8px 10px;padding:9px 12px;border-radius:10px;background:#fff8ee;border:1px solid #ffd8a8;font-size:13px;line-height:1.4}
.rodi-spend-ok{color:#2e7d32;font-weight:700}
.rodi-spend-next{color:#8a4a00}
.rodi-spend-next b{font-weight:800}
.foodmaster-menu-layout li.wf-template-product .product-title span.rodi-offer-tag,#rodi-fav-row li.wf-template-product .product-title span.rodi-offer-tag{color:#fff!important;-webkit-text-fill-color:#fff}

/* Offers: progress bar and banner above the menu */
.rodi-spend-bar{display:block;height:6px;margin-top:2px;border-radius:999px;background:#ffe3c2;overflow:hidden}
.rodi-spend-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ef6c00,#c62828);transition:width .5s ease}
.rodi-spend-bar.is-full i{background:#2e7d32}
.rodi-offers-banner{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px 16px;border-radius:14px;background:linear-gradient(135deg,#b71c1c 0%,#d32f2f 70%,#e57373 100%);color:#fff}
.rodi-ob-ic{flex-shrink:0;width:34px;height:34px;border-radius:10px;background:rgba(255,255,255,.18);position:relative}
.rodi-ob-ic::before{content:"";position:absolute;inset:8px;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.2'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.2'/%3E%3C/svg%3E") center/contain no-repeat}
.rodi-ob-list{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:14.5px;line-height:1.4}
.rodi-ob-item b{font-weight:800}
@media (max-width:600px){.rodi-offers-banner{padding:10px 12px}.rodi-ob-list{flex-direction:column;gap:2px;font-size:13.5px}}
.rodi-ob-item small{opacity:.85;font-size:12.5px}
.rodi-spend small{font-size:12px;opacity:.85}

/* Today's deals strip on the menu (swipe sideways on phones) */
.rodi-td{margin:0 0 16px}
.rodi-td-head{display:flex;align-items:baseline;justify-content:space-between;margin:0 0 8px}
.rodi-td-head h3{margin:0!important;font-size:18px!important;font-weight:800}
.rodi-td-head a{color:#c62828;font-weight:700;font-size:14px;text-decoration:none}
.rodi-td-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.rodi-td-card{flex:0 0 min(320px,82%);scroll-snap-align:start;display:flex;align-items:center;gap:12px;padding:12px;border-radius:16px;background:#fff;border:2px solid #c62828;box-shadow:0 4px 14px rgba(198,40,40,.12)}
.rodi-td-img{flex-shrink:0;width:72px;height:72px;border-radius:12px;background:#f5f5f5 center/cover no-repeat}
.rodi-td-info{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.rodi-td-info strong{font-size:15px;line-height:1.3}
.rodi-td-note,.rodi-td-hours{font-size:12.5px;color:#777}
.rodi-td-hours{color:#e65100;font-weight:700}
.rodi-td-price del{color:#999;font-size:13px}
.rodi-td-price b{color:#c62828;font-size:17px}
.rodi-td-add{flex-shrink:0;padding:10px 16px;border-radius:10px;background:#c62828;color:#fff!important;font-weight:800;text-decoration:none!important}
.rodi-td-add:hover{background:#b71c1c}
.rodi-td--later a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:#fff8ee;border:1px solid #ffd8a8;color:#8a4a00!important;font-weight:600;text-decoration:none!important}
.rodi-td-later-tag{padding:2px 9px;border-radius:999px;background:#c62828;color:#fff;font-size:11px;font-weight:800;text-transform:uppercase}

/* Chosen basket deal */
.rodi-spend-head{display:flex;align-items:center;justify-content:space-between;gap:8px;color:#5d1010}
.rodi-spend-drop{flex-shrink:0;font-size:12px;font-weight:700;color:#c62828!important}
.rodi-deal-toast{position:fixed;left:50%;bottom:24px;z-index:100000;display:flex;flex-direction:column;gap:2px;max-width:min(92vw,420px);padding:12px 18px;border-radius:14px;background:#1b5e20;color:#fff;box-shadow:0 10px 30px rgba(0,0,0,.25);transform:translate(-50%,140%);transition:transform .35s ease}
.rodi-deal-toast.is-in{transform:translate(-50%,0)}
.rodi-deal-toast span{font-size:13.5px;opacity:.9}
.rodi-spend-warn{padding:6px 8px;border-radius:8px;background:#fff3e0;color:#8a4a00;font-weight:600;font-size:12.5px}
.rodi-deal-show{color:#c62828!important;font-weight:700}

/* =======================================================
   PHONES AND TABLETS: THE MENU AS A LIST (below 1100px, either way up)
   PHONES: THE DISH SHEET
======================================================= */

@media (max-width:1099px){

  /* Every section open, with plain titles instead of red bars */
  .rodi-applist .foodmaster-menu-layout .foodmaster-accordion-item{margin:0 0 6px!important;background:none!important;box-shadow:none!important;border:0!important}
  .rodi-applist .foodmaster-menu-layout .foodmaster-accordion-header{background:none!important;padding:18px 2px 8px!important;border-radius:0!important;box-shadow:none!important;cursor:default;pointer-events:none}
  .rodi-applist .foodmaster-menu-layout .foodmaster-accordion-title{color:#212121!important;font-size:19px!important;font-weight:800!important;letter-spacing:-.2px;text-transform:none}
  .rodi-applist .foodmaster-menu-layout .foodmaster-accordion-header [class*="icon"],
  .rodi-applist .foodmaster-menu-layout .foodmaster-accordion-header svg,
  .rodi-applist .foodmaster-menu-layout .foodmaster-accordion-header .foodmaster-accordion-toggle{display:none!important}
  .rodi-applist .foodmaster-menu-layout .foodmaster-accordion-content{display:block!important;max-height:none!important;height:auto!important;overflow:visible!important;padding:0!important;background:none!important}

  /* Dish rows: words left, photo right */
  .rodi-applist .foodmaster-menu-layout ul.products,.rodi-applist .foodmaster-menu-layout .products{display:block!important;margin:0!important;padding:0!important}
  .rodi-applist .foodmaster-menu-layout .wf-template-wrapper.wf-template-default-grid{display:block!important;grid-template-columns:none!important}
  .rodi-applist li.wf-template-product{display:grid!important;grid-template-columns:minmax(0,1fr) 104px!important;grid-template-areas:"title photo" "descr photo" "price photo"!important;column-gap:14px!important;row-gap:2px!important;align-items:start!important;width:auto!important;margin:0!important;padding:14px 2px!important;border:0!important;border-bottom:1px solid #f0f0f0!important;border-radius:0!important;background:#fff!important;box-shadow:none!important;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .rodi-applist li.wf-template-product:active{background:#fafafa!important}
  .rodi-applist li.wf-template-product .product-title{grid-area:title;margin:0!important;font-size:15.5px!important;font-weight:700!important;line-height:1.3!important}
  .rodi-applist li.wf-template-product .product-short-descr{grid-area:descr;margin:0!important;color:#6b6b6b!important;font-size:13px!important;line-height:1.4!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .rodi-applist li.wf-template-product .product-price{grid-area:price;margin:6px 0 0!important;font-size:15px!important;font-weight:700!important;color:#212121!important;text-align:left!important}
  .rodi-applist li.wf-template-product .product-image{grid-area:photo;position:relative;width:104px!important;height:104px!important;margin:0!important;border-radius:14px;overflow:hidden;background:#f5f5f5}
  .rodi-applist li.wf-template-product .product-image img{width:104px!important;height:104px!important;object-fit:cover!important;border-radius:14px}
  /* the button becomes a round + on the photo */
  .rodi-applist li.wf-template-product .product-button{grid-area:photo;align-self:end;justify-self:end;position:relative;z-index:2;margin:0 6px 6px 0!important;width:auto!important}
  .rodi-applist li.wf-template-product .product-button .button,
  .rodi-applist li.wf-template-product .product-button button{width:34px!important;height:34px!important;min-width:0!important;padding:0!important;border-radius:50%!important;background:#fff!important;color:#c62828!important;border:0!important;box-shadow:0 2px 8px rgba(0,0,0,.18)!important;font-size:0!important;line-height:34px!important;text-align:center}
  .rodi-applist li.wf-template-product .product-button .button::before,
  .rodi-applist li.wf-template-product .product-button button::before{content:"+";display:block;font-size:24px;font-weight:700;line-height:34px;color:#c62828!important}
  .rodi-applist li.wf-template-product .product-button .added_to_cart{display:none!important}
  /* a dish with no photo: words take the full width */
  .rodi-applist li.wf-template-product:not(:has(.product-image img)){grid-template-columns:minmax(0,1fr) 44px!important}
  .rodi-applist li.wf-template-product:not(:has(.product-image img)) .product-image{display:none}
}

@media (max-width:782px){
  /* ---------- Dish sheet ---------- */
  #product_view.rodi-sheet[aria-hidden="true"]{display:none!important}
  #product_view.rodi-sheet .modal__overlay{position:fixed!important;inset:0!important;z-index:100001!important;display:flex!important;align-items:flex-end!important;justify-content:center!important;padding:0!important;background:rgba(0,0,0,.45)!important}
  #product_view.rodi-sheet .content{position:relative;display:flex!important;flex-direction:column;width:100%!important;max-width:100%!important;max-height:90vh!important;margin:0!important;padding:0!important;border-radius:22px 22px 0 0!important;background:#fff!important;overflow:hidden!important;animation:rodiSheetUp .32s cubic-bezier(.2,.8,.2,1);transition:transform .25s ease}
  #product_view.rodi-sheet .rodi-sheet-handle{position:absolute;top:0;left:0;right:0;z-index:5;height:22px;display:flex;justify-content:center;align-items:center}
  #product_view.rodi-sheet .rodi-sheet-handle span{width:42px;height:5px;border-radius:999px;background:rgba(255,255,255,.9);box-shadow:0 1px 4px rgba(0,0,0,.25)}
  #product_view.rodi-sheet .content > .image-column{flex-shrink:0;width:100%!important;max-width:100%!important;height:230px;margin:0!important;padding:0!important}
  #product_view.rodi-sheet .content > .image-column img{width:100%!important;height:230px!important;object-fit:cover!important;border-radius:0!important;display:block}
  #product_view.rodi-sheet .modal__header{position:relative;padding:16px 18px 4px!important;border:0!important;background:#fff!important}
  #product_view.rodi-sheet .modal__title{font-size:21px!important;font-weight:800!important;line-height:1.25!important;margin:0!important;padding-right:40px}
  #product_view.rodi-sheet .modal__close{position:absolute!important;top:14px;right:14px;width:34px!important;height:34px!important;padding:0!important;border:0!important;border-radius:50%!important;background:#f2f2f2!important;color:#333!important}
  #product_view.rodi-sheet .modal__close::before{content:"\00d7";font-size:22px;line-height:34px}
  #product_view.rodi-sheet .modal__container{flex:1;min-height:0;overflow-y:auto!important;-webkit-overflow-scrolling:touch;width:100%!important;max-width:100%!important;max-height:none!important;margin:0!important;padding:0 18px 12px!important;border-radius:0!important;box-shadow:none!important}
  #product_view.rodi-sheet .modal__content{display:block!important;margin:0!important;padding:0!important}
  #product_view.rodi-sheet .column-50-wf{width:100%!important;max-width:100%!important;float:none!important;padding:0!important}
  #product_view.rodi-sheet .price{font-size:18px!important;font-weight:800!important;color:#c62828!important;margin:2px 0 8px!important}
  #product_view.rodi-sheet .woocommerce-product-details__short-description{color:#555;font-size:14.5px;line-height:1.55}
  #product_view.rodi-sheet .quantity input.qty{height:44px!important;min-width:56px;font-size:17px!important;border-radius:10px!important}
  #product_view.rodi-sheet .modal__footer{position:sticky;bottom:0;z-index:3;margin:0!important;padding:10px 16px calc(12px + env(safe-area-inset-bottom,0px))!important;background:#fff!important;border-top:1px solid #f0f0f0!important;box-shadow:0 -6px 16px rgba(0,0,0,.05)}
  #product_view.rodi-sheet .single_add_to_cart_button{width:100%!important;height:52px!important;border-radius:14px!important;font-size:16.5px!important;font-weight:800!important;background:#c62828!important;color:#fff!important}
  html.rodi-sheet-open,html.rodi-sheet-open body{overflow:hidden!important}
  html.rodi-sheet-open .rodi-tabbar{display:none}
}
@keyframes rodiSheetUp{from{transform:translateY(100%)}to{transform:none}}

/* "Added" message */
.rodi-added{position:fixed;left:50%;bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:100002;padding:10px 18px;border-radius:999px;background:#1b5e20;color:#fff;font-weight:700;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.25);transform:translate(-50%,20px);opacity:0;transition:transform .25s ease,opacity .25s ease}
.rodi-added.is-in{transform:translate(-50%,0);opacity:1}
@media (max-width:782px){
  #product_view.rodi-sheet .content > .image-column:not(:has(img)){display:none!important}
  #product_view.rodi-sheet .content:not(:has(> .image-column img)) .rodi-sheet-handle span{background:#ddd;box-shadow:none}
}

/* Filters button: a funnel icon and a clear name on every screen */
.rodi-fb-open{display:inline-flex!important;align-items:center;gap:8px;white-space:nowrap}
.rodi-fb-open-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#fdecea;color:#c62828;flex-shrink:0}
.rodi-fb-open-ic svg{width:17px!important;height:17px!important}
.rodi-fb.has-filters .rodi-fb-open-ic{background:#fff;color:#c62828}
.rodi-fb-open-short{display:none}
@media (max-width:480px){
  .rodi-fb-open{padding:0 12px 0 8px!important;gap:6px}
  .rodi-fb-open-label{display:none!important}
  .rodi-fb-open-short{display:inline;font-weight:700;font-size:14px}
  .rodi-fb-open-ic{width:26px;height:26px}
}

/* Phones and tablets: the dish "+" buttons always stay under the basket bar and tabs */
@media (max-width:1099px){
  /* Each dish row is its own layer at level 0, so its "+" can never rise
     above FoodMaster's basket bar or our tabs. FoodMaster's own bar is
     left exactly as FoodMaster draws it. */
  .rodi-applist li.wf-template-product{position:relative!important;z-index:0!important}
  .rodi-applist li.wf-template-product .product-button{z-index:1!important}

  /* the photo fills its rounded square, with no grey frame around it */
  .rodi-applist li.wf-template-product .product-image{background:none!important;box-shadow:none!important;border:0!important;padding:0!important;overflow:hidden!important}
  .rodi-applist li.wf-template-product .product-image > *{width:104px!important;height:104px!important;margin:0!important;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
  .rodi-applist li.wf-template-product .product-image img{display:block;border:0!important;box-shadow:none!important}
}

/* Phones: with every section open, only draw what's near the screen.
   (Not on wider screens: there, sections popping in as they come into
   view made the page jump while scrolling.) */
@media (max-width:782px){
  .rodi-applist .foodmaster-menu-layout .foodmaster-accordion-item{content-visibility:auto;contain-intrinsic-size:auto 600px}
}

/* "Can be made this way on request": say "option" in words instead of an
   asterisk, which on UK menus reads as "see the small print". */
.rodi-dietary-badge--adaptable::after{content:" option"!important;text-transform:lowercase;font-weight:600;letter-spacing:0}
.rodi-diet-tag--adaptable::after{content:" option"!important;margin-left:0!important}

/* Phones: measure against the visible screen, not the screen with the
   browser bars hidden, so the basket list never runs under them. */
@supports (height: 100dvh) {
    .foodmaster-mini-cart-items{max-height:min(calc(100dvh - 360px), 520px)!important}
}


/* Phones (and the list wherever it's used): a clear "Quick add" button
   under each dish photo (the round + on the photo opens the dish,
   49-dish-plus.js). Dishes with something to choose open the dish; the others go straight into the basket
   (43-list-quick-add.js) and the button says "Added" for a moment. */
@media (max-width:1099px){
  .rodi-applist li.wf-template-product{grid-template-areas:"title photo" "descr photo" "price btn"!important;row-gap:2px!important}
  .rodi-applist li.wf-template-product:not(:has(.product-image img)){grid-template-columns:minmax(0,1fr) 104px!important;grid-template-areas:"title btn" "descr btn" "price btn"!important}
  .rodi-applist li.wf-template-product .product-button{grid-area:btn!important;align-self:center!important;justify-self:stretch!important;margin:8px 0 0!important;width:auto!important;position:relative;z-index:1}
  .rodi-applist li.wf-template-product .product-button form{margin:0!important;width:100%!important;display:block!important}
  .rodi-applist li.wf-template-product .product-button .button,
  .rodi-applist li.wf-template-product .product-button button{display:block!important;width:100%!important;height:36px!important;min-width:0!important;padding:0!important;border-radius:999px!important;background:#fff!important;border:1.5px solid #c62828!important;box-shadow:none!important;font-size:0!important;line-height:33px!important;text-align:center!important;transition:background .15s,color .15s}
  .rodi-applist li.wf-template-product .product-button .button::before,
  .rodi-applist li.wf-template-product .product-button button::before{content:"Quick add"!important;display:block;font-size:14px!important;font-weight:800!important;line-height:33px!important;color:#c62828!important;letter-spacing:.1px}
  .rodi-applist li.wf-template-product[data-quick="0"] .product-button .button::before,
  .rodi-applist li.wf-template-product[data-quick="0"] .product-button button::before{content:"Quick add"!important}
  /* The theme turns buttons solid red when tapped or focused, which hid the
     red words: the button stays white with red words, whatever its state. */
  .rodi-applist li.wf-template-product .product-button .button,
  .rodi-applist li.wf-template-product .product-button button{-webkit-tap-highlight-color:transparent;outline:none!important}
  .rodi-applist li.wf-template-product .product-button .button:hover,
  .rodi-applist li.wf-template-product .product-button button:hover,
  .rodi-applist li.wf-template-product .product-button .button:focus,
  .rodi-applist li.wf-template-product .product-button button:focus,
  .rodi-applist li.wf-template-product .product-button .button:focus-visible,
  .rodi-applist li.wf-template-product .product-button button:focus-visible{background:#fff!important;border-color:#c62828!important;color:#c62828!important;box-shadow:none!important;outline:none!important;transform:none!important}
  .rodi-applist li.wf-template-product .product-button .button:active,
  .rodi-applist li.wf-template-product .product-button button:active{background:#fdecea!important;box-shadow:none!important;outline:none!important}
  .rodi-applist li.wf-template-product .product-button .button:focus-visible,
  .rodi-applist li.wf-template-product .product-button button:focus-visible{box-shadow:0 0 0 3px #f6d3d0!important}
  .rodi-applist li.wf-template-product .product-button .rodi-busy{opacity:.55;pointer-events:none}
  .rodi-applist li.wf-template-product .product-button .button.rodi-done,
  .rodi-applist li.wf-template-product .product-button button.rodi-done{background:#2e7d32!important;border-color:#2e7d32!important}
  .rodi-applist li.wf-template-product .product-button .button.rodi-done::before,
  .rodi-applist li.wf-template-product .product-button button.rodi-done::before{content:"\2713  Added"!important;color:#fff!important}
}

/* =======================================================
   Screens between phones and tablets (14 Oct 2026)
   - 680 to 782px (big phones sideways, small tablets): the dish list in
     two columns instead of one very wide one.
======================================================= */
@media (min-width: 680px) and (max-width: 782px) {
  html.rodi-applist .foodmaster-menu-layout .wf-template-wrapper.wf-template-default-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;column-gap:22px!important}
}

/* =======================================================
   Dish photos and tablets (15 Oct 2026, from the full check)
   - Phones and tablets: FoodMaster's own style keeps dish photos at most
     65px wide, so in the list each photo showed as a thin strip in its
     104px box. Now the photo fills its box.
   - Tablets (783 to 1099px, touch screens): the dishes are the same rows
     as on a phone (name and price on the left, photo and "+ Add" on the
     right) instead of big cards with a photo across the top. One row each
     upright, two side by side when the tablet is turned (1000px and up).
     So a tablet looks the same whichever way it is held, and the same as
     a small tablet or a big phone.
======================================================= */
@media (max-width: 1099px) {
  html.rodi-applist li.wf-template-product .product-image img{width:104px!important;height:104px!important;max-width:none!important;min-width:0!important;max-height:none!important}
}
@media (min-width: 783px) and (max-width: 1099px) {
  html.rodi-applist:not(.rodi-dk) .foodmaster-menu-layout .wf-template-wrapper.wf-template-default-grid{display:grid!important;grid-template-columns:minmax(0,1fr)!important;column-gap:28px!important;row-gap:0!important}
  html.rodi-applist:not(.rodi-dk) .foodmaster-menu-layout .wf-template-wrapper.wf-template-default-grid ul.wf-template-products{display:contents!important}
  html.rodi-applist:not(.rodi-dk) li.wf-template-product{width:auto!important;max-width:none!important;margin:0!important;padding:14px 2px!important;border:0!important;border-bottom:1px solid #f0f0f0!important;border-radius:0!important;box-shadow:none!important;background:#fff!important}
  html.rodi-applist:not(.rodi-dk) li.wf-template-product .product-title,
  html.rodi-applist:not(.rodi-dk) li.wf-template-product .rodi-title-row,
  html.rodi-applist:not(.rodi-dk) li.wf-template-product h3{word-break:normal!important;overflow-wrap:normal!important;hyphens:manual!important}
}
@media (min-width: 1000px) and (max-width: 1099px) {
  html.rodi-applist:not(.rodi-dk) .foodmaster-menu-layout .wf-template-wrapper.wf-template-default-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

/* =======================================================
   Small tablets and phones turned sideways (15 Oct 2026)
   783 to 1099px wide, touch screens only (computers keep their layout).
   On the menu, "Your Order" no longer sits beside the dishes: the menu
   uses the whole width and the basket is a bar along the bottom of the
   screen (45-tablet-basket-bar.js), shown once something is added.
   Tapping the bar opens the basket. Nothing sticks inside the page, so
   there is nothing for an iPhone to redraw while scrolling.
======================================================= */
.rodi-tab-basket{display:none}
@media (min-width: 783px) and (max-width: 1099px) and (pointer: coarse) {
  html.rodi-applist:not(.rodi-dk) body:has(.foodmaster-menu-layout) .modern-sidebar{display:none!important}
  html.rodi-applist:not(.rodi-dk) body:has(.foodmaster-menu-layout) .modern-content-area{flex:1 1 100%!important;max-width:100%!important;width:100%!important}
  html.rodi-applist:not(.rodi-dk) body:has(.foodmaster-menu-layout) .modern-content-wrapper{gap:0!important}
  /* With the whole width, two dishes side by side from 820px. */
  html.rodi-applist:not(.rodi-dk) body:has(.foodmaster-menu-layout) .foodmaster-menu-layout .wf-template-wrapper.wf-template-default-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  html.rodi-applist:not(.rodi-dk) .rodi-tab-basket:not([hidden]){display:flex;align-items:center;gap:14px;position:fixed;left:0;right:0;bottom:0;z-index:9990;padding:12px max(20px,env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) max(20px,env(safe-area-inset-left,0px));background:#fff;border-top:1px solid #ececec;box-shadow:0 -4px 18px rgba(0,0,0,.08);color:#212121;text-decoration:none!important;font-size:15px;-webkit-tap-highlight-color:transparent}
  html.rodi-applist:not(.rodi-dk) .rodi-tab-basket .rtb-n{color:#6b6b6b;font-weight:600}
  html.rodi-applist:not(.rodi-dk) .rodi-tab-basket .rtb-total{font-weight:800;font-size:17px}
  html.rodi-applist:not(.rodi-dk) .rodi-tab-basket .rtb-go{margin-left:auto;background:#c62828;color:#fff;font-weight:800;padding:10px 22px;border-radius:999px;font-size:15px}
  html.rodi-applist:not(.rodi-dk) .rodi-tab-basket:active .rtb-go{background:#a91f1f}
  /* Room at the bottom so the last dishes aren't hidden behind the bar. */
  html.rodi-tab-basket-on.rodi-applist:not(.rodi-dk) body{padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))!important}
}
/* Phones sideways are short: a slimmer bar. */
@media (min-width: 783px) and (max-width: 1099px) and (max-height: 500px) and (pointer: coarse) {
  html.rodi-applist:not(.rodi-dk) .rodi-tab-basket:not([hidden]){padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))}
  html.rodi-applist:not(.rodi-dk) .rodi-tab-basket .rtb-go{padding:8px 18px}
  html.rodi-tab-basket-on.rodi-applist:not(.rodi-dk) body{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))!important}
}

/* =======================================================
   Phones and tablets (15 Oct 2026)
   1. The search box and "Allergies & diet" stay at the top while
      scrolling, under the category tabs (46-sticky-search.js says
      exactly where).
   2. The page can't be dragged or bounce sideways: on touch screens it
      only moves up and down.
======================================================= */
html.rodi-fb-stick #rodi-fb{position:sticky;z-index:49;background:#fff;margin:0 0 6px!important;padding:8px 0 10px!important;box-shadow:-40px 0 0 #fff,40px 0 0 #fff,0 6px 8px -8px rgba(0,0,0,.18)}
/* The allergy sheet opens above everything else, as before. */
html.rodi-fb-stick body.rodi-fb-locked #rodi-fb{z-index:10000}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  html.rodi-fb-stick #rodi-fb{padding:4px 0 6px!important}
  html.rodi-fb-stick #rodi-fb .rodi-fb-search-input{height:38px}
  html.rodi-fb-stick #rodi-fb .rodi-fb-open{height:38px!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important}
}
@media (max-width: 1099px) and (pointer: coarse) {
  html{overflow-x:hidden;overscroll-behavior-x:none}
  body{overflow-x:clip;overscroll-behavior-x:none;max-width:100%}
}
/* If WordPress wraps the bar in a paragraph, the paragraph would hold it
   back; this lets the bar stay at the top for the whole menu. */
html.rodi-fb-stick .modern-page-body > p:has(> #rodi-fb){display:contents}

/* =======================================================
   Phones turned sideways (15 Oct 2026): one steady block at the top.
   The header stays at the top, and on the menu one slim row under it
   holds the search, "Allergies" and the category tabs side by side.
   They are fixed to the screen (not "sticky" inside the page), which
   iPhones keep perfectly still while scrolling; sticky bars and the
   blurred background behind the tabs were what flickered.
   Header 48px + row 46px = 94px, about a quarter of the screen.
======================================================= */
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
  html body .modern-header{position:fixed!important;top:0!important;left:0!important;right:0!important;z-index:1000!important;height:48px!important;background:#fff!important;box-shadow:0 1px 0 #eee!important;-webkit-transform:translateZ(0);transform:translateZ(0);padding-top:0!important;padding-bottom:0!important;padding-left:env(safe-area-inset-left,0px)!important;padding-right:env(safe-area-inset-right,0px)!important;box-sizing:border-box}
  .modern-header .container,.modern-header .header-content{height:48px!important;min-height:0!important;padding-top:0!important;padding-bottom:0!important;align-items:center!important}
  .modern-header .header-logo img{max-height:34px!important;width:auto!important}
  body{padding-top:48px!important}
  html:not(.rodi-dk) body:has(#rodi-fb){padding-top:94px!important}

  html:not(.rodi-dk) .rodi-cats,html:not(.rodi-dk) .rodi-cats.rodi-cats--top{position:fixed!important;top:48px!important;left:calc(38% + 4px)!important;right:0!important;height:46px!important;margin:0!important;padding:0 max(12px,env(safe-area-inset-right,0px)) 0 4px!important;align-items:center!important;background:#fff!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:0 4px 8px -6px rgba(0,0,0,.15)!important;border-bottom:1px solid #eee!important;z-index:999!important;-webkit-transform:translateZ(0);transform:translateZ(0);box-sizing:border-box}
  html:not(.rodi-dk) #rodi-fb{position:fixed!important;top:48px!important;left:0!important;width:calc(38% + 4px)!important;height:46px!important;margin:0!important;padding:0 6px 0 max(12px,env(safe-area-inset-left,0px))!important;display:flex!important;align-items:center!important;background:#fff!important;border-bottom:1px solid #eee!important;box-shadow:0 4px 8px -6px rgba(0,0,0,.15)!important;z-index:999!important;-webkit-transform:translateZ(0);transform:translateZ(0);box-sizing:border-box}
  html:not(.rodi-dk) body.rodi-fb-locked #rodi-fb{z-index:10000!important;-webkit-transform:none;transform:none}
  html:not(.rodi-dk) #rodi-fb .rodi-fb-bar{width:100%;gap:6px!important}
  html:not(.rodi-dk) #rodi-fb .rodi-fb-search-input{height:34px!important;font-size:14px!important;padding-left:34px!important}
  html:not(.rodi-dk) #rodi-fb .rodi-fb-search-icon{left:11px!important;width:15px!important;height:15px!important}
  html:not(.rodi-dk) #rodi-fb .rodi-fb-open{height:34px!important;min-height:0!important;padding:0 10px!important;gap:5px!important;font-size:13px!important;flex:0 0 auto;white-space:nowrap}
  html:not(.rodi-dk) #rodi-fb .rodi-fb-open-ic{width:22px!important;height:22px!important}
  html:not(.rodi-dk) .rodi-cats button{padding:5px 11px!important;font-size:12.5px!important}
  /* "Allergies & diet" shortened to "Allergies" here, so the search box keeps its room. */
  html:not(.rodi-dk) #rodi-fb .rodi-fb-open-label{font-size:0!important}
  html:not(.rodi-dk) #rodi-fb .rodi-fb-open-label::after{content:"Allergies";font-size:13px}
}
/* Smaller phones turned sideways: a little more room for the search. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 782px) and (pointer: coarse) {
  html:not(.rodi-dk) #rodi-fb{width:calc(44% + 4px)!important}
  html:not(.rodi-dk) .rodi-cats,html:not(.rodi-dk) .rodi-cats.rodi-cats--top{left:calc(44% + 4px)!important}
}

/* =======================================================
   Computers (15 Oct 2026): the search and "Allergies & diet" stay at the
   top of the menu column while scrolling, level with the sections list and
   the basket (46-sticky-search.js says where). White above it, so dishes
   don't show in the gap under the header.
======================================================= */
html.rodi-dk.rodi-fb-stick #rodi-fb,
html.rodi-dk.rodi-fb-stick .rdk-main .rodi-fb{position:sticky!important;z-index:14;background:#fff;margin:0 0 16px!important;padding:10px 0 12px!important;box-shadow:0 -16px 0 #fff,0 8px 10px -10px rgba(0,0,0,.2)!important}
html.rodi-dk.rodi-fb-stick body.rodi-fb-locked #rodi-fb{z-index:10000}
html.rodi-dk.rodi-fb-stick .rdk-main > p:has(> #rodi-fb),
html.rodi-dk.rodi-fb-stick .modern-page-body > p:has(> #rodi-fb){display:contents}
/* Smaller laptops: no dishes peeping through the thin gap above the
   sections bar either. */
@media (min-width: 783px) and (max-width: 1279px) {
  html.rodi-dk.rodi-fb-stick .rdk-nav.rdk-nav-bar{box-shadow:0 -10px 0 #fff,0 6px 18px rgba(0,0,0,.06)!important}
}

/* ------------------------------------------------------------
   Extras (assets/js/features/48-extras-cards.js), 16 Oct 2026
   Like a food-ordering app: each group is a panel with a heading and a
   short label ("Required · choose 1", "Up to 3", "Optional"), and the
   choices are rows in a list: name on the left, price and a round
   (one choice) or square (several) tick on the right. Free "leave out"
   groups are small pills. FoodMaster's own boxes and dropdowns stay in
   the page (hidden) and still carry the order.
   ------------------------------------------------------------ */

.rx-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

ul.extra-options-accordion:has(> li.rx-grp) {
    display: grid !important;
    gap: 14px;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    list-style: none !important;
    background: none !important;
}

.extra-options-accordion > li.rx-grp {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid #ececec !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: none !important;
    list-style: none !important;
    overflow: hidden;
}

.rx-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 11px;
    background: #faf8f6;
    border-bottom: 1px solid #f0ece8;
}

.extra-options-accordion .rx-head .rx-title {
    flex: 1;
    min-width: 0;
    margin: 0 !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: #1f1f1f !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.rx-badge {
    flex: 0 0 auto;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.6;
    white-space: nowrap;
}

.rx-badge.is-req { background: #fdecea; color: #c62828; }
.rx-badge.is-ok  { background: #e8f5e9; color: #1b5e20; }
.rx-badge.is-opt { background: #efefef; color: #6b6b6b; }

.extra-options-accordion li.rx-grp > .inner {
    display: block !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    overflow: visible !important;
}

.rx-opts {
    display: block;
}

.rx-o {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 52px;
    margin: 0 !important;
    padding: 10px 14px !important;
    border: 0 !important;
    border-top: 1px solid #f2f2f2 !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: #1f1f1f !important;
    font: inherit !important;
    text-align: left;
    text-transform: none !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .12s;
}

.rx-o:first-child { border-top: 0 !important; }
.rx-o:hover { background: #fcfaf9 !important; }
.rx-o:active { background: #fdf3f2 !important; }
.rx-o:focus-visible { outline: 3px solid #f2b8b5; outline-offset: -3px; }

.rx-name {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
}

.rx-price {
    flex: 0 0 auto;
    font-size: 14px;
    font-weight: 600;
    color: #8a8a8a;
    white-space: nowrap;
}

/* The tick sits on the right, after the price. */
.rx-ind {
    order: 3;
    position: relative;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    border: 2px solid #cfcfcf;
    border-radius: 7px;
    background: #fff;
    transition: background-color .12s, border-color .12s;
}

.rx-one .rx-ind { border-radius: 50%; }

.rx-o.on .rx-name { font-weight: 800; }
.rx-o.on .rx-price { color: #c62828; }

.rx-one .rx-o.on .rx-ind { border-color: #c62828; border-width: 7px; }

.rx-many .rx-o.on .rx-ind {
    border-color: #c62828;
    background: #c62828;
}

.rx-many .rx-o.on .rx-ind::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2.5px 2.5px 0;
    transform: rotate(45deg);
}

.rx-o.dim,
.rx-o[disabled] {
    cursor: default;
}

.rx-o.dim .rx-name,
.rx-o.dim .rx-price,
.rx-o.dim .rx-ind { opacity: .4; }

/* Free "leave out" groups: small pills in a row. */
.rx-chips .rx-opts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 14px 14px;
}

.rx-chips .rx-o {
    width: auto;
    min-height: 38px;
    padding: 7px 14px !important;
    border: 1.5px solid #e6e6e6 !important;
    border-radius: 999px !important;
    gap: 6px;
}

.rx-chips .rx-ind,
.rx-chips .rx-price { display: none; }

.rx-chips .rx-name { font-size: 14px; font-weight: 700; }

.rx-chips .rx-o.on {
    border-color: #1f1f1f !important;
    background: #1f1f1f !important;
    color: #fff !important;
}

.rx-chips .rx-o.on .rx-name::before { content: "✓ "; }

/* Add pressed before a required choice: that group is marked. */
.extra-options-accordion > li.rx-grp.rx-missing,
.extra-options-accordion > li.rx-grp.error {
    border-color: #e9a29d !important;
    outline: 0 !important;
    box-shadow: 0 0 0 3px #fdecea !important;
}

.extra-options-accordion > li.rx-grp.rx-missing .rx-badge,
.extra-options-accordion > li.rx-grp.error .rx-badge {
    background: #c62828;
    color: #fff;
}

.extra-options-accordion > li.rx-grp.rx-missing .rx-badge {
    animation: rx-nudge .4s ease 2;
}

@keyframes rx-nudge {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* FoodMaster's "Please select at least 1 option" box: the group's own
   label turns red and says what's needed instead. */
ul.extra-options-accordion:has(> li.rx-grp) > .wf_requiremnts_error {
    display: none !important;
}

.rx-form textarea.foodmaster_additional_comments {
    width: 100%;
    margin: 14px 0 6px !important;
    padding: 12px 14px !important;
    border: 1px solid #ececec !important;
    border-radius: 16px !important;
    font-size: 15px !important;
    min-height: 0 !important;
    resize: vertical;
}

.rx-form .single_add_to_cart_button,
.rx-form .foodmaster-add-to-cart-btn {
    text-transform: none !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
}

/* 16 Oct 2026: how many to choose under the name, chosen rows tinted,
   prices in a small pill, the label shows what was chosen. */
.rx-ht { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rx-how { font-size: 12.5px; font-weight: 600; color: #7a7a7a; }
.rx-badge { max-width: 52%; overflow: hidden; text-overflow: ellipsis; }
.rx-o.on { background: #fff6f5 !important; }
.rx-chips .rx-o.on { background: #1f1f1f !important; }
.rx-price:not(:empty) {
    padding: 2px 8px;
    border-radius: 999px;
    background: #f4f4f4;
    font-size: 13px;
    font-weight: 700;
    color: #555;
}
.rx-o.on .rx-price:not(:empty) { background: #fde2df; color: #b71c1c; }
.rx-grp.rodi-promoted .rx-o.on { background: #f3faf3 !important; }
.rx-grp.rodi-promoted .rx-o.on .rx-price:not(:empty) { background: #dcefdc; color: #1b5e20; }
.extra-options-accordion > li.rx-grp:not(.rx-done) .rx-head { box-shadow: inset 4px 0 0 #c62828; }
.extra-options-accordion > li.rx-grp.rodi-promoted .rx-how::after { content: " · allergy and diet swaps"; color: #2e7d32; }

@media (prefers-reduced-motion: reduce) {
    .rx-o, .rx-ind { transition: none; }
    .extra-options-accordion > li.rx-grp.rx-missing .rx-badge { animation: none; }
}


/* ------------------------------------------------------------
   Round "+" on every dish photo (49-dish-plus.js), 16 Oct 2026:
   always opens the dish, to choose extras or add a note.
   ------------------------------------------------------------ */
li.wf-template-product .product-image { position: relative; }
.rodi-plus {
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 2;
    width: 34px;
    height: 34px;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: #fff !important;
    color: #c62828 !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .2) !important;
    font: 700 24px/34px system-ui, sans-serif !important;
    text-align: center;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background-color .15s, color .15s;
}
/* Phones size everything in the photo box to the photo: not this. */
html li.wf-template-product .product-image > .rodi-plus {
    position: absolute !important;
    inset: auto 6px 6px auto !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 0 !important;
    max-width: none !important;
    background: #fff !important;
    border-radius: 50% !important;
    object-fit: initial !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .22) !important;
    transform: none;
}
html li.wf-template-product .product-image > .rodi-plus:hover { background: #c62828 !important; }
html.rodi-dk .rdk-main li.wf-template-product .product-image > .rodi-plus { inset: auto 10px 12px auto !important; width: 38px !important; height: 38px !important; }
.rodi-plus::before { content: "+"; display: block; line-height: 33px; }
.rodi-plus:hover { background: #c62828 !important; color: #fff !important; }
.rodi-plus:active { transform: scale(.94); }
.rodi-plus:focus-visible { outline: 3px solid #f2b8b5; outline-offset: 2px; }
html.rodi-dk .rdk-main li.wf-template-product .rodi-plus { right: 10px; bottom: 12px; width: 38px; height: 38px; }
html.rodi-dk .rdk-main li.wf-template-product .rodi-plus::before { line-height: 37px; }

/* ------------------------------------------------------------
   Allergens and diet in the dish pop-up (16 Oct 2026)
   One panel (50-dish-allergy-panel.js): "Contains" with each allergen as
   a pill with its coloured dot, and "Suitable for" with the diet tags;
   dishes that can be made a certain way say "on request".
   ------------------------------------------------------------ */
.rodi-info-gone { display: none !important; }
.rodi-info {
    margin: 14px 0 6px;
    padding: 2px 14px;
    border: 1px solid #f1e3cc;
    border-radius: 16px;
    background: #fffaf2;
}
.rodi-info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
}
.rodi-info-row + .rodi-info-row { border-top: 1px solid #f3e8d6; }
.rodi-info-k {
    flex: 0 0 104px;
    padding-top: 4px;
    font-size: 13px;
    font-weight: 800;
    color: #1f1f1f;
    white-space: nowrap;
}
.rodi-info-row--al .rodi-info-k::before {
    content: "!";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border-radius: 50%;
    background: #e8a33d;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
    vertical-align: 1px;
}
.rodi-info-row--diet .rodi-info-k::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    border-radius: 50%;
    background: #43a047 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3l2.2 2.2 4.8-5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
    vertical-align: -3px;
}
.rodi-info .rodi-info-v {
    display: flex !important;
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 !important;
}
.rodi-info .allergen-tag.rodi-allergen-tag {
    display: inline-block !important;
    margin: 0 !important;
    padding: 3px 10px 3px 22px !important;
    border: 1px solid #ecdcc3 !important;
    border-radius: 999px !important;
    background: #fff radial-gradient(circle, var(--rodi-badge-color, #c62828) 0 4px, transparent 4.5px) 7px 50% / 10px 10px no-repeat !important;
    color: #2b2b2b !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.rodi-info .rodi-diet-tag {
    display: inline-block !important;
    margin: 0 !important;
    padding: 3px 10px !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;
}
.rodi-info .rodi-diet-tag--served {
    background: #f1f8f1 !important;
    border: 1px solid #cfe5cf !important;
    color: #1b5e20 !important;
}
.rodi-info .rodi-diet-tag--adaptable {
    background: #fff !important;
    border: 1px dashed #a9d1aa !important;
    color: #2e7d32 !important;
}
.rodi-info .rodi-diet-tag--adaptable::after { content: " option" !important; margin-left: 0 !important; }
.rodi-info-note {
    margin: 0 0 10px !important;
    padding-left: 116px;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: #6b6b6b !important;
}
@media (max-width: 480px) {
    .rodi-info-row { flex-direction: column; gap: 6px; }
    .rodi-info-k { flex-basis: auto; padding-top: 0; }
    .rodi-info-note { padding-left: 0; }
}
ul.extra-options-accordion.rodi-empty { display: none !important; }

/* "Make it..." (diet and allergy swaps, moved to the top by
   01-menu-filters.js): a green heading so it reads as the allergy and
   diet choice, not another extra. */
.extra-options-accordion > li.rx-grp.rodi-promoted {
    border-color: #cfe5cf !important;
}
.extra-options-accordion > li.rx-grp.rodi-promoted .rx-head {
    background: #f1f8f1;
    border-bottom-color: #dcecdc;
}

.rx-grp.rodi-promoted.rx-one .rx-o.on .rx-ind { border-color: #2e7d32; }
.rx-grp.rodi-promoted.rx-many .rx-o.on .rx-ind { border-color: #2e7d32; background: #2e7d32; }
.rx-grp.rodi-promoted .rx-o.on .rx-price { color: #2e7d32; }

/* FoodMaster zooms the dish photo slightly on hover (and on phones after a
   tap): switched off everywhere, so the photo stays still. */
.wf-template-wrapper.wf-template-default-grid .wf-template-product:hover .product-image img {
    transform: none !important;
}

/* ------------------------------------------------------------
   Allergies, the same look everywhere (16 Oct 2026)
   Allergens are white pills with their coloured dot, written "Dairy"
   (not "DAIRY"); chosen ones turn light red with a tick; warnings sit in
   a cream panel with an orange "!". The same look is used in the dish
   pop-up, the menu filter, the dish marks, the basket and checkout, and
   "My allergies".
   ------------------------------------------------------------ */

/* Menu filter: allergens as pills you tap. */
.rodi-fb-rows.rodi-fb-rows--allergen {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0 4px;
}
.rodi-fb-rows--allergen .rodi-fb-row {
    position: relative;
    gap: 8px;
    padding: 7px 12px 7px 11px !important;
    border: 1.5px solid #e9e3da !important;
    border-radius: 999px;
    background: #fff;
    transition: border-color .15s, background-color .15s;
}
.rodi-fb-rows--allergen .rodi-fb-row:last-child { border-bottom: 1.5px solid #e9e3da !important; }
.rodi-fb-rows--allergen .rodi-fb-dot {
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
}
.rodi-fb-rows--allergen .rodi-fb-row-label {
    display: block;
    flex: 0 1 auto;
    font-size: 14px !important;
    font-weight: 700;
    color: #2b2b2b;
    text-transform: lowercase;
}
.rodi-fb-rows--allergen .rodi-fb-row-label::first-letter { text-transform: uppercase; }
.rodi-fb-rows--allergen .rodi-fb-tick { display: none; }
.rodi-fb-rows--allergen .rodi-fb-row.is-on,
.rodi-fb-rows--allergen .rodi-fb-row:has(.rodi-fb-check:checked) {
    border-color: #c62828 !important;
    background: #fdecea;
}
.rodi-fb-rows--allergen .rodi-fb-row.is-on .rodi-fb-row-label,
.rodi-fb-rows--allergen .rodi-fb-row:has(.rodi-fb-check:checked) .rodi-fb-row-label { color: #b71c1c; }
.rodi-fb-rows--allergen .rodi-fb-row.is-on .rodi-fb-tick,
.rodi-fb-rows--allergen .rodi-fb-row:has(.rodi-fb-check:checked) .rodi-fb-tick {
    display: flex;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 0;
    background: #c62828;
}
.rodi-fb-rows--allergen .rodi-fb-row:has(.rodi-fb-check:focus-visible) { box-shadow: 0 0 0 3px rgba(198, 40, 40, .2); }
/* Diet rows: round dots like the allergens. */
.rodi-fb-rows:not(.rodi-fb-rows--allergen) .rodi-fb-dot { width: 12px; height: 12px; border-radius: 50%; }

/* Dishes with a ticked allergen: marked, never hidden. */
.wf-template-product.rodi-flagged {
    background: #fffaf2 !important;
    outline: 1.5px solid #f1d9a6 !important;
    outline-offset: -1.5px;
    border-radius: 14px;
}
.rodi-flag-note {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-top: 6px !important;
    padding: 3px 10px 3px 4px !important;
    border: 1px solid #f1d9a6;
    border-radius: 999px !important;
    background: #fff !important;
    color: #8a4b00 !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    line-height: 1.4;
}
.rodi-flag-note::before {
    content: "!";
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e8a33d;
    color: #fff;
    font-size: 11px;
    font-weight: 900;
    line-height: 16px;
    text-align: center;
}

/* Phones and tablets (the dish list): a marked dish gets a cream row with
   an orange edge rather than a box drawn round it. */
html.rodi-applist .wf-template-product.rodi-flagged {
    outline: 0 !important;
    border-radius: 0 !important;
    box-shadow: inset 4px 0 0 #e8a33d !important;
    padding-left: 12px !important;
}

/* ------------------------------------------------------------
   Allergy choices in the extras (16 Oct 2026), e.g. "Your allergies,
   tick any so the kitchen can avoid them": the cream panel and pills
   with coloured dots used for allergens everywhere; a ticked one turns
   light red with a tick.
   ------------------------------------------------------------ */
.extra-options-accordion > li.rx-grp.rx-allergy { border-color: #f1e3cc !important; background: #fffdf9 !important; }
.extra-options-accordion > li.rx-grp.rx-allergy .rx-head { background: #fffaf2; border-bottom-color: #f3e8d6; }
.extra-options-accordion > li.rx-grp.rx-allergy .rx-title {
    display: flex !important;
    align-items: center;
    gap: 7px;
}
.extra-options-accordion > li.rx-grp.rx-allergy .rx-title::before {
    content: "!";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e8a33d;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 18px;
    text-align: center;
}
.rx-sub { font-size: 13px; font-weight: 600; color: #6b4a14; line-height: 1.35; }
.rx-allergy .rx-how { color: #8a7a62; }
.rx-chips.rx-allergy .rx-opts { gap: 7px; }
.rx-chips.rx-allergy .rx-o {
    min-height: 36px;
    padding: 6px 13px 6px 11px !important;
    border: 1.5px solid #ecdcc3 !important;
    background: #fff !important;
    color: #2b2b2b !important;
    gap: 7px;
}
.rx-dot { flex: 0 0 10px; width: 10px; height: 10px; border-radius: 50%; }
.rx-chips.rx-allergy .rx-name { font-size: 14px; font-weight: 700; }
.rx-chips.rx-allergy .rx-o.on {
    border-color: #c62828 !important;
    background: #fdecea !important;
    color: #b71c1c !important;
}
.rx-chips.rx-allergy .rx-o.on .rx-name::before { content: none; }
.rx-chips.rx-allergy .rx-o.on::after {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #c62828 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.3l2.6 2.6L13 6.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.extra-options-accordion > li.rx-grp.rx-allergy .rx-badge.is-ok { background: #fdecea; color: #b71c1c; }

/* "Related Products" under the Add button in the dish pop-up: the same
   rounded look as the rest (16 Oct 2026). */
.foodmaster-modern-related {
    margin-top: 22px !important;
    padding-top: 16px;
    border-top: 1px solid #f0f0f0;
}
.foodmaster-modern-related h3 {
    margin: 0 0 6px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}
.foodmaster-modern-related li.foodmaster-product-loop .product-image img {
    border-radius: 12px !important;
}
.foodmaster-modern-related li.foodmaster-product-loop .product-button .button,
.foodmaster-modern-related li.foodmaster-product-loop .product-button a,
.foodmaster-modern-related li.foodmaster-product-loop .product-button button {
    height: 34px !important;
    min-height: 0 !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    border: 1.5px solid #c62828 !important;
    background: #fff !important;
    color: #c62828 !important;
    box-shadow: none !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    line-height: 31px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}
.foodmaster-modern-related li.foodmaster-product-loop .product-button .button:hover,
.foodmaster-modern-related li.foodmaster-product-loop .product-button a:hover,
.foodmaster-modern-related li.foodmaster-product-loop .product-button button:hover {
    background: #c62828 !important;
    color: #fff !important;
}

/* ------------------------------------------------------------
   Every extras group in its own soft-coloured frame (16 Oct 2026),
   like the allergy choices. The colour says what kind of choice it is:
     required (e.g. "Served with")  soft red with a "*", turns green with a tick once chosen
     paid extras (sides, dips)      soft blue, with a "+"
     free "leave out" choices       light grey
     "Make it..." swaps             green
     your allergies                 cream (above)
   The choices sit on white inside the frame.
   ------------------------------------------------------------ */
.extra-options-accordion > li.rx-grp {
    --rx-bg: #f5f8fd;
    --rx-line: #dbe5f3;
    --rx-ic: #2f6fb7;
    --rx-ic-t: "+";
    border: 1px solid var(--rx-line) !important;
    border-radius: 18px !important;
    background: var(--rx-bg) !important;
}
.extra-options-accordion > li.rx-grp.rx-req { --rx-bg: #fff6f5; --rx-line: #f4d3cf; --rx-ic: #c62828; --rx-ic-t: "*"; }
.extra-options-accordion > li.rx-grp.rx-req.rx-done { --rx-bg: #f4faf4; --rx-line: #d3e9d3; --rx-ic: #2e7d32; --rx-ic-t: "\2713"; }
.extra-options-accordion > li.rx-grp.rx-chips:not(.rx-allergy) { --rx-bg: #f7f7f7; --rx-line: #e6e6e6; --rx-ic: #8a8a8a; --rx-ic-t: "\2212"; }
.extra-options-accordion > li.rx-grp.rodi-promoted { --rx-bg: #f3faf3; --rx-line: #cfe5cf; --rx-ic: #2e7d32; --rx-ic-t: "\21C4"; }
.extra-options-accordion > li.rx-grp.rx-allergy { --rx-bg: #fffaf2; --rx-line: #f1e3cc; }

.extra-options-accordion > li.rx-grp .rx-head {
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    padding: 13px 14px 9px !important;
}
.extra-options-accordion > li.rx-grp:not(.rx-allergy) .rx-title {
    display: flex !important;
    align-items: center;
    gap: 8px;
}
.extra-options-accordion > li.rx-grp:not(.rx-allergy) .rx-title::before {
    content: var(--rx-ic-t);
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--rx-ic);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    line-height: 20px;
    text-align: center;
}
.extra-options-accordion > li.rx-grp .rx-how { padding-left: 28px; }
.extra-options-accordion > li.rx-grp.rx-allergy .rx-how,
.extra-options-accordion > li.rx-grp.rx-allergy .rx-sub { padding-left: 25px; }
.extra-options-accordion > li.rx-grp.rodi-promoted .rx-how::after { content: none; }

/* The choices on white inside the frame. */
.extra-options-accordion > li.rx-grp:not(.rx-chips) .rx-opts {
    margin: 0 10px 10px;
    border: 1px solid var(--rx-line);
    border-radius: 13px;
    background: #fff;
    overflow: hidden;
}
.extra-options-accordion > li.rx-grp.rx-chips .rx-opts { padding: 2px 14px 14px; }
.extra-options-accordion > li.rx-grp.rx-chips:not(.rx-allergy) .rx-o { background: #fff !important; }
.extra-options-accordion > li.rx-grp.rx-chips:not(.rx-allergy) .rx-o.on { background: #1f1f1f !important; }

/* Ticked rows: a light tint of the group's own colour. */
.extra-options-accordion > li.rx-grp.rx-opt:not(.rodi-promoted) .rx-o.on { background: #f3f7fd !important; }
.extra-options-accordion > li.rx-grp.rx-opt:not(.rodi-promoted) .rx-many .rx-o.on .rx-ind,
.extra-options-accordion > li.rx-grp.rx-opt.rx-many:not(.rodi-promoted) .rx-o.on .rx-ind { border-color: #2f6fb7; background: #2f6fb7; }
.extra-options-accordion > li.rx-grp.rx-opt.rx-one:not(.rodi-promoted) .rx-o.on .rx-ind { border-color: #2f6fb7; }
.extra-options-accordion > li.rx-grp.rx-opt:not(.rodi-promoted) .rx-o.on .rx-price:not(:empty) { background: #dfe9f7; color: #1f4f8a; }
.extra-options-accordion > li.rx-grp.rx-req.rx-done .rx-o.on { background: #f4faf4 !important; }
.extra-options-accordion > li.rx-grp.rx-req.rx-done .rx-o.on .rx-ind { border-color: #2e7d32; }
.extra-options-accordion > li.rx-grp.rx-req.rx-done.rx-many .rx-o.on .rx-ind { background: #2e7d32; }
.extra-options-accordion > li.rx-grp.rx-req.rx-done .rx-o.on .rx-price:not(:empty) { background: #dcefdc; color: #1b5e20; }
.extra-options-accordion > li.rx-grp.rx-opt .rx-badge.is-ok { background: #dfe9f7; color: #1f4f8a; }

/* Required and not chosen yet when Add is pressed: the frame is marked. */
.extra-options-accordion > li.rx-grp.rx-missing,
.extra-options-accordion > li.rx-grp.error {
    border-color: #e57373 !important;
    box-shadow: 0 0 0 3px #fdecea !important;
}
/* A chosen pill keeps its colour while the mouse is over it. */
.extra-options-accordion > li.rx-grp.rx-chips:not(.rx-allergy) .rx-o.on:hover { background: #1f1f1f !important; color: #fff !important; }
.extra-options-accordion > li.rx-grp.rx-chips.rx-allergy .rx-o.on:hover { background: #fdecea !important; }
.extra-options-accordion > li.rx-grp.rx-req:not(.rx-done) .rx-title::before { font-size: 17px; line-height: 23px; }

/* ===== Dish pop-up: final polish ===== */
/* No empty coloured bar on top: the close button sits on the photo. */
.foodmaster-modern-modal-header {
    position: absolute !important;
    top: 0; right: 0; left: auto !important;
    width: auto !important;
    margin: 0 !important;
    padding: 12px !important;
    background: transparent !important;
    border-radius: 0 !important;
    z-index: 30;
}
.foodmaster-modern-modal-close {
    width: 38px !important; height: 38px !important;
    background: #fff !important;
    color: #222 !important;
    box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.foodmaster-modern-modal-close:hover { background: #f4f4f4 !important; }
.foodmaster-modern-modal-close svg { stroke: currentColor; }
.foodmaster-modern-title { padding-right: 46px; line-height: 1.25 !important; }
.foodmaster-modern-add-to-cart { margin-top: 18px !important; }
.foodmaster-modern-content-section form.rx-form > ul.extra-options-accordion { margin-top: 0 !important; padding-top: 0 !important; }
@media (max-width: 380px) {
    .foodmaster-modern-content-section .foodmaster-cart-row .single_add_to_cart_button { font-size: 15px !important; padding-left: 8px !important; padding-right: 8px !important; }
    .foodmaster-cart-row .modern-qty-input { width: 40px !important; }
}

/* Add pressed too early: the button says what's still needed. */
.foodmaster-modern-content-section .single_add_to_cart_button.rx-need,
.foodmaster-modern-content-section .single_add_to_cart_button.rx-need:hover {
    background: #fff4ee !important;
    color: #c2410c !important;
    box-shadow: inset 0 0 0 2px #ffc3a6 !important;
}
.single_add_to_cart_button.rx-need .foodmaster-btn-text { overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 768px) {
    /* Photo across the top of the sheet, not a tall square. */
    .foodmaster-modern-image-section {
        margin: -1rem -1rem 0 !important;
        width: auto !important;
        max-width: none !important;
    }
    .foodmaster-modern-image-section img {
        aspect-ratio: 16 / 10;
        max-height: 260px;
        object-fit: cover;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    /* The grab line stayed put over the choices while scrolling. */
    .foodmaster-modern-modal-container::before { display: none !important; }
    .foodmaster-modern-content-section .single_add_to_cart_button.rx-need { font-size: 15px !important; padding-left: 10px !important; padding-right: 10px !important; }
    .foodmaster-modern-title { padding-right: 0; }
}

@media (min-width: 769px) {
    /* Photo stays in view while the choices scroll. */
    .foodmaster-modern-image-section {
        position: sticky !important;
        top: 2rem;
        align-self: flex-start;
    }
    /* Quantity and Add stay at the bottom of the pop-up. */
    .rx-form .foodmaster-cart-row {
        position: sticky;
        bottom: 0;
        z-index: 6;
        background: #fff;
        margin: 10px 0 -2rem !important;
        padding: 14px 0 18px !important;
        border-top: 1px solid #eee;
    }
}

/* The allergy filter sheet on phones: its Clear all / Show results buttons
   sit above the bottom tab bar, not behind it. */
body.rodi-fb-locked .rodi-tabbar,
body.rodi-fb-locked.has-rodi-tabbar::after{display:none!important}