/* Custom Table for Elementor — base structural styles.
   Colors, fonts, spacing, border radius, etc. are all applied inline
   via Elementor's own control "selectors" (see the Style tab).
   This file only handles structural / responsive behaviour. */

.ctw-table-outer {
	width: 100%;
}

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

/* Default mode: keep the row intact and let the wrapper scroll
   sideways on small/medium screens instead of wrapping text or
   breaking the row onto multiple lines. */
.ctw-table-wrapper.ctw-nowrap .ctw-table th,
.ctw-table-wrapper.ctw-nowrap .ctw-table td {
	white-space: nowrap;
}

.ctw-table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: auto;
}

.ctw-table th,
.ctw-table td {
	box-sizing: border-box;
}

.ctw-table:not(.ctw-nowrap-off) td,
.ctw-table:not(.ctw-nowrap-off) th {
	word-wrap: normal;
}

.ctw-title {
	margin: 0;
}

/* Thin, unobtrusive scrollbar on the horizontal-scroll mode */
.ctw-table-wrapper::-webkit-scrollbar {
	height: 6px;
}
.ctw-table-wrapper::-webkit-scrollbar-thumb {
	background: rgba(0, 0, 0, 0.2);
	border-radius: 4px;
}

/* ---- Optional mode: stack table into cards on small screens ---- */
@media ( max-width: 1024px ) {
	.ctw-table-wrapper.ctw-stack-tablet table,
	.ctw-table-wrapper.ctw-stack-tablet thead,
	.ctw-table-wrapper.ctw-stack-tablet tbody,
	.ctw-table-wrapper.ctw-stack-tablet th,
	.ctw-table-wrapper.ctw-stack-tablet td,
	.ctw-table-wrapper.ctw-stack-tablet tr {
		display: block;
		width: 100% !important;
		white-space: normal;
	}
	.ctw-table-wrapper.ctw-stack-tablet { overflow-x: hidden; }
	.ctw-table-wrapper.ctw-stack-tablet thead { display: none; }
	.ctw-table-wrapper.ctw-stack-tablet tr { margin-bottom: 4px; }
	.ctw-table-wrapper.ctw-stack-tablet td {
		position: relative;
		padding-left: 45% !important;
		text-align: left !important;
		min-height: 2em;
	}
	.ctw-table-wrapper.ctw-stack-tablet td::before {
		content: attr(data-ctw-label);
		position: absolute;
		left: 12px;
		top: 50%;
		transform: translateY(-50%);
		width: 40%;
		white-space: normal;
		font-weight: 700;
		text-align: left;
	}
}

@media ( max-width: 767px ) {
	.ctw-table-wrapper.ctw-stack-mobile table,
	.ctw-table-wrapper.ctw-stack-mobile thead,
	.ctw-table-wrapper.ctw-stack-mobile tbody,
	.ctw-table-wrapper.ctw-stack-mobile th,
	.ctw-table-wrapper.ctw-stack-mobile td,
	.ctw-table-wrapper.ctw-stack-mobile tr {
		display: block;
		width: 100% !important;
		white-space: normal;
	}
	.ctw-table-wrapper.ctw-stack-mobile { overflow-x: hidden; }
	.ctw-table-wrapper.ctw-stack-mobile thead { display: none; }
	.ctw-table-wrapper.ctw-stack-mobile tr { margin-bottom: 4px; }
	.ctw-table-wrapper.ctw-stack-mobile td {
		position: relative;
		padding-left: 45% !important;
		text-align: left !important;
		min-height: 2em;
	}
	.ctw-table-wrapper.ctw-stack-mobile td::before {
		content: attr(data-ctw-label);
		position: absolute;
		left: 12px;
		top: 50%;
		transform: translateY(-50%);
		width: 40%;
		white-space: normal;
		font-weight: 700;
		text-align: left;
	}
}