/* ================================================== */
/* ESTILOS GERAIS DO MENU MOBILE - VZ MOBILE MENU */
/* ================================================== */

/* Versão Desktop - Esconde o toggle */
.vzmm-mobile-menu, 
.vzmm-toggle {
    display: none;
}


    /* Exibe elementos mobile */
    /* .vzmm-mobile-menu, 
    .vzmm-toggle {
        display: block;
    } */
    
    /* Container principal - base */
    .vzmm-mobile-menu {
       // position: fixed;
       // top: var(--menu-top-distance, 30px);
        z-index: 1000;
    }

    /* ===================== */
    /* BOTÃO TOGGLE (SANDUÍCHE) */
    /* ===================== */
    /* Botão toggle - posicionamento dinâmico */
    .vzmm-toggle {
        position: fixed;
        background: #000;
        color: white;
        border: none;
        padding: 5px 8px;
        border-radius: 4px;
        z-index: 1001;
        display: flex !important;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        width: 50px;
        cursor: pointer;
    }

    /* Ícone hamburguer */
    .vzmm-toggle::before {
        content: "☰";
        font-size: 20px;
        line-height: 1;
    }

    /* Texto "MENU" (fechado) */
    .vzmm-toggle-text::before {
        content: "MENU";
        font-size: 9px;
        font-weight: bold;
        display: block;
    }

    /* Estado ativo (aberto) */
    .vzmm-toggle.active::before {
        content: "×";
    }
    .vzmm-toggle.active .vzmm-toggle-text::before {
        content: "FECHAR";
    }
	
	.vzmm-hide-labels .vzmm-toggle-text::before {
		content: "";
	}
	.vzmm-hide-labels .vzmm-toggle.active .vzmm-toggle-text::before {
		content: "";
	}

    /* ===================== */
    /* POSICIONAMENTO ESQUERDA/DIREITA */
    /* ===================== */
    
	/* Botão à direita (padrão) */
    .vzmm-right .vzmm-toggle {
        left: auto;
    }

    /* Botão à esquerda */
    .vzmm-left .vzmm-toggle {
        right: auto;
    }
	
	/* Menu à direita (padrão) */
    .vzmm-right .vzmm-menu-container {
        right: 0;
        left: auto;
        transform: translateX(100%);
    }
    .vzmm-right .vzmm-menu-container.active {
        transform: translateX(0);
        padding-bottom: 15%;
    }

    /* Menu à esquerda */
    .vzmm-left .vzmm-menu-container {
        left: 0;
        right: auto;
        transform: translateX(-100%);
    }
    .vzmm-left .vzmm-menu-container.active {
        transform: translateX(0);
        padding-bottom: 15%;
    }
	
    /* ===================== */
    /* CONTAINER DO MENU */
    /* ===================== */
	.vzmm-menu-container {
        transition: transform 0.3s ease;
        display: none;
        position: fixed;
        background: #c82d2d;
        color: white;
        top: 0;
        width: calc(100% - 30px);
        max-width: 350px;
        max-height: 100vh;
        z-index: 1000;
        padding: 20px 0;
        border-radius: 8px;
        overflow-y: auto;
        box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    }

    /* ===================== */
    /* ESTILOS DO MENU */
    /* ===================== */
    .vzmm-menu-container ul {
        list-style: none;
        padding-left: 0;
        margin: 0;
    }

    .vzmm-menu-container li.menu-item {
        margin-bottom: 8px;
        padding: 0;
    }

    .vzmm-menu-container li.menu-item:first-child {
        padding: 0;
    }

    .vzmm-menu-container a {
        color: white !important;
        display: block;
        padding: 8px 30px;
        border-radius: 4px;
        text-decoration: none;
    }

    .vzmm-menu-container a:hover {
        background: #c5393d;
    }

    /* Submenus */
    .vzmm-menu-container .sub-menu {
        display: none;
        padding-left: 15px !important;
        margin-top: 5px;
    }

    .vzmm-menu-container .menu-item-has-children.active > .sub-menu {
        display: block;
    }

    /* Ícone de submenu (+/-) */
    .vzmm-menu-container .menu-item-has-children > a::after {
        content: "+";
        font-weight: bold;
        float: right;
        margin-left: 10px;
        transition: transform 0.3s ease;
    }

    .vzmm-menu-container .menu-item-has-children.active > a::after {
        content: "-";
    }

    /* ===================== */
    /* CAMPO DE BUSCA */
    /* ===================== */

    .vzmm-search {
        margin-left: 30px;
        margin-bottom: 15%;
    }

    .vzmm-search-item {
        margin-top: 15px;
		margin-left: -30%;
        padding-top: 20px !important;
        border-top: 1px solid rgba(255,255,255,0.3);
    }

    .vzmm-search form {
        display: flex;
        gap: 5px;
    }

    .vzmm-search input {
        width: 100%;
        padding: 8px;
        border: none;
        border-radius: 4px;
    }
	/* Ícone da busca */
	.vzmm-search button {
		background: transparent;
		border: none;
		padding: 0;
		width: 30px;
		height: 30px;
		text-indent: -9999px;
	}

	/* Ícone da home */
	.vzmm-menu-container .menu-item-home > a::before {
		display: inline-block;
		width: 21px;
		height: 20px;
		margin-right: 8px;
		vertical-align: middle;
	}
	
	/* Estilo base para ícones */
	.vzmm-menu-container li a:before {
		font-weight: 900;
		width: 1em;
		text-align: center;
	}

	/* Espaçamento para submenus */
	.vzmm-menu-container .sub-menu li a:before {
		margin-left: 10px;
		opacity: 0.8;
	}

	.vzmm-menu-container .sub-menu .sub-menu li a:before {
		margin-left: 20px;
		opacity: 0.6;
	}