:root {
	--socialnetwork--project-wizard-bg: var(--ui-color-gray-05);
}

.socialnetwork--project-wizard {
	--sonet-project-wizard-inline-padding: var(--ui-space-inline-xl2);

	display: flex;
	height: 100%;
	overflow: hidden;
}

.socialnetwork--project-wizard-main {
	display: flex;
	flex-direction: column;
	background: var(--socialnetwork--project-wizard-bg);
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.socialnetwork--project-wizard-body {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--ui-space-stack-md);
	padding: var(--ui-space-stack-xl) var(--sonet-project-wizard-inline-padding);
	flex: 1;
	overflow-y: auto;
}

.socialnetwork--project--field-highlight {
	--highlight-offset-y: 0px;
	--highlight-offset-x: 0px;
	--highlight-background: var(--ui-color-base-8);
	--highlight-gradient: conic-gradient(
		from 0deg at 50% 51.19%,
		var(--ui-color-accent-main-primary) 0deg,
		var(--ui-color-green-25) 180deg,
		var(--ui-color-accent-main-primary) 360deg
	);
	--border-width: var(--ui-border-width-thick);
	--border-radius: var(--ui-border-radius-md);

	transform-style: preserve-3d;
	transform: translateZ(0);
}

.socialnetwork--project--field-highlight:before {
	content: '';
	position: absolute;
	inset: var(--highlight-offset-y) var(--highlight-offset-x);
	background: var(--highlight-background);
	transform: translateZ(-1px);
	border-radius: var(--border-radius);
}

.socialnetwork--project--field-highlight:after {
	content: '';
	position: absolute;
	inset: calc(var(--highlight-offset-y) - var(--border-width)) calc(var(--highlight-offset-x) - var(--border-width));
	background: var(--highlight-gradient);
	transform: translateZ(-2px);
	border-radius: calc(var(--border-radius) + var(--border-width));
	animation: 200ms socialnetwork--project--field-highlight-transition forwards;
}

.socialnetwork--project--field-highlight__error {
	--highlight-gradient: conic-gradient(
		from 0deg at 50% 51.19%,
		rgba(255, 140, 114, 0) 0deg,
		rgba(253, 198, 59, 1) 180deg,
		rgba(255, 140, 114, 0) 360deg
	),
	conic-gradient(
		from 0deg at 50% 51.19%,
		rgba(255, 140, 114, 1) 0deg,
		rgba(253, 198, 59, 1) 180deg,
		rgba(255, 140, 114, 1) 360deg
	);
}

@keyframes socialnetwork--project--field-highlight-transition {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

.socialnetwork--project--field-highlight.--animate:after {
	animation: 1500ms socialnetwork--project--field-highlight forwards;
}

@keyframes socialnetwork--project--field-highlight {
	from {
		opacity: 0;
	}
	25% {
		opacity: 1;
	}
	75% {
		opacity: 1;
	}
	to {
		opacity: 0;
	}
}


.socialnetwork--project-wizard-header {
	display: flex;
	align-items: center;
	gap: var(--ui-space-inline-md);
}

.socialnetwork--project-title-wrapper {
	width: 100%;
}

.socialnetwork--project-title-wrapper textarea {
	outline: none;
}

.socialnetwork--project-title-wrapper.--keyboard-focus textarea {
	outline: 1px solid var(--ui-color-accent-main-link);
	outline-offset: 2px;
	border-radius: var(--ui-border-radius-2xs, 4px);
}

.socialnetwork--project-title-wrapper.socialnetwork--project--field-highlight {
	--highlight-background: var(--socialnetwork--project-wizard-bg);
}

.socialnetwork--project-title-wrapper.socialnetwork--project--field-highlight {
	--highlight-offset-y: -3px;
	--highlight-offset-x: -6px;
}

.socialnetwork--project-title {
	border-bottom: 1px solid var(--ui-color-divider-accent);
}

.socialnetwork--project-wizard-content {
	display: flex;
	flex-direction: column;
	gap: var(--ui-space-stack-md);
	padding: var(--ui-space-stack-xs) 0;
}

.sonet--project-wizard--user-selector-wrapper.--none-border-outer-container .ui-tag-selector-outer-container {
	border-color: transparent;
}

/* normalize */
.scn-pw-copy-settings__option-head-action {
	border-radius: 0;
	border: none;
	padding: 0;
	background-color: transparent;
	text-align: inherit;
	cursor: pointer;
}
.scn-pw-copy-settings__options { margin: 0; padding: 0; }
.scn-pw-copy-settings__option { list-style: none; }
/* normalize end */

.socialnetwork--project-wizard-copy-settings-field {}
.scn-pw-copy-settings {
	--whitespace-vertical: var(--ui-space-inline-sm2) ;
}

.scn-pw-copy-settings .socialnetwork--project-wizard--ui-field_label {}

.scn-pw-copy-settings .socialnetwork--project-wizard--ui-field_field {}

.scn-pw-copy-settings__options {
	display: flex;
	flex-direction: column;
	gap: var(--whitespace-vertical);
	padding: var(--whitespace-vertical) var(--ui-space-inline-md2);
}

.scn-pw-copy-settings__option {
	display: flex;
	gap: 10px;
}
.scn-pw-copy-settings__option.scn-pw-copy-settings__option_active {}

.scn-pw-copy-settings__option-vis {
	padding: 7px 0 0 0;
}

.scn-pw-copy-settings__option-checkbox {}

.scn-pw-copy-settings__option-text {
	display: flex;
	flex-direction: column;
}

.scn-pw-copy-settings__option-head {
	display: flex;
	gap: 5px;
	padding: 5px 0 5px 0;
}
.scn-pw-copy-settings__option:not(.scn-pw-copy-settings__option_active) .scn-pw-copy-settings__option-head {
	color: var(--ui-color-base-2);
}

.scn-pw-copy-settings__option-head-label {
	align-self: flex-start;
	cursor: pointer;
}

.scn-pw-copy-settings__option-head-text {}

.scn-pw-copy-settings__option-head-action {
	--colour-content: var(--ui-color-accent-main-link);
	position: relative;
	padding: 0 15px 0 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	font-weight: inherit;
	color: var(--colour-content);
}
.scn-pw-copy-settings__option-head-action:disabled {
	--colour-content: var(--ui-color-base-3);
}
.scn-pw-copy-settings__option-head-action.scn-pw-copy-settings__option-head-action_opened {}

.scn-pw-copy-settings__option-head-action::after {
	content: '';
	position: absolute;
	right: 3px;
	top: 50%;
	border-bottom: 1px solid var(--colour-content);
	border-left: 1px solid var(--colour-content);
	width: 6px;
	height: 6px;
	transition: transform 0.2s ease-in-out;
	transform-origin: center center;
	transform: translate(0, -75%) rotate(-45deg);
}
.scn-pw-copy-settings__option-head-action.scn-pw-copy-settings__option-head-action_opened::after {
	transform: translate(0, -25%) rotate(135deg);
}

.scn-pw-copy-settings__option-descr {
	color: var(--ui-color-base-3);
}

.socialnetwork--project-wizard-goal-field {
	flex: 1;
	width: 100%;
}

.socialnetwork--project-wizard-description-field {
	flex: 1;
	width: 100%;
}

.sonet--project-wizard--privacy-type-field-content {
	--sonet-project-wizard-privacy-item-title: var(--ui-color-base-2);

	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--ui-color-bg-content-primary);
	border-radius: var(--ui-border-radius-md);
	padding: var(--ui-space-inline-sm2) var(--ui-space-inline-md2);
}

.sonet--project-wizard--privacy-type {
	display: flex;
	flex-direction: row;
	gap: 10px;
	cursor: pointer;
}

.sonet--project-wizard--privacy-type.--selected {
	--sonet-project-wizard-privacy-item-title: var(--ui-color-accent-main-primary);
}

.sonet--project-wizard--privacy-type-content {
	display: flex;
	flex-direction: column;
}

.sonet--project-wizard--privacy-type-radio {
	padding: 3px 0;
}

.sonet--project-wizard--privacy-type-title-text {
	color: var(--sonet-project-wizard-privacy-item-title);
}

.sonet--project-wizard--privacy-type-description-text {
	color: var(--ui-color-base-3);
}

.sonet--project-wizard--base-feature-description {
	color: var(--ui-color-base-3);
}

.sonet--project-wizard--base-feature-field-content {
	--sonet-project-wizard-privacy-item-title: var(--ui-color-base-2);

	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--ui-color-bg-content-primary);
	border-radius: var(--ui-border-radius-md);
	padding: var(--ui-space-inline-sm2) var(--ui-space-inline-md2);
}

.sonet--project-wizard--base-feature-item {
	display: flex;
	flex-direction: column;
	gap: var(--ui-space-inline-sm, 12px);
}

.sonet--project-wizard--base-feature-highlight {
	outline: 2px solid var(--ui-color-accent-main-primary);
	border-radius: var(--ui-border-radius-md);
	animation: sonet-project-wizard-base-feature-highlight-fade 1.8s ease forwards;
}

@keyframes sonet-project-wizard-base-feature-highlight-fade {
	0% { outline-color: var(--ui-color-accent-main-primary); }
	70% { outline-color: var(--ui-color-accent-main-primary); }
	100% { outline-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
	.sonet--project-wizard--base-feature-highlight {
		animation: none;
	}
}

.sonet--project-wizard--legacy-tools {
	display: flex;
	flex-direction: column;
	gap: var(--ui-space-inline-sm, 12px);
	padding: var(--ui-space-inline-3xs, 2px) 0;
}

.sonet--project-wizard--legacy-tools-description {
	color: var(--ui-color-base-3);
	margin: 0;
}

.sonet--project-wizard--legacy-tools-list {
	display: grid;
	gap: var(--ui-space-inline-sm, 12px) var(--ui-space-inline-2xl, 28px);
	grid-template-columns: 1fr 1fr;
}

.sonet--project-wizard--legacy-tools-item {
	align-items: center;
	display: flex;
	gap: var(--ui-space-inline-xs, 8px);
	min-width: 0;
}

@media (max-width: 1024px) {
	.sonet--project-wizard--legacy-tools-list {
		grid-template-columns: 1fr;
	}
}

.sonet--project-wizard--access-rights {
	display: flex;
	flex-direction: column;
	gap: var(--ui-space-inline-sm, 12px);
	padding: var(--ui-space-inline-3xs, 2px) 0;
}

.sonet--project-wizard--access-rights-item {
	display: flex;
	flex-direction: column;
	gap: var(--ui-space-inline-sm, 12px);
}

.sonet--project-wizard--access-rights-item-title {
	font-size: var(--ui-font-size-lg);
	font-weight: var(--ui-font-weight-medium);
	color: var(--ui-color-base-2);
	padding-bottom: var(--ui-space-inline-2xs, 4px);
}

.sonet--project-wizard--access-rights > .sonet--project-wizard--access-rights-item:last-child > *:last-child {
	display: none;
}

.sonet--project-wizard--access-rights--reset-button {

	width: min-content;
}

.sonet--project-wizard--access-rights-locked {
	align-items: center;
	background: var(--ui-color-bg-content-primary, #fff);
	border-radius: var(--ui-border-radius-md, 10px);
	box-shadow:
		var(--ui-box-shadow-contrast-default-x, 0)
		var(--ui-box-shadow-contrast-default-y, 1px)
		var(--ui-area-box-shadow-default-blur, 1px)
		var(--ui-box-shadow-contrast-default-spread, 0)
		var(--ui-color-area-box-shadow-default-color, rgba(0, 0, 0, 0.04));
	cursor: pointer;
	display: flex;
	gap: var(--ui-space-inline-xs, 8px);
	min-height: 62px;
	padding: var(--ui-space-inline-sm, 12px) var(--ui-space-inline-md2, 18px);
}

.sonet--project-wizard--notifications-trigger {
	align-items: center;
	background: var(--ui-color-bg-content-primary, #fff);
	border-radius: var(--ui-border-radius-md, 10px);
	box-shadow:
		var(--ui-box-shadow-contrast-default-x, 0)
		var(--ui-box-shadow-contrast-default-y, 1px)
		var(--ui-area-box-shadow-default-blur, 1px)
		var(--ui-box-shadow-contrast-default-spread, 0)
		var(--ui-color-area-box-shadow-default-color, rgba(0, 0, 0, 0.04));
	cursor: pointer;
	display: flex;
	gap: var(--ui-space-inline-xs, 8px);
	justify-content: space-between;
	min-height: 38px;
	padding: var(--ui-space-inline-sm, 12px) var(--ui-space-inline-md2, 18px);
}

.sonet--project-wizard--notifications-trigger:focus-visible {
	outline: 2px solid var(--ui-color-accent-main-primary, #2067b0);
	outline-offset: 2px;
}

.sonet--project-wizard--notifications-trigger-content {
	align-items: center;
	display: flex;
	gap: var(--ui-space-inline-xs, 8px);
}

.sonet--project-wizard--notifications-trigger-chevron {
	align-items: center;
	display: inline-flex;
	justify-content: center;
}


.sonet--project-wizard--additional-settings {
	display: flex;
	flex-direction: column;
	gap: var(--ui-space-inline-sm, 12px);
	padding: var(--ui-space-inline-3xs, 2px) 0;
}

.socialnetwork--project-wizard--project-dates-field {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: var(--ui-space-inline-sm, 12px);
}

.socialnetwork--project-wizard--project-dates-field_separator {
	flex-shrink: 0;
	width: 12px;
	height: 1px;
	background: var(--ui-color-base-5, #c9ccd0);
}

.socialnetwork--project-wizard-footer {
	box-sizing: border-box;
	z-index: 1;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: start;
	gap: var(--ui-space-stack-sm);
	min-height: 78px;
	margin-top: auto;
	padding: 20px var(--sonet-project-wizard-inline-padding);
	background: var(--ui-color-base-8);
	box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.06);
}