$white: #FFFFFF;
$border-color: #C4C4C4;
$black: #000000;
$red: #FF4606;
$red-50: #FFF2F2;
$grey: #F6F6F6;
$grey-50: #EFEFEF;
$grey-400: #D9D9D9;

$radius: 4px;
$input_radius: 3px;

$desktop: 1280px;
$tablet: 992px;
$mobile: 768px;

#wetail-return-portal {
	display: flex;
	justify-content: center;
	align-items: center;

	&, & > * {
		box-sizing: border-box;
	}

	input[type="number"] {
		-moz-appearance: textfield;

		&::-webkit-outer-spin-button,
		&::-webkit-inner-spin-button {
			-webkit-appearance: none;
			margin: 0;
		}
	}

	.wetail-return-portal {
		&__step {
			display: flex;
			flex-direction: column;
			justify-content: center;
			gap: 20px;
			padding: 30px;
			background: $white;
			border-radius: $radius;
			opacity: 0;
			transform: translateX(100%);
			transition: opacity 0.5s cubic-bezier(0.4, 0.0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0.0, 0.2, 1);

			&--hidden {
				opacity: 0;
				transform: translateX(100%) scale(0.8);
				pointer-events: none;

			}

			&--current {
				opacity: 1;
				transform: translateX(0) scale(1);
				pointer-events: auto;
				z-index: 1;
			}

			.order-items {
				list-style: none;
				padding: 0;
				margin: 0;
				display: grid;
				grid-template-columns: 1fr;
				gap: 20px;

				.order-item {
					display: flex;
					align-items: center;

					.checkbox-wrapper {
						margin-right: 14px;

						.checkbox {
							--background: #fff;
							--border-color: "#D9D9D9";
							--border-color-active: "#000000";
							--border-color-hover: "#D9D9D9";
							--duration: calc((var(--size, 2) / 2) * 0.6s);
							display: inline-block;
							width: calc(var(--size, 1) * 14px);
							position: relative;

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

							& > * {
								position: absolute;
							}

							input {
								-webkit-appearance: none;
								-moz-appearance: none;
								-webkit-tap-highlight-color: transparent;
								cursor: pointer;
								background-color: var(--background);
								border: 1px solid;
								color: var(--newBrdrClr, $grey-400);
								outline: none;
								margin: 0;
								padding: 0;
								transition: all calc(var(--duration) / 3) linear;

								&:hover,
								&:checked {
									--newBrdr: calc(var(--size, 1) * 2);
								}

								&:hover {
									--newBrdr: calc(var(--size, 1) * 2);
									--newBrdrClr: var(--border-color-hover);
								}

								&:checked {
									--newBrdrClr: var(--border-color-active);
									transition-delay: calc(var(--duration) / 1.3);

									& + svg {
										--dashArray: 16 93;
										--dashOffset: 109;
									}
								}
							}

							svg {
								fill: none;
								left: 0;
								pointer-events: none;
								stroke: var(--border-color-active);
								stroke-dasharray: var(--dashArray, 93);
								stroke-dashoffset: var(--dashOffset, 94);
								stroke-linecap: round;
								stroke-linejoin: round;
								stroke-width: 1px;
								top: 0;
								transition: stroke-dasharray var(--duration), stroke-dashoffset var(--duration);
							}

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

					.title-and-sku {
						display: flex;
						flex-direction: column;
						margin-right: 5px;

						& > * {
							font-size: 14px;
							font-weight: 400;
							line-height: 16.94px;
							text-align: left;
						}

						h3 {
							margin: 0;
						}

						span {
							color: $grey-400;
						}
					}

					.image {
						margin-right: 17px;
						max-height: 96px;
						width: 76px;
						min-width: 76px;
						border-radius: $radius;
						overflow: hidden;

						img {
							height: auto;
							width: 100%;
							object-fit: contain;
						}
					}

					.quantity {
						margin-left: auto;
						max-width: 41px;
						min-width: 41px;
						height: 47px;
						background: $grey;
						border-radius: $radius;
						display: flex;
						align-items: center;
						justify-content: center;

						input {
							min-width: 41px;
							width: 100%;
							height: 100%;
							text-align: center;
							border: none;
							box-shadow: none;
							color: $black;
							background: $grey;
							padding: 0 7px;

							&:active, &:focus {
								box-shadow: none;
								outline: none;
							}
						}
					}
				}
			}

			&--pdf {
				h2, p {
					text-align: center;
					margin: 0;
				}

				p {
					max-width: 310px;
					margin: 0 auto;
				}
			}
		}

		&__steps {
			position: relative;
			overflow: hidden;
			display: grid;
			align-items: center;
			grid-template-columns: repeat(3, 1fr);
			width: 300%;
			transform: translateX(0);
			transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); // Updated easing

			&.step-1 {
				transform: translateX(0);
			}

			&.step-2 {
				transform: translateX(-33.33%);
			}

			&.step-3 {
				transform: translateX(-66.66%);
			}
		}

		&__button {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 50px;
			border-radius: $radius;
			background: $black;
			color: $white;
			padding: 0;
			font-family: "Inter", sans-serif;
			font-weight: 400;
			text-decoration: none;

			&--last-step {
				height: 39px;
			}

			&:visited, &:focus, &:active {
				background: $black;
				color: $white;
				outline: none;
				box-shadow: none;
				text-decoration: none;
			}

			svg {
				margin-right: 15px;
			}

			&--continue {
				.spinner {
					display: none;
					margin-left: 15px;
					width: 15px;
					height: 15px;
					border-radius: 50%;
					background: radial-gradient(farthest-side,#ffffff 94%,#0000) top/2.8px 2.8px no-repeat,
					conic-gradient(#0000 30%,#ffffff);
					-webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 2.8px),#000 0);
					animation: spinner 0.8s infinite linear;
				}
			}
		}

		&__qr {
			&--image {
				width: 139px;
				height: 139px;
				object-fit: cover;
				margin: 0 auto;

				&-base64 {
					width: 159px;
					height: 159px;
					margin: -20px auto;
				}
			}
		}

		&__or {
			padding: 10px 26px;
			display: flex;
			align-items: center;
			justify-content: center;
			position: relative;

			span {
				display: block;
				text-align: center;
				position: relative;
				z-index: 1;
				background: $white;
				padding: 0 8.5px;
			}

			&::before {
				content: "";
				height: 1px;
				width: calc(100% - 52px);
				background: $grey-50;
				position: absolute;
			}
		}

		&__content {
			max-width: 540px;
			width: 100%;
			font-family: "Inter", sans-serif;
			text-align: left;
			color: $black;
			position: relative;
			overflow: hidden;

			form {
				margin: 0;
			}

			label {
				display: block;
				font-size: 14px;
				font-weight: 400;
				line-height: 16.94px;
				text-align: left;
				margin-left: 10px;
				margin-bottom: 8px;
			}

			input {
				width: 100%;
				border: 1px solid $border-color;
				border-radius: $input_radius;
				background: $white;
				color: $black;
				box-shadow: none;
				height: 50px;
				padding: 0 15px;

				&[type="radio"] {
					accent-color: $black;
				}

				&[type="radio"],
				&[type="checkbox"] {
					width: auto;
					height: auto;
					display: inline-block;
					vertical-align: middle;

					& ~ label {
						margin: 0;
					}
				}

				&:focus, &:active {
					box-shadow: none;
					outline: none;
				}
			}

			h2 {
				font-size: 20px;
				font-weight: 400;
				line-height: 24.2px;
				margin-top: 0;
				margin-bottom: 0;
			}

			p {
				font-size: 14px;
				font-weight: 400;
				line-height: 16.94px;
				margin-bottom: 0;
				margin-top: 0;
			}
		}

		&__error {
			color: $red;
			padding: 10px 20px;
			border-radius: $radius;
			display: none;
			background: $red-50;
			font-size: 14px;
			font-weight: 400;
			line-height: 16.94px;
			text-align: left;
			margin: 0;
			list-style: none;

			li:not(:last-child) {
				margin-bottom: 10px;
			}
		}

		&__delivery-label {
			display: block;
			margin-bottom: 10px;
		}

		&__form {
			overflow-x: auto;
			width: 100%;
			display: flex;
			flex-direction: column;
			gap: 20px;

			&-field {
				&.invalid {
					input {
						border: 1px solid $red;
						color: $red;
					}

					label {
						color: $red;
					}
				}

				&--wrapper {
					display: flex;
					align-items: center;
					gap: 10px;
				}

				&--radio-group {
					display: flex;
					gap: 10px;
					flex-direction: column;
				}
			}
		}

		&__policy {
			font-size: 12px;
			font-weight: 400;
			line-height: 14.52px;
			text-align: center;
			text-decoration: underline;
			margin: 0;
			padding: 0;
			color: $black;
			display: block;

			&:visited, &:focus, &:active {
				color: $black;
				outline: none;
				box-shadow: none;
			}
		}
	}
}

@keyframes spinner {
	100% {
		transform: rotate(1turn);
	}
}

@media (max-width: $mobile) {
	#wetail-return-portal {
		.wetail-return-portal {
			&__step {
				padding: 20px;
			}
		}
	}
}
