/* Ogent Ordering Portal — store.css. Generated from the storefront editor; edits here are
   overwritten the next time the merchant publishes. */

:root {
  --sf-bg: #f0ebe3;
  --sf-on-bg: #000000;
  --sf-accent: #8B6355;
  --sf-on-accent: #ffffff;
  --sf-category: #e8d9d0;
  --sf-on-category: #000000;
  --sf-card: #ffffff;
  --sf-on-card: #000000;
  --sf-font-size: 16px;
  --sf-title-size: 1.2rem;
  --sf-radius: 10px;
  --sf-bar-height: 4rem;
  --sf-font: 'Trebuchet MS', 'Gill Sans MT', sans-serif;
  --sf-card-border: none;
  --sf-card-shadow: 0 0.25rem 0.75rem rgba(0,0,0,0.10);
}

body {
  background-color: var(--sf-bg);
  font-family: var(--sf-font);
  font-size: var(--sf-font-size);
}

/* Page text goes on the page containers, NOT on body. Bootstrap paints .bg-white and
   .modal-content white and sets no colour of their own, so a colour inherited from body reaches
   the cart, the payment panel and the whole add-to-cart modal — near-white on white for every
   dark theme, including the Bold preset and every light-logo onboarding. None of it shows in the
   editor's preview, which renders the menu page alone. */
.application_page,
#collection-container {
  color: var(--sf-on-bg);
}

.bg-white,
.modal-content {
  color: #212529;
}

/* And the secondary text inside them. The muted rule below matches a bare element selector, so
   it reaches into these panels too — on a dark theme that put "Taxes calculated at checkout" in
   near-white on the white cart panel. Found by rendering the cart against real Bootstrap; the
   editor's preview shows the menu page only. */
.bg-white small,
.modal-content small,
.bg-white .store_address,
.modal-content .store_address {
  color: #6c757d !important;
  opacity: 1;
}

/* Menu sections */
.category_title {
  font-size: var(--sf-title-size);
}

.category_head {
  background-color: var(--sf-category);
  color: var(--sf-on-category);
  border: var(--sf-card-border) !important;
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-card-shadow) !important;
  cursor: pointer;
}

/* Same colours as the category head: a section heading one level down, and how legacy store.css already painted it. */
.modifier_head {
  background-color: var(--sf-category);
  color: var(--sf-on-category);
  cursor: pointer;
}

/* Item cards */
/* !important on border and box-shadow: the markup carries Bootstrap's .border and .shadow
   (static/jsversion3/menu.js), both of which are themselves !important. Without it the card-edge
   control does nothing on the live page — every card keeps Bootstrap's #dee2e6 hairline and every
   category head keeps its shadow, whatever the merchant picks. */
.item_body {
  background-color: var(--sf-card);
  color: var(--sf-on-card);
  border: var(--sf-card-border) !important;
  border-radius: var(--sf-radius);
  box-shadow: var(--sf-card-shadow) !important;
}

/* The in-cart highlight. Overriding the VARIABLE rather than background-color keeps
   .truncate-overflow::after — which patches the description fade with var(--sf-card) — matching
   the card it is drawn on. #e0e6ed is ogent.css's own highlight colour and is always light. */
.selected_item {
  --sf-card: #e0e6ed;
  --sf-on-card: #000000;
}

/* Order bar and buttons */
.footer_button_bar {
  background-color: var(--sf-accent);
  height: var(--sf-bar-height);
}

/* portal.ejs gives this row no align-items and no height, so its two links sit at the top of the
   bar. Invisible at the default 4rem because that is also the row's natural height; obvious the
   moment the bar is anything else. */
.footer_button_bar > .container {
  height: 100%;
  align-items: center;
}

.footer_button {
  color: var(--sf-on-accent);
}

.item_pop_footer {
  background-color: var(--sf-accent);
  color: var(--sf-on-accent);
}

.after_hour_action_button {
  background-color: var(--sf-accent);
  color: var(--sf-on-accent);
  border-radius: var(--sf-radius);
  cursor: pointer;
}

.exit_links,
.store_list,
.store_closed {
  border-radius: var(--sf-radius);
}

/* Secondary text follows the surface it sits ON, not the page behind it.
   
   The description under a category title is drawn on the category head; an item description is
   drawn on the item card. Deriving one muted grey from the page background meant a merchant could
   set a mid-grey category colour and get 1.19:1 description text while the editor's contrast badge
   — which measures the TITLE, black on that same grey — showed a comfortable pass. Softening the
   surface's own text colour instead can never invert, whatever the merchant picks.
   
   !important because the item description also carries Bootstrap's .text-muted, which is itself
   !important (static/jsversion3/menu.js). The category description does not, but the two are
   written the same way on purpose — the pair is one idea. */
.ww_category_description {
  color: var(--sf-on-category) !important;
  opacity: 0.8;
}

.ww_item_description {
  color: var(--sf-on-card) !important;
  opacity: 0.8;
}

/* These genuinely do sit on the page background, so they soften the page's own text colour.
   A fixed grey could not: on a mid-grey background #6c757d runs about 1.2:1 while the editor's
   badge — measuring black on that same grey — reports a comfortable pass. */
small,
.store_address,
.center span {
  color: var(--sf-on-bg) !important;
  opacity: 0.75;
}

/* AFTER .center span, deliberately. The after-hours subtitle is a <span> inside a .center
   wrapper, and both selectors are specificity (0,1,1), so whichever comes last wins and this one
   has to. Ordered the other way, the label on the merchant's brand-coloured button renders in the
   page's muted grey: about 2.2:1 on the navy swatch we ship. */
.after_hour_action_button span {
  color: var(--sf-on-accent) !important;
  opacity: 1;
}

/* ogent.css rounds the item thumbnail's left corners at a fixed 10px. Once the merchant can
   change corner rounding, a square card with a rounded photo in it looks like a rendering bug. */
.ww_item_thumbnail {
  border-top-left-radius: var(--sf-radius);
  border-bottom-left-radius: var(--sf-radius);
}

/* ogent.css fades a truncated description behind a hardcoded white square. That is invisible on
   a white card and a white block on any other, so it has to follow the card colour — this is
   exactly the sort of thing that only shows up once merchants can pick their own. */
.truncate-overflow::after {
  background: var(--sf-card);
}

#loading_page .spinner-border {
  color: var(--sf-on-bg);
  border-color: var(--sf-on-bg);
  border-right-color: transparent;
}