/* Billing Tabs */
.billing-tabs {
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 0 auto 20px;
	width: fit-content;
	padding: 8px;
	gap: 10px;
	border: 2px solid #c4c4c4;
	border-radius: 100px;
	/* 	background: linear-gradient(90deg, #fff 0%, rgba(93, 214, 148, 0.2) 50%); */
	background: #fff;

}
.billing-tab {
	cursor: pointer;
	border: none;
	color: #000;
	font-size: 16px;
	font-weight: 400;
	min-width: 210px;
	padding: 20px 40px;
	border-radius: 100px;
	transition: 0.3s;
	border: 1px solid #0000002e;
}


.billing-tab:hover,
.billing-tab.active {
	background: #188a4c;
	color: #fff;
}

.selectBusinessText {
	text-align: center;
	margin: 50px 0;
}

/* Business Sizes */
.business-sizes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 40px 0 60px;
}

.business-sizes-icon { margin-bottom: 10px; }

.business-sizes-title {
	font-family: "Archia", Sans-serif;
	font-size: 18px;
	line-height: 26px;
	font-weight: 600;
	text-transform: uppercase;
	color: #188a4c;
	margin: 10px 0 5px;
}

.business-sizes-text { color: #000; }

.size-btn {
	flex: 1;
	cursor: pointer;
	padding: 30px 20px;
	border: 2px solid #fff;
	border-radius: 30px;
	background: #fff linear-gradient(180deg, #188a4c1a 0%, transparent 100%);
	transition: 0.3s;
}
.size-btn:hover,
.size-btn.active {
	background: linear-gradient(180deg, #144830 0%, #082016 100%);
}
.size-btn:hover .business-sizes-title,
.size-btn.active .business-sizes-title { color: #3ce17d; }
.size-btn:hover .business-sizes-text,
.size-btn.active .business-sizes-text { color: #fff; }

.size-btn:hover .business-sizes-icon, 
.size-btn.active .business-sizes-icon, 
.size-btn.active .tooltipIcon, 
.size-btn:hover .tooltipIcon{
	filter: brightness(1000) invert(0);
}

/* Tooltip */

.tooltipIcon { width: 15px; }


/* wrapper can be used for both patterns */
.tool_tip,
.featureTool_tip {
	position: relative;
	display: inline-block;
	cursor: pointer;
}

/* the actual tooltip boxes (both variants) */
.tool_tip .tooltiptext,
.featureTool_tip .featureToolTipText {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);           /* place above the trigger */
	transform: translateX(-50%) translateY(6px); /* start slightly moved for smooth entry */
	visibility: hidden;
	opacity: 0;
	pointer-events: none;               /* avoid accidental mouse capture until visible */
	transition: opacity .18s ease, transform .18s ease;
	z-index: 9999;
	width: 220px;
	max-width: calc(100vw - 40px);
	white-space: normal;
	word-break: break-word;
	background: #333;
	color: #fff;
	text-align: center;
	padding: 6px 10px;
	border-radius: 6px;
	font-size: 10px;
	line-height: 15px;
	margin: 0;
}

/* arrow */
.tool_tip .tooltiptext::after,
.featureTool_tip .featureToolTipText::after,
.addonTooltip .addonTooltipText::after{
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border-width: 6px;
	border-style: solid;
	border-color: #333 transparent transparent transparent;
}

.addonTooltip .tooltipIcon{
	margin-top: 5px;
}
.tool_tip:hover .tooltiptext,
.featureTool_tip:hover .featureToolTipText,
.tooltipIcon:hover + .featureTool_tip .featureToolTipText,
.tooltipIcon:hover + .tool_tip .tooltiptext,
.tooltipIcon:hover ~ .featureTool_tip .featureToolTipText,
.tooltipIcon:hover ~ .tool_tip .tooltiptext {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;               /* allow hovering the tooltip itself */
	transform: translateX(-50%) translateY(0);
}

/* extra fallback in case the icon is inside the same wrapper and the tooltip is a sibling */
.tool_tip .tooltipIcon:hover + .tooltiptext,
.featureTool_tip .tooltipIcon:hover + .featureToolTipText {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}


/* Plans */
.planFreeAccessText { text-align: center; margin-bottom: 50px; }

.plans,
.plans-addons-wrapper {
	display: flex;
	gap: 20px;
	flex: 1;
}
.plans-addons-wrapper {
	margin-top: 50px;
	padding: 25px 20px;
	border-radius: 35px;
	background: linear-gradient(90deg, #fff 0%, rgba(60,225,125,0.2) 40%);
}
.plan-card.active {
	border: 2px solid #188a4c;
}
.plan-card,
.plans-addons-col {
	flex: 1;
	text-align: center;
	border: 2px solid #B6ECCD;
	border-radius: 24px;
	background: linear-gradient(0deg, #fff 0%, rgba(93,214,148,0.2) 100%);
}
.plans-addons-col { flex: 0.5; padding: 20px; }

.plan_Details { padding: 20px; }
.plan-icon { margin-bottom: 20px; }

.plan-title {
	background: #188a4c33;
	border: 1px solid #188a4c;
	color: #188a4c;
	padding: 10px 30px;
	margin: 0 auto 20px;
	width: fit-content;
	border-radius: 100px;
	font-size: 20px;
}

.plan-features li {
	padding: 15px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
}
.plan-features li:nth-child(odd) { background: #fbfffd; }
.plan-features li span { margin-left: 20px; font-size: 14px; line-height: 20px; text-align: left; }
.plan-features li .tooltipIcon { margin-top: 8px; }

li.included > span::before,
li.not-included > span::before {
	content: "";
	position: absolute;
	left: 15px;
	top: 22px;
	width: 15px;
	height: 15px;
}
li.included > span::before { content: url('/wp-content/uploads/2025/10/plus-green.svg'); }
li.not-included > span::before { content: url('/wp-content/uploads/2025/10/minus-red.svg'); }

.price {
	margin: 10px 0;
	font-family: "Archia", Sans-serif;
	font-size: 30px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 40px;
	color: #0a0a0e;
}

.plan-card ul { list-style: none; padding: 0; }
.plan-card ul li { margin: 5px 0; position: relative;}

.select-plan,
.subscribe-btn {
	cursor: pointer;
	background: #188a4c;
	color: #fff;
	border: none;
	padding: 16px 40px;
	font-size: 16px;
	border-radius: 12px;
	transition: all 0.3s ease;
}
.select-plan { margin: 10px 0 30px; min-width: 170px; }
.select-plan:hover,
.plan-card.active .select-plan,
.subscribe-btn:hover { background: #0a0a0e; }


/* Addons */
.selectPackageText {
	padding: 15px;
	color: #000;
	margin-top: 10px;
	background: rgba(255, 255, 255, 0.5);
}

.addons { margin-top: 20px; border-radius: 8px; }
.addons-list { padding: 0; }
.addons-list li {
	list-style: none;
	padding: 20px;
	margin-bottom: 15px;
}
.addons-list li:has(input:checked) { border-color: #188a4c; }

.addon-item {
	display: flex;
	align-items: flex-start;
	text-align: left;
}
.addon-item label { width: 100%; cursor: pointer;}
.addon-header {
	display: flex;
	justify-content: space-between;
	gap: 20px;
}
.addon-item input[type="checkbox"] {
	cursor: pointer;
	width: 15px;
	height: 15px;
	margin: 3px 10px 0 0;
	accent-color: #188a4c;
}
.addon-price {
	margin-top: 20px;
	font-weight: bold;
	font-size: 16px;
	text-align: left;
}
.addon-tooltip { width: 10%; text-align: right; }
.addon-name { width: 90%; font-size: 14px; line-height: 18px; }
/* Addon Tooltip */
.addonTooltip {
	position: relative;
	display: inline-block;
	margin-left: 6px;
	cursor: pointer;
	vertical-align: middle;
	height: fit-content;
}

.addonTooltipText {
	visibility: hidden;
	opacity: 0;
	width: 220px;
	background-color: #333;
	color: #fff;
	text-align: left;
	border-radius: 6px;
	padding: 8px 10px;
	position: absolute;
	z-index: 99;
	bottom: 120%;
	left: 50%;
	transform: translateX(-50%);
	transition: opacity 0.3s ease;
	font-size: 10px;
	text-align: center;
	line-height: 15px;
}

.addonTooltip:hover .addonTooltipText {
	visibility: visible;
	opacity: 1;
}

/* Summary */
.summary-title {
	font-family: "Archia", Sans-serif;
	font-size: 18px;
	line-height: 26px;
	font-weight: 600;
	text-transform: uppercase;
	color: #0a0a0e;
	margin: 20px 0;
}
.selected-plan,
.summaryTotalPrice p,
.summarySelectedPlanDetails p {
	display: flex;
	justify-content: space-between;
	text-align: left;
	gap: 30px;
}
.summarySelectedPlanDetails { padding: 20px 0; }
.summarySelectedPlanDetails p { margin-bottom: 15px !important; }

.addonsSummary { display: none; }
.summaryTotalPrice {
	border-top: 1px solid #188a4c;
	padding: 20px 0;
}
.summary .total-price,
.addonPrice,
.summarySelectedPlanPrice {
	font-weight: bold;
	font-size: 18px;
}
.summarySelectedPlanDetails span,
.summaryTotalPrice span { font-size: 16px; }
.addon-summary { margin-bottom: 0 !important; }




@media (max-width: 1024px){
	button.size-btn {
		max-width: 300px;
	}
	.business-sizes{
		justify-content: center;
	}
	.addons-list li{
		padding: 0px;
	}
	.featureTool_tip{
		height: 30px;
		width: 30px;
		object-fit: contain;
		display: flex;
		align-items: flex-start;
		justify-content: end;
	}
	.plan-features li .tooltipIcon{
		margin-top: 0px;
	}
}

@media (max-width: 767px){
	/* 	.billing-tabs{
	flex-wrap: wrap;
	width: 70% !important;
	border-radius: 40px;
} */
	.billing-tab {
		font-size: 14px;
		min-width: 70px;
		padding: 15px 30px;
	}

	.business-sizes{
		flex-direction: column;
		gap: 20px;
	}
	.size-btn {
		max-width: 100% !important;  
	}
	.plans-addons-wrapper,
	.plans{
		flex-direction: column;
	}
	.featureTool_tip{
		align-items: center;
	}
	.tool_tip .tooltiptext,
	.featureTool_tip .featureToolTipText{
		width: 150px;
	}
	.addonTooltipText{
		width: unset;
	}
}