/* ===================================================================== FoodUp Restaurant — small fixes shared by the website styles (v0.14.246). Loaded for every style after its own stylesheets (see functions.php). Floating labels and the account address grid: float-labels.css. ===================================================================== */ /* WooCommerce moves focus to a new notice from script (tabindex="-1") so screen readers announce it; the browser then drew its focus ring around the notice's own frame, which looked like a second border. Nobody can tab to it, so no ring. */ html body .woocommerce-notices-wrapper [tabindex="-1"]:focus, html body :is(.woocommerce-message,.woocommerce-info,.woocommerce-error)[tabindex="-1"]:focus{outline:0} /* Checkout payment switch on phones (Foodie and DeliverEat use FoodUp's switch; Motion has its own list). Three options side by side get ~90–100px each, so "Banküberweisung" broke mid-word ("Barzahlun-g" too). On phones the options stack as rows and the highlight slides up and down instead of sideways: FoodUp already sets --fuo-payment-index / --fuo-payment-count, the indicator just moves on Y. !important only where FoodUp's own switch rules use it. */ @media (max-width:520px){ html body:not(#motion).fuo-checkout-page .fuo-payment-switch{grid-template-columns:minmax(0,1fr)!important;grid-auto-rows:46px;min-height:0!important} html body:not(#motion).fuo-checkout-page .fuo-payment-switch__indicator{ width:calc(100% - 12px)!important;height:calc((100% - 12px) / var(--fuo-payment-count))!important; transform:translate3d(0,calc(var(--fuo-payment-index) * 100%),0)!important} html body:not(#motion).fuo-checkout-page .fuo-payment-switch__button{ justify-content:flex-start!important;gap:10px!important;min-height:46px!important;padding:0 16px!important; font-size:14px!important;white-space:nowrap!important} html body:not(#motion).fuo-checkout-page .fuo-payment-switch__button .ti{font-size:18px!important} } /* Menu cards without a photo (Foodie and DeliverEat; Motion has its own cards). FoodUp gives every card a fixed 134px (the height of a photo card) and lays name, description and price out in an absolutely positioned body, so the card can never follow its text. v0.14.246 freed the height, but the body stayed absolute: a card with a description then squeezed the text to one cut-off line (v0.14.247 fix). Now the body is back in normal flow with the same spacing as padding (12px, 58px on the right for the + button), so the card is exactly as tall as name + description + price (min. 96px). In a row next to a taller card the grid evens the heights and the body fills the card, so the price stays at the bottom, level with the + button. In the cart the quantity stepper lies flat (below), so the card height never changes. */ html body:not(#motion) .foodup-ordering.fuo-theme-delivereat :is(.fuo-product-grid > .fuo-product-card,.fuo-m-product-card).is-fuo-no-own-image{ display:flex!important;flex-direction:column;height:auto!important;min-height:96px!important;max-height:none!important} html body:not(#motion) .foodup-ordering.fuo-theme-delivereat :is(.fuo-product-grid > .fuo-product-card,.fuo-m-product-card).is-fuo-no-own-image > :is(.fuo-product-card__body,.fuo-m-product-card__body){ position:relative!important;inset:auto!important;flex:1 1 auto;height:auto!important;box-sizing:border-box;padding:12px 58px 12px 14px!important;gap:4px} /* v0.14.248: in the cart, the bin / 1 / + stepper lies flat in one 34px row (the price line's height) (where the + was, level with the price) instead of standing upright, which needed 134px and made the card jump taller. The card keeps its height; the pill grows out of the + button. */ html body:not(#motion) .foodup-ordering.fuo-theme-delivereat .is-fuo-no-own-image :is(.fuo-card-qty,.fuo-m-card-qty){ top:auto!important;bottom:0!important;right:0!important;left:auto!important;flex:none!important;width:max-content!important;height:34px!important;min-height:0!important; grid-template-columns:repeat(3,32px)!important;grid-template-rows:32px!important;grid-auto-flow:column;align-items:center; transform-origin:right center} html body:not(#motion) .foodup-ordering.fuo-theme-delivereat .is-fuo-no-own-image .fuo-m-card-qty{animation:fu-qty-in .38s cubic-bezier(.32,.72,0,1)} html body:not(#motion) .foodup-ordering.fuo-theme-delivereat .is-fuo-no-own-image :is(.fuo-card-qty,.fuo-m-card-qty) > *{width:32px!important;height:32px!important;min-height:0!important} html body:not(#motion) .foodup-ordering.fuo-theme-delivereat .is-fuo-no-own-image .fuo-m-card-qty{position:absolute!important} /* phones show the stepper permanently: the round + behind it (FoodUp's underlay) used to be covered by the upright stepper, so it is hidden now that the pill is flat */ html body:not(#motion) .foodup-ordering.fuo-theme-delivereat .is-fuo-no-own-image .fuo-m-product-action.has-simple-cart-items > .fuo-action-underlay{opacity:0!important;pointer-events:none} /* desktop keeps FoodUp's rest state (round + with the count badge); on interaction the pill now opens sideways out of the + (was: upwards) */ html body:not(#motion) .foodup-ordering.fuo-theme-delivereat .is-fuo-no-own-image .fuo-product-action.has-simple-cart-items > .fuo-card-qty{ inset:auto 0 0 auto!important;animation:none;transform:scaleX(.35)!important;transform-origin:right center!important} html body:not(#motion) .foodup-ordering.fuo-theme-delivereat .is-fuo-no-own-image.is-fuo-qty-expanded > .fuo-product-action.has-simple-cart-items > .fuo-card-qty{transform:none!important} @keyframes fu-qty-in{from{clip-path:inset(0 0 0 calc(100% - 34px) round 17px)}to{clip-path:inset(0 0 0 0 round 17px)}} @media (prefers-reduced-motion:reduce){ html body:not(#motion) .foodup-ordering.fuo-theme-delivereat .is-fuo-no-own-image .fuo-m-card-qty{animation:none} html body:not(#motion) .foodup-ordering.fuo-theme-delivereat .is-fuo-no-own-image .fuo-product-action.has-simple-cart-items > .fuo-card-qty{transition:none!important} } /* Photo cards keep FoodUp's fixed 134px; next to the photo there is room for the name, two description lines and the price. FoodUp allowed three lines, so a long text ran under the price ("Oregano" cut in half). Two lines, ending in "…". */ html body:not(#motion) .foodup-ordering.fuo-theme-delivereat :is(.fuo-product-grid > .fuo-product-card,.fuo-m-product-card):not(.is-fuo-no-own-image) :is(.fuo-product-card__body,.fuo-m-product-card__body) > p{ display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2!important;line-clamp:2;overflow:hidden!important;max-height:none!important} /* Liefergebiet dropdown arrow (Foodie and DeliverEat). On phones FoodUp hides its chevron icon and paints an SVG arrow into the