/**
 * Cirkle Child Theme — BuddyPress Mobile-First Styles (2026)
 *
 * MOBILE-FIRST: All base styles target phones (≤ 480px).
 * Desktop overrides live behind min-width media queries only.
 * Touch-optimised: 44px min tap targets, no hover-dependent UI,
 * safe-area insets, momentum scrolling, reduced GPU load.
 */

/* ==========================================================================
   0. Design Tokens
   ========================================================================== */

:root {
	/* Brand palette */
	--bp-accent: #6366f1;
	--bp-accent-hover: #4f46e5;
	--bp-accent-soft: rgba(99, 102, 241, 0.10);
	--bp-accent-glow: rgba(99, 102, 241, 0.35);
	--bp-success: #22c55e;
	--bp-warning: #f59e0b;
	--bp-danger: #ef4444;

	/* Surfaces — lighter shadows on mobile to save GPU */
	--bp-bg: #f0f2f5;
	--bp-surface: #ffffff;
	--bp-surface-raised: #ffffff;
	--bp-border: rgba(0, 0, 0, 0.06);
	--bp-border-strong: rgba(0, 0, 0, 0.12);
	--bp-divider: rgba(0, 0, 0, 0.05);

	/* Text */
	--bp-text-primary: #0f172a;
	--bp-text-secondary: #64748b;
	--bp-text-tertiary: #94a3b8;
	--bp-text-inverse: #ffffff;
	--bp-text-link: #6366f1;

	/* Typography */
	--bp-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;

	/* Radii — slightly tighter on phones */
	--bp-radius-sm: 8px;
	--bp-radius-md: 12px;
	--bp-radius-lg: 16px;
	--bp-radius-xl: 24px;
	--bp-radius-full: 9999px;

	/* Shadows — minimal on mobile for perf */
	--bp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
	--bp-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.05);
	--bp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.06);
	--bp-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.08);
	--bp-shadow-glow: 0 0 0 3px var(--bp-accent-glow);

	/* Spacing */
	--bp-space-xs: 4px;
	--bp-space-sm: 8px;
	--bp-space-md: 12px;
	--bp-space-lg: 16px;
	--bp-space-xl: 24px;
	--bp-space-2xl: 32px;

	/* Touch */
	--bp-tap-min: 44px;

	/* Transitions — snappy on mobile */
	--bp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--bp-duration: 0.15s;
	--bp-duration-slow: 0.25s;

	/* Safe areas (notch / Dynamic Island) */
	--bp-safe-top: env(safe-area-inset-top, 0px);
	--bp-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
	:root {
		--bp-bg: #0c0f1a;
		--bp-surface: #1a1d2e;
		--bp-surface-raised: #222639;
		--bp-border: rgba(255, 255, 255, 0.06);
		--bp-border-strong: rgba(255, 255, 255, 0.12);
		--bp-divider: rgba(255, 255, 255, 0.06);
		--bp-text-primary: #f1f5f9;
		--bp-text-secondary: #94a3b8;
		--bp-text-tertiary: #64748b;
		--bp-text-link: #818cf8;
		--bp-accent-soft: rgba(99, 102, 241, 0.18);
		--bp-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20);
		--bp-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.22);
		--bp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.24);
		--bp-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.30);
	}
}

/* ==========================================================================
   1. Font Import
   ========================================================================== */

/* Inter is enqueued in functions.php (an @import here would be ignored). */

/* ==========================================================================
   2. Base / Reset for BuddyPress scope (MOBILE DEFAULT)
   ========================================================================== */

#buddypress {
	font-family: var(--bp-font);
	color: var(--bp-text-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1.55;
	font-size: 15px;
	/* Prevent long words / URLs from breaking layout on phones */
	overflow-wrap: break-word;
	word-break: break-word;
}

#buddypress *,
#buddypress *::before,
#buddypress *::after {
	box-sizing: border-box;
}

#buddypress a {
	color: var(--bp-text-link);
	text-decoration: none;
	transition: color var(--bp-duration) var(--bp-ease);
	/* Touch-friendly tap target */
	-webkit-tap-highlight-color: rgba(99, 102, 241, 0.12);
}

#buddypress img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   3. BuddyPress Container Wrappers (MOBILE DEFAULT — full bleed)
   ========================================================================== */

.cirkle-bp-wrapper {
	padding: var(--bp-space-sm) 0;
	padding-bottom: calc(var(--bp-space-sm) + var(--bp-safe-bottom));
	background: var(--bp-bg);
	min-height: 100dvh; /* dynamic viewport height — respects mobile browser chrome */
}

.cirkle-bp-wrapper .container {
	width: 100%;
	padding: 0 var(--bp-space-sm);
}

.cirkle-bp-single {
	padding-top: 0;
}

/* ==========================================================================
   4. Cards — shared surface primitive (flat on mobile, elevated on desktop)
   ========================================================================== */

.bp-card,
#buddypress .single-headers,
#buddypress .item-body,
#buddypress .bp-wrap .main-navs ul,
#buddypress .activity-update-form,
#buddypress .activity-list > li,
#buddypress #members-list li,
#buddypress #groups-list li,
#buddypress .bp-navs,
#buddypress .bp-feedback {
	background: var(--bp-surface);
	border: 1px solid var(--bp-border);
	border-radius: var(--bp-radius-md);
	box-shadow: var(--bp-shadow-xs);
}

/* ==========================================================================
   5. Directory Pages — MOBILE FIRST
   ========================================================================== */

#buddypress .dir-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

#buddypress .screen-content {
	margin-top: var(--bp-space-md);
}

/* ── Directory Navigation — horizontally scrollable pill row ── */
#buddypress .bp-navs {
	padding: var(--bp-space-xs);
	margin-bottom: var(--bp-space-md);
	/* Enable horizontal swipe scrolling for tabs */
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
#buddypress .bp-navs::-webkit-scrollbar { display: none; }

#buddypress .bp-navs ul {
	display: flex;
	flex-wrap: nowrap; /* single row, scroll horizontally */
	list-style: none;
	margin: 0;
	padding: 0;
	gap: var(--bp-space-xs);
	width: max-content; /* allow scroll overflow */
}

#buddypress .bp-navs ul li {
	margin: 0;
	flex-shrink: 0;
}

#buddypress .bp-navs ul li a,
#buddypress .bp-navs ul li span {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	min-height: var(--bp-tap-min);
	color: var(--bp-text-secondary);
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: -0.01em;
	border-radius: var(--bp-radius-full);
	border: none;
	white-space: nowrap;
	transition: background var(--bp-duration) var(--bp-ease),
				color var(--bp-duration) var(--bp-ease);
}

#buddypress .bp-navs ul li.selected a,
#buddypress .bp-navs ul li.current a {
	background: var(--bp-accent);
	color: var(--bp-text-inverse);
}

/* ── Search & Filter Bar — full width stacked on mobile ── */
#buddypress .search-and-filters-bar,
#buddypress .subnav-filters {
	display: flex;
	flex-direction: column;
	gap: var(--bp-space-sm);
	padding: var(--bp-space-sm) 0;
}

#buddypress .search-and-filters-bar .bp-search form {
	display: flex;
	width: 100%;
}

#buddypress .search-and-filters-bar .bp-search input[type="search"],
#buddypress .search-and-filters-bar .bp-search input[type="text"] {
	flex: 1;
	border: 1px solid var(--bp-border-strong);
	border-radius: var(--bp-radius-full) 0 0 var(--bp-radius-full);
	padding: 10px 14px;
	font-size: 16px; /* prevent iOS zoom */
	font-family: var(--bp-font);
	background: var(--bp-surface);
	color: var(--bp-text-primary);
	outline: none;
	min-height: var(--bp-tap-min);
	transition: border-color var(--bp-duration) var(--bp-ease);
}

#buddypress .search-and-filters-bar .bp-search input[type="search"]:focus,
#buddypress .search-and-filters-bar .bp-search input[type="text"]:focus {
	border-color: var(--bp-accent);
}

#buddypress .search-and-filters-bar .bp-search button,
#buddypress .search-and-filters-bar .bp-search input[type="submit"] {
	border-radius: 0 var(--bp-radius-full) var(--bp-radius-full) 0;
	border: none;
	background: var(--bp-accent);
	color: var(--bp-text-inverse);
	padding: 10px 18px;
	font-weight: 600;
	font-size: 14px;
	cursor: pointer;
	min-height: var(--bp-tap-min);
}

/* ==========================================================================
   6. Members & Groups Loop Lists — MOBILE (single column, compact)
   ========================================================================== */

#buddypress #members-list,
#buddypress #groups-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bp-space-sm);
}

#buddypress #members-list li,
#buddypress #groups-list li {
	margin-bottom: 0;
	overflow: hidden;
}

#buddypress .list-wrap {
	display: flex;
	align-items: center;
	padding: var(--bp-space-md);
	gap: var(--bp-space-md);
}

/* Avatar ring — social-media style */
#buddypress .item-avatar {
	position: relative;
	flex-shrink: 0;
}

#buddypress .item-avatar a {
	display: block;
	border-radius: var(--bp-radius-full);
	padding: 2px;
	background: linear-gradient(135deg, var(--bp-accent), #ec4899, #f59e0b);
}

#buddypress .item-avatar img {
	border-radius: var(--bp-radius-full);
	width: 52px;
	height: 52px;
	object-fit: cover;
	display: block;
	border: 2px solid var(--bp-surface);
}

#buddypress .item {
	flex: 1;
	min-width: 0;
}

#buddypress .list-title {
	margin: 0 0 2px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.02em;
}

#buddypress .list-title a {
	color: var(--bp-text-primary);
}

#buddypress .item-meta {
	color: var(--bp-text-tertiary);
	font-size: 12px;
	margin: 0 0 6px;
	font-weight: 500;
}

/* Action buttons — full-width stacked on mobile */
#buddypress .action {
	display: flex;
	flex-direction: column;
	gap: var(--bp-space-xs);
	margin-top: var(--bp-space-sm);
}

#buddypress .generic-button a,
#buddypress .generic-button button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 100%;
	padding: 10px 16px;
	min-height: var(--bp-tap-min);
	border: none;
	border-radius: var(--bp-radius-full);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	background: var(--bp-accent-soft);
	color: var(--bp-accent);
	transition: background var(--bp-duration) var(--bp-ease);
}

#buddypress .generic-button a:active,
#buddypress .generic-button button:active {
	background: var(--bp-accent);
	color: var(--bp-text-inverse);
}

/* Grid layout forced to single column on mobile */
#buddypress #members-list.grid,
#buddypress #groups-list.grid {
	display: flex;
	flex-direction: column;
	gap: var(--bp-space-sm);
}

/* ==========================================================================
   7. Single Member / Group Profile — MOBILE FIRST
   ========================================================================== */

#buddypress .single-headers {
	margin-bottom: var(--bp-space-md);
	overflow: hidden;
}

/* Cover Image — compact on phone */
#buddypress #cover-image-container {
	position: relative;
}

#buddypress #header-cover-image {
	height: 160px;
	background-size: cover;
	background-position: center;
	background-color: var(--bp-surface-raised);
	position: relative;
}

/* Gradient overlay */
#buddypress #header-cover-image::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		transparent 40%,
		rgba(0, 0, 0, 0.5) 100%
	);
	pointer-events: none;
}

/* Profile header — stacked centered layout for phones */
#buddypress #item-header-cover-image {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 0 var(--bp-space-md) var(--bp-space-md);
	margin-top: -48px;
	position: relative;
	z-index: 1;
	gap: var(--bp-space-sm);
}

#buddypress #item-header-avatar {
	flex-shrink: 0;
}

#buddypress #item-header-avatar a {
	display: block;
	border-radius: var(--bp-radius-full);
	padding: 3px;
	background: linear-gradient(135deg, var(--bp-accent), #ec4899, #f59e0b);
	box-shadow: var(--bp-shadow-md);
}

#buddypress #item-header-avatar a img {
	border-radius: var(--bp-radius-full);
	border: 3px solid var(--bp-surface);
	width: 88px;
	height: 88px;
	object-fit: cover;
	display: block;
}

#buddypress #item-header-content {
	padding: var(--bp-space-xs) 0;
	flex: 1;
	min-width: 0;
	text-align: center;
}

#buddypress #item-header-content .user-nicename {
	font-size: 13px;
	color: var(--bp-text-tertiary);
	margin: 2px 0 var(--bp-space-sm);
	font-weight: 500;
}

/* Member Header Actions — stacked full-width on mobile */
#buddypress .member-header-actions {
	display: flex;
	flex-direction: column;
	gap: var(--bp-space-xs);
	margin-top: var(--bp-space-sm);
	width: 100%;
}

#buddypress .member-header-actions .generic-button a,
#buddypress .member-header-actions .generic-button button {
	width: 100%;
	justify-content: center;
	padding: 12px 20px;
	font-size: 14px;
	min-height: var(--bp-tap-min);
}

/* Primary action button (first child) */
#buddypress .member-header-actions .generic-button:first-child a,
#buddypress .member-header-actions .generic-button:first-child button {
	background: var(--bp-accent);
	color: var(--bp-text-inverse);
}

/* ==========================================================================
   8. BP Wrap (Profile Navigation + Content) — MOBILE: stacked
   ========================================================================== */

#buddypress .bp-wrap {
	display: flex;
	flex-direction: column;
	gap: var(--bp-space-md);
}

/* Profile sub-nav — horizontal scrollable tabs on mobile */
#buddypress .bp-wrap .main-navs {
	width: 100%;
	position: static;
	order: -1; /* nav above content */
}

#buddypress .bp-wrap .main-navs ul {
	list-style: none;
	margin: 0;
	padding: var(--bp-space-xs);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	display: flex;
	flex-wrap: nowrap;
	gap: var(--bp-space-xs);
}
#buddypress .bp-wrap .main-navs ul::-webkit-scrollbar { display: none; }

#buddypress .bp-wrap .main-navs ul li {
	flex-shrink: 0;
}

#buddypress .bp-wrap .main-navs ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 14px;
	min-height: var(--bp-tap-min);
	color: var(--bp-text-secondary);
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	border-radius: var(--bp-radius-full);
	white-space: nowrap;
	transition: background var(--bp-duration) var(--bp-ease),
				color var(--bp-duration) var(--bp-ease);
}

#buddypress .bp-wrap .main-navs ul li.selected a,
#buddypress .bp-wrap .main-navs ul li.current a {
	background: var(--bp-accent);
	color: var(--bp-text-inverse);
}

#buddypress .bp-wrap .main-navs ul li a .count {
	background: var(--bp-accent-soft);
	border-radius: var(--bp-radius-full);
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 700;
	color: var(--bp-accent);
	min-width: 20px;
	text-align: center;
	float: none;
}

#buddypress .bp-wrap .main-navs ul li.selected a .count,
#buddypress .bp-wrap .main-navs ul li.current a .count {
	background: rgba(255, 255, 255, 0.25);
	color: var(--bp-text-inverse);
}

#buddypress .item-body {
	flex: 1;
	min-width: 0;
	padding: var(--bp-space-md);
	border-radius: var(--bp-radius-md);
}

/* ==========================================================================
   9. Activity Stream — Social Feed (MOBILE)
   ========================================================================== */

#buddypress .activity-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bp-space-sm);
}

#buddypress .activity-list > li {
	padding: var(--bp-space-md);
	margin-bottom: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--bp-space-sm);
	align-items: flex-start;
}

/* Activity avatar — no float */
#buddypress .activity-list > li .activity-avatar {
	float: none;
	margin-right: 0;
	flex-shrink: 0;
}

#buddypress .activity-list > li .activity-avatar img {
	border-radius: var(--bp-radius-full);
	width: 40px;
	height: 40px;
	object-fit: cover;
	display: block;
}

#buddypress .activity-content {
	overflow: visible;
	flex: 1;
	min-width: 0;
}

#buddypress .activity-header {
	margin-bottom: var(--bp-space-xs);
	font-size: 13px;
	color: var(--bp-text-secondary);
	line-height: 1.4;
}

#buddypress .activity-header a {
	color: var(--bp-text-primary);
	font-weight: 700;
}

#buddypress .activity-header .time-since {
	color: var(--bp-text-tertiary);
	font-size: 11px;
	font-weight: 500;
}

#buddypress .activity-inner {
	margin-bottom: var(--bp-space-sm);
	line-height: 1.6;
	font-size: 14px;
	color: var(--bp-text-primary);
}

/* Reaction bar — spread across on phone */
#buddypress .activity-meta {
	display: flex;
	gap: var(--bp-space-xs);
	padding-top: var(--bp-space-sm);
	border-top: 1px solid var(--bp-divider);
	flex-basis: 100%;
	justify-content: space-around;
}

#buddypress .activity-meta a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px 12px;
	min-height: var(--bp-tap-min);
	border-radius: var(--bp-radius-full);
	font-size: 12px;
	font-weight: 600;
	color: var(--bp-text-secondary);
	transition: background var(--bp-duration) var(--bp-ease);
}

#buddypress .activity-meta a:active {
	background: var(--bp-accent-soft);
	color: var(--bp-accent);
}

#buddypress .activity-meta a.favorited,
#buddypress .activity-meta a.fav {
	color: #ef4444;
}

/* Activity Post Form — compact on mobile */
#buddypress .activity-update-form {
	padding: var(--bp-space-md);
	margin-bottom: var(--bp-space-md);
}

#buddypress .activity-update-form textarea,
#buddypress .activity-update-form #whats-new {
	width: 100%;
	border: 1px solid var(--bp-border);
	border-radius: var(--bp-radius-md);
	padding: var(--bp-space-md);
	font-family: var(--bp-font);
	font-size: 16px; /* prevent iOS zoom */
	color: var(--bp-text-primary);
	background: var(--bp-bg);
	resize: vertical;
	min-height: 64px;
	transition: border-color var(--bp-duration) var(--bp-ease);
}

#buddypress .activity-update-form textarea:focus,
#buddypress .activity-update-form #whats-new:focus {
	outline: none;
	border-color: var(--bp-accent);
}

#buddypress .activity-update-form #aw-whats-new-submit input[type="submit"] {
	background: var(--bp-accent);
	color: var(--bp-text-inverse);
	border: none;
	border-radius: var(--bp-radius-full);
	padding: 12px 24px;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
	min-height: var(--bp-tap-min);
	width: 100%;
}

/* Activity Comments — tighter indent on mobile */
#buddypress .activity-comments {
	clear: both;
	margin-top: var(--bp-space-sm);
	padding-top: var(--bp-space-sm);
	border-top: 1px solid var(--bp-divider);
	flex-basis: 100%;
}

#buddypress .activity-comments ul {
	list-style: none;
	margin: 0;
	padding-left: var(--bp-space-lg);
}

#buddypress .activity-comments li {
	padding: var(--bp-space-xs) 0;
}

#buddypress .activity-comments .acomment-avatar img {
	border-radius: var(--bp-radius-full);
	width: 28px;
	height: 28px;
	object-fit: cover;
}

#buddypress .activity-comments .acomment-content {
	background: var(--bp-bg);
	padding: var(--bp-space-sm) var(--bp-space-md);
	border-radius: var(--bp-radius-md);
	margin-top: var(--bp-space-xs);
	font-size: 13px;
}

#buddypress .activity-comments .ac-form textarea {
	width: 100%;
	border: 1px solid var(--bp-border);
	border-radius: var(--bp-radius-md);
	padding: var(--bp-space-sm) var(--bp-space-md);
	font-family: var(--bp-font);
	font-size: 16px; /* prevent iOS zoom */
	background: var(--bp-bg);
	color: var(--bp-text-primary);
}

/* Load More */
#buddypress .load-more {
	text-align: center;
	padding: var(--bp-space-lg);
}

#buddypress .load-more a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 32px;
	min-height: var(--bp-tap-min);
	background: var(--bp-accent-soft);
	color: var(--bp-accent);
	border-radius: var(--bp-radius-full);
	text-decoration: none;
	font-weight: 700;
	font-size: 14px;
}

#buddypress .load-more a:active {
	background: var(--bp-accent);
	color: var(--bp-text-inverse);
}

/* ==========================================================================
   10. Pagination — MOBILE (compact)
   ========================================================================== */

#buddypress .bp-pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--bp-space-sm);
	padding: var(--bp-space-md) 0;
	font-size: 12px;
	color: var(--bp-text-tertiary);
	font-weight: 500;
}

#buddypress .bp-pagination .pagination-links a,
#buddypress .bp-pagination .pagination-links span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--bp-tap-min);
	height: var(--bp-tap-min);
	padding: 0 10px;
	margin: 0 2px;
	border: 1px solid var(--bp-border-strong);
	border-radius: var(--bp-radius-full);
	text-decoration: none;
	color: var(--bp-text-secondary);
	font-weight: 600;
}

#buddypress .bp-pagination .pagination-links .current {
	background: var(--bp-accent);
	color: var(--bp-text-inverse);
	border-color: var(--bp-accent);
}

/* ==========================================================================
   11. Notices & Feedback
   ========================================================================== */

#buddypress .bp-feedback {
	padding: var(--bp-space-md);
	margin-bottom: var(--bp-space-md);
	border-left: 4px solid var(--bp-accent);
	display: flex;
	align-items: center;
	gap: var(--bp-space-sm);
	font-weight: 500;
	font-size: 13px;
}

#buddypress .bp-feedback.error {
	border-left-color: var(--bp-danger);
	background: rgba(239, 68, 68, 0.06);
}

#buddypress .bp-feedback.success {
	border-left-color: var(--bp-success);
	background: rgba(34, 197, 94, 0.06);
}

#buddypress .bp-feedback.warning {
	border-left-color: var(--bp-warning);
	background: rgba(245, 158, 11, 0.06);
}

#buddypress .bp-feedback.loading {
	border-left-color: var(--bp-accent);
}

/* Ajax loader */
#buddypress #bp-ajax-loader {
	padding: var(--bp-space-xl) var(--bp-space-md);
	text-align: center;
	color: var(--bp-text-tertiary);
}

#buddypress #bp-ajax-loader::after {
	content: '';
	display: block;
	width: 32px;
	height: 32px;
	margin: var(--bp-space-sm) auto 0;
	border: 3px solid var(--bp-border);
	border-top-color: var(--bp-accent);
	border-radius: var(--bp-radius-full);
	animation: bp-spin 0.7s linear infinite;
}

@keyframes bp-spin {
	to { transform: rotate(360deg); }
}

/* ==========================================================================
   12. Member Type Badge
   ========================================================================== */

#buddypress .member-type-list,
#buddypress .group-type-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bp-space-xs);
	margin-top: var(--bp-space-sm);
	justify-content: center;
}

#buddypress .member-type-list span,
#buddypress .group-type-list span {
	display: inline-block;
	padding: 3px 10px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: var(--bp-radius-full);
	background: var(--bp-accent-soft);
	color: var(--bp-accent);
}

/* ==========================================================================
   13. Forms — MOBILE defaults (16px font to prevent iOS zoom)
   ========================================================================== */

#buddypress input[type="text"],
#buddypress input[type="email"],
#buddypress input[type="password"],
#buddypress input[type="url"],
#buddypress input[type="search"],
#buddypress textarea,
#buddypress select {
	font-family: var(--bp-font);
	font-size: 16px; /* prevent iOS zoom on focus */
	color: var(--bp-text-primary);
	background: var(--bp-surface);
	border: 1px solid var(--bp-border-strong);
	border-radius: var(--bp-radius-sm);
	padding: 10px 14px;
	min-height: var(--bp-tap-min);
	width: 100%;
	transition: border-color var(--bp-duration) var(--bp-ease);
}

#buddypress input[type="text"]:focus,
#buddypress input[type="email"]:focus,
#buddypress input[type="password"]:focus,
#buddypress input[type="url"]:focus,
#buddypress input[type="search"]:focus,
#buddypress textarea:focus,
#buddypress select:focus {
	outline: none;
	border-color: var(--bp-accent);
}

#buddypress input[type="submit"],
#buddypress button[type="submit"] {
	font-family: var(--bp-font);
	font-size: 15px;
	font-weight: 700;
	background: var(--bp-accent);
	color: var(--bp-text-inverse);
	border: none;
	border-radius: var(--bp-radius-full);
	padding: 12px 24px;
	min-height: var(--bp-tap-min);
	width: 100%;
	cursor: pointer;
	-webkit-appearance: none;
}

#buddypress input[type="submit"]:active,
#buddypress button[type="submit"]:active {
	background: var(--bp-accent-hover);
}

/* ==========================================================================
   14. Animations — lighter on mobile for battery / perf
   ========================================================================== */

#buddypress .activity-list > li,
#buddypress #members-list > li,
#buddypress #groups-list > li {
	animation: bp-card-in var(--bp-duration-slow) var(--bp-ease) backwards;
}

@keyframes bp-card-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Only stagger first 3 on mobile to keep things snappy */
#buddypress .activity-list > li:nth-child(1),
#buddypress #members-list > li:nth-child(1),
#buddypress #groups-list > li:nth-child(1) { animation-delay: 0ms; }
#buddypress .activity-list > li:nth-child(2),
#buddypress #members-list > li:nth-child(2),
#buddypress #groups-list > li:nth-child(2) { animation-delay: 40ms; }
#buddypress .activity-list > li:nth-child(3),
#buddypress #members-list > li:nth-child(3),
#buddypress #groups-list > li:nth-child(3) { animation-delay: 80ms; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	#buddypress .activity-list > li,
	#buddypress #members-list > li,
	#buddypress #groups-list > li,
	#buddypress * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   15. TABLET ENHANCEMENTS (min-width: 600px)
   ========================================================================== */

@media (min-width: 600px) {
	:root {
		--bp-space-md: 16px;
		--bp-space-lg: 24px;
		--bp-space-xl: 32px;
		--bp-radius-md: 14px;
		--bp-radius-lg: 20px;
	}

	.cirkle-bp-wrapper .container {
		max-width: 680px;
		margin: 0 auto;
		padding: 0 var(--bp-space-md);
	}

	#buddypress .item-avatar img {
		width: 64px;
		height: 64px;
		border: 3px solid var(--bp-surface);
	}

	#buddypress .list-wrap {
		padding: var(--bp-space-lg);
	}

	#buddypress .list-title {
		font-size: 16px;
	}

	#buddypress .activity-list > li {
		padding: var(--bp-space-lg);
	}

	#buddypress .activity-list > li .activity-avatar img {
		width: 44px;
		height: 44px;
	}

	#buddypress #header-cover-image {
		height: 200px;
	}

	#buddypress #item-header-avatar a img {
		width: 100px;
		height: 100px;
	}

	#buddypress .action {
		flex-direction: row;
		flex-wrap: wrap;
	}

	#buddypress .generic-button a,
	#buddypress .generic-button button {
		width: auto;
	}

	#buddypress .member-header-actions {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
	}

	#buddypress .member-header-actions .generic-button a,
	#buddypress .member-header-actions .generic-button button {
		width: auto;
	}

	#buddypress .bp-pagination {
		flex-direction: row;
		justify-content: space-between;
	}

	#buddypress input[type="submit"],
	#buddypress button[type="submit"] {
		width: auto;
	}

	#buddypress .activity-update-form #aw-whats-new-submit input[type="submit"] {
		width: auto;
	}

	/* Search can sit inline on tablets */
	#buddypress .search-and-filters-bar,
	#buddypress .subnav-filters {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
	}

	#buddypress .search-and-filters-bar .bp-search form {
		max-width: 380px;
	}
}

/* ==========================================================================
   16. DESKTOP ENHANCEMENTS (min-width: 992px)
   — Not the priority. Basic usability only.
   ========================================================================== */

@media (min-width: 992px) {
	:root {
		--bp-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
		--bp-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
		--bp-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.10);
	}

	.cirkle-bp-wrapper {
		padding: var(--bp-space-xl) 0;
	}

	.cirkle-bp-wrapper .container {
		max-width: 960px;
	}

	/* Cards get full elevation on desktop (mouse only, not large touch screens) */
	@media (hover: hover) {
		.bp-card:hover,
		#buddypress .activity-list > li:hover,
		#buddypress #members-list li:hover,
		#buddypress #groups-list li:hover {
			box-shadow: var(--bp-shadow-md);
			transform: translateY(-2px);
		}
	}

	/* bp-wrap — side nav on desktop */
	#buddypress .bp-wrap {
		flex-direction: row;
	}

	#buddypress .bp-wrap .main-navs {
		flex: 0 0 220px;
		position: sticky;
		top: var(--bp-space-lg);
		align-self: flex-start;
	}

	#buddypress .bp-wrap .main-navs ul {
		flex-direction: column;
		flex-wrap: nowrap;
		overflow-x: visible;
	}

	#buddypress .bp-wrap .main-navs ul li a:hover {
		background: var(--bp-accent-soft);
		color: var(--bp-accent);
	}

	#buddypress .item-body {
		padding: var(--bp-space-xl);
	}

	/* Profile header — horizontal on desktop */
	#buddypress #header-cover-image {
		height: 280px;
	}

	#buddypress #item-header-cover-image {
		flex-direction: row;
		align-items: flex-end;
		text-align: left;
		margin-top: -80px;
		padding: 0 var(--bp-space-xl) var(--bp-space-lg);
		gap: var(--bp-space-lg);
	}

	#buddypress #item-header-content {
		text-align: left;
	}

	#buddypress #item-header-avatar a img {
		width: 140px;
		height: 140px;
		border: 4px solid var(--bp-surface);
	}

	#buddypress .member-header-actions {
		justify-content: flex-start;
	}

	#buddypress .member-type-list,
	#buddypress .group-type-list {
		justify-content: flex-start;
	}

	/* Grid layout for directories */
	#buddypress #members-list.grid,
	#buddypress #groups-list.grid {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
		gap: var(--bp-space-md);
	}

	#buddypress #members-list.grid .list-wrap,
	#buddypress #groups-list.grid .list-wrap {
		flex-direction: column;
		align-items: center;
		text-align: center;
		padding: var(--bp-space-xl) var(--bp-space-lg);
	}

	#buddypress #members-list.grid .item-avatar img,
	#buddypress #groups-list.grid .item-avatar img {
		width: 80px;
		height: 80px;
	}

	/* Hover states only on desktop */
	#buddypress .bp-navs ul li a:hover {
		background: var(--bp-accent-soft);
		color: var(--bp-accent);
	}

	#buddypress .generic-button a:hover,
	#buddypress .generic-button button:hover {
		background: var(--bp-accent);
		color: var(--bp-text-inverse);
		box-shadow: 0 4px 12px var(--bp-accent-glow);
	}

	#buddypress .activity-meta a:hover {
		background: var(--bp-accent-soft);
		color: var(--bp-accent);
	}

	#buddypress .load-more a:hover {
		background: var(--bp-accent);
		color: var(--bp-text-inverse);
	}

	#buddypress .search-and-filters-bar .bp-search button:hover,
	#buddypress .search-and-filters-bar .bp-search input[type="submit"]:hover {
		background: var(--bp-accent-hover);
	}

	#buddypress input[type="submit"]:hover,
	#buddypress button[type="submit"]:hover {
		background: var(--bp-accent-hover);
	}

	/* Stagger more items on desktop */
	#buddypress .activity-list > li:nth-child(4),
	#buddypress #members-list > li:nth-child(4),
	#buddypress #groups-list > li:nth-child(4) { animation-delay: 120ms; }
	#buddypress .activity-list > li:nth-child(5),
	#buddypress #members-list > li:nth-child(5),
	#buddypress #groups-list > li:nth-child(5) { animation-delay: 160ms; }

	/* Directory nav can wrap on desktop */
	#buddypress .bp-navs ul {
		flex-wrap: wrap;
		width: auto;
	}

	#buddypress .bp-navs ul li a,
	#buddypress .bp-navs ul li span {
		padding: 10px 20px;
		font-size: 14px;
	}
}