/*!
Theme Name: 3W Media Sandbox
Theme URI: https://www.3wmedia.nl/
Author: 3wmedia.nl
Author URI: https://www.3wmedia.nl/
Description: <strong>A superflexible and responsive Business Theme by 3w Media</strong>
Version: 1.0.0
Tested up to: 6.5.5
Requires PHP: 8.2.21
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sandbox-3wmedia
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


/* Main container styling */
#menu-booking {
    margin: 0;
    padding: 0;
    list-style: none;
    gap: 10px; /* Space between language items */
	background-color: var(--w3-brown);
	width: 110px;
    border-radius: 10px;
	display: flex;
	align-items: center;
	transition: all 0.2s ease;
}

#menu-booking:hover {
	border-radius: 10px 10px 0 0;
}

/* Language item styling */
#menu-booking > li.menu-item {
    position: relative;
    margin: 0;
    padding: 0;
	flex: 1;
	cursor: pointer;
}

/* Flag link styling */
#menu-booking > li.menu-item > a {
    display: flex;
    align-items: center;
	justify-content: space-between;
    padding: 12px 10px;
    border-radius: 4px;
    transition: all 0.3s ease;
	pointer-events: none;
}

#menu-booking > li.menu-item > a::after {
	content: '';
	background-image: url("data:image/svg+xml,%3Csvg width='10' height='5' viewBox='0 0 10 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.64103 4.89801C4.51354 4.89806 4.39085 4.84941 4.29803 4.76201L0.158032 0.864009C0.0685144 0.771702 0.0179999 0.648455 0.0169834 0.519874C0.0159669 0.391293 0.0645266 0.267262 0.152574 0.173551C0.240621 0.0798399 0.361387 0.0236521 0.489782 0.0166608C0.618177 0.00966948 0.74433 0.0524123 0.842032 0.136009L4.64003 3.71201L8.44003 0.136009C8.5367 0.04504 8.66555 -0.00380082 8.79823 0.000231208C8.86393 0.00222767 8.92859 0.0171447 8.98853 0.0441305C9.04846 0.0711163 9.10249 0.109642 9.14753 0.157509C9.19258 0.205376 9.22775 0.261646 9.25105 0.323107C9.27434 0.384567 9.28531 0.450015 9.28331 0.515712C9.28131 0.581409 9.2664 0.64607 9.23941 0.706003C9.21243 0.765935 9.1739 0.819966 9.12603 0.865009L4.98403 4.76201C4.89122 4.84941 4.76852 4.89806 4.64103 4.89801Z' fill='white'/%3E%3C/svg%3E%0A");
	display: block;
    width: 15px;
    height: 7px;
    background-repeat: no-repeat;
    background-size: cover;
}

#menu-booking > li.menu-item:hover > a::after {
	transform: scale(-1);
}

/* Flag image styling */
.wpml-ls-flag {
    width: 20px;
    height: 20px;
	border-radius: 50%;
	border: 1px solid #FFF;
}

/* Dropdown submenu styling */
#menu-booking > li.menu-item > .sub-menu {
	position: absolute;
	top: 100%;
	left: 0; right: 0;
	list-style: none;
    border-top: 1px solid #ddd;
    padding: 5px 0;
    margin: 0;
    display: none;
    z-index: 1000;
	background-color: var(--w3-brown);
	border-radius: 0 0 10px 10px;
	animation: fadeIn 0.3s ease forwards;
}

/* Show dropdown on hover */
#menu-booking > li.menu-item:hover > .sub-menu {
    display: block;
}

/* Submenu item styling */
#menu-booking > li.menu-item > .sub-menu > li {
    margin: 0;
    padding: 0;
}

/* Submenu link styling */
#menu-booking > li.menu-item > .sub-menu > li > a {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    white-space: nowrap;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
}


/* Fade-in animation for dropdown */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Mobile responsiveness */
@media (max-width: 1199px) {
	#menu-booking {
		margin-top: -4rem;
		margin-bottom: auto;
	}
}