/* Table Plugin - Elementor Table Widget */

.tp-table-wrap {
	max-width: 100%;
	box-sizing: border-box;
}

.tp-table {
	border-collapse: collapse;
	max-width: 100%;
}

.tp-table th,
.tp-table td {
	box-sizing: border-box;
	vertical-align: middle;
}

.tp-table thead th {
	text-align: left;
	font-weight: 600;
}

.tp-table tbody td {
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tp-table tbody td a {
	text-decoration: none;
	display: inline-block;
}

.tp-cell-button {
	margin-top: 8px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.tp-cell-button-content {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.tp-cell-button-icon {
	display: inline-flex;
	align-items: center;
}

.tp-cell-button-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/*
 * Cell inner layout wrapper.
 * Alignment (left/center/right) is set as `text-align` on the parent <th>/<td>
 * by the repeater's per-item control and simply inherits down to these
 * inline-block children - this keeps a single alignment source of truth
 * that works the same for both the side-by-side and stacked layouts below.
 */
.tp-cell-image,
.tp-cell-text {
	display: inline-block;
	vertical-align: middle;
}

.tp-cell-text > p {
	margin: 0;
}

.tp-cell-text > p:not(:last-child) {
	margin-bottom: 0.5em;
}

.tp-cell-inner > *:not(:last-child) {
	margin-inline-end: 8px;
}

/* Image above/below text: stack full-width, gap becomes vertical */
.tp-cell-inner.tp-layout-image_top .tp-cell-image,
.tp-cell-inner.tp-layout-image_top .tp-cell-text,
.tp-cell-inner.tp-layout-image_bottom .tp-cell-image,
.tp-cell-inner.tp-layout-image_bottom .tp-cell-text {
	display: block;
	margin-inline-end: 0;
}

.tp-cell-inner.tp-layout-image_top > *:not(:last-child),
.tp-cell-inner.tp-layout-image_bottom > *:not(:last-child) {
	margin-bottom: 8px;
}

.tp-cell-image img {
	display: inline-block;
	max-width: 100%;
	height: auto;
}

/* ============================
   Responsive: Horizontal Scroll
   ============================ */
.tp-responsive-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tp-responsive-scroll .tp-table {
	min-width: 480px;
}

/*
 * Responsive: Stack as Cards.
 * The actual @media rule (with the user-configured breakpoint) is generated
 * per-widget-instance as an inline <style> block in class-table-widget.php,
 * because a CSS custom property cannot be read inside a @media condition.
 * The selectors below are duplicated there - keep both in sync if you edit.
 */