/* Modern Safari-compatible player stats scrolling */
.player-stats-swiper.swiper-container {
	width: 100% !important;
	position: relative !important;
	overflow: hidden !important; /* Let Swiper handle overflow */
}

.player-stats-swiper .swiper-wrapper {
	width: 100% !important;
	display: flex !important;
	transition-property: transform !important;
	height: auto !important; /* Override swiper-bundle.min.css height: 100% that was causing excessive spacing */
}

.player-stats-swiper .swiper-slide {
	width: 100% !important;
	flex-shrink: 0 !important;
	position: relative !important;
}

/* Enhanced table wrapper for Safari scrolling */
.sp-table-wrapper {
	min-width: 350px !important;
	position: relative !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;

	/* Modern scroll properties for Safari */

	scroll-behavior: smooth !important;

	scrollbar-width: thin !important;

	scrollbar-color: rgba(0,0,0,0.3) transparent !important;

	/* Enhanced touch scrolling for Safari */

	-webkit-overflow-scrolling: touch !important;

	overscroll-behavior-x: contain !important;

	touch-action: pan-x !important;

	/* Performance optimizations */

	will-change: scroll-position !important;

	transform: translateZ(0) !important; /* Force hardware acceleration */
}

/* Safari-specific optimizations */
@supports (-webkit-touch-callout: none) {

	.sp-table-wrapper {
		/* Use momentum-based scrolling for iOS Safari */

		-webkit-overflow-scrolling: touch !important;

		/* Prevent bounce at scroll boundaries */

		overscroll-behavior: none !important;
	}
}

/* Custom scrollbar for WebKit browsers (Safari/Chrome) - only show when scrolling is needed */
.sp-table-wrapper.has-overflow::-webkit-scrollbar {
	height: 8px !important;
	background: rgba(0,0,0,0.05) !important;
	border-radius: 4px !important;
}

.sp-table-wrapper.has-overflow::-webkit-scrollbar-thumb {
	background: rgba(0,0,0,0.3) !important;
	border-radius: 4px !important;
	transition: background 0.2s ease !important;
}

.sp-table-wrapper.has-overflow::-webkit-scrollbar-thumb:hover {
	background: rgba(0,0,0,0.5) !important;
}

/* Hide scrollbar when no scrolling is needed */
.player-stats-swiper.no-scroll .sp-table-wrapper::-webkit-scrollbar {
	display: none !important;
}

/* Table styling optimizations */
.sp-table-wrapper table {
	min-width: 600px !important;

	width: max-content !important;

	border-collapse: collapse !important;

	table-layout: auto !important;

	/* Prevent layout shifts during scroll */

	backface-visibility: hidden !important;
}

/* Scroll indicator for better UX - only show on desktop when scrolling is actually needed */
.player-stats-swiper.has-overflow::after {
	content: "← Scroll for more stats →" !important;
	position: absolute !important;
	bottom: -25px !important;
	left: 50% !important;
	transform: translateX(-50%) !important;
	font-size: 12px !important;
	color: rgba(0,0,0,0.5) !important;
	pointer-events: none !important;
	opacity: 1 !important;
	transition: opacity 0.3s ease !important;
	z-index: 10 !important;
	display: none !important; /* Hidden by default */
}

/* Only show scroll indicator on desktop when overflow exists */
@media (min-width: 769px) {

	.player-stats-swiper.has-overflow::after {
		display: block !important;
	}
}

/* Hide scroll indicator when not needed or on mobile */
.player-stats-swiper.no-scroll::after,
.player-stats-swiper::after {
	opacity: 0 !important;
	display: none !important;
}

/* Unique instance styling to prevent conflicts */
.player-stats-swiper[data-swiper-initialized] {
	isolation: isolate !important;
}

.player-stats-swiper[data-swiper-initialized] .sp-table-wrapper {
	contain: layout style !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {

	.player-stats tr.second_tr td {
		padding: 2px !important;
	}

	.player-stats table,
	td,
	th {
		font-size: 10px !important;
	}

	/* Enhanced touch target for mobile */
	.sp-table-wrapper {
		min-height: 44px !important; /* iOS recommended touch target */
	}

	/* Hide scroll indicator text on mobile completely */
	.player-stats-swiper::after {
		display: none !important;
	}
}

/* Default table styling */

.player-stats tr.second_tr td {
	padding: 5px !important;
}

.player-stats table,
td,
th {
	font-size: 14px !important;
}

/* Additional mobile optimizations */

@media (max-width: 480px) {

	.sp-table-wrapper {
		/* Increase scroll area for easier finger scrolling */

		padding-bottom: 10px !important;
	}

	.sp-table-wrapper.has-overflow::-webkit-scrollbar {
		height: 12px !important; /* Larger scrollbar for touch */
	}
}

/* Fade effect for overflowing content - only show when actually scrolling is needed and on desktop */

@media (min-width: 769px) {

	.sp-table-wrapper.has-overflow::before,
	.sp-table-wrapper.has-overflow::after {
		content: "" !important;
		position: absolute !important;
		top: 0 !important;
		bottom: 0 !important;
		width: 20px !important;
		pointer-events: none !important;
		z-index: 1 !important;
		transition: opacity 0.3s ease !important;
	}

	.sp-table-wrapper.has-overflow::before {
		left: 0 !important;
		background: linear-gradient(to right, rgba(255,255,255,0.8), transparent) !important;
		opacity: 0 !important;
	}

	.sp-table-wrapper.has-overflow::after {
		right: 0 !important;
		background: linear-gradient(to left, rgba(255,255,255,0.8), transparent) !important;
		opacity: 1 !important;
	}

	/* Show/hide fade effects based on scroll position */

	.sp-table-wrapper.has-overflow.scrolled-left::before {
		opacity: 1 !important;
	}

	.sp-table-wrapper.has-overflow.scrolled-right::after {
		opacity: 0 !important;
	}
}

/* Hide fade effects on mobile or when no scrolling is needed */

.player-stats-swiper.no-scroll .sp-table-wrapper::before,
.player-stats-swiper.no-scroll .sp-table-wrapper::after {
	display: none !important;
}

@media (max-width: 768px) {

	.sp-table-wrapper::before,
	.sp-table-wrapper::after {
		display: none !important;
	}
}