/* Booking Form */
&.em-event-booking-form {
	width: 100%;
	position: relative;

	div#em-loading {
		background-color: #ffffff;
		opacity: 50%;
	}
	.em-booking-message {
		// Note that this is a span, allowing something like a DIV to enjoy JS functionality without the styling like in AJAXify
		padding: 15px !important;
		margin-bottom: 20px !important;
		border: 1px solid transparent !important;
		border-radius: 2.5px !important;
		display: block !important;
		color: #084298 !important;
		background-color: #cfe2ff !important;
		border-color: #b6d4fe !important;

		p { margin:10px 0px !important; padding:0px; }

		&.em-booking-message-error {
			color: #842029 !important;
			background-color: #f8d7da !important;
			border-color: #f5c2c7 !important;
		}

		&.em-booking-message-success {
			color: #0f5132 !important;
			background-color: #d1e7dd !important;
			border-color: #badbcc !important;
		}
	}

	.em-booking-form {
		border: 1px solid var(--main-border-color);

		.input-user-field, .input-group, .input-type {
			display: block !important; /* bootstrap and others interfere with this */
			margin-bottom: 25px !important;

			&.hidden {
				display:none !important;
			}
			input:not([type="checkbox"],[type="radio"]), select, .input-group, .input-group-checkboxes, button {
				margin-bottom : 0 !important;
			}
		}

		> section {
			margin: 0;
			padding: 0;
		}
	}

	&.em-hide-dynamic .em-booking-form[data-spaces="0"] section:not(.em-booking-form-section-tickets) {
		display : none;
		visibility : hidden;
	}

	h3.em-booking-section-title {
		width: auto;
		background-color: var(--main-bg);
		color: var(--main-h3-color);
		font-size: 24px !important;
		font-weight: bold;
		padding: 15px 15px;
		border-width: 1px 0 0 3px;
		border-style: solid;
		border-color: var(--main-border-color);
		margin: 0;
	}

	.em-button.em-booking-submit {
		width: 100% !important;
		padding: 15px;
		font-size: var(--font-size);
		font-weight: bold;

		&:disabled, &.disabled {
			opacity : 1 !important;
		}
	}

	.em-booking-section {
		position: relative;
		width: auto;
		float: none;
		padding: 20px 30px;
		margin: 0;

		&.em-booking-form-buttons {
			z-index: 100000000;
		}
	}

	/* Tickets Table */
	.em-tickets {
		border: 0;
		margin: 0 10px;
		padding: 0;
		width: calc(100% - 20px);

		&.widefat {
			background-color: transparent;
		}

		thead {
			position: absolute;
			left: -10000px;
			top: auto;
			width: 1px;
			height: 1px;
			overflow: hidden;
		}

		tr td, tr th {
			border: 0;
		}

		tr td {
			padding: 15px 15px;
			border: 0 !important;
		}

		tr td:first-child {
			padding-left: 30px;
		}

		tr td:last-child {
			padding-right: 30px;
		}

		tr th {
			background-color: var(--palette-1-bg);
			color: var(--palette-1-color);
			padding: 10px 15px;
		}

		tr {
			padding: 0 20px;
			border-top:1px solid #dedede;

			&:first-child {
				border-top: 0;
			}
		}

		/* Attendee Info i.e. Ticket Bookings */
		.em-ticket-bookings {
			&.hidden {
				display: none !important;
				visibility: hidden !important;
			}
			margin: 0 20px 20px;
			padding-bottom: 0;
			border: 0;
			text-align: left;

			td:last-child {
				text-align: left;
			}

			.em-ticket-booking {
				margin: 0 0 25px;
				padding: 20px 0 0;
				border-top: 1px solid #dedede;

				> strong {
					display: block;
					margin-bottom: 15px;
				}
				&:first-child {
					border-top: none;
				}
			}

			.em-ticket-booking-template {
				display: none;
				visibility: hidden;
			}
		}

		/* Attendee Info - Legacy */
		tr.em-attendee-details {
			border: 0;

			.em-attendee-fieldset {
				margin: 0 20px 20px;
			}

			.em-attendee-fieldset p.input-group {
				padding-bottom: 0;
			}

			.em-attendee-fields {
				margin: 0 0 25px;
				padding: 20px 0 0;
				border-top: 1px solid #dedede;

				> strong {
					display: block;
					margin-bottom: 15px;
				}
				&:first-child {
					border-top: none;
				}
			}
		}

		.em-bookings-ticket-table-spaces {
			width: 5%;

			select{
				width: calc(3ch + 30px) !important;
				padding: 5px 5px 5px 10px !important;
				margin: 0 !important;
			}
		}

	}

	.em-booking-form-details {
		.em-login-trigger {
			margin-bottom : 30px;
		}
	}

	/* Login Form */
	.em-login {
		margin: 10px 0 20px;
		padding: 0;
		border: 0;

		.em-login-trigger {
			font-style: italic;
		}

		.em-login-content {
			display: none;
			margin-bottom: 10px;

			p:first-of-type {
				margin-bottom: 20px;
				font-weight: bold;
			}
		}

		.em-login-actions {
			display: flex;
			align-items: normal;
			font-size: 15px;

			.em-login-meta {
				padding-left: 15px;
			}

			.em-login-rememberme {
				width: auto;
				margin-bottom: 8px;

				input {
					margin: 0 8px 0 0;
					padding: 0;
				}
			}

			.em-login-links a {
				text-decoration: none;

				a:hover {
					text-decoration: underline;
				}
			}
		}

		// mobile view
		&.size-small {
			.em-login-buttons {
				max-width: 30%;
				min-width: 120px;
				button {
					width: 100%;
				}
			}
			.em-login-links {
				span {
					display: none;
				}
				a {
					display: inline-block;
					width: 100%;
					margin-bottom: 5px;
				}
			}

		}
	}

	/* Temp Fixes for Pro */
	.em-booking-form-confirm {
		.em-booking-gateway-form {
			margin-bottom: 20px;
		}
		.em-bookings-form-gateway-expiry select {
			width : auto !important;
			min-width: 100px;
		}
	}
}
.em-booking-form-summary {

	&.em-booking-section {
		padding-bottom: 30px;

		&.no-booking {
			padding-bottom: 40px;
			.em-loading {
				background-position-y: calc(50% - 10px) !important;
			}
		}
	}

	.em-bs-section {
		display: grid;
		grid-template-rows: 1fr;
		grid-template-columns: none;
		grid-gap: 10px;

		&:not(:first-child) {
			margin-top: 20px;
			padding-top: 20px;
			border-top: 1px solid #dedede;
		}

		.em-bs-row {
			display: grid;
			grid-template-rows: none;
			grid-template-columns: auto max-content;
			grid-gap: 10px;
			align-items: center;
			justify-items: start;

			&.em-bs-row-item { // i.e. tickets, not subtotals/totals
				grid-template-columns: max-content auto max-content;
			}
		}

		.em-bs-subtitle {
			width: 100%;
			align-self: center;
			justify-self: start;
			justify-content: start;
			grid-column: 1 / -1;

			margin: 20px 14px 0 10px;
			padding-bottom: 5px;
			border-bottom: 1px solid #dedede;
			font-weight: 500;
		}

	}

	.em-loading {
		opacity: 85% !important;
		background-size: 55px !important;
	}

	.em-bs-section-total {
		font-weight: bold;
		font-size: 1.2rem;
		.em-bs-total-taxes-inc {
			display: block;
			font-size: 0.8rem;
			font-weight: normal;
			font-style: italic;
		}
	}

	.em-bs-cell-price {
		justify-self: end;
		justify-content: end;
		text-align: right;
	}
	.em-bs-cell-desc {
		.em-icon {
			font-size: 15px;
			line-height: 17px;
			width: 15px;
			height: 17px;
			background-size: 13px
		}
	}
	.em-bs-subsection {
		.em-bs-cell-desc {
			padding-left: 20px;
		}
	}
	.em-bs-qty-x {
		display: inline-block;
		padding-right: 5px;
	}

	.skeleton {
		.item {
			margin-bottom: 0;
		}
		.em-bs-row {
			grid-template-columns: 8fr 2fr;
			&.em-bs-row-item {
				grid-template-columns: 7fr 1fr 2fr;
			}
		}
	}
}

/* My Bookings Page */
.em-my-bookings-actions-content {
	a.em-bookings-rsvp-confirm {
		color : #198754 !important;
	}
	a.em-bookings-rsvp-cancel {
		color : #dc3545 !important;
	}
	a.em-bookings-rsvp-maybe {
		color : #6c757d !important;
	}
}