/* =============================================================
   Rượu Vang – Product Filter
   Premium redesign – clean, minimal, winevn.com inspired
   ============================================================= */

/* ── Design Tokens ───────────────────────────── */
:root {
	--rv-wine:          #990D23;
	--rv-wine-dark:     #6B0017;
	--rv-wine-light:    #f5e6e9;
	--rv-wine-alpha:    rgba(153, 13, 35, .08);

	--rv-ink:           #1e1a17;
	--rv-ink-2:         #4a4540;
	--rv-ink-3:         #8a837c;

	--rv-cream:         #fbf8ee;
	--rv-cream-dark:    #f2eddf;
	--rv-sand:          #e5e0cd;
	--rv-sand-light:    #ede9da;

	--rv-white:         #ffffff;
	--rv-danger:        #d63c3c;

	--rv-shadow-sm:     0 2px 8px rgba(30,26,23,.08);
	--rv-shadow-md:     0 8px 28px rgba(30,26,23,.13);
	--rv-shadow-lg:     0 16px 48px rgba(30,26,23,.16);

	--rv-radius-sm:     6px;
	--rv-radius-md:     10px;
	--rv-radius-pill:   8px;

	--rv-ease:          cubic-bezier(.4, 0, .2, 1);
	--rv-dur:           180ms;

	--rv-font:          'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	--rv-font-size:     13.5px;
	--rv-line-height:   1.45;
}

/* ── Reset scoped ────────────────────────────── */
.rv-filter-bar *,
.rv-filter-bar *::before,
.rv-filter-bar *::after {
	box-sizing: border-box;
}
.rv-filter-bar input[type="checkbox"],
.rv-filter-dropdown input[type="checkbox"] {
	margin-bottom: 0;
}

/* ── Bar Container ───────────────────────────── */
.rv-filter-bar {
	width: 100%;
	background: var(--rv-cream);
	border: 1px solid var(--rv-sand);
	border-radius: var(--rv-radius-md);
	padding: 10px 14px;
	margin-bottom: 24px;
	font-family: var(--rv-font);
	font-size: var(--rv-font-size);
	line-height: var(--rv-line-height);
	color: var(--rv-ink);
}

.rv-filter-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
}

/* ── Search Box ──────────────────────────────── */
.rv-search-wrap {
	flex-shrink: 0;
}

.rv-search-form {
	display: flex;
	align-items: stretch;
	height: 34px;
	background: var(--rv-white);
	border: 1.5px solid var(--rv-sand);
	border-radius: 999px;
	overflow: hidden;
	transition:
		border-color var(--rv-dur) var(--rv-ease),
		box-shadow   var(--rv-dur) var(--rv-ease);
}
.rv-search-form:hover {
	border-color: #c8c3b0;
}
.rv-search-form:focus-within {
	border-color: var(--rv-wine);
	box-shadow: 0 0 0 3px var(--rv-wine-alpha);
}

/* Input */
.rv-search-field {
	flex: 1;
	min-width: 0;
	width: 165px;
	padding: 0 4px 0 14px;
	border: none;
	outline: none;
	background: transparent;
	font-family: var(--rv-font);
	font-size: 13.5px;
	color: var(--rv-ink);
}
.rv-search-field::placeholder { color: var(--rv-ink-3); }
.rv-search-field::-webkit-search-cancel-button { display: none; }

/* Nút submit – wine red flush phải, icon + text */
.rv-search-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	flex-shrink: 0;
	height: 100%;
	padding: 0 16px;
	border: none;
	border-left: 1px solid rgba(0,0,0,.08);
	border-radius: 0;
	background: var(--rv-wine);
	color: var(--rv-white);
	font-family: var(--rv-font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .01em;
	cursor: pointer;
	white-space: nowrap;
	transition: background var(--rv-dur) var(--rv-ease);
}
.rv-search-btn:hover {
	background: var(--rv-wine-dark);
}
.rv-search-btn:active {
	background: var(--rv-wine-dark);
	box-shadow: inset 0 1px 3px rgba(0,0,0,.15);
}

/* Vertical divider */
.rv-divider {
	flex-shrink: 0;
	width: 1px;
	height: 28px;
	background: var(--rv-sand);
	border-radius: 1px;
}

/* ── Groups Row ──────────────────────────────── */
.rv-groups-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	flex: 1;
}

/* ── Filter Item ─────────────────────────────── */
.rv-filter-item {
	position: relative;
	display: inline-flex;
}

/* ── Filter Button ───────────────────────────── */
.rv-filter-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 13px;
	border: 1.5px solid var(--rv-sand);
	border-radius: var(--rv-radius-pill);
	background: var(--rv-white);
	color: var(--rv-ink-2);
	font-family: var(--rv-font);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .01em;
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
	touch-action: manipulation;   /* xoá 300ms delay trên mobile */
	transition:
		border-color  var(--rv-dur) var(--rv-ease),
		background    var(--rv-dur) var(--rv-ease),
		color         var(--rv-dur) var(--rv-ease),
		box-shadow    var(--rv-dur) var(--rv-ease);
}

/* Hover */
.rv-filter-btn:hover {
	border-color: var(--rv-wine);
	color: var(--rv-wine);
	background: var(--rv-wine-alpha);
}

/* Open (dropdown visible) */
.rv-filter-btn.is-open {
	border-color: var(--rv-wine);
	color: var(--rv-wine);
	background: var(--rv-wine-alpha);
	box-shadow: 0 0 0 3px var(--rv-wine-alpha);
}

/* Active (has selections) */
.rv-filter-btn.is-active {
	border-color: var(--rv-wine);
	background: var(--rv-wine);
	color: var(--rv-white);
	box-shadow: 0 2px 10px rgba(153,13,35,.3);
}
.rv-filter-btn.is-active:hover {
	background: var(--rv-wine-dark);
	border-color: var(--rv-wine-dark);
	box-shadow: 0 4px 14px rgba(153,13,35,.35);
}
.rv-filter-btn.is-active.is-open {
	background: var(--rv-wine-dark);
	border-color: var(--rv-wine-dark);
	box-shadow: 0 4px 14px rgba(153,13,35,.35);
}

/* Count badge */
.rv-filter-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: var(--rv-radius-pill);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1;
	background: rgba(255,255,255,.25);
	color: var(--rv-white);
}
.rv-filter-btn:not(.is-active) .rv-filter-count {
	background: var(--rv-wine);
	color: var(--rv-white);
}

/* Chevron arrow */
.rv-filter-arrow {
	display: inline-block;
	flex-shrink: 0;
	width: 9px;
	height: 9px;
	border-right: 1.75px solid currentColor;
	border-bottom: 1.75px solid currentColor;
	transform: rotate(45deg) translate(-1px, -2px);
	transition: transform var(--rv-dur) var(--rv-ease);
}
.rv-filter-btn.is-open .rv-filter-arrow {
	transform: rotate(-135deg) translate(-1px, -2px);
}

/* ── Dropdown Panel ──────────────────────────── */
.rv-filter-dropdown {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	z-index: 99990;
	min-width: 220px;
	max-width: 280px;
	background: var(--rv-white);
	border: 1px solid var(--rv-sand);
	border-radius: var(--rv-radius-md);
	box-shadow: var(--rv-shadow-md);
	overflow: hidden;

	opacity: 0;
	transform: translateY(-6px) scale(.98);
	transform-origin: top left;
	transition:
		opacity   var(--rv-dur) var(--rv-ease),
		transform var(--rv-dur) var(--rv-ease);
}
.rv-filter-dropdown.is-open {
	display: block;
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* 2 cột – 10 đến 19 items */
.rv-filter-dropdown.rv-cols-2 {
	min-width: 400px;
	max-width: 460px;
}
.rv-filter-dropdown.rv-cols-2 .rv-checkbox-list {
	column-count: 2;
	column-gap: 0;
	max-height: 340px;
}

/* 3 cột – ≥ 20 items */
.rv-filter-dropdown.rv-cols-3 {
	min-width: 560px;
	max-width: 640px;
}
.rv-filter-dropdown.rv-cols-3 .rv-checkbox-list {
	column-count: 3;
	column-gap: 0;
	max-height: 320px;
}

/* Item không bị cắt ngang cột */
.rv-cols-2 .rv-checkbox-item,
.rv-cols-3 .rv-checkbox-item {
	break-inside: avoid;
	-webkit-column-break-inside: avoid;
}

/* "Xem thêm" & actions luôn chiếm full width */
.rv-cols-2 .rv-show-more-item,
.rv-cols-3 .rv-show-more-item {
	column-span: all;
}
.rv-cols-2 .rv-dropdown-actions,
.rv-cols-3 .rv-dropdown-actions {
	border-top: 1px solid var(--rv-cream-dark);
}

/* ── Checkbox List ───────────────────────────── */
.rv-checkbox-list {
	list-style: none;
	margin: 0;
	padding: 4px 0;
	max-height: 270px;
	overflow-y: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--rv-sand) transparent;
}
.rv-checkbox-list::-webkit-scrollbar { width: 3px; }
.rv-checkbox-list::-webkit-scrollbar-thumb {
	background: var(--rv-sand);
	border-radius: 2px;
}

.rv-checkbox-item { display: block; }
.rv-checkbox-item.rv-hidden { display: none; }

.rv-checkbox-item label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 14px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.35;
	color: var(--rv-ink-2);
	transition:
		background var(--rv-dur) var(--rv-ease),
		color      var(--rv-dur) var(--rv-ease);
	margin: 0;
	font-weight: 400;
}
.rv-checkbox-item label:hover {
	background: var(--rv-cream);
	color: var(--rv-ink);
}
.rv-checkbox-item:has(.rv-checkbox:checked) label {
	background: var(--rv-wine-light);
	color: var(--rv-wine);
	font-weight: 500;
}

/* Custom checkbox – nhỏ gọn hơn */
.rv-checkbox {
	appearance: none;
	-webkit-appearance: none;
	flex-shrink: 0;
	width: 15px;
	height: 15px;
	border: 1.5px solid #d0cbc0;
	border-radius: 3px;
	cursor: pointer;
	background: var(--rv-white);
	transition:
		background   var(--rv-dur) var(--rv-ease),
		border-color var(--rv-dur) var(--rv-ease);
	position: relative;
}
.rv-checkbox:hover {
	border-color: var(--rv-wine);
}
.rv-checkbox:checked {
	background: var(--rv-wine);
	border-color: var(--rv-wine);
}
.rv-checkbox:checked::after {
	content: '';
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 9'%3E%3Cpath d='M1 4l3.5 3.5L11 1' stroke='white' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 9px no-repeat;
}

.rv-checkbox-label {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Show more */
.rv-show-more-item {
	border-top: 1px solid var(--rv-cream-dark);
	margin-top: 2px;
}
.rv-show-more-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	width: 100%;
	padding: 7px 14px;
	background: none;
	border: none;
	font-family: var(--rv-font);
	font-size: 12px;
	font-weight: 500;
	color: var(--rv-wine);
	cursor: pointer;
	transition: background var(--rv-dur) var(--rv-ease);
}
.rv-show-more-btn:hover { background: var(--rv-wine-alpha); }

/* ── Dropdown Footer ─────────────────────────── */
.rv-dropdown-actions {
	padding: 7px 14px 9px;
	border-top: 1px solid var(--rv-cream-dark);
	background: var(--rv-cream);
}
.rv-dropdown-clear {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 11.5px;
	font-weight: 500;
	color: var(--rv-ink-3);
	text-decoration: none;
	transition: color var(--rv-dur) var(--rv-ease);
}
.rv-dropdown-clear:hover { color: var(--rv-danger); }
.rv-dropdown-clear::before {
	content: '✕';
	font-size: 9px;
}

/* ── Price Dropdown ──────────────────────────── */
.rv-price-dropdown { min-width: 280px; }

/* Quick range pills */
.rv-price-ranges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 12px 14px 10px;
	border-bottom: 1px solid var(--rv-cream-dark);
}
.rv-price-pill {
	padding: 4px 12px;
	border: 1.5px solid var(--rv-sand);
	border-radius: var(--rv-radius-pill);
	font-family: var(--rv-font);
	font-size: 12px;
	font-weight: 500;
	background: var(--rv-white);
	color: var(--rv-ink-2);
	cursor: pointer;
	transition:
		border-color var(--rv-dur) var(--rv-ease),
		background   var(--rv-dur) var(--rv-ease),
		color        var(--rv-dur) var(--rv-ease),
		box-shadow   var(--rv-dur) var(--rv-ease);
}
.rv-price-pill:hover {
	border-color: var(--rv-wine);
	color: var(--rv-wine);
	background: var(--rv-wine-alpha);
}
.rv-price-pill.active {
	border-color: var(--rv-wine);
	background: var(--rv-wine);
	color: var(--rv-white);
	box-shadow: 0 2px 8px rgba(153,13,35,.25);
}

/* Slider wrapper */
.rv-price-slider-wrap { padding: 14px 16px 10px; }

/* Dual range track */
.rv-slider-track {
	position: relative;
	height: 4px;
	background: var(--rv-sand);
	border-radius: 2px;
	margin: 20px 0 10px;
}
.rv-slider-fill {
	position: absolute;
	height: 100%;
	background: var(--rv-wine);
	border-radius: 2px;
	pointer-events: none;
}
.rv-slider-track input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	position: absolute;
	top: -8px;
	left: 0;
	width: 100%;
	height: 20px;
	background: transparent;
	pointer-events: none;
}
.rv-slider-track input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--rv-white);
	border: 2.5px solid var(--rv-wine);
	cursor: pointer;
	pointer-events: all;
	box-shadow: 0 1px 5px rgba(30,26,23,.2);
	transition: box-shadow var(--rv-dur) var(--rv-ease), transform var(--rv-dur) var(--rv-ease);
}
.rv-slider-track input[type="range"]::-webkit-slider-thumb:hover,
.rv-slider-track input[type="range"]:active::-webkit-slider-thumb {
	box-shadow: 0 0 0 5px var(--rv-wine-alpha), 0 2px 8px rgba(30,26,23,.2);
	transform: scale(1.1);
}
.rv-slider-track input[type="range"]::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--rv-white);
	border: 2.5px solid var(--rv-wine);
	cursor: pointer;
	pointer-events: all;
	box-shadow: 0 1px 5px rgba(30,26,23,.2);
}

/* Price inputs row */
.rv-price-inputs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
}
.rv-price-inputs input[type="text"] {
	flex: 1;
	padding: 6px 8px;
	border: 1.5px solid var(--rv-sand);
	border-radius: var(--rv-radius-sm);
	font-family: var(--rv-font);
	font-size: 12px;
	text-align: center;
	background: var(--rv-cream);
	color: var(--rv-ink);
	transition: border-color var(--rv-dur) var(--rv-ease);
}
.rv-price-inputs input[type="text"]:focus {
	outline: none;
	border-color: var(--rv-wine);
}
.rv-price-inputs span {
	flex-shrink: 0;
	color: var(--rv-ink-3);
	font-size: 13px;
}
#rv-price-apply {
	flex-shrink: 0;
	padding: 6px 14px;
	background: var(--rv-wine);
	color: var(--rv-white);
	border: none;
	border-radius: var(--rv-radius-sm);
	font-family: var(--rv-font);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background var(--rv-dur) var(--rv-ease), box-shadow var(--rv-dur) var(--rv-ease);
}
#rv-price-apply:hover {
	background: var(--rv-wine-dark);
	box-shadow: 0 2px 8px rgba(153,13,35,.3);
}

/* ── Clear All button ────────────────────────── */
.rv-clear-all {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border: 1.5px solid transparent;
	border-radius: var(--rv-radius-pill);
	background: var(--rv-cream-dark);
	color: var(--rv-danger);
	font-family: var(--rv-font);
	font-size: 12.5px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background  var(--rv-dur) var(--rv-ease),
		border-color var(--rv-dur) var(--rv-ease),
		color       var(--rv-dur) var(--rv-ease),
		box-shadow  var(--rv-dur) var(--rv-ease);
}
.rv-clear-all:hover {
	background: var(--rv-danger);
	border-color: var(--rv-danger);
	color: var(--rv-white);
	box-shadow: 0 2px 8px rgba(214,60,60,.3);
}

/* ── Loading Overlay ─────────────────────────── */
.rv-loading-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(251,248,238,.7);
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	z-index: 99998;
	align-items: center;
	justify-content: center;
}
.rv-loading-overlay.is-loading { display: flex; }

.rv-spinner {
	width: 44px;
	height: 44px;
	border: 3.5px solid var(--rv-sand);
	border-top-color: var(--rv-wine);
	border-radius: 50%;
	animation: rv-spin .75s linear infinite;
	box-shadow: var(--rv-shadow-sm);
}
@keyframes rv-spin { to { transform: rotate(360deg); } }

/* ── No Results ──────────────────────────────── */
.rv-no-results {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 48px 20px;
	color: var(--rv-ink-3);
	font-size: 14px;
	text-align: center;
}
.rv-no-results::before {
	content: '🍷';
	font-size: 36px;
	filter: grayscale(1) opacity(.4);
}

/* ── Active filter chips (below bar) ─────────── */
.rv-active-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: -16px 0 16px;
}
.rv-chip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px 3px 12px;
	background: var(--rv-wine-light);
	border: 1px solid rgba(153,13,35,.18);
	border-radius: var(--rv-radius-pill);
	font-size: 12px;
	font-weight: 500;
	color: var(--rv-wine);
}
.rv-chip-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	border: none;
	background: rgba(153,13,35,.15);
	border-radius: 50%;
	color: var(--rv-wine);
	font-size: 9px;
	cursor: pointer;
	transition: background var(--rv-dur) var(--rv-ease);
}
.rv-chip-remove:hover { background: var(--rv-wine); color: var(--rv-white); }

/* ── Responsive ──────────────────────────────── */
@media (max-width: 900px) {
	.rv-search-field { width: 120px; }
}

@media (max-width: 640px) {
	.rv-filter-bar    { padding: 8px 10px; }
	.rv-filter-inner  { gap: 6px; }
	.rv-search-field  { width: 90px; font-size: 12px; }
	.rv-search-btn span { display: none; }
	.rv-search-btn    { padding: 0 12px; }
	.rv-filter-btn    { padding: 5px 11px; font-size: 12px; gap: 5px; }

	/* Backdrop – element riêng do JS thêm vào */
	#rv-mobile-backdrop {
		position: fixed;
		inset: 0;
		background: rgba(0,0,0,.4);
		z-index: 9998;
	}

	/* Dropdown slide lên từ dưới */
	.rv-filter-dropdown {
		position: fixed !important;
		top: auto !important;
		bottom: 0 !important;
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0 !important;
		max-height: 75vh !important;
		overflow-y: auto !important;
		border-radius: 16px 16px 0 0 !important;
		border-bottom: none !important;
		box-shadow: 0 -4px 24px rgba(0,0,0,.18) !important;
		z-index: 9999 !important;

		/* opacity override từ desktop */
		opacity: 1 !important;
		/* bắt đầu ở dưới */
		transform: translateY(100%) !important;
		transition: transform .3s ease !important;
	}
	.rv-filter-dropdown.is-open {
		display: block !important;
		transform: translateY(0) !important;
	}

	.rv-checkbox-list { max-height: none; }

	.rv-filter-dropdown.rv-cols-2 .rv-checkbox-list,
	.rv-filter-dropdown.rv-cols-3 .rv-checkbox-list {
		column-count: 2;
	}
}