/**
 * SWAPNEWS Phase 1 Styles
 *
 * Includes:
 * - Inline "Baca Juga"
 * - Author bio box
 * - Reading progress bar
 * - Engagement block (Listen, Reactions)
 * - Floating share button
 * - Newsletter form
 * - Trending tags widget
 * - Toast notifications
 *
 * Uses theme CSS variables where available for dark mode compatibility.
 */

/* =========================================================================
 * 1. Inline "Baca juga"
 * ====================================================================== */
.swapnews-baca-juga {
	margin: 1.4em 0;
	padding: 14px 18px;
	border-left: 4px solid #D13438;
	background: var(--bg-color-dua, #fafafa);
	border-radius: 4px;
	font-family: 'Heebo', sans-serif;
	font-size: 16px;
	line-height: 1.5;
}
.swapnews-baca-juga__label {
	display: inline-block;
	font-weight: 800;
	color: #D13438;
	margin-right: 6px;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.5px;
}
.swapnews-baca-juga a {
	color: var(--font-color, #111);
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px dashed rgba(209, 52, 56, 0.4);
	transition: color .2s, border-color .2s;
}
.swapnews-baca-juga a:hover {
	color: #D13438;
	border-bottom-color: #D13438;
}

/* =========================================================================
 * 2. Author Bio Box
 * ====================================================================== */
.swapnews-author-bio {
	display: flex;
	gap: 18px;
	margin: 30px 0;
	padding: 22px;
	background: var(--bg-color-dua, #fff);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.swapnews-author-bio__avatar img {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: block;
}
.swapnews-author-bio__content {
	flex: 1;
	min-width: 0;
}
.swapnews-author-bio__role {
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #D13438;
	margin: 0 0 4px;
}
.swapnews-author-bio__name {
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 8px;
	color: var(--font-color, #111);
}
.swapnews-author-bio__name a {
	color: inherit;
	text-decoration: none;
}
.swapnews-author-bio__name a:hover {
	color: #D13438;
}
.swapnews-author-bio__desc {
	font-size: 14px;
	line-height: 1.6;
	color: var(--font-color, #444);
	margin: 0 0 10px;
	opacity: 0.9;
}
.swapnews-author-bio__meta {
	font-size: 12px;
	color: #999;
	margin: 0 0 10px;
}
.swapnews-author-bio__social {
	display: flex;
	gap: 8px;
}
.swapnews-author-bio__social a {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.06);
	color: var(--font-color, #444);
	transition: background .2s, color .2s;
}
.swapnews-author-bio__social a:hover {
	background: #D13438;
	color: #fff;
}

/* =========================================================================
 * 3. Reading Progress Bar
 * ====================================================================== */
.swapnews-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 9999;
	background: transparent;
	pointer-events: none;
}
.logged-in.admin-bar .swapnews-reading-progress {
	top: 32px;
}
.swapnews-reading-progress__bar {
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, #D13438 0%, #f56565 100%);
	transition: width 0.05s linear;
	box-shadow: 0 0 6px rgba(209, 52, 56, 0.5);
}
@media screen and (max-width: 600px) {
	.logged-in.admin-bar .swapnews-reading-progress {
		top: 0;
	}
}

/* =========================================================================
 * 4 & 5. Engagement Block (Listen + Reactions)
 * ====================================================================== */
.swapnews-engagement {
	margin: 30px 0;
	padding: 20px;
	background: var(--bg-color-dua, #fff);
	border-radius: 12px;
	border: 1px solid rgba(0, 0, 0, 0.06);
}

/* Listen button */
.swapnews-listen {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	background: var(--font-color, #111);
	color: var(--bg-color, #fff);
	border: none;
	border-radius: 999px;
	font-family: 'Heebo', sans-serif;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: transform .15s, box-shadow .15s;
	margin-bottom: 18px;
}
.swapnews-listen:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
}
.swapnews-listen.is-active {
	background: #D13438;
	color: #fff;
	animation: snPulse 1.5s ease-in-out infinite;
}
@keyframes snPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(209, 52, 56, 0.6); }
	50% { box-shadow: 0 0 0 10px rgba(209, 52, 56, 0); }
}

/* Reactions */
.swapnews-reactions__title {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 12px;
	color: var(--font-color, #111);
}
.swapnews-reactions__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.swapnews-reaction {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	min-width: 70px;
	padding: 10px 12px;
	background: var(--bg-color, #f7f7f7);
	border: 2px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	font-family: 'Heebo', sans-serif;
	transition: transform .15s, border-color .15s, background .15s;
}
.swapnews-reaction:hover {
	transform: translateY(-2px);
	border-color: rgba(209, 52, 56, 0.3);
}
.swapnews-reaction.is-loading {
	opacity: 0.6;
	pointer-events: none;
}
.swapnews-reaction.is-done {
	border-color: #D13438;
	background: rgba(209, 52, 56, 0.08);
}
.swapnews-reaction__emoji {
	font-size: 28px;
	line-height: 1;
	margin-bottom: 6px;
}
.swapnews-reaction__count {
	font-size: 14px;
	font-weight: 700;
	color: var(--font-color, #111);
	line-height: 1;
}
.swapnews-reaction__label {
	font-size: 11px;
	color: #888;
	margin-top: 4px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

/* =========================================================================
 * 6. Floating Share Button (mobile-first, sits bottom-right)
 * ====================================================================== */
.swapnews-floating-share {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 998;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .25s, transform .25s;
	pointer-events: none;
}
.swapnews-floating-share.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.swapnews-floating-share__toggle {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #D13438;
	color: #fff;
	border: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(209, 52, 56, 0.4);
	transition: transform .2s;
}
.swapnews-floating-share__toggle:hover {
	transform: scale(1.05);
}
.swapnews-floating-share.is-open .swapnews-floating-share__toggle {
	transform: rotate(45deg);
}
.swapnews-floating-share__menu {
	position: absolute;
	bottom: 64px;
	right: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
	opacity: 0;
	transform: translateY(10px) scale(0.9);
	transform-origin: bottom right;
	pointer-events: none;
	transition: opacity .2s, transform .2s;
}
.swapnews-floating-share.is-open .swapnews-floating-share__menu {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto;
}
.swapnews-floating-share__menu li {
	margin: 0;
	padding: 0;
}
.sn-share {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
	font-family: 'Heebo', sans-serif;
	text-decoration: none;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: transform .15s;
}
.sn-share:hover { transform: scale(1.1); }
.sn-share--wa   { background: #25D366; }
.sn-share--fb   { background: #1877F2; }
.sn-share--tw   { background: #000; }
.sn-share--tg   { background: #229ED9; }
.sn-share--copy { background: #6c757d; }

/* Toast */
.swapnews-toast {
	position: fixed;
	left: 50%;
	bottom: 100px;
	transform: translate(-50%, 20px);
	background: rgba(0, 0, 0, 0.85);
	color: #fff;
	padding: 10px 18px;
	border-radius: 6px;
	font-family: 'Heebo', sans-serif;
	font-size: 13px;
	z-index: 9999;
	opacity: 0;
	transition: opacity .25s, transform .25s;
	pointer-events: none;
}
.swapnews-toast.is-show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* =========================================================================
 * 7. Newsletter Form
 * ====================================================================== */
.swapnews-newsletter {
	background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
	color: #fff;
	padding: 24px;
	border-radius: 12px;
	margin: 20px 0;
}
.swapnews-newsletter__title {
	font-size: 18px;
	font-weight: 800;
	margin: 0 0 6px;
	color: #fff;
}
.swapnews-newsletter__desc {
	font-size: 13px;
	opacity: 0.85;
	margin: 0 0 14px;
}
.swapnews-newsletter__row {
	display: flex;
	gap: 8px;
}
.swapnews-newsletter input[type="email"] {
	flex: 1;
	padding: 10px 14px;
	border: none;
	border-radius: 999px;
	font-family: 'Heebo', sans-serif;
	font-size: 14px;
	outline: none;
	color: #111;
	background: #fff;
}
.swapnews-newsletter input[type="email"]:focus {
	box-shadow: 0 0 0 3px rgba(209, 52, 56, 0.4);
}
.swapnews-newsletter button {
	padding: 10px 20px;
	background: #D13438;
	color: #fff;
	border: none;
	border-radius: 999px;
	font-family: 'Heebo', sans-serif;
	font-size: 14px;
	font-weight: 700;
	cursor: pointer;
	transition: background .15s;
}
.swapnews-newsletter button:hover {
	background: #b02a2e;
}
.swapnews-newsletter__msg {
	margin: 10px 0 0;
	font-size: 13px;
	min-height: 18px;
	color: rgba(255, 255, 255, 0.8);
}
.swapnews-newsletter__msg.is-success {
	color: #4ade80;
}

/* =========================================================================
 * 8. Trending Tags Widget
 * ====================================================================== */
.swapnews-trending-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.swapnews-trending-tags li { margin: 0; padding: 0; }
.swapnews-trending-tags a {
	display: inline-block;
	padding: 6px 12px;
	background: var(--bg-color, #f0f0f0);
	color: var(--font-color, #333);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid rgba(0, 0, 0, 0.05);
	transition: background .15s, color .15s, border-color .15s;
}
.swapnews-trending-tags a:hover {
	background: #D13438;
	color: #fff;
	border-color: #D13438;
}

/* =========================================================================
 * Mobile fine-tuning
 * ====================================================================== */
@media screen and (max-width: 600px) {
	.swapnews-author-bio {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}
	.swapnews-author-bio__avatar img {
		margin: 0 auto;
	}
	.swapnews-author-bio__social {
		justify-content: center;
	}
	.swapnews-reaction {
		min-width: 60px;
		padding: 8px 8px;
	}
	.swapnews-reaction__emoji { font-size: 22px; }
	.swapnews-newsletter__row {
		flex-direction: column;
	}
	.swapnews-newsletter button { width: 100%; }
}

/* =========================================================================
 * Dark Mode tweaks
 * ====================================================================== */
[data-theme="dark"] .swapnews-author-bio,
[data-theme="dark"] .swapnews-engagement {
	background: var(--bg-color-dua, #1a1a1a);
	border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="dark"] .swapnews-baca-juga {
	background: rgba(255, 255, 255, 0.04);
}
[data-theme="dark"] .swapnews-author-bio__social a {
	background: rgba(255, 255, 255, 0.08);
	color: var(--font-color, #ddd);
}
[data-theme="dark"] .swapnews-trending-tags a {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.08);
}