/* 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%;
	height: var(--rts-section-height, 220px);
	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);
	isolation: isolate;
	box-shadow: 0 12px 32px rgba(0,0,0,.14);
}
.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;
	z-index: 0;
}

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




.rts-header {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 2px var(--rts-section-padding, 24px) 18px;
	background: var(--rts-header-bg, transparent);
	position: relative;
	z-index: 1;
}
.rts-header .rts-icon {
	width: 22px;
	height: 22px;
	color: var(--rts-icon-color, #3f7bff);
	flex-shrink: 0;
}
.rts-live-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
	padding: 5px 10px;
	border: 1px solid #22c55e;
	border-radius: 999px;
	background: rgba(34, 197, 94, .12);
	color: #22c55e;
	font-size: 11px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .7px;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 0 12px rgba(34, 197, 94, .22);
}
.rts-live-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 0 3px rgba(34, 197, 94, .16), 0 0 8px rgba(34, 197, 94, .8);
	animation: rts-live-pulse 1.5s ease-in-out infinite;
}
@keyframes rts-live-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: .45; }
}
.rts-title {
	margin: 0;
	color: var(--rts-title-color, #e5ecff);
	font-size: var(--rts-title-size, 20px);
	font-weight: var(--rts-title-weight, 600);
	line-height: 1.3;
	letter-spacing: -.2px;
	text-shadow: 0 1px 2px rgba(0,0,0,.18);
}

.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%);
	padding: 7px 0;
	box-shadow: none;
	z-index: 1;
}

.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: 5px 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-width, 280px);
	max-width: var(--rts-card-width, 280px);
	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);
	filter: drop-shadow(0 8px 12px rgba(0,0,0,.16));
	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: 11px;
	overflow: hidden;
}

.rts-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, transparent 4%, var(--rts-status-color, #22c55e) 50%, transparent 96%);
	opacity: .86;
	pointer-events: none;
}

.rts-card.rts-is-complete {
	box-shadow: 0 0 8px rgba(34,197,94,.42), 0 0 18px rgba(34,197,94,.18);
}

@property --rts-border-angle {
	syntax: "<angle>";
	inherits: false;
	initial-value: 0deg;
}

.rts-card.rts-is-complete::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	--rts-border-angle: 0deg;
	background: conic-gradient(
		from var(--rts-border-angle),
		transparent 0deg,
		transparent 245deg,
		rgba(34,197,94,.3) 285deg,
		#72ff9b 322deg,
		#22c55e 342deg,
		transparent 360deg
	);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask-composite: exclude;
	pointer-events: none;
	animation: rts-green-border-run 2.2s linear infinite;
}

@keyframes rts-green-border-run {
	to { --rts-border-angle: 360deg; }
}

.rts-card:hover {
	transform: none;
	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: 12px;
}

.rts-username {
	color: var(--rts-username-color, #e5ecff);
	font-size: var(--rts-username-size, 14px);
	font-weight: var(--rts-username-weight, 600);
	letter-spacing: .15px;
	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: 4px 10px;
	border-radius: 10px;
	border: var(--rts-status-border, none);
	line-height: 1.35;
	white-space: nowrap;
	box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 3px 10px color-mix(in srgb, var(--rts-status-color) 18%, transparent);
	transition: color 280ms ease, background-color 280ms ease, border-color 280ms ease, box-shadow 280ms ease, opacity 180ms ease;
}

.rts-status.is-processing {
	animation: rts-status-breathe 1.25s ease-in-out infinite;
}

.rts-status.is-complete {
	animation: rts-status-arrive .38s ease-out both;
}

@keyframes rts-status-breathe {
	0%, 100% { opacity: 1; }
	50% { opacity: .68; }
}

@keyframes rts-status-arrive {
	from { opacity: .4; transform: scale(.94); }
	to { opacity: 1; transform: scale(1); }
}

.rts-datetime {
	color: var(--rts-date-color, #8b96b5);
	font-size: var(--rts-date-size, 12px);
	opacity: .88;
	font-variant-numeric: tabular-nums;
}

.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;
	text-shadow: 0 1px 8px color-mix(in srgb, currentColor 18%, transparent);
	font-variant-numeric: tabular-nums;
	letter-spacing: .1px;
}

.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: min(var(--rts-card-width, 280px), calc(100vw - 40px));
		min-width: min(var(--rts-card-width, 280px), calc(100vw - 40px));
		max-width: min(var(--rts-card-width, 280px), calc(100vw - 40px));
		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: min(var(--rts-card-width, 280px), calc(100vw - 28px));
		min-width: min(var(--rts-card-width, 280px), calc(100vw - 28px));
		max-width: min(var(--rts-card-width, 280px), calc(100vw - 28px));
		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: 14px; padding-right: 14px; gap: 8px; }
	.rts-live-badge { padding: 4px 8px; font-size: 10px; }
	.rts-title { line-height: 1.2; }
}

@media (prefers-reduced-motion: reduce) {
	.rts-track { animation: none; }
	.rts-card.rts-is-complete::after { animation-duration: 5s; }
}