/* Elba - Airport Shuttle - style.css
   © Eric Reboux Software - Mac V.F. 25/09/2025 */

@import "normalize.css";
@import "fonts.css";

* {
	--hilton_blue: #002F61;
	--hilton_off_white: #F0E9E6;
	--hilton_turquoise: #007293;
	--hilton_teal: #06937E;
	--hilton_green: #6BB030;
	--link_color: var(--hilton_blue);
	--link_selected_color: #00264E;
	--secondary_color: #06937E;
	--secondary_selected_color: #036E5A;
	--site_grey: #e3e3e3;
	--border_radius: 8px;
	--border_button_radius: 4px;
	--hilton_font_serif: "Hilton Serif",Georgia, "Times New Roman", serif;
	--hilton_font_sans: "Hilton Sans",system-ui,-apple-system,BlinkMacSystemFont,Inter,Arial,"Helvetica Neue","Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	--page_width: 1400px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html, body
{
	height: 100%;
	margin: 0;
	padding: 0;
}

body
{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 100vh;
	font-family: var(--hilton_font_sans);
}

body > *
{
	width: 100%;
}

h1
{
	font-family: var(--hilton_font_serif);
	font-weight: 500;
	letter-spacing: -0.5pt;
	scale: 0.9;
}

h2
{
	font-size: 27px;
}

h2, h3, h4, h5, h6
{
	font-family: var(--hilton_font_sans);
	font-weight: 500;
	letter-spacing: -0.5pt;
}

hr
{
	width: 100%;
	height: 1px;
	background: var(--site_grey);
	border: 0;
}

p
{
	margin-bottom: 8px;
}

a
{
	text-decoration: none;
	color: var(--hilton_blue);
	transition: 0.2s ease;
}

a:hover
{
	color: var(--link_selected_color);
	transition: 0.1s ease;
}

button.primary, button.secondary
{
	appearance: none;
	padding: 8px;
	border: 1px solid var(--link_color);
	border-radius: 4px;
	cursor: pointer;
}

button.primary
{
	background: var(--link_color);
	color: white;
}

button.secondary
{
	background: white;
	color: var(--link_color);
}

button.disabled
{
	opacity: 0.3;
	pointer-events: none;
}

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

	button
	{
		padding: 6px 7px;
		border-color: #777;
		color: #777;
		font-size: 15px;
	}

	button:hover
	{
		background: #777;
		color: white;
	}

	button a
	{
		color: #777;
		font-weight: 400;
		transition: none;
	}

	button:hover a
	{
		color: white;
		transition: none;
	}

	button.open, button.open a
	{
		background: #777;
		color: white;
	}

	.buttons_group
	{
		display: flex;

		&>button:not(:last-child):not(.dropdown)
		{
			border-top-right-radius: 0;
			border-bottom-right-radius: 0;
		}

		&>button:not(:first-child):not(.dropdown)
		{
			margin-left: -1px;
			border-top-left-radius: 0;
			border-bottom-left-radius: 0;
		}
	}
}

input[type="text"], input[type="email"], input[type="password"], input[type="time"], input[type="url"], input[type="number"]
{
	appearance: none;
	padding: 6px 12px;
	line-height: 1.5;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="number"]:focus
{
	border-color: #ccc;
	box-shadow: 0 0 2px 2px var(--hilton_blue);
	outline: 0;
}

textarea
{
	appearance: none;
	padding: 6px 12px;
	line-height: 1.5;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

textarea:focus
{
	border-color: #ccc;
	box-shadow: 0 0 2px 2px var(--hilton_blue);
	outline: 0;
}

input[type="radio"]
{
	appearance: none;
	display: inline-block;
	margin: -4px 4px 0 0;
	padding: 0;
	height: 22px;
	width: 22px;
	vertical-align: middle;
	border: 1px solid var(--hilton_blue);
	background-color: #fff;
	border-radius: 9999px;
	cursor: pointer;
}

input[type="radio"]:checked
{
	background-color: var(--hilton_blue);
	color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E");
}

input[type="checkbox"]
{
	appearance: none;
	display: inline-block;
	margin: -4px 6px 0 0;
	padding: 0;
	height: 22px;
	width: 22px;
	vertical-align: middle;
	border: 1px solid var(--hilton_blue);
	background-color: #fff;
	cursor: pointer;
}

input[type="checkbox"]:checked
{
	background-color: var(--hilton_blue);
	color: #fff;
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

label
{
	cursor: pointer;
}

.custom_select
{
	position: relative;
	width: fit-content;
}

.custom_select:after
{
	content: "";
	position: absolute;
	display: block;
	top: 1px;
	right: 0;
	width: 36px;
	height: 100%;
	/* height: inherit; */
	background-image: url('data:image/svg+xml;utf8,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none"><path d="M12.7969 15.5508C13.1367 15.5508 13.4531 15.3984 13.6875 15.1406L25.2422 3.10547C25.4648 2.88281 25.5938 2.60156 25.5938 2.27344C25.5938 1.61719 25.0898 1.11328 24.4219 1.11328C24.1172 1.11328 23.8125 1.23047 23.5898 1.44141L12.082 13.418L13.5234 13.418L1.99219 1.44141C1.78125 1.23047 1.48828 1.11328 1.17188 1.11328C0.503906 1.11328 0 1.61719 0 2.27344C0 2.60156 0.140625 2.88281 0.351562 3.11719L11.9062 15.1523C12.1641 15.3984 12.457 15.5508 12.7969 15.5508Z" fill="currentColor"></path></svg>');
	background-size: 26px 19px;
	background-position: center;
	background-repeat: no-repeat;
	scale: 58%;
	pointer-events: none;
}

.custom_select select
{
	appearance: none;
	padding: 6px 12px;
	line-height: 1.5;
	background: #fff;
	border: 1px solid #ddd;
	border-radius: 4px;
	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.dropdown
{
	display: flex;
	position: relative;
	align-items: center;
	gap: 4px;
	padding: 8px 16px;
	font-weight: 500;

	& > a::after
	{
		content: "\f078";
		display: inline-block;
		font-family: "Font Awesome 6 Pro";
		font-size: 80%;
		font-weight: 400;
		margin-left: 0.3em;
		line-height: 1;
	}

	.dropdown_items
	{
		position: absolute;
		top: calc(100% + 8px);
		padding: 8px 0;
		list-style: none;
		white-space: nowrap;
		border: 1px solid #0003;
		background: #fffd;
		backdrop-filter: blur(4px);
		box-shadow: 0 4px 16px #0003;
		border-radius: 8px;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
		z-index: 10;

		&.bottom
		{
			top: initial;
			bottom: 0;
		}

		&.show
		{
			opacity: 1;
			visibility: visible;
			transition: opacity 0.1s ease, visibility 0.1s ease;
		}

		li
		{
			display: flex;
			align-items: center;
			padding: 8px 16px;
			color: #000;
			cursor: pointer;
			transition: background 0.1s ease;
		}

		li:has(hr)
		{
			padding: 8px 0;
		}

		li:not(:has(hr)):hover
		{
			background-color: #ddd;
		}
	}
}

header
{
	border-bottom: 1px solid var(--site_grey);
}

#top_bar
{
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 48px;
	padding: 0 40px;
	background: var(--hilton_off_white);
	color: #000;

	a
	{
		color: inherit;
		transition: color 0.1s ease;
	}

	a:hover
	{
		color: #000a;
		transition: color 0.2s ease;
	}

	.left
	{
		/*width: 172px;*/
	}

	.center
	{
		flex-grow: 1;
		text-align: center;
	}

	.center .phone, .center .phone a
	{

	}

	.center .phone a
	{
		font-weight: 600;
		white-space: nowrap;
	}

	.center .phone a svg
	{
		margin-bottom: -5px;
	}

	.right
	{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
}

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

	.language_label
	{
		display: none;
	}

	.language_select
	{
		position: relative;
		display: inline-flex;
		align-items: center;
		column-gap: 4px;

		&:hover
		{
			color: #000a;
			cursor: pointer;
		}
	}

	.selected_option
	{
		display: inline-flex;
		align-items: center;
		font-weight: 600;

		img
		{
			margin-right: 10px;
			width: 24px;
			height: 24px;
		}
	}

	.language_down_arrow
	{
		width: 16px;
		height: 16px;

		svg
		{
			width: 32px;
			height: 16px;
		}
	}

	.options
	{
		position: absolute;
		top: 28px;
		right: -4px;
		padding: 0;
		margin: 0;
		list-style: none;
		white-space: nowrap;
		border: 1px solid #0003;
		background: #fffd;
		backdrop-filter: blur(4px);
		box-shadow: 0 4px 16px #0003;
		border-radius: 8px;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
		z-index: 10;

		&.open
		{
			opacity: 1;
			visibility: visible;
			transition: opacity 0.1s ease, visibility 0.1s ease;
		}

		li
		{
			display: flex;
			align-items: center;
			padding: 12px;
			color: #000;
			cursor: pointer;
			transition: background 0.1s ease;

			&:first-of-type
			{
				border-radius: 8px 8px 0 0;
			}

			&:last-of-type
			{
				border-radius: 0 0 8px 8px;
			}

			&:hover
			{
				background-color: #ddd;
			}

			img
			{
				margin-right: 10px;
				width: 24px;
				height: 24px;
				filter: drop-shadow(0 1px 4px #0004);
			}
		}
	}
}

#title_bar
{
	display: flex;
	justify-content: space-between;
	align-items: center;
	/*max-width: var(--page_width);*/
	margin: 0 auto;
	padding: 30px 30px;

	h2
	{
		margin: 0 30px 0 0;
		font-family: var(--hilton_font_sans);
		letter-spacing: -0.5px;
		font-size: 30px;
		font-weight: 400;
		text-align: center;
		color: #757575;
	}

	.mobile_menu
	{
		display: none;
		position: relative;

		ul
		{
			position: absolute;
			top: 64px;
			left: -8px;
			padding: 0;
			margin: 0;
			list-style: none;
			white-space: nowrap;
			border: 1px solid #0003;
			background: #fffd;
			backdrop-filter: blur(4px);
			box-shadow: 0 4px 16px #0003;
			border-radius: 8px;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.2s ease-out, visibility 0.2s ease-out;
			z-index: 10;

			&.open
			{
				opacity: 1;
				visibility: visible;
				transition: opacity 0.1s ease, visibility 0.1s ease;
			}

			li
			{
				color: #fff;
				transition: background 0.2s ease-out;

				&:hover
				{
					background-color: #ddd;
					transition: background 0.1s ease;
				}

				a
				{
					display: inline-block;
					padding: 12px;
					color: #000;
					font-size: 20px;

					&:hover
					{
						color: #000;
					}
				}
			}
		}

		.menu_icon:hover
		{
			cursor: pointer;
		}
	}
}

.site_logo
{
	margin: 0;

	a
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 12px;
	}

	img
	{
		width: 180px;
	}

	span
	{
		margin: 0;
		letter-spacing: 0;
		font-family: var(--hilton_font_sans);
		font-size: 16px;
		text-transform: uppercase;
		color: var(--hilton_blue);
		white-space: nowrap;
	}
}

nav.desktop_menu
{
	background: linear-gradient(135deg, #104c97, #395f76);
	color: #fff:

	ul
	{
		display: flex;
		max-width: var(--page_width);
		margin: 0 auto;
		padding: 0 24px;
		list-style-type: none;
	}

	li
	{

	}

	a
	{
		display: inline-block;
		padding: 16px;
		color: #fff;
		transition: 0.2s ease;

		&.selected
		{
			font-weight: 600;
		}

		&:hover
		{
			background: linear-gradient(320deg, #1157af, #1963c0);
			color: #fff;
			transition: 0.1s ease;
		}
	}
}

main
{
	flex: 1;
	max-width: var(--page_width);
	margin: 0 auto;
	padding: 40px;
}

#bottom_bar
{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	min-height: 48px;
	padding: 0 40px;
	background: var(--hilton_off_white);
	color: #000;

	a
	{
		color: inherit;
		transition: color 0.1s ease;

		&:hover
		{
			color: #000a;
			transition: color 0.2s ease;
		}
	}

	.phone a
	{
		font-weight: 600;
		white-space: nowrap;

		svg
		{
			margin-bottom: -5px;
		}
	}
}

footer
{
	border-top: 1px solid var(--site_grey);

	.content
	{
		display: flex;
		justify-content: space-between;
		align-items: center;
		gap: 20px;
		max-width: var(--page_width);
		margin: 0 auto;
		padding: 20px 40px;

		.footer_menu
		{
			display: flex;
			justify-content: flex-end;
			align-items: center;
			flex-wrap: wrap;
			gap: 4px;
			list-style-type: none;
			white-space: nowrap;

			li:not(:last-of-type)
			{
				padding-right: 4px;
				border-right: 1px solid #888;
			}
		}
	}
}


@media only screen and (max-width: 1200px)
{
	#top_bar .left
	{
		display: none;
	}

	#top_bar .center
	{
		width: 80%;
		text-align: left;
	}
}

@media only screen and (max-width: 1000px)
{
	#top_bar
	{
		padding: 0 20px;
	}

	#title_bar .site_logo
	{
		scale: calc(10vw / 100px);
		width: calc(180px * (0.474vw / 100%) + 100px);
	}

	#title_bar h2
	{
		font-size: 32px;
	}

	.language_menu .language_label
	{
		display: none;
	}

	#store .main_content
	{
		flex-direction: column-reverse;
	}

	footer .content
	{
		flex-direction: column-reverse;
	}

	footer .content .footer_menu
	{
		justify-content: center;
	}
}

@media only screen and (max-width: 800px)
{
	.language_menu .options li
	{
		font-size: 20px;
	}

	#title_bar
	{
		padding: 20px;
		/*border-bottom: 2px solid var(--hilton_blue);*/
	}

	#title_bar .mobile_menu
	{
		display: flex;
	}

	#title_bar h2
	{
		font-size: 28px;
	}

	nav.desktop_menu
	{
		display: none;
	}

	/*#title_bar .site_message
	{
		width: 38px;
		height: 32px;
		font-size: 0px;
		opacity: 0;
	}*/

	footer .content .footer_menu
	{
		flex-direction: column;
		gap: 16px;
		margin: 16px 0;
	}

	footer .content .footer_menu li:not(:last-of-type)
	{
		border: none;
	}
}

@media only screen and (max-width: 650px)
{
	#top_bar .right
	{
		width: initial;
	}

	#title_bar
	{
		padding: 0px 20px;
	}

	#title_bar h2
	{
		font-size: 24px;
	}

	.language_menu .selected_option .language_name
	{
		display: none;
	}

	main
	{
		padding: 0 0 40px 0;
	}

	#store .main_content form
	{
		border: none!important;
	}
}

@media only screen and (max-width: 500px)
{
	#title_bar .site_logo
	{
		width: 80px;
	}

	#title_bar .phone, #title_bar .phone a
	{
		font-size: 15px;
	}

	#title_bar
	{
		gap: 10px;
	}

	#title_bar h1
	{
		font-size: calc(28px * 100vw / 500px);
	}

	#title_bar h2
	{
		margin: 0;
		font-size: 18px;
	}
}

@media only screen and (max-width: 420px)
{
	#title_bar .phone, #top_bar .center .phone a
	{
		font-size: 13px;
	}

	#title_bar h2
	{
		font-size: 18px;
	}
}

@media only screen and (max-width: 370px)
{
	#title_bar h1
	{
		font-size: calc(28px * 100vw / 550px);
	}

	#title_bar h2
	{
		font-size: 16px;
	}
}