/* =====================================================================
   FoodUp Restaurant — floating labels (outlined fields) for every website
   style. Moved out of motion.css in v0.14.246 so Motion, Foodie and
   DeliverEat share one implementation. Markup from float-labels.js:
   <span class="fu-fl"> field + .fu-fl__label </span>.

   Prefix P = "html body:not(#fu-n):not(#fu-n)": two IDs of weight, the same
   as Motion's old "body#motion#motion", so these rules outrank the older
   field rules of all three styles and the plugin's (some of them
   !important). !important only where those force a value.
   ===================================================================== */

/* colours per style (the only style-specific part) */
html body{--fl-brand:var(--fu-primary,#ff6600);--fl-brand-text:color-mix(in srgb,var(--fl-brand) 78%,#000);--fl-ink:#1d1d1f;--fl-card:#fff;--fl-r:14px}
html body#motion{--fl-brand:var(--mo-brand);--fl-brand-text:var(--mo-brand-text,var(--mo-brand));--fl-ink:var(--mo-ink);--fl-card:var(--mo-card,#fff)}
html body#foodie{--fl-brand:var(--fd-brand);--fl-brand-text:var(--fd-brand);--fl-ink:var(--fd-ink);--fl-card:#fff}

html body:not(#fu-n):not(#fu-n) .fu-fl{
  --fl-bg:var(--fl-card);--fl-out:var(--fl-bg);--fl-pl:16px;--fl-line:#c7c7cc;--fl-on:var(--fl-brand);--fl-on-text:var(--fl-brand-text);--fl-err:#D70015;
  position:relative;display:block;width:100%;min-width:0;margin:0;padding:0}
html body:not(#fu-n):not(#fu-n) .fu-fl :is(input,select,textarea){
  position:relative;z-index:1;box-sizing:border-box;width:100%!important;max-width:none!important;height:56px!important;min-height:56px!important;margin:0!important;padding:0 16px 0 var(--fl-pl)!important;
  border:1.5px solid var(--fl-line)!important;border-radius:var(--fl-r)!important;background-color:var(--fl-bg)!important;box-shadow:none!important;outline:0!important;
  color:var(--fl-ink)!important;font-family:inherit!important;font-size:16px!important;font-weight:400!important;line-height:1.3!important;
  transition:border-color .2s ease,box-shadow .3s ease!important}
html body:not(#fu-n):not(#fu-n) .fu-fl select{padding-right:42px!important;cursor:pointer}
html body:not(#fu-n):not(#fu-n) .fu-fl .fuo-select-shell{display:block;background:none!important;border:0!important;box-shadow:none!important;padding:0!important}
html body:not(#fu-n):not(#fu-n) .fu-fl .fuo-select-shell > .ti{z-index:2}
html body:not(#fu-n):not(#fu-n) .fu-fl--area > textarea{height:auto!important;min-height:108px!important;padding:16px 16px 16px var(--fl-pl)!important;resize:vertical}
html body:not(#fu-n):not(#fu-n) .fu-fl > :is(input,textarea)::placeholder{color:transparent!important;opacity:1}
@media (hover:hover){html body:not(#fu-n):not(#fu-n) .fu-fl:hover :is(input,select,textarea):not(:focus){border-color:#8e8e93!important}}
html body:not(#fu-n):not(#fu-n) .fu-fl :is(input,select,textarea):focus{border-color:var(--fl-on)!important;box-shadow:inset 0 0 0 .5px var(--fl-on),0 0 0 4px color-mix(in srgb,var(--fl-on) 14%,transparent)!important}
html body:not(#fu-n):not(#fu-n) .fu-fl > :is(input,textarea):-webkit-autofill{-webkit-box-shadow:0 0 0 100px var(--fl-bg) inset!important;-webkit-text-fill-color:var(--fl-ink)}

/* the label: resting inside the field, floated onto the border */
html body:not(#fu-n):not(#fu-n) .fu-fl__label{
  position:absolute;z-index:3;left:11px;top:0;max-width:calc(100% - 26px);padding:0 5px;border-radius:4px;
  color:#8e8e93;font-size:16px;font-weight:400;line-height:20px;letter-spacing:0;text-transform:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;
  background:linear-gradient(transparent,transparent);
  transform:translate(calc(var(--fl-pl) - 16px),18px);transform-origin:left center;
  transition:transform .38s cubic-bezier(.3,1.25,.5,1),color .2s ease,font-weight .2s ease}
html body:not(#fu-n):not(#fu-n) .fu-fl--area .fu-fl__label{transform:translate(calc(var(--fl-pl) - 16px),16px)}
html body:not(#fu-n):not(#fu-n) .fu-fl:is(:focus-within,.fu-fl--select) .fu-fl__label,
html body:not(#fu-n):not(#fu-n) .fu-fl:has(> :is(input,textarea):not(:placeholder-shown)) .fu-fl__label{
  transform:translateY(-10px) scale(.78);color:var(--fl-lc,#6e6e73);font-weight:600;
  background:linear-gradient(var(--fl-out) 50%,var(--fl-bg) 50%)}
html body:not(#fu-n):not(#fu-n) .fu-fl:has(> :autofill) .fu-fl__label{transform:translateY(-10px) scale(.78);color:var(--fl-lc,#6e6e73);font-weight:600;background:linear-gradient(var(--fl-out) 50%,var(--fl-bg) 50%)}
html body:not(#fu-n):not(#fu-n) .fu-fl:focus-within{--fl-lc:var(--fl-on-text)}
html body:not(#fu-n):not(#fu-n) .fu-fl:focus-within .fu-fl__label{color:var(--fl-on-text)}

/* leading icon (DeliverEat account forms) and show-password button */
html body:not(#fu-n):not(#fu-n) .fu-fl--icon{--fl-pl:46px}
html body:not(#fu-n):not(#fu-n) .fu-fl__icon{position:absolute!important;z-index:4!important;left:16px!important;top:28px!important;bottom:auto!important;margin:0!important;transform:translateY(-50%)!important;color:#8e8e93;font-size:19px;line-height:1;pointer-events:none;transition:color .2s ease}
html body:not(#fu-n):not(#fu-n) .fu-fl:focus-within .fu-fl__icon{color:var(--fl-on-text)}
html body:not(#fu-n):not(#fu-n) .fu-fl--eye :is(input){padding-right:52px!important}
html body:not(#fu-n):not(#fu-n) .fu-fl--eye > button{position:absolute!important;z-index:4!important;right:8px!important;top:28px!important;bottom:auto!important;margin:0!important;transform:translateY(-50%)!important}

/* errors (WooCommerce marks the row) — red, with a short shake */
html body:not(#fu-n):not(#fu-n) :is(.woocommerce-invalid,.fu-fl-err) > * .fu-fl :is(input,select,textarea),
html body:not(#fu-n):not(#fu-n) :is(.woocommerce-invalid,.fu-fl-err) .fu-fl :is(input,select,textarea){border-color:var(--fl-err)!important;box-shadow:inset 0 0 0 .5px var(--fl-err)!important}
html body:not(#fu-n):not(#fu-n) :is(.woocommerce-invalid,.fu-fl-err) .fu-fl{--fl-lc:var(--fl-err)}
html body:not(#fu-n):not(#fu-n) :is(.woocommerce-invalid,.fu-fl-err) .fu-fl .fu-fl__label{color:var(--fl-err)}
html body:not(#fu-n):not(#fu-n) .woocommerce-invalid .fu-fl{animation:fu-fl-shake .42s cubic-bezier(.36,.07,.19,.97)}

/* the original label stays for screen readers only */
html body:not(#fu-n):not(#fu-n) .fu-fl-src{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
@keyframes fu-fl-shake{20%,80%{transform:translateX(-2px)}40%{transform:translateX(4px)}60%{transform:translateX(-4px)}}
@media (prefers-reduced-motion:reduce){
  html body:not(#fu-n):not(#fu-n) .fu-fl__label,html body:not(#fu-n):not(#fu-n) .fu-fl :is(input,select,textarea),html body:not(#fu-n):not(#fu-n) .fu-fl__icon{transition:none!important}
  html body:not(#fu-n):not(#fu-n) .woocommerce-invalid .fu-fl{animation:none}
}

/* ---- FoodUp checkout (same plugin markup in every style) ---- */
/* spacing: room for the floated labels (they sit 10px above the border). One source
   of truth: --fu-co-gap is the row gap AND the amount the note moves up in pickup
   (the collapsed address group is still a grid item, so it adds a second gap). */
html body .fuo-checkout-shell{--fu-co-gap:16px}
html body:not(#fu-n):not(#fu-n) .fuo-checkout-native .woocommerce-billing-fields__field-wrapper,
html body:not(#fu-n):not(#fu-n) .fuo-checkout-native .fuo-delivery-fields-group__inner{row-gap:var(--fu-co-gap)!important}
html body:not(#motion):not(#fu-n) .fuo-checkout-shell .fuo-checkout-native .woocommerce-billing-fields__field-wrapper > #order_comments_field{margin-top:0!important}
html body:not(#motion):not(#fu-n) .fuo-checkout-shell[data-order-mode="pickup"] .fuo-checkout-native .woocommerce-billing-fields__field-wrapper > #order_comments_field{margin-top:calc(-1 * var(--fu-co-gap))!important}
/* the order note: one line like the other fields, grows smoothly to a box on focus / with text */
html body:not(#fu-n):not(#fu-n) .fuo-checkout-native .fu-fl #order_comments{height:56px!important;min-height:56px!important;max-height:none!important;padding:17px 16px 0 var(--fl-pl)!important;background-color:var(--fl-bg)!important;border:1.5px solid var(--fl-line)!important;resize:none!important;overflow:hidden;transition:height .4s cubic-bezier(.32,.72,0,1),border-color .2s ease,box-shadow .3s ease!important}
html body:not(#fu-n):not(#fu-n) .fuo-checkout-native .fu-fl #order_comments:is(:focus,:not(:placeholder-shown)){height:104px!important;overflow:auto}
html body:not(#fu-n):not(#fu-n) .fuo-checkout-native .fu-fl #order_comments:focus{border-color:var(--fl-on)!important;box-shadow:inset 0 0 0 .5px var(--fl-on),0 0 0 4px color-mix(in srgb,var(--fl-on) 14%,transparent)!important}
html body:not(#fu-n):not(#fu-n) .fuo-checkout-native .fu-fl--area:has(#order_comments) .fu-fl__label{transform:translate(calc(var(--fl-pl) - 16px),18px)}
html body:not(#fu-n):not(#fu-n) .fuo-checkout-native .fu-fl--area:has(#order_comments):focus-within .fu-fl__label,
html body:not(#fu-n):not(#fu-n) .fuo-checkout-native .fu-fl--area:has(> #order_comments:not(:placeholder-shown)) .fu-fl__label{transform:translateY(-10px) scale(.78)}
/* rows that fold away (delivery ↔ pickup) clip their content; the clip margin lets
   a floated label stick out above the border */
html body:not(#fu-n):not(#fu-n) .fuo-checkout-native :is(.form-row,.fuo-delivery-fields-group__inner,.woocommerce-billing-fields__field-wrapper):has(.fu-fl){overflow:clip!important;overflow-clip-margin:14px}
/* WooCommerce's search dropdowns (country, canton) look like the other fields */
html body:not(#fu-n):not(#fu-n) .fu-fl .select2-container{width:100%!important;display:block}
html body:not(#fu-n):not(#fu-n) .fu-fl .select2-container .select2-selection--single{display:flex;align-items:center;height:56px!important;padding:0 42px 0 var(--fl-pl)!important;border:1.5px solid var(--fl-line)!important;border-radius:var(--fl-r)!important;background:var(--fl-bg)!important;box-shadow:none!important;transition:border-color .2s ease,box-shadow .3s ease}
html body:not(#fu-n):not(#fu-n) .fu-fl .select2-container .select2-selection__rendered{padding:0!important;color:var(--fl-ink)!important;font-size:16px!important;line-height:1.3!important}
html body:not(#fu-n):not(#fu-n) .fu-fl .select2-container .select2-selection__arrow{top:50%!important;right:14px!important;height:20px!important;transform:translateY(-50%)}
html body:not(#fu-n):not(#fu-n) .fu-fl .select2-container--open .select2-selection--single,
html body:not(#fu-n):not(#fu-n) .fu-fl .select2-container--focus .select2-selection--single{border-color:var(--fl-on)!important;box-shadow:inset 0 0 0 .5px var(--fl-on),0 0 0 4px color-mix(in srgb,var(--fl-on) 14%,transparent)!important}
html body:not(#fu-n):not(#fu-n) .fu-fl:has(.select2-container--open, .select2-container--focus){--fl-lc:var(--fl-on-text)}
html body:not(#fu-n):not(#fu-n) .fu-fl:has(.select2-container--open, .select2-container--focus) .fu-fl__label{color:var(--fl-on-text)}
/* coupon: compact like its "Anwenden" button; the fold-out panel lets the label out */
html body:not(#fu-n):not(#fu-n) .fuo-review-coupon .fu-fl input{height:48px!important;min-height:48px!important}
html body:not(#fu-n):not(#fu-n) .fuo-review-coupon .fu-fl .fu-fl__label{transform:translate(0,14px)}
html body:not(#fu-n):not(#fu-n) .fuo-review-coupon .fu-fl:is(:focus-within,:has(> input:not(:placeholder-shown))) .fu-fl__label{transform:translateY(-10px) scale(.78)}
html body:not(#fu-n):not(#fu-n) .fuo-review-coupon :is(.fuo-review-coupon__form,.fuo-review-coupon__body,.fuo-review-coupon__panel):has(.fu-fl){overflow:clip!important;overflow-clip-margin:14px}

/* ---- account › address form (all styles) ----
   FoodUp marks Telefon as a right half and E-Mail as a left half (they pair up in the
   checkout), but here WooCommerce puts the country between them, so Telefon sat alone
   on the right. A two-column grid puts first/last name, then E-Mail | Telefon, side by
   side; every other field is full width. The 16px gap leaves room for the floated labels. */
html body:not(#fu-n):not(#fu-n) .woocommerce-address-fields__field-wrapper{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
html body:not(#fu-n):not(#fu-n) .woocommerce-address-fields__field-wrapper::before,
html body:not(#fu-n):not(#fu-n) .woocommerce-address-fields__field-wrapper::after{content:none;display:none}
html body:not(#fu-n):not(#fu-n) .woocommerce-address-fields__field-wrapper > .form-row{grid-column:1 / -1;order:10;float:none!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important}
html body:not(#fu-n):not(#fu-n) .woocommerce-address-fields__field-wrapper > :is(#billing_first_name_field,#shipping_first_name_field){grid-column:1;order:1}
html body:not(#fu-n):not(#fu-n) .woocommerce-address-fields__field-wrapper > :is(#billing_last_name_field,#shipping_last_name_field){grid-column:2;order:2}
html body:not(#fu-n):not(#fu-n) .woocommerce-address-fields__field-wrapper > #billing_email_field{grid-column:1;order:3}
html body:not(#fu-n):not(#fu-n) .woocommerce-address-fields__field-wrapper > #billing_phone_field{grid-column:2;order:4}
@media (max-width:520px){
  html body:not(#fu-n):not(#fu-n) .woocommerce-address-fields__field-wrapper > :is(#billing_email_field,#billing_phone_field){grid-column:1 / -1}
}