:root {
    --cream: #edcdbb;
    --cream-light: #f7ede4;
    --cream-dark: #d9b49e;
    --cream-deep: #c49a80;
    --brown: #452e1d;
    --brown-light: #7a5243;
    --gold: #c8a96e;
    --gold-light: #e0c99a;
    --text-dark: #2c1a12;
    --text-mid: #5c3d2e;
    --text-soft: #8b6553;
    --white: #fffaf7;
    --red: #c0392b;
    --red-bg: #fdf0ee;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'DM Sans',sans-serif;
    background: var(--cream-light);
    color: var(--text-dark);
    min-height: 100vh;
}

/* HEADER */
.site-header {
    background: var(--brown);
    position: sticky;
    top: 0;
    z-index: 1001;
    box-shadow: 0 2px 20px rgba(44,26,18,.35);
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 18px;
}

.brand-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
}

.brand-icon {
    width: 38px;
    height: 38px;
    background: var(--gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
}

.brand-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--cream);
    letter-spacing: .03em;
    line-height: 1;
}

.brand-sub {
    font-size: .6rem;
    color: var(--gold-light);
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 300;
}

.cart-btn {
    position: relative;
    background: var(--gold);
    border: none;
    border-radius: 50px;
    padding: 8px 16px;
    color: var(--brown);
    font-weight: 500;
    font-size: .82rem;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: background .2s;
    white-space: nowrap;
    /* Several of these are <a> elements (Menu / Keranjang / Riwayat), and the
       default underline made them read as raw links rather than buttons. */
    text-decoration: none;
}

    .cart-btn:hover {
        background: var(--gold-light);
        color: var(--brown);
        text-decoration: none;
    }

    .cart-btn:focus-visible {
        outline: 2px solid var(--cream);
        outline-offset: 2px;
    }

/* Icon-only variant for utility actions that do not need a label. */
.cart-btn-icon {
    width: 38px;
    padding: 8px 0;
    justify-content: center;
    font-size: .95rem;
}

.cart-badge {
    position: absolute;
    top: -7px;
    right: -7px;
    background: var(--red);
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: .68rem;
    display: none;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* HERO */
.hero {
    background: linear-gradient(-45deg, #3d1f10, #5c3d2e, #7a4e32, #4a2c18, #000000) !important;
    padding: 44px 20px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23edcdbb' fill-opacity='0.06'%3E%3Ccircle cx='30' cy='30' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
    }

.hero-tag {
    font-size: .68rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin-bottom: 8px;
    position: relative;
}

.hero h1 {
    font-family: 'Cormorant Garamond',serif;
    font-size: clamp(1.9rem,7vw,3rem);
    font-weight: 300;
    color: var(--cream);
    line-height: 1.1;
    position: relative;
}

    .hero h1 em {
        font-style: italic;
        color: var(--gold-light);
    }

.hero-divider {
    width: 50px;
    height: 1px;
    background: var(--gold);
    margin: 14px auto;
    position: relative;
}

.hero p {
    color: var(--cream-dark);
    font-size: .88rem;
    font-weight: 300;
    position: relative;
}

/* NAV TABS - STICKY UPDATE */
.menu-nav {
    background: var(--white);
    border-bottom: 1px solid var(--cream-dark);
    padding: 0 8px;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    position: sticky;
    /* Tinggi header (sekarang termasuk search bar) di-set lewat JS,
       lihat updateStickyHeaderVar() di IDAFMenu.js */
    top: var(--sticky-header-h, 96px);
    z-index: 1000;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.menu-nav::-webkit-scrollbar {
    display: none;
}

.nav-tab {
    display: inline-block;
    padding: 13px 16px;
    border: none;
    background: transparent;
    font-size: .75rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-soft);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all .2s;
    white-space: nowrap;
}

    .nav-tab.active {
        color: var(--brown);
        /*border-bottom-color: var(--gold);*/
        font-weight: 500;
    }

    .nav-tab:hover {
        color: var(--brown);
    }

/* CONTENT */
.menu-content {
    /*padding: 20px 12px 130px;*/
    max-width: 720px;
    margin: 0 auto;
}

.menu-section {
    display: none;
}

    .menu-section.active {
        display: block;
    }

/* GROUP HEADING */
.group-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 28px 0 6px;
}

    .group-heading:first-child {
        margin-top: 0;
    }

.group-icon {
    font-size: 1rem;
}

.group-label {
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.18rem;
    font-weight: 600;
    color: var(--brown);
    white-space: nowrap;
}

.group-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right,var(--cream-dark),transparent);
}

.group-desc {
    font-size: .73rem;
    color: var(--text-soft);
    margin: 0 0 12px;
    line-height: 1.5;
    padding: 6px 10px;
    background: rgba(237,205,187,.3);
    border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0;
}

/* MENU CARD */
.menu-card {
    background: var(--white);
    border-radius: 14px;
    padding: 13px 14px;
    margin-bottom: 9px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 1px 6px rgba(92,61,46,.07);
    transition: transform .15s,box-shadow .15s;
    position: relative;
}

    .menu-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 5px 18px rgba(92,61,46,.13);
    }

.badge-hot {
    position: absolute;
    top: -1px;
    left: 12px;
    background: var(--red);
    color: #fff;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 2px 8px;
    border-radius: 0 0 6px 6px;
    text-transform: uppercase;
}

.badge-new {
    position: absolute;
    top: -1px;
    left: 12px;
    background: var(--brown);
    color: var(--cream);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .06em;
    padding: 2px 8px;
    border-radius: 0 0 6px 6px;
    text-transform: uppercase;
}

/* Only cards without a photo still need the reserved strip at the top - when
   there is a photo the badge is laid over it instead, so the image can start
   at the same height on every card in a grid row. */
.menu-card.has-badge:not(.has-image) {
    padding-top: 20px;
}

/* Badge laid over the photo. */
.card-img-wrap .badge-hot,
.card-img-wrap .badge-new {
    top: 6px;
    left: 6px;
    z-index: 2;
    border-radius: 50px;
    font-size: .52rem;
    padding: 2px 7px;
    box-shadow: 0 2px 6px rgba(44,26,18,.4);
}

.card-info {
    flex: 1;
    min-width: 0;
}

.card-name {
    font-size: .9rem;
    font-weight: 500;
    color: var(--text-dark);
    line-height: 1.3;
    margin-bottom: 2px;
}

.card-desc {
    font-size: .72rem;
    color: var(--text-soft);
    font-weight: 300;
    line-height: 1.45;
    margin-bottom: 5px;
}

.card-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
    padding-top: 2px;
}

.price-block {
    text-align: right;
}

.price-orig {
    font-size: .9rem;
    color: #bbb;
    text-decoration: line-through;
    display: block;
    line-height: 1.2;
}

.price-now {
    <!-- font-family: 'Cormorant Garamond',serif; -->
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brown);
}

.price-disc {
    font-size: .66rem;
    color: var(--red);
    font-weight: 600;
    background: var(--red-bg);
    padding: 1px 6px;
    border-radius: 50px;
    margin-top: 2px;
    display: inline-block;
}

/* priceHtml always emits both slots. In the single-column desktop layout an
   unused slot just collapses; the mobile grid re-instates it (see the 2-column
   media query) so prices share a baseline across a row. */
.price-orig:empty,
.price-disc:empty {
    display: none;
}

.add-btn {
    background: var(--brown);
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cream);
    cursor: pointer;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: background .2s,transform .12s;
}

    .add-btn:hover {
        background: var(--gold);
        color: var(--brown);
    }

    .add-btn:active {
        transform: scale(.9);
    }

/* VARIANTS */
.variant-wrap {
    margin-top: 6px;
}

.variant-label {
    font-size: .67rem;
    color: var(--text-soft);
    margin-bottom: 4px;
    font-weight: bold;
}

.variant-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.var-chip {
    border: 1px solid var(--cream-dark);
    background: transparent;
    border-radius: 50px;
    padding: 3px 11px;
    font-size: .69rem;
    color: var(--text-mid);
    cursor: pointer;
    transition: all .15s;
    font-family: 'DM Sans',sans-serif;
}

    .var-chip.sel, .var-chip:hover {
        background: var(--brown);
        border-color: var(--brown);
        color: var(--cream);
    }

/* COMBO CARD */
.combo-card {
    background: linear-gradient(135deg,#3d2516 0%,var(--brown) 100%);
    border-radius: 14px;
    padding: 14px 14px;
    margin-bottom: 9px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    box-shadow: 0 4px 16px rgba(44,26,18,.25);
    position: relative;
    overflow: hidden;
}

    .combo-card::before {
        content: '';
        position: absolute;
        top: -20px;
        right: -20px;
        width: 80px;
        height: 80px;
        background: rgba(200,169,110,.08);
        border-radius: 50%;
    }

.combo-tag {
    display: inline-block;
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    background: var(--gold);
    color: var(--brown);
    padding: 2px 8px;
    border-radius: 50px;
    margin-bottom: 5px;
}

.combo-card .card-name {
    color: var(--cream);
}

.combo-card .card-desc {
    color: rgba(237,205,187,.75);
}

.combo-card .variant-label {
    color: var(--gold-light);
}

.combo-card .var-chip {
    border-color: rgba(237,205,187,.25);
    color: var(--cream-dark);
}

    .combo-card .var-chip.sel, .combo-card .var-chip:hover {
        background: var(--gold);
        border-color: var(--gold);
        color: var(--brown);
    }

.combo-card .price-orig {
    color: rgba(255,255,255,.3);
}

.combo-card .price-now {
    color: var(--gold-light);
}

.combo-card .price-disc {
    background: rgba(192,57,43,.3);
    color: #f5a99a;
}

.combo-card .add-btn {
    background: var(--gold);
    color: var(--brown);
}

    .combo-card .add-btn:hover {
        background: var(--cream);
    }

.combo-card .badge-hot, .combo-card .badge-new {
    background: rgba(200,169,110,.9);
    color: var(--brown);
}

/* OFFCANVAS */
.offcanvas {
    --bs-offcanvas-width: min(420px,100vw);
}

.offcanvas-header {
    background: var(--brown);
    color: var(--cream);
    border-bottom: 1px solid rgba(255,255,255,.1);
}

.offcanvas-title {
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.35rem;
    font-weight: 600;
}

.cart-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-soft);
}

/* An empty cart or empty history hides everything else, so without this the
   page has no onward action at all. Full width to read as the page's primary
   action rather than a stray pill floating in the middle of the screen. */
.cart-empty-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-top: 22px;
}

.btn-block-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 22px;
    padding: 13px 20px;
    border: 1px solid var(--brown);
    border-radius: 50px;
    background: var(--brown);
    color: var(--cream);
    font-family: 'DM Sans',sans-serif;
    font-size: .88rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(69,46,29,.22);
    transition: background .2s, border-color .2s, color .2s, transform .12s, box-shadow .2s;
}

/* Inside a stacked group the wrapper owns the spacing. The empty state is a
   quiet screen, so the CTA stays a compact pill instead of a full-width slab. */
.cart-empty-actions .btn-block-cta {
    width: auto;
    min-width: 190px;
    max-width: 260px;
    margin-top: 0;
    padding: 10px 22px;
    font-size: .82rem;
    box-shadow: 0 3px 10px rgba(69,46,29,.16);
}

    .cart-empty-actions .btn-block-cta i {
        font-size: .95rem;
    }

    .btn-block-cta:hover {
        background: var(--gold);
        border-color: var(--gold);
        color: var(--brown);
        box-shadow: 0 8px 20px rgba(200,169,110,.4);
    }

    .btn-block-cta:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 3px;
    }

    .btn-block-cta:active {
        transform: scale(.98);
    }

    /* Secondary weight: same shape, quieter fill, so it does not compete with
       "Lihat Menu" above it. */
    .btn-block-cta.is-soft {
        background: rgba(200,169,110,.16);
        border-color: var(--gold);
        color: var(--brown);
        box-shadow: none;
        font-size: .82rem;
    }

        .btn-block-cta.is-soft:hover {
            background: rgba(200,169,110,.3);
            color: var(--brown);
        }

    /* Direct child only: the big bag illustration. Without the child combinator
       this also hit the icons inside the CTA buttons below, blowing them up to
       2.8rem and stretching the whole button. */
    .cart-empty > i {
        font-size: 2.6rem;
        color: var(--cream-dark);
        display: block;
        margin-bottom: 12px;
    }

.cart-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 0;
    border-bottom: 1px solid var(--cream-light);
}

.cart-item-info {
    flex: 1;
    min-width: 0;
}

.cart-item-name {
    font-size: .87rem;
    font-weight: 500;
    color: var(--text-dark);
}

.cart-item-var {
    font-size: .71rem;
    color: var(--gold);
    margin-bottom: 1px;
}

.cart-item-price {
    font-size: .78rem;
    color: var(--text-soft);
}

.cart-item-orig {
    font-size: .72rem;
    color: #aaa;
    text-decoration: line-through;
    margin-right: 4px;
}

.cart-item-disc {
    font-size: .72rem;
    color: var(--brown);
    font-weight: 600;
    margin-top: 2px;
}

.cart-item-disc-amt {
    color: var(--red);
    font-weight: 700;
}

.cart-savings-row {
    font-size: .82rem;
    font-weight: 600;
    color: var(--brown);
    padding: 4px 0;
}

.cart-savings-amt {
    color: var(--red);
    font-weight: 700;
}

.qty-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.qty-btn {
    background: var(--cream-light);
    border: 1px solid var(--cream-dark);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: .85rem;
    color: var(--brown);
    transition: background .15s;
}

    .qty-btn:hover {
        background: var(--cream-dark);
    }

.qty-num {
    font-weight: 600;
    font-size: .88rem;
    min-width: 18px;
    text-align: center;
}

.cart-footer {
    border-top: 2px solid var(--cream-dark);
    padding-top: 14px;
}

.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}

.cart-total-label {
    font-size: .88rem;
    color: var(--text-soft);
}

.cart-total-val {
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--brown);
}

.inp-group {
    margin-bottom: 10px;
}

    .inp-group label {
        font-size: .74rem;
        color: var(--text-soft);
        display: block;
        margin-bottom: 4px;
    }

    .inp-group input, .inp-group textarea {
        width: 100%;
        border: 1px solid var(--cream-dark);
        border-radius: 10px;
        padding: 9px 12px;
        font-size: .85rem;
        font-family: 'DM Sans',sans-serif;
        background: var(--cream-light);
        color: var(--text-dark);
        outline: none;
        resize: none;
    }

        .inp-group input:focus, .inp-group textarea:focus {
            border-color: var(--gold);
        }

.wa-btn {
    width: 100%;
    background: #25D366;
    border: none;
    border-radius: 50px;
    padding: 13px;
    color: #fff;
    font-size: .95rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background .2s;
}

    .wa-btn:hover {
        background: #1abe5c;
    }

/* FLOATING CART */
.float-cart {
    position: fixed;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--brown);
    color: var(--cream);
    border: none;
    border-radius: 50px;
    padding: 13px 26px;
    font-size: .88rem;
    font-weight: 500;
    display: none;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(44,26,18,.35);
    z-index: 998;
    white-space: nowrap;
}

    .float-cart.show {
        display: flex;
    }

    .float-cart:hover {
        background: var(--brown-light);
        /* Tetap di tengah — tidak ada transform tambahan */
    }

    .float-cart:active {
        /* Tidak geser, hanya sedikit mengecil di tempat */
        transform: translateX(-50%) scale(0.97);
    }

@keyframes pulse-gold {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(200, 169, 110, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(200, 169, 110, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(200, 169, 110, 0);
    }
}

.tab-next-hint {
    animation: pulse-gold 2s infinite;
    background-color: #c0392b !important;
    color: #ffffff !important;
    border-radius: 8px;
    font-weight: bold;
}

.inp-group label {
    font-size: 0.8rem;
    margin-bottom: 4px;
    font-weight: 500;
}

.inp-group input,
.inp-group textarea {
    font-size: 0.85rem;
}


/* Membuat overlay menutupi seluruh layar */
.location-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white; /* Ubah ke putih agar terasa seperti halaman baru */
    z-index: 9999;
    display: flex;
    flex-direction: column;
}
/* Membuat box lokasi mengambil seluruh tinggi dan lebar */
.location-box {
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    border-radius: 0 !important; /* Hilangkan rounded corner */
    padding: 20px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

/* Membuat peta menjadi fleksibel mengisi ruang yang ada */
#leafletMap {
    flex-grow: 1; /* Peta akan mengambil sisa ruang yang tersedia */
    height: auto !important;
    min-height: 300px;
    margin-bottom: 15px;
    border-radius: 12px;
}

/* Pastikan judul dan tombol tetap rapi */
.location-box h3 {
    font-size: 1.2rem;
    margin-bottom: 15px;
    text-align: center;
}

.btn-location-reset {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: var(--red);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
/* Container utama header */
.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    /* Tambahkan ini agar item bisa turun jika tidak muat */
    flex-wrap: wrap;
    gap: 10px;
}

/* Pengaturan khusus untuk Mobile */
@media (max-width: 480px) {
    .header-inner {
        /* Memastikan konten rata tengah saat turun ke bawah */
        justify-content: center;
        text-align: center;
    }

    .brand-wrap {
        /* Memberikan lebar penuh agar tombol dipaksa turun ke baris baru */
        width: 100%;
        justify-content: center;
        margin-bottom: 5px;
    }

    .header-actions {
        width: 100%;
        justify-content: center;
        gap: 8px;
    }

    .cart-btn {
        /* Opsional: membuat tombol sedikit lebih ringkas di mobile */
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

/* Grup tombol di sebelah kanan */
.header-actions {
    display: flex;
    align-items: center;
    gap: 10px; /* Jarak antar tombol (bisa diatur sesuai selera) */
}

/* Tombol Reset Lokasi agar lebih proporsional */
.btn-location-reset {
    background: #f8f9fa;
    border: 1px solid #ddd;
    border-radius: 8px; /* Mengikuti gaya cart-btn */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc3545;
    cursor: pointer;
    transition: all 0.3s ease;
}

    .btn-location-reset:hover {
        background: #eeeeee;
    }

/* Penyesuaian cart-btn agar tidak terlalu lebar di mobile */
.cart-btn {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* The old phone override for #cartFooter (shrinking every label, input and
   summary span by ID, which outranks any class rule) was removed with the
   checkout redesign: the sizes now come from the .ck-* rules at the end of
   this file, which are already mobile-first. */


/* Membuat marker lebih besar dan bergaya */
.custom-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Label teks "Geser Saya" di atas marker */
.marker-label {
    background: #c0392b;
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
    margin-bottom: 10px; /* Jarak antara teks dan pin */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Memposisikan tombol lokasi di dalam peta */
.map-container {
    position: relative;
}

.btn-locate-me {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 1000;
    background: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #c0392b;
    cursor: pointer;
}








/* ========================================= */
/* REDESIGN MODAL LOKASI PENGIRIMAN - IDAF KITCHEN */
/* DENGAN SCROLLING YANG BAIK */
/* ========================================= */

.location-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(44, 26, 18, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    transition: all 0.3s ease;
}

.location-card {
    background: var(--white);
    width: 100%;
    max-width: 500px;
    max-height: 90vh; /* Maksimal 90% dari tinggi viewport */
    border-radius: 32px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    overflow: hidden; /* Penting: konten di luar akan diatur oleh child */
    display: flex;
    flex-direction: column;
    animation: slideUp 0.4s ease-out;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

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

/* Header Modal - Fixed */
.location-header {
    background: var(--brown);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--gold);
    flex-shrink: 0; /* Mencegah header mengecil */
}

.location-brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-icon-small {
    width: 40px;
    height: 40px;
    background: var(--gold);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: var(--brown);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.brand-text {
    display: flex;
    flex-direction: column;
}

.brand-title-small {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--cream);
    line-height: 1.2;
}

.brand-sub-small {
    font-size: 0.65rem;
    color: var(--gold-light);
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.btn-close-location {
    background: rgba(255,255,255,0.15);
    border: none;
    color: var(--cream);
    font-size: 1.2rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-close-location:hover {
        background: var(--red);
        color: white;
        transform: rotate(90deg);
    }

/* Body Modal - Scrollable */
.location-body-scrollable {
    padding: 24px 24px 0 24px; /* Padding kanan kiri, bottom 0 */
    overflow-y: auto; /* INI YANG MEMBUAT SCROLL */
    flex: 1; /* Mengambil sisa ruang */
    scrollbar-width: thin;
    scrollbar-color: var(--gold) var(--cream-light);
}

    /* Custom scrollbar untuk Webkit (Chrome, Safari, Edge) */
    .location-body-scrollable::-webkit-scrollbar {
        width: 6px;
    }

    .location-body-scrollable::-webkit-scrollbar-track {
        background: var(--cream-light);
        border-radius: 10px;
    }

    .location-body-scrollable::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 10px;
    }

        .location-body-scrollable::-webkit-scrollbar-thumb:hover {
            background: var(--brown);
        }

.location-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.1rem !important;
    font-weight: 600;
    color: var(--brown);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.location-subtitle {
    font-size: 0.85rem;
    color: var(--text-soft);
    margin-bottom: 20px;
    padding-left: 34px;
}

/* Tombol Lokasi Saat Ini */
.btn-current-location-mobile {
    width: 100%;
    background: var(--cream-light);
    border: 2px dashed var(--gold);
    border-radius: 50px;
    padding: 14px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--brown);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-current-location-mobile:hover {
        background: var(--gold-light);
        border-style: solid;
        border-color: var(--gold);
    }

/* Map Container */
.map-container {
    position: relative;
    margin-bottom: 12px;
}

#leafletMap {
    height: 250px;
    border-radius: 20px;
    border: 2px solid var(--cream-dark);
    box-shadow: 0 10px 20px -5px rgba(92,61,46,0.3);
    z-index: 1;
}

.btn-locate-map {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 1000;
    background: var(--brown);
    border: 2px solid var(--gold);
    border-radius: 50%;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cream);
    font-size: 1.3rem;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: all 0.2s;
}

    .btn-locate-map:hover {
        background: var(--gold);
        color: var(--brown);
        transform: scale(1.1);
    }

.map-hint {
    text-align: center;
    font-size: 0.75rem;
    color: var(--gold);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: var(--cream-light);
    padding: 6px 12px;
    border-radius: 50px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

    .map-hint i {
        font-size: 0.9rem;
    }

/* Input Group */
.inp-group-location {
    margin-top: 10px;
    margin-bottom: 10px;
}

    .inp-group-location label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 0.85rem;
        font-weight: 600;
        color: var(--brown);
        margin-bottom: 8px;
    }

.form-control-location {
    width: 100%;
    border: 2px solid var(--cream-dark);
    border-radius: 16px;
    padding: 14px 16px;
    font-size: 0.9rem;
    font-family: 'DM Sans', sans-serif;
    background: var(--cream-light);
    color: var(--text-dark);
    outline: none;
    resize: vertical; /* Bisa di-resize vertical oleh user */
    min-height: 80px;
    transition: all 0.2s;
}

    .form-control-location:focus {
        border-color: var(--gold);
        background: white;
        box-shadow: 0 0 0 4px rgba(200, 169, 110, 0.2);
    }

.form-text {
    display: block;
    margin-top: 6px;
    margin-bottom: 8px;
    font-size: 0.7rem;
    color: var(--text-soft);
    padding-left: 4px;
}

/* Footer Modal - Fixed */
.location-footer {
    display: flex;
    gap: 12px;
    padding: 16px 24px 24px;
    background: var(--cream-light);
    border-top: 1px solid var(--cream-dark);
    flex-shrink: 0; /* Mencegah footer mengecil */
}

.btn-location-cancel {
    flex: 1;
    background: transparent;
    border: 2px solid var(--cream-dark);
    border-radius: 50px;
    padding: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-soft);
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-location-cancel:hover {
        background: var(--cream-dark);
        color: var(--brown);
    }

.btn-location-confirm {
    flex: 2;
    background: var(--brown);
    border: none;
    border-radius: 50px;
    padding: 12px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--cream);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 8px 16px -4px rgba(92,61,46,0.4);
}

    .btn-location-confirm:hover {
        background: var(--gold);
        color: var(--brown);
        transform: translateY(-2px);
        box-shadow: 0 12px 20px -6px rgba(200,169,110,0.5);
    }

/* Responsive untuk layar kecil */
@media (max-width: 480px) {
    .location-card {
        max-height: 95vh; /* Lebih besar di mobile */
        border-radius: 24px;
    }

    .location-header {
        padding: 16px 20px;
    }

    .brand-title-small {
        font-size: 1.2rem;
    }

    .location-body-scrollable {
        padding: 20px 20px 0 20px;
    }

    .location-title {
        font-size: 1.4rem;
    }

    .location-subtitle {
        font-size: 0.8rem;
        padding-left: 0;
    }

    .location-footer {
        flex-direction: column;
        padding: 16px 20px 20px;
    }

    .btn-location-cancel, .btn-location-confirm {
        width: 100%;
    }

    #leafletMap {
        height: 200px; /* Peta sedikit lebih kecil di mobile */
    }
}

/* Untuk layar sangat kecil (height < 600px) */
@media (max-height: 600px) {
    .location-card {
        max-height: 98vh;
    }

    .location-header {
        padding: 12px 20px;
    }

    .location-body-scrollable {
        padding: 16px 20px 0 20px;
    }

    #leafletMap {
        height: 160px;
    }

    .btn-current-location-mobile {
        padding: 10px;
        margin-bottom: 12px;
    }

    .location-footer {
        padding: 12px 20px 16px;
    }
}

/* Fix untuk marker kustom */
.custom-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 4px 4px rgba(0,0,0,0.3));
}

.marker-label {
    background: var(--red);
    color: white;
    padding: 4px 12px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    margin-bottom: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    border: 1px solid var(--gold);
}

/* Animasi loading untuk tombol */
.btn-locate-map:disabled, .btn-current-location-mobile:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}




/* ── Feature 1: Distance Alert ───────────────────────────────── */
.distance-alert-box {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-left: 4px solid #e67e22;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 0.83em;
    color: #5c3d00;
}

    .distance-alert-box i {
        font-size: 1.3em;
        color: #e67e22;
        flex-shrink: 0;
        margin-top: 2px;
    }

/* ── Feature 3: Item Unavailable ─────────────────────────────── */
.item-unavailable-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 6px;
    padding: 4px 10px;
    background: var(--cream-light);
    border: 1px solid var(--cream-dark);
    border-radius: 20px;
    font-size: 0.75em;
    font-weight: 700;
    color: var(--text-soft);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ── Sold out ─────────────────────────────────────────────────────
   The card is dimmed rather than half erased: a whole card at 55%
   opacity makes the name and price hard to read, which is unfair to
   the customer who is trying to find out what is going on. The photo
   carries the message instead, in black and white with a stamp. */
.card-disabled {
    pointer-events: none;
    background: var(--cream-light);
}

    .card-disabled .card-name,
    .card-disabled .card-desc {
        color: var(--text-soft) !important;
    }

    .card-disabled .price,
    .card-disabled .price-now,
    .card-disabled .card-price {
        color: var(--text-soft) !important;
    }

    /* Full black and white, plus a touch of fade so the colour cards
       around it still win the eye. */
    .card-disabled .card-thumb {
        filter: grayscale(1) contrast(.92) brightness(1.02);
        opacity: .82;
    }

    /* Zoom affordance is pointless while the card is not interactive. */
    .card-disabled .card-img-overlay {
        display: none;
    }

.card-sold {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, rgba(44,26,18,.14), rgba(44,26,18,.32));
    pointer-events: none;
}

    /* Rubber stamp: tilted, outlined, slightly translucent so the dish
       stays visible underneath. Sized for the small 80px thumbnail used in
       the list layout; the grid bumps it up where the photo is wider. */
    .card-sold span {
        transform: rotate(-11deg);
        max-width: 92%;
        padding: 4px 11px;
        border: 2px solid rgba(255,255,255,.9);
        border-radius: 7px;
        background: rgba(69,46,29,.55);
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        font-family: 'DM Sans',sans-serif;
        font-size: .6rem;
        font-weight: 700;
        letter-spacing: .14em;
        text-transform: uppercase;
        white-space: nowrap;
        color: #fff;
        text-shadow: 0 1px 2px rgba(0,0,0,.35);
        box-shadow: 0 3px 12px rgba(0,0,0,.28);
    }

/* Two classes on purpose: the enhanced .add-btn later in this file also uses
   !important, so a single class would lose to it and the button would still
   look like a live call to action. */
.add-btn.add-btn-disabled {
    background: var(--cream-dark) !important;
    color: var(--white) !important;
    box-shadow: none !important;
    cursor: not-allowed !important;
    pointer-events: none;
}

/* ── Feature 2: Order History Button ─────────────────────────── */
/* Now an <a> to /IDAFMenu/Riwayat rather than a panel toggle. */
.history-toggle-btn {
    background: none;
    border: 1px solid var(--gold);
    color: var(--cream);
    border-radius: 8px;
    padding: 5px 12px;
    font-size: 0.78em;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
}

    .history-toggle-btn:hover {
        background: var(--gold);
        color: var(--brown);
        text-decoration: none;
    }

    .history-toggle-btn:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

/* ── Order history / live order tracking ─────────────────────────
   Grouped into "Sedang Berjalan" and "Riwayat". Active orders carry a gold
   left rule and full-strength text; finished ones recede, so the status a
   customer actually cares about is the one that reads first. */

/* Halaman /IDAFMenu/Riwayat */
.oh-page {
    max-width: 560px;
    margin: 0 auto;
    padding: 16px 14px 90px;
}

.oh-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 12px;
    color: var(--text-soft);
    font-size: .82rem;
}

    .oh-loading i {
        animation: oh-spin 1s linear infinite;
    }

@keyframes oh-spin {
    to { transform: rotate(360deg); }
}

/* Refresh button feedback while a status check is in flight */
#ohRefreshBtn.is-busy {
    opacity: .6;
    pointer-events: none;
}

    #ohRefreshBtn.is-busy i {
        animation: oh-spin 1s linear infinite;
    }

.oh-group-label {
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin: 14px 0 7px;
}

    .oh-group-label:first-child {
        margin-top: 0;
    }

.oh-card {
    position: relative;
    display: block;
    background: var(--white);
    border: 1px solid var(--cream-dark);
    border-radius: 12px;
    padding: 11px 13px;
    margin-bottom: 8px;
    text-decoration: none;
    color: var(--text-dark);
    transition: border-color .18s, box-shadow .18s, transform .12s;
}

    .oh-card:hover {
        border-color: var(--gold);
        box-shadow: 0 4px 14px rgba(92,61,46,.12);
        color: var(--text-dark);
    }

    .oh-card:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

    .oh-card:active {
        transform: scale(.995);
    }

    /* Still in the kitchen: gold rule pulls the eye to it first. */
    .oh-card.is-live {
        border-left: 3px solid var(--gold);
    }

    /* Live right now: placed today and the kitchen is still on it. Only these
       breathe - an order from last week, or one already finished, stays still
       so the movement keeps meaning "this is happening". */
    .oh-card.is-live-now {
        background: linear-gradient(180deg, rgba(200,169,110,.07), rgba(200,169,110,0) 42%), var(--white);
        animation: oh-live-glow 2.6s ease-in-out infinite;
    }

@keyframes oh-live-glow {
    0%, 100% {
        box-shadow: 0 1px 6px rgba(92,61,46,.06);
        border-color: var(--cream-dark);
    }

    50% {
        box-shadow: 0 1px 6px rgba(92,61,46,.06), 0 0 0 3px rgba(200,169,110,.2);
        border-color: var(--gold);
    }
}

/* Blinking dot inside the status pill. Inherits the pill's own colour so it
   works on every status fill without a second palette. */
.oh-live-dot {
    position: relative;
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    animation: oh-live-blink 1.7s ease-in-out infinite;
}

    .oh-live-dot::after {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: 50%;
        background: currentColor;
        animation: oh-live-ring 1.7s ease-out infinite;
    }

@keyframes oh-live-blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: .4;
    }
}

@keyframes oh-live-ring {
    0% {
        transform: scale(1);
        opacity: .5;
    }

    70%, 100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* "Live" label next to the order number, so the state is readable without
   relying on the animation alone. */
.oh-live-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: 7px;
    padding: 2px 8px;
    border-radius: 50px;
    background: rgba(200,169,110,.2);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #7a4f0f;
    vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {
    .oh-card.is-live-now {
        animation: none;
        border-color: var(--gold);
    }

    .oh-live-dot {
        animation: none;
    }

        .oh-live-dot::after {
            display: none;
        }
}

.oh-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 5px;
}

.oh-id {
    font-family: 'DM Sans',sans-serif;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--brown);
    word-break: break-all;
}

.oh-items {
    font-size: .76rem;
    line-height: 1.45;
    color: var(--text-mid);
    margin-bottom: 6px;
}

.oh-card-foot {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.oh-date {
    font-size: .68rem;
    color: var(--text-soft);
}

.oh-total {
    font-size: .88rem;
    font-weight: 700;
    color: var(--brown);
}

.oh-more {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 7px;
    font-size: .68rem;
    font-weight: 600;
    color: var(--text-soft);
    transition: color .18s;
}

.oh-card:hover .oh-more {
    color: var(--brown);
}

/* Finished orders recede rather than disappear. */
.oh-past .oh-card {
    background: transparent;
    border-color: rgba(217,180,158,.6);
}

    .oh-past .oh-id,
    .oh-past .oh-total {
        color: var(--text-mid);
    }

/* ── Status pills ────────────────────────────────────────────────
   Differentiated by fill weight rather than by inventing hues outside the
   brand palette: the busier the kitchen is with an order, the stronger the
   fill, so "Sedang Diproses" reads loudest. */
.oh-status {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 50px;
    font-size: .64rem;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
}

    .oh-status.is-pending {
        background: rgba(200,169,110,.18);
        color: #7a4f0f;
    }

    .oh-status.is-confirmed {
        background: var(--cream);
        color: var(--brown);
    }

    .oh-status.is-processing {
        background: var(--gold);
        color: var(--brown);
    }

    .oh-status.is-done {
        background: var(--brown);
        color: var(--cream);
    }

    .oh-status.is-cancelled {
        background: var(--red-bg);
        color: var(--red);
    }

.oh-empty {
    text-align: center;
    padding: 48px 16px;
    color: var(--text-soft);
}

    /* Direct child only: the receipt illustration. Without the child
       combinator this also hit the icon inside the CTA below and stretched
       the button, same as it did on the empty cart. */
    .oh-empty > i {
        display: block;
        font-size: 2rem;
        margin-bottom: 12px;
        opacity: .5;
    }

    /* Matches the empty cart CTA: a compact pill, not a full width slab.
       Auto side margins because a block level flex box would otherwise stay
       stuck to the left edge of the centred text above it. */
    .oh-empty .btn-block-cta {
        width: fit-content;
        min-width: 190px;
        max-width: 260px;
        margin: 18px auto 0;
        padding: 10px 22px;
        font-size: .82rem;
        box-shadow: 0 3px 10px rgba(69,46,29,.16);
    }

        .oh-empty .btn-block-cta i {
            font-size: .95rem;
        }

.oh-empty-title {
    font-size: .95rem;
    font-weight: 600;
    color: var(--text-mid);
    margin-bottom: 4px;
}

.oh-empty-sub {
    font-size: .8rem;
    margin-bottom: 20px;
}

.ao-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold);
    box-shadow: 0 0 0 0 rgba(200,169,110,.7);
    animation: ao-pulse 1.8s ease-out infinite;
}

@keyframes ao-pulse {
    0% { box-shadow: 0 0 0 0 rgba(200,169,110,.7); }
    70% { box-shadow: 0 0 0 7px rgba(200,169,110,0); }
    100% { box-shadow: 0 0 0 0 rgba(200,169,110,0); }
}

@media (prefers-reduced-motion: reduce) {
    .ao-dot {
        animation: none;
    }
}




/* ── 1. OPERATIONAL HOURS BANNER ─────────────────────────────── */

#operationalBanner {
    display: none;
    margin: 0 0 12px 0;
}

.op-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    font-size: 0.88rem;
    border: 1.5px solid transparent;
    box-shadow: 0 2px 12px rgba(0,0,0,.07);
}

.op-banner--closed {
    background: #fff0ee;
    border-color: #e8b4ae;
    color: #7a2020;
}

.op-banner--pause {
    background: #fff9e8;
    border-color: #e8d680;
    color: #7a6010;
}

.op-banner--outside {
    background: #fffaf7;
    border-color: #b0c8f0;
    color: #1a3a70;
}

.op-banner__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.op-banner__title {
    font-weight: 700;
    font-size: 0.95rem;
    margin-bottom: 3px;
}

.op-banner__msg {
    font-size: 0.82rem;
    opacity: 0.85;
    line-height: 1.45;
}

/* ── 2. IMAGE LIGHTBOX ──────────────────────────────────────── */

/* ── Image lightbox ──────────────────────────────────────────────
   The name and description used to sit straight on the dimmed backdrop, so
   their contrast depended on whatever photo happened to be behind them. They
   now live on a solid cream panel underneath the photo: one card, guaranteed
   contrast, and the same surface language as the menu cards. */

#imgLightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(28, 16, 9, .78);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.lightbox-inner {
    position: relative;
    width: 100%;
    max-width: 420px;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;   /* clips the photo to the card's top corners */
    box-shadow: 0 24px 60px rgba(0,0,0,.45);
    animation: lightbox-in .22s var(--transition-bounce) both;
}

@keyframes lightbox-in {
    from { opacity: 0; transform: scale(.96); }
    to { opacity: 1; transform: scale(1); }
}

#imgLightboxSrc {
    display: block;
    width: 100%;
    max-height: 58vh;
    object-fit: contain;
    /* Letterboxing lands on brand cream rather than a bare white slab. */
    background: var(--cream-light);
}

/* Text panel */
#imgLightboxCaption {
    padding: 15px 18px 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--brown);
}

.lightbox-desc {
    display: none;
    padding: 6px 18px 18px;
    /* Left aligned: centred body copy is hard to scan once it wraps. */
    font-size: .82rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--text-mid);
    max-height: 26vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* A caption with no description still needs breathing room at the bottom.
   Driven by a class from openImageModal - the description div stays in the
   DOM even when empty, so :last-child would never match. */
.lightbox-inner.no-desc #imgLightboxCaption {
    padding-bottom: 18px;
}

.lightbox-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Neutral scrim, not a red delete-looking button, and it sits over the
       photo so it can never be clipped off-screen. */
    background: rgba(28,16,9,.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: var(--cream-light);
    border: none;
    border-radius: 50%;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
    transition: background .18s, transform .12s;
}

    .lightbox-close:hover {
        background: rgba(28,16,9,.8);
        color: #fff;
    }

    .lightbox-close:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

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

@media (prefers-reduced-motion: reduce) {
    .lightbox-inner {
        animation: none;
    }
}

/* ── 3. CARD THUMBNAIL ──────────────────────────────────────── */

.card-img-wrap {
    position: relative;
    width: 76px;
    height: 76px;
    flex-shrink: 0;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    margin-right: 10px;
    background: var(--cream-dark);
    align-self: flex-start;
}

.card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .25s ease;
}

.card-img-wrap:hover .card-thumb {
    transform: scale(1.08);
}

.card-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(44,26,18,.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
    color: #fff;
    font-size: 1.2rem;
}

.card-img-wrap:hover .card-img-overlay {
    opacity: 1;
}

/* ── Placeholder photo ────────────────────────────────────────────
   Items without a photo get the house artwork instead of an empty
   slot. It still opens the lightbox - the name and description are
   what the customer came for - but it does not zoom on hover, since
   scaling a drawing up only shows the same drawing bigger. */
.card-img-default {
    background: linear-gradient(180deg,#fbf3ea,#f2e2d4);
}

    .card-img-default:hover .card-thumb {
        transform: none;
    }

/* In the lightbox the placeholder is a label, not the content: keep it
   short so the name and description sit high enough to read without
   scrolling. Real photos keep their full 58vh. */
#imgLightboxSrc[src*="menu-default.webp"] {
    max-height: 190px;
    object-fit: contain;
}

/* Combo card dengan gambar — layout flex row */
.combo-card {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* Menu card biasa — bisa tampilkan thumbnail sebelum card-info */
.menu-card {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

    /* Pastikan card-info tetap grow */
    .menu-card .card-info,
    .combo-card .card-info {
        flex: 1 1 0;
        min-width: 0;
    }

/* Responsive: di layar kecil thumbnail sedikit mengecil */
@media (max-width: 400px) {
    .card-img-wrap {
        width: 60px;
        height: 60px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   SEARCH BOX — Mobile-first design
   ═══════════════════════════════════════════════════════════════ */

/* The menu header holds three things: identity, search, actions. On a phone
   they stack, with search on its own full width row under the brand. From
   768px there is room for a single line, so flex order moves search between
   the brand and the buttons instead of pushing the menu further down. */
.header-search-wrap {
    order: 3;
    flex: 1 0 100%;
    padding: 2px 0 2px;
}

.brand-wrap {
    order: 1;
}

.header-inner .header-actions {
    order: 2;
}

@media (min-width: 768px) {
    .header-inner {
        flex-wrap: nowrap;
        gap: 20px;
        padding: 11px 22px;
    }

    .header-search-wrap {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
        max-width: 480px;
        margin: 0 auto;
        padding: 0;
    }

    .header-inner .header-actions {
        order: 3;
        flex-shrink: 0;
    }
}

.search-box-container {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(200,169,110,0.35);
    border-radius: 50px;
    transition: border-color .2s, background .2s;
}

    .search-box-container:focus-within {
        background: rgba(255,255,255,0.2);
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(200,169,110,0.18);
    }

.search-icon {
    position: absolute;
    left: 14px;
    color: var(--gold-light);
    font-size: .9rem;
    pointer-events: none;
    transition: color .2s;
}

.search-box-container:focus-within .search-icon {
    color: var(--gold);
}

.menu-search-input {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 10px 40px 10px 38px;
    font-size: .88rem;
    color: var(--cream);
    font-family: 'DM Sans', sans-serif;
    letter-spacing: .01em;
}

    .menu-search-input::placeholder {
        color: rgba(237,205,187,0.45);
    }

.search-clear-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--gold-light);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: 50%;
    transition: color .15s, transform .15s;
}

    .search-clear-btn:hover {
        color: var(--cream);
        transform: scale(1.1);
    }

/* ─── SEARCH RESULTS PANEL ─────────────────────────────────── */

.search-results-panel {
    padding: 12px 14px 0;
    animation: fadeInDown .18s ease;
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }

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

.search-results-header {
    font-size: .82rem;
    color: var(--text-soft);
    margin-bottom: 10px;
    padding: 0 2px;
}

.search-no-result {
    color: var(--brown-light);
}

.search-empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--text-soft);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* ─── SEARCH RESULT CARD ─────────────────────────────────────── */

.search-result-card {
    position: relative;
}

.search-result-meta {
    width: 100%;
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.search-tab-badge {
    background: var(--brown);
    color: var(--cream-light);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 50px;
}

.search-group-label {
    font-size: .65rem;
    color: var(--text-soft);
    font-style: italic;
}

/* ─── SEARCH HIGHLIGHT ───────────────────────────────────────── */

mark.search-hl {
    background: rgba(200,169,110,0.35);
    color: var(--brown);
    border-radius: 2px;
    padding: 0 1px;
    font-weight: 700;
}

.search-result-variants {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

/* ─── DESKTOP override — search bar sedikit lebih besar ─────── */
@media (min-width: 600px) {
    .menu-search-input {
        font-size: .9rem;
    }
}

/* Tablet width only: the search still owns its own row, so it is centred and
   capped instead of stretching edge to edge. From 768px the header becomes a
   single line and the rule above takes over. */
@media (min-width: 600px) and (max-width: 767.98px) {
    .header-search-wrap {
        max-width: 560px;
        margin: 0 auto;
    }
}






/* ═══════════════════════════════════════════════════════════════
   ✨ ANIMATION & MODERN REDESIGN LAYER
   ═══════════════════════════════════════════════════════════════ */

/* ── Google Fonts (tambah Inter) ───────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* ── CSS Variables Tambahan ─────────────────────────────────── */
:root {
    --vibrant-orange: #ff6b35;
    --vibrant-red: #e63946;
    --vibrant-green: #2ec4b6;
    --neon-gold: #ffd60a;
    --glass-white: rgba(255,255,255,0.12);
    --shadow-warm: 0 8px 32px rgba(92,61,46,.18);
    --transition-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Keyframe Animations ─────────────────────────────────────── */
@keyframes hero-gradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes float-particle {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: .7;
    }

    33% {
        transform: translateY(-18px) rotate(10deg);
        opacity: 1;
    }

    66% {
        transform: translateY(-8px) rotate(-6deg);
        opacity: .85;
    }

    100% {
        transform: translateY(0) rotate(0deg);
        opacity: .7;
    }
}

@keyframes card-rise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

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

@keyframes badge-pop {
    0% {
        transform: scale(0.7);
        opacity: 0;
    }

    70% {
        transform: scale(1.15);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes cart-pulse {
    0% {
        box-shadow: 0 8px 24px rgba(44,26,18,.35), 0 0 0 0 rgba(200,169,110,.6);
        transform: translateX(-50%) scale(1);
    }

    60% {
        box-shadow: 0 8px 24px rgba(44,26,18,.35), 0 0 0 14px rgba(200,169,110,0);
        transform: translateX(-50%) scale(1.03);
    }

    100% {
        box-shadow: 0 8px 24px rgba(44,26,18,.35), 0 0 0 0 rgba(200,169,110,0);
        transform: translateX(-50%) scale(1);
    }
}

@keyframes ripple-add {
    from {
        transform: scale(0.8);
        opacity: .9;
    }

    to {
        transform: scale(2.4);
        opacity: 0;
    }
}

@keyframes spin-once {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-16px);
    }

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

@keyframes bounce-in {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    55% {
        transform: scale(1.12);
    }

    75% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

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

    100% {
        background-position: 200% 0;
    }
}

/* ── HERO — Animated Gradient ───────────────────────────────── */
.hero {
    background: linear-gradient( -45deg, #3d1f10, #5c3d2e, #7a4e32, #4a2c18, #6b3d1f ) !important;
    background-size: 400% 400% !important;
    animation: hero-gradient 12s ease infinite;
    padding: 48px 20px 36px;
    position: relative;
    overflow: hidden;
}

    /* Overlay texture dots */
    .hero::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 20% 80%, rgba(200,169,110,.08) 0%, transparent 50%), radial-gradient(circle at 80% 20%, rgba(200,169,110,.06) 0%, transparent 40%), url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23edcdbb' fill-opacity='0.04'%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3C/g%3E%3C/svg%3E");
        pointer-events: none;
    }

/* ── Floating food particles ─────────────────────────────────── */
.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.particle {
    position: absolute;
    font-size: clamp(1.2rem, 3vw, 2rem);
    opacity: 0;
    animation: float-particle var(--dur, 5s) ease-in-out var(--delay, 0s) infinite;
    user-select: none;
    filter: blur(.5px);
}

    .particle:nth-child(1) {
        left: 8%;
        top: 15%;
        --dur: 5.5s;
        --delay: 0s;
    }

    .particle:nth-child(2) {
        left: 20%;
        top: 70%;
        --dur: 6s;
        --delay: .7s;
    }

    .particle:nth-child(3) {
        left: 78%;
        top: 20%;
        --dur: 4.8s;
        --delay: 1.2s;
    }

    .particle:nth-child(4) {
        left: 88%;
        top: 65%;
        --dur: 7s;
        --delay: .3s;
    }

    .particle:nth-child(5) {
        left: 45%;
        top: 10%;
        --dur: 5.2s;
        --delay: 1.8s;
    }

    .particle:nth-child(6) {
        left: 60%;
        top: 80%;
        --dur: 6.5s;
        --delay: .5s;
    }

    .particle:nth-child(7) {
        left: 32%;
        top: 50%;
        --dur: 4.5s;
        --delay: 2.1s;
    }

    .particle:nth-child(8) {
        left: 72%;
        top: 45%;
        --dur: 5.8s;
        --delay: .9s;
    }

/* ── Hero text enhancements ──────────────────────────────────── */
.hero-tag {
    font-size: .65rem;
    letter-spacing: .35em;
    color: var(--gold-light);
    animation: slide-in-left .8s ease both;
}

.hero h1 {
    animation: card-rise .7s ease .15s both;
}

.hero-divider {
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
    animation: card-rise .6s ease .3s both;
    width: 80px;
}

.hero p {
    animation: card-rise .6s ease .4s both;
}

/* ── Menu Cards — Entrance Animation ────────────────────────── */
.menu-card, .combo-card {
    opacity: 0;
    animation: card-rise .5s ease forwards;
    transition: transform .2s var(--transition-bounce), box-shadow .2s;
}

    .menu-card:hover {
        transform: translateY(-4px) scale(1.005);
        box-shadow: 0 12px 32px rgba(92,61,46,.16);
    }

    .menu-card.visible,
    .combo-card.visible {
        opacity: 1;
    }

    /* Staggered animation per card */
    .menu-card:nth-child(1) {
        animation-delay: .05s;
    }

    .menu-card:nth-child(2) {
        animation-delay: .10s;
    }

    .menu-card:nth-child(3) {
        animation-delay: .15s;
    }

    .menu-card:nth-child(4) {
        animation-delay: .20s;
    }

    .menu-card:nth-child(5) {
        animation-delay: .25s;
    }

    .menu-card:nth-child(6) {
        animation-delay: .30s;
    }

    .menu-card:nth-child(7) {
        animation-delay: .35s;
    }

    .menu-card:nth-child(8) {
        animation-delay: .40s;
    }

    .menu-card:nth-child(n+9) {
        animation-delay: .45s;
    }

/* ── Add Button — Enhanced ───────────────────────────────────── */
.add-btn {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--brown), #7a4e30) !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 1.25rem !important;
    box-shadow: 0 4px 12px rgba(92,61,46,.28);
    transition: transform .15s var(--transition-bounce), box-shadow .15s !important;
}

    .add-btn:hover {
        transform: scale(1.12) rotate(5deg);
        box-shadow: 0 6px 18px rgba(92,61,46,.38);
        background: linear-gradient(135deg, var(--gold), #c8953a) !important;
        color: var(--brown) !important;
    }

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

    /* Ripple on add-btn click */
    .add-btn::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        width: 32px;
        height: 32px;
        background: rgba(255,255,255,.35);
        border-radius: 50%;
        transform: translate(-50%,-50%) scale(0);
        pointer-events: none;
    }

    .add-btn.rippling::after {
        animation: ripple-add .4s ease forwards;
    }

/* ── Floating Cart Button — Animated ────────────────────────── */
.float-cart {
    background: linear-gradient(135deg, var(--brown), #6b3d1f) !important;
    box-shadow: 0 8px 28px rgba(44,26,18,.4);
    animation: cart-pulse 2.5s ease-in-out infinite;
    border-radius: 50px !important;
    padding: 14px 28px !important;
    font-size: .9rem !important;
    font-weight: 600 !important;
}

    /* Hover: hanya ganti warna, TIDAK menggeser posisi */
    .float-cart:hover {
        background: linear-gradient(135deg, var(--gold), #c0902a) !important;
        color: var(--brown) !important;
        /* transform sengaja tidak ditambah agar posisi tengah tetap terjaga */
    }

    /* Active: mengecil di tempat — translateX(-50%) wajib disertakan agar tidak loncat */
    .float-cart:active {
        transform: translateX(-50%) scale(.97) !important;
    }

/* ── Cart Button badge ────────────────────────────────────────── */
.cart-badge {
    animation: badge-pop .35s var(--transition-bounce) both;
}

/* ── Nav Tabs — Enhanced ─────────────────────────────────────── */
.nav-tab {
    position: relative;
    font-weight: 500;
    transition: color .2s, letter-spacing .2s !important;
}

    .nav-tab::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: linear-gradient(90deg, var(--gold-light), var(--gold));
        border-radius: 2px;
        transform: translateX(-50%);
        transition: width .25s ease;
    }

    .nav-tab.active::after,
    .nav-tab:hover::after {
        width: 70%;
    }

/* ── Group headings — Enhanced ───────────────────────────────── */
.group-heading {
    animation: slide-in-left .5s ease both;
}

.group-label {
    background: linear-gradient(90deg, var(--brown), var(--brown-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Card Badges — pop-in ────────────────────────────────────── */
.badge-hot, .badge-new {
    animation: badge-pop .4s var(--transition-bounce) .3s both;
}

/* ── Skeleton Loader ─────────────────────────────────────────── */
.skeleton {
    background: linear-gradient(90deg, #f0ece8 25%, #e8e0d8 50%, #f0ece8 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease infinite;
    border-radius: 8px;
}

/* ── Price — animated gradient ───────────────────────────────── */
.price-now {
    background: linear-gradient(90deg, var(--brown), var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700 !important;
}

/* ── Operational banner — slide-in ──────────────────────────── */
.op-banner {
    animation: card-rise .4s ease both;
    border-radius: 16px !important;
}

/* ── Cart offcanvas — enhanced ───────────────────────────────── */
.offcanvas-header {
    background: linear-gradient(135deg, var(--brown), #4a2c18) !important;
}

/* ── var-chip enhanced ────────────────────────────────────────── */
.var-chip {
    transition: all .15s var(--transition-bounce) !important;
}

    .var-chip.sel, .var-chip:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(92,61,46,.25);
    }

/* ── Image card hover ─────────────────────────────────────────── */
.card-img-wrap {
    border-radius: 12px !important;
    box-shadow: 0 2px 10px rgba(92,61,46,.15);
    transition: box-shadow .2s, transform .2s !important;
}

    .card-img-wrap:hover {
        box-shadow: 0 6px 20px rgba(92,61,46,.3);
        transform: scale(1.04);
    }

/* ── Responsive tweaks ────────────────────────────────────────── */
@media (max-width:480px) {
    .hero {
        padding: 36px 16px 28px;
    }

    .menu-content {
        padding: 16px 10px 120px;
    }

    .menu-card {
        border-radius: 16px;
    }

    .add-btn {
        width: 34px !important;
        height: 34px !important;
    }
}

/* ── Cart footer enhanced ─────────────────────────────────────── */
.btn-Kirim-Pesanan {
    background: linear-gradient( 135deg, #2c1b0f, #63432d) !important;
    border: none !important;
    color: var(--cream) !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: .02em;
    box-shadow: 0 8px 24px rgba(69,46,29,.28);
    transition: background .18s, transform .15s var(--transition-bounce), box-shadow .15s !important;
}

    /* This button also carries .btn-location-confirm, whose hover turns the
       label var(--brown) because its own background turns gold. Here the
       background stays a dark brown gradient (locked with !important), so the
       text color has to be locked too or the label vanishes on hover. */
    .btn-Kirim-Pesanan:hover:not(:disabled) {
        background: linear-gradient( 135deg, #3d2718, #7a5334) !important;
        color: var(--cream-light) !important;
        transform: translateY(-2px) scale(1.01);
        box-shadow: 0 12px 30px rgba(69,46,29,.38);
    }

    .btn-Kirim-Pesanan:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 3px;
    }

    .btn-Kirim-Pesanan:active {
        transform: translateY(0) scale(.995);
        box-shadow: 0 6px 16px rgba(69,46,29,.3);
    }

    .btn-Kirim-Pesanan:disabled {
        opacity: .6;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
    }

/* ── Promo code: input + "Pakai" button + remove button ───────────
   The buttons reuse the same brown/gold pairing as .btn-location-confirm,
   so they stay consistent with the rest of the page and do not compete
   with the primary "Kirim Pesanan" CTA below them. */
.promo-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

    .promo-row input {
        flex: 1;
        min-width: 0;
        letter-spacing: 1px;
    }

.btn-promo-apply,
.btn-promo-remove {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 10px;
    font-family: 'DM Sans',sans-serif;
    font-size: .85rem;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background .18s, border-color .18s, color .18s, transform .12s;
}

    .btn-promo-apply:focus-visible,
    .btn-promo-remove:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

    .btn-promo-apply:active,
    .btn-promo-remove:active {
        transform: translateY(1px);
    }

    .btn-promo-apply:disabled,
    .btn-promo-remove:disabled {
        opacity: .5;
        cursor: not-allowed;
        transform: none;
    }

.btn-promo-apply {
    padding: 9px 18px;
    background: var(--brown);
    border-color: var(--brown);
    color: var(--cream-light);
}

    .btn-promo-apply:hover:not(:disabled) {
        background: var(--gold);
        border-color: var(--gold);
        color: var(--brown);
    }

.btn-promo-remove {
    width: 38px;
    padding: 9px 0;
    background: transparent;
    border-color: var(--cream-dark);
    color: var(--text-mid);
    font-size: .95rem;
}

    .btn-promo-remove:hover:not(:disabled) {
        background: var(--red-bg);
        border-color: var(--red);
        color: var(--red);
    }

/* Promo result message - uses the theme palette instead of Bootstrap's
   defaults (text-success/-warning/-muted), which clash with the theme. */
.promo-result {
    margin-top: 6px;
    min-height: 16px;
}

.promo-msg {
    display: block;
    font-size: .78rem;
    line-height: 1.45;
    font-weight: 600;
}

    .promo-msg.is-ok {
        padding: 6px 10px;
        border-radius: 6px;
        border-left: 3px solid var(--gold);
        background: rgba(200,169,110,.18);
        color: var(--brown);
    }

    .promo-msg.is-warn {
        color: #8a5a12;
    }

    .promo-msg.is-err {
        color: var(--red);
        font-weight: 500;
    }

    .promo-msg.is-loading {
        color: var(--text-mid);
        font-weight: 500;
    }

/* Discount line in the cart summary */
.cart-promo-row {
    color: var(--brown);
    font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════
   Container utama kartu agar fleksibel  ← (original continues)
   ════════════════════════════════════════════════════════════════ */
/* Container utama kartu agar fleksibel */
.card-body-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
}

.card-info {
    flex: 1;
    display: block; /* Pastikan bukan flex agar float bekerja */
}

/* Desain Wrapper Gambar yang di-float */
.card-img-wrap {
    float: left; /* Ini yang membuat teks membungkus */
    width: 80px; /* Sesuaikan ukuran */
    height: 80px;
    margin-right: 12px;
    margin-bottom: 4px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.card-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Membersihkan float agar tidak merusak elemen di bawahnya */
.card-info::after {
    content: "";
    display: table;
    clear: both;
}




/* Container marker agar tepat di tengah map */
.custom-center-marker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -100%); /* Geser agar ujung lancip icon pas di titik tengah */
    z-index: 1000; /* Pastikan di atas tile peta */
    pointer-events: none; /* Klik akan tembus ke peta di bawahnya */
    text-align: center;
}

    .custom-center-marker i {
        font-size: 40px;
        color: #c0392b;
        text-shadow: 0 0 3px white;
        display: block;
        line-height: 1;
    }

    .custom-center-marker .marker-label {
        background: rgba(0,0,0,0.7);
        color: white;
        padding: 2px 8px;
        border-radius: 10px;
        font-size: 10px;
        margin-bottom: 5px;
        white-space: nowrap;
    }

/* Opsional: Efek bayangan di bawah icon */
.marker-shadow {
    width: 10px;
    height: 4px;
    background: rgba(0,0,0,0.2);
    border-radius: 50%;
    margin: -2px auto 0;
}

/* Marker lokasi toko — callout coklat (bukan merah) supaya tidak
   menyatu/berantakan dengan pin "Geser Peta" yang juga merah */
.shop-marker-icon {
    background: transparent;
    border: none;
    pointer-events: none;
}

.shop-marker {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.shop-marker-label {
    background: var(--brown);
    color: #fff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    border: 1.5px solid #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,.35);
}

.shop-marker-tail {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid var(--brown);
    margin-top: -1px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SITE FOOTER — Developer Contact
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes twinkle {
    0%, 100% {
        opacity: 0.15;
        transform: scale(0.7);
    }

    50% {
        opacity: 1;
        transform: scale(1.25);
    }
}

@keyframes shooting-star {
    0% {
        transform: translateX(0) translateY(0) rotate(-30deg);
        opacity: 1;
    }

    100% {
        transform: translateX(180px) translateY(60px) rotate(-30deg);
        opacity: 0;
    }
}

@keyframes footer-glow {
    0%, 100% {
        text-shadow: 0 0 6px rgba(200,169,110,.35);
    }

    50% {
        text-shadow: 0 0 18px rgba(200,169,110,.75);
    }
}

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

    100% {
        background-position: 200% center;
    }
}

/* ── Wrapper ── */
.site-footer {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, #1a0d06 0%, #2c1a10 40%, #1f1208 100%);
    padding: 56px 20px 40px;
    margin-top: 40px;
}

/* ── Starfield canvas ── */
.footer-stars {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

/* Individual stars — injected by JS */
.fstar {
    position: absolute;
    border-radius: 50%;
    background: #fff;
    animation: twinkle var(--dur, 3s) ease-in-out var(--delay, 0s) infinite;
}

    .fstar.gold {
        background: radial-gradient(circle, #f5e0a8 0%, #c8a96e 100%);
        box-shadow: 0 0 4px rgba(200,169,110,.6);
    }

    /* Shooting star */
    .fstar.shoot {
        width: 2px !important;
        height: 2px !important;
        border-radius: 0;
        background: linear-gradient(90deg, #fff, transparent);
        animation: shooting-star var(--dur, 1.8s) ease-in var(--delay, 0s) infinite;
    }

/* ── Inner content ── */
.footer-inner {
    position: relative;
    z-index: 1;
    max-width: 540px;
    margin: 0 auto;
    text-align: center;
}

/* ── Brand row ── */
.footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 20px;
}

.footer-logo {
    font-size: 2.2rem;
    filter: drop-shadow(0 0 8px rgba(200,169,110,.5));
}

.footer-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #f5e0a8;
    animation: footer-glow 4s ease-in-out infinite;
    text-align: left;
}

.footer-sub {
    font-size: .75rem;
    color: rgba(255,255,255,.45);
    text-align: left;
    margin-top: 2px;
}

/* ── Divider ── */
.footer-divider {
    width: 60px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(200,169,110,.6), transparent);
    margin: 0 auto 28px;
}

/* ── Developer card ── */
.footer-dev-card {
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(200,169,110,.18);
    border-radius: 20px;
    padding: 28px 24px;
    backdrop-filter: blur(8px);
    margin-bottom: 24px;
}

.footer-dev-badge {
    display: inline-block;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .08em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
    opacity: .8;
}

.footer-dev-headline {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.7rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.25;
}

.footer-dev-body {
    font-size: .88rem;
    color: rgba(255,255,255,.65);
    line-height: 1.65;
    margin-bottom: 22px;
}

    .footer-dev-body strong {
        color: rgba(255,255,255,.9);
        font-weight: 600;
    }

/* ── CTA Button ── */
.footer-dev-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(270deg, #25d366, #128c7e, #25d366);
    background-size: 400% 100%;
    color: #fff !important;
    font-weight: 700;
    font-size: .92rem;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 4px 20px rgba(37,211,102,.35);
    animation: cta-shimmer 3.5s linear infinite;
    transition: transform .2s, box-shadow .2s;
}

    .footer-dev-cta:hover {
        transform: translateY(-2px) scale(1.03);
        box-shadow: 0 8px 28px rgba(37,211,102,.5);
    }

.footer-cta-icon {
    font-size: 1.1rem;
}

.footer-cta-arrow {
    font-size: 1rem;
    transition: transform .2s;
}

.footer-dev-cta:hover .footer-cta-arrow {
    transform: translateX(4px);
}

/* ── Copyright ── */
.footer-copy {
    font-size: .72rem;
    color: rgba(255,255,255,.25);
    letter-spacing: .04em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEVELOPER PAGE STYLES
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes dev-float {
    0%, 100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-12px) rotate(2deg);
    }
}

@keyframes dev-hero-bg {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

@keyframes pulse-ring {
    0% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(37,211,102,.5);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 16px rgba(37,211,102,0);
    }

    100% {
        transform: scale(0.9);
        box-shadow: 0 0 0 0 rgba(37,211,102,0);
    }
}

.dev-page {
    background: var(--cream-light);
    min-height: 100vh;
    padding-bottom: 60px;
}

/* ── Back bar ── */
.dev-back-bar {
    padding: 14px 20px;
    background: #fff;
    border-bottom: 1px solid var(--cream-dark);
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dev-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--brown);
    font-weight: 600;
    font-size: .88rem;
    text-decoration: none;
    padding: 6px 14px;
    border-radius: 50px;
    border: 1.5px solid var(--cream-dark);
    background: #fff;
    transition: background .2s, border-color .2s;
}

    .dev-back-btn:hover {
        background: var(--cream-light);
        border-color: var(--cream-deep);
        color: var(--brown);
        text-decoration: none;
    }

/* ── Hero ── */
.dev-hero {
    background: linear-gradient(135deg, #1a0d06 0%, #2c1a10 30%, #3d2517 60%, #1a0d06 100%);
    background-size: 300% 300%;
    animation: dev-hero-bg 8s ease infinite;
    padding: 56px 20px 48px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.dev-hero-emoji {
    font-size: 3.5rem;
    display: inline-block;
    animation: dev-float 4s ease-in-out infinite;
    filter: drop-shadow(0 4px 12px rgba(200,169,110,.4));
    margin-bottom: 16px;
}

.dev-hero-tag {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 12px;
    opacity: .9;
}

.dev-hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: clamp(2rem, 7vw, 3rem);
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 14px;
}

    .dev-hero-title em {
        font-style: italic;
        color: var(--gold-light);
    }

.dev-hero-sub {
    font-size: .9rem;
    color: rgba(255,255,255,.6);
    max-width: 360px;
    margin: 0 auto 28px;
    line-height: 1.6;
}

/* ── WA CTA Hero ── */
.dev-wa-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff !important;
    font-weight: 700;
    font-size: 1rem;
    padding: 16px 32px;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(37,211,102,.45);
    animation: pulse-ring 2.5s ease infinite;
    transition: transform .2s;
}

    .dev-wa-btn:hover {
        transform: translateY(-3px);
        color: #fff;
        text-decoration: none;
    }

.dev-wa-icon {
    font-size: 1.3rem;
}

/* ── Content container ── */
.dev-content {
    max-width: 560px;
    margin: 0 auto;
    padding: 32px 20px 0;
}

/* ── Section title ── */
.dev-section-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--brown);
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── Service cards ── */
.dev-services {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 32px;
}

.dev-svc-card {
    background: #fff;
    border-radius: 16px;
    padding: 20px 16px;
    text-align: center;
    border: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    transition: transform .2s, box-shadow .2s;
}

    .dev-svc-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 8px 28px rgba(0,0,0,.10);
    }

.dev-svc-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.dev-svc-name {
    font-weight: 700;
    font-size: .88rem;
    color: var(--brown);
    margin-bottom: 4px;
}

.dev-svc-desc {
    font-size: .75rem;
    color: var(--text-soft);
    line-height: 1.5;
}

/* ── Why card ── */
.dev-why-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 32px;
}

.dev-why-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid rgba(0,0,0,.05);
    box-shadow: 0 1px 6px rgba(0,0,0,.04);
}

.dev-why-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.dev-why-text-title {
    font-weight: 700;
    font-size: .88rem;
    color: var(--brown);
    margin-bottom: 2px;
}

.dev-why-text-desc {
    font-size: .78rem;
    color: var(--text-soft);
    line-height: 1.5;
}

/* ── CTA bottom ── */
.dev-cta-bottom {
    background: linear-gradient(135deg, #1a0d06, #3d2517);
    border-radius: 20px;
    padding: 32px 24px;
    text-align: center;
    color: #fff;
}

.dev-cta-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.6rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: #f5e0a8;
}

.dev-cta-sub {
    font-size: .85rem;
    color: rgba(255,255,255,.6);
    margin-bottom: 20px;
    line-height: 1.6;
}

.dev-contact-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .85rem;
    color: rgba(255,255,255,.5);
    margin-top: 16px;
}

.dev-phone {
    font-family: monospace;
    font-size: .92rem;
    color: var(--gold-light);
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
   MENU LOADING SCREEN & EMPTY STATE
   ═══════════════════════════════════════════════════════════════ */

#menuLoadingScreen {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 24px;
    gap: 20px;
    min-height: 240px;
}

.menu-loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--cream-dark);
    border-top-color: var(--brown);
    border-radius: 50%;
    animation: menu-spin 0.8s linear infinite;
}

@keyframes menu-spin {
    to {
        transform: rotate(360deg);
    }
}

.menu-loading-text {
    font-size: 0.9rem;
    color: var(--text-soft);
    font-weight: 500;
    letter-spacing: 0.04em;
    animation: menu-loading-pulse 1.4s ease-in-out infinite;
}

@keyframes menu-loading-pulse {
    0%, 100% {
        opacity: 0.5;
    }

    50% {
        opacity: 1;
    }
}

/* Skeleton cards saat loading */
.menu-skeleton-wrap {
    padding: 16px 12px;
    max-width: 720px;
    margin: 0 auto;
}

.menu-skeleton-card {
    background: var(--white);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 9px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    box-shadow: 0 1px 6px rgba(92,61,46,.07);
}

.skeleton-thumb {
    width: 76px;
    height: 76px;
    border-radius: 10px;
    flex-shrink: 0;
}

.skeleton-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 4px;
}

.skeleton-line {
    height: 12px;
    border-radius: 6px;
}

    .skeleton-line.w-60 {
        width: 60%;
    }

    .skeleton-line.w-80 {
        width: 80%;
    }

    .skeleton-line.w-40 {
        width: 40%;
    }

/* Empty state */
#menuEmptyState {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 72px 24px;
    text-align: center;
    gap: 14px;
}

.menu-empty-icon {
    font-size: 3rem;
    opacity: 0.4;
    animation: float-particle 5s ease-in-out infinite;
}

.menu-empty-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--brown);
}

.menu-empty-sub {
    font-size: 0.85rem;
    color: var(--text-soft);
    max-width: 280px;
    line-height: 1.6;
}

.menu-empty-retry {
    margin-top: 6px;
    background: var(--brown);
    color: var(--cream);
    border: none;
    border-radius: 50px;
    padding: 10px 24px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

    .menu-empty-retry:hover {
        background: var(--brown-light);
    }

/* ═══════════════════════════════════════════════════════════════
   WA JAPRI BUTTON (header)
   ═══════════════════════════════════════════════════════════════ */
.wa-japri-btn {
    background: linear-gradient(135deg, #25d366, #128c7e) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 600;
    transition: opacity .2s, transform .2s !important;
}

    .wa-japri-btn:hover {
        opacity: .88;
        transform: translateY(-1px);
    }

/* ═══════════════════════════════════════════════════════════════
   MAP SEARCH BOX (location overlay)
   ═══════════════════════════════════════════════════════════════ */
.map-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--white);
    border: 1.5px solid var(--cream-dark);
    border-radius: 50px;
    padding: 8px 14px;
    margin-bottom: 12px;
}

.map-search-icon {
    color: var(--text-soft);
    font-size: .9rem;
    flex-shrink: 0;
}

.map-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: .88rem;
    color: var(--text-dark);
    font-family: 'DM Sans', sans-serif;
    min-width: 0;
}

    .map-search-input::placeholder {
        color: var(--text-soft);
        opacity: .7;
    }

.map-search-btn {
    background: var(--brown);
    color: var(--cream);
    border: none;
    border-radius: 50px;
    padding: 6px 14px;
    font-size: .8rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: background .2s;
}

    .map-search-btn:hover {
        background: var(--brown-light);
    }

    .map-search-btn:disabled {
        opacity: .6;
        cursor: not-allowed;
    }

/* ═══════════════════════════════════════════════════════════════
   GOOGLE MAPS DIRECTION BUTTON
   ═══════════════════════════════════════════════════════════════ */
.btn-google-direction {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 10px;
    background: linear-gradient(135deg, #4285f4, #1a73e8);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 10px 20px;
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity .2s, transform .2s;
    font-family: 'DM Sans', sans-serif;
}

    .btn-google-direction:hover {
        opacity: .9;
        transform: translateY(-1px);
    }

/* ═══════════════════════════════════════════════════════════════
   MOBILE — 2-column card grid, description hidden (tap photo for detail),
   sections stacked so scrolling reveals all tabs (scrollspy in JS)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 899.98px) {
    .menu-section {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 10px 8px;
        align-content: start;
        scroll-margin-top: 130px;
    }

    .group-heading,
    .group-desc {
        grid-column: 1 / -1;
    }

    #searchResultsList {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px 8px;
    }

    .menu-card,
    .search-result-card {
        flex-direction: column;
        align-items: stretch;
        padding: 10px;
        margin-bottom: 0;
        /* The grid stretches every card in a row to the tallest one; making
           the card a full-height column lets the rails below line up. */
        height: 100%;
    }

    .menu-card.has-badge:not(.has-image) {
        padding-top: 20px;
    }

    .card-body-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        flex: 1;
    }

    .card-info {
        display: flex;
        flex-direction: column;
        /* Absorbs the slack, so a card with many variant chips does not shove
           its price row out of line with its neighbour. */
        flex: 1;
    }

    .card-img-wrap {
        float: none;
        width: 100%;
        height: 108px;
        margin: 0 0 8px;
    }

    /* Photo is full card width here, so the stamp can carry its full size. */
    .card-sold span {
        font-size: .74rem;
        letter-spacing: .2em;
        padding: 5px 15px;
    }

    .card-desc {
        display: none;
    }

    /* Always two lines tall, whether the name wraps or not, so the photo below
       starts at the same height on both cards of a row. */
    .card-name {
        font-size: .82rem;
        line-height: 1.3;
        min-height: 2.6em;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Pinned to the bottom of the card so price and add button line up across
       the row regardless of what happens above them. */
    .card-right {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-top: 2px;
        margin-top: auto;
    }

    .price-block {
        text-align: left;
    }

    .price-now {
        font-size: .92rem;
    }

    /* Hold the line open when there is no discount, so "Rp 36.000" and
       "Rp 56.900" sit on the same baseline instead of staggering. */
    .price-orig:empty {
        display: block;
        visibility: hidden;
    }

    .price-disc:empty {
        display: inline-block;
        visibility: hidden;
    }

        .price-orig:empty::before,
        .price-disc:empty::before {
            content: "\00a0";
        }

    .variant-wrap {
        margin-top: 4px;
    }
    }

/* ═══════════════════════════════════════════════════════════════
   CART PAGE (/IDAFMenu/Cart) — halaman penuh, bukan offcanvas
   ═══════════════════════════════════════════════════════════════ */
/* .cart-page-wrap is styled with the rest of the checkout page at the
   end of this file. */
.cart-page-list {
    margin-bottom: 6px;
}

/* The old single "Ambil Sendiri" toggle was replaced by the two option
   cards at the end of this file (.ck-method). */

/* ═══════════════════════════════════════════════════════════════
   SEARCH ROW ACTIONS + PWA INSTALL + WHATSAPP FAB
   ═══════════════════════════════════════════════════════════════ */

/* Lokasi and Pasang sit on the search line rather than in their own row of
   pills. One row of controls instead of two reads far calmer on a phone, and
   the buttons borrow the search field's own translucent-on-brown treatment so
   the three read as a single control group. */
.header-search-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

    .header-search-row .search-box-container {
        flex: 1;
        min-width: 0;
    }

.search-side-btn {
    flex: 0 0 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.12);
    border: 1.5px solid rgba(200,169,110,0.35);
    border-radius: 50px;
    color: var(--gold-light);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    transition: background .2s, border-color .2s, color .2s, transform .12s;
}

    .search-side-btn:hover {
        background: rgba(255,255,255,0.2);
        border-color: var(--gold);
        color: var(--gold);
    }

    .search-side-btn:focus-visible {
        outline: none;
        border-color: var(--gold);
        box-shadow: 0 0 0 3px rgba(200,169,110,0.18);
    }

    .search-side-btn:active {
        transform: scale(.94);
    }

/* Hidden until the browser reports the app is installable (or until we detect
   iOS Safari, which never fires beforeinstallprompt). */
.pwa-install-btn {
    display: none;
}

    .pwa-install-btn.is-available {
        display: flex;
    }

/* ── Japri: the only floating button on mobile ──────────────────
   Sits bottom-right, clear of the centred cart pill. Above 768px the
   labelled pill in the header takes over and this is hidden. */
.wa-fab {
    position: fixed;
    right: 16px;
    bottom: 18px;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #25d366, #128c7e);
    color: #fff;
    font-size: 1.5rem;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(37,211,102,.45);
    z-index: 999;
    transition: transform .15s, box-shadow .2s;
}

    .wa-fab:hover,
    .wa-fab:focus {
        color: #fff;
        box-shadow: 0 8px 26px rgba(37,211,102,.55);
    }

    .wa-fab:focus-visible {
        outline: 3px solid var(--cream);
        outline-offset: 3px;
    }

    .wa-fab:active {
        transform: scale(.94);
    }

/* The dock now carries Chat on every page, so the floating WhatsApp button
   would be a second control for the same thing sitting right on top of it. */
.wa-fab {
    display: none !important;
}

/* The floating cart pill is a contextual call to action, not navigation, so it
   sits above the dock instead of fighting it for the same strip of screen. */
.float-cart {
    bottom: calc(84px + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
    .float-cart {
        bottom: calc(96px + env(safe-area-inset-bottom));
    }
}

@media (max-width: 767.98px) {
    /* Menu page only: cart lives in the floating pill and Japri in the FAB, so
       that action row goes away. Scoped with .menu-header-actions on purpose -
       the Cart page reuses .header-actions for Menu / Lokasi / Riwayat, and
       hiding those would leave an empty cart with no way out. */
    .menu-header-actions {
        display: none;
    }

    /* The dock already carries these destinations. A second copy in the header
       is just noise on a phone, so only page specific actions stay up there
       (Lokasi on the cart, Invoice on the order detail). */
    .header-actions .is-dock-dup {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   ORDER DETAIL PAGE (/IDAFMenu/DetailPesanan)
   ═══════════════════════════════════════════════════════════════ */

.od-page {
    max-width: 560px;
    margin: 0 auto;
    padding: 16px 14px 90px;
}

.od-card {
    background: var(--white);
    border: 1px solid var(--cream-dark);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    box-shadow: 0 1px 6px rgba(92,61,46,.06);
}

.od-card-title {
    margin: 0 0 12px;
    font-family: 'DM Sans',sans-serif;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-soft);
}

/* ── Status ─────────────────────────────────────────────────── */

.od-status-card {
    border-left: 3px solid var(--gold);
}

.od-serial-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.od-serial {
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--brown);
    word-break: break-all;
}

.od-date {
    margin-top: 4px;
    font-size: .72rem;
    color: var(--text-soft);
}

/* Progress rail: a filled dot per completed stage, the current one ringed. */
.od-steps {
    display: flex;
    list-style: none;
    margin: 18px 0 2px;
    padding: 0;
}

.od-step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
}

    /* Connector drawn behind the dots, not between list items, so the ends
       stay flush with the first and last dot. */
    .od-step::before {
        content: '';
        position: absolute;
        top: 6px;
        left: -50%;
        width: 100%;
        height: 2px;
        background: var(--cream-dark);
    }

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

    .od-step.is-done::before,
    .od-step.is-current::before {
        background: var(--gold);
    }

.od-step-dot {
    position: relative;
    z-index: 1;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--cream-dark);
    transition: background .2s, box-shadow .2s;
}

.od-step.is-done .od-step-dot {
    background: var(--gold);
}

.od-step.is-current .od-step-dot {
    background: var(--brown);
    box-shadow: 0 0 0 4px rgba(200,169,110,.35);
}

.od-step-label {
    font-size: .64rem;
    font-weight: 500;
    color: var(--text-soft);
    line-height: 1.3;
}

.od-step.is-current .od-step-label {
    color: var(--brown);
    font-weight: 700;
}

.od-cancelled-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--red-bg);
    color: var(--red);
    font-size: .76rem;
    line-height: 1.5;
}

/* ── Items ──────────────────────────────────────────────────── */

.od-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.od-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--cream-light);
}

    .od-item:first-child {
        padding-top: 0;
    }

.od-item-qty {
    flex-shrink: 0;
    min-width: 26px;
    font-size: .8rem;
    font-weight: 700;
    color: var(--brown);
}

.od-item-name {
    flex: 1;
    min-width: 0;
    font-size: .84rem;
    line-height: 1.4;
    color: var(--text-dark);
}

.od-item-variant {
    display: block;
    font-size: .72rem;
    color: var(--text-soft);
}

.od-item-total {
    flex-shrink: 0;
    font-size: .82rem;
    font-weight: 600;
    color: var(--text-mid);
}

/* ── Totals ─────────────────────────────────────────────────── */

.od-sums {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--cream-dark);
}

.od-sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 4px 0;
    font-size: .82rem;
    color: var(--text-mid);
}

    .od-sum-row.is-promo {
        color: var(--brown);
        font-weight: 600;
    }

.od-total-row {
    margin-top: 8px;
    padding-top: 10px;
    border-top: 1px solid var(--cream-dark);
    font-size: 1rem;
    font-weight: 700;
    color: var(--brown);
}

/* Savings banner: the number the customer is happiest to see, so it gets its
   own block instead of hiding as one more row in the totals. */
.od-saved {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-top: 14px;
    padding: 11px 13px;
    border: 1px solid rgba(31,122,77,.2);
    border-radius: 10px;
    background: #eaf6ef;
}

    .od-saved > i {
        flex-shrink: 0;
        font-size: 1.45rem;
        color: #1f7a4d;
    }

.od-saved-title {
    font-size: .83rem;
    font-weight: 700;
    line-height: 1.35;
    color: #1f7a4d;
}

.od-saved-detail {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 12px;
    margin-top: 3px;
    font-size: .72rem;
    color: var(--text-mid);
}

    .od-saved-detail span {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }

    .od-saved-detail i {
        font-size: .7rem;
        color: #1f7a4d;
    }

/* ── Facts ──────────────────────────────────────────────────── */

.od-facts {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 9px 12px;
    margin: 0;
}

    .od-facts dt {
        font-size: .74rem;
        color: var(--text-soft);
    }

    .od-facts dd {
        margin: 0;
        font-size: .8rem;
        line-height: 1.5;
        color: var(--text-dark);
        word-break: break-word;
    }

/* ── Payment ────────────────────────────────────────────────── */

.od-pay-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0 0 16px;
    padding: 10px 12px;
    border-radius: 8px;
    border-left: 3px solid var(--gold);
    background: rgba(200,169,110,.16);
    font-size: .76rem;
    line-height: 1.55;
    color: var(--text-mid);
}

.od-qris {
    text-align: center;
}

.od-qris-img {
    width: 100%;
    max-width: 220px;
    height: auto;
    padding: 10px;
    border: 1px solid var(--cream-dark);
    border-radius: 12px;
    background: #fff;
}

.od-qris-amount {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 14px;
}

    .od-qris-amount span {
        font-size: .72rem;
        color: var(--text-soft);
    }

    .od-qris-amount strong {
        font-size: 1.3rem;
        font-weight: 700;
        color: var(--brown);
    }

.od-qris-hint {
    margin-top: 6px;
    font-size: .7rem;
    color: var(--text-soft);
}

/* ── Actions ────────────────────────────────────────────────── */

.od-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
}

    .od-actions .btn-block-cta {
        margin-top: 0;
    }

.btn-block-cta.od-wa {
    background: linear-gradient(135deg, #25d366, #128c7e);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 6px 16px rgba(37,211,102,.3);
}

    .btn-block-cta.od-wa:hover {
        background: linear-gradient(135deg, #22c15d, #0f7c6c);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 8px 20px rgba(37,211,102,.4);
    }

/* ═══════════════════════════════════════════════════════════════
   ORDER SUCCESS MODAL (/IDAFMenu/Cart)
   Custom dialog, not SweetAlert: the order is already saved by the
   time it opens, so every exit route (button, Escape, scrim, device
   Back) has to end on the order page rather than back on the cart.
   ═══════════════════════════════════════════════════════════════ */

.osx-overlay {
    --osx-ok: #1f7a4d;
    --osx-ok-bg: #eaf6ef;
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(44,26,18,.62);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    animation: osx-fade .2s ease-out;
}

    .osx-overlay[hidden] {
        display: none;
    }

.osx-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 420px;
    max-height: 92vh;
    background: var(--white);
    border-radius: 22px 22px 0 0;
    box-shadow: 0 -8px 40px rgba(44,26,18,.3);
    overflow: hidden;
    animation: osx-rise .28s cubic-bezier(.22,1,.36,1);
}

@keyframes osx-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes osx-rise {
    from {
        transform: translateY(26px);
        opacity: 0;
    }

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

/* ── Head ───────────────────────────────────────────────────── */

/* Kept deliberately short: the header is congratulation, the numbers below it
   are the part the customer actually needs to read without scrolling. */
.osx-head {
    position: relative;
    padding: 18px 20px 14px;
    text-align: center;
    background: linear-gradient(180deg, rgba(200,169,110,.14), rgba(200,169,110,0));
}

.osx-close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: rgba(69,46,29,.07);
    color: var(--text-mid);
    font-size: .8rem;
    cursor: pointer;
    transition: background .18s, color .18s;
}

    .osx-close:hover {
        background: rgba(69,46,29,.14);
        color: var(--brown);
    }

    .osx-close:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

.osx-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 8px;
    border-radius: 50%;
    background: var(--osx-ok-bg);
    color: var(--osx-ok);
    font-size: 1.3rem;
    animation: osx-pop .38s cubic-bezier(.34,1.56,.64,1) .06s backwards;
}

@keyframes osx-pop {
    from {
        transform: scale(.6);
        opacity: 0;
    }

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

.osx-title {
    margin: 0;
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--brown);
    line-height: 1.15;
}

.osx-sub {
    margin: 3px 0 0;
    font-size: .74rem;
    line-height: 1.4;
    color: var(--text-soft);
}

.osx-serial {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    padding: 4px 12px;
    border: 1px solid var(--cream-dark);
    border-radius: 50px;
    background: var(--cream-light);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--brown);
    word-break: break-all;
}

/* ── Body ───────────────────────────────────────────────────── */

.osx-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 0 22px 4px;
    -webkit-overflow-scrolling: touch;
}

.osx-items {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--cream-light);
}

.osx-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--cream-light);
}

.osx-item-qty {
    flex-shrink: 0;
    min-width: 24px;
    font-size: .78rem;
    font-weight: 700;
    color: var(--brown);
}

.osx-item-name {
    flex: 1;
    min-width: 0;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--text-dark);
}

.osx-item-variant {
    display: block;
    font-size: .7rem;
    color: var(--text-soft);
}

.osx-item-total {
    flex-shrink: 0;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text-mid);
}

.osx-sums {
    padding-top: 10px;
}

.osx-sum-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 3px 0;
    font-size: .8rem;
    color: var(--text-mid);
}

    .osx-sum-row.is-save {
        color: var(--osx-ok);
        font-weight: 600;
    }

.osx-sum-label {
    display: flex;
    align-items: center;
    gap: 6px;
}

.osx-code {
    padding: 1px 7px;
    border: 1px solid var(--cream-dark);
    border-radius: 5px;
    background: var(--cream-light);
    font-size: .66rem;
    font-weight: 700;
    color: var(--brown);
}

/* ── Pinned foot: total stays on screen while the items scroll ─ */

.osx-foot {
    flex-shrink: 0;
    padding: 11px 22px 12px;
    border-top: 1px solid var(--cream-dark);
    background: var(--cream-light);
}

.osx-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.osx-total-label {
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.osx-total-amt {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--brown);
    letter-spacing: -.01em;
}

/* Savings line: the reason the customer feels good about the order, kept to
   one row so it never pushes the total out of view. */
.osx-save {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--osx-ok-bg);
    color: var(--osx-ok);
    font-size: .74rem;
    line-height: 1.35;
}

    .osx-save[hidden] {
        display: none;
    }

    .osx-save i {
        flex-shrink: 0;
        font-size: .95rem;
    }

    .osx-save strong {
        font-weight: 700;
    }

.osx-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 12px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0;
    background: rgba(200,169,110,.16);
    font-size: .76rem;
    line-height: 1.5;
    color: var(--text-mid);
}

    .osx-hint i {
        flex-shrink: 0;
        margin-top: 2px;
        color: var(--brown-light);
    }

/* ── Actions ────────────────────────────────────────────────── */

.osx-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 22px calc(14px + env(safe-area-inset-bottom));
    background: var(--white);
}

.osx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 11px 18px;
    border: 1px solid transparent;
    border-radius: 50px;
    font-family: 'DM Sans',sans-serif;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s, box-shadow .18s, transform .1s;
}

    .osx-btn:active {
        transform: scale(.985);
    }

    .osx-btn:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 3px;
    }

    .osx-btn.is-wa {
        background: linear-gradient(135deg, #25d366, #128c7e);
        color: #fff;
        box-shadow: 0 6px 16px rgba(37,211,102,.3);
    }

        .osx-btn.is-wa:hover {
            background: linear-gradient(135deg, #22c15d, #0f7c6c);
            box-shadow: 0 8px 20px rgba(37,211,102,.4);
        }

    .osx-btn.is-soft {
        background: rgba(200,169,110,.18);
        border-color: var(--gold);
        color: var(--brown);
    }

        .osx-btn.is-soft:hover {
            background: rgba(200,169,110,.3);
        }

    .osx-btn.is-ghost {
        min-height: 38px;
        padding: 8px 16px;
        background: transparent;
        color: var(--text-soft);
        font-size: .78rem;
        font-weight: 500;
    }

        .osx-btn.is-ghost:hover {
            color: var(--brown);
        }

/* ── Desktop: centred dialog instead of a sheet ─────────────── */

@media (min-width: 576px) {
    .osx-overlay {
        align-items: center;
        padding: 20px;
    }

    .osx-modal {
        border-radius: 20px;
        max-height: 88vh;
        box-shadow: 0 20px 60px rgba(44,26,18,.32);
    }
}

@media (prefers-reduced-motion: reduce) {
    .osx-overlay,
    .osx-modal,
    .osx-check {
        animation: none;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   CHECKOUT PAGE (Views/IDAFMenu/Cart.cshtml)
   ═══════════════════════════════════════════════════════════════════════
   The page is a form the customer fills once and never wants to redo, so
   it is broken into labelled cards - what you ordered, how you get it,
   who you are, promo, what you pay - instead of one long strip of fields.
   Every card uses the same surface, radius and spacing, and the palette
   stays on the shared cream/brown/gold tokens.

   Local rhythm: 14px between cards, 14px inside them, 6px from a label to
   its field. Radii nest: 18px card, 12px control, 20px pill. */

.cart-page-wrap {
    max-width: 560px;
    margin: 0 auto;
    /* The app dock's clearance is already on <body>; this is just breathing
       room under the last card. */
    padding: 14px 14px 24px;
}

/* The footer used to draw a rule across the page; the cards carry the
   separation now. */
.cart-page-wrap .cart-footer {
    border-top: 0;
    padding-top: 0;
}

/* ── Card ──────────────────────────────────────────────────────────── */

.ck-card {
    background: var(--white);
    border: 1px solid rgba(217,180,158,.5);
    border-radius: 18px;
    padding: 14px;
    margin-bottom: 14px;
    /* Two soft layers instead of one hard drop: the card lifts off the
       cream page without a grey halo around it. */
    box-shadow: 0 1px 2px rgba(69,46,29,.05), 0 6px 18px rgba(69,46,29,.06);
}

.ck-head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}

.ck-head-ico {
    flex: 0 0 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(200,169,110,.18);
    color: var(--brown);
    font-size: .95rem;
}

.ck-head-text {
    min-width: 0;
}

.ck-title {
    margin: 0;
    font-family: 'Cormorant Garamond',serif;
    font-size: 1.18rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--brown);
}

.ck-sub {
    margin: 1px 0 0;
    font-size: .72rem;
    line-height: 1.35;
    color: var(--text-soft);
}

/* Empty cart: the card chrome would frame a blank space, so it steps
   back and lets the empty state own the screen. */
.ck-card.is-empty {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
}

    .ck-card.is-empty .ck-head {
        display: none;
    }

/* ── Cart lines ────────────────────────────────────────────────────── */

.cart-page-list .cart-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid rgba(217,180,158,.4);
}

    .cart-page-list .cart-item:first-child {
        padding-top: 2px;
    }

    .cart-page-list .cart-item:last-child {
        border-bottom: 0;
        padding-bottom: 2px;
    }

.cart-page-list .cart-item-name {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-dark);
}

/* Variant is a property of the dish, so it sits in a quiet chip rather
   than as another line of running text. */
.cart-page-list .cart-item-var {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    padding: 2px 9px;
    border-radius: 20px;
    background: rgba(200,169,110,.16);
    font-size: .7rem;
    font-weight: 600;
    color: var(--brown);
}

.cart-page-list .cart-item-price {
    margin-top: 5px;
    font-size: .78rem;
    color: var(--text-soft);
}

.cart-page-list .cart-item-disc {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 5px;
    font-size: .72rem;
}

/* Right rail: stepper on top, line total under it. The line total is the
   number customers check, so it gets the weight. */
.cart-item-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.cart-item-total {
    font-size: .92rem;
    font-weight: 700;
    color: var(--brown);
    white-space: nowrap;
}

.cart-page-list .qty-controls {
    gap: 4px;
    padding: 3px;
    border-radius: 20px;
    background: var(--cream-light);
    border: 1px solid rgba(217,180,158,.7);
}

.cart-page-list .qty-btn {
    width: 30px;
    height: 30px;
    border: 0;
    background: var(--white);
    color: var(--brown);
    box-shadow: 0 1px 3px rgba(69,46,29,.12);
    transition: background .15s, color .15s, transform .12s;
}

    .cart-page-list .qty-btn:hover {
        background: var(--brown);
        color: var(--cream);
    }

    .cart-page-list .qty-btn:active {
        transform: scale(.92);
    }

    .cart-page-list .qty-btn:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

/* ── Cara terima pesanan ───────────────────────────────────────────── */

.ck-method {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.ck-method-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 12px 12px 11px;
    border: 1.5px solid var(--cream-dark);
    border-radius: 14px;
    background: var(--cream-light);
    text-align: left;
    cursor: pointer;
    transition: border-color .18s, background .18s, box-shadow .18s, transform .12s;
}

    .ck-method-opt:hover {
        border-color: var(--gold);
        background: rgba(200,169,110,.1);
    }

    .ck-method-opt:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

    .ck-method-opt:active {
        transform: scale(.99);
    }

.ck-method-ico {
    font-size: 1.15rem;
    color: var(--brown-light);
    margin-bottom: 2px;
}

.ck-method-name {
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--brown);
}

.ck-method-sub {
    font-size: .68rem;
    line-height: 1.3;
    color: var(--text-soft);
}

/* Selection is carried by three signals at once - fill, border and a
   check - so it survives a quick glance and a colourblind one alike. */
.ck-method-check {
    position: absolute;
    top: 9px;
    right: 9px;
    font-size: .95rem;
    color: var(--gold);
    opacity: 0;
    transform: scale(.6);
    transition: opacity .18s, transform .18s ease;
}

.ck-method-opt.active {
    border-color: var(--brown);
    background: var(--brown);
    box-shadow: 0 6px 16px rgba(69,46,29,.22);
}

    .ck-method-opt.active .ck-method-ico,
    .ck-method-opt.active .ck-method-name {
        color: var(--cream);
    }

    .ck-method-opt.active .ck-method-sub {
        color: var(--gold-light);
    }

    .ck-method-opt.active .ck-method-check {
        opacity: 1;
        transform: scale(1);
    }

/* ── Notice under the method picker ────────────────────────────────
   One slot, two contents: delivery gets the address guidance, pickup
   gets its marker. They share a shape so switching between the two
   reads as the same panel changing, not as the layout jumping. */

.ck-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 12px;
    padding: 11px 13px;
    border: 1px solid var(--gold);
    border-radius: 12px;
    background: rgba(200,169,110,.12);
    font-size: .76rem;
    line-height: 1.5;
    color: var(--text-mid);
    /* Replays every time the panel is un-hidden, i.e. on each switch,
       because display:none -> flex restarts CSS animations. */
    animation: ck-notice-in .24s cubic-bezier(.16,1,.3,1) both;
}

    .ck-notice[hidden] {
        display: none;
    }

    /* Pickup is a confirmation, delivery is an instruction: the dashed
       border keeps the quieter one visually lighter. */
    .ck-notice.is-pickup {
        border-style: dashed;
    }

    .ck-notice.is-delivery {
        border-color: rgba(200,169,110,.75);
        border-left: 3px solid var(--gold);
    }

.ck-notice-ico {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--gold);
    font-size: 1rem;
    /* Two calm pulses, then it stops. Enough to catch the eye when the
       panel appears, not a loop that nags for the whole session. */
    animation: ck-notice-pulse 1.25s ease-out .25s 2 both;
}

.ck-notice-body {
    min-width: 0;
}

.ck-notice-title {
    margin: 0;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.4;
    color: var(--brown);
}

.ck-notice-text {
    margin: 3px 0 0;
    font-size: .73rem;
    line-height: 1.5;
    color: var(--text-soft);
}

.ck-notice-list {
    margin: 9px 0 0;
    padding: 0;
    list-style: none;
}

    .ck-notice-list li {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        font-size: .74rem;
        line-height: 1.45;
        color: var(--text-mid);
        animation: ck-notice-in .26s cubic-bezier(.16,1,.3,1) both;
    }

        .ck-notice-list li + li {
            margin-top: 6px;
        }

        .ck-notice-list li i {
            flex-shrink: 0;
            margin-top: 2px;
            color: var(--brown-light);
            font-size: .78rem;
        }

        .ck-notice-list strong {
            color: var(--brown);
            font-weight: 700;
        }

        /* A short stagger so the eye reads the list top to bottom instead
           of meeting four lines at once. */
        .ck-notice-list li:nth-child(1) {
            animation-delay: .05s;
        }

        .ck-notice-list li:nth-child(2) {
            animation-delay: .1s;
        }

        .ck-notice-list li:nth-child(3) {
            animation-delay: .15s;
        }

        .ck-notice-list li:nth-child(4) {
            animation-delay: .2s;
        }

@keyframes ck-notice-in {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes ck-notice-pulse {
    0% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(200,169,110,.6);
    }

    45% {
        transform: scale(1.14);
        text-shadow: 0 0 10px rgba(200,169,110,.75);
    }

    100% {
        transform: scale(1);
        text-shadow: 0 0 0 rgba(200,169,110,0);
    }
}

.ck-pickup-tag {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 6px;
    background: var(--brown);
    font-size: .72rem;
    font-weight: 700;
    color: var(--cream);
    user-select: all;
}

/* ── Fields ────────────────────────────────────────────────────────── */

.ck-field-group {
    margin-bottom: 0;
}

    .ck-field-group + .ck-field-group,
    .ck-method + .ck-field-group,
    .ck-notice + .ck-field-group,
    .ck-grid-2 + .ck-field-group {
        margin-top: 12px;
    }

    /* Side by side the two fields are siblings too, so the stacking rule
       above would push the right one down and knock the pair out of line.
       Inside the grid the gap owns the spacing. */
    .ck-grid-2 > .ck-field-group + .ck-field-group {
        margin-top: 0;
    }

.cart-page-wrap .inp-group label {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
    font-size: .76rem;
    font-weight: 700;
    color: var(--text-mid);
}

.ck-req {
    color: var(--red);
}

.ck-optional {
    font-size: .68rem;
    font-weight: 500;
    color: var(--text-soft);
}

.visually-hidden-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.cart-page-wrap .inp-group input,
.cart-page-wrap .inp-group textarea {
    width: 100%;
    /* Thumb sized, not a desktop input shrunk down. */
    padding: 12px 14px;
    border: 1.5px solid var(--cream-dark);
    border-radius: 12px;
    background: var(--cream-light);
    font-size: .88rem;
    line-height: 1.45;
    color: var(--text-dark);
    transition: border-color .16s, background .16s, box-shadow .16s;
}

    .cart-page-wrap .inp-group input::placeholder,
    .cart-page-wrap .inp-group textarea::placeholder {
        color: #b59480;
    }

    .cart-page-wrap .inp-group input:hover,
    .cart-page-wrap .inp-group textarea:hover {
        border-color: var(--cream-deep);
    }

    .cart-page-wrap .inp-group input:focus,
    .cart-page-wrap .inp-group textarea:focus {
        border-color: var(--gold);
        background: var(--white);
        box-shadow: 0 0 0 3px rgba(200,169,110,.22);
    }

.ck-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Both cells start at the top edge, so the labels share a baseline even
       if one of them ever wraps to two lines. */
    align-items: start;
    gap: 10px;
}

/* Address: the textarea and the map shortcut are one control group, so
   they share a row and the button matches the field's height. */
.ck-addr-row {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

    .ck-addr-row textarea {
        flex: 1;
        min-width: 0;
    }

.ck-addr-btn {
    flex: 0 0 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1.5px solid var(--brown);
    border-radius: 12px;
    background: var(--brown);
    color: var(--cream);
    font-size: 1.05rem;
    cursor: pointer;
    transition: background .18s, border-color .18s, color .18s, transform .12s;
}

    .ck-addr-btn:hover {
        background: var(--gold);
        border-color: var(--gold);
        color: var(--brown);
    }

    .ck-addr-btn:focus-visible {
        outline: 2px solid var(--gold);
        outline-offset: 2px;
    }

    .ck-addr-btn:active {
        transform: scale(.96);
    }

.ck-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 7px 0 0;
    font-size: .7rem;
    color: var(--text-soft);
}

    .ck-hint i {
        color: var(--gold);
    }

.cart-page-wrap #distanceBanner {
    margin-top: 12px;
}

/* ── Promo ─────────────────────────────────────────────────────────── */

.cart-page-wrap .promo-row input {
    letter-spacing: .08em;
    font-weight: 600;
}

.cart-page-wrap .btn-promo-apply {
    padding: 12px 20px;
    border-radius: 12px;
}

.cart-page-wrap .btn-promo-remove {
    width: 46px;
    border-radius: 12px;
}

/* ── Summary ───────────────────────────────────────────────────────── */

.ck-sum {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ck-sum-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: .84rem;
    color: var(--text-mid);
}

    .ck-sum-row > span:last-child {
        font-weight: 600;
        color: var(--text-dark);
        white-space: nowrap;
    }

    .ck-sum-row i {
        margin-right: 4px;
    }

    .ck-sum-row.is-savings,
    .ck-sum-row.is-promo {
        color: var(--brown);
        font-weight: 600;
    }

        .ck-sum-row.is-savings i,
        .ck-sum-row.is-promo i {
            color: var(--gold);
        }

        .ck-sum-row.is-savings > span:last-child,
        .ck-sum-row.is-promo > span:last-child {
            color: var(--red);
            font-weight: 700;
        }

/* Free shipping is good news; it should not read like a Rp 0 rounding. */
.ck-free-ship {
    color: #1f7a4d;
    font-weight: 700;
}

/* The amount everything else on the page adds up to, so it is the largest
   thing in the card by a clear margin. Same DM Sans as the rows above it -
   the totals column reads as one column of figures, and the size alone
   carries the emphasis. */
.ck-sum-total {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px dashed var(--cream-dark);
    font-size: 1rem;
    font-weight: 700;
    color: var(--brown);
}

    .ck-sum-total > span:last-child {
        font-family: 'DM Sans',sans-serif;
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.15;
        letter-spacing: -.01em;
        color: var(--brown);
    }

/* ── Primary action ────────────────────────────────────────────────
   In flow, right under the total it commits to. A floating bar hovered
   over the page and hid whatever card sat behind it, which read as a
   stray element rather than part of the checkout. */

/* Loading state of the CTA: the label changes to "Memproses..." and the
   icon keeps turning, so a slow network still looks alive. */
.spin {
    display: inline-block;
    animation: ck-spin .9s linear infinite;
}

@keyframes ck-spin {
    to {
        transform: rotate(360deg);
    }
}

.ck-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    margin-top: 16px;
    padding: 13px 18px;
    border-radius: 14px;
    cursor: pointer;
}

.ck-cta-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 9px 0 0;
    font-size: .7rem;
    color: var(--text-soft);
}

    .ck-cta-hint i {
        color: var(--gold);
    }

/* ── Empty state ───────────────────────────────────────────────────── */

.cart-page-wrap .cart-empty {
    padding: 46px 20px 40px;
}

/* ── Desktop ───────────────────────────────────────────────────────── */

@media (min-width: 576px) {
    .cart-page-wrap {
        padding: 20px 14px 30px;
    }

    .ck-card {
        padding: 18px;
    }
}

@media (max-width: 360px) {
    /* Two option cards no longer fit side by side without clipping their
       labels, so they stack. */
    .ck-method,
    .ck-grid-2 {
        grid-template-columns: 1fr;
    }

    /* Label and amount would collide on one line at this width. */
    .ck-sum-total > span:last-child {
        font-size: 1.32rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ck-method-opt,
    .ck-method-check,
    .cart-page-list .qty-btn {
        transition: none;
    }

    /* The guidance still appears, it just stops moving: a plain fade in
       and no pulse on the icon. */
    .ck-notice,
    .ck-notice-list li {
        animation: ck-notice-fade .2s linear both;
    }

    .ck-notice-ico {
        animation: none;
    }
}

@keyframes ck-notice-fade {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}