/**
 * Comparison Table widget styles.
 *
 * Every rule here is a *baseline*: Elementor style controls are generated with a
 * higher specificity ({{WRAPPER}} .class), so any control the user touches always
 * wins. The baseline is needed because Elementor 4.x does not apply the `default`
 * argument of group controls (border / box-shadow / typography).
 */

/* Structure
 * ------------------------------------------------------------------------- */

.fartak-ct__scroll {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.fartak-ct__table {
	width: 100%;
	min-width: 800px;
	border-collapse: collapse;
	table-layout: auto;
	font-size: 14px;
	line-height: 1.6;
	/* Font size is driven by the table typography control; never set it here. */
}

.fartak-ct__table--fixed {
	table-layout: fixed;
}

.fartak-ct__head,
.fartak-ct__cell {
	padding: 15px;
	text-align: center;
	vertical-align: middle;
	border: 1px solid #e0e0e0;
}

.fartak-ct__head {
	background-color: #2c4268;
	color: #ffffff;
	font-size: 15px;
	font-weight: 700;
}

.fartak-ct__cell-text {
	font-size: 13px;
	font-weight: 700;
}

.fartak-ct__cell--price {
	font-size: 16px;
	font-weight: 700;
}

/* Feature column
 * ------------------------------------------------------------------------- */

/* Only body cells of the feature column. The corner <th> must keep the header
 * background/color, otherwise this baseline (0,2,1) outranks the generated
 * header rule {{WRAPPER}} .fartak-ct__head (0,2,0) and the header control
 * would never reach that cell. */
.fartak-ct__table td.fartak-ct__label-cell {
	background-color: #f2f4f8;
	color: #333333;
	text-align: start;
	font-weight: 500;
}

.fartak-ct__label {
	display: flex;
	align-items: center;
	gap: 10px;
}

.fartak-ct__label--icon-after {
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.fartak-ct__label-icon {
	color: #5a6a85;
}

.fartak-ct__label-text {
	display: inline-block;
}

/* Value cells
 * ------------------------------------------------------------------------- */

.fartak-ct__cell-content {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #333333;
	line-height: 1.35;
}

/* Default colors only. The icon box is sized by the check_size / cross_size controls
 * (width/height), so font-size is deliberately not set here. */
.fartak-ct__cell--check .fartak-ct__cell-content {
	color: #28a745;
}

.fartak-ct__cell--cross .fartak-ct__cell-content {
	color: #adb5bd;
}

.fartak-ct__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Elementor renders font icons as <svg class="...fartak-ct__icon e-font-icon-svg">,
 * i.e. the classes sit ON the <svg> element itself, not on a wrapper around it.
 * Only fill is set here: the box is sized by the icon size controls (width/height).
 * This 1em value is just the fallback for when no control value is stored, and it is
 * always outranked by the generated {{WRAPPER}} rules. */
.fartak-ct__icon,
.fartak-ct__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

/* Stripes
 * ------------------------------------------------------------------------- */

.fartak-ct__table--striped tbody tr:nth-child(odd) .fartak-ct__cell:not(.fartak-ct__label-cell) {
	background-color: #f9f9f9;
}

/* Mobile
 * ------------------------------------------------------------------------- */

/* Only rules that no style control competes with. Padding, min-width and font-size are
 * all driven by Elementor controls and any value set here would either lose on
 * specificity or silently override the user's choice. */

@media (max-width: 767px) {
	.fartak-ct__label {
		gap: 6px;
	}
}