/* Recent Transaction Auto Slider — front-end styles
 * All colors/sizes come from CSS custom properties generated from
 * plugin settings (see class-rts-frontend.php::build_dynamic_css).
 * Every selector uses the rts- prefix to avoid theme conflicts.
 */

.rts-wrapper {
	box-sizing: border-box;
	width: 100%;
	background: var(--rts-main-bg, #0b1220);
	border-radius: var(--rts-section-radius, 16px);
	border: var(--rts-section-border, none);
	padding: var(--rts-section-padding, 24px) 0;
	position: relative;
	overflow: hidden;
	font-family: var(--rts-font-family, inherit);
}
.rts-wrapper.rts-layout-boxed,
.rts-wrapper.rts-layout-custom {
	max-width: var(--rts-section-max-width, 1200px);
	margin-left: auto;
	margin-right: auto;
}
.rts-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--rts-overlay-color, #000);
	opacity: var(--rts-overlay-opacity, 0);
	pointer-events: none;
}

.rts-wrapper *,
.rts-wrapper *::before,
.rts-wrapper *::after {
	box-sizing: border-box;
}

.rts-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 var(--rts-section-padding, 24px) 16px;
	background: var(--rts-header-bg, transparent);
}
.rts-header .rts-icon {
	width: 22px;
	height: 22px;
	color: var(--rts-icon-color, #3f7bff);
	flex-shrink: 0;
}
.rts-title {
	display: inline-block;
	margin: 0;
	color: var(--rts-title-color, #e5ecff);
	font-size: var(--rts-title-size, 15px);
	font-weight: var(--rts-title-weight, 400);
	line-height: 1.3;
}

.rts-slider {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--rts-slider-bg, transparent);
	border: var(--rts-slider-border, none);
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}

.rts-track {
	display: flex;
	align-items: stretch;
	gap: var(--rts-card-gap, 16px);
	width: max-content;
	will-change: transform;
	animation: rts-scroll-rtl var(--rts-speed-desktop, 30s) linear infinite;
	padding: 4px var(--rts-card-gap, 16px);
}

.rts-slider.rts-dir-ltr .rts-track {
	animation-name: rts-scroll-ltr;
}

/* Seamless infinite loop: the card list is rendered twice in the markup,
 * so translating exactly -50% lines the second copy up perfectly with
 * no jump and no gap. */
@keyframes rts-scroll-rtl {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes rts-scroll-ltr {
	from { transform: translate3d(-50%, 0, 0); }
	to   { transform: translate3d(0, 0, 0); }
}

.rts-slider[data-paused="1"] .rts-track {
	animation-play-state: paused;
}

.rts-card {
	position: relative;
	flex: 0 0 auto;
	width: var(--rts-card-width, 280px);
	min-width: var(--rts-card-min-width, 240px);
	max-width: var(--rts-card-max-width, 340px);
	height: var(--rts-card-height, auto);
	padding: var(--rts-card-padding, 16px 18px);
	border-radius: var(--rts-card-radius, 14px);
	background: var(--rts-card-bg, #141b2d);
	border: var(--rts-outer-border, 1px solid #2a3550);
	box-shadow: var(--rts-card-shadow, none);
	backdrop-filter: blur(var(--rts-bg-blur, 0px));
	-webkit-backdrop-filter: blur(var(--rts-bg-blur, 0px));
	transition: transform var(--rts-hover-transition, 250ms) ease, background-color var(--rts-hover-transition, 250ms) ease, border-color var(--rts-hover-transition, 250ms) ease, box-shadow var(--rts-hover-transition, 250ms) ease;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.rts-card:hover {
	transform: translateY(var(--rts-hover-translate-y, -4px)) scale(var(--rts-hover-scale, 1.03));
	background-color: var(--rts-hover-bg, inherit);
	border-color: var(--rts-hover-border, inherit);
}

.rts-card-top,
.rts-card-mid {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.rts-username {
	color: var(--rts-username-color, #e5ecff);
	font-size: var(--rts-username-size, 14px);
	font-weight: var(--rts-username-weight, 600);
	letter-spacing: 0.2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.rts-status {
	flex-shrink: 0;
	font-size: var(--rts-status-size, 12px);
	font-weight: var(--rts-status-weight, 600);
	padding: 3px 10px;
	border-radius: 999px;
	border: var(--rts-status-border, none);
	line-height: 1.6;
}

.rts-datetime {
	color: var(--rts-date-color, #8b96b5);
	font-size: var(--rts-date-size, 12px);
}

.rts-amount {
	color: var(--rts-amount-color, #4ade80);
	font-size: var(--rts-amount-size, 16px);
	font-weight: var(--rts-amount-weight, 700);
	white-space: nowrap;
}

.rts-card-bottom {
	margin-top: 4px;
	padding: 8px 10px;
	border-radius: 8px;
	background: var(--rts-bottom-bg, transparent);
	border: var(--rts-bottom-border, none);
	display: flex;
	gap: 6px;
	align-items: baseline;
	flex-wrap: wrap;
}
.rts-bottom-label {
	color: var(--rts-bottom-label-color, #8b96b5);
	font-size: var(--rts-bottom-label-size, 12px);
}
.rts-bottom-value {
	color: var(--rts-bottom-value-color, #c7d2f0);
	font-size: var(--rts-bottom-value-size, 12px);
	font-weight: 500;
}

.rts-reference {
	color: var(--rts-reference-color, #8b96b5);
	font-size: var(--rts-reference-size, 11px);
	font-weight: var(--rts-reference-weight, 400);
	opacity: 0.85;
	word-break: break-all;
}

.rts-description {
	color: var(--rts-description-color, #8b96b5);
	font-size: var(--rts-description-size, 12px);
	font-weight: var(--rts-description-weight, 400);
	line-height: 1.4;
}

/* ---------------- Animated border glow variants ---------------- */
.rts-anim-pulse,
.rts-anim-glow_pulse,
.rts-anim-breathing {
	animation: rts-border-pulse var(--rts-anim-speed, 3s) ease-in-out infinite;
}
@keyframes rts-border-pulse {
	0%, 100% { box-shadow: 0 0 var(--rts-anim-blur-min, 10px) 0 var(--rts-anim-color, #3f7bff); }
	50%      { box-shadow: 0 0 var(--rts-anim-blur-max, 60px) 0 var(--rts-anim-color, #3f7bff); }
}

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) {
	.rts-card {
		width: var(--rts-tablet-card-width, 240px);
		padding: var(--rts-tablet-padding, 14px);
		font-size: calc(1em * var(--rts-tablet-font-scale, 0.95));
	}
	.rts-track { gap: var(--rts-tablet-gap, 12px); animation-duration: var(--rts-speed-tablet, 25s); }
}

@media (max-width: 600px) {
	.rts-card {
		width: var(--rts-mobile-card-width, 210px);
		padding: var(--rts-mobile-padding, 12px);
		font-size: calc(1em * var(--rts-mobile-font-scale, 0.88));
	}
	.rts-track { gap: var(--rts-mobile-gap, 10px); animation-duration: var(--rts-speed-mobile, 20s); }
	.rts-header { padding-left: 12px; padding-right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.rts-track { animation: none; }
}