/*!
 * Menu Pink Concierge AI - Neo Glass Concierge V1
 * Radical CSS redesign for chat-menu-pro.
 * Same HTML/JS contracts: chat, cart, choices, summary, WhatsApp flow remain untouched.
 */

:root {
    --mpc-primary: var(--mp-primary, #8a3aff);
    --mpc-primary-2: color-mix(in srgb, var(--mpc-primary) 70%, #020617);
    --mpc-primary-3: color-mix(in srgb, var(--mpc-primary) 44%, #ffffff);
    --mpc-ink: #07111f;
    --mpc-ink-2: #0f172a;
    --mpc-text: #101827;
    --mpc-muted: #64748b;
    --mpc-line: rgba(226, 232, 240, .78);
    --mpc-bg: #080d18;
    --mpc-page: #f7f8fc;
    --mpc-white: #ffffff;
    --mpc-surface: rgba(255, 255, 255, .82);
    --mpc-surface-strong: rgba(255, 255, 255, .96);
    --mpc-soft: color-mix(in srgb, var(--mpc-primary) 10%, #ffffff);
    --mpc-soft-2: color-mix(in srgb, var(--mpc-primary) 18%, transparent);
    --mpc-glow: color-mix(in srgb, var(--mpc-primary) 32%, transparent);
    --mpc-shadow: 0 28px 80px rgba(2, 6, 23, .24);
    --mpc-shadow-soft: 0 18px 44px rgba(15, 23, 42, .10);
    --mpc-max: 840px;
    --mpc-safe-bottom: env(safe-area-inset-bottom, 0px);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
    background: var(--mpc-bg);
}

body.mpc-body {
    min-height: 100vh;
    margin: 0;
    direction: rtl;
    color: var(--mpc-text);
    font-family: "Cairo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background:
        radial-gradient(circle at 12% -14%, color-mix(in srgb, var(--mpc-primary) 34%, transparent), transparent 34%),
        radial-gradient(circle at 92% 4%, rgba(255, 255, 255, .16), transparent 28%),
        linear-gradient(155deg, #050914 0%, #08111f 33%, color-mix(in srgb, var(--mpc-primary) 18%, #101827) 64%, #f4f7fb 64.2%, #f4f7fb 100%);
    overflow-x: hidden;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
}

body.mpc-body::before,
body.mpc-body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
}

body.mpc-body::before {
    z-index: -3;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 38px 38px;
    mask-image: linear-gradient(180deg, rgba(0,0,0,.88), rgba(0,0,0,.16) 56%, transparent 92%);
}

body.mpc-body::after {
    z-index: -2;
    background:
        radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--mpc-primary) 16%, transparent), transparent 24%),
        linear-gradient(180deg, transparent 0%, rgba(255,255,255,.82) 72%, rgba(255,255,255,.96) 100%);
}

button,
textarea,
input {
    font: inherit;
}

button {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

button:disabled {
    cursor: not-allowed;
}

img {
    max-width: 100%;
}

.mpc-page {
    position: relative;
    width: 100%;
    min-height: 100vh;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 0 calc(150px + var(--mpc-safe-bottom));
}

.mpc-page::before {
    content: "";
    position: fixed;
    right: 50%;
    top: 42px;
    width: min(760px, calc(100% - 28px));
    height: 238px;
    transform: translateX(50%);
    border-radius: 999px;
    background: radial-gradient(circle, color-mix(in srgb, var(--mpc-primary) 22%, transparent), transparent 68%);
    filter: blur(32px);
    opacity: .85;
    pointer-events: none;
    z-index: -1;
}

/* HERO */
.mpc-hero {
    position: relative;
    isolation: isolate;
    width: min(var(--mpc-max), calc(100% - 18px));
    margin: 8px auto 18px;
    padding: 12px;
    border-radius: 38px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06)),
        color-mix(in srgb, var(--mpc-primary) 18%, rgba(2,6,23,.82));
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow:
        0 28px 76px rgba(2, 6, 23, .26),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

.mpc-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-image:
        linear-gradient(180deg, rgba(2, 6, 23, .14), rgba(2, 6, 23, .64)),
        var(--mpc-cover);
    background-size: cover;
    background-position: center;
    transform: scale(1.04);
    filter: saturate(1.18) contrast(1.05);
}

.mpc-hero-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 16% 18%, rgba(255,255,255,.24), transparent 26%),
        linear-gradient(135deg, color-mix(in srgb, var(--mpc-primary) 48%, transparent), rgba(2,6,23,.70));
    mix-blend-mode: screen;
    opacity: .72;
}

.mpc-hero::after {
    content: "";
    position: absolute;
    inset: auto -18% -58% -18%;
    height: 170px;
    z-index: -1;
    background: radial-gradient(closest-side, rgba(255,255,255,.50), transparent 72%);
    filter: blur(26px);
    opacity: .65;
}

.mpc-topbar {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 54px;
}

.mpc-live-badge,
.mpc-time-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    color: #fff;
    background: rgba(2, 6, 23, .34);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 12px 26px rgba(2, 6, 23, .18), inset 0 1px 0 rgba(255,255,255,.10);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    font-size: 11.4px;
    font-weight: 1000;
    white-space: nowrap;
}

.mpc-live-badge i {
    font-size: 8px;
    filter: drop-shadow(0 0 8px currentColor);
}

.mpc-live-badge.is-open i {
    color: #22c55e;
}

.mpc-live-badge.is-closed i {
    color: #fb7185;
}

.mpc-info-card {
    position: relative;
    z-index: 3;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 66px 16px 17px;
    border-radius: 32px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.46)),
        radial-gradient(circle at 50% -26%, color-mix(in srgb, var(--mpc-primary) 24%, transparent), transparent 54%);
    border: 1px solid rgba(255, 255, 255, .40);
    box-shadow:
        0 26px 70px rgba(2, 6, 23, .22),
        inset 0 1px 0 rgba(255, 255, 255, .74),
        inset 0 -1px 0 rgba(255, 255, 255, .24);
    backdrop-filter: blur(28px) saturate(180%);
    -webkit-backdrop-filter: blur(28px) saturate(180%);
}

.mpc-logo-wrap {
    position: absolute;
    top: 0;
    left: 50%;
    width: 106px;
    height: 106px;
    padding: 6px;
    transform: translate(-50%, -50%);
    border-radius: 32px;
    background:
        linear-gradient(180deg, rgba(255,255,255,1), rgba(248,250,252,.94));
    border: 1px solid rgba(255, 255, 255, .80);
    box-shadow:
        0 18px 42px rgba(2, 6, 23, .24),
        0 0 0 5px rgba(255, 255, 255, .16),
        0 0 0 8px color-mix(in srgb, var(--mpc-primary) 16%, transparent);
}

.mpc-logo-wrap::after {
    content: "";
    position: absolute;
    inset: -9px;
    z-index: -1;
    border-radius: 38px;
    background: conic-gradient(from 160deg, transparent, color-mix(in srgb, var(--mpc-primary) 60%, #fff), transparent, rgba(255,255,255,.42), transparent);
    filter: blur(10px);
    opacity: .72;
}

.mpc-logo {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    border-radius: 27px;
    background: #fff;
}

.mpc-eyebrow {
    margin: 0;
    color: var(--mpc-primary);
    font-size: 11px;
    font-weight: 1000;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.mpc-info-copy h1 {
    margin: 0;
    color: var(--mpc-ink-2);
    font-size: clamp(25px, 6.1vw, 36px);
    font-weight: 1000;
    line-height: 1.14;
    letter-spacing: -.055em;
    text-wrap: balance;
}

.mpc-info-copy h1::after {
    content: "";
    display: block;
    width: 52px;
    height: 4px;
    margin: 10px auto 0;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--mpc-primary), transparent);
}

.mpc-description {
    width: 100%;
    max-width: min(96%, 620px);
    margin: 9px auto 0;
    color: #475569;
    font-size: 12.7px;
    font-weight: 850;
    line-height: 1.55;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpc-metrics-strip,
.mpc-info-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 1px;
}

.mpc-metrics-strip span,
.mpc-info-grid span {
    min-width: 0;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 9px;
    border-radius: 18px;
    color: #334155;
    background:
        linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.50));
    border: 1px solid rgba(226, 232, 240, .74);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
    font-size: 10.8px;
    font-weight: 950;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mpc-metrics-strip i,
.mpc-info-grid i {
    color: var(--mpc-primary);
    font-size: 12px;
}

.mpc-socials {
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 6px;
    border-radius: 23px;
    background: rgba(255,255,255,.44);
    border: 1px solid rgba(255,255,255,.52);
    overflow-x: auto;
    scrollbar-width: none;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.58);
}

.mpc-socials::-webkit-scrollbar {
    display: none;
}

.mpc-social {
    width: 40px;
    height: 40px;
    min-width: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: var(--mpc-primary);
    text-decoration: none;
    background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.88));
    border: 1px solid rgba(255,255,255,.78);
    box-shadow: 0 10px 24px rgba(15,23,42,.08);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.mpc-social.whatsapp {
    color: #16a34a;
}

.mpc-social.snapchat {
    color: #ca8a04;
}

.mpc-social.x {
    color: #0f172a;
}

.mpc-social.instagram {
    color: #d946ef;
}

.mpc-social:hover,
.mpc-social:focus-visible {
    transform: translateY(-2px) scale(1.02);
    color: #fff;
    background: linear-gradient(135deg, var(--mpc-primary), var(--mpc-primary-2));
    box-shadow: 0 15px 34px var(--mpc-glow);
    outline: none;
}

/* Keep chat-first experience: offers and category rail stay hidden unless removed manually. */
.mpc-offers,
.mpc-category-rail {
    display: none !important;
}

.mpc-offers,
.mpc-category-rail,
.mpc-chat-shell,
.summary-box,
.extras-picker,
.variant-picker,
.allergen-picker,
[class*="extras-picker"],
[class*="variant-picker"],
[class*="allergen-picker"] {
    width: min(var(--mpc-max), calc(100% - 18px));
    margin-inline: auto;
}

.mpc-chat-shell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom: calc(150px + var(--mpc-safe-bottom));
}

.mpc-chat-shell::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 50%;
    width: 2px;
    transform: translateX(-50%);
    background: linear-gradient(180deg, transparent, rgba(148,163,184,.20), transparent);
    opacity: .4;
    pointer-events: none;
}

.message {
    width: 100%;
    margin: 0;
    animation: mpcMessageIn .18s ease both;
}

@keyframes mpcMessageIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.992);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.message.bot,
.message.user {
    width: 100%;
    display: flex;
    align-items: flex-end;
    gap: 0;
}

.message.bot {
    justify-content: flex-start;
}

.message.user {
    justify-content: flex-end;
}

.message.bot::before,
.message.user::after {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 12px;
    box-shadow: 0 10px 22px rgba(15,23,42,.10);
}

.message.bot::before {
    content: "\f544";
    color: #fff;
    background: linear-gradient(135deg, var(--mpc-primary), var(--mpc-primary-2));
}

.message.user::after {
    content: "\f007";
    color: var(--mpc-primary);
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--mpc-primary) 16%, #e2e8f0);
}

.message .bubble {
    max-width: min(560px, 88%);
    padding: 10px 13px;
    border-radius: 18px;
    font-size: 13px;
    font-weight: 740;
    line-height: 1.64;
    word-break: break-word;
}

.message.bot .bubble,
.bot .bubble {
    border-bottom-right-radius: 8px;
    color: var(--mpc-text);
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(226,232,240,.78);
    box-shadow: 0 7px 18px rgba(15,23,42,.055);
}

.message.user .bubble,
.user .bubble {
    border-bottom-left-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--mpc-primary), var(--mpc-primary-2));
    box-shadow: 0 9px 22px color-mix(in srgb, var(--mpc-primary) 22%, transparent);
}

.message .bubble a {
    color: inherit;
    font-weight: 1000;
}

.quick-actions,
.message .quick-actions,
.chat-shell .quick-actions {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 4px 0 0;
}

.choice-btn,
.quick-actions button {
    min-height: 36px;
    padding: 8px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mpc-primary) 16%, #e2e8f0);
    color: #334155;
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.86));
    box-shadow: 0 8px 18px rgba(15,23,42,.055), inset 0 1px 0 rgba(255,255,255,.70);
    font-size: 11.7px;
    font-weight: 950;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease;
}

.choice-btn:hover,
.choice-btn:focus-visible,
.quick-actions button:hover,
.quick-actions button:focus-visible {
    transform: translateY(-1px);
    border-color: color-mix(in srgb, var(--mpc-primary) 30%, #e2e8f0);
    box-shadow: 0 14px 30px rgba(15,23,42,.10), 0 0 0 4px color-mix(in srgb, var(--mpc-primary) 7%, transparent);
    outline: none;
}

.choice-btn.primary,
.choice-btn.success,
.quick-actions button.primary,
.quick-actions button.success {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--mpc-primary), var(--mpc-primary-2));
    box-shadow: 0 14px 30px color-mix(in srgb, var(--mpc-primary) 24%, transparent), inset 0 1px 0 rgba(255,255,255,.22);
}

.choice-btn.danger,
.quick-actions button.danger {
    color: #ef4444;
    border-color: rgba(254,202,202,.88);
    background: linear-gradient(180deg, #fff8f8, #fff1f2);
}

/* ITEM CARDS */
.item-card,
.summary-item {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    border: 1px solid rgba(226,232,240,.88);
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94));
    box-shadow:
        0 20px 52px rgba(15,23,42,.12),
        inset 0 1px 0 rgba(255,255,255,.78);
}

.item-card {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 13px;
    width: 100%;
    min-height: 138px;
    margin: 12px 0;
    padding: 11px;
    transform: translateZ(0);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.item-card:hover,
.item-card:focus-within {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--mpc-primary) 30%, #e2e8f0);
    box-shadow:
        0 28px 70px rgba(15,23,42,.16),
        0 0 0 5px color-mix(in srgb, var(--mpc-primary) 8%, transparent),
        inset 0 1px 0 rgba(255,255,255,.78);
}

.item-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background:
        linear-gradient(90deg, transparent, var(--mpc-primary), color-mix(in srgb, var(--mpc-primary) 22%, #fff), transparent);
    opacity: .92;
}

.item-card::after {
    content: "";
    position: absolute;
    inset: -54px -54px auto auto;
    width: 118px;
    height: 118px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--mpc-primary) 12%, transparent);
    filter: blur(4px);
    pointer-events: none;
}

.item-card img,
.item-card .item-image,
.item-card [class*="image"] img {
    position: relative;
    z-index: 1;
    width: 118px;
    height: 118px;
    min-width: 118px;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 25px;
    background:
        radial-gradient(circle at 30% 18%, rgba(255,255,255,.92), transparent 38%),
        linear-gradient(135deg, var(--mpc-soft), #f8fafc);
    box-shadow:
        0 16px 32px rgba(15,23,42,.13),
        inset 0 1px 0 rgba(255,255,255,.72);
}

.item-card .item-body,
.item-card [class*="body"],
.item-card .item-content,
.item-card [class*="content"] {
    position: relative;
    z-index: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 4px 0;
}

.item-card h3,
.item-card h4,
.item-card .item-title,
.item-card .item-name,
.item-card [class*="title"],
.item-card [class*="name"] {
    margin: 0;
    color: #111827;
    font-size: 15.2px;
    font-weight: 1000;
    line-height: 1.35;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.item-card p,
.item-card .item-description,
.item-card [class*="desc"] {
    margin: 0;
    color: #64748b;
    font-size: 12.1px;
    font-weight: 780;
    line-height: 1.65;
}

.item-card .price,
.item-card [class*="price"]:not(.old-price),
.item-card .current-price,
.summary-item-price,
.price {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 33px;
    padding: 6px 11px;
    border-radius: 999px;
    color: var(--mpc-primary);
    background: color-mix(in srgb, var(--mpc-primary) 10%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--mpc-primary) 18%, #e2e8f0);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65);
    font-size: 13px;
    font-weight: 1000;
}

.item-card .old-price {
    color: #94a3b8 !important;
    text-decoration: line-through;
    font-size: 11.4px;
    font-weight: 900;
}

.item-card .allergen-chip,
.item-card .allergen-pill,
.item-card .nutrition-pill,
.item-card [class*="allergen"],
.item-card [class*="nutrition"] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    min-height: 26px;
    padding: 4px 8px;
    border-radius: 999px;
    color: #475569;
    background: rgba(248,250,252,.92);
    border: 1px solid rgba(226,232,240,.88);
    font-size: 10.6px;
    font-weight: 880;
}

.item-card button,
.item-card .choice-btn {
    align-self: stretch;
    min-height: 42px;
    border-radius: 18px;
}

/* PICKERS */
.extras-picker,
.variant-picker,
.allergen-picker,
[class*="extras-picker"],
[class*="variant-picker"],
[class*="allergen-picker"] {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    margin-bottom: 14px;
    padding: 15px;
    border-radius: 31px;
    border: 1px solid rgba(226,232,240,.90);
    background:
        linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.86));
    box-shadow:
        0 22px 56px rgba(15,23,42,.14),
        inset 0 1px 0 rgba(255,255,255,.74);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.extras-picker::before,
.variant-picker::before,
.allergen-picker::before,
[class*="extras-picker"]::before,
[class*="variant-picker"]::before,
[class*="allergen-picker"]::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, transparent, var(--mpc-primary), transparent);
}

.extras-picker h3,
.variant-picker h3,
.allergen-picker h3,
[class*="extras-picker"] h3,
[class*="variant-picker"] h3,
[class*="allergen-picker"] h3 {
    position: relative;
    margin: 0 0 10px;
    padding-inline-start: 11px;
    color: var(--mpc-primary);
    font-size: 14px;
    font-weight: 1000;
    line-height: 1.45;
}

.extras-picker h3::before,
.variant-picker h3::before,
.allergen-picker h3::before,
[class*="extras-picker"] h3::before,
[class*="variant-picker"] h3::before,
[class*="allergen-picker"] h3::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    top: .22em;
    bottom: .22em;
    width: 4px;
    border-radius: 999px;
    background: var(--mpc-primary);
}

.extras-picker p,
.variant-picker p,
.allergen-picker p,
[class*="extras-picker"] p,
[class*="variant-picker"] p,
[class*="allergen-picker"] p {
    margin: 0 0 9px;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 820;
    line-height: 1.55;
}

.extra-option,
.variant-option,
.allergen-option,
[class*="extra-option"],
[class*="variant-option"],
[class*="allergen-option"] {
    border-radius: 19px;
    border: 1px solid rgba(226,232,240,.88);
    background: rgba(255,255,255,.78);
    box-shadow: 0 8px 18px rgba(15,23,42,.055);
}

.allergen-picker,
[class*="allergen-picker"] {
    margin-top: 10px;
    padding: 13px;
    border-radius: 27px;
    border-color: color-mix(in srgb, var(--mpc-primary) 18%, rgba(226,232,240,.88));
    background:
        linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.48)),
        radial-gradient(circle at 50% -16%, color-mix(in srgb, var(--mpc-primary) 16%, transparent), transparent 48%);
    box-shadow:
        0 16px 40px rgba(15,23,42,.09),
        inset 0 1px 0 rgba(255,255,255,.70);
}

.allergen-picker .quick-actions,
[class*="allergen-picker"] .quick-actions,
.allergen-picker [class*="options"],
[class*="allergen-picker"] [class*="options"] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    margin: 6px 0 0;
}

.allergen-picker .choice-btn,
[class*="allergen-picker"] .choice-btn,
.allergen-option,
[class*="allergen-option"] {
    width: auto;
    min-width: 0;
    min-height: 30px;
    padding: 5px 9px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--mpc-primary) 16%, rgba(226,232,240,.88));
    background: rgba(255,255,255,.68);
    color: #475569;
    box-shadow: none;
    font-size: 10.7px;
    font-weight: 900;
    line-height: 1.2;
}

.allergen-picker .choice-btn.selected,
.allergen-picker .choice-btn.active,
.allergen-picker .choice-btn.is-selected,
.allergen-picker .choice-btn[aria-pressed="true"],
[class*="allergen-picker"] .choice-btn.selected,
[class*="allergen-picker"] .choice-btn.active,
[class*="allergen-picker"] .choice-btn.is-selected,
[class*="allergen-picker"] .choice-btn[aria-pressed="true"],
.allergen-option.selected,
.allergen-option.active,
.allergen-option.is-selected,
.allergen-option[aria-pressed="true"],
[class*="allergen-option"].selected,
[class*="allergen-option"].active,
[class*="allergen-option"].is-selected,
[class*="allergen-option"][aria-pressed="true"] {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--mpc-primary), var(--mpc-primary-2));
    box-shadow: 0 9px 18px color-mix(in srgb, var(--mpc-primary) 22%, transparent);
}

.allergen-picker .choice-btn::before,
.allergen-picker .choice-btn::after,
[class*="allergen-picker"] .choice-btn::before,
[class*="allergen-picker"] .choice-btn::after,
.allergen-option::before,
.allergen-option::after,
[class*="allergen-option"]::before,
[class*="allergen-option"]::after {
    content: none !important;
    display: none !important;
}

.allergen-picker .fa-check,
[class*="allergen-picker"] .fa-check,
.allergen-option .fa-check,
[class*="allergen-option"] .fa-check {
    display: none !important;
}

.mpc-allergen-names,
.mpc-allergen-enabled-message .bubble b,
.message.bot .bubble .notice.success b {
    display: inline-flex;
    align-items: center;
    min-height: 25px;
    padding: 3px 9px;
    margin-inline: 3px;
    border-radius: 999px;
    color: #fff !important;
    background: linear-gradient(135deg, var(--mpc-primary), var(--mpc-primary-2));
    box-shadow: 0 7px 16px color-mix(in srgb, var(--mpc-primary) 20%, transparent);
    font-size: 11.2px;
    font-weight: 950;
}

.mpc-allergen-enabled-message .bubble,
.message.bot .bubble:has(.mpc-allergen-names) {
    border-color: color-mix(in srgb, var(--mpc-primary) 18%, #e2e8f0);
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--mpc-primary) 5%, #ffffff), rgba(255,255,255,.94));
}

/* SUMMARY / NOTICES */
.summary-box {
    position: relative;
    overflow: hidden;
    margin-top: 14px;
    margin-bottom: 14px;
    padding: 17px;
    border-radius: 34px;
    border: 1px solid rgba(226,232,240,.90);
    background:
        linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.94));
    box-shadow:
        0 28px 68px rgba(15,23,42,.16),
        inset 0 1px 0 rgba(255,255,255,.78);
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
}

.summary-box::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 6px;
    background: linear-gradient(90deg, transparent, var(--mpc-primary), color-mix(in srgb, var(--mpc-primary) 24%, #fff), transparent);
}

.summary-box h3,
.summary-box h4,
.summary-title {
    margin: 0 0 12px;
    color: #111827;
    font-size: 17px;
    font-weight: 1000;
    line-height: 1.35;
}

.summary-box .summary-item,
.summary-box [class*="summary-item"],
.summary-box [class*="cart-item"] {
    position: relative;
    margin: 10px 0;
    padding: 12px;
    border-radius: 25px;
    border: 1px solid rgba(226,232,240,.82);
    background: rgba(255,255,255,.80);
    box-shadow: 0 10px 26px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.70);
}

.summary-box .price,
.summary-box [class*="price"],
.summary-box .summary-item-price {
    color: var(--mpc-primary);
    font-weight: 1000;
}

.summary-total,
.cart-total,
.summary-box .summary-total,
.summary-box .cart-total,
.summary-box [class*="total"] {
    font-weight: 1000;
}

.summary-box .summary-total,
.summary-box .cart-total,
.summary-box [class*="total"] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 48px;
    margin-top: 12px;
    padding: 11px 13px;
    border-radius: 22px;
    color: #111827;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--mpc-primary) 9%, #ffffff), rgba(255,255,255,.92));
    border: 1px solid color-mix(in srgb, var(--mpc-primary) 18%, #e2e8f0);
}

.summary-box .choice-btn,
.summary-box button {
    min-height: 47px;
    border-radius: 20px;
}

.summary-box .choice-btn.primary,
.summary-box .choice-btn.success,
.summary-box button.primary,
.summary-box button.success,
.summary-box [onclick*="sendWhatsApp"] {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, var(--mpc-primary), var(--mpc-primary-2));
    box-shadow: 0 16px 36px var(--mpc-glow), inset 0 1px 0 rgba(255,255,255,.22);
}

.summary-box .choice-btn.danger,
.summary-box button.danger,
.summary-remove-btn {
    color: #ef4444;
    border-color: rgba(254,202,202,.88);
    background: linear-gradient(180deg, #fff7f7, #fff1f2);
}

.notice,
.alert,
.minimum-order-cart-banner,
.summary-allergen-alert,
[class*="minimum-order"],
[class*="allergen-alert"] {
    position: relative;
    overflow: hidden;
    border-radius: 23px;
    border: 1px solid rgba(226,232,240,.88);
    background: rgba(255,255,255,.88);
    box-shadow: 0 11px 26px rgba(15,23,42,.07), inset 0 1px 0 rgba(255,255,255,.68);
    font-weight: 850;
}

.notice.success,
.alert.success,
[class*="success"] {
    border-color: color-mix(in srgb, #22c55e 30%, #e2e8f0);
}

.notice.danger,
.alert.danger,
[class*="danger"] {
    border-color: color-mix(in srgb, #ef4444 30%, #e2e8f0);
}

/* COMPOSER + MOBILE CART */
.mobile-cart-dock.mpc-cart-dock,
.mobile-cart-dock {
    position: fixed;
    z-index: 90;
    right: 0;
    left: 0;
    bottom: calc(12px + var(--mpc-safe-bottom));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: min(var(--mpc-max), calc(100% - 16px));
    min-height: 66px;
    margin-inline: auto;
    padding: 10px 13px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,.34);
    color: #fff;
    background:
        linear-gradient(135deg, color-mix(in srgb, var(--mpc-primary) 94%, #ffffff), var(--mpc-primary-2));
    box-shadow:
        0 24px 64px var(--mpc-glow),
        0 10px 24px rgba(15,23,42,.18),
        inset 0 1px 0 rgba(255,255,255,.26);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(18px) scale(.985);
    transition: opacity .18s ease, visibility .18s ease, transform .18s ease, box-shadow .18s ease;
}

.mobile-cart-dock.is-visible,
.mobile-cart-dock:not([hidden]).is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.mobile-cart-dock:hover,
.mobile-cart-dock:focus-visible {
    transform: translateY(-1px) scale(1);
    box-shadow:
        0 28px 70px var(--mpc-glow),
        0 12px 28px rgba(15,23,42,.20),
        inset 0 1px 0 rgba(255,255,255,.26);
    outline: none;
}

.mobile-cart-icon,
.mpc-cart-icon {
    position: relative;
    width: 45px;
    height: 45px;
    min-width: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    color: #fff;
    background: rgba(255,255,255,.20);
    border: 1px solid rgba(255,255,255,.28);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.26);
}

.mobile-cart-count,
.mpc-cart-count {
    position: absolute;
    top: -6px;
    inset-inline-start: -6px;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #fff;
    color: var(--mpc-primary);
    border: 1px solid rgba(255,255,255,.84);
    box-shadow: 0 8px 18px rgba(15,23,42,.20);
    font-size: 11px;
    font-weight: 1000;
}

.mobile-cart-copy,
.mpc-cart-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: start;
}

.mobile-cart-copy strong,
.mpc-cart-copy strong {
    color: #fff;
    font-size: 13.3px;
    font-weight: 1000;
    line-height: 1.25;
}

.mobile-cart-copy small,
.mpc-cart-copy small {
    color: rgba(255,255,255,.86);
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.35;
}

.mobile-cart-total,
.mpc-cart-total {
    color: #fff;
    font-size: 14px;
    font-weight: 1000;
    white-space: nowrap;
}

.composer.mpc-composer,
.composer {
    position: fixed;
    z-index: 96;
    right: 0;
    left: 0;
    bottom: calc(var(--dock-height, 0px) + 16px + var(--mpc-safe-bottom));
    width: min(var(--mpc-max), calc(100% - 16px));
    margin-inline: auto;
    padding: 9px;
    border-radius: 32px;
    border: 1px solid rgba(226,232,240,.92);
    background:
        linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.90));
    box-shadow:
        0 24px 64px rgba(15,23,42,.18),
        inset 0 1px 0 rgba(255,255,255,.76);
    backdrop-filter: blur(20px) saturate(155%);
    -webkit-backdrop-filter: blur(20px) saturate(155%);
}

.composer[hidden],
.mpc-composer[hidden] {
    display: none !important;
}

.composer-shell,
.mpc-composer-shell {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.composer-toolbar,
.mpc-composer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-inline: 4px;
}

.composer-mode-badge,
.mpc-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 29px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--mpc-primary);
    background: color-mix(in srgb, var(--mpc-primary) 9%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--mpc-primary) 18%, #e2e8f0);
    font-size: 11.5px;
    font-weight: 950;
}

.composer-reset-btn,
.mpc-reset-btn {
    width: 31px;
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(226,232,240,.86);
    border-radius: 13px;
    color: #64748b;
    background: rgba(255,255,255,.74);
}

.composer-inner,
.mpc-composer-inner {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.composer textarea,
#composerInput {
    flex: 1 1 auto;
    width: 100%;
    min-height: 47px;
    max-height: 118px;
    padding: 12px 13px;
    border-radius: 23px;
    border: 1px solid rgba(226,232,240,.70);
    background: rgba(255,255,255,.74);
    color: #111827;
    font-size: 14px;
    font-weight: 820;
    line-height: 1.55;
    outline: none;
    resize: none;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.composer textarea:focus,
#composerInput:focus {
    border-color: color-mix(in srgb, var(--mpc-primary) 34%, #e2e8f0);
    background: #fff;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mpc-primary) 10%, transparent);
}

.send-btn,
.mpc-send-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.24);
    color: #fff;
    background: linear-gradient(135deg, var(--mpc-primary), var(--mpc-primary-2));
    box-shadow:
        0 15px 34px var(--mpc-glow),
        inset 0 1px 0 rgba(255,255,255,.25);
    transition: transform .16s ease, box-shadow .16s ease, opacity .16s ease;
}

.send-btn:hover,
.send-btn:focus-visible,
.mpc-send-btn:hover,
.mpc-send-btn:focus-visible {
    transform: translateY(-1px);
    box-shadow:
        0 18px 40px var(--mpc-glow),
        0 0 0 4px color-mix(in srgb, var(--mpc-primary) 10%, transparent);
    outline: none;
}

.send-btn:disabled,
.mpc-send-btn:disabled {
    opacity: .56;
    transform: none;
    filter: grayscale(.18);
}

.composer-subtext,
.mpc-composer-subtext {
    margin: 0;
    padding-inline: 5px;
    color: #64748b;
    font-size: 11.3px;
    font-weight: 800;
    line-height: 1.45;
}

.riyal-template,
[hidden] {
    display: none !important;
}

.mp-riyal-svg,
.riyal-icon,
[class*="riyal"] svg {
    width: 1em;
    height: 1em;
    vertical-align: -.12em;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mpc-info-card,
    .composer.mpc-composer,
    .composer,
    .summary-box,
    .extras-picker,
    .variant-picker,
    .allergen-picker,
    [class*="extras-picker"],
    [class*="variant-picker"],
    [class*="allergen-picker"] {
        background: rgba(255,255,255,.96);
    }
}

@media (max-width: 640px) {
    body.mpc-body {
        background:
            radial-gradient(circle at 14% -10%, color-mix(in srgb, var(--mpc-primary) 36%, transparent), transparent 35%),
            linear-gradient(165deg, #050914 0%, #08111f 39%, color-mix(in srgb, var(--mpc-primary) 16%, #101827) 61%, #f5f7fb 61.2%, #f5f7fb 100%);
    }

    .mpc-page {
        padding-top: calc(8px + env(safe-area-inset-top, 0px));
    }

    .mpc-hero {
        width: calc(100% - 14px);
        margin: 8px auto 16px;
        padding: 10px;
        border-radius: 32px;
    }

    .mpc-topbar {
        margin-bottom: 48px;
    }

    .mpc-live-badge,
    .mpc-time-pill {
        min-height: 32px;
        padding: 6px 10px;
        font-size: 10.8px;
    }

    .mpc-info-card {
        padding: 60px 12px 14px;
        border-radius: 27px;
        gap: 10px;
    }

    .mpc-logo-wrap {
        width: 94px;
        height: 94px;
        padding: 6px;
        border-radius: 28px;
    }

    .mpc-logo {
        border-radius: 23px;
    }

    .mpc-info-copy h1 {
        font-size: 22.5px;
        line-height: 1.16;
    }

    .mpc-description {
        max-width: 96%;
        font-size: 11.7px;
        line-height: 1.45;
    }

    .mpc-metrics-strip,
    .mpc-info-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .mpc-metrics-strip span,
    .mpc-info-grid span {
        min-height: 34px;
        padding: 6px 7px;
        border-radius: 15px;
        font-size: 9.8px;
    }

    .mpc-metrics-strip i,
    .mpc-info-grid i {
        display: none;
    }

    .mpc-socials {
        justify-content: flex-start;
        max-width: calc(100% - 8px);
    }

    .mpc-social {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 14px;
    }

    .mpc-offers,
    .mpc-category-rail,
    .mpc-chat-shell,
    .summary-box,
    .extras-picker,
    .variant-picker,
    .allergen-picker,
    [class*="extras-picker"],
    [class*="variant-picker"],
    [class*="allergen-picker"] {
        width: calc(100% - 14px);
    }

    .mpc-chat-shell {
        gap: 8px;
        padding-bottom: calc(148px + var(--mpc-safe-bottom));
    }

    .mpc-chat-shell::before {
        display: none;
    }

    .message.bot,
    .message.user {
        gap: 6px;
    }

    .message.bot::before,
    .message.user::after {
        width: 27px;
        height: 27px;
        min-width: 27px;
        border-radius: 12px;
        font-size: 10.5px;
    }

    .message .bubble {
        max-width: 92%;
        padding: 9px 11px;
        border-radius: 17px;
        font-size: 12.8px;
        line-height: 1.6;
    }

    .quick-actions,
    .message .quick-actions,
    .chat-shell .quick-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 4px 0 0;
    }

    .choice-btn,
    .quick-actions button {
        min-height: 33px;
        padding: 7px 10px;
        font-size: 11.3px;
    }

    .item-card {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 10px;
        min-height: 116px;
        margin: 10px 0;
        padding: 9px;
        border-radius: 26px;
    }

    .item-card img,
    .item-card .item-image,
    .item-card [class*="image"] img {
        width: 96px;
        height: 96px;
        min-width: 96px;
        border-radius: 21px;
    }

    .item-card h3,
    .item-card h4,
    .item-card .item-title,
    .item-card .item-name,
    .item-card [class*="title"],
    .item-card [class*="name"] {
        font-size: 13.8px;
    }

    .item-card p,
    .item-card .item-description,
    .item-card [class*="desc"] {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: 11.5px;
        line-height: 1.55;
    }

    .item-card .price,
    .item-card [class*="price"]:not(.old-price),
    .item-card .current-price,
    .summary-item-price,
    .price {
        min-height: 30px;
        padding: 5px 9px;
        font-size: 12px;
    }

    .extras-picker,
    .variant-picker,
    .allergen-picker,
    [class*="extras-picker"],
    [class*="variant-picker"],
    [class*="allergen-picker"],
    .summary-box {
        padding: 14px;
        border-radius: 28px;
    }

    .allergen-picker .choice-btn,
    [class*="allergen-picker"] .choice-btn,
    .allergen-option,
    [class*="allergen-option"] {
        min-height: 28px;
        padding: 4px 8px;
        font-size: 10.3px;
    }

    .mobile-cart-dock.mpc-cart-dock,
    .mobile-cart-dock {
        width: calc(100% - 12px);
        min-height: 63px;
        padding: 9px 11px;
        border-radius: 27px;
        bottom: calc(10px + var(--mpc-safe-bottom));
    }

    .mobile-cart-icon,
    .mpc-cart-icon {
        width: 42px;
        height: 42px;
        min-width: 42px;
        border-radius: 17px;
    }

    .mobile-cart-copy small,
    .mpc-cart-copy small {
        display: none;
    }

    .mobile-cart-total,
    .mpc-cart-total {
        font-size: 13px;
    }

    .composer.mpc-composer,
    .composer {
        width: calc(100% - 12px);
        border-radius: 28px;
        bottom: calc(var(--dock-height, 0px) + 13px + var(--mpc-safe-bottom));
    }

    .composer-toolbar,
    .mpc-composer-toolbar {
        gap: 6px;
    }

    .composer textarea,
    #composerInput {
        min-height: 45px;
        border-radius: 21px;
        font-size: 13.5px;
    }

    .send-btn,
    .mpc-send-btn {
        width: 45px;
        height: 45px;
        min-width: 45px;
        border-radius: 18px;
    }

    .summary-box .summary-total,
    .summary-box .cart-total,
    .summary-box [class*="total"] {
        min-height: 45px;
        border-radius: 20px;
        font-size: 13px;
    }
}

@media (max-width: 380px) {
    .mpc-metrics-strip,
    .mpc-info-grid {
        grid-template-columns: 1fr;
    }

    .mpc-metrics-strip span,
    .mpc-info-grid span {
        justify-content: center;
    }

    .item-card {
        grid-template-columns: 86px minmax(0, 1fr);
    }

    .item-card img,
    .item-card .item-image,
    .item-card [class*="image"] img {
        width: 86px;
        height: 86px;
        min-width: 86px;
    }

    .mobile-cart-copy strong,
    .mpc-cart-copy strong {
        font-size: 12.4px;
    }

    .mobile-cart-total,
    .mpc-cart-total {
        font-size: 12px;
    }

    .composer-subtext,
    .mpc-composer-subtext {
        display: none;
    }
}

@media (min-width: 880px) {
    .mpc-hero {
        margin-top: 16px;
    }

    .mpc-chat-shell {
        padding-top: 6px;
    }
}

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

/* chat-menu-pro-cards-cart-premium-v2-start
 * Focused polish for item cards + cart/summary.
 * CSS-only override: keeps all current Blade/JS/order contracts unchanged.
 */
:root {
    --mpc-card-radius: 30px;
    --mpc-card-image: 112px;
    --mpc-cart-radius: 31px;
    --mpc-receipt-bg: rgba(255, 255, 255, .94);
}

/* صنف: بطاقة أخف، أوضح، ومناسبة للصورة أو بدون صورة */
.item-card {
    isolation: isolate;
    grid-template-columns: var(--mpc-card-image) minmax(0, 1fr);
    align-items: stretch;
    gap: 12px;
    min-height: 132px;
    padding: 10px;
    border-radius: var(--mpc-card-radius);
    border-color: color-mix(in srgb, var(--mpc-primary) 12%, rgba(226,232,240,.92));
    background:
        linear-gradient(135deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.91) 48%, color-mix(in srgb, var(--mpc-primary) 6%, #ffffff) 100%);
    box-shadow:
        0 18px 46px rgba(15,23,42,.105),
        0 1px 0 rgba(255,255,255,.85) inset;
    backdrop-filter: blur(14px) saturate(145%);
    -webkit-backdrop-filter: blur(14px) saturate(145%);
}

.item-card:hover,
.item-card:focus-within {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--mpc-primary) 36%, #e2e8f0);
    box-shadow:
        0 30px 72px rgba(15,23,42,.17),
        0 0 0 5px color-mix(in srgb, var(--mpc-primary) 7%, transparent),
        0 1px 0 rgba(255,255,255,.88) inset;
}

.item-card::before {
    inset: 18px auto 18px 10px;
    width: 5px;
    height: auto;
    border-radius: 999px;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--mpc-primary) 28%, #ffffff),
            var(--mpc-primary),
            var(--mpc-primary-2)
        );
    box-shadow: 0 12px 24px color-mix(in srgb, var(--mpc-primary) 20%, transparent);
}

.item-card::after {
    inset: auto auto -54px -46px;
    width: 132px;
    height: 132px;
    opacity: .70;
    background:
        radial-gradient(circle, color-mix(in srgb, var(--mpc-primary) 15%, transparent), transparent 66%);
    filter: blur(2px);
}

.item-card img,
.item-card .item-image,
.item-card [class*="image"] img {
    width: var(--mpc-card-image);
    height: var(--mpc-card-image);
    min-width: var(--mpc-card-image);
    align-self: center;
    border-radius: 24px;
    border: 1px solid rgba(255,255,255,.72);
    box-shadow:
        0 16px 34px rgba(15,23,42,.145),
        0 0 0 5px rgba(255,255,255,.50),
        inset 0 1px 0 rgba(255,255,255,.72);
}

.item-card .item-body,
.item-card [class*="body"],
.item-card .item-content,
.item-card [class*="content"] {
    justify-content: space-between;
    gap: 8px;
    padding: 7px 0 6px;
}

.item-card h3,
.item-card h4,
.item-card .item-title,
.item-card .item-name,
.item-card [class*="title"],
.item-card [class*="name"] {
    max-width: 100%;
    color: #0f172a;
    font-size: 15.4px;
    line-height: 1.32;
}

.item-card p,
.item-card .item-description,
.item-card [class*="desc"] {
    color: #667085;
    font-size: 12px;
    line-height: 1.58;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.item-card .price,
.item-card [class*="price"]:not(.old-price),
.item-card .current-price {
    min-height: 34px;
    padding: 6px 12px;
    color: #fff;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--mpc-primary) 94%, #ffffff),
            var(--mpc-primary-2)
        );
    border-color: rgba(255,255,255,.28);
    box-shadow:
        0 12px 26px color-mix(in srgb, var(--mpc-primary) 22%, transparent),
        inset 0 1px 0 rgba(255,255,255,.24);
    letter-spacing: -.01em;
}

.item-card .old-price {
    width: fit-content;
    min-height: 25px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(148,163,184,.10);
}

.item-card .allergen-chip,
.item-card .allergen-pill,
.item-card .nutrition-pill,
.item-card [class*="allergen"],
.item-card [class*="nutrition"] {
    min-height: 25px;
    padding: 4px 8px;
    color: color-mix(in srgb, var(--mpc-primary) 58%, #475569);
    background: color-mix(in srgb, var(--mpc-primary) 8%, rgba(255,255,255,.94));
    border-color: color-mix(in srgb, var(--mpc-primary) 16%, rgba(226,232,240,.9));
}

.item-card button,
.item-card .choice-btn {
    min-height: 41px;
    border-radius: 17px;
    font-size: 12px;
    box-shadow: 0 10px 22px rgba(15,23,42,.075);
}

.item-card button:not(.danger):not(.primary):not(.success):hover,
.item-card .choice-btn:not(.danger):not(.primary):not(.success):hover {
    color: var(--mpc-primary);
    border-color: color-mix(in srgb, var(--mpc-primary) 26%, #e2e8f0);
    background: color-mix(in srgb, var(--mpc-primary) 7%, #ffffff);
}

.item-card:not(:has(img)):not(:has(.item-image)) {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 14px 16px 14px 18px;
}

.item-card:not(:has(img)):not(:has(.item-image)) .item-body,
.item-card:not(:has(img)):not(:has(.item-image)) [class*="body"],
.item-card:not(:has(img)):not(:has(.item-image)) .item-content,
.item-card:not(:has(img)):not(:has(.item-image)) [class*="content"] {
    padding: 0;
}

/* ملخص السلة: شكل فاتورة أوضح */
.summary-box {
    isolation: isolate;
    border-radius: 36px;
    padding: 18px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.99), rgba(248,250,252,.96));
    border-color: color-mix(in srgb, var(--mpc-primary) 13%, rgba(226,232,240,.92));
    box-shadow:
        0 30px 76px rgba(15,23,42,.16),
        0 1px 0 rgba(255,255,255,.86) inset;
}

.summary-box::before {
    height: 7px;
    background:
        linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--mpc-primary) 24%, transparent) 12%,
            var(--mpc-primary) 48%,
            color-mix(in srgb, var(--mpc-primary) 26%, #fff) 72%,
            transparent 100%
        );
}

.summary-box::after {
    content: "";
    position: absolute;
    inset: 58px 18px auto 18px;
    height: 1px;
    border-top: 1px dashed color-mix(in srgb, var(--mpc-primary) 20%, rgba(148,163,184,.40));
    pointer-events: none;
}

.summary-box h3,
.summary-box h4,
.summary-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 34px;
    margin-bottom: 18px;
    padding-inline: 2px;
    color: #0f172a;
    font-size: 17.5px;
}

.summary-box .summary-item,
.summary-box [class*="summary-item"],
.summary-box [class*="cart-item"] {
    margin: 9px 0;
    padding: 13px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.92), rgba(248,250,252,.84));
    border-color: rgba(226,232,240,.86);
    box-shadow:
        0 12px 28px rgba(15,23,42,.075),
        inset 0 1px 0 rgba(255,255,255,.76);
}

.summary-box .summary-item::before,
.summary-box [class*="summary-item"]::before,
.summary-box [class*="cart-item"]::before {
    content: "";
    position: absolute;
    inset-block: 13px;
    inset-inline-start: 0;
    width: 4px;
    border-radius: 999px;
    background: linear-gradient(180deg, var(--mpc-primary), var(--mpc-primary-2));
    opacity: .75;
}

.summary-box .price,
.summary-box [class*="price"],
.summary-box .summary-item-price {
    color: var(--mpc-primary);
    background: color-mix(in srgb, var(--mpc-primary) 8%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--mpc-primary) 14%, #e2e8f0);
    border-radius: 999px;
    padding: 3px 8px;
}

.summary-box .summary-total,
.summary-box .cart-total,
.summary-box [class*="total"] {
    min-height: 54px;
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: 24px;
    color: #fff;
    background:
        linear-gradient(135deg,
            color-mix(in srgb, var(--mpc-primary) 96%, #ffffff),
            var(--mpc-primary-2)
        );
    border-color: rgba(255,255,255,.24);
    box-shadow:
        0 18px 42px color-mix(in srgb, var(--mpc-primary) 24%, transparent),
        inset 0 1px 0 rgba(255,255,255,.25);
}

.summary-box .summary-total *,
.summary-box .cart-total *,
.summary-box [class*="total"] * {
    color: inherit;
}

.summary-box .choice-btn,
.summary-box button {
    min-height: 46px;
    border-radius: 19px;
    font-size: 12.4px;
}

.summary-box .choice-btn + .choice-btn,
.summary-box button + button {
    margin-top: 6px;
}

/* السلة العائمة: Dock أوضح وأفخم */
.mobile-cart-dock.mpc-cart-dock,
.mobile-cart-dock {
    overflow: hidden;
    min-height: 68px;
    padding: 10px 12px;
    border-radius: var(--mpc-cart-radius);
    border-color: rgba(255,255,255,.42);
    background:
        radial-gradient(circle at 22% -20%, rgba(255,255,255,.34), transparent 34%),
        linear-gradient(135deg,
            color-mix(in srgb, var(--mpc-primary) 98%, #ffffff) 0%,
            color-mix(in srgb, var(--mpc-primary) 78%, #111827) 52%,
            var(--mpc-primary-2) 100%
        );
    box-shadow:
        0 30px 74px color-mix(in srgb, var(--mpc-primary) 34%, transparent),
        0 12px 28px rgba(2,6,23,.22),
        inset 0 1px 0 rgba(255,255,255,.28);
}

.mobile-cart-dock::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.78), transparent);
}

.mobile-cart-dock::after {
    content: "";
    position: absolute;
    inset: auto -18% -68% -18%;
    height: 86px;
    background: radial-gradient(closest-side, rgba(255,255,255,.30), transparent 72%);
    filter: blur(18px);
    pointer-events: none;
}

.mobile-cart-icon,
.mpc-cart-icon {
    width: 47px;
    height: 47px;
    min-width: 47px;
    border-radius: 19px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.14));
    border-color: rgba(255,255,255,.34);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.28),
        0 12px 28px rgba(2,6,23,.16);
}

.mobile-cart-count,
.mpc-cart-count {
    top: -7px;
    inset-inline-start: -7px;
    min-width: 23px;
    height: 23px;
    color: var(--mpc-primary);
    box-shadow: 0 9px 20px rgba(2,6,23,.22);
}

.mobile-cart-copy strong,
.mpc-cart-copy strong {
    font-size: 13.7px;
    letter-spacing: -.015em;
}

.mobile-cart-copy small,
.mpc-cart-copy small {
    color: rgba(255,255,255,.82);
    font-size: 11.3px;
}

.mobile-cart-total,
.mpc-cart-total {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
    font-size: 13.3px;
}

.mobile-cart-dock > .fa-chevron-left {
    position: relative;
    z-index: 1;
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255,255,255,.18);
    border: 1px solid rgba(255,255,255,.22);
    transition: transform .16s ease, background .16s ease;
}

.mobile-cart-dock:hover > .fa-chevron-left,
.mobile-cart-dock:focus-visible > .fa-chevron-left {
    transform: translateX(-2px);
    background: rgba(255,255,255,.24);
}

@media (max-width: 640px) {
    :root {
        --mpc-card-image: 88px;
    }

    .item-card {
        grid-template-columns: var(--mpc-card-image) minmax(0, 1fr);
        gap: 9px;
        min-height: 106px;
        margin: 9px 0;
        padding: 8px;
        border-radius: 25px;
    }

    .item-card::before {
        inset: 16px auto 16px 8px;
        width: 4px;
    }

    .item-card img,
    .item-card .item-image,
    .item-card [class*="image"] img {
        width: var(--mpc-card-image);
        height: var(--mpc-card-image);
        min-width: var(--mpc-card-image);
        border-radius: 20px;
        box-shadow:
            0 12px 24px rgba(15,23,42,.12),
            0 0 0 4px rgba(255,255,255,.48);
    }

    .item-card .item-body,
    .item-card [class*="body"],
    .item-card .item-content,
    .item-card [class*="content"] {
        gap: 6px;
        padding: 4px 0;
    }

    .item-card h3,
    .item-card h4,
    .item-card .item-title,
    .item-card .item-name,
    .item-card [class*="title"],
    .item-card [class*="name"] {
        font-size: 13.6px;
        line-height: 1.28;
    }

    .item-card p,
    .item-card .item-description,
    .item-card [class*="desc"] {
        -webkit-line-clamp: 1;
        font-size: 11.1px;
        line-height: 1.48;
    }

    .item-card .price,
    .item-card [class*="price"]:not(.old-price),
    .item-card .current-price {
        min-height: 29px;
        padding: 5px 9px;
        font-size: 11.7px;
    }

    .item-card button,
    .item-card .choice-btn {
        min-height: 36px;
        border-radius: 15px;
        font-size: 11.4px;
    }

    .item-card:not(:has(img)):not(:has(.item-image)) {
        padding: 12px 14px 12px 16px;
    }

    .summary-box {
        padding: 14px;
        border-radius: 29px;
    }

    .summary-box::after {
        inset: 53px 15px auto 15px;
    }

    .summary-box h3,
    .summary-box h4,
    .summary-title {
        min-height: 31px;
        margin-bottom: 15px;
        font-size: 15.4px;
    }

    .summary-box .summary-item,
    .summary-box [class*="summary-item"],
    .summary-box [class*="cart-item"] {
        padding: 11px;
        border-radius: 21px;
    }

    .summary-box .summary-total,
    .summary-box .cart-total,
    .summary-box [class*="total"] {
        min-height: 48px;
        padding: 10px 12px;
        border-radius: 21px;
        font-size: 12.8px;
    }

    .mobile-cart-dock.mpc-cart-dock,
    .mobile-cart-dock {
        min-height: 62px;
        padding: 8px 9px;
        border-radius: 25px;
        gap: 8px;
    }

    .mobile-cart-icon,
    .mpc-cart-icon {
        width: 41px;
        height: 41px;
        min-width: 41px;
        border-radius: 16px;
    }

    .mobile-cart-copy strong,
    .mpc-cart-copy strong {
        font-size: 12.6px;
    }

    .mobile-cart-total,
    .mpc-cart-total {
        min-height: 32px;
        padding: 6px 8px;
        font-size: 12.1px;
    }

    .mobile-cart-dock > .fa-chevron-left {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 12px;
    }
}

@media (max-width: 380px) {
    :root {
        --mpc-card-image: 78px;
    }

    .item-card {
        gap: 8px;
    }

    .item-card h3,
    .item-card h4,
    .item-card .item-title,
    .item-card .item-name,
    .item-card [class*="title"],
    .item-card [class*="name"] {
        font-size: 12.9px;
    }

    .mobile-cart-total,
    .mpc-cart-total {
        max-width: 92px;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* chat-menu-pro-cards-cart-premium-v2-end */


/* mp-chat-menu-typing-sequence-css-v1-start */
/*
 * Chat Menu Pro response sequence polish.
 * Adds real bot typing indicator, smoother ordered choices,
 * and subtle progressive item-card entrance.
 */

.mp-chat-typing-indicator {
    min-width: 54px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 10px;
    border-radius: 999px;
    background:
        linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.88));
    border: 1px solid color-mix(in srgb, var(--mpc-primary, var(--mp-primary, #8a3aff)) 14%, #e2e8f0);
    box-shadow:
        0 8px 18px rgba(15,23,42,.055),
        inset 0 1px 0 rgba(255,255,255,.70);
}

.mp-chat-typing-indicator span {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mpc-primary, var(--mp-primary, #8a3aff)) 74%, #94a3b8);
    opacity: .38;
    transform: translateY(0);
    animation: mpChatTypingDot 1s ease-in-out infinite;
}

.mp-chat-typing-indicator span:nth-child(2) {
    animation-delay: .14s;
}

.mp-chat-typing-indicator span:nth-child(3) {
    animation-delay: .28s;
}

@keyframes mpChatTypingDot {
    0%, 80%, 100% {
        opacity: .36;
        transform: translateY(0) scale(.94);
    }

    36% {
        opacity: 1;
        transform: translateY(-4px) scale(1.05);
    }
}

.quick-actions.is-visible .choice-btn,
.chat-shell .quick-actions.is-visible .choice-btn {
    animation: mpChoiceSequenceIn .24s cubic-bezier(.2,.8,.2,1) both;
    animation-delay: calc(var(--choice-index, 0) * 38ms);
}

@keyframes mpChoiceSequenceIn {
    from {
        opacity: 0;
        transform: translateY(8px) scale(.97);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chat-shell .item-card {
    animation: mpItemCardSequenceIn .22s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes mpItemCardSequenceIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(.986);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .mp-chat-typing-indicator span,
    .quick-actions.is-visible .choice-btn,
    .chat-shell .item-card {
        animation: none !important;
    }
}
/* mp-chat-menu-typing-sequence-css-v1-end */


/* mp-chat-menu-pro-stable-bg-fix-v1-start
 * Fix: keep the page background locked to viewport height.
 * Reason: body background gradients were resizing as chat messages increased page height.
 */
html {
    min-height: 100%;
    background: #f5f7fb;
}

body.mpc-body {
    min-height: 100svh;
    position: relative;
    background: #f5f7fb !important;
    overflow-x: hidden;
}

body.mpc-body::before,
body.mpc-body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    transform: translateZ(0);
}

body.mpc-body::before {
    z-index: 0;
    background:
        radial-gradient(circle at 12% -14%, color-mix(in srgb, var(--mpc-primary) 34%, transparent), transparent 34%),
        radial-gradient(circle at 92% 4%, rgba(255, 255, 255, .16), transparent 28%),
        linear-gradient(155deg, #050914 0%, #08111f 33%, color-mix(in srgb, var(--mpc-primary) 18%, #101827) 64%, #f4f7fb 64.2%, #f4f7fb 100%);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    -webkit-mask-image: none !important;
    mask-image: none !important;
}

body.mpc-body::after {
    z-index: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px),
        radial-gradient(circle at 72% 18%, color-mix(in srgb, var(--mpc-primary) 12%, transparent), transparent 24%),
        linear-gradient(180deg, transparent 0%, rgba(255,255,255,.82) 72%, rgba(255,255,255,.96) 100%);
    background-size: 38px 38px, 38px 38px, 100% 100%, 100% 100%;
    background-repeat: repeat, repeat, no-repeat, no-repeat;
}

.mpc-page {
    position: relative;
    z-index: 1;
    min-height: 100svh;
}

.mpc-chat-shell {
    position: relative;
}

@media (max-width: 640px) {
    body.mpc-body {
        background: #f5f7fb !important;
    }

    body.mpc-body::before {
        background:
            radial-gradient(circle at 14% -10%, color-mix(in srgb, var(--mpc-primary) 36%, transparent), transparent 35%),
            linear-gradient(165deg, #050914 0%, #08111f 39%, color-mix(in srgb, var(--mpc-primary) 16%, #101827) 61%, #f5f7fb 61.2%, #f5f7fb 100%);
        background-size: 100% 100%;
        background-repeat: no-repeat;
    }
}

@supports (height: 100dvh) {
    body.mpc-body,
    .mpc-page {
        min-height: 100dvh;
    }
}
/* mp-chat-menu-pro-stable-bg-fix-v1-end */


/* mp-chat-menu-pro-sequence-dedupe-v1-start
 * Prevent duplicated item-card animation from theme.css.
 * The body-scripts flow now controls card reveal timing.
 */
body.mpc-body .chat-shell .item-card {
    animation: none !important;
}
/* mp-chat-menu-pro-sequence-dedupe-v1-end */

/* mp-chat-menu-pro-item-card-price-row-v1-start
 * Item card refinement:
 * - Price capsule sits opposite item name.
 * - Old crossed price stays outside/before current price capsule.
 * - Better internal spacing to reduce visual crowding.
 * CSS-only; no JS/order/cart contracts changed.
 */
body.mpc-body .item-card {
    gap: 14px;
    padding: 12px;
}

body.mpc-body .item-card .item-info {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 7px 2px 7px 0;
}

body.mpc-body .item-card .item-top {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

body.mpc-body .item-card .item-title {
    min-width: 0;
    flex: 1 1 auto;
    padding-inline-end: 2px;
}

body.mpc-body .item-card .item-title h3 {
    margin: 0;
    color: #0f172a;
    font-size: 15.4px;
    font-weight: 1000;
    line-height: 1.35;
    letter-spacing: -.02em;
}

/* Reset broad [class*="price"] styles from touching the wrapper */
body.mpc-body .item-card .price-stack {
    flex: 0 0 auto;
    width: auto !important;
    min-width: max-content;
    max-width: 48%;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 5px 7px;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: inherit !important;
    line-height: 1.2;
}

/* Old price: outside capsule, before current price, light and crossed */
body.mpc-body .item-card .price-stack .old-price {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #94a3b8 !important;
    text-decoration: line-through;
    text-decoration-thickness: 1.4px;
    text-decoration-color: rgba(148, 163, 184, .82);
    font-size: 11.2px !important;
    font-weight: 900 !important;
    white-space: nowrap;
    opacity: .92;
}

/* Current price: light capsule, not heavy gradient */
body.mpc-body .item-card .price-stack .item-price {
    width: auto !important;
    min-width: max-content;
    min-height: 30px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 5px 10px !important;
    margin: 0 !important;
    border-radius: 999px !important;
    color: var(--mpc-primary) !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--mpc-primary) 8%, #ffffff),
            rgba(255,255,255,.92)
        ) !important;
    border: 1px solid color-mix(in srgb, var(--mpc-primary) 16%, #e2e8f0) !important;
    box-shadow:
        0 7px 16px rgba(15,23,42,.045),
        inset 0 1px 0 rgba(255,255,255,.78) !important;
    font-size: 12.6px !important;
    font-weight: 1000 !important;
    line-height: 1.15;
    white-space: nowrap;
}

body.mpc-body .item-card .price-stack .item-price .mp-money {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

body.mpc-body .item-card .price-stack .item-price .mp-riyal-icon {
    display: inline-flex;
    align-items: center;
    opacity: .92;
}

body.mpc-body .item-card p,
body.mpc-body .item-card .item-description,
body.mpc-body .item-card [class*="desc"] {
    margin-top: 1px;
    color: #64748b;
    font-size: 11.9px;
    font-weight: 760;
    line-height: 1.58;
}

body.mpc-body .item-card .item-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 1px;
}

body.mpc-body .item-card .item-chip,
body.mpc-body .item-card .allergen-icons {
    min-height: 24px;
}

/* Mobile: keep name and price on the same visual row without crowding */
@media (max-width: 640px) {
    body.mpc-body .item-card {
        gap: 11px;
        padding: 10px;
        min-height: 112px;
    }

    body.mpc-body .item-card .item-info {
        gap: 8px;
        padding: 4px 0;
    }

    body.mpc-body .item-card .item-top {
        gap: 8px;
    }

    body.mpc-body .item-card .item-title h3 {
        font-size: 13.7px;
        line-height: 1.34;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    body.mpc-body .item-card .price-stack {
        max-width: 46%;
        gap: 4px 6px;
    }

    body.mpc-body .item-card .price-stack .old-price {
        font-size: 10.3px !important;
    }

    body.mpc-body .item-card .price-stack .item-price {
        min-height: 28px !important;
        padding: 4px 8px !important;
        font-size: 11.4px !important;
    }

    body.mpc-body .item-card p,
    body.mpc-body .item-card .item-description,
    body.mpc-body .item-card [class*="desc"] {
        -webkit-line-clamp: 1;
        font-size: 11px;
        line-height: 1.48;
    }
}

@media (max-width: 380px) {
    body.mpc-body .item-card .item-top {
        gap: 7px;
    }

    body.mpc-body .item-card .price-stack {
        max-width: 50%;
    }

    body.mpc-body .item-card .price-stack .item-price {
        padding: 4px 7px !important;
        font-size: 10.9px !important;
    }
}
/* mp-chat-menu-pro-item-card-price-row-v1-end */

/* mp-chat-menu-pro-extras-final-list-v1-start
 * Final extras picker layout.
 * Target: clean single-column cards like the approved screenshot.
 */
body.mpc-body .extras-picker,
body.mpc-body [class*="extras-picker"] {
    width: min(620px, calc(100% - 18px)) !important;
    max-width: 620px !important;
    margin: 14px auto !important;
    padding: 14px 10px 10px !important;
    border-radius: 24px !important;
    background: rgba(255,255,255,.92) !important;
    border: 1px solid rgba(226,232,240,.82) !important;
    box-shadow: 0 18px 45px rgba(15,23,42,.10) !important;
}

body.mpc-body .extras-picker::before,
body.mpc-body [class*="extras-picker"]::before {
    height: 0 !important;
    display: none !important;
}

body.mpc-body .extras-picker-head {
    display: block !important;
    margin: 0 0 12px !important;
    padding: 0 10px 10px !important;
    text-align: right !important;
    border-bottom: 1px solid rgba(226,232,240,.70) !important;
}

body.mpc-body .extras-picker-head strong {
    display: block !important;
    margin: 0 !important;
    color: #111827 !important;
    font-size: 14px !important;
    font-weight: 1000 !important;
    line-height: 1.35 !important;
}

body.mpc-body .extras-picker-head small {
    display: block !important;
    margin-top: 3px !important;
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.35 !important;
}

body.mpc-body .extras-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
}

body.mpc-body .extra-option,
body.mpc-body [class*="extra-option"] {
    direction: rtl !important;
    width: 100% !important;
    min-height: 50px !important;
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    column-gap: 9px !important;
    row-gap: 1px !important;
    align-items: center !important;
    justify-content: initial !important;
    padding: 9px 10px !important;
    border-radius: 18px !important;
    border: 1px solid rgba(226,232,240,.86) !important;
    background: linear-gradient(180deg, #ffffff, #f8fafc) !important;
    color: #111827 !important;
    box-shadow: 0 7px 16px rgba(15,23,42,.045) !important;
    text-align: right !important;
    white-space: normal !important;
    transform: none !important;
}

body.mpc-body .extra-option:hover,
body.mpc-body .extra-option:focus-visible,
body.mpc-body [class*="extra-option"]:hover,
body.mpc-body [class*="extra-option"]:focus-visible {
    border-color: color-mix(in srgb, var(--mpc-primary) 24%, #e2e8f0) !important;
    box-shadow: 0 10px 22px rgba(15,23,42,.07) !important;
    outline: none !important;
}

body.mpc-body .extra-option.is-selected,
body.mpc-body [class*="extra-option"].is-selected {
    border-color: color-mix(in srgb, var(--mpc-primary) 45%, #e2e8f0) !important;
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--mpc-primary) 5%, #ffffff),
            #ffffff
        ) !important;
    box-shadow:
        0 10px 24px rgba(15,23,42,.07),
        0 0 0 2px color-mix(in srgb, var(--mpc-primary) 9%, transparent) !important;
}

body.mpc-body .extra-check {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    border-radius: 999px !important;
    color: transparent !important;
    background: #fff !important;
    border: 1px solid #dbe3ee !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.90) !important;
}

body.mpc-body .extra-option.is-selected .extra-check {
    color: #fff !important;
    background: linear-gradient(135deg, var(--mpc-primary), var(--mpc-primary-2)) !important;
    border-color: transparent !important;
}

body.mpc-body .extra-check i {
    font-size: 11px !important;
}

body.mpc-body .extra-copy {
    grid-column: 2 !important;
    grid-row: 1 / span 2 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 2px !important;
}

body.mpc-body .extra-copy strong {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 950 !important;
    line-height: 1.35 !important;
    text-align: right !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

body.mpc-body .extra-copy small {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: fit-content !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #64748b !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 10.8px !important;
    font-weight: 850 !important;
    line-height: 1.25 !important;
    white-space: nowrap !important;
}

body.mpc-body .extra-copy small .mp-money {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    color: inherit !important;
}

body.mpc-body .extras-picker-footer {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-top: 12px !important;
    padding: 10px 0 0 !important;
    border-top: 1px solid rgba(226,232,240,.72) !important;
}

body.mpc-body .extras-picker-footer .choice-btn {
    width: 100% !important;
    min-height: 42px !important;
    margin: 0 !important;
    border-radius: 16px !important;
    font-size: 12px !important;
    font-weight: 950 !important;
}

body.mpc-body .extras-picker-footer .choice-btn.primary {
    color: #fff !important;
    background: linear-gradient(135deg, var(--mpc-primary), var(--mpc-primary-2)) !important;
    border-color: transparent !important;
}

@media (max-width: 420px) {
    body.mpc-body .extras-picker,
    body.mpc-body [class*="extras-picker"] {
        width: calc(100% - 14px) !important;
        padding: 12px 9px 9px !important;
        border-radius: 22px !important;
    }

    body.mpc-body .extra-option,
    body.mpc-body [class*="extra-option"] {
        min-height: 48px !important;
        padding: 8px 9px !important;
        grid-template-columns: 26px minmax(0, 1fr) !important;
        column-gap: 8px !important;
    }

    body.mpc-body .extra-check {
        width: 23px !important;
        height: 23px !important;
        min-width: 23px !important;
    }

    body.mpc-body .extra-copy strong {
        font-size: 12.5px !important;
    }

    body.mpc-body .extra-copy small {
        font-size: 10.4px !important;
    }
}
/* mp-chat-menu-pro-extras-final-list-v1-end */


/* mp-chat-menu-pro-price-inline-brand-icons-v2-start */
/*
|--------------------------------------------------------------------------
| mp-chat-menu-pro-price-inline-brand-icons-v2
|--------------------------------------------------------------------------
| - السعر الحالي والسعر المشطوب على نفس السطر.
| - إبقاء مجموعة السعر بعيدة قليلًا عن حد البطاقة.
| - لون أيقونات السعرات والمسببات من لون المطعم.
| - أيقونات المسببات بدون كبسولة.
*/

/* Price group: current price + old price in one line */
body.mpc-body .item-card .item-info {
    position: relative !important;
    z-index: 2 !important;
    min-width: 0 !important;
    padding-inline-end: 10px !important;
}

body.mpc-body .item-card .item-top {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
}

body.mpc-body .item-card .item-title {
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

body.mpc-body .item-card .price-stack {
    position: relative !important;
    z-index: 3 !important;
    flex: 0 0 auto !important;
    max-width: 58% !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    margin-inline-start: 10px !important;
    margin-inline-end: 10px !important;
    white-space: nowrap !important;
}

body.mpc-body .item-card .price-stack .old-price,
body.mpc-body .item-card .old-price {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #94a3b8 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 11.2px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    text-decoration: line-through !important;
    text-decoration-thickness: 1.5px !important;
    white-space: nowrap !important;
    transform: none !important;
}

body.mpc-body .item-card .price-stack .item-price,
body.mpc-body .item-card .item-price {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    max-width: none !important;
    margin: 0 !important;
    white-space: nowrap !important;
    transform: none !important;
}

/* Brand color for calories icons */
body.mpc-body .item-card .item-meta [class*="calor"] i,
body.mpc-body .item-card .item-meta [class*="kcal"] i,
body.mpc-body .item-card .item-meta .fa-fire,
body.mpc-body .item-card .item-meta .fa-bolt,
body.mpc-body .item-card .item-meta .fa-weight-scale,
body.mpc-body .item-card .item-meta .calorie-icon,
body.mpc-body .item-card .item-meta .kcal-icon {
    color: var(--mpc-primary) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* Brand color for allergen icons only, without capsules */
body.mpc-body .item-card .allergen-icons {
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--mpc-primary) !important;
    background: transparent !important;
    box-shadow: none !important;
}

body.mpc-body .item-card .allergen-icon,
body.mpc-body .item-card .allergen-icon i,
body.mpc-body .item-card .allergen-icons i,
body.mpc-body .item-card .allergen-icons svg {
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--mpc-primary) !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 12px !important;
    line-height: 1 !important;
}

body.mpc-body .item-card .allergen-icons svg,
body.mpc-body .item-card .allergen-icons svg * {
    fill: currentColor !important;
    stroke: currentColor !important;
}

/* If a broad allergen rule creates a capsule, neutralize it inside item cards only */
body.mpc-body .item-card [class*="allergen"] {
    box-shadow: none !important;
}

body.mpc-body .item-card .allergen-icons[class*="allergen"],
body.mpc-body .item-card .allergen-icon[class*="allergen"] {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* Mobile tightening */
@media (max-width: 640px) {
    body.mpc-body .item-card .item-info {
        padding-inline-end: 8px !important;
    }

    body.mpc-body .item-card .item-top {
        gap: 8px !important;
    }

    body.mpc-body .item-card .price-stack {
        max-width: 60% !important;
        gap: 6px !important;
        margin-inline-start: 7px !important;
        margin-inline-end: 8px !important;
    }

    body.mpc-body .item-card .price-stack .old-price,
    body.mpc-body .item-card .old-price {
        font-size: 10.8px !important;
    }

    body.mpc-body .item-card .allergen-icons {
        gap: 4px !important;
    }

    body.mpc-body .item-card .allergen-icon,
    body.mpc-body .item-card .allergen-icon i,
    body.mpc-body .item-card .allergen-icons i {
        font-size: 11.5px !important;
    }
}
/* mp-chat-menu-pro-price-inline-brand-icons-v2-end */

/* mp-chat-menu-pro-social-identity-v15 */
.mpc-socials {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    max-width: 100% !important;
    padding: 6px !important;
    overflow: visible !important;
    scrollbar-width: none !important;
    background: rgba(255, 255, 255, .44) !important;
    border: 1px solid rgba(255, 255, 255, .52) !important;
    border-radius: 23px !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .58) !important;
}

.mpc-social {
    --mp-social-color: var(--mpc-primary);
    --mp-social-soft: color-mix(in srgb, var(--mp-social-color) 9%, #ffffff);
    --mp-social-ring: color-mix(in srgb, var(--mp-social-color) 28%, transparent);

    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 42px !important;
    width: 42px !important;
    min-width: 42px !important;
    max-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 !important;
    margin: 0 !important;
    color: var(--mp-social-color) !important;
    background: var(--mp-social-soft) !important;
    border: 1px solid var(--mp-social-ring) !important;
    border-radius: 50% !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, .08) !important;
    text-decoration: none !important;
    overflow: hidden !important;
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease !important;
}

.mpc-social i {
    display: block !important;
    color: currentColor !important;
    font-size: 17px !important;
    line-height: 1 !important;
}

.mpc-social:hover,
.mpc-social:focus-visible {
    transform: translateY(-2px) scale(1.03) !important;
    color: #ffffff !important;
    background: var(--mp-social-color) !important;
    border-color: var(--mp-social-color) !important;
    box-shadow: 0 15px 34px color-mix(in srgb, var(--mp-social-color) 30%, transparent) !important;
    outline: none !important;
}

.mpc-social.google {
    --mp-social-color: #d99a00;
}

.mpc-social.map {
    --mp-social-color: #ef4444;
}

.mpc-social.snapchat {
    --mp-social-color: #111827;
    --mp-social-soft: #fffc00;
    --mp-social-ring: rgba(234, 179, 8, .36);
}

.mpc-social.snapchat:hover,
.mpc-social.snapchat:focus-visible {
    color: #111827 !important;
    background: #fffc00 !important;
    border-color: #eab308 !important;
}

.mpc-social.instagram {
    --mp-social-color: #e1306c;
}

.mpc-social.instagram:not(:hover):not(:focus-visible) i {
    background: linear-gradient(135deg, #feda75, #fa7e1e, #e1306c, #833ab4, #405de6) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.mpc-social.instagram:hover i,
.mpc-social.instagram:focus-visible i {
    color: #ffffff !important;
    -webkit-text-fill-color: currentColor !important;
}

.mpc-social.tiktok {
    --mp-social-color: #111827;
    --mp-social-soft: rgba(37, 244, 238, .10);
    --mp-social-ring: rgba(254, 44, 85, .30);
}

.mpc-social.tiktok:not(:hover):not(:focus-visible) i {
    text-shadow: -1px 0 #25f4ee, 1px 0 #fe2c55 !important;
}

.mpc-social.x {
    --mp-social-color: #111827;
}

.mpc-social.phone {
    --mp-social-color: #16a34a;
}

.mpc-social.whatsapp {
    --mp-social-color: #25d366;
}

@media (max-width: 640px) {
    .mpc-socials {
        justify-content: center !important;
        gap: 7px !important;
        max-width: 100% !important;
    }

    .mpc-social {
        flex-basis: 38px !important;
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 38px !important;
        min-height: 38px !important;
        max-height: 38px !important;
    }

    .mpc-social i {
        font-size: 16px !important;
    }
}
/* /mp-chat-menu-pro-social-identity-v15 */


/* mp-plan3-phone-verified-ui-v2-start */
body.mpc-body .mp-plan3-phone-verify-message {
    width: min(620px, calc(100% - 16px));
    margin-inline: auto;
}

body.mpc-body .mp-plan3-phone-verify-message .bubble {
    width: 100%;
    max-width: none;
    padding: 14px;
    border-radius: 20px;
}

body.mpc-body .mp-plan3-phone-verify-card {
    display: grid;
    gap: 10px;
}

body.mpc-body .mp-plan3-phone-verify-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

body.mpc-body .mp-plan3-phone-verify-head > div {
    display: grid;
    gap: 3px;
}

body.mpc-body .mp-plan3-phone-verify-head strong {
    color: #111827;
    font-size: 14px;
    font-weight: 850;
}

body.mpc-body .mp-plan3-phone-verify-head small {
    color: #64748b;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.55;
}

body.mpc-body .mp-plan3-phone-verify-head > i {
    color: var(--mpc-primary);
    font-size: 18px;
}

body.mpc-body .mp-plan3-phone-input-row,
body.mpc-body .mp-plan3-code-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

body.mpc-body .mp-plan3-phone-input-row .form-control,
body.mpc-body .mp-plan3-code-row .form-control {
    width: 100%;
    min-width: 0;
    height: 44px;
    margin: 0;
    border-radius: 13px;
}

body.mpc-body .mp-plan3-phone-check-button,
body.mpc-body .mp-plan3-code-row .choice-btn {
    min-width: 88px;
    min-height: 44px;
    margin: 0;
    padding-inline: 15px;
    border-radius: 13px;
    white-space: nowrap;
}

body.mpc-body .mp-plan3-phone-verified-badge {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 0 13px;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 13px;
    font-size: 11.5px;
    font-weight: 850;
    white-space: nowrap;
}

body.mpc-body .mp-plan3-phone-secondary-actions {
    display: flex;
    justify-content: flex-end;
}

body.mpc-body .mp-plan3-phone-change-button,
body.mpc-body .mp-plan3-resend-code-button {
    border: 0;
    padding: 2px 0;
    color: #64748b;
    background: transparent;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 800;
    cursor: pointer;
}

body.mpc-body .mp-plan3-code-section {
    display: grid;
    gap: 8px;
    padding-top: 2px;
}

body.mpc-body .mp-final-checkout-actions .mp-whatsapp-submit:disabled,
body.mpc-body .mp-final-checkout-actions .mp-whatsapp-submit.is-phone-unverified {
    opacity: .48;
    cursor: not-allowed;
    filter: grayscale(.22);
    box-shadow: none !important;
}

@media (max-width: 420px) {
    body.mpc-body .mp-plan3-phone-input-row,
    body.mpc-body .mp-plan3-code-row {
        grid-template-columns: minmax(0, 1fr) 78px;
    }

    body.mpc-body .mp-plan3-phone-check-button,
    body.mpc-body .mp-plan3-code-row .choice-btn {
        min-width: 78px;
        padding-inline: 9px;
        font-size: 11px;
    }

    body.mpc-body .mp-plan3-phone-verified-badge {
        padding-inline: 9px;
        font-size: 10.7px;
    }
}
/* mp-plan3-phone-verified-ui-v2-end */

/* mp-chat-menu-pro-loyalty-cart-v1-style-start */
body.mpc-body .mp-chat-coupon-message,
body.mpc-body .mp-chat-loyalty-message {
    width: min(620px, calc(100% - 16px));
    margin-inline: auto;
}

body.mpc-body .mp-chat-loyalty-message .bubble {
    width: 100%;
    max-width: none;
    padding: 0;
    overflow: hidden;
    border-radius: 20px;
    background: transparent;
    box-shadow: none;
}

body.mpc-body .mp-chat-loyalty-card {
    display: grid;
    gap: 13px;
    padding: 15px;
    color: #111827;
    background:
        radial-gradient(circle at 100% 0, color-mix(in srgb, var(--mpc-primary) 11%, transparent), transparent 38%),
        linear-gradient(145deg, #ffffff, #fff8fc);
    border: 1px solid color-mix(in srgb, var(--mpc-primary) 24%, #e2e8f0);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .065);
}

body.mpc-body .mp-chat-loyalty-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

body.mpc-body .mp-chat-loyalty-head > div {
    display: grid;
    gap: 3px;
    min-width: 0;
}

body.mpc-body .mp-chat-loyalty-kicker {
    width: fit-content;
    color: var(--mpc-primary);
    font-size: 10.5px;
    font-weight: 900;
}

body.mpc-body .mp-chat-loyalty-head strong {
    color: #111827;
    font-size: 14.5px;
    font-weight: 900;
}

body.mpc-body .mp-chat-loyalty-head small {
    color: #64748b;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 1.55;
}

body.mpc-body .mp-chat-loyalty-reward {
    flex: 0 0 auto;
    padding: 7px 10px;
    color: #7c2d12;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 900;
    white-space: nowrap;
}

body.mpc-body .mp-chat-loyalty-locked {
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 12px;
    color: #475569;
    background: rgba(248, 250, 252, .92);
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    font-size: 11.7px;
    font-weight: 750;
    line-height: 1.55;
}

body.mpc-body .mp-chat-loyalty-locked i {
    color: var(--mpc-primary);
    font-size: 17px;
}

body.mpc-body .mp-chat-loyalty-card.is-loading .mp-chat-loyalty-locked i {
    animation: mpChatLoyaltyPulse 1.1s ease-in-out infinite;
}

body.mpc-body .mp-chat-loyalty-card.is-error .mp-chat-loyalty-locked {
    color: #b91c1c;
    background: #fff7f7;
    border-color: #fecaca;
}

body.mpc-body .mp-chat-loyalty-card.is-error .mp-chat-loyalty-locked i {
    color: #dc2626;
}

body.mpc-body .mp-chat-loyalty-details {
    display: grid;
    gap: 13px;
}

body.mpc-body .mp-chat-loyalty-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

body.mpc-body .mp-chat-loyalty-stats > div {
    min-width: 0;
    display: grid;
    gap: 2px;
    padding: 10px 9px;
    text-align: center;
    background: rgba(255, 255, 255, .88);
    border: 1px solid #f1f5f9;
    border-radius: 14px;
}

body.mpc-body .mp-chat-loyalty-stats span,
body.mpc-body .mp-chat-loyalty-stats small {
    overflow: hidden;
    color: #64748b;
    font-size: 9.7px;
    font-weight: 750;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.mpc-body .mp-chat-loyalty-stats strong {
    color: #111827;
    font-size: 18px;
    font-weight: 950;
    line-height: 1.15;
}

body.mpc-body .mp-chat-loyalty-progress {
    display: grid;
    gap: 7px;
}

body.mpc-body .mp-chat-loyalty-progress-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: #64748b;
    font-size: 10.7px;
    font-weight: 800;
}

body.mpc-body .mp-chat-loyalty-progress-head strong {
    color: #334155;
    font-size: 10.7px;
}

body.mpc-body .mp-chat-loyalty-progress-track {
    height: 8px;
    overflow: hidden;
    background: #f1f5f9;
    border-radius: 999px;
}

body.mpc-body .mp-chat-loyalty-progress-track span {
    height: 100%;
    display: block;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mpc-primary), #a855f7);
    transition: width .35s ease;
}

@keyframes mpChatLoyaltyPulse {
    0%, 100% { opacity: .52; transform: scale(.94); }
    50% { opacity: 1; transform: scale(1.06); }
}

@media (max-width: 420px) {
    body.mpc-body .mp-chat-loyalty-card {
        padding: 13px;
    }

    body.mpc-body .mp-chat-loyalty-stats {
        gap: 6px;
    }

    body.mpc-body .mp-chat-loyalty-stats > div {
        padding-inline: 6px;
    }

    body.mpc-body .mp-chat-loyalty-stats strong {
        font-size: 16px;
    }
}
/* mp-chat-menu-pro-loyalty-cart-v1-style-end */

/* mp-chat-menu-pro-unified-cart-services-v2-style-start */
body.mpc-body .mpcart-services {
    display: grid;
    gap: 11px;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed color-mix(in srgb, var(--mpc-primary) 22%, #cbd5e1);
}

body.mpc-body .mpcart-services-title {
    display: grid;
    gap: 2px;
    padding-inline: 2px;
}

body.mpc-body .mpcart-services-title > span {
    color: #0f172a;
    font-size: 13.5px;
    font-weight: 950;
}

body.mpc-body .mpcart-services-title > small {
    color: #64748b;
    font-size: 10.8px;
    font-weight: 650;
}

body.mpc-body .mpcart-service-panel {
    min-width: 0;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--mpc-primary) 16%, #e2e8f0);
    border-radius: 19px;
    background: linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--mpc-primary) 3%, #ffffff));
    box-shadow: 0 8px 22px rgba(15, 23, 42, .045);
}

body.mpc-body .mpcart-service-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

body.mpc-body .mpcart-service-head > div {
    display: grid;
    gap: 2px;
    min-width: 0;
}

body.mpc-body .mpcart-service-kicker {
    width: fit-content;
    color: var(--mpc-primary);
    font-size: 9.8px;
    font-weight: 950;
}

body.mpc-body .mpcart-service-head strong {
    color: #111827;
    font-size: 13.5px;
    font-weight: 950;
}

body.mpc-body .mpcart-service-head small {
    color: #64748b;
    font-size: 10.7px;
    font-weight: 650;
    line-height: 1.5;
}

body.mpc-body .mpcart-service-icon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mpc-primary);
    background: color-mix(in srgb, var(--mpc-primary) 9%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--mpc-primary) 16%, #e2e8f0);
    border-radius: 12px;
}

body.mpc-body .mpcart-coupon-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
}

body.mpc-body .mpcart-coupon-row .form-control {
    width: 100%;
    min-width: 0;
    height: 43px;
    margin: 0;
    text-transform: uppercase;
    border-radius: 13px;
}

body.mpc-body .summary-box .mpcart-inline-button {
    min-width: 82px;
    min-height: 43px;
    margin: 0 !important;
    padding: 0 13px;
    border: 0;
    border-radius: 13px;
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 900;
    cursor: pointer;
}

body.mpc-body .summary-box .mpcart-inline-button.is-primary {
    color: #fff;
    background: linear-gradient(135deg, var(--mpc-primary), var(--mpc-primary-2));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--mpc-primary) 20%, transparent);
}

body.mpc-body .summary-box .mpcart-inline-button:disabled {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}

body.mpc-body .mpcart-coupon-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
}

body.mpc-body .mpcart-service-status {
    color: #64748b;
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.45;
}

body.mpc-body .mpcart-service-status.success { color: #15803d; }
body.mpc-body .mpcart-service-status.danger { color: #b91c1c; }

body.mpc-body .summary-box .mpcart-text-button {
    min-height: 0;
    margin: 0 !important;
    padding: 0;
    border: 0;
    border-radius: 0;
    color: #64748b;
    background: transparent;
    box-shadow: none;
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 850;
    cursor: pointer;
    white-space: nowrap;
}

body.mpc-body .summary-box .mpcart-text-button.is-danger { color: #dc2626; }

body.mpc-body .mpcart-applied-coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 9px;
    padding: 8px 10px;
    color: #15803d;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    font-size: 10.7px;
    font-weight: 900;
}

body.mpc-body .mpcart-phone-panel {
    padding: 13px;
}

body.mpc-body #mpCartPhoneVerificationMount .mp-plan3-phone-verify-card {
    gap: 9px;
}

body.mpc-body #mpCartPhoneVerificationMount .mp-plan3-phone-verify-head > i {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mpc-primary) 9%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--mpc-primary) 16%, #e2e8f0);
    border-radius: 12px;
}

body.mpc-body #mpCartPhoneVerificationMount .notice {
    margin: 0;
    padding: 9px 10px;
    border-radius: 12px;
    font-size: 10.7px;
}

body.mpc-body .mpcart-loyalty-panel {
    padding: 0;
    overflow: hidden;
}

body.mpc-body .mpcart-loyalty-panel .mp-chat-loyalty-card {
    padding: 13px;
    border: 0;
    border-radius: 18px;
    box-shadow: none;
}

body.mpc-body .mpcart-loyalty-panel.is-disabled {
    opacity: .82;
}

body.mpc-body .summary-box .mp-plan3-phone-check-button,
body.mpc-body .summary-box .mp-plan3-code-row .choice-btn {
    margin: 0 !important;
}

body.mpc-body .summary-box button + button {
    margin-top: 0;
}

@media (max-width: 420px) {
    body.mpc-body .mpcart-service-panel {
        padding: 11px;
        border-radius: 17px;
    }

    body.mpc-body .mpcart-coupon-row {
        grid-template-columns: minmax(0, 1fr) 74px;
    }

    body.mpc-body .summary-box .mpcart-inline-button {
        min-width: 74px;
        padding-inline: 8px;
        font-size: 10.7px;
    }

    body.mpc-body .mpcart-coupon-meta {
        align-items: flex-start;
    }

    body.mpc-body .mp-chat-loyalty-stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}
/* mp-chat-menu-pro-unified-cart-services-v2-style-end */

/* mp-chat-menu-pro-compact-cart-cards-v3-start */
body.mpc-body .summary-box .mpcart-services,
body.mpc-body .summary-box .mpcart-services input,
body.mpc-body .summary-box .mpcart-services button,
body.mpc-body .summary-box .mpcart-services strong,
body.mpc-body .summary-box .mpcart-services span,
body.mpc-body .summary-box .mpcart-services small {
    font-family: inherit;
}

body.mpc-body .mpcart-services {
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
}

body.mpc-body .mpcart-services-title {
    padding-inline: 1px;
}

body.mpc-body .mpcart-services-title > span {
    font-size: 12.5px;
    font-weight: 900;
    line-height: 1.35;
}

body.mpc-body .mpcart-service-panel {
    padding: 10px;
    border-radius: 15px;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .035);
}

body.mpc-body .mpcart-service-head,
body.mpc-body .mp-plan3-phone-verify-head {
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    margin-bottom: 8px;
}

body.mpc-body .mpcart-service-head.is-compact,
body.mpc-body .mp-plan3-phone-verify-head.is-compact {
    min-height: 28px;
}

body.mpc-body .mpcart-card-heading {
    min-width: 0;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 7px !important;
    direction: rtl;
}

body.mpc-body .mpcart-card-heading strong,
body.mpc-body .mpcart-service-head .mpcart-card-heading strong,
body.mpc-body .mp-plan3-phone-verify-head .mpcart-card-heading strong,
body.mpc-body .mp-chat-loyalty-head .mpcart-card-heading strong {
    min-width: 0;
    color: #111827;
    font-size: 12.5px;
    font-weight: 900;
    line-height: 1.35;
}

body.mpc-body .mpcart-card-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--mpc-primary);
    background: color-mix(in srgb, var(--mpc-primary) 8%, #ffffff);
    border: 1px solid color-mix(in srgb, var(--mpc-primary) 15%, #e2e8f0);
    border-radius: 9px;
    font-size: 12px;
    line-height: 1;
}

body.mpc-body .mpcart-coupon-row,
body.mpc-body .mp-plan3-phone-input-row,
body.mpc-body .mp-plan3-code-row {
    gap: 6px;
}

body.mpc-body .mpcart-coupon-row .form-control,
body.mpc-body .mp-plan3-phone-input-row .form-control,
body.mpc-body .mp-plan3-code-row .form-control {
    height: 38px;
    min-height: 38px;
    padding: 0 11px;
    border-radius: 11px;
    font-size: 11.5px;
    font-weight: 650;
    line-height: 38px;
}

body.mpc-body .summary-box .mpcart-inline-button,
body.mpc-body .mp-plan3-phone-check-button,
body.mpc-body .mp-plan3-code-row .choice-btn {
    min-width: 72px;
    min-height: 38px;
    height: 38px;
    padding-inline: 10px;
    border-radius: 11px;
    font-size: 10.8px;
    font-weight: 850;
}

body.mpc-body .mp-plan3-phone-verified-badge {
    min-height: 38px;
    height: 38px;
    padding-inline: 10px;
    border-radius: 11px;
    font-size: 10.6px;
}

body.mpc-body .mpcart-coupon-meta {
    gap: 7px;
    margin-top: 6px;
}

body.mpc-body .mpcart-service-status,
body.mpc-body .summary-box .mpcart-text-button,
body.mpc-body .mp-plan3-phone-change-button,
body.mpc-body .mp-plan3-resend-code-button {
    font-size: 10px;
    line-height: 1.4;
}

body.mpc-body #mpCartPhoneVerificationMount .mp-plan3-phone-verify-card {
    gap: 7px;
}

body.mpc-body #mpCartPhoneVerificationMount .notice {
    padding: 7px 9px;
    border-radius: 10px;
    font-size: 10px;
    line-height: 1.45;
}

body.mpc-body .mpcart-phone-panel {
    padding: 10px;
}

body.mpc-body .mpcart-loyalty-panel .mp-chat-loyalty-card {
    gap: 9px;
    padding: 10px;
    border-radius: 14px;
}

body.mpc-body .mp-chat-loyalty-head {
    align-items: center;
    gap: 8px;
}

body.mpc-body .mp-chat-loyalty-reward {
    padding: 5px 8px;
    font-size: 9.6px;
}

body.mpc-body .mp-chat-loyalty-locked {
    min-height: 38px;
    gap: 7px;
    padding: 8px 9px;
    border-radius: 11px;
    font-size: 10.5px;
    line-height: 1.45;
}

body.mpc-body .mp-chat-loyalty-locked i {
    font-size: 14px;
}

body.mpc-body .mp-chat-loyalty-details {
    gap: 9px;
}

body.mpc-body .mp-chat-loyalty-stats {
    gap: 6px;
}

body.mpc-body .mp-chat-loyalty-stats > div {
    gap: 1px;
    padding: 7px 5px;
    border-radius: 10px;
}

body.mpc-body .mp-chat-loyalty-stats span,
body.mpc-body .mp-chat-loyalty-stats small {
    font-size: 8.8px;
}

body.mpc-body .mp-chat-loyalty-stats strong {
    font-size: 15px;
}

body.mpc-body .mp-chat-loyalty-progress {
    gap: 5px;
}

body.mpc-body .mp-chat-loyalty-progress-head,
body.mpc-body .mp-chat-loyalty-progress-head strong {
    font-size: 9.6px;
}

body.mpc-body .mp-chat-loyalty-progress-track {
    height: 6px;
}

@media (max-width: 420px) {
    body.mpc-body .mpcart-service-panel,
    body.mpc-body .mpcart-phone-panel,
    body.mpc-body .mpcart-loyalty-panel .mp-chat-loyalty-card {
        padding: 9px;
        border-radius: 14px;
    }

    body.mpc-body .mpcart-coupon-row,
    body.mpc-body .mp-plan3-phone-input-row,
    body.mpc-body .mp-plan3-code-row {
        grid-template-columns: minmax(0, 1fr) 68px;
    }

    body.mpc-body .summary-box .mpcart-inline-button,
    body.mpc-body .mp-plan3-phone-check-button,
    body.mpc-body .mp-plan3-code-row .choice-btn {
        min-width: 68px;
        padding-inline: 7px;
        font-size: 10.2px;
    }
}
/* mp-chat-menu-pro-compact-cart-cards-v3-end */

/* mp-chat-menu-pro-cart-layout-v5-start */
body.mpc-body #liveOrderSummary[data-summary-ui="receipt-v3"] .mpcart-name-row {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    direction: rtl;
}

body.mpc-body #liveOrderSummary[data-summary-ui="receipt-v3"] .mpcart-name-row .mpcart-name {
    min-width: 0;
    flex: 1 1 auto;
}

body.mpc-body #liveOrderSummary[data-summary-ui="receipt-v3"] .mpcart-name-row .mpcart-amount {
    min-height: 26px;
    flex: 0 0 auto;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--mpc-primary) 15%, #e2e8f0);
    border-radius: 999px;
    color: var(--mpc-primary) !important;
    background: color-mix(in srgb, var(--mpc-primary) 7%, #ffffff);
    font-size: 11.8px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
    white-space: nowrap;
}

body.mpc-body #liveOrderSummary[data-summary-ui="receipt-v3"] .mpcart-control-row {
    justify-content: flex-start !important;
}

body.mpc-body #liveOrderSummary[data-summary-ui="receipt-v3"] .mpcart-control-row .mpcart-qty {
    order: 1 !important;
    margin-inline-start: 0 !important;
}

body.mpc-body #liveOrderSummary[data-summary-ui="receipt-v3"] .mpcart-control-row .mpcart-delete {
    order: 2 !important;
}

@media (max-width: 420px) {
    body.mpc-body #liveOrderSummary[data-summary-ui="receipt-v3"] .mpcart-name-row {
        gap: 7px;
    }

    body.mpc-body #liveOrderSummary[data-summary-ui="receipt-v3"] .mpcart-name-row .mpcart-amount {
        min-height: 24px;
        padding-inline: 7px;
        font-size: 11.2px !important;
    }
}
/* mp-chat-menu-pro-cart-layout-v5-end */

/* mp-chat-menu-pro-category-scroll-v1-start */
/*
 * Touch-friendly horizontal category scrolling.
 * Applies to the category choices inside chat and to the optional static rail.
 */
body.mpc-body .quick-actions.category-selector-actions,
body.mpc-body .mpc-category-rail {
    flex-flow: row nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    white-space: nowrap !important;
    scroll-behavior: smooth !important;
    scroll-padding-inline: 12px !important;
    overscroll-behavior-x: contain !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x pan-y !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

body.mpc-body .quick-actions.category-selector-actions {
    width: 100% !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    padding: 4px 2px 7px !important;
    margin: 5px 0 2px !important;
}

body.mpc-body .mpc-category-rail {
    padding-block: 8px !important;
}

body.mpc-body .quick-actions.category-selector-actions::-webkit-scrollbar,
body.mpc-body .mpc-category-rail::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

body.mpc-body .quick-actions.category-selector-actions .choice-btn,
body.mpc-body .mpc-category-pill {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: max-content !important;
    white-space: nowrap !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-touch-callout: none !important;
    touch-action: pan-x pan-y !important;
}

body.mpc-body .quick-actions.category-selector-actions.is-pointer-dragging,
body.mpc-body .mpc-category-rail.is-pointer-dragging {
    cursor: grabbing !important;
    scroll-behavior: auto !important;
}

@media (hover: hover) and (pointer: fine) {
    body.mpc-body .quick-actions.category-selector-actions,
    body.mpc-body .mpc-category-rail {
        cursor: grab;
    }
}

@media (max-width: 520px) {
    body.mpc-body .quick-actions.category-selector-actions {
        gap: 7px !important;
        padding-bottom: 6px !important;
    }

    body.mpc-body .quick-actions.category-selector-actions .choice-btn {
        min-height: 36px !important;
        padding: 8px 13px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.mpc-body .quick-actions.category-selector-actions,
    body.mpc-body .mpc-category-rail {
        scroll-behavior: auto !important;
    }
}
/* mp-chat-menu-pro-category-scroll-v1-end */