/* ============================================================
   CART AND CHECKOUT

   assets/css/checkout.css

   Part of the Rodi Express child theme. Loaded by inc/enqueue.php.
   Cart, checkout, age verification and the trade account notice.
   ============================================================ */

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

/* ============================================================
   AGE VERIFICATION - UK Challenge 25

   Legal age is 18; the customer-facing wording says 25 because
   that is the policy enforcement expects to see.
   ============================================================ */

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

.rodi-age-badge {
    display: inline-block;
    padding: 2px 6px;
    border-radius: 3px;
    background: #212121;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.4px;
    line-height: 1.4;
}

.rodi-age-notice {
    margin: 0 0 18px;
    padding: 14px 16px;
    border-left: 5px solid #c62828;
    border-radius: 6px;
    background: #ffebee;
    font-size: 0.83rem;
    line-height: 1.55;
    color: #4a2c2c;
}

.rodi-age-notice strong {
    color: #b71c1c;
}

/* The confirmation tick on classic checkout. Given a bit more room and a
   visible border, because an unnoticed required checkbox is a dead end. */

.rodi-age-confirm label {
    display: flex !important;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #4a2c2c;
    cursor: pointer;
}

.rodi-age-confirm input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    flex-shrink: 0;
    accent-color: #c62828;
    cursor: pointer;
}

@media (max-width: 480px) {

    .rodi-age-notice,
    .rodi-age-confirm {
        font-size: 0.78rem;
        padding: 12px 13px;
    }
}

/* ------------------------------------------------------------
   Block checkout: the age tick stays hidden until the basket
   contains alcohol. JS adds .rodi-age-field to it and toggles
   --visible from the live cart. Hiding is cosmetic; the server
   side check in inc/age-verification.php is what enforces it.
   ------------------------------------------------------------ */

.rodi-age-field {
    display: none !important;
}

.rodi-age-field.rodi-age-field--visible {
    display: block !important;
}

.rodi-age-field--visible label {
    font-size: 0.82rem;
    line-height: 1.5;
}

/* ------------------------------------------------------------
   Unticked = warning, ticked = confirmed.

   A required checkbox that looks identical either way leaves
   people stuck at a checkout that will not proceed with no
   visible reason. Amber says "still to do", green says "done".

   :has() drives it with no JavaScript; the .is-confirmed class
   is a fallback that main.js toggles for older browsers.
   ------------------------------------------------------------ */

.rodi-age-field--visible,
.rodi-age-confirm {
    margin: 14px 0 !important;
    padding: 12px 14px;
    border: 1.5px solid #e6a23c;
    border-radius: 8px;
    background: #fffbf2;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.rodi-age-field--visible label,
.rodi-age-confirm label {
    color: #7a4b00;
}

/* Prompt shown while it is still outstanding. */

.rodi-age-field--visible::before,
.rodi-age-confirm::before {
    content: "Confirmation required";
    display: block;
    margin-bottom: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid rgba(184, 134, 11, 0.22);
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #b8860b;
}

/* ---- Room around the tick itself ----
   Blocks lays the checkbox out as input + svg mark + label span. Give the
   text some breathing space from the box and stop the first line sitting
   tight under the heading. */

.rodi-age-field--visible .wc-block-components-checkbox__label,
.rodi-age-confirm label {
    padding-left: 8px;
    line-height: 1.55;
}

.rodi-age-field--visible .wc-block-components-checkbox,
.rodi-age-field--visible .wc-block-components-checkbox label {
    margin: 0;
}

.rodi-age-field--visible input[type="checkbox"],
.rodi-age-field--visible .wc-block-components-checkbox__mark {
    margin-top: 1px;
}

/* Confirmed */

.rodi-age-field--visible:has(input:checked),
.rodi-age-confirm:has(input:checked),
.rodi-age-field--visible.is-confirmed,
.rodi-age-confirm.is-confirmed {
    border-color: #2e7d32;
    background: #f3faf3;
}

.rodi-age-field--visible:has(input:checked) label,
.rodi-age-confirm:has(input:checked) label,
.rodi-age-field--visible.is-confirmed label,
.rodi-age-confirm.is-confirmed label {
    color: #1b5e20;
}

.rodi-age-field--visible:has(input:checked)::before,
.rodi-age-confirm:has(input:checked)::before,
.rodi-age-field--visible.is-confirmed::before,
.rodi-age-confirm.is-confirmed::before {
    content: "\2713\00a0\00a0Confirmed";
    color: #2e7d32;
    border-bottom-color: rgba(46, 125, 50, 0.22);
}

.rodi-age-field--visible:has(input:checked) input[type="checkbox"],
.rodi-age-confirm:has(input:checked) input[type="checkbox"],
.rodi-age-field--visible.is-confirmed input[type="checkbox"],
.rodi-age-confirm.is-confirmed input[type="checkbox"] {
    accent-color: #2e7d32;
}

/* ============================================================
   CHECKOUT + CART POLISH
   ============================================================ */

/* ---- Allergen tags on line items ----
   Colours come from a small stylesheet printed by
   foodmaster_child_cart_allergen_styles(), so they stay in step
   with the filterable colour map. Only shape lives here. ---- */

.rodi-ck-allergens {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 3px;
}

.rodi-ck-allergen {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 3px;
    background: #c62828;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.5;
    white-space: nowrap;
}

/* WooCommerce prints item data as a definition list. Let the allergen row
   sit on its own line instead of being squeezed beside its label. */

.wc-block-components-product-details__allergens,
.woocommerce-cart .variation dt.variation-Allergens {
    display: block;
    width: 100%;
}

.wc-block-components-product-details__allergens .wc-block-components-product-details__name {
    display: block;
    margin-bottom: 3px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #999;
}

/* ---- "Add a note to your order" ----
   Left as a bare checkbox and an unstyled textarea by default, which looks
   unfinished next to the fields around it. ---- */

.wc-block-checkout__add-note {
    margin-top: 18px;
    padding: 14px 16px;
    border: 1px solid var(--fm-border, #ececec);
    border-radius: 10px;
    background: #fafafa;
}

.wc-block-checkout__add-note .wc-block-components-checkbox__label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #2f2f2f;
    padding-left: 8px;
}

.wc-block-checkout__add-note textarea,
.wc-block-components-textarea {
    width: 100%;
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
    font-size: 0.88rem;
    line-height: 1.55;
    color: #2f2f2f;
    resize: vertical;
    min-height: 90px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.wc-block-checkout__add-note textarea:focus,
.wc-block-components-textarea:focus {
    border-color: var(--fm-primary, #cf2027);
    box-shadow: 0 0 0 3px rgba(207, 32, 39, 0.1);
    outline: none;
}

.wc-block-checkout__add-note textarea::placeholder {
    color: #aaa;
}

/* ---- The allergy field, matching the note box ---- */

.wc-block-components-address-form .wc-block-components-text-input input,
.wc-block-checkout__additional-fields .wc-block-components-text-input input {
    border-radius: 8px;
}

@media (max-width: 480px) {

    .wc-block-checkout__add-note {
        padding: 12px 13px;
    }

    .wc-block-checkout__add-note textarea,
    .wc-block-components-textarea {
        font-size: 16px; /* stops iOS zooming on focus */
    }
}

/* ------------------------------------------------------------
   Trade account notice
   ------------------------------------------------------------ */

.rodi-trade-notice {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-left: 5px solid #1565c0;
    border-radius: 6px;
    background: #e8f1fb;
    font-size: 0.83rem;
    line-height: 1.55;
    color: #14395e;
}

.rodi-trade-notice strong {
    color: #0d47a1;
}

/* ============================================================
   ACCOUNT CREDIT - My Account > Account credit
   ============================================================ */

.rodi-credit-balance {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0 0 24px;
    padding: 22px 24px;
    border-radius: 14px;
    background: #fdf2f2;
    border: 1px solid #f0c4c4;
}

.rodi-credit-balance-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--fm-primary, #cf2027);
}

.rodi-credit-balance-value {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
    color: #1f1f1f;
}

.rodi-credit-topup {
    margin: 0 0 28px;
    padding: 16px 18px;
    border-radius: 10px;
    background: #f7f4ef;
}

.rodi-credit-topup h3 {
    margin: 0 0 6px;
    font-size: 1rem;
}

.rodi-credit-topup p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
}

.rodi-credit h3 {
    font-size: 1.05rem;
    margin: 0 0 12px;
}

.rodi-credit-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.rodi-credit-table th {
    padding: 10px 12px;
    border-bottom: 2px solid var(--fm-border, #ececec);
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    text-align: left;
    color: #888;
}

.rodi-credit-table td {
    padding: 12px;
    border-bottom: 1px solid #f2f2f2;
    vertical-align: top;
}

.rodi-credit-num {
    text-align: right !important;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rodi-credit-table .is-credit {
    color: #1a7f37;
    font-weight: 600;
}

.rodi-credit-table .is-debit {
    color: #b32d2e;
    font-weight: 600;
}

.rodi-credit-empty {
    color: #888;
}

@media (max-width: 480px) {

    .rodi-credit-balance-value {
        font-size: 1.6rem;
    }

    .rodi-credit-table th,
    .rodi-credit-table td {
        padding: 10px 6px;
    }
}

.rodi-credit-refund {
    margin-top: 8px !important;
    font-size: 0.82rem !important;
    color: #777 !important;
}

/* ------------------------------------------------------------
   My Account menu icons

   The parent theme gives five links an emoji icon
   (modern-woocommerce.css from line 1819) but misses Payment
   methods, a standard WooCommerce endpoint - and Account credit
   is ours. Without an icon those two sit out of line with the
   rest. Same pattern and size as the theme's own.
   ------------------------------------------------------------ */

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--payment-methods a::before {
    content: "💳";
    width: auto;
    height: auto;
    font-size: 16px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--account-credit a::before {
    content: "💷";
    width: auto;
    height: auto;
    font-size: 16px;
}

.woocommerce-account .woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--downloads a::before {
    content: "📥";
    width: auto;
    height: auto;
    font-size: 16px;
}

/* ------------------------------------------------------------
   Account credit at checkout
   ------------------------------------------------------------ */

.rodi-credit-checkout {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
    border-radius: 8px;
    background: #fdf2f2;
    font-size: 0.88rem;
}

.rodi-credit-checkout-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.rodi-credit-checkout-row span {
    color: #666;
}

.rodi-credit-checkout-row strong {
    font-variant-numeric: tabular-nums;
    color: #1f1f1f;
}

/* ------------------------------------------------------------
   Phone orders - staff only
   ------------------------------------------------------------ */

.rodi-phone-reminder,
.rodi-phone-done {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-left: 5px solid #e6a23c;
    border-radius: 6px;
    background: #fffbf2;
    font-size: 0.86rem;
    line-height: 1.55;
    color: #5c3d00;
}

.rodi-phone-done {
    border-left-color: #2e7d32;
    background: #f3faf3;
    color: #1b5e20;
}

.rodi-phone-done a {
    margin-left: 6px;
    font-weight: 700;
    color: #1b5e20;
}

/* ------------------------------------------------------------
   Phone order bar - staff only, bottom of menu, basket, checkout
   ------------------------------------------------------------ */

.rodi-phone-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9990;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0;
    padding: 10px 18px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background: #2b2b2b;
    color: #f2f2f2;
    font-size: 0.85rem;
    box-shadow: 0 -4px 18px rgba(0, 0, 0, 0.18);
}

/* Colour says at a glance who the order is for. */

.rodi-phone-bar.is-account {
    background: #1b5e4a;
}

.rodi-phone-bar.is-trade {
    background: #0d47a1;
}

.rodi-phone-bar-label strong {
    color: #fff;
}

.rodi-phone-bar-tag {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ---- Search ---- */

.rodi-phone-search {
    position: relative;
    flex: 1 1 320px;
    min-width: 0;
}

.rodi-phone-bar-input {
    width: 100%;
    height: 38px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: #fff;
    color: #222;
    font-size: 0.88rem;
    -webkit-appearance: none;
}

/* The bar sits at the bottom of the screen, so results open upwards. */

.rodi-phone-results {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    display: flex;
    flex-direction: column;
    max-height: 60vh;
    overflow-y: auto;
    padding: 4px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 -8px 28px rgba(0, 0, 0, 0.22);
}

.rodi-phone-results[hidden] {
    display: none;
}

.rodi-phone-result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px 8px;
    width: 100%;
    padding: 9px 11px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: #222;
    text-align: left;
    cursor: pointer;
}

.rodi-phone-result:hover,
.rodi-phone-result.is-active {
    background: #f2f2f2;
}

.rodi-phone-result strong {
    font-size: 0.9rem;
}

.rodi-phone-result-sub {
    flex-basis: 100%;
    font-size: 0.78rem;
    color: #777;
}

.rodi-phone-result-trade {
    padding: 1px 7px;
    border-radius: 999px;
    background: #e8f1fb;
    color: #0d47a1;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.rodi-phone-bar-btn {
    height: 38px;
    padding: 0 14px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    font-size: 0.84rem;
    font-weight: 700;
    cursor: pointer;
}

.rodi-phone-bar-note {
    font-size: 0.74rem;
    opacity: 0.7;
}

/* Keep the page footer clear of the bar. */

body:has(.rodi-phone-bar) {
    padding-bottom: 70px;
}

@media (max-width: 700px) {

    .rodi-phone-search {
        flex-basis: 100%;
    }

    .rodi-phone-bar-input {
        font-size: 16px; /* stops iOS zooming on focus */
    }

    body:has(.rodi-phone-bar) {
        padding-bottom: 140px;
    }
}

/* ---- Account number on My Account ---- */

.rodi-account-ref {
    margin: 0 0 18px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #f7f4ef;
    font-size: 0.9rem;
    color: #444;
}

.rodi-account-ref strong {
    color: #1f1f1f;
    letter-spacing: 0.3px;
}

.rodi-credit-bonus-offer {
    margin-top: 10px !important;
    padding: 8px 12px;
    border-radius: 6px;
    background: #fdf2f2;
    color: var(--fm-primary, #cf2027) !important;
    font-weight: 700;
    font-size: 0.86rem !important;
}

/* ------------------------------------------------------------
   Purchase order number - trade checkout

   Sits with the contact details at the top of the checkout.
   Made easier to spot with a blue accent and a line saying
   what it is for. Still optional.

   Nothing here changes the box's size or position. WooCommerce
   floats the label inside the input, placed from the edge of its
   container - an earlier version padded that container, which
   moved the input but not the label, so the two overlapped. The
   accent is an inset shadow for the same reason: a thicker border
   would push the text but not the label.

   Matched by the field's id, so the rule survives WooCommerce
   renaming the wrapper's classes.
   ------------------------------------------------------------ */

.wc-block-components-text-input:has(input[id*="po-number"]) {
    margin-top: 18px !important;
}

.wc-block-components-text-input:has(input[id*="po-number"]) input {
    border-color: #90b4de !important;
    background-color: #f5f9fe !important;
    box-shadow: inset 4px 0 0 #1565c0 !important;
}

.wc-block-components-text-input:has(input[id*="po-number"]) input:focus {
    border-color: #1565c0 !important;
    box-shadow: inset 4px 0 0 #1565c0, 0 0 0 3px rgba(21, 101, 192, 0.15) !important;
}

.wc-block-components-text-input:has(input[id*="po-number"]) label {
    color: #0d47a1 !important;
    font-weight: 600;
}

.wc-block-components-text-input:has(input[id*="po-number"])::after {
    content: "Your company's order reference, if you use one. It will be printed on your invoice.";
    display: block;
    margin-top: 6px;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #4a6a8f;
}

/* ------------------------------------------------------------
   Additional order information - allergy box and order note

   The allergy box is the most important field on the page for
   someone with a serious allergy, so it gets the same amber as
   the allergen warnings, and a line pointing anyone with a severe
   allergy to the phone. A typed note can be missed on a busy
   night; a conversation cannot.

   Like the PO box, nothing here changes the input's size or its
   container's padding - WooCommerce floats the label inside the
   input, positioned from the container's edge. The accent is an
   inset shadow for the same reason.
   ------------------------------------------------------------ */

.wc-block-components-text-input:has(input[id*="allergies"]) input {
    border-color: #f0c36b !important;
    background-color: #fffcf3 !important;
    box-shadow: inset 4px 0 0 #f9a825 !important;
}

.wc-block-components-text-input:has(input[id*="allergies"]) input:focus {
    border-color: #e6a23c !important;
    box-shadow: inset 4px 0 0 #f9a825, 0 0 0 3px rgba(249, 168, 37, 0.18) !important;
}

.wc-block-components-text-input:has(input[id*="allergies"]) label {
    color: #8a5a00 !important;
    font-weight: 600;
}

.wc-block-components-text-input:has(input[id*="allergies"])::after {
    content: "Printed at the top of your order for the kitchen. Include everyone you\2019re ordering for. With a severe allergy, please call us on 01438 717499 before ordering.";
    display: block;
    margin-top: 6px;
    font-size: 0.76rem;
    line-height: 1.45;
    color: #7a5a1e;
}

/* ---- Close the gap between the allergy box and the note ----
   The space came from this theme's margin on the note box sitting
   on top of WooCommerce's own spacing between blocks. */

.wp-block-woocommerce-checkout-order-note-block,
.wc-block-checkout__order-notes {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.wc-block-checkout__add-note {
    margin-top: 14px !important;
    padding: 12px 14px;
    border-radius: 8px;
}

/* The section's own heading sits a little tight to its first box. */

.wc-block-checkout__additional-fields,
.wp-block-woocommerce-checkout-additional-information-block {
    margin-bottom: 0 !important;
}

/* ------------------------------------------------------------
   Side panel basket - one button

   The basket page is never shown (inc/woocommerce.php sends it to
   checkout), so "View Cart" would only duplicate "Checkout".
   Hidden, and Checkout takes the full width.

   Only the View Cart LINK is hidden. On phones FoodMaster also has
   a "View Cart" toggle button (.foodmaster-sticky-toggle) that opens
   the sticky basket - that one stays, as it is how phone users see
   their basket at all.
   ------------------------------------------------------------ */

a.foodmaster-cart-button.view-cart,
.foodmaster-mini-cart-actions a[href*="/basket"],
.foodmaster-mini-cart-actions a[href*="/cart"],
.woocommerce-mini-cart__buttons a.wc-forward:not(.checkout) {
    display: none !important;
}

.foodmaster-mini-cart-actions a.foodmaster-cart-button.checkout,
.woocommerce-mini-cart__buttons a.checkout {
    flex: 1 1 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: center;
}

/* ------------------------------------------------------------
   Side panel totals - VAT under the total

   FoodMaster orders them Subtotal, Tax, Total. With VAT-inclusive
   prices the VAT is information about the total, not an extra
   charge, so it sits beneath the total, small and grey - the same
   as the checkout's "Including £x VAT". The label itself is changed
   to "Includes VAT" in inc/helpers.php and 44-vat-label.js.
   ------------------------------------------------------------ */

.foodmaster-mini-cart-subtotal {
    display: flex;
    flex-direction: column;
}

.foodmaster-mini-cart-subtotal .subtotal-row {
    order: 1;
}

.foodmaster-mini-cart-subtotal .total-row {
    order: 2;
}

.foodmaster-mini-cart-subtotal .tax-row {
    order: 3;
    margin-top: -4px;
    border: 0 !important;
    padding-top: 0 !important;
    font-size: 0.78rem !important;
    color: #888 !important;
}

.foodmaster-mini-cart-subtotal .tax-row .tax-label,
.foodmaster-mini-cart-subtotal .tax-row .tax-amount,
.foodmaster-mini-cart-subtotal .tax-row .tax-amount * {
    font-size: 0.78rem !important;
    font-weight: 400 !important;
    color: #888 !important;
}

/* ------------------------------------------------------------
   Basket: side panel on computers, sticky bar on phones

   FoodMaster's "Make sticky" option applies everywhere, so one
   widget cannot be both. The Sidebar therefore holds two copies
   of the modern FoodMaster Mini Cart - one normal, one with
   "Make sticky" ticked - and each is shown only where it
   belongs. The sticky copy carries the class .sticky-cart.

   768px matches FoodMaster's own breakpoint (mini-cart.css),
   below which its sticky basket pins itself to the bottom.
   ------------------------------------------------------------ */

@media (min-width: 769px) {

    .foodmaster-mini-cart-wrapper.sticky-cart,
    .modern-sidebar .widget:has(.foodmaster-mini-cart-wrapper.sticky-cart) {
        display: none !important;
    }
}

@media (max-width: 768px) {

    .modern-sidebar .widget:has(.foodmaster-mini-cart-wrapper:not(.sticky-cart)),
    .foodmaster-mini-cart-wrapper:not(.sticky-cart) {
        display: none !important;
    }

    /* Room at the bottom of the page, so the bar never covers the
       last dishes or the footer. */
    body:has(.foodmaster-mini-cart-wrapper.sticky-cart) {
        padding-bottom: 76px;
    }

    /* Staff taking a phone order on a phone: the basket sits above
       the phone order bar rather than underneath it. */
    body:has(.rodi-phone-bar) .foodmaster-mini-cart-wrapper.sticky-cart {
        bottom: 140px !important;
    }
}

/* ------------------------------------------------------------
   Basket panel - the chosen options, one per line

   FoodMaster lays the options out as a two-column grid: a label column
   and a value column. The earlier fix here turned each option into a
   box of its own but left the grid in place, so the boxes were dealt
   into the two columns side by side - "Extra - greek sausage: £3.00"
   next to "Extra - tiramisù", the second running off the panel.

   Now the list is a plain stack: each option on its own line, its price
   straight after it, wrapping inside the panel when it is long.
   ------------------------------------------------------------ */

.foodmaster-mini-cart-item .item-details {
    min-width: 0;
    flex: 1 1 auto;
}

.foodmaster-mini-cart-item .item-meta {
    display: block !important;
    max-width: 100%;
    margin: 4px 0 8px;
    overflow-wrap: anywhere;
}

.foodmaster-mini-cart-item .item-meta .meta-item {
    display: block !important;
    margin: 0 0 2px;
    font-size: 0.78rem;
    line-height: 1.35;
}

.foodmaster-mini-cart-item .item-meta .meta-key {
    display: inline;
    white-space: normal;
    font-weight: 600;
}

.foodmaster-mini-cart-item .item-meta .meta-value {
    display: inline;
    padding: 0;
    background: none;
    overflow-wrap: anywhere;
}

.foodmaster-mini-cart-item .item-meta .meta-item--category .meta-value {
    font-weight: 600;
}

/* No photo, no photo column. The buffet has no image, and the empty
   50px box pushed its text away from the edge of the panel. */

.foodmaster-mini-cart-item .item-thumbnail:not(:has(img)) {
    display: none;
}

/* Quantity and price keep their row whatever is above them. */

.foodmaster-mini-cart-item .item-price-quantity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ------------------------------------------------------------
   Basket panel - a number you can type

   assets/js/main.js swaps the plain number between - and + for a small
   box, so 45 guests is typed rather than clicked twenty-five times. On
   the buffet the box is labelled "Guests" and - stops at the minimum.
   ------------------------------------------------------------ */

.foodmaster-mini-cart-item .rodi-qty-input {
    width: 3.2em;
    min-width: 0;
    height: 28px;
    padding: 0 2px;
    margin: 0 4px;
    border: 1px solid var(--fm-border, #ececec);
    border-radius: 6px;
    background: #fff;
    color: var(--fm-text, #333);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}

.foodmaster-mini-cart-item .rodi-qty-input::-webkit-outer-spin-button,
.foodmaster-mini-cart-item .rodi-qty-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.foodmaster-mini-cart-item .rodi-qty-input:focus {
    outline: 2px solid var(--fm-primary, #cf2027);
    outline-offset: 1px;
    border-color: transparent;
}

.foodmaster-mini-cart-item .rodi-qty-label {
    flex-basis: 100%;
    margin: 2px 0 -2px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--fm-text, #333);
}

.foodmaster-mini-cart-item .quantity-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.foodmaster-mini-cart-item .rodi-qty-hint {
    flex-basis: 100%;
    font-size: 0.72rem;
    color: #7a4b00;
}

/* ------------------------------------------------------------
   Checkout order summary - the chosen options, one per line

   WooCommerce runs a dish's options together on one line with " / "
   between them. For a dish with one choice that is fine; for the buffet
   it became a paragraph nobody could check. One per line instead.
   ------------------------------------------------------------ */

.wc-block-components-order-summary-item .wc-block-components-product-details li {
    display: block;
    margin: 0 0 2px;
}

.wc-block-components-order-summary-item .wc-block-components-product-details li::before,
.wc-block-components-order-summary-item .wc-block-components-product-details li::after {
    content: none !important;
}

/* ------------------------------------------------------------
   Buffet page - [rodi_buffet]

   Signed out: one panel inviting them to sign in or create an account.
   Signed in: their menus (FoodMaster's own accordion), then the request
   form. The page's own text above explains how buffets work.
   ------------------------------------------------------------ */

.rodi-buffet {
    margin: 2rem 0;
}

.rodi-buffet-signin {
    max-width: 38rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--fm-border, #ececec);
    border-left: 5px solid var(--fm-primary, #cf2027);
    border-radius: var(--fm-radius, 12px);
    background: #fff;
}

.rodi-buffet-signin p {
    margin: 0 0 0.75rem;
    line-height: 1.55;
}

.rodi-buffet-signin p:last-child {
    margin-bottom: 0;
}

.rodi-buffet-signin-title {
    font-size: 1.1rem;
}

.rodi-buffet-btn {
    display: inline-block;
    padding: 0.75rem 1.4rem;
    border-radius: 999px;
    background: var(--fm-primary, #cf2027);
    color: #fff !important;
    font-weight: 600;
    text-decoration: none !important;
}

.rodi-buffet-btn:hover,
.rodi-buffet-btn:focus-visible {
    background: var(--fm-primary-hover, #b91c22);
}

.rodi-buffet-btn:focus-visible {
    outline: 2px solid var(--fm-primary, #cf2027);
    outline-offset: 3px;
}

.rodi-buffet-heading {
    margin: 2rem 0 0.5rem;
    font-size: 1.35rem;
}

.rodi-buffet-heading:first-child {
    margin-top: 0;
}

.rodi-buffet-intro {
    margin: 0 0 1rem;
    color: var(--fm-text, #333);
}

.rodi-buffet-request {
    max-width: 44rem;
}

.rodi-buffet-admin-note {
    padding: 0.75rem 1rem;
    background: #fffbf2;
    border-left: 4px solid #e6a23c;
}

/* ------------------------------------------------------------
   Buffet pop-up - guests, date, time (inc/buffet-deposits.php)
   ------------------------------------------------------------ */

.rodi-bd-fields {
    display: grid;
    gap: 0.9rem;
    margin: 0 0 1.25rem;
    padding: 1rem 1.1rem;
    border: 1px solid var(--fm-border, #ececec);
    border-left: 4px solid var(--fm-primary, #cf2027);
    border-radius: 10px;
    background: #fff;
}

.rodi-bd-row {
    display: grid;
    gap: 0.3rem;
    margin: 0;
}

.rodi-bd-row label,
.rodi-bd-label {
    font-weight: 600;
    font-size: 0.9rem;
}

.rodi-bd-row input[type="number"],
.rodi-bd-row input[type="date"],
.rodi-bd-row select {
    width: 100%;
    max-width: 16rem;
    min-height: 42px;
    padding: 0.4rem 0.6rem;
    border: 1px solid #cfcfcf;
    border-radius: 8px;
    background: #fff;
    font: inherit;
}

.rodi-bd-row input:focus,
.rodi-bd-row select:focus {
    outline: 2px solid var(--fm-primary, #cf2027);
    outline-offset: 1px;
}

.rodi-bd-row small {
    color: #666;
    font-size: 0.78rem;
}

.rodi-bd-fixed strong {
    font-size: 1rem;
}

.rodi-bd-pay {
    margin: 0;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--fm-border, #ececec);
    font-size: 0.82rem;
    line-height: 1.45;
    color: #444;
}

/* ------------------------------------------------------------
   Buffet checkout - the date is the event's, already chosen, so
   FoodMaster's own date and time boxes are hidden. The event shows
   under the buffet in the order summary.
   ------------------------------------------------------------ */

.rodi-buffet-checkout .wp-block-foodmaster-time-to-deliver,
.rodi-buffet-checkout .foodmaster-no-dates-message {
    display: none !important;
}

/* My account → order: the buffet summary */

.rodi-bd-summary {
    margin: 1.5rem 0;
    padding: 1.1rem 1.25rem;
    border: 1px solid var(--fm-border, #ececec);
    border-left: 4px solid var(--fm-primary, #cf2027);
    border-radius: 10px;
}

.rodi-bd-summary h2 {
    margin-top: 0;
    font-size: 1.15rem;
}

.rodi-bd-terms {
    font-size: 0.85rem;
    color: #555;
}

/* Buffet request form: the "about you" fields are for people not signed
   in. A signed-in customer's details come from their account. */

.rodi-buffet--signed-in .rodi-identity {
    display: none;
}

.rodi-identity {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0 1rem;
    margin-bottom: 0.5rem;
}

/* Messages shown at the top of a page after the dish pop-up refused
   something (inc/woocommerce.php). */

.rodi-page-notices {
    margin: 0 0 1.25rem;
}

.rodi-page-notices .woocommerce-error {
    margin: 0;
    padding: 0.9rem 1.1rem 0.9rem 1.1rem;
    list-style: none;
    border-left: 5px solid var(--fm-primary, #cf2027);
    border-radius: 10px;
    background: #fdf2f2;
    color: #5a1111;
    font-weight: 500;
}

.rodi-page-notices .woocommerce-error li {
    margin: 0.15rem 0;
}

.rodi-page-notices .woocommerce-error::before {
    display: none;
}

/* The buffet pop-up has its own "Number of guests" box, so FoodMaster's
   quantity box beside the Add button would only confuse. */

.foodmaster-cart-form:has(.rodi-bd-fields) .foodmaster-cart-row .quantity {
    display: none;
}

/* "This order is for your buffet on …" - basket panel and checkout. */

.rodi-bd-banner {
    margin: 0 0 12px;
    padding: 10px 12px;
    border-left: 4px solid #e6a23c;
    border-radius: 8px;
    background: #fffaf0;
    color: #5c3b00;
    font-size: 0.82rem;
    line-height: 1.45;
    text-align: left;
}

.rodi-bd-banner strong {
    color: #3d2700;
}

.wc-block-checkout ~ .rodi-bd-banner,
.rodi-bd-banner + .wc-block-checkout {
    margin-top: 0;
}

*:has(> .wc-block-checkout) > .rodi-bd-banner {
    margin-bottom: 1.25rem;
    padding: 14px 16px;
    font-size: 0.95rem;
}

.rodi-bd-bar-tag {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff3d6;
    color: #5c3b00;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

.rodi-bd-banner-pay {
    display: block;
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px dashed rgba(92, 59, 0, 0.25);
    font-weight: 600;
}

/* ------------------------------------------------------------
   Keep the "Additional order information" fields inside the
   left column. The long consent sentence could push the section
   wider than its column, so the allergy box ran underneath the
   order summary.
   ------------------------------------------------------------ */

.wc-block-checkout__main,
.wc-block-checkout__main .wc-block-components-checkout-step,
.wp-block-woocommerce-checkout-additional-information-block,
.wc-block-checkout__additional-fields,
.wc-block-components-additional-fields-list {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.wc-block-checkout__additional-fields .wc-block-components-text-input,
.wc-block-checkout__additional-fields .wc-block-components-checkbox,
.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-text-input,
.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkbox {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
}

.wc-block-checkout__additional-fields .wc-block-components-checkbox label,
.wp-block-woocommerce-checkout-additional-information-block .wc-block-components-checkbox label {
    white-space: normal !important;
    overflow-wrap: anywhere;
}

/* The help lines under the allergy and PO boxes wrap inside the column
   (they were running on one line underneath the order summary). */
.wc-block-components-text-input:has(input[id*="allergies"]),
.wc-block-components-text-input:has(input[id*="po-number"]) {
    flex-wrap: wrap !important;
}

.wc-block-components-text-input:has(input[id*="allergies"])::after,
.wc-block-components-text-input:has(input[id*="po-number"])::after {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    box-sizing: border-box;
}

/* =======================================================
   Order-type box covered during the automatic Delivery → Pickup step
   (main.js), so the tabs and times don't visibly flick back and forth.
======================================================= */

.rodi-ot-busy{position:relative}
.rodi-ot-busy::after{content:"Getting collection times ready…";position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.96);color:#666;font-size:14px;font-weight:600;border-radius:12px}
.rodi-ot-busy::before{content:"";position:absolute;z-index:6;left:50%;top:calc(50% - 30px);width:22px;height:22px;margin-left:-11px;border:3px solid #f3d3d3;border-top-color:#c62828;border-radius:50%;animation:rodiSpin .8s linear infinite}
@keyframes rodiSpin{to{transform:rotate(360deg)}}


/* Ready time card: under the date and time boxes, and above the order
   button (that copy only on phones and tablets). */
.rodi-ready{display:flex;gap:12px;align-items:flex-start;margin:12px 0 6px;padding:14px 16px;border:1px solid #cfe8d1;border-radius:14px;background:#f3faf4}
.rodi-ready.is-other-day{border-color:#ffcc80;background:#fff8ee}
.rodi-ready-ic{flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#2e7d32;position:relative;box-shadow:inset 0 0 0 4px #2e7d32,inset 0 0 0 6px rgba(255,255,255,.9)}
.rodi-ready.is-other-day .rodi-ready-ic{background:#e65100;box-shadow:inset 0 0 0 4px #e65100,inset 0 0 0 6px rgba(255,255,255,.9)}
.rodi-ready-ic::before{content:"";position:absolute;left:17px;top:9px;width:2px;height:10px;background:#fff;border-radius:1px}
.rodi-ready-ic::after{content:"";position:absolute;left:17px;top:17px;width:8px;height:2px;background:#fff;border-radius:1px}
.rodi-ready-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.rodi-ready-when{font-size:16.5px;line-height:1.3;color:#1b5e20}
.rodi-ready.is-other-day .rodi-ready-when{color:#8a4a00}
.rodi-ready-sub{font-size:13px;color:#4a6b4c;line-height:1.4}
.rodi-ready.is-other-day .rodi-ready-sub{color:#7a5a30}
.rodi-ready-warn{margin-top:4px;font-size:13.5px;font-weight:700;color:#8a4a00}
.rodi-ready-busy{margin-top:2px;font-size:13px;font-weight:600;color:#e65100}
.rodi-ready-route{margin-top:6px;font-size:13px;color:#555;line-height:1.5}
.rodi-ready-route a{display:inline-block;margin-left:2px;padding:3px 10px;border-radius:999px;background:#fff;border:1px solid #f0c4c4;color:#c62828!important;font-weight:700;text-decoration:none!important}
.rodi-ready-route a:hover{background:#fdecea}
.rodi-ready-dot{display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:50%;background:#9e9e9e;vertical-align:1px}
.rodi-ready-dot.is-live{background:#c62828;animation:rodiPulse 1.2s ease infinite}
@keyframes rodiPulse{0%,100%{opacity:1}50%{opacity:.3}}
#rodi-ready-near-button{display:none;margin:0 0 14px}
@media (max-width:1000px){#rodi-ready-near-button{display:flex}}

.rodi-ready-btn{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:10px;padding:9px 16px;border-radius:10px;background:#c62828;color:#fff!important;font-size:14px;font-weight:700;text-decoration:none!important;box-shadow:0 2px 8px rgba(198,40,40,.25);transition:background .15s ease,transform .15s ease}
.rodi-ready-btn::before{content:"";width:16px;height:16px;flex-shrink:0;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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-7.5 7-13a7 7 0 0 0-14 0c0 5.5 7 13 7 13z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%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.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s7-7.5 7-13a7 7 0 0 0-14 0c0 5.5 7 13 7 13z'/%3E%3Ccircle cx='12' cy='9' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat}
.rodi-ready-btn:hover{background:#b71c1c;transform:translateY(-1px)}

/* "Use your account credit" (split payment) */
.rodi-split{margin:0 0 16px;padding:14px 16px;border-radius:14px;background:#f3faf4;border:1px solid #cfe8d1;transition:opacity .2s}
.rodi-split.is-busy{opacity:.5;pointer-events:none}
.rodi-split-head{display:flex;gap:12px;align-items:flex-start}
.rodi-split-ic{flex-shrink:0;width:34px;height:34px;border-radius:50%;background:#2e7d32;color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:17px}
.rodi-split-head b{display:block;color:#1b5e20;font-size:15px}
.rodi-split-head span{font-size:13.5px;color:#3b5f3e}
.rodi-split-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rodi-split-amount{display:flex;align-items:center;gap:4px;padding:0 10px;border:1px solid #cfd8cf;border-radius:10px;background:#fff;height:44px;flex:1;min-width:120px}
.rodi-split-amount input{border:0!important;outline:0;width:100%;height:42px;font-size:16px!important;background:none;box-shadow:none!important}
.rodi-split-row button{height:44px;padding:0 16px;border-radius:10px;font-weight:700;cursor:pointer;border:1px solid #2e7d32;background:#fff;color:#2e7d32}
.rodi-split-row .rodi-split-apply{background:#2e7d32;color:#fff}
.rodi-split-row .rodi-split-remove{border-color:#ddd;color:#555}
.rodi-split-note{display:block;margin-top:8px;color:#6b7d6c;font-size:12px}
.rodi-split-line .wc-block-components-totals-item__value{color:#2e7d32;font-weight:700}
.rodi-split-ic{color:#fff!important;font-family:inherit}
.rodi-ar-row{margin-top:10px!important;padding:12px 14px!important;border-radius:12px;background:#fff3e0;border:1px solid #ffcc80}
.rodi-ar-row label{font-weight:600;color:#7a4a10}
.rodi-ready-allergy{margin-top:4px;font-size:12.5px;font-weight:600;color:#8a4a00}

/* Tip your driver */
.rodi-tip{margin:0 0 16px;padding:14px 16px;border-radius:14px;background:#fff;border:1px solid #eee}
.rodi-tip-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.rodi-tip-h b{font-size:15px}
.rodi-tip-h span{color:#2e7d32;font-size:13px;font-weight:600}
.rodi-tip-row{display:flex;flex-wrap:wrap;gap:8px}
.rodi-tip-row button{min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid #e0e0e0;background:#fff;color:#212121;font-weight:700;font-size:15px;cursor:pointer}
.rodi-tip-row button.on{border-color:#c62828;background:#fff6f6;color:#c62828}

/* ------------------------------------------------------------
   Phone order staff on a phone (14 Oct 2026). The customers' bottom bar
   (Home, Deals, Basket...) covered the staff bar, so the customer search
   couldn't be reached. For staff on a phone: no customers' bottom bar and
   no WordPress bar at the top; the staff bar sits at the bottom on two
   slim lines, with the basket bar just above it.
   ------------------------------------------------------------ */
@media (max-width: 782px) {
    html:has(.rodi-phone-bar) { margin-top: 0 !important; }
    body:has(.rodi-phone-bar) #wpadminbar { display: none !important; }
    body:has(.rodi-phone-bar) .rodi-tabbar { display: none !important; }
    body.has-rodi-tabbar:has(.rodi-phone-bar) { padding-bottom: calc(170px + env(safe-area-inset-bottom, 0px)) !important; }
    .rodi-phone-bar { z-index: 99995; gap: 6px 10px; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); }
    .rodi-phone-bar-label { flex: 1 1 100%; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 0.8rem; }
    .rodi-phone-bar-note { display: none; }
    .rodi-phone-search { flex: 1 1 0; }
    .rodi-phone-bar-input { height: 44px; }
    .rodi-phone-bar-btn { height: 44px; }
    html body:has(.rodi-phone-bar) .foodmaster-mini-cart-wrapper.sticky-cart,
    html body.has-rodi-tabbar:has(.rodi-phone-bar) .foodmaster-mini-cart-wrapper.sticky-cart { bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
    body:has(.rodi-phone-bar) .rodi-cc { bottom: calc(100px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Tablets and phones turned sideways: the staff bar on one line. */
@media (min-width: 783px) and (pointer: coarse) {
    .rodi-phone-bar { padding: 8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); }
    .rodi-phone-bar-input, .rodi-phone-bar-btn { height: 42px; font-size: 16px; }
    .rodi-phone-bar-note { display: none; }
}

/* Checkout: "Your basket has a Friday deal, so this order is for Friday 16 October" (15 Oct 2026). */
.rodi-deal-day-note{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:#eef8f0;border:1px solid #cde8d3;color:#1b5e20;font-size:14px;line-height:1.45}
.rodi-deal-day-note.is-warn{background:#fff4e5;border-color:#f6d9a8;color:#8a4b00}

/* ------------------------------------------------------------
   Allergies, the same look everywhere (16 Oct 2026)
   Basket and checkout lines: each allergen a white pill with its
   coloured dot (the colour comes from inc/woocommerce/04 as
   --rodi-badge-color), written "Dairy" rather than "DAIRY".
   ------------------------------------------------------------ */
.rodi-ck-allergens { gap: 5px !important; margin-top: 4px !important; }
.rodi-ck-allergen {
    padding: 2px 9px 2px 19px !important;
    border: 1px solid #ecdcc3 !important;
    border-radius: 999px !important;
    background: #fff radial-gradient(circle, var(--rodi-badge-color, #c62828) 0 3.5px, transparent 4px) 6px 50% / 9px 9px no-repeat !important;
    color: #2b2b2b !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    text-transform: lowercase !important;
    line-height: 1.5 !important;
}
.rodi-ck-allergen::first-letter { text-transform: uppercase; }

/* The allergy box at checkout: the cream panel used for allergies. */
.wc-block-components-text-input:has(input[id*="allergies"]) input {
    border-color: #f1d9a6 !important;
    background-color: #fffaf2 !important;
    box-shadow: none !important;
    border-radius: 14px !important;
}
.wc-block-components-text-input:has(input[id*="allergies"]) input:focus {
    border-color: #e8a33d !important;
    box-shadow: 0 0 0 3px rgba(232, 163, 61, .18) !important;
}
.wc-block-components-text-input:has(input[id*="allergies"]) label {
    color: #8a4b00 !important;
}
.wc-block-components-text-input:has(input[id*="allergies"])::after {
    padding-left: 22px;
    background: radial-gradient(circle, #e8a33d 0 7.5px, transparent 8px) 0 1px / 16px 16px no-repeat;
    color: #6b4a14 !important;
}

/* Collection / delivery time box: everything centred (16 Oct 2026). */
.rodi-ready{flex-direction:column;align-items:center;text-align:center}
.rodi-ready-txt{align-items:center}
.rodi-ready-btn{align-self:center}
.rodi-ready-route{text-align:center}