/* Grid */
.tcb-grid {
	display: grid;
	gap: 20px;
	align-items: stretch !important;
	transition: opacity 0.3s ease;
}

.tcb-cols-1 {
	grid-template-columns: repeat(1, minmax(0, 1fr));
}

.tcb-cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tcb-cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tcb-cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.tcb-cols-5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tcb-cols-6 {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}


/* Card */
.tcb-card {
	background: #000;
	border-radius: 0px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.tcb-media {
	position: relative;
}

.tcb-media-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.tcb-grid .tcb-card .tcb-media-link .tcb-media img {
	height: 200px;
	width: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform 250ms ease;
	transform: scale(1);
}

.tcb-grid .tcb-card .tcb-media-link .tcb-media {
	overflow: hidden;
}

.tcb-grid .tcb-card .tcb-media-link:hover .tcb-media img,
.tcb-grid .tcb-card .tcb-media-link:focus-visible .tcb-media img {
	transform: scale(1.05);
}

.tcb-no-thumb {
	height: 200px;
	width: 100%;
	background: #111;
}


/* Review */
.tcb-review-overlay {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 50;
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}

.tcb-review-overlay * {
	box-sizing: border-box;
}

.tcb-review-overlay .review-description,
.tcb-review-overlay .meta-bold,
.tcb-review-overlay .review-score,
.tcb-review-overlay .review-rating,
.tcb-review-overlay .review-element {
	position: static !important;
	margin: 0;
}

.tcb-review-overlay .rline-wrap {
	display: none !important;
}


/* Content */
.tcb-content {
	padding: 14px;
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}

.tcb-title {
	margin: 0 0 20px 0;
	font-size: 23px;
	line-height: 1.3;
	color: #fff;
}

.tcb-meta {
	margin-top: auto;
	font-size: 13px;
	line-height: 1.2;
	color: #fff;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: nowrap;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.tcb-dot {
	opacity: .7;
	font-size: 7px;
}

.tcb-card .p-url {
	transition: var(--effect, 250ms ease);
	text-decoration-line: underline;
	text-decoration-thickness: .1em;
	text-underline-offset: min(4px, 0.125em);
	text-decoration-color: #fff0;
	-moz-text-decoration-color: #fff0;
	-webkit-text-decoration-color: #fff0;
	color: inherit;
}

.tcb-card .tcb-author .p-url {
	color: #fff;
	text-decoration-line: underline;
	text-decoration-thickness: .1em;
	text-underline-offset: min(4px, 0.125em);
	text-decoration-color: #fff0;
	-moz-text-decoration-color: #fff0;
	-webkit-text-decoration-color: #fff0;
	transition: var(--effect, 250ms ease);
}

.tcb-card .tcb-author .p-url:hover,
.tcb-card .tcb-author .p-url:focus-visible {
	color: #fff;
	background: none;
	text-decoration-color: #fff;
	-moz-text-decoration-color: #fff;
	-webkit-text-decoration-color: #fff;
}

.tcb-card .p-url:hover,
.tcb-card .p-url:focus-visible {
	text-decoration-color: var(--title-hcolor, #fff);
	-moz-text-decoration-color: var(--title-hcolor, #fff);
	-webkit-text-decoration-color: var(--title-hcolor, #fff);
}


/* Wrapper / Load More */
.tcb-wrapper {
	margin-bottom: 30px;
}

.tcb-load-more-wrapper {
	display: flex;
	justify-content: center;
	margin-top: 30px;
}

.tcb-load-more-btn {
	background-color: #000;
	color: #fff;
	border: 0;
	min-width: 150px;
	height: 40px;
	padding: 0 28px;
	font-size: 13px;
	font-weight: 800;
	line-height: 40px;
	text-align: center;
	cursor: pointer;
	border-radius: 8px;
	transition: background-color 250ms ease, color 250ms ease, transform 250ms ease;
	font-family: inherit;
}

.tcb-load-more-btn:hover,
.tcb-load-more-btn:focus-visible {
	background-color: #f84103;
	color: #fff;
	outline: none;
}

.tcb-load-more-btn:active {
	transform: translateY(1px);
}

.tcb-load-more-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}


/* Filter Bar UI */
.tcb-filter-bar {
	background-color: #000;
	padding: 12px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 25px;
	border-radius: 4px;
	flex-wrap: wrap;
}

.tcb-filter-left,
.tcb-filter-right {
	display: flex;
	align-items: center;
	gap: 15px;
	flex-wrap: wrap;
}

.tcb-filter-right {
	margin-left: auto;
}

.tcb-filter-label {
	color: #ffffff;
	font-size: 15px;
	font-weight: 500;
}


/* Dropdowns */
.tcb-select,
.tcb-sort-select,
.tcb-cat-select,
.tcb-testtype-select {
	background-color: #ffffff !important;
	background: #ffffff !important;
	color: #000000 !important;
	border: 1px solid #ddd !important;
	padding: 8px 35px 8px 12px;
	font-size: 14px;
	border-radius: 3px;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23f84103%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 10px top 50% !important;
	background-size: 12px auto !important;
	cursor: pointer;
	min-width: 180px;
	color-scheme: light;
	-webkit-text-fill-color: #000000 !important;
}

.tcb-select option,
.tcb-sort-select option,
.tcb-cat-select option,
.tcb-testtype-select option {
	background-color: #ffffff !important;
	background: #ffffff !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}


/* Search */
.tcb-search-input {
	background-color: #ffffff !important;
	background: #ffffff !important;
	color: #000000 !important;
	border: 1px solid #ddd !important;
	padding: 8px 12px;
	font-size: 14px;
	border-radius: 3px;
	min-width: 240px;
	font-family: inherit;
	color-scheme: light;
	-webkit-text-fill-color: #000000 !important;
}

.tcb-search-input::placeholder {
	color: #666666 !important;
	opacity: 1 !important;
	-webkit-text-fill-color: #666666 !important;
}


/* Focus */
.tcb-select:focus,
.tcb-sort-select:focus,
.tcb-cat-select:focus,
.tcb-testtype-select:focus,
.tcb-search-input:focus {
	background-color: #ffffff !important;
	background: #ffffff !important;
	color: #000000 !important;
	border-color: #f84103 !important;
	outline: 2px solid #f84103;
	-webkit-text-fill-color: #000000 !important;
}


/* Extra Darkmode Overrides */
html.dark .tcb-select,
html.dark .tcb-sort-select,
html.dark .tcb-cat-select,
html.dark .tcb-testtype-select,
html.dark .tcb-search-input,
body.dark .tcb-select,
body.dark .tcb-sort-select,
body.dark .tcb-cat-select,
body.dark .tcb-testtype-select,
body.dark .tcb-search-input,
[data-theme="dark"] .tcb-select,
[data-theme="dark"] .tcb-sort-select,
[data-theme="dark"] .tcb-cat-select,
[data-theme="dark"] .tcb-testtype-select,
[data-theme="dark"] .tcb-search-input,
.dark-mode .tcb-select,
.dark-mode .tcb-sort-select,
.dark-mode .tcb-cat-select,
.dark-mode .tcb-testtype-select,
.dark-mode .tcb-search-input,
.is-dark-mode .tcb-select,
.is-dark-mode .tcb-sort-select,
.is-dark-mode .tcb-cat-select,
.is-dark-mode .tcb-testtype-select,
.is-dark-mode .tcb-search-input {
	background-color: #ffffff !important;
	background: #ffffff !important;
	color: #000000 !important;
	border-color: #ddd !important;
	color-scheme: light;
	-webkit-text-fill-color: #000000 !important;
}

html.dark .tcb-select option,
html.dark .tcb-sort-select option,
html.dark .tcb-cat-select option,
html.dark .tcb-testtype-select option,
body.dark .tcb-select option,
body.dark .tcb-sort-select option,
body.dark .tcb-cat-select option,
body.dark .tcb-testtype-select option,
[data-theme="dark"] .tcb-select option,
[data-theme="dark"] .tcb-sort-select option,
[data-theme="dark"] .tcb-cat-select option,
[data-theme="dark"] .tcb-testtype-select option,
.dark-mode .tcb-select option,
.dark-mode .tcb-sort-select option,
.dark-mode .tcb-cat-select option,
.dark-mode .tcb-testtype-select option,
.is-dark-mode .tcb-select option,
.is-dark-mode .tcb-sort-select option,
.is-dark-mode .tcb-cat-select option,
.is-dark-mode .tcb-testtype-select option {
	background-color: #ffffff !important;
	background: #ffffff !important;
	color: #000000 !important;
	-webkit-text-fill-color: #000000 !important;
}


/* Buttons */
.tcb-filter-go,
.tcb-search-go {
	background-color: #f84103;
	color: #ffffff;
	border: none;
	padding: 8px 18px;
	font-size: 14px;
	font-weight: 700;
	border-radius: 3px;
	cursor: pointer;
	transition: background-color 250ms ease, opacity 250ms ease;
	font-family: inherit;
}

.tcb-filter-go:hover,
.tcb-filter-go:focus-visible,
.tcb-search-go:hover,
.tcb-search-go:focus-visible {
	background-color: #f84103;
	color: #ffffff;
	outline: none;
}

.tcb-filter-go:disabled,
.tcb-search-go:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.tcb-empty,
.tcb-error {
	color: #fff;
}


/* Responsive */
@media (max-width: 600px) {
	.tcb-grid {
		grid-template-columns: 1fr !important;
	}

	.tcb-card {
		min-height: 320px;
	}

	.tcb-title {
		font-size: 17px;
	}

	.tcb-grid .tcb-card .tcb-media-link .tcb-media img {
		height: 220px;
		object-fit: cover;
		object-position: center top;
	}

	.tcb-no-thumb {
		height: 220px;
	}

	.tcb-filter-bar {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}

	.tcb-filter-left,
	.tcb-filter-right {
		width: 100%;
		margin-left: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
	}

	.tcb-select,
	.tcb-sort-select,
	.tcb-cat-select,
	.tcb-testtype-select,
	.tcb-search-input,
	.tcb-filter-go,
	.tcb-search-go {
		width: 100%;
		min-width: 0;
	}
}