/* FoodFlow materials: a CSS interpretation of Liquid Glass, not Apple's renderer.
   Layout and product colors live in style.css. Optical materials live only here.
   Regular = controls, clear = over photos, elevated = floating chrome / sheets,
   prominent = primary action, subtle = secondary controls, tinted = selection.
   Dark is the theme mapping of every material; interactive is the state layer. */
:root {
  --glass-regular: rgb(255 255 255 / .54);
  --glass-elevated: rgb(255 255 255 / .70);
  --glass-subtle: rgb(255 255 255 / .35);
  --glass-clear: rgb(22 22 22 / .40);
  --glass-rim: rgb(255 255 255 / .48);
  --glass-low-rim: rgb(65 62 57 / .14);
  --glass-light: rgb(255 255 255 / .16);
  --glass-glint: rgb(255 255 255 / .38);
  --glass-inner-shade: rgb(38 38 38 / .06);
  --glass-shadow-sm: 0 2px 8px rgb(39 37 34 / .06);
  --glass-shadow-lg: 0 10px 30px rgb(39 37 34 / .15), 0 2px 6px rgb(39 37 34 / .06);
  --glass-lens: rgb(255 255 255 / .42);
  --glass-lens-tint: rgb(175 20 11 / .035);
  --glass-filter: rgb(60 88 38 / .94);
  --glass-filter-light: rgb(255 255 255 / .08);
  --glass-blur: 16px;
  --glass-saturation: 1.2;
  --motion-press: 140ms;
  --motion-state: 240ms;
  --motion-panel: 360ms;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.22, 1.28, .36, 1);
}

:root[data-theme="dark"] {
  --glass-regular: rgb(255 255 255 / .095);
  --glass-elevated: rgb(34 34 34 / .64);
  --glass-subtle: rgb(255 255 255 / .065);
  --glass-clear: rgb(18 18 18 / .38);
  --glass-rim: rgb(255 255 255 / .19);
  --glass-low-rim: rgb(255 255 255 / .09);
  --glass-light: rgb(255 255 255 / .045);
  --glass-glint: rgb(255 255 255 / .24);
  --glass-inner-shade: rgb(0 0 0 / .08);
  --glass-shadow-sm: 0 2px 8px rgb(0 0 0 / .12);
  --glass-shadow-lg: 0 10px 30px rgb(0 0 0 / .30), 0 2px 6px rgb(0 0 0 / .15);
  --glass-lens: rgb(255 255 255 / .12);
  --glass-lens-tint: rgb(255 255 255 / .06);
  --glass-filter: rgb(64 85 50 / .72);
  --glass-filter-light: rgb(255 255 255 / .055);
}

/* The shared optical shell. Pseudo-elements never intercept controls or text. */
:is(.glass, .bottom-nav, .cart-bar, .search, .category, .icon-button,
    .reset-button, .primary-button, .add-button, .quantity-control,
    .appearance-control, dialog, .toast) {
  --material-fill: var(--glass-regular);
  --material-solid: var(--card);
  --material-light: var(--glass-light);
  --material-rim: var(--glass-rim);
  --material-shadow: var(--glass-shadow-sm);
  --material-blur: var(--glass-blur);
  border: 1px solid var(--glass-low-rim);
  border-top-color: var(--material-rim);
  background-color: var(--material-solid);
  background-image: linear-gradient(180deg, var(--material-light), transparent 72%);
  box-shadow: inset 0 1px 0 var(--material-light), var(--material-shadow);
}

:is(.glass, .search, .category, .icon-button, .reset-button, .primary-button, .add-button, .quantity-control) {
  position: relative;
}
:is(.glass, .bottom-nav, .cart-bar, .search, .category, .icon-button,
    .reset-button, .primary-button, .add-button, .quantity-control, dialog)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  /* A narrow, low-contrast edge catches light without painting a gloss over the surface. */
  background: linear-gradient(150deg, var(--glass-glint), transparent 35%, transparent 75%, var(--glass-low-rim));
  padding: 1px;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: .55;
  transition: opacity var(--motion-press) ease;
}

/* Material roles, available as reusable classes and mapped to existing controls. */
:is(.glass--elevated, .bottom-nav, .cart-bar, dialog, .toast) {
  --material-fill: var(--glass-elevated);
  --material-shadow: var(--glass-shadow-lg);
  --material-blur: 24px;
}
:is(.glass--subtle, .search__clear, .favorite, .cart-item__title .icon-button) {
  --material-fill: var(--glass-subtle);
  --material-shadow: 0 2px 5px rgb(0 0 0 / .04);
  --material-blur: 10px;
}
:is(.glass--clear, .restaurant-hero__toolbar .icon-button) {
  --material-fill: var(--glass-clear);
  --material-solid: var(--photo-control-solid);
  --material-rim: rgb(255 255 255 / .28);
  --material-light: rgb(255 255 255 / .06);
  --material-blur: 12px;
  color: var(--photo-control-text);
}
:is(.glass--prominent, .primary-button:not(:disabled)) {
  --material-fill: var(--cta);
  --material-solid: var(--cta);
  --material-light: rgb(255 255 255 / .08);
  --material-rim: rgb(255 255 255 / .3);
  color: var(--on-cta);
}
:is(.glass--tinted, .category.is-active) {
  --material-fill: var(--glass-filter);
  --material-solid: var(--filter-fill);
  --material-light: var(--glass-filter-light);
  color: var(--filter-text);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :is(.glass, .bottom-nav, .cart-bar, .search, .category, .icon-button,
      .reset-button, .primary-button, .add-button, .quantity-control,
      .appearance-control, dialog, .toast) {
    background-color: var(--material-fill);
  }
  /* In-flow controls sit on an opaque page/card, with no imagery beneath them.
     Their optical shell is identical without allocating a backdrop texture.
     Reserve real sampling for surfaces that actually pass over other content. */
  :is(.glass, .bottom-nav, .cart-bar, .restaurant-hero__toolbar .icon-button, dialog, .toast) {
    -webkit-backdrop-filter: blur(var(--material-blur)) saturate(var(--glass-saturation));
    backdrop-filter: blur(var(--material-blur)) saturate(var(--glass-saturation));
  }
  /* Small interactive controls can cross images in scrolling and alternate layouts. */
  :is(.search, .category, .theme-toggle, .restaurant .favorite, .restaurant-menu .add-button) {
    -webkit-backdrop-filter: blur(8px) saturate(1.15);
    backdrop-filter: blur(8px) saturate(1.15);
  }
}

/* Content stays grounded. Blur is reserved for controls, never whole cards. */
.restaurant { border-color: transparent; border-radius: 18px; box-shadow: 0 2px 8px rgb(0 0 0 / .04); }
.restaurant__media { border-radius: 11px; }
.restaurant__link { transition: transform var(--motion-state) var(--ease-spring); }
.restaurant__link:active { transform: scale(.985); }
.restaurant__name { margin-right: 38px; }
.restaurant .favorite { position: absolute; top: 6px; right: 6px; width: 38px; height: 38px; padding: 9px; border-radius: 50%; }
.restaurant .favorite::before { content: ""; position: absolute; inset: -3px; }
.restaurant .favorite .icon { width: 18px; height: 18px; }
.restaurant-hero { border-radius: 22px; }
.restaurant-hero__toolbar .icon-button { position: relative; border-color: var(--material-rim); }
.restaurant-intro h1 { font-weight: 700; }
.restaurant-facts > p { color: var(--secondary); font-weight: 600; }
.dish { padding-block: 16px; }
.dish h3 { font-weight: 650; }
.dish__bottom { margin-top: 10px; }
.dish strong { font-size: 1.0625rem; }
.cart-item, .cart-summary, .empty-state { border-color: transparent; border-radius: 22px; }
.cart-summary__total { color: var(--heading); }
.empty-state { padding-block: 36px; }
.empty-state > .icon { width: 40px; height: 40px; stroke-width: 1.4; }
.info-note { background: var(--card); border-radius: 18px; }

.icon-button, .back-button, .reset-button, .primary-button { border-radius: 999px; }
.category { border-radius: 999px; min-height: 40px; padding: 8px 15px; margin-block: 2px; font-weight: 600; }
.category::before { content: ""; position: absolute; inset: -2px 0; border: 0; background: none; }
.category.is-active::before, .menu-categories .category.is-active::before { background: none; border: 0; }
.category.is-active { color: var(--filter-text); }
.categories { gap: 8px; padding-block: 5px; }
.search { border-radius: 999px; min-height: 50px; transition: box-shadow var(--motion-state) ease, border-color var(--motion-state) ease; }
.search input { border-radius: inherit; }
.search:focus-within { border-color: var(--accent); box-shadow: inset 0 1px 0 var(--glass-rim), 0 4px 18px var(--focus); }
.search__clear { border: 0; box-shadow: none; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; margin-right: 3px; }
.search__clear::after { display: none; }
.restaurant-menu .add-button { border-radius: 50%; min-width: 44px; color: var(--accent); }
.restaurant-menu .add-button:disabled { border-radius: 999px; }
.quantity-control, .restaurant-menu .quantity-control { border-radius: 999px; }
.quantity-control button { border-radius: 50%; }
.quantity-control span { min-width: 26px; }
.appearance-setting { gap: 14px; }
.appearance-setting select { border-radius: 999px; padding-inline: 14px; }
.appearance-setting select option { background: var(--card); color: var(--text); }

/* One floating material with a separate moving optical lens. */
.bottom-nav { border-radius: 999px; padding: 5px; min-height: 66px; isolation: isolate; }
.nav-item { position: relative; z-index: 1; border: 0; min-height: 54px; gap: 4px; color: var(--text); font-weight: 500; }
.nav-item--active { color: var(--accent); background: none; box-shadow: none; }
.nav-item .icon { transition: transform var(--motion-state) var(--ease-spring), stroke-width var(--motion-state) ease; }
.nav-item--active .icon { transform: translateY(-1px); }
.theme-ready .nav-item--active .icon { animation: none; }
.nav-lens { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 999px; pointer-events: none; z-index: 0; opacity: 0;
  border: 1px solid var(--glass-rim);
  background: linear-gradient(180deg, var(--glass-lens), var(--glass-lens-tint));
  box-shadow: inset 0 1px 0 var(--glass-light), 0 1px 4px rgb(0 0 0 / .07);
  transition: transform 480ms var(--ease-spring), opacity 160ms ease;
}
.nav-lens.is-visible { opacity: 1; }
.cart-bar { min-width: 0; padding: 10px 17px; gap: 8px; color: var(--accent); border-radius: 999px; }
.cart-count { background: var(--accent); color: var(--on-accent); }
.cart-bar.is-added { animation: cart-arrive 380ms var(--ease-spring); }
.cart-bar:active:not(:disabled) { transform: translateX(-50%) scale(.97); }
.toast { width: max-content; max-width: min(460px, calc(100% - 28px)); color: var(--text); border-radius: 22px; text-align: center; animation: toast-enter var(--motion-state) var(--ease-out); }

/* A transparent header becomes a local scroll-edge material after content passes it. */
.topbar { position: sticky; top: 0; z-index: 8; isolation: isolate; }
.topbar::before { content: ""; position: absolute; inset: 0 0 -64px; z-index: -1; pointer-events: none; background: var(--page); opacity: 0; transition: opacity var(--motion-state) ease; -webkit-mask-image: linear-gradient(#000 35%, transparent 100%); mask-image: linear-gradient(#000 35%, transparent 100%); }
.is-scrolled .topbar::before { opacity: 1; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar::before { background: linear-gradient(var(--glass-elevated), transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
}

/* Native dialog semantics keep focus trapping, inert background and Escape. */
dialog { margin: auto auto calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: 30px; padding: 42px 24px 24px; max-width: 480px; box-shadow: var(--glass-shadow-lg); }
dialog[open] { animation: sheet-enter var(--motion-panel) var(--ease-spring); }
dialog::backdrop { background: rgb(25 25 23 / .46); animation: backdrop-enter var(--motion-state) ease; }
dialog.is-closing { animation: sheet-exit 180ms ease-in forwards; }
dialog.is-closing::backdrop { animation: backdrop-exit 180ms ease-in forwards; }
dialog h2 { font-weight: 700; }
dialog p { color: var(--text); }
.sheet-handle { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 72px; height: 38px; display: grid; place-items: center; padding: 0; background: transparent; border-radius: 18px; touch-action: none; }
.sheet-handle span { width: 34px; height: 4px; border-radius: 4px; background: var(--muted); opacity: .7; }
.sheet-handle:active:not(:disabled) { transform: translateX(-50%) scale(.97); }
.dialog-actions { gap: 10px; }
.dialog-actions > button { flex: 1 1 140px; }
body.has-modal { overflow: hidden; }

/* One interactive state layer; no perpetual decorative animation or layout loop. */
:is(.glass--interactive, .category, .icon-button, .reset-button, .primary-button, .add-button, .quantity-control button) {
  transition: transform var(--motion-state) var(--ease-spring), color var(--motion-press) ease, box-shadow var(--motion-press) ease, border-color var(--motion-press) ease;
}
:is(.category, .icon-button, .reset-button, .primary-button, .add-button):active:not(:disabled) { transform: scale(.97); box-shadow: inset 0 1px 3px var(--glass-inner-shade); }
:is(.category, .icon-button, .reset-button, .primary-button, .add-button):active::after { opacity: .75; }
.primary-button:not(:disabled) { box-shadow: inset 0 1px 0 var(--material-light), var(--material-shadow); }
:is(button:disabled, .restaurant-menu .add-button:disabled) { background: var(--surface); color: var(--disabled); box-shadow: none; border-color: var(--divider); -webkit-backdrop-filter: none; backdrop-filter: none; }
button:disabled::after { display: none; }
@media (hover: hover) and (pointer: fine) {
  :is(.category, .icon-button, .reset-button, .add-button):hover:not(:disabled) { background-color: var(--material-fill); border-color: var(--glass-rim); }
  .primary-button:hover:not(:disabled) { background-color: var(--cta-hover); }
  .restaurant:hover { border-color: var(--glass-low-rim); }
}
@keyframes cart-arrive { 0% { transform: translateX(-50%) scale(.94); } 55% { transform: translateX(-50%) scale(1.035); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes toast-enter { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }
@keyframes sheet-enter { from { opacity: .5; transform: translateY(60px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sheet-exit { to { opacity: 0; transform: translateY(50px) scale(.98); } }
@keyframes backdrop-enter { from { opacity: 0; } }
@keyframes backdrop-exit { to { opacity: 0; } }
@media (min-width: 760px) { dialog { margin: auto; } }
@media (max-width: 359px) {
  .category { padding-inline: 13px; }
  .bottom-nav { width: calc(100% - 16px); }
  .restaurant .favorite { width: 34px; height: 34px; padding: 7px; }
  .restaurant .favorite::before { inset: -5px; }
  dialog { padding-inline: 18px; }
}
/* Opaque materials retain shape and selection in unsupported browsers and a11y modes. */
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :is(.glass, .bottom-nav, .cart-bar, .search, .category, .icon-button,
      .reset-button, .primary-button, .add-button, .quantity-control,
      .appearance-control, .restaurant-hero__toolbar .icon-button, .restaurant-menu .add-button, .restaurant-menu .quantity-control, dialog, .toast) {
    background: var(--material-solid); -webkit-backdrop-filter: none; backdrop-filter: none;
    border-color: var(--control-border); box-shadow: none;
  }
  .nav-lens { background: var(--accent-soft); border-color: var(--accent); }
  .topbar::before { background: var(--page); -webkit-backdrop-filter: none; backdrop-filter: none; -webkit-mask-image: none; mask-image: none; inset-block-end: 0; }
  .is-scrolled .topbar::before { opacity: 1; }
  :is(.glass, .bottom-nav, .cart-bar, .search, .category, .icon-button,
      .reset-button, .primary-button, .add-button, .quantity-control, dialog)::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, *::backdrop { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
@media (forced-colors: active) {
  .nav-lens { background: Highlight; border: 2px solid Highlight; }
  .nav-item--active { color: HighlightText; }
}