/*
Theme Name: British Baddies
Theme URI: https://britishbaddies.com
Author: BritishBaddies
Description: A clean, media-first theme built for the Creator Video Directory plugin — designed to showcase video/image directory entries in a card grid, with a simple dark header and light content area for readability.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: britishbaddies
*/

:root {
	--bb-bg: #f6f6f8;
	--bb-header-bg: #14141a;
	--bb-header-text: #ffffff;
	--bb-accent: #e63950;
	--bb-card-bg: #ffffff;
	--bb-text: #1c1c1e;
	--bb-muted: #6b6b70;
	--bb-radius: 10px;
	--bb-max-width: 1200px;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--bb-bg);
	color: var(--bb-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.6;
}

a { color: var(--bb-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

.bb-container {
	max-width: var(--bb-max-width);
	margin: 0 auto;
	padding: 0 20px;
}

/* Header */
.bb-site-header {
	background: var(--bb-header-bg);
	color: var(--bb-header-text);
	padding: 18px 0;
}

.bb-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}

.bb-site-title {
	font-size: 22px;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.5px;
	display: flex;
	align-items: center;
	background: #ffffff;
	padding: 6px 12px;
	border-radius: 8px;
}

.bb-site-title a {
	color: var(--bb-header-text);
	text-decoration: none;
}

.bb-site-title img {
	display: block;
	height: 56px;
	width: auto;
	max-width: 280px;
	object-fit: contain;
}

.bb-nav ul {
	list-style: none;
	display: flex;
	gap: 22px;
	margin: 0;
	padding: 0;
}

.bb-nav a {
	color: #e8e8ea;
	font-size: 15px;
}

.bb-nav a:hover { color: #fff; }

/* Main content wrapper */
.bb-content {
	padding: 36px 0 60px;
}

.bb-page-title {
	font-size: 28px;
	margin-bottom: 20px;
}

/* Single entry / post */
.bb-entry-header {
	margin-bottom: 20px;
}

.bb-entry-meta {
	color: var(--bb-muted);
	font-size: 13px;
	margin-bottom: 20px;
}

.bb-entry-content {
	background: var(--bb-card-bg);
	border-radius: var(--bb-radius);
	padding: 24px;
	box-shadow: 0 1px 6px rgba(0,0,0,0.06);
}

/* Blog / archive list (non-directory posts) */
.bb-post-list article {
	background: var(--bb-card-bg);
	border-radius: var(--bb-radius);
	padding: 20px;
	margin-bottom: 18px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.bb-post-list h2 {
	margin-top: 0;
	font-size: 20px;
}

/* Footer */
.bb-site-footer {
	background: var(--bb-header-bg);
	color: #c9c9cd;
	padding: 26px 0;
	font-size: 13px;
	text-align: center;
	margin-top: 40px;
}

.bb-site-footer a { color: #fff; }

/* Pagination (theme-level, distinct from plugin's cvd-pagination) */
.bb-pagination {
	margin-top: 30px;
	display: flex;
	gap: 8px;
}

.bb-pagination a, .bb-pagination span {
	padding: 8px 14px;
	border-radius: 6px;
	background: var(--bb-card-bg);
	box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* Responsive nav collapse */
@media (max-width: 640px) {
	.bb-header-inner { flex-direction: column; align-items: flex-start; }
	.bb-nav ul { flex-wrap: wrap; gap: 14px; }
}

/* ==========================================================
   Front page layout: top search bar + shorts
   ========================================================== */

.bb-front-shell {
	min-height: 100vh;
}

.bb-front-main {
	width: 100%;
}

.bb-topbar {
	background: #fff;
	border-bottom: 1px solid #e6e6e9;
	padding: 28px 0;
}

.bb-topbar-inner {
	display: flex;
	align-items: center;
	gap: 40px;
	padding: 0 48px;
}

.bb-topbar .bb-site-title {
	font-size: 40px;
	margin: 0;
	white-space: nowrap;
	display: flex;
	align-items: center;
	background: #ffffff;
	padding: 8px 14px;
	border-radius: 8px;
}

.bb-topbar .bb-site-title a {
	color: var(--bb-text);
}

.bb-topbar .bb-site-title img {
	display: block;
	height: 64px;
	width: auto;
	max-width: 340px;
	object-fit: contain;
}

.bb-search-form {
	flex: 1;
	max-width: 960px;
	display: flex;
	background: #f2f2f4;
	border-radius: 8px;
	overflow: hidden;
}

.bb-search-input {
	flex: 1;
	border: 0;
	background: transparent;
	padding: 20px 28px;
	font-size: 28px;
	outline: none;
}

.bb-search-btn {
	border: 0;
	background: transparent;
	padding: 0 28px;
	font-size: 26px;
	cursor: pointer;
}

.bb-topbar-actions {
	display: flex;
	align-items: center;
	gap: 20px;
	white-space: nowrap;
}

.bb-upload-btn {
	padding: 16px 32px;
	border-radius: 999px;
	background: #c8102e;
	color: #fff;
	font-size: 26px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
}

.bb-upload-btn:hover {
	background: #a50d26;
	color: #fff;
	text-decoration: none;
}

.bb-avatar-btn {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #d5d5d9;
	flex-shrink: 0;
}

.bb-avatar-btn img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-avatar-placeholder {
	font-size: 28px;
	color: #6b6b70;
}

.bb-btn {
	padding: 18px 32px;
	border-radius: 8px;
	font-size: 28px;
	font-weight: 600;
}

.bb-btn-outline {
	border: 1px solid #d5d5d9;
	color: var(--bb-text);
}

.bb-btn-link {
	color: var(--bb-text);
	font-size: 28px;
}

.bb-front-content {
	padding: 28px 48px 120px;
}

@media (max-width: 700px) {
	.bb-front-content {
		padding: 16px 16px 80px;
	}
}

.bb-section-title {
	font-size: 36px;
	margin: 0 0 28px;
}

/* Top nav tabs (6 clickable buttons above Shorts) */
.bb-top-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	margin-bottom: 40px;
}

.bb-tab {
	flex: 1;
	text-align: center;
	padding: 14px 12px;
	border-radius: 999px;
	background: #eceef0;
	color: var(--bb-text);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.bb-tab:hover {
	background: #e0e0e3;
	text-decoration: none;
}

.bb-tab-active {
	background: #eceef0;
	color: #1c1c1e;
}

.bb-tab-active:hover {
	background: #1c1c1e;
}

/* Shorts row */
.bb-shorts-section {
	margin-bottom: 20px;
}

.bb-shorts-row {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 28px;
	padding-bottom: 12px;
}

.bb-short-card {
	flex: 0 0 auto;
	width: 210px;
	text-decoration: none;
	color: var(--bb-text);
}

.bb-short-thumb {
	position: relative;
	width: 210px;
	height: 340px;
	border-radius: 10px;
	overflow: hidden;
	background: linear-gradient(135deg,#333,#111);
	display: flex;
	align-items: center;
	justify-content: center;
}

.bb-short-thumb img,
.bb-short-thumb video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.bb-play-icon {
	position: absolute;
	color: #fff;
	font-size: 44px;
	text-shadow: 0 0 6px rgba(0,0,0,.6);
}

/* Filter pills */
.bb-filter-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-bottom: 48px;
}

.bb-pill {
	padding: 16px 32px;
	border-radius: 999px;
	background: #eceef0;
	color: var(--bb-text);
	font-size: 28px;
	text-decoration: none;
}

.bb-pill-active {
	background: #1c1c1e;
	color: #fff;
}

.bb-pill-placeholder {
	opacity: 0.55;
}

@media (max-width: 700px) {
	.bb-topbar { padding: 14px 0; }
	.bb-scroll-hide-topbar .bb-topbar {
		position: sticky;
		top: 0;
		z-index: 50;
		transition: transform 0.5s ease;
	}
	.bb-scroll-hide-topbar .bb-topbar.bb-topbar-hidden {
		transform: translateY(-100%);
		transition: transform 0.25s ease;
	}
	.bb-topbar-inner {
		flex-wrap: wrap;
		gap: 12px;
		padding: 0 16px;
	}
	.bb-topbar .bb-site-title {
		font-size: 20px;
	}
	.bb-topbar .custom-logo {
		max-height: 32px;
		width: auto;
	}
	.bb-search-form {
		order: 3;
		max-width: 100%;
		flex-basis: 100%;
	}
	.bb-search-input {
		padding: 10px 14px;
		font-size: 15px;
	}
	.bb-search-btn {
		padding: 0 14px;
		font-size: 16px;
	}
	.bb-topbar-actions {
		gap: 10px;
	}
	.bb-upload-btn {
		padding: 8px 16px;
		font-size: 13px;
	}
	.bb-avatar-btn {
		width: 34px;
		height: 34px;
	}

	/* Shorts row: horizontal scroll on phones instead of wrapping
	   onto multiple lines, matching a native shorts-carousel feel. */
	.bb-shorts-row {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		gap: 10px;
		padding-left: 16px;
		padding-right: 16px;
		scroll-snap-type: x proximity;
	}
	.bb-short-card {
		flex: 0 0 auto;
		width: 92px;
		scroll-snap-align: start;
	}
	.bb-short-thumb {
		width: 92px;
		height: 149px;
	}
	.bb-shorts-section {
		margin-left: -16px;
		margin-right: -16px;
	}
}

/* ==========================================================
   Photo gallery grid (Photo Gallery template) — row-based left-to-
   right ordering: image 1,2,3,4 on row one, 5,6,7,8 on row two, etc.
   Each row's height adapts to its tallest item, but items still flow
   in strict document order (unlike CSS columns, which fill top-to-
   bottom within a column first).
   ========================================================== */

.bb-masonry {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 8px;
	column-gap: 12px;
}

.bb-masonry-item {
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	align-self: start;
}

.bb-masonry-item img,
.bb-masonry-item video {
	width: 100%;
	height: auto;
	max-height: 600px;
	min-height: 120px;
	object-fit: cover;
	object-position: center;
	display: block;
}

.bb-ad-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 220px;
	background: #eceef0;
	border: 2px dashed #c7c7cc;
	color: #6b6b70;
	font-weight: 700;
	font-size: 18px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

@media (max-width: 780px) {
	.bb-masonry { grid-template-columns: repeat(2, 1fr); }
}

/* Shorts tab on the profile page — doubled columns so each tile
   renders at roughly half the size of the other tabs' tiles. */
.bb-masonry-shorts {
	grid-template-columns: repeat(8, 1fr);
}

@media (max-width: 780px) {
	.bb-masonry-shorts { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 480px) {
	.bb-masonry-shorts { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================
   Photos page: search / sort / tags sidebar
   ========================================================== */

.bb-photos-layout {
	display: flex;
	gap: 32px;
	align-items: flex-start;
}

.bb-photos-main {
	flex: 1;
	min-width: 0;
}

.bb-photos-sidebar {
	flex: 0 0 260px;
	position: sticky;
	top: 20px;
}

.bb-sidebar-heading {
	font-weight: 700;
	font-size: 14px;
	margin: 0 0 8px;
}

.bb-photo-sort {
	background: #fff;
	border-radius: 10px;
	padding: 16px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
	margin-bottom: 20px;
	display: flex;
	flex-direction: column;
}

.bb-sort-link {
	padding: 8px 4px;
	color: #1c1c1e;
	text-decoration: none;
	font-size: 14px;
	border-radius: 6px;
}

.bb-sort-link:hover {
	background: #f2f2f4;
}

.bb-sort-link-active {
	font-weight: 700;
	color: #c8102e;
}

.bb-photo-tags {
	background: #fff;
	border-radius: 10px;
	padding: 16px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.bb-photo-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.bb-tag-pill {
	padding: 6px 12px;
	border-radius: 999px;
	background: #eceef0;
	color: #1c1c1e;
	font-size: 13px;
	text-decoration: none;
}

.bb-tag-pill:hover {
	background: #e0e0e3;
}

.bb-tag-pill-active {
	background: #1c1c1e;
	color: #fff;
}

@media (max-width: 900px) {
	.bb-photos-layout {
		flex-direction: column;
	}
	.bb-photos-sidebar {
		flex: 1;
		width: 100%;
		position: static;
	}
}

/* Header row: page title + inline element (back link, search bar) on same line */
.bb-page-header-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 20px;
}

.bb-page-header-row .bb-page-title {
	margin: 0;
}

.bb-page-header-row .bb-search-form {
	max-width: 340px;
}

.bb-photos-header-row {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 20px;
}

.bb-photos-header-row .bb-page-title {
	margin: 0;
}

.bb-photos-header-row .bb-search-form {
	max-width: 340px;
}

/* Photos page: chip-based tag search input in the header row */
.bb-photo-search-form {
	position: relative;
	align-items: center;
	flex-wrap: nowrap;
	gap: 6px;
	padding: 4px 6px;
}

.bb-photo-search-form .bb-search-input {
	padding: 8px 10px;
	font-size: 14px;
}

.bb-photo-search-form .bb-search-btn {
	padding: 0 10px;
	font-size: 15px;
	flex-shrink: 0;
}

.bb-photo-search-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	flex-shrink: 0;
}

.bb-photo-search-chips .cvd-tag-chip {
	background: #fff;
}

.bb-photo-search-suggestions {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #fff;
	border: 1px solid #d5d5d9;
	border-radius: 0 0 8px 8px;
	z-index: 30;
	max-height: 180px;
	overflow-y: auto;
}

/* Photos page: hover overlay on each tile (title, author, upload count) */
.bb-photo-tile {
	position: relative;
	display: block;
	text-decoration: none;
	color: inherit;
}

.bb-photo-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 10px;
	background: linear-gradient(to bottom, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.65) 100%);
	opacity: 0;
	transition: opacity 0.15s ease;
}

.bb-photo-tile:hover .bb-photo-overlay {
	opacity: 1;
}

.bb-photo-overlay-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.bb-photo-view-count {
	color: #fff;
	font-weight: 700;
	font-size: 13px;
}

.bb-photo-upload-count {
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	background: rgba(0,0,0,0.35);
	padding: 3px 8px;
	border-radius: 999px;
}

.bb-photo-overlay-bottom {
	color: #fff;
	margin-top: auto;
}

.bb-photo-overlay-title {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.bb-photo-overlay-author {
	display: flex;
	align-items: center;
	gap: 8px;
}

.bb-photo-overlay-author img {
	width: 32px;
	height: 32px;
	min-height: 32px;
	max-height: 32px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

.bb-photo-author-name {
	font-size: 13px;
	font-weight: 600;
}

.bb-photo-tile:hover .bb-photo-author-name {
	text-decoration: underline;
}

/* Author/profile page header */
.bb-profile-header {
	display: flex;
	align-items: center;
	gap: 24px;
	margin-bottom: 32px;
}

.bb-profile-header img {
	border-radius: 50%;
	flex-shrink: 0;
}

.bb-profile-header-info .bb-page-title {
	margin: 0 0 6px;
}

.bb-profile-meta {
	color: #6b6b70;
	font-size: 14px;
	margin: 0 0 8px;
}

.bb-profile-bio {
	margin: 0;
	font-size: 15px;
	max-width: 600px;
}

/* Profile page tabs (Overview / Videos / Photos / Shorts / Galleries / Subs) */
.bb-profile-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 24px;
	border-bottom: 1px solid #e6e6e9;
	padding-bottom: 12px;
}

.bb-profile-tab {
	padding: 8px 16px;
	border-radius: 999px;
	background: #eceef0;
	color: #1c1c1e;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.bb-profile-tab:hover {
	background: #e0e0e3;
	text-decoration: none;
}

.bb-profile-tab-active {
	background: #1c1c1e;
	color: #fff;
}

/* ==========================================================
   Single entry page: image, title, views/time, author row
   ========================================================== */

.cvd-single-entry {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}

.cvd-entry-top-row {
	display: flex;
	align-items: stretch;
	gap: 16px;
}

.cvd-entry-media {
	min-width: 0;
}

.cvd-media-box {
	width: 948px;
	height: 560px;
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eceef0;
	border-radius: 10px;
	overflow: visible;
	margin-bottom: 0;
}

@media (max-width: 1000px) {
	.cvd-media-box {
		width: 100% !important;
		height: auto !important;
		aspect-ratio: unset !important;
		overflow: visible !important;
	}
}

.cvd-entry-ads {
	flex: 0 0 240px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
	max-height: 560px;
	overflow: hidden;
}

.cvd-ad-slot-wrap:empty {
	display: none;
}

.cvd-entry-info {
	max-width: 1000px;
	margin-top: 4px;
}

@media (max-width: 900px) {
	.cvd-entry-top-row {
		flex-direction: column;
	}
	.cvd-entry-ads {
		flex-direction: row;
		flex: 1;
		width: 100%;
	}
}

.cvd-entry-title {
	font-size: 22px;
	font-weight: 700;
	margin: 4px 0 6px;
	line-height: 1.3;
}

.cvd-entry-stats {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #6b6b70;
	font-size: 14px;
	margin: 0 0 16px;
}

.cvd-stats-dot {
	color: #c7c7cc;
}

.cvd-entry-author-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-top: 1px solid #e6e6e9;
	border-bottom: 1px solid #e6e6e9;
	margin-bottom: 20px;
}

.cvd-entry-author-left {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: inherit;
}

.cvd-entry-author-left img {
	border-radius: 50%;
	display: block;
	width: 44px;
	height: 44px;
	object-fit: cover;
}

.cvd-entry-author-info {
	display: flex;
	flex-direction: column;
	gap: 1px;
	line-height: 1.25;
}

.cvd-entry-author-name {
	font-weight: 700;
	font-size: 15px;
}

.cvd-entry-author-left:hover .cvd-entry-author-name {
	text-decoration: underline;
}

.cvd-entry-sub-count {
	font-size: 12px;
	color: #6b6b70;
}

.cvd-entry-category {
	font-size: 14px;
	color: #6b6b70;
}

/* Like / Share / Report buttons, grouped with Subscribe on the far right */
.cvd-entry-author-group {
	display: flex;
	align-items: center;
	gap: 14px;
}

.cvd-entry-actions-right {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.cvd-engagement-buttons {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cvd-like-btn,
.cvd-share-btn,
.cvd-report-btn {
	padding: 7px 16px;
	border-radius: 999px;
	border: 1px solid #000000;
	background: #f2f2f2;
	color: #000000;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	white-space: nowrap;
}

.cvd-like-btn:hover,
.cvd-share-btn:hover,
.cvd-report-btn:hover {
	background: #f2f2f2;
}

.cvd-like-btn:disabled,
.cvd-report-btn:disabled {
	opacity: 1;
	cursor: default;
}

.cvd-single-entry .bb-top-tabs {
	margin-bottom: 8px;
	flex-wrap: nowrap;
	overflow-x: auto;
}

.cvd-single-entry .bb-top-tabs .bb-tab {
	flex: 1;
	text-align: center;
	padding: 12px 24px;
	font-size: 18px;
	white-space: nowrap;
}

.cvd-entry-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.cvd-entry-row-ads {
	display: flex;
	flex-wrap: nowrap;
	gap: 10px;
	margin-top: 20px;
	overflow-x: auto;
}

/* Related Images / Recommended / Comments tabs on the single entry page */
.cvd-content-tabs {
	display: flex;
	gap: 28px;
	border-bottom: 1px solid #e6e6e9;
	margin: 32px 0 20px;
}

.cvd-content-tab {
	background: none;
	border: none;
	border-bottom: 2px solid transparent;
	padding: 10px 2px;
	font-size: 14px;
	font-weight: 600;
	color: #6b6b70;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}

.cvd-content-tab-active {
	color: #c8102e;
	border-bottom-color: #c8102e;
}

.cvd-comment-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.bb-scroll-row {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 6px;
}

.bb-scroll-tile {
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.bb-show-more-wrap {
	display: flex;
	justify-content: center;
	margin: 24px 0;
}

.bb-show-more-btn {
	padding: 10px 28px;
	border-radius: 999px;
	border: 1px solid #d5d5d9;
	background: #fff;
	color: #1c1c1e;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
}

.bb-show-more-btn:hover {
	background: #f2f2f4;
}

.bb-quick-comment {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 4px;
}

.bb-quick-comment img {
	border-radius: 50%;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
}

.bb-quick-comment-input {
	flex: 1;
	border: 1px solid #e6e6e9;
	border-radius: 999px;
	padding: 10px 16px;
	font-size: 14px;
	color: #1c1c1e;
}

.bb-quick-comment-input:focus {
	outline: none;
	border-color: #c8c8ce;
}

/* Comments tab: sort dropdown + per-comment reactions */
.cvd-comment-sort-row {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 12px;
}

.cvd-comment-sort {
	padding: 6px 12px;
	border-radius: 6px;
	border: 1px solid #d5d5d9;
	font-size: 13px;
	background: #fff;
}

.cvd-comment-list {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
}

.cvd-comment-row {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 14px 0;
	border-bottom: 1px solid #f0f0f2;
}

.cvd-comment-row img {
	border-radius: 50%;
	flex-shrink: 0;
}

.cvd-comment-body {
	flex: 1;
	min-width: 0;
}

.cvd-comment-meta {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 4px;
}

.cvd-comment-author {
	font-weight: 700;
	font-size: 14px;
}

.cvd-comment-date {
	font-size: 12px;
	color: #6b6b70;
}

.cvd-comment-text {
	font-size: 14px;
	line-height: 1.5;
}

.cvd-comment-text p {
	margin: 0;
}

.cvd-comment-reactions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.cvd-comment-like,
.cvd-comment-dislike,
.cvd-comment-report {
	padding: 5px 10px;
	border-radius: 999px;
	border: 1px solid #e6e6e9;
	background: #fff;
	color: #1c1c1e;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.cvd-comment-like.cvd-active,
.cvd-comment-dislike.cvd-active {
	background: #1c1c1e;
	color: #fff;
}

.cvd-comment-report.cvd-reported {
	opacity: 0.6;
	cursor: default;
}

/* Search results page: heading + Type/Sort/Date filter bar */
.bb-search-results-heading {
	margin-bottom: 16px;
}

.bb-search-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e6e6e8;
}

.bb-filter-group {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
}

.bb-filter-label {
	color: #6b6b70;
	font-weight: 600;
}

.bb-filter-group select {
	padding: 8px 12px;
	border-radius: 8px;
	border: 1px solid #d8d8db;
	background: #fff;
	font-size: 14px;
	min-width: 140px;
}

/* Search results grid: same hover-overlay tile style as the Photos
   page, but fixed square tiles in a plain 4-col grid. */
.bb-search-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
}

.bb-search-grid .bb-photo-tile {
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.bb-search-grid .bb-photo-tile > img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

@media (max-width: 780px) {
	.bb-search-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.bb-search-grid { grid-template-columns: 1fr; }
}

/* Standalone Shorts viewer — full-screen "theater" page: plain light
   background, a centered dark portrait video box, close (X) top-left,
   prev/next arrows either side, a right-side icon rail, and creator
   info + title bottom-left inside the box. */
.bb-shorts-viewer-page {
	background: #fafafa;
	margin: 0;
}

.bb-shorts-viewer {
	position: relative;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bb-shorts-close {
	position: absolute;
	top: 24px;
	left: 24px;
	background: none;
	border: none;
	font-size: 30px;
	line-height: 1;
	color: #1c1c1e;
	cursor: pointer;
	z-index: 10;
	padding: 4px;
}

.bb-shorts-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: #eceef0;
	border: none;
	border-radius: 50%;
	width: 44px;
	height: 44px;
	font-size: 22px;
	color: #1c1c1e;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	z-index: 10;
}

.bb-shorts-prev {
	left: 40px;
}

.bb-shorts-next {
	right: 40px;
}

.bb-shorts-nav:disabled {
	opacity: 0.35;
	cursor: default;
}

.bb-shorts-box {
	position: relative;
	width: 450px;
	max-width: 90vw;
	height: 800px;
	max-height: 85vh;
	background: #000;
	border-radius: 14px;
	overflow: hidden;
}

.bb-shorts-media,
.bb-shorts-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: none;
}

.bb-shorts-side-icons {
	position: absolute;
	right: 14px;
	bottom: 110px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	z-index: 5;
}

.bb-shorts-icon-btn {
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	text-decoration: none;
	padding: 0;
}

.bb-shorts-icon {
	font-size: 24px;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.5));
}

.bb-shorts-icon-count.cvd-like-count {
	font-size: 11px;
	font-weight: 600;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.cvd-like-btn.cvd-liked .bb-shorts-icon {
	color: #e0245e;
}

.bb-shorts-icon-count {
	font-size: 11px;
	font-weight: 600;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.bb-shorts-info {
	position: absolute;
	left: 16px;
	right: 70px;
	bottom: 20px;
	color: #fff;
	z-index: 5;
}

.bb-shorts-author-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 10px;
}

.bb-shorts-avatar {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}

.bb-shorts-author-name {
	font-size: 13px;
	font-weight: 700;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

.bb-shorts-title {
	font-size: 14px;
	margin: 0;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}

@media (max-width: 700px) {
	.bb-shorts-nav {
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		margin: 0;
		z-index: 10;
	}
	.bb-shorts-prev { left: 10px; }
	.bb-shorts-next { right: 10px; }
	.bb-shorts-box {
		width: 100%;
		height: 100vh;
		max-height: 100vh;
		border-radius: 0;
	}
}

.bb-shorts-media {
	position: relative;
	cursor: pointer;
}

.bb-shorts-pause-indicator {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(0.8);
	color: #fff;
	font-size: 34px;
	background: rgba(0,0,0,0.4);
	width: 74px;
	height: 74px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease, transform 0.15s ease;
	z-index: 6;
}

.bb-shorts-pause-indicator.bb-shorts-indicator-show {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* Comment dropdown inside the shorts viewer: a small popup card
   anchored near the comment icon, containing the quick-comment input. */
.bb-shorts-comment-dropdown {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30%;
	background: #fff;
	border-radius: 16px 16px 0 0;
	box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
	z-index: 9;
	display: flex;
	flex-direction: column;
}

.bb-shorts-comments-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	border-bottom: 1px solid #ececec;
	flex-shrink: 0;
}

.bb-shorts-comments-back {
	background: none;
	border: none;
	font-size: 18px;
	color: #1c1c1e;
	cursor: pointer;
	padding: 2px;
}

.bb-shorts-comments-title {
	font-size: 16px;
	font-weight: 700;
	color: #1c1c1e;
}

.bb-shorts-comments-kebab {
	font-size: 18px;
	color: #1c1c1e;
	line-height: 1;
}

.bb-shorts-comments-list {
	flex: 1;
	overflow-y: auto;
	padding: 12px 16px;
}

.bb-shorts-no-comments {
	color: #8b8b8f;
	font-size: 13px;
	text-align: center;
	margin-top: 20px;
}

.bb-shorts-comment-item {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 18px;
}

.bb-shorts-comment-item img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	flex-shrink: 0;
	margin-top: 2px;
}

.bb-shorts-comment-body {
	flex: 1;
	min-width: 0;
}

.bb-shorts-comment-meta {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin-bottom: 3px;
}

.bb-shorts-comment-author {
	font-size: 14px;
	font-weight: 700;
	color: #1c1c1e;
}

.bb-shorts-comment-time {
	font-size: 12px;
	color: #9a9a9e;
}

.bb-shorts-comment-text {
	font-size: 14px;
	color: #1c1c1e;
	margin: 0 0 4px;
	line-height: 1.4;
}

.bb-shorts-comment-reply {
	background: none;
	border: none;
	padding: 0;
	font-size: 13px;
	color: #9a9a9e;
	cursor: pointer;
}

.bb-shorts-comment-like {
	flex-shrink: 0;
	padding-top: 2px;
}

.bb-shorts-comment-like .cvd-comment-like {
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	color: #b8b8bc;
	padding: 0;
}

.bb-shorts-comment-like .cvd-comment-like.cvd-active {
	color: #e0245e;
}

.bb-shorts-comment-like .cvd-like-count {
	font-size: 10px;
	color: #9a9a9e;
	display: none;
}

.bb-shorts-comment-like .cvd-like-count:not(:empty) {
	display: block;
}

#bb-shorts-comment-box-slot {
	flex-shrink: 0;
	border-top: 1px solid #ececec;
	padding: 12px 16px;
}

#bb-shorts-comment-box-slot .bb-quick-comment {
	display: flex;
	align-items: center;
	gap: 8px;
}

#bb-shorts-comment-box-slot .bb-quick-comment img {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex-shrink: 0;
}

#bb-shorts-comment-box-slot .bb-quick-comment-input {
	flex: 1;
	border: 1px solid #d8d8db;
	border-radius: 20px;
	padding: 8px 14px;
	font-size: 13px;
	background: #fff;
	color: #1c1c1e;
}

/* "Add Video" tile — first card in the Most Recent grid, same size
   as a normal video card, links straight to the Upload page. */
.cvd-add-video-thumb {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #f5f5f6;
	border: 2px dashed #d0d0d3;
	border-radius: 6px;
	text-decoration: none;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.cvd-add-video-thumb:hover {
	background: #eceef0;
	border-color: #b8b8bc;
}

.cvd-add-video-icon {
	font-size: 40px;
	line-height: 1;
	color: #6b6b70;
	font-weight: 300;
}

.cvd-add-video-label {
	font-size: 14px;
	font-weight: 600;
	color: #6b6b70;
}

/* Sign Up page — centered branded card matching the topbar's red
   Upload button and the site's rounded-pill aesthetic. */
.bb-signup-wrap {
	display: flex;
	justify-content: center;
	padding: 60px 20px;
}

.bb-signup-card {
	width: 100%;
	max-width: 420px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 2px 12px rgba(0,0,0,0.08);
	padding: 32px 28px;
}

.bb-signup-title {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 20px;
	text-align: center;
	color: #1c1c1e;
}

.bb-signup-error {
	background: #fdeceb;
	color: #a50d26;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 14px;
	margin-bottom: 16px;
}

.bb-signup-field {
	margin: 0 0 16px;
}

.bb-signup-field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #6b6b70;
	margin-bottom: 6px;
}

.bb-signup-field input {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	border-radius: 10px;
	border: 1px solid #d8d8db;
	font-size: 15px;
}

.bb-signup-field input:focus {
	outline: none;
	border-color: #c8102e;
}

.bb-signup-submit {
	width: 100%;
	padding: 14px;
	border-radius: 999px;
	background: #c8102e;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	border: none;
	cursor: pointer;
	margin-top: 4px;
}

.bb-signup-submit:hover {
	background: #a50d26;
}

.bb-signup-login-link {
	text-align: center;
	font-size: 14px;
	color: #6b6b70;
	margin: 20px 0 0;
}

.bb-signup-login-link a {
	color: #c8102e;
	font-weight: 600;
}

/* Profile page — sidebar layout (avatar/handle/role + nav) plus a
   main column: banner, identity row, bio, Activity/Account cards. */
.bb-profile-shell {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.bb-profile-sidebar {
	width: 220px;
	flex-shrink: 0;
	background: #fff;
	border-radius: 14px;
	padding: 18px 14px;
}

.bb-profile-sidebar-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 6px 16px;
	margin-bottom: 8px;
	border-bottom: 1px solid #eee;
}

.bb-profile-sidebar-header img {
	border-radius: 50%;
}

.bb-profile-sidebar-name {
	font-weight: 700;
	font-size: 14px;
	margin: 0;
	color: #1c1c1e;
}

.bb-profile-sidebar-role {
	font-size: 12px;
	color: #c8102e;
	margin: 2px 0 0;
	font-weight: 600;
}

.bb-profile-sidenav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.bb-profile-logout-link {
	display: block;
	margin-top: 16px;
	padding: 10px 12px;
	border-top: 1px solid #eee;
	font-size: 14px;
	font-weight: 600;
	color: #c8102e;
	text-decoration: none;
}

.bb-profile-logout-link:hover {
	color: #a50d26;
	text-decoration: none;
}

.bb-profile-nav-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #4a4a4e;
	text-decoration: none;
}

.bb-profile-nav-item:hover {
	background: #f5f5f6;
	text-decoration: none;
}

.bb-profile-nav-item-active {
	background: #fdeceb;
	color: #c8102e;
}

.bb-profile-nav-badge {
	background: #eceef0;
	color: #4a4a4e;
	font-size: 11px;
	font-weight: 700;
	border-radius: 999px;
	padding: 2px 7px;
}

.bb-profile-nav-item-active .bb-profile-nav-badge {
	background: #c8102e;
	color: #fff;
}

.bb-profile-nav-count {
	font-size: 12px;
	font-weight: 500;
	color: #9a9a9e;
}

.bb-profile-nav-item-active .bb-profile-nav-count {
	color: #c8102e;
}

.bb-profile-main {
	flex: 1;
	min-width: 0;
}

.bb-profile-banner {
	position: relative;
	height: 160px;
	border-radius: 14px;
	background: #eceef0 center/cover no-repeat;
	border: 2px dashed #d0d0d3;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.bb-profile-banner-upload-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	font-size: 13px;
	color: #6b6b70;
	cursor: pointer;
}

.bb-profile-banner-hint {
	font-size: 11px;
	color: #9a9a9e;
}

.bb-profile-banner-upload-label input[type="file"] {
	display: none;
}

.bb-profile-identity-row {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 0;
	padding: 0 16px;
}

.bb-profile-identity-left {
	display: flex;
	align-items: flex-end;
	gap: 14px;
}

.bb-profile-avatar-overlap {
	border-radius: 50%;
	border: 4px solid #fff;
	overflow: hidden;
	line-height: 0;
	background: #fff;
}

.bb-profile-identity-name {
	font-size: 20px;
	font-weight: 700;
	margin: 0 0 4px;
	color: #1c1c1e;
}

.bb-profile-identity-stats {
	font-size: 13px;
	color: #6b6b70;
	margin: 0;
}

.bb-profile-identity-actions {
	display: flex;
	gap: 10px;
	padding-bottom: 4px;
}

.bb-profile-share-btn {
	background: #fff;
	border: 1px solid #d8d8db;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	color: #1c1c1e;
}

.bb-profile-create-btn {
	background: #c8102e;
	color: #fff;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.bb-profile-create-btn:hover {
	background: #a50d26;
	color: #fff;
	text-decoration: none;
}

.bb-profile-bio-form {
	display: flex;
	gap: 8px;
	margin: 18px 0 0;
}

.bb-profile-bio-input {
	flex: 1;
	border: 1px solid #d8d8db;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 14px;
}

.bb-profile-bio-save {
	background: #eceef0;
	border: none;
	border-radius: 10px;
	padding: 0 18px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.bb-profile-bio-static {
	margin: 18px 0 0;
	font-size: 14px;
	color: #4a4a4e;
}

.bb-profile-cards-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 24px;
}

.bb-profile-card {
	background: #fff;
	border-radius: 14px;
	padding: 18px;
}

.bb-profile-card-title {
	font-size: 15px;
	font-weight: 700;
	margin: 0 0 12px;
	color: #1c1c1e;
}

.bb-profile-card-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
	font-size: 13px;
	color: #6b6b70;
	border-bottom: 1px solid #f2f2f4;
}

.bb-profile-card-row:last-child {
	border-bottom: none;
}

.bb-profile-card-row strong {
	color: #1c1c1e;
	font-weight: 600;
}

.bb-profile-card-row-danger a {
	color: #c8102e;
	font-weight: 600;
	font-size: 13px;
}

.bb-profile-support-link {
	margin-top: 16px;
	font-size: 13px;
}

.bb-profile-support-link a {
	color: #6b6b70;
}

.bb-profile-subs-list {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.bb-profile-subs-item {
	display: flex;
	align-items: center;
	gap: 12px;
	background: #fff;
	border-radius: 12px;
	padding: 12px 16px;
	text-decoration: none;
}

.bb-profile-subs-item img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.bb-profile-subs-name {
	font-size: 14px;
	font-weight: 600;
	color: #1c1c1e;
	margin: 0 0 2px;
}

.bb-profile-subs-count {
	font-size: 12px;
	color: #6b6b70;
	margin: 0;
}

@media (max-width: 780px) {
	.bb-profile-shell { flex-direction: column; }
	.bb-profile-sidebar { width: 100%; }
	.bb-profile-cards-row { grid-template-columns: 1fr; }
}

/* Most Liked page's Load More button — red, distinct from the plain
   dark Load More button used on Discover/Most Recent. */
#bb-most-liked-load-more {
	background: #c8102e;
}

#bb-most-liked-load-more:hover {
	background: #a50d26;
}

/* Gallery creation/edit page — sidebar form + content picker grid. */
.bb-gallery-back-link {
	display: inline-block;
	font-size: 13px;
	color: #6b6b70;
	text-decoration: none;
	margin-bottom: 16px;
}

.bb-gallery-editor-layout {
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.bb-gallery-editor-sidebar {
	width: 260px;
	flex-shrink: 0;
	background: #fff;
	border-radius: 14px;
	padding: 20px;
}

.bb-gallery-editor-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 16px;
	color: #1c1c1e;
}

.bb-gallery-cover-upload {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	border: 2px dashed #d0d0d3;
	border-radius: 10px;
	padding: 20px 10px;
	font-size: 13px;
	color: #6b6b70;
	cursor: pointer;
	text-align: center;
}

.bb-gallery-cover-upload input[type="file"] {
	display: none;
}

.bb-gallery-cover-hint {
	font-size: 11px;
	color: #9a9a9e;
}

.bb-gallery-selected-count {
	font-size: 13px;
	font-weight: 600;
	color: #1c1c1e;
	margin: 16px 0;
}

.bb-gallery-selected-count span {
	color: #c8102e;
}

.bb-gallery-delete-form {
	margin-top: 10px;
}

.bb-gallery-delete-btn {
	width: 100%;
	background: none;
	border: 1px solid #f0c9ce;
	border-radius: 999px;
	padding: 12px;
	color: #c8102e;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.bb-gallery-delete-btn:hover {
	background: #fdeceb;
}

.bb-gallery-editor-content {
	flex: 1;
	min-width: 0;
}

.bb-gallery-picker-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.bb-gallery-search-box {
	flex: 1;
	min-width: 200px;
}

.bb-gallery-search-box input {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 14px;
	border-radius: 10px;
	border: 1px solid #d8d8db;
	font-size: 14px;
}

.bb-gallery-type-toggle {
	display: flex;
	gap: 8px;
}

.bb-gallery-type-btn {
	background: #fff;
	border: 1px solid #d8d8db;
	border-radius: 999px;
	padding: 9px 16px;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	color: #4a4a4e;
}

.bb-gallery-type-btn.bb-gallery-type-active {
	background: #c8102e;
	color: #fff;
	border-color: #c8102e;
}

.bb-gallery-picker-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}

.bb-gallery-picker-item {
	display: block;
	cursor: pointer;
	position: relative;
}

.bb-gallery-picker-item input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.bb-gallery-picker-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	overflow: hidden;
	background: #111;
	border: 2px solid transparent;
}

.bb-gallery-picker-thumb img,
.bb-gallery-picker-thumb video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-gallery-picker-duration {
	position: absolute;
	top: 6px;
	left: 6px;
	background: rgba(0,0,0,0.75);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 2px 6px;
	border-radius: 4px;
}

.bb-gallery-picker-check {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: rgba(255,255,255,0.85);
	color: transparent;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	transition: background 0.15s ease, color 0.15s ease;
}

.bb-gallery-picker-item-selected .bb-gallery-picker-thumb {
	border-color: #c8102e;
}

.bb-gallery-picker-item-selected .bb-gallery-picker-check {
	background: #c8102e;
	color: #fff;
}

.bb-gallery-picker-title {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #1c1c1e;
	margin-top: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.bb-gallery-picker-views {
	display: block;
	font-size: 11px;
	color: #9a9a9e;
}

/* Single gallery view page */
.bb-gallery-view-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}

@media (max-width: 780px) {
	.bb-gallery-editor-layout { flex-direction: column; }
	.bb-gallery-editor-sidebar { width: 100%; }
	.bb-gallery-picker-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Single gallery page — channel-style header + Videos/Images tabs */
.bb-gallery-channel-header {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	margin-bottom: 16px;
}

.bb-gallery-channel-cover {
	width: 110px;
	height: 110px;
	flex-shrink: 0;
	border-radius: 14px;
	overflow: hidden;
	background: #111;
}

.bb-gallery-channel-cover img,
.bb-gallery-channel-cover video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-gallery-channel-title {
	font-size: 24px;
	font-weight: 700;
	margin: 0 0 8px;
	color: #1c1c1e;
}

.bb-gallery-channel-stat {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	color: #6b6b70;
	margin: 0 0 4px;
}

.bb-gallery-channel-by {
	font-size: 14px;
	color: #6b6b70;
	margin: 8px 0 0;
}

.bb-gallery-channel-by a {
	color: #1c1c1e;
	font-weight: 600;
}

.bb-gallery-channel-actions {
	margin-bottom: 20px;
}

.bb-gallery-channel-tabs {
	display: flex;
	align-items: center;
	gap: 24px;
	border-bottom: 1px solid #ececec;
	margin-bottom: 20px;
	padding-bottom: 0;
}

.bb-gallery-channel-tabs .bb-gallery-back-link {
	margin-bottom: 0;
}

.bb-gallery-channel-tab {
	display: inline-block;
	padding: 12px 0;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: #9a9a9e;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.bb-gallery-channel-tab-active {
	color: #c8102e;
	border-bottom-color: #c8102e;
}

@media (max-width: 600px) {
	.bb-gallery-channel-header { flex-direction: column; align-items: center; text-align: center; }
	.bb-gallery-channel-by { justify-content: center; }
}

/* Nudge the single gallery page's content a bit right of the normal
   left edge, per request — doesn't affect any other page. */
.single-bb_gallery .bb-front-content {
	padding-left: 320px;
}

@media (max-width: 700px) {
	.single-bb_gallery .bb-front-content {
		padding-left: 16px;
	}
}

/* Site footer — Legal + Friends columns, managed via Appearance > Menus */
.bb-site-footer {
	margin-top: 60px;
	padding: 32px 48px;
	background: #f2f2f4;
	border-top: 1px solid #e6e6e9;
}

.bb-site-footer-legal-row {
	display: flex;
	align-items: center;
	gap: 20px;
	justify-content: flex-end;
	max-width: var(--bb-max-width, 1400px);
	margin: 0 auto 20px;
}

.bb-site-footer-legal-row .bb-site-footer-heading {
	margin: 0;
	flex-shrink: 0;
}

.bb-site-footer-friends-row {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	max-width: var(--bb-max-width, 1400px);
	margin: 0 auto;
	padding-top: 20px;
	border-top: 1px solid #e6e6e9;
}

.bb-site-footer-friends-row .bb-site-footer-heading {
	margin: 0;
	flex-shrink: 0;
}

.bb-site-footer-heading {
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #9a9a9e;
	margin: 0 0 12px;
}

.bb-site-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bb-site-footer-links-inline {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 8px 24px;
}

.bb-site-footer-links a {
	color: #4a4a4e;
	font-size: 14px;
	text-decoration: none;
}

.bb-site-footer-links a:hover {
	color: #c8102e;
	text-decoration: underline;
}

.bb-site-footer-copyright {
	max-width: var(--bb-max-width, 1400px);
	margin: 24px auto 0;
	padding-top: 20px;
	border-top: 1px solid #e6e6e9;
	font-size: 12px;
	color: #9a9a9e;
}

@media (max-width: 600px) {
	.bb-site-footer { padding: 24px 20px; }
	.bb-site-footer-legal-row { justify-content: flex-start; }
	.bb-site-footer-friends-row { flex-direction: column; align-items: flex-start; gap: 10px; }
}

/* Mobile nav: hamburger button in the topbar + a slide-in drawer
   with the 7 Discover/Images/Galleries/... links, replacing the
   pill row entirely on phones (shown on desktop as before). */
.bb-mobile-menu-btn {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 32px;
	height: 32px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	flex-shrink: 0;
}

.bb-mobile-menu-btn span {
	display: block;
	width: 100%;
	height: 2px;
	background: #1c1c1e;
	border-radius: 2px;
}

.bb-mobile-menu-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.4);
	z-index: 90;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

.bb-mobile-menu-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 200px;
	max-width: 65vw;
	background: #fff;
	z-index: 91;
	transform: translateX(-100%);
	transition: transform 0.25s ease;
	box-shadow: 4px 0 20px rgba(0,0,0,0.15);
	overflow-y: auto;
}

.bb-mobile-menu-overlay.bb-mobile-menu-open {
	display: block;
	opacity: 1;
	pointer-events: auto;
}

.bb-mobile-menu-drawer.bb-mobile-menu-open {
	transform: translateX(0);
}

.bb-mobile-menu-drawer-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px;
	border-bottom: 1px solid #ececec;
}

.bb-mobile-menu-drawer-title {
	font-size: 15px;
	font-weight: 700;
	color: #1c1c1e;
}

.bb-mobile-menu-close {
	background: none;
	border: none;
	font-size: 26px;
	line-height: 1;
	color: #6b6b70;
	cursor: pointer;
	padding: 0;
}

.bb-mobile-menu-link {
	display: block;
	padding: 13px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #1c1c1e;
	text-decoration: none;
	border-bottom: 1px solid #f2f2f4;
}

.bb-mobile-menu-link:hover {
	background: #f9f9fa;
	text-decoration: none;
}

@media (max-width: 700px) {
	.bb-mobile-menu-btn {
		display: flex;
		order: -1;
	}
	.bb-top-tabs {
		display: none;
	}
}

/* Mobile menu drawer: divider + category tags below Subscriptions */
.bb-mobile-menu-divider {
	height: 1px;
	background: #ececec;
	margin: 8px 16px;
}

.bb-mobile-menu-categories {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 12px 16px 16px;
}

.bb-mobile-menu-category-tag {
	display: flex;
	align-items: center;
	gap: 4px;
	background: #f2f2f4;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 13px;
	font-weight: 600;
	color: #4a4a4e;
	text-decoration: none;
}

.bb-mobile-menu-category-tag:hover {
	background: #eceef0;
	color: #c8102e;
	text-decoration: none;
}

.bb-mobile-menu-category-count {
	color: #9a9a9e;
	font-weight: 500;
}

/* Photo tile captions/badges: on phones there's no hover, so show
   them permanently instead of only on tap — matches a Pinterest-
   style always-visible caption rather than a hidden hover reveal. */
@media (max-width: 780px) {
	.bb-photo-overlay {
		opacity: 1;
		background: linear-gradient(to bottom, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 55%, rgba(0,0,0,0.75) 100%);
	}
	.bb-photo-overlay-title {
		font-size: 13px;
	}
}

/* Photos page only, phones only: drop the title, view-count, avatar,
   username, and upload-count overlay text entirely — just the clean
   image tiles, nothing else. */
@media (max-width: 780px) {
	.page-template-template-photo-gallery-php .bb-photo-overlay-title,
	.page-template-template-photo-gallery-php .bb-photo-view-count,
	.page-template-template-photo-gallery-php .bb-photo-overlay-author,
	.page-template-template-photo-gallery-php .bb-photo-upload-count {
		display: none;
	}
}

/* No ads on the phone version — Related/Recommended tab ads and
   Discover/Most Recent video grid ads hidden below the phone
   breakpoint. Photos page grid ads (.bb-ad-item) are kept on phones. */
@media (max-width: 780px) {
	.bb-masonry-ad-item,
	.cvd-card-ad {
		display: none !important;
	}
}

/* The sidebar ad slots (Ad 1 / Ad 2, next to the video/image on a
   single entry page) and the row of ads below the tags — hidden
   entirely on phones. */
@media (max-width: 780px) {
	.cvd-entry-ads,
	.cvd-entry-row-ads {
		display: none !important;
	}
}

/* Top Videos page ads: phone-only, per request — hidden on desktop
   entirely, shown only at/below the phone breakpoint. */
.cvd-card-topvideos-ad {
	display: none;
}

@media (max-width: 780px) {
	.cvd-card-topvideos-ad {
		display: block;
	}
}

/* Extra topbar button — renamable via Appearance > Customize >
   Extra Header Button. Sits to the right of the avatar. */
.bb-extra-topbar-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #eceef0;
	color: #1c1c1e;
	border-radius: 999px;
	padding: 10px 18px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.bb-extra-topbar-btn:hover {
	background: #e0e0e3;
	color: #1c1c1e;
	text-decoration: none;
}

@media (max-width: 700px) {
	.bb-extra-topbar-btn {
		padding: 8px 12px;
		font-size: 13px;
	}
}

/* Exclusive Gallery page — uniform 2-column grid, every tile the
   same square size (unlike the Photos page's staggered masonry),
   with a caption below each showing rank, creator, and their
   aggregate stats (images/videos uploaded, total views). */
.bb-exclusive-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

@media (max-width: 900px) {
	.bb-exclusive-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 780px) {
	.bb-exclusive-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
}

.bb-exclusive-card {
	display: flex;
	flex-direction: column;
}

.bb-exclusive-tile {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 10px;
	overflow: hidden;
	background: #111;
}

.bb-exclusive-tile img,
.bb-exclusive-tile video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-exclusive-caption {
	padding: 10px 2px;
}

.bb-exclusive-caption-name {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 4px;
	font-size: 14px;
}

.bb-exclusive-rank {
	color: #c8102e;
	font-weight: 700;
}

.bb-exclusive-caption-name a {
	color: #1c1c1e;
	font-weight: 600;
	text-decoration: none;
}

.bb-exclusive-caption-name a:hover {
	text-decoration: underline;
}

.bb-exclusive-caption-stats {
	display: flex;
	gap: 14px;
	margin: 0;
	font-size: 12px;
	color: #6b6b70;
}

/* Star's own auto-generated content page */
.bb-star-page-header {
	margin-bottom: 20px;
}

.bb-star-page-avatar {
	width: 90px;
	height: 90px;
	border-radius: 50%;
	overflow: hidden;
	margin-bottom: 12px;
}

.bb-star-page-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Exclusive leaderboard pagination */
.bb-exclusive-pagination {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: 32px;
}

/* Search box above the Exclusive leaderboard */
.bb-exclusive-search-form {
	display: flex;
	max-width: 500px;
	margin: 0 0 20px;
	gap: 8px;
}

.bb-exclusive-search-input {
	flex: 1;
	border: 1px solid #d8d8db;
	border-radius: 8px;
	padding: 6px 12px;
	font-size: 13px;
}

.bb-exclusive-search-btn {
	background: #f2f2f4;
	border: 1px solid #d8d8db;
	border-radius: 8px;
	padding: 0 12px;
	font-size: 14px;
	cursor: pointer;
}

/* Admin-only "Manage" link on each leaderboard tile */
.bb-exclusive-manage-link {
	font-size: 11px;
	color: #9a9a9e;
	font-weight: 500;
	margin-left: 6px;
}

/* Admin-only inline assign panel */
.bb-star-assign-panel {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
}

.bb-star-assign-list {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin: 16px 0;
}

.bb-star-assign-item {
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: #fff;
	border-radius: 8px;
	padding: 8px;
	font-size: 12px;
	cursor: pointer;
}

.bb-star-assign-thumb {
	display: block;
	aspect-ratio: 16/9;
	border-radius: 6px;
	overflow: hidden;
	background: #111;
}

.bb-star-assign-thumb img,
.bb-star-assign-thumb video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 780px) {
	.bb-star-assign-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* Star attribute tags (e.g. Red, Tall) — shown on their leaderboard
   tile and on their own page */
.bb-exclusive-attrs {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
	margin: 4px 0;
}

.bb-exclusive-attr-tag {
	background: #eceef0;
	color: #4a4a4e;
	border-radius: 999px;
	padding: 2px 9px;
	font-size: 10px;
	font-weight: 600;
}

/* Admin-only attribute tag management panel */
.bb-star-attrs-panel {
	background: #fff;
	border-radius: 12px;
	padding: 20px;
	max-width: 600px;
}

/* Save button used in the admin-only inline panels on /exclusive/ */
.bb-star-panel-save-btn {
	background: #c8102e;
	color: #fff;
	border: none;
	border-radius: 999px;
	padding: 10px 24px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.bb-star-panel-save-btn:hover {
	background: #a50d26;
}

/* Star page: Display Videos / Display Pictures tabs */
.bb-star-page-tabs {
	display: flex;
	gap: 24px;
	border-bottom: 1px solid #ececec;
	margin-bottom: 20px;
}

.bb-star-page-tab {
	padding: 12px 0;
	font-size: 14px;
	font-weight: 700;
	color: #9a9a9e;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}

.bb-star-page-tab-active {
	color: #c8102e;
	border-bottom-color: #c8102e;
}

/* Image tiles inside a plain cvd-grid-4col context (star page's
   Pictures tab, gallery view page's Images tab) — .bb-photo-tile
   alone has no sizing, it normally relies on the Photos page's
   special masonry grid for that, which isn't used here. */
.bb-gallery-image-tile {
	display: block;
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: 14px;
	overflow: hidden;
	background: #111;
}

.bb-gallery-image-tile img,
.bb-gallery-image-tile video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Date filter on the Add Videos/Add Images admin panels */
.bb-assign-date-input {
	border: 1px solid #d8d8db;
	border-radius: 8px;
	padding: 6px 10px;
	font-size: 13px;
}

/* Like/Share/Report buttons — smaller on phones, since they were
   squeezing the layout enough to shove the Subscribe button awkwardly
   into the creator's name row. */
@media (max-width: 700px) {
	.cvd-like-btn,
	.cvd-share-btn,
	.cvd-report-btn {
		padding: 6px 12px !important;
		min-width: 36px !important;
		font-size: 12px !important;
		gap: 4px !important;
	}
	.cvd-like-btn img,
	.cvd-share-btn img,
	.cvd-report-btn img {
		width: 14px !important;
		height: 14px !important;
	}
}

/* Top Videos page — now shows tag labels instead of a ranked video
   list, each linking to that tag's own video listing page. White
   card style matching the "All Topics & Channels" reference layout:
   header row with a live count, 2 large columns, picture on top,
   bold name + video count below it. */
.bb-top-videos-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 18px;
}

.bb-top-videos-heading {
	font-size: 22px;
	font-weight: 800;
	color: #1c1c1e;
	margin: 0;
}

.bb-top-videos-heading-count {
	font-size: 14px;
	font-weight: 600;
	color: #c8102e;
}

.bb-top-videos-tag-grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px 18px;
}

.bb-top-videos-tag-tile {
	display: block;
	text-decoration: none;
}

.bb-top-videos-tag-thumb {
	width: 100%;
	aspect-ratio: 3 / 4;
	border-radius: 14px;
	overflow: hidden;
	background: #eceef0;
	margin-bottom: 12px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.bb-top-videos-tag-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.bb-top-videos-tag-name {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: #1c1c1e;
}

.bb-top-videos-tag-count {
	display: block;
	font-size: 14px;
	color: #8a8a8f;
	margin-top: 2px;
}

@media (max-width: 700px) {
	.bb-top-videos-tag-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px 12px;
	}
	.bb-top-videos-heading {
		font-size: 17px;
	}
	.bb-top-videos-tag-name {
		font-size: 14px;
	}
	.bb-top-videos-tag-count {
		font-size: 12px;
	}
}

/* Top Videos page — Most Videos / A-Z sort toggle */
.bb-top-videos-sort-toggle {
	display: flex;
	gap: 8px;
	margin-bottom: 18px;
}

.bb-top-videos-sort-btn {
	background: #f2f2f4;
	color: #4a4a4e;
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.bb-top-videos-sort-btn.bb-top-videos-sort-active {
	background: #c8102e;
	color: #fff;
}