/* ============================================================================
   My ePay Meals — landing redesign
   Self-contained stylesheet (design tokens + components). Look & feel only.
   Reference: "Redesign meal ordering app" (React/Tailwind/shadcn).
   ========================================================================== */

:root {
  --font-sans: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --background: #FAFAF7;
  --foreground: #1A1512;
  --card: #FFFFFF;
  --muted: #F4F1EE;
  --muted-foreground: #7A7269;
  --accent: #FFF3EE;
  --primary: #E8400C;
  --primary-foreground: #FFFFFF;
  --border: rgba(26, 21, 18, 0.1);
  --dark: #1A1512;
  --radius: 0.75rem;
  --shadow-sm: 0 1px 2px rgba(26,21,18,.06), 0 1px 3px rgba(26,21,18,.05);
  --shadow-lg: 0 10px 30px rgba(26,21,18,.12);
}

/* ---- reset / base ---- */
* { box-sizing: border-box; }
html { font-size: 16px; }
/* overflow-x: clip (not hidden) prevents horizontal scroll WITHOUT creating a scroll
   container, so position:sticky descendants (menu header, filter, wallet/cart) still work. */
html, body.mep { overflow-x: clip; max-width: 100%; }
body.mep {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--background);
  color: var(--foreground);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
body.mep img { max-width: 100%; display: block; }
body.mep a { color: inherit; text-decoration: none; }

/* ---- native date/time pickers: brand-orange accent everywhere (browsers default to blue) ---- */
input[type=date], input[type=time], input[type=datetime-local], input[type=month], input[type=week] {
  accent-color: var(--primary);
  color-scheme: light;
}
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator,
input[type=datetime-local]::-webkit-calendar-picker-indicator,
input[type=month]::-webkit-calendar-picker-indicator,
input[type=week]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(38%) sepia(96%) saturate(1640%) hue-rotate(353deg) brightness(96%) contrast(92%);
}
.mep h1, .mep h2, .mep h3 { margin: 0; }
.mep-display { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
.mep-wrap { max-width: 1152px; margin: 0 auto; padding: 0 1.5rem; }
.mep-icon { width: 1rem; height: 1rem; flex-shrink: 0; vertical-align: middle; }

/* ---- header ---- */
.mep-header {
  position: sticky; top: 0; z-index: 40;
  background: #fff; border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
/* min-height, not a hard height: the bar must GROW when the nav no longer fits on one line.
   .mep-nav is flex-wrap:wrap, so inside a fixed 64px bar it used to wrap internally and the
   second row ("Log out") rendered OUTSIDE the white header, on top of the page content. The
   @media (max-width:480px) block below fixed that only under 480px, which left a broken band
   roughly 480-560px wide where the nav wraps but the bar does not. Handle it intrinsically at
   every width instead of chasing another breakpoint. */
.mep-header-inner {
  min-height: 64px; padding: .4rem 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; flex-wrap: wrap; row-gap: .35rem;
}
.mep-logo { width: 150px; height: auto; max-width: 100%; object-fit: contain; }
.mep-logo-row { display: flex; align-items: center; gap: .75rem; min-width: 0; flex-shrink: 1; }
.mep-header-actions { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.mep-btn-primary { flex-shrink: 0; }
.mep-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-sans); font-weight: 600; font-size: .875rem;
  border: none; cursor: pointer; border-radius: 9999px;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.mep-btn-primary { background: var(--primary); color: #fff; padding: .5rem 1.25rem; height: 40px; }
.mep a.mep-btn-primary, .mep a.mep-btn-primary:hover { color: #fff; text-decoration: none; }
.mep-btn-primary:hover { transform: scale(1.05); }
.mep-btn-primary:active { transform: scale(.96); }

/* ---- hero ---- */
.mep-hero { position: relative; overflow: hidden; min-height: min(520px, 66vw); background: var(--dark); }
.mep-hero-bg { position: absolute; inset: 0; }
.mep-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .40; }
.mep-hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(26,21,18,.92), rgba(26,21,18,.7) 45%, rgba(26,21,18,.15)),
    linear-gradient(to top, rgba(26,21,18,.6), transparent 55%);
}
.mep-hero-inner { position: relative; z-index: 10; padding-top: 5rem; padding-bottom: 5.5rem; }
.mep-hero-copy { max-width: 560px; }
.mep-pill {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.85);
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  border-radius: 9999px; padding: .375rem .75rem; margin-bottom: 1.25rem;
  backdrop-filter: blur(4px);
}
.mep-hero h1 {
  font-family: var(--font-display); font-weight: 700; color: #fff;
  font-size: clamp(1.875rem, 7vw, 3.75rem); line-height: 1.05; margin-bottom: 1rem;
  overflow-wrap: break-word;
}
.mep-hero-copy { max-width: 560px; min-width: 0; }
.mep-hero h1 .accent { color: var(--primary); font-style: normal; }
.mep-hero p { color: rgba(255,255,255,.72); font-size: 1.0625rem; margin: 0 0 2rem; line-height: 1.6; }
.mep-search {
  position: relative; display: flex; align-items: center; background: #fff;
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg); max-width: 28rem;
}
.mep-search svg { position: absolute; left: 1rem; color: var(--muted-foreground); }
.mep-search input {
  flex: 1; border: 0; outline: none; background: transparent;
  font: inherit; font-size: .9375rem; color: var(--foreground);
  padding: 1rem 1rem 1rem 2.75rem;
}
.mep-search input::placeholder { color: var(--muted-foreground); }
.mep-hero-float {
  position: absolute; right: 0; top: 0; bottom: 0; width: 40%;
}
.mep-hero-float img {
  width: 100%; height: 100%; object-fit: cover;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,.85), transparent 62%);
          mask-image: linear-gradient(to left, rgba(0,0,0,.85), transparent 62%);
}

/* ---- category pills ---- */
.mep-cats { border-bottom: 1px solid var(--border); background: var(--background); }
.mep-cats-row { display: flex; gap: .5rem; overflow-x: auto; padding: 1rem 0; scrollbar-width: none; }
.mep-cats-row::-webkit-scrollbar { display: none; }
.mep-chip {
  flex-shrink: 0; border: none; cursor: pointer; font: inherit; font-weight: 500; font-size: .875rem;
  padding: .5rem 1rem; border-radius: 9999px; background: var(--muted); color: var(--muted-foreground);
  transition: background .15s ease, color .15s ease;
}
.mep-chip:hover { background: #ece7e2; }
.mep-chip.active { background: var(--primary); color: #fff; box-shadow: var(--shadow-sm); }

/* ---- restaurants ---- */
.mep-section { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.mep-section-head { margin-bottom: 1.5rem; }
.mep-section-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.25rem,3vw,1.5rem); }
.mep-section-head p { color: var(--muted-foreground); font-size: .875rem; margin: .15rem 0 0; }
.mep-grid { display: grid; grid-template-columns: repeat(1, 1fr); gap: 1.25rem; }
.mep-card {
  background: var(--card); border: 1px solid var(--border); border-radius: 1rem; overflow: hidden;
  box-shadow: var(--shadow-sm); cursor: pointer; transition: box-shadow .3s ease;
}
.mep-card:hover { box-shadow: var(--shadow-lg); }
.mep-card-img { position: relative; height: 12rem; overflow: hidden; background: var(--muted); }
.mep-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mep-card:hover .mep-card-img img { transform: scale(1.05); }
.mep-card-img::after { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(0,0,0,.55), transparent 55%); }
.mep-tags { position: absolute; left: .75rem; bottom: .75rem; z-index: 2; display: flex; gap: .375rem; flex-wrap: wrap; }
.mep-tag {
  font-size: .625rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.2);
  border: 1px solid rgba(255,255,255,.3); border-radius: 9999px; padding: .25rem .625rem; backdrop-filter: blur(4px);
}
.mep-card-body { padding: 1rem; }
.mep-card-title { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; margin-bottom: .25rem; }
.mep-card-title h3 { font-size: 1rem; font-weight: 600; line-height: 1.25; }
.mep-rating { display: inline-flex; align-items: center; gap: .25rem; font-size: .875rem; font-weight: 600; color: var(--primary); white-space: nowrap; }
.mep-rating svg { width: .875rem; height: .875rem; fill: currentColor; }
.mep-cuisine { color: var(--muted-foreground); font-size: .875rem; margin: 0 0 .75rem; }

/* ---- Ad Sense click-through card + overlay ---- */
/* A card carrying an ad is a real <button>; strip the UA button styling so it stays
   pixel-identical to the inert .mep-card div beside it. */
.mep-card-ad {
  /* position:relative anchors the "Sponsored" flag below. The card already has
     overflow:hidden + border-radius:1rem, so the flag is clipped to the rounded corner. */
  position: relative;
  display: block; width: 100%; padding: 0; margin: 0; text-align: left;
  font: inherit; color: inherit; -webkit-appearance: none; appearance: none;
}
.mep-card-ad:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Tells the customer this card opens a promo overlay, rather than being inert like its
   neighbours. Top-right because .mep-tags already owns bottom-left. Same frosted recipe as
   .mep-tag so it reads as part of the card rather than bolted on; z-index 3 clears the
   .mep-card-img::after gradient. */
.mep-card-adflag {
  position: absolute; top: .75rem; right: .75rem; z-index: 3;
  font-size: .625rem; font-weight: 600; letter-spacing: .02em; color: #fff;
  background: rgba(255,255,255,.2); border: 1px solid rgba(255,255,255,.3);
  border-radius: 9999px; padding: .25rem .625rem; backdrop-filter: blur(4px);
  /* the image gradient only darkens the BOTTOM, so add a shadow for light photos up top */
  text-shadow: 0 1px 2px rgba(0,0,0,.45);
  pointer-events: none;
}

.mep-adx { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.mep-adx[hidden] { display: none; }
.mep-adx-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.75); }
.mep-adx-panel {
  position: relative; z-index: 1; max-width: min(90vw, 900px); max-height: 90vh;
  background: #000; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-lg);
}
.mep-adx-media { display: flex; align-items: center; justify-content: center; }
.mep-adx-media img, .mep-adx-media video { display: block; max-width: min(90vw, 900px); max-height: 90vh; }
.mep-adx-close {
  position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 2rem; height: 2rem; border: none; border-radius: 999px; cursor: pointer;
  background: rgba(0,0,0,.55); color: #fff; font-size: 1.25rem; line-height: 1;
}
.mep-adx-close:hover { background: rgba(0,0,0,.8); }
.mep-meta { display: flex; align-items: center; gap: 1rem; color: var(--muted-foreground); font-size: .75rem; }
.mep-meta span { display: inline-flex; align-items: center; gap: .375rem; }
.mep-meta svg { width: .875rem; height: .875rem; }

/* ---- info band ---- */
.mep-band { background: var(--dark); color: #fff; margin-top: 1.5rem; }
.mep-band-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; padding-top: 3rem; padding-bottom: 3rem; }
.mep-feature { display: flex; gap: 1rem; }
.mep-feature-icon { flex-shrink: 0; width: 3rem; height: 3rem; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: rgba(232,64,12,.15); color: var(--primary); }
.mep-feature h3 { font-size: 1rem; font-weight: 600; margin-bottom: .25rem; }
.mep-feature p { font-size: .875rem; color: rgba(255,255,255,.6); margin: 0; line-height: 1.6; }

/* ---- footer ---- */
.mep-footer { border-top: 1px solid var(--border); background: var(--background); }
.mep-footer-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding-top: 3.5rem; padding-bottom: 3rem; font-size: .875rem; color: var(--muted-foreground); }
.mep-footer-grid p { min-width: 0; word-break: break-word; }
.mep-footer-grid h4 { font-family: var(--font-display); font-weight: 700; color: var(--foreground); font-size: 1rem; margin: 0 0 .5rem; }
.mep-footer-grid h5 { font-weight: 600; color: var(--foreground); font-size: .875rem; margin: 0 0 .5rem; }
.mep-footer-grid p { margin: 0 0 .35rem; display: flex; align-items: center; gap: .5rem; }
.mep-social { display: flex; gap: .5rem; margin-top: .25rem; }
.mep-social a { width: 2rem; height: 2rem; border-radius: 9999px; background: var(--muted); display: inline-flex; align-items: center; justify-content: center; color: var(--muted-foreground); transition: background .15s, color .15s; }
.mep-social a:hover { background: var(--primary); color: #fff; }
.mep-footer-bottom { border-top: 1px solid var(--border); text-align: center; font-size: .75rem; color: var(--muted-foreground); padding: 1rem 1.5rem; }

/* ---- customer-flow chrome (CustomerMenu1.Master) ---- */
.mep-nav { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; }
.mep-nav a {
  padding: .5rem .9rem; border-radius: 9999px; font-weight: 600; font-size: .875rem;
  color: var(--muted-foreground); transition: color .15s ease, background .15s ease;
}
.mep-nav a:hover { color: var(--foreground); background: var(--muted); }
.mep-nav a.mep-logout { color: #fff; background: var(--primary); }
.mep-nav a.mep-logout:hover { color: #fff; background: #cf380a; }

.mep-partners { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem 1.5rem; align-items: center; }
.mep-partners img { max-height: 46px; width: auto; margin: 0 auto; object-fit: contain; }

#PleaseWait {
  position: fixed; inset: 0; z-index: 60; display: none;
  background: rgba(26,21,18,.55); backdrop-filter: blur(3px);
}
/* card is absolutely centred so it works whether the overlay is shown via display:block
   (legacy showPleaseWait) or flex */
.mep-loader-card {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: .85rem;
  min-width: 220px; padding: 2rem 2.4rem; text-align: center;
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-lg);
}
.mep-spinner {
  width: 44px; height: 44px; border-radius: 50%;
  border: 4px solid var(--muted); border-top-color: var(--primary);
  animation: mep-spin .8s linear infinite;
}
@keyframes mep-spin { to { transform: rotate(360deg); } }
.mep-loader-title { margin: 0; font-weight: 700; font-size: 1rem; color: var(--foreground); }
.mep-loader-sub { margin: 0; font-size: .85rem; color: var(--muted-foreground); }

/* ---- Ordermain: step bar / restaurant list ---- */
.mep-steps { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.mep .mep-step {
  display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .9rem; border-radius: 9999px;
  font-size: .8rem; font-weight: 600; background: var(--muted); color: var(--muted-foreground);
  text-decoration: none; border: none; cursor: pointer; font-family: var(--font-sans);
}
.mep .mep-step.active { background: var(--accent); color: var(--primary); }
.mep a.mep-step:hover { background: #ece7e2; color: var(--foreground); }
.mep-step .n { width: 1.25rem; height: 1.25rem; border-radius: 9999px; background: var(--primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; }
.mep-step:not(.active) .n { background: #c9c2ba; }
.mep-step-sep { color: var(--muted-foreground); font-size: .8rem; }
.mep-welcome-line { display: block; color: var(--muted-foreground); font-size: .9rem; margin: 0 0 1.75rem; }
.mep-welcome-top { display: block; color: var(--muted-foreground); font-size: .85rem; margin: 0 0 .65rem; }
.mep-section-title { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; margin: 1.75rem 0 .4rem; }
.mep-eyebrow { display: block; color: var(--primary); font-weight: 700; font-size: .92rem; margin: 1.75rem 0 .2rem; }
.mep-eyebrow + .mep-section-title { margin-top: 0; }
.mep-nav-user { display: inline-flex; align-items: center; font-weight: 700; font-size: .875rem; color: var(--foreground); padding: .5rem .6rem; }

/* responsive restaurant list: real table on desktop, stacked cards on mobile */
.mep-rest-list { width: 100%; border-collapse: collapse; }
.mep-rest-list thead th {
  text-align: left; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted-foreground); font-weight: 600; padding: .6rem .75rem; border-bottom: 1px solid var(--border);
}
.mep-rest-list td { padding: .85rem .75rem; border-bottom: 1px solid var(--border); font-size: .9rem; vertical-align: top; }
.mep-rest-list tr:hover td { background: var(--muted); }
.mep-rest-name a { color: var(--primary); font-weight: 600; text-decoration: none; }
.mep-rest-name a:hover { text-decoration: underline; }
.mep-rest-type { color: var(--muted-foreground); }
.mep-rest-card { display: none; }

/* neutralize legacy section chrome (main.css) on redesigned customer pages */
body.mep #hero-area { display: none; }
body.mep #slider, body.mep #slider11, body.mep #blog {
  background: none !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important;
}
body.mep #blog .block, body.mep .bg-3, body.mep .container-fluid.bg-3 {
  background: none !important; box-shadow: none !important; border: none !important;
}
/* legacy cuisine thumbnail strip -> hide for the clean redesign.
   Scope to the strip's own block (.block.wow, unique to Ordermain's strip) — NOT the whole
   #slider11/#slider, because other pages (e.g. Checkout) reuse those section IDs for real content. */
body.mep #slider11 .block.wow { display: none !important; }
/* width:100% + float:none (not width:auto) so these floated Bootstrap columns fill the page
   instead of shrinking to their content — otherwise a filtered (few-item) menu narrows the section. */
body.mep #blog .container, body.mep #blog .row, body.mep #blog .col-md-12 { width: 100%; max-width: 100%; margin: 0; padding: 0; float: none; }

/* keep all customer content within the viewport (legacy markup has wide elements) */
body.mep #blog, body.mep #blog * { max-width: 100% !important; }
body.mep #blog .mep-steps { flex-wrap: wrap; }
body.mep #blog .mep-welcome-line, body.mep #blog .mep-section-title { white-space: normal; overflow-wrap: break-word; }

/* reflow ONLY the outer layout table to blocks so the empty cells collapse
   and rows stack responsively (inner tables keep their table display) */
body.mep .mep-order-table,
body.mep .mep-order-table > tbody,
body.mep .mep-order-table > tbody > tr,
body.mep .mep-order-table > tbody > tr > td {
  display: block !important; width: 100% !important; max-width: 100%; white-space: normal !important;
  border: 0 !important;
}
body.mep .mep-order-table > tbody > tr > td:empty { display: none !important; }
/* strip legacy gray/whitesmoke backgrounds + texture images from old markup (not the new tables) */
body.mep #blog, body.mep #blog * { background-image: none !important; }
body.mep #blog table:not(.mep-rest-list) td,
body.mep #blog table:not(.mep-rest-list) tr,
body.mep #blog .block, body.mep #blog .container-fluid { background-color: transparent !important; }

@media (max-width: 720px) {
  .mep-rest-list thead { display: none; }
  .mep-rest-list, .mep-rest-list tbody, .mep-rest-list tr, .mep-rest-list td { display: block; width: 100%; }
  .mep-rest-list tr {
    border: 1px solid var(--border); border-radius: .9rem; background: var(--card);
    box-shadow: var(--shadow-sm); padding: .35rem .25rem; margin-bottom: .85rem;
  }
  .mep-rest-list td { border: none; padding: .3rem .9rem; }
  .mep-rest-list td.mep-rest-name { padding-top: .75rem; }
  .mep-rest-list td[data-label]::before {
    content: attr(data-label); display: block; font-size: .65rem; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted-foreground); font-weight: 600; margin-bottom: .1rem;
  }
  .mep-rest-name a { font-size: 1.05rem; }
}

/* ---- Ordermain: progress bar ---- */
.mep-prog { display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap; margin: .25rem 0 .35rem; }
.mep .mep-prog-step {
  display: inline-flex; align-items: center; gap: .5rem; padding: .45rem 1rem .45rem .5rem;
  border-radius: 9999px; background: var(--muted); color: var(--muted-foreground) !important;
  font-weight: 600; font-size: .85rem; text-decoration: none; border: none; font-family: var(--font-sans);
}
.mep .mep-prog-step::before {
  content: ""; width: 1.5rem; height: 1.5rem; border-radius: 9999px; background: #cfc8c0; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 700; flex-shrink: 0;
}
.mep .mep-prog-1::before { content: "1"; }
.mep .mep-prog-2::before { content: "2"; }
.mep .mep-prog-3::before { content: "3"; }
.mep .mep-prog-step.active { background: var(--primary); color: #fff !important; }
.mep .mep-prog-step.active::before { background: #fff; color: var(--primary); }
.mep a.mep-prog-step:hover { filter: brightness(.97); }
.mep-prog-bar { flex: 0 0 1.25rem; height: 2px; background: var(--border); border-radius: 2px; }

/* ---- Ordermain: restaurant cards ---- */
.mep-rgrid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-top: .5rem; }
.mep-rcard {
  background: var(--card); border: 1px solid var(--border); border-radius: 1rem; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease; position: relative;
}
.mep-rcard.open { cursor: pointer; }
.mep-rcard.open:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); border-color: rgba(232,64,12,.4); }
.mep-rcard.closed { opacity: .7; }
/* image banner (placeholder gradient until real images exist) with type + status overlaid */
.mep-rcard-img { position: relative; height: 9rem; overflow: hidden; background-color: #f1e9e3; }
.mep-rcard-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.mep-rcard-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,0) 45%);
}
.mep-rcard.closed .mep-rcard-img { filter: grayscale(1); }
.mep-rcard-type {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--foreground); background: rgba(255,255,255,.92); padding: .25rem .65rem; border-radius: 9999px;
  box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.mep-rcard-status {
  position: absolute; top: .7rem; right: .7rem; z-index: 2;
  font-size: .64rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  padding: .25rem .65rem; border-radius: 9999px; white-space: nowrap; box-shadow: 0 1px 3px rgba(0,0,0,.12);
}
.mep-rcard-status.is-open { color: #15803d; background: #dcfce7; }
.mep-rcard-status.is-closed { color: #b91c1c; background: #fee2e2; }
.mep-rcard-body { padding: 1rem 1.15rem 1.15rem; }
.mep-rcard-name { margin: 0 0 .7rem; font-size: 1.1rem; font-weight: 700; line-height: 1.2; }
.mep .mep-rcard-name a.mep-rcard-link { color: var(--foreground); text-decoration: none; }
.mep-rcard.open .mep-rcard-name a.mep-rcard-link { color: var(--primary); }
.mep-rcard.closed .mep-rcard-name a.mep-rcard-link { color: var(--muted-foreground); pointer-events: none; }
.mep-rcard-meta { display: flex; flex-direction: column; gap: .4rem; font-size: .8rem; color: var(--muted-foreground); }
.mep-rcard-meta span { display: flex; align-items: flex-start; gap: .45rem; }
.mep-rcard-meta svg { width: .9rem; height: .9rem; flex-shrink: 0; margin-top: .12rem; }

/* footer logo (replaces the "My ePay Meals" text) */
.mep-footer-logo { height: 34px; width: auto; margin-bottom: .6rem; display: block; }

@media (min-width: 640px) { .mep-rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mep-rgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- menu header (type-based photo, overlaid restaurant details) ---- */
/* Top chrome is now just the pills, pinned under the 64px nav. The top padding is a FIXED
   gap so the pills never touch the page header while scrolling — identical on Ordermain
   (both views) and Checkout, which share this .mep-topbar + .mep-prog treatment. */
.mep-topbar { position: sticky; top: 64px; z-index: 20; background: var(--background); padding: .9rem 0 1rem; }
/* The hero lives in the left column of the menu grid (grid-area:hero). It is sticky so it stays
   in view (full height — it does not shrink) while the menu scrolls behind it. */
.mep-mhead {
  grid-area: hero;
  position: sticky; top: var(--menu-chrome-top); z-index: 5;
  /* flex/flex-end (rather than absolutely positioning the caption) so the banner can never
     clip its own text: min-height is a FLOOR, and a long address/name simply grows the box. */
  display: flex; align-items: flex-end; width: 100%; box-sizing: border-box;
  min-height: 100px; border-radius: var(--radius); overflow: hidden;
  background-color: var(--muted); box-shadow: var(--shadow-sm);
  /* No bottom margin: the filter bar sits flush below the hero and its own opaque top padding
     is the ONLY spacing between the hero and the search bar, so the gap stays fixed as the
     menu scrolls behind (a transparent margin would collapse to 0 once both elements pin). */
  margin: 0;
}
.mep-mhead-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 0; max-width: none;
}
.mep-mhead-shade {
  position: absolute; inset: 0;
  /* flat black wash for overall contrast + a stronger gradient toward the text at the bottom */
  background: rgba(0,0,0,.45);
}
.mep-mhead-shade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.75) 0%, rgba(0,0,0,.30) 55%, rgba(0,0,0,0) 100%);
}
.mep-mhead-content {
  position: relative; width: 100%; z-index: 1;
  padding: .8rem 1.2rem; color: #fff;
  transition: padding .28s ease;
}
.mep-mhead-type {
  display: inline-block; margin-bottom: .35rem; font-size: .62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--primary-foreground);
  background: var(--primary); padding: .15rem .5rem; border-radius: 999px;
}
.mep-mhead-name {
  font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em;
  font-size: 1.35rem; line-height: 1.1; color: #fff; margin: 0 0 .3rem;
  text-shadow: 0 1px 12px rgba(0,0,0,.4);
  transition: font-size .28s ease, margin .28s ease;
}
.mep-mhead-meta { font-size: .78rem; line-height: 1.35; color: rgba(255,255,255,.92); }
@media (min-width: 640px) { .mep-mhead { min-height: 120px; } .mep-mhead-name { font-size: 1.5rem; } }

/* ---- menu filter / search bar ---- */
.mep-filterbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1rem;
}
/* search box absorbs the shrinking so the dropdown + Search/Reset buttons stay on one line */
.mep-filter-search { position: relative; flex: 1 1 120px; min-width: 100px; }
.mep-filter-ico {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  width: 1rem; height: 1rem; color: var(--primary); pointer-events: none;
  /* The glyph is a stroked SVG (stroke="currentColor"), so "bold" means a heavier stroke —
     this overrides the stroke-width="2" presentation attribute on the markup. */
  stroke-width: 2.75;
}
.mep-filter-input {
  width: 100%; box-sizing: border-box; padding: .55rem .9rem .55rem 2.15rem;
  border: 1px solid var(--border); border-radius: 999px; font-size: .9rem;
  font-family: var(--font-sans); background: var(--card); color: var(--foreground); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.mep-filter-input::placeholder { color: var(--muted-foreground); }
.mep-filter-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,64,12,.12); }
.mep-filter-select {
  flex-shrink: 0; padding: .55rem 1rem; border: 1px solid var(--border); border-radius: 999px; font-size: .9rem;
  font-family: var(--font-sans); background: var(--card); color: var(--foreground);
  outline: none; cursor: pointer; min-width: 130px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* The bold theme-orange treatment belongs to the STOREFRONT menu filter only — that's the
   "Categories" placeholder, doubling as an active-filter cue once a category is picked.
   Scoped to .mep-filterbar deliberately: .mep-filter-select is reused on admin forms
   (ad/AdSenseSlots.aspx, PhoneOrders), where bold orange on every dropdown reads as an
   error state rather than an accent. */
.mep-filterbar .mep-filter-select { font-weight: 700; color: var(--primary); }
/* The popup list itself stays neutral (options inherit the select's colour in Chrome),
   except the first entry, which IS the "Categories" placeholder. */
.mep-filterbar .mep-filter-select option { font-weight: 400; color: var(--foreground); }
.mep-filterbar .mep-filter-select option:first-child { font-weight: 700; color: var(--primary); }
.mep-filter-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,64,12,.12); }
.mep-filter-btn {
  flex-shrink: 0; padding: .55rem 1.2rem; border: none; border-radius: 999px;
  background: var(--primary); color: var(--primary-foreground); font-size: .9rem; font-weight: 600;
  font-family: var(--font-sans); cursor: pointer; transition: background .15s ease, transform .15s ease;
}
.mep-filter-btn:hover { background: #c9360a; transform: translateY(-1px); }
/* the Reset button is a LinkButton (<a>), so keep its text white over `body.mep a` */
.mep a.mep-filter-btn, .mep a.mep-filter-btn:hover { color: var(--primary-foreground); text-decoration: none; }
.mep-filter-reset {
  margin-left: .15rem; font-size: .85rem; font-weight: 600; color: var(--muted-foreground);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.mep-filter-reset:hover { color: var(--primary); text-decoration: underline; }
.mep-filter-note { display: block; margin: .1rem 0 .7rem; font-size: .85rem; color: var(--muted-foreground); }

/* ---- order layout: [hero + scrollable menu] (left) + sticky wallet/cart sidebar (right) ---- */
/* --menu-chrome-top = where the pinned top chrome (nav 64 + pills ~60) bottoms out. The hero
   is no longer part of the sticky chrome (it moved into the grid), so this is much smaller now.
   The sidebar + hero pin at this value; the filter bar pins just below the compact hero. */
/* A CSS grid puts the hero and the menu items in the SAME left column (rows 1 & 2) while the
   sidebar spans both rows on the right — so the wallet/cart sit alongside the hero, not below
   a full-width banner. min-height keeps the row a viewport tall so the sticky sidebar stays
   pinned through the whole menu. */
.mep-order-layout {
  --menu-chrome-top: 138px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  grid-template-areas: "hero side" "main side";
  align-items: start; align-content: start; gap: 0 1.5rem;
  min-height: calc(100vh - var(--menu-chrome-top));
}
.mep-menu-main { grid-area: main; min-width: 0; }
.mep-order-side {
  grid-area: side; min-width: 0; max-width: 330px; align-self: start;
  position: sticky; top: var(--menu-chrome-top); z-index: 3;
  display: flex; flex-direction: column; gap: 1rem;
  /* Never let the sticky sidebar exceed the visible area, so the cart's subtotal +
     "Proceed to Checkout" button stay in frame on any window height / zoom level.
     The cart's item list (below) absorbs the overflow by scrolling internally. */
  max-height: calc(100vh - var(--menu-chrome-top) - 1rem);
}
/* Wallet keeps its natural size; the cart flexes to fill the leftover sidebar height
   so its footer (subtotal + checkout button) is always pinned within view. */
.mep-order-side > .mep-wallet { flex: 0 0 auto; }
.mep-order-side > .mep-cart { flex: 1 1 auto; min-height: 0; }

/* (Note: the progress pills stay pinned at ALL viewport heights — the cart footer is kept
   in view instead by the sidebar's bounded max-height + the cart's internal list scroll,
   so there's no need to unpin the top chrome on short screens.) */
/* Filter/search bar pins just below the compact hero (hero pins at --menu-chrome-top and
   collapses to 96px), so the search stays reachable while the item list scrolls under it. */
.mep-menu-main .mep-filterbar {
  /* Pins just below the full-height hero (--hero-h measured in JS; 240px fallback). The -2px
     makes the search bar tuck 2px under the hero's bottom so there's no gap at that seam either. */
  position: sticky; top: calc(var(--menu-chrome-top) + var(--hero-h, 240px) - 2px); z-index: 4;
  /* This opaque top padding is the fixed spacing between the hero and the search bar; the
     cream background covers menu items scrolling up behind it. */
  background: var(--background); padding: .9rem 0 .65rem; margin-bottom: .25rem;
}
/* Soft fade below the search bar so menu items dissolve as they scroll up behind it,
   instead of being hard-clipped at the bar's edge (shared by Ordermain + Phone Orders). */
.mep-menu-main .mep-filterbar::after {
  content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 1.5rem;
  background: linear-gradient(var(--background), rgba(250, 250, 247, 0));
  pointer-events: none; z-index: 4;
}
/* wallet + cart as separate clean cards */
.mep-wallet, .mep-cart {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 1rem 1.15rem;
}
/* Cart is a flex column: the item list is the flexible scroll region; the header,
   subtotal and action buttons never shrink, so the checkout button is always visible. */
.mep-cart { display: flex; flex-direction: column; }
.mep-cart-head, .mep-cart-subtotal, .mep-cart-actions, .mep-cart-msg { flex-shrink: 0; }
.mep-cart table { width: 100% !important; background: transparent !important; border-collapse: collapse; }
.mep-cart td { font-family: var(--font-sans); padding: .12rem 0; }

/* ---- ePay wallet card ---- */
.mep-wallet-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .85rem; }

/* The ePAY wallet is a collapsible card at ALL widths (collapsed by default via the .mep-collapsed
   class on the panel). The cart's own collapse stays mobile-only — see the @media block below. */
.mep-wallet-head { cursor: pointer; user-select: none; }
.mep-wallet.mep-collapsed .mep-wallet-head { margin-bottom: 0; }
.mep-wallet.mep-collapsed > :not(.mep-wallet-head) { display: none; }
.mep-wallet .mep-collapse-chev {
  display: inline-block; flex-shrink: 0; width: .5rem; height: .5rem; margin-left: .5rem; margin-top: -.18rem;
  border-right: 2px solid var(--muted-foreground); border-bottom: 2px solid var(--muted-foreground);
  transform: rotate(45deg); transition: transform .2s ease;
}
.mep-wallet:not(.mep-collapsed) .mep-collapse-chev { transform: rotate(-135deg); }
/* While collapsed, gently bob the down-chevron so it reads as "click to open". */
.mep-wallet.mep-collapsed .mep-collapse-chev { animation: mepChevNudge 1.7s ease-in-out infinite; }
@keyframes mepChevNudge {
  0%, 55%, 100% { transform: translateY(0) rotate(45deg); }
  72%           { transform: translateY(3px) rotate(45deg); }
  86%           { transform: translateY(0) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .mep-wallet.mep-collapsed .mep-collapse-chev { animation: none; }
}

.mep-wallet-title { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .95rem; color: var(--foreground); }
.mep-wallet-ico { width: 1.1rem; height: 1.1rem; color: var(--primary); flex-shrink: 0; }
.mep-wallet-type {
  font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--primary); background: var(--accent); padding: .2rem .55rem; border-radius: 999px;
}
.mep-wallet-type:empty { display: none; }
/* featured-balance block, styled like a payment card (gradient survives the #blog bg-image reset) */
body.mep #blog .mep-wallet-card {
  background-image: linear-gradient(135deg, #2c211b 0%, #1A1512 55%, #7a2f0e 165%) !important;
}
.mep-wallet-card {
  position: relative; overflow: hidden; border-radius: calc(var(--radius) - .15rem);
  color: #fff; padding: 1rem 1.1rem 1.15rem; margin-bottom: .9rem;
  box-shadow: 0 6px 18px rgba(26,21,18,.18);
  /* Base gradient so the card works anywhere (e.g. Checkout, which has no #blog wrapper).
     The body.mep #blog rule below re-applies it with !important to beat #blog's bg-image reset. */
  background-image: linear-gradient(135deg, #2c211b 0%, #1A1512 55%, #7a2f0e 165%);
}
.mep-wallet-card::after {
  content: ""; position: absolute; top: -45%; right: -12%; width: 60%; height: 170%;
  background: radial-gradient(circle, rgba(232,64,12,.4), transparent 70%); pointer-events: none;
}
.mep-wallet-card-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.mep-wallet-holder { font-weight: 600; font-size: .9rem; color: #fff; }
.mep-wallet-brand { font-family: var(--font-display); font-weight: 700; font-size: .9rem; color: rgba(255,255,255,.85); letter-spacing: .02em; }
.mep-wallet-company { position: relative; z-index: 1; display: block; font-size: .72rem; color: rgba(255,255,255,.6); margin-top: .12rem; }
.mep-wallet-balance { position: relative; z-index: 1; margin-top: 1.1rem; }
.mep-wallet-balance-label { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,.6); }
.mep-wallet-balance-val { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.1; color: #fff; margin-top: .15rem; }
.mep-wallet-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: .65rem .9rem; }
.mep-wallet-stat { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.mep-wallet-stat > span { font-size: .65rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-foreground); }
.mep-wallet-stat > strong { font-size: .92rem; font-weight: 700; color: var(--foreground); }

/* ---- "Choose a restaurant" intro row: text block (2/3, left) + wallet card (1/3, right) ---- */
.mep-chooser-head { display: flex; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.75rem; }
.mep-chooser-headmain { flex: 2 1 320px; min-width: 0; }
.mep-chooser-wallet { flex: 1 1 260px; min-width: 0; }
/* zero the stacked headings' outer margins so both columns start at the same top edge */
.mep-chooser-head .mep-eyebrow, .mep-chooser-head .mep-section-title { margin-top: 0; }
.mep-chooser-head .mep-welcome-line { margin-bottom: 0; }
@media (max-width: 720px) {
  .mep-chooser-wallet { flex-basis: 100%; }
}
/* wallet sitting atop the checkout order-summary column */
.mep-co-summary > .mep-wallet { margin-bottom: 1rem; }

/* ---- cart card ---- */
.mep-cart-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.mep-cart-title { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; font-size: .95rem; color: var(--foreground); }
.mep-cart-ico { width: 1.1rem; height: 1.1rem; color: var(--primary); flex-shrink: 0; }
.mep-cart-list, .mep-cart-list tbody, .mep-cart-list tr, .mep-cart-list td { display: block; width: 100%; border: 0; padding: 0; background: transparent; }
/* Cap the item list height so a long cart scrolls internally, keeping the subtotal + checkout
   buttons directly below it and in view instead of pushed past the end of a long list. */
.mep-cart-list { flex: 1 1 auto; min-height: 0; max-height: 42vh; overflow-y: auto; overscroll-behavior: contain; }
.mep-cart-item { display: flex; align-items: center; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--border); }
/* leading item thumbnail (photo or monogram), same footprint as the Checkout order-summary tiles */
.mep-cart-item > .mep-co-item-photo, .mep-cart-item > .mep-co-item-mono { align-self: flex-start; }
.mep-cart-item-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.mep-cart-item-name { font-weight: 600; font-size: .88rem; color: var(--foreground); line-height: 1.25; }
.mep .mep-cart-del { font-size: .72rem; color: var(--muted-foreground); text-decoration: none; cursor: pointer; align-self: flex-start; }
.mep .mep-cart-del:hover { color: var(--primary); text-decoration: underline; }
.mep-cart-item-qp { display: flex; align-items: center; gap: .55rem; flex-shrink: 0; }
.mep-cart-qty { width: 3rem; box-sizing: border-box; padding: .3rem .35rem; border: 1px solid var(--border); border-radius: .45rem; font-size: .85rem; font-family: var(--font-sans); text-align: center; color: var(--foreground); }
.mep-cart-qty:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,64,12,.12); }
/* +/- quantity stepper (auto-saves; replaces the qty textbox + Update Cart button) */
.mep-cart-stepper { display: inline-flex; align-items: center; gap: .35rem; }
.mep .mep-cart-step { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; box-sizing: border-box; border: 1px solid var(--border); border-radius: .45rem; background: #fff; color: var(--primary); font-size: 1.05rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; user-select: none; }
.mep .mep-cart-step:hover { border-color: var(--primary); background: var(--accent); text-decoration: none; }
.mep-cart-qty-val { min-width: 1.4rem; text-align: center; font-size: .9rem; font-weight: 700; color: var(--foreground); }
/* Clear Cart moved inline with the "Your Order" header */
.mep-cart-head-actions { display: inline-flex; align-items: center; gap: .6rem; }
.mep .mep-cart-clear { font-size: .75rem; font-weight: 600; color: var(--muted-foreground); text-decoration: none; cursor: pointer; white-space: nowrap; }
.mep .mep-cart-clear:hover { color: var(--primary); text-decoration: underline; }
.mep-cart-item-price { font-weight: 700; font-size: .9rem; color: var(--foreground); white-space: nowrap; }
.mep-cart-msg { display: block; font-size: .8rem; font-weight: 600; color: var(--primary); margin: .5rem 0 0; }
.mep-cart-msg:empty { display: none; }
.mep-cart-subtotal { display: flex; align-items: baseline; justify-content: space-between; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--border); }
.mep-cart-subtotal-label { font-size: .85rem; font-weight: 600; color: var(--muted-foreground); }
.mep-cart-subtotal-val { font-size: 1.15rem; font-weight: 700; color: var(--foreground); }
.mep-cart-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: .9rem; }
.mep-cart-actions-row { display: flex; gap: .5rem; }

/* ---- themed buttons (apply to asp:Button <input> and link buttons) ---- */
.mep .mep-btn {
  display: inline-block; width: auto; cursor: pointer; text-align: center;
  font-family: var(--font-sans); font-weight: 600; font-size: .9rem; line-height: 1.2;
  border: 1px solid transparent; border-radius: 999px; padding: .6rem 1.1rem;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.mep .mep-btn-primary { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); }
.mep .mep-btn-primary:hover { background: #c9360a; border-color: #c9360a; transform: translateY(-1px); color: #fff; }
.mep .mep-btn-ghost { background: var(--card); color: var(--foreground); border-color: var(--border); }
.mep .mep-btn-ghost:hover { border-color: var(--primary); color: var(--primary); background: var(--accent); transform: translateY(-1px); }
.mep .mep-btn-link { background: none; border: none; color: var(--muted-foreground); padding: .35rem; font-size: .82rem; }
.mep .mep-btn-link:hover { color: var(--primary); text-decoration: underline; }
.mep-cart-actions > .mep-btn-primary { width: 100%; }
.mep-cart-actions-row > .mep-btn { flex: 1 1 0; }
.mep-cart-actions > .mep-btn-link { align-self: center; }

/* ===================== Checkout (modernised in place) ===================== */
.mep-checkout { max-width: 1080px; margin: 0 auto; padding: 1rem 1rem 3rem; font-family: var(--font-sans); color: var(--foreground); }

/* two-column checkout: delivery/payment choices (left) + sticky order summary (right) */
.mep-co-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
.mep-co-main, .mep-co-summary { min-width: 0; }
/* tighten the gap above the first heading (Choose your Delivery Method) */
.mep-co-main > .heading:first-child { margin-top: 0; }
/* drop Bootstrap .row negative margins so the payment card lines up with the delivery grid width */
.mep-checkout .row { margin-left: 0; margin-right: 0; }
@media (min-width: 880px) {
  .mep-co-grid { grid-template-columns: minmax(0, 1fr) 360px; }
  .mep-co-summary { position: sticky; top: 1.5rem; }
}
/* the summary's legacy Bootstrap column must fill the sticky panel, not float at 66%/offset */
.mep-co-summary .col-sm-8,
.mep-co-summary .col-sm-offset-2 { width: 100% !important; max-width: 100% !important; margin: 0 !important; float: none !important; padding: 0 !important; }
.mep-co-summary .row { margin: 0 !important; }
.mep-co-summary > .row > div[style*="background"],
.mep-co-summary table[style*="background"] { margin-bottom: 0 !important; }

/* checkout progress pills now share the sticky .mep-topbar treatment with Ordermain, so keep
   the pill margins at the shared default (the topbar padding provides the spacing). */
.mep-checkout .mep-topbar { margin-bottom: 1rem; }

/* delivery selectable cards (click the whole card to choose) */
.mep-co-section-title { font-weight: 700; font-size: 1rem; margin: 0 0 .85rem; color: var(--foreground); }
.mep-deliv-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: 1.5rem; }
@media (min-width: 560px) { .mep-deliv-grid { grid-template-columns: 1fr 1fr; } }
.mep-checkout .mep-deliv-card {
  position: relative; display: block; cursor: pointer; text-align: left; margin: 0;
  background: var(--card); border: 2px solid var(--border); border-radius: var(--radius);
  padding: 1.1rem 1.15rem; transition: border-color .15s ease, box-shadow .15s ease;
}
.mep-deliv-card:hover { border-color: rgba(232,64,12,.45); }
.mep-deliv-card:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,64,12,.12); }
.mep-deliv-card input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mep-deliv-head { display: flex; align-items: center; gap: .65rem; }
.mep-deliv-dot { width: 1.2rem; height: 1.2rem; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; position: relative; }
.mep-deliv-card:has(input:checked) .mep-deliv-dot { border-color: var(--primary); }
.mep-deliv-card:has(input:checked) .mep-deliv-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary); }
.mep-deliv-title { font-weight: 700; font-size: 1rem; color: var(--foreground); }
.mep-deliv-detail { margin-top: .9rem; }
/* unavailable pick-up (rbPickUpAddress.Enabled=false -> input:disabled): dim the card, show a
   "not available" tooltip on hover, and block selection */
.mep-deliv-card:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.mep-deliv-card:has(input:disabled):hover { border-color: var(--border); box-shadow: none; }
.mep-deliv-card:has(input:disabled) .mep-deliv-detail { opacity: .5; pointer-events: none; }
.mep-deliv-na {
  position: absolute; left: .5rem; right: .5rem; top: .5rem; z-index: 3;
  background: var(--foreground); color: #fff; font-size: .72rem; font-weight: 600; line-height: 1.3;
  text-align: center; padding: .4rem .55rem; border-radius: .45rem; box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease;
}
/* only show on cards whose radio is disabled, on hover */
.mep-deliv-card .mep-deliv-na { display: none; }
.mep-deliv-card:has(input:disabled) .mep-deliv-na { display: block; }
.mep-deliv-card:has(input:disabled):hover .mep-deliv-na { opacity: 1; visibility: visible; }
.mep-deliv-detail .form-control1 { width: 100%; box-sizing: border-box; }

/* order-summary card (matches the cart/wallet card design) */
.mep-co-card { padding: 1.15rem 1.25rem; }
.mep-co-items { display: block; }
.mep-co-items br { display: none; }
.mep-co-items-head { display: flex; align-items: center; justify-content: space-between; font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-foreground); padding: 0 0 .45rem; border-bottom: 1px solid var(--border); }
.mep-co-head-r { display: inline-flex; gap: 2rem; }
.mep-co-item { display: flex; align-items: center; gap: .65rem; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.mep-co-item-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.mep-co-item-name { font-weight: 600; font-size: .88rem; color: var(--foreground); }
.mep .mep-co-del { font-size: .72rem; color: var(--muted-foreground); text-decoration: none; cursor: pointer; align-self: flex-start; }
.mep .mep-co-del:hover { color: var(--primary); text-decoration: underline; }
.mep-co-qty { width: 2.7rem; flex-shrink: 0; text-align: center; padding: .3rem; border: 1px solid var(--border); border-radius: .45rem; font-size: .85rem; font-family: var(--font-sans); color: var(--foreground); }
.mep-co-item-price { flex-shrink: 0; min-width: 4.2rem; text-align: right; font-weight: 700; font-size: .88rem; color: var(--foreground); white-space: nowrap; }
.mep-co-totals { margin-top: .95rem; }
.mep-co-trow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .28rem 0; font-size: .85rem; color: var(--muted-foreground); }
.mep-co-trow .mep-co-tval { color: var(--foreground); font-weight: 600; white-space: nowrap; }
.mep-co-total { margin-top: .35rem; padding-top: .7rem; border-top: 1px solid var(--border); font-size: 1rem; color: var(--foreground); font-weight: 700; }
.mep-co-total .mep-co-tval { font-size: 1.15rem; font-weight: 700; color: var(--primary); }
.mep-co-note { display: block; font-size: .78rem; color: var(--muted-foreground); margin-top: .5rem; }
.mep-co-note:empty { display: none; }
.mep-co-msg { display: block; text-align: center; font-weight: 600; margin: .65rem 0 0; }
.mep-co-msg:empty { display: none; }
.mep-co-actions { display: flex; flex-direction: column; gap: .5rem; margin-top: 1.1rem; }
.mep-co-actions > .mep-btn-primary { width: 100%; }
.mep-co-actions-row { display: flex; gap: .5rem; }
.mep-co-actions-row > .mep-btn { flex: 1 1 0; }
.mep-co-actions > .mep-btn-link { align-self: center; }

/* order review card (p1) */
.mep-co-review { max-width: 560px; margin: 0 auto; }
.mep-co-meta { padding: .25rem 0 .25rem; }
.mep-co-meta .mep-co-mrow { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .35rem 0; font-size: .85rem; color: var(--muted-foreground); border-bottom: 1px solid var(--border); }
.mep-co-meta .mep-co-mrow:last-child { border-bottom: 0; }
.mep-co-meta .mep-co-mval { color: var(--foreground); font-weight: 600; text-align: right; }
.mep-co-itemlist { margin: .5rem 0 .25rem; }
.mep-co-itemlist table { width: 100% !important; border-collapse: collapse; background: transparent !important; }
/* the legacy lblItems HTML uses inline bgcolor="whitesmoke" rows + an <hr> separator row;
   neutralise both so the list reads as a clean themed table (used on Checkout review + OrderMade) */
.mep-co-itemlist tr { background: transparent !important; }
.mep-co-itemlist tr:has(hr) { display: none; }
.mep-co-itemlist th { font-family: var(--font-sans) !important; font-size: .8rem; font-weight: 700; color: var(--muted-foreground) !important; text-align: left; padding: .35rem .65rem; border-bottom: 1px solid var(--border); }
.mep-co-itemlist td, .mep-co-itemlist span { font-family: var(--font-sans) !important; font-size: .85rem; }
.mep-co-itemlist td { padding: .35rem .65rem !important; border-bottom: 1px solid var(--border); }
.mep-co-itemlist td:first-child { padding-left: 0 !important; }
.mep-co-itemlist td:last-child { padding-right: 0 !important; }
/* the item list (lblItems) HTML uses inline navy text -> align to the theme foreground */
.mep-co-itemlist td, .mep-co-itemlist span, .mep-co-itemlist .flowtext { color: var(--foreground) !important; }
.mep-checkout [style*="color:Navy"], .mep-checkout [style*="color: Navy"], .mep-checkout [style*="color:blue"], .mep-checkout [style*="color: blue"] { color: var(--foreground) !important; }
.mep-co-addr { white-space: normal; text-align: right; }
/* full-width informational charge notice (not an error) */
.mep-co-charge {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  background: var(--accent); color: var(--primary); border-radius: var(--radius);
  padding: .7rem 1rem; margin: .85rem 0 0; font-size: .85rem; font-weight: 600; line-height: 1.45;
}
.mep-co-charge:empty { display: none; }
.mep-co-comments { margin-top: 1rem; }
.mep-co-comments .mep-label { display: block; margin-bottom: .4rem; }
.mep-co-textarea { width: 100%; box-sizing: border-box; min-height: 70px; border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem .8rem; font-family: var(--font-sans); font-size: .9rem; resize: vertical; background: var(--card); color: var(--foreground); }
.mep-co-textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,64,12,.12); }

/* order success / receipt (OrderMade) */
.mep-success-wrap { max-width: 560px; margin: 2.5rem auto; padding: 0 1rem; }
.mep-success-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 2.25rem 1.75rem; }
.mep-success-icon { width: 3.5rem; height: 3.5rem; border-radius: 50%; background: #dcfce7; color: #15803d; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; }
.mep-success-icon svg { width: 1.75rem; height: 1.75rem; }
.mep-success-icon.mep-fail-icon { background: #fee2e2; color: #dc2626; }
.mep-success-title { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; text-align: center; margin: 0 0 .35rem; color: var(--foreground); }
.mep-success-title span { color: var(--primary); }
.mep-success-sub { text-align: center; color: var(--muted-foreground); font-size: .9rem; margin: 0 0 1.5rem; }
.mep-success-card .mep-co-actions { margin-top: 1.5rem; align-items: center; }
.mep-success-card .mep-co-actions .mep-btn-primary { display: inline-block; width: auto; min-width: 200px; text-align: center; text-decoration: none; line-height: 1.4; }

/* ---- order history ---- */
.mep-history { max-width: 820px; margin: 1.5rem auto 3rem; padding: 0 1rem; }
/* selector scoped with .mep-history so it beats the base `.mep h1 { margin: 0 }` rule */
.mep-history .mep-history-title { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1.2; margin: .5rem 0 2.5rem; color: var(--foreground); }
.mep-history-title span { color: var(--primary); }
/* themed native date input + brand-tinted calendar picker icon */
.mep-date {
  box-sizing: border-box; min-width: 165px; padding: .55rem .8rem; border: 1px solid var(--border);
  border-radius: .6rem; font-family: var(--font-sans); font-size: .9rem; color: var(--foreground); background: var(--card);
}
.mep-date:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,64,12,.12); }
.mep-date::-webkit-calendar-picker-indicator {
  cursor: pointer;
  filter: invert(38%) sepia(96%) saturate(1640%) hue-rotate(353deg) brightness(96%) contrast(92%);
}
.mep-hist-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .85rem; margin-bottom: 1.25rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.15rem; }
.mep-hist-field { display: flex; flex-direction: column; gap: .35rem; }
.mep-hist-field label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-foreground); }
.mep-hist-filter .mep-btn { margin-left: auto; }
.mep-hist-table-wrap { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow-x: auto; margin-top: .5rem; }
.mep-hist-table { width: 100%; border-collapse: collapse; }
.mep-hist-table th { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-foreground); padding: .85rem 1rem; border-bottom: 1px solid var(--border); background: var(--muted); white-space: nowrap; }
.mep-hist-table td { padding: .8rem 1rem; border-bottom: 1px solid var(--border); font-size: .88rem; color: var(--foreground); white-space: nowrap; }
.mep-hist-table tr:hover td { background: var(--muted); }
.mep .mep-hist-link { color: var(--primary); font-weight: 600; text-decoration: none; }
.mep .mep-hist-link:hover { text-decoration: underline; }
.mep-hist-table .mep-hist-total td { background: var(--accent); font-weight: 700; color: var(--foreground); }
.mep-hist-table .mep-hist-total:hover td { background: var(--accent); }
.mep-status { display: inline-block; padding: .2rem .6rem; border-radius: 999px; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.mep-status-ok { color: #16a34a; background: rgba(22,163,74,.12); }
.mep-status-bad { color: #dc2626; background: rgba(220,38,38,.12); }

/* ---- order receipt popup (PersonalOrderH) ---- */
.mep-receipt-wrap { max-width: 560px; margin: 1.5rem auto; padding: 0 1rem; }
.mep-receipt-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.75rem 1.5rem; }
.mep-receipt-head { display: flex; align-items: center; gap: .85rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border); }
.mep-receipt-logo { height: 34px; width: auto; }
.mep-receipt-title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; color: var(--foreground); margin: 0; }
.mep-receipt-items { margin: 1.1rem 0; }
.mep-receipt-actions { display: flex; justify-content: center; gap: .6rem; margin-top: 1.25rem; }
.mep .mep-receipt-actions .mep-btn { text-decoration: none; min-width: 120px; text-align: center; }
@media print {
  .mep-receipt-actions { display: none !important; }
  .mep-receipt-card { border: none; box-shadow: none; }
}
/* Canonical page-title spacing for ALL customer screens (every one carries body.mep and loads
   this file). Consistent top + bottom gap so headings like "Confirm your Order",
   "Choose your Delivery Method", receipts, etc. all breathe the same. */
.mep .heading { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; text-align: center; color: var(--foreground); margin: 2rem 0 1.5rem; padding: 0; }
.mep .heading:before { display: none; }
.mep .heading br { display: none; }
.mep .heading span { color: var(--primary); }
.mep-checkout h2 { font-size: 1.05rem; font-weight: 700; margin: .5rem 0; color: var(--foreground); }
.mep-checkout h3 { font-weight: 600; margin: .5rem 0; }

/* strip legacy chrome: bgcolor attrs, Arial fonts, fixed widths */
.mep-checkout [bgcolor] { background-color: transparent !important; }
.mep-checkout font { font-family: var(--font-sans) !important; }
.mep-checkout .flowtext, .mep-checkout .cartTotals { font-family: var(--font-sans) !important; font-size: .9rem; }

/* turn legacy inline-background containers into clean cards */
.mep-checkout div[style*="background"],
.mep-checkout table[style*="background"] {
  background: var(--card) !important; border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 1.25rem !important; margin: 0 auto 1.25rem; width: 100%;
}
/* highlight rows (Final Total) keep an accent tint, no card border */
.mep-checkout tr[style*="background"] td { background: var(--accent) !important; font-weight: 700; color: var(--foreground); }
.mep-checkout tr[style*="background"] { font-size: 1rem !important; }

/* delivery + payment option columns: responsive (side-by-side, stack on small screens) */
.mep-checkout .col-xs-5 { display: inline-block; vertical-align: top; width: 46%; }
.mep-checkout .col-xs-2 { display: inline-block; vertical-align: middle; width: 6%; text-align: center; }

/* payment card selectors */
.mep-checkout .cc-selector-2 { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; }
.mep-checkout .payment-card-wrapper { position: relative; margin: 0; }
.mep-checkout .drinkcard-cc { width: 240px; max-width: 100%; height: 140px; border-radius: var(--radius); }
/* replace the default browser radio with a custom orange dot (matches the delivery selection) */
.mep-checkout .payment-card-wrapper input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mep-pay-dot {
  position: absolute; top: 14px; left: 14px; z-index: 5; pointer-events: none;
  width: 1.3rem; height: 1.3rem; border-radius: 50%;
  border: 2px solid #fff; background: rgba(255,255,255,.35); box-shadow: 0 1px 4px rgba(0,0,0,.3);
  transition: background .15s ease, box-shadow .15s ease;
}
.mep-checkout .payment-card-wrapper:has(input:checked) .mep-pay-dot {
  background: var(--primary); border-color: #fff; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0,0,0,.35);
}

/* totals rows */
.mep-checkout .cartTotals { text-align: right; white-space: nowrap; font-weight: 600; color: var(--foreground); }
/* themed inline error alert (delivery/payment/order messages) */
.mep-checkout .EMessage {
  display: inline-flex; align-items: center; gap: .5rem; box-sizing: border-box; max-width: 100%;
  margin: .25rem 0; padding: .6rem .9rem; text-align: left; line-height: 1.4;
  font-family: var(--font-sans) !important; font-size: .88rem; font-weight: 600;
  color: #b3261e !important; background: #fdecea; border: 1px solid rgba(179,38,30,.25);
  border-left: 3px solid #b3261e; border-radius: var(--radius);
}
.mep-checkout .EMessage::before {
  content: "!"; flex-shrink: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: #b3261e; color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.1rem; text-align: center;
}
.mep-checkout .EMessage:empty { display: none; }
/* extra breathing room between the payment-method message and the payment option cards
   (only renders when the message is present — an empty .EMessage is display:none) */
.mep-checkout .mep-pay-msg .EMessage { margin-bottom: 1.5rem; }

/* ---- themed confirmation dialog (replaces window.confirm) ---- */
.mep-modal-overlay {
  position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; background: rgba(26, 21, 18, .5); backdrop-filter: blur(2px);
  animation: mepModalFade .18s ease;
}
.mep-modal-overlay[hidden] { display: none; }
.mep-modal {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); max-width: 26rem; width: 100%; padding: 1.9rem 1.7rem 1.6rem;
  text-align: center; animation: mepModalPop .22s cubic-bezier(.2, .9, .3, 1.25);
}
.mep-modal-ico {
  width: 3rem; height: 3rem; margin: 0 auto 1rem; border-radius: 50%;
  background: var(--accent); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.mep-modal-ico svg { width: 1.5rem; height: 1.5rem; }
.mep-modal-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--foreground); margin: 0 0 .45rem; }
.mep-modal-text { font-size: .92rem; color: var(--muted-foreground); line-height: 1.55; margin: 0 auto 1.5rem; max-width: 22rem; }
.mep-modal-actions { display: flex; gap: .65rem; justify-content: center; }
.mep .mep-modal-actions .mep-btn { min-width: 9rem; justify-content: center; }
@keyframes mepModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes mepModalPop { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 100% { opacity: 1; transform: translateY(0) scale(1); } }
@media (max-width: 480px) {
  .mep-modal-actions { flex-direction: column-reverse; }
  .mep .mep-modal-actions .mep-btn { width: 100%; }
}

/* form controls + comments */
.mep-checkout .form-control1 { max-width: 100%; box-sizing: border-box; padding: .55rem .85rem; border: 1px solid var(--border); border-radius: .6rem; font-family: var(--font-sans); font-size: .9rem; background: var(--card); }
/* selects size to their longest option; cap to the container so they don't overflow on mobile */
.mep-checkout select.form-control1 { width: 100%; }
.mep-checkout textarea { width: 100%; max-width: 100%; box-sizing: border-box; border: 1px solid var(--border); border-radius: .6rem; padding: .6rem .85rem; font-family: var(--font-sans); }
.mep-checkout .mep-btn { margin: .3rem; display: inline-block; }

/* ---- card-payment checkout form (Checkout_cc*.aspx): billing + card fields ---- */
.mep-cc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.1rem; }
.mep-cc-grid .mep-cc-full { grid-column: 1 / -1; }
.mep-cc-field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.mep-checkout .mep-cc-field .form-control1 { width: 100%; }
.mep-cc-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem 1.1rem; grid-column: 1 / -1; }
.mep-cc-section + .mep-cc-section { margin-top: 1.4rem; }
.mep-cc-lede { font-size: .85rem; color: var(--muted-foreground); margin: 0 0 1.1rem; line-height: 1.5; }
.mep-cc-errsum { grid-column: 1 / -1; font-size: .8rem; font-weight: 600; color: #b3261e; }
.mep-cc-errsum:empty { display: none; }
.mep-cc-alert { display: flex; align-items: center; gap: .5rem; background: #fdecea; border: 1px solid rgba(179,38,30,.25); color: #b3261e; border-radius: var(--radius); padding: .7rem .9rem; font-size: .85rem; font-weight: 600; margin-bottom: 1.25rem; }
.mep-cc-alert svg { width: 1.1rem; height: 1.1rem; flex-shrink: 0; }
.mep-cc-terms { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; font-weight: 600; }
.mep-cc-terms input[type=checkbox] { width: 1.05rem; height: 1.05rem; flex-shrink: 0; accent-color: var(--primary); }
.mep-cc-fineprint { font-size: .76rem; color: var(--muted-foreground); line-height: 1.55; margin: .8rem 0 0; }
.mep-cc-trust { text-align: center; margin-top: 1.25rem; }
.mep-cc-trust h4 { font-size: .82rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--foreground); margin: 0 0 .8rem; }
.mep-cc-trust img { max-width: 220px; margin: 0 auto; }
/* in-app payment frame (CheckoutPay.aspx) — hosts the gateway payToken page + 3DS challenge */
.mep-pay-frame-wrap { max-width: 640px; margin: 0 auto; }
.mep-pay-frame { width: 100%; position: relative; }
.mep-pay-frame iframe { display: block; width: 100%; min-height: 640px; border: 0; border-radius: .6rem; background: var(--card); }
@media (max-width: 560px) { .mep-pay-frame iframe { min-height: 560px; } }
/* small inline spinner variant (used in the payment "in progress" banner) */
.mep-spinner-sm { width: 20px; height: 20px; border-width: 3px; flex-shrink: 0; }
/* persistent "do not close/refresh" banner shown for the whole card-payment session */
.mep-pay-warn {
  display: flex; align-items: center; gap: .65rem; margin: 0 0 1rem; padding: .7rem .9rem;
  border-radius: .55rem; background: var(--accent); border: 1px solid var(--border);
  color: var(--foreground); font-size: .85rem; line-height: 1.45;
}
.mep-pay-warn strong { color: var(--primary); }
/* loading overlay that covers the iframe until the gateway form renders */
.mep-pay-loading {
  position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .55rem; text-align: center;
  padding: 1.5rem; background: var(--card); border-radius: .6rem;
}
.mep-pay-loading[hidden] { display: none; }

/* ---- cake checkout (CheckoutCake.aspx): reskin legacy table markup + form fields ---- */
.mep-cake { max-width: 760px; margin: 0 auto; }
.mep-cake .flowtext, .mep-cake .label, .mep-cake td, .mep-cake span { font-family: var(--font-sans); }
.mep-cake [style*="color:Navy"], .mep-cake [style*="color: Navy"],
.mep-cake [style*="SteelBlue"], .mep-cake [style*="steelblue"],
.mep-cake [style*="IndianRed"], .mep-cake [style*="indianred"] { color: var(--foreground) !important; }
.mep-cake input[type=text], .mep-cake input[type=password], .mep-cake textarea, .mep-cake select {
  box-sizing: border-box; max-width: 100%; padding: .5rem .75rem; border: 1px solid var(--border);
  border-radius: .55rem; font-family: var(--font-sans); font-size: .9rem; background: var(--card); color: var(--foreground);
}
.mep-cake textarea { width: 100%; }
.mep-cake input:focus, .mep-cake select:focus, .mep-cake textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,64,12,.15); }
.mep-cake .label { font-weight: 600; font-size: .85rem; color: var(--muted-foreground); }
.mep-cake .cartTotals { font-weight: 700; color: var(--foreground); }
.mep-cake .mep-btn { margin: .3rem; }
.mep-cake h3 .flowtext { font-family: var(--font-display); font-weight: 600; }
/* keep the cart-confirm item table from stretching full width on large screens; outline as a card */
.mep-cake-cart { max-width: 480px; margin: 0 auto; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1rem 1.5rem 1.5rem; }
.mep-cake-cart > table { width: 100% !important; }
/* p1 order-details / delivery form: centered, themed, not full width; strip legacy fixed-size/whitesmoke labels */
.mep-cake-form { max-width: 560px; margin: 0 auto; text-align: left; }
.mep-cake-form > table { width: 100% !important; }
.mep-cake-form span[style] { background: transparent !important; width: auto !important; height: auto !important; }
.mep-cake-form textarea { width: 100% !important; }
.mep-cake-form .mep-co-card { text-align: left; }
/* label : control rows for the cake options form (pulled out of the legacy nested tables) */
.mep-cake-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--border); }
.mep-cake-row:last-child { border-bottom: 0; }
.mep-cake-rl { font-weight: 600; font-size: .85rem; color: var(--muted-foreground); flex-shrink: 0; }
.mep-cake-row .form-control1, .mep-cake-row select, .mep-cake-row input[type=text] { max-width: 60%; }
.mep-cake-sub { padding: .5rem 0 .65rem; font-size: .85rem; color: var(--muted-foreground); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.mep-cake-time { display: inline-flex; align-items: center; gap: .35rem; }
.mep-cake-radios label { margin: 0 .6rem 0 .25rem; font-size: .88rem; color: var(--foreground); }
.mep-cake-row input[type=date] { max-width: 60%; }
.mep-cake-form .mep-co-actions { max-width: 560px; margin: 1.25rem auto 0; }
/* on phones, stack each field's label above a full-width control so nothing is cramped/clipped */
@media (max-width: 560px) {
  .mep-cake-row { flex-direction: column; align-items: stretch; gap: .35rem; }
  .mep-cake-row .mep-cake-rl { font-size: .82rem; }
  .mep-cake-row .form-control1,
  .mep-cake-row select,
  .mep-cake-row input[type=text],
  .mep-cake-row input[type=date],
  .mep-cake-row .mep-cake-time { max-width: 100%; width: 100%; }
  .mep-cake-time { justify-content: space-between; }
}

/* cake order receipt (OrderMade panel p4 / cake email body) is rendered server-side as fixed-width
   nowrap tables -> make it responsive on screen, segregate sections, and highlight the order total */
.mep-cake-receipt { text-align: left; }
.mep-cake-receipt table { width: 100% !important; border-collapse: collapse; margin: 0 0 .5rem; }
.mep-cake-receipt td, .mep-cake-receipt th { white-space: normal !important; overflow-wrap: break-word; padding: .45rem .4rem; font-family: var(--font-sans) !important; font-size: .85rem; color: var(--foreground) !important; vertical-align: top; border-bottom: 1px solid var(--border); }
.mep-cake-receipt [bgcolor] { background: transparent !important; }
.mep-cake-receipt u { text-decoration: none; }
.mep-cake-receipt h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; text-align: left; margin: 1.5rem 0 .35rem; color: var(--foreground); }
.mep-cake-receipt hr { border: 0; border-top: 1px solid var(--border); margin: .15rem 0; }
.mep-cake-receipt img { max-width: 100%; height: auto; }
.mep-cake-receipt .mep-receipt-total td { font-weight: 700 !important; color: var(--primary) !important; font-size: 1.02rem !important; border-top: 2px solid var(--border); border-bottom: 0; }
/* once the summary stacks under the form (single column), give the trust card more breathing room */
@media (max-width: 880px) {
  .mep-cc-trust { margin-top: 2rem; }
}
@media (max-width: 560px) {
  .mep-cc-grid { grid-template-columns: 1fr; }
  .mep-cc-trio { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .mep-checkout .col-xs-5, .mep-checkout .col-xs-2 { display: block; width: 100%; }
  .mep-checkout .col-xs-2 { margin: .5rem 0; }
}
/* collapse chevron: hidden on desktop (cards always expanded), shown on mobile */
.mep-collapse-chev { display: none; }
.mep-wallet-title, .mep-cart-title { margin-right: auto; }

@media (max-width: 860px) {
  /* Single column, stacked in this order: hero, then wallet/cart, then the menu items
     (so the cart isn't buried at the end). Grid areas make the order explicit. */
  /* Restore a row gap so the stacked hero → wallet/cart → menu don't butt together
     (desktop grid sets row-gap 0 since the sidebar is its own column there). */
  .mep-order-layout { grid-template-columns: 1fr; grid-template-areas: "hero" "side" "main"; min-height: 0; gap: 1rem; }
  .mep-menu-main { width: 100%; }
  .mep-order-side { position: static; width: 100%; max-width: none; max-height: none; overflow: visible; }
  /* hero returns to a normal (non-sticky) full-width banner when stacked. Keep it
     position:relative (NOT static) so it stays the containing block for its absolutely-
     positioned image/shade/content — otherwise the dark shade escapes and covers the section. */
  .mep-mhead { position: relative; top: auto; }
  /* no cap when stacked — let the cart list flow with the page instead of scrolling internally */
  .mep-cart-list { max-height: none; overflow: visible; }
  .mep-menu-main .mep-filterbar { position: static; }
  .mep-topbar { position: static; }

  /* collapsible summary cards */
  .mep-wallet-head, .mep-cart-head { cursor: pointer; user-select: none; margin-bottom: 0; }
  .mep-wallet:not(.mep-collapsed) .mep-wallet-head { margin-bottom: .85rem; }
  .mep-cart:not(.mep-collapsed) .mep-cart-head { margin-bottom: .35rem; }
  .mep-collapse-chev {
    display: inline-block; flex-shrink: 0; width: .5rem; height: .5rem; margin-left: .5rem; margin-top: -.18rem;
    border-right: 2px solid var(--muted-foreground); border-bottom: 2px solid var(--muted-foreground);
    transform: rotate(45deg); transition: transform .2s ease;
  }
  .mep-wallet:not(.mep-collapsed) .mep-collapse-chev,
  .mep-cart:not(.mep-collapsed) .mep-collapse-chev { transform: rotate(-135deg); }
  .mep-wallet.mep-collapsed > :not(.mep-wallet-head),
  .mep-cart.mep-collapsed > :not(.mep-cart-head) { display: none; }
}

/* ---- menu items (compact cards: photo left @ 1/3, details right) ---- */
/* lblCatItems renders as a <span> that ASP.NET marks display:inline-block (shrink-wraps to
   content) — force it to a full-width block so filtered results fill the column. */
.mep .mep-menu-host { display: block !important; width: 100%; background: transparent; }
/* Items are inset 16px so they — and their box-shadows — stay inside the full-width hero as they
   scroll up behind it (clearing its rounded corners). The search bar is NOT inset: it sits in
   .mep-menu-main directly, so it keeps the full hero/header width. */
.mep-menu { display: block; width: 100%; margin-top: .25rem; padding: 0 16px; box-sizing: border-box; }
.mep-menu-cat {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  color: var(--foreground); margin: 1.4rem 0 .65rem; padding-bottom: .4rem;
  border-bottom: 1px solid var(--border); letter-spacing: -0.01em;
}
.mep-menu-cat:first-child { margin-top: .25rem; }
.mep-menu-grid {
  display: grid; grid-template-columns: 1fr; gap: .85rem;
}
.mep-mitem {
  position: relative;
  display: flex; align-items: stretch; min-height: 6.25rem;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
/* low-stock quantity badge, top-right of the item card (shown when fewer than 10 remain).
   right:.85rem lines its right edge up with the "Add" button (the body's right padding).
   Styled as a subtle greyed outlined pill; the solid card background keeps it legible if it
   sits over the item name. */
.mep-mitem-qty {
  position: absolute; top: .4rem; right: .85rem; z-index: 3;
  font-size: .62rem; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  color: var(--muted-foreground); background: var(--card);
  border: 1px solid var(--border); padding: .1rem .45rem; border-radius: 999px;
}
.mep-mitem:hover { box-shadow: var(--shadow-lg); border-color: rgba(232,64,12,.35); }
.mep-mitem-img {
  position: relative; flex: 0 0 33%; max-width: 33%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--muted); /* overridden inline with a per-item colour */
}
/* uploaded item photo fills the colour block; zooms slightly on hover (clipped by the block's
   overflow:hidden), mirroring the monogram scale. Click to open in the lightbox. */
.mep-mitem-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; cursor: zoom-in; }
/* faint monogram (first letter) so the colour block reads as intentional */
.mep-mitem-mono {
  font-family: var(--font-display); font-weight: 600;
  font-size: 2rem; line-height: 1; color: rgba(255,255,255,.55);
  transition: transform .25s ease;
}
.mep-mitem:hover .mep-mitem-mono { transform: scale(1.12); }
.mep-mitem:hover .mep-mitem-photo { transform: scale(1.08); }
/* hover hint that the photo is clickable (native title tooltip is set as a fallback in JS) */
.mep-mitem-img:has(.mep-mitem-photo)::after {
  content: "Click to enlarge"; position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: .5rem .4rem .3rem; text-align: center;
  font-size: .62rem; font-weight: 700; letter-spacing: .02em; color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,0));
  opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.mep-mitem:hover .mep-mitem-img:has(.mep-mitem-photo)::after { opacity: 1; transform: translateY(0); }

/* click-to-zoom lightbox, framed in the theme orange */
.mep-lightbox {
  position: fixed; inset: 0; z-index: 1000; display: none;
  align-items: center; justify-content: center; padding: 5vh 5vw;
  background: rgba(0,0,0,.72);
}
.mep-lightbox.is-open { display: flex; }
.mep-lightbox-img {
  max-width: min(90vw, 760px); max-height: 90vh; object-fit: contain; background: var(--card);
  border: 3px solid var(--primary); border-radius: var(--radius); box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.mep-lightbox-close {
  position: absolute; top: 1rem; right: 1.25rem; width: 2.5rem; height: 2.5rem;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: none; border-radius: 999px; background: var(--primary); color: #fff; font-size: 1.5rem; line-height: 1;
}
.mep-mitem-flag {
  position: absolute; top: .4rem; left: .4rem; z-index: 1;
  font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #b91c1c; background: #fee2e2; padding: .12rem .4rem; border-radius: 999px;
}
.mep-mitem.sold .mep-mitem-img { filter: grayscale(1); }
.mep-mitem.sold { opacity: .75; }
.mep-mitem-body {
  flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column;
  padding: .7rem .85rem .7rem .9rem;
}
.mep-mitem-name {
  margin: 0 0 .2rem; font-size: .98rem; font-weight: 700; line-height: 1.2; color: var(--foreground);
  white-space: normal; overflow-wrap: break-word; word-break: break-word;
}
/* .mep-mitem-qty is absolutely positioned top-right and therefore out of flow, so a long name
   ran underneath it ("Cappucin[3 left]"). Reserve the badge's width, but only on cards that
   actually have one — most items are in stock and should keep the full width. */
.mep-mitem:has(.mep-mitem-qty) .mep-mitem-name { padding-right: 3.5rem; }
.mep-mitem-desc {
  margin: 0 0 .4rem; font-size: .78rem; line-height: 1.35; color: var(--muted-foreground);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* The size+price block and the Add button share this row. Both the price and the size are
   white-space:nowrap, so when the card gets narrow (2-up grid on a small window) they cannot
   shrink — they used to overflow their own box and disappear UNDER the Add button, which is
   flex-shrink:0 with a solid background and comes later in the DOM. Never truncate money.
   flex-wrap lets the Add button drop to its own line as a last resort instead of covering the
   price; min-width:min-content on the info block (was 0, which let it collapse and overflow
   silently) is what actually forces that wrap. */
.mep-mitem-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; flex-wrap: wrap; row-gap: .4rem;
}
.mep-mitem-info {
  display: flex; align-items: baseline; gap: .5rem;
  min-width: min-content; flex-wrap: wrap; row-gap: .1rem;
}
.mep-mitem-size { font-size: .75rem; color: var(--muted-foreground); white-space: nowrap; }
.mep-mitem-price { font-size: 1rem; font-weight: 700; color: var(--foreground); white-space: nowrap; }
/* scoped with .mep so the white text beats the global `body.mep a { color: inherit }` rule */
.mep a.mep-mitem-add {
  /* margin-left:auto keeps it hard right on its own line once .mep-mitem-foot wraps
     (justify-content:space-between would otherwise left-align a lone wrapped item) */
  flex-shrink: 0; margin-left: auto; cursor: pointer; font-size: .8rem; font-weight: 600;
  color: var(--primary-foreground); background: var(--primary);
  padding: .35rem .85rem; border-radius: 999px; text-decoration: none;
  transition: background .15s ease, transform .15s ease;
}
.mep a.mep-mitem-add:hover { background: #c9360a; transform: translateY(-1px); color: var(--primary-foreground); }
.mep-mitem-add.is-disabled {
  background: var(--muted); color: var(--muted-foreground); cursor: not-allowed; pointer-events: none;
}
/* 2-up once there's room. At =<860px the sidebar moves to the top, so the menu has full width
   and fits two columns down to ~600px; narrow phones (<600px) stay single column. */
@media (min-width: 600px) { .mep-menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- login drawer ---- */
.mep-drawer-overlay {
  position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.4); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease;
}
.mep-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 51; width: 100%; max-width: 24rem;
  background: #fff; box-shadow: var(--shadow-lg); display: flex; flex-direction: column;
  transform: translateX(100%); transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.mep-drawer-open .mep-drawer-overlay { opacity: 1; visibility: visible; }
.mep-drawer-open .mep-drawer { transform: translateX(0); }
/* Phone Orders two-pane cashier login layout, reused on the standalone
   PhoneOrdersLogin.aspx popup window (see mepOpenPhoneOrdersPopup in meals1.Master). */
.mep-po-panes { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.mep-po-pane { flex: 1 1 220px; min-width: 200px; }
.mep-po-pane + .mep-po-pane { border-left: 1px solid var(--border); padding-left: 1.5rem; }
.mep-po-divider-label {
  text-align: center; font-size: .6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted-foreground); margin: 0 0 1rem;
}
@media (max-width: 480px) {
  .mep-po-pane + .mep-po-pane { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 1.5rem; margin-top: .5rem; }
}
.mep-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); }
.mep-drawer-head img { height: 36px; width: auto; object-fit: contain; }
.mep-close { width: 2rem; height: 2rem; border: none; cursor: pointer; border-radius: 9999px; background: var(--muted); color: var(--muted-foreground); display: inline-flex; align-items: center; justify-content: center; }
.mep-close:hover { background: #ece7e2; }
.mep-drawer-body { flex: 1; overflow-y: auto; padding: 2rem 1.5rem; }
.mep-drawer-body .mep-welcome { margin-bottom: 1.5rem; }
.mep-drawer-body .mep-welcome h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin-bottom: .25rem; }
.mep-drawer-body .mep-welcome p { color: var(--muted-foreground); font-size: .875rem; margin: 0; }
.mep-field { margin-bottom: 1rem; }
.mep-field > label, .mep-label {
  display: block; font-size: .6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted-foreground); margin-bottom: .375rem;
}

/* style the existing asp.net controls inside the drawer */
.mep-drawer .form-control,
.mep-drawer input[type=text],
.mep-drawer input[type=password],
.mep-drawer select {
  width: 100%; height: 2.75rem; padding: 0 1rem; font: inherit; font-size: .875rem;
  color: var(--foreground); background: var(--muted);
  border: 1px solid var(--border); border-radius: var(--radius); outline: none;
  transition: border-color .15s ease, box-shadow .15s ease; -webkit-appearance: none; appearance: none;
}
.mep-drawer select { background-image: none; }
.mep-drawer .form-control:focus,
.mep-drawer input:focus,
.mep-drawer select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,64,12,.18); }
.mep-drawer .input-group { padding-bottom: 0 !important; margin-bottom: 1rem; }

/* the Login button (asp:Button renders <input type=submit class="btn btn-primary">) */
.mep-drawer .btn-primary,
.mep-drawer input[type=submit].btn-primary {
  width: 100%; height: 2.75rem; margin-top: .5rem; border: none; cursor: pointer;
  background: var(--primary); color: #fff; font: inherit; font-weight: 600; font-size: .875rem;
  border-radius: var(--radius); transition: transform .15s ease;
}
.mep-drawer .btn-primary:hover { transform: scale(1.02); }
.mep-drawer .btn-primary:active { transform: scale(.98); }
/* second button (Forgot Password) → text link look */
.mep-drawer #btnFP, .mep-drawer input[id$='btnFP'] {
  background: transparent !important; color: var(--primary) !important; height: auto !important;
  text-decoration: underline; text-underline-offset: 2px; font-weight: 500 !important;
  box-shadow: none !important; margin-top: .25rem; padding: .25rem; transform: none !important;
}
.mep-drawer .btn { display: block; }
.mep-msg { margin-top: .75rem; color: var(--primary); font-size: .85rem; }
.mep-remember { display: flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--muted-foreground); margin: .25rem 0; cursor: pointer; user-select: none; }
.mep-remember input { width: 1rem; height: 1rem; accent-color: var(--primary); margin: 0; }

/* ---- auth pages (forgot password, etc.) ---- */
/* sticky-footer layout: header top, card centered, footer at bottom */
.mep-auth-body { display: flex; flex-direction: column; min-height: 100vh; }
.mep-auth-body > form { flex: 1 0 auto; display: flex; flex-direction: column; }
.mep-auth {
  flex: 1 0 auto; min-height: 0; width: 100%; max-width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 3rem 1rem;
}
.mep-auth-card {
  width: 100%; max-width: min(440px, calc(100vw - 2rem)); min-width: 0; background: var(--card);
  border: 1px solid var(--border); border-radius: 1.25rem;
  box-shadow: var(--shadow-lg); padding: 2.5rem 2rem; text-align: left;
}
.mep-auth-icon {
  width: 3.5rem; height: 3.5rem; border-radius: 9999px; background: var(--accent);
  color: var(--primary); display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem;
}
.mep-auth-icon svg { width: 1.5rem; height: 1.5rem; }
.mep-auth-card h1 { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.15; margin: 0 0 .5rem; overflow-wrap: break-word; }
.mep-auth-card .mep-sub { color: var(--muted-foreground); font-size: .9rem; line-height: 1.55; margin: 0 0 1.5rem; }

.mep-auth-card .textbox,
.mep-auth-card input[type=text],
.mep-auth-card input[type=password] {
  width: 100%; height: 2.75rem; padding: 0 1rem; font: inherit; font-size: .9rem;
  color: var(--foreground); background: var(--muted); border: 1px solid var(--border);
  border-radius: var(--radius); outline: none; transition: border-color .15s ease, box-shadow .15s ease;
}
.mep-auth-card .textbox:focus,
.mep-auth-card input[type=text]:focus,
.mep-auth-card input[type=password]:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,64,12,.18); }

/* primary submit button (btnGetPwd) */
.mep-auth-card .mep-submit, .mep-auth-card input.mep-submit {
  width: 100%; height: 2.75rem; margin-top: 1.25rem; border: none; cursor: pointer;
  background: var(--primary); color: #fff; font: inherit; font-weight: 600; font-size: .9rem;
  border-radius: var(--radius); transition: transform .15s ease;
}
.mep-auth-card .mep-submit:hover { transform: scale(1.02); }
.mep-auth-card .mep-submit:active { transform: scale(.98); }
/* back / secondary button (btnBack) -> ghost link look */
.mep-auth-card .mep-back, .mep-auth-card input.mep-back {
  display: block; width: 100%; margin-top: .75rem; padding: .6rem; border: none; background: transparent;
  color: var(--muted-foreground); font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px; transition: color .15s ease;
}
.mep-auth-card .mep-back:hover { color: var(--primary); }
.mep-auth-link { color: var(--primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

.mep-auth-foot { text-align: center; font-size: .75rem; color: var(--muted-foreground); padding: 1.25rem; border-top: 1px solid var(--border); }

/* ---- responsive ---- */
@media (min-width: 640px) {
  .mep-grid { grid-template-columns: repeat(2, 1fr); }
  .mep-band-grid { grid-template-columns: repeat(3, 1fr); }
  .mep-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mep-partners { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .mep-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1023px) {
  .mep-hero-float { display: none; }
}
@media (max-width: 480px) {
  .mep-wrap { padding: 0 1rem; }
  .mep-logo { width: 130px; }
  .mep-btn-primary { padding: .5rem 1rem; height: 38px; }
  .mep-hero-inner { padding-top: 3.5rem; padding-bottom: 4rem; }
  .mep-hero p { font-size: 1rem; }
  .mep-auth { padding-top: 2rem; }
  .mep-auth-card { padding: 2rem 1.25rem; }
  .mep-section { padding-top: 4rem; }
  .mep-band-grid { padding-top: 4.5rem; padding-bottom: 4.5rem; }
  .mep-footer-grid { padding-top: 5rem; }
  /* flex-wrap/height now handled by the base .mep-header-inner rule; just a little more air */
  .mep-header-inner { padding-top: .5rem; padding-bottom: .5rem; }
  .mep-nav a { padding: .4rem .6rem; }
}

/* =====================================================================
   Company / business DASHBOARD (ml/Company.master) — reuses the mep design
   tokens (colours, fonts, components) with a denser admin layout: sticky top
   nav, wide content, themed legacy form controls. Distinct from the consumer
   storefront layout, same design language.
   ===================================================================== */
.mep-dash-body { background: var(--background); color: var(--foreground); }
.mep-dash-nav { position: sticky; top: 0; z-index: 50; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.mep-dash-nav-inner { max-width: 1180px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: .55rem 1.25rem; flex-wrap: wrap; }
.mep-dash-logo img { height: 38px; width: auto; display: block; }
.mep-dash-menu { display: flex; align-items: center; gap: .1rem; flex-wrap: wrap; }
.mep-dash-menu a { display: inline-block; padding: .5rem .8rem; border-radius: .5rem; font-family: var(--font-sans); font-size: .9rem; font-weight: 600; color: var(--foreground); text-decoration: none; white-space: nowrap; }
.mep-dash-menu a:hover { background: var(--accent); color: var(--primary); }
.mep-dash-menu a.active { color: var(--primary); background: var(--accent); }
.mep-dash-sub { position: relative; }
.mep-dash-sub > .mep-dash-subm { position: absolute; left: 0; top: 100%; min-width: 230px; background: var(--card); border: 1px solid var(--border); border-radius: .6rem; box-shadow: var(--shadow-lg); padding: .3rem; display: none; z-index: 60; }
.mep-dash-sub:hover > .mep-dash-subm, .mep-dash-sub:focus-within > .mep-dash-subm { display: block; }
.mep-dash-subm a { display: block; }
.mep-dash-user { display: flex; align-items: center; gap: .85rem; margin-left: auto; font-size: .85rem; color: var(--muted-foreground); }
.mep-dash-company { font-weight: 700; color: var(--foreground); }
.mep-dash-logout { display: inline-flex; align-items: center; gap: .4rem; background: var(--primary); color: #fff !important; border-radius: 9999px; padding: .45rem 1.1rem; font-weight: 600; text-decoration: none; }
.mep-dash-logout:hover { background: #c9360a; }
.mep-dash-main { max-width: 1180px; margin: 0 auto; padding: 1.75rem 1.25rem 3rem; }
.mep-dash-foot { border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: .8rem; text-align: center; padding: 1.25rem; }

/* map the legacy company-page classes to the theme so existing pages look themed
   with minimal per-page churn (same idea as the .mep-checkout overrides) */
.mep-dash .PageHeading { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.2; color: var(--foreground); padding: .25rem 0 1.1rem; text-align: left; }
.mep-dash, .mep-dash td, .mep-dash th, .mep-dash label, .mep-dash span, .mep-dash .normaltext, .mep-dash .flowtext { font-family: var(--font-sans); color: var(--foreground); }
.mep-dash .textbox, .mep-dash input[type=text], .mep-dash input[type=password], .mep-dash select, .mep-dash textarea {
  box-sizing: border-box; padding: .5rem .7rem; border: 1px solid var(--border); border-radius: .55rem;
  font-family: var(--font-sans); font-size: .9rem; background: var(--card); color: var(--foreground); max-width: 100%;
}
.mep-dash .textbox:focus, .mep-dash input:focus, .mep-dash select:focus, .mep-dash textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,64,12,.15); }
.mep-dash .button, .mep-dash input[type=submit], .mep-dash input[type=button] {
  display: inline-block; background: var(--primary); color: #fff; border: 1px solid var(--primary); border-radius: 9999px;
  padding: .5rem 1.25rem; font-family: var(--font-sans); font-weight: 600; font-size: .9rem; cursor: pointer; transition: background .15s ease;
}
.mep-dash .button:hover, .mep-dash input[type=submit]:hover { background: #c9360a; border-color: #c9360a; }
/* surface card to drop report/data tables onto */
.mep-dash-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.25rem 1.35rem; margin: 0 auto; overflow-x: auto; }
@media (max-width: 720px) {
  .mep-dash-nav-inner { gap: .5rem; }
  .mep-dash-user { width: 100%; margin-left: 0; justify-content: space-between; }
}

/* ----- dashboard home: welcome, KPI cards, spend chart, data table ----- */
.mep-dash-welcome { margin-bottom: 1.25rem; }
.mep-dash-welcome .PageHeading { padding-bottom: .15rem; }
.mep-dash-lede { color: var(--muted-foreground); font-size: .92rem; margin: 0; }
.mep-dash-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.mep-dash-kpi { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .15rem; }
.mep-dash-kpi .l { font-size: .78rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted-foreground); }
/* value is abbreviated (M/B) server-side, so keep it on one line and let the font ease down on narrow cards */
.mep-dash-kpi .v { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 1rem + 0.9vw, 1.6rem); line-height: 1.1; color: var(--foreground); white-space: nowrap; }
.mep-dash-kpi .s { font-size: .8rem; color: var(--muted-foreground); }
.mep-dash-card + .mep-dash-card { margin-top: 1.25rem; }
.mep-dash-section-title { font-weight: 700; font-size: 1rem; color: var(--foreground); margin-bottom: 1rem; }
.mep-dash-empty { color: var(--muted-foreground); font-size: .9rem; margin: 0; }
/* CSS bar chart (no chart lib) */
.mep-dash-chart { display: flex; align-items: flex-end; gap: .5rem; min-height: 200px; overflow-x: auto; padding-bottom: .25rem; }
.mep-dash-bar { flex: 1 1 0; min-width: 34px; display: flex; flex-direction: column; align-items: center; gap: .4rem; }
.mep-dash-bar-track { width: 100%; height: 180px; display: flex; align-items: flex-end; }
.mep-dash-bar-fill { width: 100%; background: linear-gradient(180deg, var(--primary), #f0743f); border-radius: .35rem .35rem 0 0; min-height: 3px; transition: filter .15s ease; }
.mep-dash-bar:hover .mep-dash-bar-fill { filter: brightness(1.08); }
.mep-dash-bar-x { font-size: .68rem; color: var(--muted-foreground); white-space: nowrap; }
/* data table */
.mep-dash-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mep-dash-table th { text-align: left; font-weight: 700; color: var(--muted-foreground); font-size: .78rem; text-transform: uppercase; letter-spacing: .02em; padding: .5rem .4rem; border-bottom: 2px solid var(--border); }
.mep-dash-table td { padding: .55rem .4rem; border-bottom: 1px solid var(--border); color: var(--foreground); }
.mep-dash-table tr:last-child td { border-bottom: 0; }
.mep-dash-table .r { text-align: right; font-weight: 600; white-space: nowrap; }
/* month-over-month delta badge */
.mep-dash-delta { display: inline-block; font-size: .72rem; font-weight: 700; padding: .05rem .45rem; border-radius: 9999px; margin-left: .15rem; }
.mep-dash-delta.up { color: #15803d; background: #dcfce7; }
.mep-dash-delta.down { color: #b91c1c; background: #fee2e2; }
.mep-dash-delta.flat { color: var(--muted-foreground); background: var(--accent); }
/* two-column breakdown blocks (spend by restaurant / location) */
.mep-dash-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.mep-dash-2col > .mep-dash-card { margin-top: 0; }
@media (max-width: 760px) { .mep-dash-2col { grid-template-columns: 1fr; } }
/* horizontal bar list */
.mep-dash-hbars { display: flex; flex-direction: column; gap: .7rem; }
.mep-dash-hbar-top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; font-size: .85rem; margin-bottom: .25rem; }
.mep-dash-hbar-name { color: var(--foreground); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mep-dash-hbar-val { color: var(--muted-foreground); font-weight: 600; white-space: nowrap; }
.mep-dash-hbar-track { background: var(--accent); border-radius: 6px; height: 8px; overflow: hidden; }
.mep-dash-hbar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #f0743f); border-radius: 6px; min-width: 4px; }
/* dashboard form card (e.g. add/edit location) */
.mep-dash-form { max-width: 620px; margin: 0 auto; }
.mep-dash-form .mep-field { margin-bottom: 1.1rem; }
.mep-dash-form .mep-label { display: block; font-weight: 600; font-size: .85rem; color: var(--foreground); margin-bottom: .35rem; }
.mep-dash-form .mep-field .textbox,
.mep-dash-form .mep-field input[type=text],
.mep-dash-form .mep-field input[type=password],
.mep-dash-form .mep-field select,
.mep-dash-form .mep-field textarea { width: 100% !important; box-sizing: border-box; display: block; }
.mep-dash-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 560px) { .mep-dash-form-row { grid-template-columns: 1fr; } }
.mep-dash-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-top: 1.4rem; }
.mep-dash-readonly { padding: .5rem .7rem; border: 1px solid var(--border); border-radius: .55rem; background: var(--accent); color: var(--foreground); font-weight: 600; }
.mep-dash-back { display: inline-block; padding: .5rem 1.15rem; border: 1px solid var(--border); border-radius: 9999px; color: var(--foreground); text-decoration: none; font-weight: 600; font-size: .9rem; }
.mep-dash-back:hover { border-color: var(--primary); color: var(--primary); }
/* .mep-dash .EMessage/.SMessage are themed alongside .mep-mc further down, so the
   business dashboard shows the same icon-badge alerts as merchant/admin. */
/* themed legacy DataGrid (e.g. view/edit locations). NB: NOT ".mep-grid" — that class is the
   customer storefront restaurant grid (display:grid) and would turn the table into a CSS grid. */
.mep-dash-grid { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mep-dash-grid td { padding: .6rem .7rem; border-bottom: 1px solid var(--border); color: var(--foreground); vertical-align: middle; }
.mep-dash-grid tr.GridHeader td { font-weight: 700; font-size: .74rem; letter-spacing: .03em; text-transform: uppercase; color: var(--muted-foreground); border-bottom: 2px solid var(--border); white-space: nowrap; }
.mep-dash-grid tr.GridAlternativeItemStyle td { background: rgba(0,0,0,.02); }
.mep-dash-grid tr.GridItemStyle:hover td, .mep-dash-grid tr.GridAlternativeItemStyle:hover td { background: var(--accent); }
.mep-dash-grid a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: .5rem; color: var(--primary); border: 1px solid var(--border); text-decoration: none; }
.mep-dash-grid a:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.mep-dash-grid a svg { width: 17px; height: 17px; }
/* dashboard filter bar */
.mep-dash-filter { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem 1.1rem; align-items: end; }
.mep-dash-filter .mep-field { margin: 0; }
.mep-dash-filter .mep-label { display: block; font-weight: 600; font-size: .8rem; color: var(--muted-foreground); margin-bottom: .35rem; }
.mep-dash-filter .textbox, .mep-dash-filter input[type=text], .mep-dash-filter input[type=date], .mep-dash-filter select { width: 100%; box-sizing: border-box; }
.mep-dash-filter .button, .mep-dash-filter input[type=submit] { width: 100%; }
/* report table (text links, not the icon-button grid) */
.mep-dash-report { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mep-dash-report td { padding: .55rem .7rem; border-bottom: 1px solid var(--border); color: var(--foreground); }
.mep-dash-report .ReportHeading { font-weight: 700; font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-foreground); border-bottom: 2px solid var(--border); white-space: nowrap; }
.mep-dash-report .ReportAltItem { background: rgba(0,0,0,.02); }
.mep-dash-report a { color: var(--primary); font-weight: 600; text-decoration: none; }
.mep-dash-report a:hover { text-decoration: underline; }
/* align the two header cells to their columns (date left, amount right) */
.mep-dash-report .ReportHeading:first-child { text-align: left; }
.mep-dash-report .ReportHeading:last-child { text-align: right; }
/* the grand-total row uses <font color="blue"> -> recolour to theme orange */
.mep-dash-report font { color: var(--primary) !important; font-weight: 700; }
.mep-dash-results-title { font-weight: 700; font-size: 1rem; color: var(--foreground); margin-bottom: 1rem; }
/* wide multi-column detail report (order details popup): keep columns readable, scroll on small screens */
.mep-dash-report-wide { min-width: 820px; }
.mep-dash-report-wide td { font-size: .82rem; vertical-align: top; }
.mep-dash-report-wide .ReportHeading { text-align: left !important; white-space: nowrap; }
.mep-dash-report-wide td:nth-child(6) { white-space: nowrap; }  /* Phone # on one line */
/* clean printing for the order-details popup */
@media print {
  .mep-dash-nav, .mep-dash-foot, .mep-dash-noprint { display: none !important; }
  .mep-dash-main { padding: 0; max-width: none; }
  .mep-dash-card { border: 0; box-shadow: none; padding: 0; }
}

/* ============================================================================
   Merchant console (ops shell): left sidebar + topbar + content.
   Shares the design tokens/components; layout is its own (the merchant's job is
   operating a restaurant, not browsing a storefront or reading reports).
   ============================================================================ */
body.mep-mc { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); }
body.mep-mc > form { display: grid; grid-template-columns: 256px minmax(0, 1fr); min-height: 100vh; }
/* WebForms wraps __VIEWSTATE etc. in <div class="aspNetHidden"> as the first form child;
   keep it out of the grid so it can't claim a column and shove the sidebar/shell around. */
body.mep-mc > form > .aspNetHidden { display: none; }

/* sidebar */
.mep-mc-side { grid-column: 1; grid-row: 1; background: var(--card); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.mep-mc-brand { padding: 1rem 1.15rem; border-bottom: 1px solid var(--border); }
.mep-mc-brand img { height: 36px; width: auto; display: block; }
.mep-mc-brand .mep-mc-logo-mini { display: none; }
.mep-mc-nav { padding: .85rem .6rem 1.5rem; display: flex; flex-direction: column; gap: .95rem; flex: 1 1 auto; min-height: 0; }
/* Log out pinned to the bottom of the sidebar */
.mep-mc-nav-foot { margin-top: auto; border-top: 1px solid var(--border); padding-top: .7rem; }
/* Admin sidebar: nav items scroll, Log out footer stays fixed and always visible.
   The whole side no longer scrolls (overflow:hidden); only .mep-mc-nav scrolls. */
.mep-mc-side-scroll { overflow: hidden; }
.mep-mc-side-scroll .mep-mc-nav { overflow-y: auto; overscroll-behavior: contain; padding-bottom: .6rem; }
.mep-mc-side-foot { flex-shrink: 0; border-top: 1px solid var(--border); padding: .55rem .6rem .7rem; background: var(--card); }
.mep-mc-nav-group { display: flex; flex-direction: column; gap: .1rem; }
.mep-mc-nav-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted-foreground); padding: .3rem .65rem .15rem; }
.mep-mc-nav-link { display: flex; align-items: center; gap: .6rem; padding: .5rem .65rem; border-radius: .55rem; font-size: .9rem; font-weight: 600; color: var(--foreground); text-decoration: none; transition: background .12s ease, color .12s ease; }
.mep-mc-nav-link svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; color: var(--muted-foreground); transition: color .12s ease; }
.mep-mc-nav-link:hover, .mep-mc-nav-link.active { background: var(--accent); color: var(--primary); }
.mep-mc-nav-link:hover svg, .mep-mc-nav-link.active svg { color: var(--primary); }

/* main column */
.mep-mc-shell { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; min-width: 0; min-height: 100vh; }
.mep-mc-topbar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .85rem; padding: .7rem 1.5rem; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.mep-mc-topbar-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--muted-foreground) !important; }
.mep-mc-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 1rem; }
.mep-mc-company, .mep-mc-company span { font-weight: 700; color: var(--primary) !important; font-size: .9rem; }
.mep-mc-burger { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; padding: 0; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); color: var(--foreground); cursor: pointer; }
.mep-mc-burger:hover { border-color: var(--primary); color: var(--primary); }
.mep-mc-burger svg { width: 1.2rem; height: 1.2rem; }
.mep-mc-content { flex: 1 1 auto; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding: 1.85rem 1.6rem 2.5rem; overflow-x: auto; }
.mep-mc-foot { border-top: 1px solid var(--border); color: var(--muted-foreground); font-size: .8rem; text-align: center; padding: 1.1rem; }
/* legacy hover tooltip (order receipt preview) used by some admin/report pages; JS toggles display */
.help { position: absolute; z-index: 60; display: none; background: var(--card); color: var(--foreground); border: 1px solid var(--border); border-radius: .5rem; box-shadow: var(--shadow-lg); padding: .5rem .75rem; font-size: .8rem; }

/* content card + page heading reused by merchant pages */
.mep-mc-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.5rem 1.6rem; overflow-x: auto; }

/* section quick-link cards (e.g. admin console landing) */
.mep-mc-section-h, .mep-mc-chart-h.mep-mc-section-h { margin-top: 3rem !important; margin-bottom: 0; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--foreground); }
.mep-mc-linkgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.25rem; margin-bottom: 3rem; }
.mep-mc-linkcard { display: flex; flex-direction: column; gap: .3rem; padding: 1.25rem 1.35rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); color: var(--foreground); text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.mep-mc-linkcard:hover { border-color: var(--primary); box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.mep-mc-linkcard svg { width: 1.75rem; height: 1.75rem; color: var(--primary); }
.mep-mc-linkcard-title { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; margin-top: .35rem; }
.mep-mc-linkcard-sub { color: var(--muted-foreground); font-size: .85rem; line-height: 1.4; }
.mep-mc .PageHeading { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.2; color: var(--foreground); padding: 0 0 1.1rem; text-align: center; }

/* restaurant picker (Process Orders entry) */
.mep-mc-pick { max-width: 460px; margin: 0 auto; text-align: center; }
.mep-mc-pick-label { display: block; font-weight: 600; color: var(--foreground); margin-bottom: .5rem; }
.mep-mc-pick-select { width: 100%; }
/* spacing between stacked fields when a pick card has more than one select */
.mep-mc-pick-select + .mep-mc-pick-label { margin-top: 1.1rem; }
/* multi-field pick card: left-align the field labels (card stays centered) */
.mep-mc-pick-form .mep-mc-pick-label { text-align: left; }
.mep-mc-pick-go { width: 100%; margin-top: 1.1rem; }

/* ---- vendor dashboard (MenuOrders home) ---- */
.mep-mc-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.mep-mc .PageHeading.mep-mc-dash-title { text-align: right; padding-bottom: .35rem; }
.mep-mc-lede { color: var(--muted-foreground); font-size: .9rem; line-height: 1.4; margin: 0 0 1.2rem auto; max-width: 72ch; text-align: right; }
.mep-mc-toolbar { display: flex; align-items: flex-end; gap: .6rem; flex-wrap: wrap; }
.mep-mc-dash-tools { margin-bottom: 1.35rem; }
.mep-mc-tool-field { display: flex; flex-direction: column; gap: .2rem; }
.mep-mc-tool-field label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); }
.mep-mc .mep-mc-date { padding: .45rem .55rem; }
.mep-mc-tool-btn { padding: .5rem 1.1rem; }

/* delta badge on KPI tiles */
.mep-mc-kpi-delta { font-size: .74rem; font-weight: 700; display: inline-flex; align-items: center; gap: .25rem; }
.mep-mc-kpi-delta em { font-style: normal; font-weight: 500; color: var(--muted-foreground); }
.mep-mc-kpi-delta.up { color: #16a34a; }
.mep-mc-kpi-delta.down { color: #dc2626; }
.mep-mc-kpi-delta.flat { color: var(--muted-foreground); }

/* recent-orders table */
.mep-mc-tablewrap { overflow-x: auto; }
.mep-mc-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.mep-mc-table th { text-align: left; font-weight: 700; color: var(--muted-foreground); font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; padding: .5rem .6rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mep-mc-table td { padding: .55rem .6rem; border-bottom: 1px solid var(--border); color: var(--foreground); white-space: nowrap; }
.mep-mc-table th.r, .mep-mc-table td.r { text-align: right; }
.mep-mc-table th.c, .mep-mc-table td.c { text-align: center; }
.mep-mc-table tbody tr:hover { background: var(--accent); }

/* icon action buttons (grid row actions) */
.mep-mc-iconbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; margin: 0 .12rem;
  border: 1px solid var(--border); border-radius: calc(var(--radius) - .35rem);
  background: var(--card); color: var(--muted-foreground);
  cursor: pointer; vertical-align: middle; text-decoration: none;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.mep-mc-iconbtn svg { width: 1rem; height: 1rem; display: block; }
.mep-mc-iconbtn:hover { background: var(--accent); color: var(--primary); border-color: var(--primary); }
.mep-mc-iconbtn-danger:hover { background: #fdecec; color: #dc2626; border-color: #dc2626; }

/* lunch-menu item selection table */
.mep-mc-menu { font-size: .9rem; }
.mep-mc-menu tr.ReportHeading td {
  background: var(--accent); color: var(--muted-foreground); font-weight: 700;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .6rem .9rem; border-bottom: 1px solid var(--border);
}
.mep-mc-menu tr.ReportItem td, .mep-mc-menu tr.ReportAltItem td {
  padding: .7rem .9rem; border-bottom: 1px solid var(--border); color: var(--foreground); vertical-align: middle;
}
.mep-mc-menu tr.ReportItem:last-child td, .mep-mc-menu tr.ReportAltItem:last-child td { border-bottom: none; }
.mep-mc-menu tr.ReportItem:hover td, .mep-mc-menu tr.ReportAltItem:hover td { background: var(--accent); }
.mep-mc-menu td.mep-mc-menu-name { font-weight: 600; }
.mep-mc-menu td.mep-mc-menu-muted { color: var(--muted-foreground); }
.mep-mc-menu td.mep-mc-menu-price { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mep-mc-menu td.mep-mc-menu-check { width: 1%; }
.mep-mc-menu input[type=checkbox] { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); cursor: pointer; vertical-align: middle; margin: 0; }

/* item daily-limit page */
.mep-dl-modes { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; margin-top: 1rem; }
.mep-dl-mode label { font-weight: 600; color: var(--foreground); cursor: pointer; }
.mep-dl-mode input[type=radio] { width: 1.05rem; height: 1.05rem; accent-color: var(--primary); cursor: pointer; vertical-align: middle; margin-right: .35rem; }
.mep-dl-view { margin-left: auto; }
.mep-dl-scroll { max-height: 460px; overflow: auto; margin-bottom: 1.1rem; }

.mep-dl-grid { font-size: .85rem; }
.mep-dl-grid tr.ReportHeading td {
  position: sticky; top: 0; z-index: 1;
  background: var(--accent); color: var(--muted-foreground); font-weight: 700;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .03em;
  padding: .55rem .6rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.mep-dl-grid tr.ReportItem td, .mep-dl-grid tr.ReportAltItem td {
  padding: .5rem .6rem; border-bottom: 1px solid var(--border); color: var(--foreground); vertical-align: middle; white-space: nowrap;
}
.mep-dl-grid tr.ReportAltItem td { background: rgba(0,0,0,.015); }
.mep-dl-grid tr.ReportItem:hover td, .mep-dl-grid tr.ReportAltItem:hover td { background: var(--accent); }
.mep-dl-grid td.mep-dl-name { font-weight: 600; }
.mep-dl-grid td.mep-dl-muted { color: var(--muted-foreground); }
.mep-dl-grid input[type=checkbox] { width: 1.05rem; height: 1.05rem; accent-color: var(--primary); cursor: pointer; vertical-align: middle; margin: 0; }
.mep-dl-grid input.mep-dl-limit { width: 56px; text-align: right; padding: .3rem .4rem; border: 1px solid var(--border); border-radius: .4rem; font: inherit; background: var(--card); color: var(--foreground); }
.mep-dl-grid input.mep-dl-desc { width: 100%; min-width: 320px; padding: .35rem .5rem; border: 1px solid var(--border); border-radius: .4rem; font: inherit; background: var(--card); color: var(--foreground); }
.mep-dl-grid input.mep-dl-limit:focus, .mep-dl-grid input.mep-dl-desc:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,64,12,.15); }
.mep-dl-imgcell { display: flex; align-items: center; gap: .5rem; }
.mep-dl-grid img.mep-dl-thumb { width: 44px; height: 44px; object-fit: cover; border-radius: .4rem; border: 1px solid var(--border); flex: 0 0 auto; }
.mep-dl-grid input.mep-dl-file { font-size: .8rem; color: var(--muted-foreground); }
.mep-dl-grid input.mep-dl-file:disabled { opacity: .55; cursor: not-allowed; }
/* theme the native "Choose file" button (standard + legacy webkit, kept as separate rules
   so an unsupported pseudo-element doesn't invalidate the whole selector list) */
.mep-dl-grid input.mep-dl-file::file-selector-button {
  font: inherit; font-size: .8rem; font-weight: 600; color: var(--primary);
  background: var(--card); border: 1px solid var(--border); border-radius: .45rem;
  padding: .32rem .7rem; margin-right: .6rem; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mep-dl-grid input.mep-dl-file::-webkit-file-upload-button {
  font: inherit; font-size: .8rem; font-weight: 600; color: var(--primary);
  background: var(--card); border: 1px solid var(--border); border-radius: .45rem;
  padding: .32rem .7rem; margin-right: .6rem; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mep-dl-grid input.mep-dl-file:hover:not(:disabled)::file-selector-button { background: var(--primary); color: #fff; border-color: var(--primary); }
.mep-dl-grid input.mep-dl-file:hover:not(:disabled)::-webkit-file-upload-button { background: var(--primary); color: #fff; border-color: var(--primary); }
.mep-dl-grid input.mep-dl-file:disabled::file-selector-button { color: var(--muted-foreground); background: var(--muted); cursor: not-allowed; }
.mep-dl-grid input.mep-dl-file:disabled::-webkit-file-upload-button { color: var(--muted-foreground); background: var(--muted); cursor: not-allowed; }

/* category band rows (0CAT separators) */
.mep-dl-grid tr.mep-dl-catrow td {
  background: var(--primary) !important; color: #fff !important; font-weight: 700;
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; padding: .5rem .6rem;
}
.mep-dl-grid tr.mep-dl-catrow:hover td { background: var(--primary) !important; }

/* generic themed DataGrid (ReportHeading / ReportItem / ReportAltItem rows) */
.mep-mc-grid tr.ReportHeading td {
  background: var(--accent); color: var(--muted-foreground); font-weight: 700;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .03em;
  padding: .6rem .9rem; border-bottom: 1px solid var(--border); white-space: nowrap;
}
.mep-mc-grid tr.ReportItem td, .mep-mc-grid tr.ReportAltItem td {
  padding: .7rem .9rem; border-bottom: 1px solid var(--border); color: var(--foreground); vertical-align: middle;
}
.mep-mc-grid tr.ReportItem:last-child td, .mep-mc-grid tr.ReportAltItem:last-child td { border-bottom: none; }
.mep-mc-grid tr.ReportAltItem td { background: rgba(0,0,0,.015); }
.mep-mc-grid tr.ReportItem:hover td, .mep-mc-grid tr.ReportAltItem:hover td { background: var(--accent); }
.mep-mc-grid td.mep-mc-grid-edit a { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid var(--border); border-radius: .5rem; background: var(--card); color: var(--muted-foreground); }
.mep-mc-grid td.mep-mc-grid-edit a:hover { border-color: var(--primary); background: var(--accent); color: var(--primary); }
.mep-mc-grid td.mep-mc-grid-edit a svg { width: 1rem; height: 1rem; }
/* manual asp:Table reports that carry Report* classes on the CELLS (e.g. CancelledOrders) */
.mep-mc-grid td.ReportHeading { background: var(--accent); color: var(--muted-foreground); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; padding: .6rem .9rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mep-mc-grid td.ReportItem, .mep-mc-grid td.ReportAltItem { padding: .7rem .9rem; border-bottom: 1px solid var(--border); color: var(--foreground); }
.mep-mc-grid td.ReportAltItem { background: rgba(0,0,0,.015); }
.mep-mc-grid tr:hover td.ReportItem, .mep-mc-grid tr:hover td.ReportAltItem { background: var(--accent); }
.mep-mc-grid td[colspan] { border-top: 2px solid var(--primary); background: var(--accent); font-weight: 700; padding: .7rem .9rem; }
.mep-mc-grid td[colspan] font { color: var(--primary); }
.mep-mc-grid .rlink { color: var(--primary); font-weight: 600; text-decoration: none; }
.mep-mc-grid .rlink:hover { text-decoration: underline; }

/* forces a wrap in the flex toolbar so following fields start on a new line */
.mep-mc-tool-break { flex-basis: 100%; height: 0; margin: 0; padding: 0; }
/* radio filters shown as distinct bordered sections (Delivery/Pickup, Cake Completed) */
.mep-cake-seg { display: inline-flex; flex-direction: column; gap: .4rem; padding: .55rem .85rem;
    border: 1px solid var(--border); border-radius: calc(var(--radius) - .3rem); background: var(--accent); }
.mep-cake-seg > label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); }
/* radio filters inside the dashboard toolbar (Delivery/Pickup, Cake Completed) */
.mep-cake-seg .mep-cake-radio { padding-top: 0; }
.mep-cake-radio { padding-top: .4rem; white-space: nowrap; }
.mep-cake-radio label { font-size: .85rem; color: var(--foreground); margin: 0 .9rem 0 .25rem; cursor: pointer; }
.mep-cake-radio input[type=radio] { accent-color: var(--primary); cursor: pointer; vertical-align: middle; margin: 0; }
/* action row above the results grid (Export / Save Completed) */
.mep-cake-actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; margin-bottom: 1rem; }
.mep-cake-selall { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.mep-mc-grid input[type=checkbox] { width: 1.1rem; height: 1.1rem; accent-color: var(--primary); cursor: pointer; vertical-align: middle; margin: 0; }

/* standalone popup windows (order detail views) */
body.mep-pop { background: var(--background); padding: 1.25rem; min-height: 100vh; }
/* popups reuse .mep-mc styling but are NOT the sidebar app-shell, so cancel the
   two-column form grid and let content flow full-width / responsive to the window. */
body.mep-pop > form { display: block; }
.mep-pop-wrap { max-width: 980px; margin: 0 auto; }
.mep-pop-head { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.mep-pop-logo { height: 38px; width: auto; }
.mep-pop-title { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.1; color: var(--foreground); }
.mep-pop-sub { margin: .2rem 0 0; color: var(--muted-foreground); font-size: .9rem; }
.mep-pop-sub .mep-pop-name { font-weight: 700; color: var(--foreground); }
.mep-pop-tools { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.mep-pop-tools .mep-btn { text-decoration: none; }

@media (max-width: 600px) {
  body.mep-pop { padding: .8rem; }
  .mep-pop-head { gap: .7rem; }
  .mep-pop-title { font-size: 1.15rem; }
  .mep-pop-tools .mep-btn { flex: 1 1 auto; text-align: center; }
  /* stacked "card" rows: each cell becomes a label/value line */
  .mep-pop .mep-mc-tablewrap { overflow-x: visible; }
  .mep-pop .mep-rpt-table, .mep-pop .mep-rpt-table tbody { display: block; width: 100%; }
  .mep-pop .mep-rpt-head { display: none; }
  .mep-pop .mep-rpt-row { display: block; border: 1px solid var(--border); border-radius: .6rem; margin-bottom: .6rem; overflow: hidden; }
  .mep-pop .mep-rpt-row td { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border: none; border-bottom: 1px solid var(--border); padding: .5rem .8rem; white-space: normal; text-align: right; }
  .mep-pop .mep-rpt-row td:last-child { border-bottom: none; }
  .mep-pop .mep-rpt-row td::before { content: attr(data-label); font-weight: 700; color: var(--muted-foreground); text-transform: uppercase; font-size: .66rem; letter-spacing: .03em; text-align: left; white-space: nowrap; }
  .mep-pop .mep-rpt-row:hover td { background: transparent; }
  .mep-pop .mep-rpt-foot { display: flex; justify-content: space-between; gap: 1rem; border-top: 2px solid var(--primary); background: var(--accent); padding: .6rem .8rem; border-radius: .6rem; }
  .mep-pop .mep-rpt-foot td { display: inline; border: none; padding: 0; background: none; }
  .mep-pop .mep-rpt-foot td:empty { display: none; }
}

/* themed DataList report (Order Details) */
.mep-rpt { display: block; width: 100%; }
.mep-rpt-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.mep-rpt-head th { background: var(--accent); color: var(--muted-foreground); font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .03em; padding: .6rem .85rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.mep-rpt-row td { padding: .6rem .85rem; border-bottom: 1px solid var(--border); color: var(--foreground); }
.mep-rpt-row:hover td { background: var(--accent); }
.mep-rpt-foot td { padding: .7rem .85rem; font-weight: 700; border-top: 2px solid var(--primary); background: var(--accent); color: var(--foreground); }
.mep-rpt-link { color: var(--primary); font-weight: 600; text-decoration: none; }
.mep-rpt-link:hover { text-decoration: underline; }
.mep-oo-restaurant select { min-width: 260px; }

/* hover tooltip for order rows */
.mep-rpt-tip { display: none; position: absolute; z-index: 50; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0,0,0,.14); padding: .75rem .95rem; font-size: .82rem; line-height: 1.5; color: var(--foreground); max-width: 340px; }

/* success / confirmation card */
.mep-mc-success { text-align: center; max-width: 520px; margin: 1rem auto 0; padding: 2.5rem 2rem; }
.mep-mc-success-badge { display: inline-flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; border-radius: 50%; background: #eafaef; color: #1e7d34; margin-bottom: 1.1rem; }
.mep-mc-success-badge svg { width: 2rem; height: 2rem; }
.mep-mc-success-title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--foreground); margin: 0 0 .4rem; }
.mep-mc-success-text { color: var(--muted-foreground); font-size: .95rem; margin: 0 0 1.6rem; }
.mep-mc-success-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.mep-mc-tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: .15rem .55rem; border-radius: 999px; background: var(--border); color: var(--foreground); }
.mep-mc-tag-ok { background: rgba(22,163,74,.14); color: #15803d; }
.mep-mc-tag-warn { background: rgba(245,158,11,.16); color: #b45309; }
.mep-mc-tag-bad { background: rgba(220,38,38,.14); color: #b91c1c; }
.mep a.mep-mc-rcpt, .mep-mc-rcpt { color: var(--primary) !important; font-weight: 700; cursor: pointer; text-decoration: none; }
.mep a.mep-mc-rcpt:hover { text-decoration: underline; }

/* ---- Process Orders summary (POS) filter ---- */
.mep-pos-page { min-width: 0; max-width: 100%; }
.mep-pos-title { text-align: left; padding-bottom: 1.1rem; }
.mep-pos-msg { display: block; color: var(--primary); font-weight: 600; margin-bottom: .35rem; }
.mep-pos-msg:empty { display: none; }
/* inline field-level validation error (e.g. required date) */
.mep-field-err { display: block; font-size: .78rem; font-weight: 600; margin-top: .3rem; }
/* pick-card variant: sit the error on its own line above the go/save button, centered */
.mep-mc-pick-err { text-align: center; margin-top: 1.1rem; }
/* centre an inline .EMessage/.SMessage badge (inline-flex responds to parent text-align) */
.mep-mc-msg-center { text-align: center; }

/* themed success / error notifications (legacy SMessage / EMessage classes set from
   code-behind). Shared by the merchant/admin console (.mep-mc) and the business
   dashboard (.mep-dash) so error/success prompts look identical across all areas. */
.mep-mc .SMessage, .mep-mc .EMessage,
.mep-dash .SMessage, .mep-dash .EMessage {
  display: inline-flex; align-items: center; gap: .5rem; box-sizing: border-box; max-width: 100%;
  margin: .25rem 0 .9rem; padding: .6rem .9rem; text-align: left; line-height: 1.4;
  font-family: var(--font-sans) !important; font-size: .88rem; font-weight: 600; border-radius: var(--radius);
}
.mep-mc .SMessage::before, .mep-mc .EMessage::before,
.mep-dash .SMessage::before, .mep-dash .EMessage::before {
  content: ""; flex-shrink: 0; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.1rem; text-align: center;
}
.mep-mc .SMessage, .mep-dash .SMessage { color: #1e7d34 !important; background: #eafaef; border: 1px solid rgba(30,125,52,.25); border-left: 3px solid #1e7d34; }
.mep-mc .SMessage::before, .mep-dash .SMessage::before { content: "\2713"; background: #1e7d34; }
.mep-mc .EMessage, .mep-dash .EMessage { color: #b3261e !important; background: #fdecea; border: 1px solid rgba(179,38,30,.25); border-left: 3px solid #b3261e; }
.mep-mc .EMessage::before, .mep-dash .EMessage::before { content: "!"; background: #b3261e; }
.mep-mc .SMessage:empty, .mep-mc .EMessage:empty,
.mep-dash .SMessage:empty, .mep-dash .EMessage:empty { display: none; }
.mep-pos-filter { margin-bottom: 1.25rem; }
.mep-pos-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem 1.5rem; }
.mep-pos-field { display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.mep-pos-field > label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-foreground); }
.mep-pos-static { font-weight: 700; color: var(--foreground); font-size: 1.05rem; }
/* "obvious section" wrapper for a radio/toggle group — composes with .mep-pos-field */
.mep-pos-seg { border: 1px solid var(--border); border-radius: calc(var(--radius) - .3rem); background: var(--accent); padding: .6rem .85rem; }
/* inline labelled variant used in the DayLimit action bar */
.mep-dl-modeseg { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .25rem 1rem; margin-top: 0; }
.mep-dl-modeseg > label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); margin-right: .25rem; }
.mep-pos-radios { display: block; padding-top: .15rem; }
.mep-pos-radios input[type=radio] { width: 1.05rem; height: 1.05rem; accent-color: var(--primary); cursor: pointer; vertical-align: middle; margin: 0 .4rem 0 0; }
.mep-pos-radios label { font-weight: 600; color: var(--foreground); cursor: pointer; margin-right: 1.75rem; vertical-align: middle; }
.mep-pos-inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.mep-pos-date { display: inline-flex; align-items: center; gap: .4rem; }
.mep-pos-cal { width: 1.25rem; height: 1.25rem; cursor: pointer; opacity: .7; }
.mep-pos-cal:hover { opacity: 1; }
.mep-pos-radios { display: inline-flex; flex-wrap: wrap; gap: .2rem 1rem; }
.mep-pos-radios td { padding: 0; }
.mep-pos-radios label { font-weight: 600; color: var(--foreground); margin: 0 .35rem 0 .25rem; }
.mep-pos-radios input[type=radio] { accent-color: var(--primary); }
.mep-pos-actions { margin-top: 1.1rem; display: flex; gap: .5rem; flex-wrap: wrap; }

/* Auto-refresh toolbar above the results (ProcessOrderSummary.aspx). Shown only for today's
   date. Deliberately quiet — it is a status strip, not a control the vendor should look at. */
.mep-pos-autorefresh {
  display: flex; flex-direction: column; gap: .15rem;
  /* align-items MUST NOT be left to default here. In a column flex container the cross axis is
     horizontal, so the default (stretch) blows every child out to the panel width - including the
     checkbox, whose glyph then paints in the middle of a ~1000px box and reads as "dead centre". */
  align-items: flex-start;
  margin: 0 0 .75rem; padding: .55rem .8rem;
  background: var(--muted); border: 1px solid var(--border); border-radius: .6rem;
  font-size: .8rem; color: var(--muted-foreground);
}
/* keeps the asp:CheckBox's <input> and its sibling <label> on one line as normal inline flow,
   instead of becoming two separate flex items stacked vertically */
.mep-pos-autorefresh-row { display: flex; align-items: center; }
.mep-pos-autorefresh label { font-weight: 600; color: var(--foreground); cursor: pointer; }
.mep-pos-autorefresh input[type="checkbox"] {
  flex: 0 0 auto; width: auto; margin: 0 .4rem 0 0; vertical-align: middle; accent-color: var(--primary);
}
.mep-pos-autorefresh-stamp { font-variant-numeric: tabular-nums; }
/* countdown to the next refresh, on its own line under the "Updated" stamp */
.mep-pos-autorefresh-next { font-variant-numeric: tabular-nums; }
.mep-pos-autorefresh-next b { font-weight: 700; color: var(--foreground); }

/* ---- Ad Sense: Home Page Slots editor (ad/AdSenseSlots.aspx) -------------
   Each row is a miniature of the storefront card it produces: a fixed media
   column (numbered thumbnail + file picker) beside a fluid field grid. The
   previous stacked-field layout ran ~1100px per slot, so six slots were a
   7000px wall; this brings a slot to roughly 190px and the whole page to one
   or two screens. The position badge sits on the thumbnail exactly where the
   storefront card's tag chips sit, so the editor visually rhymes with the
   grid it controls — and the number is real data (storefront order), not
   decoration. */
.mep-as-slots { display: flex; flex-direction: column; gap: 1rem; }

.mep-as-slot {
  display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 1rem 1.5rem;
  align-items: start;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 1.15rem 1.25rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Highlight the slot being edited — with six near-identical rows it is easy to
   lose track of which one has focus. */
.mep-as-slot:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,64,12,.10); }

.mep-as-media { display: flex; flex-direction: column; gap: .5rem; min-width: 0; }
.mep-as-thumb-wrap { position: relative; }
.mep-as-thumb {
  display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: .5rem; border: 1px solid var(--border); background: var(--muted);
}
/* Adjacent-sibling trick: when the server renders the preview image this is
   hidden; when the slot has no image the Image control renders nothing, the
   selector stops matching, and the placeholder shows. Keeps the empty state
   entirely in CSS with no extra server control to bind. */
.mep-as-thumb-empty {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; aspect-ratio: 3 / 2; padding: .5rem; box-sizing: border-box;
  border-radius: .5rem; border: 1px dashed var(--border); background: var(--muted);
  color: var(--muted-foreground); font-size: .74rem; line-height: 1.3;
}
.mep-as-thumb + .mep-as-thumb-empty { display: none; }

/* Scoped under .mep-mc on purpose: the console sets `.mep-mc span { color:
   var(--foreground) }` at (0,1,1) specificity, which silently beat a bare
   .mep-as-pos rule and rendered the badge as dark-on-dark. */
.mep-mc .mep-as-pos {
  position: absolute; left: .5rem; bottom: .5rem; z-index: 1;
  display: inline-flex; align-items: baseline; gap: .3rem;
  padding: .2rem .6rem; border-radius: 999px;
  /* Opaque, not translucent: over a dark photo a 72%-alpha chip disappeared. The
     ring keeps it readable over a light one too. */
  background: var(--dark); color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.35), var(--shadow-sm);
}
.mep-mc .mep-as-pos-l { font-size: .58rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.8); }
.mep-mc .mep-as-pos-n { font-family: var(--font-display); font-weight: 600; font-size: .95rem; line-height: 1; color: #fff; }

.mep-as-file { font-size: .78rem; color: var(--muted-foreground); max-width: 100%; }
.mep-as-file:disabled { opacity: .55; cursor: not-allowed; }
/* The browser's default file button is the one control that always looks foreign
   in a themed form, so give it the system's own quiet-button treatment. */
.mep-as-file::file-selector-button {
  margin-right: .5rem; padding: .32rem .7rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--muted); color: var(--foreground);
  font-family: var(--font-sans); font-size: .76rem; font-weight: 600;
  transition: background .15s ease, border-color .15s ease;
}
.mep-as-file::file-selector-button:hover { background: var(--accent); border-color: var(--primary); }

/* Six columns so fields can claim honest widths: name-ish fields take half a
   row, the short ones a third. */
.mep-as-fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .8rem .9rem; min-width: 0; }
.mep-as-f-3 { grid-column: span 3; }
.mep-as-f-2 { grid-column: span 2; }
.mep-as-f-6 { grid-column: span 6; }

/* Square off the storefront's pill inputs: at eight fields per row a 999px
   radius reads as bubbly, and dense forms want a tighter target. Tokens are
   unchanged so it still belongs to the same system. */
.mep-as-slot .mep-filter-input,
.mep-as-slot .mep-filter-select {
  width: 100%; min-width: 0; box-sizing: border-box;
  border-radius: .5rem; padding: .5rem .7rem; font-size: .88rem;
}
.mep-as-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; }
.mep-as-check input { accent-color: var(--primary); width: 1rem; height: 1rem; }

/* Run-period fields sit in the same six-column grid as everything else, so they need the
   slot's squared-off treatment too -- .mep-mc-date alone leaves them at their intrinsic
   width and they stop lining up with the inputs above. */
.mep-as-slot .mep-mc-date { width: 100%; min-width: 0; border-radius: .5rem; font-size: .88rem; }
.mep-mc .mep-as-hint { margin: -.25rem 0 0; font-size: .78rem; color: var(--muted-foreground); }

/* Status chip: what this slot is doing right now. Three states, distinguished by more than
   hue -- live is filled, scheduled is outlined, ended is muted -- so the difference survives
   a greyscale screen or a colour-blind reader. */
.mep-as-status {
  display: inline-block; align-self: flex-start; max-width: 100%;
  padding: .2rem .55rem; border-radius: 999px;
  font-size: .72rem; font-weight: 600; line-height: 1.35;
  border: 1px solid transparent;
}
.mep-mc .mep-as-status-live { background: rgba(22,163,74,.12); border-color: rgba(22,163,74,.35); color: #15803d; }
.mep-mc .mep-as-status-wait { background: transparent; border-color: var(--primary); color: var(--primary); }
.mep-mc .mep-as-status-off  { background: var(--muted); border-color: var(--border); color: var(--muted-foreground); }

/* Click-Through Ads rows reuse the slot shape; these are the extras that page needs. */
.mep-as-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }
.mep-mc .mep-as-name {
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  line-height: 1.2; margin: 0; color: var(--foreground);
}
.mep-mc .mep-as-current { font-size: .78rem; color: var(--muted-foreground); }
.mep-as-row-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
/* Save is the primary action; Remove media must not compete with it. The button also
   carries .mep-btn, which opts it out of the console's blanket
   `.mep-mc input[type=submit]:not(.mep-btn)` orange treatment — that rule is (0,3,1)
   and no plain class can outrank it. */
.mep-mc .mep-as-btn-quiet {
  background: var(--muted); color: var(--foreground); border: 1px solid var(--border);
  padding: .55rem 1.4rem; font-size: .9rem;
}
.mep-mc .mep-as-btn-quiet:hover { background: var(--accent); border-color: var(--primary); transform: none; }
.mep-mc .mep-as-btn-quiet:disabled { opacity: .5; cursor: not-allowed; background: var(--muted); border-color: var(--border); }

@media (max-width: 900px) {
  /* Stack the media column above the fields, but keep the thumbnail small —
     the point of this layout is that a slot stays scannable. */
  .mep-as-slot { grid-template-columns: minmax(0, 1fr); }
  .mep-as-media { max-width: 240px; }
}
@media (max-width: 560px) {
  .mep-as-fields { grid-template-columns: minmax(0, 1fr); }
  .mep-as-f-3, .mep-as-f-2, .mep-as-f-6 { grid-column: auto; }
  .mep-as-media { max-width: none; }
  .mep-as-slot { padding: 1rem; }
}

/* dual-list transfer widget (ShippingCostNo "No Delivery Cost") */
.mep-mc-transfer { display: flex; gap: 1rem; align-items: stretch; flex-wrap: wrap; }
.mep-mc-transfer-col { display: flex; flex-direction: column; gap: .4rem; flex: 1 1 240px; min-width: 0; }
.mep-mc-transfer-col > span { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-foreground); }
.mep-mc-transfer-list { width: 100%; min-height: 17rem; border: 1px solid var(--border); border-radius: calc(var(--radius) - .3rem); background: var(--card); color: var(--foreground); padding: .3rem; }
.mep-mc-transfer-list option { padding: .3rem .45rem; border-radius: .3rem; }
.mep-mc-transfer-mid { display: flex; flex-direction: column; justify-content: center; gap: .6rem; flex: 0 0 auto; }
@media (max-width: 640px) { .mep-mc-transfer-mid { flex-direction: row; justify-content: center; } }

/* results layout */
.mep-pos-results { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1.25rem; }
.mep-pos-results-main { flex: 1 1 420px; min-width: 0; }
.mep-pos-results-side { flex: 0 0 330px; max-width: 100%; min-width: 0; }
.mep-pos-subh { font-family: var(--font-sans); font-size: .95rem; font-weight: 700; margin: 0 0 .75rem; color: var(--foreground); }

/* meta key/value blocks (individual order, summary header) */
.mep-pos-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .9rem; margin-bottom: 1rem; }
.mep-pos-meta > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.mep-pos-meta-l { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-foreground); }
.mep-pos-meta-v { font-weight: 700; color: var(--foreground); overflow-wrap: anywhere; }
.mep-pos-total { text-align: right; font-weight: 700; color: var(--foreground); margin-top: .6rem; }

/* small summary tables (DataList-rendered) */
.mep-pos-sumtable table { width: 100%; border-collapse: collapse; }

/* daily date cards — a horizontally scrollable row of fixed-width cards (legible on any screen) */
.mep-pos-dateswrap { min-width: 0; }
.mep-pos-dateswrap .mep-pos-subh { margin-bottom: 1.4rem; }
/* horizontal scroller of day cards; each card sizes to its content (item names),
   capped so one long name can't dominate — beyond the cap the names wrap. */
.mep-pos-dates { display: flex !important; flex-wrap: nowrap; align-items: flex-start; width: 100%; box-sizing: border-box; gap: .6rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: .5rem; }
.mep-pos-dates > * { flex: 0 0 auto; max-width: 420px; }
.mep-pos-day { min-width: 210px; border: 1px solid var(--border); border-radius: .55rem; padding: .55rem .65rem; box-sizing: border-box; background: var(--card); box-shadow: var(--shadow-sm); }
.mep a.mep-pos-day-date { white-space: nowrap; }
.mep-pos-day-head { display: flex; flex-direction: column; gap: .1rem; margin-bottom: .45rem; }
.mep-pos-day-dow { font-size: .68rem; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-foreground); font-weight: 700; }
.mep a.mep-pos-day-date { font-weight: 700; color: var(--primary) !important; text-decoration: none; }
.mep a.mep-pos-day-date:hover { text-decoration: underline; }
.mep-pos-daytable { width: 100%; border-collapse: collapse; font-size: .8rem; }
.mep-pos-daytable td:first-child, .mep-pos-daytable th:first-child { padding-right: 1rem; }
/* let item names wrap (override .mep-mc-table td nowrap) so they never overflow the card */
.mep-pos-daytable td, .mep-pos-daytable th { white-space: normal; }
.mep-pos-daytable th { font-size: .64rem; text-transform: uppercase; color: var(--muted-foreground); text-align: left; padding: .15rem .2rem; border-bottom: 1px solid var(--border); }
.mep-pos-daytable td { padding: .2rem; border-bottom: 1px solid var(--border); }
.mep-pos-day-actions { margin-top: .5rem; display: flex; gap: .75rem; }

/* inline action links (cancel/void/process/status) */
.mep a.mep-pos-act, .mep-pos-act { color: var(--primary) !important; font-weight: 600; font-size: .82rem; text-decoration: none; cursor: pointer; }
.mep a.mep-pos-act:hover { text-decoration: underline; }
.mep a.mep-pos-act-danger, .mep-pos-act-danger { color: #dc2626 !important; font-weight: 600; font-size: .82rem; text-decoration: none; cursor: pointer; }
.mep a.mep-pos-act-danger:hover { text-decoration: underline; }

/* company select bar */
.mep-pos-companybar { display: flex; align-items: flex-end; gap: .85rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.mep-pos-companybar-btns { display: flex; gap: .5rem; flex-wrap: wrap; }

/* detailed orders grid */
.mep-pos-detail-card { margin-bottom: 1.25rem; }
.mep-pos-detail-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.mep-pos-detail-head .mep-pos-subh { margin: 0; }
.mep-pos-detail { font-size: .82rem; }
.mep-pos-detail td, .mep-pos-detail th { vertical-align: top; }
.mep-pos-detail tr.alt td { background: var(--accent); }
.mep-pos-detail td.mep-pos-addr { white-space: normal; max-width: 240px; min-width: 170px; word-break: break-word; overflow-wrap: anywhere; }
/* legacy report-class cells (ProcessOrderSummaryVP server-built table) themed in place */
.mep-pos-detail .ReportHeading { background: var(--accent); color: var(--muted-foreground); font-weight: 700; font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.mep-pos-detail .ReportItem, .mep-pos-detail .ReportAltItem { color: var(--foreground); font-size: .82rem; }
.mep-pos-detail .ReportAltItem { background: var(--accent); }
/* wrap the Ordered Items (col 5) and Address (col 8) columns across multiple lines */
.mep-pos-detail td.ReportItem:nth-child(5), .mep-pos-detail td.ReportAltItem:nth-child(5),
.mep-pos-detail td.ReportItem:nth-child(8), .mep-pos-detail td.ReportAltItem:nth-child(8) {
  white-space: normal; max-width: 220px; min-width: 150px; word-break: break-word; overflow-wrap: anywhere;
}
.mep-pos-detail .flowtext { font-weight: 700; color: var(--foreground); }
.mep-pos-detail font { color: var(--primary) !important; font-weight: 700; }
/* highlight the total / grand-total rows (right-aligned flowtext) */
.mep-pos-detail td.flowtext[align="right"] { background: var(--accent); border-top: 2px solid var(--primary); font-size: .95rem; padding: .6rem; }
.mep-pos-detail td.flowtext[align="right"] font { font-size: 1.05rem; }
.mep-pos-detail-foot td { font-weight: 700; border-top: 2px solid var(--primary); padding-top: .5rem; background: var(--accent); }
.mep-pos-foot-total { color: var(--primary); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.mep-pos-detail-actions { margin-top: 1rem; display: flex; justify-content: flex-end; gap: .5rem; flex-wrap: wrap; }

/* dead legacy tooltip (JS targets a non-existent id) */
/* order hover-card shown when a receipt # is hovered (corporateprocessorder) */
.mep-pos-help {
  display: none;
  position: absolute;
  z-index: 1000;
  min-width: 240px;
  max-width: 320px;
  background: var(--card);
  color: var(--foreground);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  padding: .7rem .85rem;
  font-size: .82rem;
  line-height: 1.5;
  pointer-events: none;
}
.mep-pos-help span { display: block; color: var(--muted-foreground); }
.mep-pos-help span:first-child { font-weight: 700; color: var(--foreground); font-size: .9rem; margin-bottom: .2rem; }

@media (max-width: 640px) {
  .mep-pos-grid { grid-template-columns: minmax(0,1fr); }
  .mep-pos-results-side { flex-basis: 100%; }
}

/* ---- order-details popup (PersonalOrder.aspx) ---- */
body.mep-ord-pop { margin: 0; background: var(--background); color: var(--foreground); font-family: var(--font-sans); padding: 14px; }
.mep-ord-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.1rem 1.2rem 1.25rem; max-width: 460px; margin: 0 auto; }
.mep-ord-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .85rem; margin-bottom: .85rem; border-bottom: 1px solid var(--border); }
.mep-ord-logo { height: 30px; width: auto; }
.mep-ord-kicker { margin-left: auto; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--primary); }
.mep-ord-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .9rem; margin: 0 0 1rem; }
.mep-ord-meta > div { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.mep-ord-meta-wide { grid-column: 1 / -1; }
.mep-ord-meta dt { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); }
.mep-ord-meta dd { margin: 0; font-size: .9rem; font-weight: 600; color: var(--foreground); overflow-wrap: anywhere; }
.mep-ord-rcpt { color: var(--primary) !important; }
.mep-ord-items { width: 100%; margin-bottom: .25rem; }
.mep-ord-total { text-align: right; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; color: var(--foreground); padding: .6rem 0 0; }
.mep-ord-totals { margin-top: .6rem; border-top: 1px solid var(--border); padding-top: .55rem; }
.mep-ord-trow { display: flex; justify-content: space-between; gap: 1rem; font-size: .9rem; color: var(--foreground); padding: .15rem 0; }
.mep-ord-trow.mep-ord-grand { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin-top: .25rem; }
.mep-ord-memo { display: block; margin-top: .6rem; font-size: .8rem; color: var(--muted-foreground); }
.mep-ord-memo:empty { display: none; }
.mep-ord-comment { margin-top: .9rem; }
.mep-ord-comment-l { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted-foreground); margin-bottom: .25rem; }
.mep-ord-comment-box { width: 100%; box-sizing: border-box; min-height: 52px; resize: vertical; font-family: var(--font-sans); font-size: .86rem; color: var(--foreground); background: var(--accent); border: 1px solid var(--border); border-radius: .5rem; padding: .45rem .55rem; }
.mep-ord-comment-box:empty { display: none; }
.mep-ord-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.1rem; }
@media print {
  body.mep-ord-pop { padding: 0; }
  .mep-ord-card { border: 0; box-shadow: none; max-width: none; }
  .mep-ord-actions { display: none !important; }
}
.mep-mc-empty, .mep-mc-nodata { color: var(--muted-foreground); font-size: .92rem; }
.mep-mc-nodata { padding: 1.5rem 0; text-align: center; }

/* KPI tiles */
.mep-mc-kpis { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: .9rem; margin-bottom: 1.1rem; }
/* even-fit variant (admin dashboard): stretch cards to fill the row regardless of count */
.mep-mc-kpis-fit { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.mep-mc-kpi { background: var(--card); border: 1px solid var(--border); border-left: 3px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: .85rem 1rem; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }
.mep-mc-kpi-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-foreground); }
.mep-mc-kpi-val { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.1; color: var(--foreground); overflow-wrap: anywhere; }
/* dashboard KPI tiles (admin + merchant): values are abbreviated (M/B) server-side, so keep them on one line and let the font ease down on narrow tiles */
.mep-mc-kpis .mep-mc-kpi-val,
.mep-mc-kpis-fit .mep-mc-kpi-val { white-space: nowrap; overflow-wrap: normal; font-size: clamp(1.05rem, 0.9rem + 0.7vw, 1.4rem); }
.mep-mc-kpi-today { border-left-color: var(--primary); }
.mep-mc-kpi-month { border-left-color: #2563eb; }
.mep-mc-kpi-warn  { border-left-color: #f59e0b; }
.mep-mc-kpi-bad   { border-left-color: #dc2626; }

/* chart grid + cards */
.mep-mc-dash-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.1rem; }
/* admin dashboard uses a finer 12-col grid so cards can take custom widths */
.mep-mc-dash-grid.mep-mc-dash-admin { grid-template-columns: repeat(12, minmax(0,1fr)); }
.mep-mc-dash-admin > .mep-ad-span4 { grid-column: span 4; }
.mep-mc-dash-admin > .mep-ad-span6 { grid-column: span 6; }
.mep-mc-dash-admin > .mep-ad-span8 { grid-column: span 8; }
.mep-mc-dash-admin > .mep-ad-span12 { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .mep-mc-dash-grid.mep-mc-dash-admin { grid-template-columns: minmax(0,1fr); }
  .mep-mc-dash-admin > [class*="mep-ad-span"] { grid-column: 1 / -1; }
}
.mep-mc-chartcard { padding: 1.2rem 1.35rem 1.35rem; min-width: 0; overflow: visible; }
.mep-mc-col-2 { grid-column: 1 / -1; }
.mep-mc-chart-h { font-family: var(--font-sans); font-size: .95rem; font-weight: 700; color: var(--foreground); margin: 0 0 1rem; }

/* trend (svg) */
.mep-mc-svg { display: block; width: 100%; height: 170px; }
.mep-mc-trend-plot { position: relative; }
.mep-mc-col { position: absolute; top: 0; height: 100%; transform: translateX(-50%); cursor: pointer; }
.mep-mc-marker { position: absolute; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-shadow: 0 0 0 1.5px var(--primary); transform: translate(-50%, -50%); display: none; pointer-events: none; z-index: 4; }
.mep-mc-tip { position: absolute; transform: translate(-50%, calc(-100% - 14px)); background: var(--foreground); color: #fff; padding: .45rem .7rem; border-radius: .45rem; line-height: 1.25; white-space: nowrap; text-align: center; pointer-events: none; opacity: 0; transition: opacity .12s ease; box-shadow: var(--shadow-lg); z-index: 5; }
.mep-mc-tip.show { opacity: 1; }
.mep-mc-tip.below { transform: translate(-50%, 16px); }
.mep-mc-tip .mep-mc-tip-amt, .mep-mc-tip strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: .95rem; color: #fff !important; }
.mep-mc-tip .mep-mc-tip-date, .mep-mc-tip span { display: block; margin-top: 3px; font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.85) !important; }
.mep-mc-trend-top { display: flex; gap: 1.5rem; font-size: .82rem; color: var(--muted-foreground); margin: -.35rem 0 .6rem; }
.mep-mc-trend-top strong { color: var(--foreground); font-weight: 700; }
.mep-mc-trend-axis { display: flex; justify-content: space-between; font-size: .75rem; color: var(--muted-foreground); margin-top: .25rem; }

/* donut + legend */
.mep-mc-donut-wrap { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }
.mep-mc-donut { width: 150px; height: 150px; flex-shrink: 0; }
.mep-mc-donut-num { font-family: var(--font-display); font-weight: 700; font-size: 26px; fill: var(--foreground); }
.mep-mc-donut-cap { font-size: 11px; fill: var(--muted-foreground); text-transform: uppercase; letter-spacing: .05em; }
.mep-mc-legend { list-style: none; margin: 0; padding: 0; flex: 1 1 160px; min-width: 150px; }
.mep-mc-legend li { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; font-size: .88rem; }
.mep-mc-dot { width: .7rem; height: .7rem; border-radius: 50%; flex-shrink: 0; }
.mep-mc-leg-name { color: var(--foreground); font-weight: 600; }
.mep-mc-leg-val { margin-left: auto; color: var(--foreground); font-weight: 700; }
.mep-mc-leg-val em { color: var(--muted-foreground); font-weight: 500; font-style: normal; font-size: .82rem; }

/* horizontal bars */
.mep-mc-bars { display: flex; flex-direction: column; gap: .7rem; }
.mep-mc-bar-row { display: flex; flex-direction: column; gap: .3rem; }
.mep-mc-bar-top { display: flex; justify-content: space-between; gap: .75rem; font-size: .85rem; }
.mep-mc-bar-label { color: var(--foreground); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mep-mc-bar-val { color: var(--foreground); font-weight: 700; white-space: nowrap; flex-shrink: 0; }
.mep-mc-bar-track { height: .55rem; background: var(--accent); border-radius: 999px; overflow: hidden; }
.mep-mc-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary), #ff7a45); border-radius: 999px; }

@media (max-width: 1080px) {
  .mep-mc-kpis { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .mep-mc-kpis { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .mep-mc-dash-grid { grid-template-columns: minmax(0,1fr); }
}
@media (max-width: 640px) {
  /* stack the toolbar under the title; keep From/To on one row and Apply + Export together on the next */
  .mep-mc-dash-head { flex-direction: column; align-items: stretch; }
  .mep-mc-toolbar { width: 100%; }
  .mep-mc-tool-field { flex: 1 1 calc(50% - .3rem); min-width: 0; }
  /* override the desktop min-width so date/time fields shrink to their slot */
  .mep-mc .mep-mc-tool-field input[type=date].mep-mc-date, .mep-mc .mep-mc-tool-field input[type=time].mep-mc-date, .mep-mc .mep-mc-tool-field input[type=datetime-local].mep-mc-date { min-width: 0; width: 100%; box-sizing: border-box; }
  .mep-mc-tool-btn { flex: 1 1 calc(50% - .3rem); }
  /* Order Details: restaurant select spans full width; nothing overflows the card */
  .mep-mc-toolbar select { width: 100%; box-sizing: border-box; }
  .mep-oo-restaurant { flex: 1 1 100%; }
  .mep-oo-restaurant select { min-width: 0; }
}

@media (max-width: 460px) {
  /* very narrow: give each toolbar field its own row so date pickers never overlap */
  .mep-mc-tool-field, .mep-mc-tool-btn { flex: 1 1 100%; }
}

/* generic theming so the still-legacy table-based merchant pages look acceptable */
.mep-mc, .mep-mc td, .mep-mc th, .mep-mc label, .mep-mc span { font-family: var(--font-sans); color: var(--foreground); }
.mep-mc input[type=text], .mep-mc input[type=password], .mep-mc input[type=date], .mep-mc input[type=time], .mep-mc input[type=datetime-local], .mep-mc input[type=number], .mep-mc select, .mep-mc textarea {
  font-family: var(--font-sans); font-size: .9rem; color: var(--foreground); background: var(--card);
  border: 1px solid var(--border); border-radius: .5rem; padding: .5rem .6rem; box-sizing: border-box;
}
.mep-mc input[type=text]:focus, .mep-mc input[type=password]:focus, .mep-mc input[type=date]:focus, .mep-mc input[type=time]:focus, .mep-mc input[type=datetime-local]:focus, .mep-mc input[type=number]:focus, .mep-mc select:focus, .mep-mc textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,64,12,.15); }
/* themed native date + time fields. datetime-local is listed everywhere date and time are:
   these selectors match on the input TYPE, so a datetime-local field carrying .mep-mc-date
   inherits none of this unless it is named -- it would render as a raw browser control beside
   themed neighbours. It is the widest of the three, hence its own min-width. */
.mep-mc input[type=date].mep-mc-date, .mep-mc input[type=time].mep-mc-date, .mep-mc input[type=datetime-local].mep-mc-date { min-width: 170px; cursor: pointer; accent-color: var(--primary); }
.mep-mc input[type=time].mep-mc-date { min-width: 150px; }
.mep-mc input[type=datetime-local].mep-mc-date { min-width: 210px; }
.mep-mc input[type=date]::-webkit-calendar-picker-indicator, .mep-mc input[type=time]::-webkit-calendar-picker-indicator, .mep-mc input[type=datetime-local]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; filter: invert(38%) sepia(96%) saturate(1640%) hue-rotate(353deg) brightness(96%) contrast(92%); }
.mep-mc input[type=date]::-webkit-calendar-picker-indicator:hover, .mep-mc input[type=time]::-webkit-calendar-picker-indicator:hover, .mep-mc input[type=datetime-local]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.mep-mc input[type=submit]:not(.mep-btn), .mep-mc input[type=button]:not(.mep-btn), .mep-mc .button:not(.mep-btn) {
  font-family: var(--font-sans); font-weight: 600; font-size: .9rem; cursor: pointer; color: #fff;
  background: var(--primary); border: 1px solid var(--primary); border-radius: 999px; padding: .55rem 1.4rem;
}
.mep-mc input[type=submit]:not(.mep-btn):hover, .mep-mc input[type=button]:not(.mep-btn):hover, .mep-mc .button:not(.mep-btn):hover { background: #c9360a; border-color: #c9360a; }

/* ---- Merchant Profile page ---- */
.mep-mp-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 1.2rem; margin-bottom: 1.2rem; align-items: start; }
.mep-mp-cardtitle { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--foreground); margin: 0 0 1rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); }
.mep-mp-sub { color: var(--muted-foreground); font-size: .82rem; margin: .5rem 0 1.9rem; }
/* read-only business details as a label/value list */
.mep-mp-details { margin: 0; }
.mep-mp-details > div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: .3rem 1rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.mep-mp-details > div:last-child { border-bottom: 0; padding-bottom: 0; }
.mep-mp-details dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--muted-foreground); align-self: center; }
.mep-mp-details dd { margin: 0; font-weight: 500; color: var(--foreground); word-break: break-word; }
.mep-mp-loc { margin-top: 1rem; }
.mep-mp-loc a { color: var(--primary); font-weight: 600; text-decoration: none; font-size: .88rem; }
.mep-mp-loc a:hover { text-decoration: underline; }
/* the cut-off editor toolbar: company + two time fields + button */
.mep-mp-tools { margin-bottom: 1.75rem; }
.mep-mp-tools .mep-mc-tool-field.mep-mp-cmp { min-width: 220px; }
.mep-mp-tools .mep-mc-tool-field.mep-mp-cmp select { width: 100%; }
/* grouped hour/minute/AM-PM selects for a cut-off time field */
.mep-mp-timeparts { display: flex; gap: .4rem; flex-wrap: wrap; }
/* left column: Business Details + Header Image card stacked (same width), gap between them */
.mep-mp-colmain { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
/* restaurant header-image card: picker + file field + live preview */
.mep-mp-header-file { min-width: 260px; }
.mep-mp-header-preview { margin-top: .35rem; }
.mep-mp-header-img { display: block; width: 100%; max-width: 480px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); box-shadow: var(--shadow); }
.mep-mp-header-note { display: block; margin-top: .6rem; color: var(--muted-foreground); font-size: .82rem; }
.mep-mp-header-remove { margin-top: .85rem; }
.mep-mp-header-file input.mep-dl-file { font-size: .82rem; color: var(--muted-foreground); }
.mep-mp-header-file input.mep-dl-file:disabled { opacity: .55; cursor: not-allowed; }
.mep-mp-header-file input.mep-dl-file::file-selector-button {
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--primary);
  background: var(--card); border: 1px solid var(--border); border-radius: .45rem;
  padding: .35rem .8rem; margin-right: .6rem; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mep-mp-header-file input.mep-dl-file::-webkit-file-upload-button {
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--primary);
  background: var(--card); border: 1px solid var(--border); border-radius: .45rem;
  padding: .35rem .8rem; margin-right: .6rem; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.mep-mp-header-file input.mep-dl-file:hover:not(:disabled)::file-selector-button { background: var(--primary); color: #fff; border-color: var(--primary); }
.mep-mp-header-file input.mep-dl-file:hover:not(:disabled)::-webkit-file-upload-button { background: var(--primary); color: #fff; border-color: var(--primary); }
@media (max-width: 900px) { .mep-mp-cols { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .mep-mp-details > div { grid-template-columns: 1fr; gap: .1rem; } }

/* processing overlay */
.mep-mc-loader { position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; background: rgba(26,21,18,.45); }
.mep-mc-loader-card { background: var(--card); border-radius: var(--radius); padding: 1.75rem 2.25rem; text-align: center; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; align-items: center; gap: .55rem; }
.mep-mc-loader-title { font-weight: 700; color: var(--foreground); margin: 0; }
.mep-mc-loader-sub { color: var(--muted-foreground); font-size: .85rem; margin: 0; }

/* mobile scrim (hidden on desktop) */
.mep-mc-scrim { display: none; position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.4); }

@media (max-width: 900px) {
  body.mep-mc > form { grid-template-columns: minmax(0, 1fr); }
  .mep-mc-shell { grid-column: 1 / -1; grid-row: auto; }
  /* Drawer height tracks the *visible* viewport (dvh), so the pinned Log out footer
     stays on-screen whether or not the mobile browser's bottom toolbar is showing.
     Plain 100vh = large viewport, which hides the footer behind the browser chrome. */
  .mep-mc-side { position: fixed; top: 0; left: 0; width: 256px; height: 100vh; height: 100dvh; transform: translateX(-100%); transition: transform .25s ease; z-index: 40; box-shadow: var(--shadow-lg); }
  body.mep-mc-nav-open .mep-mc-side { transform: none; }
  /* keep Log out clear of the home indicator / gesture bar on notched phones.
     Admin pins it in .mep-mc-side-foot; restaurant lets it scroll at the end of .mep-mc-nav. */
  .mep-mc-side-foot { padding-bottom: calc(.7rem + env(safe-area-inset-bottom)); }
  .mep-mc-side:not(.mep-mc-side-scroll) .mep-mc-nav { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
  body.mep-mc-nav-open .mep-mc-scrim { display: block; }
}

/* desktop: collapsed icon rail (toggled by the topbar burger, remembered in localStorage) */
@media (min-width: 901px) {
  body.mep-mc-collapsed > form { grid-template-columns: 66px minmax(0, 1fr); }
  body.mep-mc-collapsed .mep-mc-nav-link span,
  body.mep-mc-collapsed .mep-mc-nav-label { display: none; }
  body.mep-mc-collapsed .mep-mc-nav { padding-left: .45rem; padding-right: .45rem; }
  body.mep-mc-collapsed .mep-mc-nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
  body.mep-mc-collapsed .mep-mc-nav-group { gap: .2rem; }
  body.mep-mc-collapsed .mep-mc-nav-group + .mep-mc-nav-group { border-top: 1px solid var(--border); padding-top: .4rem; margin-top: .2rem; }
  body.mep-mc-collapsed .mep-mc-brand { padding-left: 0; padding-right: 0; text-align: center; }
  body.mep-mc-collapsed .mep-mc-brand img { height: 28px; margin: 0 auto; }
  body.mep-mc-collapsed .mep-mc-brand .mep-mc-logo-full { display: none; }
  body.mep-mc-collapsed .mep-mc-brand .mep-mc-logo-mini { display: block; }
}

@media print {
  .mep-mc-side, .mep-mc-topbar, .mep-mc-foot, .mep-mc-scrim { display: none !important; }
  body.mep-mc > form { grid-template-columns: 1fr; }
  .mep-mc-content { padding: 0; max-width: none; }
  .mep-mc-card { border: 0; box-shadow: none; padding: 0; }
}

/* ===================================================================
   Checkout redesign (Delivery Address & Payment Method mockup)
   Card-based layout with icon section headers, selectable tabs,
   labelled fields, payment badges, and a sectioned order summary.
   =================================================================== */
.mep-checkout .mep-co-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1.25;
  text-align: left; color: var(--foreground); margin: 1.25rem 0 1.5rem; padding: 0;
}
.mep-checkout .mep-co-title span { color: var(--primary); }
.mep-checkout .mep-co-title br { display: none; }

/* "Ordering from <restaurant>" line beneath the checkout title, so the customer can see which
   restaurant the order belongs to before choosing delivery/payment. The title carries a 1.5rem
   bottom margin; the negative top margin pulls this up so the two read as a single heading
   block (adjacent sibling margins collapse to 1.5rem + -1rem = .5rem of separation). */
.mep-checkout .mep-co-from {
  display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap;
  margin: -1rem 0 1.5rem;
}
.mep-checkout .mep-co-from-label {
  font-size: .72rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted-foreground);
}
.mep-checkout .mep-co-from-name {
  font-size: 1rem; font-weight: 700; color: var(--primary);
}
/* same name appended to the Order Confirmation card title, kept lighter than the title itself
   so it reads as a qualifier rather than competing with it.

   In the checkout's two-column layout the order-summary card is a ~300px sidebar, where
   "Order Confirmation <restaurant>" cannot fit on one line: the title wrapped mid-phrase and the
   name formed a ragged second column. Give the name its own full-width line instead, indented
   past the cart icon (1.1rem icon + .45rem gap) so it aligns under the title text. row-gap is
   zeroed because .mep-cart-title's .45rem gap applies between wrapped rows too. */
.mep-cart-title-sub { font-weight: 600; color: var(--muted-foreground); }
.mep-checkout .mep-cart-head .mep-cart-title { flex-wrap: wrap; row-gap: 0; }
.mep-checkout .mep-cart-title-sub {
  flex: 0 0 100%; margin-left: 1.55rem; margin-top: .1rem; font-size: .82rem;
}
/* top error message: horizontally centred, equal vertical spacing between title and the
   delivery card (collapses when empty so it adds no gap in the normal case) */
.mep-checkout .mep-co-alert-row { text-align: center; margin: 0; }
.mep-checkout .mep-co-alert-row .EMessage { margin: 0 0 1.5rem; }

.mep-checkout .mep-co-cardbox {
  background: var(--card); border: 1px solid var(--border); border-radius: 1rem;
  padding: 1.5rem; margin-bottom: 1.25rem;
}
.mep-checkout .mep-co-sec {
  display: flex; align-items: center; gap: .6rem;
  font-size: .95rem; font-weight: 700; color: var(--foreground); margin: 0 0 1.25rem;
}
.mep-checkout .mep-co-sec-ico {
  width: 1.6rem; height: 1.6rem; border-radius: .5rem; background: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.mep-checkout .mep-co-sec-ico svg { width: .95rem; height: .95rem; color: var(--primary); }

/* selectable delivery + payment cards */
.mep-checkout .mep-deliv-grid, .mep-checkout .mep-pay-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 0 0 1.25rem;
}
.mep-checkout .mep-deliv-card, .mep-checkout .mep-pay-card {
  position: relative; display: block; box-sizing: border-box; cursor: pointer;
  border: 2px solid var(--border); border-radius: .75rem; background: var(--card);
  padding: 1rem; transition: border-color .15s ease, background .15s ease;
}
.mep-checkout .mep-pay-card { display: flex; flex-direction: column; align-items: center; gap: .8rem; padding: 1.25rem; text-align: center; }
.mep-checkout .mep-deliv-card:hover, .mep-checkout .mep-pay-card:hover { border-color: rgba(232,64,12,.32); background: rgba(244,241,238,.45); }
.mep-checkout .mep-deliv-card:has(input:checked), .mep-checkout .mep-pay-card:has(input:checked) { border-color: var(--primary); background: var(--accent); }
.mep-checkout .mep-deliv-card input[type=radio], .mep-checkout .mep-pay-card input[type=radio] { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }

.mep-checkout .mep-deliv-head { display: flex; align-items: center; gap: .65rem; }
.mep-checkout .mep-deliv-dot { width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; position: relative; }
.mep-checkout .mep-deliv-card:has(input:checked) .mep-deliv-dot { border-color: var(--primary); }
.mep-checkout .mep-deliv-card:has(input:checked) .mep-deliv-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--primary); }
.mep-checkout .mep-deliv-title { font-weight: 600; font-size: .9rem; color: var(--foreground); }
.mep-checkout .mep-deliv-card:has(input:checked) .mep-deliv-title { color: var(--primary); }

/* only the selected delivery card reveals its detail (Location / Address) */
.mep-checkout .mep-deliv-detail { display: none; margin-top: 1.1rem; }
.mep-checkout .mep-deliv-card:has(input:checked) .mep-deliv-detail { display: block; }
.mep-checkout .mep-deliv-card:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.mep-checkout .mep-deliv-na { display: none; font-size: .72rem; color: var(--muted-foreground); margin-bottom: .45rem; }
.mep-checkout .mep-deliv-card:has(input:disabled) .mep-deliv-na { display: block; }

/* labelled fields */
.mep-checkout .mep-field { margin-bottom: .9rem; }
.mep-checkout .mep-field:last-child { margin-bottom: 0; }
.mep-checkout .mep-field-label { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted-foreground); margin-bottom: .45rem; }
.mep-checkout .mep-select {
  width: 100%; box-sizing: border-box; appearance: none; -webkit-appearance: none;
  padding: .7rem 2rem .7rem .9rem; border: 1px solid var(--border); border-radius: .7rem;
  background-color: rgba(244,241,238,.5); font-family: var(--font-sans); font-size: .9rem; color: var(--foreground); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237A7269' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center;
}
.mep-checkout .mep-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,64,12,.12); }
.mep-checkout .mep-addr-box {
  border: 1px solid var(--border); border-radius: .7rem; background: rgba(244,241,238,.5);
  padding: .85rem .95rem; font-size: .88rem; line-height: 1.5; color: var(--foreground);
}
.mep-checkout .mep-addr-box b, .mep-checkout .mep-addr-box u { font-weight: 700; }

/* payment badges */
.mep-checkout .mep-pay-badge {
  width: 4rem; height: 2.5rem; border-radius: .55rem; display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,.18); flex-shrink: 0;
}
/* ePAY card shows the real logo (its own gold background), so no gradient/shadow frame */
.mep-checkout .mep-pay-badge-epay { background: none; box-shadow: none; width: auto; height: auto; }
.mep-checkout .mep-pay-badge-epay img { height: 2.6rem; width: auto; max-width: 100%; display: block; border-radius: .3rem; }
.mep-checkout .mep-pay-badge-bank { background: linear-gradient(135deg, #475569, #1e293b); }
.mep-checkout .mep-pay-badge-bank .mep-mc-a, .mep-checkout .mep-pay-badge-bank .mep-mc-b { width: 1.05rem; height: 1.05rem; border-radius: 50%; display: inline-block; }
.mep-checkout .mep-pay-badge-bank .mep-mc-a { background: #f87171; }
.mep-checkout .mep-pay-badge-bank .mep-mc-b { background: #fbbf24; margin-left: -.4rem; }
.mep-checkout .mep-pay-name { font-size: .9rem; font-weight: 600; color: var(--foreground); }
.mep-checkout .mep-pay-card:has(input:checked) .mep-pay-name { color: var(--primary); }

/* split payment */
.mep-checkout .mep-split-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .6rem; }
.mep-checkout .mep-split-label { font-size: .9rem; font-weight: 600; color: var(--foreground); }
.mep-checkout .mep-split-bal { font-size: .78rem; color: var(--muted-foreground); }
.mep-checkout .mep-split-bal span { font-weight: 700; color: var(--foreground); }
.mep-checkout .mep-split-detail { margin-top: 1rem; text-align: center; }
.mep-checkout .mep-input {
  display: block; width: 100%; max-width: 320px; margin: 0 auto 1rem; box-sizing: border-box; text-align: center;
  padding: .7rem .9rem; border: 1px solid var(--border); border-radius: .7rem; font-family: var(--font-sans); font-size: .9rem; color: var(--foreground);
}
.mep-checkout .mep-input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(232,64,12,.12); }

/* order-summary card: sectioned with a header bar, item monograms and a bold total.
   Scoped to .mep-co-sectioned (only Checkout.aspx's Order Confirmation card) so other
   .mep-co-card summaries (e.g. Checkout_cc1's Your Order / trust cards) keep normal padding. */
.mep-co-card.mep-co-sectioned { padding: 0; overflow: hidden; }
.mep-co-sectioned .mep-cart-head { margin: 0; padding: .95rem 1.25rem; background: rgba(244,241,238,.55); border-bottom: 1px solid var(--border); }
.mep-co-sectioned .mep-co-items { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); }
.mep-co-sectioned .mep-co-totals { padding: 1rem 1.25rem; margin: 0; border-bottom: 1px solid var(--border); }
.mep-co-sectioned .mep-co-note { padding: .6rem 1.25rem 0; }
.mep-co-sectioned .mep-co-actions { padding: 1.1rem 1.25rem 1.25rem; margin: 0; }
/* summary error/message: shrink to its text and centre it, rather than a full-width block */
.mep-co-summary .mep-co-msg { display: flex; width: fit-content; max-width: calc(100% - 2.5rem); margin: .65rem auto 0; }
.mep-co-item-mono {
  flex-shrink: 0; width: 2rem; height: 2rem; border-radius: .5rem; background: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .8rem; color: var(--muted-foreground);
}
/* actual item photo (when available) in the order-summary list, same footprint as the monogram */
.mep-co-item-photo { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: .5rem; object-fit: cover; display: block; }
/* +/- quantity stepper in the order-summary list (auto-saves; replaces the qty box + Update Cart) */
.mep-co-stepper { display: inline-flex; align-items: center; gap: .3rem; flex-shrink: 0; }
.mep .mep-co-step {
  display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; box-sizing: border-box;
  border: 1px solid var(--border); border-radius: .4rem; background: #fff; color: var(--primary);
  font-size: .95rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; user-select: none;
}
.mep .mep-co-step:hover { border-color: var(--primary); background: var(--accent); text-decoration: none; }
.mep-co-qty-val { min-width: 1.2rem; text-align: center; font-size: .85rem; font-weight: 700; color: var(--foreground); }
.mep-co-summary .mep-co-total .mep-co-tval { font-size: 1.5rem; }

@media (max-width: 480px) {
  .mep-checkout .mep-deliv-grid, .mep-checkout .mep-pay-grid { grid-template-columns: 1fr; }
}