/* =========================================================
   BANTUAPP — MODERN UI SYSTEM
   ========================================================= */

:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: #eff6ff;
    --primary-soft: #dbeafe;

    --accent: #22c55e;
    --accent-hover: #16a34a;
    --accent-light: #f0fdf4;

    --bg: #f6f8fc;
    --card: #ffffff;
    --surface: #ffffff;
    --surface-soft: #f8fafc;

    --text: #0f172a;
    --text-secondary: #475569;
    --muted: #64748b;

    --border: #e2e8f0;
    --border-soft: #f1f5f9;

    --danger: #ef4444;
    --warning: #f59e0b;

    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;

    --shadow-sm:
        0 1px 2px rgba(15, 23, 42, 0.04),
        0 1px 3px rgba(15, 23, 42, 0.06);

    --shadow:
        0 4px 14px rgba(15, 23, 42, 0.06);

    --shadow-lg:
        0 12px 32px rgba(15, 23, 42, 0.10);

    --sidebar-width: 250px;

    --transition: 0.2s ease;
}


/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    background:
        radial-gradient(
            circle at top right,
            rgba(37, 99, 235, 0.045),
            transparent 28%
        ),
        var(--bg);

    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
    font: inherit;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.15);
    outline-offset: 2px;
}

.hidden {
    display: none !important;
}


/* =========================================================
   BUTTON
   ========================================================= */

.btn {
    min-height: 42px;
    padding: 10px 18px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    border-radius: 12px;
    border: 1px solid var(--border);

    background: #ffffff;
    color: var(--text);

    cursor: pointer;

    font-weight: 650;
    font-size: 14px;

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition),
        background var(--transition);
}

.btn:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0) scale(0.98);
}

.btn-primary {
    color: #ffffff;
    background: linear-gradient(
        135deg,
        #2563eb,
        #1d4ed8
    );

    border-color: transparent;

    box-shadow:
        0 6px 16px rgba(37, 99, 235, 0.22);
}

.btn-primary:hover {
    background: linear-gradient(
        135deg,
        #1d4ed8,
        #1e40af
    );

    border-color: transparent;

    box-shadow:
        0 8px 22px rgba(37, 99, 235, 0.28);
}

.btn-accent {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #22c55e,
        #16a34a
    );

    border-color: transparent;

    box-shadow:
        0 6px 16px rgba(34, 197, 94, 0.20);
}

.btn-accent:hover {
    background: linear-gradient(
        135deg,
        #16a34a,
        #15803d
    );

    border-color: transparent;
}


/* =========================================================
   ONBOARDING
   ========================================================= */

.onboarding {
    position: fixed;
    inset: 0;

    z-index: 100;

    display: grid;
    place-items: center;

    padding: 24px;

    text-align: center;

    background:
        radial-gradient(
            circle at top,
            rgba(37, 99, 235, 0.12),
            transparent 40%
        ),
        #ffffff;
}

.onboarding-slide {
    display: none;

    width: min(100%, 480px);

    padding: 36px 28px;

    background: rgba(255, 255, 255, 0.92);

    border: 1px solid rgba(226, 232, 240, 0.9);

    border-radius: 28px;

    box-shadow: var(--shadow-lg);
}

.onboarding-slide.active {
    display: block;
    animation: fadeUp 0.35s ease;
}

.o-icon {
    width: 80px;
    height: 80px;

    margin: 0 auto 20px;

    display: grid;
    place-items: center;

    font-size: 42px;

    border-radius: 24px;

    background: var(--primary-light);
    color: var(--primary);
}

.dots {
    display: flex;
    justify-content: center;
    gap: 7px;

    margin-top: 22px;
}

.dot {
    width: 8px;
    height: 8px;

    border-radius: 999px;

    background: #cbd5e1;

    transition: 0.25s ease;
}

.dot.active {
    width: 24px;
    background: var(--primary);
}


/* =========================================================
   APP LAYOUT
   ========================================================= */

.app {
    display: flex;

    min-height: 100vh;
    min-height: 100dvh;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
    width: var(--sidebar-width);
    height: 100vh;
    height: 100dvh;

    position: sticky;
    top: 0;

    flex-shrink: 0;

    display: flex;
    flex-direction: column;

    padding: 12px;

    background: rgba(255, 255, 255, 0.94);

    border-right: 1px solid var(--border);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    overflow-y: auto;
}

.brand {
    min-height: 68px;

    padding: 12px 10px 18px;

    display: flex;
    align-items: center;
    gap: 10px;

    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.4px;

    color: var(--text);
}

.sidebar nav {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sidebar nav button {
    width: 100%;

    display: flex;
    align-items: center;
    gap: 11px;

    padding: 11px 13px;

    border: none;
    border-radius: 11px;

    background: transparent;

    color: var(--text-secondary);

    text-align: left;
    font-size: 14px;
    font-weight: 550;

    cursor: pointer;

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);
}

.sidebar nav button:hover {
    background: #f1f5f9;
    color: var(--text);

    transform: translateX(2px);
}

.sidebar nav button.active {
    color: var(--primary);

    background: linear-gradient(
        90deg,
        var(--primary-light),
        rgba(239, 246, 255, 0.45)
    );

    font-weight: 700;
}


/* =========================================================
   MAIN
   ========================================================= */

.main {
    flex: 1;

    min-width: 0;

    max-width: 100%;

    overflow-x: hidden;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
    position: sticky;
    top: 0;

    min-height: 64px;

    z-index: 30;

    padding: 10px 22px;

    display: flex;
    align-items: center;
    gap: 12px;

    background: rgba(255, 255, 255, 0.82);

    border-bottom: 1px solid rgba(226, 232, 240, 0.8);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 1px 8px rgba(15, 23, 42, 0.025);
}


/* =========================================================
   CONTENT
   ========================================================= */

#content {
    width: 100%;
    max-width: 1200px;

    margin: 0 auto;

    padding: 26px 28px 120px;
}


/* =========================================================
   CARD GRID
   ========================================================= */

.card-grid {
    display: grid;

    grid-template-columns:
        repeat(auto-fit, minmax(180px, 1fr));

    gap: 16px;
}


/* =========================================================
   STAT CARD
   ========================================================= */

.stat-card {
    position: relative;

    padding: 20px;

    background: var(--card);

    border: 1px solid var(--border-soft);

    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

    overflow: hidden;

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.stat-card:hover {
    transform: translateY(-2px);

    border-color: #dbe3ef;

    box-shadow: var(--shadow);
}

.stat-card::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 3px;

    background: linear-gradient(
        90deg,
        var(--primary),
        #60a5fa
    );

    opacity: 0;
    transition: opacity var(--transition);
}

.stat-card:hover::before {
    opacity: 1;
}


/* =========================================================
   FORM
   ========================================================= */

.form-group {
    margin-bottom: 18px;
}

.form-group label {
    display: block;

    margin-bottom: 7px;

    color: #334155;

    font-size: 13px;
    font-weight: 650;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;

    min-height: 44px;

    padding: 11px 13px;

    color: var(--text);

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 11px;

    outline: none;

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background var(--transition);
}

.form-group textarea {
    min-height: 110px;
    resize: vertical;
}

.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover {
    border-color: #cbd5e1;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--primary);

    box-shadow:
        0 0 0 4px rgba(37, 99, 235, 0.10);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #94a3b8;
}


/* =========================================================
   PRODUCT ROW
   ========================================================= */

.product-row {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 14px;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: var(--radius);

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);
}

.product-row:hover {
    border-color: #d5deea;

    box-shadow: var(--shadow);

    transform: translateY(-1px);
}

.product-row img {
    width: 64px;
    height: 64px;

    flex-shrink: 0;

    border-radius: 13px;

    object-fit: cover;

    background: #f1f5f9;

    border: 1px solid var(--border-soft);
}


/* =========================================================
   STATUS BADGE
   ========================================================= */

.badge-status {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    padding: 5px 10px;

    border-radius: 999px;

    color: #92400e;
    background: #fffbeb;

    border: 1px solid #fde68a;

    font-size: 11px;
    font-weight: 700;
}


/* =========================================================
   PREVIEW
   ========================================================= */

.preview-frame {
    width: 100%;

    min-height: 620px;

    overflow: hidden;

    background: #ffffff;

    border: 1px solid var(--border);

    border-radius: 20px;

    box-shadow: var(--shadow);
}


/* =========================================================
   QR
   ========================================================= */

.qr-wrap {
    display: grid;
    place-items: center;

    padding: 28px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );

    border: 1px dashed #cbd5e1;

    border-radius: var(--radius);

    transition:
        border-color var(--transition),
        background var(--transition);
}

.qr-wrap:hover {
    border-color: var(--primary);

    background: var(--primary-light);
}


/* =========================================================
   MODAL
   ========================================================= */

.modal-root {
    position: fixed;
    inset: 0;

    z-index: 150;

    display: none;
    place-items: center;

    padding: 24px;

    background: rgba(15, 23, 42, 0.55);

    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.modal-root.open {
    display: grid;
    animation: modalFade 0.2s ease;
}

.modal-box {
    width: min(100%, 560px);

    max-height: calc(100dvh - 48px);

    padding: 24px;

    overflow-y: auto;
    overscroll-behavior: contain;

    background: #ffffff;

    border: 1px solid rgba(255, 255, 255, 0.7);

    border-radius: 22px;

    box-shadow:
        0 24px 70px rgba(15, 23, 42, 0.22);

    animation: modalUp 0.25s ease;
}

.modal-box::-webkit-scrollbar {
    width: 6px;
}

.modal-box::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}


/* =========================================================
   TOAST
   ========================================================= */

.toast {
    position: fixed;

    left: 50%;
    bottom: 28px;

    z-index: 200;

    display: none;

    max-width: calc(100% - 32px);

    padding: 11px 18px;

    transform: translateX(-50%);

    color: #ffffff;
    background: rgba(15, 23, 42, 0.94);

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 999px;

    box-shadow: var(--shadow-lg);

    backdrop-filter: blur(10px);

    font-size: 13px;
    font-weight: 600;
}

.toast.show {
    display: block;

    animation: toastUp 0.25s ease;
}


/* =========================================================
   BOTTOM NAVIGATION
   ========================================================= */

.bottom-nav {
    position: fixed;

    left: 50%;
    bottom: 12px;

    z-index: 50;

    display: none;
    justify-content: space-around;

    width: calc(100% - 24px);
    max-width: 520px;

    padding:
        7px
        8px
        calc(7px + env(safe-area-inset-bottom));

    transform: translateX(-50%);

    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(226, 232, 240, 0.9);

    border-radius: 20px;

    box-shadow:
        0 12px 35px rgba(15, 23, 42, 0.14);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.bottom-nav button {
    min-width: 54px;

    padding: 7px 8px;

    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;

    color: var(--muted);

    border: none;
    border-radius: 12px;

    background: transparent;

    cursor: pointer;

    font-size: 10px;
    font-weight: 600;

    transition:
        color var(--transition),
        background var(--transition);
}

.bottom-nav button:hover,
.bottom-nav button.active {
    color: var(--primary);
    background: var(--primary-light);
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

@keyframes modalFade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes modalUp {
    from {
        opacity: 0;
        transform: translateY(14px) scale(0.98);
    }

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

@keyframes toastUp {
    from {
        opacity: 0;
        transform: translate(-50%, 10px);
    }

    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

    :root {
        --sidebar-width: 220px;
    }

    #content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .card-grid {
        grid-template-columns:
            repeat(auto-fit, minmax(150px, 1fr));
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    body {
        background: #f8fafc;
    }

    .sidebar {
        display: none;
    }

    .main {
        width: 100%;
        padding-bottom: 88px;
    }

    .topbar {
        min-height: 58px;

        padding:
            9px
            14px;

        background: rgba(255, 255, 255, 0.92);
    }

    #content {
        padding:
            18px
            14px
            120px;
    }

    .bottom-nav {
        display: flex;
    }

    .card-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 10px;
    }

    .stat-card {
        padding: 15px;

        border-radius: 14px;
    }

    .product-row {
        padding: 11px;

        gap: 11px;

        border-radius: 14px;
    }

    .product-row img {
        width: 56px;
        height: 56px;

        border-radius: 11px;
    }

    .preview-frame {
        min-height: 520px;

        border-radius: 15px;
    }

    .modal-root {
        align-items: end;

        padding: 0;
    }

    .modal-box {
        width: 100%;

        max-height: 88dvh;

        padding:
            22px
            18px
            calc(22px + env(safe-area-inset-bottom));

        border-radius:
            24px
            24px
            0
            0;

        animation: sheetUp 0.28s ease;
    }

    .toast {
        bottom: 96px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

    #content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .card-grid {
        gap: 8px;
    }

    .stat-card {
        padding: 13px;
    }

    .btn {
        padding: 9px 14px;
        font-size: 13px;
    }
}


/* =========================================================
   MOBILE SHEET ANIMATION
   ========================================================= */

@keyframes sheetUp {
    from {
        opacity: 0;
        transform: translateY(100%);
    }

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


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}
/* =========================================================
   BANTUAPP KATALOG — UI POLISH v2
   ========================================================= */
.topbar-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.icon-btn{width:40px;height:40px;border:1px solid var(--border);border-radius:12px;background:#fff;color:var(--text);cursor:pointer;box-shadow:var(--shadow-sm);font-size:18px}
#pageTitle{text-transform:none;letter-spacing:-.03em}
#content>h2,#content>div>h2{letter-spacing:-.025em}
#prodSearch,#catName{min-height:48px!important;padding:12px 15px!important;border:1px solid var(--border)!important;border-radius:14px!important;background:#fff!important;box-shadow:var(--shadow-sm)!important;outline:none}
#prodSearch:focus,#catName:focus{border-color:var(--primary)!important;box-shadow:0 0 0 4px rgba(37,99,235,.10)!important}
.product-row{margin-bottom:10px;min-height:84px;box-shadow:var(--shadow-sm);transition:.2s ease}
.product-row:hover{transform:translateY(-1px);box-shadow:var(--shadow);border-color:#cbd5e1}
.product-row>div[style*="flex:1"]{min-width:0}
.product-row>div[style*="flex:1"]>div:first-child{font-size:15px;font-weight:750;color:var(--text)}
.product-row>div[style*="flex:1"]>div:nth-child(2){margin-top:4px;color:var(--muted)!important}
.btn-sm{min-height:36px;padding:7px 11px;border-radius:10px;font-size:12px;white-space:nowrap}
.btn-danger-soft{color:#dc2626;background:#fff7f7;border-color:#fecaca;box-shadow:none}
.btn-danger-soft:hover{background:#fef2f2;border-color:#fca5a5}
.icon-only{min-width:36px;padding:7px}
#content button:not(.btn):not(.bottom-nav button){min-height:36px;padding:7px 11px;border:1px solid var(--border);border-radius:10px;background:#fff;color:var(--text);font-weight:650;cursor:pointer;box-shadow:var(--shadow-sm);transition:.2s ease}
#content button:not(.btn):hover{background:#f8fafc;border-color:#cbd5e1;transform:translateY(-1px)}
#content>div[style*="background:#fff"],#content>div>div[style*="background:#fff"]{box-shadow:var(--shadow-sm)}
.form-group input,.form-group textarea,.form-group select{min-height:46px;background:#fff;transition:.2s ease}
.form-group textarea{min-height:110px;resize:vertical}
.form-group input:focus,.form-group textarea:focus,.form-group select:focus{border-color:var(--primary);box-shadow:0 0 0 4px rgba(37,99,235,.10);outline:none}
.modal-root{overflow:auto;overscroll-behavior:contain}
.modal-box{box-shadow:0 24px 70px rgba(15,23,42,.25);border:1px solid rgba(255,255,255,.7)}
.modal-box h3{margin-top:0;font-size:22px;letter-spacing:-.025em}
.badge-status{border:1px solid #fde68a;color:#92400e;background:#fffbeb;font-weight:700}
.sidebar .brand{font-size:16px;letter-spacing:-.02em}
.sidebar nav{padding:4px 10px}
.sidebar nav button{margin:3px 0;min-height:44px;font-weight:600;color:var(--text-secondary)}
.sidebar nav button.active{color:var(--primary);background:linear-gradient(90deg,var(--primary-light),#f8fbff);font-weight:750}
.install-top{white-space:nowrap}
.preview-btn{white-space:nowrap}
@media(max-width:768px){
  .topbar-actions{gap:6px}
  .topbar .badge-status{display:none}
  .preview-btn{display:none}
  .install-top{min-height:36px;padding:7px 10px;font-size:12px}
  #pageTitle{font-size:20px}
  .product-row{display:grid;grid-template-columns:58px minmax(0,1fr) auto auto;gap:8px;align-items:center}
  .product-row img{grid-row:1/3}
  .product-row .btn-danger-soft{grid-column:4}
  .btn-sm{padding:7px 9px}
}
@media(max-width:520px){
  .product-row{grid-template-columns:56px minmax(0,1fr);padding:12px}
  .product-row img{grid-row:auto}
  .product-row>button{grid-column:auto}
  .product-row .btn-sm{margin-top:4px}
  .product-row>button:nth-last-child(3){grid-column:1}
  .product-row>button:nth-last-child(2){grid-column:2}
  .product-row>button:last-child{grid-column:2}
}

/* ==================================================
   BANTUAPP KATALOG - SIDEBAR / HAMBURGER
   ================================================== */

.sidebar {
    transition: transform .28s ease, width .28s ease;
}

.main {
    transition: margin-left .28s ease, width .28s ease;
}

#menuBtn {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    font-size: 20px;
    transition: background .2s ease, transform .2s ease;
}

#menuBtn:hover {
    background: #f3f6fb;
}

#menuBtn:active {
    transform: scale(.95);
}

/* DESKTOP - SIDEBAR DITUTUP */
@media (min-width: 769px) {
    body.sidebar-collapsed .sidebar {
        width: 0 !important;
        min-width: 0 !important;
        overflow: hidden;
        border-right: 0;
        transform: translateX(-100%);
    }

    body.sidebar-collapsed .main {
        width: 100%;
        flex: 1 1 100%;
    }
}

/* MOBILE */
@media (max-width: 768px) {

    .sidebar {
        display: flex !important;
        position: fixed !important;
        top: 0;
        left: 0;
        bottom: 0;
        width: 270px;
        max-width: 85vw;
        height: 100dvh;
        z-index: 1000;
        background: #fff;
        transform: translateX(-105%);
        box-shadow: 16px 0 40px rgba(15, 23, 42, .16);
    }

    .sidebar.mobile-open {
        transform: translateX(0);
    }

    .main {
        width: 100%;
        min-width: 0;
    }

    #menuBtn {
        display: inline-flex !important;
        flex-shrink: 0;
    }
}

/* ==================================================
   BANTUAPP KATALOG - MOBILE SIDEBAR ENHANCEMENT
   ================================================== */

/* Tombol X default disembunyikan di desktop */
.close-sidebar-btn {
    display: none;
}

/* Backdrop default */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity .25s ease,
        visibility .25s ease;

    z-index: 999;
}

/* MOBILE */
@media (max-width: 768px) {

    /* Sidebar harus di atas backdrop */
    .sidebar {
        z-index: 1000 !important;
    }

    /* Header/brand sidebar */
    .sidebar .brand {
        display: flex;
        align-items: center;
        gap: 10px;
        min-height: 72px;
        padding: 14px 16px;
    }

    .sidebar .brand span {
        flex: 1;
        min-width: 0;
        font-weight: 800;
    }

    /* Tombol X */
    .close-sidebar-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;

        width: 38px;
        height: 38px;

        margin-left: auto;
        padding: 0;

        border: 1px solid #e5e7eb;
        border-radius: 12px;

        background: #f8fafc;
        color: #111827;

        font-size: 26px;
        font-weight: 400;
        line-height: 1;

        cursor: pointer;

        transition:
            background .2s ease,
            transform .15s ease;
    }

    .close-sidebar-btn:active {
        transform: scale(.92);
    }

    /* Backdrop aktif */
    .sidebar-backdrop.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* Jangan scroll halaman ketika menu terbuka */
    body.menu-open {
        overflow: hidden;
        touch-action: none;
    }
}

/* BANTUAPP Mengantar */
.shipping-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.shipping-muted{color:#64748b;font-size:13px;line-height:1.5}
.shipping-status{padding:7px 11px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap}
.shipping-status.on{background:#dcfce7;color:#166534}.shipping-status.off{background:#f1f5f9;color:#64748b}
.shipping-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;padding:16px;margin:0 0 14px;box-shadow:0 4px 18px rgba(15,23,42,.04)}
.shipping-card-title{font-size:16px;font-weight:800;margin-bottom:4px}
.ship-label{display:block;font-size:12px;font-weight:700;color:#334155;margin-top:12px}
.ship-label input,.ship-label select{display:block;width:100%;box-sizing:border-box;margin-top:6px;padding:11px 12px;border:1px solid #dbe2ea;border-radius:10px;background:#fff;color:#111827}
.ship-switch{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13px;font-weight:700}
.ship-grid{display:grid;grid-template-columns:1fr;gap:8px}.ship-grid.two{grid-template-columns:1fr 1fr}
.shipping-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.shipping-message{margin-top:10px;font-size:12px;min-height:18px}.shipping-message.good{color:#166534}.shipping-message.bad{color:#b91c1c}
.shipping-ok{margin-top:10px;padding:10px;border-radius:10px;background:#ecfdf5;color:#166534;font-size:12px}
.pickup-results{margin-top:7px;display:grid;gap:6px}
.pickup-result{display:flex;flex-direction:column;text-align:left;gap:2px;border:1px solid #e2e8f0;background:#fff;padding:10px;border-radius:10px;cursor:pointer}
.pickup-result span{font-size:11px;color:#64748b}
.shipping-loading{padding:30px;text-align:center;color:#64748b}
@media(max-width:640px){.shipping-head{align-items:flex-start}.ship-grid.two{grid-template-columns:1fr}.shipping-card{padding:14px}}

/* BANTUAPP manual payment + catalog orders */
.catalog-orders-box{display:grid;gap:8px;margin-top:12px}.catalog-order-row{display:grid;grid-template-columns:1fr auto;gap:12px;padding:12px;border:1px solid #e5e7eb;border-radius:12px;background:#fff}.catalog-order-row small{color:#64748b}.order-badge{font-size:10px;font-weight:800;margin:5px 0}.order-badge.paid{color:#15803d}.order-badge.pending{color:#b45309}.btn-sm{padding:7px 10px;font-size:11px;margin-left:4px}
@media(max-width:640px){.catalog-order-row{grid-template-columns:1fr}.catalog-order-row>div:last-child{text-align:left!important}.btn-sm{margin:4px 4px 0 0}}

/* Mengantar pickup map */
.map-pickup-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0 4px}
.pickup-map-help{font-size:12px;margin:4px 0 8px}
.pickup-map-status{font-size:12px}
.pickup-map-modal{display:none;position:fixed;inset:0;z-index:100000}
.pickup-map-modal.show{display:block}
.pickup-map-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.58);backdrop-filter:blur(2px)}
.pickup-map-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(760px,calc(100vw - 24px));background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 24px 70px rgba(15,23,42,.3)}
.pickup-map-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid #e5e7eb}.pickup-map-header b{display:block;font-size:16px}.pickup-map-header small{display:block;color:#64748b;margin-top:3px}.map-close{border:0;background:#f1f5f9;border-radius:10px;width:38px;height:38px;font-size:25px;line-height:1;cursor:pointer}
.pickup-map{height:min(58vh,480px);min-height:330px;background:#e2e8f0}.pickup-map .leaflet-control-attribution{font-size:9px}
.pickup-map-coords{display:flex;gap:18px;padding:10px 16px;font-size:12px;color:#475569;border-bottom:1px solid #e5e7eb}.pickup-map-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 16px}.pickup-map-actions .btn{min-height:42px}
@media(max-width:640px){.pickup-map-dialog{width:calc(100vw - 12px);border-radius:16px}.pickup-map{height:58vh;min-height:300px}.pickup-map-actions{position:sticky;bottom:0;background:#fff}.map-pickup-tools .btn{flex:1;min-width:150px}}

/* Checkout online + ongkir */
.checkout-courier-option{width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;padding:11px 12px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;cursor:pointer}
.checkout-courier-option:hover,.checkout-courier-option.selected{border-color:#22c55e;background:#f0fdf4}
.address-result{width:100%;display:block;text-align:left;padding:9px 10px;border:1px solid #e2e8f0;background:#fff;border-radius:9px;margin-top:5px;cursor:pointer}
.address-result span{display:block;font-size:12px;color:#64748b;margin-top:2px}

/* Riwayat pesanan: search, filter, pagination */
.catalog-history-filters{display:grid;grid-template-columns:minmax(180px,1fr) minmax(130px,.6fr) minmax(130px,.6fr);gap:7px;margin-top:10px}
.catalog-history-filters input,.catalog-history-filters select{width:100%;box-sizing:border-box;padding:9px 10px;border:1px solid #cbd5e1;border-radius:9px;background:#fff;color:#111827}
.catalog-history-pagination{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:12px}
@media(max-width:640px){.catalog-history-filters{grid-template-columns:1fr}.catalog-history-pagination{flex-wrap:wrap}}