// Events Form
// & = .knd-event

&__booking {
	border-radius: 20px;
	background-color: #f5fafe;
	padding: 50px;

	&-header {
		text-align: center;
		margin-bottom: 20px;

		h5 {
			margin-bottom: 10px;
		}

		p {
			font-size: var(--knd-font-size-base);
		}
	}

	.em.em-event-booking-form {
		.em-booking-section {
			margin-left: 0;
			margin-right: 0;
			padding: 0;
		}

		h3.em-booking-section-title {
			width: auto;
			background-color: #fff;
			color: initial;
			border: 0;
		}

		.em-tickets {
			margin: 0;
			width: 100%;
		}

		.em-booking-form-section-confirm {
			margin-top: 15px;
		}
	}

	.em-booking {
		max-width: 530px;
		margin: 0 auto;

		&-form-details {
			padding: 0;
			width: 100%;

			p {
				margin-bottom: 20px;

				label {
					font-size: var(--knd-font-size-base);
				}

				label[for] {
					display: block;
					width: 100%;
					margin-bottom: 8px;
				}
			}

			input.input,
			textarea,
			select {
				border-radius: 5px;
				border: 1px solid #8599A4;
				padding: 12px;
				font-weight: bold;
				font-family: inherit;

				&:focus {
					border-color: #183343;
				}
			}

			input.input,
			textarea {
				width: 100%;
			}

			.em-booking-submit {
				@extend .knd-button;
			}

		}
	}

	

	.em.pixelbones.input .em-booking-buttons .em-booking-submit {
		font-family: var(--knd-font-family-base);
		display: inline-block;
		font-style: normal;
		font-weight: 700;
		font-size: 17px;
		padding: 12px 20px;
		color: #fff;
		background: var(--knd-color-main);
		border: 2px solid var(--knd-color-main);
		border-radius: var(--knd-button-border-radius);
		text-transform: uppercase;
		line-height: 1;
		transition: color 0.3s, background 0.3s, border-color 0.3s, opacity 0.3s;
		white-space: nowrap;
	}
}


