@charset "utf-8";

/* --------------------------------------------------------------------------
   Registration
-------------------------------------------------------------------------- */

	body {

		> header {

			width: var(--registration-width);
			box-sizing: border-box;
			margin: 0 auto;
			padding-right: 0;
			padding-left: 0;

			> nav {
				display: none;
			}

			#registration-progress {

				display: flex;
				flex: 1;
				min-width: 0;
				margin: 0 var(--space-16);

				#registration-steps {

					display: flex;
					width: 100%;
					align-items: center;
					gap: var(--space-16);

					button,
					span {
						display: block;
						height: var(--space-8);
						flex: 1;
						box-sizing: border-box;
						padding: 0;
						background: var(--color-brand-surface-medium);
						border: 0;
						border-radius: var(--radius-400);
						font-size: 0;
					}

					button {
						background: var(--color-brand-primary);
						cursor: pointer;
						transition: background-color var(--transition-default);

						&:hover {
							background: var(--color-brand-primary-hover);
						}
					}

					span.current {
						background: var(--color-neutral-white);
						border: .125rem solid var(--color-brand-primary);
					}

				}

			}

			.header-controls {

				margin-left: auto;

				.primary {
					display: none;
				}

			}

		}

		> main {

			display: flex;
			width: 100%;
			min-height: calc(100vh - var(--public-header-height));
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: var(--space-32);
			box-sizing: border-box;
			padding: var(--space-48) 0;

			.registration-header {

				display: flex;
				width: var(--registration-width);
				flex-direction: column;
				gap: var(--space-8);
				margin: 0 auto;

				h1 {
					margin: 0;
					color: var(--color-brand-content-high);
					font-size: var(--font-size-heading-l);
					font-weight: var(--font-weight-semibold);
					line-height: var(--line-height-heading-l);
				}

				p {
					margin: 0;
					color: var(--color-neutral-content-medium-low);
					font-size: var(--font-size-body-s);
					font-weight: var(--font-weight-regular);
					line-height: var(--line-height-body-s);
				}

				.email {
					color: var(--color-brand-primary);
				}

			}

			.registration-types {
				display: grid;
				width: var(--registration-width);
				grid-template-columns: repeat(2, minmax(0, 1fr));
				gap: var(--space-16);
				margin: 0 auto;
			}

			.registration-type {

				display: flex;
				min-width: 0;
				flex-direction: column;
				box-sizing: border-box;
				padding: var(--space-8);
				color: var(--color-brand-content-high);
				text-align: left;
				background: var(--color-brand-surface-lowest);
				border: 0;
				border-radius: var(--radius-500);
				cursor: pointer;
				transition: background var(--transition-default);

				.image {
					display: block;
					width: 100%;
					aspect-ratio: 2.25;
					background: var(--color-neutral-white);
					border-radius: var(--radius-400);
				}

				.content {

					position: relative;
					display: flex;
					flex: 1;
					flex-direction: column;
					gap: var(--space-8);
					box-sizing: border-box;
					padding: var(--space-16) var(--space-48) var(--space-16) var(--space-16);

					strong {
						color: var(--color-brand-content-high);
						font-size: var(--font-size-body-m);
						font-weight: var(--font-weight-semibold);
						line-height: var(--line-height-body-m);
					}

					> span {
						color: var(--color-neutral-content-medium-low);
						font-size: var(--font-size-body-s);
						font-weight: var(--font-weight-regular);
						line-height: var(--line-height-body-s);
					}

					.registration-arrow {

						position: absolute;
						right: var(--space-16);
						bottom: var(--space-16);
						display: flex;
						width: var(--space-40);
						height: var(--space-40);
						align-items: center;
						justify-content: center;
						color: var(--color-neutral-white);
						background: var(--color-brand-primary);
						border-radius: var(--radius-400);
						opacity: 0;
						transition: opacity var(--transition-default);

						svg {
							width: var(--space-24);
							height: var(--space-24);
							stroke: currentColor;
							fill: none;
							transform: rotate(90deg);
						}

					}

				}

				&:hover, &:focus-visible {

					background: var(--color-brand-surface-medium);

					.registration-arrow {
						opacity: 1;
					}

				}

			}

			.agreement {

				width: 100%;
				flex-direction: row;
				gap: var(--space-16);
				align-items: center;
				box-sizing: border-box;
				background: var(--color-neutral-white);
				padding: var(--space-12) var(--space-16);
				border-radius: var(--radius-300);

				&::before {
					content: none;
				}

				.text {
					color: var(--color-neutral-content-medium);
					font-size: var(--font-size-body-s);
					font-weight: var(--font-weight-regular);
					line-height: var(--line-height-body-s);
				}

				a {
					color: var(--color-brand-primary);
					text-decoration: underline;
					text-underline-offset: var(--space-2);
				}

			}

			form.standard-form {
				width: var(--registration-width);
				margin: 0 auto;
				padding: var(--space-16);
				background: var(--color-brand-surface-lowest);
				border-radius: var(--radius-500);
			}


			/* --------------------------------------------------------------------------
			   Registration Organization
			-------------------------------------------------------------------------- */

				.registration-organization {

					.form-fields {
						gap: var(--space-12);
						background: transparent;
						padding: 0;
					}

					.form-row {
						padding: var(--space-20);
						background: var(--color-neutral-white);
						border-radius: var(--radius-400);
					}

					.registration-price {

						display: flex;
						flex-direction: column;
						gap: var(--space-8);

						padding: var(--space-20);

						background: var(--color-neutral-white);
						border-radius: var(--radius-400);

						&[hidden] {
							display: none;
						}

						span {
							color: var(--color-neutral-content-low);
							font-size: var(--font-size-body-m);
							font-weight: var(--font-weight-regular);
							line-height: var(--line-height-body-m);
						}

						strong {

							color: var(--color-neutral-content-high);
							font-size: var(--font-size-body-l);
							font-weight: var(--font-weight-semibold);
							line-height: var(--line-height-body-l);

							[data-registration-price-value] {
								display: inline-block;
								opacity: 1;
								transform: translateY(0);
								transition:
										opacity 150ms ease,
										transform 150ms ease;

								&.registration-price-changing {
									opacity: 0;
									transform: translateY(calc(var(--space-4) * -1));
								}
							}

						}

					}

					footer {

						display: flex;
						align-items: center;
						gap: var(--space-20);

						.button {
							width: auto;
							min-width: 10rem;
						}

						.payment-note {
							color: var(--color-neutral-content-low);
							font-size: var(--font-size-body-s);
							font-weight: var(--font-weight-regular);
							line-height: var(--line-height-body-s);
						}

					}

				}


			/* --------------------------------------------------------------------------
			   Confirmation
			-------------------------------------------------------------------------- */

				.registration-confirm {

					.form-fields > label > span {
						color: var(--color-neutral-content-high);
						font-size: var(--font-size-body-l);
						font-weight: var(--font-weight-semibold);
						line-height: var(--line-height-body-l);
					}

					.confirmation-code {

						display: flex;
						gap: var(--space-12);
						margin: var(--space-12) 0;

						input[data-role="confirmation-code-input"] {
							width: var(--space-64);
							height: var(--space-64);
							padding: 0;
							text-align: center;
						}

						&.input-error {

							input[data-role="confirmation-code-input"] {
								border-color: var(--color-negative-border-medium) !important;
							}

						}

					}

					.error-block {
						display: none;
					}

					.confirmation-help {
						color: var(--color-neutral-tertiary);
						font-size: var(--font-size-body-m);
						font-weight: var(--font-weight-regular);
						line-height: var(--line-height-body-m);
					}

				}

		}

		main, #registration-progress {
			opacity: 1;
			transform: translateY(0);
			transition: opacity var(--transition-default), transform var(--transition-default);
		}

		main.registration-loading, #registration-progress.registration-loading {
			opacity: 0;
			transform: translateY(var(--space-8));
		}

	}