/* ======================================================
   HALAMAN CHECKOUT — modern & minimalis
   Semua style di bawah ini di-scope ke .uq-checkout, jadi
   tidak mempengaruhi halaman lain. Tidak ada ID/class yang
   dipakai JS yang diubah/dihapus — murni tampilan.
   ====================================================== */
.uq-checkout, .uq-checkout *{ box-sizing:border-box; }
.uq-checkout{
	background:#fafafa;
	color:#111;
	padding-bottom:60px;
	font-size:13px;
}

/* ---------- Skala font global checkout dikecilkan ---------- */
.uq-checkout .section{ padding:18px !important; }
.uq-checkout .fs-20{ font-size:15px !important; }
.uq-checkout .fs-18{ font-size:14px !important; }
.uq-checkout .fs-16{ font-size:13px !important; }
.uq-checkout h5{ font-size:14px; }
.uq-checkout label{ font-size:13px; }
.uq-checkout .form-control{ font-size:13px; }
.uq-checkout .alamat{ font-size:13px; line-height:1.6; }


/* ---------- Stepper ---------- */
.uq-checkout .progress-wrap{ max-width:720px; }
.uq-checkout .progress-checkout{
	margin-bottom:36px;
}
.uq-checkout .progress-checkout .line{
	background-color:#e5e5e5;
	height:2px;
	top:22px;
}
.uq-checkout .progress-checkout .wrap{
	background:none;
	width:auto;
	padding:0;
}
.uq-checkout .progress-checkout .fas{
	width:44px;
	height:44px;
	line-height:44px;
	border-radius:50%;
	background:#fff;
	border:2px solid #e0e0e0;
	color:#bbb;
	font-size:16px;
	margin-bottom:10px;
}
.uq-checkout .progress-checkout .wrap .titles{
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.5px;
	color:#bbb;
	font-family:poppins,sans-serif;
	font-weight:600;
}
.uq-checkout .progress-checkout .wrap.active .fas{
	background:#111 !important;
	-webkit-text-fill-color:#fff !important;
	color:#fff !important;
	border-color:#111;
}
.uq-checkout .progress-checkout .wrap.active .titles{
	background:none !important;
	-webkit-text-fill-color:#111 !important;
	color:#111 !important;
}

/* ---------- Kartu section ---------- */
.uq-checkout .section{
	background:#fff;
	border:1px solid #ececec;
	box-shadow:none;
	border-radius:4px;
}
.uq-checkout .fs-20.font-bold,
.uq-checkout .alamatform.m-b-12,
.uq-checkout .tambahalamat > .m-b-12{
	font-size:15px !important;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.5px;
}

/* ---------- Form input ---------- */
.uq-checkout .form-control{
	border:1px solid #e0e0e0;
	border-radius:2px;
	padding:10px 12px;
	height:auto;
	font-size:14px;
}
.uq-checkout .form-control{
	transition:border-color .15s ease, box-shadow .15s ease;
}
.uq-checkout .form-control:focus{
	border-color:#111;
	box-shadow:0 0 0 3px rgba(17,17,17,.08);
}
.uq-checkout .select2-container .select2-selection--single{
	border:1px solid #e0e0e0 !important;
	border-radius:2px !important;
	height:44px !important;
	padding:6px 12px !important;
}

/* ---------- Alamat tersimpan ---------- */
.uq-checkout .alamat.section{
	background:#fafafa !important;
	border:1px solid #ececec;
}

/* ---------- Dropship toggle ---------- */
.uq-checkout #nodrop,
.uq-checkout #yesdrop{
	border-radius:2px !important;
	text-transform:uppercase;
	font-size:12px;
	letter-spacing:.5px;
	padding:10px 18px;
	box-shadow:none !important;
}
.uq-checkout #nodrop.btn-primary,
.uq-checkout #yesdrop.btn-primary{
	background:#111 !important;
	border-color:#111 !important;
}
.uq-checkout #nodrop.btn-outline-primary,
.uq-checkout #yesdrop.btn-outline-primary{
	background:#fff !important;
	border-color:#ccc !important;
	color:#111 !important;
}

/* ---------- Kurir & paket ---------- */
.uq-checkout .kurir-wrap{
	border:1px solid #e5e5e5;
	border-radius:4px;
	box-shadow:none;
}
.uq-checkout .kurir-pilih-atas .kurir-wrap{
	min-height:76px;
}
.uq-checkout .kurir-wrap:hover,
.uq-checkout .kurir-wrap.active{
	border:1px solid #111;
}
.uq-checkout .kurir-wrap .fas{
	color:#111;
	background:#fff;
	border-radius:50%;
	box-shadow:0 0 0 1px #eee;
}
.uq-checkout .paket-select .text-success{
	color:#111 !important;
	font-weight:700;
}
.uq-checkout .paket-select .badge-warning{
	background:#111;
	color:#fff;
	border-radius:2px;
	font-weight:500;
}

/* ---------- Kurir list gaya radio (1 klik, tampil harga langsung) ---------- */
.uq-checkout .uq-kurir-list{
	display:flex;
	flex-direction:column;
	gap:10px;
}
.uq-checkout .uq-kurir-opt{
	display:flex;
	align-items:flex-start;
	gap:10px;
	border:1px solid #e5e5e5;
	border-radius:6px;
	padding:12px 14px;
	margin:0;
	cursor:pointer;
	transition:border-color .15s,background .15s;
}
.uq-checkout .uq-kurir-opt:hover{ border-color:#111; }
.uq-checkout .uq-kurir-opt:active{ background:#f5f5f5; }
.uq-checkout .uq-kurir-opt.active{
	border-color:#111;
	background:#fafafa;
	box-shadow:0 0 0 1px #111;
}
.uq-checkout .uq-kurir-radio{
	width:18px;
	height:18px;
	accent-color:#111;
	margin-top:2px;
	flex:0 0 auto;
	cursor:pointer;
}
.uq-checkout .uq-kurir-body{ flex:1 1 auto; min-width:0; }
.uq-checkout .uq-kurir-top{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:10px;
}
.uq-checkout .uq-kurir-name{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:13px;
	color:#111;
	min-width:0;
}
/* Logo gambar kurir tidak dipakai lagi (bikin tampilan jadi besar) — pakai teks saja */
.uq-checkout .uq-kurir-opt img{ display:none !important; }
.uq-checkout .uq-kurir-brand{
	font-weight:700;
	font-size:13px;
	color:#111;
	white-space:nowrap;
}
.uq-checkout .uq-kurir-paket{
	font-weight:500;
	color:#555;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
.uq-checkout .uq-kurir-price{
	font-weight:700;
	color:#111;
	white-space:nowrap;
	font-size:13px;
}
.uq-checkout .uq-kurir-etd{
	display:block;
	margin-top:4px;
	font-size:12px;
	color:#777;
}


/* ---------- Voucher ---------- */
.uq-checkout .voucher-item{
	border-radius:4px;
}
.uq-checkout .input-group .form-control{
	border-radius:2px 0 0 2px;
}
.uq-checkout .input-group-append .btn{
	border-radius:0 2px 2px 0 !important;
}

/* ---------- Metode pembayaran (saldo/koin) ---------- */
.uq-checkout .metodebayar{
	border:1px solid #e5e5e5 !important;
	box-shadow:none;
	border-radius:4px;
	padding:16px !important;
}
.uq-checkout .metodebayar:hover,
.uq-checkout .metodebayar.active{
	border:1px solid #111 !important;
}
.uq-checkout .metodebayar .fa-check-circle{
	color:#111;
	box-shadow:0 0 0 1px #eee;
}

/* ---------- Ringkasan pembayaran (sticky di desktop) ---------- */
@media (min-width:768px){
	.uq-checkout .uq-sticky{
		position:-webkit-sticky;
		position:sticky;
		top:20px;
	}
}
.uq-checkout .fs-20.font-bold + .row p{
	margin-bottom:8px;
	font-size:14px;
	color:#555;
}
.uq-checkout hr{
	border-top:1px solid #ececec;
}
.uq-checkout #totalbayar,
.uq-checkout h5{
	color:#111;
}

/* ---------- Halaman checkout: dibuat lebih lebar ---------- */
.uq-checkout .progress-wrap{
	max-width:1400px;
}
@media (min-width:768px){
	.uq-checkout .progress-wrap.col-md-10{
		flex:0 0 100%;
		max-width:100%;
		padding-left:24px;
		padding-right:24px;
	}
}

/* ---------- Ringkasan total: label & nilai sejajar, tapi tidak boleh kepotong ----------
   Dikecualikan untuk .uq-invoice: halaman invoice memakai class .uq-checkout juga,
   dan aturan flex di bawah ini merusak grid (kolom jadi menyempit) di sana. */
.uq-checkout:not(.uq-invoice) .section.m-b-30 .row{
	display:flex;
	flex-wrap:wrap;
	align-items:baseline;
	gap:6px 10px;
}
.uq-checkout:not(.uq-invoice) .section.m-b-30 .row > div{
	flex:1 1 auto;
	max-width:100%;
	min-width:0;
	padding-left:0;
	padding-right:0;
}
.uq-checkout:not(.uq-invoice) .section.m-b-30 .row > div:first-child{
	flex:1 1 auto;
}
.uq-checkout:not(.uq-invoice) .section.m-b-30 .row > div:last-child{
	white-space:normal;
	overflow-wrap:anywhere;
	text-align:right;
	flex:0 1 auto;
}
.uq-checkout:not(.uq-invoice) .section.m-b-30 p,
.uq-checkout:not(.uq-invoice) .section.m-b-30 h5{
	margin-bottom:0;
	white-space:normal;
	overflow-wrap:anywhere;
}

/* ---------- Voucher: kartu lebih lega, judul tidak terpotong "..." ---------- */
.uq-checkout .voucher-item{
	min-height:100px;
	padding:14px 12px !important;
}
.uq-checkout .voucher-item .col-md-4.col-5{
	flex:0 0 32%;
	max-width:32%;
}
.uq-checkout .voucher-item .col-md-8.col-7{
	flex:0 0 68%;
	max-width:68%;
}
.uq-checkout .voucher-item .elip{
	white-space:normal !important;
	overflow:visible;
	text-overflow:clip;
	line-height:1.3;
	word-break:break-word;
}
.uq-checkout .voucher-item .elip.fs-18{
	font-size:15px !important;
}

/* ---------- Tombol utama ---------- */
.uq-checkout .btn-primary{
	background:#111 !important;
	background-image:none !important;
	border:1px solid #111 !important;
	border-radius:2px !important;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:13px;
	font-weight:600;
	box-shadow:none !important;
	transition:transform .12s ease, background .15s ease;
}
.uq-checkout .btn-primary:hover{
	background:#333 !important;
	background-image:none !important;
}
.uq-checkout .btn-primary:active{ transform:scale(.97); }
.uq-checkout .btn-success{
	background:#fff !important;
	color:#111 !important;
	border:1px solid #111 !important;
	border-radius:2px !important;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:13px;
	font-weight:600;
	box-shadow:none !important;
	transition:transform .12s ease, background .15s ease;
}
.uq-checkout .btn-success:hover{
	background:#f5f5f5 !important;
	color:#111 !important;
}
.uq-checkout .btn-success:active{ transform:scale(.97); }
.uq-checkout .btn-lg{
	padding:14px 22px;
	min-height:50px;
}

/* ---------- Mobile: tombol full width, spasi lebih lega ---------- */
@media (max-width:767px){
	.uq-checkout .progress-wrap{ padding-top:20px !important; }
	.uq-checkout .section{ margin-bottom:16px !important; }
	.uq-checkout .text-center.p-t-32 .btn,
	.uq-checkout .text-center > .btn-lg{
		width:100%;
	}
	.uq-checkout .progress-checkout .wrap .titles{
		font-size:10px;
	}
	.uq-checkout .progress-checkout .fas{
		width:36px;
		height:36px;
		line-height:36px;
		font-size:14px;
	}
}

/* ======================================================
   ONE-PAGE CHECKOUT — layout 2 kolom (kiri input, kanan
   ringkasan+pembayaran yang sticky). Di mobile menumpuk
   otomatis mengikuti grid Bootstrap (col-md-*).
   ====================================================== */
.uq-onepage{
	max-width:1200px;
	margin:0 auto;
	padding:0 16px;
}
.uq-onepage .uq-head{
	margin-bottom:8px;
}
.uq-onepage .uq-title{
	font-size:22px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.5px;
	color:#111;
	margin:0;
}

/* ---------- Hint / placeholder saat bagian belum aktif ---------- */
.uq-checkout .uq-hint{
	color:#999;
	font-size:14px;
	text-align:center;
}

/* ---------- Ringkasan Pesanan (Order Summary) ---------- */
.uq-checkout .uq-sum-list{
	max-height:280px;
	overflow-y:auto;
}
.uq-checkout .uq-sum-item{
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:10px;
	padding:8px 0;
	border-bottom:1px dashed #eee;
	font-size:13px;
}
.uq-checkout .uq-sum-item:last-child{ border-bottom:none; }
.uq-checkout .uq-sum-name{
	color:#333;
	line-height:1.35;
	word-break:break-word;
}
.uq-checkout .uq-sum-price{
	color:#111;
	font-weight:600;
	white-space:nowrap;
}

/* ---------- Tombol "Tambah Alamat Baru" ---------- */
.uq-checkout .uq-add-address{
	display:inline-flex;
	align-items:center;
	gap:6px;
	color:#111;
	font-weight:600;
	font-size:13px;
	text-decoration:none;
	border:1px dashed #bbb;
	border-radius:4px;
	padding:8px 14px;
	transition:border-color .15s,background .15s;
}
.uq-checkout .uq-add-address:hover{
	border-color:#111;
	background:#fafafa;
	text-decoration:none;
}

/* ---------- Dropship: checkbox sederhana ---------- */
.uq-checkout .uq-check-label{
	display:flex;
	align-items:center;
	gap:10px;
	cursor:pointer;
	font-weight:600;
	color:#111;
	margin:0;
	user-select:none;
}
.uq-checkout .uq-check-input{
	width:20px;
	height:20px;
	accent-color:#111;
	cursor:pointer;
	flex:0 0 auto;
}

/* ---------- Sentuhan mobile-friendly (target tap lebih besar) ---------- */
@media (max-width:767px){
	.uq-onepage{ padding:0 12px; }
	.uq-checkout .uq-right{ margin-top:4px; }
	.uq-checkout .form-control{ font-size:16px; } /* cegah zoom otomatis iOS saat fokus input */
	.uq-checkout .kurir-wrap{ padding:16px !important; }
	.uq-checkout .uq-add-address{ width:100%; justify-content:center; padding:12px; }
}

/* ======================================================
   HALAMAN INVOICE / TERIMA KASIH — modern & minimalis
   Di-scope ke .uq-invoice, reuse token warna/radius yang
   sama dengan .uq-checkout (section, metodebayar, dst).
   ====================================================== */
.uq-invoice{ background:#fafafa; }
.uq-invoice .container{ max-width:1200px; }

/* ---------- Header "Terima Kasih" ---------- */
.uq-invoice .order-head{
	display:flex;
	align-items:center;
	background:#fff;
	border:1px solid #ececec;
	border-radius:4px;
	padding:24px;
	margin-bottom:20px;
}
.uq-invoice .order-head .row{
	align-items:center;
	width:100%;
}
.uq-invoice .order-head .fa-check-circle{
	font-size:40px !important;
}
.uq-invoice .order-head .fs-16{
	color:#888;
	font-size:12px;
	text-transform:uppercase;
	letter-spacing:.5px;
}
.uq-invoice .order-head h4{
	margin-top:4px;
	margin-bottom:0;
	font-size:20px;
	color:#111 !important;
}

/* ---------- Notice guest (belum jadi member) ---------- */
.uq-invoice .invoice-alert{
	background:#fff8ec !important;
	border:1px solid #f3d9a8;
	border-radius:4px;
	color:#6b4a15;
	padding:18px 20px;
	margin-bottom:20px;
}
.uq-invoice .invoice-alert .text-danger{
	color:#c0392b !important;
}
.uq-invoice .invoice-alert .text-primary{
	color:#111 !important;
}

/* ---------- Judul section ("Pembayaran","Informasi Pengiriman","Produk Pesanan") ---------- */
.uq-invoice h4.text-primary.font-bold{
	font-size:15px !important;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.5px;
	color:#111 !important;
}

/* ---------- Nominal pembayaran ---------- */
.uq-invoice .fs-28.text-danger.font-bold{
	font-size:26px !important;
	color:#c0392b !important;
}

/* ---------- Tombol aksi ---------- */
.uq-invoice .btn-danger{
	background:#fff !important;
	color:#c0392b !important;
	border:1px solid #f0c4bb !important;
	border-radius:2px !important;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:13px;
	font-weight:600;
	box-shadow:none !important;
}
.uq-invoice .btn-danger:hover{
	background:#fdf1ef !important;
	color:#c0392b !important;
}
.uq-invoice .btn-warning{
	background:#111 !important;
	color:#fff !important;
	border:1px solid #111 !important;
	border-radius:2px !important;
	box-shadow:none !important;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:13px;
	font-weight:600;
	transition:transform .12s ease, box-shadow .2s ease, background .15s ease;
}
.uq-invoice .btn-warning:hover{
	background:#333 !important;
	color:#fff !important;
	box-shadow:0 6px 16px -4px rgba(17,17,17,.4) !important;
	transform:translateY(-1px);
}
.uq-invoice .btn-warning:active{ transform:translateY(1px); }
.uq-invoice .btn-success{
	background:#111 !important;
	color:#fff !important;
	border:1px solid #111 !important;
	border-radius:2px !important;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:13px;
	font-weight:600;
	box-shadow:none !important;
}
.uq-invoice .btn-success:hover{
	background:#333 !important;
	color:#fff !important;
}
.uq-invoice .cl1.text-center.w-full{
	display:block;
	padding:14px;
	color:#111 !important;
	font-weight:600;
	text-transform:uppercase;
	letter-spacing:.5px;
	font-size:13px;
}

/* ---------- Judul metode pembayaran & label form ---------- */
.uq-invoice h5.text-black{
	font-size:14px !important;
	font-weight:700;
	color:#111 !important;
}
.uq-invoice .fs-28.text-danger.font-bold + *,
.uq-invoice p{
	font-size:13px;
	color:#555;
}
.uq-invoice .color1{
	color:#111 !important;
	font-size:13px;
}

/* ---------- Kartu section: rapikan padding di mobile ---------- */
@media (max-width:767px){
	.uq-invoice .section.p-all-30{ padding:18px !important; }
	.uq-invoice h4.text-primary.font-bold{ font-size:13px !important; }
}

/* ---------- Daftar produk pesanan ---------- */
.uq-invoice .produk-item{
	border-bottom:1px solid #f0f0f0;
	padding-bottom:16px;
	margin-bottom:16px !important;
}
.uq-invoice .produk-item:last-child{
	border-bottom:none;
	margin-bottom:0 !important;
	padding-bottom:0;
}
.uq-invoice .produk-item .img{
	width:100%;
	padding-top:100%;
	background-size:cover;
	background-position:center;
	border-radius:4px;
	background-color:#f5f5f5;
}

/* ---------- Info bank transfer ---------- */
.uq-invoice .bayarmanual h5[style]{
	border-left:4px solid #111 !important;
	background:#fafafa;
	padding:12px !important;
	border-radius:2px;
}

/* ---------- Mobile ---------- */
@media (max-width:767px){
	.uq-invoice .order-head{ padding:18px; }
	.uq-invoice .order-head .fa-check-circle{ font-size:32px !important; }
}

/* ======================================================
   HALAMAN NOTIFIKASI PEMBAYARAN (pending/menunggu verifikasi)
   Dipakai di main/ipaymunotif.php & sejenisnya.
   Di-scope ke .uq-notif, reuse token dari .uq-checkout.
   ====================================================== */
.uq-notif{ background:#fafafa; }
.uq-notif .notif-card{
	background:#fff;
	border:1px solid #ececec;
	border-radius:4px;
	max-width:560px;
	margin:0 auto;
	padding:48px 32px;
}
.uq-notif .notif-icon{
	display:block;
	font-size:56px;
	color:#1aa260;
	margin-bottom:16px;
}
.uq-notif h3{
	color:#111 !important;
	font-size:20px;
	text-transform:uppercase;
	letter-spacing:.5px;
}
.uq-notif .notif-ipaymu{
	color:#555;
	font-size:14px;
	line-height:1.6;
}
.uq-notif .btn-success{
	background:#111 !important;
	color:#fff !important;
	border:1px solid #111 !important;
	border-radius:2px !important;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:13px;
	font-weight:600;
	box-shadow:none !important;
	padding:14px 24px;
}
.uq-notif .btn-success:hover{
	background:#333 !important;
	color:#fff !important;
}
@media (max-width:767px){
	.uq-notif .notif-card{ padding:32px 20px; margin:0 16px; }
}

/* ======================================================
   HALAMAN STATUS PESANAN (manage/pesanan)
   Di-scope ke .uq-pesanan, reuse token dari .uq-checkout.
   Karena tab-pane di-load via AJAX ke dalam wrapper ini,
   style di bawah otomatis berlaku ke semua tab (Belum Bayar,
   Dikemas, Dikirim, Selesai, Dibatalkan, Digital, PPOB).
   ====================================================== */
.uq-pesanan{ background:#fafafa; }
.uq-pesanan h3{
	color:#111 !important;
	font-size:22px;
}

/* Search "Cari transaksi" sekarang tampil di header (bukan lagi kotak terpisah
   di sini) supaya tidak dobel dengan search produk -- lihat headv2.php $istransaksi */

/* ---------- Sidebar menu (list-card, gaya Tokopedia -- samakan sama .akun-modern) ---------- */
.uq-pesanan .dashboard-menu{
	background:none;
	border:0;
	padding:0;
}
.uq-pesanan .dashboard-menu .nav{
	background:#fff;
	border:1px solid rgba(17,17,17,.07);
	border-radius:14px;
	box-shadow:0 1px 3px rgba(17,17,17,.05), 0 12px 26px -14px rgba(17,17,17,.16);
	overflow:hidden;
}
.uq-pesanan .dashboard-menu .nav-item + .nav-item .nav-link{
	border-top:1px solid #f4f4f4;
}
.uq-pesanan .dashboard-menu .nav-link{
	border-radius:0;
	padding:14px 16px;
	margin-bottom:0;
	color:#333;
	font-size:13px;
	font-weight:600;
}
.uq-pesanan .dashboard-menu .nav-link i{
	width:22px;
	text-align:center;
	margin-right:10px;
	color:#888;
	font-size:15px;
}
.uq-pesanan .dashboard-menu .nav-link:hover{
	background:#fafafa;
}
.uq-pesanan .dashboard-menu .nav-link.active{
	background:#111 !important;
	color:#fff !important;
}
.uq-pesanan .dashboard-menu .nav-link.active i{
	color:#fff !important;
}

/* ---------- Kartu pesanan ---------- */
.uq-pesanan .pesanan-item{
	background:#fff;
	border:1px solid rgba(17,17,17,.07);
	border-radius:16px;
	box-shadow:0 1px 3px rgba(17,17,17,.05), 0 12px 26px -14px rgba(17,17,17,.16);
}
.uq-pesanan .pesanan-item .text-success{
	color:#1aa260 !important;
}
.uq-pesanan .pesanan-item hr{
	border-top:1px solid #f0f0f0;
	margin:16px 0;
}
.uq-pesanan .pesanan-item .btn-primary{
	background:#111 !important;
	border:1px solid #111 !important;
	border-radius:20px !important;
	text-transform:none;
	letter-spacing:0;
	font-size:12px;
	font-weight:600;
	padding:8px 16px !important;
	box-shadow:0 4px 14px -3px rgba(17,17,17,.30), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
/* Tombol lebar penuh (mis. "Lihat Resi") -- pill 20px kepanjangan buat tombol selebar itu */
.uq-pesanan .pesanan-item .btn-primary.btn-block{
	border-radius:10px !important;
	padding:12px 16px !important;
}
.uq-pesanan .pesanan-item .btn-primary:hover{
	background:#000 !important;
}
.uq-pesanan .pesanan-item .produk-item .img{
	width:100%;
	padding-top:100%;
	background-size:cover;
	background-position:center;
	border-radius:12px;
	background-color:#f5f5f5;
}
.uq-pesanan .pesanan-item h5 .text-success{
	color:#1aa260 !important;
	font-size:16px;
}

/* ---------- Empty state ---------- */
.uq-pesanan .text-center.p-tb-40.section{
	background:#fff;
	border:1px solid rgba(17,17,17,.07);
	border-radius:16px;
	box-shadow:0 1px 3px rgba(17,17,17,.05), 0 12px 26px -14px rgba(17,17,17,.16);
}

/* ---------- Badge status di kartu "Semua Status" ---------- */
.uq-pesanan .uq-ps-icon{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:32px; height:32px;
	border-radius:50%;
	background:#f5f5f5;
	color:#555;
	margin-right:8px;
	font-size:14px;
}
.uq-pesanan .uq-ps-badge{
	border-radius:999px !important;
	font-size:11px;
	font-weight:600;
	padding:5px 12px;
}

/* ---------- Tombol "Muat pesanan lainnya" (gaya sama dgn Load More di Shop) ---------- */
.uq-pesanan .pesanan-loadmore-btn{
	background:#fff !important;
	border:1px solid #111 !important;
	color:#111 !important;
	border-radius:10px !important;
	box-shadow:0 2px 8px -1px rgba(17,17,17,.14) !important;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:12px;
	font-weight:600;
	padding:12px 40px;
	transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}
.uq-pesanan .pesanan-loadmore-btn:hover:not(:disabled){
	background:#111 !important;
	color:#fff !important;
}
.uq-pesanan .pesanan-loadmore-btn:disabled{
	opacity:.6;
	cursor:default;
}

/* ---------- Tombol trigger "Semua Status" (khusus mobile) ---------- */
.uq-status-trigger{
	align-items:center;
	gap:6px;
	background:#fff;
	border:1px solid rgba(17,17,17,.14);
	border-radius:999px;
	padding:9px 16px;
	font-size:12px;
	font-weight:600;
	color:#111 !important;
	background-image:none !important;
	-webkit-text-fill-color:#111 !important;
	margin-bottom:16px;
	cursor:pointer;
}
.uq-status-trigger i{ font-size:10px; color:#888; }
@media (max-width:600px){
	.uq-status-trigger.showsmall{ display:inline-flex !important; }
}

/* ---------- Bottom sheet "Mau lihat status apa?" (gaya Tokopedia) ---------- */
.uq-status-sheet-modal .modal-dialog{
	position:fixed !important;
	top:auto !important;
	left:0; right:0; bottom:0;
	margin:0;
	max-width:100%;
	width:100%;
	max-height:none;
	overflow:visible;
	transform:translateY(100%) !important;
	transition:transform .25s ease;
}
.uq-status-sheet-modal.show .modal-dialog{
	transform:translateY(0) !important;
}
.uq-status-sheet-modal .modal-content{
	border-radius:20px 20px 0 0;
	border:0;
	box-shadow:0 -8px 40px rgba(17,17,17,.2);
	max-height:82vh;
	overflow-y:auto;
}
.uq-status-sheet-header{
	position:relative;
	padding:20px 48px 16px;
	border-bottom:1px solid #f0f0f0;
}
.uq-status-sheet-header h5{
	margin:0;
	font-size:15px;
	font-weight:700;
	color:#111;
	text-align:center;
}
.uq-status-sheet-close{
	position:absolute;
	left:16px; top:50%;
	transform:translateY(-50%);
	background:none;
	border:0;
	font-size:16px;
	color:#111;
	padding:6px;
}
.uq-status-list{
	list-style:none;
	margin:0;
	padding:8px 0 24px;
}
.uq-status-item{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:13px 20px;
	font-size:13.5px;
	font-weight:600;
	color:#333;
	cursor:pointer;
}
.uq-status-item:active{ background:#fafafa; }
.uq-status-item.uq-status-group{
	color:#111;
	cursor:default;
	padding-top:16px;
	padding-bottom:8px;
}
.uq-status-item.uq-status-group:active{ background:none; }
.uq-status-item.uq-status-sub{
	padding-left:36px;
	font-weight:500;
	color:#555;
}
.uq-status-item .uq-status-check{
	color:#e2e2e2;
	font-size:17px;
	flex-shrink:0;
	margin-left:10px;
}
.uq-status-item.active .uq-status-check{ color:#111; }
.uq-status-item.active{ color:#111; }

/* ---------- Mobile ---------- */
@media (max-width:767px){
	.uq-pesanan .dashboard-menu{ margin-bottom:16px; }
	.uq-pesanan .pesanan-item{ padding:20px !important; }

	/* Menu status jadi baris chip horizontal yang bisa di-scroll, gaya filter Tokopedia
	   (bukan lagi list vertikal bertumpuk) */
	.uq-pesanan .dashboard-menu .nav{
		display:flex !important;
		flex-direction:row !important;
		flex-wrap:nowrap;
		gap:8px;
		overflow-x:auto;
		-webkit-overflow-scrolling:touch;
		background:none;
		border:0;
		box-shadow:none;
		padding-bottom:4px;
		margin:0 -4px;
	}
	.uq-pesanan .dashboard-menu .nav::-webkit-scrollbar{ display:none; }
	.uq-pesanan .dashboard-menu .nav-item{ flex:0 0 auto; }
	.uq-pesanan .dashboard-menu .nav-item + .nav-item .nav-link{ border-top:0; }
	.uq-pesanan .dashboard-menu .nav-link{
		background:#fff !important;
		border:1px solid rgba(17,17,17,.14);
		border-radius:999px;
		padding:9px 16px;
		white-space:nowrap;
		font-size:12px;
	}
	.uq-pesanan .dashboard-menu .nav-link i{ margin-right:6px; width:auto; }
	.uq-pesanan .dashboard-menu .nav-link.active{
		background:#111 !important;
		border-color:#111;
	}
}

/* ---------- Daftar pilih metode pembayaran di halaman checkout ----------
   Gaya Tokopedia: satu kartu list rata (bukan kotak per-item), tiap baris
   dipisah garis tipis, indikator pilihan berupa lingkaran radio di kanan. */
.uq-checkout .fs-20.font-bold.m-b-20,
.uq-checkout .fs-20.font-medium.m-b-20{
	font-size:16px !important;
	font-weight:700;
	color:#111;
	margin-bottom:10px !important;
}

/* ---------- Ringkasan Pesanan: rincian harga & diskon di bagian bawah kartu
   (tepat di atas Total), font dikecilkan gaya Tokopedia -- warna baris promo
   (mis. merah utk diskon) TIDAK disentuh, cuma ukuran/ketebalan font. ---------- */
.uq-checkout .ringkasan-pembayaran-rows .row:not(.uq-total-row){
	margin:0 0 8px;
}
.uq-checkout .ringkasan-pembayaran-rows .row:not(.uq-total-row) p{
	margin:0;
	font-size:13px;
	line-height:1.4;
}
/* label kolom pertama abu-abu (kecuali baris promo/diskon yang memang sengaja
   diwarnai merah lewat inline style="color:#e53935" di elemen .row -- warna itu
   TIDAK disentuh di sini, cuma yang default/hitam yang diabukan). */
.uq-checkout .ringkasan-pembayaran-rows .row:not(.uq-total-row):not([style]) .col-6:first-child p{
	color:#666;
}
.uq-checkout .ringkasan-pembayaran-rows .row:not(.uq-total-row) .col-6:last-child p{
	font-weight:600;
}
.uq-checkout .ringkasan-pembayaran-rows hr{
	margin:14px 0;
	border-top:1px solid #f0f0f0;
}
.uq-checkout .ringkasan-pembayaran-rows .uq-total-row{
	align-items:center;
	margin:0;
}
.uq-checkout .ringkasan-pembayaran-rows .uq-total-row h5{
	margin:0;
	font-size:14px;
	font-weight:500;
	color:#333;
}
.uq-checkout .ringkasan-pembayaran-rows .uq-total-row .col-8 h5{
	font-size:18px;
	font-weight:700;
	color:#111;
}
/* "Kamu Hemat Rp X!" -- gaya Tokopedia, merah, rata kanan tepat di bawah Total */
.uq-checkout .ringkasan-pembayaran-rows .uq-kamu-hemat{
	margin:2px 0 0;
}
.uq-checkout .ringkasan-pembayaran-rows .uq-kamu-hemat p{
	margin:0;
	font-size:12.5px;
	font-weight:700;
	color:#e6001f;
}

/* ---------- Kurir: samakan skala font dengan kartu lain (gaya Tokopedia,
   13-14px) -- warna aktif/nonaktif tab TIDAK disentuh (di-kontrol lewat
   inline style oleh JS di checkout/kurir.php, biar tidak bentrok). ---------- */
.uq-checkout #kurirWrap .p-tb-10{ font-size:13px; }
.uq-checkout #kurirWrap .p-tb-10 b{ font-size:14px; font-weight:700; }
.uq-checkout #kurirWrap select#pilihLayananKurir{ font-size:13px; }
.uq-checkout #kurirWrap label.fs-13{ font-size:12px !important; color:#888; }
.uq-checkout #kurirWrap .pickup-tab{ font-size:13px !important; }
.uq-checkout #kurirWrap .toko-wrap .font-medium{ font-size:14px; }
.uq-checkout #kurirWrap .toko-wrap .fs-13{ font-size:12.5px; }

/* ---------- Voucher: baris ringkas gaya Tokopedia (klik -> buka modal) ---------- */
.uq-checkout .uq-voucher-trigger{
	display:flex;
	align-items:center;
	gap:12px;
	cursor:pointer;
	padding:4px 0;
	transition:opacity .12s ease;
}
.uq-checkout .uq-voucher-trigger:hover{ opacity:.75; }
.uq-checkout .uq-voucher-trigger:active{ opacity:.55; }
.uq-checkout .uq-voucher-trigger-icon{
	display:flex;
	align-items:center;
	justify-content:center;
	width:36px; height:36px;
	flex:0 0 36px;
	border-radius:10px;
	/* merah/pink lembut -- warna "diskon/promo" yang sama dipakai di harga coret
	   (.block2-price-diskon #e6001f) supaya voucher langsung kekenali sebagai promo,
	   bukan menu netral seperti baris lain. */
	background:#fdecec;
	color:#e6001f;
	font-size:15px;
}
.uq-checkout .uq-voucher-trigger-text{ flex:1 1 auto; min-width:0; }
.uq-checkout .uq-voucher-trigger-title{
	font-size:14px;
	font-weight:700;
	color:#111;
}
.uq-checkout .uq-voucher-trigger-sub{
	font-size:12.5px;
	color:#888;
	margin-top:2px;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}
/* subtitle jadi merah + bold kalau memang ada voucher tersedia (class ditambah dari
   PHP: uq-voucher-trigger-sub-ada) -- kalau belum ada kode/voucher, tetap abu netral. */
.uq-checkout .uq-voucher-trigger-sub.uq-voucher-trigger-sub-ada{
	color:#e6001f;
	font-weight:600;
}
.uq-checkout .uq-voucher-trigger-arrow{
	flex:0 0 auto;
	color:#bbb;
	font-size:13px;
}
.uq-checkout .uq-voucher-modal-body{ padding:18px 20px calc(20px + env(safe-area-inset-bottom)); }
.uq-checkout .uq-voucher-modal-body .voucher.row{ margin:0 -6px; }
.uq-checkout .uq-voucher-modal-body .voucher .col-12{ padding:0 6px; }

/* ---------- Metode Pembayaran: header dgn link "Lihat Semua" + baris info metode
   terpilih (dipakai kalau metode yg dipilih ada di modal, bukan di 4 yg tampil). ---------- */
.uq-checkout .uq-metode-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
}
.uq-checkout .uq-metode-lihatsemua{
	font-size:13px;
	font-weight:600;
	color:#111 !important;
	text-decoration:underline;
}
.uq-checkout .uq-metode-selected-hint{
	display:flex;
	align-items:center;
	gap:6px;
	margin-top:10px;
	padding:10px 12px;
	border-radius:8px;
	background:#f5f5f5;
	font-size:12.5px;
	font-weight:600;
	color:#111;
}
.uq-checkout .uq-metode-selected-hint i{ color:#1aa260; font-size:14px; }
.uq-checkout .uq-metode-list-modal{
	margin:16px 20px calc(20px + env(safe-area-inset-bottom)) !important;
}

.uq-checkout .uq-metode-list{
	background:#fff;
	border:1px solid rgba(17,17,17,.08);
	border-radius:12px;
	overflow:hidden;
	margin-bottom:12px !important;
}
.uq-checkout .uq-metode-list .metodebayar{
	cursor:pointer;
	border:0 !important;
	box-shadow:none !important;
	border-radius:0 !important;
	padding:14px 40px 14px 16px !important;
	margin:0 !important;
	position:relative;
	transition:background .12s ease;
}
.uq-checkout .uq-metode-list .metodebayar:hover{ background:#fafafa; }
.uq-checkout .uq-metode-list .metodebayar:active{ background:#f2f2f2; }
.uq-checkout .uq-metode-list .metodebayar + .metodebayar{
	border-top:1px solid #f0f0f0 !important;
}
.uq-checkout .uq-metode-list .metodebayar .fa-check-circle{
	position:absolute;
	top:50%; right:14px;
	transform:translateY(-50%);
	font-size:19px;
	background:none !important;
	padding:0 !important;
	box-shadow:none !important;
	color:#dcdcdc;
	display:block !important;
}
.uq-checkout .uq-metode-list .metodebayar.active .fa-check-circle{ color:#111; }
.uq-checkout .uq-metode-name{
	font-weight:700;
	font-size:13px;
	color:#111;
}
.uq-checkout .uq-metode-name i.fas{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	width:26px; height:26px;
	border-radius:7px;
	background:#f5f5f5;
	color:#555;
	font-size:12px;
	margin-right:6px;
	vertical-align:middle;
}
.uq-checkout .uq-metode-desc{
	margin-top:3px;
	margin-left:32px;
	font-size:12px;
	color:#777;
	line-height:1.4;
}
.uq-checkout .uq-metode-list .metodebayar.active .uq-metode-name{ color:#111; }
@media (max-width:767px){
	.uq-checkout .uq-metode-list .metodebayar{ padding:14px 40px 14px 14px !important; }
}

/* ======================================================
   MODE EMBED — halaman invoice/pembayaran saat dimuat di
   dalam panel pembayaran halaman checkout (iframe).
   Class .uq-embed ditambahkan oleh JS ke <html> & <body>
   iframe, jadi aturan di bawah TIDAK berlaku saat halaman
   invoice dibuka langsung sebagai halaman biasa.
   ====================================================== */
.uq-embed{ background:#fff !important; }
/* Elemen milik layout situs (header/menu/breadcrumb/footer) disembunyikan
   supaya isi pembayaran terlihat menyatu dengan halaman checkout. */
.uq-embed .bread-crumb,
.uq-embed footer,
.uq-embed .footer,
.uq-embed header,
.uq-embed #navbar-sticky,
.uq-embed .wrap-header,
.uq-embed .wrap-menu-desktop,
.uq-embed .wrapper-header{ display:none !important; }

.uq-embed .uq-invoice{
	background:#fff !important;
	padding-top:0 !important;
	padding-bottom:0 !important;
}
.uq-embed .uq-invoice .container{
	max-width:100% !important;
	width:100% !important;
	padding-left:20px !important;
	padding-right:20px !important;
	padding-top:8px !important;
}
/* Lebar viewport iframe berbeda dari window, sehingga breakpoint col-md-*
   sering tidak aktif dan kolom jadi menyempit. Kolom struktural utama
   dipaksa 1 kolom penuh — tampilannya jadi rapi & konsisten di semua lebar.
   Grid di dalam kartu (mis. thumbnail produk) tidak disentuh. */
.uq-embed .uq-invoice > .container > .row{
	display:block !important;
	margin-left:0 !important;
	margin-right:0 !important;
}
.uq-embed .uq-invoice > .container > .row > [class*="col-"],
.uq-embed .uq-invoice > .container > .m-b-30 > [class*="col-"]{
	flex:none !important;
	width:100% !important;
	max-width:100% !important;
	padding-left:0 !important;
	padding-right:0 !important;
}
.uq-embed .uq-invoice .order-head{
	padding:18px 20px !important;
	margin-bottom:16px !important;
}
.uq-embed .uq-invoice .order-head h4{ font-size:17px; }
/* Nominal & tombol bayar tetap jadi fokus utama */
.uq-embed .uq-invoice .fs-28.text-danger.font-bold{ font-size:24px !important; }
.uq-embed .uq-invoice .btn{ max-width:360px; }

/* ---------- Panel Pembayaran inline (tanpa pindah halaman) ---------- */
.uq-pay-wrap{ margin-bottom:30px; }
.uq-pay-head{ position:relative; }
.uq-pay-head #uq-pay-newtab{
	position:absolute;
	top:24px;
	right:24px;
	color:#888;
	text-decoration:underline;
}
.uq-pay-frame-box{
	position:relative;
	background:#fff;
	border:1px solid #ececec;
	border-radius:4px;
	overflow:hidden;
}
.uq-pay-frame{
	display:block;
	width:100%;
	min-height:420px;
	border:0;
	overflow:hidden;
}
.uq-pay-loading{
	position:absolute;
	top:0; left:0; right:0;
	background:#fff;
	z-index:2;
	font-size:14px;
	color:#666;
}
@media (max-width:767px){
	.uq-pay-head #uq-pay-newtab{ position:static; display:block; margin-top:8px; }
	.uq-pay-frame{ min-height:320px; }
}

/* ======================================================
   HALAMAN RINCIAN / DETAIL PESANAN (manage/detailpesanan)
   Font & kartu disamakan dgn halaman lain (Status Pesanan,
   Akun Saya): section jadi kartu rounded+shadow, label huruf
   kecil-kapital, tombol pill+shadow, font semua Inter.
   ====================================================== */
.uq-pesanandetail{ background:#fafafa; }
.uq-pesanandetail .section{
	background:#fff;
	border:1px solid rgba(17,17,17,.07);
	border-radius:16px;
	box-shadow:0 1px 3px rgba(17,17,17,.05), 0 12px 26px -14px rgba(17,17,17,.16);
}
.uq-pesanandetail h4.text-primary{
	font-size:13px !important;
	text-transform:uppercase;
	letter-spacing:.6px;
	font-weight:700 !important;
	color:#111 !important;
	background:none !important;
	-webkit-text-fill-color:#111 !important;
}
.uq-pesanandetail h5{
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:.5px;
	font-weight:700;
	color:#888;
}

/* ---------- Baris label-kiri/nilai-kanan (gaya Tokopedia) ---------- */
.uq-pesanandetail .uq-pd-row{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:16px;
	padding:9px 0;
	font-size:13px;
}
.uq-pesanandetail .uq-pd-row-head{
	align-items:center;
	padding:4px 0 12px;
}
.uq-pesanandetail .uq-pd-row-head .uq-pd-row-label{
	flex-shrink:1;
	min-width:0;
	overflow-wrap:break-word;
}
.uq-pesanandetail .uq-pd-row-label{
	color:#666;
	flex-shrink:0;
}
.uq-pesanandetail .uq-pd-row-value{
	color:#111;
	font-weight:600;
	text-align:right;
}
.uq-pesanandetail .uq-pd-link{
	color:#1aa260 !important;
	background:none !important;
	-webkit-text-fill-color:#1aa260 !important;
	font-weight:600;
	font-size:12.5px;
	white-space:nowrap;
	flex-shrink:0;
}
.uq-pesanandetail .uq-pd-alamat-block{
	font-size:13px;
	color:#333;
	line-height:1.7;
}
.uq-pesanandetail .uq-pd-row-total{
	padding-top:12px;
}
.uq-pesanandetail .uq-pd-row-total .uq-pd-row-label{
	font-size:14px;
	font-weight:700;
	color:#111;
}
.uq-pesanandetail .uq-pd-row-total .uq-pd-row-value{
	font-size:16px;
	font-weight:700;
	color:#111;
}

/* ---------- Lacak Paket: timeline gaya Tokopedia ---------- */
.uq-pesanandetail .uq-lacak-resi{
	font-size:13px;
	color:#333;
	margin-bottom:10px;
}
.uq-pesanandetail .uq-lacak-status{
	font-size:15px;
	font-weight:700;
	padding:6px 0 16px;
	border-bottom:1px solid #f0f0f0;
	margin-bottom:16px;
}
.uq-pesanandetail .uq-lacak-status-done{ color:#1aa260; }
.uq-pesanandetail .uq-lacak-status-progress{ color:#d92d20; }
.uq-pesanandetail .uq-lacak-empty{ padding:10px 0; font-size:13px; }
.uq-pesanandetail .uq-lacak-timeline{ position:relative; }
.uq-pesanandetail .uq-lacak-item{
	position:relative;
	padding-left:22px;
	padding-bottom:20px;
}
.uq-pesanandetail .uq-lacak-item:last-child{ padding-bottom:0; }
.uq-pesanandetail .uq-lacak-item::before{
	content:'';
	position:absolute;
	left:4px; top:14px; bottom:-6px;
	width:1px;
	background:#e5e5e5;
}
.uq-pesanandetail .uq-lacak-item:last-child::before{ display:none; }
.uq-pesanandetail .uq-lacak-dot{
	position:absolute;
	left:0; top:3px;
	width:10px; height:10px;
	border-radius:50%;
	background:#ccc;
	box-shadow:0 0 0 2px #fff;
}
.uq-pesanandetail .uq-lacak-item-active .uq-lacak-dot{ background:#111; }
.uq-pesanandetail .uq-lacak-date{
	font-size:11px;
	color:#999;
	margin-bottom:2px;
}
.uq-pesanandetail .uq-lacak-item-active .uq-lacak-date{ color:#111; font-weight:700; }
.uq-pesanandetail .uq-lacak-desc{
	font-size:13px;
	color:#555;
	line-height:1.5;
}
.uq-pesanandetail .uq-lacak-item-active .uq-lacak-desc{ color:#111; font-weight:600; }

.uq-pesanandetail .produk .img{
	width:100%;
	padding-top:100%;
	background-size:cover;
	background-position:center;
	border-radius:12px;
	background-color:#f5f5f5;
}
.uq-pesanandetail .btn{
	border-radius:10px !important;
	box-shadow:0 4px 14px -3px rgba(17,17,17,.30), inset 0 1px 0 rgba(255,255,255,.14) !important;
	background-image:none !important;
	font-weight:600;
	letter-spacing:0;
}
.uq-pesanandetail .btn-primary{ background:#111 !important; border:1px solid #111 !important; }
.uq-pesanandetail .status-pesanan{
	font-family:'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
	border-radius:12px;
	font-weight:600;
	font-size:13px;
	letter-spacing:.3px;
}
.uq-pesanandetail .bg-foot{
	background:#f6f6f6 !important;
	border-radius:10px;
	color:#333 !important;
}
.uq-pesanandetail .alert-warning{
	border-radius:14px;
	border:1px solid rgba(255,193,7,.35);
}

/* ---------- Kartu status (gaya Tokopedia: garis warna di kiri) ---------- */
.uq-pesanandetail .uq-pd-status-card{
	background:#fff;
	border:1px solid rgba(17,17,17,.07);
	border-left:4px solid #999;
	border-radius:12px;
	padding:14px 18px;
	box-shadow:0 1px 3px rgba(17,17,17,.05), 0 12px 26px -14px rgba(17,17,17,.16);
}
.uq-pesanandetail .uq-pd-status-label{
	font-size:13px;
	font-weight:700;
	color:#111;
}
.uq-pesanandetail .uq-pd-status-desc{
	font-size:12.5px;
	color:#666;
	margin-top:4px;
}
.uq-pesanandetail .uq-pd-status-warning{ border-left-color:#f0a500; }
.uq-pesanandetail .uq-pd-status-primary{ border-left-color:#0d6efd; }
.uq-pesanandetail .uq-pd-status-success{ border-left-color:#1aa260; }
.uq-pesanandetail .uq-pd-status-danger{ border-left-color:#d92d20; }
.uq-pesanandetail .uq-pd-status-secondary{ border-left-color:#999; }

/* ---------- Ikon salin (Order ID / No Resi) ---------- */
.uq-pesanandetail .uq-pd-copy{
	color:#999;
	font-size:13px;
	margin-left:8px;
	transition:color .15s ease;
}
.uq-pesanandetail .uq-pd-copy:hover{ color:#111; }

/* ---------- Aksi pesanan, dikumpulkan di bawah (gaya Tokopedia) ---------- */
.uq-pesanandetail .uq-pd-actions-row{
	display:flex;
	align-items:center;
	gap:10px;
}
.uq-pesanandetail .uq-pd-more-btn{
	flex:0 0 44px !important;
	width:44px !important;
	height:44px !important;
	min-height:44px;
	max-height:44px;
	box-sizing:border-box;
	margin:0;
	border-radius:10px;
	border:1px solid #e2e2e2;
	background:#fff;
	color:#333;
	font-size:18px;
	line-height:1;
	display:flex;
	align-items:center;
	justify-content:center;
}
.uq-pesanandetail .uq-pd-more-btn:hover{ background:#fafafa; }
.uq-pesanandetail .uq-pd-more-list{
	list-style:none;
	margin:0;
	padding:8px 0;
}
.uq-pesanandetail .uq-pd-more-list li a{
	display:flex;
	align-items:center;
	gap:12px;
	padding:14px 20px;
	color:#111 !important;
	background:none !important;
	-webkit-text-fill-color:#111 !important;
	font-weight:600;
	font-size:14px;
	border-bottom:1px solid #f4f4f4;
}
.uq-pesanandetail .uq-pd-more-list li:last-child a{ border-bottom:0; }
.uq-pesanandetail .uq-pd-more-list li a:active{ background:#f8f8f8; }
.uq-pesanandetail .uq-pd-more-list li a i{ width:18px; text-align:center; color:#666; }
.uq-pesanandetail .uq-pd-actions{
	flex:1 1 auto;
	display:flex;
	flex-direction:row;
	gap:10px;
}
.uq-pesanandetail .uq-pd-actions .btn{
	flex:1 1 0;
	width:auto;
	height:44px !important;
	min-height:44px;
	max-height:44px;
	box-sizing:border-box;
	margin:0 !important;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:10px !important;
	font-size:14px !important;
	line-height:1 !important;
	font-weight:700;
	letter-spacing:.3px;
	padding:0 12px !important;
	white-space:nowrap;
}
.uq-pesanandetail .uq-pd-actions .btn-outline-secondary{
	border:1px solid rgba(17,17,17,.18) !important;
}

/* ---------- Mobile: jarak ke footer terlalu jauh (numpuk p-b-85 + p-b-50 + m-b-30) ---------- */
@media (max-width:767px){
	.uq-pesanandetail form.p-b-85{ padding-bottom:16px !important; }
	.uq-pesanandetail .container.p-t-50.p-b-50{ padding-top:12px !important; padding-bottom:8px !important; }
	.uq-pesanandetail .col-md-5.m-b-30,
	.uq-pesanandetail .col-md-7.m-b-30{ margin-bottom:8px !important; }
	.uq-pesanandetail .bread-crumb{ padding:8px 16px !important; font-size:11px !important; }
	.uq-pesanandetail .bread-crumb a,
	.uq-pesanandetail .bread-crumb span{ font-size:11px !important; }
	.uq-pesanandetail .uq-pd-status-card{ margin-top:0 !important; }
}

/* ---------- Mobile: footer dihilangkan, tombol aksi jadi sticky di bawah (gaya "+Keranjang") ---------- */
@media (max-width:767px){
	body:has(.uq-pd-actions-row) footer.bg-foot{ display:none !important; }
	body:has(.uq-pd-actions-row) .chat-sticky{ display:none !important; }
	.uq-pesanandetail:has(.uq-pd-actions-row){ padding-bottom:76px; }
	.uq-pd-actions-row{
		position:fixed;
		left:0; right:0; bottom:0;
		z-index:1035;
		background:#fff;
		padding:10px 14px calc(10px + env(safe-area-inset-bottom));
		margin:0;
		box-shadow:0 -1px 0 rgba(17,17,17,.06), 0 -8px 24px -10px rgba(17,17,17,.18);
	}
}

/* ======================================================
   HALAMAN CHECKOUT / PEMBAYARAN (home/pembayaran)
   Reskin visual ke gaya Tokopedia -- struktur form & JS
   TIDAK diubah (id/name field tetap sama), cuma tampilan.
   ====================================================== */
.uq-bayar{ background:#fafafa; }
.uq-bayar h4.font-bold.text-primary{
	font-size:13px !important;
	text-transform:uppercase;
	letter-spacing:.6px;
	font-weight:700 !important;
	color:#111 !important;
	background:none !important;
	-webkit-text-fill-color:#111 !important;
}
.uq-bayar .section{
	border-radius:16px !important;
	box-shadow:0 1px 3px rgba(17,17,17,.05), 0 12px 26px -14px rgba(17,17,17,.16) !important;
	border:1px solid rgba(17,17,17,.06);
}
.uq-bayar .alamat.section{ border-radius:12px !important; }
.uq-bayar .voucher-item{
	border:1px solid rgba(17,17,17,.08);
	border-radius:12px;
	overflow:hidden;
}
.uq-bayar .metodebayar{
	border-radius:12px !important;
}
.uq-bayar .metodebayar.active,
.uq-bayar .metodebayar:hover{
	border-color:#111 !important;
}
.uq-bayar .metodebayar.active .bg-logo,
.uq-bayar .metodebayar:hover .bg-logo{
	background:#111 !important;
}
.uq-bayar .metodebayar .fa-check-circle{
	color:#111 !important;
}
.uq-bayar .section.bg-info{
	background:#111 !important;
}
.uq-bayar .form-control{
	border-radius:10px !important;
}
.uq-bayar .produk-item .img{
	border-radius:12px;
}
/* Sticky bar Total + Bayar -- disembunyikan di desktop, di sana tombolnya tetap di sidebar */
.uq-bayar-sticky{ display:none; }

@media (max-width:767px){
	.uq-bayar .bread-crumb{ font-size:11px !important; padding:8px 16px !important; }
	.uq-bayar .bread-crumb a,
	.uq-bayar .bread-crumb span{ font-size:11px !important; }

	/* Baris Total & tombol bayar yg lama disembunyikan di mobile -- dipindah ke sticky bar bawah */
	.uq-bayar .uq-total-row,
	.uq-bayar .pembayaran:not(.uq-bayar-sticky-btns){ display:none !important; }
	.uq-bayar form.p-b-85{ padding-bottom:90px !important; }

	.uq-bayar-sticky{
		display:flex;
		align-items:center;
		justify-content:space-between;
		gap:12px;
		position:fixed;
		left:0; right:0; bottom:0;
		z-index:1035;
		background:#fff;
		padding:10px 14px calc(10px + env(safe-area-inset-bottom));
		box-shadow:0 -1px 0 rgba(17,17,17,.06), 0 -8px 24px -10px rgba(17,17,17,.18);
	}
	.uq-bayar-sticky-total{
		display:flex;
		flex-direction:column;
		line-height:1.3;
		min-width:0;
	}
	.uq-bayar-sticky-label{
		font-size:10px; color:#888;
		text-transform:uppercase; letter-spacing:.4px;
	}
	.uq-bayar-sticky-value{
		font-size:15px; font-weight:700; color:#111;
		white-space:nowrap;
	}
	.uq-bayar-sticky-btns{
		display:flex;
		gap:8px;
		flex-shrink:0;
	}
	.uq-bayar-sticky-btns .btn{
		height:44px;
		border-radius:10px !important;
		display:flex; align-items:center; justify-content:center;
		font-size:13px;
		white-space:nowrap;
		margin:0 !important;
		transition:transform .12s ease;
	}
	.uq-bayar-sticky-btns .btn:active{ transform:scale(.95); }
	.uq-bayar-sticky-btns .btn-primary{ padding:0 24px !important; }
}

@media (prefers-reduced-motion: reduce){
	.uq-checkout *, .uq-invoice *, .uq-pesanan *, .uq-pesanandetail *, .uq-bayar *{
		animation:none !important;
		transition:none !important;
	}
}

.uq-checkout .btn-primary:focus-visible,
.uq-checkout .btn-success:focus-visible,
.uq-checkout .uq-kurir-opt:focus-visible,
.uq-checkout .uq-metode-list .metodebayar:focus-visible,
.uq-checkout .uq-voucher-trigger:focus-visible,
.uq-invoice .btn-warning:focus-visible,
.uq-invoice .btn-success:focus-visible,
.uq-pesanan .pesanan-item .btn-primary:focus-visible{
	outline:2px solid #111;
	outline-offset:2px;
}