
body:not(.inspiro_page_inspiro-demo) #wpcontent {
	padding-left: 0;
}

.inspiro-starter-sites {
	max-width: none;

	h2 {
		text-align: inherit;
		font-size: 32px;
		font-weight: 500;
		margin-bottom: 20px;
	}

	h2:first-child,
	h3:first-child {
		margin-top: 0;
	}

	hr {
		margin: 30px 0;
	}

	.notice,
	.update-nag,
	#update-nag {
		display: block !important;
		margin: 0 0 30px 0;
	}

	&-notices-wrapper {
		display: none;

		.notice,
		.update-nag,
		#update-nag {
			margin: 0 0 15px 0;

			&:last-child {
				margin-bottom: 30px;
			}
		}
	}

	&__admin-notices {
		.inspiro-starter-sites-notices-wrapper {
			display: block;
		}
	}

	&-button-disabled {
		opacity: 0.6 !important;
		cursor: not-allowed !important;
	}

	&-content-notice {
		padding: 25px;
		background: #E5F5FA;
		border-radius: 6px;
		margin: 30px;

		p {
			font-size: 14px;
			color: #444444;
			margin: 0 0 10px 0;

			&:last-child {
				margin-bottom: 0;
			}
		}

		&--warning {
			background: #FFF8E5;
			margin-top: 0;

			p {
				font-size: 16px;
			}
		}
	}

	&-importing,
	&-imported,
	&-deleting,
	&-deleted {
		display: none;
		text-align: center;
		padding: 30px;

		p {
			font-size: 16px;
			color: #444444;
			margin: 0 0 10px 0;

			&:last-child {
				margin-bottom: 0;
			}
		}

		&-header {
			h2 {
				font-size: 24px;
				margin-bottom: 10px;
			}

			p {
				margin-bottom: 5px;

				&:last-child {
					margin-bottom: 0;
				}
			}
		}

		&-content {
			margin: 0 20px;

			&-importing,
			&-deleting {
				width: 415px;
				height: 228px;
				margin: 50px 0 20px 0;
			}

			&-imported,
			&-deleted {
				margin: 80px 0 50px 0;

				&--success {
					width: 156px;
					height: 124px;
				}

				&--error,
				&--warning {
					width: 124px;
					height: 124px;
				}
			}

			.notice {
				text-align: left;
				margin: 30px 0;

				p {
					padding: 15px 3px;
					font-size: 14px;
					color: #777777;
				}
			}
		}

		&-footer {
			display: flex;
			justify-content: center;
			align-items: center;
			flex-wrap: wrap;
			min-height: 100px;
			background-color: #F8F8F8;
			border-top: 1px solid #dddddd;
			margin: 30px -30px -30px;

			a.button {
				flex: 0 1 25%;
				margin-right: 30px;

				&:last-child {
					margin-right: 0;
				}
			}
		}
	}

	.button.button-hero {
		font-size: 16px;
		font-weight: 500;
		min-height: 40px;
		padding: 9px 18px;

		&.inspiro-starter-sites__button.button-primary:disabled,
		&.inspiro-starter-sites__button.button-primary[disabled] {
			color: #ffffff !important;
			background: #999999 !important;
			border-color: #999999 !important;
			opacity: 0.5;
		}
	}

	// Redux.
	&__redux-option-name {
		&-input {
			margin-left: 10px;
			width: 137px;
			border-radius: 3px !important;
			padding: 0 10px !important;
			font-size: 13px !important;
			line-height: 16px !important;
		}
	}

	&-hide-input {
		width: 0.1px !important;
		height: 0.1px !important;
		opacity: 0 !important;
		overflow: hidden !important;
		position: absolute !important;
		z-index: -1 !important;
	}

	&-demo-filter {
		display: flex;
		flex-wrap: wrap;
		gap: 12px;
		margin: 18px 0 18px;

		&-btn {
			appearance: none;
			background: #ffffff;
			border: 1.5px solid #e5e7eb;
			border-radius: 999px;
			color: #1d1d1f;
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			font-size: 14px;
			font-weight: 600;
			line-height: 1;
			padding: 10px 20px;
			transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;

			&:hover {
				border-color: #1d1d1f;
			}

			&:focus {
				outline: 2px solid rgba(34, 113, 177, 0.4);
				outline-offset: 2px;
			}

			&__icon {
				display: inline-flex;
				width: 18px;
				height: 18px;

				svg {
					width: 100%;
					height: 100%;
					display: block;
				}
			}

			&--elementor {
				color: #B6224C;
			}

			&.is-active {
				background: #1d1d1f;
				border-color: #1d1d1f;
				color: #ffffff;

				.inspiro-starter-sites-demo-filter-btn__icon svg [stroke="#1d1d1f"] {
					stroke: #ffffff;
				}
			}
		}
	}

	&-demo-categories {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
		gap: 0 32px;
		list-style: none;
		margin: 0 0 28px;
		padding: 0;

		li {
			margin: 0 0 10px;
			padding: 0;

			&.is-cat-hidden {
				display: none;
			}
		}
	}

	&-demo-category {
		appearance: none;
		background: transparent;
		border: 0;
		color: #6b7280;
		cursor: pointer;
		display: block;
		width: 100%;
		text-align: left;
		font-size: 14px;
		font-weight: 400;
		line-height: 1.4;
		padding: 4px 0;
		transition: color 0.15s ease, opacity 250ms ease;

		&:hover,
		&:focus {
			color: #1d1d1f;
			outline: none;
		}

		&.is-active {
			color: #1d1d1f;
			font-weight: 700;
		}

		&__count {
			color: inherit;
			margin-left: 4px;
			opacity: 0.85;

			&::before {
				content: " • ";
				display: inline;
				opacity: 0.6;
				margin-right: 2px;
			}
		}
	}

	&-demo-availability {
		display: flex;
		align-items: center !important;
		gap: 10px;
		margin: 6px 0 16px;
		color: #6b7280;
		font-size: 14px;
		line-height: 1;

		&__label {
			font-weight: 400;
		}

		&__icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			flex: 0 0 28px;
			width: 28px;
			height: 28px;

			svg {
				display: block;
				width: 100%;
				height: 100%;
                margin-left: 2px !important;
			}

			// Block Editor: the glyph uses currentColor, so render it white
			// on a dark circular background to match the design.
			&--blocks {
				padding: 6px;
				box-sizing: border-box;
				border-radius: 50%;
				background: #1d1d1f;
				color: #ffffff;
			}

			// Elementor: the SVG already includes its own circular background.
			&--elementor {
				border-radius: 50%;
				overflow: hidden;
			}

			// WooCommerce: a horizontal wordmark, not a circular glyph.
			&--woocommerce {
				width: auto;
				height: 16px;

				svg {
					width: auto;
				}
			}
		}
	}

	// Segmented Block Editor / Elementor toggle on grouped demo cards.
	&-demo-variants {
		display: inline-flex;
		gap: 4px;
		margin: 6px 0 14px;
		padding: 4px;
		background: #f1f2f4;
		border-radius: 999px;
	}

	&-demo-variant-btn {
		appearance: none;
		border: 0;
		cursor: pointer;
		display: inline-flex;
		align-items: center;
		gap: 7px;
		padding: 6px 14px;
		border-radius: 999px;
		background: transparent;
		color: #6b7280;
		font-size: 13px;
		font-weight: 500;
		line-height: 1;
		transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;

		&__icon {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 18px;
			height: 18px;

			svg {
				display: block;
				width: 100%;
				height: 100%;
			}
		}

		&:hover {
			color: #1d1d1f;
		}

		&:focus-visible {
			outline: 2px solid rgba(34, 113, 177, 0.4);
			outline-offset: 2px;
		}

		&.is-active {
			background: #ffffff;
			color: #1d1d1f;
			box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
		}

		// Keep the Elementor brand colour on its glyph when active.
		&--elementor.is-active {
			color: #b6224c;
		}
	}

	.wpz-onboard_content-main-step.step-choose-design {

        form ul li figure .preview-thumbnail {
            padding-top: 118.5% !important;
        }


		// Demo name + badges row inside the card caption.
		.inspiro-starter-sites-demo-name {
			display: flex;
			align-items: center;
			gap: 8px;
			flex-wrap: wrap;

			h5 {
				margin: 0;
			}
		}

		.inspiro-starter-sites-demo-badges {
			display: inline-flex;
			align-items: center;
			gap: 6px;
            margin-bottom: 20px;
		}

		.inspiro-starter-sites-demo-badge {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 5px 10px;
			border-radius: 999px;
			font-size: 10px;
			font-weight: 700;
			letter-spacing: 0.08em;
			line-height: 1;
			text-transform: uppercase;

			&-free {
				color: #0a5c36;
				background: #e3f6ec;
			}

			&-premium {
				color: #7a4b00;
				background: #fdf0cd;
                margin-bottom: 20px;
			}

			&-new {
				color: #434f69;
				background: #e9f2fb;
			}
		}

		> form > ul > li[data-type] {
			transition: opacity 320ms cubic-bezier(0.4, 0, 0.2, 1), transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
			transform-origin: center top;
			will-change: opacity, transform;

			&.is-filtering-out {
				opacity: 0;
				transform: scale(0.92) translateY(8px);
				pointer-events: none;
			}

			&.is-filtering-in {
				opacity: 0;
				transform: scale(0.96) translateY(6px);
			}
		}
	}
}

.feature-section + hr {
	margin-top: 0;
}

#wpbody select {
	height: auto;
	padding: .62em;
	line-height: inherit;
}

.inspiro-starter-sites {

	&__title-container {
		height: 30px;
		background-color: #ffffff;
		padding: 20px 30px;
		box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.07);
		display: flex;
		align-items: center;
		justify-content: space-between;

		&-title {
			margin: 0;
			font-size: 24px;
			font-weight: 700;
		}

		&-icon {
			width: 19px;
			height: 19px;
		}
	}

	&__content-container {

		&-content {
			display: flex;

			&--main {
				flex: 1;
				margin-right: 0;
				background: #ffffff;
				box-sizing: border-box;
                border-radius: 4px;
				border: 1px solid #dddddd;
				box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.07);
			}

			&--side {
				width: 373px;

				.inspiro-starter-sites__card-content {
					padding: 0;
				}

				.screenshot {
					&.blank {
						height: 278px;
						border: 1px solid #CCD0D4;
						filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.07));
						background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
					}
				}

				.inspiro-starter-sites__card-footer {
					padding: 15px;

					h3 {
						font-size: 16px;
						font-weight: 500;
						margin: 0;
					}
				}

				img {
					width: 100%;
					display: block;
				}
			}

			.inspiro-starter-sites-install-plugins-content-header,
			.inspiro-starter-sites-delete-imported-content-header {
				padding: 30px;
				border-bottom: 1px solid #dddddd;

				h2 {
					font-size: 22px;
					margin: 0 0 6px 0;
				}

				p {
					margin: 8px 0 10px 0;

					&:last-child {
						margin: 12px 0 0;
					}
				}

				.notice {
					margin: 30px 0 0;

					p {
						margin: .5em 0;
						font-size: 13px;
						line-height: 1.5;
						color: #3c434a;
						font-weight: normal;
					}
				}
			}

			.inspiro-starter-sites-install-theme-content,
			.inspiro-starter-sites-install-plugins-content-content,
			.inspiro-starter-sites-delete-imported-content {

                .theme-item {
                    border-bottom: 1px solid #eeeeee;
                }
				.theme-item,
				.plugin-item,
				.content-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin: 0 30px;
					padding: 20px 0 15px;
					border-top: 1px solid #eeeeee;

					.inspiro-starter-sites-loading {
						display: none;
					}

					&--active {
						cursor: default;
						
						.theme-item-checkbox,
						.plugin-item-checkbox,
						.content-item-checkbox {

							input[type=checkbox]:checked + .checkbox {
								border: none;
								background: #22BB66;

								.inspiro-starter-sites-check-icon {
									display: inline-block;
								}

								&::after {
									display: none !important;
								}
							}
						}
					}

					&--required {
						cursor: default;
					}

					&--loading {
						.inspiro-starter-sites-loading {
							display: block;
						}

						.theme-item-checkbox,
						.plugin-item-checkbox,
						.content-item-checkbox {

							input[type=checkbox] + .checkbox {
								border: none !important;

								.inspiro-starter-sites-lock-icon {
									display: none !important;
								}

								&::after {
									display: none !important;
								}
							}
						}
					}

					&-content {
						margin-right: 15px;

						&-title {
							display: flex;
							align-items: center;
							margin: 0 0 4px 0;

							span {
								margin-left: 5px;
								background-color: #FFB900;
								width: 16px;
								height: 16px;
								border-radius: 8px;
								margin-top: -1px;

								img {
									width: 10px;
									height: 10px;
									margin: 3px;
								}
							}
						}
					}

					&-info {
						p {
							color: #00a32a !important;
						}
					}

					&-error {
						p {
							color: #d63638 !important;
						}
					}

					&:first-child {
						border-top: none;
					}

					label {
						display: block;
					}

					h3 {
						font-size: 16px;
						margin: 0;
					}

					p {
						font-size: 14px;
						color: #777777;
						margin: 0 0 6px 0;

						&:last-child {
							margin: 0;
						}
					}
					
					.theme-item-checkbox,
					.plugin-item-checkbox,
					.content-item-checkbox {
						.checkbox {
							box-sizing: border-box;
							position: relative;
                            cursor: pointer;
							display: block;
							background: #f1f1f1;
							width: 32px;
							height: 32px;
							border-radius: 16px;
							border: 1px solid #dddddd;

							.inspiro-starter-sites-check-icon {
								display: none;
								width: 20px;
								height: 20px;
								margin: 6px;
							}

							.inspiro-starter-sites-lock-icon {
								position: absolute;
								width: 14px;
								height: 17px;
								bottom: -5px;
								right: -2px;
							}
						}

						input[type=checkbox] {
							display: none;
						}

						input[type=checkbox]:checked + .checkbox {
							&::after {
								content: '';
								display: block;
								font-size: 10px;
								background: #3496ff;
								width: 20px;
								height: 20px;
								border-radius: 10px;
								margin: 5px;
							}
						}
					}
				}

				&-notice {
					display: none;
					padding: 25px;
					background: #E5F5FA;
					border-radius: 6px;
					margin: -10px 30px 30px 30px;

					p {
						font-size: 14px;
						color: #444444;
						margin: 0 0 10px 0;

						&:last-child {
							margin-bottom: 0;
						}
					}
				}

			}

			.inspiro-starter-sites-install-plugins-content-footer,
			.inspiro-starter-sites-delete-imported-content-footer {
				padding: 30px;
				background: #fafafa;
				border-top: 1px solid #dddddd;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.button {
					display: flex;
					align-items: center;

					img {
						width: 16px;
						height: auto;
						margin-right: 5px;
					}
				}
			}
		}
	}

	&__intro-text {
		p {
			font-size: 18px;
			color: #666666;
			margin: 0 0 24px;
		}

		ul {
			padding: 0 4%;
			list-style-type: square;
		}
	}

	&__theme-about {
		margin-bottom: 30px;
		display: flex;
		justify-content: space-between;

		&-screenshots {
			flex: 11;
			margin-right: 30px;

			.screenshot {
				box-sizing: border-box;

				img {
					border: 1px solid #CCD0D4;
					filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.07));
				}

				&.blank {
					border: 1px solid #CCD0D4;
					filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.07));
					min-height: 500px;
					background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAALElEQVQYGWO8d+/efwYkoKioiMRjYGBC4WHhUK6A8T8QIJt8//59ZC493AAAQssKpBK4F5AAAAAASUVORK5CYII=);
				}
			}

			img {
				width: 100%;
			}
		}

		&-info {
			flex: 10;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.theme-title {
				display: flex;
				align-items: baseline;

				.theme-name {
					margin-bottom: 16px;
				}

				.theme-version {
					margin-left: 10px;
					color: #72777C;
					font-size: 13px;
				}
			}

			.theme-author {
				font-size: 16px;
				color: #72777C;
				margin: 0 0 20px;
			}

			.theme-description {
				font-size: 16px;
				color: #555555;
				margin: 0 0 20px;
			}

			.theme-tags {
				font-size: 13px;
				color: #555555;
				margin: 4px 0 0;

				span {
					font-weight: 700;
				}
			}

			.inspiro-starter-sites-import-mode-switch {
				float: right;
				font-size: 14px;
			}
		}

		@media (max-width: 880px) {
			& {
				flex-direction: column;

				&-screenshots {
					margin: 0 0 30px 0;
				}
			}
		}
	}

	// Plugin elements.
	&__demo-import-files {
		width: 100%;
	}

	&__demo-import-preview-image-message {
		font-style: italic;
	}

	// Plugin title.
	&__title:before {
		width: auto;
		height: auto;
		font-size: inherit;
	}

	// Plugin multi select import and Plugin file upload containers.
	&__multi-select-import,
	&__demo-import-notice:not(:empty) {
		padding: 20px;
		margin: 30px 0;
		font-size: 14px;
		background-color: #ffffff;
		border: 1px solid #e5e5e5;
	}

	&__file-upload-container {
		border: 1px solid #dddddd;
		box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07);

		&--header {
			padding: 30px;
			border-bottom: 1px solid #dddddd;
			background-color: #ffffff;

			h2 {
				font-size: 22px;
				margin: 0;
			}
		}

		&-items {
			padding: 30px 30px 0 30px;
			background-color: #ffffff;

			display: flex;
			flex-wrap: wrap;

			&--second-row {
				padding-top: 0;
			}

			.inspiro-starter-sites__card {
				box-shadow: none;

				&-content {
					position: relative;

					&-info {
						position: absolute;
						right: 10px;
						top: 10px;

						img {
							width: 16px;
							height: 16px;
						}
					}
				}
			}
		}

		&--footer {
			padding: 30px;
			background-color: #fafafa;
			border-top: 1px solid #dddddd;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
	}

	&__demo-import-notice:not(:empty) {
		border: 0;
		border-left: 4px solid #00a0d2;
		box-shadow: 0 1px 1px 0 rgba(0,0,0,.1);
	}

	[dir="rtl"] &__demo-import-notice:not(:empty) {
		border: 0;
		border-right: 4px solid #00a0d2;
	}

	// Plugin button.
	&__button-container {
		margin-top: 30px;
	}

	// AJAX loader.
	&__ajax-loader {
		font-size: 1.5em;

		.spinner {
			display: inline-block;
			float: none;
			visibility: visible;
			margin-bottom: 6px;
		}
	}

	// New grid layout.
	&__gl {
		&-navigation li a {
			box-shadow: none;
		}

		&-item-container {
			display: flex;
			flex-wrap: wrap;
		}

		&-item {
			flex: 0 0 100%;
			margin-bottom: 20px;
			border: 1px solid #ddd;
			box-shadow: 0 1px 1px rgba(0,0,0,0.07);
			box-sizing: border-box;
			background-color: #fafafa;

			&-image-container {
				display: block;
				overflow: hidden;
				position: relative;
				-webkit-backface-visibility: hidden;
				transition: opacity 0.2s ease-in-out;

				&::after {
					content: "";
					display: block;
					padding-top: 66.66666%;
				}
			}

			&-image {
				height: auto;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				transition: opacity 0.2s ease-in-out;

				&--no-image {
					display: inline-block;
					width: 50%;
					text-align: center;
					position: absolute;
					top: 45%;
					right: 25%;
					left: 25%;
				}
			}

			&-footer {
				margin: 0;
				padding: 8px 10px;
				border-top: 1px solid #dddddd;
				background: #ffffff;
				background: rgba(255,255,255,0.65);
			}

			&-title {
				white-space: nowrap;
				text-overflow: ellipsis;
				display: block;
				margin: 0;
				font-size: 16px;
				text-align: center;
				font-weight: 500;
				color: #23282d;
				padding: 5px 0 6px;

				@media (max-width: 782px) {
					& {
						padding: 12px 0 13px;
					}
				}
			}

			&-buttons {
				display: none;
				text-align: center;
			}

			&-button {

				& + & {
					margin-left: 15px;
				}
			}

			@media (max-width: 782px) {
				&-button {
					width: calc(50% - 10px);
					margin-bottom: 10px;

					& + & {
						float: left;
					}
				}
			}

			&:hover {
				.inspiro-starter-sites__gl-item-buttons {
					display: block;
				}

				.inspiro-starter-sites__gl-item-title {
					display: none;
				}

				.inspiro-starter-sites__gl-item-footer {
					background: #ffffff;
				}
			}
		}

		&-header {
			display: inline-block;
			width: calc(100% - 24px);
			background-color: #ffffff;
			border: 1px solid #ccd0d4;
			box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.07);
			margin-bottom: 30px;
			padding: 0 11px;
		}

		&-navigation {
			font-size: 13px;
			width: 100%;
			float: left;

			ul {
				list-style-type: none;
				margin: 0;
				padding: 0;
				overflow: hidden;
			}

			li {
				margin: 0;

				&.active a,
				&.active a:hover {

					span {
						padding-bottom: 14px;
						border-bottom: 4px solid #666666;
					}
				}

				a {
					display: block;
					text-align: center;
					text-decoration: none;
					color: #23282D;
					padding: 18px 10px;

					span {
						padding-bottom: 14px;
						border-bottom: 4px solid #ffffff;
					}

					&:hover {
						color: #00a0d2;
						cursor:pointer;

						span {
							border-bottom: 4px solid #ffffff;
						}
					}
				}
			}
		}

		&-search-input {
			width: 100%;
			margin: 10px 0;
			font-size: 13px;
			color: #72777C !important;
		}

		@media (min-width: 640px) {
			&-navigation {
				width: calc(100% - 280px);

				li {
					margin: 0 15px;
					float: left;

					a {
						padding: 18px 10px;
					}
				}
			}

			&-search-input {
				display: inline-block;
				width: 280px;
				height: 30px;
				margin: 0;
				margin-top: 11px;
			}

			&-item-container {
				margin-right: -20px;
			}

			&-item {
				flex: 0 0 calc(50% - 20px);
				margin-right: 20px;
			}
		}

		@media (min-width: 1120px) {
			&-item-container {
				margin-right: -30px;
			}

			&-item {
				flex: 0 0 calc(33.33% - 30px);
				margin-bottom: 30px;
				margin-right: 30px;
			}
		}
	}

	&__card {
		background: #ffffff;
		text-align: center;
		box-sizing: border-box;
		border: 1px solid #dddddd;
		box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.07);
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		&-content {
			padding: 30px;

			.inspiro-starter-sites-icon {

				&--content {
					width: 53px;
					height: 53px;
				}

				&--widgets {
					width: 56px;
					height: 49px;
				}

				&--brush {
					width: 55px;
					height: 52px;
				}

				&--redux {
					width: 82px;
					height: 70px;
				}

				&--plugins {
					width: 65px;
					height: 64px;
				}

				&--copy {
					width: 42px;
					height: 52px;
				}

				&--layout {
					width: 53px;
					height: 52px;
				}

				&-container {
					height: 70px;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			h3 {
				margin: 5px 0;
				font-size: 16px;
				font-weight: 500;
			}

			p {
				margin: 0;
				font-size: 13px;
				color: #666666;
			}
		}

		&-footer {
			background: #fafafa;
			box-shadow: 0px -1px 0px #DDDDDD;
			padding: 10px;
			display: flex;
			justify-content: center;
			align-items: center;

			.button-secondary {
				background: #fafafa;
			}

			input[type="file"] {
				width: 200px;
				padding: 4px 0;
			}

			.button-disabled {
				cursor: not-allowed;
			}
		}

		&--three {
			flex: 0 0 100%;
			margin-bottom: 20px;

			@media (min-width: 768px) {
				flex: 0 0 calc(50% - 10px);
				margin-right: 20px;

				&:nth-child(2n) {
					margin-right: 0;
				}
			}

			@media (min-width: 1120px) {
				flex: 0 0 calc(33.33% - 20px);
				margin-bottom: 30px;
				margin-right: 30px;

				&:nth-child(2n) {
					margin-right: 30px;
				}

				&:nth-child(3n) {
					margin-right: 0;
				}
			}
		}

		&--four {
			flex: 0 0 100%;
			margin-bottom: 20px;

			@media (min-width: 768px) {
				flex: 0 0 calc(50% - 10px);
				margin-right: 20px;

				&:nth-child(2n) {
					margin-right: 0;
				}
			}

			@media (min-width: 1120px) {
				flex: 0 0 calc(50% - 15px);
				margin-bottom: 30px;
				margin-right: 30px;
			}
		}
	}
}

// Grid animations.
@keyframes inspiro-starter-sites-fade {
	from {
		opacity: 1;
	}

	to {
		opacity: 0;
	}
}

.inspiro-starter-sites-is-fadeout {
	animation: inspiro-starter-sites-fade linear 200ms 1 forwards;
}

.inspiro-starter-sites-is-fadein {
	animation: inspiro-starter-sites-fade linear 200ms 1 reverse forwards;
}

// Grid layout modal window.
.inspiro-starter-sites__modal {
	&-image-container {
		width: 100%;
		height: 180px;
		margin: 0;
		overflow: hidden;

		img {
			width: 100%;
		}
	}

	&-item-title {
		margin-top: 0.5em;
		font-weight: bold;
	}

	&-notice.inspiro-starter-sites__demo-import-notice:not(:empty) {
		border: 1px solid #e5e5e5;
		border-left: 4px solid #00a0d2;
		margin: 20px 0 0;
	}
}

// Custom style for the plugin SVG loader.
.inspiro-starter-sites-loading {
	animation: 0.65s linear infinite inspiro-starter-sites-loading-spin;
}

.inspiro-starter-sites-loading-md {
	width: 32px;
	height: 32px;
}

.inspiro-starter-sites-loading-sm {
	width: 16px;
	height: 16px;
}

@keyframes inspiro-starter-sites-loading-spin {
	0% {
		transform: rotateZ(270deg);
	}
	100% {
		transform: rotateZ(630deg)
	}
}


/* "Suggest a new demo" — placeholder tile (last item in the demo grid) + modal. */
.inspiro-starter-sites-demo-suggest-card {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex; // stretch the tile to the grid row height
}

.inspiro-starter-sites-demo-suggest-tile {
	appearance: none;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	min-height: 220px;
    max-height: 68.5%;
	padding: 28px 24px;
	border: 2px dashed #c7ccd4;
	border-radius: 8px;
	background: rgba(36, 38, 40, 0.015);
	color: #6b7280;
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;

	&__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 46px;
		height: 46px;
		border-radius: 50%;
		background: #1d1d1f;
		color: #ffffff;
		font-size: 28px;
		line-height: 1;
	}

	&__label {
		font-size: 15px;
		font-weight: 700;
		color: #1d1d1f;
	}

	&__hint {
		font-size: 13px;
		line-height: 1.4;
		color: #8a8f98;
		max-width: 210px;
	}

	&:hover {
		border-color: #1d1d1f;
		color: #1d1d1f;
		background: rgba(36, 38, 40, 0.04);
	}
}

body.iss-feedback-open {
	overflow: hidden;
}

.inspiro-starter-sites-feedback-root[hidden] {
	display: none;
}

.iss-feedback-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	background: rgba(17, 19, 22, 0.55);
}

.iss-feedback-modal {
	position: relative;
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.iss-feedback-close {
	position: absolute;
	top: 14px;
	inset-inline-end: 14px;
	width: 32px;
	height: 32px;
	border: 0;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	color: #6b7280;
	cursor: pointer;
	border-radius: 50%;

	&:hover {
		background: #f1f2f4;
		color: #1d1d1f;
	}
}

.iss-feedback-header {
	padding: 28px 28px 0;

	h2 {
		margin: 0 0 6px;
		font-size: 20px;
		font-weight: 700;
	}
}

.iss-feedback-intro {
	margin: 0 0 16px !important;
	color: #6b7280 !important;
	font-size: 14px !important;
}

.iss-feedback-progress {
	height: 4px;
	border-radius: 999px;
	background: #eceef1;
	overflow: hidden;

	span {
		display: block;
		height: 100%;
		width: 25%;
		background: #1d1d1f;
		transition: width 0.25s ease;
	}
}

.iss-feedback-body {
	padding: 22px 28px;
}

.iss-feedback-step {
	display: none;

	&.is-active {
		display: block;
	}

	h3 {
		margin: 0 0 14px;
		font-size: 16px;
		font-weight: 600;
	}
}

.iss-feedback-radio,
.iss-feedback-check {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 14px;
	margin: 0 0 8px;
	border: 1.5px solid #e5e7eb;
	border-radius: 8px;
	cursor: pointer;
	font-size: 14px;
	transition: border-color 0.15s ease, background 0.15s ease;

	&:hover {
		border-color: #c7ccd4;
	}

	input {
		margin: 0;
	}
}

.iss-feedback-text {
	width: 100%;
	box-sizing: border-box;
	padding: 10px 12px;
	margin-top: 6px;
	border: 1.5px solid #e5e7eb;
	border-radius: 8px;
	font-size: 14px;
}

.iss-feedback-hint {
	margin: 8px 0 !important;
	color: #8a8f98 !important;
	font-size: 12.5px !important;
}

.iss-feedback-nps {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.iss-feedback-nps-btn {
	flex: 1 0 auto;
	min-width: 34px;
	padding: 9px 0;
	border: 1.5px solid #e5e7eb;
	border-radius: 8px;
	background: #ffffff;
	color: #1d1d1f;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;

	&:hover {
		border-color: #c7ccd4;
	}

	&.is-active {
		background: #1d1d1f;
		border-color: #1d1d1f;
		color: #ffffff;
	}
}

.iss-feedback-nps-legend {
	display: flex;
	justify-content: space-between;
	margin-top: 8px;
	color: #8a8f98;
	font-size: 12px;
}

.iss-feedback-footer {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 28px 24px;
	border-top: 1px solid #eceef1;
}

.iss-feedback-step-indicator {
	margin-inline-start: auto;
	color: #8a8f98;
	font-size: 13px;
}

.iss-feedback-success {
	text-align: center;
	padding: 16px 0;

	.iss-feedback-success-check {
		width: 56px;
		height: 56px;
		margin: 0 auto 14px;
		border-radius: 50%;
		background: #e8f8ef;
		color: #0a5c36;
		font-size: 28px;
		line-height: 56px;
	}
}
