/* ============================================================
   Raaniyah Store - Kasir Publik ("Hitung Pesanan")
   ------------------------------------------------------------
   Modal kasir bergaya aplikasi POS profesional.
   Warna utama : #E91E63 (pink), #FFFFFF, #F8F9FA
   Framework   : Bootstrap 5 + Bootstrap Icons
   Responsif   : Desktop, Tablet, Android, iPhone
   ============================================================ */

:root{
  --kasir-primary: #E91E63;
  --kasir-primary-dark: #C2185B;
  --kasir-bg: #F8F9FA;
  --kasir-border: #f0e2e7;
}

/* ---------- Tombol "HITUNG PESANAN" di kartu produk ---------- */
.btn-kasir{
  background: var(--kasir-primary);
  color:#fff;
  border:none;
  border-radius: 10px;
  font-weight:600;
  font-size:.8rem;
  padding:8px 10px;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  box-shadow:0 3px 10px rgba(233,30,99,.25);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-kasir:hover, .btn-kasir:focus{
  background: var(--kasir-primary-dark);
  color:#fff;
  transform: translateY(-1px);
  box-shadow:0 5px 14px rgba(233,30,99,.35);
}
.btn-kasir-lg{
  font-size:1rem;
  padding:12px 18px;
  border-radius:12px;
}

/* ---------- Modal Kasir ---------- */
.kasir-modal .modal-content{
  border:none;
  border-radius:18px;
  overflow:hidden;
  background: var(--kasir-bg);
  box-shadow:0 18px 60px rgba(0,0,0,.22);
}
.kasir-modal .modal-header{
  background:linear-gradient(135deg, var(--kasir-primary), var(--kasir-primary-dark));
  color:#fff;
  border-bottom:none;
  padding:16px 20px;
}
.kasir-modal .modal-header .btn-close{filter: invert(1) grayscale(100%) brightness(200%);}
.kasir-modal .modal-title{
  font-weight:700;
  display:flex; align-items:center; gap:10px;
  font-size:1.05rem;
}
.kasir-modal .modal-body{padding:16px;}
.kasir-modal .modal-footer{
  background:#fff;
  border-top:1px solid var(--kasir-border);
  padding:14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  display:block;
}

/* ---------- Kartu item produk di kasir ---------- */
.kasir-item{
  background:#fff;
  border-radius:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  padding:14px;
  margin-bottom:12px;
  animation: kasirFadeIn .25s ease;
}
@keyframes kasirFadeIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:translateY(0);}
}
.kasir-item-top{display:flex; gap:12px; align-items:flex-start;}
.kasir-item-top img{
  width:72px; height:72px; object-fit:cover;
  border-radius:10px; flex-shrink:0; background:#fdeef3;
}
.kasir-item-nama{
  font-weight:600; font-size:.92rem; margin-bottom:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.kasir-item-harga{color:var(--kasir-primary); font-weight:700; font-size:.95rem;}
.kasir-item-stok{font-size:.72rem; color:#8a8385;}
.kasir-item-hapus{
  background:none; border:none; color:#c94040; font-size:1rem;
  padding:4px 8px; border-radius:8px; flex-shrink:0;
}
.kasir-item-hapus:hover{background:#fdecec;}

/* Baris kontrol: qty, ukuran, warna */
.kasir-item-controls{display:flex; flex-wrap:wrap; gap:10px; margin-top:12px; align-items:flex-end;}
.kasir-ctl label{
  display:block; font-size:.72rem; font-weight:600;
  color:#8a8385; margin-bottom:4px;
}
.kasir-ctl select{
  font-size:.85rem; border-radius:10px;
  border:1px solid var(--kasir-border); min-width:96px;
}
.kasir-ctl select:focus{border-color:var(--kasir-primary); box-shadow:0 0 0 .2rem rgba(233,30,99,.12);}

/* Qty box (- input +) */
.kasir-qty-box{
  display:flex; align-items:center;
  border:1px solid var(--kasir-border); border-radius:20px; overflow:hidden; background:#fff;
}
.kasir-qty-box button{
  background:#fdeef3; border:none; width:34px; height:34px;
  font-weight:700; color:var(--kasir-primary); font-size:1rem; line-height:1;
  transition: background .15s ease;
}
.kasir-qty-box button:hover{background:#fbdce8;}
.kasir-qty-box input{
  width:48px; border:none; text-align:center; font-weight:700; font-size:.92rem;
  -moz-appearance: textfield;
}
.kasir-qty-box input::-webkit-outer-spin-button,
.kasir-qty-box input::-webkit-inner-spin-button{-webkit-appearance:none; margin:0;}
.kasir-qty-box input:focus{outline:none;}

/* Catatan per produk */
.kasir-item-catatan{margin-top:10px;}
.kasir-item-catatan textarea{
  font-size:.83rem; border-radius:10px; border:1px solid var(--kasir-border);
  resize:none;
}
.kasir-item-catatan textarea:focus{border-color:var(--kasir-primary); box-shadow:0 0 0 .2rem rgba(233,30,99,.12);}

/* Subtotal per item */
.kasir-item-subtotal{
  display:flex; justify-content:space-between; align-items:center;
  border-top:1px dashed var(--kasir-border);
  margin-top:12px; padding-top:10px;
  font-size:.86rem;
}
.kasir-item-subtotal b{color:var(--kasir-primary); font-size:.98rem;}

/* ---------- Tombol tambah produk lagi ---------- */
.btn-kasir-tambah{
  width:100%;
  background:#fff;
  border:2px dashed var(--kasir-primary);
  color:var(--kasir-primary);
  border-radius:14px;
  font-weight:600;
  padding:12px;
  transition:.2s ease;
}
.btn-kasir-tambah:hover{background:#fdeef3; color:var(--kasir-primary-dark);}

/* ---------- Panel pemilih produk ---------- */
.kasir-picker{
  background:#fff; border-radius:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  padding:12px; margin-top:12px;
  animation: kasirFadeIn .25s ease;
}
.kasir-picker-search{position:relative; margin-bottom:10px;}
.kasir-picker-search i{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  color:#b9a9ad; font-size:.85rem; pointer-events:none;
}
.kasir-picker-search input{
  width:100%; border:1px solid var(--kasir-border); border-radius:20px;
  padding:8px 14px 8px 34px; font-size:.88rem; background:var(--kasir-bg);
}
.kasir-picker-search input:focus{outline:none; border-color:var(--kasir-primary); background:#fff;}
.kasir-picker-list{max-height:260px; overflow-y:auto;}
.kasir-picker-item{
  display:flex; align-items:center; gap:10px;
  padding:8px; border-radius:10px; cursor:pointer;
  transition: background .15s ease;
}
.kasir-picker-item:hover{background:#fdeef3;}
.kasir-picker-item img{width:44px; height:44px; object-fit:cover; border-radius:8px; flex-shrink:0; background:#fdeef3;}
.kasir-picker-item .kp-nama{font-size:.85rem; font-weight:600; line-height:1.25;}
.kasir-picker-item .kp-harga{font-size:.78rem; color:var(--kasir-primary); font-weight:700;}
.kasir-picker-item .kp-stok{font-size:.7rem; color:#8a8385;}
.kasir-picker-item .kp-add{
  margin-left:auto; color:var(--kasir-primary); font-size:1.15rem; flex-shrink:0;
}
.kasir-picker-empty{text-align:center; color:#8a8385; font-size:.85rem; padding:16px 0;}

/* ---------- Ringkasan belanja ---------- */
.kasir-ringkasan{
  background:#fff; border-radius:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  padding:16px; margin-top:14px;
}
.kasir-ringkasan h6{
  font-weight:700; margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.kasir-ringkasan h6 i{color:var(--kasir-primary);}
.kasir-ringkasan-baris{
  display:flex; justify-content:space-between; gap:10px;
  font-size:.86rem; padding:5px 0;
}
.kasir-ringkasan-baris .kr-nama{color:#5a5052;}
.kasir-ringkasan-baris .kr-qty{color:#8a8385; white-space:nowrap;}
.kasir-ringkasan-baris .kr-sub{font-weight:600; white-space:nowrap;}
.kasir-ringkasan hr{border-top:1px dashed #d9c9ce; opacity:1; margin:10px 0;}
.kasir-total-baris{
  display:flex; justify-content:space-between;
  font-size:.9rem; padding:3px 0;
}
.kasir-total-baris.grand{
  font-size:1.08rem; font-weight:800;
}
.kasir-total-baris.grand span:last-child{color:var(--kasir-primary);}

/* ---------- Form data pembeli ---------- */
.kasir-pembeli{
  background:#fff; border-radius:14px;
  box-shadow:0 2px 10px rgba(0,0,0,.06);
  padding:16px; margin-top:14px;
}
.kasir-pembeli h6{
  font-weight:700; margin-bottom:12px;
  display:flex; align-items:center; gap:8px;
}
.kasir-pembeli h6 i{color:var(--kasir-primary);}
.kasir-pembeli .form-label{font-size:.8rem; font-weight:600; margin-bottom:4px;}
.kasir-pembeli .form-control{
  border-radius:10px; border:1px solid var(--kasir-border); font-size:.88rem;
}
.kasir-pembeli .form-control:focus{
  border-color:var(--kasir-primary);
  box-shadow:0 0 0 .2rem rgba(233,30,99,.12);
}

/* ---------- Tombol PESAN SEKARANG (WhatsApp) ---------- */
.btn-kasir-wa{
  width:100%;
  background:#25D366;
  color:#fff;
  border:none;
  border-radius:14px;
  font-weight:800;
  font-size:1.05rem;
  letter-spacing:.4px;
  padding:14px;
  display:flex; align-items:center; justify-content:center; gap:10px;
  box-shadow:0 6px 18px rgba(37,211,102,.35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn-kasir-wa:hover{
  background:#1ebe5b; color:#fff;
  transform:translateY(-1px);
  box-shadow:0 8px 22px rgba(37,211,102,.45);
}
.btn-kasir-wa:disabled{opacity:.65;}

/* Empty state kasir */
.kasir-empty{
  text-align:center; padding:34px 12px; color:#8a8385;
}
.kasir-empty i{font-size:2.4rem; color:#eab8c8; display:block; margin-bottom:10px;}

/* ---------- Toast kecil untuk pesan kasir ---------- */
.kasir-toast{
  position:fixed; bottom:96px; right:24px; z-index:2000;
  background:#3a2e30; color:#fff;
  padding:12px 18px; border-radius:10px; font-size:.9rem;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  opacity:0; transform:translateY(10px);
  transition:.25s ease; pointer-events:none;
  max-width:calc(100vw - 48px);
}
.kasir-toast.show{opacity:1; transform:translateY(0);}
.kasir-toast.error{background:#a8231a;}

/* ---------- Responsif ---------- */
@media (max-width: 767.98px){
  .kasir-modal .modal-body{padding:12px;}
  .kasir-item-top img{width:64px; height:64px;}
  .kasir-qty-box button{width:38px; height:38px;}
  .kasir-toast{bottom:82px; left:16px; right:16px; text-align:center;}
}