/* =====================================================================
   FoodUp Restaurant — order confirmation "Live status" + order status badges.
   Shared by Motion and Foodie since v0.14.246 (was in motion.css).
   Markup: motion/parts/confirmation.php, foodup_motion_order_badge_html().
   The components use Motion's design tokens (--mo-*); Foodie maps them to its
   own colours below, so one stylesheet serves both.
   ===================================================================== */
#foodie :is(.mo-ty,.mo-obadge){
  --mo-brand:var(--fd-brand);--mo-brand-text:var(--fd-brand);--mo-on-brand:var(--fd-on-brand,#fff);
  --mo-ink:var(--fd-ink);--mo-ink2:var(--fd-muted);--mo-card:#fff;--mo-bg:#eef2e8;--mo-sep:#e3e8dc;
  --mo-display:var(--fd-display);--mo-spring:cubic-bezier(.34,1.56,.64,1);
  --mo-gutter:var(--fd-gutter,24px);--s4:16px;--s5:24px;--s7:48px}
#foodie .mo-ty{color:var(--fd-ink)}
#foodie .mo-ty :is(h1,h2){font-family:var(--fd-display)}
/* Foodie: success in its own olive (amber / red stay as warnings), and cards with
   Foodie's thin border, so they also stand out on the white Mein Konto page */
#foodie .mo-ty.mo-ty--green{--ty:var(--fd-brand);--tyd:var(--fd-brand-hover)}
#foodie .mo-ty :is(.mo-ty__track,.mo-ty__card,.mo-ty__list){box-shadow:inset 0 0 0 1px var(--mo-sep)}
/* =====================================================================
   v0.14.239 — order confirmation, design 1 "Live status"
   (markup: motion/parts/confirmation.php)
   ===================================================================== */
:is(#motion,#foodie) .mo-ty{--ty:#15803D;--tyd:#0f6a32;box-sizing:border-box;max-width:calc(1140px + 2 * var(--mo-gutter));margin:0 auto;padding:var(--s5) var(--mo-gutter) var(--s7)}
:is(#motion,#foodie) .mo-ty--amber{--ty:#B45309;--tyd:#8a3f07}
:is(#motion,#foodie) .mo-ty--red{--ty:#C62828;--tyd:#9b1c1c}
:is(#motion,#foodie) .mo-ty a{text-decoration:none}
:is(#motion,#foodie) .mo-ty .woocommerce-Price-currencySymbol{margin-right:.25em}
/* hero */
:is(#motion,#foodie) .mo-ty__hero{position:relative;display:flex;align-items:center;gap:22px;padding:26px 30px;border-radius:28px;background:radial-gradient(70% 140% at 100% 100%,var(--tyd),transparent 70%),var(--ty);color:#fff;overflow:hidden}
:is(#motion,#foodie) .mo-ty__check{flex:none;display:grid;place-items:center;width:68px;height:68px;border-radius:50%;background:rgba(255,255,255,.16);box-shadow:0 0 0 9px rgba(255,255,255,.07);font-size:36px;animation:mo-ty-pop .7s var(--mo-spring) .1s backwards}
:is(#motion,#foodie) .mo-ty--amber .mo-ty__check .ti{animation:mo-ty-spin 1.1s linear infinite}
:is(#motion,#foodie) .mo-ty__head{flex:1;min-width:0}
:is(#motion,#foodie) .mo-ty__eb{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.78}
:is(#motion,#foodie) .mo-ty__hero h1{margin:3px 0 0;color:inherit;font-family:var(--mo-display);font-size:clamp(28px,4vw,40px);font-weight:900;letter-spacing:-.04em;line-height:1.02}
:is(#motion,#foodie) .mo-ty__hero p{max-width:56ch;margin:7px 0 0;font-size:15px;line-height:1.4;opacity:.92}
:is(#motion,#foodie) .mo-ty__no{flex:none;text-align:right}
:is(#motion,#foodie) .mo-ty__no b{display:block;margin-top:2px;font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
:is(#motion,#foodie) .mo-ty__retry{display:inline-flex;align-items:center;gap:8px;height:42px;margin-top:14px;padding:0 18px;border-radius:999px;background:#fff;color:var(--ty);font-weight:700;transition:transform .25s var(--mo-spring)}
:is(#motion,#foodie) .mo-ty__retry:hover{transform:translateY(-1px)}
/* tracker */
:is(#motion,#foodie) .mo-ty__track{margin-top:14px;padding:20px 20px 14px;border-radius:22px;background:var(--mo-card)}
:is(#motion,#foodie) .mo-ty__steps{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));margin:0;padding:0;list-style:none}
:is(#motion,#foodie) .mo-ty__step{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;margin:0;color:#8e8e93;font-size:13px;font-weight:600;text-align:center}
:is(#motion,#foodie) .mo-ty__step::before,:is(#motion,#foodie) .mo-ty__step::after{content:"";position:absolute;top:18px;right:calc(50% + 19px);width:calc(100% - 38px);height:3px;border-radius:2px;background:var(--mo-bg)}
:is(#motion,#foodie) .mo-ty__step::after{background:var(--ty);transform:scaleX(0);transform-origin:left center}
:is(#motion,#foodie) .mo-ty__step:first-child::before,:is(#motion,#foodie) .mo-ty__step:first-child::after{display:none}
:is(#motion,#foodie) .mo-ty__step:is(.is-done,.is-now)::after{transform:none;animation:mo-ty-line .5s ease calc(.25s + var(--i) * .3s) backwards}
:is(#motion,#foodie) .mo-ty__dot{position:relative;z-index:1;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--mo-bg);font-size:18px;transition:background-color .3s,color .3s,box-shadow .3s}
:is(#motion,#foodie) .mo-ty__step:is(.is-done,.is-now){color:var(--mo-ink)}
:is(#motion,#foodie) .mo-ty__step.is-done .mo-ty__dot{background:var(--ty);color:#fff;animation:mo-ty-dot .45s var(--mo-spring) calc(.4s + var(--i) * .3s) backwards}
:is(#motion,#foodie) .mo-ty__step.is-now .mo-ty__dot{background:var(--mo-card);color:var(--ty);box-shadow:0 0 0 2.5px var(--ty);animation:mo-ty-dot .45s var(--mo-spring) calc(.4s + var(--i) * .3s) backwards}
:is(#motion,#foodie) .mo-ty__step.is-now .mo-ty__dot::after{content:"";position:absolute;inset:-2.5px;border-radius:50%;box-shadow:0 0 0 0 color-mix(in srgb,var(--ty) 40%,transparent);animation:mo-ty-ring 2s ease-out 1.4s infinite}
:is(#motion,#foodie) .mo-ty__status{display:flex;align-items:center;justify-content:center;gap:9px;margin:16px 0 0;padding-top:13px;border-top:.5px solid var(--mo-sep);color:var(--mo-ink);font-size:14.5px;font-weight:600;text-align:center}
:is(#motion,#foodie) .mo-ty__pulse{flex:none;width:8px;height:8px;border-radius:50%;background:var(--ty);animation:mo-ty-blink 1.6s ease-in-out infinite}
:is(#motion,#foodie) .mo-ty__track:not([data-mo-progress]) .mo-ty__pulse{animation:none}
:is(#motion,#foodie) .mo-ty__track.is-rejected .mo-ty__status{color:#C62828}
:is(#motion,#foodie) .mo-ty__track.is-rejected .mo-ty__pulse{background:#C62828;animation:none}
/* receipt + details */
:is(#motion,#foodie) .mo-ty__cols{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:14px;align-items:start;margin-top:14px}
:is(#motion,#foodie) .mo-ty__card{padding:20px 22px;border-radius:22px;background:var(--mo-card)}
:is(#motion,#foodie) .mo-ty__receipt h2{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 6px;font-size:18px;font-weight:800;letter-spacing:-.02em}
:is(#motion,#foodie) .mo-ty__count{padding:4px 10px;border-radius:999px;background:var(--mo-bg);color:var(--mo-ink2);font-size:12.5px;font-weight:600;letter-spacing:0}
:is(#motion,#foodie) .mo-ty__items{margin:0;padding:0;list-style:none}
:is(#motion,#foodie) .mo-ty__items li{display:flex;justify-content:space-between;gap:14px;margin:0;padding:11px 0;font-size:15px}
:is(#motion,#foodie) .mo-ty__items li+li{border-top:.5px solid var(--mo-sep)}
:is(#motion,#foodie) .mo-ty__items b{font-weight:600}
:is(#motion,#foodie) .mo-ty__items small{display:block;margin-top:3px;color:var(--mo-ink2);font-size:13px;line-height:1.35}
:is(#motion,#foodie) .mo-ty__amt{flex:none;font-variant-numeric:tabular-nums}
:is(#motion,#foodie) .mo-ty__sums{margin-top:4px;padding-top:8px;border-top:.5px solid var(--mo-sep)}
:is(#motion,#foodie) .mo-ty__sums div{display:flex;justify-content:space-between;padding:4px 0;color:var(--mo-ink2);font-size:14px;font-variant-numeric:tabular-nums}
:is(#motion,#foodie) .mo-ty__total{display:flex;justify-content:space-between;margin-top:8px;padding-top:14px;border-top:1.5px dashed #d1d1d6;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
:is(#motion,#foodie) .mo-ty__list{margin:0;padding:0;border-radius:22px;background:var(--mo-card);list-style:none;overflow:hidden}
:is(#motion,#foodie) .mo-ty__list li{position:relative;display:flex;align-items:center;gap:12px;margin:0;padding:14px 16px}
:is(#motion,#foodie) .mo-ty__list li+li::before{content:"";position:absolute;top:0;right:0;left:62px;height:.5px;background:var(--mo-sep)}
:is(#motion,#foodie) .mo-ty__list li > span:nth-child(2){flex:1;min-width:0}
:is(#motion,#foodie) .mo-ty__ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--ic);color:#fff;font-size:18px}
:is(#motion,#foodie) .mo-ty__list b{display:block;font-size:15px;font-weight:600}
:is(#motion,#foodie) .mo-ty__list small{display:block;margin-top:2px;color:var(--mo-ink2);font-size:13px;line-height:1.35;overflow-wrap:anywhere}
:is(#motion,#foodie) .mo-ty__pill{flex:none;padding:4px 10px;border-radius:999px;font-size:12px;font-style:normal;font-weight:700}
:is(#motion,#foodie) .mo-ty__pill--amber{background:#fef3c7;color:#92400e}
:is(#motion,#foodie) .mo-ty__pill--green{background:#dcfce7;color:#166534}
:is(#motion,#foodie) .mo-ty__pill--red{background:#fee2e2;color:#b91c1c}
/* actions */
:is(#motion,#foodie) .mo-ty__acts{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:18px}
:is(#motion,#foodie) .mo-ty__btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:48px;padding:0 20px;border-radius:999px;background:var(--mo-card);color:var(--mo-ink);box-shadow:inset 0 0 0 1px var(--mo-sep);font-size:15px;font-weight:700;transition:transform .25s var(--mo-spring),box-shadow .25s ease,filter .2s}
:is(#motion,#foodie) .mo-ty__btn .ti{font-size:18px;transition:transform .3s var(--mo-spring)}
:is(#motion,#foodie) .mo-ty__btn--main{background:var(--mo-brand);color:var(--mo-on-brand);box-shadow:none}
@media (hover:hover) and (pointer:fine){
  :is(#motion,#foodie) .mo-ty__btn:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--mo-sep),0 8px 18px -12px rgba(0,0,0,.35)}
  :is(#motion,#foodie) .mo-ty__btn--main:hover{filter:brightness(.93);box-shadow:0 10px 22px -12px color-mix(in srgb,var(--mo-brand) 80%,transparent)}
  :is(#motion,#foodie) .mo-ty__btn--main:hover .ti{transform:translateX(3px)}
}
:is(#motion,#foodie) .mo-ty__btn:active{transform:scale(.97)}
:is(#motion,#foodie) .mo-ty__credit{margin:30px 0 0;color:#8e8e93;font-size:12.5px;text-align:center}
:is(#motion,#foodie) .mo-ty__credit a{color:var(--mo-brand-text,var(--mo-brand));font-weight:700}
/* phones */
@media (max-width:759px){
  :is(#motion,#foodie) .mo-ty{padding-top:var(--s4)}
  :is(#motion,#foodie) .mo-ty__hero{flex-wrap:wrap;gap:12px 14px;padding:18px;border-radius:24px}
  :is(#motion,#foodie) .mo-ty__check{width:50px;height:50px;font-size:26px;box-shadow:0 0 0 6px rgba(255,255,255,.07)}
  :is(#motion,#foodie) .mo-ty__hero h1{font-size:26px}
  :is(#motion,#foodie) .mo-ty__hero p{font-size:13.5px}
  :is(#motion,#foodie) .mo-ty__no{display:flex;align-items:baseline;gap:6px;flex-basis:100%;margin-left:64px;text-align:left}
  :is(#motion,#foodie) .mo-ty__no b{font-size:16px}
  :is(#motion,#foodie) .mo-ty__track{padding:16px 8px 12px}
  :is(#motion,#foodie) .mo-ty__step{gap:6px;font-size:11px}
  :is(#motion,#foodie) .mo-ty__track[style*="--n:5"] .mo-ty__step{font-size:10.5px;letter-spacing:-.01em}
  :is(#motion,#foodie) .mo-ty__dot{width:34px;height:34px;font-size:16px}
  :is(#motion,#foodie) .mo-ty__step::before,:is(#motion,#foodie) .mo-ty__step::after{top:16px;right:calc(50% + 17px);width:calc(100% - 34px)}
  :is(#motion,#foodie) .mo-ty__status{font-size:13.5px}
  :is(#motion,#foodie) .mo-ty__cols{grid-template-columns:minmax(0,1fr);gap:12px}
  :is(#motion,#foodie) .mo-ty__list{order:-1}
  :is(#motion,#foodie) .mo-ty__card{padding:16px 18px}
  :is(#motion,#foodie) .mo-ty__acts{flex-direction:column-reverse;align-items:stretch}
}
@keyframes mo-ty-pop{0%{transform:scale(.4);opacity:0}60%{transform:scale(1.1);opacity:1}100%{transform:none}}
@keyframes mo-ty-line{from{transform:scaleX(0)}}
@keyframes mo-ty-dot{from{transform:scale(.6);background:var(--mo-bg);color:#8e8e93;box-shadow:none}}
@keyframes mo-ty-ring{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ty) 40%,transparent)}100%{box-shadow:0 0 0 12px color-mix(in srgb,var(--ty) 0%,transparent)}}
@keyframes mo-ty-blink{50%{opacity:.35}}
@keyframes mo-ty-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  :is(#motion,#foodie) .mo-ty *,:is(#motion,#foodie) .mo-ty *::before,:is(#motion,#foodie) .mo-ty *::after{animation:none!important}
}

/* v0.14.240 — order status in the account: the live confirmation page on
   view-order, and a status badge in the order lists */
:is(#motion,#foodie) .mo-ty__back{display:inline-flex;align-items:center;gap:4px;margin:0 0 12px -4px;padding:6px 10px 6px 4px;border-radius:999px;color:var(--mo-brand-text,var(--mo-brand));font-size:14.5px;font-weight:600;transition:background-color .2s}
:is(#motion,#foodie) .mo-ty__back .ti{font-size:18px;transition:transform .3s var(--mo-spring)}
@media (hover:hover){:is(#motion,#foodie) .mo-ty__back:hover{background:color-mix(in srgb,var(--mo-brand) 9%,transparent)}:is(#motion,#foodie) .mo-ty__back:hover .ti{transform:translateX(-3px)}}
:is(#motion,#foodie) .mo-ty__acts .fuo-reorder-form{display:flex;margin:0}
:is(#motion,#foodie) .mo-ty__acts .fuo-reorder-button{border:0;font-family:inherit;cursor:pointer}
@media (max-width:759px){:is(#motion,#foodie) .mo-ty__acts .fuo-reorder-button{width:100%}}
:is(#motion,#foodie) .mo-obadge{display:inline-flex;align-items:center;gap:6px;height:24px;margin-top:6px;padding:0 10px 0 8px;border-radius:999px;font-size:12px;font-weight:700;line-height:1;white-space:nowrap;vertical-align:middle}
:is(#motion,#foodie) .mo-obadge i{width:7px;height:7px;border-radius:50%;background:currentColor}
:is(#motion,#foodie) .mo-obadge.is-live i{animation:mo-ty-blink 1.6s ease-in-out infinite}
:is(#motion,#foodie) .mo-obadge--blue{background:#e0f2fe;color:#075985}
:is(#motion,#foodie) .mo-obadge--green{background:#dcfce7;color:#166534}
:is(#motion,#foodie) .mo-obadge--amber{background:#fef3c7;color:#92400e}
:is(#motion,#foodie) .mo-obadge--red{background:#fee2e2;color:#b91c1c}
:is(#motion,#foodie) .mo-obadge--grey{background:var(--mo-bg);color:var(--mo-ink2)}
:is(#motion,#foodie) .mo-row__main .mo-obadge{align-self:flex-start}
:is(#motion,#foodie) .woocommerce-orders-table .mo-obadge{margin-top:0}
@media (prefers-reduced-motion:reduce){:is(#motion,#foodie) .mo-obadge.is-live i{animation:none}}
/* Foodie dashboard list: the badge sits under the date, as wide as its text */
#foodie .fd-orderlist .mo-obadge{justify-self:start;width:max-content;max-width:100%;margin-top:0}