/* eSIM Comparison Table Styles - Premium Light Theme & Mobile Cards */

.tv-esim-comparison-section {
	padding: 40px 0;
	background: #f8fafc; /* Sleek light mode background (matches phone compatibility section) */
	font-family: 'Outfit', 'Inter', sans-serif;
	color: #334155;
}

.tv-esim-comparison-container {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
}

/* Header Section */
.tv-comparison-header {
	text-align: center;
	margin-bottom: 30px;
}

.tv-comp-subtitle {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 2px;
	color: #1e40af; /* Bold Royal Blue */
	background: rgba(30, 64, 175, 0.06);
	border: 1px solid rgba(30, 64, 175, 0.12);
	padding: 6px 16px;
	border-radius: 20px;
	margin-bottom: 16px;
	text-transform: uppercase;
}

.tv-comp-title {
	font-size: 40px;
	font-weight: 800;
	color: #0f172a; /* Slate 900 Dark Navy */
	margin: 0;
	letter-spacing: -0.8px;
}

/* --- Layout Toggles --- */
.tv-comparison-desktop-only {
	display: block;
}

.tv-comparison-mobile-only {
	display: none;
}

/* --- DESKTOP TABLE DESIGN --- */
.tv-comparison-table-outer {
	position: relative;
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 20px;
	padding: 24px;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.03), 
	            0 1px 3px rgba(0, 0, 0, 0.01);
}

.tv-comparison-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	text-align: left;
}

.tv-comparison-table th,
.tv-comparison-table td {
	padding: 22px 24px;
	font-size: 15px;
	line-height: 1.6;
	vertical-align: middle;
	border-bottom: 1px solid #f1f5f9;
	transition: all 0.2s ease;
}

.tv-comparison-table th {
	font-weight: 700;
	font-size: 15px;
	background: #f8fafc;
	border-bottom: 2px solid #e2e8f0;
	color: #334155;
}

/* Features/Labels Column */
.tv-col-feature,
.tv-cell-feature {
	width: 22%;
}

.tv-cell-feature strong {
	color: #0f172a;
	font-weight: 700;
	letter-spacing: -0.2px;
}

/* Highlighted Column: TravelyData eSIM */
.tv-col-esim,
.tv-cell-esim {
	width: 32%;
}

.tv-comparison-table th.tv-highlighted {
	background: #eff6ff; /* Soft Light Blue */
	border-left: 2px solid #3b82f6;
	border-right: 2px solid #3b82f6;
	border-top: 2px solid #3b82f6;
	border-top-left-radius: 14px;
	border-top-right-radius: 14px;
	color: #1d4ed8;
}

.tv-comparison-table td.tv-highlighted {
	background: #fcfdfe;
	border-left: 2px solid #3b82f6;
	border-right: 2px solid #3b82f6;
	font-weight: 600;
	color: #0f172a;
}

/* Make the bottom cell of highlighted column have a bottom border */
.tv-comparison-table tr:last-child td.tv-highlighted {
	border-bottom: 2px solid #3b82f6;
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 14px;
}

/* Standard Columns */
.tv-col-physical,
.tv-cell-physical,
.tv-col-roaming,
.tv-cell-roaming {
	width: 23%;
	color: #475569;
}

/* Hover effects */
.tv-comparison-table tr:hover td {
	background-color: #f8fafc;
}

.tv-comparison-table tr:hover td.tv-highlighted {
	background-color: #f5f9ff;
}


/* --- MOBILE SLIDER CARDS DESIGN --- */
.tv-comparison-cards-slider {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 16px; /* Spacing between cards */
	padding: 15px 0 25px 0; /* Zero left/right padding to allow full edge-to-edge scrolling */
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none; /* Hide standard scrollbar */
	box-sizing: border-box;
}

.tv-comparison-cards-slider::-webkit-scrollbar {
	display: none; /* Hide scrollbar in Chrome/Safari */
}



.tv-comp-card {
	flex: 0 0 88%; /* Card takes 88% of full screen width, providing maximum horizontal space */
	scroll-snap-align: center; /* Snaps the card exactly to the center of the mobile screen */
	background: #ffffff;
	border: 1px solid #e2e8f0;
	border-radius: 18px;
	padding: 28px;
	box-shadow: 0 10px 30px rgba(15, 23, 42, 0.03);
	position: relative;
	box-sizing: border-box;
}

/* Highlighted eSIM Card */
.tv-comp-card.tv-highlighted-card {
	border: 2px solid #3b82f6;
	box-shadow: 0 15px 35px rgba(59, 130, 246, 0.08);
}

.tv-comp-card-badge {
	background: #3b82f6;
	color: #ffffff;
	font-size: 9px;
	font-weight: 700;
	letter-spacing: 1px;
	padding: 4px 10px;
	border-radius: 12px;
	display: inline-block;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.tv-card-title {
	font-size: 19px;
	font-weight: 800;
	color: #0f172a;
	margin: 0 0 18px 0;
	border-bottom: 1px solid #f1f5f9;
	padding-bottom: 12px;
	letter-spacing: -0.3px;
}

.tv-card-features {
	list-style: none;
	padding: 0;
	margin: 0;
}

.tv-card-features li {
	display: flex;
	flex-direction: column;
	padding: 14px 0;
	border-bottom: 1px solid #f8fafc;
}

.tv-card-features li:last-child {
	border-bottom: none;
}

.tv-feature-label {
	font-size: 11px;
	font-weight: 700;
	color: #94a3b8;
	text-transform: uppercase;
	margin-bottom: 6px;
	letter-spacing: 0.5px;
}

.tv-feature-value {
	font-size: 14px;
	color: #334155;
	line-height: 1.5;
}

.tv-comp-card.tv-highlighted-card .tv-feature-value {
	color: #0f172a;
	font-weight: 500;
}

/* Scroll indicator cue */
.tv-mobile-scroll-cue {
	text-align: center;
	padding-top: 10px;
	font-size: 13px;
	color: #94a3b8;
	font-weight: 500;
	animation: pulseIndicator 2.5s infinite;
}

/* --- RESPONSIVE BREAKPOINTS --- */
@media (max-width: 991px) {
	.tv-comp-title {
		font-size: 34px;
	}
	.tv-comparison-table th,
	.tv-comparison-table td {
		padding: 18px 20px;
	}
}

@media (max-width: 767px) {
	html, body {
		overflow-x: hidden !important;
	}
	
	.tv-esim-comparison-section {
		overflow-x: clip;
		padding: 40px 0;
	}

	.tv-comp-title {
		font-size: 28px;
	}
	
	/* Layout Toggle & Breakout */
	.tv-comparison-desktop-only {
		display: none !important;
	}
	
	.tv-comparison-mobile-only {
		display: block !important;
		width: 100vw !important;
		position: relative !important;
		left: 50% !important;
		right: 50% !important;
		margin-left: -50vw !important;
		margin-right: -50vw !important;
		max-width: 100vw !important;
		box-sizing: border-box;
	}

	.tv-comparison-cards-slider {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		gap: 14px;
		padding: 20px 0 30px 0;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		box-sizing: border-box;
		align-items: stretch;
	}
	.tv-comparison-cards-slider::-webkit-scrollbar {
		display: none;
	}
	.tv-comparison-cards-slider::before,
	.tv-comparison-cards-slider::after {
		content: '';
		flex: 0 0 7.5vw;
	}

	.tv-comp-card {
		flex: 0 0 85vw;
		max-width: 360px;
		scroll-snap-align: center;
		scroll-snap-stop: always;
		background: #ffffff;
		border: 1px solid #e2e8f0;
		border-radius: 18px;
		padding: 20px 18px;
		box-shadow: 0 10px 25px rgba(15, 23, 42, 0.04);
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
	}
	.tv-comp-card.tv-highlighted-card {
		border: 2px solid #3b82f6;
		box-shadow: 0 14px 32px rgba(59, 130, 246, 0.12);
	}

	@media (max-width: 360px) {
		.tv-comp-card {
			flex: 0 0 88vw;
			padding: 16px 14px;
		}
		.tv-comparison-cards-slider::before,
		.tv-comparison-cards-slider::after {
			flex: 0 0 6vw;
		}
	}
	
	/* Reset all parent container paddings containing this widget to go full width */
	.elementor-widget-travely_esim_comparison,
	.elementor-widget-travely_esim_comparison .tv-container,
	.elementor-widget-travely_esim_comparison .tv-esim-comparison-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
	}
	
	/* Also target Elementor flex containers wrapping it if any */
	.e-con:has(.elementor-widget-travely_esim_comparison) {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
}

@keyframes pulseIndicator {
	0% { opacity: 0.5; transform: scale(0.98); }
	50% { opacity: 1; transform: scale(1); }
	100% { opacity: 0.5; transform: scale(0.98); }
}