/* Elba - Airport Shuttle - shuttle-map.css
   © Eric Reboux Software - Mac V.F. 01/12/2025 */

main
{
	display: flex;
	flex-direction: column;
	gap: 32px;

	iframe
	{
		display: none;
		box-shadow: 0 2px 30px #00000020;
	}

	article
	{
		display: flex;
		flex-direction: row;
		align-items: center;
		align-self: center;
		gap: 30px;

		&#shuttle_closed
		{
			display: none;
		}

		&#shuttle_open
		{
			display: flex;
		}

		section
		{
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 16px;

			h2
			{
				color: var(--hilton_green);
			}

			p
			{
				font-size: 18px;
			}

			&.container_img
			{
				position: relative;
				width: 100%;
				max-width: 1000px;
				margin: 0 auto;

				#map_img
				{
					/* height: 70vh; */
					width: 100%;
					height: auto;
					display: block;
				}

				.pin {
					position: absolute;
					width: 30px;
					height: 30px;
					background: red;
					border-radius: 50% 50% 50% 0;
					transform: translate(-50%, -100%) rotate(-45deg);
					border: 3px solid white;
					box-shadow: 0 1px 4px rgba(0,0,0,0.2);
					transition: 0.5s;
					z-index: 1;

					span
					{
						display: block;
						margin-left: -1px;
						margin-top: 3px;
						text-align: center;
						transform: rotate(45deg);
						font-size: 18px;
						font-weight: 600;
						color: white;
					}
				}

				.airport_title
				{
					position: absolute;
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 8px;
					transform: translate(-110%, -50%);
					color: var(--hilton_blue);
					font-size: 22px;
					font-weight: 600;
					letter-spacing: -0.5px;

					.icon
					{
						rotate: -45deg;
					}

					.next_shuttle
					{
						color: var(--hilton_blue);
						font-size: 16px;
						font-weight: 600;
						text-align: center;
					}
				}

				.hotel_title
				{
					position: absolute;
					display: flex;
					flex-direction: column;
					align-items: center;
					gap: 7px;
					width: 120px;
					transform: translate(-125%, -80%);

					img
					{
						width: inherit;
					}

					.text
					{
						text-transform: uppercase;
						font-size: 9px;
						color: var(--hilton_blue);
						scale: 0.95;
					}

					.next_shuttle
					{
						color: var(--hilton_blue);
						font-size: 16px;
						font-weight: 600;
						text-align: center;
					}
				}
			}

			#shuttle_legend
			{
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 16px;
				list-style-type: none;

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

					& > div
					{
						width: 30px;
						height: 30px;
						border-radius: 50% 50% 50% 0;
						transform: translate(0, -10%) rotate(-45deg);
						border: 3px solid white;
						box-shadow: 0 1px 4px rgba(0,0,0,0.2);

						span
						{
							display: block;
							margin-left: -1px;
							margin-top: 3px;
							text-align: center;
							transform: rotate(45deg);
							font-size: 18px;
							font-weight: 600;
							color: white;
						}
					}

					.title[disabled]
					{
						color: #ddd;
					}
				}
			}
		}
	}

	#shuttle_schedules
	{
		align-self: center;
		margin-left: auto;
		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;*/
		}
	}
}

@media only screen and (max-width: 1000px)
{
	main article
	{
		flex-direction: column;
	}
}

@media only screen and (max-width: 650px)
{
	main
	{
		.home_title
		{
			margin: 0 20px;
		}

		article
		{
			overflow-x: hidden;
			overflow-y: hidden;

			.container_img
			{
				margin-right: -70px!important;

				.airport_title
				{
					font-size: 20px!important;
				}

				.hotel_title
				{
					width: 100px!important;
				}
			}
		}
	}
}