/* 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-card, .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;
}

.mf-brand-mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, #FF5A00, #FF9A5C);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 21px;
    box-shadow: 0 6px 16px rgba(255, 90, 0, .35);
    transition: transform .15s ease;
}

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

.mf-brand-name {
    font-size: 20px;
    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;
}

.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);
}

.mf-promo-card {
    min-width: 250px;
    border-radius: 18px;
    padding: 18px;
    color: #fff;
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: default;
    box-shadow: 0 8px 22px rgba(36, 31, 27, .14);
}

.mf-promo-code {
    display: inline-block;
    background: rgba(255, 255, 255, .22);
    border: 1px dashed rgba(255, 255, 255, .7);
    border-radius: 8px;
    padding: 2px 10px;
    font-weight: 700;
    letter-spacing: .06em;
    width: fit-content;
}

.mf-again-card {
    min-width: 150px;
    max-width: 150px;
    border-radius: 16px;
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
    padding: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    text-align: center;
    transition: transform .15s ease, box-shadow .15s ease;
}

.mf-again-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(36, 31, 27, .10);
}

/* 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-card .mf-emoji3d { width: 42px; height: 42px; margin: 0 auto; }
.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; }
}

/* Loader splash: real food photography as the BACKGROUND, warm brand wash on
   top so the ring, wordmark and floating food stay perfectly readable. */
.mf-loader-page {
    background:
        linear-gradient(150deg, rgba(255, 250, 245, .93) 0%, rgba(255, 238, 222, .86) 38%, rgba(255, 176, 116, .68) 100%),
        url('loader-bg.jpg') center / cover no-repeat fixed;
    animation: none;
}

.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. */
.mf-appbar .mud-icon-button {
    width: 40px;
    height: 40px;
    padding: 8px;
    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: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; }

/* Top bar: slimmer icon chips + avatar. */
.mf-appbar .mud-icon-button {
    width: 34px;
    height: 34px;
    padding: 6px;
}

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

.mf-appbar .mud-avatar {
    width: 34px;
    height: 34px;
    font-size: 14px;
}

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

.mf-brand-mark {
    width: 38px;
    height: 38px;
    font-size: 20px;
}

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

/* New client logo. */
.mf-brand-logo {
    width: 38px;
    height: 38px;
    display: block;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(255, 90, 0, .35);
    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;
    background: #24130a;
}

.mf-login-bg::before,
.mf-login-bg::after {
    content: "";
    position: absolute;
    inset: -6%;
    background-position: center;
    background-size: cover;
    will-change: transform, opacity;
}

.mf-login-bg::before {
    background-image:
        linear-gradient(160deg, rgba(226, 72, 0, .62) 0%, rgba(120, 35, 0, .68) 100%),
        url('loader-bg.jpg');
    animation: mfKenA 22s ease-in-out infinite;
}

.mf-login-bg::after {
    background-image:
        linear-gradient(160deg, rgba(226, 72, 0, .55) 0%, rgba(90, 25, 0, .72) 100%),
        url('login-bg2.jpg');
    animation: mfKenB 22s ease-in-out infinite;
}

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

.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);
}

@media (prefers-reduced-motion: reduce) {
    .mf-login-bg::before, .mf-login-bg::after { animation: none; }
    .mf-login-bg::after { opacity: 0; }
}

/* 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;
}

/* Login video backdrop + readability shade. */
.mf-login-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mf-login-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(165deg, rgba(226, 72, 0, .48) 0%, rgba(45, 16, 0, .72) 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;
}