/**
 * Specifications Table Component Styles
 * Reusable table component for product specifications
 *
 * @package Eryvium
 * @since Eryvium 1.0.0
 */

/* ============================================
   SPECIFICATIONS TABLE
   ============================================ */

.specifications-table-wrapper {
	width: 100%;
	position: relative;
}

.specifications-table-container {
	position: relative;
	width: clamp(320px, 90vw, 1300px);
	min-height: clamp(400px, 50vh, 614px);
	margin: 0 auto;
	padding: clamp(16px, 3vw, 44px);
	background: rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-bottom: none !important;
	overflow: hidden;
	transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
	            box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
	            border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.specifications-table-container:hover {
	will-change: transform;
	transform: translate3d(0, -4px, 0);
	box-shadow: 0 20px 60px rgba(7, 179, 241, 0.2),
	            0 0 40px rgba(7, 179, 241, 0.1);
	border-color: rgba(7, 179, 241, 0.4);
}

.specifications-table-sphere {
	position: absolute;
	top: -7%;
	right: -2%;
	width: clamp(150px, 25vw, 369px);
	height: clamp(150px, 25vw, 364px);
	border-radius: 50%;
	background: linear-gradient(180deg, #003c88 0%, #07b3f1 100%);
	z-index: 1;
	pointer-events: none;
	filter: blur(clamp(30px, 5vw, 80px));
	transform: translateZ(0);
	backface-visibility: hidden;
}

.specifications-table-sphere-left {
	position: absolute;
	bottom: -2%;
	left: -2%;
	width: clamp(150px, 25vw, 350px);
	height: clamp(150px, 25vw, 350px);
	border-radius: 50%;
	background: linear-gradient(180deg, #003c88 0%, #07b3f1 100%);
	z-index: 1;
	pointer-events: none;
	filter: blur(clamp(30px, 5vw, 60px));
	transform: translateZ(0);
	backface-visibility: hidden;
}

.specifications-table-inner {
	position: relative;
	z-index: 3;
	width: 100%;
}

.specifications-table-scroll {
	width: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
}

.specifications-table-title-wrapper {
	background: rgb(22 22 22 / 25%);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: clamp(30px, 3vw, 50px);
	padding: clamp(6px, 0.5vw, 8px) clamp(12px, 1.5vw, 24px);
	margin: 0 0 clamp(24px, 2.5vw, 40px) 0;
	display: inline-block;
	box-shadow: 0 4px 16px rgb(0 0 0 / 0%);
}

.specifications-table-title {
	font-family: 'Plus Jakarta Sans', sans-serif;
	font-size: clamp(18px, 1.5vw, 24px);
	font-weight: 600; /* Semi Bold */
	line-height: clamp(22px, 1.9vw, 30.24px);
	color: #ffffff;
	margin: 0;
	text-align: left;
}

.specifications-table-bg-image {
	position: absolute;
	top: 10%;
	right: -22%;
	transform: translate3d(-50%, 0, 0);
	width: clamp(200px, 40vw, 556px);
	height: clamp(200px, 40vw, 579px);
	z-index: 1;
	pointer-events: none;
	opacity: 0.3;
	object-fit: contain;
	backface-visibility: hidden;
}

.specifications-table {
	position: relative;
	z-index: 2;
	width: 100%;
	border-collapse: separate;
	border-spacing: 14px clamp(12px, 1.5vw, 24px);
	table-layout: fixed;
	height: 100%;
}

.specifications-table thead {
	background: transparent;
}

.specifications-table thead tr {
	border-bottom: 1px solid #3c56664f;
	position: relative;
}

.specifications-table thead tr::after {
	content: '';
	position: absolute;
	bottom: clamp(-16px, -1.5vw, -24px);
	left: 0;
	right: 0;
	height: 1px;
	background-color: #3c56664f;
}

.specifications-table thead th {
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(12px, 0.9vw, 14px);
	font-weight: 400; /* Regular */
	line-height: clamp(18px, 1.5vw, 24px);
	color: #CCCCCC;
	text-align: left;
	padding: clamp(10px, 0.9vw, 14px) 0;
	height: clamp(40px, 3.2vw, 52px);
	min-height: clamp(40px, 3.2vw, 52px);
	text-transform: none;
	letter-spacing: 0;
	width: 20%;
	box-sizing: border-box;
	word-wrap: break-word;
}

.specifications-table tbody {
	display: table-row-group;
	height: 100%;
}

.specifications-table tbody tr {
	border-bottom: none;
	height: auto;
	min-height: clamp(45px, 3.4vw, 55px);
	position: relative;
	display: table-row;
}

.specifications-table tbody tr:not(:last-child)::after {
	content: '';
	position: absolute;
	bottom: clamp(-16px, -1.5vw, -24px);
	left: 0;
	right: 0;
	height: 1px;
	background-color: #3c56664f;
}

.specifications-table tbody tr:last-child {
	border-bottom: none !important;
}

.specifications-table tbody tr:last-child::after {
	display: none !important;
	content: none !important;
}

.specifications-table tbody tr:last-child td {
	border-bottom: none !important;
}

/* Fix Safari divider at bottom */
.specifications-table-container {
	border-bottom: none !important;
}

.specifications-table-container::after {
	display: none !important;
	content: none !important;
}

.specifications-table tbody td {
	font-family: 'DM Sans', sans-serif;
	font-size: clamp(14px, 1.1vw, 18px);
	font-weight: 400; /* Regular */
	line-height: clamp(20px, 1.7vw, 27px);
	color: #eeeeee;
	padding: clamp(10px, 0.9vw, 14px) 0;
	vertical-align: middle;
	height: 100%;
	min-height: clamp(45px, 3.4vw, 55px);
	width: 20%;
	box-sizing: border-box;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Column alignment - равномерное распределение */
.specifications-table th,
.specifications-table td {
	box-sizing: border-box;
}

/* For 4 columns table (HPMSM) */
.specifications-table th:nth-child(1),
.specifications-table td:nth-child(1),
.specifications-table th:nth-child(2),
.specifications-table td:nth-child(2),
.specifications-table th:nth-child(3),
.specifications-table td:nth-child(3),
.specifications-table th:nth-child(4),
.specifications-table td:nth-child(4) {
	width: 25%; /* 4 колонки = по 25% каждая */
}

/* For 5 columns table (default) */
.specifications-table th:nth-child(5),
.specifications-table td:nth-child(5) {
	width: 20%; /* 5 колонок = по 20% каждая */
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* Prevent horizontal scroll for pages with specifications table */
body:has(.specifications-table-wrapper) {
	overflow-x: hidden;
	max-width: 100vw;
}

/* ============================================
   ORE CONTENT SECTIONS - COMMON STYLES
   ============================================ */

/* Common styles for all ore-content sections with black background */
.chrome-ore-content-section .specifications-table-container,
.manganese-ore-content-section .specifications-table-container,
.copper-ore-content-section .specifications-table-container,
.tin-ore-content-section .specifications-table-container,
.iron-ore-content-section .specifications-table-container,
.hpmsm-content-section .specifications-table-container {
	width: 100%;
	max-width: 100%;
	margin: 0;
	border-radius: 20px;
}

@media (min-width: 769px) and (max-width: 1300px) {
	.chrome-ore-content-section .specifications-table,
	.manganese-ore-content-section .specifications-table,
	.copper-ore-content-section .specifications-table,
	.tin-ore-content-section .specifications-table,
	.iron-ore-content-section .specifications-table,
	.hpmsm-content-section .specifications-table {
		min-width: 1300px;
	}
}

@media (max-width: 1400px) {
	.specifications-table-wrapper {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}
	
	.specifications-table-container {
		width: 100%;
		max-width: 100%;
		box-sizing: border-box;
	}
	
	.specifications-table-bg-image {
		max-width: 100%;
	}
	
	/* Fix animated wrapper overflow on tablets and medium screens */
	.specifications-table-wrapper.animate-on-scroll,
	.specifications-table-wrapper.animate-on-scroll.animated,
	.animate-on-scroll .specifications-table-wrapper,
	.animate-on-scroll.animated .specifications-table-wrapper {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 768px) {
	.specifications-table-wrapper {
		/* Prevent page-level horizontal scrolling */
		overflow: hidden;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
	}
	
	.specifications-table-container {
		/* Use box-sizing to include padding in width calculation */
		box-sizing: border-box;
		padding: clamp(16px, 3vw, 24px);
		min-height: auto;
		/* Force container to stay within viewport */
		width: 100%;
		max-width: 100%;
		margin: 0;
		/* Prevent container itself from overflowing */
		overflow: hidden;
		/* Remove dynamic width calculation on mobile */
		border-radius: 0;
	}
	
	/* Common mobile styles for all ore-content sections */
	.chrome-ore-content-section,
	.manganese-ore-content-section,
	.copper-ore-content-section,
	.tin-ore-content-section,
	.iron-ore-content-section,
	.hpmsm-content-section {
		overflow-x: hidden;
	}
	
	.chrome-ore-content-section .specifications-table-wrapper,
	.manganese-ore-content-section .specifications-table-wrapper,
	.copper-ore-content-section .specifications-table-wrapper,
	.tin-ore-content-section .specifications-table-wrapper,
	.iron-ore-content-section .specifications-table-wrapper,
	.hpmsm-content-section .specifications-table-wrapper {
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 0;
		overflow: hidden;
	}
	
	.chrome-ore-content-section .specifications-table-container,
	.manganese-ore-content-section .specifications-table-container,
	.copper-ore-content-section .specifications-table-container,
	.tin-ore-content-section .specifications-table-container,
	.iron-ore-content-section .specifications-table-container,
	.hpmsm-content-section .specifications-table-container {
		box-sizing: border-box;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: clamp(16px, 4vw, 24px);
		border-radius: 20px;
		overflow: hidden;
	}
	
	.chrome-ore-content-section .specifications-table-inner,
	.manganese-ore-content-section .specifications-table-inner,
	.copper-ore-content-section .specifications-table-inner,
	.tin-ore-content-section .specifications-table-inner,
	.iron-ore-content-section .specifications-table-inner,
	.hpmsm-content-section .specifications-table-inner {
		overflow: hidden;
	}
	
	.specifications-table-sphere-left {
		display: none;
	}
	
	.specifications-table-sphere {
		display: block;
		top: auto;
		bottom: 18%;
		right: 10%;
		width: 400px;
		height: 400px;
		transform: translate(30%, 30%);
		filter: blur(clamp(20px, 4vw, 40px));
	}
	
	.specifications-table-bg-image {
		display: none;
	}
	
	.specifications-table-title-wrapper {
		margin-bottom: clamp(20px, 2.5vw, 32px);
	}
	
	.specifications-table-title {
		font-size: clamp(16px, 4vw, 20px);
		line-height: clamp(20px, 5vw, 26px);
	}
	
	.specifications-table-inner {
		width: 100%;
		max-width: 100%;
		overflow: hidden;
	}

	.specifications-table-scroll {
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		max-width: 100%;
		overscroll-behavior-x: contain;
		touch-action: pan-x;
		/* Ensure scrollbar is visible */
		scrollbar-width: thin;
		scrollbar-color: rgba(7, 179, 241, 0.5) rgba(255, 255, 255, 0.1);
		/* Add padding bottom for scrollbar space */
		padding-bottom: 12px;
	}
	
	/* WebKit scrollbar styling for better UX */
	.specifications-table-scroll::-webkit-scrollbar {
		height: 8px;
	}
	
	.specifications-table-scroll::-webkit-scrollbar-track {
		background: rgba(255, 255, 255, 0.1);
		border-radius: 4px;
	}
	
	.specifications-table-scroll::-webkit-scrollbar-thumb {
		background: rgba(7, 179, 241, 0.5);
		border-radius: 4px;
	}
	
	.specifications-table-scroll::-webkit-scrollbar-thumb:hover {
		background: rgba(7, 179, 241, 0.7);
	}
	
	.specifications-table {
		/* Size by content and scroll horizontally instead of squeezing columns */
		width: auto;
		min-width: 800px;
		display: inline-table;
		table-layout: auto;
		border-collapse: separate;
		border-spacing: 0 clamp(16px, 2vw, 32px);
	}
	
	.specifications-table thead {
		display: table-header-group;
		position: sticky;
		top: 0;
		z-index: 10;
		background: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
	
	.specifications-table tbody {
		display: table-row-group;
	}
	
	.specifications-table tr {
		display: table-row;
	}
	
	.specifications-table th,
	.specifications-table td {
		display: table-cell;
		white-space: nowrap;
		width: auto;
	}
	
	.specifications-table thead th {
		font-size: clamp(11px, 2.5vw, 13px);
		padding: clamp(12px, 2vw, 16px) clamp(16px, 3vw, 24px);
		height: auto;
		min-height: clamp(45px, 5vw, 55px);
		position: sticky;
		top: 0;
		background: rgba(0, 0, 0, 0.8);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
	}
	
	.specifications-table tbody td {
		font-size: clamp(12px, 3vw, 15px);
		line-height: clamp(18px, 4vw, 22px);
		padding: clamp(12px, 2vw, 16px) clamp(16px, 3vw, 24px);
		min-height: clamp(50px, 6vw, 60px);
		height: auto;
	}
	
	.specifications-table th:nth-child(1),
	.specifications-table td:nth-child(1),
	.specifications-table th:nth-child(2),
	.specifications-table td:nth-child(2),
	.specifications-table th:nth-child(3),
	.specifications-table td:nth-child(3),
	.specifications-table th:nth-child(4),
	.specifications-table td:nth-child(4) {
		width: auto;
	}
	
	.specifications-table th:nth-child(5),
	.specifications-table td:nth-child(5) {
		width: auto;
	}
	
	/* Fix animated wrapper overflow on mobile */
	.specifications-table-wrapper.animate-on-scroll,
	.specifications-table-wrapper.animate-on-scroll.animated,
	.animate-on-scroll .specifications-table-wrapper,
	.animate-on-scroll.animated .specifications-table-wrapper {
		width: 100%;
		max-width: 100%;
	}
}

@media (max-width: 320px) {
	.specifications-table-title {
		font-size: 14px;
		line-height: clamp(20px, 5vw, 26px);
	}
}