/**
 * EM Elementor Comparison Table - Frontend Styles
 * 
 * Professional comparison table widget with:
 * - Multiple independent tables with toggle
 * - Mobile sticky headers (horizontal & vertical)
 * - Responsive tooltip positioning
 * - Clean, modular architecture
 * 
 * @package EM_Elementor_Comparison_Table
 * @author Evermade
 * @since 1.0.0
 */

/* ==========================================================================
   CSS Custom Properties (Variables)
   ========================================================================== */

.bluecom-comparison-table {
	--table-border-color: #ddd;
	--table-border-width: 1px;
	--header-bg: #f9f9f9;
	--header-text: #333;
	--cell-bg: #fff;
	--cell-alternate-bg: #f7f7f7;
	--cell-text: #333;
	--cell-padding: 12px;
	--button-bg: #0073aa;
	--button-text: #fff;
	--button-hover-bg: #005177;
	--tooltip-bg: #333;
	--tooltip-text: #fff;
	--toggle-bg: #f0f0f0;
	--toggle-text: #333;
	--toggle-active-bg: #0073aa;
	--toggle-active-text: #fff;
}

/* ==========================================================================
		Mobile Sticky Header (Table Header becomes sticky on mobile)
		========================================================================== */

/* On mobile, make thead sticky when enabled */
@media (max-width: 767px) {
	thead.mobile-sticky-header {
		position: -webkit-sticky;
		position: sticky;
		top: 0; /* Starts at natural position, becomes sticky when scrolling */
		z-index: 100;
		background: white;
	}
	
	/* Ensure the header row scrolls horizontally with the table */
	thead.mobile-sticky-header tr {
		display: table-row;
	}
	
	thead.mobile-sticky-header th {
		background: var(--header-bg);
		position: relative;
		z-index: 1;
	}
	
	/* First column in header stays fixed on left ONLY (horizontal sticky, NOT vertical sticky) */
	thead.mobile-sticky-header .comparison-header-discount {
		position: -webkit-sticky;
		position: sticky;
		left: 0;
		/* NO top property - this makes it stick horizontally only, NOT vertically */
		z-index: 101; /* Higher than thead (100) to appear above everything */
		background: var(--header-bg);
		min-width: 140px; /* Match tbody first column width */
		max-width: 140px;
		width: 140px;
		white-space: normal;
		padding: 8px !important;
		box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
	}
	
	/* Make sure the text is visible and wraps properly */
	.comparison-header-discount .header-discount-text {
		display: block;
		word-break: break-word;
		hyphens: auto;
		-webkit-hyphens: auto;
	}
	
	/* Ensure empty header cells still maintain proper height */
	.comparison-header-discount .header-discount-text:empty::before {
		content: '\00a0'; /* Non-breaking space */
		display: inline;
	}
	
	/* Plan columns in header scroll horizontally */
	thead.mobile-sticky-header th:not(:first-child) {
		position: relative;
		min-width: 80px;
	}
}

/* ==========================================================================
		Toggle Buttons (Modern Design)
		========================================================================== */

.comparison-toggle-wrapper {
	display: flex;
	gap: 0;
	margin-bottom: 20px;
	justify-content: center;
	border-radius: 50px;
	overflow: hidden;
	background: none;
	max-width: 400px;
	margin-left: auto;
	margin-right: auto;
}

.comparison-toggle-btn {
	flex: 1;
	padding: 14px 28px;
	border: 2px solid #000000 !important;
	background-color: none;
	color: #333;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
}

.comparison-toggle-btn:last-child {
	margin-left: 4px;
}

.comparison-toggle-btn.active {
	background-color: var(--toggle-active-bg, #000000);
	color: var(--toggle-active-text, #ffffff);
	background: none;
}

.comparison-toggle-btn.active:hover {
	background-color: var(--toggle-active-bg, #000000);
	opacity: 0.95;
}

/* ==========================================================================
		Scroll Hint (Mobile Only)
		========================================================================== */

.comparison-scroll-hint {
	display: none; /* Hidden by default, shown only on mobile */
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px;
	margin: 12px 0;
	background-color: none;
	border-radius: 6px;
	text-align: center;
}

.comparison-scroll-hint-icon img {
	width: 24px;
	height: 24px;
	display: block;
}

.comparison-scroll-hint-text {
	font-size: 14px;
	color: #666;
	font-weight: 500;
}

@media (max-width: 767px) {
	.comparison-scroll-hint {
		display: flex;
	}
}

/* ==========================================================================
		Table Visibility with Smooth Transitions
		========================================================================== */

/* Hide tables by default on frontend */
body:not(.elementor-editor-active) .comparison-table-wrapper {
	display: none;
	opacity: 0;
	transition: opacity 0.4s ease-in-out;
}

/* Show active table with fade-in */
body:not(.elementor-editor-active) .comparison-table-wrapper.active {
	display: block;
	opacity: 1;
	animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* In Elementor editor, show all tables */
.elementor-editor-active .comparison-table-wrapper {
	display: block;
	opacity: 0.5;
}

.elementor-editor-active .comparison-table-wrapper.active {
	opacity: 1;
}

/* ==========================================================================
		Table Base Styles
		========================================================================== */

.comparison-table-scroll-wrapper {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.comparison-table-header-text {
	font-size: 14px;
	font-weight: 600;
	text-align: center;
	padding: 14px 16px;
	background-color: var(--header-bg);
	color: var(--header-text);
	margin-bottom: 0;
	border: var(--table-border-width) solid var(--table-border-color);
	border-bottom: none;
	border-top-left-radius: 8px;
	border-top-right-radius: 8px;
}

.comparison-table {
	width: 100%;
	border-collapse: collapse;
	border: var(--table-border-width) solid var(--table-border-color);
}

.comparison-table th,
.comparison-table td {
	padding: var(--cell-padding);
	border: var(--table-border-width) solid var(--table-border-color);
	text-align: center;
	/* Enable text hyphenation for better layout */
	hyphens: auto;
	-webkit-hyphens: auto;
	-ms-hyphens: auto;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* ==========================================================================
		Header Styles
		========================================================================== */

.comparison-table thead th {
	background-color: var(--header-bg);
	color: var(--header-text);
	font-weight: 600;
	vertical-align: middle;
}

.plan-name {
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 8px;
}

.plan-price {
	font-size: 24px;
	font-weight: 700;
	color: var(--button-bg);
}

.comparison-header-discount {
	text-align: center !important;
	vertical-align: middle;
	position: relative;
}

.header-discount-text {
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: var(--header-text);
}

/* ==========================================================================
		Body Styles
		========================================================================== */

.comparison-table tbody td {
	background-color: var(--cell-bg);
	color: var(--cell-text);
}

.comparison-table tbody tr:nth-child(odd) td {
	background-color: var(--cell-alternate-bg);
}

.comparison-feature-name {
	text-align: left; /* Default - controlled by Elementor */
	font-weight: 500;
}

.comparison-feature-value {
	text-align: center;
}

.plan-value-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.plan-value-icon img {
	display: block;
	width: 14px;
	height: 14px;
	opacity: 1;
	/* Blue color for checkmark */
	filter: invert(27%) sepia(98%) saturate(6841%) hue-rotate(228deg) brightness(100%) contrast(106%);
}

.plan-value-text {
	display: inline-block;
}

/* ==========================================================================
		Tooltips
		========================================================================== */

.comparison-tooltip {
	display: inline-flex;
	align-items: center;
	margin-left: 8px;
	position: relative;
}

.tooltip-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 16px;
	height: 16px;
	background-color: #04C98D; /* Default green circle - can be overridden by Elementor */
	border-radius: 50%;
	cursor: help;
	flex-shrink: 0;
}

.tooltip-icon img {
	display: block;
	width: 16px;
	height: 16px;
	opacity: 1;
}

.comparison-tooltip-text {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	z-index: 10000;
	background-color: var(--tooltip-bg);
	color: var(--tooltip-text);
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 14px;
	white-space: nowrap;
	bottom: calc(100% + 8px);
	left: 50%;
	transform: translateX(-50%);
	transition: opacity 0.3s, visibility 0.3s;
	min-width: 200px;
	max-width: 300px;
	white-space: normal;
	/* Text alignment controlled by Elementor */
}

.comparison-tooltip:hover .comparison-tooltip-text,
.tooltip-icon:hover + .comparison-tooltip-text {
	visibility: visible;
	opacity: 1;
}

/* Tooltip arrow - desktop: appears above */
.comparison-tooltip-text::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--tooltip-bg);
}

/* Desktop: show tooltip normally */
@media (min-width: 768px) {
	.comparison-tooltip-text {
		display: block !important; /* Re-enable for desktop */
	}
}

/* Hide desktop arrow on mobile (portal doesn't need arrow) */
@media (max-width: 767px) {
	.comparison-tooltip-text::after {
		display: none;
	}
}

/* ==========================================================================
		Buttons
		========================================================================== */

.comparison-btn {
	display: inline-block;
	padding: 12px 24px;
	background-color: var(--button-bg);
	color: var(--button-text);
	text-decoration: none;
	border-radius: 4px;
	font-weight: 600;
	transition: background-color 0.3s ease;
}

.comparison-btn:hover {
	background-color: var(--button-hover-bg);
	color: var(--button-text);
	text-decoration: none;
}

/* ==========================================================================
		Mobile Footer (below buttons)
		========================================================================== */

.comparison-mobile-footer {
	display: none; /* Hidden by default, shown only on mobile */
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 12px;
	text-align: center;
	background-color: var(--header-bg);
	border: var(--table-border-width) solid var(--table-border-color);
	border-top: none;
	margin-top: 0;
}

.comparison-mobile-footer-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.comparison-mobile-footer-icon img {
	display: block;
	width: 24px;
	height: auto;
}

.comparison-mobile-footer-text {
	font-size: 14px;
	font-weight: 600;
	color: var(--header-text);
}

/* ==========================================================================
		Mobile Styles (767px and below)
		========================================================================== */

@media (max-width: 767px) {
	/* Scroll wrapper with better mobile handling */
	.comparison-table-scroll-wrapper {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		position: relative;
		/* Allow sticky positioning to work properly */
		overflow-y: visible;
	}

	/* Table structure for mobile */
	.comparison-table {
		display: table;
		table-layout: auto;
		width: auto;
		min-width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		position: relative;
	}

	/* First column stays fixed horizontally on mobile (CSS sticky) */
	.comparison-table tbody td:first-child,
	.comparison-table tfoot td:first-child {
		position: -webkit-sticky;
		position: sticky;
		left: 0;
		z-index: 10;
		background-color: var(--cell-bg); /* Default background (white) */
		box-shadow: 2px 0 4px rgba(0, 0, 0, 0.1);
		min-width: 140px;
		max-width: 140px;
		width: 140px;
		text-align: left !important;
		padding: 12px 8px;
		font-size: 13px;
		line-height: 1.4;
		/* Match parent row height */
		height: 100%;
		vertical-align: middle;
		display: table-cell;
	}
	
	/* Match alternating row backgrounds - ODD rows get alternate color */
	.comparison-table tbody tr:nth-child(odd) td:first-child {
		background-color: var(--cell-alternate-bg);
	}

	/* Plan columns - ensure they scroll under sticky column */
	.comparison-table td:not(:first-child),
	.comparison-table th:not(:first-child) {
		position: relative;
		z-index: 1;
		min-width: 120px;
	}

	/* Feature name cell - remove flexbox on mobile for better text alignment */
	.comparison-feature-name {
		display: block;
		word-wrap: break-word;
		word-break: break-word;
		hyphens: auto;
		-webkit-hyphens: auto;
	}
	
	.comparison-feature-name .comparison-tooltip {
		display: inline-flex;
	}

	.feature-text {
		flex: 1;
	}

	/* Tooltip positioning for mobile - hidden (portal used instead) */
	.comparison-tooltip-text {
		display: none !important; /* Hide original, portal used instead on mobile */
	}
	
	/* Mobile tooltip portal styling (created at body level by JS) */
	.mobile-tooltip-portal {
		position: fixed;
		left: 20px;
		right: 20px;
		z-index: 999999;
		max-width: calc(100vw - 40px);
		width: auto;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
		border-radius: 6px;
		padding: 12px 16px;
		pointer-events: none; /* Allow clicks to pass through to backdrop */
	}

	/* Toggle buttons for mobile */
	.comparison-toggle-wrapper {
		flex-wrap: wrap;
	}

	.comparison-toggle-btn {
		flex: 1;
		min-width: 140px;
	}

	/* Reduce padding on mobile */
	.comparison-table th,
	.comparison-table td {
		padding: 8px;
		font-size: 14px;
	}

	.plan-name {
		font-size: 16px;
		margin-bottom: 4px;
	}

	.plan-price {
		font-size: 20px;
	}

	.comparison-btn {
		padding: 10px 16px;
		font-size: 14px;
		width: 100%;
	}

	/* Mobile footer - show on mobile */
	.comparison-mobile-footer {
		display: flex;
	}

	/* Header text styling for mobile */
	.comparison-table-header-text {
		font-size: 13px;
		padding: 10px;
	}

	/* Mobile sticky toggle - show on mobile */
	.comparison-mobile-sticky-toggle {
		display: block;
	}

	/* Adjust toggle buttons for mobile */
	.comparison-toggle-wrapper {
		max-width: 100%;
		margin-bottom: 16px;
	}

	.comparison-toggle-btn {
		padding: 12px 20px;
		font-size: 14px;
	}
}

/* ==========================================================================
		Tablet Styles (768px to 1024px)
		========================================================================== */

@media (min-width: 768px) and (max-width: 1024px) {
	.comparison-table th,
	.comparison-table td {
		padding: 10px;
	}

	.plan-name {
		font-size: 16px;
	}

	.plan-price {
		font-size: 22px;
	}
}

/* ==========================================================================
		Print Styles
		========================================================================== */

@media print {
	.comparison-toggle-wrapper {
		display: none;
	}

	.comparison-table-wrapper {
		display: block !important;
	}

	.comparison-table {
		page-break-inside: avoid;
	}
}