/* ============================================================
   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;
}

/* -------------------------------------------------------
   Allergen disclaimer at checkout
------------------------------------------------------- */
.rodi-allergen-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff8e1;
    border: 1px solid #f9a825;
    border-left: 4px solid #f9a825;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 20px;
}

.rodi-allergen-notice .rodi-allergen-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    line-height: 1;
}

.rodi-allergen-notice p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #5d4037;
}

.rodi-allergen-notice strong {
    color: #e65100;
}

/* Allergen notice on checkout page */
.rodi-allergen-notice-static {
    background: #fff8e1;
    border: 1px solid #f9a825;
    border-left: 4px solid #f9a825;
    border-radius: 8px;
    padding: 14px 16px;
    margin: 0 0 20px;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #5d4037;
}

.rodi-allergen-notice-static strong {
    color: #e65100;
}

/* Return to cart link */
.rodi-return-to-cart {
    margin-bottom: 20px;
}

.rodi-return-to-cart a {
    color: var(--fm-primary);
    font-size: 0.9rem;
    text-decoration: none;
    font-weight: 500;
}

.rodi-return-to-cart a:hover {
    text-decoration: underline;
}
/* ============================================================
   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 {
    min-width: 125px;
    word-break: normal;
    overflow-wrap: break-word;
    hyphens: auto;
}

@media (max-width: 600px) {
    .wf-template-wrapper.wf-template-default-grid .wf-template-product .product-title {
        min-width: 110px;
        font-size: 15px;
    }
}

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

   Diet chips sit in one horizontally scrolling row rather than
   wrapping onto three lines, which is what made the previous
   version so tall. Allergens and the kitchen statement are
   disclosures, so the resting state is a single compact card.
   ============================================================ */

.rodi-fb {
    --rodi-fb-radius: var(--fm-radius, 12px);

    border: 1px solid var(--fm-border, #ececec);
    border-radius: var(--rodi-fb-radius);
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 14px 0 12px;
    margin: 0 0 22px;
}

.rodi-fb--sticky {
    position: sticky;
    top: 0;
    z-index: 90;
}

/* ---- Header row ---- */

.rodi-fb-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px 10px;
}

.rodi-fb-title {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #888;
}

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

/* display:flex above beats the hidden attribute's display:none,
   which left an empty row with a stray Clear button on it. */
.rodi-fb-status[hidden] {
    display: none;
}

.rodi-fb-count {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--fm-text, #333);
}

.rodi-fb-clear {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 999px;
    border: 1.5px solid var(--fm-primary, #cf2027);
    background: transparent;
    color: var(--fm-primary, #cf2027);
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease;
}

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

/* ---- Horizontal chip scroller ---- */

.rodi-fb-scroller {
    position: relative;
}

.rodi-fb-scroller::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 28px;
    pointer-events: none;
    background: linear-gradient(to right, rgba(255, 255, 255, 0), #fff);
    border-radius: 0 var(--rodi-fb-radius) var(--rodi-fb-radius) 0;
}

.rodi-fb-chips {
    display: flex;
    flex-wrap: nowrap;
    gap: 7px;
    padding: 2px 16px 4px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
}

.rodi-fb-chips::-webkit-scrollbar {
    display: none;
}

.rodi-fb-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
    scroll-snap-align: start;
    font-size: 0.84rem;
    font-weight: 600;
    padding: 8px 15px;
    border-radius: 999px;
    line-height: 1.3;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;

    /* Fallback for browsers without color-mix */
    background: #f6f6f6;
    border: 1.5px solid #e2e2e2;
    color: #333;
}

@supports (background: color-mix(in srgb, red 10%, white)) {

    .rodi-fb-chip {
        background: color-mix(in srgb, var(--rodi-chip-color, #666) 8%, #fff);
        border-color: color-mix(in srgb, var(--rodi-chip-color, #666) 30%, #fff);
        color: color-mix(in srgb, var(--rodi-chip-color, #666) 80%, #000);
    }

    .rodi-fb-chip:hover {
        background: color-mix(in srgb, var(--rodi-chip-color, #666) 16%, #fff);
    }
}

.rodi-fb-chip[aria-pressed="true"] {
    background: var(--rodi-chip-color, #333) !important;
    border-color: var(--rodi-chip-color, #333) !important;
    color: #fff !important;
}

.rodi-fb-chip-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 4px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.3px;
    background: var(--rodi-chip-color, #666);
    color: #fff;
}

.rodi-fb-chip[aria-pressed="true"] .rodi-fb-chip-key {
    background: rgba(255, 255, 255, 0.25);
}

/* ---- Adapt toggle ---- */

.rodi-fb-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    color: #555;
    cursor: pointer;
    padding: 10px 16px 0;
}

.rodi-fb-toggle input {
    width: 15px;
    height: 15px;
    accent-color: var(--fm-primary, #cf2027);
    cursor: pointer;
    flex-shrink: 0;
}

/* ---- Legend ---- */

.rodi-fb-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 8px 16px 0;
}

.rodi-fb-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    color: #777;
}

/* ---- Disclosures: allergens + kitchen statement ---- */

.rodi-fb-allergens,
.rodi-fb-notice {
    margin: 10px 16px 0;
    padding-top: 10px;
    border-top: 1px solid var(--fm-border, #ececec);
}

.rodi-fb-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #777;
    cursor: pointer;
    list-style: none;
    padding: 2px 0;
    -webkit-tap-highlight-color: transparent;
}

.rodi-fb-summary::-webkit-details-marker {
    display: none;
}

.rodi-fb-summary::before {
    content: "";
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

details[open] > .rodi-fb-summary::before {
    transform: rotate(45deg);
}

.rodi-fb-summary:hover {
    color: var(--fm-text, #333);
}

.rodi-fb-summary-hint {
    font-size: 0.68rem;
    font-weight: 500;
    color: #aaa;
}

.rodi-fb-notice .rodi-fb-summary {
    color: #b26a00;
}

.rodi-fb-notice .rodi-fb-summary:hover {
    color: #8a5200;
}

/* Allergen chips: compact, and allowed to wrap since they only
   appear once the disclosure is opened. */

.rodi-fb-chips--allergen {
    flex-wrap: wrap;
    overflow: visible;
    gap: 4px;
    padding: 10px 0 0;
}

.rodi-fb-chip--allergen {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 3px 9px;
    border-width: 1px;
    gap: 0;
}

.rodi-fb-hint,
.rodi-fb-statement {
    margin: 8px 0 0;
    font-size: 0.74rem;
    line-height: 1.5;
    color: #777;
}

.rodi-fb-statement {
    color: #6d4c41;
}

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

@media (max-width: 700px) {

    .rodi-fb {
        padding: 12px 0 10px;
        margin-bottom: 16px;
    }

    .rodi-fb-head,
    .rodi-fb-toggle,
    .rodi-fb-legend {
        padding-left: 14px;
        padding-right: 14px;
    }

    .rodi-fb-chips {
        padding-left: 14px;
        padding-right: 14px;
    }

    .rodi-fb-allergens,
    .rodi-fb-notice {
        margin-left: 14px;
        margin-right: 14px;
    }

    .rodi-fb-chip {
        font-size: 0.8rem;
        padding: 7px 13px;
    }
}

/* ============================================================
   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;
}

/* ============================================================
   EMPTY STATE + CATEGORY MATCH COUNTS
   ============================================================ */

.rodi-fb-empty {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 12px 16px 0;
    padding: 14px 16px;
    border-radius: 8px;
    background: #fff8e1;
    border: 1px solid #f0d999;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #6d4c41;
}

/* display:flex above would otherwise beat the hidden attribute */
.rodi-fb-empty[hidden] {
    display: none;
}

.rodi-fb-empty strong {
    color: #e65100;
}

.rodi-fb-empty .rodi-fb-clear {
    margin-left: auto;
}

/* Match count on category headers, shown only while filtering */

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

@media (max-width: 700px) {

    .rodi-fb-empty {
        margin-left: 14px;
        margin-right: 14px;
        padding: 12px 14px;
    }

    .rodi-fb-empty .rodi-fb-clear {
        margin-left: 0;
    }
}