.modiono-billing-toggle-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0 auto 28px;
	padding: 10px 18px;
	width: fit-content;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 40px;
}

.modiono-toggle-label {
	font-size: 15px;
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.5px;
	color: rgba(255, 255, 255, 0.45);
	transition: color 0.2s ease;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 8px;
	user-select: none;
}

.modiono-toggle-label.is-active {
	color: #ffffff;
}

.modiono-toggle-badge {
	font-size: 11px;
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.5px;
	background: rgba(29, 245, 164, 0.12);
	color: #1DF5A4;
	border: 1px solid rgba(29, 245, 164, 0.4);
	border-radius: 20px;
	padding: 2px 8px;
	font-weight: 500;
	line-height: 1.4;
}

.modiono-toggle-switch {
	position: relative !important;
	width: 46px !important;
	height: 26px !important;
	border-radius: 20px !important;
	border: none !important;
	background: #1DF5A4 !important;
	box-shadow: 0 0 10px rgba(29, 245, 164, 0.45) !important;
	cursor: pointer !important;
	padding: 0 !important;
	flex-shrink: 0 !important;
	transition: box-shadow 0.2s ease !important;
}

.modiono-toggle-switch:focus-visible {
	outline: 2px solid #5B8FFF;
	outline-offset: 2px;
}

.modiono-toggle-knob {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
	transition: transform 0.2s ease;
}

.modiono-toggle-switch[aria-checked="true"] .modiono-toggle-knob {
	transform: translateX(20px);
}

/*
 * Plan button visibility.
 * Add the class "modiono-monthly-btn" to the Monthly plan button widget
 * and "modiono-yearly-btn" to the Yearly plan button widget in Elementor
 * (Advanced tab > CSS Classes).
 */
.modiono-yearly-btn {
	display: none;
}

.modiono-monthly-btn,
.modiono-yearly-btn {
	transition: opacity 0.15s ease;
}

/* When the scope (or the whole page, if no scope wrapper is used) is toggled to yearly */
.modiono-pricing-scope.modiono-show-yearly .modiono-monthly-btn,
html.modiono-show-yearly .modiono-monthly-btn {
	display: none;
}

.modiono-pricing-scope.modiono-show-yearly .modiono-yearly-btn,
html.modiono-show-yearly .modiono-yearly-btn {
	display: inline-flex;
}