/*!
 * MyPlug News Ticker Pro - Frontend Styles
 * جهت متن و چیدمان به‌صورت خودکار از سایت (dir صفحه) ارث‌بری می‌شود؛ چیزی هاردکد نشده است.
 */

.mntp-ticker {
	display: flex;
	align-items: center;
	overflow: hidden;
	width: 100%;
	box-sizing: border-box;
	gap: 14px;
}

.mntp-ticker * {
	box-sizing: border-box;
}

/* ---------------- برچسب ---------------- */
.mntp-label {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	white-space: nowrap;
	background-color: #c1272d;
	color: #fff;
	padding: 6px 14px;
	border-radius: 4px;
	z-index: 2;
}

.mntp-label-text {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

.mntp-label-icon {
	display: inline-flex;
	line-height: 1;
	font-size: 13px;
}

.mntp-label-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* ---------------- ویوپورت (پنجره نمایش) ---------------- */
.mntp-viewport {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	position: relative;
	height: 100%;
}

/* ================= حالت مارکی (نوار متحرک پیوسته) ================= */
.mntp-mode-marquee .mntp-track {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	width: max-content;
	will-change: transform;
	animation-name: mntp-scroll;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-duration: var(--mntp-duration, 30s);
}

.mntp-direction-rtl .mntp-track {
	animation-direction: normal;
}

.mntp-direction-ltr .mntp-track {
	animation-direction: reverse;
}

.mntp-pause-hover.mntp-mode-marquee:hover .mntp-track,
.mntp-pause-hover.mntp-mode-marquee.mntp-touch-active .mntp-track {
	animation-play-state: paused;
}

@keyframes mntp-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

.mntp-mode-marquee .mntp-item {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* ---------------- فید (محو شدن) لبه‌ها ----------------
 * از mask-image استفاده می‌شود چون خود محتوا را شفاف می‌کند، نه یک گرادینت روی
 * پس‌زمینه، پس با هر رنگ یا تصویر پس‌زمینه‌ای درست کار می‌کند و نیازی به تطبیق رنگ ندارد.
 */
.mntp-fade-right .mntp-viewport {
	-webkit-mask-image: linear-gradient( to left, transparent 0, #000 var( --mntp-fade-width, 40px ) );
	mask-image: linear-gradient( to left, transparent 0, #000 var( --mntp-fade-width, 40px ) );
}

.mntp-fade-left .mntp-viewport {
	-webkit-mask-image: linear-gradient( to right, transparent 0, #000 var( --mntp-fade-width, 40px ) );
	mask-image: linear-gradient( to right, transparent 0, #000 var( --mntp-fade-width, 40px ) );
}

.mntp-fade-both .mntp-viewport {
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var( --mntp-fade-width, 40px ),
		#000 calc( 100% - var( --mntp-fade-width, 40px ) ),
		transparent 100%
	);
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 var( --mntp-fade-width, 40px ),
		#000 calc( 100% - var( --mntp-fade-width, 40px ) ),
		transparent 100%
	);
}

/* ================= حالت چرخشی تک‌خطی ================= */
.mntp-mode-rotator .mntp-track {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
	height: 1.7em;
}

.mntp-mode-rotator .mntp-item {
	position: absolute;
	inset-inline-start: 0;
	top: 0;
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.mntp-mode-rotator .mntp-item.mntp-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.mntp-mode-rotator.mntp-transition-slide .mntp-item {
	transform: translateY(100%);
}

.mntp-mode-rotator.mntp-transition-slide .mntp-item.mntp-active {
	transform: translateY(0);
}

.mntp-mode-rotator.mntp-transition-slide .mntp-item.mntp-leaving {
	transform: translateY(-100%);
	opacity: 0;
}

/* ---------------- آیتم‌ها (مشترک بین دو حالت) ---------------- */
.mntp-item-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}

.mntp-item-link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

.mntp-bullet {
	flex: 0 0 auto;
	width: 7px;
	height: 7px;
	border-radius: 2px;
	background-color: #c1272d;
}

.mntp-item-category {
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	line-height: 1.6;
	padding: 2px 8px;
	border-radius: 3px;
	background-color: rgba(255, 255, 255, 0.12);
	color: #f2c265;
}

.mntp-item-title {
	font-size: 14px;
	color: #e5e5e5;
	transition: color 0.2s ease;
}

.mntp-item-excerpt {
	font-size: 12px;
	opacity: 0.7;
}

.mntp-item-date {
	flex: 0 0 auto;
	font-size: 12px;
	opacity: 0.65;
}

/* ---------------- لینک مشاهده همه ---------------- */
.mntp-view-all {
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	color: #f2c265;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	z-index: 2;
	transition: color 0.2s ease;
}

.mntp-view-all:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

.mntp-view-all-arrow {
	display: inline-block;
	width: 6px;
	height: 6px;
	border-inline-start: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-inline-start: 2px;
}

/* ---------------- پیام خالی (فقط در ویرایشگر المنتور نمایش داده می‌شود) ---------------- */
.mntp-empty-notice {
	padding: 14px;
	background: #fff3cd;
	color: #664d03;
	border-radius: 4px;
	font-size: 13px;
}

/* ================= واکنش‌گرایی ================= */
@media (max-width: 767px) {
	.mntp-hide-label-mobile .mntp-label {
		display: none;
	}

	.mntp-hide-excerpt-mobile .mntp-item-excerpt {
		display: none;
	}
}

@media (max-width: 480px) {
	.mntp-item-category {
		display: none;
	}
}