/* Mobile menu wrapper - ensures toggle and container are siblings */
.zvafbb_mobile_menu_wrapper {
	position: relative;
	display: inline-block;
}

/* Mobile Safari compatible hiding approach */
.zvafbb_mobile_menu_container {
	display: flex;
	position: fixed;
	top: 0;
	left: -100vw;
	right: 0;
	bottom: 0;
	overflow-y: auto;
	overflow-x: hidden;
	width: 100vw;
	z-index: 1000;
	flex-direction: column;
	height: 100vh;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	opacity: 0;
	box-sizing: border-box;
	pointer-events: none; /* Prevent blocking when closed */
}

/* Menu open state */
.zvafbb_mobile_menu_container.zvafbb_menu-open {
	left: 0;
	opacity: 1;
	pointer-events: auto; /* Re-enable interaction when open */
}

.zvafbb_mobile_menu_slide{
	display:block;
	position:fixed;
	top:0;
	right:0;
	bottom:0;
	left:0;
	z-index: 10010;
}
/* Mobile menu container - simple class selector */
.zvafbb_mobile_menu_container{
	position: fixed !important;
	top: 0 !important;
	left: -100vw !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	z-index: 10000;
	flex-direction: column;
	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	opacity: 0 !important;
	box-sizing: border-box;
	pointer-events: none; /* Prevent blocking when closed */
	/* Background color and padding are set via frontend.css.php from module settings */
}

/* Ensure mobile menu appears above intelligent header clones */
.zvafbb_mobile_menu_container.zvafbb_menu-open {
	z-index: 10050 !important;
}

/* Header section (fixed at top) */
.zvafbb_menu_header {
	flex-shrink: 0;
	padding: 20px 20px 0 20px;
}

/* Scrollable menu section */
.zvafbb_menu_scrollable {
	flex: 1;
	max-height: calc(100vh - 200px); /* Prevent expansion beyond screen height */
	overflow-y: auto;
	overflow-x: hidden;
	padding: 20px;
	min-height: 0; /* Important for flexbox scrolling */
	position: relative;
	/* Hide scrollbar for webkit browsers */
	scrollbar-width: none; /* Firefox */
	-ms-overflow-style: none; /* IE and Edge */
}

/* Hide scrollbar for webkit browsers */
.zvafbb_menu_scrollable::-webkit-scrollbar {
	display: none;
}

/* Footer section (fixed at bottom) */
.zvafbb_menu_footer {
	flex-shrink: 0;
	padding: 0 20px 20px 20px;
}

/* Custom HTML content areas */
.zvafbb_menu_html_before,
.zvafbb_menu_html_after {
	margin: 16px 0;
	width: 100%;
	max-width: 480px;
}

.zvafbb_menu_html_before {
	margin-top: 0; /* Remove top margin for first element in header */
}

.zvafbb_menu_html_after {
	margin-bottom: 0; /* Remove bottom margin for first element in footer */
}

/* Menu open state */
.zvafbb_mobile_menu_container.zvafbb_menu-open {
	display: flex !important;
	visibility: visible !important;
	left: 0 !important;
	opacity: 1 !important;
	position: fixed !important;
	pointer-events: auto; /* Re-enable interaction when open */
	z-index: 10050 !important; /* Ensure it appears above intelligent header clones */
}

/* Backdrop blur effect - color is set via frontend.css.php */
.zvafbb_mobile_menu_container::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	backdrop-filter: blur(5px);
	z-index: -1;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.zvafbb_mobile_menu_container.zvafbb_menu-open::before {
	opacity: 1;
}
.zvafbb_mobile_menu_container ul.zvafbb_mobile_menu {
	/*position: relative;*/
	display:block;
}
/* Consistent container styling for all menu sections */
html body .zvafbb_menu_scrollable > div,
html body .zvafbb_menu_scrollable > ul{
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* Content width constraint */
.zvafbb_mobile_menu_container .zvafbb_menu_content {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
}
/* CSS Variables for Beaver Builder compatibility - Higher specificity */
:root,
html,
body,
.zvafbb_mobile_menu_toggle {
	--zvafbb-icon-size: var(--zvbb-icon-size, 40px) !important;
	--zvafbb-icon-weight: var(--zvbb-icon-thickness, 3px) !important;
}

.zvafbb_mobile_menu_toggle{
	position:relative;
	z-index: 10100;
	width: var(--zvafbb-icon-size, 40px) !important;
	height: var(--zvafbb-icon-size, 40px) !important;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	cursor: pointer;
	background-color: var(--zvbb-icon-bg-color, #ffffff);
	border-radius: 4px;
}

/* Ensure mobile menu toggle appears above intelligent header clones */
.zvafbb-clone .zvafbb_mobile_menu_toggle {
	z-index: 10150 !important;
}

/* When mobile menu is open, ensure cloned toggle stays above menu */
.zvafbb_mobile_menu_container.zvafbb_menu-open ~ * .zvafbb-clone .zvafbb_mobile_menu_toggle,
body:has(.zvafbb_mobile_menu_container.zvafbb_menu-open) .zvafbb-clone .zvafbb_mobile_menu_toggle {
	z-index: 10150 !important;
}

/* Dynamic sizing is handled by frontend.css.php - removed conflicting hardcoded values */
/* Menu list styling */
.zvafbb_mobile_menu_container ul{
		list-style: none;
		margin: 0;
		padding: 0;
		max-width: 100vw;
		box-sizing: border-box;
}

.zvafbb_mobile_menu_container ul a{
	display:block;
	padding:16px 0;
	transition: all 0.3s ease;
}

.zvafbb_mobile_menu_container a:hover{
	text-decoration:none;
	opacity: 0.8;
}

.zvafbb_mobile_menu_toggle span {
	display: block;
	width: 100%;
	height: var(--zvafbb-icon-weight, 3px) !important;
	border-radius: calc(var(--zvafbb-icon-weight, 3px) / 2) !important;
	transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.35);
	transform-origin: center center;
	position: relative;
	background-color: var(--zvbb-icon-color, #000000);
}

/* Perfect X-shaped cross animation with container rotation */
.zvafbb_mobile_menu_toggle.zvafbb_zv_close {
	transform: rotate(180deg);
	transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.35);
}

/* X animation transforms - using CSS variables for dynamic sizing */
.zvafbb_mobile_menu_toggle.zvafbb_zv_close span:nth-child(1) {
	background-color: var(--zvbb-icon-color, #000000);
	transform: rotate(45deg) translate(calc((var(--zvafbb-icon-size, 40px) - var(--zvafbb-icon-weight, 2px)) / 4), calc(var(--zvafbb-icon-size, 40px) / 4));
}
.zvafbb_mobile_menu_toggle.zvafbb_zv_close span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0);
}
.zvafbb_mobile_menu_toggle.zvafbb_zv_close span:nth-child(3) {
	background-color: var(--zvbb-icon-color, #000000);
	transform: rotate(-45deg) translate(calc((var(--zvafbb-icon-size, 40px) - var(--zvafbb-icon-weight, 2px)) / 4), calc(-1 * var(--zvafbb-icon-size, 40px) / 4));
}

/* Search input consistent styling */
.zvafbb_search_input_shell{
	position:relative;
	width:100%;
	max-width: 480px;
	margin: 0 auto;
	box-sizing: border-box;
}

.zvafbb_search_input_shell input {
	width: 100%;
	border-radius: 40px;
	border: 1px solid rgba(0,0,0,0.1);
	padding: 16px 32px;
	background: rgba(0, 0, 0, 0.05);
	color: inherit;
	backdrop-filter: blur(10px);
	transition: all 0.3s ease;
	box-sizing: border-box;
}

.zvafbb_search_input_shell input:focus {
	outline: none;
	border-color: rgba(0,0,0,0.2);
	background: rgba(0, 0, 0, 0.1);
}

.zvafbb_menu_footer a.zvafbb_search_input_button{
	position:absolute;
	display:flex;
	justify-content:center;
	align-items:center;
	right:4px;
	top:4px;
	bottom:4px;
	aspect-ratio:1/1;
	border-radius:100%;
	cursor:pointer;
	user-select:none;
	background: rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
}

.zvafbb_menu_footer a.zvafbb_search_input_button:hover {
	background: rgba(0, 0, 0, 0.25);
}

input.zvafbb_search_input::placeholder{
	color: currentColor;
	opacity: 0.6;
}

/** TRANSLATEPRESS - Consistent styling */
.zvafbb_menu_footer .trp-language-switcher{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	box-sizing: border-box;
}

.zvafbb_menu_footer .trp-language-switcher a {
	padding: 8px 16px 8px 8px;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 100px;
	text-transform: uppercase;
	font-size: .9em;
	color: inherit;
	text-decoration: none;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 0, 0, 0.1);
}

.zvafbb_menu_footer .trp-language-switcher a:hover {
	background: rgba(0, 0, 0, 0.15);
	text-decoration: none;
}

.zvafbb_mobile_menu_container img.trp-language-flag {
	width: 32px;
	margin-right: 8px;
	background:#fff;
	border-radius: 100%;
	padding: 2px;
}

.zvafbb_mobile_menu ul {
	list-style: none;
	margin: 0;
}
.zvafbb_mobile_menu{
	padding:0;
}

.zvafbb_mobile_menu ul li a {
	color: inherit;
	text-decoration: none;
	display: block;
}

/* Bottom bar consistent styling */
.zvafbb_menu_footer .bottom-bar {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	text-align: center;
	padding: 16px 0 0 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
}

.zvafbb_menu_footer .bottom-bar a {
	color: inherit;
	text-decoration: none;
	opacity: 0.8;
	font-size: 14px;
	transition: opacity 0.3s ease;
}

.zvafbb_menu_footer .bottom-bar a:hover {
	opacity: 1;
	text-decoration: none;
}

/* Hide Submenu */
.zvafbb_mobile_menu .sub-menu {
	position: absolute;
	top: 0;
	left: 0;
	width: 100vw;
	height: 0; /* Hide invisible menus */
	z-index: 10001;
	display:none;
	overflow: hidden;
	/* Background color is set via frontend.css.php */
	/* Submenus are positioned absolutely so they don't affect main menu height */
}

/* When submenu is open, make it overlay but still affect scrollable area */
.zvafbb_mobile_menu .sub-menu.zvafbb_submenu-open {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	min-height: calc(100vh - 200px); /* At least as high as scrollable section */
	max-height: calc(100vh - 200px);
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
	z-index: 10002;
	background-color: inherit;
	/* Fallback background color - will be overridden by dynamic CSS */
	background-color: var(--zvafbb-menu-bg, #ffffff) !important;
}

.zvafbb_mobile_menu .sub-menu.zvafbb_submenu-open::-webkit-scrollbar {
	display: none;
}

/* Full-screen overlay effect for submenu */
.zvafbb_mobile_menu .zvafbb_submenu-open {
	display: block;
	animation: slideIn 0.3s forwards;
}
.zvafbb_mobile_menu .zvafbb_submenu-close {
	display: block;
	animation: slideOut 0.3s forwards;
}

@keyframes slideIn {
	from {
		transform: translateX(100vw);
	}
	to {
		transform: translateX(0);
	}
}
@keyframes slideOut {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(100vw);
	}
}

/* Style for Back button - now handled by frontend.css.php for consistency */
.zvafbb_back-to-main {
	display: block;
	padding: 16px 0;
	border-bottom: 1px solid rgba(0,0,0,0.1);
	position: relative;
	cursor: pointer;
	padding-left: 32px !important;
}

/* Back button - Using same chevron style as submenu indicators */
.zvafbb_back-to-main::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 50%;
    border-bottom: 2px solid #000000;
    width: 24px;
    height: 24px;
    transform: translateY(-50%) rotate(135deg);
}

/* Fallback submenu indicators (overridden by frontend.css.php) */
.zvafbb_mobile_menu_container .menu-item-has-children > a,
.zvafbb_mobile_menu_container .zvafbb_mobile_menu .menu-item-has-children > a {
	position: relative;
}


/* Menu image wrapper */
.zvafbb_menu_logo_wrapper {
	width: 100%;
	margin-bottom: 20px;
}

.zvafbb_menu_logo_wrapper-left {
	text-align: left;
}

.zvafbb_menu_logo_wrapper-center {
	text-align: center;
}

.zvafbb_menu_logo_wrapper-right {
	text-align: right;
}

/* Default menu image styling (can be overridden by frontend.css.php) */
.zvafbb_mobile_menu_container .zvafbb_menu_logo {
	width: 200px;
	height: auto;
	max-width: 100%;
	display: inline-block;
	margin: 0;
	vertical-align: middle;
}

/* Image link styling */
.zvafbb_menu_logo_wrapper a {
	display: inline-block;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.zvafbb_menu_logo_wrapper a:hover {
	opacity: 0.8;
}
.zvafbb_menu_footer .trp-language-switcher{
	height:auto !important;
}

/* Consistent section spacing and container styling */
.zvafbb_menu_section {
	width: 100%;
	max-width: 480px;
	margin: 0 auto 20px auto;
	box-sizing: border-box;
}

.zvafbb_menu_section:last-child {
	margin-bottom: 0;
}

.zvafbb_menu_section h4,
.zvafbb_menu_section h5 {
	margin: 0 0 16px 0;
	font-size: 18px;
	font-weight: 600;
	color: inherit;
	text-align: left;
}

/* Social Media Links Styling */
.zvafbb_social_links {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	box-sizing: border-box;
}

.zvafbb_social_grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
	width: 100%;
}

.zvafbb_social_link {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	background: rgba(0, 0, 0, 0.1);
	border-radius: 12px;
	text-decoration: none;
	color: inherit;
	transition: all 0.3s ease;
	backdrop-filter: blur(10px);
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
}

.zvafbb_social_link:hover {
	background: rgba(0, 0, 0, 0.15);
	transform: translateY(-2px);
	text-decoration: none;
	color: inherit;
}

.zvafbb_social_link .social-icon {
	font-size: 20px;
	flex-shrink: 0;
}

.zvafbb_social_link .social-name {
	font-size: 14px;
	font-weight: 500;
}

/* Contact Information Styling */
.zvafbb_contact_info {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	box-sizing: border-box;
}

.zvafbb_contact_item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	box-sizing: border-box;
}

.zvafbb_contact_item:last-child {
	border-bottom: none;
}

.zvafbb_contact_item .contact-icon {
	font-size: 18px;
	flex-shrink: 0;
	width: 24px;
	text-align: center;
}

.zvafbb_contact_item a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.zvafbb_contact_item a:hover {
	opacity: 0.8;
	text-decoration: none;
}

.zvafbb_contact_item span:not(.contact-icon) {
	font-size: 14px;
	line-height: 1.4;
}

/* Custom HTML content styling */
.zvafbb_menu_html_before,
.zvafbb_menu_html_after {
	margin: 16px 0;
	width: 100%;
}

.zvafbb_menu_html_before {
	margin-bottom: 24px;
}

.zvafbb_menu_html_after {
	margin-top: 24px;
}

/* Ensure HTML content inherits menu styling */
.zvafbb_menu_html_before *,
.zvafbb_menu_html_after * {
	color: inherit;
	font-family: inherit;
}

/* Allow for custom styling within HTML content */
.zvafbb_menu_html_before h1,
.zvafbb_menu_html_before h2,
.zvafbb_menu_html_before h3,
.zvafbb_menu_html_before h4,
.zvafbb_menu_html_before h5,
.zvafbb_menu_html_before h6,
.zvafbb_menu_html_after h1,
.zvafbb_menu_html_after h2,
.zvafbb_menu_html_after h3,
.zvafbb_menu_html_after h4,
.zvafbb_menu_html_after h5,
.zvafbb_menu_html_after h6 {
	margin: 0 0 12px 0;
	font-weight: 600;
}

.zvafbb_menu_html_before p,
.zvafbb_menu_html_after p {
	margin: 0 0 12px 0;
	line-height: 1.5;
}

.zvafbb_menu_html_before a,
.zvafbb_menu_html_after a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.zvafbb_menu_html_before a:hover,
.zvafbb_menu_html_after a:hover {
	opacity: 0.8;
	text-decoration: none;
}