/* ======================================================
   HALAMAN KERANJANG BELANJA — tampilan modern & minimalis
   Semua style di bawah ini di-scope ke .kr-modern (hanya
   berlaku di halaman keranjang, tidak mempengaruhi halaman
   lain)
   ====================================================== */
.kr-modern, .kr-modern *{ box-sizing:border-box; }
.kr-modern{ color:#111; }

.kr-modern h2{
	font-size:24px !important;
	font-weight:700 !important;
	letter-spacing:.2px;
	color:#111 !important;
	background:none !important;
	-webkit-text-fill-color:#111 !important;
}

/* ---------- Banner "dikirim dari" ---------- */
.kr-modern .keranjang.bg-foot{
	background:#fafafa !important;
	border:1px solid #eee;
	box-shadow:none;
	border-radius:2px;
	font-size:13px;
	color:#666;
}
.kr-modern .keranjang.bg-foot b{ color:#111 !important; }

/* ---------- Kartu produk ---------- */
.kr-modern .keranjang:not(.bg-foot){
	background:#fff;
	border:1px solid #eee;
	box-shadow:none;
	border-radius:2px;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.kr-modern .keranjang:not(.bg-foot):hover{
	border-color:#ddd;
	box-shadow:0 2px 10px -4px rgba(17,17,17,.12);
}
.kr-modern .keranjang .img{
	box-shadow:none;
	border:1px solid #eee;
	border-radius:2px;
	background-color:#fafafa;
}
.kr-modern .keranjang .font-medium{
	font-size:14px;
	font-weight:600;
	color:#111;
}
.kr-modern .keranjang .text-info{
	color:#888 !important;
	font-weight:500;
	letter-spacing:.3px;
}

/* ---------- Checkbox ---------- */
.kr-modern .cebox{
	accent-color:#111;
}

/* ---------- Stepper jumlah ---------- */
.kr-modern .wrap-num-product{
	border:1px solid #eee;
	border-radius:2px;
	overflow:hidden;
}
.kr-modern .wrap-num-product .input-group-text{
	background:#fff !important;
	border:none !important;
	border-radius:0 !important;
	color:#111 !important;
}
.kr-modern .wrap-num-product .input-group-text i{
	color:#111 !important;
}
.kr-modern .wrap-num-product .num-product-down,
.kr-modern .wrap-num-product .num-product-up{
	background:#fafafa;
	cursor:pointer;
	transition:background .12s ease, transform .1s ease;
}
.kr-modern .wrap-num-product .num-product-down:hover,
.kr-modern .wrap-num-product .num-product-up:hover{
	background:#f0f0f0;
}
.kr-modern .wrap-num-product .num-product-down:active,
.kr-modern .wrap-num-product .num-product-up:active{
	background:#e6e6e6;
	transform:scale(.92);
}
.kr-modern .wrap-num-product .num-product{
	border:none !important;
	box-shadow:none !important;
	transition:background .15s ease;
}

/* ---------- Tombol hapus ---------- */
.kr-modern .btn-danger{
	background:#fff !important;
	color:#c0392b !important;
	border:1px solid #eee !important;
	border-radius:2px !important;
	box-shadow:none !important;
	transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.kr-modern .btn-danger:hover{
	background:#c0392b !important;
	color:#fff !important;
	border-color:#c0392b !important;
}

/* ---------- Kotak peringatan ---------- */
.kr-modern .alert-warning{
	background:#fafafa !important;
	color:#666 !important;
	border:1px solid #eee !important;
	border-radius:2px !important;
	font-size:13px;
	line-height:1.7;
}

/* ---------- Total ---------- */
.kr-modern h5.text-success{
	color:#111 !important;
	background:none !important;
	-webkit-text-fill-color:#111 !important;
	font-size:18px !important;
	font-weight:700 !important;
}

/* ---------- Tombol aksi bawah ---------- */
.kr-modern .btn-lg{
	border-radius:2px !important;
	font-size:13px !important;
	text-transform:uppercase;
	letter-spacing:.6px;
	font-weight:600 !important;
	padding:14px 20px !important;
	box-shadow:none !important;
	background-image:none !important;
	transition:opacity .2s ease;
}
.kr-modern .btn-lg:hover{ opacity:.85; }
.kr-modern a.btn-primary.btn-lg{
	background:#fff !important;
	border:1px solid #111 !important;
	color:#111 !important;
}
.kr-modern button.btn-success.btn-lg{
	background:#111 !important;
	border:1px solid #111 !important;
	color:#fff !important;
	box-shadow:0 6px 18px -6px rgba(17,17,17,.4) !important;
	transition:transform .15s ease, box-shadow .2s ease, opacity .2s ease;
}
.kr-modern button.btn-success.btn-lg:hover{
	opacity:1 !important;
	box-shadow:0 10px 24px -6px rgba(17,17,17,.45) !important;
	transform:translateY(-1px);
}
.kr-modern button.btn-success.btn-lg:active{ transform:translateY(1px); }

/* ---------- Keranjang kosong ---------- */
.kr-modern .bg-info{
	background:#fafafa !important;
	color:#666 !important;
	border:1px solid #eee;
	box-shadow:none;
	border-radius:2px !important;
}
.kr-modern .bg-info h3{
	color:#111 !important;
	font-size:16px !important;
	font-weight:600 !important;
}

/* ======================================================
   NOTIFIKASI (SweetAlert2) — gaya modern & minimalis
   CSS ini hanya ter-load di halaman keranjang, jadi popup
   di halaman lain tidak terpengaruh.
   ====================================================== */
.swal2-popup{
	border-radius:2px !important;
	box-shadow:0 4px 28px rgba(0,0,0,.14) !important;
	border:1px solid #eee;
	padding:2em 1.6em !important;
	font-family:inherit !important;
}
.swal2-title{
	font-size:20px !important;
	font-weight:700 !important;
	color:#111 !important;
	padding:.4em 0 .2em !important;
}
.swal2-html-container{
	font-size:14px !important;
	line-height:1.6 !important;
	color:#666 !important;
}
.swal2-icon{
	border-width:2px !important;
	transform:scale(.8);
	margin:1.4em auto .6em;
}
.swal2-icon.swal2-warning{ border-color:#111 !important; color:#111 !important; }
.swal2-icon.swal2-error{ border-color:#111 !important; color:#111 !important; }
.swal2-icon.swal2-error [class^='swal2-x-mark-line']{ background-color:#111 !important; }
.swal2-icon.swal2-success{ border-color:#111 !important; }
.swal2-icon.swal2-success .swal2-success-ring{ border-color:#111 !important; }
.swal2-icon.swal2-success [class^='swal2-success-line']{ background-color:#111 !important; }
.swal2-icon.swal2-success .swal2-success-fix{ background-color:transparent !important; }
.swal2-actions{ gap:10px; margin-top:1.6em !important; }
.swal2-styled{
	border-radius:2px !important;
	box-shadow:none !important;
	font-size:12px !important;
	text-transform:uppercase;
	letter-spacing:.6px;
	font-weight:600 !important;
	padding:11px 30px !important;
	transition:opacity .2s ease;
}
.swal2-styled:hover{ opacity:.85; }
.swal2-styled.swal2-confirm{ background:#111 !important; color:#fff !important; }
.swal2-styled.swal2-deny{ background:#fff !important; color:#111 !important; border:1px solid #ddd !important; }
.swal2-styled.swal2-cancel{ background:#fff !important; color:#111 !important; border:1px solid #ddd !important; }
.swal2-styled:focus{ box-shadow:none !important; }
.swal2-close{ color:#999 !important; }
.swal2-close:hover{ color:#111 !important; }
.swal2-timer-progress-bar{ background:#111 !important; }

@media (prefers-reduced-motion: reduce){
	.kr-modern .keranjang:not(.bg-foot),
	.kr-modern button.btn-success.btn-lg,
	.kr-modern .wrap-num-product .num-product-down,
	.kr-modern .wrap-num-product .num-product-up{
		transition:none !important;
	}
}

.kr-modern .btn-danger:focus-visible,
.kr-modern button.btn-success.btn-lg:focus-visible,
.kr-modern a.btn-primary.btn-lg:focus-visible,
.kr-modern .wrap-num-product .num-product-down:focus-visible,
.kr-modern .wrap-num-product .num-product-up:focus-visible{
	outline:2px solid #111;
	outline-offset:2px;
}