/* Savior Ordering Engine — ordering inside a restaurant website (1.10.0).
 *
 * The app's own ordering-app.css styles the configurator, cart bar, drawer and menu. Here its
 * design tokens are taken from the website's Experience Theme instead of the app defaults, so
 * the same components wear the merchant's approved colours and type. The website and the app
 * share names for ink and line, which are inherited as-is. Checkout keeps its high-contrast
 * inline styles: a payment field is never themed into illegibility.
 */
body.soe-website {
  --red:    var(--accent, #e11d48);
  --red-d:  var(--accent-dark, #be123c);
  --red-bg: var(--accent-soft, #fff1f2);
  --green:  var(--positive, #16a34a);
  --bg:     var(--ground, #f8fafc);
  --card:   var(--surface, #ffffff);
  /* Secondary text (prices of sizes and toppings, notes) keeps the theme's hue but is pulled toward its ink, so it is
     readable on any ground: Appetite's faint grey was 2.85:1 behind topping prices (1.10.1). */
  --ink2:   color-mix(in srgb, var(--muted, #475569) 60%, var(--ink, #0f172a));
  --ink3:   color-mix(in srgb, var(--faint, #94a3b8) 45%, var(--ink, #0f172a));
  --line2:  var(--line-soft, #f1f5f9);
  --f:      var(--ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
  --shadow-sm: 0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --shadow:    0 4px 16px rgba(15,23,42,.08);
  --shadow-lg: 0 8px 32px rgba(15,23,42,.12);
  --soe-site-header-h: 0px;
}

/* The full menu inside the website's layout: the website already introduces the restaurant,
   and the classic Woo cart/checkout links would leave the experience. */
.soe-site-menu .soa-restaurant-header,
.soe-site-menu .soa-sidebar-head { display: none; }
.soe-site-menu { background: var(--bg); color: var(--ink); font-family: var(--f); }
.soe-site-menu .soa-nav { top: var(--soe-site-header-h); }
/* The app's category bar is white by its own stylesheet; inside a website it takes the website's ground, so a dark
   theme never shows a white strip with pale links (2.55:1 on Tony's Appetite, 1.10.1). */
.soe-site-menu .soa-nav { background: var(--bg); background: color-mix(in srgb, var(--bg) 94%, transparent); border-bottom-color: var(--line); box-shadow: 0 1px 0 var(--line); }
.soe-site-menu .soa-sidebar { top: calc(var(--soe-site-header-h) + 52px); height: calc(100vh - var(--soe-site-header-h) - 52px); }
.soe-site-menu .soa-section { scroll-margin-top: calc(var(--soe-site-header-h) + 60px); }
.soe-site-menu h2 { font-family: var(--disp, var(--f)); }

/* Display type from the website for the configurator and cart titles; controls stay in UI type. */
body.soe-website .soa-modal-title,
body.soe-website .soa-drawer-title { font-family: var(--disp, var(--f)); }
body.soe-website .soa-modal,
body.soe-website .soa-cart-drawer,
body.soe-website .soa-cartbar { font-family: var(--f); }

/* The cart bar is filled with the theme's ink, so its text takes the surface colour, as Brand_Renderer already does on
   the app page. On a dark theme ink is cream, and the bar's own white text vanished on /menu/ (1.10.3). */
body.soe-website .soa-cartbar-inner,
body.soe-website .soa-cb-total,
body.soe-website .soa-cb-items,
body.soe-website .soa-cb-continue,
body.soe-website .soa-cb-continue:hover { color: var(--card, #fff); }
body.soe-website .soa-cb-items,
body.soe-website .soa-cb-continue { opacity: .78; }
body.soe-website .soa-cb-continue:hover { opacity: 1; }

/* A dish pressed on the website and added in place says so where the customer is looking. */
.soe-site-added {
  position: fixed; left: 50%; bottom: 96px; transform: translate(-50%, 12px); z-index: 450;
  background: var(--ink, #0f172a); color: var(--card, #fff); border-radius: 999px; padding: 10px 18px;
  font: 600 14px/1.3 var(--f); box-shadow: var(--shadow-lg); opacity: 0;
  transition: opacity .18s, transform .18s; pointer-events: none; max-width: calc(100vw - 32px);
}
.soe-site-added.on { opacity: 1; transform: translate(-50%, 0); }
.soe-site-added.err { background: #b91c1c; color: #fff; }
@media (prefers-reduced-motion: reduce) { .soe-site-added { transition: none; } }

/* Press feedback on the website's own buttons while the engine answers. */
[data-order-item][aria-busy="true"] { opacity: .7; cursor: progress; }

/* The guest/sign-in box in checkout takes the website's surface, line and ink (the app keeps its
   own colours: these properties are only defined here). Accent buttons already follow --red. */
body.soe-website {
  --soe-co-tint:  var(--surface, #fff7f8);
  --soe-co-line:  var(--line, #fee2e2);
  --soe-co-ink:   var(--ink, #111827);
  --soe-co-muted: var(--muted, #64748b);
}