/**
 * Text Marquee Widget Styles
 * Horizontally scrolling text with icons and images
 * Production-Ready with Full RTL Support
 *
 * @package Rakmyat Core
 * @version 2.0.0
 */

/* ========================================
   Base Styles
   ======================================== */

.rmt-text-marquee {
	display: block;
	position: relative;
	overflow: hidden;
	width: 100%;
}

.rmt-text-marquee-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	will-change: transform;
	backface-visibility: hidden;
	perspective: 1000px;
}

.rmt-text-marquee-content {
	display: flex;
	align-items: center;
	width: max-content;
}

.rmt-text-marquee-item {
	display: flex;
	align-items: center;
	white-space: nowrap;
	flex-shrink: 0;
}

.rmt-text-marquee-text {
	display: inline-block;
	margin: 0;
	padding: 0;
	line-height: 1;
	color: inherit;
}

.rmt-text-marquee-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.rmt-text-marquee-icon i,
.rmt-text-marquee-icon svg {
	display: block;
	line-height: 1;
}

.rmt-text-marquee-image {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	overflow: hidden;
}

.rmt-text-marquee-image img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	vertical-align: middle;
}

.rmt-text-marquee-image.rmt-aspect-ratio-1-1 {
	aspect-ratio: 1 / 1;
}

.rmt-text-marquee-image.rmt-aspect-ratio-16-9 {
	aspect-ratio: 16 / 9;
}

.rmt-text-marquee-image.rmt-aspect-ratio-4-3 {
	aspect-ratio: 4 / 3;
}

.rmt-text-marquee-image.rmt-aspect-ratio-3-2 {
	aspect-ratio: 3 / 2;
}

/* ========================================
   Direction Animations - LTR
   ======================================== */

.rmt-text-marquee.rmt-direction-left .rmt-text-marquee-track {
	animation-name: rmt-marquee-left;
}

.rmt-text-marquee.rmt-direction-right .rmt-text-marquee-track {
	animation-name: rmt-marquee-right;
}

/* ========================================
   Keyframe Animations - LTR
   ======================================== */

@keyframes rmt-marquee-left {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(-33.333%);
	}
}

@keyframes rmt-marquee-right {
	0% {
		transform: translateX(-33.333%);
	}
	100% {
		transform: translateX(0);
	}
}

/* ========================================
   Keyframe Animations - RTL
   ======================================== */

@keyframes rmt-marquee-left-rtl {
	0% {
		transform: translateX(0);
	}
	100% {
		transform: translateX(33.333%);
	}
}

@keyframes rmt-marquee-right-rtl {
	0% {
		transform: translateX(33.333%);
	}
	100% {
		transform: translateX(0);
	}
}

/* ========================================
   RTL Support - Production Ready
   ======================================== */

[dir="rtl"] .rmt-text-marquee.rmt-direction-left .rmt-text-marquee-track {
	animation-name: rmt-marquee-left-rtl;
}

[dir="rtl"] .rmt-text-marquee.rmt-direction-right .rmt-text-marquee-track {
	animation-name: rmt-marquee-right-rtl;
}

/* JavaScript-detected RTL class for redundancy */
.rmt-text-marquee.rmt-is-rtl.rmt-direction-left .rmt-text-marquee-track {
	animation-name: rmt-marquee-left-rtl;
}

.rmt-text-marquee.rmt-is-rtl.rmt-direction-right .rmt-text-marquee-track {
	animation-name: rmt-marquee-right-rtl;
}

/* ========================================
   Hover Effects
   ======================================== */

.rmt-text-marquee.rmt-pause-hover:hover .rmt-text-marquee-track {
	animation-play-state: paused;
}

/* ========================================
   Accessibility
   ======================================== */

@media (prefers-reduced-motion: reduce) {
	.rmt-text-marquee,
	.rmt-text-marquee * {
		animation-duration: 0.01s !important;
		animation-iteration-count: 1 !important;
		transition: none !important;
	}
}

.rmt-text-marquee:focus {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ========================================
   Responsive
   ======================================== */

@media (max-width: 768px) {
	.rmt-text-marquee {
		/* Mobile-specific adjustments */
	}
}

/* ========================================
   Elementor Editor
   ======================================== */

.elementor-editor-active .rmt-text-marquee .rmt-text-marquee-track {
	animation-duration: 30s;
}