/**
 * Pricing Tabs - Pixel Perfect from Figma
 * Design: https://www.figma.com/design/HdzMP2vjm0tTak3Pdj3ilU/Info--Copy-?node-id=1504-10277
 *
 * @package NexioEducation
 */

/* ============================================
   Section Container
   ============================================ */
.pricing-tabs-section {
	background: #fffefa;
	padding: 64px 142px 120px;
	max-width: 100%;
}

/* ============================================
   Header
   ============================================ */
.pricing-tabs-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 64px;
}

.pricing-tabs-title-group {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pricing-tabs-breadcrumb {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: #064d8e;
	margin: 0;
}

.pricing-tabs-title {
	font-family: 'Apris Trial', serif;
	font-weight: 300;
	font-size: 48px;
	line-height: 58px;
	color: #064d8e;
	margin: 0;
}

/* Header CTA Button */
.pricing-tabs-cta .wp-block-button__link {
	border: 1px solid rgba(6, 77, 142, 0.5);
	color: #064d8e;
	background: transparent;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 16.8px;
	padding: 11.5px 32px;
	border-radius: 33px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0;
}

.pricing-tabs-cta .wp-block-button__link::after {
	content: '';
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5.75 12H18.25M18.25 12L12.25 6M18.25 12L12.25 18' stroke='%23064d8e' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.pricing-tabs-cta .wp-block-button__link:hover {
	background: rgba(6, 77, 142, 0.05);
}

/* ============================================
   Divider
   ============================================ */
.pricing-tabs-divider {
	border: none;
	height: 1px;
	background: linear-gradient(90deg, rgba(6, 77, 142, 0.05) 0%, var(--secondary-blue-50, rgba(6, 77, 142, 0.50)) 33.17%, var(--secondary-blue-50, rgba(6, 77, 142, 0.50)) 66.83%, var(--secondary-blue-25, rgba(6, 77, 142, 0.25)) 100%);
	max-width: 1158px;
	margin: 0 auto 48px;
	-webkit-mask: repeating-linear-gradient(90deg, black 0px 8px, transparent 8px 16px);
	mask: repeating-linear-gradient(90deg, black 0px 8px, transparent 8px 16px);
}

.pricing-faq-divider {
	border: none;
	height: 1px;
	background: linear-gradient(90deg, rgba(6, 77, 142, 0.05) 0%, var(--secondary-blue-50, rgba(6, 77, 142, 0.50)) 33.17%, var(--secondary-blue-50, rgba(6, 77, 142, 0.50)) 66.83%, var(--secondary-blue-25, rgba(6, 77, 142, 0.25)) 100%);
	max-width: 1390px;
	margin: 0 auto;
	-webkit-mask: repeating-linear-gradient(90deg, black 0px 8px, transparent 8px 16px);
	mask: repeating-linear-gradient(90deg, black 0px 8px, transparent 8px 16px);
}

/* ============================================
   Tab Navigation
   ============================================ */
.pricing-tabs-nav {
	display: flex;
	justify-content: center;
	gap: 0;
	margin-bottom: 64px;
	padding-bottom: 0;
}

.pricing-tab-btn {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	color: rgba(6, 77, 142, 0.5);
	margin: 0;
	padding: 18px 32px;
	cursor: pointer;
	position: relative;
	transition: color 0.2s ease, font-weight 0.2s ease;
	white-space: nowrap;
	text-align: center;
}

.pricing-tab-btn:hover {
	color: #064d8e;
}

.pricing-tab-btn.active {
	color: #064d8e;
	font-weight: 700;
}

.pricing-tab-btn.active::after {
	content: '';
	position: absolute;
	bottom: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(6, 77, 142, 0.25);
}

/* ============================================
   Tab Content
   ============================================ */
.pricing-tab-content {
	display: none;
}

.pricing-tab-content.active {
	display: block;
}

/* ============================================
   Section Titles
   ============================================ */
.pricing-section-title {
	font-family: 'Manrope', sans-serif;
	font-weight: 800;
	font-size: 48px;
	line-height: 38px;
	color: #064d8e;
	margin: 0 0 64px;
}

/* ============================================
   A la carte Section (College Counseling)
   ============================================ */
.pricing-section-alacarte {
	margin-bottom: 80px;
}

.pricing-alacarte-card {
	max-width: 344px;
	padding: 24px 0 24px 24px;
	border-left: 1px solid rgba(6, 77, 142, 0.25);
}

/* ============================================
   Packages Grid (College Counseling)
   ============================================ */
.pricing-section-packages {
	margin-bottom: 0;
}

.pricing-packages-grid {
	display: flex;
	gap: 32px;
	align-items: stretch;
}

.pricing-package-card {
	flex: 1;
	max-width: 373px;
	min-width: 280px;
	padding: 24px 0 24px 24px;
	border-left: 1px solid rgba(6, 77, 142, 0.25);
	display: flex;
	flex-direction: column;
}

.pricing-package-name {
	font-family: 'Apris Trial', serif;
	font-weight: 300;
	font-size: 32px;
	line-height: 38px;
	color: #064d8e;
	margin: 0 0 8px;
}

.pricing-package-price {
	font-family: 'Apris Trial', serif;
	font-weight: 300;
	font-size: 64px;
	line-height: normal;
	color: #064d8e;
	margin: 0;
}

.pricing-package-details {
	font-family: 'Apris Trial', serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 32px;
	color: #064d8e;
	margin: 0 0 32px;
	flex-grow: 1;
}

/* ============================================
   Instructor Grid (Tutoring)
   ============================================ */
.pricing-section-instructor {
	margin-bottom: 80px;
}

.pricing-section-instructor:last-child {
	margin-bottom: 0;
}

.pricing-instructor-grid {
	display: flex;
	gap: 32px;
	align-items: stretch;
}

.pricing-instructor-card {
	flex: 1;
	max-width: 373px;
	min-width: 280px;
	padding: 74px 0 24px 24px;
	border-left: 1px solid rgba(6, 77, 142, 0.25);
	display: flex;
	flex-direction: column;
}

.pricing-instructor-card:last-child:not(.pricing-instructor-featured) {
	border-left: none;
	padding-left: 0;
	border-right: 1px solid rgba(6, 77, 142, 0.25);
	padding-right: 24px;
}

.pricing-instructor-featured {
	border: 1.5px solid rgba(6, 77, 142, 0.75);
	border-radius: 12px;
	padding: 74px 24px 24px 24px;
	position: relative;
}

.pricing-instructor-price {
	font-family: 'Apris Trial', serif;
	font-weight: 300;
	font-size: 64px;
	line-height: normal;
	color: #064d8e;
	margin: 0;
}

/* ============================================
   SAT Prep Grid
   ============================================ */
.pricing-sat-grid {
	display: flex;
	justify-content: center;
	gap: 32px;
	align-items: stretch;
}

.pricing-sat-card {
	flex: 1;
	max-width: 408px;
	min-width: 280px;
	padding: 74px 0 24px 24px;
	border-left: 1px solid rgba(6, 77, 142, 0.25);
	display: flex;
	flex-direction: column;
}

.pricing-sat-card:last-child:not(.pricing-sat-featured) {
	border-left: none;
	padding-left: 0;
}

.pricing-sat-featured {
	border: 1.5px solid rgba(6, 77, 142, 0.75);
	border-radius: 12px;
	padding: 74px 24px 24px 24px;
	position: relative;
}

.pricing-sat-name {
	font-family: 'Apris Trial', serif;
	font-weight: 300;
	font-size: 24px;
	line-height: 28px;
	color: #064d8e;
	margin: 0 0 8px;
}

.pricing-sat-price {
	font-family: 'Apris Trial', serif;
	font-weight: 300;
	font-size: 64px;
	line-height: normal;
	color: #064d8e;
	margin: 0;
}

/* ============================================
   Passion Project Grid
   ============================================ */
.pricing-passion-grid {
	display: flex;
	justify-content: center;
	gap: 32px;
	align-items: stretch;
}

.pricing-passion-card {
	flex: 1;
	max-width: 408px;
	min-width: 280px;
	padding: 74px 0 24px 24px;
	border-left: 1px solid rgba(6, 77, 142, 0.25);
	display: flex;
	flex-direction: column;
}

.pricing-passion-card:last-child:not(.pricing-passion-featured) {
	border-left: none;
	padding-left: 0;
}

.pricing-passion-featured {
	border: 1.5px solid rgba(6, 77, 142, 0.75);
	border-radius: 12px;
	padding: 74px 24px 24px 24px;
	position: relative;
}

.pricing-passion-price {
	font-family: 'Apris Trial', serif;
	font-weight: 300;
	font-size: 64px;
	line-height: normal;
	color: #064d8e;
	margin: 0;
}

/* ============================================
   Common Card Elements
   ============================================ */
.pricing-card-subtitle {
	font-family: 'Apris Trial', serif;
	font-weight: 300;
	font-size: 32px;
	line-height: 38px;
	color: #064d8e;
	margin: 0 0 8px;
}

.pricing-card-price {
	font-family: 'Apris Trial', serif;
	font-weight: 300;
	font-size: 64px;
	line-height: normal;
	color: #064d8e;
	margin: 0;
}

.pricing-card-details {
	font-family: 'Apris Trial', serif;
	font-weight: 300;
	font-size: 16px;
	line-height: 32px;
	color: #064d8e;
	margin: 0 0 32px;
	flex-grow: 1;
}

/* Badge */
p.pricing-badge {
	display: inline-block;
	background: #064d8e;
	color: #fffefa;
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 18px;
	padding: 8px 32px;
	margin: 0;
	border-radius: 30px;
	width: fit-content;
	position: absolute;
	top: 24px;
	left: 24px;
}

/* Card CTA Button */
.pricing-card-cta {
	margin-bottom: 48px;
	width: 100%;
}

.pricing-card-cta .wp-block-button {
	width: 100%;
}

.pricing-card-cta .wp-block-button__link {
	border: 1px solid rgba(6, 77, 142, 0.25);
	color: #064d8e;
	background: transparent;
	font-family: 'Manrope', sans-serif;
	font-weight: 700;
	font-size: 14px;
	line-height: 16.8px;
	padding: 8px 24px;
	border-radius: 33px;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0;
	width: 100%;
	justify-content: center;
}

.pricing-card-cta .wp-block-button__link::after {
	content: '';
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.3464 7.50716C12.6186 7.19494 13.0924 7.16249 13.4046 7.43468L17.9929 11.4347C18.1562 11.5771 18.25 11.7833 18.25 12C18.25 12.2168 18.1562 12.4229 17.9929 12.5653L13.4046 16.5653C13.0924 16.8375 12.6186 16.8051 12.3464 16.4929C12.0742 16.1806 12.1067 15.7069 12.4189 15.4347L15.4984 12.75H6.5C6.08579 12.75 5.75 12.4142 5.75 12C5.75 11.5858 6.08579 11.25 6.5 11.25H15.4984L12.4189 8.56534C12.1067 8.29315 12.0742 7.81938 12.3464 7.50716Z' fill='%23FFFEFA'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.pricing-card-cta .wp-block-button__link:hover {
	background: rgba(6, 77, 142, 0.05);
}

/* Features List */
.pricing-card-features {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pricing-feature {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 14px;
	line-height: 136.935%;
	color: #064d8e;
	margin: 0;
	padding-left: 32px;
	position: relative;
}

.pricing-feature::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.02975 3.3437C10.9834 2.88543 13.0166 2.88543 14.9703 3.3437C17.7916 4.00549 19.9945 6.20842 20.6563 9.02975C21.1146 10.9834 21.1146 13.0166 20.6563 14.9703C19.9945 17.7916 17.7916 19.9945 14.9703 20.6563C13.0166 21.1146 10.9834 21.1146 9.02975 20.6563C6.20842 19.9945 4.0055 17.7916 3.3437 14.9703C2.88543 13.0166 2.88543 10.9834 3.3437 9.02974C4.0055 6.20841 6.20842 4.00549 9.02975 3.3437ZM15.0524 10.4773C15.2689 10.2454 15.2563 9.88195 15.0244 9.6655C14.7925 9.44906 14.4291 9.46159 14.2126 9.6935L11.2678 12.8487L9.77358 11.3545C9.54927 11.1302 9.1856 11.1302 8.9613 11.3545C8.73699 11.5788 8.73699 11.9425 8.9613 12.1668L10.8759 14.0814C10.986 14.1915 11.1362 14.2522 11.2919 14.2495C11.4477 14.2468 11.5956 14.181 11.7019 14.0671L15.0524 10.4773Z' fill='%23064D8E'/%3E%3C/svg%3E");
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: center;
}

/* Card Note */
.pricing-card-note {
	font-family: 'Manrope', sans-serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	color: rgba(6, 77, 142, 0.6);
	margin: 24px 0 0;
}

/* ============================================
   Responsive - Tablet
   ============================================ */
@media (max-width: 1200px) {
	.pricing-tabs-section {
		padding: 64px 80px 100px;
	}

	.pricing-tabs-nav {
		gap: 32px;
	}

	.pricing-packages-grid,
	.pricing-instructor-grid {
		flex-wrap: wrap;
	}

	.pricing-package-card {
		flex: 1 1 calc(50% - 16px);
		max-width: calc(50% - 16px);
	}

	.pricing-instructor-card {
		flex: 1 1 calc(50% - 16px);
		max-width: calc(50% - 16px);
	}

	.pricing-sat-card,
	.pricing-passion-card {
		flex: 1 1 calc(50% - 16px);
		max-width: calc(50% - 16px);
	}

	.pricing-sat-grid,
	.pricing-passion-grid {
		flex-wrap: wrap;
	}
}

@media (max-width: 900px) {
	.pricing-tabs-section {
		padding: 48px 40px 80px;
	}

	.pricing-tabs-header {
		gap: 24px;
		margin-bottom: 48px;
	}

	.pricing-tabs-title {
		font-size: 40px;
		line-height: 48px;
	}

	.pricing-tabs-nav {
		flex-wrap: wrap;
		gap: 16px 32px;
	}

	.pricing-section-title {
		font-size: 28px;
		line-height: 34px;
		margin-bottom: 32px;
	}

	.pricing-packages-grid,
	.pricing-instructor-grid,
	.pricing-sat-grid,
	.pricing-passion-grid {
		flex-direction: column;
		gap: 32px;
	}

	.pricing-package-card {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.pricing-instructor-card {
		flex: 1 1 100%;
		max-width: 100%;
	}

	.pricing-sat-card,
	.pricing-passion-card {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* ============================================
   Responsive - Mobile
   ============================================ */
@media (max-width: 768px) {
	.pricing-tabs-section {
		padding: 40px 24px 60px;
	}

	.pricing-tabs-title {
		font-size: 32px;
		line-height: 40px;
	}

	.pricing-tabs-nav {
		gap: 12px 24px;
		margin-bottom: 48px;
	}

	.pricing-tab-btn {
		font-size: 13px;
	}

	.pricing-section-title {
		font-size: 24px;
		line-height: 30px;
	}

	.pricing-card-price,
	.pricing-package-price,
	.pricing-instructor-price,
	.pricing-sat-price,
	.pricing-passion-price {
		font-size: 48px;
	}

	.pricing-section-alacarte,
	.pricing-section-instructor {
		margin-bottom: 60px;
	}
}

@media (max-width: 480px) {
	.pricing-tabs-section {
		padding: 32px 16px 48px;
	}

	.pricing-tabs-nav {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: 40px;
	}

	.pricing-tab-btn {
		padding: 12px 16px;
		font-size: 13px;
		text-align: center;
		white-space: nowrap;
		border: 1px solid rgba(6, 77, 142, 0.2);
		border-radius: 6px;
		flex: 1 1 auto;
	}

	.pricing-tab-btn.active {
		background: #064d8e;
		color: #fffefa;
		font-weight: 700;
		border-color: #064d8e;
	}

	.pricing-tab-btn.active::after {
		display: none;
	}
}