#supportForm {
	width: 1024px;
	margin: 0 auto;
	box-sizing: content-box;

	.support {
		padding: 80px 0;

		.support__heading {
			color: var(--text-base-primary);
			font-feature-settings: 'dnom' on, 'ss01' on, 'ss02' on, 'ss03' on, 'ss10' on;

			font: var(--font-display-semi-md);

			padding: 20px 0 8px 0;
		}

		.support__subheading {
			color: var(--text-base-secondary);
			font: var(--font-body-reg-md);

			a {
				color: var(--text-base-secondary);
				font: var(--font-body-reg-md);
				&:hover {
					text-decoration: none;
				}
			}
		}

		.support__form-wrapper {
			display: flex;
			gap: 40px;
			padding-top: 56px;

			.support__form__body-left {
				flex-grow: 1;
				display: flex;
				flex-direction: column;
				padding: 40px;
				gap: 28px;

				border-radius: 24px;
				background: var(--bg-surf-0);
				box-shadow: var(--shadow-large-out);

				.support__form__row {
					width: 100%;

					.support__form-rowHead {
						display: flex;
						justify-content: space-between;
						align-items: flex-start;
						padding-bottom: 12px;
						width: 100%;
						gap: 24px;

						&.support__form-rowHeadWSub {
							flex-direction: column;
							gap: 4px;
						}

						.support__form-name {
							color: var(--text-base-primary);
							font: var(--font-body-semi-md);
						}

						.support__form-sub {
							color: var(--text-base-secondary);
							font: var(--font-body-reg-xs);
						}

						.support__form-req {
							display: flex;
							padding: 1px 8px;
							justify-content: center;
							align-items: center;
							white-space: nowrap;
							flex-shrink: 0;

							border-radius: 12px;
							border: 1px solid var(--color-blue-200);
							background: var(--color-blue-100);

							color: var(--color-darkblue-900);
							font: var(--font-body-reg-xs);
							font-size: 11px;
						}
					}

					.support__form-rowBody {
						&#supportType {
							display: flex;
							flex-wrap: wrap;
							gap: 6px;

							.btn.btn-semi-active {
								background: var(--base-white-solid);
								box-shadow: 0 0 0 1.5px var(--global-state-focus-default);
							}
						}

						input, textarea {
							width: 100%;
							border: 0;
							border-radius: 10px;
							background: var(--input-form-bg-default);
							box-shadow: var(--shadow-input-form-default);
							padding: 10px 12px;
							box-sizing: border-box;

							&:hover {
								box-shadow: var(--shadow-input-form-hover);
							}

							&:focus, &:focus-visible {
								outline: none;
								box-shadow: var(--shadow-input-form-default), 0 0 0 1.5px var(--global-state-focus-default);
							}

							color: var(--text-base-primary);
							font: var(--font-body-reg-sm);

							&::placeholder {
								color: var(--text-base-tertiatry);
								font: var(--font-body-reg-sm);
							}
						}

						textarea {

							resize: vertical;
							min-height: 120px;
						}
					}
				}

				.support__attach {
					display: flex;
					flex-wrap: wrap;
					gap: 8px;
					padding-bottom: 10px;

					.support__attach__item {
						display: flex;
						flex-direction: column;
						position: relative;

						.support__attach__item-thumb {
							width: 80px;
							height: 56px;
							overflow: hidden;
							display: flex;
							position: relative;

							border-radius: 4px;
							border: 1px solid var(--border-high);
							background: #FFF;


							.support__attach__item-progress {
								position: absolute;
								top: 0;
								right: 0;
								bottom: 0;
								width: 100%;
								pointer-events: none;

								background: var(--base-greengrey-a-200);
								transition: width 0.15s linear;
							}

							.support__attach__item-noprev & {
								background: var(--base-greengrey-50);
								justify-content: center;
								align-items: center;

								&:hover {
									background: var(--base-greengrey-150);
									box-shadow: var(--shadow-large);
								}
							}

							.support__attach__item-err & {
								border: 1px solid var(--color-rose-100);
								background: var(--color-rose-50);
								justify-content: center;
								align-items: center;
							}
						}

						.support__attach__item-fname {
							max-width: 80px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;

							font-family: var(--font-family-secondary), sans-serif;
							font-size: 9px;
							font-style: normal;
							font-weight: var(--font-weight-regular);
							line-height: var(--line-height-xxs);
							letter-spacing: var(--letter-spacing-regular);

							color: var(--text-base-primary);
						}

						.support__attach__item-fsize {
							max-width: 80px;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-family: var(--font-family-secondary), sans-serif;
							font-size: 9px;
							font-style: normal;
							font-weight: var(--font-weight-regular);
							line-height: 12px;
							letter-spacing: var(--letter-spacing-regular);

							color: var(--text-base-tertiatry);

							.support__attach__item-err & {
								color: var(--danger-default);
							}
						}

						.btn-close {
							position: absolute;
							top: -6px;
							right: -6px;
							z-index: 1000;

							width: 20px;
							height: 20px;
							padding: 2px;

							display: none;

							ws-icon {
								width: 16px;
								height: 16px;
							}
						}

						&:hover {
							.btn-close {
								display: inline-block;
							}
						}


						&.is-loading {
							.support__attach__item-thumb {
								animation: support-attach-loading 1s ease-in-out infinite;
							}
						}
					}
				}

				.support__form-upload {
					position: relative;

					body.body_drop & {
						.support__attach,
						.support__form-rowBody { display: none; }
					}
				}

				.support__drop__zone {
					display: none;
					min-height: 96px;
					padding: 24px 12px;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					gap: 8px;
					border-radius: 12px;
					border: 2px dashed var(--border-mid);
					background: #FFF;

					body.body_drop & {
						display: flex;
					}

					.support__drop__zone-text {
						color: var(--text-base-primary);
						font: var(--font-body-med-sm);
						pointer-events: none;
					}

					.support__drop__zone-size {
						color: var(--text-base-tertiatry);
						font: var(--font-body-reg-xs);
						pointer-events: none;
					}

					ws-icon {
						pointer-events: none;
					}

					&:hover, &.is-dragover {
						border: 2px dashed var(--color-darkblue-700);
						background: var(--color-darkblue-50);
					}
				}
			}

			.support__form__body-right {
				width: 400px;
				flex-shrink: 0;

				.support__form__login {
					padding-bottom: 20px;
					border-bottom: 1px solid var(--border-mid-high);
					margin-bottom: 20px;

					.support__form__login-wrapper {
						width: 100%;
						box-sizing: border-box;
						display: flex;
						padding: 20px 40px 20px 24px;
						flex-direction: column;
						align-items: flex-start;
						gap: 4px;
						flex: 1 0 0;
						border-radius: 16px;
						border: 1px solid var(--border-high);
						background: var(--color-aquamarine-100);
						box-shadow: var(--shadow-middle);

						position: relative;

						.support__form__login-heading {
							color: var(--color-aquamarine-950);
							font: var(--font-body-bold-lg);
							z-index: 1;
						}

						.support__form__login-subheading {
							color: var(--color-aquamarine-950);
							font: var(--font-body-reg-sm);
							z-index: 1;
						}

						.support__form__login-button {
							z-index: 1;
							padding-top: 12px;
						}

						.btn-close {
							position: absolute;
							right: 4px;
							top: 4px;
							z-index: 1;
						}

						.support__form__bg {
							position: absolute;
							z-index: 0;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							border-radius: 16px;

							overflow: hidden;
						}
					}

					.support__form__logged-wrapper {
						display: flex;
						padding: 16px;
						gap: 8px;
						align-self: stretch;
						border-radius: 12px;
						border: 1px solid var(--border-mid-high);
						background: var(--color-aquamarine-100);
						box-shadow: var(--shadow-middle);

						.support__form__logged-text {
							display: flex;
							flex-direction: column;
							gap: 10px;

							.support__form__logged-heading {
								color: var(--text-base-primary);
								font: var(--font-body-med-md);

								span {
									text-decoration-line: underline;
									text-decoration-style: solid;
									text-decoration-skip-ink: auto;
									text-decoration-color: var(--text-base-ghost);
									text-decoration-thickness: 10%;
									text-underline-offset: 8%;
								}
							}

							.support__form__logged-subheading {
								color: var(--text-base-tertiatry);
								font: var(--font-body-reg-xs);
							}
						}
					}
				}

				.support__form__contact {
					.support__form__contact-heading {
						display: flex;
						padding: 0 12px 12px 0;
						justify-content: space-between;
						align-items: center;
						align-self: stretch;

						span {
							color: var(--text-base-primary);
							font: var(--font-body-semi-md);
						}

						ws-icon {
							cursor: help;
						}
					}

					.support__form__contact-row {
						width: 100%;
						border: 0;
						border-radius: 10px;
						background: var(--input-form-bg-default);
						box-shadow: var(--shadow-input-form-default);
						padding: 10px 12px;
						box-sizing: border-box;

						&:hover {
							box-shadow: var(--shadow-input-form-hover);
						}

						&:focus-within {
							box-shadow: var(--shadow-input-form-default), 0 0 0 1.5px var(--global-state-focus-default);
						}

						display: flex;
						gap: 8px;

						margin-bottom: 16px;

						input {
							flex: 1;
							min-width: 0;
							border: 0;
							padding: 0;
							background: transparent;
							outline: none;
							color: var(--text-base-primary);
							font: var(--font-body-reg-sm);

							&::placeholder {
								color: var(--text-base-tertiatry);
								font: var(--font-body-reg-sm);
							}
						}
					}
					.support__form__contact-checkbox {
						margin-bottom: 20px;
						padding-top: 32px;
						display: flex;
						align-items: center;
						gap: 10px;

						label {
							color: var(--text-base-secondary);
							font: var(--font-body-reg-xs);

							a {
								color: var(--text-base-secondary);
								&:hover {
									text-decoration: none;
								}
							}
						}
					}
					.support__form__contact-submit {
						display: flex;

						ws-btn.btn-loading {
							opacity: 0.6;
							pointer-events: none;
						}
					}
				}
			}
		}
	}
}

#supportStack {
	width: 1024px;
	margin: 0 auto;
	box-sizing: content-box;

	.support__stack {
		display: flex;
		gap: 20px;
		padding: 120px 0;

		.support__stack__card {
			position: relative;
			flex: 1 0 0;
			min-width: 0;
			height: 450px;
			overflow: hidden;

			border-radius: 20px;
			background: var(--base-greengrey-a-50);
			text-decoration: none;


			.support__stack__card-pic {
				position: absolute;
				left: 0;
				right: 0;
				bottom: 0;
				height: 400px;

				img {
					display: block;
					width: 100%;
					height: 100%;
					object-fit: cover;
				}
			}

			.support__stack__card-head {
				position: relative;
				display: flex;
				flex-direction: column;
				gap: 4px;
				padding: 28px 28px 0;

				.support__stack__card-heading {
					color: var(--text-base-primary);
					font: var(--font-body-semi-lg);
				}

				.support__stack__card-sub {
					color: var(--text-base-secondary);
					font: var(--font-body-reg-sm);
				}

				.support__stack__card-link {
					display: flex;
					align-items: center;
					gap: 4px;
					padding-top: 8px;

					span {
						color: var(--text-base-primary);
						font: var(--font-body-reg-sm);
						text-decoration-line: underline;
						text-decoration-style: solid;
						text-decoration-color: var(--text-base-primary);
						text-decoration-thickness: 8%;
					}
				}
			}

			&:hover {
				.support__stack__card-link span {
					text-decoration: none;
				}
			}
		}
	}
}

#supportComplete {
	width: 1024px;
	margin: 0 auto;
	box-sizing: content-box;

	.support__complete {
		padding: 80px 0 120px;

		display: flex;
		flex-direction: column;
		gap: 24px;

		.support__complete-row {
			display: flex;
			align-items: center;

			.support__complete-check {
				width: 112px;
				height: 112px;
				opacity: .6;
			}

			.support__complete-head {
				flex: 1;
				min-width: 0;

				display: flex;
				flex-direction: column;
				gap: 8px;

				.support__complete-heading {
					color: var(--text-base-primary);
					font-feature-settings: 'dnom' on, 'ss01' on, 'ss02' on, 'ss03' on, 'ss10' on;
					font: var(--font-display-semi-md);
					letter-spacing: var(--letter-spacing-tight);
				}

				.support__complete-subtext {
					color: var(--text-base-secondary);
					font: var(--font-body-reg-md);
				}
			}
		}


		.support__complete-buttons {
			display: flex;
			gap: 8px;
			padding-left: 112px;
		}
	}
}

body {
	#supportForm {
		.support {
			.support__form-wrapper {
				.support__form__body-right {
					.support__form__login {
						.support__form__logged-wrapper {
							display: none;
						}
					}
				}
			}
		}
	}
	&.logged {
		#supportForm {
			.support {
				.support__form-wrapper {
					.support__form__body-right {
						.support__form__login {
							.support__form__logged-wrapper {
								display: flex;
							}
							.support__form__login-wrapper {
								display: none;
							}
						}
					}
				}
			}
		}
	}
}
@media screen and (max-width: 1150px) {
	#supportForm,
	#supportStack,
	#supportComplete {
		width: auto;
		max-width: calc(100% - 80px);
	}
}

@media screen and (max-width: 991px) {
	#supportForm {
		max-width: 600px;

		.support {
			.support__form-wrapper {
				flex-direction: column;

				.support__form__body-right {
					width: 100%;

					.support__form__login {
						display: none;
					}
				}
			}
		}
	}

	#supportStack {
		.support__stack {
			flex-direction: column;

			.support__stack__card {
				flex: none;
				width: 100%;
				height: 220px;

				.support__stack__card-pic {
					left: auto;
					width: 328px;
					height: 400px;
				}

				.support__stack__card-head {
					box-sizing: border-box;
					max-width: calc(100% - 328px);
				}
			}
		}
	}
}

@media screen and (max-width: 620px) {
	#supportForm,
	#supportStack,
	#supportComplete {
		max-width: calc(100% - 40px);
	}

	#supportComplete {
		.support__complete {
			padding: 80px 0;

			.support__complete-row {
				flex-direction: column;
				padding-bottom: 40px;

				.support__complete-check {
					width: 124px;
					height: 124px;
				}

				.support__complete-head {
					width: 100%;
					text-align: center;

					.support__complete-heading {
						font-size: 36px;
						line-height: 40px;
						letter-spacing: -0.66px;
					}
				}
			}

			.support__complete-buttons {
				flex-direction: column;
				padding-left: 0;

				.btn {
					width: 100%;
				}
			}
		}
	}

	#supportForm {
		.support {
			padding: 40px 0;

			.support__form-wrapper {
				padding-top: 32px;

				.support__form__body-left {
					padding: 24px;
					gap: 20px;
				}
			}
		}
	}

	#supportStack {
		.support__stack {
			padding: 60px 0;


			.support__stack__card {
				height: 330px;

				.support__stack__card-head {
					max-width: none;
				}
			}
		}
	}
}

@media screen and (max-width: 560px) {
	#supportStack {
		.support__stack {
			padding: 60px 0;

			.support__stack__card {
				height: 450px;

				.support__stack__card-head {
					max-width: none;
				}
			}
		}
	}
}
@keyframes support-attach-loading {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.35; }
}