/* =========================================================================
   Blend & Boost — customer ordering site
   Standalone stylesheet (the admin theme is not loaded here).
   Mobile-first: most people order standing at the counter, on a phone.
   ========================================================================= */

:root {
    --m-forest: #1B352F;
    --m-forest-600: #22423A;
    --m-forest-700: #142520;
    --m-mint: #EEFAE6;
    --m-paper: #FBFDF9;
    --m-clay: #dda18b;
    --m-clay-600: #cf8d73;

    --m-ink: #16231E;
    --m-muted: #5f6f68;
    --m-line: #dfe8dd;

    --m-radius: 16px;
    --m-radius-sm: 12px;
    --m-shadow: 0 1px 2px rgba(20, 37, 31, .04), 0 12px 32px -18px rgba(20, 37, 31, .28);

    --m-display: 'Bricolage Grotesque', system-ui, sans-serif;
    --m-body: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--m-body);
    color: var(--m-ink);
    background: var(--m-paper);
    -webkit-font-smoothing: antialiased;
    padding-bottom: 84px; /* room for the sticky order bar */
}

h1, h2, h3, .m-display { font-family: var(--m-display); letter-spacing: -.015em; margin: 0; }
a { color: var(--m-forest); }
img { max-width: 100%; display: block; }

:focus-visible { outline: 2px solid var(--m-clay); outline-offset: 2px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

html { scroll-behavior: smooth; }

.m-wrap { max-width: 960px; margin: 0 auto; padding: 0 16px; }

/* ---------------------------------------------------------------- Header -- */
.m-header {
    position: sticky; top: 0; z-index: 50;
    background: var(--m-forest);
    color: #fff;
}
.m-header__inner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; max-width: 960px; margin: 0 auto; }
.m-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: #fff; min-width: 0; }
.m-brand__mark {
    width: 36px; height: 36px; border-radius: 11px; flex-shrink: 0;
    background: var(--m-clay); color: var(--m-forest-700);
    display: grid; place-items: center;
    font-family: var(--m-display); font-weight: 700; font-size: 1rem;
    object-fit: cover;
}
.m-brand__name { font-family: var(--m-display); font-weight: 700; font-size: 1.05rem; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-brand__sub { display: block; font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: #8fb3a4; font-weight: 600; }

.m-cartpill {
    margin-left: auto; display: inline-flex; align-items: center; gap: 8px;
    background: rgba(238, 250, 230, .12); color: #fff;
    border: 1px solid rgba(238, 250, 230, .2);
    padding: 8px 14px; border-radius: 999px; text-decoration: none;
    font-weight: 600; font-size: .85rem; white-space: nowrap;
}
.m-cartpill:hover { background: rgba(238, 250, 230, .2); color: #fff; }
.m-cartpill__count {
    min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
    background: var(--m-clay); color: var(--m-forest-700);
    display: grid; place-items: center; font-size: .72rem; font-weight: 700;
}

/* ------------------------------------------------------------------ Hero -- */
.m-hero { background: var(--m-forest); color: #fff; padding: 4px 0 26px; }
.m-hero h1 { font-size: 1.55rem; margin-bottom: 6px; }
.m-hero p { color: #9dc0b1; margin: 0 0 16px; font-size: .92rem; }

.m-search { position: relative; }
.m-search input {
    width: 100%; border: 0; border-radius: 12px;
    padding: 13px 14px 13px 42px;
    font: inherit; font-size: .95rem; color: var(--m-ink);
    background: #fff;
}
.m-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--m-muted); }

/* Paused-ordering banner */
.m-notice {
    background: var(--m-clay); color: var(--m-forest-700);
    padding: 10px 16px; text-align: center; font-weight: 600; font-size: .88rem;
}

/* --------------------------------------------------------- Category rail -- */
.m-rail {
    position: sticky; top: 60px; z-index: 40;
    background: var(--m-paper);
    border-bottom: 1px solid var(--m-line);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.m-rail::-webkit-scrollbar { display: none; }
.m-rail__inner { display: flex; gap: 8px; padding: 12px 16px; max-width: 960px; margin: 0 auto; }
.m-rail a {
    white-space: nowrap; text-decoration: none;
    padding: 7px 14px; border-radius: 999px;
    border: 1px solid var(--m-line); background: #fff;
    color: var(--m-ink); font-size: .84rem; font-weight: 500;
}
.m-rail a:hover { background: var(--m-mint); border-color: var(--m-mint); }

/* -------------------------------------------------------------- Sections -- */
.m-section { padding: 26px 0 4px; scroll-margin-top: 112px; }
.m-section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.m-section h2 { font-size: 1.2rem; }
.m-section__count { color: var(--m-muted); font-size: .8rem; }

.m-eyebrow {
    font-size: .68rem; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--m-clay-600); margin: 0 0 8px;
}

/* ----------------------------------------------------------------- Cards -- */
.m-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .m-grid { grid-template-columns: 1fr 1fr; gap: 16px; } }

.m-card {
    display: flex; gap: 14px;
    background: #fff; border: 1px solid var(--m-line);
    border-radius: var(--m-radius); padding: 12px;
    box-shadow: var(--m-shadow);
    position: relative;
}
.m-card--out { opacity: .68; }

.m-card__media { position: relative; flex-shrink: 0; }
.m-card__img {
    width: 96px; height: 96px; border-radius: var(--m-radius-sm);
    object-fit: cover; background: var(--m-mint);
}
.m-card__img--empty { display: grid; place-items: center; color: var(--m-muted); }

.m-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.m-card__title {
    font-family: var(--m-display); font-weight: 600; font-size: 1rem;
    line-height: 1.25; margin: 0 0 3px;
    display: flex; align-items: center; gap: 7px;
}
.m-card__title a { color: inherit; text-decoration: none; }
.m-card__desc {
    color: var(--m-muted); font-size: .82rem; margin: 0 0 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.m-card__foot { margin-top: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Diet marker */
.m-diet {
    width: 14px; height: 14px; border: 1.6px solid currentColor; border-radius: 3px;
    display: inline-grid; place-items: center; flex-shrink: 0;
}
.m-diet::after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.m-diet--veg { color: #2e7d32; }
.m-diet--non_veg { color: #b3261e; }
.m-diet--egg { color: #b7791f; }

.m-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.m-chip {
    font-size: .66rem; font-weight: 700; padding: 3px 8px; border-radius: 999px;
    letter-spacing: .01em; white-space: nowrap;
}

.m-price { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .98rem; }
.m-price__strike { color: var(--m-muted); text-decoration: line-through; font-weight: 400; font-size: .82rem; margin-left: 6px; }
.m-price__from { color: var(--m-muted); font-weight: 500; font-size: .72rem; margin-right: 4px; }

.m-soldout {
    position: absolute; inset: auto 12px 12px auto;
    background: var(--m-ink); color: #fff;
    font-size: .66rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: 4px 9px; border-radius: 6px;
}

/* --------------------------------------------------------------- Buttons -- */
.m-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--m-forest); color: #fff; border: 0;
    border-radius: 11px; padding: 11px 18px;
    font: inherit; font-weight: 600; font-size: .9rem;
    text-decoration: none; cursor: pointer;
    transition: background .15s ease;
}
.m-btn:hover { background: var(--m-forest-700); color: #fff; }
.m-btn:disabled { background: #c9d4cf; cursor: not-allowed; }
.m-btn--block { width: 100%; }
.m-btn--ghost { background: #fff; color: var(--m-ink); border: 1px solid var(--m-line); }
.m-btn--ghost:hover { background: var(--m-mint); color: var(--m-ink); }
.m-btn--sm { padding: 8px 14px; font-size: .82rem; border-radius: 9px; }

.m-addbtn {
    margin-left: auto;
    background: var(--m-mint); color: var(--m-forest);
    border: 1px solid #cfe9c4; border-radius: 10px;
    padding: 8px 16px; font: inherit; font-weight: 700; font-size: .84rem;
    text-decoration: none; cursor: pointer;
}
.m-addbtn:hover { background: var(--m-forest); color: #fff; border-color: var(--m-forest); }

/* -------------------------------------------------------------- Item page -- */
.m-item__hero { background: var(--m-mint); }
.m-item__img { width: 100%; max-height: 380px; object-fit: cover; }
.m-item__img--empty { height: 200px; display: grid; place-items: center; color: var(--m-muted); }

.m-panel {
    background: #fff; border: 1px solid var(--m-line);
    border-radius: var(--m-radius); padding: 18px;
    box-shadow: var(--m-shadow); margin-bottom: 16px;
}
.m-panel h3 { font-size: 1rem; margin-bottom: 4px; }
.m-panel__hint { color: var(--m-muted); font-size: .82rem; margin: 0 0 14px; }

.m-facts { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.m-fact {
    background: var(--m-mint); color: var(--m-forest);
    border-radius: 10px; padding: 8px 12px; font-size: .8rem; font-weight: 600;
}
.m-fact span { display: block; font-size: .66rem; font-weight: 500; color: var(--m-muted); text-transform: uppercase; letter-spacing: .08em; }

/* Radio / checkbox option rows */
.m-option { display: block; margin-bottom: 10px; }
.m-option:last-child { margin-bottom: 0; }
.m-option input { position: absolute; opacity: 0; pointer-events: none; }
.m-option__box {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid var(--m-line); border-radius: var(--m-radius-sm);
    padding: 13px 14px; cursor: pointer; background: #fff;
    transition: border-color .15s ease, background .15s ease;
}
.m-option__box:hover { background: var(--m-paper); }
.m-option input:checked + .m-option__box { border-color: var(--m-forest); background: var(--m-mint); }
.m-option input:focus-visible + .m-option__box { outline: 2px solid var(--m-clay); outline-offset: 2px; }
.m-option__tick {
    width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--m-line);
    display: grid; place-items: center; flex-shrink: 0;
}
.m-option input:checked + .m-option__box .m-option__tick { border-color: var(--m-forest); background: var(--m-forest); color: #fff; }
.m-option__tick svg { opacity: 0; }
.m-option input:checked + .m-option__box .m-option__tick svg { opacity: 1; }
.m-option--check .m-option__tick { border-radius: 6px; }
.m-option__label { font-weight: 600; font-size: .92rem; }
.m-option__meta { color: var(--m-muted); font-size: .78rem; }
.m-option__price { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Quantity stepper */
/*
   Quantity stepper.

   Targets are 46px, above the 44px minimum for a thumb — they were 38px, which
   is why taps kept missing. The row is also allowed to wrap on a narrow phone so
   the price and Remove never get squeezed off the edge.
*/
.m-qty {
    display: inline-flex; align-items: center; flex: none;
    border: 1px solid var(--m-line); border-radius: 12px;
    overflow: hidden; background: #fff;
}
.m-qty button {
    width: 46px; height: 46px; border: 0; background: #fff; cursor: pointer;
    color: var(--m-forest); line-height: 1;
    display: grid; place-items: center;
    /* Stop the double-tap-to-zoom delay: it makes a tap feel ignored. */
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    transition: background .12s ease;
}
.m-qty button:active { background: var(--m-mint); transform: scale(.94); }
.m-qty button:disabled { opacity: .35; cursor: default; }
@media (hover: hover) { .m-qty button:hover { background: var(--m-mint); } }
.m-qty input {
    width: 46px; height: 46px; border: 0; text-align: center;
    font: inherit; font-weight: 700; font-variant-numeric: tabular-nums;
    -moz-appearance: textfield; background: #fff; color: var(--m-ink);
    pointer-events: none;
}
.m-qty input::-webkit-outer-spin-button, .m-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Brief dim while the update is in flight, so a tap always looks acknowledged. */
.m-qty.is-busy { opacity: .55; }

/* Text inputs */
.m-field { margin-bottom: 14px; }
.m-label { display: block; font-weight: 600; font-size: .84rem; margin-bottom: 6px; }
.m-input, .m-select, .m-textarea {
    width: 100%; border: 1px solid var(--m-line); border-radius: 11px;
    padding: 12px 14px; font: inherit; font-size: .93rem; background: #fff; color: var(--m-ink);
}
.m-input:focus, .m-select:focus, .m-textarea:focus { outline: 0; border-color: var(--m-clay); box-shadow: 0 0 0 4px rgba(221, 161, 139, .24); }
.m-hint { color: var(--m-muted); font-size: .76rem; margin-top: 5px; }
.m-error { color: #a33a22; font-size: .78rem; margin-top: 5px; }

/* Sticky action bar */
.m-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(1.4) blur(8px);
    border-top: 1px solid var(--m-line);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}
.m-sticky__inner { max-width: 960px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.m-sticky__total { font-weight: 700; font-variant-numeric: tabular-nums; }
.m-sticky__label { display: block; color: var(--m-muted); font-size: .72rem; font-weight: 500; }

/* ----------------------------------------------------------------- Cart --- */
.m-line { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--m-line); }
.m-line:last-child { border-bottom: 0; }
.m-line__img { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; background: var(--m-mint); flex-shrink: 0; }
.m-line__body { flex: 1; min-width: 0; }
.m-line__title { font-weight: 600; font-size: .95rem; display: flex; align-items: center; gap: 7px; }
.m-line__meta { color: var(--m-muted); font-size: .8rem; margin-top: 2px; }
/* wrap: on a narrow phone the price and Remove must not be squeezed off the edge */
.m-line__foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }

/* Bill */
.m-bill { list-style: none; margin: 0; padding: 0; }
.m-bill li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .88rem; }
.m-bill li span:last-child { font-variant-numeric: tabular-nums; }
.m-bill__muted { color: var(--m-muted); }
.m-bill__rule { border-top: 1px dashed var(--m-line); margin: 8px 0; }
.m-bill__total { font-family: var(--m-display); font-weight: 700; font-size: 1.15rem; padding-top: 10px !important; border-top: 1px solid var(--m-line); }

/* Alerts */
.m-alert {
    border-radius: 12px; padding: 12px 14px; font-size: .87rem; font-weight: 500;
    display: flex; gap: 9px; align-items: flex-start; margin-bottom: 16px;
}
.m-alert--ok { background: var(--m-mint); color: #276046; }
.m-alert--err { background: #fdeee9; color: #8a3d24; }

/* Empty state */
.m-empty { text-align: center; padding: 64px 20px; }
.m-empty__ico { width: 60px; height: 60px; border-radius: 18px; margin: 0 auto 16px; background: var(--m-mint); color: var(--m-forest); display: grid; place-items: center; }
.m-empty h2 { font-size: 1.15rem; margin-bottom: 6px; }
.m-empty p { color: var(--m-muted); font-size: .9rem; max-width: 360px; margin: 0 auto 20px; }

/* ------------------------------------------------- Signature: the ticket -- */
/*  The confirmation is a paper receipt: notched edges, a torn dashed seam and
    the pickup token set in the display face. It rhymes with the 80mm print and
    the token wall above the counter, so the number reads the same in all three. */
.m-ticket-page { background: var(--m-forest); min-height: 100vh; padding: 32px 16px 60px; }

.m-ticket {
    max-width: 400px; margin: 0 auto;
    background: #fff; border-radius: 18px;
    position: relative;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6);
}
.m-ticket__top { padding: 30px 26px 22px; text-align: center; }
.m-ticket__eyebrow {
    font-size: .68rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--m-muted); margin: 0 0 18px;
}
.m-ticket__token {
    font-family: var(--m-display); font-weight: 700;
    font-size: 5.4rem; line-height: .92; color: var(--m-forest);
    font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.m-ticket__tokenlabel { color: var(--m-muted); font-size: .84rem; margin-top: 8px; }

/* The perforation: two notches plus a dashed seam */
.m-ticket__seam { position: relative; height: 24px; }
.m-ticket__seam::before, .m-ticket__seam::after {
    content: ""; position: absolute; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border-radius: 50%; background: var(--m-forest);
}
.m-ticket__seam::before { left: -12px; }
.m-ticket__seam::after { right: -12px; }
.m-ticket__perf {
    position: absolute; left: 16px; right: 16px; top: 50%;
    border-top: 2px dashed var(--m-line);
}
.m-ticket__body { padding: 6px 26px 28px; }

.m-paynote {
    background: var(--m-clay); color: var(--m-forest-700);
    border-radius: 12px; padding: 14px; text-align: center;
    font-weight: 700; font-size: .9rem; margin-bottom: 18px;
}
.m-paynote span { display: block; font-weight: 500; font-size: .78rem; margin-top: 3px; opacity: .85; }

.m-ticket__meta { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem; color: var(--m-muted); margin-bottom: 16px; }
.m-ticket__meta strong { display: block; color: var(--m-ink); font-weight: 600; }

.m-ticket__items { list-style: none; margin: 0 0 14px; padding: 0; }
.m-ticket__items li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; font-size: .86rem; }
.m-ticket__items .qty { color: var(--m-muted); }
.m-ticket__items .addon { color: var(--m-muted); font-size: .76rem; padding-left: 2px; }

.m-ticket__foot { text-align: center; margin-top: 22px; }
.m-ticket__foot a { color: #9dc0b1; font-size: .84rem; }

.m-status {
    display: inline-flex; align-items: center; gap: 7px;
    background: var(--m-mint); color: #276046;
    border-radius: 999px; padding: 5px 12px; font-size: .74rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
}

/* ----------------------------------------------------------- Closed page -- */
.m-closed {
    min-height: 100vh; display: grid; place-items: center; text-align: center;
    padding: 24px; background: var(--m-forest); color: #fff;
}
.m-closed__mark {
    width: 64px; height: 64px; border-radius: 20px; margin: 0 auto 22px;
    background: var(--m-clay); color: var(--m-forest-700);
    display: grid; place-items: center; font-family: var(--m-display); font-weight: 700; font-size: 1.8rem;
}
.m-closed h1 { font-size: 1.7rem; margin-bottom: 10px; }
.m-closed p { color: #9dc0b1; max-width: 380px; margin: 0 auto; }

/* ---------------------------------------------------------------- Footer -- */
.m-footer { text-align: center; padding: 40px 16px 24px; color: var(--m-muted); font-size: .8rem; }
.m-footer strong { color: var(--m-ink); }

/* ------------------------------------------------------- Coupons (M5) ----- */
.m-offers { display: flex; flex-direction: column; gap: 8px; }
.m-offer {
    display: flex; align-items: center; gap: 10px;
    border: 1px dashed #cfe9c4; background: var(--m-mint);
    border-radius: 12px; padding: 10px 12px;
}
.m-offer__code {
    font-family: ui-monospace, "Courier New", monospace; font-weight: 700;
    letter-spacing: .06em; color: var(--m-forest); font-size: .82rem;
    background: #fff; border-radius: 7px; padding: 4px 9px; white-space: nowrap;
}
.m-offer__text { font-size: .8rem; color: var(--m-forest); }

.m-coupon { display: flex; gap: 8px; }
.m-coupon .m-input { text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }

.m-applied {
    display: flex; align-items: center; gap: 10px;
    background: var(--m-mint); border: 1px dashed #cfe9c4;
    border-radius: 12px; padding: 11px 12px;
}
.m-applied__code {
    font-family: ui-monospace, "Courier New", monospace; font-weight: 700;
    letter-spacing: .06em; color: var(--m-forest); font-size: .84rem;
}
.m-applied__save { color: #276046; font-size: .78rem; }

/* ------------------------------------------- Live search & coupon list ---- */
.m-search input { padding-right: 40px; }
.m-search__clear {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    width: 26px; height: 26px; border: 0; border-radius: 50%;
    background: var(--m-mint); color: var(--m-forest);
    display: grid; place-items: center; cursor: pointer; padding: 0;
}
.m-search__clear[hidden] { display: none; }
.m-search__clear:hover { background: #dce9d2; }

/* Hidden cards and sections must not leave grid gaps behind. */
.m-card[hidden], .m-section[hidden], .m-rail[hidden], .m-rail a[hidden] { display: none !important; }

#searchEmpty[hidden] { display: none; }

/* Cart: the "add more / clear" pair, sitting right under the items */
.m-cart-actions { display: flex; gap: 10px; margin: 0 0 16px; }
.m-cart-actions form { margin: 0; }

/* Checkout: every public coupon, tappable */
.m-offer-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.m-offer-row {
    display: flex; align-items: center; gap: 12px;
    border: 1px dashed #cfe9c4; background: var(--m-mint);
    border-radius: 12px; padding: 11px 12px;
}
.m-offer-row__body { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.m-offer-row__text { font-size: .82rem; color: var(--m-forest); }
.m-offer-row__save { font-size: .76rem; font-weight: 600; color: #276046; width: 100%; }
.m-offer-row__why { font-size: .76rem; color: var(--m-muted); width: 100%; }

/* Not usable yet: still visible, still explained, just not clickable. */
.m-offer-row--off { background: #f6f7f6; border-color: var(--m-line); border-style: solid; }
.m-offer-row--off .m-offer__code { color: var(--m-muted); }
.m-offer-row--off .m-offer-row__text { color: var(--m-muted); }
.m-btn:disabled { opacity: .45; cursor: not-allowed; }

/* ------------------------------------------------- Phone number field ---- */
/*
   Country code + number. The select gets its own arrow with real breathing room:
   the native arrow was pressed against the border because the box was capped at
   112px and the padding made no allowance for it.
*/
.m-phone { display: flex; gap: 10px; align-items: stretch; }
.m-phone .m-input { flex: 1 1 auto; min-width: 0; }

.m-selectwrap { position: relative; display: inline-flex; align-items: stretch; }
.m-selectwrap .m-select {
    /* Right padding reserves space for our own arrow. */
    padding-right: 34px;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: none;               /* kill any UA arrow */
    cursor: pointer;
    text-overflow: ellipsis;
}
.m-selectwrap__arrow {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    pointer-events: none; color: var(--m-muted);
}
/* Wide enough for a flag, a four-digit code and the arrow, and no wider —
   the country name is visible in the open dropdown, which is where it matters. */
.m-selectwrap--code { flex: 0 0 auto; width: 128px; }
.m-selectwrap--code .m-select { width: 100%; font-variant-numeric: tabular-nums; }

@media (max-width: 380px) {
    /* Very narrow phones: stack rather than squeeze the number field. */
    .m-phone { flex-wrap: wrap; }
    .m-selectwrap--code { width: 100%; }
    .m-phone .m-input { flex: 1 1 100%; }
}

/* Savings against MRP */
.m-price__was { color: var(--m-muted); font-weight: 500; font-size: .84em; margin-right: 5px; text-decoration-thickness: 1px; }
.m-bill__save { color: #2f7d46; font-weight: 700; }
.m-bill__save span:last-child::before { content: "− "; }

/* Menu-card quantity stepper */
.m-cardadd { display: inline-flex; align-items: center; flex: none; }
.m-qty--sm { border-radius: 11px; }
.m-qty--sm button { width: 40px; height: 40px; }
.m-qty--sm input { width: 34px; height: 40px; font-size: .95rem; }

.m-success-banner {
    background: var(--m-mint, #e8f5e9);
    border: 1px solid #a5d6a7;
    border-radius: 14px;
    margin: 14px 16px 0;
    padding: 14px 16px;
    color: #1b5e20;
}
.m-success-banner__inner {
    display: flex; align-items: flex-start; gap: 12px;
}
.m-success-banner__inner svg { flex-shrink: 0; margin-top: 2px; color: #2e7d32; }
.m-success-banner__inner > div { display: flex; flex-direction: column; gap: 3px; font-size: .9rem; line-height: 1.45; }
.m-success-banner__inner strong { font-size: .98rem; color: #1b5e20; }


.m-dues-banner {
    background: #fff4e5;
    border: 1px solid #ffb74d;
    border-radius: 14px;
    margin: 14px 16px 0;
    padding: 14px 16px;
    color: #8a5100;
}
.m-dues-banner__inner {
    display: flex; align-items: flex-start; gap: 12px;
}
.m-dues-banner__inner svg { flex-shrink: 0; margin-top: 2px; color: #ef6c00; }
.m-dues-banner__inner > div { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; line-height: 1.45; }
.m-dues-banner__inner strong { font-size: .98rem; color: #7c4400; }
.m-dues-banner__inner b { color: #7c4400; }

.m-bill__warn {
    background: #fff4e5;
    border-radius: 8px;
    margin: 4px -6px 0;
    padding: 6px 6px;
    color: #8a5100;
    font-weight: 600;
}