/* MajidFood — shared styles for all four apps. */

.mf-login-bg {
    min-height: 100vh;
    background: linear-gradient(160deg, #FF5A00 0%, #FF7A33 45%, #FFB27D 100%);
}

.mf-login-logo {
    width: 76px;
    height: 76px;
    border-radius: 22px;
    background: #FFF1E8;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    box-shadow: 0 8px 24px rgba(255, 90, 0, 0.25);
}

/* Restaurant browse card */
.mf-rest-card {
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    overflow: hidden;
    height: 100%;
}

.mf-rest-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(36, 31, 27, 0.12) !important;
}

.mf-rest-banner {
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
}

.mf-rest-closed {
    filter: grayscale(1);
    opacity: .75;
}

.mf-closed-ribbon {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(36, 31, 27, .82);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

/* Menu item row */
.mf-menu-item {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    padding: 12px 14px;
    display: flex;
    gap: 12px;
    align-items: center;
    transition: border-color .15s ease, background .15s ease;
    height: 100%;
}

.mf-menu-item:hover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
}

.mf-menu-emoji {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--mud-palette-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
}

/* Sticky cart summary on the restaurant page */
.mf-cart-panel {
    position: sticky;
    top: 84px;
}

/* Big tracking status banner */
.mf-track-hero {
    border-radius: 18px;
    padding: 22px;
    background: linear-gradient(135deg, #FF5A00, #FF8A4D);
    color: #fff;
}

.mf-track-hero .mud-typography {
    color: #fff;
}

/* ---------- Motion ---------- */

@keyframes mfFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes mfSlideUp {
    from {
        opacity: 0;
        transform: translateY(60px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes mfPop {
    0% { transform: scale(1); }
    45% { transform: scale(1.28); }
    100% { transform: scale(1); }
}

@keyframes mfSpin {
    to { transform: rotate(360deg); }
}

@keyframes mfDots {
    0%, 80%, 100% { transform: scale(.55); opacity: .35; }
    40% { transform: scale(1); opacity: 1; }
}

/* Entrance animation for cards and rows, with a gentle stagger. */
.mf-rest-card, .mf-promo-card, .mf-again, .mf-menu-item, .mf-track-hero,
.mf-cuisine-item, .mud-paper.pa-4, .mud-paper.pa-5 {
    animation: mfFadeUp .38s cubic-bezier(.21, .8, .35, 1) both;
}

.mud-grid > .mud-grid-item:nth-child(1) > * { animation-delay: .02s; }
.mud-grid > .mud-grid-item:nth-child(2) > * { animation-delay: .06s; }
.mud-grid > .mud-grid-item:nth-child(3) > * { animation-delay: .10s; }
.mud-grid > .mud-grid-item:nth-child(4) > * { animation-delay: .14s; }
.mud-grid > .mud-grid-item:nth-child(5) > * { animation-delay: .18s; }
.mud-grid > .mud-grid-item:nth-child(6) > * { animation-delay: .22s; }
.mud-grid > .mud-grid-item:nth-child(7) > * { animation-delay: .26s; }
.mud-grid > .mud-grid-item:nth-child(8) > * { animation-delay: .30s; }
.mud-grid > .mud-grid-item:nth-child(9) > * { animation-delay: .34s; }

.mf-hscroll > *:nth-child(1) { animation-delay: .02s; }
.mf-hscroll > *:nth-child(2) { animation-delay: .05s; }
.mf-hscroll > *:nth-child(3) { animation-delay: .08s; }
.mf-hscroll > *:nth-child(4) { animation-delay: .11s; }
.mf-hscroll > *:nth-child(5) { animation-delay: .14s; }
.mf-hscroll > *:nth-child(6) { animation-delay: .17s; }
.mf-hscroll > *:nth-child(7) { animation-delay: .20s; }
.mf-hscroll > *:nth-child(8) { animation-delay: .23s; }

.mf-basket-bar {
    animation: mfSlideUp .35s cubic-bezier(.21, .8, .35, 1) both;
}

.mf-fav-btn:active .mud-icon-root,
.mf-nav-item:active .mud-icon-root {
    animation: mfPop .3s ease;
}

.mf-cuisine-item.selected .mf-cuisine-circle {
    animation: mfPop .3s ease;
}

/* ---------- Branded page loader ---------- */

@keyframes mfGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes mfBlobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(28px, -22px) scale(1.12); }
    66% { transform: translate(-20px, 18px) scale(.92); }
}

@keyframes mfShimmer {
    to { background-position: 200% center; }
}

/* Fullscreen splash — covers everything, including the app bar and bottom nav.
   Light, appetizing gradient that gently breathes. */
.mf-loader-page {
    position: fixed;
    inset: 0;
    z-index: 1450;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 100vh;
    min-height: 100dvh;
    background: linear-gradient(140deg, #FFF9F4 0%, #FFEBDA 30%, #FFD3AE 62%, #FFA766 100%);
    background-size: 200% 200%;
    animation: mfGradientShift 6s ease infinite;
}

/* Food emojis floating up through the splash. */
@keyframes mfFloatUp {
    0% {
        transform: translateY(55vh) rotate(-10deg) scale(.85);
        opacity: 0;
    }
    12% {
        opacity: .38;
    }
    85% {
        opacity: .25;
    }
    100% {
        transform: translateY(-58vh) rotate(12deg) scale(1.05);
        opacity: 0;
    }
}

/* Food floats BEHIND the brand content (z-index 0 vs 2) and stays faint,
   so it never collides with the wordmark. */
.mf-loader-food {
    position: absolute;
    top: 50%;
    z-index: 0;
    font-size: 27px;
    animation: mfFloatUp 7s linear infinite;
    filter: blur(.6px) drop-shadow(0 4px 10px rgba(255, 90, 0, .15));
    pointer-events: none;
}

/* Soft glowing blobs drifting behind the loader. */
.mf-loader-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(46px);
    opacity: .5;
    animation: mfBlobFloat 9s ease-in-out infinite;
    pointer-events: none;
}

.mf-loader-blob-1 {
    width: 42vw;
    height: 42vw;
    max-width: 460px;
    max-height: 460px;
    top: -10vh;
    left: -8vw;
    background: #FF8A3D;
    opacity: .38;
}

.mf-loader-blob-2 {
    width: 34vw;
    height: 34vw;
    max-width: 380px;
    max-height: 380px;
    bottom: -12vh;
    right: -6vw;
    background: #FFC79A;
    opacity: .55;
    animation-delay: -3s;
}

.mf-loader-blob-3 {
    width: 22vw;
    height: 22vw;
    max-width: 240px;
    max-height: 240px;
    top: 38%;
    right: 16%;
    background: #FF7BA9;
    opacity: .22;
    animation-delay: -6s;
}

.mf-loader-brand {
    position: relative;
    z-index: 2;
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -.01em;
    /* Solid brand orange with one narrow sheen sweeping across — reads as a clean
       wordmark, never as broken rendering. */
    background: linear-gradient(100deg,
        #E04E00 0%, #E04E00 42%, #FF9E60 50%, #E04E00 58%, #E04E00 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: mfShimmer 3s linear infinite;
    filter: drop-shadow(0 2px 10px rgba(255, 255, 255, .85));
}

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .mf-loader-brand {
        background: none;
        -webkit-text-fill-color: initial;
        color: #E04E00;
    }
}

.mf-loader-tagline {
    position: relative;
    z-index: 2;
    font-size: 13.5px;
    font-weight: 600;
    color: #8A5B3A;
    letter-spacing: .02em;
}

.mf-loader-page .mf-loader-ring {
    position: relative;
    z-index: 2;
}

.mf-loader-page .mf-loader-dots {
    position: relative;
    z-index: 2;
}

.mf-loader-page .mf-loader-core {
    background: #FFFFFF;
}

.mf-loader-page .mf-loader-dots span {
    background: #FF5A00;
}

.mf-loader-label {
    position: relative;
    z-index: 2;
    font-size: 12.5px;
    color: #A06B45;
    animation: mfFadeUp .5s ease both;
}

/* Small company mark pinned to the splash footer. */
.mf-loader-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 2;
    text-align: center;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: rgba(138, 91, 58, .5);
}

.mf-loader-ring {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    padding: 5px;
    background: conic-gradient(from 0deg, #FF5A00, #FFB27D, rgba(255, 90, 0, .06), #FF5A00);
    animation: mfSpin 1.1s linear infinite;
    box-shadow: 0 10px 30px rgba(255, 90, 0, .22);
}

.mf-loader-ring-sm {
    width: 56px;
    height: 56px;
    padding: 4px;
}

.mf-loader-core {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    animation: mfSpin 1.1s linear infinite reverse; /* keeps the emoji upright */
}

.mf-loader-ring-sm .mf-loader-core {
    font-size: 24px;
}

.mf-loader-dots {
    display: flex;
    gap: 7px;
}

.mf-loader-dots span {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
    animation: mfDots 1.2s infinite ease-in-out;
}

.mf-loader-dots span:nth-child(2) { animation-delay: .15s; }
.mf-loader-dots span:nth-child(3) { animation-delay: .30s; }

.mf-loader-label {
    animation: mfFadeUp .5s ease both;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- Branded app bar (frosted glass) ---------- */

.mf-appbar {
    background: rgba(255, 251, 247, .78) !important;
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    color: #241F1B !important;
    box-shadow: 0 1px 0 rgba(36, 31, 27, .06), 0 8px 24px rgba(36, 31, 27, .05) !important;
}

.mf-appbar .mud-typography,
.mf-appbar .mud-button-root,
.mf-appbar .mud-icon-root {
    color: #241F1B !important;
}

/* Brand: gradient tile + gradient wordmark. */
.mf-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

/* v483 — the bar was set a size too large for what it holds: the mark, the wordmark and
   the action chips all shrink here so the header reads as a header and gives the page
   back its vertical room. */
.mf-brand-mark {
    width: 31px;
    height: 31px;
    border-radius: 10px;
    background: linear-gradient(135deg, #FF5A00, #FF9A5C);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    box-shadow: 0 4px 11px rgba(255, 90, 0, .30);
    transition: transform .15s ease;
}

.mf-brand:hover .mf-brand-mark {
    transform: rotate(-8deg) scale(1.06);
}

.mf-brand-name {
    font-size: 16.5px;
    font-weight: 800;
    letter-spacing: -.02em;
    background: linear-gradient(100deg, #241F1B 30%, #FF5A00 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Pill nav buttons. */
.mf-appbar .mf-nav-pill {
    border-radius: 999px !important;
    padding: 6px 16px !important;
    font-weight: 600;
    transition: background .15s ease;
}

/* v485 — MudBlazor spaces a start icon with PHYSICAL margins (margin-right for the gap,
   a negative margin-left to tuck it in). Those do not flip, so on an RTL page the icon
   landed on top of the first letter of its label and "المطاعم" rendered as "لمطاعم".
   The physical margins are zeroed first, then re-stated logically so the gap falls on the
   correct side in both directions. */
.mf-appbar .mf-nav-pill .mud-button-icon-start {
    margin-right: 0;
    margin-left: 0;
    margin-inline-end: 8px;
    margin-inline-start: -2px;
}

.mf-appbar .mf-nav-pill:hover {
    background: rgba(255, 90, 0, .10) !important;
    color: #E04E00 !important;
}

.mf-appbar .mf-nav-pill:hover .mud-icon-root {
    color: #E04E00 !important;
}

/* Cart button pops in brand orange. */
.mf-appbar .mf-cart-btn .mud-icon-root {
    color: #FF5A00 !important;
}

/* Modern rounded nav links in the dark drawer (admin + partner portals). */
.mud-drawer .mud-nav-link {
    border-radius: 12px;
    margin: 3px 10px;
    width: auto;
    transition: background .15s ease;
}

.mud-drawer .mud-nav-link:hover {
    background: rgba(255, 255, 255, .06);
}

.mud-drawer .mud-nav-link.active {
    background: linear-gradient(90deg, rgba(255, 90, 0, .30), rgba(255, 90, 0, .05));
    color: #FF9A5C !important;
    box-shadow: inset 3px 0 0 #FF5A00;
}

.mud-drawer .mud-nav-link.active .mud-icon-root {
    color: #FF9A5C !important;
}

/* ---------- Admin activity page ---------- */

@keyframes mfPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(18, 161, 80, .5); }
    50% { box-shadow: 0 0 0 6px rgba(18, 161, 80, 0); }
}

.mf-presence-card {
    min-width: 150px;
    max-width: 170px;
    border-radius: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.mf-presence-avatar {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF5A00, #FF9A5C);
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mf-presence-dot {
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #12A150;
    border: 2px solid var(--mud-palette-surface);
    animation: mfPulse 1.8s ease-out infinite;
}

.mf-activity-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--mud-palette-divider-light, var(--mud-palette-lines-default));
    animation: mfFadeUp .25s ease both;
}

/* Compact search pill in the top bar (desktop). */
.mf-appbar .mf-topsearch {
    align-items: center;
    gap: 8px;
    min-width: 280px;
    max-width: 360px;
    margin: 0 16px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(36, 31, 27, .05);
    border: 1.5px solid rgba(36, 31, 27, .08);
    color: var(--mud-palette-text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.mf-appbar .mf-topsearch:hover {
    border-color: rgba(255, 90, 0, .55);
    background: #fff;
    box-shadow: 0 6px 18px rgba(255, 90, 0, .14);
}

/* Avatar with a gradient ring. */
.mf-appbar .mud-avatar {
    background: linear-gradient(135deg, #FF5A00, #FF9A5C) !important;
    color: #fff !important;
    font-weight: 700;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px rgba(255, 90, 0, .45), 0 4px 12px rgba(255, 90, 0, .25);
}

/* ---------- Talabat-style home ---------- */

.mf-hero {
    background: linear-gradient(140deg, #FF5A00 0%, #FF7A33 60%, #FF9A5C 100%);
    border-radius: 0 0 26px 26px;
    padding: 26px 0 58px;
    color: #fff;
    margin: -24px -24px 0;
}

.mf-hero .mud-typography {
    color: #fff;
}

.mf-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.mf-address-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
}

/* Search field that overlaps the hero's bottom edge. */
.mf-hero-search {
    margin-top: -26px;
    position: relative;
    z-index: 2;
}

.mf-hero-search .mud-input-control {
    background: var(--mud-palette-surface);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(36, 31, 27, .14);
}

/* Horizontally scrolling rows (cuisines, promos, order-again). */
.mf-hscroll {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding: 4px 2px 10px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}

.mf-hscroll::-webkit-scrollbar {
    display: none;
}

.mf-cuisine-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 74px;
    cursor: pointer;
    user-select: none;
}

.mf-cuisine-circle {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    border: 2px solid var(--mud-palette-lines-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.mf-cuisine-item:hover .mf-cuisine-circle {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(36, 31, 27, .10);
}

.mf-cuisine-item.selected .mf-cuisine-circle {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
    box-shadow: 0 6px 18px rgba(255, 90, 0, .25);
}

.mf-cuisine-item .mf-cuisine-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    max-width: 78px;
    line-height: 1.15;
}

.mf-cuisine-item.selected .mf-cuisine-label {
    color: var(--mud-palette-primary);
}

/* ---------- Promo coupon card ----------
   The photo sits in its own layer so it can scale on hover without dragging the text
   with it, and the dark wash is a separate layer so the copy stays legible on any
   photo. The code is a real button: tapping it copies. */
.mf-promo-card {
    position: relative;
    isolation: isolate;
    min-width: 268px;
    max-width: 268px;
    border-radius: 20px;
    padding: 16px 16px 15px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 9px;
    overflow: hidden;
    /* Shows through if a promo photo ever fails to load — warm, not a black slab. */
    background: linear-gradient(135deg, #3a2415, #6b3f1c 55%, #8a5122);
    box-shadow: 0 10px 26px rgba(36, 31, 27, .18);
    transition: transform .22s cubic-bezier(.21, .8, .35, 1), box-shadow .22s ease;
}

.mf-promo-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background: var(--promo-img) center/cover no-repeat;
    transition: transform .5s cubic-bezier(.21, .8, .35, 1);
}

.mf-promo-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(103deg, rgba(18, 11, 6, .90) 0%, rgba(18, 11, 6, .66) 46%, rgba(18, 11, 6, .18) 100%);
}

.mf-promo-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(36, 31, 27, .26); }
.mf-promo-card:hover::before { transform: scale(1.07); }

.mf-promo-top { display: flex; align-items: center; gap: 11px; }

/* The percentage as a badge, so the number reads instantly at a glance. */
.mf-promo-pct {
    display: inline-flex;
    align-items: baseline;
    gap: 1px;
    padding: 7px 11px;
    border-radius: 14px;
    background: linear-gradient(135deg, #FF5A00, #ff8f4d);
    box-shadow: 0 5px 16px rgba(255, 90, 0, .48);
    flex: none;
}

.mf-promo-pct b { font-size: 23px; font-weight: 900; line-height: 1; letter-spacing: -1px; }
.mf-promo-pct i { font-size: 13px; font-weight: 800; font-style: normal; }

.mf-promo-head { display: flex; flex-direction: column; min-width: 0; }
.mf-promo-head .t { font-size: 15px; font-weight: 900; letter-spacing: .3px; line-height: 1.15; }
.mf-promo-head .s { font-size: 11.5px; opacity: .82; line-height: 1.3; margin-top: 2px; }

/* Expiry pill — turns warm when the coupon is nearly gone. */
.mf-promo-clock {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
}

.mf-promo-clock::before { content: "⏳"; font-size: 10px; }
.mf-promo-clock.soon { background: rgba(229, 57, 53, .34); border-color: rgba(255, 138, 128, .6); }

/* Tap-to-copy code chip. Dashed edge keeps the "coupon" feel. */
.mf-promo-code {
    margin-top: auto;
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;                 /* comfortable thumb target */
    padding: 8px 14px;
    border-radius: 12px;
    border: 1px dashed rgba(255, 255, 255, .62);
    background: rgba(255, 255, 255, .17);
    backdrop-filter: blur(8px);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .09em;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, transform .12s ease;
}

.mf-promo-code:hover { background: rgba(255, 255, 255, .27); border-color: #fff; }
.mf-promo-code:active { transform: scale(.97); }
.mf-promo-code .ic { display: inline-flex; opacity: .85; }
.mf-promo-code .ic .mud-icon-root { font-size: 16px; }

.mf-promo-code.done {
    background: rgba(46, 160, 90, .42);
    border-style: solid;
    border-color: rgba(140, 240, 180, .85);
}

.mf-promo-code.done .ic { opacity: 1; }

@media (max-width: 420px) {
    .mf-promo-card { min-width: 246px; max-width: 246px; }
}

/* "Order again" — a single inline strip. The label sits on the same line as the
   shortcuts so one recent store doesn't leave a tall empty band on the page. */
.mf-again {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 14px 0 6px;
}

.mf-again-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    font-weight: 800;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    margin-inline-end: 2px;
}

.mf-again-label .mud-icon-root { color: #FF5A00; }

.mf-again-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 260px;
    padding: 7px 14px 7px 8px;
    border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    cursor: pointer;
    font-family: inherit;
    text-align: start;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

/* The inline padding is asymmetric — mirror it rather than let RTL inherit LTR. */
[dir="rtl"] .mf-again-chip { padding: 7px 8px 7px 14px; }

.mf-again-chip:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 90, 0, .45);
    box-shadow: 0 6px 16px rgba(36, 31, 27, .10);
}

.mf-again-chip .em {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
    background: #FFF3EA;
}

.mf-again-chip .tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }

.mf-again-chip .tx b {
    font-size: 13.5px;
    font-weight: 700;
    unicode-bidi: plaintext;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mf-again-chip .tx span {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

@media (max-width: 420px) {
    .mf-again-chip { max-width: 100%; }
}

/* Heart button on restaurant cards. */
.mf-fav-btn {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(36, 31, 27, .18);
    transition: transform .12s ease;
}

.mf-fav-btn:hover {
    transform: scale(1.12);
}

/* Time chip overlaying the card banner. */
.mf-time-chip {
    position: absolute;
    bottom: -12px;
    right: 14px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(36, 31, 27, .12);
}

.mf-free-delivery {
    color: #12A150;
    font-weight: 700;
}

/* Section headings with a "see more" affordance. */
.mf-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 22px 0 10px;
}

/* ---------- AI smart-search dialog ---------- */

@keyframes mfGlowPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255, 90, 0, .35), 0 8px 40px rgba(255, 90, 0, .22); }
    50% { box-shadow: 0 0 0 3px rgba(255, 122, 51, .55), 0 8px 48px rgba(255, 90, 0, .34); }
}

@keyframes mfSparkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: .9; }
    50% { transform: scale(1.25) rotate(12deg); opacity: 1; }
}

@keyframes mfShimmerRow {
    to { background-position: -200% 0; }
}

/* The dialog surface itself — fullscreen, so no rounding. */
.mf-search-dialog {
    border-radius: 0 !important;
    overflow: hidden;
}

/* Glowing gradient-border search box. */
.mf-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 4px 16px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    border: 2px solid transparent;
    background-image: linear-gradient(var(--mud-palette-surface), var(--mud-palette-surface)),
                      linear-gradient(110deg, #FF5A00, #FF9E60, #E0356B, #FF5A00);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    animation: mfGlowPulse 2.6s ease-in-out infinite;
}

.mf-search-box .mf-search-spark {
    font-size: 20px;
    animation: mfSparkle 1.8s ease-in-out infinite;
}

.mf-search-box input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16.5px;
    font-weight: 500;
    padding: 13px 0;
    color: var(--mud-palette-text-primary);
    font-family: inherit;
}

.mf-search-box input::placeholder {
    color: var(--mud-palette-text-secondary);
    opacity: .8;
}

/* The pill on the home page that opens the dialog. */
.mf-search-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 18px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    box-shadow: 0 10px 30px rgba(36, 31, 27, .14);
    color: var(--mud-palette-text-secondary);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
}

.mf-search-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 12px 34px rgba(255, 90, 0, .18);
}

/* One search result row. */
.mf-search-hit {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    cursor: pointer;
    transition: background .12s ease;
    animation: mfFadeUp .25s ease both;
}

.mf-search-hit:hover {
    background: var(--mud-palette-primary-hover);
}

.mf-search-hit .mf-hit-emoji {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--mud-palette-gray-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

/* Shimmering placeholder rows while "thinking". */
.mf-search-shimmer {
    height: 58px;
    border-radius: 12px;
    margin-bottom: 8px;
    background: linear-gradient(90deg,
        var(--mud-palette-gray-light) 25%,
        var(--mud-palette-gray-lighter) 37%,
        var(--mud-palette-gray-light) 63%);
    background-size: 200% 100%;
    animation: mfShimmerRow 1.2s linear infinite;
}

/* Suggestion chips shown before typing. */
.mf-search-suggestion {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease, transform .12s ease;
}

.mf-search-suggestion:hover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary-hover);
    transform: translateY(-1px);
}

/* ---------- Rider app ---------- */

@keyframes mfDot {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .55); }
    50% { box-shadow: 0 0 0 9px rgba(255, 255, 255, 0); }
}

.mf-duty-card {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 22px;
    color: #fff;
    background: linear-gradient(135deg, #2A211B, #4A382A);
    box-shadow: 0 12px 34px rgba(36, 31, 27, .30);
    animation: mfFadeUp .35s ease both;
}

.mf-duty-card.online {
    background: linear-gradient(135deg, #FF5A00, #FF9A5C);
    box-shadow: 0 14px 42px rgba(255, 90, 0, .40);
}

.mf-duty-card .mud-typography { color: #fff; }

.mf-duty-dot {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #9AA0A6;
    display: inline-block;
}

.mf-duty-card.online .mf-duty-dot {
    background: #B5FFD0;
    animation: mfDot 1.6s ease-out infinite;
}

.mf-duty-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12.5px;
    font-weight: 700;
    backdrop-filter: blur(4px);
}

/* Job (available delivery) cards with a pickup → dropoff route visual. */
.mf-job-card {
    border-radius: 18px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    padding: 16px;
    margin-bottom: 12px;
    animation: mfFadeUp .3s ease both;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.mf-job-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 90, 0, .45);
    box-shadow: 0 10px 28px rgba(255, 90, 0, .14);
}

.mf-route-row {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.mf-route-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #FF5A00;
    flex-shrink: 0;
    box-shadow: 0 0 0 3px rgba(255, 90, 0, .18);
}

.mf-route-dot.dest {
    background: #12A150;
    box-shadow: 0 0 0 3px rgba(18, 161, 80, .18);
}

.mf-route-line {
    width: 2px;
    height: 16px;
    margin-inline-start: 4.5px;
    background: repeating-linear-gradient(180deg, var(--mud-palette-lines-inputs) 0 3px, transparent 3px 7px);
}

.mf-earn-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 88px;
    border-radius: 14px;
    padding: 10px 12px;
    background: linear-gradient(135deg, #0E8442, #12A150);
    color: #fff;
    box-shadow: 0 6px 16px rgba(18, 161, 80, .30);
}

/* Delivery-flow progress segments on the active job. */
.mf-flow {
    display: flex;
    gap: 6px;
    margin: 10px 0 4px;
}

.mf-flow span {
    flex: 1;
    height: 7px;
    border-radius: 4px;
    background: var(--mud-palette-gray-light);
    transition: background .3s ease;
}

.mf-flow span.done {
    background: linear-gradient(90deg, #FF5A00, #FF8A4D);
}

/* ---------- Modern chat ---------- */

@keyframes mfChatIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.95);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes mfEq {
    0%, 100% { height: 6px; }
    50% { height: 18px; }
}

@keyframes mfRecPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(217, 45, 32, .45); }
    50% { box-shadow: 0 0 0 8px rgba(217, 45, 32, 0); }
}

.mf-chat-scroll {
    background:
        radial-gradient(circle at 20% 10%, rgba(255, 90, 0, .05), transparent 40%),
        radial-gradient(circle at 85% 90%, rgba(255, 178, 125, .08), transparent 45%),
        var(--mud-palette-background);
}

.mf-chat-row {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    margin-bottom: 10px;
    animation: mfChatIn .28s cubic-bezier(.21, .8, .35, 1) both;
}

.mf-chat-row.mine {
    flex-direction: row-reverse;
}

.mf-chat-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #77706A, #A8A099);
    box-shadow: 0 2px 8px rgba(36, 31, 27, .18);
}

.mf-chat-bubble {
    max-width: 78%;
    padding: 9px 13px;
    border-radius: 18px 18px 18px 6px;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 10px rgba(36, 31, 27, .08);
    transition: transform .12s ease;
}

.mf-chat-bubble:hover {
    transform: translateY(-1px);
}

.mf-chat-row.mine .mf-chat-bubble {
    border-radius: 18px 18px 6px 18px;
    background: linear-gradient(135deg, #FF5A00, #FF8A4D);
    color: #fff;
    box-shadow: 0 4px 14px rgba(255, 90, 0, .30);
}

.mf-chat-row.mine .mf-chat-bubble a { color: #fff; }

.mf-chat-time {
    font-size: 10.5px;
    opacity: .6;
    margin-top: 2px;
    text-align: end;
}

.mf-chat-composer {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    background: rgba(255, 251, 247, .85);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--mud-palette-lines-default);
}

.mf-chat-input {
    flex: 1;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 14.5px;
    font-family: inherit;
    outline: none;
    background: var(--mud-palette-surface);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.mf-chat-input:focus {
    border-color: #FF5A00;
    box-shadow: 0 0 0 3px rgba(255, 90, 0, .12);
}

.mf-chat-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    transition: background .15s ease, transform .12s ease;
}

.mf-chat-icon:hover {
    background: rgba(255, 90, 0, .10);
    color: #FF5A00;
}

.mf-chat-icon:active {
    transform: scale(.88);
}

.mf-chat-icon.recording {
    background: #D92D20;
    color: #fff;
    animation: mfRecPulse 1.4s ease-out infinite;
}

.mf-chat-send {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #FF5A00, #FF8A4D);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(255, 90, 0, .35);
    transition: transform .12s ease, box-shadow .12s ease;
}

.mf-chat-send:hover {
    transform: scale(1.07);
    box-shadow: 0 8px 22px rgba(255, 90, 0, .45);
}

.mf-chat-send:active {
    transform: scale(.9);
}

.mf-chat-send:disabled {
    opacity: .5;
    transform: none;
}

/* Animated equalizer while a voice note records. */
.mf-chat-eq {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
}

.mf-chat-eq span {
    width: 3.5px;
    border-radius: 2px;
    background: #D92D20;
    animation: mfEq 1s ease-in-out infinite;
}

.mf-chat-eq span:nth-child(2) { animation-delay: .15s; }
.mf-chat-eq span:nth-child(3) { animation-delay: .30s; }
.mf-chat-eq span:nth-child(4) { animation-delay: .45s; }
.mf-chat-eq span:nth-child(5) { animation-delay: .60s; }

/* ---------- Mobile ---------- */

/* Bottom navigation bar — phones only. */
.mf-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1300;
    display: flex;
    background: var(--mud-palette-surface);
    border-top: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 -4px 16px rgba(36, 31, 27, .08);
    padding-bottom: env(safe-area-inset-bottom);
}

.mf-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0 6px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    user-select: none;
    position: relative;
}

.mf-nav-item.active {
    color: var(--mud-palette-primary);
}

.mf-nav-badge {
    position: absolute;
    top: 4px;
    left: calc(50% + 6px);
    min-width: 17px;
    height: 17px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
}

/* Floating "view basket" bar on the menu page — phones only. */
.mf-basket-bar {
    position: fixed;
    bottom: calc(64px + env(safe-area-inset-bottom));
    left: 12px;
    right: 12px;
    z-index: 1290;
    border-radius: 14px;
    background: var(--mud-palette-primary);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(255, 90, 0, .35);
    cursor: pointer;
}

@media (min-width: 600px) {
    .mf-bottom-nav, .mf-basket-bar {
        display: none;
    }
}

@media (max-width: 599.98px) {
    /* Room for the fixed bottom bars. */
    .mf-mobile-pad {
        padding-bottom: 140px !important;
    }

    /* Tighter headings and paddings on small screens. */
    .mud-typography-h4 {
        font-size: 1.3rem !important;
    }

    .mud-typography-h5 {
        font-size: 1.15rem !important;
    }

    .mf-track-hero {
        padding: 16px;
    }

    .mf-rest-banner {
        height: 84px;
        font-size: 44px;
    }

    .mf-menu-emoji {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }

    /* Full-width primary actions (driver flow buttons etc.). */
    .mf-action-btn {
        width: 100%;
    }

    /* The sticky side basket makes no sense stacked under the menu. */
    .mf-cart-panel {
        position: static;
    }

    /* Give tap targets on tables/cards a little more breathing room. */
    .mud-container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* The hero bleeds to the screen edge — match the tighter mobile container padding. */
    .mf-hero {
        margin: -24px -12px 0;
        padding: 18px 0 52px;
        border-radius: 0 0 22px 22px;
    }

    .mf-hero-inner {
        padding: 0 16px;
    }
}

/* Fullscreen chat top bar */
.mf-chat-topbar {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 60px;
    padding: 0 8px;
    background: linear-gradient(120deg, #FF5A00, #FF8A3C);
    box-shadow: 0 2px 14px rgba(255, 90, 0, .35);
    position: sticky;
    top: 0;
    z-index: 5;
}

/* Branded Blazor reconnect overlay (replaces the default white modal) */
#components-reconnect-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 3000;
    align-items: center;
    justify-content: center;
    background: rgba(30, 20, 14, .45);
    backdrop-filter: blur(6px);
}
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected { display: flex; }
.mf-reconnect-card {
    background: var(--mud-palette-surface, #fff);
    border-radius: 22px;
    padding: 26px 34px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
    animation: mfFadeUp .25s ease;
}
.mf-reconnect-spinner {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 4px solid rgba(255, 90, 0, .15);
    border-top-color: #FF5A00;
    animation: mfSpin .8s linear infinite;
}
@keyframes mfSpin { to { transform: rotate(360deg); } }
.mf-reconnect-text { font-weight: 600; color: #6b6259; font-size: 14px; }
.mf-reconnect-brand { font-weight: 800; color: #FF5A00; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }

/* ===== Activity page: mission control ===== */
.mf-act-hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 22px 24px;
    background: linear-gradient(125deg, #1D1410 0%, #2E1A0C 55%, #4A2410 100%);
    box-shadow: 0 16px 40px rgba(46, 26, 12, .35);
    animation: mfFadeUp .3s ease;
}
.mf-act-hero-glow {
    position: absolute;
    inset: -40%;
    background:
        radial-gradient(circle at 80% 15%, rgba(255, 90, 0, .30), transparent 42%),
        radial-gradient(circle at 15% 90%, rgba(255, 170, 60, .16), transparent 45%);
    animation: mfGlowDrift 9s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes mfGlowDrift { from { transform: translate3d(0,0,0); } to { transform: translate3d(4%, 3%, 0); } }
.mf-live-badge, .mf-live-badge-sm {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 800;
    letter-spacing: .14em;
    font-size: 12px;
    color: #7CFC9B;
    background: rgba(76, 175, 80, .14);
    border: 1px solid rgba(124, 252, 155, .35);
    border-radius: 999px;
    padding: 6px 14px;
}
.mf-live-badge-sm { color: #2E7D32; background: rgba(76,175,80,.12); border-color: rgba(76,175,80,.3); letter-spacing: .05em; font-weight: 700; }
.mf-live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #4CAF50;
    animation: mfDot 1.4s ease infinite;
}
.mf-act-stats {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-top: 18px;
}
.mf-act-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 12px 16px;
    transition: transform .2s ease, background .2s ease;
}
.mf-act-stat:hover { transform: translateY(-2px); background: rgba(255,255,255,.10); }
.mf-act-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mf-act-stat-num { color: #fff; font-size: 24px; font-weight: 800; line-height: 1; }
.mf-act-stat-label { color: rgba(255,255,255,.65); font-size: 12px; margin-top: 3px; }

.mf-presence-live {
    border: 1px solid rgba(76, 175, 80, .30) !important;
    box-shadow: 0 8px 24px rgba(76, 175, 80, .12);
}
.mf-presence-ring { position: relative; }
.mf-presence-avatar2 {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    color: #fff;
    font-weight: 800;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 0 3px var(--mud-palette-surface), 0 0 0 5px rgba(76, 175, 80, .55);
}
.mf-presence-page {
    display: inline-block;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray, #F4EFEA);
    border-radius: 999px;
    padding: 2px 10px;
}

.mf-timeline { position: relative; padding-left: 6px; }
.mf-timeline::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, rgba(255, 90, 0, .5), rgba(255, 90, 0, .06));
    border-radius: 2px;
}
.mf-timeline-row {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 6px 0;
    animation: mfFadeUp .25s ease;
}
.mf-timeline-node {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    z-index: 1;
    box-shadow: 0 0 0 3px var(--mud-palette-surface);
}
.mf-timeline-card {
    flex: 1;
    min-width: 0;
    background: var(--mud-palette-background-gray, #FAF6F1);
    border: 1px solid var(--mud-palette-lines-default, #EFE7DE);
    border-radius: 14px;
    padding: 8px 12px;
    transition: transform .15s ease, box-shadow .15s ease;
}
.mf-timeline-row:hover .mf-timeline-card { transform: translateX(3px); box-shadow: 0 6px 16px rgba(0,0,0,.06); }
.mf-timeline-row.newest .mf-timeline-card {
    border-color: rgba(255, 90, 0, .45);
    box-shadow: 0 6px 18px rgba(255, 90, 0, .12);
}
.mf-timeline-time { font-size: 11px; color: var(--mud-palette-text-secondary); white-space: nowrap; }

.mf-seen-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 6px;
    border-radius: 12px;
    transition: background .15s ease;
}
.mf-seen-row:hover { background: var(--mud-palette-background-gray, #FAF6F1); }
.mf-seen-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 50%;
    color: #fff;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.mf-seen-status {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--mud-palette-surface);
}
.mf-seen-status.online { background: #4CAF50; animation: mfDot 1.4s ease infinite; }
.mf-seen-status.recent { background: #FFA726; }
.mf-seen-status.off { background: #BDBDBD; }
.mf-seen-meter {
    height: 4px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray, #F1EAE2);
    margin: 4px 0 3px;
    overflow: hidden;
}
.mf-seen-meter-fill {
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #FF5A00, #FFA45C);
    transition: width .6s ease;
}

/* Admin chat monitor */
.mf-chatmon-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.mf-chatmon-item:hover { background: var(--mud-palette-background-gray, #FAF6F1); transform: translateX(2px); }
.mf-chatmon-item.selected { border-color: rgba(255, 90, 0, .45); background: rgba(255, 90, 0, .06); }
.mf-chatmon-avatar {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: linear-gradient(135deg, rgba(255, 90, 0, .14), rgba(255, 170, 60, .18));
}

/* Activity hourly histogram */
.mf-hourbar-row {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 56px;
}
.mf-hourbar {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 2px;
    min-width: 6px;
}
.mf-hourbar-fill {
    width: 100%;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #FF8A3C, #FF5A00);
    opacity: .85;
    transition: height .5s ease;
}
.mf-hourbar:hover .mf-hourbar-fill { opacity: 1; }
.mf-hourbar-label { font-size: 9px; color: var(--mud-palette-text-secondary); height: 10px; }

/* Chat monitor v2 */
.mf-chatmon-item.hot {
    border-color: rgba(76, 175, 80, .40);
    box-shadow: 0 4px 16px rgba(76, 175, 80, .10);
}
.mf-chatmon-parties {
    display: flex;
    align-items: center;
    min-width: 52px;
}
.mf-party {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    border: 2px solid var(--mud-palette-surface);
}
.mf-party + .mf-party { margin-inline-start: -10px; }
.mf-party.c { background: linear-gradient(135deg, #FF5A00, #FF9A5C); z-index: 3; }
.mf-party.r { background: linear-gradient(135deg, #FB8C00, #FFC107); z-index: 2; }
.mf-party.d { background: linear-gradient(135deg, #1E88E5, #4FC3F7); z-index: 1; }
.mf-chatmon-count {
    min-width: 26px;
    height: 26px;
    padding: 0 7px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #FF5A00, #FF8A3C);
}
.mf-chatmon-count.hot { background: linear-gradient(135deg, #43A047, #7CB342); animation: mfDot 1.4s ease infinite; }
.mf-chat-day {
    text-align: center;
    margin: 12px 0 8px;
}
.mf-chat-day span {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default, #EFE7DE);
    border-radius: 999px;
    padding: 3px 14px;
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
}

/* Talabat-style vertical hero (Market / Pharmacy / Flowers / Shops) */
.mf-vert-hero {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    border-radius: 20px;
    padding: 18px 22px;
    color: #fff;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    animation: mfFadeUp .3s ease;
}
.mf-vert-hero-emoji {
    font-size: 44px;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,.25));
    animation: mfFloat 3s ease-in-out infinite;
}
@keyframes mfFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.mf-vert-hero-bubbles {
    position: absolute;
    inset-inline-end: 10px;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: .18;
    font-size: 52px;
    pointer-events: none;
}
.mf-vert-hero-bubbles span:nth-child(2) { font-size: 34px; transform: translateY(-14px); }
.mf-vert-hero-bubbles span:nth-child(3) { font-size: 24px; transform: translateY(12px); }

/* ==================================================================
   Delivery app v2 — modern courier command-center look (dlv-*)
   ================================================================== */

@keyframes dlvRadar {
    0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, .45); }
    70% { box-shadow: 0 0 0 16px rgba(52, 211, 153, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

@keyframes dlvGlow {
    0%, 100% { opacity: .55; }
    50% { opacity: .95; }
}

@keyframes dlvShimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

@keyframes dlvDash {
    to { background-position-y: -14px; }
}

/* ---------- Command-center hero ---------- */
.dlv-hero {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 22px 22px 18px;
    color: #F4F6FB;
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(255, 90, 0, .16) 0%, transparent 45%),
        radial-gradient(120% 160% at 0% 100%, rgba(59, 111, 224, .12) 0%, transparent 45%),
        linear-gradient(150deg, #171A20 0%, #22262E 60%, #1B1E25 100%);
    box-shadow: 0 18px 44px rgba(18, 20, 26, .38);
    animation: mfFadeUp .35s ease both;
}

.dlv-hero.online {
    background:
        radial-gradient(130% 170% at 100% 0%, rgba(52, 211, 153, .22) 0%, transparent 50%),
        radial-gradient(120% 160% at 0% 100%, rgba(52, 211, 153, .10) 0%, transparent 45%),
        linear-gradient(150deg, #14201B 0%, #1B2A23 60%, #16211C 100%);
}

.dlv-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(60% 90% at 85% -10%, rgba(255, 255, 255, .07), transparent 60%);
    animation: dlvGlow 5s ease-in-out infinite;
}

.dlv-hero .mud-typography { color: #F4F6FB; }

.dlv-hero-top {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.dlv-hero-avatar {
    width: 58px;
    height: 58px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 30px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
}

.dlv-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .14);
}

.dlv-status .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #9AA0A6;
}

.dlv-hero.online .dlv-status {
    background: rgba(52, 211, 153, .16);
    border-color: rgba(52, 211, 153, .35);
    color: #7CF0C4;
}

.dlv-hero.online .dlv-status .dot {
    background: #34D399;
    animation: dlvRadar 1.8s ease-out infinite;
}

/* Glass stat tiles inside the hero */
.dlv-hero-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 16px;
}

.dlv-hstat {
    border-radius: 16px;
    padding: 11px 12px;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .10);
    backdrop-filter: blur(8px);
    min-width: 0;
}

.dlv-hstat .k {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .7px;
    text-transform: uppercase;
    opacity: .62;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dlv-hstat .v {
    font-size: 17px;
    font-weight: 800;
    margin-top: 2px;
    white-space: nowrap;
}

.dlv-hstat .v small {
    font-size: 11.5px;
    font-weight: 600;
    opacity: .65;
}

/* Go online / offline toggle */
.dlv-toggle {
    margin-top: 16px;
    width: 100%;
    border: none;
    cursor: pointer;
    border-radius: 16px;
    padding: 15px 18px;
    font-size: 15.5px;
    font-weight: 800;
    font-family: inherit;
    letter-spacing: .2px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #10B981, #059669);
    box-shadow: 0 10px 26px rgba(16, 185, 129, .35), inset 0 1px 0 rgba(255, 255, 255, .18);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.dlv-toggle:hover { transform: translateY(-1px); filter: brightness(1.05); }
.dlv-toggle:active { transform: translateY(0) scale(.985); }

.dlv-toggle.stop {
    background: linear-gradient(135deg, #3A4150, #262B34);
    box-shadow: 0 10px 26px rgba(18, 20, 26, .35), inset 0 1px 0 rgba(255, 255, 255, .10);
}

.dlv-toggle:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

/* ---------- Cards ---------- */
.dlv-card {
    border-radius: 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(36, 31, 27, .04), 0 10px 30px rgba(36, 31, 27, .06);
    padding: 18px;
    animation: mfFadeUp .3s ease both;
}

.dlv-card.active-job {
    border: 1.5px solid rgba(255, 90, 0, .4);
    box-shadow: 0 1px 2px rgba(255, 90, 0, .06), 0 14px 38px rgba(255, 90, 0, .12);
}

.dlv-sec-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 22px 2px 12px;
}

.dlv-sec-title h2 {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -.2px;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.dlv-count {
    min-width: 24px;
    height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #FF5A00, #FF8A4D);
    box-shadow: 0 4px 12px rgba(255, 90, 0, .35);
}

/* ---------- Delivery flow stepper ---------- */
.dlv-steps {
    display: flex;
    align-items: flex-start;
    margin: 4px 0 14px;
}

.dlv-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    position: relative;
    min-width: 0;
}

.dlv-step .ic {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 15px;
    background: var(--mud-palette-gray-light);
    color: var(--mud-palette-text-secondary);
    border: 2px solid var(--mud-palette-lines-default);
    z-index: 1;
    transition: all .25s ease;
}

.dlv-step .lb {
    font-size: 10px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    text-align: center;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dlv-step::before {
    content: "";
    position: absolute;
    top: 16px;
    inset-inline-start: -50%;
    width: 100%;
    height: 3px;
    background: var(--mud-palette-lines-default);
    z-index: 0;
}

.dlv-step:first-child::before { display: none; }

.dlv-step.done .ic {
    background: linear-gradient(135deg, #FF5A00, #FF8A4D);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 90, 0, .3);
}

.dlv-step.done::before { background: linear-gradient(90deg, #FF5A00, #FF8A4D); }

.dlv-step.done .lb { color: var(--mud-palette-text-primary); }

.dlv-step.now .ic {
    background: #fff;
    border-color: #FF5A00;
    color: #FF5A00;
    box-shadow: 0 0 0 5px rgba(255, 90, 0, .14);
}

.dlv-step.now .lb { color: #FF5A00; }

/* ---------- Route timeline ---------- */
.dlv-route { margin: 6px 0 10px; }

.dlv-route-leg {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.dlv-pin {
    width: 34px;
    height: 34px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 16px;
    flex-shrink: 0;
    background: #FFF1E8;
    border: 1px solid rgba(255, 90, 0, .25);
}

.dlv-pin.dest {
    background: #E9F9F0;
    border-color: rgba(18, 161, 80, .25);
}

.dlv-route-leg .t { min-width: 0; }

.dlv-route-leg .t .n {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dlv-route-leg .t .s {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dlv-route-link {
    width: 3px;
    height: 22px;
    margin-inline-start: 15.5px;
    border-radius: 2px;
    background: repeating-linear-gradient(180deg, #FFB380 0 4px, transparent 4px 9px);
    animation: dlvDash 1.2s linear infinite;
}

/* ---------- Pill actions ---------- */
.dlv-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 12px 0;
}

.dlv-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-lines-default);
    transition: all .15s ease;
}

.dlv-pill:hover {
    border-color: #FF5A00;
    color: #FF5A00;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(255, 90, 0, .14);
}

.dlv-pill .mud-icon-root { font-size: 17px; }

/* ---------- Big CTA ---------- */
.dlv-cta {
    position: relative;
    overflow: hidden;
    width: 100%;
    border: none;
    cursor: pointer;
    border-radius: 16px;
    padding: 16px 20px;
    font-size: 15.5px;
    font-weight: 800;
    font-family: inherit;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, #FF5A00, #FF7E33);
    box-shadow: 0 12px 30px rgba(255, 90, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
    transition: transform .15s ease, filter .15s ease;
}

.dlv-cta::after {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: -80%;
    width: 60%;
    height: 100%;
    transform: skewX(-20deg);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent);
    transition: inset-inline-start .5s ease;
}

.dlv-cta:hover::after { inset-inline-start: 130%; }
.dlv-cta:hover { transform: translateY(-1px); filter: brightness(1.04); }
.dlv-cta:active { transform: scale(.985); }

.dlv-cta:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
}

.dlv-cta.success {
    background: linear-gradient(135deg, #10B981, #059669);
    box-shadow: 0 12px 30px rgba(16, 185, 129, .35), inset 0 1px 0 rgba(255, 255, 255, .22);
}

.dlv-cta small {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    opacity: .85;
}

/* ---------- Job cards ---------- */
.dlv-job {
    position: relative;
    border-radius: 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(36, 31, 27, .04), 0 8px 24px rgba(36, 31, 27, .05);
    padding: 16px;
    margin-bottom: 12px;
    animation: mfFadeUp .3s ease both;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.dlv-job:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 90, 0, .45);
    box-shadow: 0 14px 34px rgba(255, 90, 0, .13);
}

.dlv-job-grid {
    display: flex;
    gap: 14px;
    align-items: stretch;
    flex-wrap: wrap;
}

.dlv-job-main { flex: 1 1 240px; min-width: 0; }

.dlv-job-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    gap: 8px;
    flex: 0 0 128px;
}

.dlv-earn {
    border-radius: 14px;
    padding: 9px 12px;
    text-align: center;
    color: #fff;
    background: linear-gradient(135deg, #0E8442, #16B463);
    box-shadow: 0 8px 20px rgba(18, 161, 80, .3);
}

.dlv-earn .k {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: .85;
}

.dlv-earn .v {
    font-size: 17px;
    font-weight: 800;
    line-height: 1.2;
}

.dlv-claim {
    border: none;
    cursor: pointer;
    border-radius: 14px;
    padding: 12px 10px;
    font-size: 14px;
    font-weight: 800;
    font-family: inherit;
    color: #fff;
    background: linear-gradient(135deg, #FF5A00, #FF7E33);
    box-shadow: 0 8px 20px rgba(255, 90, 0, .3);
    transition: transform .14s ease, filter .14s ease;
}

.dlv-claim:hover { transform: translateY(-1px); filter: brightness(1.05); }
.dlv-claim:active { transform: scale(.97); }

.dlv-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.dlv-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background: var(--mud-palette-gray-lighter);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.dlv-tag.hot {
    background: #FFF1E8;
    border-color: rgba(255, 90, 0, .3);
    color: #E04E00;
}

.dlv-tag.paid {
    background: #E9F9F0;
    border-color: rgba(18, 161, 80, .3);
    color: #0E8442;
}

/* ---------- Earnings ---------- */
.dlv-ehero {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 24px;
    color: #fff;
    background:
        radial-gradient(120% 150% at 100% 0%, rgba(255, 255, 255, .14) 0%, transparent 45%),
        linear-gradient(140deg, #0E8442 0%, #16B463 100%);
    box-shadow: 0 16px 40px rgba(14, 132, 66, .35);
    animation: mfFadeUp .35s ease both;
}

.dlv-ehero .mud-typography { color: #fff; }

.dlv-ehero .big {
    font-size: 40px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.1;
}

.dlv-ehero .cap {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    opacity: .8;
}

.dlv-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin: 14px 0;
}

.dlv-stat {
    border-radius: 18px;
    padding: 14px 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(36, 31, 27, .04), 0 8px 22px rgba(36, 31, 27, .05);
    animation: mfFadeUp .35s ease both;
}

.dlv-stat .ic {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    font-size: 16px;
    margin-bottom: 8px;
    background: #FFF1E8;
}

.dlv-stat .k {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.dlv-stat .v {
    font-size: 20px;
    font-weight: 800;
    color: var(--mud-palette-text-primary);
    letter-spacing: -.3px;
}

.dlv-stat .h {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
}

.dlv-hrow {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 4px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    min-width: 0;
}

.dlv-hrow:last-child { border-bottom: none; }

.dlv-hrow .em {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    display: grid;
    place-items: center;
    font-size: 20px;
    flex-shrink: 0;
    background: var(--mud-palette-gray-lighter);
    border: 1px solid var(--mud-palette-lines-default);
}

.dlv-hrow .fee {
    font-weight: 800;
    color: #0E8442;
    white-space: nowrap;
}

/* ---------- Skeleton loading ---------- */
.dlv-skel {
    border-radius: 20px;
    height: 108px;
    margin-bottom: 12px;
    background: linear-gradient(90deg, var(--mud-palette-gray-light) 25%, var(--mud-palette-gray-lighter) 37%, var(--mud-palette-gray-light) 63%);
    background-size: 400px 100%;
    animation: dlvShimmer 1.3s ease-in-out infinite;
}

/* ---------- Verification ---------- */
.dlv-doc {
    border-radius: 18px;
    border: 1.5px dashed var(--mud-palette-lines-inputs);
    background: var(--mud-palette-surface);
    padding: 16px 12px;
    text-align: center;
    min-height: 172px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: pointer;
    transition: all .16s ease;
}

.dlv-doc:hover {
    border-color: #FF5A00;
    background: #FFF9F5;
    transform: translateY(-2px);
}

.dlv-doc.filled {
    border-style: solid;
    border-color: rgba(18, 161, 80, .45);
    background: #FBFEFC;
}

.dlv-doc img {
    width: 100%;
    height: 92px;
    object-fit: cover;
    border-radius: 12px;
}

/* Larger screens: toggle becomes inline width */
@media (min-width: 700px) {
    .dlv-toggle { width: auto; min-width: 260px; }
}


/* ==================================================================
   Ambient background — customer app (mf-ambient)
   A fixed aurora layer painted between the page background and the
   content: four soft brand-colored glows drifting on slow loops, a
   warm light falling from the top, and a fine film grain. Pure
   gradients + transform animations (no blur filters) so it stays
   cheap on phones. Sits at z-index -1, never intercepts input.
   ================================================================== */

@keyframes mfAmbDriftA {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(6vw, -4vh) scale(1.12); }
    100% { transform: translate(-3vw, 3vh) scale(.96); }
}

@keyframes mfAmbDriftB {
    0%   { transform: translate(0, 0) scale(1) rotate(0deg); }
    50%  { transform: translate(-7vw, 5vh) scale(1.08) rotate(12deg); }
    100% { transform: translate(4vw, -3vh) scale(.94) rotate(-8deg); }
}

@keyframes mfAmbDriftC {
    0%   { transform: translate(0, 0) scale(1); }
    50%  { transform: translate(5vw, 6vh) scale(1.15); }
    100% { transform: translate(-5vw, -4vh) scale(.9); }
}

@keyframes mfAmbBreathe {
    0%, 100% { opacity: .55; }
    50%      { opacity: .85; }
}

.mf-ambient {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

/* Base wash — keeps the corners from feeling empty. */
.mf-ambient::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(120% 55% at 50% -12%, rgba(255, 138, 77, .20) 0%, rgba(255, 138, 77, 0) 60%),
        linear-gradient(180deg, #FBF6F1 0%, #FAF6F2 45%, #F7F1EB 100%);
}

/* Film grain — premium matte texture, static on purpose. */
.mf-ambient::after {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mf-ambient .glow {
    position: absolute;
    border-radius: 50%;
    will-change: transform;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
}

/* Brand-orange sun, top start corner. */
.mf-ambient .g1 {
    width: 72vmax; height: 72vmax;
    top: -34vmax; inset-inline-start: -22vmax;
    background: radial-gradient(closest-side, rgba(255, 90, 0, .17), rgba(255, 122, 40, .08) 45%, transparent 72%);
    animation-name: mfAmbDriftA;
    animation-duration: 46s;
}

/* Peach-rose bloom, end side. */
.mf-ambient .g2 {
    width: 58vmax; height: 58vmax;
    top: 12vh; inset-inline-end: -26vmax;
    background: radial-gradient(closest-side, rgba(255, 122, 162, .13), rgba(255, 176, 128, .07) 50%, transparent 72%);
    animation-name: mfAmbDriftB;
    animation-duration: 58s;
}

/* Fresh mint, bottom start — nods to the success green in the UI. */
.mf-ambient .g3 {
    width: 60vmax; height: 60vmax;
    bottom: -30vmax; inset-inline-start: -16vmax;
    background: radial-gradient(closest-side, rgba(38, 190, 120, .11), rgba(127, 224, 176, .05) 50%, transparent 72%);
    animation-name: mfAmbDriftC;
    animation-duration: 52s;
}

/* Cool sky whisper, bottom end — balances the warm tones. */
.mf-ambient .g4 {
    width: 48vmax; height: 48vmax;
    bottom: -18vmax; inset-inline-end: -14vmax;
    background: radial-gradient(closest-side, rgba(122, 167, 232, .10), transparent 70%);
    animation-name: mfAmbDriftA;
    animation-duration: 64s;
    animation-delay: -20s;
}

/* Tiny sparkle field — barely-there floating specks. */
.mf-ambient .stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(255, 90, 0, .18) 1px, transparent 1.5px),
        radial-gradient(rgba(36, 31, 27, .10) 1px, transparent 1.5px);
    background-size: 260px 260px, 340px 340px;
    background-position: 40px 60px, 160px 200px;
    animation: mfAmbBreathe 14s ease-in-out infinite;
    opacity: .6;
}

/* NOTE: never add a blanket `.mf-ambient ~ *` positioning rule here — it puts
   the whole app in one stacking context and breaks MudBlazor popovers/dialogs
   (menus open at the page bottom, dialogs slide under the app bar). The
   ambient layer's own z-index -1 is enough. */

@media (prefers-reduced-motion: reduce) {
    .mf-ambient .glow, .mf-ambient .stars { animation: none; }
}

/* Phones: fewer, bigger, calmer. */
@media (max-width: 600px) {
    .mf-ambient .g4 { display: none; }
    .mf-ambient .stars { opacity: .4; }
}


/* ---------- Delivery earnings filter chips ---------- */
.dlv-filter {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--mud-palette-gray-light);
    border: 1px solid var(--mud-palette-lines-default);
}

.dlv-fchip {
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    user-select: none;
    transition: all .15s ease;
    white-space: nowrap;
}

.dlv-fchip:hover { color: #FF5A00; }

.dlv-fchip.on {
    background: linear-gradient(135deg, #FF5A00, #FF7E33);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 90, 0, .3);
}

/* ==================================================================
   Modern horizontal scroller (customer app) — arrows + motion
   JS (mf-scroll.js) enhances every .mf-hscroll: overlay arrows,
   spring scrolling, velocity lean, wheel + drag support.
   ================================================================== */

.mf-scroll-anchor { position: relative; }

/* Overlay bar aligned to the row by JS (top/height inline). */
.mf-sbar {
    position: absolute;
    inset-inline: 0;
    z-index: 3;
    pointer-events: none;
}

.mf-sbtn {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 40px;
    margin-top: -20px;
    border-radius: 50%;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--mud-palette-text-primary);
    display: grid;
    place-items: center;
    cursor: pointer;
    pointer-events: auto;
    padding: 0;
    box-shadow: 0 2px 6px rgba(36, 31, 27, .08), 0 10px 26px rgba(36, 31, 27, .14);
    transition: transform .28s cubic-bezier(.34, 1.56, .64, 1),
                opacity .22s ease, border-color .18s ease, color .18s ease,
                box-shadow .22s ease, background .18s ease;
}

.mf-sbtn svg {
    width: 20px;
    height: 20px;
    display: block;
}

.mf-sbtn.prev { inset-inline-start: -6px; }
.mf-sbtn.next { inset-inline-end: -6px; }

.mf-sbtn:hover {
    border-color: #FF5A00;
    color: #FF5A00;
    background: #fff;
    transform: scale(1.1);
    box-shadow: 0 4px 10px rgba(255, 90, 0, .12), 0 12px 30px rgba(255, 90, 0, .22);
}

.mf-sbtn:active { transform: scale(.88); }

.mf-sbtn.off {
    opacity: 0;
    transform: scale(.5);
    pointer-events: none;
}

/* Chevrons point outward; flip for RTL. */
[dir="rtl"] .mf-sbtn svg { transform: scaleX(-1); }

/* Soft fade at scrollable edges — mask keeps the ambient bg visible. */
.mf-hscroll[data-mfsc] {
    scroll-snap-type: x proximity;
}

.mf-hscroll[data-mfsc] > * {
    scroll-snap-align: start;
}

.mf-hscroll[data-mfsc].fade-both {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 34px, #000 calc(100% - 34px), transparent 100%);
}

.mf-hscroll[data-mfsc].fade-start {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 34px);
    mask-image: linear-gradient(to right, transparent 0, #000 34px);
}

.mf-hscroll[data-mfsc].fade-end {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent 100%);
}

/* Velocity lean — items tilt with the motion and spring back on stop.
   Entrance keyframes must not keep overriding transforms afterwards. */
.mf-hscroll[data-mfsc] > * {
    animation-fill-mode: backwards;
    transform: skewX(var(--mf-lean, 0deg)) translateX(var(--mf-shift, 0px));
    transition: transform .38s cubic-bezier(.21, .8, .35, 1);
}

/* Grab cursor for drag-to-scroll on desktop. */
@media (hover: hover) and (pointer: fine) {
    .mf-hscroll[data-mfsc] { cursor: grab; }
    .mf-hscroll[data-mfsc].dragging { cursor: grabbing; scroll-snap-type: none; }
    .mf-hscroll[data-mfsc].dragging > * { transition: none; }
}

@media (max-width: 600px) {
    .mf-sbtn { width: 34px; height: 34px; margin-top: -17px; }
    .mf-sbtn svg { width: 17px; height: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .mf-hscroll[data-mfsc] > * { transform: none; transition: none; }
}


/* ==================================================================
   Loader v2 — orbiting comet + shimmer progress bar
   ================================================================== */

.mf-loader-stage {
    position: relative;
    z-index: 2;
    width: 122px;
    height: 122px;
    display: grid;
    place-items: center;
}

/* Comet orbiting the ring on its own track. */
.mf-loader-orbit {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed rgba(255, 90, 0, .22);
    animation: mfSpin 2.8s linear infinite;
}

.mf-loader-orbit::before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #FFB27D, #FF5A00);
    box-shadow: 0 0 14px 4px rgba(255, 90, 0, .45);
}

@keyframes mfCorePulse {
    0%, 100% { box-shadow: inset 0 0 0 0 rgba(255, 90, 0, 0); }
    50% { box-shadow: inset 0 0 22px 2px rgba(255, 90, 0, .12); }
}

.mf-loader-core { animation: mfSpin 1.1s linear infinite reverse, mfCorePulse 2.2s ease-in-out infinite; }

/* Indeterminate shimmer bar under the ring. */
@keyframes mfBarSlide {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

.mf-loader-bar {
    position: relative;
    z-index: 2;
    width: 150px;
    height: 4px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 90, 0, .14);
}

.mf-loader-bar i {
    display: block;
    height: 100%;
    width: 42%;
    border-radius: 999px;
    background: linear-gradient(90deg, #FF5A00, #FF9A5C);
    animation: mfBarSlide 1.15s cubic-bezier(.42, 0, .34, 1) infinite;
}

.mf-loader-bar-sm { width: 96px; height: 3px; }

[dir="rtl"] .mf-loader-bar i { animation-direction: reverse; }

/* ==================================================================
   Menu v2 — modern dish cards
   ================================================================== */

.mf-menu-item {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 2px rgba(36, 31, 27, .04), 0 6px 18px rgba(36, 31, 27, .05);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.mf-menu-item:hover {
    transform: translateY(-3px);
    border-color: rgba(255, 90, 0, .45);
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 4px rgba(255, 90, 0, .06), 0 14px 32px rgba(255, 90, 0, .14);
}

.mf-menu-emoji {
    width: 56px;
    height: 56px;
    border-radius: 15px;
    font-size: 30px;
    background: linear-gradient(135deg, #FFF1E8, #FFE3D1);
    border: 1px solid rgba(255, 90, 0, .12);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.mf-menu-item:hover .mf-menu-emoji {
    transform: scale(1.12) rotate(-5deg);
}

/* "+" affordance that pops in on hover — hints the dish opens/adds. */
.mf-menu-item::after {
    content: "+";
    position: absolute;
    inset-inline-end: 10px;
    bottom: 10px;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 19px;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    background: linear-gradient(135deg, #FF5A00, #FF7E33);
    box-shadow: 0 6px 14px rgba(255, 90, 0, .35);
    opacity: 0;
    transform: scale(.4);
    transition: opacity .18s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1);
    pointer-events: none;
}

.mf-menu-item:hover::after {
    opacity: 1;
    transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
    .mf-loader-orbit, .mf-loader-bar i, .mf-loader-core { animation: none; }
}


/* Kill stray horizontal page overflow (Android shows a bottom scrollbar
   while scrolling otherwise). clip > hidden: no scroll container, sticky
   elements keep working. */
html, body { overflow-x: clip; }
@supports not (overflow: clip) {
    html, body { overflow-x: hidden; }
}

/* ---------- Language picker dialog ---------- */
.mf-lang-badge {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #FF5A00, #FF7E33);
    box-shadow: 0 6px 14px rgba(255, 90, 0, .3);
}

.mf-lang-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 2px 0 6px;
}

.mf-lang-tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 13px;
    border-radius: 14px;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    user-select: none;
    min-width: 0;
    transition: all .15s ease;
}

.mf-lang-tile .fl { font-size: 21px; flex-shrink: 0; }

.mf-lang-tile .nm {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mf-lang-tile:hover {
    border-color: #FF5A00;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(255, 90, 0, .14);
}

.mf-lang-tile.on {
    border-color: #FF5A00;
    background: #FFF1E8;
    color: #E04E00;
    font-weight: 800;
}

@media (max-width: 480px) {
    .mf-lang-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
    .mf-lang-tile { padding: 10px 11px; font-size: 13.5px; }
}

/* Language dialog: always fully visible — content scrolls inside. */
.mf-lang-dialog {
    border-radius: 24px !important;
    max-height: 86vh;
}

.mf-lang-dialog .mud-dialog-content {
    max-height: 62vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ==================================================================
   Bottom nav v2 — floating smart dock (client + delivery apps)
   ================================================================== */
.mf-bottom-nav {
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    border-radius: 26px;
    border: 1px solid rgba(255, 255, 255, .65);
    background: rgba(255, 255, 255, .80);
    backdrop-filter: blur(18px) saturate(1.5);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    box-shadow: 0 12px 34px rgba(36, 31, 27, .18), 0 2px 8px rgba(36, 31, 27, .07);
    padding: 6px;
    padding-bottom: 6px;
}

.mf-nav-item {
    border-radius: 20px;
    margin: 0 2px;
    padding: 7px 0 6px;
    font-size: 10.5px;
    transition: color .18s ease, background .22s ease, transform .18s ease;
}

.mf-nav-item .mud-icon-root {
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.mf-nav-item.active {
    color: #E04E00;
    background: linear-gradient(135deg, #FFF1E8, #FFE0CB);
    box-shadow: inset 0 0 0 1px rgba(255, 90, 0, .18);
}

.mf-nav-item.active .mud-icon-root {
    transform: translateY(-1px) scale(1.18);
    filter: drop-shadow(0 4px 8px rgba(255, 90, 0, .35));
}

.mf-nav-item:active { transform: scale(.93); }

/* Content padding must clear the floating dock. */
@media (max-width: 599.98px) {
    .mf-mobile-pad { padding-bottom: 96px !important; }
}

/* Basket bar floats above the new dock. */
.mf-basket-bar {
    bottom: calc(88px + env(safe-area-inset-bottom));
}

/* ---------- Fluent 3D emoji ---------- */
.mf-emoji3d {
    width: 1.2em;
    height: 1.2em;
    object-fit: contain;
    display: inline-block;
    vertical-align: middle;
    filter: drop-shadow(0 3px 6px rgba(36, 31, 27, .16));
}

.mf-cuisine-circle .mf-emoji3d { width: 34px; height: 34px; }
.mf-menu-emoji .mf-emoji3d { width: 38px; height: 38px; }
.mf-hit-emoji .mf-emoji3d { width: 30px; height: 30px; }
.mf-rest-banner .mf-emoji3d { width: 62px; height: 62px; }
.mf-again-chip .em .mf-emoji3d { width: 24px; height: 24px; }
.mf-vert-hero-emoji .mf-emoji3d { width: 56px; height: 56px; }
.mf-loader-core .mf-emoji3d { width: 46px; height: 46px; }

/* ---------- Sort chips: single scrollable row under the title ---------- */
.mf-sort-row {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    margin: -2px 2px 10px;
    padding: 2px 0;
}

.mf-sort-row::-webkit-scrollbar { display: none; }
.mf-sort-row .mud-chipset { display: flex; flex-wrap: nowrap; }
.mf-sort-row .mud-chip { flex-shrink: 0; white-space: nowrap; }

/* ---------- Chat: send button must stay a perfect circle ---------- */
.mf-chat-send {
    flex: 0 0 44px;
    min-width: 44px;
    max-width: 44px;
    min-height: 44px;
    max-height: 44px;
    align-self: center;
}

.mf-chat-composer .mf-chat-icon { flex-shrink: 0; align-self: center; }

/* ---------- Profile avatar hero + picker ---------- */
.mf-avatar-hero {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px;
    border-radius: 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(36, 31, 27, .04), 0 10px 28px rgba(36, 31, 27, .06);
    animation: mfFadeUp .3s ease both;
}

.mf-avatar-big {
    position: relative;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    cursor: pointer;
    background: linear-gradient(135deg, #FFF1E8, #FFE0CB);
    border: 2.5px solid #FF5A00;
    box-shadow: 0 8px 22px rgba(255, 90, 0, .22);
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1);
}

.mf-avatar-big:hover { transform: scale(1.06); }

.mf-avatar-big .em {
    font-size: 38px;
    font-weight: 800;
    color: #E04E00;
    line-height: 1;
}

.mf-avatar-big .pen {
    position: absolute;
    bottom: -2px;
    inset-inline-end: -2px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #FF5A00, #FF7E33);
    border: 2px solid #fff;
    box-shadow: 0 4px 10px rgba(255, 90, 0, .35);
}

.mf-avatar-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px;
    padding: 2px 0;
}

.mf-avatar-tile {
    aspect-ratio: 1;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 26px;
    cursor: pointer;
    user-select: none;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), border-color .15s ease, box-shadow .15s ease;
}

.mf-avatar-tile:hover {
    transform: scale(1.12);
    border-color: #FF5A00;
    box-shadow: 0 6px 16px rgba(255, 90, 0, .18);
}

.mf-avatar-tile.on {
    border-color: #FF5A00;
    background: #FFF1E8;
    box-shadow: inset 0 0 0 1.5px #FF5A00;
}

@media (max-width: 480px) {
    .mf-avatar-grid { grid-template-columns: repeat(4, 1fr); }
    .mf-avatar-tile { font-size: 30px; }
}

/* Promo cards with real photos need readable text. */
.mf-promo-photo {
    text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
    min-height: 132px;
}

.mf-promo-photo .mf-promo-code {
    background: rgba(255, 255, 255, .22);
    backdrop-filter: blur(6px);
    text-shadow: none;
}

/* ---------- Real photography: banners, dish tiles, avatars ---------- */
.mf-rest-banner { position: relative; overflow: hidden; }

.mf-rest-banner .bp {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.mf-rest-card:hover .mf-rest-banner .bp { transform: scale(1.06); }

.mf-menu-emoji { overflow: hidden; }

.mf-menu-emoji .ph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.mf-avatar-big { overflow: visible; }

.mf-avatar-big .photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.mf-avatar-tile { overflow: hidden; padding: 0; }

.mf-avatar-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
    display: block;
}

/* ==================================================================
   Bottom dock v3 — expanding active pill (Material-You style)
   Inactive tabs are icons; the active tab grows into a gradient pill
   and its label slides in.
   ================================================================== */

@keyframes mfNavPop {
    0% { transform: scale(.7); }
    55% { transform: scale(1.22); }
    100% { transform: scale(1); }
}

.mf-bottom-nav {
    gap: 5px;
    padding: 8px;
    border-radius: 30px;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .78);
    backdrop-filter: blur(22px) saturate(1.7);
    -webkit-backdrop-filter: blur(22px) saturate(1.7);
    border: 1px solid rgba(255, 255, 255, .7);
    box-shadow: 0 16px 40px rgba(36, 31, 27, .20), 0 2px 8px rgba(36, 31, 27, .06);
}

.mf-nav-item {
    flex: 1;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 12px 6px;
    margin: 0;
    border-radius: 22px;
    font-size: 12px;
    font-weight: 800;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    box-shadow: none;
    transition: flex .38s cubic-bezier(.34, 1.3, .5, 1), background .3s ease,
                color .25s ease, box-shadow .3s ease;
}

.mf-nav-item .mud-icon-root {
    font-size: 22px;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.mf-nav-item .lb {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width .38s cubic-bezier(.34, 1.3, .5, 1), opacity .22s ease;
}

.mf-nav-item.active {
    flex: 2.1;
    color: #fff;
    background: linear-gradient(135deg, #FF5A00, #FF7E33);
    box-shadow: 0 10px 24px rgba(255, 90, 0, .42), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.mf-nav-item.active .lb {
    max-width: 110px;
    opacity: 1;
}

.mf-nav-item.active .mud-icon-root {
    transform: none;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .18));
    animation: mfNavPop .4s cubic-bezier(.34, 1.56, .64, 1);
}

.mf-nav-item:not(.active):active .mud-icon-root { transform: scale(.85); }

/* Row layout: the basket badge sits inline next to the icon/label. */
.mf-nav-badge {
    position: static;
    margin-inline-start: 2px;
    background: #fff;
    color: #E04E00;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
}

.mf-nav-item:not(.active) .mf-nav-badge {
    background: var(--mud-palette-primary);
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .mf-nav-item, .mf-nav-item .lb { transition: none; }
    .mf-nav-item.active .mud-icon-root { animation: none; }
}

/* Dock: extra transparency — heavier blur keeps it readable. */
.mf-bottom-nav {
    background: rgba(255, 255, 255, .42);
    backdrop-filter: blur(28px) saturate(1.9);
    -webkit-backdrop-filter: blur(28px) saturate(1.9);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow: 0 14px 36px rgba(36, 31, 27, .16), 0 2px 8px rgba(36, 31, 27, .05);
}

/* If the browser can't blur, stay opaque enough to read. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .mf-bottom-nav { background: rgba(255, 255, 255, .88); }
}

/* ---------- Compact login card (all apps) ---------- */
.mf-login-card .mf-login-logo {
    width: 64px;
    height: 64px;
    font-size: 34px;
    border-radius: 18px;
}

.mf-login-card .mud-typography-h5 { font-size: 19px; font-weight: 800; }
.mf-login-card .mud-typography-body2 { font-size: 13px; }

.mf-login-card .mud-tab {
    font-size: 12.5px;
    min-height: 40px;
    padding: 6px 14px;
}

.mf-login-card .mud-tabs { min-height: 40px; }

.mf-login-card .mud-input,
.mf-login-card .mud-input input,
.mf-login-card .mud-input-slot {
    font-size: 14px;
}

.mf-login-card .mud-input-label { font-size: 13.5px; }

.mf-login-card .mf-login-btn {
    height: 42px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 12px;
    text-transform: none;
}

.mf-login-card .mud-typography-caption { font-size: 11.5px; line-height: 1.45; }

/* ---------- Login face pile + chat "+" menu button ---------- */
.mf-facepile {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mf-facepile img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff;
    box-shadow: 0 3px 8px rgba(36, 31, 27, .18);
    margin-inline-start: -9px;
}

.mf-facepile img:first-child { margin-inline-start: 0; }

.mf-facepile .cap {
    margin-inline-start: 8px;
    font-size: 12px;
    font-weight: 800;
    color: #E04E00;
    white-space: nowrap;
}

.mf-chat-icon.plus {
    background: linear-gradient(135deg, #FF5A00, #FF7E33);
    color: #fff;
    border: none;
    box-shadow: 0 5px 14px rgba(255, 90, 0, .3);
}

.mf-chat-icon.plus:hover { filter: brightness(1.06); }

/* Cuisine / vertical circles with real photos. */
.mf-cuisine-circle { overflow: hidden; }

.mf-cuisine-circle .cp {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}

.mf-cuisine-item:hover .mf-cuisine-circle .cp,
.mf-cuisine-item.selected .mf-cuisine-circle .cp {
    transform: scale(1.12);
}

/* ==================================================================
   Hero v2 — real photo under the brand gradient + micro-animations
   ================================================================== */

@keyframes mfWaveHand {
    0%, 50%, 100% { transform: rotate(0deg); }
    58% { transform: rotate(16deg); }
    68% { transform: rotate(-9deg); }
    78% { transform: rotate(14deg); }
    88% { transform: rotate(-5deg); }
}

@keyframes mfSparklePulse {
    0%, 100% { transform: scale(1); opacity: .95; }
    50% { transform: scale(1.25) rotate(12deg); opacity: 1; }
}

.mf-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(115deg, rgba(226, 72, 0, .95) 0%, rgba(255, 100, 30, .87) 52%, rgba(255, 140, 72, .72) 100%),
        url('/img/promos/p3184183.jpg') center 35% / cover no-repeat;
}

/* Soft breathing light in the corner. */
.mf-hero::after {
    content: "";
    position: absolute;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    top: -140px;
    inset-inline-end: -90px;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .18), transparent 70%);
    animation: dlvGlow 5.5s ease-in-out infinite;
    pointer-events: none;
}

/* Staggered entrance for the hero content. */
.mf-hero-inner > * {
    animation: mfFadeUp .55s cubic-bezier(.21, .8, .35, 1) both;
}

.mf-hero-inner > *:nth-child(2) { animation-delay: .08s; }
.mf-hero-inner > *:nth-child(3) { animation-delay: .16s; }

/* Waving hand. */
.mf-wave {
    display: inline-block;
    transform-origin: 72% 72%;
    animation: mfWaveHand 2.4s ease-in-out infinite;
}

/* Address pill: gentle lift on touch/hover. */
.mf-address-pill {
    transition: transform .16s ease, background .2s ease, box-shadow .2s ease;
}

.mf-address-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .16);
}

.mf-address-pill:active { transform: scale(.97); }

/* Search bar sparkle pulses. */
.mf-search-trigger > span:first-child {
    display: inline-block;
    animation: mfSparklePulse 2.6s ease-in-out infinite;
}

/* Loader core: real photo, kept upright by the reverse spin. */
.mf-loader-core { overflow: hidden; }

.mf-loader-core .lph {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

@media (prefers-reduced-motion: reduce) {
    .mf-wave, .mf-search-trigger > span:first-child, .mf-hero::after { animation: none; }
}

/* v453: the food photograph behind the splash is gone. The hopping dish is the
   only thing on the loader now, so it reads against the plain warm gradient set
   on .mf-loader-page above — a photo underneath just competed with it. */

.mf-loader-core .lph { display: none; }

/* Search trigger: placeholder must never wrap. */
.mf-search-trigger { flex-wrap: nowrap; }

.mf-search-trigger .flex-grow-1 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

@media (max-width: 480px) {
    .mf-search-trigger { font-size: 13.5px; }
}

/* Photo splash: the floating food emojis are noise on top of photography. */
.mf-loader-food { display: none; }

/* ==================================================================
   App bar v2 — frosted glass, tonal icon chips, ringed avatar
   ================================================================== */
.mf-appbar.mud-appbar {
    background: rgba(255, 252, 248, .78);
    backdrop-filter: blur(18px) saturate(1.6);
    -webkit-backdrop-filter: blur(18px) saturate(1.6);
    border-bottom: 1px solid rgba(255, 90, 0, .08);
    box-shadow: 0 2px 18px rgba(36, 31, 27, .05);
}

/* Round tonal chips for the action icons.
   v483 — 40px chips around 24px glyphs made the bar top-heavy; the chip and the glyph
   both come down a size so the header sits quieter above the page. */
.mf-appbar .mud-icon-button {
    width: 34px;
    height: 34px;
    padding: 7px;
    border-radius: 50%;
    background: rgba(255, 90, 0, .06);
    border: 1px solid rgba(255, 90, 0, .10);
    transition: background .18s ease, transform .18s cubic-bezier(.34, 1.56, .64, 1), border-color .18s ease;
}

.mf-appbar .mud-icon-button .mud-icon-root {
    font-size: 19px;
    width: 19px;
    height: 19px;
}

/* The avatar is the one round thing that should not shrink to a chip, but it was sized
   to the old 40px chips — bring it in line with the new ones. */
.mf-appbar .mud-avatar {
    width: 34px;
    height: 34px;
    font-size: 14px;
}

.mf-appbar .mud-icon-button:hover {
    background: rgba(255, 90, 0, .13);
    border-color: rgba(255, 90, 0, .25);
    transform: scale(1.08);
}

.mf-appbar .mud-icon-button:active { transform: scale(.92); }

/* Avatar: crisp ring with a white gap + soft glow. */
.mf-appbar .mud-avatar {
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #FF5A00, 0 5px 14px rgba(255, 90, 0, .28);
    transition: transform .18s cubic-bezier(.34, 1.56, .64, 1), box-shadow .18s ease;
}

.mf-appbar .mud-avatar:hover {
    transform: scale(1.07);
    box-shadow: 0 0 0 2px #FF5A00, 0 8px 20px rgba(255, 90, 0, .40);
}

/* Brand: softer squircle with depth; name tightened. */
.mf-brand-mark {
    border-radius: 14px;
    box-shadow: 0 6px 16px rgba(255, 90, 0, .30), inset 0 1px 0 rgba(255, 255, 255, .35);
}

.mf-brand-name {
    font-weight: 800;
    letter-spacing: -.4px;
}

/* Live recording waveform canvas. */
.mf-chat-wave {
    flex: 1;
    min-width: 0;
    max-width: 260px;
    height: 34px;
}

/* (App bar stays full-width — the floating-pill variant was rejected.
   The frosted look from "App bar v2" above remains in effect.) */

/* ---------- Floating chat bubble (Track page + active delivery) ---------- */
@keyframes mfFabPulse {
    0% { box-shadow: 0 12px 28px rgba(255, 90, 0, .45), 0 0 0 0 rgba(255, 90, 0, .40); }
    70% { box-shadow: 0 12px 28px rgba(255, 90, 0, .45), 0 0 0 16px rgba(255, 90, 0, 0); }
    100% { box-shadow: 0 12px 28px rgba(255, 90, 0, .45), 0 0 0 0 rgba(255, 90, 0, 0); }
}

.mf-chat-fab {
    position: fixed;
    inset-inline-end: 16px;
    bottom: calc(96px + env(safe-area-inset-bottom));
    z-index: 1295;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #FF5A00, #FF7E33);
    animation: mfFadeUp .35s ease both, mfFabPulse 2.6s ease-out 1s infinite;
    transition: transform .16s cubic-bezier(.34, 1.56, .64, 1);
}

.mf-chat-fab:hover { transform: scale(1.1); }
.mf-chat-fab:active { transform: scale(.9); }

.mf-chat-fab .mud-icon-root { font-size: 26px; }

@media (min-width: 600px) {
    .mf-chat-fab { bottom: 26px; inset-inline-end: 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .mf-chat-fab { animation: none; }
}

/* ---------- Courier identity on the tracking page ---------- */
.mf-courier-photo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #FF5A00, 0 6px 14px rgba(255, 90, 0, .25);
}

.mf-courier-fallback {
    display: grid;
    place-items: center;
    font-size: 26px;
    background: #FFF1E8;
}

.mf-plate {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 3px;
    padding: 2px 10px;
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 1.5px;
    font-family: Consolas, 'Roboto Mono', monospace;
    color: #241F1B;
    background: #FFD84D;
    border: 1.5px solid #241F1B;
    box-shadow: 0 2px 5px rgba(36, 31, 27, .18);
}

/* Breathing room between the language chip and the profile avatar. */
.mf-appbar .mud-avatar { margin-inline-start: 12px; }

/* Basket count: overlay the icon corner on idle tabs; inline in the active pill. */
.mf-nav-item { position: relative; }

.mf-nav-item:not(.active) .mf-nav-badge {
    position: absolute;
    top: 5px;
    inset-inline-start: calc(50% + 4px);
    margin: 0;
    min-width: 17px;
    height: 17px;
    font-size: 10px;
    border: 2px solid #fff;
}

/* ==================================================================
   Per-language typography — mf-lang.js stamps <html lang="…">
   Arabic → Cairo, Persian/Urdu → Vazirmatn, Hindi → Noto Sans
   Devanagari, Chinese/Japanese → native system stacks. MudBlazor icons
   are SVG, so a blanket font override is safe.
   ================================================================== */
html[lang="ar"] body, html[lang="ar"] .mud-typography, html[lang="ar"] button,
html[lang="ar"] input, html[lang="ar"] .mud-input, html[lang="ar"] .mud-chip, html[lang="ar"] .mud-button-root {
    font-family: 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
}

html[lang="fa"] body, html[lang="fa"] .mud-typography, html[lang="fa"] button,
html[lang="fa"] input, html[lang="fa"] .mud-input, html[lang="fa"] .mud-chip, html[lang="fa"] .mud-button-root,
html[lang="ur"] body, html[lang="ur"] .mud-typography, html[lang="ur"] button,
html[lang="ur"] input, html[lang="ur"] .mud-input, html[lang="ur"] .mud-chip, html[lang="ur"] .mud-button-root {
    font-family: 'Vazirmatn', 'Cairo', 'Segoe UI', Tahoma, sans-serif !important;
}

html[lang="hi"] body, html[lang="hi"] .mud-typography, html[lang="hi"] button,
html[lang="hi"] input, html[lang="hi"] .mud-input, html[lang="hi"] .mud-chip, html[lang="hi"] .mud-button-root {
    font-family: 'Noto Sans Devanagari', 'Segoe UI', sans-serif !important;
}

html[lang="zh"] body, html[lang="zh"] .mud-typography, html[lang="zh"] button,
html[lang="zh"] input, html[lang="zh"] .mud-input, html[lang="zh"] .mud-chip, html[lang="zh"] .mud-button-root {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Noto Sans SC', sans-serif !important;
}

html[lang="ja"] body, html[lang="ja"] .mud-typography, html[lang="ja"] button,
html[lang="ja"] input, html[lang="ja"] .mud-input, html[lang="ja"] .mud-chip, html[lang="ja"] .mud-button-root {
    font-family: 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Noto Sans JP', sans-serif !important;
}

/* ---------- Chat: fullscreen image viewer + upload progress ---------- */
.mf-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1600;
    background: rgba(12, 10, 8, .90);
    backdrop-filter: blur(6px);
    display: grid;
    place-items: center;
    cursor: zoom-out;
    animation: mfFadeUp .18s ease both;
}

.mf-lightbox img {
    max-width: 96vw;
    max-height: 88vh;
    border-radius: 14px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, .6);
}

.mf-lightbox-close {
    position: absolute;
    top: calc(14px + env(safe-area-inset-top));
    inset-inline-end: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #fff;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(8px);
}

@keyframes mfUploadSlide {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

.mf-upload-bar {
    height: 6px;
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 90, 0, .15);
}

.mf-upload-bar i {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: 999px;
    background: linear-gradient(90deg, #FF5A00, #FF9A5C);
    animation: mfUploadSlide 1.1s cubic-bezier(.42, 0, .34, 1) infinite;
}

/* ==================================================================
   Mobile compact typography — desktop sizes read huge on phones.
   ================================================================== */
@media (max-width: 600px) {
    .mud-typography-h4 { font-size: 23px; }
    .mud-typography-h5 { font-size: 19px; }
    .mud-typography-h6 { font-size: 16.5px; }
    .mud-typography-subtitle1 { font-size: 15px; }
    .mud-typography-subtitle2 { font-size: 13.5px; }
    .mud-typography-body1 { font-size: 14.5px; }
    .mud-typography-body2 { font-size: 13px; }
    .mud-button-root { font-size: 13.5px; }
    .mud-radio .mud-typography, .mud-checkbox .mud-typography { font-size: 14.5px; }
    .mud-input, .mud-input input { font-size: 14.5px; }
    .mud-input-label { font-size: 13.5px; }
    .mud-chip { font-size: 12px; }
    .mud-alert { font-size: 13.5px; }
}

/* Mobile: buttons trimmed further (user prefers compact controls). */
@media (max-width: 600px) {
    .mud-button-root { min-height: 36px; }
    .mud-button-filled, .mud-button-outlined, .mud-button-text {
        padding: 7px 14px;
        font-size: 13px;
    }
    .mud-button-filled-size-large, .mud-button-outlined-size-large {
        height: 44px;
        padding: 9px 18px;
        font-size: 14px;
    }
    .dlv-cta { padding: 13px 16px; font-size: 14.5px; }
    .dlv-toggle { padding: 13px 16px; font-size: 14.5px; }
}

/* App bar: explicit gaps so the icon cluster never touches in LTR or RTL. */
.mf-appbar .mud-toolbar { gap: 6px; }
.mf-appbar .mud-icon-button { margin-inline: 2px; }
.mf-appbar .mud-avatar { margin-inline-start: 8px; }
.mf-brand { margin-inline-end: 10px; }

/* Arabic-script fonts (Cairo/Vazirmatn) run visually larger — scale down a notch. */
html[lang="ar"] .mud-typography-h4, html[lang="fa"] .mud-typography-h4, html[lang="ur"] .mud-typography-h4 { font-size: 21px; }
html[lang="ar"] .mud-typography-h5, html[lang="fa"] .mud-typography-h5, html[lang="ur"] .mud-typography-h5 { font-size: 17.5px; }
html[lang="ar"] .mud-typography-h6, html[lang="fa"] .mud-typography-h6, html[lang="ur"] .mud-typography-h6 { font-size: 15.5px; }
html[lang="ar"] .mud-typography-subtitle1, html[lang="fa"] .mud-typography-subtitle1, html[lang="ur"] .mud-typography-subtitle1 { font-size: 14px; }
html[lang="ar"] .mud-typography-subtitle2, html[lang="fa"] .mud-typography-subtitle2, html[lang="ur"] .mud-typography-subtitle2 { font-size: 12.5px; }
html[lang="ar"] .mud-typography-body1, html[lang="fa"] .mud-typography-body1, html[lang="ur"] .mud-typography-body1 { font-size: 13.5px; }
html[lang="ar"] .mud-typography-body2, html[lang="fa"] .mud-typography-body2, html[lang="ur"] .mud-typography-body2 { font-size: 12.5px; }
html[lang="ar"] .mud-button-root, html[lang="fa"] .mud-button-root, html[lang="ur"] .mud-button-root { font-size: 12.5px; }
html[lang="ar"] .mud-input, html[lang="ar"] .mud-input input, html[lang="fa"] .mud-input, html[lang="fa"] .mud-input input,
html[lang="ur"] .mud-input, html[lang="ur"] .mud-input input { font-size: 13.5px; }
html[lang="ar"] .mud-input-label, html[lang="fa"] .mud-input-label, html[lang="ur"] .mud-input-label { font-size: 12.5px; }
html[lang="ar"] .mud-radio .mud-typography, html[lang="fa"] .mud-radio .mud-typography, html[lang="ur"] .mud-radio .mud-typography { font-size: 13.5px; }
html[lang="ar"] .mud-chip, html[lang="fa"] .mud-chip, html[lang="ur"] .mud-chip { font-size: 11.5px; }

/* v486 — the app bar spaces its items with MudBlazor's PHYSICAL mr-* utilities
   (.mf-brand carries mr-6, the cart mr-2, the mobile search mr-1). Those never flip, so on
   an RTL page the brand's 24px gap sat between the logo and the right edge instead of
   between the logo and the nav — the mark floated off the corner with the nav crowded up
   against it. Re-stated logically, and scoped to the bar so no other mr-* is touched.
   MudBlazor's spacing scale is 4px per step: mr-1 = 4, mr-2 = 8, mr-6 = 24. */
[dir="rtl"] .mf-appbar .mr-1 { margin-right: 0 !important; margin-left: 4px !important; }
[dir="rtl"] .mf-appbar .mr-2 { margin-right: 0 !important; margin-left: 8px !important; }
[dir="rtl"] .mf-appbar .mr-6 { margin-right: 0 !important; margin-left: 24px !important; }

/* Top bar: slimmer icon chips + avatar.
   v486 — THIS is the block that decides the header's size; the earlier .mf-brand-* and
   .mf-appbar rules near the top of the file are all overridden here, so shrinking them
   there alone changed nothing on screen. Everything comes down one step: the logo and
   avatar to 30px, the chips to 31px with 17px glyphs, the wordmark to 16px. */
.mf-appbar .mud-icon-button {
    width: 31px;
    height: 31px;
    padding: 6px;
}

.mf-appbar .mud-icon-button .mud-icon-root { font-size: 17px; }

.mf-appbar .mud-avatar {
    width: 30px;
    height: 30px;
    font-size: 13px;
}

.mf-appbar .mud-avatar span { font-size: 14px !important; }

.mf-brand-mark {
    width: 30px;
    height: 30px;
    font-size: 16px;
}

.mf-brand-name { font-size: 16px; }

/* New client logo. */
.mf-brand-logo {
    width: 30px;
    height: 30px;
    display: block;
    border-radius: 10px;
    box-shadow: 0 4px 11px rgba(255, 90, 0, .30);
    transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}

.mf-brand:hover .mf-brand-logo { transform: rotate(-6deg) scale(1.08); }

.mf-login-logo img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    object-fit: contain;
}

/* Loader: brand logo in the spinning core (kept upright by the reverse spin)
   + "Wajibat" wordmark. Overrides the earlier display:none on .lph. */
.mf-loader-core .lph {
    display: block;
    width: 72%;
    height: 72%;
    object-fit: contain;
    border-radius: 14px;
    filter: drop-shadow(0 4px 10px rgba(240, 68, 0, .30));
}

.mf-loader-page .mf-loader-brand {
    position: relative;
    z-index: 2;
    margin-top: 2px;
}

/* ---------- Dish details: facts + ingredients ---------- */
.mf-dish-facts {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
}

.mf-fact {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--mud-palette-gray-lighter);
    border: 1px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-secondary);
}

.mf-fact.veg {
    background: #E9F9F0;
    border-color: rgba(18, 161, 80, .30);
    color: #0E8442;
}

.mf-fact.hot {
    background: #FDECEC;
    border-color: rgba(229, 72, 77, .35);
    color: #C92A2A;
}

.mf-dish-sec {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding-top: 12px;
    margin-bottom: 14px;
}

.mf-ing-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.mf-ing-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 600;
    background: #FFF7F2;
    border: 1px solid rgba(255, 90, 0, .16);
    color: var(--mud-palette-text-primary);
    animation: mfFadeUp .3s ease both;
}

.mf-ing-chip .em { font-size: 15px; }

.mf-ing-chip:nth-child(2) { animation-delay: .04s; }
.mf-ing-chip:nth-child(3) { animation-delay: .08s; }
.mf-ing-chip:nth-child(4) { animation-delay: .12s; }
.mf-ing-chip:nth-child(5) { animation-delay: .16s; }
.mf-ing-chip:nth-child(6) { animation-delay: .20s; }
.mf-ing-chip:nth-child(7) { animation-delay: .24s; }

/* Stepper labels: wrap to two lines instead of clipping ("Ready for pi…"). */
.dlv-step .lb {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.15;
    max-height: 2.4em;
}

/* ==================================================================
   Login v3 — animated real-photo backdrop (Ken Burns crossfade)
   and a segmented sign-in/apply toggle that works in RTL.
   ================================================================== */
@keyframes mfKenA {
    0% { opacity: 1; transform: scale(1) translateX(0); }
    42% { opacity: 1; }
    52% { opacity: 0; transform: scale(1.10) translateX(-2%); }
    90% { opacity: 0; }
    100% { opacity: 1; transform: scale(1) translateX(0); }
}

@keyframes mfKenB {
    0% { opacity: 0; transform: scale(1.08) translateX(2%); }
    42% { opacity: 0; }
    52% { opacity: 1; }
    90% { opacity: 1; transform: scale(1.16) translateX(0); }
    100% { opacity: 0; }
}

.mf-login-bg {
    position: relative;
    overflow: hidden;
    /* Square by force: this surface is the whole viewport, and any inherited paper
       or dialog radius leaves bare corners peeking through behind it. */
    border-radius: 0 !important;
    /* Layered, not flat: a warm key light top-right, a deep shadow pooling bottom-left,
       and a slow falloff to near-black-orange — reads as depth instead of a paint fill. */
    background:
        radial-gradient(1000px 640px at 82% -12%, rgba(255, 176, 102, .42) 0%, rgba(255, 176, 102, 0) 62%),
        radial-gradient(820px 560px at -12% 112%, rgba(64, 14, 0, .58) 0%, rgba(64, 14, 0, 0) 60%),
        linear-gradient(158deg, #FF6A12 0%, #E85000 48%, #8F2A00 100%);
}

/* Fine grain over the gradients — the same matte texture as the app's ambient layer,
   and the difference between "gradient" and "material". */
.mf-login-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .055;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mf-login-bg > * { position: relative; z-index: 1; }

/* The dialog SHELL is square — it is the full viewport, and any radius on it leaves
   bare corners showing through. Only the shell: the white card inside keeps its own
   rounding, which is why this deliberately does not touch every paper in the dialog. */
.mf-signin-dialog,
.mf-signin-dialog .mud-dialog,
.mf-signin-dialog .mud-dialog-content {
    border-radius: 0 !important;
}

.mf-signin-dialog .mf-login-card { border-radius: 22px !important; }

/* As a DIALOG the login is a veil, not a wall: the shop stays visible behind it,
   dimmed and blurred — the same treatment as the language screen. The aurora
   background remains on the standalone page, where there is nothing behind to show.

   The class lands ON the dialog element, so it is matched directly here; a descendant
   selector matched nothing and left the default white paper showing. */
.mf-signin-dialog,
.mf-signin-dialog .mud-dialog {
    background: transparent !important;
    box-shadow: none !important;
}

/* MudBlazor's own scrim already dims the page — a second heavy layer on top of it
   turns "blurred shop" back into "brown wall". This only softens. */
.mf-signin-dialog .mf-login-bg {
    background: rgba(28, 12, 2, .30) !important;
    -webkit-backdrop-filter: blur(8px) saturate(1.15);
    backdrop-filter: blur(8px) saturate(1.15);
}

/* Grain and vignette belong to the aurora; over a live page they just read as dirt. */
.mf-signin-dialog .mf-login-bg::before { content: none; }
.mf-signin-dialog .mf-login-shade { display: none; }

.mf-login-card {
    background: rgba(255, 255, 255, .96) !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 30px 80px rgba(20, 8, 0, .45) !important;
}

/* Segmented toggle. */
.mf-login-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--mud-palette-gray-light);
    border: 1px solid var(--mud-palette-lines-default);
}

.mf-login-tabs button {
    flex: 1;
    border: none;
    cursor: pointer;
    padding: 9px 10px;
    border-radius: 999px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    color: var(--mud-palette-text-secondary);
    background: transparent;
    transition: all .2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mf-login-tabs button.on {
    background: linear-gradient(135deg, #FF5A00, #FF7E33);
    color: #fff;
    box-shadow: 0 4px 12px rgba(255, 90, 0, .35);
}

/* Inline quantity stepper on menu rows. */
.mf-qty-inline {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    background: #FFF1E8;
    border: 1px solid rgba(255, 90, 0, .25);
    border-radius: 999px;
    padding: 0 2px;
    flex-shrink: 0;
}

.mf-qty-inline b {
    min-width: 16px;
    text-align: center;
    font-size: 13px;
    color: #E04E00;
}

/* A quiet vignette so the card pops without flattening the aurora behind it. */
.mf-login-shade {
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 90% at 50% 45%, transparent 40%, rgba(30, 8, 0, .38) 100%);
}

/* Kill the decorative hover "+" on menu cards — sticky :hover on touch made
   it look like a second add button. Real controls only. */
.mf-menu-item::after { content: none !important; display: none !important; }

/* Wave v2 — an energetic greeting burst, then a natural rest. */
@keyframes mfWaveBurst {
    0%, 55%, 100% { transform: rotate(0deg) scale(1); }
    58% { transform: rotate(16deg) scale(1.18) translateY(-2px); }
    64% { transform: rotate(-12deg) scale(1.18); }
    70% { transform: rotate(18deg) scale(1.22) translateY(-3px); }
    76% { transform: rotate(-10deg) scale(1.18); }
    82% { transform: rotate(12deg) scale(1.12); }
    88% { transform: rotate(-4deg) scale(1.05); }
    94% { transform: rotate(2deg) scale(1); }
}

.mf-wave {
    animation: mfWaveBurst 3.4s ease-in-out infinite;
    transform-origin: 75% 80%;
    will-change: transform;
}

/* Matching heartbeat for the Favorites circle. */
@keyframes mfHeartBeat {
    0%, 40%, 100% { transform: scale(1); }
    46% { transform: scale(1.22); }
    52% { transform: scale(1); }
    58% { transform: scale(1.16); }
    66% { transform: scale(1); }
}

.mf-beat { animation: mfHeartBeat 2.8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .mf-wave, .mf-beat { animation: none; }
}

/* ==================================================================
   Partner menu manager v2 (pmn-*)
   ================================================================== */
.pmn-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}

.pmn-stat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(36, 31, 27, .04), 0 8px 20px rgba(36, 31, 27, .05);
    animation: mfFadeUp .3s ease both;
}

.pmn-stat .ic {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 17px;
    background: #FFF1E8;
    flex-shrink: 0;
}

.pmn-stat.good .ic { background: #E9F9F0; }
.pmn-stat.bad .ic { background: #FDECEC; }
.pmn-stat.star .ic { background: #FFF6E0; }

.pmn-stat .v { font-size: 18px; font-weight: 800; line-height: 1.1; }
.pmn-stat .k { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--mud-palette-text-secondary); }

.pmn-toolbar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 16px;
}

.pmn-search {
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px 4px 14px;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-lines-default);
    transition: border-color .15s ease, box-shadow .15s ease;
}

.pmn-search:focus-within {
    border-color: #FF5A00;
    box-shadow: 0 0 0 3px rgba(255, 90, 0, .12);
}

.pmn-search input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    font: inherit;
    font-size: 14px;
    padding: 8px 0;
}

.pmn-cat {
    border-radius: 20px;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 1px 2px rgba(36, 31, 27, .04), 0 10px 26px rgba(36, 31, 27, .05);
    padding: 14px 16px 16px;
    margin-bottom: 16px;
    animation: mfFadeUp .3s ease both;
}

.pmn-cat-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.pmn-cat-badge {
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #FF5A00, #FF8A4D);
    box-shadow: 0 4px 10px rgba(255, 90, 0, .3);
}

.pmn-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 12px;
}

.pmn-dish {
    border-radius: 16px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
    animation: mfFadeUp .28s ease both;
}

.pmn-dish:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 90, 0, .4);
    box-shadow: 0 12px 28px rgba(255, 90, 0, .12);
}

.pmn-dish.off { opacity: .72; }

.pmn-dish-ph {
    position: relative;
    height: 92px;
    background: linear-gradient(135deg, #FFF1E8, #FFE3D1);
    display: grid;
    place-items: center;
}

.pmn-dish-ph img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pmn-dish.off .pmn-dish-ph img { filter: grayscale(.8); }

.pmn-dish-ph .em { font-size: 40px; }

.pmn-star {
    position: absolute;
    top: 7px;
    inset-inline-start: 7px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    color: #fff;
    background: linear-gradient(135deg, #F5A623, #E08A0B);
    box-shadow: 0 3px 8px rgba(224, 138, 11, .4);
}

.pmn-off {
    position: absolute;
    bottom: 7px;
    inset-inline-end: 7px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: #fff;
    background: rgba(36, 31, 27, .75);
    backdrop-filter: blur(4px);
}

.pmn-dish-body { padding: 10px 12px 8px; }

.pmn-dish-foot {
    display: flex;
    align-items: center;
    margin-top: 4px;
}

/* Heartbeat animation removed at user request. */
.mf-beat { animation: none !important; }


/* ==================================================================
   Hero header animation v3 — the whole header lives, the hand does not.
   ================================================================== */
.mf-wave { animation: none !important; }

/* Diagonal light sheen sweeping across the header. */
@keyframes mfHeroSheen {
    0% { transform: translateX(-160%) skewX(-18deg); }
    55%, 100% { transform: translateX(220%) skewX(-18deg); }
}

.mf-hero::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 45%;
    border-radius: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .16), transparent);
    animation: mfHeroSheen 7s ease-in-out infinite;
    pointer-events: none;
}

/* Soft orb drifting around the header. */
@keyframes mfHeroOrb {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: .5; }
    33% { transform: translate(-9vw, 14px) scale(1.25); opacity: .8; }
    66% { transform: translate(-16vw, -8px) scale(1.05); opacity: .55; }
}

.mf-hero::before {
    content: "";
    position: absolute;
    top: -60px;
    inset-inline-end: -40px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(255, 255, 255, .22), transparent 70%);
    animation: mfHeroOrb 11s ease-in-out infinite;
    pointer-events: none;
}

/* The content itself breathes gently. */
@keyframes mfHeroBreathe {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

.mf-hero-inner {
    position: relative;
    z-index: 1;
    animation: mfHeroBreathe 5.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .mf-hero::before, .mf-hero::after, .mf-hero-inner { animation: none; }
}

/* Partner dish cards: pin the photo inside its 96px header — the image was
   escaping the grid container and covering the name/price. */
.pmn-dish { display: flex; flex-direction: column; }

.pmn-dish-ph {
    position: relative;
    height: 96px;
    min-height: 96px;
    overflow: hidden;
    display: block;
}

.pmn-dish-ph img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pmn-dish-ph .em {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 40px;
}

.pmn-dish-body {
    position: relative;
    z-index: 1;
    background: var(--mud-palette-surface);
    flex: 1;
}

.pmn-dish-body .mud-typography-subtitle2 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 1.2em;
}

/* ---------- Partner store-photo gallery (Settings) ---------- */
.pmn-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.pmn-shot {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.pmn-shot img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pmn-shot .x {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s ease;
}

.pmn-shot .x:hover { background: #d32f2f; }

.pmn-shot.add {
    border: 2px dashed var(--mud-palette-lines-default);
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    transition: border-color .15s ease, color .15s ease;
}

.pmn-shot.add:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

.pmn-shot.add:disabled { cursor: wait; opacity: .7; }

/* ---------- Customer banner slideshow (partner-uploaded photos) ---------- */
/* Stacked absolutely-positioned photos; each fades in for its slot and drifts
   (Ken Burns). Single photo = static cover; 2-4 photos = timed crossfade via
   the shared keyframes below + per-image animation-delay set inline. */
.mf-rest-banner .bp.gal { opacity: 0; }

.mf-rest-banner.slides.n2 .bp.gal { animation: mfSlide2 8s ease-in-out infinite; }
.mf-rest-banner.slides.n3 .bp.gal { animation: mfSlide3 12s ease-in-out infinite; }
.mf-rest-banner.slides.n4 .bp.gal { animation: mfSlide4 16s ease-in-out infinite; }

/* Only child: keep it visible, no animation needed. */
.mf-rest-banner:not(.slides) .bp.gal { opacity: 1; }

/* Cinematic slideshow: the incoming photo eases in from a soft zoom and
   SETTLES (scale 1.12 → 1.04), drifts slowly sideways while it holds, then
   exits with a gentle zoom-through as the next one lands on top. Each photo
   holds at full opacity until its successor has fully faded in (later
   siblings stack above), so there is never an empty gap — including the loop
   wrap, where the first photo is already opaque underneath the last.
   Alternate photos drift in opposite directions (--kbx) for a living feel. */
.mf-rest-banner .bp.gal,
.mf-dish-slides img { --kbx: -1%; }

.mf-rest-banner .bp.gal:nth-child(even),
.mf-dish-slides img:nth-child(even) { --kbx: 1%; }

@keyframes mfSlide2 {
    0% { opacity: 0; transform: scale(1.12) translateX(calc(var(--kbx) * -1)); animation-timing-function: cubic-bezier(.22, .7, .3, 1); }
    12.5% { opacity: 1; transform: scale(1.04) translateX(0); animation-timing-function: linear; }
    62.5% { opacity: 1; transform: scale(1.1) translateX(var(--kbx)); animation-timing-function: ease-in; }
    75%, 100% { opacity: 0; transform: scale(1.16) translateX(var(--kbx)); }
}

@keyframes mfSlide3 {
    0% { opacity: 0; transform: scale(1.12) translateX(calc(var(--kbx) * -1)); animation-timing-function: cubic-bezier(.22, .7, .3, 1); }
    8.3% { opacity: 1; transform: scale(1.04) translateX(0); animation-timing-function: linear; }
    41.7% { opacity: 1; transform: scale(1.1) translateX(var(--kbx)); animation-timing-function: ease-in; }
    50%, 100% { opacity: 0; transform: scale(1.16) translateX(var(--kbx)); }
}

@keyframes mfSlide4 {
    0% { opacity: 0; transform: scale(1.12) translateX(calc(var(--kbx) * -1)); animation-timing-function: cubic-bezier(.22, .7, .3, 1); }
    6.25% { opacity: 1; transform: scale(1.04) translateX(0); animation-timing-function: linear; }
    31.25% { opacity: 1; transform: scale(1.1) translateX(var(--kbx)); animation-timing-function: ease-in; }
    37.5%, 100% { opacity: 0; transform: scale(1.16) translateX(var(--kbx)); }
}

@media (prefers-reduced-motion: reduce) {
    .mf-rest-banner.slides .bp.gal { animation: none; }
    .mf-rest-banner.slides .bp.gal:first-child { opacity: 1; }
}

/* ---------- Product photo in the dish edit dialog ---------- */
.pmn-dish-photo-edit .pmn-shot { max-width: 200px; }

/* ---------- Product-photo editor in the dish dialog: banner preview + pill actions ---------- */
.pmn-pe {
    position: relative;
    height: 160px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--mud-palette-background-gray), var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-lines-default);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pmn-pe img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pmn-pe .em { font-size: 60px; line-height: 1; }

.pmn-pe .bar {
    position: absolute;
    bottom: 10px;
    inset-inline: 10px;
    display: flex;
    gap: 8px;
    justify-content: center;
    z-index: 1;
}

.pmn-pe-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: rgba(0, 0, 0, .58);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background .15s ease;
}

.pmn-pe-btn:hover { background: rgba(0, 0, 0, .78); }
.pmn-pe-btn.danger:hover { background: #d32f2f; }
.pmn-pe-btn:disabled { opacity: .7; cursor: wait; }

.pmn-pe-tag {
    position: absolute;
    top: 10px;
    inset-inline-end: 10px;
    background: rgba(0, 0, 0, .5);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    backdrop-filter: blur(6px);
}

/* ---------- Product-photo thumbs (dish dialog, partner): tap to pick the main ---------- */
.pmn-pe-thumbs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.pmn-pe-th {
    position: relative;
    width: 72px;
    height: 56px;
    border-radius: 10px;
    overflow: hidden;
    padding: 0;
    border: 2px solid transparent;
    background: var(--mud-palette-background-gray);
    cursor: pointer;
    transition: border-color .15s ease, transform .15s ease;
}

.pmn-pe-th:hover { transform: translateY(-2px); }
.pmn-pe-th.on { border-color: var(--mud-palette-primary); }

.pmn-pe-th img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pmn-pe-th .star {
    position: absolute;
    top: 2px;
    inset-inline-end: 4px;
    color: #fff;
    font-size: 12px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}

.pmn-pe-tag.main { background: var(--mud-palette-primary); }

/* ---------- Customer dish sheet: product photo slideshow (reuses mfSlide2/3/4) ---------- */
.mf-dish-slides {
    position: relative;
    width: 100%;
    height: 190px;
    border-radius: 16px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
}

.mf-dish-slides img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
}

.mf-dish-slides.n2 img { animation: mfSlide2 8s ease-in-out infinite; }
.mf-dish-slides.n3 img { animation: mfSlide3 12s ease-in-out infinite; }
.mf-dish-slides.n4 img { animation: mfSlide4 16s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .mf-dish-slides img { animation: none; }
    .mf-dish-slides img:first-child { opacity: 1; }
}

/* ---------- Partner working-hours rows: day | switch | 10:00 - 23:00 ---------- */
.ph-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ph-row .d {
    flex: 0 0 84px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ph-row .mud-switch { margin: 0; flex: 0 0 auto; }

.ph-row .sep { flex: 0 0 auto; color: var(--mud-palette-text-secondary); }

.ph-time { flex: 1 1 0; min-width: 0; }
.ph-time .mud-input { font-size: 14px; }

.ph-time input {
    text-align: center;
    padding-top: 8px;
    padding-bottom: 8px;
}

.ph-closed {
    flex: 1;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #c62828;
    background: rgba(198, 40, 40, .08);
    border-radius: 999px;
    padding: 7px 0;
}

@media (max-width: 600px) {
    .ph-row .d { flex-basis: 72px; font-size: 12.5px; }
}

/* ---------- "Main" checkbox on photo tiles (store gallery + product thumbs) ---------- */
.pmn-main-ck {
    position: absolute;
    bottom: 5px;
    inset-inline-start: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, .95);
    border-radius: 8px;
    padding: 2px 7px 2px 4px;
    font-size: 11.5px;
    font-weight: 700;
    color: #444;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
    user-select: none;
}

.pmn-main-ck input {
    accent-color: var(--mud-palette-primary);
    width: 14px;
    height: 14px;
    margin: 0;
    cursor: pointer;
}

.pmn-shot.main { border: 2px solid var(--mud-palette-primary); }
.pmn-shot.main .pmn-main-ck { color: var(--mud-palette-primary); }

/* Product thumbs need room for the checkbox */
.pmn-pe-th { width: 104px; height: 78px; }

/* ---------- Partner visits analytics ---------- */
.pv-bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 160px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.pv-col {
    flex: 1 1 0;
    min-width: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    gap: 3px;
}

.pv-col .bar {
    width: 100%;
    max-width: 34px;
    border-radius: 6px 6px 2px 2px;
    background: linear-gradient(180deg, var(--mud-palette-primary), #ff9d6c);
    min-height: 3px;
    transition: height .4s cubic-bezier(.22, .7, .3, 1);
}

.pv-col .n { font-size: 10.5px; font-weight: 700; color: var(--mud-palette-primary); }

.pv-col .lb {
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.pv-prod {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 0;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}

.pv-prod:last-child { border-bottom: none; }

.pv-prod .nm {
    flex: 0 0 38%;
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pv-prod .meter {
    flex: 1;
    height: 8px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    overflow: hidden;
}

.pv-prod .meter .fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--mud-palette-primary), #ff9d6c);
}

.pv-prod .ct { flex: 0 0 auto; font-size: 13px; font-weight: 800; }

/* ---------- Visits v2: command-center hero + polished chart + leaderboard ---------- */
.pv-hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 22px 22px 18px;
    color: #fff;
    background: linear-gradient(135deg, #1c1330 0%, #2a1a3f 45%, #472043 100%);
}

.pv-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .5;
    pointer-events: none;
}

.pv-glow.g1 { width: 340px; height: 340px; background: #ff7a3c; top: -160px; inset-inline-end: -80px; animation: pvGlow 9s ease-in-out infinite alternate; }
.pv-glow.g2 { width: 260px; height: 260px; background: #7c4dff; bottom: -140px; inset-inline-start: -60px; animation: pvGlow 11s ease-in-out infinite alternate-reverse; }

@keyframes pvGlow {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-24px, 18px, 0) scale(1.15); }
}

.pv-hero-top {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.pv-hero-top .t { font-size: 24px; font-weight: 800; letter-spacing: .3px; }
.pv-hero-top .s { font-size: 13px; opacity: .75; max-width: 480px; margin-top: 3px; }

.pv-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    backdrop-filter: blur(6px);
    white-space: nowrap;
}

.pv-live .dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #6dffa9;
    box-shadow: 0 0 8px #6dffa9;
    animation: pvPulse 1.6s ease-in-out infinite;
}

@keyframes pvPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(.6); opacity: .5; }
}

.pv-chips {
    position: relative;
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.pv-chips button {
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(255, 255, 255, .08);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .15s ease, transform .15s ease;
    backdrop-filter: blur(6px);
}

.pv-chips button:hover { transform: translateY(-1px); background: rgba(255, 255, 255, .16); }

.pv-chips button.on {
    background: linear-gradient(90deg, var(--mud-palette-primary), #ff9d6c);
    border-color: transparent;
    box-shadow: 0 4px 14px rgba(255, 122, 60, .45);
}

.pv-tiles {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.pv-tile {
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 16px;
    padding: 12px 14px;
    backdrop-filter: blur(8px);
}

.pv-tile .ic { font-size: 18px; margin-bottom: 4px; }
.pv-tile .v { font-size: 22px; font-weight: 800; line-height: 1.1; }
.pv-tile .k { font-size: 11px; opacity: .7; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 700px) {
    .pv-tiles { grid-template-columns: repeat(2, 1fr); }
    .pv-hero { padding: 18px 16px 14px; }
    .pv-hero-top .t { font-size: 20px; }
}

.pv-card { border-radius: 20px !important; }

/* Chart v2 */
.pv-bars { height: 190px; gap: 5px; }

.pv-col .bar {
    background: linear-gradient(180deg, #ffb28a, var(--mud-palette-primary));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4);
    border-radius: 8px 8px 3px 3px;
    transition: height .5s cubic-bezier(.22, .7, .3, 1), filter .15s ease;
}

.pv-col:hover .bar { filter: brightness(1.12); }

.pv-col.top .bar {
    background: linear-gradient(180deg, #ffd54f, #ff8a3c);
    box-shadow: 0 0 14px rgba(255, 154, 60, .5);
}

.pv-col.top .n { color: #ff8a3c; }

.pv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 26px 0 30px;
    text-align: center;
}

.pv-empty .em { font-size: 42px; margin-bottom: 4px; }

/* Leaderboard v2 */
.pv-prod { gap: 12px; padding: 9px 0; }

.pv-prod .rk {
    flex: 0 0 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12.5px;
    font-weight: 800;
    color: #fff;
    background: var(--mud-palette-lines-default);
}

.pv-prod .rk.r1 { background: linear-gradient(135deg, #ffd54f, #ff9800); box-shadow: 0 2px 8px rgba(255, 152, 0, .4); }
.pv-prod .rk.r2 { background: linear-gradient(135deg, #cfd8dc, #90a4ae); }
.pv-prod .rk.r3 { background: linear-gradient(135deg, #d7a86e, #a1653c); }
.pv-prod .rk.r4 { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }

.pv-prod .th {
    flex: 0 0 46px;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    object-fit: cover;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    background: var(--mud-palette-background-gray);
}

.pv-prod .mid { flex: 1; min-width: 0; }

.pv-prod .nm {
    display: block;
    flex: none;
    font-size: 13.5px;
    font-weight: 700;
    margin-bottom: 5px;
}

.pv-prod .ct {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.1;
    font-size: 15px;
}

.pv-prod .ct small {
    font-size: 10px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

/* ---------- Report switcher: separate, simple reports ---------- */
.pv-seg {
    display: flex;
    gap: 6px;
    background: var(--mud-palette-background-gray);
    border-radius: 999px;
    padding: 5px;
    max-width: 460px;
}

.pv-seg button {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 13.5px;
    font-weight: 700;
    padding: 9px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, box-shadow .2s ease;
    white-space: nowrap;
}

.pv-seg button.on {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-primary);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

.pv-prod .th.av {
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, var(--mud-palette-primary), #ff9d6c);
}

/* ---------- Product discount: struck old price + off badge ---------- */
.mf-old-price {
    margin-inline-start: 6px;
    text-decoration: line-through;
    opacity: .55;
    font-size: .85em;
    font-weight: 500;
}

.mf-off-badge {
    display: inline-block;
    margin-inline-start: 6px;
    background: linear-gradient(90deg, #e53935, #ff7043);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    padding: 1px 7px;
    border-radius: 999px;
    vertical-align: middle;
    box-shadow: 0 1px 5px rgba(229, 57, 53, .4);
}

/* ---------- Per-customer mini report (expandable rows) ---------- */
.pv-click { cursor: pointer; transition: background .15s ease; border-radius: 12px; padding-inline: 6px; }
.pv-click:hover { background: var(--mud-palette-background-gray); }
.pv-click.open { background: var(--mud-palette-background-gray); border-bottom: none; }

.pv-sub {
    margin: 0 6px 8px 44px;
    border-inline-start: 3px solid var(--mud-palette-primary);
    background: var(--mud-palette-background-gray);
    border-radius: 0 12px 12px 0;
    padding: 6px 12px;
    animation: mfFadeUp .25s ease both;
}

.pv-sub-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 0;
    font-size: 12.5px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}

.pv-sub-row:last-child { border-bottom: none; }
.pv-sub-row .no { font-weight: 800; flex: 0 0 auto; }
.pv-sub-row .dt { color: var(--mud-palette-text-secondary); flex: 1; }

.pv-sub-row .st {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(76, 175, 80, .12);
    color: #2e7d32;
}

.pv-sub-row .st.s-cancelled, .pv-sub-row .st.s-rejected { background: rgba(229, 57, 53, .1); color: #c62828; }
.pv-sub-row .am { font-weight: 800; flex: 0 0 auto; }

@media (max-width: 600px) {
    .pv-sub { margin-inline-start: 12px; }
    .pv-sub-row .dt { font-size: 11px; }
}

/* ---------- Reports page: light business style, its own teal accent
   (deliberately different from the dark orange Visits analytics) ---------- */
.rp .pv-col .bar {
    background: linear-gradient(180deg, #4dd0c4, #00897b);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

.rp .pv-col:hover .bar { filter: brightness(1.1); }

.rp .pv-col.top .bar {
    background: linear-gradient(180deg, #26c6da, #00695c);
    box-shadow: 0 0 12px rgba(0, 137, 123, .45);
}

.rp .pv-col.top .n, .rp .pv-col .n { color: #00897b; }

.rp .pv-prod .meter .fill { background: linear-gradient(90deg, #00897b, #4dd0c4); }

.rp .pv-prod .th.av { background: linear-gradient(135deg, #00897b, #4dd0c4); }

.rp .pv-seg button.on { color: #00897b; }

.rp .pv-sub { border-inline-start-color: #00897b; }

/* ---------- Report tables ---------- */
.rp-table { border-radius: 12px; overflow: hidden; }
.rp-table table { width: 100%; }

.rp-table th {
    font-size: 11.5px !important;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--mud-palette-text-secondary) !important;
    background: var(--mud-palette-background-gray);
    white-space: nowrap;
}

.rp-table td { font-size: 13.5px !important; }
.rp-table .num { text-align: end; }
.rp-table .strong { font-weight: 700; }
.rp-table tr.best td { background: rgba(0, 137, 123, .07); }
.rp-table tfoot .total td { font-weight: 800; border-top: 2px solid var(--mud-palette-lines-default); background: var(--mud-palette-background-gray); }
.rp-table .rk { width: 24px; height: 24px; font-size: 11.5px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 800; }
.rp-click { cursor: pointer; }

.rp-detail > td { background: var(--mud-palette-background-gray); padding: 8px 14px 12px !important; }

.rp-inner { width: 100%; border-collapse: collapse; }

.rp-inner th {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--mud-palette-text-secondary);
    text-align: start;
    padding: 4px 8px;
    background: transparent;
}

.rp-inner td { font-size: 12.5px; padding: 5px 8px; border-top: 1px dashed var(--mud-palette-lines-default); }
.rp-inner .num { text-align: end; }
.rp-inner .strong { font-weight: 700; }

.rp-inner .st {
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(76, 175, 80, .12);
    color: #2e7d32;
}

.rp-inner .st.s-cancelled, .rp-inner .st.s-rejected { background: rgba(229, 57, 53, .1); color: #c62828; }

/* ---------- Report toolbar (title + filter) and pager ---------- */
.rp-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.rp-search { max-width: 280px; min-width: 200px; }
.rp-search .mud-input { font-size: 13.5px; }

.rp-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.pv-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.pv-seg button .mud-icon-root { font-size: 17px; }

/* Custom range picker in the reports filter row */
.rp-range { max-width: 240px; }
.rp-range .mud-input { font-size: 13px; }

/* ---------- Report tables v2: bigger, clearer, zebra-striped ---------- */
.rp-table { border: 1px solid var(--mud-palette-lines-default); }

.rp-table table { border-collapse: separate; border-spacing: 0; }

.rp-table th {
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 12px 16px !important;
    color: var(--mud-palette-text-primary) !important;
    border-bottom: 2px solid var(--mud-palette-lines-default) !important;
}

.rp-table td {
    font-size: 14.5px !important;
    padding: 12px 16px !important;
    line-height: 1.35;
}

/* Zebra stripes make long tables scannable */
.rp-table tbody tr:nth-child(even):not(.rp-detail) td { background: var(--mud-palette-background-gray); }
.rp-table tbody tr:hover:not(.rp-detail) td { background: rgba(255, 122, 60, .07); }
.rp .rp-table tbody tr:hover:not(.rp-detail) td { background: rgba(0, 137, 123, .07); }

/* Money column stands out */
.rp-table td.num.strong { color: #00695c; font-variant-numeric: tabular-nums; }
.rp-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Best row clearly marked */
.rp-table tr.best td {
    background: rgba(0, 137, 123, .12) !important;
    font-weight: 700;
    border-inline-start: 3px solid #00897b;
}

.rp-table tfoot .total td {
    font-size: 15px !important;
    padding: 14px 16px !important;
}

.rp-table .rk { width: 28px; height: 28px; font-size: 12.5px; }

/* Nested per-customer table: clearer separation */
.rp-detail > td { padding: 12px 18px 16px !important; }
.rp-inner th { font-size: 11px; padding: 6px 10px; }
.rp-inner td { font-size: 13px; padding: 8px 10px; }

/* Long tables scroll horizontally on phones instead of squeezing */
@media (max-width: 600px) {
    .rp-table { overflow-x: auto; }
    .rp-table th, .rp-table td { padding: 10px 12px !important; white-space: nowrap; }
}

/* ---------- Report tables v3: compact width, no stray cell borders ---------- */
/* Reports read as documents — cap the card width so columns sit together
   instead of stretching across a wide monitor. */
.rp .pv-card { max-width: 860px; }

/* The accent bar belongs on the ROW start only, not on every cell. */
.rp-table tr.best td { border-inline-start: none; }
.rp-table tr.best td:first-child { border-inline-start: 3px solid #00897b; }

/* Numeric columns hug their content instead of drifting away from the labels. */
.rp-table th.num, .rp-table td.num { width: 150px; }

/* ---------- Report tables v4: full cell grid lines ---------- */
.rp-table th, .rp-table td {
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    border-inline-end: 1px solid var(--mud-palette-lines-default);
}

.rp-table th:last-child, .rp-table td:last-child { border-inline-end: none; }
.rp-table tfoot .total td { border-top: 2px solid var(--mud-palette-lines-default); }

/* The nested per-customer table gets grid lines too */
.rp-inner td, .rp-inner th { border: 1px solid var(--mud-palette-lines-default); }
.rp-inner { border-collapse: collapse; background: var(--mud-palette-surface); border-radius: 8px; }

/* ---------- Rank badges inside report tables: always readable ---------- */
.rp-table .rk {
    background: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-lines-default);
    color: var(--mud-palette-text-primary);
}

.rp-table .rk.r1 { background: linear-gradient(135deg, #ffd54f, #ff9800); border-color: transparent; color: #fff; }
.rp-table .rk.r2 { background: linear-gradient(135deg, #b0bec5, #78909c); border-color: transparent; color: #fff; }
.rp-table .rk.r3 { background: linear-gradient(135deg, #d7a86e, #a1653c); border-color: transparent; color: #fff; }

/* ---------- Partner delivery hand-off cards ---------- */
.dh-card {
    border-radius: 18px !important;
    padding: 16px 18px;
    margin-bottom: 12px;
    max-width: 860px;
}

.dh-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.dh-no .n { font-weight: 800; font-size: 16px; }
.dh-no .t { margin-inline-start: 8px; font-size: 12px; color: var(--mud-palette-text-secondary); }

.dh-status {
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(2, 136, 209, .1);
    color: #0277bd;
    white-space: nowrap;
}

.dh-status.s-preparing { background: rgba(255, 152, 0, .12); color: #e65100; }
.dh-status.s-ready { background: rgba(76, 175, 80, .14); color: #2e7d32; }
.dh-status.s-delivered { background: rgba(96, 125, 139, .14); color: #455a64; }

.dh-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.dh-block {
    background: var(--mud-palette-background-gray);
    border-radius: 12px;
    padding: 10px 12px;
}

.dh-block .k { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: var(--mud-palette-text-secondary); margin-bottom: 4px; }
.dh-block .v { font-size: 14px; font-weight: 700; }
.dh-block .v.wait { color: #e65100; }
.dh-block .s { font-size: 12.5px; color: var(--mud-palette-text-secondary); margin-top: 1px; }

.dh-plate {
    display: inline-block;
    margin-top: 5px;
    background: #ffd54f;
    color: #333;
    font-family: Consolas, monospace;
    font-weight: 800;
    font-size: 12.5px;
    padding: 2px 10px;
    border-radius: 6px;
    border: 1.5px solid #c9a227;
}

.dh-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Printable delivery invoice ---------- */
.inv-actions { display: flex; gap: 10px; margin-bottom: 14px; }

.inv {
    max-width: 760px;
    background: #fff;
    color: #1c1c1c;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    padding: 28px 32px;
}

.inv-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 3px solid #1c1c1c;
    padding-bottom: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.inv-store { display: flex; gap: 12px; align-items: center; }
.inv-store .lg { font-size: 40px; }
.inv-store .nm { font-size: 20px; font-weight: 800; }
.inv-store .sub { font-size: 12.5px; color: #555; }

.inv-meta { text-align: end; }
.inv-meta .ttl { font-size: 13px; font-weight: 800; letter-spacing: 2px; color: #777; }
.inv-meta .no { font-size: 22px; font-weight: 800; }
.inv-meta .dt { font-size: 12.5px; color: #555; }

.inv-parties {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.inv-parties .p { border: 1px solid #e2e2e2; border-radius: 10px; padding: 10px 12px; }
.inv-parties .k { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; color: #888; margin-bottom: 4px; }
.inv-parties .v { font-size: 14px; font-weight: 700; }
.inv-parties .s { font-size: 12.5px; color: #555; }

.inv-items { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.inv-items th { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; text-align: start; background: #f4f2ef; padding: 8px 10px; border: 1px solid #ddd; }
.inv-items td { font-size: 13.5px; padding: 8px 10px; border: 1px solid #e2e2e2; }
.inv-items .num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.inv-items .note { font-size: 11.5px; color: #777; }

.inv-totals { margin-inline-start: auto; max-width: 300px; margin-bottom: 16px; }
.inv-totals .row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 4px 0; }
.inv-totals .row.disc { color: #2e7d32; font-weight: 700; }
.inv-totals .row.grand { font-size: 18px; font-weight: 800; border-top: 2px solid #1c1c1c; margin-top: 6px; padding-top: 8px; }

.inv-note { background: #fff8e1; border: 1px dashed #e0c36a; border-radius: 10px; padding: 8px 12px; font-size: 13px; margin-bottom: 16px; }

.inv-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: #777; border-top: 1px solid #e2e2e2; padding-top: 12px; flex-wrap: wrap; }
.inv-foot .brand { font-weight: 800; color: var(--mud-palette-primary); font-size: 14px; }

/* Print: only the invoice, full width, no app chrome */
@media print {
    .mud-appbar, .mud-drawer, .inv-actions, .no-print { display: none !important; }
    .mud-main-content { padding: 0 !important; }
    .mud-container { max-width: 100% !important; padding: 0 !important; }
    .inv { border: none; border-radius: 0; max-width: 100%; padding: 10px 0; }
    body { background: #fff !important; }
}

/* ---------- 80mm market receipt ---------- */
.rcpt {
    width: 302px;
    background: #fff;
    color: #111;
    font-family: Consolas, "Courier New", monospace;
    font-size: 12.5px;
    line-height: 1.45;
    padding: 18px 14px;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .08);
}

.rcpt .c { text-align: center; }
.rcpt .lg { font-size: 30px; line-height: 1.2; }
.rcpt .nm { font-size: 16px; font-weight: 800; letter-spacing: .5px; }
.rcpt .nm2 { font-size: 14px; font-weight: 800; }
.rcpt .sm { font-size: 11.5px; color: #333; }
.rcpt .xs { font-size: 10.5px; color: #666; }

.rcpt .dash {
    border-top: 1px dashed #999;
    margin: 8px 0;
}

.rcpt .row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.rcpt .row.total { font-size: 16px; font-weight: 800; }

.rcpt .item {
    display: flex;
    gap: 6px;
    align-items: baseline;
}

.rcpt .item .q { flex: 0 0 26px; font-weight: 700; }
.rcpt .item .n { flex: 1; word-break: break-word; }
.rcpt .item .p { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.rcpt .inote { margin-inline-start: 32px; font-size: 11px; color: #555; }
.rcpt .wrap { word-break: break-word; }

.rcpt .pay {
    margin-top: 6px;
    font-weight: 800;
    font-size: 12.5px;
}

/* Print: receipt only, sized for 80mm thermal paper */
@media print {
    .rcpt {
        width: 72mm;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        font-size: 11.5px;
    }
}

@page { margin: 6mm; }

/* Receipt extras: section title + fake barcode */
.rcpt .ttl { font-weight: 800; letter-spacing: 1.5px; font-size: 12px; margin-bottom: 4px; }
.rcpt .mono { letter-spacing: 2px; }

.rcpt .bar {
    height: 34px;
    margin: 4px 10px 2px;
    background: repeating-linear-gradient(90deg,
        #111 0 2px, transparent 2px 4px,
        #111 4px 5px, transparent 5px 9px,
        #111 9px 12px, transparent 12px 14px,
        #111 14px 15px, transparent 15px 18px);
}

/* ---------- Receipt design variants (font / size / paper) ---------- */
.rcpt.f-sans { font-family: "Segoe UI", system-ui, sans-serif; }
.rcpt.f-serif { font-family: Georgia, "Times New Roman", serif; }
.rcpt.f-cairo { font-family: "Cairo", "Segoe UI", sans-serif; }

.rcpt.s-small { font-size: 11px; }
.rcpt.s-small .nm { font-size: 14px; }
.rcpt.s-small .row.total { font-size: 14px; }
.rcpt.s-large { font-size: 14px; }
.rcpt.s-large .nm { font-size: 18px; }
.rcpt.s-large .row.total { font-size: 18px; }

.rcpt.p58 { width: 219px; padding: 14px 10px; }

.rcpt .rlogo {
    max-width: 130px;
    max-height: 72px;
    object-fit: contain;
    /* Simulates the black & white thermal print */
    filter: grayscale(1) contrast(1.2);
}

.rcpt .tag { font-style: italic; }
.rcpt .promo { font-weight: 700; }

@media print {
    .rcpt.p58 { width: 48mm; }
}

/* ---------- Invoice designer studio ---------- */
.rd {
    display: grid;
    grid-template-columns: minmax(300px, 430px) 1fr;
    gap: 20px;
    align-items: start;
}

@media (max-width: 900px) {
    .rd { grid-template-columns: 1fr; }
}

.rd-stage {
    position: sticky;
    top: 84px;
    background:
        radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .13) 1px, transparent 0) 0 0 / 22px 22px,
        linear-gradient(160deg, #23222a, #322c3c);
    border-radius: 22px;
    padding: 34px 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-height: 420px;
}

.rd-stage .rcpt { box-shadow: 0 18px 50px rgba(0, 0, 0, .5); border: none; }

.rd-stage-label {
    color: rgba(255, 255, 255, .55);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 3px;
}

.rd-logo-box {
    width: 84px;
    height: 84px;
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
    flex: 0 0 auto;
}

.rd-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; }

.rd-fonts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.rd-font {
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    padding: 10px 4px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    transition: border-color .15s ease, transform .15s ease;
}

.rd-font:hover { transform: translateY(-2px); }
.rd-font.on { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); background: rgba(255, 122, 60, .06); }
.rd-font .x { font-size: 22px; font-weight: 700; color: var(--mud-palette-text-primary); }

.rd-font.f-mono .x { font-family: Consolas, monospace; }
.rd-font.f-sans .x { font-family: "Segoe UI", sans-serif; }
.rd-font.f-serif .x { font-family: Georgia, serif; }
.rd-font.f-cairo .x { font-family: "Cairo", sans-serif; }

/* ---------- Invoice designer v2: hero, studio stage, taped receipt ---------- */
.rdx-hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 24px 26px;
    color: #fff;
    background: linear-gradient(120deg, #351d5c 0%, #5b2a83 55%, #8e3a86 100%);
}

.rdx-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(55px);
    opacity: .55;
    pointer-events: none;
}

.rdx-orb.o1 { width: 300px; height: 300px; background: #ff7ab8; top: -140px; inset-inline-end: -60px; animation: pvGlow 10s ease-in-out infinite alternate; }
.rdx-orb.o2 { width: 240px; height: 240px; background: #6a6cff; bottom: -130px; inset-inline-start: -50px; animation: pvGlow 12s ease-in-out infinite alternate-reverse; }

.rdx-hero-in {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
}

.rdx-hero-in .t { font-size: 24px; font-weight: 800; letter-spacing: .3px; }
.rdx-hero-in .s { font-size: 13px; opacity: .8; max-width: 480px; margin-top: 3px; }

.rdx-hero-actions { display: flex; align-items: center; gap: 8px; }

.rdx-save {
    background: linear-gradient(90deg, #ff8a3c, #ff5f8f) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 8px 22px !important;
    box-shadow: 0 6px 20px rgba(255, 95, 143, .45) !important;
}

/* Control cards: soft, rounded, with a subtle lift on hover */
.rd-controls .mud-paper {
    border-radius: 18px !important;
    transition: box-shadow .2s ease, transform .2s ease;
}

.rd-controls .mud-paper:hover {
    box-shadow: 0 10px 28px rgba(0, 0, 0, .08);
    transform: translateY(-1px);
}

/* Stage v2: toolbar + zoom */
.rdx-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.rdx-zoom {
    display: flex;
    gap: 4px;
    background: rgba(255, 255, 255, .1);
    border-radius: 999px;
    padding: 3px;
}

.rdx-zoom button {
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, .7);
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
}

.rdx-zoom button.on { background: #fff; color: #333; }

/* The receipt sits like a real slip taped to the board */
.rdx-paper {
    position: relative;
    transform-origin: top center;
    transition: transform .25s cubic-bezier(.22, .7, .3, 1);
    animation: rdxDrop .5s cubic-bezier(.22, .7, .3, 1) both;
    rotate: -.6deg;
}

@keyframes rdxDrop {
    from { opacity: 0; translate: 0 -14px; }
    to { opacity: 1; translate: 0 0; }
}

.rdx-tape {
    position: absolute;
    top: -12px;
    left: 50%;
    translate: -50% 0;
    width: 92px;
    height: 26px;
    background: rgba(255, 244, 200, .75);
    border-left: 1px dashed rgba(0, 0, 0, .12);
    border-right: 1px dashed rgba(0, 0, 0, .12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
    rotate: -2deg;
    z-index: 2;
}

/* Torn thermal-paper edges */
.rdx-paper .rcpt {
    border-radius: 0;
    clip-path: polygon(0 6px, 3% 0, 6% 6px, 9% 0, 12% 6px, 15% 0, 18% 6px, 21% 0, 24% 6px, 27% 0, 30% 6px, 33% 0, 36% 6px, 39% 0, 42% 6px, 45% 0, 48% 6px, 51% 0, 54% 6px, 57% 0, 60% 6px, 63% 0, 66% 6px, 69% 0, 72% 6px, 75% 0, 78% 6px, 81% 0, 84% 6px, 87% 0, 90% 6px, 93% 0, 96% 6px, 100% 0,
        100% calc(100% - 6px), 96% 100%, 93% calc(100% - 6px), 90% 100%, 87% calc(100% - 6px), 84% 100%, 81% calc(100% - 6px), 78% 100%, 75% calc(100% - 6px), 72% 100%, 69% calc(100% - 6px), 66% 100%, 63% calc(100% - 6px), 60% 100%, 57% calc(100% - 6px), 54% 100%, 51% calc(100% - 6px), 48% 100%, 45% calc(100% - 6px), 42% 100%, 39% calc(100% - 6px), 36% 100%, 33% calc(100% - 6px), 30% 100%, 27% calc(100% - 6px), 24% 100%, 21% calc(100% - 6px), 18% 100%, 15% calc(100% - 6px), 12% 100%, 9% calc(100% - 6px), 6% 100%, 3% calc(100% - 6px), 0 100%);
    padding-top: 26px;
    padding-bottom: 26px;
}

/* Font/size changes glide instead of snapping */
.rcpt { transition: width .25s ease, font-size .2s ease; }

/* Floating save bar for the invoice designer — always on screen */
.rdx-bar {
    position: fixed;
    bottom: 18px;
    left: 50%;
    translate: -50% 0;
    z-index: 1300;
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(28, 22, 44, .88);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 999px;
    padding: 8px 10px 8px 16px;
    box-shadow: 0 10px 34px rgba(0, 0, 0, .4);
    animation: rdxDrop .4s ease both;
}

/* Room so the bar never covers the last controls */
.rd { padding-bottom: 90px; }

/* ---------- Receipt style options: separators, inverted total, spacing, QR ---------- */
.rcpt .dash.sep-dots { border-top: 2px dotted #777; }
.rcpt .dash.sep-solid { border-top: 1.5px solid #222; }

.rcpt .sepstars {
    text-align: center;
    color: #444;
    font-size: 9px;
    letter-spacing: 2px;
    margin: 7px 0;
    user-select: none;
}

.rcpt .row.total.inv-total {
    background: #111;
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    margin: 2px -4px;
}

.rcpt.sp-compact { line-height: 1.28; }
.rcpt.sp-compact .dash, .rcpt.sp-compact .sepstars { margin: 5px 0; }
.rcpt.sp-relaxed { line-height: 1.75; }
.rcpt.sp-relaxed .dash, .rcpt.sp-relaxed .sepstars { margin: 12px 0; }

/* Decorative tracking QR (template) */
.rcpt .qr {
    width: 76px;
    height: 76px;
    margin: 6px auto 2px;
    background:
        linear-gradient(#111, #111) 0 0 / 22px 22px,
        linear-gradient(#111, #111) 100% 0 / 22px 22px,
        linear-gradient(#111, #111) 0 100% / 22px 22px,
        radial-gradient(circle at 8px 8px, #111 2.5px, transparent 3px) 26px 26px / 11px 11px,
        conic-gradient(from 90deg, #111 25%, transparent 0 50%, #111 0 75%, transparent 0) 30px 4px / 14px 14px,
        conic-gradient(from 180deg, #111 25%, transparent 0 50%, #111 0 75%, transparent 0) 4px 32px / 14px 14px,
        #fff;
    background-repeat: no-repeat, no-repeat, no-repeat, repeat, no-repeat, no-repeat;
    outline: 4px solid #fff;
    box-shadow: inset 0 0 0 2px #fff;
}

.rcpt .qr::after { content: ""; }

/* Separator picker tiles */
.rd-seps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.rd-sep {
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    padding: 8px 4px 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    transition: border-color .15s ease, transform .15s ease;
}

.rd-sep:hover { transform: translateY(-2px); }
.rd-sep.on { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); background: rgba(255, 122, 60, .06); }
.rd-sep .x { font-family: Consolas, monospace; font-size: 13px; font-weight: 700; color: var(--mud-palette-text-primary); letter-spacing: 1px; }

/* ---------- Receipt options v3: header, frame, ink, logo size, stamp, table items ---------- */
.rcpt.hs-big .nm { font-size: 21px; letter-spacing: 1px; text-transform: uppercase; }
.rcpt.hs-boxed .nm {
    display: inline-block;
    border: 2px solid #111;
    padding: 3px 14px;
    margin: 2px auto 4px;
}
.rcpt.hs-boxed { text-align: center; }
.rcpt.hs-boxed > :not(.c):not(.dash):not(.sepstars):not(table):not(.stamp) { text-align: initial; }

.rcpt.fr-box { border: 2px solid #111 !important; }
.rcpt.fr-double { border: 1px solid #111 !important; outline: 1px solid #111; outline-offset: -5px; }

.rcpt.ink-bold { font-weight: 700; }
.rcpt.ink-bold .sm, .rcpt.ink-bold .xs { font-weight: 600; }

.rcpt.ls-small .rlogo { max-width: 80px; max-height: 44px; }
.rcpt.ls-large .rlogo { max-width: 190px; max-height: 110px; }

/* Diagonal payment stamp */
.rcpt { position: relative; }
.rcpt .stamp {
    position: absolute;
    top: 118px;
    inset-inline-end: 10px;
    rotate: -14deg;
    border: 3px double #444;
    border-radius: 8px;
    padding: 3px 12px;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 2px;
    color: #444;
    opacity: .5;
    pointer-events: none;
    z-index: 1;
}

.rcpt .stamp.paid { color: #1b5e20; border-color: #1b5e20; }

/* Items as a bordered mini table */
.rcpt .ritems { width: 100%; border-collapse: collapse; margin: 2px 0; }
.rcpt .ritems th {
    font-size: .82em;
    text-align: start;
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
    padding: 3px 2px;
}
.rcpt .ritems td { padding: 3px 2px; vertical-align: top; border-bottom: 1px dotted #bbb; }
.rcpt .ritems tr:last-child td { border-bottom: none; }
.rcpt .ritems .tq { text-align: center; width: 14%; }
.rcpt .ritems .tp { text-align: end; width: 20%; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Cut line between the two printed copies */
.cutline {
    max-width: 302px;
    text-align: center;
    color: #888;
    font-family: Consolas, monospace;
    font-size: 13px;
    margin: 14px 0;
    white-space: nowrap;
    overflow: hidden;
}

/* Template gallery */
.rd-tpls {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 8px;
}

.rd-tpl {
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    padding: 10px 4px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 10.5px;
    color: var(--mud-palette-text-secondary);
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.rd-tpl:hover {
    transform: translateY(-2px);
    border-color: var(--mud-palette-primary);
    box-shadow: 0 6px 16px rgba(255, 122, 60, .18);
}

.rd-tpl .x { font-size: 12.5px; font-weight: 800; color: var(--mud-palette-text-primary); }
.rd-tpl .x.f-mono { font-family: Consolas, monospace; }
.rd-tpl .x.f-sans { font-family: "Segoe UI", sans-serif; }
.rd-tpl .x.f-serif { font-family: Georgia, serif; }
.rd-tpl .x.f-cairo { font-family: "Cairo", sans-serif; }

/* ---------- Store bills & expenses ---------- */
.bl-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.bl-select { max-width: 210px; min-width: 170px; }

.bl-ico {
    font-size: 20px;
    line-height: 1;
}

.bl-sub {
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.bl-sub.late { color: #c62828; font-weight: 700; }

.bl-rep {
    color: var(--mud-palette-primary);
    font-weight: 800;
    margin-inline-start: 4px;
}

.bl-status {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 800;
    padding: 4px 12px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    transition: filter .15s ease, transform .15s ease;
    user-select: none;
}

.bl-status:hover { filter: brightness(.95); transform: translateY(-1px); }
.bl-status.paid { background: rgba(76, 175, 80, .15); color: #2e7d32; }
.bl-status.due { background: rgba(2, 136, 209, .12); color: #0277bd; }
.bl-status.over { background: rgba(229, 57, 53, .13); color: #c62828; }

.rp-table tr.bl-over td:first-child { border-inline-start: 3px solid #e53935; }

/* Category picker in the bill dialog */
.bl-cats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

.bl-cat {
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    padding: 9px 4px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    transition: border-color .15s ease, transform .15s ease;
}

.bl-cat:hover { transform: translateY(-2px); }
.bl-cat.on { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); background: rgba(255, 122, 60, .07); }
.bl-cat .e { font-size: 20px; line-height: 1.1; }

/* ---------- Stat cards: keep big figures on ONE line ---------- */
.mud-paper .mud-typography-h5 {
    font-variant-numeric: tabular-nums;
    overflow-wrap: normal;
    word-break: keep-all;
}

@media (max-width: 960px) {
    .mud-paper .mud-typography-h5 { font-size: 1.15rem; }
}

@media (max-width: 600px) {
    .mud-paper .mud-typography-h5 { font-size: 1.02rem; line-height: 1.25; }
    .mud-paper .mud-typography-overline { font-size: .62rem; letter-spacing: .5px; }
}

/* Report/bill tables scroll sideways on phones instead of clipping a column */
.rp-table.mud-table .mud-table-container,
.rp-table .mud-table-container { overflow-x: auto; }

@media (max-width: 700px) {
    .rp .pv-card { padding: 14px !important; }
}

/* ---------- Team & payroll ---------- */
.st-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
}

.st-card {
    border-radius: 18px !important;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .2s ease, transform .2s ease;
}

.st-card:hover { box-shadow: 0 10px 26px rgba(0, 0, 0, .09); transform: translateY(-2px); }
.st-card.off { opacity: .62; }

.st-top { display: flex; align-items: center; gap: 11px; }

.st-av {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 50%;
    overflow: hidden;
    background: linear-gradient(135deg, var(--mud-palette-primary), #ff9d6c);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #fff;
}

.st-av.sm { width: 42px; height: 42px; flex-basis: 42px; font-size: 20px; }
.st-av img { width: 100%; height: 100%; object-fit: cover; }

.st-id { flex: 1; min-width: 0; }
.st-id .nm { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-id .rl { font-size: 12px; color: var(--mud-palette-text-secondary); }

.st-paid, .st-due, .st-former {
    font-size: 11px;
    font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.st-paid { background: rgba(76, 175, 80, .15); color: #2e7d32; }
.st-due { background: rgba(255, 152, 0, .16); color: #e65100; }
.st-former { background: var(--mud-palette-background-gray); color: var(--mud-palette-text-secondary); }

.st-rows { display: flex; flex-direction: column; gap: 3px; }
.st-rows > div { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.st-rows .k { color: var(--mud-palette-text-secondary); }
.st-rows .v { font-weight: 700; text-align: end; }

.st-note {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background-gray);
    border-radius: 10px;
    padding: 6px 10px;
}

.st-actions { display: flex; justify-content: flex-end; gap: 2px; margin-top: auto; }

.st-photo-box {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 2px dashed var(--mud-palette-lines-default);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
    flex: 0 0 auto;
}

.st-photo-box img { width: 100%; height: 100%; object-fit: cover; }

.st-mini {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--mud-palette-background-gray);
    font-size: 15px;
}

.st-mini img { width: 100%; height: 100%; object-fit: cover; }

.pr-month {
    font-size: 17px;
    font-weight: 800;
    min-width: 160px;
    text-align: center;
}

.pr-method {
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
}

.pr-calc {
    background: var(--mud-palette-background-gray);
    border-radius: 12px;
    padding: 10px 14px;
}

.pr-calc > div { display: flex; justify-content: space-between; font-size: 13.5px; padding: 3px 0; }
.pr-calc .plus { color: #2e7d32; font-weight: 700; }
.pr-calc .minus { color: #c62828; font-weight: 700; }

.pr-calc .net {
    font-size: 17px;
    font-weight: 800;
    border-top: 2px solid var(--mud-palette-lines-default);
    margin-top: 5px;
    padding-top: 7px;
}

/* ---------- Login inputs stay LTR even in Arabic/Persian/Urdu ----------
   Emails, phone numbers and passwords are always latin — typing them in an
   RTL field puts the caret and the @ sign in the wrong place. */
.mf-login-card input,
.mf-login-card .mud-input-slot,
.mf-login-card textarea {
    direction: ltr !important;
    text-align: left !important;
}

/* The floating label follows the page direction as usual */
html[dir="rtl"] .mf-login-card .mud-input-label {
    direction: rtl;
    text-align: right;
    left: auto;
    right: 0;
    transform-origin: top right;
}

/* ============================================================
   Receipt QR sizes + the public "scan to verify" bill page
   ============================================================ */

.pv-seg-3 { max-width: 360px; }

.rcpt .qrimg { display: block; margin: 6px auto 2px; image-rendering: pixelated; }
.rcpt .qrimg.qr-small { width: 86px; }
.rcpt .qrimg.qr-normal { width: 116px; }
.rcpt .qrimg.qr-large { width: 152px; }
.rcpt.p58 .qrimg.qr-small { width: 70px; }
.rcpt.p58 .qrimg.qr-normal { width: 92px; }
.rcpt.p58 .qrimg.qr-large { width: 118px; }

/* ---------- public shell (no app chrome, no login) ---------- */
.pub-shell {
    min-height: 100vh;
    background:
        radial-gradient(900px 460px at 50% -180px, rgba(255, 90, 0, .16), transparent 70%),
        var(--mud-palette-background);
    padding-bottom: 44px;
}

.pub-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    max-width: 560px;
    margin: 0 auto;
}

.pub-brand { display: flex; align-items: center; gap: 9px; font-weight: 900; font-size: 18px; }
.pub-brand img { width: 30px; height: 30px; }

.pub-wrap { max-width: 560px; margin: 0 auto; padding: 6px 16px 0; }

.bill-card {
    position: relative;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 26px;
    padding: 46px 22px 26px;
    box-shadow: 0 26px 70px rgba(0, 0, 0, .14);
    text-align: center;
}

.bill-seal {
    position: absolute;
    top: -28px;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 28px;
    font-weight: 900;
    color: #fff;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
}

/* RTL keeps the seal centred — translateX flips sign otherwise. */
[dir="rtl"] .bill-seal { transform: translateX(50%); }

.bill-seal.ok { background: linear-gradient(140deg, #13b76a, #0a8f52); }
.bill-seal.bad { background: linear-gradient(140deg, #e2574c, #b3382e); }

.bill-verified { font-size: 19px; font-weight: 900; color: #0a8f52; }
.bill-verified-sub { font-size: 13px; color: var(--mud-palette-text-secondary); margin: 4px 0 18px; }

.bill-bad h1 { font-size: 19px; font-weight: 900; margin: 0; }
.bill-bad p { font-size: 13.5px; color: var(--mud-palette-text-secondary); margin: 6px 0 16px; }

.bill-store {
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: start;
    padding: 12px;
    border-radius: 16px;
    background: var(--mud-palette-background-gray);
    margin-bottom: 14px;
}

.bill-logo { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: none; }
.bill-logo-emoji { display: grid; place-items: center; font-size: 26px; background: var(--mud-palette-surface); }
.bill-store-txt .nm { font-weight: 800; font-size: 15.5px; line-height: 1.2; }
.bill-store-txt .ar { font-size: 12.5px; color: var(--mud-palette-text-secondary); }

.bill-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
    text-align: start;
    margin-bottom: 18px;
}

.bill-meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.bill-meta span { font-size: 11.5px; color: var(--mud-palette-text-secondary); text-transform: uppercase; letter-spacing: .4px; }
.bill-meta b { font-size: 14px; font-weight: 800; overflow-wrap: anywhere; }

.bill-sec {
    text-align: start;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    border-top: 1px dashed var(--mud-palette-lines-default);
    padding-top: 12px;
    margin-bottom: 8px;
}

.bill-items { width: 100%; border-collapse: collapse; text-align: start; margin-bottom: 12px; }
.bill-items td { padding: 7px 0; vertical-align: top; border-bottom: 1px solid var(--mud-palette-lines-default); }
.bill-items td.q { width: 42px; font-weight: 800; color: var(--mud-palette-primary); }
.bill-items td.n { font-size: 14px; overflow-wrap: anywhere; }
.bill-items td.p { width: 92px; text-align: end; font-weight: 700; white-space: nowrap; }

.bill-tot { margin-bottom: 10px; }
.bill-tot > div { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 3px 0; }
.bill-tot > div span:first-child { color: var(--mud-palette-text-secondary); }
.bill-tot .disc span:last-child { color: #0a8f52; font-weight: 700; }

.bill-grand {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: baseline;
    padding: 13px 15px;
    border-radius: 15px;
    background: linear-gradient(135deg, #FF5A00, #ff8a3d);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 10px 24px rgba(255, 90, 0, .3);
}

.bill-grand span:first-child { font-size: 13px; letter-spacing: .6px; text-transform: uppercase; }
.bill-grand span:last-child { font-size: 21px; white-space: nowrap; }

.bill-pay {
    margin-top: 12px;
    padding: 9px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

.bill-pay.paid { background: rgba(19, 183, 106, .14); color: #0a8f52; }
.bill-pay.cash { background: rgba(255, 90, 0, .12); color: #c74600; }

.bill-legal {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 14px 0 4px;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
}

.bill-code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.4px;
    padding: 9px 12px;
    border-radius: 12px;
    background: var(--mud-palette-background-gray);
    overflow-wrap: anywhere;
    direction: ltr;
}

.bill-cta { width: 100%; margin-top: 18px; border-radius: 999px !important; font-weight: 800; }
.bill-foot { margin-top: 12px; font-size: 11.5px; color: var(--mud-palette-text-secondary); }

@media (max-width: 420px) {
    .bill-card { padding: 44px 16px 22px; border-radius: 22px; }
    .bill-meta { grid-template-columns: 1fr; }
    .bill-grand span:last-child { font-size: 19px; }
}

/* ============================================================
   Offers: the home "deals" strip, sale tags and price rows
   ============================================================ */

.mf-deals-title { gap: 8px; }

.mf-deals-spark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background: linear-gradient(135deg, #e53935, #ff7043);
    color: #fff;
    font-weight: 900;
    font-size: 14px;
    box-shadow: 0 3px 10px rgba(229, 57, 53, .38);
}

.mf-deals-sub { margin-inline-start: auto; white-space: nowrap; }

.mf-deal-card {
    min-width: 188px;
    max-width: 188px;
    border-radius: 18px;
    overflow: hidden;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.mf-deal-card:hover {
    transform: translateY(-3px);
    border-color: rgba(229, 57, 53, .35);
    box-shadow: 0 12px 26px rgba(36, 31, 27, .14);
}

.mf-deal-card.shut { opacity: .6; cursor: default; }
.mf-deal-card.shut:hover { transform: none; box-shadow: none; }

.mf-deal-photo {
    position: relative;
    height: 104px;
    background: #FFF3EA;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mf-deal-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mf-deal-photo .em { font-size: 40px; }

.mf-deal-ribbon {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
    background: linear-gradient(135deg, #e53935, #ff7043);
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .2px;
    padding: 3px 9px;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(229, 57, 53, .45);
}

.mf-deal-shut {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20, 12, 6, .5);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
}

.mf-deal-body { padding: 9px 11px 11px; }

.mf-deal-body .nm {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.25;
    unicode-bidi: plaintext;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 34px;
}

.mf-deal-body .ven {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* v488 — an English dish name above an Arabic shop name was being reordered into each
       other on an RTL page. .nm already isolates itself; the shop line needs it too, and
       min-width:0 is what lets a flex child actually ellipsis instead of overflowing. */
    unicode-bidi: plaintext;
    min-width: 0;
}

.mf-deal-body .ven .e { font-size: 13px; flex: none; }

/* ---------- The discounted price, used everywhere a deal is shown ----------
   The old price is the part that looks cheap when left to the browser: the default
   line-through is a thick black bar across the digits. Here it is a hairline in the
   sale red, the digits are tabular so the two prices align, and the new price carries
   the weight. */
.mf-price {
    display: flex;
    align-items: baseline;
    gap: 7px;
    flex-wrap: wrap;
    font-variant-numeric: tabular-nums;
}

.mf-price .now {
    font-size: 15.5px;
    font-weight: 900;
    letter-spacing: -.2px;
    white-space: nowrap;
    background: linear-gradient(135deg, #E04E00, #ff7a33);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* The old price should read as a quiet footnote, not a crossed-out mistake, so it
   sits in a soft pill and is deliberately understated. */
.mf-price .was {
    position: relative;
    font-size: 11px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    /* Opacity here multiplies with the strike's own, so keep it mild: the muted
       colour and small size already do the job of pushing this price back. */
    opacity: .78;
    white-space: nowrap;
    letter-spacing: .1px;
    padding: 1px 5px;
    border-radius: 6px;
    background: rgba(120, 110, 104, .09);
    text-decoration: none;          /* the browser's default bar is replaced below */
}

/* The strike itself: a hairline that fades out at both ends instead of a hard bar
   running edge to edge, in the text's own colour rather than an alarm red. */
.mf-price .was::after {
    content: "";
    position: absolute;
    inset-inline: 5px;
    top: 50%;
    height: 1.5px;
    border-radius: 2px;
    transform: translateY(-50%);
    background: linear-gradient(90deg,
        transparent 0%,
        currentColor 22%,
        currentColor 78%,
        transparent 100%);
}

.mf-price .save {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 800;
    color: #1b7d3f;
    background: linear-gradient(135deg, rgba(27, 125, 63, .14), rgba(67, 160, 71, .10));
    border: 1px solid rgba(27, 125, 63, .18);
    border-radius: 999px;
    padding: 1.5px 8px;
    white-space: nowrap;
}

.mf-price .save::before { content: "↓"; font-size: 9.5px; font-weight: 900; }

/* Inside a deal card the saving sits on its own line under the prices. */
.mf-deal-body .mf-price { margin-top: 7px; }
.mf-deal-body .mf-price .save { flex-basis: 100%; width: fit-content; margin-top: 4px; }

/* The large variant — the dish sheet, where the offer is the headline. */
.mf-price.lg .now { font-size: 26px; letter-spacing: -.6px; }
.mf-price.lg .was { font-size: 13.5px; padding: 2px 7px; border-radius: 7px; }
.mf-price.lg .was::after { inset-inline: 7px; height: 1.5px; }
.mf-price.lg .save { font-size: 12px; padding: 3px 10px; }

/* ---------- Sale tag on a menu row's thumbnail ---------- */
.mf-menu-emoji.onsale { position: relative; overflow: visible; }

.mf-sale-tag {
    position: absolute;
    top: -6px;
    inset-inline-start: -6px;
    background: linear-gradient(135deg, #e53935, #ff7043);
    color: #fff;
    font-size: 10.5px;
    font-weight: 900;
    padding: 2px 7px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(229, 57, 53, .45);
    z-index: 2;
    white-space: nowrap;
}

/* ---------- The offer block inside the dish sheet ---------- */
.mf-dish-deal {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: 9px 14px 9px 9px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(229, 57, 53, .10), rgba(255, 112, 67, .10));
    border: 1px solid rgba(229, 57, 53, .22);
}

[dir="rtl"] .mf-dish-deal { padding: 9px 9px 9px 14px; }

.mf-dish-deal .pct {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 40px;
    padding: 0 8px;
    border-radius: 12px;
    background: linear-gradient(135deg, #e53935, #ff7043);
    color: #fff;
    font-size: 15px;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(229, 57, 53, .4);
}

/* Prices on one line, the saving chip on its own line beneath them. */
.mf-dish-deal .mf-price { max-width: 210px; }
.mf-dish-deal .mf-price .save { flex-basis: 100%; width: fit-content; margin-top: 3px; }

@media (max-width: 420px) {
    .mf-deal-card { min-width: 170px; max-width: 170px; }
    .mf-deals-sub { display: none; }
}

/* Product review state on the partner's menu rows. */
.pmn-review {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 3px;
    font-size: 10.5px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    white-space: nowrap;
    cursor: default;
}

.pmn-review.wait { background: rgba(230, 145, 0, .14); color: #a86500; border: 1px solid rgba(230, 145, 0, .28); }
.pmn-review.no { background: rgba(229, 57, 53, .12); color: #b3382e; border: 1px solid rgba(229, 57, 53, .26); }

.mf-signin-btn { border-radius: 999px !important; font-weight: 800; white-space: nowrap; }

/* ============================================================
   App-bar controls: equal-sized round icon buttons + sign-in pill
   ============================================================ */

/* MudIconButton sizes itself from padding, which made the search button an
   ellipse next to the perfectly round language button. Pin them all to 40x40. */
.mf-appbar .mf-cart-btn,
.mf-appbar .mud-button-root.mud-icon-button {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 50%;
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 90, 0, .09);
    transition: background .15s ease;
}

.mf-appbar .mf-cart-btn:hover,
.mf-appbar .mud-button-root.mud-icon-button:hover { background: rgba(255, 90, 0, .18); }

/* The avatar menu keeps its own shape. */
.mf-appbar .mud-menu .mud-button-root.mud-icon-button { background: none; }

/* ---------- Sign in ---------- */
.mf-signin-btn {
    height: 40px;
    min-width: 0 !important;
    padding: 0 16px !important;
    margin-inline-start: 8px;
    border-radius: 999px !important;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .1px;
    white-space: nowrap;
    background: linear-gradient(135deg, #FF5A00, #ff8a3d) !important;
    box-shadow: 0 4px 14px rgba(255, 90, 0, .34);
    text-transform: none;
}

.mf-signin-btn:hover { box-shadow: 0 6px 18px rgba(255, 90, 0, .45); }
.mf-signin-btn .mud-button-icon-start { margin: 0 6px 0 0; }
[dir="rtl"] .mf-signin-btn .mud-button-icon-start { margin: 0 0 0 6px; }

/* On a narrow phone it becomes a round icon button like its neighbours. */
@media (max-width: 599px) {
    .mf-signin-btn { width: 40px; padding: 0 !important; }
    .mf-signin-btn .lb { display: none; }
    .mf-signin-btn .mud-button-icon-start { margin: 0 !important; }
}

/* ---------- Sign-in sheet: full screen, card centred ---------- */
.mf-signin-dialog .mud-dialog {
    height: 100dvh;
    max-height: 100dvh;
    width: 100vw;
    max-width: 100vw;
    margin: 0;
    border-radius: 0;
}

.mf-signin-dialog .mud-dialog-content { padding: 0 !important; overflow-y: auto; }

/* Centre the card in the full height instead of letting it sit at the top with a
   dead band underneath. On EVERY login surface — the dialog, the /signin/email page,
   the staff apps' signed-out screens — not just the dialog, which is how the page
   version ended up stuck to the top. */
.mf-login-bg {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mf-login-wrap { min-height: 0; width: 100%; padding-block: 24px; }

/* Close button lives inside the card, mirroring the language menu. */
.mf-login-close {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-gray-light);
    color: var(--mud-palette-text-secondary);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, transform .12s ease;
}

.mf-login-close:hover { background: rgba(255, 90, 0, .12); color: #E04E00; }
.mf-login-close:active { transform: scale(.93); }

/* ==========================================================================
   Latin-only fields: email, phone number, password
   ==========================================================================
   These three are never translated and never right-to-left, whatever the
   interface language is. Left to inherit an RTL page they read back to front:
   a "+968" is dragged to the wrong end of the number, an address wraps its
   "@" and dots the wrong way round, and a password reveals in the wrong
   order. So they are pinned left-to-right and left-aligned everywhere — in
   the input while typing and in the readout afterwards.

   Typed inputs are caught automatically; .mf-ltr is for the rest: a password
   field toggled to plain text, a phone printed in a table, an email under a
   name in the account menu. `isolate` is what keeps an inline number from
   being re-ordered by the Arabic sentence around it. */

input[type="email"],
input[type="tel"],
input[type="password"],
.mf-ltr,
.mf-ltr input {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}


/* ---------- "or" divider + Google button on the sign-in card ---------- */

.mf-or {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 18px 0 14px;
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.mf-or::before,
.mf-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--mud-palette-lines-default);
}

/* Google renders its own button in here and owns everything inside, so this only
   centres it. Giving it a width would fight the size Google was asked to draw. */
.mf-gsi {
    display: flex;
    justify-content: center;
    min-height: 44px;
}


/* ---------- The six-digit sign-in code ----------
   Centred rather than left-aligned: a short code reads as one block, not as text.
   Still pinned left-to-right, because digits typed into an RTL field come out
   reversed and the person cannot tell why their correct code keeps failing. */
.mf-code input {
    direction: ltr;
    text-align: center;
    letter-spacing: .5em;
    text-indent: .5em;          /* re-centres: letter-spacing pads only the right */
    font-size: 22px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* The number spinner is meaningless for a code and only gets in the way. */
.mf-code input::-webkit-outer-spin-button,
.mf-code input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mf-code input[type="number"] { -moz-appearance: textfield; appearance: textfield; }


/* ---------- The store's customer book (partner portal) ---------- */

.cust-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 16px;
}

.cust-card { display: flex; flex-direction: column; }

.cust-addr {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cust-note {
    display: block;
    background: var(--mud-palette-gray-light);
    border-radius: 8px;
    padding: 6px 9px;
}

.cust-meta {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    /* Pushes the order button to the bottom so cards of different heights line up. */
    margin-top: auto;
}

/* ---------- Taking an order at the counter ---------- */

.co-items {
    max-height: 46vh;
    overflow-y: auto;
    /* Its own scroll area: the payment and address fields below must stay reachable
       without scrolling past a menu that could be hundreds of items long. */
    padding-inline-end: 4px;
}

.co-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 9px;
    border-radius: 10px;
    border: 1px solid transparent;
}

.co-row.on {
    border-color: rgba(255, 90, 0, .35);
    background: rgba(255, 90, 0, .06);
}

.co-name { flex: 1; min-width: 0; }
.co-name .n { font-weight: 600; font-size: 14px; }
.co-name .p { font-size: 12px; color: var(--mud-palette-text-secondary); }

.co-step { display: flex; align-items: center; gap: 2px; }
.co-step .q { min-width: 22px; text-align: center; font-weight: 800; }

.co-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 15px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--mud-palette-gray-light);
}


/* ==========================================================================
   The store's own QR code — printed for the counter, the window or a table
   ========================================================================== */

.qr-layout {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    align-items: start;
}

@media (max-width: 899px) {
    .qr-layout { grid-template-columns: 1fr; }
}

.qr-controls { position: sticky; top: 88px; }

.qr-link {
    font-size: 12px;
    word-break: break-all;
    color: var(--mud-palette-text-secondary);
}

.qr-stage { display: flex; justify-content: center; }

/* The sheet is always white with black text, whatever theme the shop is using.
   It is going on paper: a dark-mode poster would print as a solid black rectangle. */
.qr-sheet {
    background: #fff;
    color: #111;
    text-align: center;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .10);
    padding: 34px 28px;
    width: 100%;
    max-width: 420px;
}

.qr-sheet .qr-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-bottom: 14px;
}

.qr-sheet .qr-brand .logo { font-size: 26px; line-height: 1; }
.qr-sheet .qr-brand .name { font-size: 19px; font-weight: 800; }

.qr-sheet .qr-head {
    font-size: 25px;
    font-weight: 900;
    line-height: 1.15;
    margin-bottom: 18px;
}

.qr-sheet .qr-img {
    display: block;
    width: 70%;
    max-width: 260px;
    margin: 0 auto;
    /* A QR must stay perfectly square and hard-edged; smoothing costs scans. */
    aspect-ratio: 1;
    image-rendering: pixelated;
}

.qr-sheet .qr-fail {
    display: grid;
    place-items: center;
    border: 2px dashed #c00;
    color: #c00;
    font-size: 13px;
    padding: 20px;
}

.qr-sheet .qr-sub { font-size: 15px; margin-top: 16px; }

.qr-sheet .qr-url {
    font-size: 12px;
    color: #666;
    margin-top: 4px;
    word-break: break-all;
}

/* v489 — the store number, printed small under the link. Deliberately on every layout
   including the sticker: it is the fallback for a camera that will not scan, and it is
   how support finds the shop from a photo of the poster. */
.qr-sheet .qr-id {
    font-size: 11px;
    color: #999;
    margin-top: 2px;
    letter-spacing: .06em;
}

.qr-sheet .qr-foot {
    margin-top: 18px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #FF5A00;
}

/* A table tent is folded down the middle, so each half gets roughly a square. */
.qr-sheet.qr-tent { max-width: 340px; padding: 26px 22px; }
.qr-sheet.qr-tent .qr-head { font-size: 21px; }
.qr-sheet.qr-tent .qr-img { width: 62%; }

/* A sticker is small and read from close up: drop everything but the essentials. */
.qr-sheet.qr-sticker { max-width: 250px; padding: 18px 14px; }
.qr-sheet.qr-sticker .qr-head { font-size: 16px; margin-bottom: 12px; }
.qr-sheet.qr-sticker .qr-img { width: 82%; }
.qr-sheet.qr-sticker .qr-sub { font-size: 12px; margin-top: 10px; }
.qr-sheet.qr-sticker .qr-url { display: none; }
.qr-sheet.qr-sticker .qr-foot { margin-top: 10px; font-size: 9px; }

@media print {
    .mud-appbar, .mud-drawer, .no-print { display: none !important; }
    .mud-main-content { padding: 0 !important; }
    .mud-container { max-width: 100% !important; padding: 0 !important; }
    body { background: #fff !important; }

    .qr-layout { display: block; }

    /* No shadow, no border, and centred on the sheet — printers render a box shadow
       as a grey smear, and the browser would otherwise keep the screen margins. */
    .qr-sheet {
        box-shadow: none;
        border: none;
        margin: 0 auto;
        max-width: 100%;
        page-break-inside: avoid;
    }

    .qr-sheet .qr-img { width: 62%; max-width: 320px; }
}

/* The technical reason a sign-in method failed. Small and quiet — it is for whoever is
   fixing it, not for the customer, but it has to be on screen because this card is the
   only way into the app. */
.mf-diag {
    margin-top: 6px;
    font-family: Consolas, "Courier New", monospace;
    font-size: 11px;
    opacity: .75;
    word-break: break-word;
}

/* The quieter second way in, under the primary button. A link rather than a button on
   purpose: two buttons of equal weight make the customer stop and choose. */
.mf-alt-link {
    text-align: center;
    margin-top: 18px;
    font-size: 14px;
}


/* ==========================================================================
   First-visit language choice — shown before anything else, exactly once
   ========================================================================== */

.mf-langgate {
    position: fixed;
    inset: 0;
    /* Above MudBlazor's dialogs (~1400): nothing may sit on top of this until a
       language exists. */
    z-index: 3000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    /* See-through on purpose: the shop stays visible behind the choice, softly
       blurred, so this reads as a step INTO the app rather than a wall before it. */
    background: rgba(24, 12, 4, .45);
    -webkit-backdrop-filter: blur(7px) saturate(1.1);
    backdrop-filter: blur(7px) saturate(1.1);
}

.mf-langgate-card {
    background: #fff;
    color: #1d1d1f;
    border-radius: 22px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
    padding: 30px 26px;
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    text-align: center;
}

.mf-langgate-card .logo {
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
}

.mf-langgate-card .title {
    font-size: 19px;
    font-weight: 800;
    margin-bottom: 20px;
}

.mf-langgate-card .title .globe { margin-inline-end: 6px; }
.mf-langgate-card .title .sep { color: #FF5A00; margin: 0 6px; }

.mf-langgate-card .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.mf-langgate-card .tile {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1.5px solid #ececec;
    border-radius: 14px;
    background: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}

.mf-langgate-card .tile:hover {
    border-color: #FF5A00;
    background: #FFF4EC;
}

.mf-langgate-card .tile:active { transform: scale(.97); }
.mf-langgate-card .tile .flag { font-size: 22px; line-height: 1; }
.mf-langgate-card .tile .name { flex: 1; text-align: start; }

@media (max-width: 480px) {
    .mf-langgate-card { padding: 22px 16px; }
    .mf-langgate-card .grid { grid-template-columns: repeat(2, 1fr); }
}

/* Wordless header: the logo, then straight into the tiles. */
.mf-langgate-card .logo { margin-bottom: 20px; }


/* ---------- Delivery vs collect-it-yourself ---------- */

/* Two big targets rather than radio buttons: this is the first and most consequential
   choice on the checkout page, and it decides whether an address is even asked for. */
.co-mode {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.co-mode button {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border: 2px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: transparent;
    font: inherit;
    cursor: pointer;
    text-align: start;
    transition: border-color .15s ease, background .15s ease;
}

.co-mode button:hover { border-color: rgba(255, 90, 0, .45); }

.co-mode button.on {
    border-color: #FF5A00;
    background: rgba(255, 90, 0, .07);
}

.co-mode .ico { font-size: 24px; line-height: 1; }
.co-mode .tx { display: flex; flex-direction: column; min-width: 0; }
.co-mode .tx b { font-size: 14px; font-weight: 800; }
.co-mode .tx i { font-style: normal; font-size: 12px; color: var(--mud-palette-text-secondary); }

/* The partner's "this one is collected" flag — loud on purpose. */
.oo-pickup {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #E8F5E9;
    color: #1B5E20;
    border: 1px solid #A5D6A7;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}


/* ---------- "Which business?" — the partner's store gate and switcher ---------- */

.oo-storegate {
    position: fixed;
    inset: 0;
    z-index: 2500;                    /* above the app, below the language gate */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(24, 12, 4, .45);
    -webkit-backdrop-filter: blur(7px) saturate(1.1);
    backdrop-filter: blur(7px) saturate(1.1);
}

.oo-storegate-card {
    background: #fff;
    color: #1d1d1f;
    border-radius: 20px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .28);
    padding: 26px 24px;
    width: 100%;
    max-width: 440px;
    max-height: 88vh;
    overflow-y: auto;
    text-align: center;
}

.oo-store-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 13px 15px;
    margin-bottom: 10px;
    border: 1.5px solid #ececec;
    border-radius: 14px;
    background: #fff;
    font: inherit;
    cursor: pointer;
    text-align: start;
    transition: border-color .15s ease, background .15s ease, transform .1s ease;
}

.oo-store-tile:hover { border-color: #FF5A00; background: #FFF4EC; }
.oo-store-tile:active { transform: scale(.98); }
.oo-store-tile.on { border-color: #FF5A00; }
.oo-store-tile:disabled { opacity: .6; cursor: wait; }
.oo-store-tile .logo { font-size: 26px; line-height: 1; }
.oo-store-tile .tx { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.oo-store-tile .tx b { font-size: 15px; font-weight: 800; }
.oo-store-tile .tx i { font-style: normal; font-size: 12px; color: #777; }


/* ---------- Searchable picker (cuisines) ---------- */

.oo-picker-field { cursor: pointer; }

.oo-picker-list {
    max-height: 52vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* keeps the last tile's shadow from being clipped */
    padding: 2px;
}

.oo-picker-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 13px;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: transparent;
    font: inherit;
    font-size: 15px;
    cursor: pointer;
    text-align: start;
    transition: border-color .12s ease, background .12s ease;
}

.oo-picker-tile:hover { border-color: #FF5A00; background: rgba(255, 90, 0, .06); }
.oo-picker-tile.on { border-color: #FF5A00; background: rgba(255, 90, 0, .09); font-weight: 700; }
.oo-picker-tile .em { font-size: 20px; line-height: 1; }
.oo-picker-tile .nm { flex: 1; }

/* v481 — the picker can hold several types: the main one wears the star,
   the extras a tick, and the tiles stay tappable until the owner is done. */
.oo-picker-main {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f6a723, #f4511e); color: #fff;
    font-size: .72rem; line-height: 1;
}
.oo-picker-tick {
    flex: none; width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #22a05e; color: #fff; font-size: .72rem; font-weight: 900; line-height: 1;
}


/* ---------- Serving windows & promised-day orders ---------- */

/* Weekday chips in the partner's product editor. */
.oo-daychips { display: flex; flex-wrap: wrap; gap: 6px; }

.oo-daychips button {
    padding: 6px 12px;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    background: transparent;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all .12s ease;
}

.oo-daychips button.on {
    border-color: #FF5A00;
    background: rgba(255, 90, 0, .1);
    color: #E04E00;
}

/* The "this order is for a future day" flag on the partner board. */
.oo-scheduled {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #E3F2FD;
    color: #0D47A1;
    border: 1px solid #90CAF9;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}


/* ---------- The dining room ---------- */

.oo-tables-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 14px;
}

.oo-table-card { transition: border-color .15s ease; display: flex; flex-direction: column; }
.oo-table-card.busy { border-color: #FF5A00; }

.oo-table-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 22px;
    background: var(--mud-palette-gray-light);
}

.oo-table-guest {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 90, 0, .07);
    border: 1px solid rgba(255, 90, 0, .25);
    font-size: 13px;
}

.oo-table-guest .who { font-weight: 700; }
.oo-table-guest .since { color: var(--mud-palette-text-secondary); font-size: 12px; }

/* ---------- The 2D floor plan (partner > Tables) ---------- */
.oo-fp-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.oo-fp-floors {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.oo-fp-floortab {
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    border-radius: 999px;
    padding: 6px 14px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: all .15s ease;
}

.oo-fp-floortab:hover { border-color: var(--mud-palette-primary); }

.oo-fp-floortab.on {
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    color: #fff;
}

.oo-fp-floortab .cnt {
    background: rgba(0, 0, 0, .12);
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    padding: 0 5px;
}

.oo-fp-floortab.on .cnt { background: rgba(255, 255, 255, .25); }
.oo-fp-floortab.add { border-style: dashed; color: var(--mud-palette-text-secondary); }

.oo-fp-newfloor {
    border: 1.5px solid var(--mud-palette-primary);
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 13px;
    outline: none;
    width: 150px;
}

/* The room itself: a soft grid so dragging feels like placing tables on real tiles. */
.oo-fp-canvas {
    position: relative;
    width: 100%;
    height: min(62vh, 560px);
    min-height: 340px;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    overflow: hidden;
    touch-action: none; /* the canvas owns the finger — page must not scroll mid-drag */
    background:
        linear-gradient(var(--mud-palette-lines-default) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, var(--mud-palette-lines-default) 1px, transparent 1px) 0 0 / 40px 40px,
        var(--mud-palette-background-gray, #fafafa);
    background-blend-mode: soft-light, soft-light, normal;
}

.oo-fp-hint {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    padding: 20px;
    pointer-events: none;
}

.oo-fp-table {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 92px;
    min-height: 72px;
    border-radius: 16px;
    border: 2px solid #2e7d3255;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    padding: 8px 6px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    transition: box-shadow .15s ease;
    text-align: center;
    line-height: 1.25;
}

.oo-fp-table.dragging {
    cursor: grabbing;
    box-shadow: 0 10px 26px rgba(0, 0, 0, .22);
    z-index: 30;
    transition: none;
}

.oo-fp-table.sel {
    border-width: 2.5px;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
    z-index: 20;
}

.oo-fp-table .badge {
    position: absolute;
    top: -9px;
    inset-inline-end: -7px;
    font-size: 15px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}

.oo-fp-table .nm {
    font-size: 13px;
    font-weight: 800;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.oo-fp-table .seats { font-size: 11px; color: var(--mud-palette-text-secondary); }

.oo-fp-table .who {
    font-size: 10.5px;
    font-weight: 700;
    color: #b25e00;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Free = calm green edge. Busy = warm amber, unmissable across the room. */
.oo-fp-table.free { border-color: #2e7d3266; }
.oo-fp-table.busy {
    border-color: #ef6c00;
    background: linear-gradient(180deg, #fff5e8, #ffe8cd);
}

/* Outside tables: dashed edge and a sky tint — "which is outside the salon" at a glance. */
.oo-fp-table.t-outdoor { border-style: dashed; background: linear-gradient(180deg, #f2fbff, #e3f4fd); }
.oo-fp-table.t-outdoor.busy { background: linear-gradient(180deg, #fff5e8, #ffe8cd); }
.oo-fp-table.t-vip { background: linear-gradient(180deg, #fffdf2, #fdf3cf); }
.oo-fp-table.t-vip.busy { background: linear-gradient(180deg, #fff5e8, #ffe8cd); }
.oo-fp-table.t-counter { border-radius: 999px; width: 110px; min-height: 56px; }

.oo-fp-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--mud-palette-text-secondary);
}

.oo-fp-legend .dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 4px;
    margin-inline-end: 5px;
    vertical-align: -1px;
    border: 2px solid #2e7d32aa;
    background: var(--mud-palette-surface);
}

.oo-fp-legend .dot.busy { border-color: #ef6c00; background: #ffe8cd; }
.oo-fp-legend .dot.out { border-style: dashed; border-color: #64a7c799; background: #e3f4fd; }
.oo-fp-legend .drag { margin-inline-start: auto; font-style: italic; }

@media (max-width: 700px) {
    .oo-fp-table { width: 76px; min-height: 62px; border-radius: 13px; }
    .oo-fp-table .nm { font-size: 11.5px; }
    .oo-fp-canvas { height: 56vh; }
    .oo-fp-legend .drag { margin-inline-start: 0; width: 100%; }
}

/* ---------- Floor plan: motion & the status board ---------- */
/* Tables pop onto the plan one after another when a floor opens. */
@keyframes ooFpPop {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
    60% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.oo-fp-table {
    animation: ooFpPop .38s cubic-bezier(.34, 1.4, .64, 1) backwards;
    transition: left .25s ease, top .25s ease, box-shadow .18s ease,
                border-color .2s ease, transform .18s ease;
}

.oo-fp-table:hover:not(.dragging) {
    transform: translate(-50%, -50%) scale(1.05);
    box-shadow: 0 7px 18px rgba(0, 0, 0, .16);
}

.oo-fp-table.dragging { transition: none; }

/* The pulses live on a pseudo-element so they never fight the pop animation. */
.oo-fp-table::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    pointer-events: none;
}

@keyframes ooFpBusyRing {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 108, 0, .45); }
    55% { box-shadow: 0 0 0 9px rgba(239, 108, 0, 0); }
}

.oo-fp-table.busy::after { animation: ooFpBusyRing 2.6s ease-out infinite; }

@keyframes ooFpSelRing {
    0%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--mud-palette-primary) 26%, transparent); }
    50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--mud-palette-primary) 10%, transparent); }
}

.oo-fp-table.sel { box-shadow: none; }
.oo-fp-table.sel::after { animation: ooFpSelRing 1.6s ease-in-out infinite; }
.oo-fp-table.sel.busy::after { animation: ooFpSelRing 1.6s ease-in-out infinite, ooFpBusyRing 2.6s ease-out infinite; }

@keyframes ooFpFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.oo-fp-hint .plate { font-size: 42px; line-height: 1.2; animation: ooFpFloat 2.8s ease-in-out infinite; }

.oo-fp-actions { animation: ooFadeUp .22s ease backwards; }

@keyframes ooFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Plan / status-board switcher and the free-busy counters. */
.oo-fp-views {
    display: inline-flex;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    overflow: hidden;
}

.oo-fp-views button {
    border: 0;
    background: transparent;
    padding: 7px 14px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    transition: all .18s ease;
}

.oo-fp-views button.on { background: var(--mud-palette-primary); color: #fff; }

.oo-fp-stats { display: inline-flex; gap: 12px; font-size: 13px; font-weight: 700; }
.oo-fp-stats .ok { color: #2e7d32; }
.oo-fp-stats .hot { color: #ef6c00; }

/* The status board itself: busy first, each row sliding in. */
.oo-fp-list { display: flex; flex-direction: column; gap: 8px; }

@keyframes ooRowIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}

.oo-fp-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: start;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    border-radius: 14px;
    padding: 11px 14px;
    cursor: pointer;
    font: inherit;
    animation: ooRowIn .25s ease backwards;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.oo-fp-row:nth-child(2) { animation-delay: 40ms; }
.oo-fp-row:nth-child(3) { animation-delay: 80ms; }
.oo-fp-row:nth-child(4) { animation-delay: 120ms; }
.oo-fp-row:nth-child(5) { animation-delay: 160ms; }
.oo-fp-row:nth-child(n+6) { animation-delay: 200ms; }

.oo-fp-row:hover { border-color: var(--mud-palette-primary); box-shadow: 0 3px 12px rgba(0, 0, 0, .08); }
.oo-fp-row.sel { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent); }
.oo-fp-row.busy { background: linear-gradient(90deg, #fff8f0, var(--mud-palette-surface) 55%); }

.oo-fp-row .st { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.oo-fp-row .st.free { background: #2e7d32; }

@keyframes ooDotBlink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.oo-fp-row .st.busy { background: #ef6c00; animation: ooDotBlink 1.6s ease-in-out infinite; }

.oo-fp-row .mark { font-size: 19px; flex: none; }
.oo-fp-row .main { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.oo-fp-row .main b { font-size: 14.5px; }
.oo-fp-row .main small { color: var(--mud-palette-text-secondary); font-size: 12px; }
.oo-fp-row .guest { font-size: 12.5px; font-weight: 700; color: #b25e00; max-width: 30%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.oo-fp-row .dur { font-size: 13px; font-weight: 800; color: #ef6c00; flex: none; font-variant-numeric: tabular-nums; }
.oo-fp-row .freechip { font-size: 12px; font-weight: 800; color: #2e7d32; background: #e8f5e9; border-radius: 999px; padding: 3px 10px; flex: none; }

@media (max-width: 700px) {
    .oo-fp-row .guest { display: none; }
}

/* Motion is a garnish — anyone who asked their OS for calm gets calm. */
@media (prefers-reduced-motion: reduce) {
    .oo-fp-table, .oo-fp-row, .oo-fp-actions, .oo-fp-hint .plate,
    .oo-fp-table::after, .oo-fp-row .st.busy { animation: none !important; }
    .oo-fp-table { transition: none; }
}

/* ---------- Hard-LTR fields inside an RTL app ---------- */
/* direction:ltr moves the typed text, but MudBlazor pins the floating label with
   class-scoped RTL rules (right:0 + mirrored translate) that ignore inheritance.
   Mirror every one of them back for fields marked .mf-ltr, and hand the outlined
   border the same direction so its notch travels with the label. */
.mud-application-layout-rtl .mf-ltr .mud-input-label-inputcontrol {
    left: 0 !important;
    right: auto !important;
    transform-origin: top left !important;
}

.mud-application-layout-rtl .mf-ltr .mud-input-label-outlined {
    transform: translate(14px, 20px) scale(1) !important;
}

.mud-application-layout-rtl .mf-ltr .mud-input-label-outlined.mud-input-label-margin-dense {
    transform: translate(14px, 12px) scale(1) !important;
}

.mud-application-layout-rtl .mf-ltr .mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined,
.mud-application-layout-rtl .mf-ltr .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    transform: translate(14px, -6px) scale(0.75) !important;
}

.mf-ltr .mud-input,
.mf-ltr .mud-input-outlined-border {
    direction: ltr !important;
    text-align: left;
}

/* ---------- Floor plan: table shapes & chairs ---------- */
.oo-fp-table { --chair-out: -14px; --chair-r: -55px; }

.oo-fp-table.s-round {
    width: 88px;
    min-height: 88px;
    border-radius: 50%;
    padding: 10px;
}

.oo-fp-table.s-rect { width: 132px; min-height: 60px; }

/* The chairs themselves: little pills the same mood as the table's state. */
.oo-fp-table .chair {
    position: absolute;
    width: 16px;
    height: 9px;
    border-radius: 5px 5px 7px 7px;
    background: #cde9d0;
    border: 1.5px solid #2e7d3288;
    box-sizing: border-box;
    pointer-events: none;
}

.oo-fp-table.busy .chair { background: #ffd9a8; border-color: #ef6c00; }
.oo-fp-table.t-outdoor.free .chair { background: #d8effc; border-color: #64a7c7; }

@media (max-width: 700px) {
    .oo-fp-table { --chair-out: -12px; --chair-r: -47px; }
    .oo-fp-table.s-round { width: 74px; min-height: 74px; }
    .oo-fp-table.s-rect { width: 108px; min-height: 54px; }
    .oo-fp-table .chair { width: 13px; height: 8px; }
}

/* Shape picker in the table dialog: three little previews, not a dropdown. */
.oo-shape-pick { display: flex; gap: 8px; margin-top: 6px; }

.oo-shape-pick button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 10px 6px;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    transition: all .15s ease;
}

.oo-shape-pick button.on {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 15%, transparent);
}

.oo-shape-pick i { display: block; flex: none; border: 2px solid currentColor; background: transparent; }
.oo-shape-pick .oo-sh-sq { width: 22px; height: 22px; border-radius: 5px; }
.oo-shape-pick .oo-sh-rd { width: 22px; height: 22px; border-radius: 50%; }
.oo-shape-pick .oo-sh-rc { width: 32px; height: 18px; border-radius: 5px; }

/* Type badge on plan tables: a small white disc holding a line icon (was an emoji). */
.oo-fp-table .badge {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    filter: none;
    top: -10px;
    inset-inline-end: -8px;
}

/* ---------- Floor plan, modern pass ---------- */
/* The room: warm sand floor with a dot grid — reads as a floor, not graph paper. */
.oo-fp-canvas {
    border: none;
    border-radius: 24px;
    background:
        radial-gradient(circle at 28% 18%, rgba(255, 255, 255, .85), transparent 55%),
        radial-gradient(rgba(120, 90, 60, .13) 1.2px, transparent 1.4px) 0 0 / 24px 24px,
        linear-gradient(160deg, #faf7f2, #f0e9df);
    background-blend-mode: normal;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .05);
}

/* Tables: soft depth, no hard outline. */
.oo-fp-table {
    border-width: 1.5px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f7f6f4);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .05);
}

.oo-fp-table.busy {
    border-color: #f57c00;
    background: linear-gradient(180deg, #fff4e6, #ffe2c0);
    box-shadow: 0 5px 16px rgba(239, 108, 0, .22), 0 1px 2px rgba(0, 0, 0, .05);
}

.oo-fp-table .nm { letter-spacing: .2px; }

/* Floor tabs: quiet by default, the active one carries the brand. */
.oo-fp-floortab {
    border: none;
    background: var(--mud-palette-background-gray, #f1efec);
    padding: 8px 16px;
}

.oo-fp-floortab:hover { background: #e9e5e0; }

.oo-fp-floortab.on {
    background: linear-gradient(135deg, var(--mud-palette-primary), #f4511e);
    box-shadow: 0 4px 14px rgba(244, 81, 30, .35);
}

.oo-fp-floortab .cnt { background: rgba(0, 0, 0, .08); }
.oo-fp-floortab.add { border: 1.5px dashed var(--mud-palette-lines-default); background: transparent; }

/* Plan / Status switcher: an iOS-style segmented control with a floating thumb. */
.oo-fp-views {
    border: none;
    background: rgba(0, 0, 0, .06);
    padding: 3px;
    gap: 2px;
}

.oo-fp-views button { border-radius: 999px; padding: 6px 16px; }

.oo-fp-views button.on {
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16);
}

/* Free / busy counters as tinted pills. */
.oo-fp-stats span { padding: 5px 13px; border-radius: 999px; }
.oo-fp-stats .ok { background: #e5f3e6; }
.oo-fp-stats .hot { background: #fdeadb; }

/* Status rows: borderless cards, the type icon in a tinted squircle. */
.oo-fp-row {
    border: none;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
    border-radius: 16px;
    padding: 12px 16px;
}

.oo-fp-row:hover { box-shadow: 0 7px 20px rgba(0, 0, 0, .12); transform: translateY(-1px); }
.oo-fp-row { transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .18s ease; }

.oo-fp-row .mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.oo-fp-row .dur {
    background: #fdeadb;
    padding: 4px 11px;
    border-radius: 999px;
}

/* The selected table's action panel: floating glass, always in reach. */
.oo-fp-actions {
    position: sticky;
    bottom: 14px;
    z-index: 40;
    border: 1px solid rgba(255, 255, 255, .65) !important;
    border-radius: 20px !important;
    background: color-mix(in srgb, var(--mud-palette-surface) 84%, transparent) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 14px 38px rgba(0, 0, 0, .18) !important;
}

.oo-fp-legend { font-size: 12px; opacity: .85; }

/* ---------- Rooms drawn on the plan ---------- */
.oo-fp-canvas.drawing { cursor: crosshair; }
.oo-fp-canvas.drawing .oo-fp-table { pointer-events: none; opacity: .55; }

.oo-fp-room {
    position: absolute;
    border-radius: 16px;
    border: 1.5px dashed rgba(90, 70, 50, .30);
    cursor: grab;
    transition: box-shadow .18s ease, border-color .18s ease;
}

.oo-fp-room.dragging { cursor: grabbing; box-shadow: 0 8px 24px rgba(0, 0, 0, .14); z-index: 5; transition: none; }

.oo-fp-room.sel {
    border-style: solid;
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 20%, transparent);
    z-index: 4;
}

/* Five calm washes, cycled by room id — enough to tell zones apart at a glance. */
.oo-fp-room.tint-0 { background: rgba(255, 152, 0, .10); }
.oo-fp-room.tint-1 { background: rgba(3, 155, 229, .10); }
.oo-fp-room.tint-2 { background: rgba(76, 175, 80, .10); }
.oo-fp-room.tint-3 { background: rgba(156, 39, 176, .08); }
.oo-fp-room.tint-4 { background: rgba(121, 85, 72, .10); }

.oo-fp-room .rnm {
    position: absolute;
    top: 8px;
    inset-inline-start: 10px;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: .3px;
    color: rgba(80, 60, 40, .75);
    background: rgba(255, 255, 255, .72);
    padding: 3px 10px;
    border-radius: 999px;
    pointer-events: none;
    max-width: calc(100% - 20px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The resize grip: a quarter-moon in the bottom corner, big enough for a thumb. */
.oo-fp-room .rs {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 22px;
    height: 22px;
    border-radius: 16px 4px 14px 4px;
    background: var(--mud-palette-surface);
    border: 1.5px solid rgba(90, 70, 50, .35);
    cursor: nwse-resize;
    touch-action: none;
}

.oo-fp-room.sel .rs { border-color: var(--mud-palette-primary); }

/* The rectangle being sketched right now. */
.oo-fp-roomdraft {
    position: absolute;
    border: 2px dashed var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    border-radius: 14px;
    pointer-events: none;
    z-index: 25;
}

@media (prefers-reduced-motion: reduce) {
    .oo-fp-room { transition: none; }
}

/* ---------- The table's open invoice ---------- */
.tab-lines { display: flex; flex-direction: column; gap: 4px; }

.tab-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray, #f6f5f3);
}

.tab-line .q { font-weight: 800; color: var(--mud-palette-primary); flex: none; }
.tab-line .n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tab-line .p { font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }

.tab-totals { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.tab-totals > div { display: flex; justify-content: space-between; }
.tab-totals span { color: var(--mud-palette-text-secondary); }
.tab-totals .grand { font-size: 16.5px; margin-top: 4px; padding-top: 8px; border-top: 1.5px dashed var(--mud-palette-lines-default); }
.tab-totals .grand span { color: var(--mud-palette-text-primary); font-weight: 800; }
.tab-totals .grand b { color: var(--mud-palette-primary); }

/* ---------- The POS screen (/pos/{table}) ---------- */
.pos {
    display: flex;
    gap: 16px;
    align-items: stretch;
    min-height: calc(100vh - 140px);
}

.pos-left { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.pos-top { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.pos-who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.pos-who b { font-size: 15px; white-space: nowrap; }
.pos-who small { color: var(--mud-palette-text-secondary); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pos-search { flex: 1; min-width: 140px; }

.pos-cats { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 8px; margin-bottom: 4px; scrollbar-width: thin; }

.pos-cats button {
    flex: none;
    border: none;
    background: var(--mud-palette-background-gray, #f1efec);
    border-radius: 999px;
    padding: 7px 15px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: all .15s ease;
}

.pos-cats button.on {
    background: linear-gradient(135deg, var(--mud-palette-primary), #f4511e);
    color: #fff;
    box-shadow: 0 3px 10px rgba(244, 81, 30, .3);
}

/* The product wall: big thumb-sized tiles, tap = one more. */
.pos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 10px;
    align-content: start;
    overflow-y: auto;
    flex: 1;
    padding: 2px;
}

.pos-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 8px 11px;
    border: 1.5px solid transparent;
    border-radius: 16px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
    cursor: pointer;
    font: inherit;
    text-align: center;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
    user-select: none;
    -webkit-user-select: none;
}

.pos-tile:hover { box-shadow: 0 6px 16px rgba(0, 0, 0, .13); transform: translateY(-1px); }
.pos-tile:active { transform: scale(.96); }
.pos-tile.on { border-color: var(--mud-palette-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 16%, transparent); }

.pos-tile .pt-emoji { font-size: 28px; line-height: 1.1; }
.pos-tile .pt-name { font-size: 12.5px; font-weight: 700; line-height: 1.25; max-height: 2.5em; overflow: hidden; }
.pos-tile .pt-price { font-size: 12px; font-weight: 800; color: var(--mud-palette-primary); }

.pos-tile .pt-badge {
    position: absolute;
    top: -7px;
    inset-inline-end: -7px;
    min-width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--mud-palette-primary);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(244, 81, 30, .4);
}

.pos-tile .pt-minus {
    position: absolute;
    top: -7px;
    inset-inline-start: -7px;
    width: 24px;
    height: 24px;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    border: 1.5px solid var(--mud-palette-lines-default);
    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
}

/* The ticket: a receipt-shaped column that stays put while the wall scrolls. */
.pos-ticket {
    flex: none;
    width: 340px;
    display: flex;
    flex-direction: column;
    background: var(--mud-palette-surface);
    border-radius: 18px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .09);
    padding: 14px;
    position: sticky;
    top: 76px;
    align-self: flex-start;
    max-height: calc(100vh - 110px);
}

.pos-ticket-head { display: flex; align-items: center; gap: 8px; font-size: 14.5px; margin-bottom: 8px; }
.pos-ticket-head .n {
    margin-inline-start: auto;
    background: var(--mud-palette-background-gray, #f1efec);
    border-radius: 999px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 800;
}

.pos-lines { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; min-height: 60px; }
.pos-empty { color: var(--mud-palette-text-secondary); font-size: 13px; text-align: center; padding: 18px 6px; }

.pos-line {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 9px;
    border-radius: 10px;
    background: var(--mud-palette-background-gray, #f6f5f3);
    font-size: 13.5px;
    animation: ooRowIn .2s ease backwards;
}

.pos-line.fresh { background: #fff4e6; box-shadow: inset 0 0 0 1.5px #f4511e33; }
.pos-line .q { font-weight: 800; color: var(--mud-palette-primary); flex: none; }
.pos-line .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pos-line .pr { font-weight: 700; flex: none; font-variant-numeric: tabular-nums; }
.pos-line .rm { border: none; background: transparent; color: var(--mud-palette-text-secondary); cursor: pointer; font-size: 13px; padding: 2px 4px; }
.pos-line .rm:hover { color: var(--mud-palette-error); }

.pos-totals { display: flex; flex-direction: column; gap: 3px; font-size: 13.5px; margin-bottom: 10px; }
.pos-totals > div { display: flex; justify-content: space-between; }
.pos-totals span { color: var(--mud-palette-text-secondary); }
.pos-totals .grand { font-size: 17px; margin-top: 4px; padding-top: 8px; border-top: 1.5px dashed var(--mud-palette-lines-default); }
.pos-totals .grand span { color: var(--mud-palette-text-primary); font-weight: 800; }
.pos-totals .grand b { color: var(--mud-palette-primary); }

.pos-pay-mode { display: flex; gap: 6px; margin-bottom: 10px; }
.pos-pay-mode button {
    flex: 1;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    border-radius: 12px;
    padding: 9px 6px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    transition: all .15s ease;
}
.pos-pay-mode button.on { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-surface)); }

.pos-pay { border-radius: 14px !important; font-weight: 800 !important; }

.pos-seat { display: flex; justify-content: center; padding-top: 8vh; }

@media (max-width: 900px) {
    .pos { flex-direction: column; min-height: 0; }
    .pos-grid { max-height: 44vh; flex: none; }
    .pos-ticket { position: static; width: 100%; max-height: none; }
    .pos-lines { max-height: 26vh; }
}

/* POS: counter/table mode switch and photo tiles. */
.pos-mode { display: flex; gap: 6px; margin-bottom: 10px; }

.pos-mode button {
    flex: 1;
    width: 100%;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    border-radius: 12px;
    padding: 8px 6px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 800;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    transition: all .15s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pos-mode button.on {
    border-color: var(--mud-palette-primary);
    color: #fff;
    background: linear-gradient(135deg, var(--mud-palette-primary), #f4511e);
    box-shadow: 0 3px 10px rgba(244, 81, 30, .3);
}

.pos-table-menu { flex: 1; min-width: 0; }
.pos-table-menu .mud-menu-activator { width: 100%; }

.pos-tile .pt-img {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
}

/* POS table picker dialog: the floor as tappable cards, with edit in the corner. */
.pos-tp-floors { display: flex; flex-wrap: wrap; gap: 6px; }

.pos-tp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    max-height: 52vh;
    overflow-y: auto;
    padding: 2px;
}

.pos-tp-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    padding: 12px 14px;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 14px;
    background: var(--mud-palette-surface);
    cursor: pointer;
    font: inherit;
    text-align: start;
    transition: all .15s ease;
}

.pos-tp-tile:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .1);
    transform: translateY(-1px);
}

.pos-tp-tile.busy { background: linear-gradient(180deg, #fff4e6, #ffeeda); border-color: #f57c0066; }
.pos-tp-tile .st { font-size: 11px; }
.pos-tp-tile b { font-size: 14.5px; }
.pos-tp-tile small { color: var(--mud-palette-text-secondary); font-size: 11.5px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pos-tp-tile .ed {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 26px;
    height: 26px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
    background: rgba(0, 0, 0, .04);
}

.pos-tp-tile .ed:hover { color: var(--mud-palette-primary); background: rgba(0, 0, 0, .08); }

/* Ticket line steppers: +/− directly on every line of the bill. */
.pos-line .step { display: inline-flex; align-items: center; gap: 4px; flex: none; }

.pos-line .pm {
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 8px;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font: inherit;
    font-weight: 800;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

.pos-line .pm:hover { border-color: var(--mud-palette-primary); color: var(--mud-palette-primary); }
.pos-line .q { min-width: 18px; text-align: center; }

/* Tile counters INSIDE the tile — hanging outside got clipped by the scrolling grid. */
.pos-tile .pt-badge { top: 6px; inset-inline-end: 6px; }
.pos-tile .pt-minus { top: 6px; inset-inline-start: 6px; }

/* The floor plan inside the POS picker dialog: same room, tap to choose. */
.oo-fp-canvas.pos-fp { height: 52vh; min-height: 300px; touch-action: auto; }
.oo-fp-canvas.pos-fp .oo-fp-table { cursor: pointer; }
.oo-fp-canvas.pos-fp .oo-fp-table:hover { transform: translate(-50%, -50%) scale(1.06); }

.oo-fp-table .pt-edit {
    position: absolute;
    bottom: -8px;
    inset-inline-end: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .22);
    display: none;
    align-items: center;
    justify-content: center;
    color: var(--mud-palette-text-secondary);
}

.pos-fp .oo-fp-table .pt-edit { display: flex; }
.oo-fp-table .pt-edit:hover { color: var(--mud-palette-primary); }

/* Fullscreen picker: the plan grows to fill the dialog's height. */
.oo-fp-canvas.pos-fp { height: calc(100vh - 240px); min-height: 320px; }

/* ---------- Small screens: the plan turns portrait and everything scales down ---------- */
/* The room grows tall (like a phone) and tables shrink with their chairs, so the
   same layout that fills a desktop reads cleanly on a 360px screen. */
@media (max-width: 700px) {
    .oo-fp-canvas { height: min(125vw, 72vh); min-height: 400px; }
    .oo-fp-canvas.pos-fp { height: calc(100vh - 210px); min-height: 400px; }

    .oo-fp-table {
        width: 64px;
        min-height: 52px;
        border-radius: 11px;
        padding: 5px 4px;
        --chair-out: -10px;
        --chair-r: -40px;
    }

    .oo-fp-table.s-round { width: 62px; min-height: 62px; }
    .oo-fp-table.s-rect { width: 94px; min-height: 46px; }
    .oo-fp-table.t-counter { width: 88px; min-height: 42px; }

    .oo-fp-table .nm { font-size: 10.5px; }
    .oo-fp-table .seats { font-size: 9.5px; }
    .oo-fp-table .who { font-size: 9px; }
    .oo-fp-table .chair { width: 11px; height: 7px; border-width: 1px; }

    .oo-fp-table .badge { width: 18px; height: 18px; top: -8px; inset-inline-end: -6px; }
    .oo-fp-table .badge .mud-icon-root { width: 11px !important; height: 11px !important; }

    .oo-fp-room { border-radius: 12px; }
    .oo-fp-room .rnm { font-size: 10px; padding: 2px 8px; top: 5px; inset-inline-start: 7px; }
    .oo-fp-room .rs { width: 18px; height: 18px; }
}

/* The ticket's customer chip: whose bill this is, one tap to change. */
.pos-custbtn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1.5px dashed var(--mud-palette-lines-default);
    background: transparent;
    border-radius: 12px;
    padding: 8px 12px;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    margin-bottom: 10px;
    transition: border-color .15s ease;
}

.pos-custbtn:hover { border-color: var(--mud-palette-primary); }
.pos-custbtn .chev { margin-inline-start: auto; color: var(--mud-palette-text-secondary); }

/* The busy-table timer chip: how long the party has held it, unmissable orange. */
.oo-fp-table .tdur {
    font-size: 9.5px;
    font-weight: 800;
    color: #fff;
    background: #ef6c00;
    border-radius: 999px;
    padding: 1.5px 8px;
    margin-top: 2px;
    white-space: nowrap;
    box-shadow: 0 1px 4px rgba(239, 108, 0, .4);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
    .oo-fp-table .tdur { font-size: 8.5px; padding: 1px 6px; }
}

/* Open-invoices button and list. */
.pos-custbtn.hot { border-color: #ef6c0088; color: #b25e00; background: #fff7ee; }
.pos-custbtn .badge-n {
    background: #ef6c00;
    color: #fff;
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11.5px;
    font-weight: 800;
    padding: 0 6px;
}

.pos-tabs-list { display: flex; flex-direction: column; gap: 8px; }

.pos-tab-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: none;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
    border-radius: 14px;
    padding: 12px 16px;
    font: inherit;
    cursor: pointer;
    text-align: start;
    transition: box-shadow .15s ease, transform .15s ease;
}

.pos-tab-row:hover { box-shadow: 0 6px 18px rgba(0, 0, 0, .12); transform: translateY(-1px); }
.pos-tab-row .tbl { font-weight: 800; flex: none; }
.pos-tab-row .who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mud-palette-text-secondary); font-size: 13px; }
.pos-tab-row .cnt { color: var(--mud-palette-text-secondary); font-size: 12.5px; flex: none; }
.pos-tab-row .dur { background: #fdeadb; color: #b25e00; font-weight: 800; font-size: 12px; border-radius: 999px; padding: 3px 10px; flex: none; }
.pos-tab-row .sum { color: var(--mud-palette-primary); flex: none; font-variant-numeric: tabular-nums; }

/* An open-invoice row that unfolds into the full bill. */
.pos-tab-card { border-radius: 14px; }
.pos-tab-card.open {
    background: var(--mud-palette-surface);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .1);
}
.pos-tab-card.open .pos-tab-row { box-shadow: none; }
.pos-tab-detail { padding: 4px 16px 14px; animation: ooFadeUp .18s ease backwards; }

/* Split pay button: ONE continuous bar — big Save, thin divider, caret menu. */
.pos-split {
    display: flex;
    align-items: stretch;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 3px 12px rgba(46, 125, 50, .3);
}

.pos-split .main { flex: 1; border-radius: 0 !important; box-shadow: none !important; }

.pos-split .mud-menu { display: flex; align-items: stretch; }

.pos-split .caret {
    min-width: 48px !important;
    height: 100%;
    padding: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-inline-start: 1px solid rgba(255, 255, 255, .4) !important;
    font-size: 15px;
}

/* Open-invoices button riding the POS top bar, next to the search. */
.pos-top .pos-custbtn.top {
    width: auto;
    flex: none;
    margin-bottom: 0;
    white-space: nowrap;
    padding: 8px 14px;
}

/* The "save as open" checkbox above the pay button. */
.pos-keepopen { margin: -4px 0 2px; }
.pos-keepopen .mud-checkbox { font-size: 13px; }

/* Mode + customer + open-invoices ride the top bar; search folds into an icon. */
.pos-top { flex-wrap: wrap; }
.pos-top .pos-mode { margin-bottom: 0; flex: none; }
.pos-top .pos-mode button { width: auto; flex: none; padding: 8px 16px; }

/* Open-invoices in the top bar: anchored at the bar's end, solid and unmissable. */
.pos-custbtn.hot.top {
    border: none;
    background: linear-gradient(135deg, #ff9800, #ef6c00);
    color: #fff;
    box-shadow: 0 3px 10px rgba(239, 108, 0, .35);
}

.pos-custbtn.hot.top .chev { color: rgba(255, 255, 255, .85); }
.pos-custbtn.hot.top .badge-n { background: #fff; color: #ef6c00; }

/* Every top-bar control gets the same solid card look — no dashed ghosts. */
.pos-top .pos-mode.top { background: transparent; padding: 0; gap: 6px; }

.pos-top .pos-mode.top button {
    border: none;
    background: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
    border-radius: 999px;
}

.pos-top .pos-mode.top button.on {
    background: linear-gradient(135deg, var(--mud-palette-primary), #f4511e);
    color: #fff;
    box-shadow: 0 3px 10px rgba(244, 81, 30, .35);
}

.pos-top .pos-custbtn.top {
    border: none;
    border-radius: 999px;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
}

.pos-top .pos-custbtn.top:disabled { opacity: .6; }

/* The hot (open invoices) one keeps its orange fill on top of the shared shape. */
.pos-top .pos-custbtn.hot.top {
    background: linear-gradient(135deg, #ff9800, #ef6c00);
    box-shadow: 0 3px 10px rgba(239, 108, 0, .35);
}

/* Quantity 1: the minus becomes a bin. */
.pos-line .pm.del { color: #d32f2f; border-color: #d32f2f55; }
.pos-line .pm.del:hover { border-color: #d32f2f; color: #d32f2f; background: #fdecea; }

/* The ticket scrolls, but the scrollbar itself stays invisible — its blinking in
   and out on every added line made the whole panel jitter. */
.pos-lines { scrollbar-width: none; -ms-overflow-style: none; }
.pos-lines::-webkit-scrollbar { display: none; }

/* Same cure for every POS scroll area — in RTL their bars sat on the LEFT edge,
   flickering against the content. Scrolling still works everywhere. */
.pos-grid, .pos-cats, .pos-tp-grid, .pos-tabs-list,
.co-items, .oo-picker-list {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.pos-grid::-webkit-scrollbar, .pos-cats::-webkit-scrollbar,
.pos-tp-grid::-webkit-scrollbar, .pos-tabs-list::-webkit-scrollbar,
.co-items::-webkit-scrollbar, .oo-picker-list::-webkit-scrollbar {
    display: none;
}

/* The BROWSER's page scrollbar (left edge in RTL) — the last one still blinking.
   Hidden only while the POS is on screen; wheel and touch scrolling still work. */
html:has(.pos) { scrollbar-width: none; -ms-overflow-style: none; }
html:has(.pos)::-webkit-scrollbar { display: none; }

/* Belt and braces: NOTHING inside the POS ever shows a scrollbar. */
.pos * { scrollbar-width: none; -ms-overflow-style: none; }
.pos *::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* RTL: the mode/customer group anchors LEFT, search & tools anchor RIGHT —
   the bar's groups keep their physical places regardless of language. */
.mud-application-layout-rtl .pos-top { flex-direction: row-reverse; }

/* The invoice's running number: on the bar and at the head of each list row. */
.pos-invno {
    flex: none;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.pos-tab-row .no {
    flex: none;
    font-weight: 800;
    color: var(--mud-palette-primary);
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

/* The invoice-number chip: labeled and tinted so nobody wonders what the number is. */
.pos-invno {
    background: #fdeadb;
    color: #b25e00;
    box-shadow: none;
    font-weight: 700;
    font-size: 12.5px;
}

.pos-invno b { font-size: 14px; font-weight: 800; }

/* The emoji plate: a tappable grid, current choice ringed. */
.oo-emoji-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
    gap: 6px;
    max-height: 50vh;
    overflow-y: auto;
    scrollbar-width: none;
}

.oo-emoji-grid::-webkit-scrollbar { display: none; }

.oo-emoji-grid button {
    font-size: 24px;
    line-height: 1;
    padding: 9px 0;
    border: 1.5px solid transparent;
    border-radius: 12px;
    background: var(--mud-palette-background-gray, #f6f5f3);
    cursor: pointer;
    transition: transform .12s ease, border-color .12s ease;
}

.oo-emoji-grid button:hover { transform: scale(1.12); }
.oo-emoji-grid button.on {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mud-palette-primary) 18%, transparent);
    background: var(--mud-palette-surface);
}

/* ---------- The tablet till (/pos-tablet): same POS, finger-first ---------- */
/* Categories become a vertical rail beside the product wall — the classic
   restaurant-tablet layout — and every target grows to true finger size. */
.pos.tablet .pos-left {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "top top" "cats grid";
    gap: 10px;
}

.pos.tablet .pos-top { grid-area: top; margin-bottom: 0; }

.pos.tablet .pos-cats {
    grid-area: cats;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    padding-bottom: 0;
    margin-bottom: 0;
    align-content: start;
}

.pos.tablet .pos-cats button {
    width: 100%;
    padding: 14px 8px;
    border-radius: 14px;
    font-size: 14px;
    white-space: normal;
    line-height: 1.25;
    min-height: 52px;
}

.pos.tablet .pos-grid {
    grid-area: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.pos.tablet .pos-tile { padding: 18px 10px 14px; border-radius: 20px; gap: 6px; }
.pos.tablet .pos-tile .pt-emoji { font-size: 40px; }
.pos.tablet .pos-tile .pt-img { width: 76px; height: 76px; border-radius: 16px; }
.pos.tablet .pos-tile .pt-name { font-size: 14.5px; }
.pos.tablet .pos-tile .pt-price { font-size: 13.5px; }
.pos.tablet .pos-tile .pt-badge { min-width: 30px; height: 30px; font-size: 15px; }
.pos.tablet .pos-tile .pt-minus { width: 30px; height: 30px; font-size: 20px; }

.pos.tablet .pos-ticket { width: 400px; padding: 18px; }
.pos.tablet .pos-line { font-size: 15.5px; padding: 10px 12px; border-radius: 12px; }
.pos.tablet .pos-line .pm { width: 34px; height: 34px; font-size: 18px; border-radius: 10px; }
.pos.tablet .pos-line .q { min-width: 26px; font-size: 16px; }
.pos.tablet .pos-totals { font-size: 15px; }
.pos.tablet .pos-totals .grand { font-size: 20px; }
.pos.tablet .pos-pay-mode button { padding: 13px 8px; font-size: 14.5px; }
.pos.tablet .pos-pay { min-height: 60px; font-size: 16.5px !important; }
.pos.tablet .pos-mode.top button, .pos.tablet .pos-custbtn.top { padding: 12px 20px; font-size: 14.5px; }
.pos.tablet .pos-invno { padding: 12px 18px; font-size: 14px; }
.pos.tablet .pos-keepopen .mud-checkbox { font-size: 15px; }

@media (max-width: 900px) {
    .pos.tablet .pos-left { grid-template-columns: 96px 1fr; }
    .pos.tablet .pos-ticket { width: 100%; }
}

/* ---------- Table QR cards (partner, printable) ---------- */
.tqr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
}

.tqr-card {
    background: #fff;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    padding: 18px 14px 14px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    break-inside: avoid;
}

.tqr-card img { width: 170px; height: 170px; image-rendering: pixelated; }
.tqr-table { font-size: 19px; font-weight: 800; }
.tqr-floor { font-size: 12px; color: var(--mud-palette-text-secondary); }
.tqr-hint { font-size: 12px; color: var(--mud-palette-text-secondary); }
.tqr-brand { font-size: 12px; font-weight: 800; color: var(--mud-palette-primary); letter-spacing: .4px; }

@media print {
    .no-print, .mud-appbar, .mud-drawer, nav { display: none !important; }
    .tqr-grid { grid-template-columns: repeat(2, 1fr); }
    .tqr-card { border: 1px dashed #999; border-radius: 10px; }
}

/* ---------- Reservations (partner list + public page bits) ---------- */
.rsv-list { display: flex; flex-direction: column; gap: 10px; }

.rsv-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.rsv-row .when { display: flex; flex-direction: column; align-items: center; min-width: 52px; }
.rsv-row .when b { font-size: 17px; font-variant-numeric: tabular-nums; }
.rsv-row .when small { color: var(--mud-palette-text-secondary); }
.rsv-row .who { flex: 1; min-width: 140px; display: flex; flex-direction: column; }
.rsv-row .who small { color: var(--mud-palette-text-secondary); }
.rsv-row .who .note { color: #b25e00; }
.rsv-row .meta { color: var(--mud-palette-text-secondary); font-size: 13.5px; flex: none; }
.rsv-row .acts { display: flex; gap: 6px; align-items: center; }

.rsv-card { text-align: start; }
.rsv-store { text-align: center; margin-bottom: 10px; }
.rsv-store .lg { font-size: 42px; display: block; }
.rsv-store h1 { margin: 4px 0 0; font-size: 22px; }
.rsv-store small { color: var(--mud-palette-text-secondary); }

.rsv-tablechip {
    text-align: center;
    background: #fdeadb;
    color: #b25e00;
    border-radius: 999px;
    padding: 7px 16px;
    font-weight: 800;
    font-size: 14px;
    margin: 0 auto 16px;
    width: fit-content;
}

.rsv-summary { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.rsv-summary div { display: flex; justify-content: space-between; }
.rsv-summary span { color: var(--mud-palette-text-secondary); }

/* The public table page: menu / reserve switch and the food list itself. */
.rsv-tabs { display: flex; gap: 6px; margin-bottom: 14px; }

.rsv-tabs button {
    flex: 1;
    border: none;
    background: var(--mud-palette-background-gray, #f1efec);
    border-radius: 999px;
    padding: 10px 8px;
    font: inherit;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    transition: all .15s ease;
}

.rsv-tabs button.on {
    background: linear-gradient(135deg, var(--mud-palette-primary), #f4511e);
    color: #fff;
    box-shadow: 0 3px 10px rgba(244, 81, 30, .3);
}

.rsv-menu { max-height: 56vh; overflow-y: auto; scrollbar-width: none; }
.rsv-menu::-webkit-scrollbar { display: none; }

.rsv-cat {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: .4px;
    color: var(--mud-palette-primary);
    text-transform: uppercase;
    margin: 14px 0 6px;
}

.rsv-cat:first-child { margin-top: 0; }

.rsv-dish {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px dashed var(--mud-palette-lines-default);
}

.rsv-dish:last-child { border-bottom: none; }
.rsv-dish img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; flex: none; }
.rsv-dish .em { font-size: 30px; width: 46px; text-align: center; flex: none; }
.rsv-dish .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.rsv-dish .tx b { font-size: 14.5px; }
.rsv-dish .tx small {
    color: var(--mud-palette-text-secondary);
    font-size: 12px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.rsv-dish .pr { color: var(--mud-palette-primary); flex: none; font-variant-numeric: tabular-nums; }

/* ---------- The QR self-ordering page: the till in the guest's hand ---------- */
.qmenu { max-width: 720px; margin: 0 auto; padding: 0 14px 110px; }

.qm-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 4px 12px;
}

.qm-head .lg { font-size: 38px; }
.qm-head .tx { display: flex; flex-direction: column; }
.qm-head .tx b { font-size: 19px; }
.qm-head .tx small { color: var(--mud-palette-text-secondary); font-weight: 700; }

.qm-cats { position: sticky; top: 0; z-index: 5; background: var(--mud-palette-background, #faf8f5); padding-top: 6px; }

.qm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
    scrollbar-width: none;
}

.qm-grid::-webkit-scrollbar { display: none; }

/* The floating cart bar: total on one side, one green button on the other. */
.qm-bar {
    position: fixed;
    bottom: 12px;
    left: 12px;
    right: 12px;
    max-width: 696px;
    margin: 0 auto;
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 14px;
    background: color-mix(in srgb, var(--mud-palette-surface) 88%, transparent);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 20px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, .22);
    padding: 12px 18px;
    animation: ooFadeUp .2s ease backwards;
}

.qm-bar .tx { display: flex; flex-direction: column; flex: 1; }
.qm-bar .tx b { font-size: 19px; color: var(--mud-palette-primary); font-variant-numeric: tabular-nums; }
.qm-bar .tx small { color: var(--mud-palette-text-secondary); font-size: 12.5px; }
.qm-bar .qm-send { border-radius: 14px !important; font-weight: 800 !important; min-height: 52px; }

/* "Order sent" — big, calm, unmissable. */
.qm-sent {
    background: var(--mud-palette-surface);
    border-radius: 20px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .09);
    padding: 30px 22px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 8vh;
}

.qm-sent .seal {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #e5f3e6;
    color: #2e7d32;
    font-size: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qm-sent b { font-size: 20px; }
.qm-sent p { margin: 0; color: var(--mud-palette-text-secondary); }
.qm-sent .sum {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 10px 4px;
    border-top: 1.5px dashed var(--mud-palette-lines-default);
    margin-top: 8px;
    font-size: 15px;
}

/* Dish details: the little i on the tile, and the sheet it opens. */
.pos-tile .pt-info {
    position: absolute;
    bottom: 6px;
    inset-inline-end: 6px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pos-tile .pt-info:hover { background: var(--mud-palette-primary); color: #fff; }

.qm-veil {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    z-index: 90;
    animation: ooRowIn .15s ease backwards;
}

.qm-sheet {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 720px;
    margin: 0 auto;
    z-index: 91;
    background: var(--mud-palette-surface);
    border-radius: 24px 24px 0 0;
    padding: 22px 20px calc(20px + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .25);
    animation: ooFadeUp .2s ease backwards;
}

.qm-sheet img { width: 130px; height: 130px; border-radius: 20px; object-fit: cover; }
.qm-sheet .em { font-size: 72px; line-height: 1.1; }
.qm-sheet .nm { font-size: 19px; }
.qm-sheet .ds { margin: 0; color: var(--mud-palette-text-secondary); font-size: 14px; line-height: 1.5; }
.qm-sheet .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
    gap: 12px;
}
.qm-sheet .pr { font-size: 20px; color: var(--mud-palette-primary); font-variant-numeric: tabular-nums; }

/* ---------- QR ordering, the modern pass: a real food app in the hand ---------- */
.qm-hero {
    background: linear-gradient(140deg, #ff8a2a, #f4511e 55%, #d84315);
    border-radius: 24px;
    color: #fff;
    text-align: center;
    padding: 26px 18px 22px;
    margin: 10px 0 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    box-shadow: 0 10px 30px rgba(244, 81, 30, .35);
    position: relative;
    overflow: hidden;
}

.qm-hero::after {
    content: '';
    position: absolute;
    inset: -40% -20% auto;
    height: 120%;
    background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .28), transparent 55%);
    pointer-events: none;
}

.qm-hero .logo {
    width: 74px;
    height: 74px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .95);
    font-size: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
}

.qm-hero .store { font-size: 22px; letter-spacing: .2px; }
.qm-hero .area { opacity: .9; font-size: 12.5px; }

.qm-hero .chip {
    margin-top: 6px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 800;
    font-size: 13.5px;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

.qm-cats {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background: color-mix(in srgb, var(--mud-palette-background, #faf8f5) 82%, transparent) !important;
    padding-bottom: 8px !important;
}

/* Dish cards: image first, like every food app people already trust. */
.qm-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }

.qm-card {
    background: var(--mud-palette-surface);
    border-radius: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
    padding: 10px 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease;
    animation: ooFadeUp .3s ease backwards;
    border: 1.5px solid transparent;
}

.qm-card:active { transform: scale(.97); }
.qm-card.on { border-color: var(--mud-palette-primary); box-shadow: 0 4px 16px rgba(244, 81, 30, .18); }

.qm-card .img {
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    background: linear-gradient(150deg, #fff4ea, #ffe8d4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.qm-card .img img { width: 100%; height: 100%; object-fit: cover; }
.qm-card .img .em { font-size: 52px; }

.qm-card .nm {
    font-size: 13.5px;
    font-weight: 800;
    line-height: 1.3;
    min-height: 2.6em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.qm-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.qm-card .pr { font-size: 13.5px; font-weight: 800; color: var(--mud-palette-primary); font-variant-numeric: tabular-nums; }

.qm-card .add {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, var(--mud-palette-primary), #f4511e);
    color: #fff;
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(244, 81, 30, .35);
    transition: transform .12s ease;
    flex: none;
}

.qm-card .add:active { transform: scale(.88); }

.qm-card .stp {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: #fdeadb;
    border-radius: 12px;
    padding: 3px;
    flex: none;
}

.qm-card .stp button {
    width: 30px;
    height: 30px;
    border: none;
    border-radius: 10px;
    background: var(--mud-palette-surface);
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    color: #b25e00;
    display: flex;
    align-items: center;
    justify-content: center;
}

.qm-card .stp b { min-width: 22px; text-align: center; font-size: 14.5px; color: #b25e00; }

/* The sheet grows a grab-handle — the body already knows what that means. */
.qm-sheet::before {
    content: '';
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: var(--mud-palette-lines-default);
    margin-bottom: 4px;
}

/* ---------- Table chat: modern bubbles, voice notes, one floating button ---------- */
.qc-fab {
    position: fixed;
    bottom: 88px;
    inset-inline-end: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    color: #fff;
    font-size: 24px;
    cursor: pointer;
    z-index: 60;
    box-shadow: 0 8px 24px rgba(244, 81, 30, .45);
    transition: transform .15s ease;
}

.qc-fab:active { transform: scale(.9); }

.qc-fab .n {
    position: absolute;
    top: -4px;
    inset-inline-end: -4px;
    min-width: 22px;
    height: 22px;
    border-radius: 999px;
    background: #d32f2f;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 5px;
}

.qc-sheet { height: 72vh; text-align: start; align-items: stretch; gap: 10px; }

.qc-head { display: flex; align-items: center; gap: 10px; }
.qc-head .lg { font-size: 26px; }
.qc-head b { font-size: 16.5px; }

.qc-msgs {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 2px;
    scrollbar-width: none;
}

.qc-msgs::-webkit-scrollbar { display: none; }
.qc-empty { text-align: center; color: var(--mud-palette-text-secondary); margin: auto; font-size: 14px; }

.qc-bubble {
    max-width: 82%;
    padding: 9px 13px;
    border-radius: 18px;
    font-size: 14.5px;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    gap: 3px;
    animation: ooFadeUp .18s ease backwards;
}

.qc-bubble.me {
    align-self: flex-end;
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    color: #fff;
    border-end-end-radius: 6px;
}

.qc-bubble.them {
    align-self: flex-start;
    background: var(--mud-palette-background-gray, #f1efec);
    border-end-start-radius: 6px;
}

.qc-bubble small { font-size: 10px; opacity: .7; align-self: flex-end; }
.qc-bubble audio { max-width: 220px; height: 38px; }

.qc-input {
    display: flex;
    align-items: center;
    gap: 8px;
}

.qc-input input {
    flex: 1;
    border: 1.5px solid var(--mud-palette-lines-default);
    border-radius: 999px;
    padding: 12px 18px;
    font: inherit;
    font-size: 14.5px;
    outline: none;
    background: var(--mud-palette-surface);
}

.qc-input input:focus { border-color: var(--mud-palette-primary); }

.qc-mic {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--mud-palette-background-gray, #f1efec);
    font-size: 20px;
    cursor: pointer;
    flex: none;
    transition: transform .12s ease;
}

.qc-mic.on { background: linear-gradient(135deg, #ff8a2a, #f4511e); color: #fff; box-shadow: 0 4px 14px rgba(244, 81, 30, .4); }
.qc-mic:active { transform: scale(.88); }

.qc-rec {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fdecea;
    color: #c62828;
    border-radius: 999px;
    padding: 12px 18px;
    font-weight: 700;
    font-size: 14px;
}

.qc-rec .dot { width: 10px; height: 10px; border-radius: 50%; background: #d32f2f; animation: ooDotBlink 1s infinite; }
.qc-rec .x { margin-inline-start: auto; border: none; background: transparent; color: #c62828; font-size: 15px; cursor: pointer; }

/* Partner inbox layout. */
.tc-wrap { display: flex; gap: 14px; align-items: stretch; min-height: 60vh; }
.tc-threads { width: 300px; flex: none; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; }

.tc-thread {
    text-align: start;
    border: none;
    background: var(--mud-palette-surface);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
    border-radius: 14px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font: inherit;
    transition: box-shadow .15s ease;
}

.tc-thread:hover { box-shadow: 0 5px 16px rgba(0, 0, 0, .11); }
.tc-thread.on { box-shadow: 0 0 0 2px var(--mud-palette-primary); }
.tc-thread .tbl { font-weight: 800; }
.tc-thread .last { color: var(--mud-palette-text-secondary); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-thread small { color: var(--mud-palette-text-secondary); font-size: 11px; }

.tc-pane {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--mud-palette-surface);
    border-radius: 18px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .07);
    padding: 14px;
    max-height: 74vh;
}

@media (max-width: 800px) {
    .tc-wrap { flex-direction: column; }
    .tc-threads { width: 100%; flex-direction: row; overflow-x: auto; }
    .tc-thread { min-width: 200px; }
}

/* Details sheet, the professional cut: photo bleeding edge to edge. */
.qm-sheet > img {
    width: calc(100% + 40px);
    margin: -8px -20px 4px;
    height: 210px;
    border-radius: 0;
    object-fit: cover;
}

/* Chat inbox rows + the full-page thread. */
.tc-inbox { display: flex; flex-direction: column; gap: 8px; max-width: 680px; }

.tc-inbox .tc-thread { flex-direction: row; align-items: center; gap: 12px; }
.tc-inbox .ava {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fdeadb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex: none;
}
.tc-inbox .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.tc-full {
    display: flex;
    flex-direction: column;
    max-width: 760px;
    margin: 0 auto;
    height: calc(100vh - 130px);
    background: var(--mud-palette-surface);
    border-radius: 18px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, .08);
    padding: 10px 14px 14px;
    gap: 8px;
}

.tc-full-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 8px;
    border-bottom: 1.5px solid var(--mud-palette-lines-default);
}

.tc-full-head .ava {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #fdeadb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.tc-full-head b { font-size: 16.5px; }
.tc-full-msgs { flex: 1; }

/* Photo messages in the chat, and the camera button. */
.qc-bubble .qc-img { max-width: 230px; border-radius: 14px; display: block; }
.qc-mic.cam { font-size: 18px; }
.qc-page { height: calc(100vh - 150px); margin: 0 14px; }

/* ---------- The partner chat, dressed as WhatsApp ---------- */
.tc-full.wa { padding: 0; overflow: hidden; background: #efe7dd; }

.tc-full.wa .tc-full-head {
    background: #008069;
    color: #fff;
    padding: 10px 14px;
    border-bottom: none;
    border-radius: 18px 18px 0 0;
}

.tc-full.wa .tc-full-head .mud-icon-button { color: #fff; }
.tc-full.wa .tc-full-head .ava { background: rgba(255, 255, 255, .2); }
.tc-full.wa .tc-full-head b { color: #fff; }

/* The wallpaper: warm paper with the faint doodle-dot texture. */
.tc-full.wa .tc-full-msgs {
    background:
        radial-gradient(rgba(0, 0, 0, .028) 1.4px, transparent 1.5px) 0 0 / 26px 26px,
        #efe7dd;
    padding: 14px 12px;
    margin: 0;
}

.tc-full.wa .qc-bubble {
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
    position: relative;
    max-width: 78%;
    font-size: 14.5px;
    padding: 7px 10px 5px;
}

.tc-full.wa .qc-bubble.me {
    background: #d9fdd3;
    color: #111b21;
    border-end-end-radius: 10px;
}

.tc-full.wa .qc-bubble.them {
    background: #fff;
    color: #111b21;
    border-end-start-radius: 10px;
}

/* The tails. */
.tc-full.wa .qc-bubble.me::after,
.tc-full.wa .qc-bubble.them::after {
    content: '';
    position: absolute;
    top: 0;
    border: 7px solid transparent;
}

.tc-full.wa .qc-bubble.me::after {
    inset-inline-end: -7px;
    border-top-color: #d9fdd3;
    border-inline-end-width: 0;
}

.tc-full.wa .qc-bubble.them::after {
    inset-inline-start: -7px;
    border-top-color: #fff;
    border-inline-start-width: 0;
}

.tc-full.wa .qc-bubble small { color: #667781; opacity: 1; font-size: 10.5px; }

.tc-full.wa .qc-input { padding: 8px 10px 12px; background: #efe7dd; }
.tc-full.wa .qc-input input { border: none; box-shadow: 0 1px 3px rgba(0, 0, 0, .1); }
.tc-full.wa .qc-mic { background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.tc-full.wa .qc-mic.on { background: #00a884; box-shadow: 0 3px 10px rgba(0, 168, 132, .4); }

/* The inbox: hairline rows, WhatsApp-flat. */
.tc-inbox.wa { gap: 0; background: var(--mud-palette-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.07); padding: 8px 12px 4px; }
.tc-inbox.wa .tc-thread { box-shadow: none; border-radius: 0; border-bottom: 1px solid rgba(0, 0, 0, .06); padding: 12px 4px; }
.tc-inbox.wa .tc-thread:last-child { border-bottom: none; }
.tc-inbox.wa .tc-thread:hover { background: rgba(0, 0, 0, .03); box-shadow: none; }
.tc-inbox.wa .ava { background: #d9fdd3; }

/* ---------- WhatsApp UX, the real thing: full-bleed screens ---------- */
/* Home. */
.wa-home { min-height: calc(100vh - 64px); background: var(--mud-palette-surface); display: flex; flex-direction: column; }

.wa-hometop {
    background: #008069;
    color: #fff;
    padding: 16px 18px;
    font-size: 19px;
    font-weight: 800;
}

.wa-search { padding: 8px 12px; background: var(--mud-palette-surface); }

.wa-search input {
    width: 100%;
    border: none;
    background: #f0f2f5;
    border-radius: 999px;
    padding: 10px 18px;
    font: inherit;
    font-size: 14px;
    outline: none;
}

.wa-rows { display: flex; flex-direction: column; overflow-y: auto; scrollbar-width: none; }
.wa-rows::-webkit-scrollbar { display: none; }

.wa-row {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 10px 14px;
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    text-align: start;
    width: 100%;
}

.wa-row:hover { background: #f5f6f6; }
.wa-row:active { background: #ebedef; }

.wa-row .ava {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #d9fdd3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex: none;
}

.wa-row .mid { flex: 1; min-width: 0; border-bottom: 1px solid #e9edef; padding: 10px 0; }
.wa-row:last-child .mid { border-bottom: none; }
.wa-row .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wa-row .top b { font-size: 16px; color: #111b21; }
.wa-row .top small { color: #667781; font-size: 12px; flex: none; }
.wa-row .preview {
    display: block;
    color: #667781;
    font-size: 13.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 2px;
}

.wa-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: auto;
    padding: 40px 20px;
    color: #667781;
    text-align: center;
}

/* The conversation screen: pinned under the app bar, edge to edge. */
.wa-screen {
    position: fixed;
    top: var(--mud-appbar-height, 64px);
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    z-index: 3;
    background: #efe7dd;
}

.wa-head {
    background: #008069;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    flex: none;
}

.wa-head .mud-icon-button { color: #fff; }

.wa-head .ava {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}

.wa-head .who { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.wa-head .who b { font-size: 16px; }
.wa-head .who small { font-size: 11.5px; opacity: .85; }

.wa-msgs {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 8%;
    scrollbar-width: none;
    background:
        radial-gradient(rgba(0, 0, 0, .028) 1.4px, transparent 1.5px) 0 0 / 26px 26px,
        #efe7dd;
}

.wa-msgs::-webkit-scrollbar { display: none; }

.wa-msgs .qc-bubble {
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .13);
    position: relative;
    max-width: 65%;
    font-size: 14.2px;
    padding: 6px 9px 4px;
    animation: none;
}

.wa-msgs .qc-bubble.me { background: #d9fdd3; color: #111b21; }
.wa-msgs .qc-bubble.them { background: #fff; color: #111b21; }

.wa-msgs .qc-bubble.me::after,
.wa-msgs .qc-bubble.them::after {
    content: '';
    position: absolute;
    top: 0;
    border: 6px solid transparent;
}

.wa-msgs .qc-bubble.me::after { inset-inline-end: -6px; border-top-color: #d9fdd3; border-inline-end-width: 0; }
.wa-msgs .qc-bubble.them::after { inset-inline-start: -6px; border-top-color: #fff; border-inline-start-width: 0; }
.wa-msgs .qc-bubble small { color: #667781; opacity: 1; font-size: 10.5px; }

/* Date chips floating mid-stream. */
.wa-date { align-self: center; margin: 8px 0 6px; }

.wa-date span {
    background: #fff;
    color: #54656f;
    font-size: 12px;
    font-weight: 700;
    border-radius: 8px;
    padding: 5px 12px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
}

.wa-input {
    flex: none;
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px calc(10px + env(safe-area-inset-bottom));
    background: #f0f2f5;
}

.wa-input input {
    flex: 1;
    border: none;
    background: #fff;
    border-radius: 999px;
    padding: 12px 18px;
    font: inherit;
    font-size: 14.5px;
    outline: none;
}

.wa-input .qc-mic { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
.wa-input .qc-mic.on { background: #00a884; color: #fff; box-shadow: 0 3px 10px rgba(0, 168, 132, .4); }
.wa-input .qc-rec { background: #fff; }

@media (max-width: 700px) {
    .wa-msgs { padding: 12px 12px; }
    .wa-msgs .qc-bubble { max-width: 80%; }
    .wa-screen { top: var(--mud-appbar-height, 56px); }
}

/* WhatsApp UX, OrderOrange colors: structure stays, the teal & green go. */
.wa-hometop,
.wa-head { background: linear-gradient(135deg, #ff8a2a, #f4511e); }

.wa-screen { background: #f8f1ea; }

.wa-msgs {
    background:
        radial-gradient(rgba(120, 80, 40, .05) 1.4px, transparent 1.5px) 0 0 / 26px 26px,
        #f8f1ea;
}

.wa-msgs .qc-bubble.me { background: #ffe4cd; }
.wa-msgs .qc-bubble.me::after { border-top-color: #ffe4cd; }

.wa-row .ava { background: #fdeadb; }
.wa-head .ava { background: rgba(255, 255, 255, .25); }

.wa-input { background: #f4ede5; }
.wa-input .qc-mic.on {
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    box-shadow: 0 3px 10px rgba(244, 81, 30, .4);
}

.wa-msgs .qc-bubble small { color: #8a7563; }
.wa-date span { color: #8a7563; }

/* The chat screen must live INSIDE the content area, not float over the drawer —
   fixed positioning put the header underneath the side menu. */
.wa-screen {
    position: static;
    height: calc(100vh - 64px);
    width: 100%;
}

@media (max-width: 700px) {
    .wa-screen { height: calc(100vh - 56px); }
}

/* On big screens the chat holds a comfortable column, centered — not a wall of room. */
.wa-screen, .wa-home {
    max-width: 860px;
    margin: 0 auto;
    box-shadow: 0 0 24px rgba(0, 0, 0, .08);
}

/* ---------- Desktop chat: the WhatsApp-Web split ---------- */
.wa-desk {
    display: grid;
    grid-template-columns: 1fr;
    height: calc(100vh - 64px);
    max-width: 1400px;
    margin: 0 auto;
    box-shadow: 0 0 24px rgba(0, 0, 0, .08);
    overflow: hidden;
}

.wa-desk .wa-home { max-width: none; margin: 0; box-shadow: none; min-height: 0; height: 100%; overflow: hidden; }
.wa-desk .wa-side { display: none; }

.wa-pane { display: flex; flex-direction: column; height: 100%; min-height: 0; background: #f8f1ea; }

@media (min-width: 960px) {
    .wa-desk { grid-template-columns: 380px 1fr; }
    .wa-desk .wa-home { border-inline-end: 1px solid #e2ddd6; }
    .wa-desk .wa-side { display: flex; flex-direction: column; min-height: 0; }
    .wa-row.on { background: #f4ede5; }
}

.wa-placeholder {
    margin: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #8a7563;
    text-align: center;
    padding: 30px;
}

/* The standalone phone route keeps its sizing; the pane inside fills it. */
.wa-screen { max-width: 860px; }
.wa-screen .wa-pane { height: 100%; }

/* Two monitors, two UX. Small (<1280px): a centered inbox page, threads open as
   their own screens. Large (>=1280px): the WhatsApp-Web split. */
@media (max-width: 1279px) {
    .wa-desk { grid-template-columns: 1fr; max-width: 720px; }
    .wa-desk .wa-side { display: none !important; }
}

@media (min-width: 1280px) {
    .wa-desk { grid-template-columns: 400px 1fr; max-width: 1500px; }
    .wa-desk .wa-home { border-inline-end: 1px solid #e2ddd6; }
    .wa-desk .wa-side { display: flex; flex-direction: column; min-height: 0; }
}

/* ---------- Chat, the polish pass: depth, motion, life ---------- */
/* Rows glide in one after another and slide gently on hover. */
.wa-row { animation: ooRowIn .3s ease backwards; transition: background .15s ease, transform .15s ease; }
.wa-row:nth-child(1) { animation-delay: 30ms; }
.wa-row:nth-child(2) { animation-delay: 70ms; }
.wa-row:nth-child(3) { animation-delay: 110ms; }
.wa-row:nth-child(4) { animation-delay: 150ms; }
.wa-row:nth-child(n+5) { animation-delay: 190ms; }
.wa-row:hover { transform: translateX(-3px); }
[dir="ltr"] .wa-row:hover, html:not([dir]) .wa-row:hover { transform: translateX(3px); }

.wa-row .ava {
    background: linear-gradient(145deg, #ffd9b3, #ffb27a);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7), 0 2px 6px rgba(244, 81, 30, .18);
    transition: transform .15s ease;
}

.wa-row:hover .ava { transform: scale(1.06); }
.wa-row.on { background: #fdeadb; }
.wa-row.on .mid { border-bottom-color: transparent; }

/* The header earns a soft pattern and a shadow that separates it from the paper. */
.wa-head, .wa-hometop {
    position: relative;
    box-shadow: 0 2px 10px rgba(244, 81, 30, .25);
    z-index: 2;
}

.wa-head::after, .wa-hometop::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% -40%, rgba(255, 255, 255, .35), transparent 55%);
    pointer-events: none;
}

.wa-head .ava { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }

/* Bubbles arrive from their own side, land softly. */
@keyframes waInMe { from { opacity: 0; transform: translateX(14px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes waInThem { from { opacity: 0; transform: translateX(-14px) scale(.96); } to { opacity: 1; transform: none; } }

.wa-msgs .qc-bubble.me { animation: waInMe .22s ease backwards; box-shadow: 0 1px 2px rgba(180, 110, 50, .25); }
.wa-msgs .qc-bubble.them { animation: waInThem .22s ease backwards; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

[dir="rtl"] .wa-msgs .qc-bubble.me { animation-name: waInThem; }
[dir="rtl"] .wa-msgs .qc-bubble.them { animation-name: waInMe; }

.wa-msgs .qc-bubble .qc-img { border-radius: 10px; margin: -2px -3px 3px; }

/* Date chips get the frosted look. */
.wa-date span {
    background: rgba(255, 255, 255, .82);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .1);
}

/* The input floats like a card; the mic breathes while recording. */
.wa-input {
    background: transparent;
    padding-top: 4px;
}

.wa-input input {
    box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
    transition: box-shadow .18s ease;
}

.wa-input input:focus { box-shadow: 0 2px 12px rgba(244, 81, 30, .28); }

.wa-input .qc-mic { transition: transform .12s ease, box-shadow .15s ease; }
.wa-input .qc-mic:hover { transform: scale(1.08); }

@keyframes waPulse {
    0%, 100% { box-shadow: 0 3px 10px rgba(244, 81, 30, .4); }
    50% { box-shadow: 0 3px 10px rgba(244, 81, 30, .4), 0 0 0 10px rgba(244, 81, 30, .12); }
}

.wa-input .qc-mic.on { animation: waPulse 1.4s ease-in-out infinite; }
.qc-rec { box-shadow: 0 2px 10px rgba(211, 47, 47, .18); }

/* The empty pane: a breathing invitation, not a void. */
.wa-placeholder > div:first-child {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff3e7, #ffe0c4);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px !important;
    box-shadow: inset 0 0 0 6px rgba(255, 255, 255, .6), 0 10px 30px rgba(244, 81, 30, .12);
    animation: ooFpFloat 3.2s ease-in-out infinite;
}

.wa-placeholder b { font-size: 17px; color: #6b5647; }

/* Pane swap: the conversation fades up when a thread is picked. */
.wa-side .wa-pane { animation: ooFadeUp .25s ease backwards; }

/* Search pill: focus glow. */
.wa-search input { transition: box-shadow .18s ease, background .18s ease; }
.wa-search input:focus { background: #fff; box-shadow: 0 0 0 3px rgba(244, 81, 30, .22); outline: none; }

/* Reduced motion: everything calms down. */
@media (prefers-reduced-motion: reduce) {
    .wa-row, .wa-msgs .qc-bubble, .wa-side .wa-pane, .wa-placeholder > div:first-child,
    .wa-input .qc-mic.on { animation: none !important; }
}

/* ---------- Chat: edit/delete actions, seen ticks, bare thread screen ---------- */
.qc-bubble .tick { font-style: normal; font-size: 11px; margin-inline-start: 3px; color: #b0a89f; letter-spacing: -2px; }
.qc-bubble .tick.seen { color: #f4511e; }
.qc-bubble .ed { font-style: italic; }

.qc-bubble.gone { opacity: .75; }
.qc-bubble .delstub { font-style: italic; color: #8a7563; font-size: 13.5px; }

.qc-seenline {
    align-self: flex-end;
    font-size: 10.5px;
    color: #8a7563;
    margin: -2px 4px 2px;
}

[dir="rtl"] .qc-seenline { align-self: flex-start; }

.qc-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
    animation: ooFadeUp .15s ease backwards;
}

.qc-actions button {
    border: none;
    background: rgba(255, 255, 255, .85);
    border-radius: 999px;
    padding: 5px 12px;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}

.qc-actions button.danger { color: #c62828; }

.qc-editing {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff7ee;
    border-inline-start: 3px solid #f4511e;
    margin: 0 10px;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #b25e00;
}

.qc-editing button { margin-inline-start: auto; border: none; background: transparent; cursor: pointer; color: #b25e00; }

/* An open conversation owns the whole viewport: no app bar, no drawer, just back. */
.chatbare .mud-main-content { padding-top: 0 !important; }
.chatbare .wa-screen { height: 100vh; max-width: none; box-shadow: none; }

/* ---------- Wide-pane fixes: the chat holds a column, headers align ---------- */
/* Both orange headers share one height and sit flush — no stacked mismatch. */
.wa-hometop, .wa-head {
    height: 64px;
    display: flex;
    align-items: center;
    padding: 0 16px;
    box-sizing: border-box;
    gap: 10px;
}

/* On an ultra-wide pane, messages and the input bar hold a readable column in the
   middle instead of stretching wall to wall. */
.wa-msgs { padding-inline: max(16px, calc((100% - 760px) / 2)); }
.wa-input { padding-inline: max(12px, calc((100% - 780px) / 2)); }

/* The input bar itself: grounded with a hairline, tidy circle buttons. */
.wa-input {
    border-top: 1px solid rgba(0, 0, 0, .05);
    background: rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.wa-input .qc-mic { width: 46px; height: 46px; flex: none; }
.wa-input input { min-width: 0; }

/* The editing banner follows the same column. */
.qc-editing { margin-inline: max(12px, calc((100% - 780px) / 2)); }

/* The chat-only layout: the conversation IS the page. */
.chatonly { height: 100vh; height: 100dvh; }
.chatonly .wa-screen { height: 100%; max-width: none; box-shadow: none; }

/* The inbox stands alone now — one centered column on every screen size. */
.wa-desk.single { grid-template-columns: 1fr !important; max-width: 760px; }
.wa-desk.single .wa-home { border-inline-end: none; }

/* Chat input buttons: real icons, perfectly centered, send flips for RTL. */
.qc-mic {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #6b5647;
    padding: 0;
    border: none;
    cursor: pointer;
}

.qc-mic .mud-icon-root { color: inherit; }
.qc-mic.on { color: #fff; }
[dir="rtl"] .qc-send-ico { transform: scaleX(-1); }

/* The whole chat world is bare: the inbox fills the viewport too. */
.chatonly .wa-desk { height: 100vh; height: 100dvh; box-shadow: none; }
.chatonly .wa-desk.single { max-width: 760px; }
.chatonly .wa-home { height: 100%; }

/* Bare-layout split: small screens one centered column, big monitors the two panes
   (the list keeps the start side — the RIGHT edge in RTL). */
.chatonly .wa-desk { max-width: 760px; }

@media (min-width: 1280px) {
    .chatonly .wa-desk { max-width: none; }
    .chatonly .wa-side { background: #f8f1ea; }
}

/* ================= CHAT — FINAL DESIGN, two deliberate layouts ================= */

/* The stage: a soft warm backdrop behind the app window. */
.chatonly {
    background: linear-gradient(180deg, #f7f2ec, #ece1d3);
    display: flex;
    align-items: stretch;
    justify-content: center;
    min-height: 100dvh;
}

/* ---- BIG MONITOR (>=1280): a contained messenger window, like WhatsApp Web ---- */
@media (min-width: 1280px) {
    .chatonly .wa-desk {
        width: 100%;
        max-width: 1600px;
        margin: 24px;
        height: calc(100dvh - 48px);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 24px 70px rgba(90, 60, 30, .22);
        grid-template-columns: 380px 1fr;
        background: #fff;
    }

    .chatonly .wa-home { border-inline-end: 1px solid #eee4d8; background: #fff; }
    .chatonly .wa-side { background: #f8f1ea; }

    /* A deep-linked single conversation gets the same window treatment. */
    .chatonly .wa-screen {
        max-width: 1000px;
        width: 100%;
        margin: 24px auto;
        height: calc(100dvh - 48px);
        border-radius: 24px;
        overflow: hidden;
        box-shadow: 0 24px 70px rgba(90, 60, 30, .22);
    }
}

/* ---- SMALL MONITOR / PHONE (<1280): the app owns the whole screen ---- */
@media (max-width: 1279px) {
    .chatonly .wa-desk {
        margin: 0;
        max-width: none;
        width: 100%;
        height: 100dvh;
        border-radius: 0;
        box-shadow: none;
        grid-template-columns: 1fr;
        background: #fff;
    }

    .chatonly .wa-screen { margin: 0; max-width: none; height: 100dvh; border-radius: 0; box-shadow: none; }
    .wa-hometop, .wa-head { height: 56px; }
}

/* Rail rows: roomier, calmer. */
.wa-row { padding: 12px 16px; }
.wa-row:hover { background: #faf5ef; }
.wa-row.on { background: #fdeadb; }

/* The composer floats inside the conversation — a modern pill bar, not a strip. */
.wa-input {
    border-top: none;
    background: transparent;
    padding: 6px 14px 14px;
}

.wa-input input {
    background: #fff;
    box-shadow: 0 4px 16px rgba(90, 60, 30, .14);
    padding: 13px 20px;
}

.wa-input .qc-mic {
    background: #fff;
    box-shadow: 0 4px 14px rgba(90, 60, 30, .14);
}

.wa-input .qc-mic.on {
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    box-shadow: 0 4px 16px rgba(244, 81, 30, .45);
}

/* Empty conversation pane: branded, not blank. */
.wa-placeholder {
    background:
        radial-gradient(rgba(120, 80, 40, .05) 1.4px, transparent 1.5px) 0 0 / 26px 26px,
        #f8f1ea;
    width: 100%;
    height: 100%;
    margin: 0;
    justify-content: center;
}

/* ============ CHAT UI v2 — neutral shell, brand as ACCENT only ============ */
/* The orange soup is over: light surfaces carry the app, orange marks what matters. */

/* Headers: white, quiet, separated by hairlines — not billboards. */
.wa-hometop, .wa-head {
    background: #fff !important;
    color: #1c1712;
    box-shadow: none;
    border-bottom: 1px solid #ece7e1;
}

.wa-hometop::after, .wa-head::after { display: none; }
.wa-hometop b { font-size: 18px; color: #1c1712; }
.wa-hometop .mud-icon-button, .wa-head .mud-icon-button { color: #4b4238; }
.wa-head .who b { color: #1c1712; }
.wa-head .who small { color: #8a8177; opacity: 1; }

/* Initials avatars: the brand gradient lives HERE, small and confident. */
.wa-row .ava, .wa-head .ava {
    background: linear-gradient(145deg, #ff9a3e, #f4511e);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .3px;
    box-shadow: 0 3px 8px rgba(244, 81, 30, .28);
    direction: ltr;
}

.wa-head .ava { width: 40px; height: 40px; font-size: 14px; }

/* The rail: white, calm rows, a 3px accent bar on the open thread. */
.chatonly .wa-home { background: #fff; }
.wa-search { background: #fff; padding: 10px 14px; }
.wa-search input { background: #f2f0ed; }
.wa-row { position: relative; }
.wa-row:hover { background: #f7f5f2; transform: none; }
.wa-row.on { background: #fff4ec; }

.wa-row.on::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #ff9a3e, #f4511e);
}

.wa-row .top b { color: #1c1712; }

/* The conversation surface: cool, neutral, endless-feeling. */
.chatonly .wa-side, .wa-screen, .wa-pane { background: #f4f2ef; }

.wa-msgs {
    background:
        radial-gradient(rgba(60, 50, 40, .035) 1.3px, transparent 1.4px) 0 0 / 24px 24px,
        #f4f2ef;
}

.wa-placeholder {
    background:
        radial-gradient(rgba(60, 50, 40, .035) 1.3px, transparent 1.4px) 0 0 / 24px 24px,
        #f4f2ef;
}

/* Bubbles v2: real size, real contrast, no tail artifacts. */
.wa-msgs .qc-bubble {
    max-width: 62%;
    font-size: 15px;
    line-height: 1.5;
    padding: 10px 14px 7px;
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
}

.wa-msgs .qc-bubble.me::after, .wa-msgs .qc-bubble.them::after { display: none; }

.wa-msgs .qc-bubble.me {
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    color: #fff;
    border-end-end-radius: 6px;
}

.wa-msgs .qc-bubble.them {
    background: #fff;
    color: #1c1712;
    border: 1px solid #eae5df;
    border-end-start-radius: 6px;
}

.wa-msgs .qc-bubble.me small { color: rgba(255, 255, 255, .75); }
.wa-msgs .qc-bubble.them small { color: #9a9188; }
.wa-msgs .qc-bubble.me .tick { color: rgba(255, 255, 255, .55); }
.wa-msgs .qc-bubble.me .tick.seen { color: #fff; }
.wa-msgs .qc-bubble.me .delstub { color: rgba(255, 255, 255, .85); }

.wa-date span { background: #fff; border: 1px solid #eae5df; box-shadow: none; color: #8a8177; }
.qc-seenline { color: #9a9188; }

/* Composer v2: one clean bar — light circles, gradient send. */
.wa-input { background: transparent; border-top: none; padding-bottom: 16px; }

.wa-input input {
    background: #fff;
    border: 1px solid #eae5df;
    box-shadow: 0 2px 10px rgba(40, 30, 20, .06);
    font-size: 15px;
}

.wa-input input:focus { border-color: #f4511e66; box-shadow: 0 2px 12px rgba(244, 81, 30, .16); }

.wa-input .qc-mic {
    background: #fff;
    border: 1px solid #eae5df;
    box-shadow: 0 2px 8px rgba(40, 30, 20, .06);
    color: #6b6259;
}

.wa-input .qc-mic.on {
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    border: none;
    color: #fff;
    box-shadow: 0 4px 14px rgba(244, 81, 30, .4);
}

/* Actions and editing follow the neutral language. */
.qc-actions button { background: #fff; border: 1px solid #eae5df; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.qc-editing { background: #fff; border: 1px solid #eae5df; border-inline-start: 3px solid #f4511e; }

/* Big-monitor window chrome softens to match. */
@media (min-width: 1280px) {
    .chatonly { background: linear-gradient(180deg, #efece8, #e5e0d9); }
    .chatonly .wa-desk, .chatonly .wa-screen { box-shadow: 0 24px 70px rgba(60, 45, 30, .18); }
    .chatonly .wa-home { border-inline-end: 1px solid #ece7e1; }
}

/* Chat density pass: everything one size smaller — compact, not chunky. */
.wa-hometop, .wa-head { height: 54px; padding: 0 12px; gap: 8px; }
.wa-hometop b { font-size: 16px; }
.wa-head .who b { font-size: 14.5px; }
.wa-head .who small { font-size: 11px; }
.wa-head .ava { width: 32px; height: 32px; font-size: 12px; }

.wa-search { padding: 8px 12px; }
.wa-search input { padding: 8px 14px; font-size: 13px; }

.wa-row { padding: 8px 12px; gap: 10px; }
.wa-row .ava { width: 38px; height: 38px; font-size: 13px; }
.wa-row .top b { font-size: 14px; }
.wa-row .top small { font-size: 11px; }
.wa-row .preview { font-size: 12.5px; }
.wa-row .mid { padding: 6px 0; }

.wa-msgs { gap: 3px; padding-top: 10px; }
.wa-msgs .qc-bubble { font-size: 13.5px; padding: 7px 11px 5px; border-radius: 14px; max-width: 58%; }
.wa-msgs .qc-bubble small { font-size: 9.5px; }
.wa-date span { font-size: 11px; padding: 3px 10px; }

.wa-input { padding: 4px 12px 12px; gap: 6px; }
.wa-input input { padding: 9px 15px; font-size: 13.5px; }
.wa-input .qc-mic { width: 38px; height: 38px; }
.wa-input .qc-mic .mud-icon-root { width: 17px !important; height: 17px !important; }

.qc-bubble .qc-img { max-width: 180px; }
.qc-bubble audio { max-width: 190px; height: 32px; }
.wa-placeholder > div:first-child { width: 84px; height: 84px; font-size: 38px !important; }
.wa-placeholder b { font-size: 14.5px; }
.qc-actions button { padding: 4px 10px; font-size: 11.5px; }

@media (max-width: 1279px) {
    .wa-hometop, .wa-head { height: 50px; }
}

/* Smaller still: the chat at true desktop-app density. */
.wa-hometop, .wa-head { height: 46px; padding: 0 10px; }
.wa-hometop b { font-size: 14.5px; }
.wa-head .who b { font-size: 13px; }
.wa-head .who small { font-size: 10px; }
.wa-head .ava { width: 26px; height: 26px; font-size: 10.5px; }
.wa-hometop .mud-icon-button, .wa-head .mud-icon-button { padding: 6px; }
.wa-hometop .mud-icon-button .mud-icon-root, .wa-head .mud-icon-button .mud-icon-root { width: 18px; height: 18px; }

.wa-search { padding: 6px 10px; }
.wa-search input { padding: 6px 12px; font-size: 12px; }

.wa-row { padding: 6px 10px; gap: 8px; }
.wa-row .ava { width: 30px; height: 30px; font-size: 11px; }
.wa-row .top b { font-size: 12.5px; }
.wa-row .top small { font-size: 10px; }
.wa-row .preview { font-size: 11.5px; margin-top: 0; }
.wa-row .mid { padding: 5px 0; }

.wa-msgs { gap: 2px; }
.wa-msgs .qc-bubble { font-size: 12.5px; padding: 5px 9px 4px; border-radius: 12px; max-width: 52%; }
.wa-msgs .qc-bubble small { font-size: 8.5px; }
.wa-date span { font-size: 10px; padding: 2px 8px; }
.wa-date { margin: 5px 0 3px; }

.wa-input { padding: 3px 10px 10px; gap: 5px; }
.wa-input input { padding: 7px 12px; font-size: 12.5px; }
.wa-input .qc-mic { width: 32px; height: 32px; }
.wa-input .qc-mic .mud-icon-root { width: 15px !important; height: 15px !important; }

.qc-bubble .qc-img { max-width: 150px; border-radius: 8px; }
.qc-bubble audio { max-width: 170px; height: 28px; }
.wa-placeholder > div:first-child { width: 64px; height: 64px; font-size: 28px !important; }
.wa-placeholder b { font-size: 12.5px; }
.qc-seenline { font-size: 9px; }
.qc-editing { padding: 5px 10px; font-size: 11.5px; }

@media (min-width: 1280px) {
    .chatonly .wa-desk { grid-template-columns: 300px 1fr; }
}

/* ============ CHAT v171 — reply, dots menu, attach, lightbox, wallpaper, history ============ */

/* The doodle wallpaper: quiet food icons behind the conversation. */
.wa-msgs, .wa-placeholder {
    background-color: #f4f2ef;
    background-image: url('chat-bg.svg');
    background-size: 260px 260px;
}

/* ⋮ on every bubble — the one way in to reply / edit / delete. */
.qc-bubble { position: relative; }
.qc-bubble .qc-dots {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: rgba(0,0,0,.06);
    color: inherit;
    opacity: 0;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    transition: opacity .15s;
    padding: 0;
}
.qc-bubble:hover .qc-dots, .qc-bubble:active .qc-dots { opacity: .85; }
@media (hover: none) { .qc-bubble .qc-dots { opacity: .55; } }
.qc-bubble.me .qc-dots { background: rgba(255,255,255,.25); color: #fff; }

/* The quoted line above a reply. */
.qc-quote {
    display: block;
    font-size: 11.5px;
    opacity: .8;
    border-inline-start: 3px solid var(--mud-palette-primary, #ff7a1a);
    padding: 3px 8px;
    margin-bottom: 4px;
    border-radius: 6px;
    background: rgba(0,0,0,.05);
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qc-bubble.me .qc-quote { border-inline-start-color: #fff; background: rgba(255,255,255,.18); }

/* Reply chip above the input reuses the editing strip. */
.qc-editing.reply { color: #6b6257; }

/* Image messages are thumbnails; the lightbox is the full story. */
.qc-img {
    max-width: 200px;
    max-height: 160px;
    object-fit: cover;
    border-radius: 10px;
    cursor: zoom-in;
    display: block;
}
.qc-lightbox {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(15,12,8,.9);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: qcfade .15s ease;
}
.qc-lightbox img {
    max-width: 94vw;
    max-height: 92vh;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0,0,0,.6);
}
.qc-lightbox .x {
    position: absolute;
    top: 14px;
    inset-inline-end: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.14);
    color: #fff;
    font-size: 17px;
    cursor: pointer;
}
@keyframes qcfade { from { opacity: 0; } to { opacity: 1; } }

/* A document in the conversation. */
.qc-file {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border-radius: 10px;
    background: rgba(0,0,0,.06);
    color: inherit;
    text-decoration: none;
    font-size: 12.5px;
    max-width: 230px;
}
.qc-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qc-bubble.me .qc-file { background: rgba(255,255,255,.2); color: #fff; }

/* The attach menu: camera / gallery / file, floating above the + button. */
.qc-attachwrap { position: relative; }
.qc-attach {
    position: absolute;
    bottom: 44px;
    inset-inline-start: 0;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 8px 28px rgba(30,20,10,.18);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 30;
    animation: qcpop .12s ease;
    min-width: 150px;
}
.qc-attach button {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    background: none;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13px;
    color: #3c352c;
    cursor: pointer;
    text-align: start;
}
.qc-attach button:hover { background: #f6f1ea; }
.qc-attach button .mud-icon-root { color: var(--mud-palette-primary, #ff7a1a); }
@keyframes qcpop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Chat history page ---- */
.ch-list {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eee7dd;
    overflow: hidden;
    max-width: 720px;
}
.ch-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 0;
    background: none;
    padding: 11px 16px;
    cursor: pointer;
    text-align: start;
    border-bottom: 1px solid #f3ede4;
    font-family: inherit;
}
.ch-row:last-child { border-bottom: 0; }
.ch-row:hover { background: #faf7f2; }
.ch-row .ava, .ch-viewtop .ava {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffb36b, #ff7a1a);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 13px;
    flex: none;
}
.ch-row .mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ch-row .mid b { font-size: 13.5px; color: #2f2a23; }
.ch-row .mid small, .ch-row .when { font-size: 11.5px; color: #97907f; }
.ch-view {
    max-width: 720px;
    background: #fff;
    border-radius: 16px;
    border: 1px solid #eee7dd;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.ch-viewtop {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-bottom: 1px solid #f3ede4;
    background: #fff;
}
.ch-viewtop .who { display: flex; flex-direction: column; }
.ch-viewtop .who b { font-size: 13.5px; color: #2f2a23; }
.ch-viewtop .who small { font-size: 11.5px; color: #97907f; }
.ch-msgs {
    height: auto;
    max-height: calc(100vh - 260px);
    min-height: 260px;
    overflow-y: auto;
    padding: 14px;
}

/* ---- Mobile polish: thumb-size targets, no hover dependence, safe areas ---- */
@media (max-width: 640px) {
    .qc-bubble { max-width: 82%; }
    .qc-img { max-width: 62vw; max-height: 44vw; }
    .qc-bubble .qc-dots { opacity: .5; width: 22px; height: 22px; }
    .wa-input { padding-bottom: max(8px, env(safe-area-inset-bottom)); }
    .qc-attach { min-width: 170px; }
    .qc-attach button { padding: 12px 14px; font-size: 14px; }
    .qc-actions button { padding: 11px 14px; font-size: 13.5px; }
    .qc-lightbox .x { top: max(14px, env(safe-area-inset-top)); }
    .wa-head .who b { font-size: 14px; }
}

/* v172 — the wallpaper steps forward: cache-busted, slightly warmer canvas. */
.wa-msgs, .wa-placeholder {
    background-color: #f6f1ea;
    background-image: url('chat-bg.svg?v=2');
    background-size: 260px 260px;
}

/* ============ v173 — quieter wallpaper, mobile bottom fix, inbox unread badges ============ */

/* The wallpaper retreats to a whisper again. */
.wa-msgs, .wa-placeholder {
    background-color: #f6f2ec;
    background-image: url('chat-bg.svg?v=3');
    background-size: 260px 260px;
}

/* The guest chat on a phone: pin the screen to the REAL visual viewport so no
   dead strip is left under the composer when the browser bars collapse. */
.wa-screen.qc-bare {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    max-width: 860px;
    margin: 0 auto;
    z-index: 60;
}

/* Inbox rows: how many guest messages wait in each thread. */
.wa-row .bot { display: flex; align-items: center; gap: 8px; min-width: 0; }
.wa-row .bot .preview { flex: 1; }
.wa-row .preview.unread { color: #2f2a23; font-weight: 600; }
.wa-row .top small.hot { color: #f4511e; font-weight: 700; }
.wa-unread {
    flex: none;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* v174 — the ⋮ is now unmissable, and menu labels never inherit bubble-white. */
.qc-actions button { color: #3c352c; }
.qc-actions button.danger { color: #c62828; }
.qc-bubble .qc-dots {
    opacity: 1;
    width: 22px;
    height: 22px;
    background: rgba(255, 255, 255, .95);
    color: #f4511e;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(40, 25, 10, .22);
}
.qc-bubble.me .qc-dots { background: rgba(255, 255, 255, .95); color: #f4511e; }
.qc-bubble.them .qc-dots { background: #f1e9de; color: #6b6257; }
.qc-bubble:hover .qc-dots, .qc-bubble:active .qc-dots { opacity: 1; }

/* The lone chat column holds a comfortable reading width, not the whole monitor. */
.wa-screen.qc-bare { max-width: 680px; }
.chatonly .wa-screen { max-width: 680px; margin: 0 auto; }
@media (min-width: 1280px) {
    .chatonly .wa-screen { max-width: 680px; }
}

/* v175 — the bubble reserves its corner: text never runs under the ⋮ button. */
.wa-msgs .qc-bubble:not(.gone) { padding-inline-end: 34px; }
.wa-msgs .qc-bubble:not(.gone) small { margin-inline-end: -24px; }
.qc-bubble .qc-dots { top: 4px; inset-inline-end: 4px; }

/* v176 — the reply/edit banner docks onto the composer, WhatsApp-style:
   full-width strip in the input''s own color, quote in a white card inside. */
.qc-replybar {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f4ede5;
    padding: 8px 12px 0;
}
.qc-replybar .q {
    flex: 1;
    min-width: 0;
    background: #fff;
    border-inline-start: 4px solid #f4511e;
    border-radius: 10px;
    padding: 6px 12px;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.qc-replybar .q b {
    font-size: 11.5px;
    color: #f4511e;
}
.qc-replybar .q span {
    font-size: 13px;
    color: #5c5348;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.qc-replybar > button {
    flex: none;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .06);
    color: #6b6257;
    font-size: 14px;
    cursor: pointer;
}

/* v177 — the action menu becomes a proper little dropdown: white card, vertical
   rows, crisp Material icons. No more giant emoji balloons on phones. */
.qc-actions {
    position: absolute;
    top: 28px;
    inset-inline-end: 6px;
    z-index: 25;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(40, 25, 10, .22);
    padding: 4px;
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 150px;
    width: auto;
    height: auto;
    transform: none;
}
[dir="rtl"] .qc-actions { transform: none; }
.qc-actions button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    border: 0;
    border-radius: 8px;
    background: none;
    box-shadow: none;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #3c352c;
    cursor: pointer;
    text-align: start;
}
.qc-actions button:hover { background: #f6f1ea; }
.qc-actions button .mud-icon-root { color: #8a7563; }
.qc-actions button.danger { color: #c62828; }
.qc-actions button.danger .mud-icon-root { color: #c62828; }
@media (max-width: 640px) {
    .qc-actions button { padding: 12px 14px; font-size: 14px; }
}

/* v178 — the store speaks first: table-picker sheet over the inbox. */
.wa-pick {
    background: #fff;
    border-radius: 18px;
    padding: 18px;
    width: min(92vw, 460px);
    max-height: 70vh;
    overflow-y: auto;
    cursor: default;
    box-shadow: 0 18px 60px rgba(30, 18, 8, .35);
}
.wa-pick > b { display: block; font-size: 15px; color: #2f2a23; margin-bottom: 14px; }
.wa-pick .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}
.wa-pick .grid button {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #eee3d5;
    background: #faf7f2;
    border-radius: 12px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #3c352c;
    cursor: pointer;
}
.wa-pick .grid button:hover { background: #fdeadb; border-color: #f4b183; }
.wa-pick .grid button .ava {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffb36b, #ff7a1a);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* v179 — the upload strip: an orange bar filling over the composer''s shoulder. */
.qc-upload {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f4ede5;
    padding: 10px 14px 0;
}
.qc-upload .bar {
    flex: 1;
    height: 6px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .08);
    overflow: hidden;
}
.qc-upload .bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff8a2a, #f4511e);
    transition: width .12s linear;
}
.qc-upload small {
    flex: none;
    min-width: 34px;
    text-align: end;
    font-size: 11.5px;
    font-weight: 700;
    color: #8a7563;
}

/* v180 — the in-page camera: black veil, live preview, one round shutter. */
.mfcam {
    position: fixed;
    inset: 0;
    z-index: 5000;
    background: #000;
}
.mfcam video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mfcam .shoot {
    position: absolute;
    bottom: max(28px, env(safe-area-inset-bottom));
    left: 50%;
    transform: translateX(-50%);
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 5px solid rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .25);
    cursor: pointer;
}
.mfcam .shoot:active { background: rgba(255, 255, 255, .6); }
.mfcam .close {
    position: absolute;
    top: max(14px, env(safe-area-inset-top));
    inset-inline-end: 14px;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

/* v181 — the upload strip grows up: floating white card, breathing icon,
   shimmering gradient fill, tabular percent. */
.qc-upload {
    background: transparent;
    padding: 0 12px 8px;
    display: flex;
    justify-content: center;
}
.qc-upload .ic, .qc-upload .meta, .qc-upload .pct { position: relative; }
.qc-upload {
    align-items: center;
    gap: 0;
}
.qc-upload > * { z-index: 1; }
.qc-upload {
    position: relative;
}
.qc-upload::before { content: none; }
/* the card itself */
.qc-upload {
    background: #f4ede5;
    padding: 8px 12px 0;
}
.qc-upload .ic {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(244, 81, 30, .35);
    animation: qc-up-breathe 1.6s ease-in-out infinite;
    margin-inline-end: 10px;
}
.qc-upload .meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.qc-upload .meta small {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
    color: #8a7563;
}
.qc-upload .bar {
    display: block;
    height: 7px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .07);
    overflow: hidden;
}
.qc-upload .bar .fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff8a2a, #f4511e, #ff8a2a);
    background-size: 200% 100%;
    animation: qc-up-shimmer 1.1s linear infinite;
    transition: width .18s ease;
    box-shadow: 0 0 8px rgba(244, 81, 30, .45);
}
.qc-upload .pct {
    flex: none;
    min-width: 44px;
    text-align: end;
    font-size: 13px;
    font-weight: 800;
    color: #f4511e;
    font-variant-numeric: tabular-nums;
    margin-inline-start: 10px;
}
@keyframes qc-up-shimmer {
    from { background-position: 0% 0; }
    to { background-position: -200% 0; }
}
@keyframes qc-up-breathe {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

/* v182 — life in the chat: bubbles pop in, menus spring, images zoom, buttons
   press back; plus the emoji tray. All CSS, no jank. */
@keyframes qc-pop-in {
    from { opacity: 0; transform: translateY(10px) scale(.97); }
    to { opacity: 1; transform: none; }
}
@keyframes qc-zoom-in {
    from { opacity: .3; transform: scale(.9); }
    to { opacity: 1; transform: none; }
}
.wa-msgs .qc-bubble { animation: qc-pop-in .22s ease both; }
.wa-date span { animation: qc-pop-in .3s ease both; display: inline-block; }
.qc-actions { animation: qcpop .14s ease; transform-origin: top; }
.qc-replybar { animation: qcpop .16s ease; }
.qc-upload { animation: qcpop .16s ease; }
.qc-lightbox img { animation: qc-zoom-in .18s ease; }
.wa-unread { animation: qc-zoom-in .2s ease; }
.qc-seenline { animation: qc-pop-in .3s ease both; }
.qc-mic, .qc-dots, .wa-pick .grid button { transition: transform .12s ease, background .15s ease; }
.qc-mic:active, .qc-dots:active { transform: scale(.85); }
.qc-mic.on:hover { transform: scale(1.06); }
.wa-row { transition: background .15s ease, transform .12s ease; }
.wa-row:active { transform: scale(.985); }
.qc-bubble .tick { transition: color .35s ease; }
.qc-img { transition: transform .15s ease; }
.qc-img:active { transform: scale(.97); }

/* The emoji tray: same floating card as attach, but a grid of faces. */
.qc-attach.qc-emoji {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    min-width: 296px;
    max-width: min(90vw, 360px);
    max-height: 216px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.qc-attach.qc-emoji button {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    font-size: 20px;
    border-radius: 8px;
}
.qc-attach.qc-emoji button:active { transform: scale(1.25); }

/* ============ v183 — the dashboard grows up: hero, live tiles, breathing lists ============ */
.db { max-width: 1180px; }

.db-hero {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    padding: 22px 26px;
    background: linear-gradient(120deg, #ff8a2a, #f4511e 62%, #e8420e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
    box-shadow: 0 16px 44px rgba(244, 81, 30, .28);
    animation: qc-pop-in .35s ease both;
}
.db-hero::before, .db-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%);
    pointer-events: none;
}
.db-hero::before { width: 340px; height: 340px; top: -180px; inset-inline-end: -60px; animation: db-drift 9s ease-in-out infinite; }
.db-hero::after { width: 220px; height: 220px; bottom: -140px; inset-inline-start: 30%; animation: db-drift 11s ease-in-out infinite reverse; }
@keyframes db-drift {
    0%, 100% { transform: translate(0, 0); }
    50% { transform: translate(-24px, 14px); }
}
.db-hero .who { display: flex; align-items: center; gap: 16px; position: relative; z-index: 1; }
.db-hero .logo {
    width: 62px;
    height: 62px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    font-size: 34px;
    animation: qc-up-breathe 3.2s ease-in-out infinite;
}
.db-hero .tx { display: flex; flex-direction: column; gap: 4px; }
.db-hero .tx b { font-size: 20px; font-weight: 800; letter-spacing: .2px; }
.db-hero .tx small { font-size: 12.5px; opacity: .92; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.db-hero .pill {
    font-style: normal;
    font-size: 11px;
    font-weight: 800;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
}
.db-hero .pill.on { background: #d7ffe0; color: #157a2e; }
.db-hero .pill.off { background: rgba(0, 0, 0, .25); }
.db-hero .pill.star { background: #fff3c9; color: #9a6b00; }
.db-hero .acts { display: flex; gap: 10px; position: relative; z-index: 1; }
.db-hero-btn { background: #fff !important; color: #e8420e !important; border-radius: 12px !important; font-weight: 700 !important; }
.db-hero-btn.ghost { background: transparent !important; color: #fff !important; border-color: rgba(255, 255, 255, .55) !important; }

.db-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 16px 0;
}
@media (max-width: 960px) { .db-stats { grid-template-columns: 1fr 1fr; } }
.db-stat {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--mud-palette-surface, #fff);
    border: 1px solid #f0e7db;
    border-radius: 18px;
    padding: 16px;
    animation: qc-pop-in .4s ease both;
    transition: transform .18s ease, box-shadow .18s ease;
}
.db-stat:nth-child(1) { animation-delay: .04s; }
.db-stat:nth-child(2) { animation-delay: .1s; }
.db-stat:nth-child(3) { animation-delay: .16s; }
.db-stat:nth-child(4) { animation-delay: .22s; }
.db-stat:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(70, 45, 20, .10); }
.db-stat .ic {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 6px 16px rgba(60, 40, 20, .18);
}
.db-stat.s1 .ic { background: linear-gradient(135deg, #ffb74d, #f57c00); }
.db-stat.s2 .ic { background: linear-gradient(135deg, #4fc3f7, #0277bd); }
.db-stat.s3 .ic { background: linear-gradient(135deg, #b39ddb, #5e35b1); }
.db-stat.s4 .ic { background: linear-gradient(135deg, #81c784, #2e7d32); }
.db-stat .v { font-size: 24px; font-weight: 800; line-height: 1.15; color: #2f2a23; font-variant-numeric: tabular-nums; }
.db-stat .l { font-size: 12px; color: #97907f; font-weight: 600; }
.db-stat .h { font-size: 11px; color: #b3a893; }
.db-stat.alert .ic { animation: db-ring 1.6s ease-in-out infinite; }
@keyframes db-ring {
    0%, 100% { transform: rotate(0); }
    12% { transform: rotate(-13deg); }
    24% { transform: rotate(11deg); }
    36% { transform: rotate(-7deg); }
    48% { transform: rotate(0); }
}

.db-cols { display: grid; grid-template-columns: 1.45fr 1fr; gap: 14px; }
@media (max-width: 960px) { .db-cols { grid-template-columns: 1fr; } }
.db-card {
    background: var(--mud-palette-surface, #fff);
    border: 1px solid #f0e7db;
    border-radius: 18px;
    padding: 16px 18px;
    animation: qc-pop-in .45s ease both;
    animation-delay: .26s;
}
.db-card .hd { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 14.5px; color: #2f2a23; margin-bottom: 6px; }
.db-card .live-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #f4511e;
    animation: db-pulse 1.5s ease-in-out infinite;
}
@keyframes db-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 81, 30, .45); }
    55% { box-shadow: 0 0 0 8px rgba(244, 81, 30, 0); }
}
.db-row {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 8px;
    border-radius: 12px;
    transition: background .15s ease;
    animation: qc-pop-in .3s ease both;
}
.db-row + .db-row { border-top: 1px solid #f8f2ea; }
.db-row:hover { background: #faf6f0; }
.db-row .ava {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffb36b, #ff7a1a);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    display: grid;
    place-items: center;
}
.db-row .ava.done { background: linear-gradient(135deg, #81c784, #2e7d32); }
.db-row .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.db-row .mid b { font-size: 13px; color: #2f2a23; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-row .mid small { font-size: 11.5px; color: #97907f; }
.db-row .amt { font-size: 13px; color: #2f2a23; font-variant-numeric: tabular-nums; }

/* v184 — drawer rows span the full width: the pill is the whole row, not the word. */
.mud-drawer .mud-nav-link,
.mud-drawer .mud-nav-group > .mud-nav-link {
    width: calc(100% - 20px);
    display: flex;
}
.mud-drawer .mud-nav-menu, .mud-drawer .mud-nav-group .mud-collapse-container { width: 100%; }

/* v185 — the dashboard fills the room: centered, charted, shortcut-tiled. */
.db { max-width: 1280px; margin-inline: auto; }

/* Seven bars, one week — they grow out of the floor on arrival. */
.db-bars {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    height: 190px;
    padding-top: 8px;
}
.db-bars .col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    height: 100%;
}
.db-bars .col i {
    display: block;
    width: min(46px, 100%);
    border-radius: 10px 10px 5px 5px;
    background: linear-gradient(180deg, #ffc79b, #ff9350);
    transform-origin: bottom;
    animation: db-grow .7s cubic-bezier(.2, .8, .3, 1.1) both;
    transition: filter .15s ease;
}
.db-bars .col:nth-child(1) i { animation-delay: .05s; }
.db-bars .col:nth-child(2) i { animation-delay: .1s; }
.db-bars .col:nth-child(3) i { animation-delay: .15s; }
.db-bars .col:nth-child(4) i { animation-delay: .2s; }
.db-bars .col:nth-child(5) i { animation-delay: .25s; }
.db-bars .col:nth-child(6) i { animation-delay: .3s; }
.db-bars .col:nth-child(7) i { animation-delay: .35s; }
.db-bars .col:hover i { filter: brightness(1.08); }
.db-bars .col.today i {
    background: linear-gradient(180deg, #ff8a2a, #f4511e);
    box-shadow: 0 6px 18px rgba(244, 81, 30, .35);
}
.db-bars .col span { font-size: 11px; color: #97907f; font-weight: 700; }
.db-bars .col.today span { color: #f4511e; }
.db-bars .col b { font-size: 10.5px; color: #b3a893; font-variant-numeric: tabular-nums; min-height: 14px; }
@keyframes db-grow { from { transform: scaleY(0); } }

/* One-tap shortcuts: a tidy grid of doors. */
.db-quick {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-top: 6px;
}
.db-quick a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    padding: 14px 8px;
    border-radius: 14px;
    background: #faf6f0;
    border: 1px solid #f0e7db;
    text-decoration: none;
    color: #5c5348;
    font-size: 11.5px;
    font-weight: 700;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
    animation: qc-pop-in .35s ease both;
}
.db-quick a:nth-child(2) { animation-delay: .05s; }
.db-quick a:nth-child(3) { animation-delay: .1s; }
.db-quick a:nth-child(4) { animation-delay: .15s; }
.db-quick a:nth-child(5) { animation-delay: .2s; }
.db-quick a:nth-child(6) { animation-delay: .25s; }
.db-quick a:hover { transform: translateY(-3px); background: #fdeadb; box-shadow: 0 10px 22px rgba(70, 45, 20, .10); }
.db-quick a .mud-icon-root { color: #f4511e; width: 22px; height: 22px; }

/* Bottom row becomes three columns on a wide monitor. */
.db-cols.trio { grid-template-columns: 1.35fr 1fr 1fr; }
@media (max-width: 1100px) { .db-cols.trio { grid-template-columns: 1fr; } }

/* Today''s best sellers, ranked with little progress tracks. */
.db-top { display: flex; align-items: center; gap: 10px; padding: 8px 6px; animation: qc-pop-in .3s ease both; }
.db-top + .db-top { border-top: 1px solid #f8f2ea; }
.db-top .rk {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    display: grid;
    place-items: center;
    font-size: 12px;
    font-weight: 800;
    color: #fff;
    background: #cbbfae;
}
.db-top .rk.r1 { background: linear-gradient(135deg, #ffb300, #f57c00); }
.db-top .rk.r2 { background: linear-gradient(135deg, #b0bec5, #78909c); }
.db-top .rk.r3 { background: linear-gradient(135deg, #d7a186, #a1653f); }
.db-top .mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.db-top .mid b { font-size: 12.5px; color: #2f2a23; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-top .mid em { display: block; height: 5px; border-radius: 999px; background: #f3ece2; overflow: hidden; }
.db-top .mid em i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff8a2a, #f4511e);
    animation: db-fill .8s ease both;
}
@keyframes db-fill { from { width: 0 !important; } }
.db-top small { flex: none; font-size: 12px; font-weight: 800; color: #97907f; font-variant-numeric: tabular-nums; }

/* v186 — dashboard, third coat: living gradient hero with a shine sweep,
   layered depth on every card, accent ticks, staggered rows, playful hovers. */

/* The hero breathes: the gradient itself drifts, and a light bar sweeps across. */
.db-hero {
    background: linear-gradient(115deg, #ff9a3d, #ff7a1a 35%, #f4511e 65%, #e8420e);
    background-size: 220% 220%;
    animation: qc-pop-in .35s ease both, db-hue 9s ease-in-out infinite alternate;
    border-radius: 26px;
}
@keyframes db-hue {
    from { background-position: 0% 30%; }
    to { background-position: 100% 70%; }
}
.db-hero::after {
    width: auto;
    height: auto;
    border-radius: 0;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .16) 48%, transparent 62%);
    transform: translateX(-120%);
    animation: db-shine 5.5s ease-in-out infinite;
}
[dir="rtl"] .db-hero::after { animation-name: db-shine-rtl; }
@keyframes db-shine {
    0%, 55% { transform: translateX(-120%); }
    85%, 100% { transform: translateX(120%); }
}
@keyframes db-shine-rtl {
    0%, 55% { transform: translateX(120%); }
    85%, 100% { transform: translateX(-120%); }
}
.db-hero .tx b { font-size: 22px; text-shadow: 0 2px 12px rgba(120, 40, 0, .25); }

/* Cards gain real depth: layered shadows, rounder corners, an accent tick under
   every header, and a gentle rise on hover. */
.db-card {
    border-radius: 22px;
    border-color: #f3ebdf;
    box-shadow: 0 1px 2px rgba(60, 40, 20, .04), 0 14px 34px rgba(60, 40, 20, .05);
    transition: transform .2s ease, box-shadow .2s ease;
}
.db-card:hover { transform: translateY(-2px); box-shadow: 0 2px 3px rgba(60, 40, 20, .05), 0 22px 48px rgba(60, 40, 20, .09); }
.db-card .hd { position: relative; padding-bottom: 10px; margin-bottom: 10px; }
.db-card .hd::after {
    content: '';
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 44px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff8a2a, #f4511e);
}

/* Stat tiles: accent-tinted numbers, icons that tip their hat, a gradient
   hairline that lights up along the top on hover. */
.db-stat {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 1px 2px rgba(60, 40, 20, .04);
}
.db-stat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #ff8a2a, #f4511e);
    opacity: 0;
    transition: opacity .2s ease;
}
.db-stat:hover::before { opacity: 1; }
.db-stat .ic { transition: transform .2s ease; }
.db-stat:hover .ic { transform: rotate(-8deg) scale(1.07); }
.db-stat.s1 .v { color: #ef6c00; }
.db-stat.s2 .v { color: #0277bd; }
.db-stat.s3 .v { color: #5e35b1; }
.db-stat.s4 .v { color: #2e7d32; }

/* Rows walk in one after another. */
.db-row:nth-child(2) { animation-delay: .05s; }
.db-row:nth-child(3) { animation-delay: .1s; }
.db-row:nth-child(4) { animation-delay: .15s; }
.db-row:nth-child(5) { animation-delay: .2s; }
.db-row:nth-child(6) { animation-delay: .25s; }
.db-row:nth-child(7) { animation-delay: .3s; }
.db-top:nth-child(2) { animation-delay: .06s; }
.db-top:nth-child(3) { animation-delay: .12s; }
.db-top:nth-child(4) { animation-delay: .18s; }
.db-top:nth-child(5) { animation-delay: .24s; }

/* Quick tiles: the icon hops when invited. */
.db-quick a .mud-icon-root { transition: transform .18s ease; }
.db-quick a:hover .mud-icon-root { transform: translateY(-3px) scale(1.12); }
.db-quick a { border-radius: 16px; }

/* Respect the visitor who asked the OS for calm. */
@media (prefers-reduced-motion: reduce) {
    .db-hero, .db-hero::after, .db-hero::before, .db-bars .col i,
    .db-stat, .db-card, .db-row, .db-top, .db-quick a { animation: none !important; transition: none !important; }
}

/* v187 — entrance choreography: everything arrives in one directed sequence,
   rising into focus with a spring — no more flat fades. */

/* The page itself gets a faint warm wash behind the content. */
.db { position: relative; }
.db::before {
    content: '';
    position: absolute;
    top: -40px;
    inset-inline: -60px;
    height: 380px;
    background: radial-gradient(560px 240px at 50% 0, rgba(255, 122, 26, .07), transparent 70%);
    pointer-events: none;
}

/* One entrance to rule them all: rise + settle + sharpen. */
@keyframes db-enter {
    0% { opacity: 0; transform: translateY(22px) scale(.965); filter: blur(7px); }
    65% { filter: blur(0); }
    100% { opacity: 1; transform: none; filter: none; }
}
@keyframes db-row-in {
    from { opacity: 0; transform: translateX(-16px); }
    to { opacity: 1; transform: none; }
}
@keyframes db-row-in-rtl {
    from { opacity: 0; transform: translateX(16px); }
    to { opacity: 1; transform: none; }
}

/* The sequence: hero → tiles → chart & shortcuts → lists. */
.db-hero { animation: db-enter .55s cubic-bezier(.16, 1, .3, 1) both, db-hue 9s ease-in-out 1s infinite alternate; }
.db-stat { animation: db-enter .6s cubic-bezier(.16, 1, .3, 1) both; }
.db-stat:nth-child(1) { animation-delay: .1s; }
.db-stat:nth-child(2) { animation-delay: .17s; }
.db-stat:nth-child(3) { animation-delay: .24s; }
.db-stat:nth-child(4) { animation-delay: .31s; }
.db-card { animation: db-enter .65s cubic-bezier(.16, 1, .3, 1) both; }
.db-cols > .db-card:nth-child(1) { animation-delay: .38s; }
.db-cols > .db-card:nth-child(2) { animation-delay: .46s; }
.db-cols.trio > .db-card:nth-child(3) { animation-delay: .54s; }

/* Rows glide in from the reading side — mirrored for RTL. */
.db-row, .db-top {
    animation: db-row-in .45s cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: .55s;
}
[dir="rtl"] .db-row, [dir="rtl"] .db-top { animation-name: db-row-in-rtl; }
.db-row:nth-child(2), .db-top:nth-child(2) { animation-delay: .62s; }
.db-row:nth-child(3), .db-top:nth-child(3) { animation-delay: .69s; }
.db-row:nth-child(4), .db-top:nth-child(4) { animation-delay: .76s; }
.db-row:nth-child(5), .db-top:nth-child(5) { animation-delay: .83s; }
.db-row:nth-child(6), .db-top:nth-child(6) { animation-delay: .9s; }
.db-row:nth-child(7) { animation-delay: .97s; }

/* Bars spring past their mark and settle back. */
.db-bars .col i { animation-name: db-grow2; animation-duration: .8s; }
@keyframes db-grow2 {
    0% { transform: scaleY(0); }
    68% { transform: scaleY(1.09); }
    100% { transform: scaleY(1); }
}
.db-bars .col:nth-child(1) i { animation-delay: .45s; }
.db-bars .col:nth-child(2) i { animation-delay: .51s; }
.db-bars .col:nth-child(3) i { animation-delay: .57s; }
.db-bars .col:nth-child(4) i { animation-delay: .63s; }
.db-bars .col:nth-child(5) i { animation-delay: .69s; }
.db-bars .col:nth-child(6) i { animation-delay: .75s; }
.db-bars .col:nth-child(7) i { animation-delay: .81s; }

/* Shortcut tiles pop up last, like keys presenting themselves. */
.db-quick a { animation: db-enter .5s cubic-bezier(.16, 1, .3, 1) both; }
.db-quick a:nth-child(1) { animation-delay: .5s; }
.db-quick a:nth-child(2) { animation-delay: .56s; }
.db-quick a:nth-child(3) { animation-delay: .62s; }
.db-quick a:nth-child(4) { animation-delay: .68s; }
.db-quick a:nth-child(5) { animation-delay: .74s; }
.db-quick a:nth-child(6) { animation-delay: .8s; }

@media (prefers-reduced-motion: reduce) {
    .db-hero, .db-stat, .db-card, .db-row, .db-top, .db-quick a, .db-bars .col i { animation: none !important; }
}

/* v188 — the dashboard gets a floor to stand on: warm glows in the corners and
   the food-doodle wallpaper whispering behind the cards. */
.db::before {
    content: '';
    position: absolute;
    inset: -48px -70px -60px;
    background:
        radial-gradient(720px 320px at 82% -90px, rgba(255, 122, 26, .12), transparent 70%),
        radial-gradient(520px 280px at 6% 140px, rgba(94, 53, 177, .06), transparent 70%),
        radial-gradient(600px 300px at 50% 105%, rgba(46, 125, 50, .05), transparent 70%),
        url('chat-bg.svg?v=3') top / 260px 260px repeat;
    opacity: .55;
    border-radius: 30px;
    pointer-events: none;
    z-index: 0;
}
.db > * { position: relative; z-index: 1; }

/* v189 — every page stands on the same modern floor: warm corner glows and the
   whisper-quiet doodle wallpaper, app-wide (POS and chat keep their own stages). */
.mf-bg {
    min-height: 100vh;
    background:
        radial-gradient(760px 340px at 85% -120px, rgba(255, 122, 26, .10), transparent 70%),
        radial-gradient(540px 300px at 4% 180px, rgba(94, 53, 177, .05), transparent 70%),
        radial-gradient(640px 320px at 55% 110%, rgba(46, 125, 50, .04), transparent 70%),
        url('chat-bg.svg?v=3') top / 260px 260px repeat,
        #faf7f2;
}
/* The dashboard's own layer retires — the page background carries it now. */
.mf-bg .db::before { content: none; }

/* Cards everywhere read as cards on the textured floor. */
.mf-bg .mud-paper.mud-paper-outlined {
    background: #fff;
    border-color: #f0e7db;
    box-shadow: 0 1px 2px rgba(60, 40, 20, .04), 0 10px 26px rgba(60, 40, 20, .045);
}

/* v190 — the map picker veil and the location row on forms. */
.mfmap {
    position: fixed;
    inset: 0;
    z-index: 6000;
    background: rgba(20, 14, 8, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: qcfade .15s ease;
}
.mfmap .box {
    position: relative;
    width: min(94vw, 760px);
    height: min(80vh, 560px);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 24px 70px rgba(0, 0, 0, .45);
    background: #fff;
}
.mfmap .map { width: 100%; height: 100%; }
.mfmap .ok, .mfmap .x {
    position: absolute;
    bottom: 16px;
    z-index: 1000;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 0;
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .3);
}
.mfmap .ok { inset-inline-end: 16px; background: linear-gradient(135deg, #ff8a2a, #f4511e); color: #fff; }
.mfmap .x { inset-inline-start: 16px; background: #fff; color: #5c5348; }

.loc-pick { display: flex; flex-direction: column; gap: 6px; }
.loc-pick .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.loc-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #eef7ee;
    border: 1px solid #cde8cf;
    color: #2e7d32;
    font-size: 12px;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 11px;
    font-variant-numeric: tabular-nums;
    animation: qc-zoom-in .2s ease;
}
.loc-chip button {
    border: 0;
    background: none;
    color: #2e7d32;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
}

/* v191 — the key ring: team cards, role palette, and the member editor sheet. */
.tm { max-width: 1100px; }
.tm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 14px;
}
.tm-card {
    background: #fff;
    border: 1px solid #f0e7db;
    border-radius: 18px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    animation: db-enter .5s cubic-bezier(.16, 1, .3, 1) both;
    transition: transform .18s ease, box-shadow .18s ease;
}
.tm-card:nth-child(2) { animation-delay: .06s; }
.tm-card:nth-child(3) { animation-delay: .12s; }
.tm-card:nth-child(4) { animation-delay: .18s; }
.tm-card:nth-child(5) { animation-delay: .24s; }
.tm-card:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(70, 45, 20, .10); }
.tm-card.off { opacity: .55; filter: grayscale(.4); }
.tm-card .top { display: flex; align-items: center; gap: 11px; }
.tm-card .ava {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
}
.tm-card .ava.r-owner   { background: linear-gradient(135deg, #ffb300, #f57c00); }
.tm-card .ava.r-manager { background: linear-gradient(135deg, #b39ddb, #5e35b1); }
.tm-card .ava.r-cashier { background: linear-gradient(135deg, #4fc3f7, #0277bd); }
.tm-card .ava.r-kitchen { background: linear-gradient(135deg, #ff8a65, #d84315); }
.tm-card .ava.r-waiter  { background: linear-gradient(135deg, #81c784, #2e7d32); }
.tm-card .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tm-card .who b { font-size: 14px; color: #2f2a23; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-card .who small { font-size: 11.5px; color: #97907f; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-card .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tm-card .chip {
    font-size: 11px;
    font-weight: 800;
    border-radius: 999px;
    padding: 4px 11px;
    color: #fff;
}
.tm-card .chip.r-owner   { background: linear-gradient(135deg, #ffb300, #f57c00); }
.tm-card .chip.r-manager { background: linear-gradient(135deg, #b39ddb, #5e35b1); }
.tm-card .chip.r-cashier { background: linear-gradient(135deg, #4fc3f7, #0277bd); }
.tm-card .chip.r-kitchen { background: linear-gradient(135deg, #ff8a65, #d84315); }
.tm-card .chip.r-waiter  { background: linear-gradient(135deg, #81c784, #2e7d32); }
.tm-card .state { font-size: 11px; font-weight: 700; color: #b3a893; }
.tm-card .state.on { color: #2e7d32; }
.tm-card.add {
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 118px;
    border: 2px dashed #e5d5bf;
    background: #fdfaf5;
    color: #b08a5a;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
}
.tm-card.add:hover { border-color: #f4a266; color: #f4511e; background: #fdf3e7; }

/* The editor: a floating sheet over the veil. */
.tm-sheet {
    background: #fff;
    border-radius: 20px;
    padding: 20px;
    width: min(94vw, 480px);
    max-height: 88vh;
    overflow-y: auto;
    cursor: default;
    box-shadow: 0 24px 70px rgba(30, 18, 8, .4);
    animation: qcpop .18s ease;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.tm-sheet .ttl { font-size: 16px; color: #2f2a23; margin-bottom: 4px; }
.tm-sheet .lbl { font-size: 11.5px; font-weight: 800; color: #97907f; margin-top: 4px; }
.tm-sheet .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.tm-roles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.tm-role {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    border: 2px solid #f0e7db;
    background: #fdfaf5;
    border-radius: 14px;
    padding: 10px 12px;
    cursor: pointer;
    text-align: start;
    font-family: inherit;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.tm-role:hover { transform: translateY(-2px); }
.tm-role b { font-size: 12.5px; color: #2f2a23; }
.tm-role small { font-size: 10.5px; color: #97907f; line-height: 1.35; }
.tm-role .mud-icon-root { color: #b3a893; }
.tm-role.on { border-color: #f4511e; background: #fdf0e5; }
.tm-role.on .mud-icon-root { color: #f4511e; }

/* v192 — the key ring grows up: hero band, role lenses, profile cards with
   cover bands and overlapping avatars, a proper editor sheet. */
.tm-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    border-radius: 24px;
    padding: 20px 24px;
    background: linear-gradient(115deg, #ff9a3d, #f4511e 70%);
    background-size: 200% 200%;
    color: #fff;
    box-shadow: 0 14px 40px rgba(244, 81, 30, .26);
    animation: db-enter .5s cubic-bezier(.16, 1, .3, 1) both, db-hue 9s ease-in-out infinite alternate;
    margin-bottom: 14px;
}
.tm-hero .tx { display: flex; flex-direction: column; gap: 4px; }
.tm-hero .tx b { font-size: 20px; font-weight: 800; }
.tm-hero .tx small { font-size: 12.5px; opacity: .92; max-width: 520px; }
.tm-hero .counts { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 7px; }
.tm-hero .ct {
    font-size: 11px;
    font-weight: 800;
    border-radius: 999px;
    padding: 3px 11px;
    background: rgba(255, 255, 255, .2);
    backdrop-filter: blur(3px);
}
.tm-hero-btn { background: #fff !important; color: #e8420e !important; border-radius: 12px !important; font-weight: 800 !important; }

.tm-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.tm-tools .find {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1px solid #f0e7db;
    border-radius: 999px;
    padding: 8px 15px;
    min-width: 230px;
    color: #b3a893;
}
.tm-tools .find input { border: 0; outline: 0; background: none; font: inherit; font-size: 13px; flex: 1; color: #2f2a23; }
.tm-tools .lens { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-tools .lens button {
    border: 1px solid #f0e7db;
    background: #fff;
    border-radius: 999px;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 700;
    color: #97907f;
    cursor: pointer;
    font-family: inherit;
    transition: all .15s ease;
}
.tm-tools .lens button:hover { transform: translateY(-1px); }
.tm-tools .lens button.on { color: #fff; border-color: transparent; background: linear-gradient(135deg, #ff8a2a, #f4511e); box-shadow: 0 6px 14px rgba(244, 81, 30, .3); }
.tm-tools .lens button.r-manager.on { background: linear-gradient(135deg, #b39ddb, #5e35b1); box-shadow: 0 6px 14px rgba(94, 53, 177, .3); }
.tm-tools .lens button.r-cashier.on { background: linear-gradient(135deg, #4fc3f7, #0277bd); box-shadow: 0 6px 14px rgba(2, 119, 189, .3); }
.tm-tools .lens button.r-kitchen.on { background: linear-gradient(135deg, #ff8a65, #d84315); box-shadow: 0 6px 14px rgba(216, 67, 21, .3); }
.tm-tools .lens button.r-waiter.on { background: linear-gradient(135deg, #81c784, #2e7d32); box-shadow: 0 6px 14px rgba(46, 125, 50, .3); }

/* Profile cards: a role-colored cover, the avatar breaking out of it. */
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.tm-card {
    position: relative;
    background: #fff;
    border: 1px solid #f0e7db;
    border-radius: 20px;
    padding: 0 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    overflow: hidden;
    animation: db-enter .55s cubic-bezier(.16, 1, .3, 1) both;
    transition: transform .18s ease, box-shadow .18s ease;
    box-shadow: 0 1px 2px rgba(60, 40, 20, .04);
}
.tm-card:nth-child(2) { animation-delay: .07s; }
.tm-card:nth-child(3) { animation-delay: .14s; }
.tm-card:nth-child(4) { animation-delay: .21s; }
.tm-card:nth-child(5) { animation-delay: .28s; }
.tm-card:nth-child(6) { animation-delay: .35s; }
.tm-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(70, 45, 20, .12); }
.tm-card.off { opacity: .6; filter: grayscale(.35); }
.tm-card .band {
    width: calc(100% + 32px);
    height: 58px;
    margin: 0 -16px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 6px;
}
.tm-card.r-owner .band   { background: linear-gradient(120deg, #ffb300, #f57c00); }
.tm-card.r-manager .band { background: linear-gradient(120deg, #b39ddb, #5e35b1); }
.tm-card.r-cashier .band { background: linear-gradient(120deg, #4fc3f7, #0277bd); }
.tm-card.r-kitchen .band { background: linear-gradient(120deg, #ff8a65, #d84315); }
.tm-card.r-waiter .band  { background: linear-gradient(120deg, #81c784, #2e7d32); }
.tm-card .band .crown { font-size: 18px; margin: 2px 6px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.25)); }
.tm-card .band .dots .mud-icon-root, .tm-card .band .mud-icon-button { color: #fff !important; }
.tm-card .ava {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    margin-top: -29px;
    border: 3.5px solid #fff;
    background: linear-gradient(135deg, #ffb36b, #ff7a1a);
    color: #fff;
    font-weight: 800;
    font-size: 17px;
    display: grid;
    place-items: center;
    box-shadow: 0 6px 16px rgba(60, 40, 20, .18);
}
.tm-card.r-manager .ava { background: linear-gradient(135deg, #b39ddb, #5e35b1); }
.tm-card.r-cashier .ava { background: linear-gradient(135deg, #4fc3f7, #0277bd); }
.tm-card.r-kitchen .ava { background: linear-gradient(135deg, #ff8a65, #d84315); }
.tm-card.r-waiter .ava  { background: linear-gradient(135deg, #81c784, #2e7d32); }
.tm-card .nm { font-size: 14.5px; color: #2f2a23; margin-top: 8px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-card .chip {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 12px;
    color: #fff;
    margin-top: 5px;
    background: linear-gradient(135deg, #ffb300, #f57c00);
}
.tm-card.r-manager .chip { background: linear-gradient(135deg, #b39ddb, #5e35b1); }
.tm-card.r-cashier .chip { background: linear-gradient(135deg, #4fc3f7, #0277bd); }
.tm-card.r-kitchen .chip { background: linear-gradient(135deg, #ff8a65, #d84315); }
.tm-card.r-waiter .chip  { background: linear-gradient(135deg, #81c784, #2e7d32); }
.tm-card .rows { display: flex; flex-direction: column; gap: 5px; margin-top: 11px; width: 100%; }
.tm-card .rows small {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11.5px;
    color: #97907f;
    justify-content: center;
    min-width: 0;
}
.tm-card .rows small span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-card .rows .mud-icon-root { width: 14px; height: 14px; color: #cbbfae; flex: none; }
.tm-card .foot { margin-top: 10px; padding-top: 10px; border-top: 1px solid #f8f2ea; width: 100%; display: flex; justify-content: center; }
.tm-card .state { font-size: 11.5px; font-weight: 800; color: #b3a893; }
.tm-card .state.on { color: #2e7d32; }
.tm-card.add {
    justify-content: center;
    gap: 10px;
    min-height: 210px;
    border: 2px dashed #e5d5bf;
    background: #fdfaf5;
    color: #b08a5a;
    cursor: pointer;
    font-family: inherit;
    font-size: 13.5px;
    padding: 16px;
}
.tm-card.add .plus {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fdeadb;
    color: #f4511e;
    transition: transform .18s ease;
}
.tm-card.add:hover { border-color: #f4a266; color: #f4511e; background: #fdf3e7; }
.tm-card.add:hover .plus { transform: scale(1.12) rotate(8deg); }

/* Editor v2: a headed sheet. */
.tm-sheet .head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.tm-sheet .head .ic {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    color: #fff;
    box-shadow: 0 6px 16px rgba(244, 81, 30, .35);
}
.tm-sheet .head b { font-size: 16px; color: #2f2a23; }
.tm-sheet .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tm-role { position: relative; }
.tm-role .tick {
    position: absolute;
    top: 8px;
    inset-inline-end: 9px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #f4511e;
    color: #fff;
    font-size: 11px;
    display: grid;
    place-items: center;
    opacity: 0;
    transform: scale(.4);
    transition: all .15s ease;
}
.tm-role.on .tick { opacity: 1; transform: none; }
.tm-role.r-manager.on { border-color: #5e35b1; background: #f4effb; }
.tm-role.r-manager.on .mud-icon-root { color: #5e35b1; }
.tm-role.r-manager .tick { background: #5e35b1; }
.tm-role.r-cashier.on { border-color: #0277bd; background: #eaf6fd; }
.tm-role.r-cashier.on .mud-icon-root { color: #0277bd; }
.tm-role.r-cashier .tick { background: #0277bd; }
.tm-role.r-kitchen.on { border-color: #d84315; background: #fdefe9; }
.tm-role.r-kitchen.on .mud-icon-root { color: #d84315; }
.tm-role.r-kitchen .tick { background: #d84315; }
.tm-role.r-waiter.on { border-color: #2e7d32; background: #eef7ee; }
.tm-role.r-waiter.on .mud-icon-root { color: #2e7d32; }
.tm-role.r-waiter .tick { background: #2e7d32; }

/* ============ v193 — the UX coat: type, glass, motion, control polish ============ */

/* Typography: Inter leads Latin, Cairo & friends carry RTL — set through Mud''s own vars. */
body.pf {
    --mud-typography-default-family: "Inter", "Cairo", "Vazirmatn", "Noto Sans Devanagari", "Segoe UI", Roboto, sans-serif;
    --mud-typography-h1-family: var(--mud-typography-default-family);
    --mud-typography-h2-family: var(--mud-typography-default-family);
    --mud-typography-h3-family: var(--mud-typography-default-family);
    --mud-typography-h4-family: var(--mud-typography-default-family);
    --mud-typography-h5-family: var(--mud-typography-default-family);
    --mud-typography-h6-family: var(--mud-typography-default-family);
    --mud-typography-subtitle1-family: var(--mud-typography-default-family);
    --mud-typography-subtitle2-family: var(--mud-typography-default-family);
    --mud-typography-body1-family: var(--mud-typography-default-family);
    --mud-typography-body2-family: var(--mud-typography-default-family);
    --mud-typography-button-family: var(--mud-typography-default-family);
    --mud-typography-caption-family: var(--mud-typography-default-family);
    --mud-typography-overline-family: var(--mud-typography-default-family);
    font-family: var(--mud-typography-default-family);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Every navigation ARRIVES: the page body rises into place. */
.pg-anim { animation: pg-in .32s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes pg-in {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* The app bar turns to frosted glass over the textured floor. */
body.pf .mf-appbar {
    background: rgba(255, 251, 246, .78) !important;
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border-bottom: 1px solid rgba(220, 200, 175, .35);
}

/* Drawer refinements: quiet guide line under sub-items, calmer group titles. */
body.pf .mud-drawer .mud-collapse-container .mud-nav-link {
    margin-inline-start: 24px;
    position: relative;
}
body.pf .mud-drawer .mud-collapse-container .mud-nav-link::before {
    content: '';
    position: absolute;
    inset-inline-start: -12px;
    top: 10px;
    bottom: 10px;
    width: 2px;
    border-radius: 2px;
    background: rgba(255, 255, 255, .08);
}
body.pf .mud-drawer .mud-nav-link.active::before { background: #FF5A00; }
body.pf .mud-drawer .mud-nav-group > .mud-nav-link .mud-nav-link-text { font-weight: 700; }
body.pf .mud-drawer .mud-nav-link { transition: background .15s ease, transform .12s ease; }
body.pf .mud-drawer .mud-nav-link:active { transform: scale(.98); }

/* Controls: soft corners, honest focus, no shouting. */
body.pf .mud-button-root { border-radius: 11px; font-weight: 700; letter-spacing: .1px; }
body.pf .mud-button-root.mud-button-filled { box-shadow: 0 6px 16px rgba(244, 81, 30, .18); }
body.pf .mud-button-root.mud-button-filled:hover { box-shadow: 0 10px 24px rgba(244, 81, 30, .26); }
body.pf .mud-input.mud-input-outlined .mud-input-outlined-border { border-radius: 12px; }
body.pf .mud-input.mud-input-outlined:focus-within .mud-input-outlined-border {
    border-width: 2px;
    box-shadow: 0 0 0 4px rgba(255, 90, 0, .08);
}
body.pf .mud-chip { border-radius: 999px; font-weight: 600; }
body.pf .mud-menu-list, body.pf .mud-popover { border-radius: 14px; }
body.pf .mud-dialog { border-radius: 20px; }
body.pf .mud-snackbar { border-radius: 14px; font-weight: 600; }
body.pf .mud-table, body.pf .mud-paper.rounded-xl { border-radius: 18px; }
body.pf .mud-switch-span { transition: background .2s ease; }

/* Tables and lists breathe on touch. */
body.pf .mud-table-row { transition: background .12s ease; }
body.pf .mud-table-hover .mud-table-row:hover { background: #faf6f0; }

/* Thin, warm scrollbars everywhere. */
body.pf ::-webkit-scrollbar { width: 9px; height: 9px; }
body.pf ::-webkit-scrollbar-track { background: transparent; }
body.pf ::-webkit-scrollbar-thumb {
    background: #ddcfbc;
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
body.pf ::-webkit-scrollbar-thumb:hover { background: #c9b596; background-clip: content-box; }

/* PageHeader titles get real presence. */
body.pf .mud-typography-h5 { font-weight: 800; letter-spacing: -.2px; }

@media (prefers-reduced-motion: reduce) {
    .pg-anim { animation: none !important; }
}

/* v194 — the everything-door: launcher pill in the appbar, palette over a veil. */
.cp-launch {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(200, 170, 140, .4);
    background: rgba(255, 255, 255, .6);
    border-radius: 999px;
    padding: 7px 8px 7px 14px;
    margin-inline-end: 10px;
    font-family: inherit;
    font-size: 12.5px;
    color: #97907f;
    cursor: pointer;
    min-width: 220px;
    transition: all .15s ease;
}
[dir="rtl"] .cp-launch { padding: 7px 14px 7px 8px; }
.cp-launch:hover { border-color: #f4a266; background: #fff; box-shadow: 0 4px 14px rgba(244, 81, 30, .12); }
.cp-launch span { flex: 1; text-align: start; }
.cp-launch kbd, .cp kbd {
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
    color: #97907f;
    background: #f3ece2;
    border: 1px solid #e5d9c6;
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 2px 7px;
    white-space: nowrap;
}

.cp-veil {
    position: fixed;
    inset: 0;
    z-index: 7000;
    background: rgba(25, 17, 8, .45);
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 11vh;
    animation: qcfade .14s ease;
}
.cp {
    width: min(94vw, 620px);
    background: rgba(255, 253, 250, .97);
    border: 1px solid rgba(230, 210, 185, .6);
    border-radius: 20px;
    box-shadow: 0 30px 90px rgba(20, 12, 4, .45);
    overflow: hidden;
    cursor: default;
    animation: cp-drop .22s cubic-bezier(.16, 1, .3, 1);
    display: flex;
    flex-direction: column;
}
@keyframes cp-drop {
    from { opacity: 0; transform: translateY(-14px) scale(.98); }
}
.cp-input {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 18px;
    border-bottom: 1px solid #f3ece2;
    color: #f4511e;
}
.cp-input input {
    flex: 1;
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    font-size: 16.5px;
    color: #2f2a23;
}
.cp-input input::placeholder { color: #c3b8a5; }
.cp-body { max-height: 54vh; overflow-y: auto; padding: 6px; scrollbar-width: thin; }
.cp-sec {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
    color: #b3a893;
    padding: 10px 14px 4px;
}
.cp-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    border: 0;
    background: none;
    border-radius: 12px;
    padding: 9px 12px;
    cursor: pointer;
    font-family: inherit;
    text-align: start;
    position: relative;
}
.cp-item .ic {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #f6f0e7;
    color: #97907f;
    transition: all .12s ease;
}
.cp-item .ic.t-product { background: #fdefe9; color: #d84315; }
.cp-item .ic.t-customer { background: #eaf6fd; color: #0277bd; }
.cp-item .ic.t-table { background: #eef7ee; color: #2e7d32; }
.cp-item .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.cp-item .tx b { font-size: 13.5px; font-weight: 600; color: #2f2a23; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-item .tx small { font-size: 11px; color: #97907f; }
.cp-item .go { color: transparent; transition: color .12s ease, transform .12s ease; }
.cp-item.on {
    background: linear-gradient(90deg, rgba(255, 122, 26, .12), rgba(255, 122, 26, .04));
    box-shadow: inset 3px 0 0 #f4511e;
}
[dir="rtl"] .cp-item.on { box-shadow: inset -3px 0 0 #f4511e; }
.cp-item.on .ic { background: linear-gradient(135deg, #ff8a2a, #f4511e); color: #fff; }
.cp-item.on .go { color: #f4511e; transform: translateX(2px); }
.cp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 0;
    color: #b3a893;
}
.cp-empty span { font-size: 34px; }
.cp-empty b { font-size: 13px; }
.cp-foot {
    display: flex;
    gap: 14px;
    padding: 10px 16px;
    border-top: 1px solid #f3ece2;
    background: #fbf7f1;
}
.cp-foot span { display: flex; gap: 4px; align-items: center; }
.cp-foot .far { margin-inline-start: auto; }

/* POS keyboard legend — quiet chips under the ticket. */
.pos-keys {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    padding: 6px 2px;
    font-size: 10.5px;
    color: #97907f;
}
.pos-keys span { display: inline-flex; align-items: center; gap: 5px; }
.pos-keys kbd {
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 800;
    color: #7a6f5c;
    background: #f3ece2;
    border: 1px solid #e5d9c6;
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 1px 6px;
}

/* v195 — product materials: editor tags in the partner dialog, chips on the QR sheet. */
.mi-ing { display: flex; flex-wrap: wrap; gap: 6px; }
.mi-ing .tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #fdf0e5;
    border: 1px solid #f6d3b3;
    color: #a8501a;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 4px 6px 4px 12px;
    animation: qc-zoom-in .15s ease;
}
[dir="rtl"] .mi-ing .tag { padding: 4px 12px 4px 6px; }
.mi-ing .tag button {
    border: 0;
    background: rgba(0, 0, 0, .06);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 10px;
    color: #a8501a;
    cursor: pointer;
    display: grid;
    place-items: center;
}
.qm-ing { width: 100%; margin: 6px 0 2px; display: flex; flex-direction: column; gap: 7px; }
.qm-ing > small { font-size: 12px; font-weight: 800; color: #97907f; }
.qm-ing .wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.qm-ing .wrap span {
    background: #f6f0e7;
    border: 1px solid #eee3d2;
    color: #6b5a44;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 5px 12px;
    animation: qc-pop-in .25s ease both;
}

/* v196 — a phone number is always LTR, whatever language the form speaks. */
input[type="tel"] {
    direction: ltr !important;
    unicode-bidi: plaintext;
}
[dir="rtl"] input[type="tel"] { text-align: right; }

/* v197 — the map dialog grows tools: search on top, link row under it, and a
   confirm button that SAYS what it does. */
.mfmap .top {
    position: absolute;
    top: 12px;
    inset-inline-start: 12px;
    inset-inline-end: 64px;
    z-index: 1000;
    display: flex;
    gap: 6px;
}
.mfmap .top input {
    flex: 1;
    border: 0;
    outline: 0;
    border-radius: 12px;
    padding: 11px 15px;
    font: inherit;
    font-size: 13.5px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
}
.mfmap .top .go {
    border: 0;
    border-radius: 12px;
    width: 42px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
    cursor: pointer;
    font-size: 15px;
}
.mfmap .res {
    position: absolute;
    top: 56px;
    inset-inline-start: 12px;
    inset-inline-end: 64px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.mfmap .res button, .mfmap .res i {
    border: 0;
    text-align: start;
    background: rgba(255, 255, 255, .97);
    border-radius: 10px;
    padding: 9px 13px;
    font: inherit;
    font-size: 12px;
    color: #3c352c;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .14);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mfmap .res button:hover { background: #fdf0e5; }
.mfmap .lrow {
    position: absolute;
    top: 62px;
    inset-inline-start: 12px;
    inset-inline-end: 64px;
    z-index: 999;
}
.mfmap .res:not(:empty) + .lrow { display: none; }
.mfmap .lrow input {
    width: 100%;
    border: 0;
    outline: 0;
    border-radius: 12px;
    padding: 10px 15px;
    font: inherit;
    font-size: 12.5px;
    background: rgba(255, 255, 255, .92);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
    direction: ltr;
}
.mfmap .lrow input.bad { outline: 2px solid #e53935; }
.mfmap .ok {
    width: auto;
    height: auto;
    inset-inline-end: auto;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 999px;
    padding: 14px 30px;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    color: #fff;
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    box-shadow: 0 10px 30px rgba(244, 81, 30, .45);
    white-space: nowrap;
}
.mfmap .ok:active { transform: translateX(-50%) scale(.96); }

/* v198 — a phone number is a fully LTR object: left-aligned even in RTL forms. */
[dir="rtl"] input[type="tel"] { text-align: left; }

/* The link box shows it is thinking while a short link unrolls. */
.mfmap .lrow input.busy {
    background-image: linear-gradient(90deg, transparent, rgba(244, 81, 30, .15), transparent);
    background-size: 200% 100%;
    animation: qc-up-shimmer 1s linear infinite;
}

/* v201 — phone fields wear the same clothes as the username field: the label
   keeps its RTL place, only the VALUE types left-to-right. */
[dir="rtl"] input[type="tel"] { text-align: left; }

/* v202 — the link row gets its own "find it" button, twin of the search row. */
.mfmap .lrow { display: flex; gap: 6px; }
.mfmap .lrow input { flex: 1; width: auto; }
.mfmap .lrow .go {
    border: 0;
    border-radius: 12px;
    width: 42px;
    flex: none;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .14);
    cursor: pointer;
    font-size: 15px;
}

/* v204 — search results become a proper card stack: pin badges, two-line hits,
   staggered arrival, a finger-friendly height. */
.mfmap .res {
    top: 60px;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    background: rgba(255, 255, 255, .98);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 46vh;
    overflow-y: auto;
}
.mfmap .res:empty { display: none; }
.mfmap .res button.hit {
    display: flex;
    align-items: center;
    gap: 11px;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    padding: 10px 14px;
    cursor: pointer;
    text-align: start;
    white-space: normal;
    animation: qc-pop-in .28s ease both;
    transition: background .12s ease;
}
.mfmap .res button.hit + button.hit { border-top: 1px solid #f4ede3; }
.mfmap .res button.hit:hover { background: #fdf3e9; }
.mfmap .res .pin {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 16px;
    background: linear-gradient(135deg, #ffe3cb, #ffd0a8);
    box-shadow: inset 0 0 0 1px #f7ddc2;
}
.mfmap .res button.hit:hover .pin { background: linear-gradient(135deg, #ff8a2a, #f4511e); }
.mfmap .res .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mfmap .res .tx b {
    font-size: 13.5px;
    font-weight: 700;
    color: #2f2a23;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mfmap .res .tx small {
    font-size: 11px;
    color: #97907f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mfmap .res i {
    padding: 14px;
    text-align: center;
    color: #b3a893;
    font-style: normal;
}

/* The chosen spot, framed under the form — tap it to adjust. */
.loc-prev {
    height: 132px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid #eee3d5;
    box-shadow: 0 6px 18px rgba(70, 45, 20, .10);
    cursor: pointer;
    animation: qc-pop-in .3s ease both;
    position: relative;
    z-index: 0;
}

/* v205 — the pin IS the brand: logo in a white badge, orange ring, little tail. */
.mf-pin-wrap { background: none; border: 0; }
.mf-pin {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #f4511e;
    box-shadow: 0 8px 22px rgba(40, 20, 5, .35);
    display: grid;
    place-items: center;
    animation: mf-pin-drop .45s cubic-bezier(.2, .9, .3, 1.25) both;
}
.mf-pin::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top: 11px solid #f4511e;
}
.mf-pin img { width: 28px; height: 28px; pointer-events: none; }
@keyframes mf-pin-drop {
    from { opacity: 0; transform: translateY(-18px) scale(.7); }
    to { opacity: 1; transform: none; }
}

/* On a phone the map takes the whole screen — a dialog within a thumb''s reach. */
@media (max-width: 640px) {
    .mfmap { align-items: stretch; justify-content: stretch; }
    .mfmap .box {
        width: 100vw;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
    }
    .mfmap .top { top: max(10px, env(safe-area-inset-top)); }
    .mfmap .res { top: calc(max(10px, env(safe-area-inset-top)) + 46px); }
    .mfmap .lrow { top: calc(max(10px, env(safe-area-inset-top)) + 52px); }
    .mfmap .ok { bottom: max(20px, env(safe-area-inset-bottom)); }
    .mfmap .x { top: max(12px, env(safe-area-inset-top)); }
}

/* v206 — the pin, normal again: classic teardrop, orange, soft shadow. */
.mf-pin-wrap svg { filter: drop-shadow(0 4px 8px rgba(40, 20, 5, .4)); animation: mf-pin-drop .35s ease both; }

/* v207 — the mobile pin stands in the middle; its tip is the exact spot. */
.mf-centerpin {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -100%);
    z-index: 1001;
    pointer-events: none;
}
.mf-centerpin svg { filter: drop-shadow(0 4px 8px rgba(40, 20, 5, .4)); }

/* v208 — the name-in-every-language sheet. */
.nm-sheet { width: min(94vw, 520px); }
.nm-hint { font-size: 12px; color: #97907f; margin-bottom: 6px; }
.nm-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 48vh;
    overflow-y: auto;
    padding: 4px 2px;
    scrollbar-width: thin;
}
.nm-row { display: flex; align-items: center; gap: 10px; }
.nm-row .fl { font-size: 20px; flex: none; width: 26px; text-align: center; }
.nm-row .mud-input-control { flex: 1; }
.nm-row.req .mud-input-outlined-border { border-color: #f4a266; }

/* v209 — the name dialog floats on a soft warm veil, not the photo-viewer black. */
.qc-lightbox.nm-veil {
    background: rgba(60, 35, 12, .38);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

/* v210 — no mud: the veil behind the name dialog is bright frosted glass. */
.qc-lightbox.nm-veil {
    background: rgba(255, 247, 238, .45);
    backdrop-filter: blur(10px) saturate(1.1);
    -webkit-backdrop-filter: blur(10px) saturate(1.1);
}
.qc-lightbox.nm-veil .tm-sheet { box-shadow: 0 24px 70px rgba(120, 50, 10, .35); }

/* v211 — on a phone the name editor IS the screen: pure white page, no veil,
   nothing peeking around corners. Desktop keeps the centered sheet. */
@media (max-width: 640px) {
    .qc-lightbox.nm-veil {
        background: #fff;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }
    .qc-lightbox.nm-veil .tm-sheet {
        width: 100vw;
        max-width: none;
        height: 100dvh;
        max-height: none;
        border-radius: 0;
        box-shadow: none;
        padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
    }
    .qc-lightbox.nm-veil .nm-rows { max-height: none; flex: 1; }
}

/* v212 — the name editor takes the whole screen at EVERY size: solid white,
   square edges, a centered column. Nothing translucent, nothing to leak. */
.qc-lightbox.nm-veil {
    background: #fff;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    align-items: stretch;
    justify-content: center;
    padding: 0;
    animation: none;
}
.qc-lightbox.nm-veil .tm-sheet {
    width: min(100vw, 560px);
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    animation: none;
    padding: max(20px, env(safe-area-inset-top)) 20px max(20px, env(safe-area-inset-bottom));
}
.qc-lightbox.nm-veil .nm-rows { max-height: none; flex: 1; }

/* v213 — the registration wizard: one MudPaper, four stones, a lit road. */
.rg-shell {
    min-height: 100vh;
    min-height: 100dvh;
    background:
        radial-gradient(700px 340px at 80% -80px, rgba(255, 255, 255, .25), transparent 70%),
        linear-gradient(135deg, #ff8a2a, #e8420e);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 4vh 14px 40px;
}
.rg-card {
    width: min(96vw, 560px);
    border-radius: 24px !important;
    padding: 22px 22px 14px;
    box-shadow: 0 30px 80px rgba(90, 30, 0, .35) !important;
    animation: db-enter .5s cubic-bezier(.16, 1, .3, 1) both;
}
.rg-top { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; position: relative; }
.rg-top img { width: 40px; height: 40px; }
.rg-top b { font-size: 18px; font-weight: 800; color: #2f2a23; flex: 1; }
.rg-top .lang { flex: none; }

.rg-steps { display: flex; align-items: flex-start; margin-bottom: 20px; }
.rg-step { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 58px; }
.rg-step .dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    background: #f3ece2;
    color: #b3a893;
    transition: all .25s ease;
}
.rg-step small { font-size: 10.5px; font-weight: 700; color: #b3a893; text-align: center; }
.rg-step.on .dot {
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    color: #fff;
    box-shadow: 0 6px 16px rgba(244, 81, 30, .4);
    transform: scale(1.12);
}
.rg-step.on small { color: #f4511e; }
.rg-step.done .dot { background: #e6f4e7; color: #2e7d32; }
.rg-step.done small { color: #2e7d32; }
.rg-line {
    flex: 1;
    height: 3px;
    border-radius: 999px;
    background: #f3ece2;
    margin-top: 15px;
    transition: background .25s ease;
}
.rg-line.done { background: linear-gradient(90deg, #81c784, #2e7d32); }

.rg-body { min-height: 150px; animation: pg-in .3s cubic-bezier(.16, 1, .3, 1) both; }
.rg-acts { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.rg-signin { width: 100%; margin-top: 6px; color: #97907f !important; font-size: 12px !important; }

/* v214 — the wizard card stands CENTER STAGE at every size and direction. */
.rg-shell {
    align-items: center;
    justify-content: center;
    padding: 24px 14px;
}
.rg-wrap {
    width: 100%;
    display: flex;
    justify-content: center;
}
.rg-card { margin-inline: auto; }
@media (max-width: 640px) {
    .rg-shell { align-items: flex-start; padding-top: 3vh; }
}
/* Arrows follow the reading direction: "next" points onward, "back" points home. */
[dir="rtl"] .rg-acts .mud-icon-root { transform: scaleX(-1); }

/* v215 — the wizard''s last stone: everything the pen wrote, read back once. */
.rg-sum { display: flex; flex-direction: column; gap: 4px; }
.rg-sum .row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fdfaf5;
    border: 1px solid #f3ece2;
}
.rg-sum .row .mud-icon-root { color: #f4511e; width: 20px; height: 20px; flex: none; }
.rg-sum .row span { display: flex; flex-direction: column; min-width: 0; }
.rg-sum .row small { font-size: 10.5px; font-weight: 800; color: #b3a893; text-transform: uppercase; letter-spacing: .5px; }
.rg-sum .row b { font-size: 13px; color: #2f2a23; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.rg-sum .row b i { font-style: normal; color: #6b5a44; }
.rg-steps .rg-step { min-width: 48px; }

/* v216 — the review page''s photo slot: a dashed invitation, then the picture. */
.rg-lbl {
    display: block;
    font-size: 11px;
    font-weight: 800;
    color: #97907f;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 12px 0 6px;
}
.rg-photo.add {
    width: 100%;
    min-height: 96px;
    border: 2px dashed #e5d5bf;
    border-radius: 14px;
    background: #fdfaf5;
    color: #b08a5a;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all .15s ease;
}
.rg-photo.add:hover { border-color: #f4a266; color: #f4511e; background: #fdf3e7; }
.rg-photo.has {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    animation: qc-zoom-in .25s ease;
}
.rg-photo.has img { width: 100%; height: 150px; object-fit: cover; display: block; }
.rg-photo.has .x {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 0;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    cursor: pointer;
    font-size: 13px;
}

/* v217 — the way back to sign-in reads like a door, not a footnote. */
.rg-signin {
    width: 100%;
    margin-top: 8px !important;
    color: #f4511e !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    background: #fdf3e9 !important;
    padding: 10px 0 !important;
}
.rg-signin:hover { background: #fdeadb !important; }
[dir="rtl"] .rg-signin .mud-icon-root { transform: scaleX(-1); }

/* v218 — the modern phone field: flag + code on one side, grouped digits on the
   other, one pill, orange focus ring. Always an LTR object. */
.pf-field {
    display: flex;
    align-items: stretch;
    direction: ltr;
    background: #fff;
    border: 1px solid #ded3c2;
    border-radius: 14px;
    margin-bottom: 14px;
    transition: border-color .15s ease, box-shadow .15s ease;
    overflow: visible;
}
.pf-field.on { border-color: #f4511e; box-shadow: 0 0 0 4px rgba(255, 90, 0, .08); }
.pf-ccbtn {
    display: flex;
    align-items: center;
    gap: 6px;
    border: 0;
    background: #faf6f0;
    border-radius: 13px 0 0 13px;
    padding: 0 12px;
    height: 100%;
    min-height: 56px;
    cursor: pointer;
    font-family: inherit;
    border-inline-end: 1px solid #eee3d5;
    color: #6b5a44;
}
.pf-ccbtn .fl { font-size: 18px; }
.pf-ccbtn .cd { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
.pf-in {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 14px;
    min-width: 0;
}
.pf-in label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: #b3a893;
}
.pf-in input {
    border: 0;
    outline: 0;
    background: none;
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    color: #2f2a23;
    letter-spacing: 1px;
    font-variant-numeric: tabular-nums;
    width: 100%;
}
.pf-in input::placeholder { color: #d8cdbb; font-weight: 500; letter-spacing: 1px; }
.pf-item { display: flex; align-items: center; gap: 10px; min-width: 190px; direction: ltr; }
.pf-item .fl { font-size: 17px; }
.pf-item b { flex: 1; font-size: 13px; font-weight: 600; }
.pf-item i { font-style: normal; font-size: 12.5px; color: #97907f; font-variant-numeric: tabular-nums; }
.ph-kind { font-size: 18px; flex: none; }

/* v219 — real flags, not letter codes: little woven rectangles from flagcdn. */
.pf-flag {
    width: 24px;
    height: 17px;
    border-radius: 3px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(60, 40, 20, .12);
    flex: none;
}

/* v220 — the phone pill slims down, and the country drop learns to search. */
.pf-field { border-radius: 12px; margin-bottom: 12px; }
.pf-ccwrap { position: relative; display: flex; }
.pf-ccbtn {
    min-height: 44px;
    padding: 0 9px;
    gap: 5px;
    border-radius: 11px 0 0 11px;
}
.pf-ccbtn .cd { font-size: 12px; }
.pf-flag { width: 20px; height: 14px; }
.pf-in { padding: 5px 12px; }
.pf-in label { font-size: 9px; letter-spacing: .3px; }
.pf-in input { font-size: 14.5px; letter-spacing: .5px; }

.pf-veil { position: fixed; inset: 0; z-index: 1290; }
.pf-drop {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 1300;
    width: 250px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 44px rgba(40, 25, 10, .22);
    border: 1px solid #f0e7db;
    overflow: hidden;
    animation: qcpop .12s ease;
}
.pf-drop .q {
    width: 100%;
    border: 0;
    outline: 0;
    border-bottom: 1px solid #f3ece2;
    padding: 10px 13px;
    font: inherit;
    font-size: 13px;
    background: #fbf7f1;
}
.pf-drop .list { max-height: 230px; overflow-y: auto; scrollbar-width: thin; padding: 4px; }
.pf-drop .list button {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    border: 0;
    background: none;
    border-radius: 9px;
    padding: 8px 10px;
    cursor: pointer;
    font-family: inherit;
    text-align: start;
}
.pf-drop .list button:hover { background: #faf6f0; }
.pf-drop .list button.on { background: #fdf0e5; }
.pf-drop .list button b { flex: 1; font-size: 12.5px; font-weight: 600; color: #2f2a23; }
.pf-drop .list button i { font-style: normal; font-size: 12px; color: #97907f; font-variant-numeric: tabular-nums; }

/* v221 — inline language names: quiet expander under Arabic + English. */
.nf { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.nf .nm-row { animation: qc-pop-in .22s ease both; }
.nf-more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    align-self: flex-start;
    border: 0;
    background: #fdf3e9;
    color: #b06a2c;
    border-radius: 999px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: background .15s ease;
}
.nf-more:hover { background: #fdeadb; color: #f4511e; }
.nf-more i {
    font-style: normal;
    background: #f4511e;
    color: #fff;
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 10.5px;
}

/* v222 — language rows grow up: the flag lives INSIDE the field, deletes are
   quiet ghosts, and "add another language" is a proper dashed row. */
.nf { gap: 10px; }
.nf .nm-row { position: relative; }
.nf .nm-row .pf-flag {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    width: 24px;
    height: 17px;
    border-radius: 3px;
}
.nf .nm-row .mud-input-control { width: 100%; }
.nf .nm-row input { padding-inline-end: 44px; }
.nf .mud-icon-button {
    background: #fdf0ec;
    border-radius: 10px;
}
.nf-more {
    width: 100%;
    justify-content: center;
    border: 2px dashed #e5d5bf;
    background: #fdfaf5;
    border-radius: 12px;
    padding: 11px 14px;
    color: #b08a5a;
    font-size: 12.5px;
}
.nf-more:hover { border-color: #f4a266; background: #fdf3e7; color: #f4511e; }

/* v223 — the other-languages dialog keeps its height civil: the rows scroll. */
.mf-lang-dialog .nm-rows {
    max-height: 52vh;
    overflow-y: auto;
    scrollbar-width: thin;
    padding: 4px 2px;
}

/* v224 — the location step gets a face: a faded Muscat map as the invitation,
   a change-chip riding the preview. */
.loc-cta {
    position: relative;
    width: 100%;
    min-height: 150px;
    border: 0;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background:
        linear-gradient(rgba(255, 250, 243, .87), rgba(255, 247, 238, .93)),
        url('https://mt1.google.com/vt/lyrs=m&x=1356&y=886&z=11') center / cover;
    box-shadow: inset 0 0 0 2px #f2e3cf;
    transition: box-shadow .15s ease, transform .15s ease;
    animation: qc-pop-in .3s ease both;
}
.loc-cta:hover { box-shadow: inset 0 0 0 2px #f4a266; transform: translateY(-2px); }
.loc-cta .ic {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    color: #fff;
    box-shadow: 0 8px 22px rgba(244, 81, 30, .4);
    animation: qc-up-breathe 2.6s ease-in-out infinite;
}
.loc-cta b { font-size: 14.5px; font-weight: 800; color: #2f2a23; }
.loc-cta small { font-size: 12px; color: #97907f; }

.loc-wrap { position: relative; }
.loc-change {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .96);
    color: #f4511e;
    font-family: inherit;
    font-size: 12px;
    font-weight: 800;
    padding: 8px 16px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(40, 25, 10, .25);
}

/* v225 — section labels wear their little orange icons. */
.rg-lbl { display: flex; align-items: center; gap: 6px; }
.rg-lbl .mud-icon-root { width: 15px; height: 15px; color: #f4511e; }

/* v226 — the wizard''s fixed rail: frosted, always in reach. */
.rg-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    padding-top: max(8px, env(safe-area-inset-top));
    background: rgba(255, 251, 246, .85);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid rgba(220, 200, 175, .35);
}
.rg-topbar img { width: 30px; height: 30px; }
.rg-topbar b { font-size: 15px; font-weight: 800; color: #2f2a23; }
.rg-loginbtn { border-radius: 999px !important; font-weight: 700 !important; }
.rg-shell { padding-top: 74px !important; }
.rg-top { margin-bottom: 14px; }
.rg-top b { font-size: 18px; font-weight: 800; color: #2f2a23; }

/* v227 — the wizard rail, tailored: a carded mark, a two-line brand, a soft
   round language button, a gradient door to sign-in. */
.rg-topbar {
    gap: 12px;
    padding: 9px 16px;
    padding-top: max(9px, env(safe-area-inset-top));
    background: rgba(255, 252, 248, .88);
    box-shadow: 0 6px 24px rgba(120, 60, 10, .08);
    border-bottom: 1px solid rgba(230, 210, 185, .5);
}
.rg-topbar .brand { display: flex; align-items: center; gap: 10px; }
.rg-topbar .mark {
    width: 40px;
    height: 40px;
    border-radius: 13px;
    background: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 4px 14px rgba(120, 60, 10, .14), inset 0 0 0 1px #f6e9d8;
}
.rg-topbar .mark img { width: 26px; height: 26px; }
.rg-topbar .tx { display: flex; flex-direction: column; line-height: 1.15; }
.rg-topbar .tx b { font-size: 15.5px; font-weight: 800; color: #2f2a23; letter-spacing: -.2px; }
.rg-topbar .tx small { font-size: 9px; font-weight: 800; letter-spacing: 2px; color: #f4511e; }
.rg-langbtn .mud-icon-button {
    background: #f6efe6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transition: background .15s ease, transform .12s ease;
}
.rg-langbtn .mud-icon-button:hover { background: #fdeadb; }
.rg-langbtn .mud-icon-button:active { transform: scale(.9); }
.rg-loginbtn2 {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 999px;
    padding: 10px 18px;
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(244, 81, 30, .35);
    transition: transform .12s ease, box-shadow .15s ease;
}
.rg-loginbtn2:hover { box-shadow: 0 10px 26px rgba(244, 81, 30, .45); }
.rg-loginbtn2:active { transform: scale(.95); }
[dir="rtl"] .rg-loginbtn2 .mud-icon-root { transform: scaleX(-1); }
.rg-shell { padding-top: 82px !important; }

/* v228 — six stones fit; the photo step breathes; "optional" whispers. */
.rg-steps .rg-step { min-width: 44px; }
.rg-steps .rg-step small { font-size: 10px; }
.rg-optional { font-size: 10.5px; font-weight: 600; color: #cbbfae; }

/* v229 — the wizard card rests mid-screen on phones too. */
@media (max-width: 640px) {
    .rg-shell { align-items: center !important; padding-top: 82px !important; }
}

/* v230 — the map credits Google quietly; Leaflet stays backstage. */
.mfmap .credit {
    position: absolute;
    bottom: 8px;
    inset-inline-start: 10px;
    z-index: 1000;
    font-size: 10px;
    color: #5c5348;
    background: rgba(255, 255, 255, .75);
    border-radius: 6px;
    padding: 2px 7px;
    pointer-events: none;
}

/* v231 — zoom buttons keep clear of the confirm pill. */
.mfmap .leaflet-bottom.leaflet-right { margin-bottom: 78px; }

/* v232 — a found link turns its box green and stays put. */
.mfmap .lrow input.ok { outline: 2px solid #2e7d32; background: #f2faf2; }

/* v233 — the map''s top tools stand in ONE column: search, results, link.
   No absolute juggling, no overlap, any screen. */
.mfmap .top { flex-direction: column; gap: 7px; }
.mfmap .top .res,
.mfmap .top .lrow {
    position: static;
    inset: auto;
    width: 100%;
}
.mfmap .top .res { max-height: 38vh; }


/* v234 — the map toolbox, rebuilt with fresh names no old rule can reach:
   close + search share one row, results card beneath, link box last.
   One column, both directions (LTR/RTL), any screen — nothing overlaps. */
.mfmap .mtop {
    position: absolute;
    top: max(10px, env(safe-area-inset-top));
    inset-inline: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mfmap .mrow { display: flex; align-items: center; gap: 8px; }
.mfmap .mx {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: #fff;
    color: #5c5348;
    font-size: 17px;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
    transition: transform .12s ease;
}
.mfmap .mx:active { transform: scale(.92); }
.mfmap .mq, .mfmap .mlk {
    border: 0;
    outline: 0;
    font: inherit;
    font-size: 13.5px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
    border-radius: 999px;
    padding: 12px 17px;
    min-width: 0;
    width: 100%;
}
.mfmap .mq { flex: 1; width: auto; }
.mfmap .mlk {
    direction: ltr; /* URLs read left-to-right even on an RTL page */
    text-align: start;
    font-size: 12.5px;
    padding: 10px 15px;
    background: rgba(255, 255, 255, .92);
}
.mfmap .mlk.ok { outline: 2px solid #2e7d32; background: #f2faf2; }
.mfmap .mlk.bad { outline: 2px solid #e53935; background: #fdf1f0; }
.mfmap .mlk.busy {
    background-image: linear-gradient(90deg, transparent, rgba(244, 81, 30, .15), transparent);
    background-size: 200% 100%;
    animation: qc-up-shimmer 1s linear infinite;
}
.mfmap .mres {
    border-radius: 16px;
    overflow: hidden;
    overflow-y: auto;
    max-height: 38vh;
    background: rgba(255, 255, 255, .98);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
}
.mfmap .mres:empty { display: none; }
.mfmap .mres:not(:empty) + .mlk { display: none; }
.mfmap .mres button.hit {
    display: flex;
    align-items: center;
    gap: 11px;
    border: 0;
    background: none;
    box-shadow: none;
    padding: 10px 14px;
    cursor: pointer;
    text-align: start;
    font: inherit;
    white-space: normal;
    animation: qc-pop-in .28s ease both;
    transition: background .12s ease;
}
.mfmap .mres button.hit + button.hit { border-top: 1px solid #f4ede3; }
.mfmap .mres button.hit:hover { background: #fdf3e9; }
.mfmap .mres .pin {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-size: 16px;
    background: linear-gradient(135deg, #ffe3cb, #ffd0a8);
    box-shadow: inset 0 0 0 1px #f7ddc2;
}
.mfmap .mres button.hit:hover .pin { background: linear-gradient(135deg, #ff8a2a, #f4511e); }
.mfmap .mres .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.mfmap .mres .tx b {
    font-size: 13.5px;
    font-weight: 700;
    color: #2f2a23;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mfmap .mres .tx small {
    font-size: 11px;
    color: #97907f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mfmap .mres i { padding: 14px; text-align: center; color: #b3a893; font-style: normal; }


/* v235 — the map inputs keep their own dark ink, always; no state may recolor them. */
.mfmap .mq, .mfmap .mlk { color: #2f2a23; }
.mfmap .mq::placeholder, .mfmap .mlk::placeholder { color: #97907f; }


/* v236 — address rows wear a location pin instead of a country flag. */
.nf .nm-row svg.nf-loc {
    position: absolute;
    inset-inline-end: 12px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    pointer-events: none;
    width: 20px;
    height: 20px;
    color: #f4511e;
}
.mf-lang-dialog .nm-row svg.nf-loc { flex: none; width: 20px; height: 20px; color: #f4511e; }


/* v237 — the empty products page points ONE way: a centered hero with a single
   button; empty categories offer their own dashed "first product" invitation. */
.pmn-hero {
    max-width: 460px;
    margin: 8vh auto 0;
    background: #fff;
    border: 1px solid #f0e7db;
    border-radius: 24px;
    padding: 42px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(70, 45, 20, .08);
    animation: db-enter .5s cubic-bezier(.16, 1, .3, 1) both;
}
.pmn-hero .ic { font-size: 46px; }
.pmn-hero b { font-size: 17px; color: #2f2a23; }
.pmn-hero small { font-size: 13px; color: #97907f; margin-bottom: 10px; }
.pmn-add-first {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: 100%;
    border: 2px dashed #e5d5bf;
    background: #fdfaf5;
    color: #b08a5a;
    border-radius: 14px;
    padding: 14px;
    margin: 4px 0 8px;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.pmn-add-first:hover { border-color: #f4a266; color: #f4511e; background: #fdf3e7; }


/* v238 — the portal wears its own dress: soft color mesh on warm paper.
   The food-doodle wallpaper goes back to being the CHAT's alone. */
.mf-bg {
    background:
        radial-gradient(900px 420px at 88% -140px, rgba(255, 122, 26, .13), transparent 70%),
        radial-gradient(640px 360px at -60px 240px, rgba(94, 53, 177, .06), transparent 70%),
        radial-gradient(760px 380px at 55% 112%, rgba(46, 125, 50, .05), transparent 70%),
        linear-gradient(180deg, #fdfbf7 0%, #f8f3ec 60%, #f5efe6 100%);
    background-attachment: fixed;
}


/* v239 — a background with presence: aurora glows in the brand colors over a
   whisper-faint grid — the modern dashboard look, still calm behind cards. */
.mf-bg {
    background:
        radial-gradient(1000px 520px at 90% -180px, rgba(255, 122, 26, .16), transparent 65%),
        radial-gradient(720px 440px at -120px 320px, rgba(255, 183, 77, .13), transparent 65%),
        radial-gradient(860px 480px at 58% 115%, rgba(94, 53, 177, .07), transparent 70%),
        linear-gradient(rgba(150, 110, 60, .045) 1px, transparent 1px) 0 0 / 100% 46px,
        linear-gradient(90deg, rgba(150, 110, 60, .045) 1px, transparent 1px) 0 0 / 46px 100%,
        linear-gradient(180deg, #fdfaf6 0%, #f8f2e9 55%, #f4ede2 100%);
    background-attachment: fixed;
}


/* v240 — the floor plan becomes a real workspace: a large fixed canvas inside a
   scrolling frame, so seventy tables have room and a big salon just means more
   scrolling — never more squeezing. Tables grow a corner grip for hand-set sizes. */
.oo-fp-scroll {
    overflow: auto;
    border-radius: 24px;
    max-height: 76vh;
    background: #f0e9df;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, .06);
    -webkit-overflow-scrolling: touch;
}
.oo-fp-scroll .oo-fp-canvas {
    width: 1700px;
    height: 1000px;
    min-height: 1000px;
    max-height: none;
    touch-action: pan-x pan-y; /* finger pans the floor; tables own their own drags */
}
.oo-fp-scroll .oo-fp-canvas.drawing { touch-action: none; }
.oo-fp-scroll .oo-fp-canvas.pos-fp { height: 1000px; min-height: 1000px; touch-action: pan-x pan-y; }

.oo-fp-table .ts {
    position: absolute;
    inset-inline-end: -7px;
    bottom: -7px;
    width: 16px;
    height: 16px;
    border-radius: 5px;
    background: #fff;
    border: 2px solid #f4a266;
    cursor: nwse-resize;
    z-index: 3;
    opacity: 0;
    transition: opacity .15s ease;
    touch-action: none;
}
.oo-fp-table:hover .ts, .oo-fp-table.sel .ts { opacity: 1; }
.oo-fp-canvas.pos-fp .oo-fp-table .ts { display: none; }


/* v241 — the salon is a container: crowded rooms shrink their tables (chairs,
   fonts and all) so nothing pokes past a wall; the plan can go fullscreen. */
.oo-fp-table.fit-sm { --chair-out: -11px; --chair-r: -40px; border-radius: 12px; padding: 4px; }
.oo-fp-table.fit-sm .nm { font-size: 11px; }
.oo-fp-table.fit-sm .seats { font-size: 9.5px; }
.oo-fp-table.fit-sm .chair { width: 12px; height: 7px; }
.oo-fp-table.fit-sm .badge { transform: scale(.8); }
.oo-fp-table.fit-xs { --chair-out: -8px; --chair-r: -30px; border-radius: 9px; padding: 2px 3px; }
.oo-fp-table.fit-xs .nm { font-size: 9.5px; }
.oo-fp-table.fit-xs .seats, .oo-fp-table.fit-xs .badge,
.oo-fp-table.fit-xs .who, .oo-fp-table.fit-xs .tdur { display: none; }
.oo-fp-table.fit-xs .chair { width: 9px; height: 6px; border-width: 1px; }

.oo-fp-scroll:fullscreen {
    max-height: none;
    border-radius: 0;
    background: #f0e9df;
    padding: 10px;
}


/* v242 — fixed-attachment backgrounds vanish under dialog overlays in Chrome
   (the veil's backdrop filter re-roots painting); the aurora scrolls instead. */
.mf-bg { background-attachment: scroll; }


/* v243 — the QR sheet prints only what is ticked: unticked cards dim on screen
   and stay home when the printer runs. */
.tqr-card { position: relative; cursor: pointer; }
.tqr-card.skip { opacity: .35; filter: grayscale(.5); }
.tqr-pick {
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    z-index: 2;
}
.tqr-pick input {
    width: 20px;
    height: 20px;
    accent-color: #f4511e;
    cursor: pointer;
    pointer-events: none; /* the whole card is the toggle */
}
.tqr-all {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    font-weight: 700;
    color: #5c5348;
    cursor: pointer;
}
.tqr-all input { width: 18px; height: 18px; accent-color: #f4511e; cursor: pointer; }
@media print {
    .tqr-card.skip { display: none !important; }
    .tqr-card { opacity: 1 !important; filter: none !important; }
}


/* ============ v244 — DASHBOARD, the modern coat ============
   Depth, color and motion: layered hero, tinted glass stats, jewel quick
   tiles, gradient bars — the same page, dressed like a product. */

/* ---- hero: layered light on deep orange ---- */
.db-hero {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background:
        radial-gradient(420px 200px at 12% -40px, rgba(255, 255, 255, .28), transparent 65%),
        radial-gradient(520px 260px at 88% 120%, rgba(120, 30, 0, .35), transparent 70%),
        linear-gradient(118deg, #ff9a3d 0%, #f4511e 52%, #d63a10 100%);
    box-shadow: 0 18px 44px rgba(214, 58, 16, .30), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.db-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(2.2px 2.2px at 18% 30%, rgba(255,255,255,.5) 50%, transparent 51%),
        radial-gradient(1.8px 1.8px at 42% 68%, rgba(255,255,255,.35) 50%, transparent 51%),
        radial-gradient(2.5px 2.5px at 71% 22%, rgba(255,255,255,.4) 50%, transparent 51%),
        radial-gradient(1.6px 1.6px at 87% 55%, rgba(255,255,255,.35) 50%, transparent 51%);
    pointer-events: none;
}
.db-hero .who .logo {
    background: rgba(255, 255, 255, .18);
    border: 1.5px solid rgba(255, 255, 255, .35);
    box-shadow: 0 10px 26px rgba(120, 30, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .4);
    backdrop-filter: blur(6px);
    animation: db-logo-float 4.5s ease-in-out infinite;
}
@keyframes db-logo-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}
.db-hero .who .tx b { text-shadow: 0 2px 12px rgba(120, 30, 0, .35); letter-spacing: .2px; }
.db-hero .who .pill {
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, .35);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25);
}
.db-hero .db-hero-btn {
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(120, 30, 0, .30);
    transition: transform .16s ease, box-shadow .16s ease;
}
.db-hero .db-hero-btn:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(120, 30, 0, .4); }

/* ---- stats: four tinted glass tiles with a watermark icon ---- */
.db-stat {
    position: relative;
    overflow: hidden;
    border: 1px solid #f0e7db;
    border-radius: 22px;
    box-shadow: 0 2px 6px rgba(70, 45, 20, .05), 0 14px 34px rgba(70, 45, 20, .07);
    transition: transform .18s ease, box-shadow .18s ease;
}
.db-stat:hover { transform: translateY(-4px); box-shadow: 0 6px 14px rgba(70, 45, 20, .08), 0 24px 48px rgba(70, 45, 20, .12); }
.db-stat::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    border-radius: 0 4px 4px 0;
}
.db-stat.s1::before { background: linear-gradient(180deg, #ffb300, #f57c00); }
.db-stat.s2::before { background: linear-gradient(180deg, #4fc3f7, #0277bd); }
.db-stat.s3::before { background: linear-gradient(180deg, #b39ddb, #5e35b1); }
.db-stat.s4::before { background: linear-gradient(180deg, #81c784, #2e7d32); }
.db-stat.s1 { background: linear-gradient(155deg, #fffdf6, #fff6e2); }
.db-stat.s2 { background: linear-gradient(155deg, #fbfeff, #ecf7fd); }
.db-stat.s3 { background: linear-gradient(155deg, #fdfcff, #f2edfb); }
.db-stat.s4 { background: linear-gradient(155deg, #fbfff6, #edf8ee); }
.db-stat .ic {
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(70, 45, 20, .18);
    transition: transform .18s ease;
}
.db-stat:hover .ic { transform: scale(1.08) rotate(-4deg); }
.db-stat .v { font-size: 26px; font-weight: 800; letter-spacing: -.5px; }
.db-stat.s4 .v {
    background: linear-gradient(120deg, #2e7d32, #66bb6a);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ---- cards: deeper, calmer ---- */
.db .db-card {
    border: 1px solid #f0e7db;
    border-radius: 22px;
    box-shadow: 0 2px 6px rgba(70, 45, 20, .04), 0 16px 40px rgba(70, 45, 20, .06);
    transition: box-shadow .2s ease;
}
.db .db-card:hover { box-shadow: 0 4px 10px rgba(70, 45, 20, .06), 0 24px 54px rgba(70, 45, 20, .10); }

/* ---- the week: gradient bars on a soft track ---- */
.db-bars .col i {
    background: linear-gradient(180deg, #ffb27a, #f4511e);
    border-radius: 8px 8px 4px 4px;
    box-shadow: 0 4px 12px rgba(244, 81, 30, .25);
    transition: transform .18s ease, box-shadow .18s ease;
}
.db-bars .col:hover i { transform: scaleY(1.04); transform-origin: bottom; box-shadow: 0 8px 20px rgba(244, 81, 30, .4); }
.db-bars .col.today i {
    background: linear-gradient(180deg, #ffd54f, #f4511e);
    box-shadow: 0 0 0 3px #ffe0b255, 0 8px 22px rgba(244, 81, 30, .45);
}
.db-bars .col.today span { color: #f4511e; font-weight: 800; }
.db-bars .col b {
    background: #2f2a23;
    color: #fff;
    border-radius: 7px;
    padding: 2px 7px;
    font-size: 10px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .18s ease, transform .18s ease;
}
.db-bars .col:hover b { opacity: 1; transform: translateY(0); }

/* ---- quick actions: six little jewels ---- */
.db-quick a {
    position: relative;
    overflow: hidden;
    border: 0;
    border-radius: 18px;
    color: #fff;
    box-shadow: 0 8px 22px rgba(70, 45, 20, .16);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.db-quick a:nth-child(1) { background: linear-gradient(135deg, #ff8a2a, #e64a19); }
.db-quick a:nth-child(2) { background: linear-gradient(135deg, #26c6da, #00838f); }
.db-quick a:nth-child(3) { background: linear-gradient(135deg, #ab47bc, #6a1b9a); }
.db-quick a:nth-child(4) { background: linear-gradient(135deg, #66bb6a, #2e7d32); }
.db-quick a:nth-child(5) { background: linear-gradient(135deg, #5c6bc0, #283593); }
.db-quick a:nth-child(6) { background: linear-gradient(135deg, #ffa726, #ef6c00); }
.db-quick a span { color: #fff; font-weight: 700; }
.db-quick a svg { color: #fff !important; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .25)); }
.db-quick a::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: -70%;
    width: 45%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-18deg);
    transition: inset-inline-start .45s ease;
}
.db-quick a:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(70, 45, 20, .26); }
.db-quick a:hover::after { inset-inline-start: 130%; }


/* ============ v245 — TABLES, the structured way ============
   Salons are sections; tables are cards inside them. One button adds a salon,
   one adds a table into it. No canvas, no dragging, nothing to misplace. */
.sal {
    background: #fff;
    border: 1px solid #f0e7db;
    border-radius: 20px;
    padding: 14px 16px 16px;
    margin-bottom: 14px;
    box-shadow: 0 2px 6px rgba(70, 45, 20, .04), 0 14px 34px rgba(70, 45, 20, .06);
    animation: db-enter .45s cubic-bezier(.16, 1, .3, 1) both;
}
.sal.loose { border-style: dashed; background: #fdfaf5; }
.sal-head {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.sal-head.slim { margin-bottom: 8px; }
.sal-ic {
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    box-shadow: 0 6px 14px rgba(244, 81, 30, .3);
    flex: none;
}
.sal-ic.dim { background: linear-gradient(135deg, #cfc6b8, #a99f8d); box-shadow: none; }
.sal-ic svg { width: 18px; height: 18px; }
.sal-name { font-size: 15.5px; color: #2f2a23; }
.sal-meta { font-size: 12px; color: #97907f; font-weight: 700; }
.sal-rename {
    border: 1.5px solid #f4a266;
    border-radius: 10px;
    padding: 7px 12px;
    font: inherit;
    font-size: 14px;
    outline: none;
    min-width: 0;
    width: 200px;
}
.sal-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 9px;
}
.sal-tbl {
    position: relative;
    border: 1.5px solid #e5efe0;
    background: linear-gradient(160deg, #fdfffc, #f2faf0);
    border-radius: 14px;
    padding: 10px 8px 9px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    cursor: pointer;
    font-family: inherit;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.sal-tbl:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(70, 45, 20, .12); }
.sal-tbl.sel { border-color: #f4511e; box-shadow: 0 0 0 3px #f4511e2b, 0 10px 22px rgba(70, 45, 20, .12); }
.sal-tbl.busy {
    border-color: #ffd9a8;
    background: linear-gradient(160deg, #fffdf6, #fff3df);
}
.sal-tbl.busy::after {
    content: '';
    position: absolute;
    top: 8px;
    inset-inline-end: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f57c00;
    box-shadow: 0 0 0 3px #f57c0033;
    animation: oo-live-pulse 1.6s ease-in-out infinite;
}
.sal-tbl .tic { line-height: 1; }
.sal-tbl .tnm { font-size: 15px; color: #2f2a23; }
.sal-tbl .tst { font-size: 11px; color: #97907f; font-weight: 700; }
.sal-tbl .twho {
    font-size: 10.5px;
    color: #b26a00;
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sal-tbl .tdur { font-size: 10px; color: #97907f; }
.sal-add {
    border: 2px dashed #e5d5bf;
    background: #fdfaf5;
    color: #b08a5a;
    border-radius: 14px;
    min-height: 78px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.sal-add:hover { border-color: #f4a266; color: #f4511e; background: #fdf3e7; }


/* v246 — salons are boxes the owner shapes: stretch any corner (width AND
   height, size remembered), stand them side by side, reorder with arrows. */
.sal-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: flex-start;
}
.sal-wrap .sal {
    flex: 1 1 100%;
    margin-bottom: 0;
    resize: both;
    overflow: auto;
    min-width: 260px;
    min-height: 130px;
    max-width: 100%;
}
.sal.loose { margin-top: 14px; }
@media (max-width: 700px) {
    .sal-wrap .sal { resize: vertical; } /* narrow screens keep full width */
}


/* v247 — the salon grip: a real handle, finger-friendly, both directions,
   in place of the mouse-only native resizer. */
.sal { position: relative; }
.sal-wrap .sal { resize: none; }
@media (max-width: 700px) {
    .sal-wrap .sal { resize: none; }
}
.sal-rs {
    position: absolute;
    bottom: 4px;
    inset-inline-end: 4px;
    width: 26px;
    height: 26px;
    border-radius: 9px;
    background:
        radial-gradient(2px 2px at 30% 70%, #f4a266 50%, transparent 51%),
        radial-gradient(2px 2px at 55% 45%, #f4a266 50%, transparent 51%),
        radial-gradient(2px 2px at 80% 20%, #f4a266 50%, transparent 51%),
        radial-gradient(2px 2px at 55% 70%, #f4a266 50%, transparent 51%),
        radial-gradient(2px 2px at 80% 45%, #f4a266 50%, transparent 51%),
        radial-gradient(2px 2px at 80% 70%, #f4a266 50%, transparent 51%),
        #fff;
    border: 1.5px solid #f0dcc4;
    cursor: nwse-resize;
    touch-action: none;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(70, 45, 20, .12);
}
[dir='rtl'] .sal-rs, .mud-application-layout-rtl .sal-rs { cursor: nesw-resize; }


/* v248 — panels move by hand: the ⠿ handle carries a salon over another and
   they swap places. No automatic arranging — the owner decides the order. */
.sal-drag {
    display: grid;
    place-items: center;
    width: 30px;
    height: 34px;
    border-radius: 9px;
    color: #b3a893;
    cursor: grab;
    touch-action: none;
    flex: none;
}
.sal-drag:hover { background: #f7f0e5; color: #7a6f5c; }
.sal-lift {
    opacity: .75;
    box-shadow: 0 22px 50px rgba(70, 45, 20, .28) !important;
    transform: scale(.995);
}


/* v249 — the drag ghost: a floating copy rides the finger; the salon under it
   lights up as the drop target. */
.sal-ghost {
    position: fixed !important;
    z-index: 9000;
    pointer-events: none;
    opacity: .88;
    margin: 0 !important;
    transform: scale(.98) rotate(.4deg);
    box-shadow: 0 30px 70px rgba(70, 45, 20, .35) !important;
    overflow: hidden !important;
}
.sal-target { outline: 3px dashed #f4a266; outline-offset: 4px; }


/* v250 — the insertion bar: where the carried salon will land. */
.sal-slotbar {
    position: fixed;
    width: 6px;
    border-radius: 4px;
    background: linear-gradient(180deg, #ff8a2a, #f4511e);
    box-shadow: 0 0 0 3px #f4511e2e, 0 6px 18px rgba(244, 81, 30, .4);
    z-index: 9001;
    pointer-events: none;
    animation: qcfade .12s ease;
}


/* v251 — the MAIN AREA: a big open board where salon panels float free.
   The owner puts each panel wherever the hand leaves it — nothing rearranges. */
.sal-area-scroll {
    overflow: auto;
    border-radius: 22px;
    max-height: 76vh;
    background: #f0e9df;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, .06);
    -webkit-overflow-scrolling: touch;
}
.sal-area {
    position: relative;
    width: 1700px;
    height: 1000px;
    background:
        radial-gradient(rgba(120, 90, 60, .12) 1.2px, transparent 1.4px) 0 0 / 26px 26px,
        linear-gradient(160deg, #faf7f2, #f0e9df);
}
.sal.float {
    position: absolute;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 140px;
    resize: none;
    overflow: hidden;
}
.sal.float .sal-grid { overflow-y: auto; flex: 1; align-content: start; }
.sal.float .sal-head { flex: none; }


/* v252 — the title bar IS the handle: grab it anywhere to carry the panel. */
.sal.float .sal-head { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.sal.float .sal-head:active { cursor: grabbing; }


/* v253 — side-wall resize, a modest corner grip, and the MAIN AREA takes the
   whole page: the board is the page now, not a box inside it. */
.sal-area-scroll {
    max-height: none;
    height: calc(100vh - 170px);
    min-height: 420px;
}
.sal-rs {
    width: 15px;
    height: 15px;
    border-radius: 5px;
    bottom: 3px;
    inset-inline-end: 3px;
    border: 1px solid #f0dcc4;
    box-shadow: none;
    background:
        linear-gradient(135deg, transparent 46%, #f4a266 46%, #f4a266 56%, transparent 56%),
        linear-gradient(135deg, transparent 70%, #f4a266 70%, #f4a266 80%, transparent 80%),
        #fff;
}
.sal-el, .sal-er {
    position: absolute;
    top: 46px;
    bottom: 0;
    width: 12px;
    cursor: ew-resize;
    touch-action: none;
    z-index: 2;
}
.sal-el { left: -4px; }
.sal-er { right: -4px; }
.sal-el::after, .sal-er::after {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    width: 3px;
    left: 4px;
    border-radius: 2px;
    background: transparent;
    transition: background .15s ease;
}
.sal-el:hover::after, .sal-er:hover::after, .sal-el:active::after, .sal-er:active::after { background: #f4a266; }


/* v254 — the board takes the WHOLE page on /tables: full width, full height. */
.sal-area-scroll { height: calc(100vh - 150px); }


/* v255 — back to USABLE: full-width salon sections stacked down the page.
   Title-bar drag + orange line = drop the section anywhere in the list;
   the small corner grip sets each section's height. */
.sal-stack { display: flex; flex-direction: column; gap: 14px; }
.sal-stack .sal {
    position: relative;
    width: auto;
    margin: 0;
    min-height: 140px;
    overflow: auto;
    resize: none;
}
.sal-stack .sal .sal-head { cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.sal-stack .sal .sal-head:active { cursor: grabbing; }
.sal-slotbar-h {
    position: fixed;
    height: 6px;
    border-radius: 4px;
    background: linear-gradient(90deg, #ff8a2a, #f4511e);
    box-shadow: 0 0 0 3px #f4511e2e, 0 6px 18px rgba(244, 81, 30, .4);
    z-index: 9001;
    pointer-events: none;
    animation: qcfade .12s ease;
}


/* v256 — resizing you can actually grab: in the stacked list the grip is the
   WHOLE bottom edge of the section — a sill with a pill in the middle. */
.sal-stack .sal .sal-rs {
    display: block;
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    top: auto;
    width: auto;
    height: 16px;
    border: 0;
    border-radius: 0 0 20px 20px;
    background: linear-gradient(180deg, transparent, rgba(244, 162, 102, .14));
    box-shadow: none;
    cursor: ns-resize;
    touch-action: none;
    z-index: 3;
}
.sal-stack .sal .sal-rs::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 4px;
    transform: translateX(-50%);
    width: 46px;
    height: 5px;
    border-radius: 999px;
    background: #e5d5bf;
    transition: background .15s ease, width .15s ease;
}
.sal-stack .sal .sal-rs:hover::after, .sal-stack .sal .sal-rs:active::after {
    background: #f4a266;
    width: 64px;
}
/* room for the sill under the tables */
.sal-stack .sal .sal-grid { padding-bottom: 14px; }


/* v257 — width lives again: sections sit in a wrapping row, full-width by
   default; pull a side edge to narrow one and the next section joins its row. */
.sal-stack {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}
.sal-stack .sal {
    flex: 1 1 100%;
    min-width: 280px;
    max-width: 100%;
}
.sal-stack .sal .sal-el, .sal-stack .sal .sal-er { top: 46px; bottom: 16px; }
@media (max-width: 700px) {
    /* a phone column keeps full width; height stays adjustable */
    .sal-stack .sal { flex: 1 1 100% !important; width: auto !important; }
    .sal-stack .sal .sal-el, .sal-stack .sal .sal-er { display: none; }
}


/* ============ v258 — THE BOARD, clean ============
   Free panels on a big floor: move by the title bar, stretch by either bottom
   corner. The page is the board; nothing arranges itself. */
.sal-board-scroll {
    overflow: auto;
    border-radius: 22px;
    height: calc(100vh - 150px);
    min-height: 420px;
    background: #f0e9df;
    box-shadow: inset 0 2px 12px rgba(0, 0, 0, .06);
    -webkit-overflow-scrolling: touch;
}
.sal-board {
    position: relative;
    width: 1700px;
    height: 1000px;
    background:
        radial-gradient(rgba(120, 90, 60, .12) 1.2px, transparent 1.4px) 0 0 / 26px 26px,
        linear-gradient(160deg, #faf7f2, #f0e9df);
}
.sal-board .sal {
    position: absolute;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-width: 280px;
    min-height: 140px;
    overflow: hidden;
    resize: none;
}
.sal-board .sal .sal-head {
    flex: none;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.sal-board .sal .sal-head:active { cursor: grabbing; }
.sal-board .sal .sal-grid { flex: 1; overflow-y: auto; align-content: start; padding-bottom: 6px; }

.sal-c {
    position: absolute;
    bottom: 2px;
    width: 22px;
    height: 22px;
    z-index: 3;
    touch-action: none;
    border-radius: 7px;
    background: #fff;
    border: 1.5px solid #f0dcc4;
    box-shadow: 0 2px 8px rgba(70, 45, 20, .12);
}
.sal-c::after {
    content: '';
    position: absolute;
    inset: 5px;
    border-radius: 3px;
    border-bottom: 2.5px solid #f4a266;
}
.sal-c.r { right: 2px; cursor: nwse-resize; }
.sal-c.r::after { border-right: 2.5px solid #f4a266; }
.sal-c.l { left: 2px; cursor: nesw-resize; }
.sal-c.l::after { border-left: 2.5px solid #f4a266; }


/* v259 — no dead margins: the board grows to fill the whole window, so every
   visible centimetre is usable floor. 1700×1000 is only the minimum. */
.sal-board {
    width: max(1700px, 100%);
    height: max(1000px, 100%);
}


/* v260 — mid-drag a panel may cross others; the red dash says "not here yet",
   and the drop slides it onto the nearest free ground. */
.sal-bad { outline: 3px dashed #e53935cc; outline-offset: 3px; }


/* v261 — closed is a badge, not a curtain: closed stores keep their colors
   and stay clickable; only the بسته chip says the state. */
.mf-rest-closed { filter: none; opacity: 1; }
.mf-deal-card.shut { opacity: 1; cursor: pointer; }
.mf-deal-card.shut:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(70, 45, 20, .16); }


/* v262 — the floating basket bar must never sit ON the page's last rows:
   while it is up, the page keeps enough bottom room to scroll past it. */
body:has(.mf-basket-bar) .mud-main-content { padding-bottom: 190px !important; }


/* v263 — the mini-map keeps its pin in the open: the "change location" chip
   stands small in the corner, one line, off the pin. */
.loc-change {
    left: auto;
    inset-inline-end: 8px;
    bottom: 8px;
    transform: none;
    white-space: nowrap;
    font-size: 11.5px;
    padding: 7px 13px;
    backdrop-filter: blur(4px);
}


/* v264 — on a phone the address form IS the screen: full width, full height,
   fields scrolling inside, buttons resting at the bottom. */
@media (max-width: 700px) {
    .mud-dialog.addr-dlg {
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100dvh;
        max-height: 100dvh !important;
        margin: 0 !important;
        border-radius: 0 !important;
        display: flex;
        flex-direction: column;
    }
    .mud-dialog.addr-dlg .mud-dialog-content {
        flex: 1;
        max-height: none !important;
        overflow-y: auto;
    }
    .mud-dialog-container:has(.addr-dlg) { padding: 0 !important; }
}


/* v265 — the map card says what to do: a real labeled button sits on it. */
.loc-cta .loc-open-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    color: #fff;
    border-radius: 999px;
    padding: 11px 24px;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 8px 22px rgba(244, 81, 30, .35);
    margin-top: 10px;
}


/* v266 — ONE breathing button opens the map: full width, orange, alive —
   a soft pulse and a shine that sweeps across every few seconds. */
.loc-open-full {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    border: 0;
    border-radius: 16px;
    padding: 17px 16px;
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    color: #fff;
    font-family: inherit;
    font-weight: 800;
    font-size: 15px;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(244, 81, 30, .32);
    animation: loc-pulse 2.4s ease-in-out infinite;
    transition: transform .15s ease;
}
.loc-open-full:active { transform: scale(.985); }
.loc-open-full::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-18deg);
    animation: loc-shine 2.8s ease-in-out infinite;
}
@keyframes loc-pulse {
    0%, 100% { box-shadow: 0 10px 26px rgba(244, 81, 30, .32); }
    50% { box-shadow: 0 14px 36px rgba(244, 81, 30, .5); }
}
@keyframes loc-shine {
    0%, 55% { inset-inline-start: -60%; }
    85%, 100% { inset-inline-start: 130%; }
}


/* v267 — any button can breathe: the pulse + travelling shine as a coat. */
.btn-breathe {
    position: relative;
    overflow: hidden;
    animation: loc-pulse 2.4s ease-in-out infinite;
}
.btn-breathe::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-18deg);
    animation: loc-shine 2.8s ease-in-out infinite;
    pointer-events: none;
}


/* v268 — the breathing turns VISIBLE: the button swells, the glow blooms,
   the shine is brighter and comes around sooner. */
@keyframes loc-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 8px 22px rgba(244, 81, 30, .30); }
    50% { transform: scale(1.035); box-shadow: 0 18px 46px rgba(244, 81, 30, .55); }
}
@keyframes loc-shine {
    0%, 40% { inset-inline-start: -60%; }
    75%, 100% { inset-inline-start: 140%; }
}
.loc-open-full, .btn-breathe { animation-duration: 1.9s; }
.loc-open-full::after, .btn-breathe::after {
    width: 55%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .6), transparent);
    animation-duration: 2.2s;
}


/* v269 — the map button calms down: normal height, no swelling (nothing may
   lean over the field below) — the life stays in the glow and the shine. */
@keyframes loc-glow {
    0%, 100% { box-shadow: 0 4px 14px rgba(244, 81, 30, .28); }
    50% { box-shadow: 0 8px 26px rgba(244, 81, 30, .5); }
}
.loc-open-full {
    padding: 12px 16px;
    font-size: 14px;
    border-radius: 14px;
    animation: loc-glow 2s ease-in-out infinite;
}
.btn-breathe { animation: loc-glow 2s ease-in-out infinite; }


/* v270 — field titles you can actually read: darker ink, a little weight. */
.mud-input-label-outlined { color: #6b6154 !important; font-weight: 600; }
.mud-input-control:focus-within .mud-input-label-outlined { color: var(--mud-palette-primary) !important; }


/* v271 — the pay button never hides: on a phone it rides FIXED above the nav
   bar, always one thumb away, whatever is scrolled. Desktop keeps it in card. */
@media (max-width: 960px) {
    .co-paybtn {
        position: fixed !important;
        bottom: calc(74px + env(safe-area-inset-bottom));
        left: 12px;
        right: 12px;
        width: auto !important;
        z-index: 1295;
        border-radius: 14px !important;
        box-shadow: 0 10px 28px rgba(46, 125, 50, .45) !important;
    }
    /* the page keeps room so the summary's last rows scroll above the bar */
    body:has(.co-paybtn) .mud-main-content { padding-bottom: 210px !important; }
}


/* v272 — the pay bar floats CLEAR of the bottom nav: a real gap, real corners. */
@media (max-width: 960px) {
    .co-paybtn {
        bottom: calc(96px + env(safe-area-inset-bottom));
        left: 14px;
        right: 14px;
        border-radius: 16px !important;
    }
}


/* v273 — the assistant bubble may hover, but never trap content: pages keep
   scroll room so any row can clear it (checkout keeps its larger reserve). */
@media (max-width: 960px) {
    body:has(.mf-bot-fab):not(:has(.co-paybtn)) .mud-main-content { padding-bottom: 160px !important; }
}


/* v274 — the compact coat: a page that wears .pg-compact speaks a size smaller,
   everywhere — titles, labels, inputs, buttons. */
.pg-compact .mud-typography-h5 { font-size: 1.15rem; }
.pg-compact .mud-typography-h6 { font-size: 1rem; }
.pg-compact .mud-typography-subtitle1 { font-size: .95rem; }
.pg-compact .mud-typography-subtitle2 { font-size: .85rem; }
.pg-compact .mud-typography-body1 { font-size: .85rem; }
.pg-compact .mud-typography-body2 { font-size: .8rem; }
.pg-compact .mud-typography-caption { font-size: .72rem; }
.pg-compact .mud-input { font-size: .85rem; }
.pg-compact .mud-input-label { font-size: .85rem; }
.pg-compact .mud-btn, .pg-compact .mud-button-root { font-size: .8rem; }

/* v275 — the sign-in alternatives become real buttons (thumb targets, not links);
   the emailed code sits last. */
.mf-alt-btn{border-radius:14px !important;min-height:46px;font-weight:700 !important;text-transform:none !important;letter-spacing:0 !important;}

/* v276 - hero partner CTA: glassy pill, breathing glow, shine sweep, nudging arrow */
.mf-partner-cta{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:9px 16px;border-radius:999px;background:rgba(255,255,255,.16);border:1.5px solid rgba(255,255,255,.55);color:#fff !important;font-weight:800;font-size:.85rem;line-height:1.25;text-decoration:none !important;backdrop-filter:blur(6px);position:relative;overflow:hidden;max-width:100%;animation:pcta-breathe 2.6s ease-in-out infinite;}
.mf-partner-cta .ico{font-size:17px;flex:none;}
.mf-partner-cta .tx{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mf-partner-cta .ar{flex:none;font-size:15px;animation:pcta-nudge 1.6s ease-in-out infinite;}
[dir=rtl] .mf-partner-cta .ar{transform:scaleX(-1);}
.mf-partner-cta::after{content:'';position:absolute;top:0;bottom:0;width:46px;left:-70px;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);animation:pcta-shine 3.4s ease-in-out infinite;pointer-events:none;}
.mf-partner-cta:active{transform:scale(.97);}
@keyframes pcta-breathe{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.25);}50%{box-shadow:0 0 18px 2px rgba(255,255,255,.45);}}
@keyframes pcta-shine{0%,55%{left:-70px;}85%,100%{left:130%;}}
@keyframes pcta-nudge{0%,100%{margin-inline-start:0;}50%{margin-inline-start:6px;}}

/* v277 - partner CTA readable: solid white pill, orange text, real shadow */
.mf-partner-cta{background:#fff;border:none;color:#e8551d !important;font-size:.92rem;padding:12px 18px;box-shadow:0 6px 18px rgba(60,20,0,.28);animation:pcta-breathe2 2.6s ease-in-out infinite;}
.mf-partner-cta .ico{font-size:19px;}
.mf-partner-cta .ar{color:#e8551d;font-weight:900;}
.mf-partner-cta::after{background:linear-gradient(105deg,transparent,rgba(255,166,77,.45),transparent);}
@keyframes pcta-breathe2{0%,100%{transform:scale(1);box-shadow:0 6px 18px rgba(60,20,0,.28);}50%{transform:scale(1.035);box-shadow:0 10px 26px rgba(60,20,0,.38);}}

/* v278 - floating partner door: start-side, above the phone nav, gone while ordering */
.mf-partner-fab{position:fixed;z-index:1250;inset-inline-start:14px;bottom:24px;display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:999px;background:#fff;color:#e8551d !important;font-weight:800;font-size:.82rem;text-decoration:none !important;box-shadow:0 6px 18px rgba(60,20,0,.30);border:1px solid #ffd9c4;animation:pcta-breathe2 2.6s ease-in-out infinite;}
.mf-partner-fab .ico{font-size:17px;}
.mf-partner-fab:active{transform:scale(.96);}
@media (max-width:960px){.mf-partner-fab{bottom:calc(84px + env(safe-area-inset-bottom));}}

/* v279 - smart search: fullscreen on phones only; a floating command palette on monitors */
.mf-search-scroll{min-height:260px;height:calc(100dvh - 170px);overflow-y:auto;}
@media (min-width: 961px){
  .mud-dialog-fullscreen.mf-search-dialog{width:720px !important;max-width:92vw;height:min(78vh,720px) !important;max-height:78vh;top:7vh !important;left:50% !important;transform:translateX(-50%);border-radius:24px !important;box-shadow:0 24px 70px rgba(40,15,0,.35);}
  .mf-search-scroll{height:calc(min(78vh,720px) - 150px);}
}

/* v280 - dish card names: two lines maximum, ellipsis after; full name lives in the dialog */
.mf-dish-nm{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word;line-height:1.35;}

/* v281 - partner dashboard: air between every section block */
.db > * + * { margin-top: 16px; }

/* v282 — the splash must never be boxed. A transformed ancestor becomes the
   containing block for position:fixed, and the page-entrance animation
   (.pg-anim) holds a transform for its first 320ms — exactly when a full-page
   loader is on screen. While the splash is present, that animation stands down. */
.pg-anim:has(.mf-loader-page) { animation: none !important; transform: none !important; }
.mf-loader-page { width: 100vw; height: 100vh; height: 100dvh; }

/* v283 — smart search: ONE scrollbar. The dialog body stops scrolling and the
   results list becomes the single scroller, sized by flex instead of hand math
   (the old calc heights overflowed the pane and produced a second bar). */
.mf-search-dialog { display: flex; flex-direction: column; }
.mf-search-dialog .mud-dialog-content { overflow: hidden !important; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.mf-search-scroll { flex: 1 1 auto; height: auto !important; min-height: 0 !important; overflow-y: auto; overscroll-behavior: contain; }
@media (min-width: 961px){ .mf-search-scroll { height: auto !important; } }

/* v284 — dish card: the NAME keeps the room. Next to the ★ chip a clamped box
   collapses to nothing unless it is told to grow and allowed to shrink; the
   chips must never steal that space, and the price must never break in two. */
.mf-menu-item .mf-dish-nm { flex: 1 1 auto; min-width: 0; }
.mf-menu-item .mud-chip { flex: 0 0 auto; }
.mf-dish-price { white-space: nowrap; }

/* v285 — the dish name now owns a full row of the card, so the clamp has real
   width to work with; the ★ chip rides beside the price and wraps if tight. */
.mf-menu-item .mf-dish-nm { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; width: 100%; min-width: 0; word-break: break-word; }
.mf-menu-item .mf-price { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }

/* v286 — the stepper answers the finger immediately: a progress sweep runs under
   it from the moment of the tap until the server's new number lands. */
.mf-qty-inline { position: relative; }
.mf-qty-inline.qty-pending { opacity: .78; }
.mf-qty-inline.qty-pending::after {
    content: ''; position: absolute; left: 6px; right: 6px; bottom: -3px; height: 2px;
    border-radius: 2px; background: rgba(244, 81, 30, .22); overflow: hidden;
}
.mf-qty-inline.qty-pending::before {
    content: ''; position: absolute; bottom: -3px; height: 2px; width: 40%;
    border-radius: 2px; background: #f4511e; z-index: 1;
    animation: qtySweep .7s ease-in-out infinite;
}
@keyframes qtySweep { 0% { left: 6px; } 50% { left: 54%; } 100% { left: 6px; } }

/* v287 — a working bar you cannot miss: it runs across the whole dish card while
   the server confirms the tap, instead of a hairline under the buttons. */
.mf-menu-item { position: relative; overflow: hidden; }
.mf-menu-item.qty-pending::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
    background: rgba(244, 81, 30, .18);
}
.mf-menu-item.qty-pending::before {
    content: ''; position: absolute; bottom: 0; height: 3px; width: 35%;
    background: linear-gradient(90deg, transparent, #f4511e, transparent);
    z-index: 2; animation: qtyRun 1s linear infinite;
}
@keyframes qtyRun { from { left: -35%; } to { left: 100%; } }
.mf-qty-inline.qty-pending { opacity: .85; }

/* v288 — stepper states driven by data-qty, so the browser can switch them the
   instant a finger lands: at 1 the minus is a BIN (one more tap empties it), at
   0 nothing but the + remains — a stepper reading "0" is never shown. */
.mf-qty-inline .qty-bin { display: none; }
.mf-qty-inline[data-qty="1"] .qty-less { display: none; }
.mf-qty-inline[data-qty="1"] .qty-bin { display: inline-flex; }
.mf-qty-inline[data-qty="0"] .qty-less,
.mf-qty-inline[data-qty="0"] .qty-bin,
.mf-qty-inline[data-qty="0"] > b { display: none; }

/* v289 — the dish row ends with a quiet chevron instead of an info button: the
   whole row already opens the dish, so the arrow just says "there is more". */
.mf-dish-go { width: 18px; height: 18px; color: #c9c0b2; flex: 0 0 auto; margin-inline-start: 2px; }
[dir="rtl"] .mf-dish-go { transform: scaleX(-1); }

/* v290 — the arrow is a real button now (the row itself no longer opens the sheet). */
.mf-dish-go { color: #b9b0a2 !important; flex: 0 0 auto; }
.mf-dish-go .mud-icon-root { width: 20px; height: 20px; }
[dir="rtl"] .mf-dish-go .mud-icon-root { transform: scaleX(-1); }

/* v291 — the tapped +/− wears a little spinning ring until the server answers. */
.qty-busy { position: relative; display: inline-flex; }
.qty-busy .mud-icon-root { opacity: .25; }
.qty-busy::after {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 16px; height: 16px; border-radius: 50%;
    border: 2px solid rgba(244, 81, 30, .25); border-top-color: #f4511e;
    animation: mfSpin .6s linear infinite; pointer-events: none;
}

/* v292 — while the little ring spins, that control ignores further taps: one
   tap, one confirmed change, no pile-up of queued clicks. */
.qty-busy { pointer-events: none; }

/* v293 — while confirming, the stepper hides ENTIRELY and one centered ring
   holds its place. No dimmed icons, no half-switched states, no extra taps. */
.mf-qty-inline.qty-wait { position: relative; pointer-events: none; min-width: 72px; min-height: 34px; }
.mf-qty-inline.qty-wait > * { visibility: hidden; }
.mf-qty-inline.qty-wait::after {
    content: ''; position: absolute; inset: 0; margin: auto;
    width: 20px; height: 20px; border-radius: 50%;
    border: 2.5px solid rgba(244, 81, 30, .2); border-top-color: #f4511e;
    animation: mfSpin .6s linear infinite;
}

/* v294 — the same spinner-in-place behaviour for the basket panel's steppers and
   the dish sheet's big one, so every quantity control in the app behaves alike. */
.mf-qty-lg { gap: 18px; }
.mf-qty-lg b { font-size: 1.25rem; min-width: 26px; text-align: center; }
.mf-qty-inline.mf-qty-lg.qty-wait { min-width: 140px; min-height: 48px; }
.mf-qty-inline.mf-qty-lg.qty-wait::after { width: 26px; height: 26px; }

/* v295 — the row arrow was being mirrored TWICE in RTL (once on the button, once
   on the icon inside it), which cancelled out and left it pointing "back".
   Mirror the button only. */
[dir="rtl"] .mf-dish-go { transform: scaleX(-1); }
[dir="rtl"] .mf-dish-go .mud-icon-root { transform: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   v296 — STORE HERO. The old header was a photo with a row of identical grey
   chips: everything looked equally important, so nothing was. This is a photo
   wall, a plate that rides over it carrying identity (mark, name, cuisine,
   score), and three fact tiles for what a hungry customer actually decides on
   — wait, delivery, minimum. Free delivery goes green, because it sells.
   ═══════════════════════════════════════════════════════════════════════════ */
.oo-hero {
    position: relative;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 18px 44px rgba(60, 24, 0, .10), 0 2px 8px rgba(60, 24, 0, .05);
    overflow: hidden;
    animation: mfFadeUp .45s cubic-bezier(.21, .8, .35, 1) both;
}

/* ---- the photo wall ---- */
.oo-hero-shot { position: relative; height: 210px; overflow: hidden; }
@media (max-width: 700px) { .oo-hero-shot { height: 168px; } }
.oo-hero-shot .scrim {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(to top, rgba(28, 12, 0, .58) 0%, rgba(28, 12, 0, .12) 42%, transparent 72%);
}

/* open / closed, glass over the photo */
.oo-hero-state {
    position: absolute; top: 14px; inset-inline-end: 14px; z-index: 2;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 7px 13px; border-radius: 999px;
    font-size: .78rem; font-weight: 800; color: #fff;
    background: rgba(20, 10, 0, .42);
    backdrop-filter: blur(10px) saturate(1.3);
    border: 1px solid rgba(255, 255, 255, .28);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.oo-hero-state i { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.oo-hero-state.on i { background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); animation: heroPulse 1.9s ease-out infinite; }
.oo-hero-state.off i { background: #cbd5e1; }
@keyframes heroPulse { 70% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }

/* ---- the plate: identity, riding over the photo ---- */
.oo-hero-plate {
    position: relative; z-index: 3;
    margin: -34px 20px 0;
    padding: 16px 18px;
    display: flex; align-items: center; gap: 14px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, .7);
    border-radius: 20px;
    box-shadow: 0 12px 30px rgba(60, 24, 0, .13);
}
.oo-hero-plate .mark {
    flex: none; width: 58px; height: 58px; border-radius: 18px;
    display: grid; place-items: center; font-size: 30px; line-height: 1;
    background: linear-gradient(140deg, #FFF2E7, #FFD9BC);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 16px rgba(244, 81, 30, .18);
}
.oo-hero-plate .who { flex: 1 1 auto; min-width: 0; }
.oo-hero-plate .nm {
    margin: 0; font-size: 1.42rem; line-height: 1.25; font-weight: 900; color: #2b1d12;
    letter-spacing: -.2px; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
@media (max-width: 700px) { .oo-hero-plate .nm { font-size: 1.18rem; } .oo-hero-plate .mark { width: 50px; height: 50px; font-size: 26px; } }
.oo-hero-plate .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.oo-hero-plate .tag {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .74rem; font-weight: 700; color: #7a6a58;
    background: #f7f1e9; border-radius: 8px; padding: 3px 9px;
}
.oo-hero-plate .tag .mud-icon-root { width: 13px; height: 13px; }

/* the score reads as a badge, not a sentence */
.oo-hero-plate .score {
    flex: none; text-align: center; padding: 7px 12px; border-radius: 14px;
    background: linear-gradient(140deg, #eafaf0, #d7f5e3);
    border: 1px solid #b9ecd0;
}
.oo-hero-plate .score b { display: block; font-size: 1.1rem; font-weight: 900; color: #1b7a45; line-height: 1; }
.oo-hero-plate .score span { font-size: .66rem; font-weight: 700; color: #43926b; }

/* ---- what the store says about itself ---- */
.oo-hero-about {
    margin: 14px 22px 0; color: #7d7060; font-size: .9rem; line-height: 1.6;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---- the three facts ---- */
.oo-hero-facts {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
    margin: 16px 20px 20px;
}
@media (max-width: 420px) { .oo-hero-facts { gap: 7px; margin-inline: 14px; } }
.oo-hero-facts .fact {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 13px 8px; border-radius: 16px; text-align: center;
    background: linear-gradient(180deg, #fffaf5, #fdf3ea);
    border: 1px solid #f3e7d9;
    transition: transform .18s ease, box-shadow .18s ease;
}
.oo-hero-facts .fact:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(60, 24, 0, .08); }
.oo-hero-facts .ic {
    width: 32px; height: 32px; border-radius: 11px; display: grid; place-items: center;
    background: #fff; box-shadow: 0 2px 8px rgba(60, 24, 0, .08); margin-bottom: 3px;
}
.oo-hero-facts .ic .mud-icon-root { width: 17px; height: 17px; color: #f4511e; }
.oo-hero-facts b { font-size: .92rem; font-weight: 800; color: #2b1d12; white-space: nowrap; }
.oo-hero-facts small { font-size: .68rem; color: #9c8f7e; font-weight: 600; }
@media (max-width: 420px) { .oo-hero-facts b { font-size: .82rem; } .oo-hero-facts small { font-size: .62rem; } }

/* free delivery is the one fact worth shouting about */
.oo-hero-facts .fact.free {
    background: linear-gradient(180deg, #f2fdf6, #e4f9ed);
    border-color: #bfead2;
}
.oo-hero-facts .fact.free b { color: #1b7a45; }
.oo-hero-facts .fact.free .ic .mud-icon-root { color: #22a05e; }

/* ---- closed notice, in the hero's own language ---- */
.oo-hero-closed {
    display: flex; align-items: center; gap: 9px;
    margin: 0 20px 20px; padding: 12px 15px; border-radius: 14px;
    background: linear-gradient(135deg, #fff6e6, #ffeccd);
    border: 1px solid #ffdca8; color: #8a5a12;
    font-size: .86rem; font-weight: 700;
}
.oo-hero-closed .mud-icon-root { width: 18px; height: 18px; color: #d08700; flex: none; }

/* v297 — the fact tiles were oversized: trimmed to a compact strip that informs
   without competing with the menu below it. */
.oo-hero-facts { gap: 8px; margin: 12px 20px 16px; }
.oo-hero-facts .fact { flex-direction: row; justify-content: center; flex-wrap: wrap;
    gap: 3px 7px; padding: 8px 10px; border-radius: 12px; }
.oo-hero-facts .ic { width: 24px; height: 24px; border-radius: 8px; margin-bottom: 0; }
.oo-hero-facts .ic .mud-icon-root { width: 14px; height: 14px; }
.oo-hero-facts b { font-size: .84rem; }
.oo-hero-facts small { font-size: .64rem; width: 100%; line-height: 1.2; }
@media (max-width: 420px) {
    .oo-hero-facts .fact { padding: 7px 6px; }
    .oo-hero-facts b { font-size: .76rem; }
    .oo-hero-facts small { font-size: .58rem; }
    .oo-hero-facts .ic { width: 21px; height: 21px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   v298 — DISH CARD & BASKET SURFACES. Flat white boxes with a hairline grey
   border read as a spreadsheet. These get a warm paper gradient, a soft double
   shadow for real depth, and a hover that lifts the card and warms its edge —
   with the photo gaining its own frame so it reads as a plate, not a sticker.
   ═══════════════════════════════════════════════════════════════════════════ */
.mf-menu-item {
    position: relative;
    border-radius: 18px;
    padding: 12px 14px;
    gap: 13px;
    background: linear-gradient(160deg, #ffffff 0%, #fffaf5 100%);
    border: 1px solid #f0e6da;
    box-shadow: 0 1px 2px rgba(60, 24, 0, .04), 0 6px 18px rgba(60, 24, 0, .05);
    transition: transform .2s cubic-bezier(.21, .8, .35, 1),
                box-shadow .2s ease, border-color .2s ease;
}
.mf-menu-item:hover {
    transform: translateY(-2px);
    border-color: #ffcfae;
    background: linear-gradient(160deg, #ffffff 0%, #fff6ed 100%);
    box-shadow: 0 2px 4px rgba(60, 24, 0, .05), 0 14px 30px rgba(244, 81, 30, .12);
}
/* a warm accent edge that grows in on hover — direction-aware for RTL */
.mf-menu-item::before {
    content: ''; position: absolute; inset-inline-start: 0; top: 18%; bottom: 18%;
    width: 3px; border-radius: 0 3px 3px 0;
    background: linear-gradient(180deg, #ff8a4d, #f4511e);
    opacity: 0; transform: scaleY(.4); transform-origin: center;
    transition: opacity .2s ease, transform .2s ease;
}
[dir="rtl"] .mf-menu-item::before { border-radius: 3px 0 0 3px; }
.mf-menu-item:hover::before { opacity: 1; transform: scaleY(1); }

/* the photo becomes a framed plate */
.mf-menu-item .mf-menu-emoji {
    width: 62px; height: 62px; border-radius: 15px;
    box-shadow: 0 3px 10px rgba(60, 24, 0, .13), inset 0 0 0 1px rgba(255, 255, 255, .55);
    overflow: hidden;
}
.mf-menu-item .mf-menu-emoji img.ph { transition: transform .35s cubic-bezier(.21, .8, .35, 1); }
.mf-menu-item:hover .mf-menu-emoji img.ph { transform: scale(1.07); }

/* the basket becomes a soft floating panel to match */
.mf-cart-panel {
    border-radius: 22px !important;
    background: linear-gradient(180deg, #ffffff 0%, #fffaf4 100%) !important;
    border: 1px solid #f2e8dc;
    box-shadow: 0 18px 40px rgba(60, 24, 0, .10), 0 2px 6px rgba(60, 24, 0, .04) !important;
}

/* v299 — the previous gradient ended at #fffaf5, which is white to the eye.
   Real warmth now: a cream wash with a peach bloom in the leading corner, so
   the card is clearly a surface rather than a hole in the page. */
.mf-menu-item {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 214, 178, .55) 0%, rgba(255, 214, 178, 0) 55%),
        linear-gradient(158deg, #FFFDF9 0%, #FFF0DF 100%) !important;
    border-color: #f3e2ce !important;
}
[dir="rtl"] .mf-menu-item {
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(255, 214, 178, .55) 0%, rgba(255, 214, 178, 0) 55%),
        linear-gradient(202deg, #FFFDF9 0%, #FFF0DF 100%) !important;
}
.mf-menu-item:hover {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(255, 198, 150, .7) 0%, rgba(255, 198, 150, 0) 58%),
        linear-gradient(158deg, #FFFDFA 0%, #FFE8D0 100%) !important;
    border-color: #ffc9a3 !important;
}
[dir="rtl"] .mf-menu-item:hover {
    background:
        radial-gradient(120% 90% at 0% 0%, rgba(255, 198, 150, .7) 0%, rgba(255, 198, 150, 0) 58%),
        linear-gradient(202deg, #FFFDFA 0%, #FFE8D0 100%) !important;
}
/* the plate stays crisp white so the food pops against the warm card */
.mf-menu-item .mf-menu-emoji { background: #fff !important; }

/* basket panel: same family, a touch lighter */
.mf-cart-panel {
    background: linear-gradient(180deg, #FFFDFA 0%, #FFF3E7 100%) !important;
    border-color: #f3e2ce !important;
}

/* v300 — the HERO card itself: the plate was plain white on a white body, so it
   read as a gap in the page. Now warm frosted glass with a peach bloom behind
   the logo, a bright inner rim, and the whole hero on a soft cream ground. */
.oo-hero {
    background: linear-gradient(180deg, #FFFDFA 0%, #FFF4E8 100%);
    border: 1px solid #F3E2CE;
}
.oo-hero-plate {
    background:
        radial-gradient(90% 140% at 88% 0%, rgba(255, 205, 165, .38) 0%, rgba(255, 205, 165, 0) 60%),
        linear-gradient(142deg, rgba(255, 255, 255, .97) 0%, rgba(255, 243, 232, .93) 100%);
    border: 1px solid rgba(255, 232, 212, .95);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 14px 34px rgba(60, 24, 0, .14);
}
[dir="rtl"] .oo-hero-plate {
    background:
        radial-gradient(90% 140% at 12% 0%, rgba(255, 205, 165, .38) 0%, rgba(255, 205, 165, 0) 60%),
        linear-gradient(218deg, rgba(255, 255, 255, .97) 0%, rgba(255, 243, 232, .93) 100%);
}
/* the logo tile gets a real frame instead of floating flat */
.oo-hero-plate .mark {
    border: 1px solid rgba(255, 255, 255, .9);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .95),
        0 8px 20px rgba(244, 81, 30, .22);
}
/* tags pick up the warmth so nothing on the plate is grey */
.oo-hero-plate .tag {
    background: rgba(255, 255, 255, .8);
    border: 1px solid #f6e3d0;
    color: #8a7663;
}

/* v301 — dish cards go back to clean WHITE (the warmth belongs to the hero, not
   to thirty rows of it), and the card-edge progress bar is dropped: it read as a
   stray border. The stepper's own spinner already says "working". */
.mf-menu-item,
[dir="rtl"] .mf-menu-item {
    background: #fff !important;
    border-color: #eee6dc !important;
}
.mf-menu-item:hover,
[dir="rtl"] .mf-menu-item:hover {
    background: #fff !important;
    border-color: #ffc9a3 !important;
}
.mf-menu-item.qty-pending::before,
.mf-menu-item.qty-pending::after { content: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   v302 — HERO, MODERN NEUTRAL. The cream wash cheapened the photo and fought
   the food. Swapped for the surface language modern product UIs use: clean
   near-white, hairline neutral borders, a fine top highlight, and depth carried
   by layered shadow instead of colour. Colour is left to the food and to the
   one thing worth colouring — free delivery.
   ═══════════════════════════════════════════════════════════════════════════ */
.oo-hero {
    background: #fff;
    border: 1px solid rgba(23, 15, 8, .07);
    border-radius: 24px;
    box-shadow:
        0 1px 2px rgba(23, 15, 8, .05),
        0 12px 32px -8px rgba(23, 15, 8, .12);
}

/* the plate: true frosted glass, no tint */
.oo-hero-plate,
[dir="rtl"] .oo-hero-plate {
    background: rgba(255, 255, 255, .86) !important;
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 18px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1),
        0 1px 2px rgba(23, 15, 8, .06),
        0 10px 28px -6px rgba(23, 15, 8, .16);
}
.oo-hero-plate .mark {
    background: linear-gradient(145deg, #FFF4EC, #FFE2CE);
    border: 1px solid rgba(23, 15, 8, .05);
    box-shadow: inset 0 1px 0 #fff, 0 4px 12px -2px rgba(244, 81, 30, .25);
    border-radius: 16px;
}
.oo-hero-plate .tag {
    background: rgba(23, 15, 8, .04);
    border: 1px solid rgba(23, 15, 8, .05);
    color: #6b6154;
    border-radius: 7px;
}

/* facts: neutral cards, hairline borders, colour only where it earns it */
.oo-hero-facts .fact {
    background: #fff;
    border: 1px solid rgba(23, 15, 8, .07);
    box-shadow: 0 1px 2px rgba(23, 15, 8, .04);
    border-radius: 14px;
}
.oo-hero-facts .fact:hover {
    border-color: rgba(23, 15, 8, .12);
    box-shadow: 0 4px 12px -2px rgba(23, 15, 8, .10);
}
.oo-hero-facts .ic {
    background: rgba(244, 81, 30, .07);
    box-shadow: none;
    border-radius: 9px;
}
.oo-hero-facts .fact.free {
    background: rgba(34, 160, 94, .06);
    border-color: rgba(34, 160, 94, .22);
}
.oo-hero-facts .fact.free .ic { background: rgba(34, 160, 94, .12); }

.oo-hero-about { color: #6b6154; }

.oo-hero-closed {
    background: rgba(250, 173, 20, .08);
    border: 1px solid rgba(250, 173, 20, .28);
    color: #8a5a12;
}

/* ═══════════════════════════════════════════════════════════════════════════
   v303 — BASKET PANEL, MODERN NEUTRAL. No tint, no cream: plain white with a
   hairline border and layered shadow, matching the hero. Lines get real
   breathing room and a light separator instead of touching each other; the
   subtotal is set apart as a summary block; the checkout button gets a soft
   brand glow so it is clearly the end of the flow.
   ═══════════════════════════════════════════════════════════════════════════ */
.mf-cart-panel {
    background: #fff !important;
    border: 1px solid rgba(23, 15, 8, .07) !important;
    border-radius: 20px !important;
    box-shadow:
        0 1px 2px rgba(23, 15, 8, .05),
        0 12px 32px -8px rgba(23, 15, 8, .12) !important;
    padding: 18px !important;
}

/* header: quieter, with the cart mark in a soft tile */
.mf-cart-panel > .mud-typography-h6 {
    display: flex; align-items: center; gap: 9px;
    font-size: 1.02rem !important; font-weight: 800 !important; color: #2b1d12;
    letter-spacing: -.2px; margin-bottom: 14px !important;
}
.mf-cart-panel > .mud-typography-h6 .mud-icon-root {
    width: 32px; height: 32px; padding: 7px; border-radius: 10px;
    background: rgba(244, 81, 30, .08); color: #f4511e; vertical-align: middle !important;
}

/* lines: air, a hairline rule between, name over price */
.mf-cart-panel .d-flex.align-center.py-1 {
    padding: 11px 0 !important; gap: 10px !important;
    border-bottom: 1px solid rgba(23, 15, 8, .05);
}
.mf-cart-panel .d-flex.align-center.py-1:last-of-type { border-bottom: 0; }
.mf-cart-panel .d-flex.align-center.py-1 .mud-typography-body2 {
    font-weight: 700; color: #2b1d12; line-height: 1.35;
}
.mf-cart-panel .d-flex.align-center.py-1 .mud-typography-caption {
    color: #9c8f7e; font-weight: 600;
}

/* the stepper reads as one pill control, not three loose buttons */
.mf-cart-panel .mf-qty-inline {
    display: inline-flex; align-items: center; gap: 2px;
    background: #fff; border: 1px solid rgba(23, 15, 8, .09);
    border-radius: 999px; padding: 2px;
    box-shadow: 0 1px 2px rgba(23, 15, 8, .05);
}
.mf-cart-panel .mf-qty-inline b {
    min-width: 22px; text-align: center; font-size: .84rem; font-weight: 800; color: #2b1d12;
}
.mf-cart-panel .mf-qty-inline .mud-icon-button { padding: 5px; }
.mf-cart-panel .mf-qty-inline .mud-icon-root { width: 19px; height: 19px; }

/* subtotal reads as a summary, not another line */
.mf-cart-panel .mud-divider { display: none !important; }
.mf-cart-panel .d-flex.justify-space-between {
    margin-top: 14px !important; padding-top: 14px;
    border-top: 1px dashed rgba(23, 15, 8, .12);
}
.mf-cart-panel .d-flex.justify-space-between .mud-typography-body2:last-child {
    font-weight: 900; color: #2b1d12; font-size: .98rem;
}

/* the way out */
.mf-cart-panel .mud-button-filled {
    border-radius: 14px !important; height: 48px; font-weight: 800 !important;
    letter-spacing: -.1px; margin-top: 14px !important;
    box-shadow: 0 6px 18px -4px rgba(244, 81, 30, .5) !important;
    transition: transform .18s ease, box-shadow .18s ease;
}
.mf-cart-panel .mud-button-filled:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -4px rgba(244, 81, 30, .58) !important;
}

/* v304 — the dish photo is a door, so it wears a handle: a small glass magnifier
   pinned to its corner. Always visible (a phone cannot hover to discover it),
   and it brightens and grows when the card is hovered on a desktop. */
.mf-menu-item .mf-menu-emoji { position: relative; }
.oo-peek {
    position: absolute; inset-block-end: 3px; inset-inline-end: 3px; z-index: 2;
    width: 20px; height: 20px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, .88);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    box-shadow: 0 2px 6px rgba(23, 15, 8, .28);
    transition: transform .2s cubic-bezier(.21, .8, .35, 1), background .2s ease;
    pointer-events: none;
}
.oo-peek .mud-icon-root { width: 13px; height: 13px; color: #f4511e; }
.mf-menu-item:hover .oo-peek { transform: scale(1.12); background: #fff; }
.mf-menu-item .mf-menu-emoji:active .oo-peek { transform: scale(.92); }

/* v305 — a real store logo. In the customer hero it fills the mark tile edge to
   edge; in partner settings it gets a preview plate beside the upload controls. */
.oo-hero-plate .mark.has-logo { background: #fff; padding: 0; overflow: hidden; }
.oo-hero-plate .mark img { width: 100%; height: 100%; object-fit: cover; display: block; }

.oo-logo-row { display: flex; align-items: center; gap: 14px; }
.oo-logo-row .shot {
    flex: none; width: 74px; height: 74px; border-radius: 18px; overflow: hidden;
    display: grid; place-items: center; font-size: 34px;
    background: linear-gradient(145deg, #FFF4EC, #FFE2CE);
    border: 1px solid rgba(23, 15, 8, .06);
    box-shadow: inset 0 1px 0 #fff, 0 4px 12px -2px rgba(244, 81, 30, .22);
}
.oo-logo-row .shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.oo-logo-row .tx { min-width: 0; }
.oo-logo-row .tx b { display: block; font-weight: 800; color: #2b1d12; font-size: .95rem; }
.oo-logo-row .tx small { color: #9c8f7e; font-size: .76rem; line-height: 1.4; display: block; }

/* v306 — the map button stops breathing inside partner settings. Pulsing is for
   a call to action a customer might miss; on a settings form it is just noise. */
.loc-pick .loc-open-full { animation: none !important; }
.loc-pick .loc-open-full::after { content: none !important; }

/* v307 — a real logo deserves room: the mark tile grows, and an uploaded image
   is CONTAINED rather than cropped, so the shop's name inside it stays whole. */
.oo-hero-plate .mark { width: 86px; height: 86px; border-radius: 22px; font-size: 40px; }
@media (max-width: 700px) { .oo-hero-plate .mark { width: 70px; height: 70px; border-radius: 18px; font-size: 32px; } }
.oo-hero-plate .mark.has-logo { padding: 5px; background: #fff; }
.oo-hero-plate .mark.has-logo img { object-fit: contain; border-radius: 14px; }

/* partner settings preview follows the same rule */
.oo-logo-row .shot { width: 88px; height: 88px; }
.oo-logo-row .shot img { object-fit: contain; padding: 5px; background: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   v308 — ADDRESS DIALOG. It had a shouting animated banner welded to a stack of
   cramped inputs. Now: a calm map row that states what it is and why, real
   breathing room before the detail fields, street and building side by side,
   and a footer where the primary action is obvious.
   ═══════════════════════════════════════════════════════════════════════════ */
.addr-modern .mud-dialog-content { padding: 18px 20px 8px !important; }

/* the map row — a card, not a billboard */
.addr-map { margin-bottom: 22px; }
.addr-map-empty {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; border-radius: 16px; cursor: pointer; text-align: start;
    background: #fff;
    border: 1.5px dashed rgba(244, 81, 30, .4);
    transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.addr-map-empty:hover { background: rgba(244, 81, 30, .04); border-color: #f4511e; }
.addr-map-empty:active { transform: scale(.99); }
.addr-map-empty .ic {
    flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
    background: rgba(244, 81, 30, .09);
}
.addr-map-empty .ic .mud-icon-root { width: 21px; height: 21px; color: #f4511e; }
.addr-map-empty .tx { flex: 1 1 auto; min-width: 0; }
.addr-map-empty .tx b { display: block; font-size: .95rem; font-weight: 800; color: #2b1d12; }
.addr-map-empty .tx small { display: block; font-size: .75rem; color: #9c8f7e; line-height: 1.4; margin-top: 1px; }
.addr-map-empty .go { width: 20px; height: 20px; color: #c9c0b2; flex: none; }
[dir="rtl"] .addr-map-empty .go { transform: scaleX(-1); }

/* once a pin exists, the mini-map keeps the same rhythm */
.addr-map .loc-wrap { margin-bottom: 0; }

/* the optional detail, with air between every row */
.addr-fields { display: flex; flex-direction: column; gap: 14px; }
.addr-fields .pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 460px) { .addr-fields .pair { grid-template-columns: 1fr; gap: 14px; } }
.addr-modern .mud-input-outlined .mud-input-slot { border-radius: 12px; }

/* errors speak in the dialog's own voice */
.addr-err {
    display: flex; align-items: center; gap: 8px; margin-top: 14px;
    padding: 11px 14px; border-radius: 12px;
    background: rgba(211, 47, 47, .07); border: 1px solid rgba(211, 47, 47, .22);
    color: #b3261e; font-size: .84rem; font-weight: 700;
}
.addr-err .mud-icon-root { width: 18px; height: 18px; flex: none; }

/* footer: the way forward is unmistakable */
.addr-modern .mud-dialog-actions { padding: 14px 20px 18px !important; gap: 10px; }
.addr-modern .addr-cancel { color: #8a7f70 !important; font-weight: 700 !important; }
.addr-modern .addr-save {
    border-radius: 13px !important; height: 44px; padding-inline: 22px !important;
    font-weight: 800 !important;
    box-shadow: 0 6px 18px -4px rgba(244, 81, 30, .5) !important;
}

/* v309 — a shop that uploaded a logo is recognised by it everywhere it is listed:
   search hits and the "order again" row, not only on its own page. */
.mf-hit-emoji.has-logo { background: #fff !important; padding: 3px; overflow: hidden; }
.mf-hit-emoji.has-logo img,
.mf-again-chip .em.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 8px; }
.mf-again-chip .em.has-logo { background: #fff; padding: 3px; overflow: hidden; }

/* v310 — the partner portal wears the shop's own logo: in the app bar, in the
   business switcher, and on the "which business?" gate. */
.mf-brand-mark.has-logo { background: #fff !important; padding: 2px; overflow: hidden; }
.mf-brand-mark.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 7px; }

.oo-switch-row { display: inline-flex; align-items: center; gap: 9px; }
.oo-switch-row .lg {
    width: 26px; height: 26px; border-radius: 8px; object-fit: contain;
    background: #fff; border: 1px solid rgba(23, 15, 8, .08); padding: 1px;
}
.oo-switch-row .em { font-size: 18px; width: 26px; text-align: center; }

.oo-store-tile .logo.has-logo { background: #fff; padding: 3px; overflow: hidden; }
.oo-store-tile .logo.has-logo img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 9px; }

/* ═══════════════════════════════════════════════════════════════════════════
   v311 — three fixes reported together.

   1. DIRECTION. An arrow means "forward", and forward is LEFT in Arabic and
      Persian. Anything tagged oo-dir mirrors itself under [dir=rtl] — the
      checkout arrow, the search-result chevrons, the address-card chevron.
   2. The sign-in button's icon was inheriting near-black on an orange pill.
   3. The open/closed switch read as a black dot: it now carries the brand
      colours, green for trading and grey for shut, with a bolder label.
   ═══════════════════════════════════════════════════════════════════════════ */
[dir="rtl"] .oo-dir,
[dir="rtl"] .oo-dir .mud-icon-root { transform: scaleX(-1); }

/* the CTA arrow inside buttons (End icon) — mirrored, never doubled */
[dir="rtl"] .mud-button-root .mud-button-icon-end .mud-icon-root { transform: scaleX(-1); }
/* row chevrons in the search sheet */
[dir="rtl"] .mf-search-hit > .mud-icon-root { transform: scaleX(-1); }

/* 2. sign-in button: white on orange, icon included */
.mf-signin-btn .mud-icon-root, .mf-signin-btn { color: #fff !important; }

/* 3. the open/closed switch */
.mud-switch .mud-switch-track { background: #d9d2c7 !important; opacity: 1 !important; }
.mud-switch .mud-switch-thumb, .mud-switch .mud-switch-thumb .mud-icon-button {
    color: #fff !important; background: #fff !important;
    box-shadow: 0 1px 4px rgba(23, 15, 8, .35) !important;
}
.mud-switch.mud-checked .mud-switch-track { background: #22a05e !important; }
.mud-switch .mud-switch-label { font-weight: 800 !important; color: #2b1d12 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   v312 — ADMIN INSIGHTS. A dark mission-control hero carrying the five numbers
   that matter and an hourly rhythm, then light cards: what people searched,
   what came back EMPTY (the money list), the live search feed, the pages that
   draw attention, and a visit table with address and exact time.
   ═══════════════════════════════════════════════════════════════════════════ */
.in-hero {
    position: relative; overflow: hidden;
    border-radius: 24px; padding: 22px 24px 18px; margin-bottom: 18px;
    background: linear-gradient(135deg, #241708 0%, #3a2110 45%, #52260c 100%);
    box-shadow: 0 20px 48px -12px rgba(30, 15, 0, .5);
}
.in-hero-glow {
    position: absolute; inset-inline-end: -80px; top: -120px; width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(255, 122, 26, .5), transparent 62%);
    filter: blur(8px); pointer-events: none;
}
.in-hero-top { position: relative; display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.in-hero-top h1 { margin: 6px 0 2px; font-size: 1.55rem; font-weight: 900; color: #fff; letter-spacing: -.3px; }
.in-hero-top p { margin: 0; color: rgba(255, 255, 255, .68); font-size: .87rem; }
.in-live {
    display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 999px;
    background: rgba(76, 222, 128, .16); border: 1px solid rgba(76, 222, 128, .32);
    color: #86efac; font-size: .7rem; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
}
.in-live i { width: 7px; height: 7px; border-radius: 50%; background: #4ade80; animation: heroPulse 1.9s ease-out infinite; }

.in-picks { margin-inline-start: auto; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.in-range { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, .1); }
.in-range button {
    border: 0; background: transparent; color: rgba(255, 255, 255, .72); cursor: pointer;
    padding: 6px 13px; border-radius: 999px; font-size: .78rem; font-weight: 700;
    transition: background .18s ease, color .18s ease;
}
.in-range button:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.in-range button.on { background: #fff; color: #2b1d12; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }

.in-kpis { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 18px; }
@media (max-width: 900px) { .in-kpis { grid-template-columns: repeat(2, 1fr); } }
.in-kpi {
    display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 15px;
    background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .1);
}
.in-kpi .ic { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: none; }
.in-kpi .ic .mud-icon-root { width: 18px; height: 18px; color: #ffb27a; }
.in-kpi b { display: block; font-size: 1.32rem; font-weight: 900; color: #fff; line-height: 1.1; }
.in-kpi small { font-size: .7rem; color: rgba(255, 255, 255, .6); font-weight: 600; }
.in-kpi.warn { background: rgba(239, 68, 68, .16); border-color: rgba(239, 68, 68, .34); }
.in-kpi.warn .ic .mud-icon-root { color: #fca5a5; }

.in-hours { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 54px; margin-top: 16px; }
.in-hours .bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.in-hours .bar span {
    width: 100%; border-radius: 4px 4px 0 0; min-height: 3px;
    background: linear-gradient(180deg, #ff9a4d, #f4511e);
}
.in-hours .bar i { font-size: .55rem; color: rgba(255, 255, 255, .45); font-style: normal; margin-top: 3px; }

/* ---- light cards ---- */
.in-card {
    background: #fff; border: 1px solid rgba(23, 15, 8, .07); border-radius: 20px; padding: 18px;
    box-shadow: 0 1px 2px rgba(23, 15, 8, .04), 0 10px 26px -10px rgba(23, 15, 8, .14);
    height: 100%;
}
.in-card .hd { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.in-card .hd .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: none; }
.in-card .hd .ic.orange { background: rgba(244, 81, 30, .1); } .in-card .hd .ic.orange .mud-icon-root { color: #f4511e; }
.in-card .hd .ic.red { background: rgba(211, 47, 47, .1); } .in-card .hd .ic.red .mud-icon-root { color: #d32f2f; }
.in-card .hd .ic.blue { background: rgba(30, 136, 229, .1); } .in-card .hd .ic.blue .mud-icon-root { color: #1e88e5; }
.in-card .hd .ic.green { background: rgba(34, 160, 94, .1); } .in-card .hd .ic.green .mud-icon-root { color: #22a05e; }
.in-card .hd .ic.purple { background: rgba(142, 68, 173, .1); } .in-card .hd .ic.purple .mud-icon-root { color: #8e44ad; }
.in-card .hd b { display: block; font-size: 1rem; font-weight: 800; color: #2b1d12; }
.in-card .hd small { font-size: .74rem; color: #9c8f7e; }

.in-term { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(23, 15, 8, .05); }
.in-term:last-child { border-bottom: 0; }
.in-term .tx { flex: 1 1 auto; min-width: 0; }
.in-term .tx b { display: block; font-size: .87rem; font-weight: 700; color: #2b1d12; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-term .meter { display: block; height: 5px; border-radius: 3px; background: rgba(23, 15, 8, .06); margin-top: 5px; overflow: hidden; }
.in-term .meter i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #ff9a4d, #f4511e); }
.in-term .meter i.g { background: linear-gradient(90deg, #4ade80, #22a05e); }
.in-term .nums { text-align: end; flex: none; }
.in-term .cnt { font-size: .95rem; font-weight: 900; color: #2b1d12; }
.in-term .sub, .in-term .zero { display: block; font-size: .66rem; font-weight: 700; }
.in-term .sub { color: #9c8f7e; }
.in-term .zero { color: #d32f2f; }

.in-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.in-chip-zero {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 999px;
    background: rgba(211, 47, 47, .07); border: 1px solid rgba(211, 47, 47, .2);
    color: #b3261e; font-size: .82rem; font-weight: 700;
}
.in-chip-zero b { background: rgba(211, 47, 47, .14); border-radius: 999px; padding: 1px 7px; font-size: .72rem; }

.in-rows { display: flex; flex-direction: column; }
.in-row { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid rgba(23, 15, 8, .05); }
.in-row:last-child { border-bottom: 0; }
.in-row .who {
    width: 32px; height: 32px; border-radius: 11px; flex: none; display: grid; place-items: center;
    background: linear-gradient(135deg, #FF5A00, #FF9A5C); color: #fff; font-weight: 800; font-size: .85rem;
}
.in-row .who.guest { background: rgba(23, 15, 8, .12); color: #6b6154; }
.in-row .mid { flex: 1 1 auto; min-width: 0; }
.in-row .mid b { display: block; font-size: .87rem; color: #2b1d12; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-row .mid small { font-size: .7rem; color: #9c8f7e; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.in-row .mid .ip, .in-row .mid .loc {
    background: rgba(23, 15, 8, .05); border-radius: 5px; padding: 1px 5px; font-size: .64rem; direction: ltr;
}
.in-row .end { text-align: end; flex: none; }
.in-row .res { display: block; font-size: .82rem; font-weight: 800; color: #22a05e; }
.in-row .res.none { color: #d32f2f; }
.in-row time { font-size: .66rem; color: #9c8f7e; }

.in-empty { padding: 22px 8px; text-align: center; color: #9c8f7e; font-size: .85rem; }
.in-empty.in-good { color: #22a05e; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 7px; }

.in-table-wrap { overflow-x: auto; }
.in-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.in-table th {
    text-align: start; padding: 9px 10px; font-size: .68rem; text-transform: uppercase; letter-spacing: .5px;
    color: #9c8f7e; font-weight: 800; border-bottom: 1px solid rgba(23, 15, 8, .08); white-space: nowrap;
}
.in-table td { padding: 10px; border-bottom: 1px solid rgba(23, 15, 8, .04); color: #4a4038; }
.in-table tr:last-child td { border-bottom: 0; }
.in-table tbody tr:hover { background: rgba(244, 81, 30, .03); }
.in-table .cell-user { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: #2b1d12; }
.in-table .cell-user .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.in-table .cell-role { font-size: .72rem; color: #6b6154; background: rgba(23, 15, 8, .05); border-radius: 6px; padding: 2px 7px; }
.in-table .cell-ip { color: #6b6154; font-size: .78rem; }
.in-table .cell-time { color: #6b6154; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* v313 — BUSINESS GATE. The logo box was sized only by its emoji's font-size, so
   a real image had nothing to fill and stretched across the whole row. It is a
   fixed square now, and the gate got the same modern surface as the rest. */
.oo-store-tile .logo {
    flex: 0 0 auto; width: 56px; height: 56px;
    display: grid; place-items: center; font-size: 26px; line-height: 1;
    border-radius: 14px; background: #faf6f1; overflow: hidden;
}
.oo-store-tile .logo.has-logo {
    background: #fff; padding: 4px;
    border: 1px solid rgba(23, 15, 8, .07);
    box-shadow: inset 0 1px 0 #fff;
}
.oo-store-tile .logo.has-logo img {
    width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 10px;
}
.oo-storegate-card { border-radius: 22px !important; box-shadow: 0 24px 60px -16px rgba(23, 15, 8, .35) !important; }
.oo-store-tile {
    border-radius: 16px; border-color: rgba(23, 15, 8, .08);
    transition: border-color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.oo-store-tile:hover { box-shadow: 0 6px 18px -6px rgba(244, 81, 30, .35); }
.oo-store-tile.on { background: #FFF7F1; box-shadow: 0 0 0 3px rgba(244, 81, 30, .12); }
.oo-store-tile .tx b { color: #2b1d12; }

/* v314 — POS ENDINGS. A ticket ends one of two ways, so it gets two buttons.
   A checkbox that silently re-aimed one green button left cashiers guessing
   whether they were parking the table or taking the money. */
.pos-endings { display: grid; grid-template-columns: 1fr 1.25fr; gap: 10px; margin-top: 10px; }
.pos-end {
    display: flex; align-items: center; gap: 10px; cursor: pointer; text-align: start;
    padding: 13px 14px; border-radius: 15px; border: 1.5px solid transparent;
    transition: transform .15s ease, box-shadow .18s ease, background .18s ease;
}
.pos-end:active { transform: scale(.98); }
.pos-end:disabled { opacity: .55; cursor: wait; }
.pos-end .mud-icon-root { width: 22px; height: 22px; flex: none; }
.pos-end span { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.pos-end b { font-size: .92rem; font-weight: 800; }
.pos-end i { font-style: normal; font-size: .72rem; opacity: .8; }

/* park it: quiet, secondary */
.pos-end.keep { background: #fff; border-color: rgba(23, 15, 8, .14); color: #4a4038; }
.pos-end.keep:hover { background: #faf6f1; border-color: rgba(23, 15, 8, .24); }
.pos-end.keep .mud-icon-root { color: #6b6154; }

/* take the money: the loud one */
.pos-end.pay {
    background: linear-gradient(135deg, #22a05e, #16794a); color: #fff;
    box-shadow: 0 8px 20px -6px rgba(22, 121, 74, .55);
}
.pos-end.pay:hover { box-shadow: 0 12px 26px -6px rgba(22, 121, 74, .65); }
.pos-end.pay .mud-icon-root { color: #fff; }
.pos-end.pay i { opacity: .92; font-weight: 700; }
@media (max-width: 420px) { .pos-endings { grid-template-columns: 1fr; } }

/* v315 — POS endings, tightened: one short label per button, smaller type, equal
   halves. The bill above already states the total, so the button need not. */
.pos-endings { grid-template-columns: 1fr 1fr; gap: 8px; }
.pos-end { padding: 11px 12px; gap: 8px; justify-content: center; border-radius: 13px; }
.pos-end .mud-icon-root { width: 18px; height: 18px; }
.pos-end b { font-size: .82rem; font-weight: 800; white-space: nowrap; }
.pos-end i { display: none; }
@media (max-width: 480px) { .pos-end b { font-size: .76rem; } }

/* ═══════════════════════════════════════════════════════════════════════════
   v316 — THE SHOP'S OWN DELIVERY RUN. One card per order carrying only what a
   person about to drive needs: where, who, how much, and four actions. The
   live-sharing banner is deliberately loud — a phone broadcasting its position
   must never do so unnoticed.
   ═══════════════════════════════════════════════════════════════════════════ */
.dv-live {
    display: flex; align-items: center; gap: 12px; margin-bottom: 16px;
    padding: 12px 16px; border-radius: 16px;
    background: linear-gradient(135deg, #1b7a45, #22a05e); color: #fff;
    box-shadow: 0 10px 26px -8px rgba(22, 121, 74, .55);
}
.dv-live .dot { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: heroPulse 1.6s ease-out infinite; flex: none; }
.dv-live div { flex: 1 1 auto; min-width: 0; }
.dv-live b { display: block; font-size: .92rem; font-weight: 800; }
.dv-live small { font-size: .74rem; opacity: .88; }

.dv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.dv-card {
    background: #fff; border: 1px solid rgba(23, 15, 8, .08); border-radius: 18px; padding: 15px;
    box-shadow: 0 1px 2px rgba(23, 15, 8, .04), 0 10px 24px -12px rgba(23, 15, 8, .16);
    display: flex; flex-direction: column; gap: 10px;
}
.dv-card.out { border-color: rgba(34, 160, 94, .35); box-shadow: 0 0 0 3px rgba(34, 160, 94, .08); }
.dv-card .hd { display: flex; align-items: center; gap: 8px; }
.dv-card .no { font-weight: 900; color: #2b1d12; font-size: .95rem; }
.dv-card .st { font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: rgba(23,15,8,.06); color: #6b6154; }
.dv-card .st.prep { background: rgba(244, 81, 30, .1); color: #d84315; }
.dv-card .st.ready { background: rgba(250, 173, 20, .14); color: #a86400; }
.dv-card .st.way { background: rgba(34, 160, 94, .12); color: #1b7a45; }
.dv-card .tm { margin-inline-start: auto; font-size: .74rem; color: #9c8f7e; font-variant-numeric: tabular-nums; }
.dv-card .who b { font-size: .92rem; color: #2b1d12; }
.dv-card .who .tel { display: block; font-size: .8rem; color: #f4511e; text-decoration: none; }
.dv-card .addr { display: flex; gap: 7px; font-size: .84rem; color: #4a4038; line-height: 1.45; }
.dv-card .addr .mud-icon-root { width: 17px; height: 17px; color: #f4511e; flex: none; margin-top: 1px; }
.dv-card .meta { display: flex; align-items: center; gap: 10px; font-size: .8rem; color: #6b6154; }
.dv-card .meta b { color: #2b1d12; font-size: .9rem; }
.dv-card .meta .pay { margin-inline-start: auto; background: rgba(23,15,8,.05); border-radius: 6px; padding: 2px 8px; font-size: .72rem; }
.dv-card .courier {
    display: flex; align-items: center; gap: 8px; font-size: .82rem; color: #1b7a45;
    background: rgba(34, 160, 94, .08); border-radius: 10px; padding: 7px 10px;
}
.dv-card .courier .mud-icon-root { width: 17px; height: 17px; }

.dv-card .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 2px; }
.dv-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
    padding: 9px 10px; border-radius: 11px; border: 1px solid transparent;
    font-size: .78rem; font-weight: 800; text-decoration: none;
    transition: transform .14s ease, box-shadow .16s ease, background .16s ease;
}
.dv-btn:active { transform: scale(.97); }
.dv-btn .mud-icon-root { width: 16px; height: 16px; }
.dv-btn.ghost { background: #fff; border-color: rgba(23, 15, 8, .14); color: #4a4038; }
.dv-btn.ghost:hover { background: #faf6f1; }
.dv-btn.share { background: rgba(30, 136, 229, .1); color: #1565c0; }
.dv-btn.share:hover { background: rgba(30, 136, 229, .16); }
.dv-btn.live { background: linear-gradient(135deg, #1b7a45, #22a05e); color: #fff; }
.dv-btn.done { background: #2b1d12; color: #fff; }
.dv-btn.done:hover { box-shadow: 0 6px 16px -6px rgba(43, 29, 18, .6); }
.dv-btn:disabled { opacity: .5; cursor: wait; }

.dv-staff { display: flex; flex-wrap: wrap; gap: 7px; }
.dv-staff button {
    border: 1px solid rgba(23, 15, 8, .12); background: #fff; cursor: pointer;
    border-radius: 999px; padding: 6px 13px; font-size: .8rem; font-weight: 700; color: #4a4038;
}
.dv-staff button.on { background: #f4511e; border-color: #f4511e; color: #fff; }

/* ===== v317: modern live-orders board (partner) ===== */
.ob-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 18px;
}
.ob-search{
  display:flex; align-items:center; gap:8px; flex:1 1 240px; min-width:200px; max-width:420px;
  background:#fff; border:1.5px solid #ece5dc; border-radius:14px; padding:9px 14px;
  transition:border-color .15s, box-shadow .15s;
}
.ob-search:focus-within{ border-color:#f4511e; box-shadow:0 0 0 3px rgba(244,81,30,.12); }
.ob-search .mud-icon-root{ color:#8a7f70; }
.ob-search input{
  border:0; outline:0; background:transparent; flex:1; font-size:.95rem; color:#241c15;
  font-family:inherit;
}
.ob-search-x{
  border:0; background:#f1ece5; color:#8a7f70; width:22px; height:22px; border-radius:50%;
  cursor:pointer; font-size:.7rem; line-height:1; display:grid; place-items:center;
}
.ob-filter-btn{
  display:inline-flex; align-items:center; gap:7px; background:#fff; border:1.5px solid #ece5dc;
  border-radius:14px; padding:9px 16px; font-weight:700; font-size:.9rem; color:#241c15;
  cursor:pointer; position:relative; transition:all .15s;
}
.ob-filter-btn:hover{ border-color:#d9cfc2; }
.ob-filter-btn.on{ background:#fff3ec; border-color:#f4511e; color:#c4471a; }
.ob-filter-badge{
  background:#f4511e; color:#fff; border-radius:999px; font-size:.68rem; font-weight:800;
  min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center;
}
.ob-clear-btn{
  display:inline-flex; align-items:center; gap:5px; background:transparent; border:0;
  color:#c62828; font-weight:700; font-size:.85rem; cursor:pointer; padding:8px 6px;
}

/* column */
.ob-col{
  background:#faf7f2; border:1.5px solid #efe7dc; border-radius:20px; padding:12px;
  min-height:220px; height:100%;
}
.ob-col-head{
  display:flex; align-items:center; gap:9px; padding:6px 8px 12px;
}
.ob-col-dot{ width:9px; height:9px; border-radius:50%; }
.ob-col-title{ font-weight:800; font-size:1.02rem; color:#241c15; flex:1; }
.ob-col-count{
  background:#fff; border:1.5px solid #efe7dc; border-radius:999px; min-width:26px; height:26px;
  padding:0 8px; display:grid; place-items:center; font-weight:800; font-size:.8rem; color:#241c15;
}
.ob-new  .ob-col-dot,.ob-col-head.ob-new  .ob-col-dot{ background:#f59e0b; }
.ob-cook .ob-col-dot,.ob-col-head.ob-cook .ob-col-dot{ background:#3b82f6; }
.ob-out  .ob-col-dot,.ob-col-head.ob-out  .ob-col-dot{ background:#f4511e; }

.ob-col-empty{
  display:flex; flex-direction:column; align-items:center; gap:6px; color:#b3a693;
  padding:34px 0; font-size:.85rem;
}
.ob-col-empty span:first-child{ font-size:1.6rem; }

/* card */
.ob-card{
  background:#fff; border:1px solid #efe7dc; border-radius:16px; padding:14px;
  margin-bottom:12px; box-shadow:0 3px 14px rgba(90,70,50,.06);
  border-inline-start:4px solid #ddd; transition:box-shadow .15s, transform .12s;
}
.ob-card:hover{ box-shadow:0 6px 20px rgba(90,70,50,.11); transform:translateY(-1px); }
.ob-card.ob-new{  border-inline-start-color:#f59e0b; }
.ob-card.ob-cook{ border-inline-start-color:#3b82f6; }
.ob-card.ob-out{  border-inline-start-color:#f4511e; }

.ob-card-top{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.ob-card-num{ font-weight:800; font-size:.95rem; color:#241c15; flex:1; letter-spacing:.2px; }
.ob-card-time{ font-size:.72rem; color:#a99e8d; font-weight:600; }
.ob-tag{
  font-size:.68rem; font-weight:800; border-radius:8px; padding:2px 7px; white-space:nowrap;
}
.ob-tag.dine{ background:#eef5ff; color:#2563eb; }
.ob-tag.pick{ background:#fff1e8; color:#c4471a; }
.ob-tag.sched{ background:#f3e8ff; color:#7c3aed; }

.ob-card-cust{ display:flex; align-items:center; gap:8px; margin-top:4px; }
.ob-card-name{ font-size:.8rem; color:#5a5145; font-weight:600; flex:1;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ob-card-pay{ font-size:.7rem; color:#8a7f70; }

.ob-card-items{
  margin:10px 0; padding:10px 0; border-top:1px dashed #ece5dc; border-bottom:1px dashed #ece5dc;
  display:flex; flex-direction:column; gap:5px;
}
.ob-line{ display:flex; align-items:center; gap:9px; }
.ob-qty{
  background:#241c15; color:#fff; border-radius:7px; min-width:22px; height:22px; padding:0 5px;
  display:grid; place-items:center; font-weight:800; font-size:.72rem; flex:none;
}
.ob-item-name{ font-size:.86rem; color:#2b2118; font-weight:600; }
.ob-note{ font-size:.72rem; color:#c98a00; padding-inline-start:31px; }
.ob-order-note{
  background:#eef5ff; color:#1e5bbf; border-radius:10px; padding:7px 10px; font-size:.76rem;
  margin-bottom:10px;
}

.ob-card-foot{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ob-total{ font-weight:800; font-size:1.02rem; color:#241c15; flex:1; }
.ob-actions{ display:inline-flex; gap:6px; flex-wrap:wrap; }

/* filter dialog */
.ob-fd-title{ display:flex; align-items:center; gap:9px; font-weight:800; }
.ob-fd-title .mud-icon-root{ color:#f4511e; }
.ob-fd-body{ display:flex; flex-direction:column; gap:18px; padding-top:6px; min-width:280px; }
.ob-fd-group{ display:flex; flex-direction:column; gap:9px; }
.ob-fd-label{ font-weight:800; font-size:.8rem; color:#8a7f70; text-transform:uppercase; letter-spacing:.4px; }
.ob-fd-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.ob-fd-chip{
  display:inline-flex; align-items:center; gap:6px; background:#faf7f2; border:1.5px solid #ece5dc;
  border-radius:12px; padding:8px 14px; font-weight:700; font-size:.86rem; color:#4a4038; cursor:pointer;
  transition:all .13s;
}
.ob-fd-chip:hover{ border-color:#d9cfc2; }
.ob-fd-chip.on{ background:#f4511e; border-color:#f4511e; color:#fff; }
.ob-fd-chip .e{ font-size:.95rem; }

/* ===== v318: board becomes a horizontal kanban on small screens ===== */
.ob-board{
  display:flex; gap:16px; align-items:flex-start;
  overflow-x:auto; overflow-y:visible; padding-bottom:10px;
  scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch;
}
.ob-board-col{
  flex:1 1 300px;          /* grow to fill a wide screen… */
  min-width:288px;         /* …but never crush below a readable width → scroll */
  max-width:520px;
  scroll-snap-align:start;
}
/* thin, unobtrusive horizontal scrollbar */
.ob-board::-webkit-scrollbar{ height:8px; }
.ob-board::-webkit-scrollbar-thumb{ background:#e0d5c7; border-radius:8px; }
.ob-board::-webkit-scrollbar-track{ background:transparent; }

/* keep the action buttons tidy inside a narrow column */
.ob-actions .mud-button-root{ min-width:0; }

/* ===== v319: live orders as one table ===== */
.ob-table .obt-num{ font-weight:800; color:#241c15; }
.ob-table .obt-name{ font-weight:600; color:#2b2118; }
.ob-table .obt-sub{ font-size:.72rem; color:#a99e8d; }
.ob-table .obt-total{ font-weight:800; color:#241c15; }
.ob-table .obt-items{ display:flex; flex-direction:column; gap:4px; padding:6px 0; }
.ob-table .obt-actions{ display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.ob-table td{ vertical-align:top; padding-top:10px; padding-bottom:10px; }

/* ===== v321: status dropdown in the orders toolbar ===== */
.ob-stage-select{ min-width:210px; }
.ob-stage-select .mud-input-control{ margin:0; }
.ob-stage-select .mud-input.mud-input-outlined{
  background:#fff; border-radius:14px;
}
.ob-stage-select .mud-input-outlined .mud-input-outlined-border{ border-color:#ece5dc; }


/* ===== v323: premium order-rating dialog ===== */
.rv-dialog .mud-dialog{ border-radius:26px; overflow:hidden; }
.rv-dialog .mud-dialog-content{ padding:0; overflow:visible; }

.rv-hero{
  position:relative; text-align:center; padding:26px 24px 22px;
  background:radial-gradient(120% 90% at 50% -10%, #fff3ec 0%, #ffe7d8 45%, #ffdcc7 100%);
}
.rv-x{
  position:absolute; top:14px; inset-inline-end:14px; width:30px; height:30px; border-radius:50%;
  border:0; background:rgba(255,255,255,.7); color:#8a7f70; font-size:.8rem; cursor:pointer;
  display:grid; place-items:center; backdrop-filter:blur(4px);
}
.rv-title{ font-weight:900; font-size:1.15rem; color:#3a2b1e; margin-bottom:12px; }
.rv-store{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.rv-store-emoji{
  width:34px; height:34px; border-radius:11px; display:grid; place-items:center; font-size:1.1rem;
  background:#fff; box-shadow:0 3px 8px rgba(150,90,40,.18);
}
.rv-store-name{ font-weight:800; color:#241c15; font-size:.9rem; }
.rv-store-num{
  background:rgba(255,255,255,.7); color:#a2603a; border-radius:999px; padding:3px 10px;
  font-size:.68rem; font-weight:800; letter-spacing:.3px;
}

.rv-face-wrap{ position:relative; height:70px; display:grid; place-items:center; margin-top:10px; }
.rv-face{
  font-size:3.5rem; line-height:1; filter:grayscale(.5); opacity:.7; transition:all .18s;
}
.rv-face.pop{ filter:none; opacity:1; animation:rvPop .4s cubic-bezier(.34,1.56,.64,1); }
@keyframes rvPop{ 0%{ transform:scale(.5) rotate(-8deg); } 70%{ transform:scale(1.18) rotate(3deg); } 100%{ transform:scale(1) rotate(0); } }

/* 5-star celebration: particles fly out from the face */
.rv-burst{ position:absolute; inset:0; pointer-events:none; }
.rv-burst i{
  position:absolute; top:50%; left:50%; width:8px; height:8px; border-radius:2px;
  background:hsl(calc(var(--i) * 45), 90%, 60%);
  transform:translate(-50%,-50%);
  animation:rvBurst .7s ease-out forwards;
  animation-delay:.05s;
}
.rv-burst i:nth-child(odd){ border-radius:50%; }
@keyframes rvBurst{
  0%{ opacity:1; transform:translate(-50%,-50%) rotate(0) scale(.4); }
  100%{ opacity:0;
    transform:translate(calc(-50% + cos(var(--i) * 45deg) * 60px),
                        calc(-50% + sin(var(--i) * 45deg) * 60px)) rotate(180deg) scale(1); }
}

.rv-word{
  font-weight:900; color:#b3a693; font-size:1rem; min-height:1.4em; margin:6px 0 12px;
  transition:color .18s, transform .18s;
}
.rv-word.show{ color:#f4511e; transform:scale(1.04); }

.rv-stars{ display:flex; justify-content:center; gap:7px; direction:ltr; }
.rv-star{ background:transparent; border:0; padding:3px; cursor:pointer; line-height:0; }
.rv-star svg{ width:40px; height:40px; fill:#f0e2cf; transition:fill .15s, transform .15s; }
.rv-star:hover svg{ transform:scale(1.14); }
.rv-star.on svg{
  fill:#ffb400; filter:drop-shadow(0 3px 7px rgba(255,180,0,.45));
  animation:rvStar .3s ease both; animation-delay:var(--d);
}
@keyframes rvStar{ 0%{ transform:scale(.4) rotate(-30deg); } 60%{ transform:scale(1.25); } 100%{ transform:scale(1); } }
.rv-star.mini svg{ width:22px; height:22px; }

.rv-body{ padding:18px 22px 22px; }

.rv-tags{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:16px;
  animation:rvFade .25s ease both; }
@keyframes rvFade{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.rv-tag{
  background:#faf7f2; border:1.5px solid #ece5dc; border-radius:999px; padding:8px 14px;
  font-family:inherit; font-size:.82rem; font-weight:700; color:#5a5145; cursor:pointer;
  transition:all .13s;
}
.rv-tag:hover{ border-color:#d9cfc2; }
.rv-tag.on{ background:#fff1e8; border-color:#f4511e; color:#c4471a; }

.rv-driver{
  background:#faf7f2; border:1px solid #efe7dc; border-radius:16px; padding:11px 15px;
  margin-bottom:14px; display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:space-between;
}
.rv-driver-label{ font-size:.8rem; color:#4a4038; }
.rv-mini-stars{ display:flex; gap:2px; direction:ltr; }

.rv-comment{
  width:100%; border:1.5px solid #ece5dc; border-radius:16px; background:#faf7f2;
  padding:12px 15px; font-family:inherit; font-size:.9rem; color:#241c15; resize:none; outline:none;
  transition:border-color .15s, box-shadow .15s, background .15s;
}
.rv-comment:focus{ border-color:#f4511e; background:#fff; box-shadow:0 0 0 3px rgba(244,81,30,.10); }
.rv-comment::placeholder{ color:#b3a693; }

.rv-error{ background:#fdecea; color:#c62828; border-radius:12px; padding:9px 13px; font-size:.82rem; margin-top:12px; }

.rv-submit{
  width:100%; margin-top:16px; border:0; cursor:pointer; border-radius:16px; padding:15px; min-height:52px;
  font-family:inherit; font-size:1rem; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#ff7a3d,#f4511e); box-shadow:0 8px 20px rgba(244,81,30,.30);
  transition:opacity .15s, transform .12s, box-shadow .15s; display:grid; place-items:center;
}
.rv-submit:hover:not(:disabled){ transform:translateY(-1px); box-shadow:0 10px 26px rgba(244,81,30,.38); }
.rv-submit:disabled{ opacity:.4; cursor:default; box-shadow:none; }
.rv-spin{
  width:20px; height:20px; border:2.5px solid rgba(255,255,255,.4); border-top-color:#fff;
  border-radius:50%; animation:rvSpin .7s linear infinite;
}
@keyframes rvSpin{ to{ transform:rotate(360deg); } }

.rv-skip{
  width:100%; margin-top:6px; background:transparent; border:0; cursor:pointer;
  font-family:inherit; font-size:.85rem; font-weight:700; color:#a99e8d; padding:8px;
}
.rv-skip:hover{ color:#6b6153; }

/* ===== v324: track page "order not found" state ===== */
.tk-missing{
  max-width:460px; margin:9vh auto 0; text-align:center; background:#fff;
  border:1px solid #efe7dc; border-radius:24px; padding:44px 30px;
  box-shadow:0 8px 30px rgba(90,70,50,.08);
}
.tk-missing-emoji{ font-size:3.2rem; margin-bottom:10px; filter:grayscale(.3); }
.tk-missing-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }

/* ===== v325: loader watchdog — say WHY instead of spinning forever ===== */
.mf-loader-err{
  position:relative; z-index:2; text-align:center; max-width:380px; padding:0 24px;
  animation:rvFade .3s ease both;
}
.mf-loader-err.inline{ padding:10px 0; }
.mf-loader-err-emoji{ font-size:3rem; margin-bottom:12px; }
.mf-loader-err-title{ font-weight:900; font-size:1.2rem; color:#241c15; margin-bottom:8px; }
.mf-loader-err-sub{ font-size:.9rem; color:#8a7f70; line-height:1.55; margin-bottom:18px; }
.mf-loader-retry{
  border:0; cursor:pointer; border-radius:14px; padding:13px 28px;
  font-family:inherit; font-size:.95rem; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#ff7a3d,#f4511e); box-shadow:0 8px 20px rgba(244,81,30,.30);
  transition:transform .12s, box-shadow .15s;
}
.mf-loader-retry:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(244,81,30,.38); }

/* ===== v326: review dialog — clearer + more alive ===== */
/* the face is always full colour, gently floating; it pops when a star lands */
.rv-face{ filter:none !important; opacity:1 !important; animation:rvFloat 2.8s ease-in-out infinite; }
.rv-face.pop{ animation:rvPop .4s cubic-bezier(.34,1.56,.64,1), rvFloat 2.8s ease-in-out .45s infinite; }
@keyframes rvFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-5px); } }

/* the question reads as text, not as a disabled hint */
.rv-word{ color:#5a4a3a; font-size:1.05rem; }

/* empty stars: solid white with a warm shadow — clearly tappable on the peach hero */
.rv-star svg{ fill:#ffffff; filter:drop-shadow(0 3px 6px rgba(160,90,30,.28)); }
.rv-star.on svg{ fill:#ffb400; filter:drop-shadow(0 3px 7px rgba(255,180,0,.5)); }

/* until a star is chosen, the row twinkles one by one — "tap me" */
.rv-stars.hint .rv-star svg{ animation:rvTwinkle 2.6s ease-in-out infinite; animation-delay:var(--h); }
@keyframes rvTwinkle{
  0%, 74%, 100%{ transform:scale(1); fill:#ffffff; }
  80%{ transform:scale(1.22) rotate(8deg); fill:#ffd57a; }
  88%{ transform:scale(1); fill:#ffffff; }
}
.rv-stars.hint .rv-star:hover svg{ animation:none; transform:scale(1.16); fill:#ffd57a; }

/* everything enters with a soft staggered rise */
.rv-title{ animation:rvUp .35s .02s both; }
.rv-store{ animation:rvUp .35s .08s both; }
.rv-face-wrap{ animation:rvUp .35s .14s both; }
.rv-word{ animation:rvUp .35s .18s both; }
.rv-stars{ animation:rvUp .35s .22s both; }
.rv-body{ animation:rvUp .4s .26s both; }
@keyframes rvUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

/* a soft glowing halo behind the face */
.rv-face-wrap::before{
  content:""; position:absolute; width:86px; height:86px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 70%);
  animation:rvHalo 3s ease-in-out infinite;
}
@keyframes rvHalo{ 0%,100%{ transform:scale(1); opacity:.7; } 50%{ transform:scale(1.25); opacity:1; } }

/* ===== v327: partner dashboard hero shows the uploaded logo ===== */
.db .db-hero .logo.has-logo{ padding:0; overflow:hidden; }
.db .db-hero .logo.has-logo img{
  width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block;
  background:#fff;
}

/* ===== v328: hero logo — show the WHOLE mark, never crop it ===== */
.db .db-hero .logo.has-logo{ background:#fff; }
.db .db-hero .logo.has-logo img{ object-fit:contain; padding:4px; box-sizing:border-box; }

/* ===== v329: "Needs your attention" — front and centre, professional ===== */
.db-att-count{
  background:linear-gradient(135deg,#ff7a3d,#f4511e); color:#fff; border-radius:999px;
  min-width:22px; height:22px; padding:0 7px; display:inline-grid; place-items:center;
  font-weight:800; font-size:.72rem; margin-inline-start:8px;
  box-shadow:0 3px 8px rgba(244,81,30,.35);
}
.db-att-row{
  display:flex; align-items:center; gap:12px; padding:12px 14px; margin-bottom:10px;
  background:#fff; border:1.5px solid #f0e8dd; border-radius:15px;
  text-decoration:none; color:inherit;
  transition:transform .13s, box-shadow .15s, border-color .15s;
}
.db-att-row:hover{
  transform:translateY(-1px); border-color:rgba(244,81,30,.35);
  box-shadow:0 6px 18px rgba(90,70,50,.10);
}
.db-att-row .mid{ flex:1; min-width:0; }
.db-att-row .mid .top{ display:flex; align-items:center; gap:8px; min-width:0; }
.db-att-row .mid b{ font-size:.9rem; color:#241c15; letter-spacing:.2px; }
.db-att-row .mid .cust{
  font-size:.8rem; color:#6b6153; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.db-att-row .mid small{ display:block; color:#a99e8d; font-size:.74rem; margin-top:2px; }
.db-att-go{ color:#d5c9b8; flex:none; transition:transform .13s, color .13s; }
.db-att-row:hover .db-att-go{ color:#f4511e; transform:translateX(2px); }
[dir="rtl"] .db-att-go{ transform:scaleX(-1); }
[dir="rtl"] .db-att-row:hover .db-att-go{ transform:scaleX(-1) translateX(2px); }

/* a brand-new order glows softly until someone opens it */
.db-att-row.urgent{
  background:linear-gradient(135deg,#fff7f1,#fff1e7); border-color:#ffd4bb;
  animation:dbUrgent 2.2s ease-in-out infinite;
}
@keyframes dbUrgent{
  0%,100%{ box-shadow:0 0 0 0 rgba(244,81,30,.16); }
  50%{ box-shadow:0 0 0 6px rgba(244,81,30,0); }
}

/* ===== v330: dashboard hero actions — big, clear, premium ===== */
.db-hero .acts{ display:flex; gap:12px; flex-wrap:wrap; position:relative; z-index:1; }
.db-act{
  display:inline-flex; align-items:center; gap:11px; text-decoration:none;
  border-radius:16px; padding:11px 20px 11px 12px; font-weight:800; font-size:.95rem;
  transition:transform .13s, box-shadow .16s, background .16s;
}
[dir="rtl"] .db-act{ padding:11px 12px 11px 20px; }
.db-act .ic{
  width:38px; height:38px; border-radius:12px; display:grid; place-items:center; flex:none;
}
.db-act .ic .mud-icon-root{ width:21px; height:21px; }
.db-act:hover{ transform:translateY(-2px); }
.db-act:active{ transform:translateY(0); }

/* POS: solid white, orange icon tile — the loudest thing on the hero */
.db-act.main{ background:#fff; color:#241c15; box-shadow:0 8px 22px rgba(60,20,0,.25); }
.db-act.main .ic{ background:linear-gradient(135deg,#ff7a3d,#f4511e); color:#fff;
  box-shadow:0 4px 10px rgba(244,81,30,.35); }
.db-act.main:hover{ box-shadow:0 12px 28px rgba(60,20,0,.32); }

/* Live orders: frosted glass on the orange, with a waiting-count badge */
.db-act.glass{
  background:rgba(255,255,255,.14); color:#fff;
  border:1.5px solid rgba(255,255,255,.5); backdrop-filter:blur(6px);
}
.db-act.glass .ic{ background:rgba(255,255,255,.2); color:#fff; }
.db-act.glass:hover{ background:rgba(255,255,255,.24); }
.db-act .bdg{
  background:#fff; color:#c4471a; border-radius:999px; min-width:24px; height:24px;
  padding:0 7px; display:grid; place-items:center; font-size:.75rem; font-weight:900;
  box-shadow:0 2px 6px rgba(0,0,0,.18); animation:dbBdg 2s ease-in-out infinite;
}
@keyframes dbBdg{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.12); } }

/* ===== v331: product → printer routing page + POS send-to-till ===== */
.pr-legend{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.pr-legend-note{ font-size:.8rem; color:#8a7f70; }
.pr-cat{
  background:#fff; border:1px solid #efe7dc; border-radius:18px; padding:16px 18px;
  margin-bottom:16px; box-shadow:0 3px 14px rgba(90,70,50,.05);
}
.pr-cat-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:6px; }
.pr-cat-name{ font-weight:800; font-size:1.02rem; color:#241c15; }
.pr-cat-count{
  background:#f4f0ea; color:#8a7f70; border-radius:999px; min-width:24px; height:22px; padding:0 8px;
  display:inline-grid; place-items:center; font-weight:800; font-size:.72rem;
}
.pr-allto{ font-size:.74rem; color:#a99e8d; font-weight:700; }
.pr-items{ display:flex; flex-direction:column; }
.pr-row{
  display:flex; align-items:center; gap:11px; padding:10px 2px;
  border-top:1px dashed #f0e8dd;
}
.pr-emoji{ font-size:1.25rem; width:30px; text-align:center; flex:none; }
.pr-name{ flex:1; min-width:0; font-weight:600; font-size:.9rem; color:#2b2118;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pr-pick{ display:flex; gap:6px; flex:none; }

.pr-chip{
  display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:7px 13px;
  background:#faf7f2; border:1.5px solid #ece5dc; font-family:inherit; font-weight:700;
  font-size:.8rem; color:#5a5145; cursor:pointer; transition:all .13s;
}
.pr-chip:hover{ border-color:#d9cfc2; }
.pr-chip.sm{ padding:5px 10px; }
.pr-chip.demo{ cursor:default; }
.pr-chip.k.on{ background:#fff1e8; border-color:#f4511e; color:#c4471a; box-shadow:0 3px 8px rgba(244,81,30,.15); }
.pr-chip.b.on{ background:#eef5ff; border-color:#3b82f6; color:#2563eb; box-shadow:0 3px 8px rgba(59,130,246,.15); }
.pr-chip.n.on{ background:#f1ece5; border-color:#b3a693; color:#6b6153; }
@media (max-width:640px){ .pr-chip .t{ display:none; } }

.pr-savebar{
  position:fixed; bottom:-80px; left:50%; transform:translateX(-50%);
  display:flex; align-items:center; gap:14px; z-index:1200;
  background:#241c15; color:#f3ece4; border-radius:999px; padding:10px 12px 10px 22px;
  box-shadow:0 12px 30px rgba(0,0,0,.28); transition:bottom .25s cubic-bezier(.34,1.3,.64,1);
}
[dir="rtl"] .pr-savebar{ padding:10px 22px 10px 12px; }
.pr-savebar.show{ bottom:22px; }
.pr-save-hint{ font-size:.85rem; font-weight:600; }
.pr-save{
  border:0; cursor:pointer; border-radius:999px; padding:10px 26px; font-family:inherit;
  font-size:.9rem; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#ff7a3d,#f4511e);
}

/* POS: hand the amount to the till for the card terminal */
.pos-till{
  width:100%; display:flex; align-items:center; justify-content:center; gap:9px;
  border:1.5px dashed #b8a7ff; background:#f6f3ff; color:#5b3ff0; border-radius:14px;
  padding:12px; margin:2px 0 10px; font-family:inherit; font-weight:800; font-size:.9rem;
  cursor:pointer; transition:all .15s;
}
.pos-till:hover{ background:#efeaff; }
.pos-till.sent{ border-style:solid; border-color:#22a05e; background:#e6f5ec; color:#1b7d49; }
.pos-till b{ margin-inline-start:auto; }

/* ===== v332: send-to-terminal — a real button, not a faint dashed box ===== */
.pos-till{
  border:0; border-style:solid;
  background:linear-gradient(135deg,#7c5cff,#5b3ff0);
  color:#fff; padding:14px 16px; font-size:.95rem;
  box-shadow:0 6px 16px rgba(91,63,240,.35);
}
.pos-till:hover{ background:linear-gradient(135deg,#8b6eff,#6a4ff5); transform:translateY(-1px); }
.pos-till .mud-icon-root{ width:22px; height:22px; }
.pos-till b{
  background:rgba(255,255,255,.22); border-radius:10px; padding:4px 12px; font-size:1rem;
}
.pos-till.sent{ background:#22a05e; border:0; color:#fff; box-shadow:0 6px 16px rgba(34,160,94,.35); }
.pos-till.sent b{ background:rgba(255,255,255,.25); }

/* v332b: no price on the terminal button — just one clear action */
.pos-till{ justify-content:center; }

/* ============================================================
   v333: POS — premium redesign. One coherent design language:
   warm workspace, ink-and-orange accents, layered depth, calm motion.
   ============================================================ */

/* ---------- workspace ---------- */
.pos{ gap:16px; }
.pos-left{ min-width:0; }

/* ---------- top bar: one glassy strip ---------- */
.pos-top{
  background:rgba(255,255,255,.75); backdrop-filter:blur(8px);
  border:1px solid #efe7dc; border-radius:16px; padding:8px 10px;
  box-shadow:0 2px 10px rgba(90,70,50,.05); margin-bottom:12px;
}
.pos-mode.top button, .pos-custbtn.top{
  border-radius:11px !important; font-weight:700;
}

/* ---------- category rail: segmented pills, ink when active ---------- */
.pos-cats{ gap:8px; padding:2px 2px 10px; }
.pos-cats::-webkit-scrollbar{ height:6px; }
.pos-cats::-webkit-scrollbar-thumb{ background:#e4d9ca; border-radius:6px; }
.pos-cats button{
  border:1.5px solid #ece5dc !important; background:#fff !important;
  border-radius:999px !important; padding:9px 18px !important;
  font-weight:700 !important; font-size:.86rem !important; color:#5a5145 !important;
  white-space:nowrap; transition:all .16s ease !important;
}
.pos-cats button:hover{ border-color:#d9cfc2 !important; transform:translateY(-1px); }
.pos-cats button.on{
  background:#241c15 !important; border-color:#241c15 !important; color:#fff !important;
  box-shadow:0 6px 16px rgba(36,28,21,.25);
}

/* ---------- product tiles: soft cards with a stage for the food ---------- */
.pos-grid{ gap:12px; padding:4px 4px 14px; }
.pos-grid::-webkit-scrollbar{ width:8px; }
.pos-grid::-webkit-scrollbar-thumb{ background:#e4d9ca; border-radius:8px; }
.pos-tile{
  border-radius:18px; padding:12px 10px 12px;
  border:1.5px solid #f0e8dd;
  background:linear-gradient(180deg,#ffffff 0%,#fdfaf6 100%);
  box-shadow:0 2px 8px rgba(90,70,50,.06);
  gap:6px;
}
.pos-tile:hover{
  box-shadow:0 10px 24px rgba(90,70,50,.14);
  transform:translateY(-3px);
  border-color:#e8dccc;
}
.pos-tile:active{ transform:scale(.96); transition-duration:.06s; }
.pos-tile.on{
  border-color:#f4511e;
  background:linear-gradient(180deg,#fffdfb 0%,#fff4ec 100%);
  box-shadow:0 8px 20px rgba(244,81,30,.16);
}

/* the food gets a consistent stage: photo fills it, emoji floats on a soft tint */
.pos-tile .pt-img{
  width:100%; height:74px; object-fit:cover; border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.pos-tile .pt-emoji{
  width:100%; height:74px; display:grid; place-items:center; font-size:34px;
  background:radial-gradient(90% 90% at 50% 30%, #fff7f0 0%, #f8f0e5 100%);
  border-radius:12px;
}
.pos-tile .pt-name{
  font-size:.8rem; font-weight:700; color:#2b2118; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  max-height:none; min-height:2.1em;
}
.pos-tile .pt-price{
  background:#f4f0ea; color:#241c15; border-radius:999px; padding:3px 11px;
  font-size:.74rem; font-weight:800;
}
.pos-tile.on .pt-price{ background:#f4511e; color:#fff; }

/* qty badge: ink pill, sitting confidently on the corner */
.pos-tile .pt-badge{
  top:-8px; min-width:26px; height:26px; font-size:.8rem;
  background:#241c15; box-shadow:0 4px 10px rgba(36,28,21,.35);
  border:2px solid #fff;
}
.pos-tile .pt-minus{
  top:-8px; width:26px; height:26px; border:2px solid #fff;
  background:#fff1e8; color:#c4471a; font-weight:800;
  box-shadow:0 3px 8px rgba(90,70,50,.18);
}
.pos-tile .pt-minus:hover{ background:#f4511e; color:#fff; }

/* ---------- the ticket: an elevated receipt ---------- */
.pos-ticket{
  border-radius:20px !important; border:1px solid #efe7dc !important;
  box-shadow:0 10px 30px rgba(90,70,50,.10) !important;
  background:#fff !important;
}
.pos-lines{ gap:6px; }
.pos-lines::-webkit-scrollbar{ width:6px; }
.pos-lines::-webkit-scrollbar-thumb{ background:#e4d9ca; border-radius:6px; }
.pos-line{
  border-radius:12px; padding:8px 10px;
  border:1px solid transparent; transition:background .12s ease;
}
.pos-line:hover{ background:#faf7f2; }
.pos-line.fresh{
  background:linear-gradient(90deg,#fff6ee,#fffdfb);
  box-shadow:none; border:1px dashed #ffcfb3;
}
.pos-line .pm{
  width:26px; height:26px; border-radius:9px; border:1.5px solid #ece5dc;
  background:#fff; font-weight:800; color:#5a5145; cursor:pointer;
  display:inline-grid; place-items:center; transition:all .12s ease;
}
.pos-line .pm:hover{ border-color:#f4511e; color:#f4511e; }
.pos-line .pm.del:hover{ border-color:#c62828; color:#c62828; background:#fdecea; }
.pos-line .q{ min-width:20px; text-align:center; }

/* ---------- totals: the grand total is a display, not a line ---------- */
.pos-totals > div:not(.grand) span{ font-size:.82rem; }
.pos-totals .grand{
  border-top:0; margin-top:8px; padding:12px 16px;
  background:#241c15; border-radius:14px; align-items:center;
}
.pos-totals .grand span{ color:#cfc4b4; font-weight:700; font-size:.86rem; }
.pos-totals .grand b{ color:#ffb74d; font-size:1.25rem; letter-spacing:.3px; }

/* ---------- pay mode: a real segmented control ---------- */
.pos-pay-mode{
  background:#f4f0ea; border-radius:14px; padding:4px; gap:4px;
}
.pos-pay-mode button{
  border:0 !important; background:transparent !important; border-radius:11px !important;
  padding:10px 6px !important; color:#8a7f70 !important;
}
.pos-pay-mode button.on{
  background:#fff !important; color:#241c15 !important;
  box-shadow:0 3px 8px rgba(90,70,50,.12);
}

/* ===== v334: POS guided tour — spotlight + step card ===== */
.tour-spot{
  position:fixed; z-index:1998; pointer-events:none; border-radius:18px;
  box-shadow:0 0 0 9999px rgba(24,15,8,.55), 0 0 0 3px #f4511e, 0 0 30px rgba(244,81,30,.5);
  transition:all .35s cubic-bezier(.4,0,.2,1);
}
.tour-spot::after{
  content:""; position:absolute; inset:-10px; border-radius:24px;
  border:2px solid rgba(255,255,255,.35); animation:tourPulse 1.8s ease-in-out infinite;
}
@keyframes tourPulse{ 0%,100%{ opacity:.9; transform:scale(1); } 50%{ opacity:.2; transform:scale(1.03); } }

.tour-card{
  position:fixed; z-index:1999; bottom:26px; left:50%; transform:translateX(-50%);
  width:min(430px, calc(100vw - 32px));
  background:#fff; border-radius:22px; padding:20px 22px 16px;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  animation:tourIn .35s cubic-bezier(.34,1.3,.64,1) both;
}
@keyframes tourIn{ from{ opacity:0; transform:translate(-50%, 24px); } to{ opacity:1; transform:translate(-50%,0); } }
.tour-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.tour-badge{
  width:34px; height:34px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg,#ff7a3d,#f4511e); color:#fff; font-weight:900; font-size:1rem;
  box-shadow:0 5px 12px rgba(244,81,30,.35);
}
.tour-emoji{ font-size:1.5rem; }
.tour-x{
  margin-inline-start:auto; width:28px; height:28px; border-radius:50%; border:0;
  background:#f4f0ea; color:#8a7f70; cursor:pointer; font-size:.75rem;
  display:grid; place-items:center;
}
.tour-title{ font-weight:900; font-size:1.08rem; color:#241c15; margin-bottom:4px; }
.tour-text{ font-size:.9rem; color:#6b6153; line-height:1.6; margin-bottom:14px; }
.tour-foot{ display:flex; align-items:center; gap:8px; }
.tour-dots{ display:flex; gap:5px; }
.tour-dots span{ width:7px; height:7px; border-radius:999px; background:#e8e0d5; transition:all .2s; }
.tour-dots span.on{ width:20px; background:linear-gradient(135deg,#ff7a3d,#f4511e); }
.tour-dots span.done{ background:#f4b28f; }
.tour-btn{
  border:0; cursor:pointer; border-radius:12px; padding:10px 20px;
  font-family:inherit; font-weight:800; font-size:.86rem; transition:all .13s;
}
.tour-btn.main{ color:#fff; background:linear-gradient(135deg,#ff7a3d,#f4511e); box-shadow:0 6px 14px rgba(244,81,30,.3); }
.tour-btn.main:hover{ transform:translateY(-1px); }
.tour-btn.ghost{ background:#f4f0ea; color:#5a5145; }

/* ===== v335: tour card must not be trapped by the page-transition transform =====
   position:fixed is relative to the nearest transformed ancestor, and .pg-anim
   carries one during its entry animation (and Mud keyframes can leave will-change).
   While a tour is open, the wrapper must be transform-free. */
.pg-anim:has(.tour-card){ animation:none !important; transform:none !important; }

/* ===== v336: the tour card comes alive — every step replays the show ===== */
.tour-card{ animation:tourIn .45s cubic-bezier(.34,1.45,.64,1) both; }

/* step number lands with a spin-pop, then breathes a soft ring */
.tour-badge{
  animation:tourBadge .5s cubic-bezier(.34,1.56,.64,1) both .1s;
  position:relative;
}
.tour-badge::after{
  content:""; position:absolute; inset:-4px; border-radius:16px;
  border:2px solid rgba(244,81,30,.45); animation:tourRing 2s ease-out infinite .7s;
}
@keyframes tourBadge{ 0%{ transform:scale(0) rotate(-90deg); } 70%{ transform:scale(1.2) rotate(8deg); } 100%{ transform:scale(1) rotate(0); } }
@keyframes tourRing{ 0%{ opacity:.8; transform:scale(1); } 100%{ opacity:0; transform:scale(1.45); } }

/* the emoji hops in and keeps a gentle bounce */
.tour-emoji{
  display:inline-block;
  animation:tourEmojiIn .5s cubic-bezier(.34,1.56,.64,1) both .18s,
            tourEmojiBob 2.4s ease-in-out infinite .8s;
}
@keyframes tourEmojiIn{ 0%{ transform:translateY(14px) scale(.3); opacity:0; } 100%{ transform:none; opacity:1; } }
@keyframes tourEmojiBob{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-4px) rotate(-6deg); } }

/* title and text follow, one after the other */
.tour-title{ animation:tourRise .35s ease-out both .22s; }
.tour-text{ animation:tourRise .35s ease-out both .3s; }
.tour-foot{ animation:tourRise .35s ease-out both .38s; }
@keyframes tourRise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* the Next button carries a passing shine so eyes land on it */
.tour-btn.main{ position:relative; overflow:hidden; }
.tour-btn.main::after{
  content:""; position:absolute; top:0; bottom:0; width:40%;
  inset-inline-start:-60%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent);
  animation:tourShine 2.6s ease-in-out infinite 1s;
}
@keyframes tourShine{ 0%{ inset-inline-start:-60%; } 45%,100%{ inset-inline-start:120%; } }

/* active progress dot pulses softly */
.tour-dots span.on{ animation:tourDot 1.6s ease-in-out infinite; }
@keyframes tourDot{ 0%,100%{ opacity:1; } 50%{ opacity:.55; } }

/* ===== v337: the tour on a phone — bottom sheet, thumb-sized buttons ===== */
@media (max-width: 640px){
  .tour-card{
    width:calc(100vw - 16px); bottom:0; border-radius:22px 22px 0 0;
    padding:18px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  @keyframes tourIn{ from{ opacity:0; transform:translate(-50%, 40px); } to{ opacity:1; transform:translate(-50%,0); } }
  .tour-title{ font-size:1rem; }
  .tour-text{ font-size:.85rem; line-height:1.55; margin-bottom:12px; }
  .tour-foot{ flex-wrap:wrap; gap:10px; }
  .tour-dots{ width:100%; justify-content:center; order:-1; }
  .tour-btn{ flex:1; padding:13px 10px; font-size:.92rem; }
  .tour-spot{ border-radius:14px; }
}

/* ===== v338: real food photos wherever an item has no upload ===== */
.mf-hit-emoji .hp{ width:100%; height:100%; object-fit:cover; border-radius:inherit; display:block; }

/* ===== v339: tablet POS — calmer type, more food on screen ===== */
.pos.tablet .pos-cats button{ font-size:.84rem !important; padding:8px 15px !important; }
.pos.tablet .pos-tile{ padding:12px 8px 12px; gap:5px; }
.pos.tablet .pos-tile .pt-emoji{ font-size:30px; height:64px; }
.pos.tablet .pos-tile .pt-img{ width:100%; height:64px; border-radius:12px; }
.pos.tablet .pos-tile .pt-name{ font-size:12px; }
.pos.tablet .pos-tile .pt-price{ font-size:11px; padding:2px 9px; }
.pos.tablet .pos-tile .pt-badge{ min-width:24px; height:24px; font-size:12px; }
.pos.tablet .pos-tile .pt-minus{ width:24px; height:24px; font-size:15px; }
.pos.tablet .pos-ticket{ width:340px; padding:14px; }
.pos.tablet .pos-line{ font-size:13px; padding:8px 10px; }
.pos.tablet .pos-line .pm{ width:27px; height:27px; font-size:15px; }
.pos.tablet .pos-line .q{ min-width:20px; font-size:13.5px; }
.pos.tablet .pos-totals{ font-size:13px; }
.pos.tablet .pos-totals .grand{ font-size:15px; }
.pos.tablet .pos-totals .grand b{ font-size:1.1rem; }
.pos.tablet .pos-pay-mode button{ padding:10px 6px !important; font-size:12.5px !important; }
.pos.tablet .pos-pay{ min-height:50px; font-size:14px !important; }
.pos.tablet .pos-mode.top button, .pos.tablet .pos-custbtn.top{ font-size:.84rem !important; }

/* ===== v340: tablet POS — category pills slide along the TOP ===== */
.pos.tablet .pos-left{
  grid-template-columns:1fr;
  grid-template-rows:auto auto 1fr;
  grid-template-areas:"top" "cats" "grid";
}
.pos.tablet .pos-cats{
  flex-direction:row;
  overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  gap:8px; padding:2px 2px 8px;
}
.pos.tablet .pos-cats::-webkit-scrollbar{ height:5px; }
.pos.tablet .pos-cats::-webkit-scrollbar-thumb{ background:#e4d9ca; border-radius:6px; }
.pos.tablet .pos-cats button{
  width:auto; min-height:0; white-space:nowrap;
  padding:10px 20px !important; border-radius:999px !important;
  scroll-snap-align:start; flex:none;
}
/* the active pill grows slightly — the slide of the strip plus this = motion */
.pos.tablet .pos-cats button.on{ transform:scale(1.06); }

/* switching a group: the wall of dishes slides up in a soft stagger */
.pos-grid .pos-tile{ animation:tileIn .32s cubic-bezier(.2,.7,.3,1) both; }
.pos-grid .pos-tile:nth-child(2){ animation-delay:.03s; }
.pos-grid .pos-tile:nth-child(3){ animation-delay:.06s; }
.pos-grid .pos-tile:nth-child(4){ animation-delay:.09s; }
.pos-grid .pos-tile:nth-child(5){ animation-delay:.12s; }
.pos-grid .pos-tile:nth-child(6){ animation-delay:.15s; }
.pos-grid .pos-tile:nth-child(7){ animation-delay:.18s; }
.pos-grid .pos-tile:nth-child(8){ animation-delay:.21s; }
.pos-grid .pos-tile:nth-child(9){ animation-delay:.24s; }
.pos-grid .pos-tile:nth-child(10){ animation-delay:.27s; }
.pos-grid .pos-tile:nth-child(n+11){ animation-delay:.3s; }
@keyframes tileIn{
  from{ opacity:0; transform:translateY(14px) scale(.96); }
  to{ opacity:1; transform:none; }
}

/* ===== v341: category rail arrows (tablet POS + order dialog) ===== */
.pos-cats-row{ display:contents; }        /* desktop: invisible wrapper, no arrows */
.pos-cat-arrow{ display:none; }
.pos.tablet .pos-cats-row{
  grid-area:cats; display:flex; align-items:center; gap:8px; min-width:0;
}
.pos.tablet .pos-cats-row .pos-cats{ flex:1; min-width:0; }
.pos.tablet .pos-cat-arrow{
  display:grid; place-items:center; flex:none;
  width:36px; height:36px; border-radius:50%; border:1.5px solid #ece5dc;
  background:#fff; color:#5a5145; font-size:1.25rem; font-weight:800; line-height:1;
  cursor:pointer; box-shadow:0 2px 8px rgba(90,70,50,.08);
  transition:all .13s;
}
.pos.tablet .pos-cat-arrow:hover{ border-color:#f4511e; color:#f4511e; transform:scale(1.08); }
.pos.tablet .pos-cat-arrow:active{ transform:scale(.94); }

/* the order dialog gets the same sliding rail */
.co-cats-row{ display:flex; align-items:center; gap:8px; margin-bottom:10px; min-width:0; }
.co-cats{
  flex:1; min-width:0; display:flex; gap:7px; overflow-x:auto; overflow-y:hidden;
  scroll-snap-type:x proximity; scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
  padding:2px;
}
.co-cats::-webkit-scrollbar{ height:4px; }
.co-cats::-webkit-scrollbar-thumb{ background:#e4d9ca; border-radius:6px; }
.co-cats button{
  flex:none; border:1.5px solid #ece5dc; background:#faf7f2; border-radius:999px;
  padding:7px 15px; font-family:inherit; font-weight:700; font-size:.8rem; color:#5a5145;
  cursor:pointer; white-space:nowrap; scroll-snap-align:start; transition:all .15s;
}
.co-cats button:hover{ border-color:#d9cfc2; }
.co-cats button.on{
  background:#241c15; border-color:#241c15; color:#fff; transform:scale(1.05);
  box-shadow:0 4px 10px rgba(36,28,21,.22);
}
.co-arrow{
  display:grid; place-items:center; flex:none;
  width:30px; height:30px; border-radius:50%; border:1.5px solid #ece5dc;
  background:#fff; color:#5a5145; font-size:1.05rem; font-weight:800; line-height:1;
  cursor:pointer; transition:all .13s;
}
.co-arrow:hover{ border-color:#f4511e; color:#f4511e; transform:scale(1.08); }
@media (max-width:520px){ .co-arrow{ display:none; } }

/* switching groups: rows slide in with a soft stagger */
.co-items .co-row{ animation:coRowIn .28s cubic-bezier(.2,.7,.3,1) both; }
.co-items .co-row:nth-child(odd){ animation-delay:.03s; }
.co-items .co-row:nth-child(3n){ animation-delay:.06s; }
@keyframes coRowIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ===== v342: tablet POS — the bill is a dialog sheet ===== */
.pos.tablet .pos-ticket.sheet{
  position:fixed; z-index:1300;
  inset-inline-end:14px; bottom:14px; top:auto;
  width:min(430px, calc(100vw - 28px));
  max-height:calc(100vh - 28px);
  border-radius:22px !important;
  box-shadow:0 24px 60px rgba(0,0,0,.30) !important;
  transform:translateY(112%);
  transition:transform .32s cubic-bezier(.34,1.1,.4,1);
  display:flex; flex-direction:column;
}
.pos.tablet .pos-ticket.sheet.open{ transform:none; }
.pos-tkt-x{
  position:absolute; top:12px; inset-inline-start:12px; z-index:2;
  width:30px; height:30px; border-radius:50%; border:0;
  background:#f4f0ea; color:#8a7f70; font-size:.75rem; cursor:pointer;
  display:grid; place-items:center;
}
.pos-tkt-veil{
  position:fixed; inset:0; z-index:1290; background:rgba(24,15,8,.35);
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.pos-tkt-veil.show{ opacity:1; pointer-events:auto; }
.pos-tkt-fab{
  position:fixed; z-index:1280; inset-inline-end:16px; bottom:16px;
  display:inline-flex; align-items:center; gap:10px;
  border:0; cursor:pointer; border-radius:999px; padding:14px 22px;
  font-family:inherit; font-weight:800; font-size:1rem; color:#fff;
  background:linear-gradient(135deg,#ff7a3d,#f4511e);
  box-shadow:0 10px 26px rgba(244,81,30,.40);
  transition:transform .15s, opacity .2s;
  animation:tourIn .3s ease both;
}
.pos-tkt-fab:hover{ transform:translateY(-2px); }
.pos-tkt-fab.hide{ opacity:0; pointer-events:none; }
.pos-tkt-fab .c{
  background:#fff; color:#c4471a; border-radius:999px; min-width:24px; height:24px;
  padding:0 7px; display:grid; place-items:center; font-size:.8rem; font-weight:900;
}

/* ===== v343: tablet POS uses fixed overlays (sheet, veil, fab) — the page
   transition wrapper must never hold a transform here, or position:fixed
   anchors to the wrapper instead of the screen. Same trap as the loader. ===== */
.pg-anim:has(.pos.tablet){ animation:none !important; transform:none !important; }

/* ===== v344: tablet basket fab — springs in, counts pop, glows softly ===== */
.pos-tkt-fab{
  padding:12px 20px; gap:11px;
  animation:fabIn .45s cubic-bezier(.34,1.55,.64,1) both, fabGlow 2.6s ease-in-out infinite .6s;
}
@keyframes fabIn{
  from{ opacity:0; transform:translateY(26px) scale(.6); }
  to{ opacity:1; transform:none; }
}
@keyframes fabGlow{
  0%,100%{ box-shadow:0 10px 26px rgba(244,81,30,.40); }
  50%{ box-shadow:0 10px 34px rgba(244,81,30,.62); }
}
.pos-tkt-fab .ic{
  width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.22);
  display:grid; place-items:center; font-size:1.05rem; flex:none;
}
/* the count POPS every time it changes — @key recreates it */
.pos-tkt-fab .c{ animation:fabCount .35s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes fabCount{ 0%{ transform:scale(.3); } 70%{ transform:scale(1.3); } 100%{ transform:scale(1); } }
.pos-tkt-fab b{ font-size:.95rem; letter-spacing:.2px; }

/* ===== v345: bill sheet — the close button gets its own headroom ===== */
.pos.tablet .pos-ticket.sheet{ padding-top:50px !important; }
.pos-tkt-x{
  top:12px; width:32px; height:32px;
  box-shadow:0 2px 6px rgba(90,70,50,.12);
}

/* ===== v346: dashboard stat cards are buttons now ===== */
a.db-stat{ text-decoration:none; color:inherit; cursor:pointer; transition:transform .14s, box-shadow .16s; }
a.db-stat:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(90,70,50,.14); }
a.db-stat:active{ transform:translateY(-1px); }

/* ===== v347: partner order assistant — chat that rings up tables ===== */
.pb-fab{
  position:fixed; z-index:1270; inset-inline-start:16px; bottom:16px;
  display:inline-flex; align-items:center; gap:9px; border:0; cursor:pointer;
  border-radius:999px; padding:13px 20px; font-family:inherit; font-weight:800; font-size:.92rem;
  color:#fff; background:linear-gradient(135deg,#7c5cff,#5b3ff0);
  box-shadow:0 10px 26px rgba(91,63,240,.42);
  transition:transform .15s, opacity .2s;
  animation:tourIn .35s ease both;
}
.pb-fab:hover{ transform:translateY(-2px); }
.pb-fab.hide{ opacity:0; pointer-events:none; }
.pb-fab-ic{ font-size:1.1rem; }
.pg-anim:has(.pb-fab){ animation:none !important; transform:none !important; }

.pb-veil{ position:fixed; inset:0; z-index:1290; background:rgba(24,15,8,.30); animation:rvFade .2s both; }
.pb-panel{
  position:fixed; z-index:1300; inset-inline-start:14px; bottom:14px;
  width:min(430px, calc(100vw - 28px)); height:min(640px, calc(100vh - 28px));
  background:#faf7f2; border-radius:24px; overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.32);
  display:flex; flex-direction:column;
  animation:tourIn .35s cubic-bezier(.34,1.3,.64,1) both;
}
.pb-head{
  display:flex; align-items:center; gap:11px; padding:14px 16px;
  background:linear-gradient(135deg,#8b6eff,#5b3ff0); color:#fff;
}
.pb-ava{
  width:40px; height:40px; border-radius:14px; background:rgba(255,255,255,.2);
  display:grid; place-items:center; font-size:1.3rem;
}
.pb-head-tx{ flex:1; min-width:0; line-height:1.25; }
.pb-head-tx b{ font-size:.98rem; }
.pb-head-tx small{ display:block; opacity:.85; font-size:.72rem; }
.pb-x{
  width:30px; height:30px; border-radius:50%; border:0; background:rgba(255,255,255,.2);
  color:#fff; cursor:pointer; font-size:.75rem; display:grid; place-items:center;
}

.pb-body{ flex:1; overflow-y:auto; padding:16px 14px; display:flex; flex-direction:column; gap:10px; }
.pb-body::-webkit-scrollbar{ width:6px; }
.pb-body::-webkit-scrollbar-thumb{ background:#e0d5c7; border-radius:6px; }
.pb-msg{ display:flex; flex-direction:column; gap:8px; animation:rvFade .22s both; }
.pb-msg.me{ align-items:flex-end; }
.pb-msg.bot{ align-items:flex-start; }
.pb-bubble{
  max-width:85%; padding:10px 14px; border-radius:16px; font-size:.9rem; line-height:1.55;
  background:#fff; color:#241c15; box-shadow:0 2px 8px rgba(90,70,50,.07);
}
.pb-msg.me .pb-bubble{ background:linear-gradient(135deg,#8b6eff,#5b3ff0); color:#fff; }
.pb-typing{ display:inline-flex; gap:4px; padding:14px 16px; }
.pb-typing i{
  width:7px; height:7px; border-radius:50%; background:#b3a693;
  animation:pbDot 1.1s ease-in-out infinite;
}
.pb-typing i:nth-child(2){ animation-delay:.18s; }
.pb-typing i:nth-child(3){ animation-delay:.36s; }
@keyframes pbDot{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(-4px); opacity:1; } }

.pb-chips{ display:flex; flex-wrap:wrap; gap:7px; max-width:95%; }
.pb-chip{
  border:1.5px solid #e2d9fb; background:#fff; color:#5b3ff0; border-radius:999px;
  padding:8px 14px; font-family:inherit; font-weight:700; font-size:.8rem; cursor:pointer;
  transition:all .13s;
}
.pb-chip:hover{ background:#f3efff; transform:translateY(-1px); }
.pb-chip.main{ background:linear-gradient(135deg,#2fb56b,#22a05e); border-color:#22a05e; color:#fff; }

.pb-card{
  background:#fff; border-radius:16px; padding:14px 16px; max-width:95%; min-width:230px;
  box-shadow:0 4px 16px rgba(90,70,50,.10); border:1px solid #efe7dc;
}
.pb-card-title{ font-weight:800; font-size:.85rem; color:#8a7f70; margin-bottom:9px; }
.pb-line{ display:flex; align-items:center; gap:9px; padding:5px 0; }
.pb-line .q{
  background:#241c15; color:#fff; border-radius:7px; min-width:22px; height:22px; padding:0 5px;
  display:grid; place-items:center; font-weight:800; font-size:.72rem;
}
.pb-line .n{ flex:1; font-weight:600; font-size:.86rem; color:#2b2118; }
.pb-line .p{ font-size:.8rem; color:#241c15; }
.pb-card-foot{
  display:flex; align-items:center; justify-content:space-between; margin-top:9px; padding-top:9px;
  border-top:1.5px dashed #ece5dc; font-weight:800;
}
.pb-tbl{ font-size:.82rem; color:#5a5145; }

.pb-input{
  display:flex; gap:9px; padding:12px 14px; background:#fff; border-top:1px solid #efe7dc;
}
.pb-input input{
  flex:1; border:1.5px solid #ece5dc; border-radius:14px; padding:11px 15px;
  font-family:inherit; font-size:.9rem; outline:none; background:#faf7f2;
  transition:border-color .15s, box-shadow .15s;
}
.pb-input input:focus{ border-color:#7c5cff; background:#fff; box-shadow:0 0 0 3px rgba(124,92,255,.12); }
.pb-send{
  width:46px; border:0; border-radius:14px; cursor:pointer; font-size:1rem; color:#fff;
  background:linear-gradient(135deg,#8b6eff,#5b3ff0);
  transition:transform .13s, opacity .15s;
}
.pb-send:hover:not(:disabled){ transform:scale(1.06); }
.pb-send:disabled{ opacity:.4; cursor:default; }
[dir="ltr"] .pb-send{ transform:none; }
[dir="rtl"] .pb-send{ scale:-1 1; }

/* ===== v348: order assistant — premium chat ===== */
.pb-veil{ backdrop-filter:blur(3px); }
.pb-panel{ box-shadow:0 30px 80px rgba(30,10,80,.35); }

/* header: glowing avatar with a live dot */
.pb-head{ padding:15px 18px; position:relative; overflow:hidden; }
.pb-head::after{
  content:""; position:absolute; width:160px; height:160px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.25), transparent 70%);
  top:-80px; inset-inline-end:-40px;
}
.pb-ava{ position:relative; animation:pbAvaBob 3s ease-in-out infinite; }
@keyframes pbAvaBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3px); } }
.pb-ava::after{
  content:""; position:absolute; bottom:1px; inset-inline-end:1px; width:10px; height:10px;
  border-radius:50%; background:#4ade80; border:2px solid #6247f0;
}

/* bot messages carry a mini avatar; bubbles get asymmetric corners + spring in */
.pb-msg{ flex-direction:row; align-items:flex-end; gap:8px; }
.pb-msg.me{ justify-content:flex-end; }
.pb-mini{
  width:28px; height:28px; border-radius:10px; flex:none;
  background:linear-gradient(135deg,#ede9ff,#dcd2ff);
  display:grid; place-items:center; font-size:.85rem;
  box-shadow:0 2px 6px rgba(91,63,240,.15);
}
.pb-stack{ display:flex; flex-direction:column; gap:8px; max-width:86%; min-width:0; }
.pb-msg.me .pb-stack{ align-items:flex-end; }
.pb-bubble{
  border-radius:18px; box-shadow:0 3px 12px rgba(60,40,120,.08);
  animation:pbBubIn .3s cubic-bezier(.34,1.3,.64,1) both;
}
.pb-msg.bot .pb-bubble{ border-end-start-radius:6px; }
.pb-msg.me .pb-bubble{ border-end-end-radius:6px; box-shadow:0 6px 16px rgba(91,63,240,.30); }
@keyframes pbBubIn{ from{ opacity:0; transform:translateY(8px) scale(.94); } to{ opacity:1; transform:none; } }

/* the confirm card becomes a slick mini-receipt */
.pb-card{
  border:0; border-radius:18px; padding:0; overflow:hidden;
  box-shadow:0 10px 30px rgba(60,40,120,.14);
  animation:pbBubIn .35s cubic-bezier(.34,1.3,.64,1) both;
}
.pb-card-title{
  margin:0; padding:11px 16px; font-size:.8rem; color:#fff;
  background:linear-gradient(135deg,#8b6eff,#5b3ff0);
}
.pb-line{ padding:8px 16px; }
.pb-line + .pb-line{ border-top:1px dashed #f0ecfa; }
.pb-line .q{ background:linear-gradient(135deg,#8b6eff,#5b3ff0); border-radius:8px; }
.pb-card-foot{
  margin:0; padding:12px 16px; border-top:0;
  background:#241c15; color:#fff;
}
.pb-card-foot b{ color:#ffb74d; font-size:1.05rem; }
.pb-tbl{ color:#cfc4b4; }

/* chips: glassy, springy; confirm shines */
.pb-chips{ animation:pbBubIn .3s .08s cubic-bezier(.34,1.3,.64,1) both; }
.pb-chip{ box-shadow:0 2px 8px rgba(91,63,240,.08); }
.pb-chip:active{ transform:scale(.95); }
.pb-chip.main{
  position:relative; overflow:hidden; padding:10px 22px; font-size:.88rem;
  box-shadow:0 6px 16px rgba(34,160,94,.35);
}
.pb-chip.main::after{
  content:""; position:absolute; top:0; bottom:0; width:40%; inset-inline-start:-60%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  animation:tourShine 2.4s ease-in-out infinite .6s;
}

/* input: floating pill */
.pb-input{ padding:12px 14px calc(12px + env(safe-area-inset-bottom, 0px)); }
.pb-input input{ border-radius:999px; padding:12px 18px; }
.pb-send{ width:48px; border-radius:999px; box-shadow:0 6px 14px rgba(91,63,240,.35); }

@media (max-width:640px){
  .pb-panel{ inset-inline-start:8px; inset-inline-end:8px; width:auto; bottom:8px; height:min(78vh, 640px); }
  .pb-fab{ inset-inline-start:12px; bottom:12px; }
}

/* ===== v349: assistant list rows — reservations & co. as clean cards ===== */
.pb-rows{
  background:#fff; border-radius:16px; overflow:hidden; max-width:95%; min-width:250px;
  box-shadow:0 4px 16px rgba(90,70,50,.10); border:1px solid #efe7dc;
  animation:pbBubIn .32s cubic-bezier(.34,1.3,.64,1) both;
}
.pb-row{
  display:flex; align-items:center; gap:10px; padding:10px 13px;
}
.pb-row + .pb-row{ border-top:1px dashed #f0ecfa; }
.pb-row .tbl{
  flex:none; background:#f3efff; color:#5b3ff0; border-radius:9px; padding:5px 10px;
  font-weight:800; font-size:.76rem; white-space:nowrap;
}
.pb-row .mid{ flex:1; min-width:0; line-height:1.3; }
.pb-row .mid b{ display:block; font-size:.85rem; color:#241c15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pb-row .mid small{ color:#a99e8d; font-size:.72rem; }
.pb-row .badge{
  flex:none; background:#241c15; color:#ffb74d; border-radius:9px; padding:5px 10px;
  font-weight:800; font-size:.74rem;
}

/* ===== v350: assistant on real phones =====
   100vh on mobile means "screen minus nothing" — the browser's address bar sits on
   top of it, so the input row lands behind the chrome and the send button can't be
   tapped. dvh is the visible viewport and shrinks when the keyboard opens. */
@supports (height: 100dvh) {
  .pb-panel{ height:min(640px, calc(100dvh - 28px)); }
}
.pb-input{ padding-bottom:max(12px, env(safe-area-inset-bottom)); }
/* iOS zooms the page when a focused input's text is under 16px — never let it. */
@media (max-width: 720px){
  .pb-input input{ font-size:16px; }
  .pb-panel{ inset-inline-start:6px; inset-inline-end:6px; width:auto; bottom:6px; border-radius:20px; }
  .pb-bubble{ max-width:88%; font-size:.92rem; }
  .pb-rows{ max-width:100%; }
  .pb-row{ padding:9px 11px; gap:8px; }
  .pb-row .tbl{ font-size:.72rem; padding:4px 8px; }
  .pb-row .mid b{ font-size:.82rem; }
  .pb-chips{ gap:6px; }
}
@supports (height: 100dvh) {
  @media (max-width: 720px){
    .pb-panel{ height:min(82dvh, 660px); }
  }
}
/* A phone in landscape has almost no height — let the panel use nearly all of it. */
@media (max-height: 480px){
  .pb-panel{ height:calc(100dvh - 12px); bottom:6px; }
  .pb-head{ padding:9px 14px; }
  .pb-ava{ width:32px; height:32px; font-size:1.05rem; }
}
/* Nothing in the partner app may scroll the page sideways on a phone. */
@media (max-width: 720px){
  html, body{ overflow-x:hidden; }
}

/* ===== v351: assistant — close button, and a draggable title bar =====
   The header's decorative glow is a 160px circle pinned to the inline-end. In RTL
   that is the LEFT — precisely where ✕ sits — and a pseudo-element takes pointer
   events by default, so it silently swallowed every tap on close. */
.pb-head::after{ pointer-events:none; }
.pb-ava::after{ pointer-events:none; }
.pb-x{ position:relative; z-index:3; }
.pb-x:hover{ background:rgba(255,255,255,.34); }
.pb-x:active{ transform:scale(.92); }

/* Drag the panel by its title bar. The handle is the header minus the close button. */
.pb-head{ cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none; }
.pb-head.dragging{ cursor:grabbing; }
.pb-head-tx, .pb-ava{ pointer-events:none; }
.pb-panel.dragged{ animation:none; }
/* While dragging, the panel should feel picked up. */
.pb-panel.dragging{ transition:none; box-shadow:0 40px 90px rgba(30,10,80,.45); }
/* A phone panel spans the screen — dragging it would only hide it. */
@media (max-width: 720px){
  .pb-head{ cursor:default; }
}

/* ===== v352: the assistant takes the whole phone screen =====
   A floating card on a 6-inch screen wastes the only space there is. On phones the
   assistant becomes a full-screen app: edge to edge, no rounded corners, notch and
   home-bar respected, and the body is the only thing that scrolls. */
@media (max-width: 720px){
  .pb-veil{ display:none; }                    /* nothing behind it to dim */
  .pb-panel{
    inset:0; inset-inline-start:0; inset-inline-end:0;
    top:0; bottom:0; left:0; right:0;
    width:100%; max-width:none; height:100vh; max-height:none;
    border-radius:0;
    animation:pbSheetUp .28s cubic-bezier(.22,1,.36,1) both;
  }
  .pb-head{
    padding-top:calc(15px + env(safe-area-inset-top));
    padding-inline-start:max(18px, env(safe-area-inset-left));
    padding-inline-end:max(18px, env(safe-area-inset-right));
    border-radius:0; flex:none;
  }
  .pb-body{ padding:16px 14px calc(16px + env(safe-area-inset-bottom)); }
  .pb-input{
    flex:none;
    padding-inline-start:max(14px, env(safe-area-inset-left));
    padding-inline-end:max(14px, env(safe-area-inset-right));
  }
  .pb-x{ width:36px; height:36px; font-size:.9rem; }   /* a real thumb target */
  .pb-ava{ width:36px; height:36px; }
  .pb-bubble{ max-width:90%; }
}
@supports (height: 100dvh){
  @media (max-width: 720px){
    .pb-panel{ height:100dvh; }
  }
}
@keyframes pbSheetUp{
  from{ opacity:0; transform:translateY(18px); }
  to{ opacity:1; transform:translateY(0); }
}
/* The fab must not hover over a full-screen panel. */
@media (max-width: 720px){
  .pb-panel ~ .pb-fab, .pb-fab.hide{ display:none; }
}

/* ===== v353: a phone showing the desktop layout =====
   When the partner portal serves its 1280px layout to a handset, CSS sees a wide
   viewport and every `max-width:720px` rule switches off — including the assistant's
   full-screen treatment. `html.oo-desktop-mode` is set only in that exact case:
   real phone hardware, desktop-width viewport. */
html.oo-desktop-mode .pb-veil{ display:none; }
html.oo-desktop-mode .pb-panel{
  inset:0; top:0; bottom:0; left:0; right:0;
  inset-inline-start:0; inset-inline-end:0;
  width:100%; max-width:none; height:100vh; max-height:none;
  border-radius:0;
  animation:pbSheetUp .28s cubic-bezier(.22,1,.36,1) both;
}
html.oo-desktop-mode .pb-head{ cursor:default; border-radius:0; flex:none; }
html.oo-desktop-mode .pb-input{ flex:none; }
/* Everything is zoomed out here — the assistant's own controls must stay tappable. */
html.oo-desktop-mode .pb-fab{ padding:18px 28px; font-size:1.15rem; border-radius:999px; }
html.oo-desktop-mode .pb-fab-ic{ font-size:1.4rem; }
html.oo-desktop-mode .pb-x{ width:44px; height:44px; font-size:1.1rem; }
html.oo-desktop-mode .pb-ava{ width:46px; height:46px; font-size:1.5rem; }
html.oo-desktop-mode .pb-head-tx b{ font-size:1.15rem; }
html.oo-desktop-mode .pb-head-tx small{ font-size:.88rem; }
html.oo-desktop-mode .pb-bubble{ font-size:1.05rem; max-width:88%; }
html.oo-desktop-mode .pb-chip{ font-size:1rem; padding:10px 16px; }
html.oo-desktop-mode .pb-input input{ font-size:1.05rem; padding:14px 18px; }
html.oo-desktop-mode .pb-send{ width:58px; font-size:1.2rem; }
html.oo-desktop-mode .pb-row .mid b{ font-size:1rem; }
html.oo-desktop-mode .pb-row .tbl,
html.oo-desktop-mode .pb-row .badge{ font-size:.9rem; padding:7px 12px; }

/* ===== v354: the assistant launcher is an icon, nothing more =====
   A pill with a label competed with the page's own buttons. A single round icon
   reads as "assistant" everywhere and stops covering content on small screens. */
.mf-sr{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.pb-fab{
  width:56px; height:56px; padding:0; gap:0; border-radius:50%;
  justify-content:center;
  box-shadow:0 8px 22px rgba(91,63,240,.42), 0 0 0 0 rgba(124,92,255,.55);
  animation:tourIn .35s ease both, pbFabPulse 3.4s ease-out 1.2s infinite;
}
.pb-fab-ic{ font-size:1.5rem; line-height:1; }
.pb-fab:hover{ transform:translateY(-2px) scale(1.05); }
.pb-fab:active{ transform:scale(.94); }
/* A soft halo every few seconds — findable without shouting. */
@keyframes pbFabPulse{
  0%   { box-shadow:0 8px 22px rgba(91,63,240,.42), 0 0 0 0 rgba(124,92,255,.5); }
  55%  { box-shadow:0 8px 22px rgba(91,63,240,.42), 0 0 0 14px rgba(124,92,255,0); }
  100% { box-shadow:0 8px 22px rgba(91,63,240,.42), 0 0 0 0 rgba(124,92,255,0); }
}
@media (prefers-reduced-motion: reduce){
  .pb-fab{ animation:tourIn .35s ease both; }
}
/* Zoomed-out desktop layout on a phone: keep the icon thumb-sized. */
html.oo-desktop-mode .pb-fab{ width:78px; height:78px; padding:0; }
html.oo-desktop-mode .pb-fab-ic{ font-size:2.1rem; }
@media (max-width: 720px){
  .pb-fab{ width:54px; height:54px; }
  .pb-fab-ic{ font-size:1.42rem; }
}

/* ===== v355: skeleton rows — a card waiting for its own data ===== */
.sk-row{
  display:flex; align-items:center; gap:11px; padding:12px 14px;
  border-bottom:1px solid #f4efe8; animation:skFade .3s ease both;
}
.sk-row:last-child{ border-bottom:0; }
.sk-ava{ width:36px; height:36px; border-radius:12px; flex:none; }
.sk-mid{ flex:1; display:flex; flex-direction:column; gap:7px; min-width:0; }
.sk-line{ height:10px; border-radius:6px; display:block; }
.sk-line.w1{ width:52%; }
.sk-line.w2{ width:78%; height:8px; }
.sk-chip{ width:74px; height:24px; border-radius:999px; flex:none; }
.sk-ava, .sk-line, .sk-chip{
  background:linear-gradient(100deg,#f1ece5 30%,#faf7f2 50%,#f1ece5 70%);
  background-size:220% 100%;
  animation:skSweep 1.4s ease-in-out infinite;
}
@keyframes skSweep{ from{ background-position:180% 0; } to{ background-position:-40% 0; } }
@keyframes skFade{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
  .sk-ava, .sk-line, .sk-chip{ animation:none; background:#f1ece5; }
}

/* ===== v356: reviews — the score, where it comes from, and what people said ===== */
.rv-top{
  display:grid; grid-template-columns:auto 1fr auto; gap:18px; align-items:center;
  background:#fff; border:1px solid #f0e9df; border-radius:22px; padding:20px 22px;
  box-shadow:0 6px 22px rgba(90,70,50,.07); margin-bottom:16px;
  animation:rvUp .4s cubic-bezier(.22,1,.36,1) both;
}
@keyframes rvUp{ from{ opacity:0; transform:translateY(10px);} to{ opacity:1; transform:none;} }

.rv-score{ text-align:center; padding-inline-end:20px; border-inline-end:1px dashed #efe7dc; }
.rv-score .big{
  font-size:3.3rem; font-weight:800; line-height:1; letter-spacing:-.02em;
  background:linear-gradient(135deg,#f6a723,#f4511e); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.rv-score .stars{ color:#f6a723; font-size:1.05rem; letter-spacing:2px; margin-top:6px; }
.rv-score small{ display:block; color:#a99e8d; font-size:.76rem; margin-top:4px; white-space:nowrap; }

.rv-bars{ min-width:0; }
.rv-bars .hd{ font-size:.76rem; font-weight:700; color:#a99e8d; margin-bottom:7px; }
.rv-bar{
  display:flex; align-items:center; gap:9px; width:100%; padding:3px 6px; margin-bottom:2px;
  background:transparent; border:0; border-radius:9px; cursor:pointer; font-family:inherit;
  transition:background .15s;
}
.rv-bar:hover{ background:#faf7f2; }
.rv-bar.on{ background:#fff5e6; }
.rv-bar .lbl{ font-size:.76rem; font-weight:700; color:#7a6f61; width:32px; flex:none; text-align:end; }
.rv-bar .track{ flex:1; height:9px; border-radius:9px; background:#f2ece4; overflow:hidden; }
.rv-bar .fill{
  display:block; height:100%; border-radius:9px;
  animation:rvGrow .8s cubic-bezier(.22,1,.36,1) both;
}
.rv-bar .fill.s5{ background:linear-gradient(90deg,#4ade80,#22a05e); }
.rv-bar .fill.s4{ background:linear-gradient(90deg,#a3e635,#65a30d); }
.rv-bar .fill.s3{ background:linear-gradient(90deg,#fbbf24,#f59e0b); }
.rv-bar .fill.s2{ background:linear-gradient(90deg,#fb923c,#ea580c); }
.rv-bar .fill.s1{ background:linear-gradient(90deg,#f87171,#dc2626); }
@keyframes rvGrow{ from{ width:0 !important; } }
.rv-bar .num{ font-size:.76rem; font-weight:700; color:#5a5145; width:28px; flex:none; }

.rv-pills{ display:flex; flex-direction:column; gap:8px; }
.rv-pill{
  display:flex; align-items:center; gap:9px; padding:9px 13px; border-radius:14px;
  background:#faf7f2; min-width:132px;
}
.rv-pill .ic{ font-size:1.1rem; }
.rv-pill b{ display:block; font-size:1.05rem; line-height:1.1; }
.rv-pill small{ color:#a99e8d; font-size:.7rem; }
.rv-pill.good{ background:#eafaf0; } .rv-pill.good b{ color:#177245; }
.rv-pill.warn{ background:#fdeeee; } .rv-pill.warn b{ color:#b3261e; }
.rv-pill.note{ background:#f3efff; } .rv-pill.note b{ color:#5b3ff0; }

.rv-filters{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
.rv-chip{
  display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:999px;
  border:1.5px solid #ece5dc; background:#fff; color:#5a5145; cursor:pointer;
  font-family:inherit; font-size:.82rem; font-weight:700; transition:all .16s;
}
.rv-chip i{ font-style:normal; font-size:.72rem; opacity:.6; }
.rv-chip:hover{ border-color:#f6a723; transform:translateY(-1px); }
.rv-chip.on{ background:linear-gradient(135deg,#f6a723,#f4511e); border-color:transparent; color:#fff; }
.rv-chip.on i{ opacity:.85; }
.rv-chip.danger.on{ background:linear-gradient(135deg,#f87171,#dc2626); }

.rv-list{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; }
.rv-card{
  background:#fff; border:1px solid #f0e9df; border-radius:18px; padding:15px 17px;
  border-inline-start:4px solid #e6dfd4;
  box-shadow:0 3px 14px rgba(90,70,50,.06);
  animation:rvUp .35s cubic-bezier(.22,1,.36,1) both;
  transition:transform .16s, box-shadow .16s;
}
.rv-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(90,70,50,.12); }
.rv-card.good{ border-inline-start-color:#22a05e; }
.rv-card.mid{ border-inline-start-color:#f59e0b; }
.rv-card.low{ border-inline-start-color:#dc2626; background:#fffaf9; }
.rv-card .hd{ display:flex; align-items:center; gap:10px; }
.rv-card .ava{
  width:38px; height:38px; border-radius:13px; flex:none; color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:.95rem;
}
.rv-card .who{ flex:1; min-width:0; line-height:1.3; }
.rv-card .who b{ display:block; font-size:.88rem; color:#241c15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rv-card .who small{ color:#a99e8d; font-size:.72rem; }
.rv-card .rate{ color:#f6a723; font-size:.82rem; letter-spacing:1px; flex:none; }
.rv-card .say{
  margin:11px 0 0; font-size:.88rem; line-height:1.65; color:#3d342b;
  padding-inline-start:11px; border-inline-start:2px solid #f2ece4;
}
.rv-card .say.muted{ color:#b5aa99; font-style:italic; border-inline-start-style:dotted; }
.rv-card .meta{ margin-top:10px; }
.rv-card .tag{
  display:inline-block; background:#f3efff; color:#5b3ff0; border-radius:8px;
  padding:4px 9px; font-size:.72rem; font-weight:700;
}

@media (max-width: 900px){
  .rv-top{ grid-template-columns:auto 1fr; }
  .rv-pills{ grid-column:1 / -1; flex-direction:row; }
  .rv-pill{ flex:1; min-width:0; }
}
@media (max-width: 560px){
  .rv-top{ grid-template-columns:1fr; gap:14px; padding:16px; }
  .rv-score{ border-inline-end:0; border-bottom:1px dashed #efe7dc; padding:0 0 12px; }
  .rv-list{ grid-template-columns:1fr; }
  .rv-pill{ min-width:0; padding:8px 10px; }
  .rv-pill small{ font-size:.64rem; }
}

/* ===== v357: visits — trends, an average line, and what the shape means ===== */
.pv-tile{ position:relative; }
.pv-tile .tr{
  position:absolute; top:10px; inset-inline-end:12px;
  font-size:.68rem; font-weight:800; padding:3px 7px; border-radius:999px;
  backdrop-filter:blur(4px);
}
.pv-tile .tr.up{ background:rgba(74,222,128,.22); color:#bbf7d0; }
.pv-tile .tr.down{ background:rgba(248,113,113,.22); color:#fecaca; }

/* The chart gets a plot area so the mean rule can sit inside it. */
.pv-plot{ position:relative; }
.pv-mean{
  position:absolute; inset-inline:0; height:0; border-top:1.5px dashed #d9cfc1;
  pointer-events:none; z-index:1; margin-bottom:26px;
}
.pv-mean span{
  position:absolute; inset-inline-end:0; top:-9px; background:#fff; padding:0 6px;
  font-size:.66rem; font-weight:700; color:#a99e8d;
}
.pv-bars.dense .pv-col{ min-width:0; }
.pv-bars.dense .bar{ border-radius:4px 4px 0 0; }
.pv-bars.dense .lb{ font-size:.6rem; }

.pv-insights{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; margin-top:16px;
  padding-top:14px; border-top:1px dashed #efe7dc;
}
.pv-ins{ display:flex; align-items:center; gap:10px; }
.pv-ins .ic{
  width:36px; height:36px; border-radius:12px; background:#faf7f2; flex:none;
  display:grid; place-items:center; font-size:1.05rem;
}
.pv-ins b{ display:block; font-size:.92rem; color:#241c15; line-height:1.2;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pv-ins small{ color:#a99e8d; font-size:.7rem; }

.pv-prod .ct small{ display:block; font-size:.64rem; color:#a99e8d; font-weight:600; }

@media (max-width: 600px){
  .pv-insights{ grid-template-columns:1fr; gap:12px; }
  .pv-tile .tr{ position:static; display:inline-block; margin-top:5px; }
}

/* ===== v358: raw materials — the kitchen's store cupboard ===== */
.mt-top{ display:flex; flex-wrap:wrap; gap:10px; align-items:stretch; margin-bottom:14px; }
.mt-sum{
  display:flex; align-items:center; gap:11px; padding:13px 17px; border-radius:16px;
  background:#fff; border:1.5px solid #f0e9df; font-family:inherit; cursor:default;
  box-shadow:0 3px 14px rgba(90,70,50,.06); transition:all .16s; text-align:start;
}
button.mt-sum{ cursor:pointer; }
button.mt-sum:hover{ transform:translateY(-2px); box-shadow:0 8px 22px rgba(90,70,50,.12); }
.mt-sum .ic{ font-size:1.35rem; }
.mt-sum b{ display:block; font-size:1.2rem; line-height:1.1; color:#241c15; }
.mt-sum small{ color:#a99e8d; font-size:.72rem; }
.mt-sum.v{ background:linear-gradient(135deg,#fff8ec,#fff); }
.mt-sum.w.on{ background:linear-gradient(135deg,#f6a723,#f4511e); border-color:transparent; }
.mt-sum.d.on{ background:linear-gradient(135deg,#f87171,#dc2626); border-color:transparent; }
.mt-sum.on b, .mt-sum.on small{ color:#fff; }
.mt-add{
  margin-inline-start:auto; display:inline-flex; align-items:center; gap:7px;
  padding:0 22px; border:0; border-radius:16px; cursor:pointer; font-family:inherit;
  font-weight:800; font-size:.92rem; color:#fff;
  background:linear-gradient(135deg,#f6a723,#f4511e);
  box-shadow:0 8px 20px rgba(244,81,30,.32); transition:transform .15s;
}
.mt-add:hover{ transform:translateY(-2px); }

.mt-tools{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.mt-search{
  display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #ece5dc;
  border-radius:14px; padding:9px 14px; min-width:240px; flex:1; max-width:360px;
}
.mt-search input{ flex:1; border:0; outline:none; background:transparent; font-family:inherit; font-size:.88rem; }
.mt-search button{ border:0; background:transparent; cursor:pointer; color:#a99e8d; font-size:.8rem; }
.mt-cats{ display:flex; flex-wrap:wrap; gap:7px; }
.mt-cats button{
  padding:8px 13px; border-radius:999px; border:1.5px solid #ece5dc; background:#fff;
  color:#5a5145; cursor:pointer; font-family:inherit; font-size:.8rem; font-weight:700;
  transition:all .16s;
}
.mt-cats button:hover{ border-color:#f6a723; }
.mt-cats button.on{ background:#241c15; border-color:#241c15; color:#fff; }

.mt-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(268px, 1fr)); gap:12px; }
.mt-card{
  background:#fff; border:1px solid #f0e9df; border-radius:18px; padding:15px 16px;
  border-top:4px solid #e6dfd4;
  box-shadow:0 3px 14px rgba(90,70,50,.06);
  animation:rvUp .34s cubic-bezier(.22,1,.36,1) both;
  transition:transform .16s, box-shadow .16s;
}
.mt-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(90,70,50,.12); }
.mt-card.low{ border-top-color:#f6a723; }
.mt-card.out{ border-top-color:#dc2626; background:#fffafa; }
.mt-card .hd{ display:flex; align-items:center; gap:10px; }
.mt-card .hd .ic{
  width:38px; height:38px; border-radius:13px; background:#faf7f2; flex:none;
  display:grid; place-items:center; font-size:1.15rem;
}
.mt-card .nm{ flex:1; min-width:0; line-height:1.3; }
.mt-card .nm b{ display:block; font-size:.92rem; color:#241c15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mt-card .nm small{ color:#a99e8d; font-size:.71rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block; }

.mt-card .qty{ display:flex; align-items:baseline; gap:6px; margin:12px 0 8px; flex-wrap:wrap; }
.mt-card .qty .big{ font-size:1.9rem; font-weight:800; line-height:1; color:#241c15; letter-spacing:-.02em; }
.mt-card .qty .un{ font-size:.84rem; font-weight:700; color:#a99e8d; }
.mt-card .qty .flag{
  margin-inline-start:auto; font-size:.66rem; font-weight:800; padding:3px 9px; border-radius:999px;
}
.mt-card .qty .flag.low{ background:#fff3e0; color:#b45309; }
.mt-card .qty .flag.out{ background:#fdeeee; color:#b3261e; }

.mt-card .bar{ position:relative; height:7px; border-radius:7px; background:#f2ece4; overflow:hidden; margin-bottom:11px; }
.mt-card .bar .fill{ display:block; height:100%; border-radius:7px; background:linear-gradient(90deg,#4ade80,#22a05e); }
.mt-card.low .bar .fill{ background:linear-gradient(90deg,#fbbf24,#f59e0b); }
.mt-card.out .bar .fill{ background:#dc2626; }
/* Where the reorder level sits — a third of the way along the track. */
.mt-card .bar .mark{ position:absolute; top:-2px; bottom:-2px; inset-inline-start:33.33%; width:2px; background:#c9bfae; }

.mt-card .ft{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:10px; border-top:1px dashed #f0ece4; font-size:.8rem;
}
.mt-card .ft .cost{ color:#7a6f61; font-weight:600; }
.mt-card .ft .cost i{ font-style:normal; opacity:.65; font-size:.72rem; }
.mt-card .ft .val{ font-weight:800; color:#241c15; }

.mt-card .acts{ display:flex; gap:6px; margin-top:11px; }
.mt-card .acts button{
  border:1.5px solid #ece5dc; background:#fff; border-radius:11px; cursor:pointer;
  font-family:inherit; font-weight:800; color:#5a5145; transition:all .14s;
}
.mt-card .acts .mn, .mt-card .acts .pl{ width:38px; height:34px; font-size:1.05rem; }
.mt-card .acts .mn:hover:not(:disabled){ background:#fdeeee; border-color:#f3b0ab; color:#b3261e; }
.mt-card .acts .pl:hover{ background:#eafaf0; border-color:#9ad9b6; color:#177245; }
.mt-card .acts button:disabled{ opacity:.4; cursor:default; }
.mt-card .acts .rs{
  flex:1; height:34px; display:inline-flex; align-items:center; justify-content:center; gap:5px;
  font-size:.78rem;
}
.mt-card .acts .rs:hover{ background:#f3efff; border-color:#c3b4ff; color:#5b3ff0; }

@media (max-width: 640px){
  .mt-top{ gap:8px; }
  .mt-sum{ flex:1; min-width:calc(50% - 4px); padding:11px 13px; }
  .mt-add{ margin-inline-start:0; width:100%; padding:13px; justify-content:center; }
  .mt-search{ max-width:none; }
  .mt-grid{ grid-template-columns:1fr; }
}

/* ===== v359: recipes, purchase invoices, consumption — the inventory suite ===== */

/* ---- shared summary pills ---- */
.rc-top, .pu-top, .cn-top{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.rc-sum, .pu-sum, .cn-sum{
  display:flex; align-items:center; gap:11px; padding:12px 16px; border-radius:16px;
  background:#fff; border:1.5px solid #f0e9df; box-shadow:0 3px 14px rgba(90,70,50,.06);
}
.rc-sum .ic, .pu-sum .ic, .cn-sum .ic{ font-size:1.3rem; }
.rc-sum b, .pu-sum b, .cn-sum b{ display:block; font-size:1.1rem; line-height:1.1; color:#241c15;
  max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-sum small, .pu-sum small, .cn-sum small{ color:#a99e8d; font-size:.71rem; }
.rc-sum.warn b{ color:#b45309; }
.pu-sum.warn{ background:#fff8ec; border-color:#f3ddb5; }
.pu-sum.warn b{ color:#b45309; }

/* ---- recipes grid ---- */
.rc-search{
  display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #ece5dc;
  border-radius:14px; padding:9px 14px; flex:1; min-width:200px; max-width:320px;
}
.rc-search input{ flex:1; border:0; outline:none; background:transparent; font-family:inherit; font-size:.88rem; }
.rc-onlymiss{ display:flex; align-items:center; gap:7px; font-size:.82rem; font-weight:700; color:#5a5145; cursor:pointer; }
.rc-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:10px; }
.rc-card{
  display:flex; align-items:center; gap:11px; padding:11px 13px; border-radius:16px;
  background:#fff; border:1.5px solid #f0e9df; cursor:pointer; font-family:inherit; text-align:start;
  box-shadow:0 3px 12px rgba(90,70,50,.05); transition:all .16s;
  animation:rvUp .3s cubic-bezier(.22,1,.36,1) both;
}
.rc-card:hover{ transform:translateY(-2px); box-shadow:0 9px 24px rgba(90,70,50,.12); border-color:#f6a723; }
.rc-card.none{ border-style:dashed; }
.rc-card .ph{ width:44px; height:44px; border-radius:13px; object-fit:cover; flex:none;
  display:grid; place-items:center; font-size:1.3rem; background:#faf7f2; }
.rc-card .tx{ flex:1; min-width:0; line-height:1.3; }
.rc-card .tx b{ display:block; font-size:.86rem; color:#241c15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-card .tx small{ color:#a99e8d; font-size:.71rem; }
.rc-card .tx small.miss{ color:#c9853a; font-style:italic; }
.rc-card .mg{
  flex:none; min-width:44px; text-align:center; padding:6px 8px; border-radius:10px;
  font-weight:800; font-size:.8rem;
}
.rc-card .mg.good{ background:#eafaf0; color:#177245; }
.rc-card .mg.mid{ background:#fff3e0; color:#b45309; }
.rc-card .mg.bad{ background:#fdeeee; color:#b3261e; }
.rc-card .mg.add{ background:#f3efff; color:#5b3ff0; font-size:1rem; }

/* ---- the recipe sheet ---- */
.rc-veil{ position:fixed; inset:0; z-index:1290; background:rgba(24,15,8,.35); animation:rvFade .2s both; }
.pg-anim:has(.rc-veil){ animation:none !important; transform:none !important; }
.rc-sheet{
  position:fixed; z-index:1300; inset-inline-end:0; top:0; bottom:0;
  width:min(460px, 100vw); background:#faf7f2; display:flex; flex-direction:column;
  box-shadow:-18px 0 50px rgba(0,0,0,.22);
  animation:rcSlide .3s cubic-bezier(.22,1,.36,1) both;
}
@keyframes rcSlide{ from{ transform:translateX(60px); opacity:0; } to{ transform:none; opacity:1; } }
[dir="rtl"] .rc-sheet{ animation-name:rcSlideRtl; }
@keyframes rcSlideRtl{ from{ transform:translateX(-60px); opacity:0; } to{ transform:none; opacity:1; } }
.rc-sheet .hd{
  display:flex; align-items:center; gap:11px; padding:16px 18px;
  background:linear-gradient(135deg,#f6a723,#f4511e); color:#fff;
}
.rc-sheet .hd .tx{ flex:1; min-width:0; }
.rc-sheet .hd b{ font-size:1rem; }
.rc-sheet .hd small{ display:block; opacity:.85; font-size:.73rem; }
.rc-sheet .hd .x{
  width:32px; height:32px; border-radius:50%; border:0; background:rgba(255,255,255,.22);
  color:#fff; cursor:pointer; display:grid; place-items:center;
}
.rc-sheet .body{ flex:1; overflow-y:auto; padding:16px; }
.rc-empty{ text-align:center; color:#a99e8d; padding:26px 0; font-size:.9rem; }
.rc-line{
  display:flex; align-items:center; gap:9px; background:#fff; border:1px solid #f0e9df;
  border-radius:13px; padding:9px 12px; margin-bottom:8px;
}
.rc-line .nm{ flex:1; font-weight:700; font-size:.85rem; color:#241c15; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rc-line input{
  width:76px; border:1.5px solid #ece5dc; border-radius:9px; padding:7px 9px;
  font-family:inherit; font-size:.85rem; text-align:center; outline:none;
}
.rc-line input:focus{ border-color:#f6a723; }
.rc-line .un{ font-size:.72rem; color:#a99e8d; font-weight:700; width:34px; }
.rc-line .cs{ font-size:.78rem; font-weight:700; color:#5a5145; min-width:64px; text-align:end; }
.rc-line .rm{ border:0; background:transparent; color:#c9bfae; cursor:pointer; font-size:.8rem; }
.rc-line .rm:hover{ color:#b3261e; }
.rc-addrow{ display:flex; gap:8px; margin-top:12px; }
.rc-addrow select{
  flex:1; border:1.5px solid #ece5dc; border-radius:11px; padding:10px 12px;
  font-family:inherit; font-size:.85rem; background:#fff; outline:none;
}
.rc-addrow button{
  padding:0 18px; border:0; border-radius:11px; cursor:pointer; font-family:inherit;
  font-weight:800; color:#fff; background:#241c15;
}
.rc-addrow button:disabled{ opacity:.4; cursor:default; }
.rc-sheet .ft{
  display:flex; align-items:center; gap:12px; padding:14px 16px; background:#fff;
  border-top:1px solid #efe7dc;
}
.rc-sheet .ft .cost{ flex:1; line-height:1.3; }
.rc-sheet .ft .cost small{ display:block; color:#a99e8d; font-size:.7rem; }
.rc-sheet .ft .cost b{ font-size:1.15rem; color:#241c15; }
.rc-sheet .ft .cost i{ font-style:normal; font-size:.74rem; color:#a99e8d; margin-inline-start:8px; }
.rc-sheet .ft .save{
  padding:12px 26px; border:0; border-radius:13px; cursor:pointer; font-family:inherit;
  font-weight:800; color:#fff; background:linear-gradient(135deg,#2fb56b,#22a05e);
  box-shadow:0 6px 16px rgba(34,160,94,.3);
}
.rc-sheet .ft .save:disabled{ opacity:.6; }

/* ---- purchases ---- */
.pu-add{
  margin-inline-start:auto; display:inline-flex; align-items:center; gap:7px;
  padding:12px 22px; border:0; border-radius:16px; cursor:pointer; font-family:inherit;
  font-weight:800; font-size:.92rem; color:#fff;
  background:linear-gradient(135deg,#7c5cff,#5b3ff0);
  box-shadow:0 8px 20px rgba(91,63,240,.3); transition:transform .15s;
}
.pu-add:hover{ transform:translateY(-2px); }
.pu-list{ display:flex; flex-direction:column; gap:9px; }
.pu-card{
  background:#fff; border:1px solid #f0e9df; border-radius:16px; overflow:hidden;
  border-inline-start:4px solid #22a05e; box-shadow:0 3px 12px rgba(90,70,50,.05);
  animation:rvUp .3s both;
}
.pu-card.unpaid{ border-inline-start-color:#f6a723; }
.pu-card .row{
  display:flex; align-items:center; gap:12px; width:100%; padding:13px 16px;
  border:0; background:transparent; cursor:pointer; font-family:inherit; text-align:start;
}
.pu-card .row:hover{ background:#faf7f2; }
.pu-card .row .ic{ font-size:1.15rem; }
.pu-card .mid{ flex:1; min-width:0; line-height:1.3; }
.pu-card .mid b{ display:block; font-size:.9rem; color:#241c15; }
.pu-card .mid small{ color:#a99e8d; font-size:.73rem; }
.pu-card .lines{ font-size:.74rem; color:#a99e8d; font-weight:700; }
.pu-card .amt{ font-weight:800; font-size:.95rem; color:#241c15; }
.pu-card .det{ border-top:1px dashed #efe7dc; padding:12px 16px; background:#fdfbf7; }
.pu-card .ln{
  display:flex; align-items:center; gap:10px; padding:6px 0; font-size:.83rem;
}
.pu-card .ln + .ln{ border-top:1px solid #f6f1ea; }
.pu-card .ln .nm{ flex:1; font-weight:600; color:#3d342b; }
.pu-card .ln .qt{ color:#5a5145; }
.pu-card .ln .uc{ color:#a99e8d; font-size:.76rem; }
.pu-card .ln .tt{ font-weight:800; color:#241c15; min-width:70px; text-align:end; }
.pu-card .nt{ margin-top:8px; font-size:.78rem; color:#7a6f61; }
.pu-card .acts{ display:flex; gap:8px; margin-top:11px; }
.pu-card .acts button{
  padding:8px 16px; border:1.5px solid #ece5dc; border-radius:10px; background:#fff;
  cursor:pointer; font-family:inherit; font-weight:700; font-size:.78rem; color:#5a5145;
}
.pu-card .acts .pay:hover{ background:#eafaf0; border-color:#9ad9b6; color:#177245; }
.pu-card .acts .del:hover{ background:#fdeeee; border-color:#f3b0ab; color:#b3261e; }

/* ---- purchase dialog lines ---- */
.pu-dlg-lines{ border:1.5px solid #ece5dc; border-radius:14px; padding:10px 12px; background:#fdfbf7; }
.pu-dlg-line{ display:flex; align-items:center; gap:8px; padding:6px 0; }
.pu-dlg-line + .pu-dlg-line{ border-top:1px solid #f4efe8; }
.pu-dlg-line .nm{ flex:1; font-weight:700; font-size:.84rem; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pu-dlg-line input{
  width:88px; border:1.5px solid #ece5dc; border-radius:9px; padding:7px 8px;
  font-family:inherit; font-size:.84rem; text-align:center; outline:none; background:#fff;
}
.pu-dlg-line input:focus{ border-color:#7c5cff; }
.pu-dlg-line .un{ font-size:.7rem; color:#a99e8d; width:30px; }
.pu-dlg-line .tt{ font-weight:800; font-size:.82rem; min-width:66px; text-align:end; }
.pu-dlg-line .rm{ border:0; background:transparent; color:#c9bfae; cursor:pointer; }
.pu-dlg-line .rm:hover{ color:#b3261e; }
.pu-dlg-add{ display:flex; gap:8px; margin-top:9px; }
.pu-dlg-add select{
  flex:1; border:1.5px solid #ece5dc; border-radius:10px; padding:9px 11px;
  font-family:inherit; font-size:.84rem; background:#fff; outline:none;
}
.pu-dlg-add button{
  padding:0 16px; border:0; border-radius:10px; cursor:pointer; font-family:inherit;
  font-weight:800; color:#fff; background:#241c15;
}
.pu-dlg-add button:disabled{ opacity:.4; }

/* ---- consumption ---- */
.cn-chips{ display:flex; gap:8px; margin-bottom:14px; }
.cn-chips button{
  padding:9px 18px; border-radius:999px; border:1.5px solid #ece5dc; background:#fff;
  color:#5a5145; cursor:pointer; font-family:inherit; font-size:.84rem; font-weight:700;
  transition:all .16s;
}
.cn-chips button.on{ background:#241c15; border-color:#241c15; color:#fff; }
.cn-card{
  background:#fff; border:1px solid #f0e9df; border-radius:18px; padding:16px 18px;
  box-shadow:0 3px 14px rgba(90,70,50,.06); margin-bottom:14px; animation:rvUp .35s both;
}
.cn-card .hd{ font-weight:800; font-size:.95rem; color:#241c15; margin-bottom:10px; }
.cn-prod{ display:flex; align-items:center; gap:10px; padding:7px 0; }
.cn-prod + .cn-prod{ border-top:1px solid #f8f4ee; }
.cn-prod .nm{ flex:0 0 32%; font-weight:600; font-size:.84rem; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cn-prod .sold{ font-size:.74rem; color:#a99e8d; font-weight:700; width:44px; }
.cn-prod .meter{ flex:1; height:8px; border-radius:8px; background:#f2ece4; overflow:hidden; }
.cn-prod .meter span{ display:block; height:100%; border-radius:8px;
  background:linear-gradient(90deg,#f6a723,#f4511e); animation:rvGrow .7s both; }
.cn-prod .ct{ font-weight:800; font-size:.82rem; min-width:72px; text-align:end; }
.cn-row{ border:1px solid #f0e9df; border-radius:14px; margin-bottom:8px; overflow:hidden; }
.cn-row.urgent{ border-color:#f3b0ab; background:#fffafa; }
.cn-row .line{
  display:flex; align-items:center; gap:11px; width:100%; padding:11px 14px;
  border:0; background:transparent; cursor:pointer; font-family:inherit; text-align:start;
}
.cn-row .line:hover{ background:#faf7f2; }
.cn-row .ic{ font-size:1.1rem; }
.cn-row .mid{ flex:1; min-width:0; line-height:1.3; }
.cn-row .mid b{ display:block; font-size:.88rem; color:#241c15; }
.cn-row .mid small{ color:#a99e8d; font-size:.73rem; }
.cn-row .days{
  font-size:.7rem; font-weight:800; padding:4px 10px; border-radius:999px;
  background:#eafaf0; color:#177245;
}
.cn-row .days.mid{ background:#fff3e0; color:#b45309; }
.cn-row .days.bad{ background:#fdeeee; color:#b3261e; }
.cn-row .det{ border-top:1px dashed #efe7dc; padding:10px 14px; background:#fdfbf7; }
.cn-row .st{ display:flex; justify-content:space-between; font-size:.76rem; color:#7a6f61; margin-bottom:6px; }
.cn-row .ln{ display:flex; align-items:center; gap:10px; padding:5px 0; font-size:.8rem; }
.cn-row .ln + .ln{ border-top:1px solid #f6f1ea; }
.cn-row .ln .nm{ flex:1; font-weight:600; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cn-row .ln .sold{ color:#a99e8d; font-size:.72rem; width:40px; }
.cn-row .ln .qt{ color:#5a5145; min-width:70px; text-align:end; }
.cn-row .ln .ct{ font-weight:700; min-width:64px; text-align:end; }

@media (max-width: 640px){
  .rc-grid{ grid-template-columns:1fr; }
  .rc-sheet{ width:100vw; }
  .pu-add{ margin-inline-start:0; width:100%; justify-content:center; }
  .cn-prod .nm{ flex-basis:40%; }
  .pu-dlg-line{ flex-wrap:wrap; }
}

/* ===== v360: the stock bell — orders ring it when the shelf runs thin ===== */
.sb-panel{ width:320px; max-width:86vw; padding:6px 0; }
.sb-hd{ font-weight:800; font-size:.86rem; color:#241c15; padding:8px 15px 7px; border-bottom:1px solid #f0e9df; }
.sb-empty{ padding:22px 15px; text-align:center; color:#a99e8d; font-size:.85rem; }
.sb-row{
  display:flex; align-items:flex-start; gap:10px; width:100%; padding:9px 15px;
  border:0; background:transparent; cursor:pointer; font-family:inherit; text-align:start;
  transition:background .13s;
}
.sb-row:hover{ background:#faf7f2; }
.sb-row .ic{ font-size:1rem; margin-top:1px; }
.sb-row .tx{ flex:1; min-width:0; line-height:1.35; }
.sb-row .tx b{ display:block; font-size:.84rem; color:#241c15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sb-row .tx small{ color:#a99e8d; font-size:.72rem; }
.sb-row.fresh{ background:#fff8ec; }
.sb-row.fresh:hover{ background:#fff3dd; }
.sb-row.out.fresh{ background:#fdf1f0; }
.sb-row.out.fresh:hover{ background:#fbe5e3; }
.sb-all{
  display:block; text-align:center; padding:9px 0 7px; margin-top:4px;
  border-top:1px solid #f0e9df; font-size:.8rem; font-weight:700; color:#5b3ff0;
  text-decoration:none;
}
.sb-all:hover{ background:#f8f6ff; }

/* ===== v361: barcode labels — pick on screen, print on paper ===== */
.lb-tools{ display:flex; flex-wrap:wrap; gap:9px; align-items:center; margin-bottom:13px; }
.lb-tabs{ display:flex; gap:6px; }
.lb-tabs button{
  padding:9px 16px; border-radius:999px; border:1.5px solid #ece5dc; background:#fff;
  color:#5a5145; cursor:pointer; font-family:inherit; font-size:.84rem; font-weight:700;
}
.lb-tabs button.on{ background:#241c15; border-color:#241c15; color:#fff; }
.lb-tabs button i{ font-style:normal; font-size:.72rem; opacity:.65; margin-inline-start:3px; }
.lb-search{
  display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #ece5dc;
  border-radius:12px; padding:8px 13px; flex:1; min-width:170px; max-width:280px;
}
.lb-search input{ flex:1; border:0; outline:none; background:transparent; font-family:inherit; font-size:.86rem; }
.lb-copies{ display:flex; align-items:center; gap:7px; font-size:.8rem; font-weight:700; color:#5a5145; }
.lb-copies select{
  border:1.5px solid #ece5dc; border-radius:10px; padding:7px 10px; background:#fff;
  font-family:inherit; font-size:.84rem; outline:none;
}
.lb-sel{
  padding:8px 13px; border-radius:10px; border:1.5px solid #ece5dc; background:#fff;
  cursor:pointer; font-family:inherit; font-size:.78rem; font-weight:700; color:#5a5145;
}
.lb-sel:hover{ border-color:#f6a723; }
.lb-print{
  display:inline-flex; align-items:center; gap:7px; padding:11px 20px; border:0;
  border-radius:13px; cursor:pointer; font-family:inherit; font-weight:800; color:#fff;
  background:linear-gradient(135deg,#f6a723,#f4511e); box-shadow:0 7px 18px rgba(244,81,30,.3);
}
.lb-print:disabled{ opacity:.45; cursor:default; box-shadow:none; }

.lb-pick{ display:grid; grid-template-columns:repeat(auto-fill, minmax(215px, 1fr)); gap:8px; margin-bottom:20px; }
.lb-item{
  padding:10px 13px; border-radius:13px; border:1.5px solid #ece5dc; background:#fff;
  cursor:pointer; font-family:inherit; text-align:start; transition:all .14s; line-height:1.35;
}
.lb-item:hover{ border-color:#f6a723; }
.lb-item.on{ border-color:#22a05e; background:#f2fbf6; box-shadow:inset 0 0 0 1px #22a05e; }
.lb-item b{ display:block; font-size:.84rem; color:#241c15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lb-item small{ color:#a99e8d; font-size:.71rem; }

/* ===== v475: the label sheet is chosen, not just filtered ===== */
/* Each card carries its own tick, so what prints is readable at a glance. */
.lb-item{ display:flex; align-items:center; gap:10px; }
.lb-item .tk{
  flex:0 0 auto; width:19px; height:19px; border-radius:6px; border:1.5px solid #d9cfc1;
  background:#fff; color:#fff; font-size:.72rem; font-weight:900; line-height:17px;
  text-align:center; transition:all .14s;
}
.lb-item.on .tk{ background:#22a05e; border-color:#22a05e; }
.lb-item .tx{ min-width:0; flex:1; }

.lb-pickbar{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  margin:0 0 11px; padding:9px 13px; border-radius:12px;
  background:#fbf7f2; border:1.5px solid #f0e8dd;
}
.lb-pickbar .lb-sel{ padding:6px 12px; font-size:.74rem; }
.lb-pickbar .lb-sel:disabled{ opacity:.4; cursor:default; border-color:#ece5dc; }
.lb-count{
  font-size:.76rem; font-weight:800; color:#8a7f70; letter-spacing:.03em;
  margin-inline-end:auto;
}
/* ===== v480: the visitor board — one row per address, expandable =====
   A log read by eye, so the address is monospaced and the columns line up; the page
   a visitor last opened is the widest column because it is the interesting one. */
.vis-stats{ display:flex; flex-wrap:wrap; gap:12px; }
.vis-stat{
  display:flex; align-items:center; gap:12px; flex:1 1 190px;
  padding:14px 16px; border-radius:16px;
  background:var(--mud-palette-surface); border:1px solid var(--mud-palette-lines-default);
}
.vis-stat .ic{
  width:42px; height:42px; border-radius:13px; flex:none;
  display:flex; align-items:center; justify-content:center;
}
.vis-stat .num{ font-size:1.4rem; font-weight:800; line-height:1.1; }
.vis-stat .lbl{ font-size:.76rem; color:var(--mud-palette-text-secondary); font-weight:600; }

.vis-row{
  display:grid; align-items:center; gap:10px; cursor:pointer;
  grid-template-columns:18px 140px minmax(90px,1fr) minmax(120px,2fr) 54px 54px 92px;
  padding:11px 14px; border-bottom:1px solid var(--mud-palette-lines-default);
  transition:background .12s;
}
.vis-row:hover{ background:rgba(255,90,0,.05); }
.vis-row.open{ background:rgba(255,90,0,.08); }
.vis-chevron{ color:var(--mud-palette-text-secondary); font-size:.8rem; }
.vis-ip{
  font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.82rem; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vis-who, .vis-last, .vis-when{
  font-size:.8rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vis-who i{ color:var(--mud-palette-text-secondary); font-style:normal; opacity:.7; }
.vis-last{ color:var(--mud-palette-text-secondary); unicode-bidi:plaintext; }
.vis-count, .vis-pages{
  font-size:.78rem; font-weight:800; text-align:center; border-radius:8px; padding:3px 0;
}
.vis-count{ background:rgba(255,90,0,.13); color:#c2410c; }
.vis-pages{ background:rgba(66,165,245,.14); color:#1565c0; }
.vis-when{ color:var(--mud-palette-text-secondary); text-align:end; }

.vis-detail{
  padding:10px 14px 14px 42px;
  border-bottom:1px solid var(--mud-palette-lines-default);
  background:rgba(0,0,0,.015);
}
.vis-firstseen{
  font-size:.75rem; color:var(--mud-palette-text-secondary);
  font-weight:700; margin-bottom:7px;
}
.vis-page{
  display:grid; grid-template-columns:1fr 60px 110px; gap:10px;
  padding:5px 0; font-size:.8rem;
}
.vis-page .pg{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; unicode-bidi:plaintext; }
.vis-page .n{ font-weight:700; text-align:end; color:#c2410c; }
.vis-page .t{ color:var(--mud-palette-text-secondary); text-align:end; }

@media (max-width: 800px){
  /* The address and the page are what matter on a phone; the counters fold away. */
  .vis-row{ grid-template-columns:18px 1fr 60px; }
  .vis-who, .vis-last, .vis-pages{ display:none; }
  .vis-when{ grid-column:2; text-align:start; }
  .vis-page{ grid-template-columns:1fr 50px; }
  .vis-page .t{ display:none; }
}

/* ===== v479: one-tap reasons for turning an order away =====
   The reason is optional, so these have to be quicker than typing or nobody will
   bother — and quicker than the "no reason" button, or everybody will use that. */
.rj-picks{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
.rj-pick{
  padding:7px 13px; border-radius:999px; cursor:pointer;
  font-family:inherit; font-size:.8rem; font-weight:700; line-height:1.2;
  color:#5a5145; background:#fff; border:1.5px solid #ece5dc;
  transition:border-color .14s, background .14s, color .14s;
}
.rj-pick:hover{ border-color:#f6a723; }
.rj-pick.on{ border-color:#e53935; background:#fdeceb; color:#b3271f; }

/* ===== v478: the unrecoverable-error bar, dressed for a customer =====
   mf-reconnect.js reloads silently the first time, so this should almost never be
   seen. When it is, it must look like the app rather than a raw framework band — and
   sit correctly in RTL, where MudBlazor pins the dismiss cross to `right`, straight
   on top of Arabic and Farsi text. Nothing here touches `display`: that is Blazor's
   to toggle. */
#blazor-error-ui{
  inset-inline:12px; bottom:12px; width:auto; border-radius:16px;
  padding:13px 44px 13px 18px;
  font-size:.88rem; font-weight:700;
  background:linear-gradient(135deg,#3a2b20,#241c15); color:#fff;
  box-shadow:0 12px 34px rgba(24,15,8,.42);
}
#blazor-error-ui .msg{ margin-inline-end:10px; }
#blazor-error-ui .reload{
  color:#ffcf8a; text-decoration:none; font-weight:800;
  border-bottom:1.5px solid rgba(255,207,138,.55); padding-bottom:1px;
}
#blazor-error-ui .dismiss{
  right:auto; left:auto; inset-inline-end:14px; top:50%; transform:translateY(-50%);
  opacity:.75; font-size:.9rem;
}
[dir="rtl"] #blazor-error-ui{ padding:13px 18px 13px 44px; }

/* ===== v475: "Suggested" on the customer home — the real kitchens, put forward ===== */
/* Shares the deal card, so only the heading and the shop pills are new here. */
.mf-sug-title{ gap:8px; }
.mf-sug-spark{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; border-radius:9px; font-size:14px;
  background:linear-gradient(135deg,#f6a723,#f4511e);
  box-shadow:0 3px 10px rgba(244,81,30,.34);
}
.mf-sug-sub{ margin-inline-start:auto; white-space:nowrap; }

/* One line that scrolls, like every other strip on this page — wrapping stacked the
   shops into a tall column on a phone and pushed their food below the fold. */
.mf-sug-shops{
  display:flex; flex-wrap:nowrap; gap:8px; margin:2px 0 12px;
  overflow-x:auto;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
  /* v482 — the row also carries .mf-hscroll (for the scroll arrows), which brings its own
     padding shorthand, so padding is restated here rather than inherited.
     v483 — the cards lift 4px on hover and drop a 28px shadow; without room for both the
     row clips them and the lift looks like a glitch. */
  padding:6px 2px 18px;
}
.mf-sug-shops::-webkit-scrollbar{ display:none; }

/* v483 — the shops were flat little pills, the same height as a text row, which read as a
   list of links rather than as the shops we are actually putting forward. They are cards
   now: a big round logo, the name under it, the cuisine under that. Everything is centred
   and symmetric, so the card needs no RTL variant — the old pill did. */
.mf-sug-shop{
  display:flex; flex-direction:column; align-items:center; gap:10px;
  /* v487 — 150px fitted only five cards in an 852px row, so anything featured past the
     fifth was off-screen and read as "not added". 128 fits seven of the same nine. */
  flex:0 0 auto; width:128px; padding:14px 9px 12px;
  border-radius:20px; cursor:pointer;
  font-family:inherit; text-align:center;
  border:1px solid rgba(36,31,27,.09);
  background:var(--mud-palette-surface);
  box-shadow:0 2px 6px rgba(36,31,27,.07);
  transition:transform .18s cubic-bezier(.2,.8,.3,1),
             box-shadow .18s ease, border-color .18s ease;
  position:relative; overflow:hidden;
}
/* A warm band behind the logo only. A full-card bloom washed the whole tile to the same
   cream as the page and the cards stopped reading as cards. */
.mf-sug-shop::before{
  content:""; position:absolute; inset:0 0 auto; height:78px;
  background:linear-gradient(180deg, rgba(255,122,40,.10), rgba(255,122,40,0));
  pointer-events:none;
}
.mf-sug-shop:hover{
  transform:translateY(-4px);
  border-color:rgba(255,90,0,.5);
  box-shadow:0 14px 28px rgba(36,31,27,.14);
}
.mf-sug-shop:active{ transform:translateY(-1px); }

/* Shut shops stay legible instead of being faded to near-invisible: the logo goes grey,
   the name goes secondary, and the card reads as "not now" rather than as broken. */
.mf-sug-shop.shut{ opacity:1; background:var(--mud-palette-background-grey); }
.mf-sug-shop.shut::before{ display:none; }
.mf-sug-shop.shut .em{ filter:grayscale(1); opacity:.65; }
.mf-sug-shop.shut .tx b{ color:var(--mud-palette-text-secondary); }

.mf-sug-shop .em{
  width:56px; height:56px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center;
  font-size:26px;
  /* Not every partner has uploaded a logo; those fall back to an emoji, and a flat disc
     behind it looked like a missing image. The gradient makes the fallback deliberate. */
  background:linear-gradient(145deg,#FFEEDD,#FFD8BC);
  border:2px solid var(--mud-palette-surface);
  box-shadow:0 3px 10px rgba(36,31,27,.13);
  position:relative;            /* above ::before */
}
/* contain, not cover: partner logos are not all square, and cropping someone's mark to
   fill a circle is worse than letting it sit inside one. */
.mf-sug-shop .em.has-logo{ background:#fff; padding:4px; overflow:hidden; }
.mf-sug-shop .em.has-logo img{
  width:100%; height:100%; object-fit:contain; display:block; border-radius:50%;
}
.mf-sug-shop .tx{
  display:flex; flex-direction:column; gap:3px; width:100%; min-width:0;
  position:relative;
}
/* Two lines, then ellipsis. The min-height keeps one- and two-line names on the same
   baseline so the row of cards does not look ragged. */
.mf-sug-shop .tx b{
  font-size:13px; font-weight:700; line-height:1.32; unicode-bidi:plaintext;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; min-height:2.64em;
}
.mf-sug-shop .tx span{
  font-size:11px; color:var(--mud-palette-text-secondary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
@media (max-width: 420px){
  .mf-sug-shop{ width:118px; padding:12px 8px 11px; }
  .mf-sug-shop .em{ width:52px; height:52px; font-size:24px; }
  .mf-sug-sub{ display:none; }
}

/* Nothing ticked: the board says so instead of sitting there blank. */
.lb-none{
  grid-column:1 / -1; padding:26px 10px; text-align:center;
  color:#b3a795; font-size:.82rem; font-weight:700;
}
@media print{ .lb-none{ display:none !important; } }

/* The sheet previews on screen as a soft board of labels. */
.lb-sheet{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(58mm, 1fr)); gap:4mm;
  background:#fff; border:1px dashed #d9cfc1; border-radius:14px; padding:6mm;
}
.lb-label{
  border:1px solid #e5ddd0; border-radius:8px; padding:8px 10px 7px; background:#fff;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  break-inside:avoid; page-break-inside:avoid; overflow:hidden;
}
.lb-label .nm{
  font-weight:800; font-size:.78rem; color:#111; text-align:center; line-height:1.25;
  max-height:2.5em; overflow:hidden; width:100%;
}
.lb-label .bc{ width:100%; display:flex; justify-content:center; direction:ltr; }
.lb-label .bc .bc-svg{ max-width:100%; height:auto; }
.lb-label .ft{
  display:flex; justify-content:space-between; width:100%;
  font-size:.68rem; color:#333; font-weight:700; letter-spacing:.04em;
}

/* Paper: everything but the labels vanishes; ink stays pure black. */
@media print{
  /* Scoped to the page that owns the sheet. Unscoped, this hid the whole body on
     EVERY page — so /qr, /table-qr, invoices and receipts all printed blank paper. */
  body:has(.lb-sheet) *{ visibility:hidden !important; }
  /* The reveal has to carry the same :has() prefix — without it the hide rule is the
     more specific of the two and the sheet stays invisible on its own page. */
  body:has(.lb-sheet) .lb-sheet,
  body:has(.lb-sheet) .lb-sheet *{ visibility:visible !important; }
  .lb-sheet{
    position:absolute; inset:0; margin:0; padding:4mm; border:0; border-radius:0;
    grid-template-columns:repeat(3, 1fr);
  }
  .lb-label{ border-color:#bbb; border-radius:0; }
  .pb-fab, .mud-appbar, .mud-drawer{ display:none !important; }
}

/* ===== v362: the till learns the keyboard — code box + cheat sheet ===== */
.pos-code{
  display:flex; align-items:center; gap:7px; background:#fff;
  border:1.5px solid #ece5dc; border-radius:12px; padding:7px 12px; min-width:170px;
  transition:border-color .15s, box-shadow .15s;
}
.pos-code:focus-within{ border-color:#f6a723; box-shadow:0 0 0 3px rgba(246,167,35,.14); }
.pos-code .ic{ color:#c9bfae; font-size:.9rem; }
.pos-code input{
  flex:1; width:120px; border:0; outline:none; background:transparent;
  font-family:inherit; font-size:.88rem; font-weight:700; letter-spacing:.04em;
}
@media (max-width: 900px){ .pos-code{ display:none; } }

.hk-veil{ position:fixed; inset:0; z-index:1390; background:rgba(24,15,8,.4); animation:rvFade .18s both; }
.pg-anim:has(.hk-veil){ animation:none !important; transform:none !important; }
.hk-card{
  position:fixed; z-index:1400; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(560px, 92vw); max-height:82vh; overflow:auto;
  background:#fff; border-radius:20px; padding:0 0 14px;
  box-shadow:0 30px 80px rgba(0,0,0,.35);
  animation:tourIn .28s cubic-bezier(.34,1.3,.64,1) both;
}
.hk-card .hd{
  display:flex; align-items:center; justify-content:space-between;
  font-weight:800; font-size:1rem; color:#fff; padding:15px 20px; margin-bottom:12px;
  background:linear-gradient(135deg,#241c15,#4a3b2c);
}
.hk-card .hd button{
  border:0; background:rgba(255,255,255,.18); color:#fff; width:30px; height:30px;
  border-radius:50%; cursor:pointer;
}
.hk-card .grid{
  display:grid; grid-template-columns:1fr 1fr; gap:4px 18px; padding:0 20px;
}
.hk-card .grid > div{
  display:flex; align-items:center; gap:10px; padding:8px 2px;
  border-bottom:1px solid #f6f1ea; font-size:.85rem; color:#3d342b;
}
.hk-card kbd{
  background:#faf7f2; border:1.5px solid #e5ddd0; border-bottom-width:3px;
  border-radius:7px; padding:2px 9px; font-family:inherit; font-weight:800;
  font-size:.76rem; color:#241c15; white-space:nowrap;
}
.hk-card .grid span{ flex:1; }
@media (max-width: 560px){ .hk-card .grid{ grid-template-columns:1fr; } }

/* ===== v363: recipe DIALOG — the amount is part of adding, not an afterthought ===== */
.rd-head{ line-height:1.35; margin-bottom:12px; }
.rd-head b{ font-size:1.02rem; color:#241c15; display:block; }
.rd-head small{ color:#a99e8d; font-size:.76rem; }
.rd-add{
  display:grid; grid-template-columns:1fr 130px auto; gap:10px; align-items:start;
  margin-top:14px; padding-top:12px; border-top:1px dashed #efe7dc;
}
.rd-add .mud-button-root{ height:48px; border-radius:12px; }
.rd-cost{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  margin-top:14px; padding:11px 14px; background:#faf7f2; border-radius:13px;
}
.rd-cost small{ display:block; color:#a99e8d; font-size:.7rem; }
.rd-cost b{ font-size:1.1rem; color:#241c15; }
.rd-cost .end{ text-align:end; }
.rd-cost b.good{ color:#177245; } .rd-cost b.mid{ color:#b45309; } .rd-cost b.bad{ color:#b3261e; }
@media (max-width: 560px){ .rd-add{ grid-template-columns:1fr; } }

/* ===== v364: recipe checklist — tick the material, owe the amount ===== */
.rd-search{
  display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #ece5dc;
  border-radius:12px; padding:8px 13px; margin-bottom:10px;
}
.rd-search input{ flex:1; border:0; outline:none; background:transparent; font-family:inherit; font-size:.87rem; }
.rd-list{
  max-height:46vh; overflow-y:auto; border:1.5px solid #f0e9df; border-radius:14px;
  background:#fdfbf7;
}
.rd-row{
  display:flex; align-items:center; gap:9px; padding:8px 12px;
  border-bottom:1px solid #f4efe8; transition:background .13s;
}
.rd-row:last-child{ border-bottom:0; }
.rd-row.on{ background:#f2fbf6; }
.rd-row.needs{ background:#fff8ec; box-shadow:inset 3px 0 0 #f6a723; }
.rd-row .pick{ display:flex; align-items:center; gap:9px; flex:1; min-width:0; cursor:pointer; }
.rd-row .pick input{ width:17px; height:17px; accent-color:#22a05e; cursor:pointer; }
.rd-row .ic{ font-size:1rem; }
.rd-row .nm{ min-width:0; line-height:1.25; }
.rd-row .nm b{ display:block; font-size:.85rem; color:#241c15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rd-row .nm small{ color:#a99e8d; font-size:.69rem; }
.rd-row .amt{
  width:96px; border:1.5px solid #ece5dc; border-radius:9px; padding:7px 9px;
  font-family:inherit; font-size:.85rem; text-align:center; outline:none; background:#fff;
}
.rd-row .amt:focus{ border-color:#22a05e; }
.rd-row.needs .amt{ border-color:#f6a723; }
.rd-row .un{ font-size:.7rem; color:#a99e8d; font-weight:700; width:32px; flex:none; }
.rd-row .cs{ font-size:.76rem; font-weight:700; color:#5a5145; min-width:58px; text-align:end; flex:none; }
@media (max-width: 560px){
  .rd-row{ flex-wrap:wrap; }
  .rd-row .amt{ width:80px; }
}

/* ===== v365: recipe stepper — pick first, price second ===== */
.rd-stepper .mud-stepper-nav{ margin-bottom:10px; }
.rd-stepper .rd-list{ max-height:44vh; }
.rd-stepper label.rd-row{ cursor:pointer; }
.rd-stepper .rd-row .cs{ color:#177245; font-weight:800; }

/* ===== v366: labels are barcode-only — taller bars, no name line ===== */
.lb-label.bare{ padding:10px 10px 7px; gap:5px; }
.lb-label.bare .bc .bc-svg{ max-height:52px; }

/* ===== v367: label toggles — name and price are the owner's choice ===== */
.lb-opt{
  display:flex; align-items:center; gap:7px; font-size:.82rem; font-weight:700;
  color:#5a5145; cursor:pointer; padding:8px 12px; border-radius:10px;
  border:1.5px solid #ece5dc; background:#fff;
}
.lb-opt input{ width:16px; height:16px; accent-color:#f4511e; cursor:pointer; }

/* ===== v368: stock alerts dialog — the full picture, with a fix button ===== */
.sad-top{ display:flex; gap:9px; margin-bottom:13px; flex-wrap:wrap; }
.sad-pill{
  flex:1; min-width:110px; display:flex; align-items:center; gap:9px;
  padding:10px 13px; border-radius:14px; background:#faf7f2;
}
.sad-pill .ic{ font-size:1.15rem; }
.sad-pill b{ display:block; font-size:1.05rem; line-height:1.1; color:#241c15; }
.sad-pill small{ color:#a99e8d; font-size:.68rem; }
.sad-pill.out{ background:#fdf0ef; } .sad-pill.out b{ color:#b3261e; }
.sad-pill.low{ background:#fff6e8; } .sad-pill.low b{ color:#b45309; }
.sad-list{ display:flex; flex-direction:column; gap:8px; max-height:52vh; overflow-y:auto; }
.sad-row{
  display:flex; align-items:flex-start; gap:11px; padding:12px 14px;
  border:1px solid #f0e9df; border-radius:15px; background:#fff;
  border-inline-start:4px solid #f6a723;
}
.sad-row.out{ border-inline-start-color:#dc2626; }
.sad-row.fresh{ background:#fffdf7; box-shadow:0 3px 12px rgba(246,167,35,.12); }
.sad-row .ic{ font-size:1.15rem; margin-top:2px; }
.sad-row .mid{ flex:1; min-width:0; line-height:1.4; }
.sad-row .top{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sad-row .top b{ font-size:.92rem; color:#241c15; }
.sad-row .chip{
  font-size:.66rem; font-weight:800; padding:2px 9px; border-radius:999px;
}
.sad-row .chip.low{ background:#fff3e0; color:#b45309; }
.sad-row .chip.out{ background:#fdeeee; color:#b3261e; }
.sad-row .when{ color:#b5aa99; font-size:.7rem; }
.sad-row .facts{
  display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:6px;
  font-size:.76rem; color:#5a5145;
}
.sad-row .facts b{ color:#241c15; }
.sad-row .fix{
  flex:none; display:inline-flex; align-items:center; gap:6px; margin-top:3px;
  padding:8px 14px; border:1.5px solid #ece5dc; border-radius:11px; background:#fff;
  cursor:pointer; font-family:inherit; font-weight:700; font-size:.76rem; color:#5a5145;
  transition:all .14s;
}
.sad-row .fix:hover{ background:#f3efff; border-color:#c3b4ff; color:#5b3ff0; }
button.sb-all{ width:100%; border:0; background:transparent; cursor:pointer; font-family:inherit; }

/* ===== v369: purchases receive stock POS-style — tiles, ticket, code box ===== */
.pd2{ display:grid; grid-template-columns:1.15fr 1fr; gap:16px; min-height:56vh; }
.pd2-left{ display:flex; flex-direction:column; gap:9px; min-width:0; }
.pd2-code{
  display:flex; align-items:center; gap:8px; background:#fff;
  border:2px solid #7c5cff; border-radius:13px; padding:10px 14px;
  box-shadow:0 0 0 3px rgba(124,92,255,.1);
}
.pd2-code .ic{ color:#7c5cff; }
.pd2-code input{
  flex:1; border:0; outline:none; background:transparent; font-family:inherit;
  font-size:.95rem; font-weight:800; letter-spacing:.05em;
}
.pd2-search{
  display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #ece5dc;
  border-radius:12px; padding:8px 13px;
}
.pd2-search input{ flex:1; border:0; outline:none; background:transparent; font-family:inherit; font-size:.86rem; }
.pd2-tiles{
  flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(136px, 1fr));
  gap:8px; align-content:start; padding:2px;
}
.pd2-tile{
  border:1.5px solid #ece5dc; border-radius:14px; background:#fff; cursor:pointer;
  font-family:inherit; text-align:center; padding:11px 8px; line-height:1.3;
  transition:all .13s;
}
.pd2-tile:hover{ transform:translateY(-2px); border-color:#7c5cff; box-shadow:0 8px 18px rgba(91,63,240,.14); }
.pd2-tile:active{ transform:scale(.97); }
.pd2-tile.on{ border-color:#22a05e; background:#f2fbf6; }
.pd2-tile .ic{ display:block; font-size:1.3rem; margin-bottom:3px; }
.pd2-tile b{ display:block; font-size:.78rem; color:#241c15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd2-tile small{ color:#a99e8d; font-size:.64rem; }
.pd2-ticket{ display:flex; flex-direction:column; gap:9px; min-width:0; }
.pd2-head .two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pd2-lines{
  flex:1; overflow-y:auto; border:1.5px solid #ece5dc; border-radius:14px;
  background:#fdfbf7; padding:8px 12px; min-height:130px;
}
.pd2-foot{
  display:flex; align-items:center; justify-content:space-between;
  padding:4px 2px 0;
}
.pd2-foot .total{ font-size:1.25rem; font-weight:800; color:#241c15; }
@media (max-width: 860px){
  .pd2{ grid-template-columns:1fr; }
  .pd2-tiles{ max-height:34vh; }
}

/* ===== v370: the code box grows a touch numpad — tablet tills have no keys ===== */
.pos-code{ position:relative; }
.pos-pad{
  position:absolute; top:calc(100% + 8px); inset-inline-end:0; z-index:1250;
  width:230px; background:#fff; border-radius:18px; padding:12px;
  box-shadow:0 20px 50px rgba(30,20,10,.28); border:1px solid #f0e9df;
  animation:tourIn .22s cubic-bezier(.34,1.3,.64,1) both;
}
.pos-pad .val{
  min-height:34px; border-radius:10px; background:#faf7f2; border:1.5px dashed #e5ddd0;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:1.05rem; letter-spacing:.08em; color:#241c15;
  margin-bottom:9px; padding:4px 8px; word-break:break-all;
}
.pos-pad .keys{ display:grid; grid-template-columns:repeat(3, 1fr); gap:7px; }
.pos-pad .keys button{
  height:46px; border:1.5px solid #ece5dc; border-radius:12px; background:#fff;
  font-family:inherit; font-size:1.15rem; font-weight:800; color:#241c15; cursor:pointer;
  transition:all .1s;
}
.pos-pad .keys button:hover{ background:#faf7f2; }
.pos-pad .keys button:active{ transform:scale(.93); background:#fff3dd; }
.pos-pad .keys button.alt{ background:#faf7f2; color:#b45309; }
.pos-pad .row{ display:flex; gap:7px; margin-top:9px; }
.pos-pad .row .x{
  width:52px; height:44px; border:1.5px solid #ece5dc; border-radius:12px; background:#fff;
  cursor:pointer; font-size:.95rem; color:#a99e8d;
}
.pos-pad .row .go{
  flex:1; height:44px; border:0; border-radius:12px; cursor:pointer; font-family:inherit;
  font-weight:800; font-size:.95rem; color:#fff;
  background:linear-gradient(135deg,#2fb56b,#22a05e);
  box-shadow:0 6px 14px rgba(34,160,94,.3);
}
.pos-pad .row .go:active{ transform:scale(.97); }
@media (max-width: 900px){
  /* On narrow screens the code box is hidden — the pad must not orphan itself. */
  .pos-pad{ display:none; }
}

/* ===== v371: the numpad rides ABOVE everything — fixed, JS-placed ===== */
.pos-pad{ position:fixed; top:70px; inset-inline-end:auto; z-index:2000; }
.pg-anim:has(.pos-pad){ animation:none !important; transform:none !important; }

/* ===== v372: numpad at page root — nothing left to stack against ===== */
.pos-pad{ z-index:3000; }

/* ===== v373: purchases go full POS — purple where the till is orange ===== */
.pp{ display:grid; grid-template-columns:1.3fr 1fr; gap:16px; min-height:60vh; }
.pp-left{ display:flex; flex-direction:column; gap:9px; min-width:0; }
.pp-code{
  display:flex; align-items:center; gap:9px; background:#fff;
  border:2px solid #7c5cff; border-radius:14px; padding:11px 15px;
  box-shadow:0 0 0 4px rgba(124,92,255,.09);
}
.pp-code .ic{ color:#7c5cff; }
.pp-code input{
  flex:1; border:0; outline:none; background:transparent; font-family:inherit;
  font-size:.95rem; font-weight:800; letter-spacing:.05em;
}
.pp-tools{ display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.pp-tabs{ display:flex; gap:6px; }
.pp-tabs button{
  padding:8px 15px; border-radius:999px; border:1.5px solid #e3dcf7; background:#fff;
  color:#5a5145; cursor:pointer; font-family:inherit; font-size:.8rem; font-weight:700;
}
.pp-tabs button.on{ background:linear-gradient(135deg,#7c5cff,#5b3ff0); border-color:transparent; color:#fff; }
.pp-search{
  display:flex; align-items:center; gap:8px; background:#fff; border:1.5px solid #ece5dc;
  border-radius:12px; padding:8px 13px; flex:1; min-width:150px;
}
.pp-search input{ flex:1; border:0; outline:none; background:transparent; font-family:inherit; font-size:.86rem; }
.pp-tiles{
  flex:1; overflow-y:auto; max-height:62vh;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(138px, 1fr));
  gap:8px; align-content:start; padding:2px;
}
.pp-tile{
  border:1.5px solid #ece5dc; border-radius:14px; background:#fff; cursor:pointer;
  font-family:inherit; text-align:center; padding:10px 8px; line-height:1.3;
  transition:all .13s;
}
.pp-tile:hover{ transform:translateY(-2px); border-color:#7c5cff; box-shadow:0 8px 18px rgba(91,63,240,.14); }
.pp-tile:active{ transform:scale(.97); }
.pp-tile.on{ border-color:#5b3ff0; background:#f6f3ff; box-shadow:inset 0 0 0 1px #5b3ff0; }
.pp-tile .ic{ display:block; font-size:1.3rem; margin-bottom:3px; }
.pp-tile .ph{
  width:46px; height:46px; border-radius:12px; object-fit:cover; margin:0 auto 4px;
  display:block;
}
.pp-tile b{ display:block; font-size:.77rem; color:#241c15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pp-tile small{ color:#a99e8d; font-size:.63rem; }

.pp-ticket{
  display:flex; flex-direction:column; gap:9px; min-width:0;
  background:#fff; border:1px solid #e3dcf7; border-radius:20px; padding:15px 16px;
  border-top:4px solid #5b3ff0; box-shadow:0 6px 22px rgba(91,63,240,.08);
  align-self:start; position:sticky; top:74px;
}
.pp-ticket .hd{ font-weight:800; font-size:.98rem; color:#241c15; }
.pp-ticket .two{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pp-ticket .lines{
  border:1.5px solid #ece5dc; border-radius:14px; background:#fdfbf7;
  padding:8px 12px; min-height:120px; max-height:34vh; overflow-y:auto;
}
.pp-ticket .lines .tag{ font-size:.85rem; }
.pp-ticket .foot{ display:flex; align-items:center; justify-content:space-between; }
.pp-ticket .foot .total{ font-size:1.3rem; font-weight:800; color:#241c15; }
.pp-ticket .receive{
  height:50px; border:0; border-radius:14px; cursor:pointer; font-family:inherit;
  font-weight:800; font-size:1rem; color:#fff;
  background:linear-gradient(135deg,#7c5cff,#5b3ff0);
  box-shadow:0 10px 24px rgba(91,63,240,.32); transition:transform .14s;
}
.pp-ticket .receive:hover:not(:disabled){ transform:translateY(-2px); }
.pp-ticket .receive:disabled{ opacity:.6; }
@media (max-width: 900px){
  .pp{ grid-template-columns:1fr; }
  .pp-ticket{ position:static; }
  .pp-tiles{ max-height:38vh; }
}

/* ===== v374: the ticket header carries the paper-trail button ===== */
.pp-ticket .hd{ display:flex; align-items:center; justify-content:space-between; }
.pp-ticket .hd .hist{
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
  border:1.5px solid #e3dcf7; border-radius:999px; background:#f6f3ff;
  cursor:pointer; font-family:inherit; font-weight:800; font-size:.78rem; color:#5b3ff0;
  transition:all .14s;
}
.pp-ticket .hd .hist:hover{ background:#5b3ff0; color:#fff; }
.pp-ticket .hd .hist .chev{ font-size:.6rem; }

/* ===== v375: purchase tiles at a readable size — names, not initials ===== */
.pp-tiles{ grid-template-columns:repeat(auto-fill, minmax(195px, 1fr)); gap:10px; }
.pp-tile{ padding:14px 12px; border-radius:16px; }
.pp-tile .ic{ font-size:1.7rem; margin-bottom:6px; }
.pp-tile .ph{ width:62px; height:62px; border-radius:14px; margin-bottom:6px; }
.pp-tile b{
  font-size:.92rem; white-space:normal; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.4em;
}
.pp-tile small{ font-size:.74rem; display:block; margin-top:3px; }

/* ===== v376: the supplier book ===== */
.sp-top{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:14px; }
.sp-top .mt-add{ margin-inline-start:auto; padding:12px 22px; }
.sp-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:12px; }
.sp-card{
  background:#fff; border:1px solid #f0e9df; border-radius:18px; padding:15px 17px;
  border-inline-start:4px solid #5b3ff0; box-shadow:0 3px 14px rgba(90,70,50,.06);
  animation:rvUp .3s both; display:flex; flex-direction:column; gap:9px;
}
.sp-card.owe{ border-inline-start-color:#f6a723; }
.sp-card .hd{ display:flex; align-items:center; gap:10px; }
.sp-card .ava{
  width:40px; height:40px; border-radius:13px; flex:none; color:#fff; font-weight:800;
  display:grid; place-items:center; font-size:1rem;
  background:linear-gradient(135deg,#7c5cff,#5b3ff0);
}
.sp-card .who{ flex:1; min-width:0; line-height:1.3; }
.sp-card .who b{ display:block; font-size:.95rem; color:#241c15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sp-card .who small{ color:#a99e8d; font-size:.74rem; }
.sp-card .tel{
  display:inline-block; font-size:.85rem; font-weight:700; color:#177245;
  text-decoration:none; background:#eafaf0; border-radius:9px; padding:6px 11px;
  align-self:flex-start;
}
.sp-card .facts{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;
  border-top:1px dashed #f0ece4; padding-top:9px;
}
.sp-card .facts small{ display:block; color:#a99e8d; font-size:.66rem; }
.sp-card .facts b{ font-size:.86rem; color:#241c15; }
.sp-card .facts b.bad{ color:#b3261e; }
.sp-card .last, .sp-card .nt{ color:#a99e8d; font-size:.73rem; }

/* the supplier picker on the receiving ticket */
.pp-sup{ display:flex; align-items:center; gap:8px; }
.pp-sup input{
  flex:1; border:1.5px solid #ece5dc; border-radius:11px; padding:11px 13px;
  font-family:inherit; font-size:.9rem; outline:none; background:#fff;
  min-width:0;
}
.pp-sup input:focus{ border-color:#7c5cff; }
.pp-sup a{
  width:42px; height:42px; border:1.5px solid #e3dcf7; border-radius:11px;
  display:grid; place-items:center; text-decoration:none; font-size:1.05rem;
  background:#f6f3ff; flex:none;
}

/* ===== v377: purchase templates — the weekly order as a chip ===== */
.pp-tpl{ display:flex; flex-wrap:wrap; gap:7px; }
.pp-tpl .chip{
  display:inline-flex; align-items:center; border:1.5px solid #e3dcf7;
  border-radius:999px; background:#f6f3ff; overflow:hidden;
}
.pp-tpl .use{
  border:0; background:transparent; cursor:pointer; font-family:inherit;
  font-weight:700; font-size:.78rem; color:#5b3ff0; padding:8px 4px 8px 12px;
}
[dir="rtl"] .pp-tpl .use{ padding:8px 12px 8px 4px; }
.pp-tpl .chip:hover{ background:#ece6ff; }
.pp-tpl .x{
  border:0; background:transparent; cursor:pointer; color:#b7a8f5;
  font-size:.66rem; padding:8px 10px;
}
.pp-tpl .x:hover{ color:#b3261e; }
.pp-ticket .astpl{
  height:40px; border:1.5px dashed #c3b4ff; border-radius:12px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:.82rem; color:#5b3ff0; background:#fff;
}
.pp-ticket .astpl:hover{ background:#f6f3ff; }

/* ===== v378: templates picked from a dialog ===== */
.pp-tplbtn{
  align-self:flex-start; display:inline-flex; align-items:center; gap:7px;
  padding:9px 16px; border:1.5px dashed #c3b4ff; border-radius:999px; background:#f6f3ff;
  cursor:pointer; font-family:inherit; font-weight:800; font-size:.8rem; color:#5b3ff0;
}
.pp-tplbtn:hover{ background:#ece6ff; }
.pp-tplbtn i{ font-style:normal; opacity:.6; }
.tp-list{ display:flex; flex-direction:column; gap:8px; }
.tp-row{
  display:flex; align-items:stretch; border:1.5px solid #e3dcf7; border-radius:14px;
  background:#fff; overflow:hidden; transition:all .14s;
}
.tp-row:hover{ border-color:#7c5cff; box-shadow:0 6px 16px rgba(91,63,240,.12); }
.tp-row .pick{
  flex:1; min-width:0; border:0; background:transparent; cursor:pointer;
  font-family:inherit; text-align:start; padding:11px 14px; line-height:1.4;
}
.tp-row .top{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tp-row .top b{ font-size:.88rem; color:#241c15; }
.tp-row .sup{ font-size:.72rem; color:#a99e8d; font-weight:700; }
.tp-row small{ color:#8a7f6e; font-size:.74rem; display:block; margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tp-row .x{
  border:0; border-inline-start:1px solid #f0ecfa; background:transparent;
  cursor:pointer; color:#c9bfae; padding:0 14px; font-size:.75rem;
}
.tp-row .x:hover{ color:#b3261e; background:#fdf1f0; }

/* ===== v379: tile names wrap in full — no more two-letter ghosts ===== */
.pp-tile{
  display:flex !important; flex-direction:column; align-items:center; justify-content:flex-start;
  gap:3px; min-height:118px;
}
.pp-tile .ic{ margin-bottom:1px; }
.pp-tile b{
  display:block !important; width:100%;
  white-space:normal !important; overflow:visible !important;
  min-height:0 !important; max-height:none !important;
  text-align:center; word-break:break-word; line-height:1.35;
  -webkit-line-clamp:unset !important;
}
.pp-tile small{ white-space:normal; text-align:center; }

/* ===== v380: supplier by number — the dialog teaches the shortcut ===== */
.pp-sup button{
  width:42px; height:42px; border:1.5px solid #e3dcf7; border-radius:11px;
  display:grid; place-items:center; font-size:1.05rem; cursor:pointer;
  background:#f6f3ff; flex:none;
}
.pp-sup button:hover{ background:#ece6ff; }
.tp-row .num{
  min-width:26px; height:26px; border-radius:8px; background:#241c15; color:#ffb74d;
  display:inline-grid; place-items:center; font-weight:800; font-size:.78rem; padding:0 6px;
}

/* ===== v381: supplier row — short number box, the NAME is a label ===== */
.pp-sup .code{
  width:76px; flex:none; text-align:center; font-weight:800; letter-spacing:.08em;
  border:1.5px solid #ece5dc; border-radius:11px; padding:11px 8px;
  font-family:inherit; font-size:.92rem; outline:none; background:#fff;
}
.pp-sup .code:focus{ border-color:#7c5cff; box-shadow:0 0 0 3px rgba(124,92,255,.12); }
.pp-sup .sel{
  flex:1; min-width:0; text-align:start; border:1.5px dashed #d9cfc1; border-radius:11px;
  padding:11px 13px; font-family:inherit; font-size:.9rem; color:#a99e8d; background:#fdfbf7;
  cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  transition:all .14s;
}
.pp-sup .sel:hover{ border-color:#7c5cff; }
.pp-sup .sel.on{
  border-style:solid; border-color:#c3b4ff; background:#f6f3ff;
  color:#241c15; font-weight:800;
}
.pp-sup .clr{
  width:34px; height:42px; border:0; background:transparent; cursor:pointer;
  color:#c9bfae; font-size:.8rem; flex:none;
}
.pp-sup .clr:hover{ color:#b3261e; }

/* ===== v382: professional payments — method, timing, installments ===== */
.pay-box{
  border:1.5px solid #e3dcf7; border-radius:14px; background:#fbfaff;
  padding:11px 13px; display:flex; flex-direction:column; gap:9px;
}
.pay-box .row{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.pay-box .lbl{ font-size:.74rem; font-weight:800; color:#8a7f6e; min-width:52px; }
.pay-box .chips{ display:flex; gap:6px; flex-wrap:wrap; }
.pay-box .chips button{
  padding:7px 13px; border-radius:999px; border:1.5px solid #e3dcf7; background:#fff;
  cursor:pointer; font-family:inherit; font-size:.78rem; font-weight:700; color:#5a5145;
  transition:all .13s;
}
.pay-box .chips button.on{
  background:linear-gradient(135deg,#7c5cff,#5b3ff0); border-color:transparent; color:#fff;
}
.pay-box .due{
  border:1.5px solid #e3dcf7; border-radius:10px; padding:8px 11px;
  font-family:inherit; font-size:.85rem; outline:none; background:#fff;
}
.pay-box .plan{ display:flex; flex-wrap:wrap; gap:6px; }
.pay-box .plan .st{
  background:#fff; border:1.5px dashed #c3b4ff; border-radius:9px;
  padding:5px 10px; font-size:.74rem; font-weight:700; color:#5b3ff0;
}

/* schedule rows inside the history dialog */
.pu-sum.late{ background:#fdf0ef; border-color:#f3c1bc; }
.pu-sum.late b{ color:#b3261e; }
.pu-card.late{ border-inline-start-color:#dc2626; }
.pay-sched{ margin-top:10px; display:flex; flex-direction:column; gap:6px; }
.pay-sched .ps{
  display:flex; align-items:center; gap:10px; padding:8px 12px;
  background:#fff; border:1px solid #ece5dc; border-radius:11px; font-size:.8rem;
}
.pay-sched .ps.paid{ background:#f2fbf6; border-color:#cdeeda; }
.pay-sched .ps.late{ background:#fffafa; border-color:#f3c1bc; }
.pay-sched .mi{ font-size:.95rem; }
.pay-sched .amt{ font-weight:800; color:#241c15; min-width:76px; }
.pay-sched .due{ color:#7a6f61; }
.pay-sched .st{ flex:1; text-align:end; font-weight:700; color:#a99e8d; font-size:.74rem; }
.pay-sched .st.ok{ color:#177245; }
.pay-sched .st.bad{ color:#b3261e; }
.pay-sched .pay1{
  border:0; border-radius:9px; padding:7px 14px; cursor:pointer; font-family:inherit;
  font-weight:800; font-size:.74rem; color:#fff;
  background:linear-gradient(135deg,#2fb56b,#22a05e);
}
.pay-sched .pay1:hover{ transform:translateY(-1px); }

/* ===== v383: the payment DIALOG — three cards that explain themselves ===== */
.pay-total{
  display:flex; align-items:baseline; justify-content:space-between;
  background:#faf7f2; border-radius:13px; padding:12px 16px; margin-bottom:13px;
}
.pay-total small{ color:#a99e8d; font-weight:700; font-size:.78rem; }
.pay-total b{ font-size:1.5rem; color:#241c15; }
.pay-opts{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-bottom:12px; }
.pay-opts .opt{
  border:2px solid #ece5dc; border-radius:15px; background:#fff; cursor:pointer;
  font-family:inherit; text-align:center; padding:13px 9px; line-height:1.35;
  transition:all .14s;
}
.pay-opts .opt:hover{ border-color:#c3b4ff; }
.pay-opts .opt.on{
  border-color:#5b3ff0; background:#f6f3ff; box-shadow:0 6px 16px rgba(91,63,240,.14);
}
.pay-opts .ic{ display:block; font-size:1.5rem; margin-bottom:4px; }
.pay-opts b{ display:block; font-size:.86rem; color:#241c15; }
.pay-opts small{ display:block; color:#a99e8d; font-size:.68rem; margin-top:3px; }
.pay-detail{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:11px;
}
.pay-detail label{ font-size:.78rem; font-weight:800; color:#8a7f6e; min-width:48px; }
.pay-detail .chips{ display:flex; gap:6px; flex-wrap:wrap; }
.pay-detail .chips button{
  padding:8px 15px; border-radius:999px; border:1.5px solid #ece5dc; background:#fff;
  cursor:pointer; font-family:inherit; font-size:.8rem; font-weight:700; color:#5a5145;
}
.pay-detail .chips button.on{
  background:linear-gradient(135deg,#7c5cff,#5b3ff0); border-color:transparent; color:#fff;
}
.pay-detail .due{
  border:1.5px solid #ece5dc; border-radius:10px; padding:9px 12px;
  font-family:inherit; font-size:.88rem; outline:none; background:#fff;
}
.pay-table{
  border:1.5px solid #e3dcf7; border-radius:13px; overflow:hidden; margin-bottom:11px;
}
.pay-table .tr{
  display:flex; align-items:center; gap:12px; padding:9px 14px; font-size:.84rem;
  background:#fff;
}
.pay-table .tr + .tr{ border-top:1px solid #f0ecfa; }
.pay-table .n{ font-weight:800; color:#5b3ff0; min-width:64px; }
.pay-table .d{ flex:1; color:#7a6f61; }
.pay-table .a{ font-weight:800; color:#241c15; }
.pay-say{
  background:#fff8ec; border:1.5px dashed #f3ddb5; border-radius:12px;
  padding:10px 14px; font-size:.84rem; font-weight:700; color:#7a5b1f; line-height:1.6;
}
@media (max-width: 480px){ .pay-opts{ grid-template-columns:1fr; } }

/* ===== v384: payment choices as full-width rows — words get room to breathe ===== */
.pay-opts{ grid-template-columns:1fr !important; gap:9px; }
.pay-opts .opt{
  display:flex !important; align-items:center; gap:14px; text-align:start !important;
  padding:14px 17px !important;
}
.pay-opts .ic{
  display:grid !important; place-items:center; width:48px; height:48px; flex:none;
  background:#faf7f2; border-radius:14px; font-size:1.5rem; margin:0 !important;
}
.pay-opts .opt.on .ic{ background:#ece6ff; }
.pay-opts .opt > b{ display:none; }
.pay-opts .tx{ flex:1; min-width:0; line-height:1.45; }
.pay-opts .tx b{ display:block; font-size:1rem; color:#241c15; }
.pay-opts .tx small{ display:block; color:#8a7f6e; font-size:.8rem; margin-top:2px; white-space:normal; }
.pay-opts .tick{ flex:none; font-size:1.1rem; color:#5b3ff0; width:24px; text-align:center; }
.pay-total b{ font-size:1.7rem; }
.pay-say{ font-size:.92rem; }

/* ===== v385: the payments page + the pay-time method question ===== */
.pay-note{
  background:#f6f3ff; border:1.5px dashed #c3b4ff; border-radius:12px;
  padding:10px 14px; font-size:.82rem; font-weight:700; color:#5b3ff0;
  margin-bottom:11px; line-height:1.6;
}
.pm-amt{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  background:#faf7f2; border-radius:13px; padding:12px 16px; margin-bottom:13px;
}
.pm-amt small{ color:#a99e8d; font-weight:700; font-size:.76rem; }
.pm-amt b{ font-size:1.4rem; color:#241c15; }
.pm-amt .who{ flex:1; text-align:end; color:#8a7f6e; font-size:.78rem; font-weight:700;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pm-grid{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.pm-opt{
  border:2px solid #ece5dc; border-radius:15px; background:#fff; cursor:pointer;
  font-family:inherit; text-align:center; padding:15px 10px; transition:all .13s;
}
.pm-opt:hover{ border-color:#5b3ff0; background:#f6f3ff; transform:translateY(-2px); }
.pm-opt .ic{ display:block; font-size:1.6rem; margin-bottom:5px; }
.pm-opt b{ font-size:.9rem; color:#241c15; }

.pay-due-list{ display:flex; flex-direction:column; gap:8px; }
.pd-row{
  display:flex; align-items:center; gap:12px; padding:12px 16px;
  background:#fff; border:1px solid #f0e9df; border-radius:15px;
  border-inline-start:4px solid #f6a723; animation:rvUp .3s both;
}
.pd-row.late{ border-inline-start-color:#dc2626; background:#fffafa; }
.pd-row.paid{ border-inline-start-color:#22a05e; opacity:.75; }
.pd-row .ic{ font-size:1.1rem; }
.pd-row .mid{ flex:1; min-width:0; line-height:1.35; }
.pd-row .mid b{ display:block; font-size:.9rem; color:#241c15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-row .mid small{ color:#a99e8d; font-size:.73rem; }
.pd-row .when{ text-align:end; line-height:1.35; min-width:110px; }
.pd-row .when b{ display:block; font-size:.82rem; color:#5a5145; }
.pd-row .when small{ color:#a99e8d; font-size:.7rem; }
.pd-row.late .when small{ color:#b3261e; font-weight:700; }
.pd-row .amt{ font-weight:800; font-size:1rem; color:#241c15; min-width:84px; text-align:end; }
.pd-row .pay1{
  border:0; border-radius:11px; padding:10px 18px; cursor:pointer; font-family:inherit;
  font-weight:800; font-size:.8rem; color:#fff;
  background:linear-gradient(135deg,#2fb56b,#22a05e);
  box-shadow:0 5px 12px rgba(34,160,94,.25);
}
@media (max-width: 640px){
  .pd-row{ flex-wrap:wrap; }
  .pd-row .when{ min-width:0; }
}

/* ===== v386: one-tap receive — the dialog only for money that moves later ===== */
.pp-ticket .fastrow{ display:flex; gap:8px; }
.pp-ticket .fastrow .receive{ flex:1; background:linear-gradient(135deg,#2fb56b,#22a05e);
  box-shadow:0 10px 24px rgba(34,160,94,.3); }
.pp-ticket .cardbtn{
  width:56px; border:0; border-radius:14px; cursor:pointer; font-size:1.3rem;
  background:linear-gradient(135deg,#7c5cff,#5b3ff0);
  box-shadow:0 10px 24px rgba(91,63,240,.28); transition:transform .13s;
}
.pp-ticket .cardbtn:hover:not(:disabled){ transform:translateY(-2px); }
.pp-ticket .terms{
  height:42px; border:1.5px dashed #c3b4ff; border-radius:12px; cursor:pointer;
  font-family:inherit; font-weight:700; font-size:.84rem; color:#5b3ff0; background:#fff;
}
.pp-ticket .terms:hover{ background:#f6f3ff; }

/* ===== v387: one sentence, one button ===== */
.tpl-row{ display:flex; gap:8px; flex-wrap:wrap; }
.pay-line{
  display:flex; align-items:center; gap:10px; width:100%;
  border:1.5px solid #e3dcf7; border-radius:13px; background:#fbfaff;
  padding:12px 15px; cursor:pointer; font-family:inherit; text-align:start;
  transition:all .14s;
}
.pay-line:hover{ border-color:#7c5cff; }
.pay-line .k{ font-size:.76rem; font-weight:800; color:#8a7f6e; flex:none; }
.pay-line .v{ flex:1; min-width:0; font-size:.9rem; font-weight:800; color:#241c15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pay-line .chg{ flex:none; font-size:.76rem; font-weight:800; color:#5b3ff0; }
.pp-ticket .receive{ background:linear-gradient(135deg,#2fb56b,#22a05e);
  box-shadow:0 10px 24px rgba(34,160,94,.3); }

/* ===== v388: the POS footer pattern on the receiving ticket ===== */
.pp-ticket .payrow{ display:flex; gap:8px; align-items:stretch; }
.pp-ticket .seg{
  flex:1; display:flex; background:#f4efe8; border-radius:13px; padding:4px; gap:4px;
}
.pp-ticket .seg button{
  flex:1; border:0; border-radius:10px; background:transparent; cursor:pointer;
  font-family:inherit; font-weight:800; font-size:.84rem; color:#7a6f61; padding:10px 6px;
  transition:all .14s;
}
.pp-ticket .seg button.on{ background:#fff; color:#241c15; box-shadow:0 2px 8px rgba(90,70,50,.14); }
.pp-ticket .more{
  flex:none; border:1.5px dashed #c3b4ff; border-radius:13px; background:#fff;
  cursor:pointer; font-family:inherit; font-weight:700; font-size:.8rem; color:#5b3ff0;
  padding:0 16px;
}
.pp-ticket .more:hover{ background:#f6f3ff; }
.pp-ticket .more.on{ background:#5b3ff0; border-style:solid; color:#fff; }

/* ===== v389: production capacity — the shelf answers "how many can we make?" ===== */
.cp2-top{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.cp2-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px, 1fr)); gap:12px; }
.cp2-card{
  background:#fff; border:1px solid #f0e9df; border-radius:18px; overflow:hidden;
  border-top:4px solid #22a05e; box-shadow:0 3px 14px rgba(90,70,50,.06);
  animation:rvUp .32s cubic-bezier(.22,1,.36,1) both;
  transition:transform .16s, box-shadow .16s;
}
.cp2-card:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(90,70,50,.12); }
.cp2-card.low{ border-top-color:#f6a723; }
.cp2-card.out{ border-top-color:#dc2626; background:#fffafa; }
.cp2-card .hd{
  display:flex; align-items:center; gap:12px; width:100%; padding:14px 16px;
  border:0; background:transparent; cursor:pointer; font-family:inherit; text-align:start;
}
.cp2-card .ph{
  width:52px; height:52px; border-radius:14px; object-fit:cover; flex:none;
  display:grid; place-items:center; font-size:1.5rem; background:#faf7f2;
}
.cp2-card .tx{ flex:1; min-width:0; line-height:1.35; }
.cp2-card .tx b{ display:block; font-size:.94rem; color:#241c15;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp2-card .tx small{ color:#a99e8d; font-size:.76rem; }
.cp2-card .big{ text-align:center; flex:none; line-height:1.1; }
.cp2-card .big b{ font-size:1.7rem; font-weight:800; letter-spacing:-.02em; color:#177245; }
.cp2-card.low .big b{ color:#b45309; }
.cp2-card.out .big b{ color:#b3261e; }
.cp2-card .big small{ display:block; color:#a99e8d; font-size:.66rem; }
.cp2-card .bn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 16px 13px; flex-wrap:wrap;
}
.cp2-card .bn .tag{
  background:#fff3e0; color:#b45309; border-radius:999px; padding:5px 12px;
  font-size:.74rem; font-weight:700;
}
.cp2-card .bn .tag.bad{ background:#fdeeee; color:#b3261e; }
.cp2-card .bn small{ color:#8a7f6e; font-size:.72rem; font-weight:700; }
.cp2-card .det{ border-top:1px dashed #efe7dc; padding:10px 16px 13px; background:#fdfbf7; }
.cp2-card .ln{
  display:flex; align-items:center; gap:10px; padding:6px 0; font-size:.8rem;
}
.cp2-card .ln + .ln{ border-top:1px solid #f6f1ea; }
.cp2-card .ln .nm{ flex:1; font-weight:600; color:#3d342b; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cp2-card .ln .need{ color:#a99e8d; font-size:.72rem; }
.cp2-card .ln .have{ color:#5a5145; }
.cp2-card .ln .can{ font-weight:800; color:#177245; min-width:52px; text-align:end; }
.cp2-card .ln.min{ background:#fff8ec; border-radius:8px; padding-inline:8px; }
.cp2-card .ln.min .can{ color:#b45309; }
@media (max-width: 640px){ .cp2-grid{ grid-template-columns:1fr; } }

/* ===== v390: the shelf speaks on the POS tile — how many are still makeable ===== */
.pos-tile{ position:relative; }
.pt-cap{
  position:absolute; top:7px; inset-inline-start:7px; z-index:2;
  background:#eafaf0; color:#177245; border-radius:999px; padding:3px 9px;
  font-size:.68rem; font-weight:800; box-shadow:0 2px 6px rgba(23,114,69,.18);
}
.pt-cap.low{ background:#fff3e0; color:#b45309; box-shadow:0 2px 6px rgba(180,83,9,.18); }
.pt-cap.out{ background:#dc2626; color:#fff; box-shadow:0 2px 8px rgba(220,38,38,.3); }

/* ===== v391: capacity chip joins the tile's flow — corners belong to qty ===== */
.pt-cap{
  position:static !important; display:inline-block; margin-top:4px;
  box-shadow:none; border:1px solid #cdeeda; padding:2px 9px; font-size:.66rem;
}
.pt-cap.low{ border-color:#f3ddb5; }
.pt-cap.out{ border-color:#dc2626; }

/* ===== v392: invoice lines read as the equation they are ===== */
.pl2{ padding:10px 4px; }
.pl2 + .pl2{ border-top:1px solid #f4efe8; }
.pl2 .top{ display:flex; align-items:center; gap:9px; margin-bottom:7px; }
.pl2 .top .tag{ font-size:.9rem; }
.pl2 .top .nm{ flex:1; font-weight:800; font-size:.88rem; color:#241c15; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl2 .top .rm{ border:0; background:transparent; color:#c9bfae; cursor:pointer; font-size:.8rem; }
.pl2 .top .rm:hover{ color:#b3261e; }
.pl2 .calc{ display:flex; align-items:flex-end; gap:9px; flex-wrap:wrap; }
.pl2 .f{ display:flex; flex-direction:column; gap:3px; }
.pl2 .f small{ font-size:.64rem; font-weight:800; color:#a99e8d; padding-inline-start:3px; }
.pl2 .f .wrap{
  display:flex; align-items:center; gap:5px; background:#fff;
  border:1.5px solid #ece5dc; border-radius:10px; padding:0 8px;
}
.pl2 .f .wrap:focus-within{ border-color:#7c5cff; }
.pl2 .f input{
  width:72px; border:0; outline:none; background:transparent; padding:8px 2px;
  font-family:inherit; font-size:.9rem; font-weight:800; text-align:center;
}
.pl2 .f .wrap i{ font-style:normal; font-size:.68rem; color:#a99e8d; font-weight:700; }
.pl2 .op{ font-weight:800; color:#c9bfae; padding-bottom:10px; }
.pl2 .sum{ display:flex; flex-direction:column; gap:3px; margin-inline-start:auto; text-align:end; }
.pl2 .sum small{ font-size:.64rem; font-weight:800; color:#a99e8d; }
.pl2 .sum b{ font-size:1rem; color:#241c15; padding-bottom:6px; }

/* ===== v393: normal invoice rows — one header, aligned columns ===== */
.plh, .plr{
  display:grid; grid-template-columns:1fr 104px 84px 78px 26px;
  gap:8px; align-items:center;
}
.plh{
  padding:4px 2px 7px; font-size:.66rem; font-weight:800; color:#a99e8d;
  border-bottom:1.5px solid #ece5dc;
}
.plh .e{ text-align:end; }
.plr{ padding:7px 2px; }
.plr + .plr{ border-top:1px solid #f4efe8; }
.plr .nm{ font-weight:700; font-size:.85rem; color:#241c15; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.plr .q{ display:flex; align-items:center; gap:4px; background:#fff;
  border:1.5px solid #ece5dc; border-radius:9px; padding:0 6px; }
.plr .q input{ width:100%; min-width:0; border:0; outline:none; background:transparent;
  padding:8px 2px; font-family:inherit; font-size:.86rem; font-weight:700; text-align:center; }
.plr .q i{ font-style:normal; font-size:.64rem; color:#a99e8d; font-weight:700; flex:none; }
.plr .q:focus-within{ border-color:#7c5cff; }
.plr .c{ width:100%; border:1.5px solid #ece5dc; border-radius:9px; padding:8px 6px;
  font-family:inherit; font-size:.86rem; font-weight:700; text-align:center; outline:none; background:#fff; }
.plr .c:focus{ border-color:#7c5cff; }
.plr .t{ font-size:.85rem; color:#241c15; text-align:end; }
.plr .rm{ border:0; background:transparent; color:#c9bfae; cursor:pointer; font-size:.78rem; }
.plr .rm:hover{ color:#b3261e; }
@media (max-width: 560px){
  .plh, .plr{ grid-template-columns:1fr 88px 72px 66px 22px; gap:5px; }
}

/* ── v394: the notification center bell + the customers' community room ───── */
.nb-panel { width: 340px; max-width: 92vw; padding: 10px 10px 12px; }
.nb-hd { font-weight: 800; font-size: 14px; color: #3c352c; padding: 2px 6px 8px; }
.nb-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 2px 8px; border-bottom: 1px solid #f0e8dd; }
.nb-tabs button {
    border: 1px solid #eee2d3; background: #faf6f0; border-radius: 999px;
    padding: 4px 10px; font-size: 12px; font-weight: 700; color: #6b6257;
    cursor: pointer; display: inline-flex; align-items: center; gap: 4px;
}
.nb-tabs button.on { background: #ff7a1a; border-color: #ff7a1a; color: #fff; }
.nb-tabs button i {
    font-style: normal; background: rgba(0, 0, 0, .12); border-radius: 999px;
    min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px;
    display: inline-flex; align-items: center; justify-content: center;
}
.nb-tabs button.on i { background: rgba(255, 255, 255, .25); }
.nb-list { max-height: 52vh; overflow: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 8px; }
.nb-row {
    display: flex; align-items: center; gap: 9px; width: 100%; text-align: start;
    border: 0; background: #fff; border-inline-start: 3px solid #d9d2c7;
    border-radius: 10px; padding: 8px 10px; cursor: pointer; font-family: inherit;
}
.nb-row:hover { background: #fdf7ef; }
.nb-row.urgent { border-inline-start-color: #e53935; background: #fff7f6; }
.nb-row.warn { border-inline-start-color: #fb8c00; background: #fffaf2; }
.nb-row.info { border-inline-start-color: #42a5f5; }
.nb-row .ic { font-size: 18px; flex: none; }
.nb-row .tx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nb-row .tx b { font-size: 12.5px; color: #3c352c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-row .tx small { font-size: 11px; color: #8a8175; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-row .when { font-size: 10px; color: #a89e90; flex: none; }

/* The community room: below the shop's app bar, above the bottom nav. */
.wa-screen.qc-bare.cch { top: var(--mud-appbar-height, 64px); z-index: 120; }
@media (max-width: 599px) { .wa-screen.qc-bare.cch { top: 56px; } }

/* Group bubbles wear name tags — everyone gets a steady color of their own. */
.qc-bubble .qc-name { display: block; font-size: 11px; font-weight: 800; margin-bottom: 1px; line-height: 1.2; }
.qc-name.c0 { color: #e53935; }
.qc-name.c1 { color: #8e24aa; }
.qc-name.c2 { color: #3949ab; }
.qc-name.c3 { color: #039be5; }
.qc-name.c4 { color: #00897b; }
.qc-name.c5 { color: #7cb342; }
.qc-name.c6 { color: #f4511e; }
.qc-name.c7 { color: #6d4c41; }

/* Orders history walks in pages now, not one endless table. */
.pg-bar { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 0 4px; }
.pg-bar button {
    border: 1px solid #eee2d3; background: #fff; border-radius: 10px;
    min-width: 34px; height: 34px; font-size: 14px; font-weight: 700; color: #6b6257;
    cursor: pointer; font-family: inherit;
}
.pg-bar button:disabled { opacity: .35; cursor: default; }
.pg-bar .pg-info { font-size: 12px; font-weight: 700; color: #8a8175; min-width: 70px; text-align: center; }

/* v395 - the notification center moved into a dialog: full width, taller list. */
.nb-dlg .nb-list { max-height: 62vh; }
.nb-dlg .nb-row .tx small { white-space: normal; }

/* v396 - the bell's count sits fully inside the bar, never beheaded by its edge. */
.nb-badge .mud-badge { height: 16px; min-width: 16px; font-size: 10px; padding: 3px 5px; }
.nb-badge .mud-badge.mud-badge-top.right.mud-badge-overlap { inset: auto auto calc(100% - 17px) calc(100% - 17px); }
.nb-badge .mud-badge.mud-badge-top.left.mud-badge-overlap { inset: auto calc(100% - 17px) calc(100% - 17px) auto; }

/* v397 - the bell count pinned INSIDE the button corner, whatever the direction. */
.nb-badge .mud-badge {
    inset: 1px 1px auto auto !important;
    height: 16px !important;
    min-width: 16px !important;
    font-size: 10px !important;
    padding: 3px 5px !important;
    line-height: 1 !important;
}

/* v398 - the bell badge, hand-drawn: a plain span pinned inside the button. */
.nb-bell { position: relative; display: inline-flex; }
.nb-bell .nb-count {
    position: absolute;
    top: 2px;
    inset-inline-end: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff5252, #e53935);
    border: 2px solid #fff;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    box-sizing: content-box;
}

/* v399 - the bell count is a true CIRCLE, two digits or one. */
.nb-bell .nb-count {
    width: 18px;
    height: 18px;
    min-width: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 9.5px;
    letter-spacing: -0.4px;
}

/* v400 - no bubble at all: just the number, bold and red, on the bell's corner. */
.nb-bell .nb-count {
    width: auto;
    height: auto;
    min-width: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: #e53935;
    font-size: 12px;
    font-weight: 900;
    padding: 0;
    letter-spacing: 0;
    top: 3px;
}

/* v401 - the bubble returns, sized by its number: a circle at one digit,
   a capsule that grows as wide as "100" or "1500" needs. */
.nb-bell .nb-count {
    width: auto;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 999px;
    background: linear-gradient(135deg, #ff5252, #e53935);
    border: 2px solid #fff;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0;
    top: 2px;
    box-shadow: 0 1px 4px rgba(180, 30, 20, .35);
}

/* v402 - the bell count, one clean rule: fresh class name so nothing older
   interferes. Circle at one digit, capsule for more, digits dead-center. */
.nb-bell .nb-count2 {
    position: absolute;
    top: 2px;
    inset-inline-end: 0;
    height: 18px;
    min-width: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 9px;
    background: #e53935;
    border: 2px solid #fff;
    color: #fff;
    font-family: 'Segoe UI', Tahoma, Arial, sans-serif;
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 14px;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
    box-shadow: 0 1px 4px rgba(180, 30, 20, .35);
}

/* v403 - dashboard stat figures calmed down; the currency is a tag, not a shout. */
.db-stat .v { font-size: 20px; letter-spacing: -.3px; white-space: nowrap; }
.db-stat .v .cur { font-size: 11px; font-weight: 700; color: #8a8175; letter-spacing: 0; }

/* v404 - money wears the official rial symbol (CBO, Nov 2025): an inline SVG
   in currentColor, sized like a letter, sitting on the text baseline. */
.omr-i {
    height: .78em;
    width: auto;
    display: inline-block;
    vertical-align: -0.02em;
}

/* v405 - dashboard polish: revenue delta chip, the 7-day trend card revived,
   richer stat-card surfaces and a crowned best day. */
.db-stat .dlt {
    display: inline-flex; align-items: center; gap: 3px;
    margin-top: 3px; font-size: 10.5px; font-weight: 800;
    padding: 1px 7px; border-radius: 999px; width: fit-content;
    font-variant-numeric: tabular-nums;
}
.db-stat .dlt.up { color: #1b7a3d; background: #e6f6ec; }
.db-stat .dlt.dn { color: #c0341d; background: #fdecea; }

/* Stat cards get a hairline top sheen and a color-matched left accent. */
.db-stat { position: relative; overflow: hidden; }
.db-stat::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; opacity: .9;
}
.db-stat.s1::before { background: linear-gradient(90deg, #ffb74d, #f57c00); }
.db-stat.s2::before { background: linear-gradient(90deg, #4fc3f7, #0277bd); }
.db-stat.s3::before { background: linear-gradient(90deg, #b39ddb, #5e35b1); }
.db-stat.s4::before { background: linear-gradient(90deg, #81c784, #2e7d32); }

/* The week card sits full width under the two columns. */
.db-week { margin-top: 14px; }
.db-week .db-week-total {
    font-size: 14px; font-weight: 800; color: #2f2a23;
    font-variant-numeric: tabular-nums;
}
.db-week .db-week-total .omr-i { color: #f4511e; }
.db-bars .col.best i {
    background: linear-gradient(180deg, #ffd08a, #ff9d3d);
    box-shadow: 0 6px 18px rgba(255, 150, 40, .3);
}
.db-bars .col.best::after {
    content: "★"; font-size: 10px; color: #f4a01e; margin-top: -2px;
}
/* today still wins the crown color when it is also the best day */
.db-bars .col.today.best i { background: linear-gradient(180deg, #ff8a2a, #f4511e); }

/* v406 - the notification center dialog breathes wider, rows use the extra room. */
.nb-dlg { min-width: min(560px, 90vw); }
.nb-dlg .nb-row { padding: 10px 14px; }
.nb-dlg .nb-row .tx b { font-size: 13.5px; }
.nb-dlg .nb-row .tx small { font-size: 12px; }

/* v407 - the team room wears the table-chat's clothes in a different colour:
   an indigo header and accents, so staff never mistake it for a guest thread. */
.wa-screen.team .wa-head { background: linear-gradient(135deg, #6a74f0, #3f3bb0); }
.wa-screen.team .wa-head .ava { background: rgba(255, 255, 255, .22); }
.wa-screen.team .wa-msgs .qc-bubble.me { background: #e5e7ff; }
.wa-screen.team .wa-msgs .qc-bubble.me::after { border-top-color: #e5e7ff; }
.wa-screen.team .qc-bubble.me { background: #e5e7ff; color: #1f2147; }
.wa-screen.team .wa-input .qc-mic.on,
.wa-screen.team .qc-mic.on { background: linear-gradient(135deg, #6a74f0, #4f46e5); box-shadow: 0 4px 14px rgba(79, 70, 229, .4); }
.wa-screen.team .qc-mic.emo .mud-icon-root,
.wa-screen.team .qc-mic.cam .mud-icon-root { color: #4f46e5; }
.wa-screen.team .wa-input input:focus { outline-color: #6a74f0; }
.wa-screen.team .qc-replybar { border-inline-start-color: #6a74f0; }
.wa-screen.team .qc-quote { border-inline-start-color: #6a74f0; }
/* The nav door for it gets a matching indigo glyph so it stands apart. */
.nav-teamchat .mud-nav-link-icon { color: #5b57e0 !important; }

/* v408 - the team header colour, forced past whatever paints it white. */
.wa-screen.qc-bare.cch.team .wa-head { background: linear-gradient(135deg, #6a74f0, #3f3bb0) !important; color: #fff !important; }
.wa-screen.qc-bare.cch.team .wa-head .who b,
.wa-screen.qc-bare.cch.team .wa-head .who small { color: #fff !important; }

/* v409 - team chat now rides the chat-only ChatLayout like table-chats; the indigo
   header colours cleanly here (no MainLayout white-wash to fight). */
.chatonly .wa-screen.team .wa-head,
.wa-screen.team .wa-head { background: linear-gradient(135deg, #6a74f0, #3f3bb0) !important; color: #fff !important; }
.wa-screen.team .wa-head .who b,
.wa-screen.team .wa-head .who small { color: #fff !important; }
.chatonly .wa-screen.team { max-width: 680px; margin: 0 auto; }

/* v410 - team DM inbox: the table-chat desk in indigo, plus per-person avatars. */
.wa-desk.team .wa-hometop { background: linear-gradient(135deg, #6a74f0, #3f3bb0) !important; }
.wa-desk.team .wa-row.on { background: #eef0ff; }
.wa-desk.team .wa-unread { background: linear-gradient(135deg, #7c83ff, #4f46e5); }
.wa-desk.team .wa-row .top small.hot { color: #4f46e5; }
.wa-row .ava.c0, .wa-head .ava.c0 { background: #e53935; }
.wa-row .ava.c1, .wa-head .ava.c1 { background: #8e24aa; }
.wa-row .ava.c2, .wa-head .ava.c2 { background: #3949ab; }
.wa-row .ava.c3, .wa-head .ava.c3 { background: #039be5; }
.wa-row .ava.c4, .wa-head .ava.c4 { background: #00897b; }
.wa-row .ava.c5, .wa-head .ava.c5 { background: #7cb342; }
.wa-row .ava.c6, .wa-head .ava.c6 { background: #f4511e; }
.wa-row .ava.c7, .wa-head .ava.c7 { background: #6d4c41; }
.wa-row .ava[class*="c"], .wa-head .ava[class*="c"] { color: #fff; }
.tc-owner { color: #f4a01e; font-style: normal; font-size: 11px; }

/* v411 - team chat recoloured to a friendly BLUE (the indigo read too near-black),
   and the back arrow flips for RTL so it points the natural way. */
.wa-desk.team .wa-hometop,
.chatonly .wa-screen.team .wa-head,
.wa-screen.team .wa-head { background: linear-gradient(135deg, #4f8cf7, #2f6fe6) !important; }
.wa-screen.team .wa-msgs .qc-bubble.me,
.wa-screen.team .qc-bubble.me { background: #dbeafe !important; color: #10233f; }
.wa-screen.team .wa-msgs .qc-bubble.me::after { border-top-color: #dbeafe !important; }
.wa-screen.team .wa-input .qc-mic.on,
.wa-screen.team .qc-mic.on { background: linear-gradient(135deg, #4f8cf7, #2f6fe6) !important; box-shadow: 0 4px 14px rgba(47,111,230,.4); }
.wa-screen.team .qc-mic.emo .mud-icon-root,
.wa-screen.team .qc-mic.cam .mud-icon-root { color: #2f6fe6; }
.wa-screen.team .qc-replybar, .wa-screen.team .qc-quote { border-inline-start-color: #4f8cf7; }
.wa-desk.team .wa-row.on { background: #eaf2ff; }
.wa-desk.team .wa-unread { background: linear-gradient(135deg, #6ea2ff, #2f6fe6); }
.wa-desk.team .wa-row .top small.hot { color: #2f6fe6; }
.nav-teamchat .mud-nav-link-icon { color: #4f8cf7 !important; }

/* RTL: the header back arrow should point to the right, not the left. */
[dir="rtl"] .wa-desk.team .wa-hometop .mud-icon-button .mud-icon-root,
[dir="rtl"] .wa-screen.team .wa-head .mud-icon-button .mud-icon-root { transform: scaleX(-1); }

/* v412 - team chat nav link reads white like every other drawer link. */
.nav-teamchat .mud-nav-link-icon,
.nav-teamchat .mud-nav-link-text,
.nav-teamchat.mud-nav-link { color: #fff !important; }

/* v413 - team chat header, a brighter unmistakable blue; extra specificity so no
   older indigo rule can win, and covers the chat-only wrapper too. */
.chatonly .wa-desk.team .wa-hometop,
.wa-desk.team .wa-hometop,
.chatonly .wa-screen.team .wa-head,
.wa-screen.team .wa-head,
.wa-screen.qc-bare.team .wa-head { background: linear-gradient(135deg, #5c9dff, #2f7bf0) !important; color: #fff !important; }

/* v414 - the inbox title text was near-black on the blue header; make it white. */
.wa-desk.team .wa-hometop b,
.wa-desk.team .wa-hometop .mud-icon-button { color: #fff !important; }

/* v415 - notification dialog: kill the horizontal scrollbar and enlarge the text. */
.nb-dlg { overflow-x: hidden; }
.nb-dlg .nb-list { overflow-x: hidden; }
.nb-dlg .nb-row { flex-wrap: nowrap; }
.nb-dlg .nb-row .tx { min-width: 0; }
.nb-dlg .nb-row .tx b { font-size: 15px; }
.nb-dlg .nb-row .tx small { font-size: 13px; }
.nb-dlg .nb-row .ic { font-size: 21px; }
.nb-dlg .nb-row .when { font-size: 11.5px; }
.nb-dlg .nb-tabs button { font-size: 13px; padding: 5px 11px; }
.nb-dlg .nb-hd { font-size: 15.5px; }

/* v416 - notification dialog horizontal scroll gone for real: the 560px min-width
   was wider than the padded dialog. Let it be fluid and clip any stray overflow. */
.nb-dlg { min-width: 0 !important; width: 100%; max-width: 100%; overflow-x: hidden; }
.mud-dialog:has(.nb-dlg) { overflow-x: hidden; }
.mud-dialog:has(.nb-dlg) .mud-dialog-content { overflow-x: hidden !important; }
.nb-dlg * { max-width: 100%; }
.nb-dlg .nb-row { min-width: 0; }

/* v417 - unread pills on the drawer chat links. */
.nav-chatrow { display: inline-flex; align-items: center; gap: 8px; }
.nav-chatrow .nav-badge {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
    background: linear-gradient(135deg, #ff5252, #e53935); color: #fff;
    font-size: 11px; font-weight: 800; line-height: 18px; text-align: center;
    font-variant-numeric: tabular-nums; display: inline-block;
}

/* v418 - the top-bar fullscreen toggle, styled like the other appbar icons. */
.mf-full-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border: 0; background: transparent;
    color: inherit; cursor: pointer; border-radius: 50%; padding: 0;
}
.mf-full-btn:hover { background: rgba(0, 0, 0, .06); }
.mf-full-btn .mud-icon-root { width: 22px; height: 22px; }

/* v420 - the category strip nudges: a solid round chip with a real drawn triangle
   (not a font glyph — those blurred into illegibility) sits at the "more" edge and
   bounces; it hides once every category is in view. */
.pos-cats { position: relative; }
.cats-hint {
    position: sticky; inset-inline-end: 2px; align-self: center; flex: none;
    display: none; align-items: center; justify-content: center;
    width: 30px; min-width: 30px; height: 30px; margin-inline-start: -30px;
    pointer-events: none; border-radius: 50%;
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    box-shadow: 0 3px 10px rgba(244, 81, 30, .45);
    z-index: 3;
    animation: cats-nudge 1.1s ease-in-out infinite;
}
.pos-cats-row.cats-more .cats-hint { display: inline-flex; }
/* A crisp CSS triangle beats any font glyph for legibility at this size. */
.cats-hint::before {
    content: "";
    width: 0; height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-inline-end: 8px solid #fff;
    margin-inline-start: 2px;
}
[dir="ltr"] .cats-hint::before { border-inline-end: 0; border-inline-start: 8px solid #fff; margin-inline-start: 0; margin-inline-end: 2px; }
@keyframes cats-nudge { 0%, 100% { transform: translateX(0) scale(1); } 50% { transform: translateX(-4px) scale(1.06); } }
[dir="ltr"] .cats-hint { animation-name: cats-nudge-ltr; }
@keyframes cats-nudge-ltr { 0%, 100% { transform: translateX(0) scale(1); } 50% { transform: translateX(4px) scale(1.06); } }

/* v422 - Roles & permissions: role cards over a tick-matrix, so an owner can see
   at a glance exactly which door each key opens. */
.rl-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
@media (max-width: 1100px) { .rl-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .rl-cards { grid-template-columns: 1fr; } }
.rl-card {
    background: #fff; border: 1px solid #f0e7db; border-radius: 16px; padding: 14px;
    display: flex; flex-direction: column; gap: 3px; position: relative; overflow: hidden;
}
.rl-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: #cbbfae; }
.rl-card.owner::before { background: linear-gradient(90deg, #ffd35c, #f4a01e); }
.rl-card.manager::before { background: linear-gradient(90deg, #7c83ff, #4f46e5); }
.rl-card.cashier::before { background: linear-gradient(90deg, #81c784, #2e7d32); }
.rl-card.kitchen::before { background: linear-gradient(90deg, #ffb74d, #f57c00); }
.rl-card.waiter::before { background: linear-gradient(90deg, #4fc3f7, #0277bd); }
.rl-card .ic { font-size: 26px; line-height: 1; }
.rl-card b { font-size: 14.5px; color: #2f2a23; }
.rl-card small { font-size: 11.5px; color: #8a8175; line-height: 1.45; min-height: 32px; }
.rl-card .cnt { font-size: 11px; font-weight: 800; color: #6b6257; font-style: normal;
    background: #faf6f0; border-radius: 999px; padding: 2px 9px; width: fit-content; margin-top: 4px; }

.rl-wrap { overflow-x: auto; background: #fff; border: 1px solid #f0e7db; border-radius: 16px; }
.rl-table { width: 100%; border-collapse: collapse; min-width: 640px; }
.rl-table th, .rl-table td { padding: 9px 12px; text-align: center; font-size: 12.5px; }
.rl-table thead th {
    position: sticky; top: 0; background: #faf6f0; color: #3c352c; font-weight: 800;
    font-size: 12px; white-space: nowrap; border-bottom: 1px solid #f0e7db; z-index: 1;
}
.rl-table th.what, .rl-table td.what { text-align: start; }
.rl-table td.what b { display: block; font-size: 13px; color: #2f2a23; font-weight: 700; }
.rl-table td.what small { display: block; font-size: 11px; color: #97907f; line-height: 1.4; }
.rl-table tbody tr:not(.grp):hover { background: #fdf9f4; }
.rl-table tbody tr:not(.grp) + tr:not(.grp) td { border-top: 1px solid #f8f2ea; }
.rl-table tr.grp td {
    text-align: start; background: #fff6ec; color: #b4551f; font-weight: 800;
    font-size: 11.5px; letter-spacing: .4px; text-transform: uppercase; padding: 7px 12px;
}
.rl-table .yes { color: #2e7d32; font-weight: 900; font-size: 15px; }
.rl-table .no { color: #d9d2c7; font-weight: 700; }
.rl-table th.owner, .rl-table td.owner { background: #fffdf5; }
.rl-note { display: flex; align-items: center; gap: 8px; margin-top: 12px;
    font-size: 12px; color: #8a8175; padding: 0 4px; }
.tm-hero-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-hero-link { color: #fff !important; opacity: .92; font-weight: 700 !important; }
.tm-hero-link:hover { opacity: 1; background: rgba(255, 255, 255, .14) !important; }

/* ── v424: Roles & permissions, rebuilt — a gradient band, coverage rings, a
   focusable matrix with a frozen first column. Replaces the v422 draft. ───────── */
.rl { max-width: 1180px; margin-inline: auto; }

/* The band */
.rl-hero {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    background: linear-gradient(135deg, #ff8a2a, #f4511e);
    border-radius: 22px; padding: 20px 22px; color: #fff;
    box-shadow: 0 14px 34px rgba(244, 81, 30, .22);
    position: relative; overflow: hidden; margin-bottom: 18px;
}
.rl-hero::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 88% -30%, rgba(255, 255, 255, .30), transparent 58%);
    pointer-events: none;
}
.rl-hero .tx { flex: 1; min-width: 0; position: relative; z-index: 1; }
.rl-hero .kicker {
    display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .6px;
    text-transform: uppercase; background: rgba(255, 255, 255, .22);
    padding: 3px 10px; border-radius: 999px; margin-bottom: 7px;
}
.rl-hero b { display: block; font-size: 23px; font-weight: 800; line-height: 1.2; }
.rl-hero small { display: block; font-size: 13px; opacity: .92; margin-top: 3px; }
.rl-hero .acts { position: relative; z-index: 1; }
.rl-hero-link {
    color: #fff !important; font-weight: 700 !important;
    background: rgba(255, 255, 255, .16) !important; border-radius: 12px !important;
}
.rl-hero-link:hover { background: rgba(255, 255, 255, .26) !important; }

/* Role cards — a conic ring shows how much of the catalog the key opens. */
.rl-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 1100px) { .rl-cards { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .rl-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .rl-cards { grid-template-columns: 1fr; } }
.rl-card {
    --tone: #cbbfae;
    background: #fff; border: 1.5px solid #f0e7db; border-radius: 18px; padding: 16px 14px;
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
    cursor: pointer; font-family: inherit; position: relative; overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
    animation: qc-pop-in .38s ease both;
}
.rl-card:nth-child(2) { animation-delay: .04s; }
.rl-card:nth-child(3) { animation-delay: .08s; }
.rl-card:nth-child(4) { animation-delay: .12s; }
.rl-card:nth-child(5) { animation-delay: .16s; }
.rl-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(70, 45, 20, .12); }
.rl-card.on { border-color: var(--tone); box-shadow: 0 14px 30px rgba(70, 45, 20, .14); }
.rl-card.on::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--tone); }
.rl-card.dim { opacity: .5; }
.rl-card.owner   { --tone: #f4a01e; }
.rl-card.manager { --tone: #4f46e5; }
.rl-card.cashier { --tone: #2e7d32; }
.rl-card.kitchen { --tone: #f57c00; }
.rl-card.waiter  { --tone: #0277bd; }

/* The ring: filled to --pct with the role's tone, hollow for the rest. */
.rl-card .ring {
    width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
    background: conic-gradient(var(--tone) calc(var(--pct) * 1%), #f1eae0 0);
    margin-bottom: 3px;
}
.rl-card .ring .ic {
    width: 46px; height: 46px; border-radius: 50%; background: #fff;
    display: grid; place-items: center; font-size: 22px; line-height: 1;
}
.rl-card b { font-size: 14.5px; color: #2f2a23; }
.rl-card small { font-size: 11.5px; color: #8a8175; line-height: 1.45; min-height: 33px; }
.rl-card .cnt {
    font-size: 11px; font-weight: 800; font-style: normal; color: #fff;
    background: var(--tone); border-radius: 999px; padding: 3px 10px; margin-top: 2px;
    font-variant-numeric: tabular-nums;
}

/* The focus strip */
.rl-focus {
    display: flex; align-items: center; gap: 9px; margin-bottom: 10px;
    background: #fff6ec; border: 1px solid #ffe0c4; border-radius: 12px;
    padding: 8px 13px; font-size: 12.5px; font-weight: 700; color: #b4551f;
}
.rl-focus button {
    margin-inline-start: auto; border: 0; background: #ffe6d2; color: #b4551f;
    border-radius: 999px; padding: 3px 11px; font-size: 11.5px; font-weight: 800;
    cursor: pointer; font-family: inherit;
}
.rl-focus button:hover { background: #ffd7bb; }

/* The matrix */
.rl-wrap {
    overflow-x: auto; background: #fff; border: 1.5px solid #f0e7db;
    border-radius: 18px; box-shadow: 0 8px 24px rgba(70, 45, 20, .05);
}
.rl-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 620px; }
.rl-table th, .rl-table td { padding: 10px 14px; text-align: center; font-size: 12.5px; }
.rl-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: #fbf7f2; color: #3c352c; font-weight: 800; font-size: 12px;
    white-space: nowrap; border-bottom: 1.5px solid #f0e7db;
}
.rl-table thead th .hd { display: inline-flex; align-items: center; gap: 6px; }
.rl-table thead th .hd i { font-style: normal; font-size: 15px; }
.rl-table thead th.hot { background: #fff2e6; color: #b4551f; }

/* The first column stays put while the roles scroll past it. */
.rl-table th.what, .rl-table td.what {
    text-align: start; position: sticky; inset-inline-start: 0; z-index: 1;
    background: #fff; min-width: 220px;
}
.rl-table thead th.what { background: #fbf7f2; z-index: 3; }
.rl-table td.what b { display: block; font-size: 13px; color: #2f2a23; font-weight: 700; }
.rl-table td.what small { display: block; font-size: 11px; color: #97907f; line-height: 1.4; margin-top: 1px; }

.rl-table tbody tr:not(.grp):hover td { background: #fdf9f4; }
.rl-table tbody tr:not(.grp):hover td.what { background: #fdf9f4; }
.rl-table tbody td { border-bottom: 1px solid #f8f2ea; }
.rl-table tr.grp td {
    text-align: start; background: linear-gradient(90deg, #fff4e8, #fffaf5);
    color: #b4551f; font-weight: 800; font-size: 11.5px; letter-spacing: .5px;
    text-transform: uppercase; padding: 8px 14px; position: sticky; inset-inline-start: 0;
}
.rl-table tr.grp .gi { font-size: 13px; }
.rl-table td.hot { background: #fffaf4; }

/* The ticks: a filled green pill for yes, a quiet dash for no. */
.rl-table .yes {
    display: inline-grid; place-items: center; width: 24px; height: 24px;
    border-radius: 50%; background: #e6f6ec; color: #1b7a3d;
    font-weight: 900; font-size: 13px; line-height: 1;
}
.rl-table .no { color: #ddd6cb; font-weight: 700; font-size: 14px; }
.rl-table th.owner, .rl-table td.owner { background: #fffdf6; }
.rl-table td.owner .yes { background: #fff3d6; color: #a56b00; }

.rl-note {
    display: flex; align-items: center; gap: 9px; margin-top: 14px; padding: 11px 14px;
    background: #f4faf6; border: 1px solid #dcefe2; border-radius: 12px;
    font-size: 12.5px; color: #2f6b45; font-weight: 600;
}
.rl-note .mud-icon-root { color: #2e7d32; flex: none; }

/* v461 - dialog scrim: a light warm tint and nothing else.
   It used to also carry backdrop-filter: blur(2.5px). Blurring the whole page behind
   a small dialog smears every line of the report underneath, reads as a rendering
   fault rather than depth, and gets worse the further the user zooms in. A flat tint
   pushes the page back just as well and leaves it legible. */
.mud-overlay .mud-overlay-scrim,
.mud-overlay .mud-overlay-scrim.mud-overlay-dark {
    background-color: rgba(40, 26, 14, .2) !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* v426 - the dialog backdrop for hand-built modals. The photo lightbox (.qc-lightbox)
   is 90% black on purpose — a picture wants a dark room — but a FORM over the page
   must leave the page visible, exactly like a MudDialog does. */
.oo-modal {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: rgba(40, 26, 14, .32);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    animation: qcfade .15s ease;
}

/* v427 - the page wrapper .pg-anim animates a transform, and a transformed ancestor
   becomes the containing block for position:fixed — so a modal inside it is pinned
   to the PAGE BOX, not the viewport. Same escape hatch every other overlay uses. */
.pg-anim:has(.oo-modal) { animation: none !important; transform: none !important; }
.pg-anim:has(.qc-lightbox) { animation: none !important; transform: none !important; }

/* v437 - a phone/IBAN/code field is a LEFT-TO-RIGHT field, whole and entire: the
   label sits top-left, the value runs from the left, exactly like the same field
   in English. Mixing the two directions (RTL chrome, LTR value) is what put the
   label and the outline notch on opposite ends. .mf-ltr already does this — these
   rules only make sure nothing downstream re-flips a piece of it. */
[dir="rtl"] .mud-input-control.mf-ltr,
[dir="rtl"] .mud-input-control.mf-ltr .mud-input,
[dir="rtl"] .mud-input-control.mf-ltr .mud-input-outlined-border,
[dir="rtl"] .mud-input-control.mf-ltr input,
[dir="rtl"] .mud-input-control.mf-ltr textarea {
    direction: ltr !important;
    text-align: left;
}
/* The floating label belongs at the left of an LTR field, and scales toward it. */
[dir="rtl"] .mud-input-control.mf-ltr .mud-input-label,
[dir="rtl"] .mud-input-control.mf-ltr .mud-input-label-shrink {
    transform-origin: top left;
    right: unset;
    left: 0;
}

/* v430 - the password row: the field carries helper text underneath, which made
   align-items:center measure the WHOLE control and push the dice button below the
   input box. Take the helper out of the flow, then centring lines up on the box. */
.tm-pwrow {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    margin-bottom: 22px;        /* room for the helper that now floats */
}
.tm-pwrow .mud-input-control { flex: 1; min-width: 0; margin-bottom: 0; }
.tm-pwrow .mud-input-helper-text {
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    margin: 2px 0 0;
}
.tm-pwrow .mud-icon-button { flex: none; }

/* (v435's half-RTL experiment removed — see v437 above: the field is LTR whole.) */

/* v434 - a phone number behind a hatch. A counter screen is read by whoever walks
   past it, so the digits stay covered by a woven block until someone taps. */
.ph-mask {
    display: inline-flex; align-items: center; gap: 6px;
    border: 0; padding: 2px 6px; border-radius: 7px; cursor: pointer;
    background: #f6f1ea; font-family: inherit; font-size: inherit; line-height: 1.4;
    color: #6b6257; vertical-align: middle; transition: background .14s ease;
}
.ph-mask:hover { background: #efe7dc; }
.ph-mask .bars {
    /* The woven block: two offset checker layers, so it reads as "covered", not "empty". */
    width: 54px; height: 11px; border-radius: 3px; flex: none;
    background-image:
        linear-gradient(45deg, #b9ac9c 25%, transparent 25%, transparent 75%, #b9ac9c 75%),
        linear-gradient(45deg, #b9ac9c 25%, transparent 25%, transparent 75%, #b9ac9c 75%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    background-color: #ded4c6;
}
.ph-mask .tail { font-variant-numeric: tabular-nums; font-weight: 700; color: #8a8175; letter-spacing: .3px; }
.ph-mask.open {
    cursor: pointer; background: transparent; padding: 0;
    color: inherit; user-select: text; -webkit-user-select: text;
}
.ph-mask.open:hover { background: #f6f1ea; }
.ph-none { color: #b3a893; }

/* v435b - the masked phone reads left-to-right whatever the page does: the hatch
   stands for the hidden leading digits, so the visible tail must follow it, not
   precede it. In an RTL row the flex order flipped and printed "612 ▨▨▨". */
.ph-mask { direction: ltr; }
.ph-mask .tail { unicode-bidi: isolate; }

/* v442 - the masked phone stays LTR inside (hatch, then the visible tail, the way a
   number runs) but takes NO margin of its own: an auto margin shoved the whole row
   to one edge and broke the card's centre line. Let each row's own alignment win. */
.ph-mask { margin-inline: 0; }

/* v439 - inside a meta row the hatch wears no chrome at all: no pill, no border, no
   fill. It is simply the covered part of a line of text, the same size and colour as
   the email above it and the date below, so the card reads as three even rows. */
.tm-card .rows .ph-mask,
.rows .ph-mask,
.wa-row .ph-mask {
    background: none;
    border: 0;
    padding: 0;
    gap: 5px;
    font-size: 11.5px;
    color: #97907f;
    line-height: inherit;
}
.tm-card .rows .ph-mask:hover,
.rows .ph-mask:hover { background: none; color: #f4511e; }
.tm-card .rows .ph-mask:hover .bars,
.rows .ph-mask:hover .bars { opacity: 1; }
/* The covered digits: a short woven strip, weighted like text, not like a widget. */
.rows .ph-mask .bars,
.tm-card .rows .ph-mask .bars {
    width: 34px;
    height: 8px;
    border-radius: 2px;
    opacity: .7;
    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;
}
.rows .ph-mask .tail,
.tm-card .rows .ph-mask .tail { font-size: 11.5px; font-weight: 600; color: inherit; }
.rows .ph-mask.open,
.tm-card .rows .ph-mask.open { background: none; padding: 0; color: #97907f; }

/* v440 - the card's three meta rows read as one set: bigger text, a warmer hatch,
   and every row centred on the same axis. */
.tm-card .rows { align-items: center; }
.tm-card .rows small {
    font-size: 12.5px;
    justify-content: center;
    width: 100%;
    color: #8a8175;
}
.tm-card .rows .mud-icon-root { width: 15px; height: 15px; color: #bfb3a3; }
.tm-card .rows .ph-mask,
.rows .ph-mask { font-size: 12.5px; color: #8a8175; }
.tm-card .rows .ph-mask .tail,
.rows .ph-mask .tail { font-size: 12.5px; font-weight: 700; letter-spacing: .4px; }
/* A warmer, better-defined weave — it should look deliberately covered, not faded. */
.rows .ph-mask .bars,
.tm-card .rows .ph-mask .bars {
    width: 38px;
    height: 10px;
    opacity: 1;
    background-image:
        linear-gradient(45deg, #a8998a 25%, transparent 25%, transparent 75%, #a8998a 75%),
        linear-gradient(45deg, #a8998a 25%, transparent 25%, transparent 75%, #a8998a 75%);
    background-color: #e6dcd0;
    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;
}
.tm-card .rows .ph-mask:hover .bars,
.rows .ph-mask:hover .bars {
    background-image:
        linear-gradient(45deg, #f4511e 25%, transparent 25%, transparent 75%, #f4511e 75%),
        linear-gradient(45deg, #f4511e 25%, transparent 25%, transparent 75%, #f4511e 75%);
    background-color: #ffe3d2;
}

/* v441 - the eye on a covered number: small, quiet, and the same colour as the row
   until you reach for it. It is the affordance the hatch alone could not give. */
.ph-mask .eye {
    width: 15px !important;
    height: 15px !important;
    flex: none;
    color: #bfb3a3;
    transition: color .14s ease;
}
.ph-mask:hover .eye { color: #f4511e; }
.ph-mask.open { cursor: pointer; }
.ph-mask.open .num { font-variant-numeric: tabular-nums; }
.ph-mask.open:hover .eye { color: #f4511e; }
/* The phone line: icon, hatch, digits and eye sit as one centred group. */
.tm-card .rows small:has(.ph-mask) { justify-content: center; gap: 7px; }
.tm-card .rows .ph-mask { justify-content: center; }

/* v443 - the card's meta rows line up on the start edge (the right, in Farsi)
   instead of floating centred, so email, phone and date share one margin. */
.tm-card .rows { align-items: stretch; }
.tm-card .rows small,
.tm-card .rows small:has(.ph-mask) { justify-content: flex-start; }
.tm-card .rows .ph-mask { justify-content: flex-start; }

/* v444 - roles the owner writes: their own card row, and a picker that lays every
   permission out as a tickable line so a role is built by reading, not guessing. */
.rl-sec {
    display: flex; align-items: center; gap: 8px; margin: 20px 2px 10px;
    font-size: 13px; font-weight: 800; color: #b4551f; letter-spacing: .3px;
    text-transform: uppercase;
}
.rl-sec .mud-icon-root { color: #f4511e; }
.rl-cards.custom .rl-card { cursor: default; }
.rl-card.own { --tone: #7a5cd6; }
.rl-card .ops { display: flex; gap: 6px; margin-top: 8px; }
.rl-card .ops button {
    border: 1px solid #efe7db; background: #faf6f0; border-radius: 9px;
    width: 30px; height: 28px; display: grid; place-items: center; cursor: pointer;
}
.rl-card .ops button:hover { background: #fdeadb; border-color: #f5d9bd; }
.rl-card .ops button .mud-icon-root { width: 16px; height: 16px; color: #6b6257; }
.rl-card .ops button.danger:hover { background: #fdecea; border-color: #f5c6c0; }
.rl-card .ops button.danger:hover .mud-icon-root { color: #c62828; }

/* The role sheet */
.rl-sheet {
    background: #fff; border-radius: 20px; padding: 20px;
    width: min(720px, 96vw); max-height: 90vh; overflow: auto;
    box-shadow: 0 26px 70px rgba(50, 32, 14, .28);
    animation: qc-pop-in .22s ease both;
}
.rl-sheet .head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.rl-sheet .head .ic {
    width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
    background: linear-gradient(135deg, #9b7ff0, #6d4fd4); font-size: 21px;
}
.rl-sheet .head b { font-size: 17px; color: #2f2a23; }
.rl-sheet .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
@media (max-width: 620px) { .rl-sheet .two { grid-template-columns: 1fr; } }
.rl-sheet .icons { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.rl-sheet .icons button {
    width: 34px; height: 34px; border-radius: 10px; border: 1.5px solid #f0e7db;
    background: #fff; font-size: 17px; cursor: pointer; line-height: 1;
}
.rl-sheet .icons button.on { border-color: #6d4fd4; background: #f1ecff; }

.pk-head { display: flex; align-items: center; gap: 10px; margin: 6px 2px 10px; }
.pk-head b { font-size: 13.5px; color: #2f2a23; }
.pk-head .n { font-size: 12px; font-weight: 800; color: #8a8175; font-variant-numeric: tabular-nums; }
.pk-head button {
    margin-inline-start: 0; border: 1px solid #efe7db; background: #faf6f0;
    border-radius: 999px; padding: 3px 11px; font-size: 11.5px; font-weight: 700;
    color: #6b6257; cursor: pointer; font-family: inherit;
}
.pk-head button:hover { background: #fdeadb; }
.pk-head button:first-of-type { margin-inline-start: auto; }

.pk { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 620px) { .pk { grid-template-columns: 1fr; } }
.pk-grp { border: 1px solid #f4ece1; border-radius: 14px; padding: 10px; background: #fffdfa; }
.pk-grp .t {
    font-size: 11.5px; font-weight: 800; color: #b4551f; text-transform: uppercase;
    letter-spacing: .4px; margin-bottom: 7px;
}
.pk-item {
    display: flex; align-items: flex-start; gap: 9px; width: 100%; text-align: start;
    border: 0; background: transparent; border-radius: 10px; padding: 7px 8px;
    cursor: pointer; font-family: inherit;
}
.pk-item:hover { background: #f9f4ee; }
.pk-item .box {
    flex: none; width: 19px; height: 19px; border-radius: 6px; margin-top: 1px;
    border: 1.5px solid #d9d2c7; background: #fff; display: grid; place-items: center;
    font-size: 12px; font-weight: 900; color: #fff;
}
.pk-item.on .box { background: #6d4fd4; border-color: #6d4fd4; }
.pk-item .tx { display: flex; flex-direction: column; min-width: 0; }
.pk-item .tx b { font-size: 12.5px; color: #2f2a23; font-weight: 700; }
.pk-item .tx small { font-size: 11px; color: #97907f; line-height: 1.35; }
.rl-sheet .acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 16px; }
/* A custom role in the member's role picker, wearing its own violet. */
.tm-role.r-own.on { border-color: #6d4fd4; background: #f3efff; }
.tm-role.r-own .emo { font-size: 20px; line-height: 1; }
.tm-role.r-own.on .tick { background: #6d4fd4; }
/* A custom role wears violet wherever it is named: count chips and member cards. */
.tm-hero .ct.r-own { background: rgba(255,255,255,.22); }
.tm-card.r-own .chip { background: #f1ecff; color: #5b3fc4; }
.tm-card.r-own .ava { background: linear-gradient(135deg, #9b7ff0, #6d4fd4); }
.tm-card.r-own { border-top-color: #6d4fd4; }

/* v447 - the role sheet earns its keep: templates to start from, a live search,
   one tick per group, and a footer that always says what you are about to grant. */
.rl-sec .n {
    background: #f1ecff; color: #5b3fc4; border-radius: 999px;
    padding: 1px 9px; font-size: 11px; font-weight: 800;
}

/* The invitation shown before the first custom role exists. */
.rl-empty {
    width: 100%; border: 2px dashed #e0d6f5; background: #fbfaff; border-radius: 18px;
    padding: 26px 18px; display: flex; flex-direction: column; align-items: center; gap: 5px;
    cursor: pointer; font-family: inherit; transition: all .16s ease;
}
.rl-empty:hover { border-color: #9b7ff0; background: #f6f2ff; transform: translateY(-2px); }
.rl-empty .ic { font-size: 30px; }
.rl-empty b { font-size: 15px; color: #2f2a23; }
.rl-empty small { font-size: 12.5px; color: #8a8175; text-align: center; max-width: 420px; line-height: 1.5; }
.rl-empty .cta {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
    background: linear-gradient(135deg, #9b7ff0, #6d4fd4); color: #fff;
    border-radius: 999px; padding: 6px 15px; font-size: 12.5px; font-weight: 800;
}
.rl-empty .cta .mud-icon-root { width: 16px; height: 16px; }

/* Templates */
.tpl { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.tpl .lb { font-size: 12px; font-weight: 700; color: #8a8175; }
.tpl button {
    border: 1px solid #efe7db; background: #faf6f0; border-radius: 999px;
    padding: 4px 11px; font-size: 12px; font-weight: 700; color: #5c5348;
    cursor: pointer; font-family: inherit;
}
.tpl button:hover { background: #f1ecff; border-color: #cdbcf5; color: #5b3fc4; }

/* Picker head: count, search, bulk actions */
.pk-head { flex-wrap: wrap; }
.pk-head .find {
    display: flex; align-items: center; gap: 6px; flex: 1; min-width: 150px;
    background: #faf6f0; border: 1px solid #efe7db; border-radius: 999px; padding: 4px 11px;
}
.pk-head .find input {
    border: 0; background: transparent; outline: none; width: 100%;
    font-family: inherit; font-size: 12.5px; color: #3c352c;
}
.pk-head .find .mud-icon-root { color: #bfb3a3; flex: none; }
.pk-head button:first-of-type { margin-inline-start: 0; }

/* Group header with its own count and a single tick for the lot */
.pk-grp .t { display: flex; align-items: center; gap: 8px; }
.pk-grp .t .cnt {
    font-size: 10.5px; font-weight: 800; color: #a89e90; letter-spacing: 0;
    text-transform: none; font-variant-numeric: tabular-nums;
}
.pk-grp .t .grp-all {
    margin-inline-start: auto; width: 22px; height: 22px; border-radius: 7px;
    border: 1.5px solid #ded4c6; background: #fff; color: #a89e90;
    font-size: 12px; font-weight: 900; cursor: pointer; line-height: 1;
}
.pk-grp .t .grp-all:hover { border-color: #9b7ff0; color: #6d4fd4; }
.pk-grp .t .grp-all.on { background: #6d4fd4; border-color: #6d4fd4; color: #fff; }

/* A footer that states the outcome before you commit to it. */
.rl-sheet .acts {
    position: sticky; bottom: -20px; background: #fff; padding-top: 12px;
    margin-top: 18px; border-top: 1px solid #f4ece1; align-items: center;
}
.rl-sheet .acts .sum {
    margin-inline-end: auto; font-size: 12.5px; font-weight: 700; color: #6d4fd4;
    background: #f4f0ff; border-radius: 999px; padding: 4px 12px;
}

/* v448: Team activity — who is at work, and where they have been. Modelled on the
   NCC presence board, wearing the OrderOrange palette. */
.ua { max-width: 1280px; margin-inline: auto; }

/* Hero: the ratio ring beside three plain numbers */
.ua-hero { display: grid; grid-template-columns: 320px 1fr; gap: 14px; margin-bottom: 16px; }
@media (max-width: 900px) { .ua-hero { grid-template-columns: 1fr; } }
.ua-ringcard {
    background: linear-gradient(135deg, #ff8a2a, #e8420e); color: #fff; border-radius: 20px;
    padding: 18px; display: flex; align-items: center; gap: 18px;
    box-shadow: 0 14px 32px rgba(232, 66, 14, .26); position: relative; overflow: hidden;
}
.ua-ringcard::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(circle at 88% -30%, rgba(255,255,255,.30), transparent 58%);
}
.ua-ring {
    --p: 0; width: 118px; height: 118px; border-radius: 50%; flex: none; position: relative; z-index: 1;
    background: conic-gradient(#2ecc71 calc(var(--p) * 1%), rgba(255,255,255,.22) 0);
    display: grid; place-items: center; transition: background .4s ease;
}
.ua-ring .hole {
    width: 88px; height: 88px; border-radius: 50%; background: #e8480f;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.ua-ring .hole b { font-size: 1.75rem; font-weight: 800; line-height: 1; }
.ua-ring .hole b span { font-size: .9rem; opacity: .85; }
.ua-ring .hole small { font-size: .66rem; opacity: .85; margin-top: 3px; }
.ua-ringcard .side { display: flex; flex-direction: column; gap: 10px; font-size: .88rem; position: relative; z-index: 1; }
.ua-ringcard .side b { font-size: 1.1rem; margin-inline-start: 5px; }
.ua-ringcard .side .d { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 6px; }
.ua-ringcard .side .d.on { background: #2ecc71; }
.ua-ringcard .side .d.off { background: rgba(255,255,255,.5); }

.ua-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
@media (max-width: 700px) { .ua-kpis { grid-template-columns: 1fr; } }
.ua-kpi {
    background: #fff; border: 1px solid #f0e7db; border-radius: 16px; padding: 15px 17px;
    display: flex; align-items: center; gap: 13px; position: relative; overflow: hidden;
    transition: transform .15s ease, box-shadow .15s ease;
}
.ua-kpi:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(70,45,20,.10); }
.ua-kpi::after { content: ""; position: absolute; inset-inline-start: 0; top: 0; bottom: 0; width: 5px; }
.ua-kpi.green::after { background: #2ecc71; }
.ua-kpi.grey::after { background: #cbbfae; }
.ua-kpi.blue::after { background: #4f8cf7; }
.ua-kpi .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #fff; flex: none; }
.ua-kpi.green .ic { background: linear-gradient(135deg, #52d17f, #1e8e3e); }
.ua-kpi.grey .ic { background: linear-gradient(135deg, #cbbfae, #a89e90); }
.ua-kpi.blue .ic { background: linear-gradient(135deg, #6ea2ff, #2f6fe6); }
.ua-kpi b { display: block; font-size: 1.65rem; font-weight: 800; line-height: 1; color: #2f2a23; font-variant-numeric: tabular-nums; }
.ua-kpi small { display: block; font-size: .78rem; color: #8a8175; margin-top: 4px; }

/* The table card */
.ua-card { background: #fff; border: 1px solid #f0e7db; border-radius: 18px; overflow: hidden; box-shadow: 0 8px 22px rgba(70,45,20,.05); }
.ua-card .hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 15px 18px; }
.ua-card .hd .t { font-weight: 800; font-size: 1rem; color: #2f2a23; display: flex; align-items: center; gap: 9px; }
.ua-card .hd .t .mud-icon-root { color: #f4511e; width: 19px; height: 19px; }
.ua-card .tools { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ua-card .find {
    display: flex; align-items: center; gap: 7px; background: #faf6f0;
    border: 1px solid #efe7db; border-radius: 999px; padding: 6px 13px; min-width: 200px;
}
.ua-card .find input { border: 0; background: transparent; outline: none; font-family: inherit; font-size: 12.5px; width: 100%; color: #3c352c; }
.ua-card .find .mud-icon-root { color: #bfb3a3; flex: none; }
.ua-card .seg { display: inline-flex; background: #f4ece1; border-radius: 11px; padding: 3px; }
.ua-card .seg button {
    border: 0; background: transparent; padding: 6px 14px; border-radius: 9px; cursor: pointer;
    font-family: inherit; font-weight: 700; font-size: .8rem; color: #8a8175;
}
.ua-card .seg button.on { background: #fff; color: #2f2a23; box-shadow: 0 2px 6px rgba(70,45,20,.10); }
.ua-card .upd { font-size: .74rem; color: #a89e90; font-variant-numeric: tabular-nums; }
.ua-card .rf {
    width: 38px; height: 38px; border-radius: 11px; border: 1px solid #efe7db; background: #fff;
    color: #f4511e; cursor: pointer; display: grid; place-items: center; transition: .18s;
}
.ua-card .rf:hover { background: #fdeadb; transform: rotate(70deg); }

.ua-scroll { max-height: 580px; overflow: auto; }
.ua-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 900px; }
.ua-table thead th {
    position: sticky; top: 0; z-index: 2; text-align: start; background: #fbf7f2;
    font-size: .74rem; font-weight: 800; color: #8a8175; padding: 11px 15px;
    border-bottom: 1px solid #f0e7db; white-space: nowrap;
}
.ua-table tbody td { padding: 10px 15px; border-bottom: 1px solid #f8f2ea; font-size: .87rem; vertical-align: middle; }
.ua-table tbody tr:hover td { background: #fdf9f4; }
.ua-table .idx { color: #cbbfae; font-weight: 700; }
.ua-table .who { display: flex; align-items: center; gap: 11px; }
.ua-table .av {
    position: relative; width: 40px; height: 40px; border-radius: 50%; flex: none; overflow: hidden;
    display: inline-grid; place-items: center; font-weight: 800; font-size: .82rem; color: #fff;
}
.ua-table .av img { width: 100%; height: 100%; object-fit: cover; }
.ua-table .av.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #2ecc71; }
.ua-table .av .dot {
    position: absolute; bottom: -1px; inset-inline-end: -1px; width: 12px; height: 12px;
    border-radius: 50%; background: #2ecc71; border: 2px solid #fff;
}
.ua-table .nm { font-weight: 700; color: #2f2a23; }
.ua-table .crown { font-size: 12px; }
.ua-table .sub { font-size: .74rem; color: #a89e90; margin-top: 2px; }
.ua-table .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; font-size: .74rem; font-weight: 800; }
.ua-table .pill.on { background: rgba(46,204,113,.15); color: #1e8e3e; }
.ua-table .pill.off { background: #f4ece1; color: #a89e90; }
.ua-table .pill .d { width: 8px; height: 8px; border-radius: 50%; background: #2ecc71; animation: ua-pulse 1.8s infinite; }
@keyframes ua-pulse {
    0% { box-shadow: 0 0 0 0 rgba(46,204,113,.5); }
    70% { box-shadow: 0 0 0 7px rgba(46,204,113,0); }
    100% { box-shadow: 0 0 0 0 rgba(46,204,113,0); }
}
.ua-table .tm { font-size: .8rem; color: #6b6257; font-variant-numeric: tabular-nums; }
.ua-table .rel { font-size: .8rem; color: #8a8175; }
.ua-table .rel.live { color: #1e8e3e; font-weight: 700; }
.ua-table .pg {
    display: inline-block; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    background: rgba(244,81,30,.08); color: #b4551f; padding: 3px 10px; border-radius: 8px; font-size: .78rem;
}
.ua-table .cnt { font-weight: 800; color: #6b6257; font-variant-numeric: tabular-nums; }
.ua-table .muted { color: #cbbfae; }
.ua-table .hist {
    display: inline-flex; align-items: center; gap: 5px; border: 1px solid #efe7db; background: #fff;
    color: #b4551f; border-radius: 9px; padding: 5px 10px; font-family: inherit; font-weight: 700;
    font-size: .76rem; cursor: pointer; transition: .15s;
}
.ua-table .hist:hover { background: #f4511e; color: #fff; border-color: #f4511e; }
.ua-table .hist .mud-icon-root { width: 14px; height: 14px; }
.ua-table .empty { text-align: center; color: #bfb3a3; padding: 44px 0 !important; font-size: 26px; }
.ua-table .empty div { font-size: 13px; margin-top: 8px; }
.ua-card .ft { text-align: center; font-size: .74rem; color: #a89e90; padding: 12px; border-top: 1px solid #f8f2ea; }

/* The slide-over trail */
.ua-drawer {
    position: fixed; inset-block: 0; inset-inline-start: 0; width: min(460px, 94vw); z-index: 4001;
    background: #fff; display: flex; flex-direction: column;
    box-shadow: 10px 0 40px rgba(50,32,14,.22); animation: ua-slide .24s ease;
}
[dir="rtl"] .ua-drawer { animation-name: ua-slide-rtl; }
@keyframes ua-slide { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes ua-slide-rtl { from { transform: translateX(100%); } to { transform: none; } }
.ua-drawer .hd {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 16px 18px; background: linear-gradient(135deg, #ff8a2a, #e8420e); color: #fff;
}
.ua-drawer .who { display: flex; align-items: center; gap: 11px; }
.ua-drawer .av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; color: #fff; font-weight: 800; }
.ua-drawer .av img { width: 100%; height: 100%; object-fit: cover; }
.ua-drawer .nm { font-weight: 800; }
.ua-drawer .sub { font-size: .76rem; opacity: .9; }
.ua-drawer .x { width: 34px; height: 34px; border-radius: 10px; border: 0; background: rgba(255,255,255,.2); color: #fff; cursor: pointer; font-size: 15px; }
.ua-drawer .x:hover { background: rgba(255,255,255,.34); }
.ua-drawer .filter { display: flex; gap: 6px; padding: 12px 18px; border-bottom: 1px solid #f8f2ea; }
.ua-drawer .filter button {
    border: 1px solid #efe7db; background: #faf6f0; border-radius: 999px; padding: 5px 13px;
    font-size: 12px; font-weight: 700; color: #6b6257; cursor: pointer; font-family: inherit;
}
.ua-drawer .filter button.on { background: #f4511e; border-color: #f4511e; color: #fff; }
.ua-drawer .body { flex: 1; overflow-y: auto; padding: 14px 18px; }
.ua-drawer .note { text-align: center; color: #a89e90; padding: 40px 0; font-size: 26px; }
.ua-drawer .note div { font-size: 13px; margin-top: 8px; }
.ua-drawer .n { font-size: .76rem; color: #8a8175; font-weight: 700; margin-bottom: 11px; }
.ua-drawer .line { position: relative; padding-inline-start: 14px; }
.ua-drawer .line::before { content: ""; position: absolute; inset-inline-start: 4px; top: 4px; bottom: 4px; width: 2px; background: #f0e7db; }
.ua-drawer .vrow { position: relative; display: flex; gap: 12px; padding: 7px 0; }
.ua-drawer .vdot {
    position: absolute; inset-inline-start: -14px; top: 13px; width: 10px; height: 10px;
    border-radius: 50%; background: #f4511e; border: 2px solid #fff; box-shadow: 0 0 0 2px #f0e7db;
}
.ua-drawer .vmain { flex: 1; background: #fbf7f2; border: 1px solid #f4ece1; border-radius: 11px; padding: 8px 12px; }
.ua-drawer .vpg { font-weight: 700; font-size: .84rem; color: #2f2a23; word-break: break-all; }
.ua-drawer .vtm { font-size: .72rem; color: #a89e90; margin-top: 3px; font-variant-numeric: tabular-nums; }

/* The presence board wants the viewport, not the page box. */
.pg-anim:has(.ua-drawer) { animation: none !important; transform: none !important; }

/* v449: the profile picture chooser — a face you can tap, with the camera badge
   that says so, and a quiet line reporting how much the browser squeezed. */
.av-pick { display: flex; align-items: center; gap: 12px; }
.av-pick .face {
    position: relative; width: 62px; height: 62px; border-radius: 50%; flex: none;
    border: 2px solid #f0e7db; background: #faf6f0; padding: 0; cursor: pointer;
    overflow: hidden; display: grid; place-items: center; transition: border-color .15s ease;
}
.av-pick .face:hover { border-color: #f4511e; }
.av-pick .face img { width: 100%; height: 100%; object-fit: cover; }
.av-pick .face .emo { font-size: 24px; color: #8a8175; font-weight: 800; }
.av-pick .face .cam {
    position: absolute; inset-inline-end: -1px; bottom: -1px; width: 22px; height: 22px;
    border-radius: 50%; background: #f4511e; border: 2px solid #fff;
    display: grid; place-items: center;
}
.av-pick .face .cam .mud-icon-root { width: 12px; height: 12px; color: #fff; }
.av-pick .face .spin {
    position: absolute; inset: 0; background: rgba(255,255,255,.65);
    border-radius: 50%;
}
.av-pick .face .spin::after {
    content: ""; position: absolute; inset: 40%;
    border: 2px solid #f4511e; border-top-color: transparent; border-radius: 50%;
    animation: av-spin .7s linear infinite;
}
@keyframes av-spin { to { transform: rotate(360deg); } }
.av-pick .side { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.av-pick .lnk {
    border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit;
    font-size: 12.5px; font-weight: 700; color: #b4551f;
}
.av-pick .lnk:hover { text-decoration: underline; }
.av-pick .lnk.danger { color: #c62828; font-weight: 600; font-size: 11.5px; }
.av-pick .note { font-size: 11px; color: #8a8175; font-variant-numeric: tabular-nums; }

/* v451: the auto-refresh countdown on the activity board, now MudBlazor's own
   buffered linear bar. Value is time elapsed since the last read; the buffer runs
   just ahead of it, so the page's freshness is visible rather than promised. */
.ua-prog.mud-progress-linear {
    height: 4px;
    border-radius: 0;
    background-color: #f4ece1;
}
/* MudBlazor fills a determinate bar with translateX from the left edge. In RTL the
   bar has to grow from the right, so mirror the whole track — value and buffer
   flip together and stay in step. */
[dir="rtl"] .ua-prog.mud-progress-linear { transform: scaleX(-1); }
@media (prefers-reduced-motion: reduce) {
    .ua-prog.mud-progress-linear .mud-progress-linear-bar { transition: none; }
}

/* v451: the page loader's centrepiece — one piece of food hopping in place. It
   squashes on landing and morphs into the next dish at the top of each arc. All
   CSS: the loader is on screen before the Blazor circuit exists, so it must never
   depend on the server to animate. One bounce = 1.2s, five dishes = a 6s loop. */
.mf-hop-stage {
    position: relative;
    z-index: 2;
    width: 150px;
    height: 132px;
    margin: 0 auto;
}

/* The ground it lands on. Tightens and fades as the food rises, which is what
   sells the height — without it the item just floats. */
.mf-hop-shadow {
    position: absolute;
    left: 50%;
    bottom: 8px;
    width: 66px;
    height: 14px;
    margin-left: -33px;
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(96, 56, 18, .5), rgba(96, 56, 18, 0) 70%);
    animation: mf-hop-shadow 1.2s cubic-bezier(.55, .06, .68, .19) infinite;
}

/* Height only. The fall eases in (gravity); the rise gets its own easing from the
   mid keyframe, so the food hangs a moment at the apex. */
.mf-hop-y {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    height: 58px;
    animation: mf-hop-y 1.2s cubic-bezier(.55, .06, .68, .19) infinite;
}

.mf-hop-squash {
    width: 100%;
    height: 100%;
    transform-origin: 50% 100%;
    animation: mf-hop-squash 1.2s ease-out infinite;
}

.mf-hop-tumble {
    position: relative;
    width: 100%;
    height: 100%;
    animation: mf-hop-tumble 2.4s ease-in-out infinite;
}

/* Every dish sits in the same spot; the morph keyframes hand the stage from one to
   the next. The 20% window is 1.2s of the 6s loop — exactly one bounce. */
.mf-hop-item {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 46px;
    line-height: 1;
    opacity: 0;
    animation: mf-hop-morph 6s linear infinite;
    filter: drop-shadow(0 2px 3px rgba(120, 70, 20, .3));
}

@keyframes mf-hop-y {
    0% { transform: translateY(-64px); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(.2, .72, .35, 1); }
    100% { transform: translateY(-64px); }
}

@keyframes mf-hop-shadow {
    0% { transform: scale(.48, .7); opacity: .3; }
    50% { transform: scale(1.12, 1); opacity: .85; animation-timing-function: cubic-bezier(.2, .72, .35, 1); }
    100% { transform: scale(.48, .7); opacity: .3; }
}

@keyframes mf-hop-squash {
    0%, 40% { transform: scale(1, 1); }
    50% { transform: scale(1.28, .74); }
    62% { transform: scale(.9, 1.1); }
    76%, 100% { transform: scale(1, 1); }
}

@keyframes mf-hop-tumble {
    0% { transform: rotate(-16deg); }
    25% { transform: rotate(7deg); }
    50% { transform: rotate(16deg); }
    75% { transform: rotate(-7deg); }
    100% { transform: rotate(-16deg); }
}

/* Out small and turned one way, in small and turned the other: the swap reads as
   one thing becoming another rather than two things blinking. */
@keyframes mf-hop-morph {
    0% { opacity: 0; transform: scale(.5) rotate(-28deg); }
    3% { opacity: 1; transform: scale(1) rotate(0deg); }
    17% { opacity: 1; transform: scale(1) rotate(0deg); }
    20% { opacity: 0; transform: scale(.5) rotate(28deg); }
    100% { opacity: 0; transform: scale(.5) rotate(28deg); }
}

@media (prefers-reduced-motion: reduce) {
    .mf-hop-y,
    .mf-hop-squash,
    .mf-hop-tumble,
    .mf-hop-shadow {
        animation: none;
    }
    .mf-hop-y { transform: translateY(0); }
    .mf-hop-item { animation-duration: 12s; }
}

/* v454: the company footer on the splash. Three lines, each quieter than the last —
   the mark, what MajidTek does, then the legal line. The base rule above pins it to
   the bottom and uppercases everything, so the tagline and copyright opt back out. */
.mf-loader-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 0 18px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
    animation: mfFadeUp .6s ease both;
    animation-delay: .25s;
}

.mf-loader-footer .mk {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(138, 91, 58, .85);
}

.mf-loader-footer .tag {
    font-size: 11.5px;
    line-height: 1.45;
    max-width: 320px;
    color: rgba(138, 91, 58, .62);
}

.mf-loader-footer .cr {
    font-size: 10.5px;
    color: rgba(138, 91, 58, .45);
    font-variant-numeric: tabular-nums;
}

/* Short screens: the loader owns the middle, so the footer gives up the tagline
   rather than crowd it. */
@media (max-height: 520px) {
    .mf-loader-footer .tag { display: none; }
}

/* v455: the MajidTek mark on the splash footer. Two tones, not one — "Majid" in
   warm ink, "Tek" in brand orange on a soft chip — so it reads as a signature
   rather than as another line of small print. Hairlines on either side set it
   apart from the loader above without drawing a box around it. */
.mf-loader-footer .mk {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: none;
    line-height: 1;
    padding-bottom: 2px;
    /* v483 — "Majid" and "Tek" are two spans, and an inline-flex row lays its items out
       right-to-left on an RTL page, so the mark read "TekMajid" in Arabic, Persian and
       Urdu. The company name is a Latin proper noun: it reads left-to-right in every
       language. isolate keeps it from disturbing the bidi run around it. */
    direction: ltr;
    unicode-bidi: isolate;
}

/* The rules either side. Pseudo-elements keep the markup to one element. */
.mf-loader-footer .mk::before,
.mf-loader-footer .mk::after {
    content: "";
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, rgba(160, 107, 69, 0), rgba(160, 107, 69, .38));
    margin-inline-end: 10px;
}

.mf-loader-footer .mk::after {
    margin-inline-end: 0;
    margin-inline-start: 10px;
    background: linear-gradient(90deg, rgba(160, 107, 69, .38), rgba(160, 107, 69, 0));
}

.mf-loader-footer .mk .a {
    color: #6B4326;
}

/* Brand orange with one narrow sheen crossing it — the same treatment the
   OrderOrange wordmark gets above, at a quieter size. */
.mf-loader-footer .mk .b {
    background: linear-gradient(100deg,
        #E04E00 0%, #E04E00 40%, #FFB27D 50%, #E04E00 60%, #E04E00 100%);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: mfShimmer 3.6s linear infinite;
}

/* Where background-clip on text is unsupported, fall back to flat orange rather
   than to invisible letters. */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .mf-loader-footer .mk .b {
        background: none;
        -webkit-text-fill-color: initial;
        color: #E04E00;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mf-loader-footer .mk .b { animation: none; }
}

/* v456: the quick-access grid grew past six tiles. The old palette was pinned to
   nth-child(1..6), so tile seven onward came out with no background at all — white
   text on white. Cycling every six keeps the same six jewels repeating however many
   shortcuts a role can see, and the stagger wraps with them. */
.db-quick a:nth-child(6n + 1) { background: linear-gradient(135deg, #ff8a2a, #e64a19); }
.db-quick a:nth-child(6n + 2) { background: linear-gradient(135deg, #26c6da, #00838f); }
.db-quick a:nth-child(6n + 3) { background: linear-gradient(135deg, #ab47bc, #6a1b9a); }
.db-quick a:nth-child(6n + 4) { background: linear-gradient(135deg, #66bb6a, #2e7d32); }
.db-quick a:nth-child(6n + 5) { background: linear-gradient(135deg, #5c6bc0, #283593); }
.db-quick a:nth-child(6n + 6) { background: linear-gradient(135deg, #ffa726, #ef6c00); }

/* The entrance runs on a six-step loop too, so the wave keeps rolling rather than
   every tile past the sixth landing at once. */
.db-quick a:nth-child(6n + 1) { animation-delay: .50s; }
.db-quick a:nth-child(6n + 2) { animation-delay: .56s; }
.db-quick a:nth-child(6n + 3) { animation-delay: .62s; }
.db-quick a:nth-child(6n + 4) { animation-delay: .68s; }
.db-quick a:nth-child(6n + 5) { animation-delay: .74s; }
.db-quick a:nth-child(6n + 6) { animation-delay: .80s; }

/* More tiles need more columns, or the card turns into a tall ribbon. */
.db-quick {
    grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
    gap: 9px;
}

.db-quick a {
    padding: 13px 6px;
    gap: 6px;
    min-height: 78px;
    justify-content: center;
}

/* Long labels ("Table QR codes", "مدیریت کاربران") must wrap inside the tile
   instead of pushing it wider than its column. */
.db-quick a span {
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
}

@media (max-width: 600px) {
    .db-quick { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
    .db-quick a { min-height: 72px; }
    .db-quick a span { font-size: 10.5px; }
}

/* ==================================================================
   v457 — report export: the Excel/Print toolbar and the A4 sheet
   ================================================================== */

.rx {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.rx-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 0;
    border-radius: 12px;
    font-size: 12.5px;
    font-weight: 700;
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(70, 45, 20, .16);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.rx-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(70, 45, 20, .2); }
.rx-btn:active:not(:disabled) { transform: translateY(0); }
.rx-btn:disabled { filter: grayscale(.4) opacity(.65); cursor: default; }

/* Excel green and print slate — the colours people already associate with each. */
.rx-btn.xl { background: linear-gradient(135deg, #21a366, #107c41); }
.rx-btn.pr { background: linear-gradient(135deg, #607d8b, #37474f); }

.rx-btn .mud-icon-root { width: 17px; height: 17px; color: #fff; }

.rx-spin {
    width: 15px;
    height: 15px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    animation: rx-spin .7s linear infinite;
}

@keyframes rx-spin { to { transform: rotate(360deg); } }

/* The sheet is built in the live DOM so the browser can paginate it, but it must never
   be visible on screen. Off-canvas rather than display:none — a hidden element has no
   layout, and the print stylesheet needs one to work with. */
.rx-sheet {
    position: absolute;
    inset-inline-start: -10000px;
    top: 0;
    width: 186mm;
}

/* ---------------- A4 ---------------- */

@media print {
    /* Nothing but the sheet. Hiding the app rather than re-styling it means no page
       ever prints half a sidebar, whatever chrome a report page happens to carry.
       Scoped to pages that actually have a report sheet — unscoped it blanked every
       other printable page in the app. */
    body:has(.rx-sheet) * { visibility: hidden !important; }

    /* Same :has() prefix on the reveal, or the hide rule outranks it. */
    body:has(.rx-sheet) .rx-sheet,
    body:has(.rx-sheet) .rx-sheet * { visibility: visible !important; }

    .rx-sheet {
        position: absolute !important;
        inset-inline-start: 0 !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        color: #1c1c1c;
        font-size: 10pt;
    }

    .no-print,
    .mud-appbar,
    .mud-drawer,
    .mud-overlay,
    .mud-snackbar-provider { display: none !important; }

    @page {
        size: A4 portrait;
        margin: 12mm 10mm 14mm 10mm;
    }

    html, body {
        background: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}

/* ---- masthead ---- */

.rx-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #E04E00;
    margin-bottom: 10px;
}

.rx-brand { display: flex; align-items: center; gap: 10px; }
.rx-logo { width: 34px; height: 34px; }
.rx-store { font-size: 14pt; font-weight: 800; color: #2b2118; line-height: 1.15; }
.rx-by { font-size: 7.5pt; letter-spacing: .16em; text-transform: uppercase; color: #8a7a68; }

.rx-meta { text-align: end; }
.rx-title { font-size: 12pt; font-weight: 800; color: #E04E00; }
.rx-range { font-size: 9pt; color: #5c5348; margin-top: 1px; }
.rx-who { font-size: 7.5pt; color: #8a7a68; margin-top: 3px; }
.rx-who span + span::before { content: " · "; }

/* ---- the grid ---- */

.rx-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 9pt;
}

.rx-table thead th {
    background: #E04E00;
    color: #fff;
    font-weight: 700;
    text-align: start;
    padding: 5px 7px;
    border: 0;
}

.rx-table thead th.num,
.rx-table td.num { text-align: end; font-variant-numeric: tabular-nums; }

.rx-table tbody td {
    padding: 4px 7px;
    border-bottom: 1px solid #efe4d6;
}

.rx-table tbody tr:nth-child(even) td { background: #fff6ee; }

.rx-table tfoot td {
    padding: 6px 7px;
    font-weight: 800;
    background: #ffe0c7;
    border-top: 1.5px solid #E04E00;
}

/* A long report must not lose its column names on page two, and a row must not be
   sliced in half across the fold. */
@media print {
    .rx-table thead { display: table-header-group; }
    .rx-table tfoot { display: table-footer-group; }
    .rx-table tr { page-break-inside: avoid; break-inside: avoid; }
    .rx-head { page-break-after: avoid; break-after: avoid; }
}

.rx-foot {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
    padding-top: 5px;
    border-top: 1px solid #efe4d6;
    font-size: 7.5pt;
    color: #8a7a68;
}

/* ==================================================================
   v457 — the two standalone reports: products and customers
   ================================================================== */

/* ---- product podium: five bars, longest first ---- */

.pr-podium { display: flex; flex-direction: column; gap: 10px; }

.pr-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    animation: qc-pop-in .35s ease both;
}

.pr-bar:nth-child(2) { animation-delay: .05s; }
.pr-bar:nth-child(3) { animation-delay: .10s; }
.pr-bar:nth-child(4) { animation-delay: .15s; }
.pr-bar:nth-child(5) { animation-delay: .20s; }

.pr-bar .mid { flex: 1; min-width: 0; }

.pr-bar .nm {
    font-size: 13px;
    font-weight: 700;
    color: #3d2f22;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pr-bar .track {
    height: 9px;
    border-radius: 999px;
    background: #f6efe6;
    overflow: hidden;
}

.pr-bar .track i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ff8a2a, #e64a19);
    /* Grows from whichever edge the language starts at. */
    transform-origin: inline-start;
    animation: pr-grow .55s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes pr-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.pr-bar .fig { text-align: end; flex: none; min-width: 92px; }
.pr-bar .fig b { display: block; font-size: 13px; font-weight: 800; color: #2b2118; }
.pr-bar .fig small { font-size: 10.5px; color: #8a7a68; }

/* ---- share cell: a hairline bar behind the percentage ---- */

.pr-share { display: flex; align-items: center; gap: 7px; position: relative; }

.pr-share i {
    display: block;
    height: 6px;
    min-width: 2px;
    max-width: 70px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffb27d, #f4511e);
    flex: none;
}

.pr-share b { font-size: 11px; font-weight: 700; color: #6b5c4c; font-variant-numeric: tabular-nums; }

/* ---- customer podium: four cards ---- */

.cr-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
}

.cr-card {
    position: relative;
    padding: 16px 14px 14px;
    border-radius: 18px;
    background: linear-gradient(160deg, #fffaf5, #fdeee0);
    border: 1px solid #f3e6d6;
    text-align: center;
    animation: qc-pop-in .35s ease both;
}

.cr-card:nth-child(2) { animation-delay: .06s; }
.cr-card:nth-child(3) { animation-delay: .12s; }
.cr-card:nth-child(4) { animation-delay: .18s; }

.cr-card .av {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    margin: 0 auto 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff8a2a, #e64a19);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    box-shadow: 0 6px 16px rgba(230, 74, 25, .28);
}

.cr-card .nm {
    font-size: 13px;
    font-weight: 800;
    color: #3d2f22;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cr-card .amt { font-size: 16px; font-weight: 800; color: #e04e00; margin-top: 3px; }
.cr-card .sub { font-size: 10.5px; color: #8a7a68; margin-top: 3px; }

/* The rank badge rides the corner that the reading direction starts from. */
.cr-card .rk {
    position: absolute;
    top: 8px;
    inset-inline-start: 8px;
}

/* ---- a totals row on a wide report still has to read as a total ---- */
.rp-table tfoot tr.total td { font-weight: 800; }

/* ==================================================================
   v458 — the command palette, rebuilt
   ==================================================================
   A search box people reach for a hundred times a day, so it is allowed to be the
   most designed surface in the portal: a lit rim, a frosted card, matched letters
   picked out in the results, and one row that clearly owns the Enter key. */

.cpx-veil {
    position: fixed;
    inset: 0;
    z-index: 2200;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: max(7vh, 44px) 16px 24px;
    background: rgba(38, 24, 12, .46);
    -webkit-backdrop-filter: blur(7px) saturate(115%);
    backdrop-filter: blur(7px) saturate(115%);
    animation: cpx-veil-in .18s ease both;
}

@keyframes cpx-veil-in { from { opacity: 0; } to { opacity: 1; } }

.cpx {
    position: relative;
    width: min(680px, 100%);
    max-height: min(74vh, 620px);
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: rgba(255, 253, 250, .97);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
    backdrop-filter: blur(22px) saturate(130%);
    box-shadow:
        0 32px 80px rgba(50, 30, 12, .34),
        0 4px 14px rgba(50, 30, 12, .14);
    overflow: hidden;
    animation: cpx-in .26s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes cpx-in {
    from { opacity: 0; transform: translateY(-14px) scale(.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* The rim: a conic sweep clipped to a 1.5px frame. Parked and dim at rest, turning
   while a server lookup is in flight — the card's own progress indicator. */
.cpx-rim {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    padding: 1.5px;
    background: conic-gradient(from 0deg,
        #ff8a2a, #ffd0a8, #ff5a00, #ffb27d, #ff8a2a);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: .55;
    pointer-events: none;
}

.cpx.busy .cpx-rim {
    opacity: 1;
    animation: cpx-rim-spin 1.5s linear infinite;
}

@keyframes cpx-rim-spin { to { transform: rotate(1turn); } }

/* ---------------- the input row ---------------- */

.cpx-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #f3e9dc;
    flex: none;
}

.cpx-lens {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ff8a2a, #e64a19);
    box-shadow: 0 6px 16px rgba(230, 74, 25, .3);
}

.cpx-lens .mud-icon-root { width: 19px; height: 19px; color: #fff; }

.cpx.busy .cpx-lens { animation: cpx-pulse 1.1s ease-in-out infinite; }

@keyframes cpx-pulse {
    0%, 100% { transform: scale(1); box-shadow: 0 6px 16px rgba(230, 74, 25, .3); }
    50% { transform: scale(1.07); box-shadow: 0 8px 22px rgba(230, 74, 25, .48); }
}

.cpx-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }

.cpx-field input {
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    font-size: 17px;
    font-weight: 600;
    color: #2b2118;
    padding: 4px 0;
    font-family: inherit;
}

/* The ghost hint sits under the caret rather than in a placeholder attribute, so it can
   animate and still leave the real input empty for the "nothing typed" branch. */
.cpx-ghost {
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-size: 17px;
    font-weight: 500;
    color: #b3a495;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
}

.cpx-type {
    display: inline-block;
    animation: cpx-hint 2.6s ease both;
}

@keyframes cpx-hint {
    0% { opacity: 0; transform: translateY(7px); }
    10%, 88% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-7px); }
}

.cpx-clear,
.cpx-esc {
    flex: none;
}

.cpx-clear {
    width: 26px;
    height: 26px;
    border: 0;
    border-radius: 8px;
    background: #f6efe6;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #8a7a68;
    transition: background .15s ease, color .15s ease;
}

.cpx-clear:hover { background: #ffe0c7; color: #e04e00; }
.cpx-clear .mud-icon-root { width: 15px; height: 15px; }

.cpx-esc {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    color: #a8988a;
    background: #f6efe6;
    border: 1px solid #eadfd1;
    border-radius: 7px;
    padding: 3px 7px;
}

/* ---------------- results ---------------- */

.cpx-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px 10px 12px;
    scrollbar-width: thin;
}

.cpx-body::-webkit-scrollbar { width: 8px; }
.cpx-body::-webkit-scrollbar-thumb { background: #eaded0; border-radius: 99px; }

.cpx-sec {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 10px 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #b09880;
    position: sticky;
    top: -8px;
    background: linear-gradient(rgba(255, 253, 250, .98) 72%, rgba(255, 253, 250, 0));
    z-index: 1;
}

.cpx-sec i {
    font-style: normal;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    color: #c4b2a0;
    background: #f6efe6;
    border-radius: 99px;
    padding: 1px 7px;
}

.cpx-row {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 10px;
    border: 0;
    border-radius: 13px;
    background: transparent;
    cursor: pointer;
    text-align: start;
    transition: background .12s ease;
}

.cpx-row .ic {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: #f6efe6;
    color: #8a7a68;
    transition: transform .16s cubic-bezier(.16, 1, .3, 1), background .16s ease, color .16s ease;
}

.cpx-row .ic .mud-icon-root { width: 17px; height: 17px; }

/* Each kind of result carries its own colour, so the eye can sort the list before
   reading a word of it. */
.cpx-row.k-action .ic { background: #fff0e2; color: #e04e00; }
.cpx-row.k-order .ic { background: #e8f1ff; color: #1e5cb3; }
.cpx-row.k-product .ic { background: #eafaf0; color: #1f8a4c; }
.cpx-row.k-customer .ic { background: #f3ecff; color: #6a3fb5; }
.cpx-row.k-table .ic { background: #fff5e0; color: #b07d10; }

.cpx-row .tx { flex: 1; min-width: 0; }

.cpx-row .tx b {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #3d2f22;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The matched letters. Weight and colour only — a background block would break the
   line into stripes on a fuzzy match that hits every other character. */
.cpx-row .tx mark {
    background: transparent;
    color: #e04e00;
    font-weight: 800;
}

.cpx-row .tx small {
    display: block;
    font-size: 11px;
    color: #9c8b79;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 1px;
}

.cpx-row .bdg {
    flex: none;
    font-size: 10.5px;
    font-weight: 700;
    color: #7a6a58;
    background: #f6efe6;
    border-radius: 99px;
    padding: 3px 9px;
    white-space: nowrap;
}

.cpx-row .go {
    flex: none;
    width: 26px;
    display: grid;
    place-items: center;
    color: #cbbba9;
}

.cpx-row .go .mud-icon-root { width: 16px; height: 16px; }

.cpx-row .go kbd {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: #e04e00;
    border-radius: 6px;
    padding: 2px 6px;
    box-shadow: 0 2px 6px rgba(224, 78, 0, .35);
}

.cpx-row:hover { background: #fdf3ea; }

.cpx-row.on {
    background: linear-gradient(100deg, #fff1e4, #ffe6d2);
    box-shadow: inset 0 0 0 1.5px #ffc79a;
}

.cpx-row.on .ic { transform: scale(1.06); }
.cpx-row.on .tx b { color: #2b2118; }

/* ---------------- empty ---------------- */

.cpx-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 40px 20px 34px;
    text-align: center;
}

.cpx-empty .em { font-size: 34px; }
.cpx-empty b { font-size: 14px; font-weight: 800; color: #3d2f22; }
.cpx-empty small { font-size: 11.5px; color: #9c8b79; max-width: 320px; }

.cpx-chips { display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 12px; }

.cpx-chips button {
    border: 1px solid #f0e4d5;
    background: #fff9f3;
    border-radius: 99px;
    padding: 5px 13px;
    font-size: 11.5px;
    font-weight: 600;
    color: #8a7a68;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.cpx-chips button:hover { background: #ffeedd; color: #e04e00; border-color: #ffc79a; }

/* ---------------- footer ---------------- */

.cpx-foot {
    flex: none;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 9px 16px;
    border-top: 1px solid #f3e9dc;
    background: #fffaf5;
    font-size: 10.5px;
    color: #a8988a;
}

.cpx-foot .far { margin-inline-start: auto; display: flex; align-items: center; gap: 6px; }
.cpx-foot .far i { font-style: normal; color: #c0ad9a; }

.cpx-foot kbd {
    font-size: 10px;
    font-weight: 700;
    color: #8a7a68;
    background: #fff;
    border: 1px solid #eadfd1;
    border-bottom-width: 2px;
    border-radius: 6px;
    padding: 2px 6px;
    margin-inline-end: 3px;
}

/* ---------------- small screens ---------------- */

@media (max-width: 600px) {
    .cpx-veil { padding: 12px 10px; align-items: stretch; }
    .cpx { max-height: 100%; border-radius: 18px; }
    .cpx-bar { padding: 13px 14px; gap: 10px; }
    .cpx-field input, .cpx-ghost { font-size: 16px; }
    .cpx-esc { display: none; }
    .cpx-foot { font-size: 10px; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .cpx, .cpx-veil, .cpx-type { animation: none; }
    .cpx.busy .cpx-rim, .cpx.busy .cpx-lens { animation: none; }
}

/* A parked cursor must not steal the arrow keys' selection: rows ignore the pointer
   until mf-palette.js sees a real mousemove and adds .mouse. Any arrow key takes it
   away again, so whichever device the user last touched is the one in charge. */
.cpx:not(.mouse) .cpx-row { pointer-events: none; }

/* v460: waiting-message count on a quick-access tile. Pinned to the corner the reading
   direction ends at, so it never sits on top of the icon in either script. */
.db-quick a { position: relative; }

.db-quick a .qbadge {
    position: absolute;
    top: 6px;
    inset-inline-end: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: #fff;
    color: #d32f2f;
    font-size: 10.5px;
    font-weight: 800;
    font-style: normal;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .28);
}

/* A count in the palette is news, not metadata — it gets the alert colour rather than
   the muted chip the price and status badges use. */
.cpx-row.k-page .bdg { background: #ffe3e3; color: #c62828; }

/* v462: the date-range field was capped at 240px, which fits "22/2026 ← /3/2026" —
   both dates clipped at the ends and the arrow left carrying the whole meaning. A
   range holds two full dates plus a separator, so it needs the room for them. */
.rp-range { max-width: none; width: 330px; }

.rp-range .mud-input { font-size: 13px; }

/* Neither date may be trimmed: let the two inputs share the space evenly and keep
   the arrow and the clear button from being squeezed out. */
.rp-range .mud-input-slot,
.rp-range input { min-width: 0; text-overflow: clip; }

@media (max-width: 700px) {
    /* On a phone the toolbar wraps anyway, so the field takes the full row rather
       than fighting the chips for space. */
    .rp-range { width: 100%; }
}


/* v463: the spark in the app bar — a violet coin that opens the smart search. It is
   deliberately the one control up there that is not brand orange: it does something
   different from the rest of the bar, and it should be findable without reading. */
.oo-spark {
    position: relative;
    flex: none;
    width: 38px;
    height: 38px;
    margin-inline: 4px;
    border: 0;
    border-radius: 50%;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    background: radial-gradient(circle at 32% 28%, #8b7bff, #6d5cf5 46%, #5847e0);
    box-shadow: 0 4px 14px rgba(90, 70, 230, .42);
    transition: transform .18s cubic-bezier(.16, 1, .3, 1), box-shadow .18s ease;
}

.oo-spark .mud-icon-root {
    width: 19px;
    height: 19px;
    color: #ffd88a;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .3));
}

.oo-spark:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 8px 22px rgba(90, 70, 230, .55); }
.oo-spark:active { transform: translateY(0) scale(.97); }

/* A slow halo, so the eye finds it once and then stops noticing it. */
.oo-spark::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(120, 100, 255, .38), transparent 68%);
    animation: oo-spark-halo 3.4s ease-in-out infinite;
    pointer-events: none;
}

@keyframes oo-spark-halo {
    0%, 100% { opacity: .35; transform: scale(.9); }
    50% { opacity: .8; transform: scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
    .oo-spark::after { animation: none; }
    .oo-spark:hover { transform: none; }
}

/* ==================================================================
   v463 — chat history: find bar, active-filter chips, filter sheet
   ================================================================== */

.chb {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.chb-find {
    display: flex;
    align-items: center;
    gap: 9px;
    flex: 1;
    min-width: 210px;
    max-width: 420px;
    padding: 9px 14px;
    border-radius: 14px;
    background: #fffaf5;
    border: 1.5px solid #f0e4d5;
    transition: border-color .16s ease, box-shadow .16s ease;
}

.chb-find:focus-within {
    border-color: #ffb27d;
    box-shadow: 0 0 0 4px rgba(255, 138, 42, .14);
}

.chb-find .mud-icon-root { width: 18px; height: 18px; color: #b3a495; flex: none; }

.chb-find input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 13.5px;
    color: #3d2f22;
}

.chb-find .x {
    flex: none;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 7px;
    background: #f4ece1;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #8a7a68;
}

.chb-find .x:hover { background: #ffe0c7; color: #e04e00; }
.chb-find .x .mud-icon-root { width: 13px; height: 13px; }

.chb-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 15px;
    border-radius: 14px;
    border: 1.5px solid #f0e4d5;
    background: #fffaf5;
    font-size: 13px;
    font-weight: 700;
    color: #6b5c4c;
    cursor: pointer;
    transition: background .16s ease, border-color .16s ease, color .16s ease;
}

.chb-filter:hover { background: #fff2e6; border-color: #ffc79a; }

/* Once a filter is on, the button itself says so — otherwise a short list looks like
   an empty archive rather than a narrowed one. */
.chb-filter.on {
    background: linear-gradient(135deg, #ff8a2a, #e64a19);
    border-color: transparent;
    color: #fff;
}

.chb-filter .mud-icon-root { width: 17px; height: 17px; }
.chb-filter.on .mud-icon-root { color: #fff; }

.chb-filter i {
    font-style: normal;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 99px;
    background: #fff;
    color: #e04e00;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

.chb-count { font-size: 12px; color: #9c8b79; margin-inline-start: auto; }

/* ---- active filters, each one its own undo ---- */

.chb-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }

.chb-chips button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 99px;
    border: 1px solid #ffd9bb;
    background: #fff3e8;
    font-size: 12px;
    font-weight: 600;
    color: #b4531b;
    cursor: pointer;
}

.chb-chips button:hover { background: #ffe6d2; }
.chb-chips button .mud-icon-root { width: 14px; height: 14px; }
.chb-chips button span { font-size: 11px; opacity: .6; }

.chb-chips .clear {
    border-color: transparent;
    background: transparent;
    color: #9c8b79;
    text-decoration: underline;
}

/* ---- the sheet ---- */

.chf {
    width: min(520px, 100%);
    max-height: min(84vh, 680px);
    display: flex;
    flex-direction: column;
    border-radius: 22px;
    background: #fffdfa;
    box-shadow: 0 28px 70px rgba(50, 30, 12, .32);
    overflow: hidden;
    animation: chf-in .24s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes chf-in {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.chf header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid #f3e9dc;
    flex: none;
}

.chf header .ic {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #ff8a2a, #e64a19);
    box-shadow: 0 6px 16px rgba(230, 74, 25, .28);
}

.chf header .ic .mud-icon-root { width: 18px; height: 18px; color: #fff; }
.chf header > div { flex: 1; min-width: 0; }
.chf header b { display: block; font-size: 15px; font-weight: 800; color: #2b2118; }
.chf header small { font-size: 11.5px; color: #9c8b79; }

.chf header .x {
    flex: none;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 9px;
    background: #f6efe6;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: #8a7a68;
}

.chf header .x:hover { background: #ffe0c7; color: #e04e00; }
.chf header .x .mud-icon-root { width: 16px; height: 16px; }

.chf-body { flex: 1; min-height: 0; overflow-y: auto; padding: 6px 18px 14px; }

.chf-body section { padding: 14px 0; border-bottom: 1px solid #f8f2ea; }
.chf-body section:last-child { border-bottom: 0; }

.chf-body h6 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 0 0 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #b09880;
}

.chf-body h6 i {
    font-style: normal;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: #c4b2a0;
}

/* A segmented control: one choice at a time, all options visible at once. */
.chf-seg {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 4px;
    border-radius: 14px;
    background: #f8f2ea;
}

.chf-seg button {
    flex: 1 1 auto;
    min-width: 68px;
    padding: 8px 12px;
    border: 0;
    border-radius: 11px;
    background: transparent;
    font-size: 12.5px;
    font-weight: 700;
    color: #8a7a68;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}

.chf-seg button:hover { color: #e04e00; }

.chf-seg button.on {
    background: #fff;
    color: #e04e00;
    box-shadow: 0 2px 8px rgba(70, 45, 20, .12);
}

/* Tables are a multi-choice, so they get tags rather than a segmented control. */
.chf-tags { display: flex; flex-wrap: wrap; gap: 7px; }

.chf-tags button {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 99px;
    border: 1.5px solid #f0e4d5;
    background: #fffaf5;
    font-size: 12.5px;
    font-weight: 700;
    color: #6b5c4c;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.chf-tags button span {
    font-size: 10.5px;
    font-weight: 700;
    color: #b3a495;
    background: #f4ece1;
    border-radius: 99px;
    padding: 1px 6px;
}

.chf-tags button:hover { border-color: #ffc79a; background: #fff3e8; }

.chf-tags button.on {
    background: linear-gradient(135deg, #ff8a2a, #e64a19);
    border-color: transparent;
    color: #fff;
}

.chf-tags button.on span { background: rgba(255, 255, 255, .28); color: #fff; }

.chf footer {
    flex: none;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-top: 1px solid #f3e9dc;
    background: #fffaf5;
}

.chf-reset {
    padding: 9px 16px;
    border: 1.5px solid #f0e4d5;
    border-radius: 12px;
    background: #fff;
    font-size: 12.5px;
    font-weight: 700;
    color: #8a7a68;
    cursor: pointer;
}

.chf-reset:hover { border-color: #ffc79a; color: #e04e00; }

.chf-done {
    flex: 1;
    padding: 11px 18px;
    border: 0;
    border-radius: 12px;
    background: linear-gradient(135deg, #ff8a2a, #e64a19);
    color: #fff;
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(230, 74, 25, .3);
    transition: transform .15s ease, box-shadow .15s ease;
}

.chf-done:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(230, 74, 25, .38); }

@media (max-width: 600px) {
    .chb-count { margin-inline-start: 0; width: 100%; }
    .chf { max-height: 92vh; }
}

@media (prefers-reduced-motion: reduce) {
    .chf { animation: none; }
    .chf-done:hover { transform: none; }
}

/* v464 — three corrections to the previous batch.

   1. The spark's star came out near-black. MudBlazor paints .mud-icon-root with its own
      colour rule, which beat the plain declaration; the svg needs the override. */
.oo-spark .mud-icon-root,
.oo-spark svg {
    color: #ffffff !important;
    fill: currentColor !important;
    filter: drop-shadow(0 1px 4px rgba(30, 10, 90, .45));
}

/* 3. Quick tiles: a new hover. The old one only nudged the tile up a few pixels, which
      is invisible on a grid of twenty. Now the tile lifts and deepens, its icon jumps
      and settles, and a single band of light crosses it — the card reacts, rather than
      just moving. */
.db-quick a {
    transition:
        transform .22s cubic-bezier(.16, 1, .3, 1),
        box-shadow .22s ease,
        filter .22s ease;
}

.db-quick a::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(0, 0, 0, .12));
    opacity: 0;
    transition: opacity .22s ease;
    pointer-events: none;
}

.db-quick a:hover {
    transform: translateY(-6px) scale(1.035);
    box-shadow: 0 16px 30px rgba(70, 45, 20, .28);
    filter: saturate(1.15);
}

.db-quick a:hover::before { opacity: 1; }
.db-quick a:active { transform: translateY(-2px) scale(.99); }

.db-quick a .mud-icon-root {
    transition: transform .32s cubic-bezier(.34, 1.56, .64, 1);
}

.db-quick a:hover .mud-icon-root { transform: translateY(-3px) scale(1.22) rotate(-6deg); }

/* The band of light. It starts off the leading edge and sweeps across once per hover. */
.db-quick a::after {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-start: -60%;
    width: 42%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
}

.db-quick a:hover::after { animation: db-sheen .6s ease forwards; }

@keyframes db-sheen {
    from { inset-inline-start: -60%; }
    to { inset-inline-start: 130%; }
}

@media (prefers-reduced-motion: reduce) {
    .db-quick a:hover { transform: none; }
    .db-quick a:hover .mud-icon-root { transform: none; }
    .db-quick a:hover::after { animation: none; }
}


/* v466: the assistant panel used to open in the wrong place and then hop.

   Blazor paints .pb-panel at its CSS default (bottom-inline-start), and only on the
   NEXT interop round trip does mfPos.draggable move it to the spot the user last
   dragged it to. That gap is one or more painted frames, so the jump is visible.

   The panel is therefore invisible until the script says it is placed. The animation
   below is the fail-safe: if the script never runs at all, the panel reveals itself
   half a second later rather than staying lost. */
.pb-panel { visibility: hidden; }

.pb-panel.pb-ready { visibility: visible; }

.pb-panel:not(.pb-ready) {
    animation: pb-reveal 0s linear .5s forwards;
}

@keyframes pb-reveal { to { visibility: visible; } }

/* v467: the assistant panel came to rest 215px to the side of where it belonged.

   It borrowed `tourIn`, the guided-tour card's entrance, which both starts AND ends on
   translate(-50%, …) because a tour card is centred by transform. The assistant is
   anchored to a corner by left/right/bottom, so that -50% is not a centring trick — it
   is a permanent 215px (half the panel) shove, frozen in place by animation-fill-mode:
   both. Its own entrance ends on an identity transform, which is the only sane resting
   state for something positioned by its edges. */
.pb-panel:not(.dragged) {
    animation: pbIn .32s cubic-bezier(.34, 1.3, .64, 1) both;
}

@keyframes pbIn {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to { opacity: 1; transform: none; }
}

/* A dragged panel is placed by script in absolute pixels; an entrance transform would
   fight it. */
.pb-panel.dragged { animation: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .pb-panel:not(.dragged) { animation: none; transform: none; }
}

/* v469: the assistant panel in a left-to-right language.

   It was anchored with inset-inline-start, which in Arabic/Farsi resolves to the right
   and looked fine — but in English it resolves to the LEFT, which is exactly where the
   navigation drawer lives, so the panel opened on top of the menu and on the opposite
   side from the app-bar spark that opened it.

   inset-inline-END is correct in both directions: it is the corner nearest the app-bar
   actions (right in LTR, left in RTL) and always the side away from the drawer. */
.pb-panel:not(.dragged) {
    inset-inline-start: auto;
    inset-inline-end: 14px;
}

@media (max-width: 720px) {
    /* The phone panel is edge to edge; it has no side to pick. */
    .pb-panel:not(.dragged) { inset-inline-start: 0; inset-inline-end: 0; }
}

/* v470: the export buttons were hard to read. The label sat at 12.5px/700 over a
   saturated gradient, which is exactly the combination that goes muddy — especially in
   Arabic and Farsi, where the script has finer strokes than Latin at the same size. */
.rx-btn {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .01em;
    padding: 10px 18px;
    gap: 9px;
    /* A whisper of shadow separates the glyphs from the gradient behind them without
       reading as an effect. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, .28);
}

.rx-btn .mud-icon-root {
    width: 19px;
    height: 19px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .25));
}

/* Darker ends on both gradients: the mid-tones were what the white text was competing
   with, not the ends. */
.rx-btn.xl { background: linear-gradient(135deg, #1e9e5f, #0b6a37); }
.rx-btn.pr { background: linear-gradient(135deg, #526d7a, #2b3a42); }

/* "A4" is a paper size, not a quantity — the digit localiser must leave it alone, the
   same rule barcodes and codes already follow. */
.rx-btn code {
    font: inherit;
    background: none;
    padding: 0;
    color: inherit;
}

/* v471: the print button was near-black (#2b3a42), which reads as disabled sitting next
   to a saturated green one — a dark grey slab is what this app uses for "off". A clear
   blue is unmistakably a live button, keeps well away from the brand orange, and gives
   white text far more contrast than the slate did. */
.rx-btn.pr {
    background: linear-gradient(135deg, #2f80ed, #1a5fc4);
    box-shadow: 0 6px 16px rgba(31, 96, 196, .3);
}

.rx-btn.pr:hover:not(:disabled) {
    box-shadow: 0 10px 22px rgba(31, 96, 196, .42);
}

/* v472: the export buttons keep their original colours — only the LABEL changes.

   The culprit was a dark text-shadow I had put under the text to lift it off the
   gradient. On the green button that helps; on the slate one it does the opposite,
   smearing dark grey into white glyphs on an already-dark ground, which is why the
   print label read as muddy. Pure white, no shadow, and the icon matches. */
.rx-btn.pr {
    background: linear-gradient(135deg, #607d8b, #37474f);
    box-shadow: 0 6px 16px rgba(70, 45, 20, .16);
}

.rx-btn.pr:hover:not(:disabled) {
    box-shadow: 0 10px 22px rgba(70, 45, 20, .2);
}

.rx-btn.pr,
.rx-btn.pr span,
.rx-btn.pr .mud-icon-root {
    color: #ffffff;
    text-shadow: none;
    filter: none;
}

/* The green one keeps a shadow, but a lighter one — it was set for a darker button. */
.rx-btn.xl { text-shadow: 0 1px 1px rgba(0, 0, 0, .18); }

/* v473: the Excel button gets the same treatment as the print one. Any dark shadow
   under white text on a saturated ground softens the glyph edges — on Arabic and Farsi
   script, whose strokes are already finer than Latin at the same size, that is the
   difference between crisp and smudged. Both labels are now plain white, unshadowed. */
.rx-btn.xl,
.rx-btn.xl span,
.rx-btn.xl .mud-icon-root {
    color: #ffffff;
    text-shadow: none;
    filter: none;
}

/* v474: the delivery chat's send button pointed the wrong way in Arabic and Farsi.
   The composer itself mirrors correctly — attach on the right, send on the left — but
   the paper plane kept flying to the right, which in a right-to-left thread reads as
   "back", not "send". Mirrored on the ICON rather than the button so the hover scale
   underneath it is untouched. */
[dir="rtl"] .mf-chat-send .mud-icon-root {
    transform: scaleX(-1);
}

/* ==================================================================
   v488: the "More to order" grid — the tail of the customer home
   ==================================================================
   The dish tail is a WRAPPING grid, not one of the horizontal strips: it can run to
   hundreds of items, so it fills the width and flows down the page. It deliberately does
   NOT carry .mf-hscroll — that class is what mf-scroll.js looks for, and arrows plus
   scroll-snap on a wrapped grid is nonsense.
   auto-fill with a minimum keeps the cards a sane size at every width without a media
   query per breakpoint: two up on a phone, six or more on a desktop. */
.mf-item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 14px;
    margin-top: 6px;
    padding-bottom: 8px;
}

/* The card is width-constrained inside the strips; in the grid the cell decides. */
.mf-item-grid .mf-deal-card {
    min-width: 0;
    max-width: none;
    width: 100%;
}

@media (max-width: 420px) {
    .mf-item-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
}

/* ==================================================================
   v490: the invoice edit report — before and after, side by side
   ==================================================================
   Each edit is one card: the cancelled original on one side, the correction on the
   other, every line coloured by its fate. Colour alone is not the signal — removed
   lines are also struck through — so the report still reads printed in grey. */
.inv-diff {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.inv-diff .side {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 12px;
    padding: 10px 12px;
    font-size: 13px;
}

.inv-diff .side.was { background: rgba(244, 67, 54, .04); }
.inv-diff .side.now { background: rgba(76, 175, 80, .05); }
.inv-diff .side > b { display: block; margin-bottom: 6px; font-size: 12.5px; }

.inv-diff .ln { padding: 2px 0; unicode-bidi: plaintext; }
.inv-diff .ln.removed { color: #C62828; text-decoration: line-through; }
.inv-diff .ln.added { color: #2E7D32; font-weight: 600; }
.inv-diff .ln.changed { color: #E65100; font-weight: 600; }
.inv-diff .ln.kept { color: var(--mud-palette-text-secondary); }

@media (max-width: 560px) {
    .inv-diff { grid-template-columns: 1fr; }
}

/* ---------- گزارش روزانه — the daily invoices report ---------- */
/* One line per invoice; a click folds its items open right underneath. */
.drep-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 18px;
    cursor: pointer;
    border-block-end: 1px solid var(--mud-palette-lines-default);
    transition: background .12s;
    min-width: 640px;
}
.drep-row:hover { background: var(--mud-palette-background-gray); }
.drep-row:last-child { border-block-end: none; }
.drep-row.open { background: var(--mud-palette-primary-hover); }
.drep-row.dead .no, .drep-row.dead .tt { text-decoration: line-through; opacity: .6; }
.drep-row .no { font-weight: 700; min-width: 110px; }
.drep-row .tm { color: var(--mud-palette-text-secondary); min-width: 48px; font-variant-numeric: tabular-nums; }
.drep-row .cu { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drep-row .ct { color: var(--mud-palette-text-secondary); font-size: 13px; white-space: nowrap; }
.drep-row .tt { min-width: 90px; text-align: end; white-space: nowrap; }

.drep-detail {
    padding: 6px 40px 14px;
    background: var(--mud-palette-background-gray);
    border-block-end: 1px solid var(--mud-palette-lines-default);
    min-width: 640px;
}
.drep-detail .ln { display: flex; gap: 10px; padding: 3px 0; font-size: 14px; }
.drep-detail .ln .q { min-width: 40px; color: var(--mud-palette-text-secondary); font-variant-numeric: tabular-nums; }
.drep-detail .ln .nm { flex: 1; min-width: 0; }
.drep-detail .ln .pr { white-space: nowrap; font-variant-numeric: tabular-nums; }
.drep-detail .ln.sum { border-block-start: 1px dashed var(--mud-palette-lines-default); margin-block-start: 4px; padding-block-start: 6px; color: var(--mud-palette-text-secondary); }
.drep-detail .ln.sum.total { color: var(--mud-palette-text-primary); font-weight: 700; }

/* Direction-aware arrows: "previous day" points backwards in reading order. */
[dir="rtl"] .mf-flip-rtl { transform: scaleX(-1); }

/* The table page wears the shop's real logo when it has one. */
.qm-hero .logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 24px; }

/* The receiving desk can create a material on the spot — a dashed "new" tile
   at the end of the shelf, styled as an invitation rather than stock. */
.pp-tile.pp-newmat {
    border: 2px dashed var(--mud-palette-lines-default);
    background: transparent;
    color: var(--mud-palette-text-secondary);
}
.pp-tile.pp-newmat:hover {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
}

/* ---------- Fullscreen invoice editor: the bill beside the menu ---------- */
.ied-dialog .mud-dialog-content { padding: 14px 18px; height: 100%; overflow: hidden; }
.ied-wrap {
    display: flex;
    gap: 18px;
    height: calc(100vh - 148px);   /* the dialog's title and action bars */
    min-height: 320px;
}

/* The bill panel */
.ied-bill {
    flex: 0 0 400px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    overflow-y: auto;
    padding-inline-end: 4px;
}
.ied-explain {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: color-mix(in srgb, var(--mud-palette-info) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--mud-palette-info) 30%, transparent);
    border-radius: 14px;
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.45;
}
.ied-lines {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 16px;
    overflow: hidden;
}
.ied-line {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-block-end: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}
.ied-line:last-child { border-block-end: none; }
.ied-line .inf { flex: 1; min-width: 0; }
.ied-line .nm { display: block; font-size: 14px; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ied-line .pr .ied-price { width: 86px; }
.ied-line .pr .ied-price input { font-size: 12.5px; color: var(--mud-palette-text-secondary); }
.ied-line .qty { display: flex; align-items: center; gap: 8px; }
.ied-line .qty b { min-width: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.ied-line .qty .st {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-size: 16px; font-weight: 800; line-height: 1;
    cursor: pointer;
    display: grid; place-items: center;
    transition: all .12s;
}
.ied-line .qty .st:hover { border-color: #FF5A00; color: #FF5A00; }
.ied-line .tt { min-width: 76px; text-align: end; font-size: 13.5px; white-space: nowrap; }
.ied-empty { padding: 26px; text-align: center; color: var(--mud-palette-text-secondary); }

.ied-totals {
    background: var(--mud-palette-background-gray);
    border-radius: 16px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.ied-totals .rw { display: flex; justify-content: space-between; font-size: 13.5px; color: var(--mud-palette-text-secondary); }
.ied-totals .rw.grand { font-size: 17px; color: var(--mud-palette-text-primary); align-items: center; }
.ied-totals .rw.grand b { color: #FF5A00; font-size: 19px; }
.ied-totals .rw.was { font-size: 12px; opacity: .75; }

/* The menu panel */
.ied-menu { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ied-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mud-palette-background-gray);
    border: 1.5px solid transparent;
    border-radius: 999px;
    padding: 9px 16px;
    transition: border-color .15s;
}
.ied-search:focus-within { border-color: #FF5A00; background: var(--mud-palette-surface); }
.ied-search svg { width: 20px; height: 20px; opacity: .55; }
.ied-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; min-width: 0; }
.ied-search button { border: 0; background: transparent; cursor: pointer; opacity: .6; font-size: 14px; }
.ied-cats { display: flex; gap: 8px; overflow-x: auto; padding-block: 2px; scrollbar-width: none; }
.ied-cats::-webkit-scrollbar { display: none; }
.ied-cats button {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    border-radius: 999px;
    padding: 6px 14px;
    font: inherit; font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    transition: all .12s;
}
.ied-cats button.on { background: #FF5A00; border-color: #FF5A00; color: #fff; font-weight: 700; }
.ied-grid {
    flex: 1;
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 10px;
    align-content: start;
    padding: 2px;
}
.ied-tile {
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    border-radius: 16px;
    padding: 0 0 10px;
    cursor: pointer;
    font: inherit;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 5px;
    overflow: hidden;
    transition: all .13s;
}
.ied-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .1); border-color: #FFB48A; }
.ied-tile.on { border-color: #FF5A00; box-shadow: 0 0 0 1px #FF5A00 inset; }
.ied-tile .ph { position: relative; height: 74px; background: var(--mud-palette-background-gray); display: grid; place-items: center; }
.ied-tile .ph img { width: 100%; height: 100%; object-fit: cover; }
.ied-tile .ph .em { font-size: 34px; }
.ied-tile .ph .ct {
    position: absolute; top: 6px; inset-inline-end: 6px;
    background: #FF5A00; color: #fff;
    min-width: 22px; height: 22px; border-radius: 999px;
    display: grid; place-items: center;
    font-size: 12px; font-weight: 800;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.ied-tile .nm {
    font-size: 12.5px; font-weight: 600; line-height: 1.25;
    padding-inline: 8px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    min-height: 2.5em;
}
.ied-tile .pr { font-size: 12.5px; color: #FF5A00; }

/* One column on the phone: the bill folds on top, the menu scrolls under it. */
@media (max-width: 760px) {
    .ied-wrap { flex-direction: column; height: auto; }
    .ied-bill { flex: none; max-height: 44vh; }
    .ied-menu { min-height: 50vh; }
    .ied-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .ied-dialog .mud-dialog-content { overflow-y: auto; }
}

/* ---------- Partner navigation dialog (the drawer, reborn fullscreen) ---------- */
.pnav-dialog .mud-dialog-content { padding: 18px 22px 30px; height: 100%; overflow-y: auto; }
.pnav-top { display: flex; align-items: center; gap: 12px; margin-block-end: 6px; position: sticky; top: 0; z-index: 2; background: var(--mud-palette-surface); padding-block: 6px; }
.pnav-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--mud-palette-background-gray);
    border: 1.5px solid transparent;
    border-radius: 999px;
    padding: 10px 18px;
    transition: border-color .15s;
}
.pnav-search:focus-within { border-color: #FF5A00; background: var(--mud-palette-surface); }
.pnav-search svg { width: 20px; height: 20px; opacity: .55; }
.pnav-search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; color: inherit; min-width: 0; }
.pnav-search button { border: 0; background: transparent; cursor: pointer; opacity: .6; }
.pnav-close {
    width: 42px; height: 42px;
    border-radius: 50%;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    font-size: 16px;
    cursor: pointer;
    transition: all .12s;
}
.pnav-close:hover { border-color: #FF5A00; color: #FF5A00; }

.pnav-sec { margin-block-start: 18px; }
.pnav-h {
    display: flex; align-items: center; gap: 8px;
    font-size: 12.5px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .6px;
    color: var(--mud-palette-text-secondary);
    margin-block-end: 10px;
}
.pnav-h svg { width: 17px; height: 17px; color: #FF5A00; }
.pnav-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
    gap: 10px;
}
.pnav-tile {
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    border-radius: 16px;
    padding: 14px 8px 12px;
    cursor: pointer;
    font: inherit;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all .13s;
}
.pnav-tile:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0, 0, 0, .1); border-color: #FFB48A; }
.pnav-tile.on { border-color: #FF5A00; background: color-mix(in srgb, #FF5A00 7%, var(--mud-palette-surface)); }
.pnav-tile:disabled { cursor: default; opacity: .9; }
.pnav-tile .ic {
    position: relative;
    width: 46px; height: 46px;
    border-radius: 14px;
    background: var(--mud-palette-background-gray);
    display: grid; place-items: center;
    overflow: visible;
}
.pnav-tile.on .ic { background: #FF5A00; }
.pnav-tile.on .ic svg { color: #fff; }
.pnav-tile .ic svg { width: 24px; height: 24px; color: var(--mud-palette-text-secondary); }
.pnav-tile .ic img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.pnav-tile .ic .em { font-size: 26px; }
.pnav-tile .ic .bd {
    position: absolute; top: -6px; inset-inline-end: -6px;
    background: #E53935; color: #fff;
    min-width: 20px; height: 20px; border-radius: 999px;
    display: grid; place-items: center;
    font-size: 11px; font-weight: 800;
    padding-inline: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
.pnav-tile .lb {
    font-size: 12.5px; font-weight: 600; line-height: 1.25; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (max-width: 560px) {
    .pnav-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
    .pnav-dialog .mud-dialog-content { padding: 12px 14px 24px; }
}

/* On a wide monitor the nav dialog reads as a page, not a wall: content is capped
   at 1024px and centred, the backdrop fills the rest. */
.pnav-dialog .mud-dialog-content { max-width: 1024px; margin-inline: auto; width: 100%; }

/* ---------- Nav dialog, second pass: glass, identity, colour-coded families ---------- */
.pnav-dialog.mud-dialog {
    background: color-mix(in srgb, var(--mud-palette-surface) 86%, transparent);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
}
.pnav-top { background: transparent; align-items: center; }
.pnav-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pnav-id .lg {
    width: 44px; height: 44px;
    border-radius: 14px;
    background: var(--mud-palette-background-gray);
    display: grid; place-items: center;
    font-size: 24px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.pnav-id .lg img { width: 100%; height: 100%; object-fit: cover; }
.pnav-id b { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }

.pnav-search { padding: 12px 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, .05) inset; }

.pnav-h { color: var(--acc, #FF5A00); }
.pnav-h svg { color: var(--acc, #FF5A00); }

/* Each family wears its own colour: the icon chip is a tinted wash of it, the active
   tile goes solid. Tiles float in on a small stagger so the menu ARRIVES. */
.pnav-sec { animation: pnavUp .34s cubic-bezier(.2, .7, .3, 1) both; }
.pnav-sec:nth-child(2) { animation-delay: .03s; }
.pnav-sec:nth-child(3) { animation-delay: .07s; }
.pnav-sec:nth-child(4) { animation-delay: .11s; }
.pnav-sec:nth-child(5) { animation-delay: .15s; }
.pnav-sec:nth-child(6) { animation-delay: .19s; }
.pnav-sec:nth-child(7) { animation-delay: .23s; }
.pnav-sec:nth-child(8) { animation-delay: .27s; }
@keyframes pnavUp {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}

.pnav-tile { border-radius: 18px; border-color: color-mix(in srgb, var(--mud-palette-lines-default) 70%, transparent); background: color-mix(in srgb, var(--mud-palette-surface) 78%, transparent); }
.pnav-tile .ic { background: color-mix(in srgb, var(--acc, #FF5A00) 12%, transparent); border-radius: 15px; transition: transform .15s; }
.pnav-tile .ic svg { color: var(--acc, #FF5A00); }
.pnav-tile:hover { border-color: var(--acc, #FF5A00); box-shadow: 0 10px 26px color-mix(in srgb, var(--acc, #FF5A00) 22%, transparent); }
.pnav-tile:hover .ic { transform: scale(1.08); }
.pnav-tile.on { border-color: var(--acc, #FF5A00); background: color-mix(in srgb, var(--acc, #FF5A00) 8%, var(--mud-palette-surface)); }
.pnav-tile.on .ic { background: var(--acc, #FF5A00); }
.pnav-tile.on .ic svg { color: #fff; }

/* The pay bar goes GREEN. On a page that is orange from header to tiles, the money
   button must be the one thing that reads differently — green says "go / pay". */
.mf-basket-bar {
    background: linear-gradient(135deg, #23B45B, #0E9F4E);
    box-shadow: 0 8px 24px rgba(14, 159, 78, .38);
}

/* The glass was resting on backdrop-filter; where a browser lacks it, an 86%-opaque
   panel just shows the page through itself. Solid surface first, glass only where
   the blur actually exists — and the sticky search row always carries its own paint. */
.pnav-dialog.mud-dialog { background: var(--mud-palette-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .pnav-dialog.mud-dialog {
        background: color-mix(in srgb, var(--mud-palette-surface) 94%, transparent);
        backdrop-filter: blur(18px) saturate(1.25);
        -webkit-backdrop-filter: blur(18px) saturate(1.25);
    }
}
.pnav-top { background: var(--mud-palette-surface); border-radius: 0 0 14px 14px; }

/* Second thought, per the owner: the bar keeps the brand orange — only the ACTION
   is green, a pill that reads as the button it is. */
.mf-basket-bar {
    background: var(--mud-palette-primary);
    box-shadow: 0 8px 24px rgba(255, 90, 0, .32);
}
.mf-basket-bar .go {
    background: linear-gradient(135deg, #23B45B, #0E9F4E);
    color: #fff;
    padding: 9px 16px;
    border-radius: 999px;
    font-weight: 800;
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(14, 159, 78, .45);
}

/* The place-order CTA: unmistakably THE button on the page. A living green — gradient,
   weight, glow — instead of the flat theme fill, and a grey coat while disabled or
   busy so "tappable" and "not yet" never look alike. */
.mf-pay-cta.mud-button-root {
    background: linear-gradient(135deg, #26BC60, #0C9B4C);
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: .2px;
    border-radius: 999px;
    padding-block: 14px;
    box-shadow: 0 10px 26px rgba(14, 159, 78, .45);
    transition: transform .12s, box-shadow .12s;
}
.mf-pay-cta.mud-button-root:hover { background: linear-gradient(135deg, #2BCB68, #0FAA55); transform: translateY(-1px); box-shadow: 0 12px 30px rgba(14, 159, 78, .5); }
.mf-pay-cta.mud-button-root:active { transform: translateY(0); }
.mf-pay-cta.mud-button-root.mud-button-disabled {
    background: #C8CCC9;
    color: #fff;
    box-shadow: none;
}
.mf-pay-cta .mud-button-label { text-transform: none; }

/* ---------- The checkout bill, receipt-style ---------- */
/* One dashed rule opens the money block; inside it the fee lines sit close and quiet.
   (The old styling gave EVERY money row its own dashed border and 28px of air —
   the bill read as six separate announcements.) */
.co-bill {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed rgba(23, 15, 8, .16);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.co-bill .rw {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13.5px;
    color: #857766;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}
.co-bill .rw b { font-weight: 700; color: #2b1d12; font-size: 13.5px; }
.co-bill .rw.save, .co-bill .rw.save b { color: #2e7d32; }
.co-bill .rw.grand {
    margin-top: 8px !important;
    padding: 12px 16px !important;
    background: linear-gradient(135deg, rgba(35, 180, 91, .12), rgba(14, 159, 78, .06));
    border-radius: 14px;
    font-size: 15px;
    font-weight: 800;
    color: #2b1d12;
}
.co-bill .rw.grand b { font-size: 20px; font-weight: 900; color: #0E9F4E; }

/* Third pass on the pay button: it must LOOK pressable. A raised key — hard bottom
   edge, lit top, pressed-down motion on tap, and a slow shine sweep so the eye finds
   it — instead of a flat strip that reads as a banner. */
.mf-pay-cta.mud-button-root {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, #34D678 0%, #14AC58 55%, #0E9F4E 100%);
    border-radius: 18px;
    box-shadow:
        0 5px 0 #0A7C3C,
        0 14px 24px rgba(14, 159, 78, .35),
        inset 0 1.5px 0 rgba(255, 255, 255, .45);
    transform: none;
}
.mf-pay-cta.mud-button-root:hover {
    background: linear-gradient(180deg, #3ADF80 0%, #17B75F 55%, #10AA54 100%);
    transform: none;
    box-shadow:
        0 5px 0 #0A7C3C,
        0 16px 30px rgba(14, 159, 78, .45),
        inset 0 1.5px 0 rgba(255, 255, 255, .45);
}
.mf-pay-cta.mud-button-root:active {
    transform: translateY(4px);
    box-shadow:
        0 1px 0 #0A7C3C,
        0 6px 12px rgba(14, 159, 78, .3),
        inset 0 1.5px 0 rgba(255, 255, 255, .35);
}
.mf-pay-cta.mud-button-root.mud-button-disabled {
    background: #C8CCC9;
    box-shadow: 0 5px 0 #A9AEAA;
    color: #fff;
}
.mf-pay-cta.mud-button-root::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(110deg, transparent 32%, rgba(255, 255, 255, .38) 47%, transparent 62%);
    background-size: 250% 100%;
    animation: mfPayShine 3.4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes mfPayShine {
    0% { background-position: 135% 0; }
    55% { background-position: -60% 0; }
    100% { background-position: -60% 0; }
}

/* The cart-panel's own button glow carries !important — outrank it, or the key's
   edge never shows and the button stays a flat strip. */
.mf-pay-cta.mud-button-root, .mf-cart-panel .mf-pay-cta.mud-button-filled {
    box-shadow:
        0 5px 0 #0A7C3C,
        0 14px 24px rgba(14, 159, 78, .35),
        inset 0 1.5px 0 rgba(255, 255, 255, .45) !important;
    border-radius: 18px !important;
}
.mf-pay-cta.mud-button-root:active, .mf-cart-panel .mf-pay-cta.mud-button-filled:active {
    box-shadow:
        0 1px 0 #0A7C3C,
        0 6px 12px rgba(14, 159, 78, .3),
        inset 0 1.5px 0 rgba(255, 255, 255, .35) !important;
}
.mf-pay-cta.mud-button-root.mud-button-disabled {
    box-shadow: 0 5px 0 #A9AEAA !important;
}

/* ---------- The pay bar: money beside, button separate — and the button is RED ---------- */
@media (max-width: 960px) {
    .co-paybar {
        position: fixed;
        bottom: calc(96px + env(safe-area-inset-bottom));
        left: 12px;
        right: 12px;
        z-index: 1295;
        display: flex;
        align-items: center;
        gap: 14px;
        background: var(--mud-palette-surface);
        border-radius: 22px;
        padding: 10px 12px;
        padding-inline-start: 20px;
        box-shadow: 0 12px 34px rgba(23, 15, 8, .22);
    }
    .co-paybar .tot { display: flex; flex-direction: column; line-height: 1.15; }
    .co-paybar .tot small { font-size: 11.5px; color: var(--mud-palette-text-secondary); font-weight: 700; }
    .co-paybar .tot b { font-size: 19px; font-weight: 900; color: #2b1d12; white-space: nowrap; }
    .co-paybar .mf-pay-cta { flex: 1; }
    body:has(.co-paybar) .mud-main-content { padding-bottom: 210px !important; }
}

/* The action wears red now — the owner's call: the money stands in the bar, the
   button only ACTS. Same raised-key body, red coat. */
.mf-pay-cta.mud-button-root, .mf-cart-panel .mf-pay-cta.mud-button-filled {
    background: linear-gradient(180deg, #F4574D 0%, #E23A30 55%, #D32F2F 100%);
    box-shadow:
        0 5px 0 #A32020,
        0 14px 24px rgba(211, 47, 47, .35),
        inset 0 1.5px 0 rgba(255, 255, 255, .4) !important;
}
.mf-pay-cta.mud-button-root:hover, .mf-cart-panel .mf-pay-cta.mud-button-filled:hover {
    background: linear-gradient(180deg, #F8655B 0%, #E9443A 55%, #DB3838 100%);
    box-shadow:
        0 5px 0 #A32020,
        0 16px 30px rgba(211, 47, 47, .45),
        inset 0 1.5px 0 rgba(255, 255, 255, .4) !important;
}
.mf-pay-cta.mud-button-root:active, .mf-cart-panel .mf-pay-cta.mud-button-filled:active {
    box-shadow:
        0 1px 0 #A32020,
        0 6px 12px rgba(211, 47, 47, .3),
        inset 0 1.5px 0 rgba(255, 255, 255, .3) !important;
}

/* No shadow on the pay button — the owner's call. A clean flat red key: color and
   size carry the affordance, the press just dips it slightly. */
.mf-pay-cta.mud-button-root, .mf-cart-panel .mf-pay-cta.mud-button-filled {
    box-shadow: none !important;
    background: linear-gradient(180deg, #EF4B41 0%, #D32F2F 100%);
}
.mf-pay-cta.mud-button-root:hover, .mf-cart-panel .mf-pay-cta.mud-button-filled:hover {
    box-shadow: none !important;
    background: linear-gradient(180deg, #F45A50 0%, #DB3838 100%);
}
.mf-pay-cta.mud-button-root:active, .mf-cart-panel .mf-pay-cta.mud-button-filled:active {
    box-shadow: none !important;
    transform: translateY(2px);
}
.mf-pay-cta.mud-button-root.mud-button-disabled { box-shadow: none !important; background: #C8CCC9; }

/* Checkout owns the bottom of the screen: while the pay bar is up, the nav menu
   underneath it goes away — one bar of buttons, not two stacked. The bar then
   settles where the menu used to stand. */
body:has(.co-paybar) .mf-bottom-nav { display: none !important; }
@media (max-width: 960px) {
    body:has(.co-paybar) .co-paybar { bottom: calc(14px + env(safe-area-inset-bottom)); }
    body:has(.co-paybar) .mud-main-content { padding-bottom: 140px !important; }
}

/* ---------- Sign-in card, polished ---------- */
.mf-login-card {
    border-radius: 26px !important;
    box-shadow: 0 24px 60px rgba(23, 15, 8, .25) !important;
}
.mf-login-logo {
    width: 84px; height: 84px;
    border-radius: 26px;
    background: #fff;
    display: grid; place-items: center;
    box-shadow: 0 8px 22px rgba(255, 90, 0, .22), 0 0 0 6px rgba(255, 90, 0, .07);
    overflow: hidden;
}
.mf-login-logo img { width: 62px; height: 62px; object-fit: contain; }
/* The 6-digit code reads like a code: big, centred, spaced. */
.mf-code input {
    text-align: center !important;
    font-size: 22px !important;
    font-weight: 800;
    letter-spacing: .45em;
    font-variant-numeric: tabular-nums;
    direction: ltr;
}
.mf-login-btn.mud-button-root {
    height: 50px;
    border-radius: 999px !important;
    font-weight: 800;
    font-size: 15.5px;
    box-shadow: 0 8px 22px rgba(255, 90, 0, .35) !important;
}
.mf-alt-btn.mud-button-root {
    height: 46px;
    border-radius: 999px !important;
    font-weight: 700;
    border-width: 1.5px !important;
}

/* ---------- The code step, decluttered ---------- */
.mf-codesent {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin: 2px 0 16px;
    text-align: center;
}
.mf-codesent .env { font-size: 34px; line-height: 1; }
.mf-codesent .tx { color: var(--mud-palette-text-secondary); font-size: 13.5px; }
.mf-codesent .em {
    direction: ltr;
    unicode-bidi: isolate;
    font-size: 14.5px;
    font-weight: 800;
    background: var(--mud-palette-background-gray);
    border-radius: 999px;
    padding: 7px 16px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The code input is ONE big calm box: soft fill, no floating label, six fat digits. */
.mf-code .mud-input.mud-input-outlined { background: var(--mud-palette-background-gray); border-radius: 18px; }
.mf-code .mud-input-outlined-border { border: 2px solid transparent !important; border-radius: 18px !important; }
.mf-code:focus-within .mud-input-outlined-border { border-color: #FF5A00 !important; }
.mf-code input {
    height: 62px !important;
    text-align: center !important;
    font-size: 27px !important;
    font-weight: 800;
    letter-spacing: .38em;
    text-indent: .38em;
    direction: ltr;
    font-variant-numeric: tabular-nums;
}
.mf-code input::placeholder { letter-spacing: .38em; color: #cfc5b9; font-weight: 400; }
/* Chrome's number spinners have no business on a code */
.mf-code input::-webkit-outer-spin-button, .mf-code input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Code box, right-sized: a compact centred field, no oversized slab, no dot noise. */
.mf-code { max-width: 230px; margin-inline: auto !important; display: block; }
.mf-code .mud-input.mud-input-outlined { border-radius: 14px; }
.mf-code input {
    height: 50px !important;
    font-size: 22px !important;
    letter-spacing: .32em;
    text-indent: .32em;
    padding: 0 !important;
}

/* ---------- The OTP step, matched to the reference: boxes, resend, keypad ---------- */
.otp-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.otp-env { font-size: 46px; line-height: 1; margin-block-end: 2px; }
.otp-sub { color: var(--mud-palette-text-secondary); font-size: 13.5px; text-align: center; }
.otp-email {
    direction: ltr; unicode-bidi: isolate;
    font-size: 13.5px; font-weight: 800;
    background: var(--mud-palette-background-gray);
    border-radius: 999px; padding: 5px 14px;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.otp-boxes { display: flex; gap: 9px; margin: 10px 0 2px; outline: none; }
.otp-boxes .bx {
    width: 42px; height: 52px;
    border-radius: 13px;
    background: var(--mud-palette-background-gray);
    display: grid; place-items: center;
    font-size: 23px; font-weight: 800; color: #2b1d12;
    transition: all .14s;
}
.otp-boxes .bx.on {
    background: #fff;
    box-shadow: 0 6px 16px rgba(23, 15, 8, .16);
    border: 1.5px solid rgba(255, 90, 0, .3);
}
.otp-boxes .bx.cur { box-shadow: inset 0 0 0 2px #FF5A00; background: #fff; }
.otp-resend { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mud-palette-text-secondary); }
.otp-resend button {
    border: 0; background: none; padding: 2px;
    color: #FF5A00; font: inherit; font-weight: 800;
    text-decoration: underline; cursor: pointer;
}
.otp-resend button:disabled { color: #b9ab9b; text-decoration: none; cursor: default; }
.otp-pad {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 2px 26px;
    width: 100%; max-width: 250px;
    margin-block-start: 8px;
}
.otp-pad button {
    border: 0; background: none;
    font-size: 23px; font-weight: 700; color: #2b1d12;
    padding: 11px 0; border-radius: 14px;
    cursor: pointer;
    transition: background .1s;
}
.otp-pad button:active { background: var(--mud-palette-background-gray); }
.otp-pad .bs { font-size: 19px; }
.otp-change {
    border: 0; background: none; margin-block-start: 6px;
    color: var(--mud-palette-text-secondary); font: inherit; font-size: 12.5px;
    text-decoration: underline; cursor: pointer;
}

/* The frosted app bar paints its buttons ink — every button EXCEPT the orange
   sign-in pill, whose label must stay white on the fill. */
.mf-appbar .mf-signin-btn.mud-button-root,
.mf-appbar .mf-signin-btn .lb,
.mf-appbar .mf-signin-btn .mud-icon-root { color: #fff !important; }

/* The POS's hidden print slip: real size for the canvas, parked off-screen. */
.pos-print-host {
    position: fixed;
    inset-inline-start: -10000px;
    top: 0;
    width: 320px;
    background: #fff;
}

/* The slip is an ENGLISH-led paper whatever language the screen speaks: laid out
   left-to-right, or an RTL page mirrors its brackets — "(Full)" printed ")Full(". */
.rcpt { direction: ltr; }

/* Worn only for the RawBT snapshot: the whole slip goes bold so hairline mono
   strokes survive the thermal head. */
.rcpt.rawbt-bold, .rcpt.rawbt-bold * { font-weight: 700 !important; }

/* ---------- The scanned bill: the REAL slip on screen ---------- */
.bill-sealrow {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin: 14px 0 12px;
    text-align: center;
}
.bill-sealrow .ok {
    width: 34px; height: 34px;
    border-radius: 50%;
    background: #0E9F4E; color: #fff;
    display: grid; place-items: center;
    font-size: 18px; font-weight: 900;
    box-shadow: 0 6px 16px rgba(14, 159, 78, .4);
}
.bill-sealrow b { font-size: 16px; }
.bill-sealrow small { flex-basis: 100%; color: var(--mud-palette-text-secondary); font-size: 12.5px; }
.bill-slip {
    margin: 0 auto 16px;
    max-width: 340px;
    background: #fff;
    padding: 18px 16px;
    border-radius: 6px;
    box-shadow: 0 14px 36px rgba(23, 15, 8, .18);
}

/* The OTP's hidden real input: invisible, but it IS the focus target — taps raise
   the keyboard, Ctrl+V pastes, the OS suggests the emailed code. */
.otp-boxes { position: relative; }
.otp-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border: 0;
    padding: 0;
    font-size: 16px;   /* not smaller — iOS zooms the page on focus otherwise */
    background: transparent;
    caret-color: transparent;
}

/* The scanned bill's fixed way back into the store. */
.bill-again-bar {
    position: fixed;
    left: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    z-index: 1200;
    max-width: 420px;
    margin-inline: auto;
}
.bill-again-bar .mud-button-root {
    height: 52px;
    border-radius: 999px !important;
    font-weight: 800;
    box-shadow: 0 12px 28px rgba(255, 90, 0, .45) !important;
}
body:has(.bill-again-bar) .pub-shell { padding-bottom: 96px; }

/* A wrong code is unmissable: the boxes flush red, shake once, and the reason
   stands right beneath them — not in some alert three blocks away. */
.otp-boxes.err { animation: otpShake .4s; }
.otp-boxes.err .bx { background: #FDECEA; box-shadow: inset 0 0 0 1.5px #E53935; color: #C62828; }
@keyframes otpShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-7px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}
.otp-err {
    background: #FDECEA;
    color: #C62828;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    max-width: 100%;
}

/* The paste button under the code boxes — a soft pill, obviously tappable. */
.otp-paste {
    border: 1.5px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    border-radius: 999px;
    padding: 8px 20px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    cursor: pointer;
    transition: all .12s;
}
.otp-paste:hover { border-color: #FF5A00; color: #FF5A00; }
.otp-paste:disabled { opacity: .5; cursor: default; }

/* No bottom menu off the home page — the floating basket bar takes the freed strip. */
body:not(:has(.mf-bottom-nav)) .mf-basket-bar { bottom: calc(14px + env(safe-area-inset-bottom)); }

/* The collapsed sign-in button is a CIRCLE like its neighbours — width alone left
   it an orange egg on phones. */
@media (max-width: 599px) {
    .mf-signin-btn.mud-button-root {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border-radius: 50% !important;
        padding: 0 !important;
    }
    .mf-signin-btn .mud-button-label { line-height: 0; }
}

/* The quiet bar's back button: a soft pill with the word on it; its arrow follows
   the reading direction. */
.mf-backbtn.mud-button-root {
    border-radius: 999px;
    padding: 6px 16px;
    font-weight: 800;
    background: rgba(255, 90, 0, .1);
    color: #FF5A00 !important;
}
.mf-backbtn .mud-icon-root { color: #FF5A00 !important; }
[dir="rtl"] .mf-backbtn .mud-button-icon-start svg { transform: scaleX(-1); }

/* ============ Online table reservations ============ */
/* The door on the store page. Gold like the table chip — dining, not delivery. */
.oo-reserve-btn {
    display: flex; align-items: center; gap: 12px;
    width: 100%; margin-top: 14px; padding: 13px 18px;
    border: 1.5px solid #C6A15B; border-radius: 16px;
    background: linear-gradient(135deg, #FFF9EF, #FDF2DF);
    color: #6B5322; cursor: pointer; text-align: start;
    font: inherit; transition: box-shadow .15s ease, transform .15s ease;
}
.oo-reserve-btn:hover { box-shadow: 0 6px 18px rgba(198, 161, 91, .25); transform: translateY(-1px); }
.oo-reserve-btn .mud-icon-root { color: #C6A15B; width: 28px; height: 28px; flex: none; }
.oo-reserve-btn span { font-weight: 800; font-size: 1.05rem; }
.oo-reserve-btn small { color: #9A7B3F; margin-inline-start: auto; }
@media (max-width: 599px) { .oo-reserve-btn small { display: none; } }

/* The booking dialog */
.rsvd .rsvd-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.rsvd .rsvd-mark {
    width: 52px; height: 52px; border-radius: 14px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: #FFF3E8; font-size: 26px; overflow: hidden;
}
.rsvd .rsvd-mark img { width: 100%; height: 100%; object-fit: cover; }
.rsvd .rsvd-title { font-weight: 800; font-size: 1.15rem; }
.rsvd .rsvd-store { color: #8A8178; font-size: .9rem; }
.rsvd .rsvd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rsvd .rsvd-guests {
    display: flex; align-items: center; gap: 14px;
    margin: 10px 0 14px; padding: 10px 14px;
    border: 1px solid #EADFD4; border-radius: 14px; background: #FFFDFA;
}
.rsvd .rsvd-guests .lbl { flex: 1; color: #6E655C; font-weight: 600; }
.rsvd .rsvd-guests b { font-size: 1.2rem; min-width: 28px; text-align: center; }
.rsvd .rsvd-guests .stp {
    width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid #FF5A00;
    background: #fff; color: #FF5A00; font-size: 1.2rem; font-weight: 800;
    cursor: pointer; line-height: 1;
}
.rsvd .rsvd-guests .stp:disabled { opacity: .35; cursor: default; }
.rsvd .rsvd-cta { border-radius: 14px; font-weight: 800; }

/* The "sent" ending */
.rsvd .rsvd-done { text-align: center; padding: 8px 4px 4px; }
.rsvd .rsvd-done .tick {
    width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%;
    background: #E8F7EC; color: #1F9D4D; font-size: 34px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.rsvd .rsvd-done .ttl { font-weight: 800; font-size: 1.2rem; }
.rsvd .rsvd-done .sub { color: #8A8178; margin: 6px 0 12px; }
.rsvd .rsvd-done .facts {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 16px;
    margin-bottom: 10px; color: #4E463E; font-weight: 600;
}
.rsvd .rsvd-done .facts .no { color: #8A8178; font-weight: 500; }

/* My reservations rows */
.rsvm-row { display: flex; align-items: center; gap: 14px; }
.rsvm-row .when { text-align: center; min-width: 62px; }
.rsvm-row .when b { display: block; font-size: 1.1rem; }
.rsvm-row .when small { color: #8A8178; }
.rsvm-row .what { flex: 1; min-width: 0; }
.rsvm-row .what b { display: block; }
.rsvm-row .what small { display: block; color: #8A8178; }
.rsvm-row .what .note { color: #6E655C; }
.rsvm-row .acts { display: flex; flex-direction: column; align-items: end; gap: 6px; }

/* ============ Reserve v2: a real card on the store page, a page of its own ============ */
.oo-reserve-btn {
    display: flex; align-items: center; gap: 14px;
    width: 100%; margin-top: 14px; padding: 14px 16px;
    border: none; border-radius: 18px; text-decoration: none;
    background: linear-gradient(135deg, #7A5A1E, #B08A3E);
    color: #fff; cursor: pointer;
    box-shadow: 0 8px 22px rgba(122, 90, 30, .28);
    transition: box-shadow .15s ease, transform .15s ease;
}
.oo-reserve-btn:hover { box-shadow: 0 12px 28px rgba(122, 90, 30, .38); transform: translateY(-1px); color: #fff; }
.oo-reserve-btn .plate {
    width: 46px; height: 46px; border-radius: 14px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255, 255, 255, .18);
}
.oo-reserve-btn .plate .mud-icon-root { color: #fff; width: 26px; height: 26px; }
.oo-reserve-btn .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; text-align: start; }
.oo-reserve-btn .txt b { font-size: 1.05rem; font-weight: 800; }
.oo-reserve-btn .txt small { color: rgba(255, 255, 255, .85); }
.oo-reserve-btn .go { flex: none; display: flex; }
.oo-reserve-btn .go .mud-icon-root { color: rgba(255, 255, 255, .85); width: 18px; height: 18px; }
[dir="rtl"] .oo-reserve-btn .go svg { transform: scaleX(-1); }
.oo-reserve-btn span:not(.plate):not(.go) small { display: block; }

/* The booking page */
.rtp { max-width: 640px; margin: 0 auto; padding-bottom: 40px; }
.rtp-hero { display: flex; align-items: center; gap: 14px; margin: 6px 0 18px; }
.rtp-mark {
    width: 64px; height: 64px; border-radius: 18px; flex: none; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    background: #FFF3E8; font-size: 32px; box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
.rtp-mark img { width: 100%; height: 100%; object-fit: cover; }
.rtp-hero h1 { font-size: 1.35rem; font-weight: 800; margin: 0; }
.rtp-hero .store { color: #6E655C; font-weight: 600; }
.rtp-hero .area { color: #9A9089; font-size: .85rem; display: flex; align-items: center; gap: 2px; }
.rtp-hero .area .mud-icon-root { width: 14px; height: 14px; }
.rtp-card {
    background: #fff; border: 1px solid #EFE7DD; border-radius: 22px;
    padding: 20px; box-shadow: 0 10px 30px rgba(43, 39, 35, .06);
}
.rtp-sec { font-weight: 800; color: #4E463E; margin: 16px 0 8px; }
.rtp-sec:first-child { margin-top: 0; }
.rtp-days { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.rtp-days .day {
    flex: none; width: 64px; padding: 8px 0; border-radius: 14px;
    border: 1.5px solid #EADFD4; background: #FFFDFA; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 1px; font: inherit;
}
.rtp-days .day small { color: #9A9089; font-size: .72rem; }
.rtp-days .day b { font-size: 1.15rem; }
.rtp-days .day.on { border-color: #FF5A00; background: #FFF1E8; color: #D14A00; }
.rtp-days .day.on small { color: #E07A3E; }
.rtp-times { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.rtp-times .slot {
    padding: 9px 0; border-radius: 12px; border: 1.5px solid #EADFD4;
    background: #FFFDFA; cursor: pointer; font: inherit; font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.rtp-times .slot.on { border-color: #FF5A00; background: #FF5A00; color: #fff; }
.rtp-guests {
    display: flex; align-items: center; justify-content: center; gap: 22px;
    padding: 10px; border: 1.5px solid #EADFD4; border-radius: 16px; background: #FFFDFA;
}
.rtp-guests .stp {
    width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid #FF5A00;
    background: #fff; color: #FF5A00; font-size: 1.35rem; font-weight: 800;
    cursor: pointer; line-height: 1;
}
.rtp-guests .stp:disabled { opacity: .35; cursor: default; }
.rtp-guests .n { text-align: center; min-width: 44px; }
.rtp-guests .n b { display: block; font-size: 1.35rem; }
.rtp-guests .n small { color: #9A9089; }
.rtp-cta {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; margin-top: 20px; padding: 15px; border: none; border-radius: 16px;
    background: #FF5A00; color: #fff; font: inherit; font-size: 1.05rem; font-weight: 800;
    cursor: pointer; box-shadow: 0 8px 20px rgba(255, 90, 0, .3);
}
.rtp-cta:disabled { opacity: .6; cursor: default; }
.rtp-cta .mud-icon-root { color: #fff; }

/* The "sent" ending, page edition */
.rtp-done { text-align: center; }
.rtp-done .tick {
    width: 72px; height: 72px; margin: 6px auto 14px; border-radius: 50%;
    background: #E8F7EC; color: #1F9D4D; font-size: 38px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.rtp-done .ttl { font-weight: 800; font-size: 1.3rem; }
.rtp-done .sub { color: #8A8178; margin: 6px 0 14px; }
.rtp-done .facts {
    display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 18px;
    margin-bottom: 10px; color: #4E463E; font-weight: 600;
}
.rtp-done .facts .no { color: #8A8178; font-weight: 500; }
.rtp-done-acts { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }

/* Salon & table picker on the booking page */
.rtp-salons { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 8px; }
.rtp-salons .sal {
    flex: none; padding: 8px 18px; border-radius: 999px;
    border: 1.5px solid #EADFD4; background: #FFFDFA; cursor: pointer;
    font: inherit; font-weight: 700; color: #6E655C;
}
.rtp-salons .sal.on { border-color: #7A5A1E; background: #7A5A1E; color: #fff; }
.rtp-tables { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.rtp-tables .tbl {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 12px 6px 10px; border-radius: 16px; cursor: pointer; font: inherit;
    border: 1.5px solid #EADFD4; background: #FFFDFA;
    transition: transform .12s ease, box-shadow .12s ease;
}
.rtp-tables .tbl:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(43, 39, 35, .08); }
.rtp-tables .tbl .shape {
    width: 42px; height: 42px; display: flex; align-items: center; justify-content: center;
    font-size: 22px; background: #F7EFE4; border-radius: 12px;
}
.rtp-tables .tbl .shape.round { border-radius: 50%; }
.rtp-tables .tbl .shape.rect { border-radius: 8px; width: 52px; }
.rtp-tables .tbl b { font-size: .9rem; }
.rtp-tables .tbl small { color: #9A9089; }
.rtp-tables .tbl.on { border-color: #FF5A00; background: #FFF1E8; box-shadow: 0 6px 16px rgba(255, 90, 0, .18); }
.rtp-tables .tbl.on .shape { background: #FFE1CE; }
.rtp-tables .tbl.any .shape { background: linear-gradient(135deg, #FFF3E0, #FFE0B2); }

/* ============ Reserve page v3: numbered steps, real pickers ============ */
.rtp-step { display: flex; align-items: center; gap: 10px; margin: 26px 0 10px; }
.rtp-step:first-child { margin-top: 0; }
.rtp-step .num {
    width: 28px; height: 28px; flex: none; border-radius: 50%;
    background: #FF5A00; color: #fff; font-weight: 800; font-size: .9rem;
    display: flex; align-items: center; justify-content: center;
}
.rtp-step .ttl { font-weight: 800; font-size: 1.05rem; color: #2B2723; }
.rtp-step .opt {
    margin-inline-start: auto; font-size: .75rem; font-weight: 700;
    color: #9A9089; background: #F4EFE9; padding: 3px 10px; border-radius: 999px;
}
.rtp-hint { color: #8A8178; font-size: .88rem; margin: -4px 0 10px; }
.rtp-quick { display: flex; gap: 8px; margin-bottom: 12px; }
.rtp-quick .q {
    padding: 8px 18px; border-radius: 999px; border: 1.5px solid #EADFD4;
    background: #FFFDFA; cursor: pointer; font: inherit; font-weight: 700; color: #6E655C;
}
.rtp-quick .q.on { border-color: #FF5A00; background: #FFF1E8; color: #D14A00; }
.rtp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .rtp-fields { grid-template-columns: 1fr; } }

/* What is about to be sent — the last thing above the button. */
.rtp-summary {
    margin-top: 22px; padding: 14px 16px; border-radius: 16px;
    background: #FFF8F2; border: 1px solid #F2E3D5;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px 14px;
}
.rtp-summary .row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rtp-summary .row span { font-size: 1.05rem; }
.rtp-summary .row b { font-weight: 700; color: #4E463E; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rtp-summary.past { background: #FFF4F3; border-color: #F5C6C2; }
.rtp-warn {
    margin-top: 10px; padding: 10px 14px; border-radius: 12px;
    background: #FFF4F3; border: 1px solid #F5C6C2; color: #B23B32; font-weight: 600;
}
/* The pickers open as a dialog: give the trigger fields a real tap target. */
.rtp-field .mud-input { cursor: pointer; }

/* Reserve: the signed-in guest's identity card (step "Who" answers itself) */
.rtp-me {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px; margin-bottom: 12px;
    border: 1.5px solid #CDE8D3; border-radius: 16px; background: #F4FBF5;
}
.rtp-me .ava {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: #E3F3E6; font-size: 20px;
}
.rtp-me .w { flex: 1; min-width: 0; }
.rtp-me .w b { display: block; }
.rtp-me .w small { color: #6E8F76; }
/* Reserve: the sign-in gate card */
.rtp-login { text-align: center; padding: 34px 24px; }
.rtp-login .big { font-size: 44px; margin-bottom: 8px; }
.rtp-login .ttl { font-weight: 800; font-size: 1.15rem; color: #2B2723; }

/* Reserve: the native time box, dressed like the outlined fields beside it */
.rtp-native { display: flex; flex-direction: column; }
.rtp-native label { font-size: .78rem; color: #8A8178; margin-bottom: 4px; }
.rtp-native input[type="time"] {
    font: inherit; font-size: 1rem; color: #2B2723;
    padding: 9px 12px; border: 1px solid #C9BFB4; border-radius: 6px;
    background: #fff; direction: ltr; width: 100%;
    font-variant-numeric: tabular-nums;
}
.rtp-native input[type="time"]:focus { outline: none; border-color: #FF5A00; box-shadow: 0 0 0 1px #FF5A00; }

/* Reserve: hour : minute as two plain number boxes, always 24-hour, always LTR */
.rtp-native .hm { display: flex; align-items: center; gap: 6px; direction: ltr; }
.rtp-native .hm input[type="number"] {
    font: inherit; font-size: 1.05rem; font-weight: 700; color: #2B2723;
    width: 100%; padding: 8px 4px; text-align: center;
    border: 1px solid #C9BFB4; border-radius: 6px; background: #fff;
    font-variant-numeric: tabular-nums; -moz-appearance: textfield;
}
.rtp-native .hm input::-webkit-outer-spin-button,
.rtp-native .hm input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rtp-native .hm input:focus { outline: none; border-color: #FF5A00; box-shadow: 0 0 0 1px #FF5A00; }
.rtp-native .hm span { font-weight: 800; color: #8A8178; }

/* Reserve: date and time sit on one baseline, same height, labels above both */
.rtp-fields { align-items: end; }
.rtp-native .hm input[type="number"] { height: 40px; padding: 0 4px; }
.rtp-fields .rtp-field .mud-input-control-input-container { background: #fff; }

/* Reserve: truly compact when-row — two-digit boxes hug their digits, nothing sprawls */
.rtp-fields { grid-template-columns: 1fr auto; gap: 12px; }
@media (max-width: 520px) { .rtp-fields { grid-template-columns: 1fr auto; } }
.rtp-native .hm { justify-content: flex-start; }
.rtp-native .hm input[type="number"] {
    width: 58px; height: 34px; font-size: .95rem; padding: 0 2px;
}
.rtp-native label { margin-bottom: 3px; }
.rtp-fields .rtp-field .mud-input-slot,
.rtp-fields .rtp-field input { font-size: .95rem !important; }
.rtp-fields .rtp-field .mud-input-outlined-border { border-radius: 6px; }
.rtp-fields .rtp-field input { padding-top: 7px !important; padding-bottom: 7px !important; height: 34px !important; box-sizing: border-box; }

/* Reserve: the date box wears the time boxes' exact clothes — 34px, 6px radius */
.rtp-datebox { margin: 0 !important; }
.rtp-datebox .mud-input.mud-input-outlined { height: 34px; }
.rtp-datebox .mud-input.mud-input-outlined input {
    height: 34px !important; padding: 0 10px !important; font-size: .95rem !important;
    box-sizing: border-box; cursor: pointer;
}
.rtp-datebox .mud-input-outlined-border { border-radius: 6px; border-color: #C9BFB4; }
.rtp-datebox .mud-input-control-input-container { margin-top: 0 !important; }
.rtp-datebox.mud-input-control { margin-top: 0 !important; }

/* Reserve: one notch smaller across the whole page — titles, cards, inputs, button */
.rtp { font-size: .9rem; }
.rtp-hero h1 { font-size: 1.15rem; }
.rtp-hero .store { font-size: .9rem; }
.rtp-mark { width: 52px; height: 52px; font-size: 26px; border-radius: 14px; }
.rtp-step .ttl { font-size: .95rem; }
.rtp-step .num { width: 24px; height: 24px; font-size: .8rem; }
.rtp-step { margin: 20px 0 8px; }
.rtp-sec { font-size: .9rem; margin: 12px 0 6px; }
.rtp-native label { font-size: .72rem; }
.rtp-native .hm input[type="number"] { font-size: .9rem; height: 32px; width: 54px; }
.rtp-datebox .mud-input.mud-input-outlined,
.rtp-datebox .mud-input.mud-input-outlined input { height: 32px !important; font-size: .9rem !important; }
.rtp-guests { padding: 6px 10px; gap: 18px; }
.rtp-guests .stp { width: 36px; height: 36px; font-size: 1.1rem; }
.rtp-guests .n b { font-size: 1.1rem; }
.rtp-guests .n small { font-size: .75rem; }
.rtp-salons .sal { padding: 6px 14px; font-size: .85rem; }
.rtp-tables { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.rtp-tables .tbl { padding: 9px 4px 8px; }
.rtp-tables .tbl .shape { width: 34px; height: 34px; font-size: 18px; }
.rtp-tables .tbl b { font-size: .8rem; }
.rtp-tables .tbl small { font-size: .72rem; }
.rtp-card .mud-input, .rtp-card .mud-input input, .rtp-card textarea { font-size: .9rem !important; }
.rtp-card .mud-input-label { font-size: .85rem !important; }
.rtp-me { padding: 9px 12px; }
.rtp-me .ava { width: 34px; height: 34px; font-size: 17px; }
.rtp-summary { padding: 10px 12px; font-size: .85rem; }
.rtp-summary .row span { font-size: .95rem; }
.rtp-cta { font-size: .95rem; padding: 12px; }
.rtp-done .ttl { font-size: 1.15rem; }
/* The Mud control reserves helper-text space under the date box — the last 4px of drift */
.rtp-datebox .mud-input-helper-text, .rtp-datebox .mud-input-control-helper-container { display: none !important; }
.rtp-datebox, .rtp-datebox .mud-input-control-input-container { padding-bottom: 0 !important; margin-bottom: 0 !important; }
/* The mud-picker wrapper itself was 40px around a 32px box — the true drift */
.rtp-native .mud-picker { height: 32px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; }
.rtp-datebox .mud-input-control { margin: 0 !important; }
/* Date text gets air on both sides */
.rtp-datebox .mud-input.mud-input-outlined input { padding: 0 16px !important; }

/* Reserve: four little boxes on one line — DD/MM then HH:mm */
.rtp-fields { grid-template-columns: auto auto; justify-content: start; column-gap: 22px; }
@media (max-width: 520px) { .rtp-fields { grid-template-columns: auto auto; } }
/* Reserve: the calendar's own anchor field is not part of the page — only its dialog is */
.rtp-hiddenpicker { position: absolute; width: 0; height: 0; overflow: hidden; }
/* Reserve: the year box is wider than its two-digit siblings */
.rtp-native .hm input.yr { width: 78px; }

/* Reserve: the three numeric date fields share one row */
.rtp-dmy { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; direction: ltr; }
.rtp-dmy .mud-input, .rtp-dmy .mud-input input { font-size: .9rem !important; }

/* Reserve: the day/month/year row is hard LTR and left-anchored, whatever the language */
[dir="rtl"] .rtp-dmy, .rtp-dmy { direction: ltr; }
.rtp-dmy .mud-input-control, .rtp-dmy .mud-input { direction: ltr !important; }
.rtp-dmy input { text-align: left !important; direction: ltr !important; }
[dir="rtl"] .rtp-dmy .mud-input-label,
.rtp-dmy .mud-input-label {
    left: 12px !important; right: auto !important;
    transform-origin: top left !important; text-align: left !important;
}
[dir="rtl"] .rtp-dmy .mud-input-outlined-border legend { text-align: left; margin-left: 8px; margin-right: auto; }
/* Reserve: the hour/minute pair, same LTR row rules, two narrower columns */
.rtp-dmy.rtp-hm2 { grid-template-columns: 1fr 1fr; max-width: 240px; margin-top: 10px; }

/* Reserve: plain labels above the numeric boxes; no floating notch, no spinners */
.rtp-dmy .cell { display: flex; flex-direction: column; }
.rtp-dmy .cell > label { font-size: .72rem; color: #8A8178; margin-bottom: 3px; text-align: left; }
.rtp-dmy .mud-input-label { display: none !important; }
.rtp-dmy .mud-input-outlined-border legend { display: none; }
.rtp-dmy input { padding: 0 10px !important; height: 34px !important; box-sizing: border-box; }
.rtp-dmy .mud-input.mud-input-outlined { height: 34px; }

/* Reserve: the when-row, stock Mud fields in an ltr wrapper — layout only, no restyling */
.rtp-when { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 560px) { .rtp-when { grid-template-columns: repeat(3, 1fr); } }

/* The table guest's bar: the store's own mark, centred */
.mf-storebrand { cursor: default; }
.mf-brand-logo.store { width: 30px; height: 30px; border-radius: 8px; object-fit: cover; }
.mf-storebrand-emoji { font-size: 24px; line-height: 1; }
/* QR table page: the store's own mark in the top bar */
.pub-brand img.store { border-radius: 8px; object-fit: cover; }
.pub-brand-emoji { font-size: 24px; line-height: 1; }

/* Splash wearing a store's mark instead of the platform's */
.mf-loader-store { display: flex; align-items: center; gap: 10px; }
.mf-loader-store img { width: 34px; height: 34px; border-radius: 9px; object-fit: cover; }

/* ============ Language card v2: small, floating, page visible behind ============ */
.mf-langgate.mini {
    position: fixed; inset: 0; z-index: 4000;
    display: flex; align-items: flex-end; justify-content: center;
    background: rgba(30, 25, 20, .35); padding: 0 0 26px;
}
.mf-langgate-card.mini {
    position: relative; width: min(92vw, 340px);
    background: #fff; border-radius: 20px; padding: 18px 16px 12px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .25);
}
.mf-langgate-card.mini .mini-x {
    position: absolute; top: 8px; inset-inline-end: 10px;
    border: none; background: #F4EFE9; color: #6E655C;
    width: 26px; height: 26px; border-radius: 50%; cursor: pointer; font-size: .8rem;
}
.mf-langgate-card.mini .grid.mini {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 6px;
}
.mf-langgate-card.mini .grid.mini.rest { margin-top: 8px; }
.mf-langgate-card.mini .tile {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 10px 4px; border: 1.5px solid #EADFD4; border-radius: 14px;
    background: #FFFDFA; cursor: pointer; font: inherit;
}
.mf-langgate-card.mini .tile:hover { border-color: #FF5A00; }
.mf-langgate-card.mini .tile .flag { font-size: 20px; }
.mf-langgate-card.mini .tile .name { font-size: .8rem; font-weight: 700; color: #4E463E; }
.mf-langgate-card.mini .mini-more {
    display: block; width: 100%; margin-top: 8px; padding: 5px;
    border: none; background: none; color: #8A8178; cursor: pointer; font-size: 1rem;
}

/* The language card must never hold the page hostage: no dimming, and clicks pass
   straight through to the shop underneath — only the card itself takes them. */
.mf-langgate.mini { background: none; pointer-events: none; }
.mf-langgate-card.mini { pointer-events: auto; }

/* The extra languages slide open and scroll inside their own panel */
.mf-langgate-card.mini .rest-wrap {
    max-height: 0; overflow: hidden;
    transition: max-height .32s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
    opacity: 0;
}
.mf-langgate-card.mini .rest-wrap.open {
    max-height: 40vh; opacity: 1; overflow-y: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.mf-langgate-card.mini .mini-more { transition: transform .3s ease; }
.mf-langgate-card.mini .mini-more.up { transform: rotate(180deg); }

/* ============ Language picker: one sliding line ============ */
.mf-lang-strip {
    display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 12px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; direction: ltr;
}
.mf-lang-strip .mf-lang-slide {
    flex: 0 0 auto; scroll-snap-align: center;
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    min-width: 92px; padding: 12px 10px; font: inherit; cursor: pointer;
    border: 1.5px solid #EADFD4; border-radius: 16px; background: #FFFDFA;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.mf-lang-strip .mf-lang-slide:hover { transform: translateY(-2px); border-color: #FF5A00; }
.mf-lang-strip .mf-lang-slide .fl { font-size: 26px; line-height: 1; }
.mf-lang-strip .mf-lang-slide .nm { font-size: .82rem; font-weight: 700; color: #4E463E; white-space: nowrap; }
.mf-lang-strip .mf-lang-slide.on {
    border-color: #FF5A00; background: #FFF1E8;
    box-shadow: 0 6px 16px rgba(255, 90, 0, .18);
}

/* ============ Language strip: smaller marks, arrows, drag ============ */
.mf-lang-rail { display: flex; align-items: center; gap: 4px; direction: ltr; }
.mf-lang-arrow {
    flex: 0 0 auto; width: 30px; height: 46px; border: none; border-radius: 10px;
    background: #F7F1EA; color: #6E655C; font-size: 1.35rem; line-height: 1;
    cursor: pointer; user-select: none;
}
.mf-lang-arrow:hover { background: #FFE1CE; color: #D14A00; }
.mf-lang-strip { flex: 1 1 auto; scroll-behavior: smooth; }
.mf-lang-strip.dragging { scroll-behavior: auto; cursor: grabbing; }
.mf-lang-strip.dragging .mf-lang-slide { pointer-events: none; }
/* Smaller tiles: the mark is a label, not the hero */
.mf-lang-strip .mf-lang-slide { min-width: 72px; padding: 8px 8px; gap: 3px; border-radius: 12px; }
.mf-lang-strip .mf-lang-slide .fl { font-size: 15px; font-weight: 800; opacity: .75; letter-spacing: .5px; }
.mf-lang-strip .mf-lang-slide .nm { font-size: .78rem; }
/* Smaller still: the strip is a quiet row of labels */
.mf-lang-strip .mf-lang-slide { min-width: 62px; padding: 7px 6px; gap: 2px; }
.mf-lang-strip .mf-lang-slide .fl { font-size: 11px; letter-spacing: .3px; }
.mf-lang-strip .mf-lang-slide .nm { font-size: .68rem; font-weight: 600; }
.mf-lang-arrow { width: 26px; height: 40px; font-size: 1.15rem; }
/* The picker lifts off the page: a soft shadow behind the whole card */
.mf-lang-dialog .mud-dialog {
    box-shadow: 0 24px 60px rgba(43, 39, 35, .32), 0 4px 14px rgba(43, 39, 35, .14) !important;
    border-radius: 22px;
}
.mf-lang-dialog + .mud-overlay .mud-overlay-scrim,
.mud-overlay .mud-overlay-scrim { backdrop-filter: blur(2px); }
/* The class rides ON the dialog element, not a wrapper around it */
.mud-dialog.mf-lang-dialog {
    box-shadow: 0 24px 60px rgba(43, 39, 35, .34), 0 4px 14px rgba(43, 39, 35, .16) !important;
    border-radius: 22px;
}
/* Language picker header: nothing but the close button */
.mud-dialog.mf-lang-dialog .mud-dialog-title { padding: 6px 8px 0; min-height: 0; }
.mud-dialog.mf-lang-dialog .mud-dialog-content { padding-top: 4px; }
/* The ✕ sits at the row's END — right in English, left in Arabic/Farsi */
.mud-dialog.mf-lang-dialog .mud-dialog-title {
    display: flex; justify-content: flex-end; align-items: center;
    padding: 8px 10px 0 !important; min-height: 0;
}
.mud-dialog.mf-lang-dialog .mud-dialog-title .mud-button-root {
    position: static !important; margin: 0 !important;
}
[dir="rtl"] .mud-dialog.mf-lang-dialog .mud-dialog-title { justify-content: flex-start; }
/* A deeper, blurred backdrop behind the language picker */
.mf-lang-scrim, .mud-overlay.mf-lang-scrim .mud-overlay-scrim {
    background: rgba(24, 20, 17, .62) !important;
    backdrop-filter: blur(4px);
}
/* An empty title row needs no height of its own */
.mud-dialog.mf-lang-dialog .mud-dialog-title { padding: 6px 8px 0 !important; }
.mud-dialog.mf-lang-dialog .mud-dialog-title .mud-icon-button { width: 34px; height: 34px; }

/* ============ Language dialog v3: a proper, roomy list ============ */
.mud-dialog.mf-lang-dialog { border-radius: 20px; overflow: hidden; }
.mud-dialog.mf-lang-dialog .mud-dialog-title {
    display: flex; justify-content: flex-end; align-items: center;
    padding: 10px 12px 0 !important; min-height: 0;
}
[dir="rtl"] .mud-dialog.mf-lang-dialog .mud-dialog-title { justify-content: flex-start; }
.mud-dialog.mf-lang-dialog .mud-dialog-content { padding: 4px 16px 18px !important; }

.mf-lang-list {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    max-height: 58vh; overflow-y: auto; padding: 2px;
}
@media (min-width: 520px) { .mf-lang-list { grid-template-columns: repeat(3, 1fr); } }
.mf-lang-row {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 12px; border-radius: 14px; cursor: pointer; font: inherit;
    border: 1.5px solid #EFE7DD; background: #FFFDFA; text-align: start;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.mf-lang-row:hover { border-color: #FF5A00; transform: translateY(-1px); }
.mf-lang-row .fl { font-size: 20px; line-height: 1; flex: none; }
.mf-lang-row .nm { font-size: .9rem; font-weight: 700; color: #3B342E; flex: 1; min-width: 0;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mf-lang-row .tick { color: #FF5A00; font-weight: 900; }
.mf-lang-row.on { border-color: #FF5A00; background: #FFF3EB; }

/* The store name is a heading, not a control: the browser focuses it after a
   navigation (for screen readers) and drew a blue box around it. Keep the focus,
   drop the ring — nothing here is clickable. */
.oo-hero-plate .nm:focus,
.oo-hero-plate .nm:focus-visible,
.oo-hero-plate .who h1:focus { outline: none !important; box-shadow: none !important; }

/* Taller confirm buttons — the last tap of a flow deserves a big target */
.mf-pay-cta.mud-button-root { min-height: 62px !important; font-size: 1.05rem !important; }
.co-paybar .mf-pay-cta.mud-button-root { min-height: 60px !important; }
.qm-bar .qm-send { min-height: 64px !important; font-size: 1.02rem !important; }
/* "Please choose a table" sits beside the step's own heading until one is picked */
.rtp-step .req {
    margin-inline-start: auto; font-size: .72rem; font-weight: 700;
    color: #B23B32; background: #FFF4F3; border: 1px solid #F5C6C2;
    padding: 3px 10px; border-radius: 999px;
}

/* ============ Reserve: compact YYYY / MM / DD · HH : mm ============ */
.rtp-dt { display: flex; align-items: center; gap: 4px; direction: ltr; flex-wrap: nowrap; }
.rtp-dt .sep { font-weight: 800; color: #9A9089; padding: 0 1px; }
.rtp-dt .gap { width: 12px; }
.rtp-dt .f { flex: 0 0 auto; width: 52px; margin: 0 !important; }
.rtp-dt .f.y { width: 68px; }
.rtp-dt .f .mud-input.mud-input-outlined { height: 38px; }
.rtp-dt .f input {
    height: 38px !important; padding: 0 6px !important;
    text-align: center; font-size: .95rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.rtp-dt .f .mud-input-label { display: none !important; }
.rtp-dt .f .mud-input-outlined-border legend { display: none; }
.rtp-dt-hint { margin-top: 5px; font-size: .68rem; color: #9A9089; direction: ltr; text-align: left; }
/* The up/down arrows stay — just made small so the boxes remain compact */
.rtp-dt .f { width: 66px; }
.rtp-dt .f.y { width: 84px; }
.rtp-dt .f input { padding: 0 2px 0 6px !important; }
.rtp-dt .f .mud-input-adornment,
.rtp-dt .f .mud-input-numeric-spin { transform: scale(.78); margin-inline-start: -2px; }
.rtp-dt .f .mud-input-numeric-spin .mud-icon-button { padding: 0; }
/* The digits sit centred in their box; the arrows keep their own narrow column */
.rtp-dt .f input,
.rtp-dt .f .mud-input-slot { text-align: center !important; padding-inline: 2px !important; }
.rtp-dt .f .mud-input.mud-input-outlined { padding-inline-end: 2px; }
.rtp-dt .f .mud-input-adornment-end { flex: 0 0 auto; }

/* ---- Reserving: how long, and how many tables ---- */

/* The length of the stay, as a row of plain choices — 1h, 1h 30min, 2h… */
.rtp-durs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.rtp-durs .dur {
    flex: 1 1 auto; min-width: 68px; padding: 10px 8px; border: 1.5px solid #ECE4DD; border-radius: 12px;
    background: #FFF; color: #6E655D; font-weight: 700; font-size: .86rem; cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.rtp-durs .dur:hover { transform: translateY(-1px); }
.rtp-durs .dur.on { border-color: #FF5A00; background: #FFF1E8; color: #C24500; box-shadow: 0 6px 16px rgba(255, 90, 0, .16); }

/* One line of guidance under a step's title, quieter than the title itself. */
.rtp-hint { color: #9A9089; font-size: .78rem; margin: -2px 0 8px; }

/* A table another party already holds: shown, greyed, and not clickable. */
.rtp-tables .tbl.busy { opacity: .5; cursor: not-allowed; background: #F6F3F0; border-style: dashed; }
.rtp-tables .tbl.busy:hover { transform: none; box-shadow: none; }
.rtp-tables .tbl.busy small { color: #C24500; font-weight: 700; }

/* Several tables can be ticked at once, so each ticked one wears its own mark. */
.rtp-tables .tbl { position: relative; }
.rtp-tables .tbl .tick {
    position: absolute; inset-block-start: 4px; inset-inline-end: 6px;
    width: 18px; height: 18px; border-radius: 50%; background: #FF5A00; color: #FFF;
    font-size: 11px; line-height: 18px; text-align: center; font-weight: 800;
}

/* The summary's hour line carries the window it opens, in smaller type. */
.rtp-summary .row small { color: #9A9089; font-size: .76rem; white-space: nowrap; }

/* Partner and customer lists: the arrival hour above, the table's release below. */
.rsv-row .when small, .my-rsv .when small { display: block; }

/* The spin arrows sit ON TOP of the field's last 16px, so digits centred in the box
   land right of the centre of what the eye actually sees. The end padding gives the
   arrows their room back and the number returns to the middle. */
.rtp-dt .f input,
.rtp-dt .f .mud-input-slot {
    padding-inline-start: 2px !important;
    padding-inline-end: 18px !important;
}

/* ---- How long: one sliding line, half an hour per arrow tap ---- */

.rtp-durs-wrap { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }

/* The arrows are meant for thumbs, so they keep a full touch target. */
.rtp-durs-wrap .nav {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
    border: 1.5px solid #ECE4DD; background: #FFF; color: #6E655D;
    font-size: 1.5rem; line-height: 1; cursor: pointer; user-select: none;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.rtp-durs-wrap .nav:hover:not(:disabled) { background: #FFF1E8; border-color: #FFC49A; }
.rtp-durs-wrap .nav:active:not(:disabled) { transform: scale(.92); }
.rtp-durs-wrap .nav:disabled { opacity: .35; cursor: default; }

/* The window the strip slides behind. */
.rtp-durs-view { flex: 1 1 auto; overflow: hidden; min-width: 0; }

/* The strip itself starts at the window's centre and is pulled left by exactly
   (index × 74px + half a chip), so the chosen length always lands in the middle.
   74 = 68px chip + 6px gap; change one and ReserveTable.razor must follow. */
.rtp-durs {
    position: relative; left: 50%;
    display: flex; gap: 6px; width: max-content;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.rtp-durs .dur {
    flex: 0 0 68px; width: 68px; padding: 7px 3px;
    border: 1.5px solid #ECE4DD; border-radius: 10px; background: #FFF;
    color: #9A9089; font-weight: 700; font-size: .74rem; white-space: nowrap; cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.rtp-durs .dur.on {
    border-color: #FF5A00; background: #FFF1E8; color: #C24500;
    transform: scale(1.06); box-shadow: 0 6px 16px rgba(255, 90, 0, .18);
}


/* The booking's cost — only ever rendered by a house that charges for one. */
.rtp-summary .row.price b { color: #C24500; }
.rtp-summary .row.price small { color: #9A9089; font-size: .72rem; white-space: nowrap; }
.rsv-row .meta .rsv-price { color: #C24500; font-weight: 700; margin-inline-end: 8px; }

/* ============ Booking page: one size smaller, everywhere ============
   The page had grown loud — hero, step titles, chips, table cards and the
   button all shouting at once. Everything here steps down together so the
   proportions stay as they were, only quieter. Last block in the file, so it
   wins over the earlier reserve rules by weight of order alone. */

.rtp { font-size: .88rem; }
.rtp-hero { gap: 10px; margin: 4px 0 12px; }
.rtp-mark { width: 46px; height: 46px; border-radius: 13px; font-size: 22px; }
.rtp-hero h1 { font-size: 1.05rem; }
.rtp-hero .store { font-size: .82rem; }

.rtp-card { padding: 14px; border-radius: 18px; }
.rtp-step { margin: 16px 0 7px; gap: 8px; }
.rtp-step .ttl { font-size: .92rem; }
.rtp-step .req { font-size: .68rem; }
.rtp-hint, .rtp-dt-hint { font-size: .7rem; }

/* The date and time row */
.rtp-dt { gap: 2px; }
.rtp-dt .f { max-width: 58px; }
.rtp-dt .f.y { max-width: 74px; }
.rtp-dt .sep { font-size: .95rem; }
.rtp-card .mud-input, .rtp-card .mud-input input, .rtp-card textarea { font-size: .84rem !important; }
.rtp-card .mud-input-label { font-size: .78rem !important; }

/* How long: the arrows come down with everything else; the chips are already small. */
.rtp-durs-wrap { gap: 4px; }
.rtp-durs-wrap .nav { width: 32px; height: 32px; font-size: 1.2rem; }

/* How many */
.rtp-guests { gap: 16px; padding: 7px; border-radius: 13px; }
.rtp-guests .stp { width: 34px; height: 34px; font-size: 1.1rem; }
.rtp-guests .n b { font-size: 1.1rem; }
.rtp-guests .n small { font-size: .72rem; }

/* Where */
.rtp-salons .sal { padding: 6px 13px; font-size: .78rem; }
.rtp-tables { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 7px; }
.rtp-tables .tbl { padding: 8px 4px 7px; border-radius: 13px; gap: 3px; }
.rtp-tables .tbl .shape { width: 32px; height: 32px; font-size: 17px; border-radius: 10px; }
.rtp-tables .tbl .shape.rect { width: 40px; }
.rtp-tables .tbl b { font-size: .78rem; }
.rtp-tables .tbl small { font-size: .68rem; }
.rtp-tables .tbl .tick { width: 15px; height: 15px; font-size: 9px; line-height: 15px; }

/* Who */
.rtp-me { padding: 9px 12px; gap: 9px; border-radius: 13px; }
.rtp-me .ava { font-size: 1.1rem; }

/* The summary and the button */
.rtp-summary { margin-top: 14px; padding: 10px 12px; border-radius: 13px; gap: 6px 10px; }
.rtp-summary .row span { font-size: .92rem; }
.rtp-summary .row b { font-size: .82rem; }
.rtp-summary .row small { font-size: .68rem; }
.rtp-warn { margin-top: 8px; padding: 7px 11px; font-size: .78rem; border-radius: 10px; }
.rtp-cta { margin-top: 14px; padding: 11px; font-size: .92rem; border-radius: 13px; }

/* The "booked" ending */
.rtp-done .tick { width: 54px; height: 54px; font-size: 28px; margin: 4px auto 10px; }
.rtp-done .ttl { font-size: 1.05rem; }
.rtp-done .sub { font-size: .82rem; }
.rtp-done .facts { font-size: .8rem; gap: 6px 13px; }

/* Smaller again: the whole booking page comes down another notch. Same
   proportions, less shouting — this is the size it settles at. */
.rtp { font-size: .8rem; }
.rtp-mark { width: 38px; height: 38px; border-radius: 11px; font-size: 18px; }
.rtp-hero h1 { font-size: .92rem; }
.rtp-hero .store { font-size: .74rem; }

.rtp-card { padding: 11px; border-radius: 16px; }
.rtp-step { margin: 12px 0 5px; gap: 6px; }
.rtp-step .ttl { font-size: .82rem; }
.rtp-hint, .rtp-dt-hint { font-size: .64rem; }

.rtp-dt .f { max-width: 52px; }
.rtp-dt .f.y { max-width: 66px; }
.rtp-card .mud-input, .rtp-card .mud-input input, .rtp-card textarea { font-size: .76rem !important; }
.rtp-card .mud-input-label { font-size: .72rem !important; }

/* The strip's pitch is 60 = 56px chip + 4px gap — ReserveTable.razor must match. */
.rtp-durs-wrap .nav { width: 27px; height: 27px; font-size: 1.05rem; }
.rtp-durs { gap: 4px; }
.rtp-durs .dur { flex: 0 0 56px; width: 56px; padding: 5px 2px; font-size: .66rem; border-radius: 9px; }

.rtp-guests { gap: 12px; padding: 5px; border-radius: 11px; }
.rtp-guests .stp { width: 29px; height: 29px; font-size: .95rem; }
.rtp-guests .n b { font-size: .95rem; }
.rtp-guests .n small { font-size: .64rem; }

.rtp-salons .sal { padding: 5px 11px; font-size: .7rem; }
.rtp-tables { grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.rtp-tables .tbl { padding: 6px 3px 5px; border-radius: 11px; gap: 2px; }
.rtp-tables .tbl .shape { width: 26px; height: 26px; font-size: 14px; border-radius: 8px; }
.rtp-tables .tbl .shape.rect { width: 33px; }
.rtp-tables .tbl b { font-size: .7rem; }
.rtp-tables .tbl small { font-size: .6rem; }
.rtp-tables .tbl .tick { width: 13px; height: 13px; font-size: 8px; line-height: 13px; }

.rtp-me { padding: 7px 10px; gap: 7px; border-radius: 11px; }

.rtp-summary { margin-top: 11px; padding: 8px 10px; border-radius: 11px; gap: 5px 8px; }
.rtp-summary .row span { font-size: .82rem; }
.rtp-summary .row b { font-size: .74rem; }
.rtp-summary .row small { font-size: .62rem; }
.rtp-warn { margin-top: 6px; padding: 6px 9px; font-size: .7rem; border-radius: 9px; }
.rtp-cta { margin-top: 11px; padding: 9px; font-size: .82rem; border-radius: 11px; }

.rtp-done .tick { width: 44px; height: 44px; font-size: 23px; }
.rtp-done .ttl { font-size: .92rem; }
.rtp-done .sub { font-size: .74rem; }
.rtp-done .facts { font-size: .72rem; gap: 5px 11px; }

/* ---- How long: a strip you can push with a thumb ----
   The row is a plain horizontal scroller now: swipe it, or step it with the
   arrows, which scroll the chosen length back to the middle. No transform and
   no guessed pixel pitch — the browser does the sliding, so a chip may be as
   wide as its own words. */
.rtp-durs-view {
    overflow-x: auto; overflow-y: hidden;
    scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity; overscroll-behavior-x: contain;
    scrollbar-width: none; padding: 5px 0;
}
.rtp-durs-view::-webkit-scrollbar { display: none; }
.rtp-durs {
    position: static; left: auto; transform: none;
    display: flex; gap: 7px; width: max-content; padding-inline: 8px;
}
.rtp-durs .dur {
    flex: 0 0 auto; width: auto; min-width: 58px;
    padding: 9px 14px; border-radius: 11px; font-size: .72rem;
    scroll-snap-align: center; touch-action: manipulation;
}

/* ---- On a phone the Reserve button stays put ----
   The form is long enough to scroll past the button; on a phone it rides at the
   bottom of the screen instead, where a thumb already is. It borrows the bottom
   nav's own geometry (this page never shows that nav), and the page keeps room
   below its last field so nothing hides underneath. */
@media (max-width: 700px) {
    .rtp { padding-bottom: 88px; }
    .rtp-card .rtp-cta {
        position: fixed; inset-inline: 10px; bottom: calc(10px + env(safe-area-inset-bottom));
        width: auto; margin-top: 0; z-index: 1200; padding: 13px;
        box-shadow: 0 10px 26px rgba(255, 90, 0, .34);
    }
}

/* Smaller still. Type and boxes come down another step; the things a thumb has to
   hit (arrows, steppers, the button) stop shrinking around 26px, which is as small
   as a target can get and still be hit first time. */
.rtp { font-size: .72rem; }
.rtp-hero { gap: 8px; margin: 2px 0 9px; }
.rtp-mark { width: 32px; height: 32px; border-radius: 9px; font-size: 15px; }
.rtp-hero h1 { font-size: .82rem; }
.rtp-hero .store { font-size: .66rem; }

.rtp-card { padding: 9px; border-radius: 14px; }
.rtp-step { margin: 10px 0 4px; gap: 5px; }
.rtp-step .ttl { font-size: .74rem; }
.rtp-step .req { font-size: .6rem; }
.rtp-hint, .rtp-dt-hint { font-size: .58rem; }

.rtp-dt .f { max-width: 46px; }
.rtp-dt .f.y { max-width: 60px; }
.rtp-dt .sep { font-size: .8rem; }
.rtp-card .mud-input, .rtp-card .mud-input input, .rtp-card textarea { font-size: .7rem !important; }
.rtp-card .mud-input-label { font-size: .66rem !important; }

.rtp-durs-view { padding: 3px 0; }
.rtp-durs-wrap .nav { width: 26px; height: 26px; font-size: .95rem; }
.rtp-durs { gap: 4px; padding-inline: 6px; }
.rtp-durs .dur { min-width: 48px; padding: 6px 10px; font-size: .62rem; border-radius: 8px; }

.rtp-guests { gap: 10px; padding: 4px; border-radius: 9px; }
.rtp-guests .stp { width: 26px; height: 26px; font-size: .85rem; }
.rtp-guests .n b { font-size: .85rem; }
.rtp-guests .n small { font-size: .58rem; }

.rtp-salons .sal { padding: 4px 9px; font-size: .64rem; }
.rtp-tables { grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 5px; }
.rtp-tables .tbl { padding: 5px 2px 4px; border-radius: 9px; }
.rtp-tables .tbl .shape { width: 22px; height: 22px; font-size: 12px; border-radius: 7px; }
.rtp-tables .tbl .shape.rect { width: 28px; }
.rtp-tables .tbl b { font-size: .64rem; }
.rtp-tables .tbl small { font-size: .55rem; }
.rtp-tables .tbl .tick { width: 11px; height: 11px; font-size: 7px; line-height: 11px; }

.rtp-me { padding: 6px 8px; gap: 6px; border-radius: 9px; }

.rtp-summary { margin-top: 9px; padding: 7px 9px; border-radius: 9px; gap: 4px 7px; }
.rtp-summary .row span { font-size: .74rem; }
.rtp-summary .row b { font-size: .68rem; }
.rtp-summary .row small { font-size: .56rem; }
.rtp-warn { margin-top: 5px; padding: 5px 8px; font-size: .64rem; border-radius: 8px; }
.rtp-cta { margin-top: 9px; padding: 9px; font-size: .74rem; border-radius: 10px; }

.rtp-done .tick { width: 38px; height: 38px; font-size: 20px; }
.rtp-done .ttl { font-size: .84rem; }
.rtp-done .sub { font-size: .66rem; }
.rtp-done .facts { font-size: .64rem; gap: 4px 9px; }

/* The pinned button keeps a real tap height even at this type size. */
@media (max-width: 700px) {
    .rtp { padding-bottom: 74px; }
    .rtp-card .rtp-cta { padding: 11px; }
}

/* ---- The wait wears the shop: logo above, its name beneath, both centred ---- */
.mf-loader-store {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    text-align: center; max-width: min(80vw, 320px);
}
.mf-loader-store img {
    width: 88px; height: 88px; border-radius: 24px; object-fit: cover;
    box-shadow: 0 10px 28px rgba(43, 39, 35, .18);
}
.mf-loader-store { font-size: 20px; line-height: 1.25; }
.mf-loader-store .em {
    width: 88px; height: 88px; border-radius: 24px; display: flex;
    align-items: center; justify-content: center; font-size: 44px;
    background: #FFF3E8; box-shadow: 0 10px 28px rgba(43, 39, 35, .18);
}
.mf-loader-store .nm { display: block; }

/* ---- The booking's refusal dialog ---- */
.rtp-errdlg .mud-dialog-content { padding-top: 4px; }
.rtp-err { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; padding: 6px 4px 2px; }
.rtp-err .mark {
    width: 52px; height: 52px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 26px; background: #FFF4F3; border: 1px solid #F5C6C2;
}
.rtp-err .msg { font-size: .92rem; font-weight: 600; color: #4E463E; line-height: 1.45; }

/* ============ Booking page: the shop's mark, done properly ============
   A squircle plate with a soft warm halo behind it, the action as a quiet
   uppercase line, and the restaurant's own name as the headline. Same treatment
   on the loading screen, so the page the guest waits for is the page they get. */

.rtp-hero { display: flex; align-items: center; gap: 11px; margin: 4px 0 12px; }

.rtp-mark {
    position: relative; flex: none;
    width: 46px; height: 46px; border-radius: 15px; overflow: hidden;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
    background: linear-gradient(145deg, #FFF6EE, #FFE7D5);
    box-shadow: 0 6px 16px rgba(196, 69, 0, .16), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.rtp-mark img { width: 100%; height: 100%; object-fit: cover; }

/* The halo: a soft orange bloom behind the plate, not a border around it. */
.rtp-hero::before {
    content: ""; position: absolute; width: 62px; height: 62px; border-radius: 50%;
    margin-inline-start: -8px; background: radial-gradient(circle, rgba(255, 90, 0, .16), transparent 70%);
    pointer-events: none;
}
.rtp-hero { position: relative; }

.rtp-hero .who { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rtp-hero .eyebrow {
    font-size: .58rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: #E07A3E;
}
.rtp-hero h1 {
    margin: 0; font-size: 1.02rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.2;
    color: #2B2723; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The same plate, larger, on the loading screen. */
.mf-loader-store img, .mf-loader-store .em {
    width: 92px; height: 92px; border-radius: 28px;
    box-shadow: 0 14px 34px rgba(196, 69, 0, .20), inset 0 0 0 1px rgba(255, 255, 255, .75);
}
.mf-loader-store .em {
    background: linear-gradient(145deg, #FFF6EE, #FFE7D5); font-size: 46px;
}
.mf-loader-store .nm {
    font-size: 1.05rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.3;
    color: #2B2723;
}
.mf-loader-store { gap: 14px; }

/* ---- The MajidTek signature: a whisper, not a headline ----
   No page loader carries the platform's own wordmark any more, so the only text
   left down there is who built it — and that belongs in the smallest type on the
   screen. The rules either side shrink with it so the proportions hold. */
.mf-loader-footer { gap: 2px; bottom: calc(14px + env(safe-area-inset-bottom)); }
.mf-loader-footer .mk { font-size: 9px; letter-spacing: .03em; padding-bottom: 1px; gap: 0; }
.mf-loader-footer .mk::before,
.mf-loader-footer .mk::after { width: 14px; }
.mf-loader-footer .mk::before { margin-inline-end: 6px; }
.mf-loader-footer .mk::after { margin-inline-start: 6px; }
.mf-loader-footer .cr { font-size: 7.5px; opacity: .8; }
.mf-loader-footer .tag { font-size: 8.5px; }

/* ---- The mark stands on its own ----
   The old rule put a rounded box and an orange glow BEHIND the logo, which read as
   a plate the mark was sitting on. The artwork is already transparent, so the plate
   goes and the shadow moves to drop-shadow — that follows the shape's own alpha
   (the receipt and its leaf), not a rectangle around it. A touch larger, because
   without the box it needs the room to read. */
.mf-brand-logo {
    width: 34px; height: 34px;
    border-radius: 0;
    background: none;
    box-shadow: none;
    filter: drop-shadow(0 2px 5px rgba(196, 69, 0, .28));
}
/* A store's own photo still wants its rounded plate — a photograph has corners. */
.mf-brand-logo.store {
    width: 30px; height: 30px; border-radius: 9px;
    box-shadow: 0 4px 11px rgba(43, 39, 35, .18); filter: none;
}
.mf-brand:hover .mf-brand-logo { transform: rotate(-6deg) scale(1.1); }

/* ============ How many: a counter that feels its taps ============
   The pill gets a soft raised surface; the buttons press in and spring back; the
   number itself slides up (or down) as it changes, keyed per value so Blazor
   remounts it and the entry animation replays. Beneath, one dot per person pops
   in with a small stagger — the party becomes something you can SEE. */

.rtp-guests {
    position: relative; gap: 18px; padding: 8px 10px; border-radius: 14px;
    background: linear-gradient(180deg, #FFFDFA, #FFF6EE);
    border: 1px solid #F2E3D5;
    box-shadow: 0 6px 18px rgba(196, 69, 0, .07), inset 0 1px 0 rgba(255, 255, 255, .8);
}
.rtp-guests .stp {
    width: 34px; height: 34px; font-size: 1.05rem; border-width: 0;
    background: linear-gradient(180deg, #FF7A26, #FF5A00); color: #fff;
    box-shadow: 0 5px 12px rgba(255, 90, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .14s cubic-bezier(.34, 1.56, .64, 1), box-shadow .14s ease, opacity .14s ease;
}
.rtp-guests .stp:hover:not(:disabled) { transform: translateY(-1px) scale(1.06); }
.rtp-guests .stp:active:not(:disabled) { transform: scale(.88); box-shadow: 0 2px 6px rgba(255, 90, 0, .3); }
.rtp-guests .stp:disabled { opacity: .3; background: #D8CFC7; box-shadow: none; }

.rtp-guests .n { min-width: 46px; overflow: hidden; }
.rtp-guests .n b {
    font-size: 1.25rem; font-weight: 800; color: #C24500;
    font-variant-numeric: tabular-nums; will-change: transform;
}
/* Keyed remount replays whichever entry matches the direction of the tap. */
.rtp-guests .n b.up { animation: rtpCountUp .22s cubic-bezier(.22, .9, .34, 1.2) both; }
.rtp-guests .n b.down { animation: rtpCountDown .22s cubic-bezier(.22, .9, .34, 1.2) both; }
@keyframes rtpCountUp { from { transform: translateY(80%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes rtpCountDown { from { transform: translateY(-80%); opacity: 0; } to { transform: none; opacity: 1; } }


/* Reduced motion: everything lands instantly, nothing bounces. */
@media (prefers-reduced-motion: reduce) {
    .rtp-guests .n b.up, .rtp-guests .n b.down { animation: none; }
    .rtp-guests .stp { transition: none; }
}

/* ============ Booking hero: a proper card ============
   The strip becomes a card: soft warm gradient with a faint radial glow in the
   corner, the mark on a WHITE plate with a hairline ring (a dark logo was
   drowning on the tinted squircle), the action as a tracked line, the name as
   the headline, and one quiet meta line under it. Everything eases in once. */

.rtp-hero {
    position: relative; display: flex; align-items: center; gap: 13px;
    margin: 4px 0 12px; padding: 13px 15px;
    border-radius: 18px; overflow: hidden;
    background:
        radial-gradient(120% 160% at 100% 0%, rgba(255, 138, 61, .14), transparent 55%),
        linear-gradient(135deg, #FFFDFA, #FFF3E8);
    border: 1px solid #F2E3D5;
    box-shadow: 0 8px 24px rgba(196, 69, 0, .07);
    animation: rtpHeroIn .4s cubic-bezier(.22, .9, .34, 1.1) both;
}
@keyframes rtpHeroIn { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
.rtp-hero::before { content: none; }   /* the halo belonged to the old strip */

/* The plate: white, so any logo — dark, photographic, emoji — sits cleanly. */
.rtp-mark {
    width: 54px; height: 54px; border-radius: 16px; font-size: 26px;
    background: #FFFFFF;
    box-shadow: 0 5px 14px rgba(43, 39, 35, .12), 0 0 0 1px rgba(43, 39, 35, .06);
}
.rtp-mark img { width: 100%; height: 100%; object-fit: cover; }

.rtp-hero .who { gap: 2px; }
.rtp-hero .eyebrow {
    font-size: .56rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    color: #E07A3E;
}
.rtp-hero h1 { font-size: 1.06rem; font-weight: 800; letter-spacing: -.015em; color: #2B2723; }

.rtp-hero .meta {
    display: flex; align-items: center; gap: 6px;
    font-size: .66rem; font-weight: 600; color: #9A9089;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rtp-hero .meta .r { color: #C24500; font-weight: 800; }
.rtp-hero .meta .sep { opacity: .6; }

@media (prefers-reduced-motion: reduce) { .rtp-hero { animation: none; } }

/* Fourth pass on the pay button, and the lesson holds: FLAT reads as a banner.
   The red coat stays — that call stands — but the key gets its body back: a hard
   bottom edge, a lit top, a real drop shadow, the press that dips onto that edge,
   and the slow shine sweep so the eye finds it. Unmistakably a thing you press. */
.mf-pay-cta.mud-button-root, .mf-cart-panel .mf-pay-cta.mud-button-filled {
    background: linear-gradient(180deg, #F75B51 0%, #E23A30 55%, #D32F2F 100%);
    box-shadow:
        0 5px 0 #A32020,
        0 13px 24px rgba(211, 47, 47, .35),
        inset 0 1.5px 0 rgba(255, 255, 255, .4) !important;
    transform: none;
}
.mf-pay-cta.mud-button-root:hover, .mf-cart-panel .mf-pay-cta.mud-button-filled:hover {
    background: linear-gradient(180deg, #FA675D 0%, #E9443A 55%, #DB3838 100%);
    box-shadow:
        0 5px 0 #A32020,
        0 16px 30px rgba(211, 47, 47, .45),
        inset 0 1.5px 0 rgba(255, 255, 255, .4) !important;
    transform: none;
}
.mf-pay-cta.mud-button-root:active, .mf-cart-panel .mf-pay-cta.mud-button-filled:active {
    transform: translateY(4px);
    box-shadow:
        0 1px 0 #A32020,
        0 5px 10px rgba(211, 47, 47, .3),
        inset 0 1.5px 0 rgba(255, 255, 255, .3) !important;
}
.mf-pay-cta.mud-button-root.mud-button-disabled {
    background: #C8CCC9;
    box-shadow: 0 5px 0 #A9AEAA !important;
    color: #fff;
}

/* Fifth and final pass on the pay button — the owner's word: a NORMAL button.
   No raised key, no shine, no drama. Modest height, solid red, a real border,
   a small shadow, and a plain press. Everything theatrical above is overruled. */
.mf-pay-cta.mud-button-root, .mf-cart-panel .mf-pay-cta.mud-button-filled {
    min-height: 44px !important;
    font-size: .92rem !important;
    border-radius: 12px;
    background: #E23A30;
    border: 1.5px solid #B92B22;
    box-shadow: 0 2px 6px rgba(211, 47, 47, .22) !important;
    transform: none;
}
.mf-pay-cta.mud-button-root::after { content: none; }   /* no shine sweep */
.mf-pay-cta.mud-button-root:hover, .mf-cart-panel .mf-pay-cta.mud-button-filled:hover {
    background: #D93028;
    border-color: #A32020;
    box-shadow: 0 3px 8px rgba(211, 47, 47, .28) !important;
    transform: none;
}
.mf-pay-cta.mud-button-root:active, .mf-cart-panel .mf-pay-cta.mud-button-filled:active {
    transform: translateY(1px);
    box-shadow: 0 1px 3px rgba(211, 47, 47, .2) !important;
}
.mf-pay-cta.mud-button-root.mud-button-disabled {
    background: #C8CCC9;
    border-color: #B4B8B5;
    box-shadow: none !important;
    color: #fff;
}
.co-paybar .mf-pay-cta.mud-button-root { min-height: 44px !important; }
/* Size-large padding was still puffing the button up; a normal button is 44px. */
.mf-pay-cta.mud-button-root, .mf-cart-panel .mf-pay-cta.mud-button-filled {
    padding: 8px 18px !important;
    height: 44px;
    border-radius: 12px !important;
}

/* ---- Contracts: the store's standing agreements, one per row ---- */
.ct-list { display: flex; flex-direction: column; gap: 10px; }
.ct-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ct-row .who { min-width: 160px; flex: 1; }
.ct-row .who b { display: block; }
.ct-row .who small { color: #9A9089; }
.ct-row .what { flex: 2; min-width: 180px; display: flex; flex-direction: column; gap: 1px; }
.ct-row .what small { color: #9A9089; font-size: .76rem; }
.ct-row .price { text-align: end; }
.ct-row .price b { color: #C24500; font-size: 1.05rem; }
.ct-row .price small { color: #9A9089; display: block; font-size: .7rem; }
.ct-row .acts { display: flex; align-items: center; gap: 2px; }

/* ============ Checkout, one size smaller ============
   The page had grown into a poster: 20px card padding, full-height headings,
   62px buttons. Everything steps down together — same layout, quieter — and the
   whole pass is scoped to .co-page so no other screen moves. */

.co-page { font-size: .84rem; }
.co-page .mud-paper.pa-5 { padding: 13px 14px !important; border-radius: 16px !important; }
.co-page .mud-paper.mb-4 { margin-bottom: 10px !important; }
.co-page .mud-typography-h6 { font-size: .95rem; }
.co-page .mud-typography-subtitle2 { font-size: .8rem; }
.co-page .mud-typography-body2, .co-page .mud-typography-caption { font-size: .76rem; }
.co-page .mud-typography-h6 .mud-icon-root { width: 18px; height: 18px; }

/* Delivery / collect: smaller chips, smaller scooter. */
.co-page .co-mode { gap: 8px; }
.co-page .co-mode button { padding: 9px 10px; border-radius: 12px; gap: 8px; border-width: 1.5px; }
.co-page .co-mode .ico { font-size: 20px; }
.co-page .co-mode .tx b { font-size: .82rem; }
.co-page .co-mode .tx i { font-size: .72rem; }

/* Alerts, buttons, radios and inputs come down with the type. */
.co-page .mud-alert { font-size: .76rem; padding: 5px 10px; }
.co-page .mud-alert .mud-alert-icon { align-self: center; }
.co-page .mud-button-root:not(.mf-pay-cta) { font-size: .8rem; min-height: 38px; }
.co-page .mud-radio .mud-typography { font-size: .82rem; }
.co-page .mud-radio .mud-icon-root { width: 20px; height: 20px; }
.co-page .mud-input, .co-page .mud-input input, .co-page textarea { font-size: .8rem !important; }
.co-page .mud-input-label { font-size: .76rem !important; }

/* The bill keeps its grand total loud — that line is the one that matters. */
.co-page .co-bill { font-size: .8rem; }
.co-page .co-bill .rw.grand b { font-size: 17px; }

/* ============ The contract letter, on screen and on A4 ============ */
.ct-doc {
    max-width: 620px; margin: 18px auto 12px; padding: 26px 28px;
    background: #fff; border: 1px solid #EFE7DD; border-radius: 20px;
    box-shadow: 0 10px 30px rgba(43, 39, 35, .07);
}
.ct-doc .hd { display: flex; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 2px solid #FF5A00; }
.ct-doc .hd .mark {
    width: 56px; height: 56px; border-radius: 15px; overflow: hidden; flex: none;
    display: flex; align-items: center; justify-content: center; font-size: 28px;
    background: #FFF6EE; box-shadow: 0 0 0 1px rgba(43, 39, 35, .07);
}
.ct-doc .hd .mark img { width: 100%; height: 100%; object-fit: cover; }
.ct-doc .hd .who b { display: block; font-size: 1.15rem; font-weight: 800; color: #241F1B; }
.ct-doc .hd .who small { display: block; color: #8a7c6c; font-size: .76rem; }
.ct-doc .hd .who .ph { color: #241F1B; font-weight: 700; }
.ct-doc .ttl { margin: 16px 0 6px; }
.ct-doc .ttl .eyebrow { font-size: .6rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #E07A3E; }
.ct-doc .ttl h1 { margin: 2px 0 0; font-size: 1.15rem; font-weight: 800; color: #241F1B; }
.ct-doc .facts { display: flex; gap: 20px; margin: 10px 0 14px; }
.ct-doc .facts .f small { display: block; color: #8a7c6c; font-size: .68rem; }
.ct-doc .facts .f b { font-size: .88rem; color: #241F1B; }
.ct-doc .goods { width: 100%; border-collapse: collapse; font-size: .82rem; }
.ct-doc .goods th { text-align: start; padding: 7px 8px; background: #FBF3EA; color: #8a7c6c; font-size: .72rem; }
.ct-doc .goods td { padding: 7px 8px; border-bottom: 1px solid #F1E7DC; color: #241F1B; }
.ct-doc .goods td:nth-child(2), .ct-doc .goods th:nth-child(2) { text-align: center; }
.ct-doc .goods td:last-child, .ct-doc .goods th:last-child { text-align: end; }
.ct-doc .goods .sum td { color: #8a7c6c; border-bottom: none; }
.ct-doc .grand {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 12px; padding: 11px 14px; background: #FFF4EC; border-radius: 12px;
}
.ct-doc .grand span { color: #8a7c6c; font-size: .82rem; }
.ct-doc .grand b { color: #E04E00; font-size: 1.15rem; font-weight: 800; }
.ct-doc .note { margin-top: 12px; color: #8a7c6c; font-size: .78rem; line-height: 1.6; }
.ct-doc .foot { margin-top: 18px; padding-top: 10px; border-top: 1px solid #F1E7DC; color: #a2937f; font-size: .7rem; }
.ct-acts { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 4px auto 30px; }

/* Print = the PDF. Scoped with :has so every OTHER page keeps printing whole —
   the blank-pages lesson from the receipt rules. The letter alone survives, full
   width of the A4, and the buttons and bars around it vanish. */
@media print {
    body:has(.ct-doc) * { visibility: hidden; }
    body:has(.ct-doc) .ct-doc, body:has(.ct-doc) .ct-doc * { visibility: visible; }
    body:has(.ct-doc) .ct-doc {
        position: absolute; inset-block-start: 0; inset-inline-start: 0;
        width: 100%; max-width: none; margin: 0; padding: 0 4mm;
        border: none; border-radius: 0; box-shadow: none;
    }
    body:has(.ct-doc) .ct-acts, body:has(.ct-doc) .pub-top { display: none; }
}

/* The PDF pass, second cut. Browsers drop background colours when printing, which
   stripped the letter to bare text — force them, and let the letterhead breathe on
   the A4: a larger mark, the store name at letter size, the orange rule kept. */
@media print {
    body:has(.ct-doc) .ct-doc,
    body:has(.ct-doc) .ct-doc * {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
    body:has(.ct-doc) .ct-doc { padding: 6mm 10mm 0; font-size: 13px; }
    body:has(.ct-doc) .ct-doc .hd { padding-bottom: 6mm; border-bottom: 2.5px solid #FF5A00; }
    body:has(.ct-doc) .ct-doc .hd .mark { width: 72px; height: 72px; border-radius: 18px; font-size: 36px; }
    body:has(.ct-doc) .ct-doc .hd .who b { font-size: 1.5rem; }
    body:has(.ct-doc) .ct-doc .hd .who small { font-size: .85rem; }
    body:has(.ct-doc) .ct-doc .ttl { margin-top: 7mm; }
    body:has(.ct-doc) .ct-doc .ttl .eyebrow { font-size: .68rem; }
    body:has(.ct-doc) .ct-doc .ttl h1 { font-size: 1.4rem; }
    body:has(.ct-doc) .ct-doc .facts { gap: 12mm; margin: 5mm 0 6mm; }
    body:has(.ct-doc) .ct-doc .facts .f small { font-size: .74rem; }
    body:has(.ct-doc) .ct-doc .facts .f b { font-size: 1rem; }
    body:has(.ct-doc) .ct-doc .goods { font-size: .92rem; }
    body:has(.ct-doc) .ct-doc .goods th { background: #FBF3EA !important; padding: 3mm; }
    body:has(.ct-doc) .ct-doc .goods td { padding: 3mm; }
    body:has(.ct-doc) .ct-doc .grand { background: #FFF4EC !important; margin-top: 5mm; padding: 4mm 5mm; border-radius: 3mm; }
    body:has(.ct-doc) .ct-doc .grand b { font-size: 1.35rem; }
    body:has(.ct-doc) .ct-doc .note { margin-top: 5mm; font-size: .85rem; }
    body:has(.ct-doc) .ct-doc .foot { margin-top: 9mm; font-size: .78rem; }
}

/* No h1 anywhere wears a border, underline-box or focus ring — headings are text,
   not fields. (One had grown a ring from a focus style; this closes the whole class.) */
h1 { border: 0 !important; outline: 0 !important; box-shadow: none !important; }

/* ============ The contract dialog, compact ============
   A form of ten fields cannot afford full-size MudBlazor controls — it was scrolling
   on a laptop. Narrower dialog (ExtraSmall), smaller type, tighter fields, and the
   product rows close ranks. */
.ct-dlg .mud-dialog-title { padding: 14px 18px 4px; }
.ct-dlg .mud-dialog-title .mud-typography-h6 { font-size: .95rem; }
.ct-dlg .mud-dialog-content { padding: 8px 18px 4px; font-size: .8rem; }
.ct-dlg .mud-dialog-actions { padding: 8px 18px 14px; }
.ct-dlg .mud-typography-subtitle2 { font-size: .78rem; }
.ct-dlg .mud-input, .ct-dlg .mud-input input, .ct-dlg textarea { font-size: .8rem !important; }
.ct-dlg .mud-input-label { font-size: .74rem !important; }
.ct-dlg .mud-input-helper-text { font-size: .64rem; }
.ct-dlg .mud-input-control-margin-dense .mud-input-slot { padding-top: 6px; padding-bottom: 6px; }
.ct-dlg .mb-3 { margin-bottom: 8px !important; }
.ct-dlg .mb-2 { margin-bottom: 6px !important; }
.ct-dlg .mud-button-root { font-size: .8rem; min-height: 34px; }
.ct-dlg .mud-icon-button { padding: 4px; }
/* The dropdown the picker opens follows suit. */
.mud-popover .mud-list-item .mud-typography { font-size: .8rem; }

/* The note's ready-made wording: quiet chips, one tap to use. The owner's own
   suggestions wear a warmer tint and a small × to forget them. */
.ct-sugs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ct-sugs .sug {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 999px; border: 1px solid #ECE4DD;
    background: #FFFDFA; color: #6E655D; font: inherit; font-size: .68rem; cursor: pointer;
}
.ct-sugs .sug:hover { border-color: #FFC49A; background: #FFF6EE; }
.ct-sugs .sug.own { background: #FFF1E8; border-color: #FFD0AC; color: #A85410; }
.ct-sugs .sug.own .x { font-weight: 800; opacity: .6; padding-inline-start: 2px; }
.ct-sugs .sug.own .x:hover { opacity: 1; }
.ct-sugs .sug.add { border-style: dashed; color: #C24500; font-weight: 700; }

/* The letter's TEL label — the eyebrow treatment, one size down. */
.ct-doc .hd .who .ph .tel {
    font-size: .56rem; font-weight: 800; letter-spacing: .12em; color: #E07A3E;
    margin-inline-end: 4px;
}

/* The monthly price is the goods table's LAST ROW now — same columns as the goods,
   tinted, with the figure in the price column where every other number lives. */
.ct-doc .goods .grand td {
    background: #FFF4EC; border-bottom: none;
    padding: 11px 8px; font-size: .82rem; color: #8a7c6c;
}
.ct-doc .goods .grand td:last-child { color: #E04E00; font-size: 1.05rem; font-weight: 800; white-space: nowrap; }
@media print {
    body:has(.ct-doc) .ct-doc .goods .grand td { background: #FFF4EC !important; padding: 4mm 3mm; }
    body:has(.ct-doc) .ct-doc .goods .grand td:last-child { font-size: 1.25rem; }
}
/* The grand row LIVES IN the table now — the old band's flex/rounding must not
   drag it back out of table layout, on screen or on paper. */
.ct-doc .goods tr.grand { display: table-row; margin: 0; padding: 0; border-radius: 0; background: none; }
@media print {
    body:has(.ct-doc) .ct-doc .goods tr.grand {
        display: table-row; margin: 0; padding: 0; border-radius: 0; background: none !important;
    }
}

/* The terms table sits above the goods, cut from the same cloth; its columns read
   naturally (start-aligned all three) and it keeps a breath of air below. */
.ct-doc .goods.facts-t { margin-bottom: 12px; }
.ct-doc .goods.facts-t th, .ct-doc .goods.facts-t td { text-align: start; }
.ct-doc .goods.facts-t td { border-bottom: none; }
@media print { body:has(.ct-doc) .ct-doc .goods.facts-t { margin-bottom: 5mm; } }

/* ---- The contract answered: stamp, accept, reply ---- */

/* The stamp is part of the LETTER — it prints, in green, like a rubber stamp would. */
.ct-doc .stamp {
    display: flex; align-items: center; gap: 10px;
    margin-top: 16px; padding: 10px 14px;
    border: 1.5px solid #9CD3AC; border-radius: 12px; background: #F0FAF3;
}
.ct-doc .stamp .mk {
    width: 30px; height: 30px; border-radius: 50%; flex: none;
    background: #1F9D4D; color: #fff; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
}
.ct-doc .stamp b { display: block; color: #157A3A; font-size: .86rem; }
.ct-doc .stamp small { color: #4E8A62; font-size: .72rem; }
@media print {
    body:has(.ct-doc) .ct-doc .stamp { background: #F0FAF3 !important; margin-top: 5mm; padding: 3mm 4mm; }
}

/* The answer card, under the letter — never printed (outside .ct-doc). */
.ct-answer { max-width: 620px; margin: 10px auto 0; display: flex; gap: 8px; }
.ct-answer .acc {
    flex: 1; padding: 13px; border: none; border-radius: 13px; cursor: pointer;
    background: linear-gradient(180deg, #2BCB68, #0FAA55); color: #fff;
    font: inherit; font-size: .95rem; font-weight: 800;
    box-shadow: 0 8px 20px rgba(14, 159, 78, .3);
}
.ct-answer .acc:disabled { opacity: .6; }
.ct-answer.reply { align-items: stretch; }
.ct-answer.reply textarea {
    flex: 1; resize: none; padding: 10px 12px; font: inherit; font-size: .82rem;
    border: 1.5px solid #ECE4DD; border-radius: 12px; background: #FFFDFA;
}
.ct-answer.reply textarea:focus { outline: none; border-color: #FF5A00; }
.ct-answer.reply .snd {
    padding: 0 20px; border: none; border-radius: 12px; cursor: pointer;
    background: #FF5A00; color: #fff; font: inherit; font-weight: 800; font-size: .84rem;
}
.ct-answer.reply .snd:disabled { opacity: .45; cursor: default; }

/* What was already said, quietly, under the box. */
.ct-replies { max-width: 620px; margin: 8px auto 0; display: flex; flex-direction: column; gap: 5px; }
.ct-replies .r {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
    padding: 7px 12px; border-radius: 10px; background: #FFF6EE; font-size: .78rem; color: #4E463E;
}
.ct-replies .r small { color: #9A9089; font-size: .66rem; white-space: nowrap; }
@media print {
    body:has(.ct-doc) .ct-answer, body:has(.ct-doc) .ct-replies { display: none; }
}

/* ---- The reply composer, dressed like the app's chat bars ----
   The field and the key sit in ONE rounded shell; the key is a round orange
   button wearing a paper plane that lifts on hover, presses in on tap, and
   points the way the text flows (flipped in RTL). */
.ct-answer.reply {
    align-items: flex-end; gap: 0;
    padding: 6px; border-radius: 18px;
    background: #FFFDFA; border: 1.5px solid #ECE4DD;
    box-shadow: 0 6px 18px rgba(43, 39, 35, .06);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.ct-answer.reply:focus-within { border-color: #FFB07A; box-shadow: 0 6px 18px rgba(255, 90, 0, .12); }
.ct-answer.reply textarea {
    border: none; background: none; box-shadow: none; padding: 9px 12px;
}
.ct-answer.reply textarea:focus { border: none; outline: none; }
.ct-answer.reply .snd {
    flex: none; width: 42px; height: 42px; padding: 0; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #FF7A26, #FF5A00);
    box-shadow: 0 5px 12px rgba(255, 90, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .35);
    transition: transform .14s cubic-bezier(.34, 1.56, .64, 1), box-shadow .14s ease;
}
.ct-answer.reply .snd:hover:not(:disabled) { transform: translateY(-1px) scale(1.06); }
.ct-answer.reply .snd:active:not(:disabled) { transform: scale(.88); box-shadow: 0 2px 6px rgba(255, 90, 0, .3); }
.ct-answer.reply .snd .plane { width: 19px; height: 19px; margin-inline-start: 2px; }
[dir="rtl"] .ct-answer.reply .snd .plane { transform: scaleX(-1); margin-inline-start: 0; margin-inline-end: 2px; }
@media (prefers-reduced-motion: reduce) { .ct-answer.reply .snd { transition: none; } }

/* ---- The contract tables rule a full grid ----
   Every cell wears its own hairline, so column meets row the way ledger paper
   does — on screen, and forced through onto the PDF. */
.ct-doc .goods { border: 1px solid #F1E7DC; border-radius: 10px; border-collapse: separate; border-spacing: 0; overflow: hidden; }
.ct-doc .goods th, .ct-doc .goods td { border-bottom: 1px solid #F1E7DC; }
.ct-doc .goods th:not(:last-child), .ct-doc .goods td:not(:last-child) { border-inline-end: 1px solid #F1E7DC; }
.ct-doc .goods tr:last-child td { border-bottom: none; }
.ct-doc .goods .sum td { border-bottom: 1px solid #F1E7DC; }
.ct-doc .goods.facts-t td { border-bottom: none; }
@media print {
    body:has(.ct-doc) .ct-doc .goods th, body:has(.ct-doc) .ct-doc .goods td {
        border-color: #F1E7DC !important;
    }
}

/* Accept, human-sized: a normal button, centred, not a banner. */
.ct-answer .acc {
    flex: none; margin-inline: auto; width: auto; min-width: 220px;
    padding: 10px 26px; font-size: .86rem; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    box-shadow: 0 5px 14px rgba(14, 159, 78, .26);
}

/* The terms table keeps the FULL grid — its value row was dropping its rules. */
.ct-doc .goods.facts-t td { border-bottom: 1px solid #F1E7DC; }
.ct-doc .goods.facts-t tr:last-child td { border-bottom: none; }

/* The counter-offer card: folded to one line until it is wanted. */
.ct-suggest { max-width: 620px; margin: 10px auto 0; border: 1.5px solid #ECE4DD; border-radius: 14px; background: #FFFDFA; overflow: hidden; }
.ct-suggest .hd {
    width: 100%; padding: 11px 14px; border: none; background: none; cursor: pointer;
    font: inherit; font-size: .84rem; font-weight: 800; color: #C24500; text-align: start;
    display: flex; align-items: center; gap: 8px;
}
.ct-suggest .hd .ar { margin-inline-start: auto; color: #9A9089; }
.ct-suggest .bd { padding: 0 14px 12px; display: flex; flex-direction: column; gap: 8px; }
.ct-suggest .ln { display: flex; gap: 6px; align-items: center; }
.ct-suggest .ln input, .ct-suggest .mo input {
    padding: 8px 10px; font: inherit; font-size: .8rem;
    border: 1.5px solid #ECE4DD; border-radius: 10px; background: #fff;
}
.ct-suggest .ln input:first-child { flex: 1; min-width: 0; }
.ct-suggest .ln input[type=number] { width: 84px; }
.ct-suggest .ln input:focus, .ct-suggest .mo input:focus { outline: none; border-color: #FF5A00; }
.ct-suggest .ln .x { border: none; background: none; color: #B23B32; font-size: 1rem; cursor: pointer; padding: 4px; }
.ct-suggest .add {
    align-self: flex-start; border: 1.5px dashed #ECE4DD; background: none; border-radius: 999px;
    padding: 5px 14px; font: inherit; font-size: .74rem; font-weight: 700; color: #C24500; cursor: pointer;
}
.ct-suggest .mo { display: flex; align-items: center; gap: 8px; }
.ct-suggest .mo label { font-size: .76rem; font-weight: 700; color: #6E655D; }
.ct-suggest .mo input { width: 74px; }
.ct-suggest .mo small { color: #9A9089; font-size: .66rem; }
.ct-suggest .go {
    align-self: flex-end; border: none; border-radius: 11px; padding: 9px 22px; cursor: pointer;
    background: #FF5A00; color: #fff; font: inherit; font-size: .82rem; font-weight: 800;
    display: inline-flex; align-items: center; gap: 6px;
}
.ct-suggest .go:disabled { opacity: .6; }
@media print { body:has(.ct-doc) .ct-suggest { display: none; } }

/* The short address, whole and copyable, under its field. */
.slug-link {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 12px; padding: 9px 12px; border-radius: 12px;
    background: #FFF6EE; border: 1px solid #F2E3D5;
}
.slug-link a { font-weight: 700; color: #C24500; text-decoration: none; word-break: break-all; }
.slug-link a:hover { text-decoration: underline; }

/* ============ Reserve a table: a card, not a gold banner ============
   The store page's booking door joins the current design language: warm white
   card, the plate on an orange gradient tile, title over its quiet hint, and a
   chevron in its own soft circle. The old brass strip is fully overruled. */
.oo-reserve-btn {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; margin: 10px 0;
    background: linear-gradient(135deg, #FFFDFA, #FFF3E8) !important;
    border: 1px solid #F2E3D5; border-radius: 16px;
    color: #2B2723 !important;
    box-shadow: 0 6px 18px rgba(196, 69, 0, .08);
    transition: transform .14s ease, box-shadow .14s ease;
}
.oo-reserve-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(196, 69, 0, .14); color: #2B2723; }
.oo-reserve-btn .plate {
    width: 42px; height: 42px; border-radius: 13px; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #FF7A26, #FF5A00);
    box-shadow: 0 5px 12px rgba(255, 90, 0, .28);
}
.oo-reserve-btn .plate .mud-icon-root { color: #fff; width: 22px; height: 22px; }
.oo-reserve-btn .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; text-align: start; }
.oo-reserve-btn .txt b { font-size: .92rem; font-weight: 800; color: #2B2723; }
.oo-reserve-btn .txt small { color: #9A9089; font-size: .74rem; }
.oo-reserve-btn .go {
    flex: none; width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #FFF1E8;
}
.oo-reserve-btn .go .mud-icon-root { color: #C24500 !important; width: 14px; height: 14px; }

/* Table-QR cards: the guest's help line where the platform mark used to sit, and
   a quiet download key in the corner. The help prints — it is FOR the card. */
.tqr-card { position: relative; }
.tqr-help {
    margin-top: 6px; padding-top: 6px; border-top: 1px dashed #EADFD4;
    color: #8A8178; font-size: .64rem; line-height: 1.5;
}
.tqr-dl { position: absolute; inset-block-end: 6px; inset-inline-end: 6px; }
.tqr-brand { display: none; }   /* the platform mark is gone from the card */
.tqr-dl {
    border: 1px solid #ECE4DD; background: #fff; border-radius: 50%;
    width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
    cursor: pointer; color: #C24500;
}
.tqr-dl:hover { background: #FFF1E8; border-color: #FFC49A; }
.tqr-dl .mud-icon-root { width: 16px; height: 16px; }

/* Products: the rest of a long shelf, one tap away. */
.pmn-more {
    display: block; margin: 8px auto 0; padding: 7px 22px;
    border: 1.5px dashed #ECE4DD; border-radius: 999px; background: none;
    font: inherit; font-size: .78rem; font-weight: 700; color: #C24500; cursor: pointer;
}
.pmn-more:hover { background: #FFF6EE; border-color: #FFC49A; }

/* ============================================================
   Roles page: the preset cards became divs (they now hold their
   own edit button, and a button cannot live inside a button).
   Give the div back what the button element used to provide.
   ============================================================ */
.rl-card { text-align: center; cursor: pointer; font: inherit; }
.rl-card b, .rl-card small, .rl-card .ic { text-align: center; }
.rl-card .cnt, .rl-card .ops { align-self: center; }
.rl-card .ops { justify-content: center; }

/* ============================================================
   Partner menu: the shelf picker. One group shows at a time —
   these chips choose which. Scrolls sideways on a phone.
   ============================================================ */
.pmn-cats {
    display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 10px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.pmn-cats::-webkit-scrollbar { display: none; }
.pmn-cat-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: 999px; border: 1.5px solid #ECE4DD;
    background: #fff; font: inherit; font-size: .82rem; font-weight: 700;
    color: #5d564c; cursor: pointer; white-space: nowrap;
}
.pmn-cat-chip i {
    font-style: normal; font-size: .7rem; font-weight: 800; color: #97907f;
    background: #faf6f0; border-radius: 999px; padding: 1px 7px;
}
.pmn-cat-chip:hover { border-color: #FFC49A; background: #FFF9F4; }
.pmn-cat-chip.on { background: #C24500; border-color: #C24500; color: #fff; }
.pmn-cat-chip.on i { background: rgba(255,255,255,.22); color: #fff; }

/* The till's page-turn bar sits tight under the tile grid. */
.pos-pg { margin: 10px 0 2px; }

/* ============================================================
   Partner nav dialog on iPhone. Safari refuses to scroll a
   100%-height box whose ancestor carries a backdrop-filter, so:
   real dvh heights, its own momentum scrolling, and no blur on
   iOS at all. Tiles also shrink — more doors on one screen, and
   a cut-off row at the fold says "there is more below" without
   words.
   ============================================================ */
.pnav-dialog.mud-dialog { height: 100dvh; max-height: 100dvh; overflow: hidden; }
.pnav-dialog .mud-dialog-content {
    height: 100dvh; max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    touch-action: pan-y;
    padding-bottom: 90px;
}
/* iOS only: blur off the scroll ancestor — it freezes the repaint mid-scroll. */
@supports (-webkit-touch-callout: none) {
    .pnav-dialog.mud-dialog {
        background: var(--mud-palette-surface);
        backdrop-filter: none; -webkit-backdrop-filter: none;
    }
}

.pnav-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.pnav-tile { padding: 10px 6px 9px; gap: 6px; }
.pnav-tile .ic { width: 38px; height: 38px; border-radius: 12px; }
.pnav-tile .ic svg { width: 20px; height: 20px; }
.pnav-tile .ic .em { font-size: 21px; }
.pnav-tile .ic img { border-radius: 12px; }
.pnav-tile .lb { font-size: 11.5px; }
@media (max-width: 560px) {
    .pnav-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; }
}

/* The till's page bar spans the grid as its own row, tight under the tiles. */
.pos-grid .pos-pg { grid-column: 1 / -1; margin: 2px 0 0; justify-content: center; }

/* ============================================================
   Products page: the health cards shrink to one thin scrolling
   line — chips, not tiles. The numbers still read at a glance;
   the menu itself gets the screen.
   ============================================================ */
.pmn-stats {
    display: flex; flex-wrap: nowrap; overflow-x: auto;
    gap: 8px; margin-bottom: 10px; padding-bottom: 4px;
    -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.pmn-stat { flex: 0 0 auto; gap: 7px; padding: 5px 10px; border-radius: 999px; box-shadow: none; }
.pmn-stat .ic { width: 22px; height: 22px; border-radius: 8px; font-size: 13px; }
.pmn-stat .v { font-size: 13px; }
.pmn-stat .k { font-size: 9px; letter-spacing: .3px; white-space: nowrap; }
.pmn-stat > div:last-child { display: flex; align-items: baseline; gap: 5px; }

/* ============================================================
   Our hand-made sheets (.oo-modal) sit at z 4000 — ABOVE
   MudBlazor's dialogs (1400) and snackbars, so a refusal raised
   over a sheet was invisible. Lift Mud's layers over the sheets:
   a message box or toast must always be the topmost thing.
   ============================================================ */
/* On body, not :root — MudThemeProvider re-declares these on :root at runtime,
   after this sheet; the body-level value is nearer and wins regardless. */
body {
    --mud-zindex-dialog: 4100;
    --mud-zindex-snackbar: 4300;
    --mud-zindex-tooltip: 4400;
}

/* ============================================================
   Nav dialog: the fold speaks. A fade over the last visible row
   plus a bouncing chevron pill, centred where the eye rests —
   both only while more of the menu waits below.
   ============================================================ */
.pnav-fade {
    position: fixed; left: 0; right: 0; bottom: 0; height: 84px;
    background: linear-gradient(to bottom, transparent, var(--mud-palette-surface) 78%);
    pointer-events: none; opacity: 0; transition: opacity .25s; z-index: 4;
}
.pnav-more-hint {
    position: fixed; left: 50%; bottom: 14px;
    width: 44px; height: 44px; border-radius: 999px; border: 0;
    background: #FF5A00; color: #fff; font-size: 20px; line-height: 1;
    box-shadow: 0 6px 18px rgba(255, 90, 0, .45);
    cursor: pointer; z-index: 5;
    opacity: 0; pointer-events: none; transition: opacity .25s;
    animation: pnavNudge 1.5s ease-in-out infinite;
}
.pnav-fade.show { opacity: 1; }
.pnav-more-hint.show { opacity: 1; pointer-events: auto; }
@keyframes pnavNudge {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 7px); }
}

/* The way BACK: same pill, pointing up, tucked under the sticky search row.
   Shows once the top has scrolled away; gone the moment it returns. */
.pnav-up-hint {
    position: fixed; left: 50%; top: 78px;
    width: 44px; height: 44px; border-radius: 999px; border: 0;
    background: #FF5A00; color: #fff; font-size: 20px; line-height: 1;
    box-shadow: 0 6px 18px rgba(255, 90, 0, .45);
    cursor: pointer; z-index: 5;
    opacity: 0; pointer-events: none; transition: opacity .25s;
    animation: pnavNudgeUp 1.5s ease-in-out infinite;
}
.pnav-up-hint.show { opacity: 1; pointer-events: auto; }
@keyframes pnavNudgeUp {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, -7px); }
}

/* On a monitor the scrollbar already says it all — the bouncing cues are for
   narrow/touch screens only, where nothing hints that the menu continues. */
@media (min-width: 1024px) {
    .pnav-more-hint, .pnav-up-hint, .pnav-fade { display: none !important; }
}

/* Correction, per the owner: the arrows are for the BIG monitor — on a phone the
   thumb already knows to scroll. This block outranks the one above it. */
@media (min-width: 1024px) {
    .pnav-more-hint, .pnav-up-hint, .pnav-fade { display: block !important; }
}
@media (max-width: 1023.98px) {
    .pnav-more-hint, .pnav-up-hint, .pnav-fade { display: none !important; }
}

/* ============================================================
   The partner nav: fullscreen only where the screen is small.
   From 1280px up it becomes a proper centred window — the page
   stays visible behind the scrim, and the scroll cues anchor to
   the window's own edges (its backdrop-filter makes position:
   fixed children measure against the dialog box, not the view).
   ============================================================ */
@media (min-width: 1280px) {
    .pnav-dialog.mud-dialog {
        width: min(1100px, 90vw);
        height: min(86dvh, 920px); max-height: 86dvh;
        margin: auto;
        border-radius: 26px;
        box-shadow: 0 30px 90px rgba(30, 16, 6, .30);
        overflow: hidden;
    }
    .pnav-dialog .mud-dialog-content { height: 100%; max-height: 100%; }
    .pnav-fade { border-radius: 0 0 26px 26px; }
}

/* The nav menu's exit row: quiet, centred, and unmistakably red on touch. */
.pnav-out { display: flex; justify-content: center; margin: 22px 0 6px; }
.pnav-out button {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 22px; border-radius: 999px;
    border: 1.5px solid color-mix(in srgb, #C62828 45%, transparent);
    background: transparent; font: inherit; font-size: .86rem; font-weight: 700;
    color: #C62828; cursor: pointer;
}
.pnav-out button svg { width: 18px; height: 18px; }
.pnav-out button:hover { background: #FDECEA; border-color: #C62828; }

/* ============================================================
   The "No access" card: red, immediate, unambiguous.
   ============================================================ */
.pd-box.mud-dialog { border-top: 5px solid #C62828; border-radius: 18px; }
.pd-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 8px 6px 2px; }
.pd-wrap .ic {
    width: 56px; height: 56px; border-radius: 999px;
    background: #FDECEA; display: grid; place-items: center;
}
.pd-wrap .ic svg { width: 30px; height: 30px; color: #C62828; }
.pd-wrap b { font-size: 17px; color: #C62828; }
.pd-wrap p { margin: 0; font-size: 13.5px; color: #5d564c; line-height: 1.5; }

/* ============================================================
   Nav dialog, tighter still: smaller search, smaller headers,
   smaller tiles — the whole menu on one calm screen.
   ============================================================ */
.pnav-search { padding: 8px 14px; }
.pnav-search input { font-size: .85rem; }
.pnav-search svg { width: 16px; height: 16px; }
.pnav-close { width: 34px; height: 34px; }
.pnav-sec { margin-block-start: 12px; }
.pnav-h { font-size: 11px; }
.pnav-h svg { width: 14px; height: 14px; }
.pnav-grid { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 7px; }
.pnav-tile { padding: 8px 4px 7px; gap: 4px; border-radius: 13px; }
.pnav-tile .ic { width: 30px; height: 30px; border-radius: 10px; }
.pnav-tile .ic svg { width: 16px; height: 16px; }
.pnav-tile .ic .em { font-size: 17px; }
.pnav-tile .ic img { border-radius: 10px; }
.pnav-tile .ic .bd { min-width: 16px; height: 16px; font-size: 9.5px; top: -4px; }
.pnav-tile .lb { font-size: 10.5px; }
.pnav-id .lg { width: 34px; height: 34px; }
.pnav-id b { font-size: 14px; }
.pnav-out button { padding: 7px 18px; font-size: .8rem; }
@media (max-width: 560px) {
    .pnav-grid { grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 6px; }
}

/* The avatar menu, compact: smaller face, tighter type, slimmer rows. */
.av-pick { gap: 9px; }
.av-pick .face { width: 44px; height: 44px; }
.av-pick .face .emo { font-size: 18px; }
.av-pick .face .cam svg { width: 12px; height: 12px; }
.av-pick .lbl, .av-pick small { font-size: 11px; }
.mud-menu-list .px-4.py-3 { padding: 8px 12px !important; }
.mud-menu-list .px-4.py-3 .mud-typography-subtitle2 { font-size: 12.5px; }
.mud-menu-list .px-4.py-3 .mud-typography-caption { font-size: 10.5px; }
.mud-menu-list .mud-menu-item { min-height: 34px; font-size: .82rem; }
.mud-menu-list .mud-menu-item .mud-menu-item-icon svg { width: 17px; height: 17px; }

/* ============================================================
   The whole portal, one size smaller — per the owner. Page
   headers stop shouting, header buttons slim down, list tables
   and the product cards read at the same quiet size as the
   stat chips above them.
   ============================================================ */
.pg-head { margin-bottom: 14px !important; }
.pg-head .mud-typography-h4 { font-size: 20px; font-weight: 800; }
.pg-head .mud-typography-body2 { font-size: 12px; }
.pg-head .mud-button-root { padding: 5px 14px; font-size: .78rem; }
.pg-head .mud-button-root .mud-button-icon-start svg { width: 16px; height: 16px; }

.pmn-cat-head .mud-typography-h6 { font-size: 15px; }
.pmn-cat-badge { transform: scale(.85); }
.pmn-dish-body .mud-typography-subtitle2 { font-size: 12.5px; }
.pmn-dish-body .mud-typography-body2 { font-size: 12.5px; }
.pmn-search { padding: 6px 12px; }
.pmn-search input { font-size: .85rem; }
.pmn-cat-chip { padding: 6px 12px; font-size: .76rem; }
.pmn-cat-chip i { font-size: .65rem; }

/* Every data table in the portal: tighter rows, quieter type. */
.mud-table-cell { font-size: 12.5px !important; padding: 6px 10px !important; }
.mud-table-cell .mud-typography { font-size: inherit; }
.mud-table-head .mud-table-cell { font-size: 11.5px !important; font-weight: 800; }

/* The sign-out pill is gone; the exit is a TILE now, first row under the
   search, red where every other tile is warm. */
.pnav-out { display: none; }
.pnav-exit-row { margin-block-start: 10px; }
.pnav-tile.exit .ic { background: #FDECEA; }
.pnav-tile.exit .ic svg { color: #C62828; }
.pnav-tile.exit .lb { color: #C62828; font-weight: 700; }
.pnav-tile.exit:hover { border-color: #C62828; box-shadow: 0 8px 20px rgba(198, 40, 40, .18); }

/* ============================================================
   The nav's identity row: the avatar menu's card, one size down,
   sitting right under the search bar.
   ============================================================ */
.pnav-me {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-block-start: 10px; padding: 8px 12px;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 14px;
    background: var(--mud-palette-surface);
}
.pnav-me .av-pick .face { width: 36px; height: 36px; }
.pnav-me .av-pick .face .emo { font-size: 15px; }
.pnav-me .av-pick .face .cam { transform: scale(.8); }
.pnav-me .who { display: flex; flex-direction: column; min-width: 0; margin-inline-end: auto; }
.pnav-me .who b { font-size: 12.5px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnav-me .who small { font-size: 10.5px; color: var(--mud-palette-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnav-me .acts { display: flex; gap: 6px; }
.pnav-me .acts button {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 11px; border-radius: 999px;
    border: 1px solid var(--mud-palette-lines-default); background: transparent;
    font: inherit; font-size: .74rem; font-weight: 700; color: #5d564c; cursor: pointer;
}
.pnav-me .acts button svg { width: 14px; height: 14px; }
.pnav-me .acts button:hover { border-color: #FF5A00; color: #FF5A00; }
.pnav-me .acts button.exit { color: #C62828; border-color: color-mix(in srgb, #C62828 40%, transparent); }
.pnav-me .acts button.exit:hover { background: #FDECEA; border-color: #C62828; color: #C62828; }
.pnav-me .acts button.exit svg { color: #C62828; }

/* The avatar dropdown itself, matching: small face, slim rows. */
.mud-popover .mud-list-item { min-height: 32px; }
.mud-popover .mud-list-item .mud-typography, .mud-popover .mud-menu-item { font-size: .8rem; }
.mud-popover .mud-list-item svg { width: 16px; height: 16px; }

/* ============================================================
   Product cards, one size down: narrower columns, shorter photo,
   tighter body — six of them no longer fill the whole screen.
   ============================================================ */
.pmn-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 9px; }
.pmn-dish { border-radius: 13px; }
.pmn-dish-ph { height: 64px; }
.pmn-dish-ph .em { font-size: 28px; }
.pmn-dish-body { padding: 7px 9px 5px; }
.pmn-dish-foot .mud-switch { transform: scale(.85); transform-origin: left center; }
.pmn-dish-foot .mud-icon-button { padding: 4px; }
.pmn-dish-foot .mud-icon-button svg { width: 16px; height: 16px; }

/* The identity card is a LIST now, like the avatar dropdown: the face and
   name on top, then one slim row per action, divided the way a menu divides. */
.pnav-me { display: flex; flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
.pnav-me .id { display: flex; align-items: center; gap: 10px; padding: 8px 12px; }
.pnav-me .who { margin-inline-end: 0; }
.pnav-me .row {
    display: flex; align-items: center; gap: 9px; width: 100%;
    padding: 8px 14px; border: 0; border-top: 1px solid var(--mud-palette-lines-default);
    border-radius: 0; background: transparent; text-align: start;
    font: inherit; font-size: .78rem; font-weight: 700; color: #5d564c; cursor: pointer;
}
.pnav-me .row svg { width: 15px; height: 15px; color: #8a8175; }
.pnav-me .row:hover { background: #FFF6EE; color: #C24500; }
.pnav-me .row:hover svg { color: #C24500; }
.pnav-me .row.exit { color: #C62828; }
.pnav-me .row.exit svg { color: #C62828; }
.pnav-me .row.exit:hover { background: #FDECEA; color: #C62828; }

/* Back to ONE ROW, per the owner — face and name on the left, pill actions on
   the right — now sitting at the FOOT of the menu instead of under the search. */
.pnav-me { flex-direction: row; align-items: center; gap: 10px; padding: 6px 12px; margin-block-start: 18px; overflow: visible; }
.pnav-me .id { padding: 0; flex: 1; min-width: 0; }
.pnav-me .row {
    width: auto; border-top: 0; text-align: center;
    border: 1px solid var(--mud-palette-lines-default); border-radius: 999px;
    padding: 5px 12px; font-size: .74rem;
}
.pnav-me .row.exit { border-color: color-mix(in srgb, #C62828 40%, transparent); }
@media (max-width: 560px) {
    .pnav-me { flex-wrap: wrap; }
    .pnav-me .id { flex-basis: 100%; }
}

/* The windowed nav sizes to its CONTENT now — no fixed height, no empty
   ballroom under a short menu. It only grows to the cap, then scrolls. */
@media (min-width: 1280px) {
    .pnav-dialog.mud-dialog { height: auto; min-height: 0; }
    .pnav-dialog .mud-dialog-content { height: auto; max-height: min(86dvh, 920px); padding-bottom: 22px; }
}

/* ============================================================
   The nav must OPEN like a switch. The staggered section entrance
   (each family .03–.27s late) read as slowness, and the 18px
   backdrop blur is the most expensive paint a weak device knows.
   Both gone: solid ground, instant rows.
   ============================================================ */
.pnav-dialog.mud-dialog {
    background: var(--mud-palette-surface);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
.pnav-sec,
.pnav-sec:nth-child(2), .pnav-sec:nth-child(3), .pnav-sec:nth-child(4),
.pnav-sec:nth-child(5), .pnav-sec:nth-child(6), .pnav-sec:nth-child(7),
.pnav-sec:nth-child(8) {
    animation: none;
    animation-delay: 0s;
}

/* Even breathing on every side of the windowed nav: the content fills the
   window (no off-centre 1024px cap inside an 1100px box), the padding is the
   same left and right, and the scrollbar gets a reserved gutter on BOTH edges
   so it stops stealing from one side. */
@media (min-width: 1280px) {
    .pnav-dialog .mud-dialog-content {
        max-width: none;
        padding: 20px 22px 22px;
        scrollbar-gutter: stable both-edges;
    }
}

/* POS tiles, one size down: narrower columns, smaller art, quieter type —
   a page of twenty fits without filling the screen. */
.pos-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 7px; }
.pos-tile { padding: 8px 5px 7px; gap: 3px; border-radius: 12px; }
.pos-tile .pt-emoji { font-size: 21px; }
.pos-tile .pt-img { width: 40px; height: 40px; border-radius: 10px; }
.pos-tile .pt-name { font-size: 10.5px; }
.pos-tile .pt-price { font-size: 10.5px; }
.pos-tile .pt-badge { transform: scale(.85); }
.pos-tile .pt-cap { font-size: 9.5px; }
.pos.tablet .pos-tile .pt-emoji { font-size: 30px; }
.pos.tablet .pos-tile .pt-img { width: 56px; height: 56px; border-radius: 12px; }

/* Tablet POS, the same size down: the finger still lands, the screen breathes. */
.pos.tablet .pos-grid { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pos.tablet .pos-tile { padding: 10px 6px 9px; border-radius: 14px; gap: 4px; }
.pos.tablet .pos-tile .pt-emoji { font-size: 26px; }
.pos.tablet .pos-tile .pt-img { width: 48px; height: 48px; border-radius: 12px; }
.pos.tablet .pos-tile .pt-name { font-size: 11.5px; }
.pos.tablet .pos-tile .pt-price { font-size: 11px; }
.pos.tablet .pos-tile .pt-badge { min-width: 22px; height: 22px; font-size: 12px; }
.pos.tablet .pos-tile .pt-minus { width: 24px; height: 24px; font-size: 16px; }

/* ============================================================
   The two top bars, one size down. The APP BAR: slimmer height,
   smaller brand, search pill, chips, switch and avatar. The POS
   BAR: smaller mode buttons, customer button, code box.
   ============================================================ */
.mf-appbar.mud-appbar .mud-toolbar { min-height: 46px; height: 46px; }
.mf-appbar .mud-icon-button { padding: 6px; }
.mf-appbar .mud-icon-button svg { width: 18px; height: 18px; }
.mf-brand-mark { width: 30px !important; height: 30px !important; border-radius: 10px; }
.mf-brand-mark img { border-radius: 10px; }
.mf-brand-name { font-size: 13.5px; }
.cp-launch { padding: 5px 12px !important; font-size: .74rem !important; border-radius: 999px; }
.cp-launch svg { width: 14px; height: 14px; }
.oo-spark { transform: scale(.82); }
.mf-appbar .mud-switch { transform: scale(.82); }
.mf-appbar .mud-switch .mud-switch-label, .mf-appbar .mud-input-control-boolean-input + * { font-size: .8rem; }
.mf-appbar .mud-avatar { width: 30px; height: 30px; font-size: .85rem; }
.mf-full-btn { transform: scale(.82); }

.pos-top { gap: 7px; margin-bottom: 7px; }
.pos-mode button { padding: 5px 10px; font-size: 11px; border-radius: 10px; }
.pos-custbtn { padding: 5px 10px !important; font-size: 11px !important; border-radius: 10px !important; }
.pos-code { padding: 4px 10px; min-width: 140px; border-radius: 10px; }
.pos-code input { font-size: 11.5px; }
.pos-code .ic { font-size: .78rem; }
.pos-top .mud-icon-button { padding: 5px; }
.pos-top .mud-icon-button svg { width: 17px; height: 17px; }
.pos-invno { font-size: 11px; }
.pos-cats button { padding: 5px 12px; font-size: 11.5px; }

/* Every round button, a size down: the app bar's circle chips, the page-turn
   circles, and the scroll-hint pills. */
.mf-appbar .mud-icon-button { width: 30px; height: 30px; padding: 4px; }
.mf-appbar .mud-icon-button svg { width: 16px; height: 16px; }
.mf-appbar .mud-avatar { width: 27px; height: 27px; font-size: .78rem; }
.oo-spark { transform: scale(.7); margin: -4px; }
.mf-full-btn { transform: scale(.7); margin: -4px; }
.mf-brand-mark { width: 27px !important; height: 27px !important; }
.pg-bar button { width: 28px; height: 28px; font-size: 15px; }
.pg-bar .pg-info { font-size: 11px; }
.pnav-more-hint, .pnav-up-hint { width: 34px; height: 34px; font-size: 16px; }
.pnav-close { width: 30px; height: 30px; font-size: 13px; }

/* Smaller still, per the owner: the circle chips come down to 24px. */
.mf-appbar .mud-icon-button { width: 24px; height: 24px; padding: 3px; }
.mf-appbar .mud-icon-button svg { width: 13px; height: 13px; }
.mf-appbar .mud-avatar { width: 23px; height: 23px; font-size: .68rem; }
.oo-spark { transform: scale(.58); margin: -7px; }
.mf-full-btn { transform: scale(.58); margin: -7px; }
.mf-brand-mark { width: 23px !important; height: 23px !important; border-radius: 8px; }
.mf-brand-mark img { border-radius: 8px; }
.mf-brand-name { font-size: 12px; }
.mf-appbar.mud-appbar .mud-toolbar { min-height: 38px; height: 38px; }
.mf-appbar .mud-switch { transform: scale(.68); margin-inline: -6px; }

/* Down again: the POS mode buttons and category pills at pocket size. */
.pos-mode button { padding: 3px 8px; font-size: 10px; border-radius: 8px; border-width: 1px; }
.pos-custbtn { padding: 3px 8px !important; font-size: 10px !important; border-radius: 8px !important; }
.pos-cats button { padding: 3px 9px !important; font-size: 10.5px !important; }
.pos-cats { gap: 5px; }
.pos-cat-arrow { transform: scale(.75); }
.pos-code { padding: 3px 8px; min-width: 120px; border-radius: 8px; }
.pos-code input { font-size: 10.5px; }
.pos-invno { font-size: 10px; }

/* The tablet's pills follow suit. */
.pos.tablet .pos-cats button { font-size: .72rem !important; padding: 4px 11px !important; }

/* And the chips themselves, decisively: 24px circles, 13px glyphs. */
.mf-appbar .mud-icon-button { width: 24px !important; height: 24px !important; padding: 3px !important; }
.mf-appbar .mud-icon-button .mud-icon-root { font-size: 13px; width: 13px; height: 13px; }
.mf-appbar .mud-icon-button svg { width: 13px !important; height: 13px !important; }

/* True circles: MudBlazor gives icon buttons a MIN-width that kept them 40x24
   ovals. Clamp every side to 24, and take the mode buttons down one more. */
.mf-appbar .mud-icon-button {
    min-width: 24px !important; max-width: 24px !important;
    min-height: 24px !important; max-height: 24px !important;
}
.mf-appbar .mud-switch { transform: scale(.58); margin-inline: -9px; }
.pos-mode button { padding: 2px 7px; font-size: 9.5px; }
.pos-custbtn { padding: 2px 7px !important; font-size: 9.5px !important; }

/* The switch uses MudBlazor's own Small size now — no scale hacks. And the POS
   mode buttons get a hard height so the emoji can't inflate them. */
.mf-appbar .mud-switch { transform: none; margin-inline: 0; }
.pos-mode button { padding: 2px 8px !important; font-size: 9.5px !important; line-height: 1.2 !important; height: 24px; min-height: 0 !important; }
.pos-custbtn { height: 24px !important; min-height: 0 !important; line-height: 1.2 !important; }
.pos-mode { margin-bottom: 6px; }

/* The avatar dropdown, genuinely small: 32px face, 30px rows, quiet type.
   MudBlazor's own 48px row rule needed outranking. */
.mud-popover .mud-menu-item {
    min-height: 30px !important; padding-top: 4px !important; padding-bottom: 4px !important;
    font-size: .78rem !important;
}
.mud-popover .mud-menu-item svg { width: 15px !important; height: 15px !important; }
.mud-popover .av-pick { gap: 8px; font-size: 11px; }
.mud-popover .av-pick .face { width: 32px !important; height: 32px !important; }
.mud-popover .av-pick .face .emo { font-size: 13px; }
.mud-popover .av-pick .face .cam { transform: scale(.7); }
.mud-popover .av-pick button:not(.face), .mud-popover .av-pick .lbl { font-size: 11px !important; }
.mud-popover .mud-typography-subtitle2 { font-size: 11.5px !important; }
.mud-popover .mud-typography-caption { font-size: 10px !important; }
.mud-popover .px-4.py-3 { padding: 7px 10px !important; }

/* ============================================================
   The ticket FAB turns GREEN — money-in colour — and one size
   down. The ticket panel itself stops shouting: smaller empty
   note, totals, grand line and pay buttons, on desktop and
   tablet alike.
   ============================================================ */
.pos-tkt-fab {
    background: linear-gradient(135deg, #23B45B, #0E9F4E);
    box-shadow: 0 8px 22px rgba(14, 159, 78, .40);
    padding: 9px 16px; font-size: .85rem; gap: 8px;
}
.pos-tkt-fab .c { color: #0E9F4E; min-width: 20px; height: 20px; font-size: .7rem; }

.pos-empty { font-size: 11.5px; padding: 12px 6px; }
.pos-totals { font-size: 11.5px; gap: 2px; margin-bottom: 8px; }
.pos-totals .grand { font-size: 14px; }
.pos-pay-mode button { padding: 5px 8px; font-size: 11px; }
.pos.tablet .pos-ticket { width: 320px; padding: 12px; }
.pos.tablet .pos-line { font-size: 12.5px; padding: 7px 9px; border-radius: 10px; }
.pos.tablet .pos-line .pm { width: 26px; height: 26px; font-size: 14px; border-radius: 8px; }
.pos.tablet .pos-empty { font-size: 12px; }
.pos.tablet .pos-totals { font-size: 12.5px; }
.pos.tablet .pos-totals .grand { font-size: 15px; }
.pos.tablet .pos-pay-mode button { padding: 6px 8px; font-size: 12px; }
.pos.tablet .pos-pay { min-height: 44px; font-size: 13.5px !important; }

/* The dark Total bar and pay buttons had late !important rules of their own —
   outranked here: the whole ticket reads at pocket size now. */
.pos-totals .grand { padding: 6px 12px !important; border-radius: 10px !important; margin-top: 3px; }
.pos-totals .grand span { font-size: .72rem !important; }
.pos-totals .grand b { font-size: .95rem !important; }
.pos-pay-mode button { padding: 5px 6px !important; font-size: 10.5px !important; border-radius: 9px !important; }
.pos.tablet .pos-pay-mode button { padding: 5px 6px !important; font-size: 11px !important; }
.pos.tablet .pos-totals .grand span { font-size: .78rem !important; }
.pos.tablet .pos-totals .grand b { font-size: 1rem !important; }
.pos-empty { font-size: 10.5px !important; padding: 8px 6px !important; }
.pos-totals > div:not(.grand) { font-size: 10.5px; }

/* The till's table picker, pocket size: narrower table cards, smaller name
   and seat count, slimmer salon headers and legend. */
.sal-grid { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)) !important; gap: 6px !important; }
.sal-tbl { padding: 6px 5px 5px !important; border-radius: 10px !important; gap: 1px !important; }
.sal-tbl .tic svg { width: 12px !important; height: 12px !important; }
.sal-tbl b, .sal-tbl .nm { font-size: 11px !important; }
.sal-tbl small, .sal-tbl .plate { font-size: 9.5px !important; }
.sal-head { gap: 6px !important; }
.sal-name { font-size: 12px !important; }
.sal-meta { font-size: 10px !important; }
.oo-fp-legend { font-size: 10px !important; gap: 10px !important; }
.oo-fp-legend .dot { transform: scale(.8); }
.oo-fp-hint { font-size: 10px !important; }

/* Product cards, another size down: 110px columns, short photo, 11px type. */
.pmn-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)) !important; gap: 7px !important; }
.pmn-dish { border-radius: 11px; }
.pmn-dish-ph { height: 46px !important; }
.pmn-dish-ph .em { font-size: 21px; }
.pmn-dish-body { padding: 5px 7px 3px !important; }
.pmn-dish-body .mud-typography-subtitle2 { font-size: 11px !important; line-height: 1.15 !important; }
.pmn-dish-body .mud-typography-body2 { font-size: 10.5px !important; }
.pmn-dish-foot .mud-switch { transform: scale(.72); margin-inline-start: -6px; }
.pmn-dish-foot .mud-icon-button { padding: 3px !important; }
.pmn-dish-foot .mud-icon-button svg { width: 14px !important; height: 14px !important; }
.pmn-star { transform: scale(.8); }
.pmn-review { font-size: 9px !important; }

/* Cuisine chips must FADE, not chop a letter in half: ellipsis inside the pill,
   never wider than its card. Applies to the browse cards and the store page tag. */
.oo-cuis-chip { max-width: 100%; }
.oo-cuis-chip .mud-chip-content {
    display: block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rtp-hero .tag, .rest-hero .tag {
    max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* The top bar's content stops hugging the screen edges: it lines up with the
   page container — capped and centred on wide monitors, padded on all. */
.mf-appbar.mud-appbar .mud-toolbar {
    max-width: 1536px;
    margin-inline: auto;
    width: 100%;
    padding-inline: 24px;
}
@media (max-width: 700px) {
    .mf-appbar.mud-appbar .mud-toolbar { padding-inline: 12px; }
}

/* More breathing room at the bar's edges, per the owner. */
.mf-appbar.mud-appbar .mud-toolbar { padding-inline: 48px; }
@media (max-width: 700px) {
    .mf-appbar.mud-appbar .mud-toolbar { padding-inline: 16px; }
}

/* The CUSTOMER bar breathes: the partner till wanted a 38px sliver, but the
   shop-front deserves height — real padding above and below the row. */
.mf-appbar-client.mud-appbar .mud-toolbar {
    min-height: 62px; height: auto;
    padding-block: 10px;
}
.mf-appbar-client .mud-icon-button {
    width: 34px !important; height: 34px !important; min-width: 34px !important; max-width: 34px !important;
    min-height: 34px !important; max-height: 34px !important; padding: 6px !important;
}
.mf-appbar-client .mud-icon-button svg { width: 17px !important; height: 17px !important; }
.mf-appbar-client .mud-avatar { width: 32px; height: 32px; font-size: .85rem; }

/* Hero tags that are LINKS (map, phone, instagram) dress exactly like their
   span siblings — only the cursor and a warm hover say they open something. */
.oo-hero-plate a.tag { text-decoration: none; color: inherit; cursor: pointer; }
.oo-hero-plate a.tag:hover { border-color: #FF5A00; color: #C24500; }

/* "Show on map" is a BUTTON and looks like one: orange outline, orange text —
   nothing else in the tag row wears the brand colour. */
.oo-hero-plate a.tag.map-btn {
    border: 1.5px solid #FF5A00; color: #D14A00; font-weight: 700;
    background: #FFF6EE;
}
.oo-hero-plate a.tag.map-btn:hover { background: #FF5A00; color: #fff; }
.oo-hero-plate a.tag.map-btn:hover svg { color: #fff; }

/* ============================================================
   The table page's header, v2: small logo BESIDE the name, the
   table chip on the same line-block, and a row of glassy action
   pills — Call, Location, Share — on the warm gradient.
   ============================================================ */
.qm-hero.v2 { display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 14px; text-align: start; }
.qm-hero.v2 .id { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; }
.qm-hero.v2 .logo {
    width: 46px !important; height: 46px !important; border-radius: 13px !important;
    margin: 0 !important; font-size: 22px !important; flex: none;
    display: grid; place-items: center; overflow: hidden; background: #fff;
}
.qm-hero.v2 .logo img { width: 100%; height: 100%; object-fit: cover; }
.qm-hero.v2 .who { display: flex; flex-direction: column; min-width: 0; margin-inline-end: auto; }
.qm-hero.v2 .store { font-size: 18px !important; line-height: 1.2; margin: 0 !important; }
.qm-hero.v2 .area { font-size: 11.5px !important; opacity: .92; margin: 0 !important; }
.qm-hero.v2 .chip { margin: 0 !important; font-size: 11.5px !important; padding: 5px 11px !important; }
.qm-hero.v2 .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.qm-hero.v2 .act {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .16); color: #fff; text-decoration: none;
    font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer;
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.qm-hero.v2 .act svg { width: 15px; height: 15px; color: #fff; }
.qm-hero.v2 .act:hover, .qm-hero.v2 .act:active { background: #fff; color: #D14A00; }
.qm-hero.v2 .act:hover svg, .qm-hero.v2 .act:active svg { color: #D14A00; }

/* No orange slab, per the owner: the table header is a clean white card now —
   dark text, quiet border, orange only in the small accents. */
.qm-hero.v2 {
    background: var(--mud-palette-surface) !important;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 18px;
    box-shadow: 0 6px 18px rgba(36, 31, 27, .06);
    color: var(--mud-palette-text-primary) !important;
}
.qm-hero.v2 .store { color: var(--mud-palette-text-primary) !important; }
.qm-hero.v2 .area { color: var(--mud-palette-text-secondary) !important; opacity: 1; }
.qm-hero.v2 .logo { border: 1px solid var(--mud-palette-lines-default); }
.qm-hero.v2 .chip {
    background: #FFF1E8 !important; color: #C24500 !important;
    border: 1px solid #FFD9C0 !important;
}
.qm-hero.v2 .act {
    border: 1.5px solid var(--mud-palette-lines-default);
    background: transparent; color: #3c352c;
    backdrop-filter: none; -webkit-backdrop-filter: none;
}
.qm-hero.v2 .act svg { color: #FF5A00; }
.qm-hero.v2 .act:hover, .qm-hero.v2 .act:active { background: #FFF6EE; border-color: #FF5A00; color: #C24500; }
.qm-hero.v2 .act:hover svg, .qm-hero.v2 .act:active svg { color: #C24500; }

/* The action row grows up: equal tiles, each an orange-tinted icon disc over a
   quiet label — the pattern every polished app uses for call/route/share. */
.qm-hero.v2 .acts { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.qm-hero.v2 .act {
    flex-direction: column; justify-content: center; gap: 5px;
    padding: 10px 6px 8px; border-radius: 14px;
    font-size: .72rem; font-weight: 700; letter-spacing: .1px;
    text-align: center;
}
.qm-hero.v2 .act .i {
    width: 34px; height: 34px; border-radius: 999px;
    background: #FFF1E8; display: grid; place-items: center;
}
.qm-hero.v2 .act .i svg { width: 17px; height: 17px; color: #FF5A00; }
.qm-hero.v2 .act:hover .i, .qm-hero.v2 .act:active .i { background: #FF5A00; }
.qm-hero.v2 .act:hover .i svg, .qm-hero.v2 .act:active .i svg { color: #fff; }

/* ============================================================
   Table page, redesigned from zero: the hero card is GONE. The
   whole header is one 44px utility row — a dark table badge, the
   area as a quiet map link, then two ghost icon buttons (call,
   share) on the right. The menu starts immediately after.
   ============================================================ */
.qm-hero, .qm-hero.v2 { display: none !important; }
.qm-topbar {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 2px 10px; margin-bottom: 2px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.qm-topbar .tbl {
    background: #241c15; color: #fff;
    padding: 6px 13px; border-radius: 999px;
    font-size: 12px; font-weight: 800; letter-spacing: .2px; white-space: nowrap;
}
.qm-topbar .loc {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--mud-palette-text-secondary); text-decoration: none;
    font-size: 12.5px; font-weight: 600; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qm-topbar .loc svg { width: 14px; height: 14px; color: #FF5A00; flex: none; }
.qm-topbar .loc:hover { color: #C24500; }
.qm-topbar .sp { flex: 1; }
.qm-topbar .ib {
    width: 36px; height: 36px; border-radius: 999px; flex: none;
    display: grid; place-items: center;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface); cursor: pointer; text-decoration: none;
}
.qm-topbar .ib svg { width: 16px; height: 16px; color: #3c352c; }
.qm-topbar .ib:hover, .qm-topbar .ib:active { border-color: #FF5A00; background: #FFF6EE; }
.qm-topbar .ib:hover svg, .qm-topbar .ib:active svg { color: #D14A00; }

/* ============================================================
   The guest's invoice sheet (/tab-invoice/...): plain, printable,
   black on white — this exact page becomes the PDF.
   ============================================================ */
.tiv-doc { max-width: 640px; margin: 24px auto; padding: 28px 30px; background: #fff; color: #1c1712; }
.tiv-doc .head { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 20px; text-align: center; }
.tiv-doc .head .logo { width: 62px; height: 62px; border-radius: 14px; object-fit: cover; }
.tiv-doc .head .store { font-size: 20px; font-weight: 800; }
.tiv-doc .head .meta { font-size: 12px; color: #6b6257; }
.tiv-doc .lines { width: 100%; border-collapse: collapse; font-size: 13px; }
.tiv-doc .lines th { text-align: center; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #6b6257; border-bottom: 1.5px solid #1c1712; padding: 6px 8px; }
.tiv-doc .lines th.n, .tiv-doc .lines td.n { text-align: start; }
.tiv-doc .lines td { padding: 7px 8px; border-bottom: 1px solid #eee5da; text-align: center; }
.tiv-doc .sums { margin-top: 14px; display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.tiv-doc .sums > div { display: flex; justify-content: space-between; }
.tiv-doc .sums span { color: #6b6257; }
.tiv-doc .sums .grand { border-top: 1.5px solid #1c1712; margin-top: 4px; padding-top: 7px; font-size: 15px; }
.tiv-doc .sums .grand span { color: #1c1712; font-weight: 800; }
.tiv-doc .foot { display: block; text-align: center; margin-top: 26px; color: #a79c8e; font-size: 10.5px; }
/* On paper: only the sheet, nothing of the app around it. */
@media print {
    body:has(.tiv-doc) * { visibility: hidden; }
    body:has(.tiv-doc) .tiv-doc, body:has(.tiv-doc) .tiv-doc * { visibility: visible; }
    body:has(.tiv-doc) .tiv-doc { position: absolute; inset: 0; margin: 0; max-width: none; }
}

/* The guest's slip page: the receipt centred on a quiet page, print-clean.
   (The .tiv-doc sheet is retired — the slip IS the invoice now.) */
.tiv-slip { display: flex; justify-content: center; padding: 26px 12px 40px; background: #f4efe8; min-height: 100dvh; }
.tiv-slip .rcpt { box-shadow: 0 10px 30px rgba(36, 31, 27, .14); }
@media print {
    body:has(.tiv-slip) * { visibility: hidden; }
    body:has(.tiv-slip) .tiv-slip, body:has(.tiv-slip) .tiv-slip * { visibility: visible; }
    body:has(.tiv-slip) .tiv-slip { position: absolute; inset: 0; padding: 0; background: #fff; min-height: 0; }
    body:has(.tiv-slip) .tiv-slip .rcpt { box-shadow: none; }
}

/* ---------- Surveys: the store asks, the guests tick ---------- */
.sv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.sv-card { background: #fff; border: 1px solid #ece6df; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.sv-card.on { border-color: #b8e0c2; }
.sv-card .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .9rem; }
.sv-card .state { font-size: .68rem; padding: 1px 8px; border-radius: 999px; background: #f1ece6; color: #7a7068; }
.sv-card.on .state { background: #e3f5e8; color: #1f7a3a; }
.sv-card small { color: #8a8079; font-size: .72rem; }
.sv-card .acts { display: flex; align-items: center; gap: 2px; margin-top: 4px; }
.sv-sheet { max-width: 640px; }
.sv-q { border: 1px solid #ece6df; border-radius: 10px; padding: 8px 10px; margin-top: 8px; background: #fbf9f6; }
.sv-q-head { display: flex; align-items: center; gap: 6px; }
.sv-q-head .n { width: 20px; height: 20px; border-radius: 50%; background: #ff7a1a; color: #fff; font-size: .7rem; font-weight: 700; display: grid; place-items: center; flex: none; }
.sv-opts { padding: 4px 0 0 26px; }
.sv-opt { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; }
.sv-opt .dot { color: #b0a69d; font-size: .8rem; width: 14px; }
.sv-opt input { flex: 1; border: 1px solid #e3ddd6; border-radius: 7px; padding: 4px 8px; font: inherit; font-size: .82rem; background: #fff; }
.sv-opt .x { border: 0; background: none; color: #b0a69d; cursor: pointer; font-size: .75rem; }
.sv-opt .x:hover { color: #d3302f; }
.sv-opt-acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sv-opt-acts .add, .sv-addq { border: 1px dashed #d9d1c8; background: none; border-radius: 8px; padding: 3px 10px; font: inherit; font-size: .76rem; color: #ff7a1a; cursor: pointer; }
.sv-addq { width: 100%; margin-top: 8px; padding: 7px; }
.sv-res { border-top: 1px solid #ece6df; padding: 8px 0; font-size: .85rem; }
.sv-res .bar { display: grid; grid-template-columns: minmax(80px, 1fr) 2fr auto; gap: 8px; align-items: center; font-size: .78rem; margin-top: 4px; }
.sv-res .track { height: 8px; background: #f1ece6; border-radius: 999px; overflow: hidden; }
.sv-res .fill { display: block; height: 100%; background: #ff7a1a; border-radius: 999px; }
.sv-res .num { color: #7a7068; white-space: nowrap; }
.sv-res .cmt { display: flex; flex-direction: column; margin-top: 6px; padding: 6px 8px; background: #fbf9f6; border-radius: 8px; }
.sv-res .cmt small { color: #a09689; font-size: .68rem; }
/* the guest's side */
.sv-pub { min-height: 100dvh; background: #f4efe8; padding: 18px 12px 40px; display: flex; justify-content: center; align-items: flex-start; }
.sv-pub-card { width: 100%; max-width: 520px; background: #fff; border-radius: 18px; padding: 18px; box-shadow: 0 10px 30px rgba(36, 31, 27, .10); }
.sv-pub-card.center { text-align: center; padding: 40px 18px; }
.sv-pub-card .big { font-size: 2.6rem; display: block; }
.sv-pub-card h2 { margin: 8px 0 4px; font-size: 1.15rem; }
.sv-pub-card p { color: #7a7068; margin: 0; }
.sv-pub-card .brand { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.sv-pub-card .brand img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; }
.sv-pub-card .brand small { color: #a09689; font-size: .72rem; }
.sv-pub-card .brand h2 { margin: 0; }
.sv-pub-q { margin-top: 16px; }
.sv-pub-q > b { display: flex; align-items: center; gap: 8px; font-size: .95rem; }
.sv-pub-q > small { display: block; color: #a09689; font-size: .72rem; margin: 2px 0 0 28px; }
.sv-pub-q .n { width: 20px; height: 20px; border-radius: 50%; background: #ff7a1a; color: #fff; font-size: .7rem; display: grid; place-items: center; flex: none; }
.sv-pub-q .opts { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.sv-pub-q .opt { display: flex; align-items: center; gap: 10px; text-align: start; border: 1.5px solid #e6dfd7; background: #fff; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: .9rem; cursor: pointer; transition: border-color .12s, background .12s; }
.sv-pub-q .opt .mark { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #cfc6bc; display: grid; place-items: center; font-size: .7rem; flex: none; }
.sv-pub-q .opt.multi .mark { border-radius: 5px; }
.sv-pub-q .opt.on { border-color: #ff7a1a; background: #fff4ec; }
.sv-pub-q .opt.on .mark { background: #ff7a1a; border-color: #ff7a1a; color: #fff; }
.sv-pub-q textarea { width: 100%; margin-top: 8px; border: 1.5px solid #e6dfd7; border-radius: 12px; padding: 10px 12px; font: inherit; font-size: .9rem; resize: vertical; }
.sv-pub .mud-button-root { margin-top: 16px; border-radius: 12px; }
.sv-back { display: inline-block; margin-top: 14px; color: #ff7a1a; font-weight: 600; text-decoration: none; }

/* ---------- App-bar bell badge, pocket size ---------- */
/* The chips shrank to 24px circles but the badge stayed at 18px + a 2px ring: it sat
   ON the bell and lost its top edge under the toolbar. A 14px dot in the top-end corner,
   thin ring, nothing clipped — .nb-bell and the toolbar must let it overflow. */
.nb-bell { overflow: visible; }
.mf-appbar.mud-appbar .mud-toolbar { overflow: visible; }
.nb-bell .nb-count2, .nb-bell .nb-count {
    top: -4px !important;
    inset-inline-end: -4px !important;
    height: 14px !important;
    min-width: 14px !important;
    width: auto !important;
    padding: 0 3px !important;
    border-radius: 7px !important;
    border-width: 1.5px !important;
    font-size: 8.5px !important;
    line-height: 11px !important;
    box-shadow: 0 1px 3px rgba(180, 30, 20, .3) !important;
}

/* ---------- Surveys: editor footer + the results report ---------- */
.sv-q-acts { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.sv-q-acts .sv-addq { margin-top: 0; flex: 1; }
.sv-clear { border: 0; background: none; font: inherit; font-size: .74rem; color: #b0a69d; cursor: pointer; white-space: nowrap; }
.sv-clear:hover { color: #d3302f; }
.svr-pick { max-width: 420px; margin-bottom: 12px; }
.svr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.svr-card { background: #fff; border: 1px solid #ece6df; border-radius: 12px; padding: 10px 12px; font-size: .85rem; }
.svr-card.wide { grid-column: 1 / -1; }
.svr-card > b { display: block; }
.svr-card > small { display: block; color: #8a8079; font-size: .7rem; margin-bottom: 6px; }
.svr-card .bar { display: grid; grid-template-columns: minmax(80px, 1fr) 2fr auto; gap: 8px; align-items: center; font-size: .78rem; margin-top: 4px; }
.svr-card .track { height: 8px; background: #f1ece6; border-radius: 999px; overflow: hidden; }
.svr-card .fill { display: block; height: 100%; background: #ff7a1a; border-radius: 999px; }
.svr-card .num { color: #7a7068; white-space: nowrap; }
.svr-card .cmt { display: flex; flex-direction: column; margin-top: 6px; padding: 6px 8px; background: #fbf9f6; border-radius: 8px; }
.svr-card .cmt small { color: #a09689; font-size: .68rem; }

/* ---------- Partner app bar: one notch back up (Majed: "more big ... but not too much") ---------- */
/* Only the partner wears .mf-appbar-partner; admin/delivery/client keep the pocket size. */
.mf-appbar-partner.mud-appbar .mud-toolbar { min-height: 44px !important; height: 44px !important; gap: 8px; }
.mf-appbar-partner .mud-icon-button {
    width: 30px !important; height: 30px !important; padding: 4px !important;
    min-width: 30px !important; max-width: 30px !important; min-height: 30px !important; max-height: 30px !important;
}
.mf-appbar-partner .mud-icon-button .mud-icon-root { font-size: 17px; width: 17px; height: 17px; }
.mf-appbar-partner .mud-icon-button svg { width: 17px !important; height: 17px !important; }
.mf-appbar-partner .mud-avatar { width: 29px; height: 29px; font-size: .82rem; }
.mf-appbar-partner .mf-brand-mark { width: 29px !important; height: 29px !important; border-radius: 9px; }
.mf-appbar-partner .mf-brand-mark img { border-radius: 9px; }
.mf-appbar-partner .mf-brand-name { font-size: 14px; }
.mf-appbar-partner .cp-launch { padding: 6px 14px !important; font-size: .8rem !important; }
.mf-appbar-partner .cp-launch svg { width: 16px; height: 16px; }
.mf-appbar-partner .oo-spark { transform: scale(.72); margin: -4px; }
.mf-appbar-partner .mf-full-btn { transform: scale(.72); margin: -4px; }
.mf-appbar-partner .nb-bell .nb-count2, .mf-appbar-partner .nb-bell .nb-count { top: -3px !important; inset-inline-end: -3px !important; height: 15px !important; min-width: 15px !important; font-size: 9px !important; line-height: 12px !important; }

/* ---------- Partner app-bar dropdowns (avatar menu, business switcher): smaller type ---------- */
/* MudMenu renders its list in a body-level popover, so the bar's own rules never reach it;
   ListClass="mf-me-list" tags the list itself. Majed: "this font size is big". */
.mf-me-list .mud-menu-item, .mf-me-list .mud-list-item { min-height: 28px !important; padding: 3px 12px !important; font-size: .74rem !important; }
.mf-me-list .mud-menu-item .mud-typography, .mf-me-list .mud-list-item .mud-typography { font-size: .74rem !important; }
.mf-me-list .mud-menu-item .mud-icon-root, .mf-me-list .mud-list-item .mud-icon-root, .mf-me-list .mud-menu-item svg { font-size: 15px; width: 15px !important; height: 15px !important; margin-inline-end: 8px; }
.mf-me-list .mud-list-item-icon { min-width: 24px; }
.mf-me-list .oo-switch-row .lg { width: 20px; height: 20px; }
.mf-me-list .oo-switch-row .em { font-size: 15px; width: 22px; }
.mf-me-list .mud-divider { margin: 3px 0; }
.mf-me-list .mf-me-head, .mf-me-list .mf-me-head * { font-size: .72rem; }

/* ---------- Guest survey v2: chips, progress, a real footer ---------- */
/* v1 stacked every answer as a full-width centred bar — a 7-question survey became a
   wall. v2: numbered question blocks, answers as compact pills that wrap, a thin
   progress line under the title, and one calm send button. Scoped to .sv-pub.v2. */
.sv-pub.v2 { background: #f6f2ec; padding: 14px 10px 40px; }
.sv-pub.v2 .sv-pub-card { max-width: 560px; padding: 0; border-radius: 20px; overflow: hidden; box-shadow: 0 8px 28px rgba(36, 31, 27, .08); }
.sv-pub.v2 .sv-pub-card.center { padding: 44px 22px; }
.sv-pub.v2 .tick { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 6px; border-radius: 50%; background: #e3f5e8; color: #1f7a3a; font-size: 30px; font-weight: 700; }
.sv-pub.v2 .sv-head { display: flex; align-items: center; gap: 14px; padding: 20px 22px 14px; }
.sv-pub.v2 .sv-head img { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; background: #fff; border: 1px solid #eee6dc; flex: none; }
.sv-pub.v2 .sv-head small { display: block; color: #a09689; font-size: .74rem; letter-spacing: .02em; text-transform: uppercase; }
.sv-pub.v2 .sv-head h1 { margin: 2px 0 0; font-size: 1.25rem; line-height: 1.25; letter-spacing: -.01em; }
.sv-pub.v2 .sv-progress { height: 4px; background: #f1ece6; margin: 0 22px; border-radius: 999px; overflow: hidden; }
.sv-pub.v2 .sv-progress span { display: block; height: 100%; background: linear-gradient(90deg, #ff7a1a, #ff9a4d); border-radius: 999px; transition: width .25s ease; }
.sv-pub.v2 .sv-progress-lb { display: block; padding: 6px 22px 0; color: #a09689; font-size: .72rem; }
.sv-pub.v2 .sv-qa { padding: 16px 22px 4px; border-top: 1px solid #f3eee8; margin-top: 12px; }
.sv-pub.v2 .sv-qa:first-of-type { border-top: 0; margin-top: 4px; }
.sv-pub.v2 .qh { display: flex; align-items: flex-start; gap: 10px; }
.sv-pub.v2 .qh .n { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #fff1e6; color: #ff7a1a; font-size: .72rem; font-weight: 700; display: grid; place-items: center; margin-top: 1px; transition: background .15s, color .15s; }
.sv-pub.v2 .sv-qa.done .qh .n { background: #ff7a1a; color: #fff; }
.sv-pub.v2 .qh h3 { margin: 0; font-size: .98rem; font-weight: 600; line-height: 1.35; color: #241f1b; }
.sv-pub.v2 .hint { display: block; margin: 2px 0 0 32px; color: #a09689; font-size: .72rem; }
.sv-pub.v2 .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 8px 32px; }
.sv-pub.v2 .chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid #e6dfd7; background: #fff; color: #3a332e; font: inherit; font-size: .88rem; line-height: 1.2; cursor: pointer; transition: border-color .12s, background .12s, color .12s, transform .08s; text-align: start; width: auto; }
.sv-pub.v2 .chip:hover { border-color: #ffb37f; }
.sv-pub.v2 .chip:active { transform: scale(.97); }
.sv-pub.v2 .chip.on { background: #ff7a1a; border-color: #ff7a1a; color: #fff; font-weight: 600; box-shadow: 0 4px 12px rgba(255, 122, 26, .28); }
.sv-pub.v2 .chip .box { width: 16px; height: 16px; border-radius: 4px; border: 1.5px solid #cfc6bc; display: grid; place-items: center; font-size: .65rem; flex: none; }
.sv-pub.v2 .chip.on .box { border-color: #fff; background: rgba(255, 255, 255, .25); }
.sv-pub.v2 textarea { width: calc(100% - 32px); margin: 10px 0 8px 32px; border: 1.5px solid #e6dfd7; border-radius: 14px; padding: 10px 12px; font: inherit; font-size: .9rem; resize: vertical; background: #fff; }
.sv-pub.v2 textarea:focus { outline: none; border-color: #ff7a1a; }
.sv-pub.v2 .sv-error { margin: 10px 22px 0; padding: 8px 12px; border-radius: 10px; background: #fff3e0; color: #8a4b00; font-size: .84rem; }
.sv-pub.v2 .sv-foot { padding: 18px 22px 22px; display: flex; flex-direction: column; align-items: center; gap: 8px; border-top: 1px solid #f3eee8; margin-top: 14px; background: #fcfaf7; }
.sv-pub.v2 .sv-send { width: 100%; max-width: 360px; padding: 13px 18px; border: 0; border-radius: 14px; background: #ff7a1a; color: #fff; font: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(255, 122, 26, .3); transition: transform .08s, opacity .15s; }
.sv-pub.v2 .sv-send:active { transform: scale(.98); }
.sv-pub.v2 .sv-send:disabled { opacity: .45; box-shadow: none; cursor: default; }
.sv-pub.v2 .sv-foot small { color: #a09689; font-size: .72rem; text-align: center; }
[dir="rtl"] .sv-pub.v2 .hint, [dir="rtl"] .sv-pub.v2 .chips, [dir="rtl"] .sv-pub.v2 textarea { margin-left: 0; margin-right: 32px; }
@media (max-width: 480px) {
    .sv-pub.v2 { padding: 0 0 30px; }
    .sv-pub.v2 .sv-pub-card { border-radius: 0 0 20px 20px; }
    .sv-pub.v2 .chips, .sv-pub.v2 textarea, .sv-pub.v2 .hint { margin-left: 0; }
    .sv-pub.v2 textarea { width: 100%; }
    [dir="rtl"] .sv-pub.v2 .chips, [dir="rtl"] .sv-pub.v2 textarea, [dir="rtl"] .sv-pub.v2 .hint { margin-right: 0; }
}

/* survey thank-you: the quiet 'taking you back' line */
.sv-pub.v2 .sv-returning { display: block; margin-top: 10px; color: #a09689; font-size: .74rem; }
.sv-pub.v2 .sv-back { margin-top: 8px; }

/* survey pills: a radio circle in front of single-choice answers (Majed: "use circle option") */
.sv-pub.v2 .chip { padding: 7px 14px 7px 9px; }
.sv-pub.v2 .chip .dot { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid #cfc6bc; background: #fff; flex: none; box-sizing: border-box; transition: border-color .12s, box-shadow .12s; }
.sv-pub.v2 .chip:hover .dot { border-color: #ffb37f; }
.sv-pub.v2 .chip.on .dot { border-color: #fff; background: #fff; box-shadow: inset 0 0 0 4px #ff7a1a; }
.sv-pub.v2 .chip .box { background: #fff; }
[dir="rtl"] .sv-pub.v2 .chip { padding: 7px 9px 7px 14px; }

/* survey header logo: wide logos were being cropped by object-fit: cover — show the whole mark */
.sv-pub.v2 .sv-head img { width: 56px; height: 56px; object-fit: contain; padding: 4px; background: #fff; border-radius: 14px; }

/* ---------- QR-branded client bar v2: the store's mark, properly ---------- */
/* v1 forced any logo into a 30px cropped square next to a small name — a wide Arabic
   wordmark like Siraj's became an unreadable smear. v2: a white tile that keeps the
   logo's whole shape (up to 140px wide, 36px tall), the name beside it, the pair
   centred absolutely, and the language button kept on the end of the bar. */
.mf-appbar-client .mf-storebrand.v2 { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; gap: 10px; max-width: min(70vw, 420px); cursor: default; }
.mf-appbar-client .mf-storebrand.v2 .mf-storebrand-tile { display: inline-flex; align-items: center; justify-content: center; height: 40px; min-width: 40px; max-width: 150px; padding: 3px 6px; background: #fff; border-radius: 12px; box-shadow: 0 3px 10px rgba(43, 39, 35, .12); flex: none; }
.mf-appbar-client .mf-storebrand.v2 .mf-brand-logo.store { width: auto !important; height: 34px !important; max-width: 138px; border-radius: 6px; object-fit: contain; box-shadow: none; }
.mf-appbar-client .mf-storebrand.v2:hover .mf-brand-logo { transform: none; }
.mf-appbar-client .mf-storebrand.v2 .mf-brand-name { font-size: 16px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: none; -webkit-text-fill-color: initial; color: #241f1b; }
.mf-appbar-client .mf-storebrand.v2 .mf-storebrand-emoji { font-size: 26px; }
@media (max-width: 480px) {
    .mf-appbar-client .mf-storebrand.v2 { max-width: 62vw; gap: 8px; }
    .mf-appbar-client .mf-storebrand.v2 .mf-storebrand-tile { height: 36px; max-width: 120px; }
    .mf-appbar-client .mf-storebrand.v2 .mf-brand-logo.store { height: 30px !important; max-width: 108px; }
    .mf-appbar-client .mf-storebrand.v2 .mf-brand-name { font-size: 14.5px; }
}

/* Reserve-table card: an old `.oo-reserve-btn small { margin-inline-start: auto }` still
   shoved the subtitle to the far end, leaving the title alone at the start ("this not
   coming good"). The two lines belong together, under each other, next to the plate. */
.oo-reserve-btn .txt small { margin-inline-start: 0 !important; display: block; }
.oo-reserve-btn .txt { gap: 2px; }
.oo-reserve-btn .txt b { line-height: 1.2; }

/* ---------- Attendance: two buttons and the truth about today ---------- */
.att-wrap { max-width: 560px; display: flex; flex-direction: column; gap: 12px; }
.att-card { background: #fff; border: 1px solid #ece6df; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.att-card.on { border-color: #b8e0c2; background: linear-gradient(180deg, #fff, #f3fbf5); }
.att-state { display: flex; align-items: center; gap: 12px; }
.att-state .dot { width: 12px; height: 12px; border-radius: 50%; background: #d9d1c8; flex: none; }
.att-card.on .att-state .dot { background: #22a447; box-shadow: 0 0 0 5px rgba(34, 164, 71, .15); }
.att-state b { display: block; font-size: 1.05rem; }
.att-state small { color: #8a8079; font-size: .78rem; }
.att-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 16px; border: 0; border-radius: 14px; font: inherit; font-size: 1.05rem; font-weight: 800; color: #fff; cursor: pointer; transition: transform .08s, opacity .15s; }
.att-btn:active { transform: scale(.98); }
.att-btn:disabled { opacity: .6; cursor: default; }
.att-btn.in { background: linear-gradient(135deg, #22a447, #1a8a3a); box-shadow: 0 8px 20px rgba(34, 164, 71, .28); }
.att-btn.out { background: linear-gradient(135deg, #ff7a1a, #e55f00); box-shadow: 0 8px 20px rgba(255, 122, 26, .28); }
.att-btn .ic { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .2); }
.att-btn .ic .mud-icon-root { width: 20px; height: 20px; color: #fff; }
.att-notice { background: #fff3e0; color: #8a4b00; border-radius: 10px; padding: 8px 12px; font-size: .82rem; }
.att-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.att-stats > div { background: #fff; border: 1px solid #ece6df; border-radius: 14px; padding: 10px 12px; text-align: center; }
.att-stats b { display: block; font-size: 1.3rem; }
.att-stats b small { font-size: .7rem; color: #8a8079; margin-inline-start: 2px; }
.att-stats span { color: #8a8079; font-size: .72rem; }
.att-list { background: #fff; border: 1px solid #ece6df; border-radius: 14px; padding: 10px 14px; }
.att-list .hd { display: block; font-size: .8rem; color: #8a8079; margin-bottom: 6px; }
.att-list .row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid #f3eee8; font-size: .88rem; }
.att-list .row .t { font-variant-numeric: tabular-nums; font-weight: 600; }
.att-list .row .arrow { color: #b0a69d; }
.att-list .row .hrs { margin-inline-start: auto; color: #7a7068; }
.att-list .row .loc a, .att-list .row .loc .none { display: inline-flex; align-items: center; gap: 3px; font-size: .74rem; color: #ff7a1a; text-decoration: none; }
.att-list .row .loc .none { color: #b0a69d; }
.att-list .row .loc .mud-icon-root { width: 14px; height: 14px; }
/* the owner's report */
.att-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.att-filters .att-range { max-width: 240px; }
.att-filters .att-person { max-width: 220px; }
.att-open-now { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: #e3f5e8; color: #1f7a3a; font-size: .8rem; font-weight: 600; margin-bottom: 10px; }
.att-open-now .dot { width: 8px; height: 8px; border-radius: 50%; background: #22a447; }
.att-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.att-person-card { background: #fff; border: 1px solid #ece6df; border-radius: 12px; padding: 10px 12px; }
.att-person-card > b { display: block; font-size: .9rem; }
.att-person-card > small { color: #a09689; font-size: .7rem; }
.att-person-card .nums { display: flex; gap: 12px; margin-top: 6px; font-size: .78rem; color: #7a7068; }
.att-person-card .nums b { color: #241f1b; font-size: .95rem; }
.att-table-wrap { overflow-x: auto; background: #fff; border: 1px solid #ece6df; border-radius: 12px; }
.att-table { width: 100%; border-collapse: collapse; font-size: .84rem; }
.att-table th { text-align: start; font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: #8a8079; padding: 8px 12px; border-bottom: 1px solid #ece6df; }
.att-table td { padding: 8px 12px; border-bottom: 1px solid #f3eee8; white-space: nowrap; }
.att-table .num, .att-table th.num { text-align: end; font-variant-numeric: tabular-nums; }
.att-table tr.open td { background: #f6fcf7; }
.att-table .badge { display: inline-block; padding: 1px 8px; border-radius: 999px; background: #e3f5e8; color: #1f7a3a; font-size: .7rem; font-weight: 600; }
.att-table .pin { text-decoration: none; margin-inline-start: 4px; font-size: .85rem; }
.att-table .pin.none { color: #c9c0b6; }

/* ---------- Leave: asked on the attendance page, decided in the report ---------- */
.lv-card { background: #fff; border: 1px solid #ece6df; border-radius: 14px; padding: 12px 14px; }
.lv-card .hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.lv-card .hd b { font-size: .92rem; }
.lv-ask { border: 1px dashed #ffb37f; background: #fff7f0; color: #e55f00; border-radius: 999px; padding: 4px 12px; font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer; }
.lv-empty { color: #a09689; font-size: .78rem; }
.lv-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-top: 1px solid #f3eee8; font-size: .85rem; }
.lv-row .kind { font-size: 1.1rem; line-height: 1.2; }
.lv-row .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lv-row .txt small { color: #8a8079; font-size: .74rem; }
.lv-row .txt .note { color: #7a7068; font-style: italic; }
.lv-row .st { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #f1ece6; color: #7a7068; white-space: nowrap; }
.lv-row.approved .st { background: #e3f5e8; color: #1f7a3a; }
.lv-row.rejected .st { background: #fde8e7; color: #b3261e; }
.lv-row.pending .st { background: #fff3e0; color: #8a4b00; }
.lv-row .x { border: 0; background: none; color: #b0a69d; cursor: pointer; font-size: .8rem; padding: 2px 4px; }
.lv-row .x:hover { color: #d3302f; }
.lv-sheet { max-width: 480px; }
.lv-kind { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 6px 0 10px; }
.lv-kind button { padding: 10px; border-radius: 12px; border: 1.5px solid #e6dfd7; background: #fff; font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; }
.lv-kind button.on { border-color: #ff7a1a; background: #fff4ec; color: #c24500; }
.lv-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: .78rem; color: #7a7068; }
.lv-field input, .lv-field textarea { border: 1.5px solid #e6dfd7; border-radius: 10px; padding: 8px 10px; font: inherit; font-size: .92rem; color: #241f1b; background: #fff; }
.lv-field input:focus, .lv-field textarea:focus { outline: none; border-color: #ff7a1a; }
.lv-two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* the report */
.lv-pending { background: #fff8f1; border: 1px solid #ffd9b8; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; }
.lv-pending .hd { display: block; font-size: .9rem; color: #8a4b00; margin-bottom: 6px; }
.lv-req { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid #ffe6cf; flex-wrap: wrap; }
.lv-req .kind { font-size: 1.3rem; }
.lv-req .txt { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 1px; font-size: .86rem; }
.lv-req .txt small { color: #8a8079; font-size: .74rem; }
.lv-req .txt .when { color: #a09689; }
.lv-req .acts { display: flex; gap: 6px; }
.att-person-card .nums .lv { color: #8a4b00; }
.lv-st { font-size: .7rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #f1ece6; color: #7a7068; }
.lv-st.approved { background: #e3f5e8; color: #1f7a3a; }
.lv-st.rejected { background: #fde8e7; color: #b3261e; }
.att-table td small { color: #a09689; font-size: .7rem; margin-inline-start: 4px; }

/* ---------- The store calendar (Heron.MudCalendar in OrderOrange clothes) ---------- */
.cal-body { display: grid; grid-template-columns: 1fr 320px; gap: 14px; align-items: start; }
@media (max-width: 1100px) { .cal-body { grid-template-columns: 1fr; } }
.cal-card { background: #fff; border: 1px solid #ece6df; border-radius: 14px; padding: 8px; overflow: hidden; }
.cal-card .mud-cal-toolbar-nav { direction: ltr; }
.cal-card .mud-cal-month-cell { border-left: 1px solid #efe9e2; }
.cal-card .mud-cal-month-grid-header .mud-cal-month-header { border-left: 1px solid #efe9e2; }
.cal-card .mud-calendar { border-bottom: 1px solid #efe9e2; font-size: .82rem; }
.cal-card .mud-cal-month-cell-title { font-size: .76rem; }
.cal-chip { display: flex; align-items: center; gap: 5px; font-size: .7rem; font-weight: 700; color: #fff; background: var(--c, #ff7a1a); border-radius: 6px; padding: 2px 7px; margin: 2px 0; cursor: pointer; overflow: hidden; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.cal-chip:hover { filter: brightness(1.08); }
.cal-chip .t { background: rgba(255, 255, 255, .22); border-radius: 4px; padding: 0 4px; flex: none; }
.cal-chip .bell { font-size: .65rem; flex: none; }
.cal-chip .x { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-side { background: #fff; border: 1px solid #ece6df; border-radius: 14px; padding: 12px 14px; position: sticky; top: 56px; max-height: calc(100vh - 80px); overflow: auto; }
.cal-side .hd { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: .9rem; margin-bottom: 8px; }
.cal-side .hd .mud-icon-root { width: 18px; height: 18px; color: #ff7a1a; }
.cal-side .empty { text-align: center; color: #a09689; font-size: .8rem; padding: 26px 8px; }
.cal-side .empty span { display: block; font-size: 1.8rem; margin-bottom: 4px; }
.cal-evt { display: flex; align-items: stretch; gap: 8px; background: #fbf9f6; border: 1px solid #f1ece6; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.cal-evt .bar { width: 4px; background: var(--c, #ff7a1a); flex: none; }
.cal-evt .main { flex: 1; min-width: 0; padding: 8px 2px; cursor: pointer; }
.cal-evt .main b { display: block; font-size: .86rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-evt .main small { display: flex; align-items: center; gap: 4px; color: #8a8079; font-size: .72rem; margin-top: 2px; }
.cal-evt .main small .mud-icon-root { width: 13px; height: 13px; }
.cal-evt .del { border: 0; background: none; color: #b0a69d; width: 30px; cursor: pointer; }
.cal-evt .del:hover { color: #d3302f; background: #fde8e7; }
.cal-swatches { display: flex; gap: 8px; flex-wrap: wrap; }
.cal-swatches button { width: 26px; height: 26px; border-radius: 50%; border: 0; cursor: pointer; background: var(--c); box-shadow: 0 1px 4px rgba(0, 0, 0, .15); }
.cal-swatches button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--c); }

/* ---------- Attendance report: the position as a readable chip, and a map right here ---------- */
.att-loc { display: inline-flex; align-items: center; gap: 3px; margin-inline-start: 6px; padding: 1px 8px; border-radius: 999px; border: 1px solid transparent; font: inherit; font-size: .7rem; font-weight: 700; cursor: pointer; vertical-align: middle; }
.att-loc.near { background: #e3f5e8; color: #1f7a3a; }
.att-loc.far { background: #fff3e0; color: #8a4b00; }
.att-loc.unknown { background: #f1ece6; color: #7a7068; }
.att-loc.none { background: none; color: #b0a69d; cursor: default; font-weight: 600; }
.att-loc:hover:not(.none) { filter: brightness(.96); }
.att-map-sheet { max-width: 560px; }
.att-map-meta { display: flex; align-items: center; gap: 8px; margin: 4px 0 8px; font-size: .78rem; color: #8a8079; }
.att-map-meta .att-loc { margin: 0; font-size: .78rem; }
.att-map { width: 100%; height: 340px; border: 0; border-radius: 12px; background: #f1ece6; }

/* ---------- Attendance report table: cells that read well on every width ---------- */
/* Person and date stay narrow and on one line; the in/out cells take the room and hold
   the time above its location chip on phones, beside it on desktop; the table never
   forces a horizontal scroll. */
.att-table { table-layout: auto; }
.att-table th:nth-child(1), .att-table td:nth-child(1) { width: 20%; }
.att-table th:nth-child(2), .att-table td:nth-child(2) { width: 14%; white-space: nowrap; }
.att-table th:nth-child(5), .att-table td:nth-child(5) { width: 8%; }
.att-table td.io-cell { white-space: normal; }
.att-table .io { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.att-table .io .t { font-variant-numeric: tabular-nums; font-weight: 600; }
.att-table .io .att-loc { margin-inline-start: 0; }
.att-table td { vertical-align: middle; }
@media (max-width: 720px) {
    .att-table { font-size: .78rem; }
    .att-table th, .att-table td { padding: 6px 8px; }
    .att-table th:nth-child(2), .att-table td:nth-child(2) { display: none; }   /* the date is in the person's row heading on phones */
    .att-table td:nth-child(1) b::after { content: attr(data-date); display: block; font-weight: 400; color: #8a8079; font-size: .7rem; }
    .att-table .io { flex-direction: column; align-items: flex-start; gap: 3px; }
    .att-loc { font-size: .66rem; padding: 1px 6px; }
}

/* ---------- Calendar on phones: fit the width, no sideways scroll ---------- */
/* Heron lays the month out as a 7-column CSS grid whose cells refuse to shrink below
   their content, and its toolbar scrolls sideways when the view buttons don't fit —
   the "cells not coming well" on a phone. Let the columns shrink to the width, wrap
   the toolbar, shorten the cells and show only the time on each chip. */
.cal-card .mud-cal-month-grid, .cal-card .mud-cal-month-grid-header { grid-template-columns: repeat(7, minmax(0, 1fr)) !important; }
.cal-card .mud-cal-month-cell { min-width: 0; overflow: hidden; }
.cal-card .mud-cal-toolbar { flex-wrap: wrap; row-gap: 8px; overflow: visible; }
@media (max-width: 720px) {
    .cal-body { gap: 10px; }
    .cal-card { padding: 6px; }
    .cal-card .mud-calendar { font-size: .72rem; }
    .cal-card .mud-cal-month-cell { min-height: 58px !important; }
    .cal-card .mud-cal-month-cell-title { padding: 4px 5px; font-size: .68rem; }
    .cal-card .mud-cal-toolbar .mud-button-root { padding: 4px 8px; min-width: 0; font-size: .74rem; }
    .cal-card .mud-cal-toolbar-nav .mud-button-root { padding: 4px 6px; }
    .cal-chip { padding: 1px 4px; gap: 3px; font-size: .62rem; border-radius: 4px; }
    .cal-chip .x { display: none; }             /* the day is too narrow for words: time + bell only */
    .cal-chip .t { background: none; padding: 0; }
    .cal-side { position: static; max-height: none; }
}

/* phones: Heron fixes the month rows through the grid's row template, not the cell — shorten it there */
@media (max-width: 720px) {
    .cal-card .mud-cal-month-grid { grid-auto-rows: minmax(58px, auto) !important; grid-template-rows: none !important; }
    .cal-card .mud-cal-month-grid > * { min-height: 58px !important; height: auto !important; }
}

/* phones: the row height actually lives on .mud-cal-month-row-holder as an inline min-height */
@media (max-width: 720px) {
    .cal-card .mud-cal-month-row-holder { min-height: 58px !important; }
}

/* phones: Heron also pins the whole calendar to a fixed height (700px) and lets the grid
   stretch its five rows to fill it — release the height so rows are as tall as their content */
@media (max-width: 720px) {
    .cal-card .mud-calendar { height: auto !important; min-height: 0 !important; }
    .cal-card .mud-cal-grid { grid-template-rows: none !important; grid-auto-rows: minmax(58px, auto) !important; }
    .cal-card .mud-cal-month-table-holder, .cal-card .mud-cal-month-table-body { height: auto !important; }
}

/* Heron's .mud-calendar { display: grid } is what stretches the month to its fixed height
   and fights the width (Majed found it in devtools: turn grid off and it lays out fine).
   Block flow: toolbar, then the month, each as tall as it needs. */
.cal-card .mud-calendar { display: block !important; height: auto !important; min-height: 0 !important; overflow: visible !important; }
.cal-card .mud-cal-grid { grid-template-rows: none !important; grid-auto-rows: minmax(96px, auto) !important; }
@media (max-width: 720px) { .cal-card .mud-cal-grid { grid-auto-rows: minmax(58px, auto) !important; } }