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

main
{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	gap: 40px;

	h2
	{
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 8px;
		width: 100%;
	}

	#toggle_directions
	{
		&.filter-switch
		{
			border: 2px solid var(--hilton_blue);
			border-radius: 30px;
			position: relative;
			display: flex;
			align-items: center;
			width: 320px;
			height: 48px;
			overflow: hidden;
		}

		&.filter-switch input
		{
			display: none;
		}

		&.filter-switch label
		{
			flex: 1;
			padding: 8px 0;
			text-align: center;
			cursor: pointer;
			border: none;
			border-radius: 30px;
			position: relative;
			overflow: hidden;
			z-index: 1;
			transition: all 0.1s;
			font-weight: 500;
			font-size: 18px;

			i.fa-arrow-right
			{
				font-size: 14px;
			}
		}

		&.filter-switch label:first-of-type
		{
			margin-left: 3px;
		}

		&.filter-switch label:last-of-type
		{
			margin-right: 3px;
		}

		&.filter-switch .background
		{
			position: absolute;
			width: calc(49% - 0.5px);
			height: 36.5px;
			background-color: var(--hilton_blue);
			top: 4px;
			left: 4px;
			border-radius: 30px;
			transition: left 0.4s cubic-bezier(0.175, 0.885, 0.32, 1);
		}

		#option2:checked ~ .background
		{
			left: 50%;
		}

		#option1:checked + label[for="option1"]
		{
			color: white;
			font-weight: bold;
		}

		#option2:checked + label[for="option2"]
		{
			color: white;
			font-weight: bold;
		}

		#option1:not(:checked) + label[for="option1"], #option2:not(:checked) + label[for="option2"]
		{
			color: var(--hilton_blue);
		}
	}

	#shuttle_station
	{
		display: block;
		text-align: center;
		color: var(--hilton_green);
	}

	article
	{
		display: flex;
		/*flex-direction: row;*/
		flex-direction: column-reverse;
		gap: 30px;
		padding: 30px;
		border: 1px solid var(--site_grey);
		border-radius: var(--border_radius);

		& > hr
		{
			width: 1px;
			height: initial;
		}

		section
		{
			display: flex;
			flex-direction: column;
			align-items: center;
			min-width: min(20vw, 300px);
			max-width: 50vw;
			font-size: 18px;
			text-align: center;

			&.left
			{
				display: flex;
				flex-direction: column;
				justify-content: space-evenly;
			}

			h2
			{
				margin-bottom: 16px;
				color: var(--hilton_green);
			}

			h3
			{
				margin-bottom: 8px;
				color: var(--hilton_green);
			}

			h4
			{
				margin-bottom: 8px;
			}

			strong
			{
				font-weight: 500;
			}

			table
			{
				background: repeating-linear-gradient(45deg, #f8f8f8, #f8f8f8 20px, #fff 20px, #fff 40px);
				border-collapse: collapse;
				border: none;
				font-size: 20px;
				font-weight: 400;

				tr:not(:last-child)
				{
					border-bottom: 1px solid var(--site_grey);
				}

				tr:has(td.closest)
				{
					/*background-color: color-mix(in srgb, var(--hilton_turquoise), transparent 90%);*/
				}

				td
				{
					width: 80px;
					height: 40px;
					background: white;
					text-align: center;

					&.no_service
					{
						background: none;

						.text_pause
						{
							position: relative;
							rotate: -45deg;
							text-shadow: 2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff, 1px 1px #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff;
							font-size: 20px;
							color: #888;
						}

						.text_pause.even
						{
							translate: 0 -20px;
						}
					}

					&.closest
					{
						background-color: color-mix(in srgb, var(--hilton_turquoise), white 90%);
						font-size: 22px;
						font-weight: 600;
						color: var(--hilton_green);
					}
				}
			}
		}
	}

	h3
	{
		display: flex;
		align-items: center;
		gap: 16px;

		i[class^='fa-']
		{
			margin-right: 6px;
			font-size: 80%;
		}
	}

	#shuttle_map
	{
		align-self: center;
		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;
		}*/
	}
}


@media (max-width: 800px)
{
	main
	{
		padding: 20px 20px 40px 20px;
		gap: 20px;

		h2
		{

		}
	}

	main article
	{
		flex-direction: column-reverse;
		gap: 20px;
		padding: 10px 0 0 0;
		border: none;

		section
		{
			max-width: 100vw;
		}

		& > hr
		{
			width: 100%;
			height: 1px;
		}
	}
}

@media (max-width: 650px)
{
	main
	{
		h2
		{
			gap: 8px;
		}

		#toggle_directions
		{
			align-self: center;
		}

		& > h4
		{
			margin-top: 8px;
		}
	}
}