/* ======================================================
   POPUP FILTER ala Uniqlo — dipakai di halaman Shop (All Produk)
   dan halaman Kategori.
   Popup ini LANGSUNG tampil begitu tombol Filter diklik
   (bukan slide/accordion lambat seperti sebelumnya).
   Scope: .uq-shop / elemen popup (tidak memengaruhi halaman lain)
   ====================================================== */

/* Tombol pembuka filter */
.uq-shop .uq-filter-btn{
	background:#111 !important;
	border:1px solid #111 !important;
	color:#fff !important;
	border-radius:0 !important;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:12px;
	font-weight:600;
	padding:11px 22px;
	position:relative;
}
.uq-shop .uq-filter-count{
	display:none;
	background:#fff;
	color:#111;
	border-radius:50%;
	min-width:18px;
	height:18px;
	line-height:18px;
	font-size:10px;
	text-align:center;
	margin-left:6px;
	font-weight:700;
}

/* Overlay gelap di belakang popup */
.uq-filter-overlay{
	position:fixed;
	top:0; left:0; right:0; bottom:0;
	background:rgba(0,0,0,.5);
	z-index:9998;
	opacity:0;
	visibility:hidden;
	transition:opacity .15s ease;
}
.uq-filter-overlay.is-open{
	opacity:1;
	visibility:visible;
}

/* Panel popup: langsung muncul dari kanan */
.uq-filter-panel{
	position:fixed;
	top:0; right:0; bottom:0;
	width:380px;
	max-width:92vw;
	background:#fff;
	z-index:9999;
	display:flex;
	flex-direction:column;
	transform:translateX(100%);
	transition:transform .18s ease-out;
	box-shadow:-4px 0 24px rgba(0,0,0,.15);
}
.uq-filter-panel.is-open{
	transform:translateX(0);
}

.uq-filter-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:18px 20px;
	border-bottom:1px solid #eee;
	flex-shrink:0;
}
.uq-filter-head h5{
	margin:0;
	font-size:14px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:1px;
	color:#111;
}
.uq-filter-close{
	background:none;
	border:none;
	font-size:18px;
	color:#111;
	cursor:pointer;
	line-height:1;
	padding:4px;
}

.uq-filter-body{
	flex:1 1 auto;
	overflow-y:auto;
	padding:0 20px;
}

.uq-filter-section{
	padding:18px 0;
	border-bottom:1px solid #f0f0f0;
}
.uq-filter-section:last-child{ border-bottom:none; }
.uq-filter-section-title{
	font-size:12px;
	font-weight:700;
	text-transform:uppercase;
	letter-spacing:.5px;
	color:#111;
	margin-bottom:12px;
}

.uq-filter-option{
	display:block;
	position:relative;
	padding-left:26px;
	margin-bottom:12px;
	font-size:13px;
	color:#333;
	cursor:pointer;
	user-select:none;
}
.uq-filter-option:last-child{ margin-bottom:0; }
.uq-filter-option input{
	position:absolute;
	opacity:0;
	cursor:pointer;
	top:0; left:0;
	width:18px; height:18px;
	margin:0;
}
.uq-filter-checkmark{
	position:absolute;
	top:1px; left:0;
	width:16px; height:16px;
	border:1px solid #bbb;
	background:#fff;
}
.uq-filter-option input[type="radio"] ~ .uq-filter-checkmark{
	border-radius:50%;
}
.uq-filter-option input:checked ~ .uq-filter-checkmark{
	background:#111;
	border-color:#111;
}
.uq-filter-option input[type="checkbox"]:checked ~ .uq-filter-checkmark:after{
	content:"";
	position:absolute;
	left:5px; top:1px;
	width:4px; height:8px;
	border:solid #fff;
	border-width:0 2px 2px 0;
	transform:rotate(45deg);
}
.uq-filter-option input[type="radio"]:checked ~ .uq-filter-checkmark:after{
	content:"";
	position:absolute;
	top:4px; left:4px;
	width:6px; height:6px;
	border-radius:50%;
	background:#fff;
}
.uq-filter-option.sub{
	padding-left:44px;
	color:#666;
}
.uq-filter-option.sub .uq-filter-checkmark{ left:18px; }
.uq-filter-option.sub input{ left:18px; }

.uq-filter-foot{
	display:flex;
	gap:10px;
	padding:16px 20px;
	border-top:1px solid #eee;
	flex-shrink:0;
}
.uq-filter-foot button{
	flex:1;
	border-radius:0 !important;
	text-transform:uppercase;
	letter-spacing:1px;
	font-size:12px;
	font-weight:600;
	padding:12px 10px;
	border:1px solid #111;
}
.uq-filter-reset{
	background:#fff !important;
	color:#111 !important;
}
.uq-filter-apply{
	background:#111 !important;
	color:#fff !important;
}

body.uq-filter-noscroll{ overflow:hidden; }

@media (max-width:576px){
	.uq-filter-panel{ width:100%; }
}