.guidbook-form {
	--c-red: #dc3535;
	--c-pink: #ffcccc;

	inline-size: min(100%, 1090px);
	margin-inline: auto;
	padding-block: min(5vw, 50px);
	padding-inline: min(5vw, 30px);

	p {
		margin-bottom: 0;
	}

	.guidbook-form__headline {
		color: initial;
		border: initial;
		border-block: double 3px;
		padding-block: 0.3em 0.4em;
		text-align: center;
		margin-bottom: 0;
		font-size: clamp(18px, 3.2vw, 30px);
		line-height: 1.4;
		margin-inline: auto;
	}

	.personal-input {
		margin-block-start: min(10vw,60px);
	}

	.box {
		container-type: inline-size;
		background-color: #f4f4f4;
		padding: min(5vw, 45px);
		border-radius: min(20px, 5vw);
		max-width: 1200px;
		margin-inline: auto;
		box-shadow: 0 0 5px rgba(0,0,0,.2);
		display: grid;
		gap: min(10vw,54px);
	}

	.form {
		display: grid;
		gap: 25px 0;

		@media (width > 767px) {
			grid-template-columns: auto 1fr;
		}

		.form__row {
			display: grid;
			gap: 10px 30px;

			@media (width > 767px) {
				grid-template-columns: subgrid;
				grid-column: span 2;
				align-items: baseline;
			}
		}

		.form__labels {
			display: grid;
			grid-template-columns: auto 1fr;
			align-items: center;
			gap: 0 35px;
			font-weight: 700;
		}

		.form__require {
			justify-self: end;
			font-size: 0.88em;
			background-color: var(--c-red);
			color: white;
			padding: 0.1em 0.831em;
		}

		.form__about {
			position: relative;
		}

		.form__example {
			position: absolute;
			height: 0;
			overflow: hidden;
		}

		:is(input[type="text"], input[type="email"], input[type="tel"]) {
			&:user-invalid {
				background-color: var(--c-pink);
			}
		}
	}

	.agreement {
		display: grid;
		grid-template-columns: auto auto;
		justify-content: center;
		align-items: baseline;
		line-height: 1.4;
		gap: 0 5px;
		font-weight: 600;
		margin-top: min(40px, 7vw);
		letter-spacing: .05em;
	}

	.submits {
		display: grid;
		margin-block-start: 30px;

		button {
			font-size: clamp(18px, 2.5vw, 30px);
			border-radius: 100vmax;
			background-color: #35a7dc;
			color: white;
			font-weight: 700;
			border: 2px solid #35a7dc;
			inline-size: min(100%,720px);
			display: grid;
			gap: 0 10px;
			align-items: center;
			justify-content: center;
			grid-template-columns: auto auto;
			line-height: 1.3;
			padding: .65em 1em;
			transition: background-color .3s, color .3s;
			word-break: auto-phrase;
			font-family: inherit;
			margin-inline: auto;

			&:disabled {
				background-color: #909090;
				border-color: #909090;
			}
			
			&:not(:disabled) {
				cursor: pointer;
			}

			> span {
				&:first-child {
					font-size: 0.66em;
					color: #35a7dc;
					background-color: white;
					padding: 0.22em 0.26em;
					transition:
						background-color 0.3s,
						color 0.3s;
				}
			}

			&:not(:disabled):is(:hover, :focus) {
				background-color: white;
				color: #35a7dc;

				> span {
					&:first-child {
						background-color: #35a7dc;
						color: white;
					}
				}
			}

			&:not(:disabled):is(:focus-visible) {
				outline: 2px solid black;
				outline-offset: 2px;
			}
		}
	}
}