@import "../../../../themes/recast2025/style.css";

.support-plans {
	padding: var(--margins-base-vert, 100px) var(--margins-base-hori, 100px);
	background: var(--neutrals-white, #ffffff);
}

.support-plans__container {
	max-width: var(--global-maxwidth-maxwidth-m, 1200px);
	margin: 0 auto;
}

.support-plans__content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap-base, 56px);
}

/* Left Content */
.support-plans__left {
	display: flex;
	flex-direction: column;
	gap: var(--gap-m, 24px);
}

.support-plans__title {
	margin: 0;
	color: var(--neutrals-black, #161f5b);
	letter-spacing: calc(var(--size-heading-l, 48px) * 0.02);
}

.support-plans__title span {
	color: var(--primary-recast-blue, #0372ff);
}

.support-plans__description {
	color: var(--neutrals-black, #161f5b);
	font-weight: 300;
	line-height: 100%;
}

.support-plans__description p {
	margin: 0 0 var(--gap-s, 16px) 0;
}

.support-plans__description p:last-child {
	margin-bottom: 0;
}

.support-plans__cta a {
	display: inline-block;
}

/* Right Content */
.support-plans__right {
	display: flex;
	flex-direction: column;
}

.support-plans__table-container {
	width: 100%;
}

/* Table Structure */
.support-plans__table {
	width: 100%;
	border: var(--stroke-width, 2px) solid var(--neutrals-grey-1, #e1e9f9);
	overflow: hidden;
}

.support-plans__table-header {
	display: grid;
	align-items: center;
	grid-template-columns: 1fr 1fr 1fr;
	background: var(--primary-royal-blue, #1f289c);
	color: var(--Primary-Recast-Teal, #31d1ff);
}

.support-plans__header-cell {
	padding: var(--margins-s, 20px);
	font-weight: 500;
	text-align: center;
	letter-spacing: calc(var(--size-heading-xs, 20px) * 0.03);
}

.support-plans__header-cell--support-level {
	text-align: left;
	display: flex;
}

/* Mobile Switcher Container - Hidden on Desktop */
.support-plans__mobile-switcher {
	display: none;
}

.support-plans__switch-btn {
	flex: 1;
	color: var(--neutrals-white, #ffffff);
	padding: 7px;
	border: var(--stroke-width, 2px) solid var(--primary-recast-blue, #0372ff);
	border-radius: initial;
	font-weight: 700;
	font-size: var(--size-button-s, 14px);
	cursor: pointer;
	text-align: center;
	line-height: 100%;
}

.support-plans__switch-btn.cta-primary-on-dark,
.support-plans__switch-btn.cta-primary-on-dark.active {
	border: none;
	padding: 9px;
}

.support-plans__switch-btn:hover {
	background-color: var(--primary-royal-blue, #1f289c);
}

.support-plans__table-body {
	display: flex;
	flex-direction: column;
}

.support-plans__table-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	border-bottom: var(--stroke-width, 2px) solid var(--Neutrals-Grey-1, #e1e9f9);
}

.support-plans__table-row:last-child {
	border-bottom: none;
}

.support-plans__cell {
	padding: var(--margins-s, 20px);
	display: flex;
	align-items: center;
}

.support-plans__cell--basic,
.support-plans__cell--premium {
	justify-content: center;
	font-size: 12px;
}

.support-plans__cell-content {
	color: var(--neutrals-black, #161f5b);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 100%;
}

.support-plans__cell-content span {
	font-size: var(--size-body-sub, 14px);
}

.support-plans__cell--support-level .support-plans__cell-content {
	text-align: left;
	align-items: flex-start;
}

.support-plans__icon {
	width: 24px;
	height: 24px;
	display: block;
}

/* Mobile Layout */
@media (max-width: 820px) {
	.support-plans__content {
		grid-template-columns: 1fr;
	}

	.support-plans__header-cell--support-level {
		align-items: center;
		column-gap: calc(var(--margins-s, 20px) * 2);
	}

	.support-plans__support-text {
		white-space: nowrap;
		flex-shrink: 0; /* prevents text from shrinking in flex layouts */
	}

	/* Show mobile switcher inside Support Level header */
	.support-plans__mobile-switcher {
		display: flex;
		width: 100%;
	}

	/* Hide regular column headers on mobile - always hidden regardless of active state */
	.support-plans__header-cell--basic,
	.support-plans__header-cell--premium {
		display: none !important;
	}

	/* Ensure column headers stay hidden on mobile */
	.support-plans__table-container.show-premium .support-plans__header-cell--basic,
	.support-plans__table-container.show-premium .support-plans__header-cell--premium {
		display: none !important;
	}

	/* Adjust table header layout for mobile - Support Level spans full width */
	.support-plans__table-header {
		grid-template-columns: 1fr;
	}

	.support-plans__table-row {
		grid-template-columns: 1fr 1fr;
	}

	/* Hide premium column by default */
	.support-plans__header-cell--premium,
	.support-plans__cell--premium {
		display: none;
	}

	/* Show premium column when premium is active */
	.support-plans__table-container.show-premium .support-plans__header-cell--premium,
	.support-plans__table-container.show-premium .support-plans__cell--premium {
		display: flex;
	}

	/* Hide basic column when premium is active */
	.support-plans__table-container.show-premium .support-plans__header-cell--basic,
	.support-plans__table-container.show-premium .support-plans__cell--basic {
		display: none;
	}
}

@media screen and (max-width: 480px) {
	.support-plans__mobile-switcher .support-plans__switch-btn,
	.support-plans__mobile-switcher .support-plans__switch-btn.active {
		font-size: 12px;
	}

	.support-plans__support-text {
		font-size: 12px;
	}
}