/* ==========================================================================
   MOBILE MENU FLYOUT STYLING
   Styling for the mobile menu that appears on smaller screens
   ========================================================================== */

/* Container for submenu items in mobile menu - creates flex layout */
.fl-menu-mobile-flyout .fl-has-submenu-container {
	display: flex;
	justify-content: space-between; /* Places items at opposite ends */
	align-items: center; /* Centers items vertically */
	width: 100%;
	padding: 10px 15px;
	position: relative;
}

/* Styles menu item text in mobile menu */
.fl-menu-mobile-flyout .fl-has-submenu-container a {
	flex: 1; /* Takes available space */
	text-align: left;
	margin: 0;
	padding: 0;
}

/* Styles toggle arrow button for submenus in mobile menu */
.fl-menu-mobile-flyout .fl-has-submenu-container .fl-menu-toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	height: 30px;
	position: relative;
	cursor: pointer; /* Shows pointer cursor on hover */
	margin: 0;
}

/* Creates down arrow icon for submenu toggle using Font Awesome */
.fl-menu-mobile-flyout .fl-has-submenu-container .fl-menu-toggle:before {
	content: "\f107"; /* Font Awesome down arrow code */
	font-family: "Font Awesome 5 Free", "FontAwesome";
	font-weight: 900; /* Bold weight for better visibility */
	position: static;
	transform: none;
	color: #333; /* Dark gray color */
	font-size: 16px;
	line-height: 1;
}

/* Removes default spacing for mobile menu items */
.fl-menu-mobile-flyout ul.menu li {
	padding: 0;
	margin: 0;
}

/* Adds border and padding to main mobile menu */
nav .fl-menu-mobile-flyout #menu-main-menu {
	padding-top: 30px !important;
	padding-bottom: 30px !important;
	border-top: 1px solid #8080808c !important; /* Semi-transparent gray top border */
	border-bottom: 1px solid #8080808c !important; /* Semi-transparent gray bottom border */
}

/* Styles standard menu items without submenus in mobile menu */
.fl-menu-mobile-flyout ul.menu > li > a {
	display: block;
	padding: 10px 15px;
	text-align: left;
}

/* Indents submenu items in mobile menu for visual hierarchy */
.fl-menu-mobile-flyout ul.sub-menu {
	padding-left: 20px; /* Indentation for nested levels */
}

/* Adjusts position of toggle icon in horizontal menu */
.fl-menu-horizontal.fl-toggle-none .fl-menu-toggle {
	margin: -5px 0 0 !important; /* Negative top margin to align properly */
}

/* ==========================================================================
   MOBILE MENU CONTAINER
   Main container styles for the mobile menu flyout
   ========================================================================== */

/* Sets width and background for mobile menu flyout */
.fl-menu-mobile-flyout {
	width: 100% !important; /* Full width */
	background-color: #fff !important; /* White background */
	padding: 0 !important;
	box-shadow: none !important; /* Removes default shadow */
}

/* Positions mobile menu off-screen when closed */
.fl-menu-mobile-toggle:not(.fl-active) ~ nav .fl-menu-mobile-flyout {
	right: -1200px !important; /* Positions menu off-screen to the right */
	top: 62px !important; /* Positions below header */
}

/* Positions mobile menu at top when open */
.fl-menu-mobile-toggle.fl-active ~ nav .fl-menu-mobile-flyout {
	top: 62px !important; /* Positions below header */
}

/* Removes default spacing from mobile menu list */
.fl-menu-mobile-flyout ul.menu {
	margin: 0 !important;
	padding: 0 !important;
}

/* Removes default margins from top-level items */
.fl-menu-mobile-flyout ul.menu > li {
	margin: 0 !important;
}

/* Sets font size, padding and text color for top-level menu items */
.fl-menu-mobile-flyout ul.menu > li > a,
.fl-menu-mobile-flyout ul.menu > li > .fl-has-submenu-container > a {
	padding: 15px 20px !important; /* Comfortable padding */
	font-size: 16px !important;
	color: #333 !important; /* Dark gray text */
	font-weight: normal !important;
}

/* Sets up flex layout for submenu containers in mobile menu */
.fl-menu-mobile-flyout .fl-has-submenu-container {
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	padding: 0 !important;
}

/* Styles right arrow icon for expandable menu items */
.fl-menu-mobile-flyout .fl-menu-toggle:before {
	content: "\f054" !important; /* FontAwesome right arrow code */
	font-family: "Font Awesome 5 Free", "FontAwesome" !important;
	font-weight: 900 !important;
	font-size: 12px !important;
	color: #666 !important; /* Medium gray */
	position: static !important;
	transform: none !important;
}

/* Changes arrow to down arrow when submenu is active/expanded */
.fl-menu-mobile-flyout
	.fl-has-submenu.fl-active
	> .fl-has-submenu-container
	.fl-menu-toggle:before {
	content: "\f078" !important; /* FontAwesome down arrow code */
}

/* Removes default padding and margins from submenus */
.fl-menu-mobile-flyout ul.sub-menu {
	padding: 0 !important;
	margin: 0 !important;
}

/* Removes default margins from first-level submenu items */
.fl-menu-mobile-flyout ul.sub-menu > li {
	margin: 0 !important;
}

/* Removes bottom border from last submenu item */
.fl-menu-mobile-flyout ul.sub-menu > li:last-child {
	border-bottom: none; /* Removes bottom border for cleaner look */
}

/* Sets padding and font weight for first-level submenu text */
.fl-menu-mobile-flyout ul.sub-menu > li > a,
.fl-menu-mobile-flyout ul.sub-menu > li > .fl-has-submenu-container > a {
	padding: 15px 20px 15px 30px !important; /* Extra left padding for hierarchy */
	font-weight: 600 !important; /* Semi-bold for emphasis */
	color: #222 !important; /* Darker text for better readability */
}

/* Sets padding and styling for second-level submenu items */
.fl-menu-mobile-flyout ul.sub-menu ul.sub-menu > li > a {
	padding: 12px 20px 12px 45px !important; /* Further indented for hierarchy */
	font-weight: normal !important;
	color: #555 !important; /* Medium gray text */
}

/* ==========================================================================
   MOBILE MENU CLOSE BUTTON
   Custom styling for mobile menu toggle button
   ========================================================================== */

/* Hides default hamburger menu elements */
.fl-hamburger-menu-top,
.fl-hamburger-menu-middle,
.fl-hamburger-menu-bottom,
.fl-menu-mobile-close {
	display: none !important;
}

/* Creates custom hamburger menu icon using SVG */
.hamburger-menu {
	width: 30px;
	height: 30px;
	background-image: url("https://geely.rjong.se/wp-content/uploads/2025/03/menu.svg"); /* Menu icon SVG */
	background-size: contain;
	background-repeat: no-repeat;
	top: 0px;
}

/* Changes to X icon when menu is active/open */
.fl-active .hamburger-menu {
	background-image: url("https://geely.rjong.se/wp-content/uploads/2025/03/x.svg"); /* X icon SVG */
	top: -5px !important; /* Slight adjustment for alignment */
}

/* Applies black and white filter to icon in scrolled header */
.bb-powerpack-header-scrolled .hamburger-menu {
	filter: grayscale(100%) brightness(0%); /* Makes icon black */
}

/* ==========================================================================
   MOBILE BOOK NOW BUTTON
   Styling for the booking button in mobile menu
   ========================================================================== */

/* Container for booking button with centered alignment */
.mobile-book-btn-wrapper {
	padding: 40px;
	text-align: center;
	margin-top: 20px; /* Space above button */
	display: flex;
	justify-content: center; /* Horizontally centers the button */
	position: relative; /* Ensure proper positioning */
	z-index: 100; /* Ensure button appears above other elements */
	width: 100%; /* Full width of container */
	font-family: "LINESeedSansTH", Verdana, Arial, sans-serif !important;
  font-size: 14px;
}

/* Styling for the booking button itself */
.mobile-book-btn {
	display: inline-block;
	width: 180px;
	padding: 8px 24px;
	border: 1px solid #000; /* Black border */
	border-radius: 4px; /* Rounded corners */
	text-align: center;
	font-size: 16px;
	text-decoration: none; /* Removes underline */
	color: #000; /* Black text */
}

/* Hover state for booking button - inverts colors */
.mobile-book-btn:hover {
	background-color: #000; /* Black background on hover */
	color: #fff; /* White text on hover */
}