/*
 * fixes.css — targeted overrides layered on top of the compiled site.css.
 * Loaded on every page after site.css and page stylesheets (views/partials/head.php).
 * Each section below is owned by one change set; keep edits inside your section.
 */

/* ==== section: chrome ==== */
/* Global chrome: header, footer, nav, cookie bar, sticky mobile CTA, contrast overrides. */

/* -- Contrast: small coral text (WCAG AA needs 4.5:1) ------------------------
   Brand coral #f15a4a is 3.11:1 on cream #faf7f0, so small coral text uses #a8322a:
   6.22:1 on cream, 5.69:1 on paper #f0ede4, 6.54:1 on white/70 cards, 5.50:1 on
   coral-soft/60 and 5.32:1 on coral-soft/75 panels, about 4.5:1 or better on the
   hero's coral tint. Icons (svg) and large display sizes keep the brand coral; on
   the dark teal panels the brand coral is the more readable one, so it stays there. */
:root {
  --mb-coral-text: #a8322a;
}
.kicker:is(.text-mb-coral, .text-mb-coral-deep),
:not(svg).text-mb-coral:not(.font-brand, .text-lg, .text-xl, .text-2xl, .text-3xl, .text-4xl, .text-5xl, .text-6xl) {
  color: var(--mb-coral-text);
}
:is(.bg-mb-teal, .bg-mb-teal-dark, .bg-mb-teal-deep) :not(svg).text-mb-coral {
  color: var(--color-mb-coral);
}

/* -- Contrast: cream text on teal ----------------------------------------------
   On teal #1d5e63, cream at 60% is 3.62:1, 65% 3.94:1 and 70% 4.31:1. 85% gives 5.52:1
   (5.15:1 over the cards' blurred coral glow). On teal-deep #0c2a2d, cream/50 is 4.58:1
   but drops to about 4.2:1 over the CTA band's grid texture; 65% gives 6.77:1. */
.bg-mb-teal :is(.text-mb-cream\/60, .text-mb-cream\/65, .text-mb-cream\/70) {
  color: color-mix(in srgb, var(--color-mb-cream) 85%, transparent);
}
.bg-mb-teal-deep .text-mb-cream\/50 {
  color: color-mix(in srgb, var(--color-mb-cream) 65%, transparent);
}

/* -- Footer: two link columns on phones, stacked groups per column ------------ */
.footer-grid {
  column-gap: 1.5rem;
  row-gap: 2.5rem;
}
@media (min-width: 40rem) {
  .footer-grid {
    column-gap: 3rem;
    row-gap: 3rem;
  }
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  min-width: 0;
}

/* -- Cookie bar: a short purpose line + two equal buttons ------------------------ */
.cookie-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--color-mb-grey-light);
  background: var(--color-mb-cream);
  box-shadow: 0 -10px 30px rgba(12, 42, 45, 0.1);
}
.cookie-bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
  max-width: 48rem;
  margin: 0 auto;
  padding: 0.625rem 1rem;
}
.cookie-bar-text {
  flex: 1 1 100%;
  margin: 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-mb-ink);
}
.cookie-bar-text a {
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-bar-more {
  display: none;
}
.cookie-bar-actions {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.cookie-bar-btn {
  min-height: 2.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: 0.75rem;
  background: var(--color-mb-teal);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.cookie-bar-btn:hover {
  background: var(--color-mb-teal-dark);
}
.cookie-bar a:focus-visible,
.cookie-bar-btn:focus-visible {
  outline: 2px solid var(--color-mb-teal);
  outline-offset: 2px;
}
@media (min-width: 40rem) {
  .cookie-bar {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    max-width: 48rem;
    margin: 0 auto;
    padding-bottom: 0;
    border: 1px solid var(--color-mb-grey-light);
    border-radius: 1rem;
  }
  .cookie-bar-inner {
    flex-wrap: nowrap;
    padding: 0.75rem 0.75rem 0.75rem 1.25rem;
  }
  .cookie-bar-text {
    flex: 1 1 auto;
  }
  .cookie-bar-more {
    display: inline;
  }
  .cookie-bar-actions {
    flex: 0 0 auto; /* stays a two-column grid: both buttons as wide as the wider one */
  }
}

/* -- Sticky mobile CTA (<1024px): revealed by site.js after the hero ------------
   Hidden with visibility (not display) so it slides without layout shift and is out of
   the tab order and accessibility tree until shown. While shown, the body gets matching
   bottom padding and scroll padding so it never covers the end of the page or a focused link. */
.mobile-cta {
  display: none;
}
@media (max-width: 1023.98px) {
  .mobile-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    padding: 0.625rem 1rem calc(0.625rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--color-mb-grey-light);
    background: var(--color-mb-cream);
    box-shadow: 0 -10px 30px rgba(12, 42, 45, 0.1);
    transform: translateY(110%);
    visibility: hidden;
    transition: transform 0.3s var(--ease-out-expo), visibility 0s linear 0.3s;
  }
  .mobile-cta.is-visible {
    transform: none;
    visibility: visible;
    transition: transform 0.3s var(--ease-out-expo), visibility 0s;
  }
  .mobile-cta .btn {
    width: 100%;
    min-height: 2.75rem;
    padding-block: 0.625rem;
    white-space: nowrap;
  }
  /* Blog posts about countries without an edition: one "See country editions" link. */
  .mobile-cta .btn:only-child {
    grid-column: 1 / -1;
  }
  html.has-mobile-cta body {
    padding-bottom: var(--mobile-cta-height, 4.5rem);
  }
  html.has-mobile-cta {
    scroll-padding-bottom: calc(var(--mobile-cta-height, 4.5rem) + 0.75rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-cta,
  .mobile-cta.is-visible {
    transition: none;
  }
}

/* -- Pakistan suggestion bar (international home page, Asia/Karachi time zone) ---- */
.pk-hint {
  background: var(--color-mb-teal-deep);
  color: var(--color-mb-cream);
}
.pk-hint-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0.375rem 0.75rem 0.375rem 1.5rem;
}
.pk-hint-link {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
}
.pk-hint-link:hover {
  text-decoration-color: currentColor;
}
.pk-hint-close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  color: inherit;
  cursor: pointer;
}
.pk-hint-close:hover {
  background: rgba(255, 255, 255, 0.12);
}
.pk-hint-link:focus-visible,
.pk-hint-close:focus-visible {
  outline: 2px solid var(--color-mb-cream);
  outline-offset: 2px;
}

@media print {
  .cookie-bar,
  .mobile-cta,
  .pk-hint {
    display: none !important;
  }
}

/* ==== end section: chrome ==== */



/* ==== section: home-pricing ==== */
/* Home, pricing, features, Zuzu, markets, FAQ pages. */

/* Zuzu mascot art is transparent: drop the white panel site.css paints behind it and stand the
   character on a soft circular spotlight instead, so it never floats on a flat background.
   On dark teal panels the spotlight is a lighter teal, which also separates the dark apron. */
.zuzu-art { position: relative; isolation: isolate; background: transparent; }
.zuzu-art::before {
  content: ""; position: absolute; z-index: 0; left: 53%; top: 52%;
  width: min(86%, 470px); aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(29, 94, 99, .16) 0%, rgba(29, 94, 99, .08) 70%, rgba(29, 94, 99, 0) 100%);
  pointer-events: none;
}
/* The characters' feet end at ~98.5% of every image's height: paint a soft floor pool there,
   as the image's own background, so it follows the feet in any layout. */
.zuzu-art > img {
  position: relative; z-index: 1;
  background: radial-gradient(30% 1.8% at 54% 98%, rgba(29, 94, 99, .22), rgba(29, 94, 99, 0)) no-repeat;
}
.bg-mb-teal-deep .zuzu-art::before {
  background: radial-gradient(closest-side, #3d8d92 0%, #286f74 45%, rgba(29, 94, 99, .62) 75%, rgba(29, 94, 99, 0) 100%);
}
.bg-mb-teal-deep .zuzu-art > img {
  background: radial-gradient(30% 1.8% at 54% 98%, rgba(61, 141, 146, .85), rgba(40, 111, 116, .35) 60%, rgba(29, 94, 99, 0)) no-repeat;
}

/* Home: Zuzu section (views/pages/home.php). */
.zz-card { background: radial-gradient(120% 90% at 0% 100%, #14454a 0%, #0c2a2d 58%); }
.zz-grid { display: grid; align-items: center; grid-template-columns: minmax(0, 1fr); }
.zz-stage { min-height: 330px; padding: 2.5rem 1.5rem 0; align-items: flex-end; }
.zz-stage::before { top: 56%; width: min(78%, 330px); }
.zz-mascot { max-height: 320px; width: auto; }
.zz-copy { padding: 1.75rem 1.5rem 2.25rem; }
.zz-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin: 0 0 1rem; }
.zz-kicker { font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fbd9d2; }
.zz-pill { font-size: .75rem; font-weight: 700; line-height: 1; padding: .4rem .7rem; border-radius: 999px; color: #fbd9d2; background: rgba(250, 247, 240, .08); border: 1px solid rgba(251, 217, 210, .35); }
.zz-title { margin: 0 0 1rem; font-size: clamp(1.75rem, 1.6vw + 1.4rem, 3rem); line-height: 1.06; letter-spacing: -.015em; }
.zz-line { display: block; }
.zz-lede { margin: 0 0 1.75rem; max-width: 34rem; font-size: 1.0625rem; line-height: 1.6; color: rgba(250, 247, 240, .82); text-wrap: pretty; }
.zz-chat { display: grid; gap: .75rem; margin: 0 0 1.75rem; padding: 1rem; max-width: 34rem; border-radius: 22px; background: rgba(250, 247, 240, .06); border: 1px solid rgba(250, 247, 240, .12); }
.zz-chat-head { display: flex; align-items: center; gap: .6rem; padding-bottom: .75rem; border-bottom: 1px solid rgba(250, 247, 240, .1); font-size: .875rem; }
.zz-avatar { display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #f15a4a; color: #fff; }
.zz-chat-name { font-weight: 700; color: #faf7f0; }
.zz-chat-tag { margin-left: auto; padding: .25rem .6rem; border-radius: 999px; border: 1px solid rgba(250, 247, 240, .2); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; color: rgba(250, 247, 240, .78); }
.zz-msg { margin: 0; max-width: 88%; padding: .7rem .95rem; border-radius: 18px; font-size: .9375rem; line-height: 1.5; text-wrap: pretty; }
.zz-msg--you { justify-self: end; background: #faf7f0; color: #15181c; font-weight: 600; border-bottom-right-radius: 6px; }
.zz-msg--zuzu { justify-self: start; background: #1d5e63; color: #faf7f0; border-bottom-left-radius: 6px; }
.zz-suggest-label { margin: .25rem 0 0; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(250, 247, 240, .78); }
.zz-suggest { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.zz-suggest li { padding: .4rem .75rem; border-radius: 999px; border: 1px solid rgba(250, 247, 240, .16); font-size: .8125rem; color: rgba(250, 247, 240, .86); }
.zz-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.zz-cta { display: inline-flex; align-items: center; gap: .5rem; padding: .85rem 1.4rem; border-radius: 16px; background: #faf7f0; color: #15181c; font-weight: 700; transition: background-color .15s; }
.zz-cta:hover { background: #fff; }
.zz-cta:focus-visible { background: #fff; outline: 2px solid #faf7f0; outline-offset: 3px; }
.zz-note { display: flex; align-items: flex-start; gap: .5rem; max-width: 21rem; margin: 0; font-size: .8125rem; line-height: 1.45; color: rgba(250, 247, 240, .74); }
.zz-note svg { margin-top: .1rem; color: #fbd9d2; }
@media (max-width: 29.99rem) {
  .zz-chat { padding: .75rem; }
  .zz-msg { max-width: 94%; }
}
@media (min-width: 48rem) {
  .zz-stage { min-height: 380px; }
  .zz-mascot { max-height: 360px; }
  .zz-copy { padding: 2rem 3rem 3rem; }
}
@media (min-width: 64rem) {
  .zz-grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .zz-stage { min-height: 600px; padding: 3rem 0 3rem 2.5rem; align-items: center; }
  .zz-stage::before { top: 50%; left: calc(53% + 1.25rem); width: min(88%, 440px); }
  .zz-mascot { max-height: 520px; }
  .zz-copy { padding: 3.5rem 3.5rem 3.5rem 1rem; }
}
@media (prefers-reduced-motion: reduce) { .zz-cta svg { transition: none; } }

/* Example chat bubbles (home Zuzu block, /zuzu example conversation). */
.chat-ask{margin-left:2rem}
.chat-reply{margin-right:2rem}

/* Home hero mock (views/partials/hero-mockups.php): the floating "New order" card must not
   cover the restaurant name in the phone header.
   - Phones: the phone sits lower, so the card floats above its header (it overlaps only the
     bezel and the header's top padding, with room for the 4px bounce).
   - 640px up: the phone is right-aligned as on desktop, so the card sits beside it.
   - 1024-1279px: the hero column is narrower, so the card is scaled down to end before the name. */
.hero-mock { height: 600px; }
.hero-mock-phone { top: 96px; }
@media (min-width: 40rem) {
  .hero-mock { height: 620px; }
  .hero-mock-phone { top: 2.5rem; left: auto; right: 1rem; translate: none; }
}
@media (min-width: 64rem) and (max-width: 79.98rem) {
  .hero-mock-order { left: -0.25rem; scale: 0.84; }
}

/* ==== end section: home-pricing ==== */



/* ==== section: landing ==== */
/* Templated product, solution and country pages (prefer assets/css/landing-pages.css). */

/* Kitchen dashboard mock (views/partials/feature-mockups.php, also on /features):
   four status columns that fall back to 2 x 2 when the card is narrow. */
.fm-kitchen { container-type: inline-size; }
.fm-kitchen-board { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .625rem; }
@container (min-width: 19.5rem) {
  .fm-kitchen-board { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Selected tip in the guest checkout mock: deeper coral keeps white 12px text at 5.1:1. */
.fm-tip-selected { background-color: #c83a2d; border-color: #c83a2d; }


/* ==== end section: landing ==== */



/* ==== section: compare ==== */
/* Comparison pages. */



/* ==== end section: compare ==== */



/* ==== section: pakistan ==== */
/* Pakistan edition (/pk). */



/* ==== end section: pakistan ==== */



/* ==== section: blog ==== */
/* Blog index, posts, categories, authors. */



/* ==== end section: blog ==== */