/* ===== GLOBAL ===== */
body {
    background: #f3ede7; /* krem kopi susu */
    font-family: "Segoe UI", sans-serif;
    color: #4b3621; /* coklat tua */
}

/* ===== SIDEBAR ===== */
.sidebar {
    background: #fffaf5; /* putih hangat */
    min-height: 100vh;
    padding: 20px;
    border-right: 1px solid #e0d6cc;
}

.logo {
    font-weight: bold;
    margin-bottom: 30px;
    color: #6f4e37; /* coffee brown */
}

/* ===== MENU KATEGORI ===== */
.menu-kategori {
    list-style: none;
    padding: 0;
}

.menu-kategori li {
    padding: 10px;
    border-radius: 6px;
    cursor: pointer;
    color: #5a4633;
}

.menu-kategori li.active,
.menu-kategori li:hover {
    background: #6f4e37; /* coklat kopi */
    color: #ffffff;
}

/* ===== MAIN CONTENT ===== */
.content,
.main-content {
    padding: 20px;
}

/* ===== CATEGORY BOX ===== */
.category-box {
    background: #fffaf5;
    border-radius: 12px;
    text-align: center;
    padding: 15px 5px;
    margin-bottom: 15px;
    cursor: pointer;
    border: 1px solid #e6dcd2;
}

.category-box i {
    font-size: 22px;
    color: #8b5e3c;
}

.category-box p {
    margin-top: 5px;
    font-size: 12px;
    color: #5a4633;
}

/* ===== MENU / PRODUCT CARD ===== */
.menu-card,
.product-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 15px;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    min-height: 230px;
    box-shadow: 0 6px 15px rgba(111, 78, 55, 0.15); /* shadow coklat */
}

.menu-card img,
.product-card img {
    width: 100%;
    height: 120px;
    object-fit: contain;
    border-radius: 10px;
    margin-bottom: 10px;
}

.product-card h5 {
    margin: 5px 0;
    color: #4b3621;
}

/* ===== PRICE ===== */
.price,
.menu-card .price {
    color: #8b5e3c; /* caramel */
    font-weight: bold;
}

/* ===== BUTTON ADD ===== */
.btn-add {
    position: absolute;
    bottom: 15px;
    right: 15px;
    border-radius: 50%;
    background: #6f4e37;
    border: none;
    color: #fff;
}

.btn-add:hover {
    background: #5a3e2b;
}

/* ===== CART / ORDER PANEL ===== */
.cart,
.order-panel {
    background: #fffaf5;
    min-height: 100vh;
    padding: 20px;
    border-left: 1px solid #e0d6cc;
}

.cart-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: #4b3621;
}

/* ===== TOTAL ===== */
.total {
    font-size: 16px;
    font-weight: bold;
    color: #6f4e37;
}

/* ===== SEARCH BAR ===== */
.search-bar {
    margin-bottom: 20px;
}

/* ===== TOMBOL COKLAT TUA (KIRIM PESANAN) ===== */
.btn.btn-coklat {
    background-color: #6f4e37 !important;
    border-color: #6f4e37 !important;
    color: #ffffff !important;
    font-weight: 600;
}

.btn.btn-coklat:hover {
    background-color: #5a3e2b !important;
    border-color: #5a3e2b !important;
    color: #ffffff !important;
}

/* ===== TOMBOL COKLAT MUDA (RESET PESANAN) ===== */
.btn.btn-coklat-muda {
    background-color: #c9a27e !important;
    border-color: #c9a27e !important;
    color: #ffffff !important;
    font-weight: 600;
}

.btn.btn-coklat-muda:hover {
    background-color: #b08a68 !important;
    border-color: #b08a68 !important;
    color: #ffffff !important;
}

/* ===============================
   SIDEBAR TEMA COKLAT
================================ */

/* background sidebar (opsional kalau ada class sidebar) */
.sidebar {
    background-color: #f5efe9;
    min-height: 100vh;
}

/* judul */
.sidebar .logo {
    font-weight: 700;
    color: #6f4e37;
    margin-bottom: 20px;
}

/* link normal */
.sidebar .nav > li > a {
    color: #6f4e37;
    border-radius: 6px;
    margin-bottom: 6px;
    font-weight: 500;
}

/* hover */
.sidebar .nav > li > a:hover {
    background-color: #e6d2bf;
    color: #5a3e2b;
}

/* active menu */
.sidebar .nav-pills > li.active > a,
.sidebar .nav-pills > li.active > a:hover,
.sidebar .nav-pills > li.active > a:focus {
    background-color: #6f4e37 !important;
    color: #ffffff !important;
}
/* ===============================
   SIDEBAR FULL TEMA COKLAT
================================ */

/* background sidebar */
.sidebar {
    background-color: #f5efe9;
    min-height: 100vh;
    padding: 15px;
}

/* judul */
.sidebar .logo {
    color: #6f4e37 !important;
    font-weight: 700;
    margin-bottom: 25px;
}

/* SEMUA ITEM MENU */
.nav.nav-pills.nav-stacked > li > a {
    background-color: #efe1d3 !important; /* coklat muda */
    color: #6f4e37 !important;
    border-radius: 6px;
    margin-bottom: 8px;
    font-weight: 500;
}

/* hover */
.nav.nav-pills.nav-stacked > li > a:hover {
    background-color: #e0cbb6 !important;
    color: #5a3e2b !important;
}

/* ACTIVE (Dashboard) */
.nav.nav-pills.nav-stacked > li.active > a,
.nav.nav-pills.nav-stacked > li.active > a:hover,
.nav.nav-pills.nav-stacked > li.active > a:focus {
    background-color: #6f4e37 !important;
    color: #ffffff !important;
}

/* ===== MATIKAN SEMUA EFEK BIRU LINK & FOCUS ===== */
.btn-back {
    color: #ffffff !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* semua state */
.btn-back:hover,
.btn-back:focus,
.btn-back:active,
.btn-back:visited {
    color: #ffffff !important;
    text-decoration: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* khusus browser */
.btn-back:focus-visible {
    outline: none !important;
}

/* paksa ke <a> */
a.btn-back {
    color: #ffffff !important;
}
.logo {
    text-align: center;
    margin-bottom: 20px;
}

.logo img {
    max-width: 80px;   /* ⬅️ INI KUNCI UKURAN */
    width: 100%;
    height: auto;
    display: inline-block;
}
.sidebar {
    padding-top: 20px;
}