/* W2W Filter Popup — Pixel UI */
:root{
  --w2w-green:#1e8e5a;
  --w2w-border:rgba(0,0,0,.10);
}
.w2wfp-shortcode{ display:flex; justify-content:flex-end; margin:12px 0; }
.w2wfp-open-btn{
  border:1px solid #e2e2e2; background:#fff; padding:10px 16px; border-radius:12px; cursor:pointer;
  box-shadow: 0 1px 0 rgba(0,0,0,.04);
  display:inline-flex; align-items:center; gap:8px;
}

/* Overlay + Modal */
.w2wfp-overlay{ 
	position: absolute;
    left: 10.5%;
    top: 33%; 
	display:none; 
	align-items:flex-start; 
	justify-content:center; 
	padding:0px;z-index:99999; 
	width: 79%;
}
.w2wfp-overlay.is-open{ display:flex; }
.w2wfp-modal{ width:100%; max-width:1192px; }
.w2wfp-modal-card{
	padding:20px;	
	border-radius: 20px;
	border: 1px solid rgba(54, 54, 53, 0.50);
	background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 8px -2px rgba(0, 0, 0, 0.12), 0 10px 24px -4px rgba(0, 0, 0, 0.25);
}

/* Header */
.w2wfp-card{ padding:16px; }
.w2wfp-card-head{
  display:flex; align-items:center; justify-content:space-between; padding:12px 14px;
  background:#fff; border-radius:12px; border:1px solid rgba(0,0,0,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.w2wfp-head-left{ display:flex; align-items:center; gap:8px; }
.w2wfp-title{ font-weight:600; }
.w2wfp-clear{ background:#f7f7f7; border:1px solid #e6e6e6; padding:8px 12px; border-radius:12px; cursor:pointer; color:#666; }

/* Sections */
.w2wfp-sections{
  margin-top:12px; 
  padding:12px; 
  border-radius:16px;
  flex-wrap: wrap;	
  display:inline-flex;
  gap: 22px;	

}
.w2wfp-section{
max-width: 100%;
min-width: 365px;
padding: 16px;
display: inline-block;
vertical-align: top;
white-space: nowrap;
border-radius: 20px;
border: 1px solid #7C7C7A;
max-height: 193px;
overflow: auto;	
}
.w2wfp-section-title{ 
color: #363635;
font-family: Lato;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; 
letter-spacing: 0.2px;
margin-bottom: 24px;	
}
/* Chips */
.w2wfp-chips{ display:flex; flex-wrap:wrap; gap:10px; }
.w2wfp-chip{
display: flex;
padding: 12px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 20px;
border: 1px solid rgba(54, 54, 53, 0.50);	
color: #363635;
text-align: center;
font-family:"Noto Sans";
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px; 
letter-spacing: 0.64px;
cursor: pointer;
text-transform: capitalize;	
}
/* width */
.w2wfp-section::-webkit-scrollbar {
  width: 10px;
}

/* Track */
.w2wfp-section::-webkit-scrollbar-track {
  background: #f1f1f1; 
}
 
/* Handle */
.w2wfp-section::-webkit-scrollbar-thumb {
  background: #888; 
  border-radius:20px;	
}

/* Handle on hover */
.w2wfp-section::-webkit-scrollbar-thumb:hover {
  background: #555; 
  border-radius:20px;	
}
.w2wfp-chip:hover{ background:#fefefe; }
.w2wfp-chip.active{ background:var(--w2w-green); color:#fff; border-color:var(--w2w-green); }

/* Footer */
.w2wfp-footerbar{ display:flex; justify-content:flex-end; gap:10px; padding:12px 0px 0px; }
.w2wfp-btn{ border-radius:12px; padding:10px 16px; border:1px solid #e6e6e6; cursor:pointer; background:#fff; }
.w2wfp-btn-primary{ background:var(--w2w-green); color:#fff; border-color:var(--w2w-green); }
.w2wfp-btn-ghost{ background:#fff; }

@media (max-width:640px){
  .w2wfp-modal{ max-width:100%; }
  .w2wfp-card{ padding:12px; }
}