/*
 * LOGICAL PROPERTIES, NOT PHYSICAL — so this sheet works in RTL without an RTL build.
 *
 * This file had no RTL build and no RTL enqueue, and it was loaded as-is on an Arabic site. Every
 * `margin-left`, `border-left`, `left:` in it pointed the wrong way: avatars on the wrong side of a
 * name, accent borders on the outside edge of a card, absolutely-positioned badges over the top of
 * the text they were meant to sit beside.
 *
 * `margin-inline-start` means "the start side, whichever that is". It flips by itself. Which is why
 * `bpmbp-frontend-components.css` — written logical-first — has never needed an RTL build, and this
 * one now does not either.
 */


/* ==========================================================================
	Notice
   ========================================================================== */

.bpmb-template-notice {
	margin: 1em 0;
	padding: 14px 20px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.bpmb-template-notice p {
	margin: 0;
}

.bpmb-template-notice.success {
	background: var(--bpmb-success-filled, var(--bpmb-success));
	color: var(--bpmb-on-success, var(--bpmb-text-light));
}

.bpmb-template-notice.error {
	background: var(--bpmb-danger);
	color: var(--bpmb-on-danger, var(--bpmb-text-light));
}

.bpmb-template-notice.info {
	background: var(--bpmb-primary);
	color: var(--bpmb-text-light);
}

/*--------------------------------------------------------------
# Series Navigation - Compact Inline Style
--------------------------------------------------------------*/
.bpmb-series-nav-inline {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1em;
	margin: 1.5em 0;
	padding: 0.75em 1em;
	background: var(--bpmb-series-bg-light);
	border: 1px solid var(--bpmb-series-border);
	border-radius: var(--bpmb-series-radius);
	font-size: 0.9375rem;
}

.bpmb-series-nav-inline .bpmb-nav-prev,
.bpmb-series-nav-inline .bpmb-nav-next {
	color: var(--bpmb-primary-ink, var(--bpmb-series-primary));
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
	transition: color 0.15s ease;
}

.bpmb-series-nav-inline .bpmb-nav-prev:hover,
.bpmb-series-nav-inline .bpmb-nav-next:hover {
	color: var(--bpmb-series-primary-hover);
	text-decoration: underline;
}

.bpmb-series-nav-inline .bpmb-nav-series {
	color: var(--bpmb-series-text);
	border-inline-start: 1px solid var(--bpmb-series-border);
	border-inline-end: 1px solid var(--bpmb-series-border);
	padding: 0 1em;
}

.bpmb-series-nav-inline .bpmb-nav-series a {
	color: var(--bpmb-series-text);
	text-decoration: none;
	font-weight: 600;
}

.bpmb-series-nav-inline .bpmb-nav-series a:hover {
	color: var(--bpmb-primary-ink, var(--bpmb-series-primary));
}

.bpmb-series-nav-inline .bpmb-nav-position {
	color: var(--bpmb-series-text-muted);
	font-weight: 400;
	margin-inline-start: 0.25em;
}

/* When only prev or next exists, remove unnecessary border */
.bpmb-series-nav-inline .bpmb-nav-series:first-child {
	border-inline-start: none;
	padding-inline-start: 0;
}

.bpmb-series-nav-inline .bpmb-nav-series:last-child {
	border-inline-end: none;
	padding-inline-end: 0;
}

/*--------------------------------------------------------------
# Series Navigation - Arrows Style
--------------------------------------------------------------*/
.bpmb-series-nav-arrows .bpmb-series-nav-links {
	justify-content: center;
	gap: 2em;
}

.bpmb-series-nav-arrows .bpmb-series-nav-prev,
.bpmb-series-nav-arrows .bpmb-series-nav-next {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.75em 1.5em;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--bpmb-primary-ink, var(--bpmb-series-primary));
	background: var(--bpmb-series-bg);
	border: 2px solid var(--bpmb-series-primary);
	border-radius: 50px;
	text-decoration: none;
	transition: all 0.2s ease;
}

.bpmb-series-nav-arrows .bpmb-series-nav-prev:hover,
.bpmb-series-nav-arrows .bpmb-series-nav-next:hover {
	background: var(--bpmb-series-primary) !important;
	color: var(--bpmb-text-light) !important;
}

.bpmb-series-nav-arrows .bpmb-series-nav-prev svg,
.bpmb-series-nav-arrows .bpmb-series-nav-next svg {
	width: 18px;
	height: 18px;
	transition: transform 0.2s ease;
}

.bpmb-series-nav-arrows .bpmb-series-nav-prev:hover svg {
	transform: translateX(-3px);
}

.bpmb-series-nav-arrows .bpmb-series-nav-next:hover svg {
	transform: translateX(3px);
}

/*--------------------------------------------------------------
# Series Navigation - Numbers Style
--------------------------------------------------------------*/
.bpmb-series-nav-numbers .bpmb-series-nav-links {
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.5em;
}

.bpmb-series-nav-numbers .bpmb-series-nav-item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--bpmb-series-text);
	background: var(--bpmb-series-bg);
	border: 1px solid var(--bpmb-series-border);
	border-radius: 50%;
	text-decoration: none;
	transition: all 0.2s ease;
}

.bpmb-series-nav-numbers .bpmb-series-nav-item:hover {
	border-color: var(--bpmb-series-primary) !important;
	color: var(--bpmb-primary-ink, var(--bpmb-series-primary)) !important;
}

.bpmb-series-nav-numbers .bpmb-series-nav-item.current {
	background: var(--bpmb-series-primary) !important;
	border-color: var(--bpmb-series-primary) !important;
	color: var(--bpmb-text-light) !important;
}

.bpmb-series-nav-numbers .bpmb-series-nav-item.completed {
	background: var(--bpmb-success-filled, var(--bpmb-series-success)) !important;
	border-color: var(--bpmb-series-success) !important;
	color: var(--bpmb-on-success, var(--bpmb-text-light)) !important;
}

/*--------------------------------------------------------------
# Series Table of Contents
--------------------------------------------------------------*/
.bpmb-series-toc {
	margin: 1.5em 0;
	padding: 1.5em;
	background: var(--bpmb-series-bg);
	border: 1px solid var(--bpmb-series-border);
	border-radius: var(--bpmb-series-radius);
	box-shadow: var(--bpmb-series-shadow);
}

.bpmb-series-toc-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1em;
}

.bpmb-series-toc-title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--bpmb-series-text);
}

.bpmb-series-toc-toggle {
	background: none;
	border: none;
	padding: 0.5em;
	cursor: pointer;
	color: var(--bpmb-series-text-muted);
	transition: transform 0.2s ease;
}

.bpmb-series-toc-toggle.collapsed {
	transform: rotate(-90deg);
}

/* TOC List */
.bpmb-series-toc-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bpmb-series-toc-item {
	margin: 0; /* Themes give list items a bottom margin; the border is the separator here. */
	border-bottom: 1px solid var(--bpmb-series-border);
}

.bpmb-series-toc-item:last-child {
	border-bottom: none;
}

.bpmb-series-toc-link {
	display: flex;
	align-items: center;
	gap: 1em;
	min-height: 44px;
	padding: 0.5em 0;
	text-decoration: none;
	transition: all 0.2s ease;
}

.bpmb-series-toc-link:hover {
	padding-inline-start: 0.5em;
}

/* Part Number */
.bpmb-series-toc-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--bpmb-series-text-muted);
	background: var(--bpmb-series-bg-light);
	border: 1px solid var(--bpmb-series-border);
	border-radius: 50%;
	flex-shrink: 0;
	transition: all 0.2s ease;
}

.bpmb-series-toc-link:hover .bpmb-series-toc-number {
	background: var(--bpmb-series-primary);
	border-color: var(--bpmb-series-primary);
	color: var(--bpmb-text-light);
}

/* Current Item */
.bpmb-series-toc-item.current .bpmb-series-toc-number {
	background: var(--bpmb-series-primary);
	border-color: var(--bpmb-series-primary);
	color: var(--bpmb-text-light);
}

.bpmb-series-toc-item.current .bpmb-series-toc-post-title {
	font-weight: 600;
	color: var(--bpmb-primary-ink, var(--bpmb-series-primary));
}

/* Completed Item */
.bpmb-series-toc-item.completed .bpmb-series-toc-number {
	background: var(--bpmb-success-filled, var(--bpmb-series-success));
	border-color: var(--bpmb-series-success);
	color: var(--bpmb-on-success, var(--bpmb-text-light));
}

.bpmb-series-toc-item.completed .bpmb-series-toc-number::after {
	content: '\2713';
}

/* Post Title */
.bpmb-series-toc-post-title {
	flex: 1;
	font-size: 0.9375rem;
	color: var(--bpmb-series-text);
	line-height: 1.4;
}

.bpmb-series-toc-link:hover .bpmb-series-toc-post-title {
	color: var(--bpmb-primary-ink, var(--bpmb-series-primary));
}

/*--------------------------------------------------------------
# Series Landing Page
--------------------------------------------------------------*/
.bpmb-series-landing {
	max-width: 900px;
	margin: 0 auto;
	padding: 2em 1em;
}

/* Series Header */
.bpmb-series-header {
	text-align: center;
	margin-bottom: 3em;
}

.bpmb-series-header-title {
	margin: 0 0 0.5em;
	font-size: 2.5rem;
	font-weight: 700;
	color: var(--bpmb-series-text);
	line-height: 1.2;
}

.bpmb-series-header-meta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 1em 2em;
	margin-bottom: 1em;
	font-size: 0.9375rem;
	color: var(--bpmb-series-text-muted);
}

.bpmb-series-header-meta span {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
}

.bpmb-series-header-description {
	max-width: 700px;
	margin: 1.5em auto 0;
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--bpmb-series-text-muted);
}

/* Series Progress Bar */
.bpmb-series-progress {
	margin: 2em 0;
}

.bpmb-series-progress-label {
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5em;
	font-size: 0.875rem;
	color: var(--bpmb-series-text-muted);
}

.bpmb-series-progress-bar {
	height: 8px;
	background: var(--bpmb-series-border);
	border-radius: 4px;
	overflow: hidden;
}

.bpmb-series-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--bpmb-series-success), #34d058);
	border-radius: 4px;
	transition: width 0.3s ease;
}

/* Continue Reading */
.bpmb-series-continue {
	text-align: center;
	margin: 2em 0;
}

.bpmb-series-continue-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.75em;
	padding: 1em 2em;
	font-size: 1rem;
	font-weight: 600;
	/* `--bpmb-primary-filled`, not the raw accent: this is a filled button with a text label, and the
	   theme's accent is not guaranteed to carry a light label. Measured on BuddyX Pro before the fix,
	   3.62:1 against the 4.5:1 AA needs. Paired with `--bpmb-on-primary`, which flips dark in dark
	   mode where the accent goes pale. */
	color: var(--bpmb-on-primary, var(--bpmb-text-light));
	background: var(--bpmb-primary-filled, var(--bpmb-series-primary));
	border: none;
	border-radius: 50px;
	text-decoration: none;
	transition: all 0.2s ease;
	box-shadow: 0 4px 12px rgba(36, 104, 198, 0.3);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--bpmb-primary) 30%, transparent);
}

.bpmb-series-continue-btn:hover {
	background: var(--bpmb-series-primary-hover);
	color: var(--bpmb-text-light);
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(36, 104, 198, 0.4);
	box-shadow: 0 6px 16px color-mix(in srgb, var(--bpmb-primary) 40%, transparent);
}

.bpmb-series-continue-btn svg {
	transition: transform 0.2s ease;
}

.bpmb-series-continue-btn:hover svg {
	transform: translateX(3px);
}

/* Series Posts List */
.bpmb-series-posts {
	margin-top: 3em;
}

.bpmb-series-posts-title {
	margin: 0 0 1.5em;
	font-size: 1.25rem;
	font-weight: 600;
	color: var(--bpmb-series-text);
	text-align: center;
}

.bpmb-series-posts-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bpmb-series-post-card {
	display: flex;
	gap: 1.5em;
	padding: 1.5em;
	margin-bottom: 1em;
	background: var(--bpmb-series-bg);
	border: 1px solid var(--bpmb-series-border);
	border-radius: var(--bpmb-series-radius);
	transition: all 0.2s ease;
}

.bpmb-series-post-card:hover {
	border-color: var(--bpmb-series-primary);
	box-shadow: var(--bpmb-series-shadow);
	transform: translateY(-2px);
}

/* Post Number */
.bpmb-series-post-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--bpmb-series-text-muted);
	background: var(--bpmb-series-bg-light);
	border: 2px solid var(--bpmb-series-border);
	border-radius: 50%;
	flex-shrink: 0;
}

.bpmb-series-post-card.completed .bpmb-series-post-number {
	background: var(--bpmb-success-filled, var(--bpmb-series-success));
	border-color: var(--bpmb-series-success);
	color: var(--bpmb-on-success, var(--bpmb-text-light));
}

.bpmb-series-post-card.current .bpmb-series-post-number {
	background: var(--bpmb-series-primary);
	border-color: var(--bpmb-series-primary);
	color: var(--bpmb-text-light);
}

/* Post Content */
.bpmb-series-post-content {
	flex: 1;
}

.bpmb-series-post-title {
	margin: 0 0 0.5em;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.4;
}

.bpmb-series-post-title a {
	color: var(--bpmb-series-text);
	text-decoration: none;
}

.bpmb-series-post-title a:hover {
	color: var(--bpmb-primary-ink, var(--bpmb-series-primary));
}

.bpmb-series-post-excerpt {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--bpmb-series-text-muted);
}

.bpmb-series-post-meta {
	display: flex;
	gap: 1em;
	margin-top: 0.75em;
	font-size: 0.8125rem;
	color: var(--bpmb-series-text-muted);
}

/* Status Badge */
.bpmb-series-post-status {
	display: inline-block;
	padding: 0.25em 0.75em;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	border-radius: 4px;
}

/* `--bpmb-success-text` on `--bpmb-success-bg` is the pairing the token set already defines for
   exactly this chip, and both flip with the mode. The old pair — the full-strength success green on
   a hardcoded 10% tint — measured 3.3:1 at 12px. */
.bpmb-series-post-status-completed {
	background: var(--bpmb-success-bg, rgba(40, 167, 69, 0.1));
	color: var(--bpmb-success-text, var(--bpmb-series-success));
}

.bpmb-series-post-status-current {
	background: var(--bpmb-primary-light, rgba(36, 104, 198, 0.1));
	color: var(--bpmb-primary-ink, var(--bpmb-series-primary));
}

/*--------------------------------------------------------------
# Reading Progress Indicator
--------------------------------------------------------------*/
.bpmb-reading-progress {
	position: fixed;
	top: 0;
	inset-inline-start: 0;
	width: 100%;
	height: 4px;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.1);
}

.bpmb-reading-progress-bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--bpmb-series-primary), #5b9cec);
	transition: width 0.1s linear;
}

/* Series Badge on Posts */
.bpmb-series-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.5em 1em;
	margin-bottom: 1em;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--bpmb-primary-ink, var(--bpmb-series-primary));
	background: var(--bpmb-primary-light, rgba(36, 104, 198, 0.1));
	border-radius: 20px;
}

.bpmb-series-badge a {
	color: inherit;
	text-decoration: none;
}

.bpmb-series-badge a:hover {
	text-decoration: underline;
}

.bpmb-series-badge-part {
	font-weight: 700;
}

/*--------------------------------------------------------------
# Series Widget
--------------------------------------------------------------*/
.bpmb-series-widget {
	padding: 1em;
}

.bpmb-series-widget .bpmb-series-toc {
	margin: 0;
	box-shadow: none;
}

/*--------------------------------------------------------------
# Responsive Styles
--------------------------------------------------------------*/
@media (max-width: 768px) {
	.bpmb-series-nav-arrows .bpmb-series-nav-links {
		gap: 1em;
	}

	.bpmb-series-header-title {
		font-size: 2rem;
	}

	/* Keep the row: number beside the part, text left-aligned. Stacked and centred, each part
	   took ~270px and centred paragraphs read badly. */
	.bpmb-series-post-card {
		gap: 12px;
		padding: 14px;
	}

	.bpmb-series-post-number {
		width: 32px;
		height: 32px;
		font-size: 0.875rem;
	}
}

@media (max-width: 480px) {
	/* Inline navigation responsive - wrap to multi-line */
	.bpmb-series-nav-inline {
		flex-wrap: wrap;
		gap: 0.5em 1em;
		font-size: 0.875rem;
	}

	.bpmb-series-nav-inline .bpmb-nav-series {
		order: -1;
		width: 100%;
		text-align: center;
		border-inline-start: none;
		border-inline-end: none;
		border-bottom: 1px solid var(--bpmb-series-border);
		padding: 0 0 0.5em 0;
		margin-bottom: 0.25em;
	}

	.bpmb-series-header-title {
		font-size: 1.75rem;
	}

	.bpmb-series-toc-link {
		gap: 0.75em;
	}

	/* Tighten arrow nav and shrink numbered chips so long series wrap cleanly. */
	.bpmb-series-nav-arrows .bpmb-series-nav-links {
		gap: 0.5em;
	}

	.bpmb-series-nav-numbers .bpmb-series-nav-links {
		gap: 0.4em;
	}

	.bpmb-series-nav-numbers .bpmb-series-nav-item {
		width: 32px;
		height: 32px;
		font-size: 0.8125rem;
	}
}

.dark-mode .bpmb-series-nav-inline,
.bpmb-dark .bpmb-series-nav-inline {
	background: var(--bpmb-series-bg);
}

.dark-mode .bpmb-series-toc,
.bpmb-dark .bpmb-series-toc {
	background: var(--bpmb-series-bg);
}

.dark-mode .bpmb-series-post-card,
.bpmb-dark .bpmb-series-post-card {
	background: var(--bpmb-series-bg);
}

/*--------------------------------------------------------------
# Print Styles
--------------------------------------------------------------*/
@media print {
.bpmb-series-nav,
.bpmb-reading-progress {
		display: none !important;
	}
}

/*--------------------------------------------------------------
# Series Selector (Post Form)
# Base form field styling handled by buddypress-member-blog-pro-form.css
--------------------------------------------------------------*/

/* Add new series link */
.bpmb-add-new-series-link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: var(--bpmb-space-sm, 8px);
	padding: var(--bpmb-space-xs, 4px) 0;
	font-size: var(--bpmb-font-size-sm, 13px);
	color: var(--bpmb-primary-ink, var(--bpmb-primary, #2468c6));
	text-decoration: none;
	cursor: pointer;
	transition: color var(--bpmb-transition-fast, 150ms ease);
}

.bpmb-add-new-series-link:hover {
	color: var(--bpmb-primary-dark, #1a4f9e);
	text-decoration: underline;
}

.bpmb-add-new-series-link::before {
	content: "+";
	font-weight: 600;
	font-size: 14px;
}

/* Inline create form - similar to category add row */
.bpmb-series-inline-create {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bpmb-space-sm, 8px);
	align-items: center;
	margin-top: var(--bpmb-space-sm, 10px);
	padding: var(--bpmb-space-md, 12px);
	background: var(--bpmb-bg-tertiary, #f8f9fa);
	border: 1px solid var(--bpmb-border-color, #e0e0e0);
	border-radius: var(--bpmb-radius-md, 5px);
}

.bpmb-series-inline-create input[type="text"] {
	flex: 1;
	min-width: 180px;
	padding: var(--bpmb-space-sm, 8px) var(--bpmb-space-md, 12px);
	font-size: var(--bpmb-font-size-base, 14px);
	line-height: 1.5;
	color: var(--bpmb-text-primary, #303030);
	background-color: var(--bpmb-bg-primary);
	border: 1px solid var(--bpmb-border-color, #ddd);
	border-radius: var(--bpmb-radius-md, 5px);
	transition: border-color 150ms ease, box-shadow 150ms ease;
}

.bpmb-series-inline-create input[type="text"]:focus {
	outline: none;
	border-color: var(--bpmb-primary, #2468c6);
	box-shadow: 0 0 0 3px rgba(36, 104, 198, 0.15);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--bpmb-primary) 15%, transparent);
}

.bpmb-series-inline-create input[type="text"].error {
	border-color: var(--bpmb-danger, #dc3545);
	background-color: var(--bpmb-danger-light, #fce8ea);
}

/* Buttons - match form button styles */
.bpmb-series-inline-create .button {
	padding: var(--bpmb-space-sm, 8px) var(--bpmb-space-md, 16px);
	font-size: var(--bpmb-font-size-sm, 13px);
	font-weight: 500;
	line-height: 1.5;
	border-radius: var(--bpmb-radius-md, 5px);
	cursor: pointer;
	transition: all 150ms ease;
}

.bpmb-create-series-btn {
	background: var(--bpmb-primary, #2468c6);
	color: var(--bpmb-text-light);
	border: 1px solid var(--bpmb-primary, #2468c6);
}

.bpmb-create-series-btn:hover {
	background: var(--bpmb-primary-dark, #1a4f9e);
	border-color: var(--bpmb-primary-dark, #1a4f9e);
}

.bpmb-create-series-btn:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.bpmb-cancel-series-btn {
	background: var(--bpmb-bg-primary);
	color: var(--bpmb-text-secondary, #666);
	border: 1px solid var(--bpmb-border-color, #ddd);
}

.bpmb-cancel-series-btn:hover {
	background: var(--bpmb-bg-tertiary, #f5f5f5);
	color: var(--bpmb-text-secondary, #666);
	border-color: var(--bpmb-border-color, #ccc);
}

/* Success message */
.bpmb-series-created-msg {
	display: inline-flex;
	align-items: center;
	margin-inline-start: var(--bpmb-space-sm, 8px);
	padding: var(--bpmb-space-xs, 4px) var(--bpmb-space-sm, 8px);
	background: var(--bpmb-success-filled, var(--bpmb-success));
	color: var(--bpmb-on-success, var(--bpmb-text-light));
	font-size: var(--bpmb-font-size-sm, 13px);
	font-weight: 500;
	border-radius: var(--bpmb-radius-sm, 4px);
	animation: bpmb-fade-in 200ms ease;
}

@keyframes bpmb-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to { opacity: 1; transform: translateY(0); }
}

/* Order field description - base styling handled by form.css */
.bpmb-series-order-field .description {
	display: inline-block;
	margin-inline-start: var(--bpmb-space-sm, 8px);
}

/* Responsive adjustments for series-specific elements */
@media (max-width: 600px) {
	.bpmb-series-inline-create {
		flex-direction: column;
		align-items: stretch;
	}

	.bpmb-series-inline-create input[type="text"] {
		min-width: 100%;
	}

	.bpmb-series-inline-create .button {
		width: 100%;
		text-align: center;
	}

	.bpmb-series-order-field .description {
		display: block;
		margin-inline-start: 0;
		margin-top: var(--bpmb-space-xs, 4px);
	}
}

/* Dark mode support for series-specific elements */
.dark-mode .bpmb-series-inline-create,
.bpmb-dark .bpmb-series-inline-create {
	background: var(--bpmb-bg-secondary, #2d2d2d);
	border-color: var(--bpmb-border-color, #444);
}

.dark-mode .bpmb-cancel-series-btn,
.bpmb-dark .bpmb-cancel-series-btn {
	background: var(--bpmb-bg-secondary, #2d2d2d);
	border-color: var(--bpmb-border-color, #444);
	color: var(--bpmb-text-primary, #e0e0e0);
}

/* ---------------------------------------------------------------------------
 * Series context line — "Part 2 of 3 in <series>", above the post.
 *
 * Quiet on purpose. It sits directly under the post title, where the theme is
 * already showing byline and date, so it has to read as one more piece of that
 * metadata rather than as a banner competing with the headline. Tokens only, so
 * it follows the host theme in light and dark like everything else here.
 * ------------------------------------------------------------------------- */
.bpmb-series-context {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35em;
	margin: 0 0 var( --bpmb-space-md, 1rem );
	font-size: var( --bpmb-font-size-sm, 0.875rem );
	line-height: 1.4;
	color: var( --bpmb-text-secondary, #6b7280 );
}

.bpmb-series-context__part {
	font-weight: 600;
}

.bpmb-series-context__link {
	color: var( --bpmb-primary-ink, var( --bpmb-primary, #2468c6 ) );
	text-decoration: none;
	font-weight: 600;
}

/* Themes routinely strip underlines from links in content, so the hover needs to
   say "this is a link" on its own. Underline rather than a colour shift, because
   colour here is already carrying the brand. */
.bpmb-series-context__link:hover,
.bpmb-series-context__link:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * [bp-member-blog-series-list] - one card per series: name, parts, writer, the
 * viewer's progress. Each card is its own box, so a part count can never read as
 * belonging to the next series (the old flat headings put "1 post" nearer the
 * title below it than the one above). Token-driven, logical properties, so dark
 * mode and RTL need no second rule.
 * ------------------------------------------------------------------------- */
.bpmb-series-list {
	display: grid;
	grid-template-columns: repeat( var( --bpmb-series-columns, 2 ), minmax( 0, 1fr ) );
	gap: var( --bpmb-space-md, 1rem );
	margin: 0 0 var( --bpmb-space-lg, 1.5rem );
	padding: 0;
	list-style: none;
}

.bpmb-series-list .bpmb-series-card {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	background: var( --bpmb-bg-primary, #fff );
	border: 1px solid var( --bpmb-border-color, #e2e8f0 );
	border-radius: var( --bpmb-series-radius, 10px );
}

.bpmb-series-list .bpmb-series-card-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.bpmb-series-list .bpmb-series-card-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var( --bpmb-space-sm, 0.5rem );
	padding: var( --bpmb-space-md, 1rem );
}

.bpmb-series-list .bpmb-series-card-title {
	margin: 0;
	font-size: var( --bpmb-font-size-xl, 1.125rem );
	line-height: 1.3;
}

.bpmb-series-list .bpmb-series-card-title a {
	color: var( --bpmb-text-primary, #111827 );
	text-decoration: none;
}

.bpmb-series-list .bpmb-series-card-title a:hover,
.bpmb-series-list .bpmb-series-card-title a:focus-visible {
	color: var( --bpmb-primary-ink, var( --bpmb-primary, #2468c6 ) );
	text-decoration: underline;
}

.bpmb-series-list .bpmb-series-card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: var( --bpmb-space-xs, 0.25rem ) var( --bpmb-space-md, 1rem );
	margin: 0;
	font-size: var( --bpmb-font-size-sm, 0.8125rem );
	color: var( --bpmb-text-secondary, #6b7280 );
}

.bpmb-series-list .bpmb-series-card-count {
	display: inline-flex;
	align-items: center;
	gap: var( --bpmb-space-xs, 0.25rem );
}

.bpmb-series-list .bpmb-series-card-desc {
	margin: 0;
	font-size: var( --bpmb-font-size-md, 0.875rem );
	line-height: 1.55;
	color: var( --bpmb-text-secondary, #6b7280 );
}

.bpmb-series-list .bpmb-series-card-progress {
	display: flex;
	align-items: center;
	gap: var( --bpmb-space-sm, 0.5rem );
	margin-block-start: auto;
	padding-block-start: var( --bpmb-space-xs, 0.25rem );
}

.bpmb-series-list .bpmb-series-card-progress .bpmb-series-progress-bar {
	flex: 1;
}

.bpmb-series-list .bpmb-series-card-progress-label {
	font-size: var( --bpmb-font-size-xs, 0.75rem );
	font-weight: 600;
	white-space: nowrap;
	color: var( --bpmb-text-secondary, #6b7280 );
}

@media ( max-width: 640px ) {
	.bpmb-series-list {
		grid-template-columns: minmax( 0, 1fr );
	}
}