/* === Umum === */
:root{ --gap:20px; --radius:8px; }
*{ box-sizing:border-box; }
body{ font-family:Arial, sans-serif; background:#f4f4f4; margin:0; padding:20px; overflow-x:hidden; }
#loading{ font-size:1.2em; font-weight:bold; text-align:center; margin-top:80px; }

/* === Desktop layout === */
@media (min-width:769px){
  .kalkulator-container{ display:flex; gap:var(--gap); }
  .menu-produk, .simulasi-order{
    background:#fff; padding:20px; border-radius:var(--radius);
    box-shadow:0 2px 5px rgba(0,0,0,.1); max-height:90vh; overflow-y:auto;
  }
  .menu-produk{ flex:2; position:relative; }
  .simulasi-order{ flex:1; position:relative; }
  .summary-bar, .close-summary{ display:block; }
}

/* === Mobile layout === */
@media (max-width:768px){
  body{ padding:10px; padding-bottom:70px; }
  .kalkulator-container{ display:block; }
  .menu-produk{ width:100%; margin-bottom:16px; background:#fff; padding:16px; border-radius:var(--radius); box-shadow:0 2px 5px rgba(0,0,0,.06); position:relative; }
  /* Ringkasan jadi panel slide-up */
  .simulasi-order{
    position:fixed; bottom:0; left:0; width:100%; height:85vh; z-index:100;
    background:#fff; box-shadow:0 -4px 10px rgba(0,0,0,.15);
    transform:translateY(100%); transition:transform .25s ease; overflow-y:auto;
    padding:16px 16px 24px; border-top-left-radius:14px; border-top-right-radius:14px;
  }
  .simulasi-order.summary-visible{ transform:translateY(0); }
  .close-summary{
    display:inline-flex; position:absolute; top:10px; right:14px; width:32px; height:32px;
    border:none; background:#eee; color:#555; border-radius:50%; font-size:1.4em; line-height:32px; align-items:center; justify-content:center;
  }
}

/* === Search Bar Freeze (di dalam panel produk) === */
.search-container{
  position:sticky; top:0; z-index:20; background:#fff; padding:8px 0 10px;
  border-bottom:1px solid #eee;
}
#search-input{
  width:100%; padding:10px 12px; border:1px solid #ccc; border-radius:6px; font-size:1em;
}

/* === Grup & kartu produk === */
.grup-produk{ margin-top:14px; border-bottom:2px solid #eee; padding-bottom:10px; }
.grup-header{
  display:flex; justify-content:space-between; align-items:center;
  background:#e9f5ff; padding:10px; border-radius:6px;
}
.grup-header h3{ margin:0; font-size:1.05em; }
.grup-header-tombol{ display:flex; gap:8px; }
.promo-tambahan-btn,.strata-info-btn{ border:none; border-radius:5px; padding:6px 10px; cursor:pointer; font-size:.85em; }
.promo-tambahan-btn{ background:#28a745; color:#fff; font-weight:600; }
.strata-info-btn{ background:#007bff; color:#fff; }

.kartu-produk{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 0; border-bottom:1px solid #f0f0f0;
}
.nama-item{ font-weight:700; font-size:.95em; }
.harga-item{ color:#666; font-size:.85em; }
.input-qty{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.input-qty input{ width:56px; text-align:center; border:1px solid #ccc; border-radius:6px; padding:6px; }
.btn-plus,.btn-minus{
  border:none; border-radius:6px; width:24px; height:20px; cursor:pointer; color:#fff; font-size:1rem;
}
.btn-plus{ background:#007bff; }
.btn-minus{ background:#dc3545; }
.btn-plus:active,.btn-minus:active{ opacity:.85; }

/* === Keranjang: layout seperti kartu produk (nama kiri, qty kanan, detail di bawah) === */
#daftarKeranjang{ padding:0; }
.keranjang-grup-header{
  background:#f7f7f7; padding:8px 10px; font-weight:700; font-size:.9em;
  border:1px solid #ddd; border-bottom:none; border-radius:6px 6px 0 0; margin-top:10px;
}
.keranjang-item{
  padding:10px; border:1px solid #ddd; border-top:none;
}
.keranjang-row{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
}
.keranjang-left{ min-width:0; }
.keranjang-title{ font-weight:700; font-size:.95em; }
.keranjang-controls{
  display:flex; gap:6px; align-items:center; flex-wrap:wrap;
}
.cart-btn{ border:none; border-radius:6px; width:30px; height:30px; color:#fff; cursor:pointer; font-size:1rem; }
.cart-plus{ background:#007bff; }
.cart-minus{ background:#dc3545; }
.cart-remove{ background:#6c757d; border:none; color:#fff; padding:6px 10px; border-radius:6px; }
.keranjang-detail{
  margin-top:8px; color:#444; font-size:.9em;
}
.keranjang-detail small{ display:block; color:#888; margin-top:3px; }
.item-subtotal{ display:block; color:#0b7285; font-weight:700; margin-top:4px; }

/* === Upsell === */
.keranjang-upsell-strata{
  background:#fffbe6; border:1px solid #ffe58f; padding:10px; font-size:.85em; color:#555; border-radius:0 0 6px 6px; border-top:1px dashed #ffe58f;
}
.keranjang-upsell-strata.tertinggi{ background:#e6ffed; border-color:#b7ebc2; color:#155724; }

/* === Input tambahan & ringkasan === */
.input-tambahan{
  display:grid; grid-template-columns:auto 1fr; gap:10px; align-items:center;
  margin:16px 0; background:#f9f9f9; padding:12px; border-radius:6px;
}
#kelasPelanggan{ max-height:10.5em; overflow-y:auto; } /* desktop pakai size 3 via JS */
#ringkasanTotal .total-grup{ display:flex; justify-content:space-between; padding:7px 5px; }
#ringkasanTotal .diskon-detail{ color:#d9534f; font-size:.92em; }
#ringkasanTotal .pembayaran{ color:#6c757d; font-size:.92em; }
#ringkasanTotal .nett-on-faktur{ font-weight:700; background:#f0f0f0; padding:10px; border-radius:6px; margin-top:6px; }
#ringkasanTotal .grand-total{ font-weight:700; background:#d4edda; color:#155724; padding:12px; border-radius:6px; margin-top:10px; }
/* naikkan supaya tidak ketutup summary bar */
#ringkasanTotal{ margin-bottom:120px; }

/* === Summary bar (HP) === */
.summary-bar{
  display:block;
}
@media (max-width:768px){
  .summary-bar{
    display:flex; justify-content:space-between; align-items:center;
    position:fixed; bottom:0; left:0; width:100%; height:55px;
    background:#0056b3; color:#fff; padding:10px 15px; box-shadow:0 -2px 5px rgba(0,0,0,.2); z-index:101;
    cursor:pointer;
  }
  .summary-bar-label{ font-size:.85em; opacity:.9; }
  .summary-bar-total{ font-size:1.1em; font-weight:700; }
  .summary-bar-arrow{ font-size:1.2em; font-weight:700; }
}

/* === Modal === */
.modal{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:102; }
.modal-content{
  background:#fff; margin:10% auto; padding:20px; border:1px solid #888; width:92%; max-width:600px; border-radius:8px;
}
.close-modal{ float:right; font-size:28px; cursor:pointer; color:#888; }
.modal-content pre{ font-family:monospace; font-size:1.04em; white-space:pre-wrap; }