/* =====================================================================
   RichUps — Filter Sidebar
===================================================================== */

/* ─── 1. Layout: 2 columns (sidebar + content) ────────────────── */
.rp-with-sidebar {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 32px;
	align-items: start;
}
@media (max-width: 991px) {
	.rp-with-sidebar { grid-template-columns: 1fr; }
}


/* ─── 2. Sidebar container ────────────────────────────────────── */
.rp-sidebar {
	background: #fff;
	border-radius: 16px;
	padding: 24px 22px;
	box-shadow: var(--rp-shadow, 0 4px 16px rgba(0,0,0,0.06));
	position: sticky;
	top: 110px;
	max-height: calc(100vh - 130px);
	overflow-y: auto;
	scrollbar-width: thin;
}
.rp-sidebar::-webkit-scrollbar { width: 5px; }
.rp-sidebar::-webkit-scrollbar-thumb {
	background: var(--rp-green-300, #9bc4a0);
	border-radius: 3px;
}

@media (max-width: 991px) {
	/* Mobile: hide sidebar by default + show as drawer when opened */
	.rp-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		max-height: 100vh;
		width: 320px;
		max-width: 88vw;
		border-radius: 0;
		z-index: 1000001;  /* สูงกว่า .mobile-menu (999999) ของ template */
		transform: translateX(-100%);
		transition: transform .3s cubic-bezier(.2,.7,.2,1);
		padding: 24px 22px 100px;
	}
	.rp-sidebar.is-open { transform: translateX(0); }
}


/* ─── 3. Filter section ───────────────────────────────────────── */
.rp-filter-group {
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--rp-line, #dde6df);
}
.rp-filter-group:last-of-type {
	border-bottom: none;
	margin-bottom: 0;
}

.rp-filter-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: 14px;
	font-weight: 700;
	color: var(--rp-ink, #1f2b22);
	margin: 0 0 16px;
	letter-spacing: .3px;
}
.rp-filter-title svg {
	color: var(--rp-green-700, #2c5a36);
}


/* ─── 4. Price range slider ───────────────────────────────────── */
.rp-price-slider {
	position: relative;
	height: 32px;
	padding: 14px 8px 0;
}
.rp-price-track {
	position: relative;
	height: 4px;
	background: var(--rp-line, #dde6df);
	border-radius: 2px;
}
.rp-price-track-fill {
	position: absolute;
	height: 100%;
	background: var(--rp-green-700, #2c5a36);
	border-radius: 2px;
}
.rp-price-slider input[type="range"] {
	position: absolute;
	top: 14px;
	left: 0;
	right: 0;
	width: 100%;
	height: 4px;
	background: transparent;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
	z-index: 2;
	margin: 0;
}
.rp-price-slider input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	pointer-events: all;
	width: 20px;
	height: 20px;
	background: #fff;
	border: 3px solid var(--rp-green-700, #2c5a36);
	border-radius: 50%;
	cursor: grab;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
	transition: transform .15s;
}
.rp-price-slider input[type="range"]::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.rp-price-slider input[type="range"]::-moz-range-thumb {
	pointer-events: all;
	width: 20px;
	height: 20px;
	background: #fff;
	border: 3px solid var(--rp-green-700, #2c5a36);
	border-radius: 50%;
	cursor: grab;
	box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.rp-price-inputs {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	gap: 8px;
	align-items: center;
	margin-top: 18px;
}
.rp-price-input-box {
	position: relative;
}
.rp-price-input-box::before {
	content: '฿';
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--rp-mute, #6c7c70);
	font-size: 13px;
	pointer-events: none;
}
.rp-price-input-box input {
	width: 100%;
	padding: 8px 10px 8px 22px;
	border: 1px solid var(--rp-line, #dde6df);
	border-radius: 8px;
	font-size: 13px;
	background: var(--rp-cream, #faf7f1);
	color: var(--rp-ink, #1f2b22);
	font-family: inherit;
	appearance: textfield;
	-moz-appearance: textfield;
}
.rp-price-input-box input::-webkit-outer-spin-button,
.rp-price-input-box input::-webkit-inner-spin-button {
	-webkit-appearance: none; margin: 0;
}
.rp-price-input-box input:focus {
	outline: 2px solid var(--rp-green-500, #4a8f57);
	outline-offset: 0;
	border-color: var(--rp-green-500, #4a8f57);
}
.rp-price-sep {
	color: var(--rp-mute, #6c7c70);
	font-size: 14px;
}


/* ─── 5. Rating filter ────────────────────────────────────────── */
.rp-rating-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.rp-rating-opt {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	cursor: pointer;
	transition: background .15s;
}
.rp-rating-opt:hover {
	background: var(--rp-green-50, #e7f1e9);
}
.rp-rating-opt input[type="radio"] {
	width: 16px; height: 16px;
	accent-color: var(--rp-green-700, #2c5a36);
	cursor: pointer;
	margin: 0;
}
.rp-rating-opt-stars {
	color: #e0b340;
	font-size: 14px;
	letter-spacing: 1px;
}
.rp-rating-opt-stars .rp-star-empty { color: var(--rp-line, #dde6df); }
.rp-rating-opt-label {
	font-size: 13px;
	color: var(--rp-ink, #1f2b22);
}
.rp-rating-opt input[type="radio"]:checked ~ .rp-rating-opt-label {
	font-weight: 600;
	color: var(--rp-green-700, #2c5a36);
}


/* ─── 6. Filter action buttons ────────────────────────────────── */
.rp-filter-actions {
	display: flex;
	gap: 8px;
	margin-top: 20px;
}
.rp-filter-apply {
	flex: 1;
	padding: 11px 18px;
	background: var(--rp-green-700, #2c5a36);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 13.5px;
	font-weight: 700;
	cursor: pointer;
	transition: all .2s;
	font-family: inherit;
}
.rp-filter-apply:hover {
	background: var(--rp-green-900, #1d3a23);
}
.rp-filter-clear {
	padding: 11px 14px;
	background: transparent;
	color: var(--rp-mute, #6c7c70);
	border: 1px solid var(--rp-line, #dde6df);
	border-radius: 10px;
	font-size: 13px;
	cursor: pointer;
	transition: all .2s;
	font-family: inherit;
}
.rp-filter-clear:hover {
	background: #fbe7e0;
	color: #c25a3e;
	border-color: #c25a3e;
}


/* ─── 7. Active filter chips (above grid) ─────────────────────── */
.rp-active-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
	padding: 14px 18px;
	background: var(--rp-green-50, #e7f1e9);
	border-radius: 12px;
	align-items: center;
}
.rp-active-filters.is-empty { display: none; }
.rp-active-filters-label {
	font-size: 13px;
	font-weight: 600;
	color: var(--rp-green-700, #2c5a36);
	margin-right: 4px;
}
.rp-filter-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px 5px 14px;
	background: #fff;
	border-radius: 999px;
	font-size: 12.5px;
	color: var(--rp-ink, #1f2b22);
	border: 1px solid var(--rp-green-300, #9bc4a0);
}
.rp-filter-chip-remove {
	width: 18px; height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	border: none;
	cursor: pointer;
	border-radius: 50%;
	color: var(--rp-mute, #6c7c70);
	padding: 0;
	transition: all .15s;
}
.rp-filter-chip-remove:hover {
	background: #c25a3e;
	color: #fff;
}
.rp-clear-all-chip {
	margin-left: auto;
	background: transparent;
	border: none;
	color: #c25a3e;
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	padding: 4px 8px;
	font-family: inherit;
}


/* ─── 8. Mobile filter toggle + drawer backdrop ───────────────── */
.rp-filter-mobile-btn {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: #fff;
	border: 1px solid var(--rp-line, #dde6df);
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--rp-ink, #1f2b22);
	cursor: pointer;
	box-shadow: var(--rp-shadow, 0 4px 16px rgba(0,0,0,0.06));
	font-family: inherit;
	margin-bottom: 16px;
}
.rp-filter-mobile-btn:hover {
	border-color: var(--rp-green-500, #4a8f57);
}
.rp-filter-mobile-btn-badge {
	background: var(--rp-green-700, #2c5a36);
	color: #fff;
	font-size: 11px;
	padding: 1px 7px;
	border-radius: 999px;
	font-weight: 700;
}
@media (max-width: 991px) {
	.rp-filter-mobile-btn { display: inline-flex; }
}

/* Backdrop for mobile filter drawer */
.rp-filter-backdrop {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(15, 25, 19, 0.5);
	z-index: 1000000;  /* ต่ำกว่า sidebar (1000001) สูงกว่า .mobile-menu (999999) */
	opacity: 0;
	transition: opacity .3s;
}
.rp-filter-backdrop.is-open {
	display: block;
	opacity: 1;
}

/* Mobile sidebar header */
.rp-sidebar-mobile-head {
	display: none;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--rp-line, #dde6df);
}
@media (max-width: 991px) {
	.rp-sidebar-mobile-head { display: flex; }
}
.rp-sidebar-mobile-head h3 {
	font-size: 18px;
	font-weight: 700;
	color: var(--rp-ink, #1f2b22);
	margin: 0;
}
.rp-sidebar-close {
	width: 32px; height: 32px;
	border: none;
	background: var(--rp-cream, #faf7f1);
	color: var(--rp-mute, #6c7c70);
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.rp-sidebar-close:hover {
	background: var(--rp-ink, #1f2b22);
	color: #fff;
}


/* ─── 9. Lock body when filter drawer open (mobile) ───────────── */
body.rp-filter-locked {
	overflow: hidden;
}

/* ปิด pointer-events ของ template overlays ที่อาจทับ drawer
   (.mobile-menu, .preloader, .sidebar-area ของ Econet template
   มี z-index สูงและอาจกินคลิกได้แม้ว่าตาจะมองไม่เห็น) */
body.rp-filter-locked .mobile-menu,
body.rp-filter-locked .menu-backdrop,
body.rp-filter-locked .preloader,
body.rp-filter-locked .sidebar-area {
	pointer-events: none !important;
}

/* แต่ rp-sidebar กับ backdrop ของเราต้องยังคลิกได้ */
body.rp-filter-locked .rp-sidebar,
body.rp-filter-locked .rp-sidebar *,
body.rp-filter-locked .rp-filter-backdrop {
	pointer-events: auto !important;
}