/* Winkels — Mall of Winkels brand identity */
@import url('https://fonts.googleapis.com/css2?family=Capriola&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Tajawal:wght@400;500;700;800&display=swap');

:root {
    /* Official brand palette */
    --winkels-brand-purple: #751fe8;
    --winkels-brand-yellow: #e7e06f;
    --winkels-brand-white: #ffffff;

    /* Purple ramp — derived from #751fe8 */
    --winkels-purple-50: #f7f2fe;
    --winkels-purple-100: #eee5fd;
    --winkels-purple-200: #dcc9fb;
    --winkels-purple-300: #c4a3f7;
    --winkels-purple-400: #a876f2;
    --winkels-purple-500: #914aed;
    --winkels-purple-600: #751fe8;
    --winkels-purple-700: #6219c5;
    --winkels-purple-800: #4f149f;
    --winkels-purple-900: #3c0f79;
    --winkels-purple-950: #280852;

    --winkels-purple: var(--winkels-brand-purple);
    --winkels-purple-deep: #6219c5;
    --winkels-purple-dark: #4f149f;
    --winkels-purple-light: #a876f2;
    --winkels-purple-soft: #eee5fd;
    --winkels-purple-glow: rgba(117, 31, 232, 0.4);

    /* Yellow accent — brand lime */
    --winkels-magenta: #914aed;
    --winkels-magenta-light: #a876f2;
    --winkels-gold: var(--winkels-brand-yellow);
    --winkels-gold-light: #ecea8a;
    --winkels-gold-soft: #f5f4dc;

    --winkels-white: var(--winkels-brand-white);
    --winkels-bg: #faf8fe;
    --winkels-bg-elevated: #ffffff;
    --winkels-text: #1c1235;
    --winkels-text-muted: #6d6a86;
    --winkels-border: rgba(117, 31, 232, 0.1);
    --winkels-border-strong: rgba(117, 31, 232, 0.2);

    /* Signature gradients */
    --winkels-gradient: linear-gradient(135deg, #914aed 0%, #751fe8 48%, #6219c5 100%);
    --winkels-gradient-vivid: linear-gradient(135deg, #a876f2 0%, #751fe8 45%, #6219c5 100%);
    --winkels-gradient-deep: linear-gradient(160deg, #280852 0%, #3c0f79 48%, #751fe8 100%);
    --winkels-gradient-gold: linear-gradient(135deg, #ecea8a 0%, #e7e06f 55%, #d4cc5a 100%);
    --winkels-gradient-sheen: linear-gradient(120deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.34) 50%, rgba(255,255,255,0) 80%);

    /* Layered shadows */
    --winkels-shadow-sm: 0 1px 2px rgba(40, 8, 82, 0.05), 0 2px 8px rgba(40, 8, 82, 0.05);
    --winkels-shadow: 0 2px 4px rgba(40, 8, 82, 0.04), 0 12px 30px rgba(40, 8, 82, 0.09);
    --winkels-shadow-lg: 0 4px 10px rgba(40, 8, 82, 0.06), 0 26px 60px rgba(60, 15, 121, 0.2);
    --winkels-shadow-xl: 0 8px 16px rgba(40, 8, 82, 0.08), 0 40px 90px rgba(40, 8, 82, 0.28);
    --winkels-glow: 0 6px 18px rgba(117, 31, 232, 0.34), 0 1px 4px rgba(117, 31, 232, 0.22);
    --winkels-glow-lg: 0 14px 38px rgba(117, 31, 232, 0.44), 0 4px 12px rgba(117, 31, 232, 0.26);
    --winkels-inset-top: inset 0 1px 0 rgba(255, 255, 255, 0.28);

    --winkels-radius-sm: 0.65rem;
    --winkels-radius: 1rem;
    --winkels-radius-lg: 1.25rem;
    --winkels-radius-xl: 1.6rem;

    --winkels-success: #10b981;
    --winkels-danger: #ef4444;
    --winkels-warning: #f59e0b;
    --winkels-ease: cubic-bezier(0.16, 1, 0.3, 1);
    --winkels-font-display: 'Capriola', 'Tajawal', system-ui, sans-serif;
    --winkels-font: 'Plus Jakarta Sans', 'Tajawal', system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
    font-family: var(--winkels-font);
    background: var(--winkels-bg);
    color: var(--winkels-text);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: -0.005em;
}

/* Soft violet auras keep large surfaces from reading as flat grey */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(closest-side at 8% 4%, rgba(139, 92, 246, 0.14), transparent),
        radial-gradient(closest-side at 96% 12%, rgba(117, 31, 232, 0.1), transparent),
        radial-gradient(closest-side at 60% 100%, rgba(117, 31, 232, 0.08), transparent);
}

body > * { position: relative; z-index: 1; }

h1, h2, h3, h4 {
    letter-spacing: -0.02em;
    font-family: var(--winkels-font-display);
}

::selection {
    background: var(--winkels-purple-200);
    color: var(--winkels-purple-950);
}

/* Branded scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--winkels-purple-300) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--winkels-purple-300), var(--winkels-purple-400));
    border-radius: 9999px;
    border: 3px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--winkels-purple-400), var(--winkels-purple-600));
    background-clip: content-box;
}

body.rtl { direction: rtl; font-family: 'Tajawal', 'Plus Jakarta Sans', system-ui, sans-serif; }
body.ltr { direction: ltr; }

/* ——— Brand logo ——— */
.brand-logo {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.brand-logo img {
    height: 2.5rem;
    width: auto;
    border-radius: 0.65rem;
    box-shadow: var(--winkels-shadow-sm);
}

.brand-logo-lg img { height: 3.25rem; }
.brand-logo-sm img { height: 2rem; border-radius: 0.5rem; }

.brand-logo-text,
.nook-word,
.legal-brand,
.lp-brand-name,
.lp-footer-brand {
    display: inline-block;
    width: 2.66em;
    height: 1em;
    background: url("../images/nook-word-plain.png") center / contain no-repeat;
    color: transparent;
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1;
    text-indent: 150%;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    vertical-align: middle;
}

.nook-word {
    font-size: 2.5rem;
}

.nook-word--login {
    display: block;
    margin: 0 auto 1.5rem;
    text-align: center;
    font-size: 2.35rem;
}

.nook-word--gate {
    display: block;
    text-align: center;
    font-size: 2.5rem;
}

.nook-word--on-dark { color: #fff; }

.panel-login-word {
    font-size: 2.35rem;
    flex-shrink: 0;
}

.brand-logo-text.dark { color: var(--winkels-purple-dark); }

/* ——— Admin layout ——— */
.admin-layout {
    height: 100vh;
    overflow: hidden;
}

/* ——— Admin sidebar ——— */
.winkels-sidebar {
    --sidebar-width: 16.5rem;
    display: flex;
    flex-direction: column;
    width: var(--sidebar-width);
    height: 100vh;
    position: sticky;
    top: 0;
    align-self: flex-start;
    flex-shrink: 0;
    background: var(--winkels-gradient-deep);
    color: #fff;
    box-shadow:
        12px 0 48px rgba(40, 8, 82, 0.32),
        inset -1px 0 0 rgba(255, 255, 255, 0.06);
    position: relative;
    overflow: hidden;
    z-index: 40;
}

/* Aurora wash + hairline edge so the rail feels lit rather than painted */
.winkels-sidebar::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(closest-side at 12% 8%, rgba(117, 31, 232, 0.34), transparent),
        radial-gradient(closest-side at 90% 34%, rgba(145, 74, 237, 0.3), transparent),
        radial-gradient(closest-side at 30% 96%, rgba(231, 224, 111, 0.12), transparent);
}

.winkels-sidebar::after {
    content: '';
    position: absolute;
    inset-inline-end: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: linear-gradient(180deg, rgba(255,255,255,0.28), rgba(255,255,255,0.04) 40%, rgba(255,255,255,0.18));
}

.winkels-sidebar > * { position: relative; z-index: 1; }

.sidebar-brand {
    flex-shrink: 0;
    position: relative;
    padding: 1.35rem 1.25rem 1.15rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), transparent);
}

.sidebar-brand::after {
    content: '';
    position: absolute;
    inset-inline: 1.25rem;
    bottom: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(231, 224, 111, 0.55) 20%,
        rgba(117, 31, 232, 0.45) 80%,
        transparent
    );
}

.sidebar-panel-title {
    margin-top: 0.85rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.52);
}

body.rtl .sidebar-panel-title {
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.75rem;
}

.sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    overflow-anchor: none;
    scroll-behavior: auto;
    padding: 0.85rem 0.85rem 0.5rem;
    scrollbar-width: thin;
    scrollbar-color: rgba(231, 224, 111, 0.45) transparent;
}

.sidebar-scroll a,
.sidebar-scroll .nav-group,
.sidebar-scroll .nav-group-title {
    overflow-anchor: none;
    scroll-margin: 0;
}

.sidebar-scroll::-webkit-scrollbar { width: 5px; }

.sidebar-scroll::-webkit-scrollbar-track {
    background: transparent;
    margin-block: 0.35rem;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(231, 224, 111, 0.55), rgba(117, 31, 232, 0.45));
    border-radius: 9999px;
}

.sidebar-scroll::before,
.sidebar-scroll::after {
    content: '';
    position: sticky;
    left: 0;
    right: 0;
    height: 0.85rem;
    pointer-events: none;
    z-index: 2;
}

.sidebar-scroll::before {
    top: 0;
    margin-bottom: -0.85rem;
    background: linear-gradient(180deg, rgba(40, 8, 82, 0.92), transparent);
}

.sidebar-scroll::after {
    bottom: 0;
    margin-top: -0.85rem;
    background: linear-gradient(0deg, rgba(40, 8, 82, 0.92), transparent);
}

.sidebar-foot {
    flex-shrink: 0;
    padding: 0.9rem 1.1rem 1.15rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.08));
    backdrop-filter: blur(8px);
}

.sidebar-logout-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.62rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.8125rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        color 0.25s var(--winkels-ease),
        background 0.25s var(--winkels-ease),
        border-color 0.25s var(--winkels-ease),
        box-shadow 0.25s var(--winkels-ease);
}

.sidebar-logout-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.28);
    box-shadow: 0 6px 18px rgba(40, 8, 82, 0.35);
}

.sidebar-lang-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    margin-top: 0.7rem;
    font-size: 0.75rem;
}

.sidebar-lang-switch a {
    color: rgba(255, 255, 255, 0.48);
    text-decoration: none;
    padding: 0.15rem 0.35rem;
    border-radius: 0.35rem;
    transition: color 0.2s var(--winkels-ease), background 0.2s var(--winkels-ease);
}

.sidebar-lang-switch a:hover {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.08);
}

.sidebar-lang-switch a.is-active {
    color: var(--winkels-gold-light);
    font-weight: 700;
}

.admin-main-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.75rem 1rem;
    margin-bottom: 0.85rem;
}

.admin-main-toolbar .merchant-page-brands {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.85rem;
}

.admin-main-toolbar .admin-lang-switch {
    margin-inline-start: auto;
    flex-shrink: 0;
}

.admin-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.45rem;
    border: 1px solid var(--winkels-border);
    border-radius: 999px;
    background: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.admin-lang-switch a {
    text-decoration: none;
    color: var(--winkels-muted, #6b7280);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}

.admin-lang-switch a.is-active {
    color: #fff;
    background: #751fe8;
}

.sidebar-scroll .merchant-brand-switcher {
    margin-bottom: 0.85rem;
}

.sidebar-merchant-profile {
    flex-shrink: 0;
    padding: 0.85rem 1.1rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
}

.sidebar-merchant-profile__name {
    margin: 0 0 0.65rem;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1.35;
    color: #fff;
    word-break: break-word;
}

.sidebar-brand-icons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.sidebar-brand-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.75rem;
    border: 2px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
    text-decoration: none;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.sidebar-brand-icon:hover {
    transform: translateY(-1px);
    border-color: rgba(255, 255, 255, 0.34);
    background: rgba(255, 255, 255, 0.14);
}

.sidebar-brand-icon.is-active {
    border-color: #eee24b;
    box-shadow: 0 0 0 1px rgba(238, 226, 75, 0.35);
    background: rgba(238, 226, 75, 0.12);
}

.sidebar-brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidebar-brand-icon__fallback {
    font-size: 0.95rem;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
}

.sidebar-brand-icon.is-all {
    background: rgba(255, 255, 255, 0.12);
}

.sidebar-brand-icon__all {
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
}

.merchant-page-branches-only {
    margin-bottom: 1rem;
    padding-bottom: 0;
    border-bottom: none;
}

.merchant-brand-switcher {
    padding: 0.75rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.merchant-page-brands {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0 0 1.35rem;
    padding: 0 0 0.85rem;
    background: transparent;
    border-bottom: 1px solid var(--winkels-border);
}

.merchant-page-brands__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem 0.75rem;
}

.merchant-page-brands__label {
    margin: 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--winkels-text-muted);
    white-space: nowrap;
}

.merchant-page-brands__list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.merchant-page-brand {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--winkels-border);
    background: #fff;
    color: var(--winkels-text);
    text-decoration: none;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.3;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.merchant-page-brand:hover {
    border-color: var(--winkels-border-strong);
    background: var(--winkels-purple-50);
}

.merchant-page-brands__branches {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.merchant-page-branch {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--winkels-border);
    background: #fff;
    color: var(--winkels-text-muted);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
}

.merchant-page-branch:hover {
    color: var(--winkels-text);
    border-color: var(--winkels-border-strong);
}

.merchant-page-branch.is-active {
    background: #eee24b;
    border-color: #eee24b;
    color: #3a1a86;
}

.merchant-page-brand.is-active {
    border-color: transparent;
    background: var(--winkels-gradient);
    color: #fff;
}

body.kitchen-fullscreen-mode .merchant-page-brands,
body.pickup-fullscreen-mode .merchant-page-brands,
body.reception-fullscreen-mode .merchant-page-brands {
    display: none;
}

.merchant-brand-select {
    appearance: none;
    background: rgba(0, 0, 0, 0.25);
    color: inherit;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    padding: 0.55rem 0.75rem;
    font-size: 0.875rem;
    line-height: 1.25;
}

.merchant-brand-select:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.35);
}

.owner-brands-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.owner-brand-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    text-decoration: none;
    color: inherit;
    font-size: 0.8125rem;
    transition: border-color 0.15s, background 0.15s;
}

.owner-brand-chip:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

.owner-brand-chip.is-active {
    border-color: var(--winkels-accent, #c9a227);
    background: rgba(201, 162, 39, 0.12);
}

.owner-brand-chip__logo {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
}

.owner-brand-chip__placeholder {
    font-size: 1.1rem;
}

.owner-brand-chip__name {
    font-weight: 600;
}

.owner-brand-chip__status {
    font-size: 0.7rem;
    opacity: 0.6;
}

.winkels-main .owner-brands-panel .owner-brand-chip {
    border-color: rgba(0, 0, 0, 0.1);
    background: rgba(0, 0, 0, 0.03);
    color: inherit;
}

.winkels-main .owner-brands-panel .owner-brand-chip.is-active {
    border-color: var(--winkels-accent, #c9a227);
    background: rgba(201, 162, 39, 0.08);
}

.nav-icon {
    display: inline-flex;
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
    opacity: 0.72;
}

.nav-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.winkels-sidebar a:hover .nav-icon,
.winkels-sidebar a.active .nav-icon,
.nav-group-title .nav-icon {
    opacity: 1;
}

.winkels-sidebar a .notification-badge {
    margin-inline-start: auto;
}

.winkels-sidebar a {
    color: rgba(255, 255, 255, 0.78);
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.68rem 0.85rem;
    border-radius: 0.75rem;
    margin-bottom: 0.22rem;
    transition:
        color 0.25s var(--winkels-ease),
        background 0.25s var(--winkels-ease),
        transform 0.25s var(--winkels-ease),
        box-shadow 0.25s var(--winkels-ease);
    font-weight: 500;
    font-size: 0.9rem;
    position: relative;
    text-decoration: none;
    border: 1px solid transparent;
}

.winkels-sidebar a::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    translate: 0 -50%;
    width: 3px;
    height: 0;
    border-radius: 9999px;
    background: var(--winkels-gradient-gold);
    box-shadow: 0 0 12px rgba(231, 224, 111, 0.7);
    transition: height 0.3s var(--winkels-ease);
}

.winkels-sidebar a:hover {
    background: rgba(255, 255, 255, 0.11);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 14px rgba(40, 8, 82, 0.22);
    transform: translateX(3px);
}

body.rtl .winkels-sidebar a:hover { transform: translateX(-3px); }

.winkels-sidebar a.active {
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.07));
    color: #fff;
    font-weight: 600;
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.18),
        0 8px 22px rgba(40, 8, 82, 0.34);
}

.winkels-sidebar a.active::before { height: 60%; }

/* ——— Sidebar groups ———
   The rail reaches every corner of the platform, so it is filed into the same
   groups permissions are granted in and only the section holding the current
   page is open on arrival. */
.admin-nav { display: flex; flex-direction: column; }

.nav-search { margin-bottom: 0.9rem; }

/* Dressed for the dark rail rather than dropped onto it as a white slab. */
.nav-search input {
    font-size: 0.875rem;
    padding: 0.5rem 0.8rem;
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.nav-search input::placeholder { color: rgba(255, 255, 255, 0.5); }

.nav-search input:focus {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.nav-group-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.52rem 0.85rem;
    border-radius: 0.75rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.75rem;
    font-weight: 700;
    list-style: none;
    border: 1px solid transparent;
    scroll-margin: 0;
    scroll-margin-block: 0;
    transition:
        color 0.25s var(--winkels-ease),
        background 0.25s var(--winkels-ease),
        border-color 0.25s var(--winkels-ease);
}

/* Small caps suit Latin headings. Arabic has no case, and spacing the letters
   would break the joins, so it is left alone. */
body.ltr .nav-group-title {
    font-size: 0.7rem;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.nav-group-title::-webkit-details-marker { display: none; }

.nav-group-title:hover {
    color: rgba(255, 255, 255, 0.92);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.08);
}

/* Chevron on the trailing edge. Down when shut, up when open — the borders are
   physical so it points the same way in Arabic as in English. */
.nav-group-title::after {
    content: '';
    margin-inline-start: auto;
    width: 0.4rem;
    height: 0.4rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    rotate: 45deg;
    translate: 0 -0.1rem;
    transition: rotate 0.25s var(--winkels-ease);
}

.nav-group[open] > .nav-group-title { color: rgba(255, 255, 255, 0.8); }
.nav-group[open] > .nav-group-title::after { rotate: 225deg; translate: 0 0.1rem; }

/* Folding away the section you are standing in should not lose your place. */
.nav-group.is-current > .nav-group-title { color: #fff; }

.nav-group.is-current:not([open]) > .nav-group-title {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
}

.nav-group-links {
    margin-inline-start: 0.75rem;
    padding-inline-start: 0.55rem;
    padding-bottom: 0.25rem;
    border-inline-start: 1px solid rgba(255, 255, 255, 0.12);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), transparent);
}

.nav-group-links a {
    font-size: 0.9rem;
    padding-block: 0.55rem;
}

.nav-group[open] > .nav-group-links { animation: nav-group-in 0.22s var(--winkels-ease); }

@keyframes nav-group-in {
    from { opacity: 0; translate: 0 -0.35rem; }
}

/* Hairline drawn above rather than on the link, so the hover pill stays round. */
.nav-standalone { margin-top: 1.15rem; }

.nav-standalone::after {
    content: '';
    position: absolute;
    inset-inline: 0.3rem;
    top: -0.6rem;
    height: 1px;
    background: rgba(255, 255, 255, 0.14);
}

.winkels-main {
    background: transparent;
    flex: 1;
    min-width: 0;
    min-height: 0;
    height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ——— Cards & panels ——— */
.winkels-card {
    background: linear-gradient(180deg, #fff 0%, #fdfcff 100%);
    border-radius: var(--winkels-radius-lg);
    box-shadow: var(--winkels-shadow);
    border: 1px solid var(--winkels-border);
    transition: box-shadow 0.35s var(--winkels-ease), transform 0.35s var(--winkels-ease), border-color 0.35s var(--winkels-ease);
    position: relative;
}

/* Large panels only deepen — lifting them would be noisy and would break
   position:fixed descendants such as modals. */
.winkels-card:hover {
    box-shadow: var(--winkels-shadow-lg);
    border-color: var(--winkels-border-strong);
}

.winkels-card-premium {
    background: linear-gradient(180deg, #fff 0%, #fdfcff 100%);
    border-radius: var(--winkels-radius-xl);
    box-shadow: var(--winkels-shadow-lg);
    border: 1px solid var(--winkels-border);
    overflow: hidden;
    position: relative;
}

/* Gradient hairline along the top edge — the cheapest "expensive" detail */
.winkels-card-premium::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: var(--winkels-gradient-vivid);
    opacity: 0.9;
}

/* ——— Stats ——— */
.winkels-stat {
    background: var(--winkels-gradient-vivid);
    color: #fff;
    border-radius: var(--winkels-radius-xl);
    padding: 1.5rem;
    box-shadow: var(--winkels-glow), var(--winkels-inset-top);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--winkels-ease), box-shadow 0.4s var(--winkels-ease);
}

.winkels-stat:hover {
    transform: translateY(-4px);
    box-shadow: var(--winkels-glow-lg), var(--winkels-inset-top);
}

.winkels-stat::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(closest-side at 82% 8%, rgba(255, 255, 255, 0.3), transparent),
        radial-gradient(closest-side at 4% 96%, rgba(40, 8, 82, 0.34), transparent);
    pointer-events: none;
}

/* Light sweep on hover */
.winkels-stat::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 45%;
    inset-inline-start: -60%;
    background: var(--winkels-gradient-sheen);
    transition: inset-inline-start 0.75s var(--winkels-ease);
    pointer-events: none;
}

.winkels-stat:hover::after { inset-inline-start: 120%; }

.winkels-stat > * { position: relative; z-index: 1; }

.winkels-stat .value {
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    text-shadow: 0 2px 12px rgba(40, 8, 82, 0.35);
    font-variant-numeric: tabular-nums;
}

.badge.badge-xs {
    padding: 0.12rem 0.42rem;
    font-size: 0.62rem;
    gap: 0.2rem;
}

.badge.badge-xs::before {
    width: 0.28rem;
    height: 0.28rem;
}

/* ——— Merchant orders page ——— */
.mk-orders-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mk-orders-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0.75rem;
}

.mk-orders-toolbar--solo {
    justify-content: flex-end;
}

.mk-orders-main-tabs {
    flex: 1 1 18rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.mk-orders-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.55rem;
    margin-inline-start: 0.35rem;
    padding: 0.08rem 0.42rem;
    border-radius: 999px;
    background: rgba(117, 31, 232, 0.1);
    color: #751fe8;
    font-style: normal;
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.mk-perf-view.is-active .mk-orders-tab-count {
    background: rgba(117, 31, 232, 0.16);
    color: #5b21b6;
}

.mk-orders-toolbar-actions {
    display: flex;
    align-items: center;
    margin-inline-start: auto;
}

.mk-orders-boards {
    margin: 0;
    align-items: center;
}

.mk-orders-board-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    margin-inline-start: 0.35rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: rgba(74, 37, 169, 0.08);
    color: #4a25a9;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.merchant-page-branch.is-active .mk-orders-board-count {
    background: rgba(58, 26, 134, 0.12);
}

.merchant-page-branch.is-alert {
    border-color: rgba(234, 88, 12, 0.35);
    color: #c2410c;
}

.merchant-page-branch.is-alert.is-active {
    background: #fff7ed;
    border-color: #fb923c;
    color: #9a3412;
}

.mk-orders-page .mk-expenses-filters-card {
    margin: 0;
    padding: 0.85rem 1rem;
}

.mk-orders-page .mk-account-filters .menu-field {
    margin-bottom: 0;
    flex: 1 1 9.5rem;
    min-width: 9rem;
}

.mk-orders-page .mk-account-filters .menu-field-label {
    font-size: 0.68rem;
    margin-bottom: 0.18rem;
}

.mk-orders-page .mk-account-filters .winkels-input {
    min-height: 2.15rem;
    padding: 0.4rem 0.55rem;
    font-size: 0.78rem;
}

.mk-orders-card {
    overflow: hidden;
}

.mk-orders-card table.winkels-table th,
.mk-orders-card table.winkels-table td {
    padding: 0.55rem 0.75rem;
    font-size: 0.74rem;
}

.mk-orders-card table.winkels-table th {
    font-size: 0.64rem;
}

.mk-orders-card table.winkels-table .badge {
    padding: 0.18rem 0.5rem;
    font-size: 0.64rem;
}

.mk-orders-card table.winkels-table .badge::before {
    width: 0.32rem;
    height: 0.32rem;
}

.mk-orders-card table.winkels-table .order-ref-link {
    font-size: 0.72rem;
}

.mk-orders-customer {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.mk-orders-datetime {
    display: flex;
    flex-direction: column;
    gap: 0.12rem;
    min-width: 0;
    white-space: nowrap;
}

.mk-orders-col-when {
    width: 4rem;
    max-width: 4rem;
    padding-inline: 0.45rem !important;
}

.mk-orders-date {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--winkels-text, #2a2540);
}

.mk-orders-time {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--winkels-text-muted);
}

.mk-orders-age-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.08rem;
}

.mk-orders-age-k {
    font-size: 0.58rem;
    font-weight: 700;
    color: #8a8498;
    line-height: 1.1;
}

.mk-orders-age-range {
    font-size: 0.58rem;
    font-weight: 700;
    color: #5a4478;
    line-height: 1.1;
}

.mk-orders-age {
    display: inline-block;
    min-width: 4.5rem;
    font-size: 0.68rem;
    font-weight: 800;
    color: #4a25a9;
    font-variant-numeric: tabular-nums;
    unicode-bidi: isolate;
    direction: ltr;
    white-space: nowrap;
}

.mk-orders-age.is-frozen {
    color: #3c0f79;
    font-weight: 800;
}

.mk-orders-age.is-late {
    color: #dc2626;
    font-weight: 800;
    animation: mk-orders-age-pulse 1.15s ease-in-out infinite;
}

.mk-orders-age.is-frozen.is-late {
    color: #3c0f79;
    animation: none;
}

@keyframes mk-orders-age-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

.mk-orders-source {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.22rem;
}

.mk-orders-source .badge {
    max-width: 100%;
}

.mk-orders-customer-name {
    font-weight: 600;
    color: var(--winkels-text, #2a2540);
}

.mk-orders-customer-phone {
    font-size: 0.68rem;
    color: var(--winkels-text-muted);
}

.mk-orders-pagination {
    border-top: 1px solid rgba(74, 37, 169, 0.08);
}

body.rtl .mk-orders-pagination nav,
body.rtl .mk-orders-pagination .pagination {
    direction: rtl;
    justify-content: flex-start;
}

body.rtl .mk-orders-boards .merchant-page-brands__label {
    margin-inline-end: 0.35rem;
}

.admin-theme-yellow-pop .mk-expenses-head--compact {
    margin-bottom: 0.5rem !important;
}

.admin-theme-yellow-pop .mk-expenses-head--compact h2 {
    font-size: 1.2rem;
    margin-bottom: 0.1rem;
}

.admin-theme-yellow-pop .mk-expenses-head--compact p {
    font-size: 0.76rem;
}

/* Legacy board cards (super-admin / other panels) */
a.winkels-stat.mk-order-board {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    text-decoration: none;
    color: #3a1a86;
    min-height: 7.5rem;
    background: linear-gradient(160deg, #faf7ff 0%, #fff 55%);
    border: 1px solid rgba(74, 37, 169, 0.1);
    box-shadow: 0 8px 22px rgba(58, 26, 134, 0.06);
}

a.winkels-stat.mk-order-board .value {
    color: #4a25a9;
    text-shadow: none;
}

a.winkels-stat.mk-order-board .mk-order-board-label {
    opacity: 0.82;
    font-weight: 700;
}

a.winkels-stat.mk-order-board .mk-order-board-hint {
    color: rgba(58, 26, 134, 0.72);
    opacity: 1;
}

a.winkels-stat.mk-order-board.is-active {
    box-shadow: 0 0 0 3px #eee24b, 0 10px 24px rgba(74, 37, 169, 0.14);
}

a.winkels-stat.mk-order-board.is-hot {
    background: linear-gradient(145deg, #c2410c 0%, #751fe8 78%);
    border-color: transparent;
    color: #fff;
}

a.winkels-stat.mk-order-board.is-hot .value,
a.winkels-stat.mk-order-board.is-hot .mk-order-board-hint {
    color: #fff;
}

a.winkels-stat.mk-order-board.is-good {
    background: linear-gradient(145deg, #15803d 0%, #751fe8 80%);
    border-color: transparent;
    color: #fff;
}

a.winkels-stat.mk-order-board.is-good .value,
a.winkels-stat.mk-order-board.is-good .mk-order-board-hint {
    color: #fff;
}

.mk-order-board-hint {
    margin: 0.35rem 0 0;
    font-size: 0.72rem;
    line-height: 1.35;
    opacity: 0.82;
    font-weight: 600;
}

/* ——— Buttons ——— */
.btn-winkels {
    background: var(--winkels-gradient);
    color: var(--winkels-brand-white);
    font-weight: 600;
    padding: 0.65rem 1.45rem;
    border-radius: 0.85rem;
    border: none;
    cursor: pointer;
    transition: transform 0.3s var(--winkels-ease), box-shadow 0.3s var(--winkels-ease), background 0.3s var(--winkels-ease);
    box-shadow: var(--winkels-glow), var(--winkels-inset-top);
    font-family: var(--winkels-font-display);
    font-size: 0.925rem;
    letter-spacing: -0.01em;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* Vivid layer fades in underneath the label instead of a flat brightness bump */
.btn-winkels::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--winkels-gradient-vivid);
    opacity: 0;
    transition: opacity 0.3s var(--winkels-ease);
}

.btn-winkels::after {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    width: 40%;
    inset-inline-start: -50%;
    background: var(--winkels-gradient-sheen);
    transition: inset-inline-start 0.6s var(--winkels-ease);
}

.btn-winkels:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: var(--winkels-glow-lg), var(--winkels-inset-top);
}

.btn-winkels:hover:not(:disabled)::before { opacity: 1; }
.btn-winkels:hover:not(:disabled)::after { inset-inline-start: 130%; }
.btn-winkels:active:not(:disabled) { transform: translateY(0) scale(0.985); }

.btn-winkels:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.btn-winkels-outline {
    background: rgba(255, 255, 255, 0.7);
    border: 1.5px solid var(--winkels-purple-300);
    color: var(--winkels-purple-700);
    font-weight: 600;
    padding: 0.6rem 1.3rem;
    border-radius: 0.85rem;
    cursor: pointer;
    transition: all 0.3s var(--winkels-ease);
    font-family: inherit;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
    backdrop-filter: blur(6px);
}

.btn-winkels-outline:hover {
    background: var(--winkels-purple-50);
    border-color: var(--winkels-purple-500);
    color: var(--winkels-purple-800);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(117, 31, 232, 0.16);
}

.btn-winkels-outline:active { transform: translateY(0); }

.btn-winkels-outline.light {
    border-color: rgba(255, 255, 255, 0.45);
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.btn-winkels-outline.light:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #fff;
    color: #fff;
}

/* Gold accent button for standout actions */
.btn-winkels-gold {
    background: var(--winkels-brand-yellow);
    color: var(--winkels-purple-900);
    font-weight: 700;
    padding: 0.65rem 1.45rem;
    border-radius: 0.85rem;
    border: none;
    cursor: pointer;
    font-family: var(--winkels-font-display);
    font-size: 0.925rem;
    box-shadow: 0 6px 18px rgba(231, 224, 111, 0.45), var(--winkels-inset-top);
    transition: transform 0.3s var(--winkels-ease), box-shadow 0.3s var(--winkels-ease);
}

.btn-winkels-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(231, 224, 111, 0.55), var(--winkels-inset-top);
}

.btn-danger-soft {
    background: linear-gradient(180deg, #fff5f5 0%, #fee2e2 100%);
    color: #b91c1c;
    border: 1px solid #fecaca;
    padding: 0.55rem 1.05rem;
    border-radius: 0.8rem;
    cursor: pointer;
    font-family: inherit;
    font-weight: 600;
    transition: all 0.25s var(--winkels-ease);
}

.btn-danger-soft:hover {
    background: linear-gradient(180deg, #fee2e2 0%, #fecaca 100%);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.22);
    transform: translateY(-1px);
}

/* ——— Forms ——— */
.winkels-input {
    width: 100%;
    border: 1.5px solid #e7e2f5;
    border-radius: 0.85rem;
    padding: 0.7rem 0.95rem;
    background: linear-gradient(180deg, #fff 0%, #fdfcff 100%);
    color: var(--winkels-text);
    font-family: inherit;
    font-size: 0.925rem;
    transition: border-color 0.25s var(--winkels-ease), box-shadow 0.25s var(--winkels-ease), background 0.25s var(--winkels-ease);
    box-shadow: inset 0 1px 2px rgba(40, 8, 82, 0.04);
}

.winkels-input:hover:not(:focus):not(:disabled) { border-color: var(--winkels-purple-200); }

.winkels-input:focus {
    outline: none;
    border-color: var(--winkels-purple-500);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(117, 31, 232, 0.14), 0 4px 14px rgba(117, 31, 232, 0.1);
}

.winkels-input:disabled {
    background: #f6f5fa;
    color: var(--winkels-text-muted);
    cursor: not-allowed;
}

.winkels-input::placeholder { color: #a7a3ba; }

label, .menu-field-label {
    font-weight: 600;
    letter-spacing: -0.005em;
}

/* Native selects get the brand chevron instead of the OS arrow */
select.winkels-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%237c3aed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 1.05rem;
    padding-right: 2.4rem;
}

body.rtl select.winkels-input {
    background-position: left 0.75rem center;
    padding-right: 0.95rem;
    padding-left: 2.4rem;
}

.cat-picker {
    position: relative;
}

.cat-picker-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    min-height: 2.7rem;
    padding: 0.4rem 2.2rem 0.4rem 0.7rem;
    border: 1px solid var(--winkels-border, #e5e0ef);
    border-radius: 0.85rem;
    background: #fff;
    text-align: start;
    cursor: pointer;
}

body.rtl .cat-picker-box {
    padding: 0.4rem 0.7rem 0.4rem 2.2rem;
}

.cat-picker-box:hover {
    border-color: var(--winkels-purple-200, #d8c4f8);
}

.cat-picker-placeholder {
    color: #a7a3ba;
    font-size: 0.92rem;
}

.cat-picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: #f3e8ff;
    color: #6d28d9;
    font-size: 0.82rem;
    line-height: 1.3;
}

.cat-picker-chip-x {
    font-size: 1rem;
    line-height: 1;
    opacity: 0.65;
}

.cat-picker-caret {
    position: absolute;
    inset-inline-end: 0.85rem;
    color: #7c3aed;
    pointer-events: none;
}

.cat-picker-menu {
    position: absolute;
    z-index: 40;
    inset-inline: 0;
    top: calc(100% + 4px);
    max-height: 16rem;
    overflow: auto;
    padding: 0.3rem;
    border: 1px solid var(--winkels-border, #e5e0ef);
    border-radius: 0.85rem;
    background: #fff;
    box-shadow: 0 10px 28px rgba(40, 8, 82, 0.1);
}

.cat-picker-opt {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 0.6rem;
    background: transparent;
    text-align: start;
    font-size: 0.92rem;
    cursor: pointer;
}

.cat-picker-opt:hover {
    background: #f6f1ff;
}

.cat-picker-opt.is-on {
    background: #f3e8ff;
    color: #6d28d9;
    font-weight: 600;
}

.cat-picker-opt.is-off {
    opacity: 0.38;
    pointer-events: none;
}

.cat-check-field {
    direction: inherit;
}

.cat-check-count {
    margin: 0.15rem 0 0.65rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--lux-muted, #667085);
}

.cat-check-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr));
    gap: 0.55rem;
    direction: inherit;
}

.cat-check {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    margin: 0;
    padding: 0.7rem 0.4rem 0.6rem;
    border: 1px solid var(--lux-line, #e5e9ef);
    border-radius: 0.9rem;
    background: #fff;
    cursor: pointer;
    text-align: center;
    min-height: 7.4rem;
}

.cat-check.is-on {
    border-color: #751fe8;
    background: rgba(117, 31, 232, 0.08);
    box-shadow: 0 0 0 1px #751fe8;
}

.cat-check.is-off {
    opacity: 0.42;
    cursor: not-allowed;
}

.cat-check input[type="checkbox"] {
    position: absolute;
    top: 0.4rem;
    inset-inline-start: 0.4rem;
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: #751fe8;
    z-index: 1;
}

.cat-check img,
.cat-check-fallback {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 50%;
    object-fit: cover;
    background: #f4f6f9;
    flex-shrink: 0;
}

.cat-check-fallback {
    display: grid;
    place-items: center;
    font-weight: 800;
    color: #751fe8;
}

.cat-check-name {
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--lux-ink, #1a2330);
}

input[type="checkbox"], input[type="radio"] { accent-color: var(--winkels-purple); }

/* ——— Tabs ——— */
.winkels-tabs {
    display: flex;
    width: fit-content;
    max-width: 100%;
    gap: 0.3rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
    padding: 0.35rem;
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius);
    box-shadow: var(--winkels-shadow-sm);
    backdrop-filter: blur(10px);
}

.winkels-tabs a,
.winkels-tabs button {
    padding: 0.6rem 1.15rem;
    color: var(--winkels-text-muted);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: color 0.25s var(--winkels-ease), background 0.25s var(--winkels-ease), box-shadow 0.25s var(--winkels-ease);
    border-radius: 0.7rem;
}

/* Tabs driven by Alpine rather than links, so the whole form still submits. */
.winkels-tabs button {
    background: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

.winkels-tabs a:hover,
.winkels-tabs button:hover {
    color: var(--winkels-purple-700);
    background: var(--winkels-purple-50);
}

.winkels-tabs a.active,
.winkels-tabs button.active {
    color: #fff;
    background: var(--winkels-gradient);
    box-shadow: var(--winkels-glow), var(--winkels-inset-top);
}

.link-winkels {
    color: var(--winkels-purple-700);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(124, 92, 224, 0.35);
    text-underline-offset: 0.15em;
    transition: color 0.2s var(--winkels-ease);
}

.link-winkels:hover {
    color: var(--winkels-purple-800);
    text-decoration-color: currentColor;
}

/* ——— Alerts ——— */
.alert-success,
.alert-error {
    padding: 0.95rem 1.2rem;
    border-radius: var(--winkels-radius);
    margin-bottom: 1rem;
    font-weight: 550;
    position: relative;
    overflow: hidden;
    padding-inline-start: 1.5rem;
    box-shadow: var(--winkels-shadow-sm);
    animation: winkels-slide-in 0.45s var(--winkels-ease);
}

.alert-success::before,
.alert-error::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
}

.alert-success {
    background: linear-gradient(135deg, #f0fdf9 0%, #d1fae5 100%);
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-success::before { background: linear-gradient(180deg, #34d399, #059669); }

.alert-error {
    background: linear-gradient(135deg, #fff5f5 0%, #fee2e2 100%);
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-error::before { background: linear-gradient(180deg, #f87171, #dc2626); }

@keyframes winkels-slide-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ——— Badges ——— */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    white-space: nowrap;
}

/* Status dot picks up the text colour automatically */
.badge::before {
    content: '';
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 22%, transparent);
}

.badge-pending {
    background: linear-gradient(180deg, #fffbeb, #fef3c7);
    color: #92400e;
    border-color: #fde68a;
}

.badge-muted {
    background: #f3f4f6;
    color: #4b5563;
    border-color: #e5e7eb;
}

.badge-active, .badge-paid, .badge-confirmed {
    background: linear-gradient(180deg, #ecfdf5, #d1fae5);
    color: #047857;
    border-color: #a7f3d0;
}

.badge-cancelled, .badge-failed {
    background: linear-gradient(180deg, #fff1f2, #fee2e2);
    color: #b91c1c;
    border-color: #fecaca;
}

.badge-preparing {
    background: linear-gradient(180deg, var(--winkels-purple-50), var(--winkels-purple-100));
    color: var(--winkels-purple-700);
    border-color: var(--winkels-purple-200);
}

.badge-cod {
    background: linear-gradient(180deg, #f4eefe, #ede6fb);
    color: #4a25a9;
    border-color: rgba(117, 31, 232, 0.22);
}

.badge-pickup {
    background: linear-gradient(180deg, #fff8c5, #e7e06f);
    color: #280852;
    border-color: rgba(117, 31, 232, 0.35);
}

.badge-delivery {
    background: linear-gradient(180deg, #f4eefe, #ede6fb);
    color: #4a25a9;
    border-color: rgba(117, 31, 232, 0.22);
}

/* ——— Storefront ——— */
.storefront-hero {
    background: linear-gradient(150deg, var(--winkels-purple-950) 0%, var(--winkels-purple-800) 35%, var(--winkels-purple-600) 70%, var(--winkels-magenta) 100%);
    color: #fff;
    padding: 3rem 1rem 4.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 24px 60px rgba(40, 8, 82, 0.35);
}

.storefront-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 82%, rgba(255,255,255,0.16) 0%, transparent 46%),
        radial-gradient(circle at 82% 14%, rgba(232, 121, 249, 0.35) 0%, transparent 44%),
        radial-gradient(circle at 50% 0%, rgba(231, 224, 111, 0.16) 0%, transparent 38%);
    pointer-events: none;
}

/* Curved lip blends the hero into the page below */
.storefront-hero::after {
    content: '';
    position: absolute;
    inset-inline: -5%;
    bottom: -2.5rem;
    height: 5rem;
    background: var(--winkels-bg);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
}

.storefront-hero > * { position: relative; z-index: 1; }

.storefront-hero h1 {
    font-weight: 800;
    letter-spacing: -0.035em;
    text-shadow: 0 4px 24px rgba(40, 8, 82, 0.5);
}

.storefront-brand-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 56rem;
    margin: 0 auto 1.5rem;
}

.floating-cart {
    position: fixed;
    bottom: 1.5rem;
    left: 1.5rem;
    z-index: 50;
    background: var(--winkels-gradient-vivid);
    color: #fff;
    padding: 0.95rem 1.6rem;
    border-radius: 9999px;
    font-weight: 750;
    letter-spacing: -0.01em;
    box-shadow: var(--winkels-glow-lg), var(--winkels-inset-top);
    text-decoration: none;
    transition: transform 0.35s var(--winkels-ease), box-shadow 0.35s var(--winkels-ease);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.floating-cart:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 22px 52px rgba(117, 31, 232, 0.55), var(--winkels-inset-top);
    color: #fff;
}

body.rtl .floating-cart { left: auto; right: 1.5rem; }

.menu-item-card {
    background: linear-gradient(180deg, #fff 0%, #fdfcff 100%);
    border-radius: var(--winkels-radius-xl);
    overflow: hidden;
    box-shadow: var(--winkels-shadow-sm);
    border: 1px solid var(--winkels-border);
    transition: transform 0.4s var(--winkels-ease), box-shadow 0.4s var(--winkels-ease), border-color 0.4s var(--winkels-ease);
    position: relative;
}

.menu-item-card::after {
    content: '';
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 3px;
    background: var(--winkels-gradient-vivid);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.4s var(--winkels-ease);
}

.menu-item-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--winkels-shadow-lg);
    border-color: var(--winkels-border-strong);
}

.menu-item-card:hover::after { transform: scaleX(1); }

.menu-item-card img {
    transition: transform 0.6s var(--winkels-ease);
}

.menu-item-card:hover img { transform: scale(1.06); }

.text-brand { color: var(--winkels-purple) !important; }
.text-brand-link { color: var(--winkels-purple-700); text-decoration: none; font-weight: 600; }
.text-brand-link:hover { color: var(--winkels-purple-900); text-decoration: underline; }

.bg-brand-soft { background: var(--winkels-purple-soft) !important; }
.border-brand { border-color: var(--winkels-purple-light) !important; }

.category-title {
    color: var(--winkels-purple-900);
    font-weight: 800;
    letter-spacing: -0.03em;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.category-title::after {
    content: '';
    flex: 1;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, var(--winkels-purple-300), transparent);
}

body.rtl .category-title::after {
    background: linear-gradient(270deg, var(--winkels-purple-300), transparent);
}

/* Gradient text reads as the premium accent on prices */
.price-tag {
    background: var(--winkels-gradient-vivid);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-weight: 800;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.price-tag-prefix {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* ——— Storefront item cards ——— */
.menu-item-media {
    position: relative;
    height: 10.5rem;
    overflow: hidden;
    background:
        radial-gradient(closest-side at 30% 25%, rgba(255, 255, 255, 0.55), transparent),
        linear-gradient(135deg, var(--winkels-purple-200) 0%, var(--winkels-purple-300) 60%, var(--winkels-purple-400) 100%);
}

.menu-item-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.menu-item-media-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.9rem;
    opacity: 0.8;
    filter: drop-shadow(0 3px 8px rgba(40, 8, 82, 0.28));
}

.menu-item-flag {
    position: absolute;
    top: 0.7rem;
    inset-inline-start: 0.7rem;
    padding: 0.28rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #fff;
    backdrop-filter: blur(6px);
    box-shadow: 0 4px 12px rgba(40, 8, 82, 0.28);
}

.menu-item-flag-out { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.menu-item-flag-low { background: linear-gradient(135deg, #fbbf24, #d97706); color: #40230a; }

.menu-item-body { padding: 1.1rem 1.15rem 1.2rem; }

.menu-item-title {
    font-weight: 750;
    font-size: 1.02rem;
    letter-spacing: -0.02em;
    margin: 0;
}

.menu-item-desc {
    font-size: 0.84rem;
    color: var(--winkels-text-muted);
    margin: 0.35rem 0 0;
    line-height: 1.55;
}

.menu-item-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.95rem;
}

.menu-item-add {
    font-size: 0.82rem;
    padding: 0.5rem 1.05rem;
    border-radius: 0.75rem;
    flex-shrink: 0;
}

/* ——— Storefront modifier sheet ——— */
.storefront-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 85;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
    background:
        radial-gradient(circle at 50% 100%, rgba(117, 31, 232, 0.28), transparent 62%),
        rgba(22, 10, 45, 0.62);
    backdrop-filter: blur(12px) saturate(1.15);
    animation: winkels-fade-in 0.25s var(--winkels-ease);
}

@media (min-width: 640px) {
    .storefront-sheet-backdrop { align-items: center; }
}

.storefront-sheet {
    background: linear-gradient(180deg, #fff 0%, #fdfcff 100%);
    width: 100%;
    max-width: 27rem;
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.6rem;
    border-radius: 1.5rem 1.5rem 0 0;
    border: 1px solid rgba(117, 31, 232, 0.14);
    box-shadow: var(--winkels-shadow-xl);
    position: relative;
    animation: winkels-modal-in 0.35s var(--winkels-ease);
}

@media (min-width: 640px) {
    .storefront-sheet { border-radius: var(--winkels-radius-xl); }
}

.storefront-sheet-title {
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    margin: 0;
}

.storefront-sheet-close {
    position: absolute;
    top: 0.85rem;
    inset-inline-end: 0.85rem;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 9999px;
    background: rgba(117, 31, 232, 0.1);
    color: var(--winkels-purple-800);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.storefront-sheet-hero {
    margin: -0.35rem -0.35rem 1rem;
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--winkels-purple-50);
}

.storefront-sheet-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.storefront-sheet-desc {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--winkels-text-muted);
    margin: 0.45rem 0 1rem;
    white-space: pre-line;
}

.storefront-sheet-sub {
    font-size: 0.84rem;
    color: var(--winkels-text-muted);
    margin: 0.3rem 0 1.25rem;
}

.storefront-sheet-group { margin-bottom: 1.35rem; }

.storefront-sheet-group-title {
    font-size: 0.8rem;
    font-weight: 750;
    color: var(--winkels-purple-800);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.6rem;
}

.storefront-sheet-required { color: var(--winkels-danger); }

.storefront-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    margin-bottom: 0.4rem;
    border: 1.5px solid #ece8f8;
    border-radius: 0.85rem;
    background: #fff;
    cursor: pointer;
    transition: all 0.25s var(--winkels-ease);
}

.storefront-option:hover {
    border-color: var(--winkels-purple-300);
    background: var(--winkels-purple-50);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(117, 31, 232, 0.12);
}

.storefront-option:has(input:checked) {
    border-color: var(--winkels-purple-500);
    background: linear-gradient(180deg, var(--winkels-purple-50), var(--winkels-purple-100));
    box-shadow: 0 0 0 3px rgba(117, 31, 232, 0.12);
}

.storefront-option-main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    font-size: 0.9rem;
    font-weight: 550;
}

.storefront-option-price {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--winkels-purple-700);
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.storefront-sheet-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem;
    margin: 1.35rem 0 1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--winkels-purple-100);
}

.storefront-sheet-qty-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--winkels-text-muted);
}

.storefront-sheet-qty .qty-stepper {
    margin-inline-start: auto;
}

.storefront-sheet-error {
    color: #b91c1c;
    font-size: 0.84rem;
    font-weight: 600;
    margin: 0 0 0.85rem;
}

.storefront-sheet-actions {
    display: flex;
    gap: 0.6rem;
}

.storefront-sheet-actions > * { flex: 1; }

.sf-clash-list {
    list-style: none;
    margin: 0 0 1.1rem;
    padding: 0;
    border: 1px solid var(--winkels-border);
    border-radius: 0.85rem;
    overflow: hidden;
}

.sf-clash-line {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    font-size: 0.92rem;
    border-bottom: 1px solid var(--winkels-border);
}

.sf-clash-line:last-child { border-bottom: 0; }

.sf-clash-qty {
    color: var(--winkels-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* ——— Storefront: delivery-app layout ——— */
.sf-shell {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.sf-cover {
    position: relative;
    height: 11rem;
    background: linear-gradient(150deg, var(--winkels-purple-950) 0%, var(--winkels-purple-800) 40%, var(--winkels-purple-600) 75%, var(--winkels-magenta) 100%);
    overflow: hidden;
}

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

.sf-cover-img.is-logo-cover {
    object-fit: contain;
    padding: 1.5rem 28%;
    background: var(--winkels-purple-soft, #f3e8ff);
}

/* Scrim keeps the top bar legible over any cover photo */
.sf-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(closest-side at 85% 10%, rgba(232, 121, 249, 0.3), transparent),
        linear-gradient(180deg, rgba(22, 10, 45, 0.55) 0%, rgba(22, 10, 45, 0.1) 45%, rgba(22, 10, 45, 0.35) 100%);
}

.sf-cover-bar {
    position: relative;
    z-index: 1;
    max-width: 44rem;
    margin: 0 auto;
    padding: calc(0.85rem + env(safe-area-inset-top, 0px)) 1rem 0.85rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.sf-cover-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    max-width: 55%;
    text-decoration: none;
    color: #fff;
}

.sf-cover-brand-logo {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.55rem;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.sf-cover-brand-name {
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sf-cover-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.35rem;
}

.sf-cover-link {
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    text-decoration: none;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(8px);
    white-space: nowrap;
}

.sf-cover-link:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.sf-cover-link-static {
    cursor: default;
    pointer-events: none;
}

.sf-auth-shell {
    min-height: 100vh;
    background: var(--winkels-bg);
}

.sf-auth-head {
    max-width: 28rem;
    margin: 0 auto;
    padding: 1rem 1rem 0;
}

.sf-auth-brand {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.75rem;
    font-weight: 800;
    color: var(--winkels-purple-900);
}

.sf-auth-brand-logo {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.55rem;
    object-fit: cover;
}

.sf-auth-main {
    max-width: 28rem;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
}

.sf-auth-main .mk-auth-card {
    margin-top: 0.5rem;
}

.sf-cover-bar .brand-logo--on-dark .brand-logo-text {
    color: #fff;
}

.sf-cover-bar .brand-logo--on-dark img {
    filter: brightness(0) invert(1);
}

.sf-lang {
    display: flex;
    gap: 0.3rem;
    padding: 0.2rem;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 9999px;
    backdrop-filter: blur(8px);
}

.sf-lang a {
    padding: 0.3rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: all 0.25s var(--winkels-ease);
}

.sf-lang a.is-on { background: #fff; color: var(--winkels-purple-800); }
.sf-lang a:not(.is-on):hover { background: rgba(255, 255, 255, 0.18); color: #fff; }

/* Profile block lifts over the cover, like a delivery app store page */
.sf-profile {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-top: -3.25rem;
    padding: 1.15rem;
    background: linear-gradient(180deg, #fff 0%, #fdfcff 100%);
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-xl);
    box-shadow: var(--winkels-shadow-lg);
    position: relative;
}

.sf-avatar {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 1.15rem;
    flex-shrink: 0;
    overflow: hidden;
    background: var(--winkels-gradient-vivid);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--winkels-glow), 0 0 0 3px #fff;
}

.sf-avatar img { width: 100%; height: 100%; object-fit: cover; }

.sf-avatar span {
    color: #fff;
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1;
}

.sf-profile-text { min-width: 0; flex: 1; }

.sf-schedule-panel {
    margin-bottom: 1rem;
    padding: 1rem 1.1rem;
    border-radius: var(--winkels-radius-lg);
    border: 1px solid #fecaca;
    background: linear-gradient(180deg, #fff7f7 0%, #fff 100%);
}

.sf-schedule-title {
    font-size: 1rem;
    font-weight: 800;
    margin: 0 0 0.35rem;
    color: #991b1b;
}

.sf-schedule-text,
.sf-schedule-sub,
.sf-schedule-selected {
    margin: 0.25rem 0 0;
    font-size: 0.9rem;
    color: var(--winkels-text-muted);
}

.sf-schedule-form { margin-top: 0.85rem; }

.sf-schedule-selected {
    margin-top: 0.75rem;
    font-weight: 700;
    color: var(--winkels-purple-700);
}

.sf-name {
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    margin: 0;
}

.sf-city {
    color: var(--winkels-text-muted);
    font-size: 0.86rem;
    margin: 0.15rem 0 0;
}

.sf-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.7rem;
}

.sf-chip {
    padding: 0.28rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.73rem;
    font-weight: 700;
    background: var(--winkels-purple-50);
    color: var(--winkels-purple-800);
    border: 1px solid var(--winkels-purple-200);
    white-space: nowrap;
}

.sf-chip-open {
    background: linear-gradient(180deg, #ecfdf5, #d1fae5);
    color: #047857;
    border-color: #a7f3d0;
}

.sf-chip-closed {
    background: linear-gradient(180deg, #fff1f2, #fee2e2);
    color: #b91c1c;
    border-color: #fecaca;
}

.sf-chip-free {
    background: var(--winkels-gradient-gold);
    color: #4a2c04;
    border-color: transparent;
}

.sf-free-delivery-banner {
    margin: 0.85rem 1rem 0;
    padding: 0.7rem 0.95rem;
    border-radius: 0.95rem;
    background: #fff8dc;
    border: 1.5px solid rgba(202, 168, 40, 0.38);
    color: #4a2c04;
    font-weight: 800;
    text-align: center;
    line-height: 1.45;
}

.mk-card-meta-item.is-free-delivery {
    color: #9a7b12;
    font-weight: 800;
}

.sf-controls {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin: 1rem 0;
}

.sf-branch-select { width: auto; min-width: 11rem; flex: 1; }

/* ——— Sticky category strip ——— */
.sf-catnav {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(247, 245, 253, 0.88);
    backdrop-filter: blur(14px) saturate(1.2);
    border-bottom: 1px solid var(--winkels-border);
    box-shadow: 0 4px 20px rgba(40, 8, 82, 0.06);
}

.sf-catnav-track {
    max-width: 44rem;
    margin: 0 auto;
    padding: 0.65rem 1rem;
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    scrollbar-width: none;
    scroll-behavior: smooth;
}

.sf-catnav-track::-webkit-scrollbar { display: none; }

.sf-cat {
    padding: 0.5rem 1.05rem;
    border-radius: 9999px;
    font-size: 0.86rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    color: var(--winkels-purple-800);
    background: #fff;
    border: 1px solid var(--winkels-purple-200);
    transition: all 0.28s var(--winkels-ease);
}

.sf-cat:hover { border-color: var(--winkels-purple-400); }

.sf-cat.is-active {
    background: var(--winkels-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--winkels-glow);
}

/* ——— Menu sections ——— */
.sf-menu { padding-bottom: 6rem; }

.sf-section { scroll-margin-top: 4.5rem; padding-top: 1.5rem; }

.sf-section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--winkels-purple-900);
    margin: 0 0 0.85rem;
}

.sf-section-count {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--winkels-purple-700);
    background: var(--winkels-purple-100);
    border-radius: 9999px;
    padding: 0.15rem 0.5rem;
}

.sf-rows { display: grid; gap: 0.65rem; }

/* Whole row is the tap target, matching delivery-app behaviour */
.sf-row {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    text-align: start;
    padding: 0.9rem;
    font-family: inherit;
    background: linear-gradient(180deg, #fff 0%, #fdfcff 100%);
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-lg);
    box-shadow: var(--winkels-shadow-sm);
    cursor: pointer;
    transition: box-shadow 0.3s var(--winkels-ease), border-color 0.3s var(--winkels-ease), transform 0.3s var(--winkels-ease);
}

.sf-row:hover:not(:disabled) {
    box-shadow: var(--winkels-shadow);
    border-color: var(--winkels-border-strong);
    transform: translateY(-2px);
}

.sf-row:active:not(:disabled) { transform: translateY(0) scale(0.995); }

.sf-row.is-sold-out {
    cursor: not-allowed;
    opacity: 0.6;
}

.sf-row-text {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
    flex: 1;
}

.sf-row-name {
    font-weight: 700;
    font-size: 0.98rem;
    letter-spacing: -0.02em;
    color: var(--winkels-text);
}

.sf-row-desc {
    font-size: 0.82rem;
    color: var(--winkels-text-muted);
    line-height: 1.5;
}

.sf-row-price {
    margin-top: auto;
    padding-top: 0.35rem;
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--winkels-purple-700);
    font-variant-numeric: tabular-nums;
}

/* A cut price means nothing without the price it was cut from, so the old one
   stays on the row beside the new one rather than being replaced by it. Muted
   and lighter so the eye still lands on what the dish costs today. */
.sf-row-was {
    margin-inline-start: 0.4rem;
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--winkels-gray-400, #9ca3af);
    text-decoration-thickness: 1.5px;
}

.sf-row-offer {
    align-self: flex-start;
    margin-top: 0.3rem;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: var(--winkels-purple-100);
    color: var(--winkels-purple-800);
}

/* Announced at the top of the menu because a blanket offer is the one kind a
   shopper cannot spot from any single row. */
.sf-offer-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, var(--winkels-purple-600), var(--winkels-purple-800));
    color: #fff;
}

.sf-offer-banner-badge {
    flex-shrink: 0;
    font-weight: 900;
    font-size: 1.05rem;
    padding: 0.3rem 0.6rem;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.2);
    font-variant-numeric: tabular-nums;
}

.sf-offer-banner-sub {
    display: block;
    font-size: 0.78rem;
    opacity: 0.85;
}

/* The sheet is the last thing seen before adding to the cart, so the saving is
   confirmed here with the extras counted in. */
.storefront-sheet-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--winkels-gray-200, #e5e7eb);
    font-weight: 700;
}

.storefront-sheet-total-value {
    font-weight: 900;
    color: var(--winkels-purple-700);
    font-variant-numeric: tabular-nums;
}

.storefront-sheet-total-value s {
    margin-inline-end: 0.4rem;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--winkels-gray-400, #9ca3af);
}

.storefront-sheet-saving {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--winkels-success);
}

/* The merchant's own price table, where the winning offer is shown. */
.offer-price-now {
    color: var(--winkels-purple-700);
    font-variant-numeric: tabular-nums;
}

.sf-row-flag {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
}

.sf-row-flag-out { background: #fee2e2; color: #b91c1c; }
.sf-row-flag-low { background: #fef3c7; color: #92400e; }

.sf-row-media {
    position: relative;
    width: 5.75rem;
    height: 5.75rem;
    flex-shrink: 0;
    border-radius: var(--winkels-radius);
    overflow: hidden;
    background:
        radial-gradient(closest-side at 30% 25%, rgba(255, 255, 255, 0.5), transparent),
        linear-gradient(135deg, var(--winkels-purple-200), var(--winkels-purple-400));
}

.sf-row-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s var(--winkels-ease);
}

.sf-row:hover:not(:disabled) .sf-row-media img { transform: scale(1.07); }

.sf-row-media-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    opacity: 0.8;
    filter: drop-shadow(0 2px 6px rgba(40, 8, 82, 0.25));
}

.sf-row-add {
    position: absolute;
    bottom: 0.3rem;
    inset-inline-end: 0.3rem;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 0.55rem;
    background: var(--winkels-gradient-vivid);
    color: #fff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 10px rgba(40, 8, 82, 0.35);
    transition: transform 0.28s var(--winkels-ease);
}

.sf-row:hover:not(:disabled) .sf-row-add { transform: scale(1.12); }
.sf-row.is-sold-out .sf-row-add { display: none; }

/* ——— Sticky cart bar ——— */
.sf-cartbar {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 50;
    max-width: 44rem;
    margin: 0 auto 1rem;
    width: calc(100% - 2rem);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.15rem;
    border-radius: 9999px;
    background: var(--winkels-gradient-vivid);
    color: #fff;
    text-decoration: none;
    font-weight: 750;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: var(--winkels-glow-lg), var(--winkels-inset-top);
    transition: transform 0.3s var(--winkels-ease), box-shadow 0.3s var(--winkels-ease);
    animation: winkels-slide-up 0.35s var(--winkels-ease);
}

@keyframes winkels-slide-up {
    from { opacity: 0; transform: translateY(1.25rem); }
    to { opacity: 1; transform: translateY(0); }
}

.sf-cartbar:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 52px rgba(117, 31, 232, 0.55), var(--winkels-inset-top);
    color: #fff;
}

.sf-cartbar-badge {
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.4rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.sf-cartbar-label { flex: 1; min-width: 0; }

.sf-cartbar-action {
    display: block;
    font-size: 0.95rem;
    font-weight: 800;
}

.sf-cartbar-sub {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    opacity: 0.92;
    margin-top: 0.1rem;
}

.sf-cartbar-arrow {
    font-size: 1.25rem;
    font-weight: 800;
    flex-shrink: 0;
    opacity: 0.95;
}

.sf-cartbar-total {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 480px) {
    .sf-profile { gap: 0.8rem; padding: 1rem; }
    .sf-avatar { width: 3.5rem; height: 3.5rem; border-radius: 0.95rem; }
    .sf-avatar span { font-size: 1.5rem; }
    .sf-name { font-size: 1.2rem; }
    .sf-row-media { width: 4.75rem; height: 4.75rem; }
    .sf-controls > * { width: 100%; }
}

/* Single-column rows look sparse on wide screens, so pair them up */
@media (min-width: 900px) {
    .sf-shell,
    .sf-cover-bar,
    .sf-catnav-track { max-width: 56rem; }

    .sf-cartbar { max-width: 56rem; }

    .sf-rows {
        grid-template-columns: 1fr 1fr;
        gap: 0.8rem;
    }
}

/* ——— Storefront page chrome (cart / checkout) ——— */
.storefront-page-head { margin-bottom: 1.75rem; }

.storefront-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--winkels-purple-700);
    text-decoration: none;
    margin-bottom: 0.85rem;
    transition: gap 0.25s var(--winkels-ease), color 0.25s var(--winkels-ease);
}

.storefront-back::before { content: '‹'; font-size: 1.15rem; line-height: 1; }
body.rtl .storefront-back::before { content: '›'; }

.storefront-back:hover { color: var(--winkels-purple-900); gap: 0.65rem; }

.storefront-page-title {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.035em;
    margin: 0;
    background: linear-gradient(135deg, var(--winkels-purple-900), var(--winkels-purple-600));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.storefront-page-sub {
    color: var(--winkels-text-muted);
    font-size: 0.9rem;
    margin: 0.3rem 0 0;
}

/* ——— Cart ——— */
.cart-list {
    padding: 0.4rem 0.25rem;
    margin-bottom: 1.25rem;
}

.cart-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.1rem;
    border-bottom: 1px solid var(--winkels-purple-100);
}

.cart-line:last-child { border-bottom: none; }

.cart-line-info { min-width: 0; }

.cart-line-name {
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0 0 0.6rem;
    letter-spacing: -0.015em;
}

.cart-line-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

.cart-line-remove {
    background: none;
    border: none;
    padding: 0;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    color: #b91c1c;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.2s;
}

.cart-line-remove:hover { opacity: 1; text-decoration: underline; }

/* Segmented stepper reads cleaner than three loose buttons */
.qty-stepper {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(180deg, #fff, var(--winkels-purple-50));
    border: 1.5px solid var(--winkels-purple-200);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: var(--winkels-shadow-sm);
}

.qty-stepper-btn {
    width: 2rem;
    height: 1.95rem;
    border: none;
    background: transparent;
    color: var(--winkels-purple-700);
    font-size: 1rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s var(--winkels-ease);
}

.qty-stepper-btn:hover:not(:disabled) { background: var(--winkels-purple-100); }
.qty-stepper-btn:disabled { opacity: 0.35; cursor: not-allowed; }

.qty-stepper-value {
    min-width: 2rem;
    text-align: center;
    font-size: 0.88rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    border-inline: 1.5px solid var(--winkels-purple-200);
    align-self: stretch;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cart-summary {
    background: linear-gradient(180deg, #fff 0%, var(--winkels-purple-50) 100%);
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-xl);
    padding: 1.35rem;
    box-shadow: var(--winkels-shadow);
}

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.cart-summary-total {
    font-size: 1rem;
    font-weight: 800;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px dashed var(--winkels-purple-200);
}

.cart-summary-total .price-tag { font-size: 1.3rem; }

.cart-checkout {
    display: block;
    width: 100%;
    text-align: center;
    text-decoration: none;
    padding-block: 0.85rem;
    font-size: 1rem;
}

/* ——— Login ——— */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(150deg, #1a0538 0%, var(--winkels-purple-950) 25%, var(--winkels-purple-800) 55%, var(--winkels-purple-600) 80%, var(--winkels-brand-purple) 100%);
    position: relative;
    overflow: hidden;
}

/* Two slowly drifting orbs keep the backdrop alive without motion sickness */
.login-page::before,
.login-page::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.login-page::before {
    width: 42rem;
    height: 42rem;
    background: radial-gradient(circle, rgba(232, 121, 249, 0.28) 0%, transparent 68%);
    top: -14rem;
    right: -12rem;
    animation: winkels-float 16s ease-in-out infinite;
}

.login-page::after {
    width: 34rem;
    height: 34rem;
    background: radial-gradient(circle, rgba(231, 224, 111, 0.16) 0%, transparent 66%);
    bottom: -12rem;
    left: -10rem;
    animation: winkels-float 20s ease-in-out infinite reverse;
}

@keyframes winkels-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(2.5rem, -1.75rem) scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .login-page::before,
    .login-page::after,
    .notification-badge { animation: none; }
    .nav-group[open] > .nav-group-links { animation: none; }
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(24px) saturate(1.3);
    border-radius: 1.75rem;
    padding: 2.75rem;
    box-shadow: 0 32px 80px rgba(26, 5, 56, 0.5), var(--winkels-inset-top);
    border: 1px solid rgba(255, 255, 255, 0.55);
    position: relative;
    z-index: 1;
    overflow: hidden;
    animation: winkels-modal-in 0.55s var(--winkels-ease);
}

.login-card::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 4px;
    background: var(--winkels-gradient-vivid);
}

.login-logo {
    display: block;
    margin: 0 auto 1.5rem;
    height: 4rem;
    border-radius: 1.15rem;
    box-shadow: var(--winkels-glow-lg);
}

.login-panel-hints {
    background: var(--winkels-purple-50, #f5f3ff);
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-lg);
    padding: 0.85rem 1rem;
}

.login-panel-hints-title {
    margin: 0 0 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--winkels-muted, #6b7280);
    text-align: center;
}

.login-panel-hints-table {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.login-panel-hints-row {
    display: grid;
    grid-template-columns: minmax(5rem, 1fr) minmax(0, 1.4fr) auto;
    gap: 0.35rem 0.5rem;
    align-items: center;
    font-size: 0.8rem;
}

.login-panel-hints-label {
    font-weight: 600;
    color: var(--winkels-purple-deep, #5b21b6);
}

.login-panel-fill {
    border: none;
    background: transparent;
    padding: 0;
    text-align: start;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: inherit;
}

.login-panel-fill:hover {
    color: var(--winkels-purple-deep, #5b21b6);
}

.login-panel-pass {
    font-size: 0.75rem;
    padding: 0.15rem 0.35rem;
    border-radius: 0.35rem;
    background: #fff;
    border: 1px solid var(--winkels-border);
}

@media (max-width: 420px) {
    .login-panel-hints-row {
        grid-template-columns: 1fr;
    }
}

/* ——— Tables ——— */
table.winkels-table { width: 100%; border-collapse: separate; border-spacing: 0; }

table.winkels-table th, table.winkels-table td {
    padding: 0.9rem 1.1rem;
    text-align: start;
    border-bottom: 1px solid rgba(117, 31, 232, 0.07);
}

table.winkels-table th {
    background: linear-gradient(180deg, var(--winkels-purple-50) 0%, var(--winkels-purple-100) 100%);
    font-weight: 700;
    color: var(--winkels-purple-800);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    border-bottom: 1px solid var(--winkels-purple-200);
    position: sticky;
    top: 0;
    z-index: 2;
}

table.winkels-table tbody tr {
    transition: background 0.2s var(--winkels-ease);
}

table.winkels-table tbody tr:hover {
    background: linear-gradient(90deg, var(--winkels-purple-50), rgba(246, 244, 255, 0.3));
}

table.winkels-table tbody tr:last-child td { border-bottom: none; }

.mk-orders-table-wrap {
    overflow-x: auto;
}

.order-ref-link {
    font-weight: 800;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    color: var(--winkels-purple);
    text-decoration: underline;
    text-underline-offset: 0.18em;
}

.order-ref-link:hover {
    color: var(--winkels-purple-800);
}

.mk-orders-open {
    white-space: nowrap;
}

.notification-badge {
    background: linear-gradient(135deg, #f87171, #dc2626);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    margin-inline-start: 0.35rem;
    box-shadow: 0 2px 8px rgba(220, 38, 38, 0.45);
    animation: winkels-pulse 2.2s ease-in-out infinite;
}

@keyframes winkels-pulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(220, 38, 38, 0.45); }
    50% { box-shadow: 0 2px 14px rgba(220, 38, 38, 0.75); }
}

.skeleton {
    background: linear-gradient(90deg, var(--winkels-purple-50) 25%, var(--winkels-purple-100) 50%, var(--winkels-purple-50) 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 0.5rem;
    height: 1rem;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.empty-state { padding: 3rem 2rem; }
[x-cloak] { display: none !important; }

/* ——— Utilities ——— */
.grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.25rem; }
.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.gap-2 { gap: 0.5rem; }
.gap-4 { gap: 1rem; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mt-4 { margin-top: 1rem; }
.p-4 { padding: 1rem; }
.p-6 { padding: 1.5rem; }
.text-sm { font-size: 0.875rem; }
.text-muted { color: var(--winkels-text-muted); }
.font-bold { font-weight: 700; }
.w-full { width: 100%; }
.hidden { display: none; }
[x-cloak] { display: none !important; }

.branch-selected {
    background: var(--winkels-purple-soft) !important;
    border: 1px solid var(--winkels-purple-light) !important;
}

.alert-banner-warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    color: #92400e;
}

.alert-banner-info,
.alert-banner-success {
    background: linear-gradient(135deg, #f0fdf9 0%, #d1fae5 100%);
    border: 1px solid #a7f3d0;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    color: #065f46;
}

.alert-banner-error {
    background: linear-gradient(135deg, #fff5f5 0%, #fee2e2 100%);
    border: 1px solid #fecaca;
    border-radius: 0.75rem;
    padding: 0.75rem 1rem;
    color: #991b1b;
}

@media (max-width: 768px) {
    .login-card { padding: 1.75rem; }
    .menu-editor-layout { grid-template-columns: 1fr !important; }
}

/* ——— Menu Editor ——— */
.menu-editor-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.menu-editor-stats {
    display: flex;
    gap: 0.75rem;
}

.menu-stat-pill {
    background: linear-gradient(180deg, #fff, var(--winkels-purple-50));
    color: var(--winkels-purple-800);
    padding: 0.45rem 1rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
    border: 1px solid var(--winkels-purple-200);
    box-shadow: var(--winkels-shadow-sm);
    font-variant-numeric: tabular-nums;
}

.menu-editor-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.menu-editor-layout {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: 1.5rem;
    align-items: start;
}

.menu-editor-layout--readonly {
    grid-template-columns: 1fr;
}

.menu-form-panel {
    background: #fff;
    border-radius: var(--winkels-radius-lg);
    box-shadow: var(--winkels-shadow-lg);
    border: 1px solid var(--winkels-border);
    overflow: hidden;
    position: sticky;
    top: 1rem;
}

.menu-form-panel-header {
    background: var(--winkels-gradient-deep);
    color: #fff;
    padding: 1.35rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.menu-form-panel-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(closest-side at 90% -20%, rgba(117, 31, 232, 0.4), transparent),
        radial-gradient(closest-side at 10% 130%, rgba(139, 92, 246, 0.36), transparent);
    pointer-events: none;
}

.menu-form-panel-header > * { position: relative; z-index: 1; }

.menu-form-panel-header h3 {
    font-size: 1.15rem;
    font-weight: 750;
    margin: 0;
    letter-spacing: -0.025em;
}

.menu-form-panel-header p {
    font-size: 0.8rem;
    opacity: 0.85;
    margin: 0.25rem 0 0;
}

.menu-form-body {
    padding: 1.5rem;
    max-height: calc(100vh - 12rem);
    overflow-y: auto;
}

.menu-form-section {
    margin-bottom: 1.75rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #f3f4f6;
}

.menu-form-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.menu-form-section-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--winkels-purple);
    margin-bottom: 1rem;
}

.menu-form-section-title span.icon {
    width: 1.5rem;
    height: 1.5rem;
    background: var(--winkels-purple-soft);
    border-radius: 0.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.menu-field {
    margin-bottom: 1rem;
}

.menu-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.4rem;
}

.menu-field .hint {
    font-size: 0.72rem;
    color: var(--winkels-text-muted);
    margin-top: 0.3rem;
}

.menu-field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.menu-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: #fafafa;
    border-radius: 0.75rem;
    margin-bottom: 0.5rem;
    border: 1px solid #f3f4f6;
    overflow: hidden;
}

.menu-toggle-label {
    flex: 1;
    min-width: 0;
    font-size: 0.875rem;
    font-weight: 500;
    margin: 0;
    color: #334155;
    line-height: 1.4;
}

.menu-toggle-row label.menu-toggle {
    flex-shrink: 0;
    margin: 0;
    font-weight: normal;
    line-height: 0;
}

.menu-toggle {
    position: relative;
    display: inline-block;
    width: 2.75rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.menu-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.menu-toggle-slider {
    position: absolute;
    inset: 0;
    background: #d1d5db;
    border-radius: 9999px;
    cursor: pointer;
    transition: background 0.25s ease;
    overflow: hidden;
}

.menu-toggle-slider::before {
    content: '';
    position: absolute;
    width: 1.15rem;
    height: 1.15rem;
    inset-inline-start: 0.15rem;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s ease, inset-inline-start 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

.menu-toggle input:checked + .menu-toggle-slider {
    background: var(--winkels-purple);
}

.menu-toggle input:checked + .menu-toggle-slider::before {
    transform: translateY(-50%) translateX(1.25rem);
}

body.rtl .menu-toggle input:checked + .menu-toggle-slider::before {
    transform: translateY(-50%) translateX(-1.25rem);
}

.menu-upload-zone {
    border: 2px dashed #d1d5db;
    border-radius: 1rem;
    padding: 1.5rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.25s;
    background: #fafafa;
}

.menu-upload-zone:hover,
.menu-upload-zone.dragover {
    border-color: var(--winkels-purple-light);
    background: var(--winkels-purple-soft);
}

.menu-upload-zone img.preview {
    max-height: 120px;
    border-radius: 0.75rem;
    margin: 0 auto 0.75rem;
    object-fit: cover;
}

.menu-upload-zone .upload-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.price-preview {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    background: var(--winkels-purple-soft);
    color: var(--winkels-purple-dark);
    padding: 0.35rem 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.5rem;
}

.menu-form-footer {
    padding: 1rem 1.5rem;
    background: #fafafa;
    border-top: 1px solid #f3f4f6;
    display: flex;
    gap: 0.75rem;
    justify-content: flex-end;
}

.menu-tree-panel {
    background: #fff;
    border-radius: var(--winkels-radius-lg);
    box-shadow: var(--winkels-shadow);
    border: 1px solid var(--winkels-border);
    padding: 1.5rem;
}

.menu-category-block {
    border: 1px solid #ede9fe;
    border-radius: 1rem;
    margin-bottom: 1.25rem;
    overflow: hidden;
    background: #fff;
}

.menu-category-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    background: linear-gradient(90deg, var(--winkels-purple-soft) 0%, #fff 100%);
    border-bottom: 1px solid #ede9fe;
}

.menu-category-head .title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-weight: 700;
    color: var(--winkels-purple-dark);
}

.menu-category-head .count {
    font-size: 0.72rem;
    background: #fff;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    color: var(--winkels-text-muted);
    font-weight: 600;
}

.menu-item-card-editor {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid #f9fafb;
    transition: background 0.2s;
}

.menu-item-card-editor:last-child { border-bottom: none; }
.menu-item-card-editor:hover { background: #fafafa; }

.menu-item-thumb {
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
    object-fit: cover;
    background: var(--winkels-purple-soft);
    flex-shrink: 0;
}

.menu-item-thumb-placeholder {
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
    background: var(--winkels-purple-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.menu-item-body { flex: 1; min-width: 0; }
.menu-item-body h4 { font-weight: 600; margin: 0 0 0.25rem; }
.menu-item-meta { font-size: 0.8rem; color: var(--winkels-text-muted); }
.menu-item-tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.5rem; }
.menu-item-tag {
    font-size: 0.68rem;
    padding: 0.15rem 0.5rem;
    border-radius: 9999px;
    background: #f3f4f6;
    color: #6b7280;
    font-weight: 600;
}
.menu-item-tag.available { background: #d1fae5; color: #065f46; }
.menu-item-tag.unavailable { background: #fee2e2; color: #991b1b; }

.menu-item-actions {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    align-items: flex-end;
}

.menu-modifiers-block {
    margin: 0 1.25rem 1rem;
    padding: 1rem;
    background: #fafafa;
    border-radius: 0.75rem;
    border: 1px solid #f3f4f6;
}

.menu-modifier-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: #fff;
    border: 1px solid #e5e7eb;
    padding: 0.25rem 0.6rem;
    border-radius: 0.5rem;
    font-size: 0.75rem;
    margin: 0.15rem;
}

.menu-empty-form {
    padding: 3rem 2rem;
    text-align: center;
    color: var(--winkels-text-muted);
}

.menu-empty-form .icon { font-size: 3rem; margin-bottom: 1rem; opacity: 0.4; }

.drag-handle {
    cursor: grab;
    color: #9ca3af;
    padding: 0.25rem;
    user-select: none;
}
.drag-handle:active { cursor: grabbing; }

.menu-child-category {
    margin: 0.75rem 1.25rem 1rem;
    padding: 0.75rem 1rem;
    background: #fafafa;
    border-radius: 0.75rem;
    border-inline-start: 3px solid var(--winkels-purple-light);
}

@media (max-width: 1024px) {
    .menu-editor-layout { grid-template-columns: 1fr; }
    .menu-form-panel { position: static; }
    .menu-field-grid { grid-template-columns: 1fr; }
}

/* ——— Menu Table & Modal ——— */
.menu-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
    align-items: center;
    margin-bottom: 1.25rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius);
    box-shadow: var(--winkels-shadow-sm);
    backdrop-filter: blur(12px);
}

.menu-toolbar-search {
    flex: 1;
    min-width: 200px;
}

.menu-table-wrap {
    overflow-x: auto;
    border-radius: var(--winkels-radius-xl);
    border: 1px solid var(--winkels-border);
    background: linear-gradient(180deg, #fff 0%, #fdfcff 100%);
    box-shadow: var(--winkels-shadow-lg);
}

.menu-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 0.875rem;
}

.menu-table thead {
    background: linear-gradient(180deg, var(--winkels-purple-50) 0%, var(--winkels-purple-100) 100%);
}

.menu-table th {
    text-align: start;
    padding: 0.95rem 1rem;
    font-size: 0.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--winkels-purple-800);
    white-space: nowrap;
    border-bottom: 1px solid var(--winkels-purple-200);
}

.menu-table td {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid rgba(117, 31, 232, 0.07);
    vertical-align: middle;
}

/* Accent bar slides in on the hovered row */
.menu-table tbody tr {
    position: relative;
    transition: background 0.22s var(--winkels-ease);
}

.menu-table tbody tr::after {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--winkels-gradient-vivid);
    opacity: 0;
    transition: opacity 0.22s var(--winkels-ease);
}

.menu-table tbody tr:hover {
    background: linear-gradient(90deg, var(--winkels-purple-50), rgba(246, 244, 255, 0.25));
}

.menu-table tbody tr:hover::after { opacity: 1; }
.menu-table tbody tr:last-child td { border-bottom: none; }

.menu-table-thumb {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 0.7rem;
    object-fit: cover;
    background: var(--winkels-purple-soft);
    box-shadow: 0 2px 8px rgba(40, 8, 82, 0.14), 0 0 0 1px rgba(117, 31, 232, 0.1);
    transition: transform 0.3s var(--winkels-ease);
}

.menu-table tbody tr:hover .menu-table-thumb { transform: scale(1.07); }

.menu-table-thumb-empty {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.6rem;
    background: var(--winkels-purple-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: #9ca3af;
}

.menu-table-name strong { display: block; font-weight: 600; color: #111827; }
.menu-table-name span { font-size: 0.75rem; color: var(--winkels-text-muted); }

.menu-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 600;
}

.menu-badge-success { background: #d1fae5; color: #065f46; }
.menu-badge-danger { background: #fee2e2; color: #991b1b; }
.menu-badge-muted { background: #f3f4f6; color: #6b7280; }
.menu-badge-purple { background: var(--winkels-purple-soft); color: var(--winkels-purple-dark); }

.menu-table-actions {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.menu-table-actions-rich {
    flex-direction: column;
    align-items: stretch;
    min-width: 11rem;
}

.menu-table-actions-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

.menu-table-actions-row .menu-action-btn {
    width: auto;
    min-width: 2.1rem;
    padding: 0.4rem 0.55rem;
    text-align: center;
}

.menu-status-form {
    margin: 0;
    min-width: 8.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.menu-status-select {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border-radius: 0.65rem;
    font-size: 0.72rem;
    font-weight: 700;
    border: 1px solid #e7e2f5;
    background: #fff;
    cursor: pointer;
    color: #374151;
    font-family: inherit;
    transition: box-shadow 0.25s var(--winkels-ease), transform 0.25s var(--winkels-ease);
    box-shadow: var(--winkels-shadow-sm);
}

.menu-status-select:hover { transform: translateY(-1px); }

.menu-status-select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(117, 31, 232, 0.16);
}

.menu-status-select.menu-status-available {
    border-color: #a7f3d0;
    background: linear-gradient(180deg, #f0fdf9, #d1fae5);
    color: #047857;
}

.menu-status-select.menu-status-hidden {
    border-color: #fde68a;
    background: linear-gradient(180deg, #fffbeb, #fef3c7);
    color: #92400e;
}

.menu-status-select.menu-status-sold_out {
    border-color: #fecaca;
    background: linear-gradient(180deg, #fff5f5, #fee2e2);
    color: #b91c1c;
}

.menu-action-delete {
    border-color: #fecaca;
    background: linear-gradient(180deg, #fff5f5, #fee2e2);
    color: #b91c1c;
}

.menu-action-delete:hover:not(:disabled) {
    background: linear-gradient(180deg, #fee2e2, #fecaca);
    box-shadow: 0 6px 16px rgba(239, 68, 68, 0.24);
}

.menu-action-form {
    display: block;
    margin: 0;
}

.menu-action-btn {
    display: block;
    width: 100%;
    text-align: start;
    padding: 0.4rem 0.65rem;
    border-radius: 0.55rem;
    font-size: 0.72rem;
    font-weight: 600;
    border: 1px solid #e5e7eb;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.menu-action-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: var(--winkels-shadow-sm);
}

.menu-action-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.menu-action-view {
    border-color: #c7d2fe;
    background: #eef2ff;
    color: #4338ca;
}

.menu-action-edit {
    border-color: #ddd6fe;
    background: #f5f3ff;
    color: var(--winkels-purple-dark);
}

.menu-action-pause {
    border-color: #fde68a;
    background: #fffbeb;
    color: #92400e;
}

.menu-action-resume {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #065f46;
}

.menu-action-soldout {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

.menu-table-status {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-start;
}

.menu-badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.winkels-modal-view-mode .winkels-modal-editor {
    pointer-events: none;
    user-select: none;
}

.winkels-modal-view-mode .winkels-modal-editor input,
.winkels-modal-view-mode .winkels-modal-editor select,
.winkels-modal-view-mode .winkels-modal-editor textarea,
.winkels-modal-view-mode .winkels-modal-editor button {
    cursor: default;
}

.winkels-modal-view-mode .winkels-modal-preview-panel {
    box-shadow: inset 0 0 0 2px rgba(117, 31, 232, 0.12);
}

.menu-section-title {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--winkels-purple-800);
    margin: 1.75rem 0 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    letter-spacing: -0.01em;
}

/* Trailing gradient rule gives each section a defined start */
.menu-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, var(--winkels-purple-200), transparent);
}

body.rtl .menu-section-title::after {
    background: linear-gradient(270deg, var(--winkels-purple-200), transparent);
}

.menu-pagination .pagination,
.menu-pagination nav {
    display: flex;
    gap: 0.3rem;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}

.menu-pagination a,
.menu-pagination span {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.7rem;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--winkels-purple-700);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--winkels-border);
    transition: all 0.25s var(--winkels-ease);
}

.menu-pagination a:hover {
    background: var(--winkels-purple-50);
    border-color: var(--winkels-purple-400);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(117, 31, 232, 0.18);
}

.menu-pagination [aria-current="page"] span,
.menu-pagination span[aria-current="page"] {
    background: var(--winkels-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--winkels-glow);
}

.menu-pagination [aria-disabled="true"] span,
.menu-pagination .disabled span {
    opacity: 0.4;
    cursor: not-allowed;
}

.winkels-modal-backdrop {
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 50% 0%, rgba(117, 31, 232, 0.3), transparent 60%),
        rgba(22, 10, 45, 0.68);
    backdrop-filter: blur(14px) saturate(1.2);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    animation: winkels-fade-in 0.28s var(--winkels-ease);
}

@keyframes winkels-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes winkels-modal-in {
    from { opacity: 0; transform: translateY(14px) scale(0.975); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.winkels-modal {
    background: linear-gradient(180deg, #fff 0%, #fdfcff 100%);
    border-radius: var(--winkels-radius-xl);
    width: 100%;
    max-width: 720px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--winkels-shadow-xl), 0 0 0 1px rgba(117, 31, 232, 0.14), var(--winkels-inset-top);
    overflow: hidden;
    position: relative;
    animation: winkels-modal-in 0.38s var(--winkels-ease);
}

.winkels-modal::before {
    content: '';
    position: absolute;
    inset-inline: 0;
    top: 0;
    height: 3px;
    background: var(--winkels-gradient-vivid);
    z-index: 3;
}

.winkels-modal-lg { max-width: 820px; }
.winkels-modal-xl { max-width: 1060px; }

.order-detail-modal-backdrop:not(.is-open) {
    display: none !important;
}

.order-detail-modal {
    width: min(68rem, calc(100vw - 1.25rem));
    max-width: min(68rem, calc(100vw - 1.25rem));
    max-height: min(92vh, 58rem);
}

.order-detail-modal .winkels-modal-scroll {
    overflow-x: auto;
}

.order-detail-modal .order-head {
    margin-top: 0;
    margin-bottom: 1rem;
}

.order-detail-modal-status {
    margin: 0;
    padding: 1.5rem 0;
    color: var(--winkels-text-muted);
    text-align: center;
}

body.order-modal-open {
    overflow: hidden;
}

.winkels-modal-split {
    display: grid;
    grid-template-columns: 1fr 300px;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.winkels-modal-editor {
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}

.winkels-modal-item-shell {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.winkels-modal-preview-panel {
    background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
    border-inline-start: 1px solid #e2e8f0;
    overflow-y: auto;
    padding: 1.25rem;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}

.storefront-live-preview-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--winkels-purple);
    margin: 0 0 0.25rem;
}

.storefront-live-preview-hint {
    font-size: 0.75rem;
    color: var(--winkels-text-muted);
    margin: 0 0 1rem;
}

.storefront-preview-card {
    box-shadow: var(--winkels-shadow);
}

.storefront-preview-card:hover {
    transform: none;
}

.storefront-preview-image-placeholder {
    height: 9rem;
    background: var(--winkels-purple-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    font-size: 0.8rem;
}

.storefront-preview-image-placeholder span {
    font-size: 2rem;
    margin-bottom: 0.35rem;
}

.storefront-preview-modifiers {
    margin-top: 1.25rem;
}

.storefront-preview-modifiers-title {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    margin-bottom: 0.65rem;
}

.storefront-preview-modifier-sheet {
    background: #fff;
    border-radius: 1rem;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: var(--winkels-shadow-sm);
}

.storefront-preview-option {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-align: start;
    padding: 0.55rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    margin-bottom: 0.35rem;
    background: #fff;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
    gap: 0.5rem;
}

.storefront-preview-option-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.storefront-preview-option-thumb,
.storefront-modifier-option-thumb {
    width: 2rem;
    height: 2rem;
    border-radius: 0.375rem;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
}

.storefront-preview-option:hover {
    border-color: var(--winkels-purple-light);
    background: var(--winkels-purple-soft);
}

.storefront-preview-option.selected {
    border-color: var(--winkels-purple);
    background: var(--winkels-purple-soft);
    box-shadow: 0 0 0 1px var(--winkels-purple);
}

.storefront-preview-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed #e2e8f0;
    font-size: 0.875rem;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

@media (max-width: 900px) {
    .winkels-modal-split {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }
    .winkels-modal-preview-panel {
        border-inline-start: none;
        border-top: 1px solid #e2e8f0;
        max-height: 280px;
        order: -1;
    }
}

.winkels-modal-header {
    padding: 1.4rem 1.6rem;
    background: var(--winkels-gradient-deep);
    color: #fff;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.winkels-modal-header::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(closest-side at 92% -10%, rgba(117, 31, 232, 0.45), transparent),
        radial-gradient(closest-side at 12% 120%, rgba(139, 92, 246, 0.4), transparent);
    pointer-events: none;
}

.winkels-modal-header > * { position: relative; z-index: 1; }

.winkels-modal-header h3 {
    font-size: 1.2rem;
    font-weight: 750;
    margin: 0;
    letter-spacing: -0.025em;
    text-shadow: 0 2px 10px rgba(40, 8, 82, 0.4);
}

.winkels-modal-header p { font-size: 0.8rem; opacity: 0.8; margin: 0.3rem 0 0; }

.winkels-modal-close {
    background: rgba(255,255,255,0.14);
    border: 1px solid rgba(255,255,255,0.18);
    color: #fff;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.65rem;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    flex-shrink: 0;
    transition: all 0.25s var(--winkels-ease);
}

.winkels-modal-close:hover {
    background: rgba(255,255,255,0.26);
    transform: rotate(90deg);
}

.winkels-modal-close:hover { background: rgba(255,255,255,0.25); }

.winkels-modal-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e5e7eb;
    background: #fafafa;
    overflow-x: auto;
    flex-shrink: 0;
}

.winkels-modal-form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.winkels-modal-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 1.5rem;
    -webkit-overflow-scrolling: touch;
}

.winkels-modal-tab {
    padding: 0.85rem 1.15rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #6b7280;
    border: none;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all 0.2s;
}

.winkels-modal-tab:hover { color: var(--winkels-purple); background: #fff; }

.winkels-modal-tab.active {
    color: var(--winkels-purple);
    background: #fff;
    border-bottom-color: var(--winkels-purple);
}

.menu-tab-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 0.3rem;
    margin-inline-start: 0.35rem;
    background: var(--winkels-purple);
    color: #fff;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
}

.winkels-modal-tab.active .menu-tab-badge {
    background: var(--winkels-purple-dark);
}

.winkels-modal-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.winkels-modal-footer {
    padding: 1.05rem 1.6rem;
    border-top: 1px solid var(--winkels-purple-100);
    background: linear-gradient(180deg, #fbfaff 0%, var(--winkels-purple-50) 100%);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.winkels-modal-footer-split {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.menu-modifier-card {
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    background: #fafafa;
}

.menu-modifier-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.menu-modifier-option-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.5rem;
    align-items: start;
    padding: 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.5rem;
    background: #fff;
}

.menu-modifier-option-image {
    position: relative;
    flex-shrink: 0;
}

.menu-modifier-option-image-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px dashed #c4b5fd;
    border-radius: 0.5rem;
    background: var(--winkels-purple-soft);
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}

.menu-modifier-option-image-btn:hover {
    border-color: var(--winkels-purple);
    background: #ede9fe;
}

.menu-modifier-option-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.menu-modifier-option-image-placeholder {
    font-size: 1.1rem;
    line-height: 1;
}

.menu-modifier-option-image-clear {
    position: absolute;
    top: -0.35rem;
    inset-inline-end: -0.35rem;
    width: 1.1rem;
    height: 1.1rem;
    border-radius: 9999px;
    border: 1px solid #fca5a5;
    background: #fef2f2;
    color: #dc2626;
    font-size: 0.75rem;
    line-height: 1;
    cursor: pointer;
}

.menu-modifier-option-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.35rem;
}

.menu-modifier-option-field {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.menu-modifier-option-field span {
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    color: #64748b;
}

.menu-modifier-option-actions {
    display: flex;
    align-items: center;
}

@media (max-width: 768px) {
    .menu-modifier-option-fields {
        grid-template-columns: 1fr;
    }
}

.menu-modifier-options {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 0.75rem;
}

.menu-info-box {
    background: var(--winkels-purple-soft);
    border: 1px solid #ddd6fe;
    border-radius: 0.75rem;
    padding: 1rem;
    font-size: 0.875rem;
    color: var(--winkels-purple-dark);
    text-align: center;
}

/* ——— Premium Modal ——— */
.winkels-modal-premium {
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow:
        0 0 0 1px rgba(117, 31, 232, 0.08),
        0 30px 80px rgba(91, 33, 182, 0.22),
        0 12px 32px rgba(30, 27, 46, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
}

.winkels-modal-premium .winkels-modal-header {
    padding: 1.35rem 1.65rem;
    background:
        radial-gradient(circle at top right, rgba(255,255,255,0.18), transparent 55%),
        linear-gradient(135deg, #7c3aed 0%, #6d28d9 48%, #5b21b6 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.winkels-modal-header-text { min-width: 0; }

.winkels-modal-eyebrow {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    opacity: 0.82;
    margin-bottom: 0.35rem;
}

.winkels-modal-premium .winkels-modal-header h3 {
    font-size: 1.28rem;
    letter-spacing: -0.02em;
}

.winkels-modal-premium .winkels-modal-close {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.75rem;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.18);
}

.winkels-modal-tabs-premium {
    padding: 0.85rem 1rem 0;
    gap: 0.45rem;
    background: linear-gradient(180deg, #faf8ff 0%, #f5f3ff 100%);
    border-bottom: 1px solid #ebe5ff;
    overflow-x: auto;
    scrollbar-width: none;
}

.winkels-modal-tabs-premium::-webkit-scrollbar { display: none; }

.winkels-modal-tabs-premium .winkels-modal-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1rem;
    border-radius: 0.85rem 0.85rem 0 0;
    font-size: 0.78rem;
    color: #64748b;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -1px;
}

.winkels-modal-tab-icon {
    font-size: 0.95rem;
    line-height: 1;
    opacity: 0.85;
}

.winkels-modal-tabs-premium .winkels-modal-tab:hover {
    color: var(--winkels-purple-dark);
    background: rgba(255, 255, 255, 0.72);
}

.winkels-modal-tabs-premium .winkels-modal-tab.active {
    color: var(--winkels-purple-dark);
    background: #fff;
    border-color: #ebe5ff;
    box-shadow: 0 -4px 16px rgba(117, 31, 232, 0.06);
}

.winkels-modal-scroll-premium {
    padding: 1.35rem;
    background:
        radial-gradient(circle at top left, rgba(237, 233, 254, 0.55), transparent 32%),
        linear-gradient(180deg, #ffffff 0%, #faf9ff 100%);
}

.menu-modal-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.menu-modal-section {
    background: #fff;
    border: 1px solid #ece8ff;
    border-radius: 1rem;
    padding: 1.15rem 1.2rem;
    box-shadow: 0 4px 18px rgba(117, 31, 232, 0.04);
}

.menu-modal-section-flat {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.menu-modal-section-hint {
    font-size: 0.82rem;
    color: var(--winkels-text-muted);
    margin: -0.35rem 0 1rem;
    line-height: 1.5;
}

.menu-modal-toggles {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-top: 0.75rem;
}

.menu-field-premium { margin-bottom: 1.05rem; }

.menu-field-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #475569;
    margin-bottom: 0.45rem;
}

.menu-field-required { color: #ef4444; }

.winkels-input-premium {
    min-height: 2.85rem;
    padding: 0.72rem 1rem;
    border: 1.5px solid #e8e4f3;
    border-radius: 0.85rem;
    background: linear-gradient(180deg, #ffffff 0%, #fdfcff 100%);
    font-size: 0.92rem;
    color: var(--winkels-text);
    box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.02);
}

.winkels-input-premium:hover {
    border-color: #d8ccf8;
}

.winkels-input-premium:focus {
    border-color: var(--winkels-purple);
    box-shadow:
        0 0 0 4px rgba(117, 31, 232, 0.1),
        inset 0 1px 2px rgba(15, 23, 42, 0.02);
}

.winkels-select-premium {
    appearance: none;
    background-image:
        linear-gradient(180deg, #ffffff 0%, #fdfcff 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%237c3aed' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat;
    background-position: 0 0, left 0.85rem center;
    background-size: auto, 1rem;
    padding-inline-start: 2.35rem;
}

body.ltr .winkels-select-premium {
    background-position: 0 0, right 0.85rem center;
    padding-inline-start: 1rem;
    padding-inline-end: 2.35rem;
}

textarea.winkels-input-premium {
    min-height: 6.5rem;
    resize: vertical;
    line-height: 1.55;
}

.menu-toggle-row-premium {
    background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
    border: 1px solid #ece8ff;
    border-radius: 0.9rem;
    padding: 0.9rem 1rem;
    margin-bottom: 0;
    box-shadow: 0 2px 8px rgba(117, 31, 232, 0.03);
}

.menu-toggle-row-premium .menu-toggle-label {
    font-weight: 600;
    color: #334155;
}

.menu-branch-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.35rem;
    border: 1px solid #ddd6fe;
    border-radius: 0.55rem;
    background: #faf5ff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.menu-branch-trigger:hover {
    background: #f3e8ff;
    border-color: #c4b5fd;
    transform: translateY(-1px);
}

.menu-branch-trigger-icon {
    font-size: 0.65rem;
    color: var(--winkels-purple-dark);
    opacity: 0.7;
}

.menu-branches-modal {
    max-width: 520px;
}

.menu-branch-picker {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.menu-branch-picker-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    background: #fff;
    cursor: pointer;
    transition: all 0.15s ease;
}

.menu-branch-picker-item:hover:not(.is-disabled) {
    border-color: #c4b5fd;
    background: #faf5ff;
}

.menu-branch-picker-item.is-active {
    border-color: #a78bfa;
    background: #f5f3ff;
}

.menu-branch-picker-item.is-disabled {
    opacity: 0.85;
    cursor: default;
}

.menu-branch-picker-item input {
    accent-color: var(--winkels-purple);
    flex-shrink: 0;
}

.menu-branch-picker-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.menu-branch-picker-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.menu-branch-picker-text strong {
    font-size: 0.85rem;
}

.menu-branch-picker-check {
    color: var(--winkels-purple);
    font-weight: 700;
    font-size: 0.9rem;
}

.menu-branches-empty {
    padding: 1rem;
    border-radius: 0.75rem;
    background: #f9fafb;
    color: #6b7280;
    font-size: 0.85rem;
    text-align: center;
}

.menu-branch-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.55rem;
    margin-top: 0.85rem;
}

.menu-branch-item {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.72rem 0.85rem;
    border: 1px solid #ece8ff;
    border-radius: 0.8rem;
    background: #fff;
    font-size: 0.86rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.menu-branch-item:hover {
    border-color: #d8ccf8;
    background: #faf8ff;
}

.menu-branch-item input {
    accent-color: var(--winkels-purple);
}

.menu-upload-zone-premium {
    border: 2px dashed #d8ccf8;
    border-radius: 1.1rem;
    padding: 2rem 1.5rem;
    background:
        radial-gradient(circle at center, rgba(237, 233, 254, 0.65), transparent 70%),
        linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
}

.menu-upload-zone-premium:hover,
.menu-upload-zone-premium.dragover {
    border-color: var(--winkels-purple);
    background: linear-gradient(180deg, #faf5ff 0%, #f3e8ff 100%);
    transform: translateY(-1px);
}

.menu-upload-zone-premium img.preview {
    max-height: 180px;
    border-radius: 1rem;
    box-shadow: var(--winkels-shadow);
}

.menu-item-thumb-premium {
    width: 100%;
    max-width: 220px;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: 1rem;
    box-shadow: var(--winkels-shadow);
    border: 1px solid #ece8ff;
}

.price-preview {
    padding: 0.55rem 0.9rem;
    border-radius: 9999px;
    border: 1px solid #ddd6fe;
    font-size: 0.82rem;
    margin-top: 0.75rem;
}

.winkels-modal-footer-premium {
    padding: 1rem 1.35rem;
    background: linear-gradient(180deg, #faf8ff 0%, #f5f3ff 100%);
    border-top: 1px solid #ebe5ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}

.winkels-modal-footer-premium .btn-winkels {
    min-width: 7.5rem;
    padding-inline: 1.35rem;
    box-shadow: 0 8px 20px rgba(117, 31, 232, 0.25);
}

.winkels-modal-preview-premium {
    background:
        radial-gradient(circle at top, rgba(237, 233, 254, 0.8), transparent 55%),
        linear-gradient(180deg, #f8fafc 0%, #eef2ff 100%);
    border-inline-start: 1px solid #e7e2ff;
}

.menu-modifier-card-premium {
    border: 1px solid #e7e2ff;
    border-radius: 1rem;
    padding: 1.1rem;
    margin-bottom: 0.85rem;
    background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
    box-shadow: 0 6px 20px rgba(117, 31, 232, 0.05);
}

.menu-modifier-card-title {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.menu-modifier-card-badge {
    width: 1.55rem;
    height: 1.55rem;
    border-radius: 0.55rem;
    background: var(--winkels-purple-soft);
    color: var(--winkels-purple-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 800;
}

.menu-modifier-required {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.85rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.75rem;
    background: #faf8ff;
    border: 1px solid #ece8ff;
    font-size: 0.84rem;
    font-weight: 600;
    color: #475569;
}

.menu-modifier-required input {
    accent-color: var(--winkels-purple);
}

.menu-modifier-options-block {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #e7e2ff;
}

.menu-modifier-options-title {
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--winkels-purple);
    margin-bottom: 0.75rem;
}

.menu-modifier-option-row-premium {
    padding: 0.75rem;
    border: 1px solid #ece8ff;
    border-radius: 0.9rem;
    background: #fff;
    box-shadow: 0 2px 10px rgba(117, 31, 232, 0.03);
}

.menu-modifier-add-option,
.menu-modifier-add-group {
    margin-top: 0.65rem;
}

.menu-modifier-option-flags {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    justify-content: center;
    padding-inline: 0.4rem;
}

.menu-inline-check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    color: var(--winkels-text-muted, #6b7280);
    cursor: pointer;
    white-space: nowrap;
}

.menu-inline-check input[type="checkbox"] {
    width: 0.95rem;
    height: 0.95rem;
    accent-color: var(--winkels-purple, #7c3aed);
}

.menu-table-name-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.menu-table-thumb-sm {
    width: 2rem;
    height: 2rem;
    border-radius: 0.5rem;
}

.menu-pagination {
    margin-top: 1rem;
    display: flex;
    justify-content: center;
}

.menu-image-current {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.menu-info-box-premium {
    border-radius: 1rem;
    padding: 1.15rem;
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
}

.menu-field-grid-tight {
    gap: 0.85rem;
}

.branch-hours-editor {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.branch-hours-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.65rem;
    background: #f5f3ff;
    border: 1px solid #ddd6fe;
    margin-bottom: 0.25rem;
}

.branch-hours-toolbar-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #4338ca;
}

.branch-hours-bulk-select {
    width: auto;
    min-width: 9rem;
    max-width: 100%;
    padding: 0.4rem 0.55rem !important;
    font-size: 0.82rem !important;
}

.branch-hours-bulk-times {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.branch-hours-bulk-spacer {
    flex: 1 1 auto;
}

.branch-hours-row {
    display: grid;
    grid-template-columns: 4.5rem 9.5rem 1fr;
    gap: 0.5rem;
    align-items: center;
    padding: 0.45rem 0.55rem;
    border: 1px solid #ece8ff;
    border-radius: 0.65rem;
    background: #fff;
}

.branch-hours-day {
    font-size: 0.82rem;
    font-weight: 700;
    color: #334155;
}

.branch-hours-mode {
    padding: 0.38rem 0.5rem !important;
    font-size: 0.8rem !important;
}

.branch-hours-panels {
    min-width: 0;
}

.branch-hours-times-inline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.branch-hours-times-stack {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.branch-hours-time-compact {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 600;
}

.branch-hours-time-compact input[type="time"],
.branch-hours-bulk-time {
    width: 6.5rem !important;
    padding: 0.32rem 0.45rem !important;
    font-size: 0.82rem !important;
}

.branch-hours-time-sep {
    color: #94a3b8;
    font-weight: 700;
}

.branch-hours-shift-tag {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--winkels-purple-dark);
    background: #ede9fe;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    margin-inline-end: 0.15rem;
}

.branch-hours-status {
    font-size: 0.78rem;
    font-weight: 600;
}

.branch-hours-status-open { color: #065f46; }
.branch-hours-status-closed { color: #991b1b; }

.branch-hours-save-row {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid #ece8ff;
}

.btn-sm {
    padding: 0.35rem 0.75rem !important;
    font-size: 0.78rem !important;
}

@media (max-width: 768px) {
    .branch-hours-row {
        grid-template-columns: 1fr;
        gap: 0.35rem;
    }
}

@media (max-width: 768px) {
    .winkels-modal { max-height: 95vh; border-radius: 1rem; }
    .menu-table th, .menu-table td { padding: 0.65rem 0.75rem; }
    .winkels-modal-tabs-premium { padding-inline: 0.65rem; }
    .winkels-modal-scroll-premium { padding: 1rem; }
    .menu-modal-section { padding: 1rem; }
    .menu-branch-list { grid-template-columns: 1fr; }
}

/* ---------- Confirmation dialogs ---------- */

.confirm-modal { max-width: 32rem; }

.winkels-modal-header-danger {
    background: linear-gradient(135deg, #9f1239 0%, #be123c 55%, #e11d48 100%);
}

.winkels-modal-header-danger::before {
    background:
        radial-gradient(closest-side at 92% -10%, rgba(251, 113, 133, 0.5), transparent),
        radial-gradient(closest-side at 12% 120%, rgba(190, 18, 60, 0.5), transparent);
}

.confirm-message {
    font-size: 0.95rem;
    line-height: 1.65;
    color: #334155;
    margin: 0;
}

.confirm-list {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0.9rem 1rem;
    border-radius: 0.85rem;
    background: linear-gradient(180deg, #fbfaff 0%, var(--winkels-purple-50) 100%);
    border: 1px solid var(--winkels-purple-100);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.confirm-list li {
    position: relative;
    padding-inline-start: 1.1rem;
    font-size: 0.86rem;
    color: #475569;
    line-height: 1.55;
}

.confirm-list li::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0.5rem;
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
    background: var(--winkels-purple-400, #a78bfa);
}

.confirm-list-danger {
    background: linear-gradient(180deg, #fff5f7 0%, #ffe9ee 100%);
    border-color: #fecdd3;
}

.confirm-list-danger li::before { background: #e11d48; }

/* ---------- Menu: editor / shopfront view switch ---------- */

.menu-viewswitch {
    display: inline-flex;
    padding: 0.2rem;
    border-radius: 0.7rem;
    background: var(--winkels-purple-50);
    border: 1px solid var(--winkels-border);
}

.menu-viewswitch-btn {
    padding: 0.4rem 0.85rem;
    border: 0;
    border-radius: 0.55rem;
    background: transparent;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--winkels-purple-800);
    cursor: pointer;
    transition: background 0.25s var(--winkels-ease), box-shadow 0.25s var(--winkels-ease);
}

.menu-viewswitch-btn.is-on {
    background: #fff;
    box-shadow: var(--winkels-shadow-sm);
}

/* The storefront pens itself into a phone-width column because that is where it
   is read. A panel is worked on at a desk, so the cards take the width they are
   given and stop at four across — past that a row is scanned rather than read. */
.menu-shopview {
    max-width: none;
}

.menu-shopview .sf-rows {
    grid-template-columns: 1fr;
}

@media (min-width: 560px) {
    .menu-shopview .sf-rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .menu-shopview .sf-rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1280px) {
    .menu-shopview .sf-rows { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.menu-shopview .sf-section:first-of-type {
    padding-top: 0.5rem;
}

/* The site's pill strip, brought inside a panel. It keeps sticking to the top of
   the scroll — the point of it on a long menu — but loses the full-bleed bar and
   the centring, which belong to a page that owns its whole width. */
.menu-catnav {
    top: -0.25rem;
    margin-bottom: 0.5rem;
    border-bottom: 0;
    border-radius: 0.85rem;
    box-shadow: none;
    background: rgba(247, 245, 253, 0.92);
}

.menu-catnav .sf-catnav-track {
    max-width: none;
    margin: 0;
    padding: 0.55rem 0.35rem;
}

.menu-catnav .sf-cat {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-family: inherit;
}

.menu-catnav .sf-cat.is-active .sf-section-count {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* The storefront row is one tap target; the panel card is a small workspace, so
   it grows a third region for the buttons and drops the hover lift. */
.menu-card {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "text media"
        "actions actions";
    gap: 0.75rem 1rem;
    cursor: default;
}

.menu-card:hover { transform: none; }
.menu-card .sf-row-text { grid-area: text; }
.menu-card-media { grid-area: media; width: 4rem; height: 4rem; }

/* Four to a row leaves a narrow column, and a dish's blurb is the one part that
   can be cut without losing anything a shopkeeper needs. */
.menu-card .sf-row-desc {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.menu-card-actions {
    grid-area: actions;
    display: flex;
    gap: 0.5rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--winkels-border);
}

.menu-card-actions button { flex: 1; }

/* Dimmed, not hidden: a dish the customer cannot reach is exactly what a
   merchant opens this view to find. */
.menu-card.is-off {
    opacity: 0.62;
    background: #fbfafc;
}

.menu-card-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.7rem;
    margin-top: 0.5rem;
}

.menu-card-meta .menu-status-form { margin: 0; }

.menu-card-fact {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-size: 0.78rem;
}

.menu-card-fact-key { color: var(--winkels-text-muted); }
.menu-card-fact-val { font-weight: 700; }
.menu-card-fact-val.is-warn { color: #b45309; }

.menu-shopview-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin-bottom: 1rem;
    padding: 0.7rem 0.9rem;
    border-radius: 0.75rem;
    background: var(--winkels-purple-50);
    border: 1px dashed var(--winkels-border-strong);
    font-size: 0.85rem;
    color: var(--winkels-text-muted);
}

/* The struck price in the management table, beside the one being charged. */
.menu-table-was {
    margin-inline-start: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #9ca3af;
}

/* ---------- Order detail ---------- */

.order-head {
    margin-bottom: 1.25rem;
}

.order-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.order-head-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

/* The id is a uuid fragment, so it is set in a mono face and forced left to
   right — an Arabic page would otherwise reorder the characters around it. */
.order-ref {
    display: inline-block;
    margin-top: 0.2rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--winkels-text-muted);
}

.order-head-total {
    color: var(--winkels-purple-700);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.order-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.65fr) minmax(15.5rem, 0.85fr);
    gap: 1.25rem;
    align-items: start;
}

.order-detail-main,
.order-detail-side {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.order-detail-times {
    display: grid;
    gap: 0.35rem;
    margin: 0.55rem 0 0.85rem;
}

.order-detail-time {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    font-size: 0.82rem;
}

.order-detail-time span:first-child {
    color: var(--winkels-text-muted);
}

.order-detail-time span:last-child {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.order-log-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 1rem;
}

.order-log-hint {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--winkels-text-muted);
}

.order-log-stamps {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: 0.65rem;
    margin-bottom: 1.15rem;
}

.order-log-stamp {
    border: 1px solid var(--winkels-border);
    border-radius: 12px;
    padding: 0.7rem 0.8rem;
    background: #f7f5fd;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.order-log-stamp.is-pending,
.order-log-stamp.is-missing {
    background: #fff;
}

.order-log-stamp-label {
    font-size: 0.75rem;
    color: var(--winkels-text-muted);
}

.order-log-stamp-time {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #280852;
    font-size: 0.88rem;
}

.order-log-stamp-state {
    font-size: 0.72rem;
    color: var(--winkels-text-muted);
}

.order-log-duration {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1rem;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    background: #f7f2fe;
    border: 1.5px solid #e4dceb;
    font-weight: 700;
    color: #3c0f79;
}

.order-log-duration-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.order-log-duration-copy em {
    font-style: normal;
    font-size: 0.75rem;
    font-weight: 600;
    color: #5a4478;
}

.order-log-duration strong {
    font-variant-numeric: tabular-nums;
    font-size: 1.05rem;
    color: #280852;
}

.order-log-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.order-log-row {
    display: grid;
    grid-template-columns: 1.1rem minmax(0, 1fr);
    gap: 0.7rem;
    position: relative;
    padding: 0.7rem 0.8rem;
    border-radius: 12px;
    background: #fbf9fe;
    border: 1px solid #eee8f4;
}

.order-log-row + .order-log-row .order-log-dot::before {
    content: '';
    position: absolute;
    top: -0.55rem;
    bottom: 50%;
    left: 0.32rem;
    width: 2px;
    background: #e7e06f;
}

.order-log-dot {
    width: 0.72rem;
    height: 0.72rem;
    border-radius: 50%;
    background: #751fe8;
    margin-top: 0.35rem;
    position: relative;
    z-index: 1;
}

.order-log-line {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
}

.order-log-line time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #280852;
    white-space: nowrap;
}

.order-log-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    font-size: 0.78rem;
    color: var(--winkels-text-muted);
}

@media print {
    .order-log-print,
    .order-detail-side,
    .admin-sidebar,
    .topbar,
    .btn-winkels,
    .btn-winkels-outline {
        display: none !important;
    }

    .order-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .order-log-stamp {
        break-inside: avoid;
    }
}

.order-detail-in-modal .winkels-card {
    padding: 1rem 1.1rem;
}

.order-detail-in-modal .mb-6 {
    margin-bottom: 1rem;
}

@media (max-width: 860px) {
    .order-detail-layout {
        grid-template-columns: minmax(0, 1fr);
    }
}

.order-lines {
    margin-top: 0.25rem;
}

/* Quantity, dish, price — three columns rather than a two-sided flex, so the
   price stays on its own edge however long the name and its extras run. */
.order-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: 0.85rem;
    padding: 0.8rem 0;
    border-bottom: 1px solid var(--winkels-border);
}

.order-line:last-child {
    border-bottom: 0;
}

.order-line-qty {
    min-width: 2.1rem;
    padding: 0.15rem 0.45rem;
    border-radius: 0.5rem;
    background: var(--winkels-purple-50);
    color: var(--winkels-purple-800);
    font-size: 0.82rem;
    font-weight: 800;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.order-line-body {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.order-line-name {
    font-weight: 600;
    color: #1e293b;
}

.order-line-mods {
    font-size: 0.82rem;
    color: var(--winkels-text-muted);
    line-height: 1.5;
}

.order-line-note {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #b45309;
    line-height: 1.45;
    margin-top: 0.15rem;
}

.order-line-offer {
    align-self: flex-start;
    font-size: 0.74rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    border-radius: 9999px;
    background: var(--winkels-purple-100);
    color: var(--winkels-purple-800);
}

.order-line-price {
    text-align: end;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.order-line-price s {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #9ca3af;
}

/* Reads as a bill: the running lines, a rule, then the figure being charged. */
.order-bill {
    display: grid;
    gap: 0.5rem;
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--winkels-border-strong);
}

.order-bill-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.92rem;
}

.order-bill-row > span:last-child {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.order-bill-total {
    margin-top: 0.35rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--winkels-border-strong);
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--winkels-purple-800);
}

/* The platform's cut is not part of what the customer paid, so it is set below
   the total and quieter than it. */
.order-bill-aside {
    margin-top: 0.35rem;
    padding-top: 0.7rem;
    border-top: 1px dashed var(--winkels-border-strong);
    font-size: 0.85rem;
    color: var(--winkels-text-muted);
}

/* ---------- Restaurant detail (read-only) ---------- */

.detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem 1.5rem;
}

.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    min-width: 0;
}

.detail-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--winkels-text-muted);
}

.detail-value {
    font-size: 0.98rem;
    font-weight: 600;
    color: #1e293b;
    word-break: break-word;
}

.detail-value-empty { color: #94a3b8; font-weight: 500; }

.brand-preview {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.brand-preview-logo,
.brand-preview-cover {
    border-radius: 0.9rem;
    border: 1px solid var(--winkels-purple-100);
    background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
    object-fit: cover;
    display: block;
}

.brand-preview-logo { width: 5.5rem; height: 5.5rem; }
.brand-preview-cover { width: 14rem; height: 5.5rem; }

.brand-preview-empty {
    display: grid;
    place-items: center;
    font-size: 0.75rem;
    color: #8b7cb8;
    text-align: center;
    padding: 0.5rem;
}

/* ── Email studio ─────────────────────────────────────────────── */

.mail-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    gap: 1.25rem;
    align-items: start;
}

.mail-composer--templates {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 1.15fr);
}

@media (min-width: 1400px) {
    .mail-composer--templates {
        grid-template-columns: minmax(0, 0.95fr) minmax(440px, 1.25fr);
    }
}

@media (max-width: 1100px) {
    .mail-composer { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 1100px) {
    .mail-composer--templates .mail-preview-frame--tall iframe {
        height: min(820px, calc(100vh - 220px));
        min-height: 560px;
    }
}

.mail-composer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--winkels-purple-100);
}

.mail-test-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.mail-test-row .winkels-input { flex: 1; }

.mail-preview {
    position: sticky;
    top: 1.25rem;
    background: #ffffff;
    border: 1px solid var(--winkels-purple-100);
    border-radius: 1.1rem;
    padding: 1.1rem;
    box-shadow: 0 10px 30px rgba(60, 15, 121, 0.07);
}

.mail-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.mail-preview-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--winkels-purple, #7c3aed);
}

.mail-preview-subject {
    font-weight: 700;
    font-size: 1rem;
    color: #1f1235;
    margin-top: 0.2rem;
    overflow-wrap: anywhere;
}

.mail-preview-meta {
    font-size: 0.75rem;
    color: #8b7cb8;
    margin-bottom: 0.7rem;
}

.mail-preview-tools { display: flex; gap: 0.3rem; }

.mail-preview-device {
    border: 1px solid var(--winkels-purple-100);
    background: #faf9ff;
    border-radius: 0.6rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.mail-preview-device.is-active {
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
    border-color: transparent;
    color: #fff;
}

.mail-preview-frame {
    position: relative;
    background: #f1f5f9;
    border-radius: 0.9rem;
    overflow: hidden;
    border: 1px solid var(--winkels-purple-100);
}

.mail-preview-frame iframe {
    width: 100%;
    height: 620px;
    border: 0;
    display: block;
    background: #f1f5f9;
    transition: width 0.2s ease;
    margin: 0 auto;
}

.mail-preview-frame--tall iframe {
    height: min(920px, calc(100vh - 160px));
    min-height: 720px;
}

.mail-composer--templates .mail-preview {
    max-height: calc(100vh - 2rem);
    overflow: auto;
}

.mail-preview-frame.is-mobile iframe { width: 400px; max-width: 100%; }

.mail-preview-loading {
    position: absolute;
    inset-inline-end: 0.6rem;
    top: 0.6rem;
    background: rgba(31, 18, 53, 0.82);
    color: #fff;
    font-size: 0.7rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    z-index: 2;
}

.mail-audience-group {
    margin-bottom: 1rem;
}

.mail-audience-group .menu-form-section-title {
    margin-bottom: 0.55rem;
}

.mail-audience-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.55rem;
}

.mail-audience-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid var(--winkels-purple-100);
    border-radius: 0.75rem;
    background: #faf9ff;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.mail-audience-option:hover {
    border-color: #c4b5fd;
}

.mail-audience-option.is-selected {
    border-color: #7c3aed;
    background: #f3ebff;
    box-shadow: 0 0 0 1px rgba(124, 58, 237, 0.12);
}

.mail-audience-option input {
    accent-color: #7c3aed;
    flex-shrink: 0;
}

.mail-audience-option-label {
    flex: 1;
    font-size: 0.88rem;
    color: #1f1235;
    line-height: 1.35;
}

.mail-audience-option-count {
    font-size: 0.78rem;
    color: #8b7cb8;
    white-space: nowrap;
}

/* Identity preview used on the settings screen */
.mail-identity-card {
    border: 1px solid var(--winkels-purple-100);
    border-radius: 0.9rem;
    overflow: hidden;
    background: #fff;
}

.mail-identity-bar {
    padding: 1rem 0.85rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 5.5rem;
    background: #fff;
}

.mail-identity-logo {
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 5.5rem;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}

.mail-identity-name {
    color: #1c1235;
    font-weight: 700;
    font-size: 1.05rem;
}

.mail-identity-body { padding: 1.15rem; }

.mail-identity-heading {
    font-weight: 700;
    color: #1f1235;
    margin-bottom: 0.5rem;
}

.mail-identity-text {
    font-size: 0.85rem;
    color: #5b5170;
    line-height: 1.7;
    margin-bottom: 0.9rem;
}

.mail-identity-button {
    display: inline-block;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 0.6rem 1.2rem;
    border-radius: 0.65rem;
}

.mail-identity-footer {
    margin-top: 1.1rem;
    padding-top: 0.8rem;
    border-top: 1px solid var(--winkels-purple-100);
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    font-size: 0.72rem;
    color: #8b7cb8;
}

/* ── Accounts & permissions ───────────────────────────────────────────── */

.section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--winkels-text);
    margin-bottom: 1.1rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(124, 92, 224, 0.12);
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 1rem 1.2rem;
}

.info-layout {
    display: flex;
    flex-direction: column;
    gap: 1.15rem;
}

.info-layout-split {
    display: grid;
    gap: 1.15rem;
    align-items: start;
}

@media (min-width: 1100px) {
    .info-layout-split {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    }
}

.info-card-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.info-locked-hint {
    margin: 0;
    font-size: 0.9rem;
    color: #64748b;
}

.info-static-value {
    margin: 0;
    min-height: 2.6rem;
    padding: 0.65rem 0.85rem;
    border-radius: 12px;
    background: #f8f6fc;
    color: #280852;
    font-weight: 600;
    display: flex;
    align-items: center;
    word-break: break-word;
}

.info-static-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    min-height: 2.6rem;
    align-items: center;
}

.cat-picker-chip.is-static {
    pointer-events: none;
}

.info-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    font-size: 0.88rem;
    margin-bottom: 0.85rem;
}

.info-facts span {
    color: var(--winkels-muted, #6b5f85);
}

.info-facts strong {
    color: var(--winkels-text);
}

.info-advanced {
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-lg);
    background: #fff;
    padding: 0.85rem 1.1rem;
}

.info-advanced > summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.info-advanced > summary::-webkit-details-marker {
    display: none;
}

.info-advanced[open] > summary {
    margin-bottom: 0.9rem;
    padding-bottom: 0.7rem;
    border-bottom: 1px solid rgba(124, 92, 224, 0.12);
}

.menu-form-subsection {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--winkels-purple);
    margin: 1.4rem 0 0.7rem;
}

.menu-form-subsection:first-child {
    margin-top: 0;
}

.divider-soft {
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(124, 92, 224, 0.22), transparent);
}

.text-danger {
    color: #d64545;
}

/* Permission matrix */

.perm-group + .perm-group {
    margin-top: 1.1rem;
    padding-top: 1.1rem;
    border-top: 1px solid rgba(124, 92, 224, 0.1);
}

.perm-group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.perm-group-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--winkels-purple);
    margin-bottom: 0;
}

.perm-group > .perm-group-title {
    margin-bottom: 0.6rem;
}

.perm-select-group {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--winkels-muted, #6b6280);
    cursor: pointer;
    user-select: none;
}

.perm-option.is-locked {
    opacity: 0.62;
    cursor: default;
    background: rgba(124, 92, 224, 0.02);
}

.perm-option.is-locked:hover {
    border-color: rgba(124, 92, 224, 0.16);
    background: rgba(124, 92, 224, 0.02);
}

.perm-group-body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.5rem;
}

.perm-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid rgba(124, 92, 224, 0.16);
    border-radius: 10px;
    background: rgba(124, 92, 224, 0.03);
    font-size: 0.86rem;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.perm-option:hover {
    border-color: rgba(124, 92, 224, 0.4);
    background: rgba(124, 92, 224, 0.07);
}

.perm-option:has(input:checked) {
    border-color: var(--winkels-purple);
    background: rgba(124, 92, 224, 0.1);
    font-weight: 600;
}

.perm-option input {
    width: auto;
    margin: 0;
    accent-color: var(--winkels-purple);
}

.perm-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.65rem;
}

.perm-option-card {
    min-height: 3.35rem;
    padding: 0.85rem 1rem;
}

.staff-role-card {
    align-items: flex-start;
    min-height: 5.6rem;
}

.staff-role-card strong {
    display: block;
    font-weight: 700;
}

.staff-role-card small {
    display: block;
    margin-top: 0.2rem;
    font-weight: 400;
    color: #6b6480;
    line-height: 1.35;
}

.reconciliation-howto {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 1.1rem 1.2rem;
    display: grid;
    gap: 0.75rem;
    border-radius: 16px;
    border: 1px solid rgba(124, 92, 224, 0.14);
    background: rgba(124, 92, 224, 0.04);
}

.reconciliation-howto li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    color: #3f3a52;
    font-size: 0.95rem;
    line-height: 1.45;
}

.reconciliation-howto span {
    flex: 0 0 1.6rem;
    width: 1.6rem;
    height: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #4a25a9;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.admin-theme-yellow-pop .reconciliation-howto {
    border-color: rgba(74, 37, 169, 0.12);
    background: #fff;
}

.gateway-deal-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
}

.gateway-deal-card {
    padding: 1.15rem 1.2rem;
}

.gateway-deal-card .value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    font-size: 1.25rem;
    line-height: 1.25;
}

.gateway-deal-card.is-empty .value {
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.5;
}

.gateway-deal-plus {
    font-size: 0.95rem;
    font-weight: 600;
    opacity: 0.55;
}

@media (max-width: 900px) {
    .gateway-deal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    .gateway-deal-grid {
        grid-template-columns: 1fr;
    }
}

.gateway-fee-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.gateway-fee-card {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
    padding: 1.1rem 1.15rem;
    border: 1px solid rgba(124, 92, 224, 0.16);
    border-radius: 14px;
    background: rgba(124, 92, 224, 0.03);
}

.gateway-fee-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.gateway-fee-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.gateway-fee-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--winkels-muted, #6b7280);
    line-height: 1.45;
}

@media (max-width: 800px) {
    .gateway-fee-grid,
    .gateway-fee-fields {
        grid-template-columns: 1fr;
    }
}

.perm-option-media {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.55rem;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(124, 92, 224, 0.08);
}

.perm-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.perm-chip {
    font-size: 0.68rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(124, 92, 224, 0.1);
    color: var(--winkels-purple);
    white-space: nowrap;
}

/* A restaurant's own team */

.staff-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.staff-abilities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.5rem;
}

.staff-roles {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin: 0.4rem 0 0.15rem;
}

.staff-role {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0 0.55rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
}

.staff-role.is-cashier {
    color: #5b21b6;
    background: #f3e8ff;
}

.staff-role.is-reception {
    color: #075985;
    background: #e0f2fe;
}

.staff-role.is-admin {
    color: #9a3412;
    background: #ffedd5;
}

.staff-role.is-kitchen {
    color: #166534;
    background: #dcfce7;
}

.staff-seats {
    padding: 0.9rem 1rem;
    border: 1.5px solid #ece8ff;
    border-radius: 1rem;
    background: linear-gradient(180deg, #faf7ff 0%, #ffffff 100%);
}

.staff-seats-title {
    margin: 0 0 0.55rem;
    font-size: 0.8rem;
    font-weight: 800;
    color: #5b4a86;
}

.staff-seats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.5rem;
}

.staff-seat {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.8rem;
    background: #fff;
    border: 1px solid #efeaf6;
}

.staff-seat span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #7a6b96;
}

.staff-seat strong {
    font-size: 1.15rem;
    font-weight: 800;
    color: #280852;
    line-height: 1.2;
}

.staff-seat em {
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 700;
    color: #7a6b96;
}

.staff-seat.is-full {
    border-color: #f0b4b0;
    background: #fff6f5;
}

.staff-seat.is-full strong,
.staff-seat.is-full em {
    color: #b42318;
}

/* ——— Maintenance screen (customer storefront while closed) ——— */
.maintenance-screen {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 2rem 1.25rem;
    background: linear-gradient(160deg, #f6f4ff 0%, #ece7ff 45%, #f9f8ff 100%);
}

.maintenance-card {
    max-width: 30rem;
    width: 100%;
    text-align: center;
    padding: 3rem 2rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid var(--winkels-border);
    border-radius: 1.5rem;
    box-shadow: 0 24px 60px rgba(76, 39, 158, 0.14);
    backdrop-filter: blur(12px);
}

.maintenance-icon {
    width: 4.5rem;
    height: 4.5rem;
    margin: 0 auto 1.5rem;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--winkels-gradient);
    color: #fff;
    box-shadow: var(--winkels-glow);
}

.maintenance-icon svg { width: 2.1rem; height: 2.1rem; }

.maintenance-card h1 {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--winkels-text);
    margin-bottom: 0.85rem;
}

.maintenance-message {
    color: var(--winkels-text-muted);
    line-height: 1.75;
}

.maintenance-until {
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(124, 92, 224, 0.15);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--winkels-purple-700);
}

/* Warns the operator that customers cannot order right now. */
.maintenance-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.8rem 1.15rem;
    margin-bottom: 1.25rem;
    border-radius: var(--winkels-radius);
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    border: 1px solid #fdba74;
    color: #9a3412;
    font-weight: 600;
    font-size: 0.88rem;
}

.maintenance-banner a {
    color: #7c2d12;
    text-decoration: underline;
}

/* ——— Coming soon preview gate ——— */
.coming-soon-screen { background: linear-gradient(165deg, #1e1033 0%, #4c1d95 42%, #7c3aed 100%); }

.coming-soon-card {
    text-align: center;
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.96);
}

.coming-soon-logo {
    width: 5.5rem;
    height: auto;
    margin: 0 auto 1.25rem;
    display: block;
}

.coming-soon-badge {
    display: inline-block;
    margin-bottom: 1rem;
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    background: var(--winkels-soft);
    color: var(--winkels-purple-700);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.coming-soon-form {
    margin-top: 1.75rem;
    text-align: start;
}

.coming-soon-label {
    display: block;
    margin-bottom: 0.45rem;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--winkels-text);
}

.coming-soon-input { margin-top: 0; }

.coming-soon-lang {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--winkels-text-muted);
}

.app-dl {
    min-height: 100vh;
    padding: 1.25rem 1.25rem 3rem;
    background: linear-gradient(165deg, #1e1033 0%, #4c1d95 46%, #7c3aed 100%);
    color: #fff;
}

/* Customer app page (/get-app) */
.ca-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    align-items: center;
    gap: 2rem;
}
.ca-points { margin: 0 0 1.5rem; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.ca-points li { position: relative; padding-inline-start: 1.6rem; color: rgba(255, 255, 255, 0.9); }
.ca-points li::before {
    content: "✓"; position: absolute; inset-inline-start: 0; top: 0;
    color: #facc15; font-weight: 900;
}
.ca-stores { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.ca-store {
    display: inline-flex; align-items: center; gap: 0.65rem;
    min-width: 11.5rem; padding: 0.6rem 1.1rem;
    border-radius: 0.85rem; background: #000; color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.35);
    text-decoration: none; transition: transform 0.15s ease;
}
.ca-store:hover { transform: translateY(-2px); }
.ca-store-text { display: flex; flex-direction: column; line-height: 1.15; text-align: start; }
.ca-store-text small { font-size: 0.68rem; opacity: 0.85; }
.ca-store-text strong { font-size: 1.15rem; font-weight: 700; direction: ltr; }
.ca-qr {
    display: inline-flex; flex-direction: column; align-items: center; gap: 0.4rem;
    margin: 1.5rem 0 0; padding: 0.75rem; border-radius: 1rem; background: #fff; color: #374151;
    font-size: 0.78rem; font-weight: 700;
}
.ca-qr svg { width: 9rem; height: 9rem; }
.ca-shot { width: 100%; max-height: 36rem; object-fit: contain; }
.ca-page .mk-legal-footer a { color: #fde68a; }
.ca-page .mk-legal-footer span { color: rgba(255, 255, 255, 0.5); }
@media (max-width: 760px) {
    .ca-hero { grid-template-columns: 1fr; }
    .ca-shot { max-height: 22rem; order: -1; }
    .ca-store { flex: 1 1 11rem; justify-content: center; }
}

.app-dl-wrap {
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
}

.app-dl-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.app-dl-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    color: #fff;
    text-decoration: none;
    font-weight: 800;
    font-size: 1.05rem;
}

.app-dl-brand img {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    background: #fff;
}

.app-dl-lang {
    display: inline-flex;
    padding: 0.2rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
}

.app-dl-lang a {
    min-width: 2.1rem;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    text-decoration: none;
    font-size: 0.82rem;
    font-weight: 800;
}

.app-dl-lang a.is-on {
    background: #fff;
    color: #4c1d95;
}

.app-dl-kicker {
    display: inline-block;
    margin: 0 0 0.75rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.app-dl-title {
    margin: 0 0 0.6rem;
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    font-weight: 800;
    line-height: 1.25;
    color: #fff;
}

.app-dl-lead {
    max-width: 40rem;
    margin: 0 0 1.5rem;
    color: rgba(255, 255, 255, 0.84);
    font-size: 1.02rem;
    line-height: 1.7;
}

.app-dl-card {
    background: #fff;
    color: var(--winkels-text);
    border-radius: 1.35rem;
    padding: 1.35rem 1.25rem 1.4rem;
    box-shadow: 0 18px 48px rgba(20, 8, 46, 0.22);
}

.app-dl-card--hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: center;
    padding: 1.5rem;
}

.app-dl-card h2 {
    margin: 0 0 0.4rem;
    color: #280852;
    font-size: 1.18rem;
}

.app-dl-hero-copy h2,
.app-dl-card h3 {
    margin: 0 0 0.4rem;
    color: #280852;
    font-size: 1.25rem;
}

.app-dl-card h3 { font-size: 1.12rem; }

.app-dl-hero-copy p,
.app-dl-card > p {
    margin: 0;
    color: var(--winkels-text-muted);
    line-height: 1.6;
}

.app-dl-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.1rem;
    margin: 1rem 0 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--winkels-purple-700);
}

.app-dl-ver-wrap {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    unicode-bidi: isolate;
}

.app-dl-ver {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.app-dl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 1.1rem;
    min-height: 2.85rem;
    padding: 0.7rem 1.2rem;
    text-decoration: none;
    width: auto;
}

.app-dl-qr {
    margin: 0 auto;
    width: 10.5rem;
    padding: 0.7rem 0.7rem 0.85rem;
    background: #f7f4ff;
    border: 1px solid rgba(58, 26, 134, 0.1);
    border-radius: 1.1rem;
    text-align: center;
}

.app-dl-qr svg {
    width: 100%;
    height: auto;
    display: block;
}

.app-dl-qr figcaption {
    margin-top: 0.55rem;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.4;
    color: #280852;
}

.app-dl-staff {
    margin-top: 1.75rem;
}

.app-dl-staff-title {
    margin: 0 0 0.85rem;
    color: #fff;
    font-size: 1.15rem;
}

.app-dl-lock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1rem;
    margin-bottom: 0.9rem;
    padding: 0.95rem 1.1rem;
    border-radius: 1.1rem;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.app-dl-lock p {
    margin: 0;
    flex: 1 1 14rem;
    line-height: 1.55;
}

.app-dl-lock .app-dl-btn {
    margin-top: 0;
    background: #fff;
    color: #4c1d95;
    border-color: #fff;
}

.app-dl-staff-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.app-dl-qr--staff {
    margin-top: 1.1rem;
}

.app-dl-hint {
    margin: 1.35rem 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.88rem;
    line-height: 1.65;
}

.app-dl-unavailable {
    margin-top: 1rem;
    color: #9a3412;
    font-weight: 700;
}

.app-dl-foot {
    margin: 1.5rem 0 0;
    text-align: center;
}

.app-dl-foot a {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 700;
}

@media (min-width: 720px) {
    .app-dl-staff-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 980px) {
    .app-dl { padding: 1.75rem 2rem 3.5rem; }

    .app-dl-staff-grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* ——— Analytics charts (CSS bars, no charting library) ——— */
.chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 13rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid rgba(124, 92, 224, 0.18);
    overflow-x: auto;
}

.chart-bar-col {
    flex: 1 1 0;
    min-width: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    position: relative;
}

.chart-bar-stack {
    position: relative;
    width: 100%;
    max-width: 2rem;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.chart-bar {
    position: absolute;
    bottom: 0;
    width: 100%;
    border-radius: 0.3rem 0.3rem 0 0;
    transition: opacity 0.2s var(--winkels-ease);
}

.chart-bar-sales {
    background: linear-gradient(180deg, var(--winkels-purple-400, #a78bfa), var(--winkels-purple-700, #6d28d9));
}

/* Commission sits in front of sales, showing the platform's slice of the day. */
.chart-bar-commission {
    background: rgba(255, 255, 255, 0.55);
    width: 45%;
    inset-inline-start: 27.5%;
    border-radius: 0.2rem 0.2rem 0 0;
}

.chart-bar-col:hover .chart-bar-sales { opacity: 0.75; }

.chart-bar-label {
    position: absolute;
    bottom: -1.25rem;
    font-size: 0.6rem;
    color: var(--winkels-text-muted);
    white-space: nowrap;
}

/* Only every few labels fit once the window is long. */
.chart-bars[style*="--chart-count: 9"] .chart-bar-col:not(:nth-child(7n+1)) .chart-bar-label,
.chart-bars[style*="--chart-count: 36"] .chart-bar-col:not(:nth-child(30n+1)) .chart-bar-label {
    display: none;
}

.chart-axis {
    display: flex;
    justify-content: space-between;
    margin-top: 0.75rem;
    font-size: 0.7rem;
    color: var(--winkels-text-muted);
}

.rank-row {
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(124, 92, 224, 0.08);
}

.rank-row:last-child { border-bottom: none; }

.rank-row-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

.rank-bar {
    height: 0.4rem;
    border-radius: 999px;
    background: rgba(124, 92, 224, 0.12);
    overflow: hidden;
    margin-bottom: 0.3rem;
}

.rank-bar-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--winkels-gradient);
}

.analytics-scroll {
    max-height: 22rem;
    overflow-y: auto;
}

/* ——— Per-restaurant sales report ——— */

/* The hour-of-day chart carries three times the bars of a monthly view, so it
   is given less height rather than being allowed to tower over its neighbour. */
.chart-bars.is-compact {
    height: 9rem;
}

/* Inside a table the bar is the cell, and the gap under it would push the row. */
.winkels-table .rank-bar {
    margin-bottom: 0;
}

.report-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.report-page-head { margin: 0; }

.report-page-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: #280852;
}

.report-page-sub,
.report-section-help {
    margin: 0.3rem 0 0;
    color: #6b7280;
    font-size: 0.84rem;
    line-height: 1.45;
}

.report-section-title {
    margin: 0 0 1rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #280852;
}

.report-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.15rem;
}

@media (min-width: 1024px) {
    .report-split { grid-template-columns: 1fr 1fr; }
}

.report-table-scroll {
    overflow: auto;
    max-height: 28rem;
}

.analytics-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.95rem 1.1rem 1rem;
    background: #fff;
    border: 1px solid rgba(117, 31, 232, 0.1);
    border-radius: 1rem;
}

.analytics-toolbar-periods,
.report-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.analytics-toolbar-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem 0.65rem;
}

.analytics-field {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    width: 10.25rem;
    flex: 0 0 auto;
}

.analytics-field span {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
}

.analytics-field .winkels-input {
    width: 100%;
    min-height: 2.35rem;
    padding-block: 0.42rem;
    padding-inline: 0.75rem;
    font-size: 0.85rem;
    border-radius: 0.75rem;
}

.analytics-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.analytics-toolbar-actions .btn-winkels,
.analytics-toolbar-actions .btn-winkels-outline {
    min-height: 2.35rem;
    padding: 0.4rem 0.95rem;
    font-size: 0.82rem;
    box-shadow: none;
}

.analytics-toolbar-note {
    margin: 0;
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.4;
}

.analytics-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (min-width: 760px) {
    .analytics-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1180px) {
    .analytics-kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.analytics-kpi {
    background: #fff;
    border: 1px solid rgba(117, 31, 232, 0.1);
    border-radius: 1rem;
    padding: 1rem 1.05rem 0.95rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 7.25rem;
}

.analytics-kpi-label {
    font-size: 0.72rem;
    font-weight: 600;
    color: #6b7280;
}

.analytics-kpi-value {
    font-size: 1.05rem;
    font-weight: 800;
    line-height: 1.3;
    color: #280852;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.analytics-kpi-meta {
    margin-top: auto;
    font-size: 0.75rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

.analytics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 1024px) {
    .analytics-grid { grid-template-columns: 1fr 1fr; }
}

.analytics-panel {
    background: #fff;
    border: 1px solid rgba(117, 31, 232, 0.1);
    border-radius: 1rem;
    padding: 1.15rem 1.2rem 1.15rem;
    min-width: 0;
}

.analytics-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.analytics-panel-title {
    margin: 0 0 0.85rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #280852;
}

.analytics-panel-head .analytics-panel-title { margin-bottom: 0; }

.analytics-panel-help {
    margin: -0.5rem 0 0.85rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.analytics-panel-head + .analytics-table { margin-top: 0.65rem; }

.analytics-empty {
    margin: 0;
    padding: 1.25rem 0;
    text-align: center;
    color: #6b7280;
    font-size: 0.85rem;
}

.analytics-rank {
    display: grid;
    grid-template-columns: 7.25rem minmax(4rem, 1fr) 7.75rem;
    align-items: center;
    gap: 0.75rem;
    min-height: 2.55rem;
}

.analytics-rank + .analytics-rank {
    border-top: 1px solid rgba(117, 31, 232, 0.06);
}

.analytics-rank-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: #280852;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.analytics-rank-bar {
    display: flex;
    justify-content: start;
    height: 0.8rem;
    border-radius: 999px;
    background: #efe8fb;
    overflow: hidden;
}

.analytics-rank-bar span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9b5cf0, #751fe8);
}

.analytics-rank-stat {
    font-size: 0.75rem;
    color: #4b5563;
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.analytics-coupon {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    min-height: 2.55rem;
}

.analytics-coupon + .analytics-coupon {
    border-top: 1px solid rgba(117, 31, 232, 0.06);
}

.analytics-coupon-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.analytics-hours {
    display: flex;
    align-items: stretch;
    gap: 0.28rem;
    height: 12rem;
    padding: 0 0 1.45rem;
    border-bottom: 1px solid rgba(117, 31, 232, 0.1);
}

.analytics-hours-col {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    position: relative;
}

.analytics-hours-bar {
    width: 100%;
    min-height: 0;
    border-radius: 0.3rem 0.3rem 0 0;
    background: linear-gradient(180deg, #9b5cf0, #751fe8);
}

.analytics-hours-col span {
    position: absolute;
    bottom: -1.25rem;
    inset-inline: 0;
    text-align: center;
    font-size: 0.62rem;
    color: #6b7280;
}

.analytics-table {
    width: 100%;
    border-collapse: collapse;
}

.analytics-table th,
.analytics-table td {
    padding: 0.75rem 0.5rem;
    text-align: start;
    border-bottom: 1px solid rgba(117, 31, 232, 0.07);
    vertical-align: middle;
}

.analytics-table th {
    font-size: 0.72rem;
    font-weight: 700;
    color: #6b7280;
    background: transparent;
}

.analytics-table th:first-child,
.analytics-table td:first-child {
    padding-inline-start: 0;
}

.analytics-table th:last-child,
.analytics-table td:last-child {
    padding-inline-end: 0;
}

.analytics-table td:nth-child(2),
.analytics-table th:nth-child(2),
.analytics-table td:nth-child(3),
.analytics-table th:nth-child(3) {
    width: 6.75rem;
    text-align: end;
}

.analytics-table .analytics-rank-bar {
    max-width: 18rem;
}

.analytics-item-name {
    display: block;
    font-weight: 600;
    color: #280852;
    margin-bottom: 0.45rem;
}

.analytics-num,
.analytics-money {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: #280852;
    white-space: nowrap;
}

.analytics-facts {
    margin: 0;
}

.analytics-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(117, 31, 232, 0.06);
}

.analytics-facts > div:last-child { border-bottom: none; }
.analytics-facts dt { color: #6b7280; font-size: 0.85rem; }
.analytics-facts dd { margin: 0; font-weight: 700; color: #280852; }

.report-period {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 0.38rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(124, 92, 224, 0.22);
    font-size: 0.8rem;
    color: #280852;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s var(--winkels-ease);
}

.report-period:hover {
    border-color: rgba(124, 92, 224, 0.5);
}

.report-period.is-on {
    background: var(--winkels-gradient);
    border-color: transparent;
    color: #fff;
}

/* Keyboard users must still see where they are once the radio itself is hidden. */
.report-period:focus-visible {
    outline: 2px solid var(--winkels-purple);
    outline-offset: 2px;
}

.report-fields {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.report-actions {
    display: flex;
    gap: 0.5rem;
    margin-inline-start: auto;
}

.report-line {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(124, 92, 224, 0.08);
}

.report-line:last-child { border-bottom: none; }

.report-facts > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(124, 92, 224, 0.08);
}

.report-facts > div:last-child { border-bottom: none; }

.report-facts dt { color: var(--winkels-text-muted); }
.report-facts dd { font-weight: 600; }

/* ——— Audit log ——— */
.audit-action {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.74rem;
    padding: 0.18rem 0.5rem;
    border-radius: 0.4rem;
    background: rgba(124, 92, 224, 0.09);
    color: var(--winkels-purple-800);
    white-space: nowrap;
}

.audit-toggle {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--winkels-purple-700);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.audit-details {
    margin-top: 0.6rem;
    padding: 0.6rem 0.75rem;
    border-radius: 0.6rem;
    background: rgba(124, 92, 224, 0.05);
    border: 1px solid rgba(124, 92, 224, 0.12);
    max-width: 34rem;
}

.audit-detail-row {
    display: grid;
    grid-template-columns: minmax(6rem, 11rem) 1fr;
    gap: 0.5rem 0.9rem;
    padding: 0.25rem 0;
}

.audit-detail-row + .audit-detail-row {
    border-top: 1px solid rgba(124, 92, 224, 0.08);
}

.audit-detail-row dt {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.72rem;
    color: var(--winkels-text-muted);
    word-break: break-word;
}

.audit-detail-row dd {
    font-size: 0.78rem;
    color: var(--winkels-text);
    word-break: break-word;
}

/* ——— Verification documents ——— */
.doc-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.7rem;
    border-radius: 0.6rem;
    background: rgba(124, 92, 224, 0.08);
    border: 1px solid rgba(124, 92, 224, 0.18);
    font-size: 0.82rem;
}

.doc-chip-icon {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.35rem;
    border-radius: 0.3rem;
    background: var(--winkels-gradient);
    color: #fff;
}

.doc-chip a {
    color: var(--winkels-purple-700);
    font-weight: 600;
    text-decoration: none;
}

.doc-chip a:hover { text-decoration: underline; }

/* ——— Public legal pages ——— */
.legal-page {
    max-width: 46rem;
    margin: 0 auto;
    padding: 3rem 1.5rem 4rem;
}

.legal-page-header {
    text-align: center;
    margin-bottom: 2.5rem;
    padding-bottom: 1.75rem;
    border-bottom: 1px solid rgba(124, 92, 224, 0.15);
}

.legal-brand {
    display: inline-block;
    width: 2.66em;
    height: 1em;
    margin-bottom: 0.75rem;
    background: url("../images/nook-word-plain.png") center / contain no-repeat;
    color: transparent;
    font-size: 1.85rem;
    letter-spacing: 0;
    text-indent: 150%;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-decoration: none;
}

.legal-page-header h1 {
    font-size: 1.85rem;
    font-weight: 800;
    color: var(--winkels-text);
}

.legal-page-body p {
    color: var(--winkels-text);
    line-height: 1.95;
    margin-bottom: 1.15rem;
}

.legal-page-footer {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(124, 92, 224, 0.15);
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}

.legal-page-footer a {
    color: var(--winkels-purple-700);
    font-weight: 600;
    text-decoration: none;
}

.legal-page-footer a:hover { text-decoration: underline; }

.legal-page-footer { flex-wrap: wrap; row-gap: 0.5rem; }
.legal-page-company {
    flex-basis: 100%;
    margin: 0.5rem 0 0;
    text-align: center;
    color: #6b7280;
    font-size: 0.8rem;
}

.legal-company {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.75rem 1.5rem;
    margin: 1.5rem 0 0;
}
.legal-company dt { font-weight: 700; color: #374151; }
.legal-company dd { margin: 0; color: #111827; }
.legal-company a { color: var(--winkels-purple-700); text-decoration: none; }

.account-delete-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}
.account-delete-confirm {
    padding: 1.1rem 1.15rem 1.2rem;
    border: 1.5px solid rgba(220, 38, 38, 0.28);
    border-radius: 1rem;
    background: #fff7f7;
}
.account-delete-confirm-hint {
    margin-bottom: 0.7rem;
    font-weight: 700;
}
.account-delete-word {
    display: block;
    width: fit-content;
    margin: 0 auto 0.95rem;
    padding: 0.45rem 1.15rem;
    border-radius: 0.75rem;
    background: #fff;
    border: 1.5px dashed rgba(40, 8, 82, 0.28);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #111;
    direction: ltr;
    unicode-bidi: isolate;
}
.account-delete-confirm-note {
    margin-top: 0.55rem;
    font-size: 0.9rem;
    color: #6b7280;
}
.account-delete-error {
    margin-top: 0.45rem;
    color: #dc2626;
    font-weight: 700;
}
.account-delete-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    padding: 0.7rem 1.2rem;
    border: 0;
    border-radius: 0.85rem;
    background: #dc2626;
    color: #fff;
    font: inherit;
    font-weight: 800;
    cursor: pointer;
}
.account-delete-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
@media (max-width: 560px) {
    .legal-company { grid-template-columns: 1fr; gap: 0.25rem; }
    .legal-company dd { margin-bottom: 0.75rem; }
}

/* ==========================================================================
   Marketplace, customer accounts, driver screen, reviews and tickets
   ========================================================================== */

/* --- Public shell -------------------------------------------------------- */
.mk-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--winkels-bg);
    max-width: 100%;
}

/* Shopper web — block sideways drift; keep normal document wheel scroll on desktop */
html.mk-app-shell {
    width: 100%;
    max-width: 100%;
}

html.mk-app-shell body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
}

@media (hover: none) and (pointer: coarse) {
    html.mk-app-shell,
    html.mk-app-shell body {
        touch-action: pan-x pan-y;
        overscroll-behavior-x: none;
        -webkit-overflow-scrolling: touch;
    }
}

.qty-stepper,
.qty-stepper-btn {
    touch-action: manipulation;
}

html.mk-app-shell input,
html.mk-app-shell select,
html.mk-app-shell textarea,
html.mk-app-shell .winkels-input,
html.mk-app-shell .sf-input-neutral {
    font-size: max(16px, 1rem);
}

.mk-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--winkels-border);
}

.mk-header-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.mk-nav {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.mk-nav > a,
.mk-nav-plain {
    padding: 0.45rem 0.8rem;
    border-radius: var(--winkels-radius-sm);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--winkels-text-muted);
    text-decoration: none;
    background: none;
    border: 0;
    cursor: pointer;
    transition: background 0.18s var(--winkels-ease), color 0.18s var(--winkels-ease);
}

.mk-nav > a:hover,
.mk-nav-plain:hover {
    background: var(--winkels-purple-50);
    color: var(--winkels-purple-700);
}

.mk-nav > a.is-on {
    background: var(--winkels-purple-soft);
    color: var(--winkels-purple-700);
}

.mk-nav-cta,
.mk-nav-cta:hover {
    color: #fff;
}

.mk-nav-account {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.mk-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--winkels-gradient);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
}

.mk-lang {
    display: inline-flex;
    gap: 0.4rem;
    padding-inline-start: 0.6rem;
    border-inline-start: 1px solid var(--winkels-border);
    font-size: 0.8rem;
}

.mk-lang a {
    color: var(--winkels-text-muted);
    text-decoration: none;
}

.mk-lang a.is-on {
    color: var(--winkels-purple-700);
    font-weight: 700;
}

.mk-main {
    flex: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 1rem 1.25rem 3rem;
}

/* --- Marketplace search (top) -------------------------------------------- */
.mk-search-top {
    position: sticky;
    top: 4.25rem;
    z-index: 30;
    margin: -0.25rem 0 1rem;
    padding: 0.65rem;
    border-radius: var(--winkels-radius-lg);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--winkels-border);
    box-shadow: var(--winkels-shadow-sm);
    backdrop-filter: blur(10px);
}

.mk-search-top-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.mk-search-top-input {
    flex: 1;
    min-width: 0;
    margin: 0;
}

.mk-search-top-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* --- Marketplace hero slider --------------------------------------------- */
.mk-slider-wrap {
    margin-bottom: 1.25rem;
}

.mk-slider-viewport {
    position: relative;
    overflow: hidden;
    border-radius: var(--winkels-radius-xl);
    background: var(--winkels-purple-soft);
    box-shadow: var(--winkels-shadow);
    direction: ltr; /* carousel track is physical LTR even on Arabic pages */
}

.mk-slider-track {
    display: flex;
    transition: transform 0.45s var(--winkels-ease);
    will-change: transform;
}

.mk-slider-slide {
    flex: 0 0 100%;
    min-width: 100%;
}

.mk-slider-link {
    position: relative;
    display: block;
    aspect-ratio: 21 / 8;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.mk-slider-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mk-slider-caption {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.35rem 1.5rem;
    background: linear-gradient(to top, rgba(27, 8, 60, 0.82) 0%, rgba(27, 8, 60, 0.15) 55%, transparent 100%);
    color: #fff;
    pointer-events: none;
    direction: rtl;
    text-align: start;
}

body.ltr .mk-slider-caption {
    direction: ltr;
}

.mk-slider-caption-title {
    font-size: clamp(1.05rem, 2.4vw, 1.45rem);
    font-weight: 800;
    line-height: 1.25;
}

.mk-slider-caption-sub {
    margin-top: 0.25rem;
    font-size: clamp(0.82rem, 1.8vw, 0.95rem);
    color: rgba(255, 255, 255, 0.88);
}

.mk-slider-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 1.5rem;
    background: var(--winkels-gradient);
    color: #fff;
    text-align: center;
}

.mk-slider-sponsored {
    position: absolute;
    inset-inline-start: 0.75rem;
    bottom: 0.75rem;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: rgba(17, 24, 39, 0.72);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
}

.mk-slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.25rem;
    height: 2.25rem;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--winkels-purple-700);
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--winkels-shadow-sm);
}

.mk-slider-arrow-prev { inset-inline-start: 0.65rem; }
.mk-slider-arrow-next { inset-inline-end: 0.65rem; }

.mk-slider-dots {
    display: flex;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0.65rem;
}

.mk-slider-dot {
    width: 0.45rem;
    height: 0.45rem;
    border: 0;
    border-radius: 999px;
    background: var(--winkels-border);
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s var(--winkels-ease), background 0.2s var(--winkels-ease);
}

.mk-slider-dot.is-on {
    background: var(--winkels-purple-700);
    transform: scale(1.15);
}

@media (max-width: 640px) {
    .mk-search-top {
        top: 3.85rem;
        padding: 0.5rem;
    }

    .mk-page--food-first .mk-search-top--food {
        top: auto;
        padding: 0.25rem 0.35rem 0.25rem 0.65rem;
    }

    .mk-page--food-first .mk-search-top-form {
        flex-direction: row;
        align-items: center;
    }

    .mk-search-top-form {
        flex-direction: column;
        align-items: stretch;
    }

    .mk-slider-link {
        aspect-ratio: 16 / 9;
    }

    .mk-slider-arrow {
        display: none;
    }
}

.mk-footer {
    border-top: 1px solid var(--winkels-border);
    background: #fff;
}

.mk-footer-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 1.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: var(--winkels-text-muted);
}

.mk-footer-links {
    display: inline-flex;
    gap: 1rem;
}

.mk-footer-links a {
    color: var(--winkels-purple-700);
    font-weight: 600;
    text-decoration: none;
}

.mk-footer-links a:hover { text-decoration: underline; }

/* --- Hero and search ----------------------------------------------------- */
.mk-hero {
    background: var(--winkels-gradient-deep);
    border-radius: var(--winkels-radius-xl);
    padding: 2.75rem 1.75rem;
    text-align: center;
    color: #fff;
    box-shadow: var(--winkels-shadow-lg);
    margin-bottom: 1.75rem;
}

.mk-hero-title {
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.mk-hero-sub {
    margin-top: 0.5rem;
    color: rgba(255, 255, 255, 0.78);
}

.mk-search {
    margin: 1.5rem auto 0;
    max-width: 34rem;
    display: flex;
    gap: 0.6rem;
}

.mk-search-input { flex: 1; }

/* --- Banners ------------------------------------------------------------- */
.mk-banners {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.75rem;
}

.mk-banners-top {
    margin-top: 0.35rem;
}

.mk-banner {
    position: relative;
    display: block;
    min-height: 8.5rem;
    border-radius: var(--winkels-radius-lg);
    overflow: hidden;
    background: var(--winkels-gradient-vivid);
    box-shadow: var(--winkels-shadow);
    color: #fff;
    text-decoration: none;
}

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

.mk-banner-text {
    position: relative;
    padding: 1.4rem;
    background: linear-gradient(to top, rgba(27, 8, 60, 0.75), rgba(27, 8, 60, 0));
    min-height: 8.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.mk-banner-title {
    font-size: 1.15rem;
    font-weight: 800;
}

.mk-banner-sub {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

/* --- Filters ------------------------------------------------------------- */
.mk-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.mk-chip-row {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: none;
}

.mk-chip-row::-webkit-scrollbar { display: none; }

.mk-chip {
    flex: 0 0 auto;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    border: 1px solid var(--winkels-border-strong);
    background: #fff;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--winkels-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.mk-chip.is-on {
    background: var(--winkels-gradient);
    border-color: transparent;
    color: #fff;
}

.mk-filter-form {
    display: flex;
    gap: 0.6rem;
}

.mk-filter-form select { width: auto; }

/* --- Sections, rails, grids --------------------------------------------- */
.mk-section { margin-bottom: 2.25rem; }

.mk-section-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--winkels-text);
    margin-bottom: 1rem;
}

.mk-section-count {
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--winkels-purple-soft);
    color: var(--winkels-purple-700);
}

.mk-rail {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
}

.mk-rail > .mk-card {
    flex: 0 0 17rem;
    scroll-snap-align: start;
}

.mk-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr));
    gap: 1rem;
}

.mk-grid-banner-break {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: 1rem;
    margin-block: 0.35rem 0.75rem;
}

.mk-scroll-sentinel {
    width: 100%;
    height: 1px;
    margin-top: 0.5rem;
}

/* --- Restaurant card ----------------------------------------------------- */
.mk-card {
    display: block;
    background: #fff;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: var(--winkels-shadow-sm);
    transition: transform 0.2s var(--winkels-ease), box-shadow 0.2s var(--winkels-ease);
}

.mk-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--winkels-shadow);
}

.mk-card.is-closed .mk-card-logo { filter: grayscale(0.7); }
.mk-card.is-closed { opacity: 0.82; }

.mk-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0.65rem 1rem 0;
}

.mk-card-flag,
.mk-card-closed {
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.mk-card-flag {
    background: var(--winkels-gradient-gold);
    color: #4a2c00;
}

.mk-card-closed {
    margin-inline-start: auto;
    background: rgba(17, 24, 39, 0.82);
    color: #fff;
}

.mk-card-body {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1rem 0.65rem;
}

.mk-card-logo {
    flex: 0 0 auto;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--winkels-radius-sm);
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--winkels-purple-soft);
    color: var(--winkels-purple-700);
    font-weight: 800;
}

.mk-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mk-card-text { flex: 1; min-width: 0; }

.mk-card-name {
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mk-card-sub {
    font-size: 0.82rem;
    color: var(--winkels-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mk-card-rating {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.mk-star { color: var(--winkels-gold); }
.mk-rating-value { color: var(--winkels-text); }
.mk-rating-count { color: var(--winkels-text-muted); font-weight: 500; font-size: 0.78rem; }

.mk-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    padding: 0 1rem 1rem;
}

/* --- Customer auth ------------------------------------------------------- */
.mk-auth {
    max-width: 28rem;
    margin: 2rem auto;
}

.mk-auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    padding: 0.35rem;
    margin: -0.35rem -0.35rem 1.25rem;
    border-radius: 0.85rem;
    background: var(--winkels-purple-50);
    border: 1px solid var(--winkels-border);
}

.mk-auth-tab {
    border: none;
    background: transparent;
    color: var(--winkels-text-muted);
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.65rem 0.75rem;
    border-radius: 0.65rem;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.mk-auth-tab.is-on {
    background: #fff;
    color: var(--winkels-purple-dark);
    box-shadow: var(--winkels-shadow);
}

.mk-auth-switch {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

.mk-auth-card {
    background: #fff;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-lg);
    padding: 1.85rem;
    box-shadow: var(--winkels-shadow);
}

.mk-auth-title {
    font-size: 1.45rem;
    font-weight: 800;
}

.mk-auth-sub {
    color: var(--winkels-text-muted);
    margin-bottom: 1.35rem;
}

.mk-auth-alt {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--winkels-border);
    text-align: center;
    font-size: 0.9rem;
    color: var(--winkels-text-muted);
}

.mk-auth-note {
    font-size: 0.85rem;
    color: var(--winkels-text-muted);
    margin-top: 0.6rem;
}

.mk-legal-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 1.35rem;
    padding: 0.35rem 0 0.15rem;
    font-size: 0.82rem;
    font-weight: 700;
}

.mk-legal-footer a {
    color: #751fe8;
    text-decoration: none;
}

.mk-legal-footer a:hover {
    text-decoration: underline;
}

.mk-legal-footer span {
    color: #c4b5d8;
}

.mk-auth-card > .mk-legal-footer {
    margin-top: 1.1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--winkels-border, #eee);
}

.mk-auth-apple {
    align-items: center;
    background: #000;
    border-radius: 12px;
    color: #fff;
    display: flex;
    font-weight: 600;
    gap: 0.65rem;
    justify-content: center;
    margin-bottom: 1rem;
    min-height: 48px;
    padding: 0.75rem 1rem;
    text-decoration: none;
    width: 100%;
}

.mk-auth-apple span {
    background: currentColor;
    display: inline-block;
    height: 18px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M16.365 1.43c0 1.14-.417 2.087-1.25 2.84-.893.813-1.968 1.276-3.115 1.17-.14-1.09.406-2.143 1.094-2.886.854-.923 2.3-1.587 3.271-1.674.013 1.17.013 1.412 0 1.55zm3.54 16.71c-.786 1.143-1.714 2.287-3.086 2.3-1.143.013-1.486-.8-2.757-.8-1.284 0-1.684.786-2.757.814-1.114.027-2.071-1.143-2.871-2.286-1.557-2.257-2.757-6.386-1.143-9.171.8-1.414 2.243-2.314 3.814-2.343 1.186-.027 2.314.814 2.757.814.443 0 1.586-1.014 2.671-.871.457.02 1.743.185 2.557 1.386-.066.04-1.529.914-1.514 2.714.027 2.171 1.886 2.914 1.914 2.928-.014.04-.3 1.043-.986 2.057z'/%3E%3C/svg%3E") center / contain no-repeat;
    width: 18px;
}

.mk-auth-google {
    align-items: center;
    background: #fff;
    border: 1px solid #dadce0;
    border-radius: 12px;
    color: #3c4043;
    display: flex;
    font-weight: 600;
    gap: 0.65rem;
    justify-content: center;
    margin-bottom: 0.75rem;
    min-height: 48px;
    padding: 0.75rem 1rem;
    text-decoration: none;
    width: 100%;
}

.mk-auth-google span {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%23EA4335' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%234285F4' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%2334A853' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center / contain no-repeat;
    display: inline-block;
    flex-shrink: 0;
    height: 20px;
    width: 20px;
}

.mk-auth-google:hover {
    background: #f8f9fa;
    border-color: #d2e3fc;
}

.mk-auth-divider {
    color: var(--winkels-text-muted);
    font-size: 0.85rem;
    margin: 0 0 1rem;
    text-align: center;
}

.mk-auth-divider span {
    background: var(--winkels-card, #fff);
    padding: 0 0.75rem;
    position: relative;
}

.mk-auth-divider::before {
    background: rgba(124, 58, 237, 0.12);
    content: "";
    display: block;
    height: 1px;
    margin-bottom: -0.65rem;
    width: 100%;
}

/* --- Customer account ---------------------------------------------------- */
.mk-account { margin-bottom: 1.5rem; }

.mk-account-nav {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.mk-account-nav a {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid var(--winkels-border-strong);
    background: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--winkels-text-muted);
    text-decoration: none;
}

.mk-account-nav a.is-on {
    background: var(--winkels-gradient);
    border-color: transparent;
    color: #fff;
}

.mk-account-nav-logout {
    margin: 0;
    margin-inline-start: auto;
}

.mk-account-nav-logout button {
    padding: 0.5rem 1rem;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--winkels-danger, #dc2626) 35%, var(--winkels-border-strong));
    background: #fff;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--winkels-danger, #dc2626);
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}

.mk-account-nav-logout button:hover {
    background: color-mix(in srgb, var(--winkels-danger, #dc2626) 8%, #fff);
}

.mk-mall-account-sheet-sub {
    color: var(--winkels-text-muted);
    font-size: 0.88rem;
    margin: -0.25rem 0 1rem;
    text-align: center;
}

.mk-mall-account-logout {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--winkels-border);
}

.mk-mall-account-logout-btn {
    color: var(--winkels-danger, #dc2626) !important;
    border-color: color-mix(in srgb, var(--winkels-danger, #dc2626) 35%, var(--winkels-border-strong)) !important;
    width: 100%;
}

.mk-mall-account-sheet .sf-menu-nav {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-top: 0.75rem;
}

.mk-mall-account-sheet .sf-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 0.95rem;
    border-radius: var(--winkels-radius-md, 0.75rem);
    background: var(--winkels-surface-muted, #f3f4f6);
    color: var(--winkels-text);
    text-decoration: none;
    font-weight: 600;
}

.mk-mall-account-sheet .sf-menu-link svg {
    flex-shrink: 0;
    color: var(--winkels-text);
}

.mk-mall-account-sheet .sf-menu-link:hover {
    background: var(--winkels-surface-hover, #e5e7eb);
}

.mk-account-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .mk-account-grid { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); }
}

.mk-order-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.85rem 1rem;
}

.mk-order-main { flex: 1; min-width: 12rem; }

.mk-order-rest-logo {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    overflow: hidden;
    background: var(--winkels-purple-50);
    border: 1px solid var(--winkels-border);
    text-decoration: none;
    color: var(--winkels-purple-700);
    font-weight: 800;
}

.mk-order-rest-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mk-order-rest-logo--static {
    display: grid;
    place-items: center;
    pointer-events: none;
}

.mk-customer-hub {
    margin-bottom: 1rem;
    padding: 1rem 1.05rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(117, 31, 232, 0.08) 0%, rgba(231, 224, 111, 0.18) 100%);
    border: 1px solid var(--winkels-border-strong);
}

.mk-customer-hub-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.mk-customer-hub-brand {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-width: min(100%, 18rem);
}

.mk-customer-hub-logo {
    width: 3rem;
    height: 3rem;
    border-radius: 0.9rem;
    object-fit: cover;
    background: #fff;
    border: 1px solid var(--winkels-border);
}

.mk-customer-hub-logo--fallback {
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--winkels-purple-700);
}

.mk-customer-hub-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--winkels-text);
}

.mk-customer-hub-sub {
    margin: 0.2rem 0 0;
    font-size: 0.88rem;
    color: var(--winkels-text-muted);
    line-height: 1.45;
}

.mk-customer-hub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
}

@media (max-width: 640px) {
    .mk-customer-hub-actions {
        width: 100%;
    }

    .mk-customer-hub-actions .btn-winkels,
    .mk-customer-hub-actions .btn-winkels-outline {
        flex: 1 1 calc(50% - 0.3rem);
        justify-content: center;
        text-align: center;
    }
}

.mk-order-side {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mk-address {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.mk-address-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.mk-address-form { margin-top: 0.85rem; }

.mk-addresses-page {
    max-width: 40rem;
    margin-inline: auto;
}

.mk-addresses-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mk-addresses-card {
    background: #fff;
    border: 1px solid var(--winkels-border, #e5e7eb);
    border-radius: 1.15rem;
    box-shadow: 0 8px 24px rgba(80, 30, 140, 0.06);
    padding: 1rem;
}

.mk-addresses-title {
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #751fe8;
    text-align: start;
}

.mk-address-item {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.9rem 0;
    border-top: 1px solid #f0eef5;
}

.mk-address-item:first-of-type {
    border-top: 0;
    padding-top: 0;
}

.mk-address-copy {
    min-width: 0;
}

.mk-address-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.mk-address-head strong {
    font-size: 1rem;
}

.mk-address-copy p {
    margin: 0.3rem 0 0;
    color: #6b7280;
    font-size: 0.9rem;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.mk-address-actions form {
    margin: 0;
    flex: 1 1 auto;
    min-width: 5.5rem;
}

.mk-address-actions .btn-winkels-outline,
.mk-address-actions .btn-danger-soft,
.mk-address-form-actions .btn-winkels,
.mk-address-form-actions .btn-winkels-outline {
    width: 100%;
    justify-content: center;
}

.mk-address-add,
.mk-address-form {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.mk-addresses-page .menu-field {
    margin-bottom: 0;
}

.mk-address-default {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
}

.mk-address-save,
.mk-address-form-actions {
    width: 100%;
}

.mk-address-form-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.mk-address-picker-map {
    position: relative;
    height: 210px;
}

.mk-address-picker-locate {
    position: absolute;
    inset-inline-start: 0.65rem;
    bottom: 0.65rem;
    z-index: 2;
    padding: 0.45rem 0.8rem;
    border-radius: 999px;
    border: 0;
    background: #fff;
    color: #751fe8;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 800;
    box-shadow: 0 6px 18px rgba(40, 8, 82, 0.16);
    cursor: pointer;
}

.mk-address-picker-locate:disabled {
    opacity: 0.7;
}

.mk-address-picker-fields .menu-field {
    margin-bottom: 0;
}

.mk-address-save {
    min-height: 2.75rem;
}

@media (min-width: 720px) {
    .mk-address-item {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .mk-address-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
    }

    .mk-address-actions form,
    .mk-address-actions .btn-winkels-outline {
        width: auto;
        flex: 0 0 auto;
    }

    .mk-address-picker-map {
        height: 260px;
    }

    .mk-addresses-card {
        padding: 1.25rem;
    }
}

.mk-code {
    display: inline-block;
    padding: 0.1rem 0.45rem;
    border-radius: 0.4rem;
    background: var(--winkels-purple-soft);
    color: var(--winkels-purple-700);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.mk-code-input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* --- Rating a delivered order ------------------------------------------- */
.mk-review-page { max-width: 32rem; margin: 2rem auto; }

.mk-review-head {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-bottom: 1.25rem;
}

.mk-review-logo {
    width: 3.25rem;
    height: 3.25rem;
    border-radius: var(--winkels-radius-sm);
    object-fit: cover;
}

.mk-review-q {
    font-size: 1.05rem;
    font-weight: 700;
    text-align: center;
}

.mk-stars {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
}

.mk-star-btn {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: 2.1rem;
    line-height: 1;
    color: var(--winkels-purple-200);
    transition: transform 0.15s var(--winkels-ease), color 0.15s var(--winkels-ease);
}

.mk-star-btn:hover { transform: scale(1.12); }
.mk-star-btn.is-on { color: var(--winkels-gold); }

.mk-stars-static {
    font-size: 1.9rem;
    color: var(--winkels-gold);
    letter-spacing: 0.1em;
}

.mk-review-done { text-align: center; }

.mk-review-comment {
    margin: 0.75rem 0;
    font-size: 1.02rem;
    color: var(--winkels-text);
}

.mk-review-reply {
    margin-top: 1.25rem;
    padding: 0.9rem 1rem;
    border-radius: var(--winkels-radius-sm);
    background: var(--winkels-purple-50);
    text-align: start;
}

/* --- Driver screen ------------------------------------------------------- */
.dv-shell {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.25rem 1rem 3rem;
}

.dv-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.8rem;
    background: var(--winkels-gradient-deep);
    color: #fff;
    border-radius: var(--winkels-radius-lg);
    padding: 1.35rem;
    margin-bottom: 1.25rem;
}

.dv-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.dv-title { font-size: 1.3rem; font-weight: 800; }
.dv-sub { color: rgba(255, 255, 255, 0.78); font-size: 0.9rem; }

.dv-section-title {
    font-size: 0.78rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--winkels-text-muted);
    margin: 1.5rem 0 0.75rem;
}

.dv-list { display: flex; flex-direction: column; gap: 1rem; }

.dv-order {
    background: #fff;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-lg);
    padding: 1.1rem;
    box-shadow: var(--winkels-shadow-sm);
}

.dv-order-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.dv-order-name { font-weight: 700; }

.dv-order-phone {
    color: var(--winkels-purple-700);
    font-weight: 600;
    text-decoration: none;
    direction: ltr;
    display: inline-block;
}

.dv-order-total {
    font-size: 1.1rem;
    font-weight: 800;
    white-space: nowrap;
}

.dv-order-address {
    margin-top: 0.6rem;
    color: var(--winkels-text);
    line-height: 1.7;
}

.dv-order-branch { font-size: 0.85rem; color: var(--winkels-text-muted); }

.dv-map {
    display: inline-block;
    margin-top: 0.4rem;
    font-weight: 600;
    color: var(--winkels-purple-700);
    text-decoration: none;
}

.dv-items {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--winkels-border-strong);
    font-size: 0.9rem;
    color: var(--winkels-text-muted);
    line-height: 1.9;
}

.dv-actions {
    margin-top: 0.9rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dv-actions form { flex: 1; }
.dv-actions button { width: 100%; }

.dv-done { display: flex; flex-direction: column; gap: 0.5rem; }

.dv-done-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    border-radius: var(--winkels-radius-sm);
    background: rgba(16, 185, 129, 0.08);
    font-size: 0.9rem;
}

/* --- Review moderation and summaries ------------------------------------ */
.review-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.review-site-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.review-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: center;
}

@media (min-width: 768px) {
    .review-summary { grid-template-columns: 12rem minmax(0, 1fr); }
}

.review-summary-score { text-align: center; }

.review-score {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
    color: var(--winkels-text);
}

.review-stars {
    color: var(--winkels-gold);
    letter-spacing: 0.08em;
    font-size: 1.05rem;
}

.review-summary-bars { display: flex; flex-direction: column; gap: 0.4rem; }

.review-bar-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.85rem;
}

.review-bar-label {
    flex: 0 0 2.6rem;
    color: var(--winkels-text-muted);
    white-space: nowrap;
}

.review-bar {
    flex: 1;
    height: 0.5rem;
    border-radius: 999px;
    background: var(--winkels-purple-100);
    overflow: hidden;
}

.review-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--winkels-gradient-gold);
}

.review-bar-count {
    flex: 0 0 2.2rem;
    text-align: end;
    color: var(--winkels-text-muted);
}

.review-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.review-comment {
    margin-top: 0.6rem;
    line-height: 1.8;
    color: var(--winkels-text);
}

.review-reply {
    margin-top: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--winkels-radius-sm);
    background: var(--winkels-purple-50);
    border-inline-start: 3px solid var(--winkels-purple-400);
}

/* --- Tickets ------------------------------------------------------------- */
.ticket-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .ticket-layout { grid-template-columns: minmax(0, 2fr) minmax(17rem, 1fr); }
}

.ticket-thread {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.ticket-message,
.ticket-msg {
    background: #fff;
    border: 1px solid var(--winkels-border);
    border-inline-start: 3px solid var(--winkels-purple-300);
    border-radius: var(--winkels-radius-sm);
    padding: 0.95rem 1.1rem;
}

.ticket-message.is-platform,
.ticket-msg-platform {
    background: var(--winkels-purple-50);
    border-inline-start-color: var(--winkels-purple-600);
}

.ticket-msg-mine {
    border-inline-start-color: var(--winkels-purple-300);
}

.ticket-message-head,
.ticket-msg-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-bottom: 0.45rem;
    font-size: 0.85rem;
}

.ticket-message-body,
.ticket-msg-body {
    white-space: pre-line;
    line-height: 1.8;
    color: var(--winkels-text);
}

.badge.priority-high {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
}

.badge.priority-normal {
    background: var(--winkels-purple-soft);
    color: var(--winkels-purple-700);
}

.badge.priority-low {
    background: rgba(109, 106, 134, 0.12);
    color: var(--winkels-text-muted);
}

.row-unread,
.is-unread {
    background: rgba(117, 31, 232, 0.05);
    font-weight: 600;
}

/* --- Admin lists for the new sections ----------------------------------- */
.detail-list {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0.35rem 0.9rem;
    font-size: 0.88rem;
}

.detail-list dt {
    color: var(--winkels-text-muted);
    white-space: nowrap;
}

.detail-list dd { color: var(--winkels-text); }

.detail-bullets {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.9rem;
}

.detail-bullets li {
    padding: 0.5rem 0.75rem;
    border-radius: var(--winkels-radius-sm);
    background: var(--winkels-purple-50);
    line-height: 1.7;
}

.detail-bullets a { margin-inline-start: 0.4rem; }

.banner-thumb {
    width: 6rem;
    height: 3.5rem;
    border-radius: var(--winkels-radius-sm);
    object-fit: cover;
    background: var(--winkels-purple-soft);
}

.coupon-inline-form {
    padding: 1rem;
    border-radius: var(--winkels-radius-sm);
    background: var(--winkels-purple-50);
}

.mk-drivers-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.mk-driver-list {
    display: grid;
    gap: 0.85rem;
}

.mk-driver-card {
    padding: 1.05rem 1.15rem;
}

.mk-driver-card-top {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.mk-driver-name-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
}

.mk-driver-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.mk-driver-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.75rem 1rem;
    margin: 0.9rem 0 0;
}

.mk-driver-meta dt {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.2rem;
}

.mk-driver-meta dd {
    margin: 0;
    font-weight: 700;
    color: #280852;
}

.mk-courier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1.15rem;
}

.mk-courier-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.85rem;
    margin-bottom: 1.35rem;
}

.mk-courier-summary-stat {
    min-height: 5.5rem;
}

.mk-courier-summary-stat.is-good {
    outline: 2px solid rgba(34, 197, 94, 0.35);
}

.mk-courier-section + .mk-courier-section {
    margin-top: 1.75rem;
}

.mk-courier-section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    margin-bottom: 1rem;
}

.mk-courier-section-head h3 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    color: #280852;
}

.mk-courier-section-head p {
    margin: 0;
    color: #64748b;
    font-size: 0.92rem;
}

.mk-courier-card.is-contracted {
    border: 1px solid rgba(34, 197, 94, 0.35);
    box-shadow: 0 10px 24px rgba(40, 8, 82, 0.06);
}

.mk-courier-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
}

.mk-courier-card-identity {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.mk-courier-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #751fe8, #280852);
    color: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.mk-courier-card-identity h3 {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
    color: #280852;
    line-height: 1.35;
}

.mk-courier-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.mk-courier-metric {
    padding: 0.65rem 0.7rem;
    border-radius: 0.75rem;
    background: #f8f5ff;
    text-align: center;
}

.mk-courier-metric span {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.15rem;
}

.mk-courier-metric strong {
    display: block;
    font-size: 1rem;
    color: #280852;
}

.mk-courier-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    margin: 0;
}

.mk-courier-meta dt {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.15rem;
}

.mk-courier-meta dd {
    margin: 0;
    font-weight: 700;
    color: #280852;
    word-break: break-word;
}

.mk-courier-branches {
    padding: 0.75rem 0.85rem;
    border-radius: 0.8rem;
    background: #f0fdf4;
    border: 1px solid rgba(34, 197, 94, 0.18);
}

.mk-courier-branches-label {
    margin: 0 0 0.15rem;
    font-size: 0.72rem;
    font-weight: 700;
    color: #15803d;
}

.mk-courier-branches-value {
    margin: 0 0 0.45rem;
    font-size: 0.88rem;
    font-weight: 700;
    color: #166534;
}

.mk-courier-branch-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.mk-courier-branch-tags li {
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(34, 197, 94, 0.22);
    font-size: 0.78rem;
    font-weight: 700;
    color: #166534;
}

.mk-courier-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.55rem;
    margin-top: auto;
}

.mk-courier-card-actions .btn-winkels,
.mk-courier-card-actions .btn-winkels-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    min-height: 2.65rem;
    padding-inline: 0.75rem;
}

.mk-courier-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.15rem 1.2rem 1.2rem;
}

.mk-courier-card-head h3 {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    color: #280852;
}

.mk-courier-card-head {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.mk-courier-rate {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #751fe8;
}

.mk-courier-rate-box {
    padding: 0.85rem 0.95rem;
    border-radius: 0.85rem;
    background: linear-gradient(135deg, #f8f5ff 0%, #f3edff 100%);
    border: 1px solid rgba(117, 31, 232, 0.14);
}

.mk-courier-rate-box-split {
    display: grid;
    gap: 0.65rem;
}

.mk-courier-rate-parts + .mk-courier-rate-parts {
    padding-top: 0.65rem;
    border-top: 1px dashed rgba(117, 31, 232, 0.18);
}

.mk-courier-rate-parts-vehicle {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #64748b;
}

.mk-courier-rate-parts-headline {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.1;
    color: #751fe8;
}

.mk-courier-rate-parts-headline small {
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
}

.mk-courier-rate-parts-lines {
    margin: 0.45rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.2rem;
}

.mk-courier-rate-parts-lines li {
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    line-height: 1.35;
}

.mk-courier-rate-parts-lines li:first-child {
    color: #280852;
    font-weight: 700;
}

.mk-courier-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: 0.75rem 1rem;
    margin: 0;
}

.mk-courier-facts dt {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.2rem;
}

.mk-courier-facts dd {
    margin: 0;
    font-weight: 700;
    color: #280852;
    word-break: break-word;
}

.mk-courier-card .btn-winkels {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    margin-top: auto;
}

.mk-courier-profile-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.mk-courier-profile-page {
    display: grid;
    gap: 1.15rem;
}

.mk-courier-profile-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem 1.25rem;
    padding: 1.15rem 1.25rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(117, 31, 232, 0.08), rgba(40, 8, 82, 0.04));
    border: 1px solid rgba(117, 31, 232, 0.12);
}

.mk-courier-profile-hero-main {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.mk-courier-avatar-lg {
    width: 4rem;
    height: 4rem;
    border-radius: 1.1rem;
    font-size: 1.55rem;
}

.mk-courier-profile-kicker {
    margin: 0 0 0.2rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
}

.mk-courier-profile-title {
    margin: 0 0 0.45rem;
    font-size: 1.55rem;
    line-height: 1.25;
    color: #280852;
}

.mk-courier-profile-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.55rem;
}

.mk-courier-branch-tags-inline {
    margin-top: 0.15rem;
}

.mk-courier-profile-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.mk-courier-profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 1.1rem 0.85rem;
    border-radius: 0.95rem;
    background: #fff;
    border: 1px solid rgba(40, 8, 82, 0.08);
    box-shadow: 0 8px 20px rgba(40, 8, 82, 0.04);
    text-align: center;
}

.mk-courier-profile-stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 1rem;
    background: #f8f5ff;
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.mk-courier-profile-stat strong {
    display: block;
    font-size: 1.55rem;
    line-height: 1.1;
    color: #280852;
}

.mk-courier-profile-stat span {
    display: block;
    margin-top: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
}

.mk-courier-profile-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.15rem;
}

.mk-courier-profile-panel {
    padding: 1.15rem 1.25rem 1.25rem;
}

.mk-courier-panel-title {
    margin: 0 0 0.85rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #280852;
}

.mk-courier-panel-subtitle {
    margin: 0 0 0.65rem;
    font-size: 0.92rem;
    font-weight: 800;
    color: #280852;
}

.mk-courier-panel-sub {
    margin: -0.45rem 0 0.85rem;
    font-size: 0.88rem;
    color: #64748b;
}

.mk-courier-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.85rem;
}

.mk-courier-panel-head .mk-courier-panel-title {
    margin-bottom: 0.2rem;
}

.mk-courier-rate-cards {
    display: grid;
    gap: 0.75rem;
}

.mk-courier-rate-card {
    padding: 0.9rem 1rem;
    border-radius: 0.9rem;
    background: #f8f5ff;
    border: 1px solid rgba(117, 31, 232, 0.12);
}

.mk-courier-rate-card-head {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.45rem;
    font-size: 0.98rem;
    color: #280852;
}

.mk-courier-rate-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 0.75rem;
    background: #fff;
    font-size: 1.65rem;
    line-height: 1;
    flex-shrink: 0;
}

.mk-courier-rate-card-price {
    margin: 0 0 0.35rem;
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.45;
    color: #751fe8;
}

.mk-courier-rate-card-range {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
}

.mk-rate-head .mk-courier-panel-title { margin-bottom: 0.2rem; }
.mk-rate-head .mk-courier-panel-sub { margin: 0 0 0.95rem; font-size: 0.84rem; color: #64748b; }

.mk-rate-special {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
    padding: 0.85rem 1rem;
    border-radius: 0.95rem;
    background: linear-gradient(135deg, #fffaf0 0%, #fdf1d6 100%);
    border: 1px solid #ecd8a8;
    color: #5b4312;
    text-decoration: none;
}
a.mk-rate-special:hover { border-color: #d4b064; }
.mk-rate-special-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 0.75rem;
    background: #fff;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.mk-rate-special > span:last-child { display: grid; gap: 0.15rem; min-width: 0; }
.mk-rate-special strong { font-size: 0.8rem; font-weight: 800; color: #8a6420; }
.mk-rate-special b { font-size: 1rem; font-weight: 800; color: #3d2a05; line-height: 1.45; }
.mk-rate-special small { font-size: 0.78rem; color: #8a6d3a; }

.mk-rate-grid { display: grid; gap: 0.8rem; }

.mk-rate {
    position: relative;
    padding: 1rem 1.05rem 1.05rem;
    border-radius: 1rem;
    background: linear-gradient(180deg, #faf7ff 0%, #fff 100%);
    border: 1px solid rgba(117, 31, 232, 0.14);
    box-shadow: 0 10px 24px -20px rgba(40, 8, 82, 0.45);
}
.mk-rate.is-muted { opacity: 0.72; }

.mk-rate-top { display: flex; align-items: center; gap: 0.6rem; }
.mk-rate-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.8rem;
    background: #fff;
    border: 1px solid rgba(117, 31, 232, 0.12);
    font-size: 1.45rem;
    flex-shrink: 0;
}
.mk-rate-name { font-size: 1rem; font-weight: 800; color: #280852; }
.mk-rate-range {
    margin-inline-start: auto;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(40, 8, 82, 0.1);
    font-size: 0.76rem;
    font-weight: 700;
    color: #475569;
    white-space: nowrap;
}

.mk-rate-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.8rem 0 0.55rem;
    line-height: 1;
}
.mk-rate-price span { font-size: 1.75rem; font-weight: 900; color: #751fe8; letter-spacing: -0.01em; }
.mk-rate-price small { font-size: 0.85rem; font-weight: 700; color: #64748b; }

.mk-rate-lines { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.mk-rate-lines li {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    font-size: 0.86rem;
    font-weight: 600;
    color: #334155;
    line-height: 1.45;
}
.mk-rate-lines li::before {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.08rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 900;
}
.mk-rate-lines li.is-ok::before { content: "✓"; background: #e3f7ee; color: #0b6b45; }
.mk-rate-lines li.is-plus::before { content: "+"; background: #fff1dc; color: #8a5300; }
.mk-rate-lines li.is-info::before { content: "i"; background: #efe7ff; color: #751fe8; }

.mk-rate-examples {
    margin-top: 0.85rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(117, 31, 232, 0.2);
}
.mk-rate-examples-label { display: block; margin-bottom: 0.45rem; font-size: 0.74rem; font-weight: 800; color: #64748b; }
.mk-rate-examples-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr)); gap: 0.45rem; }
.mk-rate-example {
    display: grid;
    gap: 0.15rem;
    padding: 0.5rem 0.6rem;
    border-radius: 0.7rem;
    background: #fff;
    border: 1px solid rgba(40, 8, 82, 0.08);
    text-align: center;
}
.mk-rate-example em { font-style: normal; font-size: 0.74rem; font-weight: 700; color: #64748b; }
.mk-rate-example b { font-size: 0.92rem; font-weight: 800; color: #280852; }

.mk-rate-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    margin: 0.9rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(40, 8, 82, 0.08);
    font-size: 0.82rem;
    color: #64748b;
    line-height: 1.5;
}
.mk-rate-foot a { font-weight: 800; color: #751fe8; text-decoration: none; white-space: nowrap; }

.mk-courier-rate-summary {
    margin: 0.85rem 0 0;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(40, 8, 82, 0.08);
    font-size: 0.88rem;
    color: #64748b;
    line-height: 1.55;
}

.mk-courier-detail-list {
    display: grid;
    gap: 0.55rem;
    margin: 0;
}

.mk-courier-detail-row {
    display: grid;
    grid-template-columns: minmax(5.5rem, 7rem) minmax(0, 1fr);
    gap: 0.75rem;
    align-items: baseline;
    padding: 0.65rem 0.75rem;
    border-radius: 0.75rem;
    background: #fafafa;
}

.mk-courier-detail-row dt {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: #64748b;
}

.mk-courier-detail-row dd {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #280852;
    word-break: break-word;
}

.mk-courier-bank-panel {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(40, 8, 82, 0.08);
}

.mk-courier-bank-panel .mk-courier-facts {
    margin-top: 0.35rem;
}

.mk-courier-coverage-panel .mk-courier-panel-title {
    margin-bottom: 0.75rem;
}

.mk-courier-coverage-panel .mk-courier-map-wrap-static {
    margin: 0 0 0.85rem;
}

.mk-courier-coverage-panel .mk-courier-map-wrap {
    border-radius: 0.9rem;
    overflow: hidden;
    border: 1px solid rgba(40, 8, 82, 0.08);
}

.mk-courier-coverage-panel .driver-zone-map-wrap .zone-map {
    height: 14rem;
}

.mk-courier-coverage-details {
    margin: 0;
    padding-top: 0.15rem;
    border-top: 1px solid rgba(40, 8, 82, 0.08);
}

.mk-courier-coverage-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 0 0.35rem;
    list-style: none;
    cursor: pointer;
    user-select: none;
}

.mk-courier-coverage-summary::-webkit-details-marker {
    display: none;
}

.mk-courier-coverage-summary::after {
    content: "▾";
    font-size: 1rem;
    color: #751fe8;
    transition: transform 0.2s ease;
}

.mk-courier-coverage-details[open] .mk-courier-coverage-summary::after {
    transform: rotate(180deg);
}

.mk-courier-coverage-summary-title {
    font-size: 1.05rem;
    font-weight: 800;
    color: #280852;
}

.mk-courier-coverage-summary-meta {
    font-size: 0.85rem;
    font-weight: 700;
    color: #64748b;
}

.mk-courier-zone-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0.65rem 0 0;
    padding: 0;
    list-style: none;
    max-height: 6.5rem;
    overflow: auto;
}

.mk-courier-zone-chips li {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: #f8f5ff;
    border: 1px solid rgba(117, 31, 232, 0.14);
    font-size: 0.8rem;
    font-weight: 700;
    color: #280852;
}

.mk-courier-zone-chips em {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.3rem;
    border-radius: 999px;
    background: #751fe8;
    color: #fff;
    font-style: normal;
    font-size: 0.72rem;
    font-weight: 800;
}

@media (max-width: 960px) {
    .mk-courier-profile-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mk-courier-profile-body {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .mk-courier-profile-stats {
        grid-template-columns: 1fr;
    }

    .mk-courier-detail-row {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }
}

.mk-courier-profile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.15rem;
    margin-bottom: 1.15rem;
}

.mk-courier-zones {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.55rem;
}

.mk-courier-zones li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 0.4rem 1rem;
    padding: 0.7rem 0.85rem;
    border-radius: 12px;
    background: #f8f6fc;
    color: #280852;
}

.mk-courier-zones span {
    font-weight: 800;
    color: #280852;
}

.mk-courier-zones em {
    font-style: normal;
    font-size: 0.82rem;
    font-weight: 700;
    color: #751fe8;
}

.mk-courier-contract-stop {
    border-top: 1px solid rgba(40, 8, 82, 0.08);
}

.mk-courier-contract-manage .menu-branch-list {
    max-width: 28rem;
}

.mk-courier-coverage-legend-list {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}

.mk-courier-coverage-legend-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    font-size: 0.875rem;
    color: #64748b;
}

.mk-courier-branch-picker {
    display: grid;
    gap: 0.65rem;
    max-width: 36rem;
}

.mk-courier-branch-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.85rem 1rem;
    border-radius: 14px;
    border: 1px solid rgba(40, 8, 82, 0.08);
    background: #fff;
    cursor: pointer;
}

.mk-courier-branch-row.is-disabled {
    opacity: 0.72;
    cursor: not-allowed;
}

.mk-courier-branch-row input {
    margin-top: 0.2rem;
}

.mk-courier-branch-row-body {
    display: grid;
    gap: 0.35rem;
    min-width: 0;
    flex: 1;
}

.mk-courier-branch-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
}

.mk-courier-branch-row-detail {
    font-size: 0.8125rem;
    line-height: 1.45;
    color: #64748b;
}

.mk-courier-zone-picker {
    max-width: 28rem;
}

.mk-courier-zone-picker .winkels-input {
    width: 100%;
}

.mk-courier-contract-bar {
    display: flex;
    justify-content: center;
    margin: 0.5rem 0 1.5rem;
}

.mk-courier-contract-bar .btn-winkels {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 12rem;
    text-decoration: none;
}

.mk-courier-terms h3 {
    margin: 0 0 0.85rem;
    color: #280852;
}

.mk-courier-terms ol {
    margin: 0;
    padding-inline-start: 1.2rem;
    display: grid;
    gap: 0.75rem;
    color: #3c0f79;
    line-height: 1.7;
}

.mk-courier-bank-box,
.mk-courier-pay-form {
    display: grid;
    gap: 0.45rem;
    padding: 0.85rem;
    border-radius: 12px;
    background: #f8f6fc;
}

.mk-courier-bank-box h4 {
    margin: 0 0 0.35rem;
    font-size: 0.88rem;
    color: #3c0f79;
}

.mk-courier-pay-form .btn-winkels {
    margin-top: 0.45rem;
}

.mk-courier-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.courier-bank-form {
    display: grid;
    gap: 0.35rem;
}

.mk-brands-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.4rem;
}

.mk-brands-limit {
    margin: 0.45rem 0 0;
    font-size: 0.88rem;
    font-weight: 700;
    color: #751fe8;
}

.mk-brand-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1.15rem;
}

.mk-brand-card {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.15rem 1.2rem 1.2rem;
}

.mk-brand-card.is-stopped {
    opacity: 0.86;
}

.mk-brand-card-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.75rem 1rem;
}

.mk-brand-identity {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.mk-brand-identity h3 {
    margin: 0;
    font-size: 1.12rem;
    color: #280852;
}

.mk-brand-logo {
    width: 3.1rem;
    height: 3.1rem;
    border-radius: 14px;
    object-fit: cover;
    background: #f3eefc;
    flex-shrink: 0;
}

.mk-brand-logo.is-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    color: #751fe8;
    background: #f3eefc;
}

.mk-brand-current {
    display: inline-block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #751fe8;
}

.mk-brand-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.mk-brand-note {
    margin: 0;
    font-size: 0.88rem;
    color: #64748b;
}

.mk-brand-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: auto;
}

.mk-driver-zone-chip {
    display: inline-flex;
    align-items: center;
    margin: 0.1rem 0.2rem 0.1rem 0;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: #f3e8ff;
    color: #751fe8;
    font-size: 0.75rem;
    font-weight: 700;
}

.mk-driver-modal {
    max-width: 40rem;
}

.driver-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.driver-link {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px dashed var(--winkels-border-strong);
}

.driver-link input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
}

.mk-admin-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .mk-admin-row { grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr) auto; }
}

.mk-admin-identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.mk-admin-logo {
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--winkels-radius-sm);
    object-fit: cover;
    background: var(--winkels-purple-soft);
}

.mk-admin-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));
    gap: 0.6rem;
}

.mk-admin-toggles {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: center;
}

/* Marketplace admin — restaurant categories (site-style rail + modal) */
.mk-cat-admin-wrap {
    overflow: hidden;
    --mk-cat-accent: #ff5722;
    --mk-cat-size: 4.5rem;
}

.mk-cat-scroll--admin {
    margin-bottom: 0;
    padding: 0.15rem 0.1rem;
}

.mk-cat-scroll--admin .mk-cat-scroll-track {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    padding: 0.1rem 0.15rem 0.35rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.mk-cat-scroll--admin .mk-cat-scroll-track::-webkit-scrollbar {
    display: none;
}

.mk-cat-scroll--admin .mk-cat-tile-img-wrap {
    display: grid;
    place-items: center;
    width: var(--mk-cat-size);
    height: var(--mk-cat-size);
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    background: #fff;
    overflow: hidden;
}

.mk-cat-scroll--admin .mk-cat-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.mk-cat-scroll--admin .mk-cat-tile-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
    width: 100%;
    line-height: 1.2;
    white-space: nowrap;
    color: #6b7280;
}

.mk-cat-tile--admin {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: calc(var(--mk-cat-size) + 0.25rem);
    border: none;
    background: transparent;
    cursor: pointer;
    font: inherit;
    padding: 0;
    scroll-snap-align: start;
    transition: transform 0.2s var(--winkels-ease);
}

.mk-cat-tile--admin:hover {
    transform: translateY(-2px);
}

.mk-cat-tile--admin:hover .mk-cat-tile-img-wrap {
    border-color: var(--mk-cat-accent);
}

.mk-cat-tile--admin.is-off {
    opacity: 0.45;
}

.mk-cat-tile--admin.is-off .mk-cat-tile-label {
    text-decoration: line-through;
}

.mk-cat-admin-modal {
    max-width: 28rem;
}

.mk-cat-admin-modal-preview {
    display: grid;
    place-items: center;
    margin-bottom: 0.85rem;
}

.mk-cat-admin-modal-img {
    width: 4.75rem;
    height: 4.75rem;
    border-radius: 50%;
    object-fit: cover;
    border: 2.5px solid #ff5722;
    box-shadow: 0 4px 14px rgba(40, 8, 82, 0.12);
}

.mk-cat-admin-modal-footer {
    border-top: 1px solid var(--winkels-border);
}

.mk-cat-admin-modal-delete {
    padding: 0 1.25rem 1.15rem;
}

.mk-marketplace-table .mk-marketplace-restaurant {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 12rem;
}

.mk-marketplace-table .mk-admin-logo {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
}

.mk-marketplace-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.mk-marketplace-toggle input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--winkels-purple-600);
    cursor: pointer;
}

/* --- Small utilities used by the new screens ---------------------------- */
.menu-field-error {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--winkels-danger);
}

.text-success { color: var(--winkels-success); }

/* =========================================================================
   Phase four: account security, merchant documents, favourites
   ========================================================================= */

/* --- Security pages ------------------------------------------------------ */
.security-page { max-width: 62rem; }

.security-notice {
    padding: 0.875rem 1rem;
    border-radius: var(--winkels-radius);
    font-size: 0.9rem;
    line-height: 1.6;
    border: 1px solid transparent;
}

.security-notice-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

.security-form { min-width: 15rem; }

.two-factor-setup {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    align-items: flex-start;
}

.two-factor-qr {
    background: #fff;
    padding: 0.75rem;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius);
    line-height: 0;
}

.two-factor-qr svg { width: 12.5rem; height: 12.5rem; }

.two-factor-secret {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.95rem;
    letter-spacing: 0.08em;
    word-break: break-all;
    background: var(--winkels-surface-2, #f8fafc);
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-sm, 0.5rem);
    padding: 0.6rem 0.75rem;
}

.recovery-code-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.recovery-code-grid li {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.9rem;
    text-align: center;
    padding: 0.5rem;
    background: var(--winkels-surface-2, #f8fafc);
    border: 1px dashed var(--winkels-border);
    border-radius: var(--winkels-radius-sm, 0.5rem);
}

/* --- Documents ----------------------------------------------------------- */
.document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
    gap: 1rem;
}

.document-preview {
    display: block;
    width: 100%;
    max-height: 11rem;
    object-fit: cover;
    border-radius: var(--winkels-radius);
    border: 1px solid var(--winkels-border);
}

.document-preview-file {
    display: grid;
    place-items: center;
    height: 5.5rem;
    max-height: none;
    width: 5.5rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--winkels-muted, #64748b);
    background: var(--winkels-surface-2, #f8fafc);
    text-decoration: none;
}

.document-meta { display: grid; gap: 0.5rem; font-size: 0.875rem; }
.document-meta dt { color: var(--winkels-muted, #64748b); font-size: 0.8rem; }
.document-meta dd { margin: 0; font-weight: 500; }

.document-rejection {
    margin-top: 0.75rem;
    padding: 0.7rem 0.85rem;
    background: #fef2f2;
    border-radius: var(--winkels-radius-sm, 0.5rem);
    color: #991b1b;
    font-size: 0.875rem;
    line-height: 1.6;
}

.document-review-row { background: var(--winkels-surface-2, #f8fafc); }

.document-review {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    align-items: flex-start;
    padding: 0.5rem 0;
}

.document-review .document-preview { max-width: 12rem; }

.badge.document-badge-pending { background: #fef3c7; color: #92400e; }
.badge.document-badge-verified { background: #dcfce7; color: #166534; }
.badge.document-badge-rejected { background: #fee2e2; color: #991b1b; }
.badge.document-badge-expired { background: #fee2e2; color: #991b1b; }
.badge.document-badge-expiring { background: #ffedd5; color: #9a3412; }

.stat-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.5rem 1rem;
    background: #fff;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius);
    min-width: 6.5rem;
}

.stat-chip-value { font-size: 1.35rem; font-weight: 700; line-height: 1.2; }
.stat-chip-label { font-size: 0.75rem; color: var(--winkels-muted, #64748b); }

/* When a chip is also the filter that produced the number. */
a.stat-chip {
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

a.stat-chip:hover { border-color: var(--winkels-primary, #7c3aed); }

a.stat-chip.is-active {
    border-color: var(--winkels-primary, #7c3aed);
    box-shadow: 0 0 0 1px var(--winkels-primary, #7c3aed) inset;
}

/* --- Favourites --------------------------------------------------------- */
.mk-card-shell { position: relative; }

/* The rail sizes its children, which is now the shell rather than the card. */
.mk-rail > .mk-card-shell {
    flex: 0 0 17rem;
    scroll-snap-align: start;
}

.mk-fav {
    position: absolute;
    top: 0.6rem;
    inset-inline-end: 0.6rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: var(--winkels-shadow-sm);
    color: #94a3b8;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s var(--winkels-ease), color 0.15s var(--winkels-ease);
}

.mk-fav:hover { transform: scale(1.08); color: #ef4444; }
.mk-fav.is-on { color: #ef4444; }
.mk-fav-form { margin: 0; }

.mk-chip-fav.is-on { color: #ef4444; }

.sf-fav {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.55rem 1rem;
    border: 1px solid var(--winkels-border);
    border-radius: 999px;
    background: #fff;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    align-self: flex-start;
    transition: border-color 0.15s var(--winkels-ease), color 0.15s var(--winkels-ease);
}

.sf-fav:hover { border-color: #fca5a5; color: #ef4444; }
.sf-fav.is-on { border-color: #fca5a5; color: #ef4444; }
.sf-fav-icon { font-size: 1.05rem; line-height: 1; }
.sf-fav-form { margin: 0; margin-inline-start: auto; }
.sf-fav-guest { margin-inline-start: auto; }

/* =========================================================================
   Phase five: self-serve subscriptions
   ========================================================================= */

/* --- The pricing page --------------------------------------------------- */
.sub-hero {
    max-width: 46rem;
    margin: 0 auto 2.5rem;
    text-align: center;
}

.sub-hero-eyebrow {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: var(--winkels-purple-soft);
    color: var(--winkels-purple-deep);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.sub-hero-title {
    margin: 1rem 0 0.6rem;
    font-size: clamp(1.9rem, 4vw, 2.9rem);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.sub-hero-sub {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--winkels-text-muted);
}

.sub-hero-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.25rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
    color: var(--winkels-text-muted);
}

.sub-hero-points li::before {
    content: '✓';
    margin-inline-end: 0.4rem;
    font-weight: 700;
    color: var(--winkels-success);
}

.sub-cycle {
    display: flex;
    gap: 0.25rem;
    width: fit-content;
    margin: 0 auto 2rem;
    padding: 0.3rem;
    border: 1px solid var(--winkels-border);
    border-radius: 999px;
    background: var(--winkels-white);
    box-shadow: var(--winkels-shadow-sm);
}

.sub-cycle-tab {
    padding: 0.55rem 1.5rem;
    border-radius: 999px;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--winkels-text-muted);
    text-decoration: none;
    transition: background 0.18s var(--winkels-ease), color 0.18s var(--winkels-ease);
}

.sub-cycle-tab:hover { color: var(--winkels-text); }

.sub-cycle-tab.is-on {
    background: var(--winkels-gradient);
    color: #fff;
    box-shadow: var(--winkels-glow);
}

.sub-empty {
    max-width: 34rem;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    text-align: center;
}

.sub-empty-title { margin: 0 0 0.5rem; font-size: 1.3rem; font-weight: 700; }
.sub-empty .btn-winkels-outline { margin-top: 1.25rem; }

.sub-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.25rem;
    align-items: start;
}

.sub-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    padding: 1.75rem 1.5rem;
}

.sub-plan.is-featured {
    border-color: var(--winkels-border-strong);
    box-shadow: var(--winkels-shadow-lg);
}

.sub-plan-badge {
    position: absolute;
    top: -0.7rem;
    inset-inline-start: 1.5rem;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    background: var(--winkels-gradient-gold);
    color: #4a2c04;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.sub-plan-name { margin: 0; font-size: 1.2rem; font-weight: 800; }
.sub-plan-tagline { margin: 0; font-size: 0.88rem; color: var(--winkels-text-muted); }

.sub-plan-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
    margin: 0.5rem 0 0;
}

.sub-plan-was {
    font-size: 1rem;
    font-weight: 700;
    text-decoration: line-through;
    color: var(--winkels-text-muted);
}

.sub-plan-amount {
    font-size: 1.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: var(--winkels-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.sub-plan-per { font-size: 0.9rem; color: var(--winkels-text-muted); }

.sub-plan-branches { margin: 0; font-size: 0.9rem; font-weight: 600; }
.sub-plan-extra,
.sub-plan-discount { margin: 0; font-size: 0.82rem; color: var(--winkels-text-muted); }

.sub-plan-save {
    display: inline-block;
    margin-inline-start: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #fff3b0;
    font-size: 0.75rem;
    font-weight: 800;
}

.sub-plan-grant {
    margin: 8px 0 0;
    font-size: 0.88rem;
    font-weight: 700;
}

.sub-plan-terms {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
}

.sub-plan-terms li {
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--winkels-soft, #f3e8ff);
    font-size: 0.78rem;
    font-weight: 800;
}

.sub-plan-features {
    margin: 0.75rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.4rem;
    font-size: 0.88rem;
    line-height: 1.5;
}

.sub-plan-features li { padding-inline-start: 1.25rem; position: relative; }

.sub-plan-features li::before {
    content: '✓';
    position: absolute;
    inset-inline-start: 0;
    font-weight: 700;
    color: var(--winkels-success);
}

.sub-plan-action { margin: 1.25rem 0 0; }

.sub-tax-note,
.sub-outro {
    margin-top: 1.5rem;
    text-align: center;
    font-size: 0.88rem;
    color: var(--winkels-text-muted);
}

.sub-outro p { margin: 0 0 0.25rem; }

/* --- The funnel: steps, forms, summaries -------------------------------- */
.sub-flow { max-width: 56rem; margin: 0 auto; }

.sub-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    margin: 0 0 1.75rem;
    padding: 0;
    list-style: none;
}

.sub-step {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--winkels-text-muted);
}

.sub-step-mark {
    display: grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 999px;
    border: 1px solid var(--winkels-border-strong);
    font-size: 0.78rem;
    font-weight: 700;
}

.sub-step.is-on { color: var(--winkels-text); }

.sub-step.is-on .sub-step-mark {
    background: var(--winkels-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--winkels-glow);
}

.sub-step.is-done .sub-step-mark {
    background: var(--winkels-success);
    border-color: transparent;
    color: #fff;
}

.sub-form-card { padding: 2rem 1.75rem; }
.sub-form-title { margin: 0 0 0.4rem; font-size: 1.55rem; font-weight: 800; }
.sub-form-sub { margin: 0 0 1.75rem; color: var(--winkels-text-muted); line-height: 1.7; }

.sub-fieldset { border: 0; margin: 0 0 1.5rem; padding: 0; }
.sub-fieldset-title { margin: 0 0 0.3rem; font-size: 1.02rem; font-weight: 700; }

.sub-fieldset-hint {
    margin: 0 0 1rem;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--winkels-text-muted);
}

.sub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.sub-grid-wide { grid-column: 1 / -1; }

.menu-field-hint {
    margin-top: 0.3rem;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--winkels-text-muted);
}

.sub-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius);
    background: var(--winkels-bg);
    font-size: 0.88rem;
    line-height: 1.6;
}

.sub-consent input { margin-top: 0.2rem; }

.sub-docs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 720px) {
    .sub-docs { grid-template-columns: 1fr; }
}

.sub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
    justify-content: space-between;
    margin-top: 1.75rem;
}

.sub-actions.is-centered { justify-content: center; margin-top: 1.5rem; }

/* --- Choosing a plan inside the funnel ---------------------------------- */
.sub-pick-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.75rem;
}

.sub-pick-plan {
    display: grid;
    gap: 0.3rem;
    padding: 1rem 1.1rem;
    border: 1.5px solid var(--winkels-border);
    border-radius: var(--winkels-radius);
    background: var(--winkels-white);
    cursor: pointer;
    transition: border-color 0.18s var(--winkels-ease), box-shadow 0.18s var(--winkels-ease);
}

.sub-pick-plan:hover { border-color: var(--winkels-border-strong); }

.sub-pick-plan.is-on {
    border-color: var(--winkels-purple);
    box-shadow: var(--winkels-glow);
}

.sub-pick-plan-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.sub-pick-plan-name { font-weight: 700; }

.sub-pick-plan-badge {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--winkels-gold-soft);
    color: #7c4a03;
    font-size: 0.68rem;
    font-weight: 800;
}

.sub-pick-plan-price { font-size: 1.15rem; font-weight: 800; }
.sub-pick-plan-price small { font-size: 0.78rem; font-weight: 500; color: var(--winkels-text-muted); }
.sub-pick-plan-was { margin-inline-end: 6px; color: var(--winkels-text-muted); font-weight: 700; }
.sub-pick-plan-meta { font-size: 0.82rem; color: var(--winkels-text-muted); }

.sub-summary {
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius);
    background: var(--winkels-bg);
    transition: opacity 0.15s linear;
}

/* Dimmed while a fresh quote is in flight, so a stale total never looks final. */
.sub-summary.is-loading { opacity: 0.55; }

.sub-summary-title { margin: 0 0 0.85rem; font-size: 1rem; font-weight: 700; }

.sub-summary-lines { margin: 0; display: grid; gap: 0.5rem; }

.sub-summary-line {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.92rem;
}

.sub-summary-line dt { color: var(--winkels-text-muted); }
.sub-summary-line dd { margin: 0; font-weight: 600; }
.sub-summary-line.is-credit dd { color: var(--winkels-success); }

.sub-summary-line.is-total {
    margin-top: 0.35rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--winkels-border-strong);
    font-size: 1.05rem;
}

.sub-summary-line.is-total dt { color: var(--winkels-text); font-weight: 700; }
.sub-summary-line.is-total dd { font-size: 1.2rem; font-weight: 800; }

.sub-summary-divider {
    height: 1px;
    margin: 0.35rem 0;
    background: var(--winkels-border);
}

.sub-summary-renewal {
    margin: 0.85rem 0 0;
    font-size: 0.8rem;
    color: var(--winkels-text-muted);
}

/* --- Checkout ----------------------------------------------------------- */
.sub-checkout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 52rem) {
    .sub-checkout { grid-template-columns: 1fr; }
}

.sub-aside { padding: 1.5rem 1.35rem; }
.sub-aside-title { margin: 0 0 1rem; font-size: 1.05rem; font-weight: 700; }

.sub-aside-block {
    margin-top: 1.25rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--winkels-border);
}

.sub-aside-heading {
    margin: 0 0 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--winkels-text-muted);
}

.sub-aside-line { margin: 0 0 0.2rem; font-size: 0.9rem; }
.sub-aside-edit { display: inline-block; margin-top: 1rem; font-size: 0.85rem; }

.sub-gateways { display: grid; gap: 0.6rem; }

.sub-gateway {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--winkels-border);
    border-radius: var(--winkels-radius);
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
}

.sub-gateway:has(input:checked) {
    border-color: var(--winkels-purple);
    background: var(--winkels-purple-soft);
}

.sub-pay-via { margin: 0; font-size: 0.9rem; color: var(--winkels-text-muted); }

.sub-secure-note {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.6;
    text-align: center;
    color: var(--winkels-text-muted);
}

.sub-notice {
    padding: 0.9rem 1.05rem;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius);
    background: var(--winkels-bg);
    font-size: 0.9rem;
    line-height: 1.65;
}

.sub-notice p { margin: 0 0 0.35rem; }
.sub-notice p:last-child { margin-bottom: 0; }

.sub-notice.is-warning {
    background: #fffbeb;
    border-color: #fde68a;
    color: #92400e;
}

/* --- The last screen ---------------------------------------------------- */
.sub-done {
    max-width: 36rem;
    margin: 0 auto;
    padding: 2.5rem 2rem;
    text-align: center;
}

.sub-done-mark {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto 1.25rem;
    border-radius: 999px;
    background: var(--winkels-success);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
}

.sub-done-mark.is-bad { background: var(--winkels-danger); }

.sub-done-title { margin: 0 0 0.5rem; font-size: 1.6rem; font-weight: 800; }
.sub-done-sub { margin: 0 0 1.5rem; color: var(--winkels-text-muted); line-height: 1.7; }

.sub-done-mail {
    padding: 1.1rem 1.25rem;
    border: 1px dashed var(--winkels-border-strong);
    border-radius: var(--winkels-radius);
    background: var(--winkels-bg);
    margin-bottom: 1.5rem;
}

.sub-done-mail-label { margin: 0; font-size: 0.82rem; color: var(--winkels-text-muted); }
.sub-done-mail-address { margin: 0.25rem 0 0.5rem; font-size: 1.05rem; font-weight: 700; }
.sub-done-mail-note { margin: 0; font-size: 0.78rem; color: var(--winkels-text-muted); line-height: 1.6; }

.sub-done-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.85rem;
    margin: 0 0 1.75rem;
    text-align: start;
}

.sub-done-facts dt { font-size: 0.78rem; color: var(--winkels-text-muted); }
.sub-done-facts dd { margin: 0.15rem 0 0; font-weight: 700; }

.sub-done-action { display: inline-block; }

/* --- What the merchant sees about their subscription -------------------- */
.sub-merchant {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.sub-merchant-hero {
    padding: 1.35rem 1.4rem 1.45rem;
}

.sub-merchant-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.sub-merchant-plan {
    margin: 0.15rem 0 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: #3a1a86;
}

.sub-merchant-facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.95rem;
    margin: 0;
}

.sub-merchant-facts dt { font-size: 0.78rem; color: var(--winkels-text-muted); }
.sub-merchant-facts dd { margin: 0.2rem 0 0; font-weight: 700; }

.sub-merchant-days {
    display: inline-block;
    margin-inline-start: 0.35rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--winkels-text-muted);
}

.sub-merchant-days.is-soon {
    color: #b45309;
}

.sub-merchant-usage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: 0.85rem;
    margin-top: 1.2rem;
}

.sub-merchant-usage-label {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.82rem;
    margin-bottom: 0.4rem;
}

.sub-usage-bar {
    height: 0.45rem;
    border-radius: 999px;
    background: #f4f0e4;
    overflow: hidden;
}

.sub-usage-bar span {
    display: block;
    height: 100%;
    background: #eee24b;
    border-radius: inherit;
}

.sub-merchant-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.sub-history-empty {
    margin: 0;
    padding: 2rem 1.25rem;
    text-align: center;
    color: var(--winkels-text-muted);
}

.sub-history-list {
    list-style: none;
    margin: 0;
    padding: 0.85rem 1.1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sub-history-item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.85rem 1rem;
    align-items: start;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(74, 37, 169, 0.1);
    border-radius: 1rem;
    background: linear-gradient(180deg, #fff 0%, #fdfcff 100%);
}

.sub-history-mark {
    width: 0.7rem;
    height: 0.7rem;
    margin-top: 0.45rem;
    border-radius: 999px;
    background: #eee24b;
    box-shadow: 0 0 0 4px rgba(238, 226, 75, 0.28);
}

.sub-history-top {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.55rem;
    margin-bottom: 0.35rem;
}

.sub-history-kind {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    background: #f6f2ff;
    color: #4a25a9;
    font-size: 0.72rem;
    font-weight: 700;
}

.sub-history-kind.is-renewal { background: #fff8d6; color: #3a1a86; }
.sub-history-kind.is-opening { background: #eef7ff; color: #1d4ed8; }

.sub-history-title {
    margin: 0;
    font-weight: 800;
    color: #3a1a86;
}

.sub-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.85rem;
    margin: 0.35rem 0 0;
    font-size: 0.8rem;
    color: var(--winkels-text-muted);
}

.sub-history-ref {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
}

.sub-history-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    text-align: end;
}

.sub-history-side strong {
    font-size: 1.05rem;
    color: #4a25a9;
}

@media (max-width: 720px) {
    .sub-history-item {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .sub-history-side {
        grid-column: 2;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

/* --- Platform payment credentials -------------------------------------- */
.gw-row {
    padding: 1.1rem 1.15rem;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius);
    background: var(--winkels-bg);
}

.gw-row-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.85rem;
}

.gw-row-flags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
}

.gw-card {
    padding: 1.15rem 1.2rem;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius);
    background: var(--winkels-surface, #fff);
    box-shadow: 0 1px 0 rgba(117, 31, 232, 0.04);
}

.gw-card-compact {
    padding: 1rem 1.05rem;
}

.gw-card-readonly {
    background: var(--winkels-bg);
}

.gw-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}

.gw-card-title {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
}

.gw-card-sub {
    font-size: 0.82rem;
    color: var(--winkels-muted);
    margin: 0.2rem 0 0;
}

.gw-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.pay-offer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.95rem 1.05rem;
    border: 1px dashed var(--winkels-purple-200, #dcc9fb);
    border-radius: 8px;
    background: #fff;
    margin-bottom: 0.75rem;
}

.pay-offer-copy strong {
    display: block;
    font-weight: 700;
}

.pay-offer-copy p {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: var(--winkels-muted);
}

.pay-offer-actions {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
}

.gw-env-toggle {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.65rem;
}

.gw-env-option {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--winkels-border);
    border-radius: calc(var(--winkels-radius) - 2px);
    cursor: pointer;
    background: var(--winkels-bg);
}

.gw-env-option:has(input:checked) {
    border-color: var(--winkels-primary);
    background: rgba(117, 31, 232, 0.06);
}

.gw-env-option strong {
    display: block;
    font-size: 0.92rem;
}

.gw-env-option small {
    display: block;
    color: var(--winkels-muted);
    font-size: 0.78rem;
    margin-top: 0.15rem;
    line-height: 1.35;
}

.gw-purpose-note {
    font-size: 0.84rem;
    color: var(--winkels-muted);
    padding: 0.65rem 0.8rem;
    border-radius: calc(var(--winkels-radius) - 2px);
    background: rgba(231, 224, 111, 0.18);
    border: 1px dashed rgba(117, 31, 232, 0.18);
}

.gw-webhook code {
    display: block;
    margin-top: 0.25rem;
    padding: 0.35rem 0.5rem;
    background: var(--winkels-bg);
    border-radius: 4px;
}

.gw-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.25rem;
}

.gw-flag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.88rem;
}

.gw-scope-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 0.85rem;
}

.gw-scope-card {
    padding: 1rem 1.1rem;
    border-radius: var(--winkels-radius);
    border: 1px solid var(--winkels-border);
}

.gw-scope-card.is-platform {
    border-color: rgba(117, 31, 232, 0.35);
    background: rgba(117, 31, 232, 0.05);
}

.gw-scope-card.is-merchant {
    border-color: rgba(231, 224, 111, 0.55);
    background: rgba(231, 224, 111, 0.12);
}

.gw-scope-card h3 {
    font-weight: 700;
    font-size: 0.95rem;
    margin: 0 0 0.35rem;
}

.gw-scope-card p {
    margin: 0;
    font-size: 0.84rem;
    color: var(--winkels-muted);
}

.gw-scope-note {
    padding: 0.75rem 0.85rem;
    border-radius: calc(var(--winkels-radius) - 2px);
    background: var(--winkels-bg);
    border: 1px solid var(--winkels-border);
}

.gw-add-details summary {
    cursor: pointer;
    list-style: none;
}

.gw-add-details summary::-webkit-details-marker {
    display: none;
}

.gw-card-compact .gw-env-option {
    padding: 0.55rem 0.75rem;
}

.gw-card-compact .gw-env-option small {
    display: none;
}

.gw-card-embedded {
    border: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
}

.pg-desk {
    max-width: 40rem;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 1.25rem;
}

.pg-row {
    background: var(--winkels-surface, #fff);
    border: 1px solid var(--winkels-border);
    border-radius: 1rem;
    overflow: hidden;
}

.pg-row.is-open {
    border-color: rgba(117, 31, 232, 0.28);
}

.pg-row-add:not(.is-open) {
    border-style: dashed;
    background: transparent;
}

.pg-row-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.05rem 1.2rem;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: start;
    color: inherit;
    font: inherit;
    appearance: none;
}

@media (max-width: 640px) {
    .pg-row-toggle {
        flex-direction: column;
        align-items: stretch;
    }

    .pg-row-aside {
        justify-content: flex-start;
    }
}

.pg-row-copy h3 {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.3;
}

.pg-row-copy p {
    margin: 0.2rem 0 0;
    font-size: 0.8rem;
    color: var(--winkels-muted);
    line-height: 1.45;
}

.pg-row-aside {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
}

.pg-pill {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18rem 0.55rem;
    border-radius: 999px;
    line-height: 1.4;
}

.pg-pill.is-live {
    background: #eef7ef;
    color: #1f7a3a;
}

.pg-pill.is-sandbox {
    background: #f6f1d8;
    color: #6a5a12;
}

.pg-pill.is-on {
    background: #efe7ff;
    color: #5a2db0;
}

.pg-pill.is-off {
    background: #f3f3f5;
    color: #6b6572;
}

.pg-pill.is-warn {
    background: #fdecec;
    color: #a33b3b;
}

.pg-row-action {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--winkels-primary, #751fe8);
    min-width: 2.5rem;
    text-align: end;
}

.pg-row-body {
    padding: 0 1.2rem 1.2rem;
    border-top: 1px solid var(--winkels-border);
}

.pg-empty {
    padding: 1.1rem 1.2rem;
    border-radius: 1rem;
    border: 1px dashed var(--winkels-border);
    color: var(--winkels-muted);
    font-size: 0.9rem;
}

.pg-desk .sub-notice {
    margin: 0;
}

.pg-desk .gw-purpose-note {
    display: none;
}

/* A count that wants attention rather than pride. */
.winkels-stat.is-alert { outline: 2px solid var(--winkels-warning); outline-offset: 2px; }

/* ---------------------------------------------------------------------------
   Zones: where the shopper is, and the positions sold in that area.
   --------------------------------------------------------------------------- */

/* The gate. Nothing else is on this page, so it reads as a single question. */
.mk-gate {
    max-width: 34rem;
    margin: 3rem auto;
    text-align: center;
}

.mk-gate-title {
    font-size: 1.75rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
}

.mk-gate-sub {
    color: var(--winkels-text-muted);
    margin-bottom: 1.75rem;
}

.mk-gate-cta {
    font-size: 1rem;
    padding: 0.75rem 2rem;
}

.mk-gate-error {
    margin-top: 0.85rem;
    color: var(--winkels-danger);
    font-size: 0.9rem;
    font-weight: 600;
}

.mk-gate-alt {
    margin-top: 2.5rem;
    padding-top: 1.75rem;
    border-top: 1px solid var(--winkels-border);
}

.mk-gate-or {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--winkels-text-muted);
    margin-bottom: 1rem;
}

.mk-gate-picks {
    display: grid;
    gap: 0.9rem;
    max-width: 22rem;
    margin: 0 auto;
    text-align: start;
}

.mk-gate-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
}

.mk-gate-picks .btn-winkels {
    width: 100%;
    margin-top: 0.15rem;
}

.mk-gate-picks .winkels-input:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.mk-gate-zones {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.mk-gate-zones .mk-chip {
    cursor: pointer;
    font-family: inherit;
}

.mk-gate-note {
    margin-top: 1.25rem;
    font-size: 0.8rem;
    color: var(--winkels-text-muted);
}

/* The standing reminder of which doorstep the whole list is measured from. */
.mk-locbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.7rem 1rem;
    margin-bottom: 1.25rem;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius);
    background: #fff;
}

.mk-locbar-where {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.mk-locbar-pin {
    font-size: 1.2rem;
    color: var(--winkels-purple-700);
}

.mk-locbar-label {
    display: block;
    font-size: 0.72rem;
    color: var(--winkels-text-muted);
}

.mk-locbar-value {
    font-size: 0.95rem;
}

.mk-locbar-hint {
    font-size: 0.72rem;
    color: var(--winkels-text-muted);
    margin-inline-start: 0.4rem;
}

.mk-locbar-change {
    flex: 0 0 auto;
    font-size: 0.85rem;
    padding: 0.4rem 0.9rem;
}

/* Paid placement is labelled, on the row and on the card. */
.mk-promo-tag {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--winkels-purple-soft);
    color: var(--winkels-purple-700);
    letter-spacing: 0.02em;
}

.mk-card-flag-promo {
    background: var(--winkels-purple-700);
    color: #fff;
}

.sf-chip-distance {
    font-variant-numeric: tabular-nums;
}

.mk-empty-actions {
    display: flex;
    justify-content: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* The admin side: a zone row, and the numbered boxes it sells. */
.zone-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 1rem;
}

@media (max-width: 720px) {
    .zone-row { grid-template-columns: 1fr; }
}

.zone-row-facts {
    display: flex;
    gap: 1.25rem;
    font-size: 0.85rem;
    color: var(--winkels-text-muted);
    flex-wrap: wrap;
}

.zone-map-readonly {
    pointer-events: none;
}

.zone-governorate-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.35rem;
    background: linear-gradient(180deg, #fff 0%, #faf8ff 100%);
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-xl);
    box-shadow: var(--winkels-shadow-sm);
}

.zone-gov-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.875rem;
    text-decoration: none;
    color: var(--winkels-text);
    transition: background 0.2s var(--winkels-ease), border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.zone-gov-tab:hover {
    border-color: var(--winkels-purple-200);
    background: var(--winkels-purple-50);
    color: var(--winkels-purple-800);
}

.zone-gov-tab.is-active {
    border-color: var(--winkels-purple-300);
    background: linear-gradient(135deg, var(--winkels-purple-600), var(--winkels-purple-700));
    color: #fff;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(109, 40, 217, 0.28);
}

.zone-gov-tab.is-active .zone-gov-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.zone-gov-count {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--winkels-purple-100);
    color: var(--winkels-purple-800);
    min-width: 1.35rem;
    text-align: center;
}

.zone-filter-bar {
    border-radius: var(--winkels-radius-xl);
    border: 1px solid var(--winkels-border);
    box-shadow: var(--winkels-shadow-sm);
}

/* ——— Zones table (premium) ——— */
.zone-table-shell {
    padding: 0;
}

.zone-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

table.zone-table {
    table-layout: fixed;
    width: 100%;
    min-width: 720px;
}

.zone-col-name { width: 38%; }
.zone-col-stats { width: 16%; }
.zone-col-vis { width: 30%; }
.zone-col-actions { width: 16%; }

table.zone-table th {
    padding: 0.85rem 1rem;
    white-space: nowrap;
}

table.zone-table td {
    padding: 0.8rem 1rem;
    vertical-align: middle;
}

.zone-th-stats,
.zone-th-vis,
.zone-th-actions {
    text-align: center;
}

.zone-td-stats,
.zone-td-vis,
.zone-td-actions {
    text-align: center;
}

.zone-name-cell {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    min-width: 0;
}

.zone-name-marker {
    flex-shrink: 0;
    width: 0.5rem;
    height: 0.5rem;
    margin-top: 0.42rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--winkels-purple-500), var(--winkels-purple-700));
    box-shadow: 0 0 0 3px var(--winkels-purple-100);
}

.zone-name-primary {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--winkels-text);
    line-height: 1.35;
}

.zone-name-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    margin-top: 0.15rem;
    font-size: 0.8125rem;
    color: var(--winkels-text-muted);
}

.zone-gov-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.08rem 0.5rem;
    border-radius: 999px;
    background: var(--winkels-purple-50);
    border: 1px solid var(--winkels-purple-200);
    color: var(--winkels-purple-800);
    font-size: 0.7rem;
    font-weight: 600;
}

.zone-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-top: 0.35rem;
}

.zone-status-chip {
    display: inline-flex;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
}

.zone-status-chip.is-muted {
    background: #f1f5f9;
    color: #64748b;
    border: 1px solid #e2e8f0;
}

.zone-status-chip.is-warn {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.zone-stat-pills {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    flex-wrap: nowrap;
}

.zone-pill {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 3.25rem;
    padding: 0.35rem 0.55rem;
    border-radius: 0.65rem;
    background: #f8fafc;
    border: 1px solid #e8ecf1;
    line-height: 1.1;
}

.zone-pill.is-active {
    background: linear-gradient(180deg, var(--winkels-purple-50), #ede9fe);
    border-color: var(--winkels-purple-200);
}

.zone-pill-num {
    font-size: 0.9375rem;
    font-weight: 800;
    color: var(--winkels-purple-800);
    font-variant-numeric: tabular-nums;
}

.zone-pill-label {
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--winkels-text-muted);
    margin-top: 0.12rem;
}

.zone-vis-row {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    flex-wrap: nowrap;
    white-space: nowrap;
}

.zone-vis-item {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.zone-vis-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--winkels-text-muted);
}

.zone-toggle-sm.menu-toggle {
    width: 2.35rem;
    height: 1.25rem;
}

.zone-toggle-sm .menu-toggle-slider::before {
    width: 0.95rem;
    height: 0.95rem;
}

.zone-row-actions {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
}

.zone-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}

.zone-btn-ghost {
    border: 1px solid var(--winkels-purple-200);
    background: #fff;
    color: var(--winkels-purple-800);
}

.zone-btn-ghost:hover {
    border-color: var(--winkels-purple-300);
    background: var(--winkels-purple-50);
    box-shadow: 0 2px 6px rgba(109, 40, 217, 0.1);
}

.zone-btn-primary {
    border: 1px solid transparent;
    background: linear-gradient(135deg, var(--winkels-purple-600), var(--winkels-purple-700));
    color: #fff;
    box-shadow: 0 3px 10px rgba(109, 40, 217, 0.22);
}

.zone-btn-primary:hover {
    background: linear-gradient(135deg, var(--winkels-purple-700), #5b21b6);
    color: #fff;
    transform: translateY(-1px);
}

.zone-empty-cell {
    padding: 2rem 1rem !important;
    background: #fafafa;
}

table.zone-table tbody tr {
    transition: background 0.2s var(--winkels-ease);
}

table.zone-table tbody tr:nth-child(even) {
    background: rgba(246, 244, 255, 0.35);
}

table.zone-table tbody tr:hover {
    background: linear-gradient(90deg, rgba(237, 233, 254, 0.65), rgba(255, 255, 255, 0.98));
}

table.zone-table tbody tr.is-flash {
    background: rgba(196, 181, 253, 0.55) !important;
}

.zone-map-poly {
    cursor: pointer;
}

.menu-toggle.is-busy {
    opacity: 0.55;
    pointer-events: none;
}

.zone-map {
    height: 20rem;
    border-radius: var(--winkels-radius);
    background: #eef0f4;
}

.branch-pin-map-wrap {
    position: relative;
}

.branch-maps-address-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.branch-maps-address-row .winkels-input {
    flex: 1;
    min-width: 0;
    padding: 0.45rem 0.75rem;
    min-height: 2.4rem;
    height: 2.4rem;
}

.branch-maps-address-row .btn-winkels {
    flex-shrink: 0;
    height: 2.4rem;
    padding: 0 0.9rem;
}

.branch-pin-map-wrap .zone-map {
    height: 22rem;
}

.branch-pin-map-wrap .map-type-toggle {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 5;
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: #fff;
    border-radius: 999px;
    box-shadow: 0 6px 16px rgba(40, 8, 82, .12);
    font-size: 0.72rem;
    font-weight: 700;
}

.branch-pin-map-wrap .map-type-toggle button {
    border: 0;
    background: transparent;
    color: #280852;
    border-radius: 999px;
    padding: 6px 10px;
    cursor: pointer;
    font: inherit;
}

.branch-pin-map-wrap .map-type-toggle button.is-on {
    background: #751fe8;
    color: #fff;
}

/* Tailwind preflight sets img { max-width: 100%; height: auto } and that
   collapses Google Maps tiles into a grey box. Leaflet already resets this. */
.gm-style,
.gm-style * {
    box-sizing: content-box;
}

.gm-style-iw,
.gm-style-iw * {
    box-sizing: border-box;
}

.gm-style img,
.gm-style svg {
    max-width: none !important;
    max-height: none !important;
    height: unset !important;
}

.zone-map-tester {
    height: 28rem;
    border: 1px solid var(--winkels-border);
}

.zone-tester-result {
    padding: 0.75rem 1rem;
    border-radius: var(--winkels-radius);
    background: var(--winkels-purple-50);
    border: 1px solid var(--winkels-purple-200);
}

.zone-map-note {
    padding: 1rem;
    font-size: 0.85rem;
    color: var(--winkels-text-muted);
}

.branch-zone-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--winkels-border);
    background: #fff;
}

.branch-zone-legend::before {
    content: '';
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 0.2rem;
    border: 2px solid #64748b;
    background: rgba(148, 163, 184, 0.2);
}

.branch-zone-legend-selected::before {
    border-color: #059669;
    background: rgba(16, 185, 129, 0.38);
}

.branch-zone-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    border: 1px solid #059669;
    background: #ecfdf5;
    color: #065f46;
    font-size: 0.8rem;
    line-height: 1.2;
    cursor: pointer;
}

.branch-zone-chip:hover {
    background: #d1fae5;
}

.branch-zone-chip-x {
    font-size: 1rem;
    line-height: 1;
    opacity: 0.7;
}

.branch-zone-map .leaflet-interactive,
.branch-zone-map .leaflet-interactive:hover {
    cursor: pointer;
}

.branch-zone-map {
    margin-top: 0.25rem;
}

/* A slot is a numbered box. Empty ones have to look as deliberate as full
   ones, because an empty box is the thing a salesperson is looking for. */
.zone-slot {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: end;
    gap: 1rem;
    padding: 0.9rem;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius);
    background: var(--winkels-surface-muted, #fafafa);
}

.zone-slot.is-live {
    background: #fff;
    border-color: var(--winkels-purple-300, #c4b5fd);
}

.zone-slot-rank {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 999px;
    background: var(--winkels-purple-soft);
    color: var(--winkels-purple-700);
    font-weight: 800;
}

.zone-slot.is-live .zone-slot-rank {
    background: var(--winkels-purple-700);
    color: #fff;
}

.zone-slot-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.6rem;
}

.zone-slot-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.zone-slot-window {
    font-size: 0.75rem;
    color: var(--winkels-text-muted);
}

@media (max-width: 860px) {
    .zone-slot { grid-template-columns: auto 1fr; }
    .zone-slot-actions { grid-column: 1 / -1; }
}

/* ==========================================================================
   Buying visibility — the hour picker, and the platform's price list.

   The grid of hour boxes is the whole interface, so it is built to be read at a
   glance: a picked hour is unmistakable, a partly available one is visibly
   different from a free one, and a gone one is plainly not clickable. A merchant
   spending money by the hour should never have to guess which box did what.
   ========================================================================== */

.ad-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 1.25rem;
    align-items: start;
}

.ad-summary {
    position: sticky;
    top: 1rem;
    transition: opacity 0.18s var(--winkels-ease);
}

.ad-summary.is-loading,
.ad-hours.is-loading {
    opacity: 0.55;
    pointer-events: none;
}

/* --- The numbered slot ---------------------------------------------------- */

.ad-slot-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.ad-slot-btn {
    min-width: 2.6rem;
    padding: 0.5rem 0.7rem;
    border: 1px solid var(--winkels-border-strong);
    border-radius: var(--winkels-radius-sm);
    background: var(--winkels-white);
    font-weight: 700;
    color: var(--winkels-text);
    cursor: pointer;
    transition: all 0.15s var(--winkels-ease);
}

.ad-slot-btn:hover { border-color: var(--winkels-purple-700); }

.ad-slot-btn.is-on {
    background: var(--winkels-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--winkels-glow);
}

/* --- The areas ------------------------------------------------------------ */

.ad-zone-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: 0.6rem;
}

.ad-zone-card {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.15rem 0.5rem;
    align-items: center;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--winkels-border-strong);
    border-radius: var(--winkels-radius-sm);
    background: var(--winkels-white);
    cursor: pointer;
    transition: all 0.15s var(--winkels-ease);
}

.ad-zone-card:hover { border-color: var(--winkels-purple-700); }

.ad-zone-card.is-on {
    border-color: var(--winkels-purple-700);
    background: var(--winkels-purple-soft);
}

.ad-zone-card.is-reserved,
.ad-zone-card.is-taken {
    border-color: #9b1c1c;
    background: #9b1c1c;
    color: #fff;
    opacity: 1;
    cursor: not-allowed;
}

.ad-zone-card.is-taken .ad-zone-name,
.ad-zone-card.is-taken .ad-zone-gov,
.ad-zone-card.is-taken .ad-zone-price {
    color: #fff;
}

.ad-zone-card.is-capped {
    border-color: #fed7aa;
    background: #fff7ed;
    cursor: not-allowed;
}

.ad-zone-card.is-partial {
    border-color: #fde68a;
    background: #fffbeb;
}

.ad-zone-card.is-unpriced {
    opacity: 0.55;
    cursor: not-allowed;
}

.ad-zone-badge-reserved,
.ad-zone-badge-partial {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.68rem;
    font-weight: 700;
    width: fit-content;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
}

.ad-zone-badge-reserved {
    color: #b91c1c;
    background: #fee2e2;
}

.ad-zone-badge-partial {
    color: #b45309;
    background: #fef3c7;
}

.ad-zone-badge-capped {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.68rem;
    font-weight: 700;
    width: fit-content;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    color: #7c2d12;
    background: #ffedd5;
}

.ad-zone-badge-unpriced {
    grid-column: 2;
    grid-row: 2;
    font-size: 0.68rem;
    font-weight: 700;
    width: fit-content;
    padding: 0.12rem 0.45rem;
    border-radius: 999px;
    color: #64748b;
    background: #f1f5f9;
}

.ad-confirm-partial {
    border-top: 1px solid var(--winkels-border);
    padding-top: 0.75rem;
}

.ad-zone-map-wrap {
    margin-bottom: 1rem;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--winkels-border);
}

.ad-zone-map {
    width: 100%;
    height: 320px;
    background: #f3f4f6;
}

.ad-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
    padding: 0.55rem 0.85rem;
    font-size: 0.75rem;
    color: var(--winkels-text-muted);
    background: var(--winkels-surface);
    border-top: 1px solid var(--winkels-border);
}

.ad-map-legend span {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.ad-map-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ad-map-dot.is-available { background: #fff; border: 2px solid #9ca3af; }
.ad-map-dot.is-selected { background: var(--winkels-purple-700); border: 2px solid var(--winkels-purple-700); }
.ad-map-dot.is-reserved { background: #ef4444; border: 2px solid #ef4444; }

.winkels-card.is-disabled {
    opacity: 0.55;
    pointer-events: none;
}

.ad-zone-card input { grid-row: span 3; }

.ad-zone-gov { grid-column: 2; }

.ad-zone-name { font-weight: 700; font-size: 0.9rem; }

.ad-zone-price {
    grid-column: 2;
    grid-row: 3;
    font-size: 0.75rem;
    color: var(--winkels-purple-700);
    font-weight: 700;
}

.ad-zone-price-off { color: var(--winkels-text-muted); font-weight: 500; }

/* --- The day strip -------------------------------------------------------- */

.ad-day-strip {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    margin-bottom: 0.9rem;
    scrollbar-width: thin;
}

.ad-day-btn {
    position: relative;
    flex: 0 0 auto;
    padding: 0.5rem 0.85rem;
    border: 1px solid var(--winkels-border-strong);
    border-radius: var(--winkels-radius-sm);
    background: var(--winkels-white);
    font-size: 0.82rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.15s var(--winkels-ease);
}

.ad-day-btn.is-on {
    background: var(--winkels-gradient);
    border-color: transparent;
    color: #fff;
}

.ad-day-btn.has-picks:not(.is-on) { border-color: var(--winkels-purple-700); }

.ad-day-count {
    display: inline-grid;
    place-items: center;
    min-width: 1.15rem;
    height: 1.15rem;
    margin-inline-start: 0.35rem;
    border-radius: 999px;
    background: var(--winkels-gold);
    color: #3b2a00;
    font-size: 0.68rem;
    font-weight: 800;
}

/* --- The hour boxes ------------------------------------------------------- */

.ad-hours {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4.6rem, 1fr));
    gap: 0.4rem;
    transition: opacity 0.18s var(--winkels-ease);
}

.ad-hour {
    display: grid;
    gap: 0.1rem;
    padding: 0.5rem 0.3rem;
    border: 1px solid var(--winkels-border-strong);
    border-radius: var(--winkels-radius-sm);
    background: var(--winkels-white);
    text-align: center;
    cursor: pointer;
    transition: all 0.15s var(--winkels-ease);
}

.ad-hour:hover:not(:disabled) {
    border-color: var(--winkels-purple-700);
    transform: translateY(-1px);
}

.ad-hour-time { font-weight: 800; font-size: 0.86rem; font-variant-numeric: tabular-nums; }

.ad-hour-meta,
.ad-hour-price {
    font-size: 0.66rem;
    color: var(--winkels-text-muted);
    font-weight: 600;
}

.ad-hour.is-partial {
    border-color: var(--winkels-warning);
    background: #fffaf0;
}

.ad-hour.is-partial .ad-hour-meta { color: #b45309; }

.ad-hour.is-off {
    opacity: 0.45;
    cursor: not-allowed;
    background: var(--winkels-bg);
    text-decoration: line-through;
}

.ad-hour.is-on {
    background: var(--winkels-gradient);
    border-color: transparent;
    color: #fff;
    box-shadow: var(--winkels-glow);
}

.ad-hour.is-on .ad-hour-meta,
.ad-hour.is-on .ad-hour-price { color: rgba(255, 255, 255, 0.85); }

.ad-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 0.9rem;
    font-size: 0.74rem;
    color: var(--winkels-text-muted);
}

.ad-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }

.ad-key {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 0.25rem;
    border: 1px solid var(--winkels-border-strong);
}

.ad-key-free { background: var(--winkels-white); }
.ad-key-partial { background: #fffaf0; border-color: var(--winkels-warning); }
.ad-key-off { background: var(--winkels-bg); opacity: 0.6; }
.ad-key-on { background: var(--winkels-purple-700); border-color: transparent; }

/* --- The bill ------------------------------------------------------------- */

.ad-summary-lines { display: grid; gap: 0.5rem; }

.ad-summary-lines > div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: 0.86rem;
}

.ad-summary-lines dt { color: var(--winkels-text-muted); }
.ad-summary-lines dd { font-weight: 700; }

.ad-zone-lines {
    list-style: none;
    margin: 0.9rem 0 0;
    padding: 0.7rem 0 0;
    border-top: 1px dashed var(--winkels-border-strong);
    display: grid;
    gap: 0.4rem;
}

.ad-zone-lines li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.83rem;
}

.ad-zone-line-place {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.5rem;
    min-width: 0;
}

.ad-zone-line-name {
    font-weight: 700;
}

.ad-zone-line-gov {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--winkels-brand-yellow);
    color: var(--winkels-purple-950);
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
}

.ad-zone-hours { color: var(--winkels-text-muted); font-size: 0.75rem; }

.ad-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 0.9rem;
    padding-top: 0.7rem;
    border-top: 1px solid var(--winkels-border-strong);
    font-weight: 800;
}

.ad-total strong { font-size: 1.2rem; color: var(--winkels-purple-700); }

/* The conflict notice: this is the whole point of quoting per zone per hour, so
   it is given the weight of a warning rather than hidden as fine print. */
.ad-conflicts {
    margin-top: 1rem;
    padding: 0.8rem 0.9rem;
    border-radius: var(--winkels-radius-sm);
    background: #fffaf0;
    border: 1px solid var(--winkels-warning);
    font-size: 0.78rem;
}

.ad-conflicts-title { font-weight: 800; color: #b45309; margin-bottom: 0.35rem; }

.ad-conflicts ul { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: 0.25rem; }

.ad-conflicts-note {
    margin-top: 0.5rem;
    font-size: 0.72rem;
    color: var(--winkels-text-muted);
}

.ad-errors {
    margin-top: 0.9rem;
    padding: 0.7rem 0.85rem;
    border-radius: var(--winkels-radius-sm);
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #991b1b;
    font-size: 0.8rem;
}

/* --- Artwork preview ------------------------------------------------------ */

.ad-preview {
    position: relative;
    margin-top: 0.8rem;
    border-radius: var(--winkels-radius);
    overflow: hidden;
    border: 1px solid var(--winkels-border-strong);
    background: var(--winkels-bg);
}

.ad-preview img { display: block; width: 100%; height: auto; }

.ad-preview-text {
    position: absolute;
    inset-inline-start: 0;
    inset-block-end: 0;
    width: 100%;
    display: grid;
    gap: 0.1rem;
    padding: 0.8rem 0.9rem;
    background: linear-gradient(to top, rgba(28, 18, 53, 0.85), rgba(28, 18, 53, 0));
    color: #fff;
}

.ad-preview-text strong { font-size: 1rem; }
.ad-preview-text span { font-size: 0.8rem; opacity: 0.85; }

/* --- Merchant ad catalog & booking wizard --------------------------------- */

.ad-catalog-title {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 0.25rem;
}

.ad-catalog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.ad-catalog-preview {
    margin: -1.15rem -1.2rem 0.15rem;
    overflow: hidden;
    border-radius: var(--winkels-radius) var(--winkels-radius) 0 0;
    background: #f7f5fd;
}

.ad-catalog-preview img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center top;
}

.ad-catalog-card {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.15rem 1.2rem;
    overflow: hidden;
    border: 1px solid var(--winkels-border-strong);
    border-radius: var(--winkels-radius);
    background: var(--winkels-white);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s var(--winkels-ease), box-shadow 0.15s var(--winkels-ease), transform 0.15s var(--winkels-ease);
}

.ad-catalog-card:hover {
    border-color: var(--winkels-purple-700);
    box-shadow: 0 10px 28px rgba(109, 40, 217, 0.12);
    transform: translateY(-2px);
}

.ad-catalog-card.is-banner {
    background: linear-gradient(165deg, #fff 0%, var(--winkels-purple-soft) 100%);
}

.ad-catalog-card.is-slider {
    background: linear-gradient(165deg, #fff 0%, var(--winkels-gold-soft) 55%, var(--winkels-purple-soft) 100%);
    border-color: rgba(231, 224, 111, 0.35);
}

.ad-catalog-card.is-slider .ad-catalog-badge {
    background: linear-gradient(135deg, var(--winkels-gold), var(--winkels-gold-light));
    color: var(--winkels-purple-950);
}

.ad-catalog-card.is-top-banner {
    background: linear-gradient(165deg, #fff 0%, #eef6ff 55%, var(--winkels-purple-soft) 100%);
    border-color: rgba(117, 31, 232, 0.22);
}

.ad-catalog-card.is-unavailable {
    opacity: 0.72;
    cursor: not-allowed;
    filter: grayscale(0.15);
}

.ad-catalog-cta.is-muted {
    color: var(--winkels-muted, #6b7280);
    font-weight: 600;
}

.ad-catalog-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.ad-catalog-icon { font-size: 1.75rem; line-height: 1; }

.ad-catalog-badge {
    font-size: 0.68rem;
    font-weight: 800;
    padding: 0.2rem 0.5rem;
    border-radius: 999px;
    background: var(--winkels-purple-soft);
    color: var(--winkels-purple-700);
}

.ad-catalog-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
}

.ad-catalog-desc {
    margin: 0;
    font-size: 0.84rem;
    color: var(--winkels-text-muted);
    line-height: 1.45;
    flex: 1;
}

.ad-catalog-meta {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 0.2rem;
    font-size: 0.8rem;
}

.ad-catalog-cta {
    margin-top: 0.35rem;
    font-weight: 800;
    font-size: 0.86rem;
    color: var(--winkels-purple-700);
}

.ad-type-preview {
    overflow: hidden;
    padding: 0;
}

.ad-type-preview img {
    display: block;
    width: 100%;
    max-height: 22rem;
    object-fit: cover;
    object-position: center top;
    background: #f7f5fd;
}

.ad-type-preview figcaption {
    padding: 0.7rem 1rem;
    font-size: 0.86rem;
    color: var(--winkels-text-muted);
}

.ad-type-switch {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ad-type-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.45rem 0.75rem;
    border-radius: 999px;
    border: 1px solid var(--winkels-border-strong);
    background: var(--winkels-white);
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
    color: inherit;
    transition: all 0.15s var(--winkels-ease);
}

.ad-type-pill.is-on,
.ad-type-pill:hover {
    border-color: var(--winkels-purple-700);
    background: var(--winkels-purple-soft);
    color: var(--winkels-purple-800);
}

.ad-wizard-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.ad-wizard-step {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--winkels-text-muted);
}

.ad-wizard-step i {
    font-style: normal;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--winkels-bg);
    border: 1px solid var(--winkels-border-strong);
    font-size: 0.72rem;
}

.ad-wizard-step.is-active { color: var(--winkels-purple-800); }
.ad-wizard-step.is-active i {
    background: var(--winkels-purple-700);
    border-color: transparent;
    color: #fff;
}

.ad-wizard-step.is-done { color: var(--winkels-purple-700); }
.ad-wizard-step.is-done i {
    background: var(--winkels-purple-soft);
    border-color: var(--winkels-purple-400);
    color: var(--winkels-purple-800);
}

.ad-zone-filters {
    display: grid;
    gap: 0.65rem;
}

.ad-zone-search { max-width: 18rem; }

.ad-gov-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ad-gov-tab {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid var(--winkels-border-strong);
    background: var(--winkels-white);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s var(--winkels-ease);
}

.ad-gov-tab.is-on,
.ad-gov-tab:hover {
    border-color: var(--winkels-purple-700);
    color: var(--winkels-purple-700);
    background: var(--winkels-purple-soft);
}

.ad-gov-tab-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    padding: 0.05rem 0.35rem;
    margin-inline-start: 0.35rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(109, 40, 217, 0.12);
    color: var(--winkels-purple-700);
}

.ad-gov-tab.is-on .ad-gov-tab-count,
.ad-type-pill.is-on .ad-gov-tab-count {
    background: var(--winkels-purple-700);
    color: #fff;
}

.ad-coverage-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ad-coverage-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--winkels-purple-soft);
    color: var(--winkels-purple-800);
    border: 1px solid var(--winkels-purple-400);
}

.ad-gov-availability-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.ad-gov-availability-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.75rem;
    background: var(--winkels-surface);
    border: 1px solid var(--winkels-border);
}

.ad-gov-availability-item strong {
    color: var(--winkels-purple-700);
    font-size: 0.85rem;
}

.ad-zone-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

@media (max-width: 900px) {
    .ad-layout { grid-template-columns: 1fr; }
    .ad-summary { position: static; }
}

/* --- Campaign state badges ------------------------------------------------ */

.badge.ad-badge-running { background: rgba(16, 185, 129, 0.14); color: #047857; }
.badge.ad-badge-scheduled { background: var(--winkels-purple-soft); color: var(--winkels-purple-700); }
.badge.ad-badge-in_review { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.badge.ad-badge-finished { background: rgba(109, 106, 134, 0.14); color: var(--winkels-text-muted); }
.badge.ad-badge-rejected,
.badge.ad-badge-refunded { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.badge.ad-badge-draft,
.badge.ad-badge-awaiting_payment { background: rgba(245, 158, 11, 0.16); color: #b45309; }
.badge.ad-badge-cancelled,
.badge.ad-badge-expired { background: rgba(109, 106, 134, 0.14); color: var(--winkels-text-muted); }

.ad-run-live { background: rgba(16, 185, 129, 0.07); }

.ads-hub-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 1.25rem;
}

.ads-hub-nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--winkels-text-muted);
    background: rgba(109, 106, 134, 0.08);
    text-decoration: none;
}

.ads-hub-nav-link:hover { color: var(--winkels-purple-700); background: var(--winkels-purple-soft); }
.ads-hub-nav-link.is-on { color: #fff; background: var(--winkels-purple-700); }

.ads-filter-block { display: flex; flex-direction: column; gap: 1rem; }
.ads-filter-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.65rem 1rem; }
.ads-filter-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--winkels-text-muted);
    min-width: 5.5rem;
}
.ads-filter-chips { margin: 0; }
.ads-section-title {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 1.5rem 0 0.75rem;
}
.ads-house-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 2rem;
}

.badge.ad-outcome-delivered { background: rgba(16, 185, 129, 0.14); color: #047857; }
.badge.ad-outcome-missed { background: rgba(239, 68, 68, 0.12); color: #b91c1c; }
.badge.ad-outcome-future,
.badge.ad-outcome-pending { background: rgba(109, 106, 134, 0.14); color: var(--winkels-text-muted); }

/* The two series on the finance charts. Airtime is the solid bar because it is
   what the platform earned; cash sits in front of it as a narrower marker, so
   the gap between paying and airing is visible rather than argued about. */
.chart-bar-air {
    background: linear-gradient(180deg, var(--winkels-purple-400, #a78bfa), var(--winkels-purple-700, #6d28d9));
}

.chart-bar-cash {
    background: rgba(255, 255, 255, 0.55);
    width: 45%;
    inset-inline-start: 27.5%;
    border-radius: 0.2rem 0.2rem 0 0;
}

.chart-bar-col:hover .chart-bar-air { opacity: 0.75; }

.ad-report {
    gap: 1.45rem;
}

.ad-report-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.25rem;
    padding-bottom: 1.05rem;
    border-bottom: 1px solid rgba(117, 31, 232, 0.1);
}

.ad-report-head .report-page-title {
    font-size: 1.55rem;
    letter-spacing: -0.03em;
}

.ad-report-head .report-page-sub {
    max-width: 36rem;
}

.ad-report-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

.ad-report-actions .btn-winkels,
.ad-report-actions .btn-winkels-outline {
    min-height: 2.35rem;
    padding: 0.4rem 0.95rem;
    font-size: 0.82rem;
    box-shadow: none;
}

.ad-report .analytics-field.is-wide {
    width: 12.5rem;
}

.ad-report-section-head {
    display: grid;
    gap: 0.28rem;
    margin-bottom: 0.85rem;
}

.ad-report-section-head .report-section-title,
.ad-report-section-head .analytics-panel-title {
    margin: 0;
}

.ad-report-section-head .report-section-help,
.ad-report-section-head .analytics-panel-help {
    margin: 0;
    max-width: 40rem;
    line-height: 1.5;
}

.ad-report-hero {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.85rem;
    margin-bottom: 0.85rem;
}

.ad-report-hero-card {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    min-height: 9rem;
    padding: 1.35rem 1.3rem 1.15rem;
    background: #fff;
    border: 1px solid rgba(117, 31, 232, 0.1);
    border-radius: 1.25rem;
    box-shadow: 0 22px 44px -32px rgba(40, 8, 82, 0.5);
    position: relative;
    overflow: hidden;
}

.ad-report-hero-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: #eee24b;
}

.ad-report-hero-card.is-lead {
    background: linear-gradient(155deg, #3a1680 0%, #751fe8 58%, #280852 100%);
    border-color: transparent;
    color: #fff;
}

.ad-report-hero-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #6b7280;
}

.ad-report-hero-card.is-lead .ad-report-hero-label {
    color: rgba(255, 255, 255, 0.72);
}

.ad-report-hero-value {
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.04em;
    color: #280852;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ad-report-hero-card.is-lead .ad-report-hero-value {
    color: #e7e06f;
}

.ad-report-hero-meta {
    margin-top: auto;
    font-size: 0.75rem;
    line-height: 1.45;
    color: #6b7280;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ad-report-hero-card.is-lead .ad-report-hero-meta {
    color: rgba(255, 255, 255, 0.7);
}

.ad-report-meter {
    display: block;
    height: 0.35rem;
    margin-top: 0.15rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.16);
    overflow: hidden;
}

.ad-report-meter > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: #e7e06f;
}

.ad-report-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.ad-report-kpis.is-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ad-report .analytics-kpi {
    min-height: 7.5rem;
    box-shadow: 0 18px 36px -30px rgba(40, 8, 82, 0.45);
}

.ad-report .analytics-kpi-value {
    font-size: 1.2rem;
    letter-spacing: -0.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    -webkit-line-clamp: unset;
}

.ad-report .analytics-kpi.is-alert {
    outline: 1.5px solid rgba(217, 119, 6, 0.45);
    outline-offset: 0;
}

.ad-report-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

.ad-report-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.ad-report-table {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
}

.ad-report-table.is-compact {
    min-width: 38rem;
}

.ad-report-table th,
.ad-report-table td {
    padding: 0.85rem 0.7rem;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid rgba(117, 31, 232, 0.07);
}

.ad-report-table th {
    font-size: 0.7rem;
    font-weight: 700;
    color: #6b7280;
    white-space: nowrap;
}

.ad-report-table th:first-child,
.ad-report-table td:first-child {
    padding-inline-start: 0;
}

.ad-report-table th:last-child,
.ad-report-table td:last-child {
    padding-inline-end: 0;
}

.ad-report-table .is-num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    font-size: 0.86rem;
    color: #280852;
}

.ad-report-table th.is-num { color: #6b7280; }

.ad-report-table .is-muted { color: #6b7280; font-weight: 500; }

.ad-report-table .is-rate {
    font-weight: 800;
}

.ad-report-table tr.is-quiet td { opacity: 0.5; }

.ad-report-name {
    display: block;
    font-weight: 700;
    color: #280852;
}

.ad-report-sub {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.72rem;
    color: #6b7280;
}

.ad-report-bar {
    display: block;
    height: 0.32rem;
    margin-top: 0.4rem;
    border-radius: 999px;
    background: #efe8fb;
    overflow: hidden;
}

.ad-report-bar > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #9b5cf0, #751fe8);
}

.ad-report .analytics-rank-stat {
    display: grid;
    justify-items: end;
    gap: 0.12rem;
}

.ad-report .analytics-rank-stat small {
    font-size: 0.68rem;
    font-weight: 500;
    color: #6b7280;
}

.ad-report-daily-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1.25rem;
    margin-bottom: 1.15rem;
}

.ad-report-daily-head .analytics-panel-title {
    margin: 0;
}

.ad-report-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem 1.15rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.75rem;
    color: #6b7280;
}

.ad-report-legend li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.ad-report-legend i {
    display: block;
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 0.18rem;
}

.ad-report-legend .is-air {
    background: #4a25a9;
}

.ad-report-legend .is-cash {
    background: #eee24b;
    box-shadow: inset 0 0 0 1px rgba(74, 37, 169, 0.18);
}

.ad-report-chart {
    display: grid;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 0.7rem;
    align-items: stretch;
}

.ad-report-chart-scale {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 1.65rem;
    font-size: 0.7rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #6b7280;
    text-align: end;
    white-space: nowrap;
}

.ad-report-chart-body {
    min-width: 0;
    padding-bottom: 1.65rem;
    background:
        linear-gradient(180deg, rgba(74, 37, 169, 0.06), rgba(74, 37, 169, 0.06)) 0 0 / 100% 1px no-repeat,
        linear-gradient(180deg, rgba(74, 37, 169, 0.05), rgba(74, 37, 169, 0.05)) 0 50% / 100% 1px no-repeat;
    border-bottom: 1px solid rgba(74, 37, 169, 0.12);
}

.ad-report-chart-bars {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 13.5rem;
    overflow-x: auto;
}

.ad-report-chart-col {
    position: relative;
    flex: 1 0 0;
    min-width: 0.7rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.ad-report-chart-col.has-trade {
    min-width: 1rem;
}

.ad-report-chart-stack {
    position: relative;
    width: 100%;
    max-width: 1.4rem;
    height: 100%;
    margin-inline: auto;
}

.ad-report-chart-air,
.ad-report-chart-cash {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    border-radius: 0.28rem 0.28rem 0 0;
}

.ad-report-chart-air {
    background: linear-gradient(180deg, #7c4dff, #4a25a9);
}

.ad-report-chart-cash {
    inset-inline: 28% 28%;
    background: #eee24b;
    box-shadow: 0 0 0 1px rgba(74, 37, 169, 0.12);
}

.ad-report-chart-date {
    position: absolute;
    bottom: -1.4rem;
    inset-inline: -0.85rem;
    text-align: center;
    font-size: 0.65rem;
    color: #6b7280;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 720px) {
    .ad-report-chart {
        grid-template-columns: 1fr;
    }

    .ad-report-chart-scale {
        flex-direction: row-reverse;
        padding-bottom: 0.35rem;
    }
}

@media (max-width: 1100px) {
    .ad-report-hero,
    .ad-report-kpis,
    .ad-report-kpis.is-three {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1180px) {
    .ad-report-split {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

@media (max-width: 640px) {
    .ad-report-hero,
    .ad-report-kpis,
    .ad-report-kpis.is-three {
        grid-template-columns: 1fr;
    }

    .ad-report-hero-value { font-size: 1.55rem; }
}

.admin-theme-yellow-pop .ad-report .report-period.is-on {
    background: #eee24b;
    color: #3a1a86;
    border-color: #eee24b;
}

.admin-theme-yellow-pop .ad-report .analytics-toolbar,
.admin-theme-yellow-pop .ad-report .analytics-panel,
.admin-theme-yellow-pop .ad-report .analytics-kpi {
    border-color: rgba(74, 37, 169, 0.08);
    box-shadow: 0 8px 22px rgba(58, 26, 134, 0.05);
}

.admin-theme-yellow-pop .ad-report .analytics-kpi-value,
.admin-theme-yellow-pop .ad-report-hero-value,
.admin-theme-yellow-pop .ad-report-name,
.admin-theme-yellow-pop .report-page-title,
.admin-theme-yellow-pop .report-section-title,
.admin-theme-yellow-pop .analytics-panel-title {
    color: #3a1a86;
}

.admin-theme-yellow-pop .ad-report-hero-card.is-lead .ad-report-hero-value {
    color: #eee24b;
}

.admin-theme-yellow-pop .ad-report-bar > span,
.admin-theme-yellow-pop .ad-report .analytics-rank-bar span,
.admin-theme-yellow-pop .ad-report .analytics-hours-bar {
    background: #4a25a9;
}

.ad-review-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    align-items: center;
}

.ad-review-actions form { display: flex; align-items: center; gap: 0.5rem; }

/* --- The platform's price list -------------------------------------------- */

.ad-grid-row {
    display: grid;
    gap: 0.6rem;
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--winkels-border);
}

.ad-grid-row:last-child { border-bottom: 0; }

.ad-grid-zone {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.7rem;
}

.ad-grid-slots {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 0.5rem;
}

.ad-grid-slots label { display: grid; gap: 0.15rem; font-size: 0.7rem; color: var(--winkels-text-muted); }
.ad-grid-slots input { width: 4.5rem; padding: 0.35rem 0.5rem; }

.ad-grid-prices { display: flex; flex-wrap: wrap; gap: 0.35rem; }

.ad-grid-price {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border-radius: 999px;
    background: var(--winkels-purple-soft);
    color: var(--winkels-purple-700);
    font-size: 0.72rem;
    font-weight: 700;
}

.ad-grid-price i { font-style: normal; opacity: 0.6; }

.ad-grid-price.is-unpriced {
    background: var(--winkels-bg);
    color: var(--winkels-text-muted);
    border: 1px dashed var(--winkels-border);
}

/* --- Ad rates admin (matrix + rules) -------------------------------------- */

.ad-rates-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 22rem);
    gap: 1.25rem;
    align-items: start;
}

.ad-rates-side {
    position: sticky;
    top: 1rem;
}

.ad-section-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--winkels-purple-800);
    margin: 0;
}

.ad-rates-alerts .ad-rate-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    border-radius: var(--winkels-radius-lg);
    font-size: 0.875rem;
    font-weight: 600;
}

.ad-rate-alert.is-warn {
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
}

.ad-rate-alert.is-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.ad-rate-alert.is-muted {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    color: #475569;
}

.ad-rate-alert-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: inherit;
    text-decoration: underline;
    opacity: 0.85;
}

.ad-matrix-toolbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(117, 31, 232, 0.08);
    background: linear-gradient(180deg, #fff 0%, #faf8ff 100%);
}

.ad-matrix-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;
}

.ad-legend-item {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    border: 1px solid transparent;
}

.ad-legend-item.is-priced {
    background: #ecfdf5;
    color: #047857;
    border-color: #a7f3d0;
}

.ad-legend-item.is-booked {
    background: #eff6ff;
    color: #1d4ed8;
    border-color: #bfdbfe;
}

.ad-legend-item.is-unpriced {
    background: #f8fafc;
    color: #64748b;
    border-color: #e2e8f0;
}

.ad-legend-item.is-inherited {
    background: var(--winkels-purple-50);
    color: var(--winkels-purple-800);
    border-color: var(--winkels-purple-200);
}

.ad-matrix-scroll {
    overflow: auto;
    max-height: 52rem;
    -webkit-overflow-scrolling: touch;
}

table.ad-matrix-table {
    min-width: 100%;
    table-layout: auto;
}

.ad-matrix-zone-col {
    min-width: 11rem;
    position: sticky;
    inset-inline-start: 0;
    z-index: 3;
    background: linear-gradient(180deg, var(--winkels-purple-50) 0%, var(--winkels-purple-100) 100%);
}

.ad-matrix-slot-col {
    text-align: center;
    min-width: 4.25rem;
    white-space: nowrap;
}

.ad-matrix-zone-cell {
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
    background: #fff;
    box-shadow: 2px 0 6px rgba(15, 23, 42, 0.04);
}

table.ad-matrix-table tbody tr:nth-child(even) .ad-matrix-zone-cell {
    background: #faf8ff;
}

.ad-zone-link {
    text-decoration: none;
    color: inherit;
}

.ad-zone-link:hover {
    color: var(--winkels-purple-700);
}

.ad-slots-chip {
    font-size: 0.68rem;
    font-weight: 600;
    padding: 0.08rem 0.45rem;
    border-radius: 999px;
    background: #f1f5f9;
    color: #64748b;
}

.ad-zones-edit-link {
    display: block;
    margin-top: 0.25rem;
}

.ad-matrix-cell-wrap {
    position: relative;
    text-align: center;
    padding: 0.35rem !important;
    vertical-align: middle;
}

.ad-matrix-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.35rem;
    padding: 0.35rem 0.25rem;
    border-radius: 0.55rem;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
    font: inherit;
}

.ad-matrix-cell:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(109, 40, 217, 0.12);
}

.ad-matrix-cell:disabled {
    cursor: default;
    opacity: 0.45;
}

.ad-matrix-cell.is-priced {
    background: linear-gradient(180deg, #ecfdf5 0%, #d1fae5 100%);
    border-color: #a7f3d0;
    color: #065f46;
}

.ad-matrix-cell.is-booked {
    background: linear-gradient(180deg, #eff6ff 0%, #dbeafe 100%);
    border-color: #93c5fd;
    color: #1e40af;
}

.ad-matrix-cell.is-unpriced {
    background: #f8fafc;
    border-color: #e2e8f0;
    color: #94a3b8;
}

.ad-matrix-cell.is-ads_off {
    background: #fafafa;
    border-color: #f1f5f9;
}

.ad-matrix-cell.is-inherited::after {
    content: '';
    position: absolute;
    top: 0.2rem;
    inset-inline-end: 0.2rem;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--winkels-purple-500);
    box-shadow: 0 0 0 2px #fff;
}

.ad-matrix-price {
    font-size: 0.72rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ad-matrix-edit-icon {
    font-size: 0.65rem;
    opacity: 0;
    margin-inline-start: 0.2rem;
    transition: opacity 0.15s;
}

.ad-matrix-cell:hover .ad-matrix-edit-icon {
    opacity: 0.65;
}

.ad-matrix-add {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--winkels-purple-700);
    line-height: 1.2;
}

.ad-matrix-cell.is-unpriced {
    border-style: dashed;
}

.ad-matrix-cell.is-unpriced:hover {
    background: var(--winkels-purple-50);
    border-color: var(--winkels-purple-300);
}

.ad-rate-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
}

.ad-rate-modal {
    width: min(100%, 22rem);
    padding: 1.25rem;
    border-radius: var(--winkels-radius-xl);
    background: #fff;
    border: 1px solid var(--winkels-purple-200);
    box-shadow: var(--winkels-shadow-lg);
}

.ad-rate-modal-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--winkels-purple-800);
    margin: 0 0 0.35rem;
}

.ad-rate-modal-meta {
    font-size: 0.875rem;
    color: var(--winkels-text-muted);
    margin-bottom: 0.75rem;
}

.ad-rate-modal-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.ad-rate-modal-error {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: #b91c1c;
    font-weight: 600;
}

.ad-price-input.is-saved {
    border-color: #34d399;
    box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.25);
}

.ad-price-input.is-error {
    border-color: #f87171;
    box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.25);
}

.ad-matrix-empty {
    font-size: 0.85rem;
    opacity: 0.5;
}

.ad-cell-popover {
    position: absolute;
    z-index: 20;
    top: calc(100% + 0.25rem);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    min-width: 9rem;
    padding: 0.65rem;
    border-radius: 0.75rem;
    background: #fff;
    border: 1px solid var(--winkels-purple-200);
    box-shadow: var(--winkels-shadow-lg);
}

body.rtl .ad-cell-popover {
    transform: translateX(50%);
}

.ad-cell-popover-title {
    font-size: 0.75rem;
    font-weight: 700;
    margin-bottom: 0.35rem;
    color: var(--winkels-purple-800);
}

.ad-rules-table .ad-inline-price {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.ad-price-input {
    width: 5.5rem;
    padding: 0.35rem 0.5rem;
    font-size: 0.8125rem;
}

.ad-tier-badge {
    display: inline-flex;
    margin-inline-end: 0.35rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    vertical-align: middle;
}

.ad-tier-badge.is-global {
    background: var(--winkels-purple-100);
    color: var(--winkels-purple-800);
}

.ad-tier-badge.is-zone {
    background: #e0f2fe;
    color: #0369a1;
}

.ad-tier-badge.is-position {
    background: #ecfdf5;
    color: #047857;
}

.ad-settings-details summary {
    list-style: none;
}

.ad-settings-details summary::-webkit-details-marker {
    display: none;
}

@media (max-width: 1100px) {
    .ad-rates-layout {
        grid-template-columns: 1fr;
    }

    .ad-rates-side {
        position: static;
    }
}

@media (max-width: 768px) {
    .ad-matrix-scroll {
        max-height: none;
    }
}

/* Paid placement is labelled on the banner itself. */
.mk-banner-ad {
    position: absolute;
    inset-block-start: 0.6rem;
    inset-inline-end: 0.6rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(28, 18, 53, 0.6);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    backdrop-filter: blur(4px);
}

@media (max-width: 1024px) {
    .ad-layout { grid-template-columns: minmax(0, 1fr); }
    .ad-summary { position: static; }
}

/* ---------- Customer file ---------- */

.grid-stats-pair {
    grid-template-columns: repeat(2, minmax(12rem, 18rem));
}

.customer-file {
    display: grid;
    gap: 1.25rem;
}

.customer-file-id {
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
    min-width: 0;
}

.customer-avatar {
    flex: none;
    display: grid;
    place-items: center;
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 1.15rem;
    background: var(--winkels-gradient-vivid);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    box-shadow: var(--winkels-glow), var(--winkels-inset-top);
}

.customer-avatar-sm {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: 0.8rem;
    font-size: 0.8rem;
    box-shadow: var(--winkels-shadow-sm);
}

.customer-file-name {
    margin: 0.2rem 0 0.35rem;
    font-size: 1.55rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--winkels-text);
    line-height: 1.25;
}

.customer-no {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.55rem;
    border-radius: 999px;
    background: var(--winkels-purple-100);
    color: var(--winkels-purple-800);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.customer-file-meta {
    margin: 0;
    font-size: 0.86rem;
    color: var(--winkels-text-muted);
}

.customer-file .detail-grid {
    padding-top: 1.15rem;
    border-top: 1px solid var(--winkels-border);
}

.address-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.9rem;
}

.address-card {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    padding: 1rem 1.1rem;
    border-radius: var(--winkels-radius);
    background: var(--winkels-purple-50);
    border: 1px solid var(--winkels-border);
}

.address-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.address-card-label {
    font-weight: 800;
    color: var(--winkels-purple-900);
}

.address-card-text {
    margin: 0;
    color: var(--winkels-text);
    line-height: 1.65;
    font-size: 0.92rem;
}

.customer-orders-head {
    padding: 1.15rem 1.25rem 0.15rem;
}

.customer-orders-head .section-title {
    border-bottom: 0;
    margin-bottom: 0;
    padding-bottom: 0;
}

.winkels-table .order-ref { margin-top: 0; }

.customer-person {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.customer-person-name {
    font-weight: 700;
    color: var(--winkels-text);
}

.customer-person-no {
    margin-top: 0.12rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--winkels-purple-700);
    letter-spacing: 0.03em;
}

.money-strong {
    font-weight: 800;
    color: var(--winkels-purple-800);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.when-ltr {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .grid-stats-pair { grid-template-columns: 1fr; }
    .customer-file-name { font-size: 1.28rem; }
    .customer-avatar { width: 3.5rem; height: 3.5rem; font-size: 1.05rem; }
}

/* ---------- Onboarding ---------- */

.onboarding-card { border: 1px solid var(--winkels-purple-200); }

.onboarding-progress {
    font-weight: 800;
    color: var(--winkels-purple-800);
    background: var(--winkels-purple-50);
    padding: 0.35rem 0.75rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.onboarding-steps {
    display: grid;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.onboarding-step {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    border-radius: var(--winkels-radius-sm);
    background: var(--winkels-purple-50);
    font-size: 0.92rem;
}

.onboarding-step.is-done {
    background: rgba(16, 185, 129, 0.08);
    color: #065f46;
}

.onboarding-check {
    font-weight: 800;
    width: 1.25rem;
    text-align: center;
}

.branch-orders-toggle {
    padding: 1rem;
    border-radius: var(--winkels-radius);
    background: var(--winkels-purple-50);
    border: 1px solid var(--winkels-border);
}

.branch-fulfill-checks {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.branch-fulfill-check {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 0;
    padding: 0.85rem 1rem;
    cursor: pointer;
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius);
    background: #fff;
}

.branch-fulfill-check.is-on {
    border-color: var(--winkels-purple-200);
    background: var(--winkels-purple-50);
}

.branch-fulfill-check input[type="checkbox"] {
    width: 1.05rem;
    height: 1.05rem;
    margin: 0;
    accent-color: var(--winkels-purple, #751fe8);
}

.branch-fulfill-check > span:first-of-type {
    flex: 1 1 auto;
}

.branch-fulfill-state {
    flex: 0 0 auto;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 0.28rem 0.65rem;
    border-radius: 9999px;
}

.branch-fulfill-state.is-on {
    background: #dcfce7;
    color: #166534;
}

.branch-fulfill-state.is-off {
    background: #fee2e2;
    color: #991b1b;
}

.kitchen-board {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1rem;
}

.kitchen-board-kds {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
}

.kitchen-board-one {
    grid-template-columns: 1fr;
}

.kitchen-board-one .kitchen-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    align-content: start;
}

@media (max-width: 1100px) {
    .kitchen-board-kds {
        grid-template-columns: 1fr;
        overflow: auto;
    }

    .kitchen-column {
        max-height: 70vh;
    }
}

.kitchen-column {
    background: var(--winkels-purple-50, #f5f3ff);
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-lg);
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kitchen-col-queued { background: #f7f4fd; }
.kitchen-col-preparing { background: #fbf9ee; }
.kitchen-col-ready { background: #f3f8f5; }

.kitchen-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--winkels-border);
    font-weight: 700;
    border-radius: var(--winkels-radius-lg) var(--winkels-radius-lg) 0 0;
}

.kitchen-col-queued .kitchen-column-head {
    background: #ebe4f8;
    color: #280852;
    border-bottom-color: #d8c8f2;
}

.kitchen-col-preparing .kitchen-column-head {
    background: #f6f1c8;
    color: #4a4408;
    border-bottom-color: #e8e09a;
}

.kitchen-col-ready .kitchen-column-head {
    background: #e4f3ea;
    color: #1f4a32;
    border-bottom-color: #c5e3d0;
}

.kitchen-column-head h3 {
    margin: 0;
    font-size: 0.95rem;
}

.kitchen-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.45rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--winkels-border);
    font-size: 0.8rem;
    font-weight: 700;
}

.kitchen-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.kitchen-card {
    background: #fff;
    border-radius: var(--winkels-radius-lg);
    padding: 1rem;
    border: 1px solid var(--winkels-border);
    box-shadow: var(--winkels-shadow-sm);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    flex: 0 0 auto;
}

.kitchen-card-queued {
    background: #f3eefc;
    border-color: #d8c8f2;
}

.kitchen-card-preparing {
    background: #fbf8de;
    border-color: #e8e09a;
}

.kitchen-card-ready {
    background: #eef7f1;
    border-color: #c5e3d0;
}

.kitchen-card-new {
    animation: kitchen-pulse 1.2s ease-in-out 3;
    border-color: var(--winkels-purple-deep, #5b21b6);
}

.kitchen-card-urgent {
    border-color: #f59e0b;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15);
}

@keyframes kitchen-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(117, 31, 232, 0.35); }
    50% { box-shadow: 0 0 0 6px rgba(117, 31, 232, 0); }
}

.kitchen-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
}

.kitchen-ref {
    font-weight: 800;
    font-size: 1.2rem;
    overflow-wrap: anywhere;
}

.kitchen-brand {
    margin: 0.15rem 0 0;
    font-size: 1rem;
    font-weight: 700;
    color: #280852;
    overflow-wrap: anywhere;
}

.kitchen-wait {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--winkels-muted, #6b7280);
}

.kitchen-customer {
    font-weight: 600;
    margin: 0.15rem 0;
}

.kitchen-meta {
    font-size: 0.8rem;
    color: var(--winkels-muted, #6b7280);
    margin: 0 0 0.35rem;
}

.kitchen-card .kitchen-lines {
    margin: 0.85rem 0 0;
    padding: 0.75rem 0 0;
    border-top: 1px solid rgba(40, 8, 82, 0.08);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.kitchen-item {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    min-width: 0;
}

.kitchen-item-qty {
    flex: 0 0 auto;
    min-width: 2.1rem;
    font-size: 1.55rem;
    font-weight: 800;
    line-height: 1.1;
    color: #751fe8;
}

.kitchen-item-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.kitchen-item-name {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.kitchen-item-note {
    font-size: 0.95rem;
    font-weight: 600;
    color: #6b5a82;
}

.kitchen-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0.65rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--winkels-border);
}

.kitchen-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.kitchen-next-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: 800;
    font-size: 1.05rem;
    padding: 0.9rem 1rem;
}

.kitchen-empty {
    text-align: center;
    color: var(--winkels-muted, #6b7280);
    font-size: 0.85rem;
    padding: 1rem 0.5rem;
    margin: 0;
}

.kitchen-live-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: #22c55e;
    animation: kitchen-live 2s infinite;
}

@keyframes kitchen-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.admin-layout:has(.kitchen-screen) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

.admin-layout:has(.kitchen-screen) .winkels-main {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    max-height: 100%;
}

.admin-layout:has(.kitchen-screen) .sa-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.admin-layout:has(.kitchen-screen) .admin-main-toolbar {
    flex-shrink: 0;
}

/* The floor map is a control screen: it fills the window and each panel scrolls
   on its own. That only pays off when there is height to hand out, so a short
   window drops the lock and scrolls like any other page instead of clipping
   the booking panel with no way to reach it. */
@media (min-height: 800px) {
    .admin-layout:has(.dining-floor-page) {
        height: 100dvh;
        max-height: 100dvh;
        overflow: hidden;
    }

    .admin-layout:has(.dining-floor-page) .winkels-main {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: auto;
        max-height: 100%;
    }

    .admin-layout:has(.dining-floor-page) .sa-page {
        flex: 1 1 auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
    }
}

.kitchen-screen {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

body.kitchen-fullscreen-mode .winkels-sidebar {
    display: none;
}

body.kitchen-fullscreen-mode .winkels-main {
    padding: 1rem;
    max-width: none;
}

body.kitchen-fullscreen-mode .kitchen-board-kds {
    min-height: 0;
}

.dining-floor-page {
    display: grid;
    gap: 1rem;
    flex: 1 1 auto;
    min-height: 0;
    grid-template-rows: auto auto auto 1fr;
}

.dining-floor-page .dining-floor-room {
    min-height: 0;
}

.dining-floor-board {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem);
    gap: 1rem;
    min-height: 0;
}

.dining-reservation-panel {
    display: grid;
    align-content: start;
    gap: 0.75rem;
    min-height: 0;
    /* The form plus a full day of bookings is taller than any window, so the
       panel carries its own scrollbar rather than losing its tail. */
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem;
    border-radius: 24px;
    background: #fff8ef;
    box-shadow: 0 10px 24px rgba(31, 24, 20, 0.08);
}

.dining-reservation-panel.is-pos {
    padding: 0.75rem 0 0;
    background: transparent;
    box-shadow: none;
    /* Inside the POS cart column the surrounding panel already scrolls. */
    overflow: visible;
}

.dining-reservation-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
}

.dining-reservation-head h3 {
    margin: 0;
    font-size: 1rem;
}

.dining-reservation-head .form-input {
    width: auto;
    flex: 1 1 9.5rem;
    min-width: 0;
}

.dining-reservation-form {
    display: grid;
    gap: 0.5rem;
}

.dining-reservation-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.dining-reservation-list {
    display: grid;
    gap: 0.55rem;
    min-height: 0;
}

/* On the POS screen the panel sits in the menu column and has no height of its
   own, so the list keeps its own scrollbar rather than shoving the menu down. */
.dining-reservation-panel.is-pos .dining-reservation-list {
    overflow-y: auto;
    max-height: 22rem;
}

.dining-reservation-empty {
    margin: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: #7a6e60;
}

.dining-reservation-card {
    display: grid;
    gap: 0.45rem;
    padding: 0.7rem 0.75rem;
    border-radius: 16px;
    background: #fff;
}

.dining-reservation-card.is-due {
    box-shadow: inset 0 0 0 2px #c9a36a;
}

.dining-reservation-card.is-booked {
    background: #fff8ec;
}

.dining-reservation-card.is-seated {
    background: #f4fff8;
}

.dining-reservation-card.is-ready,
.dining-wait-card.is-ready {
    background: #f4fff8;
}

.dining-wait-cards {
    display: grid;
    gap: 0.75rem;
}

.dining-wait-card {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 0.85rem;
    padding: 0.9rem 1rem;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 18px rgba(31, 24, 20, 0.06);
}

.dining-wait-card.is-compact {
    grid-template-columns: 1fr;
    padding: 0.75rem 0.8rem;
}

.dining-wait-card-rank {
    display: grid;
    place-items: center;
    height: 2.6rem;
    border-radius: 14px;
    background: #5a2d48;
    color: #fff6ea;
    font-weight: 900;
    font-size: 1.1rem;
}

.dining-wait-card-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.8rem;
}

.dining-wait-card-top strong {
    display: block;
    font-size: 1.05rem;
}

.dining-wait-card-top a,
.dining-wait-card-meta span,
.dining-wait-card-notes {
    display: block;
    font-size: 0.82rem;
    font-weight: 700;
    color: #7a6e60;
}

.dining-wait-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem 0.85rem;
    margin: 0.45rem 0 0.65rem;
}

.dining-wait-card-notes {
    margin: 0 0 0.65rem;
}

.dining-wait-eta {
    min-width: 7.4rem;
    padding: 0.45rem 0.65rem;
    border-radius: 16px;
    background: #fff1d6;
    text-align: center;
}

.dining-wait-eta.is-ready {
    background: #d7efe4;
}

.dining-wait-eta span {
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    color: #7a6e60;
}

.dining-wait-eta strong {
    display: block;
    margin-top: 0.1rem;
    font-size: 1.35rem;
    line-height: 1;
    color: #5a2d48;
    letter-spacing: 0.02em;
}

.dining-wait-page {
    display: grid;
    gap: 1rem;
}

.dining-wait-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.dining-wait-stats .winkels-stat .value.is-text {
    font-size: 0.95rem;
    line-height: 1.35;
}

.dining-wait-criteria {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 18px;
    background: #fff8ef;
    color: #6b5b4f;
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.55;
}

.dining-wait-layout {
    display: grid;
    grid-template-columns: min(22rem, 34%) minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

.dining-wait-form,
.dining-wait-board {
    padding: 1rem;
    border-radius: 24px;
    background: #fff8ef;
    box-shadow: 0 10px 24px rgba(31, 24, 20, 0.08);
}

.dining-wait-form h3 {
    margin: 0;
    font-size: 1rem;
}

.dining-wait-table-wrap {
    overflow: auto;
    max-height: calc(100vh - 16rem);
}

.dining-wait-table {
    width: 100%;
    border-collapse: collapse;
}

.dining-wait-table th,
.dining-wait-table td {
    padding: 0.7rem 0.55rem;
    text-align: start;
    vertical-align: top;
    border-bottom: 1px solid rgba(90, 45, 72, 0.08);
    font-size: 0.88rem;
}

.dining-wait-table th {
    position: sticky;
    top: 0;
    background: #fff8ef;
    z-index: 1;
    font-size: 0.75rem;
    color: #7a6e60;
}

.dining-wait-table td.is-rank,
.dining-wait-table td.is-eta {
    font-weight: 900;
    color: #5a2d48;
    white-space: nowrap;
}

.dining-wait-table td strong,
.dining-wait-say {
    display: block;
}

.dining-wait-table .dining-reservation-actions {
    justify-content: flex-end;
}

.dining-wait-jump {
    display: flex;
    justify-content: space-between;
    gap: 0.6rem;
    align-items: center;
    padding: 0.7rem 0.8rem;
    border-radius: 16px;
    background: #5a2d48;
    color: #fff6ea;
    font-weight: 800;
    text-decoration: none;
}

.dining-wait-jump:hover {
    color: #fff6ea;
}

@media (max-width: 960px) {
    .dining-wait-layout,
    .dining-wait-stats {
        grid-template-columns: 1fr;
    }
}

.dining-reservation-card strong {
    display: block;
}

.dining-reservation-card a,
.dining-reservation-card span {
    display: block;
    font-size: 0.8rem;
    font-weight: 700;
    color: #7a6e60;
}

.dining-reservation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.dining-floor-message.is-alert,
.pos-message.is-alert {
    background: #5a2d48;
    color: #fff6ea;
    padding: 0.7rem 0.85rem;
    border-radius: 14px;
}

.dining-floor-message.is-alert a,
.pos-message.is-alert a {
    color: #fff6ea;
}

@media (max-width: 1100px) {
    .dining-floor-board {
        grid-template-columns: 1fr;
    }
}

/* A short window has no room for a 28rem room plus a booking panel, and the
   page scrolls anyway at this height, so give the map back some of it. */
@media (max-height: 800px) {
    .dining-floor-page .dining-floor-room {
        min-height: 20rem;
    }

    .dining-floor-page .dining-reservation-panel {
        overflow: visible;
    }
}

.dining-floor-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-end;
}

/* Let the title take the slack so the tools wrap as one tidy block instead of
   the branch picker dropping onto a line of its own. */
.dining-floor-head > :first-child {
    flex: 1 1 18rem;
    min-width: 0;
}

.dining-floor-tools {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.6rem;
    align-items: flex-end;
}

.dining-floor-message {
    margin: 0;
    font-weight: 700;
    color: #5a2d48;
}

.dining-floor-message.is-danger {
    color: #b42318;
}

.dining-floor-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

.dining-floor-legend.is-pos {
    gap: 0.5rem;
    font-size: 0.78rem;
}

.dining-legend {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #6b5b4f;
}

.dining-legend::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: #fff6ea;
    box-shadow: inset 0 0 0 1px #d8c7b0;
}

.dining-legend.is-open::before { background: #f0e4d2; }
.dining-legend.is-busy::before { background: #e8d3b0; }
.dining-legend.is-ready::before { background: #d7efe4; }
.dining-legend.is-reserved::before { background: #c9a36a; }

.dining-floor-room,
.pos-floor-room {
    position: relative;
    min-height: 28rem;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(255, 246, 234, 0.92), rgba(232, 220, 200, 0.96)),
        #e8dcc8;
    box-shadow: 0 16px 36px rgba(31, 24, 20, 0.12);
    overflow: hidden;
}

.pos-floor-wrap {
    display: grid;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.pos-floor-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
}

.pos-floor-room {
    min-height: 11.5rem;
    border-radius: 20px;
}

.dining-floor-vacant {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    margin: 0;
    padding: 1.5rem;
    text-align: center;
    color: #7a6e60;
    font-weight: 700;
}

.dining-table {
    position: absolute;
    width: 4.6rem;
    height: 4.6rem;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 22px;
    background: #fff6ea;
    color: #5a2d48;
    box-shadow: 0 8px 18px rgba(31, 24, 20, 0.12);
    cursor: pointer;
    display: grid;
    place-items: center;
    gap: 0;
    padding: 0.2rem;
    font: inherit;
}

.dining-table strong {
    font-size: 1.15rem;
    line-height: 1;
}

.dining-table span {
    font-size: 0.62rem;
    font-weight: 700;
    opacity: 0.8;
}

.dining-table.is-open,
.dining-table.is-busy {
    background: #5a2d48;
    color: #fff6ea;
}

.dining-table.is-ready {
    background: #2f6b54;
    color: #f4fff8;
}

.dining-table.is-reserved {
    background: #c9a36a;
    color: #3d2a18;
}

.dining-table.is-selected {
    outline: 3px solid #c9a36a;
}

.dining-table.is-dragging {
    cursor: grabbing;
    z-index: 3;
}

.dining-table-dialog {
    border: 0;
    border-radius: 22px;
    padding: 1.1rem 1.2rem;
    width: min(22rem, 92vw);
    box-shadow: 0 18px 40px rgba(31, 24, 20, 0.2);
}

.dining-table-dialog h3 {
    margin: 0 0 0.8rem;
}

.dining-table-dialog label {
    display: grid;
    gap: 0.3rem;
    margin-bottom: 0.7rem;
    font-size: 0.85rem;
    font-weight: 700;
}

.dining-table-dialog-actions {
    display: flex;
    gap: 0.5rem;
}

/* —— POS / Cashier —— */
.pos-page {
    display: grid;
    gap: 1.15rem;
}

.pos-page [hidden] {
    display: none !important;
}

.pos-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem 1.25rem;
}

.pos-toolbar-title h2 {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 800;
    color: #280852;
    line-height: 1.2;
}

.pos-toolbar-title p {
    margin: 0.3rem 0 0;
    font-size: 0.88rem;
    color: #64748b;
}

.pos-toolbar-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem;
}

.pos-field {
    display: grid;
    gap: 0.28rem;
    min-width: 8.5rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
}

.pos-field .form-select {
    min-width: 8.5rem;
}

.pos-branch-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #280852;
    padding-bottom: 0.45rem;
}

.pos-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 25rem);
    gap: 1.15rem;
    align-items: start;
}

.pos-layout.is-locked {
    pointer-events: none;
    opacity: 0.55;
}

@media (max-width: 1080px) {
    .pos-layout {
        grid-template-columns: 1fr;
    }

    .pos-cart-panel {
        position: static;
    }
}

.pos-menu-panel {
    background: #fff;
    border: 1px solid var(--winkels-border);
    border-radius: 18px;
    min-height: 28rem;
    overflow: hidden;
    box-shadow: 0 10px 28px rgba(40, 8, 82, 0.04);
}

.pos-menu-tools {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    padding: 0.9rem 0.9rem 0;
    align-items: center;
}

.pos-menu-tools .form-input {
    flex: 1 1 14rem;
}

.pos-invoices {
    display: grid;
    gap: 0.5rem;
    padding: 0.75rem;
}

.pos-invoice-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius);
    background: #fafafa;
}

.pos-invoice-row.is-cancelled {
    opacity: 0.55;
}

.pos-invoice-meta {
    display: grid;
    gap: 0.15rem;
}

.pos-invoice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.pos-change-row {
    display: flex;
    justify-content: space-between;
    font-weight: 800;
    color: #280852;
    padding-top: 0.25rem;
}

.pos-change-row.is-short {
    color: #b42318;
}

.pos-expense-bar {
    display: grid;
    grid-template-columns: 7.5rem minmax(8rem, 1fr) 7rem auto;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
}

.pos-expense-bar.is-handover {
    grid-template-columns: 7.5rem minmax(8rem, 1fr) auto;
}

.pos-expense-bar .form-input,
.pos-expense-bar .form-select {
    width: 100%;
    min-width: 0;
}

.pos-expense-list {
    width: 100%;
    margin: 0.45rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.78rem;
    color: #64748b;
}

.pos-expense-list li {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.38rem 0;
    border-bottom: 1px solid #f1ecf8;
}

.pos-expense-list li:last-child {
    border-bottom: none;
}

.pos-expense-list b {
    color: #280852;
    font-variant-numeric: tabular-nums;
}

.pos-section-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.85rem 0.9rem;
    border-bottom: 1px solid var(--winkels-border);
}

.pos-section-tab {
    border: 1px solid #ece6f7;
    background: #f7f3ff;
    border-radius: 999px;
    padding: 0.4rem 0.95rem;
    font-size: 0.84rem;
    font-weight: 700;
    color: #280852;
    cursor: pointer;
}

.pos-section-tab:hover:not(.active) {
    border-color: #d8c8f3;
    background: #efe8ff;
}

.pos-section-tab.active {
    background: #751fe8;
    color: #fff;
    border-color: #751fe8;
}

.pos-items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.25rem, 1fr));
    gap: 0.85rem;
    padding: 1rem;
}

.pos-item-card {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.4rem;
    padding: 0.55rem;
    border: 1px solid #efeaf6;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    text-align: start;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.pos-item-card:hover:not([disabled]) {
    border-color: #751fe8;
    box-shadow: 0 10px 22px rgba(117, 31, 232, 0.1);
    transform: translateY(-1px);
}

.pos-item-sold-out {
    opacity: 0.55;
    cursor: not-allowed;
}

.pos-item-img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--winkels-radius-md);
    background: var(--winkels-purple-50, #f5f3ff);
}

.pos-item-img-placeholder {
    display: block;
}

.pos-item-name {
    font-size: 0.85rem;
    font-weight: 700;
    line-height: 1.3;
    color: #280852;
    min-height: 2.2em;
}

.pos-item-price {
    margin-top: auto;
    font-size: 0.82rem;
    font-weight: 800;
    color: #751fe8;
    font-variant-numeric: tabular-nums;
}

.pos-cart-panel {
    position: sticky;
    top: 1rem;
    background: #fff;
    border: 1px solid var(--winkels-border);
    border-radius: 18px;
    padding: 1.05rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    box-shadow: 0 10px 28px rgba(40, 8, 82, 0.04);
}

.pos-cart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.pos-cart-head h3 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 800;
    color: #280852;
}

.pos-customer-fields {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.pos-fulfill {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.pos-fulfill-btn {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    margin: 0;
    padding: 0.8rem 0.7rem;
    border: 2px solid #efeaf6;
    border-radius: 16px;
    background: #fff;
    cursor: pointer;
    text-align: start;
    position: relative;
}

.pos-fulfill-btn input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pos-fulfill-btn strong {
    font-size: 0.95rem;
    font-weight: 800;
    color: #280852;
}

.pos-fulfill-btn span {
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.35;
    color: #6b7280;
}

.pos-fulfill-btn:has(input:checked) {
    border-color: #751fe8;
    background: #f3e8ff;
    box-shadow: 0 0 0 3px rgba(117, 31, 232, 0.12);
}

.pos-fulfill-btn-delivery:has(input:checked) {
    border-color: #c9b43a;
    background: #fffce6;
    box-shadow: 0 0 0 3px rgba(231, 224, 111, 0.45);
}

.pos-cart-panel.is-delivery #pos-place-order {
    background: #751fe8;
}

#pos-customer-address {
    min-height: 4.2rem;
    resize: vertical;
}

.pos-cart-lines {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 18rem;
    overflow-y: auto;
}

.pos-cart-empty {
    text-align: center;
    color: var(--winkels-muted, #6b7280);
    font-size: 0.85rem;
    padding: 0.5rem;
}

.pos-cart-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 0.35rem;
    align-items: center;
    padding: 0.5rem;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-md);
}

.pos-cart-line-qty {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.pos-cart-line-qty button {
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-sm);
    background: #fff;
    cursor: pointer;
    font-weight: 700;
}

.pos-cart-remove {
    border: none;
    background: transparent;
    color: var(--winkels-muted, #6b7280);
    font-size: 1.1rem;
    cursor: pointer;
    line-height: 1;
}

.pos-totals {
    border-top: 1px solid var(--winkels-border);
    padding-top: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9rem;
}

.pos-total-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
}

.pos-total-discount {
    color: #16a34a;
}

.pos-total-grand {
    font-size: 1.05rem;
    margin-top: 0.25rem;
    color: #280852;
}

.pos-cart-panel .pos-invoices {
    padding: 0.8rem 0 0;
    border-top: 1px solid #efeaf6;
}

.pos-unpaid-title {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: #280852;
}

.pos-cart-panel .pos-invoice-row {
    background: #f8f6fc;
}

.pos-place-btn {
    width: 100%;
    padding: 0.85rem;
    font-size: 1rem;
}

.pos-shift-bar {
    display: grid;
    gap: 0.9rem;
    padding: 1rem 1.1rem;
    border: 1px solid #efeaf6;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(40, 8, 82, 0.04);
}

.pos-shift-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.pos-shift-status-wrap {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 2.1rem;
}

.pos-shift-dot {
    width: 0.62rem;
    height: 0.62rem;
    border-radius: 999px;
    background: #94a3b8;
    box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.16);
}

.pos-shift-bar.is-open .pos-shift-dot {
    background: #16a34a;
    box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.16);
}

#pos-shift-status {
    font-size: 1rem;
    font-weight: 800;
    color: #280852;
}

.pos-shift-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.pos-shift-actions .form-input {
    width: 8rem;
}

.pos-shift-actions .pos-shift-reason {
    width: 13rem;
}

.pos-shift-actions .pos-shift-pin {
    width: 8rem;
    letter-spacing: 0.2em;
}

.pos-shift-kpis,
.pos-shift-facts {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.55rem;
}

.pos-kpi {
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem 0.7rem;
    border-radius: 12px;
    background: #f8f6fc;
    min-width: 0;
}

.pos-kpi span {
    font-size: 0.7rem;
    font-weight: 700;
    color: #64748b;
    line-height: 1.3;
}

.pos-kpi b,
.pos-shift-facts b {
    color: #280852;
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
    word-break: break-word;
}

.pos-kpi-diff b {
    font-size: 0.8rem;
    line-height: 1.35;
}

.pos-kpi-diff b.is-over,
.pos-shift-facts .is-over,
.shift-diff.is-over { color: #047857; font-weight: 800; }

.pos-kpi-diff b.is-short,
.pos-shift-facts .is-short,
.shift-diff.is-short { color: #b42318; font-weight: 800; }

.pos-kpi-diff b.is-match,
.shift-diff.is-match { color: #475569; }

.pos-shift-ops {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.pos-shift-op {
    padding: 0.75rem 0.8rem;
    border: 1px solid #efeaf6;
    border-radius: 14px;
    background: #fcfbfe;
}

.pos-shift-op.is-relay {
    grid-column: 1 / -1;
}

.pos-shift-op h3 {
    margin: 0 0 0.55rem;
    font-size: 0.82rem;
    font-weight: 800;
    color: #280852;
}

@media (max-width: 1100px) {
    .pos-shift-kpis,
    .pos-shift-facts {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .pos-shift-ops {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 720px) {
    .pos-shift-kpis,
    .pos-shift-facts,
    .pos-shift-ops,
    .pos-expense-bar,
    .pos-expense-bar.is-handover {
        grid-template-columns: 1fr;
    }
}

.shift-diff-reason {
    margin-top: 0.2rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.pos-cart-panel .pos-field {
    min-width: 0;
}

.pos-pay-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.pos-pay-methods label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid var(--winkels-border);
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
}

.pos-pay-methods label:has(input:checked) {
    background: #f3e8ff;
    border-color: #751fe8;
    color: #280852;
}

.pos-pay-methods input {
    margin: 0;
}

.pos-extra-fields {
    display: grid;
    gap: 0.65rem;
    padding-top: 0.15rem;
}

.pos-message {
    font-size: 0.85rem;
    padding: 0.65rem;
    border-radius: var(--winkels-radius-md);
    margin: 0;
}

.pos-message-success {
    background: #ecfdf5;
    color: #047857;
    border: 1px solid #a7f3d0;
}

.pos-message-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

.pos-sheet-backdrop[hidden],
.pos-sheet[hidden] {
    display: none !important;
}

.pos-sheet-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    z-index: 60;
}

.pos-sheet {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: min(100%, 32rem);
    max-height: 85vh;
    background: #fff;
    border-radius: var(--winkels-radius-lg) var(--winkels-radius-lg) 0 0;
    z-index: 61;
    display: flex;
    flex-direction: column;
    box-shadow: var(--winkels-shadow-lg);
}

.pos-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem;
    border-bottom: 1px solid var(--winkels-border);
}

.pos-sheet-head h3 {
    margin: 0;
    font-size: 1rem;
}

.pos-sheet-body {
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pos-mod-group h4 {
    margin: 0 0 0.5rem;
    font-size: 0.9rem;
}

.pos-mod-options {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.pos-mod-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-md);
    cursor: pointer;
}

.pos-sheet-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    border-top: 1px solid var(--winkels-border);
}

.pos-table-check {
    width: min(100%, 36rem);
}

.pos-table-check-meta {
    margin: 0.25rem 0 0;
    font-size: 0.8rem;
    color: var(--winkels-muted, #7a6e60);
}

.pos-table-check-line {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 0.6rem;
    align-items: start;
    padding: 0.7rem 0.8rem;
    border-radius: 14px;
    background: #fff8ef;
}

.pos-table-check-line span {
    display: grid;
    gap: 0.15rem;
    font-weight: 800;
}

.pos-table-check-line small {
    font-weight: 600;
    color: #7a6e60;
}

.pos-table-check-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 0.9rem;
    border-radius: 16px;
    background: #5a2d48;
    color: #fff6ea;
    font-weight: 800;
}

.pos-table-check-discount {
    margin: 0;
    font-weight: 700;
    color: #7a6e60;
}

.pos-table-check-pay {
    display: grid;
    gap: 0.7rem;
}

.pos-table-check-pay > span {
    font-weight: 800;
}

.pos-table-check-foot {
    flex-wrap: wrap;
    justify-content: stretch;
}

.pos-table-check-foot > button {
    flex: 1 1 8rem;
}

/* —— Inventory —— */
.mk-inventory-head,
.mk-inventory-table-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--winkels-border);
}

.mk-inventory-head {
    padding: 0;
    border-bottom: none;
    margin-bottom: 0;
}

.inventory-mode {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.7rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: #f3eefc;
}

.inventory-mode-pill {
    padding: 0.28rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
}

.inventory-mode-pill.is-on {
    background: #751fe8;
    color: #fff;
}

.smart-inventory-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.smart-inventory-steps li {
    position: relative;
    padding: 0.75rem 0.9rem 0.75rem 2.6rem;
    border-radius: 0.85rem;
    background: #f7f5fd;
    color: #280852;
    font-size: 0.9rem;
    line-height: 1.45;
}

body.rtl .smart-inventory-steps li {
    padding: 0.75rem 2.6rem 0.75rem 0.9rem;
}

.smart-inventory-steps li::before {
    counter-increment: smart-step;
    content: counter(smart-step);
    position: absolute;
    top: 0.7rem;
    inset-inline-start: 0.75rem;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 999px;
    background: #751fe8;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.smart-inventory-steps {
    counter-reset: smart-step;
}

.mk-inventory-table-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.mk-inventory-filters-card {
    padding: 1rem 1.25rem;
}

table.winkels-table.mk-inventory-table {
    width: 100%;
}

table.winkels-table.mk-inventory-table th,
table.winkels-table.mk-inventory-table td {
    padding: 0.85rem 0.85rem;
    text-align: start;
    vertical-align: middle;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

table.winkels-table.mk-inventory-table th {
    font-size: 0.78rem;
    font-weight: 700;
    color: #5b4a86;
}

table.winkels-table.mk-inventory-table th.is-name,
table.winkels-table.mk-inventory-table td.is-name {
    width: 100%;
    white-space: normal;
}

table.winkels-table.mk-inventory-table td.is-name strong {
    font-weight: 750;
    letter-spacing: -0.01em;
}

table.winkels-table.mk-inventory-table th.is-num,
table.winkels-table.mk-inventory-table td.is-num,
table.winkels-table.mk-inventory-table th.is-money,
table.winkels-table.mk-inventory-table td.is-money,
table.winkels-table.mk-inventory-table th.is-kind,
table.winkels-table.mk-inventory-table td.is-kind,
table.winkels-table.mk-inventory-table th.is-unit,
table.winkels-table.mk-inventory-table td.is-unit,
table.winkels-table.mk-inventory-table th.is-actions,
table.winkels-table.mk-inventory-table td.is-actions {
    width: 1%;
}

table.winkels-table.mk-inventory-table tbody tr:nth-child(even) {
    background: rgba(250, 248, 255, 0.7);
}

.mk-inventory-money {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    direction: ltr;
    unicode-bidi: isolate;
}

.mk-inventory-table .is-num {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

.mk-inventory-actions {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 0.4rem;
}

.mk-inventory-empty {
    text-align: center;
    color: var(--winkels-text-muted);
    padding: 2.4rem 1rem !important;
    white-space: normal !important;
}

.mk-recipe {
    max-width: 46rem;
}

.mk-recipe-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.mk-recipe-eyebrow {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--winkels-purple);
}

.mk-recipe-hero h2 {
    margin: 0.25rem 0 0.55rem;
    font-size: 1.7rem;
    font-weight: 750;
    letter-spacing: -0.03em;
}

.mk-recipe-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.mk-recipe-stat {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.28rem 0.7rem;
    border-radius: 9999px;
    background: var(--winkels-purple-50);
    color: var(--winkels-purple-800);
    font-size: 0.78rem;
    font-weight: 600;
}

.mk-recipe-stat strong {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.mk-recipe-card {
    padding: 1.15rem 1.2rem 1.2rem;
    margin-bottom: 1.15rem;
}

.mk-recipe-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.mk-recipe-yield {
    max-width: 12rem;
}

.mk-recipe-cols,
.mk-recipe-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 7.2rem 2.4rem;
    gap: 0.65rem;
    align-items: center;
}

.mk-recipe-cols.has-waste,
.mk-recipe-row.has-waste {
    grid-template-columns: minmax(0, 1fr) 6.2rem 6.2rem 2.4rem;
}

.inv-split-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.7rem;
    border: 1.5px solid #ece8ff;
    border-radius: 999px;
    background: #f7f5fd;
    color: #280852;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.inv-split-btn:hover {
    border-color: #751fe8;
    color: #751fe8;
}

.inv-split-btn svg {
    flex: 0 0 auto;
}

.inv-split-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.inv-split-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.85rem;
    background: #f7f5fd;
    color: #280852;
    font-size: 0.9rem;
}

.inv-move-kinds {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.inv-move-kind {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
    min-height: 6.5rem;
    padding: 0.95rem 1rem;
    border: 1.5px solid #ece8ff;
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #fdfcff 100%);
    color: #280852;
    text-align: start;
    cursor: pointer;
}

.inv-move-kind:hover:not(:disabled) {
    border-color: #751fe8;
    box-shadow: 0 0 0 3px rgba(117, 31, 232, 0.12);
}

.inv-move-kind:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.inv-move-kind strong {
    font-size: 0.95rem;
    font-weight: 750;
}

.inv-move-kind span {
    color: #6b7280;
    font-size: 0.78rem;
    line-height: 1.45;
}

.inv-move-chosen {
    margin: 0;
    padding: 0.55rem 0.8rem;
    border-radius: 0.75rem;
    background: #751fe8;
    color: #fff;
    font-size: 0.88rem;
    font-weight: 700;
}

.inv-back-types {
    background: none;
    border: 0;
    padding: 0;
    color: #751fe8;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 640px) {
    .inv-move-kinds {
        grid-template-columns: 1fr;
    }
}

.mk-stock-forms {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1rem;
}

.mk-stock-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin: 0 0 1.35rem;
}

.mk-stock-action {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 6.6rem;
    padding: 0.85rem 1rem;
    border: 1px solid #efeaf6;
    border-radius: 16px;
    background: #fff;
    color: #280852;
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.2;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(40, 8, 82, 0.04);
}

.mk-stock-action:hover,
.mk-stock-action.is-open {
    border-color: #751fe8;
    background: #f7f3ff;
    color: #751fe8;
}

.mk-stock-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 12px;
    background: #f3e8ff;
    color: #751fe8;
}

.mk-stock-action:hover .mk-stock-action-icon,
.mk-stock-action.is-open .mk-stock-action-icon {
    background: #751fe8;
    color: #fff;
}

.mk-stock-action-icon svg {
    width: 1.25rem;
    height: 1.25rem;
}

.mk-stock-modal {
    max-width: 36rem;
}

.mk-stock-modal .menu-modal-section-hint {
    margin: 0 0 1rem;
}

.mk-stock-preview {
    margin: 0.9rem 0 0;
    padding: 0.9rem 1rem;
    border: 1.5px solid #ece8ff;
    border-radius: 1rem;
    background: linear-gradient(180deg, #faf7ff 0%, #ffffff 100%);
}

.mk-stock-preview[hidden] {
    display: none;
}

.mk-stock-preview-warehouse {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
}

.mk-stock-preview-stat {
    display: flex;
    flex-direction: column;
    gap: 0.22rem;
    padding: 0.75rem 0.85rem;
    border-radius: 0.85rem;
    background: #fff;
    border: 1px solid #efeaf6;
}

.mk-stock-preview-stat span {
    font-size: 0.75rem;
    font-weight: 700;
    color: #7a6b96;
}

.mk-stock-preview-stat strong {
    font-size: 1.35rem;
    font-weight: 800;
    color: #280852;
    line-height: 1.2;
}

.mk-stock-preview.is-short .mk-stock-preview-after {
    color: #b42318;
}

.mk-stock-preview-warn {
    margin: 0.6rem 0 0;
    color: #b42318;
    font-size: 0.8rem;
    font-weight: 700;
}

.mk-stock-preview-title {
    margin: 0.9rem 0 0.45rem;
    font-size: 0.78rem;
    font-weight: 800;
    color: #5b4a86;
}

.mk-stock-preview-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
}

.mk-stock-preview-branch {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0.75rem;
    border-radius: 0.75rem;
    background: #fff;
    border: 1px solid #efeaf6;
    font-size: 0.86rem;
    font-weight: 700;
    color: #280852;
}

.mk-stock-preview-branch.is-dest {
    border-color: #751fe8;
    background: #f7f3ff;
}

.mk-stock-preview-qty {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    white-space: nowrap;
}

.mk-stock-preview-next {
    color: #751fe8;
    font-weight: 800;
}

.mk-stock-preview-arrow {
    color: #9b8ab8;
    font-weight: 700;
}

@media (max-width: 420px) {
    .mk-stock-preview-warehouse {
        grid-template-columns: 1fr;
    }
}

.mk-stock-split {
    line-height: 1.45;
}

.mk-recipe-cols {
    padding: 0 0.15rem;
    color: #5b4a86;
    font-size: 0.78rem;
    font-weight: 700;
}

.mk-recipe-row {
    padding: 0.7rem 0.75rem;
    border: 1.5px solid #ece8ff;
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #fdfcff 100%);
}

.mk-recipe-row .winkels-input,
.mk-recipe-yield .winkels-input {
    width: 100%;
    min-height: 2.7rem;
}

.mk-recipe-remove {
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid #fecaca;
    border-radius: 0.75rem;
    background: #fff;
    color: #b91c1c;
    font-size: 1.35rem;
    line-height: 1;
    cursor: pointer;
}

.mk-recipe-remove:hover {
    background: #fef2f2;
}

.mk-recipe-foot,
.mk-recipe-batch {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem;
}

.mk-recipe-foot {
    margin-top: 0.35rem;
}

@media (max-width: 640px) {
    .mk-recipe-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .mk-recipe-cols,
    .mk-recipe-row {
        grid-template-columns: minmax(0, 1fr) 5.6rem 2.3rem;
    }

    .mk-recipe-cols.has-waste,
    .mk-recipe-row.has-waste {
        grid-template-columns: minmax(0, 1fr) 5rem 5rem 2.3rem;
    }
}

/* —— Pickup counter —— */
.pickup-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.pickup-count-badge {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--winkels-purple-deep, #5b21b6);
}

.pickup-board {
    min-height: 16rem;
}

.pickup-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 0.85rem;
}

.pickup-card {
    background: #fff;
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-lg);
    padding: 1rem;
    box-shadow: var(--winkels-shadow-sm);
}

.pickup-card-urgent {
    border-color: #f59e0b;
}

.pickup-card-new {
    animation: kitchen-pulse 1.2s ease-in-out 3;
}

.pickup-ref {
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.2;
}

.pickup-customer {
    font-weight: 600;
    margin: 0.35rem 0;
}

.pickup-meta {
    font-size: 0.8rem;
    color: var(--winkels-muted, #6b7280);
}

.pickup-lines {
    list-style: none;
    margin: 0.65rem 0;
    padding: 0;
    font-size: 0.9rem;
}

.pickup-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--winkels-border);
}

.pickup-handoff-btn {
    width: 100%;
    margin-top: 0.75rem;
}

.pickup-empty {
    text-align: center;
    color: var(--winkels-muted, #6b7280);
    padding: 2rem;
}

body.pickup-fullscreen-mode .winkels-sidebar {
    display: none;
}

/* —— Receipt print —— */
.receipt-body {
    background: #f3f4f6;
    margin: 0;
    padding: 1rem;
}

.receipt-paper {
    max-width: 80mm;
    margin: 0 auto;
    background: #fff;
    padding: 0.6rem 0.5rem;
    font-size: 13px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.receipt-body.is-58 .receipt-paper {
    max-width: 58mm;
    font-size: 12px;
}

.receipt-change {
    font-size: 1.05rem;
    margin-top: 0.2rem;
}

.receipt-print-btn {
    display: block;
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.55rem;
    border: 1px solid #280852;
    background: #751fe8;
    color: #fff;
    font-weight: 800;
    border-radius: 0.5rem;
    cursor: pointer;
}

.receipt-head h1 {
    margin: 0 0 0.25rem;
    font-size: 1.1rem;
}

.receipt-ref {
    font-weight: 800;
    font-size: 1.2rem;
}

.receipt-lines {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0;
}

.receipt-lines td {
    padding: 0.2rem 0;
    vertical-align: top;
}

.receipt-lines td:last-child {
    text-align: end;
    white-space: nowrap;
}

.receipt-totals div {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.15rem 0;
}

.receipt-grand {
    font-size: 1rem;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    border-top: 1px dashed var(--winkels-border);
}

@media print {
    @page {
        size: 80mm auto;
        margin: 3mm;
    }

    .receipt-body {
        background: #fff;
        padding: 0;
    }

    .receipt-paper {
        max-width: none;
        width: 74mm;
        padding: 0;
        box-shadow: none;
    }

    .receipt-body.is-58 .receipt-paper {
        width: 52mm;
    }

    .receipt-print-btn {
        display: none !important;
    }
}

.winkels-dialog {
    border: none;
    border-radius: var(--winkels-radius-lg);
    padding: 0;
    max-width: 32rem;
    width: calc(100% - 2rem);
    box-shadow: var(--winkels-shadow-lg);
}

.winkels-dialog::backdrop {
    background: rgba(15, 23, 42, 0.45);
}

.winkels-dialog-body {
    padding: 1.25rem;
}

.kitchen-lines {
    margin: 0.5rem 0 0;
    padding: 0;
    list-style: none;
    font-size: 0.9rem;
}

.reception-board {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.reception-board.is-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1280px) {
    .reception-board,
    .reception-board.is-3 {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: minmax(0, 1fr) minmax(0, 1fr);
    }
}

@media (max-width: 760px) {
    .reception-board,
    .reception-board.is-3 {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        overflow: auto;
    }

    .reception-column {
        max-height: 70vh;
    }
}

.reception-column {
    border: 1px solid var(--winkels-border);
    border-radius: var(--winkels-radius-lg);
    min-width: 0;
    min-height: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.reception-col-confirmed { background: #f7f4fd; }
.reception-col-preparing { background: #fbf9ee; }
.reception-col-ready { background: #f3f8f5; }
.reception-col-delivered { background: #f4f4f6; }

.reception-column-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--winkels-border);
    font-weight: 700;
    border-radius: var(--winkels-radius-lg) var(--winkels-radius-lg) 0 0;
}

.reception-col-confirmed .reception-column-head {
    background: #ebe4f8;
    color: #280852;
    border-bottom-color: #d8c8f2;
}

.reception-col-preparing .reception-column-head {
    background: #f6f1c8;
    color: #4a4408;
    border-bottom-color: #e8e09a;
}

.reception-col-ready .reception-column-head {
    background: #e4f3ea;
    color: #1f4a32;
    border-bottom-color: #c5e3d0;
}

.reception-col-delivered .reception-column-head {
    background: #e8e6ee;
    color: #3a3350;
    border-bottom-color: #ddd8e6;
}

.reception-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    height: 1.75rem;
    padding: 0 0.4rem;
    border-radius: 999px;
    background: var(--winkels-purple-deep, #5b21b6);
    color: #fff;
    font-size: 0.85rem;
}

.reception-cards {
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
}

.reception-cancel-btn {
    border: 1px solid #dc2626;
    color: #dc2626;
    background: #fff;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.22rem 0.7rem;
    cursor: pointer;
}

.reception-cancel-btn:hover {
    background: #fef2f2;
}

.reception-card {
    background: #fff;
    border-radius: var(--winkels-radius-lg);
    padding: 0.9rem;
    border: 1px solid var(--winkels-border);
    box-shadow: var(--winkels-shadow-sm);
    cursor: pointer;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    flex: 0 0 auto;
}

.reception-card-top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 0.55rem;
}

.reception-card-confirmed {
    background: #f3eefc;
    border-color: #d8c8f2;
}

.reception-card-preparing {
    background: #fbf8de;
    border-color: #e8e09a;
}

.reception-card-ready {
    background: #eef7f1;
    border-color: #c5e3d0;
}

.reception-card-delivered {
    background: #f0eef4;
    border-color: #ddd8e6;
}

.reception-block {
    padding: 0.65rem 0;
    border-top: 1px solid rgba(40, 8, 82, 0.06);
}

.reception-block:first-of-type {
    border-top: 0;
}

.reception-block-label {
    display: block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #7c6b99;
    margin-bottom: 0.25rem;
}

.reception-block-pay .reception-card-foot {
    margin-top: 0.35rem;
    padding-top: 0;
    border-top: 0;
}

.reception-ref {
    font-weight: 700;
    font-size: 1.05rem;
    color: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.reception-ref:hover {
    text-decoration: underline;
}

.reception-driver-note {
    font-size: 0.85rem;
    color: #5b4a78;
}

.reception-handover,
.handover-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    border-radius: 14px;
    background: #fffef3;
    border: 1px solid rgba(117, 31, 232, 0.16);
    text-align: center;
}

.reception-handover-label,
.handover-box-label {
    font-size: 0.8rem;
    color: #5b4a78;
}

.reception-handover-code,
.handover-box-code {
    font-size: 2.4rem;
    letter-spacing: 0.28em;
    color: #280852;
    line-height: 1;
}

.reception-handover-hint,
.handover-box-hint {
    font-size: 0.85rem;
    color: #6b6280;
}

.manual-handover {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed rgba(117, 31, 232, 0.18);
}

.manual-handover-title {
    font-weight: 700;
    color: #280852;
    margin: 0 0 0.35rem;
}

.manual-handover-hint {
    font-size: 0.85rem;
    color: #6b6280;
    line-height: 1.45;
    margin: 0;
}

.reception-handover-btn {
    width: 100%;
}

.delivery-photo-thumb {
    width: 96px;
    height: 96px;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid rgba(117, 31, 232, 0.16);
}

.reception-card-new {
    animation: reception-pulse 1.2s ease-in-out 3;
    border-color: var(--winkels-purple-deep, #5b21b6);
}

.reception-card-urgent {
    border-color: var(--winkels-danger, #dc2626);
}

@keyframes reception-pulse {
    0%, 100% { box-shadow: var(--winkels-shadow-sm); }
    50% { box-shadow: 0 0 0 3px rgba(91, 33, 182, 0.25); }
}

.reception-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.35rem;
    min-width: 0;
    flex-wrap: wrap;
}

.reception-card .badge {
    max-width: 100%;
    white-space: normal;
    text-align: start;
}

.reception-customer {
    font-weight: 700;
    margin: 0;
    overflow-wrap: anywhere;
}

.reception-meta,
.reception-phone {
    margin: 0.15rem 0 0;
    font-size: 0.85rem;
    color: var(--winkels-muted, #6b7280);
    overflow-wrap: anywhere;
}

.reception-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
    margin-top: 0.35rem;
    padding-top: 0;
    border-top: 0;
    min-width: 0;
}

.reception-total {
    min-width: 0;
}

.reception-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    min-width: 0;
    max-width: 100%;
}

.reception-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.reception-next-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-weight: 800;
    font-size: 1rem;
    padding: 0.85rem 1rem;
}

.reception-empty {
    padding: 1rem;
    text-align: center;
    color: var(--winkels-muted, #6b7280);
    margin: 0;
}

.reception-live-dot {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5);
    animation: reception-live 2s infinite;
}

@keyframes reception-live {
    70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.admin-layout:has(.reception-screen) {
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
}

.admin-layout:has(.reception-screen) .winkels-main {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: auto;
    max-height: 100%;
}

.admin-layout:has(.reception-screen) .sa-page {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.admin-layout:has(.reception-screen) .admin-main-toolbar {
    flex-shrink: 0;
}

.reception-screen {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.reception-head {
    flex-shrink: 0;
}

body.reception-fullscreen-mode .winkels-sidebar {
    display: none;
}

body.reception-fullscreen-mode .winkels-main {
    padding: 1rem;
    max-width: none;
}

body.reception-fullscreen-mode .reception-board {
    min-height: 0;
}

.command-center-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.command-center-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(16rem, 22rem);
    gap: 1.5rem;
    align-items: start;
}

@media (max-width: 1024px) {
    .command-center-grid {
        grid-template-columns: 1fr;
    }
}

.command-alerts {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.command-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: var(--winkels-radius);
    border: 1px solid var(--winkels-border);
    background: #fff;
    text-decoration: none;
    transition: box-shadow 0.15s ease;
}

.command-alert:hover {
    box-shadow: var(--winkels-shadow-sm);
}

.command-alert-count {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.command-alert-warning .command-alert-count { color: var(--winkels-warning, #d97706); }
.command-alert-danger .command-alert-count { color: var(--winkels-danger, #dc2626); }

.command-alert-label {
    font-size: 0.875rem;
    color: var(--winkels-text-muted);
}

.operations-pipeline {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

@media (max-width: 640px) {
    .operations-pipeline {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.pipeline-step {
    text-align: center;
    padding: 1rem;
    border-radius: var(--winkels-radius);
    background: var(--winkels-purple-50);
    border: 1px solid var(--winkels-border);
}

.pipeline-count {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.2;
}

.pipeline-label {
    display: block;
    font-size: 0.8rem;
    color: var(--winkels-text-muted);
    margin-top: 0.25rem;
}

.command-dl {
    display: grid;
    gap: 0.65rem;
}

.command-dl div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    font-size: 0.9rem;
}

.command-dl dt {
    color: var(--winkels-text-muted);
}

.command-dl dd {
    font-weight: 600;
    margin: 0;
}

.command-rank {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.65rem;
}

.command-rank li {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    font-size: 0.9rem;
}

.command-rank-name {
    font-weight: 500;
}

.command-rank-meta {
    color: var(--winkels-text-muted);
    white-space: nowrap;
}

.subscription-alert-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}

.subscription-alert-item {
    border-radius: var(--winkels-radius);
    border: 1px solid var(--winkels-border);
    overflow: hidden;
}

.subscription-alert-warning {
    background: #fffbeb;
    border-color: #fcd34d;
}

.subscription-alert-danger {
    background: #fef2f2;
    border-color: #fca5a5;
}

.subscription-alert-link {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: inherit;
}

.subscription-alert-link:hover {
    background: rgba(0, 0, 0, 0.03);
}

.subscription-alert-name {
    font-weight: 600;
}

.subscription-alert-meta {
    font-size: 0.85rem;
    color: var(--winkels-text-muted);
}

.command-shortcuts {
    display: grid;
    gap: 0.5rem;
}

.command-shortcut {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--winkels-radius);
    border: 1px solid var(--winkels-border);
    background: var(--winkels-purple-50);
    text-decoration: none;
    color: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.command-shortcut:hover {
    box-shadow: var(--winkels-shadow-sm);
    border-color: var(--winkels-purple-200);
}

.command-shortcut-count {
    min-width: 1.75rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    background: #fff;
    font-size: 0.78rem;
    font-weight: 700;
    text-align: center;
}

.command-shortcut--warning .command-shortcut-count {
    background: #fef3c7;
    color: #b45309;
}

.command-shortcut--danger .command-shortcut-count {
    background: #fee2e2;
    color: #b91c1c;
}

.menu-spreadsheet-import .menu-field {
    min-width: min(100%, 18rem);
}

.menu-import-panel {
    margin: -0.75rem 0 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--winkels-purple-200);
    border-radius: 0.85rem;
    background: #fff;
}

.menu-import-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.menu-import-hint {
    flex: 1 1 100%;
    margin: 0;
    font-size: 0.78rem;
    color: var(--winkels-text-muted);
}

.menu-import-row .winkels-input {
    flex: 1 1 14rem;
    min-width: 0;
}

.menu-catnav-sort {
    display: flex;
    gap: 0.4rem;
    align-items: center;
}

.menu-catnav .sf-cat.is-sortable {
    cursor: grab;
}

.menu-catnav .sf-cat.is-dragging {
    opacity: 0.55;
}

.signup-details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    gap: 1.25rem;
}

.signup-details-heading {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--winkels-text-muted);
    margin-bottom: 0.75rem;
}

.signup-card-head {
    background: #fff;
}

.signup-card-toggle:hover {
    background: var(--winkels-purple-50);
}

.signup-snapshot-json {
    border: 1px solid var(--winkels-border);
}

/* --- Customer order tracking --------------------------------------------- */
.mk-order-map,
.sf-order-track:not(.sf-order-track--full) .sf-order-map {
    position: relative;
    height: 240px;
    border-radius: 1rem;
    overflow: hidden;
    margin-bottom: 0.85rem;
    border: 1px solid var(--winkels-border);
    background: #eee5fd;
}

.mk-order-map iframe,
.sf-order-track:not(.sf-order-track--full) .sf-order-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}

.sf-order-map-toggle {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    z-index: 5;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #280852;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(40, 8, 82, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.sf-order-map.is-full {
    position: fixed;
    inset: 0;
    z-index: 80;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    margin: 0;
    border: 0;
    border-radius: 0;
}

.sf-order-map.is-full iframe {
    width: 100%;
    height: 100%;
    min-height: 100dvh;
}

.sf-track-map-wrap.is-full {
    position: fixed;
    inset: 0;
    z-index: 80;
}

body.sf-map-locked {
    overflow: hidden;
}

.mk-order-live {
    margin: -0.35rem 0 0.85rem;
    color: var(--winkels-purple-700);
    font-size: 0.86rem;
    font-weight: 700;
    text-align: center;
}

.mk-order-tracking-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mk-order-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mk-order-timeline li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.55rem 0;
    color: var(--winkels-text-muted);
    font-size: 0.9rem;
}

.mk-order-timeline li.is-done {
    color: var(--winkels-text);
    font-weight: 600;
}

.mk-order-timeline li.is-current {
    color: var(--winkels-purple-700);
    font-weight: 700;
}

.mk-order-timeline-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    border: 2px solid var(--winkels-border-strong);
    background: #fff;
    flex-shrink: 0;
}

.mk-order-timeline li.is-done .mk-order-timeline-dot {
    background: var(--winkels-gradient);
    border-color: transparent;
}

.mk-order-timeline li.is-current .mk-order-timeline-dot {
    border-color: var(--winkels-purple-600);
    box-shadow: 0 0 0 3px var(--winkels-purple-100);
}

.mk-order-cancelled {
    color: var(--winkels-danger);
    font-weight: 600;
}

.mk-active-order-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1.25rem;
    border-radius: var(--winkels-radius-lg);
    background: linear-gradient(135deg, var(--winkels-purple-50), #fff);
    border: 1px solid var(--winkels-purple-200);
}

.mk-active-order-banner-main {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mk-active-order-pulse {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 999px;
    background: var(--winkels-purple-600);
    animation: mk-pulse 1.5s ease-in-out infinite;
    flex-shrink: 0;
}

@keyframes mk-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.15); }
}

.mk-account-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.mk-account-filters .winkels-input {
    min-width: 10rem;
    flex: 1;
}

.mk-expenses-filters-card .mk-account-filters .winkels-input.w-auto {
    flex: 0 1 11rem;
    width: auto;
    min-width: 9.5rem;
    max-width: 14rem;
}

.mk-performance-groups {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.4rem;
}

.mk-perf-period {
    margin: 0.45rem 0 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #280852;
}

.mk-perf-views {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
    gap: 0.75rem;
}

.mk-perf-view {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-height: 5.4rem;
    padding: 0.95rem 1rem;
    border: 1px solid #efeaf6;
    border-radius: 18px;
    background: #fff;
    color: #280852;
    text-decoration: none;
    box-shadow: 0 8px 22px rgba(40, 8, 82, 0.05);
}

.mk-perf-view strong {
    font-size: 1.02rem;
    font-weight: 800;
}

.mk-perf-view span {
    font-size: 0.78rem;
    line-height: 1.4;
    font-weight: 600;
    color: #6b7280;
}

.mk-perf-view:hover {
    border-color: #751fe8;
    box-shadow: 0 12px 28px rgba(117, 31, 232, 0.12);
}

.mk-perf-view.is-active {
    border-color: #751fe8;
    background: #f6f0ff;
    box-shadow: 0 0 0 3px rgba(117, 31, 232, 0.14);
}

.mk-perf-highlights {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 0.75rem;
}

.mk-perf-highlight {
    padding: 1rem 1.1rem;
    border-radius: 18px;
    background: #fffce6;
    border: 1px solid #e7e06f;
}

.mk-perf-highlight p {
    margin: 0 0 0.25rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b5b12;
}

.mk-perf-highlight strong {
    display: block;
    font-size: 1.12rem;
    color: #280852;
}

.mk-perf-highlight span {
    display: block;
    margin-top: 0.2rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #4b5563;
}

.mk-perf-sources {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

.mk-perf-sources a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.38rem 0.75rem;
    border-radius: 999px;
    border: 1px solid #efeaf6;
    background: #fff;
    color: #280852;
    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
}

.mk-perf-sources a em {
    font-style: normal;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    background: #f3e8ff;
    font-size: 0.7rem;
}

.mk-perf-sources a.is-active {
    background: #751fe8;
    border-color: #751fe8;
    color: #fff;
}

.mk-perf-sources a.is-active em {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.mk-perf-share {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    min-width: 6.5rem;
}

.mk-perf-share-track {
    display: block;
    flex: 1;
    height: 0.45rem;
    border-radius: 999px;
    background: #efeaf6;
    overflow: hidden;
}

.mk-perf-share i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #751fe8;
}

.mk-perf-share em {
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 800;
    color: #280852;
    font-variant-numeric: tabular-nums;
}

.mk-perf-table-card + .mk-perf-table-card {
    margin-top: 0;
}

table.winkels-table.mk-performance-table td.is-warn {
    color: #b45309;
    font-weight: 800;
}

.mk-performance-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.85rem;
}

/* Reservations breakdown and peak hours sit side by side while there is room. */
.mk-floor-analytics-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    align-items: start;
}

@media (max-width: 1100px) {
    .mk-floor-analytics-pair {
        grid-template-columns: minmax(0, 1fr);
    }
}

.mk-floor-analytics-pair .mk-perf-table-card {
    margin-bottom: 0;
}

table.winkels-table.mk-performance-table td span.is-warn {
    color: #b45309;
    font-weight: 800;
}

.mk-performance-table-wrap {
    overflow-x: auto;
}

.mk-performance-table-wrap + .mk-expenses-table-head {
    border-top: 1px solid var(--winkels-border);
}

table.winkels-table.mk-performance-table th.is-num,
table.winkels-table.mk-performance-table td.is-num {
    text-align: start;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

table.winkels-table.mk-performance-table td.is-total {
    font-weight: 700;
}

table.winkels-table.mk-performance-table tfoot th,
table.winkels-table.mk-performance-table tfoot td {
    background: #fbf8de;
    font-weight: 700;
    color: #3a1a86;
}

.mk-expenses-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.mk-expenses-head-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.mk-expenses-filters-card {
    padding: 1rem 1.15rem;
}

.mk-expenses-table-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--winkels-border);
    background: linear-gradient(180deg, #fdfcff 0%, #fff 100%);
}

.mk-expenses-table-head h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
}

.mk-expenses-table-meta {
    font-size: 0.82rem;
    color: var(--winkels-text-muted);
}

.mk-expenses-page {
    display: grid;
    gap: 1rem;
}

.mk-expenses-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.1rem 1.2rem;
    border-radius: 1rem;
    background: linear-gradient(135deg, rgba(117, 31, 232, 0.07), rgba(40, 8, 82, 0.03));
    border: 1px solid rgba(117, 31, 232, 0.1);
}

.mk-expenses-title {
    margin: 0 0 0.25rem;
    font-size: 1.55rem;
    font-weight: 800;
    color: #280852;
}

.mk-expenses-sub {
    margin: 0 0 0.55rem;
    font-size: 0.9rem;
    color: #64748b;
    max-width: 42rem;
}

.mk-expenses-period-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(117, 31, 232, 0.18);
    font-size: 0.8rem;
    font-weight: 800;
    color: #751fe8;
}

.mk-expenses-toolbar {
    padding: 1rem 1.15rem;
    display: grid;
    gap: 0.85rem;
}

.mk-expenses-toolbar-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.mk-expenses-toolbar-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem 0.75rem;
}

.mk-expenses-filter-field {
    display: grid;
    gap: 0.25rem;
    flex: 1 1 9rem;
    min-width: 8.5rem;
    max-width: 13rem;
}

.mk-expenses-filter-field > span {
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
}

.mk-expenses-toolbar-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    align-items: center;
}

.mk-expenses-tabs {
    margin: 0;
}

.mk-expenses-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.75rem;
}

.mk-expenses-stat {
    padding: 0.9rem 1rem;
    border-radius: 0.95rem;
    background: #fff;
    border: 1px solid rgba(40, 8, 82, 0.08);
    box-shadow: 0 8px 20px rgba(40, 8, 82, 0.04);
}

.mk-expenses-stat > span {
    display: block;
    font-size: 0.76rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.25rem;
}

.mk-expenses-stat > strong {
    display: block;
    font-size: 1.25rem;
    color: #280852;
    line-height: 1.2;
}

.mk-expenses-stat.is-primary {
    border-color: rgba(117, 31, 232, 0.22);
    background: #f8f5ff;
}

.mk-expenses-stat.is-primary > strong {
    color: #751fe8;
}

.mk-expenses-stat.is-alert {
    border-color: rgba(234, 88, 12, 0.28);
    background: #fff7ed;
}

.mk-expenses-tops {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.65rem;
}

.mk-expenses-top {
    padding: 0.75rem 0.9rem;
    border-radius: 0.85rem;
    background: #fff;
    border: 1px solid rgba(40, 8, 82, 0.08);
}

.mk-expenses-top > span {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 0.15rem;
}

.mk-expenses-top > strong {
    display: block;
    font-size: 0.95rem;
    color: #280852;
}

.mk-expenses-top > em {
    display: block;
    margin-top: 0.15rem;
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 700;
    color: #751fe8;
}

.mk-expenses-breakdown {
    padding: 0;
    overflow: hidden;
}

.mk-expenses-breakdown-block {
    padding: 1rem 1.15rem 1.15rem;
}

.mk-expenses-breakdown-block.has-divider {
    border-top: 1px solid rgba(40, 8, 82, 0.08);
}

.mk-expenses-breakdown-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.mk-expenses-breakdown-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #280852;
}

.mk-expenses-breakdown-head span {
    font-size: 0.8rem;
    font-weight: 700;
    color: #64748b;
}

.mk-expenses-entries {
    padding: 0;
    overflow: hidden;
}

.mk-expenses-entries-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem;
    border-bottom: 1px solid rgba(40, 8, 82, 0.08);
}

.mk-expenses-entries-head h3 {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #280852;
}

.mk-expenses-entries-head p {
    margin: 0;
    font-size: 0.82rem;
    color: #64748b;
}

.mk-expenses-pagination {
    padding: 0.85rem 1.15rem;
}

.mk-expenses-categories {
    padding: 0;
    overflow: hidden;
}

.mk-expenses-categories-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1.15rem;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.mk-expenses-categories-summary::-webkit-details-marker {
    display: none;
}

.mk-expenses-categories-summary::after {
    content: "▾";
    font-size: 1rem;
    color: #751fe8;
    transition: transform 0.2s ease;
}

.mk-expenses-categories[open] .mk-expenses-categories-summary::after {
    transform: rotate(180deg);
}

.mk-expenses-categories-summary > span {
    font-size: 1rem;
    font-weight: 800;
    color: #280852;
}

.mk-expenses-categories-summary > em {
    font-style: normal;
    font-size: 0.82rem;
    font-weight: 700;
    color: #64748b;
}

.mk-expenses-categories-body {
    padding: 0 1.15rem 1.15rem;
    border-top: 1px solid rgba(40, 8, 82, 0.08);
}

.mk-expenses-category-form {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(40, 8, 82, 0.08);
}

.mk-expenses-category-form h4 {
    margin: 0 0 0.75rem;
    font-size: 0.95rem;
    font-weight: 800;
    color: #280852;
}

.mk-expenses-category-form-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: end;
}

.mk-expenses-category-form-grid.has-brand {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.report-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem;
}

@media (max-width: 960px) {
    .mk-expenses-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mk-expenses-category-form-grid,
    .mk-expenses-category-form-grid.has-brand {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .mk-expenses-stats {
        grid-template-columns: 1fr;
    }
}

.mk-expense-modal-section + .mk-expense-modal-section {
    margin-top: 1rem;
}

.mk-expense-paid-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
}

.mk-expense-paid-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.85rem;
    border: 1px solid #ece8ff;
    border-radius: 0.85rem;
    background: #fff;
    font-size: 0.88rem;
    min-height: 2.85rem;
}

.nav-section-label {
    margin: 0.85rem 0.35rem 0.35rem;
    padding: 0 0.5rem;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.42);
}

body.rtl .nav-section-label {
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.72rem;
}

.admin-nav > .nav-section-label:first-child {
    margin-top: 0.15rem;
}

.mk-dashboard-stat-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 0.75rem;
}

.mk-dashboard-stat-row-secondary {
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}

.winkels-stat-soft {
    background: linear-gradient(180deg, #fff 0%, #f8f5ff 100%);
    border: 1px solid var(--winkels-border);
    box-shadow: none;
    color: var(--winkels-text);
}

.winkels-stat-soft::before,
.winkels-stat-soft::after {
    display: none;
}

.winkels-stat-soft:hover {
    transform: translateY(-2px);
    box-shadow: var(--winkels-shadow);
}

.winkels-stat-soft .value {
    color: var(--winkels-purple-dark);
    text-shadow: none;
}

.winkels-stat-soft .text-sm {
    color: var(--winkels-text-muted);
    opacity: 1;
}

.mk-dashboard-panels {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(15rem, 0.85fr);
    gap: 1rem;
    align-items: start;
}

.mk-dashboard-side {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mk-dashboard-attention {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mk-dashboard-attention-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--winkels-border);
    text-decoration: none;
    color: inherit;
    transition: color 0.15s, background 0.15s;
}

.mk-dashboard-attention-item:last-child {
    border-bottom: 0;
}

.mk-dashboard-attention-item:hover {
    color: var(--winkels-purple);
}

.mk-dashboard-attention-item strong {
    font-weight: 700;
    font-size: 0.92rem;
}

.mk-dashboard-attention-item.tone-danger strong { color: #dc2626; }
.mk-dashboard-attention-item.tone-warning strong { color: #d97706; }
.mk-dashboard-attention-item.tone-info strong { color: var(--winkels-purple); }

.mk-dashboard-links {
    display: grid;
    gap: 0.45rem;
}

.mk-dashboard-link {
    display: block;
    padding: 0.65rem 0.85rem;
    border-radius: 0.75rem;
    border: 1px solid var(--winkels-border);
    background: linear-gradient(180deg, #fff 0%, #faf9ff 100%);
    text-decoration: none;
    color: inherit;
    font-size: 0.88rem;
    font-weight: 600;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.mk-dashboard-link:hover {
    border-color: #d8ccf8;
    box-shadow: 0 4px 14px rgba(117, 31, 232, 0.08);
    transform: translateY(-1px);
}

.mk-dashboard-mini-stat {
    padding: 0.85rem 1rem;
    border-radius: 0.85rem;
    border: 1px solid var(--winkels-border);
    background: #fff;
}

.mk-spark {
    display: flex;
    align-items: flex-end;
    gap: 0.55rem;
    min-height: 6rem;
}

.mk-spark-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    min-width: 0;
}

.mk-spark-bar {
    width: 100%;
    max-width: 2.2rem;
    border-radius: 0.45rem 0.45rem 0.2rem 0.2rem;
    background: linear-gradient(180deg, #751fe8 0%, #280852 100%);
}

.mk-spark-col span {
    font-size: 0.72rem;
    color: var(--winkels-muted, #6b7280);
}

.mk-live-queue {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mk-live-queue-item {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--winkels-border);
    text-decoration: none;
    color: inherit;
}

.mk-live-queue li:last-child .mk-live-queue-item {
    border-bottom: 0;
}

.mk-live-queue-item:hover {
    color: var(--winkels-purple);
}

.mk-live-queue-item strong {
    display: block;
}

.mk-live-queue-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
}

@media (max-width: 960px) {
    .mk-dashboard-panels {
        grid-template-columns: 1fr;
    }
}

.mk-order-row-link {
    display: flex;
    text-decoration: none;
    color: inherit;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--winkels-border);
    transition: background 0.15s;
}

.mk-order-row-link:hover {
    background: var(--winkels-purple-50);
}

.winkels-card > .mk-order-row,
.winkels-card > .mk-order-row-link {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--winkels-border);
}

.winkels-card > .mk-order-row:last-child,
.winkels-card > .mk-order-row-link:last-child {
    border-bottom: none;
}

.mk-order-row.is-active {
    background: var(--winkels-purple-50);
}

.mk-address-picker {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.mk-address-picker-hint {
    margin: 0;
    font-size: 0.88rem;
    color: var(--winkels-text-muted, #6b7280);
}

.mk-address-picker-map {
    position: relative;
    border-radius: 0.9rem;
    overflow: hidden;
    background: #ebe6f5;
    border: 1px solid var(--winkels-border, #e5e7eb);
}

.mk-address-picker-map iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.mk-address-picker-detected {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.75rem;
    background: #f3f4f6;
}

.mk-address-picker-detected strong {
    font-size: 0.92rem;
}

.mk-address-picker-detected span {
    font-size: 0.82rem;
    color: var(--winkels-text-muted, #6b7280);
}

.mk-address-picker-fields {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.mk-address-picker-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.55rem;
}

.mk-address-picker-note {
    margin: 0;
}

@media (max-width: 640px) {
    .mk-order-side {
        width: 100%;
        justify-content: flex-start;
    }

    .mk-order-side .btn-winkels,
    .mk-order-side .btn-winkels-outline {
        flex: 1;
        text-align: center;
        justify-content: center;
    }

    .mk-active-order-banner {
        flex-direction: column;
        align-items: stretch;
    }

    .mk-active-order-banner .btn-winkels {
        width: 100%;
    }

    .mk-account-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.25rem;
        -webkit-overflow-scrolling: touch;
    }

    .mk-account-nav a {
        flex-shrink: 0;
    }

    .mk-account-nav-logout {
        margin-inline-start: 0;
    }

    .mk-account-nav-logout button {
        flex-shrink: 0;
    }
}

/* --- Merchant financial statements --------------------------------------- */
.fin-statement {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.fin-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem 0;
    font-size: 0.92rem;
}

.fin-row.fin-section {
    font-weight: 700;
    color: var(--winkels-text);
    margin-top: 0.25rem;
}

.fin-row.fin-subtotal {
    font-weight: 600;
    border-top: 1px dashed var(--winkels-border);
    padding-top: 0.5rem;
}

.fin-row.fin-total {
    font-weight: 800;
    font-size: 1.05rem;
    border-top: 2px solid var(--winkels-border-strong);
    padding-top: 0.75rem;
    margin-top: 0.25rem;
}

.fin-row.fin-indent {
    padding-inline-start: 1rem;
    font-size: 0.88rem;
}

.zone-leaflet-pin {
    background: var(--winkels-purple-600);
    color: #fff;
    border-radius: 999px;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.zone-leaflet-pin span {
    line-height: 1;
}

.zone-map .leaflet-container {
    height: 100%;
    width: 100%;
    border-radius: inherit;
    z-index: 1;
}

/* ——— Restaurant brand loader (orders / payment) ——— */
.rb-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    text-align: center;
}

.rb-logo {
    width: 5rem;
    height: 5rem;
    border-radius: 1.1rem;
    background: var(--winkels-purple-soft);
    border: 2px solid var(--winkels-border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(109, 40, 217, 0.12);
}

.rb-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rb-logo span {
    font-size: 1.75rem;
    font-weight: 800;
    color: var(--winkels-purple-700);
}

.rb-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--winkels-text);
    margin: 0;
}

.rb-message {
    font-size: 0.875rem;
    color: var(--winkels-text-muted);
    margin: 0.15rem 0 0;
}

.rb-dots {
    display: flex;
    gap: 0.35rem;
    margin-top: 0.25rem;
}

.rb-dots span {
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background: var(--winkels-purple-700);
    animation: rb-dot-pulse 1s ease-in-out infinite;
}

.rb-dots span:nth-child(2) { animation-delay: 0.15s; }
.rb-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes rb-dot-pulse {
    0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); }
    40% { opacity: 1; transform: scale(1); }
}

/* ——— Restaurant welcome video entry ——— */
html.rd-pending:has(.rd-overlay.is-active),
html.rd-pending:has(.rd-overlay.is-active) body {
    overflow: hidden;
}

.rd-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    pointer-events: none;
    visibility: hidden;
    background: #0a0514;
}

.rd-overlay.is-active {
    display: block;
    pointer-events: auto;
    visibility: visible;
}

.rd-overlay.is-opening {
    pointer-events: none;
}

.rd-welcome-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.rd-welcome-shade {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(10, 5, 20, 0.15) 0%, rgba(10, 5, 20, 0.45) 55%, rgba(10, 5, 20, 0.72) 100%);
    opacity: 0.55;
    transition: opacity 0.5s ease;
}

.rd-overlay.is-name-visible .rd-welcome-shade {
    opacity: 0.82;
}

.rd-welcome-name-wrap {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 1.5rem;
    text-align: center;
    pointer-events: none;
}

.rd-welcome-logo {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 1.15rem;
    object-fit: cover;
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        0 0 0 3px rgba(255, 255, 255, 0.22);
    opacity: 0;
    transform: translateY(1.25rem) scale(0.92);
    transition:
        opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.rd-welcome-name {
    margin: 0;
    max-width: min(92vw, 28rem);
    font-family: 'El Messiri', 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    font-size: clamp(2rem, 9vw, 3.75rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.01em;
    color: #fff;
    text-shadow:
        0 2px 24px rgba(0, 0, 0, 0.55),
        0 0 48px rgba(117, 31, 232, 0.35);
    opacity: 0;
    transform: translateY(1.5rem) scale(0.94);
    filter: blur(6px);
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.85s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.75s ease;
}

body.ltr .rd-welcome-name {
    font-family: 'Cormorant Garamond', 'El Messiri', Georgia, 'Times New Roman', serif;
    letter-spacing: 0.02em;
}

.rd-overlay.is-name-visible .rd-welcome-logo,
.rd-overlay.is-name-visible .rd-welcome-name {
    opacity: 1;
    transform: none;
    filter: none;
}

.rd-overlay.is-opening {
    pointer-events: none;
    animation: rd-overlay-out 0.45s ease forwards;
}

.rd-overlay.is-opening .rd-welcome-video {
    transform: scale(1.04);
    transition: transform 0.45s ease;
}

@keyframes rd-overlay-out {
    to { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
    .rd-welcome-video { display: none; }
    .rd-welcome-name,
    .rd-welcome-logo {
        transition: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ==========================================================================
   Food First model 4 — 100% (Talabat-style layout, purple brand)
   ========================================================================== */

.mk-page--food-first {
    --mk-food-accent: var(--winkels-purple-600);
    --mk-food-accent-dark: var(--winkels-purple-700);
    --mk-food-accent-soft: var(--winkels-purple-50);
    --mk-cat-accent: #ff5722;
    --mk-cat-size: 4.5rem;
    --mk-card-h: clamp(11.5rem, 38vh, 14rem);
    background: #faf8fe;
}

.mk-page--food-first .mk-header {
    background: linear-gradient(165deg, var(--winkels-purple-950) 0%, var(--winkels-purple-800) 55%, var(--winkels-purple-700) 100%);
    border-bottom: none;
    box-shadow: 0 8px 28px rgba(40, 8, 82, 0.22);
}

.mk-header-panel {
    max-width: 1180px;
    margin: 0 auto;
    padding: calc(0.55rem + env(safe-area-inset-top, 0px)) 0.85rem 0.65rem;
}

.mk-header-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "brand location actions"
        "search search search";
    gap: 0.5rem 0.55rem;
    align-items: center;
}

.mk-header-grid:not(:has(.mk-header-search)) {
    grid-template-areas: "brand location actions";
}

.mk-header-brand-wrap {
    grid-area: brand;
    min-width: 0;
}

.mk-header--food .mk-header-brand.brand-logo {
    flex-shrink: 0;
    min-width: 0;
}

.mk-header-loc-chip {
    grid-area: location;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: 0;
    max-width: 100%;
    padding: 0.42rem 0.7rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--winkels-purple-950);
    background: var(--winkels-brand-yellow);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s var(--winkels-ease), box-shadow 0.18s var(--winkels-ease);
}

.mk-header-loc-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}

.mk-header-loc-text {
    font-size: 0.82rem;
    font-weight: 800;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.mk-header-loc-pin {
    flex-shrink: 0;
    color: var(--winkels-purple-800);
}

.mk-header-loc-chevron {
    flex-shrink: 0;
    color: var(--winkels-purple-900);
}

.mk-header-actions {
    grid-area: actions;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
    min-width: 0;
}

.mk-header-links {
    display: none;
    align-items: center;
    gap: 0.15rem;
    padding-inline-end: 0.35rem;
    margin-inline-end: 0.15rem;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.2);
}

.mk-header-links a {
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    white-space: nowrap;
}

.mk-header-links a:hover {
    background: rgba(255, 255, 255, 0.14);
}

.mk-header-links a.is-on {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.brand-logo--on-dark .brand-logo-text {
    color: #fff;
}

.brand-logo--on-dark img {
    filter: brightness(0) invert(1);
}

.brand-logo--wordmark img {
    filter: none;
}

/* Mall of Winkels wordmark — marketplace header */
.mk-header--food .brand-logo-mow {
    flex-shrink: 0;
    padding: 0.2rem 0.45rem;
    background: rgba(255, 255, 255, 0.97);
    border-radius: 0.55rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.18s var(--winkels-ease), box-shadow 0.18s var(--winkels-ease);
}

.mk-header--food .brand-logo-mow:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.mk-header--food .brand-logo-mow img {
    display: block;
    height: 1.7rem;
    width: auto;
    max-width: min(9.25rem, 36vw);
    border-radius: 0;
    box-shadow: none;
}

.mk-lang-pill {
    display: inline-flex;
    padding: 0.15rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.mk-lang-pill a {
    min-width: 1.65rem;
    padding: 0.25rem 0.4rem;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.88);
    text-decoration: none;
    text-align: center;
}

.mk-lang-pill a.is-on {
    background: #fff;
    color: var(--winkels-purple-800);
}

.mk-header-action-btn {
    display: inline-grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    color: #fff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
}

.mk-header-action-btn svg {
    color: #fff;
}

.mk-header-action-btn .mk-avatar {
    width: 2rem;
    height: 2rem;
    font-size: 0.85rem;
}

.mk-header-search {
    grid-area: search;
    min-width: 0;
}

.mk-header-search-form-wrap {
    width: 100%;
}

.mk-header-search-form {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 2.75rem;
    padding: 0 0.85rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 6px 20px rgba(40, 8, 82, 0.18);
}

.mk-header-search-icon {
    display: grid;
    place-items: center;
    color: var(--winkels-purple-600);
    flex-shrink: 0;
}

.mk-header-search-input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--winkels-text);
    outline: none;
}

.mk-header-search-input::placeholder {
    color: var(--winkels-text-muted);
    font-weight: 500;
}

.mk-header-accent {
    height: 3px;
    background: linear-gradient(90deg, var(--winkels-brand-yellow) 0%, var(--winkels-gold-light) 50%, var(--winkels-brand-yellow) 100%);
}

.mk-main--food {
    padding-bottom: 5.25rem;
}

/* Legacy aliases — keep older markup working if referenced elsewhere */
.mk-header--food .mk-header-food {
    display: none;
}

.mk-header-login {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--winkels-text-muted);
    text-decoration: none;
    white-space: nowrap;
}

.mk-header-loc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    min-width: 0;
    padding: 0.35rem 0.5rem;
    border-radius: 999px;
    text-decoration: none;
    color: var(--winkels-text);
}

.mk-header--food .brand-logo-text {
    font-weight: 800;
    color: var(--winkels-purple-700);
}

/* Search — full-width Talabat bar */
.mk-page--food-first .mk-search-top--food {
    margin-bottom: 0.85rem;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
}

.mk-page--food-first .mk-search-top-form {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 3rem;
    padding: 0 1rem;
    border-radius: 999px;
    border: 1px solid var(--winkels-border);
    background: #fff;
    box-shadow: 0 2px 10px rgba(40, 8, 82, 0.06);
}

.mk-page--food-first .mk-search-top-leading {
    display: grid;
    place-items: center;
    color: var(--winkels-text-muted);
    flex-shrink: 0;
}

.mk-page--food-first .mk-search-top-input {
    flex: 1;
    min-width: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    padding: 0;
    font-size: 0.9rem;
    min-height: 0;
    height: auto;
}

.mk-page--food-first .mk-search-top-input:focus {
    outline: none;
    box-shadow: none;
}

.mk-page--food-first .mk-nav-cta,
.mk-page--food-first .btn-food-cta {
    background: var(--winkels-gradient);
    color: #fff;
    box-shadow: var(--winkels-glow);
}

/* Slider + banners */
.mk-page--food-first .mk-slider-wrap {
    margin-bottom: 0.9rem;
}

.mk-page--food-first .mk-slider-viewport {
    border-radius: 1.1rem;
    box-shadow: var(--winkels-shadow);
}

.mk-page--food-first .mk-slider-link {
    aspect-ratio: 2 / 1;
}

.mk-page--food-first .mk-banners--food {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin-bottom: 0.9rem;
    scrollbar-width: none;
}

.mk-page--food-first .mk-banners--food::-webkit-scrollbar {
    display: none;
}

.mk-page--food-first .mk-banners--food .mk-banner {
    flex: 0 0 min(19rem, 84vw);
    min-height: 7.5rem;
    border-radius: 1rem;
}

/* Categories — Talabat-style circular food photos */
.mk-cat-scroll {
    margin-bottom: 0.85rem;
}

.mk-cat-scroll-track {
    display: flex;
    gap: 0.85rem;
    overflow-x: auto;
    padding: 0.1rem 0.15rem 0.5rem;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.mk-cat-scroll-track::-webkit-scrollbar {
    display: none;
}

.mk-cat-tile {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.45rem;
    width: calc(var(--mk-cat-size) + 0.25rem);
    text-decoration: none;
    color: #6b7280;
    scroll-snap-align: start;
}

.mk-cat-tile-img-wrap {
    display: grid;
    place-items: center;
    width: var(--mk-cat-size);
    height: var(--mk-cat-size);
    border-radius: 50%;
    border: 2px solid #e5e7eb;
    background: #fff;
    overflow: hidden;
    transition: border-color 0.2s var(--winkels-ease);
}

.mk-cat-tile.is-on .mk-cat-tile-img-wrap {
    border-color: var(--mk-cat-accent);
    border-width: 2.5px;
}

.mk-cat-tile--all .mk-cat-tile-img-wrap {
    padding: 0.35rem;
    background: #fff;
}

.mk-cat-tile--all.is-on .mk-cat-tile-img-wrap {
    border-color: var(--mk-cat-accent);
}

.mk-cat-tile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.mk-cat-tile--all .mk-cat-tile-img {
    border-radius: 0;
    object-fit: contain;
}

.mk-cat-tile-label {
    font-size: 0.74rem;
    font-weight: 700;
    text-align: center;
    width: 100%;
    line-height: 1.2;
    white-space: nowrap;
}

.mk-cat-tile.is-on {
    color: var(--mk-cat-accent);
}

.mk-cat-tile.is-on .mk-cat-tile-label {
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px;
}

/* Filters + grid */
.mk-page--food-first .mk-filters--food {
    margin-bottom: 0.85rem;
}

.mk-page--food-first .mk-filters--food .mk-chip.is-on {
    background: var(--winkels-gradient);
}

.mk-page--food-first .mk-grid--food {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}

.mk-page--food-first .mk-rail--food > .mk-card-shell {
    flex: 0 0 min(22rem, 92vw);
}

/* Restaurant card — model 4 */
.mk-card--food {
    display: grid;
    grid-template-columns: 3fr 2fr;
    direction: ltr;
    height: var(--mk-card-h);
    border-radius: 1.15rem;
    border: 1px solid var(--winkels-border);
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 18px rgba(40, 8, 82, 0.09);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s var(--winkels-ease), box-shadow 0.2s;
}

.mk-card--food:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(117, 31, 232, 0.14);
}

.mk-card--food .mk-card-cover {
    position: relative;
    background: var(--winkels-gradient-vivid);
    overflow: hidden;
}

.mk-card--food .mk-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mk-card--food .mk-card-cover img.is-logo-cover {
    object-fit: contain;
    padding: 14%;
    background: var(--winkels-purple-soft, #f3e8ff);
}

.mk-card-cover-fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-size: 2.75rem;
    font-weight: 800;
    color: #fff;
    background: var(--winkels-gradient);
}

.mk-card--food .mk-card-badges {
    position: absolute;
    top: 0.55rem;
    inset-inline-start: 0.55rem;
    padding: 0;
}

.mk-card--food .mk-card-panel {
    direction: rtl;
    display: flex;
    flex-direction: column;
    padding: 0.65rem 0.7rem 0.7rem;
    gap: 0.22rem;
    background: #fff;
}

.mk-card--food .mk-card-panel-head {
    direction: ltr;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.mk-card-fav {
    font-size: 1.05rem;
    color: var(--winkels-purple-300);
    line-height: 1;
}

.mk-card-fav.is-on {
    color: var(--winkels-purple-600);
}

.mk-card--food .mk-card-logo {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.55rem;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--winkels-purple-soft);
    box-shadow: 0 1px 4px rgba(40, 8, 82, 0.1);
}

.mk-card--food .mk-card-name {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mk-card-cuisine-pill {
    display: inline-block;
    align-self: flex-start;
    padding: 0.12rem 0.45rem;
    border-radius: 0.35rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--winkels-text-muted);
    background: #f3f4f6;
}

.mk-card-eta {
    display: inline-flex;
    align-items: center;
    gap: 0.28rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--winkels-purple-700);
}

.mk-card-eta-svg {
    color: var(--winkels-purple-600);
}

.mk-card--food .mk-card-rating {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.75rem;
    font-weight: 700;
}

.mk-card-star {
    color: #f59e0b;
}

.mk-card--food .mk-rating-count {
    font-size: 0.7rem;
    color: var(--winkels-text-muted);
    font-weight: 500;
}

.mk-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: auto;
    padding: 0.5rem 0.75rem;
    border-radius: 0.6rem;
    background: var(--winkels-gradient);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 800;
    box-shadow: 0 4px 12px rgba(117, 31, 232, 0.28);
}

.mk-card--food.is-closed {
    opacity: 0.82;
}

.mk-card--food.is-closed .mk-card-cta {
    background: #78716c;
    box-shadow: none;
}

.mk-page--food-first .mk-slider-dot.is-on {
    background: var(--winkels-purple-700);
}

.mk-page--food-first .mk-grid-banner-break.mk-banners--food {
    display: flex;
    grid-column: 1 / -1;
    margin-block: 0.35rem 0.65rem;
}

.mk-page--food-first .mk-grid-banner-break--prominent {
    display: block;
    grid-column: 1 / -1;
    margin-block: 1rem 1.35rem;
}

.mk-page--food-first .mk-grid-banner-break--prominent .mk-banner--prominent {
    min-height: clamp(9.5rem, 22vw, 11.5rem);
    border-radius: 1.15rem;
    box-shadow:
        0 14px 36px rgba(91, 33, 182, 0.24),
        0 6px 16px rgba(17, 24, 39, 0.1);
    border: 2px solid rgba(117, 31, 232, 0.42);
    outline: 1px solid rgba(255, 255, 255, 0.35);
    outline-offset: -3px;
}

.mk-page--food-first .mk-grid-banner-break--prominent .mk-banner--prominent .mk-banner-text {
    min-height: clamp(9.5rem, 22vw, 11.5rem);
    padding: 1.55rem 1.75rem;
    background: linear-gradient(to top, rgba(27, 8, 60, 0.88) 0%, rgba(27, 8, 60, 0.35) 55%, transparent 100%);
}

.mk-page--food-first .mk-grid-banner-break--prominent .mk-banner--prominent .mk-banner-title {
    font-size: clamp(1.15rem, 2.6vw, 1.45rem);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.mk-page--food-first .mk-grid-banner-break--prominent .mk-banner--prominent .mk-banner-sub {
    font-size: clamp(0.88rem, 2vw, 1rem);
    color: rgba(255, 255, 255, 0.92);
}

.mk-page--food-first .mk-grid-banner-break--prominent .mk-banner--prominent .mk-banner-img {
    transform: scale(1.02);
}

.mk-page--food-first .mk-section-title {
    font-size: 1.05rem;
    margin-bottom: 0.65rem;
}

.mk-page--food-first .mk-section-count {
    background: var(--winkels-purple-soft);
    color: var(--winkels-purple-700);
}

.mk-page--food-first .mk-filter-sort {
    font-size: 0.82rem;
}

.mk-page--food-first .mk-rail--food {
    gap: 0.65rem;
    padding-bottom: 0.45rem;
}

.mk-page--food-first .mk-rail--food > .mk-card-shell {
    scroll-snap-align: start;
}

.mk-card--food .mk-card-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.mk-card--food .mk-card-flag,
.mk-card--food .mk-card-closed {
    font-size: 0.62rem;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
}

.mk-card--food .mk-card-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mk-card--food.is-closed .mk-card-cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.35);
}

/* Bottom navigation */
.mk-bottom-nav {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.15rem;
    padding: 0.45rem 0.35rem calc(0.45rem + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.96);
    border-top: 1px solid var(--winkels-border);
    backdrop-filter: blur(12px);
    box-shadow: 0 -4px 20px rgba(40, 8, 82, 0.06);
}

.mk-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
    padding: 0.2rem 0.1rem;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--winkels-text-muted);
    text-decoration: none;
    text-align: center;
    line-height: 1.15;
}

.mk-bottom-nav-item.is-on {
    color: var(--winkels-purple-700);
}

.mk-bottom-nav-icon {
    font-size: 1.15rem;
    line-height: 1;
}

.mk-footer--food {
    display: none;
}

.mk-merchant-cta {
    margin: 0 auto 1rem;
    max-width: var(--mk-content-max, 72rem);
    padding: 0 1rem;
}

.mk-merchant-cta-inner {
    align-items: center;
    background: linear-gradient(135deg, var(--winkels-purple-900) 0%, var(--winkels-brand-purple) 100%);
    border-radius: 1rem;
    color: #fff;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.25rem;
    justify-content: space-between;
    padding: 1rem 1.25rem;
}

.mk-merchant-cta-copy {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    max-width: 36rem;
}

.mk-merchant-cta-copy strong {
    font-size: 1.05rem;
    font-weight: 700;
    font-family: var(--winkels-font-display);
}

.mk-merchant-cta-copy span {
    font-size: 0.875rem;
    line-height: 1.45;
    opacity: 0.92;
}

.mk-merchant-cta-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .mk-merchant-cta-inner {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }

    .mk-merchant-cta-btn {
        width: 100%;
        text-align: center;
    }
}

/* Storefront purple Food First */
.sf-food-first {
    background: var(--winkels-bg);
    min-height: 100vh;
}

.sf-food-first .sf-cover {
    height: 11rem;
    background: var(--winkels-gradient-deep);
}

.sf-food-first .sf-cover::after {
    background:
        radial-gradient(closest-side at 85% 10%, rgba(167, 139, 250, 0.35), transparent),
        linear-gradient(180deg, rgba(40, 8, 82, 0.55) 0%, rgba(40, 8, 82, 0.08) 45%, rgba(40, 8, 82, 0.35) 100%);
}

.sf-food-first .sf-profile {
    border-color: var(--winkels-border);
    box-shadow: var(--winkels-shadow-lg);
}

.sf-food-first .sf-avatar {
    background: var(--winkels-gradient-vivid);
    box-shadow: var(--winkels-glow), 0 0 0 3px #fff;
}

.sf-food-first .sf-catnav {
    background: rgba(246, 244, 255, 0.92);
    border-bottom-color: var(--winkels-border);
}

.sf-food-first .sf-section-title {
    color: var(--winkels-purple-900);
}

.sf-food-first .sf-section-count {
    background: var(--winkels-purple-100);
    color: var(--winkels-purple-700);
}

.sf-food-first .sf-row-add,
.sf-food-first .btn-winkels {
    background: var(--winkels-gradient);
}

.sf-food-first .sf-cat.is-active {
    background: var(--winkels-gradient);
    box-shadow: var(--winkels-glow);
}

@media (min-width: 768px) {
    .mk-header-panel {
        padding-inline: 1.25rem;
        padding-block-end: 0.75rem;
    }

    .mk-header-grid {
        grid-template-columns: auto minmax(7rem, 12rem) minmax(0, 1fr) auto;
        grid-template-areas: "brand location search actions";
        gap: 0.65rem 0.75rem;
    }

    .mk-header-grid:not(:has(.mk-header-search)) {
        grid-template-columns: auto minmax(7rem, 14rem) 1fr auto;
        grid-template-areas: "brand location . actions";
    }

    .mk-header-loc-chip {
        justify-self: start;
    }

    .mk-header-loc-text {
        max-width: 9rem;
    }

    .mk-header-links {
        display: inline-flex;
    }

    .mk-header--food .brand-logo-mow img {
        height: 2rem;
        max-width: 10.5rem;
    }

    .mk-bottom-nav {
        display: none;
    }

    .mk-main--food {
        padding-bottom: 3rem;
    }

    .mk-footer--food {
        display: block;
    }

    /* Desktop: use full marketplace width, not a phone column */
    .mk-page--food-first .mk-main {
        max-width: 1180px;
        padding-inline: 1.25rem;
    }

    .mk-page--food-first .mk-grid--food {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }

    .mk-page--food-first .mk-slider-link {
        aspect-ratio: 2.8 / 1;
    }

    .mk-page--food-first {
        --mk-cat-size: 4.75rem;
        --mk-card-h: 11rem;
    }
}

@media (min-width: 1100px) {
    .mk-page--food-first .mk-grid--food {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.15rem;
    }

    .mk-page--food-first {
        --mk-card-h: 12rem;
    }
}

@media (max-width: 767px) {
    .mk-header-grid {
        gap: 0.4rem 0.45rem;
    }

    .mk-header--food .mk-header-brand.brand-logo .brand-logo-text {
        display: none;
    }

    .mk-header-loc-chip {
        padding-inline: 0.5rem;
    }

    .mk-header-loc-text {
        max-width: min(7.5rem, 28vw);
    }

    .mk-lang-pill a {
        min-width: 1.45rem;
        padding-inline: 0.35rem;
    }

    .mk-header-action-btn {
        width: 2.15rem;
        height: 2.15rem;
    }

    .mk-header-search-form {
        min-height: 2.65rem;
    }
}

/* ——— Scroll to top ——— */
.scroll-top-btn {
    position: fixed;
    inset-inline-end: 1rem;
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
    z-index: 48;
    width: 2.85rem;
    height: 2.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 9999px;
    background: var(--winkels-gradient-vivid);
    color: #fff;
    box-shadow: var(--winkels-glow-lg), var(--winkels-inset-top);
    cursor: pointer;
    transition: transform 0.25s var(--winkels-ease), box-shadow 0.25s var(--winkels-ease);
}

.scroll-top-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--winkels-glow-lg), 0 8px 24px rgba(117, 31, 232, 0.35);
}

.scroll-top-btn:active {
    transform: translateY(0);
}

.scroll-top-btn--storefront {
    bottom: calc(6.25rem + env(safe-area-inset-bottom, 0px));
}

.scroll-top-enter { transition: opacity 0.25s var(--winkels-ease), transform 0.25s var(--winkels-ease); }
.scroll-top-enter-start { opacity: 0; transform: translateY(0.75rem) scale(0.92); }
.scroll-top-enter-end { opacity: 1; transform: translateY(0) scale(1); }
.scroll-top-leave { transition: opacity 0.2s var(--winkels-ease), transform 0.2s var(--winkels-ease); }
.scroll-top-leave-start { opacity: 1; transform: translateY(0) scale(1); }
.scroll-top-leave-end { opacity: 0; transform: translateY(0.75rem) scale(0.92); }

@media (min-width: 768px) {
    .scroll-top-btn {
        inset-inline-end: 1.35rem;
        bottom: calc(1.35rem + env(safe-area-inset-bottom, 0px));
    }

    .scroll-top-btn--storefront {
        bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ==========================================================================
   Yellow Pop — customer theme (proposal 4)
   ========================================================================== */

.mk-theme-yellow-pop.mk-page--food-first {
    --mk-food-accent: var(--winkels-brand-purple);
    --mk-food-accent-dark: var(--winkels-purple-800);
    --mk-food-accent-soft: #fffef5;
    --mk-cat-accent: var(--winkels-brand-purple);
    background: #fff;
}

.mk-theme-yellow-pop .mk-header {
    background:
        radial-gradient(120% 80% at 50% -20%, rgba(255, 255, 255, 0.45), transparent 55%),
        linear-gradient(180deg, var(--winkels-brand-yellow) 0%, var(--winkels-brand-yellow) 72%, #fff 72%, #fff 100%);
    box-shadow: none;
}

.mk-theme-yellow-pop .mk-header-accent {
    display: none;
}

.mk-theme-yellow-pop .brand-logo-mow {
    background: transparent;
    box-shadow: none;
    padding: 0.15rem 0;
}

.mk-theme-yellow-pop .brand-logo-mow img {
    max-width: min(10.5rem, 40vw);
}

.mk-theme-yellow-pop .mk-header-loc-chip {
    background: rgba(255, 255, 255, 0.92);
    color: var(--winkels-brand-purple);
    box-shadow: 0 2px 8px rgba(117, 31, 232, 0.08);
}

.mk-theme-yellow-pop .mk-header-loc-pin,
.mk-theme-yellow-pop .mk-header-loc-chevron {
    color: var(--winkels-brand-purple);
}

.mk-theme-yellow-pop .mk-header-links {
    border-inline-end-color: rgba(117, 31, 232, 0.12);
}

.mk-theme-yellow-pop .mk-header-links a {
    color: var(--winkels-purple-800);
}

.mk-theme-yellow-pop .mk-header-links a.is-on {
    background: rgba(117, 31, 232, 0.1);
    color: var(--winkels-brand-purple);
}

.mk-theme-yellow-pop .mk-lang-pill {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(117, 31, 232, 0.12);
}

.mk-theme-yellow-pop .mk-lang-pill a {
    color: var(--winkels-purple-700);
}

.mk-theme-yellow-pop .mk-lang-pill a.is-on {
    background: var(--winkels-brand-purple);
    color: #fff;
}

.mk-theme-yellow-pop .mk-header-action-btn {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(117, 31, 232, 0.14);
    color: var(--winkels-brand-purple);
}

.mk-theme-yellow-pop .mk-header-action-btn svg {
    color: var(--winkels-brand-purple);
}

.mk-theme-yellow-pop .mk-header-search-form {
    background: #fff;
    border: 1.5px solid rgba(117, 31, 232, 0.12);
    box-shadow: 0 4px 16px rgba(117, 31, 232, 0.08);
}

.mk-theme-yellow-pop .mk-header-search-icon {
    color: var(--winkels-brand-purple);
}

.mk-theme-yellow-pop .mk-merchant-cta-inner {
    background: #fff;
    border: 2px solid var(--winkels-brand-yellow);
    color: var(--winkels-text);
    box-shadow: 0 4px 18px rgba(117, 31, 232, 0.06);
}

.mk-theme-yellow-pop .mk-merchant-cta-copy strong {
    color: var(--winkels-brand-purple);
}

.mk-theme-yellow-pop .mk-merchant-cta-btn {
    background: var(--winkels-brand-purple) !important;
    color: #fff !important;
}

.mk-theme-yellow-pop .mk-cat-tile-img-wrap {
    border: 3px solid var(--winkels-brand-yellow);
    box-shadow: 0 2px 8px rgba(231, 224, 111, 0.35);
}

.mk-theme-yellow-pop .mk-cat-tile.is-on .mk-cat-tile-img-wrap {
    border-color: var(--winkels-brand-purple);
    box-shadow: 0 0 0 3px rgba(231, 224, 111, 0.65);
}

.mk-theme-yellow-pop .mk-cat-tile.is-on {
    color: var(--winkels-brand-purple);
}

.mk-theme-yellow-pop .mk-cat-tile-label {
    font-family: var(--winkels-font-display);
}

.mk-theme-yellow-pop .mk-filters--food .mk-chip.is-on {
    background: var(--winkels-brand-purple);
    color: #fff;
}

.mk-theme-yellow-pop .mk-card--food .mk-card-name {
    color: var(--winkels-brand-purple);
    font-family: var(--winkels-font-display);
}

.mk-theme-yellow-pop .mk-card-star {
    color: var(--winkels-brand-yellow);
    filter: drop-shadow(0 0 1px var(--winkels-brand-purple));
}

.mk-theme-yellow-pop .mk-card-cta {
    background: var(--winkels-brand-purple);
}

.mk-theme-yellow-pop .mk-section-title {
    font-family: var(--winkels-font-display);
    color: var(--winkels-brand-purple);
}

.mk-theme-yellow-pop .mk-bottom-nav {
    inset-inline: 0.65rem;
    bottom: calc(0.35rem + env(safe-area-inset-bottom, 0px));
    width: auto;
    border-radius: 1.35rem;
    background: var(--winkels-brand-yellow);
    border: none;
    box-shadow: 0 8px 28px rgba(117, 31, 232, 0.14);
    padding: 0.55rem 0.4rem 0.5rem;
}

.mk-theme-yellow-pop .mk-bottom-nav-item {
    color: var(--winkels-purple-800);
    font-family: var(--winkels-font-display);
    font-size: 0.58rem;
}

.mk-theme-yellow-pop .mk-bottom-nav-icon-wrap {
    display: grid;
    place-items: center;
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 999px;
    transition: background 0.2s var(--winkels-ease), color 0.2s var(--winkels-ease);
}

.mk-theme-yellow-pop .mk-bottom-nav-item.is-on {
    color: #fff;
}

.mk-theme-yellow-pop .mk-bottom-nav-item.is-on .mk-bottom-nav-icon-wrap {
    background: var(--winkels-brand-purple);
    color: #fff;
    box-shadow: 0 4px 12px rgba(117, 31, 232, 0.35);
}

.mk-theme-yellow-pop .mk-slider-dot.is-on {
    background: var(--winkels-brand-purple);
}

.mk-theme-yellow-pop .scroll-top-btn {
    background: var(--winkels-brand-purple);
}

@media (min-width: 768px) {
    .mk-theme-yellow-pop .mk-header {
        background:
            radial-gradient(100% 70% at 50% -30%, rgba(255, 255, 255, 0.5), transparent 50%),
            linear-gradient(180deg, var(--winkels-brand-yellow) 0%, var(--winkels-brand-yellow) 68%, #fff 68%, #fff 100%);
    }

    .mk-theme-yellow-pop .mk-bottom-nav {
        display: none;
    }

    .mk-theme-yellow-pop .mk-main--food {
        padding-bottom: 3rem;
    }
}

/* ——— Admin + Super Admin: brand colors, quiet ———
   Purple does the work. Yellow is a thin accent only. */
.admin-theme-yellow-pop {
    --yp-yellow: #eee24b;
    --yp-purple: #4a25a9;
    --yp-ink: #3a1a86;
    --winkels-brand-purple: #4a25a9;
    --winkels-brand-yellow: #eee24b;
    --winkels-purple: #4a25a9;
    --winkels-purple-deep: #3a1a86;
    --winkels-purple-dark: #3a1a86;
    --winkels-purple-50: #f4f0ff;
    --winkels-purple-100: #ebe4ff;
    --winkels-purple-500: #4a25a9;
    --winkels-purple-600: #4a25a9;
    --winkels-purple-700: #3a1a86;
    --winkels-gold: #eee24b;
    --winkels-bg: #faf9f6;
    --winkels-text: #2a2540;
    --winkels-text-muted: #6d6a80;
    --winkels-border: rgba(74, 37, 169, 0.12);
    --winkels-gradient: #4a25a9;
    --winkels-gradient-vivid: #4a25a9;
    --winkels-gradient-deep: #4a25a9;
}

body:has(.admin-theme-yellow-pop) {
    background: #faf9f4;
}

.admin-theme-yellow-pop.admin-layout {
    padding: 0.85rem;
    gap: 0.85rem;
    background: #faf9f4;
}

.admin-theme-yellow-pop .winkels-sidebar {
    height: calc(100vh - 1.7rem);
    border-radius: 1.4rem;
    background: #fff;
    color: #3a1a86;
    border: 2px solid #eee24b;
    box-shadow: 0 18px 46px rgba(74, 37, 169, 0.26);
    overflow: hidden;
}

.admin-theme-yellow-pop .winkels-sidebar::before {
    background: linear-gradient(180deg, rgba(74, 37, 169, 0.06) 0%, transparent 42%);
}

.admin-theme-yellow-pop .winkels-sidebar::after {
    display: none;
}

.admin-theme-yellow-pop .sidebar-brand {
    background: #fff;
    border-bottom: 1px solid rgba(74, 37, 169, 0.1);
    color: #3a1a86;
}

.admin-theme-yellow-pop .sidebar-brand::after {
    display: none;
}

.admin-theme-yellow-pop .sidebar-panel-title {
    color: #4a25a9;
    font-weight: 700;
    opacity: 1;
}

.admin-theme-yellow-pop .sidebar-merchant-profile {
    background: rgba(74, 37, 169, 0.04);
    border-bottom-color: rgba(74, 37, 169, 0.1);
}

.admin-theme-yellow-pop .sidebar-merchant-profile__name {
    color: #3a1a86;
}

.admin-theme-yellow-pop .sidebar-brand-icon {
    border-color: rgba(74, 37, 169, 0.18);
    background: #fff;
}

.admin-theme-yellow-pop .sidebar-brand-icon:hover {
    border-color: rgba(74, 37, 169, 0.35);
    background: rgba(74, 37, 169, 0.04);
}

.admin-theme-yellow-pop .sidebar-brand-icon.is-active {
    border-color: #4a25a9;
    box-shadow: 0 0 0 1px rgba(74, 37, 169, 0.2);
    background: rgba(238, 226, 75, 0.28);
}

.admin-theme-yellow-pop .sidebar-brand-icon__fallback,
.admin-theme-yellow-pop .sidebar-brand-icon__all {
    color: #4a25a9;
}

.admin-theme-yellow-pop .sidebar-scroll {
    scrollbar-color: rgba(74, 37, 169, 0.28) transparent;
}

.admin-theme-yellow-pop .sidebar-scroll::-webkit-scrollbar-thumb {
    background: rgba(74, 37, 169, 0.28);
}

.admin-theme-yellow-pop .sidebar-scroll::before {
    background: linear-gradient(180deg, #fff, transparent);
}

.admin-theme-yellow-pop .sidebar-scroll::after {
    background: linear-gradient(0deg, #fff, transparent);
}

.admin-theme-yellow-pop .nav-section-label {
    color: rgba(58, 26, 134, 0.45);
}

.admin-theme-yellow-pop .nav-search input,
.admin-theme-yellow-pop .nav-search input:focus {
    background: #faf9f6;
    border-color: rgba(74, 37, 169, 0.16);
    color: #3a1a86;
}

.admin-theme-yellow-pop .nav-search input::placeholder {
    color: #8b8799;
}

.admin-theme-yellow-pop .winkels-sidebar a {
    color: #3a1a86;
}

.admin-theme-yellow-pop .winkels-sidebar a:hover {
    background: rgba(74, 37, 169, 0.08);
    color: #3a1a86;
    border-color: transparent;
    box-shadow: none;
}

.admin-theme-yellow-pop .winkels-sidebar a.active {
    background: #4a25a9;
    color: #fff;
    font-weight: 800;
    border-color: transparent;
    box-shadow: none;
}

.admin-theme-yellow-pop .winkels-sidebar a.active::before {
    display: none;
}

.admin-theme-yellow-pop .nav-group-title,
.admin-theme-yellow-pop .nav-group-title:hover,
.admin-theme-yellow-pop .nav-group[open] > .nav-group-title,
.admin-theme-yellow-pop .nav-group.is-current > .nav-group-title {
    color: #4a25a9;
}

.admin-theme-yellow-pop .nav-group-title:hover {
    background: rgba(74, 37, 169, 0.08);
}

.admin-theme-yellow-pop .nav-group.is-current:not([open]) > .nav-group-title {
    background: rgba(74, 37, 169, 0.1);
    box-shadow: none;
    color: #3a1a86;
}

.admin-theme-yellow-pop .nav-group-links {
    border-inline-start-color: rgba(74, 37, 169, 0.18);
    background: none;
}

.admin-theme-yellow-pop .sidebar-foot {
    background: #fff;
    border-top: 1px solid rgba(74, 37, 169, 0.1);
}

.admin-theme-yellow-pop .sidebar-logout-btn {
    background: #fff;
    color: #4a25a9;
    border-color: #4a25a9;
    font-weight: 700;
}

.admin-theme-yellow-pop .sidebar-logout-btn:hover {
    background: #f6f5f9;
    color: #3a1a86;
    border-color: #4a25a9;
    box-shadow: 0 8px 18px rgba(74, 37, 169, 0.16);
}

.admin-theme-yellow-pop .sidebar-lang-switch a {
    color: rgba(58, 26, 134, 0.5);
}

.admin-theme-yellow-pop .sidebar-lang-switch a:hover,
.admin-theme-yellow-pop .sidebar-lang-switch a.is-active {
    color: #4a25a9;
    background: rgba(74, 37, 169, 0.1);
}

.admin-theme-yellow-pop .winkels-main {
    background: #faf9f4;
    border-radius: 1.15rem;
}

.admin-theme-yellow-pop[data-panel="super-admin"] .winkels-main {
    box-shadow: none;
}

/* Super-admin: muted purple — no yellow, no neon #751fe8 */
.admin-theme-brand {
    font-weight: 700;
    --yp-yellow: #cfc3de;
    --yp-purple: #6d5a8f;
    --yp-ink: #5a4478;
    --winkels-brand-purple: #6d5a8f;
    --winkels-brand-yellow: #cfc3de;
    --winkels-purple: #6d5a8f;
    --winkels-purple-deep: #5a4478;
    --winkels-purple-dark: #4f3c6e;
    --winkels-purple-50: #f7f4fb;
    --winkels-purple-100: #f0ebf6;
    --winkels-purple-500: #6d5a8f;
    --winkels-purple-600: #6d5a8f;
    --winkels-purple-700: #5a4478;
    --winkels-gold: #cfc3de;
    --winkels-bg: #ffffff;
    --winkels-text: #5a4478;
    --winkels-text-muted: #5a4478;
    --winkels-border: #d4c8e4;
    --winkels-gradient: #6d5a8f;
    --winkels-gradient-vivid: #6d5a8f;
    --winkels-gradient-deep: #5a4478;
}

body:has(.admin-theme-brand) {
    background: #fff;
}

.admin-theme-brand.admin-layout {
    background: #fff;
}

.admin-theme-brand .winkels-sidebar {
    background: #fff;
    color: #5a4478;
    border: 2px solid #d4c8e4;
    box-shadow: 0 12px 0 #cfc3de;
}

.admin-theme-brand .winkels-sidebar::before {
    background: none;
}

.admin-theme-brand .sidebar-brand,
.admin-theme-brand .sidebar-foot {
    background: #fff;
    border-color: #e8e0f0;
    color: #5a4478;
}

.admin-theme-brand .sidebar-panel-title {
    color: #5a4478;
}

.admin-theme-brand .sidebar-scroll::before,
.admin-theme-brand .sidebar-scroll::after {
    background: none;
}

.admin-theme-brand .winkels-sidebar a {
    color: #5a4478;
}

.admin-theme-brand .winkels-sidebar a:hover {
    background: #f0ebf6;
    color: #5a4478;
}

.admin-theme-brand .winkels-sidebar a.active {
    background: #6d5a8f;
    color: #fff;
}

.admin-theme-brand .nav-group-title,
.admin-theme-brand .nav-group-title:hover,
.admin-theme-brand .nav-group[open] > .nav-group-title,
.admin-theme-brand .nav-group.is-current > .nav-group-title {
    color: #5a4478;
}

.admin-theme-brand .nav-group-title:hover,
.admin-theme-brand .nav-group.is-current:not([open]) > .nav-group-title {
    background: #f0ebf6;
    color: #5a4478;
}

.admin-theme-brand .nav-group-links {
    border-inline-start-color: #cfc3de;
}

.admin-theme-brand .nav-section-label {
    color: #5a4478;
    opacity: 0.7;
}

.admin-theme-brand .nav-search input,
.admin-theme-brand .nav-search input:focus {
    background: #fff;
    border-color: #cfc3de;
    color: #5a4478;
}

.admin-theme-brand .sidebar-logout-btn {
    background: #6d5a8f;
    color: #fff;
    border: none;
    box-shadow: 0 4px 0 #4f3c6e;
}

.admin-theme-brand .sidebar-logout-btn:hover {
    background: #5a4478;
    color: #fff;
    box-shadow: 0 5px 0 #4f3c6e;
}

.admin-theme-brand .sidebar-lang-switch a {
    color: #5a4478;
}

.admin-theme-brand .sidebar-lang-switch a:hover,
.admin-theme-brand .sidebar-lang-switch a.is-active {
    color: #fff;
    background: #6d5a8f;
}

.admin-theme-brand .winkels-main {
    background: #fff;
    border-radius: 1.5rem;
    box-shadow: 0 12px 0 #cfc3de;
    font-weight: 700;
    color: #5a4478;
}

.admin-theme-brand .winkels-stat {
    background: #fff;
    color: #5a4478;
    border: 2px solid #d4c8e4;
    box-shadow: 0 6px 0 #cfc3de;
}

.admin-theme-brand .winkels-stat::before {
    background: #6d5a8f;
}

.admin-theme-brand .winkels-card {
    border: 2px solid #d4c8e4;
    box-shadow: 0 8px 0 #e8e0f0;
}

.admin-theme-brand .section-title,
.admin-theme-brand .command-center-head h2,
.admin-theme-brand h2 {
    color: #5a4478;
}

.admin-theme-brand .btn-winkels {
    background: #6d5a8f;
    color: #fff;
    box-shadow: 0 4px 0 #4f3c6e;
}

.admin-theme-brand .btn-winkels-outline {
    border-color: #6d5a8f;
    color: #5a4478;
}

.sa-hero {
    background: #6d5a8f;
    color: #fff;
    border-radius: 1.5rem;
    padding: 1.35rem 1.5rem 1.45rem;
    margin-bottom: 1.5rem;
    border: 2px solid #d4c8e4;
    box-shadow: 0 8px 0 #cfc3de;
}

.sa-hero-kicker {
    margin: 0 0 0.25rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #e8e0f2;
}

.sa-hero h2 {
    margin: 0 0 0.35rem;
    font-size: 1.65rem;
    color: #fff !important;
}

.sa-hero p {
    margin: 0;
    color: #fff;
    opacity: 0.92;
    font-size: 0.92rem;
}

.admin-theme-brand .command-alert {
    border: 2px solid #d4c8e4;
    box-shadow: 0 4px 0 #cfc3de;
}

.admin-theme-brand .pipeline-step {
    background: #fff;
    border: 2px solid #d4c8e4;
}

.admin-theme-brand .pipeline-count {
    color: #5a4478;
}

.admin-theme-yellow-pop .merchant-page-brands {
    background: transparent;
    border-bottom-color: rgba(74, 37, 169, 0.1);
}

.admin-theme-yellow-pop .admin-main-toolbar .merchant-page-brands {
    border: none;
    background: transparent;
}

.admin-theme-yellow-pop .merchant-page-brands__label {
    color: #6d6a80;
}

.admin-theme-yellow-pop .merchant-page-brand {
    background: #fff;
    border-color: rgba(74, 37, 169, 0.16);
    color: #3a1a86;
}

.admin-theme-yellow-pop .merchant-page-brand:hover {
    background: #f6f5f9;
}

.admin-theme-yellow-pop .merchant-page-brand.is-active {
    background: #eee24b;
    color: #3a1a86;
    border-color: #eee24b;
    box-shadow: none;
}

.admin-theme-yellow-pop .winkels-stat {
    background: #fff;
    color: #3a1a86;
    border: 1px solid rgba(74, 37, 169, 0.08);
    box-shadow: 0 8px 22px rgba(58, 26, 134, 0.05);
}

.admin-theme-yellow-pop .winkels-stat::before {
    inset: 0 0 auto 0;
    height: 3px;
    background: #eee24b;
}

.admin-theme-yellow-pop .winkels-stat::after {
    display: none;
}

.admin-theme-yellow-pop .winkels-stat .value {
    color: #4a25a9;
    text-shadow: none;
}

.admin-theme-yellow-pop a.winkels-stat.mk-order-board {
    background: linear-gradient(160deg, #faf7ff 0%, #fff 55%);
    border-color: rgba(74, 37, 169, 0.1);
}

.admin-theme-yellow-pop a.winkels-stat.mk-order-board.is-hot,
.admin-theme-yellow-pop a.winkels-stat.mk-order-board.is-good {
    color: #fff;
}

.admin-theme-yellow-pop a.winkels-stat.mk-order-board.is-hot .value,
.admin-theme-yellow-pop a.winkels-stat.mk-order-board.is-good .value,
.admin-theme-yellow-pop a.winkels-stat.mk-order-board.is-hot .mk-order-board-hint,
.admin-theme-yellow-pop a.winkels-stat.mk-order-board.is-good .mk-order-board-hint {
    color: #fff;
}

.admin-theme-yellow-pop .winkels-stat-soft {
    background: #fff;
}

.admin-theme-yellow-pop .btn-winkels {
    background: #4a25a9;
    border-radius: 0.75rem;
    box-shadow: 0 6px 16px rgba(58, 26, 134, 0.14);
}

.admin-theme-yellow-pop .btn-winkels::before,
.admin-theme-yellow-pop .btn-winkels::after {
    display: none;
}

.admin-theme-yellow-pop .btn-winkels-outline {
    border-color: rgba(74, 37, 169, 0.28);
    color: #4a25a9;
    background: #fff;
    border-radius: 0.75rem;
}

.admin-theme-yellow-pop .btn-winkels-outline:hover {
    background: #fffbe8;
    border-color: #e4c62a;
    color: #3a1a86;
}

.admin-theme-yellow-pop .winkels-tabs a.active,
.admin-theme-yellow-pop .winkels-tabs button.active {
    background: #eee24b;
    color: #3a1a86;
    box-shadow: none;
}

.admin-theme-yellow-pop table.winkels-table th {
    background: #fbf8de;
    color: #3a1a86;
}

.admin-theme-yellow-pop .link-winkels {
    color: #4a25a9;
}

.admin-theme-yellow-pop .winkels-input:focus {
    border-color: #4a25a9;
    box-shadow: 0 0 0 3px rgba(238, 226, 75, 0.4);
}

.admin-theme-yellow-pop .winkels-card {
    border-color: rgba(74, 37, 169, 0.08);
}

.admin-theme-yellow-pop .gateway-fee-card {
    border-color: rgba(74, 37, 169, 0.12);
    background: #fff;
    box-shadow: 0 8px 22px rgba(58, 26, 134, 0.06);
}

.admin-theme-yellow-pop .gateway-fee-title {
    color: #3a1a86;
}

.admin-theme-yellow-pop .gateway-fee-hint {
    color: #8b8799;
}

.admin-theme-yellow-pop .winkels-card-premium::before {
    background: #eee24b;
    opacity: 1;
    height: 3px;
}

.admin-theme-yellow-pop .mk-purchases-eyebrow,
.admin-theme-yellow-pop .mk-recipe-eyebrow {
    color: #4a25a9;
}

.admin-theme-yellow-pop .mk-purchase-chip.is-active {
    background: #eee24b;
    color: #3a1a86;
    border-color: transparent;
    box-shadow: none;
}

.admin-theme-yellow-pop .mk-purchase-chip.is-active .mk-purchase-chip-count {
    background: rgba(58, 26, 134, 0.12);
    color: #3a1a86;
}

.admin-theme-yellow-pop .mk-purchase-add {
    background: #4a25a9;
    box-shadow: 0 6px 16px rgba(58, 26, 134, 0.22);
}

.login-theme-yellow-pop {
    background: linear-gradient(160deg, #3a1a86 0%, #4a25a9 55%, #5b32c4 100%);
}

.login-theme-yellow-pop::before {
    background: radial-gradient(circle, rgba(238, 226, 75, 0.16) 0%, transparent 68%);
}

.login-theme-yellow-pop::after {
    background: radial-gradient(circle, rgba(255, 255, 255, 0.12) 0%, transparent 66%);
}

.login-theme-yellow-pop .login-card {
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 28px 70px rgba(26, 10, 70, 0.35);
}

.login-theme-yellow-pop .login-card::before {
    background: #eee24b;
    height: 4px;
}

/* ——— Panel login (admin / merchant / courier) ——— */
.panel-login {
    height: 100dvh;
    max-height: 100dvh;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
    position: relative;
    overflow: hidden;
    background: var(--winkels-purple-950);
}

/* Full-bleed background + floating card */
.panel-login--fullbleed {
    display: block;
    grid-template-columns: unset;
    height: 100dvh;
    max-height: 100dvh;
    overflow: hidden;
    background: #f3f1ec;
}

.panel-login-full-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    pointer-events: none;
    user-select: none;
}

.panel-login-full-stage {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(1rem, 2.5vh, 1.75rem) 1rem;
    box-sizing: border-box;
}

.panel-login--fullbleed .panel-login-main {
    width: min(100%, 26rem);
    max-width: 26rem;
    direction: rtl;
    flex-shrink: 0;
    background: none;
    padding: 0;
    overflow: visible;
    height: auto;
    min-height: 0;
}

.panel-login-card-3d {
    position: relative;
    width: 100%;
    max-width: 26rem;
    filter: drop-shadow(0 22px 36px rgba(40, 8, 82, 0.38));
}

.panel-login-card-3d::before {
    content: '';
    position: absolute;
    inset: 12px 6px -16px;
    background: #630fdb;
    border-radius: 2.15rem;
    z-index: -1;
}

.panel-login-card-3d::after {
    content: '';
    position: absolute;
    inset: 6px 3px -8px;
    background: #d8c8ff;
    border-radius: 2.05rem;
    z-index: -1;
}

.panel-login--fullbleed .panel-login-card,
.panel-login-card--clay {
    width: 100%;
    max-width: 26rem;
    max-height: calc(100dvh - 3.25rem);
    padding: 1.7rem 1.7rem 1.45rem;
    border-radius: 2rem;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    background: #ffffff;
    border: 4px solid #ffffff;
    box-shadow:
        inset 0 4px 0 #ffffff,
        inset 0 -10px 18px rgba(117, 31, 232, 0.07);
}

.panel-login-card--clay::before {
    display: none;
}

.panel-login-card--clay .panel-login-card-shine {
    background:
        radial-gradient(120% 70% at 18% 0%, rgba(255, 255, 255, 0.95) 0%, transparent 46%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, transparent 42%);
    border-radius: inherit;
}

.panel-login--fullbleed .panel-login-card-head {
    gap: 0.9rem;
    margin-bottom: 1.2rem;
}

.panel-login--fullbleed .panel-login-card-icon-wrap::after {
    display: none;
}

.panel-login--fullbleed .panel-login-card-icon {
    width: 3.35rem;
    height: 3.35rem;
    border-radius: 1.05rem;
    box-shadow: none;
}

.panel-login--fullbleed .panel-login-card-head h2 {
    font-size: 1.42rem;
}

.panel-login--fullbleed .panel-login-card-kicker {
    font-size: 0.72rem;
}

.panel-login--fullbleed .panel-login-form {
    gap: 0.9rem;
}

.panel-login--fullbleed .panel-login-input {
    padding-block: 0.78rem;
    font-size: 0.95rem;
    border: none;
    border-radius: 1rem;
    background: #f6f0ff;
    box-shadow:
        inset 0 4px 0 rgba(117, 31, 232, 0.12),
        inset 0 2px 10px rgba(117, 31, 232, 0.08);
}

.panel-login--fullbleed .panel-login-input:focus {
    box-shadow:
        inset 0 4px 0 rgba(117, 31, 232, 0.2),
        0 0 0 3px rgba(252, 208, 9, 0.45);
}

.panel-login--fullbleed .panel-login-submit {
    padding-block: 0.95rem;
    font-size: 1.05rem;
    margin-top: 0.35rem;
    border-radius: 999px;
}

.panel-login-submit {
    width: 100%;
    padding-block: 0.95rem;
    font-size: 1.05rem;
    font-weight: 800;
    border-radius: 999px;
    margin-top: 0.35rem;
    background: #fcd009;
    color: #751fe8;
    border: none;
    box-shadow:
        0 5px 0 #630fdb,
        inset 0 2px 0 #ffffff;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.panel-login-submit.btn-winkels::before,
.panel-login-submit.btn-winkels::after {
    display: none;
}

.panel-login-submit:hover {
    transform: translateY(-1px);
    background: #fcd009;
    color: #751fe8;
    box-shadow:
        0 6px 0 #630fdb,
        inset 0 2px 0 #ffffff;
}

.panel-login-submit:active {
    transform: translateY(4px);
    box-shadow:
        0 1px 0 #630fdb,
        inset 0 2px 0 #ffffff;
}

.panel-login--fullbleed .panel-login-card-foot {
    margin-top: 1rem;
    gap: 0.65rem;
}

.panel-login--fullbleed .panel-login-hints {
    margin-bottom: 1rem;
    border: none;
    background: #f6f0ff;
    border-radius: 1rem;
    box-shadow: inset 0 3px 0 rgba(117, 31, 232, 0.1);
}

.panel-login--fullbleed .panel-login-lang {
    background: #f6f0ff;
    box-shadow: inset 0 3px 0 rgba(117, 31, 232, 0.1);
}

.panel-login--fullbleed .panel-login-lang a.is-active {
    background: #fcd009;
    color: #751fe8;
    box-shadow: 0 3px 0 #630fdb;
}

.panel-login--fullbleed .panel-login-hints summary {
    padding: 0.5rem 0.7rem;
    font-size: 0.7rem;
}

@media (max-width: 720px) {
    .panel-login-full-stage {
        align-items: center;
        padding: 0.85rem 1rem 1.1rem;
    }

    .panel-login-full-bg {
        object-position: center center;
    }

    .panel-login--fullbleed .panel-login-main {
        width: 100%;
        max-width: none;
    }

    .panel-login-card-3d {
        max-width: none;
    }

    .panel-login--fullbleed .panel-login-card {
        width: 100%;
        max-width: none;
        max-height: min(80dvh, 100%);
        padding: 1.45rem 1.35rem 1.25rem;
        border-radius: 1.75rem;
    }

    .panel-login--fullbleed .panel-login-card-head h2 {
        font-size: 1.28rem;
    }
}

@media (max-width: 720px) and (max-height: 740px) {
    .panel-login--fullbleed .panel-login-card {
        max-height: min(88dvh, 100%);
        padding: 1.2rem 1.15rem 1rem;
    }

    .panel-login--fullbleed .panel-login-card-head {
        margin-bottom: 0.85rem;
    }

    .panel-login--fullbleed .panel-login-form {
        gap: 0.65rem;
    }
}

.panel-login-brand {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-login-brand-art {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}

.panel-login-brand-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(26, 5, 56, 0.92) 0%, rgba(40, 8, 82, 0.35) 42%, rgba(40, 8, 82, 0.5) 72%, rgba(26, 5, 56, 0.94) 100%),
        linear-gradient(135deg, rgba(117, 31, 232, 0.4) 0%, transparent 50%);
    pointer-events: none;
}

.panel-login-brand-inner {
    position: relative;
    z-index: 2;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding: clamp(1.5rem, 3.5vw, 2.75rem);
    color: #fff;
    overflow: hidden;
}

.panel-login-brand-content {
    max-width: 32rem;
}

.panel-login-brand-mark {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    text-decoration: none;
    color: inherit;
    margin-bottom: clamp(1rem, 2.5vw, 1.75rem);
}

.panel-login-brand-mark img {
    width: clamp(3.25rem, 5vw, 4.25rem);
    height: clamp(3.25rem, 5vw, 4.25rem);
    border-radius: 1.15rem;
    box-shadow: var(--winkels-glow-lg);
    border: 2px solid rgba(255, 255, 255, 0.22);
}

.panel-login-brand-mark strong {
    display: block;
    font-family: var(--winkels-font-display);
    font-size: clamp(1.35rem, 2.5vw, 1.65rem);
    line-height: 1.1;
}

.panel-login-brand-kicker {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
    margin-bottom: 0.15rem;
}

.panel-login-headline {
    margin: 0 0 0.65rem;
    font-family: var(--winkels-font-display);
    font-size: clamp(1.55rem, 2.8vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.panel-login-tagline {
    margin: 0 0 1rem;
    font-size: clamp(0.88rem, 1.4vw, 1.02rem);
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.9);
    max-width: 28rem;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.panel-login-roles {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.panel-login-roles li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.panel-login-footnote {
    margin: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.88);
    padding: 0.5rem 0.8rem;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.32);
    border: 1px solid rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(10px);
    width: fit-content;
    flex-shrink: 0;
}

.panel-login-main {
    position: relative;
    z-index: 1;
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: clamp(0.85rem, 2vw, 1.75rem);
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(167, 118, 242, 0.28), transparent),
        radial-gradient(ellipse 70% 50% at 0% 100%, rgba(231, 224, 111, 0.12), transparent),
        linear-gradient(165deg, #1a0538 0%, #280852 45%, #3c0f79 100%);
}

.panel-login-card {
    position: relative;
    width: min(100%, 24.5rem);
    max-height: calc(100dvh - 1.75rem);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 246, 255, 0.94) 100%);
    backdrop-filter: blur(24px) saturate(1.3);
    border-radius: 1.65rem;
    padding: clamp(1.25rem, 2.5vw, 1.75rem);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.45),
        0 0 0 1px rgba(117, 31, 232, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
    animation: winkels-modal-in 0.55s var(--winkels-ease);
}

.panel-login-card::before {
    content: '';
    position: absolute;
    inset-inline: 1.25rem;
    top: 0;
    height: 3px;
    border-radius: 0 0 4px 4px;
    background: var(--winkels-gradient-gold);
    box-shadow: 0 0 18px rgba(231, 224, 111, 0.55);
}

.panel-login-card-shine {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(125deg, rgba(255, 255, 255, 0.45) 0%, transparent 38%, transparent 100%);
    border-radius: inherit;
}

.panel-login-card-head {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-shrink: 0;
}

.panel-login-card-icon-wrap {
    position: relative;
    flex-shrink: 0;
}

.panel-login-card-icon-wrap::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, rgba(117, 31, 232, 0.35), rgba(231, 224, 111, 0.35));
    z-index: -1;
    filter: blur(6px);
}

.panel-login-card-icon {
    width: 2.85rem;
    height: 2.85rem;
    border-radius: 0.85rem;
    box-shadow: var(--winkels-glow);
    display: block;
}

.panel-login-card-kicker {
    margin: 0 0 0.1rem;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--winkels-brand-purple);
    opacity: 0.85;
}

.panel-login-card-head h2 {
    margin: 0;
    font-family: var(--winkels-font-display);
    font-size: 1.28rem;
    color: var(--winkels-purple-950);
}

.panel-login-hints {
    position: relative;
    margin-bottom: 0.85rem;
    border-radius: var(--winkels-radius-lg);
    background: rgba(117, 31, 232, 0.06);
    border: 1px solid rgba(117, 31, 232, 0.14);
    flex-shrink: 0;
}

.panel-login-hints summary {
    list-style: none;
    cursor: pointer;
    padding: 0.55rem 0.75rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--winkels-text-muted);
    user-select: none;
}

.panel-login-hints summary::-webkit-details-marker {
    display: none;
}

.panel-login-hints summary::after {
    content: ' ▾';
    opacity: 0.6;
}

.panel-login-hints[open] summary::after {
    content: ' ▴';
}

.panel-login-hints-grid {
    display: grid;
    gap: 0.35rem;
    padding: 0 0.65rem 0.65rem;
    max-height: 9rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.panel-login-hint-btn {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.55rem;
    align-items: center;
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1px solid rgba(117, 31, 232, 0.12);
    border-radius: 0.75rem;
    background: #fff;
    cursor: pointer;
    text-align: inherit;
    transition: transform 0.15s var(--winkels-ease), box-shadow 0.15s var(--winkels-ease), border-color 0.15s;
}

.panel-login-hint-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(117, 31, 232, 0.35);
    box-shadow: var(--winkels-shadow-sm);
}

.panel-login-hint-label {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--winkels-brand-purple);
    white-space: nowrap;
}

.panel-login-hint-email {
    font-size: 0.74rem;
    color: var(--winkels-text);
    overflow: hidden;
    text-overflow: ellipsis;
    grid-column: 2;
}

.panel-login-form {
    position: relative;
    display: grid;
    gap: 0.7rem;
    flex-shrink: 0;
}

.panel-login-field span {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--winkels-text);
}

.panel-login-input {
    border-radius: 0.8rem;
    border-color: rgba(117, 31, 232, 0.16);
    background: #fff;
    padding-block: 0.65rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.panel-login-input:focus {
    border-color: var(--winkels-brand-purple);
    box-shadow: 0 0 0 3px rgba(117, 31, 232, 0.14);
}

.panel-login-session-note {
    margin: 0;
    color: var(--winkels-text-muted);
    font-size: 0.8rem;
    line-height: 1.45;
}

.panel-login-form-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0.4rem;
    font-size: 0.8rem;
}

.panel-login-remember {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--winkels-text-muted);
    cursor: pointer;
}

.panel-login-remember input {
    accent-color: var(--winkels-brand-purple);
}

.panel-login-forgot {
    color: var(--winkels-brand-purple);
    font-weight: 600;
    text-decoration: none;
    font-size: 0.8rem;
}

.panel-login-forgot:hover {
    text-decoration: underline;
}

.panel-login-dev {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--winkels-border);
    flex-shrink: 0;
}

.panel-login-dev-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    justify-content: center;
}

.panel-login-dev-links a {
    font-size: 0.72rem;
    padding: 0.3rem 0.55rem;
    border-radius: 999px;
    background: var(--winkels-purple-50);
    color: var(--winkels-brand-purple);
    text-decoration: none;
    font-weight: 700;
}

.panel-login-card-foot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.55rem;
    margin-top: 0.85rem;
    flex-shrink: 0;
}

.panel-login-lang {
    display: flex;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.2rem;
    border-radius: 999px;
    background: rgba(117, 31, 232, 0.08);
}

.panel-login-lang a {
    padding: 0.3rem 0.75rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--winkels-text-muted);
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.panel-login-lang a.is-active,
.panel-login-lang a:hover {
    background: #fff;
    color: var(--winkels-brand-purple);
    box-shadow: var(--winkels-shadow-sm);
}

.panel-login-back-link {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-weight: 600;
}

.panel-login-main .panel-login-back-link {
    color: var(--winkels-text-muted);
}

.panel-login-back-link:hover {
    color: var(--winkels-brand-purple);
}

@media (max-width: 960px) {
    .panel-login {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 0.38fr) minmax(0, 0.62fr);
    }

    .panel-login-brand {
        border-inline-end: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .panel-login-brand-inner {
        padding: 1rem 1.15rem;
        justify-content: flex-end;
    }

    .panel-login-brand-content {
        display: none;
    }

    .panel-login-footnote {
        font-size: 0.72rem;
        padding: 0.4rem 0.65rem;
    }

    .panel-login-main {
        padding: 0.75rem 1rem 1rem;
        justify-content: flex-start;
        padding-top: 0.65rem;
    }

    .panel-login-card {
        width: 100%;
        max-height: 100%;
        border-radius: 1.35rem;
        padding: 1.15rem;
    }

    .panel-login-hints-grid {
        max-height: 6.5rem;
    }
}

@media (max-width: 960px) and (max-height: 700px) {
    .panel-login {
        grid-template-rows: minmax(0, 0.28fr) minmax(0, 0.72fr);
    }

    .panel-login-footnote {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .panel-login-card {
        animation: none;
    }

    .panel-login-submit:hover {
        transform: none;
    }
}

@media (max-width: 768px) {
    .admin-theme-yellow-pop.admin-layout {
        padding: 0.65rem;
        gap: 0.65rem;
    }

    .admin-theme-yellow-pop .winkels-sidebar {
        height: auto;
        width: 100%;
    }
}

.admin-theme-yellow-pop .winkels-sidebar a .notification-badge {
    margin-inline-start: auto;
}

/* ——— Purchases (merchant) ——— */
.mk-purchases {
    max-width: none;
}

.mk-purchases-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.25rem;
    margin-bottom: 1.25rem;
}

.mk-purchases-stats {
    margin-bottom: 1.25rem;
}

.mk-purchases-filters {
    padding: 1.15rem 1.25rem 1.2rem;
    margin-bottom: 1.15rem;
}

.mk-purchases-periods {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-bottom: 1rem;
}

.mk-purchases-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr));
    gap: 0.75rem 1rem;
}

.mk-purchases-filter-grid .menu-field-premium {
    margin-bottom: 0;
}

.mk-purchases-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem;
    margin-top: 1rem;
}

a.mk-purchase-chip {
    text-decoration: none;
}

.mk-purchases-eyebrow {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--winkels-purple);
}

.mk-purchases-hero h2 {
    margin: 0.25rem 0 0.4rem;
    font-size: 1.85rem;
    font-weight: 750;
    letter-spacing: -0.03em;
    color: var(--winkels-text);
}

.mk-purchases-hero p {
    margin: 0;
    max-width: 36rem;
    color: var(--winkels-text-muted);
    line-height: 1.55;
}

.mk-purchases-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    white-space: nowrap;
}

.mk-purchases-cta-plus {
    font-size: 1.2rem;
    line-height: 1;
    font-weight: 600;
}

.mk-purchase-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.15rem;
}

.mk-purchase-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.48rem 0.95rem;
    border-radius: 9999px;
    border: 1px solid var(--winkels-purple-200);
    background: rgba(255, 255, 255, 0.86);
    color: var(--winkels-purple-800);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.28s var(--winkels-ease);
    box-shadow: 0 1px 2px rgba(40, 8, 82, 0.04);
}

.mk-purchase-chip:hover {
    border-color: var(--winkels-purple-400);
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(117, 31, 232, 0.12);
}

.mk-purchase-chip.is-active {
    background: var(--winkels-gradient);
    color: #fff;
    border-color: transparent;
    box-shadow: var(--winkels-glow);
}

.mk-purchase-chip-count {
    min-width: 1.15rem;
    padding: 0.05rem 0.4rem;
    border-radius: 9999px;
    background: rgba(117, 31, 232, 0.1);
    font-size: 0.68rem;
    font-weight: 700;
}

.mk-purchase-chip.is-active .mk-purchase-chip-count {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.mk-purchases-card {
    margin-bottom: 1.35rem;
}

.mk-purchases-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1.05rem 1.25rem 0.85rem;
}

.mk-purchases-card-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 750;
}

.mk-purchases-card-count {
    min-width: 1.6rem;
    height: 1.6rem;
    display: inline-grid;
    place-items: center;
    border-radius: 9999px;
    background: var(--winkels-purple-50);
    color: var(--winkels-purple-800);
    font-size: 0.75rem;
    font-weight: 700;
}

.mk-purchases-card .overflow-x-auto {
    padding: 0 0.35rem 0.35rem;
}

table.winkels-table.mk-purchases-table {
    min-width: 68rem;
}

table.winkels-table.mk-purchases-table th,
table.winkels-table.mk-purchases-table td {
    padding: 0.95rem 0.7rem;
    vertical-align: middle;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

table.winkels-table.mk-purchases-table th {
    font-size: 0.78rem;
    font-weight: 700;
    color: #5b4a86;
}

table.winkels-table.mk-purchases-table td.is-item,
table.winkels-table.mk-purchases-table th.is-item {
    white-space: normal;
}

table.winkels-table.mk-purchases-table tbody tr:nth-child(even) {
    background: rgba(250, 248, 255, 0.7);
}

table.winkels-table.mk-purchases-table th.is-qty,
table.winkels-table.mk-purchases-table td.is-qty,
table.winkels-table.mk-purchases-table th.is-money,
table.winkels-table.mk-purchases-table td.is-money,
table.winkels-table.mk-purchases-table th.is-date,
table.winkels-table.mk-purchases-table td.is-date {
    text-align: center;
}

table.winkels-table.mk-purchases-table th.is-actions,
table.winkels-table.mk-purchases-table td.is-actions {
    width: 7.5rem;
    text-align: end;
    padding-inline-end: 1.1rem;
}

table.winkels-table.mk-purchases-table th.is-code,
table.winkels-table.mk-purchases-table td.is-code {
    padding-inline-start: 1.1rem;
}

.mk-purchase-code {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: 0.15rem 0.55rem;
    border-radius: 0.55rem;
    background: rgba(117, 31, 232, 0.06);
    color: var(--winkels-purple-800);
    font-weight: 750;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    text-decoration: none;
}

.mk-purchase-code:hover {
    background: rgba(117, 31, 232, 0.12);
    color: var(--winkels-purple);
}

.mk-purchase-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 8.5rem;
}

.mk-purchase-item strong {
    display: block;
    font-weight: 750;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

.mk-purchase-unit {
    display: block;
    margin-top: 0.1rem;
    font-size: 0.7rem;
    color: var(--winkels-text-muted);
}

.mk-purchase-mono {
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.7rem;
    display: grid;
    place-items: center;
    font-weight: 750;
    font-size: 0.88rem;
    flex-shrink: 0;
}

.mk-purchase-qty,
.mk-purchase-money,
.mk-purchase-date {
    font-variant-numeric: tabular-nums;
}

.mk-purchase-money,
.mk-purchase-date {
    direction: ltr;
    unicode-bidi: isolate;
}

.mk-purchase-money {
    font-weight: 600;
    color: var(--winkels-text);
}

.mk-purchase-date {
    color: var(--winkels-text-muted);
    font-size: 0.82rem;
}

.mk-purchase-vendor-name {
    display: inline-block;
    max-width: 9.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 600;
}

.mk-kind-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

.mk-kind-raw {
    background: var(--winkels-purple-50);
    color: var(--winkels-purple-800);
}

.mk-kind-prep {
    background: var(--winkels-gold-soft);
    color: #6b6408;
}

.mk-kind-packaging {
    background: #eef2ff;
    color: #3730a3;
}

.mk-kind-service {
    background: #ecfdf5;
    color: #047857;
}

.mk-purchase-qty {
    font-weight: 750;
    font-variant-numeric: tabular-nums;
}

.mk-purchase-cost {
    font-variant-numeric: tabular-nums;
    color: var(--winkels-text-muted);
}

.mk-source-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
}

.mk-source-buy {
    background: var(--winkels-purple-50);
    color: var(--winkels-purple-800);
}

.mk-source-prep {
    background: var(--winkels-gold-soft);
    color: #6b6408;
}

.mk-source-both {
    background: linear-gradient(135deg, var(--winkels-purple-50), var(--winkels-gold-soft));
    color: var(--winkels-purple-900);
}

.mk-source-none {
    color: var(--winkels-text-muted);
    background: transparent;
    padding-inline: 0;
}

.mk-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    white-space: nowrap;
}

.mk-status-open {
    background: var(--winkels-purple-50);
    color: var(--winkels-purple-800);
}

.mk-status-paid {
    background: #ecfdf5;
    color: #047857;
}

.mk-status-void {
    background: #f3f4f6;
    color: #6b7280;
}

.mk-purchase-void td {
    opacity: 0.72;
}

.mk-purchase-void .mk-purchase-vendor {
    text-decoration: line-through;
}

.mk-bill-actions {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-end;
    justify-content: center;
    gap: 0.35rem;
}

.mk-bill-icons {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.mk-bill-icon {
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--winkels-purple-200);
    border-radius: 0.7rem;
    background: #fff;
    color: var(--winkels-purple-800);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s var(--winkels-ease);
}

.mk-bill-icon:hover {
    border-color: var(--winkels-purple-400);
    background: var(--winkels-purple-50);
}

.mk-bill-icon.is-danger {
    color: #b91c1c;
    border-color: #fecaca;
}

.mk-bill-icon.is-danger:hover {
    background: #fef2f2;
    border-color: #f87171;
}

.mk-bill-audit {
    border: 1px solid var(--winkels-purple-200);
    background: var(--winkels-purple-50);
    color: var(--winkels-purple-800);
    border-radius: 9999px;
    padding: 0.22rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
}

.mk-bill-audit.is-void {
    background: #f3f4f6;
    border-color: #e5e7eb;
    color: #4b5563;
}

.mk-audit-card .mk-audit-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 0;
    border-bottom: 1px solid #ece8ff;
}

.mk-audit-card .mk-audit-row:last-child {
    border-bottom: none;
}

.mk-audit-card .mk-audit-row span {
    color: var(--winkels-text-muted);
    font-size: 0.8rem;
}

.mk-audit-note strong {
    text-align: end;
    font-weight: 600;
    line-height: 1.45;
}

.mk-purchase-action {
    width: 3.2rem;
    text-align: center;
}

.mk-purchase-add {
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    border-radius: 9999px;
    background: var(--winkels-gradient);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: var(--winkels-glow);
    transition: transform 0.28s var(--winkels-ease), box-shadow 0.28s var(--winkels-ease);
}

.mk-purchase-add:hover {
    transform: translateY(-2px) scale(1.06);
    box-shadow: var(--winkels-glow-lg);
}

.mk-purchase-add:active {
    transform: translateY(0) scale(0.96);
}

.mk-purchases-empty {
    text-align: center;
    color: var(--winkels-text-muted);
    padding: 2.4rem 1rem !important;
}

.mk-purchase-vendor,
.mk-purchase-void .mk-purchase-code {
    font-weight: 700;
    color: var(--winkels-purple-800);
    text-decoration: none;
}

.mk-purchase-vendor:hover {
    color: var(--winkels-purple);
}

.mk-purchase-void .mk-purchase-code {
    text-decoration: line-through;
}

.mk-purchase-modal {
    max-width: 34rem;
}

.mk-purchase-toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.85rem 1rem;
    border: 1px solid #ece8ff;
    border-radius: 0.95rem;
    background: linear-gradient(180deg, #ffffff 0%, #faf8ff 100%);
    cursor: pointer;
    transition: border-color 0.25s var(--winkels-ease), box-shadow 0.25s var(--winkels-ease);
}

.mk-purchase-toggle.is-on {
    border-color: var(--winkels-purple-300);
    box-shadow: 0 0 0 4px rgba(117, 31, 232, 0.08);
}

.mk-purchase-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mk-purchase-switch {
    width: 2.4rem;
    height: 1.35rem;
    border-radius: 9999px;
    background: #ddd6fe;
    position: relative;
    flex-shrink: 0;
    transition: background 0.25s var(--winkels-ease);
}

.mk-purchase-switch::after {
    content: '';
    position: absolute;
    top: 0.15rem;
    inset-inline-start: 0.15rem;
    width: 1.05rem;
    height: 1.05rem;
    border-radius: 9999px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(40, 8, 82, 0.18);
    transition: inset-inline-start 0.25s var(--winkels-ease);
}

.mk-purchase-toggle.is-on .mk-purchase-switch {
    background: var(--winkels-purple);
}

.mk-purchase-toggle.is-on .mk-purchase-switch::after {
    inset-inline-start: 1.2rem;
}

.mk-purchase-toggle-copy strong {
    display: block;
    font-size: 0.86rem;
    font-weight: 700;
    color: #334155;
}

.mk-purchase-modal .menu-field-premium {
    margin-bottom: 0.85rem;
}

.mk-purchase-modal .menu-field-grid + .menu-field-grid {
    margin-top: 0.15rem;
}

@media (max-width: 720px) {
    .mk-purchases-hero {
        flex-direction: column;
        align-items: stretch;
    }

    .mk-purchases-hero h2 {
        font-size: 1.5rem;
    }

    .mk-purchases-cta {
        justify-content: center;
    }
}

/* —— Super Admin restaurants table —— */
.mk-admin-card {
    overflow: hidden;
}

.mk-admin-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem;
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid var(--winkels-border);
    background: rgba(250, 248, 255, 0.72);
}

table.winkels-table.mk-admin-table {
    min-width: 100%;
    width: 100%;
}

table.winkels-table.mk-admin-table th,
table.winkels-table.mk-admin-table td {
    padding: 0.9rem 0.7rem;
    vertical-align: middle;
    text-align: start;
    text-transform: none;
    letter-spacing: 0;
    white-space: nowrap;
}

table.winkels-table.mk-admin-table th {
    font-size: 0.78rem;
    font-weight: 700;
    color: #5b4a86;
}

table.winkels-table.mk-admin-table th.is-name,
table.winkels-table.mk-admin-table td.is-name {
    white-space: normal;
    min-width: 8.5rem;
}

table.winkels-table.mk-admin-table th.is-num,
table.winkels-table.mk-admin-table td.is-num,
table.winkels-table.mk-admin-table th.is-check,
table.winkels-table.mk-admin-table td.is-check,
table.winkels-table.mk-admin-table th.is-actions,
table.winkels-table.mk-admin-table td.is-actions {
    width: 1%;
}

table.winkels-table.mk-admin-table th.is-actions,
table.winkels-table.mk-admin-table td.is-actions {
    text-align: end;
    padding-inline-end: 1rem;
    position: sticky;
    inset-inline-end: 0;
    z-index: 3;
    background: #fff;
}

html[dir="rtl"] table.winkels-table.mk-admin-table th.is-actions,
html[dir="rtl"] table.winkels-table.mk-admin-table td.is-actions {
    box-shadow: 8px 0 14px -10px rgba(16, 24, 40, 0.14);
}

html[dir="ltr"] table.winkels-table.mk-admin-table th.is-actions,
html[dir="ltr"] table.winkels-table.mk-admin-table td.is-actions {
    box-shadow: -8px 0 14px -10px rgba(16, 24, 40, 0.14);
}

table.winkels-table.mk-admin-table thead th.is-actions {
    z-index: 4;
}

table.winkels-table.mk-admin-table tbody tr:nth-child(even) td.is-actions {
    background: #faf8ff;
}

table.winkels-table.mk-admin-table tbody tr:nth-child(even) {
    background: rgba(250, 248, 255, 0.7);
}

table.winkels-table.mk-admin-table tbody tr.is-current {
    background: rgba(117, 31, 232, 0.06);
}

.mk-admin-code {
    display: inline-flex;
    align-items: center;
    min-height: 1.7rem;
    padding: 0.15rem 0.55rem;
    border-radius: 0.55rem;
    background: rgba(117, 31, 232, 0.06);
    color: var(--winkels-purple-800);
    font-weight: 750;
    font-size: 0.8rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}

.mk-admin-link {
    display: block;
    font-weight: 750;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: inherit;
    text-decoration: none;
}

.mk-admin-link:hover {
    color: var(--winkels-purple);
}

.mk-admin-sub {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.72rem;
    color: var(--winkels-text-muted);
}

.mk-admin-sub a {
    color: inherit;
    text-decoration: none;
}

.mk-admin-sub a:hover {
    color: var(--winkels-purple);
}

.mk-admin-date {
    font-variant-numeric: tabular-nums;
    direction: ltr;
    unicode-bidi: isolate;
}

.mk-admin-date.is-late {
    color: #b42318;
    font-weight: 700;
}

.mk-admin-empty {
    text-align: center;
    color: var(--winkels-text-muted);
    padding: 2rem 1rem;
}

.mk-row-menu {
    position: relative;
    display: inline-flex;
    justify-content: flex-end;
}

.mk-row-menu-list {
    display: none;
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 6px);
    min-width: 10.5rem;
    padding: 0.35rem;
    border-radius: 0.9rem;
    background: #fff;
    border: 1px solid rgba(117, 31, 232, 0.12);
    box-shadow: 0 14px 36px rgba(40, 8, 82, 0.14);
    z-index: 20;
}

.mk-row-menu-btn {
    width: 2.1rem;
    height: 2.1rem;
    border: 1px solid rgba(117, 31, 232, 0.14);
    border-radius: 0.7rem;
    background: #fff;
    color: var(--winkels-purple-800);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
}

.mk-row-menu-btn:hover,
.mk-row-menu-btn[aria-expanded="true"] {
    background: var(--winkels-purple-50);
    border-color: rgba(117, 31, 232, 0.28);
}

.mk-row-menu-list.is-open {
    display: block;
}

.mk-row-menu-item,
.mk-row-menu-action .mk-row-menu-item {
    display: block;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border: 0;
    border-radius: 0.65rem;
    background: transparent;
    color: #2d1b55;
    font-size: 0.86rem;
    font-weight: 600;
    text-align: start;
    text-decoration: none;
    cursor: pointer;
}

.mk-row-menu-item:hover,
.mk-row-menu-action .mk-row-menu-item:hover {
    background: rgba(117, 31, 232, 0.07);
}

.mk-row-menu-item.is-danger,
.mk-row-menu-action .mk-row-menu-item.is-danger {
    color: #b42318;
}

.mk-row-menu-action {
    display: block;
}

.admin-theme-yellow-pop table.winkels-table.mk-admin-table th {
    background: #fbf8de;
    color: #3a1a86;
}

.zone-picker-box {
    max-height: 16rem;
    overflow: auto;
    padding: 0.75rem;
    border: 1px solid var(--winkels-border);
    border-radius: 0.75rem;
}

.vehicle-choice {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.vehicle-choice-option {
    margin: 0;
    cursor: pointer;
}

.vehicle-choice-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.vehicle-choice-option span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--winkels-border);
    border-radius: 0.75rem;
    background: #fff;
    font-weight: 700;
}

.vehicle-choice-option input:checked + span {
    border-color: #3a1a86;
    background: #fbf8de;
    color: #3a1a86;
}

.vehicle-choice-option input:focus-visible + span {
    outline: 2px solid #3a1a86;
    outline-offset: 2px;
}

.courier-lux .winkels-main {
    background:
        radial-gradient(circle at 100% 0, rgba(238, 226, 75, 0.18), transparent 34%),
        radial-gradient(circle at 0 100%, rgba(58, 26, 134, 0.06), transparent 40%),
        linear-gradient(180deg, #f8f5ee 0%, #f3f0ea 100%);
}

.courier-lux.admin-theme-yellow-pop .winkels-sidebar {
    background: linear-gradient(180deg, #fff 0%, #fffdf6 100%);
}

.courier-lux .winkels-stat {
    border-radius: 1.2rem;
    border: 1px solid rgba(58, 26, 134, 0.1);
    box-shadow: 0 18px 40px -28px rgba(58, 26, 134, 0.5);
}

.courier-page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(58, 26, 134, 0.12);
}

.courier-kicker {
    margin: 0 0 0.2rem;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #8a6d12;
}

.courier-page-head h2,
.courier-compose h3 {
    margin: 0;
    font-size: 1.7rem;
    color: #3a1a86;
}

.courier-split {
    display: grid;
    gap: 1.5rem;
}

@media (min-width: 1100px) {
    .courier-split {
        grid-template-columns: minmax(0, 1.2fr) minmax(20rem, 0.8fr);
        align-items: start;
    }
}

.courier-split-list,
.courier-compose {
    display: grid;
    gap: 1rem;
}

.courier-person,
.courier-compose {
    background: #fff;
    border: 1px solid rgba(58, 26, 134, 0.1);
    border-radius: 1.25rem;
    padding: 1.15rem 1.2rem;
    box-shadow: 0 18px 40px -28px rgba(58, 26, 134, 0.45);
}

.courier-compose {
    position: sticky;
    top: 1rem;
    padding: 1.4rem 1.35rem 1.5rem;
    border-top: 3px solid #eee24b;
}

.courier-compose h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.courier-person-top {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.courier-avatar {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 1.1rem;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #fbf8de;
    box-shadow: 0 0 0 1px #3a1a86;
}

.courier-avatar.is-empty,
.driver-photo-preview.is-empty {
    display: grid;
    place-items: center;
    background: #3a1a86;
    color: #fbf8de;
    font-weight: 800;
    font-size: 1.3rem;
}

.courier-person-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
}

.courier-meta {
    margin: 0.15rem 0 0;
    color: #6b6280;
    font-size: 0.86rem;
}

.courier-person-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.9rem;
}

.driver-photo-field {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.driver-photo-preview {
    width: 4.25rem;
    height: 4.25rem;
    border-radius: 1.1rem;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #fbf8de;
    box-shadow: 0 0 0 1px #3a1a86;
}

.fleet-pick {
    display: grid;
    gap: 0.5rem;
    margin-top: 0.45rem;
}

.fleet-pick-item {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin: 0;
    padding: 0.7rem 0.8rem;
    border: 1px solid var(--winkels-border);
    border-radius: 0.9rem;
    background: #fff;
    cursor: pointer;
}

.fleet-pick-item:has(input:checked) {
    border-color: #3a1a86;
    background: #fbf8de;
}

.fleet-pick-item span {
    display: grid;
    gap: 0.1rem;
}

.fleet-pick-item small {
    color: #6b6280;
}

.fleet-pick-item em {
    font-style: normal;
    font-size: 0.78rem;
    color: #8a6d12;
}

.fleet-pick-item.is-shared {
    border-color: rgba(138, 109, 18, 0.35);
}

.courier-reg {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: #3a1a86;
    color: #fbf8de;
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums;
}

.courier-share-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: #fbf8de;
    color: #8a6d12;
    font-size: 0.72rem;
    font-weight: 700;
}

.driver-photo-field .winkels-input[type="file"] {
    padding: 0.55rem 0.7rem;
    font-size: 0.82rem;
}

.courier-page-tools {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.courier-icon-add {
    width: 2.7rem;
    height: 2.7rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 0.95rem;
    background: #3a1a86;
    color: #fbf8de;
    box-shadow: 0 10px 22px -12px #3a1a86;
    cursor: pointer;
}

.courier-icon-add svg {
    width: 1.15rem;
    height: 1.15rem;
}

.courier-icon-add:hover {
    background: #4a25a9;
}

.fleet-table-wrap {
    background: #fff;
    border: 1px solid rgba(58, 26, 134, 0.1);
    border-radius: 1.35rem;
    overflow: hidden;
    box-shadow: 0 22px 44px -30px rgba(58, 26, 134, 0.55);
}

.fleet-table th {
    background: #fbf8de !important;
    color: #3a1a86 !important;
    font-size: 0.74rem;
}

.fleet-table th,
.fleet-table td {
    padding: 0.7rem 1rem;
    vertical-align: middle;
}

[dir="rtl"] table.winkels-table th {
    text-transform: none;
    letter-spacing: 0;
}

[dir="rtl"] .fleet-table th,
[dir="rtl"] .fleet-table td {
    text-align: start;
}

.presence-num {
    unicode-bidi: isolate;
    direction: ltr;
    display: inline-block;
}

.presence-date {
    unicode-bidi: isolate;
    direction: ltr;
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--winkels-purple-950);
}

.presence-time {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 5.5rem;
    padding: 0.28rem 0.6rem;
    border-radius: 0.7rem;
    background: var(--winkels-purple-50);
    border: 1px solid rgba(117, 31, 232, 0.14);
    color: var(--winkels-purple-950);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 0.86rem;
    unicode-bidi: isolate;
    direction: ltr;
}

.presence-time.is-now {
    background: var(--winkels-brand-yellow);
    border-color: rgba(117, 31, 232, 0.16);
}

.presence-now .courier-meta {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.5rem;
}

.presence-log thead th[colspan] {
    text-align: center;
}

.presence-duration {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem 0.55rem;
    justify-content: start;
}

.fleet-table tr.is-off td {
    opacity: 0.62;
}

.fleet-empty {
    text-align: center;
    color: #6b6280;
    padding: 2.4rem 1rem !important;
}

a.fleet-plate {
    text-decoration: none;
}

.fleet-plate {
    display: inline-flex;
    align-items: center;
    min-width: 7.5rem;
    justify-content: center;
    padding: 0.42rem 0.85rem;
    border-radius: 0.55rem;
    background: linear-gradient(180deg, #fffdf4 0%, #fbf8de 100%);
    border: 2px solid #3a1a86;
    box-shadow: inset 0 0 0 1px #eee24b;
    color: #3a1a86;
    font-weight: 800;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
}

.fleet-assigned {
    display: grid;
    gap: 0.28rem;
}

.fleet-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.fleet-act {
    display: inline-flex;
    align-items: center;
    border: 1px solid rgba(58, 26, 134, 0.16);
    background: #fff;
    color: #3a1a86;
    border-radius: 999px;
    padding: 0.28rem 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
}

.fleet-act:hover {
    background: #fbf8de;
    border-color: #3a1a86;
}

.fleet-act.is-danger {
    color: #9b1c1c;
    border-color: rgba(155, 28, 28, 0.2);
}

.fleet-act.is-danger:hover {
    background: #fff1f1;
}

.fleet-sheet {
    max-width: 28rem;
}

.driver-sheet {
    max-width: 34rem;
}

.driver-sheet.is-zones {
    max-width: min(48rem, calc(100vw - 2rem));
}

.driver-zone-map-wrap {
    display: grid;
    gap: 0.35rem;
}

.driver-zone-map-wrap .zone-map {
    height: 18rem;
}

.driver-cell {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

.driver-cell-photo {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 0.8rem;
    object-fit: cover;
    flex-shrink: 0;
    border: 2px solid #fbf8de;
    box-shadow: 0 0 0 1px #3a1a86;
}

.driver-cell-photo.is-empty {
    display: grid;
    place-items: center;
    background: #3a1a86;
    color: #fbf8de;
    font-weight: 800;
}

.ops-settings-stack {
    display: grid;
    gap: 1.15rem;
    max-width: 28rem;
}

.courier-settings {
    display: grid;
    gap: 1.15rem;
}

.courier-settings.is-account {
    grid-template-columns: 1fr;
}

@media (min-width: 980px) {
    .courier-settings:not(.is-account) {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .courier-settings.is-account {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .courier-settings.is-account .ops-settings:first-child,
    .courier-settings.is-account .courier-settings-wide {
        grid-column: 1 / -1;
    }
}

.courier-settings-live {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.7rem;
    color: #8a6d12;
    font-size: 0.82rem;
    font-weight: 700;
}

.courier-settings-live strong {
    color: #3a1a86;
    font-size: 1rem;
}

.courier-settings-live em {
    font-style: normal;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    background: #eee24b;
    color: #3a1a86;
}

.ops-settings {
    background: #fff;
    border: 1px solid rgba(58, 26, 134, 0.1);
    border-radius: 1.35rem;
    padding: 1.35rem 1.45rem 1.25rem;
    box-shadow: 0 22px 44px -30px rgba(58, 26, 134, 0.55);
}

.ops-settings h3 {
    margin: 0;
    color: #3a1a86;
    font-size: 1.12rem;
}

.ops-settings-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.45rem 1rem;
    margin-bottom: 0.35rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(58, 26, 134, 0.08);
}

.ops-settings-head .ops-rate-note {
    margin: 0;
}

.ops-settings-grid {
    display: grid;
    gap: 0.1rem 1rem;
}

@media (min-width: 640px) {
    .ops-settings-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.ops-settings-foot {
    display: flex;
    justify-content: flex-end;
    margin-top: 1.15rem;
    padding-top: 0.15rem;
}

.ops-settings-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 0.8rem;
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(58, 26, 134, 0.08);
}

.ops-settings-row label {
    color: #3a1a86;
    font-weight: 700;
}

.ops-settings-value {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    color: #8a6d12;
    font-weight: 700;
}

.ops-settings-value .winkels-input {
    width: 5.2rem;
    text-align: center;
}

.ops-settings .menu-field {
    margin-top: 0.95rem;
}

.ops-settings .btn-winkels {
    margin-top: 0;
}

.ops-rate-note {
    margin: 0 0 0.55rem;
    color: #8a6d12;
    font-size: 0.9rem;
    font-weight: 700;
}

.ops-rate-split {
    display: grid;
    gap: 1rem;
}

@media (min-width: 900px) {
    .ops-rate-split {
        grid-template-columns: 1fr 1fr;
    }
}

.ops-rate-card {
    padding: 0.85rem 0.95rem 0.35rem;
    border: 1px solid rgba(58, 26, 134, 0.1);
    border-radius: 1.1rem;
    background: #fffdf4;
}

.ops-rate-card h4 {
    margin: 0 0 0.65rem;
    color: #3a1a86;
    font-size: 0.95rem;
}

.ops-rate-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.35rem;
}

.ops-rate-card-head h4 {
    margin: 0;
}

.ops-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 700;
    color: #3a1a86;
    cursor: pointer;
}

.courier-reset-box {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(58, 26, 134, 0.08);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.courier-profile-dl {
    display: grid;
    gap: 0.75rem 1rem;
    margin: 0.85rem 0 0;
}

@media (min-width: 640px) {
    .courier-profile-dl {
        grid-template-columns: 1fr 1fr;
    }
}

.courier-profile-dl div {
    padding: 0.75rem 0.85rem;
    border-radius: 0.9rem;
    background: rgba(117, 31, 232, 0.05);
}

.courier-profile-dl dt {
    margin: 0 0 0.2rem;
    font-size: 0.78rem;
    color: #6d6a86;
    font-weight: 700;
}

.courier-profile-dl dd {
    margin: 0;
    color: #280852;
    font-weight: 700;
}

.courier-docs {
    display: grid;
    gap: 0.75rem;
}

.courier-doc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem 1rem;
    padding: 0.85rem 0;
    border-bottom: 1px solid rgba(58, 26, 134, 0.08);
}

.courier-doc:last-child {
    border-bottom: 0;
}

.courier-doc h4 {
    margin: 0 0 0.2rem;
    color: #3a1a86;
    font-size: 1rem;
}

.courier-doc-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.ops-rate-modes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    padding: 0.45rem 0 0.35rem;
}

.ops-rate-choice span {
    white-space: nowrap;
}

.ops-rate-choice {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border: 1px solid rgba(58, 26, 134, 0.12);
    border-radius: 999px;
    color: #3a1a86;
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
}

.ops-rate-choice:has(input:checked) {
    background: rgba(58, 26, 134, 0.08);
    border-color: #3a1a86;
}

.ops-rate-choice input {
    margin: 0;
}

.ops-alerts {
    display: grid;
    gap: 0.55rem;
    margin: 0 0 1.4rem;
}

.ops-alert {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 0.9rem;
    padding: 0.75rem 1rem;
    background: #fff;
    border: 1px solid rgba(58, 26, 134, 0.12);
    border-radius: 1rem;
    color: #3a1a86;
    text-decoration: none;
    box-shadow: 0 18px 40px -28px rgba(58, 26, 134, 0.45);
}

.ops-alert em {
    margin-inline-start: auto;
    font-style: normal;
    font-size: 0.78rem;
    font-weight: 700;
}

.ops-alert.is-pickup_late {
    border-color: #eee24b;
    background: #fffdf0;
}

.ops-alert.is-dropoff_late {
    background: #3a1a86;
    color: #fbf8de;
    border-color: #3a1a86;
}

.ops-alert.is-dropoff_late .fleet-plate {
    background: #eee24b;
    color: #3a1a86;
}

.ops-alert.is-stale_location {
    opacity: 0.78;
}

.ops-alert.is-driver_issue {
    background: #fef2f2;
    border-color: #c62828;
    color: #9b1c1c;
}

.ops-driver-filter {
    align-items: center;
}

.ops-refresh {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    gap: 0.45rem;
    padding-block: 0.25rem;
    padding-inline-start: 0.7rem;
    padding-inline-end: 0.3rem;
    border: 1px solid rgba(58, 26, 134, 0.14);
    border-radius: 999px;
    background: #fff;
}

.ops-refresh-meta {
    font-size: 0.78rem;
    font-weight: 700;
    color: #5a4478;
    white-space: nowrap;
}

.ops-refresh-meta strong {
    font-variant-numeric: tabular-nums;
}

.ops-refresh-btn {
    border: 0;
    border-radius: 999px;
    background: #6d5a8f;
    color: #fff;
    font: 700 0.78rem Tajawal, sans-serif;
    padding: 0.42rem 0.85rem;
    cursor: pointer;
}

.ops-refresh-btn:hover {
    background: #5a4478;
}

.ops-toolbar {
    display: grid;
    grid-template-columns: minmax(16rem, 1.4fr) minmax(12rem, 0.7fr) auto;
    gap: 0.75rem 0.85rem;
    align-items: end;
    margin: 0.85rem 0 1rem;
    padding: 0.85rem 1rem;
    background: #fff;
    border: 1px solid rgba(58, 26, 134, 0.12);
    border-radius: 1rem;
}

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

.ops-find {
    position: relative;
    min-width: 0;
}

.ops-find-search,
.ops-driver-names {
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
}

.ops-find-search .winkels-input,
.ops-driver-names .winkels-input {
    width: 100%;
    min-height: 2.4rem;
}

.ops-find-menu {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 0.35rem);
    z-index: 30;
    display: grid;
    gap: 0.2rem;
    max-height: 18rem;
    overflow: auto;
    padding: 0.4rem;
    background: #fff;
    border: 1px solid rgba(58, 26, 134, 0.14);
    border-radius: 0.85rem;
    box-shadow: 0 12px 28px rgba(40, 8, 82, 0.1);
}

.ops-find-option {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    border: 0;
    background: transparent;
    text-align: start;
    padding: 0.5rem 0.55rem;
    border-radius: 0.65rem;
    cursor: pointer;
    color: inherit;
    font: inherit;
}

.ops-find-option:hover {
    background: #f6f1ff;
}

.ops-find-option em {
    display: block;
    font-style: normal;
    color: #8a6d12;
    font-size: 0.75rem;
    font-weight: 700;
}

.ops-find-empty {
    margin: 0;
    padding: 0.55rem 0.4rem;
    color: #6b6280;
    font-size: 0.82rem;
}

.ops-toolbar .ops-missed {
    justify-self: start;
    align-self: end;
}

.ops-toolbar .ops-missed-btn {
    min-height: 2.4rem;
    white-space: nowrap;
}

.ops-filter-label {
    color: #3a1a86;
    font-size: 0.78rem;
    font-weight: 700;
}

.ops-stage {
    display: grid;
    gap: 1rem;
    margin-bottom: 0.4rem;
}

@media (min-width: 1100px) {
    .ops-stage.is-focus {
        grid-template-columns: minmax(0, 1.35fr) minmax(22rem, 0.85fr);
        align-items: stretch;
    }

    .ops-stage.is-focus .ops-map {
        min-height: 28rem;
        height: 100%;
    }
}

.ops-map-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.75rem 1rem 0;
}

.ops-focus-zones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin: 0 0 0.4rem;
}

.ops-zone-chip,
.ops-pin-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: #fbf8de;
    border: 1px solid rgba(58, 26, 134, 0.16);
    color: #3a1a86;
    font-size: 0.74rem;
    font-weight: 700;
}

.ops-pin-chip::before {
    content: "";
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 999px;
    background: currentColor;
}

.ops-pin-chip.is-car::before {
    width: 0.82rem;
    height: 0.58rem;
    border-radius: 0.16rem;
}

.ops-pin-chip.is-free {
    color: #15803d;
    background: #ecfdf3;
    border-color: rgba(21, 128, 61, 0.28);
}

.ops-pin-chip.is-busy {
    color: #c62828;
    background: #fef2f2;
    border-color: rgba(198, 40, 40, 0.28);
}

.ops-pin-chip.is-offline {
    color: #6b7280;
    background: #f3f4f6;
    border-color: rgba(107, 114, 128, 0.28);
}

.ops-place-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    font-size: 0.74rem;
    font-weight: 700;
}

.ops-place-chip.is-pickup {
    color: #fff;
    background: #6d5a8f;
    border: 1px solid #6d5a8f;
}

.ops-place-chip.is-dropoff {
    color: #fff;
    background: #3d6b8a;
    border: 1px solid #3d6b8a;
}

.ops-place-chip.is-driver {
    color: #fff;
    background: #b45309;
    border: 1px solid #b45309;
}

.ops-place-chip.is-route {
    color: #5a4478;
    background: #f0ebf6;
    border: 1px solid #d4c8e4;
}

.ops-trip-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.15rem 1rem 0.75rem;
}

.ops-trip-card {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem 0.65rem;
    padding: 0.45rem 0.75rem;
    border-radius: 0.9rem;
    background: #f7f4fb;
    border: 1px solid #d4c8e4;
    color: #5a4478;
    text-decoration: none;
    font-size: 0.82rem;
}

.ops-trip-card strong {
    color: #5a4478;
}

.ops-trip-card em,
.ops-trip-card span:not(.fleet-plate) {
    color: #6d5a8f;
    font-style: normal;
    font-weight: 700;
}

.ops-trip-card.is-idle {
    background: #fff;
}

.ops-trip-empty {
    margin: 0;
    padding: 0 1rem 0.75rem;
    color: #5a4478;
    font-size: 0.86rem;
}

.ops-trip-map-card {
    margin-bottom: 1.4rem;
}

.ops-map-tip {
    font: 700 13px/1.45 Tajawal, 'Plus Jakarta Sans', sans-serif;
    color: #5a4478;
    min-width: 8rem;
}

.ops-map-tip-line {
    margin-top: 0.2rem;
    font-weight: 600;
    opacity: 0.84;
}

.ops-wait {
    font-weight: 800;
    color: #3a1a86;
}

.ops-wait.is-late {
    color: #c62828;
}

.ops-trip-km {
    font-weight: 800;
    color: #3a1a86;
    white-space: nowrap;
}

.ops-pick-list {
    display: grid;
    gap: 0.45rem;
    margin: 0;
    padding: 0.2rem 0 0.6rem;
    list-style: none;
}

.ops-pick-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.55rem;
    padding: 0.65rem 0.75rem;
    border: 1px solid rgba(58, 26, 134, 0.1);
    border-radius: 0.9rem;
}

.ops-pick-row em,
.ops-pick-state {
    display: block;
    font-style: normal;
    color: #8a6d12;
    font-size: 0.74rem;
    font-weight: 700;
}

.ops-pick-row.is-busy .ops-pick-state {
    color: #c62828;
}

.ops-pick-row.is-offline .ops-pick-state {
    color: #6b7280;
}

.ops-pick-row form {
    margin-inline-start: auto;
}

.ops-pick-list .is-empty {
    color: #6b6280;
    padding: 0.7rem 0.2rem;
}

.ops-order-go {
    color: inherit;
    text-decoration: none;
}

.ops-order-go:hover strong {
    text-decoration: underline;
}

.ops-dispatch .ops-map {
    min-height: 28rem;
    height: 28rem;
}

.ops-map-assign {
    margin-top: 0.45rem;
}

.ops-map-assign button {
    border: 0;
    border-radius: 999px;
    background: #5a2db0;
    color: #fff;
    font: 700 0.78rem/1 Tajawal, sans-serif;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
}

.ops-missed {
    position: relative;
}

.ops-missed-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.75rem;
    border-radius: 999px;
    border: 1px solid rgba(58, 26, 134, 0.16);
    background: #fff;
    color: #3a1a86;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.ops-missed-btn svg {
    width: 1.05rem;
    height: 1.05rem;
    stroke: currentColor;
    fill: none;
}

.ops-missed-btn.is-hot {
    background: #fef2f2;
    border-color: #c62828;
    color: #c62828;
}

.ops-missed-badge {
    min-width: 1.25rem;
    padding: 0.05rem 0.35rem;
    border-radius: 999px;
    background: #c62828;
    color: #fff;
    font-style: normal;
    font-size: 0.7rem;
    text-align: center;
}

.ops-missed-panel {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.45rem);
    z-index: 20;
    width: min(26rem, 88vw);
    max-height: 28rem;
    overflow: auto;
    padding: 0.7rem;
    background: #fff;
    border: 1px solid rgba(58, 26, 134, 0.12);
    border-radius: 1.1rem;
    box-shadow: 0 22px 44px -28px rgba(58, 26, 134, 0.55);
}

.ops-missed-order {
    display: grid;
    gap: 0.45rem;
    padding: 0.7rem 0.75rem;
    margin-bottom: 0.45rem;
    border: 1px solid rgba(58, 26, 134, 0.1);
    border-radius: 0.9rem;
    text-decoration: none;
    color: #3a1a86;
}

.ops-missed-order-head:hover {
    color: #2a1263;
}

.ops-missed-order-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.65rem;
    text-decoration: none;
    color: inherit;
}

.ops-missed-order-head em {
    margin-inline-start: auto;
    font-style: normal;
    font-size: 0.74rem;
    font-weight: 700;
    color: #c62828;
}

.ops-missed-drivers {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ops-missed-label {
    margin: 0.45rem 0 0.2rem;
    color: #8a6d12;
    font-size: 0.72rem;
    font-weight: 700;
}

.ops-missed-drivers li {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.ops-missed-drivers form {
    margin-inline-start: auto;
}

.ops-missed-drivers .fleet-act {
    padding: 0.22rem 0.65rem;
    font-size: 0.72rem;
}

.ops-missed-drivers em,
.ops-missed-report-drivers span {
    display: block;
    font-style: normal;
    color: #8a6d12;
    font-size: 0.74rem;
    font-weight: 700;
}

.ops-missed-drivers.is-rejected {
    opacity: 0.82;
}

.ops-missed-drivers .is-empty,
.ops-missed-empty {
    color: #6b6280;
    margin: 0.4rem 0;
}

.ops-missed-more {
    display: block;
    padding: 0.45rem 0.2rem 0.15rem;
    text-align: center;
    color: #3a1a86;
    font-size: 0.78rem;
    font-weight: 700;
}

.ops-missed-report-drivers {
    display: grid;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ops-missed-report-drivers a {
    color: #3a1a86;
    font-weight: 700;
    text-decoration: none;
}

.ops-driver-report {
    background: #fff;
    border: 1px solid rgba(58, 26, 134, 0.1);
    border-radius: 1.35rem;
    padding: 1.15rem 1.2rem 1.25rem;
    box-shadow: 0 22px 44px -30px rgba(58, 26, 134, 0.55);
}

.ops-driver-report-head {
    display: flex;
    gap: 0.9rem;
    align-items: flex-start;
}

.ops-driver-report-head h3 {
    margin: 0;
    color: #3a1a86;
    font-size: 1.2rem;
}

.ops-driver-kpis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem;
    margin: 1rem 0 0.6rem;
}

.ops-driver-kpi {
    background: #fbf8de;
    border-radius: 1rem;
    padding: 0.75rem 0.85rem;
}

.ops-driver-kpi span {
    display: block;
    color: #8a6d12;
    font-size: 0.72rem;
    font-weight: 700;
}

.ops-driver-kpi strong {
    display: block;
    margin-top: 0.2rem;
    color: #3a1a86;
    font-size: 1.05rem;
}

.ops-focus-orders {
    display: grid;
    gap: 0.55rem;
}

.ops-focus-order {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.7rem;
    border: 1px solid rgba(58, 26, 134, 0.1);
    border-radius: 1rem;
    text-decoration: none;
    color: #3a1a86;
}

.ops-focus-order:hover {
    background: #fffdf0;
    border-color: #3a1a86;
}

.ops-focus-order span:last-child {
    display: grid;
    gap: 0.1rem;
}

.ops-focus-order em {
    font-style: normal;
    color: #8a6d12;
    font-size: 0.74rem;
    font-weight: 700;
}

.ops-order-report-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}

.ops-order-report-meta {
    display: grid;
    gap: 0.15rem;
    margin-bottom: 0.4rem;
    color: #3a1a86;
}

.ops-order-report-meta span {
    color: #6b6280;
    font-size: 0.86rem;
}

.ops-order-times {
    display: grid;
    gap: 0.45rem;
    margin-top: 0.4rem;
}

.ops-order-time {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.4rem 1rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid rgba(58, 26, 134, 0.08);
    color: #3a1a86;
    font-size: 0.86rem;
}

.ops-order-items {
    margin-top: 0.4rem;
}

.ops-order-item {
    display: flex;
    gap: 0.6rem;
    padding: 0.35rem 0;
    color: #3a1a86;
}

.ops-map-card {
    background: #fff;
    border: 1px solid rgba(58, 26, 134, 0.1);
    border-radius: 1.35rem;
    overflow: hidden;
    box-shadow: 0 22px 44px -30px rgba(58, 26, 134, 0.55);
}

.ops-map {
    height: 26rem;
    width: 100%;
}

.ops-map-wrap {
    position: relative;
}

.ops-map-zoom {
    position: absolute;
    z-index: 3;
    right: 12px;
    bottom: 18px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 0.85rem;
    background: #fff;
    box-shadow: 0 8px 22px rgba(40, 8, 82, 0.16);
    border: 1px solid rgba(40, 8, 82, 0.12);
}

.ops-map-zoom-btn {
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    background: #fff;
    color: #280852;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}

.ops-map-zoom-btn + .ops-map-zoom-btn {
    border-top: 1px solid #eee8f5;
}

.ops-map-zoom-btn:hover {
    background: #f7f2fe;
    color: #751fe8;
}

.ops-pin {
    display: grid;
    place-items: center;
}

.ops-pin span {
    display: grid;
    place-items: center;
    min-width: 2.6rem;
    height: 2.6rem;
    padding: 0 0.35rem;
    border-radius: 0.8rem;
    background: #3a1a86;
    color: #fbf8de;
    border: 2px solid #eee24b;
    font-size: 0.68rem;
    font-weight: 800;
}

.ops-pin.is-stale span {
    background: #8b8799;
    border-color: #d9d4c4;
}

.ops-driver-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: #fff;
    border: 1px solid rgba(58, 26, 134, 0.1);
    border-radius: 1.25rem;
    padding: 1.1rem 1.2rem;
    margin-bottom: 1.4rem;
    box-shadow: 0 18px 40px -28px rgba(58, 26, 134, 0.45);
}

.ops-section {
    margin: 1.4rem 0 0.7rem;
    color: #3a1a86;
    font-size: 1.05rem;
}

.presence-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: flex-start;
    background: #fff;
    border: 1px solid rgba(58, 26, 134, 0.1);
    border-radius: 1.25rem;
    padding: 1rem 1.2rem;
    margin-bottom: 0.4rem;
}

.presence-now {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.presence-today {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    color: #3a1a86;
}

.presence-today p {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: start;
    gap: 0.5rem;
    align-items: baseline;
}

.ops-driver-link {
    color: #3a1a86;
    font-weight: 700;
}

.ops-assign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.ops-assign-select {
    min-width: 11rem;
    padding: 0.28rem 0.6rem;
    font-size: 0.8rem;
}

.ops-report-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem 0.75rem;
    margin: 0 0 1.4rem;
    padding: 0.9rem 1rem;
    background: #fff;
    border: 1px solid rgba(58, 26, 134, 0.1);
    border-radius: 1.1rem;
}

.ops-report-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0 0 0.85rem;
}

.ops-report-preset {
    display: inline-flex;
    align-items: center;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid rgba(58, 26, 134, 0.16);
    background: #fff;
    color: #3a1a86;
    font-size: 0.82rem;
    font-weight: 700;
    text-decoration: none;
}

.ops-report-preset.is-on {
    background: #751fe8;
    border-color: #751fe8;
    color: #fff;
}

.ops-filter-field {
    display: grid;
    gap: 0.25rem;
    min-width: 9.5rem;
}

.ops-filter-field.is-grow {
    flex: 1 1 16rem;
    min-width: 14rem;
}

.ops-driver-card-actions {
    margin-inline-start: auto;
}

.ops-section-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 1.4rem 0 0.7rem;
}

.ops-section-row .ops-section {
    margin: 0;
}

.ops-filter-field span {
    color: #8a6d12;
    font-size: 0.72rem;
    font-weight: 700;
}

.ops-report-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.ops-report-filters-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.65rem 0.75rem;
    flex: 1 1 16rem;
}

.statement-print {
    max-width: 52rem;
    margin: 1.5rem auto;
    padding: 1.5rem;
    background: #fff;
    color: #111;
}

.statement-print-head {
    margin-bottom: 1.25rem;
}

.statement-print-head h1 {
    margin: 0.2rem 0;
    font-size: 1.6rem;
}

.statement-print-actions {
    margin-top: 1.5rem;
}

@media print {
    .admin-layout > aside,
    .no-print,
    .sidebar-foot,
    .maintenance-banner {
        display: none !important;
    }

    .admin-layout {
        display: block !important;
    }

    .winkels-main {
        padding: 0 !important;
        overflow: visible !important;
    }

    .statement-print {
        margin: 0;
        padding: 0;
        max-width: none;
    }
}

/* Merchant shopper-payment hall */
.pay-hall {
    display: grid;
    gap: 1.35rem;
}

.pay-hall-hero {
    position: relative;
    overflow: hidden;
    padding: 1.05rem 1.15rem 0.95rem;
    border-radius: 1rem;
    background: var(--winkels-gradient-deep);
    color: #fff;
    box-shadow: var(--winkels-shadow);
}

.pay-hall-hero::after {
    content: "";
    position: absolute;
    inset: auto -12% -48% 38%;
    height: 16rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(231, 224, 111, 0.32), transparent 68%);
    pointer-events: none;
}

.pay-hall-kicker {
    margin: 0 0 0.4rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--winkels-brand-yellow);
}

.pay-hall-hero h2 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.3;
}

.pay-hall-lead {
    margin: 0.35rem 0 0;
    max-width: 38rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.55;
    font-size: 0.88rem;
}

.pay-hall-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.85rem;
}

.pay-hall-stats div {
    min-width: 7rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(231, 224, 111, 0.28);
}

.pay-hall-stats strong {
    display: block;
    font-size: 1.15rem;
    color: var(--winkels-brand-yellow);
}

.pay-hall-stats span {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.72);
}

.pay-hall-error {
    margin: 0;
    padding: 0.85rem 1rem;
    border-radius: 0.9rem;
    background: #fff4f4;
    color: #9b1c1c;
    font-weight: 700;
}

.pay-hall-list {
    display: grid;
    gap: 0.75rem;
}

.pay-method {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.65rem 0.8rem;
    padding: 0.7rem 0.85rem;
    border-radius: 0.85rem;
    background: #fff;
    border: 1px solid var(--winkels-border);
    box-shadow: var(--winkels-shadow-sm);
}

.pay-method.is-on {
    border-color: rgba(117, 31, 232, 0.28);
    background: linear-gradient(180deg, #fff 0%, #f7f2fe 100%);
    box-shadow: var(--winkels-shadow), 0 0 0 1px rgba(117, 31, 232, 0.06);
}

.pay-method.is-wait {
    background: #fcfbff;
}

.pay-method-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border-radius: 0.7rem;
    background: var(--winkels-purple-soft);
    color: var(--winkels-brand-purple);
}

.pay-method-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

.pay-method.is-on .pay-method-icon {
    background: var(--winkels-brand-yellow);
    color: var(--winkels-purple-950);
}

.pay-method-copy {
    min-width: 0;
}

.pay-method-name {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.45rem 0.7rem;
}

.pay-method h3 {
    margin: 0;
    font-size: 0.98rem;
    color: var(--winkels-purple-950);
}

.pay-method-state {
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    color: var(--winkels-purple-950);
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: var(--winkels-purple-soft);
}

.pay-method-state.is-on {
    background: #dcfce7;
    color: #166534;
}

.pay-method-state.is-off,
.pay-method.is-wait .pay-method-state {
    background: #fee2e2;
    color: #991b1b;
}

.pay-hall-group {
    margin: 0.85rem 0 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--winkels-text-muted);
}

.pay-hall-empty {
    margin: 0;
    padding: 1.15rem 1.2rem;
    border-radius: 1.15rem;
    background: #fcfbff;
    border: 1px dashed var(--winkels-border);
    color: var(--winkels-text-muted);
    line-height: 1.6;
}

.pay-method p {
    margin: 0.28rem 0 0;
    color: var(--winkels-text-muted);
    line-height: 1.55;
    font-size: 0.88rem;
}

.pay-method-action {
    justify-self: end;
}

.pay-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    border: 0;
    background: transparent;
    color: var(--winkels-purple-950);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.pay-switch-track {
    width: 2.55rem;
    height: 1.45rem;
    border-radius: 999px;
    background: #d8d0e8;
    position: relative;
    display: inline-block;
    transition: background 160ms var(--winkels-ease);
}

.pay-switch-knob {
    position: absolute;
    top: 0.16rem;
    inset-inline-start: 0.16rem;
    width: 1.12rem;
    height: 1.12rem;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--winkels-shadow-sm);
    transition: inset-inline-start 160ms var(--winkels-ease);
}

.pay-switch.is-on .pay-switch-track {
    background: var(--winkels-brand-purple);
}

.pay-switch.is-on .pay-switch-knob {
    inset-inline-start: 1.25rem;
}

.pay-method-wait {
    display: inline-block;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--winkels-brand-purple);
}

.pay-hall-note {
    margin: 0;
    color: var(--winkels-text-muted);
    font-size: 0.88rem;
}

@media (max-width: 720px) {
    .pay-hall-hero {
        padding: 1.4rem 1.15rem 1.25rem;
    }

    .pay-hall-hero h2 {
        font-size: 1.4rem;
    }

    .pay-method {
        grid-template-columns: auto 1fr;
    }

    .pay-method-action {
        grid-column: 1 / -1;
        justify-self: stretch;
    }

    .pay-switch {
        width: 100%;
        justify-content: space-between;
        padding: 0.7rem 0.85rem;
        border-radius: 0.9rem;
        background: var(--winkels-purple-soft);
    }
}

/* Courier ops — daylight glass (model 4). Regular UI font, brand purple + lime. */
.ops-glass-page.courier-lux .winkels-main {
    background:
        radial-gradient(circle at 100% 0, rgba(117, 31, 232, 0.1), transparent 34%),
        radial-gradient(circle at 0 88%, rgba(231, 224, 111, 0.16), transparent 30%),
        linear-gradient(180deg, #faf8fe 0%, #f3eefc 100%);
}

.ops-glass-page.courier-lux.admin-theme-yellow-pop .winkels-sidebar {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px) saturate(1.08);
}

.ops-glass-page h1,
.ops-glass-page h2,
.ops-glass-page h3,
.ops-glass-page h4,
.ops-glass-page .btn-winkels,
.ops-glass-page .btn-winkels-outline,
.ops-glass {
    font-family: var(--winkels-font);
}

.ops-glass {
    display: grid;
    gap: 1.15rem;
}

.ops-glass .grid-stats {
    margin-bottom: 0;
}

.ops-glass-page .courier-page-head {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.ops-glass-page .courier-page-head h2 {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 1.85rem;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--winkels-purple-950);
}

.ops-glass-page .courier-kicker {
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--winkels-text-muted);
    font-weight: 600;
}

.ops-glass-title-ico,
.ops-kpi-ico,
.ops-sheet-ico {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    color: var(--winkels-brand-purple);
    background: var(--winkels-purple-soft);
}

.ops-glass-title-ico {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.8rem;
}

.ops-glass-title-ico svg,
.ops-kpi-ico svg,
.ops-sheet-ico svg {
    width: 1.15rem;
    height: 1.15rem;
}

.ops-glass .ops-kpi-ribbon,
.ops-glass-page .grid-stats {
    margin-bottom: 1.15rem;
    gap: 0.85rem;
    grid-template-columns: repeat(auto-fit, minmax(10.2rem, 1fr));
}

.ops-glass-page .winkels-stat {
    padding: 1rem 1.05rem 1.05rem;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(117, 31, 232, 0.1);
    border-radius: 1.25rem;
    box-shadow: 0 16px 36px -28px rgba(40, 8, 82, 0.5);
    color: var(--winkels-text);
}

.ops-glass-page .winkels-stat:has(.ops-kpi-ico) {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.7rem;
}

.ops-glass-page .winkels-stat::before {
    display: none;
}

.ops-glass-page .winkels-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 40px -24px rgba(117, 31, 232, 0.32);
}

.ops-glass-page .winkels-stat .text-sm {
    opacity: 1;
    color: var(--winkels-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
}

.ops-glass-page .winkels-stat .value {
    margin-top: 0.35rem;
    color: var(--winkels-purple-950);
    font-size: 1.85rem;
    font-weight: 600;
    letter-spacing: -0.04em;
    text-shadow: none;
}

.ops-kpi-ico {
    width: 2.35rem;
    height: 2.35rem;
    border-radius: 0.85rem;
}

.ops-glass-page .winkels-stat.is-hot {
    background: #fff6f6;
    border-color: rgba(239, 68, 68, 0.16);
}

.ops-glass-page .winkels-stat.is-hot .ops-kpi-ico {
    background: #fee2e2;
    color: #dc2626;
}

.ops-glass-page .winkels-stat.is-hot .value {
    color: #b91c1c;
}

.ops-glass-page .winkels-stat.is-good .ops-kpi-ico {
    background: #ecfdf3;
    color: #15803d;
}

.ops-glass .ops-alerts {
    margin-top: 0;
}

.ops-glass .ops-alert {
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: blur(12px);
    border-color: rgba(117, 31, 232, 0.12);
    color: var(--winkels-purple-950);
}

.ops-glass-page .ops-map-card,
.ops-glass-page .ops-driver-report,
.ops-glass-page .ops-sheet,
.ops-glass-page .ops-missed-panel,
.ops-glass-page .fleet-table-wrap,
.ops-glass-page .winkels-card,
.ops-glass-page .ops-report-filters,
.ops-glass-page .ops-settings,
.ops-glass-page .courier-person,
.ops-glass-page .courier-compose,
.ops-glass-page .ops-driver-card,
.ops-glass-page .presence-summary {
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(18px);
    border: 1px solid rgba(117, 31, 232, 0.1);
    box-shadow: 0 22px 50px -32px rgba(40, 8, 82, 0.45);
}

.ops-glass-page .ops-map-card,
.ops-glass-page .ops-driver-report,
.ops-glass-page .ops-sheet,
.ops-glass-page .fleet-table-wrap,
.ops-glass-page .winkels-card,
.ops-glass-page .ops-settings,
.ops-glass-page .courier-person,
.ops-glass-page .courier-compose,
.ops-glass-page .ops-driver-card,
.ops-glass-page .presence-summary {
    border-radius: 1.45rem;
}

.ops-glass .ops-map {
    height: 28rem;
}

.ops-glass .ops-map-legend {
    padding: 0.85rem 1.05rem 0.55rem;
}

.ops-glass .ops-place-chip.is-pickup {
    background: #f5f4dc;
    color: var(--winkels-purple-950);
    border-color: rgba(117, 31, 232, 0.16);
}

.ops-glass .ops-place-chip.is-dropoff {
    background: var(--winkels-brand-purple);
    color: #fff;
    border-color: var(--winkels-brand-purple);
}

.ops-glass .ops-driver-kpi {
    background: var(--winkels-purple-50);
}

.ops-glass .ops-driver-kpi span {
    color: var(--winkels-text-muted);
}

.ops-glass .ops-driver-kpi strong,
.ops-glass .ops-driver-report-head h3,
.ops-glass .ops-wait,
.ops-glass .ops-trip-km,
.ops-glass .ops-driver-link {
    color: var(--winkels-purple-950);
}

.ops-glass .ops-focus-order:hover {
    background: var(--winkels-purple-50);
    border-color: var(--winkels-brand-purple);
}

.ops-board-tables {
    display: grid;
    gap: 0;
}

.ops-deck {
    display: grid;
    gap: 1rem;
}

.ops-glass-page .ops-sheet + .ops-sheet,
.ops-glass-page .ops-deck + .ops-sheet,
.ops-glass-page .fleet-table-wrap + .ops-sheet,
.ops-glass-page .ops-sheet + .fleet-table-wrap {
    margin-top: 1.15rem;
}

@media (min-width: 1180px) {
    .ops-deck {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .ops-glass .ops-stage:not(.is-focus) .ops-map {
        height: 30rem;
    }
}

.ops-sheet {
    min-width: 0;
}

.ops-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.15rem 0.35rem;
}

.ops-glass-page .ops-sheet-head .ops-section {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--winkels-purple-950);
    font-size: 1.05rem;
    font-weight: 700;
}

.ops-sheet-ico {
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 0.65rem;
}

.ops-sheet-ico.is-wait {
    background: #f5f4dc;
    color: var(--winkels-purple-950);
}

.ops-sheet-count {
    min-width: 1.5rem;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    background: var(--winkels-brand-yellow);
    color: var(--winkels-purple-950);
    font-size: 0.72rem;
    font-weight: 800;
    font-style: normal;
    text-align: center;
}

.ops-glass-page .ops-sheet .fleet-table-wrap {
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 0;
    overflow-x: auto;
}

.ops-glass-page .fleet-table th {
    background: transparent !important;
    color: var(--winkels-text-muted) !important;
    font-weight: 700;
}

.ops-glass-page .fleet-table th,
.ops-glass-page .fleet-table td {
    padding: 0.62rem 0.9rem;
}

.ops-glass-page .fleet-table tbody tr:hover td {
    background: rgba(117, 31, 232, 0.035);
}

.ops-glass .ops-missed-btn,
.ops-glass .ops-assign-select {
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
}

.ops-glass .ops-missed-label,
.ops-glass .ops-focus-order em,
.ops-glass .ops-pick-row em {
    color: var(--winkels-text-muted);
}

.ops-glass .ops-missed-more,
.ops-glass .ops-filter-label {
    color: var(--winkels-brand-purple);
}

.ops-glass-page .ops-report-filters {
    border-radius: 1.25rem;
}

.ops-glass-page .ops-filter-field span,
.ops-glass-page .ops-rate-note,
.ops-glass-page .courier-settings-live,
.ops-glass-page .ops-settings-value {
    color: var(--winkels-text-muted);
}

.ops-glass-page .ops-settings h3,
.ops-glass-page .ops-settings-row label,
.ops-glass-page .courier-settings-live strong,
.ops-glass-page .ops-section {
    color: var(--winkels-purple-950);
}

.ops-glass-page .courier-compose {
    border-top: 3px solid var(--winkels-brand-purple);
}

.ops-glass-page .courier-settings-live em {
    background: var(--winkels-brand-yellow);
    color: var(--winkels-purple-950);
}

.ops-glass-page.admin-theme-yellow-pop .winkels-tabs a.active,
.ops-glass-page.admin-theme-yellow-pop .winkels-tabs button.active {
    background: var(--winkels-brand-purple);
    color: #fff;
    box-shadow: none;
}

.ops-glass-page.admin-theme-yellow-pop table.winkels-table th {
    background: transparent;
    color: var(--winkels-text-muted);
}

.ops-glass-page.admin-theme-yellow-pop .btn-winkels-outline:hover {
    background: var(--winkels-purple-50);
    border-color: var(--winkels-brand-purple);
    color: var(--winkels-purple-950);
}

.ops-glass-page .winkels-tabs {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(117, 31, 232, 0.1);
}

.ops-glass-page .courier-page-head + .winkels-tabs,
.ops-glass-page .courier-page-head + .ops-report-filters,
.ops-glass-page .winkels-tabs + .ops-report-filters,
.ops-glass-page .ops-report-filters + .grid-stats,
.ops-glass-page .courier-page-head + .courier-settings,
.ops-glass-page .courier-page-head + .winkels-card {
    margin-top: 1.15rem;
}

@media (max-width: 720px) {
    .ops-glass-page .courier-page-head h2 {
        font-size: 1.4rem;
    }

    .ops-glass-page .winkels-stat .value {
        font-size: 1.55rem;
    }

    .ops-glass .ops-map {
        height: 20rem;
    }
}

.ops-glass-page .cash-driver-sheet + .cash-driver-sheet {
    margin-top: 1.15rem;
}

.cash-collect-sheet {
    max-width: 28rem;
}

.cash-collect-fields {
    display: grid;
    gap: 0.9rem;
    padding-top: 0.35rem;
}

.cash-collect-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.cash-collect-summary div {
    padding: 0.75rem 0.85rem;
    border-radius: 0.9rem;
    background: rgba(117, 31, 232, 0.06);
}

.cash-collect-summary span {
    display: block;
    font-size: 0.78rem;
    color: #6d6a86;
    margin-bottom: 0.2rem;
}

.cash-collect-summary strong {
    font-size: 1.05rem;
    color: #280852;
}

.cash-collect-fields textarea.winkels-input {
    min-height: 5.5rem;
    resize: vertical;
}

.cash-shortfall-note {
    margin-bottom: 1.15rem;
}

.cash-print-short {
    margin: 0 0 1rem;
    padding: 0.7rem 0.9rem;
    background: #fff8dc;
    border: 1px solid #e7e06f;
    font-weight: 700;
}

.cash-print {
    max-width: 52rem;
    margin: 1.5rem auto;
    padding: 1.75rem 1.8rem 2rem;
    background: #fff;
    color: #1c1235;
    font-family: 'Tajawal', 'Plus Jakarta Sans', sans-serif;
}

.cash-print-head {
    display: flex;
    justify-content: space-between;
    gap: 1.5rem;
    padding-bottom: 1rem;
    margin-bottom: 1.1rem;
    border-bottom: 2px solid #751fe8;
}

.cash-print-brand {
    margin: 0;
    color: #751fe8;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.cash-print-head h1 {
    margin: 0.15rem 0 0.25rem;
    font-size: 1.55rem;
    font-family: 'Tajawal', sans-serif;
}

.cash-print-id {
    display: grid;
    gap: 0.2rem;
    text-align: end;
    font-weight: 700;
}

.cash-print-lead,
.cash-print-foot {
    color: #6d6a86;
    line-height: 1.7;
    font-size: 0.92rem;
}

.cash-print-meta,
.cash-print-grid,
.cash-print-order table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.9rem 0 1.1rem;
}

.cash-print-meta th,
.cash-print-meta td,
.cash-print-grid th,
.cash-print-grid td,
.cash-print-order td,
.cash-print-order th {
    border: 1px solid #e6def6;
    padding: 0.45rem 0.65rem;
    text-align: start;
}

.cash-print-meta th,
.cash-print-grid th,
.cash-print-order th {
    background: #f7f2fe;
    color: #3c0f79;
    font-size: 0.78rem;
}

.cash-print-order {
    margin-top: 1.2rem;
    break-inside: avoid;
}

.cash-print h2 {
    margin: 1.15rem 0 0.2rem;
    color: #3c0f79;
    font-size: 1.05rem;
    font-family: 'Tajawal', sans-serif;
}

.cash-print-order h2 {
    margin: 0 0 0.35rem;
    font-size: 1.05rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-family: 'Tajawal', sans-serif;
}

.cash-print-order h2 span,
.cash-print-order p {
    color: #6d6a86;
    font-size: 0.88rem;
    font-weight: 600;
}

.cash-print-order .is-total td {
    font-weight: 800;
    background: #f7f2fe;
}

.cash-print-total {
    margin: 1.2rem 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #280852;
}

.cash-print-signs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

.cash-print-signs span {
    display: block;
    font-weight: 700;
    margin-bottom: 1.6rem;
}

.cash-print-signs em {
    display: block;
    border-top: 1px solid #c4a3f7;
    height: 0;
}

@media print {
    .cash-print {
        margin: 0;
        padding: 0;
        max-width: none;
    }
}

/* Super-admin pages: beat yellow-pop hardcoded colors on every view */
.admin-theme-yellow-pop.admin-theme-brand,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main,
.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar,
.admin-theme-yellow-pop.admin-theme-brand .winkels-table,
.admin-theme-yellow-pop.admin-theme-brand .winkels-stat,
.admin-theme-yellow-pop.admin-theme-brand .winkels-card,
.admin-theme-yellow-pop.admin-theme-brand .menu-field-label,
.admin-theme-yellow-pop.admin-theme-brand .winkels-input,
.admin-theme-yellow-pop.admin-theme-brand button,
.admin-theme-yellow-pop.admin-theme-brand a {
    font-weight: 700;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar a {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar a:hover {
    color: #5a4478;
    background: #f0ebf6;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar a.active {
    background: #6d5a8f;
    color: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand .nav-group-title,
.admin-theme-yellow-pop.admin-theme-brand .nav-group-title:hover,
.admin-theme-yellow-pop.admin-theme-brand .nav-group[open] > .nav-group-title,
.admin-theme-yellow-pop.admin-theme-brand .nav-group.is-current > .nav-group-title {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .nav-group-title:hover,
.admin-theme-yellow-pop.admin-theme-brand .nav-group.is-current:not([open]) > .nav-group-title {
    background: #f0ebf6;
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .sidebar-logout-btn,
.admin-theme-yellow-pop.admin-theme-brand .sidebar-logout-btn:hover {
    background: #6d5a8f;
    color: #fff;
    box-shadow: 0 4px 0 #4f3c6e;
}

.admin-theme-yellow-pop.admin-theme-brand .sidebar-lang-switch a {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .sidebar-lang-switch a:hover,
.admin-theme-yellow-pop.admin-theme-brand .sidebar-lang-switch a.is-active {
    color: #fff;
    background: #6d5a8f;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-main h1,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main h2,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main h3,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main .section-title,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main .menu-form-section-title,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main .menu-field-label {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-page > h2:first-child,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.winkels-card):not(.grid-stats):not(.winkels-tabs):not(.report-page):not(.order-detail):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2),
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .order-detail:first-child > .order-head,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page:first-child > header,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page:first-child > .ad-report-head,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page:first-child > .report-page-head,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-expenses-page > .mk-expenses-hero,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .kitchen-screen > .kitchen-head,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .reception-screen > .reception-head,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .pickup-head,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .pos-page > .pos-toolbar,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-recipe > .mk-recipe-hero,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-stock-page > .mk-inventory-head,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-courier-profile-head {
    background: #6d5a8f;
    border: 2px solid #d4c8e4;
    border-radius: 1.25rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 6px 0 #cfc3de;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-page > h2:first-child,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) h1,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .order-detail:first-child > .order-head h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page:first-child > header h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page:first-child > .ad-report-head .report-page-title {
    color: #fff;
    margin-top: 0;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) p,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .order-detail:first-child > .order-head .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .order-detail:first-child > .order-head .order-ref,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page:first-child > .ad-report-head .report-page-sub {
    color: #fff;
    opacity: 0.88;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) a:not(.btn-winkels):not(.btn-winkels-outline),
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .order-detail:first-child > .order-head a {
    color: #e8e0f2;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-stat,
.admin-theme-yellow-pop.admin-theme-brand .winkels-stat-soft {
    background: #fff;
    color: #5a4478;
    border: 2px solid #d4c8e4;
    box-shadow: 0 6px 0 #cfc3de;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-stat::before {
    background: #6d5a8f;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-stat .value,
.admin-theme-yellow-pop.admin-theme-brand .winkels-stat .text-brand {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-stat.is-hot,
.admin-theme-yellow-pop.admin-theme-brand .winkels-stat.is-alert {
    border-color: #6d5a8f;
    box-shadow: 0 6px 0 #4f3c6e;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-card,
.admin-theme-yellow-pop.admin-theme-brand .gateway-fee-card,
.admin-theme-yellow-pop.admin-theme-brand .gw-scope-card,
.admin-theme-yellow-pop.admin-theme-brand .gw-scope-note {
    background: #fff;
    border: 2px solid #d4c8e4;
    box-shadow: 0 8px 0 #e8e0f0;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-card-premium::before {
    background: #6d5a8f;
}

.admin-theme-yellow-pop.admin-theme-brand .btn-winkels,
.admin-theme-yellow-pop.admin-theme-brand .btn-winkels:hover {
    background: #6d5a8f;
    color: #fff;
    border: none;
    box-shadow: 0 4px 0 #4f3c6e;
}

.admin-theme-yellow-pop.admin-theme-brand .btn-winkels-outline,
.admin-theme-yellow-pop.admin-theme-brand .btn-winkels-outline:hover {
    background: #fff;
    color: #5a4478;
    border: 2px solid #6d5a8f;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-main .link-winkels,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main a:not(.btn-winkels):not(.btn-winkels-outline):not(.command-alert):not(.command-shortcut):not(.sidebar-logout-btn) {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand table.winkels-table th {
    background: #6d5a8f;
    color: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand table.winkels-table td {
    color: #5a4478;
    border-color: #e8e0f0;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-main .winkels-input,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="text"],
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="search"],
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="email"],
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="password"],
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="number"],
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="date"],
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="time"],
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="tel"],
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="url"],
.admin-theme-yellow-pop.admin-theme-brand .winkels-main select,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main textarea {
    border-color: #d4c8e4;
    color: #5a4478;
    background: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-main .winkels-input:focus,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="text"]:focus,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="search"]:focus,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="email"]:focus,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="password"]:focus,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="number"]:focus,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="date"]:focus,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="time"]:focus,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="tel"]:focus,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main input[type="url"]:focus,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main select:focus,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main textarea:focus {
    border-color: #5a4478;
    box-shadow: 0 0 0 3px rgba(109, 90, 143, 0.22);
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-tabs a.active,
.admin-theme-yellow-pop.admin-theme-brand .winkels-tabs button.active {
    background: #6d5a8f;
    color: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-tabs a,
.admin-theme-yellow-pop.admin-theme-brand .winkels-tabs button {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .badge,
.admin-theme-yellow-pop.admin-theme-brand .badge-active,
.admin-theme-yellow-pop.admin-theme-brand .badge-pending {
    border-color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .report-filters,
.admin-theme-yellow-pop.admin-theme-brand .analytics-toolbar,
.admin-theme-yellow-pop.admin-theme-brand .analytics-panel,
.admin-theme-yellow-pop.admin-theme-brand .analytics-kpi {
    border-color: #5a4478;
    background: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand .analytics-kpi-value,
.admin-theme-yellow-pop.admin-theme-brand .report-page-title,
.admin-theme-yellow-pop.admin-theme-brand .report-section-title,
.admin-theme-yellow-pop.admin-theme-brand .analytics-panel-title,
.admin-theme-yellow-pop.admin-theme-brand .gateway-fee-title,
.admin-theme-yellow-pop.admin-theme-brand .ad-report-hero-value,
.admin-theme-yellow-pop.admin-theme-brand .ad-report-name {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .report-period.is-on {
    background: #6d5a8f;
    color: #fff;
    border-color: #6d5a8f;
}

.admin-theme-yellow-pop.admin-theme-brand .ad-report-bar > span,
.admin-theme-yellow-pop.admin-theme-brand .ad-report .analytics-rank-bar span,
.admin-theme-yellow-pop.admin-theme-brand .ad-report .analytics-hours-bar {
    background: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-main .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .gateway-fee-hint {
    color: #5a4478;
    opacity: 0.72;
}

.admin-theme-yellow-pop.admin-theme-brand .pagination a,
.admin-theme-yellow-pop.admin-theme-brand .pagination span {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .pagination .active span,
.admin-theme-yellow-pop.admin-theme-brand .pagination [aria-current="page"] span {
    background: #6d5a8f;
    color: #fff;
    border-color: #6d5a8f;
}

.admin-theme-yellow-pop.admin-theme-brand .command-alert {
    border: 2px solid #d4c8e4;
    box-shadow: 0 4px 0 #cfc3de;
}

.admin-theme-yellow-pop.admin-theme-brand .pipeline-step {
    background: #fff;
    border: 2px solid #d4c8e4;
}

.admin-theme-yellow-pop.admin-theme-brand .pipeline-count {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-page > h2:first-child,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) h1,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .order-detail:first-child > .order-head h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page:first-child > header h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page:first-child > .ad-report-head .report-page-title {
    color: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) p,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .order-detail:first-child > .order-head .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .order-detail:first-child > .order-head .order-ref,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page:first-child > .ad-report-head .report-page-sub {
    color: #fff;
    opacity: 0.88;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) a:not(.btn-winkels):not(.btn-winkels-outline),
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .order-detail:first-child > .order-head a,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page:first-child > header a:not(.btn-winkels):not(.btn-winkels-outline) {
    color: #e8e0f2;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) .winkels-tabs a,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) .winkels-tabs button {
    color: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) .winkels-tabs a.active,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) .winkels-tabs button.active {
    background: #fff;
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page > .report-page-head .report-page-title,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-expenses-page > .mk-expenses-hero h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-expenses-page > .mk-expenses-hero .mk-expenses-title,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .kitchen-screen > .kitchen-head h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .reception-screen > .reception-head h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .pickup-head h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .pos-page > .pos-toolbar h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-recipe > .mk-recipe-hero h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-stock-page > .mk-inventory-head h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-courier-profile-head h2 {
    color: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page > .report-page-head .report-page-sub,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-expenses-page > .mk-expenses-hero p,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-expenses-page > .mk-expenses-hero .mk-expenses-sub,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .kitchen-screen > .kitchen-head .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .reception-screen > .reception-head .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .pickup-head .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .pos-page > .pos-toolbar p,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-recipe > .mk-recipe-hero .mk-recipe-eyebrow,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-stock-page > .mk-inventory-head .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-courier-profile-head .text-muted {
    color: #fff;
    opacity: 0.88;
}

.admin-theme-yellow-pop.admin-theme-brand .sidebar-merchant-profile {
    background: #fff;
    border-bottom-color: #e8e0f0;
}

.admin-theme-yellow-pop.admin-theme-brand .sidebar-merchant-profile__name {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .sidebar-brand-icon {
    border-color: #cfc3de;
    background: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand .sidebar-brand-icon:hover,
.admin-theme-yellow-pop.admin-theme-brand .sidebar-brand-icon.is-active {
    border-color: #6d5a8f;
    box-shadow: 0 0 0 3px #e8e0f2;
    background: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand .sidebar-brand-icon__fallback,
.admin-theme-yellow-pop.admin-theme-brand .sidebar-brand-icon__all {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .merchant-page-brands,
.admin-theme-yellow-pop.admin-theme-brand .admin-main-toolbar .merchant-page-brands {
    background: transparent;
    border-bottom-color: rgba(109, 90, 143, 0.16);
}

.admin-theme-yellow-pop.admin-theme-brand .merchant-page-brands__label {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .merchant-page-brand,
.admin-theme-yellow-pop.admin-theme-brand .merchant-page-branch {
    background: #fff;
    color: #5a4478;
    border: 2px solid #d4c8e4;
}

.admin-theme-yellow-pop.admin-theme-brand .merchant-page-brand.is-active,
.admin-theme-yellow-pop.admin-theme-brand .merchant-page-branch.is-active {
    background: #6d5a8f;
    color: #fff;
    border-color: #6d5a8f;
}

.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board {
    background: #fff;
    color: #5a4478;
    border: 2px solid #d4c8e4;
    box-shadow: 0 6px 0 #cfc3de;
}

.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board.is-active {
    background: #6d5a8f;
    color: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board.is-hot,
.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board.is-good {
    background: #6d5a8f;
    color: #fff;
    border-color: #6d5a8f;
}

.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board.is-hot .value,
.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board.is-good .value,
.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board.is-hot .mk-order-board-hint,
.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board.is-good .mk-order-board-hint {
    color: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand .mk-purchases-eyebrow,
.admin-theme-yellow-pop.admin-theme-brand .mk-recipe-eyebrow,
.admin-theme-yellow-pop.admin-theme-brand .mk-brands-limit {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .mk-purchase-chip.is-active {
    background: #6d5a8f;
    color: #fff;
    border-color: #6d5a8f;
}

.admin-theme-yellow-pop.admin-theme-brand .mk-purchase-add {
    background: #6d5a8f;
    color: #fff;
    box-shadow: 0 4px 0 #4f3c6e;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar,
.admin-theme-yellow-pop.admin-theme-brand.courier-lux .winkels-sidebar,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-sidebar {
    background: #fff;
    color: #5a4478;
    border: 2px solid #d4c8e4;
    box-shadow: 0 12px 0 #cfc3de;
}

.admin-theme-yellow-pop.admin-theme-brand.courier-lux .winkels-main,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-main {
    background: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand .courier-page-head,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .courier-page-head {
    background: #6d5a8f;
    border: 2px solid #d4c8e4;
    border-radius: 1.25rem;
    padding: 1rem 1.2rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 6px 0 #cfc3de;
}

.admin-theme-yellow-pop.admin-theme-brand .courier-page-head h2,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .courier-page-head h2,
.admin-theme-yellow-pop.admin-theme-brand .courier-page-head .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .courier-page-head .courier-meta {
    color: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand .courier-kicker,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .courier-kicker {
    color: #e8e0f2;
}

.admin-theme-yellow-pop.admin-theme-brand .ops-glass-title-ico,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .ops-glass-title-ico {
    background: #6d5a8f;
    color: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-stat,
.admin-theme-yellow-pop.admin-theme-brand.courier-lux .winkels-stat {
    background: #fff;
    color: #5a4478;
    border: 2px solid #d4c8e4;
    box-shadow: 0 6px 0 #cfc3de;
}

.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-stat .value,
.admin-theme-yellow-pop.admin-theme-brand.courier-lux .winkels-stat .value {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-card,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .fleet-table-wrap,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .ops-sheet,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .ops-map-card,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .courier-person,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .courier-compose,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .ops-settings,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .ops-report-filters {
    background: #fff;
    border: 2px solid #d4c8e4;
    box-shadow: 0 8px 0 #e8e0f0;
}

.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .fleet-table th,
.admin-theme-yellow-pop.admin-theme-brand table.fleet-table th {
    background: #6d5a8f;
    color: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .btn-winkels,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .courier-icon-add,
.admin-theme-yellow-pop.admin-theme-brand .courier-icon-add,
.admin-theme-yellow-pop.admin-theme-brand .courier-icon-add:hover {
    background: #6d5a8f;
    color: #fff;
    box-shadow: 0 4px 0 #4f3c6e;
}

.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .btn-winkels-outline {
    background: #fff;
    color: #5a4478;
    border: 2px solid #6d5a8f;
}

.admin-theme-yellow-pop.admin-theme-brand .staff-row strong,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main .staff-row {
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-hero {
    background: #6d5a8f;
    border: 2px solid #d4c8e4;
    box-shadow: 0 8px 0 #cfc3de;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-hero-kicker {
    color: #e8e0f2;
}

.admin-theme-yellow-pop.admin-theme-brand .ops-report-preset.is-on {
    background: #6d5a8f;
    border-color: #6d5a8f;
    color: #fff;
}

/* Calm purple admin: keep plum, drop yellow, drop comic offsets. */
.admin-theme-yellow-pop,
.admin-theme-brand {
    --yp-yellow: #e4dceb;
    --winkels-brand-yellow: #e4dceb;
    --winkels-gold: #e4dceb;
    --winkels-gold-light: #efe8f6;
    --winkels-gold-soft: #f7f4fb;
    --winkels-bg: #f4f2f7;
}

body:has(.admin-theme-yellow-pop),
body:has(.admin-theme-brand) {
    background: #f4f2f7;
}

.admin-theme-yellow-pop.admin-layout,
.admin-theme-brand.admin-layout {
    background: #f4f2f7;
    padding: 1.15rem;
    gap: 1.15rem;
}

.admin-theme-yellow-pop .winkels-sidebar,
.admin-theme-brand .winkels-sidebar,
.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar,
.admin-theme-yellow-pop.admin-theme-brand.courier-lux .winkels-sidebar,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-sidebar {
    border: 1px solid #e4dceb;
    box-shadow: none;
    background: #fff;
}

.admin-theme-yellow-pop .winkels-main,
.admin-theme-brand .winkels-main,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main,
.admin-theme-yellow-pop.admin-theme-brand.courier-lux .winkels-main,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-main {
    background: #f4f2f7;
    box-shadow: none;
}

.admin-theme-yellow-pop .sidebar-brand-icon.is-active,
.admin-theme-yellow-pop.admin-theme-brand .sidebar-brand-icon.is-active {
    background: #f0ebf6;
    border-color: #6d5a8f;
    box-shadow: none;
}

.admin-theme-yellow-pop .merchant-page-brand.is-active,
.admin-theme-yellow-pop .merchant-page-branch.is-active {
    background: #6d5a8f;
    color: #fff;
    border-color: #6d5a8f;
}

.admin-theme-yellow-pop .winkels-stat::before,
.admin-theme-yellow-pop .winkels-card-premium::before {
    background: #6d5a8f;
}

.admin-theme-yellow-pop .winkels-tabs a.active,
.admin-theme-yellow-pop .winkels-tabs button.active {
    background: #6d5a8f;
    color: #fff;
}

.admin-theme-yellow-pop table.winkels-table th {
    background: #f7f4fb;
    color: #5a4478;
}

.admin-theme-yellow-pop .winkels-input:focus {
    box-shadow: 0 0 0 3px rgba(109, 90, 143, 0.18);
}

.admin-theme-yellow-pop .btn-winkels-outline:hover {
    background: #f7f4fb;
    border-color: #6d5a8f;
    color: #5a4478;
}

.admin-theme-yellow-pop .mk-purchase-chip.is-active {
    background: #6d5a8f;
    color: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main,
.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar,
.admin-theme-yellow-pop.admin-theme-brand .winkels-table,
.admin-theme-yellow-pop.admin-theme-brand .winkels-stat,
.admin-theme-yellow-pop.admin-theme-brand .winkels-card,
.admin-theme-yellow-pop.admin-theme-brand .menu-field-label,
.admin-theme-yellow-pop.admin-theme-brand .winkels-input,
.admin-theme-yellow-pop.admin-theme-brand button,
.admin-theme-yellow-pop.admin-theme-brand a {
    font-weight: 600;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-page > h2:first-child,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.winkels-card):not(.grid-stats):not(.winkels-tabs):not(.report-page):not(.order-detail):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2),
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .order-detail:first-child > .order-head,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page:first-child > header,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page:first-child > .ad-report-head,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page:first-child > .report-page-head,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-expenses-page > .mk-expenses-hero,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .kitchen-screen > .kitchen-head,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .reception-screen > .reception-head,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .pickup-head,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .pos-page > .pos-toolbar,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-recipe > .mk-recipe-hero,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-stock-page > .mk-inventory-head,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-courier-profile-head,
.admin-theme-yellow-pop.admin-theme-brand .sa-hero,
.admin-theme-yellow-pop.admin-theme-brand .courier-page-head,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .courier-page-head {
    background: #fff;
    border: 1px solid #e4dceb;
    box-shadow: none;
    color: #5a4478;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) h1,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page > .report-page-head .report-page-title,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .mk-expenses-page > .mk-expenses-hero h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .kitchen-screen > .kitchen-head h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .reception-screen > .reception-head h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .pickup-head h2,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .pos-page > .pos-toolbar h2,
.admin-theme-yellow-pop.admin-theme-brand .courier-page-head h2,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .courier-page-head h2 {
    color: #4a25a9;
}

.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2) p,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .report-page > .report-page-head .report-page-sub,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .kitchen-screen > .kitchen-head .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > .reception-screen > .reception-head .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .courier-page-head .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .courier-page-head .courier-meta,
.admin-theme-yellow-pop.admin-theme-brand .sa-hero-kicker,
.admin-theme-yellow-pop.admin-theme-brand .courier-kicker {
    color: #6d6a80;
    opacity: 1;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-stat,
.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board,
.admin-theme-yellow-pop.admin-theme-brand .winkels-card,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-stat,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-card,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .fleet-table-wrap,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .ops-sheet,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .ops-map-card {
    box-shadow: none;
    border: 1px solid #e4dceb;
}

.admin-theme-yellow-pop.admin-theme-brand .sidebar-logout-btn,
.admin-theme-yellow-pop.admin-theme-brand .sidebar-logout-btn:hover,
.admin-theme-yellow-pop.admin-theme-brand .mk-purchase-add {
    box-shadow: none;
}

/* Wide-card orders + analytics (concept C). Arabic inherits page RTL; Latin/numbers isolate LTR. */
.mk-wide-page {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mk-wide-page [dir="ltr"] {
    unicode-bidi: isolate;
    text-align: start;
}

.mk-wide-page [dir="auto"] {
    unicode-bidi: isolate;
    text-align: start;
}

.mk-wide-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.85rem;
}

.mk-wide-metrics--sub {
    gap: 0.7rem;
}

.mk-wide-metric {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.28rem;
    min-height: 7.2rem;
    padding: 1.15rem 1.2rem;
    border: 1px solid #e4dceb;
    border-radius: 18px;
    background: #fff;
    color: inherit;
    text-decoration: none;
}

.mk-wide-metric.is-sub {
    min-height: 5.6rem;
    padding: 0.95rem 1.05rem;
}

.mk-wide-metric__label {
    font-size: 0.82rem;
    font-weight: 600;
    color: #6d6a80;
}

.mk-wide-metric__value {
    font-size: 1.85rem;
    line-height: 1.15;
    font-weight: 700;
    color: #4a25a9;
    font-variant-numeric: tabular-nums;
}

.mk-wide-metric.is-sub .mk-wide-metric__value {
    font-size: 1.35rem;
}

.mk-wide-metric__hint {
    font-size: 0.75rem;
    line-height: 1.45;
    color: #8a8498;
}

.mk-wide-metric.is-active {
    background: #f0ebf6;
    border-color: #6d5a8f;
}

.mk-wide-metric.is-alert {
    border-color: #f1c4c8;
}

.mk-wide-metric.is-alert .mk-wide-metric__value {
    color: #b42318;
}

.mk-wide-metric.is-alert.is-active {
    background: #fdf2f4;
}

.mk-wide-metric.is-hot .mk-wide-metric__value {
    color: #b42318;
}

.mk-wide-metric.is-good .mk-wide-metric__value {
    color: #067647;
}

.mk-order-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.mk-order-list__empty {
    margin: 0;
    padding: 2rem 1rem;
    text-align: center;
    color: #6d6a80;
}

.mk-order-table {
    overflow: visible;
    border: none;
    border-radius: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 0.15rem 0 0.4rem;
}

.mk-order-table__head,
.mk-order-table .mk-order-row {
    display: grid;
    grid-template-columns: 9.2rem minmax(8.2rem, 1.25fr) minmax(7.2rem, 0.95fr) minmax(7.6rem, 1fr) minmax(7.6rem, 1fr) 6.6rem 8rem 1.35rem;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    align-items: start;
    justify-items: start;
    text-align: start;
    padding: 0.85rem 1.15rem;
    box-sizing: border-box;
}

.mk-order-list.is-all-brands .mk-order-table__head,
.mk-order-list.is-all-brands .mk-order-table .mk-order-row {
    grid-template-columns: 9.2rem minmax(7.6rem, 1.1fr) minmax(6.8rem, 0.8fr) minmax(7rem, 0.9fr) minmax(7.4rem, 1fr) minmax(7.4rem, 1fr) 6.6rem 8rem 1.35rem;
}

.mk-order-table__head {
    background: #f7f2fe;
    border: 1px solid #e4dceb;
    border-radius: 14px;
    font-size: 0.72rem;
    font-weight: 800;
    color: #5a4478;
}

.mk-order-table__head > * {
    min-width: 0;
    text-align: start;
}

.mk-order-table .mk-order-row {
    position: relative;
    border: 2px solid #d9ccec;
    border-radius: 18px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(40, 8, 82, 0.08);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.mk-order-table .mk-order-row:last-child {
    border-bottom: 2px solid #d9ccec;
}

.mk-order-table .mk-order-row:hover,
.mk-order-table .mk-order-row:focus-visible {
    border-color: #751fe8;
    background: #fbf7ff;
    box-shadow: 0 8px 22px rgba(117, 31, 232, 0.16);
    transform: translateY(-1px);
}

.mk-order-row__go,
.mk-order-row__go-slot {
    width: 1.35rem;
    justify-self: center;
    align-self: center;
}

.mk-order-row__go {
    color: #8b74c2;
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

.mk-order-row__go::before {
    content: "‹";
}

body.ltr .mk-order-row__go::before {
    content: "›";
}

.mk-order-table .mk-order-row:hover .mk-order-row__go,
.mk-order-table .mk-order-row:focus-visible .mk-order-row__go {
    color: #751fe8;
}

.mk-order-row.is-late:not(.is-done) {
    background: #fdf2f4;
    border-color: #f1c4c8;
}

.mk-order-row.is-cancelled {
    opacity: 0.72;
}

.mk-order-row__k {
    display: none;
}

.mk-order-table .mk-order-row > *:not(.mk-order-row__go) {
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    text-align: start;
    min-width: 0;
    width: 100%;
}

.mk-txt-ar,
.mk-txt-en,
.mk-num {
    display: block;
    max-width: 100%;
    text-align: start;
    unicode-bidi: isolate;
}

.mk-txt-en,
.mk-num {
    direction: ltr;
    font-variant-numeric: tabular-nums;
}

body.ltr .mk-order-table,
body.ltr .mk-order-table__head,
body.ltr .mk-order-table .mk-order-row {
    direction: ltr;
}

body.rtl .mk-order-table,
body.rtl .mk-order-table__head,
body.rtl .mk-order-table .mk-order-row {
    direction: rtl;
}

body.ltr .mk-order-table .mk-order-row > *:not(.mk-order-row__go),
body.rtl .mk-order-table .mk-order-row > *:not(.mk-order-row__go) {
    text-align: start;
    align-items: start;
}

.mk-order-row__id {
    gap: 0.28rem;
}

.mk-order-row__id .order-ref-link {
    font-size: 0.95rem;
}

.mk-order-row__who,
.mk-order-row__cell,
.mk-order-row__money {
    gap: 0.2rem;
}

.mk-order-row__who .mk-orders-customer-name,
.mk-order-row__cell > span:not(.mk-order-row__k):not(.mk-orders-source) {
    display: block;
    font-weight: 600;
    color: #2a2540;
}

.mk-order-row__money strong {
    display: block;
    font-size: 1.05rem;
    color: #4a25a9;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
    .mk-order-table__head {
        display: none;
    }

    .mk-order-table .mk-order-row,
    .mk-order-list.is-all-brands .mk-order-table .mk-order-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 0.65rem;
        row-gap: 0.45rem;
        padding: 0.85rem 0.9rem;
    }

    .mk-order-row__id {
        grid-column: 1;
        grid-row: 1;
    }

    .mk-order-row__money {
        grid-column: 2;
        grid-row: 1;
        align-items: end;
        text-align: end;
    }

    .mk-order-row__who,
    .mk-order-row__cell,
    .mk-order-row__flags {
        grid-column: 1 / -1;
    }

    .mk-order-row__go,
    .mk-order-row__go-slot {
        display: none;
    }

    .mk-order-table .mk-order-row > *[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.12rem;
        font-size: 0.68rem;
        font-weight: 800;
        color: #7a6d90;
    }

    .mk-order-row__id[data-label]::before,
    .mk-order-row__money[data-label]::before {
        display: none;
    }

    .mk-orders-toolbar-actions {
        margin-inline-start: 0;
        width: 100%;
    }

    .mk-orders-toolbar-actions .btn-winkels-outline {
        width: 100%;
        justify-content: center;
        text-align: center;
    }
}

.mk-order-row__flags {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: start;
    gap: 0.35rem;
}

.mk-order-row .mk-orders-source {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    gap: 0.3rem;
    width: 100%;
}

.mk-wide-sheet {
    overflow: hidden;
    padding: 0.35rem 0 0.85rem;
    border: 1px solid #e4dceb;
    border-radius: 18px;
    background: #fff;
}

.mk-wide-sheet .mk-expenses-table-head {
    padding: 1rem 1.2rem 0.7rem;
}

.mk-wide-bars {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 0 1.2rem 0.4rem;
}

.mk-wide-bar {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mk-wide-bar__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.mk-wide-bar__name {
    font-weight: 700;
    color: #2a2540;
}

.mk-wide-bar__name em {
    font-style: normal;
    font-weight: 600;
    color: #8a8498;
}

.mk-wide-bar__money {
    font-variant-numeric: tabular-nums;
    color: #4a25a9;
}

.mk-wide-bar__meta {
    margin: 0;
    font-size: 0.78rem;
    color: #6d6a80;
}

.mk-wide-page .mk-perf-share em {
    unicode-bidi: isolate;
    direction: ltr;
}

.mk-orders-page .mk-orders-main-tabs {
    gap: 0.7rem;
}

.mk-orders-page .mk-perf-view {
    box-shadow: none;
    border-color: #e4dceb;
}

.mk-orders-page .mk-perf-view.is-active {
    background: #f0ebf6;
    border-color: #6d5a8f;
    box-shadow: none;
}

@media (max-width: 1100px) {
    .mk-wide-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mk-order-table__head {
        display: none;
    }

    .mk-order-table .mk-order-row,
    .mk-order-list.is-all-brands .mk-order-table .mk-order-row {
        grid-template-columns: 1fr 1fr;
    }

    .mk-order-row__go,
    .mk-order-row__go-slot {
        display: none;
    }

    .mk-order-table .mk-order-row > *:not(.mk-order-row__go)::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 0.2rem;
        font-size: 0.68rem;
        font-weight: 700;
        color: #8a8498;
        text-align: start;
    }

    .mk-order-row__flags {
        justify-content: start;
    }
}

@media (max-width: 640px) {
    .mk-wide-metrics,
    .mk-wide-metrics--hero,
    .mk-wide-metrics--sub {
        grid-template-columns: minmax(0, 1fr);
    }

    .mk-order-table .mk-order-row,
    .mk-order-list.is-all-brands .mk-order-table .mk-order-row {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

/* Colored admin cards + layout. Merchant / super-admin / courier only. */
.admin-theme-yellow-pop.admin-theme-brand .winkels-main,
.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar,
.admin-theme-yellow-pop.admin-theme-brand .winkels-table,
.admin-theme-yellow-pop.admin-theme-brand .winkels-stat,
.admin-theme-yellow-pop.admin-theme-brand .winkels-card,
.admin-theme-yellow-pop.admin-theme-brand .menu-field-label,
.admin-theme-yellow-pop.admin-theme-brand .winkels-input,
.admin-theme-yellow-pop.admin-theme-brand button,
.admin-theme-yellow-pop.admin-theme-brand a {
    font-weight: 500;
}

.admin-theme-yellow-pop.admin-theme-brand h1,
.admin-theme-yellow-pop.admin-theme-brand h2,
.admin-theme-yellow-pop.admin-theme-brand h3,
.admin-theme-yellow-pop.admin-theme-brand .winkels-stat .value,
.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric__value,
.admin-theme-yellow-pop.admin-theme-brand .order-ref-link {
    font-weight: 700;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-card,
.admin-theme-yellow-pop.admin-theme-brand .winkels-card-premium,
.admin-theme-yellow-pop.admin-theme-brand .mk-perf-table-card,
.admin-theme-yellow-pop.admin-theme-brand .mk-expenses-filters-card,
.admin-theme-yellow-pop.admin-theme-brand .mk-wide-sheet,
.admin-theme-yellow-pop.admin-theme-brand .gateway-fee-card,
.admin-theme-yellow-pop.admin-theme-brand .command-alert,
.admin-theme-yellow-pop.admin-theme-brand .pipeline-step,
.admin-theme-yellow-pop.admin-theme-brand .mk-courier-card,
.admin-theme-yellow-pop.admin-theme-brand .ad-catalog-card,
.admin-theme-yellow-pop.admin-theme-brand .ops-sheet,
.admin-theme-yellow-pop.admin-theme-brand .ops-map-card,
.admin-theme-yellow-pop.admin-theme-brand .fleet-table-wrap,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .ops-sheet,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .ops-map-card,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .fleet-table-wrap {
    background: linear-gradient(180deg, #fff 0%, #f3ebfb 100%);
    border: 1px solid #d2c2e6;
    box-shadow: inset 0 3px 0 #6d5a8f;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-stat,
.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board,
.admin-theme-yellow-pop.admin-theme-brand .winkels-stat-soft,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-stat,
.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric,
.admin-theme-yellow-pop.admin-theme-brand .mk-order-row,
.admin-theme-yellow-pop.admin-theme-brand .mk-perf-view {
    background: linear-gradient(180deg, #f8f3fc 0%, #ebe0f6 100%);
    border: 1px solid #cbb9e2;
    box-shadow: inset 0 3px 0 #6d5a8f;
    color: #4a3a62;
}

.admin-theme-yellow-pop.admin-theme-brand .grid-stats > .winkels-stat:nth-child(4n + 2),
.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metrics > :nth-child(4n + 2) {
    background: linear-gradient(180deg, #f4f2fc 0%, #e3e0f4 100%);
    box-shadow: inset 0 3px 0 #5b4d9a;
}

.admin-theme-yellow-pop.admin-theme-brand .grid-stats > .winkels-stat:nth-child(4n + 3),
.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metrics > :nth-child(4n + 3) {
    background: linear-gradient(180deg, #f7f0f8 0%, #eddcec 100%);
    box-shadow: inset 0 3px 0 #7a4d86;
}

.admin-theme-yellow-pop.admin-theme-brand .grid-stats > .winkels-stat:nth-child(4n + 4),
.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metrics > :nth-child(4n + 4) {
    background: linear-gradient(180deg, #f3f4fb 0%, #dde3f3 100%);
    box-shadow: inset 0 3px 0 #4d5f8f;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-stat .value,
.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board .value,
.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric__value,
.admin-theme-yellow-pop.admin-theme-brand .mk-order-row__money strong {
    color: #4a25a9;
    text-shadow: none;
}

.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric.is-active,
.admin-theme-yellow-pop.admin-theme-brand .mk-perf-view.is-active {
    background: linear-gradient(180deg, #efe6f8 0%, #d9c6ec 100%);
    border-color: #6d5a8f;
}

.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric.is-alert,
.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric.is-hot,
.admin-theme-yellow-pop.admin-theme-brand .mk-order-row.is-late:not(.is-done),
.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board.is-hot {
    background: linear-gradient(180deg, #fff6f6 0%, #f8dce0 100%);
    border-color: #e8b4b8;
    box-shadow: inset 0 3px 0 #b42318;
    color: #7a271a;
}

.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric.is-good,
.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board.is-good {
    background: linear-gradient(180deg, #f4fbf6 0%, #d7efe0 100%);
    border-color: #9dcfb3;
    box-shadow: inset 0 3px 0 #067647;
}

.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric.is-alert .mk-wide-metric__value,
.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric.is-hot .mk-wide-metric__value,
.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board.is-hot .value {
    color: #b42318;
}

.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric.is-good .mk-wide-metric__value,
.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board.is-good .value {
    color: #067647;
}

.admin-theme-yellow-pop.admin-theme-brand .grid-stats {
    align-items: stretch;
    gap: 0.9rem;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-stat {
    min-height: 7rem;
    padding: 1.15rem 1.2rem;
    transform: none;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-stat:hover,
.admin-theme-yellow-pop.admin-theme-brand .winkels-card:hover,
.admin-theme-yellow-pop.admin-theme-brand .winkels-stat-soft:hover {
    transform: none;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-stat::before {
    inset: 0 0 auto 0;
    height: 0;
    background: none;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-stat::after,
.admin-theme-yellow-pop.admin-theme-brand .winkels-card-premium::before {
    display: none;
}

.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metrics {
    align-items: stretch;
}

.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric,
.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric.is-sub {
    height: 100%;
    min-height: 0;
}

.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric__hint {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.admin-theme-yellow-pop.admin-theme-brand .mk-order-row {
    align-items: start;
}

.admin-theme-yellow-pop.admin-theme-brand .mk-order-row__who .mk-orders-customer-name,
.admin-theme-yellow-pop.admin-theme-brand .mk-order-row__cell > span:not(.mk-order-row__k):not(.mk-orders-source) {
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-theme-yellow-pop.admin-theme-brand .mk-wide-bar {
    padding: 0.85rem 1rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(109, 90, 143, 0.12);
}

.admin-theme-yellow-pop.admin-theme-brand .sa-page > h2:first-child,
.admin-theme-yellow-pop.admin-theme-brand .sa-page > div:first-child:not(.sa-hero):not(.winkels-card):not(.grid-stats):not(.winkels-tabs):not(.report-page):not(.order-detail):not(.kitchen-screen):not(.reception-screen):not(.pos-page):not(.mk-recipe):not(.mk-stock-page):not(.mk-purchases):not(.mk-expenses-page):not(.ops-glass):has(h2),
.admin-theme-yellow-pop.admin-theme-brand .sa-hero,
.admin-theme-yellow-pop.admin-theme-brand .courier-page-head,
.admin-theme-yellow-pop.admin-theme-brand .mk-expenses-head {
    background: linear-gradient(180deg, #fff 0%, #f4eefb 100%);
    border: 1px solid #d2c2e6;
    box-shadow: inset 0 3px 0 #6d5a8f;
    border-radius: 18px;
    padding: 1.05rem 1.2rem;
}

/* Pale card washes made muted/opacity text disappear. Darken copy across admin. */
.admin-theme-yellow-pop.admin-theme-brand,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page,
.admin-theme-yellow-pop.admin-theme-brand.courier-lux {
    --winkels-text: #2a2140;
    --winkels-text-muted: #453a5c;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-main,
.admin-theme-yellow-pop.admin-theme-brand .sa-page,
.admin-theme-yellow-pop.admin-theme-brand .winkels-card,
.admin-theme-yellow-pop.admin-theme-brand .winkels-stat,
.admin-theme-yellow-pop.admin-theme-brand .winkels-table,
.admin-theme-yellow-pop.admin-theme-brand .winkels-table td,
.admin-theme-yellow-pop.admin-theme-brand .fleet-table td,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-table td {
    color: #2a2140;
}

.admin-theme-yellow-pop.admin-theme-brand .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .courier-kicker,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .courier-kicker,
.admin-theme-yellow-pop.admin-theme-brand .courier-page-head .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .courier-page-head .courier-meta,
.admin-theme-yellow-pop.admin-theme-brand .courier-page-head .courier-kicker,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .courier-page-head .courier-kicker,
.admin-theme-yellow-pop.admin-theme-brand .mk-expenses-head .text-muted,
.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric__label,
.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric__hint,
.admin-theme-yellow-pop.admin-theme-brand .mk-order-row__k,
.admin-theme-yellow-pop.admin-theme-brand .mk-wide-bar__meta,
.admin-theme-yellow-pop.admin-theme-brand .menu-field-label,
.admin-theme-yellow-pop.admin-theme-brand .ops-filter-field span,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .ops-filter-field span,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page table.winkels-table th {
    color: #453a5c;
    opacity: 1;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-table th,
.admin-theme-yellow-pop.admin-theme-brand .fleet-table th,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page table.winkels-table th {
    color: #2a2140;
    background: #efe8f6;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-stat .text-sm,
.admin-theme-yellow-pop.admin-theme-brand .winkels-stat .opacity-75,
.admin-theme-yellow-pop.admin-theme-brand .winkels-stat .opacity-70,
.admin-theme-yellow-pop.admin-theme-brand .winkels-stat .opacity-80,
.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-stat .text-sm {
    color: #3d3358;
    opacity: 1;
}

.admin-theme-yellow-pop.admin-theme-brand .ops-driver-link,
.admin-theme-yellow-pop.admin-theme-brand .fleet-assigned,
.admin-theme-yellow-pop.admin-theme-brand .fleet-assigned a,
.admin-theme-yellow-pop.admin-theme-brand .link-winkels,
.admin-theme-yellow-pop.admin-theme-brand .order-ref-link {
    color: #3a1a86;
    font-weight: 700;
}

.admin-theme-yellow-pop.admin-theme-brand .fleet-act,
.admin-theme-yellow-pop.admin-theme-brand .btn-winkels-outline {
    color: #3a1a86;
    font-weight: 700;
    opacity: 1;
}

.admin-theme-yellow-pop.admin-theme-brand .fleet-act.is-danger {
    color: #9b1c1c;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-tabs a:not(.active),
.admin-theme-yellow-pop.admin-theme-brand .winkels-tabs button:not(.active),
.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar a:not(.active):not(.sidebar-logout-btn) {
    color: #3d3358;
    opacity: 1;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar a.active,
.admin-theme-yellow-pop.admin-theme-brand .winkels-tabs a.active,
.admin-theme-yellow-pop.admin-theme-brand .winkels-tabs button.active,
.admin-theme-yellow-pop.admin-theme-brand .sidebar-logout-btn {
    color: #fff;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-input,
.admin-theme-yellow-pop.admin-theme-brand select.winkels-input,
.admin-theme-yellow-pop.admin-theme-brand textarea.winkels-input {
    color: #2a2140;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-input::placeholder {
    color: #5c5470;
    opacity: 1;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-main a.ops-driver-link,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main a.driver-cell-name,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main a.driver-cell-phone,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main .driver-cell a {
    color: #1f1733;
    font-weight: 800;
}

.admin-theme-yellow-pop.admin-theme-brand .winkels-main .driver-cell .courier-meta,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main td .courier-meta,
.admin-theme-yellow-pop.admin-theme-brand .winkels-main table.winkels-table td {
    color: #2a2140;
    font-weight: 600;
}

/* Unified admin panels: merchant + super-admin + courier. White cards, purple accent, dark copy. */
.admin-layout.admin-theme-yellow-pop.admin-theme-brand,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand.courier-lux {
    --yp-yellow: #d9cce8;
    --winkels-brand-yellow: #d9cce8;
    --winkels-gold: #d9cce8;
    --winkels-gold-light: #efe8f6;
    --winkels-gold-soft: #f6f1fb;
    --winkels-bg: #efe8f6;
    --winkels-text: #1c1235;
    --winkels-text-muted: #4a4068;
    --winkels-border: #d4c4e8;
    background: #efe8f6;
    color: #1c1235;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar {
    background: #fff;
    border: 1px solid #d4c4e8;
    box-shadow: none;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-main,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand.courier-lux .winkels-main {
    background: #efe8f6;
    box-shadow: none;
    color: #1c1235;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar a,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar a:hover,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar .nav-group-title {
    color: #1c1235;
    background: transparent;
    opacity: 1;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar a:hover {
    background: #f3eafc;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar a.active,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-sidebar a.active:hover,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .sidebar-logout-btn,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .sidebar-logout-btn:hover {
    background: #5b2bbd;
    color: #fff;
    box-shadow: none;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-card,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-card-premium,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-perf-table-card,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-expenses-filters-card,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-wide-sheet,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .gateway-fee-card,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .command-alert,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .pipeline-step,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-courier-card,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .ad-catalog-card,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .ops-sheet,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .ops-map-card,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .fleet-table-wrap,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .ops-report-filters,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .ops-sheet,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .ops-map-card,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .fleet-table-wrap,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .ops-report-filters {
    background: #fff;
    border: 1px solid #d4c4e8;
    box-shadow: inset 0 4px 0 #5b2bbd;
    color: #1c1235;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-stat,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-stat-soft,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-order-row,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-perf-view,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-stat {
    background: #fff;
    border: 1px solid #d4c4e8;
    box-shadow: inset 0 4px 0 #5b2bbd;
    color: #1c1235;
    transform: none;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .grid-stats > .winkels-stat:nth-child(4n + 2),
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metrics > :nth-child(4n + 2) {
    box-shadow: inset 0 4px 0 #3f5bb5;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .grid-stats > .winkels-stat:nth-child(4n + 3),
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metrics > :nth-child(4n + 3) {
    box-shadow: inset 0 4px 0 #8a3d9a;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .grid-stats > .winkels-stat:nth-child(4n + 4),
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metrics > :nth-child(4n + 4) {
    box-shadow: inset 0 4px 0 #2f7d6d;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-stat .value,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand a.winkels-stat.mk-order-board .value,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric__value {
    color: #4a18b5;
    text-shadow: none;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-stat .text-sm,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-stat [class*="opacity-"],
.admin-layout.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-stat .text-sm,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric__label,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-wide-metric__hint,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .text-muted,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .courier-kicker,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .courier-kicker,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .courier-page-head .courier-kicker,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .courier-page-head .text-muted,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .courier-page-head .courier-meta,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-expenses-head .text-muted,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .menu-field-label,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .ops-filter-field span,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .ops-filter-field span,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-order-row__k {
    color: #4a4068;
    opacity: 1;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-order-table .mk-order-row {
    background: #fff;
    border: 2px solid #d4c4e8;
    box-shadow: 0 4px 14px rgba(40, 8, 82, 0.08);
    transform: none;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-order-table .mk-order-row:hover,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-order-table .mk-order-row:focus-visible {
    border-color: #751fe8;
    background: #fbf7ff;
    box-shadow: 0 8px 22px rgba(117, 31, 232, 0.16);
    transform: translateY(-1px);
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-order-table .mk-order-row.is-late:not(.is-done) {
    background: #fff6f6;
    border-color: #e8b4b8;
    box-shadow: 0 4px 14px rgba(180, 35, 24, 0.12);
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-order-table .mk-order-row.is-done {
    background: #fff;
    box-shadow: 0 4px 14px rgba(40, 8, 82, 0.08);
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-order-row__k {
    color: #4a4068;
    opacity: 1;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main p,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main td,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main th,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main label,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main .courier-meta,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main .driver-cell .courier-meta,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main table.winkels-table td {
    color: #1c1235;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main a:not(.btn-winkels):not(.btn-winkels-outline):not(.sidebar-logout-btn):not(.active),
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main a.ops-driver-link,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main a.driver-cell-name,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main a.driver-cell-phone,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main a.link-winkels,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main a.order-ref-link {
    color: #4a18b5;
    font-weight: 700;
    opacity: 1;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main table.winkels-table th,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main .fleet-table th,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .winkels-main table.winkels-table th {
    background: #efe6f8;
    color: #1c1235;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main .winkels-input,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main select,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main textarea {
    background: #fff;
    color: #1c1235;
    border-color: #c9b6e0;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-main .winkels-input::placeholder {
    color: #5c5470;
    opacity: 1;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-tabs a,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-tabs button {
    color: #1c1235;
    background: #fff;
    border: 1px solid #d4c4e8;
    opacity: 1;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-tabs a.active,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-tabs button.active {
    background: #5b2bbd;
    border-color: #5b2bbd;
    color: #fff;
    box-shadow: none;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .btn-winkels,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .btn-winkels:hover {
    background: #5b2bbd;
    color: #fff;
    box-shadow: none;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .btn-winkels-outline,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .fleet-act {
    background: #fff;
    color: #4a18b5;
    border: 1px solid #5b2bbd;
    font-weight: 700;
    box-shadow: none;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .fleet-act.is-danger {
    color: #9b1c1c;
    border-color: #c24141;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .sa-page > h2:first-child,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .sa-hero,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .courier-page-head,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-expenses-head,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand.ops-glass-page .courier-page-head {
    background: #fff;
    border: 1px solid #d4c4e8;
    box-shadow: inset 0 4px 0 #5b2bbd;
    color: #1c1235;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .courier-page-head h2,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .sa-hero h2,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .mk-expenses-head h2 {
    color: #1c1235;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .merchant-page-brand.is-active,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .merchant-page-branch.is-active {
    background: #5b2bbd;
    color: #fff;
    border-color: #5b2bbd;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-stat:hover,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-card:hover {
    transform: none;
}

.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-stat::before,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-stat::after,
.admin-layout.admin-theme-yellow-pop.admin-theme-brand .winkels-card-premium::before {
    display: none;
}

/* Ads: purple controls use white type; reserved zone cards stay readable. */
.admin-layout .ad-slot-btn.is-on,
.admin-layout .ad-hour.is-on,
.admin-layout .ad-hour.is-on .ad-hour-time,
.admin-layout .ad-hour.is-on .ad-hour-meta,
.admin-layout .ad-hour.is-on .ad-hour-price,
.admin-layout .ad-day-btn.is-on,
.admin-layout .ad-type-pill.is-on,
.admin-layout .ad-gov-tab.is-on,
.admin-layout .btn-winkels {
    color: #fff !important;
}

.ad-zone-booked {
    grid-column: 1 / -1;
    margin-top: 0.2rem;
    padding: 0.28rem 0.5rem;
    border-radius: 999px;
    background: #fff;
    color: #9b1c1c;
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
}

.ad-hold-banner {
    background: #5b2bbd;
    color: #fff;
    border-radius: 0.9rem;
    padding: 1rem 1.15rem;
    text-align: center;
}

.ad-hold-banner-label {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
}

.ad-hold-clock {
    margin: 0.35rem 0 0;
    font-size: 2.1rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

.ad-hold-expired {
    background: #9b1c1c;
    color: #fff;
    border-radius: 0.9rem;
    padding: 1.1rem 1.15rem;
    text-align: center;
}

.ad-hold-expired-title {
    margin: 0 0 0.35rem;
    font-size: 1.15rem;
    font-weight: 800;
    color: #fff;
}

.ad-hold-expired p {
    margin: 0;
    color: #fff;
}

.ad-hold-expired .btn-winkels {
    display: inline-flex;
}

.push-composer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 19rem;
    gap: 1.25rem;
    align-items: start;
}

@media (max-width: 980px) {
    .push-composer {
        grid-template-columns: 1fr;
    }
}

.push-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.55rem;
}

.push-locale-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem 1rem;
}

@media (max-width: 720px) {
    .push-locale-grid {
        grid-template-columns: 1fr;
    }
}

.push-preview-switch {
    display: flex;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.push-preview-switch button {
    flex: 1;
    border: 1px solid #eee5fd;
    background: #faf9ff;
    border-radius: 999px;
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    cursor: pointer;
}

.push-preview-switch button.is-active {
    border-color: #751fe8;
    background: #f3ebff;
    color: #4f149f;
    font-weight: 700;
}

.push-choice-hint {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.75rem;
    color: #8b7cb8;
    line-height: 1.35;
}

.push-picker {
    position: relative;
}

.push-picker-list {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 0.35rem);
    z-index: 30;
    max-height: 16rem;
    overflow: auto;
    background: #fff;
    border: 1px solid var(--winkels-purple-100, #eee5fd);
    border-radius: 0.85rem;
    box-shadow: 0 10px 30px rgba(31, 18, 53, 0.08);
}

.push-picker-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.7rem 0.85rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid #f3effb;
    text-align: start;
    cursor: pointer;
}

.push-picker-item:last-child {
    border-bottom: 0;
}

.push-picker-item:hover {
    background: #f7f2fe;
}

.push-picker-item-no {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    color: #751fe8;
    min-width: 2.4rem;
}

.push-picker-item-name {
    color: #1a2330;
}

.push-picker-empty {
    margin: 0;
    padding: 0.85rem;
    color: #667085;
    font-size: 0.85rem;
}

.push-chip {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #c4b5fd;
    border-radius: 0.85rem;
    background: #f3ebff;
}

.push-chip-no {
    font-weight: 800;
    color: #751fe8;
}

.push-chip-name {
    flex: 1;
    font-weight: 600;
}

.push-chip-clear {
    border: 0;
    background: transparent;
    color: #667085;
    font-size: 0.8rem;
    cursor: pointer;
}

.push-preview-card {
    position: sticky;
    top: 1rem;
}

.push-phone {
    border: 1px solid #e5e9ef;
    border-radius: 1.4rem;
    padding: 0.7rem 0.7rem 1rem;
    background: linear-gradient(180deg, #1a1230 0%, #3b1d73 100%);
    color: #fff;
}

.push-phone-bar {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    opacity: 0.8;
    margin-bottom: 0.7rem;
}

.push-phone-note {
    background: #fff;
    color: #1a2330;
    border-radius: 0.9rem;
    padding: 0.8rem 0.85rem;
}

.push-phone-brand {
    font-size: 0.72rem;
    font-weight: 700;
    color: #751fe8;
    margin-bottom: 0.25rem;
}

.push-phone-note strong {
    display: block;
    font-size: 0.95rem;
}

.push-phone-note p {
    margin: 0.25rem 0 0;
    font-size: 0.82rem;
    color: #667085;
    line-height: 1.45;
}

.push-summary {
    margin: 1rem 0 0;
    display: grid;
    gap: 0.65rem;
}

.push-summary dt {
    font-size: 0.72rem;
    color: #667085;
}

.push-summary dd {
    margin: 0.1rem 0 0;
    font-weight: 600;
}

.mk-journey-channel__head {
    border-bottom: none;
    padding: 0.95rem 1.15rem;
}

.mk-journey-channel__head h3 {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    color: #fff;
    font-size: 1.02rem;
    font-weight: 800;
}

.mk-journey-channel__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.15rem;
    height: 2.15rem;
    border-radius: 0.7rem;
    flex-shrink: 0;
}

.mk-journey-channel__mark .nav-icon {
    width: 1.2rem;
    height: 1.2rem;
    opacity: 1;
}

.mk-journey-channel--web .mk-journey-channel__head {
    background: linear-gradient(135deg, #8a3cf0 0%, #751fe8 48%, #4b12b0 100%);
}

.mk-journey-channel--web .mk-journey-channel__mark {
    background: rgba(255, 255, 255, 0.16);
    color: #e7e06f;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}

.mk-journey-channel--app .mk-journey-channel__head {
    background: linear-gradient(135deg, #2a1b4a 0%, #1c1235 55%, #120c22 100%);
}

.mk-journey-channel--app .mk-journey-channel__mark {
    background: #e7e06f;
    color: #1c1235;
}

.mk-journey-channel--goods .mk-journey-channel__head {
    background: linear-gradient(135deg, #f7f5fb 0%, #efeaf6 100%);
}

.mk-journey-channel--goods .mk-journey-channel__head h3 {
    color: #1c1235;
}

.mk-journey-channel--goods .mk-journey-channel__mark {
    background: #751fe8;
    color: #fff;
}

.mk-journey-channel--brand .mk-journey-channel__head {
    background: linear-gradient(135deg, #6a35d4 0%, #4b12b0 100%);
}

.mk-journey-channel--brand .mk-journey-channel__mark {
    background: #e7e06f;
    color: #1c1235;
}

.mk-journey-channel--web .mk-performance-table th {
    background: #f7f2fe;
    color: #4b12b0;
}

.mk-journey-channel--app .mk-performance-table th {
    background: #f4f2f7;
    color: #1c1235;
}

.mk-journey-channel--goods .mk-performance-table th {
    background: #faf8fe;
    color: #1c1235;
}

.mk-journey-filters {
    background: linear-gradient(180deg, #fcfbfe 0%, #fff 100%);
    border-color: #efeaf8;
}

.mk-journey-metric {
    gap: 0.35rem;
}

.mk-journey-metric__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.65rem;
}

.mk-journey-metric__mark .nav-icon {
    width: 1.05rem;
    height: 1.05rem;
    opacity: 1;
}

.mk-journey-metric--visitors .mk-journey-metric__mark { background: #f3e9fd; color: #751fe8; }
.mk-journey-metric--viewers .mk-journey-metric__mark { background: #f3e9fd; color: #6a35d4; }
.mk-journey-metric--carts .mk-journey-metric__mark { background: #fbf6c8; color: #1c1235; }
.mk-journey-metric--checkouts .mk-journey-metric__mark { background: #efe6fb; color: #4b12b0; }
.mk-journey-metric--ordered .mk-journey-metric__mark { background: #eceaf1; color: #1c1235; }
.mk-journey-metric--paid .mk-journey-metric__mark { background: #e7f6ee; color: #067647; }
.mk-journey-metric--abandoned .mk-journey-metric__mark { background: #fdeceb; color: #b42318; }
.mk-journey-metric--uncollected .mk-journey-metric__mark { background: #fdeceb; color: #b42318; }

.mk-journey-note {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    margin: 0;
    padding: 0.85rem 1rem;
    border: 1px solid #efeaf8;
    border-radius: 14px;
    background: #fcfbfe;
    color: #5c5670;
    font-size: 0.84rem;
    line-height: 1.6;
}

.mk-journey-note .nav-icon {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.15rem;
    opacity: 1;
    color: #751fe8;
}