/**
 * Moblak Inline Related Posts - Frontend Styles
 * 100% RTL, Ultra-Lightweight, Modern & Responsive
 * Built with full CSS isolation to prevent theme override conflicts
 */

:root {
	--mirp-bg: #18181b;
	--mirp-title: #e2e8f0;
	--mirp-btn-bg: #0d9488;
	--mirp-btn-text: #ffffff;
	--mirp-border: #27272a;
	--mirp-opacity: 1;
	--mirp-margin-top: 1.5em;
	--mirp-margin-bottom: 1.5em;
	--mirp-radius: 12px;
}

/* Wrapper */
.mirp-wrapper {
	margin-top: var(--mirp-margin-top, 1.5em) !important;
	margin-bottom: var(--mirp-margin-bottom, 1.5em) !important;
	width: 100% !important;
	max-width: 100% !important;
	clear: both !important;
	box-sizing: border-box !important;
	direction: rtl !important;
	text-align: right !important;
	display: block !important;
}

/* Main Box Container - High Specificity & Protection */
.mirp-wrapper .mirp-box,
.mm-entry-content a.mirp-box,
article a.mirp-box,
.entry-content a.mirp-box,
a.mirp-box {
	display: block !important;
	text-decoration: none !important;
	background-color: var(--mirp-bg, #18181b) !important;
	background-image: none !important;
	border: 1px solid var(--mirp-border, #27272a) !important;
	border-radius: var(--mirp-radius, 12px) !important;
	padding: 12px 16px !important;
	opacity: var(--mirp-opacity, 1) !important;
	transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, opacity 0.22s ease !important;
	position: relative !important;
	box-sizing: border-box !important;
	color: inherit !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
	float: none !important;
	line-height: normal !important;
}

.mirp-wrapper .mirp-box.mirp-has-shadow,
.mm-entry-content a.mirp-box.mirp-has-shadow {
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18) !important;
}

.mirp-wrapper .mirp-box:hover,
.mm-entry-content a.mirp-box:hover,
article a.mirp-box:hover,
a.mirp-box:hover {
	transform: translateY(-2px) !important;
	opacity: 1 !important;
	border-color: rgba(245, 158, 11, 0.45) !important;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24) !important;
	background-color: var(--mirp-bg, #18181b) !important;
	text-decoration: none !important;
}

/* Internal Flex Row */
.mirp-wrapper .mirp-content-row,
.mirp-box .mirp-content-row {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 14px !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

/* Thumbnail Wrap & Image */
.mirp-wrapper .mirp-thumb-wrap,
.mirp-box .mirp-thumb-wrap {
	width: 72px !important;
	height: 60px !important;
	min-width: 72px !important;
	max-width: 72px !important;
	flex-shrink: 0 !important;
	border-radius: 8px !important;
	overflow: hidden !important;
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1px solid rgba(255, 255, 255, 0.08) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

.mirp-wrapper .mirp-thumb,
.mirp-box img.mirp-thumb,
.mm-entry-content .mirp-box img.mirp-thumb {
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
	object-fit: cover !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 7px !important;
	border: none !important;
	box-shadow: none !important;
	transition: transform 0.35s ease !important;
}

.mirp-box:hover .mirp-thumb {
	transform: scale(1.08) !important;
}

.mirp-thumb-fallback {
	color: rgba(255, 255, 255, 0.35) !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Post Title Body */
.mirp-wrapper .mirp-body,
.mirp-box .mirp-body {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	box-sizing: border-box !important;
}

.mirp-wrapper .mirp-title,
.mirp-box .mirp-title,
.mm-entry-content .mirp-box .mirp-title {
	display: block !important;
	color: var(--mirp-title, #e2e8f0) !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	line-height: 1.6 !important;
	letter-spacing: -0.01em !important;
	transition: color 0.2s ease, text-decoration 0.2s ease !important;
	margin: 0 !important;
	padding: 0 !important;
	text-decoration: none !important;
}

.mirp-box:hover .mirp-title {
	text-decoration: underline !important;
	text-decoration-color: var(--mirp-title, #e2e8f0) !important;
}

/* Action Button */
.mirp-wrapper .mirp-action,
.mirp-box .mirp-action {
	flex-shrink: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex !important;
	align-items: center !important;
}

.mirp-wrapper .mirp-btn,
.mirp-box .mirp-btn,
.mm-entry-content .mirp-box .mirp-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 6px !important;
	background-color: var(--mirp-btn-bg, #0d9488) !important;
	background-image: none !important;
	color: var(--mirp-btn-text, #ffffff) !important;
	font-size: 13.5px !important;
	font-weight: 800 !important;
	padding: 8px 18px !important;
	border-radius: 8px !important;
	border: none !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16) !important;
	white-space: nowrap !important;
	text-decoration: none !important;
	line-height: normal !important;
	cursor: pointer !important;
}

.mirp-btn-icon {
	width: 13px !important;
	height: 13px !important;
	transition: transform 0.2s ease !important;
	transform: scaleX(-1) !important; /* RTL arrow pointing left */
	flex-shrink: 0 !important;
}

.mirp-box:hover .mirp-btn {
	transform: scale(1.03) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24) !important;
}

.mirp-box:hover .mirp-btn-icon {
	transform: scaleX(-1) translateX(3px) !important;
}

/* ==========================================================================
   Template: Minimalist
   ========================================================================== */
.mirp-box.mirp-tpl-minimalist {
	border-radius: 6px !important;
	border: none !important;
	border-right: 4.5px solid var(--mirp-btn-bg, #0d9488) !important;
	padding: 12px 16px !important;
}

.mirp-box.mirp-tpl-minimalist .mirp-btn {
	background: transparent !important;
	color: var(--mirp-btn-bg, #0d9488) !important;
	border: 1.5px solid var(--mirp-btn-bg, #0d9488) !important;
	box-shadow: none !important;
}

/* ==========================================================================
   Template: Modern Card
   ========================================================================== */
.mirp-box.mirp-tpl-card {
	padding: 14px 18px !important;
	border-radius: 14px !important;
}

.mirp-box.mirp-tpl-card .mirp-thumb-wrap {
	width: 80px !important;
	height: 66px !important;
	min-width: 80px !important;
}

/* ==========================================================================
   Responsive Mobile Adjustments (<= 640px)
   ========================================================================== */
@media (max-width: 640px) {
	.mirp-wrapper .mirp-box,
	.mirp-box {
		padding: 10px 12px !important;
	}

	.mirp-content-row {
		gap: 10px !important;
	}

	.mirp-thumb-wrap {
		width: 58px !important;
		height: 52px !important;
		min-width: 58px !important;
	}

	.mirp-title {
		font-size: 13.5px !important;
		line-height: 1.5 !important;
	}

	.mirp-btn {
		font-size: 12px !important;
		padding: 6px 12px !important;
		gap: 4px !important;
	}

	.mirp-btn-icon {
		width: 11px !important;
		height: 11px !important;
	}
}

@media (max-width: 420px) {
	.mirp-content-row {
		flex-wrap: wrap !important;
	}

	.mirp-body {
		flex: 1 1 calc(100% - 70px) !important;
	}

	.mirp-action {
		width: 100% !important;
		text-align: left !important;
		margin-top: 4px !important;
	}

	.mirp-btn {
		width: 100% !important;
		justify-content: center !important;
	}
}