/*!
 * Name    : Visual Portfolio
 * Author  : Visual Portfolio Team <https://www.visualportfolio.com>"
 */

@use "sass:math";
@use "sass:string";
@use "sass:color";

$escaped-svg-characters: (
	("<", "%3c"),
	(">", "%3e"),
	("#", "%23"),
	("(", "%28"),
	(")", "%29"),
) !default;

// Replace `$search` with `$replace` in `$string`
// Used on our SVG icon backgrounds for custom forms.
// -
// @author Hugo Giraudel
// @param {String} $string - Initial string
// @param {String} $search - Substring to replace
// @param {String} $replace ('') - New value
// @return {String} - Updated string
@function str-replace($string, $search, $replace: "") {
	$index: string.index($string, $search);

	@if $index {
		@return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
	}

	@return $string;
}

// See https://codepen.io/kevinweber/pen/dXWoRw
// -
// Requires the use of quotes around data URIs.

@function escape-svg($string) {
	@if string.index($string, "data:image/svg+xml") {
		@each $char, $encoded in $escaped-svg-characters {
			$string: str-replace($string, $char, $encoded);
		}
	}

	@return $string;
}

@import "../../../gutenberg/components/pro-note/style.scss";

#adminmenu .wp-submenu a[href*="https://www.visualportfolio.com/pricing/"],
.wp-list-table.plugins a[href*="https://www.visualportfolio.com/pricing/"],
.vpf-admin-toolbar a[href*="https://www.visualportfolio.com/pricing/"] {
	font-weight: 700;
	color: #11b916;

	.dashicons {
		transition: none;
	}

	&:hover,
	&:focus {
		color: #22e429;
	}
}

/**
 * Plugin Icon
 */
.dashicons-visual-portfolio,
.mce-widget .mce-i-visual-portfolio {
	background-image: url(../../../assets/admin/images/icon.svg);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 18px;
	opacity: 0.6;
}

.mce-widget .mce-i-visual-portfolio {
	background-image: url(../images/icon-mce.svg);
	opacity: 1;
}

.menu-top.current .dashicons-visual-portfolio,
.menu-top:hover .dashicons-visual-portfolio,
.wp-has-current-submenu .dashicons-visual-portfolio {
	opacity: 1;
}

/**
 * Visual Composer Icon
 */
.vc_element-icon[data-is-container="true"].icon-visual-portfolio,
.vc_element-icon.icon-visual-portfolio {
	background-position: 50% 50%;
}

.vc_element-icon.icon-visual-portfolio,
.vc_control-visual-portfolio {
	position: relative;
	overflow: hidden;
	background-image: url(../images/icon-gutenberg.svg);
	background-position: 50% 50%;
	background-size: cover;
	border-radius: 3px;
}

.vc_add-element-container .icon-visual-portfolio {
	position: absolute;
}

.vc_control-visual-portfolio {
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: 0 2px;
	cursor: pointer;
}

.vc_controls-row .vc_control-visual-portfolio {
	float: right;
	margin: 4px;
}

.vc_control-visual-portfolio-overlay {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}

/*
 * Admin Menu.
 * We need to use additional ID `#toplevel...` because when disabled
 * Portfolio Archive in settings, the menu ID changes.
 */
/* stylelint-disable-next-line selector-id-pattern */
#menu-posts-portfolio,
#toplevel_page_visual-portfolio-settings {
	#adminmenu & ul.wp-submenu-wrap li {
		clear: both;
	}

	li:not(:last-child) a[href^="edit-tags.php?taxonomy=portfolio_tag&post_type=portfolio"]::after,
	li:not(:last-child) a[href^="edit.php?post_type=portfolio&page=vpf_proofing_page"]::after,
	li:not(:last-child) a[href^="edit.php?post_type=vp_proofing"]::after {
		display: block;
		float: left;
		width: calc(100% + 26px);
		margin: 13px -15px 8px;
		content: "";
		border-bottom: 1px solid rgba(255, 255, 255, 10%);

		@media screen and (max-width: 782px) {
			width: calc(100% + 30px);
			margin: 20px -20px 8px;
		}
	}
}

/*
 * Admin Toolbar.
 */
.vpf-admin-toolbar {
	background-color: #fff;
	border-bottom: 1px solid #d7dbde;

	@media screen and (max-width: 600px) {
		display: none;
	}

	#wpcontent & {
		padding-left: 20px;
		margin-left: -20px;
	}

	h2 {
		display: inline-block;
		padding: 5px 0;
		margin: 0 10px 0 0;
		font-size: 14px;
		line-height: 2.5714;

		i {
			display: inline-block;
			width: 20px;
			height: 20px;
			margin-top: -5px;
			margin-right: 5px;
			vertical-align: middle;
			filter: invert(1);
			opacity: 1;
		}
	}

	.vpf-admin-toolbar-tab {
		display: inline-block;
		padding: 5px 10px;
		margin: 0 2px;
		font-size: 14px;
		line-height: 2.5714;
		color: inherit;
		text-decoration: none;

		&.is-active {
			padding-bottom: 2px;
			border-bottom: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) solid 3px;
		}

		&:hover,
		&:focus {
			color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
		}

		.dashicons {
			line-height: 2;
		}
	}
}

/**
 * oEmbed preview
 */
.vp-oembed-preview {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	color: #a2a2a2;
	background-color: #f1f1f1;
	border: 1px solid #e8e8e8;

	&::after {
		position: absolute;
		top: 50%;
		left: 50%;
		z-index: 1;
		display: block;
		width: 20px;
		height: 20px;
		margin-top: -10px;
		margin-left: -10px;
		/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
		font-family: dashicons;
		font-size: 20px;
		font-style: normal;
		font-weight: 400;
		line-height: 1;
		text-align: center;
		text-decoration: inherit;
		content: "\f126";
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	> iframe {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
	}
}

/**
 * Form inputs
 */
.vp-input {
	width: 100%;
}

/**
 * Portfolio Post Type
 */
.vp-portfolio__thumbnail {
	position: relative;
	display: block;
	max-width: 70px;
	padding-top: 100%;
	overflow: hidden;
	border-radius: 3px;

	img {
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.vp-portfolio__thumbnail:empty {
	background-color: #f1f1f1;
	border: 1px solid #e8e8e8;

	&,
	&:hover,
	&:active,
	&:focus {
		color: #a2a2a2;
	}

	&::after {
		position: absolute;
		top: 50%;
		left: 50%;
		display: block;
		width: 18px;
		height: 18px;
		margin-top: -9px;
		margin-left: -9px;
		content: "";
		background-image: url("#{escape-svg('data:image/svg+xml,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="0.75" y="0.75" width="18.5" height="18.5" rx="1.25" stroke="#a2a2a2" stroke-width="1.5"/><path d="M1 15.5L6 12L10 14L14.5 10L19 13" stroke="#a2a2a2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')}");
		background-size: cover;
	}
}

.wp-list-table {
	th.column-portfolio_post_thumbs {
		width: 70px;
	}

	th.column-vp_lists_post_icon {
		width: 28px;
	}

	th.column-vp_lists_post_shortcode {
		width: 250px;
	}

	@media screen and (max-width: 782px) {
		/* Hide column on mobile device */
		th.column-portfolio_post_thumbs,
		th.column-vp_lists_post_icon {
			display: none;
		}

		tr:not(.inline-edit-row, .no-items) {
			td.column-portfolio_post_thumbs,
			td.column-vp_lists_post_icon {
				float: left;
				width: 70px !important;
				min-width: 70px;
			}

			td.column-vp_lists_post_icon {
				width: 40px !important;
			}

			td.column-portfolio_post_thumbs::before {
				content: none;
			}

			td.column-title {
				overflow: hidden;
				clear: right;
			}
		}
	}
}

/**
 * Admin Notices
 */
.vpf-admin-notice {
	display: flex;
	padding: 0;
	border: none;
	border-left: 4px solid var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
	box-shadow: 0 0 4px rgba(0, 0, 0, 15%);

	h3 {
		margin-top: 10px;
		margin-bottom: 12px;
		font-size: 16px;

		svg {
			display: inline-block;
			width: 1.3em;
			height: 1.3em;
			margin-right: 0.2em;
			vertical-align: -0.28em;
		}
	}

	.vpf-admin-notice-icon {
		display: flex;
		justify-content: center;
		width: 50px;
		min-width: 50px;
		padding-top: 14px;
		background-color: #f2f8ff;
	}

	.dashicons-visual-portfolio {
		display: block;
		width: 22px;
		height: 22px;
		filter: invert(1);
		background-size: 22px;
		opacity: 1;
	}

	.vpf-admin-notice-content {
		padding: 6px 16px;
	}
}

/**
 * Portfolio List page
 */
.vp-portfolio-list__icon {
	position: relative;
	display: block;
	max-width: 70px;
	padding-top: 100%;
	overflow: hidden;
	color: inherit;
	color: #868686;
	background-color: #f1f1f1;
	border: 1px solid #e8e8e8;
	border-radius: 3px;

	&:hover,
	&:active,
	&:focus {
		color: #5f5f5f;
	}

	svg {
		position: absolute;
		top: 15%;
		left: 15%;
		display: block;
		width: 70%;
		height: 70%;
		object-fit: cover;
	}
}

/**
 * Settings
 */
.portfolio_page_visual-portfolio-settings,
.toplevel_page_visual-portfolio-settings {
	$settings_nav_width: 220px !default;
	$settings_content_height: 340px !default;
	// Align settings controls with modern WP admin (forms / components).
	$vp-settings-control-border: #949494;
	$vp-settings-control-border-focus: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
	$vp-settings-control-radius: 2px;
	$vp-settings-control-height: 40px;
	$vp-settings-control-padding-x: 12px;

	// Navigation.
	@media (min-width: 782px) {
		h2.nav-tab-wrapper {
			position: relative;
			margin-right: -1px;
			border: none;
		}

		.nav-tab-wrapper {
			display: flex;
			flex-direction: column;
			float: left;
			width: $settings_nav_width;

			.nav-tab {
				padding: 10px 15px;
				margin-bottom: -1px;
				margin-left: 0;
				background: none;
				border: 1px solid transparent;
				border-right: none;
				border-left: 2px solid transparent;
			}

			.nav-tab:hover,
			.nav-tab:focus,
			.nav-tab-active {
				background: #fff;
				border-color: #d7dbde;
				border-left-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
			}
		}

		.metabox-holder {
			float: left;
			width: calc(100% - #{$settings_nav_width + 2});
			// Compensate 10px padding + 2px border.
			min-height: $settings_content_height + 22px;
			margin-top: 9px;

			> div,
			> div > form {
				min-height: $settings_content_height;
			}
		}
	}

	.nav-tab-wrapper {
		svg {
			width: 1.2em;
			height: 1.2em;
			margin-right: 0.5em;
			vertical-align: -0.2em;
		}
	}

	// Content with settings.
	.metabox-holder {
		box-sizing: border-box;
		padding: 10px 20px;
		background-color: #fff;
		border: 1px solid #d7dbde;

		form {
			display: flex;
			flex-direction: column;
		}

		// Footer with save button.
		.metabox-holder-footer {
			position: sticky;
			bottom: 0;
			padding: 15px 20px;
			margin-top: auto;
			margin-right: -20px;
			margin-bottom: -10px;
			margin-left: -20px;
			background-color: #f5f5f5;
			border-top: 1px solid #ddd;

			> p {
				padding: 0;
				margin: 0;
			}
		}
	}

	// Controls base layout.
	.form-table {
		tr {
			display: block;
		}

		th {
			display: block;
			width: 100%;
			padding: 0;
			margin-bottom: 10px;
		}

		td {
			display: block;
			padding: 0;
			margin-bottom: 20px;
		}
	}

	.submit {
		margin: 0;
	}

	.description {
		opacity: 0.7;
	}

	// Section Title.
	.vpf-setting-type-section_title {
		&::before {
			display: block;
			padding-top: 15px;
			margin-right: -20px;
			margin-left: -20px;
			content: "";
			border-top: 1px solid #d7dbde;
		}

		label {
			font-size: 15px;
		}

		label:empty {
			display: block;
			margin-top: -20px;
		}

		.description {
			margin-top: -5px;
		}
	}

	// Image control.
	.wpsa-image-remove {
		display: none;
		margin-left: 10px;
	}

	// Notices styles fix.
	.metabox-holder .notice {
		padding: 15px;
	}

	// Pro control.
	.vpf-settings-control-pro {
		> td {
			pointer-events: none;
		}

		.description,
		.vp-toggle-field-slider-round,
		select {
			opacity: 0.3;
		}

		.vpf-settings-control-pro-label {
			position: relative;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 18px;
			height: 18px;
			margin-left: 10px;
			font-family: sans-serif;
			font-size: 11px;
			line-height: 18px;
			color: #fff;
			text-align: center;
			text-decoration: none;
			cursor: pointer;
			background-color: #4c4c4c;
			border-radius: 10px;

			> span {
				position: absolute;
				bottom: 100%;
				z-index: 9990;
				display: none;
				width: 130px;
				padding: 10px;
				margin-bottom: 10px;
				background-color: #000;
				border-radius: 4px;
				box-shadow: 0 1px 7px rgba(#000, 0.3);
			}

			&:hover > span,
			&:focus > span {
				display: block;
			}
		}

		// Hide pro control info from individual settings, which has sections.
		&.breakpoint_xs,
		&.breakpoint_sm,
		&.breakpoint_md,
		&.breakpoint_lg,
		&.breakpoint_xl,
		&.popup_quick_view_show_url_button,
		&.popup_quick_view_internal_links_target,
		&.popup_quick_view_external_links_target,
		&.pages_iframe_custom_css {
			.vpf-settings-control-pro-label {
				display: none;
			}
		}
	}

	/**
     * Toggle Field.
     **/
	.vp-toggle-field {
		position: relative;
		display: inline-block;

		input {
			width: 0;
			height: 0;
			opacity: 0;
		}

		.vp-toggle-field-slider-round {
			position: absolute;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			width: 36px;
			height: 18px;
			cursor: pointer;
			background-color: #ccc;
			border-radius: 34px;
			transition: 0.4s;

			&::before {
				position: absolute;
				bottom: 3px;
				left: 3px;
				width: 12px;
				height: 12px;
				content: "";
				background-color: #fff;
				border-radius: 50%;
				transition: 0.4s;
			}
		}

		input:checked + .vp-toggle-field-slider-round {
			background-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
		}

		input:focus + .vp-toggle-field-slider-round {
			box-shadow: 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
		}

		input:checked + .vp-toggle-field-slider-round::before {
			transform: translateX(18px);
		}

		.description {
			margin-left: 22px;
		}
	}

	/**
     * Range Field.
     **/
	.vp-range-field {
		width: 183px;
		height: 3px;
		vertical-align: middle;
		cursor: pointer;
		background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
		outline: none;
		box-shadow: none;
		appearance: none;

		&::-webkit-slider-thumb {
			width: 20px;
			height: 20px;
			background: #fff;
			border: 1px solid #7e8993;
			border-radius: 20px;
			transition: border-width 0.2s cubic-bezier(0.26, 0.08, 0.15, 1);
			appearance: none;
		}

		&:active::-webkit-slider-thumb {
			border-color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
			box-shadow: 0 0 0 1px var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
		}
	}

	.vp-range-number-field {
		box-sizing: border-box;
		width: 55px;
		min-height: $vp-settings-control-height;
		padding: 4px 8px;
		margin-left: 9px;
		vertical-align: middle;
		font-size: 14px;
		line-height: 1.5;
		color: #1d2327;
		background: #fff;
		border: 1px solid $vp-settings-control-border;
		border-radius: $vp-settings-control-radius;
		box-shadow: none;

		&:focus {
			border-color: $vp-settings-control-border-focus;
			outline: 2px solid transparent;
			box-shadow: 0 0 0 1px $vp-settings-control-border-focus;
		}
	}

	/**
     * Select2 (e.g. Archive Page) — match native admin controls.
     */
	.select2-container {
		max-width: 100%;

		.select2-selection--single {
			box-sizing: border-box;
			width: 350px;
			max-width: 100%;
			height: auto !important;
			min-height: $vp-settings-control-height;
			background-color: #fff;
			border: 1px solid $vp-settings-control-border;
			border-radius: $vp-settings-control-radius;
		}

		.select2-selection--single .select2-selection__rendered {
			padding-right: 36px;
			padding-left: $vp-settings-control-padding-x;
			font-size: 14px;
			line-height: calc(#{$vp-settings-control-height} - 2px);
			color: #1d2327;
		}

		.select2-selection--single .select2-selection__arrow {
			top: 0;
			right: 2px;
			width: 28px;
			height: 100%;
			min-height: calc(#{$vp-settings-control-height} - 2px);
		}

		&.select2-container--focus .select2-selection--single,
		&.select2-container--open .select2-selection--single {
			border-color: $vp-settings-control-border-focus;
			box-shadow: 0 0 0 1px $vp-settings-control-border-focus;
		}
	}

	.select2-dropdown {
		border-color: $vp-settings-control-border;
		border-radius: $vp-settings-control-radius;
	}

	.select2-search__field {
		min-height: 34px;
		line-height: 1.4;
	}

	.select2-container--default .select2-results__option--highlighted[aria-selected] {
		background-color: $vp-settings-control-border-focus;
	}
}

/**
 * PRO Notices.
 */
.portfolio_page_visual-portfolio-settings,
.toplevel_page_visual-portfolio-settings,
.portfolio_page_vpf_proofing_page {
	// Settings info Pro.
	.social_pro_info > th {
		display: none;
	}
}

/* stylelint-disable selector-id-pattern */
#vp_social_integrations,
#vp_watermarks,
#vp_white_label {
	.metabox-holder-footer {
		display: none;
	}
}

/**
 * Welcome Screen.
 */
.portfolio_page_visual-portfolio-welcome,
.toplevel_page_visual-portfolio-welcome {
	background-color: #fff;
}

.vpf-welcome-screen {
	box-sizing: border-box;
	padding-right: 20px;
	padding-left: 20px;
	margin-left: -20px;
	font-size: 16px;
	line-height: 1.6;
	color: #1d2327;
	background: #fff;

	*,
	*::before,
	*::after {
		box-sizing: inherit;
	}

	@media screen and (max-width: 782px) {
		margin-left: -10px;
	}

	p {
		font-size: inherit;
		line-height: 1.6;
		margin-top: 0;
	}

	h2 {
		margin-top: 0;
		font-size: 2em;
		font-weight: 600;
		line-height: 1.2;
		text-align: center;
	}

	.vpf-welcome-head {
		position: relative;
		margin-bottom: 60px;
		background: #f6f7f7;
		border-radius: 28px;
		margin-top: 20px;

		.vpf-welcome-head-inner {
			position: relative;
			max-width: 840px;
			padding: 60px 10px;
			margin: 0 auto;
			text-align: center;
		}

		.vpf-welcome-head-label {
			display: inline-flex;
			align-items: center;
			width: fit-content;
			font-size: 11px;
			font-weight: 600;
			letter-spacing: .04em;
			margin-bottom: 18px;
			padding: 4px 14px;
			color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
			text-transform: uppercase;
			background: color-mix(
				in srgb,
				var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 10%,
				transparent
			);
			border-radius: 999px;
		}

		.vpf-welcome-head-title {
			margin: 0 0 18px;
			font-size: 3em;
			line-height: 1.02;
			color: #0f172a;
			text-align: center;
			text-wrap: balance;

			@media screen and (max-width: 600px) {
				font-size: 2.15em;
			}
		}

		.vpf-welcome-subtitle {
			color: #475467;
			font-weight: 400;
			line-height: 1.5;
			margin: 0 auto;
			max-width: 680px;
			text-align: center;
			text-wrap: balance;
		}
	}

	.vpf-welcome-content {
		max-width: 1180px;
		margin: 0 auto;

		h2 {
			margin-bottom: 12px;
		}

		.vpf-welcome-foot-description {
			margin: 0 auto;
			text-wrap: balance;
			text-align: center;
			max-width: 680px;
			margin-bottom: 40px;
			color: #475467;
		}

		.vpf-welcome-content-features {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			grid-gap: 22px;
			list-style: none;
			padding: 0;
			margin: 0;

			@media screen and (max-width: 1080px) {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}

			@media screen and (max-width: 700px) {
				grid-template-columns: 1fr;
			}

			li {
				position: relative;
				min-height: 100%;
				padding: 26px;
				background: #fff;
				border: 1px solid #ececec;
				border-radius: 20px;

				> span {
					display: inline-flex;
					align-items: center;
					justify-content: center;
					width: 42px;
					height: 42px;
					margin-bottom: 18px;
					font-size: 13px;
					font-weight: 700;
					line-height: 1;
					color: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
					background: color-mix(
						in srgb,
						var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9)) 14%,
						transparent
					);
					border-radius: 12px;
				}

				> strong {
					display: block;
					margin-bottom: 10px;
					font-size: 1.35em;
					font-weight: 600;
					line-height: 1.25;
					color: #0f172a;
				}

				p:last-child {
					margin-bottom: 0;
					color: #475467;
				}
			}
		}
	}

	.vpf-welcome-content-buttons {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 12px;
		margin-top: 28px;

		a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			font-size: 13px;
			font-weight: 600;
			letter-spacing: .02em;
			padding: 9px 20px;
			color: #fff;
			text-decoration: none;
			border-radius: 12px;
			transition: background-color 0.15s ease, transform 0.15s ease;

			&:hover,
			&:focus {
				transform: translateY(-1px);
			}

			&.is-primary {
				background: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));

				&:hover,
				&:focus {
					background: var(--wp-admin-theme-color-darker-10, var(--wp-admin-theme-color-darker-20, var(--wp-admin-theme-color, #3858e9)));
				}
			}

			&.is-secondary {
				color: #344054;
				background: #fff;
				border: 1px solid #d0d5dd;

				&:hover,
				&:focus {
					background: #f8fafc;
				}
			}
		}
	}

	.vpf-welcome-foot-pro-info {
		max-width: 1180px;
		padding: 32px;
		margin: 56px auto 72px;
		border: 1px solid #e4e7ec;
		border-radius: 24px;
		box-shadow: 0 18px 46px rgba(#101828, 0.08);

		@media screen and (max-width: 600px) {
			padding: 24px;
			margin-bottom: 40px;
		}

		h2 {
			margin-bottom: 12px;
			color: #0f172a;
			text-align: center;
		}

		.vpf-welcome-foot-description {
			margin: 0 auto;
			text-wrap: balance;
			text-align: center;
			max-width: 680px;
			margin-bottom: 40px;
			color: #475467;
		}

		ul {
			display: grid;
			grid-template-columns: repeat(3, minmax(0, 1fr));
			gap: 14px 28px;
			max-width: none;
			padding: 0;
			margin: 0;
			list-style: none;

			@media screen and (max-width: 1000px) {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			}

			@media screen and (max-width: 600px) {
				grid-template-columns: 1fr;
			}

			> li::before {
				display: inline-block;
				width: 20px;
				height: 20px;
				margin-right: 10px;
				vertical-align: -0.3em;
				content: "";
				background-image: url("#{escape-svg('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="#1e9059"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" /></svg>')}");
			}

			strong {
				font-size: 15px;
				font-weight: 600;
				line-height: 1.35;
				color: #0f172a;
			}

			p {
				margin: 5px 0 0;
				color: #667085;
				font-size: 14px;
				line-height: 1.55;
				margin-left: 35px;
			}
		}

		> a {
			display: block;
			padding: 16px;
			margin-top: 40px;
			font-size: 16px;
			font-weight: 600;
			color: #fff;
			text-align: center;
			text-decoration: none;
			background-color: #1e9059;
			border-radius: 14px;

			&:hover,
			&:focus {
				background-color: #0f7544;
			}
		}
	}
}