.c-user-profile {
	background-color: var(--color-blue-light);

	&.c-user-profile--register {
		background-color: var(--color-white);
		color: var(--color-primary);
	}

	.c-user-profile__header {
		background-color: var(--color-primary);

		@media (width > 600px) {
			padding: var(--spacing-lg) 0;
		}

		@media (width <= 600px) {
			padding: var(--spacing-md) 0;
		}

		.c-user-profile__sub-heading,
		.c-user-profile__heading {
			display: block;
			text-transform: uppercase;
		}

		.c-user-profile__sub-heading {
			font-weight: 100;
		}

		.c-user-profile__heading {
			@media (width > 768px) {
				font-size: 60px;
			}

			@media (width <= 768px) {
				font-size: 48px;
			}
		}
	}

	.c-user-profile__register {
		padding: var(--spacing-md) 0;
	}

	.c-user-profile__register-grid {
		display: flex;
		gap: var(--spacing-md);

		@media (width <= 1024px) {
			flex-direction: column;
		}
	}

	.c-user-profile__register-form {
		flex: 1 1 66.66%;
	}

	&.c-user-profile--register-trade .c-user-profile__register-form {
		max-width: 66.66%;

		@media (width <= 1024px) {
			max-width: none;
		}
	}

	.c-user-profile__register-html {
		flex: 1 1 33.33%;
		color: var(--color-primary);

		h1, h2, h3, h4, h5, h6 {
			color: inherit;
		}
	}

	.c-user-profile__details-wrapper {
		color: var(--color-primary);

		@media (width > 600px) {
			padding: var(--spacing-lg) 0;
		}

		@media (width <= 600px) {
			padding: var(--spacing-md) 0;
		}
	}

	.c-user-profile__details {
		display: flex;
		flex-wrap: wrap;
		gap: var(--spacing-md) var(--spacing-lg);

		@media (width <= 600px) {
			flex-direction: column;
		}

		&:not(:last-of-type) {
			margin-bottom: var(--spacing-lg);
		}
	}

	.c-user-profile__detail {
		@media (width > 600px) {
			flex: 0 1 calc(50% - var(--spacing-md));
		}

		span {
			font-weight: 800;

			&.wrap {
				overflow-wrap: anywhere !important;
				word-wrap: break-word;
			}
		}
	}

	.c-user-profile__button-wrapper {
		text-align: right;
	}

	.c-user-profile__success,
	.c-user-profile__error {
		margin-bottom: var(--spacing-sm);
	}

	.c-user-profile__error,
	.c-user-profile__field-error {
		color: var(--color-red);
	}

	.c-user-profile__fieldset {
		margin: 0 0 var(--spacing-md);
		padding: 0;
		border: 0;

		legend {
			margin-bottom: var(--spacing-sm);
			font-size: 1.5rem;
			font-weight: 800;
		}
	}

	.c-user-profile__form {
		.c-user-profile__detail[data-show-when] {
			display: none;
		}

		&:has(#profile-has_partner:checked) .c-user-profile__detail[data-show-when="has_partner"] {
			display: block;

			@media (width > 600px) {
				flex: 0 1 calc(50% - var(--spacing-md));
			}
		}

		.c-user-profile__detail--checkbox {
			flex: 1 1 100%;
		}

		.c-user-profile__checkbox {
			display: flex;
			align-items: center;
			gap: var(--spacing-sm);
			padding: 12px;
			font-weight: 500;
			cursor: pointer;

			span {
				font-size: 16px;
			}

			input {
				appearance: none;
				position: relative;
				flex-shrink: 0;
				box-sizing: border-box;
				width: 26px;
				height: 26px;
				margin: 0;
				padding: 0;
				border: 1px solid var(--color-grey-light);
				border-radius: 2px;
				background-color: var(--color-white);
				cursor: pointer;

				&:checked::after {
					content: '';
					position: absolute;
					inset: 0;
					background-color: var(--color-primary);
					mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 16'%3E%3Cpath d='M1.013 8.11c0-.223.078-.412.234-.568l1.14-1.14c.155-.155.345-.233.568-.233s.413.077.57.233l2.46 2.47 5.492-5.5c.156-.156.346-.234.568-.234.224 0 .413.077.57.233l1.138 1.14c.156.155.234.345.234.568 0 .224-.078.414-.234.57l-6.06 6.06-1.14 1.14c-.155.155-.345.233-.568.233s-.413-.078-.57-.234l-1.138-1.14-3.03-3.03c-.156-.156-.234-.346-.234-.57z'/%3E%3C/svg%3E");
					mask-repeat: no-repeat;
					mask-position: center;
					mask-size: 80%;
					-webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 16'%3E%3Cpath d='M1.013 8.11c0-.223.078-.412.234-.568l1.14-1.14c.155-.155.345-.233.568-.233s.413.077.57.233l2.46 2.47 5.492-5.5c.156-.156.346-.234.568-.234.224 0 .413.077.57.233l1.138 1.14c.156.155.234.345.234.568 0 .224-.078.414-.234.57l-6.06 6.06-1.14 1.14c-.155.155-.345.233-.568.233s-.413-.078-.57-.234l-1.138-1.14-3.03-3.03c-.156-.156-.234-.346-.234-.57z'/%3E%3C/svg%3E");
					-webkit-mask-repeat: no-repeat;
					-webkit-mask-position: center;
					-webkit-mask-size: 80%;
				}

				&:focus-visible {
					outline: 2px solid var(--color-grey-light);
					outline-offset: 2px;
				}
			}
		}

		.c-user-profile__detail {
			label:not(.c-user-profile__checkbox) {
				display: block;
				margin-bottom: 0.35rem;
				font-weight: 500;
			}

			input:not([type="checkbox"]) {
				width: 100%;
				padding: var(--spacing-xs);
				border: 1px solid var(--color-grey-mid);
				background-color: var(--color-white);

				&:focus {
					border-color: var(--color-primary);
				}

				&[aria-invalid="true"] {
					border-color: var(--color-red);
				}
			}
		}

		.c-user-profile__field-error {
			margin: 0.35rem 0 0;
		}
	}
}