/* Elba - Airport Shuttle - store.css
   © Eric Reboux Software - Mac V.F. 02/10/2025 */

main > h2
{
	display: none;
	/*margin-bottom: 32px;*/
}

.main_content
{
	display: flex;
	align-items: flex-start;
	gap: 40px;

	aside
	{
		display: flex;
		flex-direction: column;
		gap: 40px;
		width: 40%;

		#shuttle_map
		{
			align-self: center;
			width: 100%;
			padding: 8px;
			font-size: 24px;
			font-weight: 500;
			background: var(--hilton_teal);
			border: 2px solid var(--hilton_teal);
			border-radius: 4px;
			text-align: center;
			color: white;
			cursor: pointer;

			i.fa-regular
			{
				margin-right: 8px;
			}
		}

		#shuttle_schedules
		{
			align-self: center;
			width: 100%;
			padding: 8px;
			font-size: 24px;
			font-weight: 500;
			background: var(--hilton_turquoise);
			border: 2px solid var(--hilton_turquoise);
			border-radius: 4px;
			text-align: center;
			color: white;
			cursor: pointer;

			i.fa-regular
			{
				margin-right: 8px;
			}
		}

		#store_informations
		{
			padding: 32px;
			background: var(--hilton_blue);
			color: white;

			a
			{
				color: white;
			}

			h3
			{
				font-family: var(--hilton_font_serif);
				font-size: 22px;
				font-weight: 500;
				letter-spacing: -0.5pt;
				margin-bottom: 16px;
			}
		}
	}

	ul
	{
		padding-inline-start: 20px;
		font-size: 18px;
		line-height: 20px;

		ul
		{
			margin-top: 8px;
			padding-inline-start: 24px;
			list-style-type: square;
		}

		ul li:not(:last-child)
		{
			margin-bottom: 4px;
		}

		li:not(:last-child)
		{
			margin-bottom: 12px;
		}
	}

	.container
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 40px;
		width: 60%;

		form
		{
			display: flex;
			flex-direction: column;
			gap: 16px;
			padding: 32px;
			border: 1px solid var(--site_grey);
			border-radius: var(--border_radius);
			font-size: 18px;

			#toggle_directions
			{
				display: flex;
				align-items: center;
				font-size: 24px;
				gap: 16px;
				white-space: nowrap;

				.toggle
				{
					display: flex;
					align-items: center;
					gap: 8px;

					.labels
					{
						display: flex;
						flex-direction: column;
						font-size: 18px;
						font-weight: 600;
						gap: 4px;
						cursor: pointer;
						letter-spacing: 0;
					}

					.switch {
					position: relative;
					display: inline-block;
					/* width: 60px;
					height: 30px;*/
					margin-top: 4px;
					width: 30px;
					height: 52px;
					}

					.switch input {
					opacity: 0;
					width: 0;
					height: 0;
					}

					.switch .label
					{
						font-size: 0px;
					}

					.slider {
					position: absolute;
					cursor: pointer;
					top: 4px;
					left: 4px;
					right: 4px;
					bottom: 4px;
					background-color: var(--hilton_blue);
					transition: .2s;
					}

					.slider:before {
					position: absolute;
					font-family: "Font Awesome 6 Pro";
					font-size: 17px;
					text-align: center;
					line-height: 31px;
					content: "\f0ec";
					height: 30px;
					width: 30px;
					left: -6px;
					bottom: -6px;
					background-color: white;
					border: 2px solid var(--hilton_blue);
					color: var(--hilton_blue);
					transition: .2s;
					}

					input:checked + .slider {
					background-color: var(--hilton_blue);
					}

					input:focus + .slider {
					box-shadow: 0 0 1px var(--hilton_blue);
					}

					input:not(:checked) + .slider:before {
						content: "\f061";
					/*transform: translateX(32px);*/
					transform: translateY(-24px);
					}

					.slider.round {
					border-radius: 34px;
					}

					.slider.round:before {
					border-radius: 50%;
					}
				}
			}

			#second_part
			{
				display: flex;
				flex-direction: column;
				gap: 16px;
				height: 0px;
				opacity: 0;
				transform: scaleY(0);
				transform-origin: top;
				transition: opacity 0.25s ease-out, height 0.25s ease-out, transform 0.25s ease-out;;
			}

			#second_part.open
			{
				height: initial;
				transform: scaleY(1);
				opacity: 1;
			}

			h2
			{
				display: flex;
				align-items: center;
				gap: 16px;
				padding-bottom: 16px;
				border-bottom: 1px solid var(--site_grey);

				i[class^='fa-']
				{
					margin-right: 8px;
					font-size: 20px;
				}
			}

			h2 svg
			{
				width: 32px;
			}

			.total
			{
				display: flex;
				flex-direction: column;
				gap: 8px;
				margin: 20px 0;
				width: 100%;

				& > div
				{
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: inherit;
					height: 32px;
				}

				#discount
				{
					color: var(--hilton_green);
				}

				#grand_total
				{
					padding: 0;
					border: none;
					color: var(--hilton_blue);
				}

				.tax_row
				{
					color: #aaa;
				}
			}

			fieldset
			{
				display: flex;
				align-items: center;
				gap: 8px;
				margin: 16px 0;
				padding: 0;
				border: none;
			}

			.tickets_table span, .total span
			{
				font-weight: 500;
			}

			.tickets_table
			{
				display: grid;
				grid-template-columns: 60% 20% 20%;
				grid-template-rows: auto auto;
				width: 100%;
				/*margin: 24px 0;*/
				padding: 0;

				& > *
				{
					padding: 8px 0;
					text-align: center;
					/*font-size: clamp(14px, 2.5vw, 16px);*/
				}

				& > *:nth-child(3n-2)
				{
					text-align: left;
				}

				& > *:nth-child(3n-1)
				{
					display: flex;
					justify-content: center;
					align-items: center;
					gap: 12px;
				}

				& > *:nth-child(3n)
				{
					text-align: right;
				}
			}

			button.rounded_full
			{
				display: inline-block;
				appearance: none;
				width: 24px;
				height: 24px;
				padding: 0;
				background: none;
				border-style: solid;
				border-width: 0!important;
				border-radius: 9999px;
				color: var(--hilton_blue);
				cursor: pointer;

				&:disabled
				{
					opacity: 1.0;
					cursor: not-allowed;
				}

				.stroke_primary
				{
					display: block;
					vertical-align: middle;
					width: 24px;
					height: 24px;
					stroke: var(--hilton_blue);
					color: var(--hilton_blue);
				}

				&:disabled .stroke_primary
				{
					stroke: var(--site_grey);
					color: var(--site_grey);
				}
			}

			.value
			{
				width: 20px;
				text-align: center;
				border: none;
			}

			#status
			{
				align-self: center;
				font-weight: 500;
			}

			#open_vouchers
			{
				margin-left: auto;
				font-size: 18px;

				i.fa-regular
				{
					margin-right: 8px;
				}
			}

			.customer
			{
				display: flex;
				flex-wrap: wrap;
				gap: 16px;
				margin-bottom: 28px;

				label
				{
					display: flex;
					flex-direction: column;
					flex-grow: 1;
					gap: 4px;
					min-width: 256px;
				}
			}

			.payment
			{
				display: flex;
				flex-direction: column;
				gap: 24px;

				ul
				{
					padding: 0;
					list-style-type: none;

					li .box
					{
						display: none;
						margin: 16px 0 32px 32px;
					}
				}

				.card label
				{
					display: flex;
					flex-direction: column;
					flex-grow: 1;
					gap: 4px;
					min-width: 256px;
				}

				.card_info
				{
					display: flex;
					flex-wrap: wrap;
					gap: 16px;
					margin-bottom: 16px;

					.card_number
					{
						width: 100%;
					}
				}

				.card .card_number_group
				{
					position: relative;
				}

				.card .card_number_group #card_number
				{
					width: 100%;
				}

				.card .card_icons
				{
					position: absolute;
					display: flex;
					justify-content: flex-end;
					top: 0;
					right: 8px;
					height: 100%;
					outline: none;
					overflow: hidden;
					pointer-events: none;
					z-index: 2;
				}

				.card .card_icons .all_cards
				{
					display: flex;
					justify-content: flex-end;
					align-items: center;
					gap: 4px;
				}

				.card .card_icons .brand_icon
				{
					display: flex;
				}

				.card .card_icons svg
				{
					width: 32px;
				}

				.card .card_icons .error_card
				{
					display: none;
				}

				.card .cvc_group
				{
					position: relative;
				}

				.card .cvc_group input
				{
					width: 100%;
				}

				.card .cvc_group .cvc_icons
				{
					position: absolute;
					display: flex;
					justify-content: flex-end;
					top: 0;
					right: 8px;
					height: 100%;
					outline: none;
					overflow: hidden;
					pointer-events: none;
					z-index: 2;
				}

				.card .cvc_group .cvc_icons > div, .card .cvc_group .cvc_icons .cvc_icon
				{
					display: flex;
				}

				.card .cvc_group .cvc_icon svg
				{
					width: 32px;
				}
			}

			.conditions_check
			{
				display: flex;
				align-items: flex-start;

				input[type="checkbox"]
				{
					min-width: 22px;
					margin: 0 6px 0 0;
				}

				#conditions_link
				{
					text-decoration: underline;
				}
			}
		}

		#shuttle_sendback_invoice
		{
			padding: 10px;
			background: #777;
			border: #777;
			color: white;
			font-size: 24px;

			i.fa-regular
			{
				margin-right: 8px;
			}
		}
	}

	#modal_vouchers
	{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;

		&.active
		{
			display: flex;
			align-items: center;
			justify-content:  center;

			.modal_content
			{
				transform: scale(1);
			}
		}

		.modal_content
		{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 20px;
			background: white;
			padding: 20px;
			border-radius: 8px;
			max-width: min(550px, 80vw);
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			max-height: 90vh;
			transition: transform 0.3s ease;

			#reader
			{
				width: 100%;
				max-width: 90vw;
			}

			#vouchers_list
			{
				display: flex;
				flex-direction: column;
				gap: 10px;
				width: 100%;
				padding: 4px 0;
				overflow-y: auto;

				div[id^="input-group-"]
				{
					position: relative;
					display: flex;
					align-items: center;
					gap: 8px;

					input
					{
						flex-grow: 1;
					}

					.input_error
					{
						position: absolute;
						top: 12px;
						right: 44px;
						color: red;
					}

					button.rounded_full
					{
						display: inline-block;
						appearance: none;
						width: 24px;
						height: 24px;
						padding: 0;
						background: none;
						border-style: solid;
						border-width: 0!important;
						border-radius: 9999px;
						color: var(--hilton_blue);
						cursor: pointer;

						&:disabled
						{
							cursor: not-allowed;
						}

						.stroke_primary
						{
							display: block;
							vertical-align: middle;
							width: 24px;
							height: 24px;
							stroke: var(--hilton_blue);
							color: var(--hilton_blue);
						}

						&:disabled .stroke_primary
						{
							stroke: var(--site_grey);
							color: var(--site_grey);
						}
					}
				}
			}

			.buttons
			{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				gap: 10px;
				width: 100%;
			}
		}
	}

	#modal_sendback
	{
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1000;

		&.active
		{
			display: flex;
			align-items: center;
			justify-content:  center;

			.modal_content
			{
				transform: scale(1);
			}
		}

		.modal_content
		{
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			gap: 20px;
			background: white;
			padding: 20px;
			border-radius: 8px;
			max-width: min(550px, 80vw);
			box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
			max-height: 90vh;
			transition: transform 0.3s ease;

			#email_sendback
			{
				width: 100%;
			}

			.buttons
			{
				display: flex;
				justify-content: flex-end;
				align-items: center;
				gap: 10px;
				width: 100%;
			}
		}
	}
}

#reader
{
	button
	{
		padding: 4px;
	}

	#reader__dashboard_section_csr > *
	{
		display: block;
		margin-bottom: 8px;
	}

	#reader__dashboard_section_drop
	{
		width: 90%!important;
	}

	#html5-qrcode-anchor-scan-type-change
	{
		margin-top: 8px;
	}

	label[for="html5-qrcode-private-filescan-input"]
	{
		margin-bottom: 8px;
	}

	#html5-qrcode-select-camera
	{
		margin-left: 8px;
	}
}


@media (max-width: 1140px)
{
	.main_content form > h2
	{
		padding-bottom: 28px;
	}
}

@media (max-width: 1000px)
{
	.main_content
	{
		gap: 20px;
	}

	.main_content aside, .main_content .container
	{
		width: 100%;
	}

	.main_content aside
	{
		gap: 20px;
	}

	.main_content .container #shuttle_sendback_invoice
	{
		width: 100%;
	}
}

@media (max-width: 750px)
{
	.main_content form .tickets_table
	{
		display: flex!important;
		flex-wrap: wrap;
		justify-content: space-between;

		> span
		{
			width: 100%;
		}
	}

	.main_content form > h2
	{
		flex-direction: column;
		gap: 20px;

		#toggle_directions
		{
			justify-content: space-between;
			width: 100%;
		}

		#toggle_directions .toggle .switch
		{
			height: 62px;
		}

		#toggle_directions .toggle .labels
		{
			gap: 10px;
		}

		#toggle_directions .toggle .slider:before
		{
			bottom: -2px;
		}

		#toggle_directions .toggle input:not(:checked) + .slider:before
		{
			transform: translateY(-28px);
		}

		#open_vouchers
		{
			margin: 0;
		}
	}
}

@media (max-width: 650px)
{
	.main_content aside #shuttle_map, .main_content aside #shuttle_schedules, .main_content .container #shuttle_sendback_invoice
	{
		width: 90%;
	}
}

@media (max-width: 600px)
{
	.main_content #modal_vouchers .modal_content
	{
		max-width: 100%;
		border-radius: 0;

		#reader
		{
			max-width: 100%;
		}
	}
}

@media (max-width: 400px)
{
	.main_content aside #shuttle_map, .main_content aside #shuttle_schedules, .main_content .container #shuttle_sendback_invoice
	{
		font-size: 22px;
	}
}