/**
 * CJ's Brew & BBQ - Activity Feed Styles
 * Modern social feed design matching staging site tokens
 * Updated: April 2026 — Full rewrite
 *
 * Specificity: All selectors use 'body' prefix to beat
 * BuddyPress's 'body #buddypress div' base rule.
 */

/* ========================================
   1. HIDE RSS & CLEANUP
   ======================================== */

#buddypress .item-list-tabs li.feed,
.bp-nouveau .activity-list .feed,
.bp-nouveau #subnav li.feed,
.activity-list .feed,
a[href*="feed"],
li.feed,
li[class*="feed"] {
	display: none !important;
}

/* ========================================
   2. STREAM CONTAINER
   ======================================== */

body #buddypress #activity-stream,
body .buddypress-wrap ul.activity-list,
body #buddypress ul.activity-list {
	margin: 0 auto;
	padding: 0;
	max-width: 680px;
	list-style: none;
	background: transparent !important;
}

/* ========================================
   3. POST COMPOSER
   ======================================== */

/* ---- COMPOSER: Parent wrapper — visually below tabs via order ---- */
body #buddypress {
	display: flex !important;
	flex-direction: column !important;
}

body #buddypress > .bp-screen-reader-text { order: 0; }
body #buddypress > .activity-type-navs { order: 1; }
body #buddypress > .screen-content { order: 3; }
body #buddypress > #bp-nouveau-activity-form { order: 2; }

body #buddypress #bp-nouveau-activity-form,
body .buddypress-wrap .activity-update-form {
	display: block !important;
	margin: 0 auto 24px auto !important;
	max-width: 680px !important;
	width: 100% !important;
	background: transparent !important;
	border: none !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* ---- COMPOSER: The actual form ---- */
body #buddypress #whats-new-form {
	background: var(--bg-primary) !important;
	border: 1px solid var(--border-subtle) !important;
	border-radius: 12px !important;
	padding: 16px 20px !important;
	width: 100% !important;
	box-sizing: border-box !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	display: grid !important;
	grid-template-columns: 44px 1fr !important;
	grid-template-rows: auto auto !important;
	gap: 0 14px !important;
	align-items: center;
}

/* Avatar */
body #buddypress #whats-new-avatar {
	grid-column: 1;
	grid-row: 1;
	padding: 0 !important;
	margin: 0 !important;
}

body #buddypress #whats-new-avatar img {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	object-fit: cover;
}

/* Content area (textarea wrapper) */
body #buddypress #whats-new-content {
	grid-column: 2;
	grid-row: 1;
	padding: 0 !important;
	margin: 0 !important;
}

body #buddypress #whats-new-textarea {
	width: 100%;
	border: none;
	background: transparent;
	padding: 0;
	margin: 0;
}

body #buddypress textarea#whats-new {
	width: 100% !important;
	border: 2px solid var(--border-subtle) !important;
	background: var(--bg-secondary) !important;
	border-radius: 24px !important;
	padding: 10px 20px !important;
	font-size: 15px !important;
	font-family: var(--font-body) !important;
	color: var(--text-primary) !important;
	resize: none !important;
	min-height: 44px !important;
	line-height: 1.4 !important;
	box-sizing: border-box !important;
	transition: all 0.2s !important;
}

body #buddypress textarea#whats-new:focus {
	outline: none !important;
	border-color: var(--brand-primary) !important;
	background: var(--bg-primary) !important;
	box-shadow: 0 0 0 3px rgba(255, 88, 16, 0.1) !important;
}

body #buddypress textarea#whats-new::placeholder {
	color: var(--text-tertiary);
}

/* ---- COMPOSER: Expanded State (BP adds .activity-form-expanded) ---- */
body #buddypress #whats-new-form.activity-form-expanded {
	align-items: start;
}

body #buddypress #whats-new-form.activity-form-expanded textarea#whats-new {
	min-height: 80px !important;
	border-radius: 12px !important;
	resize: vertical !important;
}

/* Options bar — bottom of composer */
body #buddypress #whats-new-options {
	grid-column: 1 / -1 !important;
	grid-row: 2 !important;
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 8px 0 0 0 !important;
	margin: 0 !important;
	border-top: none !important;
}

/* Media wrapper uses display:contents so its children
   (images grid + icon bar) become direct flex children */
body #buddypress #whats-new-options .cjbb-activity-media {
	display: contents !important;
}

/* Images grid takes full width (forces a wrap) */
body .cjbb-activity-images-grid {
	width: 100% !important;
	flex: 0 0 100% !important;
}

/* Icon button — inline, no extra space */
body .cjbb-activity-media-bar {
	display: flex !important;
	align-items: center !important;
	flex: none !important;
}

/* Submit container — pushed to right end of same row as icon */
body #buddypress #whats-new-submit {
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
	background: transparent !important;
	padding: 0 !important;
	margin: 0 0 0 auto !important;
	flex: none !important;
}

/* Post Update button */
body #buddypress #aw-whats-new-submit,
body #buddypress #whats-new-submit input[type="submit"] {
	background: var(--brand-primary) !important;
	color: #fff !important;
	border: none !important;
	padding: 10px 24px !important;
	border-radius: 24px !important;
	font-family: var(--font-button) !important;
	font-weight: 500 !important;
	font-size: 14px !important;
	cursor: pointer !important;
	transition: background 0.2s !important;
	text-transform: capitalize !important;
	letter-spacing: 0 !important;
	white-space: nowrap !important;
	min-width: fit-content !important;
}

body #buddypress #aw-whats-new-submit:hover {
	background: var(--brand-primary-dark) !important;
}

/* Cancel button */
body #buddypress #aw-whats-new-reset,
body #buddypress #whats-new-submit input[type="reset"] {
	background: transparent !important;
	color: var(--text-secondary) !important;
	border: 2px solid var(--border-subtle) !important;
	padding: 8px 20px !important;
	border-radius: 24px !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	transition: all 0.2s !important;
}

body #buddypress #aw-whats-new-reset:hover {
	border-color: var(--text-secondary) !important;
	color: var(--text-primary) !important;
}

/* ---- COMPOSER: Image Upload ---- */

body .cjbb-activity-media {
	grid-column: 1 / -1 !important;
	display: flex !important;
	flex-direction: column !important;
}

body .cjbb-activity-media-bar {
	display: flex;
	align-items: center;
	padding: 0;
	margin: 0;
}

body .cjbb-media-upload-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	color: var(--brand-primary);
	cursor: pointer;
	transition: all 0.2s;
	border: none;
	background: transparent;
}

body .cjbb-media-upload-btn:hover {
	background: var(--bg-secondary);
}

body .cjbb-media-upload-btn svg {
	color: var(--brand-primary);
}

/* Upload preview grid (up to 5 images) */
body .cjbb-activity-images-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
	gap: 8px;
	margin-bottom: 12px;
}

body .cjbb-grid-image {
	position: relative;
	aspect-ratio: 1;
	border-radius: 8px;
	overflow: hidden;
	background: var(--bg-tertiary);
}

body .cjbb-grid-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

body .cjbb-grid-image-remove {
	position: absolute;
	top: 4px;
	right: 4px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	border: none;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
	padding: 0;
}

body .cjbb-grid-image-remove:hover {
	background: var(--error);
}

/* (counter badge removed — clean icon only) */

/* ---- CAROUSEL (in activity cards) ---- */

body .cjbb-activity-carousel {
	margin: 0;
	overflow: hidden;
}

body .cjbb-carousel-wrapper {
	position: relative;
	overflow: hidden;
	border-radius: 0;
}

body .cjbb-carousel-track {
	display: flex;
	transition: transform 0.3s ease;
}

body .cjbb-carousel-slide {
	width: 100%;
	min-width: 100%;
	max-width: 100%;
	flex: 0 0 100%;
	overflow: hidden;
}

body .cjbb-carousel-photo {
	width: 100%;
	height: auto;
	max-height: 500px;
	object-fit: cover;
	display: block;
	cursor: pointer;
}

/* Remove padding below carousel images */
body #buddypress .activity-inner:has(.cjbb-activity-carousel) {
	padding-bottom: 0 !important;
}

body #buddypress .activity-inner:has(.activity-post-image) {
	padding-bottom: 0 !important;
}

body .cjbb-carousel-prev,
body .cjbb-carousel-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 44px;
	height: 44px;
	border-radius: 50% !important;
	background: rgba(0, 0, 0, 0.65) !important;
	color: #fff !important;
	border: 2px solid rgba(255, 255, 255, 0.3) !important;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s;
	z-index: 2;
	backdrop-filter: blur(8px);
	padding: 0 !important;
}

body .cjbb-carousel-prev { left: 12px; }
body .cjbb-carousel-next { right: 12px; }

body .cjbb-carousel-prev:hover,
body .cjbb-carousel-next:hover {
	background: rgba(0, 0, 0, 0.85) !important;
	border-color: rgba(255, 255, 255, 0.6) !important;
	transform: translateY(-50%) scale(1.08);
}

body .cjbb-carousel-dots {
	position: absolute;
	bottom: 12px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 6px;
	z-index: 2;
	background: rgba(0, 0, 0, 0.4);
	padding: 6px 10px;
	border-radius: 12px;
	backdrop-filter: blur(4px);
}

body .cjbb-carousel-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: all 0.2s;
}

body .cjbb-carousel-dot.active {
	background: #fff;
	transform: scale(1.2);
}

/* Single posted image (non-carousel) */
body .activity-post-image {
	width: 100%;
	height: auto;
	max-height: 500px;
	object-fit: cover;
	display: block;
	cursor: pointer;
}

/* ---- LIGHTBOX ---- */

body .cjbb-lightbox-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.92);
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.2s;
}

body .cjbb-lightbox-overlay.visible {
	opacity: 1;
}

body .cjbb-lightbox-img {
	max-width: 90vw;
	max-height: 85vh;
	object-fit: contain;
	border-radius: 4px;
	user-select: none;
}

body .cjbb-lightbox-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border: none;
	font-size: 28px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

body .cjbb-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.3);
}

body .cjbb-lightbox-prev,
body .cjbb-lightbox-next {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
	border: none;
	font-size: 32px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

body .cjbb-lightbox-prev { left: 16px; }
body .cjbb-lightbox-next { right: 16px; }

body .cjbb-lightbox-prev:hover,
body .cjbb-lightbox-next:hover {
	background: rgba(255, 255, 255, 0.3);
}

body .cjbb-lightbox-counter {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, 0.7);
	font-size: 14px;
	font-weight: 500;
}

/* Dark mode */
html.theme-dark body .cjbb-media-upload-btn:hover {
	background: var(--dark-bg-tertiary);
}

/* Post-in selector */
body #buddypress #whats-new-post-in-box {
	padding: 8px 0 0 0;
}

body #buddypress #whats-new-post-in-box select {
	padding: 8px 12px;
	border: 2px solid var(--border-subtle);
	border-radius: 8px;
	font-size: 14px;
	background: var(--bg-primary);
	color: var(--text-primary);
}

/* ========================================
   4. ACTIVITY CARDS
   ======================================== */

body #buddypress .activity-list > li,
body .buddypress-wrap ul.activity-list > li.activity {
	background: var(--bg-primary) !important;
	border: 1px solid var(--border-subtle) !important;
	border-radius: 12px !important;
	padding: 0 !important;
	margin: 0 auto 20px auto !important;
	max-width: 680px !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
	overflow: hidden !important;
	list-style: none !important;
	transition: box-shadow 0.2s !important;
}

body #buddypress .activity-list > li:hover,
body .buddypress-wrap ul.activity-list > li.activity:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ========================================
   5. CARD HEADER (Avatar + Name + Time)
   ======================================== */

body #buddypress .activity-avatar {
	float: left;
	margin: 16px 0 0 16px;
}

body #buddypress .activity-avatar img {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50% !important;
	object-fit: cover;
}

body #buddypress .activity-header {
	padding: 16px 16px 0 72px !important;
	margin: 0 !important;
	border: none !important;
	min-height: 44px;
	display: flex;
	align-items: center;
}

body #buddypress .activity-header p {
	margin: 0 !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	color: var(--text-secondary) !important;
}

body #buddypress .activity-header p a:first-child {
	font-weight: 700 !important;
	font-size: 15px !important;
	color: var(--text-primary) !important;
	text-decoration: none !important;
}

body #buddypress .activity-header p a:first-child:hover {
	color: var(--brand-primary) !important;
	text-decoration: underline !important;
}

body #buddypress .activity-header .time-since,
body #buddypress .activity-header .activity-time-since {
	color: var(--text-tertiary) !important;
	font-size: 12px !important;
}

/* ========================================
   6. CARD CONTENT
   ======================================== */

body #buddypress .activity-inner,
body .buddypress-wrap .activity-inner {
	padding: 12px 16px 16px 16px !important;
	margin: 0 !important;
	background: transparent !important;
	clear: both;
}

body #buddypress .activity-inner p {
	margin: 0 !important;
	font-size: 15px !important;
	line-height: 1.6 !important;
	color: var(--text-primary) !important;
	word-wrap: break-word;
}

/* Recipe content in activity */
body .activity-recipe-content {
	display: block;
	margin: 0;
}

body .activity-recipe-thumb-wrapper {
	width: 100%;
	margin: 0;
}

body .activity-recipe-thumb-wrapper img {
	width: 100%;
	height: auto;
	max-height: 400px;
	object-fit: cover;
	display: block;
}

body .activity-recipe-details {
	padding: 16px;
}

body .activity-recipe-title {
	font-size: 18px;
	font-weight: 600;
	color: var(--text-primary);
	margin: 0 0 8px 0;
}

body .activity-recipe-description {
	font-size: 15px;
	color: var(--text-secondary);
	line-height: 1.5;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Recipe Tags */
body .activity-recipe-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 12px;
	background: var(--brand-primary);
	color: #fff;
	border-radius: 20px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

body .activity-recipe-tag.beer {
	background: var(--info);
}

/* View Recipe button */
body .view-recipe-btn {
	display: inline-block;
	margin-top: 12px;
	padding: 10px 20px;
	background: var(--brand-primary);
	color: #fff !important;
	text-decoration: none;
	border-radius: 0;
	font-family: var(--font-button);
	font-size: 14px;
	font-weight: 500;
	text-transform: capitalize;
	transition: background 0.2s;
}

body .view-recipe-btn:hover {
	background: var(--brand-primary-dark);
}

/* ========================================
   7. ACTION BAR (Comment, Favourite)
   ======================================== */

body #buddypress .activity-meta.action,
body #buddypress .activity-meta,
body .buddypress-wrap .activity-meta {
	display: flex !important;
	align-items: center !important;
	gap: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	border-top: 1px solid var(--border-subtle) !important;
	background: transparent !important;
}

/* All action buttons — equal width, clean dividers */
body #buddypress .activity-meta .generic-button,
body .buddypress-wrap .activity-meta .generic-button {
	flex: 1 !important;
	display: flex !important;
	margin: 0 !important;
	padding: 0 !important;
}

body #buddypress .activity-meta .generic-button + .generic-button {
	border-left: 1px solid var(--border-subtle) !important;
}

body #buddypress .activity-meta a,
body #buddypress .activity-meta button,
body .buddypress-wrap .activity-meta a,
body .buddypress-wrap .activity-meta button {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	width: 100% !important;
	padding: 10px 16px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--text-secondary) !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	cursor: pointer !important;
	transition: all 0.15s !important;
	text-decoration: none !important;
	line-height: 1 !important;
	flex: none !important;
	letter-spacing: 0.02em !important;
}

body #buddypress .activity-meta a:hover,
body #buddypress .activity-meta button:hover {
	background: var(--bg-secondary) !important;
	color: var(--text-primary) !important;
}

/* Favourite active state */
body #buddypress .activity-meta .unfav,
body .buddypress-wrap .activity-meta .unfav {
	color: var(--brand-primary) !important;
}

/* Comment count */
body #buddypress .activity-meta .comment-count {
	font-size: 14px;
	font-weight: 500;
}

/* Screen reader text — show visually as label */
body #buddypress .activity-meta .bp-screen-reader-text {
	position: static !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	clip: auto !important;
	font-size: 13px;
	font-weight: 500;
	text-transform: capitalize !important;
}

/* Hide delete button from action bar (show in overflow only) */
body #buddypress .activity-meta .delete-activity {
	display: none !important;
}

/* ========================================
   8. COMMENTS SECTION
   ======================================== */

body #buddypress .activity-comments,
body .buddypress-wrap .activity-comments {
	margin: 0 !important;
	padding: 0 16px 16px 16px !important;
	background: var(--bg-secondary) !important;
	border-top: 1px solid var(--border-subtle) !important;
	border-radius: 0 0 12px 12px !important;
}

body #buddypress .activity-comments > ul,
body .buddypress-wrap .activity-comments > ul {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

/* Individual comment — use grid to place avatar left, content right */
body #buddypress .activity-comments li.comment-item,
body #buddypress .activity-comments li,
body .buddypress-wrap .activity-comments li {
	display: grid !important;
	grid-template-columns: 36px 1fr !important;
	grid-template-rows: auto auto auto !important;
	gap: 0 12px !important;
	padding: 12px 0 !important;
	margin: 0 !important;
	border-bottom: 1px solid var(--border-subtle) !important;
	list-style: none !important;
	align-items: start !important;
}

body #buddypress .activity-comments li:last-child {
	padding-bottom: 0 !important;
	border-bottom: none !important;
}

/* Comment avatar — grid row 1-3, column 1 */
body #buddypress .activity-comments .acomment-avatar {
	grid-column: 1 !important;
	grid-row: 1 / 4 !important;
	width: 36px !important;
	height: 36px !important;
	float: none !important;
	margin: 0 !important;
}

body #buddypress .activity-comments .acomment-avatar img {
	width: 36px !important;
	height: 36px !important;
	border-radius: 50% !important;
	object-fit: cover;
}

/* Comment meta (name + time) — grid row 1, column 2 */
body #buddypress .activity-comments .acomment-meta {
	grid-column: 2 !important;
	grid-row: 1 !important;
	font-size: 13px !important;
	color: var(--text-tertiary) !important;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1.4 !important;
}

body #buddypress .activity-comments .acomment-meta a {
	font-weight: 600 !important;
	color: var(--text-primary) !important;
	text-decoration: none !important;
	font-size: 13px !important;
}

/* Comment content — grid row 2, column 2 */
body #buddypress .acomment-content,
body .buddypress-wrap .activity-comments .acomment-content {
	grid-column: 2 !important;
	grid-row: 2 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	color: var(--text-primary) !important;
	background: var(--bg-tertiary) !important;
	padding: 10px 14px !important;
	border-radius: 12px !important;
	display: block !important;
	margin: 4px 0 0 0 !important;
	max-width: 100% !important;
	word-wrap: break-word !important;
	box-sizing: border-box !important;
}

/* Comment action bar (Reply/Delete) — grid row 3, column 2 */
body #buddypress .activity-comments .activity-meta,
body #buddypress .activity-comments .acomment-options {
	grid-column: 2 !important;
	grid-row: 3 !important;
	display: flex !important;
	gap: 4px !important;
	margin: 4px 0 0 0 !important;
	padding: 0 !important;
	border: none !important;
}

body #buddypress .activity-comments .activity-meta a,
body #buddypress .activity-comments .activity-meta button,
body #buddypress .activity-comments .acomment-options a {
	font-size: 12px !important;
	color: var(--text-tertiary) !important;
	text-decoration: none !important;
	padding: 2px 8px !important;
	border-radius: 4px !important;
	background: transparent !important;
	display: inline-block !important;
	width: auto !important;
	flex: none !important;
	border: none !important;
	cursor: pointer !important;
}

body #buddypress .activity-comments .activity-meta a:hover,
body #buddypress .activity-comments .acomment-options a:hover {
	color: var(--text-primary) !important;
	background: var(--bg-tertiary) !important;
}

/* Hide the screen reader text inside comment actions */
body #buddypress .activity-comments .activity-meta .bp-screen-reader-text {
	position: static !important;
	width: auto !important;
	height: auto !important;
	overflow: visible !important;
	clip: auto !important;
	font-size: 12px !important;
}

/* Comment form */
body #buddypress .activity-comments form.ac-form,
body #buddypress #ac-form {
	padding: 12px 0 0 0 !important;
	margin: 0 !important;
	border: none !important;
	background: transparent !important;
}

body #buddypress #ac-form textarea,
body #buddypress .ac-form textarea {
	width: 100% !important;
	padding: 10px 16px !important;
	border: 2px solid var(--border-subtle) !important;
	border-radius: 24px !important;
	font-size: 14px !important;
	font-family: var(--font-body) !important;
	color: var(--text-primary) !important;
	background: var(--bg-primary) !important;
	resize: none !important;
	min-height: 40px !important;
	box-sizing: border-box !important;
	transition: border-color 0.2s !important;
}

body #buddypress #ac-form textarea:focus {
	outline: none !important;
	border-color: var(--brand-primary) !important;
	box-shadow: 0 0 0 3px rgba(255, 88, 16, 0.1) !important;
}

body #buddypress #ac-form input[type="submit"] {
	background: var(--brand-primary) !important;
	color: #fff !important;
	border: none !important;
	padding: 8px 20px !important;
	border-radius: 24px !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	cursor: pointer !important;
	margin-top: 8px !important;
	transition: background 0.2s !important;
}

body #buddypress #ac-form input[type="submit"]:hover {
	background: var(--brand-primary-dark) !important;
}

/* ========================================
   9. FILTER TABS
   ======================================== */

/* Tab navigation */
body #buddypress .activity-type-navs,
body #buddypress .item-list-tabs {
	background: transparent !important;
	border: none !important;
	border-bottom: 1px solid var(--border-subtle) !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 32px auto 24px auto !important;
	max-width: 680px;
	box-shadow: none !important;
}

body #buddypress .activity-type-navs ul,
body #buddypress .item-list-tabs ul {
	display: flex !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

body #buddypress .item-list-tabs li {
	display: inline-block;
	margin: 0 !important;
}

body #buddypress .item-list-tabs li a {
	color: var(--text-secondary) !important;
	text-decoration: none !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	padding: 12px 20px !important;
	display: inline-block !important;
	border-bottom: 3px solid transparent !important;
	border-radius: 0 !important;
	background: transparent !important;
	transition: all 0.2s !important;
}

body #buddypress .item-list-tabs li a:hover {
	color: var(--text-primary) !important;
	background: transparent !important;
}

body #buddypress .item-list-tabs li.selected a,
body #buddypress .item-list-tabs li.current a {
	color: var(--brand-primary) !important;
	border-bottom-color: var(--brand-primary) !important;
	background: transparent !important;
	font-weight: 600 !important;
}

/* Hide the entire subnav-filters bar (search + filter dropdown) */
/* The global header already has a search bar, so this is redundant */
body #buddypress .subnav-filters,
body #buddypress #subnav-filters,
body #buddypress #dir-filters,
body #buddypress .component-filters {
	display: none !important;
}

/* ========================================
   10. LOAD MORE & EMPTY STATES
   ======================================== */

body #buddypress .activity-list .load-more {
	text-align: center;
	padding: 24px;
}

body #buddypress .activity-list .load-more a {
	background: var(--brand-primary) !important;
	color: #fff !important;
	padding: 12px 32px !important;
	border-radius: 0 !important;
	text-decoration: none !important;
	font-family: var(--font-button) !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	text-transform: capitalize !important;
	display: inline-block !important;
	transition: background 0.2s !important;
}

body #buddypress .activity-list .load-more a:hover {
	background: var(--brand-primary-dark) !important;
}

body #buddypress #message {
	background: var(--bg-secondary);
	border: 1px solid var(--border-subtle);
	border-radius: 12px;
	padding: 32px;
	text-align: center;
	color: var(--text-secondary);
	max-width: 680px;
	margin: 0 auto;
}

/* ========================================
   11. FAVOURITE ANIMATION
   ======================================== */

@keyframes heartBeat {
	0% { transform: scale(1); }
	25% { transform: scale(1.3); }
	50% { transform: scale(1); }
}

body .activity-meta .unfav .icon,
body .activity-meta .unfav::before {
	animation: heartBeat 0.3s ease-in-out;
}

/* ========================================
   12. MOBILE RESPONSIVE
   ======================================== */

@media (max-width: 680px) {
	body #buddypress .activity-list > li {
		border-radius: 0 !important;
		border-left: none !important;
		border-right: none !important;
		margin-bottom: 8px !important;
	}

	body #buddypress .activity-comments {
		border-radius: 0 !important;
	}

	body #buddypress #whats-new-form {
		border-radius: 0;
		border-left: none;
		border-right: none;
		margin-bottom: 8px;
	}

	body #buddypress .item-list-tabs {
		max-width: 100%;
	}

	body #buddypress .activity-meta a,
	body #buddypress .activity-meta button {
		padding: 14px 8px !important;
		font-size: 13px !important;
	}

	body #buddypress .activity-meta .bp-screen-reader-text {
		font-size: 13px;
	}
}

/* ========================================
   13. DARK MODE
   ======================================== */

/* Cards */
html.theme-dark body #buddypress .activity-list > li,
html.theme-dark body .buddypress-wrap ul.activity-list > li.activity {
	background: var(--dark-bg-secondary) !important;
	border-color: var(--dark-border-default) !important;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

/* Content areas — transparent to inherit card bg */
html.theme-dark body #buddypress .activity-inner,
html.theme-dark body #buddypress .activity-content,
html.theme-dark body .buddypress-wrap .activity-inner,
html.theme-dark body .buddypress-wrap .activity-content {
	background: transparent !important;
}

html.theme-dark body #buddypress .activity-inner p {
	color: var(--dark-text-primary) !important;
}

/* Header text */
html.theme-dark body #buddypress .activity-header p {
	color: var(--dark-text-secondary) !important;
}

html.theme-dark body #buddypress .activity-header p a:first-child {
	color: var(--dark-text-primary) !important;
}

html.theme-dark body #buddypress .activity-header .time-since {
	color: var(--dark-text-tertiary) !important;
}

/* Action bar */
html.theme-dark body #buddypress .activity-meta,
html.theme-dark body .buddypress-wrap .activity-meta {
	border-top-color: var(--dark-border-default) !important;
}

html.theme-dark body #buddypress .activity-meta .generic-button + .generic-button {
	border-left-color: var(--dark-border-default) !important;
}

html.theme-dark body #buddypress .activity-meta a,
html.theme-dark body #buddypress .activity-meta button {
	color: var(--dark-text-secondary) !important;
}

html.theme-dark body #buddypress .activity-meta a:hover,
html.theme-dark body #buddypress .activity-meta button:hover {
	background: var(--dark-bg-tertiary) !important;
	color: var(--dark-text-primary) !important;
}

html.theme-dark body #buddypress .activity-meta .unfav {
	color: var(--brand-primary) !important;
}

/* Comments */
html.theme-dark body #buddypress .activity-comments,
html.theme-dark body .buddypress-wrap .activity-comments {
	background: var(--dark-bg-primary) !important;
	border-top-color: var(--dark-border-default) !important;
}

html.theme-dark body #buddypress .acomment-content,
html.theme-dark body .buddypress-wrap .acomment-content {
	background: var(--dark-bg-tertiary) !important;
	color: var(--dark-text-primary) !important;
}

html.theme-dark body #buddypress .acomment-meta {
	color: var(--dark-text-tertiary) !important;
}

html.theme-dark body #buddypress .acomment-meta a {
	color: var(--dark-text-primary) !important;
}

html.theme-dark body #buddypress .activity-comments .activity-meta a,
html.theme-dark body #buddypress .acomment-options a {
	color: var(--dark-text-tertiary) !important;
}

html.theme-dark body #buddypress .activity-comments .activity-meta a:hover,
html.theme-dark body #buddypress .acomment-options a:hover {
	color: var(--dark-text-primary) !important;
	background: var(--dark-bg-quaternary) !important;
}

html.theme-dark body #buddypress .activity-comments li {
	border-bottom-color: var(--dark-border-default) !important;
}

/* Comment form */
html.theme-dark body #buddypress #ac-form textarea,
html.theme-dark body #buddypress .ac-form textarea {
	background: var(--dark-bg-tertiary) !important;
	border-color: var(--dark-border-default) !important;
	color: var(--dark-text-primary) !important;
}

html.theme-dark body #buddypress #ac-form textarea:focus {
	border-color: var(--brand-primary) !important;
}

/* Composer */
html.theme-dark body #buddypress #bp-nouveau-activity-form {
	background: transparent !important;
}

html.theme-dark body #buddypress #whats-new-form {
	background: var(--dark-bg-secondary) !important;
	border-color: var(--dark-border-default) !important;
}

html.theme-dark body #buddypress textarea#whats-new {
	background: var(--dark-bg-tertiary) !important;
	border-color: var(--dark-border-default) !important;
	color: var(--dark-text-primary) !important;
}

html.theme-dark body #buddypress textarea#whats-new:focus {
	background: var(--dark-bg-secondary) !important;
	border-color: var(--brand-primary) !important;
	box-shadow: 0 0 0 3px rgba(255, 88, 16, 0.15) !important;
}

html.theme-dark body #buddypress textarea#whats-new::placeholder {
	color: var(--dark-text-tertiary) !important;
}

html.theme-dark body #buddypress #whats-new-options {
	border-top: none !important;
}

html.theme-dark body #buddypress #aw-whats-new-reset {
	border-color: var(--dark-border-default) !important;
	color: var(--dark-text-secondary) !important;
}

html.theme-dark body #buddypress #aw-whats-new-reset:hover {
	border-color: var(--dark-text-secondary) !important;
	color: var(--dark-text-primary) !important;
}

/* White gap fix — BP wrapper backgrounds */
html.theme-dark body #buddypress,
html.theme-dark body .buddypress-wrap,
html.theme-dark body #buddypress ul.activity-list,
html.theme-dark body .bp-wrap {
	background: transparent !important;
}

/* Tabs */
html.theme-dark body #buddypress .item-list-tabs {
	border-bottom-color: var(--dark-border-default) !important;
}

html.theme-dark body #buddypress .item-list-tabs li a {
	color: var(--dark-text-secondary) !important;
}

html.theme-dark body #buddypress .item-list-tabs li a:hover {
	color: var(--dark-text-primary) !important;
}

html.theme-dark body #buddypress .item-list-tabs li.selected a,
html.theme-dark body #buddypress .item-list-tabs li.current a {
	color: var(--brand-primary) !important;
	border-bottom-color: var(--brand-primary) !important;
}

/* (Search bar hidden — uses global header search instead) */

/* Recipe tags */
html.theme-dark body .activity-recipe-tag {
	background: var(--neon-gold-bg);
	color: var(--neon-gold);
}

html.theme-dark body .activity-recipe-tag.bbq {
	background: var(--neon-coral-bg);
	color: var(--neon-coral);
}

html.theme-dark body .activity-recipe-tag.beer {
	background: var(--neon-cyan-bg);
	color: var(--neon-cyan);
}

/* Empty state */
html.theme-dark body #buddypress #message {
	background: var(--dark-bg-secondary);
	border-color: var(--dark-border-default);
	color: var(--dark-text-secondary);
}

/* Catch-all: reset any BP containers that leak white/light backgrounds */
body #buddypress,
body .buddypress-wrap,
body .bp-wrap {
	background: transparent !important;
}

html.theme-dark body #buddypress .activity-list li,
html.theme-dark body #buddypress .activity-list div {
	background-color: transparent;
}

html.theme-dark body #buddypress .activity-list > li {
	background-color: var(--dark-bg-secondary) !important;
}

/* ========================================
   14. ACCESSIBILITY
   ======================================== */

body #buddypress .activity-meta a:focus-visible,
body #buddypress .activity-meta button:focus-visible {
	outline: 2px solid var(--brand-primary) !important;
	outline-offset: -2px !important;
}

@media (prefers-reduced-motion: reduce) {
	body .activity-meta .unfav .icon,
	body .activity-meta .unfav::before {
		animation: none;
	}
}