/* =====================================================================
   NAZHAK STUDIO — APP SHELL
   Menyelaraskan seluruh modul (marketplace, booking, dasbor penjualan,
   kalkulator, menu digital) dengan design system theme:
   tipografi, radius, sidebar gelap, dan perbaikan layout layar penuh.
   Dimuat SETELAH CSS modul.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Pemetaan token modul → token theme
--------------------------------------------------------------------- */
:root {
    /* Booking */
    --bk-font: var(--nzk-font);
    --bk-bg: var(--nzk-bg);
    --bk-bg-2: var(--nzk-bg-2);
    --bk-border: var(--nzk-border);
    --bk-border-2: var(--nzk-border-strong);
    --bk-text: var(--nzk-text);
    --bk-text-2: var(--nzk-text-2);
    --bk-text-3: var(--nzk-muted);
    --bk-text-4: var(--nzk-faint);
    --bk-sidebar-bg: var(--nzk-ink);
    --bk-sidebar-text: rgba(255, 255, 255, .68);
    --bk-sidebar-hover: rgba(255, 255, 255, .07);
    --bk-r-sm: 6px;
    --bk-r-md: 10px;
    --bk-r-lg: 12px;
    --bk-r-xl: 14px;

    /* Kalkulator harga */
    --pc-font: var(--nzk-font);
    --pc-bg: var(--nzk-bg);
    --pc-bg-2: var(--nzk-bg-2);
    --pc-border: var(--nzk-border);
    --pc-border-2: var(--nzk-border-strong);
    --pc-text: var(--nzk-ink);
    --pc-text-2: var(--nzk-text-2);
    --pc-text-3: var(--nzk-muted);
    --pc-text-4: var(--nzk-faint);
    --pc-sidebar-bg: var(--nzk-ink);
    --pc-sidebar-hover: rgba(255, 255, 255, .07);
    --pc-sidebar-text: rgba(255, 255, 255, .68);
    --pc-blue-glow: rgba(47, 62, 52, .16);
    --pc-shadow-blue: 0 4px 16px rgba(47, 62, 52, .22);
    --pc-r-sm: 6px;
    --pc-r-md: 10px;
    --pc-r-lg: 12px;
    --pc-r-xl: 14px;
    --pc-r-2xl: 16px;

    /* Dasbor penjualan */
    --td-font: var(--nzk-font);
    --td-bg: var(--nzk-bg);
    --td-surface-2: var(--nzk-bg-2);
    --td-border: var(--nzk-border);
    --td-border-strong: var(--nzk-border-strong);
    --td-text: var(--nzk-text);
    --td-text-2: var(--nzk-text-2);
    --td-text-muted: var(--nzk-muted);
    --td-text-faint: var(--nzk-faint);
    --td-radius-lg: 12px;
    --td-radius-xl: 14px;
}

/* Marketplace (token didefinisikan di .mp-root) */
.mp-root {
    --mp-font-base: var(--nzk-font);
    --mp-color-bg: var(--nzk-bg);
    --mp-color-border: var(--nzk-border);
    --mp-color-text: var(--nzk-text);
    --mp-color-text-muted: var(--nzk-muted);
    --mp-radius-md: 10px;
    --mp-radius-lg: 14px;
}

/* Menu digital — hanya warna aksen & tipografi (mode gelap tetap berfungsi) */
body.nzk-app--menu {
    --primary: var(--nzk-primary);
    --primary-dark: var(--nzk-primary-hover);
    --primary-light: var(--nzk-primary-soft);
    --success: var(--nzk-success);
    --font: var(--nzk-font);
}

/* Tipografi seragam untuk seluruh aplikasi */
body.nzk-app,
body.nzk-app button,
body.nzk-app input,
body.nzk-app select,
body.nzk-app textarea {
    font-family: var(--nzk-font);
}

/* ---------------------------------------------------------------------
   2. Perbaikan layout layar penuh
   (lebar 100vw memicu scroll horizontal saat ada scrollbar)
--------------------------------------------------------------------- */
body.nzk-app { overflow-x: hidden; }

body.nzk-app .bk-admin-wrapper,
body.nzk-app .td-wrapper,
body.page-template-template-seller-dashboard-php .td-wrapper {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

/* Sidebar dasbor penjualan memakai position: fixed — beri ruang untuk admin bar */
body.admin-bar .td-sidebar { top: 32px; height: calc(100vh - 32px); }
@media screen and (max-width: 782px) {
    body.admin-bar .td-sidebar { top: 46px; height: calc(100vh - 46px); }
}


.td-nav-icon i,
.mp-nav-icon i { width: 18px; text-align: center; }

/* Ikon Font Awesome menggantikan emoji — ukuran konsisten */
.td-brand-icon i,
.bk-logo-icon i,
.pc-logo-icon i { font-size: 16px; }

/* ---------------------------------------------------------------------
   3. Footer sidebar (Aplikasi lainnya / Kembali / Keluar)
--------------------------------------------------------------------- */
.nzk-sidebar-foot {
    display: grid;
    gap: 2px;
    margin-top: auto;
    padding: 12px 10px 16px;
    border-top: 1px solid var(--nzk-border);
}
.nzk-sidebar-foot a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    color: var(--nzk-muted);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    transition: background .15s, color .15s;
}
.nzk-sidebar-foot a:hover { background: var(--nzk-bg); color: var(--nzk-ink); }
.nzk-sidebar-foot i { width: 16px; text-align: center; font-size: 13px; }

/* Varian untuk sidebar gelap (booking & kalkulator) */
.bk-sidebar .nzk-sidebar-foot,
.pc-sidebar .nzk-sidebar-foot { border-top-color: rgba(255, 255, 255, .1); }
.bk-sidebar .nzk-sidebar-foot a,
.pc-sidebar .nzk-sidebar-foot a { color: rgba(255, 255, 255, .6); }
.bk-sidebar .nzk-sidebar-foot a:hover,
.pc-sidebar .nzk-sidebar-foot a:hover { background: rgba(255, 255, 255, .07); color: #fff; }

/* ---------------------------------------------------------------------
   4. Lencana "Dibuat dengan …" di halaman publik toko
--------------------------------------------------------------------- */
.nzk-powered {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: max-content;
    max-width: calc(100% - 32px);
    margin: 32px auto 24px;
    padding: 8px 14px;
    border: 1px solid var(--nzk-border);
    border-radius: 999px;
    background: var(--nzk-surface);
    color: var(--nzk-muted);
    font: 500 12px/1 var(--nzk-font);
    text-decoration: none;
    transition: color .15s, border-color .15s;
}
.nzk-powered strong { color: var(--nzk-ink); font-weight: 700; }
.nzk-powered:hover { color: var(--nzk-ink); border-color: var(--nzk-border-strong); }
@media print { .nzk-powered, .nzk-sidebar-foot { display: none !important; } }

/* ---------------------------------------------------------------------
   5. Lacak lokasi
--------------------------------------------------------------------- */
.nzk-track { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; background: var(--nzk-bg); }
.nzk-track__head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    background: var(--nzk-ink);
    color: #fff;
}
.nzk-track__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255, 255, 255, .1);
}
.nzk-track__name { font-size: 16px; font-weight: 700; }
.nzk-track__status { font-size: 12px; color: rgba(255, 255, 255, .7); }
.nzk-track.is-online .nzk-track__status::before {
    content: '';
    display: inline-block;
    width: 7px; height: 7px; margin-right: 6px;
    border-radius: 50%;
    background: #6FCF97;
    vertical-align: middle;
}
.nzk-track__map { flex: 1; min-height: 60vh; }
.nzk-track__offline {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 48px 24px;
    text-align: center;
    color: var(--nzk-muted);
}
.nzk-track__offline i { font-size: 32px; color: var(--nzk-faint); }
.nzk-track__foot { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); background: var(--nzk-surface); border-top: 1px solid var(--nzk-border); }

/* Titik status pengganti emoji */
.nzk-dot-green { color: var(--nzk-success); font-size: .6em; vertical-align: middle; }
.nzk-dot-yellow { color: var(--nzk-warning); font-size: .6em; vertical-align: middle; }
.nzk-dot-blue { color: var(--nzk-info); font-size: .6em; vertical-align: middle; }

/* ---------------------------------------------------------------------
   6. Banner absen (pembersihan akun tidak aktif)
--------------------------------------------------------------------- */
.nzk-absen {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 12px 16px 0;
    padding: 10px 12px 10px 16px;
    border: 1px solid var(--nzk-border);
    border-radius: 10px;
    background: var(--nzk-surface);
    font: 500 13px/1.45 var(--nzk-font);
    color: var(--nzk-text-2);
}
.nzk-absen > i { color: var(--nzk-primary); font-size: 15px; }
.nzk-absen__msg { flex: 1; margin: 0; }
.nzk-absen__btn {
    flex-shrink: 0;
    padding: 8px 14px;
    border: 0;
    border-radius: 6px;
    background: var(--nzk-ink);
    color: #fff;
    font: 600 12px/1 var(--nzk-font);
    cursor: pointer;
}
.nzk-absen__btn:disabled { background: var(--nzk-bg-2); color: var(--nzk-muted); cursor: default; }
.nzk-absen--warning { background: var(--nzk-warning-soft); border-color: #EBD3A6; }
.nzk-absen--warning > i { color: var(--nzk-warning); }
.nzk-absen--danger { background: var(--nzk-danger-soft); border-color: #F0C4BF; color: var(--nzk-danger); }
.nzk-absen--danger > i { color: var(--nzk-danger); }
.nzk-absen--danger .nzk-absen__btn { background: var(--nzk-danger); }
@media (max-width: 600px) {
    .nzk-absen { flex-wrap: wrap; }
    .nzk-absen__btn { width: 100%; }
}
@media print { .nzk-absen { display: none !important; } }

/* =====================================================================
   7. APP CHROME TERPADU — sidebar & topbar sama di semua aplikasi
   (Marketplace, Booking, Menu Digital, Dasbor Penjualan, Kalkulator)
   ===================================================================== */
body.nzk-app--admin {
    --nzk-side-bg: #111111;
    --nzk-side-line: rgba(255, 255, 255, .08);
    --nzk-side-text: rgba(255, 255, 255, .66);
    --nzk-side-muted: rgba(255, 255, 255, .38);
    --nzk-side-hover: rgba(255, 255, 255, .06);
    --nzk-side-active: rgba(255, 255, 255, .1);
    background: var(--nzk-bg);
}

/* --- Panel sidebar --- */
body.nzk-app--admin .mp-admin-sidebar,
body.nzk-app--admin .bk-sidebar,
body.nzk-app--admin .pc-sidebar,
body.nzk-app--admin .td-sidebar,
body.nzk-app--menu.nzk-app--admin .sidebar {
    background: var(--nzk-side-bg) !important;
    border-right: 1px solid #000 !important;
    color: var(--nzk-side-text);
    display: flex;
    flex-direction: column;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, .14) transparent;
}

/* --- Area brand / nama toko --- */
body.nzk-app--admin .mp-admin-brand,
body.nzk-app--admin .bk-sidebar-logo,
body.nzk-app--admin .pc-sidebar-logo,
body.nzk-app--admin .td-sidebar-head,
body.nzk-app--menu.nzk-app--admin .sidebar-logo {
    border-bottom: 1px solid var(--nzk-side-line) !important;
    background: transparent !important;
}
body.nzk-app--admin .mp-admin-toko-nama,
body.nzk-app--admin .bk-logo-text,
body.nzk-app--admin .pc-logo-text,
body.nzk-app--admin .td-brand-name,
body.nzk-app--menu.nzk-app--admin .logo-text {
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
}
body.nzk-app--admin .mp-admin-toko-label,
body.nzk-app--admin .bk-logo-sub,
body.nzk-app--admin .pc-logo-sub,
body.nzk-app--admin .td-brand-sub,
body.nzk-app--menu.nzk-app--admin .logo-sub {
    color: var(--nzk-side-muted) !important;
    font-size: 12px !important;
}
body.nzk-app--admin .bk-logo-icon,
body.nzk-app--admin .pc-logo-icon,
body.nzk-app--admin .td-brand-icon,
body.nzk-app--menu.nzk-app--admin .logo-icon {
    background: var(--nzk-accent) !important;
    color: #fff !important;
    box-shadow: none !important;
    border-radius: 8px !important;
}

/* --- Label seksi --- */
body.nzk-app--admin .bk-nav-label,
body.nzk-app--admin .pc-nav-label,
body.nzk-app--admin .td-nav-label,
body.nzk-app--menu.nzk-app--admin .nav-section-label {
    color: var(--nzk-side-muted) !important;
    font-size: 10.5px !important;
    font-weight: 600 !important;
    letter-spacing: .12em !important;
    text-transform: uppercase;
}

/* --- Item navigasi --- */
body.nzk-app--admin .mp-admin-nav .mp-nav-item,
body.nzk-app--admin .bk-nav-item,
body.nzk-app--admin .pc-nav-item,
body.nzk-app--admin .td-nav-item,
body.nzk-app--menu.nzk-app--admin .nav-item {
    color: var(--nzk-side-text) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 7px !important;
    font-family: var(--nzk-font) !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    gap: 11px;
}
body.nzk-app--admin .mp-admin-nav .mp-nav-item:hover,
body.nzk-app--admin .bk-nav-item:hover,
body.nzk-app--admin .pc-nav-item:hover,
body.nzk-app--admin .td-nav-item:hover,
body.nzk-app--menu.nzk-app--admin .nav-item:hover {
    background: var(--nzk-side-hover) !important;
    color: #fff !important;
}
body.nzk-app--admin .mp-admin-nav .mp-nav-item.is-active,
body.nzk-app--admin .bk-nav-item.active,
body.nzk-app--admin .pc-nav-item.active,
body.nzk-app--admin .td-nav-item.active,
body.nzk-app--menu.nzk-app--admin .nav-item.active {
    background: var(--nzk-side-active) !important;
    color: #fff !important;
    box-shadow: inset 3px 0 0 var(--nzk-accent) !important;
}
body.nzk-app--admin .pc-nav-item.active::before { display: none !important; }
body.nzk-app--admin .mp-nav-item i,
body.nzk-app--admin .bk-nav-item i,
body.nzk-app--admin .pc-nav-item i,
body.nzk-app--admin .td-nav-item i,
body.nzk-app--menu.nzk-app--admin .nav-item i {
    width: 18px;
    text-align: center;
    font-size: 14px !important;
    color: inherit !important;
    opacity: .9;
}
body.nzk-app--admin .td-nav-icon { display: inline-flex; width: 18px; justify-content: center; }

/* --- Bagian atas sidebar: kembali ke situs --- */
.nzk-sidebar-home {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--nzk-side-line, rgba(255, 255, 255, .08));
    color: var(--nzk-side-text, rgba(255, 255, 255, .66)) !important;
    font: 600 12.5px/1.2 var(--nzk-font);
    text-decoration: none !important;
    flex-shrink: 0;
    transition: color .15s, background .15s;
}
.nzk-sidebar-home:hover { color: #fff !important; background: var(--nzk-side-hover, rgba(255, 255, 255, .06)); }
.nzk-sidebar-home i { font-size: 12px; }
.nzk-sidebar-home span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.nzk-sidebar-home b { color: #fff; font-weight: 700; }

/* --- Footer sidebar (selalu di bawah, gelap) --- */
body.nzk-app--admin .nzk-sidebar-foot { border-top-color: var(--nzk-side-line); flex-shrink: 0; }
body.nzk-app--admin .nzk-sidebar-foot a { color: var(--nzk-side-text); }
body.nzk-app--admin .nzk-sidebar-foot a:hover { background: var(--nzk-side-hover); color: #fff; }

/* Navigasi mengisi ruang & bisa digulir; brand & footer tetap */
body.nzk-app--admin .mp-admin-nav,
body.nzk-app--admin .bk-sidebar-nav,
body.nzk-app--admin .pc-sidebar-nav,
body.nzk-app--admin .td-nav,
body.nzk-app--menu.nzk-app--admin .sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* --- Topbar --- */
body.nzk-app--admin .mp-admin-topbar,
body.nzk-app--admin .bk-topbar,
body.nzk-app--admin .pc-topbar,
body.nzk-app--admin .td-topbar,
body.nzk-app--menu.nzk-app--admin .topbar {
    height: 64px;
    background: rgba(255, 255, 255, .92) !important;
    -webkit-backdrop-filter: saturate(160%) blur(8px);
    backdrop-filter: saturate(160%) blur(8px);
    border-bottom: 1px solid var(--nzk-border) !important;
    box-shadow: none !important;
}
body.nzk-app--admin .mp-admin-topbar-title,
body.nzk-app--admin .bk-topbar-title,
body.nzk-app--admin .pc-topbar-title,
body.nzk-app--admin .td-topbar-title,
body.nzk-app--menu.nzk-app--admin .topbar-title {
    font-family: var(--nzk-font) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--nzk-ink) !important;
}
/* Tombol "Lihat toko" di topbar → gaya tombol theme */
body.nzk-app--admin .mp-admin-topbar-actions a,
body.nzk-app--admin .mp-admin-topbar-actions .mp-btn {
    text-decoration: none !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
body.nzk-app--admin .mp-admin-nav-toggle,
body.nzk-app--admin .bk-hamburger,
body.nzk-app--admin .pc-hamburger,
body.nzk-app--admin .td-hamburger {
    border: 1px solid var(--nzk-border) !important;
    border-radius: 8px !important;
    background: var(--nzk-surface) !important;
    color: var(--nzk-ink) !important;
    width: 38px !important;
    height: 38px !important;
    align-items: center;
    justify-content: center;
}

/* --- Kartu & konten: radius & tipografi seragam --- */
body.nzk-app--admin .mp-card,
body.nzk-app--admin .mp-stat-card,
body.nzk-app--admin .td-stat-card,
body.nzk-app--admin .td-card {
    border-radius: 12px;
}
body.nzk-app--admin .mp-admin-page__header h1 {
    font-family: var(--nzk-font-display);
    font-weight: 400;
    font-size: 32px;
    color: var(--nzk-ink);
}

/* --- Mobile --- */
@media (max-width: 1023px) {
    body.nzk-app--admin .mp-admin-sidebar,
    body.nzk-app--admin .bk-sidebar,
    body.nzk-app--admin .pc-sidebar,
    body.nzk-app--admin .td-sidebar,
    body.nzk-app--menu.nzk-app--admin .sidebar {
        width: min(290px, 84vw) !important;
        height: 100vh !important;
        height: 100dvh !important;
        box-shadow: 0 0 40px rgba(0, 0, 0, .35);
        z-index: 1000 !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
    }
}
@media (max-width: 640px) {
    body.nzk-app--admin .mp-stat-grid,
    body.nzk-app--admin .td-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    body.nzk-app--admin .mp-admin-topbar,
    body.nzk-app--admin .bk-topbar,
    body.nzk-app--admin .pc-topbar,
    body.nzk-app--admin .td-topbar,
    body.nzk-app--menu.nzk-app--admin .topbar {
        height: 58px;
        padding-left: 12px !important;
        padding-right: 12px !important;
        gap: 10px;
    }
    /* Tombol aksi topbar cukup ikon */
    body.nzk-app--admin .mp-admin-topbar-actions a,
    body.nzk-app--admin .mp-admin-topbar-actions .mp-btn { padding: 8px 10px !important; }
    .nzk-absen { margin: 10px 12px 0; }
}

/* Desktop: sidebar setinggi layar, menu di tengah dapat digulir,
   footer (Aplikasi lainnya / Keluar) selalu terlihat. */
@media (min-width: 1024px) {
    body.nzk-app--admin .mp-admin-sidebar,
    body.nzk-app--admin .bk-sidebar,
    body.nzk-app--menu.nzk-app--admin .sidebar {
        position: sticky !important;
        top: 0 !important;
        height: 100vh !important;
        min-height: 0 !important;
        align-self: flex-start !important;
    }
    body.nzk-app--admin .pc-sidebar,
    body.nzk-app--admin .td-sidebar {
        height: 100vh !important;
        min-height: 0 !important;
    }
    body.admin-bar.nzk-app--admin .mp-admin-sidebar,
    body.admin-bar.nzk-app--admin .bk-sidebar,
    body.admin-bar.nzk-app--admin .pc-sidebar,
    body.admin-bar.nzk-app--admin .td-sidebar,
    body.admin-bar.nzk-app--menu.nzk-app--admin .sidebar {
        top: 32px !important;
        height: calc(100vh - 32px) !important;
    }
    body.admin-bar.nzk-app--admin .mp-admin-topbar,
    body.admin-bar.nzk-app--admin .bk-topbar,
    body.admin-bar.nzk-app--admin .pc-topbar,
    body.admin-bar.nzk-app--admin .td-topbar,
    body.admin-bar.nzk-app--menu.nzk-app--admin .topbar { top: 32px !important; }
}
body.nzk-app--admin .mp-admin-page { max-width: none; }

/* =====================================================
   TAMPILAN CUSTOMER (halaman publik toko) — lapisan rapi
   Berlaku untuk marketplace, detail produk, booking,
   menu digital & kalkulator. Scoped ke body.nzk-app--public.
===================================================== */
body.nzk-app--public { background: var(--nzk-bg, #F6F5F2); }

/* Branding modul lama digantikan badge .nzk-powered */
body.nzk-app--public .bk-cust-footer,
body.nzk-app--public .pc-cust-footer { display: none !important; }
body.nzk-app--public .nzk-powered { margin: 28px auto 32px; }

/* ---------- MARKETPLACE: lebar konten ---------- */
body.nzk-app--marketplace.nzk-app--public .mp-store-header__inner,
body.nzk-app--marketplace.nzk-app--public .mp-store-map-wrap,
body.nzk-app--marketplace.nzk-app--public .mp-catalog-toolbar,
body.nzk-app--marketplace.nzk-app--public .mp-catalog-main {
    max-width: 1200px;
    padding-left: 24px;
    padding-right: 24px;
}
body.nzk-app--marketplace.nzk-app--public .mp-catalog-main { padding-bottom: 40px; }
body.nzk-app--marketplace.nzk-app--public .mp-store-header {
    background: rgba(255,255,255,.92);
    backdrop-filter: saturate(1.4) blur(10px);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
body.nzk-app--marketplace.nzk-app--public .mp-store-name { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
body.nzk-app--marketplace.nzk-app--public .mp-header-actions { flex-wrap: nowrap; }
body.nzk-app--marketplace.nzk-app--public .mp-header-actions .mp-btn { white-space: nowrap; }

/* Toolbar: pencarian + chip kategori satu baris yang bisa digeser */
body.nzk-app--marketplace.nzk-app--public .mp-search-input {
    height: 46px;
    padding-left: 44px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236B6B6B' stroke-width='2' stroke-linecap='round' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 16px 50%;
}
body.nzk-app--marketplace.nzk-app--public .mp-category-bar { flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
body.nzk-app--marketplace.nzk-app--public .mp-cat-chip { white-space: nowrap; }

/* Grid produk: kartu seragam, gambar persegi */
body.nzk-app--marketplace.nzk-app--public .mp-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 18px;
    align-items: stretch;
}
body.nzk-app--marketplace.nzk-app--public .mp-product-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 14px;
    border-color: var(--nzk-border, #E7E4DE);
}
body.nzk-app--marketplace.nzk-app--public .mp-product-card__img {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 0;
    height: auto;
    overflow: hidden;
    flex-shrink: 0;
    background: #F1EFEA;
}
body.nzk-app--marketplace.nzk-app--public .mp-product-card__img img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}
body.nzk-app--marketplace.nzk-app--public .mp-product-card:hover .mp-product-card__img img { transform: scale(1.04); }
body.nzk-app--marketplace.nzk-app--public .mp-product-card__img-placeholder {
    position: absolute;
    inset: 0;
    color: #B9B3A8;
}
body.nzk-app--marketplace.nzk-app--public .mp-product-card__body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    padding: 12px 14px 14px;
}
body.nzk-app--marketplace.nzk-app--public .mp-product-card__nama {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    min-height: 2.8em;
    margin: 0;
}
body.nzk-app--marketplace.nzk-app--public .mp-product-card__harga-row { margin-top: auto; }
body.nzk-app--marketplace.nzk-app--public .mp-product-card__harga { font-weight: 800; color: var(--nzk-ink, #111); }

/* Detail produk */
body.nzk-app--marketplace.nzk-app--public .mp-product-detail-page { max-width: none; margin: 0; }

@media (max-width: 640px) {
    body.nzk-app--marketplace.nzk-app--public .mp-store-header__inner,
    body.nzk-app--marketplace.nzk-app--public .mp-store-map-wrap,
    body.nzk-app--marketplace.nzk-app--public .mp-catalog-toolbar,
    body.nzk-app--marketplace.nzk-app--public .mp-catalog-main { padding-left: 14px; padding-right: 14px; }
    body.nzk-app--marketplace.nzk-app--public .mp-store-header__inner { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
    body.nzk-app--marketplace.nzk-app--public .mp-store-logo { width: 40px; height: 40px; }
    body.nzk-app--marketplace.nzk-app--public .mp-store-name { font-size: 16px; }
    body.nzk-app--marketplace.nzk-app--public .mp-store-desc { font-size: 12px; }
    body.nzk-app--marketplace.nzk-app--public .mp-header-actions { gap: 6px; }
    body.nzk-app--marketplace.nzk-app--public .mp-header-actions .mp-btn { padding: 8px 10px; font-size: 12px; min-height: 38px; }
    /* Tombol peta jadi ikon saja di layar kecil */
    body.nzk-app--marketplace.nzk-app--public #mp-btn-track-order { display: inline-flex !important; }
    body.nzk-app--marketplace.nzk-app--public #mp-btn-view-maps,
    body.nzk-app--marketplace.nzk-app--public #mp-btn-track-order { font-size: 0 !important; width: 38px; padding: 0 !important; align-items: center; justify-content: center; }
    body.nzk-app--marketplace.nzk-app--public #mp-btn-view-maps i,
    body.nzk-app--marketplace.nzk-app--public #mp-btn-track-order i { font-size: 15px; }
    body.nzk-app--marketplace.nzk-app--public .mp-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body.nzk-app--marketplace.nzk-app--public .mp-product-card__body { padding: 10px 10px 12px; }
    body.nzk-app--marketplace.nzk-app--public .mp-product-card__nama { font-size: 13px; }
    body.nzk-app--marketplace.nzk-app--public .mp-badge { font-size: 10px; padding: 3px 8px; }
}

/* ---------- BOOKING ---------- */
body.nzk-app--booking.nzk-app--public .bk-customer-page {
    max-width: 680px;
    min-height: 0;
    margin: 0 auto;
    background: var(--nzk-bg, #F6F5F2);
}
@media (min-width: 720px) {
    body.nzk-app--booking.nzk-app--public .bk-customer-page { margin-top: 32px; border-radius: 18px; overflow: hidden; border: 1px solid var(--nzk-border, #E7E4DE); box-shadow: 0 10px 40px rgba(17,17,17,.06); }
}
body.nzk-app--booking.nzk-app--public .bk-cust-header { padding: 4px 0 0; }
body.nzk-app--booking.nzk-app--public .bk-cust-logo-wrap { align-items: flex-start; padding: 18px 20px 14px; }
body.nzk-app--booking.nzk-app--public .bk-cust-brand { flex: 1; min-width: 0; }
body.nzk-app--booking.nzk-app--public .bk-cust-nama { font-size: 19px; line-height: 1.3; }
body.nzk-app--booking.nzk-app--public .bk-cust-maps { margin-top: 10px; font-size: 12px; padding: 6px 12px; }
body.nzk-app--booking.nzk-app--public .bk-cust-info-row { flex-direction: column; gap: 6px; }
body.nzk-app--booking.nzk-app--public .bk-cust-info-box { align-items: flex-start; }
body.nzk-app--booking.nzk-app--public .bk-stepper { display: flex; align-items: center; overflow-x: auto; background: #fff; }
body.nzk-app--booking.nzk-app--public .bk-step { white-space: nowrap; flex-shrink: 0; }
body.nzk-app--booking.nzk-app--public .bk-step-line { flex: 1 1 12px; }
body.nzk-app--booking.nzk-app--public .bk-cek-status-fab {
    position: static;
    display: flex;
    justify-content: center;
    padding: 4px 20px 24px;
}
body.nzk-app--booking.nzk-app--public .bk-cek-status-fab .bk-btn { box-shadow: none; background: #fff; }
@media (max-width: 560px) {
    body.nzk-app--booking.nzk-app--public .bk-step:not(.active) { font-size: 0; gap: 0; }
    body.nzk-app--booking.nzk-app--public .bk-step .bk-step-num { font-size: 11px; }
    body.nzk-app--booking.nzk-app--public .bk-step.active { font-size: 12px; }
    body.nzk-app--booking.nzk-app--public .bk-cust-logo { width: 48px; height: 48px; min-width: 48px; }
    body.nzk-app--booking.nzk-app--public .bk-cust-nama { font-size: 17px; }
}

/* ---------- MENU DIGITAL ---------- */
body.nzk-app--menu.nzk-app--public .customer-page { position: relative; max-width: 640px; padding-bottom: 88px; }
@media (min-width: 680px) {
    body.nzk-app--menu.nzk-app--public .customer-page { margin-top: 24px; min-height: 0; border-radius: 18px; border: 1px solid var(--nzk-border, #E7E4DE); box-shadow: 0 10px 40px rgba(17,17,17,.06); }
}
body.nzk-app--menu.nzk-app--public .theme-toggle { position: absolute; top: 14px; right: 14px; }
body.nzk-app--menu.nzk-app--public .cust-logo-wrap > div { padding-right: 44px; }
body.nzk-app--menu.nzk-app--public .md-head-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
body.nzk-app--menu.nzk-app--public .md-head-actions .btn { font-size: 12px; padding: 6px 12px; }
body.nzk-app--menu.nzk-app--public .cat-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
body.nzk-app--menu.nzk-app--public .cat-bar::-webkit-scrollbar { display: none; }
body.nzk-app--menu.nzk-app--public .cat-pill { white-space: nowrap; flex-shrink: 0; }
body.nzk-app--menu.nzk-app--public .cust-cart-fab { max-width: 600px; width: calc(100% - 32px); min-width: 0; z-index: 900; }
body.nzk-app--menu.nzk-app--public .cust-info-val { white-space: nowrap; font-size: 14px; }
body.nzk-app--menu.nzk-app--public .cust-logo-wrap { align-items: flex-start; }
body.nzk-app--menu.nzk-app--public .menu-card { align-items: center; }
body.nzk-app--menu.nzk-app--public .menu-thumb,
body.nzk-app--menu.nzk-app--public .menu-thumb-img { width: 66px !important; height: 66px !important; flex: 0 0 66px; overflow: hidden; border-radius: 12px; }
body.nzk-app--menu.nzk-app--public .menu-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 400px) {
    body.nzk-app--menu.nzk-app--public .cust-info-val { font-size: 12.5px; }
}

/* ---------- KALKULATOR ---------- */
body.nzk-app--kalkulator.nzk-app--public .pc-customer { max-width: 720px; min-height: 0; }
@media (min-width: 760px) {
    body.nzk-app--kalkulator.nzk-app--public .pc-customer { margin-top: 32px; border-radius: 18px; overflow: hidden; border: 1px solid var(--nzk-border, #E7E4DE); box-shadow: 0 10px 40px rgba(17,17,17,.06); }
}
body.nzk-app--kalkulator.nzk-app--public .pc-service-card { text-align: left; align-items: flex-start; }
body.nzk-app--kalkulator.nzk-app--public .pc-sc-name,
body.nzk-app--kalkulator.nzk-app--public .pc-sc-desc { text-align: left; }
body.nzk-app--menu.nzk-app--public .md-tutup-banner {
    margin: 12px 16px 0;
    padding: 12px 14px;
    border-radius: 12px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: #991B1B;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
}