@charset "utf-8";


	body {

		color: var(--color-brand-content-high);
		background: var(--color-neutral-white);
		font-family: var(--font-family-primary);

		&:has(#cookie-dialog) {

			overflow: hidden;

			&::before {
				position: fixed;
				inset: 0;
				z-index: 999;
				background: rgb(4 7 11 / 48%);
				content: '';
			}

		}

		/* --------------------------------------------------------------------------
   			Header
		-------------------------------------------------------------------------- */

			> header {

				display: flex;
				height: var(--public-header-height);
				align-items: center;
				gap: var(--space-48);
				box-sizing: border-box;
				padding: var(--space-12) var(--space-56);
				background: var(--color-neutral-white);

				> a {

					display: flex;
					flex: 0 0 auto;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					color: var(--color-neutral-content-medium-low);
					text-decoration: none;

					img {
						display: block;
					}

					span {
						color: var(--color-brand-content-medium);
						font-size: var(--font-size-body-s);
						font-weight: var(--font-weight-regular);
						line-height: var(--line-height-body-s);
						white-space: nowrap;
						opacity: .4;
					}

				}

				> nav {

					display: flex;
					flex: 1;
					min-width: 0;
					align-items: center;

					a {

						display: inline-flex;
						min-height: 3rem;
						align-items: center;
						box-sizing: border-box;
						padding: var(--space-12);
						color: var(--color-brand-content-medium);
						font-size: var(--font-size-body-m);
						line-height: var(--line-height-body-m);
						text-decoration: none;
						white-space: nowrap;
						transition: color var(--transition-default);

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

					}

				}

				> div {

					display: flex;
					flex: 0 0 auto;
					align-items: center;
					gap: 2.625rem;

					> button {

						display: flex;
						min-height: 3rem;
						align-items: center;
						gap: var(--space-4);
						box-sizing: border-box;
						padding: var(--space-4);
						color: var(--color-neutral-content-high);
						background: var(--color-brand-surface-low);
						border: 0;
						border-radius: var(--radius-400);
						font: inherit;
						cursor: pointer;
						appearance: none;
						transition: background-color var(--transition-default);

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

						span {
							display: flex;
							min-width: 4rem;
							min-height: 2.5rem;
							align-items: center;
							justify-content: center;
							box-sizing: border-box;
							padding: var(--space-8);
							background: var(--color-neutral-white);
							border-radius: var(--radius-400);
						}

						&::after {
							width: .5rem;
							height: .5rem;
							margin: 0 var(--space-12) 0 var(--space-4);
							border-right: .125rem solid currentColor;
							border-bottom: .125rem solid currentColor;
							opacity: .4;
							content: '';
							transform: rotate(45deg) translateY(-.125rem);
						}

					}

					> div {

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

						.button {
							width: 7.5rem;
						}

					}

				}

			}


		/* --------------------------------------------------------------------------
		   Footer
		-------------------------------------------------------------------------- */

			> footer {

				box-sizing: border-box;
				padding: 0 var(--space-56) var(--space-56);
				background: var(--color-neutral-white);

				> div {

					display: flex;
					height: 35.3125rem;
					flex-direction: column;
					box-sizing: border-box;
					padding: 2.625rem;
					background: var(--color-brand-surface-lowest);
					border-radius: var(--radius-600);

					> header {

						display: flex;
						align-items: flex-start;
						justify-content: space-between;

						> div {

							display: flex;
							align-items: flex-start;
							gap: var(--space-16);

							a {

								display: flex;
								height: 3.5rem;
								align-items: center;
								justify-content: center;
								box-sizing: border-box;
								padding: .875rem var(--space-16);
								color: var(--color-brand-content-medium);
								background: var(--color-neutral-white);
								border-radius: var(--radius-400);
								text-decoration: none;

								&:first-child {

									gap: .7025rem;

									img {
										width: 1.5330625rem;
										height: 1.49625rem;
									}

								}

								&:last-child {

									img {
										width: 13.3125rem;
										height: 1.75rem;
									}

								}

							}

							img {
								display: block;
								flex: 0 0 auto;
								object-fit: contain;
							}

							span {
								color: var(--color-brand-registry);
								font-size: 1.0536875rem;
								font-weight: var(--font-weight-regular);
								line-height: 1.75rem;
								white-space: nowrap;
							}

						}

						> nav {
							display: flex;
							align-items: center;
							gap: var(--space-16);
						}

					}

					> nav {

						display: grid;
						grid-template-columns: repeat(4, 17.5rem);
						gap: var(--space-24);
						margin-top: var(--space-80);

						> div {

							display: flex;
							flex-direction: column;
							align-items: flex-start;
							gap: var(--space-12);

							strong {
								margin-bottom: var(--space-4);
								color: var(--color-brand-content-high);
								font-size: var(--font-size-body-m);
								font-weight: var(--font-weight-regular);
								line-height: var(--line-height-body-m);
							}

							a {

								color: var(--color-neutral-tertiary);
								font-size: var(--font-size-body-m);
								line-height: var(--line-height-body-m);
								text-decoration: none;
								transition: color var(--transition-default);

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

							}

						}

					}

					> div:last-child {

						display: flex;
						min-height: 7.25rem;
						align-items: flex-end;
						justify-content: space-between;
						margin-top: auto;

						small {
							color: var(--color-neutral-content-medium-low);
							font-size: var(--font-size-body-s);
							line-height: var(--line-height-body-s);
							opacity: .86;
						}

						nav {

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

							a {

								color: var(--color-neutral-tertiary);
								font-size: var(--font-size-body-m);
								line-height: var(--line-height-body-m);
								text-decoration: none;
								transition: color var(--transition-default);

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

							}

						}

					}

				}

			}


		/* --------------------------------------------------------------------------
		   Cookie Dialog
		-------------------------------------------------------------------------- */

			#cookie-dialog {

				position: fixed;
				right: var(--space-56);
				bottom: var(--space-56);
				z-index: 1000;
				width: min(42rem, calc(100vw - 7rem));
				box-sizing: border-box;
				padding: var(--space-32);
				color: var(--color-brand-content-high);
				background: var(--color-neutral-white);
				border-radius: var(--radius-600);
				box-shadow: 0 1rem 4rem rgb(4 7 11 / 18%);

				> header {
					font-size: 1.75rem;
					font-weight: var(--font-weight-semibold);
					line-height: 2.25rem;
				}

				> div {

					margin-top: var(--space-24);
					color: var(--color-neutral-tertiary);
					font-size: 1.125rem;
					line-height: 1.75rem;

					a {

						color: var(--color-brand-primary);
						text-decoration: none;

						&:hover {
							text-decoration: underline;
						}

					}

				}

				> footer {

					display: flex;
					align-items: center;
					gap: var(--space-16);
					margin-top: var(--space-32);

					.button {
						min-width: 10rem;
					}

					.decline {

						color: var(--color-neutral-tertiary);
						background: transparent;

						&:hover {
							color: var(--color-brand-content-high);
							background: var(--color-brand-surface-low);
						}

					}

				}

			}


		/* --------------------------------------------------------------------------
		   Authorization dialog
		-------------------------------------------------------------------------- */

			#authorization-dialog {

				> footer {

					display: flex;
					flex-direction: column;

					> a {

						--loader-size: var(--space-16);
						--loader-color: var(--color-brand-primary);
						--loader-gap: var(--space-8);
						display: inline-flex;
						align-items: center;
						align-self: flex-end;
						gap: var(--space-8);
						color: var(--color-neutral-content-medium-low);
						font-size: var(--font-size-body-m);
						line-height: var(--line-height-body-m);
						font-weight: var(--font-weight-regular);
						text-decoration: none;
						transition: color var(--transition-default);

						&.loading, &:hover {
							color: var(--color-brand-primary);
						}

					}

					> p {

						display: flex;
						align-items: center;
						gap: var(--space-16);
						margin: var(--space-40) var(--space-0) var(--space-16);
						color: var(--color-neutral-content-low);
						font-size: var(--font-size-body-s);
						line-height: var(--line-height-body-s);
						white-space: nowrap;

						&::before, &::after {
							content: '';
							flex: 1;
							height: var(--border-width);
							background: var(--color-neutral-border-divider);
						}

					}

					> nav {

						display: flex;
						gap: var(--space-10);
						justify-content: center;

						> a {

							display: flex;
							align-items: center;
							justify-content: center;


							width: 7.4375rem;

							height: var(--space-48);
							background: var(--color-neutral-surface-low);
							border-radius: var(--radius-400);
							transition: background-color var(--transition-default);

							&:hover {
								background: var(--color-neutral-surface-medium);
							}

							> svg {
								width: var(--space-24);
								height: var(--space-24);
							}

							&[data-provider="apple"] > svg {
								width: var(--space-20);
								color: var(--color-neutral-black);
							}

						}

					}

				}

			}


		/* --------------------------------------------------------------------------
		   Restore dialog
		-------------------------------------------------------------------------- */

			#restore-dialog {

				width: 35rem;

				> section {

					background: var(--color-neutral-white);

					.standard-form {

						label:has(.confirmation-code) {

							margin-bottom: var(--space-24);

							span {
								font-size: var(--font-size-body-m);
							}

						}

						.captcha {

							background: var(--color-brand-surface-lowest);
							width: 100%;

							.captcha-question strong {
								background: var(--color-neutral-surface-highest);
							}

							input {
								
							}

						}

					}

				}

			}


		/* --------------------------------------------------------------------------
		   Captcha
		-------------------------------------------------------------------------- */

			.captcha {

				width: fit-content;
				flex-direction: row !important;
				align-items: center;
				gap: var(--space-16) !important;
				box-sizing: border-box;
				padding: var(--space-16);
				background: var(--color-neutral-white);
				border-radius: var(--radius-400);

				.captcha-question {

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

					strong {
						display: flex;
						width: var(--space-56);
						height: var(--space-56);
						align-items: center;
						justify-content: center;
						color: var(--color-brand-content-high);
						background: var(--color-brand-surface-lowest);
						border-radius: var(--radius-400);
						font-size: var(--font-size-body-m);
						font-weight: var(--font-weight-semibold);
						line-height: var(--line-height-body-m);
					}

					> span {
						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);
						white-space: nowrap;
					}

					+ span {
						display: flex;
						flex-direction: column;
						gap: var(--space-8);
					}

				}

			}

	}