/**
 * BuddyPress Member Blog PRO - Series Frontend Styles
 *
 * Styles for series navigation, table of contents, landing page, and progress tracking.
 *
 * @package Buddypress_Member_Blog_Pro
 * @since 1.0.0
 */

/*--------------------------------------------------------------
# CSS Variables
--------------------------------------------------------------*/
:root {
	--bpmb-series-primary: var(--bpmb-primary, #2468c6);
	--bpmb-series-primary-hover: var(--bpmb-primary-hover, #1a4f9e);
	--bpmb-series-success: var(--bpmb-success, #28a745);
	--bpmb-series-text: var(--bpmb-text-primary, #212529);
	--bpmb-series-text-muted: var(--bpmb-text-secondary, #6c757d);
	--bpmb-series-border: var(--bpmb-border-color, #e9ecef);
	--bpmb-series-bg: var(--bpmb-bg-primary, #fff);
	--bpmb-series-bg-light: var(--bpmb-bg-secondary, #f8f9fa);
	--bpmb-series-radius: var(--bpmb-radius-lg, 8px);
	--bpmb-series-shadow: var(--bpmb-shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.08));
}

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

.bpmb-template-notice,
.bp-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,
.bp-template-notice p {
	margin: 0;
}

.bpmb-template-notice.success {
	background: #10b981;
	color: #fff;
}

.bpmb-template-notice.error,
.bp-template-notice.error {
	background: #ef4444;
	color: #fff;
}

.bpmb-template-notice.info,
.bp-template-notice.info {
	background: #3b82f6;
	color: #fff;
}

/*--------------------------------------------------------------
# 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-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-left: 1px solid var(--bpmb-series-border);
	border-right: 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-series-primary);
}

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

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

.bpmb-series-nav-inline .bpmb-nav-series:last-child {
	border-right: none;
	padding-right: 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-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: #fff !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-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: #fff !important;
}

.bpmb-series-nav-numbers .bpmb-series-nav-item.completed {
	background: var(--bpmb-series-success) !important;
	border-color: var(--bpmb-series-success) !important;
	color: #fff !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 {
	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;
	padding: 0.875em 0;
	text-decoration: none;
	transition: all 0.2s ease;
}

.bpmb-series-toc-link:hover {
	padding-left: 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: #fff;
}

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

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

/* Completed Item */
.bpmb-series-toc-item.completed .bpmb-series-toc-number {
	background: var(--bpmb-series-success);
	border-color: var(--bpmb-series-success);
	color: #fff;
}

.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-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;
	color: #fff;
	background: 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);
}

.bpmb-series-continue-btn:hover {
	background: var(--bpmb-series-primary-hover);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(36, 104, 198, 0.4);
}

.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-series-success);
	border-color: var(--bpmb-series-success);
	color: #fff;
}

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

/* 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-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-series-post-status-completed {
	background: rgba(40, 167, 69, 0.1);
	color: var(--bpmb-series-success);
}

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

/*--------------------------------------------------------------
# Reading Progress Indicator
--------------------------------------------------------------*/
.bpmb-reading-progress {
	position: fixed;
	top: 0;
	left: 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-series-primary);
	background: 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;
	}

	.bpmb-series-post-card {
		flex-direction: column;
		text-align: center;
	}

	.bpmb-series-post-number {
		margin: 0 auto;
	}

	.bpmb-series-post-meta {
		justify-content: center;
	}
}

@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-left: none;
		border-right: 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;
	}
}

/*--------------------------------------------------------------
# Dark Mode Support
--------------------------------------------------------------*/
.dark-mode,
.dark-scheme {
	--bpmb-series-text: #e0e0e0;
	--bpmb-series-text-muted: #a0a0a0;
	--bpmb-series-border: #333;
	--bpmb-series-bg: #1e1e1e;
	--bpmb-series-bg-light: #2d2d2d;
}

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

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

.dark-mode .bpmb-series-post-card,
.dark-scheme .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, #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: #fff;
	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);
}

.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: #fff;
	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: #fff;
	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-left: var(--bpmb-space-sm, 8px);
	padding: var(--bpmb-space-xs, 4px) var(--bpmb-space-sm, 8px);
	background: var(--bpmb-success, #28a745);
	color: #fff;
	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-left: 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-left: 0;
		margin-top: var(--bpmb-space-xs, 4px);
	}
}

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

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