/**
 * ThemePlix Elements - Styles
 * Version: 1.0.0
 */

/* ===================================
   Vertical Divider Widget
   =================================== */

.themeplix-vertical-divider {
	display: block;
	border-left: 2px solid #000;
	height: 100px;
	width: 10px;
	margin: 0 auto;
}

/* Widget Container */
.elementor-widget-themeplix_vertical_divider {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
	.themeplix-vertical-divider {
		height: 50px;
	}
}

/* Editor Specific Styles */
.elementor-editor-active .themeplix-vertical-divider {
	min-height: 20px;
}

/* ===================================
   Post Reading Time Widget
   =================================== */

.themeplix-post-reading-time {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 8px;
	line-height: 1.4;
}

.themeplix-post-reading-time__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.themeplix-post-reading-time__icon .themeplix-post-reading-time__svg {
	display: block;
}

.themeplix-post-reading-time__text {
	white-space: nowrap;
}

/* ===================================
   Content Table Widget
   =================================== */

.tpx-table-wrap {
	overflow-x: auto;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
}

.tpx-table {
	width: 100%;
	margin-bottom: 0;
	border-collapse: collapse;
	border-spacing: 0;
}

.tpx-table thead th {
	padding: 12px 16px;
	font-weight: 600;
	text-align: left;
	border-bottom: 2px solid #ddd;
}

.tpx-table .tpx-th-content {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	max-width: 100%;
}

.tpx-table .tpx-th-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	flex: 0 0 auto;
}

.tpx-table .tpx-th-icon img {
	width: 18px;
	height: 18px;
	display: block;
	object-fit: contain;
}

.tpx-table .tpx-th-text {
	min-width: 0;
}

.tpx-table tbody td {
	padding: 10px 16px;
	border-bottom: 1px solid #eee;
}

.tpx-table tbody tr:last-child td {
	border-bottom: none;
}

.tpx-table-striped-odd tbody tr:nth-child(odd) td {
	background-color: #f9f9f9;
}

.tpx-table-striped-even tbody tr:nth-child(even) td {
	background-color: #f9f9f9;
}

/* Icon Box cell */
.tpx-icon-box {
	display: flex;
	align-items: center;
	gap: 10px;
}

.tpx-ib-icon {
	flex-shrink: 0;
	font-size: 24px;
	line-height: 1;
}

.tpx-ib-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.tpx-ib-title {
	font-weight: 600;
	margin-bottom: 2px;
}

.tpx-ib-desc {
	font-size: 0.9em;
	opacity: 0.8;
}

/* Responsive: no-scroll */
.tpx-table-no-scroll {
	overflow: visible;
}

/* ===================================
   Nested Content Table Widget
   =================================== */

.tpx-nested-table {
	width: 100%;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 0;
	row-gap: 0;
	align-items: stretch;
	border-top: 1px solid #ddd;
	border-left: 1px solid #ddd;
	background: #fff;
}

.tpx-nested-table > .e-con,
.tpx-nested-table > .e-child {
	position: relative;
	min-width: 0;
	box-sizing: border-box;
	border-right: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
	background: #fff;
	padding: 10px 14px;
	min-height: 48px;
}

/* Editor-only helpers so empty cells stay visible & droppable */
.elementor-editor-active .elementor-widget-tpx-nested-content-table .elementor-widget-container {
	background: transparent;
}

.elementor-editor-active .tpx-nested-table > .e-con,
.elementor-editor-active .tpx-nested-table > .e-child {
	border-style: dashed;
}

/* Per-cell column-span utility classes.
   Apply any of these as a CSS class on an individual cell container
   (Advanced > CSS Classes in the cell's panel) to make it span N columns. */
.tpx-nested-table > .e-con.tpx-span-1,
.tpx-nested-table > .e-child.tpx-span-1 { grid-column: span 1; }
.tpx-nested-table > .e-con.tpx-span-2,
.tpx-nested-table > .e-child.tpx-span-2 { grid-column: span 2; }
.tpx-nested-table > .e-con.tpx-span-3,
.tpx-nested-table > .e-child.tpx-span-3 { grid-column: span 3; }
.tpx-nested-table > .e-con.tpx-span-4,
.tpx-nested-table > .e-child.tpx-span-4 { grid-column: span 4; }
.tpx-nested-table > .e-con.tpx-span-5,
.tpx-nested-table > .e-child.tpx-span-5 { grid-column: span 5; }
.tpx-nested-table > .e-con.tpx-span-6,
.tpx-nested-table > .e-child.tpx-span-6 { grid-column: span 6; }
.tpx-nested-table > .e-con.tpx-span-7,
.tpx-nested-table > .e-child.tpx-span-7 { grid-column: span 7; }
.tpx-nested-table > .e-con.tpx-span-8,
.tpx-nested-table > .e-child.tpx-span-8 { grid-column: span 8; }
.tpx-nested-table > .e-con.tpx-span-9,
.tpx-nested-table > .e-child.tpx-span-9 { grid-column: span 9; }
.tpx-nested-table > .e-con.tpx-span-10,
.tpx-nested-table > .e-child.tpx-span-10 { grid-column: span 10; }
.tpx-nested-table > .e-con.tpx-span-11,
.tpx-nested-table > .e-child.tpx-span-11 { grid-column: span 11; }
.tpx-nested-table > .e-con.tpx-span-12,
.tpx-nested-table > .e-child.tpx-span-12 { grid-column: span 12; }
.tpx-nested-table > .e-con.tpx-span-full,
.tpx-nested-table > .e-child.tpx-span-full { grid-column: 1 / -1; }

/* Optional role classes that users can apply via CSS Classes on a cell
   to style/identify it as a header/body/footer cell. Header/footer
   default to spanning the full row. */
.tpx-nested-table > .e-con.tpx-cell-header,
.tpx-nested-table > .e-child.tpx-cell-header {
	grid-column: 1 / -1;
	font-weight: 600;
	background: #f5f6fa;
	border-bottom: 2px solid #bfc5cc;
}

.tpx-nested-table > .e-con.tpx-cell-footer,
.tpx-nested-table > .e-child.tpx-cell-footer {
	grid-column: 1 / -1;
	background: #f5f6fa;
	border-top: 2px solid #bfc5cc;
	font-weight: 500;
}

/* Panel button used to append a new cell (editor-only, injected by JS). */
.tpx-add-cell-panel-actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 10px;
}

.tpx-add-cell-panel-actions .tpx-add-cell-btn {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 10px;
	font-size: 12px;
	font-weight: 500;
	background: #fff;
	border: 1px solid #d5d8dc;
	border-radius: 3px;
	color: #495157;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}

.tpx-add-cell-panel-actions .tpx-add-cell-btn:hover {
	background: #f1f2f3;
	border-color: #b6b9be;
	color: #1f2124;
}

.tpx-add-cell-panel-actions .tpx-add-cell-btn i {
	margin-right: 4px;
}

@media (max-width: 767px) {
	.tpx-nested-table {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ===================================
   Timeline Widget
   =================================== */

.tpx-timeline {
	--tpx-tl-gap: 30px;
	--tpx-tl-pointer-size: 40px;
	position: relative;
}

/* ─ Line segments via per-item ::before ─ */
.tpx-tl-item::before {
	content: '';
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	border-left: 3px solid #e0e0e0;
	transform: translateX(-50%);
	z-index: 0;
}

/* Non-last items: extend through the gap to the next item */
.tpx-tl-item:not(:last-child)::before {
	bottom: calc(-1 * var(--tpx-tl-item-gap, 30px));
}

/* First item: start at pointer center */
.tpx-tl-item:first-child::before {
	top: calc(var(--tpx-tl-pointer-size) / 2);
}

/* Last item: line only from top to pointer center */
.tpx-tl-item:last-child::before {
	bottom: auto;
	height: calc(var(--tpx-tl-pointer-size) / 2);
}

/* Single item: no line */
.tpx-tl-item:first-child:last-child::before {
	display: none;
}

/* Layout-left: line on the right side */
.tpx-tl-layout-left .tpx-tl-item::before {
	left: auto;
	right: calc(var(--tpx-tl-pointer-size) / 2);
	transform: none;
}

/* Layout-right: line on the far left */
.tpx-tl-layout-right .tpx-tl-item::before {
	left: calc(var(--tpx-tl-pointer-size) / 2);
	transform: none;
}

/* ─ Item: all full-width, padding pushes card to correct side ─ */
.tpx-tl-item {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	overflow: visible;
}

/* Alternating right & Content-right: card on right half */
.tpx-tl-layout-alternating .tpx-tl-side-right,
.tpx-tl-layout-alternating-reverse .tpx-tl-side-right {
	padding-left: calc(50% + var(--tpx-tl-pointer-size) / 2 + var(--tpx-tl-gap));
	padding-right: 0;
}

/* Content-right: line on far left, card takes full width */
.tpx-tl-layout-right .tpx-tl-item {
	padding-left: calc(var(--tpx-tl-pointer-size) + var(--tpx-tl-gap));
	padding-right: 0;
}

/* Alternating left: card on left half */
.tpx-tl-layout-alternating .tpx-tl-side-left,
.tpx-tl-layout-alternating-reverse .tpx-tl-side-left {
	padding-right: calc(50% + var(--tpx-tl-pointer-size) / 2 + var(--tpx-tl-gap));
	padding-left: 0;
	text-align: right;
}

/* Content-left: card on left, line on right */
.tpx-tl-layout-left .tpx-tl-item {
	padding-right: calc(var(--tpx-tl-pointer-size) + var(--tpx-tl-gap));
	padding-left: 0;
	text-align: right;
}

/* ─ Pointer: always on the line ─ */
.tpx-tl-pointer {
	position: absolute;
	width: var(--tpx-tl-pointer-size);
	height: var(--tpx-tl-pointer-size);
	border-radius: 50%;
	background: #fff;
	border: 2px solid #e0e0e0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	color: #6ec1e4;
	z-index: 2;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}

.tpx-tl-pointer svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Pointer: content-left (line on right) */
.tpx-tl-layout-left .tpx-tl-pointer {
	left: auto;
	right: 0;
	transform: none;
}

/* Pointer: content-right (line on left) */
.tpx-tl-layout-right .tpx-tl-pointer {
	left: 0;
	transform: none;
}

/* ─ Date (outside card) ─ */
.tpx-tl-date {
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
	display: inline-block;
}

.tpx-tl-date-inside {
	position: static !important;
	margin-bottom: 10px;
}

/* Date: alternating right → date on the left side */
.tpx-tl-layout-alternating .tpx-tl-side-right > .tpx-tl-date,
.tpx-tl-layout-alternating-reverse .tpx-tl-side-right > .tpx-tl-date {
	position: absolute;
	right: calc(50% + var(--tpx-tl-pointer-size) / 2 + var(--tpx-tl-gap));
	top: 8px;
	text-align: right;
}

/* Date: alternating left → date on the right side */
.tpx-tl-layout-alternating .tpx-tl-side-left > .tpx-tl-date,
.tpx-tl-layout-alternating-reverse .tpx-tl-side-left > .tpx-tl-date {
	position: absolute;
	left: calc(50% + var(--tpx-tl-pointer-size) / 2 + var(--tpx-tl-gap));
	top: 8px;
	text-align: left;
}

/* Date: content-right → date not shown outside (no opposite side) */
.tpx-tl-layout-right > .tpx-tl-item > .tpx-tl-date:not(.tpx-tl-date-inside) {
	position: static;
	display: block;
	margin-bottom: 6px;
}

/* Date: content-left → date on the left side */
.tpx-tl-layout-left > .tpx-tl-item > .tpx-tl-date:not(.tpx-tl-date-inside) {
	position: absolute;
	left: 0;
	top: 8px;
	text-align: left;
}

/* ─ Opposite Side Icon ─ */
.tpx-tl-opposite-icon {
	display: none;
	position: absolute;
	top: var(--tpx-tl-opposite-icon-top, calc(var(--tpx-tl-pointer-size) + 12px));
	align-items: center;
	justify-content: center;
	font-size: var(--tpx-tl-opposite-icon-size, 1.4em);
	line-height: 1;
}

/* Alternating right-side card → opposite icon on the left */
.tpx-tl-layout-alternating .tpx-tl-side-right > .tpx-tl-opposite-icon,
.tpx-tl-layout-alternating-reverse .tpx-tl-side-right > .tpx-tl-opposite-icon {
	display: flex;
	right: calc(50% + var(--tpx-tl-pointer-size) / 2 + var(--tpx-tl-gap) + var(--tpx-tl-opposite-icon-offset, 0px));
	left: auto;
}

/* Alternating left-side card → opposite icon on the right */
.tpx-tl-layout-alternating .tpx-tl-side-left > .tpx-tl-opposite-icon,
.tpx-tl-layout-alternating-reverse .tpx-tl-side-left > .tpx-tl-opposite-icon {
	display: flex;
	left: calc(50% + var(--tpx-tl-pointer-size) / 2 + var(--tpx-tl-gap) + var(--tpx-tl-opposite-icon-offset, 0px));
	right: auto;
}

/* ─ Card ─ */
.tpx-tl-card {
	position: relative;
	border-radius: 8px;
	overflow: hidden;
	transform: translate(var(--tpx-tl-card-ox, 0), var(--tpx-tl-card-oy, 0));
}

.tpx-tl-card-inner {
	padding: 24px;
}

/* ─ Arrow ─ */
.tpx-tl-arrow {
	position: absolute;
	top: 12px;
	width: 0;
	height: 0;
	border: 8px solid transparent;
}

/* Arrow: right-side cards → arrow on left */
.tpx-tl-has-arrow .tpx-tl-side-right .tpx-tl-arrow,
.tpx-tl-has-arrow.tpx-tl-layout-right .tpx-tl-arrow {
	left: -16px;
	right: auto;
	border-right-color: #fff;
	border-left-color: transparent;
}

/* Arrow: left-side cards → arrow on right */
.tpx-tl-has-arrow .tpx-tl-side-left .tpx-tl-arrow,
.tpx-tl-has-arrow.tpx-tl-layout-left .tpx-tl-arrow {
	right: -16px;
	left: auto;
	border-left-color: #fff;
	border-right-color: transparent;
}

/* ─ Content ─ */
.tpx-tl-title {
	margin: 0 0 8px;
	font-size: 1.15em;
	font-weight: 600;
}

.tpx-tl-desc {
	margin: 0;
	font-size: 0.95em;
	line-height: 1.6;
	color: #555;
}

.tpx-tl-desc p:last-child {
	margin-bottom: 0;
}

.tpx-tl-image {
	margin-bottom: 15px;
	overflow: hidden;
	border-radius: 4px;
}

.tpx-tl-image img {
	display: block;
	width: 100%;
	height: auto;
}

.tpx-tl-bottom-label {
	margin-top: 12px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 0.9em;
	line-height: 1.4;
	color: #666;
}

.tpx-tl-bottom-label-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	flex: 0 0 auto;
}

.tpx-tl-bottom-label-icon i {
	font-size: 14px;
	line-height: 1;
	display: block;
}

.tpx-tl-bottom-label-icon svg {
	width: 14px;
	height: 14px;
	display: block;
}

.tpx-tl-bottom-label-text {
	display: inline-block;
}

/* ─ Mobile ─ */
@media (max-width: 767px) {
	.tpx-timeline .tpx-tl-item::before {
		left: calc(var(--tpx-tl-pointer-size) / 2) !important;
		right: auto !important;
		transform: none !important;
	}

	.tpx-tl-item {
		padding-left: calc(var(--tpx-tl-pointer-size) + var(--tpx-tl-gap)) !important;
		padding-right: 0 !important;
		text-align: left !important;
	}

	.tpx-tl-pointer {
		left: 0 !important;
		right: auto !important;
		transform: none !important;
	}

	.tpx-tl-item > .tpx-tl-date {
		position: static !important;
		display: block;
		margin-bottom: 6px;
		text-align: left !important;
	}

	.tpx-tl-has-arrow .tpx-tl-side-left .tpx-tl-arrow,
	.tpx-tl-has-arrow.tpx-tl-layout-left .tpx-tl-arrow {
		right: auto !important;
		left: -16px !important;
		border-left-color: transparent !important;
		border-right-color: #fff !important;
	}
}


/* ===================================
   Simple Table Widget (themeplix_simple_table)
   =================================== */

.tpx-st-wrap {
width: 100%;
}

.tpx-st-wrap--scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}

.tpx-st {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
background: #fff;
}

.tpx-st th,
.tpx-st td {
padding: 10px 14px;
vertical-align: top;
text-align: left;
border: 0;
}

.tpx-st thead th {
font-weight: 600;
text-align: left;
background: #f5f6fa;
border-bottom: 2px solid #ddd;
}

.tpx-st tbody td {
border-bottom: 1px solid #eee;
}

.tpx-st tbody tr:last-child td {
border-bottom: 0;
}

.tpx-st tfoot td {
background: #f5f6fa;
border-top: 2px solid #ddd;
font-weight: 500;
}

/* Striped rows */
.tpx-st-striped-yes .tpx-st tbody tr:nth-child(even) td {
background-color: #f9fafc;
}

/* Bordered */
.tpx-st-bordered-yes .tpx-st {
border: 1px solid #e0e0e0;
}

.tpx-st-bordered-yes .tpx-st th,
.tpx-st-bordered-yes .tpx-st td {
border: 1px solid #e0e0e0;
}

/* Compact padding */
.tpx-st-compact-yes .tpx-st th,
.tpx-st-compact-yes .tpx-st td {
padding: 6px 10px;
}


/* ============================================================
   Comparison Table
   ============================================================ */
.tpx-cmp-wrap {
overflow: hidden;
}
.tpx-cmp-scroll {
width: 100%;
overflow-x: auto;
}
.tpx-cmp {
width: 100%;
border-collapse: separate;
border-spacing: 0;
table-layout: auto;
}
.tpx-cmp thead th {
text-align: left;
font-weight: 600;
vertical-align: middle;
white-space: nowrap;
}
.tpx-cmp tbody td {
vertical-align: middle;
}
.tpx-cmp tbody tr:last-child td {
border-bottom: 0 !important;
}

/* Title + subtitle cell */
.tpx-cmp-ts {
display: flex;
align-items: center;
gap: 12px;
}
.tpx-cmp-ts-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.tpx-cmp-title {
font-weight: 600;
line-height: 1.3;
}
.tpx-cmp-sub {
font-size: 0.85em;
line-height: 1.3;
}

/* Leading mark */
.tpx-cmp-lead {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
line-height: 1;
}
.tpx-cmp-lead--dot {
width: 14px;
height: 14px;
border: 2px solid currentColor;
border-radius: 50%;
background: transparent;
color: #9ca3af;
}
.tpx-cmp-lead--icon i,
.tpx-cmp-lead--icon svg {
width: 18px;
height: 18px;
font-size: 18px;
line-height: 1;
color: inherit;
fill: currentColor;
}

/* Pill */
.tpx-cmp-pill {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid transparent;
line-height: 1.2;
white-space: nowrap;
font-weight: 500;
}
.tpx-cmp-pill-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 0;
}
.tpx-cmp-pill-icon i,
.tpx-cmp-pill-icon svg {
width: 1em;
height: 1em;
font-size: 1em;
line-height: 1;
fill: currentColor;
}


/* ============================================================
   Comparison Table
   ============================================================ */
.tpx-cmp-wrap {
	overflow: hidden;
}
.tpx-cmp-scroll {
	width: 100%;
	overflow-x: auto;
}
.tpx-cmp {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: auto;
}
.tpx-cmp thead th {
	text-align: left;
	font-weight: 600;
	vertical-align: middle;
	white-space: nowrap;
}
.tpx-cmp tbody td {
	vertical-align: middle;
}
.tpx-cmp tbody tr:last-child td {
	border-bottom: 0 !important;
}

/* Title + subtitle cell */
.tpx-cmp-ts {
	display: flex;
	align-items: center;
	gap: 12px;
}
.tpx-cmp-ts-body {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.tpx-cmp-title {
	font-weight: 600;
	line-height: 1.3;
}
.tpx-cmp-sub {
	font-size: 0.85em;
	line-height: 1.3;
}

/* Leading mark */
.tpx-cmp-lead {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	line-height: 1;
}
.tpx-cmp-lead--dot {
	width: 14px;
	height: 14px;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: #9ca3af;
}
.tpx-cmp-lead--icon i,
.tpx-cmp-lead--icon svg {
	width: 18px;
	height: 18px;
	font-size: 18px;
	line-height: 1;
	color: inherit;
	fill: currentColor;
}

/* Pill */
.tpx-cmp-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid transparent;
	line-height: 1.2;
	white-space: nowrap;
	font-weight: 500;
}
.tpx-cmp-pill-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}
.tpx-cmp-pill-icon i,
.tpx-cmp-pill-icon svg {
	width: 1em;
	height: 1em;
	font-size: 1em;
	line-height: 1;
	fill: currentColor;
}

/* Content Table: keep title/sub lead on the left and vertically centered */
.tpx-table .tpx-cmp-ts {
	align-items: center;
	flex-direction: row;
}
.tpx-table .tpx-cmp-ts-body {
	justify-content: center;
}
.tpx-table .tpx-cmp-lead {
	align-self: center;
}
.tpx-table .tpx-cmp-lead--svg img {
	width: 18px;
	height: 18px;
	display: block;
	object-fit: contain;
}
.tpx-table-stack .tpx-table td > .tpx-cmp-ts {
	flex-direction: row;
	align-items: center;
}