/* Useful motion follows a customer's action: open a surface, press a control,
   select an option. Timing stays tied to the shared --t token (180 ms), which
   also matches the dish dialog's existing close lifecycle. No layout animation. */
.customer-page :is(.mr-btn, .qty-inline button, .seg-opt, .m-close, .catbar-prev, .catbar-next),
.checkout-page :is(.co-tip-options button, .seg-opt),
.horizontal-nav-arrow {
    transition: transform var(--t), background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
    touch-action: manipulation;
}
.customer-page :is(.mr-btn, .qty-inline button, .m-close, .catbar-prev, .catbar-next):active:not(:disabled):not([aria-disabled="true"]),
.horizontal-nav-arrow:active:not(:disabled) { transform: scale(.95); }
.customer-page .seg-opt:active:not(:disabled),
.checkout-page :is(.co-tip-options button, .seg-opt):active:not(:disabled) { transform: scale(.98); }

/* The whole dish row reacts to its existing full-row hit area without moving
   the text, changing row height, or animating every dish on page load. */
.customer-storefront .menu-row:not(.is-off):has(.mr-open:active),
.customer-storefront .menu-row:not(.is-off):has(.mr-open:focus-visible) { background: var(--brand-tint); }
.customer-page .opt,
.checkout-page :is(.co-choice, .pay-opt) { transition: background var(--t), border-color var(--t), box-shadow var(--t); }
.customer-page .opt:active,
.checkout-page :is(.co-choice, .pay-opt):active { background: var(--brand-tint); }
.checkout-page .co-choice-icon .ico { transition: transform var(--t), color var(--t); }
.checkout-page .co-choice:has(input:checked) .co-choice-icon .ico { transform: scale(1.06); }
.checkout-page .co-note summary > .ico:last-child { transition: transform var(--t); }

/* Focus and selected-page feedback also work with a keyboard. */
.customer-page .catbar-tabs a,
.horizontal-nav .subnav a,
.mobile-tabbar a {
    transition: background var(--t), color var(--t), border-color var(--t), box-shadow var(--t);
}
.customer-page .catbar-tabs a:focus-visible,
.horizontal-nav .subnav a:focus-visible { outline-offset: -.125rem; }
.customer-page .catbar-tabs a:not(.active):active,
.horizontal-nav .subnav a:not(.active):active,
.mobile-tabbar a:active { background: var(--brand-tint); color: var(--brand-dark); }

@media (hover: hover) and (pointer: fine) {
    .customer-order-card { transition: transform var(--t), border-color var(--t), box-shadow var(--t); }
    .customer-order-card:hover { transform: translateY(calc(var(--space-1) * -.5)); }
}
/* Touch browsers can retain :hover after a tap. Keep an unpressed add button
   neutral instead of leaving an old dish looking selected indefinitely. */
@media (hover: none) {
    .customer-storefront .menu-row:hover .mr-btn:not(:active):not(:disabled) { background: var(--card); border-color: var(--line-strong); color: var(--ink); }
}

@media (prefers-reduced-motion: no-preference) {
    .customer-storefront .modal-backdrop.open { animation: goeat-surface-fade var(--t) both; }
    .customer-storefront .modal-backdrop.open .modal { animation: goeat-sheet-enter var(--t) both; }
    .customer-storefront .order-bar.has-items { animation: goeat-dock-enter var(--t) both; }
    .mobile-menu[open] > .mobile-menu-panel,
    .lang-dd[open] > .lang-menu,
    .nav-drop[open] > .nav-drop-panel { animation: goeat-popover-enter var(--t) both; transform-origin: top; }
    @media (min-width: 37.5625rem) {
        .customer-storefront .modal-backdrop.open .modal { animation-name: goeat-dialog-enter; }
    }
}

@keyframes goeat-surface-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes goeat-sheet-enter { from { opacity: 0; transform: translateY(var(--space-5)); } to { opacity: 1; transform: translateY(0); } }
@keyframes goeat-dialog-enter { from { opacity: 0; transform: translateY(var(--space-2)) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes goeat-dock-enter { from { opacity: 0; transform: translateY(var(--space-3)); } to { opacity: 1; transform: translateY(0); } }
@keyframes goeat-popover-enter { from { opacity: 0; transform: translateY(calc(var(--space-2) * -1)) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }

@media (prefers-reduced-motion: reduce) {
    .customer-storefront .modal,
    .customer-order-card:hover,
    .checkout-page .co-choice:has(input:checked) .co-choice-icon .ico,
    :is(.btn, .mr-btn, .seg-opt, .m-close, .catbar-prev, .catbar-next, .horizontal-nav-arrow):active,
    .qty-inline button:active,
    .co-tip-options button:active { transform: none !important; }
}