/**
 * Menu Elementor Widget
 *
 * The selected orientation is the default orientation.
 * The responsive-device class provides a CSS breakpoint at which
 * the selected orientation is applied.
 */

.menu-elementor-widget {
	width: 100%;
}

.menu-elementor-widget .menu-elementor-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 24px;
}

.menu-elementor-widget .menu-elementor-list li {
	margin: 0;
	padding: 0;
}

.menu-elementor-widget .menu-elementor-list.light li {
	&.button a{
		padding: 18px 48px;
		border-radius: 30px;
		color:var(--color_contrast);
		border: 2px solid transparent;
		background:
			linear-gradient(var(--e-global-color-primary), var(--e-global-color-primary)) padding-box,
			linear-gradient(90deg, #FF8800, #4C7FFF) border-box;
			
	}
}

.menu-elementor-widget .menu-elementor-list.dark li {
	&.button a{
		background-color: var(--e-global-color-accent);
		padding: 18px 48px;
		border-radius: 30px;
		color:var(--color_contrast);
	}
}

.menu-elementor-widget .menu-elementor-list.light a {
	color:#fff;
}

.menu-elementor-widget .menu-elementor-list.dark a {
	color:var(--e-global-color-primary);
}

.menu-elementor-widget .menu-elementor-list.underline a {
	&:active, &:hover{
		border-bottom: 3px solid var(--e-global-color-accent);
	}
}

.menu-elementor-widget .menu-elementor-list.color a {
	&:active, &:hover{
		color: var(--e-global-color-accent);
	}
}

.menu-elementor-widget .menu-elementor-list a {
	display: block;
	text-decoration: none;
	font-family: var(--google_sans_font);
	font-weight: bold;
	display: inline-block;
	padding: 12px 0 12px;
	border-bottom: 3px solid transparent;
	text-transform: uppercase;
	font-size: 14px;
}

/* Hamburger button */
.menu-toggle {
	width: 44px;
	height: 44px;
	border: none;
	background: transparent !important;
	cursor: pointer;
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	padding: inherit !important;
}

.menu-toggle.light span {
	background: #fff;
}

.menu-toggle.dark span {
	background: #333;
}

.menu-toggle span {
	display: block;
	width: 26px;
	height: 3px;
	border-radius: 2px;
}
	
/* Modal */
.mobile-menu-modal {
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(0, 0, 0, 0.6);
	display: flex;
	justify-content: flex-end;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Modal open */
.mobile-menu-modal.active {
	opacity: 1;
	visibility: visible;
}

/* Menu container */
.mobile-menu {
	position: relative;
	width: min(320px, 85%);
	height: 100%;
	background: var(--e-global-color-primary);
	padding: 70px 30px 30px;
	transform: translateX(100%);
	transition: transform 0.3s ease;
}

.mobile-menu-modal.active .mobile-menu {
	transform: translateX(0);
}

/* Close button */
.menu-close {
	position: absolute;
	top: 20px !important;
	right: 20px !important;
	width: 40px !important;
	height: 40px !important;
	border: none !important;
	background-color: transparent !important;
	cursor: pointer !important;
	font-size: 30px !important;
	line-height: 1 !important;
	color: #fff !important;
}

/* Menu list */
.mobile-menu ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.mobile-menu li {
	border-bottom: 1px solid #eee;

	&:last-child, &:nth-last-child(2) {
		border-bottom: none;
	}

	&.button a{
		margin-top:10px;
		background-color: var(--e-global-color-accent);
		padding: 18px 48px;
		border-radius: 30px;
		color:var(--color_contrast);
		text-align: center;
	}
}

.mobile-menu a {
	color:var(--e-global-color-primary);
	font-family: var(--google_sans_font);
	font-weight: bold;
	display: block;
	padding: 18px 0;
	color: #fff;
	text-decoration: none;
	font-size: 18px;
}

.mobile-menu a:hover {
	color: #666;
}

/* Prevent scrolling when menu is open */
body.menu-open {
	overflow: hidden;
}
/*
 * Responsive behavior.
 * Phone: orientation applies from 767px and below.
 * Tablet: orientation applies from 1024px and below.
 * Desktop: orientation is the desktop/default behavior.
 */

@media (min-width: 1025px) {

	.menu-elementor-widget .menu-elementor-list.desktop-horizontal {
		flex-direction: row;
	}
	.menu-elementor-widget .menu-elementor-list.desktop-vertical {
		gap: 0px;
		flex-direction: column;
	}

	.menu-toggle.desktop{
		display: flex;
	}
	.menu-elementor-widget.desktop{
		display: none;
	}
}

@media (max-width: 1024px) {
	.menu-elementor-widget .menu-elementor-list.tablet-horizontal {
		flex-direction: row;
	}
	.menu-elementor-widget .menu-elementor-list.tablet-vertical {
		flex-direction: column;
		gap: 0px;
	}

	.menu-toggle.tablet{
		display: flex;
	}
	.menu-elementor-widget.tablet{
		display: none;
	}
}

@media (max-width: 767px) {
	.menu-elementor-widget .menu-elementor-list.mobile-horizontal {
		flex-direction: row;
	}
	.menu-elementor-widget .menu-elementor-list.mobile-vertical {
		flex-direction: column;
		gap: 0px;
	}
	.menu-toggle.phone{
		display: flex;
	}
	.menu-elementor-widget.phone{
		display: none;
	}
}

.menu-widget-empty {
	padding: 1rem;
	border: 1px dashed #aaa;
}