@import url(basic.css);
@import url(nav.css);

div#eaa {
	--color-red: #ff0000;
	--color-primary: #27749d;
	--color-primary-hover: #165981;
	--color-border-gray: #b2b2b2;
	--color-white: #fff;
	--color-notice-background: linear-gradient(220deg, #fff 0%, #d9f2ff 100%);
	--color-green: #00aa00;

	div.content {
		padding-top: 50px;

		h1 {
			font-size: 36px;
			font-weight: 700;
			line-height: 44px;
		}

		h2 {
			margin-top: 40px;
			font-size: 28px;
			font-weight: 700;
			line-height: 36px;
			user-select: none;
		}

		p {
			margin: 20px 0;
			font-size: 16px;
			line-height: 24px;
		}

		ul {
			margin: 20px 0 20px 20px;

			li {
				font-size: 16px;
				line-height: 24px;
				list-style-type: disc;

				a {
					overflow-wrap: break-word;
				}
			}
		}
	}

	div.form {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		align-items: start;
		grid-gap: 16px 30px;
		width: 634px;
		margin: 0 auto;
		padding-top: 50px;
		padding-bottom: 50px;

		div.input {
			display: grid;
		}

		div.input label {
			margin-bottom: 3px;
			font-size: 14px;
			line-height: 1;
			grid-area: 1/1/2/2;
		}

		div.input label span.star {
			color: var(--color-red);
		}

		div.input label span.star::after {
			content: ' ';
		}

		div.input input:not([type="hidden"], .hidden),
		div.input select,
		div.input textarea {
			display: block;
			width: 100%;
			height: 42px;
			padding-left: 10px;
			background-color: var(--color-white);
			border: 1px solid var(--color-border-gray);
			border-radius: 4px;
			box-sizing: border-box;
			font-size: 14px;
			line-height: 16px;
			resize: none;
			grid-area: 2/1/3/2;
		}

		div.input span.validate {
			display: none;
			position: static !important;
			color: var(--color-red);
			font-size: 14px;
			line-height: 1;
			grid-area: 3/1/4/2;
		}

		div.input span.validate:has(*),
		div.input span.validate:not(:empty) {
			margin-top: 6px;
		}

		div.input div.additionalElements {
			margin-top: 6px;
			grid-area: 4/1/5/2;
		}

		div.input.required:not(:has(span.star)) label::before {
			content: '* ';
			color: var(--color-red);
		}

		div.input.error span.validate,
		div.input.wrong span.validate {
			display: block;
		}

		div.input.error::after,
		div.input.wrong::after,
		div.input.success::after,
		div.input.correct::after {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 20px;
			height: 20px;
			margin: 10px;
			visibility: unset;
			border-radius: 100%;
			color: var(--color-white);
			font-size: 15px;
			line-height: 1;
			clear: unset;
			grid-area: 2/1/3/2;
			place-self: start end;
		}

		div.input:is(.error, .wrong)::after {
			content: '✘';
			background-color: var(--color-red);
		}

		div.input:is(.success, .correct)::after {
			content: '✔';
			background-color: var(--color-green);
		}

		div.input.error input:not([type="hidden"], .hidden),
		div.input.wrong input:not([type="hidden"], .hidden),
		div.input.success input:not([type="hidden"], .hidden),
		div.input.correct input:not([type="hidden"], .hidden) {
			padding-right: 32px;
		}

		div.input.error:has(.datepicker)::after,
		div.input.error:has(select)::after,
		div.input.wrong:has(.datepicker)::after,
		div.input.wrong:has(select)::after,
		div.input.success:has(.datepicker)::after,
		div.input.success:has(select)::after,
		div.input.correct:has(.datepicker)::after,
		div.input.correct:has(select)::after {
			margin-right: 35px;
		}

		div.input.phone div.prefixSelector {
			align-self: center;
			position: relative;
			inset: unset !important;
			width: max-content;
			border-right: 1px solid var(--color-border-gray);
			grid-area: 2/1/3/2;
		}

		div.input.phone div.prefixSelector div.options {
			display: unset !important;
		}

		div.input.phone div.prefixSelector.visible div.head::after {
			display: none;
		}

		div.input.phone div.prefixSelector.visible div.head::before {
			display: block;
		}

		div.input.phone div.prefixSelector.visible ul {
			display: flex;
			flex-direction: column;
		}

		div.input.phone div.prefixSelector div.head {
			position: relative;
			padding: 5px 23px 1px 12px;
			cursor: pointer;
		}

		div.input.phone div.prefixSelector div.head img {
			width: 23px;
		}

		div.input.phone div.prefixSelector div.head::after,
		div.input.phone div.prefixSelector div.head::before {
			content: ' ';
			display: block;
			position: absolute;
			top: 14px;
			left: 43px;
			width: 0;
			height: 0;
			border-top: 4px solid #555;
			border-right: 4px solid transparent;
			border-left: 4px solid transparent;
			box-sizing: border-box;
		}

		div.input.phone div.prefixSelector div.head::before {
			display: none;
			top: 15px;
			border-top: none;
			border-bottom: 4px solid #555;
		}

		div.input.phone div.prefixSelector ul {
			display: none;
			position: absolute;
			top: 37px;
			left: 0;
			z-index: 5;
			width: 315px;
			background: var(--color-white);
			border: 0 solid var(--color-border-gray);
			border-width: 0 1px 1px;
		}

		div.input.phone div.prefixSelector ul li {
			order: 2;
			overflow: hidden;
			position: relative;
			padding: 3px 10px;
			cursor: pointer;
			clear: both;
		}

		div.input.phone div.prefixSelector ul li:hover {
			background: #f4f4f4;
		}

		div.input.phone div.prefixSelector ul li img {
			float: left;
			width: 20px;
			margin-top: 2px;
		}

		div.input.phone div.prefixSelector ul li span {
			display: block;
			float: left;
			padding: 5px 0 0 10px;
			font-size: 14px;
		}

		div.input.phone div.prefixSelector ul li span em {
			display: inline-block;
			padding: 0 0 0 10px;
			color: #696969;
		}

		div.input.phone div.prefixSelector ul li.other {
			border-top: 1px solid var(--color-border-gray);
		}

		div.input.phone input {
			text-indent: 65px;
		}

		div.input.blink::before {
			content: '';
			display: block;
			position: relative;
			z-index: 1;
			width: 100%;
			height: 100%;
			border-radius: 4px;
			box-shadow: 0 0 0 2px var(--color-white), 0 0 0 6px var(--color-green);
			animation: blink .65s infinite forwards;
			grid-area: 2/1/3/2;
		}

		label.customCheckbox {
			display: flex;
			align-items: center;
			gap: 10px;
			font-size: 14px;
			line-height: 18px;
			grid-column: span 4;

			span.checkbox {
				margin-right: 10px;
			}

			span.star {
				color: var(--color-red);
			}

			input {
				width: 30px;
				height: 30px;
				min-width: 30px;
				min-height: 30px;
				appearance: none;
				-webkit-appearance: none;
				-moz-appearance: none;
				background: var(--color-white);
				border: 1px solid var(--color-border-gray);
				border-radius: 4px;
				cursor: pointer;
				display: flex;
				align-items: center;
				justify-content: center;
				transition: border-color 0.2s, background-color 0.2s;
				margin: 0;
			}

			input:checked {
				background: var(--color-primary);
				border-color: var(--color-primary);
			}

			input:checked::after {
				content: '';
				display: block;
				width: 8px;
				height: 14px;
				border: solid var(--color-white);
				border-width: 0 3px 3px 0;
				transform: rotate(45deg);
				margin-top: -5px;
			}

			&.error {
				input {
					border-color: var(--color-red);
				}

				input:checked {
					background: var(--color-red);
					border-color: var(--color-red);
				}
			}
		}

		div.input {
			textarea {
				width: 100%;
				height: 145px;
				padding: 10px;
				border: 1px solid var(--color-border-gray);
				border-radius: 3px;
				box-sizing: border-box;
				font-family: 'Roboto', sans-serif;
				font-size: 14px;
				line-height: 16px;
				resize: none;
			}

			&.place {
				grid-column: span 4;
			}

			&.requiredAccesibility {
				grid-column: span 4;
			}

			&.preferredAccessibility {
				grid-column: span 4;
			}

			&.name {
				grid-column: span 2;
			}

			&.surname {
				grid-column: span 2;
			}

			&.preferredContact {
				grid-column: span 4;
			}

			&.email {
				grid-column: span 4;
			}

			&.phone {
				grid-column: span 4;
			}

			&.postalCode {
				grid-column: span 1;
			}

			&.address {
				grid-column: span 3;
			}

			&.city {
				grid-column: span 4;
			}
		}

		&[data-method="Email"] {
			div.input {

				&.phone,
				&.postalCode,
				&.address,
				&.city {
					display: none;
				}
			}
		}

		&[data-method="Phone"] {
			div.input {

				&.postalCode,
				&.address,
				&.city {
					display: none;
				}

				&.email {
					label {
						&::before {
							content: '';
						}
					}
				}
			}
		}

		&[data-method="TraditionalMail"] {
			div.input {
				&.email {
					label {
						&::before {
							content: '';
						}
					}
				}

				&.phone {
					display: none;
				}
			}
		}
	}

	a.linkButton {
		display: block;
		margin-top: 50px;
		padding: 20px;
		background: var(--color-primary);
		color: var(--color-white);
		font-size: 24px;
		font-weight: 700;
		justify-self: center;
		grid-column: span 4 / span 4;
	}

	a.linkButton:hover {
		background: var(--color-primary-hover);
	}

	div.success {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 20px;
		padding: 20px 0;

		div.notice {
			padding: 20px;
			background: var(--color-notice-background);
			border: var(--color-primary) 1px solid;
			border-radius: 5px;
			font-size: 16px;
			line-height: 24px;
			text-align: center;
		}

		a {
			display: block;
			margin-top: 20px;
			padding: 10px;
			background: var(--color-primary);
			color: var(--color-white);
			font-size: 14px;
			font-weight: 700;
			line-height: 20px;
		}

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