/* ==================================================================
   APS Products - Foxiz-style Extras CSS
   ফাইল রাখুন: your-theme/aps/css/aps-custom.css
   ================================================================== */

:root {
	--aps-accent: #1a1a1a;      /* প্রধান রঙ - স্ক্রিনশটে monochrome/কালো দেখা গেছে, প্রয়োজনে বদলান */
	--aps-dark: #1a1a1a;
	--aps-gray: #666666;
	--aps-border: #e5e5e5;
	--aps-bg-light: #f7f7f7;
}

/* ---------- 1) Top Utility Bar ---------- */
.aps-top-bar {
	background: var(--aps-dark);
	color: #fff;
	font-size: 13px;
}

.aps-top-bar-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 8px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

.aps-top-bar-links {
	list-style: none;
	display: flex;
	gap: 18px;
	margin: 0;
	padding: 0;
}

.aps-top-bar-links a {
	color: #ddd;
	text-decoration: none;
}

.aps-top-bar-links a:hover {
	color: var(--aps-accent);
}

.aps-top-bar-social {
	list-style: none;
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
}

.aps-top-bar-social a {
	color: #ddd;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color .2s ease;
}

.aps-top-bar-social a:hover {
	color: var(--aps-accent);
}

/* ---------- 2) Share Icons + Reviewer Row (স্ক্রিনশট অনুযায়ী মনোক্রোম) ---------- */

/* শেয়ার আইকন পিল - হালকা ধূসর ব্যাকগ্রাউন্ড, কালো আইকন */
.aps-share-icons {
	display: flex;
	align-items: center;
	gap: 4px;
	background: #f2f2f3;
	border-radius: 999px;
	padding: 10px 16px;
	width: fit-content;
	margin: 16px 0 14px;
}

.aps-share-btn {
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--aps-dark);
	background: transparent;
	border: none;
	text-decoration: none;
	cursor: pointer;
	border-radius: 50%;
	transition: background .15s ease;
}

.aps-share-btn:hover {
	background: rgba(0, 0, 0, .07);
}

.aps-share-btn .dashicons {
	font-size: 18px;
	width: 18px;
	height: 18px;
}

/* copy-link tooltip */
.aps-share-copy {
	position: relative;
}

.aps-share-copy.aps-copied::after {
	content: 'Copied!';
	position: absolute;
	bottom: 120%;
	left: 50%;
	transform: translateX(-50%);
	background: var(--aps-dark);
	color: #fff;
	font-size: 11px;
	padding: 3px 8px;
	border-radius: 4px;
	white-space: nowrap;
}

/* Author / Reviewer সারি - শেয়ার পিলের নিচে */
.aps-reviewer-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-bottom: 16px;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--aps-border);
}

.aps-reviewer-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
}

.aps-reviewer-text {
	font-size: 14px;
	color: #555;
}

.aps-reviewer-name {
	color: var(--aps-dark);
	font-weight: 700;
	text-decoration: underline;
}

.aps-reviewer-name:hover {
	color: var(--aps-dark);
}

.aps-verified-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #1d9bf0;
	color: #fff;
	vertical-align: middle;
	margin-left: 2px;
}

.aps-verified-badge .dashicons {
	font-size: 10px;
	width: 10px;
	height: 10px;
}

.aps-meta-sep {
	margin: 0 4px;
	color: #bbb;
}

/* ---------- 3) Reading Progress Bar ---------- */
#aps-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 4px;
	background: transparent;
	z-index: 9999;
	pointer-events: none;
}

#aps-reading-progress-fill {
	display: block;
	height: 100%;
	width: 0%;
	background: var(--aps-accent);
	transition: width .1s ease-out;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
	.aps-top-bar-inner {
		justify-content: center;
	}

	.aps-top-bar-links {
		display: none; /* মোবাইলে শুধু সোশ্যাল আইকন দেখাবে */
	}

	.aps-share-icons {
		padding: 8px 10px;
	}

	.aps-reviewer-row {
		flex-wrap: wrap;
	}
}