/* ============================================================
   CART SIDEBAR — shared style
   Dipakai bersama oleh index.php, pages/product-showcase.php,
   dan pages/product-detail.php supaya tampilan panel keranjang
   sama persis di ketiga halaman.

   Sebelumnya tiap halaman punya definisi sendiri-sendiri dengan
   nama class & nilai (ukuran, warna, spacing) yang beda-beda
   (.cart-sidebar di index & showcase, .csb di product-detail),
   itu sebabnya tampilannya terasa tidak konsisten. Sekarang
   ketiganya pakai HTML & class yang sama, distyle dari satu
   file ini saja.

   Catatan bobot halaman: beberapa class lama (.cart-item-name,
   .cart-item-price, .qty-ctrl, .qty-btn, .cart-remove, dst.)
   sengaja TIDAK dibawa ke sini karena isi item keranjang
   sebenarnya dirender oleh js/cart.js langsung dengan inline
   style (lihat renderCart()) - jadi class-class lama tsb selama
   ini tidak pernah kepakai sama sekali di HTML manapun, murni
   CSS mati yang cuma menambah ukuran file tanpa berpengaruh ke
   tampilan. Dihilangkan supaya CSS jadi lebih ringan.
   ============================================================ */

.cart-overlay {
  position: fixed; inset: 0; background: rgba(12,26,46,0.4);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 900;
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s, visibility 0.3s;
}
.cart-overlay.open { opacity: 1; visibility: visible; }

.cart-sidebar {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: 400px; max-width: 100vw;
  background: #fff;
  z-index: 901;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  border-left: 1px solid #e0f0fe;
  box-shadow: -12px 0 48px rgba(2,126,196,0.08);
}
.cart-sidebar.open { transform: translateX(0); }

.cart-header {
  padding: 22px 24px 18px;
  border-bottom: 1px solid #f0f8ff;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}

.cart-close {
  width: 36px; height: 36px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #e0f0fe; background: none; cursor: pointer;
  transition: background 0.2s;
}
.cart-close:hover { background: #f0f8ff; }

.cart-body { flex: 1; overflow-y: auto; padding: 16px 24px; }
.cart-body::-webkit-scrollbar { width: 4px; }
.cart-body::-webkit-scrollbar-track { background: transparent; }
.cart-body::-webkit-scrollbar-thumb { background: #b9e3fd; border-radius: 2px; }

.cart-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  height: 100%; gap: 14px; color: #94a3b8;
}

/* Baris item keranjang - dirender oleh js/cart.js (renderCart()).
   Cuma .cart-item & .cart-item-img yang benar-benar dipakai;
   sisanya (nama, harga, tombol qty) sudah inline style dari JS
   supaya konsisten di semua halaman tanpa bergantung ke CSS
   per-halaman. */
.cart-item {
  display: flex; gap: 14px; padding: 14px 0;
  border-bottom: 1px solid #f0f8ff;
  align-items: flex-start;
}
.cart-item:last-child { border-bottom: none; }
.cart-item-img {
  width: 82px; height: 82px;
  border-radius: 14px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid #e0f0fe;
  background: #f0f8ff;
}

.cart-footer {
  padding: 18px 24px 24px;
  border-top: 1px solid #f0f8ff;
  flex-shrink: 0;
}

.btn-checkout {
  width: 100%; padding: 14px;
  background: linear-gradient(135deg, #0e9de8, #027ec4);
  color: #fff; font-weight: 700; font-size: 14px;
  border: none; border-radius: 14px; cursor: pointer;
  transition: opacity 0.2s, transform 0.15s;
  letter-spacing: 0.02em;
}
.btn-checkout:hover { opacity: 0.92; transform: translateY(-1px); }

.cart-continue-btn {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
}
.cart-continue-btn:hover { color: #027ec4; }