/* --- Trending Filters Layout --- */
.rpls-trending-filters-wrapper {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
}

.rpls-trending-header {
	display: flex;
	align-items: center;
	gap: 8px;
}

.rpls-trending-icon {
	display: none; /* Hidden on desktop by default */
}

.rpls-trending-buttons-scroll-wrapper {
	position: relative; /* Ensures peek-a-boo gradient is positioned correctly */
	flex: 1; /* Allow it to take up available space */
	min-width: 0; /* This is the key fix for mobile visibility */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none;  /* IE and Edge */
}

.rpls-trending-controls {
	display: flex;
	flex: 1;
	min-width: 0;
	align-items: center;
	gap: 10px;
}
.rpls-trending-buttons-scroll-wrapper::-webkit-scrollbar {
	display: none; /* Chrome, Safari, and Opera */
}
.rpls-advanced-toggle-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	padding: 6px;
	color: #ffffff;
	background-color: #2d3748;
	border: 1px solid #2d3748;
	border-radius: 50%;
	flex-shrink: 0;
	transition: background-color 0.2s ease;
	font-size: 16px; /* Control Font Awesome icon size */
}
.rpls-advanced-toggle-button:hover { background-color: #4a5568; border-color: #4a5568; }
.rpls-advanced-toggle-button i { line-height: 1; }
.rpls-comments-toggle-button { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: #50575e; padding: 4px; border-radius: 4px; font-size: 14px; }
.rpls-comments-toggle-button:hover, .rpls-comments-toggle-button.is-active { background-color: #f0f0f1; }
.rpls-comments-wrapper { display: none; padding: 15px; border-top: 1px solid #e0e0e0; margin-top: 15px; }
.rpls-comment-list { max-height: 400px; overflow-y: auto; list-style: none; margin: 0 0 20px 0; padding: 0; border: 1px solid #e0e0e0; border-radius: 4px; }
.rpls-comment-item { padding: 10px 15px; border-bottom: 1px solid #f0f0f1; }
.rpls-comment-item:last-child { border-bottom: none; }
.rpls-comment-meta { font-size: 13px; margin-bottom: 5px; }
.rpls-comment-author { font-weight: bold; }
.rpls-comment-date { color: #777; }
.rpls-comment-content { font-size: 14px; line-height: 1.6; }
.rpls-comment-content p { margin: 0; }
.rpls-no-comments { margin-bottom: 20px; font-style: italic; color: #777; }
.comment-form label { display: block; margin-bottom: 5px; font-weight: bold; }
.comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px; margin-bottom: 10px; }
.comment-form .form-submit .submit { background-color: #2271b1; color: #fff; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; }
.comment-form .form-submit .submit:hover { background-color: #1e639a; }

@media (max-width: 767px) {
	.rpls-trending-filters-wrapper {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px; /* Space between the header and the controls */
	}
	.rpls-trending-header {
		font-weight: bold;
	}
	.rpls-trending-icon {
		display: inline-block; /* Show the lightning bolt icon */
	}
	.rpls-trending-controls {
		width: 100%; /* Make the controls take the full width */
	}
}

/* --- Clear Filter Icon for Trending Buttons --- */
.rpls-trending-button {
	position: relative; /* Context for the absolutely positioned icon */
	transition: padding-right 0.2s ease-in-out; /* Smooth transition for padding change */
}

.rpls-trending-button.is-active {
	padding-right: 28px; /* Add space for the 'x' icon when active */
}

.rpls-clear-filter-icon {
	display: none; /* Hidden by default */
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	font-size: 12px;
	line-height: 1;
	color: #ffffff; /* Match the active/hover text color */
}

.rpls-trending-button.is-active .rpls-clear-filter-icon {
	display: inline-block; /* Show the icon when the button is active */
}

/* --- Advanced Filter Actions --- */
.rpls-advanced-filter-actions {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-top: 20px;
}

.rpls-clear-all-filters-button {
	background: none;
	border: none;
	padding: 0;
	font-size: 14px;
	color: #50575e;
	cursor: pointer;
	text-decoration: none;
	transition: color 0.2s;
}
.rpls-clear-all-filters-button:hover {
	color: #1d2327;
	text-decoration: underline;
}

/* --- "All" Button Specific Styles --- */
.rpls-accordion-filters .rpls-trending-button.rpls-trending-all-button.is-active,
.rpls-accordion-filters .rpls-trending-button.rpls-trending-all-button:hover {
	background-color: #ed1c24;
	border-color: transparent;
}

.rpls-accordion-filters .rpls-trending-button.rpls-trending-all-button.is-active .rpls-term-name,
.rpls-accordion-filters .rpls-trending-button.rpls-trending-all-button:hover .rpls-term-name {
	color: #ffffff;
}